/* ═══════════════════════════════════════════════════════════════
   PREMA v3 · DER RAUM

   .stage ist das Fenster, durch das man schaut — sie steht fest und
   trägt die Perspektive. .cam ist der Raum dahinter. Jedes .obj
   bekommt seine Tiefe von scripts/flight.js als translate3d-Z, und
   ab da erledigt der Browser die Perspektive selbst: Was weiter
   hinten steht, ist kleiner.

   Deshalb sind hier fast keine Größen in Pixeln festgelegt — die
   Größe eines Dings hängt davon ab, wo es steht.
   ═══════════════════════════════════════════════════════════════ */

.stage{
  position:fixed; inset:0; z-index:10;
  perspective:1150px;
  /* Genau mittig. Ein verschobener Fluchtpunkt sieht auf dem Papier
     interessanter aus, drückt aber alles, was näher an die Kamera
     kommt, aus der Bildmitte — was zentriert sein soll, wandert
     dann beim Heranfliegen nach unten. */
  perspective-origin:50% 50%;
  pointer-events:none;
  overflow:hidden;
}
.cam{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}
/* Die Scrollstrecke. Sie zeigt nichts, sie macht nur Weg. */
.scroller{ position:relative; z-index:1; height:100vh; pointer-events:none }

/* Ein Ding im Raum. Es hat keine eigene Größe — es ist ein Punkt,
   an dem sein Inhalt hängt. */
.obj{
  position:absolute; left:50%; top:50%;
  width:0; height:0;
  transform-style:preserve-3d;
  visibility:hidden;
  will-change:transform,opacity;
}
.obj__in{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(92vw, 1180px);
  pointer-events:auto;
}

/* ── 01 · Die Marke ─────────────────────────────────────────── */
.mark{ width:auto }
/* Die viewBox ist absichtlich weiter als das Motiv — die Blätter
   brauchen Platz, solange sie noch auseinander stehen. Damit die
   fertige Marke trotzdem groß wirkt, ist das SVG entsprechend
   breiter angelegt. */
.mark__svg{
  display:block;
  width:clamp(360px, 58vw, 820px); height:auto;
  overflow:visible;
}
.mark__g{ transform-origin:50px 50px }
.petal{
  fill:var(--pale);
  transform-origin:50px 50px;
  filter:drop-shadow(0 0 34px rgba(122,168,152,.55));
}

/* ── Titel ──────────────────────────────────────────────────── */
.title{ width:min(94vw,1120px); display:flex; flex-direction:column; gap:clamp(14px,2vw,26px) }
.title .giant{ color:var(--on) }

.hint{
  width:auto; display:inline-flex; align-items:center; gap:10px;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--on-3);
}
.hint svg{ width:12px; height:30px; overflow:visible }
.hint svg path{ animation:tip 2.4s cubic-bezier(.65,0,.35,1) infinite }
@keyframes tip{
  0%{ transform:translateY(-8px); opacity:0 }
  40%{ opacity:1 }
  100%{ transform:translateY(9px); opacity:0 }
}

/* ── Kapitelmarken ──────────────────────────────────────────── */
.chapter{ width:min(90vw,900px); display:flex; flex-direction:column; gap:clamp(10px,1.5vw,18px) }
.chapter__no{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem,6vw,5rem); line-height:1;
  color:var(--green-mid); letter-spacing:.04em;
}
.chapter .big{ color:var(--on) }

/* ── 02 · Die Fetzen, durch die man fliegt ──────────────────── */
.scraps{ position:absolute; inset:0; transform-style:preserve-3d }
.scrap{
  position:absolute; left:50%; top:50%;
  width:0; height:0;
  transform-style:preserve-3d;
  visibility:hidden;
  will-change:transform,opacity;
}
.scrap__in{
  position:absolute; left:50%; top:50%;
  width:clamp(210px,23vw,330px);
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  padding:clamp(14px,1.5vw,20px);
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--r);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.scrap__tag{
  display:block; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:#9EA090; margin-bottom:7px;
}
.scrap__txt{ font-family:var(--serif); font-size:.98rem; font-weight:500; line-height:1.24; letter-spacing:-.015em }
.scrap--ad .scrap__in{ background:#E8E2D4 }
.scrap--ad .scrap__txt{ color:#9A9384; font-family:var(--sans); font-size:.8rem; font-weight:400 }

/* ── 03 · Der Schnitt ───────────────────────────────────────── */
.cut{ width:min(92vw,1080px) }
.cut .giant{ color:var(--on) }

/* ── 04 · Therapiefinder ────────────────────────────────────── */
.finder{ width:auto; display:grid; place-items:center }
/* Über die HÖHE bemessen, nicht über die Breite: Ein Gerät, das
   sich aus der Bildbreite ableitet, wird auf großen Schirmen
   unnatürlich lang. So bleibt es immer ein Handy, das jemand in der
   Hand halten könnte. Seitenverhältnis 9:18.6 — zwischen iPhone und
   Android, ohne die extreme Länge aktueller Modelle. */
.phone{
  position:relative;
  height:min(62vh, 580px);
  width:auto;
  aspect-ratio:9/18.6;
  background:linear-gradient(155deg,#20261F,#0C110D);
  border-radius:34px;
  padding:7px;
  box-shadow:
    0 0 0 1px rgba(226,237,234,.10) inset,
    0 46px 90px -34px rgba(0,0,0,.9),
    0 0 90px -20px rgba(122,168,152,.28);
  transform-style:preserve-3d;
}
.phone__frame{
  position:relative; height:100%; border-radius:28px; overflow:hidden;
  background:var(--cream); display:grid;
}
.phone__sheen{
  position:absolute; inset:0; border-radius:34px; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.20) 0%, transparent 34%, transparent 64%, rgba(255,255,255,.10) 100%);
  opacity:var(--sheen,.75);
}
.phone--big{ height:min(58vh, 540px) }

.scr{
  grid-area:1/1; padding:24px 16px 16px;
  display:flex; flex-direction:column; gap:11px;
  color:var(--ink); opacity:0;
}
.scr__top{ display:flex; align-items:center; gap:8px; font-size:.66rem; color:#6B7060 }
.scr__top i{ width:20px; height:20px; border-radius:50%; background:#fff; border:1px solid var(--line-lite); flex:none }
.scr__top b{ font-weight:500 }
.scr__q{ font-family:var(--serif); font-weight:600; font-size:1.24rem; line-height:1.1; letter-spacing:-.02em }
.scr__chips,.scr__opts{ display:flex; flex-wrap:wrap; gap:6px }
.scr__opts{ flex-direction:column }
.scr__chips i,.scr__opts i{
  font-style:normal; font-size:.68rem; padding:.5em .8em;
  background:#fff; border:1px solid var(--line-lite); border-radius:var(--r-pill); color:var(--ink);
}
.scr__opts i{ border-radius:11px; padding:.7em .85em }
.scr__chips i.on,.scr__opts i.on{ background:var(--green); border-color:var(--green); color:#fff }
.scr__bar{ height:3px; background:var(--line-lite); border-radius:2px; overflow:hidden }
.scr__bar span{ display:block; height:100%; background:var(--green) }
.scr__note{ font-size:.62rem; color:#6B7060; background:var(--accent); border-radius:8px; padding:.55em .7em }
.scr__res{ background:#fff; border:1px solid var(--line-lite); border-radius:11px; padding:.75em .8em; display:flex; flex-direction:column; gap:4px }
.scr__res b{ font-family:var(--serif); font-size:.9rem; font-weight:600 }
.scr__res em{ font-style:normal; font-size:.62rem; color:var(--green-mid) }
.scr__res span{ display:block; height:3px; background:var(--line-lite); border-radius:2px; overflow:hidden }
.scr__res span i{ display:block; height:100%; background:var(--green-mid) }
/* Der Abschluss unten drückt den Inhalt auseinander — ohne ihn
   sammelt sich alles oben und das Gerät wirkt halb leer. */
.scr__go{
  margin-top:auto;
  text-align:center;
  background:var(--green); color:#fff;
  padding:.78em; border-radius:var(--r-pill);
  font-size:.76rem; font-weight:500;
}
.scr__foot{ font-size:.6rem; color:#9EA090; text-align:center; padding-bottom:2px }

/* Die Antwortmöglichkeiten schweben um das Gerät herum */
.orbit{ position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d }
.orb{
  position:absolute; left:50%; top:50%;
  padding:.5em .95em;
  font-size:.76rem; white-space:nowrap;
  background:rgba(226,237,234,.09);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  color:var(--on-2);
  backdrop-filter:blur(3px);
  will-change:transform,opacity;
}
.orb--on{ background:var(--pale); border-color:var(--pale); color:var(--deep); font-weight:500 }

/* ── Nebenbemerkungen ───────────────────────────────────────── */
.note{
  width:min(88vw,440px);
  padding:clamp(20px,2.2vw,30px);
  background:rgba(226,237,234,.055);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  backdrop-filter:blur(6px);
}
.note h3{ font-family:var(--serif); font-weight:600; font-size:clamp(1.1rem,1.7vw,1.5rem); letter-spacing:-.02em; margin-bottom:.5em; color:var(--on) }
.note p{ font-size:.92rem; line-height:1.6; font-weight:300; color:var(--on-2) }

/* ── 05 · Die Tafeln ────────────────────────────────────────── */
.board{
  width:min(88vw,560px);
  padding:clamp(24px,2.6vw,38px);
  background:linear-gradient(160deg, rgba(245,241,234,.97), rgba(230,224,212,.94));
  color:var(--ink);
  border-radius:var(--r-lg);
  box-shadow:0 40px 80px -36px rgba(0,0,0,.85);
  position:relative; overflow:hidden;
}
.board::before{ content:''; position:absolute; top:0; left:0; right:0; height:5px; background:var(--tint,var(--green-mid)) }
.board::after{
  content:''; position:absolute; right:-80px; top:-80px; width:230px; height:230px;
  border-radius:50%; background:var(--tint,var(--green-mid)); opacity:.16; filter:blur(10px);
}
.board__no{ font-family:var(--serif); font-size:2.4rem; font-weight:300; line-height:1; color:var(--tint,var(--green-mid)); letter-spacing:-.03em }
.board h3{ font-family:var(--serif); font-weight:600; font-size:clamp(1.4rem,2.2vw,2rem); line-height:1.04; letter-spacing:-.03em; margin:.35em 0 .45em }
.board p{ font-size:.96rem; line-height:1.6; font-weight:300; color:var(--ink-2) }
.board__lim{
  display:block; margin-top:1.1em; padding-top:.9em;
  border-top:1px solid var(--line-lite);
  font-size:.78rem; line-height:1.55; color:#9EA090;
}

/* ── 06 · Praxis-Wand ───────────────────────────────────────── */
.wall{
  width:min(94vw,1080px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.2vw,18px);
  transform-style:preserve-3d;
}
.pcard{
  padding:clamp(13px,1.3vw,19px);
  background:rgba(245,241,234,.96);
  color:var(--ink);
  border-radius:var(--r);
  box-shadow:0 26px 50px -26px rgba(0,0,0,.7);
  display:flex; flex-direction:column; gap:8px;
  will-change:transform,opacity;
}
.pcard__row{ display:flex; gap:9px; align-items:flex-start }
.pcard__av{ width:34px; height:34px; border-radius:10px; flex:none; background:linear-gradient(140deg,var(--tan),var(--sage)) }
.pcard__name{ font-family:var(--serif); font-size:.94rem; font-weight:600; line-height:1.15 }
.pcard__kind{ font-size:.68rem; color:var(--ink-2) }
.pcard__tags{ display:flex; gap:4px; flex-wrap:wrap }
.pcard__tags i{ font-style:normal; font-size:.58rem; padding:.28em .6em; border-radius:var(--r-pill); background:#EAE4D8; color:#6B7060 }
.pcard__tags i.free{ background:#DFF0D8; color:#3D6B2E }
.pcard__tags i.star{ background:#F5EDD8; color:#8A6B1E }
.pcard--hero{ box-shadow:0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 2px var(--pale) }

/* ── Termine ────────────────────────────────────────────────── */
.slots{
  width:min(92vw,760px);
  padding:clamp(22px,2.4vw,34px);
  background:rgba(226,237,234,.06);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  backdrop-filter:blur(8px);
  display:flex; flex-direction:column; gap:clamp(14px,1.8vw,22px);
}
.slots__head h3{ font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,2.2vw,2rem); letter-spacing:-.03em; margin-top:.35em; color:var(--on) }
.slots__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px }
.slot{
  aspect-ratio:1; border-radius:9px;
  background:rgba(226,237,234,.07);
  border:1px solid transparent;
  display:grid; place-items:center;
  font-size:.62rem; color:var(--on-3);
  will-change:transform,background-color;
}
.slot--free{ background:rgba(122,168,152,.22); color:var(--pale) }
.slot--pick{ background:var(--pale); color:var(--deep); font-weight:600; border-color:#fff }
.slots__live{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:.85em 1.1em;
  background:var(--green); border-radius:var(--r);
}
.slots__dot{ width:8px; height:8px; border-radius:50%; background:var(--pale); animation:blip 2s infinite; flex:none }
.slots__live b{ font-family:var(--serif); font-size:.98rem; font-weight:600; color:var(--on) }
.slots__live em{ font-style:normal; font-size:.76rem; color:var(--on-2) }
.slots__cd{ margin-left:auto; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--pale); font-variant-numeric:tabular-nums }

/* ── 07 · Shop ──────────────────────────────────────────────── */
.shop{ width:min(94vw,1120px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.3vw,20px); transform-style:preserve-3d }
.prod{
  padding:clamp(12px,1.2vw,18px);
  background:rgba(245,241,234,.97);
  color:var(--ink);
  border-radius:var(--r);
  box-shadow:0 28px 56px -28px rgba(0,0,0,.75);
  display:flex; flex-direction:column; gap:9px;
  will-change:transform,opacity;
}
.prod__pic{
  aspect-ratio:1; border-radius:11px;
  background:var(--pic,#D8CDB8);
  display:grid; place-items:center;
  font-size:1.5rem; color:rgba(28,30,25,.42);
}
.prod__brand{ font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:#9EA090 }
.prod__name{ font-family:var(--serif); font-size:.92rem; font-weight:600; line-height:1.15 }
.prod__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-top:auto }
.prod__price{ font-family:var(--serif); font-size:1rem; font-weight:600 }
.prod__seal{ font-size:.55rem; padding:.25em .5em; border-radius:var(--r-pill); background:#E8F2DC; color:#4A6B34 }
.prod__rec{ font-size:.58rem; color:var(--green-mid) }

/* ── 08 · Merken & Profil ───────────────────────────────────── */
.saved{
  width:min(92vw,940px);
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.saved__col{
  padding:clamp(22px,2.6vw,36px);
  background:rgba(20,37,29,.72);
  backdrop-filter:blur(6px);
  display:flex; flex-direction:column; gap:10px;
}
.saved__col h3{ font-family:var(--serif); font-weight:600; font-size:clamp(1.15rem,1.9vw,1.7rem); letter-spacing:-.02em; color:var(--on) }
.saved__col p{ font-size:.9rem; line-height:1.6; font-weight:300; color:var(--on-2) }

/* ── 09 · Die App ───────────────────────────────────────────── */
.appshow{
  width:min(94vw,1040px);
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(24px,4vw,70px); align-items:center;
}
.tabscr{ grid-area:1/1; position:relative; overflow:hidden; background:var(--cream) }
/* Kartenausschnitt in der App-Ansicht */
.scr__map{
  position:relative; height:74px; border-radius:10px;
  background:linear-gradient(150deg,#D8E0C8,#EAE4D8);
  overflow:hidden;
}
.scr__map i{
  position:absolute; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:var(--green);
}
.scr__map i.me{
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  background:var(--star); box-shadow:0 0 0 4px rgba(184,136,46,.24);
}
.tabbar{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; justify-content:space-around;
  padding:9px 4px 14px;
  background:rgba(255,255,255,.94);
  border-top:1px solid var(--line-lite);
}
.tab{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.5rem; color:#9EA090 }
.tab i{ width:17px; height:17px; border-radius:5px; background:#C8C3BA; display:block }
.tab--on{ color:var(--green) }
.tab--on i{ background:var(--green) }
.appshow__side h3{ font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,2.6vw,2.4rem); letter-spacing:-.03em; color:var(--on); margin-bottom:.5em }
.appshow__side p{ font-size:.98rem; line-height:1.62; font-weight:300; color:var(--on-2); max-width:38ch }
.stores{ display:flex; gap:10px; margin-top:1.4em; flex-wrap:wrap }
.store{
  display:inline-flex; align-items:center; gap:8px;
  padding:.65em 1.1em; font-size:.82rem;
  border:1px solid var(--line); border-radius:var(--r-pill); color:var(--on-2);
}
.store svg{ width:16px; height:16px }

/* ── 10 · Zusagen ───────────────────────────────────────────── */
.vows{ width:min(92vw,900px); display:flex; flex-direction:column }
.vow{
  display:grid; grid-template-columns:auto 1fr; gap:0 clamp(14px,1.8vw,26px);
  padding:clamp(14px,1.7vw,22px) 0;
  border-top:1px solid var(--line);
  will-change:transform,opacity;
}
.vow:first-child{ border-top:0 }
.vow span{ grid-row:1/span 2; font-family:var(--serif); font-weight:300; font-size:1.2rem; color:var(--green-mid); padding-top:.15em }
.vow h4{ font-family:var(--serif); font-weight:600; font-size:clamp(1.05rem,1.6vw,1.4rem); letter-spacing:-.02em; margin-bottom:.3em; color:var(--on) }
.vow p{ font-size:.88rem; line-height:1.6; font-weight:300; color:var(--on-2); max-width:52ch }

/* ── 11 · Warteliste ────────────────────────────────────────── */
.end{ width:min(92vw,780px); display:flex; flex-direction:column; gap:clamp(10px,1.3vw,16px) }
.end .giant{ color:var(--on) }
.end__lede{ font-size:clamp(.92rem,1.15vw,1.04rem); line-height:1.55; font-weight:300; color:var(--on-2) }
.wait-promo{ display:flex; flex-direction:column; gap:10px; width:min(100%,560px); padding:14px 18px; border:1px solid rgba(192,216,208,.28); border-radius:var(--r-lg); background:rgba(192,216,208,.08) }
.wait-promo[hidden]{ display:none }
.wait-promo__offer{ margin:0; font-family:var(--serif); font-size:clamp(1.1rem,1.8vw,1.5rem); line-height:1.15; letter-spacing:-.02em; color:var(--on) }
.wait-promo__offer strong{ color:#B8FF2C; font-weight:600; text-shadow:0 0 8px rgba(184,255,44,.75), 0 0 22px rgba(184,255,44,.42) }
.wait-promo__progress{ display:flex; align-items:center; gap:12px }
.wait-promo__count{ flex:none; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-2); font-variant-numeric:tabular-nums }
.wait-promo__count b{ color:#B8FF2C; font-size:.9rem; font-weight:600; text-shadow:0 0 8px rgba(184,255,44,.7) }
.wait-promo__track{ display:block; flex:1; height:4px; overflow:hidden; border-radius:var(--r-pill); background:rgba(226,237,234,.16) }
.wait-promo__track i{ display:block; width:0; height:100%; border-radius:inherit; background:#B8FF2C; box-shadow:0 0 8px rgba(184,255,44,.75); transition:width .5s cubic-bezier(.16,1,.3,1) }

@media (max-width: 900px){
  .wall{ grid-template-columns:repeat(2,1fr) }
  .shop{ grid-template-columns:repeat(2,1fr) }
  .saved{ grid-template-columns:1fr }
  .appshow{ grid-template-columns:1fr; gap:24px; justify-items:center; text-align:center }
  .appshow__side p{ max-width:none }
  .stores{ justify-content:center }
  .slots__grid{ grid-template-columns:repeat(7,1fr) }
}

/* ═══════════════════════════════════════════════════════════════
   DAS FORMULAR AM ENDE DES RAUMS
   ═══════════════════════════════════════════════════════════════ */
.form{ display:flex; flex-direction:column; gap:clamp(9px,1.2vw,15px); margin-top:4px }
.form__row{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap }
.form__row--two{ gap:10px }

.fld{ flex:1 1 240px; display:flex; flex-direction:column; gap:7px; min-width:0 }
.form__row--two .fld{ flex:1 1 190px }
.fld__lab{
  display:flex; align-items:baseline; gap:.6em; flex-wrap:wrap;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-3);
}
.fld__lab i{ font-style:normal; opacity:.6; letter-spacing:.05em }
.fld__tip{ font-weight:400; letter-spacing:.02em; text-transform:none; font-size:.72rem; color:#E9B4A2 }
.fld__tip--hint{ color:var(--pale) }
.fld__tip button{
  background:none; border:0; padding:0; cursor:pointer; color:inherit; font:inherit;
  text-decoration:underline; text-underline-offset:2px;
}

.fld__box{ position:relative; display:block }
.fld input{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--on);
  background:rgba(226,237,234,.07);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:.92em 1.2em; outline:none;
  -webkit-appearance:none; appearance:none;
  transition:border-color .3s, background-color .3s, box-shadow .3s;
}
.fld input::placeholder{ color:rgba(226,237,234,.3) }
.fld input:focus{ border-color:var(--pale); background:rgba(226,237,234,.12); box-shadow:0 0 0 3px rgba(192,216,208,.14) }
.fld__ok{
  position:absolute; right:1.1em; top:50%; width:16px; height:16px; margin-top:-8px;
  border-radius:50%; background:var(--pale); display:grid; place-items:center;
  opacity:0; transform:scale(.5); pointer-events:none;
  transition:opacity .3s, transform .45s cubic-bezier(.16,1,.3,1);
}
.fld__ok::after{
  content:''; width:8px; height:4px;
  border-left:1.6px solid var(--deep); border-bottom:1.6px solid var(--deep);
  transform:rotate(-45deg) translate(1px,-1px);
}
.fld--ok .fld__ok{ opacity:1; transform:scale(1) }
.fld--ok input{ padding-right:2.8em }
.fld--bad input{ border-color:#D98A72; background:rgba(217,138,114,.09) }

.role,.tags{ border:0; padding:0; margin:0; min-width:0 }
.role legend,.tags legend{
  padding:0; margin-bottom:8px;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-3);
}
.tags legend i{ font-style:normal; opacity:.6; letter-spacing:.05em }

.role__row{ display:flex; gap:8px; flex-wrap:wrap }
.role__row label{
  position:relative; flex:1 1 150px; min-width:0;
  display:flex; align-items:center; gap:.6em;
  padding:.8em 1.05em;
  background:rgba(226,237,234,.05);
  border:1px solid var(--line); border-radius:var(--r);
  font-size:.88rem; color:var(--on-2); cursor:pointer;
  transition:border-color .3s, background-color .3s, color .3s;
}
.role__row input{ position:absolute; opacity:0; width:0; height:0 }
.role__row label::before{
  content:''; flex:none; width:15px; height:15px; border-radius:50%;
  border:1.5px solid rgba(226,237,234,.34);
  transition:border-color .3s, box-shadow .3s;
}
.role__row label:hover{ border-color:rgba(226,237,234,.3) }
.role__row label.is-on,
.role__row label:has(input:checked){
  background:rgba(192,216,208,.14); border-color:var(--pale); color:var(--on);
}
.role__row label.is-on::before,
.role__row label:has(input:checked)::before{
  border-color:var(--pale); box-shadow:inset 0 0 0 4px var(--pale);
}

.tags__row{ display:flex; flex-wrap:wrap; gap:7px }
.tags__row label{
  position:relative; padding:.52em .95em;
  background:rgba(226,237,234,.05);
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:.84rem; color:var(--on-2); cursor:pointer;
  transition:border-color .3s, background-color .3s, color .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
.tags__row input{ position:absolute; opacity:0; width:0; height:0 }
.tags__row label:hover{ border-color:rgba(226,237,234,.3); transform:translateY(-1px) }
.tags__row label.is-on,
.tags__row label:has(input:checked){
  background:var(--pale); border-color:var(--pale); color:var(--deep); font-weight:500;
}

.form__fine{ font-size:.72rem; line-height:1.5; color:rgba(226,237,234,.4) }
.form__fine a{ color:rgba(226,237,234,.66); text-underline-offset:2px }
.form__err{ font-size:.8rem; color:#E9B4A2 }
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }

.done{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  padding:clamp(20px,2.4vw,30px);
  background:rgba(226,237,234,.07);
  border:1px solid var(--line); border-radius:var(--r-lg);
  max-width:46ch;
}
.done__mark{ width:32px; height:32px; color:var(--pale) }
.done__mark svg{ width:100%; height:100%; animation:slowturn 9s linear infinite }
@keyframes slowturn{ to{ transform:rotate(360deg) } }
.done__no{ font-family:var(--serif); font-size:1.6rem; font-weight:600; letter-spacing:-.03em; color:var(--on) }
.done__no b{ color:var(--pale); font-variant-numeric:tabular-nums }
.done__txt{ font-size:.9rem; line-height:1.6; font-weight:300; color:var(--on-2) }

@media (max-width: 560px){
  .form__row{ flex-direction:column; align-items:stretch }
  .form__row .fld,
  .form__row--two .fld{ flex:0 0 auto }
  .role__row label{ flex:0 0 auto }
  .cta--go{ justify-content:center }
}

/* ── Ruhiger Modus: kein Raum, keine Fahrt ──────────────────── */
@media (prefers-reduced-motion: reduce){
  .stage{ position:static; perspective:none; overflow:visible; pointer-events:auto }
  .cam{ position:static; transform-style:flat }
  .scroller{ display:none }
  .obj{
    position:static !important; width:auto; height:auto;
    visibility:visible !important; opacity:1 !important;
    transform:none !important;
    padding:9vh var(--gut);
  }
  .obj__in{ position:static; transform:none; width:auto; max-width:1100px; margin:0 auto }
  .scraps{ position:static }
  .scrap{ display:none }
  .scrap:nth-child(-n+4){
    display:block; position:static; width:auto; height:auto;
    visibility:visible !important; opacity:1 !important; transform:none !important;
    padding:8px var(--gut);
  }
  .scrap__in{ position:static; transform:none; width:auto; max-width:640px; margin:0 auto }
  .giant b, .vow, .pcard, .prod, .slot, .orb{ transform:none !important; opacity:1 !important }
  .orbit{ display:none }
  .atmos, .vig{ display:none }
  html, body{ background:var(--deep) }
}

/* ═══════════════════════════════════════════════════════════════
   SCHMALE SCHIRME
   Die Fahrt bleibt — sie ist der Grund, warum es diese Seite gibt.
   Aber im Raum ist auf 375 px weniger Platz, also rücken die
   Stationen zusammen und die Endstation gibt der Kopfzeile Raum.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px){
  .stage{ perspective:820px }

  .giant{ font-size:clamp(2.1rem,10vw,3.4rem) }
  .giant--mid,.giant--end{ font-size:clamp(1.9rem,9vw,3rem) }
  .big{ font-size:clamp(1.5rem,7.4vw,2.4rem) }
  .chapter__no{ font-size:clamp(2rem,11vw,3.2rem) }

  .end{ padding-top:64px; gap:9px }
  .end__lede{ display:none }
  .end .giant{ font-size:clamp(1.8rem,8.4vw,2.6rem) }
  .form{ gap:8px }
  .fld input{ padding:.78em 1.05em; font-size:.94rem }
  .role__row label{ padding:.66em .9em; font-size:.84rem }
  .tags__row label{ padding:.44em .8em; font-size:.78rem }
  .form__fine{ font-size:.66rem }

  .note{ width:min(90vw,380px); padding:18px }
  .board{ padding:20px }
  .board__no{ font-size:1.9rem }
  .slots{ padding:18px; gap:12px }
  .slots__grid{ gap:4px }
  .slot{ font-size:.5rem; border-radius:6px }
  .wall{ grid-template-columns:1fr 1fr; gap:7px }
  .pcard{ padding:10px; gap:6px }
  .pcard__name{ font-size:.8rem }
  .pcard__kind{ font-size:.6rem }
  .shop{ grid-template-columns:1fr 1fr; gap:8px }
  .prod{ padding:10px }
  .prod__name{ font-size:.8rem }
  .vow p{ font-size:.82rem }
  .scrap__in{ width:clamp(170px,60vw,240px); padding:12px }
  .scrap__txt{ font-size:.86rem }
  .orb{ font-size:.66rem; padding:.4em .75em }
  .phone{ height:min(46vh, 360px) }
  .phone--big{ height:min(42vh, 330px) }
}

/* ═══════════════════════════════════════════════════════════════
   v3 · WAS NEU DAZUKOMMT
   ═══════════════════════════════════════════════════════════════ */

/* ── Die Ankunft: Marke, Name und Aussage an einem Ort ──────── */
.hero{
  width:min(94vw,1080px);
  display:flex; flex-direction:column;
  gap:clamp(10px,1.6vw,20px);
  /* Solange Kicker und Fließtext noch nicht da sind, halten sie
     trotzdem ihren Platz — sonst würde das Layout beim Erscheinen
     springen. Damit der sichtbare Teil trotzdem mittig steht,
     verschiebt --shift den Block so lange nach unten. */
  transform:translate(-50%, calc(-50% + var(--shift, 0px))) !important;
}
/* Marke und Schriftzug nebeneinander — das spart die Höhe, die ein
   gestapeltes Logo gekostet hätte, und ergibt dieselbe Sperrung wie
   in der App. Die viewBox ist weiter als das Motiv, damit die
   Blätter beim Zusammensetzen Platz haben; deshalb wirkt das SVG
   kleiner, als seine Breite vermuten lässt. */
.hero__lock{
  --markw: clamp(260px, 28vw, 440px);
  display:flex; align-items:center;
  gap:0;
  /* Die viewBox ist 220 breit. Das Blattmotiv beginnt darin aber
     nicht bei 60, sondern erst bei 73 — das Blatt selbst reicht von
     y 13 bis 44, gedreht ergibt das einen Kreis mit Radius 37 um die
     Mitte. Effektiver Leerrand also 33 %, nicht 27. Den linken
     gleichen wir aus, damit die Marke bündig mit dem Text darunter
     steht; der rechte bleibt als Abstand zum „O" stehen. */
  margin-left:calc(var(--markw) * -0.332);
}
.hero__mark{
  flex:none;
  width:var(--markw); height:auto;
  overflow:visible;
  /* Auch vertikal: Ohne das zählt der Leerrand der viewBox als
     Zeilenhöhe, und die Sperrung wird doppelt so hoch wie das
     Motiv, das man sieht. */
  margin-block:calc(var(--markw) * -0.332);
}

/* Der Name. Die Buchstaben stehen einzeln, damit sie einzeln aus
   der Tiefe kommen können — deshalb kein Fließtext, sondern vier
   Elemente in einer Zeile. */
.wordmark{
  display:flex; align-items:baseline;
  font-family:var(--serif); font-weight:600;
  /* Der Schriftzug im Startbild. Die Größe ist auf den Namen
     abgestimmt: Wechselt er, ändert sich mit den Ober- und
     Unterlängen auch, wie groß er wirkt. */
  font-size:clamp(4.4rem,14.4vw,12.9rem);
  line-height:.80; letter-spacing:-.05em;
  color:var(--on);
  margin:-.04em 0 -.02em -.02em;
}
.wordmark span{
  display:inline-block;
  transform-origin:50% 100%;
  will-change:transform,opacity;
  text-shadow:0 0 60px rgba(122,168,152,.28);
}
.hero .giant{ font-size:clamp(1.9rem,5.2vw,4.6rem) }
.hero .sub{ max-width:56ch }

.kick--dim{ color:var(--on-3) }
.sub--wide{ max-width:60ch }

/* ── Zweispaltig: Erklärung und Anschauung nebeneinander ─────
   Das ist der Kern der Kürzung. In Fassung 2 kam erst eine
   Kapitelmarke, dann das Gerät, dann eine Notiz — drei Halte für
   eine Sache. Hier steht alles zusammen. */
.duo{
  width:min(94vw,1180px);
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px); align-items:center;
}
.duo__side{ display:flex; flex-direction:column; gap:clamp(10px,1.4vw,16px) }
.duo__side > *{ will-change:transform,opacity }
.mid{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.5rem,3.2vw,2.8rem);
  line-height:1.04; letter-spacing:-.03em; color:var(--on);
}
.mid em{ font-style:italic; font-weight:500; color:var(--pale) }
.duo__txt{ font-size:clamp(.92rem,1.15vw,1.04rem); line-height:1.6; font-weight:300; color:var(--on-2); max-width:46ch }
.duo__list{ list-style:none; display:flex; flex-direction:column; gap:7px; margin-top:4px }
.duo__list li{
  position:relative; padding-left:1.3em;
  font-size:.88rem; line-height:1.5; color:var(--on-2); font-weight:300;
}
.duo__list li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--green-mid);
}
.duo__stage{ position:relative; display:grid; place-items:center }

/* ── Praxen und Shop: Kopf oben, Raster darunter ─────────────── */
.wallbox{
  width:min(94vw,1120px);
  display:flex; flex-direction:column; gap:clamp(16px,2.2vw,28px);
}
/* Beim Shop steht der Kopf daneben statt darüber: Produktkarten mit
   quadratischem Bild bauen so viel Höhe auf, dass Kopf plus zwei
   Reihen sonst nicht mehr auf einen Schirm passen. */
.shopbox{
  width:min(94vw,1180px);
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px); align-items:center;
}
.wallbox__head,.shopbox__head,.slots__head,.vows__head{
  display:flex; flex-direction:column; gap:clamp(8px,1vw,13px);
  max-width:62ch;
}
.wallbox__head > *,.shopbox__head > *,.slots__head > *,.vows__head > *{ will-change:transform,opacity }
.wall{ width:auto; grid-template-columns:repeat(3,1fr) }
.shop{ width:auto; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1vw,14px) }
.shopbox .prod{ padding:clamp(9px,.9vw,13px); gap:6px }
.shopbox .prod__pic{ aspect-ratio:5/4; font-size:1.2rem; border-radius:9px }
.shopbox .prod__name{ font-size:.84rem }
.shopbox .prod__brand{ font-size:.54rem }
.shopbox .prod__price{ font-size:.92rem }
.shopbox .prod__rec{ font-size:.54rem }
.shopbox .prod__seal{ font-size:.5rem }
.slots__note{ font-size:.8rem; color:var(--on-3); font-weight:300 }

/* ── Haltung: zwei Spalten statt einer langen Liste ──────────── */
.vows{ width:min(94vw,1080px); display:flex; flex-direction:column; gap:clamp(18px,2.4vw,30px) }
/* Karten mit Abstand statt eines Rasters aus Haarlinien — das wirkte
   wie eine Tabelle und stand quer zum Rest der Seite. */
.vows__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.2vw,16px);
}
.vows .vow{
  display:block;
  /* Dunkler als der Raum, nicht heller: Der Text ist hell, also
     entsteht der Kontrast durch eine sattere Fläche darunter. Eine
     aufgehellte Karte hätte hellen Text auf hellem Grund ergeben —
     genau das war vorher schwer zu lesen. */
  background:linear-gradient(155deg, rgba(9,20,15,.62), rgba(9,20,15,.44));
  border:1px solid rgba(226,237,234,.15);
  border-radius:var(--r-lg);
  padding:clamp(21px,2.3vw,32px);
  backdrop-filter:blur(7px);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.8), 0 1px 0 rgba(226,237,234,.07) inset;
}
/* Die Nummer sitzt als eigene Marke oben, nicht als blasse Ziffer
   in der Spalte daneben. */
.vows .vow span{
  display:inline-grid; place-items:center;
  width:34px; height:34px; margin-bottom:.9em;
  border-radius:50%;
  background:var(--green-mid);
  font-family:var(--serif); font-weight:600; font-size:.84rem;
  color:#fff;
  letter-spacing:0;
  box-shadow:0 0 0 5px rgba(78,122,104,.2);
}
.vows .vow h4{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.08rem,1.5vw,1.34rem);
  letter-spacing:-.02em; line-height:1.2;
  margin-bottom:.5em; color:var(--on);
}
/* Deutlich heller als der übrige Fließtext: Diese vier Sätze sind
   der Kern der Aussage und wurden vorher übersehen. */
.vows .vow p{
  font-size:clamp(.9rem,1.06vw,1rem);
  line-height:1.62; font-weight:400;
  color:rgba(226,237,234,.9);
  max-width:42ch;
}

/* ── App und Website nebeneinander ───────────────────────────── */
.both{
  width:min(94vw,1180px);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,64px); align-items:center;
}
.both__stage{ position:relative; display:grid; place-items:center; min-height:clamp(320px,50vh,500px); padding-right:6% }
.both__side{ display:flex; flex-direction:column; gap:clamp(10px,1.4vw,16px) }
.both__side > *{ will-change:transform,opacity }

/* Ein Browserfenster — dieselbe Anwendung, nur in der Breite */
.browser{
  width:clamp(280px,31vw,470px);
  border-radius:12px; overflow:hidden;
  background:var(--cream);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(226,237,234,.12);
  transform-style:preserve-3d;
  will-change:transform,opacity;
}
.browser__bar{
  display:flex; align-items:center; gap:6px;
  padding:9px 12px;
  background:#E2DCCE; border-bottom:1px solid #D2CBBB;
}
.browser__bar i{ width:8px; height:8px; border-radius:50%; background:#C4BCA9 }
.browser__bar span{
  margin-left:10px; padding:3px 12px;
  background:#F3EFE6; border-radius:var(--r-pill);
  font-size:.6rem; color:#8A8474;
}
.browser__view{ aspect-ratio:16/10.4; background:var(--cream); padding:11px }

.bweb{ display:grid; grid-template-columns:auto 1fr; gap:10px; height:100% }
.bweb__side{ display:flex; flex-direction:column; gap:6px; width:44px }
.bweb__side i{ height:9px; border-radius:4px; background:#DDD6C6 }
.bweb__side i:first-child{ background:var(--green); height:11px }
.bweb__main{ display:flex; flex-direction:column; gap:8px }
.bweb__h{ height:13px; width:52%; border-radius:5px; background:#CFC7B5 }
.bweb__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; flex:1 }
.bweb__grid i{ border-radius:6px; background:#fff; box-shadow:0 2px 8px -3px rgba(0,0,0,.25) }
.bweb__grid i:nth-child(1){ background:linear-gradient(150deg,#fff,#F0EBE0); box-shadow:0 0 0 1.5px var(--green-lite) }

/* Das Gerät liegt vor dem Fenster — beides zusammen ergibt das
   Bild „dieselbe Sache, zwei Wege". */
/* Groß genug, dass der Bildschirminhalt lesbar bleibt — darunter
   wird aus dem Gerät eine Briefmarke mit gequetschtem Text. */
.phone--small{
  position:absolute; right:0; bottom:-6%;
  height:clamp(280px,44vh,410px);
  z-index:3;
  will-change:transform,opacity;
}
.store--web svg{ width:15px; height:15px }

@media (max-width: 900px){
  .duo,.both,.shopbox{ grid-template-columns:1fr; gap:20px }
  .duo__stage{ order:-1 }
  .both__stage{ min-height:auto }
  .vows__grid{ grid-template-columns:1fr }
  .wall,.shop{ grid-template-columns:repeat(2,1fr) }
  .phone--small{ position:relative; right:auto; bottom:auto; margin-top:-14%; height:clamp(180px,26vh,240px) }
}
@media (max-width: 700px){
  .wordmark{ font-size:clamp(3rem,17vw,5rem) }
  .hero__lock{ --markw:clamp(150px,36vw,230px) }
  .duo__list{ display:none }
  .browser{ width:min(86vw,420px) }
}