/* myrocketpage.de — Grundgestaltung der klassischen Seite.
   Mission-Control-These (CD_myrocketpage.md): dunkler Kontrollraum, präzise
   Technik, ein Produkt, das abhebt. Helligkeit entsteht aus Text und Licht,
   nicht aus hellen Boxen. Geist trägt die Köpfe, Geist Mono die Technik-
   Akzente, Inter den Fließtext. Farbregel: Indigo = Website/KI tut,
   Amber = Mensch entscheidet. */

@font-face{font-family:"Geist";src:url("../assets/fonts/geist-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/geist-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/geist-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../assets/fonts/geistmono-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-600.woff2") format("woff2");font-weight:600;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--e0);color:var(--tx-body);
  font:400 var(--text-body)/1.65 var(--font-text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0 0 .6em;font-family:var(--font-kopf);font-weight:700;line-height:1.06;letter-spacing:-.025em;color:var(--tx-head)}
h1{font-size:var(--text-hero)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3);line-height:1.25}
p{margin:0 0 1.1em}
a{color:inherit}
strong,b{color:var(--tx-head);font-weight:600}
::selection{background:rgba(124,140,248,.32);color:var(--tx-peak)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
.springlink{position:absolute;left:-9999px;top:0;z-index:300;background:var(--amber);color:#0A0A0F;padding:.7rem 1.1rem;font-weight:600;border-radius:0 0 var(--radius-sm) 0}
.springlink:focus{left:0}

/* ---- Steigflug: das Hintergrund-Motiv ---- */
.steigflug{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ---- Raster ---- */
.innen{width:min(100% - 2*var(--rand),var(--maxw));margin-inline:auto}
.innen-eng{width:min(100% - 2*var(--rand),var(--maxw-eng));margin-inline:auto}
.abschnitt{position:relative;z-index:1;padding-block:var(--raum-sektion)}
.abschnitt--linie{border-top:1px solid var(--hair)}
.abschnitt--flaeche{background:linear-gradient(180deg,rgba(17,17,24,.7),rgba(17,17,24,0))}
main{position:relative;z-index:1}

/* ---- Kopfzeile ---- */
.kopf{position:sticky;top:0;z-index:120;background:rgba(10,10,15,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.kopf__innen{width:min(100% - 2*var(--rand),var(--maxw));margin-inline:auto;display:flex;align-items:center;gap:1.4rem;min-height:var(--kopf-hoehe)}
.kopf__marke{display:flex;align-items:center;text-decoration:none;padding-block:.6rem}
.kopf__marke img{width:clamp(130px,13vw,166px);height:auto}
.kopf__nav{margin-left:auto;display:flex;gap:.15rem}
.kopf__nav a{text-decoration:none;color:var(--tx-body);padding:.55rem .8rem;border-radius:8px;font:500 .95rem/1 var(--font-kopf);transition:color var(--dauer) var(--ease),background var(--dauer) var(--ease)}
.kopf__nav a:hover,.kopf__nav a[aria-current="page"]{color:var(--tx-head);background:var(--e2)}
.kopf__burger{display:none;margin-left:auto;background:var(--e2);border:1px solid var(--hair2);border-radius:10px;width:46px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.kopf__burger span{display:block;width:20px;height:2px;background:var(--tx-head);transition:transform var(--dauer) var(--ease),opacity var(--dauer)}
.kopf__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.kopf__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.kopf__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Mobil: E-Mail-Symbol neben dem Burger, springt zum Kontaktformular (Ansage Michael 24.09.) */
.kopf__mail{display:none;margin-left:auto;margin-right:.5rem;width:46px;height:44px;align-items:center;justify-content:center;border:1px solid var(--hair2);border-radius:10px;background:var(--e2);color:var(--tx-head)}
.kopf__mail + .kopf__burger{margin-left:0}
@media (max-width:960px){.kopf__nav,.kopf__aktion{display:none}.kopf__burger{display:flex}.kopf__mail{display:flex}}
.mobilmenue{position:fixed;inset:var(--kopf-hoehe) 0 0;z-index:119;background:var(--e0);padding:var(--rand);overflow-y:auto}
.mobilmenue[hidden]{display:none}
.mobilmenue a{display:block;text-decoration:none;font:600 1.3rem/1 var(--font-kopf);padding:1rem 0;border-bottom:1px solid var(--hair);color:var(--tx-head)}

/* ---- Knöpfe ---- */
.knopf,.knopf-geist{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:600 .98rem/1 var(--font-kopf);letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  padding:.9rem 1.5rem;border-radius:999px;border:1px solid transparent;min-height:48px;
  transition:transform var(--dauer) var(--ease),box-shadow var(--dauer) var(--ease),background var(--dauer) var(--ease),border-color var(--dauer) var(--ease);
}
.knopf{background:var(--grad);color:#0A0A0F;border-color:rgba(10,10,15,.55);box-shadow:0 1px 0 0 rgba(255,255,255,.25) inset,0 6px 20px -6px rgba(10,10,15,.7)}
.knopf:hover{transform:translateY(-2px);box-shadow:0 1px 0 0 rgba(255,255,255,.25) inset,0 10px 26px -8px rgba(124,140,248,.55)}
.knopf-geist{background:transparent;color:var(--tx-head);border-color:var(--hair2)}
.knopf-geist:hover{border-color:var(--indigo);background:var(--e2)}

/* ---- Hero ---- */
.hero{position:relative;z-index:1;padding:clamp(4rem,12vh,8.5rem) 0 clamp(3rem,8vh,5.5rem)}
.hero__kicker{display:inline-flex;align-items:center;gap:.6rem;font:600 .74rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);margin-bottom:1.4rem}
.hero__kicker::before{content:"";width:22px;height:1px;background:var(--indigo);opacity:.7}
.hero h1{max-width:15ch;margin-bottom:.5em;letter-spacing:-.035em}
.hero h1 .duenn{display:block;font-weight:600;color:var(--tx-body)}
.hero h1 .licht{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero__lead{font-size:var(--text-lead);color:var(--tx-body);max-width:58ch;margin:0 0 1.8rem}
.hero__wege{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2.2rem}
.hero__beleg{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:0;padding:0;list-style:none;font:600 .78rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mut)}
.hero__beleg li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-right:.55rem;vertical-align:middle}

/* ---- Kopfzeile eines Abschnitts ---- */
.kopfzeile{max-width:760px;margin-bottom:clamp(1.8rem,4vw,3rem)}
.kopfzeile__kicker{display:inline-flex;align-items:center;gap:.6rem;font:600 .74rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);margin-bottom:1rem}
.kopfzeile__kicker::before{content:"";width:22px;height:1px;background:var(--indigo);opacity:.7}
.kopfzeile p{font-size:var(--text-lead);color:var(--tx-body);margin:0}

/* ---- Problem: vier Befunde ---- */
.befunde{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
@media (min-width:720px){.befunde{grid-template-columns:1fr 1fr}}
.befund{background:var(--e1);padding:clamp(1.2rem,3vw,1.8rem)}
.befund__nr{display:block;font:600 .78rem/1 var(--font-mono);color:var(--amber);letter-spacing:.1em;margin-bottom:.8rem}
.befund h3{margin-bottom:.4rem}
.befund p{margin:0;color:var(--tx-body)}
.schlusssatz{margin-top:1.8rem;font:600 clamp(1.15rem,2vw,1.4rem)/1.35 var(--font-kopf);color:var(--tx-head);max-width:36ch;letter-spacing:-.02em}

/* ---- Gegenüber: gestern / heute ---- */
.gegenueber{display:grid;gap:1rem}
@media (min-width:860px){.gegenueber{grid-template-columns:1fr 1fr;gap:1.4rem}}
.gegenueber__seite{background:var(--e1);border:1px solid var(--hair);border-radius:var(--radius);padding:clamp(1.2rem,3vw,1.8rem)}
.gegenueber__seite h3{font-size:1.1rem;margin-bottom:.9rem;color:var(--tx-mut)}
.gegenueber__seite--wir{border-color:var(--ki-linie);background:linear-gradient(180deg,var(--ki-weich),var(--e1))}
.gegenueber__seite--wir h3{color:var(--indigo)}
.gegenueber__liste{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.gegenueber__liste li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;color:var(--tx-body);font-size:1.02rem}
.gegenueber__liste li::before{content:"—";color:var(--tx-mut)}
.gegenueber__seite--wir .gegenueber__liste li::before{content:"→";color:var(--indigo)}
.gegenueber__seite--wir .gegenueber__liste li{color:var(--tx-head)}

/* ---- Vorgang: der Besuch Schritt für Schritt ---- */
.vorgang{list-style:none;margin:0;padding:0;counter-reset:none}
.vorgang__schritt{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--hair)}
.vorgang__schritt:last-child{border-bottom:0}
.vorgang__punkt{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 .82rem/1 var(--font-mono);background:var(--ki-weich);color:var(--indigo);border:1px solid var(--ki-linie)}
.vorgang__schritt[data-wer="besucher"] .vorgang__punkt,.vorgang__schritt[data-wer="sie"] .vorgang__punkt{background:var(--mensch-weich);color:var(--amber);border-color:var(--mensch-linie)}
.vorgang__wer{display:block;font:600 .72rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut);margin-bottom:.3rem}
.vorgang__schritt[data-wer="besucher"] .vorgang__wer,.vorgang__schritt[data-wer="sie"] .vorgang__wer{color:var(--amber)}
.vorgang__text p{margin:0;color:var(--tx-body)}
.vorgang__lage{font-size:var(--text-lead);color:var(--tx-head);margin-bottom:1.2rem;padding:1rem 1.2rem;background:var(--e1);border-radius:var(--radius-sm);border:1px solid var(--hair)}
.legende{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.2rem 0 0;font-size:.86rem;color:var(--tx-mut)}
.legende span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.45rem;vertical-align:-1px;background:var(--indigo)}
.legende span[data-mensch]::before{background:var(--amber)}
.zweispaltig{display:grid;gap:2rem}
@media (min-width:980px){.zweispaltig{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:start}}
.faehigkeiten{display:grid;gap:1rem}
.faehigkeit{background:var(--e1);border:1px solid var(--hair);border-radius:var(--radius);padding:1.1rem 1.2rem}
.faehigkeit h4{margin:0 0 .6rem;font:600 .72rem/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--tx-mut)}
.faehigkeit ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.faehigkeit li{font-size:.9rem;padding:.35rem .8rem;border-radius:999px;background:var(--ki-weich);border:1px solid var(--ki-linie);color:var(--tx-head)}
.faehigkeit--grenze li{background:var(--mensch-weich);border-color:var(--mensch-linie)}

/* ---- Karten (Reichweite) ---- */
.karten{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.karte{background:var(--e1);border:1px solid var(--hair);border-radius:var(--radius);padding:clamp(1.1rem,2.5vw,1.5rem);transition:border-color var(--dauer) var(--ease),transform var(--dauer) var(--ease)}
.karte:hover{border-color:var(--ki-linie);transform:translateY(-2px)}
.karte__kicker{display:block;font:600 .7rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin-bottom:.7rem}
.karte h3{font-size:1.15rem;margin-bottom:.5rem}
.karte p{margin:0;color:var(--tx-body);font-size:.97rem}

/* ---- Referenzen ---- */
.referenzen{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.referenz{background:var(--e1);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color var(--dauer) var(--ease),transform var(--dauer) var(--ease)}
.referenz:hover{border-color:var(--hair2);transform:translateY(-3px)}
.referenz__bild{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--e2);border-bottom:1px solid var(--hair)}
.referenz__text{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.referenz__art{font:600 .68rem/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--indigo)}
.referenz h3{font-size:1.12rem;margin:0}
.referenz p{margin:0;color:var(--tx-body);font-size:.95rem;flex:1}
.referenz__link{display:inline-block;margin-top:.4rem;padding:.8rem 0;min-height:44px;font:600 .88rem/1 var(--font-kopf);color:var(--indigo);text-decoration:none}
.referenz__link:hover{text-decoration:underline}

/* ---- Wer dahintersteht ---- */
.dahinter{display:grid;gap:2rem}
@media (min-width:980px){.dahinter{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:3rem;align-items:start}}
.dahinter__award{display:flex;align-items:center;gap:1.2rem;margin-top:1.6rem;padding:1rem 1.2rem;background:var(--e1);border:1px solid var(--hair);border-radius:var(--radius)}
.dahinter__award img{width:84px;height:84px;flex:0 0 84px}
.dahinter__award b{display:block;font-family:var(--font-kopf);color:var(--tx-head)}
.dahinter__award span{color:var(--tx-body);font-size:.93rem}
.crew{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.crew__karte{background:var(--e1);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.crew__karte img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(.9)}
.crew__text{padding:.9rem 1rem 1.1rem}
.crew__text b{display:block;font-family:var(--font-kopf);color:var(--tx-head)}
.crew__text span{display:block;color:var(--indigo);font-size:.84rem;font-weight:500;margin:.15rem 0 .4rem}
.crew__text p{margin:0;color:var(--tx-body);font-size:.9rem}
.crew--klein{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.crew--klein .crew__text{padding:.7rem .8rem .9rem}

/* ---- Investition: Haltung statt Preisschild ---- */
.haltung{display:grid;gap:1rem}
@media (min-width:860px){.haltung{grid-template-columns:repeat(3,1fr);gap:1.2rem}}
.haltung__karte{background:var(--e1);border:1px solid var(--hair);border-radius:var(--radius);padding:clamp(1.2rem,3vw,1.7rem)}
.haltung__karte b{display:block;font:700 1.55rem/1.1 var(--font-kopf);letter-spacing:-.025em;margin-bottom:.6rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.haltung__karte p{margin:0;color:var(--tx-body)}
.hinweisbox{margin-top:1.4rem;padding:1.1rem 1.3rem;border-left:2px solid var(--amber);background:var(--e1);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--tx-head)}
.hinweisbox p{margin:0}

/* ---- Ablauf ---- */
.ablauf{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ablauf li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.2rem 0;border-bottom:1px solid var(--hair)}
.ablauf li:last-child{border-bottom:0}
.ablauf__punkt{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:600 .85rem/1 var(--font-mono);background:var(--ki-weich);color:var(--indigo);border:1px solid var(--ki-linie)}
.ablauf li[data-wer="sie"] .ablauf__punkt{background:var(--mensch-weich);color:var(--amber);border-color:var(--mensch-linie)}
.ablauf__wer{display:block;font:600 .72rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut);margin-bottom:.3rem}
.ablauf li[data-wer="sie"] .ablauf__wer{color:var(--amber)}
.ablauf b{display:block;font-family:var(--font-kopf);font-size:1.15rem;color:var(--tx-head);margin-bottom:.3rem}
.ablauf li > div > span:last-child{color:var(--tx-body)}

/* ---- Fragen ---- */
.fragen{border-top:1px solid var(--hair)}
.frage{border-bottom:1px solid var(--hair)}
.frage summary{cursor:pointer;list-style:none;padding:1.1rem 2.4rem 1.1rem 0;font:600 1.06rem/1.4 var(--font-kopf);color:var(--tx-head);position:relative;min-height:48px}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);color:var(--indigo);font-size:1.4rem;font-weight:400;transition:transform var(--dauer) var(--ease)}
.frage[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.frage__text{padding:0 0 1.2rem;color:var(--tx-body);max-width:70ch}

/* ---- Wissen: Beitragskarten ---- */
.beitraege{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.beitrag{display:flex;flex-direction:column;background:var(--e1);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform var(--dauer) var(--ease),border-color var(--dauer) var(--ease)}
.beitrag:hover{transform:translateY(-3px);border-color:var(--hair2)}
.beitrag__bild{aspect-ratio:16/9;overflow:hidden;background:var(--e2)}
.beitrag__bild img{width:100%;height:100%;object-fit:cover}
.beitrag__text{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1;gap:.4rem}
.beitrag__meta{display:flex;gap:.7rem;align-items:center;font-size:.8rem;color:var(--tx-mut)}
.beitrag__kategorie{font:600 .68rem/1 var(--font-mono);letter-spacing:.06em;color:var(--indigo);border:1px solid var(--ki-linie);border-radius:6px;padding:3px 8px}
.beitrag h3{font-size:1.1rem;margin:0;line-height:1.3}
.beitrag p{margin:0;color:var(--tx-body);font-size:.92rem;flex:1}
.beitrag__mehr{font:600 .86rem/1 var(--font-kopf);color:var(--indigo);margin-top:.5rem}
.wissen__mehr{margin-top:1.6rem}

/* ---- Schluss und Formular ---- */
.schluss__gitter{display:grid;gap:2rem}
@media (min-width:980px){.schluss__gitter{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem;align-items:start}}
.schluss__punkte{list-style:none;margin:1.2rem 0;padding:0;display:grid;gap:.6rem}
.schluss__punkte li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;color:var(--tx-body)}
.schluss__punkte li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);margin-top:.6em}
.schluss__kontakt a{color:var(--indigo);text-decoration:none;font-weight:500}
.formular{display:grid;gap:.9rem;background:var(--e1);border:1px solid var(--hair2);border-radius:var(--radius);padding:clamp(1.2rem,3vw,1.7rem)}
.formular .reihe{display:grid;gap:.9rem}
@media (min-width:600px){.formular .reihe{grid-template-columns:1fr 1fr}}
.formular label{display:grid;gap:.35rem;font:500 .88rem/1.3 var(--font-kopf);color:var(--tx-head)}
.formular input:not([type="checkbox"]),.formular textarea{font:400 1rem/1.4 var(--font-text);color:var(--tx-head);background:var(--e0);border:1px solid var(--hair2);border-radius:var(--radius-sm);padding:.75rem .9rem;min-height:46px;width:100%}
.formular input:focus,.formular textarea:focus{border-color:var(--indigo);outline:none}
.formular textarea{resize:vertical}
.formular .haken{grid-template-columns:auto 1fr;align-items:start;gap:.7rem;font-weight:400;color:var(--tx-body);cursor:pointer;min-height:44px}
.formular .haken input{width:24px;height:24px;margin:.1rem 0 0;accent-color:var(--indigo)}
.formular .haken a{color:var(--indigo)}
.honig{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.formular__hinweis{margin:0;font-size:.86rem;color:var(--tx-mut)}
.formular__meldung{margin:0;padding:.75rem .9rem;border-radius:var(--radius-sm);font-size:.94rem}
.formular__meldung[hidden]{display:none}
.formular__meldung[data-art="fehler"]{background:rgba(224,82,77,.12);border:1px solid rgba(224,82,77,.4);color:#ffb3b0}
.formular__meldung[data-art="gut"]{background:var(--ki-weich);border:1px solid var(--ki-linie);color:var(--tx-head)}
.dank{padding:1.4rem;background:var(--ki-weich);border:1px solid var(--ki-linie);border-radius:var(--radius)}
.dank h3{margin:0 0 .4rem;color:var(--indigo)}
.dank p{margin:0;color:var(--tx-head)}

/* ---- Fuß ---- */
.fuss{position:relative;z-index:1;border-top:1px solid var(--hair);padding:clamp(2.5rem,6vw,4rem) 0 2rem;background:linear-gradient(180deg,rgba(17,17,24,0),rgba(17,17,24,.8))}
.fuss__gitter{display:grid;gap:2rem}
@media (min-width:760px){.fuss__gitter{grid-template-columns:1.6fr 1fr 1fr}}
.fuss__gitter h4{font:600 .72rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-mut);margin:0 0 .9rem}
.fuss__gitter ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fuss__gitter ul a{display:inline-flex;align-items:center;padding:.65rem 0;min-height:44px;min-width:44px;color:var(--tx-body);text-decoration:none}
.fuss__gitter a{color:var(--tx-body);text-decoration:none}
.fuss__marke a{display:inline-block;padding:.5rem 0}
.fuss__gitter a:hover{color:var(--tx-head)}
.fuss__gitter p{color:var(--tx-body);margin:0 0 .8rem;max-width:44ch}
.fuss__marke img{width:150px;margin-bottom:1rem}
.fuss__zeile{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--hair);font-size:.84rem;color:var(--tx-mut)}
.fuss__zeile p{margin:0}
/* Berührziel ≥ 44 px im Fließtext: Innenabstand, den negative Außenabstände wieder aufheben */
.fuss__link{display:inline-block;background:none;border:0;padding:.7rem .4rem;margin:-.7rem -.4rem;min-height:44px;min-width:44px;color:var(--indigo);font:inherit;line-height:1.2;cursor:pointer;text-decoration:underline}

/* ---- Rechtsseiten, Fließtext ---- */
.fliesstext{color:var(--tx-body)}
.fliesstext h2{font-size:1.5rem;margin:2.2rem 0 .7rem}
.fliesstext h3{font-size:1.15rem;margin:1.6rem 0 .5rem}
.fliesstext a{color:var(--indigo)}
.fliesstext ul{padding-left:1.2rem}

/* ---- Einblenden beim Scrollen ---- */
.aufsteiger{opacity:0;transform:translateY(16px);transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.aufsteiger.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.aufsteiger{opacity:1;transform:none;transition:none}}

/* ---- Personalakte (Bild der Event-Präsentation „Betriebsgeheimnis KI“: Glas, leicht gedreht, in den Raum gestellt) ---- */
.akte-buehne{perspective:1400px}
.akte--klickbar{cursor:pointer}
.akte{position:relative;background:rgba(17,17,24,.74);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);border:1px solid var(--hair2);border-radius:var(--radius);padding:1.4rem 1.5rem;box-shadow:0 2rem 5rem rgba(0,0,0,.5),0 0 0 1px rgba(124,140,248,.12)}
.akte-buehne .akte{transform:rotate(-2deg) rotateY(6deg);transform-origin:50% 60%;transition:transform .6s var(--ease)}
.akte-buehne .akte:hover{transform:rotate(-1deg) rotateY(2deg)}
.akte__stempel{position:absolute;top:1rem;right:1.1rem;max-width:45%;text-align:right;font:600 .62rem/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mut);border:1px solid var(--hair2);border-radius:999px;padding:.35rem .6rem}
.akte__kopf{display:flex;gap:1rem;align-items:center;padding-right:5.5rem}
.akte__kopf img,.akte__kuerzel{width:4.4rem;height:4.4rem;border-radius:.9rem;object-fit:cover;flex:none}
.akte__kuerzel{display:grid;place-items:center;font:700 1.4rem/1 var(--font-kopf);color:#0A0A0F;background:var(--grad)}
.akte__name{font:700 1.6rem/1.1 var(--font-kopf);color:var(--tx-head);margin:0}
.akte__rolle{color:var(--indigo);font-size:.92rem;font-weight:600;margin:.15rem 0 0}
.akte__seit{color:var(--tx-mut);font-size:.82rem;margin:.15rem 0 0}
.akte__zeile{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--hair)}
.akte__label{font:600 .66rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mut);margin:0 0 .5rem}
.akte__chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.akte__chips li{font-size:.86rem;padding:.3rem .7rem;border-radius:999px;background:var(--ki-weich);border:1px solid var(--ki-linie);color:var(--tx-head)}
.akte__zeile--grenze .akte__chips li{background:var(--mensch-weich);border-color:var(--mensch-linie)}
.akte__mehr{margin-top:.9rem;border-top:1px solid var(--hair)}
.akte__mehr summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:1rem;font:600 .9rem/1.3 var(--font-kopf);color:var(--tx-head)}
.akte__mehr summary::-webkit-details-marker{display:none}
.akte__mehr summary::after{content:"+";color:var(--indigo);font-size:1.3rem;font-weight:400;flex:none}
.akte__mehr[open] summary::after{content:"–"}
.akte__mehr p{margin:0 0 .6rem;color:var(--tx-body);font-size:.92rem}
/* Fächer: drei Akten leicht gegeneinander gedreht (Zusatzoptionen) */
.akten{display:grid;gap:1.2rem}
@media (min-width:860px){
  .akten{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;perspective:1600px;align-items:start}
  .akten .akte{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
  .akten .akte:nth-child(1){transform:rotate(-1.6deg) translateY(.4rem)}
  .akten .akte:nth-child(2){transform:translateY(-.3rem)}
  .akten .akte:nth-child(3){transform:rotate(1.6deg) translateY(.4rem)}
  .akten .akte:hover{transform:translateY(-.5rem);box-shadow:0 2.4rem 5rem rgba(0,0,0,.6),0 0 0 1px var(--ki-linie)}
}
@media (prefers-reduced-motion:reduce){.akte-buehne .akte,.akten .akte,.akte-buehne .akte:hover,.akten .akte:hover{transform:none;transition:none}}
/* Der Vorgang als aufklappbare Schritte */
.vorgang--schritte{display:block}
.schritt{border-bottom:1px solid var(--hair)}
.schritt:last-child{border-bottom:0}
.schritt summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:.85rem 0;min-height:48px}
.schritt summary::-webkit-details-marker{display:none}
.schritt summary::after{content:"+";color:var(--indigo);font-size:1.3rem;font-weight:400;transition:transform var(--dauer) var(--ease)}
.schritt[open] summary::after{transform:rotate(45deg)}
.schritt__wer{display:block;font:600 .68rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut);margin-bottom:.25rem}
.schritt__titel{font:600 1.02rem/1.3 var(--font-kopf);color:var(--tx-head)}
.schritt[data-wer="besucher"] .schritt__wer,.schritt[data-wer="sie"] .schritt__wer{color:var(--amber)}
.schritt[data-wer="besucher"] .vorgang__punkt,.schritt[data-wer="sie"] .vorgang__punkt{background:var(--mensch-weich);color:var(--amber);border-color:var(--mensch-linie)}
.schritt p{margin:0 0 1rem;padding-left:calc(36px + 1rem);color:var(--tx-body)}
@media (min-width:980px){.zweispaltig--akte{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
/* Referenz Nr. 1 als Lead-Karte über die volle Breite */
@media (min-width:860px){
  .referenzen .referenz--diese{grid-column:1 / -1;flex-direction:row;align-items:stretch}
  .referenzen .referenz--diese .referenz__bild{width:56%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--hair)}
  .referenzen .referenz--diese .referenz__text{justify-content:center;padding:1.6rem 1.8rem}
  .referenzen .referenz--diese h3{font-size:1.4rem}
}
/* „Wer dahintersteht“: Text bleibt stehen, die Crew scrollt vorbei (Ansage Michael 24.09.) */
@media (min-width:980px){
  .dahinter--sticky .dahinter__text{position:sticky;top:6rem}
  .dahinter--sticky .crew{grid-template-columns:1fr;gap:1rem}
  .dahinter--sticky .crew__karte{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center}
  .dahinter--sticky .crew__karte img{height:100%;aspect-ratio:1}
  .dahinter--sticky .crew__text{padding:1.1rem 1.3rem}
}

/* Blog-Übersicht: Nachladen kurz vor dem Rand (js/basis.js) — Karten ohne JS alle sichtbar */
.beitraege .beitrag[hidden]{display:none}
.beitraege__waechter{height:1px;margin-top:-1px}