/* FlowSight, Fassung 4: «Ninas Plantafel». Regelwerk B3 unverändert (Farben, Source Serif 4, Geist, Wortmarke).
   Bilder stehen in Kartenrahmen mit feiner Goldlinie innen, abgeleitet von der Visitenkarte. Handy zuerst. */

:root {
  --grund: #f4f3ef;
  --karte: #fcfcfa;
  --elfenbein: #f6efdf;
  --gold-flaeche: #f0eadd;
  --tafel: #e9e7e1;
  --kante-leise: #e2e0da;
  --kante: #d0cdc6;
  --text: #1a2744;
  --text-2: #4a4f5c;
  --text-3: #5c6170;
  --zart: #8c8576;
  --navy: #1a2744;
  --gold: #c9a24a;
  --gold-text: #7a6436;
  --gold-hell: #d8b96a;
  --petrol: #2f6f68;
  --petrol-hell: #6fb3aa;
  --amber: #8f5312;
  --terrakotta: #a4503a;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --r: 16px;
  --r-klein: 12px;
  --x: clamp(18px, 5vw, 64px);
  --breite: 1200px;
  --aus: cubic-bezier(.2, .8, .2, 1);
  --schatten: 0 1px 2px rgba(26, 39, 68, .06), 0 14px 30px -20px rgba(26, 39, 68, .35);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--zart) var(--grund); }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { background: var(--gold-flaeche); color: var(--text); }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
b { font-weight: 600; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; letter-spacing: -.015em; line-height: 1.06; }
h2 { font-size: clamp(32px, 4.4vw, 54px); }
h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; letter-spacing: -.005em; line-height: 1.3; }
.leise { color: var(--text-2); }
.innen { max-width: var(--breite); margin: 0 auto; }
section { position: relative; padding: clamp(80px, 11vw, 150px) var(--x); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.klein { font-size: 14px; color: var(--text-3); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.navy :focus-visible { outline-color: var(--gold-hell); }
.ikon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Wortmarke: Geist 700, Goldpunkt als i-Punkt */
.wortmarke { font-family: var(--sans); font-weight: 700; font-size: 23px; letter-spacing: -.02em; text-decoration: none; color: var(--text); white-space: nowrap; }
/* Feste Zeilenhöhe im i: so steht der Punkt überall gleich zum Buchstaben (Kopfzeile, Startbild, Visitenkarte) */
.wortmarke .i, .vk-marke-klein .i { position: relative; display: inline-block; line-height: 1; }
/* i-Punkt = der Goldkopf des Zeichens, gleicher Verlauf wie wendezeichen.svg (Startbild F8, CE-432) */
.punkt { position: absolute; left: 50%; top: -.05em; width: .26em; height: .26em; margin-left: -.13em; border-radius: 50%;
  background: linear-gradient(146deg, #fffbf0 0%, #f0d284 26%, #bf9327 58%, #4b3706 100%); box-shadow: 0 .02em .04em rgba(60, 44, 10, .25); }
/* Das «w» IST das Zeichen (wendezeichen.svg ohne Kopf): x-Höhe von Geist 700, auf der Grundlinie. Fest im HTML, damit es
   ohne JavaScript stimmt; die Lücke des Schnitts (im Zeichen 3.4 von 34) wird nie unter 1.6 px gesetzt — seite.js misst
   nach (setzeW), die Werte hier gelten ohne JavaScript. */
.wz-svg { display: inline-block; vertical-align: baseline; overflow: visible; height: var(--wz-h, .53em); width: calc(var(--wz-h, .53em) * 45 / 34); margin: 0 .035em 0 .045em; }
.wz-schnitt { stroke-width: var(--wz-luecke, 4.5); }
.vk-marke-klein { --wz-luecke: 7.9; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; border: 1px solid var(--navy); cursor: pointer; box-shadow: 0 12px 26px -16px rgba(26, 39, 68, .8); transition: box-shadow .3s, transform .3s var(--aus); }
.knopf:hover { box-shadow: 0 18px 34px -16px rgba(26, 39, 68, .85); transform: translateY(-1px); }
.knopf:active { transform: translateY(0) scale(.98); }
.knopf-linie { background: transparent; color: var(--text); border-color: var(--kante); box-shadow: none; }
.knopf-linie:hover { border-color: var(--text); box-shadow: none; }
.weiter { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; font-weight: 600; font-size: 16px; color: var(--text); text-decoration: none; }
.weiter .ikon { width: 18px; height: 18px; transition: transform .3s var(--aus); }
.weiter:hover .ikon { transform: translateX(4px); }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }

/* Kopfzeile: Nummer steht unten auf der Seite; auf dem Handy ein Telefon-Knopf zum direkten Wählen */
.kopf { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px var(--x); background: color-mix(in srgb, var(--grund) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.kopf.gescrollt { border-bottom-color: var(--kante-leise); }
.kopf .wortmarke { margin-right: auto; }
#navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
#navigation a { display: inline-block; padding: 10px 2px; text-decoration: none; font-size: 15px; color: var(--text-2); }
#navigation a:hover { color: var(--text); }
#navigation a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 8px; text-decoration-thickness: 1.5px; }
.kopf-knopf { min-height: 44px; padding: 10px 20px; font-size: 15px; box-shadow: none; }
.anruf-knopf, .menue-knopf { display: none; width: 44px; height: 44px; border-radius: var(--r-klein); border: 1px solid var(--kante); background: var(--karte); color: var(--text); place-items: center; cursor: pointer; text-decoration: none; position: relative; }
.anruf-knopf .ikon { width: 20px; height: 20px; }
.menue-knopf i { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--text); transition: transform .3s; }
.menue-knopf i:first-of-type { top: 17px; } .menue-knopf i:last-of-type { top: 25px; }
.menue-knopf[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
@keyframes menue-auf { from { transform: translateY(-40px); opacity: 0; } }
@keyframes schleier { from { opacity: 0; } }

/* Kartenrahmen: Bild als Karte, innen eine feine Goldlinie wie auf der Visitenkarte. Nie rund, nie in Überschriften. */
.bildkarte { position: relative; margin: 0; padding: 9px; border-radius: var(--r); overflow: hidden; background: var(--elfenbein); box-shadow: 0 2px 4px rgba(26, 39, 68, .06), 0 30px 50px -30px rgba(26, 39, 68, .55); }
.bildkarte img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.bildkarte::after { content: ''; position: absolute; inset: 4.5px; border: 1px solid rgba(201, 162, 74, .9); border-radius: 12px; pointer-events: none; }
.bildkarte.navy { background: var(--navy); }
.bild-unter { margin-top: 12px; font-size: 14px; color: var(--text-3); }
.bild-unter b { display: block; color: var(--text); font-family: var(--serif); font-weight: 400; font-size: 21px; }

/* Plantafel */
.tafel { position: relative; background: var(--tafel); border-radius: 22px; padding: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 30px 60px -40px rgba(26, 39, 68, .45); }
.tafel-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tafel-spalte { min-width: 0; }
.tafel-spalte:nth-child(n+4) { display: none; }
.tafel-tag { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 2px 8px; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tafel-tag.heute { color: var(--text); }
.tafel-tag.heute::after { content: 'heute'; font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--gold-text); }
.steck { position: relative; display: block; width: 100%; text-align: left; margin: 0 0 9px; padding: 10px 11px 9px; background: var(--karte); border: 1px solid var(--kante); border-radius: var(--r-klein); font: inherit; font-size: 14px; line-height: 1.3; color: var(--text); box-shadow: 0 1px 1px rgba(26, 39, 68, .05); }
.steck small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.3; color: var(--text-3); }
.steck small.zustand { margin-top: 6px; }
.steck.nina { border-color: color-mix(in srgb, var(--gold) 70%, var(--kante)); cursor: pointer; transition: border-color .3s, box-shadow .3s, transform .3s var(--aus); }
.steck.nina::before { content: ''; position: absolute; top: -5px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 2px 3px rgba(26, 39, 68, .3); }
.steck.nina:hover { box-shadow: var(--schatten); transform: translateY(-1px); }
.steck .status { display: inline-flex; align-items: center; gap: 5px; color: var(--amber); font-weight: 600; }
.steck .status .ikon { width: 13px; height: 13px; stroke-width: 2.4; }
.frei { display: none; align-items: center; gap: 5px; color: var(--petrol); font-weight: 600; }
.frei .ikon { width: 13px; height: 13px; stroke-width: 2.4; }
.freigegeben .status { display: none; }
.freigegeben .frei { display: inline-flex; }
.steck.freigegeben { border-color: var(--petrol); }
/* Goldener Punkt mit Symbol: von Nina vorbereitet, antippen zeigt den Entwurf */
.steck { container-type: inline-size; }
.steck.nina:has(.oeffnen)::before { display: none; }
.steck.nina:has(.oeffnen) { margin-top: 4px; }
.steck .oeffnen { position: absolute; top: -10px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--navy); box-shadow: 0 2px 4px rgba(26, 39, 68, .3); transition: background .3s, color .3s, transform .3s var(--aus); }
.steck .oeffnen .ikon { width: 13px; height: 13px; stroke-width: 2.2; }
.steck.nina:hover .oeffnen, .steck.nina:focus-visible .oeffnen { background: var(--navy); color: #fff; transform: scale(1.08); }
.steck.nina:has(.oeffnen) b { padding-right: 12px; }
@container (max-width: 118px) { .steck .status .ikon, .steck .frei .ikon { display: none; } }
.tafel-fuss { display: flex; align-items: center; gap: 12px; margin: 6px 2px 0; font-size: 14px; color: var(--text-2); }
.tafel-fuss .magnet { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.tafel-nina { position: absolute; left: 0; bottom: -34px; width: 74px; aspect-ratio: 3 / 4; z-index: 2; }
.tafel-nina { padding: 5px; }
.tafel-nina img { border-radius: 6px; }
.tafel-nina::after { inset: 2.5px; border-radius: 9px; }
.tafel-mit-nina .tafel-fuss { padding-left: 64px; }

/* Startseite: Kopf */
.start { padding-top: clamp(28px, 6vw, 72px); padding-bottom: clamp(90px, 10vw, 140px); }
.start-raster { display: grid; grid-template-columns: 1fr; grid-template-areas: 'titel' 'lead' 'hoer' 'aktion' 'tafel'; gap: 22px; align-items: center; }
.start-titel { grid-area: titel; }
.start .tafel { grid-area: tafel; margin: 18px 0 30px; }
.start-aktion { grid-area: aktion; }
.start .start-lead { grid-area: lead; margin: 0; }
.start h1 { font-size: clamp(40px, 5.4vw, 70px); line-height: 1.02; }
.start h1 span { display: block; color: var(--text-2); }
.start-lead { font-size: clamp(17px, 1.5vw, 19px); color: var(--text-2); max-width: 46ch; margin-bottom: 26px; }

/* Ablauf: ein Auftrag, von Nina begleitet (klebende Karte, Schritte daneben) */
.ablauf { padding-bottom: clamp(60px, 8vw, 110px); }
.ablauf-kopf { max-width: 760px; margin-bottom: clamp(30px, 5vw, 60px); }
.ablauf-kopf p { color: var(--text-2); font-size: clamp(17px, 1.5vw, 19px); max-width: 52ch; margin-top: 18px; }
.ablauf-raster { display: grid; grid-template-columns: 1fr; gap: 0; }
.buehne { position: sticky; top: 72px; z-index: 2; padding: 10px 0 14px; background: linear-gradient(var(--grund) 88%, color-mix(in srgb, var(--grund) 0%, transparent)); }
/* Auftragskarte: Phasen oben, darunter die Schritte als Leiste mit Symbolen. Jede Zeile öffnet Ninas Entwurf. */
.auftrag { position: relative; background: var(--karte); border: 1px solid var(--kante); border-radius: 20px; padding: 16px 18px 12px; box-shadow: var(--schatten); }
.auftrag::before { content: ''; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 2px 3px rgba(26, 39, 68, .3); }
.auftrag-kopf { display: flex; align-items: center; gap: 12px; }
.auftrag-kopf .bildkarte { width: 42px; height: 42px; flex: none; padding: 3px; border-radius: 11px; box-shadow: none; }
.auftrag-kopf .bildkarte img { border-radius: 7px; }
.auftrag-kopf .bildkarte::after { inset: 1.5px; border-radius: 9.5px; }
.auftrag-name { flex: 1; min-width: 0; }
.auftrag-name b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.15; }
.auftrag-name span { font-size: 13px; color: var(--text-3); }
.tut { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.tut i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.tut-text.neu { animation: steigen .45s var(--aus) both; }
.phasen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin: 16px 0 4px; }
.phasen span { position: relative; padding-top: 11px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text-3); white-space: nowrap; overflow: visible; text-overflow: clip; transition: color .4s; }
.phasen span::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--kante-leise); transition: background .5s var(--aus); }
.phasen span.durch::before { background: var(--gold); }
.phasen span.hier { color: var(--text); }
.zeilen { list-style: none; margin: 10px 0 0; padding: 0; }
.zeilen li { position: relative; }
.zeilen li::before { content: ''; position: absolute; left: 15px; top: 39px; bottom: -7px; width: 2px; border-radius: 2px; background: var(--kante-leise); transition: background .5s; }
.zeilen li:last-child::before { display: none; }
.zeilen li.da:has(+ li.da)::before { background: var(--gold); }
.zeile { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; width: calc(100% + 16px); margin: 0 -8px; padding: 7px 8px; border: 0; border-radius: 12px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .3s; }
.zeile:hover:not(:disabled) { background: var(--grund); }
.zeile:disabled { cursor: default; }
.knoten { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--grund); border: 1.5px dashed var(--kante); color: var(--zart); transition: background .4s, border-color .4s, color .4s, box-shadow .4s; }
.knoten .ikon { width: 16px; height: 16px; }
.zeilen li.da .knoten { background: var(--navy); border: 1.5px solid var(--navy); color: #fff; }
.zeilen li.jetzt .knoten { box-shadow: 0 0 0 4px var(--gold-flaeche), 0 0 0 5px color-mix(in srgb, var(--gold) 55%, transparent); }
.z-text { display: grid; gap: 1px; min-width: 0; padding-top: 1px; }
.zeilen .k { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--text-3); transition: color .4s; }
.zeilen .w { font-size: 14px; line-height: 1.35; color: var(--text-3); }
.zeilen li.da .k { color: var(--text); }
.zeilen li.da .w { color: var(--text-2); }
.beleg { display: none; align-items: center; gap: 7px; justify-self: start; margin-top: 8px; padding: 5px 11px 5px 8px; border-radius: 8px; background: var(--elfenbein); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--kante)); font-family: var(--mono); font-size: 13px; color: var(--text); }
.beleg .ikon { width: 14px; height: 14px; color: var(--gold-text); }
.zeilen li.jetzt .beleg { display: inline-flex; animation: steigen .5s var(--aus) both; }
.zeilen .s { padding-top: 6px; font-size: 13px; white-space: nowrap; }
.zeilen .s .status { display: inline-flex; align-items: center; gap: 5px; color: var(--amber); font-weight: 600; }
.zeilen .s .ikon { width: 13px; height: 13px; stroke-width: 2.4; }
.zeilen .zeile.freigegeben .s .status, .steck.freigegeben .status, .leit-eintrag.freigegeben .status { display: none; }
.zeilen .zeile.freigegeben .s .frei, .steck.freigegeben .frei, .leit-eintrag.freigegeben .frei { display: inline-flex; }
.zeilen li:not(.da) .s { visibility: hidden; }
.auftrag-fuss { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--kante-leise); font-size: 13px; color: var(--text-3); }
.knoten-leiste { display: none; }

/* Fenster mit Ninas Entwurf (E-Mail, Notiz, Bericht) */
html:has(.fenster[open]) { overflow: hidden; }
.fenster { padding: 0; border: 0; width: min(560px, calc(100vw - 32px)); max-width: none; max-height: min(740px, calc(100dvh - 48px)); border-radius: 20px; background: var(--karte); color: var(--text); box-shadow: 0 2px 6px rgba(26, 39, 68, .12), 0 40px 80px -30px rgba(26, 39, 68, .6); overflow: hidden; }
.fenster[open] { display: flex; animation: fenster-auf .38s var(--aus) both; }
.fenster::backdrop { background: rgba(26, 39, 68, .4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: schleier .3s ease both; }
.fenster.geht { animation: fenster-zu .18s ease both; }
@keyframes fenster-auf { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes fenster-zu { to { opacity: 0; transform: translateY(8px) scale(.985); } }
.fenster-innen { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.fenster-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--kante-leise); background: var(--grund); }
.fenster-kopf img { width: 40px; height: 40px; flex: none; border-radius: 11px; object-fit: cover; outline: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); outline-offset: 2px; }
.fenster-kopf div { flex: 1; min-width: 0; }
.fenster-titel { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; }
.fenster-art { font-size: 13px; font-weight: 600; color: var(--amber); }
.fenster.erledigt .fenster-art { color: var(--petrol); }
.fenster-zu { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1px solid var(--kante); background: var(--karte); color: var(--text); cursor: pointer; }
.fenster-zu:hover { border-color: var(--text); }
.fenster-felder { margin: 0; padding: 2px 18px; border-bottom: 1px solid var(--kante-leise); }
.fenster-felder div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--kante-leise); font-size: 15px; line-height: 1.4; }
.fenster-felder div:last-child { border-bottom: 0; }
.fenster-felder dt { font-family: var(--mono); font-size: 13px; color: var(--text-3); padding-top: 1px; }
.fenster-felder dd { margin: 0; font-weight: 500; }
.fenster-text { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px; font-size: 16px; line-height: 1.6; white-space: pre-line; overscroll-behavior: contain; }
.fenster-hinweis { margin: 0 18px 14px; padding: 10px 13px; background: var(--gold-flaeche); border-radius: 4px 12px 12px 12px; font-size: 14px; line-height: 1.45; }
.fenster-anhang { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 18px 16px; }
.fenster-anhang li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 10px; border: 1px solid var(--kante); background: var(--grund); font-family: var(--mono); font-size: 13px; }
.fenster-anhang .ikon { width: 15px; height: 15px; color: var(--gold-text); }
.fenster-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 18px 16px; border-top: 1px solid var(--kante-leise); background: var(--grund); }
.fenster-fuss p { flex: 1 1 180px; margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.fenster-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.fenster-knoepfe .knopf { min-height: 46px; padding: 11px 18px; font-size: 15px; }
.fenster-knoepfe .knopf .ikon { width: 18px; height: 18px; stroke-width: 2.2; }
.fenster .f-schliessen { display: none; }
.fenster.erledigt .f-spaeter, .fenster.erledigt .f-frei { display: none; }
.fenster.erledigt .f-schliessen { display: inline-flex; }
@media (max-width: 560px) {
  .fenster { width: 100%; margin: auto 0 0; max-height: calc(100dvh - 20px); border-radius: 22px 22px 0 0; }
  @keyframes fenster-auf { from { opacity: 0; transform: translateY(48px); } }
  .fenster-knoepfe { width: 100%; }
  .fenster-knoepfe .knopf { flex: 1 1 auto; }
  .fenster-fuss p { order: 2; }
  .fenster-fuss { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

.schritte { list-style: none; margin: 0; padding: 0; }
.schritt { padding: 34px 0; border-bottom: 1px solid var(--kante-leise); }
.schritt:last-child { border-bottom: 0; }
.schritt .wann { display: block; font-family: var(--mono); font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.schritt h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.01em; margin-bottom: 10px; }
.schritt p { color: var(--text-2); max-width: 46ch; margin: 0; }
.zitat-nina { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; background: var(--gold-flaeche); border-radius: 4px 14px 14px 14px; max-width: 420px; font-size: 16px; color: var(--text); }
.zitat-nina img { width: 34px; height: 34px; border-radius: 8px; flex: none; }


/* Zwei Zusagen aus dem Video */
.zusagen-raster { display: grid; grid-template-columns: 1fr; gap: 0; }
.zusage { padding: 30px 0; border-top: 1px solid var(--kante); }
.zusage:last-child { border-bottom: 1px solid var(--kante); }
.zusage h2 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 14px; }
.zusage p { color: var(--text-2); max-width: 44ch; margin: 0; }

/* Angebot von Gunnar */
.angebot-raster { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
.angebot-raster > div { max-width: 760px; }
.ablauf-gunnar { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 0; }
.ablauf-gunnar li { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-top: 1px solid var(--kante-leise); }
.ablauf-gunnar .wann { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--gold-text); }
.ablauf-gunnar p { margin: 0; font-family: var(--serif); font-size: clamp(21px, 2.1vw, 26px); line-height: 1.3; }
.unterschrift { color: var(--text-3); font-size: 15px; margin-bottom: 22px; }

/* Schluss */
.schluss { text-align: center; padding-top: 0; }
.schluss h2 { max-width: 18ch; margin: 0 auto 28px; }
.schluss .aktionen { justify-content: center; }

/* Fuss: hier steht die Nummer */
.fuss { padding: 48px var(--x) 52px; border-top: 1px solid var(--kante); background: var(--karte); font-size: 15px; color: var(--text-2); }
.fuss-raster { display: grid; grid-template-columns: 1fr; gap: 26px; }
.fuss-tel { display: grid; gap: 4px; }
.fuss-tel a { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fuss-tel a .ikon { width: 26px; height: 26px; color: var(--gold-text); }
.fuss-tel a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
.fuss-tel > span { font-size: 14px; color: var(--text-3); }
.fuss address { font-style: normal; }
.fuss p { margin: 0; }
.fuss a { color: inherit; }
.fuss-links a { display: inline-block; padding: 4px 0; text-decoration: none; }
.fuss-links a:hover { text-decoration: underline; }

/* Seite Nina */
.nina-kopf { padding-top: clamp(28px, 6vw, 72px); }
.nina-kopf-raster { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: end; }
.nina-kopf .bildkarte { width: min(100%, 380px); aspect-ratio: 3 / 4; }
.nina-kopf h1 { font-size: clamp(42px, 6vw, 74px); margin-bottom: 18px; }
.nina-kopf .lead { font-size: clamp(18px, 1.7vw, 21px); color: var(--text-2); max-width: 44ch; }
.nina-kopf .fakt { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--kante-leise); font-size: 15px; color: var(--text-3); max-width: 46ch; }

.faehigkeiten { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: clamp(26px, 4vw, 50px); }
.faehigkeit { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 24px 0; border-top: 1px solid var(--kante); }
.faehigkeit h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
.faehigkeit p { margin: 0; color: var(--text-2); max-width: 52ch; }

/* Durchlauf (Seite Nina): links kommt herein, Nina in der Mitte, rechts liegt bereit. Ein Goldpunkt läuft durch. */
.dl-lead { color: var(--text-2); max-width: 52ch; margin: 18px 0 clamp(26px, 4vw, 44px); }
.durchlauf { position: relative; display: grid; grid-template-columns: 1fr; gap: 18px; padding: 18px; border-radius: 22px; background: var(--tafel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 30px 60px -40px rgba(26, 39, 68, .45); }
.dl-linien { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dl-linien path { fill: none; stroke: var(--kante); stroke-width: 1.5; stroke-dasharray: 3 6; transition: stroke .4s; }
.dl-linien path.an { stroke: var(--gold); stroke-dasharray: none; stroke-width: 2; }
.dl-linien circle { fill: var(--gold); }
.dl-rein, .dl-raus { position: relative; z-index: 1; min-width: 0; }
.dl-rein { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.dl-rein::-webkit-scrollbar { display: none; }
.dl-rein .tafel-tag, .dl-raus .tafel-tag { display: none; }
.dl-ein { flex: none; display: block; text-align: left; padding: 10px 12px; border-radius: var(--r-klein); border: 1px solid var(--kante); background: var(--karte); color: var(--text); font: inherit; font-size: 14px; line-height: 1.3; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.dl-ein b { display: block; font-weight: 600; }
.dl-ein small { display: block; margin-top: 3px; font-size: 13px; color: var(--text-3); }
.dl-ein[aria-pressed="true"] { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy), var(--schatten); }
.dl-mitte { position: relative; z-index: 1; justify-self: center; display: grid; justify-items: center; gap: 8px; width: 104px; }
.dl-mitte .bildkarte { width: 100%; aspect-ratio: 3 / 4; padding: 5px; }
.dl-mitte .bildkarte img { border-radius: 6px; }
.dl-mitte .bildkarte::after { inset: 2.5px; border-radius: 9px; }
.dl-mitte span { font-family: var(--serif); font-size: 19px; }
.dl-mitte.puls .bildkarte { animation: puls .7s var(--aus); }
@keyframes puls { 40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 35%, transparent), 0 30px 50px -30px rgba(26, 39, 68, .55); } }
.dl-aus { margin: 0; display: none; }
.dl-aus.aktiv { display: block; }
.dl-aus.landet { animation: steigen .7s var(--aus) both; }
.dl-fuss { margin: 14px 0 0; font-size: 13px; color: var(--text-3); }
@media (min-width: 900px) {
  .durchlauf { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 0 70px; align-items: center; padding: 26px 30px; }
  .dl-rein { display: grid; gap: 10px; overflow: visible; }
  .dl-rein .tafel-tag, .dl-raus .tafel-tag { display: flex; }
  .dl-ein { width: 100%; }
  .dl-raus { display: grid; gap: 10px; }
  .dl-aus { display: block; background: color-mix(in srgb, var(--karte) 55%, var(--tafel)); border-color: var(--kante-leise); box-shadow: none; transition: background .4s, border-color .4s, box-shadow .4s; }
  .dl-aus.aktiv { background: var(--karte); border-color: color-mix(in srgb, var(--gold) 70%, var(--kante)); box-shadow: var(--schatten); }
  .dl-aus:not(.aktiv)::before { background: var(--kante); }
  .dl-aus:not(.aktiv) .oeffnen { background: var(--kante); color: var(--text-2); box-shadow: none; }
  .dl-mitte { width: 150px; }
}

/* Leitzentrale (Seite Nina) */
.morgen-raster { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.morgen-text p { color: var(--text-2); max-width: 46ch; margin-top: 18px; }
.leitstand { background: var(--karte); border: 1px solid var(--kante); border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten); }
.leit-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--kante-leise); }
.leit-titel { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.leit-titel img { width: 30px; height: 30px; border-radius: 8px; }
.leit-uhr { font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; }
.leit-uhr i { font-style: normal; }
.leit-liste { list-style: none; margin: 0; padding: 4px 0; }
.leit-liste li { border-bottom: 1px solid var(--kante-leise); }
.leit-eintrag { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 11px 18px; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .3s; }
.leit-eintrag:hover { background: var(--grund); }
.leit-eintrag.freigegeben .stat.freigabe { color: var(--petrol); }
.leit-liste li:last-child { border-bottom: 0; }
.leit-liste time { font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.leit-liste p { margin: 0; font-size: 15px; line-height: 1.4; }
.stat { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.stat .ikon { width: 14px; height: 14px; stroke-width: 2.4; }
.stat.erledigt { color: var(--petrol); } .stat.freigabe { color: var(--amber); }
.leit-fuss { margin: 0; padding: 12px 18px; font-size: 13px; color: var(--text-3); border-top: 1px solid var(--kante-leise); background: var(--grund); }

/* Handy mit Gunnars Video (nur über ?video=gunnar) */
.handy-buehne { display: grid; justify-items: center; padding: 10px 0 0; }
.handy-buehne[hidden] { display: none; }
.handy { position: relative; width: min(300px, 74vw); aspect-ratio: 9 / 19; border-radius: 42px; padding: 11px; background: #0f1729; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), 0 50px 90px -40px rgba(26, 39, 68, .75); }
.handy video { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; background: var(--elfenbein); }

/* Seite Wer dahintersteht */
.gunnar-raster { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
.gunnar .bildkarte { width: min(100%, 420px); aspect-ratio: 4 / 5; }
.zitat { margin: 0 0 32px; }
.zitat h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 3.3vw, 40px); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 16px; }
.zitat footer { color: var(--text-3); font-size: 15px; }
.karten-buehne { perspective: 1400px; display: grid; gap: 18px; justify-items: start; }
.zusagen-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.zusagen-liste li { padding: 24px 0; border-top: 1px solid var(--kante); }
.zusagen-liste h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2.2vw, 28px); margin-bottom: 8px; }
.zusagen-liste p { margin: 0; color: var(--text-2); max-width: 44ch; }
.referenzen-platz { margin-top: 30px; padding: 22px; border-radius: var(--r); border: 1px solid var(--kante); background: var(--karte); text-align: center; color: var(--text-3); font-size: 14px; }
.referenzen-platz p { margin: 0; }

/* Visitenkarte: 85 x 55 mm, Gmund Cotton Natural Beige, Goldrahmen, Druck-Navy */
.visitenkarte { --dreh: 0deg; --kx: 0deg; --gx: 50%; --gy: 50%; --dicke: 6px; position: relative; display: block; width: min(100%, 420px); aspect-ratio: 85 / 55; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; transform-style: preserve-3d; transform: rotateX(var(--kx)) rotateY(var(--dreh)); transition: transform .9s var(--aus); outline: none; container-type: inline-size; }
.visitenkarte.zieht { cursor: grabbing; transition: none; }
.visitenkarte:focus-visible { box-shadow: 0 0 0 3px var(--navy); border-radius: 10px; }
.vk-innen { position: absolute; inset: 0; transform-style: preserve-3d; }
.vk-seite { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: radial-gradient(120% 100% at 30% 20%, #f8f2e4, #f3ebd9 60%, #ede3cd); color: #1a2744; box-shadow: 0 30px 60px -30px rgba(26, 39, 68, .55), 0 2px 6px rgba(26, 39, 68, .12); }
.vk-vorne { transform: translateZ(calc(var(--dicke) / 2)); }
.vk-hinten { transform: rotateY(180deg) translateZ(calc(var(--dicke) / 2)); }
.vk-kante { position: absolute; top: 2%; bottom: 2%; width: var(--dicke); background: #e7dcc4; }
.vk-kante-l { left: 0; transform: rotateY(-90deg) translateZ(calc(var(--dicke) / 2)); transform-origin: 0 50%; }
.vk-kante-r { right: 0; transform: rotateY(90deg) translateZ(calc(var(--dicke) / 2)); transform-origin: 100% 50%; }
.vk-rahmen { position: absolute; inset: 5.5% 4.3%; border: 1px solid #c9a24a; border-radius: 2px; pointer-events: none; }
.vk-marke-klein { position: absolute; right: 8.5%; top: 11%; font-family: var(--sans); font-weight: 700; font-size: clamp(13px, 2.8cqw, 14px); letter-spacing: -.02em; color: #1a2744; }
.vk-name { position: absolute; left: 8.5%; top: 24%; font-family: var(--serif); font-weight: 400; font-size: 8.4cqw; line-height: 1; letter-spacing: -.01em; color: #1a2744; }
.vk-w { position: relative; display: inline-block; }
.vk-wpunkt { position: absolute; left: 50%; top: -.22em; width: .22em; height: .22em; margin-left: -.11em; border-radius: 50%; background: #c9a24a; }
.vk-titel { position: absolute; left: 8.5%; top: 42%; font-size: max(13px, 2.7cqw); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #5c5a55; }
.vk-strich { position: absolute; left: 8.5%; top: 64%; width: 8%; height: 1px; background: #c9a24a; }
.vk-kontakt { position: absolute; left: 8.5%; right: 8.5%; bottom: 10%; display: grid; grid-template-columns: auto 1fr; column-gap: 7%; row-gap: 2.2cqw; font-size: max(13px, 3.1cqw); line-height: 1.2; color: #1a2744; }
.vk-kontakt > :nth-child(1) { font-weight: 700; }
.vk-kontakt > :nth-child(3) { grid-column: 1; }
.vk-link { color: inherit; text-decoration: none; position: relative; cursor: pointer; display: inline-block; padding: 4px 0; margin: -4px 0; }
.vk-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.15em; height: 1px; background: #c9a24a; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s; }
.vk-link:hover::after, .vk-link:focus-visible::after { transform: scaleX(1); }
.vk-praegung { position: absolute; right: -8%; bottom: -14%; width: 62%; aspect-ratio: 676 / 647; background: url(/seite/bilder/w-zeichen.png) center / contain no-repeat; filter: brightness(0) saturate(0) invert(.93) sepia(.3) saturate(.6) brightness(1.02); opacity: .9; }
.vk-qr { position: absolute; left: 8.5%; bottom: 12%; display: grid; grid-template-columns: auto 1fr; gap: 4cqw; align-items: center; padding: 0; border: 0; background: none; color: #1a2744; text-align: left; cursor: pointer; font: inherit; }
.vk-qr img { width: 24cqw; height: 24cqw; image-rendering: pixelated; border-radius: 2px; }
.vk-qr-text { font-size: max(13px, 3.1cqw); line-height: 1.35; }
.vk-qr-text b { display: block; font-weight: 700; }
.vk-qr[aria-disabled="true"] { cursor: default; }
.vk-seite[inert] { pointer-events: none; }
.vk-glanz { position: absolute; inset: 0; border-radius: 8px; pointer-events: none; background: radial-gradient(300px circle at var(--gx) var(--gy), rgba(255, 255, 255, .5), transparent 55%); mix-blend-mode: soft-light; transform: translateZ(calc(var(--dicke) / 2 + 1px)); opacity: var(--glanz, 1); }
.vk-leiste { display: grid; gap: 10px; }
.vk-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.vk-knopf { min-height: 44px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: var(--karte); border: 1px solid var(--kante); border-radius: 999px; padding: 10px 18px; cursor: pointer; }
.vk-knopf:hover { border-color: var(--gold); }

/* Kontakt */
.kontakt-raster { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.kontakt h1 { font-size: clamp(38px, 5.4vw, 64px); margin-bottom: 18px; }
.kontakt-lead { color: var(--text-2); font-size: 18px; max-width: 40ch; }
.anfrage { display: grid; gap: 14px; background: var(--karte); border: 1px solid var(--kante); border-radius: var(--r); padding: 24px; box-shadow: var(--schatten); }
.feld label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.feld label small { font-size: 13px; font-weight: 400; color: var(--text-3); margin-left: 6px; }
.feld-fehler { margin: 6px 0 0; font-size: 14px; color: var(--terrakotta); }
.feld input, .anfrage textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r-klein); border: 1px solid var(--kante); background: var(--grund); color: var(--text); font: inherit; caret-color: var(--gold-text); }
.feld input:focus, .anfrage textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.feld input[aria-invalid="true"] { border-color: var(--terrakotta); box-shadow: 0 0 0 3px rgba(164, 80, 58, .18); }
.anfrage .knopf { justify-self: start; }
.anfrage-ersatz { display: grid; gap: 10px; padding-top: 6px; border-top: 1px solid var(--kante-leise); }
.anfrage-ersatz label { font-size: 14px; color: var(--text-2); }
.anfrage textarea { font-family: var(--mono); font-size: 14px; line-height: 1.5; resize: vertical; }
.formular-hinweis { margin: 0; font-size: 14px; color: var(--text-3); min-height: 1.4em; }

/* Video-Ebene */
.video-ebene { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(15, 23, 41, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 20px; }
.video-ebene[hidden] { display: none; }
.telefon-rahmen { position: relative; width: min(330px, 80vw); aspect-ratio: 9 / 19.5; border-radius: 44px; padding: 12px; background: #0b1120; box-shadow: 0 0 0 2px #2c3a5c, 0 50px 100px -30px rgba(0, 0, 0, .8); }
.telefon-rahmen video { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; background: var(--elfenbein); }
.schliessen { position: absolute; top: -48px; right: 0; font: inherit; font-weight: 600; color: #fff; background: none; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; padding: 6px 14px; cursor: pointer; }

/* Bewegung im Geist des Startbilds: Karten steigen auf, der Goldpunkt setzt auf */
.js:not(.ruhig) .start .steck { animation: steigen .9s var(--aus) both; animation-delay: calc(.25s + var(--i, 0) * .07s); }
.js:not(.ruhig) .start .steck.nina::before { animation: aufsetzen .7s var(--aus) both; animation-delay: calc(.75s + var(--i, 0) * .07s); }
@keyframes steigen { from { opacity: 0; transform: translateY(18px); } }
@keyframes aufsetzen { from { opacity: 0; transform: translateY(-16px) scale(.6); } 70% { transform: translateY(1px); } }
.js:not(.ruhig) .zeige { opacity: 0; translate: 0 20px; transition: opacity .8s ease, translate .8s var(--aus); }
.js .zeige.da { opacity: 1; translate: 0 0; }
.blinkt { animation: blinkt .9s var(--aus); }
@keyframes blinkt { 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--petrol) 25%, transparent); } }

/* Grössere Schirme */
@media (min-width: 640px) {
  .tafel-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tafel-spalte:nth-child(4) { display: block; }
  .tafel-nina { width: 92px; left: -22px; bottom: -40px; }
  .tafel-mit-nina .tafel-fuss { padding-left: 76px; }
}
@media (min-width: 760px) {
  .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
  .zusagen-raster { grid-template-columns: 1fr 1fr; gap: 0 56px; }
  .zusage:last-child { border-bottom: 0; }
  .zusage { border-bottom: 0; }
  .zusagen-liste { grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
  .faehigkeiten { grid-template-columns: 1fr 1fr; gap: 0 56px; }
}
@media (min-width: 1040px) {
  .start-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: 'titel tafel' 'lead tafel' 'hoer tafel' 'aktion tafel'; gap: 24px 64px; align-items: end; }
  .start .tafel { margin: 0; }
  .start-aktion { align-self: start; }
  .start .tafel { margin-bottom: 0; }
  .tafel { padding: 18px; }
  .tafel-raster { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tafel-spalte:nth-child(5) { display: block; }
  .tafel-nina { width: 108px; left: -36px; bottom: -46px; }
  .tafel-mit-nina .tafel-fuss { padding-left: 82px; }
  .ablauf-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .buehne { top: 110px; background: none; padding: 0; }
  .schritte { padding: 10vh 0 20vh; }
  .schritt { min-height: 40vh; display: flex; flex-direction: column; justify-content: center; border-bottom: 0; padding: 0; }
  .nina-kopf-raster { grid-template-columns: 380px 1fr; gap: 72px; }
  .morgen-raster { grid-template-columns: .9fr 1.1fr; gap: 64px; }
  .gunnar-raster { grid-template-columns: 420px 1fr; gap: 72px; }
  .kontakt-raster { grid-template-columns: 1fr 1fr; gap: 64px; }
}
@media (max-width: 979px) {
  #navigation { display: none; }
  .kopf-knopf { min-height: 40px; margin-right: 8px; padding: 8px 16px; font-size: 14px; }
  .anruf-knopf, .menue-knopf { display: grid; }
  .menue-knopf { display: block; }
  #navigation.offen { display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 29; background: var(--karte); padding: 92px var(--x) 26px; border-radius: 0 0 28px 28px; box-shadow: 0 30px 60px -30px rgba(26, 39, 68, .45); animation: menue-auf .5s var(--aus) both; }
  #navigation.offen ul { flex-direction: column; gap: 6px; }
  #navigation.offen a { display: block; padding: 6px 0; font-family: var(--serif); font-size: 26px; color: var(--text); text-decoration: none; }
  .kopf.menue-offen { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--karte); }
  .kopf.menue-offen::after { content: ''; position: fixed; inset: 0; z-index: 28; background: rgba(26, 39, 68, .22); animation: schleier .4s ease both; }
  .kopf .wortmarke, .kopf-knopf, .anruf-knopf, .menue-knopf { position: relative; z-index: 31; }
}
@media (max-width: 1039px) {
  .schritt { padding: 26px 0 30px; min-height: 52vh; }
  .buehne .auftrag { padding: 12px 14px 8px; }
  .buehne .auftrag-kopf .bildkarte { width: 34px; height: 34px; }
  .buehne .auftrag-name b { font-size: 18px; }
  .buehne .phasen { margin: 12px 0 2px; }
  .knoten-leiste { --f: 0; position: relative; display: flex; justify-content: space-between; margin: 12px 0 4px; }
  .knoten-leiste::before, .knoten-leiste::after { content: ''; position: absolute; left: 14px; top: 13px; height: 2px; border-radius: 2px; }
  .knoten-leiste::before { right: 14px; background: var(--kante-leise); }
  .knoten-leiste::after { width: calc((100% - 28px) * var(--f)); background: var(--gold); transition: width .6s var(--aus); }
  .kn { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--grund); border: 1.5px dashed var(--kante); color: var(--zart); transition: background .4s, border-color .4s, color .4s, box-shadow .4s; }
  .kn .ikon { width: 14px; height: 14px; }
  .kn.da { background: var(--navy); border: 1.5px solid var(--navy); color: #fff; }
  .kn.jetzt { box-shadow: 0 0 0 3px var(--gold-flaeche), 0 0 0 4px color-mix(in srgb, var(--gold) 55%, transparent); }
  .buehne .zeilen { margin-top: 4px; }
  .js .buehne .zeilen li:not(.jetzt) { display: none; }
  .buehne .zeilen li::before { display: none; }
  .buehne .zeile { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 8px; }
  .buehne .zeile .knoten { display: none; }
  .buehne .beleg { margin-top: 5px; padding: 3px 9px 3px 7px; }
  .buehne .zeile { gap: 10px; }
  .buehne .auftrag-fuss { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wortmarke { font-size: 20px; }
  .steck { font-size: 13px; padding: 9px 9px 8px; }
}

/* «Bewegung reduzieren» (Regelwerk §6): alles steht sofort im Endzustand */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .js .zeige { opacity: 1; translate: none; }
  .knopf:hover { transform: none; }
}

/* Ergänzungen: Steckkarten-Inhalt, feste Nina-Karten, Abstände der Unterseiten */
.steck b { display: block; font-weight: 600; }
.frei-fix { display: inline-flex; align-items: center; gap: 5px; color: var(--petrol); font-weight: 600; }
.frei-fix .ikon { width: 13px; height: 13px; stroke-width: 2.4; }
.faehig { padding-top: 0; }
.zusagen-seite { padding-top: 0; }
.zusagen-seite h2 { margin-bottom: clamp(20px, 3vw, 36px); }
.gunnar-text .zitat { margin-top: 6px; }

.fuss-w { width: 34px; height: auto; margin-bottom: 10px; }

/* Startbild Fassung 8 (Founder-Freigabe 23.10., CE-432): nur das obere Fünftel, kein Vorhang, auch am Handy. Das W kippt
   von unten hoch (grauer Schatten), der Goldkopf fällt und ditscht, der Blitz macht die Hände; das W wird zum «w» der
   Wortmarke (1,5 s), dann tippelt der Goldkopf in 2 Sprüngen auf das ı (~2,5 s). Gesteuert von seite.js. Ohne JavaScript
   und bei «Bewegung reduzieren» gibt es kein Startbild. */
.startbuehne { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.startbuehne.weg { display: none; }
.startbuehne .zeichen { position: absolute; left: 50%; top: clamp(52px, 10.5vh, 92px); width: clamp(70px, 10.5vh, 92px); aspect-ratio: 1; translate: -50% 0; }
.startbuehne .flug-w { position: absolute; inset: 0; transform-origin: 0 0; }
.startbuehne .klapp { position: absolute; inset: 0; transform-origin: 50% 94%; filter: drop-shadow(0 1.5px 1.5px rgba(44, 48, 58, .22)) drop-shadow(0 7px 9px rgba(44, 48, 58, .16)); }
.startbuehne .klapp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.startbuehne .boden { position: absolute; left: 4%; right: 4%; top: 90.5%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(52, 56, 66, .34), transparent); }
.startbuehne .kugel { position: absolute; left: 40.42%; top: 3.96%; width: 19.17%; aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(146deg, #fffbf0 0%, #f0d284 26%, #bf9327 58%, #4b3706 100%); box-shadow: 0 1px 2px rgba(60, 44, 10, .25); }
.zu main, .zu .kopf .wortmarke .tt, .zu #navigation, .zu .kopf-knopf, .zu .anruf-knopf, .zu .menue-knopf, .punkt-zu .kopf .wortmarke .punkt { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .startbuehne { display: none; } }

/* ============ Fassung 5 (Übergabe 21.10.2026) ============ */

/* Hörprobe (7.2): Gold-Knopf, Welle zeigt den Fortschritt, kein Autoplay */
.start-hoer { grid-area: hoer; }
.hoer-beschriftung { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.hoerprobe { --p: 0; display: flex; align-items: center; gap: 14px; max-width: 420px; padding: 10px 16px 10px 10px; background: var(--karte); border: 1px solid var(--kante); border-radius: 999px; box-shadow: 0 1px 1px rgba(26, 39, 68, .05); }
.hoer-knopf { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0 0 0 3px; border: 0; border-radius: 50%; background: var(--gold); color: var(--navy); font: inherit; font-size: 17px; line-height: 1; cursor: pointer; box-shadow: 0 6px 14px -8px rgba(26, 39, 68, .6); transition: transform .2s var(--aus); }
.hoer-knopf.spielt { padding: 0; font-size: 15px; letter-spacing: -2px; }
.hoer-knopf:active { transform: scale(.95); }
.hoer-welle { flex: 1; min-width: 0; height: 28px; background: linear-gradient(90deg, var(--gold) calc(var(--p) * 100%), var(--kante) calc(var(--p) * 100%)); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2032'%20preserveAspectRatio='none'%3E%3Crect%20x='0'%20y='6.5'%20width='3'%20height='19'%20rx='1.5'/%3E%3Crect%20x='5'%20y='2.0'%20width='3'%20height='28'%20rx='1.5'/%3E%3Crect%20x='10'%20y='6.0'%20width='3'%20height='20'%20rx='1.5'/%3E%3Crect%20x='15'%20y='8.0'%20width='3'%20height='16'%20rx='1.5'/%3E%3Crect%20x='20'%20y='3.0'%20width='3'%20height='26'%20rx='1.5'/%3E%3Crect%20x='25'%20y='2.0'%20width='3'%20height='28'%20rx='1.5'/%3E%3Crect%20x='30'%20y='8.0'%20width='3'%20height='16'%20rx='1.5'/%3E%3Crect%20x='35'%20y='8.5'%20width='3'%20height='15'%20rx='1.5'/%3E%3Crect%20x='40'%20y='4.5'%20width='3'%20height='23'%20rx='1.5'/%3E%3Crect%20x='45'%20y='6.5'%20width='3'%20height='19'%20rx='1.5'/%3E%3Crect%20x='50'%20y='12.0'%20width='3'%20height='8'%20rx='1.5'/%3E%3Crect%20x='55'%20y='9.0'%20width='3'%20height='14'%20rx='1.5'/%3E%3Crect%20x='60'%20y='4.5'%20width='3'%20height='23'%20rx='1.5'/%3E%3Crect%20x='65'%20y='7.5'%20width='3'%20height='17'%20rx='1.5'/%3E%3Crect%20x='70'%20y='10.0'%20width='3'%20height='12'%20rx='1.5'/%3E%3Crect%20x='75'%20y='4.5'%20width='3'%20height='23'%20rx='1.5'/%3E%3Crect%20x='80'%20y='2.0'%20width='3'%20height='28'%20rx='1.5'/%3E%3Crect%20x='85'%20y='6.5'%20width='3'%20height='19'%20rx='1.5'/%3E%3Crect%20x='90'%20y='7.0'%20width='3'%20height='18'%20rx='1.5'/%3E%3Crect%20x='95'%20y='2.5'%20width='3'%20height='27'%20rx='1.5'/%3E%3Crect%20x='100'%20y='4.0'%20width='3'%20height='24'%20rx='1.5'/%3E%3Crect%20x='105'%20y='9.5'%20width='3'%20height='13'%20rx='1.5'/%3E%3Crect%20x='110'%20y='8.5'%20width='3'%20height='15'%20rx='1.5'/%3E%3Crect%20x='115'%20y='4.5'%20width='3'%20height='23'%20rx='1.5'/%3E%3Crect%20x='120'%20y='8.5'%20width='3'%20height='15'%20rx='1.5'/%3E%3Crect%20x='125'%20y='12.0'%20width='3'%20height='8'%20rx='1.5'/%3E%3Crect%20x='130'%20y='7.5'%20width='3'%20height='17'%20rx='1.5'/%3E%3Crect%20x='135'%20y='4.0'%20width='3'%20height='24'%20rx='1.5'/%3E%3Crect%20x='140'%20y='8.0'%20width='3'%20height='16'%20rx='1.5'/%3E%3Crect%20x='145'%20y='8.5'%20width='3'%20height='15'%20rx='1.5'/%3E%3Crect%20x='150'%20y='2.5'%20width='3'%20height='27'%20rx='1.5'/%3E%3Crect%20x='155'%20y='2.5'%20width='3'%20height='27'%20rx='1.5'/%3E%3Crect%20x='160'%20y='7.5'%20width='3'%20height='17'%20rx='1.5'/%3E%3Crect%20x='165'%20y='6.5'%20width='3'%20height='19'%20rx='1.5'/%3E%3Crect%20x='170'%20y='2.5'%20width='3'%20height='27'%20rx='1.5'/%3E%3Crect%20x='175'%20y='6.0'%20width='3'%20height='20'%20rx='1.5'/%3E%3Crect%20x='180'%20y='11.0'%20width='3'%20height='10'%20rx='1.5'/%3E%3Crect%20x='185'%20y='8.0'%20width='3'%20height='16'%20rx='1.5'/%3E%3Crect%20x='190'%20y='5.0'%20width='3'%20height='22'%20rx='1.5'/%3E%3Crect%20x='195'%20y='9.5'%20width='3'%20height='13'%20rx='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2032'%20preserveAspectRatio='none'%3E%3Crect%20x='0'%20y='6.5'%20width='3'%20height='19'%20rx='1.5'/%3E%3Crect%20x='5'%20y='2.0'%20width='3'%20height='28'%20rx='1.5'/%3E%3Crect%20x='10'%20y='6.0'%20width='3'%20height='20'%20rx='1.5'/%3E%3Crect%20x='15'%20y='8.0'%20width='3'%20height='16'%20rx='1.5'/%3E%3Crect%20x='20'%20y='3.0'%20width='3'%20height='26'%20rx='1.5'/%3E%3Crect%20x='25'%20y='2.0'%20width='3'%20height='28'%20rx='1.5'/%3E%3Crect%20x='30'%20y='8.0'%20width='3'%20height='16'%20rx='1.5'/%3E%3Crect%20x='35'%20y='8.5'%20width='3'%20height='15'%20rx='1.5'/%3E%3Crect%20x='40'%20y='4.5'%20width='3'%20height='23'%20rx='1.5'/%3E%3Crect%20x='45'%20y='6.5'%20width='3'%20height='19'%20rx='1.5'/%3E%3Crect%20x='50'%20y='12.0'%20width='3'%20height='8'%20rx='1.5'/%3E%3Crect%20x='55'%20y='9.0'%20width='3'%20height='14'%20rx='1.5'/%3E%3Crect%20x='60'%20y='4.5'%20width='3'%20height='23'%20rx='1.5'/%3E%3Crect%20x='65'%20y='7.5'%20width='3'%20height='17'%20rx='1.5'/%3E%3Crect%20x='70'%20y='10.0'%20width='3'%20height='12'%20rx='1.5'/%3E%3Crect%20x='75'%20y='4.5'%20width='3'%20height='23'%20rx='1.5'/%3E%3Crect%20x='80'%20y='2.0'%20width='3'%20height='28'%20rx='1.5'/%3E%3Crect%20x='85'%20y='6.5'%20width='3'%20height='19'%20rx='1.5'/%3E%3Crect%20x='90'%20y='7.0'%20width='3'%20height='18'%20rx='1.5'/%3E%3Crect%20x='95'%20y='2.5'%20width='3'%20height='27'%20rx='1.5'/%3E%3Crect%20x='100'%20y='4.0'%20width='3'%20height='24'%20rx='1.5'/%3E%3Crect%20x='105'%20y='9.5'%20width='3'%20height='13'%20rx='1.5'/%3E%3Crect%20x='110'%20y='8.5'%20width='3'%20height='15'%20rx='1.5'/%3E%3Crect%20x='115'%20y='4.5'%20width='3'%20height='23'%20rx='1.5'/%3E%3Crect%20x='120'%20y='8.5'%20width='3'%20height='15'%20rx='1.5'/%3E%3Crect%20x='125'%20y='12.0'%20width='3'%20height='8'%20rx='1.5'/%3E%3Crect%20x='130'%20y='7.5'%20width='3'%20height='17'%20rx='1.5'/%3E%3Crect%20x='135'%20y='4.0'%20width='3'%20height='24'%20rx='1.5'/%3E%3Crect%20x='140'%20y='8.0'%20width='3'%20height='16'%20rx='1.5'/%3E%3Crect%20x='145'%20y='8.5'%20width='3'%20height='15'%20rx='1.5'/%3E%3Crect%20x='150'%20y='2.5'%20width='3'%20height='27'%20rx='1.5'/%3E%3Crect%20x='155'%20y='2.5'%20width='3'%20height='27'%20rx='1.5'/%3E%3Crect%20x='160'%20y='7.5'%20width='3'%20height='17'%20rx='1.5'/%3E%3Crect%20x='165'%20y='6.5'%20width='3'%20height='19'%20rx='1.5'/%3E%3Crect%20x='170'%20y='2.5'%20width='3'%20height='27'%20rx='1.5'/%3E%3Crect%20x='175'%20y='6.0'%20width='3'%20height='20'%20rx='1.5'/%3E%3Crect%20x='180'%20y='11.0'%20width='3'%20height='10'%20rx='1.5'/%3E%3Crect%20x='185'%20y='8.0'%20width='3'%20height='16'%20rx='1.5'/%3E%3Crect%20x='190'%20y='5.0'%20width='3'%20height='22'%20rx='1.5'/%3E%3Crect%20x='195'%20y='9.5'%20width='3'%20height='13'%20rx='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.hoer-dauer { flex: none; font-family: var(--mono); font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Knöpfe im ersten Bildschirm (5.1): Probeanruf zuerst, darunter Gunnar, beide volle Breite am Handy */
.start-aktion { grid-area: aktion; }
.start-knoepfe { display: grid; gap: 10px; max-width: 420px; }
.start-knoepfe .knopf { width: 100%; }
.start-scheu { margin: 12px 0 0; max-width: 46ch; font-size: 13px; line-height: 1.45; color: var(--text-3); }

/* Ein Auftrag, Kurzfassung auf der Startseite: Stufen-Leiste als Bild, nicht animiert */
.kurz-innen { max-width: 760px; }
.kurz-innen > p { margin: 16px 0 22px; color: var(--text-2); font-size: clamp(17px, 1.5vw, 19px); max-width: 52ch; }
.stufen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 560px; margin: 0 0 14px; }
.stufen span { position: relative; padding-top: 12px; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.stufen span::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--gold); }

/* Häufige Fragen (6): 5 Fragen, zugeklappt */
.faq-innen { max-width: 760px; }
.faq h2 { margin-bottom: clamp(18px, 3vw, 30px); }
.frage-block { border-top: 1px solid var(--kante); }
.frage-block:last-child { border-bottom: 1px solid var(--kante); }
.frage-block summary { position: relative; display: block; min-height: 44px; padding: 14px 40px 14px 0; font-weight: 600; font-size: 17px; line-height: 1.35; cursor: pointer; list-style: none; }
.frage-block summary::-webkit-details-marker { display: none; }
.frage-block summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 1.8px solid var(--gold-text); border-bottom: 1.8px solid var(--gold-text); rotate: 45deg; transition: rotate .3s var(--aus); }
.frage-block[open] summary::after { rotate: 225deg; margin-top: -2px; }
.frage-block p { margin: 0 0 18px; color: var(--text-2); max-width: 60ch; }

/* Angebot von Gunnar: Foto, «Eine Viertelstunde mit mir», Knopf */
.angebot-raster { grid-template-columns: 116px minmax(0, 1fr); gap: 20px; align-items: center; }
.angebot-bild { aspect-ratio: 4 / 5; padding: 5px; }
.angebot-bild img { border-radius: 6px; }
.angebot-bild::after { inset: 2.5px; border-radius: 9px; }
.angebot h2 { font-size: clamp(26px, 3.6vw, 46px); margin-bottom: 14px; }
.angebot h2 span { display: block; }
.angebot .unterschrift { margin-bottom: 18px; }
.angebot-raster { grid-template-areas: 'bild text' 'aktion aktion'; }
.angebot-bild { grid-area: bild; } .angebot-text { grid-area: text; } .angebot-aktion { grid-area: aktion; }
.angebot .unterschrift { font-size: 14px; }
.fuss-credit { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--text-3); }

/* Ein Auftrag (eigener Reiter) */
.ablauf-seite { padding-top: clamp(28px, 6vw, 72px); }
.ablauf-seite h1 { font-size: clamp(38px, 5.4vw, 64px); }

/* Hallo-Video fest auf «Wer dahintersteht» */
.hallo-sektion { padding-top: 0; }
.hallo-raster { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.hallo-text h2 { font-size: clamp(28px, 3.6vw, 46px); }
.hallo-text h2 span { display: block; }


/* Handy: kompakter, damit die Startseite in 5 Bildschirme passt (7.4) */
@media (max-width: 760px) {
  .js .zeige { opacity: 1 !important; translate: none !important; transition: none !important; }
  section { padding-top: 44px; padding-bottom: 44px; }
  h2 { font-size: 28px; }
  .angebot h2 { font-size: 24px; }
  .angebot .unterschrift { margin-bottom: 0; }
  .angebot-raster { grid-template-columns: 96px minmax(0, 1fr); gap: 18px 16px; }
  .start { padding-top: 18px; padding-bottom: 30px; }
  .start h1 { font-size: 36px; }
  .start-lead { font-size: 17px; }
  .kurz { padding-top: 40px; }
  .zusage { padding: 22px 0; }
  .zusage h2 { font-size: 24px; margin-bottom: 8px; }
  .frage-block summary { padding: 11px 36px 11px 0; font-size: 16px; }
  .fuss { padding: 32px var(--x) 30px; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px 18px; font-size: 14px; }
  .fuss-tel { grid-column: 1 / -1; }
  .fuss-w { display: none; }
}
@media (min-width: 760px) {
  .angebot-raster { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
  .angebot-raster { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: 'bild text' 'bild aktion'; align-items: end; row-gap: 0; }
  .angebot-aktion { align-self: start; }
  .hallo-raster { grid-template-columns: 1fr auto; gap: 56px; }
}

/* CE-430 (D3 23.10.: «Heute / 7 Tage später / Was es kostet» bleibt): am Handy als kompakte Zeilen, damit die Startseite
   unter 5 Bildschirmen bleibt — Zeitpunkt links, Satz rechts, kleinere Schrift. */
@media (max-width: 760px) {
  .ablauf-gunnar { margin-bottom: 20px; }
  .ablauf-gunnar li { grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; }
  .ablauf-gunnar .wann { font-size: 12px; }
  .ablauf-gunnar p { font-size: 17px; line-height: 1.35; }
  .zusage { padding: 16px 0; }
  .zusage h2 { font-size: 26px; margin-bottom: 8px; }
}
.angebot-raster { grid-template-areas: 'bild text' 'ablauf ablauf' 'aktion aktion'; }
.angebot-raster > .ablauf-gunnar { grid-area: ablauf; max-width: 760px; margin: 0; }
@media (min-width: 1040px) {
  .angebot-raster { grid-template-areas: 'bild text' 'bild ablauf' 'bild aktion'; }
}
@media (max-width: 760px) {
  .zusagen, .faq, .angebot, .kurz { padding-block: 26px; }
  .zusage { padding: 12px 0; }
  .zusage h2 { font-size: 24px; }
}
/* CE-430: Nummer auf der Visitenkarte und «7 Tage später» nie umbrechen. */
.vk-link { white-space: nowrap; }
@media (max-width: 760px) { .ablauf-gunnar li { grid-template-columns: 104px 1fr; } .ablauf-gunnar .wann { white-space: nowrap; } }
/* CE-430: Browser-Anruf als ruhige zweite Möglichkeit unter dem Probeanruf. */
.browser-anruf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 4px 6px; margin: -2px auto 0; background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.browser-anruf .ikon { width: 18px; height: 18px; stroke: var(--gold-text); }
.browser-anruf[data-zustand="laeuft"], .browser-anruf[data-zustand="spricht"] { color: var(--gold-text); }
.ba-zeit { font-family: var(--mono); font-size: 13px; color: var(--text-2); text-align: center; }
.ba-satz { font-size: 14px; color: var(--text-2); text-align: center; }
@media (max-width: 760px) { .start-knoepfe { gap: 6px; } .start-scheu { margin-top: 6px; } .start-lead { margin-bottom: 14px; } }

/* ============ CE-434 · Neue Startseite (Founder-Go 23.10. ~18:00, Gestaltung Seitenhandwerk) ============
   Reihenfolge: Einstieg mit Film · Was Nina übernimmt · Ein Blick in Ninas Woche · App · eine Zusage · Fragen ·
   Viertelstunde. Pro Abschnitt eine Aussage, viel Ruhe; Gold nur für das, was Nina vorbereitet hat (Plantafel). */

/* 1 · Einstieg: Laptop zwei Spalten (Text links, Film hochkant wie ein Handy rechts), Handy untereinander */
.held { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.held-zeile { margin: 0 0 18px; font-size: 15px; font-weight: 500; letter-spacing: .01em; color: var(--text-2); max-width: 34ch; }
.held .start-titel { margin: 0 0 30px; }
.held .start-knoepfe { max-width: 360px; }
.held-film { margin: 0; display: grid; justify-items: center; gap: 12px; }
.film-rahmen { width: min(300px, 82vw); aspect-ratio: 9 / 16; padding: 9px; border-radius: 38px; background: var(--navy);
  box-shadow: 0 0 0 1px rgba(26, 39, 68, .25), 0 40px 70px -40px rgba(26, 39, 68, .65); }
.website-film { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; background: var(--elfenbein); }
.held-film figcaption { font-size: 13px; color: var(--text-3); }
@media (min-width: 1040px) {
  .held { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; }
  .film-rahmen { width: 320px; }
}

/* 2 · Was Nina übernimmt: 4 ruhige Kacheln, Titel + 1 Satz */
.uebernimmt h2, .woche h2 { margin-bottom: clamp(22px, 3vw, 38px); }
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.kachel { padding: 24px 22px 26px; background: var(--karte); border: 1px solid var(--kante-leise); border-radius: var(--r); }
.kachel .ikon { width: 26px; height: 26px; color: var(--text); }
.kachel h3 { margin: 16px 0 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2vw, 26px); }
.kachel p { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.5; }
@media (min-width: 640px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }

/* 3 · Ein Blick in Ninas Woche: die Plantafel als eigener Abschnitt (Entwürfe zum Antippen bleiben) */
.woche { padding-top: 0; }
.woche .tafel { margin: 0 0 54px; }
.woche-weiter { margin-top: 4px; }
.js:not(.ruhig) .woche .steck { animation: steigen .9s var(--aus) both; animation-delay: calc(.25s + var(--i, 0) * .07s); }
.js:not(.ruhig) .woche .steck.nina::before { animation: aufsetzen .7s var(--aus) both; animation-delay: calc(.75s + var(--i, 0) * .07s); }

/* 5 · Eine Zusage statt zwei */
.zusage-eins-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; border-top: 1px solid var(--kante-leise); border-bottom: 1px solid var(--kante-leise); padding: 34px 0; }
.zusage-eins h2 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); }
.zusage-eins h2 span { display: block; color: var(--text-2); }

/* Handy: ruhig und kompakt */
@media (max-width: 760px) {
  .held-zeile { font-size: 14px; margin-bottom: 12px; }
  .held .start-titel { margin-bottom: 22px; }
  .held { gap: 30px; }
  .uebernimmt, .woche, .zusage-eins { padding-block: 30px; }
  .woche { padding-top: 6px; }
  .kachel { padding: 20px 18px 22px; }
  .kachel h3 { margin-top: 12px; font-size: 22px; }
  .zusage-eins-raster { padding: 24px 0; }
  .zusage-eins h2 { font-size: 26px; }
}
/* CE-434 · Handy: unter 5 Bildschirmen bleiben (Übergabe 7.4) — Symbol neben dem Titel, Film etwas schmaler */
@media (max-width: 760px) {
  .film-rahmen { width: min(256px, 70vw); border-radius: 34px; padding: 8px; }
  .website-film { border-radius: 27px; }
  .kacheln { gap: 10px; }
  .kachel { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 16px 16px 18px; }
  .kachel .ikon { width: 22px; height: 22px; }
  .kachel h3 { margin: 0; font-size: 21px; }
  .kachel p { grid-column: 1 / -1; margin-top: 8px; font-size: 15.5px; }
}
/* CE-434 · Nachzug (CE 23.10.): Laptop-Einstieg grösser und ruhiger, keine «leeren Bildschirme», Fragen in voller Breite */
@media (min-width: 761px) {
  #start > section:not(.start) { padding-top: clamp(48px, 5.5vw, 84px); padding-bottom: clamp(48px, 5.5vw, 84px); }
  #start > .start { padding-bottom: clamp(44px, 5vw, 70px); }
  #start > .woche { padding-top: 0; }
  #start > .zusage-eins { padding-block: clamp(40px, 4.5vw, 64px); }
}
@media (min-width: 1040px) {
  .film-rahmen { width: 360px; }
  .held { align-items: center; }
}
.held-zeile { text-wrap: balance; }
.faq-innen { max-width: var(--breite); }

/* CE-434 f123: sechs Phasen (mit «Vortag») — auf schmalen Handys verteilen sich die Spalten nach ihrem Wort, sonst ragt «Angebot» über seine Spalte. */
@media (max-width: 480px) { .phasen { grid-template-columns: repeat(6, auto); gap: 4px; } }

/* CE-434 f127: die Datenschutz-Zeile sitzt im Block «Ihre Daten bleiben Ihre» (Gunnar: «gehört nicht auf Titelseite»); das Kreuz bleibt oben bündig, wenn sie am Handy umbricht. */
.daten-schutz { display: flex; align-items: flex-start; gap: 10px; font-family: var(--sans); font-size: 15px; line-height: 20px; color: var(--text-2); }
.daten-schutz .schweizer-kreuz { flex: none; width: 20px; height: 20px; }

/* CE-434 / A5 — Einstieg «Ninas Rad» (Founder-Freigabe 24.10.). Gebaut aus LEs Prototyp (tmp/website_einstieg/bausteine),
   alle Klassen mit «rad-» bzw. «held-», weil .buehne, .zeile und .kachel auf der Seite schon vergeben sind.
   Die Bühne ist quadratisch und misst sich selbst; Positionen setzt seite.js in Bruchteilen der Kante. Ohne Skript und bei
   prefers-reduced-motion steht der Ruhezustand. */
.held-rad { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "bild" "aktion"; gap: 18px; }
.held-rad .held-text { grid-area: text; }
.held-rad .held-bild { grid-area: bild; min-width: 0; }
.held-rad .held-aktion { grid-area: aktion; }
.held-rad .held-zeile { max-width: none; margin: 0 0 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.held-weiter { font-weight: 600; font-size: 16px; color: var(--text); text-decoration: none; }
.held-weiter:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.rad { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto 84px; }
.rad-linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rad-sys { position: absolute; left: 0; top: 0; width: 15.5%; height: 15.5%; will-change: transform, opacity; }
.rad-flaeche { width: 100%; height: 100%; border-radius: 24%; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(26, 39, 68, .08), 0 14px 28px -14px rgba(26, 39, 68, .35); }
.rad-flaeche img { width: 56%; height: 56%; object-fit: contain; }
.rad-kal { width: 100%; height: 100%; border-radius: 24%; overflow: hidden; display: grid; grid-template-rows: 30% 1fr; text-align: center; }
.rad-kal i { font-style: normal; background: #e5484d; color: #fff; font-weight: 700; font-size: .7em; letter-spacing: .2em; display: grid; place-items: center; }
.rad-kal b { font-family: var(--serif); font-weight: 600; font-size: 1.55em; display: grid; place-items: center; color: var(--text); }
.rad-name { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px; font-size: 12.5px; background: var(--grund); padding: 0 5px; border-radius: 5px; line-height: 1.5; font-weight: 600; color: var(--text-2); white-space: nowrap; opacity: 0; transition: opacity .8s var(--aus); }
.rad.ruht .rad-name { opacity: 1; }
.rad-nina { position: absolute; left: 50%; top: 50%; width: 33%; height: 33%; border-radius: 50%; overflow: hidden; transform: translate(-50%, -50%); background: #f3ecdc;
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 11px rgba(201, 162, 74, .13), 0 24px 50px -18px rgba(26, 39, 68, .45); }
.rad-nina img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rad-schild { position: absolute; left: 50%; top: calc(87% + 40px); transform: translateX(-50%); text-align: center; white-space: nowrap; }
.rad-schild b { display: block; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.1; }
.rad-schild i { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin-top: 3px; }
.rad-marken { margin: 0; text-align: center; font-size: 11.5px; color: var(--text-3); opacity: .8; }
/* Vor dem ersten Bild des Skripts (und bis die Schrift steht) nichts zeigen, was gleich springt; ohne Skript Ruhezustand. */
.js .rad:not(.bereit) .rad-sys, .js .rad:not(.bereit) .rad-nina, .js .rad:not(.bereit) .rad-schild { opacity: 0; }
.film-ebene-innen { display: grid; gap: 22px; justify-items: center; text-align: center; padding-top: 46px; border-top: 1px solid var(--kante-leise); }
.film-ebene h2 { font-size: clamp(28px, 3.4vw, 40px); }
.film-ebene h2 small { display: block; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 10px; }
@media (min-width: 900px) {
  .held-rad { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); grid-template-areas: "text bild" "aktion bild"; column-gap: 56px; row-gap: 28px; align-content: center; }
  .held-rad .held-text { align-self: end; }
  .held-rad .held-aktion { align-self: start; }
}
/* Ohne Skript: Ruhezustand mit festen Plätzen im Rad. */
html:not(.js) .rad-sys[data-i="0"] { left: 42.25%; top: 5.25%; }
html:not(.js) .rad-sys[data-i="1"] { left: 71.18%; top: 19.18%; }
html:not(.js) .rad-sys[data-i="2"] { left: 78.32%; top: 50.48%; }
html:not(.js) .rad-sys[data-i="3"] { left: 58.30%; top: 75.59%; }
html:not(.js) .rad-sys[data-i="4"] { left: 26.20%; top: 75.59%; }
html:not(.js) .rad-sys[data-i="5"] { left: 6.18%; top: 50.48%; }
html:not(.js) .rad-sys[data-i="6"] { left: 13.32%; top: 19.18%; }
html:not(.js) .rad-name { opacity: 1; }
html:not(.js) .rad-schild { top: calc(94.75% + 40px); }

/* CE-434 f140 (Founder 24.10.): am Laptop und grossen Monitor höchstens 4 Zeilen — «Jeder in Ihrem Team bekommt / eine
   Assistentin. / Was rausgeht, / entscheidet Ihr Team.» Die Umbrüche stehen fest (nur ab 900 px), die Titelgrösse folgt der
   Textspalte: Breite = Inhalt (max. 1200) − Rad − Abstand; 0.08 = 70/847 (Breite von «Jeder in Ihrem Team bekommt» bei
   70 px) mit 3 % Luft. Das Rad bleibt 380–460 px. Am Handy bleibt alles, wie es ist. */
.titel-umbruch { display: none; }
@media (min-width: 900px) {
  .titel-umbruch { display: inline; }
  .held-rad { grid-template-columns: minmax(0, 1fr) clamp(380px, 33vw, 460px); column-gap: 48px; }
  .held-rad .start-titel { font-size: max(32px, min(56px, calc((min(1200px, 100vw - 2 * var(--x)) - clamp(380px, 33vw, 460px) - 48px) * 0.08))); text-wrap: wrap; }
}
/* Unter 1200 px setzt die Schrift kleiner und läuft dabei relativ breiter (optische Grösse) — dort mehr Luft. */
@media (min-width: 900px) and (max-width: 1199px) {
  .held-rad .start-titel { font-size: max(30px, calc((100vw - 2 * var(--x) - clamp(380px, 33vw, 460px) - 48px) * 0.074)); }
}
/* 900–999 px: neben dem Rad bliebe keine lesbare Titelgrösse — dort wie am Tablet hochkant (Titel über dem Rad). */
@media (min-width: 900px) and (max-width: 999px) {
  .held-rad { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "bild" "aktion"; }
  .held-rad .start-titel { font-size: clamp(40px, 5.4vw, 70px); }
  .titel-umbruch { display: none; }
}
.fuss-credit a { color: inherit; text-underline-offset: 3px; }

/* «Wie eine Show» (Founder 24.10.): während das W fliegt, steht der Einstiegstext schon da (seite.js führt ihn von unter dem
   W an seinen Platz); der Rest der Seite und das Rad warten. Nur Deckkraft und transform, das Layout bleibt stehen. */
html[data-einstieg="show"].zu main { opacity: 1; }
html[data-einstieg="show"].zu main > :not(.start),
html[data-einstieg="show"].zu .held-rad .held-text,
html[data-einstieg="show"].zu .held-rad .held-aktion { opacity: 0; }
.js .rad:not(.bereit) + .rad-marken { opacity: 0; }
.rad-marken { transition: opacity .6s var(--aus); }
/* LE-306 · Gerätebühne Fassung 4 (Gunnar 24.10., nach LE-304/f148): Navy-Abschnitt, damit die Seite nicht nur weiss ist;
   ein echter Laptop (Bildschirmrand mit Kamera, Scharnier, Unterteil mit Tastatur-Kante, Auflageschatten) und ein
   breiteres Handy (19,5:9, ohne Insel). KEINE Bewegung: nichts neigt, schwebt oder glänzt — alles steht still und
   gestochen scharf; nur das Tippen im Chat bleibt. Derselbe Nina-Chat in beiden Geräten (Zustand geteilt), hell wie
   die CEO-App, Navy nur am Senden-Knopf. Masse im Chat in em, Grundgrösse je Gerät. */
.gb { background: var(--navy); overflow: hidden; }
.gb-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.gb h2 { font-size: clamp(32px, 4.4vw, 44px); line-height: 1.1; color: var(--elfenbein); }
.gb h2 span { display: block; }
.gb-spalte { min-width: 0; width: 100%; max-width: 780px; margin: 0 auto; }
.gb-fuss { margin: 26px 0 0; text-align: center; font-size: 12px; line-height: 1.4; color: rgba(246, 239, 223, .5); }
@media (min-width: 1240px) {
  .gb-raster { grid-template-columns: max-content minmax(0, 1fr); gap: 56px; align-items: center; }
  .gb h2 span { white-space: nowrap; }
  .gb-spalte { max-width: none; }
}

.gb-buehne { position: relative; }
.gb-platz { position: relative; width: 100%; height: 647px; }
.gb-szene { position: absolute; inset: 0; }
.gb-boden { position: absolute; left: -2%; width: 88%; top: 356px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); filter: blur(10px); }

/* Laptop: Deckel mit schmalem dunklem Rand und Kamera, Scharnier, Unterteil mit Tastatur-Kante und Griffmulde */
.gb-laptop { position: absolute; left: 0; top: 0; width: 84%; }
.gb-deckel { position: relative; padding: 16px 12px 12px; border-radius: 16px 16px 4px 4px; background: #0d0f13; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 0 0 3px #1b1e24; }
.gb-kamera { position: absolute; top: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #2b313b; box-shadow: inset 0 0 0 1px #3a414d; }
.gb-schirm { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 3px; background: var(--grund); }
.gb-unterteil { position: relative; height: 15px; margin: 0 -7.5%; border-radius: 1px 1px 12px 12px;
  background: linear-gradient(180deg, #e8e9ec 0%, #e8e9ec 18%, #c9ccd2 22%, #b3b7be 70%, #8f949c 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 16px 26px -10px rgba(0, 0, 0, .55); }
.gb-unterteil::before { content: ''; position: absolute; left: 7.5%; right: 7.5%; top: 0; height: 3px; background: linear-gradient(180deg, #4a4f58, #2a2d33); border-radius: 0 0 2px 2px; }
.gb-mulde { position: absolute; left: 50%; top: 3px; width: 16%; height: 5px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #a8acb3, #c4c7cd); }

/* Handy: schmaler dunkler Rand, 19,5:9, ohne Insel */
.gb-handy { position: absolute; right: 0; bottom: 0; width: 263px; height: 527px; padding: 5px; border-radius: 40px; background: #16171a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -18px rgba(0, 0, 0, .6); }
.gb-handy-schirm { position: relative; overflow: hidden; height: 100%; border-radius: 35px; background: var(--grund); }

/* Arbeitsfläche hinter dem Chat, zensiert: nur ruhige Platzhalter */
.gb-leit { position: absolute; inset: 0; padding: 14px 16px 14px 338px; display: flex; flex-direction: column; gap: 12px; }
.gb-b { display: block; height: 8px; border-radius: 4px; background: #e4e1da; }
.gb-b.k { background: #ece9e3; }
.gb-titel { width: 34%; height: 12px; }
.gb-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gb-kachel { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid var(--kante-leise); border-radius: 10px; background: var(--karte); }
.gb-kachel .gb-b:first-child { width: 36%; height: 14px; }
.gb-kachel .gb-b.k { width: 72%; }
.gb-liste { overflow: hidden; border: 1px solid var(--kante-leise); border-radius: 10px; background: var(--karte); }
.gb-reihe { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-top: 1px solid #eeece6; }
.gb-reihe:first-child { border-top: 0; }
.gb-pille { display: block; width: 34px; height: 12px; border-radius: 99px; background: #efe9da; }

/* Chat */
.gb-chat { display: flex; flex-direction: column; background: var(--grund); color: var(--navy); font-family: 'Instrument Sans', var(--sans); font-size: 13px; line-height: 1.45; }
.gb-handy .gb-chat { position: absolute; inset: 0; font-size: 12.6px; }
.gb-laptop .gb-chat { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 310px; font-size: 10px; overflow: hidden; border-radius: 12px; box-shadow: 0 22px 44px -16px rgba(15, 26, 46, .38), 0 0 0 1px rgba(26, 39, 68, .08); }
.gb-kopf { position: relative; display: flex; flex-shrink: 0; align-items: center; gap: .8em; padding: .8em 1.2em; background: #fbfaf6; }
.gb-kopf::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(200, 169, 106, 0), rgba(200, 169, 106, .7) 25%, rgba(200, 169, 106, .7) 75%, rgba(200, 169, 106, 0)); }
.gb-handy .gb-kopf { padding-top: 1.15em; padding-bottom: .8em; }
.gb-av { position: relative; flex-shrink: 0; width: 2.5em; height: 2.5em; }
.gb-av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #fbfaf6, 0 0 0 2px #c8a96a; }
.gb-av::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: .7em; height: .7em; border-radius: 50%; background: #6cc08a; border: 2px solid #fbfaf6; }
.gb-kopf b { font: 500 1.35em/1 var(--serif); letter-spacing: .005em; color: var(--navy); }
.gb-flaeche { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: .8em 1em .75em; }
.gb-verlauf { position: relative; display: flex; flex: 1; flex-direction: column; gap: .75em; min-height: 0; margin-bottom: .75em; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.gb-verlauf::-webkit-scrollbar { display: none; }
.gb-verlauf > :first-child { margin-top: auto; }
.gb-luft { flex-shrink: 0; margin-top: -.75em; }
.gb-ich { flex-shrink: 0; align-self: flex-end; max-width: 88%; margin: 0; padding: .6em .95em; border-radius: 1.2em 1.2em .45em 1.2em; background: #ece5d3; color: var(--navy); }
.gb-du-zeile { display: flex; flex-shrink: 0; align-self: flex-start; max-width: 92%; }
.gb-du { min-width: 0; padding: .7em 1em; border: 1px solid var(--kante-leise); border-radius: 1.2em 1.2em 1.2em .45em; background: var(--karte); box-shadow: 0 4px 10px -4px rgba(15, 26, 46, .12); overflow-wrap: anywhere; }
.gb-du p { margin: 0; }
.gb-du p + ul, .gb-du ul + p { margin-top: .35em; }
.gb-du ul { display: flex; flex-direction: column; gap: .2em; margin: 0; padding: 0; list-style: none; }
.gb-du li { display: flex; gap: .55em; }
.gb-du li::before { content: ''; flex-shrink: 0; width: .3em; height: .3em; margin-top: .6em; border-radius: 50%; background: #c8a96a; }
.gb-du strong { font-weight: 600; }
.gb-grau { color: #6b7385; }
.gb-chips { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .7em; }
.gb-chip { padding: .4em .85em; border: 1px solid #e8d8b4; border-radius: 999px; background: var(--grund); color: var(--navy); font: 500 .93em/1.3 'Instrument Sans', var(--sans); white-space: nowrap; text-align: left; cursor: pointer; }
.gb-chip:hover { background: #efe6d0; }
.gb-chip:focus-visible, .gb-feld:focus-visible { outline: 2px solid #c8a96a; outline-offset: 2px; }
.gb-tippt { display: inline-flex; gap: .3em; padding: .4em .1em; }
.gb-tippt i { width: .4em; height: .4em; border-radius: 50%; background: #b8ad95; animation: gb-tipp 1s infinite ease-in-out; }
.gb-tippt i:nth-child(2) { animation-delay: .15s; } .gb-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes gb-tipp { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.gb-ablage { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; padding: 0 .1em .75em; }
.gb-feld { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: .6em; width: 100%; height: 3.5em; padding: .38em .38em .38em 1.2em; border: 1px solid #dcd9d2; border-radius: 1.8em; background: #fff; box-shadow: 0 2px 10px -4px rgba(22, 32, 46, .14); font: inherit; color: #8a8e98; text-align: left; cursor: text; }
.gb-mic { display: grid; flex-shrink: 0; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--navy); color: #f6efdc; }
.gb-mic svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 760px) {
  .gb-raster { gap: 30px; }
  .gb h2 { font-size: 30px; }
  .gb-spalte { max-width: 420px; }
  .gb-platz { height: 640px; }
  .gb-laptop { left: 6%; width: 88%; }
  .gb-deckel { padding: 9px 7px 7px; border-radius: 10px 10px 3px 3px; }
  .gb-kamera { top: 3px; width: 3px; height: 3px; margin-left: -1.5px; }
  .gb-unterteil { height: 9px; border-radius: 1px 1px 8px 8px; }
  .gb-mulde { height: 3px; top: 2px; }
  .gb-boden { top: 200px; left: 4%; width: 92%; height: 26px; }
  .gb-leit { padding: 8px 8px 8px 150px; gap: 6px; }
  .gb-titel { height: 8px; }
  .gb-b { height: 5px; }
  .gb-kacheln { gap: 5px; }
  .gb-kachel { gap: 4px; padding: 5px; border-radius: 6px; }
  .gb-kachel .gb-b:first-child { height: 8px; }
  .gb-reihe { grid-template-columns: 30px 1fr auto; gap: 5px; padding: 5px; }
  .gb-pille { width: 18px; height: 7px; }
  .gb-laptop .gb-chat { left: 5px; top: 5px; bottom: 5px; width: 138px; font-size: 7px; border-radius: 8px; }
  .gb-handy { width: 258px; height: 559px; padding: 5px; border-radius: 38px; }
  .gb-handy-schirm { border-radius: 33px; }
  .gb-handy .gb-chat { font-size: 12.5px; }
  .gb-fuss { margin-top: 20px; }
}
.ruhig .gb-tippt i { animation: none; opacity: .7; }
/* LE-308 (CE 24.10.: Gunnar mag keine Leerflächen): Der Laptop-Chat wächst mit dem Bildschirm — Schrift, Breite und
   Abstand in Einheiten der Bildschirmhöhe (Container), so passen bei jeder Laptop-Grösse dieselben zwei Runden wie bei 1440.
   Bei 1440 ergibt das genau die bisherigen 10 px / 310 px. Ohne Container-Einheiten gelten die px-Werte oben. */
@media (min-width: 761px) {
  .gb-schirm { container-type: size; }
  .gb-laptop .gb-chat { left: .8em; top: .8em; bottom: .8em; width: 31em; font-size: 2.8cqh; }
  .gb-leit { padding-left: calc(59.2cqw); }
}
/* LE-305 (Gunnar 24.10.): die Schweizer Zeile steht direkt unter «Ihr Team entscheidet. Ihre Daten bleiben Ihre.» */
.zusage-eins h2 + .daten-schutz { margin-top: 4px; }

/* LE-305 · Rechtsseiten und 404 im Auftritt der Website (Gunnar 24.10.: «muss alles Hand und Fuss haben»). Die Seiten
   sind Next-Seiten (Datenschutz liest Anbieter und Fristen aus dem Register); diese Regeln stehen ausserhalb der
   Tailwind-Layer und setzen Schrift, Farbe und Rhythmus der Website über die alten Klassen. Wortlaut unverändert. */
.seite-teil { display: contents; }
.recht { padding-block: clamp(56px, 8vw, 110px); }
.recht-innen { max-width: 760px; }
.recht h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 58px); line-height: 1.06; letter-spacing: -.015em; color: var(--text); }
/* Die Website setzt p { margin: 0 0 1em } ausserhalb der Layer — hier gilt der Rhythmus der Rechtsseiten. */
.recht p { margin: 0; }
.recht * + p { margin-top: 12px; }
.recht .space-y-1 > p + p { margin-top: 2px; }
.recht h1 + p.text-sm { margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.recht h1 + p:not(.text-sm) { margin-top: 18px; font-size: clamp(18px, 1.5vw, 20px); color: var(--text-2); max-width: 56ch; }
.recht h1 ~ div.mt-12 { margin-top: clamp(36px, 5vw, 56px); }
.recht h2 { margin: 0; scroll-margin-top: 110px; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.01em; color: var(--text); }
.recht [id] { scroll-margin-top: 110px; }
.recht :where(p, li, dd) { font-size: 17px; line-height: 1.65; color: var(--text-2); }
.recht h2 + :where(p, ul, ol, div) { margin-top: 12px; }
.recht strong { font-weight: 600; color: var(--text); }
.recht :where(p, li, dd, td) a { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.recht :where(p, li, dd, td) a:hover { text-decoration-thickness: 2px; }
.recht ul { margin: 0; padding: 0; list-style: none; }
.recht ul > li { position: relative; padding-left: 20px; }
.recht ul > li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.recht ol:not(.recht-inhalt ol) { margin: 0; padding-left: 22px; }
.recht ol:not(.recht-inhalt ol) > li::marker { font-family: var(--mono); font-size: 14px; color: var(--gold-text); }
.recht table { font-size: 15px; }
.recht th { padding-bottom: 10px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--kante); }
.recht td { color: var(--text-2); line-height: 1.5; }
.recht td:first-child { color: var(--text); font-weight: 600; }
.recht tbody tr { border-color: var(--kante-leise); }
#rollen > div { padding: 18px 20px; border: 1px solid var(--kante-leise); border-radius: var(--r); background: var(--karte); color: var(--text-2); }

/* Datenschutz: Inhaltsliste links (ab Laptop), am Handy oben als kurze Liste */
.recht-mit-inhalt { max-width: var(--breite); display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.recht-inhalt { order: 2; padding: 16px 18px; border: 1px solid var(--kante-leise); border-radius: var(--r); background: var(--karte); }
.recht-text { order: 1; min-width: 0; }
.recht-inhalt p { margin: 0 0 10px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.recht-inhalt ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: abschnitt; }
.recht-inhalt li { counter-increment: abschnitt; }
.recht-inhalt a { display: flex; gap: 10px; padding: 5px 0; font-size: 15px; line-height: 1.35; color: var(--text-2); text-decoration: none; }
.recht-inhalt a::before { content: counter(abschnitt); min-width: 16px; font-family: var(--mono); font-size: 13px; color: var(--zart); }
.recht-inhalt a:hover { color: var(--text); }
@media (max-width: 1039px) {
  .recht-text h1 + p.text-sm + div.mt-12 { margin-top: 28px; }
  .recht-mit-inhalt { gap: 0; }
  .recht-inhalt { order: 1; margin: 0 0 8px; display: none; }
}
@media (min-width: 1040px) {
  .recht-mit-inhalt { grid-template-columns: 230px minmax(0, 720px); gap: 72px; justify-content: center; }
  .recht-inhalt { order: 0; position: sticky; top: 104px; align-self: start; }
}

/* Impressum: Angaben als ruhige Karten, Haftung und Urheberrecht leiser darunter */
.impressum-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: clamp(32px, 4vw, 48px) 0 0; }
.impressum-karte { padding: 22px 24px; border: 1px solid var(--kante-leise); border-radius: var(--r); background: var(--karte); }
.impressum-karte dt { margin: 0 0 10px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.impressum-karte dd { margin: 0; }
.impressum-firma dd strong { display: inline-block; margin-bottom: 4px; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.impressum-zahl { font-family: var(--mono); font-size: 16px; letter-spacing: .02em; color: var(--text); }
@media (min-width: 760px) {
  .impressum-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impressum-firma { grid-row: span 3; }
}
.recht-leise { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--kante-leise); display: grid; gap: 10px; }
.recht-leise h2 { font-size: 20px; }
.recht-leise h2 + p { margin-top: 0; }
.recht-leise p { margin: 0 0 18px; font-size: 15px; color: var(--text-3); max-width: 70ch; }

/* Zugang löschen: Formular im Stil der Website */
.recht-feld { display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--kante); border-radius: var(--r-klein); background: #fff; font: inherit; font-size: 17px; color: var(--text); }
.recht-feld:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.recht-knopf { min-height: 46px; padding: 11px 22px; font-size: 15px; }
.recht-knopf:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.recht-rot { background: #9b2c1f; border-color: #9b2c1f; }
.recht-neben { padding: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 404 */
.recht-404 .recht-innen { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.recht-kicker { margin: 0 0 16px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.recht-404 h1 + p { margin-top: 16px; }
.recht-404 .knopf { margin-top: 28px; }
/* f149 C + f156 D (Gunnar 24.10.): der Kopf-Knopf («Anfrage senden») steht auch am Handy oben neben dem Telefon — auf sehr schmalen Geräten etwas kleiner. */
.kopf-knopf { white-space: nowrap; }
@media (max-width: 360px) { .kopf-knopf { padding: 7px 12px; font-size: 13px; margin-right: 6px; } .kopf .wortmarke { font-size: 18px; } .anruf-knopf { width: 40px; height: 40px; } }
/* LE-309 (Gunnar 24.10. 15:28, Handy) — Vorschau:
   1 · Navigation oben: die Reiterleiste unten ist weg («sieht schlimm aus», Wörter liefen ineinander); das Menü sitzt neben
       dem Kopf-Knopf und dem Telefon. Unter 350 px bleibt der Platz für Knopf + Menü, das Telefon steht dann im Fuss.
   2 · Einstieg: Titel kleiner, damit Titel und Rad mit Nina zusammen auf dem ersten Bildschirm stehen (Wortlaut gleich).
   3 · Gerätebühne: Handy kleiner, und senkrechtes Wischen über der Bühne scrollt die Seite (der Verlauf richtet sich ohnehin
       selbst aus); die Chips bleiben antippbar. */
@media (max-width: 979px) {
  .kopf { gap: 0; }
  .anruf-knopf, .menue-knopf { width: 40px; height: 40px; }
  .anruf-knopf { margin-right: 6px; }
  .menue-knopf i { left: 11px; right: 11px; }
  .menue-knopf i:first-of-type { top: 15px; } .menue-knopf i:last-of-type { top: 23px; }
}
@media (max-width: 349px) { .anruf-knopf { display: none !important; } }
@media (max-width: 760px) {
  .start { padding-top: 10px; }
  .held-rad { gap: 10px; }
  .held-rad .held-zeile { margin-bottom: 10px; font-size: 11px; }
  .held-rad .start-titel { margin-bottom: 0; font-size: 27px; line-height: 1.12; }
  .rad { max-width: 330px; margin-bottom: 70px; }
  .gb-platz { height: 465px; }
  .gb-handy { width: 220px; height: 389px; padding: 4px; border-radius: 29px; }
  .gb-handy-schirm { border-radius: 25px; }
  .gb-handy .gb-chat { font-size: 9.5px; }
  .gb-buehne, .gb-buehne * { touch-action: pan-y; }
  .gb-verlauf { overflow-y: hidden; overscroll-behavior: auto; }
}