/* Plapperegg — Bewegungs-Layer (Scroll-Reveals, Floaties, Hover-Wobble) */

/* --- Scroll reveal --- */
[data-mo="reveal"]{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--mo-delay,0ms);will-change:opacity,transform}
[data-mo="reveal"].mo-in{opacity:1;transform:none}

/* --- Pop-in (Karten, Mascots) --- */
[data-mo="pop"]{opacity:0;transform:scale(.94) translate3d(0,16px,0);transition:opacity .6s var(--ease-out),transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--mo-delay,0ms)}
[data-mo="pop"].mo-in{opacity:1;transform:none}

/* --- Zeilenweises Aufziehen von Headlines --- */
.mo-lines{display:block;overflow:hidden}
.mo-line{display:block;transform:translate3d(0,102%,0);transition:transform .8s var(--ease-out);transition-delay:var(--mo-delay,0ms)}
.mo-in .mo-line,.mo-line.mo-in{transform:none}

/* --- Parallax --- */
[data-mo-parallax]{will-change:transform}

/* --- Sanftes Schweben --- */
.mo-float{animation:mo-bob 6s ease-in-out infinite}
.mo-float--slow{animation-duration:9s}
.mo-float--alt{animation-delay:-3s}
@keyframes mo-bob{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,-14px,0) rotate(-2.5deg)}}

/* --- Hover-Wobble für Karten & Mascots --- */
.mo-wobble{transition:transform var(--t-base) var(--ease-out)}
.mo-wobble:hover{animation:mo-wiggle .6s var(--ease-out)}
@keyframes mo-wiggle{0%{transform:rotate(0deg) scale(1)}25%{transform:rotate(-3deg) scale(1.04)}50%{transform:rotate(2.5deg) scale(1.04)}75%{transform:rotate(-1.5deg) scale(1.02)}100%{transform:rotate(0deg) scale(1)}}

/* --- Karten heben sich beim Reinscrollen/Hover --- */
.mo-lift{transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.mo-lift:hover{transform:translateY(-6px)}

/* --- Kritzelfeld --- */
.kritzel{background:var(--c-peach-soft);padding:var(--sp-9) var(--sp-5)}
.kritzel__inner{max-width:var(--content-max);margin-inline:auto;display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:var(--sp-7);align-items:center}
.kritzel__copy h2{margin-bottom:var(--sp-3)}
.kritzel__copy p{color:var(--c-fg-2);max-width:34ch}
.kritzel__hint{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.kritzel__stage{position:relative;background:var(--c-paper-2);border:2px dashed color-mix(in oklab,var(--c-lavender) 45%,transparent);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;aspect-ratio:16/9;min-height:280px;cursor:crosshair}
.kritzel__stage canvas{display:block;width:100%;height:100%;touch-action:none}
.kritzel__placeholder{position:absolute;inset:0;display:grid;place-content:center;gap:var(--sp-2);text-align:center;pointer-events:none;transition:opacity var(--t-base) var(--ease-out);font-family:var(--ff-display);font-weight:var(--fw-semi);color:var(--c-mute)}
.kritzel__stage.is-drawn .kritzel__placeholder{opacity:0}
.kritzel__tools{position:absolute;left:var(--sp-4);bottom:var(--sp-4);display:flex;gap:var(--sp-2);align-items:center}
.kritzel__swatch{width:28px;height:28px;border-radius:var(--r-pill);border:2px solid var(--c-paper-2);box-shadow:var(--sh-1);cursor:pointer;padding:0;transition:transform var(--t-fast) var(--ease-out)}
.kritzel__swatch:hover{transform:scale(1.18)}
.kritzel__swatch[aria-pressed="true"]{transform:scale(1.24);border-color:var(--c-ink)}
.kritzel__clear{margin-left:var(--sp-2);border:none;background:var(--c-paper-2);color:var(--c-ink);font-family:var(--ff-display);font-weight:var(--fw-semi);font-size:var(--fs-sm);padding:6px 14px;border-radius:var(--r-pill);box-shadow:var(--sh-1);cursor:pointer}
.kritzel__clear:hover{background:var(--c-lavender-soft)}
@media (max-width:840px){.kritzel__inner{grid-template-columns:1fr}}

/* --- Lautspiel --- */
.spiel{background:var(--c-lavender-soft);padding:var(--sp-9) var(--sp-5)}
.spiel__inner{max-width:var(--content-max,1320px);margin-inline:auto;display:grid;grid-template-columns:minmax(280px,1fr) 1.15fr;gap:var(--sp-8);align-items:center}
.spiel__head h2{margin:var(--sp-4) 0 var(--sp-3)}
.spiel__head p{color:var(--c-fg-2);max-width:38ch}
.spiel__stage{display:grid;gap:var(--sp-5)}
.spiel__laute{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.spiel__laut{font-family:var(--ff-display);font-weight:var(--fw-bold);font-size:var(--fs-h3);min-width:64px;min-height:56px;padding:0 var(--sp-4);border:2px solid transparent;border-radius:var(--r-pill);background:var(--c-paper-2);color:var(--c-ink);box-shadow:var(--sh-1);cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s}
.spiel__laut:hover{transform:translateY(-4px) rotate(-3deg)}
.spiel__laut.is-on{background:var(--laut-c);color:#fff;transform:translateY(-4px) scale(1.06)}
.spiel__bubble-wrap{position:relative;display:grid;grid-template-columns:1fr minmax(120px,180px);gap:var(--sp-4);align-items:end}
.spiel__bubble{position:relative;background:var(--c-paper-2);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);box-shadow:var(--sh-2);animation:mo-bubble .45s cubic-bezier(.34,1.56,.64,1) both}
.spiel__bubble::after{content:"";position:absolute;right:-14px;bottom:34px;width:28px;height:28px;background:var(--c-paper-2);clip-path:polygon(0 0,100% 50%,0 100%)}
.spiel__big{display:block;font-family:var(--ff-display);font-size:clamp(3rem,6vw,5rem);line-height:.9;color:var(--laut-c)}
.spiel__woerter{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3)}
.spiel__woerter li{font-family:var(--ff-display);font-weight:var(--fw-semi);font-size:var(--fs-body);background:color-mix(in oklab,var(--laut-c) 14%,white);color:var(--c-ink);padding:6px 16px;border-radius:var(--r-pill);animation:mo-bubble .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--mo-delay,0ms)}
.spiel__mascot{width:100%;height:auto;animation:mo-bubble .5s cubic-bezier(.34,1.56,.64,1) both,mo-bob 6s ease-in-out 1s infinite}
@keyframes mo-bubble{from{opacity:0;transform:scale(.8) translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:900px){.spiel__inner{grid-template-columns:1fr}.spiel__bubble-wrap{grid-template-columns:1fr 120px}}

/* --- Spielwiese: Silben & Reime --- */
.spielwiese{background:var(--c-peach-soft);padding:var(--sp-9) var(--sp-5)}
.spielwiese__inner{max-width:var(--content-max,1320px);margin-inline:auto}
.spielwiese__head{max-width:44ch;margin-bottom:var(--sp-7)}
.spielwiese__head h2{margin:var(--sp-4) 0 var(--sp-3)}
.spielwiese__head p{color:var(--c-fg-2)}
.spielwiese__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--sp-5)}
.spielkarte{background:var(--c-paper-2);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--sh-2);display:grid;gap:var(--sp-5);align-content:start}
.spielkarte__head h3{margin:0 0 var(--sp-2)}
.spielkarte__head p{margin:0;color:var(--c-fg-2);font-size:var(--fs-sm)}
.spielkarte__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.spielkarte__switch{display:flex;gap:var(--sp-2)}
.spielkarte__switch .dot{width:12px;height:12px;border-radius:var(--r-pill);border:none;background:color-mix(in oklab,var(--c-lavender) 40%,white);cursor:pointer;padding:0;transition:transform .2s,background .2s}
.spielkarte__switch .dot.is-on{background:var(--c-coral);transform:scale(1.4)}
.btn--sm{padding:10px 20px;font-size:var(--fs-sm)}

.silben{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:baseline;min-height:88px}
.silben__teil{font-family:var(--ff-display);font-weight:var(--fw-bold);font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1;padding:8px 18px;border-radius:var(--r-pill);background:color-mix(in oklab,var(--c-lavender) 16%,white);color:color-mix(in oklab,var(--c-ink) 45%,white);transition:background .25s,color .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.silben__teil.is-on{background:var(--c-teal);color:#fff;transform:translateY(-10px) rotate(-3deg) scale(1.06)}

.reime{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--sp-5)}
.reime__col{display:grid;gap:var(--sp-3)}
.reime__w{font-family:var(--ff-display);font-weight:var(--fw-semi);font-size:var(--fs-body);padding:14px 18px;min-height:52px;border:2px solid color-mix(in oklab,var(--c-lavender) 35%,white);border-radius:var(--r-pill);background:white;color:var(--c-ink);cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s,border-color .2s,color .2s}
.reime__w:hover{transform:translateY(-3px)}
.reime__w.is-pick{background:var(--c-lavender);border-color:var(--c-lavender);color:#fff}
.reime__w.is-ok{background:var(--c-teal);border-color:var(--c-teal);color:#fff;cursor:default}
.reime__w.is-miss{animation:mo-shake .4s ease;border-color:#e08a6e;background:#fbeae3;color:#8a3d27}
.reime__neu{margin-top:var(--sp-4)}
.fuehl__opts .reime__w.is-miss{border-color:#e08a6e;background:#fbeae3;color:#8a3d27}
.fuehl__feedback{margin:10px 0 0;font-family:var(--ff-display-active);font-weight:500;color:#8a3d27}
@keyframes mo-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}

/* --- Team: Tier → Skizze → Gesicht beim Hover --- */
.member__photo{position:relative;overflow:hidden}
.member__mascot{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s var(--ease-out),transform .8s var(--ease-out)}
/* Der Bildkasten ist schmaler als der Kreis (styles.css: 78 % Breite, max. 90 % Höhe).
   Ohne margin:auto hing er an inset:0 oben links — alle Figuren sassen 11 % zu weit
   links und 5 % zu hoch. Nur zentrieren, Grössen bleiben unverändert. */
.member__mascot{margin:auto}
.member__mascot{object-fit:contain;padding:14%}
/* Foto als rundes Medaillon: unabhängig davon, ob die Quelldatei transparent
   oder weiss hinterlegt ist, entsteht für alle dieselbe Form. */
/* Das Medaillon ist für alle identisch: gleicher Durchmesser, gleiche Position,
   gleiche Ringstärke. Unterschiede werden nur INNERHALB des Fotos gelöst. */
/* Fenster statt Profilbild: die Innenfläche übernimmt den Kartenton und wird nur
   um ca. 8 % aufgehellt. Ein einziger feiner Ring, für alle exakt gleich. */
.member__medaillon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:inherit;box-shadow:0 0 0 1.2px color-mix(in oklab,#fff 34%,transparent),0 0 0 1.2px color-mix(in oklab,var(--c-ink) 5%,transparent);opacity:0;transition:opacity .6s var(--ease-out);z-index:1}
.member__medaillon::after{content:"";position:absolute;inset:0;border-radius:50%;background:color-mix(in oklab,var(--c-paper) 8%,transparent);pointer-events:none;z-index:0}
.member__foto{display:block;position:relative;z-index:1;width:100%;height:100%;object-fit:cover;transform:scale(var(--foto-s,1));transform-origin:50% var(--foto-o,42%)}
.member__badge{z-index:3}
/* Line-Reveal statt Filter-Skizze: eine Linie zeichnet den Kreis, dann kommt der Mensch. */
.member__line{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);width:86%;aspect-ratio:1;opacity:0;pointer-events:none}
.member__line circle{fill:none;stroke:var(--c-lavender);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289}
.member[tabindex]{cursor:pointer}
.member:hover .member__mascot,.member:focus-within .member__mascot,.member.is-open .member__mascot{opacity:0}
.member:hover .member__line,.member:focus-within .member__line,.member.is-open .member__line{opacity:1}
.member:hover .member__line circle,.member:focus-within .member__line circle,.member.is-open .member__line circle{animation:member-linie 1.9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes member-linie{0%{stroke-dashoffset:289;opacity:1}55%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.member:hover .member__medaillon,.member:focus-within .member__medaillon,.member.is-open .member__medaillon{opacity:1;transition-delay:.95s;transition-duration:.9s}
.section__hint{display:block;margin-top:10px;font-size:13.5px;color:color-mix(in oklab,var(--c-ink) 74%,transparent)}

/* --- Sinne: Hören, Farben, Fühlen --- */
.spielkarte__zaehler{display:inline-block;margin-left:.5em;padding-left:.6em;border-left:1px solid color-mix(in oklab,var(--c-ink) 18%,transparent);font-size:.9em;font-weight:500;color:color-mix(in oklab,var(--c-ink) 55%,transparent)}
.spielkarte__feedback{margin:0;font-family:var(--ff-display-active);font-weight:600;color:var(--c-teal-hover)}
.spielkarte__feedback.is-miss{color:var(--c-ink)}
.hoeren{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.hoeren__answers{display:grid;gap:var(--sp-3)}
.hoeren__tipp{margin:calc(var(--sp-2) * -1) 0 0;font-size:13.5px;color:color-mix(in oklab,var(--c-ink) 58%,transparent)}
.farbe{display:flex;align-items:center;justify-content:center;gap:var(--sp-5)}
.farbe__blob{width:84px;height:84px;border-radius:50%;flex:none;box-shadow:var(--sh-2)}
.farbe--innen{justify-content:center}
.farbe__blob--gross{width:140px;height:140px;display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box}
.farbe__wort{font-family:var(--ff-display-active);font-weight:600;font-size:clamp(1.6rem,4vw,2.15rem);line-height:1.05;text-transform:lowercase;text-align:center;text-wrap:balance}
.farbe__name{font-family:var(--ff-display-active);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1;color:var(--c-ink);text-transform:lowercase}
.farbe__log{margin:8px 0 0;font-size:14px;color:color-mix(in oklab,var(--c-ink) 55%,transparent)}
.fuehl__hinweis{margin:0;font-family:var(--ff-display-active);font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.4;color:var(--c-ink)}
.fuehl__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--sp-3)}

/* --- Roter Faden: «Warum das wichtig ist» --- */
.warum{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);align-items:start;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid color-mix(in oklab,var(--c-ink) 10%,transparent)}
.warum__tag{font-family:var(--ff-body-active);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,var(--c-ink) 50%,transparent);white-space:nowrap;padding-top:2px}
.warum p{margin:0;font-size:15px;line-height:1.55;color:color-mix(in oklab,var(--c-ink) 78%,transparent)}
@media (max-width:520px){.warum{grid-template-columns:1fr}}
/* Mitmach-Karten (03.09.2026): Label ÜBER dem Erklärungstext, damit der Absatz
   die volle Kartenbreite nutzt (v.a. im 3-Spalten-Desktop). Nur Mitmach-Serie —
   Lautspiel/Kritzelfeld behalten ihr «Warum das wirkt» daneben. */
[data-mitmach] .warum{grid-template-columns:1fr;gap:8px}
[data-mitmach] .warum__tag{white-space:normal}

/* --- Begleiter-Auswahl: Papierschild als Auslöser, Kreiswelt beim Öffnen --- */
.buddy{position:fixed;right:20px;bottom:20px;z-index:70;font-family:var(--ff-body-active)}
/* Der Auslöser sagt zuerst, was er tut. Papierartig wie der Kritzelpause-Tab, nur rechts. */
.buddy__toggle{position:relative;display:flex;align-items:center;gap:9px;border:0;border-radius:16px 3px 4px 12px;padding:9px 15px 9px 13px;background:linear-gradient(259deg,color-mix(in oklab,var(--c-peach-soft) 42%,var(--c-paper-2)),var(--c-paper-2) 62%);box-shadow:0 1px 2px rgba(40,30,60,.05),0 7px 18px rgba(40,30,60,.11);color:var(--c-ink);cursor:pointer;font-size:14px;font-weight:600;transform:rotate(.6deg);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),opacity .28s var(--ease-out)}
.buddy__toggle:hover,.buddy__toggle:focus-visible{transform:translateY(-2px) rotate(.6deg);box-shadow:0 2px 3px rgba(40,30,60,.06),0 11px 24px rgba(40,30,60,.15)}
.buddy__toggle::before{content:"";position:absolute;right:0;top:-1px;bottom:-1px;width:5px;background:color-mix(in oklab,var(--c-teal) 52%,transparent);clip-path:polygon(100% 0,0 3%,40% 22%,0 41%,45% 63%,0 82%,100% 100%)}
.buddy__ecke{position:absolute;left:-1px;bottom:-1px;width:14px;height:14px;border-bottom-left-radius:10px;background:linear-gradient(225deg,transparent 46%,color-mix(in oklab,var(--c-ink) 12%,transparent))}
/* Die gewählte Figur schaut hinter dem Schild hervor, ungeschnitten. */
.buddy__figur{flex:none;width:30px;height:30px;display:grid;place-items:center;margin-left:-2px}
.buddy__figur img{max-width:100%;max-height:100%;object-fit:contain;transform:rotate(-5deg)}
.buddy.is-leer .buddy__figur{display:none}
.buddy.is-open .buddy__toggle{opacity:0;pointer-events:none}
/* Die Kreiswelt wächst aus dem Schild nach oben links. */
.buddy__welt{--d:min(470px,calc(100vw - 36px),calc(100vh - 60px));position:absolute;right:0;bottom:0;width:var(--d);height:var(--d);border-radius:50%;background:radial-gradient(120% 120% at 76% 88%,color-mix(in oklab,var(--c-peach-soft) 52%,var(--c-paper-2)),var(--c-paper-2) 58%);box-shadow:0 2px 5px rgba(40,30,60,.06),0 22px 60px rgba(40,30,60,.17);transform-origin:calc(100% - 24px) calc(100% - 20px);transform:scale(.08);opacity:0;pointer-events:none;transition:transform .46s cubic-bezier(.22,.85,.28,1),opacity .3s var(--ease-out)}
.buddy.is-open .buddy__welt{transform:scale(1);opacity:1;pointer-events:auto}
.buddy__welt-in{position:absolute;inset:10% 11%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .28s var(--ease-out) .16s,transform .32s var(--ease-out) .16s}
.buddy.is-open .buddy__welt-in{opacity:1;transform:none}
/* nichts darf schrumpfen: sonst schieben sich Schalter und Fusszeile übereinander */
.buddy__welt-in>*{flex:none;max-width:100%}
.buddy__title{margin:0;font-family:var(--ff-display-active);font-size:18px;font-weight:600;color:var(--c-ink)}
.buddy__hint{margin:0;font-size:12.5px;line-height:1.45;color:color-mix(in oklab,var(--c-ink) 58%,transparent);max-width:30ch}
/* Die Kreisfläche liegt HINTER der Figur, sie beschneidet sie nicht. */
.buddy__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%}
.buddy__opt{position:relative;flex:none;width:var(--opt,54px);height:var(--opt,54px);border:0;padding:0;background:none;overflow:visible;cursor:pointer;display:grid;place-items:center;transition:transform .2s var(--ease-out)}
.buddy__opt::before{content:"";position:absolute;inset:0;border-radius:50%;background:color-mix(in oklab,var(--buddy-c,var(--c-teal)) 19%,var(--c-paper));transition:background .2s var(--ease-out),box-shadow .25s var(--ease-out)}
.buddy__opt img{position:relative;width:88%;height:88%;object-fit:contain;display:block}
.buddy__opt:hover{transform:translateY(-3px)}
.buddy__opt[aria-pressed="true"]::before{background:color-mix(in oklab,var(--buddy-c,var(--c-teal)) 22%,var(--c-paper));box-shadow:0 0 0 2px var(--buddy-c,var(--c-teal)),0 0 0 7px color-mix(in oklab,var(--buddy-c,var(--c-teal)) 16%,transparent)}
.buddy__meta{min-height:44px}
.buddy__meta strong{display:block;font-family:var(--ff-display-active);font-size:16px;color:var(--c-ink)}
.buddy__meta span{display:block;font-size:12.5px;line-height:1.45;color:color-mix(in oklab,var(--c-ink) 58%,transparent)}
.buddy__meta em{font-style:normal;font-weight:600;color:color-mix(in oklab,var(--c-ink) 78%,transparent)}
.buddy__off{border:0;background:none;padding:4px 6px;font-family:var(--ff-body-active);font-size:12.5px;color:color-mix(in oklab,var(--c-ink) 48%,transparent);cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--c-ink) 20%,transparent);text-underline-offset:3px}
.buddy__off:hover{color:var(--c-ink)}
@media (max-width:820px){
  .buddy__welt{--d:min(430px,calc(100vw - 24px),calc(100vh - 44px))}
  .buddy__welt-in{inset:8% 9%;gap:8px}
  .buddy__opt{--opt:42px}
  .buddy__grid{gap:7px}
  .buddy__hint{display:none}
  .buddy__title{font-size:17px}
  .buddy__meta{min-height:40px}
  .buddy__meta strong{font-size:15px}
  .buddy__ruhe .buddy__sw{padding:5px 8px;font-size:11.5px}
  .buddy__ruhe{gap:4px}
}
/* Auf Touch bleibt die Begleiterwelt erreichbar — nur die dem Cursor folgende
   Figur entfällt dort, weil es keinen Cursor gibt. */
@media (hover:none){.buddy{right:14px;bottom:14px}.buddy__toggle{padding:11px 17px 11px 14px;font-size:15px}.buddy__figur{width:34px;height:34px}}
@media (prefers-reduced-motion:reduce){.buddy__welt,.buddy__welt-in,.buddy__toggle{transition-duration:.12s;transition-delay:0s}.buddy__welt{transform:scale(1)}.buddy:not(.is-open) .buddy__welt{transform:scale(1);opacity:0}}

/* --- Cursor-Begleiter + Farbspur --- */
.mo-cursor{position:fixed;left:0;top:0;width:64px;pointer-events:none;z-index:60;opacity:0;transition:opacity .35s ease;will-change:transform}
.mo-cursor__body{position:relative;display:block;animation:mo-idle 3.4s ease-in-out infinite}
.mo-cursor img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(40,30,60,.22))}
.mo-cursor.is-on{opacity:1}
.mo-cursor.is-walk .mo-cursor__body{animation:mo-walk .42s ease-in-out infinite}
.mo-cursor.is-hop .mo-cursor__body{animation:mo-hop .55s cubic-bezier(.28,1.5,.5,1)}
.mo-cursor.is-dance .mo-cursor__body{animation:mo-dance 2.6s cubic-bezier(.4,0,.6,1)}
.mo-cursor.is-spin .mo-cursor__body{animation:mo-spin 1.1s cubic-bezier(.4,0,.4,1)}
.mo-cursor.is-flip .mo-cursor__body{animation:mo-flip 1s cubic-bezier(.3,1.1,.5,1)}
.mo-cursor.is-orbit .mo-cursor__body{animation:mo-orbit 1.8s linear}
.mo-cursor.is-cheese .mo-cursor__body{animation:mo-cheese 2s cubic-bezier(.3,1.4,.5,1)}
.mo-cursor.is-lach .mo-cursor__body{animation:mo-lach 1.8s ease-in-out}
.mo-cursor.is-rap .mo-cursor__body{animation:mo-rap 4.8s cubic-bezier(.36,0,.5,1)}
.mo-cursor.is-klatsch .mo-cursor__body{animation:mo-klatsch .6s cubic-bezier(.3,1.4,.5,1) 3}
@keyframes mo-klatsch{0%{transform:translateY(0) rotate(0) scale(1)}18%{transform:translateY(-24px) rotate(-6deg) scale(.94,1.1)}42%{transform:translateY(0) rotate(0) scale(1.12,.88)}62%{transform:translateY(-9px) rotate(5deg) scale(1)}100%{transform:translateY(0) rotate(0) scale(1)}}
@keyframes mo-rap{0%{transform:translate(0,0) rotate(0) scale(1)}6%{transform:translate(-30px,-8px) rotate(-12deg) scale(1.14,.9)}12%{transform:translate(-14px,-34px) rotate(-4deg) scale(.92,1.12)}18%{transform:translate(26px,-6px) rotate(11deg) scale(1.12,.9)}24%{transform:translate(10px,-36px) rotate(3deg) scale(.92,1.12)}30%{transform:translate(-34px,-10px) rotate(-14deg)}36%{transform:translate(-10px,-40px) rotate(-2deg)}42%{transform:translate(30px,-8px) rotate(13deg)}48%{transform:translate(6px,-44px) rotate(0) scale(1.16,.88)}54%{transform:translate(-28px,-12px) rotate(-11deg)}60%{transform:translate(0,-50px) rotate(0) scale(.9,1.14)}66%{transform:translate(28px,-10px) rotate(12deg)}72%{transform:translate(-6px,-38px) rotate(-3deg)}78%{transform:translate(-26px,-8px) rotate(-13deg)}84%{transform:translate(18px,-30px) rotate(8deg)}90%{transform:translate(-12px,-14px) rotate(-6deg)}100%{transform:translate(0,0) rotate(0) scale(1)}}
@keyframes mo-cheese{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.22) rotate(-6deg)}45%{transform:scale(1.16) rotate(5deg)}70%{transform:scale(1.22) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes mo-lach{0%,100%{transform:translateY(0) rotate(0) scale(1)}10%{transform:translateY(-16px) rotate(-10deg) scale(1.08,.94)}22%{transform:translateY(2px) rotate(8deg) scale(.94,1.08)}34%{transform:translateY(-18px) rotate(-12deg) scale(1.1,.92)}46%{transform:translateY(2px) rotate(9deg) scale(.93,1.09)}58%{transform:translateY(-14px) rotate(-8deg) scale(1.06,.95)}70%{transform:translateY(2px) rotate(6deg)}84%{transform:translateY(-8px) rotate(-4deg)}}
@keyframes mo-dance{0%{transform:translateY(0) rotate(0)}8%{transform:translate(-34px,-26px) rotate(-24deg) scale(1.1,.9)}20%{transform:translate(34px,4px) rotate(22deg) scale(.9,1.12)}32%{transform:translate(-38px,-40px) rotate(-22deg)}44%{transform:translate(38px,2px) rotate(24deg)}56%{transform:translate(-24px,-52px) rotate(-14deg) scale(1.12,.88)}68%{transform:translate(26px,0) rotate(18deg)}80%{transform:translate(-18px,-34px) rotate(-20deg)}92%{transform:translate(12px,-6px) rotate(10deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes mo-spin{0%{transform:rotate(0) scale(1)}20%{transform:translateY(-18px) rotate(0) scale(1.12,.86)}100%{transform:translateY(0) rotate(720deg) scale(1)}}
@keyframes mo-flip{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-78px) rotate(-200deg)}60%{transform:translateY(-30px) rotate(-330deg)}100%{transform:translateY(0) rotate(-360deg)}}
@keyframes mo-orbit{0%{transform:translate(0,0)}25%{transform:translate(34px,-26px) rotate(12deg)}50%{transform:translate(0,-46px) rotate(-8deg)}75%{transform:translate(-34px,-26px) rotate(-12deg)}100%{transform:translate(0,0)}}
@keyframes mo-idle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(1.5deg)}}
@keyframes mo-walk{0%{transform:translateY(0) rotate(-4deg) scale(1,1)}50%{transform:translateY(-5px) rotate(4deg) scale(.97,1.03)}100%{transform:translateY(0) rotate(-4deg) scale(1,1)}}
@keyframes mo-hop{0%{transform:translateY(0) scale(1.1,.86)}35%{transform:translateY(-62px) scale(.9,1.14)}70%{transform:translateY(0) scale(1.12,.88)}100%{transform:translateY(0) scale(1,1)}}
/* Rapper-Ausstattung: Sonnenbrille + Mikrofon */
.mo-cursor__props{position:absolute;inset:0;opacity:0;transform:scale(.6);transform-origin:50% 60%;transition:opacity .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.mo-cursor.is-rap .mo-cursor__props{opacity:1;transform:scale(1)}
.mo-cursor__props{display:none}
.mo-cursor[data-buddy="elefant.png"] .mo-cursor__props{display:block}
.mo-cursor__shades{position:absolute;left:66%;top:39%;width:22%;height:13%;transform:rotate(-7deg)}
.mo-cursor__shades i{position:absolute;inset:0;background:#15151b;border-radius:52% 46% 48% 54%;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 1px 3px rgba(0,0,0,.28)}
.mo-cursor__shades::before{content:"";position:absolute;left:98%;top:14%;width:22%;height:26%;background:#15151b;border-radius:0 3px 3px 0}
.mo-cursor__shades::after{content:"";position:absolute;right:96%;top:6%;width:78%;height:22%;background:#15151b;border-radius:3px;transform:rotate(6deg);transform-origin:100% 50%}
.mo-cursor__mic{position:absolute;right:-20%;top:66%;width:7%;height:30%;background:linear-gradient(90deg,#4a4a56,#1d1d26 70%);border-radius:var(--r-pill);transform:rotate(-20deg);transform-origin:50% 100%;animation:mo-mic .48s ease-in-out infinite alternate}
.mo-cursor__mic::before{content:"";position:absolute;left:-80%;top:-70%;width:260%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 26%,#8d93a6,#3a3f52 58%,#1d1d26),repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.16) 0 1px,transparent 1px 3px);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.mo-cursor__mic::after{content:"";position:absolute;left:-46%;top:-30%;width:52%;height:18%;border-radius:50%;background:rgba(255,255,255,.55)}
@keyframes mo-mic{from{transform:rotate(-29deg)}to{transform:rotate(-11deg)}}
.mo-cursor__face{display:none}
.mo-cursor__grin{display:none}

/* Lächeln / Lachen: nur Bäckchen und Bewegung — kein gezeichneter Mund */
.mo-cursor__blush{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
.mo-cursor.is-blush .mo-cursor__blush{opacity:.75}
.mo-cursor.is-lach .mo-cursor__blush,.mo-cursor.is-cheese .mo-cursor__blush,.mo-cursor.is-rap .mo-cursor__blush{opacity:.9}
.mo-cursor__blush i{position:absolute;top:52%;width:26%;height:15%;border-radius:50%;background:radial-gradient(circle,rgba(240,129,104,.85),rgba(240,129,104,0) 70%)}
.mo-cursor__blush i:first-child{left:8%}
.mo-cursor__blush i:last-child{right:8%}
.mo-cursor__say{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-6px) scale(.7);transform-origin:50% 100%;background:var(--c-paper-2);color:var(--c-ink);font-family:var(--ff-display-active);font-weight:600;font-size:14px;line-height:1.25;white-space:nowrap;padding:7px 13px;border-radius:var(--r-pill);box-shadow:var(--sh-2);opacity:0;transition:opacity .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.mo-cursor__say::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;background:var(--c-paper-2);clip-path:polygon(0 0,100% 0,50% 100%)}
.mo-cursor.is-saying .mo-cursor__say{opacity:1;transform:translate(-50%,-12px) scale(1)}
.mo-dot{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:var(--r-pill);pointer-events:none;z-index:59;animation:mo-dot-fade .9s ease-out forwards}
@keyframes mo-dot-fade{0%{opacity:.85;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.2) translateY(18px)}}
@media (hover:none),(max-width:760px){.mo-cursor,.mo-dot{display:none}}

/* --- Mascots die von den Rändern reinschauen --- */
.mo-peeks{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.spielwiese>*:not(.mo-peeks),.spiel>*:not(.mo-peeks),.kritzel>*:not(.mo-peeks),.prose-section>*:not(.mo-peeks){position:relative;z-index:1}
.mo-peek{position:absolute;width:clamp(80px,9vw,140px);opacity:0;transition:transform .9s var(--ease-out),opacity .7s var(--ease-out);will-change:transform}
.mo-peek img{display:block;width:100%;height:auto}
.mo-peek--l{left:0;transform:translateX(-70%) rotate(-10deg)}
.mo-peek--r{right:0;transform:translateX(70%) rotate(10deg)}
.mo-peek.mo-in{opacity:.9}
.mo-peek--l.mo-in{transform:translateX(-30%) rotate(-6deg)}
.mo-peek--r.mo-in{transform:translateX(26%) rotate(6deg)}
@media (max-width:1500px){.mo-peeks{display:none}}

/* --- Mascot-Floaties am Seitenrand --- */
.mo-peek{position:absolute;pointer-events:none;opacity:.9}
.mo-peek img{display:block;width:100%;height:auto}

@media (prefers-reduced-motion:reduce){
  .member:hover .member__line circle,.member:focus-within .member__line circle,.member.is-open .member__line circle{animation:none;opacity:0}
  [data-mo]{opacity:1!important;transform:none!important;transition:none!important}
  .mo-line{transform:none!important}
  .mo-float,.mo-wobble:hover{animation:none!important}
  .spiel__bubble,.spiel__woerter li,.spiel__mascot{animation:none!important;opacity:1!important;transform:none!important}
  .reime__w.is-miss{animation:none!important}
  .mo-peek{transition:none!important}
  .mo-cursor,.mo-dot{display:none!important}
}

/* --- Mitlaufender Anfrage-Knopf --- */
.mo-cta{position:fixed;right:24px;bottom:24px;z-index:69;display:flex;align-items:center;gap:9px;padding:12px 20px;border-radius:var(--r-pill);background:var(--c-paper);border:1px solid color-mix(in oklab,var(--c-ink) 14%,transparent);color:var(--c-ink);text-decoration:none;box-shadow:0 8px 22px rgba(40,30,60,.13);opacity:0;transform:translateY(9px);pointer-events:none;transition:opacity .22s cubic-bezier(.2,.7,.2,1),transform .22s cubic-bezier(.2,.7,.2,1),background .2s ease,border-color .2s ease}
.mo-cta.is-on{opacity:1;transform:none;pointer-events:auto}
.mo-cta:hover{background:var(--c-ink);color:var(--c-paper);border-color:transparent}
.mo-cta__txt{font-family:var(--ff-display-active);font-size:15.5px;font-weight:600;line-height:1.1}
.mo-cta__arrow{font-size:14px;line-height:1;opacity:.55;transition:transform .2s ease,opacity .2s ease}
.mo-cta:hover .mo-cta__arrow{transform:translate(2px,-2px);opacity:1}
@media (max-width:760px){.mo-cta{left:16px;right:16px !important;bottom:calc(14px + env(safe-area-inset-bottom));justify-content:center;padding:14px 20px}.mo-cta__txt{font-size:16px}}
@media (prefers-reduced-motion:reduce){
  .member:hover .member__line circle,.member:focus-within .member__line circle,.member.is-open .member__line circle{animation:none;opacity:0}
  .member__foto{transform:none}.mo-cta{transition:opacity .2s linear;transform:none}}

/* Funken beim Antippen des Hero-Elefanten */
.hero__card--main{position:absolute}
.ele-funke{position:absolute;width:22px;height:22px;pointer-events:none;opacity:0;animation:ele-funke 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.ele-funke svg{width:100%;height:100%;display:block;fill:var(--c-yellow);filter:drop-shadow(0 0 6px color-mix(in oklab,var(--c-yellow) 70%,transparent))}
@keyframes ele-funke{0%{opacity:0;transform:translateY(0) scale(0) rotate(-25deg)}30%{opacity:1;transform:translateY(-12px) scale(var(--s,1)) rotate(0)}70%{opacity:.85;transform:translateY(-26px) scale(calc(var(--s,1) * .8)) rotate(18deg)}100%{opacity:0;transform:translateY(-42px) scale(0) rotate(35deg)}}
@media (prefers-reduced-motion:reduce){
  .member:hover .member__line circle,.member:focus-within .member__line circle,.member.is-open .member__line circle{animation:none;opacity:0}
  .member__foto{transform:none}.ele-funke{display:none}}

/* Easter Egg: kurze Sprechblase am Rüssel */
.ele-say{position:absolute;right:-4%;top:14%;padding:8px 14px;border-radius:var(--r-pill);background:var(--c-paper-2);border:1px solid var(--c-line);box-shadow:var(--sh-2);font-family:var(--ff-display-active);font-size:15px;font-weight:600;color:var(--c-ink);white-space:nowrap;pointer-events:none;animation:ele-say 1.9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ele-say{0%{opacity:0;transform:translateY(6px) scale(.94)}14%{opacity:1;transform:none}70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){
  .member:hover .member__line circle,.member:focus-within .member__line circle,.member.is-open .member__line circle{animation:none;opacity:0}
  .member__foto{transform:none}.ele-say{animation:none;opacity:1}}

/* Peek-Tiere: pro Figur eigenes Cropping, damit nie durch Augen geschnitten wird.
   Sichtbar bleiben rund 65-75% der Figur. Unter 1100px lieber ganz weglassen. */
.mo-peek[data-tier="kueken.png"].mo-in.mo-peek--l{transform:translateX(-22%) rotate(-5deg)}
.mo-peek[data-tier="kueken.png"].mo-in.mo-peek--r{transform:translateX(20%) rotate(5deg)}
.mo-peek[data-tier="maus.png"].mo-in.mo-peek--l{transform:translateX(-24%) rotate(-5deg)}
.mo-peek[data-tier="maus.png"].mo-in.mo-peek--r{transform:translateX(22%) rotate(5deg)}
.mo-peek[data-tier="rosabaer.png"].mo-in.mo-peek--l{transform:translateX(-34%) rotate(-6deg)}
.mo-peek[data-tier="rosabaer.png"].mo-in.mo-peek--r{transform:translateX(30%) rotate(6deg)}
.mo-peek[data-tier="schwein.png"].mo-in.mo-peek--l{transform:translateX(-32%) rotate(-6deg)}
.mo-peek[data-tier="schwein.png"].mo-in.mo-peek--r{transform:translateX(28%) rotate(6deg)}
@media (max-width:1500px){.mo-peeks{display:block}.mo-peek{width:clamp(72px,7vw,110px)}}
@media (max-width:1100px){.mo-peeks{display:none}}

/* --- Kritzelpause: kleines entdeckbares Zeichenfeld unten links --- */
/* Der Tab ist ein Stück Papier aus dem Mitmachbuch, kein Website-Button. */
.kp-tab{position:fixed;left:16px;bottom:34px;z-index:60;display:flex;align-items:center;gap:11px;border:0;border-radius:3px 16px 12px 4px;padding:13px 20px 13px 16px;background:linear-gradient(101deg,color-mix(in oklab,var(--c-yellow-soft) 74%,var(--c-paper)),color-mix(in oklab,var(--c-paper) 97%,var(--c-yellow-soft)));color:var(--c-ink);box-shadow:0 5px 16px rgba(40,30,60,.12);font-family:var(--ff-body-active);text-align:left;cursor:pointer;opacity:0;transform:translateX(-16px) rotate(-.7deg);transition:opacity .6s var(--ease-out),transform .4s var(--ease-out),box-shadow .3s var(--ease-out),background .3s var(--ease-out)}
/* Papierkante links: leicht unregelmässig statt gerade Linie */
.kp-tab::before{content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:5px;background:color-mix(in oklab,var(--c-coral) 58%,transparent);clip-path:polygon(0 0,100% 3%,60% 22%,100% 41%,55% 63%,100% 79%,70% 100%,0 100%)}
/* einmaliger feiner Lichtimpuls über die Kante beim Erscheinen */
.kp-tab::after{content:'';position:absolute;left:-4px;top:0;bottom:0;width:26px;pointer-events:none;background:linear-gradient(100deg,transparent,color-mix(in oklab,#fff 72%,transparent),transparent);opacity:0;border-radius:inherit}
.kp-tab.is-da::after{animation:kp-schimmer .7s var(--ease-out) .25s 1}
@keyframes kp-schimmer{0%{opacity:0;transform:translateX(0)}35%{opacity:.9}100%{opacity:0;transform:translateX(120px)}}
.kp-tab.is-da{opacity:1;transform:translateX(0) rotate(-.7deg)}
/* solange das Blatt offen ist, gibt es den Bookmark nicht mehr: er ist das Blatt geworden */
.kp-tab.is-verwandelt{opacity:0;transform:translateX(-6px) scale(.96) rotate(-.7deg);pointer-events:none}
.kp-tab.is-da:hover,.kp-tab:focus-visible,.kp-tab.is-aktiv{transform:translateX(4px) rotate(-.7deg);box-shadow:0 8px 20px rgba(40,30,60,.17);background:linear-gradient(101deg,color-mix(in oklab,var(--c-yellow-soft) 94%,var(--c-paper)),color-mix(in oklab,var(--c-paper) 92%,var(--c-yellow-soft)))}
/* leicht versetzte, angehobene Ecke unten rechts */
.kp-tab__ecke{position:absolute;right:-1px;bottom:-1px;width:15px;height:15px;border-bottom-right-radius:10px;background:linear-gradient(135deg,transparent 46%,color-mix(in oklab,var(--c-ink) 13%,transparent) 47%,color-mix(in oklab,var(--c-paper) 96%,transparent) 51%)}
.kp-tab__kritzel{width:32px;height:16px;flex:none;overflow:visible}
.kp-tab__kritzel path{fill:none;stroke:var(--c-coral);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.kp-tab__k1{stroke-dasharray:62;stroke-dashoffset:62}
.kp-tab__k2{stroke-dasharray:14;stroke-dashoffset:14;opacity:.75}
.kp-tab.is-da .kp-tab__k1{animation:kp-strich .8s var(--ease-out) .1s forwards}
.kp-tab.is-da .kp-tab__k2{animation:kp-strich2 .5s var(--ease-out) .95s forwards}
@keyframes kp-strich2{to{stroke-dashoffset:0}}
@keyframes kp-strich{to{stroke-dashoffset:0}}
.kp-tab__wort{font-family:var(--ff-display-active);font-size:18px;line-height:1.15;font-weight:600;letter-spacing:-.005em;color:var(--c-ink)}
@media (prefers-reduced-motion:reduce){.kp-tab::after{animation:none}.kp-tab.is-da .kp-tab__kritzel path{animation:none;stroke-dashoffset:0}}
/* Das offene Feld ist ein schwebendes Blatt Papier. */
.kp{position:fixed;left:14px;bottom:74px;transition:opacity .32s var(--ease-out),transform .32s var(--ease-out),bottom .3s var(--ease-out);z-index:61;width:min(286px,80vw);transform-origin:left bottom;background:color-mix(in oklab,var(--c-peach-soft) 18%,var(--c-paper));border-radius:8px;box-shadow:0 1px 2px rgba(40,30,60,.05),0 10px 34px rgba(40,30,60,.13);padding:14px 15px 13px;opacity:0;transform:translateY(10px) rotate(-.6deg);transition:opacity .32s var(--ease-out),transform .32s var(--ease-out)}
.kp.is-offen{opacity:1;transform:rotate(-.6deg) scale(1)}
/* Entfalten aus dem Bookmark: 300 ms, Ursprung an der Bookmark-Ecke unten links */
.kp{transform:translateY(8px) scale(.9) rotate(-1.4deg);transition:opacity .3s var(--ease-out),transform .3s cubic-bezier(.2,.8,.3,1),width .3s var(--ease-out)}
.kp.is-gross{width:min(560px,92vw)}
.kp.is-gross .kp__feld{height:min(384px,52vh)}
.kp.is-gross .kp__impuls{font-size:18px}
.kp__texte{display:flex;flex-direction:column;gap:7px;min-width:0}
.kp__prompt{font-size:15.5px;line-height:1.45;color:color-mix(in oklab,var(--c-ink) 82%,transparent)}
.kp__kopf-aktionen{display:flex;align-items:center;gap:9px;flex:none}
.kp__gross{border:0;background:none;padding:2px;line-height:0;cursor:pointer;opacity:.42;transition:opacity .25s var(--ease-out)}
.kp__gross:hover,.kp__gross:focus-visible{opacity:.85}
.kp__gross svg{width:14px;height:14px;fill:none;stroke:var(--c-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kp__gross .kp__gross-zu{display:none}
.kp.is-gross .kp__gross .kp__gross-auf{display:none}
.kp.is-gross .kp__gross .kp__gross-zu{display:inline}
.kp__zurueck{border:0;background:none;padding:0;font-family:var(--ff-body-active);font-size:12.5px;color:color-mix(in oklab,var(--c-ink) 48%,transparent);cursor:pointer;transition:color .25s var(--ease-out)}
.kp__zurueck:hover:not(:disabled){color:var(--c-ink)}
.kp__zurueck:disabled{opacity:.4;cursor:default}
.kp__aktionen{display:flex;align-items:center;gap:12px}
.kp__kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 2px 9px}
.kp__impuls{font-family:var(--ff-display-active);font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--c-ink)}
.kp__zu{border:0;background:none;font-size:18px;line-height:1;color:color-mix(in oklab,var(--c-ink) 38%,transparent);cursor:pointer;padding:0 2px;transition:color .25s var(--ease-out)}
.kp__zu:hover{color:var(--c-ink)}
.kp__feld{height:152px;border-radius:4px;background:color-mix(in oklab,var(--c-paper) 97%,var(--c-peach-soft));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c-ink) 5%,transparent);overflow:hidden;position:relative}
.kp__feld canvas{display:block;touch-action:none;cursor:crosshair}
.kp__tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:11px 2px 0}
.kp__farben{display:flex;gap:8px}
.kp__farbe{width:17px;height:17px;border-radius:50%;border:0;cursor:pointer;padding:0;box-shadow:0 0 0 0 color-mix(in oklab,var(--c-ink) 22%,transparent);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.kp__farbe:hover{transform:scale(1.1)}
.kp__farbe.is-aktiv{transform:scale(1.14);box-shadow:0 0 0 2px var(--c-paper),0 0 0 3.5px color-mix(in oklab,var(--c-ink) 26%,transparent)}
.kp__loeschen{border:0;background:none;font-family:var(--ff-body-active);font-size:12.5px;color:color-mix(in oklab,var(--c-ink) 48%,transparent);cursor:pointer;transition:color .25s var(--ease-out)}
.kp__loeschen:hover{color:var(--c-ink)}
@media (max-width:640px){.kp-tab{bottom:18px;padding:9px 16px 9px 13px}.kp-tab__wort{font-size:15px}.kp-tab__frage{font-size:11px}.kp,.kp.is-gross{left:10px;right:10px;bottom:66px;width:auto}.kp.is-gross .kp__feld{height:min(62vh,460px)}}
@media (prefers-reduced-motion:reduce){.kp-tab,.kp{transition:none}}

/* Persönliches Zweitbild: erst auf bewussten Klick, ruhig, ohne Modal und ohne Flip. */
/* Zweitbild in fester Fläche: gleiche Geometrie wie das Medaillon-Feld, nur rechteckig. */
.member__zweitbox{position:absolute;inset:6px;border-radius:16px;overflow:hidden;opacity:0;pointer-events:none;background:transparent;clip-path:inset(14% 14% 14% 14% round 22px);transition:opacity .42s var(--ease-out),clip-path .58s cubic-bezier(.22,.9,.28,1)}
.member__zweit{display:block;width:100%;height:100%;object-fit:cover;transform:scale(calc(var(--zweit-s,1.2) * 1.04));transform-origin:50% 45%;transition:transform .7s cubic-bezier(.22,.9,.28,1)}
.member.is-zweit .member__zweitbox{clip-path:inset(0 0 0 0 round 16px)}
.member.is-zweit .member__zweit{transform:scale(var(--zweit-s,1.2))}
@media (prefers-reduced-motion:reduce){.member__zweitbox{transition:opacity .2s linear;clip-path:inset(0 0 0 0 round 16px)}.member__zweit{transition:none;transform:scale(var(--zweit-s,1.2))}}

.member.is-zweit .member__zweitbox{opacity:1}
.member.is-zweit .member__medaillon,.member.is-zweit .member__line{opacity:0!important;transition-delay:0s}
@media (prefers-reduced-motion:reduce){.member__photo,.member__zweitbox{transition:none}}

/* Sami trifft sich selbst: der kleine Begleiter geht im grossen Hero-Elefanten auf. */
.mo-cursor{transition:opacity .7s var(--ease-out)}
.mo-cursor.is-vereint{opacity:0;transition-delay:1.15s;transition-duration:.85s}
.mo-cursor.is-treffen .mo-cursor__body{animation:sami-treffen 1.9s var(--ease-out) forwards}
@keyframes sami-treffen{
  0%{transform:none}
  30%{transform:translateX(calc(9px * var(--treff,1))) rotate(calc(4deg * var(--treff,1)))}
  55%{transform:translateX(calc(12px * var(--treff,1))) rotate(calc(5deg * var(--treff,1)))}
  70%{transform:translateX(calc(10px * var(--treff,1))) rotate(calc(4deg * var(--treff,1)))}
  100%{transform:translateX(calc(6px * var(--treff,1))) scale(.94)}
}
.mo-cursor.is-zurueck{opacity:.55}
/* tritt auch über Klickbarem zurück (Links, Knöpfe, Formulare, Spiele), damit er nichts verdeckt (22.10.2026) */
.mo-cursor.is-on.is-ui:not(.is-vereint){opacity:.55}
@media (prefers-reduced-motion:reduce){.mo-cursor.is-vereint{opacity:1}}

/* Amiras Krone: erscheint nur bei ihrer eigenen Reaktion, dann wieder Ruhe. */
.mo-cursor__krone{position:absolute;left:50%;top:-9px;width:26px;height:14px;opacity:0;transform:translateX(-50%) translateY(7px) scale(.75);transition:opacity .45s var(--ease-out),transform .55s cubic-bezier(.2,.9,.25,1);pointer-events:none;
  background:linear-gradient(180deg,#f7d489,#e8b657);
  clip-path:polygon(0% 100%,100% 100%,100% 42%,84% 66%,68% 12%,50% 52%,32% 12%,16% 66%,0% 42%)}
.mo-cursor.is-krone .mo-cursor__krone{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.mo-cursor.is-krone .mo-cursor__body{animation:krone-stolz 1.9s var(--ease-out)}
@keyframes krone-stolz{0%{transform:none}22%{transform:translateY(-4px)}60%{transform:translateY(-3px)}100%{transform:none}}
.mo-cursor__krone::after{content:'✦';position:absolute;right:-8px;top:-6px;font-size:8px;color:#f7d489;opacity:0}
.mo-cursor.is-krone .mo-cursor__krone::after{animation:krone-funke 1.1s var(--ease-out) .35s 1}
@keyframes krone-funke{0%{opacity:0;transform:scale(.5)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.mo-cursor.is-krone .mo-cursor__body,.mo-cursor.is-treffen .mo-cursor__body{animation:none}}

/* Zweitbild: ruhiger persönlicher Moment statt Sticker-Karte */

.member.is-zweit .member__photo{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c-ink) 6%,transparent)}

.member__witz--alt{left:0;right:0;bottom:0;padding:22px 14px 10px;border-radius:0;background:linear-gradient(to top,color-mix(in oklab,var(--c-paper) 92%,transparent) 40%,transparent);font-size:12px;color:color-mix(in oklab,var(--c-ink) 72%,transparent);text-align:center}

/* Faktenleiste: drei eigenständige, ruhige Elemente statt einer Kapsel */
.hero__stats{background:none;backdrop-filter:none;border:0;border-radius:0;padding:0;width:100%;max-width:940px;margin-top:110px;align-items:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hero__stat{text-align:center;max-width:none;padding:18px 20px;border-radius:14px;border:0}
.hero__stat + .hero__stat{border-left:0;padding-left:20px}
.hero__stat:nth-child(1){background:color-mix(in oklab,var(--c-lavender-soft) 62%,var(--c-paper))}
.hero__stat:nth-child(2){background:color-mix(in oklab,var(--c-green-soft) 58%,var(--c-paper))}
.hero__stat:nth-child(3){background:color-mix(in oklab,var(--c-peach-soft) 58%,var(--c-paper))}
.hero__stat strong{font-size:19.5px;color:var(--c-ink);margin-bottom:6px}
.hero__stat span{font-size:13.5px;line-height:1.35;color:color-mix(in oklab,var(--c-ink) 78%,transparent)}
.hero__stat span b{display:block;margin-top:-4px;font-weight:600;color:color-mix(in oklab,var(--c-ink) 90%,transparent)}
@media (max-width:880px){.hero__stats{grid-template-columns:1fr;margin-top:20px;gap:10px}.hero__stat{padding:14px 16px}.hero__stat + .hero__stat{border-top:0;padding-top:14px}}
/* Laptop (03.11.2026, Nutzerhinweis): etwas breiter, damit jeder Titel auf einer Zeile steht
   und nur eine Unterstreichung hat. Ab 1600 px gilt weiter 1180 px (XL-Raster). */
@media (min-width:1180px){.hero__stats{max-width:1120px}}

/* Kleiner Hinweis auf die zweite Ebene und die Plapperegg-Lächel-Linie */
.member__sonst{position:absolute;left:0;right:0;bottom:10px;z-index:3;text-align:center;font-family:var(--ff-body-active);font-size:11.5px;letter-spacing:.02em;color:color-mix(in oklab,var(--c-ink) 52%,transparent);opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease-out) 1.4s,transform .4s var(--ease-out) 1.4s;pointer-events:none}
.member:hover .member__sonst,.member:focus-within .member__sonst,.member.is-open .member__sonst{opacity:1;transform:none}
.member.is-zweit .member__sonst{opacity:0;transition-delay:0s}
.member__smile{position:absolute;left:50%;bottom:34px;width:38px;transform:translateX(-50%);z-index:3;opacity:0;pointer-events:none}
.member__smile path{fill:none;stroke:var(--c-coral);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:44;stroke-dashoffset:44}
.member.is-zweit .member__smile{opacity:1}
.member.is-zweit .member__smile path{animation:smile-zeichnen 1.1s var(--ease-out) forwards}
@keyframes smile-zeichnen{0%{stroke-dashoffset:44;opacity:1}45%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.member.is-zweit .member__zweitbox{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.member.is-zweit .member__smile path{animation:none;opacity:0}}

/* JOBS enger an Mitplappern */
.nav__recruit{gap:4px}
.nav__recruit-tag{margin-left:-1px}

/* Funktionszeile zweizeilig reservieren, damit der Name in jeder Karte gleich hoch startet */
.member__role{height:calc(3 * 1.6em);overflow:hidden}

/* Faktenkarten exakt gleich hoch und gleich gewichtet */
.hero__stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:18px 20px;min-height:96px}
.hero__stat strong{margin-bottom:0;min-height:1.3em;display:flex;align-items:center;justify-content:center}
.hero__stat span{display:block}

/* Krankenkassen-Hinweis: eigener ruhiger Moment unter den Faktenkarten */
.hero__kk{position:relative;max-width:940px;margin:18px auto 0;padding:0 4px;text-align:center;font-family:var(--ff-body-active);font-size:14.5px;line-height:1.5;color:color-mix(in oklab,var(--c-ink) 78%,transparent);opacity:0;transform:translateY(6px);animation:kk-auftauchen .7s var(--ease-out) .5s forwards}
.hero__kk b{font-weight:600;color:var(--c-ink)}
.hero__kk-link{display:inline-block;margin-top:9px;font-size:13.5px;color:color-mix(in oklab,var(--c-ink) 74%,transparent);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-coral) 45%,transparent);padding-bottom:1px;transition:color .25s var(--ease-out),border-color .25s var(--ease-out)}
.hero__kk-link:hover{color:var(--c-ink);border-color:var(--c-coral)}
@keyframes kk-auftauchen{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero__kk{animation:none;opacity:1;transform:none}}
@media (max-width:880px){.hero__stat{min-height:0}.hero__stat strong{min-height:0}.hero__kk{margin-top:16px;font-size:14px}}

/* «Und sonst so?»: deutlicher lesbar, aber weiterhin eine Einladung statt eines Buttons */
.member__sonst{display:flex;flex-direction:column;align-items:center;gap:3px;bottom:12px;font-size:12.5px;letter-spacing:.01em;color:color-mix(in oklab,var(--c-ink) 78%,transparent);text-shadow:0 1px 6px color-mix(in oklab,var(--c-paper) 78%,transparent)}
.member__sonst svg{width:30px;height:7px;overflow:visible}
.member__sonst svg path{fill:none;stroke:var(--c-coral);stroke-width:1.6;stroke-linecap:round}
.member.is-zweit .member__sonst{opacity:0}
/* Touch: nach dem ersten Tap bleibt der Hinweis deutlich sichtbar stehen */
@media (hover:none){.member.is-open .member__sonst{opacity:1;transform:none;font-size:13px;color:var(--c-ink);background:color-mix(in oklab,var(--c-paper) 88%,transparent);padding:5px 12px;border-radius:999px;left:50%;right:auto;width:max-content;transform:translateX(-50%);box-shadow:0 2px 10px rgba(40,30,60,.1)}}

/* Hero-Abschluss: nach dem Infoblock ruhige, aber nicht überdehnte Luft */
.hero{padding-bottom:62px}
@media (max-width:880px){.hero{padding-bottom:48px}}

/* Mitplappern: «Was du bei uns findest» als breiter Arbeitgeberblock */
.jobwide,.breit{width:min(1080px,92vw);margin-inline:calc(50% - min(540px,46vw));margin-top:56px}
.jobwide h2,.breit h2{margin-bottom:14px}
.breit__lede{max-width:60ch;margin-bottom:26px;color:color-mix(in oklab,var(--c-ink) 72%,transparent)}
.jobwide .featuregrid,.breit .featuregrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.jobwide .feature,.breit .feature{padding:26px 24px 24px}
.jobwide .feature__mascot,.breit .feature__mascot{width:74px;height:74px;margin-bottom:12px;transform:rotate(-2deg)}
.jobwide .feature h3,.breit .feature h3{margin-bottom:8px}
.jobwide .feature p,.breit .feature p{font-size:16px;line-height:1.55}
/* Weitere Benefits: ruhige Editorial-Kacheln statt Feature-Liste */
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 0;margin-top:30px;border-top:1px solid color-mix(in oklab,var(--c-ink) 9%,transparent)}
.benefit{position:relative;padding:20px 22px 20px 0;font-family:var(--ff-body-active);font-size:16px;color:color-mix(in oklab,var(--c-ink) 84%,transparent);border-bottom:1px solid color-mix(in oklab,var(--c-ink) 9%,transparent);transition:color .25s var(--ease-out),padding-left .3s var(--ease-out)}
.benefit__strich{display:block;width:20px;height:2px;border-radius:2px;margin-bottom:11px;background:color-mix(in oklab,var(--c-teal) 55%,transparent);transition:width .3s var(--ease-out),background .3s var(--ease-out)}
.benefit:nth-child(3n+2) .benefit__strich{background:color-mix(in oklab,var(--c-coral) 52%,transparent)}
.benefit:nth-child(3n) .benefit__strich{background:color-mix(in oklab,var(--c-lavender) 62%,transparent)}
.benefit:hover{color:var(--c-ink)}
.benefit:hover .benefit__strich{width:34px}
.benefits__fuss{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:22px;font-size:14px;color:color-mix(in oklab,var(--c-ink) 58%,transparent)}
.benefits__fuss strong{font-family:var(--ff-display-active);font-weight:600;font-size:15px;color:var(--c-ink)}
@media (max-width:880px){.jobwide,.breit{width:100%;margin-inline:0;margin-top:40px}.jobwide .featuregrid,.breit .featuregrid,.benefits{grid-template-columns:1fr}.jobwide .feature__mascot{width:64px;height:64px}}
@media (min-width:881px) and (max-width:1100px){.jobwide .feature,.breit .feature{padding:22px 18px}.jobwide .feature p,.breit .feature p{font-size:15px}.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Geschichte: feiner Sprachfaden statt Corporate-Timeline */
.zeitfaden{margin-top:72px;position:relative}
.zeitfaden__linie{display:block;width:100%;height:26px;margin:6px 0 -4px;overflow:visible}
.zeitfaden__linie path{fill:none;stroke:color-mix(in oklab,var(--c-lavender) 70%,transparent);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.7,.3,1)}
.zeitfaden[data-mo].mo-in .zeitfaden__linie path,.zeitfaden.mo-in .zeitfaden__linie path{stroke-dashoffset:0}
.zeitfaden__reihe{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 30px;margin:0;padding:0}
.zeitfaden__reihe li{position:relative;padding-top:22px}
.zeitfaden__reihe li::before{content:"";position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:var(--c-coral);opacity:.75}
.zeitfaden__jahr{display:block;font-family:var(--ff-display-active);font-size:26px;line-height:1.1;color:var(--c-ink)}
.zeitfaden__ort{display:block;margin-top:2px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in oklab,var(--c-ink) 52%,transparent)}
.zeitfaden__txt{display:block;margin-top:9px;font-size:14.5px;line-height:1.55;color:color-mix(in oklab,var(--c-ink) 74%,transparent);max-width:32ch}
@media (max-width:880px){.zeitfaden{margin-top:52px}.zeitfaden__linie{display:none}.zeitfaden__reihe{grid-template-columns:1fr;gap:24px}}
/* kleine Nebensätze mit Plapperegg-Ton: leiser als der Fliesstext */
.plpg-nebensatz{font-size:15px;color:color-mix(in oklab,var(--c-ink) 58%,transparent);border-left:0;font-style:normal}

/* Hover: der Kritzelstrich zeichnet minimal weiter */
.kp-tab .kp-tab__kritzel{transition:transform .3s var(--ease-out)}
.kp-tab.is-da:hover .kp-tab__kritzel{transform:translateX(1px) scale(1.06)}

/* Optische Mitte der Figuren in Karten: jede Form sitzt anders im Bild */
.feature__mascot[src$="frosch.png"]{transform:translateY(2%) rotate(-2deg) scale(1.02)}
.feature__mascot[src$="papagei.png"]{transform:translate(2%,1%) rotate(-2deg)}
.feature__mascot[src$="elefant.png"]{transform:translate(-1%,2%) rotate(-2deg) scale(.97)}
.feature__mascot[src$="rosabaer.png"]{transform:translateY(1%) rotate(-2deg) scale(.98)}
.feature__mascot[src$="kueken.png"]{transform:translateY(4%) rotate(-2deg) scale(1.04)}
.feature__mascot[src$="fuchs.png"]{transform:translate(1%,2%) rotate(-2deg)}
.feature__mascot[src$="koala.png"]{transform:translateY(2%) rotate(-2deg)}
.feature__mascot[src$="schwein.png"]{transform:translateY(2%) rotate(-2deg) scale(1.01)}
.feature__mascot[src$="maus.png"]{transform:translateY(3%) rotate(-2deg) scale(1.03)}

/* ---------- Responsive-QA ---------- */
/* Mobile: gestapelte Faktenkarten gleich hoch, Footer bricht sauber um */
@media (max-width:880px){.hero__stats{grid-auto-rows:1fr}.hero__stat{height:100%}}
@media (max-width:880px){.footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.footer__top{grid-template-columns:minmax(0,1fr);gap:28px}}
/* dekorative Hero-Blobs auf kleinen Screens reduzieren statt quetschen */
.hero{overflow:hidden}
@media (max-width:640px){.hero__blob--3{display:none}}

/* ---------- XL-Raster ab 1600px ---------- */
@media (min-width:1600px){
  .hero__inner,.section__inner,.footer__inner{max-width:1480px}
  .prose{max-width:740px}
  .prose p{font-size:17.5px}
  .prose h2{font-size:clamp(30px,2.1vw,38px)}
  .hero__stats{max-width:1180px}
  .jobwide,.breit{width:min(1320px,86vw);margin-inline:calc(50% - min(660px,43vw))}
  .jobwide .featuregrid,.breit .featuregrid{gap:24px}
  .benefits{gap:2px 24px}
  .team{gap:28px}
  .section{padding-block:clamp(96px,7vw,132px)}
}
@media (min-width:1900px){
  .hero__inner,.section__inner,.footer__inner{max-width:1560px}
}

/* Tablet hochkant: Karten zweispaltig statt sehr breit und flach */
@media (min-width:660px) and (max-width:880px){
  .jobwide .featuregrid,.breit .featuregrid,.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zeitfaden__reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
}

/* Anfrage-Formular: kein Überlaufen auf schmalen Screens */
@media (max-width:880px){.contact{grid-template-columns:minmax(0,1fr);padding:32px 22px}.contact__row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.contact{border-radius:24px;padding:28px 18px}}
.contact__row{grid-template-columns:repeat(2,minmax(0,1fr))}

/* FAQ-Teaser auf der Startseite: ruhiger, kleiner, ohne zweiten Hero */
.faq-teaser .section__title{font-size:clamp(28px,2.6vw,40px);line-height:1.12}
.faq-teaser .section__lede{max-width:44ch}
.faq-teaser .faq__sticky{align-self:start;opacity:.9}
.faq-teaser .faq__item{border-radius:14px;padding:6px 4px;transition:background .25s var(--ease-out)}
.faq-teaser .faq__item:hover,.faq-teaser .faq__item:focus-within{background:color-mix(in oklab,var(--c-lavender-soft) 46%,transparent)}
.faq-teaser .faq__item.is-open{background:color-mix(in oklab,var(--c-lavender-soft) 62%,transparent)}
.faq-teaser .faq__q{font-size:17px;padding:16px 16px}
.faq-teaser .faq__a{padding:0 16px 16px;font-size:15.5px;line-height:1.6}
/* Plus/Minus als feiner Strich statt UI-Button */
.faq__plus{position:relative;width:18px;height:18px;min-width:18px;border:0;background:none;border-radius:0;flex:none;font-size:0;transform:none!important}
.faq__item.is-open .faq__plus{background:none;color:transparent}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;border-radius:2px;background:color-mix(in oklab,var(--c-ink) 45%,transparent);transform:translate(-50%,-50%);transition:transform .3s var(--ease-out),background .3s var(--ease-out)}
.faq__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item.is-open .faq__plus::after{transform:translate(-50%,-50%) rotate(0)}
.faq__item.is-open .faq__plus::before,.faq__item.is-open .faq__plus::after{background:var(--c-coral)}
.faq-teaser .team__mehr{margin-top:22px}

/* Standortseite: zwei Ortsporträts statt Adressverzeichnis */
.orte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;width:min(1240px,92vw);margin:0 auto;padding:8px 0 4px}
.ort{display:flex;flex-direction:column;gap:22px;padding:32px 30px 30px;border-radius:26px}
.ort--teal{background:color-mix(in oklab,var(--c-teal-soft) 52%,var(--c-paper))}
.ort--lavender{background:color-mix(in oklab,var(--c-lavender-soft) 52%,var(--c-paper))}
.ort__name{font-family:var(--ff-display-active);font-size:clamp(26px,2.2vw,34px);line-height:1.1;margin:0 0 10px;color:var(--c-ink)}
.ort__name{color:color-mix(in oklab,var(--c-coral) 78%,var(--c-ink))}
.ort__zusatz{font-size:.55em;font-weight:400;color:color-mix(in oklab,var(--c-ink) 52%,transparent)}
.ort__addr{margin:0;font-size:16px;line-height:1.55;color:color-mix(in oklab,var(--c-ink) 82%,transparent)}
.ort__termine{margin:8px 0 0;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;color:color-mix(in oklab,var(--c-ink) 48%,transparent)}
.ort__blick-titel{margin:0 0 10px;font-family:var(--ff-display-active);font-size:15px;color:color-mix(in oklab,var(--c-ink) 62%,transparent)}
/* Geometrie der Dreierreihe steht gebündelt weiter unten («Echte Praxisbilder») —
   hier bewusst keine zweite Höhenregel mehr (sonst tote Fläche unter den Bildern). */
.ort__wege{display:grid;gap:10px;margin:0}
.ort__wege>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:baseline}
.ort__wege dt{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in oklab,var(--c-ink) 50%,transparent)}
.ort__wege dd{margin:0;font-size:15px;line-height:1.5;color:color-mix(in oklab,var(--c-ink) 80%,transparent);text-wrap:pretty}
.ort__maps{font-weight:600;color:var(--c-ink);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-coral) 45%,transparent)}
.ort__maps:hover{border-color:var(--c-coral)}
@media (max-width:880px){.ort__wege>div{grid-template-columns:1fr;gap:2px}}
@media (max-width:880px){.orte{grid-template-columns:1fr;gap:18px;width:100%;padding-inline:20px}.ort{padding:26px 22px;border-radius:22px}}
@media (min-width:1600px){.orte{width:min(1480px,88vw);gap:36px}}

/* Startseite: Standorte nur als kompakter Teaser */
.section .locations{gap:20px}

/* Begleiter-Auswahl: drei Ebenen statt Metadaten-Block */
.buddy__meta strong{display:block;font-family:var(--ff-display-active);font-size:16px;color:var(--c-ink)}
.buddy__meta span{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:color-mix(in oklab,var(--c-ink) 66%,transparent)}
.buddy__meta span em{font-style:normal;color:var(--c-ink)}
.buddy__mehr{margin-top:8px;border:0;background:none;padding:0;font-family:var(--ff-body-active);font-size:12.5px;color:color-mix(in oklab,var(--c-ink) 46%,transparent);cursor:pointer;transition:color .25s var(--ease-out)}
.buddy__mehr:hover{color:var(--c-ink)}
.buddy__bio{display:none;margin:8px 0 0;font-size:12.5px;line-height:1.5;color:color-mix(in oklab,var(--c-ink) 58%,transparent)}
.buddy__meta.is-mehr .buddy__bio{display:block}

/* ---------- Kritzelpause: ein Blatt aus demselben Papier wie der Tab ---------- */
.kp{left:16px;width:min(300px,82vw);background:linear-gradient(101deg,color-mix(in oklab,var(--c-yellow-soft) 34%,var(--c-paper)),color-mix(in oklab,var(--c-paper) 98%,var(--c-yellow-soft)));border-radius:3px 16px 12px 4px;box-shadow:0 2px 6px rgba(40,30,60,.06),0 16px 40px rgba(40,30,60,.12);padding:15px 16px 14px}
.kp::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;background:color-mix(in oklab,var(--c-coral) 42%,transparent);clip-path:polygon(0 0,100% 2%,55% 18%,100% 34%,50% 52%,100% 68%,60% 84%,100% 96%,0 100%)}
.kp::after{content:"";position:absolute;right:0;bottom:0;width:16px;height:16px;border-bottom-right-radius:12px;background:linear-gradient(135deg,transparent 46%,color-mix(in oklab,var(--c-ink) 11%,transparent) 47%,color-mix(in oklab,var(--c-paper) 96%,transparent) 51%)}
/* Blatt entfaltet sich beim Öffnen einmal sehr subtil */
.kp{transform:translateY(8px) rotate(-1.4deg) scale(.985)}
.kp.is-offen{transform:rotate(-.6deg) scale(1)}
/* Zeichenfläche ohne Rahmen: einfach freie Fläche des Blattes */
.kp__feld{background:none;box-shadow:none;border-radius:0;height:158px}
.kp__feld canvas{cursor:crosshair}
.kp__kopf{margin-bottom:4px}
.kp__impuls{font-size:15.5px;color:color-mix(in oklab,var(--c-ink) 78%,transparent)}
.kp__zu{font-size:16px}
.kp__tools{margin-top:6px}
.kp__info{width:17px;height:17px;border-radius:50%;font-size:10.5px;line-height:17px;text-align:center;font-style:italic;color:color-mix(in oklab,var(--c-ink) 40%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c-ink) 18%,transparent)}
.kp__info:hover{color:var(--c-ink);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c-ink) 34%,transparent)}
@media (prefers-reduced-motion:reduce){.kp{transform:none}.kp.is-offen{transform:none}}

/* Ruhe-Einstellungen: drei gleichwertige Schalter mit sichtbarem Zustand */
.buddy__ruhe{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:0;padding-top:0;border-top:0}
.buddy__ruhe .buddy__sw{padding:6px 10px;font-size:12px;border-radius:8px}
.buddy__ruhe .buddy__sw-z{font-size:10.5px;gap:5px}
.buddy__ruhe .buddy__sw-z::before{width:7px;height:7px}
.buddy__sw{display:inline-flex;align-items:center;gap:6px;width:auto;border:0;border-radius:10px;padding:8px 11px;font-family:var(--ff-body-active);font-size:13px;cursor:pointer;text-align:left;transition:background .25s var(--ease-out),color .25s var(--ease-out)}
.buddy__sw-n{color:var(--c-ink)}
.buddy__sw-z{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.buddy__sw-z::before{content:"";width:8px;height:8px;border-radius:50%}
.buddy__sw.is-an{background:color-mix(in oklab,var(--c-teal-soft) 58%,var(--c-paper))}
.buddy__sw.is-an .buddy__sw-z{color:color-mix(in oklab,var(--c-ink) 62%,transparent)}
.buddy__sw.is-an .buddy__sw-z::before{background:var(--c-teal)}
.buddy__sw.is-aus{background:color-mix(in oklab,var(--c-ink) 6%,transparent)}
.buddy__sw.is-aus .buddy__sw-n{color:color-mix(in oklab,var(--c-ink) 48%,transparent)}
.buddy__sw.is-aus .buddy__sw-z{color:color-mix(in oklab,var(--c-ink) 40%,transparent)}
.buddy__sw.is-aus .buddy__sw-z::before{background:color-mix(in oklab,var(--c-ink) 22%,transparent)}
.buddy__still{margin-top:0}
.buddy__still.is-an{background:color-mix(in oklab,var(--c-lavender-soft) 74%,var(--c-paper))}
.buddy__still.is-an .buddy__sw-z::before{background:var(--c-lavender)}
@media (max-width:760px){.buddy__sw{padding:9px 11px;font-size:13px}}

/* Drei-Karten-Bereich: Figuren grösser und freier, Reaktion beim Berühren */
.featuregrid .feature{position:relative;overflow:hidden}
.featuregrid .feature__mascot{width:86px;height:86px;margin-bottom:10px;transition:transform .5s cubic-bezier(.3,.8,.3,1)}
.featuregrid .feature:hover .feature__mascot,.featuregrid .feature:focus-within .feature__mascot{transform:translateY(-5px) rotate(-3.5deg) scale(1.06)}
/* sehr weicher Farbimpuls aus der Ecke, in der die Figur sitzt */
.featuregrid .feature::after{content:"";position:absolute;left:-40px;top:-52px;width:190px;height:190px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.85);background:radial-gradient(circle,color-mix(in oklab,var(--c-coral) 22%,transparent),transparent 68%);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.featuregrid .feature:nth-child(3n+2)::after{background:radial-gradient(circle,color-mix(in oklab,var(--c-teal) 20%,transparent),transparent 68%)}
.featuregrid .feature:nth-child(3n)::after{background:radial-gradient(circle,color-mix(in oklab,var(--c-lavender) 26%,transparent),transparent 68%)}
.featuregrid .feature:hover::after,.featuregrid .feature:focus-within::after{opacity:.55;transform:scale(1)}
@media (prefers-reduced-motion:reduce){.featuregrid .feature::after{transition:none}.featuregrid .feature:hover .feature__mascot{transform:none}}
@media (max-width:760px){.featuregrid .feature__mascot{width:76px;height:76px}}

/* ---------- Figuren sollen leben, nicht animiert wirken ---------- */
/* Grundatmung: sehr langsam, kaum messbar, mit langen Ruhephasen */
@keyframes fig-atem{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-2.5px) scale(1.008)}}
@keyframes fig-atem-lang{0%,72%,100%{transform:translateY(0) scale(1)}86%{transform:translateY(-3px) scale(1.01)}}
@keyframes fig-auftauchen{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Für-Eltern-Hero: der Bär atmet, sonst bleibt er ruhig — Augen bleiben zu */
.pagehero--quiet .pagehero__bleed{animation:fig-auftauchen .9s var(--ease-out) both,fig-atem 9s 1s ease-in-out infinite}
.pagehero__mascot img{animation:fig-auftauchen .8s var(--ease-out) both,fig-atem-lang 11s 1.2s ease-in-out infinite}
/* Headline wieder zweizeilig auf normalen Desktopbreiten */
.pagehero--quiet .pagehero__title{font-size:clamp(34px,4.2vw,60px);max-width:22ch;text-wrap:balance}

/* Peek-Tiere: leichter Tiefeneindruck und jede Figur mit eigenem Rhythmus */
.mo-peek{filter:drop-shadow(0 10px 18px rgba(40,30,60,.16))}
.mo-peek img{animation:fig-atem-lang 13s ease-in-out infinite}
.mo-peek:nth-of-type(2n) img{animation-duration:16s;animation-delay:2.4s}
.mo-peek:nth-of-type(3n) img{animation-duration:19s;animation-delay:5.1s}

/* Mitmach- und Kartenfiguren atmen nicht mit — sonst bewegt sich alles gleichzeitig */
@media (prefers-reduced-motion:reduce){
  .pagehero--quiet .pagehero__bleed,.pagehero__mascot img,.mo-peek img{animation:none}
}

/* ---------- «Was du bei uns findest»: editoriale, asymmetrische Komposition ---------- */
.arbeitswelt h2{margin-bottom:30px}
.aw__komposition{display:grid;grid-template-columns:1.32fr 1fr;grid-template-rows:auto auto;gap:22px;align-items:stretch}
.aw__karte{position:relative;border-radius:24px;padding:34px 32px 30px;overflow:hidden;transition:background .45s var(--ease-out)}
.aw__karte h3{font-family:var(--ff-display-active);font-weight:600;letter-spacing:-.01em;margin:0 0 10px;color:var(--c-ink)}
.aw__karte p{margin:0;line-height:1.6;color:color-mix(in oklab,var(--c-ink) 76%,transparent)}
/* Kernbotschaft: trägt die wichtigste Aussage. Der Frosch sitzt im Text mit,
   unten rechts auf der Kartenkante, und ist bewusst gross. */
.aw__karte--gross{grid-row:span 2;display:grid;grid-template-rows:auto auto 1fr;min-height:360px;padding:42px 40px 36px;background:color-mix(in oklab,var(--c-green-soft) 52%,var(--c-paper))}
.aw__karte--gross h3{font-size:clamp(28px,2.6vw,38px);line-height:1.08;margin-bottom:16px;max-width:15ch}
.aw__karte--gross p{font-size:17px;max-width:27ch}
.aw__karte--gross .aw__figur{position:absolute;right:-14px;bottom:-18px;width:198px;transform:rotate(-4deg);transform-origin:70% 100%}
/* Beide kleinen Karten folgen derselben Logik: Text links, Figur rechts unten
   mit klarem Innenabstand, keine Figur klebt am Rand. */
.aw__karte--klein{display:flex;flex-direction:column;justify-content:center;min-height:172px;padding:30px 150px 30px 30px;background:color-mix(in oklab,var(--c-peach-soft) 44%,var(--c-paper))}
.aw__karte--klein:last-of-type{background:color-mix(in oklab,var(--c-lavender-soft) 46%,var(--c-paper))}
.aw__karte--klein h3{font-size:20.5px;line-height:1.2}
.aw__karte--klein p{font-size:16px;max-width:30ch}
/* Grössen nach wahrgenommener Masse, nicht nach gleicher Pixelhöhe:
   Papagei (Deckung 46,5 %) grösser, Elefant (76,1 %) kleiner gesetzt. */
.aw__karte--klein .aw__figur{position:absolute;right:18px;bottom:14px;width:104px}
.aw__karte--klein:last-of-type .aw__figur{width:118px;right:12px;bottom:20px}
.aw__figur{transition:transform .55s cubic-bezier(.3,.8,.3,1)}
/* Hover: etwas mehr Farbe, kleine charakterbezogene Regung */
.aw__karte--gross:hover{background:color-mix(in oklab,var(--c-green-soft) 74%,var(--c-paper))}
.aw__karte--gross:hover .aw__figur{transform:rotate(-4deg) translateY(-7px)}
.aw__karte--klein:hover{background:color-mix(in oklab,var(--c-peach-soft) 64%,var(--c-paper))}
.aw__karte--klein:hover .aw__figur{transform:rotate(4deg) translateY(-3px)}
.aw__karte--klein:last-of-type:hover{background:color-mix(in oklab,var(--c-lavender-soft) 68%,var(--c-paper))}
.aw__karte--klein:last-of-type:hover .aw__figur{transform:translateX(-5px) rotate(-2deg)}
/* Die frühere Benefit-Zeile (.aw__benefits) ist entfernt (31.08.2026):
   «Teilzeit und flexible Pensen» steht jetzt in der Karte «Zeit für gute Therapie». */
/* Abschluss: eigener kleiner Moment, nicht die Fussnote der Liste — und bewusst
   flacher als die Karten oben, damit er nicht als vierte Karte gelesen wird. */
.aw__abschluss{position:relative;display:flex;align-items:center;gap:18px;margin:52px 0 0;padding:18px 22px 18px 0;border-radius:0;background:none;border-top:1px solid color-mix(in oklab,var(--c-ink) 11%,transparent)}
.aw__abschluss img{width:54px;flex:none;transform:rotate(-4deg)}
.aw__abschluss strong{display:block;font-family:var(--ff-display-active);font-weight:600;font-size:17.5px;color:var(--c-ink)}
.aw__abschluss span{font-size:14.5px;line-height:1.5;color:color-mix(in oklab,var(--c-ink) 70%,transparent)}
@media (max-width:980px){
  .aw__komposition{grid-template-columns:1fr}
  .aw__karte--gross{grid-row:auto;min-height:0;padding:36px 28px 30px}
  .aw__karte--gross .aw__figur{width:140px;right:-8px;bottom:-12px}
  .aw__karte--klein{padding-right:132px}
}
@media (max-width:560px){.aw__abschluss{flex-direction:column;align-items:flex-start;gap:12px}}
@media (prefers-reduced-motion:reduce){.aw__figur,.aw__karte{transition:none}.aw__karte:hover .aw__figur{transform:none}}

/* ---------- Ausserkantonale Anfragen: Zwischenschritt im Formular ---------- */
.ak{margin:0 0 22px;padding:26px 26px 24px;border-radius:20px;background:color-mix(in oklab,var(--c-lavender-soft) 46%,var(--c-paper));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c-ink) 8%,transparent)}
.ak__titel{margin:0 0 10px;font-family:var(--ff-display-active);font-size:20px;font-weight:600;color:var(--c-ink)}
.ak p{margin:0 0 14px;font-size:15px;line-height:1.6;color:color-mix(in oklab,var(--c-ink) 78%,transparent)}
.ak__status{list-style:none;display:grid;gap:6px;margin:0 0 16px;padding:0}
.ak__status li{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:14px;color:color-mix(in oklab,var(--c-ink) 70%,transparent)}
.ak__status strong{color:var(--c-ink)}
.ak__wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* nur ein Weg (Erwachsene, seit 22.10.2026): über die volle Breite */
.ak__weg:only-child{grid-column:1/-1}
.ak__weg{display:flex;flex-direction:column;gap:5px;text-align:left;font-family:inherit;border:0;border-radius:14px;padding:16px 18px;cursor:pointer;background:var(--c-paper);box-shadow:0 2px 8px rgba(40,30,60,.06);transition:background .25s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.ak__weg strong{font-family:var(--ff-display-active);font-size:15.5px;color:var(--c-ink)}
.ak__weg span{font-size:13.5px;line-height:1.45;color:color-mix(in oklab,var(--c-ink) 62%,transparent)}
.ak__weg:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(40,30,60,.1)}
.ak__weg.is-on{background:var(--c-paper);box-shadow:0 0 0 2px color-mix(in oklab,var(--c-coral) 70%,transparent)}
.ak__hinweis{margin-top:16px;padding-top:16px;border-top:1px solid color-mix(in oklab,var(--c-ink) 12%,transparent)}
.ak__hinweis strong{display:block;margin-bottom:6px;font-family:var(--ff-display-active);font-size:15.5px;color:var(--c-ink)}
.ak__hinweis a{color:var(--c-ink);text-decoration:underline;text-underline-offset:3px}
.ak__klein{font-size:13px!important;color:color-mix(in oklab,var(--c-ink) 55%,transparent)!important}
@media (max-width:760px){.ak{padding:20px 18px}.ak__wege{grid-template-columns:1fr}}

/* Silben klatschen: Wortwechsel benennen statt Punkte zeigen */
.wortwahl{display:flex;align-items:center;gap:14px}
.wortwahl__zaehler{font-family:var(--ff-body-active);font-size:13px;letter-spacing:.03em;color:color-mix(in oklab,var(--c-ink) 52%,transparent)}
.wortwahl__weiter{border:0;background:none;padding:4px 0;font-family:var(--ff-display-active);font-size:14.5px;font-weight:600;color:var(--c-ink);cursor:pointer;border-bottom:1px solid color-mix(in oklab,var(--c-coral) 45%,transparent);transition:border-color .25s var(--ease-out)}
.wortwahl__weiter:hover{border-color:var(--c-coral)}
/* Standortnamen: gleiche Schrift wie überall, Koralle nur als Akzent */
.ort__name{color:color-mix(in oklab,var(--c-coral) 78%,var(--c-ink))}

.location__name,.location__name *{font-family:var(--ff-display-active)!important;font-style:normal!important}
.location__name{color:color-mix(in oklab,var(--c-coral) 78%,var(--c-ink))}
.location__name .location__zusatz{font-size:.55em;color:color-mix(in oklab,var(--c-ink) 74%,transparent)}

/* Über uns: Figuren etwas grösser, mehr Luft vor der Geschichte */
.breit .feature__mascot{width:96px;height:96px;margin-bottom:14px}
@media (max-width:760px){.breit .feature__mascot{width:82px;height:82px}}
.zeitfaden{margin-top:104px}
.zeitfaden__linie path{stroke-width:1.9;stroke:color-mix(in oklab,var(--c-lavender) 82%,transparent)}
.zeitfaden__reihe li::before{width:9px;height:9px;opacity:1;box-shadow:0 0 0 4px color-mix(in oklab,var(--c-coral) 14%,transparent)}
@media (max-width:880px){.zeitfaden{margin-top:64px}}

/* Standort-Teaser: kompakt, solange keine Praxisfotos da sind */
.section .locations .location{padding:24px 26px 20px;min-height:0}
.location__name{font-size:29px;margin:0 0 4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.location__zusatz{font-size:15px;color:color-mix(in oklab,var(--c-ink) 62%,transparent)}
.location__addr{font-size:16px;line-height:1.5;color:color-mix(in oklab,var(--c-ink) 82%,transparent);margin:0}
.location__link{display:inline-block;margin-top:14px;font-family:var(--ff-display-active);font-size:14.5px;font-weight:600;color:var(--c-ink);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-coral) 45%,transparent);transition:border-color .25s var(--ease-out)}
.location__link:hover{border-color:var(--c-coral)}

/* Kritzelpause: das Blatt zieht sich aus dem Lesezeichen heraus */
.kp{transform-origin:8px calc(100% + 46px);transform:translateY(6px) rotate(-2.6deg) scale(.9);transition:opacity .3s var(--ease-out),transform .52s cubic-bezier(.22,.95,.3,1)}
.kp.is-offen{transform:rotate(-.6deg) scale(1)}
.kp{box-shadow:0 1px 3px rgba(40,30,60,.04),0 22px 50px -14px rgba(40,30,60,.16)}
/* Papierform minimal unregelmässig */
.kp{border-radius:3px 18px 10px 5px}
/* Bedienelemente zurückhaltender */
.kp__zu{opacity:.42;transition:opacity .25s var(--ease-out),color .25s var(--ease-out)}
.kp__zu:hover{opacity:1}
.kp__loeschen{font-size:12px;color:color-mix(in oklab,var(--c-ink) 40%,transparent)}
.kp__info{opacity:.55}
.kp__info:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.kp,.kp.is-offen{transform:none;transition:none}}

/* Geschäftsführung als eigene Zweiergruppe statt zwei Plätze eines Vierer-Rasters */
/* Leitung läuft auf denselben Spuren wie das Team, sitzt aber mittig statt links */
.team--leitung{grid-template-columns:repeat(4,minmax(0,1fr))}
.team--leitung .member:first-child{grid-column:2}
@media (max-width:880px){.team--leitung{grid-template-columns:repeat(2,minmax(0,1fr))}.team--leitung .member:first-child{grid-column:auto}}
/* «Und sonst so?» ist auf Touch der sichtbare Auslöser */
.member__sonst{border:0;background:none;cursor:pointer;font-family:var(--ff-body-active)}
@media (hover:none){.member__sonst{pointer-events:auto}}
@media (hover:hover){.member__sonst{pointer-events:none}}
.member:hover .member__sonst,.member.is-open .member__sonst{pointer-events:auto}

/* Name zweizeilig reservieren: gleiche Kartenhöhe unabhängig von der Namenslänge */
.member__name{height:calc(2 * 1.36em);display:block}

/* ---------- FAQ: Antwort öffnet im normalen Fluss, ohne Abschneiden ---------- */
.faq__a{max-height:none!important;display:grid;grid-template-rows:0fr;overflow:hidden;margin-top:0!important;transition:grid-template-rows .38s var(--ease-out),margin-top .38s var(--ease-out)}
.faq__a-in{min-height:0;overflow:hidden}
.faq__item.is-open .faq__a{grid-template-rows:1fr;margin-top:14px!important}
.faq__item{padding:20px 0}
.faq__q{align-items:flex-start;gap:20px}
/* Volle FAQ-Seite: eine Spalte, gute Lesebreite, früher Start */
.faq-seite .faq{grid-template-columns:minmax(0,1fr);width:min(900px,100%);margin:0 auto;gap:0}
.faq-seite .section__inner{padding-top:0}
.faq-seite{padding-top:18px}
.faq-seite .faq__q{font-size:19px;line-height:1.35;padding:18px 4px}
.faq-seite .faq__a{font-size:16px;line-height:1.65}
.faq-seite .faq__a-in{padding:0 4px}
.faq__item.is-open .faq__a-in{padding-bottom:4px}
.faq-seite .faq__item{border-radius:12px;transition:background .25s var(--ease-out)}
.faq-seite .faq__item:hover{background:color-mix(in oklab,var(--c-lavender-soft) 34%,transparent)}
.faq-seite .faq__item.is-open{background:color-mix(in oklab,var(--c-lavender-soft) 52%,transparent)}
.faq-seite .faq__item:hover,.faq-seite .faq__item.is-open{padding-inline:12px}
@media (max-width:760px){.faq-seite .faq__q{font-size:17.5px;padding:16px 2px}}

/* Sicherheitsnetz: FAQ-Einträge sind immer sichtbar, unabhängig vom Reveal */
.faq__item[data-mo],.faq__item{opacity:1!important;transform:none!important}

/* «Was uns wichtig ist» — eine Kartenfamilie, drei Persönlichkeiten.
   Gemessen am tatsächlichen Deckungsanteil der drei Dateien (Frosch 51,6 %, Bär 78,7 %,
   Papagei 46,5 % der Bildfläche): gleiche Pixelhöhe hätte den Bären klar dominieren lassen.
   Die Scale-Werte gleichen die sichtbare Tintenfläche an, nicht die Box.
   Vertikal sind die Figuren auf eine gemeinsame Standlinie gesetzt (Unterkante der Figur,
   nicht der Datei), damit der Abstand Figur → Titel in allen drei Karten gleich gross ist. */
/* Kein seitliches Kartenpadding: die Textbreite selbst ist der Rand, dadurch ist
   der Textblock exakt 78 % der Kartenbreite und in jeder Karte identisch. */
.breit .feature{display:grid;grid-template-rows:152px auto 1fr;padding:32px 0 30px}
/* Illustrationszone: fixe Höhe, Figuren auf gemeinsamer Standlinie 12 px über der Zonenkante.
   Die translateY-Werte sind aus der gemessenen transparenten Unterkante jeder Datei gerechnet
   (Frosch 462 px, Bär 33 px, Papagei 348 px bei 2426 px Dateihöhe), nicht geschätzt. */
.breit .feature__mascot{grid-row:1;align-self:end;justify-self:center;width:auto;height:132px;max-width:100%;object-fit:contain;display:block;margin:0;transform-origin:50% 50%;transition:transform .5s var(--ease-out)}
/* Scale gleicht die wahrgenommene Tintenfläche an: gemessener Deckungsanteil
   Frosch 51,5 %, Bär 78,6 %, Papagei 46,5 % → 1 / sqrt(Anteil), danach je Figur
   um wenige Prozent korrigiert (der satte runde Bär wirkt schwerer als er misst). */
.breit .feature__mascot[src$="frosch.png"]{transform:translateY(13.1px) scale(1) rotate(-1deg)}
.breit .feature__mascot[src$="rosabaer.png"]{transform:translateY(3.9px) scale(.78)}
.breit .feature__mascot[src$="papagei.png"]{transform:translateY(3.6px) scale(1.07) rotate(-2deg)}
/* Idle-Reaktion je Charakter: einmalig, kein Loop */
.breit .feature:hover .feature__mascot[src$="frosch.png"],.breit .feature:focus-visible .feature__mascot[src$="frosch.png"]{transform:translateY(10.6px) scale(1.015) rotate(-1deg)}
.breit .feature:hover .feature__mascot[src$="rosabaer.png"],.breit .feature:focus-visible .feature__mascot[src$="rosabaer.png"]{transform:translateY(2.9px) scale(.792)}
.breit .feature:hover .feature__mascot[src$="papagei.png"],.breit .feature:focus-visible .feature__mascot[src$="papagei.png"]{transform:translateY(3.6px) scale(1.07) rotate(-5deg)}
/* Ein einheitlich breiter Textblock, exakt in der Karte zentriert.
   Der Text darin bleibt linksbündig: zentrierter Fliesstext liest sich schlechter. */
.breit .feature h3,.breit .feature p{width:78%;margin-inline:auto;text-align:left}
.breit .feature__mascot{grid-column:1}
.breit .feature h3{grid-row:2;margin:16px auto 8px;font-size:22.5px;font-weight:600;line-height:1.22;min-height:calc(2 * 1.22em)}
.breit .feature p{grid-row:3;margin:0 auto;font-size:15.5px;line-height:1.55;color:color-mix(in oklab,var(--c-ink) 84%,transparent);max-width:none;text-wrap:pretty}
@media (max-width:760px){.breit .feature{grid-template-rows:126px auto 1fr}.breit .feature__mascot{height:106px}.breit .feature__mascot[src$="frosch.png"]{transform:translateY(10.5px) scale(1) rotate(-1deg)}.breit .feature__mascot[src$="rosabaer.png"]{transform:translateY(3.1px) scale(.78)}.breit .feature__mascot[src$="papagei.png"]{transform:translateY(2.9px) scale(1.07) rotate(-2deg)}.breit .feature h3{font-size:21px;min-height:0}.breit .feature h3,.breit .feature p{width:84%}}
@media (prefers-reduced-motion:reduce){.breit .feature__mascot{transition:none}}

/* Geschichte: mehr Luft nach den Karten, Punkte klarer, Figuren minimal präsenter */
.zeitfaden{margin-top:132px}
@media (max-width:880px){.zeitfaden{margin-top:76px}}
.zeitfaden__reihe li::before{width:10px;height:10px;background:var(--c-coral);box-shadow:0 0 0 5px color-mix(in oklab,var(--c-coral) 16%,transparent)}
.zeitfaden__jahr{letter-spacing:.02em}
/* Geschichte: einmaliger feiner Lichtreflex beim Betreten des Bereichs (Variante B, 29.08.2026).
   Weicher Reflex über eine wandernde Maske, 2,4 s, kein sichtbarer Segmentkopf, kein Loop,
   kein Glow. Korallenpunkte reagieren nur minimal. Rein dekorativ, bei reduced motion / Touch statisch. */
.zeitfaden__bahn{position:relative}
.zeitfaden__puls{position:absolute;left:0;right:0;top:6px;display:block;width:100%;height:26px;overflow:visible;pointer-events:none;opacity:0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 8%,#000 16%,rgba(0,0,0,.35) 24%,transparent 32%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 8%,#000 16%,rgba(0,0,0,.35) 24%,transparent 32%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:130% 0;mask-position:130% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.zeitfaden__puls path{fill:none;stroke:color-mix(in oklab,var(--c-lavender) 92%,white);stroke-width:2.6;stroke-linecap:round}
.zeitfaden:hover .zeitfaden__puls{animation:zeitfaden-puls 2.4s cubic-bezier(.4,0,.3,1)}
@keyframes zeitfaden-puls{0%{opacity:0;-webkit-mask-position:130% 0;mask-position:130% 0}14%{opacity:.85}80%{opacity:.85}100%{opacity:0;-webkit-mask-position:-40% 0;mask-position:-40% 0}}
.zeitfaden:hover .zeitfaden__reihe li:nth-child(1)::before{animation:zeitfaden-punkt .8s ease-out .5s}
.zeitfaden:hover .zeitfaden__reihe li:nth-child(2)::before{animation:zeitfaden-punkt .8s ease-out 1.05s}
.zeitfaden:hover .zeitfaden__reihe li:nth-child(3)::before{animation:zeitfaden-punkt .8s ease-out 1.6s}
@keyframes zeitfaden-punkt{0%,100%{transform:translateX(-50%) scale(1);filter:none}50%{transform:translateX(-50%) scale(1.06);filter:brightness(1.12)}}
@media (prefers-reduced-motion:reduce),(hover:none){.zeitfaden:hover .zeitfaden__puls,.zeitfaden:hover .zeitfaden__reihe li::before{animation:none}}

/* FAQ: Antwort plus konkreter nächster Schritt */
.faq__a-in p{margin:0}
.faq__weiter{display:inline-block;margin-top:12px;font-family:var(--ff-display-active);font-size:15px;font-weight:600;color:var(--c-ink);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-coral) 45%,transparent)}
.faq__weiter:hover{border-color:var(--c-coral)}

/* FAQ: Frage ist ein echter Button */
.faq__q{appearance:none;background:none;border:0;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.faq__q:focus-visible{outline:2px solid var(--c-coral);outline-offset:6px;border-radius:10px}


/* Hero-Elefant: näher zur Headline, damit Text und Figur eine Komposition bilden.
   `right` statt transform, weil motion.js den transform selbst führt. */
.hero__ele{right:28px}
@media (max-width:1100px){.hero__ele{right:14px}}
@media (max-width:820px){.hero__ele{right:0}}
/* Tröööö!: sichtbar ~1,15 s, weiches Ausblenden über die letzten ~170 ms */
@keyframes ele-say{0%{opacity:0;transform:translateY(6px) scale(.94)}12%{opacity:1;transform:none}85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px)}}
.ele-say{animation-duration:1.15s!important}
/* prefers-reduced-motion: Blase schlicht anzeigen (kein Pop/Scale/Transform), kurz
   stehen lassen, dann entfernen (Entfernung übernimmt der JS-Timeout in motion.js). */
@media (prefers-reduced-motion:reduce){.ele-say{animation:none!important;opacity:1!important;transform:none!important}}

/* Pflichtangaben: leise am Feld benannt statt Sternchen */
/* Markierung bleibt im Textfluss des Labels; die Eingaben einer Rasterzeile
   liegen trotz ein- oder zweizeiliger Labels auf derselben Höhe. */
.af__label{display:block}
/* Label-, Eingabe- und Hinweiszone teilen sich zeilenweise dieselben Spuren:
   ein zweizeiliges Label verschiebt die Eingabe daneben nicht mehr. */
@supports (grid-template-rows:subgrid){
.af__feld{display:grid;grid-template-rows:subgrid;grid-row:span 3}
.af__feld>*{min-width:0}}
@supports not (grid-template-rows:subgrid){
.af__label{min-height:calc(2 * 1.35em)}}
/* Es gibt keine Einzelmarkierung mehr: sichtbar = erforderlich, einmal ruhig gesagt. */
.af__regel{margin:-6px 0 var(--sp-5);padding:10px 16px;border-radius:var(--r-md);background:var(--c-lavender-soft);color:var(--c-ink);font-size:14.5px;line-height:1.45}
.af__feld--fehlt>input,.af__feld--fehlt>select,.af__feld--fehlt>textarea{border-color:color-mix(in oklab,var(--c-coral) 70%,var(--c-line));background:color-mix(in oklab,var(--c-coral) 6%,var(--c-paper-2))}
.af__fehlt{color:color-mix(in oklab,var(--c-coral) 80%,var(--c-ink));font-size:13px}
.af__grid{align-items:start}
.af__feld>input,.af__feld>select,.af__feld>textarea{align-self:start}
.af__feld>.af__hint{align-self:start}

/* Bestätigung nach dem Absenden: erst die Gewissheit, dann der kleine Moment. */
.af--danke{padding-block:var(--sp-9,96px)}
.af__inner--eng{display:block!important;max-width:720px;margin-inline:auto}
.af__danke{text-align:left}
.af__haken{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:var(--sp-4);border-radius:50%;background:var(--c-green-soft);color:color-mix(in oklab,var(--c-green) 55%,var(--c-ink))}
.af__haken svg{width:26px;height:26px}
.af__danke h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:var(--sp-3)}
.af__danke p{max-width:56ch;color:var(--c-ink-2);opacity:.9}
.af__danke-klein{font-size:14.5px;opacity:.7!important}
/* Falls kein E-Mail-Programm aufgeht: Angaben kopieren oder zurück zum Formular (22.10.2026) */
.af__danke-wege{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:14px}
.af__danke-zurueck{border:0;background:none;padding:10px 0;font:inherit;font-size:15px;color:var(--c-ink);cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--c-coral) 55%,transparent);text-underline-offset:4px}
/* Quatschwort-Mischer: optional, ohne Punkte, jederzeit ignorierbar */
.qm{margin-top:var(--sp-7,64px);padding:26px 28px 22px;border-radius:var(--r-lg);background:var(--c-paper-2);box-shadow:var(--sh-1);border:1px solid var(--c-line)}
.qm__kopf h3{font-size:22px;margin:10px 0 6px}
.qm__kopf p{margin:0;font-size:15px;color:var(--c-ink-2);opacity:.78;max-width:46ch}
.qm__wort{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-5) 0 var(--sp-4)}
.qm__silbe{padding:10px 18px;border-radius:var(--r-pill);font-family:var(--ff-display);font-size:clamp(22px,3vw,30px);color:var(--c-ink);animation:qm-in .32s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
.qm__silbe:nth-child(1){background:var(--c-coral-soft)}
.qm__silbe:nth-child(2){background:var(--c-yellow-soft)}
.qm__silbe:nth-child(3){background:var(--c-teal-soft)}
@keyframes qm-in{0%{opacity:0;transform:translateY(8px) rotate(-2deg)}100%{opacity:1;transform:none}}
.qm__reihe{display:flex;align-items:center;justify-content:space-between;gap:16px}
.qm__figur{width:56px;height:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.qm__figur.is-wach{transform:translateY(-4px) rotate(-4deg)}
@media (prefers-reduced-motion:reduce){.qm__silbe{animation:none}.qm__figur{transition:none}}

/* ---------- Echte Praxisbilder ---------- */
/* Standort-Teaser: kleines Bild, nur als Vorgeschmack */
.location__bild{margin:0 0 18px;border-radius:14px;overflow:hidden;background:color-mix(in oklab,var(--c-ink) 4%,var(--c-paper))}
.location__bild image-slot{display:block;width:100%;height:100%}
.location__bild img{display:block;width:100%;height:100%;object-fit:cover}
.location__bild picture{display:block;width:100%;height:100%}
/* Standortseite: ein starkes Leitbild, darunter drei Ergänzungen */
.ort__leitbild{height:clamp(240px,32vw,400px);margin:0 0 12px;border-radius:18px;overflow:hidden;background:color-mix(in oklab,var(--c-ink) 4%,var(--c-paper))}
.ort__leitbild image-slot{display:block;width:100%;height:100%}
.ort__leitbild img{display:block;width:100%;height:100%;object-fit:cover}
.ort__leitbild picture{display:block;width:100%;height:100%}
.ort__fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ort__fotos picture{display:block;width:100%;min-width:0;max-width:100%;line-height:0}
.ort__fotos image-slot{display:block;width:100%;height:clamp(96px,11vw,140px)}
.ort__fotos img{display:block;width:100%;height:clamp(96px,11vw,140px);object-fit:cover;border-radius:14px}
/* Handy (02.11.2026, Nutzerhinweis): drei Eindrücke in einer Reihe wie auf dem Desktop.
   Zweispaltig blieb das dritte Bild allein links mit Lücke daneben, auf jeder Handybreite. */
@media (max-width:640px){.ort__fotos{gap:8px}.ort__fotos image-slot,.ort__fotos img{height:clamp(96px,30vw,132px);border-radius:12px}}

/* ---------- Bewertungen ---------- */
.bw__sterne{display:inline-flex;gap:3px}
.bw__stern{width:18px;height:18px;fill:color-mix(in oklab,var(--c-ink) 14%,transparent)}
.bw__stern.is-voll{fill:var(--c-yellow)}
.bw__stern.is-halb{fill:color-mix(in oklab,var(--c-yellow) 55%,color-mix(in oklab,var(--c-ink) 14%,transparent))}
.bw__orte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0}
.bw__ort{display:flex;flex-direction:column;gap:18px;padding:26px 28px;border-radius:20px;background:var(--c-paper-2);box-shadow:var(--sh-1)}
.bw__ort h3{margin:0 0 10px;font-family:var(--ff-display-active);font-size:20px;font-weight:600;color:var(--c-ink)}
.bw__ort-wert{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.bw__ort .bw__karte{margin:0;padding:0;background:none;box-shadow:none;border-top:1px solid color-mix(in oklab,var(--c-ink) 10%,transparent);padding-top:18px}
.bw__stand{opacity:.6;font-size:13px}
@media (max-width:760px){.bw__orte{grid-template-columns:1fr}}
.bw__wert{font-family:var(--ff-display-active);font-size:30px;line-height:1;color:var(--c-ink)}
.bw__anzahl{font-size:15px;color:color-mix(in oklab,var(--c-ink) 74%,transparent)}
.bw__alle{margin-left:auto;font-family:var(--ff-display-active);font-size:15.5px;font-weight:600;color:var(--c-ink);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-coral) 45%,transparent)}
.bw__alle:hover{border-color:var(--c-coral)}
.bw__karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bw__karte{margin:0;padding:26px 26px 22px;border-radius:20px;background:var(--c-paper-2);box-shadow:var(--sh-1)}
.bw__sterne--zitat{margin:0 0 12px}
.bw__sterne--zitat .bw__stern{width:15px;height:15px}
.bw__karte p{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--c-ink-2);text-wrap:pretty}
.bw__karte footer{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-family:var(--ff-display-active);font-size:14.5px;color:color-mix(in oklab,var(--c-ink) 70%,transparent)}
.bw__autor{font-weight:600;color:var(--c-ink)}
.bw__quelle{font-family:var(--ff-body-active,inherit);font-size:13.5px;letter-spacing:.01em;color:color-mix(in oklab,var(--c-ink) 75%,transparent)}
.bw__link{margin-top:6px;font-size:14.5px;font-weight:600;color:var(--c-ink);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-coral) 45%,transparent);display:inline-flex;align-items:center;min-height:24px}
.bw__ort>.bw__link,.bw__standort>.bw__link{align-self:flex-start;margin-top:0;display:inline-block;font-size:14px;font-weight:500;color:color-mix(in oklab,var(--c-ink) 78%,transparent)}
.bw__standort>.bw__link{margin-top:16px}
.bw__link:hover{border-color:var(--c-coral)}
.bw__standort .bw__stimmen{display:grid;gap:14px;margin-top:16px}
.bw__standort .bw__karte{padding:20px 22px 18px;border-radius:18px;background:color-mix(in oklab,var(--c-paper-2) 70%,transparent);box-shadow:none;border:1px solid color-mix(in oklab,var(--c-ink) 8%,transparent)}
.bw__standort .bw__karte p{font-size:15.5px}
/* Entwurfsmodus: sichtbar leer, damit niemand Platzhalter für Inhalt hält */
.bw__karte--leer{display:flex;flex-direction:column;gap:8px;background:none;box-shadow:none;border:1px dashed color-mix(in oklab,var(--c-ink) 18%,transparent)}
.bw__karte--leer>span{font-family:var(--ff-display-active);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in oklab,var(--c-ink) 45%,transparent)}
.bw__karte--leer p{margin:0;font-size:14.5px;color:color-mix(in oklab,var(--c-ink) 50%,transparent)}
.bw__platzhalter{font-size:14.5px;color:color-mix(in oklab,var(--c-ink) 52%,transparent)}
.bw__platzhalter code{font-size:13.5px;background:color-mix(in oklab,var(--c-ink) 6%,transparent);padding:1px 6px;border-radius:6px}
.bw__zeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:20px;font-size:15px;color:color-mix(in oklab,var(--c-ink) 70%,transparent)}
.bw__zeile strong{font-family:var(--ff-display-active);font-size:18px;color:var(--c-ink)}
.bw__zeile a{color:var(--c-ink);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-coral) 45%,transparent)}
@media (max-width:880px){.bw__karten{grid-template-columns:1fr}.bw__alle{margin-left:0}}
/* Zustand ohne echte Zitate: kompakte Zeile statt hoher, leerer Karte */
.bw--knapp .bw__orte{margin-bottom:0;gap:14px}
.bw--knapp .bw__ort{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;padding:16px 22px}
.bw--knapp .bw__ort h3{margin:0;font-size:18px}
.bw--knapp .bw__ort-wert{align-items:baseline}
.bw--knapp .bw__wert{font-size:22px}
.bw--knapp .bw__anzahl{margin:0;font-size:14.5px}
.bw--knapp .bw__alle{font-size:14.5px}
@media (max-width:520px){.bw--knapp .bw__ort{align-items:flex-start;flex-direction:column;gap:8px}.bw--knapp .bw__alle{margin-left:0}}

/* Kritzelpause: Hierarchie nachgeschärft. Gleiche Farben, gleicher Charakter,
   nur lesbarer — Impuls klar vorn, Löschen und i sichtbar sekundär. */
.kp__impuls{font-size:16.5px;color:color-mix(in oklab,var(--c-ink) 94%,transparent)}
.kp__warum{font-size:13px;line-height:1.45;color:color-mix(in oklab,var(--c-ink) 72%,transparent)}
.kp.is-info .kp__warum{max-height:64px}
.kp__loeschen{font-size:13px;color:color-mix(in oklab,var(--c-ink) 62%,transparent)}
.kp__loeschen:hover{color:var(--c-ink)}
.kp__info{opacity:1;color:color-mix(in oklab,var(--c-ink) 62%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c-ink) 26%,transparent)}
.kp__info:hover{color:var(--c-ink);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c-ink) 42%,transparent)}
.kp__zu{opacity:.6}

/* Standortkontakt: Telefon und E-Mail, ruhig unter der Adresse */
.location__kontakt,.ort__kontakt{display:flex;flex-direction:column;gap:2px;margin:10px 0 0;font-size:15px}
.location__kontakt a,.ort__kontakt a{color:var(--c-ink);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-ink) 16%,transparent);align-self:flex-start}
.location__kontakt a:hover,.ort__kontakt a:hover{border-color:var(--c-coral)}

/* Weg-Karten: der externe Link soll wie die Schaltfläche daneben aussehen */
a.ak__weg{text-decoration:none}
a.ak__weg strong,a.ak__weg span{text-decoration:none;border-bottom:0}
a.ak__weg:hover{border-color:var(--c-coral)}

/* Kontaktseite: eine kleine Nebenbemerkung, kein Callout, keine Animation.
   Typografie an den ruhigen «Krankenkasse? Nein.»-Nachsatz angeglichen (B, 11.09.2026):
   15px / lh 1.5 / Ink 72%, normale Body-Schrift, nicht kursiv, nah am Haupttext
   (margin-top 4px ≈ 8px Gesamtabstand). Spezifität via .af__intro schlägt .af__intro p. */
.af__intro p.af__drache{margin:4px 0 0;font-size:15px;line-height:1.5;font-style:normal;color:color-mix(in oklab,var(--c-ink) 72%,transparent)}

/* Geschichte: Punkt, Jahr, Ort und Text auf einer gemeinsamen Mittelachse */
.zeitfaden__reihe li{text-align:center}
.zeitfaden__reihe li::before{left:50%;transform:translateX(-50%)}
.zeitfaden__txt{margin-inline:auto}

/* ---------- Mitplappern: Art-Direction-Pass (Hero, Stellen, Alltag, Bewerbung) ---------- */
.mp-hero{position:relative;background:var(--c-peach-soft);padding:calc(var(--nav-h) + 52px) clamp(20px,4vw,48px) clamp(56px,6vw,92px)}
.mp-hero__inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(32px,5vw,76px);align-items:center}
.mp-hero__copy{max-width:36ch}
.mp-hero h1{font-family:var(--ff-display-active);font-size:clamp(44px,5.4vw,84px);line-height:1.02;letter-spacing:-.02em;font-weight:600;margin:10px 0 22px;color:var(--c-ink)}
.mp-hero h1 em{font-style:italic;font-weight:300;color:var(--c-lavender)}
.mp-hero__lede{font-size:clamp(17px,1.25vw,20px);line-height:1.55;margin:0 0 30px;max-width:44ch;color:color-mix(in oklab,var(--c-ink) 78%,transparent);text-wrap:pretty}
.mp-hero__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.mp-hero__zweit{display:inline-flex;align-items:center;min-height:44px;font-family:var(--ff-display-active);font-size:15.5px;font-weight:600;color:var(--c-ink);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--c-ink) 28%,transparent);text-underline-offset:4px}
.mp-hero__zweit:hover{text-decoration-color:currentColor}
/* Bildkomposition: ein starkes Leitbild, zwei kleinere echte Momente. Keine Galerie. */
.mp-fotos{position:relative;aspect-ratio:1/0.9}
.mp-foto{position:absolute;border-radius:20px;overflow:hidden;background:color-mix(in oklab,var(--c-ink) 5%,var(--c-paper));box-shadow:0 18px 42px rgba(40,30,60,.16);transition:transform .6s var(--ease-out)}
.mp-foto img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.mp-foto picture{position:absolute;inset:0;display:block}
/* Variante D (produktiv 29.08.2026): bewusstes Zweier-Arrangement. Grosses Leitbild
   oben links, kleines Arbeitsfoto als Gegenpol unten rechts, leicht überlappend. */
.mp-foto--haupt{left:0;top:0;width:78%;aspect-ratio:4/3;transform:rotate(-1.2deg);z-index:1}
.mp-foto--zweit{right:0;bottom:0;top:auto;width:41%;aspect-ratio:3/4;transform:rotate(2.6deg);z-index:2}
.mp-hero:hover .mp-foto--haupt{transform:rotate(-1.4deg) translateY(-4px)}
.mp-hero:hover .mp-foto--zweit{transform:rotate(2.9deg) translateY(-5px)}
@media (max-width:980px){
  .mp-hero__inner{grid-template-columns:1fr;gap:36px}
  .mp-hero__copy{max-width:none}
  .mp-fotos{aspect-ratio:auto;display:flex;flex-direction:column;gap:14px}
  .mp-foto{position:relative;inset:auto;width:auto!important;transform:none;box-shadow:0 10px 26px rgba(40,30,60,.13)}
  .mp-foto--haupt{aspect-ratio:4/3}
  .mp-foto--zweit{aspect-ratio:3/4;max-width:58%;margin-inline:auto}
}

/* Gemeinsame Editorial-Sektion der Recruiting-Seite */
.mp-sektion{padding:clamp(52px,6.5vw,92px) clamp(20px,4vw,48px)}
.mp-wide{width:min(1080px,100%);margin:0 auto}
.mp-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 28px;margin:0 0 clamp(22px,3vw,38px)}
.mp-kopf h2{font-family:var(--ff-display-active);font-size:clamp(28px,3vw,44px);line-height:1.08;letter-spacing:-.02em;font-weight:600;margin:0;color:var(--c-ink)}
.mp-kopf__note{font-size:14.5px;color:color-mix(in oklab,var(--c-ink) 55%,transparent)}

/* Offene Stellen: Editorial-Zeilen, Standort und Pensum sofort lesbar */
.mp-stellen{border-top:1px solid color-mix(in oklab,var(--c-ink) 14%,transparent)}
.mp-stelle{display:grid;grid-template-columns:minmax(0,1fr) 15rem 7rem auto;align-items:center;gap:16px 36px;padding:26px 6px;border-bottom:1px solid color-mix(in oklab,var(--c-ink) 12%,transparent);transition:background .3s var(--ease-out)}
.mp-stelle:hover{background:color-mix(in oklab,var(--c-peach-soft) 52%,transparent)}
.mp-stelle__titel{font-family:var(--ff-display-active);font-size:clamp(21px,1.9vw,28px);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0;color:var(--c-ink)}
.mp-stelle__start{display:block;margin-top:7px;font-size:14px;color:color-mix(in oklab,var(--c-ink) 58%,transparent)}
.mp-stelle__meta{display:contents}
.mp-stelle__meta>div{display:grid;gap:4px;min-width:0}
.mp-stelle__label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in oklab,var(--c-ink) 52%,transparent)}
.mp-stelle__wert{font-family:var(--ff-display-active);font-size:17px;font-weight:600;line-height:1.3;color:var(--c-ink)}
.mp-stelle__cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--ff-display-active);font-size:15.5px;font-weight:600;color:var(--c-ink)}
.mp-stelle__cta span{transition:transform .3s var(--ease-out)}
.mp-stelle:hover .mp-stelle__cta span{transform:translateX(4px)}
.mp-stellen__fuss{margin:22px 0 0;font-size:15px;color:color-mix(in oklab,var(--c-ink) 66%,transparent)}
.mp-initiativ{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:62ch}
.mp-initiativ p{margin:0;font-size:17.5px;line-height:1.65;color:color-mix(in oklab,var(--c-ink) 82%,transparent);text-wrap:pretty}
.mp-initiativ .mp-stelle__cta:hover span{transform:translateX(4px)}
/* Variante D (produktiv 29.08.2026): kompakter Status, dichteres «Wen wir suchen»,
   entdoppelte Benefits, eigener kleiner Mallorca-Abschnitt. */
.mp-sektion--status{padding-block:34px}
.mp-status{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:20px 44px;align-items:start}
.mp-status__kopf{display:flex;flex-direction:column;gap:6px}
.mp-status__label{font-family:var(--ff-body-active);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,var(--c-ink) 66%,transparent)}
.mp-status__zeile{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-display-active);font-size:18px;font-weight:600;color:var(--c-ink)}
.mp-status__zeile::before{content:"";width:9px;height:9px;border-radius:50%;background:color-mix(in oklab,var(--c-teal) 70%,var(--c-ink));flex:none}
.mp-status__body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:60ch}
.mp-status__body p{margin:0;font-size:16.5px;line-height:1.6;color:color-mix(in oklab,var(--c-ink) 80%,transparent);text-wrap:pretty}
@media (max-width:720px){.mp-status{grid-template-columns:1fr;gap:14px}}
.mp-wen{gap:22px 40px}
.mp-wen__lead{font-size:19px;max-width:46ch}
.mp-wen__punkte{gap:16px 34px}
.mp-punkt p{font-size:15px;line-height:1.55}
.mp-sektion--weg .mp-weg{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:36px;align-items:center}
.mp-weg__bild img{display:block;width:100%;height:auto;border-radius:22px}
.mp-weg h2{margin:0 0 10px;font-size:24px}
.mp-weg p{margin:0;font-size:16px;color:color-mix(in oklab,var(--c-ink) 74%,transparent);max-width:46ch}
@media(max-width:820px){.mp-sektion--weg .mp-weg{grid-template-columns:1fr}}
@media (max-width:860px){
  .mp-stelle{grid-template-columns:1fr;gap:14px;padding:24px 2px}
  .mp-stelle__meta{display:flex;flex-wrap:wrap;gap:10px 28px}
}

/* Wen wir suchen: eine starke Aussage, daneben wenige Anker */
.mp-wen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,72px);align-items:start}
.mp-wen__lead{font-family:var(--ff-display-active);font-size:clamp(24px,2.5vw,36px);line-height:1.22;letter-spacing:-.015em;font-weight:400;margin:0;color:var(--c-ink);text-wrap:pretty}
.mp-punkt{padding:20px 0;border-top:1px solid color-mix(in oklab,var(--c-ink) 12%,transparent)}
.mp-punkt:last-child{border-bottom:1px solid color-mix(in oklab,var(--c-ink) 12%,transparent)}
.mp-punkt strong{display:block;margin-bottom:6px;font-family:var(--ff-display-active);font-size:16.5px;font-weight:600;color:var(--c-ink)}
.mp-punkt p{margin:0;font-size:15.5px;line-height:1.6;color:color-mix(in oklab,var(--c-ink) 76%,transparent)}
@media (max-width:900px){.mp-wen{grid-template-columns:1fr;gap:26px}}

/* Alltag: typografische Liste mit Ankern, dazu ein echtes Arbeitsfoto */
.mp-alltag{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,68px);align-items:start}
.mp-liste{list-style:none;margin:0;padding:0}
.mp-liste li{display:grid;grid-template-columns:minmax(132px,auto) minmax(0,1fr);gap:6px 30px;padding:18px 0;border-top:1px solid color-mix(in oklab,var(--c-ink) 12%,transparent)}
.mp-liste li:last-child{border-bottom:1px solid color-mix(in oklab,var(--c-ink) 12%,transparent)}
.mp-liste b{font-family:var(--ff-display-active);font-size:15px;font-weight:600;color:var(--c-ink)}
.mp-liste span{font-size:16px;line-height:1.55;color:color-mix(in oklab,var(--c-ink) 78%,transparent)}
.mp-alltag__text{margin:26px 0 0;max-width:52ch;font-size:16.5px;line-height:1.65;color:color-mix(in oklab,var(--c-ink) 80%,transparent)}
.mp-alltag__seite{display:grid;gap:16px}
.mp-alltag__bild{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:color-mix(in oklab,var(--c-ink) 5%,var(--c-paper));box-shadow:0 14px 34px rgba(40,30,60,.13)}
.mp-alltag__bild img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.mp-alltag__bild picture{position:absolute;inset:0;display:block}
.mp-alltag .plpg-nebensatz{margin:0}
@media (max-width:900px){
  .mp-alltag{grid-template-columns:1fr}
  .mp-liste li{grid-template-columns:1fr;gap:4px}
  .mp-alltag__bild{aspect-ratio:4/3}
}

/* Bewerbung: ruhiger Dreischritt, keine Textwand */
.mp-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid color-mix(in oklab,var(--c-ink) 14%,transparent)}
.mp-schritt{padding:28px 36px 6px 0}
.mp-schritt+.mp-schritt{padding-left:36px;border-left:1px solid color-mix(in oklab,var(--c-ink) 12%,transparent)}
.mp-schritt__nr{font-family:var(--ff-display-active);font-size:13px;letter-spacing:.12em;color:color-mix(in oklab,var(--c-coral) 78%,var(--c-ink))}
.mp-schritt h3{font-family:var(--ff-display-active);font-size:clamp(19px,1.6vw,24px);font-weight:600;line-height:1.2;margin:10px 0 10px;color:var(--c-ink)}
.mp-schritt p{margin:0;font-size:15.5px;line-height:1.62;color:color-mix(in oklab,var(--c-ink) 76%,transparent)}
.mp-schritt a{color:var(--c-teal-hover)}
.mp-bewerben{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:34px}
.mp-bewerben__zweit{font-size:15.5px;font-weight:500;color:color-mix(in oklab,var(--c-ink) 76%,transparent);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-coral) 45%,transparent)}
.mp-bewerben__zweit:hover{color:var(--c-ink);border-color:var(--c-coral)}
@media (max-width:880px){
  .mp-schritte{grid-template-columns:1fr}
  .mp-schritt{padding:22px 0 6px}
  .mp-schritt+.mp-schritt{padding-left:0;border-left:0;border-top:1px solid color-mix(in oklab,var(--c-ink) 12%,transparent)}
}
@media (min-width:1600px){.mp-wide{width:min(1320px,86vw)}}
@media (prefers-reduced-motion:reduce){.mp-foto,.mp-stelle,.mp-stelle__cta span{transition:none}.mp-hero:hover .mp-foto--haupt{transform:rotate(-1.4deg)}}
/* «Zweiter Blick» ohne sichtbare Beschriftung (31.08.2026): der Trigger bleibt als
   unsichtbare 44-px-Fläche unter dem Kreis, die Touch-Pille entfällt. */
.member:hover .member__sonst,.member.is-open .member__sonst{background:none;padding:0}


/* ===== Lesbarkeits-Pass Startseiten-Audit (25.08.2026) =====
   Zielgrössen aus dem Audit: Navigation ca. 15px, kleine Labels min. 14px,
   Microcopy 15-16px, Krankenkassenhinweis min. 16px, Angebotskarten 16.5px.
   Die Regeln gelten global (Navigation, Footer, Karten) — andere Seiten sind
   noch nicht nachgestaltet, siehe Notiz in ZU-VERIFIZIEREN.md. */
.nav__link{font-size:15px}
.nav__cta{font-size:15px}
.nav__sub-desc{font-size:14px}
.hero__stat span{font-size:15.5px}
.hero__kk{font-size:16.5px}
.hero__kk-link{font-size:15px}
@media (max-width:880px){.hero__kk{font-size:16px}}
.schritt__kicker{font-size:17.5px}
.schritt__desc{font-size:16.5px}
.schritt__more{font-size:15px}
.online-note p{font-size:16px}
.location__link{font-size:15.5px}
.location__addr{font-size:16px}
.faq__a-en{font-size:15.5px}
.footer__col a{font-size:15.5px}
/* Teamrollen: nicht mehr als Versalienblock, sondern normal gesetzt und grösser */
.member__role{font-size:14px;text-transform:none;letter-spacing:0;line-height:1.5;height:calc(1.5em + 2 * 1.45em);display:flex;flex-direction:column;gap:1px}
/* Primärfunktion trägt, Standortleitung tritt eine Stufe zurück. Keine Karte, kein Badge.
   Beide Zeilen sind relevante Funktionsinformation: 14 px / 78 % und 13,5 px / 63 %. */
.member__role-1{color:color-mix(in oklab,var(--c-ink) 78%,transparent);font-weight:500}
.member__role-2{font-size:13.5px;line-height:1.4;color:color-mix(in oklab,var(--c-ink) 74%,transparent)}
/* Dezente Standortzeile (03.09.2026): tertiär unter der Berufsbezeichnung, reiner
   Micro-Label-Text (Versalien), kein Badge/Icon/Pill. Ruhiger als die Funktion,
   Tinte 62 % = AA-sicher auf Peach. Nur im vollen Raster, nicht im Teaser. */
.member__ort{font-size:12.5px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in oklab,var(--c-ink) 62%,transparent);margin-top:4px}
/* FAQ-Teaser: Figur direkt neben dem Inhalt statt in einer halbleeren Spalte */
.faq-teaser .faq{grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:start}
.faq-teaser .faq__sticky{position:static;top:auto;padding-top:4px}
@media (max-width:880px){.faq-teaser .faq{grid-template-columns:1fr;gap:24px}}
/* Bewertungen: Zitatfläche dehnt sich, damit der Link in beiden Karten gleich hoch sitzt */
.bw__ort>.bw__karte{flex:1 1 auto}
/* Begleiter-Wähler erscheint erst nach dem Hero (nur Sichtbarkeit, kein Design) */
.buddy.is-spaeter{opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.buddy.is-spaeter.is-frei{opacity:1;pointer-events:auto;transform:none}
@media (prefers-reduced-motion:reduce){.buddy.is-spaeter{transition:none}}

/* Standort-Teaser (Startseite): 3:2 statt flacher Banner (mobil 4:3), damit Logo
   und Raumcharakter im Bild bleiben. Crop je Standort über objectPosition in
   Locations.jsx (TEASER_BILDER). Einzige Höhenregel für .location__bild. */
.location__bild{aspect-ratio:3/2}
@media (max-width:520px){.location__bild{aspect-ratio:4/3}}

/* Floating-Reiter: weicht Inhalten aus; bleibt kein Platz, tritt er zurück. */
.kp-tab.is-kollision,.buddy.is-kollision,.buddy.is-spaeter.is-frei.is-kollision{opacity:0;pointer-events:none}
/* Ausweichen soll ruhig wirken, nicht springen — Design und Grösse bleiben gleich. */
.kp-tab{transition:margin-bottom .3s var(--ease-out),opacity .25s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.buddy,.buddy.is-spaeter{transition:margin-bottom .3s var(--ease-out),opacity .35s var(--ease-out),transform .35s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.kp-tab,.buddy,.buddy.is-spaeter{transition:none}}
/* Fokussierter Reiter bleibt immer sichtbar, auch wenn eine Kollision erkannt wird. */
.kp-tab:focus-visible,.kp-tab:focus-within,.buddy:focus-within,.buddy:focus-within .buddy__toggle{opacity:1;pointer-events:auto}
/* Mobile: unterer Safe-Area-Bereich (Homebar) mitrechnen. */
@supports (padding:env(safe-area-inset-bottom)){
@media (max-width:640px){.kp-tab{bottom:calc(18px + env(safe-area-inset-bottom))}}
@media (hover:none){.buddy{bottom:calc(14px + env(safe-area-inset-bottom))}}
}

/* === Begleiter Richtung 3: kompakter Chip (≤1280) + untere Aktionszone (≤760) === */
/* Leerzustand-Glyph: kleine Sprechblase mit «?» im Papier-/Ink-Stil (kein Tier) */
.buddy__frage{display:none}
.buddy__frage svg{width:27px;height:27px}
.buddy__frage .blase{fill:none;stroke:color-mix(in oklab,var(--c-ink) 52%,transparent);stroke-width:1.6;stroke-linejoin:round}
.buddy__frage .q{fill:color-mix(in oklab,var(--c-ink) 76%,transparent);font-family:var(--ff-display-active);font-weight:700;font-size:11px}
@media (max-width:1280px){
  .buddy{right:2px;left:auto}
  .buddy__toggle{position:relative;gap:0;padding:2px;justify-content:center;min-width:34px;min-height:34px;border-radius:14px 3px 4px 12px}
  .buddy__toggle::after{content:"";position:absolute;inset:-5px}
  .buddy__wort{display:none}
  .buddy__figur{width:30px;height:30px;margin-left:0}
  .buddy.is-leer .buddy__figur{display:none}
  .buddy.is-leer .buddy__frage{display:grid;place-items:center;width:30px;height:30px}
}
@media (max-width:760px){
  .buddy{right:16px;left:auto;bottom:calc(14px + env(safe-area-inset-bottom))}
  /* nur neben dem Begleiter Platz freihalten; ohne ihn steht die Leiste mittig (22.10.2026) */
  body:has(.buddy) .mo-cta{right:70px !important}
}

/* ===== Angebotsseiten-Audit (25.08.2026) ===== */
/* Kicker der drei Wege: gleiche Grösse, deutlich höherer Kontrast */
.schritt__kicker{color:color-mix(in oklab,var(--c-lavender) 42%,var(--c-ink))}
/* Bedienhinweis der Mitmach-Karten auf lesbares Microcopy-Niveau */
.spielkarte__head p{font-size:16px}
/* Sprachfaden über den Karten: liegt jetzt vollständig darüber, schneidet nie Inhalt */
.faden{top:-58px;height:50px}
/* Hero der Angebotsseite: eine ruhige Begleitfigur. Sprachfaden entfernt
   (03.09.2026); Verbindung Text↔Papagei nur noch über Nähe und Komposition. */
.ah-figur{position:relative;display:flex;justify-content:flex-start;align-items:flex-start;align-self:start;margin-top:-64px;margin-left:28px}
.ah-figur img{width:clamp(146px,15vw,196px);height:auto}
@media (max-width:900px){.ah-figur{margin-top:0;padding-top:6px}.ah-figur img{width:132px}}
/* Finanzierung: ruhige redaktionelle Zeile, keine Karte */
.finanzzeile{margin:30px 0 0;padding-top:22px;border-top:1px solid color-mix(in oklab,var(--c-ink) 12%,transparent);font-size:16.5px;line-height:1.6;color:color-mix(in oklab,var(--c-ink) 80%,transparent)}
.finanzzeile a{display:inline-block;margin-left:10px;font-weight:600;color:var(--c-ink);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-coral) 45%,transparent)}
.finanzzeile a:hover{border-color:var(--c-coral)}
@media (max-width:640px){.finanzzeile a{display:block;margin:8px 0 0}}

/* Angebots-Hero verdichtet (03.09.2026): weniger Luft oben/unten, Titel→Spalten
   enger. Faden entfernt. Nur Abstände/Komposition, keine Typo-Änderung. */
.pagehero--lavender.pagehero--wide{padding-top:calc(var(--nav-h) + 22px);padding-bottom:clamp(26px,3.2vw,48px);overflow:visible}
/* Mitmach-Kicker in der redaktionellen Kicker-Sprache der Website */
.spielwiese__head .section__eyebrow{margin-bottom:10px}

/* ===== Über-uns-Audit (25.08.2026) ===== */
/* Kicker über «Was uns wichtig ist»: gleiche Sprache wie die anderen Abschnitte.
   Der Kicker übernimmt die Rolle des ersten Kindes, darum bleibt die
   Trennlinie der Prose-H2 hier aus. */
.breit > .section__eyebrow{margin-bottom:10px}
.breit > .section__eyebrow + h2{padding-top:0;border-top:none;margin-top:0}
/* Kleine Schriften auf angenehm lesbares Niveau */
.zeitfaden__ort{font-size:14.5px;letter-spacing:.05em;color:color-mix(in oklab,var(--c-ink) 66%,transparent)}
.section__hint{font-size:15px;color:color-mix(in oklab,var(--c-ink) 74%,transparent)}
.member__sonst{font-size:14.5px;color:color-mix(in oklab,var(--c-ink) 84%,transparent);min-height:44px;justify-content:center}
.member__sonst svg{width:34px;height:8px}
@media (hover:none){.member.is-open .member__sonst{font-size:14.5px}}
.member__sonst:focus-visible{outline:2px solid var(--c-coral);outline-offset:3px;border-radius:10px}
/* Ruhigerer Rhythmus zwischen Wertebereich und Geschichte */
.zeitfaden{margin-top:88px}
@media (max-width:880px){.zeitfaden{margin-top:64px}}
/* Fünf Logopädinnen als 3 + 2 mit zentrierter zweiter Reihe.
   24 Spuren, jede Karte 6 Spuren: die Kartenbreite bleibt exakt die des
   Vierer-Rasters (W/4 − 0,75·gap), unabhängig vom Gap-Wert. */
/* Skalierbar für jede Personenzahl: die Startspur jeder Karte kommt aus der
   Reihenaufteilung in TeamGrid.jsx (--col), nicht aus nth-child-Regeln.
   Fünf ergibt 3+2, sieben 4+3, unvollständige Reihen sitzen zentriert. */
.team--auto{grid-template-columns:repeat(24,minmax(0,1fr))}
.team--auto .member{grid-column:var(--col,auto)/span 6}
@media (max-width:880px){.team--auto{grid-template-columns:repeat(2,minmax(0,1fr))}.team--auto .member{grid-column:auto}}



/* ===== Circle 2.0 (Test, Stand 26.08.2026) =====
   Nur aktiv, wenn TeamGrid mit circle={true} gerendert wird (ueber-uns.html).
   Rückweg zur Rechteckversion: das Prop entfernen — diese Datei bleibt unberührt,
   das alte System steht darunter unverändert. */
.team-circle .member__photo{width:92%;margin-inline:auto;aspect-ratio:1;border-radius:50%;overflow:visible;margin-bottom:42px}
.team-circle .member__mascot{padding:19%;transition:opacity .3s var(--ease-out) .06s,transform .42s var(--ease-out)}
/* Ein Kreis, kein Medaillon darin: die Fläche füllt den ganzen Kreis, der Reveal
   läuft als kreisförmige Maske von der Mitte nach aussen. */
.team-circle .member__medaillon{left:0;top:0;transform:none;width:100%;border-radius:50%;background:none;box-shadow:none;opacity:1;clip-path:circle(0% at 50% 50%);transition:clip-path .4s var(--ease-out)}
.team-circle .member__medaillon::after{display:none}
.team-circle .member:hover .member__medaillon,.team-circle .member:focus-within .member__medaillon,.team-circle .member.is-open .member__medaillon{opacity:1;transition:none;animation:kreis-wipe .4s var(--ease-out) forwards}
@keyframes kreis-wipe{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(71% at 50% 50%)}}
/* Tier zieht sich gleichzeitig zurück, ohne die alte 0,95-s-Staffelung. */
.team-circle .member:hover .member__mascot,.team-circle .member:focus-within .member__mascot,.team-circle .member.is-open .member__mascot{transition:none;animation:kreis-tier .34s var(--ease-out) forwards}
@keyframes kreis-tier{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}
.team-circle .member__foto{transform:scale(calc(var(--foto-s,1) * var(--kreis-fuell,1.18)))}
/* Feine Linie zeichnet sich einmal mit dem Reveal und tritt danach zurück. */
.team-circle .member__line{width:100%}
.team-circle .member__line circle{stroke:color-mix(in oklab,#fff 58%,transparent);stroke-width:1.1;stroke-dasharray:290;stroke-dashoffset:290}
.team-circle .member:hover .member__line circle,.team-circle .member:focus-within .member__line circle,.team-circle .member.is-open .member__line circle{animation:kreis-linie .82s cubic-bezier(.34,0,.24,1) forwards}
/* Eine ganze Kreisbewegung soll lesbar sein: erst vollständig umlaufen, kurz
   stehen, dann restlos zurücktreten. Nie als halber Bogen liegenbleiben. */
@keyframes kreis-linie{0%{stroke-dashoffset:290;opacity:1}64%{stroke-dashoffset:0;opacity:1}76%{stroke-dashoffset:0;opacity:.7}100%{stroke-dashoffset:0;opacity:0}}
/* Zweitfoto im exakt selben Kreis, keine Bogen- oder Oktagon-Ecken. */
.team-circle .member__zweitbox{inset:0;border-radius:50%;clip-path:circle(0% at 50% 50%);transition:opacity .3s var(--ease-out),clip-path .42s var(--ease-out)}
.team-circle .member.is-zweit .member__zweitbox{clip-path:circle(71% at 50% 50%);transition-delay:0s}
.team-circle .member.is-zweit .member__photo{box-shadow:none}
.team-circle .member__zweit{transform:scale(var(--zweit-s,1.2))}
/* Hinweis sitzt unter dem Kreis und gehört zur selben Interaktionsfläche. */
.team-circle .member__sonst{bottom:-34px;text-shadow:none}
.team-circle .member__smile{bottom:-6px}
@media (prefers-reduced-motion:reduce){.team-circle .member__medaillon,.team-circle .member__zweitbox{transition:none}
.team-circle .member:hover .member__medaillon,.team-circle .member:focus-within .member__medaillon,.team-circle .member.is-open .member__medaillon{animation:none;clip-path:circle(71% at 50% 50%)}
.team-circle .member:hover .member__mascot,.team-circle .member:focus-within .member__mascot,.team-circle .member.is-open .member__mascot{animation:none;opacity:0}
.team-circle .member:hover .member__line circle,.team-circle .member:focus-within .member__line circle,.team-circle .member.is-open .member__line circle{animation:none;opacity:0}}
/* Name und Funktion ruhig unter dem Kreis, mittig zur Form. */
.team-circle .member{text-align:center}
.team-circle .member__role,.team-circle .member__name{margin-inline:auto;max-width:26ch}
.team-circle .member__role-2{max-width:26ch;margin-inline:auto}
@media (max-width:880px){.team-circle .member__photo{margin-bottom:38px}}
/* Praxisführung (nur voller Grid): Nora & Claudio tragen beide Funktion (bei fester
   Kreisgrösse ggf. zweizeilig) plus Ortszeile. Reservierte Funktionshöhe hier vier
   Zeilen, damit die Ortszeile («WÄDENSWIL · SCHLIEREN» / «SCHLIEREN») sichtbar bleibt.
   Da .member__role feste Höhe hat, sitzen beide Namen automatisch auf derselben
   Baseline. Kreisgrösse (~181 px), Raster und Circle-2.0-System bleiben unangetastet.
   (Stand 04.09.2026, per Nutzerfreigabe.) */
.team-circle .team--leitung .member__role{height:calc(1.5em + 3 * 1.45em)}
/* Desktop: Claudios kombinierte Zeile «Organisation, Technik & Digitalisierung»
   auf EINE Zeile (Nutzerwunsch 04.09.2026). Da die Zeile breiter ist als der Kreis,
   wird nur der Textbereich der Leitung verbreitert (zentriertes Paar), der Kreis
   bleibt fix bei 181 px — eingefrorene Kreisgröße unverändert. Rollenbox dann drei
   Zeilen, Namens-Baseline bleibt. Mobile (≤880) bricht weiter um (4-Zeilen-Höhe). */
@media(min-width:881px){
  .team-circle .team--leitung{grid-template-columns:repeat(2,minmax(0,240px));justify-content:center;gap:clamp(18px,2vw,28px)}
  .team-circle .team--leitung .member:first-child{grid-column:auto}
  .team-circle .team--leitung .member__photo{width:181px;margin-inline:auto}
  .team-circle .team--leitung .member__role,
  .team-circle .team--leitung .member__role-2,
  .team-circle .team--leitung .member__name{max-width:none}
  .team-circle .team--leitung .member__role{height:calc(1.5em + 2 * 1.45em)}
}
/* Variante B (Stand 04.09.2026, per Nutzerfreigabe): Logopädie-Team-Kreise auf Desktop
   auf 172 px (Nutzerwunsch: 181 px war zu dominant, 163 px einen Tick zu klein) und das
   Raster proportional verdichtet, damit es ruhiger und weniger bilddominant wirkt
   (Namen/Rollen gewinnen Gewicht). NUR das volle
   Team-Raster (.team--auto), NICHT die Praxisführung (Nora/Claudio bleiben 181 px), NICHT
   der Startseiten-Teaser (kein .team-circle) und NICHT Mobile (≤880 px bleibt bei der
   bestehenden slotbasierten Grösse). Circle-2.0-System, Reihenfolge, Farben, Fotos und
   Animation unverändert — nur Kreisdurchmesser, Grid-Breite und Rhythmus. */
@media(min-width:881px){
  .team-circle .team--auto{max-width:950px;margin-inline:auto;gap:22px 15px}
  .team-circle .team__label{margin-bottom:36px}
  .team-circle .team--leitung .member__name{margin-top:10px}
  .team-circle .team--auto .member__photo{width:172px;margin-inline:auto;margin-bottom:38px}
}
/* Grosse Bildschirme ab 1600 px (03.11.2026, Nutzerfrage): Das Raster wirkte in der breiten
   Seite etwas verloren. Kreise leicht grösser (Team 192 px, Praxisführung 200 px), Raster
   1060 px. Unter 1600 px bleibt Variante B (172/181 px, 950 px) unverändert. */
@media(min-width:1600px){
  .team-circle .team--auto{max-width:1060px}
  .team-circle .team--auto .member__photo{width:192px}
  .team-circle .team--leitung{grid-template-columns:repeat(2,minmax(0,260px))}
  .team-circle .team--leitung .member__photo{width:200px}
}

/* «Was uns wichtig ist»: nur diese drei kurzen Statement-Karten stehen zentriert.
   Keine globale Regel — längere redaktionelle Texte bleiben linksbündig. */
.haltung-karten .feature{text-align:center}
/* Muss die linksbündige `.breit .feature`-Regel überschreiben — gleiche Tiefe nötig. */
.breit .haltung-karten .feature h3,.breit .haltung-karten .feature p{text-align:center}
.haltung-karten .feature__mascot{display:block;margin-inline:auto}
.haltung-karten .feature p{margin-inline:auto;max-width:32ch}
/* Figuren optisch mittig in der 76-px-Fläche, visuell entschieden. */
.haltung-karten .feature__mascot[src$="frosch.png"]{transform:translate(1%,4%)}
.haltung-karten .feature__mascot[src$="rosabaer.png"]{transform:translate(0,2%)}
.haltung-karten .feature__mascot[src$="papagei.png"]{transform:translate(4%,2%)}
.haltung-karten .feature:hover .feature__mascot{transform:translateY(-2px) rotate(-2deg) scale(1.04)}

/* --- «Für Eltern»: drei Informationsthemen, darunter ein anderer Weg --- */
/* Hero kompakter, Bär rund ein Viertel kleiner. Augen bleiben zu, kein neuer Effekt. */
.pagehero--quiet{padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(40px,4.4vw,64px)}
.pagehero--quiet .pagehero__title{font-size:clamp(32px,4.1vw,58px)}
.pagehero--quiet .pagehero__bleed{width:min(26vw,358px);right:3%;bottom:-2%}
@media (max-width:880px){.pagehero--quiet .pagehero__bleed{right:-4%;bottom:-4%;width:46vw;opacity:.34}}
@media (max-width:600px){.pagehero--quiet .pagehero__bleed{width:54vw;right:-10%;bottom:auto;top:8%;opacity:.26}}
/* Drei gleichwertige Karten, Typografie wie auf den übrigen Seiten. */
.el-karten{max-width:1120px;margin-inline:auto;grid-template-columns:repeat(3,minmax(0,1fr))}
.el-karte{text-decoration:none;color:inherit}
.el-karte h3{font-size:22px;line-height:1.25}
.el-karte p{font-size:16px;line-height:1.55}
@media (max-width:880px){.el-karten{grid-template-columns:1fr}}
/* Kein viertes Thema, sondern ein anderer Weg: flacher, breiter, ruhiger. */
.el-route{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:22px;max-width:1120px;margin:20px auto 0;padding:20px 26px;border-radius:var(--r-lg,20px);text-decoration:none;color:inherit;background:color-mix(in oklab,var(--c-lavender-soft) 52%,var(--c-paper));border:1px solid color-mix(in oklab,var(--c-ink) 8%,transparent);transition:background .35s var(--ease-out),border-color .35s var(--ease-out)}
.el-route:hover,.el-route:focus-visible{background:var(--c-lavender-soft);border-color:color-mix(in oklab,var(--c-ink) 14%,transparent)}
.el-route__fig{width:76px;height:76px;object-fit:contain;transition:transform .4s var(--ease-out)}
.el-route:hover .el-route__fig{transform:translateY(-2px) rotate(-2deg)}
.el-route__txt{display:flex;flex-direction:column;gap:4px}
.el-route__titel{font-family:var(--ff-display-active);font-size:20px;font-weight:500;letter-spacing:-.01em}
.el-route__desc{font-size:16px;line-height:1.55;color:color-mix(in oklab,var(--c-ink) 75%,transparent)}
.el-route__pfeil{font-size:19px;color:color-mix(in oklab,var(--c-ink) 55%,transparent);transition:transform .35s var(--ease-out)}
.el-route:hover .el-route__pfeil{transform:translateX(3px)}
@media (max-width:600px){.el-route{grid-template-columns:56px minmax(0,1fr);gap:16px;padding:18px 20px}.el-route__fig{width:56px;height:56px}.el-route__pfeil{display:none}}
/* Redaktionelle Weiterführung, bewusst keine zweite CTA-Fläche. */
.el-weiter{max-width:1120px;margin:26px auto 0;font-size:16px;line-height:1.6;color:color-mix(in oklab,var(--c-ink) 72%,transparent);display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline}
.el-weiter a{color:var(--c-ink);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-coral) 55%,transparent);padding-bottom:1px}
.el-weiter a:hover{border-bottom-color:var(--c-coral)}
/* Rangfolge über die Unterstreichung, nicht über zu blasse Schrift (AA). */
.el-weiter__zwei{color:color-mix(in oklab,var(--c-ink) 78%,transparent)!important;border-bottom-color:color-mix(in oklab,var(--c-ink) 22%,transparent)}
.el-weiter__zwei:hover{border-bottom-color:color-mix(in oklab,var(--c-coral) 55%,transparent)}
@media (prefers-reduced-motion:reduce){.el-route,.el-route__fig,.el-route__pfeil{transition:none}.el-route:hover .el-route__fig,.el-route:hover .el-route__pfeil{transform:none}}

/* Abschluss: CTA führt in den Selbstservice, darunter ein dezenter Textlink (AA-lesbar). */
.nextup__aktion{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.nextup__zusatz{font-size:15px;color:color-mix(in oklab,var(--c-paper) 82%,transparent);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-paper) 45%,transparent);padding-bottom:1px}
.nextup__zusatz:hover,.nextup__zusatz:focus-visible{color:var(--c-paper);border-bottom-color:var(--c-coral)}
/* Inline-Links im NextUp-Beschreibungstext liegen auf der dunklen Ink-Karte:
   helle Paper-Farbe statt der dunklen globalen Linkfarbe. Trifft nur Links im
   <p> der Beschreibung, nicht den .btn-CTA oder .nextup__zusatz. */
.nextup p a{color:color-mix(in oklab,var(--c-paper) 82%,transparent)}
.nextup p a:hover,.nextup p a:focus-visible{color:var(--c-paper)}
/* Handy (22.10.2026): Abschlussknopf nur so breit wie sein Text, wie der Hauptknopf im
   Hero. Vorher volle Breite mit Text links, das wirkte wie ein zu langer Balken. */
@media (max-width:600px){.nextup__zusatz{border-bottom:0;text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--c-paper) 55%,transparent)}}

/* ==========================================================================
   Handy-Optimierung (Oktober 2026)
   Entwurf: Arbeitsfläche «Handy optimieren». Gilt nur für schmale Bildschirme;
   Desktop bleibt unverändert – ausser den zwei Fehlerkorrekturen direkt unten.
   ========================================================================== */

/* Fehlerkorrektur, alle Breiten: border-top auf einem gerundeten Element
   zeichnete über den Zitaten einen gebogenen Strich. */
.bw__ort .bw__karte{border-radius:0}
/* Fehlerkorrektur: «Mitplappern»-Linie im Handy-Menü über die volle Breite */
.mobile-sheet__link.nav__recruit{display:flex}

/* Desktop: neue Handy-Bausteine sind unsichtbar bzw. ohne eigenes Layout */
.hero__fakten{display:contents}
.hero__pfeil,.footer__nur-mobil,.nur-touch{display:none}
@media (hover:none){.nur-touch{display:inline}}

/* Handy-Menü: Hauptaktion als Knopf am unteren Rand (gilt, solange es das Menü gibt) */
.mobile-sheet__cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;flex:none;min-height:54px;border-radius:var(--r-pill);background:var(--c-ink);color:var(--c-paper);text-decoration:none;font-family:var(--ff-body-active);font-weight:500;font-size:16px}
.mobile-sheet__cta:hover,.mobile-sheet__cta:focus-visible{background:var(--c-lavender-hover);color:var(--c-ink)}
.mobile-sheet > nav{margin-bottom:24px}

/* Handy-Menü: Unterpunkte klappen erst auf Antippen auf (Oktober 2026).
   Zugeklappt sind die Links unsichtbar und nicht per Tab erreichbar (visibility). */
.mobile-sheet__auf{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;border-bottom:1px solid color-mix(in oklab,var(--c-ink) 8%,transparent);border-radius:0;line-height:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mobile-sheet__pfeil{flex:none;margin-left:12px;opacity:.6;transition:transform .25s var(--ease-out)}
.mobile-sheet__gruppe.is-offen .mobile-sheet__pfeil{transform:rotate(180deg)}
.mobile-sheet__klapp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease-out)}
.mobile-sheet__gruppe.is-offen > .mobile-sheet__klapp{grid-template-rows:1fr}
.mobile-sheet__klapp > .mobile-sheet__sublist{min-height:0;overflow:hidden;margin:0;visibility:hidden;transition:visibility 0s .28s}
/* inherit statt visible (22.10.2026): sonst waren die Links einer vorab offenen Gruppe
   bei geschlossenem Menü per Tab erreichbar (unsichtbar, aria-hidden). */
.mobile-sheet__gruppe.is-offen > .mobile-sheet__klapp > .mobile-sheet__sublist{visibility:inherit;transition-delay:0s}
.mobile-sheet__klapp li:first-child{margin-top:6px}
.mobile-sheet__klapp li:last-child{margin-bottom:10px}
@media (prefers-reduced-motion:reduce){.mobile-sheet__klapp,.mobile-sheet__pfeil,.mobile-sheet__klapp > .mobile-sheet__sublist{transition:none}}

/* Kopfzeile ohne Linklisten: Menü-Symbol an den rechten Rand (vorher direkt neben dem Logo) */
@media (max-width:1080px){.nav__inner{display:flex;justify-content:space-between}}

/* Kurze Einleitungen nicht mehr nach rechts schieben, sobald der Kopf einspaltig ist */
@media (max-width:760px){.section__lede{justify-self:start}}

/* Kritzelpause auf kleinen Touch-Geräten (Klasse setzt kritzelpause.js): Lesezeichen am
   linken Rand, über der Anfrage-Leiste. Erst ganz sichtbar (.is-zeigt), danach schaut nur
   noch der Kritzel heraus. Wort links, Kritzel rechts, damit er sichtbar bleibt. */
.kp-tab.kp-tab--handy{left:0;bottom:calc(88px + env(safe-area-inset-bottom));min-height:44px;flex-direction:row-reverse;gap:10px;padding:10px 8px 10px 16px;border-radius:0 14px 14px 0;opacity:0;transform:translateX(-100%);transition:opacity .3s var(--ease-out),transform .45s var(--ease-out)}
.kp-tab--handy::before,.kp-tab--handy .kp-tab__ecke{display:none}
.kp-tab--handy .kp-tab__wort{font-size:15px}
.kp-tab--handy .kp-tab__kritzel{width:26px;height:13px}
.kp-tab.kp-tab--handy.is-da,.kp-tab.kp-tab--handy.is-da:hover{opacity:1;transform:translateX(calc(-100% + 40px))}
.kp-tab.kp-tab--handy.is-da.is-zeigt,.kp-tab.kp-tab--handy.is-da.is-zeigt:hover,.kp-tab.kp-tab--handy.is-da:focus-visible{transform:none}
.kp-tab.kp-tab--handy.is-verwandelt{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.kp-tab.kp-tab--handy{transition:none}}
html.kp-offen,html.kp-offen body{overflow:hidden}
.kp.kp--voll{position:fixed;inset:0;z-index:300;width:auto;border-radius:0;display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));transform:none;background:color-mix(in oklab,var(--c-peach-soft) 18%,var(--c-paper))}
.kp.kp--voll.is-offen{transform:none}
.kp--voll .kp__kopf{margin:6px 2px 14px 4px}
.kp--voll .kp__impuls{font-size:20px}
.kp--voll .kp__gross{display:none}
.kp--voll .kp__zu{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-8px -8px 0 0;font-size:28px}
.kp--voll .kp__feld{flex:1;min-height:0;height:auto;border-radius:6px}
.kp--voll .kp__tools{margin:10px 0 0;flex-wrap:wrap;row-gap:0}
.kp--voll .kp__aktionen{margin-left:auto}
.kp--voll::before,.kp--voll::after{display:none}
.kp--voll .kp__farben{gap:2px}
.kp--voll .kp__farbe{width:28px;height:28px;margin:8px}
.kp--voll .kp__zurueck,.kp--voll .kp__loeschen{min-height:44px;padding:0 8px;font-size:15px;color:color-mix(in oklab,var(--c-ink) 74%,transparent)}

@media (max-width:640px){
  /* Kopfzeile: Logo etwas kleiner, gleich hoch auch nach dem Scrollen */
  :root{--nav-h:64px}
  .nav,.nav.is-scrolled{height:64px}
  .nav__logo,.nav.is-scrolled .nav__logo{height:44px}

  /* Einstieg: Überschrift, grosser Elefant, Text, ein Knopf – alles mittig */
  .hero{min-height:0;justify-content:flex-start;padding:calc(var(--nav-h) + 52px) 24px 0;text-align:center}
  .hero__inner{display:flex;flex-direction:column;align-items:center;gap:0}
  .hero__inner > div:first-child{display:contents}
  .hero__title{order:1;font-size:38px;margin:0}
  .hero__visual{order:2;transform:none;justify-self:auto;width:244px;max-width:244px;margin:-16px auto 0}
  .hero__lede{order:3;font-size:17px;line-height:1.55;max-width:32ch;margin:0 auto 32px}
  .hero__ctas{order:4;width:100%;flex-direction:column;align-items:center;gap:6px}
  .hero__ctas .btn{justify-content:center;width:100%}
  /* Hauptknopf nur so breit wie sein Text (wie auf Desktop): klar, aber weniger wuchtig */
  .hero__ctas .btn--primary{width:auto;min-height:56px;padding:0 22px 0 30px}
  .hero__ctas .btn--ghost{min-height:48px;padding:12px;border:0;background:none}
  .hero__pfeil{display:inline}

  /* Fakten: helles Band unter dem Einstieg, getönte Kästchen mittig */
  .hero__fakten{display:block;position:relative;z-index:2;margin:48px -24px 0;padding:28px 24px 8px;background:var(--c-paper);border-radius:28px 28px 0 0}
  .hero__stats{margin:0;max-width:none;gap:8px;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .hero__stat{height:auto;min-height:0;gap:2px;padding:12px 16px;border-radius:14px}
  .hero__stat strong{min-height:0;font-size:16px;line-height:1.3}
  .hero__stat span{font-size:14px;line-height:1.4;text-wrap:balance}
  .hero__kk{margin:18px 0 0;font-size:14.5px;text-wrap:balance}
  .hero__kk b{display:block;margin-bottom:2px;font-family:var(--ff-display-active);font-size:16px;font-weight:700}

  /* Mehr Luft zwischen den Abschnitten */
  .section{padding:72px 24px}
  .section__head{margin-bottom:36px}

  /* Angebot: kompaktere Karten, Tier neben dem Titel */
  .schritte{gap:18px}
  .schritt{position:relative;min-height:0;gap:14px;padding:24px;border-radius:22px}
  .schritt__title{font-size:26px;padding-right:64px}
  .schritt__kicker{padding-right:64px;margin-bottom:12px}
  .schritt__desc{font-size:16px}
  .schritt__foot{display:block}
  .schritt__mascot{position:absolute;top:22px;right:22px}
  .schritt__mascot img{width:52px;height:52px}
  .online-note{margin-top:24px}

  /* Team-Teaser in Kreisen (Circle 2.0, siehe TeamGrid.jsx): weniger Leerraum unter den Namen */
  .team--teaser{gap:28px 16px}
  .team--teaser .member__role{height:auto;min-height:calc(2 * 1.45em)}
  .team--teaser .member__name{height:auto}

  /* Standorte */
  .section .locations .location{padding:16px 16px 18px;border-radius:22px}
  .location__bild{aspect-ratio:16/10;margin-bottom:14px;border-radius:12px}
  .location__name{font-size:26px}
  .location__link{padding:6px 0 2px}

  /* Bewertungen: Wertung auf einer Zeile */
  .bw__ort{padding:22px;gap:14px}
  .bw__ort h3{margin-bottom:6px}
  .bw__wert{font-size:24px}
  .bw__stern{width:16px;height:16px}

  /* FAQ: Elefant neben der Überschrift statt in einer eigenen Zeile, gerade Linien */
  .faq-teaser .section__inner{position:relative}
  .faq-teaser .section__head{padding-right:88px}
  .faq-teaser .faq{gap:0}
  .faq-teaser .faq__sticky{position:absolute;top:24px;right:0;padding:0}
  .faq-teaser .faq__sticky img{width:76px !important}
  .faq-teaser .faq__item{border-radius:0}

  /* Footer: ohne Linklisten, Kontakt und Instagram nebeneinander.
     Weniger Leerraum zwischen Abschluss-Karte und Footer (vorher 104 px, jetzt 64 px). */
  main > .prose-section:last-child{padding-bottom:32px}
  .footer{padding:32px 24px 28px}
  .footer__top{display:block;padding-bottom:20px}
  .footer__logo{height:40px}
  .footer__col{display:none}
  .footer__schnell{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin-top:12px}
  .footer__schnell a{display:flex;align-items:center;min-height:44px;margin:0;border:0;font-size:15px;color:var(--c-ink);text-decoration:none}

  /* Handy-Menü passt auf einen Bildschirm */
  .mobile-sheet{padding:12px 16px max(20px,env(safe-area-inset-bottom))}
  /* kompakter nach Handytest (22.10.2026): passt auch auf ein iPhone SE (375 × 667) */
  .mobile-sheet__top{margin-bottom:12px}
  .mobile-sheet__link{padding:8px 0;font-size:22px;font-weight:600;line-height:1.3}
  .mobile-sheet__sublist{margin:0 0 6px}
  /* zugeklappt ist Platz da: Unterpunkte wieder gut antippbar (≈ 42 px) */
  .mobile-sheet__sublink{padding:9px 0;font-size:15px}
  .mobile-sheet > nav{margin-bottom:12px}
  .mobile-sheet .nav__recruit-tag{font-size:11px;margin-top:6px}
}

/* Tippflächen auf Touch-Geräten (22.10.2026): kleine Textlinks waren 21–26 px hoch.
   Einzeln stehende Links bekommen eine unsichtbar grössere Tippfläche (≈ 44 px),
   ohne dass sich etwas verschiebt. Listen ohne Platz dazwischen bekommen Innenabstand. */
@media (pointer:coarse){
  .crumbs a,.footer__bottom a,.online-note__link,.team__mehr,.bw__link,.faq__weiter,.wortwahl__weiter,
  .nextup__zusatz,.ort__maps,.bp-abschluss a,.k-mehr,.prose p > a:only-child{position:relative}
  .crumbs a::after,.footer__bottom a::after,.online-note__link::after,.team__mehr::after,.bw__link::after,
  .faq__weiter::after,.wortwahl__weiter::after,.nextup__zusatz::after,.ort__maps::after,.bp-abschluss a::after,
  .k-mehr::after,.prose p > a:only-child::after{content:'';position:absolute;top:-10px;bottom:-10px;left:-4px;right:-4px}
  .toc__list{gap:0}
  .toc__list a{display:inline-block;padding:9px 0}
  address a{display:inline-block;padding:6px 0}
}

/* Handy-Menü, «bester Fall» (Oktober 2026) */
/* Seite hinter dem offenen Menü steht still */
html.menue-offen,html.menue-offen body{overflow:hidden}
/* aktuelle Seite: fett mit kleinem Korallenpunkt */
.mobile-sheet [aria-current="page"]{font-weight:700;color:var(--c-ink)}
.mobile-sheet [aria-current="page"]::after{content:'';display:inline-block;flex:none;width:7px;height:7px;margin-left:10px;border-radius:50%;background:var(--c-coral);vertical-align:middle;align-self:center}
/* Hauptpunkte grösser, sobald genug Höhe da ist (kleine Handys wie das iPhone SE bleiben kompakt) */
@media (max-width:640px) and (min-height:740px){
  .mobile-sheet__top{margin-bottom:20px}
  .mobile-sheet__link{font-size:26px;padding:12px 0}
}

/* Spiele auf dem Handy kompakter (22.10.2026, Nutzerwunsch): weniger Rand und Luft,
   damit eine Spielkarte samt Knopf gut auf einen Bildschirm passt. Spielmechanik,
   Texte und Farben unverändert. */
@media (max-width:640px){
  .spielwiese{padding:56px 16px}
  .spielwiese__head{margin-bottom:24px}
  .spielwiese__grid{gap:16px}
  .spielkarte{padding:22px 20px;gap:16px;border-radius:22px}
  .silben{min-height:0;gap:8px}
  .farbe__blob--gross{width:112px;height:112px}
  .reime{gap:10px 12px}
  .reime__col{gap:10px}
  .reime__w{padding:10px 12px;min-height:46px}
  .fuehl__opts{gap:10px}
  .warum{margin-top:0;padding-top:14px}
  .warum p{font-size:14px;line-height:1.5}
  /* noch einen Tick kompakter: «Schmet-ter-ling» bleibt auch bei 360 px auf einer Zeile */
  .spielkarte__head p{font-size:15px}
  .silben__teil{font-size:22px;padding:6px 14px}
  .spielkarte__foot{gap:10px 14px}
  .wortwahl{gap:10px}
  .farbe__blob--gross{width:100px;height:100px}
  .reime__w{min-height:44px}
  /* Eltern-Seite: Kasten «ausserhalb des Kantons» näher an die drei Karten darüber */
  .el-karten{margin-bottom:0}
  .el-route{margin-top:28px}
}

/* Anfrageformular, Spalten (22.10.2026): zwei Spalten nur, wenn jede mindestens
   310 px breit ist. Sonst (etwa 900–1150 px, Formular neben der Einleitung)
   stehen die Felder untereinander, damit Knopfreihen wie Standort, Tage und
   Tageszeit nicht umbrechen. Höchstens zwei Spalten. */
@media (min-width:641px){.af__grid{grid-template-columns:repeat(auto-fill,minmax(max(310px,calc(50% - 8px)),1fr))}}

/* Hervorhebung im Fliesstext eines Formular-Hinweises (22.10.2026), etwa «einmal
   kostenlos»: bleibt in der Zeile, nur fett. Der Titel (.af__notice > strong) bleibt. */
.af__notice p strong{display:inline;font-family:inherit;font-size:inherit;margin:0;font-weight:700}

/* Anfrageformular: kurze Überleitung vor Unterfeldern, etwa «Bitte übernehmen Sie die
   Angaben vom Entscheid.» (22.10.2026) */
.af__zwischen{margin:4px 0 -4px;font-size:14.5px;color:color-mix(in oklab,var(--c-ink) 68%,transparent)}
/* 03.11.2026 (Nutzerhinweis «sehr leicht»): als kleine Zwischenüberschrift für die Felder
   darunter, nicht als Hinweis zum Feld darüber. Kräftiger, mehr Luft nach oben, näher an
   die Felder, die es einleitet. */
.af__block > .af__zwischen.af__zwischen{margin-top:24px;margin-bottom:-12px;font-size:15.5px;font-weight:600;color:color-mix(in oklab,var(--c-ink) 88%,transparent)}
/* Danke-Seite: Erinnerung, Entscheid oder Kostengutsprache anzuhängen */
.af__danke-anhang{padding:12px 16px;border-radius:14px;background:color-mix(in oklab,var(--c-yellow-soft) 46%,var(--c-paper))}

/* Team: Platzhalter «Mitplappern?» (23.10.2026, Nutzerentscheid): nur der Text führt auf
   mitplappern.html, der Fuchs-Kreis reagiert nicht. Unterstrichen, damit er auch am Handy
   ohne Hover als Link erkennbar ist. */
.member__frei-link{display:flex;flex-direction:column;gap:1px;color:inherit;text-decoration:none}
.member__frei-link .member__role-1{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.member__frei-link:hover .member__role-1,.member__frei-link:focus-visible .member__role-1{text-decoration-thickness:2px}
/* Hinter dem Platzhalter steckt kein Portrait: der Fuchs bleibt bei Hover, Tippen und Fokus
   stehen, und der Kreis hebt sich nicht an wie bei den echten Karten (23.10.2026,
   Nutzerfrage). Vorher blendete er aus und liess einen leeren Kreis zurück. */
.member--frei .member__mascot{animation:none!important;transition:none}
.member--frei:hover .member__photo{transform:none}

/* Abschlusskarte (NextUp), Abstände (22.10.2026, Nutzerhinweis): oben und unten gleich
   viel Luft, auf jeder Seite gleich. Folgt die Karte auf einen Textbereich ohne eigene
   Fläche, addierten sich bisher dessen Innenabstand, der eigene Abstand und der Rand
   des letzten Hinweiskastens (bis 144 px auf dem Handy, 211 px am Laptop). Unten bis
   zum Footer-Inhalt gleich viel wie oben (Footer-Innenabstand 64 px, Handy 32 px). */
.prose-section:has(+ .prose-section > .nextup){padding-bottom:0}
.prose-section:has(+ .prose-section > .nextup) .prose > :last-child,
.prose-section:has(+ .prose-section > .nextup) .prose > :last-child > :last-child{margin-bottom:0}
main > .prose-section:has(> .nextup){padding-top:clamp(56px,7vw,96px)}
main > .prose-section:last-child:has(> .nextup){padding-bottom:max(0px,calc(clamp(56px,7vw,96px) - 64px))}
@media (max-width:640px){main > .prose-section:last-child:has(> .nextup){padding-bottom:24px}}
@media (max-width:760px){
  /* Karte etwas kompakter: weniger Luft zwischen Text und Knopf (vorher 32 px) */
  .nextup{gap:22px}
}

/* Mehrere Spiele auf dem Handy: umschalten (22.10.2026, Nutzerentscheid). Knöpfe wie die
   Auswahlknöpfe im Anfrageformular. Am Laptop gibt es die Knöpfe nicht. */
.spielwiese__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.spielwiese__tab{font-family:var(--ff-body-active);font-size:15px;font-weight:600;min-height:44px;padding:8px 18px;border-radius:var(--r-pill);border:1px solid color-mix(in oklab,var(--c-ink) 16%,transparent);background:var(--c-paper);color:var(--c-ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.spielwiese__tab.is-on{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-paper)}
.spielwiese__panel{display:grid}
.spielwiese__panel[hidden]{display:none}

/* Abschlusskarte (NextUp) auf dem Handy etwas kompakter (22.10.2026, Nutzerentscheid
   «Kompakter»): Titel 24 statt 28 px, weniger Rand. Text und Knopf bleiben gleich gross,
   «Anfrage starten» bleibt so gross wie der Hauptknopf im Hero. Laptop unverändert. */
@media (max-width:600px){
  .nextup{padding:24px 20px;gap:18px;border-radius:20px}
  .nextup h3{font-size:24px;margin-bottom:6px}
  .nextup p{line-height:1.5}
}

/* Anfrageformular: Knopf «Erstberatung anfragen» im Hinweis bei «Nein, noch keine
   Abklärung» (22.10.2026) */
.af__zur-eb{margin-top:4px}

/* Text neben dem Absendeknopf mit Anhang-Bitte ist länger (22.10.2026): breitere Spalte,
   sonst brach er auf Tablet und Laptop in acht schmale Zeilen um. Kurzer Text unverändert. */
.af__foot small.af__foot-lang{max-width:54ch;flex:1 1 300px}

/* Abschlusskarte von Hand gebaut (Startseite): der Knopf ist direktes Grid-Kind und wurde
   am Handy auf volle Breite gezogen. Wie bei NextUp nur so breit wie der Inhalt
   (23.10.2026, Nutzerhinweis). */
@media (max-width:760px){.nextup > .btn{justify-self:start}}

/* Anfrageformular: wichtiger Hinweis direkt unter einer Auswahl, z. B. «Dann ist die
   Erstberatung bei uns kostenpflichtig.» Erscheint mit einer kurzen Bewegung dort, wo der
   Blick gerade ist (23.10.2026, Nutzerhinweis). */
.af__hint--wichtig{display:inline-flex;align-items:baseline;gap:8px;padding:6px 12px;border-radius:14px;background:color-mix(in oklab,var(--c-yellow-soft) 70%,var(--c-paper));color:var(--c-ink);font-weight:600;animation:af-wichtig .45s var(--ease-out,ease-out) both}
.af__hint--wichtig::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--c-coral);transform:translateY(-1px)}
@keyframes af-wichtig{0%{opacity:0;transform:translateY(-6px)}60%{opacity:1;transform:translateY(2px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.af__hint--wichtig{animation:none}}

/* Spiele: Wortknöpfe heben sich nur bei echtem Hover an. Am Handy blieb der zuletzt
   angetippte Knopf nach oben versetzt stehen; gefundene Paare heben sich nie an
   (23.10.2026, Nutzerhinweis). */
.reime__w.is-ok:hover{transform:none}
@media (hover:none){.reime__w:hover{transform:none}}

/* Anfrageformular: Interesse an Therapie per Video, wenn die Anfrage von der Seite
   Online-Therapie kommt (?video=1, 23.10.2026). Kein Feld, nur eine ruhige Zeile. */

/* Standorte: Anfrage mit vorgewähltem Standort, im Stil von «Route in Google Maps öffnen»
   (23.10.2026, Nutzerfreigabe). */
.ort__anfrage{margin:14px 0 0}
.ort__anfrage a{display:inline-block;padding:4px 0;font-size:15px;font-weight:600;color:var(--c-ink);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-coral) 45%,transparent)}
.ort__anfrage a:hover,.ort__anfrage a:focus-visible{border-color:var(--c-coral)}

/* Anfrageformular: bevorzugte Zeiten als Raster Tag × Vormittag/Nachmittag (02.11.2026,
   Nutzerentscheid). Ruhige Zellen wie die Chips, gewählt in Tinte mit Häkchen. */
.af__zeiten{display:block;margin-top:18px}
.af__zeiten .af__label{display:block;margin-bottom:8px}
.af__raster{display:grid;grid-template-columns:auto repeat(2,minmax(0,1fr));gap:6px 8px;align-items:center;max-width:360px}
.af__raster-kopf{font-size:13px;font-weight:600;text-align:center;color:color-mix(in oklab,var(--c-ink) 70%,transparent)}
.af__raster-tag{font-size:14.5px;font-weight:700;color:var(--c-ink);padding-right:6px}
.af__zelle{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:12px;border:1px solid color-mix(in oklab,var(--c-ink) 16%,transparent);background:var(--c-paper-2);color:transparent;cursor:pointer;transition:background .15s var(--ease-out),border-color .15s var(--ease-out)}
.af__zelle:hover{border-color:var(--c-lavender)}
.af__zelle.is-on{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-paper)}
.af__zelle:focus-visible{outline:2px solid var(--c-lavender);outline-offset:2px}
.af__zeiten.af__feld--fehlt .af__zelle:not(.is-on){border-color:color-mix(in oklab,var(--c-coral) 70%,var(--c-line));background:color-mix(in oklab,var(--c-coral) 6%,var(--c-paper-2))}
.af__zeiten .af__hint,.af__zeiten .af__fehlt{display:block;margin-top:8px}
@media (hover:none){.af__zelle:hover{border-color:color-mix(in oklab,var(--c-ink) 16%,transparent)}.af__zelle.is-on:hover{border-color:var(--c-ink)}}
/* Kleiner Nachsatz im Hinweiskasten, z. B. Selbstzahler-Möglichkeit unter «Erstberatung anfragen» */
/* Luft im Hinweiskasten (02.11.2026, Nutzerhinweis «zu kompakt»): Knopf bzw. Link mit
   Abstand zum Text, der kleine Nachsatz abgesetzt darunter. */
.af__notice .af__notice-aktion{margin-top:16px}
.af__notice .af__zur-eb{margin-top:0}
.af__notice .af__notice-klein{margin-top:14px;font-size:13.5px;line-height:1.5;color:color-mix(in oklab,var(--c-ink) 62%,transparent)}
/* Fehlende Auswahl: auch die Knöpfe selbst rot umrandet, wie leere Eingabefelder (02.11.2026) */
.af__feld--fehlt .af__chip:not(.is-on){border-color:color-mix(in oklab,var(--c-coral) 70%,var(--c-line));background:color-mix(in oklab,var(--c-coral) 6%,var(--c-paper-2))}

/* Geräte-Durchsicht (03.11.2026) ---------------------------------------------------------
   Tablet hochkant: Raster mit drei Einträgen liessen den dritten allein links stehen.
   Haltungskarten: die letzte Karte nimmt die ganze Breite, Tier links, Text rechts.
   Geschichte: drei Einträge passen nebeneinander. */
@media (min-width:660px) and (max-width:880px){
  .breit .featuregrid > .feature:last-child:nth-child(odd),.jobwide .featuregrid > .feature:last-child:nth-child(odd){grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:26px;row-gap:4px;align-content:center;padding:26px 30px;text-align:left}
  .breit .featuregrid > .feature:last-child:nth-child(odd) .feature__mascot,.jobwide .featuregrid > .feature:last-child:nth-child(odd) .feature__mascot{grid-row:1 / span 2;align-self:center;margin:0}
  .breit .featuregrid > .feature:last-child:nth-child(odd) h3,.jobwide .featuregrid > .feature:last-child:nth-child(odd) h3{grid-column:2;align-self:end;text-align:left;margin:0}
  .breit .featuregrid > .feature:last-child:nth-child(odd) p,.jobwide .featuregrid > .feature:last-child:nth-child(odd) p{grid-column:2;align-self:start;text-align:left;margin:0;max-width:none}
  .zeitfaden__reihe{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}
/* Laptop und gross: Fliesstext in breiten Karten und Antworten höchstens ~72 Zeichen pro
   Zeile, sonst liest es sich schwer (vorher bis 140 Zeichen). */
.faq-teaser .faq__a-in p,.faq-seite .faq__a-in p,.faq__a-in p{max-width:72ch}
.warum p,.hoeren__tipp{max-width:72ch}
.k-eb p{max-width:70ch}
.nextup p{max-width:68ch}
/* Formular-Abstände (03.11.2026, Nutzerhinweis): Hinweise standen näher an der nächsten
   Frage als an ihrem eigenen Feld, Abschnittstitel klebten an den Feldern darüber.
   Feste Abfolge: Feld → 26 px → nächstes Feld; Abschnitt → 44 px → nächster Titel. */
.af__grid{row-gap:26px}
.af__form{gap:44px}
.af__zeiten{margin-top:10px}
/* Fragen direkt im Abschnitt (ausserhalb eines Rasters) bekommen denselben Abstand */
.af__block > :not(legend) + :not(legend):not(.af__zeiten){margin-top:10px}
.af__block > .af__zwischen + *{margin-top:0}
.benefits p,.bp-schritt p{max-width:72ch}
/* Laptop (03.11.2026, Nutzerhinweis): Die vier Teamkreise auf der Startseite waren mit
   260 bis 320 px deutlich grösser als auf der Teamseite (rund 170 px) und wirkten zu
   präsent. Jetzt höchstens 200 px, mittig in ihrer Spalte. */
@media (min-width:881px){.team--teaser .member__photo{width:100%;max-width:200px;margin-inline:auto}}

/* Formularversand über den Server (03.11.2026): Unterlagen hochladen, Versandfehler,
   Bot-Falle. Nur sichtbar, wenn window.PLPG_ANFRAGE_API gesetzt ist. */
.af__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.af__datei{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.af__datei-knopf{position:relative;cursor:pointer}
.af__datei-knopf input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.af__datei-knopf:focus-within{outline:2px solid var(--c-link);outline-offset:3px}
.af__feld--fehlt .af__datei-knopf{border-color:#c0392b}
.af__dateien{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:100%;max-width:560px}
.af__dateien li{display:flex;align-items:center;gap:12px;padding:10px 8px 10px 14px;border-radius:12px;background:color-mix(in oklab,var(--c-teal-soft) 45%,var(--c-paper));font-size:15px}
.af__dateien li span{flex:1;min-width:0;overflow-wrap:anywhere}
.af__dateien li small{color:color-mix(in oklab,var(--c-ink) 66%,transparent);white-space:nowrap}
.af__datei-weg{border:0;background:none;padding:10px 8px;min-height:44px;font:inherit;font-size:14px;color:var(--c-link);text-decoration:underline;cursor:pointer}
.af__sendfehler{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;border-radius:14px;background:#fbeae3;color:#8a3d27}
.af__sendfehler p{margin:0;flex:1 1 300px;max-width:62ch}
.btn[disabled]{opacity:.7;cursor:progress}

/* Einleitung mit Zeilenumbruch (10.11.2026, Nutzerwunsch): jeder Satz beginnt auf einer
   eigenen Zeile, die Zeilen innerhalb eines Satzes sind ausgeglichen. So hängt weder ein
   einzelnes «Wir» am Zeilenende noch bleibt eine kurze Restzeile stehen.
   Betrifft Startseite (.hero__lede) und Seitenköpfe mit «\n» im Lede (Standorte). */
.lede-satz{display:block;text-wrap:balance}

/* Hinweis bei der Telefonnummer auf standorte.html (10.11.2026, Nutzerentscheid):
   ruhige Zeile zwischen «Termine nach Vereinbarung» und «Anfrage für …». */
.ort__telefon-hinweis{margin:12px 0 0;max-width:40ch;font-size:14.5px;line-height:1.5;color:color-mix(in oklab,var(--c-ink) 74%,transparent)}
/* Kontrast «Termine nach Vereinbarung» (10.11.2026): war 48 % Tinte (2,55:1 auf der Karte),
   jetzt 72 % (≥ 4,5:1, WCAG AA) wie die übrigen kleinen Zeilen. Nur die Farbe. */
.ort__termine{color:color-mix(in oklab,var(--c-ink) 72%,transparent)}
/* Abstand Titel → Lede im breiten Seitenkopf (10.11.2026, Hinweis Nora): Standorte und
   Über uns hatten 48 px (Titel-Rand 24 px + Raster-Abstand 24 px), doppelt so viel wie die
   übrigen Seiten. Jetzt 24 px. Angebot (lavendel) hat eigene Werte und bleibt unverändert. */
.pagehero--wide:not(.pagehero--lavender) .pagehero__title{margin-bottom:0}
/* Telefon-Hinweis und Anfrage-Link in einem hellen Kasten (10.11.2026, Wunsch Nora: dezent,
   aber sofort sichtbar, Karte nicht überfüllt). Heller als die Karte, ohne Rahmen. */
.ort__hinweis{margin:16px 0 0;padding:14px 18px 10px;max-width:46ch;border-radius:16px;background:color-mix(in oklab,var(--c-paper) 78%,transparent)}
.ort__hinweis .ort__telefon-hinweis{margin:0;max-width:none}
.ort__hinweis .ort__anfrage{margin:6px 0 0}
/* Eingangsbestätigung (11.11.2026): Adresse auf der Danke-Seite, lange Adressen brechen um. */
.af__danke-adresse{font-weight:600;overflow-wrap:anywhere}