/* ═══════════════════════════════════════════════════════════════════
   Spherity Design Guide · Shared Stylesheet
   ───────────────────────────────────────────────────────────────────
   Wird von allen 10 Companion-HTML-Pages geladen ALS ERSTE Stylesheet.
   Enthält ausschließlich Page-Chrome, Page-Patterns und gemeinsame
   Komponenten (Topnav · Hero · Section-Head · Side-Nav · Language-
   Switch · Pagefoot). Page-spezifische Mockup-Styles (Browser-Frames,
   App-Frames, Slide-Master, DPP-Frame) bleiben inline in den HTMLs.

   Mode: Doc-Companion bewusst in Dark-Mode (Lesbarkeit langer Texte
         + Marketing-Charakter). Produkt-Mockups innerhalb sind
         Light-Mode-Default gemäß §11.1.

   Konfliktauflösung (siehe Notes am Datei-Ende):
   - :root-Token-Block ist die Single Source. Pages, die Varianten
     brauchen (z. B. EIDA-Figma-Untitled-UI-Override), kapseln diese
     in `.app-frame.eida-fig`-Scope, nicht im globalen :root.
   - Body/Container/Topnav/Hero/Sect-Head sind globale Definitionen;
     Pages dürfen NICHT überschreiben (Konsistenz-Pflicht).
   - Pagefoot ist global; Inhalt pro Page individuell, Layout shared.

   v1.2 · 2026-05-18
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   1 · TOKENS (Doc-Companion-Palette)
   Light-Mode-Produkt-Surfaces nutzen ihre eigenen Tokens lokal,
   diese hier gelten nur für den Doc-Chrome.
   ─────────────────────────────────────────────────────────────────── */
:root {
  /* Doc-Companion Backgrounds (Dark) */
  --bg:           #0F1F2A;
  --bg-elev:      #192B38;
  --bg-elev-2:    #023852;

  /* Produkt-Mockup-Surfaces (Light, Default für Produkt-UIs gemäß §11.1) */
  --bg-mockup:    #F4F2EE;

  /* Text */
  --ink:          #EEEEEE;
  --ink-dim:      #A5A5A5;
  --ink-mono:     rgba(238, 238, 238, 0.55);
  --ink-on-light: #023852;
  --ink-on-light-dim: #445260;

  /* Akzent */
  --accent:       #2BFEBB;
  --accent-soft:  rgba(43, 254, 187, 0.14);

  /* Lines */
  --line:         rgba(238, 238, 238, 0.10);
  --line-dark:    rgba(2, 56, 82, 0.12);

  /* Sub-Brand-Akzente (CI-konform, ≤10 % Anwendungsquote — §11.1) */
  --caro:         #1F6F8B;
  --vera:         #2C6F7B;
  --eida:         #4961A8;
  --kyle:         #4D5B6A;

  /* Fixed System Status-Colors (§7.6.1 / §11.6 — niemals brand-überschrieben) */
  --status-success:   #079455;
  --status-warning:   #DC6803;
  --status-attention: #B62549;
  --status-neutral:   #667085;

  /* ─── Tonal Variants (v1.4 · §19.6) ────────────────────────────────
     Key-Colors (Petrol · Cyan · Off-White) = 5-Stop-Scale 100/300/500/700/900.
     Sub-Brands (CARO · VERA · EIDA · KYLE) = 3-Stop-Scale 300/500/700.
     .500 = canonical brand hex. Status-Farben sind EXPLIZIT ausgeschlossen
     (§7.6.1.2 Hard-Rule). Usage-Mapping: §19.6 brand-board.html. */

  /* Petrol (Key) */
  --petrol-100:  #E5EAEE;
  --petrol-300:  #6F8895;
  --petrol-500:  #023852;
  --petrol-700:  #022536;
  --petrol-900:  #00141F;

  /* Cyan (Key · Accent) */
  --cyan-100:    #DFFFF2;
  --cyan-300:    #8AFED9;
  --cyan-500:    #2BFEBB;
  --cyan-700:    #14B98A;
  --cyan-900:    #0A6F52;

  /* Off-White (Neutral) */
  --offwhite-100: #FFFFFE;
  --offwhite-300: #F4F2EE;
  --offwhite-500: #EEEEEE;
  --offwhite-700: #C9C7C2;
  --offwhite-900: #A5A5A5;

  /* Sub-Brands · 3-Stop */
  --caro-300:    #BFD5DD;
  --caro-500:    #1F6F8B;
  --caro-700:    #144A5E;

  --vera-300:    #C2D6DA;
  --vera-500:    #2C6F7B;
  --vera-700:    #1B4A52;

  --eida-300:    #CDD3E8;
  --eida-500:    #4961A8;
  --eida-700:    #324377;

  --kyle-300:    #CDD1D5;
  --kyle-500:    #4D5B6A;
  --kyle-700:    #353F49;
}

/* ───────────────────────────────────────────────────────────────────
   2 · BODY / CONTAINER BASE
   ─────────────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  padding: 0 24px 88px;
}
.container { max-width: 1240px; margin: 0 auto; }

/* ───────────────────────────────────────────────────────────────────
   3 · TOPNAV (Sticky, global)
   ─────────────────────────────────────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15, 31, 42, 0.86);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 14px 24px;
  margin: 0 -24px 56px;
}
.topnav-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.topnav-brand {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mono); font-weight: 500;
}
.topnav-brand b { color: var(--ink); font-weight: 600; }
.topnav-spacer { flex: 1; }
.topnav-links { display: flex; gap: 4px; flex-wrap: wrap; }
.topnav-links a {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 8px 14px; border-radius: 8px;
  transition: color 120ms ease-out, background 120ms ease-out;
}
.topnav-links a:hover { color: var(--ink); background: rgba(238, 238, 238, 0.06); }
.topnav-links a.active {
  color: var(--bg-elev-2);
  background: var(--accent);
  font-weight: 600;
}
.topnav-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--line);
  margin: 0 4px;
  align-self: center;
}
.flow-stepper-brand  {
display: inline-flex;
align-items: center;
gap: 12px;
color:var(--ink-dim);
text-decoration: none;
flex-shrink: 0;
}

.flow-stepper-brand img {
height: 24px;
width: auto;
display: block;
}

/* ── Dropdown Groups ── */
.topnav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.topnav-group-btn {
  /* reset button */
  appearance: none;
  background: transparent;
  border: 0;
  /* style */
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 120ms ease-out, background 120ms ease-out;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.topnav-group-btn::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.55;
  transition: transform 160ms ease-out, opacity 160ms ease-out;
  margin-top: 1px;
}
.topnav-group-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.topnav-group:hover .topnav-group-btn,
.topnav-group:focus-within .topnav-group-btn {
  color: var(--ink);
  background: rgba(238,238,238,0.06);
}
.topnav-group:hover .topnav-group-btn::after,
.topnav-group:focus-within .topnav-group-btn::after {
  transform: rotate(180deg);
  opacity: 0.85;
}
.topnav-group.has-active .topnav-group-btn {
  color: var(--bg-elev-2);
  background: var(--accent);
  font-weight: 600;
}
.topnav-group.has-active .topnav-group-btn::after {
  border-top-color: var(--bg-elev-2);
  opacity: 0.7;
}

/* Dropdown panel — uses opacity/visibility for smooth animation (no display toggle jank) */
.topnav-dropdown {
  position: absolute;
  top: calc(100% + 8px); /* 8px gap below trigger */
  left: 0;
  z-index: 200; /* eigener Layer — sicher über Seiten-Headings */
  display: flex;
  flex-direction: column;
  /* Visual shell — kein .topnav-dropdown-inner erforderlich */
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  /* hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s 150ms;
}
/* Hover-Brücke: deckt den 8px-Gap ab, damit Maus nicht "abrutscht" */
.topnav-dropdown::before {
  content: '';
  position: absolute;
  bottom: 100%; left: 0; right: 0;
  height: 10px; /* > gap */
}
/* Backward-Compat für Seiten die .topnav-dropdown-inner noch nutzen */
.topnav-dropdown-inner {
  display: contents;
}
.topnav-group:hover .topnav-dropdown,
.topnav-group:focus-within .topnav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s 0s;
}
/* Right-aligned dropdown (last group — Materials) */
.topnav-group--r .topnav-dropdown { left: auto; right: 0; }

.topnav-dropdown a {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  transition: color 120ms ease-out, background 120ms ease-out;
}
.topnav-dropdown a:hover { color: var(--ink); background: rgba(238,238,238,0.06); }
.topnav-dropdown a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.topnav-dropdown a.active {
  color: var(--bg-elev-2);
  background: var(--accent);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .topnav-dropdown { transition: opacity 80ms linear, visibility 0s 80ms; transform: none !important; }
  .topnav-group:hover .topnav-dropdown,
  .topnav-group:focus-within .topnav-dropdown { transition: opacity 80ms linear, visibility 0s 0s; }
  .topnav-group-btn::after { transition: none; }
}
.topnav-version {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; color: var(--ink-mono); letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .topnav-brand { display: none; }
  .topnav-version { display: none; }
}

/* ───────────────────────────────────────────────────────────────────
   4 · LANGUAGE-SWITCH (DE/EN)
   v1.2 NEU — Pflicht-Komponente in jeder Topnav.
   EN-State ist „coming soon" → disabled, kein Link.
   ─────────────────────────────────────────────────────────────────── */
.lang-switch {
  display: inline-flex; gap: 2px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
}
.lang-switch button {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 5px 10px;
  border-radius: 5px;
  transition: color 120ms ease-out, background 120ms ease-out;
  font-weight: 500;
}
.lang-switch button:hover:not(:disabled) {
  color: var(--ink);
  background: rgba(238, 238, 238, 0.06);
}
.lang-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg-elev-2);
  font-weight: 700;
}
.lang-switch button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  position: relative;
}
.lang-switch button:disabled:hover::after {
  content: "Übersetzung in Vorbereitung";
  position: absolute;
  top: calc(100% + 6px); right: 0;
  background: var(--bg-elev-2);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 10.5px; letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid var(--line);
  text-transform: none;
  font-weight: 400;
  z-index: 100;
}
@media (max-width: 540px) {
  .lang-switch { display: none; }
}

/* ───────────────────────────────────────────────────────────────────
   5 · PAGE-LAYOUT mit SIDE-NAV
   v1.2 NEU — pro Companion-Page Sticky-TOC links + Content rechts.
   Mobile collapsed (Hamburger-Toggle optional).
   ─────────────────────────────────────────────────────────────────── */
.page-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}
.sidebar {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 12px;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(238,238,238,0.10); border-radius: 2px; }
.toc-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mono);
  margin-bottom: 14px;
  font-weight: 500;
}
.toc { list-style: none; }
.toc li { margin-bottom: 2px; }
.toc a {
  display: block;
  padding: 6px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -14px;
  transition: color 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out;
  border-radius: 0 6px 6px 0;
}
.toc a:hover {
  color: var(--ink);
  background: rgba(238, 238, 238, 0.03);
}
.toc a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}
.toc .toc-group {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mono);
  padding: 12px 12px 4px;
  font-weight: 500;
}
.toc .toc-group:first-child { padding-top: 0; }
@media (max-width: 880px) {
  .page-layout { grid-template-columns: 1fr; gap: 32px; }
  .sidebar {
    position: static;
    max-height: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
  .toc { display: flex; flex-wrap: wrap; gap: 4px; }
  .toc li { margin-bottom: 0; }
  .toc a {
    padding: 6px 10px; margin-left: 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
  }
  .toc a.active {
    border-left: 0;
    border-bottom-color: var(--accent);
  }
  .toc .toc-group { display: none; }
}

/* ───────────────────────────────────────────────────────────────────
   5c · DOC-LAYOUT (Skill-Reference Pages)
   Einspaltiges Layout für design-behavior, design-guardrails,
   design-prompts, design-system, frontend-stack.
   ─────────────────────────────────────────────────────────────────── */
.doc-layout {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 24px 88px;
}
.doc-main { min-width: 0; }
.doc-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 28px;
  margin-bottom: 36px;
}
.doc-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.doc-title {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 12px;
}
.doc-meta {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.doc-meta a { color: var(--accent); text-decoration: none; }
.doc-meta a:hover { text-decoration: underline; }

/* Skill page sections */
.doc-main .sect-head {
  margin-bottom: 48px;
}
.doc-main .sect-head h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.doc-main p, .doc-main li {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.doc-main p a { color: var(--accent); text-decoration: none; }
.doc-main p a:hover { text-decoration: underline; }
.doc-main ul, .doc-main ol {
  padding-left: 20px;
  margin-bottom: 12px;
}
.doc-main strong { color: var(--ink); font-weight: 600; }
.doc-main pre {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 20px;
  overflow-x: auto;
  margin: 12px 0;
}
.doc-main code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.6;
}
.doc-main table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 0;
}
.doc-main th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mono);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.doc-main td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
  vertical-align: top;
}
.doc-main tr:last-child td { border-bottom: 0; }

/* ───────────────────────────────────────────────────────────────────
   5b · AUTO-SIDE-TOC (Floating Sticky Right · v1.2)
   Wird per `side-nav.js` zur Laufzeit injiziert — kein HTML-Eingriff
   pro Page nötig. Selektor: `.sect-head h2`.
   ─────────────────────────────────────────────────────────────────── */
.side-toc {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 16px;
  max-width: 260px;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.4);
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.side-toc::-webkit-scrollbar { width: 4px; }
.side-toc::-webkit-scrollbar-thumb { background: rgba(238,238,238,0.10); border-radius: 2px; }

.side-toc.is-collapsed .side-toc-inner { display: none; }
.side-toc.is-collapsed {
  padding: 10px;
  background: var(--bg-elev);
}

.side-toc-toggle {
  position: absolute;
  top: 14px; right: 12px;
  appearance: none;
  background: transparent; border: 0;
  cursor: pointer;
  width: 22px; height: 22px;
  display: inline-flex; flex-direction: column; gap: 3px;
  justify-content: center; align-items: center;
  padding: 0;
}
.side-toc-toggle-bar {
  display: block; width: 16px; height: 2px;
  background: var(--ink-dim);
  border-radius: 1px;
  transition: background 120ms ease-out;
}
.side-toc-toggle:hover .side-toc-toggle-bar { background: var(--accent); }
.side-toc.is-collapsed .side-toc-toggle { position: static; }

.side-toc-inner { padding-right: 22px; }

.side-toc-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mono);
  margin-bottom: 12px;
  font-weight: 500;
}

.side-toc-list { list-style: none; padding: 0; margin: 0; }
.side-toc-list li { margin-bottom: 2px; }
.side-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  text-decoration: none;
  color: var(--ink-dim);
  font-size: 12px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  margin-left: -12px;
  transition: color 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out;
  line-height: 1.35;
}
.side-toc-list a:hover {
  color: var(--ink);
  background: rgba(238, 238, 238, 0.04);
}
.side-toc-list a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}
.side-toc-list .side-toc-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-mono);
  flex-shrink: 0;
  min-width: 18px;
}
.side-toc-list a.active .side-toc-num { color: var(--accent); }
.side-toc-list .side-toc-text {
  display: block;
  font-family: 'Archivo', sans-serif;
}

@media (max-width: 1180px) {
  .side-toc { display: none; }
}

/* ───────────────────────────────────────────────────────────────────
   6 · HERO
   ─────────────────────────────────────────────────────────────────── */
.hero { padding: 8px 0 56px; max-width: 880px; }
.hero-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.10em;
  font-size: 12px; color: var(--accent); font-weight: 500;
  margin-bottom: 14px;
}
.hero h1 {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 56px; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
}
.hero p.lede {
  font-size: 17px; line-height: 1.6;
  color: var(--ink-dim);
  max-width: 720px;
}
.hero p.lede b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .hero h1 { font-size: 40px; }
}

/* ───────────────────────────────────────────────────────────────────
   7 · LABELS, DIVIDER, SECT-HEAD
   ─────────────────────────────────────────────────────────────────── */
.label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 12px; color: var(--ink-mono); font-weight: 500;
}
.label.accent { color: var(--accent); }

.divider { height: 1px; background: var(--line); margin: 56px 0 48px; }

.sect-head {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.sect-head h2 {
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 28px; letter-spacing: -0.01em; color: var(--ink);
}
.sect-head .sect-meta {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: var(--ink-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.sect-intro {
  color: var(--ink-dim); font-size: 15px; line-height: 1.65;
  max-width: 800px; margin-bottom: 36px;
}
.sect-intro b { color: var(--ink); font-weight: 600; }

.download-btn {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 120ms ease-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
  }
  .download-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }


  .subbrand-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg-elev-2);
    color: #FFFFFF;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
  }
  .subbrand-cta .arr { color: var(--accent); }

/* ───────────────────────────────────────────────────────────────────
   8 · PAGEFOOT
   ─────────────────────────────────────────────────────────────────── */
.pagefoot {
  margin-top: 80px;
  padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: var(--ink-mono); letter-spacing: 0.04em;
}
.pagefoot b { color: var(--ink-dim); font-weight: 500; }
.pagefoot a { color: var(--accent); text-decoration: none; font-weight: 500; }
.pagefoot a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   KONFLIKT-AUFLÖSUNG / NOTES
   ───────────────────────────────────────────────────────────────────
   1 · :root-Tokens
       Bisher in jeder HTML-Page identisch dupliziert. Jetzt zentral.
       Page-spezifische Tokens (z. B. LinkedIn-Palette in social.html,
       Untitled-UI-Light-Tokens in products.html EIDA-Tab) bleiben
       inline IM SCOPE der jeweiligen Komponente — nicht im :root.

   2 · .topnav · .hero · .sect-head · .divider · .pagefoot
       Bisher fast identisch in allen 10 Pages. Vereinheitlicht.
       Pages, die abweichen wollten (z. B. presentations.html hatte
       eigene .hero-h1-Größe), werden auf den gemeinsamen Standard
       gezogen — Konsistenz schlägt Page-Individualität.

   3 · .lang-switch
       NEU v1.2. Vorher nicht vorhanden. Pflicht in jeder Topnav.

   4 · .page-layout / .sidebar / .toc
       NEU v1.2 für 9 Pages (design.html hatte vorher eine eigene
       proprietäre Sidebar — wird hier ersetzt durch das gleiche
       Pattern für Konsistenz).

   5 · Was NICHT in shared.css gehört
       - Page-spezifische Mockup-Frames (browser, app-frame, slide,
         dpp, A4, thumbnail, etc.)
       - Page-spezifische Brand-Tile-Layouts
       - Page-spezifische Variant-Showcases
       Diese bleiben inline in den einzelnen HTML-Files.

   6 · Reihenfolge-Pflicht
       <link rel="stylesheet" href="shared.css"> KOMMT VOR dem inline
       <style>-Block. Page-Inline-Styles überschreiben shared.css
       gezielt (z. B. wenn ein Mockup eigene .hero-Adaption braucht).
   ═══════════════════════════════════════════════════════════════════ */