/* ═══════════════════════════════════════════════════════════════════════════
   treffix — die gemeinsame Hülle aller Web-Seiten (DESIGN.md §Web, ENT-2026-09-03-2)
   Was hier steht, gilt auf JEDER Seite: Grund und Typo, Nav-Pille + Mobile-Sheet, Reveal,
   FAQ-Accordion, Flame-Footer, Textseiten-Layout. Seitenspezifisches bleibt in der Seite.
   Farben, Skala und Primitives kommen aus /tokens.css (davor einbinden).
   Markup der Hülle: landing/_shell/*.html — gestempelt per scripts/landing-shell/stamp.mjs
   zwischen <!-- shell:NAME --> und <!-- /shell:NAME -->; Drift-Wache __tests__/landingShell.
   Verhalten: /site.js (Sprache, Nav-Glas, Sheet, Reveal).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grund ── */
*{box-sizing:border-box;margin:0;padding:0}
/* !important: sonst gewinnt jede Nachfahren-Regel mit drei Klassen und zeigt beide Sprachen. */
html[data-lang="de"] .t-en{display:none !important}
html[data-lang="en"] .t-de{display:none !important}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-size:var(--t-body);line-height:1.55;min-height:100dvh;
  display:flex;flex-direction:column;overflow-x:clip}
main{flex:1}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:var(--font-disp);letter-spacing:0;line-height:1.02;text-wrap:balance;font-weight:800}
p{text-wrap:pretty}
.shell{max-width:1120px;margin:0 auto;padding:0 var(--gutter);width:100%}
.disp{font-family:var(--font-disp)}
/* Emphase-Wort als Textmarker: Malt-Type auf Turmeric-Box — Turmeric-Type auf Weiß trüge mit 1.66:1 nichts (Regel 3, Web-Register) */
.tone{color:var(--ink);background:var(--brand);padding:0 .12em;margin:0 -.03em;border-radius:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.center{text-align:center}
.lede{color:var(--ink2);font-size:var(--t-body);line-height:1.55;max-width:46ch}
.center .lede{margin-left:auto;margin-right:auto}
h2{font-size:var(--t-h1)}
h3{font-size:var(--t-h3)}
.hidden{display:none}

/* ── Reveal (IntersectionObserver in site.js): fade + rise, Stagger je Sichtbarkeits-Batch. ── */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),translate .5s cubic-bezier(.16,1,.3,1),rotate .5s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
/* Wort-Split (data-split, Root): erscheint Wort für Wort. */
.js [data-split] .w{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 45ms)}
.js [data-split].in .w{opacity:1;transform:none}
.progress{display:none}

/* ── Knöpfe über tokens.css hinaus ── */
.btn-ghost-ink{background:transparent;color:var(--brandInk);border:1.5px solid rgba(138,100,0,.35)} /* Rand = brandInk (Ocker) bei 35 % */
.btn .arr{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.btn:hover .arr{transform:translateX(4px)}
.magnet{transform:translate(var(--mx,0),var(--my,0));transition:transform .25s cubic-bezier(.16,1,.3,1)}

/* ══ Nav: schwebende Pille, Glas ab dem ersten Scroll (Sentinel + IO, kein Listener). ══ */
.nav-wrap{position:sticky;top:10px;z-index:40;padding:0 var(--gutter)}
.nav{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px 8px 18px;border-radius:999px;background:rgba(255,255,255,.82);
  border:1px solid rgba(42,35,18,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:box-shadow .35s ease,background .35s ease}
.nav.is-scrolled{box-shadow:0 12px 32px rgba(42,35,18,.10);background:rgba(255,255,255,.9)}
.brandrow{display:flex;align-items:center;gap:9px;min-height:44px}
/* Founder-Entscheid 2026-09-05 (Nav-Variante A): auf dem Handy war die Pille „echt schlecht formatiert" —
   drei Elemente auf engem Raum. Jetzt zwei Zonen: links Mark + Wortmarke eine Stufe kleiner, rechts ein
   echtes DE/EN-Segment, ganz rechts der Menü-Knopf. Das Dock aus Variante C war am 2026-09-05 kurz live und ist auf
   Founder-Wunsch wieder gefallen („die vorherige Navigation fand ich doch besser"). Desktop bleibt die gewohnte Pille. */
.brandrow svg{width:32px;height:auto;display:block;color:var(--ink)} /* Huddle-Mark auf Hell in Malt (fill=currentColor im Partial) — Turmeric trägt auf Weiß nichts; Favicons/App-Icon bleiben Flame (OFFENE-PUNKTE §21) */
.brandrow .name{font-family:var(--font-disp);font-weight:800;font-size:var(--t-h3);letter-spacing:-.01em;color:var(--ink)}
/* Krume: nur auf Unterseiten (site.js setzt sie), nur unter 900px — ab da tragen die Nav-Links die Orientierung. */
.nav-crumb{display:none;min-width:0;flex:0 1 auto;padding-left:10px;margin-left:2px;border-left:1px solid var(--iosSep);
  font-size:var(--t-body-s);font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-crumb:not([hidden]){display:block}
/* Unter 700px weicht auf Unterseiten die Wortmarke, damit der Seitenname ganz dasteht — das
   Huddle-Mark bleibt (etwas kleiner) und trägt die Marke; ab 700px steht beides nebeneinander. */
@media (max-width: 699px){
  .nav.has-crumb .brandrow .name{display:none}
  .nav.has-crumb .brandrow svg{width:28px}
  .nav.has-crumb .nav-crumb{font-size:var(--t-body-s);color:var(--ink);padding-left:10px;margin-left:2px}
  /* Der Seitenname soll ganz dastehen: Pille und Segment geben ihm die Millimeter dafür. */
  .nav.has-crumb{padding-left:14px;padding-right:8px}
  .nav.has-crumb .langsw button{padding:0 9px}
  .nav.has-crumb .nav-right{gap:6px}
}
/* Schmale Android-Geräte (360px): eine Stufe enger, damit der Seitenname auch dort ganz dasteht.
   Darunter (≤ 340px) schneidet die Krume mit Ellipse ab — die Badge-Pille unter der Nav trägt den
   vollen Namen ohnehin ein zweites Mal, es geht also nichts verloren. */
@media (max-width: 379px){
  .nav.has-crumb{gap:6px}
  .nav.has-crumb .nav-crumb{font-size:var(--t-meta);padding-left:8px}
  .nav.has-crumb .langsw button{padding:0 7px}
}
.nav-links{display:none;align-items:center;gap:2px}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;
  font-size:var(--t-body-s);font-weight:600;color:var(--ink);opacity:.72;border-radius:999px;transition:opacity .14s ease}
.nav-links a::after{content:'';position:absolute;left:13px;right:13px;bottom:8px;height:2px;border-radius:2px;background:var(--brandInk); /* 2 px Turmeric auf Weiß wären unsichtbar — Ocker 5.4:1 */
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nav-links a.is-active{opacity:1}
.nav-links a.is-active::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:8px}
/* Sprach-Segment: ein Schalter statt zweier blasser Wörter. Track 44px hoch (wie die Knopf-Zeile),
   die aktive Hälfte liegt in Weiß darin. */
.langsw{display:flex;align-items:center;gap:0;padding:2px;border-radius:999px;background:var(--iosBg)}
.langsw button{background:none;border:none;cursor:pointer;font-family:inherit;border-radius:999px;
  font-size:var(--t-meta);font-weight:700;letter-spacing:.03em;color:var(--ink2);padding:0 12px;min-height:40px;line-height:1;
  transition:background-color .16s ease,color .16s ease}
.langsw button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(42,35,18,.10)}
.nav .btn{display:none;min-height:44px;padding:0 18px;font-size:var(--t-body-s)}
/* Menü-Knopf (Handy): Papier-Kreis 44px, Phosphor-List-Glyph in Ink — Variante A (Founder 2026-09-05, nach dem
   Live-Blick auf A und C). Vorher drei handgezeichnete Striche; die Glyphe kommt jetzt aus derselben Familie wie
   alle UI-Icons (docs/BRAND.md §5). */
.burger{width:44px;height:44px;border:0;background:var(--paper);cursor:pointer;display:grid;place-items:center;border-radius:999px;color:var(--ink)}
.burger svg{width:24px;height:24px;fill:currentColor;display:block}
.burger:focus-visible,.sheet-close:focus-visible{outline:2px solid var(--brandInk);outline-offset:2px}
/* Mobile-Sheet: rollt von oben, Links groß in der Display-Schrift, gestaffelt; Schließen-Glyph Phosphor x. */
.sheet{position:fixed;inset:0;z-index:60;background:var(--white);padding:76px var(--gutter) 24px;overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-102%);transition:transform .55s cubic-bezier(.16,1,.3,1);visibility:hidden} /* 76px oben = Marken-Zeile; overflow, damit das Sheet im Quer-Handy rollt statt Links abzuschneiden */
.sheet.open{transform:none;visibility:visible}
.sheet-brand{position:absolute;top:16px;left:var(--gutter);min-height:44px} /* die Marke bleibt auch im offenen Menü sichtbar */
.sheet-links{display:grid;align-content:center;gap:8px;min-height:100%}
.sheet-links a{font-family:var(--font-disp);font-weight:800;font-size:var(--t-display);line-height:1.05;color:var(--ink);padding:8px 0;
  opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.sheet.open .sheet-links a{opacity:1;transform:none;transition-delay:calc(var(--i) * 60ms + 120ms)}
.sheet-links .btn{margin-top:14px;justify-self:start;font-size:var(--t-cta);line-height:1.2;color:var(--ink);padding:0 28px} /* Turmeric-Pille: Malt-Type, nie Weiß */
.sheet-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border:0;background:var(--paper);border-radius:999px;cursor:pointer;
  display:grid;place-items:center;color:var(--ink)}
.sheet-close svg{width:22px;height:22px;fill:currentColor;display:block}
body.sheet-open{overflow:hidden}

/* ══ FAQ-Accordion (Root und /hilfe): echtes details, Höhe animiert wo der Browser es kann. ══ */
.faqs{max-width:760px;margin-left:auto;margin-right:auto}
details{border-top:1px solid var(--iosSep)}
details:last-child{border-bottom:1px solid var(--iosSep)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;
  font-family:var(--font-disp);font-weight:700;font-size:var(--t-h3)}
summary::-webkit-details-marker{display:none}
summary > span:first-child{flex:1}
summary i{width:30px;height:30px;border-radius:50%;background:var(--blush);color:var(--brandInk);display:grid;place-items:center;font-style:normal;flex:0 0 auto;transition:transform .35s cubic-bezier(.16,1,.3,1)}
details[open] summary i{transform:rotate(45deg)}
details p{padding:0 0 18px;color:var(--ink2);font-size:var(--t-body-s);max-width:60ch}
details .a{padding:0 0 18px;color:var(--ink2);max-width:60ch}
details .a p{padding:0}
details .a p + p{margin-top:8px}
@supports (interpolate-size: allow-keywords){
  details::details-content{height:0;overflow:clip;transition:height .45s cubic-bezier(.16,1,.3,1),content-visibility .45s allow-discrete}
  details[open]::details-content{height:auto}
  :root{interpolate-size:allow-keywords}
}

/* ══ Flame-Footer: die Signalfarbe als Fläche. Kleintext Espresso (5.2:1), Weiß nur Großes. ══ */
/* overflow:clip statt hidden (hidden bleibt Rückfall für alte Browser) hier, an .wm und .stp: hidden macht die Box zum
   Scroll-Container, und darin fror jede view()-Timeline der Startseite ein (index.html, Block „Motion am Finger"). */
/* Der Footer ist der ABEND des Web-Registers (ENT-2026-09-11-3, Regel 2): Malt-Grund, weiße Zeilen (15.6:1),
   Turmeric-Pille für die Warteliste, Turmeric-Haarlinien. Die Link-Spalten bleiben die Papier-Karte. */
.foot{background:var(--ink);color:var(--white);border-radius:40px 40px 0 0;padding:64px 0 28px;position:relative;overflow:hidden;overflow:clip;margin-top:auto}
.foot .shell{position:relative;z-index:1}
.foot h2{max-width:14ch}
.foot .lede{color:rgba(255,255,255,.86);margin-top:12px}
.foot :focus-visible{outline-color:var(--brand)}
.foot .btn-paper{margin-top:24px}
.foot .btn-ink{background:var(--brand);color:var(--ink);box-shadow:0 10px 24px rgba(255,190,11,.35)} /* auf Malt wäre die Malt-Pille weg */
.fcols-eyebrow{margin-top:40px;font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--white)}
/* Founder-Entscheid 2026-09-05 (Variante A): die Link-Spalten waren „visuell kaum erkennbar". Sie sitzen
   jetzt in EINER Papier-Karte auf dem Flame-Grund — dort trägt Espresso volle Lesbarkeit (12:1) statt
   Espresso-auf-Flame (5,2:1). Jede Seite ist eine eigene Zeile mit Haarlinie und Pfeil: ein Verzeichnis,
   keine Wortliste. Kein Rand, nur --shadow-card (Kanon). Marke und Claim bilden das Kopfstück. */
.fcols{margin-top:10px;background:var(--paper);border-radius:var(--radius-sheet);box-shadow:var(--shadow-card);
  padding:22px 20px 12px;display:grid}
.fbrand{padding-bottom:14px}
.fbrand-row{display:flex;align-items:center;gap:10px;min-height:44px}
.fbrand-mark{flex:0 0 auto;width:30px;height:auto;display:block;color:var(--brand)}
.fbrand-name{font-family:var(--font-disp);font-weight:800;font-size:var(--t-h2);letter-spacing:-.01em;line-height:1;color:var(--ink)}
.fbrand-claim{margin-top:4px;font-size:var(--t-body-s);color:var(--ink2);max-width:32ch}
.fpin{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:var(--t-meta);font-weight:600;color:var(--ink2)}
.fpin svg{width:14px;height:14px;flex:0 0 auto;display:block}
.fcol{padding-top:12px}
.fcol b{display:block;margin-bottom:2px;font-family:var(--font-disp);font-weight:800;font-size:var(--t-h3);letter-spacing:-.01em;color:var(--ink)}
/* Die Haarlinie sitzt OBEN an jeder Zeile: so trennt sie Titel von erster Zeile und Zeile von Zeile,
   ohne dass die letzte Zeile eine Linie ins Leere zieht. */
.fcol a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 0;
  border-top:1px solid var(--iosSep);font-size:var(--t-body);font-weight:600;line-height:1.35;color:var(--ink)}
.fcol .far{flex:0 0 auto;font-size:var(--t-body-s);color:var(--ink2);transition:transform .18s ease,color .18s ease}
.fbottom{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;font-size:var(--t-meta);color:var(--white)}
/* Wasserzeichen: viewBox 720x224, Grundlinie 156 — so geschnitten, dass das translateY(24%) (Basis hier,
   auf der Startseite steigt sie am Finger von 70 % dorthin — Block „Motion am Finger" in index.html) nur Leerraum abschneidet; das Wort bleibt ganz lesbar.
   Der Versatz lässt oben im Kasten ~8,6 % der Breite leer — das holt der negative Prozent-Rand zurück
   (Prozent zählt gegen die Footer-Breite, skaliert also mit jeder Viewport-Breite mit). */
.wm{margin:-6% 0 0;overflow:hidden;overflow:clip;line-height:0}
.wm svg{display:block;width:100%;height:auto;transform:translateY(24%)}
.wm text{font-family:var(--font-disp)}
.wm text:not([fill]){fill:var(--white)} /* Rückfall für noch nicht gestempelte Seiten (ohne Pattern-Füllung) */
.wm-fallback{fill:var(--blush)} /* nur sichtbar, wenn das Foto nicht lädt */
.wm-img{filter:saturate(1.35) contrast(1.08)} /* das Foto trägt die Kontrastfarbe zum Flame-Grund selbst — keine Wäsche mehr (Founder 2026-09-05) */
@media (hover: hover){
  .fcol a:hover .far{transform:translateX(3px);color:var(--brandInk)}
}
@media (prefers-reduced-motion: reduce){
  .fcol .far{transition:none}
}
@media (min-width: 900px){
  /* .foot davor, weil der gemeinsame Desktop-Block weiter unten in site.css .fcols setzt — zwei
     Klassen schlagen eine, unabhängig von der Reihenfolge. Drei Spalten (Marke, Unternehmen,
     Rechtliches) seit die Anker-Spalte weg ist (ENT-2026-09-05-7 (6)); Spaltenluft (20px) und 1.2fr für
     die Marke stammen aus der Vier-Spalten-Messung vom 2026-09-04 („Nutzungsbedingungen“ berührte bei
     genau 900px die Trennlinie) und tragen auch mit drei Spalten. */
  .foot .fcols{grid-template-columns:1.2fr 1fr 1fr;margin-top:60px;padding-top:8px}
  .foot .fcol{padding:26px 20px 8px 30px;border-bottom:0;border-left:1px solid rgba(255,190,11,.22)}
  .foot .fcol:first-child{padding-left:0;border-left:0}
  .foot .fbrand{order:0;padding-top:26px}
  .fcols{grid-template-columns:1.1fr 1fr 1fr;gap:0 34px;padding:30px 32px 18px;align-items:start}
  .fbrand{padding:0 26px 0 0;border-right:1px solid var(--iosSep)}
  .fbrand-mark{width:34px}
  .fbrand-claim{max-width:26ch}
  .fcol{padding-top:0}
  .fbottom{justify-content:space-between;gap:8px 20px;margin-top:30px;padding-top:16px;border-top:1px solid rgba(255,190,11,.22)}
  .wm{margin-top:-6%}
}

/* ══ Textseiten (Katalog, Rechtsseiten, 404): Kopf zentriert, Lesespalte links. ══ */
.page{padding:40px 0 70px}
.page-head{text-align:center;max-width:820px;margin:0 auto 34px}
.page-head .badge-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--paper);
  border:1px solid var(--iosSep);font-size:var(--t-meta);font-weight:700;color:var(--ink)}
.page-head h1{font-size:var(--t-display);margin:16px auto 0;max-width:16ch;overflow-wrap:anywhere} /* Netz für Ein-Wort-Titel (Nutzungs&shy;bedingungen); die Trennstelle steht im Markup */
.page-head .lede{margin:14px auto 0;max-width:56ch}
.page-body{max-width:740px;margin:0 auto;font-size:var(--t-body);line-height:1.6}
.page-body h2{font-size:var(--t-h2);margin:38px 0 10px}
.page-body h3{font-size:var(--t-h3);margin:26px 0 8px}
.page-body p{color:var(--ink2)}
.page-body p + p{margin-top:10px}
.page-body ul,.page-body ol{margin:8px 0 0;padding-left:20px;color:var(--ink2)}
.page-body li{margin:6px 0}
.page-body li::marker{color:var(--brandInk)}
.page-body a{color:var(--brandInk);text-decoration:underline;text-underline-offset:3px}
.page-body strong{color:var(--ink)}
.page-body em{font-style:normal;font-weight:600;color:var(--ink)}
.page-body address{font-style:normal;color:var(--ink2);line-height:1.6}
.page-body .stand{font-size:var(--t-body-s);color:var(--ink2);margin-top:-6px;margin-bottom:8px} /* das rechtlich relevante Datum liest sich wie Fließtext, nicht wie Kleingedrucktes */
.page-body p,.page-body li{max-width:68ch} /* Lesekomfort auf der 740px-Spalte */
/* Sprungliste der Rechtsseiten: Pills auf Papier, Anker mit scroll-margin (s. o.). */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;padding:0;list-style:none}
.jump li{margin:0}
.jump a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;background:var(--paper);
  box-shadow:var(--shadow-soft);font-size:var(--t-meta);font-weight:700;color:var(--ink);text-decoration:none}
.jump a:hover{background:var(--blush)}
.page-body .card{background:var(--paper);box-shadow:var(--shadow-card);border-radius:var(--radius-sheet);padding:20px 22px;margin-top:26px}
.page-body .card > h2:first-child,.page-body .card > .itile-ic + h2{margin-top:12px}
.page-body .note{background:var(--blush);border-radius:var(--radius-sheet);padding:20px 22px;margin-top:26px} /* Tint-Box: Farbe kodiert „gut zu wissen", ohne Schatten */
.page-body .note p{color:var(--ink)}
.page-body details{border-color:var(--iosSep)}
.page-body [id]{scroll-margin-top:90px} /* Anker landen nicht unter der sticky Nav-Pille */
.hand{font-family:var(--font-hand);font-size:var(--t-hand);line-height:1.15;color:var(--ink2);margin-top:8px}

/* ══ Vokabular der Katalog-Seiten (PR B1, Founder 2026-09-05 „das Design mit in die anderen Seiten hereintragen"):
   die Root-Muster leben hier, damit Hilfe, Über uns und Konto löschen dieselben Karten tragen wie die Startseite.
   Die Root behält nur ihr Sektions-Layout (Abstände, Spalten) im eigenen <style>. ══ */
/* Kopf mit Leben: Icon in der Badge-Pill, zwei flache Formen dahinter (Regel 4: wenige, nie über Text — sie sitzen
   am Rand, das Textfeld liegt darüber). Nur auf Seiten, die die Formen im Markup tragen. */
.page{position:relative;overflow:hidden}
.page .shell{position:relative;z-index:1}
.page-head .badge-pill svg{width:15px;height:15px;display:block;fill:currentColor;color:var(--brandInk);flex:0 0 auto}
.pform{position:absolute;z-index:0;pointer-events:none;border-radius:50%}
.pform-1{left:-64px;top:96px;width:150px;height:150px;border:26px solid var(--blush100)}
.pform-2{right:-36px;top:36px;width:96px;height:96px;background:var(--eventBg)}
/* Icon-Kacheln: Karte ohne Rand, Phosphor-Duotone im weißen Quadrat, Titel, Satz (Prinzipien, „Vielleicht reicht weniger"). */
.itiles{display:grid;gap:14px;margin-top:18px}
.itile{background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px 20px 22px}
.itile-ic{width:44px;height:44px;border-radius:var(--radius-btn);display:grid;place-items:center;background:var(--white);color:var(--brandInk);box-shadow:var(--shadow-soft)}
.itile-ic svg{width:24px;height:24px;fill:currentColor;display:block}
.itile h3{margin:14px 0 0;font-size:var(--t-h3)}
.itile p{margin-top:6px;font-size:var(--t-body-s)}
.page-body .itile h3{margin-top:14px}
.cards-2{display:grid;gap:14px;margin-top:18px}
.cards-2 .card{margin-top:0}
.cards-2 .card ul{margin-top:8px}
.page-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* FAQ-Karten (aus der Root gehoben): details ohne Rand, Papier, Duotone-Icon im weißen Quadrat, offen = Weiß. */
.faq3-list{display:grid;gap:10px}
/* border:0 mit Element+Klasse, damit es das `details:last-child`-Bottom aus dem Accordion-Block schlägt. */
details.faq3-q{border:0;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  transition:background .3s ease,box-shadow .3s ease}
details.faq3-q[open]{background:var(--white)}
.faq3-q summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:15px 16px;border-radius:var(--radius-card);list-style:none}
.faq3-q summary::-webkit-details-marker{display:none}
.faq3-q summary > span:first-child{flex:none} /* der Accordion-Block gibt dem ersten Kind flex:1 — im Grid egal, hier trotzdem explizit */
.faq3-ic{width:38px;height:38px;border-radius:var(--radius-btn);display:grid;place-items:center;
  background:var(--white);color:var(--brandInk);box-shadow:var(--shadow-soft);transition:background .3s ease}
.faq3-q[open] .faq3-ic{background:var(--blush)}
.faq3-ic svg{width:22px;height:22px;fill:currentColor;display:block}
.faq3-t{line-height:1.2}
.faq3-q > p{padding:0 18px 16px;color:var(--ink2);font-size:var(--t-body-s);max-width:62ch}
.faq3-q > .a{padding:0 18px 16px;max-width:62ch}
.js .faq3-list .reveal{transition-delay:calc(var(--i) * 60ms)}
/* Schritt-Karten (aus der Root gehoben): große Ziffer in Flame, Titel, Satz, optional ein Objekt in der Ecke. */
.stp-grid{display:grid;gap:16px;max-width:440px;margin:30px auto 0}
.stp{position:relative;overflow:hidden;overflow:clip;background:var(--white);border-radius:var(--radius-sheet);box-shadow:var(--shadow-card);
  padding:26px 24px 28px;display:flex;flex-direction:column}
/* Ziffer als Turmeric-Coin mit Malt-Zahl (Sticker-Geste): Turmeric-Type auf Weiß trüge nichts. align-self, weil .stp ein
   Spalten-Flex ist — ohne das streckt der Coin zur Vollbreite. */
.stp-n{display:inline-grid;place-items:center;align-self:flex-start;min-width:1.4em;height:1.4em;padding:0 .25em;border-radius:999px;
  font-family:var(--font-disp);font-weight:800;font-size:var(--t-num);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);background:var(--brand)}
.stp h3{font-size:var(--t-h2);margin-top:30px} /* Ziffer endet bei 26+44=70px, das gedrehte Objekt bei ~93px, h3 startet bei 100px */
.stp p{color:var(--ink2);font-size:var(--t-body-s);margin-top:8px;max-width:30ch}
.stp-n,.stp h3,.stp p{position:relative;z-index:1}
.stp-obj{position:absolute;top:-34px;right:-24px;width:116px;height:116px;rotate:12deg;pointer-events:none;
  transition:rotate .5s cubic-bezier(.16,1,.3,1),scale .5s cubic-bezier(.16,1,.3,1)}
.js .stp-grid.in .stp-n{animation:stp-pop .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i) * 260ms + 150ms)}
@keyframes stp-pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
/* Team-Karten (aus der Root gehoben): Blush, Zitat oben, Person darunter — Porträts als CSS-Hintergrund (landing-verify liest sie). */
/* Handy/Tablet: Wisch-Reihe (ENT-2026-09-05-7 (4)): die Karten liegen nebeneinander, die erste steht ganz im Bild, die
   nächste schaut rechts herein und liegt 20px über der vorigen — nach links wischen holt sie. Der ::after-Platzhalter
   (Restbreite neben einer Karte) macht die letzte Karte erst am Anfang schnappbar; das Polster unten gibt dem Schatten
   Luft, das negative margin nimmt es dem Fluss wieder; die Maske macht die Schnittkante weich (auf Über uns liegt sie
   zwischen 790 und 899px innerhalb des Viewports). Fokus-Ring auf den Karten, nicht am Scroller — die Maske radierte
   ihn an der Kante weg. Ab 900px drei Spalten (Desktop-Block unten). */
.team-row{display:flex;gap:0;align-items:flex-start;margin-top:28px;margin-bottom:-14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter);padding:12px var(--gutter) 30px;margin-inline:calc(-1 * var(--gutter));scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%)}
.team-row::-webkit-scrollbar{display:none}
.team-row::after{content:"";flex:0 0 max(14%,calc(100% - 420px))}
.team-row:focus-visible{outline:none}
.team-row:focus-visible > .tm{outline:2px solid var(--brandInk);outline-offset:3px} /* Turmeric-Ring auf Weiß trüge kein Zeichen */
.tm{flex:0 0 86%;max-width:420px;scroll-snap-align:start}
.tm + .tm{margin-left:-20px}
.tm-2{z-index:2}
.tm-3{z-index:3}
.tm{position:relative;display:grid;align-content:start;gap:14px;background:var(--blush);border-radius:var(--radius-sheet);
  padding:22px 22px 24px;box-shadow:var(--shadow-card);transition:translate .45s cubic-bezier(.16,1,.3,1)}
.tm-who{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--blush100)}
.tm .av{width:56px;height:56px;flex:0 0 auto;font-size:var(--t-body-s);box-shadow:var(--shadow-soft)}
.tm-1 .av{background:var(--blush) url(/img/philipp.jpg) center/cover no-repeat}
.tm-2 .av{background:var(--blush) url(/img/przemyslaw.jpg) 58% 26%/175% no-repeat}
.tm-3 .av{background:var(--white);color:var(--ink2)}
.tm-tx{min-width:0}
.tm-tx > b{display:block;font-family:var(--font-disp);font-weight:800;font-size:var(--t-body);line-height:1.15}
.tm-tx > span{display:block;margin-top:2px;font-size:var(--t-meta);font-weight:700;letter-spacing:.02em;color:var(--ink2)}
.tm q{display:block;quotes:"„" "“";
  font-family:var(--font-disp);font-weight:700;font-size:var(--t-h3);line-height:1.34;text-wrap:pretty}
html[data-lang="en"] .tm q{quotes:"“" "”"}
.tm-1 q{font-size:var(--t-h2);line-height:1.22}
@media (hover: hover){
  .foot .btn-ink:hover{box-shadow:inset 0 0 0 999px rgba(42,35,18,.08),0 10px 24px rgba(255,190,11,.35)} /* Glow bleibt, Overlay in Malt */
  .faq3-q:hover{box-shadow:0 14px 26px rgba(42,35,18,.13)}
  .faq3-q:hover .faq3-ic{background:var(--blush)}
  .stp:hover{translate:0 -4px} /* den Übergang liefert .js .reveal — die Karte trägt .reveal */
  .stp:hover .stp-obj{rotate:4deg;scale:1.06}
  .tm:hover{translate:0 -5px}
}

/* ══ Bridges (/c, /i, /p, /mail-aus): transaktional — Wortmarke, eine Karte, Pill-Knopf, kleine
   Fußzeile. Keine Nav: wer per Einladungs- oder Mail-Link kommt, soll handeln, nicht stöbern.
   Markup: _shell/bridge-head.html + bridge-foot.html. ══ */
.bridge{flex:1;width:100%;max-width:520px;margin:0 auto;padding:18px var(--gutter) 40px}
.bridge-head{display:flex;align-items:center;justify-content:space-between;min-height:56px;margin-bottom:20px}
.bridge .crew{font-size:var(--t-body-s);font-weight:700;color:var(--ink2);margin-bottom:6px}
.bridge h1{font-size:var(--t-h1);margin-bottom:14px}
.bridge h2{font-size:var(--t-h2);margin-bottom:10px}
.bridge .card{padding:24px;box-shadow:var(--shadow-card)}
.bridge p{color:var(--ink2);font-size:var(--t-body-s);line-height:1.55}
.bridge p + p{margin-top:10px}
.bridge label{display:block;font-size:var(--t-meta);font-weight:700;color:var(--ink);margin:14px 0 6px}
.bridge input{width:100%;font-family:inherit;font-size:16px;padding:13px 16px;border:1.5px solid var(--iosSep);border-radius:16px;
  background:var(--white);color:var(--ink);min-height:48px} /* 16px: darunter zoomt iOS ins Feld */
.bridge input:focus-visible{outline:2px solid var(--brandInk);outline-offset:1px}
.bridge .btn{width:100%;margin-top:16px}
.bridge .btn-link{display:block;width:100%;text-align:center;border:0;background:none;cursor:pointer;font-family:inherit;font-weight:600;
  font-size:var(--t-body-s);color:var(--ink2);padding:14px 0 0;text-decoration:underline;text-underline-offset:3px}
.bridge .hint{font-size:var(--t-meta);color:var(--ink2);margin-top:12px;text-align:center}
.bridge .err{color:var(--brandInk);font-size:var(--t-body-s);font-weight:600;margin-top:12px;min-height:0}
.bridge .state{display:none}          /* i, /p, /mail-aus: Zustände per style.display aus dem Skript */
.bridge #loading.state{display:block} /* nur das .state-Muster — /c schaltet per .hidden (site.css), ein nacktes #loading schlüge die Klasse (Befund landing-verify 2026-09-04) */
.bridge-foot{padding:18px var(--gutter) 34px;text-align:center;font-size:var(--t-meta);color:var(--ink2)}
.bridge-foot a{color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.bridge-note{max-width:520px;margin:0 auto;padding:0 var(--gutter) 32px;font-size:var(--t-body-s);color:var(--ink2);text-align:center}
/* Leben auf den Bridges (ENT-2026-09-04-1): drei flache Formen hinter dem ersten Bildschirm (absolut zum
   Anfangs-Containing-Block, z-index -1 — sie scrollen mit der Seite weg und kleben nie unter Text), die Karte
   steigt beim Zeigen auf, Avatare der echten Leute poppen gestaffelt (bridge.js liefert die Initialen),
   das Icon der Idee steht groß, die Einladung trägt einen Foto-Coin. Formen nur an den Rändern (Regel 4). */
.bridge-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bsky{position:absolute;border-radius:50%}
.bsky-1{top:-90px;right:-90px;width:260px;height:260px;background:var(--blush)}
.bsky-2{bottom:120px;left:-64px;width:150px;height:150px;border:26px solid var(--accent);opacity:.9}
.bsky-3{right:26px;bottom:64px;width:54px;height:112px;border-radius:40px;background:var(--actBase);opacity:.8;rotate:-22deg}
.bridge .card{position:relative}
.bridge .btn-ghost-ink{background:var(--white)} /* deckend, sonst scheinen die Formen durch den Kalender-Knopf */
.bridge .av-row{justify-content:center}
.bridge .who-av{justify-content:flex-start;margin:0 0 12px}
.bridge .who-av[hidden]{display:none}
.bridge .who-av .av{width:40px;height:40px;font-size:var(--t-meta)}
.idea-icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--blush);margin:0 0 12px}
.idea-icon img{width:36px;height:36px;display:block} /* Noto-Emoji zum Schlüssel der App (bridge.js), ENT-2026-09-04-2 */
/* Ruhige Objekte im Hintergrund der Bridge-Karten: Phosphor Duotone, Brand-Tinte, nie über Text. */
.bridge .card .bg-obj{position:absolute;right:-8px;bottom:-12px;width:96px;height:96px;color:var(--brandInk);opacity:.14;pointer-events:none;rotate:-8deg}
.bridge .card > :not(.bg-obj){position:relative;z-index:1}
/* Glyph-Kreis der Zustände (aus /c gehoben, seit PR F auch auf /i): Umschlag im Code-Schritt, Haken beim Erfolg, Warnung beim Fehler. */
.bridge .glyph{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.bridge .glyph-mail,.bridge .glyph-warn{background:var(--blush);color:var(--brandInk)}
.bridge .glyph-check{background:rgba(52,199,89,.12);color:var(--green)}
.bridge .glyph svg{width:30px;height:30px;display:block}
.bridge .eyebrow{display:block;margin-bottom:8px}
/* Die Leute-Zeile („Lia, Ben und Jo sind dabei") — EIN Register für /c und /i (vorher /c regular, /i fett). */
.bridge .who{font-size:var(--t-body);color:var(--ink);font-weight:600;margin-bottom:20px}
/* „+N"-Chip am Ende der Avatar-Reihe, wenn mehr Leute kommen als Kreise gezeigt werden (bridge.js, total). */
.bridge .av-more{background:var(--paper);color:var(--ink2);font-size:var(--t-meta);font-weight:700}
/* Der Satz unter dem Flame-Knopf: was die App zusätzlich kann — und dass es bis zum Launch die Warteliste ist (DESIGN.md §Web-Landing). */
.bridge .hint-strong{font-size:var(--t-meta);color:var(--ink2);margin-top:14px;line-height:1.5;text-align:center}
.bridge .btn-link[hidden]{display:none} /* display:block oben schlüge sonst das hidden-Attribut */
.bridge-coin{position:absolute;top:-22px;right:-10px;width:68px;height:68px;border-radius:50%;overflow:hidden;border:3px solid var(--white);
  box-shadow:0 10px 22px rgba(42,35,18,.2);rotate:8deg}
.bridge-coin img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width: 900px){
  .bsky-1{width:420px;height:420px;top:-140px;right:-120px}
  .bsky-2{width:220px;height:220px;border-width:40px;left:-80px;bottom:90px}
  .bsky-3{width:80px;height:170px;right:90px;bottom:100px}
  .bridge-coin{width:84px;height:84px;top:-28px;right:-16px}
}
@media (prefers-reduced-motion: no-preference){
  .bsky{animation:bfloat var(--d,11s) ease-in-out infinite}
  .bsky-2{--d:14s}
  .bsky-3{--d:9s}
  @keyframes bfloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
  html[data-lang] .bridge .card,html[data-lang] .bridge .state{animation:brise .7s cubic-bezier(.16,1,.3,1) both}
  @keyframes brise{from{opacity:0;translate:0 16px}}
  .bridge .av-row .av{animation:avpop .55s cubic-bezier(.34,1.56,.64,1) both}
  .bridge .av-row .av:nth-child(2){animation-delay:90ms}
  .bridge .av-row .av:nth-child(3){animation-delay:180ms}
  .bridge .av-row .av:nth-child(4){animation-delay:270ms}
  .bridge .av-row .av:nth-child(5){animation-delay:360ms}
  @keyframes avpop{from{opacity:0;scale:.5}}
}

/* ── Motion aus, wenn gewünscht ── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .js [data-split] .w{opacity:1;transform:none;transition:none}
  .sheet,.sheet-links a{transition:none}
  .js .stp-grid.in .stp-n{animation:none}
  .stp-obj{transition:none}
  .stp:hover{translate:none}
  .stp:hover .stp-obj{rotate:12deg;scale:none} /* sonst bliebe der Hover-Sprung: Übergang aus, Bewegung aber da */
  .tm{transition:none}
  .tm:hover{translate:none}
}

/* ── Desktop ── */
@media (min-width: 900px){
  .nav{display:grid;grid-template-columns:1fr auto 1fr;gap:16px}
  .nav-links{display:flex;justify-content:center}
  .nav-right{justify-content:flex-end}
  .brandrow svg{width:28px}
  .brandrow .name{font-size:var(--t-h2)}
  .nav-crumb{display:none}
  .nav-crumb:not([hidden]){display:none}
  .nav .btn{display:inline-flex}
  .burger{display:none}
  .foot{padding:100px 0 32px;border-radius:60px 60px 0 0}
  .foot .top{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start}
  .fcols{padding:34px 38px 20px;gap:0 40px}
  .page{padding:64px 0 90px}
  .page-head{margin-bottom:44px}
  .page-body{font-size:var(--t-body)}
  .pform-1{left:-40px;top:140px;width:190px;height:190px;border-width:30px}
  .pform-2{right:20px;top:70px;width:120px;height:120px}
  .itiles{grid-template-columns:repeat(3,1fr);gap:18px}
  .cards-2{grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  .faq3-list{gap:12px}
  .faq3-q summary{padding:18px 22px;gap:14px}
  .faq3-ic{width:44px;height:44px}
  .stp-grid{grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin-top:44px}
  .stp{padding:30px 28px 32px}
  .stp h3{margin-top:34px} /* 30+50+34 = 114px; das gedrehte Objekt endet bei ~104px */
  .stp-obj{width:132px;height:132px;top:-40px;right:-26px}
  .page-body .stp-grid{gap:16px;margin-top:22px}
  .page-body .stp{padding:24px 22px 26px}
  .team-row{display:grid;grid-template-columns:1.16fr 1fr 1fr;align-items:start;gap:18px;margin:38px 0 0;overflow:visible;padding:0;scroll-snap-type:none;
    -webkit-mask-image:none;mask-image:none}
  .team-row::after{content:none}
  .tm{padding:26px 26px 28px;gap:16px;flex:none;max-width:none}
  .tm + .tm{margin-left:0}
  .tm-2,.tm-3{z-index:auto}
  .tm-2{margin-top:20px}
  .tm-3{margin-top:40px}
  .tm-who{padding-top:16px}
}