/* biteno.ai – Startseite. Farben aus der Biteno-CI, Orange als Text nur in --orange-text (Kontrast). */
:root{
  --orange:#E66728; --orange-hell:#FC8A1C; --orange-text:#B04E14;
  --nacht:#1A2537; --nacht-2:#2A3648; --nacht-3:#343F51;
  --text:#1E2633; --text-2:#4A5466; --linie:#E6E1DA;
  --grund:#FAF7F3; --grund-2:#F3EEE7; --weiss:#FFFFFF;
  --gruen:#2F9E6B; --gelb:#D9A21B;
  --rund:14px; --schatten:0 1px 2px rgba(26,37,55,.06),0 12px 32px rgba(26,37,55,.08);
  --font:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--grund);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange-text)}
h1,h2,h3{line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5.2vw,4.1rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:700;max-width:22ch}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap-schmal{max-width:820px}
.dach{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text);margin-bottom:.8em}
.dach-hell{color:var(--orange-hell)}
.lead{font-size:1.18rem;color:var(--text-2);max-width:56ch}
.lead-hell{color:#C9D2E0}
.klein{font-size:.92rem;color:var(--text-2)}

/* Entwurfsetikett (nur Vorschau) */
.entwurf{position:fixed;bottom:14px;left:14px;z-index:99;background:#B91C1C;color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.08em;padding:6px 10px;border-radius:6px}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--orange);color:#fff;text-decoration:none;font-weight:650;padding:.9em 1.4em;border-radius:10px;border:0;cursor:pointer;font:inherit;font-weight:650;transition:transform .15s,box-shadow .15s,background .15s;box-shadow:0 6px 18px rgba(230,103,40,.28)}
.knopf:hover{background:#D4581C;transform:translateY(-1px)}
.knopf:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--orange-hell);outline-offset:3px}
.knopf-zweit{background:transparent;color:var(--nacht);box-shadow:inset 0 0 0 1.5px #C9C1B6}
.knopf-zweit:hover{background:var(--weiss);box-shadow:inset 0 0 0 1.5px var(--nacht)}
.knopf-klein{padding:.55em 1em;font-size:.95rem;box-shadow:none}
.breit{grid-column:1/-1;width:100%}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(250,247,243,.86);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.kopf.gescrollt{border-bottom-color:var(--linie)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none}
.marke img{width:112px;height:auto}
.marke-ki{font-weight:800;font-size:.8rem;color:#fff;background:var(--nacht);border-radius:6px;padding:3px 7px;letter-spacing:.06em}
.menue{display:flex;align-items:center;gap:28px}
.menue a:not(.knopf){color:var(--text);text-decoration:none;font-weight:550;font-size:.97rem}
.menue a:not(.knopf):hover{color:var(--orange-text)}
.menue-auf{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
.menue-auf span{display:block;height:2px;background:var(--nacht);margin:5px 0;border-radius:2px;transition:transform .2s,opacity .2s}

/* Held */
.held{padding:64px 0 88px;position:relative;overflow:hidden}
.held::before{content:"";position:absolute;right:-180px;top:-140px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(252,138,28,.16),rgba(252,138,28,0) 65%);pointer-events:none}
.held-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.unterstrich{background:linear-gradient(transparent 68%,rgba(252,138,28,.38) 68%,rgba(252,138,28,.38) 92%,transparent 92%)}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 26px}
.vertrauen{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--text-2);font-size:.93rem}
.vertrauen li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:1px}

/* Leitstand */
.leitstand{background:var(--nacht);color:#E8EDF4;border-radius:20px;padding:20px;box-shadow:0 30px 60px rgba(26,37,55,.28);position:relative;isolation:isolate}
.leitstand::after{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(140deg,rgba(252,138,28,.6),rgba(255,255,255,.04) 40%,rgba(255,255,255,.04) 70%,rgba(252,138,28,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.leitstand-kopf{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:#AEB9CA;margin-bottom:14px}
.live{display:flex;align-items:center;gap:8px;font-weight:650;color:#fff}
.live i{width:8px;height:8px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 0 rgba(47,158,107,.6);animation:puls 2s infinite}
.leitstand-zahl b{color:#fff;font-variant-numeric:tabular-nums}
.aufgaben{list-style:none;margin:0;padding:0;display:grid;gap:10px;min-height:318px}
.aufgabe{display:grid;grid-template-columns:44px 1fr;gap:12px;background:var(--nacht-2);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;animation:rein .55s cubic-bezier(.2,.8,.2,1) both}
.aufgabe img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.aufgabe-kopf{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;color:#AEB9CA}
.aufgabe-kopf b{color:#fff;font-weight:650}
.aufgabe p{margin:2px 0 8px;font-size:.92rem;line-height:1.4;color:#E8EDF4}
.aufgabe-fuss{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{font-size:.72rem;font-weight:650;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.07);color:#C9D2E0;white-space:nowrap}
.chip-lokal::before{content:"● ";color:var(--orange-hell)}
.chip-extern::before{content:"● ";color:#7FB2F0}
.status{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.status.arbeitet{background:rgba(127,178,240,.14);color:#A9CBF5}
.status.arbeitet::before{content:"";display:inline-block;width:8px;height:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:5px;vertical-align:-1px;animation:dreh .8s linear infinite}
.status.wartet{background:rgba(217,162,27,.16);color:#F0C75E}
.status.fertig{background:rgba(47,158,107,.18);color:#7DDBA9}
.aufgabe.raus{animation:raus .4s ease both}
.leitstand-fuss{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);font-size:.88rem;color:#C9D2E0}
.schloss{width:22px;height:22px;border-radius:6px;background:rgba(252,138,28,.16);position:relative;flex:none}
.schloss::before{content:"";position:absolute;left:7px;top:4px;width:8px;height:7px;border:2px solid var(--orange-hell);border-bottom:0;border-radius:5px 5px 0 0}
.schloss::after{content:"";position:absolute;left:5px;top:10px;width:12px;height:8px;background:var(--orange-hell);border-radius:2px}

/* Abschnitte */
.abschnitt{padding:96px 0}
.tueren-abschnitt{background:var(--weiss);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.tueren{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.tuer{background:var(--grund);border:1px solid var(--linie);border-radius:var(--rund);padding:28px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.tuer:hover{transform:translateY(-4px);box-shadow:var(--schatten);border-color:#D9CFC2}
.tuer-bild{height:84px;margin:-6px 0 14px}
.tuer-bild svg{height:100%;width:auto}
.tuer-zitat{font-size:1.35rem;font-weight:700;line-height:1.25;color:var(--nacht);margin-bottom:.6em}
.tuer p{color:var(--text-2)}
.haken{list-style:none;padding:0;margin:4px 0 22px;display:grid;gap:8px;font-size:.95rem}
.haken li{padding-left:28px;position:relative}
.haken li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border-radius:50%;background:rgba(230,103,40,.12)}
.haken li::after{content:"";position:absolute;left:6px;top:.5em;width:5px;height:9px;border:solid var(--orange-text);border-width:0 2px 2px 0;transform:rotate(45deg)}
.mehr{margin-top:auto;font-weight:650;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.mehr::after{content:"→";transition:transform .2s}
.mehr:hover::after{transform:translateX(4px)}
/* Tür-Grafiken */
.t-kreis{fill:none;stroke:#D9CFC2;stroke-width:2;stroke-dasharray:4 5}
.t-nadel{fill:var(--orange);transform-origin:60px 40px;animation:pendel 5s ease-in-out infinite}
.t-punkt{fill:var(--nacht)}
.t-schild{fill:rgba(26,37,55,.06);stroke:var(--nacht);stroke-width:2.5;stroke-linejoin:round}
.t-haken{fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:zeichne 4s ease-in-out infinite}
.t-karte{fill:var(--weiss);stroke:var(--nacht);stroke-width:2}
.t-k2{fill:var(--orange);stroke:var(--orange);animation:hupf 3.6s ease-in-out infinite}
.t-k1{animation:hupf 3.6s ease-in-out infinite .3s}.t-k3{animation:hupf 3.6s ease-in-out infinite .6s}
.t-pfeil{stroke:#D9CFC2;stroke-width:2;stroke-dasharray:3 5;animation:laufen 1.2s linear infinite}

/* Weg */
.weg{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
.weg::before{content:"";position:absolute;top:24px;left:24px;right:24px;height:2px;background:var(--linie)}
.weg::after{content:"";position:absolute;top:24px;left:24px;height:2px;width:calc((100% - 48px) * var(--fortschritt,0));background:var(--orange);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.weg li{position:relative;z-index:1}
.weg-nr{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--weiss);border:2px solid var(--linie);font-weight:800;color:var(--nacht);margin-bottom:18px;transition:background .4s,border-color .4s,color .4s}
.weg li.an .weg-nr{background:var(--orange);border-color:var(--orange);color:#fff}
.weg-meta{font-size:.85rem;font-weight:650;color:var(--orange-text);margin:-.3em 0 .6em}
.weg p:not(.weg-meta){color:var(--text-2)}
.weg-hinweis{margin-top:40px;padding:18px 22px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);color:var(--text-2)}

/* Bühne Team */
.buehne{background:var(--nacht);color:#fff;padding:104px 0;position:relative;overflow:hidden}
.buehne::before{content:"";position:absolute;left:-200px;bottom:-260px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(230,103,40,.22),rgba(230,103,40,0) 65%)}
.buehne .wrap{position:relative}
.team{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:44px}
.person{margin:0;background:var(--nacht-2);border:1px solid rgba(255,255,255,.07);border-radius:var(--rund);padding:14px;transition:transform .25s,border-color .25s}
.person:hover{transform:translateY(-4px);border-color:rgba(252,138,28,.45)}
.person img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-bottom:12px}
.person figcaption{display:grid;gap:2px;font-size:.88rem}
.person b{font-size:.98rem}
.person span{color:var(--orange-hell);font-weight:650;font-size:.8rem}
.person em{font-style:normal;color:#AEB9CA;line-height:1.4;margin-top:6px}
.kennzeichnung{margin-top:26px;font-size:.82rem;color:#8E9AAD}

/* Daten */
.daten-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.punkte{margin:28px 0 0;display:grid;gap:4px}
.punkte dt{font-weight:700;color:var(--nacht);margin-top:14px;display:flex;align-items:center;gap:10px}
.punkte dt::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--orange);flex:none}
.punkte dd{margin:0 0 0 20px;color:var(--text-2)}
.datenweg{background:var(--weiss);border:1px solid var(--linie);border-radius:20px;padding:18px;box-shadow:var(--schatten)}
.datenweg svg{width:100%;height:auto;display:block}
.dw-linie{fill:none;stroke:#CFC6BA;stroke-width:3}
.dw-gestrichelt{stroke-dasharray:6 7}
.dw-hell{fill:var(--grund);stroke:var(--linie);stroke-width:1.5}
.dw-haus{fill:var(--nacht)}.dw-tuer{fill:var(--orange)}
.dw-text{font:600 15px var(--font);fill:var(--text)}
.dw-text-hell{font:700 15px var(--font);fill:#fff}
.dw-klein{font-size:13px;font-weight:650}
.dw-legende{list-style:none;padding:0;margin:14px 4px 2px;display:grid;gap:6px;font-size:.9rem;color:var(--text-2)}
.dw-legende i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:10px;vertical-align:-1px}
.dw-l-vertraulich{background:var(--orange)}.dw-l-frei{background:#4F8FDB}
.dw-rack{fill:#3A475C}
.dw-led{fill:var(--gruen);animation:blink 1.6s infinite}.dw-led2{animation-delay:.5s}.dw-led3{animation-delay:1s}
.dw-lokal{fill:rgba(230,103,40,.22);stroke:var(--orange);stroke-width:1.5}
.dw-tor{fill:var(--nacht);transition:fill .3s}
.dw-tor.offen{fill:var(--gruen)}
.dw-wolke{fill:#DCE7F6}
.dw-p-vertraulich{fill:var(--orange)}
.dw-p-frei{fill:#4F8FDB}

/* Über uns */
.ueber{background:var(--grund-2)}
.ueber-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.ueber-bild{margin:0;border-radius:20px;overflow:hidden;box-shadow:var(--schatten);background:#fff}
.ueber-bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ueber-text p{color:var(--text-2)}
blockquote{margin:24px 0;padding:4px 0 4px 22px;border-left:4px solid var(--orange);font-size:1.2rem;font-weight:600;color:var(--nacht);line-height:1.45}
cite{display:block;margin-top:8px;font-style:normal;font-size:.9rem;font-weight:500;color:var(--text-2)}
.zahlen{list-style:none;padding:0;margin:28px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.zahlen li{background:var(--weiss);border:1px solid var(--linie);border-radius:12px;padding:14px 12px}
.zahlen b{display:block;font-size:1.6rem;color:var(--nacht);line-height:1.1}
.zahlen span{font-size:.82rem;color:var(--text-2)}

/* Fragen */
.fragen{margin-top:32px;display:grid;gap:12px}
.fragen details{background:var(--weiss);border:1px solid var(--linie);border-radius:12px;padding:0 22px}
.fragen summary{cursor:pointer;list-style:none;font-weight:650;padding:18px 32px 18px 0;position:relative}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:var(--orange-text);transition:transform .2s}
.fragen details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.fragen details p{color:var(--text-2);padding-bottom:6px}

/* Kontakt */
.kontakt{background:var(--weiss);border-top:1px solid var(--linie)}
.kontakt-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.kontakt-text p{color:var(--text-2)}
.direkt{display:flex;flex-direction:column;gap:6px;margin-top:20px}
.direkt a{font-size:1.25rem;font-weight:700;color:var(--nacht);text-decoration:none}
.direkt a:hover{color:var(--orange-text)}
.formular{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--grund);border:1px solid var(--linie);border-radius:20px;padding:28px;box-shadow:var(--schatten)}
.formular label{display:grid;gap:6px;font-weight:600;font-size:.92rem}
.formular small{font-weight:400;color:var(--text-2)}
.formular input,.formular textarea{font:inherit;font-weight:400;padding:12px 14px;border:1.5px solid #D9D1C6;border-radius:10px;background:#fff;color:var(--text);width:100%}
.formular input:focus,.formular textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(230,103,40,.16)}
.formular .ungueltig{border-color:#C0392B}
.feld-honig{position:absolute;left:-9999px}
.thema-zeile{grid-column:1/-1;margin:0;font-size:.88rem;color:var(--orange-text);font-weight:600}
.datenschutz{grid-column:1/-1;margin:0;font-size:.82rem;color:var(--text-2)}
.meldung{grid-column:1/-1;margin:0;font-weight:600}
.meldung.fehler{color:#C0392B}.meldung.ok{color:var(--gruen)}

/* Fuß */
.fuss{background:var(--nacht);color:#AEB9CA;padding:40px 0;font-size:.9rem}
.fuss-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fuss img{width:104px}
.fuss p{margin:0}
.fuss nav{display:flex;gap:20px}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{color:var(--orange-hell)}

/* ===== Unterseiten ===== */
.menue a[aria-current="page"]{color:var(--orange-text)}
.seite-kopf{padding:56px 0 72px;position:relative;overflow:hidden}
.seite-kopf::before{content:"";position:absolute;right:-200px;top:-180px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(252,138,28,.14),rgba(252,138,28,0) 65%);pointer-events:none}
.seite-kopf-in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative}
.seite-kopf h1{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.pfad{font-size:.85rem;color:var(--text-2);margin-bottom:18px}
.pfad a{color:var(--text-2);text-decoration:none}.pfad a:hover{color:var(--orange-text)}
.kopf-karte{background:var(--nacht);color:#E8EDF4;border-radius:20px;padding:26px;box-shadow:0 30px 60px rgba(26,37,55,.24)}
.kopf-karte h3{color:#fff;font-size:1.05rem;margin-bottom:14px}
.kopf-karte ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.kopf-karte li{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start;font-size:.95rem;line-height:1.45}
.kopf-karte li b{display:grid;place-items:center;min-width:34px;justify-self:start;padding:0 8px;height:34px;white-space:nowrap;border-radius:10px;background:rgba(252,138,28,.16);color:var(--orange-hell);font-size:.9rem}
.kopf-karte small{display:block;color:#AEB9CA;font-size:.82rem}
.abschnitt-weiss{background:var(--weiss);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.abschnitt-sand{background:var(--grund-2)}
.einleitung{max-width:62ch;color:var(--text-2);font-size:1.08rem}
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.karten-2{grid-template-columns:repeat(2,1fr)}
.karten-4{grid-template-columns:repeat(4,1fr)}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);padding:24px}
.abschnitt-weiss .karte{background:var(--grund)}
.karte h3{font-size:1.1rem;color:var(--nacht)}
.karte p{color:var(--text-2);margin:0}
.karte p+p{margin-top:.7em}
.karte .marke-klein{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-text);margin-bottom:8px}
.karte-symbol{width:44px;height:44px;border-radius:12px;background:rgba(230,103,40,.12);display:grid;place-items:center;margin-bottom:14px;color:var(--orange-text);font-weight:800}
.buehne .karte{background:var(--nacht-2);border-color:rgba(255,255,255,.07)}
.buehne .karte h3{color:#fff}.buehne .karte p{color:#AEB9CA}
.buehne .einleitung{color:#C9D2E0}
.stufen{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:22px}
.stufe{display:grid;grid-template-columns:64px 1fr 300px;gap:28px;background:var(--weiss);border:1px solid var(--linie);border-radius:18px;padding:28px}
.stufe-nr{width:56px;height:56px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.3rem}
.stufe h3{font-size:1.35rem;margin-bottom:.2em}
.stufe .weg-meta{margin:0 0 .8em}
.stufe p{color:var(--text-2)}
.stufe ul{margin:.4em 0 0;padding-left:1.1em;color:var(--text-2)}
.stufe ul li{margin:.25em 0}
.ergebnis{background:var(--grund);border-radius:12px;padding:18px;align-self:start;border-left:4px solid var(--orange)}
.ergebnis b{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text);margin-bottom:6px}
.ergebnis p{margin:0;color:var(--text);font-weight:550}
.band{background:var(--nacht);color:#fff;border-radius:20px;padding:40px 44px;margin-top:48px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.band p{margin:0;font-size:1.3rem;font-weight:650;line-height:1.4;max-width:46ch}
.band .klein-hell{display:block;font-size:.95rem;font-weight:400;color:#AEB9CA;margin-top:8px}
.hinweis{background:var(--weiss);border:1px solid var(--linie);border-left:4px solid var(--orange);border-radius:12px;padding:20px 24px;margin-top:32px;color:var(--text-2)}
.hinweis b{color:var(--nacht)}
.vergleich-wrap{overflow-x:auto;margin-top:32px;border-radius:16px;border:1px solid var(--linie);background:var(--weiss)}
.vergleich{width:100%;border-collapse:collapse;min-width:720px;font-size:.95rem}
.vergleich th,.vergleich td{padding:14px 16px;border-bottom:1px solid #EEE8E0;text-align:left;vertical-align:top}
.vergleich thead th{background:var(--nacht);color:#fff;font-weight:650}
.vergleich thead th.wir{background:var(--orange)}
.vergleich tbody th{font-weight:650;color:var(--nacht);width:22%}
.vergleich td.wir{background:rgba(230,103,40,.06);font-weight:550}
.vergleich tr:last-child td,.vergleich tr:last-child th{border-bottom:0}
.preise{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px}
.preis{background:var(--weiss);border:1px solid var(--linie);border-radius:18px;padding:28px;position:relative}
.preis.empfohlen{border:2px solid var(--orange)}
.preis .marke-klein{position:absolute;top:-12px;right:22px;background:var(--orange);color:#fff;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.06em}
.preis h3{font-size:1.25rem;margin-bottom:.1em}
.preis-zahl{font-size:2.4rem;font-weight:800;color:var(--nacht);line-height:1.1;margin:12px 0 2px}
.preis-zahl small{font-size:1rem;font-weight:500;color:var(--text-2)}
.preis-zusatz{color:var(--text-2);font-size:.92rem;margin-bottom:16px}
.preis .haken{margin-bottom:0}
.rechnung{margin-top:24px;background:var(--weiss);border:1px solid var(--linie);border-radius:16px;padding:22px 26px;color:var(--text-2)}
.rechnung b{color:var(--nacht)}
.zeitleiste{list-style:none;margin:36px 0 0;padding:0;position:relative;max-width:760px}
.zeitleiste::before{content:"";position:absolute;left:66px;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.12)}
.zeile-zeit{display:grid;grid-template-columns:56px 22px 1fr;align-items:start;padding:10px 0}
.zeile-zeit time{font-weight:700;color:var(--orange-hell);font-variant-numeric:tabular-nums;padding-top:1px}
.zeile-zeit i{width:12px;height:12px;border-radius:50%;background:var(--orange);margin:6px 0 0 5px;box-shadow:0 0 0 4px rgba(230,103,40,.2);position:relative;z-index:1}
.zeile-zeit div{padding-left:18px}
.zeile-zeit b{display:block;color:#fff}
.zeile-zeit span{color:#AEB9CA;font-size:.95rem}
.zeile-zeit.mensch i{background:var(--gruen);box-shadow:0 0 0 4px rgba(47,158,107,.22)}
.zeile-zeit.mensch b::after{content:"Mensch";margin-left:10px;font-size:.7rem;font-weight:700;letter-spacing:.06em;background:rgba(47,158,107,.2);color:#7DDBA9;padding:2px 8px;border-radius:999px;vertical-align:2px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0;list-style:none}
.chips li{background:var(--weiss);border:1px solid var(--linie);border-radius:999px;padding:8px 16px;font-weight:600;font-size:.92rem;color:var(--nacht)}
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.weiter{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px}
.weiter a{display:block;text-decoration:none;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);padding:22px 48px 22px 24px;color:var(--nacht);transition:transform .2s,box-shadow .2s;position:relative}
.weiter a:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.weiter b{display:block;font-size:1.1rem}
.weiter span{color:var(--text-2);font-size:.95rem}
.weiter a::after{content:"→";position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--orange-text);font-size:1.3rem}
/* Rechtstexte */
.rechtstext{padding:56px 0 96px}
.rechtstext h1{font-size:clamp(2rem,4vw,2.8rem)}
.rechtstext h2{font-size:1.35rem;max-width:none;margin-top:2em}
.rechtstext h3{font-size:1.05rem;margin-top:1.4em}
.rechtstext p,.rechtstext li{color:var(--text-2)}
.rechtstext address{font-style:normal;color:var(--text);line-height:1.7}
.rechtstext .stand{margin-top:3em;font-size:.9rem}
@media (max-width:1080px){
  .seite-kopf-in{grid-template-columns:1fr;gap:36px}
  .stufe{grid-template-columns:56px 1fr}
  .ergebnis{grid-column:2}
  .karten-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .karten,.karten-2,.karten-4,.preise,.zwei-spalten,.weiter{grid-template-columns:1fr}
  .stufe{grid-template-columns:1fr;padding:22px;gap:14px}
  .ergebnis{grid-column:1}
  .band{grid-template-columns:1fr;padding:28px}
  .band p{font-size:1.12rem}
  .seite-kopf{padding:32px 0 56px}
}

/* Einblenden beim Scrollen */
.zeigen{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.zeigen.da{opacity:1;transform:none}

@keyframes puls{0%{box-shadow:0 0 0 0 rgba(47,158,107,.6)}70%{box-shadow:0 0 0 9px rgba(47,158,107,0)}100%{box-shadow:0 0 0 0 rgba(47,158,107,0)}}
@keyframes rein{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes raus{to{opacity:0;transform:translateY(10px)}}
@keyframes dreh{to{transform:rotate(360deg)}}
@keyframes pendel{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(22deg)}}
@keyframes zeichne{0%{stroke-dashoffset:40}40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
@keyframes hupf{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes laufen{to{stroke-dashoffset:-16}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* Ruhiger Modus: Systemeinstellung oder ?static */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.zeigen{opacity:1;transform:none}}
.ruhig *,.ruhig *::before,.ruhig *::after{animation:none!important;transition:none!important}
.ruhig .zeigen{opacity:1;transform:none}

/* Tablet */
@media (max-width:1080px){
  .team{grid-template-columns:repeat(3,1fr)}
  .held-in{grid-template-columns:1fr;gap:44px}
  .leitstand{max-width:620px}
}
/* Handy */
@media (max-width:860px){
  body{font-size:16px}
  .abschnitt{padding:72px 0}.buehne{padding:80px 0}
  .menue{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--grund);border-bottom:1px solid var(--linie);padding:8px 24px 20px;transform:translateY(-120%);transition:transform .25s;box-shadow:var(--schatten)}
  .menue a:not(.knopf){padding:14px 0;border-bottom:1px solid var(--linie)}
  .menue .knopf{margin-top:14px}
  .menue.offen{transform:none}
  .menue-auf{display:block}
  .menue-auf[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menue-auf[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menue-auf[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .held{padding:36px 0 64px}
  .knoepfe .knopf{width:100%}
  .tueren,.weg,.daten-in,.ueber-in,.kontakt-in{grid-template-columns:1fr}
  .weg::before,.weg::after{display:none}
  .team{grid-template-columns:repeat(2,1fr);gap:12px}
  .zahlen{grid-template-columns:repeat(2,1fr)}
  .formular{grid-template-columns:1fr;padding:20px}
  .aufgaben{min-height:300px}
}
@media (max-width:420px){
  .wrap{padding:0 16px}
  .aufgabe{grid-template-columns:36px 1fr;padding:10px}
  .aufgabe img{width:36px;height:36px}
}