/* pxmedia.ai — Grundgestaltung.
   Leitmotiv: STRUKTUR. Die Seite zeigt ein Unternehmen als Gefüge aus
   Firmengehirn, Prozesssträngen und Stellen — deshalb tragen Linien und
   Knoten die Gestaltung, nicht Karten-Raster.
   Farbregel (streng, siehe tokens.css): Cyan = was die KI tut.
   Lila = wo ein Mensch entscheidet. Nie füreinander. */

@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Black.ttf") format("truetype");font-weight:900;font-display:swap}
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Light.ttf") format("truetype");font-weight:300;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--c-grund);color:var(--c-text);
  font:var(--fw-text) var(--fs-text)/var(--zh-text) var(--font);
  -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-weight:var(--fw-black);line-height:var(--zh-eng);letter-spacing:-.018em}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);line-height:var(--zh-mittel)}
p{margin:0 0 1.1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--c-mensch);outline-offset:3px;border-radius:4px}
.springlink{position:absolute;left:-9999px;top:0;z-index:300;background:var(--c-mensch);color:#151515;padding:.7rem 1.1rem;font-weight:var(--fw-bold);border-radius:0 0 var(--radius) 0}
.springlink:focus{left:0}

/* ---- Strukturfeld: das Hintergrund-Motiv ---- */
.staub-hintergrund{position:fixed;inset:0;z-index:0;width:100vw;height:100vh;pointer-events:none}

/* ---- Raster ---- */
.innen{width:min(100% - 2*var(--rand),var(--breite));margin-inline:auto}
.innen-eng{width:min(100% - 2*var(--rand),var(--breite-eng));margin-inline:auto}
.abschnitt{position:relative;z-index:1;padding-block:var(--raum-sektion);background:var(--c-grund)}
/* Fenster-Abschnitte (Muster pxmedia.de): Sie geben den Blick auf den Sternenstaub frei — nur dort, wo rechts Luft ist
   oder der Text auf eigenen Flächen liegt. Alle anderen Abschnitte sind opak, damit keine Form hinter Fließtext liegt. */
.abschnitt--fenster{background:transparent}
.abschnitt--linie{border-top:1px solid var(--c-linie)}

/* ---- Kopfzeile ---- */
.kopf{
  position:sticky;top:0;z-index:120;
  background:rgba(21,21,21,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-linie);
}
.kopf__innen{width:min(100% - 2*var(--rand),var(--breite));margin-inline:auto;display:flex;align-items:center;gap:1.4rem;min-height:76px}
.kopf__marke{display:flex;align-items:center;text-decoration:none;padding-block:.7rem}
/* Der Spiegelrahmen des Logos ragt über die Schrift hinaus — er braucht Luft,
   sonst wirkt er beschnitten. */
.kopf__marke img{width:clamp(118px,12.5vw,150px);height:auto}
.kopf__nav{margin-left:auto;display:flex;gap:.2rem}
.kopf__nav a{text-decoration:none;color:var(--c-text-2);padding:.55rem .8rem;border-radius:8px;font-size:.96rem;transition:color var(--dauer) var(--kurve),background var(--dauer) var(--kurve)}
.kopf__nav a:hover{color:var(--c-text);background:var(--c-flaeche-2)}
.kopf__burger{display:none;margin-left:auto;background:var(--c-flaeche-2);border:1px solid var(--c-linie);border-radius:10px;width:46px;height:42px;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(--c-text);transition:transform var(--dauer) var(--kurve),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)}
@media (max-width:900px){
  .kopf__nav{display:none}
  .kopf__burger{display:flex}
  .kopf__aktion{display:none}
}
.mobilmenue{position:fixed;inset:76px 0 0;z-index:119;background:var(--c-grund);padding:var(--rand);overflow-y:auto}
.mobilmenue[hidden]{display:none}
.mobilmenue a{display:block;text-decoration:none;font-size:1.3rem;font-weight:var(--fw-bold);padding:.9rem 0;border-bottom:1px solid var(--c-linie)}

/* ---- Knöpfe ---- */
.knopf,.knopf-geist,.knopf-ki{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:var(--fw-bold) 1rem/1 var(--font);text-decoration:none;cursor:pointer;
  padding:.92rem 1.5rem;border-radius:10px;border:1px solid transparent;
  transition:transform var(--dauer) var(--kurve),background var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve);
  min-height:48px;
}
.knopf{background:var(--c-mensch);color:#151515;border-color:var(--c-mensch)}
.knopf:hover{transform:translateY(-1px);background:#b8abfb}
.knopf-geist{background:transparent;color:var(--c-text);border-color:var(--c-linie-2)}
.knopf-geist:hover{border-color:var(--c-text-2);background:var(--c-flaeche-2)}
.knopf-ki{background:var(--c-ki-weich);color:var(--c-ki);border-color:var(--c-ki-linie)}
.knopf-ki:hover{background:rgba(6,182,212,.2)}

/* ---- Bühne (Kopf der Startseite, klassische Ansicht) ---- */
.buehne{position:relative;z-index:1;padding-block:clamp(3.5rem,9vw,7rem) var(--raum-sektion)}
/* Mit Begleit-Dock (Fassung 4): Hero rückt hoch und wird enger, damit beide Hero-Knöpfe über dem Dock liegen */
html.dialog-begleitend .buehne{padding-top:clamp(1.6rem,4vh,3.2rem)}
html.dialog-begleitend .buehne h1{font-size:clamp(2.3rem,5.6vw,4.6rem);margin-bottom:.4em}
html.dialog-begleitend .buehne__kicker{margin-bottom:1rem}
html.dialog-begleitend .buehne__lead{font-size:clamp(1rem,1.3vw,1.2rem)}
html.dialog-begleitend .buehne__wege{margin-top:1.5rem}
.buehne__kicker{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--fs-klein);letter-spacing:.14em;text-transform:uppercase;color:var(--c-ki);font-weight:var(--fw-bold);margin-bottom:1.6rem}
.buehne__kicker::before{content:"";width:34px;height:1px;background:var(--c-ki-linie)}
.buehne h1{font-size:var(--fs-display);max-width:16ch;margin-bottom:.5em}
.buehne h1 .duenn{font-weight:var(--fw-light);display:block}
.buehne h1 .licht{color:var(--c-mensch)}
.buehne__lead{font-size:var(--fs-lead);color:var(--c-text-2);max-width:56ch;font-weight:var(--fw-light)}
.buehne__wege{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.buehne__beleg{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--c-linie);color:var(--c-text-3);font-size:var(--fs-klein)}
.buehne__beleg b{color:var(--c-text-2);font-weight:var(--fw-bold)}

/* ---- Abschnitts-Kopf ---- */
.kopfzeile{max-width:62ch;margin-bottom:var(--raum-block)}
.kopfzeile__kicker{display:block;font-size:var(--fs-klein);letter-spacing:.14em;text-transform:uppercase;color:var(--c-text-3);font-weight:var(--fw-bold);margin-bottom:.9rem}
.kopfzeile p{color:var(--c-text-2);font-size:var(--fs-lead);font-weight:var(--fw-light)}

/* ---- Gegenüberstellung (Problem) ---- */
.gegenueber{display:grid;gap:1px;background:var(--c-linie);border:1px solid var(--c-linie);border-radius:var(--radius-gross);overflow:hidden}
@media (min-width:860px){.gegenueber{grid-template-columns:1fr 1fr}}
.gegenueber__seite{background:var(--c-flaeche-1);padding:clamp(1.5rem,3vw,2.4rem)}
.gegenueber__seite h3{color:var(--c-text)}
.gegenueber__seite--wir{background:var(--c-flaeche-2)}
.gegenueber__liste{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.gegenueber__liste li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;color:var(--c-text-2)}
.gegenueber__liste li::before{content:"";width:8px;height:8px;border-radius:50%;margin-top:.55em;background:var(--c-linie-2)}
.gegenueber__seite--wir .gegenueber__liste li::before{background:var(--c-ki)}

/* ---- Struktur-Diagramm (Firmengehirn → Prozesse → Stellen) ---- */
.gefuege{display:grid;gap:1.3rem}
@media (min-width:980px){.gefuege{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(2rem,5vw,4.5rem)}}
.gefuege__bild{position:relative;border:1px solid var(--c-linie);border-radius:var(--radius-gross);background:linear-gradient(160deg,#1b1b1b,#151515);padding:clamp(1.2rem,3vw,2rem);overflow:hidden}
.gefuege__bild svg{width:100%;height:auto;display:block}
.gefuege__text h3{margin-top:0}
.ebenen{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;counter-reset:ebene}
.ebenen li{position:relative;padding:1.05rem 0 1.05rem 3.2rem;border-bottom:1px solid var(--c-linie);counter-increment:ebene}
.ebenen li:last-child{border-bottom:0}
.ebenen li::before{
  content:counter(ebene);position:absolute;left:0;top:1rem;
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:.82rem;font-weight:var(--fw-black);
  background:var(--c-ki-weich);color:var(--c-ki);border:1px solid var(--c-ki-linie);
}
.ebenen li b{display:block;color:var(--c-text);font-size:1.06rem;margin-bottom:.2rem}
.ebenen li span{color:var(--c-text-2);font-size:.99rem}

/* ---- Bereiche / Abteilungen ---- */
.bereiche{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.bereich{
  position:relative;background:var(--c-flaeche-1);border:1px solid var(--c-linie);
  border-radius:var(--radius);padding:1.4rem 1.4rem 1.5rem;
  transition:border-color var(--dauer) var(--kurve),transform var(--dauer) var(--kurve);
}
.bereich:hover{border-color:var(--c-ki-linie);transform:translateY(-2px)}
.bereich__kopf{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.bereich__zeichen{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;background:var(--c-ki-weich);border:1px solid var(--c-ki-linie)}
.bereich__zeichen svg{width:18px;height:18px;stroke:var(--c-ki);fill:none;stroke-width:1.7}
.bereich h3{margin:0;font-size:1.08rem}
.bereich p{color:var(--c-text-2);font-size:.99rem;margin-bottom:.9rem}
.bereich__stellen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.bereich__stellen li{font-size:.84rem;padding:.24rem .6rem;border-radius:999px;background:var(--c-flaeche-3);color:var(--c-text-2);border:1px solid var(--c-linie)}
.bereich__stellen li.eigen{background:var(--c-mensch-weich);color:var(--c-mensch);border-color:var(--c-mensch-linie)}

/* ---- Mitarbeiter-Karten ---- */
.stellen{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.stelle{display:grid;grid-template-columns:auto 1fr;gap:1rem;background:var(--c-flaeche-1);border:1px solid var(--c-linie);border-radius:var(--radius);padding:1.2rem}
.stelle__bild{width:58px;height:58px;border-radius:12px;object-fit:cover;background:var(--c-flaeche-3)}
.stelle b{display:block;font-size:1.04rem}
.stelle span{display:block;color:var(--c-ki);font-size:.86rem;font-weight:var(--fw-bold);margin-bottom:.45rem}
.stelle p{color:var(--c-text-2);font-size:.96rem;margin:0}
.stelle__freigabe{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--c-linie);color:var(--c-mensch);font-size:.88rem;display:flex;gap:.45rem;align-items:baseline}
.stelle__freigabe::before{content:"↳";opacity:.7}

/* ---- Beweis-Ablauf ---- */
.ablauf{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:schritt}
.ablauf li{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;
  padding:1.3rem 0;border-bottom:1px solid var(--c-linie);counter-increment:schritt;
}
.ablauf li:last-child{border-bottom:0}
.ablauf__punkt{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:var(--fw-black);font-size:.9rem;
  background:var(--c-ki-weich);color:var(--c-ki);border:1px solid var(--c-ki-linie);
}
.ablauf li[data-mensch] .ablauf__punkt{background:var(--c-mensch-weich);color:var(--c-mensch);border-color:var(--c-mensch-linie)}
.ablauf b{display:block;margin-bottom:.25rem}
.ablauf span{color:var(--c-text-2);font-size:.99rem}
.ablauf__wer{display:inline-block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-text-3);margin-bottom:.35rem}
.ablauf li[data-mensch] .ablauf__wer{color:var(--c-mensch)}

/* ---- Die vier Menschen ---- */
.menschen{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.menschen__karte{background:var(--c-flaeche-1);border:1px solid var(--c-linie);border-radius:var(--radius-gross);overflow:hidden;transition:border-color var(--dauer) var(--kurve)}
.menschen__karte:hover{border-color:var(--c-linie-2)}
.menschen__karte img{width:100%;aspect-ratio:1;object-fit:cover}
.menschen__text{padding:1.15rem 1.25rem 1.4rem}
.menschen__text b{display:block;font-size:1.1rem}
.menschen__text span{display:block;color:var(--c-mensch);font-size:.87rem;font-weight:var(--fw-bold);margin:.15rem 0 .6rem}
.menschen__text p{color:var(--c-text-2);font-size:.95rem;margin:0}

/* ---- Zahlen ---- */
.zahlen{display:grid;gap:1px;background:var(--c-linie);border:1px solid var(--c-linie);border-radius:var(--radius);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.zahlen div{background:var(--c-flaeche-1);padding:1.4rem 1.2rem}
.zahlen b{display:block;font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:var(--fw-black);line-height:1;letter-spacing:-.03em}
.zahlen span{display:block;color:var(--c-text-2);font-size:.92rem;margin-top:.45rem}

/* ---- Zitat / Leitsatz ---- */
.leitsatz{border-left:2px solid var(--c-mensch);padding:.2rem 0 .2rem 1.6rem;font-size:var(--fs-h3);font-weight:var(--fw-light);color:var(--c-text);max-width:48ch;line-height:var(--zh-mittel)}

/* ---- Fragen ---- */
.fragen{border-top:1px solid var(--c-linie)}
.frage{border-bottom:1px solid var(--c-linie)}
.frage summary{cursor:pointer;padding:1.15rem 2.2rem 1.15rem 0;font-weight:var(--fw-bold);position:relative;list-style:none;min-height:48px;display:flex;align-items:center}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";position:absolute;right:.4rem;top:50%;width:9px;height:9px;border-right:2px solid var(--c-text-3);border-bottom:2px solid var(--c-text-3);transform:translateY(-70%) rotate(45deg);transition:transform var(--dauer) var(--kurve)}
.frage[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.frage__text{padding:0 0 1.2rem;color:var(--c-text-2);max-width:68ch}

/* ---- Schluss / Erstgespräch ---- */
.schluss{background:var(--c-flaeche-1);border:1px solid var(--c-linie);border-radius:var(--radius-gross);padding:clamp(1.6rem,4vw,3rem)}
.schluss__gitter{display:grid;gap:2rem}
@media (min-width:900px){.schluss__gitter{grid-template-columns:1fr 1fr;gap:3rem}}
.schluss h2{margin-top:0}
.schluss__punkte{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem}
.schluss__punkte li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;color:var(--c-text-2);font-size:.99rem}
.schluss__punkte li::before{content:"✓";color:var(--c-mensch);font-weight:var(--fw-black)}
.formular{display:grid;gap:.85rem}
.formular label{display:grid;gap:.3rem;font-size:.9rem;color:var(--c-text-2)}
.formular input,.formular textarea,.formular select{
  font:var(--fw-text) 1rem/1.4 var(--font);color:var(--c-text);
  background:var(--c-grund);border:1px solid var(--c-linie-2);border-radius:9px;padding:.75rem .85rem;min-height:48px;
}
.formular textarea{min-height:92px;resize:vertical}
.formular input:focus,.formular textarea:focus{border-color:var(--c-mensch);outline:none}
.formular .reihe{display:grid;gap:.85rem}
@media (min-width:600px){.formular .reihe{grid-template-columns:1fr 1fr}}
.formular .haken{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.88rem;cursor:pointer;padding:.4rem 0}
/* 24 px ist das Mindestmaß aus WCAG 2.2 (2.5.8). Das umgebende Label ist
   zusätzlich klickbar, damit die tatsächliche Trefferfläche deutlich größer
   ist als das Kästchen — auf dem Handy trifft sonst niemand zuverlässig. */
.formular .haken input{min-height:24px;width:24px;height:24px;margin-top:.1rem;accent-color:var(--c-mensch);cursor:pointer}
.honig{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formular__hinweis{font-size:.86rem;color:var(--c-text-3);margin:0}
.formular__meldung{font-size:.95rem;padding:.8rem 1rem;border-radius:9px;margin:0}
.formular__meldung[data-art="gut"]{background:var(--c-ki-weich);color:var(--c-ki);border:1px solid var(--c-ki-linie)}
.formular__meldung[data-art="fehler"]{background:rgba(242,149,14,.12);color:var(--c-mensch);border:1px solid var(--c-mensch-linie)}

/* ---- Fuß ---- */
.fuss{position:relative;z-index:1;border-top:1px solid var(--c-linie);padding-block:2.6rem;margin-top:var(--raum-sektion);color:var(--c-text-3);font-size:.93rem}
.fuss__gitter{display:grid;gap:1.6rem}
@media (min-width:760px){.fuss__gitter{grid-template-columns:2fr 1fr 1fr}}
.fuss a{color:var(--c-text-2);text-decoration:none}
.fuss a:hover{color:var(--c-text)}
.fuss h4{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-text-3);margin-bottom:.7rem;font-weight:var(--fw-bold)}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.fuss__zeile{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--c-linie);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between}

/* ---- Ratgeber ---- */
.beitraege{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.beitrag{display:flex;flex-direction:column;background:var(--c-flaeche-1);border:1px solid var(--c-linie);border-radius:var(--radius);padding:1.4rem;text-decoration:none;transition:border-color var(--dauer) var(--kurve)}
.beitrag:hover{border-color:var(--c-ki-linie)}
.beitrag time{color:var(--c-text-3);font-size:.84rem}
.beitrag h3{margin:.5rem 0 .5rem}
.beitrag p{color:var(--c-text-2);font-size:.97rem;margin:0}
.beitrag__mehr{margin-top:1rem;color:var(--c-ki);font-size:.92rem;font-weight:var(--fw-bold)}
.fliesstext{max-width:70ch}
.fliesstext h2{margin-top:2.2em}
.fliesstext h3{margin-top:1.8em}
.fliesstext ul,.fliesstext ol{color:var(--c-text-2);padding-left:1.2rem;display:grid;gap:.5rem;margin-bottom:1.3em}
.fliesstext a{color:var(--c-ki)}
.fliesstext table{width:100%;border-collapse:collapse;margin-bottom:1.4em;font-size:.97rem}
.fliesstext th,.fliesstext td{text-align:left;padding:.65rem .7rem;border-bottom:1px solid var(--c-linie);vertical-align:top}
.fliesstext th{color:var(--c-text);font-weight:var(--fw-bold)}
.fliesstext td{color:var(--c-text-2)}

/* ---- Hilfsklassen ---- */
.nur-schirm{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.aufsteiger{opacity:0;transform:translateY(18px);transition:opacity 620ms var(--kurve),transform 620ms var(--kurve)}
.aufsteiger.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.aufsteiger{opacity:1;transform:none}}

/* ---- Nachträge: Klassen, die der Generator erzeugt ---- */
.fuss__marke{font-size:1.1rem;color:var(--c-text);margin-bottom:.6rem}
.fuss__marke b{font-weight:var(--fw-black)}
.fuss__marke span{color:var(--c-ki)}
.fuss__marke{letter-spacing:-.02em}
.zurueck{display:inline-block;color:var(--c-text-3);text-decoration:none;font-size:.92rem;margin-bottom:1.4rem}
.zurueck:hover{color:var(--c-ki)}

/* ---- Herausforderungen (Fassung 3): vier breite Felder statt neun Bereiche ---- */
.felder{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.feld{position:relative;background:var(--c-flaeche-1);border:1px solid var(--c-linie);border-radius:var(--radius);padding:1.5rem 1.5rem 1.6rem;display:grid;gap:.6rem}
.feld h3{margin:0;font-size:1.12rem}
.feld p{color:var(--c-text-2);font-size:.99rem;margin:0}
.feld__antwort{margin-top:.4rem;padding-top:.8rem;border-top:1px solid var(--c-linie);color:var(--c-text);font-size:.97rem}
.feld__antwort b{color:var(--c-ki);display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem}
/* Handy quer mit Begleit-Dock: Hero in Kurzform (Titel einzeilig), damit die Knöpfe über dem Dock bleiben */
@media (orientation:landscape) and (max-height:599px){
  html.dialog-begleitend .buehne{padding-top:.5rem}
  html.dialog-begleitend .buehne__kicker{margin-bottom:.3rem;font-size:.72rem}
  html.dialog-begleitend .buehne h1{font-size:1.65rem;margin-bottom:.3em;max-width:none}
  html.dialog-begleitend .buehne h1 .duenn{display:inline}
  html.dialog-begleitend .buehne__lead{font-size:.9rem;line-height:1.45;max-width:72ch;margin-bottom:.5em}
  html.dialog-begleitend .buehne__wege{margin-top:.5rem}
}

/* ---- Fassung 6 (Michael 24.09.2026): Das Gefüge als Orbit — die Partikel formen das Firmengehirn (Form
   „gehirn-kern“, an [data-staub-anker] gebunden), das HTML stellt aufrecht die acht Bereiche mit ihren
   Mitarbeitern drum herum. Keine Rotation. Der Kasten bleibt quadratisch, die Bereiche sitzen auf 36 % der
   Breite — exakt dort, wo die Partikel-Speichen enden (js/sternenstaub.js, Form gehirn-kern). ---- */
.gefuege__bild{background:transparent;border:0;padding:0;overflow:visible}
.orbit{position:relative;width:100%;max-width:34rem;aspect-ratio:1/1;margin-inline:auto;container-type:inline-size}
.orbit__ring{position:absolute;inset:14%;border-radius:50%;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.orbit__mitte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:999px;z-index:1;
  border:1px solid rgba(6,182,212,.35);background:rgba(21,21,21,.86);display:grid;text-align:center;gap:.1rem;padding:.45rem .9rem;max-width:44%}
.orbit__mitte b{font-size:clamp(.72rem,2.6cqw,.95rem);color:var(--c-text);line-height:1.1}
.orbit__mitte small{font-size:clamp(.58rem,2cqw,.72rem);color:var(--c-text-3);line-height:1.2}
.orbit__bereich{position:absolute;left:50%;top:50%;width:26cqw;margin:-13cqw 0 0 -13cqw;display:grid;justify-items:center;gap:.25rem;text-align:center;
  transform:rotate(calc(var(--i)*45deg)) translate(36cqw) rotate(calc(var(--i)*-45deg))}
.orbit__bereich::before{content:"";width:10px;height:10px;border-radius:50%;background:#1e1e1e;border:1.6px solid rgba(255,255,255,.6);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.orbit__personen{display:flex;gap:3px;transform:translateY(-1.35rem)}
.orbit__personen i,.orbit__legende i{display:inline-block;width:11px;height:11px;border-radius:50% 50% 45% 45%;position:relative}
.orbit__personen i::before,.orbit__legende i::before{content:"";position:absolute;left:50%;top:-6px;width:6px;height:6px;border-radius:50%;transform:translateX(-50%)}
.orbit__personen i.ki,.orbit__legende i.ki{background:rgba(6,182,212,.55);border:1px solid var(--c-ki)}
.orbit__personen i.ki::before,.orbit__legende i.ki::before{background:var(--c-ki)}
.orbit__personen i.mensch,.orbit__legende i.mensch{background:rgba(165,148,249,.5);border:1px solid var(--c-mensch)}
.orbit__personen i.mensch::before,.orbit__legende i.mensch::before{background:var(--c-mensch)}
.orbit__bereich b{font-size:clamp(.68rem,2.4cqw,.86rem);font-weight:var(--fw-bold);color:var(--c-text-2);letter-spacing:.02em;transform:translateY(.95rem);background:rgba(21,21,21,.7);border-radius:6px;padding:.05rem .3rem;
  paint-order:stroke;-webkit-text-stroke:0}
.orbit__legende{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:center;margin:1.2rem 0 0;font-size:.86rem;color:var(--c-text-3)}
.orbit__legende i{margin-right:.35rem;vertical-align:-1px}
.orbit__legende span{flex-basis:100%;text-align:center}
@media (min-width:980px){.gefuege{align-items:center}}
@media (prefers-reduced-motion:reduce){.orbit__mitte{background:rgba(6,182,212,.14)}}

/* ---- Personalakten auf der klassischen Seite (Bild des MyRocketPage-Entwurfs: Glas, leicht gedreht, gefächert) ---- */
.akten{display:grid;gap:1.2rem;margin-top:1.4rem}
.akte{position:relative;background:rgba(21,21,21,.74);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid var(--c-linie-2);border-radius:var(--radius-gross);padding:1.4rem 1.5rem;box-shadow:0 2rem 5rem rgba(0,0,0,.5),0 0 0 1px rgba(6,182,212,.1)}
.akte__stempel{display:inline-block;margin-bottom:.9rem;font-size:.62rem;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-text-3);border:1px solid var(--c-linie-2);border-radius:999px;padding:.35rem .6rem}
.akte__kopf{display:flex;gap:1rem;align-items:center}
.akte__kopf img{width:4.4rem;height:4.4rem;border-radius:.9rem;object-fit:cover;flex:none;background:var(--c-flaeche-3)}
.akte__name{font-size:1.5rem;line-height:1.1;color:var(--c-text);margin:0}
.akte__rolle{color:var(--c-ki);font-size:.92rem;font-weight:var(--fw-bold);margin:.15rem 0 0}
.akte__seit{color:var(--c-text-3);font-size:.82rem;margin:.15rem 0 0}
.akte__zeile{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--c-linie)}
.akte__label{font-size:.66rem;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--c-text-3);margin:0 0 .5rem;font-weight:var(--fw-bold)}
.akte__zeile p{margin:0;color:var(--c-text-2);font-size:.95rem}
.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(--c-ki-weich);border:1px solid var(--c-ki-linie);color:var(--c-text)}
.akte__zeile--mensch .akte__chips li{background:var(--c-mensch-weich);border-color:var(--c-mensch-linie)}
.akte__zeile--grenze p:not(.akte__label){color:var(--c-mensch);display:flex;gap:.45rem;align-items:baseline}
.akte__zeile--grenze p:not(.akte__label)::before{content:"↳";opacity:.7}
.akte--kompakt{padding:1.1rem 1.2rem}
.akte--kompakt .akte__kopf img{width:3.4rem;height:3.4rem}
.akte--kompakt .akte__name{font-size: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(--kurve),box-shadow .5s var(--kurve)}
  .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(--c-ki-linie)}
}
@media (prefers-reduced-motion:reduce){.akten .akte,.akten .akte:hover{transform:none;transition:none}}
/* Fenster-Abschnitt #mitarbeiter: die Listen liegen auf eigener Fläche, damit der Staub nicht unter den Text läuft */
#mitarbeiter .ebenen,#mitarbeiter > .innen > p,#mitarbeiter > .innen > h3{position:relative}
#mitarbeiter .ebenen{background:rgba(21,21,21,.72);border:1px solid var(--c-linie);border-radius:var(--radius-gross);padding:.4rem 1.2rem}
/* Arbeitswelt 5.0: Absätze lassen rechts Luft für die Partikel-Form „5.0“ (Lesbarkeit, Ansage Michael 24.09.) */
@media (min-width:980px){#arbeitswelt .innen > p,#arbeitswelt .leitsatz{max-width:60%}}