/* =====================================================================
   KIKI-ENA · v2 „Die Umarmung“ — Startseite (v2-home.css)
   Nur die Startseiten-Sektionen aus front-page.php. Komponenten-Basis (.btn .chip .card .corner .note .ticks
   .h2 .lead .wrap .sec .shead .kv2-grid .badge .softnote .more) kommt aus v2-base.css und wird hier nur ergänzt.
   Grammatik 1:1 snuggle.css §7–§15 · Farben: Kiki-Tokens (DESIGN §2) · mobile-first.
   Abstände: jede Sektion trägt ihren eigenen Block-Abstand (--sec); aufeinanderfolgende Sektionen wechseln
   immer die Fläche (creme → mint → creme → blush → sky → creme → mint → creme → Bild), daher kein Doppel-Weißraum.

   1 Hero · 2 Momente · 3 Lieblinge · 4 Gefühl/Kita · 5 Geschenk + Sets · 6 Maker · 7 So kommt es zu dir
   8 Magazin (.card--post) · 9 Newsletter · 10 Bewegung
   ===================================================================== */

/* ---------- 1 · Hero ----------
   Mobil: Bild oben (Hochformat-Quelle, ca. 62svh) mit Perlenecke, Text darunter auf creme.
   Ab 1000 px: Bild absolut rechts 58 %, Text links, weicher creme-Verlauf nur dort, wo die Headline ins Bild ragt. */
.hero{position:relative;padding:8px var(--gutter) 0}
.hero__media{height:62vh;height:62svh;min-height:360px;max-height:640px;box-shadow:var(--shadow)}
.hero__media .hero__img{object-position:var(--pos-m,50% 58%);transform-origin:58% 40%}
.hero__wrap{padding-inline:0}
.hero__text{padding:28px 0 40px}
.kiki-frontpage .hero__h{
  font-family:var(--f-display);font-weight:400;font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.05;letter-spacing:-.01em;
  color:var(--cocoa);text-transform:none;text-wrap:balance;margin:.1em 0 .35em;
  --theme-font-size:clamp(2.6rem,6.2vw,4.6rem);--theme-line-height:1.05;
}
.hero .note--hero{margin-bottom:.2rem}
.hero .note--hero .ico{width:.8em;height:.8em;vertical-align:-.05em}
.hero__sub{font-size:1.125rem;line-height:1.6;color:var(--cocoa-70);max-width:34rem;margin:0 0 1.6rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
/* Trust-Chips (Snuggle .tchips) auf Basis von .trust: Pills statt Kacheln */
.hero .trust{display:flex;flex-wrap:wrap;gap:8px 10px;grid-template-columns:none;margin:0;padding:0;list-style:none}
.hero .trust li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:var(--r-pill);background:var(--mint);font-size:.9rem;font-weight:600;line-height:1.3;color:var(--cocoa)}
.hero .trust .ico{width:18px;height:18px;padding:2px;border-radius:50%;background:var(--success);color:var(--white);stroke-width:2.6}
@media (max-width:420px){
  .hero__ctas .btn{flex:1 1 100%}
}
@media (min-width:1000px){
  /* Container = Hero-Breite (ohne Scrollbalken) → Textspalte endet exakt vor der Bildkante */
  .hero{display:flex;min-height:clamp(560px,calc(92vh - 164px),820px);padding:0;container-type:inline-size;--hero-gap:clamp(32px,3vw,48px)}
  .hero__media{position:absolute;top:10px;bottom:0;right:var(--gutter);width:58%;height:auto;min-height:0;max-height:none}
  .hero__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse 52% 46% at 0% 50%,rgba(255,251,247,.82) 0%,rgba(255,251,247,.45) 45%,rgba(255,251,247,0) 100%)}
  .hero__media .hero__img{object-position:var(--pos,62% 40%)}
  .hero__wrap{position:relative;z-index:2;display:flex;align-items:center;padding-inline:var(--gutter)}
  /* Textspalte: Bildkante (42 % − rechter Gutter) minus Textbeginn (.wrap-Rand) minus Luft (32–48 px).
     So stößt kein Text ans Bild – in allen Sprachen, 1000 px bis Breitbild. vw-Wert = Fallback ohne Container-Einheiten. */
  .hero__text{
    --hero-col:calc(42vw - var(--gutter) - var(--hero-gap) - max(var(--gutter), (100vw - var(--wrap)) / 2) - 8px);
    width:100%;max-width:var(--hero-col);padding:48px 0 64px
  }
  @supports (width:1cqw){
    .hero__text{--hero-col:calc(42cqw - var(--gutter) - var(--hero-gap) - max(var(--gutter), (100cqw - var(--wrap)) / 2))}
  }
  /* H1-Größe an die Spaltenbreite gekoppelt: --h1-em = Breite der längeren Zeile bei zweizeiligem Umbruch (gemessen
     10.10.: DE 7,47 · EN 5,47 · FR 8,22 · PL 8,13 em, +4 % Reserve; Standard 8,6 für geänderte Texte). Obergrenze DESIGN §3. */
  .hero{--h1-em:8.6}
  .kv2-lang-de .hero{--h1-em:7.8}
  .kv2-lang-en .hero{--h1-em:5.7}
  .kv2-lang-fr .hero{--h1-em:8.55}
  .kv2-lang-pl .hero{--h1-em:8.45}
  .kiki-frontpage .hero__h{max-width:none;font-size:clamp(2.25rem,calc(var(--hero-col) / var(--h1-em)),4.6rem);--theme-font-size:clamp(2.25rem,calc(var(--hero-col) / var(--h1-em)),4.6rem)}
  .hero__sub, .hero__ctas, .hero .trust{max-width:none}
}
/* Ab 1200 px: CTA-Zeile von der Textspalte entkoppelt – darf bis 24 px vor die Bildkante reichen (gemessen 410–452 px).
   Damit beide Pills nebeneinander passen, skalieren Schrift und Padding (1.15em) genau so weit wie nötig:
   Schrift = (Zeilenbreite − Abstand) / --cta-em, begrenzt auf 15–19 px; Höhe bleibt 52 px. --cta-em = Summe beider
   Pills in em (gemessen 10.10. inkl. Herz-Icon, +3 %): DE 24,6 · EN 20 · FR 26,2 · PL 22,8 (Standard 26,5).
   Unter 1200 px dürfen die Pills untereinander stehen (flex-wrap bleibt überall als Rückfall). */
@media (min-width:1200px){
  .hero{--cta-em:26.5}
  .kv2-lang-de .hero{--cta-em:24.6}
  .kv2-lang-en .hero{--cta-em:20}
  .kv2-lang-fr .hero{--cta-em:26.2}
  .kv2-lang-pl .hero{--cta-em:22.8}
  .hero__ctas{width:calc(var(--hero-col) + var(--hero-gap) - 24px);max-width:none;gap:10px;flex-wrap:wrap;container-type:inline-size}
  .hero__ctas .btn{padding:0 1.15em;font-size:clamp(15px,calc((100cqw - 10px) / var(--cta-em)),1.1875rem)}
}

/* ---------- 2 · Momente-Strip (4 Kreise, Kalam-Beschriftung) ---------- */
.moments{padding:8px 0 clamp(40px,6vw,72px)}
.moments + .sec{padding-top:clamp(32px,4vw,56px)}
.kiki-frontpage .moments__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:calc(760px + 2 * var(--gutter));margin:0 auto;list-style:none}
.moment{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;color:var(--cocoa);text-align:center;text-decoration:none}
.moment__ring{display:block;width:min(100%,120px);aspect-ratio:1;padding:4px;border:2px solid var(--blush-deep);border-radius:50%;overflow:hidden;transition:border-color .2s var(--ease),transform .25s var(--ease)}
.moment__ring img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.moment--first .moment__ring img{object-position:44% 50%}
.moment--diy .moment__ring img{object-position:34% 55%}
.moment--gift .moment__ring img{object-position:64% 50%}
.moment--kita .moment__ring img{object-position:50% 55%}
.moment__label{font-family:var(--f-hand);font-weight:400;font-size:1.05rem;line-height:1.15;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;max-width:100%}
.moment:hover{color:var(--cocoa)}
.moment:hover .moment__ring{border-color:var(--rose);transform:translateY(-3px)}
@media (min-width:760px){
  .kiki-frontpage .moments__row{gap:32px}
  .moment__label{font-size:1.3rem}
}

/* ---------- 3 · Lieblinge (Produktkarten aus v2-base.css) ---------- */
.kiki-frontpage .card__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kiki-frontpage .card__link{flex:1 1 auto;display:flex;flex-direction:column}
.kiki-frontpage .card__foot{margin-top:auto;padding-top:2px}
.kiki-frontpage .card__wish{pointer-events:none}
.kv2-vat{margin:clamp(18px,2.4vw,26px) 0 0;font-size:.86rem;color:var(--cocoa-70)}
.kv2-vat a{color:inherit;text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:3px}
.kv2-vat a:hover{color:var(--rose-dark)}
.lieblinge .shead .lead{max-width:34rem}

/* ---------- 4 · Gefühl-Blöcke (mint · creme gespiegelt · Kita sky) ---------- */
.feel{padding-block:var(--sec)}
.feel--mint{background:var(--mint);--note-color:var(--rose-dark)}
.feel--sky{background:var(--sky);--note-color:var(--rose-dark)}
.feel__grid{display:grid;gap:32px;align-items:center}
.feel__media{aspect-ratio:4/5;max-height:680px;box-shadow:var(--shadow)}
.feel--flip .feel__media .feel__img{object-position:42% 50%}
.feel--kita .feel__media{aspect-ratio:4/3}
.feel__text{max-width:31rem}
.feel__text .h2{margin-bottom:.45em}
.feel__text .lead{margin-bottom:1.3rem}
.feel__text .btn{margin-top:8px}
.feel__text .ticks{margin-bottom:24px}
@media (min-width:1000px){
  .feel__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,104px)}
  .feel__media{width:100%;max-width:560px;justify-self:end}
  .feel--flip .feel__media{order:2;justify-self:start}
  .feel--flip .feel__text{justify-self:end}
}

/* ---------- 5 · Geschenk (blush) + Sets ---------- */
.gift{background:var(--blush);padding-block:var(--sec);--note-color:var(--rose-dark)}
.gift__top{display:grid;gap:28px;align-items:center}
.gift__media{aspect-ratio:3/2;box-shadow:var(--shadow)}
.gift__media .gift__img{object-position:60% 50%}
.gift__text .lead{margin-bottom:1.1rem}
.gift__incl{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-weight:600;color:var(--cocoa)}
.gift__incl .ico{flex:none;width:26px;height:26px;color:var(--rose-dark)}
.sets{display:grid;gap:12px;margin:clamp(32px,5vw,56px) 0 0;padding:0;list-style:none}
.sets > li{display:flex;min-width:0}
.set{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:16px;width:100%;padding:8px 18px 8px 8px;border-radius:var(--r-card);background:var(--creme);color:var(--cocoa);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.set:hover{color:var(--cocoa);transform:translateY(-4px);box-shadow:var(--shadow)}
.set__media{display:block;aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--white)}
.set__media img{display:block;width:100%;height:100%;object-fit:contain;padding:8%;transition:transform .6s var(--ease)}
.set:hover .set__media img{transform:scale(1.03)}
.set__body{display:grid;gap:4px;min-width:0}
.set__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--f-display);font-size:1.12rem;line-height:1.25}
.set__price{font-weight:700;color:var(--cocoa-70)}
.set__price del{font-weight:600}
.set__price ins{text-decoration:none;color:var(--cocoa)}
.gift .kv2-vat{margin-top:16px}
@media (min-width:760px){
  .sets{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .set{grid-template-columns:minmax(0,1fr);align-content:start;gap:12px;padding:8px 8px 18px}
  .set__body{padding:0 10px}
}
@media (min-width:1000px){.gift__top{grid-template-columns:7fr 5fr;gap:clamp(40px,6vw,88px)}}

/* ---------- 6 · Maker (creme) ---------- */
.maker{padding-block:var(--sec)}
.maker__grid{display:grid;gap:32px;align-items:center}
.maker__media{aspect-ratio:3/2;box-shadow:var(--shadow)}
.maker__media .maker__img{object-position:62% 50%}
.maker__text{max-width:32rem}
.maker__text > p:not(.note){color:var(--cocoa-70)}
.maker__text > p strong{color:var(--cocoa);font-weight:700}
.maker__text .btn{margin-top:8px}
@media (min-width:1000px){.maker__grid{grid-template-columns:6fr 5fr;gap:clamp(40px,6vw,96px)}}

/* ---------- 7 · So kommt es zu dir (mint, echte Sequenz 1·2·3) ---------- */
.how{background:var(--mint);padding-block:var(--sec)}
.how__h{text-align:center;margin-bottom:clamp(32px,5vw,56px)}
.how__list{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.how__step{padding:28px 24px 24px;border-radius:var(--r-card);background:var(--creme);text-align:center}
.how__step .h3{margin:0 0 .35em}
.how__step p{margin:0;color:var(--cocoa-70)}
.how__n{display:inline-grid;place-items:center;width:64px;height:64px;margin-bottom:14px;border-radius:50%;background:var(--blush);color:var(--rose-dark);font:400 1.9rem/1 var(--f-display)}
@media (min-width:760px){
  .how__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .how__step{padding:36px 28px 32px}
}

/* ---------- 8 · Magazin (.card--post: Bild 3:2 mit Perlenecke, Titel Young Serif, 1 Zeile Auszug) ---------- */
.card--post{padding:8px 8px 22px}
.card--post .card__media{aspect-ratio:3/2;border-radius:var(--corner) 22px 22px 22px;background:var(--blush-deep)}
.card--post .card__media img{object-fit:cover;padding:0}
.card--post .card__title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:18px 12px 8px}
.card--post .card__excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 12px;font-size:.95rem;line-height:1.55;color:var(--cocoa-70)}
@media (max-width:599px){.card--post .card__media{border-radius:56px 19px 19px 19px}}

/* ---------- 9 · Newsletter „Post von der Insel“ (Bild kinderzimmer-ruhe + creme 85 %) ---------- */
.news{position:relative;isolation:isolate;padding-block:var(--sec);text-align:center;
  background:var(--blush) var(--news-bg-m,var(--news-bg,none)) center/cover no-repeat}
.news::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,251,247,.85)}
.news__in{max-width:calc(680px + 2 * var(--gutter))}
.news .lead{margin-inline:auto;color:var(--cocoa)}
.news .news__form{display:block;max-width:520px;margin:28px auto 0;text-align:left}
.news .news__row{display:grid;gap:10px}
.news .news__form input[type="email"]{
  width:100%;height:56px;min-height:56px;margin:0;padding:0 20px;border:2px solid var(--line);border-radius:var(--r-in);
  background:var(--white);color:var(--cocoa);font:400 1rem/1.4 var(--f-body);box-shadow:none
}
.news .news__form input[type="email"]::placeholder{color:var(--cocoa-70);opacity:1}
.news .news__form input[type="email"]:focus{border-color:var(--rose-dark);outline:none;box-shadow:0 0 0 4px rgba(199,63,107,.18)}
.news .news__form input[type="email"]:focus-visible{outline:3px solid var(--rose-dark);outline-offset:2px}
.news .news__form .btn{min-height:56px;width:100%}
.news .news__msg{margin:12px 0 0;font-size:.95rem;font-weight:600;color:var(--cocoa)}
.news .news__msg:empty{display:none}
.news .news__msg.is-ok, .news .news__msg.is-err{justify-content:center;text-align:center}
.news .news__note{max-width:520px;margin:14px auto 0;font-size:.88rem;line-height:1.5;color:var(--cocoa-70);text-align:center}
@media (min-width:600px){
  .news .news__row{grid-template-columns:minmax(0,1fr) auto}
  .news .news__form .btn{width:auto}
}
@media (min-width:760px){.news{background-image:var(--news-bg,none)}}

/* ---------- 10 · Bewegung (Ken-Burns; .reveal kommt aus v2-base.css, Auslöser v2-chrome.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero__media.is-kb .hero__img{animation:kv2-kenburns 14s var(--ease) forwards}
}
@keyframes kv2-kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){
  .set:hover, .moment:hover .moment__ring, .set:hover .set__media img{transform:none}
}