/* ==========================================================================
   Der Traumfänger · Das sensomotorische Familiencafé - V2 (Vollreset)
   Layoutsystem  : sightline-split  (die Sichtachse bricht nie ab)
   Bewegung      : depth-dolly-scrub (Inhalte kommen auf dich zu, nicht von unten)
   Hero          : hero-split (die Schlagzeile IST der Deal, zweiseitig)

   Farben, Typografie, Form und Bewegung stammen aus
   docs/leads/traumfaenger-cafe/05-brand-tokens.md - mit der einen V2-Lizenz:
   --ease-serve für Mikrointeraktionen (Chips, Bonzeilen, der Poste-Day-Kipper).
   Grosse Bewegungen landen weiter auf --ease-settle.
   ========================================================================== */

@font-face{font-family:"Marcellus";src:url("../fonts/marcellus-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Work Sans";src:url("../fonts/worksans-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Dancing Script";src:url("../fonts/dancingscript-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* ---------- primitives: neutral field ---------- */
  --tfc-creme-bright:#FCF9F4; --tfc-creme:#F7F1E8;  --tfc-creme-deep:#EDE2D1;
  --tfc-leinen:#C0B09E;       --tfc-sand:#C7AE92;   --tfc-warmbeige:#C0A78D;
  --tfc-taupe:#A28F7B;        --tfc-holz:#AC8158;   --tfc-holz-deep:#A1754A;
  --tfc-rattan:#A67B51;       --tfc-braun:#4B2F1A;
  /* ---------- primitives: salbei ---------- */
  --tfc-salbei-mist:#E9EADF;  --tfc-salbei:#7F7C62; --tfc-salbei-deep:#605F46;
  --tfc-salbei-ink:#53572C;   --tfc-evening:#3F3D2E;
  /* ---------- primitives: terracotta (der eine warme Akzent) ---------- */
  --tfc-rose-mist:#EDD9CE;    --tfc-rose:#C8A797;   --tfc-terracotta:#AD7156;
  --tfc-terracotta-ink:#9C4A2F;
  /* ---------- primitives: ink ---------- */
  --tfc-ink:#2E2519;          --tfc-ink-muted:#6C6053;

  /* ---------- semantic ---------- */
  --surface:var(--tfc-creme); --surface-raised:var(--tfc-creme-bright);
  --surface-sand:var(--tfc-creme-deep); --surface-sage:var(--tfc-salbei-mist);
  --surface-evening:var(--tfc-evening);
  --ink:var(--tfc-ink); --ink-muted:var(--tfc-ink-muted);
  --ink-inverse:var(--tfc-creme); --ink-inverse-muted:#C9BFA9;
  --brand:var(--tfc-salbei); --brand-ink:var(--tfc-salbei-ink);
  --accent:var(--tfc-terracotta); --accent-ink:var(--tfc-terracotta-ink);
  --accent-contrast:var(--tfc-creme-bright);
  --border:#DBCFBE; --border-strong:var(--tfc-taupe); --focus:var(--tfc-salbei-ink);

  /* ---------- type ---------- */
  --font-display:"Marcellus","Iowan Old Style",Georgia,serif;
  --font-text:"Work Sans","Segoe UI",system-ui,sans-serif;
  --font-script:"Dancing Script",cursive;
  --text-hero:clamp(2.6rem,6vw,4.6rem);
  --text-h2:clamp(1.9rem,3.6vw,2.8rem);
  --text-h3:clamp(1.35rem,2.2vw,1.7rem);
  --text-script:clamp(1.6rem,3vw,2.4rem);
  --text-lead:1.1875rem; --text-body:1.0625rem; --text-small:.9375rem; --text-label:.8125rem;
  --lh-display:1.14; --lh-body:1.65; --ls-caps:.14em;

  /* ---------- shape ---------- */
  --radius-sm:10px; --radius-md:18px; --radius-lg:28px; --radius-pill:999px; --radius-circle:50%;
  --radius-arch:999px 999px 10px 10px;
  --line:1.25px; --flute-w:12px; --flute-gap:5px;
  --shadow-1:0 6px 18px rgba(46,37,25,.06); --shadow-2:0 14px 40px rgba(46,37,25,.09);

  /* ---------- spacing ---------- */
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-5:3rem;  --space-6:4.5rem; --space-7:6.5rem; --space-8:9rem;

  /* ---------- motion ---------- */
  --dur-micro:180ms; --dur-standard:420ms; --dur-reveal:800ms; --dur-ambient:9s;
  --ease-settle:cubic-bezier(.16,1,.3,1);
  --ease-drift:cubic-bezier(.37,0,.63,1);
  --ease-serve:cubic-bezier(.34,1.3,.64,1);   /* V2-Lizenz: die Tasse wird abgestellt */

  /* ---------- die Sichtachse ---------- */
  --schiene-w:32vw;      /* Breite des festen Sandblicks rechts */
  --schiene-luft:4vw;    /* Luft zwischen Bühne und Schiene */
  --schiene-clip:100%;   /* 0% = ganz offen, 100% = eingefahren */
  --deck-h:80px;  /* Runde 2 / Stapel 3: der ganze Traumfänger im Kopf (war 64px) */
  /* Der Rechtshinweis steht ÜBER dem Deck und klebt mit. Beide zusammen sind
     die Kopfhöhe, gegen die der Hero rechnet - sonst ragt er bei Scrollstand 0
     um genau die Hinweishöhe unter den ersten Bildschirm (gemessen: 33.9px).
     tc2.js misst den echten Wert nach (er bricht schmal um). */
  --hinweis-h:0px;  /* Go-Live 2026-10-01: der Vorschau-Hinweis ist weg. Kommt er je zurück, misst tc2.js/journal.js ihn wieder. */
  --kopf-h:calc(var(--deck-h) + var(--hinweis-h));

  /* ---------- die zwei Welten (Ch3): eine Auszeichnung, die ganze Seite ---- */
  --welt-kind:var(--tfc-sand);
  --welt-kind-hell:#E6D3BC;
  --welt-du:var(--tfc-salbei);
  --welt-du-hell:var(--tfc-salbei-mist);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--font-text);font-size:var(--text-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,canvas,svg{display:block;max-width:100%;}
img{height:auto;}
a{color:inherit;}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:400;line-height:var(--lh-display);letter-spacing:.012em;}
p{margin:0 0 var(--space-2);}
ul,ol{margin:0;padding:0;list-style:none;}
button,input{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px;}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.sprung{position:fixed;top:-999px;left:var(--space-2);z-index:200;background:var(--accent-ink);color:var(--accent-contrast);
  padding:.7rem 1.1rem;border-radius:var(--radius-pill);text-decoration:none;}
.sprung:focus{top:calc(var(--space-2) + 34px);}

.preis{font-variant-numeric:tabular-nums lining-nums;font-weight:500;font-style:normal;}
.mal,.blick-mal,.schiene-mal,.platz-mal,.deal-kicker,.saeule-mal,.raum-mal,.poste-mal,.bon-kopf span{
  font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:500;line-height:1.4;}

/* --------------------------------------------------------- Knopf (Pille) */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--accent-ink);color:var(--accent-contrast);
  border:0;border-radius:var(--radius-pill);
  padding:.92rem 1.6rem;font-size:1rem;font-weight:500;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-serve),box-shadow var(--dur-micro) var(--ease-settle),background var(--dur-micro) linear;
  box-shadow:0 2px 0 rgba(46,37,25,.10);
}
.knopf:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(156,74,47,.24);}
.knopf:active{transform:translateY(0);}
.knopf-klein{padding:.6rem 1.05rem;font-size:.9rem;}
.knopf-leer{background:transparent;color:var(--accent-ink);border:var(--line) solid var(--accent-ink);box-shadow:none;}
.knopf-leer:hover{background:var(--tfc-rose-mist);box-shadow:none;}

/* ------------------------------------------------------ Ring / Preisblase */
.reif{
  display:grid;place-items:center;aspect-ratio:1;border-radius:var(--radius-circle);
  border:var(--line) solid var(--ink);color:var(--ink);background:var(--surface-raised);
}
.reif svg{width:56%;height:56%;}
.reif-preis{border-color:var(--accent-ink);color:var(--accent-ink);background:var(--tfc-rose-mist);}

/* ------------------------------------------- Abschnittskopf: servierte Zeile */
.kopf{
  position:relative;font-size:var(--text-h2);max-width:19ch;margin:0 0 var(--space-3);
}
.kopf-klein{font-size:var(--text-h3);max-width:26ch;}
.kopf-hell{color:var(--ink-inverse);}
.kopf-strich{display:block;width:96px;height:13px;margin-top:.6rem;color:var(--accent);}
.kopf-strich path{stroke-dasharray:110;stroke-dashoffset:0;}
.motion-on .kopf-strich path{stroke-dashoffset:110;}

/* ------------------------------------------------------------------ Bogen */
.bogen,.posten-bogen,.kinder-bogen,.guck-bogen{
  border-radius:var(--radius-arch);overflow:hidden;
}

/* --------------------------------------------------------- Bühnenbreite */
.bahn{
  width:min(100% - 2 * var(--space-4),1180px);margin-inline:auto;
}
.bahn-eng{width:min(100% - 2 * var(--space-4),760px);}

/* Stationen, die auf der Sichtachse liegen: die Bühne hält die Schiene frei.
   EINE Spalte für die ganze Seite. Der Kasten ist überall derselbe (gleiche
   linke UND rechte Kante wie jede andere .bahn); nur der INHALT dieser fünf
   Stationen endet früher, weil rechts die Schiene steht - und zwar exakt an
   ihrer Innenkante (64 % der Bühnenbreite), nicht irgendwo davor.
   Die Reserve gilt NUR, solange es die Schiene überhaupt gibt: unter 1080px
   ist sie display:none (siehe unten), also gibt es dort nichts freizuhalten.
   Prozent statt vw, damit eine klassische Scrollleiste die Rechnung nicht
   um ihre eigene Breite verschiebt. */
@media (min-width:1080px){
  .saeulen .bahn,.karte .bahn,.rituale .bahn,.bestellen .bahn,.raeume .bahn{
    padding-right:calc(min(100% - 2 * var(--space-4),1180px) / 2 - 14%);
  }
}

/* ------------------------------------------- Ankunft in der Tiefe (z-approach)
   Inhalte kommen AUF DICH ZU (Massstab + z), sie fallen nicht von unten ein.
   Der Ruhezustand steht in EINER Regel, damit nichts blitzt; er hängt an
   .motion-on und fällt weg, sobald der Antrieb ausfällt (ganz unten). */
.motion-on [data-nah]{opacity:0;}
/* Der Auftritt des Heros: die Zeilen setzen sich ab, links zuerst. */
.motion-on [data-auf]{opacity:0;}

/* ======================================================= CHROME: Hinweis */
.v2-hinweis{
  position:sticky;top:0;z-index:120;margin:0;
  display:flex;flex-wrap:wrap;gap:.55rem;align-items:baseline;justify-content:center;
  background:var(--tfc-evening);color:var(--ink-inverse-muted);
  padding:.42rem 1rem;font-size:.76rem;letter-spacing:.05em;text-align:center;
}
.v2-hinweis strong{color:var(--ink-inverse);letter-spacing:var(--ls-caps);text-transform:uppercase;font-size:.7rem;font-weight:500;}
@media (max-width:640px){.v2-hinweis .weit{display:none;}}

/* =========================================================== CHROME: Deck */
.deck{
  position:sticky;top:var(--hinweis-h);z-index:110;
  display:flex;align-items:center;gap:var(--space-3);
  padding:.5rem clamp(1rem,3vw,2.2rem);min-height:var(--deck-h);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(9px) saturate(1.05);
  border-bottom:var(--line) solid transparent;
  transition:border-color var(--dur-standard) var(--ease-settle),background var(--dur-standard) linear;
}
.deck.is-tief{border-bottom-color:var(--border);background:color-mix(in srgb,var(--surface) 96%,transparent);}
.deck-mal{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto;}
.deck-mal img{width:38px;height:38px;object-fit:contain;mix-blend-mode:darken;}
.deck-wort{width:auto;height:26px;object-fit:contain;mix-blend-mode:darken;}
.deck-weg{display:flex;gap:1.35rem;margin-left:auto;}
.deck-weg a{
  font-size:.88rem;text-decoration:none;color:var(--ink-muted);padding:.3rem 0;
  border-bottom:1.5px solid transparent;transition:color var(--dur-micro) linear,border-color var(--dur-micro) linear;
}
.deck-weg a:hover,.deck-weg a.is-hier{color:var(--ink);border-bottom-color:var(--accent);}
.deck-weg a[hidden]{display:none;}
/* Runde 2: Menü und Knopf stehen in .deck-klappe. Auf dem Desktop ist die
   Klappe unsichtbar (display:contents), beide bleiben Teile der Leiste wie
   bisher. Auf Tablet und Handy wird daraus das Menü hinter dem Knopf
   .deck-burger. EINE Linkliste für beide Ansichten, keine Kopie. */
.deck-klappe{display:contents;}
.deck-klappe > .knopf{flex:0 0 auto;}
.deck-burger{display:none;}

/* Runde 2 (Kundin): das Logo grösser, sichtbarer und mittiger. */
.deck-mal img{width:48px;height:48px;}
/* Der Schriftzug ist selbst ein img in .deck-mal: ohne die höhere Spezifität
   wurde er bisher in das 38px-Quadrat des Reifs gezwungen und winzig. */
.deck-mal img.deck-wort{width:auto;height:36px;}
/* Stapel 3 (Kundin, per Sprachnachricht): im Kopf steht der GANZE Traumfänger
   mit Federn, nicht nur der Reif. Ausschnitt aus ihrer eigenen Wortbildmarke
   (logo-lockup-680, Quelle _source/logo-dc-crop-from-lockup-680.png).
   Hochformat 39:96, darum bestimmt die Höhe. */
.deck-mal img.deck-reif{width:auto;height:64px;}
@media (max-width:1079px){
  :root{--deck-h:72px;}
  .deck{padding-block:.3rem;}
  .deck-mal img.deck-reif{height:60px;}
}
@media (min-width:1280px){
  .deck{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
  .deck-weg{grid-column:1;grid-row:1;margin-left:0;justify-self:start;}
  .deck-mal{grid-column:2;grid-row:1;justify-self:center;}
  .deck-klappe > .knopf{grid-column:3;grid-row:1;justify-self:end;}
}

/* ---- Tablet und Handy (< 1080px): Menü hinter dem Knopf ---------------- */
@media (max-width:1079px){
  /* Knopf links, Logo in der Mitte, «Sag mir …» rechts. */
  .deck{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
  .deck-burger{
    display:inline-grid;place-items:center;grid-column:1;grid-row:1;justify-self:start;
    width:44px;height:44px;padding:0;cursor:pointer;color:var(--ink);
    border:var(--line) solid var(--border-strong);border-radius:var(--radius-circle);
    background:var(--surface-raised);
  }
  .deck-burger[hidden]{display:none;}
  .deck-burger:hover{background:var(--tfc-rose-mist);}
  .deck-burger:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
  .deck-burger svg{width:20px;height:20px;}
  .deck-burger path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
  .deck-burger .zu{display:none;}
  .deck.is-offen .deck-burger .auf{display:none;}
  .deck.is-offen .deck-burger .zu{display:inline;}
  .deck-mal{grid-column:2;grid-row:1;justify-self:center;}
  .deck-klappe > .knopf{grid-column:3;grid-row:1;justify-self:end;margin-left:0;}

  /* Das Menü: ein Blatt Papier wie der Kassenzettel, unter der Leiste. */
  .deck-weg{
    display:none;position:absolute;top:calc(100% + .4rem);left:clamp(1rem,3vw,2.2rem);right:clamp(1rem,3vw,2.2rem);
    flex-direction:column;gap:0;margin:0;padding:.4rem 1.1rem;
    max-height:calc(100svh - var(--kopf-h) - 1.5rem);overflow:auto;overscroll-behavior:contain;
    background:var(--surface-raised);border:var(--line) solid var(--border);border-radius:var(--radius-md);
    box-shadow:var(--shadow-1);
  }
  .deck.is-offen .deck-weg{display:flex;}
  .deck-weg a{
    display:flex;align-items:center;min-height:48px;font-size:1rem;color:var(--ink);
    border-bottom:var(--line) solid var(--border);padding:.2rem 0;
  }
  .deck-weg a:last-of-type{border-bottom:0;}
  .deck-weg a:hover,.deck-weg a.is-hier,.deck-weg a[aria-current="page"]{color:var(--accent-ink);border-bottom-color:var(--border);}
  .deck-weg a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
}
/* Auf dem Handy trägt die Leiste Knopf, Logo UND «Sag mir …» nicht mehr, ohne
   das Logo zu schrumpfen. Also wandert «Sag mir …» ins Menü (dasselbe
   Element, nur in der Klappe), und das Logo darf wachsen. */
@media (max-width:640px){
  .deck-klappe{
    display:none;position:absolute;top:calc(100% + .4rem);left:clamp(1rem,3vw,2.2rem);right:clamp(1rem,3vw,2.2rem);
    max-height:calc(100svh - var(--kopf-h) - 1.5rem);overflow:auto;overscroll-behavior:contain;
    background:var(--surface-raised);border:var(--line) solid var(--border);border-radius:var(--radius-md);
    box-shadow:var(--shadow-1);padding:.4rem 1.1rem 1.1rem;
  }
  .deck.is-offen .deck-klappe{display:block;}
  .deck-klappe .deck-weg{display:flex;position:static;max-height:none;overflow:visible;border:0;box-shadow:none;padding:0;background:none;}
  .deck-klappe > .knopf{display:flex;justify-content:center;width:100%;margin-top:.8rem;min-height:48px;font-size:.95rem;}
  .deck-mal img{width:44px;height:44px;}
  .deck-mal img.deck-wort{height:32px;}
  .deck-mal{gap:.45rem;}
}
@media (prefers-reduced-motion:no-preference){
  .deck.is-offen .deck-weg,.deck.is-offen .deck-klappe{animation:deck-auf 200ms var(--ease-serve) both;}
  @media (min-width:641px){.deck.is-offen .deck-klappe{animation:none;}}
  @media (max-width:640px){.deck.is-offen .deck-klappe .deck-weg{animation:none;}}
}
@keyframes deck-auf{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* ==========================================================================
   DIE SICHTACHSE - ein einziges festes Element, das den Sand im Blick hält.
   Die Breite wird NICHT animiert (kein Reflow): sichtbar wird sie über
   clip-path, das nur der Compositor anfasst.
   ========================================================================== */
.schiene{
  position:fixed;top:0;right:0;width:var(--schiene-w);height:100vh;height:100svh;
  z-index:40;pointer-events:none;overflow:hidden;
  clip-path:inset(0 0 0 var(--schiene-clip));
  transition:clip-path 720ms var(--ease-settle);
  background:var(--surface-sand);
}
.schiene-innen{position:absolute;inset:0;}
.schiene-blatt{position:absolute;inset:0;opacity:0;transition:opacity 620ms var(--ease-settle);}
.schiene-blatt.is-an{opacity:1;}
.schiene-blatt img,.schiene-blatt video{width:100%;height:100%;object-fit:cover;}
.schiene-blatt video{position:absolute;inset:0;opacity:0;transition:opacity 700ms linear;}
.schiene-blatt video.is-da{opacity:1;}
.schiene-mal{
  position:absolute;left:0;bottom:0;margin:0;padding:.7rem 1.1rem;text-align:right;
  color:var(--ink-inverse);background:linear-gradient(to top,rgba(46,37,25,.52),rgba(46,37,25,0));
  width:100%;
}
/* die Innenkante der Schiene: die Zaunlinie zwischen Halle und Tresen */
.schiene::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--line);
  background:var(--border-strong);opacity:.5;z-index:2;
}
@media (max-width:1079px){.schiene{display:none;}}
@media (prefers-reduced-motion:reduce){.schiene{transition:none;}}

/* mobiler Ersatz: volle Streifen zwischen den Stationen */
.blick{display:none;}
.blick[hidden]{display:none!important;}
@media (max-width:1079px){
  .blick{
    display:block;position:relative;height:34vh;min-height:200px;
    background-size:cover;background-position:center;background-color:var(--surface-sand);
    margin:var(--space-5) 0;
  }
  .blick[data-blick="halle"]{background-image:url("../img/halle-quer-900.webp");
    background-image:image-set(url("../img/halle-quer-900.avif") type("image/avif"),url("../img/halle-quer-900.webp") type("image/webp"));}
  .blick[data-blick="tresen"]{background-image:url("../img/tresen-800.webp");
    background-image:image-set(url("../img/tresen-800.avif") type("image/avif"),url("../img/tresen-800.webp") type("image/webp"));}
  .blick[data-blick="sand"]{background-image:url("../img/sandhalle-800.webp");
    background-image:image-set(url("../img/sandhalle-800.avif") type("image/avif"),url("../img/sandhalle-800.webp") type("image/webp"));}
  /* Mobil-Audit F4: die 48px Rand liessen die Koerperfarbe (creme) als
     sichtbaren Streifen gegen die Sand-Station darunter stehen. Der Streifen
     ist jetzt ein randloser Vollbild-Trenner. */
  .blick{margin:0;}
  .blick-mal{
    position:absolute;left:0;bottom:0;width:100%;padding:.7rem 1.1rem;color:var(--ink-inverse);
    background:linear-gradient(to top,rgba(46,37,25,.55),rgba(46,37,25,0));
  }
}

/* mobiler Gucker: der Bogen in der Ecke */
.guck{display:none;}
.guck[data-aus]{display:none!important;}
@media (max-width:1079px){
  .guck:not([hidden]){
    display:block;position:fixed;right:.9rem;bottom:5.4rem;z-index:95;width:88px;
  }
  .guck-bogen{
    width:88px;height:118px;border:var(--line) solid var(--border-strong);
    box-shadow:var(--shadow-2);background-size:cover;background-position:center 30%;
    background-image:url("../img/kind-400.webp");
    background-image:image-set(url("../img/kind-400.avif") type("image/avif"),url("../img/kind-400.webp") type("image/webp"));
  }
  .guck-zu{
    position:absolute;top:-9px;left:-9px;width:26px;height:26px;border-radius:var(--radius-circle);
    border:var(--line) solid var(--border-strong);background:var(--surface-raised);color:var(--ink-muted);
    line-height:1;cursor:pointer;display:grid;place-items:center;font-size:1rem;
  }
}

/* ==========================================================================
   1 · DER DEAL - Variante A «Der Tresen». EIN vollflächiges Bild.

   Der Split ist weg. Die Rangfolge macht jetzt die SCHÄRFEEBENE der Aufnahme:
   Tasse scharf vorn, Sandhalle weich dahinter. Café zuerst, Kinder ergänzend,
   noch bevor ein Wort gelesen ist (Spec 09 §A, freigegeben 2026-08-31).

   Die Hülle bleibt höher als der Bildschirm - aber nicht mehr, damit eine
   Doppeltür aufgeht, sondern damit die eine Platte beim Weiterscrollen
   heranwächst und in den Abend eindunkelt, während «Komm rein.» aus der Tiefe
   kommt. Dahinter steht Station 2, die dieselbe Abendfarbe trägt: der Hero
   löst sich in die nächste Station auf, statt sich zu öffnen.
   ========================================================================== */
.deal-huelle{position:relative;z-index:1;}
.deal-hinten{display:none;}
.motion-on .deal-huelle{height:186svh;}
.motion-on .deal-hinten{
  /* Liegt HINTER dem Hero, nicht darueber: das negative margin-bottom nimmt
     die Hoehe wieder aus dem Fluss, sonst schoebe die Kulisse den Hero um
     einen ganzen Bildschirm nach unten. */
  display:block;position:sticky;top:var(--kopf-h);z-index:0;
  height:calc(100svh - var(--kopf-h));margin-bottom:calc(var(--kopf-h) - 100svh);
  background:
    radial-gradient(120% 80% at 50% 62%,rgba(255,214,158,.30) 0%,rgba(255,196,128,.10) 34%,rgba(0,0,0,0) 70%),
    var(--surface-evening);
}
/* Der Satz auf der Bühne (Hero-Fix Runde 2): die Tür geht nicht auf Leere
   auf. Hinter den Flügeln wartet die Einladung - dieselben Worte wie der
   Scrollhinweis - und fährt mit der Bühne hinauf in Station 2. Lebt im
   aria-hidden .deal-hinten und nur bei .motion-on auf breiten Schirmen:
   ohne Bewegung existiert weder Tür noch Bühne, also auch kein Satz. */
.deal-hinten-satz{
  /* Zentrierung macht ausschliesslich GSAP (xPercent/yPercent) - ein
     CSS-translate dazu wuerde beim Parsen in px gebacken und DOPPELT
     verschoben (gemessen: 172px zu weit links bei 1440). */
  position:absolute;left:50%;top:50%;
  margin:0;white-space:nowrap;opacity:0;
  font-family:var(--font-display);color:var(--ink-inverse);
  font-size:clamp(2.4rem,4.4vw,4.6rem);letter-spacing:.02em;line-height:1;
}
.motion-on .deal{position:sticky;top:var(--kopf-h);height:calc(100svh - var(--kopf-h));z-index:1;}
.deal{
  --deal-rand:clamp(2rem,4.6vw,4.6rem);
  position:relative;min-height:calc(100svh - var(--kopf-h));
  background:var(--tfc-warmbeige);overflow:hidden;
}
/* overflow:hidden bleibt AUCH in Bewegung: die Platte wächst beim Ausgang auf
   1.06 und würde sonst über das Dokument hinausfahren, aufgefangen nur noch
   von body{overflow-x:hidden} - eine einzige Regel als einzige Sicherung. */
/* display:block ist Pflicht, nicht Kosmetik: <picture> ist von Haus aus inline.
   Auf breiten Schirmen blockt position:absolute es ohnehin; auf dem Handy
   steht es im Fluss, und ein inline-Kasten ignoriert jede Höhenangabe - das
   Bild fiel dort auf 0 zusammen und der Hero begann mit einer leeren
   Cremefläche. Gemessen am Handy-Bau, nicht theoretisch. */
.deal-platte,.deal-platte img{
  display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
}
/* Der Brennpunkt liegt auf der Tasse, rechts der Mitte (Spec 09 §A). */
.deal-platte img{object-position:68% 60%;transform-origin:64% 62%;}
.motion-on .deal-platte img{will-change:transform;}

/* DER SCHLEIER - gemessen, nicht geschätzt (portiert aus dem freigegebenen
   Muster _source/hero-varianten/hv.css, Messwerte aus qa-a-schleier.mjs).
   Das Foto ist warm und mittel-dunkel: die Luminanz der linken Bildhälfte
   liegt bei 5-30 von 100. Ein schlichter Creme-Verlauf über die ganze Breite
   trägt die 13px-Kickerzeile dort NICHT (gemessen 1.87:1) und wäscht
   gleichzeitig die Tasse aus (gemessen +28 Punkte) - also genau das Gegenteil
   dessen, was der Hero behauptet.
   Deshalb: EINE Cremefläche, deren Deckung von zwei Masken multipliziert wird
   (mask-composite:intersect). Die waagerechte Maske hält den Schleier links,
   die senkrechte hält ihn UNTEN. Der Schnitt beider stirbt vor den
   Rattanleuchten oben und vor der Tasse rechts - kein Kasten, keine Spalte,
   ein weicher Zug in die Textecke. Deckel 86 %, damit das Foto nie ganz
   verschwindet. Gemessen ergibt das Kicker 5.15:1 bei +5.2 auf der Tasse. */
/* Stapel 3 (2026-09-29), neues Familienfoto: hinter dem Text ist es MITTELTONIG
   (ohne Schleier 1.0-1.2:1), die Schrift hängt also ganz am Schleier. Mit den
   alten Deckeln (.86/.84/.70) fielen Kicker und Lead bei 1280 auf 4.27/4.40:1.
   Gemessen (dunkelstes Zwanzigstel unter jedem Textkasten, 1280/1440/1920):
   waagerecht .92/.90/.80/.52/.14, senkrecht ab 6% (statt 11%) dichter. Kicker,
   H1, Lead, Kritzel und «Tritt ein» >= 4.5:1 von 1280x720 bis 2560x1440; einzige
   Ausnahme 1080x760: Kicker 4.21:1 (vorher, altes Foto: 2.94:1). Rechts von
   74% bleibt das Foto unberührt. Messwerkzeug: _cms/r2-hero-probe.mjs. */
.deal-schleier{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--tfc-creme);
  /* Runde H1: der Schleier zieht in die Ecke OBEN links und stirbt vor dem
     Haar der Mutter (x 43 %) und über ihren Händen (y 84 %). */
  /* Runde H4: bei 1280x720 reicht der Textblock bis 88 % der Höhe, der Kritzel
     neben dem Knopf fiel dort aus dem senkrechten Auslauf (2.54:1). Senkrecht
     bleibt der Schleier bis 76 % voll und läuft erst dann aus; waagerecht
     hält er bis 30 % und ist bei 44 % weg (Haar der Mutter ab 36-37 vw). */
  -webkit-mask-image:
    linear-gradient(to right,rgba(0,0,0,.92) 0%,rgba(0,0,0,.90) 20%,rgba(0,0,0,.82) 30%,rgba(0,0,0,.50) 36%,rgba(0,0,0,.14) 40%,transparent 44%),
    linear-gradient(to bottom,#000 0%,#000 76%,rgba(0,0,0,.85) 88%,rgba(0,0,0,.55) 100%);
  mask-image:
    linear-gradient(to right,rgba(0,0,0,.92) 0%,rgba(0,0,0,.90) 20%,rgba(0,0,0,.82) 30%,rgba(0,0,0,.50) 36%,rgba(0,0,0,.14) 40%,transparent 44%),
    linear-gradient(to bottom,#000 0%,#000 76%,rgba(0,0,0,.85) 88%,rgba(0,0,0,.55) 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* DER ABEND - dasselbe Element trägt BEIDE Bewegungen des Heros, und es trägt
   exakt die Farbe der Bühne dahinter (.deal-hinten) und der Station 2:
     · Ankunft  : von .30 auf 0 - die Aufnahme schwillt aus der Dämmerung an
                  (die «luminance swell» der Spec, rein kompositiert, kein
                  filter auf einem vollflächigen Bild)
     · Ausgang  : von 0 auf 1 - die Platte dunkelt ein, bis sie mit der Bühne
                  farbgleich ist; erst DANN blendet der Hero weg, weshalb der
                  Übergang zu «Komm rein.» keine sichtbare Naht hat.
   Ruhezustand ohne Bewegung: unsichtbar. Kein Inhalt hängt daran.

   FLACHES ABENDGRÜN, KEIN WARMER SCHEIN - gemessen, nicht geraten. Der erste
   Bau übernahm den Radialschein der Bühne (rgba(255,214,158,.30) über
   #3F3D2E). Auf der Bühne ist das ein warmer Lichtsee auf Dunkel; ÜBER einem
   Foto ist derselbe Verlauf bei halber Deckung ein warmer Dunst: die Mitte
   mischt zu rgb(121,107,80) und wusch die Aufnahme bei Scrollstand 600 blass,
   statt sie einzudunkeln. Der Schein bleibt deshalb, wo er hingehört - auf der
   Bühne dahinter. Er kommt genau dann hoch, wenn der Hero wegblendet, und
   liest sich als das Licht, das mit der Einladung angeht. */
.deal-abend{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:var(--surface-evening);
}

/* Art-Direction 2026-09-29 (Runde H1), Familienfoto: der Textblock steht OBEN
   LINKS, nicht mehr unten links. Unten links sitzen Mutter und Kind (Gesichter
   bei x 37-49 %, y 33-60 % bei 1440); oben links ist nur das Bokeh der
   Rattanleuchten, wo der Schleier niemandem etwas wegnimmt. Die H1 wird auf
   Desktop schmaler (4.2 vw statt 6 vw), damit «Zeit für Kinder.» vor dem Haar
   der Mutter endet (gemessen: 35 vw bei 1440, 31 vw bei 1920, 35 vw bei 1280). */
.deal-du{
  position:absolute;left:var(--deal-rand);top:clamp(2.2rem,4.2vw,3.6rem);z-index:5;
  width:min(46rem,calc(100% - 2 * var(--deal-rand)));
}
/* Der Kicker ist die kleinste Schrift auf dem Foto und damit die einzige, die
   den Schleier wirklich braucht: er bleibt in dessen dichter Zone. */
.deal-kicker{color:var(--brand-ink);margin-bottom:clamp(.9rem,2vw,1.5rem);max-width:30rem;}
.deal-kicker span{opacity:.5;margin:0 .18em;}
.deal-satz-du{
  display:block;margin:0;font-size:var(--text-hero);letter-spacing:.005em;
}
/* Runde H2: auf Desktop 4.2 vw statt 6 vw (Deckel bleibt 4.6 rem), damit
   «Zeit für Kinder.» vor dem Haar der Mutter endet. Steht NACH der Grundregel,
   gleiche Spezifität, Reihenfolge entscheidet. */
@media (min-width:1080px){.deal-satz-du{font-size:clamp(2.6rem,4.2vw,4.6rem);}}
/* Zwei Zeilen, zwei Hälften des Deals - erst deine, dann die des Kindes.
   Der Satz bricht an der Stelle, an der er auch gesprochen umbricht. */
.deal-zeile{display:block;}
/* Der Lead steht als EINZIGE Fliesstextzeile auf dem Foto, und dort trägt
   Ink-gedämpft (#6C6053) nicht: gemessen 4.37:1 im dunkelsten Zwanzigstel
   seines Grundes, also unter der 4.5-Schwelle für Textgrösse (19px ist nach
   WCAG kein «large text»). Salbei-tief ist der nächste echte Token nach unten,
   misst 5.6:1, bleibt deutlich leiser als die fast schwarze H1 und nimmt die
   Farbe des Tresens auf, vor dem er steht. Gemessen in qa-hero-kontrast.mjs. */
.deal-lead{
  font-size:var(--text-lead);color:var(--tfc-salbei-deep);max-width:30ch;
  margin-top:clamp(1rem,2.2vw,1.6rem);margin-bottom:clamp(1.4rem,3vw,2.2rem);
}
.deal-tat{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:0;}
.deal-kritzel{
  font-family:var(--font-script);font-weight:600;font-size:1.35rem;color:var(--brand-ink);
  transform:rotate(-6deg);display:inline-block;
}
/* Auf halber Breite ist der Schleier dünn: die Zeile nimmt das dunklere Ink
   statt Ink-gedämpft, sonst steht sie bei 3.6:1 auf dem Foto. */
.deal-rein{
  position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(1.4rem,3.4vw,2.6rem);z-index:6;
  display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);
  font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;
}
.deal-rein svg{width:14px;height:22px;flex:0 0 auto;}
.motion-on .deal-rein svg{animation:tippen 2.4s var(--ease-drift) infinite;}
@keyframes tippen{0%,100%{transform:translateY(0);opacity:.55;}50%{transform:translateY(5px);opacity:1;}}

/* Runde H3 (Messung probe2, Glyphenkästen statt Blockkästen): Kicker und
   Lead brechen vor dem Haar der Mutter um (bei 1080 endete der Kicker bei
   44 vw: 2.38:1), und «Tritt ein» wandert aus der Bildmitte (dort lag es auf
   Pulli und Kinderhose, 1.1-1.4:1) in die Ecke unten rechts auf den
   salbeigrünen Tresen. Steht NACH den Grundregeln von .deal-rein. */
@media (min-width:1080px){
  /* Runde H6: die Kickerzeile brach bei 1280/1080 mit «2026» allein in der
     dritten Zeile. Datum, Ort und Name bleiben je ein Stück, die Zeilen
     werden ausgeglichen. */
  .deal-kicker{max-width:min(30rem,31vw);text-wrap:balance;}
  .deal-kicker data{white-space:nowrap;}
  /* Runde H7: beim Umbruch begann eine Zeile mit «·». Auf Desktop hängt der
     Punkt deshalb geschützt am vorangehenden Wort (::after mit \00a0), die
     echten Punkt-Spans sind hier ausgeblendet. Nur CSS, das HTML und damit
     das Handy bleiben unverändert. */
  .deal-kicker span{display:none;}
  .deal-kicker data:not(:last-child)::after{content:"\00a0\00b7";opacity:.5;margin-right:.18em;}
  .deal-lead{max-width:min(30ch,28vw);}
  .deal-rein{left:auto;right:var(--deal-rand);transform:none;}
  /* Runde H5: der Kritzel «Deine Auszeit» steht ÜBER dem Knopf statt rechts
     daneben. Rechts daneben war die Knopfzeile die breiteste Zeile des Blocks
     und lief bei 1080 bis 41 vw ins Haar der Mutter (1.69:1), bei 1280 auf den
     Ärmel des Kindes (3.0-3.6:1). Über dem Knopf liegt er bei 19 vw in der
     dichten Zone und liest sich als handschriftliche Zeile, die in den Knopf
     führt. */
  .deal-tat{flex-direction:column-reverse;align-items:flex-start;gap:.55rem;}
  .deal-kritzel{margin-left:.35rem;transform-origin:0 100%;}
}

/* --- Handy: Kaffee auf dem Tresen zuerst, der Sand glüht dahinter ---------
   Umkehrung des alten Handy-Fehlers (dort füllte das Kind den ganzen ersten
   Bildschirm). Das Bild ist der Hochschnitt, rechtslastig, Tasse im Rahmen;
   der Text steht DARUNTER auf Creme, wo der Schleier nichts zu tragen hat und
   auf einen Anschluss-Hauch zusammenschrumpft. */
@media (max-width:1079px){
  /* top:auto ist Pflicht: das .motion-on-Regelwerk oben setzt top:var(--kopf-h)
     für die klebende Fassung. Wird hier nur position auf relative
     zurückgedreht, BLEIBT das top stehen - und ein relativ positioniertes
     Element mit top:125px rutscht um genau diese 125px nach unten. Gemessen:
     .deal-huelle stand bei 125, .deal bei 250, mit einer leeren Cremefläche
     dazwischen und 125px Überhang in die nächste Station. */
  .deal{min-height:0;background:var(--surface);top:auto;}
  /* Die Bildhöhe der Spec ist 62svh - gemessen an einem Kopf von 65px. Diese
     Seite trägt zusätzlich den Rechtshinweis, der bei 390 auf zwei Zeilen
     umbricht: der Kopf ist hier 125px, also 60 mehr. Ungerechnet fielen Kicker
     UND Schlagzeile unter die Falte - genau der Handy-Fehler, den Variante A
     beheben soll. Deshalb: 62svh, ABER nie mehr, als nach Kopf und Textblock
     übrig bleibt. Die 19rem sind der gemessene Textblock (2.4 Polster + 3.4
     Kicker + 0.9 Abstand + 11.9 vierzeilige H1 bei 2.6rem/1.14). */
  .deal{--deal-bild-h:max(300px,min(62svh,calc(100svh - var(--kopf-h) - 19rem)));}
  .deal-platte{position:relative;inset:auto;height:var(--deal-bild-h);}
  .deal-platte img{object-position:52% 56%;}
  .deal-schleier{
    inset:0 0 auto 0;height:var(--deal-bild-h);
    background:linear-gradient(to top,rgba(247,241,232,.30) 0%,rgba(247,241,232,0) 22%);
    -webkit-mask-image:none;mask-image:none;
  }
  .deal-abend{display:none;}
  .deal-du{
    position:static;width:auto;
    padding:clamp(2.4rem,7vw,3rem) var(--space-4) var(--space-2);
  }
  .deal-kicker{max-width:none;}
  .deal-lead{max-width:40ch;}
  .deal-rein{
    position:static;transform:none;color:var(--ink-muted);
    padding:0 var(--space-4) var(--space-5);
  }
  .motion-on .deal-huelle{height:auto;}
  .motion-on .deal-hinten{display:none;}
  .motion-on .deal{position:relative;top:auto;height:auto;overflow:hidden;}
}

/* ==========================================================================
   2 · DAS HAUS, AUFGESCHNITTEN - der interaktive Grundriss.

   Kein Pin, kein Scrub, keine Kamerafahrt: das Haus steht als Modell auf dem
   Tisch, du drehst es selbst, tippst einen Raum an, und der Raum antwortet mit
   dem, was VERÖFFENTLICHT ist. Räume ohne Inhalt bleiben Ton: beschriftet,
   aber still.

   Drei Darstellungen, EIN Informationsstand:
     · der SVG-Riss steht statisch im HTML (erster Paint, Handy, Rückfall,
       Bewegungsverzicht) - nie ein Spinner, nie ein Platzhalter
     · das Tonmodell löst ihn ab, sobald Three.js da ist und das Gerät passt
     · die Raum-Chips sind in beiden Fällen dieselben echten <button>
   ========================================================================== */
.platz{
  background:var(--surface-evening);color:var(--ink-inverse);position:relative;z-index:2;
  padding-block:var(--space-8) var(--space-7);   /* derselbe Takt wie jede grosse Station */
}
.platz-mal{color:var(--ink-inverse-muted);margin-bottom:.7rem;}
.platz-mal span{opacity:.5;margin:0 .2em;}
.platz-lead{color:var(--ink-inverse-muted);max-width:46ch;margin-bottom:var(--space-3);}

/* ---- Die Legende IST der Filter, und sie zitiert die Schlagzeile --------- */
.welten{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:var(--space-3);}
.welt-chip{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  border:var(--line) solid rgba(247,241,232,.34);border-radius:var(--radius-pill);
  background:transparent;color:var(--ink-inverse-muted);
  padding:.4rem .95rem;font-size:var(--text-label);letter-spacing:var(--ls-caps);
  text-transform:uppercase;font-weight:500;
  transition:transform var(--dur-micro) var(--ease-serve),background var(--dur-micro) linear,
             color var(--dur-micro) linear,border-color var(--dur-micro) linear;
}
.welt-chip:hover{border-color:rgba(247,241,232,.7);color:var(--ink-inverse);}
.welt-chip[aria-pressed="true"]{background:var(--ink-inverse);color:var(--tfc-braun);border-color:var(--ink-inverse);}
.welt-punkt{width:10px;height:10px;border-radius:var(--radius-circle);flex:0 0 auto;}
.welt-chip[data-welt="kind"] .welt-punkt{background:var(--welt-kind);}
.welt-chip[data-welt="du"] .welt-punkt{background:var(--welt-du-hell);}
.welten-satz{
  margin:0;font-size:var(--text-small);color:var(--welt-kind);flex:1 1 100%;
  min-height:1.4em;opacity:0;transition:opacity var(--dur-standard) linear;
}
.welten-satz.is-da{opacity:1;}

/* ---- Die Bühne ---------------------------------------------------------- */
.plan{
  position:relative;margin-top:var(--space-3);
  width:min(100% - 2 * var(--space-4),1180px);margin-inline:auto;
}
.plan-buehne{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:radial-gradient(120% 90% at 50% 30%,#4A4836 0%,var(--surface-evening) 68%);
  border:var(--line) solid rgba(247,241,232,.16);
  height:min(calc(100svh - var(--kopf-h) - 4rem),640px);min-height:400px;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;
}
.plan.is-3d .plan-buehne{cursor:grab;}
.plan.is-3d .plan-buehne:active{cursor:grabbing;}
.plan-glas{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transition:opacity 700ms linear;pointer-events:none;
}
.plan-glas.is-da{opacity:1;}

/* Der Riss: exakt im Seitenverhältnis des Grundrisses, damit die Chips ohne
   Letterbox-Rechnerei auf ihren Räumen sitzen. */
.plan-riss{
  position:absolute;inset:0;margin:auto;
  aspect-ratio:1784 / 1697;width:auto;height:auto;max-width:88%;max-height:88%;
  transition:opacity 500ms linear;
}
.plan.is-3d .plan-riss{opacity:0;pointer-events:none;}
.riss-huelle{fill:none;stroke:rgba(247,241,232,.30);stroke-width:5;}
.riss-raum,.riss-tresen{
  stroke:rgba(247,241,232,.26);stroke-width:3;
  fill:#57553F;
  transition:fill 420ms var(--ease-settle),opacity 420ms var(--ease-settle);
}
.riss-raum[data-welt="kind"]{fill:#8C7457;}
.riss-raum[data-welt="du"]{fill:#5F6247;}
.riss-tresen{fill:var(--tfc-creme-deep);stroke:var(--tfc-salbei-mist);}
.riss-raum-wach{cursor:pointer;}
.riss-hocker circle{fill:var(--tfc-rattan);opacity:.85;}
.riss-zaun{stroke:var(--tfc-holz);stroke-width:13;stroke-dasharray:9 9;stroke-linecap:round;}
.riss-haus polygon{fill:var(--tfc-holz-deep);opacity:.92;}
.riss-schuhe rect{fill:var(--tfc-taupe);transition:transform 620ms var(--ease-serve);}
.riss-pfeil{fill:none;stroke:var(--tfc-creme);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.5;}
.riss-kegel{
  fill:var(--tfc-lampe,#FFD9A6);opacity:0;pointer-events:none;
  transition:opacity 520ms var(--ease-settle);
}
.plan[data-welt="du"] .riss-kegel{opacity:.19;}
/* Hervorheben und Abdunkeln - die zwei harten Regeln stecken hier drin:
   der Sand geht NIE unter ~40 %, und der Tresen leuchtet in BEIDEN Filtern. */
.plan[data-welt="kind"] .riss-raum[data-welt="du"],
.plan[data-welt="du"] .riss-raum[data-welt="kind"]{opacity:.34;}
.plan[data-welt="du"] .riss-raum[data-raum="sandhalle"]{opacity:.62;}
.plan[data-welt="kind"] .riss-raum[data-raum="sandhalle"],
.plan[data-welt="du"] .riss-raum[data-welt="du"]{filter:brightness(1.22);}
.plan[data-welt="kind"] .riss-raum[data-welt="kind"]{filter:brightness(1.22);}
.riss-raum.is-wahl,.riss-tresen.is-wahl{stroke:var(--accent);stroke-width:7;opacity:1;}

/* ---- Die Chips: EINE Liste. Ihr Ruhezustand ist eine echte, gesetzte Liste
   unter dem Riss - ohne JS, ohne Projektion, ohne Verrenkung lesbar. Erst wenn
   JS die Bühne wirklich vermessen hat, hebt .is-projiziert sie auf das Modell.
   Damit gibt es KEINE doppelten Knöpfe und keinen leeren Plan bei JS-Ausfall. */
.plan-chips{
  display:flex;flex-wrap:wrap;gap:.45rem;margin:var(--space-3) 0 0;z-index:4;
}
.plan-ort{white-space:nowrap;font-size:var(--text-label);letter-spacing:.06em;line-height:1;}
.plan.is-projiziert .plan-chips{position:absolute;inset:0;display:block;margin:0;pointer-events:none;}
.plan.is-projiziert .plan-ort{position:absolute;left:0;top:0;transform:translate3d(-50%,-50%,0);}
.plan-chip{
  display:inline-block;pointer-events:auto;cursor:pointer;font:inherit;letter-spacing:inherit;
  border:var(--line) solid rgba(247,241,232,.42);border-radius:var(--radius-pill);
  background:rgba(46,37,25,.62);color:var(--ink-inverse);
  padding:.34rem .72rem;font-weight:500;
  backdrop-filter:blur(4px);
  transition:background var(--dur-micro) linear,border-color var(--dur-micro) linear,
             color var(--dur-micro) linear,opacity 300ms linear;
}
.plan-chip::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:var(--radius-circle);
  margin-right:.42rem;vertical-align:.02em;background:var(--tfc-taupe);
}
.plan-chip[data-welt="kind"]::before{background:var(--welt-kind);}
.plan-chip[data-welt="du"]::before{background:var(--welt-du-hell);}
.plan-chip[data-welt="beide"]::before{background:linear-gradient(90deg,var(--welt-kind) 0 50%,var(--welt-du-hell) 50% 100%);}
.plan-chip:hover,.plan-chip:focus-visible{background:var(--ink-inverse);color:var(--tfc-braun);border-color:var(--ink-inverse);}
.plan-chip[aria-current="true"]{background:var(--accent-ink);color:var(--accent-contrast);border-color:var(--accent-ink);}
/* Die acht ohne veröffentlichten Inhalt: beschriftet, aber sie antworten
   nicht. Kein Zeiger, keine Karte, kein erfundener Text. */
.plan-still{
  color:var(--tfc-taupe);font-weight:400;text-transform:uppercase;font-size:.7rem;
  border:var(--line) dashed rgba(162,143,123,.5);border-radius:var(--radius-pill);
  padding:.32rem .7rem;opacity:.8;
}
/* Auf dem Modell brauchen sie einen Rücken, sonst verschwindet Taupe im Holz. */
.plan.is-projiziert .plan-still{
  border-color:transparent;background:rgba(46,37,25,.46);color:#D9CCB8;
  padding:.24rem .55rem;opacity:.92;backdrop-filter:blur(2px);
}
.plan-ort.is-weg,.plan.is-projiziert .plan-ort.is-weg{opacity:.1;}
/* Ist eine Karte offen, tritt der Rest des Hauses zurueck: ein Raum wird
   gelesen, nicht siebzehn. */
.plan.is-fokus .plan-still{opacity:.26;}
.plan.is-fokus .plan-chip:not([aria-current="true"]){opacity:.5;}
/* Sitzt du erst einmal, ist Schluss mit Beschriftung: das hier ist der
   Ausblick, nicht mehr der Plan. visibility statt opacity, damit auch der
   Tabulator nicht mehr in die verdeckte Liste läuft. */
.plan.is-sitz .plan-chips,.plan.is-sitz .plan-steuer{visibility:hidden;opacity:0;transition:opacity 420ms var(--ease-settle);}
/* Abgedunkelte Welt: auch die Chips treten zurück. Die zwei harten Regeln
   gelten auch hier: der Sand bleibt lesbar, der Tresen leuchtet immer. */
.plan[data-welt="kind"] .plan-ort[data-welt="du"],
.plan[data-welt="du"] .plan-ort[data-welt="kind"]{opacity:.42;}
.plan[data-welt="du"] .plan-ort[data-ort="sandhalle"],
.plan .plan-ort[data-ort="bartresen"]{opacity:1;}

/* ---- Steuerung: Zoom und Übersicht (das Rad zoomt NIE) ------------------- */
.plan-steuer{
  position:absolute;right:.8rem;bottom:.8rem;z-index:6;display:flex;gap:.4rem;
}
.plan-steuer button{
  width:34px;height:34px;border-radius:var(--radius-circle);cursor:pointer;
  border:var(--line) solid rgba(247,241,232,.34);background:rgba(46,37,25,.6);
  color:var(--ink-inverse);line-height:1;display:grid;place-items:center;font-size:1rem;
  backdrop-filter:blur(4px);
  transition:transform var(--dur-micro) var(--ease-serve),background var(--dur-micro) linear;
}
.plan-steuer button:hover{background:var(--ink-inverse);color:var(--tfc-braun);transform:scale(1.06);}
.plan-steuer .plan-uebersicht{width:auto;padding:0 .85rem;border-radius:var(--radius-pill);font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;}
.plan:not(.is-3d) .plan-steuer{display:none;}

.plan-tipp{
  position:absolute;left:50%;top:1.1rem;transform:translateX(-50%);
  margin:0;padding:.45rem 1rem;border-radius:var(--radius-pill);z-index:7;
  background:rgba(247,241,232,.14);border:var(--line) solid rgba(247,241,232,.4);
  color:var(--ink-inverse);font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;
  backdrop-filter:blur(3px);pointer-events:none;
}

/* ---- Die Raumkarte: rechts auf der Bühne, auf dem Handy von unten -------- */
.plan-karte{
  position:absolute;right:var(--space-4);top:var(--space-4);z-index:8;
  width:380px;max-width:calc(100% - 2 * var(--space-4));
  max-height:calc(100% - 2 * var(--space-4));
  display:flex;flex-direction:column;
  background:var(--surface-raised);color:var(--ink);
  border:var(--line) solid var(--border-strong);border-radius:var(--radius-md);
  box-shadow:var(--shadow-2);overflow:hidden auto;overscroll-behavior:contain;
}
/* display:flex schlägt die Browserregel [hidden]{display:none}. Ohne das
   steht die leere Karte offen auf der Bühne. */
.plan-karte[hidden],.plan-sitz[hidden],.plan-tipp[hidden]{display:none;}
/* Dieselbe Falle, drei weitere Male - gefunden bei der Sichtprüfung am
   31.08.2026. Die JS-Seite setzt .hidden brav, das display der Regeln unten
   hat es überstimmt: die Stundenzähler standen da, obwohl weder Office noch
   Chill Day gewählt war, die Bestätigung «Danke. Wir melden uns...» stand
   vom ersten Bild an auf der Seite, und das Formular verschwand beim
   Absenden nicht. Reine Fehlerbehebung, keine Gestaltung. */
.bon-schritt[hidden],.melden[hidden],.melden-ok[hidden]{display:none;}
.motion-on .plan-karte{animation:serviert 420ms var(--ease-serve) both;}
.plan-karte-kopf{
  display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem;
  padding:1.1rem 1.2rem .7rem;
}
.plan-karte h3{font-size:var(--text-h3);margin:0 0 .35rem;}
.plan-karte-welt{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:500;
  border-radius:var(--radius-pill);padding:.22rem .62rem;
  background:var(--surface-sand);color:var(--tfc-braun);
}
.plan-karte-welt[data-welt="kind"]{background:var(--welt-kind-hell);}
.plan-karte-welt[data-welt="du"]{background:var(--welt-du-hell);}
.plan-karte-welt[data-welt="beide"]{background:linear-gradient(100deg,var(--welt-kind-hell) 0 48%,var(--welt-du-hell) 52% 100%);}
.plan-karte-zu{
  border:0;background:transparent;color:var(--ink-muted);cursor:pointer;
  width:30px;height:30px;border-radius:var(--radius-circle);line-height:1;font-size:1.25rem;flex:0 0 auto;
}
.plan-karte-zu:hover{background:var(--surface-sand);color:var(--ink);}
.plan-karte-satz{padding:0 1.2rem;display:grid;gap:.6rem;}
.plan-karte-satz p{margin:0;font-size:var(--text-small);color:var(--ink-muted);}
.plan-karte-satz p .preis{color:var(--ink);}
.plan-karte-satz p:first-child{font-family:var(--font-display);font-size:1.12rem;color:var(--ink);line-height:1.3;}
.plan-karte-aside{
  font-style:normal!important;color:var(--accent-ink)!important;
  border-left:2px solid var(--accent);padding-left:.6rem;
}
.plan-karte-tat{padding:1.1rem 1.2rem 1.2rem;margin:0;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;}
.plan-karte-weg{
  font-size:var(--text-small);color:var(--accent-ink);text-decoration:none;
  border-bottom:1.5px solid color-mix(in srgb,var(--accent-ink) 34%,transparent);padding-bottom:2px;
}
.plan-karte-weg::after{content:" \2192";}
.plan-karte-still{
  padding:0 1.2rem 1.2rem;margin:0;font-size:var(--text-small);color:var(--ink-muted);
}
.plan-griff{display:none;}

/* ---- Der Sitzplatz: die Belohnung, nicht der Endpunkt einer Fahrt -------- */
.plan-sitz{position:absolute;inset:0;z-index:9;pointer-events:none;}
.plan-sitz-foto,.plan-sitz-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.plan-sitz-foto{opacity:0;transition:opacity 900ms var(--ease-settle);}
.plan-sitz-foto.is-an{opacity:1;}
.plan-sitz-wort{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(1.4rem,4vw,2.6rem);
  background:linear-gradient(to top,rgba(31,30,22,.9) 0%,rgba(31,30,22,.5) 52%,rgba(31,30,22,0) 100%);
  display:grid;gap:.35rem;opacity:0;transition:opacity 620ms var(--ease-settle);
}
.plan-sitz.is-da .plan-sitz-wort{opacity:1;}
.plan-sitz-satz{font-family:var(--font-display);font-size:clamp(1.15rem,2.1vw,1.7rem);color:var(--ink-inverse);margin:0;max-width:36ch;}
.plan-sitz-fein{margin:0;font-size:var(--text-small);color:var(--ink-inverse-muted);}
.plan-sitz-zurueck{
  position:absolute;left:.8rem;top:.8rem;pointer-events:auto;cursor:pointer;
  border:var(--line) solid rgba(247,241,232,.4);border-radius:var(--radius-pill);
  background:rgba(46,37,25,.6);color:var(--ink-inverse);backdrop-filter:blur(4px);
  padding:.4rem .9rem;font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;
}
.plan-sitz-zurueck:hover{background:var(--ink-inverse);color:var(--tfc-braun);}

.platz-fuss{
  width:min(100% - 2 * var(--space-4),1180px);margin:var(--space-4) auto 0;
}
.platz-fakt{
  color:var(--ink-inverse-muted);margin:0;font-size:var(--text-small);max-width:56ch;
}
.platz-fuss .wink{margin-top:.6rem;}
/* Ein leerer Zwinkerer (Feld geleert) zeigt nichts und hinterlässt keinen Abstand. */
.wink:empty{display:none;}

/* Auf dem Handy bleibt die Chipliste im Fluss (kein .is-projiziert): 17 Namen
   auf einem 326px breiten Riss wären 7px gross und damit gelogen. Angetippt
   wird direkt der Raum im Riss - die Rechtecke SIND die Trefferflächen. */
@media (max-width:767px){
  .plan-buehne{height:auto;min-height:0;aspect-ratio:1784 / 1697;}
  .plan-riss{max-width:96%;max-height:96%;}
  /* Hier ist die Liste die Bedienung, also gilt hier auch das Fingermass:
     44px hohe Trefferfläche, nicht 26. */
  .plan-chips{gap:.5rem;}
  .plan-chip{display:inline-flex;align-items:center;min-height:44px;padding:.5rem .95rem;}
  .plan-still{display:inline-flex;align-items:center;min-height:36px;}
  .plan-karte{
    position:fixed;left:0;right:auto;top:auto;bottom:0;width:100%;max-width:100%;
    max-height:82svh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    border-left:0;border-right:0;border-bottom:0;z-index:98;
    box-shadow:0 -18px 44px rgba(46,37,25,.3);
    transform:translateY(100%);transition:transform 420ms var(--ease-settle);
  }
  .plan-karte.is-auf{transform:translateY(0);}
  .plan-karte.is-zieht{transition:none;}
  .plan-griff{
    display:block;width:44px;height:4px;border-radius:2px;background:var(--border-strong);
    margin:.5rem auto .1rem;flex:0 0 auto;
  }
  .plan-karte-tat{padding-bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));}
  .plan-sitz-wort{padding-bottom:clamp(1.4rem,4vw,2.6rem);}
}

/* ==========================================================================
   3 · FÜNF SÄULEN - der Ringstreifen, erwachsenenzuerst sortiert.
   ========================================================================== */
.saeulen{background:var(--surface);padding-block:var(--space-8) var(--space-7);}
/* Solange der Grundriss (#platz) geparkt ist, folgt diese Station direkt auf
   den Hero. Die Abendbühne (.deal-hinten) ragt per negativem margin aus der
   Hülle; bisher hat #platz (z-index 2) sie überdeckt. Jetzt tut es diese
   Station, sonst läge die dunkle Bühne über «Fünf Gründe». */
/* «Fünf Gründe» ist kürzer als die Bühne, also deckt auch die nächste
   Station ab. */
.saeulen,.karte{position:relative;z-index:2;}
/* ---- 2b · EINLEITUNG: Melanies Absatz, direkt unter dem Hero -------------
   Deckt wie die folgenden Stationen die Abendbühne ab (z-index 2). Der
   Abschnitt trägt KEINEN eigenen Abstand: ist das Feld intro.text leer, ist
   das <p> display:none und vom Block bleibt nichts, auch kein Zwischenraum.
   Typografie = die Lead-Stufe der Seite (--text-lead, wie .saeulen-lead). */
.einleitung{background:var(--surface);position:relative;z-index:2;}
.einleitung-text{
  margin:0;padding-block:var(--space-7) 0;max-width:55ch;
  font-size:var(--text-lead);line-height:1.7;color:var(--ink);
}
.einleitung-text:empty{display:none;}
/* Mit Einleitung rückt «Fünf Gründe» näher: EIN Gedanke, zwei Absätze. */
.einleitung:has(.einleitung-text:not(:empty)) + .saeulen{padding-top:var(--space-6);}

.saeulen-lead{
  font-size:var(--text-lead);color:var(--ink-muted);max-width:52ch;margin-bottom:var(--space-6);
}
.saeulen-reihe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.7rem,1.6vw,1.5rem);align-items:start;}
.saeule a{
  display:grid;gap:.75rem;justify-items:start;text-decoration:none;
  padding:.4rem .2rem 1rem;border-radius:var(--radius-md);
  transition:transform var(--dur-standard) var(--ease-serve);
}
.saeule a:hover{transform:translateY(-4px);}
.saeule .reif{width:clamp(56px,5.4vw,74px);}
.saeule a:hover .reif{border-color:var(--accent-ink);color:var(--accent-ink);}
.saeule-mal{color:var(--brand-ink);}
.saeule-satz{font-size:var(--text-small);color:var(--ink-muted);line-height:1.5;}
.saeule-spiel{align-self:end;}
.saeule-spiel .reif{width:clamp(46px,4.4vw,60px);border-style:dashed;}
.saeule-spiel .saeule-satz{font-style:italic;}
@media (max-width:1079px){
  /* Kein eigener Takt mehr: .saeulen hält 144/104 wie karte, rituale,
     bestellen und finden. Die frühere Ausnahme brach die Vertikale um 72px. */
  .saeulen-reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-3);}
  .saeule-spiel{grid-column:1 / -1;align-self:auto;}
  .saeule-spiel a{grid-template-columns:auto 1fr;align-items:center;gap:.4rem 1rem;}
  .saeule-spiel .saeule-mal,.saeule-spiel .saeule-satz{grid-column:2;}
  .saeule-spiel .reif{grid-row:1 / span 2;}
}

/* ==========================================================================
   4 · DEIN PROGRAMM - die Arkade. Drei Bogennischen auf EINER Standlinie.
   Asymmetrie mit System statt Streuung: die Bögen treppen ab wie Nischen
   verschiedener Höhe in einer Wand (Keramik 100 % → Beauty 86 % → Office
   72 %), ihre Füsse stehen auf einer gemeinsamen Linie, die Texte hängen
   darunter an einer gemeinsamen Oberkante, die Wege liegen auf einer
   gemeinsamen Schlusszeile. LEUTE hat kein Bild und keinen Preis - also ist
   es die Coda: eine Zeile über die volle Breite, unter einem Strich.
   ========================================================================== */
.karte{background:var(--surface-sand);padding-block:var(--space-8) var(--space-7);}
.karte-tafel{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-5) clamp(1.1rem,2vw,2rem);
  margin-top:var(--space-5);
}
.posten{margin:0;display:flex;flex-direction:column;}
.posten h3{font-size:var(--text-h3);margin-bottom:.45rem;}
.posten p{color:var(--ink-muted);max-width:40ch;}
.posten .preis{color:var(--ink);}
.posten-fein{font-size:var(--text-small);color:var(--ink-muted);opacity:.85;}
/* die Bogenzone: volle Spaltenhöhe der grössten Nische; der eigentliche
   Bogen steht mit dem Fuss auf ihrer Unterkante - die Standlinie. */
.posten-bogen{
  width:100%;aspect-ratio:3/4;margin-bottom:1.1rem;
  border-radius:0;overflow:visible;background:transparent;border:0;
  position:relative;display:grid;align-items:end;justify-items:start;
}
.posten-bogen picture{
  width:100%;aspect-ratio:3/4;
  border-radius:var(--radius-arch);overflow:hidden;
  background:var(--surface-raised);border:var(--line) solid var(--border);
}
.posten-beauty .posten-bogen picture{width:88%;}
.posten-office .posten-bogen picture{width:78%;}
/* Stapel 5: die Hütedienst-Karte im Raster. Ab 721px ZWEI Spalten (Abbie,
   2026-10-01: zwei mal zwei statt vier nebeneinander, auch auf dem Desktop).
   Die Treppe der Bögen läuft weiter (100 / 88 / 78 / 70 %). */
.posten-huete .posten-bogen picture{width:70%;}
.posten-huete .posten-bogen img{object-position:50% 70%;}
@media (min-width:721px){.karte-tafel{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* In zwei Spalten wären die Bögen auf dem Desktop doppelt so gross wie vorher
   und das Raster doppelt so hoch: der Bogen bleibt bei höchstens 280px
   (Treppe unverändert), der Text nutzt die Spaltenbreite. */
@media (min-width:1080px){.karte-tafel .posten-bogen{max-width:280px;}}
/* Stapel 5: statt «kaufen» (Buchungs-App noch nicht live) eine ruhige Zeile. */
.abo-bald{display:inline-block;font-size:var(--text-small);color:var(--accent-ink);font-style:italic;}
.abo-bald:empty{display:none;}
.abos .knopf[hidden]{display:none;}
.posten-bogen img{width:100%;height:100%;object-fit:cover;}
.posten-weg{
  display:inline-block;margin-top:auto;padding-top:.8rem;align-self:flex-start;
  font-size:var(--text-small);color:var(--accent-ink);
  text-decoration:none;
  padding-bottom:2px;transition:border-color var(--dur-micro) linear;
  border-bottom:1.5px solid color-mix(in srgb,var(--accent-ink) 34%,transparent);
}
.posten-weg:hover{border-bottom-color:var(--accent-ink);}
/* geschütztes Leerzeichen: der Pfeil bricht nie allein auf die nächste Zeile */
.posten-weg::after{content:"\00a0\2192";}

/* die Coda: kein Bild, kein Preis - eine Zeile für alle drei Spalten */
.posten-leute{
  grid-column:1 / -1;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;
  gap:.5rem clamp(1.6rem,3vw,3rem);
  border-top:var(--line) solid var(--border-strong);padding-top:var(--space-4);
}
.posten-leute h3{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:0;}
.posten-leute p{font-size:var(--text-lead);color:var(--ink);margin:0;max-width:52ch;grid-column:2;}
.posten-leute .posten-weg{grid-column:2;margin-top:0;padding-top:.2rem;justify-self:start;}

@media (max-width:720px){
  .karte-tafel{grid-template-columns:1fr;gap:var(--space-4);}
  /* untereinander wird die Arkade zur Speisekarte: Bogen links, Text rechts,
     alle Bögen gleich gross - die Treppe ist ein Breitband-Zug. */
  .posten{display:grid;grid-template-columns:118px minmax(0,1fr);gap:.15rem 1.1rem;align-items:start;}
  .posten-bogen{grid-column:1;grid-row:1 / span 6;width:100%;aspect-ratio:3/4;margin-bottom:0;align-items:start;}
  .posten-bogen picture{width:100%!important;}
  .posten h3,.posten p,.posten .posten-weg{grid-column:2;}
  .posten-weg{margin-top:.2rem;padding-top:0;}
  .posten-leute{grid-template-columns:1fr;gap:.4rem;border-top:var(--line) solid var(--border-strong);padding-top:var(--space-4);}
  .posten-leute h3,.posten-leute p,.posten-leute .posten-weg{grid-column:1;}
}

/* ==========================================================================
   5 · DIE WOCHEN-RITUALE - zwei Ticketstationen. Die frechste Station.
   ========================================================================== */
.rituale{background:var(--surface-sage);padding-block:var(--space-8) var(--space-7);}
.rituale .bahn{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.ritual-blase{display:flex;align-items:center;gap:1rem;margin:var(--space-3) 0 var(--space-3);}
.ritual-blase .reif{width:clamp(96px,10vw,132px);}
.ritual-blase .preis{font-size:clamp(1.5rem,2.6vw,2.05rem);letter-spacing:-.01em;}
.ritual-rechnung{max-width:44ch;color:var(--ink-muted);}
.ritual-rechnung .preis{color:var(--ink);}
.ritual-satz{font-family:var(--font-display);font-size:var(--text-h3);color:var(--ink);max-width:26ch;margin-top:var(--space-3);}
.ritual-fein{font-size:var(--text-small);color:var(--ink-muted);max-width:40ch;margin-top:var(--space-3);}
/* Runde 2: «Unser Hütedienst» ist die Überschrift, die Frage steht darunter
   in der Satzschrift des Abschnitts. Zwei Feinzeilen hintereinander rücken
   zusammen. Das Buchungsfeld ist dasselbe Bauteil wie im Bestellformular. */
.ritual-frage{margin-top:var(--space-2);}
.ritual-fein + .ritual-fein{margin-top:.4rem;}
.rituale .huete-buchen{margin-top:var(--space-4);padding-top:var(--space-3);border-top:var(--line) solid var(--border);}
.huete-buchen .bon-schritt[hidden],.huete-buchen .bon-fein[hidden]{display:none;}
/* Hütedienst anfragen: erscheint erst, wenn das Formular freigeschaltet ist.
   display:inline-flex aus .knopf schlägt sonst die Browserregel [hidden]. */
.huete-anfrage-knopf{margin-top:var(--space-3);}
.huete-anfrage-knopf[hidden]{display:none;}

.poste-rahmen{
  position:relative;aspect-ratio:9/16;width:min(100%,258px);
  border-radius:22px;border:2px solid var(--ink);background:var(--surface-raised);
  padding:1.5rem 1.2rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;
  box-shadow:var(--shadow-1);transform-origin:60% 100%;
}
.poste-rahmen::before{
  content:"";position:absolute;left:1.2rem;right:1.2rem;top:1.1rem;height:3px;border-radius:2px;
  background:linear-gradient(to right,var(--accent) 0 62%,var(--border) 62% 100%);
}
/* Spec 20 §C.3: das Bild im oberen Teil des Rahmens, hinter dem Text. Der
   Rahmen bleibt, wie er ist; er schneidet das Bild nur an seinem Radius. */
.poste-rahmen{overflow:hidden;}
.poste-rahmen::before{z-index:1;}
.poste-bild{
  position:absolute;inset:0 0 auto 0;height:62%;width:100%;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
}
.poste-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;}
.poste-rahmen > p{position:relative;}
.poste-mal{color:var(--accent-ink);margin:0;}
.poste-satz{font-family:var(--font-display);font-size:clamp(1.3rem,2.1vw,1.6rem);margin:0;line-height:1.2;}
.poste-tag{margin:0;font-size:var(--text-small);color:var(--ink-muted);}
@media (max-width:900px){
  .rituale .bahn{grid-template-columns:1fr;}
  .poste-rahmen{width:min(100%,230px);}
}

/* ==========================================================================
   5b · BESTELL DEINEN NACHMITTAG - die Signatur: Bestellkarte + Kassenzettel
   ========================================================================== */
.bestellen,.anfragen{background:var(--surface);padding-block:var(--space-8) var(--space-7);position:relative;}
.bestellen::before,.anfragen::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:16px;
  background-image:repeating-linear-gradient(90deg,
    var(--surface-raised) 0 var(--flute-w),
    var(--tfc-creme-deep) var(--flute-w) calc(var(--flute-w) + var(--flute-gap)));
  border-bottom:var(--line) solid var(--border);
}
.bestellen-lead{color:var(--ink-muted);max-width:46ch;margin-bottom:var(--space-5);}
.bon-raum{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:clamp(1.6rem,3.4vw,3.4rem);align-items:start;}

.bon-form{display:grid;gap:var(--space-4);margin:0;}
.bon-feld{border:0;padding:0;margin:0;}
.bon-feld legend{
  padding:0;margin-bottom:.7rem;color:var(--brand-ink);
  font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:500;
}
.bon-fein{font-size:var(--text-small);color:var(--ink-muted);margin:.55rem 0 0;}
.bon-feld legend + .bon-fein{margin:0 0 .6rem;}
.bon-fein[hidden]{display:none;}
.bon-tat{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:.9rem 0 0;}

.kinder-liste{display:flex;flex-wrap:wrap;gap:.55rem;}
.kind-chip{
  display:flex;align-items:center;gap:.5rem;
  border:var(--line) solid var(--border-strong);border-radius:var(--radius-pill);
  background:var(--surface-raised);padding:.32rem .38rem .32rem .85rem;
}
.kind-chip.is-neu{animation:serviert 420ms var(--ease-serve) both;}
@keyframes serviert{from{opacity:0;transform:translateY(10px) scale(.9);}to{opacity:1;transform:none;}}
.kind-chip > b{font-weight:500;font-size:var(--text-small);}
.kind-alter{
  border:0;background:var(--surface-sand);border-radius:var(--radius-pill);
  padding:.3rem .7rem;font-size:.82rem;cursor:pointer;color:var(--ink);
  transition:background var(--dur-micro) linear;
}
.kind-alter:hover{background:var(--tfc-rose-mist);}
.kind-weg{
  border:0;background:transparent;color:var(--ink-muted);cursor:pointer;
  width:26px;height:26px;border-radius:var(--radius-circle);line-height:1;font-size:1.05rem;
}
.kind-weg:hover{background:var(--surface-sand);color:var(--ink);}

.wahl{display:grid;gap:.5rem;}
.wahl label{
  display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;
  border:var(--line) solid var(--border);border-radius:var(--radius-md);
  background:var(--surface-raised);padding:.72rem .9rem;
  transition:border-color var(--dur-micro) linear,background var(--dur-micro) linear;
}
.wahl label:hover{border-color:var(--border-strong);}
.wahl input{margin:.28rem 0 0;accent-color:var(--accent-ink);width:17px;height:17px;flex:0 0 auto;}
.wahl label > span{display:grid;gap:.15rem;}
.wahl em{font-style:normal;font-size:var(--text-small);color:var(--ink-muted);}
.wahl label:has(input:checked){border-color:var(--accent-ink);background:var(--tfc-rose-mist);}
.wahl-hoch label > span > .preis{color:var(--accent-ink);}

/* Der Eintritt ist fest (Kundenänderung 4): eine Zeile statt einer Wahl, im
   Kartenrahmen der .wahl-Felder, damit das Feld wie seine Nachbarn aussieht. */
.bon-eintritt{
  display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;margin:0;
  border:var(--line) solid var(--border);border-radius:var(--radius-md);
  background:var(--surface-raised);padding:.72rem .9rem;
}
.bon-eintritt .preis{color:var(--accent-ink);}
.bon-schritt{display:flex;align-items:center;gap:.5rem;margin:.8rem 0 0;font-size:var(--text-small);}
.bon-schritt > span{margin-right:.3rem;color:var(--ink-muted);}
.schritt-knopf{
  width:32px;height:32px;border-radius:var(--radius-circle);border:var(--line) solid var(--border-strong);
  background:var(--surface-raised);cursor:pointer;line-height:1;font-size:1.05rem;
  transition:transform var(--dur-micro) var(--ease-serve),background var(--dur-micro) linear;
}
.schritt-knopf:hover{background:var(--tfc-rose-mist);transform:scale(1.06);}
.bon-schritt output{min-width:2ch;text-align:center;font-variant-numeric:tabular-nums;font-weight:500;}

.schalter{display:flex;align-items:center;gap:.75rem;cursor:pointer;}
.schalter input{position:absolute;opacity:0;width:0;height:0;}
.schalter-bahn{
  width:50px;height:28px;border-radius:var(--radius-pill);background:var(--surface-sand);
  border:var(--line) solid var(--border-strong);position:relative;flex:0 0 auto;
  transition:background var(--dur-micro) linear,border-color var(--dur-micro) linear;
}
.schalter-knopf{
  position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:var(--radius-circle);
  background:var(--surface-raised);box-shadow:var(--shadow-1);
  transition:transform 260ms var(--ease-serve);
}
.schalter input:checked + .schalter-bahn{background:var(--accent-ink);border-color:var(--accent-ink);}
.schalter input:checked + .schalter-bahn .schalter-knopf{transform:translateX(22px);}
.schalter input:focus-visible + .schalter-bahn{outline:2px solid var(--focus);outline-offset:2px;}
.schalter-mal{font-size:var(--text-small);}

/* ---- der Kassenzettel ---- */
.bon{position:sticky;top:calc(var(--kopf-h) + 1rem);}
.bon-griff{display:none;}
.bon-zu,.bon-schleier{display:none;}
.bon-blatt{
  background:var(--surface-raised);border-left:var(--line) solid var(--border);
  border-right:var(--line) solid var(--border);
  padding:1.5rem clamp(1.1rem,2vw,1.8rem) 1.5rem;
  box-shadow:var(--shadow-2);
}
.bon-zacken{
  height:12px;
  background:
    radial-gradient(circle at 6px 0,transparent 0 6px,var(--surface-raised) 6px) repeat-x 0 0/12px 12px;
  filter:drop-shadow(0 -1px 0 var(--border));
}
.bon-zacken-unten{transform:scaleY(-1);}
@keyframes schleier-auf{from{opacity:0;}to{opacity:1;}}
.bon.is-chill .bon-blatt{background:var(--tfc-rose-mist);}
.bon.is-chill .bon-zacken{background:radial-gradient(circle at 6px 0,transparent 0 6px,var(--tfc-rose-mist) 6px) repeat-x 0 0/12px 12px;}
.bon-kopf{
  font-family:var(--font-display);font-size:1.3rem;text-align:center;margin:0 0 1.1rem;
  display:grid;gap:.3rem;padding-bottom:.9rem;border-bottom:1px dashed var(--border-strong);
}
.bon-kopf span{color:var(--ink-muted);font-family:var(--font-text);}
.bon-zeilen{display:grid;gap:.42rem;margin-bottom:.9rem;}
.bon-zeile{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:baseline;font-size:var(--text-small);}
.bon-zeile em{font-style:normal;color:var(--ink-muted);display:block;font-size:.82rem;}
.bon-zeile .preis{white-space:nowrap;}
.bon-zeile-frisch{animation:gedruckt 340ms var(--ease-serve) both;}
@keyframes gedruckt{from{opacity:0;transform:translateY(-7px);}to{opacity:1;transform:none;}}
.bon-summe{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:1px dashed var(--border-strong);padding-top:.8rem;margin:0 0 1rem;
  font-family:var(--font-display);font-size:1.2rem;
}
.bon-summe .preis{font-family:var(--font-text);font-size:1.55rem;color:var(--accent-ink);}
.bon-regeln{display:grid;gap:.3rem;margin-bottom:.9rem;}
.bon-regeln li{font-size:.82rem;color:var(--ink-muted);padding-left:1.1rem;position:relative;}
.bon-regeln li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:var(--radius-circle);background:var(--brand);}
.bon-fuss{font-size:.78rem;color:var(--ink-muted);text-align:center;margin:0 0 1rem;}
.bon .bon-tat{justify-content:center;margin:0;}

.bon-leiste{display:none;}
@media (max-width:820px){
  .bon-raum{grid-template-columns:1fr;}
  /* Auf dem Handy wird der Kassenzettel zum Blatt, das von unten hochkommt:
     1:1 am Finger, beim Loslassen mit der Wurfgeschwindigkeit einrastend. */
  .bon{
    /* top:auto: sonst erbt das feste Blatt das top der Desktop-Regel (sticky)
       und hängt unter der Kopfleiste, mit einer durchsichtigen Lücke über der
       Leiste (Mobil-Audit F1). z-index über Hinweis (120) und Kopfleiste (110):
       solange es offen ist, ist es ein Modal über der ganzen Seite. */
    position:fixed;left:0;top:auto;bottom:0;width:100%;z-index:131;
    max-height:84svh;overflow:hidden auto;overscroll-behavior:contain;
    transform:translateY(100%);visibility:hidden;
    transition:transform 420ms var(--ease-settle),visibility 0s linear 420ms;
    box-shadow:0 -18px 44px rgba(46,37,25,.24);
  }
  .bon.is-auf{transform:translateY(0);visibility:visible;transition:transform 420ms var(--ease-settle),visibility 0s;}
  .bon.is-zieht{transition:none;}
  .bon .bon-zacken{background:radial-gradient(circle at 6px 12px,transparent 0 6px,var(--surface-raised) 6px) repeat-x 0 0/12px 12px;filter:none;}
  .bon.is-chill .bon-zacken{background:radial-gradient(circle at 6px 12px,transparent 0 6px,var(--tfc-rose-mist) 6px) repeat-x 0 0/12px 12px;}
  .bon .bon-zacken-unten{display:none;}
  /* Mobil-Audit F1: der Griff ist 44px hoch antippbar, der Strich darin
     bleibt 4px. Schliessen geht jetzt aber auch ohne Ziehen: Knopf oben
     rechts, Antippen des Schleiers, Escape. */
  .bon-griff{
    display:block;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;
    width:120px;height:44px;margin:0;cursor:grab;touch-action:none;
  }
  .bon-griff::before{
    content:"";position:absolute;left:38px;right:38px;top:22px;height:4px;border-radius:2px;background:var(--border-strong);
  }
  .bon-zu{
    display:inline-grid;place-items:center;position:absolute;top:1.35rem;right:.9rem;z-index:3;
    width:44px;height:44px;padding:0;cursor:pointer;color:var(--ink);
    border:var(--line) solid var(--border-strong);border-radius:var(--radius-circle);
    background:var(--surface-raised);
  }
  .bon-zu:hover{background:var(--tfc-rose-mist);}
  .bon-zu:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
  .bon-zu svg{width:18px;height:18px;}
  .bon-zu path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
  .bon-schleier:not([hidden]){
    display:block;position:fixed;inset:0;z-index:130;cursor:pointer;
    background:rgba(46,37,25,.38);
  }
  @media (prefers-reduced-motion:no-preference){
    .bon-schleier:not([hidden]){animation:schleier-auf 240ms linear both;}
  }
  .bon-blatt{border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));}
  .bon-leiste:not([hidden]){
    display:flex;position:fixed;left:0;bottom:0;width:100%;z-index:96;
    align-items:center;justify-content:space-between;gap:1rem;margin:0;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));
    background:var(--surface-raised);border-top:var(--line) solid var(--border-strong);
    box-shadow:0 -8px 24px rgba(46,37,25,.10);
  }
  .bon-leiste .preis{font-size:1.15rem;color:var(--accent-ink);}
  .guck:not([hidden]){bottom:8.6rem;}
}

/* ==========================================================================
   6 · UND DIE KINDER? - «Wer kommt mit in den Sand?» (Spec 13, Rev. 2026-09-23)
   Die Wand ist Bild B, ganz. Die gezählten Kinder sind in Farbe, die anderen
   warten als Bleistiftgeister unter einem Schleier in ihrer eigenen Form.
   Nichts pinnt, nichts scrubbt, nichts verschiebt sich: animiert wird allein
   die Deckkraft der Schleier.
   ========================================================================== */
.kinder{background:var(--surface-raised);position:relative;padding-top:var(--space-7);}
.kinder-kopf .kopf{max-width:24ch;}
.kinder-fakten{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;align-items:baseline;margin:0 0 var(--space-5);}
.kinder-gross{font-family:var(--font-display);font-size:var(--text-h3);color:var(--ink);}
.kinder-fakt{color:var(--ink-muted);}

/* ---- die Bühne: Zeile 1 die Karte, Zeile 2 die Wand ---------------------- */
/* Art-Direction 2026-09-29 (Runde A1): Zeile 1 ist ZWEISPALTIG. Links der
   Kopf der Station (Titel, Fakten, «Spielen ist Lernen»), rechts die Abo-Karte,
   beide oben bündig; die Wand darunter über die volle Breite. Die Karte steht
   weiter bei 40 vw bis 84 vw (Spec 13 §4: Eintauchen 22 % über dem Kopf des
   Jungen, Turm und Burg bleiben frei), aber die 40 vw links davon sind jetzt
   der Text und nicht mehr eine leere Cremefläche von Kartenhöhe. Die Spalten:
   Bahnrand · Text · Karte · 16 vw. */
.mitkommen{
  --platte-h:calc(100vw * 1723 / 9449);
  --bahn-rand:max(var(--space-4),calc((100% - 1180px) / 2));
  display:grid;position:relative;
  grid-template-columns:var(--bahn-rand) minmax(0,1fr) clamp(520px,44vw,660px) 16vw;
}
.mitkommen > .kinder-kopf{grid-row:1;grid-column:2;width:auto;margin:0;padding-right:clamp(1.5rem,3vw,3rem);}
/* Runde A2: in der schmalen Spalte brach der Titel bei 1440 auf vier Zeilen
   mit «bist.» allein in der letzten. Ausgeglichene Zeilen, kein Witwenwort.
   Nur in der Zweispalten-Fassung: darunter bleibt der Umbruch wie bisher. */
@media (min-width:1130px){.mitkommen > .kinder-kopf .kopf,.mitkommen > .kinder-kopf .kinder-gross{text-wrap:balance;}}
.mitkommen-karte{
  position:relative;z-index:2;grid-row:1;grid-column:3;
  margin-bottom:calc(-1 * var(--platte-h) * .22);
  background:var(--surface);border:var(--line) solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);padding:clamp(1.3rem,2.2vw,1.9rem) clamp(1.3rem,2.4vw,2.1rem);
}
/* 900-1129: zu schmal für zwei Spalten. Kopf über die Bahn, Karte MITTIG
   darunter (nicht mehr bei 40 vw mit Loch links), Eintauchen 10 % (Turm). */
@media (max-width:1129px){
  .mitkommen{grid-template-columns:minmax(0,1fr);}
  .mitkommen > .kinder-kopf{grid-column:1;width:min(100% - 2 * var(--space-4),1180px);margin-inline:auto;padding-right:0;}
  .mitkommen-karte{grid-row:2;grid-column:1;width:clamp(520px,44vw,660px);margin-inline:auto;margin-bottom:calc(-1 * var(--platte-h) * .10);}
}
/* Mobil-Audit F5: solange das Wandbild lazy laedt, war die Flaeche ein
   weisses Loch mit einer schwebenden Unterschrift. Ein Sandton als Platzhalter
   haelt die Station ruhig, bis das Bild ankommt. */
.mitkommen-band{grid-row:2;grid-column:1 / -1;position:relative;z-index:1;background:var(--surface-sand);}
@media (max-width:1129px){.mitkommen-band{grid-row:3;}}
.mitkommen-platte{position:relative;width:100vw;aspect-ratio:9449 / 1723;}
.mitkommen-platte picture,.mitkommen-bild{display:block;width:100%;height:100%;}

.mitkommen-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.2rem;}
.mitkommen-frage{
  margin:0;font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:500;color:var(--brand-ink);
}
.mitkommen-stepper{display:flex;align-items:center;gap:.7rem;margin:0;}
.mitkommen-stepper[hidden]{display:none;}
.mitkommen-knopf{
  min-width:44px;min-height:44px;padding:0 .9rem;border-radius:var(--radius-pill);
  background:var(--surface-raised);border:var(--line) solid var(--border-strong);color:var(--ink);
  font-size:1.25rem;line-height:1;cursor:pointer;
  transition:transform 100ms var(--ease-serve),opacity var(--dur-micro) linear,background var(--dur-micro) linear;
}
.mitkommen-knopf:hover{background:var(--tfc-rose-mist);}
.mitkommen-knopf:active{transform:scale(.97);}
.mitkommen-knopf[aria-disabled="true"]{opacity:.45;cursor:default;}
.mitkommen-knopf[aria-disabled="true"]:hover{background:var(--surface-raised);}
.mitkommen-zahl{
  font-family:var(--font-display);font-size:var(--text-h3);min-width:5.4ch;text-align:center;
  font-variant-numeric:tabular-nums lining-nums;
}
.mitkommen-eintritt{font-size:var(--text-small);color:var(--ink-muted);margin:.7rem 0 1rem;max-width:52ch;}

/* ---- die Tabelle ------------------------------------------------------- */
.abos{width:100%;border-collapse:collapse;font-size:var(--text-small);}
.abos thead th{
  text-align:left;font-weight:500;font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--ink-muted);padding:0 .6rem .45rem 0;border-bottom:var(--line) solid var(--border-strong);
}
.abos tbody th,.abos td{padding:.7rem .6rem .7rem 0;vertical-align:top;border-bottom:var(--line) solid var(--border);text-align:left;}
.abos tbody th{font-weight:500;color:var(--ink);white-space:nowrap;}
.abos tbody tr:last-child > *{border-bottom:0;}
.abo-preis{white-space:nowrap;}
.abo-preis > .preis{display:block;font-size:var(--text-body);color:var(--ink);transition:opacity 180ms linear;}
.abo-preis > .preis.is-wechsel{opacity:0;}
.abo-pro{display:block;font-size:.8rem;color:var(--ink-muted);}
.abo-pro[hidden],.abo-preis > .preis[hidden]{display:none;}
.abo-vorteil{color:var(--ink-muted);}
.abo-stufen{display:grid;margin-top:.15rem;}
.abo-stufe{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur-standard) var(--ease-settle);}
.abo-stufe > span{overflow:hidden;min-height:0;}
.abo-stufe-innen{display:block;font-size:.8rem;color:var(--ink-muted);white-space:normal;line-height:1.5;padding-top:.1rem;}
.abo-stufe-innen .preis{color:var(--ink);}
.abo-stufe.is-zu{grid-template-rows:0fr;}
.mitkommen-fuss{font-size:.8rem;color:var(--ink-muted);margin:.9rem 0 0;}
/* Partner-Kitas (2026-10-09): ruhiger Streifen unter dem Kita-Preis, in der
   Preiskarte. Kacheln wie die übrigen Karten (surface-raised, border, radius-md).
   Die Logos stehen auf Weiss; multiply legt sie randlos auf die Kachelfarbe.
   Kein eigenes Motion: der Streifen erscheint mit der Karte (data-nah). */
.kitas{margin:1.15rem 0 0;padding-top:1.05rem;border-top:var(--line) solid var(--border);}
.kitas:has(.kitas-zeile:empty){display:none;}
.kitas-titel{margin:0 0 .7rem;font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:500;color:var(--brand-ink);}
.kitas-titel:empty{display:none;}
.kitas-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;max-width:21rem;}
.kitas-logos:not(:has(li)){display:none;}
@media (min-width:600px){.kitas-logos{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;}}
.kitas-kachel{margin:0;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
  background:var(--surface-raised);border:var(--line) solid var(--border);border-radius:var(--radius-md);}
.kitas-kachel picture{display:block;width:100%;height:100%;}
.kitas-kachel img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}
.kitas-zeile{font-size:var(--text-small);color:var(--ink);margin:.8rem 0 0;max-width:52ch;}
/* Flyer zum Herunterladen (2026-10-10): eigener Block unter dem Partner-Kitas-
   Streifen, gleiche Kachel-Sprache. Titel oder Liste leer = Block weg. */
.flyer-block{margin:1.15rem 0 0;padding-top:1.05rem;border-top:var(--line) solid var(--border);}
.flyer-block:has(.flyer-titel:empty),.flyer-block:not(:has(.flyer-eintrag)){display:none;}
.flyer-titel{margin:0;font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:500;color:var(--brand-ink);}
.flyer-zeile{font-size:var(--text-small);color:var(--ink);margin:.45rem 0 .8rem;max-width:52ch;}
.flyer-zeile:empty{display:none;}
.flyer-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem .6rem;max-width:21rem;}
@media (min-width:600px){.flyer-liste{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;}}
.flyer-eintrag{margin:0;min-width:0;}
.flyer-link{display:block;color:var(--ink);text-decoration:none;border-radius:var(--radius-md);}
.flyer-link:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}
.flyer-bild{display:grid;place-items:center;aspect-ratio:3 / 4;padding:.45rem;overflow:hidden;
  background:var(--surface-raised);border:var(--line) solid var(--border);border-radius:var(--radius-md);
  transition:border-color var(--dur-micro) linear;}
.flyer-link:hover .flyer-bild{border-color:var(--border-strong);}
.flyer-bild picture{display:block;width:100%;height:100%;}
.flyer-bild img{display:block;width:100%;height:100%;object-fit:contain;border-radius:4px;}
.flyer-name{display:block;margin-top:.45rem;font-size:.8rem;line-height:1.35;color:var(--ink);}
.flyer-hinweis{display:block;font-size:.75rem;color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;}
@media (prefers-reduced-motion:reduce){.flyer-bild{transition:none;}}
/* Runde 2: der Kauf-Knopf je Abo (führt in die Buchungs-App). Eine Zeile. */
.abos .knopf{white-space:nowrap;}
.abos .bon-tat{margin-top:.6rem;}
@media (max-width:899px){.abos .knopf-klein{padding:.5rem .85rem;font-size:.82rem;}}

/* ---- die Schleier (Spec 13 §4.3) --------------------------------------- */
.kind-schleier{
  position:absolute;pointer-events:none;
  -webkit-mask-mode:alpha;mask-mode:alpha;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:rgba(252,249,244,.66);
  -webkit-backdrop-filter:saturate(.12) brightness(1.06);backdrop-filter:saturate(.12) brightness(1.06);
  opacity:1;transition:opacity 300ms linear;
}
.kind-schleier[data-da="1"]{opacity:0;transition:opacity 420ms var(--ease-settle);}
@supports not ((backdrop-filter:saturate(1)) or (-webkit-backdrop-filter:saturate(1))){
  .kind-schleier{background:rgba(252,249,244,.82);}
}
@media (prefers-reduced-transparency:reduce){
  .kind-schleier{background:rgba(252,249,244,.82);-webkit-backdrop-filter:none;backdrop-filter:none;}
}

/* ---- Bildzeile und der Rest der Station ------------------------------- */
.mitkommen-wand{
  justify-self:end;margin:.7rem clamp(1rem,3vw,2.2rem) 0 0;
  font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:500;color:var(--ink-muted);
}
.mitkommen-credit:empty{display:none;}
.mitkommen-credit::before{content:" \00b7  ";}
.kinder-fuss{padding-block:var(--space-5) var(--space-7);}
.kinder-weiter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem clamp(1.6rem,3.4vw,3.4rem);}
.kinder-weiter p{color:var(--ink-muted);max-width:48ch;margin-bottom:var(--space-2);}
.kinder-fein{font-size:var(--text-small);}
.kinder-rippe{
  height:16px;
  background-image:repeating-linear-gradient(90deg,
    var(--surface-raised) 0 var(--flute-w),
    var(--tfc-creme-deep) var(--flute-w) calc(var(--flute-w) + var(--flute-gap)));
  border-top:var(--line) solid var(--border);
}
.kinder-drei{
  font-family:var(--font-script);font-weight:600;font-size:var(--text-script);
  color:var(--brand-ink);margin-top:var(--space-5);margin-bottom:0;
}
.lernen{
  margin-top:var(--space-5);border-top:var(--line) solid var(--border-strong);
  border-bottom:var(--line) solid var(--border-strong);padding-block:.2rem;
}
.lernen summary{
  cursor:pointer;list-style:none;padding:.95rem 0;display:flex;align-items:center;gap:.7rem;
  color:var(--accent-ink);font-size:var(--text-small);
}
.lernen summary::-webkit-details-marker{display:none;}
.lernen summary::after{content:"\2192";transition:transform var(--dur-standard) var(--ease-serve);}
.lernen[open] summary::after{transform:rotate(90deg);}
.lernen-innen{padding-bottom:1.4rem;}
.lernen-innen p{color:var(--ink-muted);max-width:60ch;}
.lernen-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.35rem .9rem;margin-bottom:var(--space-3);}
.lernen-liste li{position:relative;padding-left:1.5rem;font-size:var(--text-small);}
.lernen-liste li::before{
  content:"";position:absolute;left:0;top:.35em;width:12px;height:11px;
  background:var(--brand);
  clip-path:polygon(0 100%,0 45%,50% 0,100% 45%,100% 100%);
}
.lernen-weg a{color:var(--accent-ink);}
/* ---- Handy (< 900px): Streifen, dann Stepper, dann Tabelle (Spec 13 §4.5) */
@media (max-width:899px){
  .kinder-weiter{grid-template-columns:1fr;}
  .mitkommen{display:flex;flex-direction:column;}
  .mitkommen-band{
    order:1;height:210px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .mitkommen-band::-webkit-scrollbar{display:none;}
  .mitkommen-platte{width:1152px;height:210px;}
  .mitkommen-wand{order:2;align-self:stretch;text-align:right;margin:.7rem var(--space-4) 0;}
  .mitkommen > .kinder-kopf{order:0;width:min(100% - 2 * var(--space-4),1180px);margin:0 auto;padding-right:0;}
  .mitkommen-karte{order:3;width:auto;margin:var(--space-3) var(--space-4) 0;padding:1.2rem 1.1rem;}
  .mitkommen-knopf{min-width:48px;min-height:48px;}
  .abos thead{display:none;}
  .abos tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem 1rem;padding:.7rem 0;border-bottom:var(--line) solid var(--border);}
  .abos tbody tr:last-child{border-bottom:0;}
  .abos tbody th,.abos td{padding:0;border:0;}
  .abos tbody th{grid-column:1;grid-row:1;}
  .abo-vorteil{grid-column:1;grid-row:2;}
  .abo-preis{grid-column:2;grid-row:1 / span 3;text-align:right;white-space:normal;max-width:48vw;}
  .abo-preis > .preis{white-space:nowrap;}
  .abo-stufe-innen{white-space:normal;}
}

/* ==========================================================================
   7 · GEBURTSTAGE & BABYRAUM - die kleinste Station der Seite.
   ========================================================================== */
.raeume{background:var(--surface);padding-block:var(--space-7) var(--space-6);}
.raum-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-3);}
.raum{
  display:grid;gap:.4rem;text-decoration:none;
  border:var(--line) solid var(--border);border-radius:var(--radius-md);
  background:var(--surface-raised);padding:1.15rem 1.3rem;
  transition:border-color var(--dur-micro) linear,transform var(--dur-standard) var(--ease-serve);
}
.raum:hover{border-color:var(--border-strong);transform:translateY(-3px);}
.raum-mal{color:var(--brand-ink);}
.raum-satz{font-size:var(--text-small);color:var(--ink-muted);}
.raum-plan{
  margin-top:var(--space-4);font-size:.82rem;color:var(--ink-muted);line-height:1.7;max-width:82ch;
}
.raum-plan span{color:var(--brand-ink);letter-spacing:var(--ls-caps);text-transform:uppercase;font-size:var(--text-label);font-weight:500;}
@media (max-width:640px){.raum-paar{grid-template-columns:1fr;}}
/* Runde 2: die zwei Geburtstagspakete. Dieselbe Karte (.raum), keine Links
   mehr, also kein Anheben beim Überfahren. Die Aufzählung trägt dieselben
   Punkte wie die Regeln auf dem Kassenzettel (.bon-regeln). */
.raum-kopf{margin-top:var(--space-3);}
.raum-kopf + .raum-paar{margin-top:.8rem;}
.raum-paket{align-content:start;}
.raum-paket:hover{transform:none;border-color:var(--border);}
.raum-liste ul{display:grid;gap:.3rem;margin-top:.35rem;}
.raum-liste li{font-size:var(--text-small);color:var(--ink-muted);padding-left:1.1rem;position:relative;}
.raum-liste li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:var(--radius-circle);background:var(--brand);}
.raeume .raum-plan{margin-top:var(--space-3);}
.raeume .raum-plan + .raum-plan{margin-top:.4rem;}
.raeume .bon-tat .knopf[hidden],.raeume [data-anfrage-ersatz][hidden]{display:none;}
.raeume a[href^="tel:"]{white-space:nowrap;}

/* ==========================================================================
   8 · BALD SIND WIR FÜR EUCH DA
   ========================================================================== */
.finden{background:var(--surface-raised);padding-block:var(--space-8) var(--space-7);position:relative;overflow:hidden;text-align:center;}
.finden .bahn{position:relative;}
.finden .kopf{max-width:none;margin-inline:auto;}
.finden .kopf-strich{margin-inline:auto;}
.netz{
  position:absolute;left:50%;top:-14%;width:min(560px,92vw);height:auto;
  transform:translateX(-50%);color:var(--ink);opacity:.05;pointer-events:none;z-index:0;
}
/* Der Wink unter dem Datum: .wink ist ein 42ch-Block und haenge sonst am
   linken Rand einer zentrierten Station. Nur die Mitte, nichts sonst. */
.finden .wink{margin:0 auto var(--space-3);}
.finden-ort{color:var(--ink-muted);margin-bottom:var(--space-4);}
.finden-ort span{opacity:.5;margin:0 .2em;}
.melden{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:.7rem;}
.melden input{
  border:var(--line) solid var(--border-strong);border-radius:var(--radius-pill);
  background:var(--surface);padding:.9rem 1.3rem;min-width:min(300px,72vw);
}
.melden input::placeholder{color:var(--ink-muted);opacity:.8;}
.melden-ok{color:var(--brand-ink);margin-bottom:.4rem;}
.melden-fein{font-size:.78rem;color:var(--ink-muted);opacity:.8;margin-bottom:var(--space-4);}
.finden-wege{font-size:var(--text-small);margin-bottom:var(--space-3);}
.finden-wege a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent-ink) 30%,transparent);}
.finden-wege span{opacity:.45;margin:0 .3em;}
.finden-gruss{
  font-family:var(--font-script);font-weight:600;font-size:var(--text-script);
  color:var(--brand-ink);margin:0;
}

/* =========================================================== CHROME: Fuss */
.fuss{background:var(--surface-sand);padding-bottom:var(--space-4);position:relative;}
.fuss-rippe{
  height:16px;
  background-image:repeating-linear-gradient(90deg,
    var(--surface-raised) 0 var(--flute-w),
    var(--tfc-creme-deep) var(--flute-w) calc(var(--flute-w) + var(--flute-gap)));
  border-bottom:var(--line) solid var(--border);
}
.fuss-innen{display:flex;gap:clamp(1.4rem,3vw,3rem);align-items:center;flex-wrap:wrap;padding-block:var(--space-5) var(--space-4);}
.fuss-mal{flex:0 0 auto;}
.fuss-mal img{width:clamp(150px,17vw,220px);height:auto;mix-blend-mode:darken;}
.fuss-wort p{margin:0 0 .3rem;font-size:var(--text-small);color:var(--ink-muted);}
.fuss-satz{font-family:var(--font-display);font-size:var(--text-h3);color:var(--ink)!important;margin-bottom:.6rem!important;}
.fuss-wort a{color:var(--ink-muted);}
.fuss-wort span{opacity:.45;margin:0 .25em;}
/* Mobil-Audit F8: der lange UID-Code darf innerhalb der Rechtszeile nicht
   mitten im Token brechen ("UID CHE-/210.650.353"). Nur dieser eine Abschnitt
   ist starr, die ganze Zeile bleibt normal umbrechbar. */
.fuss-uid{white-space:nowrap;}

/* Mobil-Audit F6+F7: das Signet auf Handy und Tablet. Client-Vorgabe: viel
   groesser, LINKS bleiben, nie zentrieren. Bis 819px steht der Fuss
   gestapelt, das Bild optisch buendig zur Textkante (sein Motiv beginnt
   selbst schon ~10.7% vom eigenen Rand entfernt). 820-1079 darf die
   Desktop-Nebeneinander-Anordnung behalten, damit dort kein Loch entsteht. */
@media (max-width:1079px){
  .fuss-mal img{width:min(100%,280px);}
}
@media (min-width:820px) and (max-width:1079px){
  .fuss-wort{flex:1 1 360px;}
}
@media (max-width:819px){
  .fuss-innen{flex-direction:column;align-items:flex-start;gap:var(--space-3);}
  .fuss-mal img{width:min(100%,320px);margin-left:-10.7%;margin-bottom:-8%;}
}
/* Mobil-Audit F8: die zwei Kontaktzeilen (Adresse/Zeiten/Telefon und
   Website/Instagram/E-Mail) stapeln sich unter 640px, statt Trennpunkte am
   Zeilenende hängen zu lassen. Die Kita-Zeile und die anderen Absätze bleiben
   unberührt Fliesstext. */
@media (max-width:640px){
  .fuss-kontakt span{display:none;}
  .fuss-kontakt data,.fuss-kontakt a{display:block;}
}
.fuss-recht{
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;
  width:min(100% - 2 * var(--space-4),1180px);margin-inline:auto;margin-bottom:0;
  border-top:var(--line) solid var(--border-strong);padding-top:1rem;
  font-size:.76rem;color:var(--ink-muted);
}

/* ========================================================== CHROME: Plausch */
.plausch-knopf{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:100;
  width:54px;height:54px;border-radius:var(--radius-circle);
  background:var(--surface-raised);border:var(--line) solid var(--border-strong);
  box-shadow:var(--shadow-2);cursor:pointer;display:grid;place-items:center;
  transition:transform var(--dur-standard) var(--ease-serve);
}
.plausch-knopf:hover{transform:translateY(-3px) scale(1.04);}
.plausch-knopf[hidden],.plausch[hidden]{display:none!important;}
.plausch-knopf svg{width:26px;height:26px;fill:none;stroke:var(--brand-ink);stroke-width:1.1;stroke-linecap:round;}
.plausch{
  position:fixed;right:1.1rem;bottom:4.9rem;z-index:101;width:min(330px,calc(100vw - 2.2rem));
  background:var(--surface-raised);border:var(--line) solid var(--border-strong);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);overflow:hidden;
}
.plausch-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;padding:.85rem 1rem;border-bottom:var(--line) solid var(--border);}
.plausch-kopf b{display:block;font-weight:500;}
.plausch-kopf small{display:block;font-size:.74rem;color:var(--ink-muted);}
.plausch-zu{border:0;background:transparent;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--ink-muted);}
.plausch-log{max-height:min(38vh,280px);overflow:auto;padding:.85rem 1rem;display:grid;gap:.55rem;}
.plausch-log p{margin:0;padding:.55rem .75rem;border-radius:var(--radius-md);font-size:var(--text-small);max-width:92%;}
.plausch-log .von-uns{background:var(--surface-sage);}
.plausch-log .von-gast{background:var(--tfc-rose-mist);justify-self:end;}
.plausch-fragen{display:flex;flex-wrap:wrap;gap:.4rem;padding:.7rem 1rem 1rem;border-top:var(--line) solid var(--border);}
.plausch-fragen button{
  border:var(--line) solid var(--border-strong);background:var(--surface);border-radius:var(--radius-pill);
  padding:.35rem .8rem;font-size:.8rem;cursor:pointer;
}
.plausch-fragen button:hover{background:var(--tfc-rose-mist);}
@media (max-width:820px){
  .plausch-knopf{bottom:4.6rem;}
  .plausch{bottom:8.4rem;}
}

/* ==========================================================================
   DAS SPIELERISCHE - «Das Kind spielt am Rand deiner Seite mit»

   Ein Gesetz, drei Kanäle:
   1 MATERIE  Kindsachen bewegen sich wie Spielzeug (ein Kippen, ein Schaukeln,
              einmal und nie im Kreis). Erwachsenensachen werden abgestellt und
              stehen sofort still. Dosis: EIN Spielzug pro Bildschirm.
   2 SPRACHE  Ein Augenzwinkern in der Erwachsenenstimme, max. eines pro Beat.
   3 LICHT    Die zwei Welten als Auszeichnung: Sand fürs Kind, Salbei für dich.
              Am schönsten auf dem Kassenzettel - der Deal, in seinen Farben.
   Kein Maskottchen, kein Konfetti, keine Ballontypo. Der Test bleibt:
   charmant für ein Luzerner Elternteil, nie kindisch.
   ========================================================================== */

/* ---- Kanal 3: die Weltkante. Eine Auszeichnung, überall dieselbe --------- */
.bon-zeile{border-left:3px solid transparent;padding-left:.6rem;}
.bon-zeile[data-welt="kind"]{border-left-color:var(--welt-kind);}
.bon-zeile[data-welt="du"]{border-left-color:var(--welt-du);}
.raum[data-welt="kind"]{border-left:3px solid var(--welt-kind);}
.raum[data-welt="du"]{border-left:3px solid var(--welt-du);}
.saeule[data-welt="kind"] .saeule-mal{color:var(--tfc-holz-deep);}

/* ---- Kanal 1: die zwei Gangarten ---------------------------------------- */
/* Kindzeile: das Kind hat den Stift geschnappt. Sie druckt schief und richtet
   sich beim Absetzen gerade. Einmal, pro Zeile, nie im Kreis. */
.motion-on .bon-zeile-frisch[data-welt="kind"]{animation:gedruckt-krumm 520ms var(--ease-serve) both;}
@keyframes gedruckt-krumm{
  0%  {opacity:0;transform:translateY(-7px) rotate(-1.6deg);}
  55% {opacity:1;transform:translateY(1px) rotate(.7deg);}
  100%{opacity:1;transform:none;}
}
/* Die Säule SPIELEN ist die einzige, die sich danebenbenimmt. */
@keyframes schaukel{
  0%{transform:rotate(0);}22%{transform:rotate(-7deg);}
  48%{transform:rotate(5deg);}72%{transform:rotate(-2.5deg);}100%{transform:rotate(0);}
}
.motion-on .saeule-spiel a:hover .reif{animation:schaukel 760ms var(--ease-serve);transform-origin:50% 82%;}
/* Erwachsen: der Teller wird beim Servieren um ein halbes Grad angesetzt. */
.posten-bogen picture{transition:transform var(--dur-standard) var(--ease-serve);transform-origin:50% 100%;}
.posten:hover .posten-bogen picture{transform:rotate(.5deg) translateY(-3px);}
/* Der Punkt hinter «Du bekommst den Rest.» - eine abgestellte Tasse. */
.deal-punkt{display:inline-block;transition:color 260ms linear,transform 320ms var(--ease-serve);}
.deal-du:hover .deal-punkt{color:var(--accent-ink);transform:translateY(-2px) scale(1.18);}
/* Die 43.- Münze: das Vergnügen der Erwachsenen, das sich einmal wie Spielzeug
   benimmt. Der Deal, für einen Moment umgedreht. */
button.reif-preis{
  border:var(--line) solid var(--accent-ink);cursor:pointer;padding:0;
  transform-style:preserve-3d;font:inherit;
}
button.reif-preis:hover{background:var(--tfc-rose-mist);}

/* ---- Kanal 2: die Zwischenrufe, in Erwachsenenstimme -------------------- */
.wink{
  display:block;font-size:var(--text-small);color:var(--accent-ink);
  margin:.3rem 0 0;max-width:42ch;
}
.wink-hell{color:var(--welt-kind);}
.kinder-spur{
  font-size:var(--text-small);color:var(--ink-muted);margin-top:var(--space-3);
  border-left:3px solid var(--welt-du);padding-left:.7rem;max-width:40ch;
}

/* ==========================================================================
   7b · ANFRAGEN - drei Anfrage-Formulare. KEIN neues Bauteil: Hintergrund und
   Riffelkante der Bestellkarte (oben mit .bestellen gruppiert), die
   Beschriftung von .bon-feld legend, die .wahl-Karten für Auswahl und Häkchen,
   das Pillenfeld von .melden, .knopf und die Kassenzettelzeile .melden-ok.
   Hier stehen nur Anordnung und die Übernahme dieser Werte auf Textfelder.
   ========================================================================== */
.anfragen[hidden],.anfrage-form[hidden],.anfragen [data-anfrage-reiter][hidden],
.anfrage-fehler[hidden],.anfrage-ok[hidden]{display:none;}
.anfrage-wahl{margin-bottom:var(--space-4);}
.anfrage-wahl .wahl{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));}
/* Hütedienst: Ja/Nein nebeneinander, auch auf dem Handy (zwei kurze Wörter). */
.wahl-janein{grid-template-columns:repeat(2,minmax(0,1fr));max-width:32rem;}
.wahl-janein + .anfrage-fehler{display:block;margin-top:.4rem;}
.wahl-janein + .anfrage-fehler[hidden]{display:none;}
.anfrage-wahl .wahl input{margin-top:.2rem;}
.anfrage-intro{margin:0;}
/* In .wahl ist der Text ein Grid (Preis unter Titel). Hier ist es ein Satz mit
   Link darin, also fliesst er als Zeile. */
.anfrage-form .wahl label > span{display:block;}
.anfrage-paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--space-3) var(--space-4);}
.anfrage-feld{display:grid;gap:.4rem;align-content:start;}
.anfrage-feld > label{
  color:var(--brand-ink);
  font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:500;
}
.anfrage-feld input,.anfrage-feld textarea{
  font:inherit;color:inherit;width:100%;
  border:var(--line) solid var(--border-strong);border-radius:var(--radius-pill);
  background:var(--surface-raised);padding:.8rem 1.2rem;
}
.anfrage-feld textarea{border-radius:var(--radius-md);resize:vertical;min-height:7.5rem;line-height:var(--lh-body);}
.anfrage-feld input::placeholder,.anfrage-feld textarea::placeholder{color:var(--ink-muted);opacity:.8;}
.anfrage-feld input[aria-invalid="true"],.anfrage-feld textarea[aria-invalid="true"],
.wahl label:has(input[aria-invalid="true"]){border-color:var(--accent-ink);}
.anfrage-feld .bon-fein{margin:0;}
.anfrage-fehler{color:var(--accent-ink);font-size:var(--text-small);margin:0;}
.anfrage-form .wahl a,.anfrage-fehler a{color:var(--accent-ink);}
.anfrage-form .melden-ok{grid-template-columns:1fr;margin-inline:0;width:100%;}
.anfrage-form .melden-ok:focus{outline:none;}
.anfrage-form .knopf[aria-busy="true"]{opacity:.7;cursor:progress;}
/* Der Honigtopf: für Menschen unsichtbar und unerreichbar (tabindex -1,
   aria-hidden). Ein Bot, der ihn füllt, bekommt ehrlich «nicht gesendet». */
.anfrage-topf{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}

/* ---- B8: die einzige Umwandlung der Seite druckt als Kassenzettelzeile --- */
.melden-ok{
  display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:baseline;
  text-align:left;width:min(100%,420px);margin-inline:auto;
  background:var(--surface-raised);border:var(--line) dashed var(--border-strong);
  border-left:3px solid var(--welt-kind);border-right:3px solid var(--welt-du);
  padding:.7rem .9rem;font-size:var(--text-small);color:var(--ink);
}
.melden-ok b{font-family:var(--font-text);font-weight:500;color:var(--accent-ink);white-space:nowrap;}
.motion-on .melden-ok:not([hidden]){animation:gedruckt 420ms var(--ease-serve) both;}

/* ==========================================================================
   ÜBER UNS (/ueber-uns/) - Spec 20 §A.5
   Die Gründerin mit ihrem echten Foto im Bogen (hero-split: Foto ≈ 40 %,
   Text ≈ 60 %), darunter «Unser Team» als Karte aus Abschnitt 4 (.posten):
   zwei Spalten, die zweite um --space-5 versetzt, nie ein Kachelraster.
   Alle sieben Bögen haben dieselbe Sandfläche und dieselbe Grösse; die
   Rangfolge ist die Reihenfolge der Kundin, nie die Bildgrösse.
   ========================================================================== */
.seite-ueber main{background:var(--surface);}
/* Go-Live Schritt 7: die Seite /impressum/. Ruhig, eine Spalte, Texte aus
   dem CMS (impressum.titel, impressum.text). */
.seite-impressum main{background:var(--surface);}
.impressum{padding-block:var(--space-7) var(--space-8);}
.impressum .kopf-strich{margin-bottom:var(--space-4);}
.impressum-text p{color:var(--ink-muted);margin:0 0 var(--space-3);line-height:1.65;}
.impressum-text strong{color:var(--ink);font-weight:500;}
.impressum-text a{color:var(--accent-ink);}
@media (max-width:819px){.impressum{padding-block:4.5rem 3.5rem;}}
.fuss-recht a{color:inherit;}
/* /datenschutz/ (2026-10-03): dieselbe ruhige Spalte wie /impressum/, plus
   Abschnittstitel, Listen und Tabellenzeilen. Rich-Text kennt keine <h3> und
   keine <table>: Unterabschnitte stehen als <strong class="ds-unter">,
   Tabellenzeilen als <li> mit <strong class="ds-feld"> (Kopfspalte). */
.ds-stand{color:var(--ink);font-weight:500;margin:0 0 var(--space-3);}
.ds-abschnitte{margin-top:var(--space-4);}
.ds-abschnitt{border-top:var(--line) solid var(--border);padding-top:var(--space-3);margin-top:var(--space-4);}
.ds-titel{font-size:var(--text-h3);color:var(--ink);margin:0 0 var(--space-2);}
.ds-text:empty{display:none;}
.ds-text p:has(> .ds-unter){margin-top:var(--space-4);}
.ds-text p:first-child:has(> .ds-unter){margin-top:0;}
.ds-text .ds-unter{display:block;font-family:var(--font-display);font-weight:400;font-size:1.2rem;line-height:1.3;color:var(--ink);}
.ds-text ul{margin:0 0 var(--space-3);padding-left:1.15rem;list-style:disc;color:var(--ink-muted);line-height:1.65;}
.ds-text li::marker{color:var(--accent-ink);}
.ds-text li{margin:0 0 .5rem;}
.ds-text li ul{margin:.6rem 0 .2rem;}
.ds-text li:has(> .ds-feld:first-child){
  list-style:none;margin:0;padding:.75rem 0 .75rem 13rem;display:flow-root;
  border-top:var(--line) solid var(--border);
}
.ds-text ul:has(> li > .ds-feld:first-child){padding-left:0;border-bottom:var(--line) solid var(--border);}
.ds-text .ds-feld{float:left;width:12rem;margin-left:-13rem;}
@media (max-width:640px){
  .ds-text li:has(> .ds-feld:first-child){padding-left:0;}
  .ds-text .ds-feld{float:none;display:block;width:auto;margin:0 0 .25rem;}
}
.gruenderin{padding-block:var(--space-7) var(--space-7);}
.gruenderin-innen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);align-items:start;}
.gruenderin-bogen{
  aspect-ratio:4/5;border-radius:var(--radius-arch);overflow:hidden;
  background:var(--surface-sand);border:var(--line) solid var(--border);
}
.gruenderin-bogen picture,.gruenderin-bogen img{display:block;width:100%;height:100%;}
.gruenderin-bogen img{object-fit:cover;object-position:50% 20%;}
.gruenderin-wort{padding-top:clamp(0rem,3vw,2.5rem);}
.gruenderin-wort .kopf{max-width:18ch;margin-bottom:0;}
.gruenderin-wort .kopf-strich{margin:.6rem 0 var(--space-4);}
.gruenderin-text p{max-width:60ch;color:var(--ink-muted);}
.gruenderin-text p:first-child{font-size:var(--text-lead);color:var(--ink);}
.gruenderin-text p:last-child{font-family:var(--font-display);font-size:var(--text-h3);color:var(--ink);line-height:1.3;margin-top:var(--space-3);}

/* ==========================================================================
   UNSER TEAM - Spec 20 §A.R (Revision 2026-09-26, ersetzt die Karte aus A.5):
   eine ausgerichtete Arkade, 3 / 3 / 1, der Bogen oben, der Text darunter.
   Sieben gleichwertige Menschen, eine Hand: der ruhige Rahmen lässt die
   Zeichnungen sprechen. Kein Slider, nichts eingeklappt, alle sieben sichtbar.
   Die Bögen haben die Fläche --surface-raised auf dem Sand, weil das Papier
   der Zeichnungen genau auf diesen Ton (#FCF9F4) gebracht ist.
   Die Selektoren tragen .team, damit die .posten-Regeln der Startseite (u. a.
   die 118px-Handyspalte bei <= 720px) hier nicht greifen.
   ========================================================================== */
.team{background:var(--surface-sand);padding-block:var(--space-7) var(--space-8);}
.team .team-karte{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--space-5);row-gap:var(--space-6);margin-top:var(--space-5);
}
.team .team-person:nth-child(7){grid-column:2;}
.team .team-person{display:flex;flex-direction:column;align-items:flex-start;margin:0;}
.team .team-bogen{
  display:block;width:100%;aspect-ratio:auto;margin:0;
  grid-column:auto;grid-row:auto;border-radius:0;overflow:visible;
}
.team .team-bogen picture{
  display:block;width:100%;aspect-ratio:4/5;
  border-radius:var(--radius-arch);overflow:hidden;
  background:var(--surface-raised);border:var(--line) solid var(--border);
}
.team .team-bogen img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;}
.team .team-person h3{margin:var(--space-3) 0 .1rem;}
.team-rolle{
  margin:0 0 .6rem;font-size:var(--text-label);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:500;
  color:var(--brand-ink);
}
.team-text p{font-size:var(--text-body);color:var(--ink-muted);max-width:40ch;margin-bottom:.7rem;}
.team .team-weg{align-self:flex-start;margin-top:var(--space-2);}

@media (max-width:1079px){
  .team .team-karte{grid-template-columns:repeat(2,minmax(0,400px));justify-content:center;}
  .team .team-person:nth-child(7){grid-column:1 / -1;justify-self:center;width:min(100%,400px);}
}
@media (max-width:819px){
  .gruenderin{padding-block:var(--space-5) var(--space-6);}
  .gruenderin-innen{grid-template-columns:1fr;}
  .gruenderin-bogen{width:min(78vw,380px);}
  .team .team-karte{grid-template-columns:minmax(0,1fr);}
  .team .team-person,.team .team-person:nth-child(7){grid-column:auto;justify-self:stretch;width:100%;max-width:440px;margin-inline:auto;}
}

/* Runde 2, Stapel 2: KEINE Deckkraft mehr in dieser Einblendung. Safari
   (WebKit) liess nach schnellem Wischen Teamkarten, über die hinweggescrollt
   wurde, auf opacity 0 stehen, bis sie wieder ins Bild kamen; die Kundin sah
   auf dem Handy leere Bögen. Jetzt steigt der Teil nur noch 14px, sichtbar ist
   er immer. Kein Inhalt hängt an einer Animation.
   /* Einblendung ohne Skript: steigt 14px und setzt sich, sobald der Teil ins
   Bild kommt (scroll-getriebene CSS-Animation). Browser ohne Unterstützung
   zeigen alles sofort und still. Bewegungsverzicht: gar keine Einblendung. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ue-nah{animation:ue-nah linear both;animation-timeline:view();animation-range:entry 0% entry 45%;}
    @keyframes ue-nah{
      from{transform:translateY(14px);animation-timing-function:cubic-bezier(.16,1,.3,1);}
      to{transform:none;}
    }
  }
}
.team-person.ue-nah:hover .posten-bogen picture{transform:rotate(.5deg) translateY(-3px);}

/* ==========================================================================
   Bewegungsverzicht: alles steht sofort im Endzustand. Kein Inhalt hängt an
   einer Animation. Umlaufende Bewegungen werden entfernt, nicht verkürzt.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .motion-on [data-nah],.motion-on [data-auf]{opacity:1;}
  .motion-on .kopf-strich path{stroke-dashoffset:0;}
  .motion-on .deal-platte img{transform:none;}
  .motion-on .deal-abend{opacity:0;}
  .motion-on .deal-rein svg{animation:none;}
  .motion-on .deal-huelle{height:auto;}
  .motion-on .deal-hinten{display:none;}
  .motion-on .deal{position:relative;top:auto;height:auto;overflow:hidden;}
  /* Der Grundriss bleibt vollständig bedienbar: der Riss, alle 17 Namen, alle
     neun Karten, der Filter. Nur die Kamerafahrten fallen weg. */
  .motion-on .plan-karte{animation:none;}
  .riss-schuhe rect{transition:none;}
  .guck{display:none!important;}
}
/* Zwei Notausgänge auf denselben Endzustand: Nutzerwunsch (.reduced) und ein
   Antrieb, der nie gebootet hat (.motion-failed). Beide zeigen die ganze
   Seite, fertig und still. */
.reduced [data-nah],.motion-failed [data-nah],
.reduced [data-auf],.motion-failed [data-auf]{opacity:1;}
.reduced .kopf-strich path,.motion-failed .kopf-strich path{stroke-dashoffset:0;}
.reduced .deal-platte img,.motion-failed .deal-platte img{transform:none;}
.reduced .deal-abend,.motion-failed .deal-abend{opacity:0;}
.motion-failed .deal-huelle{height:auto;}
.motion-failed .deal{position:relative;top:auto;height:auto;}
.motion-failed .deal-hinten{display:none;}
/* Ohne JS steht der Riss trotzdem: er ist statisches HTML, und die Raumliste
   darunter ist ihr eigener Ruhezustand - keine Projektion nötig. */
.motion-failed .plan-karte,.reduced .plan-karte{animation:none;}

/* ==========================================================================
   MOBIL-AUDIT F3 (25-mobile-audit.md) - der Rhythmus auf Handy und Tablet.
   Die Stationen trugen bis hier ueberall das Desktop-Mass 144/104px
   (--space-8/--space-7), auch unter 1080px. Das liess 150-250px leeren Raum
   zwischen den Bloecken stehen - der groesste Teil von "Leerraeume zwischen
   Abschnitten". Zwei Stufen, damit das Tablet nicht direkt auf das
   Handy-Mass springt.
   ========================================================================== */
@media (max-width:1079px){
  .saeulen,.karte,.bestellen,.anfragen,.finden,.team{padding-block:var(--space-7) var(--space-6);}
  .kinder{padding-top:var(--space-6);}
  .raeume{padding-block:var(--space-6) 3rem;}
  .einleitung-text{padding-block:var(--space-6) 0;}
}
@media (max-width:819px){
  .saeulen,.karte,.bestellen,.anfragen,.finden,.team{padding-block:4.5rem 3.5rem;}
  .kinder{padding-top:3rem;}
  .raeume{padding-block:3.5rem 2.5rem;}
  .einleitung-text{padding-block:3rem 0;}
}