/* ontoconsult.de — Gestaltung nach dem ontoconsult Design System (04.10.2026).
   Eine einheitliche Flaeche: Nachtblau von oben bis unten, kein Wechsel zwischen hell und dunkel
   (Inhaber 2026-10-04, arbeitskern Decision f6549ab4). Abschnitte trennen Abstand und Haarlinie,
   keine Karten mit eigener Flaeche. Cormorant Garamond fuer Ueberschriften mit goldenem zweiten Teil,
   Jost fuer Text, JetBrains Mono fuer Marken; Gold ist der einzige Akzent; Ecken eckig, keine Schatten.
   Bewegung ruhig und mit Zweck: Kopf baut sich beim Laden auf, Abschnitte steigen beim Scrollen
   18 px ein, Ablaeufe zeigen ihre Schritte nacheinander, Zeilen klappen weich auf. Ohne JavaScript
   ist alles sichtbar, bei reduzierter Bewegung steht alles still. */
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/Cormorant-400.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts/CormorantGaramond-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Jost';font-weight:300;font-style:normal;font-display:swap;
  src:url('/fonts/Jost-300.woff2') format('woff2')}
@font-face{font-family:'Jost';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/Jost-400.woff2') format('woff2')}
@font-face{font-family:'Jost';font-weight:500;font-style:normal;font-display:swap;
  src:url('/fonts/Jost-500.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/JetBrainsMono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-style:normal;font-display:swap;
  src:url('/fonts/JetBrainsMono-500.woff2') format('woff2')}

:root{
  --bg:#0a0e17;--bg-soft:#0f1420;
  --fg:#e8e3d8;--fg-soft:rgba(232,227,216,.82);--muted:#8b95a8;--faint:#7e88a0;
  --gold:#c49a3c;--gold-hi:#e8cd8a;--gold-soft:rgba(196,154,60,.14);--gold-line:rgba(196,154,60,.55);
  --line:rgba(255,255,255,.10);--line-hi:rgba(255,255,255,.18);
  --ok:#4eca7a;--warn:#e0a13e;--stop:#e85c5c;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --pad:clamp(1.25rem,5vw,5rem);
  --band-y:clamp(4.5rem,9vw,8rem);
  --spalt:clamp(1.5rem,4vw,4.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6.2rem;background:var(--bg);color-scheme:dark}
html:focus-within{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:400;font-size:1.0625rem;
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--gold);color:var(--bg)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
h1,h2,h3{text-wrap:balance;font-weight:400}
p,li,dd,figcaption{text-wrap:pretty}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--line-hi) var(--bg)}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-hi);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-line)}
::-webkit-scrollbar-thumb:active{background:var(--gold)}
::-webkit-scrollbar-button{display:none;width:0;height:0}

.skip{position:absolute;left:-999px;top:0;z-index:50;padding:.7rem 1rem;background:var(--gold);
  color:var(--bg);font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.skip:focus{left:1rem;top:1rem}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);line-height:1.5}
.mono{font-family:var(--mono)}
.gold{color:var(--gold)}

/* ------------------------------------------------------------ Leiste (neu gedacht 05.10., Decision f513fdcd)
   Eine ruhige Zeile auf der Breite des Inhalts: Logo links; rechts Leistungen, Über uns, Kontakt in normaler
   Schrift, eine Haarlinie, dann Sprache und Termin. Das Menü "Leistungen" enthält nur Leistungen: drei Felder in
   gleich breiten Spalten, je vier Einträge als Zeilen mit Haarlinien, darunter das Format quer zu den Feldern. */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;border-bottom:1px solid transparent;
  transition:background-color .35s,border-color .35s}
.nav.scrolled,.nav:has(.menu-switch:checked){background:rgba(10,14,23,.9);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-innen{max-width:1280px;margin:0 auto;padding:1.4rem var(--pad);display:flex;align-items:center;gap:2rem;
  transition:padding .35s}
/* Nur beim Scrollen wird die Leiste flacher; das Oeffnen des Menues aendert ihre Hoehe nicht. */
.nav.scrolled .nav-innen{padding-top:.95rem;padding-bottom:.95rem}
.nav::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;background:var(--gold);opacity:.75;
  width:100%;transform-origin:left;transform:scaleX(var(--fortschritt,0))}
.brand{display:inline-flex;align-items:baseline;font-family:var(--display);font-weight:600;font-size:1.75rem;
  letter-spacing:.02em;color:var(--gold);line-height:1;flex-shrink:0}
.brand b{font-family:var(--sans);font-weight:300;font-size:.78em;letter-spacing:.04em;color:var(--fg);padding-left:.07em}
.nav-mitte{display:flex;align-items:center;gap:2.4rem;margin-left:auto}
.nav-link{font-family:var(--sans);font-size:1.02rem;font-weight:400;letter-spacing:.01em;color:var(--fg-soft);
  white-space:nowrap;cursor:pointer;padding:.35rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav-link:hover{color:var(--fg)}
.nav-link[aria-current="page"]{color:var(--fg);border-bottom-color:var(--gold)}
.nav-leistungen{display:inline-flex;align-items:center;gap:.6rem;user-select:none}
.nav-leistungen i{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.menu-switch:checked ~ .nav-mitte .nav-leistungen{color:var(--gold-hi)}
.menu-switch:checked ~ .nav-mitte .nav-leistungen i{transform:translateY(1px) rotate(-135deg)}
.nav-end{display:flex;align-items:center;gap:1.6rem;margin-left:auto}
.nav-mitte + .nav-end{margin-left:0;padding-left:2rem;border-left:1px solid var(--line-hi)}
.lang a{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;color:var(--muted);padding:.35rem 0;transition:color .2s}
.lang a:hover{color:var(--fg)}
.nav-cta{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bg);
  background:var(--gold);padding:.8rem 1.2rem;white-space:nowrap;transition:background .2s}
.nav-cta:hover{background:var(--gold-hi)}
.menu-switch{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.menu-toggle{display:none;align-items:center;gap:.6rem;cursor:pointer;font-family:var(--sans);font-size:1rem;
  color:var(--fg);user-select:none}
.menu-toggle i{display:inline-block;width:22px;height:9px;border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;transition:transform .25s}
.menu-switch:checked ~ .nav-end .menu-toggle i{transform:scaleY(.2)}
.menu-switch:focus-visible ~ .nav-end .menu-toggle,
.menu-switch:focus-visible ~ .nav-mitte .nav-leistungen{outline:2px solid var(--gold-hi);outline-offset:4px}

/* Menue "Leistungen" */
.menu{position:absolute;top:100%;left:0;right:0;visibility:hidden;opacity:0;background:var(--bg);
  border-bottom:1px solid var(--line);max-height:calc(100svh - 5rem);overflow:auto}
.menu-switch:checked ~ .menu{visibility:visible;opacity:1}
.menu-inner{max-width:1280px;margin:0 auto;padding:2.6rem var(--pad) 2.4rem}
.menu-felder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 3rem}
.menu-felder>li>a{display:flex;align-items:baseline;gap:.75rem;padding-bottom:.95rem;border-bottom:1px solid var(--gold-line)}
.menu-felder>li>a .no{font-family:var(--mono);font-size:.74rem;color:var(--gold)}
.menu-felder>li>a b{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.15;color:var(--fg);transition:color .2s}
.menu-felder>li>a:hover b,.menu-felder>li>a[aria-current="page"] b{color:var(--gold-hi)}
.menu-felder ul a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.72rem 0;
  border-bottom:1px solid var(--line);font-size:1.02rem;line-height:1.35;color:var(--fg-soft);transition:color .2s}
.menu-felder ul a:hover,.menu-felder ul a[aria-current="page"]{color:var(--gold-hi)}
.menu-felder ul a em{font-style:normal;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.menu-fuss{margin-top:2.2rem;display:flex;align-items:center;justify-content:space-between;gap:1.4rem 3rem;flex-wrap:wrap}
.menu-quer a{display:flex;align-items:baseline;gap:1.1rem}
.menu-quer .no{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.menu-quer b{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--fg);transition:color .2s}
.menu-quer b::after{content:"\00a0\2192";color:var(--gold)}
.menu-quer a:hover b,.menu-quer a[aria-current="page"] b{color:var(--gold-hi)}
.menu-haus,.menu-sprache{display:none}
@media (max-width:1180px){
  .nav-mitte{gap:1.8rem}
  .nav-mitte + .nav-end{padding-left:1.6rem}
  .menu-felder{gap:0 2rem}
  .menu-felder>li>a b{font-size:1.4rem}
}
/* Tablet und Telefon: Leiste mit Logo, Menue und Termin; das Menue zeigt alles untereinander */
@media (max-width:960px){
  .nav-mitte{display:none}
  .menu-toggle{display:inline-flex}
  .nav-end,.nav-mitte + .nav-end{margin-left:auto;padding-left:0;border-left:0}
  /* das Menue fuellt den Bildschirm unter der Leiste (Leiste hier knapp 5.75rem hoch) */
  .menu{height:calc(100svh - 5.65rem);max-height:none}
  .nav.scrolled .nav-innen{padding-top:1.4rem;padding-bottom:1.4rem}   /* gleiche Hoehe, damit das Menue passt */
  .menu-inner{padding:1.8rem var(--pad) 2.4rem}
  .menu-felder{grid-template-columns:1fr;gap:2rem}
  .menu-fuss{display:grid;justify-content:stretch;gap:1.8rem}
  .menu-haus{display:grid;gap:.2rem;border-top:1px solid var(--line);padding-top:1.4rem}
  .menu-haus a{display:block;font-family:var(--display);font-size:1.6rem;line-height:1.3;color:var(--fg)}
  .menu-haus a[aria-current="page"]{color:var(--gold-hi)}
}
@media (max-width:520px){
  .lang{display:none}
  .nav-innen{gap:.8rem;padding-top:1.05rem;padding-bottom:1.05rem}
  .menu{height:calc(100svh - 4.3rem)}
  .nav.scrolled .nav-innen{padding-top:1.05rem;padding-bottom:1.05rem}
  .nav-end{gap:1rem}
  .brand{font-size:1.5rem}
  .nav-cta{padding:.55rem .75rem;font-size:.7rem}
  .menu-sprache{display:flex;gap:1.4rem;font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
  .menu-sprache a{color:var(--muted)}
  .menu-sprache a[aria-current="page"]{color:var(--gold)}
  .menu-quer a{display:grid;gap:.3rem}
}
@media (max-width:380px){
  .menu-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* ------------------------------------------------------------ Knoepfe und Verweise */
.lede{font-size:clamp(1.08rem,1.5vw,1.28rem);font-weight:300;color:var(--fg-soft);max-width:36rem;line-height:1.55}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:2rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-hi);border:1px solid var(--gold);padding:.95rem 1.4rem;
  transition:background .2s,color .2s}
.btn:hover{background:var(--gold);color:var(--bg)}
.link{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line-hi);padding-bottom:.2rem;transition:color .2s,border-color .2s}
.link:hover{color:var(--gold-hi);border-color:var(--gold)}

/* ------------------------------------------------------------ Kopf: Stroemungsfeld auf derselben Flaeche */
.hero,.kopf{position:relative;overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%)}
.js #field{opacity:0;transition:opacity 1.8s ease}
.js #field.an{opacity:1}
.kopf #field.an{opacity:.75}
.hero .wrap,.kopf .wrap{position:relative;z-index:1}

/* Startseite */
.hero{min-height:100svh;display:flex;align-items:flex-end;padding:8.5rem 0 clamp(2.5rem,5vw,3.5rem)}
.hero .wrap{width:100%;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--spalt);align-items:end}
.hero h1{grid-column:1 / -1;font-family:var(--display);font-size:clamp(2.6rem,11.5vw,8.8rem);line-height:.94;
  letter-spacing:-.015em;margin-bottom:clamp(2rem,4.5vw,3.6rem)}
.hero h1 .klein{display:block;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);line-height:1.5;margin-bottom:clamp(1.2rem,3vw,2rem)}
.hero h1 .zeile{display:block;white-space:nowrap}
.hero .lede{grid-column:1}
.hero .actions{grid-column:2;justify-self:end;margin:0}
.ort{grid-column:1 / -1;margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:1rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
@media (max-width:900px){
  .hero{min-height:86svh}
  .hero .wrap{grid-template-columns:1fr}
  .hero .actions{grid-column:1;justify-self:start;margin-top:2rem}
}

/* Unterseiten */
.kopf{padding:clamp(7.5rem,12vw,9.5rem) 0 clamp(3.5rem,7vw,5.5rem)}
.krumen{display:flex;flex-wrap:wrap;gap:.4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:clamp(2rem,5vw,3.5rem)}
.krumen a{transition:color .2s}
.krumen a:hover{color:var(--fg)}
.krumen li+li::before{content:"/";margin-right:.4rem;opacity:.6}
.kopf-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--spalt);align-items:end}
.kopf.ohne-bild .kopf-raster{grid-template-columns:minmax(0,1fr)}
.kopf h1{font-family:var(--display);font-size:clamp(2.4rem,5vw,4.7rem);line-height:1;letter-spacing:-.01em;
  margin:1rem 0 1.4rem;overflow-wrap:break-word;hyphens:manual}
.kopf h1 .gold{color:var(--gold)}
.kopf-bild{justify-self:end;width:100%;max-width:470px}
.kopf-bild:has(.schleife){max-width:600px}
@media (max-width:900px){
  .kopf-raster{grid-template-columns:1fr}
  .kopf-bild{justify-self:stretch;max-width:none}
}

/* ------------------------------------------------------------ Abschnitte */
.band{padding:var(--band-y) 0;border-top:1px solid var(--line)}
.band-kopf{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--spalt);
  margin-bottom:clamp(2.4rem,5vw,4rem)}
.band-kopf>.eyebrow{padding-top:.75rem}
.band-kopf h2{font-family:var(--display);font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1.03;letter-spacing:-.005em}
.band-kopf h2 .gold{color:var(--gold)}
@media (min-width:900px){.band-kopf h2 .gold{white-space:nowrap}}
.band-kopf p{font-weight:300;color:var(--fg-soft);font-size:1.12rem;max-width:42rem;margin-top:1.1rem}
.band-kopf p .link{display:inline-block}
@media (max-width:900px){
  .band-kopf{grid-template-columns:1fr}
  .band-kopf>.eyebrow{padding:0;margin-bottom:.9rem}
}
.satz{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.2;color:var(--gold);margin-top:2.4rem;max-width:36ch}
.quelle{font-family:var(--mono);font-size:.66rem;color:var(--faint);margin-top:1.4rem;letter-spacing:.02em;line-height:1.6}
.quelle a{border-bottom:1px solid var(--line-hi)}
.quelle a:hover{color:var(--fg)}
.grenze{margin-top:2.2rem;font-size:.95rem;color:var(--muted);border-left:1px solid var(--gold-line);padding-left:1rem;max-width:44rem}

/* ------------------------------------------------------------ Zeilen (Leistungen, Fragen) */
.zeilen{border-bottom:1px solid var(--line-hi);overflow-anchor:none}
.zeilen>details{border-top:1px solid var(--line-hi)}
.zeilen summary{list-style:none;cursor:pointer;position:relative;display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--spalt);align-items:baseline;
  padding:clamp(1.3rem,2.4vw,2rem) 0}
.zeilen summary::-webkit-details-marker{display:none}
.zeilen summary:focus-visible{outline-offset:-2px}
.zeilen .no{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--gold)}
.zeilen summary h3{grid-column:2;font-family:var(--display);color:var(--fg);transition:color .3s;padding-right:3.4rem}
.zeichen{position:absolute;right:.4rem;top:50%;width:22px;height:22px;margin-top:-11px}
.zeichen::before,.zeichen::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--gold);
  transition:transform .45s var(--ease)}
.zeichen::after{transform:rotate(90deg)}
details[open]>summary .zeichen::after{transform:rotate(0deg)}
.js details>summary .zeichen::after{transform:rotate(90deg)}
.js details.auf>summary .zeichen::after{transform:rotate(0deg)}
.zeilen summary:hover h3,.zeilen details.auf>summary h3{color:var(--gold-hi)}
.klappe{overflow:hidden}
.js .zeilen .klappe>*{opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .3s ease}
.js .zeilen details.auf .klappe>*{opacity:1;transform:none;transition:opacity .5s ease .14s,transform .7s var(--ease) .1s}

.leistung summary h3{font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1.04;letter-spacing:-.005em}
.leistung .unter{grid-column:2;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:.7rem;padding-right:3.4rem}
/* Spalten wie im Abschnittskopf (3/12 | 9/12), damit Text und Titel auf einer Kante stehen */
.leistung-inhalt{display:grid;grid-template-columns:calc((100% - var(--spalt)) * .25) minmax(0,1fr) minmax(0,1fr);column-gap:var(--spalt);
  padding:.4rem 0 clamp(2rem,3.4vw,2.8rem)}
.leistung-text{grid-column:2}
.leistung-text p{font-weight:300;color:var(--fg-soft);font-size:1.1rem;margin-bottom:1.4rem}
.angebote{grid-column:3;border-top:1px solid var(--line)}
.angebote li{border-bottom:1px solid var(--line);padding:.75rem 0}
.angebote a{display:block}
.angebote b{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.2;color:var(--fg);transition:color .2s}
.angebote a b::after{content:" \2192";color:var(--gold)}
.angebote a:hover b{color:var(--gold-hi)}
.angebote span{display:block;font-size:.9rem;color:var(--muted);margin-top:.15rem}

.frage summary h3{font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.2}
.antwort{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--spalt);padding:0 0 clamp(1.6rem,3vw,2.2rem)}
.antwort p{grid-column:2;max-width:46rem;padding-right:3.4rem;color:var(--fg-soft);font-weight:300}
.antwort p+p{margin-top:.6rem}
@media (max-width:900px){
  .zeilen summary{grid-template-columns:1fr}
  .zeilen summary h3,.leistung .unter{padding-right:2.8rem}
  .zeilen summary h3,.leistung .unter{grid-column:1}
  .zeilen .no{margin-bottom:.5rem}
  .leistung-inhalt{grid-template-columns:1fr;row-gap:1.6rem;padding-right:0}
  .leistung-text,.angebote{grid-column:1}
  .antwort{grid-template-columns:1fr;padding-right:0}
  .antwort p{grid-column:1;padding-right:0}
}

/* ------------------------------------------------------------ Startseite: Ablauf und Team */
.etappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.etappen li{position:relative;padding:2.2rem 2rem 0 0;border-top:1px solid var(--line-hi)}
.etappen li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:1px solid var(--gold)}
.etappen li:last-child::before{background:var(--gold)}
.etappen b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,3.6vw,3rem);line-height:1;color:var(--gold-hi)}
.etappen span{display:block;margin-top:.8rem;color:var(--fg-soft);font-weight:300;max-width:19rem}
@media (max-width:760px){
  .etappen{grid-template-columns:1fr}
  .etappen li{border-top:0;border-left:1px solid var(--line-hi);padding:0 0 2rem 1.6rem}
  .etappen li:last-child{padding-bottom:0}
  .etappen li::before{top:.3rem;left:-5px}
}
.portraits{display:grid;grid-template-columns:calc((100% - var(--spalt)) * .25) minmax(0,1fr) minmax(0,1fr);column-gap:var(--spalt)}
.portraits figure:first-child{grid-column:2}
.portraits img,.person img{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;object-position:center 20%;
  filter:grayscale(1) contrast(1.05)}
.portraits figcaption{border-top:1px solid var(--line-hi);margin-top:1.1rem;padding-top:.9rem}
.portraits figcaption b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.15}
.portraits figcaption span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-top:.35rem}
@media (max-width:900px){
  .portraits{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
  .portraits figure:first-child{grid-column:auto}
}

/* ------------------------------------------------------------ Schluss und Fuss */
.schluss{padding:clamp(6rem,12vw,10rem) 0 clamp(5rem,9vw,7rem);border-top:1px solid var(--line)}
.schluss h2{font-family:var(--display);font-size:clamp(2.8rem,7.2vw,6.4rem);line-height:.98;letter-spacing:-.012em;
  margin:1.3rem 0 clamp(2.4rem,5vw,3.6rem);max-width:15ch}
.schluss-fuss{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.6rem 3rem;align-items:end;
  border-top:1px solid var(--line);padding-top:2rem}
.schluss-fuss p{font-weight:300;color:var(--fg-soft);font-size:1.12rem;max-width:36rem}
.schluss-fuss .actions{margin:0}
@media (max-width:760px){.schluss-fuss{grid-template-columns:1fr}}

.fuss-bereich{border-top:1px solid var(--line);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.fuss{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2.4rem 2rem}
.fuss-marke .brand{font-size:1.5rem}
.fuss-marke p{margin-top:.9rem;font-size:.92rem;color:var(--muted);font-weight:300;max-width:18rem}
.fuss h2{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.9rem}
.fuss-links li+li{margin-top:.45rem}
.fuss-links li.unter{padding-left:.9rem}
.fuss-links a,.fuss address a{font-size:.94rem;color:var(--fg-soft);transition:color .2s}
.fuss-links li.unter a{color:var(--muted)}
.fuss-links a:hover,.fuss address a:hover{color:var(--gold-hi)}
.fuss address{font-style:normal;font-size:.94rem;color:var(--muted);line-height:1.7}
.fuss-ende{margin-top:clamp(2.6rem,5vw,3.6rem);padding-top:1.2rem;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.08em;color:var(--faint)}
.recht{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.recht a{color:var(--muted);transition:color .2s}
.recht a:hover{color:var(--gold-hi)}
@media (max-width:900px){.fuss{grid-template-columns:repeat(2,minmax(0,1fr))}.fuss-marke{grid-column:1 / -1}}
@media (max-width:480px){.fuss{grid-template-columns:1fr}}

/* ------------------------------------------------------------ Kennzahlen */
.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.zahlen li{border-left:1px solid var(--gold);padding:.2rem 0 .2rem 1.1rem}
.zahlen b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;color:var(--gold-hi)}
.zahlen span{display:block;font-size:.9rem;color:var(--muted);margin-top:.5rem;line-height:1.45}
.zahlen.worte b{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--fg)}
.zahlen.zwei-z{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:.8rem}
@media (max-width:760px){.zahlen{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1rem}}
@media (max-width:420px){.zahlen.worte{grid-template-columns:1fr}}

.wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spalt)}
.wege li{border-top:1px solid var(--line-hi);padding-top:1.3rem}
.wege .no{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.wege h3{font-family:var(--display);font-size:clamp(1.55rem,2.3vw,2rem);line-height:1.15;margin:.6rem 0 .6rem;overflow-wrap:anywhere}
.wege h3 a{transition:color .2s}
.wege h3 a:hover{color:var(--gold-hi)}
.wege p{color:var(--fg-soft);font-weight:300}
@media (max-width:900px){.wege{grid-template-columns:1fr;gap:1.8rem}}

/* ------------------------------------------------------------ Zeichnungen (HTML und SVG mit Textbeschriftung) */
/* Fluss: Kette mit Knoten; gefuellter Knoten = ein Mensch entscheidet */
.fluss{display:flex;align-items:stretch}
.fluss>li{flex:1 1 0;position:relative;padding:1.1rem 1rem 0 0;min-width:0}
.fluss>li::before{content:"";display:block;height:1px;background:var(--line-hi);margin:0 0 1.1rem}
.fluss>li::after{content:"";position:absolute;top:calc(1.1rem - 4px);left:0;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:1px solid var(--gold)}
.fluss>li.mensch::after{background:var(--gold)}
.fluss b{display:block;font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1.15;color:var(--fg)}
.fluss span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;color:var(--muted);margin-top:.4rem;line-height:1.5}
@media (max-width:760px){
  .fluss{flex-direction:column}
  .fluss>li{padding:0 0 1.4rem 1.6rem}
  .fluss>li::before{position:absolute;left:4px;top:0;bottom:0;width:1px;height:auto;margin:0}
  .fluss>li:last-child::before{display:none}
  .fluss>li::after{top:.35rem;left:0}
}

/* Wer erledigt die Arbeit */
.wer{--sp:6;display:grid;grid-template-columns:minmax(6.5rem,auto) repeat(var(--sp),minmax(0,1fr));gap:.5rem;align-items:center}
.wer .zeile{display:contents}
.wer .zeile>*{grid-row:var(--r);grid-column:var(--c)}
.wer .h{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--muted);text-align:center;line-height:1.3;padding-bottom:.2rem}
.wer .r{font-family:var(--display);font-size:1.35rem;color:var(--fg);padding-right:.6rem}
.wer .z{height:3rem;border:1px solid var(--line-hi);display:flex;align-items:center;justify-content:center}
.wer .z svg{width:20px;height:20px}
.wer .m svg{fill:var(--fg-soft)}
.wer .k{background:var(--gold);border-color:var(--gold)}
.wer .k::after{content:"KI";font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.08em;color:var(--bg)}
html[lang="en"] .wer .k::after{content:"AI"}
.wer .a{border-color:var(--gold)}
.wer .a svg{fill:var(--gold-hi)}
.legende{display:flex;gap:1.4rem;margin-top:1.2rem;font-family:var(--mono);font-size:.7rem;color:var(--muted);flex-wrap:wrap}
.legende span{display:inline-flex;align-items:center;gap:.5rem}
.legende i{display:inline-block;width:14px;height:14px;border:1px solid var(--line-hi)}
.legende i.k{background:var(--gold);border-color:var(--gold)}
.legende i.a{border-color:var(--gold)}
@media (max-width:720px){
  .wer{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:.4rem}
  .wer .zeile>*{grid-row:var(--c);grid-column:var(--r)}
  .wer .h{text-align:left;font-size:.72rem;padding:0}
  .wer .r{font-size:1.05rem;text-align:center;padding:0 0 .2rem}
  .wer .z{height:2.5rem}
}

/* Register */
.tabelle-rahmen{border-top:1px solid var(--line-hi);overflow-x:auto}
.register{width:100%;border-collapse:collapse;font-size:.92rem}
.register caption{text-align:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:1rem 0 .8rem}
.register th{font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.55rem .7rem .55rem 0;border-bottom:1px solid var(--line-hi)}
.register td{padding:.85rem .7rem .85rem 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--fg-soft);font-weight:300}
.register td:first-child{color:var(--fg);font-weight:400}
.st{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.7rem;white-space:nowrap}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0}
.st.ok::before{background:var(--ok)}
.st.auflage::before{background:var(--gold)}
.st.offen::before{background:transparent;border:1px solid var(--warn)}
.st.stop::before{background:var(--stop)}
.mass{display:inline-block;width:64px;height:4px;background:var(--line-hi);vertical-align:middle;margin-right:.5rem;position:relative}
.mass i{position:absolute;inset:0 auto 0 0;background:var(--gold)}
@media (max-width:1000px){.register .opt2{display:none}}
@media (max-width:640px){
  .register thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .register tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .8rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
  .register td{border:0;padding:0}
  .register td:first-child{grid-column:1 / -1}
  .register .opt{display:none}
}

/* Schleife (Agentische Entwicklung) */
.schleife svg{width:100%;height:auto;overflow:visible}
.schleife text{font-family:var(--mono);font-size:19px;fill:var(--fg)}
.schleife .klein{font-size:15px;fill:var(--muted)}
.schleife .linie{fill:none;stroke:var(--gold-line);stroke-width:1}
.schleife .rueck{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:4 5}
.schleife .kreis{fill:var(--bg);stroke:var(--gold);stroke-width:1}
.schleife .voll{fill:var(--gold)}
@media (max-width:600px){.schleife text{font-size:27px}.schleife .klein{display:none}.schleife .klein.mitte-text{display:inline;font-size:21px}}

/* Balkenvergleich */
.vergleich{display:grid;gap:1.6rem;max-width:860px}
.vergleich .zeile-v{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:1rem;align-items:center}
.vergleich .name{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.vergleich .balken{display:grid;gap:.45rem}
.vergleich .b{position:relative;height:1.8rem;display:flex;align-items:center}
.vergleich .b i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--line-hi)}
.vergleich .b.neu i{background:var(--gold)}
.vergleich .b em{position:relative;font-style:normal;font-family:var(--mono);font-size:.7rem;padding-left:.6rem;color:var(--fg)}
.vergleich .b.neu em{color:var(--bg)}
@media (max-width:560px){.vergleich .zeile-v{grid-template-columns:1fr}}

/* Saeulen und Haltung (Ueber uns) */
.saeulen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.saeulen li{border:1px solid var(--line-hi);border-top:2px solid var(--gold);padding:1.3rem 1.1rem 1.5rem}
.saeulen b{display:block;font-family:var(--display);font-weight:400;font-size:1.65rem}
.saeulen span{display:block;font-size:.94rem;color:var(--muted);margin-top:.3rem}
.sockel{margin-top:.9rem;border:1px solid var(--gold-line);padding:.75rem 1rem;text-align:center;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi)}
.haltung{margin-top:2.8rem;display:grid;gap:.4rem}
.haltung p{font-family:var(--display);font-size:clamp(1.35rem,2.5vw,1.9rem);line-height:1.25;color:var(--fg)}
.haltung p b{font-weight:400;color:var(--gold)}
@media (max-width:640px){.saeulen{grid-template-columns:1fr}}

/* Personen (Ueber uns) */
.team{display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,4vw,3.4rem);max-width:900px}
.person{display:flex;flex-direction:column}
.person picture{display:block}
.person-text{border-top:1px solid var(--line-hi);margin-top:1.2rem;padding-top:1.1rem}
.person h3{font-family:var(--display);font-size:1.75rem;line-height:1.1}
.person .rolle{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:.35rem 0 .75rem}
.person p{color:var(--fg-soft);font-weight:300}
.person .link{display:inline-block;margin-top:.9rem}
@media (min-width:1024px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Begriffe (Glossar) */
.begriffe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--spalt)}
.begriffe>div{border-top:1px solid var(--line-hi);padding:1.5rem 0 1.7rem}
.begriffe dt{font-family:var(--display);font-size:1.65rem;line-height:1.15;color:var(--fg)}
.begriffe dt small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:.4rem}
.begriffe dd{color:var(--fg-soft);font-weight:300;margin-top:.65rem}
.begriffe dd a{color:var(--gold-hi);border-bottom:1px solid var(--gold-line)}
@media (max-width:760px){.begriffe{grid-template-columns:1fr}}

/* Bilder im Seitenkopf: Rahmen aus Haarlinien, dieselbe Flaeche */
.frist,.akte,.auftrag{border:1px solid var(--line-hi);padding:1.4rem 1.4rem 1.2rem}
.frist{border-color:var(--gold-line)}
.frist time{display:block;font-family:var(--display);font-size:clamp(2.4rem,4vw,3.3rem);line-height:1;color:var(--gold-hi);margin:.7rem 0 .55rem}
.frist b{display:block;font-weight:400;font-size:1.05rem}
.frist>span:not(.eyebrow){display:block;font-size:.9rem;color:var(--muted);margin-top:.35rem;font-weight:300}
.frist .link{display:inline-block;margin-top:1.1rem}
.akte-kopf b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;margin-top:.3rem}
.akte ol{margin:1rem 0;border-top:1px solid var(--line)}
.akte li,.schritte li{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--fg-soft)}
.akte-fuss{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
.akte-fuss .mono{font-size:.68rem;color:var(--muted)}
.auftrag{display:grid;gap:1rem}
.sprech p{font-family:var(--display);font-size:1.4rem;line-height:1.25;margin-top:.4rem}
.schritte{border-top:1px solid var(--line)}
.datei{display:flex;justify-content:space-between;border:1px solid var(--gold);padding:.6rem .8rem;color:var(--gold-hi)}
.datei .mono{font-size:.74rem}
.schichten{display:grid}
.schicht{border:1px solid var(--line-hi);padding:1.25rem}
.schicht.gold{border-color:var(--gold);background:linear-gradient(135deg,var(--gold-soft),transparent 70%)}
.schicht b{display:block;font-family:var(--display);font-weight:400;font-size:1.55rem}
.schicht span{display:block;font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-top:.3rem}
.pfeil{height:3.2rem;position:relative;display:flex;align-items:center;padding-left:2.2rem}
.pfeil::before{content:"";position:absolute;left:1.2rem;top:0;bottom:6px;width:1px;background:var(--gold)}
.pfeil::after{content:"";position:absolute;left:calc(1.2rem - 4px);bottom:0;border:4.5px solid transparent;border-top:6px solid var(--gold);border-bottom:0}
.pfeil span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

/* ------------------------------------------------------------ Ordnung: Feld, Leistung, Software, Format (Konzept §10) */
/* Kennzeichen "Software" auf der Startseite und in der Uebersicht der Feldseiten */
.angebote em,.feld-index .art.sw{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-line);padding:.06rem .36rem;white-space:nowrap}

/* Feldseite: Uebersicht der vier Eintraege im Kopf */
.feld-index{margin-top:clamp(2.8rem,5vw,4rem);border-top:1px solid var(--line-hi)}
.feld-index ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.feld-index li+li{border-left:1px solid var(--line)}
.feld-index a{display:flex;flex-direction:column;gap:.35rem;height:100%;padding:1.1rem 1.2rem 1.2rem}
.feld-index li:first-child a{padding-left:0}
.feld-index .no{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--gold)}
.feld-index b{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.15;color:var(--fg);transition:color .2s}
.feld-index a:hover b{color:var(--gold-hi)}
.feld-index .kurz{font-size:.86rem;font-weight:300;line-height:1.4;color:var(--muted)}
.feld-index .art{margin-top:auto;padding-top:.4rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.js .kopf .feld-index.auf{animation-delay:.55s}
@media (max-width:900px){
  .feld-index ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feld-index li:nth-child(3){border-left:0}
  .feld-index li:nth-child(odd) a{padding-left:0}
  .feld-index li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:480px){
  .feld-index ol{grid-template-columns:1fr}
  .feld-index li+li{border-left:0;border-top:1px solid var(--line)}
  .feld-index a{padding:.85rem 0;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem}
  .feld-index .art{margin:0 0 0 auto;padding:0}
  .feld-index .kurz{display:none}
}

/* Abschnitt je Eintrag: Zeichnung, dann das Ergebnis als Reihe von Belegstuecken */
.eintrag-bild{margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.ergebnis{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--spalt);row-gap:.9rem;
  border-top:1px solid var(--line);padding-top:1.3rem}
.ergebnis>.eyebrow{color:var(--faint);padding-top:.55rem}
.ergebnis ul{display:flex;flex-wrap:wrap;gap:.6rem}
.ergebnis li{display:inline-flex;align-items:center;gap:.6rem;font-size:.95rem;color:var(--fg);border:1px solid var(--line-hi);padding:.48rem .8rem .48rem .65rem}
.ergebnis li::before{content:"";flex-shrink:0;width:10px;height:13px;border:1px solid var(--gold);
  clip-path:polygon(0 0,62% 0,100% 32%,100% 100%,0 100%)}
.ergebnis .btn{margin-top:1.5rem}
@media (max-width:900px){.ergebnis{grid-template-columns:1fr}.ergebnis>.eyebrow{padding:0}}

/* Startseite: Eintraege mit Nummer, Software gekennzeichnet; das Format quer zu den Feldern gestrichelt abgesetzt */
.angebote a{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;align-items:baseline;column-gap:.5rem}
.angebote .no{display:block;font-family:var(--mono);font-size:.64rem;color:var(--gold);margin:0}
.angebote b{font-size:1.2rem}
.zeilen>details.quer{border-top:1px dashed var(--gold-line)}
.leistung.quer .no{letter-spacing:.06em}

/* 01.1 Freigabeweg: drei Pruefungen nebeneinander, Freigabe als Tor, Rueckweg der Wiedervorlage */
.weg{position:relative;padding-top:3.4rem}
.weg-rueck{position:absolute;top:.9rem;height:2.5rem;left:calc(100% / 6 + 4px);right:calc(100% / 6 - 5px);
  border:1px dashed var(--gold-line);border-bottom:0}
.weg-rueck::after{content:"";position:absolute;left:-5px;bottom:-1px;border:4.5px solid transparent;border-top:6px solid var(--gold);border-bottom:0}
.weg-notiz{position:absolute;top:.9rem;left:50%;transform:translate(-50%,-50%);background:var(--bg);padding:0 .8rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--gold);white-space:nowrap}
.weg-schritte{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.weg-schritte>li{position:relative;padding:1.3rem 1rem 0 0;border-top:1px solid var(--line-hi)}
.weg-schritte>li::after{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--gold)}
.weg-schritte>li.tor::after{border-radius:0;width:13px;height:13px;top:-7px;left:-2px;background:var(--gold)}
.weg-schritte b{display:block;font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1.15}
.weg-schritte .tor b{color:var(--gold-hi)}
.weg-schritte span{display:block;font-family:var(--mono);font-size:.68rem;color:var(--muted);margin-top:.4rem;line-height:1.5}
.weg-schritte .gabel ul{margin-top:.6rem;display:grid;gap:.35rem;border-left:1px solid var(--gold-line);padding-left:.7rem}
.weg-schritte .gabel li{position:relative;font-family:var(--mono);font-size:.68rem;color:var(--fg-soft);line-height:1.4}
.weg-schritte .gabel li::before{content:"";position:absolute;left:-.7rem;top:.62em;width:.45rem;height:1px;background:var(--gold-line)}
@media (max-width:860px){
  .weg{padding-top:0}
  .weg-rueck{display:none}
  .weg-schritte{grid-template-columns:1fr}
  .weg-schritte>li{border-top:0;border-left:1px solid var(--line-hi);padding:0 0 1.5rem 1.6rem}
  .weg-schritte>li::after{top:.4rem;left:-5px}
  .weg-schritte>li.tor::after{left:-7px;top:.3rem}
  .weg-notiz{position:static;transform:none;padding:0 0 0 1.6rem;white-space:normal}
  .weg-notiz span::before{content:"\21BA  "}
}

/* 01.2 Engpass: wartende Vorgaenge als Stapel je Schritt */
.engpass{max-width:980px}
.engpass ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;border-bottom:1px solid var(--line-hi)}
.engpass ol>li{display:flex;flex-direction:column;align-items:flex-start;padding:0 .8rem 1rem 0}
.engpass .stapel{display:flex;flex-direction:column-reverse;gap:4px;margin-top:.5rem}
.engpass .stapel i{width:40px;height:15px;border:1px solid var(--line-hi)}
.engpass .eng .stapel i{background:var(--gold);border-color:var(--gold)}
.engpass .zahl{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.engpass .eng .zahl{color:var(--gold-hi)}
.engpass b{font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.15;margin-top:.8rem;color:var(--fg)}
.engpass .eng b{color:var(--gold-hi)}
.engpass em{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bg);
  background:var(--gold);padding:.2rem .45rem;margin-bottom:.6rem}
.engpass figcaption{font-family:var(--mono);font-size:.68rem;color:var(--faint);margin-top:1rem;max-width:44rem;line-height:1.6}
@media (max-width:640px){
  .engpass ol{grid-template-columns:1fr;border-bottom:0;border-left:1px solid var(--line-hi)}
  .engpass ol>li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.8rem;padding:.55rem 0 .55rem 1rem}
  .engpass em{grid-column:1 / -1;justify-self:start;margin:0 0 .3rem}
  .engpass .stapel{flex-direction:row;grid-column:2;grid-row:2;margin:0}
  .engpass .stapel i{width:11px;height:16px}
  .engpass .zahl{display:none}
  .engpass b{grid-column:1;grid-row:2;margin:0;font-size:1.15rem}
}

/* 01.3 Verantwortung auf Zeit: zwei Spuren, Uebergabe als Linie */
.uebergabe{display:grid;gap:.4rem;max-width:980px}
.uebergabe .spur{display:grid;grid-template-columns:10rem minmax(0,1fr);align-items:center;gap:1rem}
.uebergabe .name{font-family:var(--display);font-size:1.3rem;color:var(--fg)}
.uebergabe .bahn{position:relative;height:2.6rem}
.uebergabe .wir{position:absolute;left:0;top:.55rem;bottom:.55rem;width:78%;background:linear-gradient(to right,var(--gold) 0 70%,rgba(196,154,60,0) 100%)}
.uebergabe .sie{position:absolute;left:56%;right:0;top:.55rem;bottom:.55rem;border:1px solid var(--gold);
  background:linear-gradient(to right,transparent,var(--gold-soft) 45%,var(--gold) 100%)}
.uebergabe .achse .bahn{height:2.2rem;border-top:1px solid var(--line-hi)}
.uebergabe .punkt{position:absolute;left:var(--x);top:.55rem;font-family:var(--mono);font-size:.68rem;color:var(--muted);white-space:nowrap}
.uebergabe .punkt.mitte,.uebergabe .punkt.tor{transform:translateX(-50%)}
.uebergabe .punkt.tor{color:var(--gold-hi)}
.uebergabe .punkt::before{content:"";position:absolute;left:0;bottom:calc(100% + .55rem);width:1px;height:6.4rem;background:var(--line-hi)}
.uebergabe .punkt.mitte::before,.uebergabe .punkt.tor::before{left:50%}
.uebergabe .punkt.tor::before{background:var(--gold)}
@media (max-width:640px){
  .uebergabe .spur{grid-template-columns:5.6rem minmax(0,1fr);gap:.6rem}
  .uebergabe .name{font-size:1rem;line-height:1.15}
  .uebergabe .achse .bahn{height:3.4rem}
  .uebergabe .punkt.tor{top:1.9rem}
  .uebergabe .punkt.tor::before{height:7.6rem}
  .uebergabe .punkt{font-size:.62rem}
}

/* 01.4 und 02.4: Kurzbilder der Software */
.mini-register{max-width:680px;border-top:1px solid var(--line-hi)}
.mini-register figcaption{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:.9rem 0 .4rem}
.mini-register li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--fg-soft);font-weight:300}

/* 01 Fristen der KI-Verordnung im Massstab: Abstaende entsprechen der Zeit */
.frist-achse{position:relative;height:21rem;margin-top:.5rem}
.frist-achse::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-hi)}
.frist-achse::after{content:"";position:absolute;left:0;width:var(--heute);top:50%;height:3px;margin-top:-1px;background:var(--gold);transform-origin:left}
.frist-achse>li{position:absolute;left:var(--x);width:15%}
.frist-achse>li.r0{bottom:50%;padding-bottom:1.5rem}
.frist-achse>li.r1{top:50%;padding-top:1.5rem}
.frist-achse>li.rechts{transform:translateX(-100%);text-align:right}
.frist-achse>li:not(.heute)::before{content:"";position:absolute;left:-5px;width:9px;height:9px;border-radius:50%;border:1px solid var(--gold);background:var(--bg);z-index:1}
.frist-achse>li.r0::before{bottom:-5px}
.frist-achse>li.r1::before{top:-5px}
.frist-achse>li.rechts::before{left:auto;right:-5px}
.frist-achse>li.vorbei::before{background:var(--gold)}
.frist-achse>li:not(.heute)::after{content:"";position:absolute;left:0;width:1px;height:1.5rem;background:var(--line-hi)}
.frist-achse>li.r0::after{bottom:0}
.frist-achse>li.r1::after{top:0}
.frist-achse>li.rechts::after{left:auto;right:0}
.frist-achse time{display:block;font-family:var(--mono);font-size:.7rem;color:var(--gold-hi);letter-spacing:.04em}
.frist-achse b{display:block;font-weight:400;font-size:.98rem;line-height:1.3;margin-top:.3rem;color:var(--fg)}
.frist-achse span{display:block;font-size:.8rem;color:var(--muted);line-height:1.4;margin-top:.2rem}
.frist-achse .heute{top:50%;width:auto;padding:.55rem 0 0 .7rem;z-index:1}
.frist-achse .heute::before{content:"";position:absolute;left:-1px;top:-.6rem;width:1px;height:1.2rem;background:var(--gold)}
.frist-achse .heute span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--gold);margin:0;white-space:nowrap}
.frist-achse .heute.links{transform:translateX(-100%);padding:.55rem .7rem 0 0}
.frist-achse .heute.links::before{left:auto;right:-1px}
@media (max-width:900px){
  .frist-achse{height:auto;display:grid;gap:1.2rem;padding-left:1.6rem}
  .frist-achse::before{left:4px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .frist-achse::after{display:none}
  .frist-achse>li,.frist-achse>li.r0,.frist-achse>li.r1,.frist-achse>li.rechts{position:relative;left:auto;top:auto;bottom:auto;width:auto;
    transform:none;text-align:left;padding:0}
  .frist-achse>li:not(.heute)::before,.frist-achse>li.r0::before,.frist-achse>li.r1::before{left:-1.6rem;right:auto;top:.25rem;bottom:auto}
  .frist-achse>li:not(.heute)::after{display:none}
  .frist-achse .heute,.frist-achse .heute.links{transform:none;padding:.2rem 0;border-top:1px dashed var(--gold);border-bottom:1px dashed var(--gold)}
  .frist-achse .heute::before{display:none}
}

/* 02.2 Daten: vier Quellen, ein Datensatz, eine Antwort mit Quelle */
.quellen{display:grid;grid-template-columns:minmax(0,1.15fr) 3.2rem minmax(0,1fr) 3.2rem minmax(0,.9fr);align-items:center;max-width:1120px}
.q-spalte>.eyebrow{display:block;margin-bottom:.8rem;color:var(--faint)}
.q-links{border-top:1px solid var(--line)}
.q-links li{display:grid;grid-template-columns:4.4rem minmax(0,1fr);gap:.6rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line)}
.q-links b{font-family:var(--mono);font-size:.72rem;font-weight:500;color:var(--fg)}
.q-links span{font-size:.92rem;color:var(--muted)}
.q-pfeil{position:relative;height:1px;background:var(--gold);margin:1.6rem .6rem 0}
.q-pfeil::after{content:"";position:absolute;right:-1px;top:-4px;border:4.5px solid transparent;border-left:6px solid var(--gold);border-right:0}
.q-satz{border:1px solid var(--gold);padding:1.1rem 1.2rem}
.q-satz>b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:400;margin-bottom:.4rem}
.q-satz dl>div{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding:.45rem 0}
.q-satz dt{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.q-satz dd{font-size:.92rem;color:var(--fg)}
.q-antwort{font-family:var(--display);font-size:1.45rem;line-height:1.25;color:var(--gold-hi);border-left:1px solid var(--gold);padding-left:1rem}
@media (max-width:860px){
  .quellen{grid-template-columns:1fr}
  .q-pfeil{width:1px;height:2.2rem;margin:.7rem 0 .9rem 1.2rem}
  .q-pfeil::after{right:auto;left:-4px;top:auto;bottom:-1px;border:4.5px solid transparent;border-top:6px solid var(--gold);border-bottom:0}
}

/* 02.3 Schalen einer sicheren Umgebung */
.schalen{max-width:860px}
.schale{position:relative;border:1px solid var(--line-hi);padding:2.7rem 1.4rem 1.4rem 2.2rem}
.schale.s2{border-color:var(--gold-line)}
.schale.s3{border-color:var(--gold)}
.s-name{position:absolute;top:.9rem;left:1.2rem;right:1.2rem;font-family:var(--mono);font-size:.68rem;color:var(--muted);letter-spacing:.03em}
.s-name b{font-weight:500;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;margin-right:.7rem}
.kern{background:var(--gold);color:var(--bg);padding:1.5rem 1.4rem;text-align:center}
.kern b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:400;line-height:1.1}
.kern span{display:block;font-family:var(--mono);font-size:.66rem;margin-top:.35rem}
@media (max-width:520px){.schale{padding:3.6rem .8rem .8rem 1rem}.s-name{left:.8rem}.s-name b{display:block}}

/* Agentische Werkbank: Arbeitsplaetze, ein Gateway, Modelle und Protokoll */
.wb{max-width:1000px}
.wb-plaetze{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.wb-plaetze>li{position:relative;display:grid;gap:.8rem;border:1px dashed var(--line-hi);padding:1rem}
.wb-plaetze>li::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:1.8rem;background:var(--gold)}
.wb-person{display:flex;align-items:center;gap:.5rem}
.wb-person svg{width:18px;height:18px;fill:var(--fg-soft)}
.wb-person b{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.06em;color:var(--fg-soft)}
.wb-agent{border:1px solid var(--gold);padding:.75rem .85rem}
.wb-agent b{display:block;font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--gold-hi);line-height:1.15}
.wb-agent span{display:block;font-size:.84rem;color:var(--muted);margin-top:.15rem}
.wb-gateway{position:relative;margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;align-items:baseline;justify-content:space-between;
  border:1px solid var(--gold);background:var(--gold-soft);padding:.9rem 1.1rem}
.wb-gateway b{font-family:var(--display);font-weight:400;font-size:1.5rem}
.wb-gateway span{font-family:var(--mono);font-size:.7rem;color:var(--fg-soft)}
.wb-gateway::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:1.8rem;background:var(--gold)}
.wb-unten{margin-top:1.8rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.wb-modell,.wb-protokoll{position:relative;border:1px solid var(--line-hi);padding:.85rem 1rem}
.wb-modell{grid-column:2}
.wb-protokoll{border-style:dashed;border-color:var(--gold-line)}
.wb-protokoll::before{content:"";position:absolute;left:50%;bottom:100%;height:1.8rem;border-left:1px dashed var(--gold)}
.wb-modell b,.wb-protokoll b{display:block;font-family:var(--display);font-weight:400;font-size:1.25rem}
.wb-modell span,.wb-protokoll span{display:block;font-size:.84rem;color:var(--muted);margin-top:.15rem}
.wb.kompakt .wb-agent span,.wb.kompakt .wb-unten span{display:none}
@media (max-width:760px){
  .wb-plaetze{grid-template-columns:1fr;gap:.8rem}
  .wb-plaetze>li{grid-template-columns:auto minmax(0,1fr);align-items:center}
  .wb-plaetze>li::after{display:none}
  .wb-plaetze>li:last-child::after{display:block}
  .wb-unten{grid-template-columns:1fr 1fr}
  .wb-modell{grid-column:1}
}

/* 02 Ausbaustufen: kleine Schemata, je Stufe etwas hoeher */
.stufen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:end}
.stufen>li{margin-bottom:calc(var(--h) * 1.3rem)}
.stufen .schema{display:block;border:1px solid var(--line);border-top-color:var(--gold);margin-bottom:1rem;aspect-ratio:3 / 2;padding:.5rem}
.stufen svg{display:block;width:100%;height:100%}
.stufen .pf{fill:var(--fg-soft)}
.stufen .ag{fill:var(--gold)}
.stufen .sy{fill:none;stroke:var(--line-hi)}
.stufen .sl{fill:none;stroke:var(--line-hi)}
.stufen .ln{fill:none;stroke:var(--fg-soft);stroke-width:1}
.stufen .lg{fill:none;stroke:var(--gold);stroke-width:1.2}
.stufen .gw{fill:var(--gold-soft);stroke:var(--gold)}
.stufen .no{font-family:var(--mono);font-size:.7rem;color:var(--gold)}
.stufen b{display:block;font-family:var(--display);font-weight:400;font-size:1.45rem;line-height:1.1;margin:.3rem 0 .45rem}
.stufen>li>span:last-child{display:block;font-size:.9rem;color:var(--muted);line-height:1.45}
@media (max-width:900px){.stufen{grid-template-columns:repeat(2,minmax(0,1fr))}.stufen>li{margin:0}}
@media (max-width:480px){.stufen{grid-template-columns:1fr}.stufen .schema{aspect-ratio:2 / 1}}

/* 03.1 Softwareentwicklung: Spezifikation, Bau in getrennten Arbeitsbereichen, Pruefung, Abnahme, Uebergabe */
.bahnen{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr);gap:2rem}
.b-feld{position:relative;display:flex;flex-direction:column;gap:.6rem;border-top:1px solid var(--line-hi);padding-top:1rem}
.b-feld:not(:last-child)::after{content:"";position:absolute;top:-1px;left:100%;width:2rem;height:1px;background:var(--gold)}
.b-feld>b{font-family:var(--display);font-weight:400;font-size:1.2rem;line-height:1.2}
.b-feld>span:not(.eyebrow){font-size:.86rem;color:var(--muted)}
.b-blatt{display:grid;gap:6px;width:6rem;border:1px solid var(--line-hi);padding:.8rem .7rem}
.b-blatt i{display:block;height:2px;background:var(--line-hi)}
.b-blatt i:nth-child(2){width:80%}.b-blatt i:nth-child(3){width:90%}.b-blatt i:nth-child(4){width:55%;background:var(--gold)}
.b-bau ol{display:grid;gap:.5rem}
.b-bau li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:.25rem .8rem;border:1px solid var(--line-hi);padding:.55rem .7rem}
.b-bau li b{font-family:var(--mono);font-size:.72rem;font-weight:500;color:var(--gold-hi)}
.b-bau li span{font-size:.8rem;color:var(--muted)}
.b-bau li i{grid-column:1 / -1;position:relative;height:3px;background:var(--line)}
.b-bau li i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--gold);transform-origin:left}
.b-tests{display:grid;grid-template-columns:repeat(8,10px);gap:3px}
.b-tests i{display:block;width:10px;height:10px;background:var(--ok)}
.b-feld>b.b-version{font-family:var(--mono);font-size:1.5rem;font-weight:500;color:var(--gold-hi)}
.b-ueber{border-top-color:var(--gold)}
@media (max-width:980px){
  .bahnen{grid-template-columns:1fr;gap:2.2rem}
  .b-feld:not(:last-child)::after{top:auto;bottom:-2.2rem;left:1rem;width:1px;height:2.2rem}
}

/* 03.2 Bauteil als Code */
.bauteil{display:grid;grid-template-columns:minmax(0,1.15fr) 3.6rem minmax(0,1fr);align-items:center}
.code{border:1px solid var(--line-hi);padding:1.1rem 1.2rem;min-width:0}
.code pre{margin-top:.8rem;font-family:var(--mono);font-size:.78rem;line-height:1.75;color:var(--fg-soft);overflow-x:auto;white-space:pre}
.code .k{color:var(--gold)}
.code .f{color:var(--gold-hi)}
.code .z{color:var(--fg)}
.code .s{color:var(--muted)}
.code-pfeil{position:relative;height:1px;background:var(--gold);margin:0 .7rem}
.code-pfeil::after{content:"";position:absolute;right:-1px;top:-4px;border:4.5px solid transparent;border-left:6px solid var(--gold);border-right:0}
.teil{display:grid;gap:1.4rem;justify-items:center}
.teil .halter{max-height:320px;width:auto;max-width:100%}
.halter{display:block;width:100%;max-width:330px;height:auto;overflow:visible}
.halter path{vector-effect:non-scaling-stroke;stroke-linejoin:round}
.halter .fl{stroke:var(--gold-hi);stroke-width:1}
.halter .hi,.halter .vo{fill:var(--bg)}
.halter .ob{fill:#1b1a17}
.halter .se{fill:#13141a}
.halter .lo{fill:var(--bg);stroke:var(--gold);stroke-width:1}
.pruef{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}
@media (max-width:860px){
  .bauteil{grid-template-columns:1fr}
  .code-pfeil{width:1px;height:2.2rem;margin:.8rem auto}
  .code-pfeil::after{right:auto;left:-4px;top:auto;bottom:-1px;border:4.5px solid transparent;border-top:6px solid var(--gold);border-bottom:0}
}

/* 03.3 Variantenfamilie */
.varianten{display:grid;grid-template-columns:minmax(0,1fr) 3.6rem minmax(0,1.3fr);align-items:center}
.v-tabelle>.eyebrow{display:block;margin-bottom:.6rem;color:var(--faint)}
.v-tabelle table{width:100%;border-collapse:collapse}
.v-tabelle th,.v-tabelle td{padding:.6rem .6rem .6rem 0;border-bottom:1px solid var(--line);text-align:left;font-family:var(--mono);font-size:.78rem}
.v-tabelle thead th{font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--line-hi)}
.v-tabelle tbody th{color:var(--gold-hi);font-weight:500}
.v-tabelle td{color:var(--fg-soft)}
.v-einheit{display:block;font-family:var(--mono);font-size:.62rem;color:var(--faint);margin-top:.6rem}
.v-teile{display:flex;align-items:flex-end;justify-content:space-around;gap:1rem}
.v-teile li{display:flex;flex-direction:column;align-items:center;gap:.7rem;width:calc(var(--s) * 11rem)}
.v-teile b{font-family:var(--mono);font-size:.72rem;font-weight:500;color:var(--gold-hi)}
@media (max-width:860px){
  .varianten{grid-template-columns:1fr}
  .varianten .code-pfeil{width:1px;height:2.2rem;margin:.8rem auto}
  .varianten .code-pfeil::after{right:auto;left:-4px;top:auto;bottom:-1px;border:4.5px solid transparent;border-top:6px solid var(--gold);border-bottom:0}
  .v-teile li{width:calc(var(--s) * 7rem)}
}

/* 03.4 Konstruktions-Pilot: zwei Wochen als Bahn */
.pilot{max-width:1000px}
.pilot-wochen{display:grid;grid-template-columns:1fr 1fr;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.pilot-wochen span{border-left:1px solid var(--line-hi);padding:0 0 .6rem .6rem}
.pilot-bahn{display:flex;border:1px solid var(--line-hi)}
.pilot-bahn li{flex:0 0 var(--w);display:flex;align-items:flex-end;min-height:5.6rem;padding:.9rem;border-right:1px solid var(--line-hi);
  background:linear-gradient(to right,var(--gold-soft),transparent)}
.pilot-bahn li:last-child{border-right:0}
.pilot-bahn li.tor{background:var(--gold)}
.pilot-bahn b{font-family:var(--display);font-weight:400;font-size:1.2rem;line-height:1.15}
.pilot-bahn li.tor b{color:var(--bg)}
.pilot + .grenze{margin-top:1.6rem}
@media (max-width:760px){
  .pilot-wochen{display:none}
  .pilot-bahn{flex-direction:column}
  .pilot-bahn li{flex-basis:auto;min-height:0;border-right:0;border-bottom:1px solid var(--line-hi)}
  .pilot-bahn li:last-child{border-bottom:0}
}

/* Unterabschnitt (Beispiel aus dem Labor) */
.laborfall{margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.unterkopf{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;margin-bottom:.8rem}
.unterkopf .eyebrow{display:block;margin-bottom:.8rem}
.unterkopf-text{color:var(--fg-soft);font-weight:300;max-width:42rem;margin-bottom:2rem}

/* KI-Managementsystem: Ampel gegen fuenf Achsen, Verlauf, Lebenslauf */
.ampel-achsen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:var(--spalt);align-items:start}
.aa-ampel{display:grid;gap:1rem;justify-items:start;border-right:1px solid var(--line);padding-right:var(--spalt)}
.ampel{display:grid;gap:.45rem;border:1px solid var(--line-hi);padding:.55rem}
.ampel i{display:block;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-hi)}
.ampel i.an{background:var(--ok);border-color:var(--ok)}
.aa-ampel p b{display:block;font-family:var(--display);font-weight:400;font-size:2rem;line-height:1;color:var(--ok)}
.aa-ampel p span{display:block;font-size:.92rem;color:var(--muted);margin-top:.3rem}
.aa-achsen>.eyebrow{display:block;margin-bottom:.4rem}
.achsen-balken li{display:grid;grid-template-columns:9.5rem minmax(0,1fr) 9rem;align-items:center;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.achsen-balken .achse{font-family:var(--display);font-size:1.3rem;line-height:1.1}
.achsen-balken i{display:block;height:6px;background:var(--line)}
.achsen-balken li.ok i{background:var(--ok)}
.achsen-balken li.auflage i{background:var(--gold)}
.achsen-balken li.offen i{background:repeating-linear-gradient(90deg,var(--warn) 0 7px,transparent 7px 14px)}
.achsen-balken li.offen .achse{color:var(--gold-hi)}
.aa-fazit{margin-top:1.2rem;font-family:var(--display);font-size:1.45rem;color:var(--gold)}
@media (max-width:860px){
  .ampel-achsen{grid-template-columns:1fr}
  .aa-ampel{grid-template-columns:auto minmax(0,1fr);align-items:center;border-right:0;padding:0 0 1.4rem;border-bottom:1px solid var(--line)}
  .aa-ampel .eyebrow{grid-column:1 / -1}
  .achsen-balken li{grid-template-columns:minmax(0,1fr) auto;gap:.4rem .8rem}
  .achsen-balken i{grid-column:1 / -1;grid-row:2}
}
.protokoll{max-width:1040px;border-top:1px solid var(--line-hi)}
.protokoll figcaption{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:1rem 0 .5rem}
.protokoll figcaption .mono{font-size:.64rem;color:var(--faint)}
.protokoll ol{position:relative}
.protokoll ol::before{content:"";position:absolute;left:3px;top:1.3rem;bottom:1.3rem;width:1px;background:var(--gold-line)}
.protokoll li{position:relative;display:grid;grid-template-columns:6.4rem 10.5rem minmax(0,1.1fr) minmax(0,1fr);gap:1rem;align-items:baseline;
  padding:.75rem 0 .75rem 1.5rem;border-bottom:1px solid var(--line)}
.protokoll li::before{content:"";position:absolute;left:0;top:1.1rem;width:7px;height:7px;background:var(--gold)}
.protokoll li.plan::before{background:var(--bg);border:1px solid var(--gold)}
.protokoll time{font-family:var(--mono);font-size:.72rem;color:var(--gold-hi)}
.protokoll .wer{font-family:var(--mono);font-size:.7rem;color:var(--muted);white-space:nowrap}
.protokoll b{font-weight:400;color:var(--fg)}
.protokoll .grund{font-size:.9rem;color:var(--muted);font-weight:300}
.protokoll li.plan b,.protokoll li.plan time{color:var(--muted)}
@media (max-width:760px){.protokoll li{grid-template-columns:auto minmax(0,1fr);gap:.15rem .9rem}.protokoll li b,.protokoll li .grund{grid-column:1 / -1}}
.zyklus{display:grid;grid-template-columns:3fr 3fr 2fr 1.4fr}
.zyklus>li{position:relative;padding:1.1rem 1.4rem 0 0;border-top:2px solid var(--gold-line)}
.zyklus>li:nth-child(2){border-top-color:var(--gold)}
.zyklus>li:last-child{border-top-style:dashed}
.zyklus>li::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;background:var(--bg);border:1px solid var(--gold);transform:rotate(45deg)}
.zyklus>li>b{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.zyklus ul{margin-top:.8rem;display:grid;gap:.5rem}
.zyklus ul li{position:relative;padding-left:1rem;font-family:var(--display);font-size:1.22rem;line-height:1.2;color:var(--fg)}
.zyklus ul li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border:1px solid var(--gold)}
@media (max-width:860px){.zyklus{grid-template-columns:1fr 1fr;row-gap:2rem}}
@media (max-width:480px){.zyklus{grid-template-columns:1fr}}

/* Agentische Werkbank: Dateien und Wissensseite */
.dateien{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.dateien li{display:grid;justify-items:start;align-content:start;gap:.35rem}
.dateien svg{width:50px;height:58px;margin-bottom:.5rem}
.dateien .blatt,.dateien .ecke{fill:none;stroke:var(--line-hi);stroke-width:1}
.dateien .innen *{fill:none;stroke:var(--muted);stroke-width:1}
.dateien .innen .v{stroke:var(--gold);stroke-width:1.4}
.dateien b{font-family:var(--mono);font-size:.85rem;font-weight:500;color:var(--gold-hi);letter-spacing:.04em}
.dateien span{font-size:.86rem;color:var(--muted);line-height:1.35}
@media (max-width:900px){.dateien{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1.6rem}}
@media (max-width:420px){.dateien{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wiki-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--spalt);align-items:start}
.wiki-raster .fluss{flex-direction:column}
.wiki-raster .fluss>li{padding:0 0 1.6rem 1.6rem}
.wiki-raster .fluss>li::before{position:absolute;left:4px;top:0;bottom:0;width:1px;height:auto;margin:0}
.wiki-raster .fluss>li:last-child::before{display:none}
.wiki-raster .fluss>li::after{top:.35rem;left:0}
.wiki{border:1px solid var(--line-hi);padding:1.3rem 1.4rem}
.wiki-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:end;border-bottom:1px solid var(--line-hi);padding-bottom:.9rem}
.wiki-kopf .eyebrow{grid-column:1 / -1}
.wiki-kopf b{font-family:var(--display);font-weight:400;font-size:1.55rem;line-height:1.1}
.wiki-kopf .mono{font-size:.66rem;color:var(--muted)}
.wiki-absatz{display:grid;gap:.45rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.wiki-absatz p{font-size:.95rem;color:var(--fg-soft);font-weight:300}
.quelle-tag{justify-self:start;font-family:var(--mono);font-size:.62rem;color:var(--gold);border:1px solid var(--gold-line);padding:.1rem .45rem}
.wiki-absatz.vorschlag{margin-top:.9rem;border:1px dashed var(--gold);background:var(--gold-soft);padding:.85rem .9rem}
@media (max-width:860px){.wiki-raster{grid-template-columns:1fr}}

/* Ueber uns: Dreieck der Arbeitsweise */
.modell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--spalt);align-items:center}
.triade{display:block;width:100%;max-width:540px;height:auto;overflow:visible}
.triade .kante{fill:var(--gold-soft);stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke}
.triade .ecke{fill:var(--gold)}
.triade .ecke-name{font-family:var(--display);font-size:36px;fill:var(--fg)}
.triade .kante-wort{font-family:var(--mono);font-size:19px;letter-spacing:.06em;fill:var(--gold-hi)}
.triade .mitte{font-family:var(--display);font-size:32px;fill:var(--gold)}
.modell .saeulen{grid-template-columns:1fr;gap:.6rem}
.modell .haltung{margin-top:2rem}
.modell .sockel{margin-top:1.8rem}
@media (max-width:900px){.modell{grid-template-columns:1fr}.triade{max-width:440px;margin:0 auto}}

/* Schulungen, Vortraege, Keynotes: Formate und Themen */
.formen-achse{position:relative;display:flex;justify-content:space-between;gap:1rem;margin-bottom:1.8rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--line-hi);font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.formen-achse::after{content:"";position:absolute;right:-1px;bottom:-5px;border:4.5px solid transparent;border-left:6px solid var(--line-hi);border-right:0}
.formen ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spalt)}
.formen .menge{display:flex;flex-wrap:wrap;align-content:flex-end;gap:6px;height:4.4rem;margin-bottom:1.1rem}
.formen .menge i{display:block;width:9px;height:9px;border-radius:50%;background:var(--fg-soft);opacity:.55}
.formen li:last-child .menge i{background:var(--gold);opacity:1}
.formen .tiefe{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.formen h3{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,2.6vw,2.3rem);line-height:1.05;margin:.35rem 0 .3rem}
.formen .wer{display:block;color:var(--fg);font-size:.98rem}
.formen p{color:var(--muted);font-weight:300;margin-top:.45rem;font-size:.95rem}
@media (max-width:860px){.formen ol{grid-template-columns:1fr;gap:2rem}.formen .menge{height:auto}.formen-achse{display:none}}
.themen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:0 var(--spalt)}
.themen>li{border-top:1px solid var(--line-hi);padding:1.3rem 0 1.7rem}
.themen h3{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.15;margin:.1rem 0 .5rem}
.themen .wer{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.themen p{color:var(--fg-soft);font-weight:300;margin-top:.6rem}
.feld-marke{display:inline-flex;gap:.5rem;margin-bottom:.8rem;border:1px solid var(--line-hi);padding:.18rem .5rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .2s,border-color .2s}
.feld-marke .no{color:var(--gold)}
.feld-marke:hover{color:var(--fg);border-color:var(--gold-line)}
.frist.lehre ul{margin-top:.9rem;display:grid;gap:.9rem}
.frist.lehre li{border-top:1px solid var(--line);padding-top:.8rem}
.frist.lehre li b{font-family:var(--display);font-size:1.5rem;color:var(--gold-hi)}
.frist.lehre li span{display:block;font-size:.88rem;color:var(--muted);margin-top:.2rem;font-weight:300}

/* ------------------------------------------------------------ Bewegung (nur mit JavaScript, nie bei reduzierter Bewegung) */
@keyframes auf{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .auf{animation:auf 1.1s var(--ease) both}
.js .hero .klein{animation-delay:.1s}
.js .hero .zeile{animation-delay:.22s}
.js .hero .zeile.gold{animation-delay:.38s}
.js .hero .lede{animation-delay:.56s}
.js .hero .actions{animation-delay:.68s}
.js .hero .ort{animation-delay:.8s}
.js .kopf .eyebrow.auf{animation-delay:.08s}
.js .kopf h1.auf{animation-delay:.18s}
.js .kopf .lede.auf{animation-delay:.32s}
.js .kopf .actions.auf{animation-delay:.44s}
.js .kopf-bild.auf{animation-delay:.4s}

/* Abschnitte steigen ein, wenn sie den Sichtbereich erreichen; Ablaeufe zeigen ihre Schritte nacheinander. */
.js .rise{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .9s var(--ease)}
.js .rise.in{opacity:1;transform:none}
.js .rise.staffel{opacity:1;transform:none}
.js .staffel>*{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms)}
.js .staffel.in>*{opacity:1;transform:none}
.js .rise.sofort,.js .rise.sofort.staffel>*{transition:none}
/* Wer erledigt die Arbeit: Zeile fuer Zeile */
.js .wer .zeile>*{opacity:0;transition:opacity .7s ease}
.js .wer.in .zeile>*{opacity:1}
.js .wer.in .zeile.z3>*{transition-delay:.45s}.js .wer.in .zeile.z4>*{transition-delay:.9s}
/* Die vergangene Zeit auf der Fristenachse und die Arbeitsbereiche der Agenten wachsen auf ihren Wert */
.js .frist-achse::after,.js .b-bau li i::after{transform:scaleX(0);transition:transform 1.4s var(--ease) .2s}
.js .frist-achse.in::after,.js .bahnen.in .b-bau li i::after{transform:none}
.js .bahnen .b-bau li:nth-child(2) i::after{transition-delay:.45s}.js .bahnen .b-bau li:nth-child(3) i::after{transition-delay:.7s}
/* Balken wachsen auf ihren Wert */
.js .vergleich .b i{transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease) .15s}
.js .vergleich.in .b i{transform:none}
.js .vergleich .b.neu i{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  .js .auf{animation:none}
  .js .rise,.js .staffel>*,.js .wer .zeile>*,.js .vergleich .b i,.js .zeilen .klappe>*,
  .js .frist-achse::after,.js .b-bau li i::after{opacity:1;transform:none;transition:none}
  .js #field{transition:none}
  .zeichen::before,.zeichen::after{transition:none}
}

/* ------------------------------------------------------------ Rechtsseiten (Impressum, Datenschutz, AGB) */
body.legal{padding:clamp(2rem,6vw,5rem) clamp(1.5rem,6vw,3rem)}
.doc{max-width:720px;margin:0 auto}
.back{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.back:hover{color:var(--gold);border-color:var(--gold)}
.doc h1{font-family:var(--display);font-weight:600;font-size:clamp(2rem,5vw,3rem);letter-spacing:.01em;margin:2.6rem 0 .5rem;line-height:1.1}
.doc h2{font-family:var(--display);font-weight:600;font-size:1.2rem;color:var(--fg);margin:2.4rem 0 .5rem;letter-spacing:.01em}
.doc h3{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--fg);margin:1.6rem 0 .4rem}
.doc p,.doc li{color:var(--fg-soft);font-weight:300;max-width:64ch}
.doc p{margin:.35rem 0}
.doc a{color:var(--gold-hi);text-decoration:none;border-bottom:1px solid var(--gold-line)}
.doc a:hover{border-color:var(--gold-hi)}
.doc a.back{border:none;color:var(--muted)}
.doc .stand{margin-top:1.8rem;font-size:.8rem;color:var(--faint)}
.doc ul,.doc ol{list-style:disc;padding-left:1.3rem}
.doc ol{list-style:decimal}