/* =========================================================
   Meindl Software · meindl-software.de
   Leitidee „Läuft.“: Die Seite ist eine Build-Pipeline
   (plan → build → test → deploy → läuft). Präzision als Motiv:
   Inspektor-Rahmen, Hilfslinien, Lineale, Terminal, Editor.
   Farbe: Kernel-Blau #1F3DFF (hell) / #4D6BFF (dunkel)
   ========================================================= */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Farben ---------- */
:root {
  color-scheme: light;
  --bg: #F3F4F7;
  --flaeche: #FFFFFF;
  --flaeche-2: #E9EBF0;
  --text: #0A0C11;
  --text-2: #464D5E;
  --text-3: #5F6779;
  --linie: #D8DBE3;
  --linie-stark: #B9BECB;
  --blau: #1F3DFF;
  --blau-hover: #1631D9;
  --blau-text: #1F3DFF;
  --blau-weich: rgba(31, 61, 255, .08);
  --blau-glut: rgba(31, 61, 255, .35);
  --gruen: #0A7F41;
  --gruen-punkt: #16C35F;
  --warn: #B45309;
  --fehler: #C8102E;
  --schatten: 0 1px 2px rgba(10, 12, 17, .06), 0 12px 32px -12px rgba(10, 12, 17, .18);

  /* Code-Flächen sind immer dunkel (wie ein echter Editor) */
  --code-bg: #0A0C12;
  --code-kopf: #0E1119;
  --code-linie: #1D2130;
  --code-text: #D7DCEA;
  --code-dim: #7A84A3;
  --code-nr: #464D66;
  --t-blau: #8EA2FF;
  --t-gruen: #8BE3AE;
  --t-gelb: #F2C46B;

  --kopf-h: 64px;
  --rahmen: 1240px;
  --rand: 16px;
  --radius: 14px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-raus: cubic-bezier(.6, 0, .9, .4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    color-scheme: dark;
    --bg: #07080B;
    --flaeche: #0D0F14;
    --flaeche-2: #141720;
    --text: #ECEFF5;
    --text-2: #A9B1C2;
    --text-3: #838CA0;
    --linie: #1F232D;
    --linie-stark: #333949;
    --blau-text: #7088FF;
    --blau-hover: #3653FF;
    --blau-weich: rgba(77, 107, 255, .13);
    --blau-glut: rgba(61, 92, 255, .55);
    --gruen: #3BD67F;
    --warn: #F5A524;
    --fehler: #FF6B7A;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -16px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dunkel"],
.buehne,
.kopf.ist-oben {
  color-scheme: dark;
  --bg: #07080B;
  --flaeche: #0D0F14;
  --flaeche-2: #141720;
  --text: #ECEFF5;
  --text-2: #A9B1C2;
  --text-3: #838CA0;
  --linie: #1F232D;
  --linie-stark: #333949;
  --blau-text: #7088FF;
  --blau-hover: #3653FF;
  --blau-weich: rgba(77, 107, 255, .13);
  --blau-glut: rgba(61, 92, 255, .55);
  --gruen: #3BD67F;
  --warn: #F5A524;
  --fehler: #FF6B7A;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -16px rgba(0, 0, 0, .7);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 12px);
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
img, svg, picture, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 720; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-style: normal; }
::selection { background: var(--blau); color: #fff; }
:focus-visible { outline: 2px solid var(--blau-text); outline-offset: 3px; border-radius: 6px; }

.mono, .code { font-family: var(--mono); font-feature-settings: "liga" 0, "calt" 0; font-variant-ligatures: none; letter-spacing: 0; }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  padding: 10px 16px; background: var(--blau); color: #fff; border-radius: 8px;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

.rahmen {
  width: 100%;
  max-width: calc(var(--rahmen) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
@media (min-width: 640px) { :root { --rand: 28px; } }
@media (min-width: 1024px) { :root { --rand: 40px; --kopf-h: 72px; } }

.punkt-gruen {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gruen-punkt); box-shadow: 0 0 0 0 rgba(22, 195, 95, .6);
  animation: puls-punkt 2.4s ease-out infinite; vertical-align: middle; flex: none;
}
@keyframes puls-punkt {
  0% { box-shadow: 0 0 0 0 rgba(22, 195, 95, .55); }
  70% { box-shadow: 0 0 0 8px rgba(22, 195, 95, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 195, 95, 0); }
}
.cursor {
  display: inline-block; width: .58em; height: 1.05em; margin-left: .15em;
  background: var(--t-blau); vertical-align: -.16em; animation: blinken 1.06s steps(1) infinite;
}
@keyframes blinken { 50% { opacity: 0; } }

/* ---------- Knöpfe ---------- */
.knopf {
  --k-bg: transparent;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 10px;
  background: var(--k-bg);
  font-weight: 600; font-size: 1rem; letter-spacing: -.01em; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.knopf:hover svg { transform: translateX(3px); }
.knopf:active { transform: translateY(1px); }
.knopf-primaer { --k-bg: var(--blau); color: #fff; box-shadow: 0 8px 24px -10px var(--blau-glut); }
.knopf-primaer:hover { --k-bg: var(--blau-hover); box-shadow: 0 0 0 4px var(--blau-weich), 0 12px 30px -10px var(--blau-glut); }
/* Lichtkante: einmaliger Scan über den Knopf */
.knopf-primaer::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-120%);
}
.knopf-primaer:hover::after { transform: translateX(120%); transition: transform .7s var(--ease); }
.knopf-geist { border-color: var(--linie-stark); color: var(--text); }
.knopf-geist:hover { border-color: var(--blau-text); color: var(--blau-text); background: var(--blau-weich); }
.knopf-klein { min-height: 42px; padding: 0 16px; font-size: .9375rem; border-radius: 9px; }

.knopf-icon {
  display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--linie); border-radius: 10px; background: transparent; color: var(--text);
  transition: border-color .2s, background-color .2s, color .2s;
}
.knopf-icon:hover { border-color: var(--blau-text); color: var(--blau-text); }
.knopf-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.knopf-icon-gross { width: 52px; height: 52px; flex: none; }

.link-pfeil {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--blau-text); font-weight: 600; text-decoration: none;
}
.link-pfeil::after { content: "→"; font-family: var(--mono); transition: transform .25s var(--ease); }
.link-pfeil:hover::after { transform: translateX(4px); }

/* ---------- Kopfzeile (massiv, keine Glas-Optik) ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--kopf-h);
  background: var(--bg);
  border-bottom: 1px solid var(--linie);
  color: var(--text);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.kopf.ist-oben { background: transparent; border-bottom-color: transparent; }
.kopf-innen {
  display: flex; align-items: center; gap: 16px; height: 100%;
  max-width: calc(var(--rahmen) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand);
}
.kopf-logo { display: block; flex: none; margin-right: auto; padding-block: 8px; }
.logo { width: 150px; height: auto; }
@media (min-width: 1024px) { .logo { width: 178px; } }
.logo-zeichen { fill: var(--blau); }
.logo-name { fill: var(--text); }
.logo-software { fill: var(--blau-text); }
.kopf.ist-oben .logo-zeichen, .buehne .logo-zeichen { fill: #4D6BFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .logo-zeichen { fill: #4D6BFF; } }
:root[data-theme="dunkel"] .logo-zeichen { fill: #4D6BFF; }

.kopf-stufe {
  display: none; margin: 0; font-size: 12px; color: var(--text-3);
  padding: 4px 9px; border: 1px solid var(--linie); border-radius: 6px;
  transition: opacity .3s; white-space: nowrap;
}
.kopf-stufe [data-stufe-nr] { color: var(--blau-text); }
.kopf.ist-oben .kopf-stufe { opacity: 0; }
@media (min-width: 400px) { .kopf-stufe { display: block; } }

.kopf-aktionen { display: flex; align-items: center; gap: 8px; }
.knopf-palette {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; font-size: .875rem; font-weight: 500;
  border: 1px solid var(--linie); border-radius: 10px; background: transparent; color: var(--text);
  transition: border-color .2s, color .2s;
}
.knopf-palette:hover { border-color: var(--blau-text); color: var(--blau-text); }
.knopf-palette svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.knopf-palette-text, .knopf-palette kbd { display: none; }
.knopf-palette kbd { font-size: 11px; padding: 2px 6px; border: 1px solid var(--linie); border-radius: 5px; color: var(--text-3); }
.kopf-cta { display: none; }
@media (min-width: 760px) {
  .knopf-palette-text, .knopf-palette kbd { display: inline; }
  .kopf-cta { display: inline-flex; }
}
.ico-mond { display: none; }
:root[data-theme="dunkel"] .ico-sonne { display: none; }
:root[data-theme="dunkel"] .ico-mond { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ico-sonne { display: none; }
  :root:not([data-theme]) .ico-mond { display: block; }
}

.kopf-fortschritt { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.kopf-fortschritt span {
  display: block; height: 100%; background: var(--blau);
  transform-origin: left; transform: scaleX(var(--p, 0));
  box-shadow: 0 0 12px var(--blau-glut);
}
.kopf.ist-oben .kopf-fortschritt { opacity: 0; }

/* ---------- Pipeline-Leiste (große Bildschirme) ---------- */
.pipeline { display: none; }
@media (min-width: 1440px) {
  .pipeline {
    display: block; position: fixed; left: 22px; top: 50%; z-index: 40;
    transform: translate(-12px, -50%); opacity: 0; pointer-events: none;
    transition: opacity .4s var(--ease), transform .4s var(--ease);
  }
  .pipeline.ist-aktiv { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
  .pipeline ol { position: relative; z-index: 1; display: grid; gap: 22px; }
  .pipeline a {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    font-family: var(--mono); font-size: 12px; color: var(--text-3); min-height: 24px;
    transition: color .2s;
  }
  .pipeline a .mono { opacity: .7; }
  .pipeline li { position: relative; }
  .pipeline a .pipeline-name {
    position: absolute; left: 52px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; opacity: 1;
    background: var(--flaeche); border: 1px solid var(--linie); visibility: hidden; transform: translateX(-4px);
    transition: visibility .2s, transform .2s; pointer-events: none;
  }
  .pipeline a:hover .pipeline-name, .pipeline a:focus-visible .pipeline-name { visibility: visible; transform: none; }
  .pipeline a i {
    width: 11px; height: 11px; border-radius: 50%; flex: none;
    border: 1.5px solid var(--linie-stark); background: var(--bg);
    transition: background-color .3s, border-color .3s, box-shadow .3s;
  }
  .pipeline a:hover { color: var(--text); }
  .pipeline a.ist-fertig i { background: var(--blau-text); border-color: var(--blau-text); opacity: .55; }
  .pipeline a.ist-jetzt { color: var(--text); font-weight: 600; }
  .pipeline a.ist-jetzt i { background: var(--blau); border-color: var(--blau); box-shadow: 0 0 0 4px var(--blau-weich), 0 0 14px var(--blau-glut); }
  .pipeline-linie { position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--linie-stark); }
  .pipeline-linie b { position: absolute; inset: 0; background: var(--blau); transform-origin: top; transform: scaleY(var(--pf, 0)); }
}

/* ---------- Befehls-Palette ---------- */
.palette {
  width: min(640px, calc(100% - 24px)); max-height: min(560px, 80svh);
  margin: 10vh auto auto; padding: 0;
  border: 1px solid var(--linie-stark); border-radius: 16px;
  background: var(--flaeche); color: var(--text); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.palette[open] { animation: palette-auf .22s var(--ease); }
@keyframes palette-auf { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.palette::backdrop { background: rgba(5, 6, 9, .62); }
.palette-form { display: flex; flex-direction: column; max-height: inherit; }
.palette-suche { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
.palette-suche svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; }
.palette-suche input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font-size: 16px; outline: none; }
.palette-zu { height: 30px; padding: 0 8px; border: 1px solid var(--linie); border-radius: 6px; background: transparent; color: var(--text-3); font-size: 12px; }
.palette-liste { overflow-y: auto; padding: 8px; }
.palette-liste li {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 12px;
  border-radius: 10px; cursor: pointer; color: var(--text-2);
}
.palette-liste li .mono { width: 2.4ch; color: var(--text-3); text-align: center; flex: none; }
.palette-liste li[aria-selected="true"] { background: var(--blau-weich); color: var(--text); box-shadow: inset 2px 0 0 var(--blau); }
.palette-liste li[hidden] { display: none; }
.palette-fuss { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--linie); color: var(--text-3); font-size: 11.5px; }

/* =========================================================
   HERO
   ========================================================= */
.buehne { background: var(--bg); color: var(--text); }
.held {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: var(--kopf-h);
  background: #050609;
}
.held-feld { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.held-portrait {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 1400 / 1650;
}
.held-portrait picture, .held-portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
}
.held-portrait picture {
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 52%, transparent 96%);
}
.js .held-portrait img { opacity: 0; transform: scale(1.04); transition: opacity 1.4s var(--ease), transform 2.2s var(--ease); }
.js .held.ist-bereit .held-portrait img { opacity: 1; transform: none; }

/* Inspektor-Rahmen um das Gesicht */
.inspektor { position: absolute; inset: 0; pointer-events: none; --box-l: 9%; --box-t: 5%; --box-w: 83%; --box-h: 68%; }
.inspektor-box {
  position: absolute; left: var(--box-l); top: var(--box-t); width: var(--box-w); height: var(--box-h);
  border: 1px solid #4D6BFF; background: rgba(77, 107, 255, .045);
  box-shadow: 0 0 0 1px rgba(77, 107, 255, .12), inset 0 0 60px rgba(77, 107, 255, .06);
}
.inspektor-tag {
  position: absolute; left: -1px; bottom: calc(100% + 1px); display: flex; align-items: stretch;
  font-size: 11px; line-height: 1; white-space: nowrap;
}
.inspektor-tag b { background: #1F3DFF; color: #fff; padding: 6px 8px; font-weight: 600; }
.inspektor-tag span { background: rgba(10, 12, 18, .85); color: #C9D2FF; padding: 6px 8px; border: 1px solid rgba(77, 107, 255, .45); border-left: 0; }
.griff { position: absolute; width: 7px; height: 7px; background: #050609; border: 1px solid #4D6BFF; }
.g1 { left: -4px; top: -4px; } .g2 { left: calc(50% - 4px); top: -4px; } .g3 { right: -4px; top: -4px; }
.g4 { right: -4px; top: calc(50% - 4px); } .g5 { right: -4px; bottom: -4px; } .g6 { left: calc(50% - 4px); bottom: -4px; }
.g7 { left: -4px; bottom: -4px; } .g8 { left: -4px; top: calc(50% - 4px); }
.mass {
  position: absolute; display: none; font-size: 10.5px; color: #9FB0FF; white-space: nowrap;
}
.mass-rechts { right: -34px; top: 0; bottom: 0; width: 1px; border-right: 1px solid rgba(77, 107, 255, .5); }
.mass-rechts::before, .mass-rechts::after { content: ""; position: absolute; right: -5px; width: 9px; border-top: 1px solid rgba(77, 107, 255, .7); }
.mass-rechts::before { top: 0; } .mass-rechts::after { bottom: 0; }
.mass-rechts { writing-mode: vertical-rl; display: none; align-items: center; justify-content: center; padding-right: 6px; }
.inspektor-ziel {
  position: absolute; left: var(--auge-q, 71%); top: var(--auge-p, 33.9%); width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border: 1px solid rgba(143, 162, 255, .85); border-radius: 50%;
}
.inspektor-ziel::before, .inspektor-ziel::after { content: ""; position: absolute; background: rgba(143, 162, 255, .85); }
.inspektor-ziel::before { left: 50%; top: -10px; bottom: -10px; width: 1px; }
.inspektor-ziel::after { top: 50%; left: -10px; right: -10px; height: 1px; }
.held-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; font-size: 12px; line-height: 1.1; color: #E6EAF5; white-space: nowrap;
  background: rgba(8, 10, 15, .82); border: 1px solid rgba(112, 136, 255, .38); border-radius: 7px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8);
}
.held-chip .stern { color: #FFC94D; }
.held-chip .haken { color: #3BD67F; }
.chip-a { left: 3%; top: 58%; }
.chip-b { right: 3%; top: 46%; }

/* Hilfslinie auf Augenhöhe */
.augenhoehe {
  position: absolute; z-index: 2; left: 0; right: 0; top: var(--auge-y, 46vw); height: 0;
  border-top: 1px dashed rgba(112, 136, 255, .55); pointer-events: none;
  transform-origin: var(--auge-x, 71%) 0;
}
.augenhoehe span {
  position: absolute; right: calc(100% - var(--auge-x, 71%) + 34px); bottom: 5px; font-size: 10.5px; color: #8EA2FF;
  background: #050609; padding: 2px 6px; border: 1px solid rgba(112, 136, 255, .35); border-radius: 4px;
}

/* Auftritt: Rahmen, Ziel, Chips, Hilfslinie */
.js .augenhoehe { transform: scaleX(0); transition: transform 1.4s var(--ease) .9s; }
.js .held.ist-bereit .augenhoehe { transform: none; }
.js .inspektor > * { opacity: 0; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.js .inspektor-box { transform: scale(1.05); transition-delay: .45s; }
.js .inspektor-ziel { transform: scale(2.2); transition-delay: 1.2s; }
.js .chip-a { transition-delay: 1.6s; }
.js .chip-b { transition-delay: 1.85s; }
.js .held.ist-bereit .inspektor > * { opacity: 1; transform: none; }
.held-chip { animation: schweben 7s ease-in-out infinite alternate; }
.chip-b { animation-delay: -3.5s; }
@keyframes schweben { from { translate: 0 -5px; } to { translate: 0 6px; } }
.inspektor-ziel::before, .inspektor-ziel::after { opacity: .9; }
.held.ist-bereit .inspektor-ziel { animation: ziel-puls 3.2s ease-out 2.4s infinite; }
@keyframes ziel-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(77, 107, 255, .45); } 60% { box-shadow: 0 0 0 14px rgba(77, 107, 255, 0); } }

/* Text */
.held-text { position: relative; z-index: 3; margin-top: -30vw; padding-bottom: 40px; }
.held-text::before { content: ""; position: absolute; z-index: -1; inset: -40px 0 0; background: linear-gradient(to bottom, rgba(5, 6, 9, 0), rgba(5, 6, 9, .78) 110px, rgba(5, 6, 9, .9)); pointer-events: none; }
.held-kicker .nur-breit { display: none; }
@media (min-width: 640px) { .held-kicker .nur-breit { display: inline; } }
.held-kicker { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #A9B1C2; margin-bottom: 18px; }
.held-titel {
  font-size: clamp(3.05rem, 1.6rem + 7.4vw, 7.6rem);
  line-height: .93; letter-spacing: -.055em; font-weight: 760;
  color: #fff; margin-left: -.04em;
}
.held-titel .zeile { display: block; }
.held-titel em { color: #5B78FF; text-shadow: 0 0 42px rgba(31, 61, 255, .65); }
.held-titel [data-decode] .z-zeichen { display: inline-block; }
.held-titel [data-decode] .z-zeichen.ist-zufall { color: #8EA2FF; opacity: .75; }
.held-lead { margin-top: 22px; max-width: 34rem; font-size: clamp(1.06rem, 1rem + .35vw, 1.28rem); line-height: 1.55; color: #B4BCCD; }
.held-knoepfe { display: grid; gap: 12px; margin-top: 30px; }
.held-knoepfe .knopf-geist { color: #fff; border-color: rgba(255, 255, 255, .22); }
.held-knoepfe .knopf-geist:hover { color: #fff; border-color: #7088FF; background: rgba(77, 107, 255, .14); }
@media (min-width: 520px) { .held-knoepfe { display: flex; flex-wrap: wrap; } }

.held-status { position: relative; z-index: 3; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(5, 6, 9, .7); }
.held-status ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0; font-size: 12px; color: #98A1B4; }
.held-status li { display: flex; align-items: center; gap: 8px; padding: 14px 0; min-height: 48px; }
.held-status li:nth-child(odd) { padding-right: 10px; }
.held-status li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .06); }
.held-status .nur-breit { display: none; }

@media (min-width: 640px) and (max-width: 1023.98px) {
  .held-portrait { width: min(80vw, 640px); margin-left: auto; aspect-ratio: 1400 / 1750; }
  .held-text { margin-top: -38vw; }
}
@media (min-width: 640px) { .mass-rechts { display: flex; } }
@media (min-width: 900px) {
  .held-status ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .held-status li, .held-status li:nth-child(n+3) { border-top: 0; padding: 0; min-height: 56px; }
  .held-status .nur-breit { display: flex; }
}
@media (min-width: 1024px) {
  .held {
    display: flex; flex-direction: column; justify-content: center;
    min-height: clamp(700px, 100svh, 1060px); padding-top: 0;
  }
  .held-portrait {
    position: absolute; top: 0; bottom: 0; right: max(0px, calc((100vw - 1500px) / 2));
    width: auto; height: 100%; aspect-ratio: 1400 / 1900;
  }
  .held-text::before { display: none; }
  .held-portrait picture {
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 97%), linear-gradient(to right, transparent 0%, #000 26%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 60%, transparent 97%), linear-gradient(to right, transparent 0%, #000 26%);
    mask-composite: intersect;
  }
  .inspektor { --box-l: 10%; --box-t: 11%; --box-w: 82%; --box-h: 64%; }
  .augenhoehe span { right: auto; left: calc(var(--auge-x, 71%) + 34px); }
  .chip-a { left: 15%; top: 70%; }
  .held-lead { max-width: 33rem; }
  .held-text { margin-top: 0; padding-top: calc(var(--kopf-h) + 40px); padding-bottom: 110px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .held-text > * { max-width: 46rem; }
  .held-titel { max-width: none; }
  .held-status { position: absolute; left: 0; right: 0; bottom: 0; }
  .held-knoepfe { margin-top: 38px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .held-text > * { max-width: 38rem; }
}

/* =========================================================
   Abschnitte (Stufen)
   ========================================================= */
.stufe { position: relative; padding-block: clamp(84px, 11vw, 168px); }
/* Lineal als Präzisions-Motiv am Anfang jeder Stufe */
.stufe::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px;
  background:
    repeating-linear-gradient(90deg, var(--linie-stark) 0 1px, transparent 1px 80px) top / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--linie) 0 1px, transparent 1px 16px) top / 100% 5px no-repeat;
  opacity: .9;
}
.stufe-kopf { max-width: 52rem; }
.stufe-label {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-size: 13px; color: var(--blau-text);
}
.stufe-label span {
  display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px;
  border: 1px solid currentColor; border-radius: 5px; font-size: 11.5px;
}
.stufe h2, .ich h2, .fragen h2 {
  font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4.75rem);
  line-height: .98; letter-spacing: -.048em; font-weight: 740;
}
.stufe-lead { margin-top: 22px; max-width: 40rem; font-size: clamp(1.06rem, 1rem + .3vw, 1.24rem); color: var(--text-2); }
.stufe-lead a { color: var(--blau-text); font-weight: 600; white-space: nowrap; }

/* Erscheinen beim Scrollen (kein Wischen per clip-path) */
.js [data-sichtbar] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-sichtbar].ist-sichtbar { opacity: 1; transform: none; }

/* ---------- Editor (01 plan) ---------- */
.editor {
  margin-top: clamp(40px, 6vw, 72px);
  border: 1px solid var(--code-linie); border-radius: 16px; overflow: hidden;
  background: var(--code-bg); color: var(--code-text);
  box-shadow: 0 40px 80px -40px rgba(10, 12, 20, .55);
}
.editor-tabs { display: flex; flex-wrap: wrap; background: var(--code-kopf); border-bottom: 1px solid var(--code-linie); }
.editor-tabs button {
  display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto;
  min-height: 48px; padding: 0 16px; border: 0; border-right: 1px solid var(--code-linie); border-bottom: 1px solid var(--code-linie);
  margin-bottom: -1px; background: transparent; color: #8B93A8; font-size: 12.5px; white-space: nowrap;
  transition: color .2s, background-color .2s;
}
.editor-tabs button:hover { color: #E6EAF5; }
.editor-tabs button[aria-selected="true"] { color: #fff; background: var(--code-bg); border-bottom-color: var(--code-bg); box-shadow: inset 0 2px 0 #4D6BFF; }
.editor-tabs button:focus-visible { outline-offset: -3px; }
.dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.dot-html { background: #FF7A45; } .dot-ts { background: #4D6BFF; } .dot-php { background: #9B8CFF; }
.dot-json { background: #F2C46B; } .dot-yml { background: #3BD67F; }
@media (min-width: 900px) { .editor-tabs { flex-wrap: nowrap; } .editor-tabs button { flex: 0 0 auto; border-bottom: 0; margin-bottom: 0; } }

.editor-panel { display: grid; }
.editor-panel[hidden] { display: none; }
.code {
  margin: 0; padding: 22px 16px 22px 0; counter-reset: zeile;
  font-size: 12.5px; line-height: 1.85; color: var(--code-text);
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .02) 0 46px, transparent 46px);
}
.code .z { display: block; position: relative; padding-left: 58px; min-height: 1.85em; }
.code .z::before {
  counter-increment: zeile; content: counter(zeile);
  position: absolute; left: 0; width: 34px; text-align: right; color: var(--code-nr);
}
.js .editor-panel .code .z { opacity: 0; }
.js .editor-panel.ist-getippt .code .z { animation: tippen .32s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 75ms); }
@keyframes tippen { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.t-k { color: var(--code-dim); font-style: italic; }
.t-tag, .t-f { color: var(--t-blau); }
.t-a { color: #C9D0E4; }
.t-s { color: var(--t-gruen); }
.t-n { color: var(--t-gelb); }
.editor-info { padding: 26px 22px 30px; border-top: 1px solid var(--code-linie); }
.editor-info h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); letter-spacing: -.03em; color: #fff; }
.editor-info p { margin-top: 12px; color: #AEB6C8; }
.editor-info .link-pfeil { margin-top: 14px; color: #8EA2FF; }
.liste-haken { margin-top: 18px; display: grid; gap: 10px; }
.liste-haken li { position: relative; padding-left: 28px; color: #D2D8E6; }
.liste-haken li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 4px;
  background: rgba(59, 214, 127, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233BD67F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}
@media (min-width: 900px) {
  .editor-panel { grid-template-columns: 1.12fr 1fr; min-height: 380px; }
  .code { font-size: 13.5px; padding: 30px 24px 30px 0; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
  .editor-info { border-top: 0; border-left: 1px solid var(--code-linie); padding: 36px 36px 36px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
}

/* ---------- Projekte (02 build) ---------- */
.projekte { margin-top: clamp(44px, 6vw, 80px); display: grid; gap: 64px; }
@media (min-width: 860px) { .projekte { grid-template-columns: 1fr 1fr; gap: 80px 48px; } }
.projekt-geraete { position: relative; padding-right: 15%; margin-bottom: 28px; }
.browser {
  position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--linie); background: var(--flaeche); box-shadow: var(--schatten);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.browser-url {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  font-size: 11.5px; color: var(--text-3); background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
}
.browser-url::before { content: ""; width: 34px; height: 8px; flex: none; background: radial-gradient(circle, var(--linie-stark) 3px, transparent 3.5px) 0 0 / 12px 8px repeat-x; }
.browser img { width: 100%; aspect-ratio: 720 / 450; object-fit: cover; object-position: top; }
.handy {
  position: absolute; right: 0; bottom: -10%; width: 24%; overflow: hidden;
  border: 4px solid #0B0D12; border-radius: 18px; background: #0B0D12;
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .6);
  transition: transform .5s var(--ease);
}
.handy img { width: 100%; aspect-ratio: 300 / 577; object-fit: cover; object-position: top; border-radius: 13px; }
.projekt:hover .browser { transform: translateY(-4px); }
.projekt:hover .handy { transform: translateY(-12px); }
.projekt-tags { font-size: 12px; color: var(--blau-text); margin-bottom: 8px; }
.projekt h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); letter-spacing: -.03em; }
.projekt p:not(.projekt-tags) { margin-top: 8px; color: var(--text-2); max-width: 34rem; }

/* „Rendern“ statt Wischen: Bild entsteht unter einer Scan-Linie */
.js [data-render] img { filter: grayscale(1) brightness(.55) contrast(1.15) blur(5px); transition: filter 1.3s var(--ease) .15s; }
.js [data-render].ist-sichtbar img { filter: none; }
.js [data-render] .browser::after, .js .ich-bild[data-render]::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; opacity: 0;
  background: #4D6BFF; box-shadow: 0 0 18px 4px rgba(77, 107, 255, .65);
}
.js [data-render].ist-sichtbar .browser::after, .js .ich-bild[data-render].ist-sichtbar::after { animation: scan 1.25s var(--ease) forwards; }
@keyframes scan { 0% { top: 0; opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* Zitat */
.zitat { margin: clamp(80px, 10vw, 140px) 0 0; max-width: 58rem; }
.zitat blockquote { margin: 0; }
.zitat blockquote p {
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.6rem); line-height: 1.18; letter-spacing: -.035em; font-weight: 560;
}
.zitat figcaption { margin-top: 20px; color: var(--text-2); font-size: .97rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.zitat figcaption .mono { color: var(--text-3); font-size: 12px; }
.sterne { color: #F5B301; letter-spacing: 2px; }

/* Kundenlogos (statisch, kein Laufband) */
.kunden { margin-top: clamp(64px, 8vw, 110px); }
.kunden-titel { font-size: 12.5px; color: var(--text-3); margin-bottom: 18px; }
.kunden-liste { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.kunden-liste li { display: grid; place-items: center; height: 84px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 10px; }
.kunden-logo {
  display: block; max-width: 100%;
  width: 120px; height: 34px;
  width: calc(40px * sqrt(var(--q, 3))); height: calc(40px / sqrt(var(--q, 3)));
  background: var(--text-3);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
  transition: background-color .25s;
}
.kunden-liste li:hover .kunden-logo { background: var(--text); }
@media (min-width: 640px) { .kunden-liste li { height: 100px; } }
@media (min-width: 1024px) { .kunden-liste { grid-template-columns: repeat(9, 1fr); } .kunden-liste li { height: 104px; } }

/* Eigene Plugins */
.pakete { margin-top: clamp(80px, 10vw, 140px); display: grid; gap: 32px; align-items: center; }
.pakete h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -.04em; line-height: 1.05; }
.pakete-text p { margin-top: 16px; color: var(--text-2); max-width: 32rem; }
@media (min-width: 1024px) { .pakete { grid-template-columns: .8fr 1.2fr; gap: 56px; } }

.terminal {
  border: 1px solid var(--code-linie); border-radius: 14px; overflow: hidden;
  background: var(--code-bg); color: var(--code-text); box-shadow: 0 30px 60px -36px rgba(10, 12, 20, .6);
}
.terminal-kopf {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px;
  font-size: 11.5px; color: #7A84A3; background: var(--code-kopf); border-bottom: 1px solid var(--code-linie);
}
.terminal-befehl { padding: 14px 18px 4px; font-size: 13px; color: #C9D0E4; }
.t-prompt { color: #3BD67F; margin-right: 6px; }
.t-ok { color: #3BD67F; }
.t-warn { color: #F5A524; }
.t-dim { color: #7A84A3; }
.paket-liste { padding: 8px 8px 4px; }
.paket-liste a {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline;
  padding: 12px 10px; border-radius: 9px; text-decoration: none; min-height: 48px;
  transition: background-color .2s;
}
.paket-liste a:hover, .paket-liste a:focus-visible { background: #121621; }
.paket-name { color: #fff; font-size: 13.5px; font-weight: 600; }
.paket-wo { color: #7A84A3; font-size: 12px; text-align: right; }
.paket-was { grid-column: 1 / -1; color: #AEB6C8; font-size: .94rem; }
.paket-liste a:hover .paket-name { color: #8EA2FF; }
.paket-liste + .terminal-befehl { padding-bottom: 18px; }
@media (min-width: 720px) {
  .paket-liste a { grid-template-columns: 11rem 1fr auto; }
  .paket-was { grid-column: auto; }
}

/* ---------- whoami ---------- */
.ich { padding-block: clamp(84px, 11vw, 160px); background: var(--flaeche); border-block: 1px solid var(--linie); }
.ich-raster { display: grid; gap: 40px; align-items: center; }
.ich-bild { position: relative; overflow: hidden; border-radius: 16px; }
.ich-bild img { width: 100%; aspect-ratio: 1200 / 840; object-fit: cover; }
.ich h2 { font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.4rem); }
.ich-text p:not(.stufe-label) { margin-top: 18px; color: var(--text-2); max-width: 36rem; }
.ich-text h2 + p { margin-top: 24px; }
.terminal-klein { margin-top: 30px; }
.ich-text .terminal .terminal-befehl { color: #C9D0E4; margin-top: 0; max-width: none; }
.werdegang { margin: 0; padding: 8px 18px 18px; display: grid; gap: 6px; font-size: 13px; }
.werdegang div { display: grid; grid-template-columns: 4.6rem 1fr; gap: 12px; }
.werdegang dt { color: #8EA2FF; }
.werdegang dd { margin: 0; color: #C9D0E4; }
@media (min-width: 1024px) { .ich-raster { grid-template-columns: 1.05fr 1fr; gap: 72px; } }

/* ---------- 03 test ---------- */
.test-raster { display: grid; gap: 44px; align-items: start; }
.hinweis {
  margin-top: 24px; max-width: 36rem; padding: 14px 16px; font-size: .95rem; color: var(--text-2);
  border: 1px solid var(--linie); border-left: 3px solid var(--blau); border-radius: 10px; background: var(--flaeche);
}
.hinweis b { color: var(--text); }
.tests { padding: 6px 18px 4px; display: grid; gap: 2px; counter-reset: test; }
.tests li {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px dashed #1D2130; font-size: 13px;
}
.test-status {
  grid-row: span 2; align-self: start; min-width: 92px; text-align: center;
  padding: 3px 8px; border-radius: 5px; font-size: 11.5px;
  background: rgba(59, 214, 127, .14); color: #3BD67F;
}
.test-name { color: #fff; font-weight: 600; }
.test-was { color: #98A1B4; font-size: 12.5px; }
.tests-summe { padding-bottom: 6px; }
.testlauf-fuss { padding: 6px 18px 18px; font-size: 12px; color: #7A84A3; }
/* Testlauf-Animation */
.js .testlauf:not(.ist-fertig) .tests li { opacity: .35; }
.js .testlauf:not(.ist-fertig) .tests li .test-status { color: transparent; background: rgba(255, 255, 255, .05); position: relative; }
.js .testlauf .tests li.laeuft { opacity: 1; }
.js .testlauf .tests li.laeuft .test-status::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border: 2px solid #4D6BFF; border-right-color: transparent; border-radius: 50%; animation: drehen .7s linear infinite;
}
.js .testlauf .tests li.ok { opacity: 1; }
.js .testlauf .tests li.ok .test-status { color: #3BD67F; background: rgba(59, 214, 127, .14); }
.js .testlauf .tests li.ok .test-status::after { display: none; }
.js .testlauf:not(.ist-fertig) .tests-summe { opacity: 0; }
.tests-summe { transition: opacity .4s; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (min-width: 640px) {
  .tests li { grid-template-columns: 96px 8.5rem 1fr; }
  .test-status { grid-row: auto; }
}
@media (min-width: 1024px) { .test-raster { grid-template-columns: .9fr 1.1fr; gap: 64px; } .testlauf { margin-top: 46px; } }

/* ---------- 04 deploy: Commit-Graph ---------- */
.deploy-raster { display: grid; gap: 0 72px; align-items: start; }
@media (min-width: 1100px) {
  .deploy-raster { grid-template-columns: .85fr 1.15fr; }
  .deploy-raster .stufe-kopf { position: sticky; top: calc(var(--kopf-h) + 48px); }
  .deploy-raster .graph { margin-top: 8px; }
}
.graph { position: relative; margin-top: clamp(48px, 7vw, 88px); padding-left: 44px; display: grid; gap: 44px; max-width: 54rem; }
.graph::before, .graph::after { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; }
.graph::before { background: var(--linie-stark); }
.graph::after { background: var(--blau); transform-origin: top; transform: scaleY(var(--g, 0)); box-shadow: 0 0 10px var(--blau-glut); }
.commit { position: relative; }
.commit::before {
  content: ""; position: absolute; left: -40px; top: 4px; width: 16px; height: 16px; border-radius: 50%; z-index: 1;
  background: var(--bg); border: 2px solid var(--blau);
  transition: background-color .4s, box-shadow .4s;
}
.commit.ist-sichtbar::before { background: var(--blau); box-shadow: 0 0 0 5px var(--blau-weich); }
.commit-zweig { margin-left: 36px; }
.commit-zweig::before { left: -76px; }
.commit-zweig::after {
  content: ""; position: absolute; left: -66px; top: -44px; bottom: -44px; width: 32px;
  border: 2px dashed var(--linie-stark); border-left: 0; border-radius: 0 24px 24px 0;
}
.commit-hash { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
.commit h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); letter-spacing: -.03em; }
.commit-typ { color: var(--blau-text); font-weight: 500; font-size: .8em; margin-right: 4px; }
.commit-text p { margin-top: 8px; color: var(--text-2); max-width: 40rem; }
.commit-text .commit-zeit { margin-top: 10px; font-size: 12px; color: var(--text-3); }
.commit-head::before { background: #16C35F; border-color: #16C35F; animation: puls-punkt 2.4s ease-out infinite; }
.commit-head h3 { color: var(--gruen); }
.commit-head .commit-typ { color: var(--gruen); }
@media (min-width: 900px) {
  .graph { padding-left: 132px; }
  .graph::before, .graph::after { left: 99px; }
  .commit::before { left: -40px; }
  .commit-hash { position: absolute; left: -132px; top: 3px; width: 76px; text-align: right; margin: 0; font-size: 12px; }
  .commit-zweig .commit-hash { left: -168px; }
}

/* ---------- 05 läuft (dunkle Bühne in beiden Modi) ---------- */
.laeuft {
  background:
    radial-gradient(70% 45% at 50% 0%, rgba(31, 61, 255, .26), transparent 70%),
    radial-gradient(40% 30% at 90% 70%, rgba(31, 61, 255, .10), transparent 70%),
    #050609;
  overflow: hidden;
}
.laeuft::before { opacity: .35; }
.laeuft-kopf h2 em { color: #5B78FF; text-shadow: 0 0 40px rgba(31, 61, 255, .7); }
.monitor {
  margin-top: clamp(44px, 6vw, 72px); border: 1px solid #1D2130; border-radius: 16px; overflow: hidden;
  background: rgba(10, 12, 18, .9); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.monitor-kopf { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; font-size: 12px; color: #C9D0E4; border-bottom: 1px solid #1D2130; flex-wrap: wrap; }
.monitor-kopf > span { display: inline-flex; align-items: center; gap: 8px; }
.puls { width: 100%; height: 64px; }
.puls path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.puls .puls-basis { stroke: rgba(59, 214, 127, .28); }
.puls .puls-licht { stroke: #3BD67F; filter: drop-shadow(0 0 6px rgba(59, 214, 127, .8)); stroke-dasharray: 90 1000; stroke-dashoffset: 90; }
.js .monitor.ist-sichtbar .puls .puls-licht { animation: puls-linie 3.4s linear infinite; }
@keyframes puls-linie { from { stroke-dashoffset: 1090; } to { stroke-dashoffset: 0; } }
.log { padding: 4px 18px 16px; font-size: 12.5px; }
.log li { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0 12px; padding: 9px 0; border-top: 1px dashed #1D2130; }
.log-zeit { color: #7A84A3; }
.log-art { color: #8EA2FF; }
.log-text { grid-column: 1 / -1; color: #C9D0E4; }
.log-text b { font-weight: 700; margin-right: 6px; }
.js .log li { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .log li.ist-da { opacity: 1; transform: none; }
@media (min-width: 720px) {
  .log li { grid-template-columns: 5.6rem 6.4rem 1fr; }
  .log-text { grid-column: auto; }
}
.leistungen { margin-top: clamp(56px, 7vw, 96px); display: grid; gap: 1px; background: #1A1E29; border: 1px solid #1A1E29; border-radius: 16px; overflow: hidden; }
.leistungen li { background: #07080B; padding: 26px 22px 28px; }
.leistungen svg { width: 28px; height: 28px; fill: none; stroke: #7088FF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.leistungen h3 { font-size: 1.16rem; letter-spacing: -.02em; color: #fff; }
.leistungen p { margin-top: 8px; color: #A9B1C2; font-size: .98rem; }
@media (min-width: 640px) { .leistungen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .leistungen { grid-template-columns: repeat(3, 1fr); } .leistungen li { padding: 32px 30px 34px; } }
.laeuft-abschluss { margin-top: clamp(64px, 9vw, 120px); display: grid; gap: 40px; align-items: end; }
.grosse-zahl { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 6px; color: #fff; }
.grosse-zahl .zahl { font-size: clamp(5.5rem, 3rem + 12vw, 12rem); line-height: .82; font-weight: 780; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.grosse-zahl .plus { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); color: #5B78FF; font-weight: 700; line-height: 1; }
.grosse-zahl .zahl-text { grid-column: 1 / -1; margin-top: 14px; color: #A9B1C2; font-size: 1.05rem; }
.zitat-hell { margin: 0; }
.zitat-hell blockquote p { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); color: #fff; }
.laeuft-knoepfe { display: grid; gap: 12px; }
.laeuft-knoepfe .knopf-geist { color: #fff; border-color: rgba(255, 255, 255, .22); }
.laeuft-knoepfe .knopf-geist:hover { border-color: #7088FF; background: rgba(77, 107, 255, .14); }
@media (min-width: 520px) { .laeuft-knoepfe { display: flex; flex-wrap: wrap; } }
@media (min-width: 1024px) {
  .laeuft-abschluss { grid-template-columns: .8fr 1.2fr; column-gap: 72px; }
  .laeuft-knoepfe { grid-column: 1 / -1; }
}

/* ---------- Fragen ---------- */
.fragen { padding-block: clamp(84px, 11vw, 160px); }
.fragen-raster { display: grid; gap: 40px; }
@media (min-width: 1024px) { .fragen-raster { grid-template-columns: .85fr 1.15fr; gap: 72px; } }
.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none;
  font-weight: 620; font-size: 1.08rem; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--mono); font-size: 1.2rem; color: var(--blau-text); flex: none;
  width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--linie); border-radius: 8px;
  transition: transform .3s var(--ease), background-color .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--blau-weich); }
.faq summary:hover { color: var(--blau-text); }
.faq details p { padding: 0 48px 22px 0; color: var(--text-2); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* ---------- Kontakt ---------- */
.kontakt { background: var(--flaeche); border-top: 1px solid var(--linie); }
.kontakt-raster { display: grid; gap: 44px; align-items: start; }
@media (min-width: 1024px) { .kontakt-raster { grid-template-columns: .9fr 1.1fr; gap: 72px; } }
.kontakt-wege { margin-top: 32px; display: grid; gap: 4px; }
.kontakt-wege a, .kontakt-ort {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 10px; margin-inline: -10px;
  border-radius: 10px; text-decoration: none; transition: background-color .2s;
}
.kontakt-wege a:hover { background: var(--blau-weich); }
.kontakt-wege svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--blau-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-wege a > span, .kontakt-ort > span { display: grid; font-weight: 560; overflow-wrap: anywhere; }
.kontakt-wege small { font-size: 11.5px; color: var(--text-3); font-weight: 400; }

.formular {
  border: 1px solid var(--linie); border-radius: 18px; background: var(--bg);
  padding: 0 18px 22px; box-shadow: var(--schatten);
}
.formular-kopf {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 0 -18px 20px; padding: 12px 18px; font-size: 11.5px; color: var(--text-3);
  border-bottom: 1px solid var(--linie);
}
.themen { border: 0; margin: 0 0 18px; padding: 0; }
.themen legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--linie-stark); border-radius: 9px; font-size: .94rem; font-weight: 520;
  background: var(--flaeche); transition: background-color .2s, color .2s, border-color .2s;
}
.chip input:checked + span { background: var(--blau); border-color: var(--blau); color: #fff; }
.chip input:checked + span::before { content: "✓"; font-family: var(--mono); margin-right: 8px; font-size: .85em; }
.chip input:focus-visible + span { outline: 2px solid var(--blau-text); outline-offset: 2px; }
.chip:hover span { border-color: var(--blau-text); }
.feld { display: grid; gap: 7px; margin-bottom: 16px; }
.feld label { font-weight: 600; font-size: .96rem; }
.optional { font-weight: 400; color: var(--text-3); }
.feld input, .feld textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font-size: 16px;
  border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--flaeche); color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.feld textarea { resize: vertical; min-height: 132px; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--text-3); }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--blau-text); box-shadow: 0 0 0 4px var(--blau-weich); }
.feld [aria-invalid="true"] { border-color: var(--fehler); }
.feld-fehler { color: var(--fehler); font-size: .9rem; font-weight: 500; }
.feld-paar { display: grid; gap: 0 14px; }
@media (min-width: 640px) { .feld-paar { grid-template-columns: 1fr 1fr; } .formular { padding: 0 26px 28px; } .formular-kopf { margin: 0 -26px 24px; padding-inline: 26px; } }
.formular-ende { display: grid; gap: 14px; margin-top: 6px; }
.formular-ende .knopf { width: 100%; }
@media (min-width: 640px) { .formular-ende .knopf { width: auto; justify-self: start; } }
.formular-info { font-size: .88rem; color: var(--text-3); }
.formular-info a { color: var(--blau-text); }
.formular-ersatz[hidden] { display: none; }
.formular-ersatz { margin-top: 18px; padding: 16px; border: 1px dashed var(--linie-stark); border-radius: 12px; display: grid; gap: 12px; }
.formular-ersatz pre { margin: 0; padding: 12px; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--flaeche); border-radius: 8px; max-height: 220px; overflow: auto; }
.formular-ersatz .knopf { justify-self: start; }

/* ---------- Fußzeile ---------- */
.fuss { background: #050609; color: #ECEFF5; padding-top: 72px; color-scheme: dark; }
.fuss-innen { display: grid; gap: 40px; }
.fuss-logo .logo { width: 220px; }
.fuss .logo-zeichen { fill: #4D6BFF; } .fuss .logo-name { fill: #fff; } .fuss .logo-software { fill: #7088FF; }
.fuss-claim { margin-top: 18px; color: #A9B1C2; max-width: 22rem; }
.fuss-status { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #838CA0; }
.fuss-titel { font-size: 12px; font-weight: 500; color: #838CA0; margin-bottom: 14px; }
.fuss-spalte ul { display: grid; gap: 4px; }
.fuss-spalte li { color: #C9D0E4; }
.fuss-spalte a, .fuss-knopf {
  display: inline-flex; align-items: center; min-height: 40px; color: #C9D0E4; text-decoration: none;
  border: 0; background: none; padding: 0; text-align: left; transition: color .2s;
}
.fuss-spalte li:not(:has(a, button)) { padding-block: 8px; line-height: 1.5; }
.fuss-spalte a:hover, .fuss-knopf:hover { color: #8EA2FF; }
.fuss-unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin-top: 56px; padding-block: 22px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid #1A1E29;
  font-size: 11.5px; color: #838CA0;
}
@media (min-width: 760px) { .fuss-innen { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
@media (max-width: 1023.98px) { .fuss { padding-bottom: 84px; } }

/* ---------- Handy-Leiste ---------- */
.handy-leiste {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45;
  display: flex; gap: 8px; padding: 8px; border-radius: 16px;
  background: var(--flaeche); border: 1px solid var(--linie); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .45);
  transform: translateY(160%); transition: transform .45s var(--ease);
}
.handy-leiste .knopf { flex: 1; }
.handy-leiste.ist-da { transform: none; }
@media (min-width: 1024px) { .handy-leiste { display: none; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 120;
  max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 12px;
  background: #0E1119; color: #ECEFF5; border: 1px solid #262B39; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6);
  font-size: .95rem; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.ist-da { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1024px) { .toast { bottom: 28px; } }

/* ---------- Rechtstexte & 404 ---------- */
.recht { padding: calc(var(--kopf-h) + clamp(48px, 8vw, 96px)) 0 clamp(72px, 10vw, 140px); }
.recht .rahmen { max-width: calc(820px + 2 * var(--rand)); }
.recht h1 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4.2rem); letter-spacing: -.05em; line-height: 1; hyphens: auto; overflow-wrap: anywhere; }
.recht h2, .recht h3 { hyphens: auto; }
.recht h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); letter-spacing: -.025em; margin-top: 52px; }
.recht h3 { font-size: 1.1rem; margin-top: 28px; }
.recht p, .recht li { color: var(--text-2); margin-top: 12px; }
.recht ul { list-style: disc; padding-left: 1.2em; }
.recht a { color: var(--blau-text); overflow-wrap: anywhere; }
.recht address { font-style: normal; color: var(--text); margin-top: 12px; line-height: 1.65; }
.recht .stand { margin-top: 48px; font-size: .9rem; color: var(--text-3); }
.recht-label { margin-bottom: 18px; }
.fehlerseite { min-height: 80svh; display: grid; place-items: center; padding: calc(var(--kopf-h) + 40px) 0 80px; }
.fehlerseite .terminal { max-width: 640px; width: 100%; }
.fehlerseite h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); letter-spacing: -.05em; margin-top: 28px; }
.fehlerseite p { margin-top: 12px; color: var(--text-2); }
.fehlerseite .held-knoepfe { margin-top: 26px; }
.fehlerseite .held-knoepfe .knopf-geist { color: var(--text); border-color: var(--linie-stark); }


/* =========================================================
   Mehrseitig: Navigation, Im-Aufbau, Unterseiten, Sparten,
   Turnus, Programme, Blog, Über mich, Kontakt
   ========================================================= */
:root { --turnus: #F97316; --turnus-hover: #EA580C; --turnus-text: #C2410C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --turnus-text: #FB923C; } }
:root[data-theme="dunkel"], .buehne { --turnus-text: #FB923C; }

/* Hauptnavigation */
.kopf-nav { display: none; }
@media (min-width: 1180px) {
  .kopf-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
  .kopf-logo { margin-right: 28px; }
  .kopf-nav a {
    position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
    border-radius: 8px; color: var(--text-2); font-size: .94rem; font-weight: 520; text-decoration: none;
    transition: color .2s, background-color .2s;
  }
  .kopf-nav a:hover { color: var(--text); background: var(--blau-weich); }
  .kopf-nav a[aria-current="page"] { color: var(--text); }
  .kopf-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--blau); }
  .kopf-stufe { display: none !important; }
  .knopf-palette-text { display: none !important; }
}

/* Im Aufbau */
.aufbau { position: relative; z-index: 4; border-bottom: 1px solid rgba(245, 165, 36, .22);
  background: repeating-linear-gradient(-45deg, rgba(245, 165, 36, .07) 0 10px, rgba(245, 165, 36, .02) 10px 20px), rgba(5, 6, 9, .88); }
.aufbau-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-block: 10px; font-size: .9rem; color: #D7DCEA; }
.aufbau-innen p { flex: 1 1 auto; margin: 0; }
.aufbau-lang { display: none; }
@media (max-width: 759.98px) { .aufbau-innen { flex-wrap: nowrap; font-size: .85rem; } .aufbau-innen b { margin-right: 4px; } }
@media (min-width: 760px) { .aufbau-lang { display: inline; } .aufbau-kurz { display: none; } }
.aufbau-innen b { color: #F5A524; font-size: 12px; font-weight: 600; margin-right: 8px; text-transform: uppercase; letter-spacing: .06em; }
.aufbau-innen a { color: #FBBF5A; font-size: 12.5px; text-decoration: none; white-space: nowrap; min-height: 32px; display: inline-flex; align-items: center; }
.aufbau-innen a:hover { text-decoration: underline; }
.aufbau-licht { width: 9px; height: 9px; border-radius: 50%; background: #F5A524; flex: none; animation: puls-gelb 1.8s ease-out infinite; display: inline-block; }
@keyframes puls-gelb { 0% { box-shadow: 0 0 0 0 rgba(245, 165, 36, .6); } 70% { box-shadow: 0 0 0 9px rgba(245, 165, 36, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0); } }
@media (min-width: 1024px) {
  .held:not(.held-seite) > .aufbau { position: absolute; left: 0; right: 0; top: var(--kopf-h); }
  .held:not(.held-seite) .inspektor { --box-t: 19%; --box-h: 58%; }
  .held:not(.held-seite) .held-lead { max-width: 31rem; }
}

/* Keyword-Zeile im H1 der Startseite */
.held-titel .held-kicker {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px .04em;
  font: 400 12.5px/1.4 var(--mono); letter-spacing: 0; color: #A9B1C2; text-shadow: none;
}

/* Unterseiten-Kopf */
.held-seite { min-height: 0; padding-top: var(--kopf-h); }
.held-seite-raster { position: relative; z-index: 3; display: grid; gap: 40px; align-items: center; padding-block: 48px 64px; }
.held-seite-text { position: relative; z-index: 3; padding-block: 48px 64px; }
.held-seite-raster .held-seite-text { padding: 0; }
.krumen { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #838CA0; margin-bottom: 26px; }
.krumen a { color: #A9B1C2; text-decoration: none; }
.krumen a:hover { color: #fff; text-decoration: underline; }
.krumen [aria-current] { color: #8EA2FF; }
.seite-kicker { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #A9B1C2; margin-bottom: 16px; }
.punkt-blau { width: 8px; height: 8px; border-radius: 50%; background: #4D6BFF; box-shadow: 0 0 12px #4D6BFF; display: inline-block; flex: none; }
.seite-titel { font-size: clamp(2.5rem, 1.5rem + 4.6vw, 5.4rem); line-height: .96; letter-spacing: -.052em; font-weight: 750; color: #fff; hyphens: manual; }
.seite-titel em { color: #5B78FF; text-shadow: 0 0 40px rgba(31, 61, 255, .6); }
.seite-lead { margin-top: 22px; max-width: 38rem; font-size: clamp(1.06rem, 1rem + .35vw, 1.26rem); color: #B4BCCD; }
.held-seite .held-knoepfe { margin-top: 30px; }
.held-seite-bild { position: relative; padding-right: 14%; }
.held-seite-bild .handy { width: 22%; bottom: -8%; }
.held-seite-bild .portrait-rahmen { margin-right: -14%; }
@media (min-width: 1024px) {
  .held-seite-raster { grid-template-columns: 1fr 1.05fr; gap: 56px; padding-block: 72px 104px; }
  .held-seite-text { padding-block: 72px 96px; }
}
.browser-dunkel { border-color: #232838; background: #0D0F14; }
.browser-dunkel .browser-url { background: #141720; border-color: #232838; color: #838CA0; }
.browser picture { display: block; }
.browser .b1610 { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* Zwei Sparten */
.sparten { margin-top: clamp(44px, 6vw, 80px); display: grid; gap: 24px; }
@media (min-width: 960px) { .sparten { grid-template-columns: 1fr 1fr; } }
.sparte {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 26px;
  border: 1px solid var(--linie); border-radius: 20px; background: var(--flaeche); color: var(--text); text-decoration: none;
  transition: border-color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); overflow: hidden;
}
.sparte:hover { border-color: var(--blau-text); transform: translateY(-4px); box-shadow: 0 30px 60px -30px var(--blau-glut); }
.sparte-bild { position: relative; padding-right: 15%; margin-bottom: 26px; }
.sparte-bild .handy { width: 23%; }
.sparte-pfad { font-size: 12.5px; color: var(--blau-text); }
.sparte h3 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); letter-spacing: -.045em; line-height: 1; }
.sparte p { color: var(--text-2); }
.sparte-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; font-size: 12px; }
.sparte-liste li { padding: 5px 10px; border: 1px solid var(--linie-stark); border-radius: 6px; color: var(--text-2); }
.sparte .link-pfeil { margin-top: auto; }
.sparte-software { background: #07080B; border-color: #1F232D; color: #ECEFF5; }
.sparte-software p { color: #A9B1C2; }
.sparte-software .sparte-pfad, .sparte-software .link-pfeil { color: #8EA2FF; }
.sparte-software .sparte-liste li { border-color: #333949; color: #C9D0E4; }
.sparte-badge {
  position: absolute; top: 18px; right: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px; font-size: 11.5px; color: #FBBF5A; background: rgba(5, 6, 9, .85); border: 1px solid rgba(245, 165, 36, .4);
}

/* Turnus-Teaser */
.turnus-teaser {
  margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 32px; align-items: center; overflow: hidden;
  padding: 28px 22px 40px; border-radius: 22px; border: 1px solid #262033;
  background: radial-gradient(60% 80% at 100% 0%, rgba(249, 115, 22, .16), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(31, 61, 255, .16), transparent 60%), #06070B;
}
.turnus-teaser h2, .turnus-teaser h3 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); letter-spacing: -.045em; line-height: 1.02; color: #fff; }
.turnus-teaser p { color: #B4BCCD; margin-top: 14px; max-width: 36rem; }
.turnus-teaser .liste-haken { margin-top: 18px; }
.turnus-marke { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px !important; color: #fff !important; font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
.turnus-icon { width: 40px; height: 40px; border-radius: 10px; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: #FDBA74; border: 1px solid rgba(249, 115, 22, .45); background: rgba(249, 115, 22, .1); letter-spacing: 0; }
.status-pill.gruen { color: #86EFAC; border-color: rgba(59, 214, 127, .4); background: rgba(59, 214, 127, .08); }
.knopf-turnus { --k-bg: var(--turnus); color: #fff; box-shadow: 0 8px 24px -10px rgba(249, 115, 22, .7); }
.knopf-turnus:hover { --k-bg: var(--turnus-hover); }
.knopf-turnus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.turnus-teaser .knopf-geist, .buehne .knopf-geist { color: #fff; border-color: rgba(255, 255, 255, .22); }
.buehne .knopf-geist:hover { border-color: #7088FF; background: rgba(77, 107, 255, .14); }
.turnus-teaser .held-knoepfe { margin-top: 26px; }
.turnus-teaser-bild { position: relative; padding-right: 12%; }
.turnus-teaser-bild .handy { width: 22%; bottom: -6%; }
@media (min-width: 1024px) { .turnus-teaser { grid-template-columns: .9fr 1.1fr; gap: 56px; padding: 56px; } }

/* Programme (Software-Seite) */
.programme { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 48px; }
@media (min-width: 860px) { .programme { grid-template-columns: 1fr 1fr; gap: 64px 36px; } }
@media (min-width: 1200px) { .programme { grid-template-columns: repeat(3, 1fr); } }
.programm { display: flex; flex-direction: column; gap: 8px; }
.programm .projekt-geraete { margin-bottom: 22px; }
.programm-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.programm h3 { font-size: 1.45rem; letter-spacing: -.03em; }
.programm p { color: var(--text-2); }
.programm-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: auto; }
.programm .status-pill { color: var(--turnus-text); }
.programm .status-pill.gruen { color: var(--gruen); }
.programm-intern { padding: 24px; border-radius: 16px; background: var(--code-bg); color: var(--code-text); border: 1px solid var(--code-linie); }
.programm-intern h3 { color: #fff; }
.programm-intern p { color: #AEB6C8; }
.programm-intern .projekt-tags { color: #8EA2FF; }

/* Karten-Raster allgemein */
.karten { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; }
.karten > li { background: var(--flaeche); padding: 26px 22px 28px; }
.karten svg { width: 28px; height: 28px; fill: none; stroke: var(--blau-text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; }
.karten h3 { font-size: 1.16rem; letter-spacing: -.02em; }
.karten p { margin-top: 8px; color: var(--text-2); font-size: .98rem; }
@media (min-width: 640px) { .karten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .karten-4 { grid-template-columns: repeat(4, 1fr); } .karten-3 { grid-template-columns: repeat(3, 1fr); } }
.technik { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.technik li { font-family: var(--mono); font-size: 12.5px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--linie-stark); color: var(--text-2); }
.abschnitt { padding-block: clamp(72px, 10vw, 140px); position: relative; }
.abschnitt-flaeche { background: var(--flaeche); border-block: 1px solid var(--linie); }
.abschnitt h2 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem); line-height: .98; letter-spacing: -.048em; font-weight: 740; }
.hinweis-link { margin-top: 24px; color: var(--text-2); }
.hinweis-link a { color: var(--blau-text); font-weight: 600; }

/* Turnus-Galerie */
.galerie { margin-top: clamp(36px, 5vw, 60px); }
.galerie-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.galerie-tabs button {
  min-height: 44px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--linie-stark); background: var(--flaeche);
  color: var(--text-2); font-family: var(--mono); font-size: 12.5px; transition: background-color .2s, border-color .2s, color .2s;
}
.galerie-tabs button:hover { border-color: var(--turnus); color: var(--text); }
.galerie-tabs button[aria-selected="true"] { background: var(--turnus); border-color: var(--turnus); color: #fff; }
.galerie-panel[hidden] { display: none; }
.galerie-panel { display: grid; gap: 18px; }
.galerie-panel .browser { box-shadow: 0 40px 80px -40px rgba(10, 12, 20, .6); }
.galerie-panel p { color: var(--text-2); max-width: 46rem; }
.galerie-panel p b { color: var(--text); }
.js .galerie-panel.ist-neu .browser img { animation: einblenden .5s var(--ease); }
@keyframes einblenden { from { opacity: 0; transform: scale(1.01); } }
.handys { display: flex; gap: 18px; justify-content: center; }
.handys .handy { position: relative; right: auto; bottom: auto; width: min(44%, 230px); }
.handys .handy:nth-child(2) { transform: translateY(32px); }
.mit-handys { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .mit-handys { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.schritte { margin-top: 40px; display: grid; gap: 16px; counter-reset: schritt; }
.schritte li { position: relative; padding: 22px 22px 22px 64px; border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche); }
.schritte li::before { counter-increment: schritt; content: "0" counter(schritt); position: absolute; left: 22px; top: 24px; font-family: var(--mono); font-size: 13px; color: var(--turnus-text); }
.schritte h3 { font-size: 1.15rem; }
.schritte p { margin-top: 6px; color: var(--text-2); }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(3, 1fr); } }
.turnus-seite .stufe-label, .turnus-seite .abschnitt .link-pfeil { color: var(--turnus-text); }
.turnus-seite .karten svg { stroke: var(--turnus-text); }
.held-turnus { background: radial-gradient(50% 70% at 80% 30%, rgba(249, 115, 22, .14), transparent 70%), #050609; }
.held-turnus .seite-titel em { color: #FB923C; text-shadow: 0 0 40px rgba(249, 115, 22, .5); }

/* CTA-Band */
.cta-band { position: relative; padding-block: clamp(72px, 10vw, 128px); background: radial-gradient(60% 80% at 50% 0%, rgba(31, 61, 255, .24), transparent 70%), #050609; }
.cta-band-innen { display: grid; gap: 28px; align-items: end; }
.cta-band h2 { font-size: clamp(2.2rem, 1.3rem + 4vw, 4.4rem); letter-spacing: -.05em; line-height: .98; color: #fff; }
.cta-band .stufe-lead, .cta-band-innen > div > p:not(.stufe-label) { margin-top: 16px; color: #B4BCCD; max-width: 34rem; font-size: 1.1rem; }
.cta-band-knoepfe { display: grid; gap: 12px; }
@media (min-width: 520px) { .cta-band-knoepfe { display: flex; flex-wrap: wrap; } }
@media (min-width: 1024px) { .cta-band-innen { grid-template-columns: 1.3fr 1fr; } .cta-band-knoepfe { justify-content: flex-end; } }

/* Blog */
.blog-teaser { padding-block: clamp(84px, 11vw, 150px); background: var(--flaeche); border-block: 1px solid var(--linie); }
.blog-liste { margin-top: clamp(36px, 5vw, 56px); display: grid; gap: 40px 32px; }
@media (min-width: 720px) { .blog-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .blog-liste:not(.blog-liste-zwei) { grid-template-columns: repeat(3, 1fr); } }
.blog-teaser .blog-liste + .link-pfeil { margin-top: 28px; }
.blog-karte a { display: flex; flex-direction: column; gap: 8px; height: 100%; text-decoration: none; color: inherit; }
.blog-karte-bild { overflow: hidden; border-radius: 14px; border: 1px solid var(--linie); margin-bottom: 10px; background: #0A0C12; }
.blog-karte-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .7s var(--ease); }
.blog-karte a:hover .blog-karte-bild img { transform: scale(1.04); }
.blog-karte-meta { font-size: 12px; color: var(--blau-text); }
.blog-karte h2, .blog-karte h3 { font-size: clamp(1.25rem, 1.12rem + .5vw, 1.5rem); letter-spacing: -.03em; line-height: 1.15; }
.blog-karte a:hover h2, .blog-karte a:hover h3 { color: var(--blau-text); }
.blog-karte p:not(.blog-karte-meta) { color: var(--text-2); }
.blog-karte .link-pfeil { margin-top: auto; }
.held-artikel .seite-titel { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.2rem); max-width: 22ch; }
.held-artikel .held-seite-text { padding-bottom: 88px; }
.artikel-info { margin-top: 22px; font-size: 12.5px; color: #A9B1C2; }
.artikel-rahmen { padding-bottom: clamp(64px, 9vw, 120px); }
.artikel-titelbild { margin: -48px 0 0; position: relative; z-index: 4; }
.artikel-titelbild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; border: 1px solid var(--linie); box-shadow: var(--schatten); }
.artikel-titelbild figcaption, .artikel-bild figcaption { margin-top: 10px; font-size: 12px; color: var(--text-3); }
.artikel-raster { display: grid; gap: 32px; margin-top: 48px; }
.artikel-toc { font-size: .95rem; }
.artikel-toc p { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.artikel-toc ol { display: grid; gap: 2px; border-left: 1px solid var(--linie); }
.artikel-toc a { display: block; padding: 6px 12px; color: var(--text-2); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; line-height: 1.35; }
.artikel-toc a:hover, .artikel-toc a.ist-jetzt { color: var(--text); border-left-color: var(--blau); }
@media (max-width: 1099.98px) { .artikel-toc { padding: 16px 18px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); } }
@media (min-width: 1100px) {
  .artikel-raster { grid-template-columns: 240px minmax(0, 760px); justify-content: center; gap: 64px; }
  .artikel-toc { position: sticky; top: calc(var(--kopf-h) + 32px); align-self: start; max-height: calc(100svh - var(--kopf-h) - 64px); overflow: auto; }
}
.artikel { font-size: 1.1rem; line-height: 1.75; min-width: 0; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; }
.artikel > * + * { margin-top: 1.1em; }
.artikel .artikel-lead { font-size: clamp(1.18rem, 1.08rem + .4vw, 1.36rem); line-height: 1.6; color: var(--text); }
.artikel p, .artikel li { color: var(--text-2); }
.artikel strong { color: var(--text); }
.artikel h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); letter-spacing: -.035em; line-height: 1.12; margin-top: 2.2em; scroll-margin-top: calc(var(--kopf-h) + 20px); hyphens: manual; }
.artikel h3 { font-size: 1.25rem; letter-spacing: -.02em; margin-top: 1.8em; hyphens: manual; }
.artikel ul, .artikel ol { padding-left: 1.3em; }
.artikel ul { list-style: disc; } .artikel ol { list-style: decimal; }
.artikel li + li { margin-top: .45em; }
.artikel li::marker { color: var(--blau-text); }
.artikel a { color: var(--blau-text); font-weight: 560; }
.artikel blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--blau); font-size: 1.2rem; }
.artikel blockquote p { color: var(--text); }
.artikel table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; hyphens: manual; }
.artikel th, .artikel td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linie); min-width: 130px; }
.artikel th { color: var(--text); font-weight: 650; background: var(--flaeche); }
.artikel td { color: var(--text-2); }
.artikel-bild { margin: 2em 0 !important; }
.artikel-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; border: 1px solid var(--linie); }
.autor { display: grid; grid-template-columns: 72px 1fr; gap: 18px; margin-top: 3em !important; padding: 22px; border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche); hyphens: manual; }
.autor-bild { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.autor-label { font-size: 12px !important; color: var(--text-3) !important; }
.autor-name { font-weight: 700; color: var(--text) !important; font-size: 1.15rem; margin-top: 2px !important; }
.autor p { font-size: 1rem; margin-top: 4px; line-height: 1.55; }
.weiterlesen { padding-block: clamp(72px, 9vw, 120px); background: var(--flaeche); border-top: 1px solid var(--linie); }
.weiterlesen h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); letter-spacing: -.045em; }

/* Über mich */
.portrait-rahmen { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid #1F232D; }
.portrait-rahmen img { width: 100%; aspect-ratio: 1400 / 1500; object-fit: cover; object-position: top; }
.stimmen { margin-top: clamp(36px, 5vw, 56px); display: grid; gap: 20px; }
.stimmen figure { margin: 0; padding: 24px; border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche); display: flex; flex-direction: column; gap: 14px; }
.stimmen blockquote { margin: 0; font-size: 1.06rem; color: var(--text); }
.stimmen figcaption { font-size: .92rem; color: var(--text-2); margin-top: auto; }
@media (min-width: 900px) { .stimmen { grid-template-columns: repeat(3, 1fr); } }
.zweispaltig { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .zweispaltig { grid-template-columns: 1fr 1fr; gap: 72px; } }
.text-block p { color: var(--text-2); }
.text-block p + p { margin-top: 16px; }
.text-block h2 { margin-bottom: 22px; }
.text-block .terminal { margin-top: 30px; }

/* Kontakt-Seite */
.kontakt-schritte { margin-top: 36px; display: grid; gap: 12px; }
.kontakt-schritte li { position: relative; padding-left: 44px; color: var(--text-2); counter-increment: ks; }
.kontakt-schritte { counter-reset: ks; }
.kontakt-schritte li::before { content: counter(ks); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: 12.5px; color: var(--blau-text); border: 1px solid var(--linie-stark); }
.kontakt-schritte b { color: var(--text); }
.kontakt-seite { padding-block: clamp(56px, 8vw, 110px); }

/* =========================================================
   Weniger Bewegung: System-Einstellung oder eigener Schalter
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-sichtbar], .js .log li, .js .editor-panel .code .z { opacity: 1 !important; transform: none !important; }
  .js [data-render] img { filter: none !important; }
  .js .held-portrait img { opacity: 1 !important; transform: none !important; }
}
html.ruhig { scroll-behavior: auto; }
html.ruhig *, html.ruhig *::before, html.ruhig *::after { animation: none !important; transition: none !important; }
html.ruhig.js [data-sichtbar], html.ruhig.js .log li, html.ruhig.js .editor-panel .code .z { opacity: 1 !important; transform: none !important; }
html.ruhig.js [data-render] img { filter: none !important; }
html.ruhig.js .held-portrait img { opacity: 1 !important; transform: none !important; }
html.ruhig .cursor { opacity: 1; }

@media print {
  .kopf, .pipeline, .handy-leiste, .held-feld, .toast, .palette { display: none !important; }
  .held { background: #fff; }
}