@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-var.woff2") format("woff2-variations");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* ---- Signal Yellow: the one brand colour ---- */
  --yellow-50:  #fffbe0;
  --yellow-100: #fff5b0;
  --yellow-200: #ffec70;
  --yellow-300: #ffe22e;
  --yellow-400: #ffd400; /* BASE — the brand yellow */
  --yellow-500: #f0c400;
  --yellow-600: #d1a800;
  --yellow-700: #a37f00;
  --yellow-800: #6b5300;
  --yellow-900: #3d2f00;

  /* ---- Graphite: the neutral ladder (cool, near-achromatic) ---- */
  --ink-0:   #ffffff;
  --ink-25:  #fbfcfb;
  --ink-50:  #f7f8f7;
  --ink-100: #eff1f0;
  --ink-200: #e1e4e3;
  --ink-300: #c3c7c6;
  --ink-400: #9aa0a0;
  --ink-500: #6e7373;
  --ink-600: #4a4e4e;
  --ink-700: #2c2f2f;
  --ink-800: #1e2020;
  --ink-900: #131515;
  --ink-950: #0b0c0c;

  /* ---- Status (data + system feedback only, never decoration) ---- */
  --status-ok:      #1f9d55;
  --status-ok-bg:   #e6f5ec;
  --status-warn:    #e8862a;
  --status-warn-bg: #fdf0e3;
  --status-error:   #d93025;
  --status-error-bg:#fbe9e7;
  --status-info:    #2e6fe6;
  --status-info-bg: #e8effc;

  /* ---- Terminal palette (syntax inside code/terminal surfaces) ---- */
  --term-bg:      #f4f5f4;
  --term-chrome:  #e6e8e7;
  --term-prompt:  #5f6663;
  --term-text:    #242926;
  --term-muted:   #636a67;
  --term-string:  #2f7d4a;
  --term-key:     #2b5fa8;

  /* ================= SEMANTIC — LIGHT (default) ================= */
  --surface-page:     var(--ink-50);
  --surface-raised:   var(--ink-0);
  --surface-sunken:   var(--ink-100);
  --surface-muted:    var(--ink-200);
  --surface-inverse:  var(--ink-950);
  --surface-accent:   var(--yellow-400);
  --surface-accent-soft: var(--yellow-100);

  --text-primary:   var(--ink-950);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-onaccent:  var(--ink-950);   /* yellow is ALWAYS paired with ink, never white */
  --text-oninverse: var(--ink-0);
  --text-oninverse-muted: var(--ink-400);
  --text-link:      var(--ink-950);
  --text-link-hover:var(--yellow-700);

  --border-hairline: var(--ink-200);
  --border-strong:   var(--ink-950);
  --border-accent:   var(--yellow-400);
  --border-oninverse:#2c2f2f;

  --focus-ring: var(--yellow-400);
}

/* ================= SEMANTIC — DARK / TECH SECTIONS ================= */
[data-theme="dark"] {
  --surface-page:    var(--ink-950);
  --surface-raised:  var(--ink-900);
  --surface-sunken:  #070808;
  --surface-muted:   var(--ink-800);
  --surface-inverse: var(--ink-0);
  --surface-accent:  var(--yellow-400);
  --surface-accent-soft: rgba(255, 212, 0, 0.12);

  --text-primary:   var(--ink-0);
  --text-secondary: var(--ink-400);
  --text-muted:     var(--ink-500);
  --text-oninverse: var(--ink-950);
  --text-oninverse-muted: var(--ink-600);
  --text-link:      var(--ink-0);
  --text-link-hover:var(--yellow-400);

  --border-hairline: #262929;
  --border-strong:   var(--ink-0);
  --border-oninverse:var(--ink-200);
}

:root {
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Display — tight tracking, weight 700, never centred */
  --text-display-1: 700 clamp(3rem, 6.2vw, 5.5rem)/0.98 var(--font-display);
  --text-display-2: 700 clamp(2.25rem, 4.2vw, 3.75rem)/1.03 var(--font-display);
  --text-display-3: 700 clamp(1.75rem, 2.8vw, 2.5rem)/1.1 var(--font-display);
  --tracking-display: -0.03em;

  /* Headings — feste Größen, kein clamp: sie gelten auch im Druck, wo die
     Viewport-Breite keine Bedeutung hat. display-* bleibt der Bildschirm-
     Skala vorbehalten. */
  --text-h1: 700 2.5rem/1.1 var(--font-display);
  --text-h2: 700 2rem/1.15 var(--font-display);
  --text-h3: 700 1.75rem/1.2 var(--font-display);
  --text-h4: 600 1.5rem/1.2 var(--font-display);
  --text-h5: 600 1.125rem/1.3 var(--font-display);
  --text-h6: 600 1rem/1.35 var(--font-display);

  /* Body */
  --text-body-lg: 400 1.125rem/1.6 var(--font-body);
  --text-body:    400 1rem/1.65 var(--font-body);
  --text-body-sm: 400 0.875rem/1.6 var(--font-body);

  /* Technical voice — mono, uppercase, tracked out */
  --text-label:    500 0.75rem/1 var(--font-mono);
  --text-label-sm: 500 0.6875rem/1 var(--font-mono);
  --tracking-label: 0.12em;
  --text-code:     400 0.8125rem/1.7 var(--font-mono);
  --text-code-sm:  400 0.75rem/1.6 var(--font-mono);
  --text-metric:   700 clamp(2rem, 3.4vw, 3rem)/1 var(--font-mono);
}

:root {
  /* 4px base grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;
  --space-11: 8rem;
  --space-12: 10rem;

  /* Rhythm */
  --section-y: clamp(4rem, 9vw, 8rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Measures */
  --max-page: 1280px;
  --max-prose: 68ch;
  --max-form: 34rem;
}

:root {
  /* Restrained radii — the brand is square-shouldered like the wordmark */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;   /* default: buttons, inputs, cards */
  --radius-lg: 12px;  /* large panels, terminal windows */
  --radius-xl: 16px;  /* MAX — nothing rounder */
  --radius-pill: 999px; /* ONLY for status dots and avatars */

  --hairline: 1px solid var(--border-hairline);

  /* Elevation is rare. Ambient, neutral, low alpha. */
  --shadow-none: none;
  --shadow-ambient: 0 1px 2px rgba(11,12,12,0.04), 0 8px 24px rgba(11,12,12,0.06);
  --shadow-overlay: 0 16px 48px rgba(11,12,12,0.14);
  /* The signature: a hard offset block in yellow behind a bordered element */
  --shadow-block: 6px 6px 0 var(--yellow-400);
  --shadow-block-ink: 6px 6px 0 var(--ink-950);
}

:root {
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  --dur-instant: 100ms;
  --dur-hover: 150ms;
  --dur-default: 200ms;
  --dur-section: 320ms;
  --dur-slow: 500ms;

  --transition-hover: background var(--dur-hover) var(--ease-standard), color var(--dur-hover) var(--ease-standard), border-color var(--dur-hover) var(--ease-standard);
}

@keyframes streber-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes streber-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: var(--tracking-display); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; border-bottom: 1px solid var(--yellow-400); transition: color var(--dur-hover) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }

::selection { background: var(--yellow-400); color: var(--ink-950); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }

/* The technical-metadata voice */
.streber-label {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Italic accent word inside a display headline */
.streber-accent { font-style: italic; font-weight: 700; }
/* Textmarker über dem Akzentwort. Der Verlauf wird von der Unterkante der
   Inline-Box gemessen, und die liegt beim Descender von Space Grotesk 0.28em
   unter der Grundlinie. Deshalb wird das Band nicht von unten hochgezogen
   (dann schleppt es diesen Totraum mit), sondern über background-size auf
   eine feste Höhe gesetzt und mit background-position so verschoben, dass
   seine Unterkante genau auf der Grundlinie sitzt. no-repeat ist Pflicht —
   sonst kachelt der Verlauf und setzt einen zweiten Balken über das Wort. */
.streber-accent-mark {
  background: linear-gradient(var(--yellow-400), var(--yellow-400)) no-repeat 0 calc(100% - 0.28em);
  background-size: 100% 0.34em;
  /* Bricht das Akzentwort auf zwei Zeilen um, bekommt jede Zeile ihr
     eigenes Band statt eines aufgeteilten. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* The 8px yellow square used as an industrial list bullet */
.streber-bullet { display: inline-block; width: 8px; height: 8px; background: var(--yellow-400); flex: none; }

/* Ladeplatzhalter — pulsiert nur in Opazität, bewegt sich nie */
@keyframes streber-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Fokus ist nie unsichtbar. Auf Gelb wechselt der Ring auf Tinte, weil
   Gelb auf Gelb nicht sichtbar ist. */
:focus-visible { outline-color: var(--focus-ring); }
.streber-on-accent :focus-visible,
[data-theme="dark"] .streber-on-accent :focus-visible { outline-color: var(--ink-950); }

/* Nur sichtbar, wenn fokussiert — Sprunglink zum Inhalt */
.streber-skip {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 100;
  padding: var(--space-3) var(--space-4); background: var(--yellow-400); color: var(--ink-950);
  font: var(--text-body-sm); font-weight: 600; border: none; border-radius: var(--radius-md);
  transform: translateY(-200%);
}
.streber-skip:focus-visible { transform: none; }

/* Für Screenreader, nicht für Augen */
.streber-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ================================================================
   Komponenten (Task 2)
   Fokus-Regel und Reduced-Motion-Reset sind oben bereits vorhanden
   (Zeilen 222/256 bzw. 275) und werden hier nicht dupliziert.
   ================================================================ */

/* ---- Layout ---- */
.sb-container { max-width: var(--max-page); margin: 0 auto; padding: 0 var(--gutter); }
.sb-section { padding: var(--section-y) 0; background: var(--surface-page); color: var(--text-primary); }
.sb-section--dark { background: var(--ink-950); color: var(--ink-0); }
.sb-section--sunken { background: var(--surface-sunken); }
.sb-grid-75 { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-9); align-items: center; }
.sb-grid-57 { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8); }
.sb-grid-66 { display: grid; grid-template-columns: 6fr 6fr; gap: var(--space-9); align-items: center; }
@media (max-width: 900px) { .sb-grid-75, .sb-grid-57, .sb-grid-66 { grid-template-columns: 1fr; } }
/* Grid-Kinder haben per Default min-width:auto — breiter Inhalt (z. B. das
   Terminal-<pre>) weitet sonst die Spalte über den Viewport hinaus, statt im
   eigenen Container zu scrollen. */
.sb-grid-75 > *, .sb-grid-57 > *, .sb-grid-66 > * { min-width: 0; }

/* ---- Typo-Helfer ---- */
.sb-eyebrow { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.sb-display1 { font: var(--text-display-1); letter-spacing: var(--tracking-display); }
.sb-display2 { font: var(--text-display-2); letter-spacing: var(--tracking-display); }
.sb-display3 { font: var(--text-display-3); letter-spacing: var(--tracking-display); }
.sb-accent { font-style: italic; }
.sb-accent--mark { background: linear-gradient(transparent 55%, var(--yellow-400) 55%, var(--yellow-400) 92%, transparent 92%); }

/* ---- Karte (kanonisches Rezept) ---- */
.sb-card {
  background: var(--surface-raised); border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  padding: var(--space-5); box-shadow: none; transition: border-color var(--dur-hover) var(--ease-standard);
}
@media (min-width: 900px) { .sb-card { padding: var(--space-6); } }
.sb-card:hover { border-color: var(--ink-950); }
.sb-card--highlight { border: 1px solid var(--ink-950); box-shadow: var(--shadow-block); }
.sb-card--highlight:active { transform: translate(1px, 1px); box-shadow: 5px 5px 0 var(--yellow-400); }

/* ---- Buttons ----
   Radius: das Token-Set widmet --radius-md (8px) laut eigenem Kommentar
   "default: buttons, inputs, cards" explizit den Buttons — --radius-sm
   (4px) würde die Vorgabe "Radien 8/12/16, nie 999px für Buttons" verletzen,
   deshalb hier --radius-md statt --radius-sm. */
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-5);
  border-radius: var(--radius-md); font: var(--text-body); cursor: pointer; text-decoration: none;
  border: 1px solid transparent; transition: background var(--dur-hover) var(--ease-standard), border-color var(--dur-hover) var(--ease-standard);
}
.sb-btn:disabled, .sb-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.sb-btn--primary { background: var(--yellow-400); color: var(--ink-950); }
.sb-btn--primary:hover { background: var(--yellow-500); }
.sb-btn--block { background: var(--yellow-400); color: var(--ink-950); border: 1px solid var(--ink-950); box-shadow: var(--shadow-block-ink); }
.sb-btn--block:active { transform: translate(1px, 1px); box-shadow: 5px 5px 0 var(--ink-950); }
.sb-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--ink-300); }
.sb-btn--secondary:hover { border-color: var(--ink-950); }
.sb-btn--ghost { background: transparent; color: var(--text-primary); }
.sb-btn--ghost:hover { background: var(--surface-sunken); }

/* ---- Navigation ---- */
.sb-nav {
  position: sticky; top: 0; z-index: 50; background: transparent;
  transition: background var(--dur-hover) var(--ease-standard), box-shadow var(--dur-hover) var(--ease-standard);
}
.sb-nav--scrolled { background: rgba(247, 248, 247, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-ambient); }
.sb-nav__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-2) 0; }
.sb-nav__logo { display: inline-flex; align-items: center; height: 24px; }
.sb-nav__logo img, .sb-nav__logo svg { height: 24px; width: auto; display: block; }
.sb-nav__links { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.sb-nav nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-primary); font: var(--text-body-sm); border-bottom: none; }
.sb-nav nav a:hover { color: var(--text-link-hover); }
/* Kompakter Header auf schmalen Viewports: Zeile 1 = Logo + verkleinerter CTA,
   Zeile 2 = Nav-Links in einer Zeile (seitlich wischbar statt mehrzeilig) —
   der Sticky-Header verdeckt sonst zu viel Inhalt. */
@media (max-width: 700px) {
  .sb-nav__inner { row-gap: 0; }
  .sb-nav__inner > a:first-child { order: 1; }
  .sb-nav__inner > .sb-btn { order: 2; min-height: 34px; padding: 0 var(--space-3); font: var(--text-body-sm); }
  .sb-nav__inner > nav {
    order: 3; width: 100%; display: flex; gap: var(--space-4);
    overflow-x: auto; scrollbar-width: none;
  }
  .sb-nav__inner > nav::-webkit-scrollbar { display: none; }
  .sb-nav .sb-nav__inner nav a { min-height: 34px; white-space: nowrap; }
}
/* Anker-Ziele nicht unter dem Sticky-Header landen lassen */
[id] { scroll-margin-top: 88px; }

/* ---- Terminal-Fenster ---- */
.sb-terminal { background: var(--term-bg); border-radius: var(--radius-lg); border: 1px solid var(--border-hairline); overflow: hidden; }
.sb-terminal__bar { display: flex; align-items: center; height: 40px; padding: 0 var(--space-4); background: var(--term-chrome); }
.sb-terminal__bar::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--ink-700);
  box-shadow: 16px 0 0 var(--ink-700), 32px 0 0 var(--ink-700);
}
.sb-terminal__path { margin-left: auto; font: var(--text-label-sm); color: var(--term-muted); }
/* white-space: pre statt pre-wrap — Terminalzeilen dürfen nie mitten im Wert
   umbrechen; auf schmalen Viewports scrollt der Inhalt im eigenen Container. */
.sb-terminal__body { font: var(--text-code); color: var(--term-text); white-space: pre; overflow-x: auto; margin: 0; padding: var(--space-4) var(--space-5); }
.sb-terminal__line { display: block; }
.sb-terminal__line--cmd { color: var(--term-text); }
.sb-terminal__line--muted { color: var(--term-muted); }
.sb-terminal__line--key { color: var(--term-text); }
.sb-terminal__line--ok { color: var(--status-ok); }
.sb-terminal__dollar { color: var(--yellow-400); }
.sb-terminal__caret { display: inline-block; width: 8px; height: 16px; background: var(--yellow-400); vertical-align: -2px; animation: sb-caret 1s step-end infinite; }
@keyframes sb-caret { 50% { opacity: 0; } }

/* ---- Kennzahlen ---- */
.sb-stats { display: flex; flex-wrap: wrap; gap: var(--space-7); }
.sb-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.sb-stat__value { font: var(--text-metric); color: var(--text-primary); }
.sb-stat__label { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.sb-stat__note { font: var(--text-body-sm); color: var(--text-muted); }

/* ---- Zeitleiste ---- */
.sb-timeline { display: flex; flex-direction: column; }
.sb-timeline__item { display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-hairline); }
.sb-timeline__item:last-child { border-bottom: none; }
.sb-timeline__time { font: var(--text-code-sm); color: var(--text-muted); }
.sb-timeline__title { font: var(--text-h5); margin: 0 0 var(--space-2); }
.sb-timeline__desc { font: var(--text-body-sm); color: var(--text-secondary); margin: 0; }

/* ---- Callout ---- */
.sb-callout { border-left: 3px solid var(--yellow-400); padding: var(--space-4) var(--space-5); background: var(--surface-raised); }
.sb-callout__label { display: block; font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }

/* ---- Aufzählung mit .streber-bullet (aus base.css) ---- */
.sb-bullet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sb-bullet-list li { display: flex; align-items: flex-start; gap: var(--space-3); font: var(--text-body); }
.sb-bullet-list .streber-bullet { margin-top: 0.55em; }

/* ---- Anwendungsfälle ---- */
.sb-usecase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); }

/* ---- Portrait ---- */
.sb-portrait { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-md); object-fit: cover; filter: grayscale(1) brightness(1.02); transition: filter var(--dur-slow) var(--ease-standard); }
.sb-portrait:hover { filter: none; }

/* ---- Badge ---- */
.sb-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: var(--surface-sunken); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); font: var(--text-label-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }

/* ---- Formulare ---- */
.sb-field { display: flex; flex-direction: column; gap: var(--space-2); }
.sb-field label { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.sb-input {
  width: 100%; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--ink-300); border-radius: var(--radius-md);
  font: var(--text-body); background: var(--surface-raised); color: var(--text-primary); transition: border-color var(--dur-hover) var(--ease-standard);
}
textarea.sb-input { min-height: 120px; padding: var(--space-3); }
.sb-input::placeholder { color: var(--text-muted); }
.sb-input:focus-visible { border-color: var(--ink-950); }
.sb-input:disabled { background: var(--surface-sunken); color: var(--text-muted); cursor: not-allowed; }

.sb-radiocard { position: relative; display: block; cursor: pointer; background: var(--surface-raised); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-4); transition: border-color var(--dur-hover) var(--ease-standard); }
.sb-radiocard input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.sb-radiocard:has(input:checked) { border: 2px solid var(--ink-950); }
.sb-radiocard:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Dialog ---- */
.sb-dialog { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--surface-raised); padding: var(--space-6); max-width: 28rem; width: calc(100% - 2 * var(--gutter)); box-shadow: var(--shadow-overlay); }
.sb-dialog::backdrop { background: rgba(11, 12, 12, 0.5); }

/* ---- Footer ---- */
.sb-footer { background: var(--ink-950); color: var(--ink-0); padding: var(--space-9) 0 var(--space-6); }
.sb-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-7); }
@media (max-width: 900px) { .sb-footer__grid { grid-template-columns: 1fr; } }
.sb-footer__bottom { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--ink-800); font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-600); }

/* ---- Matrix (2×2-Raster) ---- */
.sb-matrix { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--border-hairline);
  background: linear-gradient(var(--border-hairline), var(--border-hairline)) center / 1px 100% no-repeat,
              linear-gradient(var(--border-hairline), var(--border-hairline)) center / 100% 1px no-repeat;
}
.sb-matrix__label { position: absolute; padding: var(--space-2); font: var(--text-label-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.sb-matrix__label--tl { top: 0; left: 0; }
.sb-matrix__label--tr { top: 0; right: 0; text-align: right; }
.sb-matrix__label--bl { bottom: 0; left: 0; }
.sb-matrix__label--br { bottom: 0; right: 0; text-align: right; }
.sb-matrix__dot { position: absolute; display: flex; align-items: center; gap: var(--space-2); transform: translate(-4px, 4px); }
.sb-matrix__dot::before { content: ""; width: 8px; height: 8px; background: var(--yellow-400); flex: none; }
.sb-matrix__dot span { font: var(--text-body-sm); white-space: nowrap; }
/* Schmale Viewports: Die nowrap-Beispiel-Dots kollidieren unter ~600px
   unvermeidlich mit den Quadranten-Labels und ragen aus der Matrix — die
   Beispiele stehen mobil in den "Vier Felder"-Karten darunter. Die
   Quadranten-Labels bleiben, auf ihre Hälfte begrenzt. */
@media (max-width: 600px) {
  .sb-matrix__dot { display: none; }
  .sb-matrix__label { max-width: 48%; }
}

/* ---- Dot-Raster-Hintergründe ---- */
.dots { background-image: radial-gradient(var(--ink-200) 1px, transparent 1px); background-size: 24px 24px; }
.dots-dark { background-image: radial-gradient(var(--ink-800) 1px, transparent 1px); background-size: 24px 24px; }

/* ---- Einblendungen beim Scrollen ----
   Ohne JS bleibt .js auf <html> unbesetzt: .rise bleibt dann ungestylt und
   damit sichtbar, statt in einer leeren Seite zu verschwinden. */
.js .rise { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-section) var(--ease-standard), transform var(--dur-section) var(--ease-standard); }
.js .rise.is-visible { opacity: 1; transform: none; }

/* ---- Umschalter (Leistungsbausteine) ---- */
[data-switcher-btn] {
  text-align: left; cursor: pointer; background: none;
  border: none; border-left: 2px solid var(--border-hairline);
  padding: var(--space-3) var(--space-4); font: var(--text-label); letter-spacing: var(--tracking-label);
  color: var(--text-muted); transition: border-color var(--dur-hover) var(--ease-standard), color var(--dur-hover) var(--ease-standard);
}
[data-switcher-btn].is-active { border-left-color: var(--yellow-400); color: var(--text-primary); }

/* ---- Responsive-Grid-Modifikatoren ----
   Ersetzen Inline-`grid-template-columns`, die auf schmalen Viewports nicht
   kollabieren konnten. Gap-Werte je Klasse entsprechen exakt dem bisherigen
   Inline-Wert an ihrer jeweiligen Einsatzstelle (siehe Kommentare). */
.sb-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } /* Use-Case-Grids */
.sb-cols-2-8 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } /* Team-Kacheln */
.sb-cols-2-5 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } /* Workshop: die vier Felder */
@media (max-width: 900px) {
  .sb-cols-3, .sb-cols-2-8, .sb-cols-2-5 { grid-template-columns: 1fr; }
}
/* Formular-Grids: engerer Viewport, weil die Felder auch bei 2 Spalten auf
   Tablet-Breite noch genug Platz haben — kollabieren erst unter 600px. */
.sb-cols-2-3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } /* Kontaktformular: Thema-Radiokarten */
.sb-cols-2-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } /* Kontaktformular: Name/Unternehmen/E-Mail/Größe */
@media (max-width: 600px) {
  .sb-cols-2-3, .sb-cols-2-4 { grid-template-columns: 1fr; }
}