/* ==========================================================================
   InGlory · Leitstand (Studie, Mike 12.10.2026, zweiter Durchgang)
   --------------------------------------------------------------------------
   Aufbau Wert für Wert nach nohandslabs.com (skillui + Messung im Browser,
   1440 und 390 px, 12.10.2026): Raster 1440 mit 32 px Rand, Sektionen 128 px
   hoch gepolstert mit Haarlinie, Sektionsmarke „[02] name ——", H2 60/61 px
   bei −0,04 em, Flächen #0D0F12-Stufe mit 1-px-Linie, Eckwinkel in Signalfarbe,
   Ziffern in Doto. Farben bleiben unsere (Sumi, Rice, Label-Grau, Yuzu), in der
   Rangfolge der Referenz eingesetzt: Weiß für Aussagen, Grau für alles Zweite.
   13.10.2026 (Mike): Farben der Referenz als Standard („Giftgrün"), Texte
   kundenverständlich statt technisch, Pixelbild feiner, Text neben größerem
   Kasten vertikal mittig.
   Festgelegt 13.10.2026: Giftgrün, Space Grotesk, Porträt mit schrägem Schnitt.
   Pointe in Pixel Geist (kursiv, animiert). Keine Laborschalter mehr.
   ========================================================================== */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('schriften/space-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('schriften/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('schriften/jetbrains-mono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('schriften/jetbrains-mono-500.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('schriften/jetbrains-mono-600.woff2') format('woff2')}
@font-face{font-family:'Geist Pixel Square';font-style:normal;font-weight:400;font-display:swap;src:url('schriften/geist-pixel-square.woff2') format('woff2')}
@font-face{font-family:'Doto';font-style:normal;font-weight:900;font-display:swap;src:url('schriften/doto-900.woff2') format('woff2')}

:root{
  /* Farbe „Giftgrün" = Werte der Referenz (gemessen 12.10.2026), Standard seit Mike 13.10.2026:
     „näher an No Hands, auch von der Farbgebung … das schöne Giftgrün". */
  --void:#07080A;  --void-a:7,8,10;
  --panel:#0D0F12; --panel-a:13,15,18;
  --line:#1C2026;
  --fg:#E8EAED;    --fg-a:232,234,237;
  --dim:#7D848F;                   /* 5,0:1 auf Grund, 4,8:1 auf Fläche */
  --nr:#7D848F;                    /* Referenz dim/40 wäre zu schwach für Text */
  --sig:#C6FF3D;   --sig-a:198,255,61;
  --sig-hell:#D7FF7A; --sig-tief:#9FD12A;
  --err:#FF5F56;   --err-a:255,95,86;
  --rand-feld:#5A616B;             /* Rahmen von Eingabefeldern: 3,2:1 auf Grund, 3,1:1 auf Fläche (WCAG 1.4.11) */
  --display:'Space Grotesk','Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --dot:'Doto','JetBrains Mono',monospace;
  --sperr-h1:-.055em;
  --sperr-h2:-.04em;
  --sperr-h3:-.03em;
  --glut:0 0 22px rgba(var(--sig-a),.32),0 0 46px rgba(var(--sig-a),.16);
}
[hidden]{display:none !important}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;background:var(--void);color-scheme:dark;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Fokus und Sprungmarken nie unter Kopf oder Schnellkontakt-Leiste (WCAG 2.4.11, Prüfung 15.10.2026) */
html{scroll-padding-top:var(--kopf-hoehe,66px)}   /* Sprungziel hängt bündig unter dem Kopf (Mike 18.10.2026: „die Sektion muss sich sauber anhängen“) */
@media (max-width:1023px){html{scroll-padding-bottom:calc(57px + env(safe-area-inset-bottom,0px) + 12px)}}
body{margin:0;background:var(--void);color:var(--fg);font-family:var(--display);font-size:16px;line-height:1.5;overflow-x:clip}
h1,h2,h3,p,dl,dd,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
main p,main dd,main li{overflow-wrap:break-word}   /* lange Adressen in Projekttexten (schwebewerk.de/schlafberatung-zu-hause/) brechen statt überzulaufen */
a{color:inherit}
::selection{background:var(--sig);color:var(--void)}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
.sprung{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--sig);color:var(--void);padding:10px 16px;font-family:var(--mono);font-size:12px}
.sprung:focus{left:16px}

/* ---- Hilfsklassen ------------------------------------------------------------ */
.wrap{max-width:1440px;margin:0 auto;padding-left:20px;padding-right:20px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fg{color:var(--fg)}
.sig{color:var(--sig)}
.err{color:var(--err)}
.dim{color:var(--dim)}
.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-10{margin-top:40px}.mt-12{margin-top:48px}.mt-14{margin-top:56px}.mb-6{margin-bottom:24px}
.mw-md{max-width:448px}.mw-lg{max-width:512px}.mw-xl{max-width:576px}.mw-3xl{max-width:768px}.mw-4xl{max-width:896px}
.ab-sm,.ab-md,.ab-lg{display:none}
.ab-sm-inline{display:none}
@media (min-width:640px){.ab-sm{display:inline}.ab-sm-inline{display:inline}}
@media (min-width:768px){.wrap{padding-left:32px;padding-right:32px}.ab-md{display:inline}}
@media (min-width:1024px){.ab-lg{display:inline}}

/* Raster: einspaltig, ab 1024 px zwölf Spalten (lg:grid-cols-12) */
.raster-12{display:grid;gap:48px}
@media (min-width:1024px){
  .raster-12{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}   /* Mike 13.10.: Text neben größerem Kasten vertikal mittig */
  .sp-5{grid-column:span 5}.sp-6{grid-column:span 6}.sp-7{grid-column:span 7}
  .sp-5.start-8{grid-column:8 / span 5}
  .sp-6.start-7{grid-column:7 / span 6}
}
.raster-12 > *{min-width:0}

/* Blaupause: 96er-Raster mit 24er-Unterteilung (Referenz .blueprint) */
.raster-grund{background-image:
  linear-gradient(rgba(var(--fg-a),.043) 1px,transparent 0),linear-gradient(90deg,rgba(var(--fg-a),.043) 1px,transparent 0),
  linear-gradient(rgba(var(--fg-a),.02) 1px,transparent 0),linear-gradient(90deg,rgba(var(--fg-a),.02) 1px,transparent 0);
  background-position:-1px -1px;background-size:96px 96px,96px 96px,24px 24px,24px 24px}

/* Eckwinkel: oben links und unten rechts, 9 px, Signalfarbe (Referenz .ticks) */
.ecken{position:relative}
.ecken::before,.ecken::after{content:'';position:absolute;width:9px;height:9px;border-color:var(--sig);pointer-events:none;z-index:2}
.ecken::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.ecken::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}

/* ---- Typografie (Referenzwerte bei 1440 px) --------------------------------- */
.h1{margin-top:32px;font-weight:500;font-size:min(calc((100vw - 40px) / 5.05),96px);line-height:.9;letter-spacing:var(--sperr-h1);white-space:nowrap}   /* mobil füllt die längste Zeile die Inhaltsbreite (Mike 18.10.2026: „deutlich größer“) */
@media (min-width:768px){.h1{font-size:8.4vw}}
@media (min-width:1536px){.h1{font-size:124px}}
.h2{font-weight:500;font-size:36px;line-height:1.02;letter-spacing:var(--sperr-h2);text-wrap:balance}
@media (min-width:768px){.h2{font-size:60px}.h2-m{font-size:48px}}
/* schmale Spalte (5 von 12) ab 1024 px: „Ansprechpartner." passt bei 60 px erst ab 1440 px */
@media (min-width:1024px){.sp-5 > .h2:not(.h2-xl){font-size:min(60px,4.2vw)}}
.h2-xl{font-size:48px;line-height:.95;letter-spacing:-.05em}
@media (min-width:768px){.h2-xl{font-size:72px}}
h3{font-weight:500;font-size:24px;line-height:1.33;letter-spacing:var(--sperr-h3)}
.text{font-size:16px;line-height:1.625;color:var(--dim)}
.text-l{font-size:18px}
.kommentar,.notiz{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--dim)}
.notiz-mono{max-width:320px;font-family:var(--mono);font-size:12px;line-height:1.625;color:var(--dim)}
.fn{font-family:var(--mono);font-size:12px;color:var(--dim)}

/* Sektionsmarke: [02] name ———— (mono 11 px, Laufweite 0,16 em) */
.marke-sek{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-weight:400;font-size:11px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.marke-sek .linie{flex:1;height:1px;background:var(--line)}
h2.marke-sek{flex-wrap:nowrap}

/* Pointe: klar in Signalfarbe (Referenz), als Pixel oder als kursive Serif */
.pointe{font-style:normal;color:var(--sig)}
.pw-an{position:relative;display:inline-block}
.pw-an .pw-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pw-bild{display:inline-block;touch-action:pan-y}   /* Pixelpointe: echte Pixelschrift, kursiv über versetzte Reihen (Mike 13.10.2026) */


.block-cursor{display:inline-block;width:.14em;height:.72em;margin-left:.11em;margin-right:.08em;vertical-align:baseline;transform:translateY(.04em) skewX(-12.4deg);background:var(--sig)}   /* schräg wie die Pixel-Pointe (Neigung 0,22 je Reihe ≈ 12,4°, Mike 18.10.2026) */
.blink{display:inline-block;width:.3em;height:1.15em;vertical-align:-.22em;overflow:hidden;color:transparent;background:var(--sig)}   /* schlanker Block statt █ (Mike 18.10.2026: „deutlich schlanker“) */

/* ---- Knöpfe ------------------------------------------------------------------ */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:14px 20px;border:0;border-radius:0;-webkit-appearance:none;appearance:none;font-family:var(--mono);font-size:12px;line-height:1.5;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .16s ease-out}
.knopf:active{transform:scale(.97)}
.pfeil-r{display:inline-block;transition:transform .25s var(--ease)}
.knopf-sig{background:var(--sig);color:var(--void);font-weight:600}
.knopf-hell{background:var(--fg);color:var(--void);font-weight:600}
.knopf-rahmen{border:1px solid var(--line);background:var(--void);color:var(--fg)}
.knopf-k{min-height:40px;padding:10px 20px;letter-spacing:.12em}
@media (hover:hover) and (pointer:fine){
  /* ohne Skript (und bis leitstand.js steht) wie bisher: Farbe wechselt */
  html:not(.ls-bereit) .knopf-sig:hover{background:var(--fg)}
  html:not(.ls-bereit) .knopf-hell:hover{background:var(--sig)}
  html:not(.ls-bereit) .knopf-rahmen:hover{border-color:var(--fg)}
  .knopf:hover .pfeil-r{transform:translateX(4px)}
}
/* Pixelwelle (Mike 18.10.2026: „sehr generische Buttons … mit der Pixeloptik, wenn man mit dem Mauszeiger drübergeht“):
   leitstand.js legt beim ersten Überfahren ein Raster aus Feldern an (.px-welle), die diagonal von links unten nach rechts
   oben aufgehen (wie der Ausgang des Ladebilds) und beim Verlassen rückwärts verschwinden. Grüne Knöpfe füllen sich
   hell, Rahmenknöpfe hell mit dunkler Schrift, helle Knöpfe und [ kontakt ] grün. */
.knopf,.klammer{position:relative;isolation:isolate}
.px-welle{position:absolute;inset:-1px;z-index:-1;display:grid;overflow:hidden;pointer-events:none}
.px-welle i{display:block;opacity:0;background:var(--px,var(--fg));transition:opacity 0s linear calc((var(--n) - var(--i)) * 6ms)}
.px-an > .px-welle i{opacity:1;transition-delay:calc(var(--i) * 10ms)}
.knopf-sig,.knopf-rahmen{--px:var(--fg)}
.knopf-hell,.klammer{--px:var(--sig)}
/* Schrift kehrt sich gegen den Grund um (hell über dunkel, dunkel über den hellen Feldern), in jedem Moment der Welle lesbar */
.px-text{display:inline-flex;align-items:center;gap:inherit;mix-blend-mode:difference}
.knopf-rahmen.px-an{border-color:var(--fg)}
@media (prefers-reduced-motion:reduce){.px-welle i{transition:none !important}}


/* ---- Statusleiste ------------------------------------------------------------ */
.status{border-bottom:1px solid var(--line);background:var(--void);font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.status-innen{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:8px;padding-bottom:8px;white-space:nowrap;overflow:hidden}
.st{display:inline-block}
.st.ab-sm,.st.ab-md,.st.ab-lg{display:none}
@media (min-width:640px){.st.ab-sm{display:inline-block}}
@media (min-width:768px){.st.ab-md{display:inline-block}}
@media (min-width:1024px){.st.ab-lg{display:inline-block}}
.led{display:inline-block;width:6px;height:6px;margin-right:8px;vertical-align:1px;background:var(--sig);box-shadow:0 0 8px var(--sig)}
.uhr{font-variant-numeric:tabular-nums}

/* ---- Kopf (klebt, 80 % Grund mit Unschärfe wie Referenz) -------------------- */
.kopf{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:rgba(var(--void-a),.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.marke{display:block;flex:none}
.marke img{height:40px;width:auto}
.pfade{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px;line-height:1.5}
.pfad{padding:8px 12px;color:var(--dim);text-decoration:none;transition:color .2s ease}
.pfad.ist-aktiv{color:var(--sig)}
@media (hover:hover) and (pointer:fine){.pfad:hover{color:var(--fg)}.pfad.ist-aktiv:hover{color:var(--sig)}}
/* Kopfknöpfe alle 40 px hoch (Mike 20.10.2026: „alle die gleiche Höhe … der Close-Icon kleiner wie Kontakt nebendran“) */
.halt{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;background:none;border:1px solid var(--line);color:var(--dim);cursor:pointer;
  transition:color .2s ease,border-color .2s ease}
.halt::after{content:'';position:absolute;inset:-5px}
.halt svg{width:11px;height:11px}
.halt .ic-play{display:none}
.halt[aria-pressed="true"] .ic-pause{display:none}
.halt[aria-pressed="true"] .ic-play{display:block}
.halt[aria-pressed="true"]{color:var(--sig);border-color:rgba(var(--sig-a),.55)}
@media (hover:hover) and (pointer:fine){.halt:hover{color:var(--fg);border-color:var(--fg)}}
.klammer{display:inline-flex;align-items:center;height:40px;margin-left:8px;padding:0 14px;border:1px solid var(--sig);color:var(--sig);white-space:nowrap;text-decoration:none;transition:background-color .2s ease,color .2s ease}
@media (hover:hover) and (pointer:fine){html:not(.ls-bereit) .klammer:hover{background:var(--sig);color:var(--void)}}

/* ---- Hero -------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.sweep{position:absolute;left:0;right:0;top:0;height:96px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(var(--sig-a),.04),transparent);transform:translateY(-100%)}
.hero-raster{position:relative;display:grid;gap:40px;padding-top:56px;padding-bottom:0}
@media (min-width:768px){.hero-raster{padding-top:80px}}
@media (min-width:1024px){
  .hero-raster{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
  .hero-text{grid-column:span 6;padding-bottom:40px}
  .hero-bild{grid-column:span 6}
}
.hero-text{min-width:0}
.hero-lead{margin-top:40px;max-width:576px;font-size:18px;line-height:1.625;color:var(--dim)}
@media (min-width:768px){.hero-lead{font-size:20px}}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

.fig-kopf,.fig-fuss{position:absolute;left:0;right:0;display:flex;justify-content:space-between;gap:12px;padding:8px 12px;font-family:var(--mono);font-size:10.5px;line-height:1.5;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);z-index:1}
.fig-kopf{top:0;border-bottom:1px solid var(--line)}
.fig-fuss{bottom:0;border-top:1px solid var(--line)}
/* Hero-Porträt ohne Rahmen: groß, steht auf der Zahlenleiste (Mike 13.10.2026: „der Effekt knallt") */
.hero-bild{position:relative;margin:0;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end}
.portraet-buehne{position:relative;height:clamp(380px,62vh,560px);margin-right:-20px;touch-action:pan-y}
@media (min-width:768px){.portraet-buehne{margin-right:-32px}}
.portraet-ruhe{position:absolute;left:42%;bottom:0;height:97%;width:auto;max-width:92%;object-fit:contain;object-position:bottom;transform:translateX(-50%);filter:grayscale(1) contrast(1.1)}
@media (min-width:1024px){
  /* Mike 13.10.2026: Maßstab wie bei der ganzen Figur (so hoch wie der Bildschirm), aber an der Unterkante
     des ersten Bildschirms abgeschnitten: die Bühne endet bei 100 svh, dort beginnt die Zahlenleiste.
     Ist der Bildschirm höher als das Foto, steht das Foto weiter unten auf der Leiste. */
  .hero-raster{padding-top:24px}
  .hero .portraet-buehne{--bild-hoehe:clamp(640px,100svh,1080px);height:max(560px,calc(100svh - var(--oben,0px) - 24px));overflow:hidden}
  .hero .portraet-ruhe{bottom:auto;top:max(calc(var(--bild-hoehe) * .03),calc(100% - var(--bild-hoehe) * .97));height:calc(var(--bild-hoehe) * .97);object-position:top}
}
.portraet-buehne.pf-an .portraet-ruhe{visibility:hidden}
.pixelportraet{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-bild-label{position:absolute;right:0;top:8px;text-align:right;font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

.pixelfeld{position:absolute;inset:0;width:100%;height:100%;display:block}
.pf-rueck{position:absolute;inset:0;display:grid;place-items:center}
.pf-rueck svg{width:46%;height:auto;max-height:90%}
.pf-an .pf-rueck{display:none}
.pf-rueck rect{fill:var(--fg)}
.weg-zeichen .pf-rueck rect{fill:var(--sig)}

.hero-unten{position:relative;z-index:1;padding-bottom:56px}
@media (min-width:768px){.hero-unten{padding-bottom:80px}}
.zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);background:rgba(var(--void-a),.7)}
.zahlen > div{padding:20px;border-color:var(--line);border-style:solid;border-width:0}
.zahlen > div:nth-child(1){border-right-width:1px;border-bottom-width:1px}
.zahlen > div:nth-child(2){border-bottom-width:1px}
.zahlen > div:nth-child(3){border-right-width:1px}
@media (min-width:768px){
  .zahlen{grid-template-columns:repeat(4,minmax(0,1fr))}
  .zahlen > div:nth-child(n){border-bottom-width:0}
  .zahlen > div:nth-child(2){border-right-width:1px}
}
.zahlen dt{font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.zahlen dd{margin-top:8px;font-family:var(--dot);font-weight:900;font-size:48px;line-height:1;color:var(--fg)}
.zahlen dd.sig{color:var(--sig)}

/* ---- Laufband (Signalfläche, gerade, 40 s) ---------------------------------- */
.laufband{overflow:hidden;border-bottom:1px solid var(--line);background:var(--sig);color:var(--void);padding:12px 0}
.laufband-spur{display:flex;width:max-content;font-family:var(--mono);font-weight:600;font-size:13px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase}
.laufband-teil{display:flex;flex:none}
.laufband-teil span{padding-right:24px;white-space:nowrap}
.laufband-teil span::after{content:'///';padding-left:24px}

/* ---- Logos ------------------------------------------------------------------- */
.logos{border-bottom:1px solid var(--line);padding:56px 0}
.logo-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media (min-width:640px){.logo-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.logo-raster{grid-template-columns:repeat(6,minmax(0,1fr))}}   /* 17 Logos + Zähler = drei volle Reihen */
.logo-raster li.logo-mehr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(var(--sig-a),.04)}
.logo-mehr .dot-gross{font-size:40px;color:var(--sig)}
@media (min-width:768px){.logo-mehr .dot-gross{font-size:40px}}
.logo-raster li{display:grid;place-items:center;height:104px;padding:0 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.logo-raster img{width:auto;height:auto;max-height:34px;max-width:min(150px,80%);filter:brightness(0) invert(1);opacity:.6;transition:opacity .3s ease,filter .3s ease}
@media (hover:hover) and (pointer:fine){.logo-raster li:hover img{filter:none;opacity:1}}

/* ---- Sektion ------------------------------------------------------------------ */
.sek{border-bottom:1px solid var(--line);padding:96px 0}
@media (min-width:768px){.sek{padding:128px 0}}

/* Konsole: Fläche mit Kopfzeile (Referenz bg-panel, border-line, Kopf 11 px) */
.konsole{border:1px solid var(--line);background:var(--panel);font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--dim)}
@media (min-width:768px){.konsole{font-size:13.5px}}
.konsole-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:11px;line-height:1.5;color:var(--dim)}
.kopf-links{display:flex;align-items:center;gap:12px}
.kaesten{display:flex;gap:6px}
.kaesten i{width:8px;height:8px;background:var(--line)}
.kaesten i.an{background:var(--sig)}

/* Diff (Referenz: grid 36px 20px 1fr, px 8, py 3) */
.diff{padding:8px 0}
.diff-gruppe + .diff-gruppe{margin-top:8px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.z{display:grid;grid-template-columns:36px 20px minmax(0,1fr);padding:3px 8px;line-height:1.6}
.z > span:last-child{padding-right:12px}
.nr{text-align:right;color:var(--nr);font-variant-numeric:tabular-nums;user-select:none}
.vz{text-align:center}
.z-notiz{color:var(--dim)}
.z-weg{background:rgba(var(--err-a),.07);color:var(--err)}
.z-weg s{text-decoration-color:rgba(var(--err-a),.6)}
.z-neu{background:rgba(var(--sig-a),.07);color:var(--sig)}

/* ---- Arbeiten ----------------------------------------------------------------- */
.kopfzeile{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.legende{display:flex;flex-wrap:wrap;gap:8px 24px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.legende > span{display:inline-flex;align-items:center;gap:8px}
.q{display:inline-block;width:8px;height:8px}
.q-sig{background:var(--sig);box-shadow:0 0 10px var(--sig)}
.q-rahmen{border:1px solid var(--fg)}
.q-fg{background:rgba(var(--fg-a),.6)}

.karten-gross,.karten-klein{display:grid;gap:16px}
@media (min-width:768px){.karten-gross{grid-template-columns:repeat(2,minmax(0,1fr))}.karten-klein{grid-template-columns:repeat(3,minmax(0,1fr))}}
.karten-gross > li,.karten-klein > li{min-width:0}
.karte{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;padding:24px;border:1px solid var(--line);background:var(--panel);color:var(--fg);text-decoration:none;
  transition:border-color .2s ease}
@media (min-width:768px){.karte{padding:32px}}
.karte-g{min-height:440px;box-shadow:inset 0 2px 0 var(--sig)}
.karte-k{min-height:340px;background:rgba(var(--panel-a),.6)}
.karte-nr{position:absolute;top:16px;right:20px;font-family:var(--dot);font-weight:900;line-height:1;font-size:72px;color:var(--line);pointer-events:none;user-select:none}
.karte-g .karte-nr{color:rgba(var(--sig-a),.15)}   /* Referenz 128 px; hier 72 px, weil das Bild darunter beginnt */
.abzeichen{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid rgba(var(--fg-a),.3);font-family:var(--mono);
  font-size:10.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.abzeichen i{width:6px;height:6px;background:rgba(var(--fg-a),.6)}
.abzeichen-sig{color:var(--sig);border-color:rgba(var(--sig-a),.4);background:rgba(var(--sig-a),.1)}
.abzeichen-sig i{background:var(--sig);box-shadow:0 0 10px var(--sig)}
.karte-bild{position:relative;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center;margin-top:40px;border:1px solid var(--line)}
.karte-k .karte-bild{aspect-ratio:16/10;margin-top:36px}
.karte h3{margin-top:32px;font-size:30px;line-height:1.05;letter-spacing:-.035em}
@media (min-width:768px){.karte-g h3{font-size:clamp(30px,3.4vw,48px)}}   /* Referenz 48 px; zweispaltig ab 768 px passt „Badmanufaktur" erst ab 1024 px */
.karte-k h3{margin-top:28px;font-size:30px;line-height:1.1}
/* /projekte: drei Spalten ab 1024 px, dort passt „Smartphonepraxis“ bei 30 px erst ab 1280 px */
@media (min-width:1024px) and (max-width:1279px){.projekt-raster .karte-k h3{font-size:clamp(24px,2.35vw,30px)}}
@media (max-width:400px){.projekt-raster .karte-k h3{font-size:26px}}
/* Startseite: drei kleine Karten nebeneinander ab 768 px, „Badmanufaktur“ passt bei 30 px erst ab 1280 px */
@media (min-width:768px) and (max-width:1279px){.karten-klein .karte-k h3{font-size:clamp(22px,2.35vw,30px)}}
.unter{margin-top:8px;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--dim)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;margin-bottom:32px;font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase}
.tags li{padding:4px 8px;border:1px solid var(--line);color:var(--dim)}
.karte-fuss{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--dim)}
.karte-fuss .mehr{padding:4px 0;color:var(--fg);text-decoration:none;transition:color .2s ease}
@media (hover:hover) and (pointer:fine){
  .karte-g:hover{border-color:rgba(var(--sig-a),.5)}
  .karte-k:hover{border-color:rgba(var(--fg-a),.3)}
  .karte:hover .mehr,.weg .mehr:hover{color:var(--sig)}
}

.verzeichnis{border:1px solid var(--line);background:rgba(var(--void-a),.7)}
.verzeichnis li + li{border-top:1px solid var(--line)}
.verzeichnis a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nr mehr" "name name" "art art";gap:4px 16px;padding:16px 20px;text-decoration:none;
  transition:background-color .2s ease}
.v-nr{grid-area:nr;font-family:var(--mono);font-size:12px;color:var(--dim)}
.v-name{grid-area:name;font-size:20px;line-height:1.3;letter-spacing:-.02em;color:var(--fg)}
.v-art{grid-area:art;font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.v-mehr{grid-area:mehr;font-family:var(--mono);font-size:12px;color:var(--fg);white-space:nowrap;transition:color .2s ease}
@media (min-width:768px){
  .verzeichnis a{grid-template-columns:104px minmax(0,1fr) minmax(0,auto) auto;grid-template-areas:"nr name art mehr";align-items:center;gap:24px}
}
@media (hover:hover) and (pointer:fine){.verzeichnis a:hover{background:rgba(var(--fg-a),.03)}.verzeichnis a:hover .v-mehr{color:var(--sig)}}

/* ---- Drei Wege ---------------------------------------------------------------- */
.wege-raster{display:grid;gap:16px}
@media (min-width:768px){.wege-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wege-raster > li{min-width:0}
.weg{position:relative;display:flex;flex-direction:column;height:100%;padding:24px;border:1px solid var(--line);background:var(--panel)}
@media (min-width:768px){.weg{padding:32px}}
.weg-zeichen{position:relative;width:72px;height:72px;margin-bottom:28px}
.weg-zeichen .pf-rueck{place-items:start}
.weg-zeichen .pf-rueck svg{width:84%}
.weg h3{margin-top:24px}
.weg-text{margin-top:12px;font-size:15px;line-height:1.625;color:var(--dim)}



/* ---- Für wen (Aufbau der Referenz „the ratio": 8 zu 4) -------------------------------- */
.fuer-raster{display:grid;gap:16px}
@media (min-width:768px){.fuer-raster{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.fuer{display:flex;flex-direction:column;padding:24px;border:1px solid var(--line)}
@media (min-width:768px){.fuer{padding:32px}}
.fuer-klein{background:rgba(var(--fg-a),.03)}
.fuer h3{margin-top:20px;font-size:28px;line-height:1.15;letter-spacing:-.03em}
.fuer-text{margin-top:12px;max-width:620px;font-size:16px;line-height:1.625;color:var(--dim)}
.mehr-link{align-self:flex-start;margin-top:auto;padding:28px 0 4px;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--fg);text-decoration:none;transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.mehr-link:hover{color:var(--sig)}}

/* ---- Dein Anliegen: drei Bausteine auf einem Fundament (Mike 13.10.2026) -------------- */
.baustein-raster{display:grid;gap:16px}
@media (min-width:1024px){.baustein-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.baustein-raster > li{min-width:0}
.baustein h3{font-size:30px;line-height:1.1;letter-spacing:-.035em}
.zitat{margin-top:12px;font-size:19px;line-height:1.4;letter-spacing:-.015em;color:var(--fg)}
.baustein .weg-text{margin-top:16px}
.typisch{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line);font-size:14px;line-height:1.5;color:var(--dim)}
.typisch li{position:relative;padding:3px 0 3px 18px}
.typisch li::before{content:'';position:absolute;left:1px;top:.78em;width:5px;height:5px;background:var(--dim)}
.baustein .tags{margin-top:20px}
.fundament{border:1px solid var(--line);background:var(--panel)}
.fundament-kopf{padding:10px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fundament-zellen{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.fundament-zellen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.fundament-zellen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fundament-zellen > div{padding:18px 20px;border-color:var(--line);border-style:solid;border-width:0 0 1px}
@media (min-width:640px){.fundament-zellen > div:nth-child(odd){border-right-width:1px}.fundament-zellen > div:nth-child(n+3){border-bottom-width:0}}
@media (min-width:1024px){.fundament-zellen > div{border-bottom-width:0;border-right-width:1px}.fundament-zellen > div:last-child{border-right-width:0}}
@media (max-width:639px){.fundament-zellen > div:last-child{border-bottom-width:0}}
.fundament-zellen dt{font-size:18px;line-height:1.3;letter-spacing:-.02em;color:var(--fg)}
/* Häkchen im Pixelstil hinter jedem Punkt des Fundaments (Mike 19.10.2026: „ein häckchen im passenden stil dahinter das man
   versteht die sind immer beinhaltet“). Beim Eingang zeichnet es sich Spalte für Spalte von links (steps, kein Gleiten). */
:root{--haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7' shape-rendering='crispEdges' fill='%23C6FF3D'%3E%3Cpath d='M8 0h1v1H8zM7 1h2v1H7zM6 2h2v1H6zM0 3h1v1H0zM5 3h2v1H5zM0 4h2v1H0zM4 4h2v1H4zM1 5h4v1H1zM2 6h2v1H2z'/%3E%3C/svg%3E")}   /* Pixel-Häkchen 9 × 7, gezeichnet in 2-px-Stufen (18 × 14) */
.fundament-zellen > div{position:relative;padding-right:54px}   /* Platz für das Häkchen rechts */
.mega-seite .leitung li::after{content:'';flex:none;margin-left:auto;width:18px;height:14px;background:var(--haken) no-repeat center/100% 100%}   /* dasselbe im großen Menü */
/* Häkchen vertikal mittig im Feld (Mike 19.10.2026: „die häkchen vertikal zentriert“); im großen Fundament (/leistungen)
   mittig zum Pixelzeichen der Zeile, sonst stünde es mitten im langen Text */
.fundament-zellen > div::after{content:'';position:absolute;right:20px;top:calc(50% - 7px);width:18px;height:14px;
  background:var(--haken) no-repeat center/100% 100%;
  filter:drop-shadow(0 0 5px rgba(var(--sig-a),.45))}
@keyframes haken-zeichnen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@media (prefers-reduced-motion:no-preference){
  .ls-reveal .warten .fundament-zellen > div::after{clip-path:inset(0 100% 0 0)}
  .ls-reveal .rein .fundament-zellen > div::after{animation:haken-zeichnen .42s steps(9,end) .45s both}
  .ls-reveal .rein .fundament-zellen > div:nth-child(2)::after{animation-delay:.57s}
  .ls-reveal .rein .fundament-zellen > div:nth-child(3)::after{animation-delay:.69s}
  .ls-reveal .rein .fundament-zellen > div:nth-child(4)::after{animation-delay:.81s}
}
.fundament-zellen dd{margin-top:6px;font-size:14px;line-height:1.5;color:var(--dim)}

/* ---- Haltung (Aufbau der Referenz „runtime") ------------------------------------ */
.leitung{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--dim)}
.leitung li{display:flex;align-items:center;gap:12px}
/* Punkt links, Wert rechtsbündig am Rand der Box (Mike 19.10.2026: „das sieht mobil noch sehr bescheiden aus“). Passt der
   Wert nicht mehr hinter die Leitung, rückt er in die nächste Zeile, bleibt aber rechtsbündig. */
.leitung li{flex-wrap:wrap;row-gap:2px;white-space:nowrap}
.leitung li > span:last-child:not(.strich){margin-left:auto;white-space:normal;text-align:right}
/* Länder am Handy als Flaggen (Mike 19.10.2026: „Mobil nehmen wir für Für Unternehmen in Deutschland … die Länderflaggen“);
   der Text bleibt für Screenreader */
.laender .flaggen{display:none}
@media (max-width:639px){
  .laender .laender-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .laender .flaggen{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
  .laender .flaggen .wahl-zeichen{width:23px;height:16px}
}
.leitung li + li{margin-top:8px}
.leitung i{flex:none;width:6px;height:6px;background:var(--sig)}
.leitung .strich{flex:1;min-width:16px;border-bottom:1px dashed var(--line)}
.leitung .mensch{color:var(--fg)}
.leitung .mensch i{background:var(--fg)}
.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 18%}
.portrait-fuss{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--line);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
/* Steckbrief statt Porträt (Kimono-Foto raus, Mike 13.10.2026) */
.steckbrief-zahl{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:24px 20px 20px;border-bottom:1px solid var(--line)}
.dot-gross{font-family:var(--dot);font-weight:900;font-size:72px;line-height:1;color:var(--fg)}
@media (min-width:768px){.dot-gross{font-size:96px}}
.steckbrief-liste{padding:20px}
.bildnotiz{margin-top:12px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--dim)}

/* ---- Ablauf (Aufbau der Referenz „how we build") -------------------------------- */
/* Zwei Phasen über den vier Schritten (Mike 13.10.: „erst das Konzept, dann die Umsetzung") */
.phasen{display:none}
@media (min-width:1024px){
  .phasen{display:grid;grid-template-columns:1fr 1fr;margin-top:64px;font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .phasen span{margin:0 12px;padding:10px 0 0;border-top:1px solid var(--line);text-align:center}
  .phasen span:last-child{border-top-color:rgba(var(--sig-a),.45);color:var(--sig)}
  .phasen + .schritte{margin-top:32px}
}
.schritte{position:relative;display:grid;gap:16px;margin-top:64px}
/* Referenz: vier Spalten ab 768 px; dort ragt „Gestalten" aus 104 px Spalte, deshalb zwei Spalten bis 1024 px */
@media (min-width:768px){.schritte{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:80px}}
@media (min-width:1024px){.schritte{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}}
.schritte-linie{display:none}
@media (min-width:1024px){.schritte-linie{display:block;position:absolute;top:26px;left:12.5%;right:12.5%;height:1px;background:var(--line)}}
.paket{position:absolute;top:-2px;left:0;width:5px;height:5px;background:var(--sig);box-shadow:0 0 10px var(--sig)}
.schritt{position:relative;min-width:0}
@media (min-width:1024px){.schritt{padding:0 12px}}
.schritt-nr-zeile{display:flex;justify-content:flex-start}
@media (min-width:1024px){.schritt-nr-zeile{justify-content:center}}
.schritt-nr{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:53px;height:53px;border:1px solid var(--line);background:var(--void);
  font-family:var(--dot);font-weight:900;font-size:24px;line-height:1;color:var(--fg)}
.nr-pixel{display:none}
.schritt-an .schritt-nr{border-color:var(--sig);background:var(--sig);color:var(--void);box-shadow:0 0 30px -4px var(--sig)}
.schritt article{margin-top:20px;padding:24px;border:1px solid var(--line);background:rgba(var(--void-a),.7)}
@media (min-width:768px){.schritt article{height:calc(100% - 73px)}}
.schritt-an article{border-color:rgba(var(--sig-a),.6);background:rgba(var(--sig-a),.06)}
.schritt h3{margin-top:24px}
.schritt-text{margin-top:12px;font-size:15px;line-height:1.625;color:var(--dim)}
.liste{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line);font-size:14px;line-height:1.5;color:var(--dim)}
.liste li{position:relative;padding:3px 0 3px 18px}
.liste li::before{content:'';position:absolute;left:1px;top:.78em;width:5px;height:5px;background:var(--dim)}
.liste .erg{margin-top:6px;color:var(--fg)}
.liste .erg::before{background:var(--sig);box-shadow:0 0 8px var(--sig)}
.liste b{font-weight:500}
.schritt-pointe{margin-top:24px;padding-top:16px;border-top:1px solid rgba(var(--sig-a),.3);font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--sig)}
.leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border:1px solid var(--line);background:rgba(var(--void-a),.7);
  font-family:var(--mono);font-size:12px;line-height:1.5;text-decoration:none;transition:border-color .2s ease}
.leiste-ziel{color:var(--fg);transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.leiste:hover{border-color:rgba(var(--fg-a),.4)}.leiste:hover .leiste-ziel{color:var(--sig)}}

@property --strich{syntax:'<color>';inherits:true;initial-value:rgba(232,234,237,.38)}
/* ---- Karten-Stapel mobil (AUSSTATTUNG Nr. 22) -----------------------------------------------
   Mike 19.10.2026: „meine stagger karten … für die Bausteine“ und „Beim Ablauf sollte man sehen wo man grade steht also eine
   active animation hauptsächlich mobil“. leitstand.js setzt .stapel (Bausteine unter 1024 px, Ablauf unter 768 px), je Karte
   --stapel-top, --i, --n und die Höhe der höchsten Karte, und markiert die oberste mit .is-current. Ohne Skript: normales
   Raster. Keine Schatten (MOTION.md): Die Karten sind deckend, die Haarlinie trennt. */
@media (max-width:1023px){
  .baustein-raster.stapel > li{position:sticky;top:var(--stapel-top,76px)}
  /* Wie im Ablauf: kein Rahmen, der aufpoppt (Mike 20.10.2026: „der Effekt ist auch noch nicht korrigiert worden“), sondern
     die grüne Leitung über die Oberkante beim Heranfahren und der Eckwinkel, wenn die Karte andockt */
  .baustein-raster.stapel > li > .weg::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--sig);
    transform-origin:left center;transform:scaleX(var(--anflug,0));opacity:.9;pointer-events:none;transition:opacity .32s var(--ease),box-shadow .32s var(--ease)}
  .baustein-raster.stapel > li.is-fertig > .weg::before{opacity:.35}
  .baustein-raster.stapel > li.is-current > .weg::before{opacity:1;box-shadow:0 0 14px rgba(var(--sig-a),.55)}
  .baustein-raster.stapel > li > .weg::after{content:'';position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-right:1px solid var(--sig);border-bottom:1px solid var(--sig);
    transform:scale(0);transform-origin:right bottom;transition:transform .28s var(--ease);pointer-events:none}
  .baustein-raster.stapel > li.is-current > .weg::after{transform:none;transition-delay:.12s}
}
@media (max-width:767px){
  .schritte.stapel > .schritt{position:sticky;top:var(--stapel-top,76px);display:flex;flex-direction:column;padding:20px;border:1px solid var(--line);background:var(--panel);
    transition:--strich .32s var(--ease)}
  .schritte.stapel > .schritt > article{flex:1;margin-top:16px;padding:0;border:0;background:none}
  .schritte.stapel > .schritt > article.ecken::before,.schritte.stapel > .schritt > article.ecken::after{display:none}
  /* Die Kennzeile zeigt den Weg: vier Felder, gefüllt bis zu diesem Schritt; am aktiven leuchten sie grün */
  .schritte.stapel .schritt-nr-zeile{align-items:center;gap:16px}
  .schritte.stapel .schritt-nr-zeile::after{content:'';flex:1;height:3px;
    background:linear-gradient(90deg,var(--strich,rgba(var(--fg-a),.38)) calc((var(--i,0) + 1) / var(--n,4) * 100%),var(--line) 0);
    -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100% / var(--n,4) - 4px),transparent 0 calc(100% / var(--n,4)));
    mask:repeating-linear-gradient(90deg,#000 0 calc(100% / var(--n,4) - 4px),transparent 0 calc(100% / var(--n,4)))}
  /* Kein Rahmen, der aufpoppt (Mike 19.10.2026: „aktuell poppt sie einfach als rahmen außenrum“). Aktiv ist der Schritt, der
     oben andockt: seine Nummer füllt sich mit Pixeln (Mike 20.10.2026: „dass die sich auch mit der Pixeloptik füllen, anstatt
     jetzt einfach nur grün zu werden“), unten rechts setzt sich der Eckwinkel. Die grüne Leitung über der Karte ist seit
     20.10.2026 weg (Mike: „diese grüne Leiste … vielleicht sogar entfernen“): ein grüner Schwerpunkt je Bild (MOTION.md). */
  .schritte.stapel > .schritt::after{content:'';position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-right:1px solid var(--sig);border-bottom:1px solid var(--sig);
    transform:scale(0);transform-origin:right bottom;transition:transform .28s var(--ease);pointer-events:none}
  .schritte.stapel > .schritt.is-current::after{transform:none;transition-delay:.12s}
  .schritte.stapel .schritt-nr{border-color:var(--line);color:var(--fg);box-shadow:none;background:var(--void);
    transition:color 0s linear,border-color .32s var(--ease),box-shadow .32s var(--ease)}
  /* Pixel der Nummer: 8 × 8, diagonal von unten links nach oben rechts mit etwas Streuung (leitstand.js setzt --di/--do und
     den Ton je Pixel, drei Grüntöne fest verteilt wie die Pointe); rein in 0,36 s, raus rückwärts in 0,18 s */
  .schritte.stapel .nr-pixel{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);pointer-events:none}
  .schritte.stapel .nr-pixel i{background:var(--sig);opacity:0;transform:scale(.4);transition:opacity 0s linear var(--do,0s),transform 0s linear var(--do,0s)}
  .schritte.stapel .nr-pixel i.h{background:var(--sig-hell)}
  .schritte.stapel .nr-pixel i.t{background:var(--sig-tief)}
  .schritte.stapel > .schritt.is-current .nr-pixel i{opacity:1;transform:none;transition:opacity 0s linear var(--di,0s),transform .12s var(--ease) var(--di,0s)}
  .schritte.stapel .nr-ziffer{position:relative;z-index:1}
  .schritte.stapel .schritt .fn{transition:color .28s var(--ease)}
  .schritte.stapel > .schritt-an:not(.is-current) .fn.sig{color:var(--dim)}   /* Schritt 04 ist hier kein Dauer-Grün: grün ist, wo man gerade steht */
  .schritte.stapel > .schritt.is-current{--strich:var(--sig)}
  .schritte.stapel > .schritt.is-current .schritt-nr{border-color:var(--sig);color:var(--void);box-shadow:0 0 30px -4px var(--sig);transition:color 0s linear .38s,border-color .32s var(--ease),box-shadow .32s var(--ease)}
  .schritte.stapel > .schritt.is-current .fn{color:var(--sig)}
}

/* ---- Wort-Reveal (AUSSTATTUNG Nr. 18) ---------------------------------------------------------
   Mike 19.10.2026: „mein scroll text effekt der sichtbarer wird beim erreichen das ganze muss schön episch aber dennoch modern
   aussehen“. leitstand.js teilt Einleitungstexte in Wörter (.w, --w 0 … 1) und setzt je Absatz --pe (0 → 1; fertig, sobald die
   Oberkante 60 % der Fensterhöhe erreicht, ein Absatz in Leseposition ist also immer voll lesbar). Jedes Wort wird heller und
   steigt dabei ein Stück auf. Ohne Skript und bei reduzierter Bewegung steht der Text fertig da (--pe fehlt = 1). */
.woerter .w{display:inline-block;--t:clamp(0, (var(--pe,1) - var(--w,0) * .75) * 4.2, 1);opacity:calc(.14 + .86 * var(--t));transform:translateY(calc((1 - var(--t)) * .3em))}

/* ---- Kontakt mit Trichter (Startseite, Aufbau wie Coming-Soon) --------------------------------- */
.kontakt-raster{display:grid;gap:40px}
@media (min-width:1024px){
  .kontakt-raster{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:0;align-items:start}
  .kontakt-intro{grid-column:1 / span 5;grid-row:1}
  .kontakt-wege{grid-column:1 / span 5;grid-row:2;margin-top:40px}
  .kontakt-trichter{grid-column:6 / span 7;grid-row:1 / span 2;margin-top:calc(11px * 1.5 + 40px);align-self:stretch;display:flex;flex-direction:column}   /* oben auf Höhe der Überschrift, unten bündig mit den Wegen */
}
.kontakt-raster > *{min-width:0}

/* ---- Fragen -------------------------------------------------------------------- */
.faq details + details{border-top:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:40px minmax(0,1fr) 14px;align-items:center;gap:12px;min-height:60px;padding:14px 20px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq-nr{color:var(--sig);font-size:12px}
.faq-frage{font-family:var(--display);font-size:17px;line-height:1.4;letter-spacing:-.01em;color:var(--fg)}
.plus{position:relative;width:14px;height:14px}
.plus::before,.plus::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--dim);transition:transform .25s var(--ease)}
.plus::after{transform:rotate(90deg)}
.faq details[open] .plus::after{transform:rotate(0)}
@media (hover:hover) and (pointer:fine){.faq summary:hover .faq-frage{color:var(--sig)}}
.faq details p{padding:0 20px 20px 72px;max-width:66ch;font-family:var(--display);font-size:15px;line-height:1.65;color:var(--dim)}

/* ---- Kontakt (Aufbau der Referenz „waitlist") ------------------------------------ */
.unterstrichen{color:var(--fg);text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:4px;transition:text-decoration-color .2s ease}
@media (hover:hover) and (pointer:fine){.unterstrichen:hover{text-decoration-color:var(--sig)}}
.wege-liste{border-top:1px solid var(--line)}
.wege-liste > div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
@media (min-width:640px){.wege-liste > div{grid-template-columns:120px minmax(0,1fr);gap:16px}}
.wege-liste dt{padding-top:4px;font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.wege-liste dd{font-size:17px;line-height:1.5}
.wege-liste a{display:inline-block;padding:2px 0;text-decoration:none;transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.wege-liste a:hover{color:var(--sig)}}
.anfrage{font-size:14px}
.anfrage-innen{padding:16px}
@media (min-width:768px){.anfrage-innen{padding:20px}}
.anfrage-titel{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.25;letter-spacing:-.02em;color:var(--fg)}
.anfrage-text{margin-top:8px;font-family:var(--display);font-size:15px;line-height:1.6;color:var(--dim)}
.schritte-zeile{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;counter-reset:s;font-size:10.5px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase}
.schritte-zeile li{counter-increment:s;padding:4px 8px;border:1px solid var(--line);color:var(--dim)}
.schritte-zeile li::before{content:counter(s) ' ';color:var(--sig)}
.eingabe{margin-top:16px;padding:12px;border:1px solid var(--line);background:var(--void);color:var(--fg);font-size:13px}
.eingabe .blink{margin-left:4px}
.anfrage-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:12px}
.klein{font-size:11px;color:var(--dim)}

/* ---- Fuß ---------------------------------------------------------------------- */
.fuss{padding:56px 0 32px}
.fuss-oben{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:24px}
.fuss-links{display:flex;flex-wrap:wrap;gap:12px 24px;font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fuss-links a{padding:4px 0;text-decoration:none;transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.fuss-links a:hover{color:var(--fg)}}
.fuss-gross{margin-top:64px;overflow:hidden;color:var(--fg);user-select:none}
.fuss-gross-text{display:inline-block;font-weight:500;font-size:8.9vw;line-height:.85;letter-spacing:-.045em;white-space:nowrap;padding-bottom:.06em}
@media (min-width:1536px){.fuss-gross-text{font-size:132px}}
.fuss-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--dim)}
.fuss-zeile a{display:inline-block;padding:4px 0;color:var(--dim);text-decoration:none;transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.fuss-zeile a:hover{color:var(--fg)}}

/* ==========================================================================
   Unterseiten (Mike 14.10.2026: „dann kannst du dich an die Unterseiten machen")
   Gleiche Bausteine wie die Startseite; neu sind nur Navigation, Seitenkopf
   und die Bausteine, die es auf der Startseite nicht gibt.
   ========================================================================== */

/* ---- Navigation: Mega-Menü an /leistungen (ab 1024 px), großes Menü darunter ---- */
.ab-lg-flex{display:none}
@media (min-width:1024px){.ab-lg-flex{display:flex}}
.pfad-mega{align-items:center}
.mega-auf{display:grid;place-items:center;width:28px;height:34px;margin-left:-8px;padding:0;background:none;border:0;color:var(--dim);cursor:pointer;transition:color .2s ease}
.mega-auf svg{width:10px;height:10px;transition:transform .25s var(--ease)}
.mega-auf[aria-expanded="true"]{color:var(--sig)}
.mega-auf[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.mega-auf:hover{color:var(--fg)}}
.mega{position:absolute;left:0;right:0;top:100%;border-bottom:1px solid var(--line);background:var(--void);
  visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .18s ease-in,transform .18s ease-in,visibility 0s linear .18s}
.pfad-mega.ist-offen .mega{visibility:visible;opacity:1;transform:none;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s}
.mega-innen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:32px;padding-top:32px;padding-bottom:32px;font-family:var(--display)}
.mega-titel{margin-top:12px;font-weight:500;font-size:28px;line-height:1.1;letter-spacing:-.035em;color:var(--fg)}
.mega-text{margin:12px 0 24px;max-width:340px;font-size:15px;line-height:1.6;color:var(--dim)}
.mega-liste li + li{margin-top:8px}
.mega-eintrag{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--line);background:var(--panel);text-decoration:none;
  transition:border-color .2s ease}
.mega-nr{font-family:var(--dot);font-weight:900;font-size:28px;line-height:1;color:var(--sig)}
.mega-kern strong{display:block;font-weight:500;font-size:18px;line-height:1.3;letter-spacing:-.02em;color:var(--fg)}
.mega-kern span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--dim)}
.mega-eintrag .pfeil-r{font-family:var(--mono);color:var(--dim)}
.mega-eintrag[aria-current="page"]{border-color:rgba(var(--sig-a),.5)}
@media (hover:hover) and (pointer:fine){.mega-eintrag:hover{border-color:rgba(var(--sig-a),.5)}.mega-eintrag:hover .pfeil-r{transform:translateX(4px);color:var(--sig)}}
.mega-seite{padding:20px;border:1px solid var(--line);background:rgba(var(--fg-a),.02)}

.menue-knopf{display:inline-flex;align-items:center;gap:10px;height:40px;margin-left:8px;padding:0 12px;border:1px solid var(--line);background:none;
  font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);text-decoration:none;cursor:pointer}
.menue-striche{position:relative;width:14px;height:8px}
.menue-striche i{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .25s var(--ease)}
.menue-striche i:first-child{top:0}.menue-striche i:last-child{bottom:0}
.menue-knopf[aria-expanded="true"]{border-color:var(--sig);color:var(--sig)}
.menue-knopf[aria-expanded="true"] .menue-striche i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menue-knopf[aria-expanded="true"] .menue-striche i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:639px){.menue-wort{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.menue-knopf{width:40px;justify-content:center;padding:0}}
@media (min-width:1024px){.menue-knopf{display:none}}
.menue{position:fixed;left:0;right:0;top:var(--menue-oben,64px);bottom:0;z-index:49;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--void)}
/* Öffnen (Mike 20.10.2026: „Menüpunkte einfliegen lassen oder irgendwas mit Pixel“, 21.10.2026 Variante „raster“):
   leitstand.js baut den Grund als Pixelvorhang aus 32er-Pixeln auf, saubere Diagonale vom Menüknopf aus (.vorhang,
   0,42 s), die Einträge fliegen vom Menüknopf her ein, gestaffelt 0,1 s in höchstens vier Stufen; Schließen 0,18 s
   beschleunigend (MOTION.md) */
.menue.vorhang{background:transparent}
.menue.zu{opacity:0;transition:opacity .18s cubic-bezier(.55,0,1,.45)}
.menue-pixel{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:none}
.menue.vorhang .menue-pixel{display:block}
.menue-innen{position:relative;z-index:1;padding-top:24px;padding-bottom:40px}
.menue-innen > .fn,.menue-liste > li,.menue-fuss{opacity:0;transform:translateX(24px)}
.menue.offen .menue-innen > .fn,.menue.offen .menue-liste > li,.menue.offen .menue-fuss{opacity:1;transform:none;
  transition:opacity .7s var(--ease) calc(var(--d0,0s) + var(--d,0s)),transform .7s var(--ease) calc(var(--d0,0s) + var(--d,0s))}
.menue-liste > li:nth-child(2){--d:.1s}
.menue-liste > li:nth-child(3){--d:.2s}
.menue-liste > li:nth-child(n+4),.menue-fuss{--d:.3s}
@media (prefers-reduced-motion:reduce){.menue-innen > .fn,.menue-liste > li,.menue-fuss{opacity:1;transform:none;transition:none !important}.menue.zu{transition:none}}
.menue-liste{margin-top:12px;border-top:1px solid var(--line)}
.menue-liste > li{border-bottom:1px solid var(--line)}
.menue-liste > li > a{display:flex;align-items:baseline;gap:16px;padding:14px 0;font-weight:500;font-size:34px;line-height:1.1;letter-spacing:-.04em;color:var(--fg);text-decoration:none}
.menue-liste a[aria-current="page"]{color:var(--sig)}
.menue-nr{flex:none;width:24px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.1em;color:var(--sig)}
.menue-unter{padding:0 0 12px 40px}
.menue-unter a{display:block;padding:8px 0;font-size:18px;line-height:1.4;letter-spacing:-.01em;color:var(--dim);text-decoration:none}
.menue-unter .sig{font-family:var(--mono);font-size:11px;margin-right:6px}
.menue-fuss{margin-top:32px}
.menue-fuss .knopf{width:100%}
.menue-kontakt{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px;font-family:var(--mono);font-size:13px}
.menue-kontakt a{padding:6px 0;color:var(--dim);text-decoration:none}
html.menue-offen{overflow:hidden}

/* ---- Brotkrumen ---------------------------------------------------------------- */
.krume{border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.krume ol{display:flex;flex-wrap:wrap;gap:4px 0;padding:10px 0}
.krume li + li::before{content:'/';margin:0 10px;color:var(--line)}
.krume a{display:inline-block;padding:4px 0;text-decoration:none;transition:color .2s ease}
.krume [aria-current]{color:var(--fg)}
@media (hover:hover) and (pointer:fine){.krume a:hover{color:var(--sig)}}

/* ---- Seitenkopf der Unterseiten -------------------------------------------------- */
.seitenkopf{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.seitenkopf-raster{position:relative;display:grid;gap:48px;padding-top:64px;padding-bottom:80px}
@media (min-width:768px){.seitenkopf-raster{padding-top:96px;padding-bottom:112px}}
@media (min-width:1024px){
  .seitenkopf-raster{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
  .seitenkopf-text{grid-column:span 7}.seitenkopf-bild{grid-column:9 / span 4}
  .seitenkopf-bild.breit{grid-column:8 / span 5}
}
.seitenkopf-text,.seitenkopf-bild{min-width:0}
.h1-s{margin-top:24px;font-weight:500;font-size:12vw;line-height:.92;letter-spacing:var(--sperr-h1);text-wrap:balance}
@media (min-width:768px){.h1-s{font-size:7vw}}
@media (min-width:1536px){.h1-s{font-size:104px}}
.h1-s.lang{font-size:10vw}
@media (min-width:768px){.h1-s.lang{font-size:5.6vw}}
@media (min-width:1536px){.h1-s.lang{font-size:84px}}
.seitenkopf .zitat{margin-top:28px;font-size:22px}
.seitenkopf .hero-lead{margin-top:28px}
.seitenkopf-bild .weg-zeichen{width:min(280px,60vw);height:min(280px,60vw);margin:0 auto}
.seitenkopf .zahlen{margin-top:0}
.seitenkopf-unten{position:relative;padding-bottom:56px}
@media (min-width:768px){.seitenkopf-unten{padding-bottom:80px}}

/* Plan-Konsole im Seitenkopf: Name · Zweck · Zustand */
.plan{padding:6px 0}
.plan li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 16px}
.plan li + li{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.plan-name{color:var(--fg)}
.plan-zweck{grid-column:1;font-size:12px;color:var(--dim)}
.plan-zustand{grid-row:1 / span 2;grid-column:2;align-self:center;padding:2px 8px;border:1px solid rgba(var(--sig-a),.4);background:rgba(var(--sig-a),.08);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sig)}
.plan-zustand.test{border-color:var(--line);background:none;color:var(--dim)}
.konsole-fuss{padding:10px 16px;border-top:1px solid var(--line);font-size:11px;line-height:1.5;color:var(--dim)}

/* ---- Leistungszellen (Bausteinkatalog: Rahmenblock mit Symbolkopf) ---------------- */
.zellen{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);background:var(--panel)}
@media (min-width:768px){.zellen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.zellen-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.zelle{position:relative;display:flex;flex-direction:column;min-width:0;padding:24px;border-color:var(--line);border-style:solid;border-width:0 0 1px}
@media (min-width:768px){.zelle{padding:32px}}
.zelle-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px}
.zelle .weg-zeichen{width:48px;height:48px;margin:0}
.zelle .fn{font-size:11px}
.zelle h3{margin-top:24px}
.zelle-text{margin-top:10px;font-size:15px;line-height:1.625;color:var(--dim)}
.zelle .liste{margin-top:auto;padding-top:16px}
.zelle .zelle-text + .liste{margin-top:20px}

/* Ränder der Zellen: innen eine Linie, außen der Rahmen */
@media (max-width:767px){.zellen > .zelle:last-child{border-bottom-width:0}}
@media (min-width:768px) and (max-width:1023px){
  .zellen > .zelle:nth-child(odd){border-right-width:1px}
  .zellen > .zelle:nth-last-child(-n+2):nth-child(odd),.zellen > .zelle:last-child{border-bottom-width:0}
}
@media (min-width:1024px){
  .zellen:not(.zellen-3) > .zelle:nth-child(odd){border-right-width:1px}
  .zellen:not(.zellen-3) > .zelle:nth-last-child(-n+2):nth-child(odd),.zellen:not(.zellen-3) > .zelle:last-child{border-bottom-width:0}
  .zellen-3 > .zelle:not(:nth-child(3n)){border-right-width:1px}
  .zellen-3 > .zelle:nth-last-child(-n+3):nth-child(3n+1),.zellen-3 > .zelle:nth-last-child(-n+3):nth-child(3n+1) ~ .zelle{border-bottom-width:0}
}

/* ---- Reiter (Neukunden | Fachkräfte) ----------------------------------------------- */
.reiter-leiste{display:flex;gap:0;border:1px solid var(--line);border-bottom:0;width:max-content;max-width:100%}
.reiter-knopf{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;border:0;border-right:1px solid var(--line);background:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);cursor:pointer;transition:color .2s ease,background-color .2s ease}
.reiter-knopf:last-child{border-right:0}
.reiter-knopf i{width:6px;height:6px;background:var(--line);transition:background-color .2s ease,box-shadow .2s ease}
.reiter-knopf[aria-selected="true"]{background:var(--panel);color:var(--fg)}
.reiter-knopf[aria-selected="true"] i{background:var(--sig);box-shadow:0 0 8px var(--sig)}
@media (hover:hover) and (pointer:fine){.reiter-knopf:hover{color:var(--fg)}}
.reiter-titel{padding:16px 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ls-reiter .reiter-titel{display:none}

/* ---- Projekte: Filter, Karten mit Logo ------------------------------------------------ */
.filter-leiste{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.filter-leiste::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;border:1px solid var(--line);background:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);cursor:pointer;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.chip b{font-weight:400;color:var(--fg)}
.chip[aria-pressed="true"]{border-color:rgba(var(--sig-a),.55);background:rgba(var(--sig-a),.08);color:var(--sig)}
.chip[aria-pressed="true"] b{color:var(--sig)}
@media (hover:hover) and (pointer:fine){.chip:hover{color:var(--fg);border-color:rgba(var(--fg-a),.3)}}
.chip-ohne-js{display:none}
.projekt-raster{display:grid;gap:16px}
@media (min-width:768px){.projekt-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.projekt-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.projekt-raster > li{min-width:0}
.projekt-raster > li.gefiltert{display:none}
.projekt-raster > li.frisch{animation:frisch .5s var(--ease) both}
@keyframes frisch{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.karte-k .karte-logo{position:absolute;top:22px;right:20px;height:26px;width:auto;max-width:110px;object-fit:contain;filter:brightness(0) invert(1);opacity:.55}
.leer-hinweis{padding:24px;border:1px dashed var(--line);font-family:var(--mono);font-size:12px;color:var(--dim)}

/* ---- Fallstudie: Geräterahmen mit der echten Seite -------------------------------------- */
.geraete{display:grid;gap:16px;align-items:stretch}
@media (min-width:1024px){.geraete{grid-template-columns:minmax(0,9fr) minmax(0,3fr)}}
.geraet{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--panel)}
.geraet-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--dim)}
.geraet-kopf .adresse{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.geraete > *{min-width:0}
.geraet-kopf .kopf-links{min-width:0}
.geraet-fenster{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--void)}
.geraet-handy .geraet-fenster{aspect-ratio:9/17}
.geraet-fenster img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;will-change:transform}
.geraet-handy{display:none}
@media (min-width:1024px){.geraet-handy{display:flex}.geraet-handy .geraet-fenster{flex:1;aspect-ratio:auto}}
.geraet-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--dim)}
.geraet-fuss button,.geraet-fuss a{padding:6px 0;background:none;border:0;font:inherit;color:var(--fg);text-decoration:none;cursor:pointer;transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.geraet-fuss button:hover,.geraet-fuss a:hover{color:var(--sig)}}
.ansicht{width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);background:var(--panel);color:var(--fg)}
.ansicht::backdrop{background:rgba(var(--void-a),.86)}
.ansicht-kopf{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel);font-family:var(--mono);font-size:11px;color:var(--dim)}
.ansicht-kopf button{min-height:40px;padding:8px 12px;border:1px solid var(--line);background:none;font:inherit;color:var(--fg);cursor:pointer}
.ansicht-reiter{display:flex;gap:8px}
.ansicht-reiter button[aria-pressed="true"]{border-color:rgba(var(--sig-a),.55);color:var(--sig)}
.ansicht-bild{display:block;margin:0 auto}
.ansicht-bild.handy{width:390px;max-width:100%}

.fakten > div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 16px}
@media (min-width:480px){.fakten > div{grid-template-columns:120px minmax(0,1fr);gap:12px}}
.fakten > div + div{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.fakten dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fakten dd{color:var(--fg)}
.fakten a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.kunden-logo{height:40px;width:auto;max-width:180px;object-fit:contain;filter:brightness(0) invert(1);opacity:.75}
.text-gross{font-size:24px;line-height:1.4;letter-spacing:-.02em;color:var(--fg);text-wrap:pretty}
@media (min-width:768px){.text-gross{font-size:30px}}
.absatz + .absatz{margin-top:16px}
.gewerke li{display:flex;align-items:center;gap:12px;padding:10px 16px}
.gewerke li + li{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.gewerke .haken{flex:none;width:14px;height:14px;display:grid;place-items:center;border:1px solid rgba(var(--sig-a),.6);color:var(--sig);font-size:10px;line-height:1}
.gewerke .gruppe{margin-left:auto;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.drucke{display:grid;gap:16px}
@media (min-width:768px){.drucke{grid-template-columns:repeat(3,minmax(0,1fr))}}
.drucke figure{border:1px solid var(--line);background:var(--panel)}
.drucke img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;padding:24px;background:rgba(var(--fg-a),.02)}
.drucke figcaption{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--dim)}
.weiter-nav{display:grid;gap:16px}
@media (min-width:768px){.weiter-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
.weiter-nav a{display:flex;flex-direction:column;gap:6px;padding:20px 24px;border:1px solid var(--line);background:var(--panel);text-decoration:none;transition:border-color .2s ease}
.weiter-nav a:last-child{text-align:right}
.weiter-nav .fn{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.weiter-nav strong{font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.03em}
@media (hover:hover) and (pointer:fine){.weiter-nav a:hover{border-color:rgba(var(--sig-a),.5)}}

/* ---- Ablauf: zwei Phasen, Beispiel-Zeitplan --------------------------------------------- */
.phasen-gross{display:grid;gap:16px}
@media (min-width:1024px){.phasen-gross{grid-template-columns:repeat(2,minmax(0,1fr))}}
.phase{display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);background:var(--panel)}
@media (min-width:768px){.phase{padding:32px}}
.phase-zwei{border-color:rgba(var(--sig-a),.45);background:rgba(var(--sig-a),.04)}
.phase-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.phase .dot-gross{font-size:64px}
.phase h3{margin-top:20px;font-size:30px;line-height:1.1;letter-spacing:-.035em}
.phase .liste{margin-top:24px}
.zeitplan{border:1px solid var(--line);background:var(--panel);font-family:var(--mono);font-size:12px;color:var(--dim)}
.zeitplan-skala,.zeitplan-zeile{display:grid;grid-template-columns:minmax(120px,2fr) minmax(0,9fr);align-items:center}
.zeitplan-skala{border-bottom:1px solid var(--line);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.zeitplan-skala > span{padding:10px 16px}
.zeitplan-wochen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding:10px 16px 10px 0}
.zeitplan-wochen span{text-align:left}
.zeitplan-zeile{padding:6px 0}
.zeitplan-zeile + .zeitplan-zeile{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.zeitplan-name{padding:8px 16px;color:var(--fg)}
.zeitplan-spur{position:relative;height:24px;margin-right:16px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/12 - 1px),rgba(var(--fg-a),.05) calc(100%/12 - 1px) calc(100%/12))}
.zeitplan-balken{position:absolute;top:4px;bottom:4px;left:calc(var(--von) / 12 * 100%);width:calc((var(--bis) - var(--von)) / 12 * 100%);background:rgba(var(--fg-a),.18);transform-origin:left center}
.zeitplan-balken.sig{background:var(--sig);box-shadow:0 0 14px -2px var(--sig)}
.zeitplan-balken.offen{background:repeating-linear-gradient(90deg,rgba(var(--sig-a),.55) 0 6px,transparent 6px 10px)}
@media (prefers-reduced-motion:no-preference){
  .ls-reveal .zeitplan.warten .zeitplan-balken{transform:scaleX(0)}
  .ls-reveal .zeitplan.rein .zeitplan-balken{transform:none;transition:transform .9s var(--ease)}
  .ls-reveal .zeitplan.rein .zeitplan-zeile:nth-child(3) .zeitplan-balken{transition-delay:.1s}
  .ls-reveal .zeitplan.rein .zeitplan-zeile:nth-child(4) .zeitplan-balken{transition-delay:.2s}
  .ls-reveal .zeitplan.rein .zeitplan-zeile:nth-child(5) .zeitplan-balken{transition-delay:.3s}
}
.zwei-listen{display:grid;gap:16px}
@media (min-width:768px){.zwei-listen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zwei-listen .konsole{display:flex;flex-direction:column}
.zwei-listen .liste{margin:0;padding:16px 20px 20px;border-top:0;font-family:var(--display);font-size:15px}

/* ---- Studio ------------------------------------------------------------------------------ */
.studio-buehne{position:relative;height:clamp(420px,62vh,600px);margin:0;border:1px solid var(--line);background:var(--panel);touch-action:pan-y;overflow:hidden}
@media (min-width:768px){.studio-buehne{margin-right:0}}
.fakten-wege{border-top:0}
.fakten-wege > div{padding:14px 16px}
.fakten-wege > div:last-child{border-bottom:0}
.fakten-wege dd{font-family:var(--display)}
.grundsatz-nr{font-family:var(--dot);font-weight:900;font-size:40px;line-height:1;color:var(--sig)}

/* ---- Insights ---------------------------------------------------------------------------- */
.artikel-liste{display:grid;gap:16px}
@media (min-width:1024px){.artikel-liste{grid-template-columns:repeat(3,minmax(0,1fr))}}
.artikel-liste > li{min-width:0}
.artikel-karte{display:flex;flex-direction:column;height:100%;padding:24px;border:1px solid var(--line);background:var(--panel);color:var(--fg);text-decoration:none;transition:border-color .2s ease}
@media (min-width:768px){.artikel-karte{padding:32px}}
.artikel-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.artikel-meta .sig{letter-spacing:.12em}
.artikel-karte h3{margin-top:24px;font-size:26px;line-height:1.15;letter-spacing:-.03em}
.artikel-karte p{margin-top:12px;font-size:15px;line-height:1.625;color:var(--dim)}
.artikel-karte .karte-fuss{margin-top:auto;padding-top:16px}
.artikel-karte .weg-zeichen{width:56px;height:56px;margin:28px 0 0}
@media (hover:hover) and (pointer:fine){.artikel-karte:hover{border-color:rgba(var(--sig-a),.5)}.artikel-karte:hover .mehr{color:var(--sig)}}
.artikel{max-width:720px}
.h1-s.artikel-titel{font-size:9vw}
@media (min-width:768px){.h1-s.artikel-titel{font-size:4.6vw}}
@media (min-width:1536px){.h1-s.artikel-titel{font-size:68px}}
.artikel > * + *{margin-top:20px}
.artikel p,.artikel li{font-size:18px;line-height:1.7;color:rgba(var(--fg-a),.82)}
.artikel h2{margin-top:56px;font-weight:500;font-size:30px;line-height:1.15;letter-spacing:-.035em;color:var(--fg)}
.artikel h2 + p{margin-top:16px}
.artikel ul{padding-left:0}
.artikel ul li{position:relative;padding:4px 0 4px 22px}
.artikel ul li::before{content:'';position:absolute;left:2px;top:.8em;width:6px;height:6px;background:var(--sig)}
.artikel strong{font-weight:500;color:var(--fg)}
.artikel .merke{margin-top:32px;padding:20px 24px;border:1px solid rgba(var(--sig-a),.4);background:rgba(var(--sig-a),.05);font-size:18px;line-height:1.6;color:var(--fg)}
.artikel .merke .fn{display:block;margin-bottom:8px;color:var(--sig)}
.artikel-seite{display:grid;gap:48px}
@media (min-width:1024px){.artikel-seite{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px;align-items:start}.artikel-rand{position:sticky;top:calc(var(--kopf-hoehe,66px) + 24px)}}
.recht > * + *{margin-top:0}
.recht-abschnitt{scroll-margin-top:0}   /* der Kopfabstand kommt schon aus scroll-padding-top am html */
.recht-abschnitt + .recht-abschnitt{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.recht-abschnitt h2{margin-top:0;font-size:26px}
.recht-abschnitt h2 .sig{font-family:var(--mono);font-size:13px;letter-spacing:.08em;vertical-align:4px;margin-right:6px}
.recht-abschnitt h3{margin-top:28px;font-weight:500;font-size:19px;line-height:1.35;letter-spacing:-.02em;color:var(--fg)}
.recht-abschnitt p,.recht-abschnitt li{font-size:16px;line-height:1.7}
.recht-abschnitt > * + *{margin-top:14px}
.recht-abschnitt h2 + *{margin-top:20px}
.recht-abschnitt a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;overflow-wrap:anywhere}
.recht-karte{padding:16px 20px;border:1px solid var(--line);background:var(--panel)}
.recht-karte p{margin:0;font-size:16px;line-height:1.6}
.recht-karte .fn{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.recht-karte + .recht-karte{margin-top:8px}
.bewertung{margin-top:16px}
.bewertung-kopf{display:grid;gap:24px;padding:24px 20px}
@media (min-width:1024px){.bewertung-kopf{grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:40px;align-items:center;padding:28px 32px}}
.bw-schnitt{display:flex;flex-direction:column;gap:10px}
.bw-sterne{display:inline-flex;gap:6px}
.bw-sterne i{width:14px;height:14px;background:var(--sig);box-shadow:0 0 10px -2px var(--sig);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.bw-sterne.klein i{width:12px;height:12px}
.bw-verteilung > div{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px;padding:3px 0}
.bw-verteilung dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.bw-verteilung dd{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:10px}
.bw-balken{position:relative;height:6px;background:var(--line)}
.bw-balken::after{content:'';position:absolute;inset:0;background:var(--sig);transform:scaleX(var(--anteil));transform-origin:left center}
.bw-n{text-align:right;color:var(--fg)}
.bw-text .text{font-family:var(--display)}
.bw-text .mehr-link{display:inline-block;margin-top:8px;padding-top:12px}
.bw-schieber{border-top:1px solid var(--line)}
.bw-spur{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.bw-spur::-webkit-scrollbar{display:none}
.bw-karte{flex:0 0 min(100%,420px);scroll-snap-align:start;padding:24px 20px;border-right:1px solid var(--line)}
.bw-karte blockquote{margin:14px 0 0}
.bw-karte blockquote p{font-family:var(--display);font-size:16px;line-height:1.6;color:var(--fg)}
.bw-karte figcaption{margin-top:14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.bw-pfeile{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.bw-pfeile button{width:44px;height:44px;border:1px solid var(--line);background:none;color:var(--fg);font-family:var(--mono);cursor:pointer}
@media (hover:hover) and (pointer:fine){.bw-pfeile button:hover{border-color:var(--sig);color:var(--sig)}}
.lesefortschritt{position:fixed;left:0;right:0;top:0;z-index:60;height:2px;pointer-events:none}
.lesefortschritt i{display:block;height:100%;background:var(--sig);box-shadow:0 0 10px var(--sig);transform:scaleX(0);transform-origin:left center}

/* ---- Anfrage in Schritten ------------------------------------------------------------------ */
.trichter{border:1px solid var(--line);background:var(--panel)}
.trichter-kopf{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--dim)}
.trichter-schritte{display:flex;align-items:center;flex:none;height:4px;gap:4px}
@media (max-width:639px){.trichter-kopf{flex-wrap:wrap;row-gap:10px}.trichter-kopf > span:first-child{flex-basis:100%}}   /* Handy: Titel oben, Fortschritt und Zähler darunter */
#trichter-stand{white-space:nowrap}
.trichter-schritte i{width:28px;height:4px;background:var(--line);transition:background-color .3s ease}
.trichter-schritte i.an{background:var(--sig);box-shadow:0 0 8px var(--sig)}
.trichter fieldset{margin:0;padding:24px 16px;border:0;min-width:0}
@media (min-width:768px){.trichter fieldset{padding:32px}}
.trichter fieldset + fieldset{border-top:1px solid var(--line)}
.trichter legend{float:left;width:100%;padding:0;margin-bottom:24px;font-weight:500;font-size:24px;line-height:1.25;letter-spacing:-.03em;color:var(--fg)}
.trichter legend small{display:block;margin-top:6px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.trichter legend + *{clear:both}
.wahl-raster{display:grid;gap:8px;margin-top:0;grid-auto-rows:1fr}   /* alle Kästchen einer Frage gleich hoch (Mike 18.10.2026) */
@media (min-width:640px){.wahl-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wahl{position:relative;display:block;height:100%;cursor:pointer}
.wahl input{position:absolute;opacity:0;width:1px;height:1px}
.wahl-kasten{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;align-items:start;gap:4px 14px;height:100%;min-height:56px;padding:14px 16px;border:1px solid var(--line);background:var(--void);transition:border-color .2s ease,background-color .2s ease}
.wahl-kasten i{grid-row:1 / span 2;align-self:center;width:14px;height:14px;margin-top:0;border:1px solid var(--dim);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.wahl input[type=radio] + .wahl-kasten i{border-radius:50%}
.wahl strong{font-weight:500;font-size:16px;line-height:1.4;color:var(--fg)}
.wahl em{font-style:normal;font-size:13px;line-height:1.45;color:var(--dim)}
.wahl input:checked + .wahl-kasten{border-color:rgba(var(--sig-a),.6);background:rgba(var(--sig-a),.06)}
.wahl input:checked + .wahl-kasten i{border-color:var(--sig);background:var(--sig);box-shadow:0 0 8px var(--sig)}
.wahl input:focus-visible + .wahl-kasten{outline:2px solid var(--sig);outline-offset:2px}
/* Pixelzeichen je Antwort: still in Grau, beim Überfahren hell, ausgewählt Feld für Feld grün (diagonal, wie die Schnellkontakt-Leiste) */
.wahl-zeichen{grid-column:3;grid-row:1 / span 2;align-self:center;display:block;width:30px;height:30px}
.wahl-zeichen svg{display:block;width:100%;height:100%;overflow:visible}
.wahl-zeichen rect{fill:var(--dim);transition:fill .12s ease}
.wahl strong{grid-column:2}.wahl em{grid-column:2}
.wahl-kasten:not(:has(em)) > i,.wahl-kasten:not(:has(em)) > .wahl-zeichen{grid-row:1}   /* ohne Unterzeile keine leere zweite Reihe: Punkt mittig zum Titel */
.wahl-kasten:not(:has(em)){grid-template-rows:auto}   /* sonst schiebt die leere zweite Reihe samt Lücke alles 2 px über die Mitte */
.wahl-kasten:not(:has(em)) > strong{align-self:center}
.trichter legend + .felder{margin-top:0}
.wahl input:checked + .wahl-kasten .wahl-zeichen rect{fill:var(--sig);transition-delay:calc(var(--i) * 14ms)}
.wahl input:checked + .wahl-kasten .wahl-zeichen svg{filter:drop-shadow(0 0 5px rgba(var(--sig-a),.45))}
@media (hover:hover) and (pointer:fine){.wahl:hover input:not(:checked) + .wahl-kasten .wahl-zeichen rect{fill:var(--fg)}}
@media (prefers-reduced-motion:reduce){.wahl-zeichen rect{transition:none}}
@media (hover:hover) and (pointer:fine){.wahl:hover .wahl-kasten{border-color:rgba(var(--fg-a),.35)}}
.felder{display:grid;gap:16px;margin-top:20px}
@media (min-width:640px){.felder{grid-template-columns:repeat(2,minmax(0,1fr))}}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.feld-breit{grid-column:1 / -1}
.feld label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.feld input,.feld textarea,.feld select{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--rand-feld);border-radius:0;background:var(--void);color:var(--fg);font:inherit;font-size:16px}
.feld textarea{min-height:120px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;border-color:var(--sig)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--dim)}
.anfrage-hinweis{margin:20px 0 0;font-size:14px;line-height:1.55;color:var(--dim)}
.zustimmung{display:flex;gap:12px;align-items:flex-start;margin-top:20px;font-size:14px;line-height:1.55;color:var(--dim);cursor:pointer}
.zustimmung input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--sig)}
.trichter-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:16px;border-top:1px solid var(--line)}
@media (min-width:768px){.trichter-nav{padding:20px 32px}}
.trichter-nav .knopf[hidden]{display:none !important}
.labor-hinweis{display:flex;gap:12px;padding:12px 16px;border-top:1px solid var(--line);background:rgba(var(--sig-a),.05);font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--dim)}
.trichter-fertig{padding:32px}
.trichter-fertig h2{font-weight:500;font-size:30px;line-height:1.15;letter-spacing:-.035em}
/* Warnung im Trichter (Mike 18.10.2026: „die Fehlermeldung bitte in Rot … das ist eine Warnmeldung“): Err-Ton, 6,7:1 auf Void */
.trichter-warnung{display:flex;gap:10px;margin:0;padding:12px 16px;border-top:1px solid rgba(var(--err-a),.45);background:rgba(var(--err-a),.08);font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--err)}
.trichter-warnung::before{content:"//";flex:none}
.trichter-warnung[hidden]{display:none !important}
@media (min-width:768px){.trichter-warnung{padding:12px 32px}}
/* Kacheln für Fragen mit wenigen, kurzen Antworten (Mike 18.10.2026: „da sind die Bausteine sehr groß“): nur dort, wo
   der Trichter auf volle Höhe gestreckt wird (ab 1024 px); großes Pixelzeichen oben, darunter Punkt und Antwort, mittig.
   Darunter bleiben es Zeilen wie bei den anderen Fragen. */
@media (min-width:1024px){
  .wahl-raster.kacheln .wahl-kasten{grid-template-columns:auto auto;grid-template-rows:auto auto;justify-content:center;align-content:center;align-items:center;gap:14px 10px;padding:18px 14px}
  .wahl-raster.kacheln .wahl-kasten > .wahl-zeichen{grid-column:1 / -1;grid-row:1;justify-self:center;width:48px;height:48px}
  .wahl-raster.kacheln .wahl-kasten > i{grid-column:1;grid-row:2;align-self:center}
  .wahl-raster.kacheln .wahl-kasten > strong{grid-column:2;grid-row:2;align-self:center;text-align:left}
  .wahl-raster.kacheln.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wahl-raster.kacheln.vier .wahl-kasten{padding:16px 10px}
  .wahl-raster.kacheln.vier .wahl-kasten > .wahl-zeichen{width:36px;height:36px}
  .wahl-raster.kacheln.vier .wahl-kasten > strong{white-space:nowrap}   /* Betrag nie umbrechen */
}
@media (min-width:1440px){.wahl-raster.kacheln.vier{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Folgefrage: erst wählbar, wenn die Antwort davor passt (leitstand.js setzt folge-an / folge-aus) */
.folgefrage .wahl-kasten{transition:border-color .2s ease,background-color .2s ease,opacity .25s ease}
.folgefrage.folge-aus .wahl{cursor:not-allowed}
.folgefrage.folge-aus .wahl-kasten{opacity:.35}
.folgefrage.folge-an .folge-notiz{display:none}
/* Unterfrage im selben Schritt (Sitz des Unternehmens) */
.unterfrage{margin:24px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.unterfrage + .wahl-raster{margin-top:12px}
/* Flaggen behalten ihre Farben (auch ausgewählt), feine Kante in Grau, ausgewählt grün */
.wahl-zeichen.flagge svg{filter:none !important}
.flagge-kante{stroke:var(--dim)}
.wahl input:checked + .wahl-kasten .flagge-kante{stroke:var(--sig)}
.trichter.ls-trichter fieldset:not(.aktiv){display:none}
/* vor dem Start des Skripts schon wie Frage 1 aussehen (kein Sprung beim Laden); ohne Skript stehen alle Fragen da */
.ls-js .trichter:not(.ls-trichter) fieldset ~ fieldset{display:none}
.ls-js .trichter:not(.ls-trichter) [data-weiter]{display:inline-flex !important}
.ls-js .trichter:not(.ls-trichter) [data-absenden]{display:none}
.trichter-nav [data-weiter],.trichter-nav [data-absenden]{margin-left:auto}
.trichter.ls-trichter fieldset + fieldset{border-top:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (min-width:1024px){
  .seitenkopf-raster:has(.trichter){align-items:start}
  .seitenkopf-raster > .anfrage-text-spalte{grid-column:span 5}
  .anfrage-text-spalte + .seitenkopf-bild{grid-column:6 / span 7;align-self:stretch;display:flex;flex-direction:column}   /* breiter, damit die gleich hohen Kästchen nicht unnötig hoch werden */
}
/* Trichter so hoch wie die Spalte daneben, die Frage steht mittig, die Knöpfe unten (Mike 18.10.2026) */
@media (min-width:1024px){
  .trichter-voll .trichter{flex:1;display:flex;flex-direction:column}
  .trichter-voll .trichter > form,.trichter-voll .trichter > .trichter-fertig{flex:1;display:flex;flex-direction:column}
  /* Mike 18.10.2026 „die Kästchen müssen auf die ziemliche Höhe gestreckt werden“: die Antworten füllen die Höhe, im
     Kontaktschritt das Nachrichtenfeld. Die Legende ist hier bewusst Rahmen-Titel (float:none): Safari ignoriert float an
     der Legende eines Flex-Fieldsets, darum trägt die Legende das obere Polster, nicht das Fieldset — so stehen Frage und
     „Frage x von 6“ in allen Browsern an derselben Stelle, 24 px über den Antworten. */
  .trichter-voll .trichter.ls-trichter fieldset.aktiv{flex:1;display:flex;flex-direction:column;padding-top:0}
  .trichter-voll .trichter.ls-trichter fieldset.aktiv > legend{float:none;padding-top:32px}
  .trichter-voll .trichter.ls-trichter fieldset.aktiv > .wahl-raster{flex:1 1 auto}
  .trichter-voll .trichter.ls-trichter fieldset.aktiv > .folgefrage{flex:1 1 auto;display:flex;flex-direction:column}
  .trichter-voll .trichter.ls-trichter fieldset.aktiv > .folgefrage > .wahl-raster{flex:1 1 auto}
  .trichter-voll .trichter.ls-trichter fieldset.aktiv > .felder{flex:1 1 auto;grid-template-rows:auto auto 1fr}
  .trichter-voll .trichter.ls-trichter fieldset.aktiv > .felder > .feld-breit > textarea{flex:1}
  .trichter-voll .trichter > .trichter-fertig{justify-content:center}
}
.anfrage-text-spalte .wege-liste dd{font-size:16px}

/* ---- Abschluss-Bande -------------------------------------------------------------------- */
.cta-bande{border-bottom:1px solid var(--line);padding:96px 0}
@media (min-width:768px){.cta-bande{padding:128px 0}}
.cta-innen{display:grid;gap:40px}
@media (min-width:1024px){.cta-innen{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:end}}
.cta-wege{display:flex;flex-wrap:wrap;gap:12px}
.cta-wege .klein{flex-basis:100%;font-family:var(--mono)}

/* ---- Verzeichnis der Bausteine (Leistungen) --------------------------------------------- */
.katalog{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);background:var(--panel);font-family:var(--mono)}
@media (min-width:640px){.katalog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.katalog{grid-template-columns:repeat(3,minmax(0,1fr))}}
.katalog-gruppe{padding:20px;border-color:var(--line);border-style:solid;border-width:0 0 1px}
.katalog-gruppe h3{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;font-family:var(--display);font-size:20px;line-height:1.3;letter-spacing:-.02em}
.katalog-gruppe h3 small{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:right}
.katalog-gruppe ul{margin-top:14px}
.katalog-gruppe li{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:12.5px;color:var(--dim)}
.katalog-gruppe li span:first-child{flex:1;color:var(--fg)}
.katalog-gruppe .bst{flex:none;min-width:30px;padding:1px 6px;border:1px solid var(--line);font-size:10.5px;text-align:center}
.katalog-gruppe .bst.b01,.katalog-gruppe .bst.b02,.katalog-gruppe .bst.b03{border-color:rgba(var(--sig-a),.4);color:var(--sig)}
@media (max-width:639px){.katalog-gruppe:last-child{border-bottom-width:0}}
@media (min-width:640px) and (max-width:1023px){.katalog-gruppe:nth-child(odd){border-right-width:1px}.katalog-gruppe:nth-last-child(-n+2){border-bottom-width:0}}
@media (min-width:1024px){.katalog-gruppe:not(:nth-child(3n)){border-right-width:1px}.katalog-gruppe:nth-last-child(-n+3){border-bottom-width:0}}
.finder li + li{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.finder a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:56px;padding:12px 16px;text-decoration:none;transition:background-color .2s ease}
.finder .finder-nr{color:var(--sig)}
.finder .finder-satz{font-family:var(--display);font-size:16px;line-height:1.4;color:var(--fg)}
.finder .finder-ziel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.finder a:hover{background:rgba(var(--sig-a),.05)}.finder a:hover .finder-ziel{color:var(--sig)}}
.fundament-gross .fundament-zellen > div{padding:24px}
.fundament-gross .fundament-zellen > div::after{right:24px;top:37px}   /* Mitte des 40-px-Zeichens: 24 + 20 − 7 */
.fundament-gross .weg-zeichen{width:40px;height:40px;margin:0 0 20px}
.fundament-gross dd.lang{margin-top:10px;font-size:15px;line-height:1.6}

/* ---- Kopf ganz schmal (320 bis 400 px): Logo, Anhalten, Anfrage und Menü passen in eine Zeile ---- */
@media (max-width:400px){
  .kopf-innen{gap:10px}
  .marke img{height:34px}
  .klammer{margin-left:4px;padding:0 10px}
  .menue-knopf{margin-left:4px}
}

/* ---- Knöpfe mobil in voller Breite (AUSSTATTUNG Nr. 21) ------------------------------------- */
@media (max-width:639px){
  .knoepfe,.cta-wege{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .knoepfe .knopf,.cta-wege .knopf,.sp-5 > .knopf,.fuer .knopf{width:100%}
}

/* ---- Bewegung (Referenz-Keyframes, Haus-Kurve für Eingänge) ---------------------- */
@keyframes blinken{50%{opacity:0}}
@keyframes zeile-rein{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes paket-lauf{from{left:0}to{left:100%}}
@keyframes abtasten{from{transform:translateY(-100%)}to{transform:translateY(100vh)}}
@keyframes laufen{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){
  .ls-bereit .block-cursor,.ls-bereit .blink{animation:blinken 1.05s step-end infinite}
  .ls-bereit .paket{animation:paket-lauf 2.6s linear infinite}
  .ls-bereit .paket-2{animation-delay:-1.3s}
  .ls-bereit .sweep{animation:abtasten 7s linear infinite}
  .ls-bereit .laufband-spur{animation:laufen 40s linear infinite}
  .ls-reveal .warten{opacity:0;transform:translateY(12px)}
  .ls-reveal .rein{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .ls-reveal .warten:focus-within{opacity:1;transform:none;transition:none}   /* wer schnell tabbt, sieht den Fokus sofort (WCAG 2.4.7) */
}
.bewegung-steht .block-cursor,.bewegung-steht .blink,.bewegung-steht .paket,.bewegung-steht .sweep,.bewegung-steht .laufband-spur{animation-play-state:paused}
@media (scripting:none){.warten{opacity:1 !important;transform:none !important}}
@media (prefers-reduced-motion:reduce){.schritte.stapel > .schritt,.schritte.stapel > .schritt::before,.schritte.stapel > .schritt::after,.schritte.stapel .schritt-nr,.schritte.stapel .nr-pixel i,.schritte.stapel .schritt .fn,.baustein-raster.stapel > li > .weg::before,.baustein-raster.stapel > li > .weg::after{transition:none !important}}

/* ==========================================================================
   Schnellkontakt (Ausstattung Nr. 1, Mike 14.10.2026: „muss richtig cool geregelt sein“)
   Ab 1024 px: Instrumentenleiste im rechten Rand, so breit wie der Rand (32 px, ab 1488 px 48 px),
   damit sie nie über dem Inhalt liegt. Beschriftung als Pille nach links, mit Leitung zur Leiste.
   Beim Überfahren füllt sich das Feld, das Pixel-Symbol schaltet diagonal Feld für Feld um.
   Darunter: Leiste am unteren Rand, vier Felder, Anfrage in Signalfarbe.
   ========================================================================== */
.sk-symbol{display:block;flex:none}
.sk-symbol rect{fill:var(--dim);transition:fill .12s ease}
.sk-haupt .sk-symbol rect{fill:var(--sig)}
.sk-status .led{margin:0}
.ls-bereit .sk-status .led{animation:sk-puls 2.4s ease-in-out infinite}
html:not(.ls-bereit) .halt{visibility:hidden}   /* ohne Skript läuft nichts, der Knopf hätte nichts anzuhalten */
@keyframes sk-puls{50%{opacity:.35;box-shadow:none}}

@media (min-width:1024px){
  .schnellkontakt{--sk-b:32px;position:fixed;right:0;top:50%;z-index:45;display:flex;flex-direction:column;transform:translateY(-50%);
    background:var(--panel);border:1px solid var(--line);border-right:0;animation:sk-rein .55s var(--ease) .5s both}
  .schnellkontakt::before,.schnellkontakt::after{content:'';position:absolute;left:-1px;width:7px;height:7px;border:0 solid var(--sig);pointer-events:none}
  .schnellkontakt::before{top:-1px;border-top-width:1px;border-left-width:1px}
  .schnellkontakt::after{bottom:-1px;border-bottom-width:1px;border-left-width:1px}
  .sk-status,.sk-knopf{position:relative;display:flex;align-items:center;justify-content:center;width:calc(var(--sk-b) - 1px);text-decoration:none}
  .sk-status{flex-direction:column;gap:10px;padding:12px 0 14px;color:var(--dim);transition:color .15s ease}
  .sk-senkrecht{writing-mode:vertical-rl;font-family:var(--mono);font-size:9px;line-height:1;letter-spacing:.2em;text-transform:uppercase}
  .sk-knopf{height:44px;border-top:1px solid var(--line);transition:background-color .15s ease}
  .sk-wort{display:none}
  .sk-pille{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(8px,-50%);opacity:0;visibility:hidden;white-space:nowrap;
    padding:9px 12px;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
    background:var(--panel);border:1px solid var(--line);transition:transform .22s var(--ease),opacity .18s ease,visibility 0s linear .18s}
  .sk-knopf:hover .sk-pille,.sk-status:hover .sk-pille,.sk-knopf:focus-visible .sk-pille,.sk-status:focus-visible .sk-pille{transition-delay:0s}
  .sk-pille::after{content:'';position:absolute;left:100%;top:50%;width:12px;height:1px;background:var(--sig)}
  .sk-pille::before{content:'';position:absolute;left:100%;top:0;bottom:0;width:13px}   /* Brücke: der Zeiger darf von der Leiste auf die Pille (WCAG 1.4.13) */
  .sk-status:focus-visible .sk-pille,.sk-knopf:focus-visible .sk-pille{visibility:visible}
  .sk-still .sk-pille{opacity:0 !important;visibility:hidden !important}
  .sk-pille .fg{color:var(--fg)}
  .sk-status:focus-visible,.sk-knopf:focus-visible{outline:2px solid var(--sig);outline-offset:-2px}
  .sk-status:focus-visible .sk-pille,.sk-knopf:focus-visible .sk-pille{transform:translate(0,-50%);opacity:1}
  .sk-knopf[aria-current="page"]{background:rgba(var(--sig-a),.12)}
  @media (hover:hover) and (pointer:fine){
    .sk-status:hover .sk-pille,.sk-knopf:hover .sk-pille{transform:translate(0,-50%);opacity:1;visibility:visible}
    .sk-status:hover{color:var(--fg)}
    .sk-knopf:hover{background:var(--sig)}
    .sk-knopf:hover .sk-symbol rect{fill:var(--void);transition-delay:calc(var(--i) * 14ms)}
  }
}
@media (min-width:1488px){.schnellkontakt{--sk-b:48px}.sk-knopf{height:48px}}
@keyframes sk-rein{from{transform:translate(100%,-50%)}}

@media (max-width:1023px){
  .schnellkontakt{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    background:var(--void);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);animation:sk-hoch .45s var(--ease) .4s both}
  .sk-status,.sk-pille{display:none}
  .sk-knopf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:56px;padding:0 4px;color:var(--dim);
    font-family:var(--mono);font-size:10px;line-height:1;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:color .15s ease}
  .sk-knopf + .sk-knopf{border-left:1px solid var(--line)}
  .sk-knopf:focus-visible{outline:2px solid var(--sig);outline-offset:-2px}
  .sk-haupt{background:var(--sig);color:var(--void)}
  .sk-haupt .sk-symbol rect{fill:var(--void)}
  .sk-haupt:focus-visible{outline:2px solid var(--void);outline-offset:-5px}
  body{padding-bottom:calc(57px + env(safe-area-inset-bottom,0px))}
}
@keyframes sk-hoch{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.schnellkontakt,.sk-status .led{animation:none}}
.bewegung-steht .sk-status .led{animation:none}

/* Anfrage: Meldung nach einem Fehler beim Senden (Formular springt auf Frage 5, Eingaben bleiben) */
.trichter-meldung{margin:0 0 18px;padding:10px 14px;border-left:2px solid var(--err);background:rgba(var(--err-a),.07);font-size:14px;line-height:1.5;color:var(--fg)}
.trichter-meldung .err{color:var(--err);font-family:var(--mono)}

/* Kontrastmodus und erhöhter Kontrast: Pointe als echter Text statt Pixelbild, Symbole in Systemfarbe (WCAG 1.4.5, Prüfung 15.10.2026) */
@media (forced-colors:active),(prefers-contrast:more){
  .pw-an .pw-text{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
  .pw-an .pw-bild{display:none}
}
@media (forced-colors:active){.sk-symbol rect{fill:CanvasText}}

/* ==== Ladebild „Systemstart“ (Mike 18.10.2026: „epischer Loading-Screen … mein Markenzeichen … gilt für alle Seiten“)
   Erscheint nur, wenn das Kopfskript html.lader setzt (Skript an, keine reduzierte Bewegung, „Bewegung anhalten“ aus).
   Das Bild zeichnet lader.js; hier stehen Bühne, Kopfzeile, Rahmen, Protokoll und Zähler. Notaus: nach 6,5 s weg. */
#lader{display:none}
html.lader #lader{display:block;position:fixed;inset:0;z-index:200;background-color:var(--void);cursor:default;animation:lader-notaus 0s linear 6.5s forwards}
@keyframes lader-notaus{to{visibility:hidden;opacity:0}}
html.lader #lader.lader-raus{background:none}   /* ab dem Ausgang kommt der Grund aus den Kacheln von lader.js */
.lader-bild{position:absolute;inset:0;width:100%;height:100%;display:block}
.lader-hud{position:absolute;inset:0;opacity:0;transition:opacity .3s var(--ease)}
.lader-an .lader-hud{opacity:1}
.lader-raus .lader-hud{opacity:0;transition:opacity .18s cubic-bezier(.55,0,1,.45)}
.lader-kopf{position:absolute;left:0;right:0;top:0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lader-kopf .wrap{display:flex;justify-content:space-between;gap:24px;padding-top:8px;padding-bottom:8px;white-space:nowrap}
.lader-kopf .fg{color:var(--fg)}
.lader-feld{position:absolute;left:calc(var(--mx,50%) - 28px);top:calc(var(--my,40%) - 28px);width:calc(var(--mw,0px) + 56px);height:calc(var(--mh,0px) + 56px)}
.lader-feld::before,.lader-feld::after{width:12px;height:12px}
.lader-marke{position:absolute;left:0;top:-22px;font-family:var(--mono);font-size:10px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lader-marke.rechts{left:auto;right:0;top:auto;bottom:-22px}
.lader-notiz{position:absolute;left:0;right:0;top:calc(var(--my,40%) + var(--mh,0px) + 64px);margin:0;text-align:center;font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--dim)}
.lader-fuss{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.lader-fuss .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.lader-log{margin:0;padding:0;list-style:none;width:min(320px,56vw);font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--dim)}
.lader-log li{display:flex;align-items:baseline;gap:10px;opacity:0}
.lader-log li + li{margin-top:4px}
.lader-log li.an{opacity:1;animation:zeile-rein .45s var(--ease) both}
.lader-log i{flex:1;min-width:12px;border-bottom:1px dashed var(--line);transform:translateY(-3px)}
.lader-log b{font-weight:400;color:var(--fg)}
.lader-log li:last-child b{color:var(--sig)}
.lader-cursor{display:inline-block;width:.42em;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--sig);transform:skewX(-12.4deg);animation:blinken 1.05s step-end infinite}
.lader-zahl{margin:0;text-align:right;font-family:var(--dot);font-weight:900;font-size:56px;line-height:.86;color:var(--fg);font-variant-numeric:tabular-nums}
.lader-zahl small{display:block;margin-bottom:10px;font-family:var(--mono);font-weight:400;font-size:10.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lader-prozent{font-family:var(--mono);font-weight:400;font-size:14px;color:var(--dim);margin-left:4px}
.lader-balken{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.lader-balken i{display:block;height:100%;background:var(--sig);box-shadow:0 0 10px var(--sig);transform:scaleX(0);transform-origin:left center}
.lader-kurz .lader-log,.lader-kurz .lader-zahl,.lader-kurz .lader-balken{display:none}
@media (max-width:639px){.lader-zahl{font-size:40px}.lader-log{font-size:10.5px}.lader-notiz{font-size:12px}}
html.lader .pointe:not(.pw-an),html.lader-nach .pointe:not(.pw-an){color:transparent}   /* kein Aufblitzen des Ersatztexts beim Öffnen */
@media print{#lader{display:none !important}}