/* Design-Tokens – einzige Quelle fuer Farben, Schrift, Abstaende, Radien und Bewegung.
   Wird beim Build vor src/stil.css gesetzt. Marke (16.10.2026): Werte nach der Markenvorgabe (Pfad in CLAUDE.md).
   Hell (Porzellan) und Dunkel (Nacht) definieren dieselben Tokens; Dunkel folgt dem System, ausser der Sonne/Mond-Knopf hat
   data-theme gesetzt. Marken-Rot ist nie das einzige Fehlersignal: Fundstellen (--warn) und OK (--ok) bleiben eigene Farben. */
:root {
  color-scheme: light;
  /* Marke: Urushi-Verlauf, Blattgold, Leuchten */
  --marke-1: #FF7A3D;
  --marke-2: #F0244F;
  --marke-text: #D11A42;
  --gold-1: #FFF1C9; --gold-2: #F7C25A; --gold-3: #C8892B;
  --urushi: linear-gradient(135deg, var(--marke-1) 0%, var(--marke-2) 100%);
  --wortmarke-ai: var(--marke-text);
  /* Serifen-I (17.10.2026): Querstriche am I der Wortmarke, nur Farbverlaeufe, keine Bilder oder Adressen */
  --wortmarke-ai-i: linear-gradient(var(--marke-text), var(--marke-text));
  --glow: rgb(240 36 79 / 0.45);
  --glow-soft: rgb(255 122 61 / 0.25);
  --signet-schatten: drop-shadow(0 30px 70px rgb(240 36 79 / 0.32));
  --lichtfleck: radial-gradient(closest-side, rgb(240 36 79 / 0.30), transparent);
  --buehne: radial-gradient(40% 55% at 50% 30%, rgb(240 36 79 / 0.10), transparent 70%), radial-gradient(30% 45% at 85% 0%, rgb(255 122 61 / 0.10), transparent 70%), radial-gradient(30% 45% at 10% 100%, rgb(200 137 43 / 0.10), transparent 70%);

  --bg: #F5F3F0;
  --surface: #EEEBE6;
  --surface-2: #E5E1DA;
  --raised: #FFFFFF;
  --menue: #FFFFFF;
  --kopf-grund: rgb(245 243 240 / 0.82);
  --line: rgb(20 18 16 / 0.12);
  --line-stark: rgb(20 18 16 / 0.22);
  --ink: #141210;
  --ink-2: #3A352F;
  --muted: #6B655C;
  --accent: #B3163A;
  --accent-soft: #FBE4E8;
  --cta: linear-gradient(135deg, #FFE2B8 0%, var(--marke-1) 60%);
  --cta-hover: linear-gradient(135deg, #FFEACB 0%, #FF8A52 60%);
  --cta-ink: #0A0A0B;
  --cta-glow: 0 0 28px -8px var(--marke-1);
  --warn: #8A4A00;
  --warn-soft: #FBEBCF;
  --ok: #0B7A55;
  --redact: #141210;
  --shadow: 0 1px 2px rgb(20 18 16 / 0.06), 0 16px 40px -16px rgb(20 18 16 / 0.20);
  --toast-glow: 0 0 0 1px var(--glow-soft), 0 20px 50px -14px var(--glow);

  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --fs-hero: clamp(2.125rem, 1.2rem + 3.6vw, 3.75rem);
  --fs-wortmarke: clamp(3.25rem, 1.6rem + 7vw, 7.5rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem);
  --fs-h3: 1.1875rem;
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r1: 10px; --r2: 14px; --r3: 24px; --r4: 28px; --pill: 999px;
  --breite: 1200px;
  --text: 68ch;
  --kopf-hoehe: 64px;

  --dauer-druck: 120ms;
  --dauer-hover: 180ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Ebenen: Inhalt 1, Kopf 20, Menue 30, Download-Leiste 40 */
  --z-kopf: 20; --z-menue: 30; --z-leiste: 40;

  /* Nachzeichnungen der KI-Dienste im Abschnitt «So sieht es aus» (nur Website, 16.10.2026): angenaeherte Flaechenfarben,
     keine Logos oder Schriften der Anbieter. Reihenfolge je Dienst: bg seite feld rand ink muted senden senden-ink blase. */
  --nb-chatgpt-bg: #FFFFFF; --nb-chatgpt-seite: #F9F9F9; --nb-chatgpt-feld: #FFFFFF; --nb-chatgpt-rand: #E3E3E3; --nb-chatgpt-ink: #0D0D0D; --nb-chatgpt-muted: #8F8F8F; --nb-chatgpt-senden: #0D0D0D; --nb-chatgpt-senden-ink: #FFFFFF; --nb-chatgpt-blase: #F2F2F2;
  --nb-claude-bg: #FAF9F5; --nb-claude-seite: #F3F1EA; --nb-claude-feld: #FFFFFF; --nb-claude-rand: #E6E3D8; --nb-claude-ink: #1F1E1D; --nb-claude-muted: #87867F; --nb-claude-senden: #C96442; --nb-claude-senden-ink: #FFFFFF; --nb-claude-blase: #EFECE3;
  --nb-gemini-bg: #FFFFFF; --nb-gemini-seite: #F0F4F9; --nb-gemini-feld: #F0F4F9; --nb-gemini-rand: #F0F4F9; --nb-gemini-ink: #1F1F1F; --nb-gemini-muted: #5F6368; --nb-gemini-senden: #1F1F1F; --nb-gemini-senden-ink: #FFFFFF; --nb-gemini-blase: #E9EEF6;
  --nb-copilot-bg: #F8F5F0; --nb-copilot-seite: #F8F5F0; --nb-copilot-feld: #FFFFFF; --nb-copilot-rand: #E7E1D8; --nb-copilot-ink: #1B1A19; --nb-copilot-muted: #6E6A64; --nb-copilot-senden: #1B1A19; --nb-copilot-senden-ink: #FFFFFF; --nb-copilot-blase: #ECE6DC;
  --nb-gemini-gruss: linear-gradient(74deg, #4285F4 0%, #9B72CB 35%, #D96570 70%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    color-scheme: dark;
    --wortmarke-ai: linear-gradient(100deg, var(--gold-1) 0%, var(--marke-1) 40%, var(--marke-2) 100%);
    --wortmarke-ai-i: linear-gradient(90deg, color-mix(in srgb, var(--marke-1) 60%, var(--marke-2)), var(--marke-2));
    --signet-schatten: drop-shadow(0 30px 70px rgb(240 36 79 / 0.45));
    --lichtfleck: radial-gradient(closest-side, rgb(240 36 79 / 0.45), transparent);
    --buehne: radial-gradient(40% 55% at 50% 30%, rgb(240 36 79 / 0.24), transparent 70%), radial-gradient(30% 45% at 85% 0%, rgb(255 122 61 / 0.15), transparent 70%), radial-gradient(30% 45% at 10% 100%, rgb(200 137 43 / 0.15), transparent 70%);
    --bg: #0A0A0B; --surface: #111113; --surface-2: #1C1C20; --raised: rgb(255 255 255 / 0.045); --menue: #1C1C20;
    --kopf-grund: rgb(10 10 11 / 0.78); --line: rgb(255 255 255 / 0.10); --line-stark: rgb(255 255 255 / 0.18);
    --ink: #F5F3F0; --ink-2: rgb(245 243 240 / 0.82); --muted: rgb(255 255 255 / 0.64); --accent: #FFB37A; --accent-soft: rgb(255 122 61 / 0.14);
    --cta-ink: #0A0A0B; --warn: #F2B45F; --warn-soft: rgb(242 180 95 / 0.16); --ok: #3FCF94;
    --redact: #F5F3F0; --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -16px rgb(0 0 0 / 0.7);
    --nb-chatgpt-bg: #212121; --nb-chatgpt-seite: #181818; --nb-chatgpt-feld: #303030; --nb-chatgpt-rand: #303030; --nb-chatgpt-ink: #ECECEC; --nb-chatgpt-muted: #A3A3A3; --nb-chatgpt-senden: #ECECEC; --nb-chatgpt-senden-ink: #0D0D0D; --nb-chatgpt-blase: #303030;
    --nb-claude-bg: #262624; --nb-claude-seite: #1F1E1D; --nb-claude-feld: #30302E; --nb-claude-rand: #3D3D3A; --nb-claude-ink: #F5F4EE; --nb-claude-muted: #9C9A92; --nb-claude-senden: #C96442; --nb-claude-senden-ink: #FFFFFF; --nb-claude-blase: #141413;
    --nb-gemini-bg: #131314; --nb-gemini-seite: #1E1F20; --nb-gemini-feld: #1E1F20; --nb-gemini-rand: #1E1F20; --nb-gemini-ink: #E3E3E3; --nb-gemini-muted: #9AA0A6; --nb-gemini-senden: #E3E3E3; --nb-gemini-senden-ink: #131314; --nb-gemini-blase: #333537;
    --nb-copilot-bg: #1E1D1B; --nb-copilot-seite: #1E1D1B; --nb-copilot-feld: #2B2A28; --nb-copilot-rand: #3A3835; --nb-copilot-ink: #F2F0ED; --nb-copilot-muted: #A39E97; --nb-copilot-senden: #F2F0ED; --nb-copilot-senden-ink: #1B1A19; --nb-copilot-blase: #34322F;
  }
}
:root[data-theme="dunkel"] {
  color-scheme: dark;
  --wortmarke-ai: linear-gradient(100deg, var(--gold-1) 0%, var(--marke-1) 40%, var(--marke-2) 100%);
  --wortmarke-ai-i: linear-gradient(90deg, color-mix(in srgb, var(--marke-1) 60%, var(--marke-2)), var(--marke-2));
  --signet-schatten: drop-shadow(0 30px 70px rgb(240 36 79 / 0.45));
  --lichtfleck: radial-gradient(closest-side, rgb(240 36 79 / 0.45), transparent);
  --buehne: radial-gradient(40% 55% at 50% 30%, rgb(240 36 79 / 0.24), transparent 70%), radial-gradient(30% 45% at 85% 0%, rgb(255 122 61 / 0.15), transparent 70%), radial-gradient(30% 45% at 10% 100%, rgb(200 137 43 / 0.15), transparent 70%);
  --bg: #0A0A0B; --surface: #111113; --surface-2: #1C1C20; --raised: rgb(255 255 255 / 0.045); --menue: #1C1C20;
  --kopf-grund: rgb(10 10 11 / 0.78); --line: rgb(255 255 255 / 0.10); --line-stark: rgb(255 255 255 / 0.18);
  --ink: #F5F3F0; --ink-2: rgb(245 243 240 / 0.82); --muted: rgb(255 255 255 / 0.64); --accent: #FFB37A; --accent-soft: rgb(255 122 61 / 0.14);
  --cta-ink: #0A0A0B; --warn: #F2B45F; --warn-soft: rgb(242 180 95 / 0.16); --ok: #3FCF94;
  --redact: #F5F3F0; --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -16px rgb(0 0 0 / 0.7);
  --nb-chatgpt-bg: #212121; --nb-chatgpt-seite: #181818; --nb-chatgpt-feld: #303030; --nb-chatgpt-rand: #303030; --nb-chatgpt-ink: #ECECEC; --nb-chatgpt-muted: #A3A3A3; --nb-chatgpt-senden: #ECECEC; --nb-chatgpt-senden-ink: #0D0D0D; --nb-chatgpt-blase: #303030;
  --nb-claude-bg: #262624; --nb-claude-seite: #1F1E1D; --nb-claude-feld: #30302E; --nb-claude-rand: #3D3D3A; --nb-claude-ink: #F5F4EE; --nb-claude-muted: #9C9A92; --nb-claude-senden: #C96442; --nb-claude-senden-ink: #FFFFFF; --nb-claude-blase: #141413;
  --nb-gemini-bg: #131314; --nb-gemini-seite: #1E1F20; --nb-gemini-feld: #1E1F20; --nb-gemini-rand: #1E1F20; --nb-gemini-ink: #E3E3E3; --nb-gemini-muted: #9AA0A6; --nb-gemini-senden: #E3E3E3; --nb-gemini-senden-ink: #131314; --nb-gemini-blase: #333537;
  --nb-copilot-bg: #1E1D1B; --nb-copilot-seite: #1E1D1B; --nb-copilot-feld: #2B2A28; --nb-copilot-rand: #3A3835; --nb-copilot-ink: #F2F0ED; --nb-copilot-muted: #A39E97; --nb-copilot-senden: #F2F0ED; --nb-copilot-senden-ink: #1B1A19; --nb-copilot-blase: #34322F;
}

/* Seitenstil. Alle Farben, Schriften, Abstaende und Radien kommen aus design/tokens.css (var(--…)).
   Hier keine Farbwerte festlegen – ein Test prueft das. Regeln: design-system.md (Marke). */
/* Schriften der Marke (OFL-1.1), selbst gehostet unter /schriften/ (src/schriften/HERKUNFT.md, Design-Review 16.10.2026 Auflage 2):
   nur relative URLs, kein Abruf fremder Server; Rueckfall Systemschrift aus --font. */
@font-face { font-family: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(schriften/geist-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(schriften/geist-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 300 700; src: url(schriften/space-grotesk-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 300 700; src: url(schriften/space-grotesk-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + var(--s4)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--font); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--font-display); font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.045em; }
h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.04em; }
h3 { font-size: var(--fs-h3); line-height: 1.35; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
code, pre { font-family: var(--mono); }
code { font-size: 0.875em; }
.breite { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--s6); }
.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: var(--s4); top: -100px; z-index: var(--z-leiste); background: var(--menue); color: var(--ink); padding: var(--s2) var(--s4); border-radius: var(--r1); }
.sprung:focus { top: var(--s3); }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-gross { width: 24px; height: 24px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: var(--z-kopf); background: var(--kopf-grund); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.kopf-innen { display: flex; align-items: center; gap: var(--s4); height: var(--kopf-hoehe); }
.marke { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; letter-spacing: -0.045em; }
.marke:hover { text-decoration: none; }
.logo { width: 30px; height: 30px; flex: none; }
.haupt { margin-left: var(--s4); }
.haupt ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.haupt a { display: block; padding: 8px 12px; border-radius: var(--r1); color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; transition: background-color var(--dauer-hover) var(--ease-out), color var(--dauer-hover) var(--ease-out); }
.haupt a:hover { color: var(--ink); background: var(--surface); }
.haupt a[aria-current="page"] { color: var(--ink); font-weight: 550; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.sprachwahl, .mobilmenue { position: relative; }
.sprachwahl > summary, .mobilmenue > summary, .symbolknopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 10px;
  border: 0; border-radius: var(--r1); background: none; color: var(--ink-2); font: 500 0.875rem/1 var(--font); cursor: pointer;
  transition: background-color var(--dauer-hover) var(--ease-out);
}
.sprachwahl > summary:hover, .mobilmenue > summary:hover, .symbolknopf:hover, details[open] > summary { background: var(--surface); color: var(--ink); }
.symbolknopf[hidden] { display: none; }
.icon-mond { display: block; }
.icon-sonne { display: none; }
:root[data-theme="dunkel"] .icon-mond { display: none; }
:root[data-theme="dunkel"] .icon-sonne { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .icon-mond { display: none; }
  :root:not([data-theme="hell"]) .icon-sonne { display: block; }
}
.aufklapp {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-menue); min-width: 200px; margin: 0; padding: 6px; list-style: none;
  background: var(--menue); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shadow);
}
.aufklapp ul { list-style: none; margin: 0; padding: 0; }
.aufklapp a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r1); color: var(--ink); text-decoration: none; }
.aufklapp a:hover { background: var(--surface); }
.aufklapp a[aria-current="page"] { font-weight: 600; }
.mobilmenue { display: none; }
.kopf-cta { margin-left: var(--s2); }

/* Knoepfe: ein System – gleiche Rundung je Groesse, sichtbarer Fokus, gedrueckt 0.98.
   Hauptknopf nach der Markenvorgabe (Abschnitt Knoepfe, hell/dunkel, Henrique 17.10.2026): auf Hell deckender Urushi-Verlauf
   mit weisser Schrift, Innenkante und engem Schatten statt Glow; auf Dunkel Urushi-Verlauf (--urushi) mit dunkler Schrift und
   engem Glow – ohne hellen Pfirsich-Anfang (Auftrag 17.10.2026: wirkte verwaschen, Rand verschwamm).
   Hell nimmt die Token-Rottoene (--marke-text -> --accent), weil design/tokens.css byte-gleich mit der Erweiterung bleibt.
   Neben-Aktion, Pill und Wahlknopf deckend, damit die Buehnen-Glows nie durch einen Knopf scheinen. */
:root {
  --knopf-grund: linear-gradient(135deg, var(--marke-text) 0%, var(--accent) 100%);
  --knopf-grund-hover: var(--knopf-grund);
  --knopf-ink: var(--raised);
  --knopf-kante: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--raised) 22%, transparent);
  --knopf-schatten: var(--knopf-kante), 0 1px 2px color-mix(in srgb, var(--ink) 20%, transparent);
  --knopf-schatten-hover: var(--knopf-kante), 0 3px 8px -2px color-mix(in srgb, var(--ink) 30%, transparent);
  --knopf-schatten-druck: var(--knopf-kante);
  --knopf-zweit-grund: var(--raised);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --knopf-grund: var(--urushi); --knopf-grund-hover: var(--urushi); --knopf-ink: var(--cta-ink);
    --knopf-schatten: 0 0 22px -8px var(--marke-2); --knopf-schatten-hover: 0 0 28px -6px var(--marke-2); --knopf-schatten-druck: 0 0 14px -8px var(--marke-2);
    --knopf-zweit-grund: var(--surface); --knopf-kante: inset 0 0 0 1px transparent;
  }
}
:root[data-theme="dunkel"] {
  --knopf-grund: var(--urushi); --knopf-grund-hover: var(--urushi); --knopf-ink: var(--cta-ink);
  --knopf-schatten: 0 0 22px -8px var(--marke-2); --knopf-schatten-hover: 0 0 28px -6px var(--marke-2); --knopf-schatten-druck: 0 0 14px -8px var(--marke-2);
  --knopf-zweit-grund: var(--surface); --knopf-kante: inset 0 0 0 1px transparent;
}
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--pill); font: 600 0.9375rem/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dauer-hover) var(--ease-out), border-color var(--dauer-hover) var(--ease-out), box-shadow var(--dauer-hover) var(--ease-out), transform var(--dauer-druck) var(--ease-out);
}
.knopf:hover { text-decoration: none; }
.knopf:active { transform: scale(0.98); }
.knopf-cta { background: var(--knopf-grund); color: var(--knopf-ink); box-shadow: var(--knopf-schatten); }
.knopf-cta:hover { background: var(--knopf-grund-hover); box-shadow: var(--knopf-schatten-hover); }
.knopf-cta:active { box-shadow: var(--knopf-schatten-druck); }
.knopf-zweit { background: var(--knopf-zweit-grund); color: var(--ink); border-color: var(--line-stark); }
.knopf-zweit:hover { border-color: var(--muted); }
.knopf:disabled, .knopf[aria-disabled="true"] { border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); box-shadow: none; transform: none; cursor: not-allowed; }
@media (prefers-contrast: more) {
  .knopf-cta, .knopf-cta:hover { border: 1px solid var(--ink); box-shadow: none; }
  .knopf-zweit, .pill, .wahl-knopf { border-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .knopf { transition: none; }
  .knopf:active { transform: none; }
}
.knopf-gross { height: 56px; padding: 0 26px; font-size: 1.0625rem; border-radius: var(--pill); }
.knopf-gross .icon { width: 22px; height: 22px; stroke-width: 2; }
.knopf-klein { height: 38px; padding: 0 16px; font-size: 0.875rem; border-radius: var(--pill); }
.textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 550; text-decoration: none; }
.textlink:hover { text-decoration: underline; }
.demo-live .textlink { display: inline; }
.demo-live .textlink .icon-pfeil { display: inline-block; margin-left: 6px; vertical-align: -2px; }
.icon-pfeil { width: 16px; height: 16px; stroke-width: 2; transition: transform var(--dauer-hover) var(--ease-out); }
.textlink:hover .icon-pfeil { transform: translateX(3px); }

/* Startseite: Held (Hero) */
.held { padding: var(--s8) 0; background: var(--buehne); }
.held-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
.held h1 { max-width: 12.5em; }
.lead { margin-top: var(--s5); max-width: 36em; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.held-aktionen { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.vertrauen { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--s2) var(--s6); margin: var(--s5) 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--muted); }
.vertrauen li { display: inline-flex; align-items: center; gap: 6px; }
.vertrauen .icon { width: 16px; height: 16px; stroke-width: 2.25; color: var(--ok); }
.zentriert { justify-content: center; }
.vertrauen.zentriert { grid-template-columns: repeat(4, max-content); }

/* Startseite: Abschnitte */
.abschnitt { padding: calc(var(--s8) + var(--s4)) 0; }
.band { background: var(--surface); }
.datenschutz-raster, .firmen-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; }
mark { background: var(--warn-soft); color: inherit; border-radius: 3px; box-shadow: inset 0 -2px var(--warn); padding: 0 2px; }
.zwischen-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s7); }
.dl-alt { margin-top: var(--s3); font-size: var(--fs-small); color: var(--muted); }
.dl-alt a { color: var(--muted); }
.dl-alt a:hover { color: var(--ink); }
.datenschutz-rechts { display: grid; gap: var(--s4); }
.code-notiz { padding: 0 var(--s5) var(--s5); color: var(--muted); font-size: var(--fs-small); }
.erkannt-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s5) var(--s7); }
.kennzahl { display: flex; align-items: center; gap: var(--s4); max-width: 30rem; color: var(--muted); }
.kennzahl-wert { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--ink); }
.pakete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s6); }
.pakete h3 { font-size: var(--fs-small); color: var(--muted); }
.pakete-liste { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pakete-liste li { padding: 4px 12px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-small); font-weight: 650; }
.pakete p { flex-basis: 100%; color: var(--muted); font-size: 0.9375rem; }
.datenschutz-raster { align-items: start; }
.ehrlich { margin-top: var(--s5); padding-left: var(--s4); border-left: 3px solid var(--line); color: var(--muted); font-size: 0.9375rem; max-width: 34em; }
.datenschutz .textlink { margin-top: var(--s3); }
.versprechen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); margin: 0; padding: var(--s6); list-style: none; background: var(--raised); border-radius: var(--r4); }
.versprechen li { display: flex; gap: var(--s4); }
.versprechen .icon { margin-top: 2px; color: var(--accent); }
.hakenliste { display: grid; gap: var(--s3); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.hakenliste li { display: flex; align-items: flex-start; gap: var(--s3); }
.hakenliste .icon { width: 18px; height: 18px; margin-top: 4px; stroke-width: 2.25; color: var(--ok); }
.firmen-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-top: var(--s6); }
.code-karte { margin: 0; overflow: hidden; background: var(--surface); border-radius: var(--r4); }
.code-karte figcaption { display: flex; justify-content: space-between; gap: var(--s4); padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); font-weight: 550; color: var(--ink-2); }
.code-karte figcaption span { font-family: var(--mono); font-weight: 400; color: var(--muted); }
.code-karte pre { margin: 0; padding: var(--s5); overflow-x: auto; font-size: 0.875rem; line-height: 1.75; color: var(--ink); }
.code-karte code { font-size: inherit; }
.faq-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s8); align-items: start; }
.faq-liste details { border-bottom: 1px solid var(--line); }
.faq-liste summary { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s5) 0; font-weight: 600; font-size: 1.0625rem; cursor: pointer; }
.faq-liste summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.5rem; line-height: 1; }
.faq-liste details[open] summary::after { content: "–"; }
.faq-liste details p { padding-bottom: var(--s5); color: var(--muted); max-width: var(--text); }
.faq-liste .textlink { margin-top: var(--s4); }
.schluss { background: var(--surface); text-align: center; }
.schluss-innen { display: flex; flex-direction: column; align-items: center; }
.schluss-signet { width: 56px; height: 56px; margin-bottom: var(--s5); }
.schluss .lead { margin-inline: auto; }

/* Unterseiten und Doku (Markdown) */
.seite { padding-block: var(--s5) var(--s9); }
.text { max-width: var(--text); }
.text h1 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); line-height: 1.1; }
.text h2 { margin-top: var(--s7); font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.02em; }
.text h3 { margin-top: var(--s6); }
.text h4 { margin: var(--s5) 0 0; font-size: 1rem; }
.text p, .text ul, .text ol, .text pre { margin: var(--s4) 0 0; }
.text h1 + p { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.5; }
.text li + li { margin-top: 6px; }
.text pre { padding: var(--s4) var(--s5); overflow-x: auto; background: var(--surface); border-radius: var(--r2); font-size: 0.875rem; line-height: 1.6; }
.text pre code { font-size: inherit; }
/* Code im Fliesstext fliesst mit und bricht am Zeilenende um; lange Werte wie ID;URL verbreitern die Seite nicht
   (vorher nowrap: Seite liess sich seitlich verschieben und wirkte abgeschnitten). */
.text :not(pre) > code { margin: 0 -1px; padding: 1px 3px; border-radius: 5px; background: var(--surface); white-space: normal; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.text .hinweis > :first-child { margin-top: 0; }
.text .hero, .text .hinweis, .text .entwurf { margin-top: var(--s5); padding: var(--s4) var(--s5); border-radius: var(--r2); background: var(--accent-soft); }
.text .hero { padding: 0; background: none; }
.text .vorlage-dl { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s5); padding: var(--s5); border-radius: var(--r3); background: var(--surface); }
.text .vorlage-bild { flex: none; width: 128px; height: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--raised); box-shadow: var(--shadow); }
@media (max-width: 560px) { .text .vorlage-dl { flex-direction: column; align-items: flex-start; } .text .vorlage-bild { width: 112px; } }
.text .vorlage-dl .knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--s3); margin: 0; }
.text .vorlage-dl .klein { margin: var(--s3) 0 0; color: var(--ink-2); font-size: 0.875rem; }
.text .karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.text .karte { padding: var(--s5); background: var(--surface); border-radius: var(--r3); }
.text .karte h2, .text .karte h3 { margin-top: 0; font-size: 1.0625rem; }
.text .karte p { margin-top: 6px; color: var(--muted); font-size: 0.9375rem; }
.text .schritte ol { padding-left: 1.4em; }
.text .schritte li { padding-left: 4px; }
.entwurf-banner { margin-bottom: var(--s5); padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--warn-soft); color: var(--warn); font-weight: 600; font-size: var(--fs-small); }
.tabelle { margin-top: var(--s5); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r2); }
.tabelle table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tabelle th, .tabelle td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: normal; word-break: normal; hyphens: manual; }
.tabelle th { background: var(--surface); font-weight: 600; }
.tabelle tr:last-child td { border-bottom: 0; }
/* 17.10.2026: Zellen und Code-Werte duerfen umbrechen (vorher nowrap -> Tabelle breiter als die Textspalte, rechts abgeschnitten).
   break-word bricht ein Wort nur, wenn es sonst ueber die Zelle hinausragt. */
.tabelle td code { white-space: normal; overflow-wrap: break-word; }
/* 17.10.2026: Passt eine Tabelle trotzdem nicht in ihre Spalte (oder Bildschirm <= 640 px), setzt app.js .als-karten: je Zeile
   eine Karte mit Spaltennamen (data-label aus md.mjs). Kopfzeile nur optisch versteckt; die Beschriftung per ::before ist fuer
   Screenreader leer (Alternativtext ""). Ohne JS bleibt die Tabelle seitlich scrollbar. */
.tabelle.als-karten { overflow: visible; border: 0; border-radius: 0; }
.als-karten table, .als-karten tbody, .als-karten tr, .als-karten td { display: block; width: 100%; }
.als-karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.als-karten tr { padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
.als-karten tr + tr { margin-top: var(--s3); }
.als-karten td, .als-karten td:first-child, .als-karten tr:last-child td { min-width: 0; padding: 4px 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
.als-karten td:first-child { padding-top: 0; font-weight: 600; color: var(--ink); }
.als-karten td:not(:first-child)::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); }
.als-karten td:empty { display: none; }
.als-karten td code { overflow-wrap: anywhere; }
.unterseite .text, .doku .text { max-width: none; }
.unterseite .text > :not(.karten):not(.tabelle):not(.pruefer):not(.firmen-held):not(.firmen-abschnitt) { max-width: var(--text); }
.unterseite .text .karten { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Seite «Für Firmen» (16.10.2026, src/firmen.mjs): Hero mit Beispiel-Richtlinie, Kartenraster, Schritte als Zeitleiste. */
.firmen-held { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s7); align-items: center; margin-top: var(--s4); padding: var(--s6) var(--s7);
  border: 1px solid var(--line); border-radius: var(--r4); background: var(--buehne), var(--surface); }
.firmen-held h1 { font-size: clamp(2.125rem, 3.8vw, 3rem); line-height: 1.04; }
.text .firmen-held h1 + p { margin-top: var(--s4); max-width: 34em; }
.firmen-held .held-aktionen { margin-top: var(--s5); }
.firmen-held .code-karte { border: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow); }
/* Code in einer Code-Karte nie als eigener Kasten (sonst Streifen zwischen Titel und Code), egal wo die Karte steht */
.text .code-karte pre { margin: 0; border-radius: 0; background: none; }
.firmen-held .code-karte pre { font-size: 0.8125rem; }
/* Beispiel-Richtlinie als Regelliste: links der Wert aus policy.json, rechts was er bewirkt (ohne doppelten JSON-Block). */
.text .code-erklaerung { padding: var(--s3) 20px var(--s4); }
.text .code-erklaerung p { margin: 0 0 var(--s2); font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.text .code-erklaerung ul { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.text .code-erklaerung li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; gap: 2px var(--s4); margin: 0; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); }
@media (max-width: 480px) { .text .code-erklaerung ul, .text .code-erklaerung li { grid-template-columns: minmax(0, 1fr); } }
.text .code-erklaerung li:first-child { border-top: 0; }
.text .code-erklaerung li code { justify-self: start; margin: 0; padding: 0; background: none; font-size: 0.8125rem; color: var(--accent); }
.unterseite .text:is(.firmen, .gestaltet) .karten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); }
/* Kompakt (18.10.2026): Icon neben dem Titel, damit Hero und Karten zusammen auf den ersten Bildschirm passen. */
.text:is(.firmen, .gestaltet) .karte { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s3); align-content: start; align-items: center; padding: var(--s5); border: 1px solid var(--line); background: var(--surface); }
.text:is(.firmen, .gestaltet) .karte > :not(.firmen-icon):not(h2) { grid-column: 1 / -1; }
.text:is(.firmen, .gestaltet) .karte h2 { font-size: 1.125rem; letter-spacing: -0.015em; }
.text:is(.firmen, .gestaltet) .karte p { margin-top: var(--s3); line-height: 1.5; }
.firmen-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r2); background: var(--accent-soft); color: var(--accent); }
.firmen-icon .icon { width: 20px; height: 20px; }
.firmen-abschnitt { margin-top: var(--s8); padding-top: var(--s8); border-top: 1px solid var(--line); }
.text .firmen-abschnitt > h2, .text .firmen-msp h2 { margin-top: 0; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.035em; }
.firmen-schritte > h2, .firmen-nachweis > h2 { text-align: center; }
.text .firmen-schritte .schritte ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin: var(--s7) 0 0; padding: 0; list-style: none; counter-reset: schritt; }
.text .firmen-schritte .schritte li { position: relative; margin: 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); counter-increment: schritt; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.text .firmen-schritte .schritte li::before { content: counter(schritt); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: var(--s4); border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 0.9375rem; }
.text .firmen-schritte .schritte li strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 1.0625rem; }
.firmen-links { max-width: 52rem; margin: var(--s6) auto 0; text-align: center; color: var(--ink-2); }
.text .firmen-links p { margin-top: var(--s2); }
.firmen-msp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.text .firmen-msp ul { display: grid; gap: var(--s3); margin-top: var(--s5); padding: 0; list-style: none; }
.text .firmen-msp li { display: flex; gap: var(--s3); align-items: flex-start; margin: 0; }
.firmen-msp li .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); stroke-width: 2.5; }
.text .firmen-msp .hinweis { margin-top: 0; padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r3); }
.text .firmen-nachweis p { max-width: 46rem; margin: var(--s4) auto 0; text-align: center; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 1100px) {
  .unterseite .text:is(.firmen, .gestaltet) .karten, .text .firmen-schritte .schritte ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .firmen-held, .firmen-msp { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .firmen-held { padding: var(--s6) var(--s5); }
}
@media (max-width: 600px) {
  .unterseite .text:is(.firmen, .gestaltet) .karten, .text .firmen-schritte .schritte ol { grid-template-columns: minmax(0, 1fr); }
  .firmen-abschnitt { margin-top: var(--s7); padding-top: var(--s7); }
  .firmen-held .held-aktionen .knopf { width: 100%; justify-content: center; }
}
/* Seiten «Funktionen» und «Datenschutz und Sicherheit» (17.10.2026, src/unterseiten.mjs): Aufbau wie «Für Firmen». */
.text .firmen-held .held-notiz p { margin-top: var(--s5); font-size: var(--fs-small); color: var(--muted); }
.text .ausloeser { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.text .ausloeser li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 10px; border: 1px solid var(--line-stark); border-radius: var(--pill); font-size: var(--fs-small); color: var(--ink-2); }
.ausloeser .icon { width: 16px; height: 16px; color: var(--accent); }
.fx-beispiel { margin: 0; padding: var(--s5) var(--s5) var(--s4); border: 1px solid var(--line); border-radius: var(--r4); background: var(--bg); box-shadow: var(--shadow); }
.fx-beispiel figcaption { margin-bottom: var(--s4); }
.text .fx-etikett { margin: var(--s4) 0 6px; font-size: var(--fs-tiny); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.text .fx-etikett:first-child { margin-top: 0; }
.text .fx-feld { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); font-size: 0.9375rem; line-height: 1.6; color: var(--ink); font-variant-numeric: tabular-nums; }
.text .fx-leiste { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0 0; padding: 8px 8px 8px 14px; border: 1px solid var(--line-stark); border-radius: var(--r2); background: var(--menue); box-shadow: var(--toast-glow); font-size: var(--fs-small); color: var(--ink); }
.fx-feld mark, .fx-feld .platzhalter { white-space: nowrap; }
.fx-leiste > span { flex: 1; }
.fx-signet { flex: none; width: 20px; height: 20px; }
.fx-knopf { flex: none; padding: 6px 14px; border-radius: var(--pill); background: var(--knopf-grund); color: var(--knopf-ink); box-shadow: var(--knopf-kante); font-weight: 600; font-size: var(--fs-tiny); }
.text .fx-legende { margin: var(--s4) 0 0; font-size: var(--fs-tiny); color: var(--muted); }
.fx-typen > h2, .text .fx-typen > h2 + p { text-align: center; }
.text .fx-typen > h2 + p { max-width: 46rem; margin: var(--s4) auto 0; color: var(--ink-2); }
.text .paket-raster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); margin: var(--s7) 0 0; padding: 0; list-style: none; }
.text .paket-karte { display: flex; flex-direction: column; margin: 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); }
.paket-karte .firmen-icon { width: 40px; height: 40px; margin-bottom: var(--s4); }
.paket-karte .firmen-icon .icon { width: 20px; height: 20px; }
.paket-kuerzel { align-self: flex-start; margin-bottom: var(--s4); padding: 4px 10px; border: 1px solid var(--line-stark); border-radius: var(--pill); font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--ink); }
.text .paket-karte h3 { margin: 0; hyphens: auto; overflow-wrap: break-word; font-size: 1.0625rem; letter-spacing: -0.015em; }
.text .paket-karte p { margin-top: var(--s2); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); hyphens: auto; overflow-wrap: break-word; }
.text .firmen-msp .paket-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.text .firmen-msp .paket-chips li { padding: 4px 12px; border: 1px solid var(--line-stark); border-radius: var(--pill); font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; }
.text .fx-grenzen h2 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.text .fx-grenzen > p { margin-top: var(--s3); }
.text .fx-grenzen > p:last-child { margin-top: var(--s5); font-size: var(--fs-small); color: var(--muted); }
.fx-grenzen li .icon { color: var(--muted); background: var(--surface-2); }
.text .firmen-msp .hinweis > .icon { width: 28px; height: 28px; margin-bottom: var(--s3); padding: 0; background: none; color: var(--accent); }
.text .firmen-msp .hinweis > .icon + p { margin-top: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
@media (min-width: 901px) { .sicherheit .firmen-held { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.sicherheit .code-karte pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.75rem; line-height: 1.7; }
/* Sicherheit (18.10.2026): die vier Zusagen als 2x2-Block im Hero statt darunter (alles auf dem ersten Bildschirm),
   der Auszug aus manifest.json steht bei «Selbst nachprüfen». */
.unterseite .text.sicherheit .firmen-held .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.text.sicherheit .firmen-held .karte { padding: var(--s4); background: var(--bg); }
.text.sicherheit .firmen-held .karte h2 { font-size: 1rem; }
.text.sicherheit .firmen-held .karte p { margin-top: var(--s2); font-size: var(--fs-small); }
.text.sicherheit .firmen-held .firmen-icon { width: 32px; height: 32px; }
.text.sicherheit .firmen-held .karte { grid-template-columns: 32px minmax(0, 1fr); }
.text.sicherheit .firmen-schritte .code-karte { max-width: 46rem; margin: var(--s6) auto 0; border: 1px solid var(--line); background: var(--bg); }
@media (max-width: 600px) { .unterseite .text.sicherheit .firmen-held .karten { grid-template-columns: minmax(0, 1fr); } }
.text .firmen-msp .haken-liste li, .text .fx-grenzen li { display: block; position: relative; padding-left: 34px; }
.text .firmen-msp .haken-liste li .icon, .text .fx-grenzen li .icon { position: absolute; left: 0; top: 0; }
.text .firmen-schritte > h2 + p { margin: var(--s3) auto 0; text-align: center; color: var(--ink-2); }
.text .firmen-schritte .schritte-drei ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.unterseite .text:is(.firmen, .gestaltet) .karten-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 1100px) {
  .text .paket-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .unterseite .text:is(.firmen, .gestaltet) .karten-drei, .text .firmen-schritte .schritte-drei ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .text .paket-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.doku .text h1 + p { font-size: var(--fs-body); color: var(--ink-2); }
.doku .text > * { max-width: var(--text); }
/* Doku (Neugestaltung 14.10.2026): ab 1200 px drei Spalten (Seiten | Text | Auf dieser Seite), Lesebreite 70ch,
   groessere Schrift, Kaesten, Schritte, Codebloecke mit Kopier-Knopf, echte Bilder. Nur Klassen des Doku-Bereichs. */
.doku .seite { padding-bottom: var(--s8); }
.doku-raster { display: grid; grid-template-columns: 236px minmax(0, 1fr) 208px; gap: var(--s7); align-items: start; }
.doku-raster.ohne-toc { grid-template-columns: 236px minmax(0, 1fr); }
.doku-haupt { min-width: 0; }
.doku .text { font-size: 1.125rem; line-height: 1.72; color: var(--ink-2); }
.doku .text > *, .doku .text .schritt > * { max-width: 70ch; }
.doku .text h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); }
.doku .text h1 + p { font-size: inherit; line-height: inherit; color: inherit; }
.doku .text .doku-lead, .doku-start-lead { margin-top: var(--s4); font-size: 1.25rem; line-height: 1.55; color: var(--ink-2); }
.doku .text h2 { margin-top: var(--s7); font-size: 1.5rem; line-height: 1.25; color: var(--ink); scroll-margin-top: calc(var(--kopf-hoehe) + var(--s5)); }
.doku .text h3 { margin-top: var(--s6); font-size: 1.1875rem; color: var(--ink); scroll-margin-top: calc(var(--kopf-hoehe) + var(--s5)); }
.doku .text p, .doku .text ul, .doku .text ol { margin-top: var(--s4); }
.doku .text li + li { margin-top: var(--s2); }
.doku .text strong { color: var(--ink); font-weight: 650; }
.doku .text :not(pre) > code { padding: 1px 5px; font-size: 0.875em; font-weight: 400; color: var(--ink-2); background: var(--surface-2); }

/* Kaesten: Hinweis, Tipp, Achtung */
.doku .text .kasten { margin-top: var(--s5); padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
.doku .text .kasten > .kasten-titel { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.9375rem; font-weight: 650; line-height: 1.4; }
.doku .text .kasten > .kasten-titel + * { margin-top: 6px; }
.kasten-titel .icon { width: 18px; height: 18px; flex: none; }
.doku .text .kasten-hinweis { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.kasten-hinweis .kasten-titel { color: var(--accent); }
.doku .text .kasten-tipp { background: color-mix(in srgb, var(--ok) 8%, var(--bg)); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.kasten-tipp .kasten-titel { color: var(--ok); }
.doku .text .kasten-achtung { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.kasten-achtung .kasten-titel { color: var(--warn); }

/* Anleitungen: nummerierte Schritte mit Verbindungslinie */
.doku .text .schritte-liste { margin: var(--s7) 0 0; padding: 0; list-style: none; counter-reset: schritt; max-width: none; }
.doku .text .schritt { position: relative; margin: 0; padding: 0 0 var(--s7) 56px; counter-increment: schritt; }
.doku .text .schritt::before { content: counter(schritt); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--bg); font-weight: 650; font-size: 1rem; font-variant-numeric: tabular-nums; }
.doku .text .schritt::after { content: ""; position: absolute; left: 17px; top: 46px; bottom: 10px; width: 2px; border-radius: 1px; background: var(--line); }
.doku .text .schritt:last-child { padding-bottom: 0; }
.doku .text .schritt:last-child::after { display: none; }
.doku .text .schritt > h2 { margin-top: 0; padding-top: 3px; font-size: 1.25rem; }

/* Codebloecke */
/* Ein Kasten ohne Kopfzeile und ohne Scrollbalken (18.10.2026): «Kopieren» klein oben rechts, der Code bricht innerhalb
   des Kastens um (Zeilen laufen bis an den Rand, kein Abbruch nach einem einzelnen Bindestrich), nichts verschwindet rechts. */
.doku .code-block, .badge-bereich .code-block { position: relative; margin-top: var(--s4); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
.code-block .code-kopieren { top: 10px; right: 10px; min-height: 28px; padding: 0 10px; }
.doku .code-block pre, .badge-bereich .code-block pre { margin: 0; padding: var(--s4) 104px var(--s4) var(--s5); border: 0; border-radius: 0; background: none; white-space: pre-wrap; word-break: break-all; overflow: visible; }
@media (max-width: 640px) { .doku .code-block pre, .badge-bereich .code-block pre { padding: 48px var(--s4) var(--s4); } }
.doku .code-block pre { white-space: normal; }
.doku .code-block .zeile { display: block; padding-left: 2ch; text-indent: -2ch; white-space: pre-wrap; word-break: break-all; }
.doku .code-block .zeile:empty::before { content: ' '; }
.code-kopieren { position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line-stark); border-radius: var(--r1); background: var(--knopf-zweit-grund); color: var(--ink); font: inherit; font-size: var(--fs-small); line-height: 1; cursor: pointer; }
.code-kopieren:hover { border-color: var(--muted); }
/* Badge-Seite (17.10.2026): Vorschau hell auf Porzellan, dunkel auf Nacht, Einbau-Codes mit Kopier-Knopf wie in der Doku. */
.badge-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s5); margin: var(--s5) 0 var(--s6); }
.badge-vorschau { margin: 0; display: grid; gap: var(--s3); }
.badge-flaeche { display: grid; place-items: center; min-height: 120px; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r4); }
.badge-vorschau-hell .badge-flaeche { background: var(--gold-1); }
.badge-vorschau-dunkel .badge-flaeche { background: var(--cta-ink); }
.badge-flaeche img { max-width: 100%; height: auto; }
.badge-vorschau figcaption { color: var(--muted); font-size: var(--fs-small); }
.presse-zip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s5) 0; }
.presse-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s5); margin: var(--s5) 0 var(--s6); }
.presse-logo, .presse-bild { margin: 0; display: grid; gap: var(--s3); align-content: start; }
.presse-flaeche { display: grid; place-items: center; min-height: 120px; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r4); }
.presse-logo-logo-hell .presse-flaeche, .presse-logo-signet .presse-flaeche { background: var(--gold-1); }
.presse-logo-logo-dunkel .presse-flaeche { background: var(--cta-ink); }
.presse-flaeche img { max-width: 100%; max-height: 64px; width: auto; height: auto; }
.presse-bilder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s5); margin: var(--s4) 0 var(--s6); }
.presse-bild img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r2); }
.presse-logo figcaption, .presse-bild figcaption { color: var(--muted); font-size: var(--fs-small); }
.seite:has(.badge-bereich) .achtung, .seite:has(.presse-bereich) .achtung { margin-top: var(--s6); padding: var(--s4) var(--s5); border: 1px solid var(--line-stark); border-radius: var(--r2); background: var(--surface); }

/* Tabellen: sauber, auf schmalen Bildschirmen seitlich scrollbar (Bereich per Tastatur erreichbar) */
.doku .text .tabelle { max-width: none; margin-top: var(--s5); }
.doku .tabelle table { font-size: 0.9375rem; line-height: 1.55; }
.doku .tabelle th { color: var(--ink); }

/* Echte Bilder: einheitlicher Rahmen, Variante passend zu Hell/Dunkel */
.abb-echt .abb-rahmen { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r3); background: var(--raised); }
.abb-echt a, .abb-echt picture, .abb-echt img { display: block; width: 100%; height: auto; }
.abb-echt .bild-dunkel { display: none; }
:root[data-theme="dunkel"] .abb-echt .bild-hell { display: none; }
:root[data-theme="dunkel"] .abb-echt .bild-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .abb-echt .bild-hell { display: none; }
  :root:not([data-theme="hell"]) .abb-echt .bild-dunkel { display: block; }
}
.abb-echt-popup .abb-rahmen { width: fit-content; max-width: 100%; }
.abb-echt-popup img { width: 340px; max-width: 100%; }
.doku .abb:not(.abb-echt) { max-width: 560px; }
/* Adressleisten-Schritt: nur die Leiste zeigen, ohne leere Platzhalterflaeche */
.abb-bild-edge-adresse .abb-flaeche, .abb-bild-chrome-adresse .abb-flaeche { display: none; }
/* Chat-Bilder: unterer Teil mit Leiste und Eingabefeld */
.doku .abb-flaeche { min-height: 0; padding: var(--s4); }

/* Linke Navigation: nur Seiten, Gruppen aufklappbar, aktive Seite hervorgehoben */
.doku-seite { position: sticky; top: calc(var(--kopf-hoehe) + var(--s5)); max-height: calc(100dvh - var(--kopf-hoehe) - var(--s6)); overflow: auto; overscroll-behavior: contain; padding: 2px var(--s2) var(--s5) 2px; scrollbar-width: thin; }
.doku-gruppen, .doku-gruppen ul { margin: 0; padding: 0; list-style: none; }
.doku-gruppen > li + li { margin-top: var(--s1); }
.doku-gruppe > summary, .doku-mobil > summary, .doku-toc-mobil > summary { display: flex; align-items: center; gap: var(--s2); cursor: pointer; list-style: none; }
.doku-gruppe > summary { justify-content: space-between; min-height: 34px; padding: 0 10px; border-radius: var(--r1); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
.doku-gruppe[open] > summary { color: var(--ink); }
.doku-gruppe[open] > summary, .doku-mobil[open] > summary, .doku-toc-mobil[open] > summary { background: none; }
.doku-gruppe > summary:hover { background: var(--surface); }
.doku-gruppe > summary::after, .doku-mobil > summary::after, .doku-toc-mobil > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform var(--dauer-hover) var(--ease-out); }
.doku-gruppe:not([open]) > summary::after, .doku-mobil:not([open]) > summary::after, .doku-toc-mobil:not([open]) > summary::after { transform: rotate(-45deg); }
.doku-gruppe ul { margin: 2px 0 0 10px; padding-left: 8px; border-left: 1px solid var(--line); }
.doku-gruppen a { display: block; padding: 6px 10px; border-radius: var(--r1); color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; line-height: 1.4; }
.doku-gruppen a:hover { background: var(--surface); color: var(--ink); }
.doku-gruppen a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* Suche mit Tastenkuerzel */
.doku-suche { position: relative; margin-bottom: var(--s5); }
.doku-suchfeld { position: relative; }
/* FAQ (16.10.2026): Themen als Pills, Fragen als aufklappbare Karten, Filterfeld nur mit app.js */
.faq-filter { max-width: 560px; margin: var(--s5) 0 0; }
.faq-info:empty { display: none; }
.faq-filter .doku-suchfeld input { padding-right: var(--s4); }
.faq-info { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--fs-small); }
.faq-themen ul { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 0; padding: 0; list-style: none; }
.text .faq-themen li, .doku .text .faq-themen li { margin: 0; }
.faq-themen a { display: inline-block; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--ink); font-size: var(--fs-small); text-decoration: none; transition: border-color var(--dauer-hover) var(--ease-out); }
.faq-themen a:hover { border-color: var(--accent); }
.faq-gruppe { margin-top: var(--s7); }
.faq-gruppe[hidden] { display: none; }
.faq-gruppe > h2 { margin: 0 0 var(--s4); scroll-margin-top: calc(var(--kopf-hoehe) + var(--s5)); }
.faq-frage { margin: 0 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r2); background: var(--raised); transition: border-color var(--dauer-hover) var(--ease-out); }
.faq-frage[open] { border-color: var(--line-stark); }
.faq-frage summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); cursor: pointer; list-style: none; }
.faq-frage summary::-webkit-details-marker { display: none; }
.faq-frage summary:hover .faq-pfeil { color: var(--ink); }
.faq-frage summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r2); }
.text .faq-frage summary h3, .doku .text .faq-frage summary h3 { margin: 0; font-family: var(--font); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; scroll-margin-top: calc(var(--kopf-hoehe) + var(--s5)); }
.faq-pfeil { color: var(--muted); transition: transform var(--dauer-hover) var(--ease-out); }
.faq-frage[open] .faq-pfeil { transform: rotate(180deg); }
.faq-antwort { padding: 0 var(--s5) var(--s4); color: var(--ink-2); }
.faq-antwort > :first-child { margin-top: 0; }
.faq-antwort > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .faq-frage summary { padding: var(--s3) var(--s4); }
  .faq-antwort { padding: 0 var(--s4) var(--s3); }
  .faq-gruppe { margin-top: var(--s6); }
}
@media (prefers-reduced-motion: reduce) { .faq-pfeil, .faq-frage, .faq-themen a { transition: none; } }
.doku-suchfeld .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.doku-suchfeld input { width: 100%; height: 44px; padding: 0 64px 0 38px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--raised); color: var(--ink); font: inherit; font-size: 0.9375rem; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent); }
.doku-suchfeld input::placeholder { color: var(--muted); }
.doku-suchfeld input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.doku-suchfeld input::-webkit-search-cancel-button { display: none; }
.doku-suchfeld kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font: 500 0.75rem/1.5 var(--font); pointer-events: none; }
.doku-suche-info { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.doku-suche.hat-treffer .doku-suche-info { margin-top: var(--s2); }
.doku-treffer { margin: var(--s2) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.doku-treffer:empty { display: none; }
.doku-treffer a { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r1); text-decoration: none; color: var(--ink-2); }
.doku-treffer a:hover, .doku-treffer a:focus { background: var(--surface); color: var(--ink); }
.treffer-titel { font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.treffer-ort { font-size: var(--fs-tiny); font-weight: 600; color: var(--accent); }
.treffer-text { font-size: 0.8125rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doku-treffer mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Rechts: Auf dieser Seite */
.doku-toc { position: sticky; top: calc(var(--kopf-hoehe) + var(--s5)); max-height: calc(100dvh - var(--kopf-hoehe) - var(--s6)); overflow: auto; font-size: 0.875rem; }
.doku-toc-titel { margin: 0 0 var(--s2); font-size: 0.875rem; font-weight: 650; color: var(--ink); }
.doku-toc ul, .doku-toc-mobil ul { margin: 0; padding: 0; list-style: none; }
.doku-toc ul { border-left: 1px solid var(--line); }
.doku-toc a { display: block; margin-left: -1px; padding: 5px 0 5px 12px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.4; }
.doku-toc a:hover { color: var(--ink); }
.doku-toc a[aria-current="location"] { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Handy und Tablet: Menue und Inhaltsverzeichnis als Aufklapper oben */
.doku-mobil, .doku-toc-mobil { display: none; border: 1px solid var(--line); border-radius: var(--r2); background: var(--raised); }
.doku-mobil > summary, .doku-toc-mobil > summary { min-height: 48px; padding: 0 var(--s4); font-weight: 600; color: var(--ink); }
.doku-mobil-art { color: var(--muted); font-weight: 500; }
.doku-mobil-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doku-mobil > nav, .doku-toc-mobil > nav { padding: var(--s2) var(--s2) var(--s3); border-top: 1px solid var(--line); }
.doku-mobil .doku-gruppe > summary { min-height: 40px; }
.doku-mobil .doku-gruppen a, .doku-toc-mobil a { display: flex; align-items: center; min-height: 44px; }
.doku-toc-mobil a { padding: 0 var(--s3); border-radius: var(--r1); color: var(--ink-2); text-decoration: none; }
.doku-toc-mobil a:hover { background: var(--surface); color: var(--ink); }

/* Uebersicht: ein Hauptweg, grosse Karten, beliebte Seiten */
.doku .text .doku-start { margin-top: var(--s4); }
.doku .text .doku-start-aktion { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.doku-start-knopf { height: 52px; padding: 0 22px; gap: 10px; font-size: 1rem; border-radius: var(--r2); }
.doku-start-knopf .icon { width: 20px; height: 20px; }
.doku .text .doku-start-dauer { margin-top: var(--s2); font-size: var(--fs-small); color: var(--muted); }
.doku .text .doku-zwischentitel { margin-top: var(--s7); font-size: 1.375rem; }
.doku .text .doku-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); max-width: none; margin: var(--s4) 0 0; padding: 0; list-style: none; }
.doku .text .doku-karten li { margin: 0; }
/* Symbol neben dem Titel (18.10.2026): beide Kartenreihen passen auf den ersten Bildschirm */
.doku-karte { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; align-items: center; gap: 6px var(--s3); height: 100%; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r3); background: var(--raised); color: var(--ink); text-decoration: none; transition: border-color var(--dauer-hover) var(--ease-out), box-shadow var(--dauer-hover) var(--ease-out); }
.doku-karte:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.doku-karte-text { grid-column: 1 / -1; }
.doku-karte-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r2); background: var(--accent-soft); color: var(--accent); }
.doku-karte-symbol .icon { width: 22px; height: 22px; }
.doku-karte-titel { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.doku-karte-text { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.doku .text .doku-beliebt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); max-width: none; margin: var(--s3) 0 0; padding: 0; list-style: none; }
.doku .text .doku-beliebt li { margin: 0; border-bottom: 1px solid var(--line); }
.doku-beliebt a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; color: var(--ink); text-decoration: none; font-weight: 550; }
.doku-beliebt a:hover { color: var(--accent); }
.doku-beliebt .icon { width: 18px; height: 18px; flex: none; color: var(--muted); }

/* Seitenende: Vor/Zurueck als Karten, ehrlicher Abschluss */
.doku-blaettern { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); max-width: 70ch; margin-top: var(--s7); }
.doku-blaettern a { display: flex; align-items: center; gap: var(--s3); min-height: 76px; padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r3); background: var(--raised); color: var(--ink); text-decoration: none; font-weight: 600; transition: border-color var(--dauer-hover) var(--ease-out); }
.doku-blaettern a:hover { border-color: var(--accent); }
.doku-blaettern a span { display: grid; gap: 2px; min-width: 0; }
.doku-blaettern small { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.doku-blaettern .doku-weiter { grid-column: 2; justify-content: flex-end; text-align: right; }
/* Nur ein Blaetter-Link (erste/letzte Seite): ganze Breite wie der Installieren-Kasten darunter, nicht allein rechts */
.doku-blaettern > span:empty { display: none; }
.doku-blaettern > span:empty + a, .doku-blaettern > a:has(+ span:empty) { grid-column: 1 / -1; }
.doku-blaettern .icon { flex: none; width: 18px; height: 18px; color: var(--accent); }
.doku-install { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); max-width: 70ch; margin-top: var(--s5); padding: var(--s5) var(--s6); border-radius: var(--r3); background: var(--surface); }
.doku-install p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
/* Im Anleitungstext (::: installieren) gilt sonst der Absatzabstand von .doku .text p – Text und Knopf staenden versetzt. */
.text .doku-install p, .doku .text .doku-install p { margin-top: 0; }
.doku-install .doku-install-titel { margin-bottom: 4px; color: var(--ink); font-weight: 650; font-size: 1.125rem; }
.doku-install .doku-stores { display: flex; flex-wrap: wrap; gap: 4px var(--s4); margin-top: var(--s2); font-size: var(--fs-small); color: var(--muted); }
.doku-install a.doku-store { color: var(--accent); }
.doku-install .knopf { flex: none; }

@media (max-width: 1199px) {
  .doku-raster, .doku-raster.ohne-toc { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s6); }
  .doku-toc { display: none; }
  .doku-toc-mobil { display: block; margin-top: var(--s5); }
  .doku .text .doku-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .doku .doku-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .doku .doku-seite { max-height: none; overflow: visible; padding: 0; }
  .doku-nav { display: none; }
  .doku .doku-seite { display: flex; align-items: flex-start; gap: var(--s2); position: relative; top: auto; }
  .doku .doku-suche { flex: 1; min-width: 0; margin-bottom: 0; }
  .doku-mobil { display: block; flex: none; }
  .doku-mobil > summary { min-height: 44px; }
  .doku-mobil-titel { display: none; }
  .doku-mobil > nav { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-menue); max-height: 70dvh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r2); background: var(--raised); box-shadow: var(--shadow); }
  .doku-suchfeld kbd { display: none; }
  .doku-suchfeld input { padding-right: 12px; }
  .doku-install { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .doku .text { font-size: 1.0625rem; line-height: 1.68; }
  .doku .text h2 { margin-top: var(--s7); font-size: 1.375rem; }
  .doku .text .schritt { padding-left: 46px; }
  .doku .text .schritt::before { width: 32px; height: 32px; font-size: 0.9375rem; }
  .doku .text .schritt::after { left: 15px; top: 40px; }
  .doku .text .doku-karten, .doku .text .doku-beliebt { grid-template-columns: minmax(0, 1fr); }
  .doku-start-knopf { width: 100%; }
  .doku-blaettern { grid-template-columns: minmax(0, 1fr); }
  .doku-blaettern .doku-weiter { grid-column: 1; }
  .doku-install { padding: var(--s5); }
  .doku-install .knopf { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .doku-karte, .doku-blaettern a, .doku-gruppe > summary::after, .doku-mobil > summary::after, .doku-toc-mobil > summary::after { transition: none; }
}

/* Doku-Abbildungen (schematisch, Auflage 5) */
.abb { max-width: var(--text); margin: var(--s5) 0 var(--s6); }
.abb figcaption { margin-top: var(--s2); font-size: var(--fs-tiny); color: var(--muted); }
.abb-fenster { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r3); background: var(--raised); font-size: 0.875rem; line-height: 1.4; color: var(--ink-2); }
.abb-kopf { display: flex; align-items: center; gap: var(--s3); padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.abb-punkte { display: flex; gap: 5px; }
.abb-punkte i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-2); }
.abb-adresse { flex: 1; min-width: 0; padding: 4px 12px; border-radius: 999px; background: var(--raised); font-family: var(--mono); font-size: 0.8125rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abb-leiste { display: flex; align-items: center; gap: var(--s2); }
.abb-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.abb-signet { width: 20px; height: 20px; flex: none; }
.abb-flaeche { padding: var(--s5); min-height: 120px; display: grid; gap: var(--s3); align-content: start; }
.abb-strich { display: block; height: 10px; width: 40%; border-radius: 5px; background: var(--surface-2); }
.abb-strich.lang { width: 70%; }
.abb-dateien { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.abb-datei { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r1); color: var(--ink); font-weight: 550; }
.abb-titel { font-weight: 600; color: var(--ink); font-size: 1rem; }
.abb-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.abb-oben { padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.abb-chrome, .abb-haupt { display: grid; gap: var(--s4); align-content: start; }
.abb-edge { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--s5); min-height: 170px; }
.abb-seitenleiste { display: flex; flex-direction: column; gap: var(--s3); padding-right: var(--s4); border-right: 1px solid var(--line); }
.abb-unten { margin-top: auto; }
.abb-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); }
.abb-knopf { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r1); background: var(--raised); color: var(--ink); font-size: 0.8125rem; font-weight: 550; white-space: nowrap; }
.abb-knopf.abb-primaer { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.abb-knopf.abb-aus { opacity: 0.45; }
.abb-knopf.abb-auswahl { font-weight: 450; }
/* Weitere Optionen (drei Punkte) wie in der schlanken Leiste der Erweiterung (17.10.2026) */
.abb-knopf.abb-mehr { padding: 0 7px; }
.abb-mehr .abb-icon { width: 16px; height: 16px; stroke-width: 3.4; color: var(--ink-2); }
.abb-schalter { display: inline-flex; width: 32px; height: 18px; padding: 2px; border-radius: 999px; background: var(--surface-2); }
.abb-schalter i { width: 14px; height: 14px; border-radius: 50%; background: var(--raised); }
.abb-schalter.an { justify-content: flex-end; background: var(--accent); }
.abb-hervor { outline: 2px solid var(--warn); outline-offset: 3px; border-radius: var(--r1); }
.abb-karte { display: flex; align-items: center; gap: var(--s3); max-width: 420px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r2); }
.abb-karte .abb-signet { width: 28px; height: 28px; }
.abb-karte-text { display: grid; flex: 1; min-width: 0; }
.abb-klein { font-size: 0.8125rem; color: var(--muted); }
.abb-menue { justify-self: end; display: grid; gap: var(--s3); width: min(280px, 100%); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r2); background: var(--raised); box-shadow: var(--shadow); }
.abb-menue-zeile { display: flex; align-items: center; gap: var(--s3); }
.abb-menue-zeile b { flex: 1; color: var(--ink); }
.abb-rund { display: inline-flex; padding: 3px; border-radius: 50%; }
.abb-rund .abb-icon { color: var(--ink); }
.abb-chat { display: grid; gap: var(--s3); }
.abb-chat-titel { display: flex; align-items: center; gap: var(--s2); font-weight: 600; color: var(--ink); }
.abb-marke { padding: 1px 8px; border-radius: 999px; background: var(--surface); font-size: var(--fs-tiny); font-weight: 500; color: var(--muted); }
.abb-blase { display: block; height: 30px; width: 62%; border-radius: var(--r2); background: var(--surface); }
.abb-blase.kurz { width: 38%; justify-self: end; }
.abb-eingabe { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); color: var(--ink); overflow-wrap: anywhere; }
.abb-eingabe mark { background: var(--warn-soft); color: inherit; text-decoration: underline 2px var(--warn); text-underline-offset: 3px; }
.abb-balken { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--redact); color: var(--bg); font-size: 0.8125rem; }
/* Warnleiste «Senden angehalten» (abbildungen.mjs, dialog): mit 937fbf8 versehentlich entfernt, 17.10.2026 zurueck. */
.abb-leiste-warn { display: flex; align-items: center; gap: var(--s2); padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--raised); font-size: 0.8125rem; color: var(--ink); }
.abb-leiste-warn .abb-text { flex: 1; min-width: 0; }
.abb-leiste-warn .abb-knoepfe { flex: none; }
.abb-store-hinweis { flex-wrap: wrap; }
.abb-store-hinweis .abb-knopf, .abb-store .abb-knopf { white-space: normal; }
.abb-stopp { flex-wrap: wrap; row-gap: var(--s2); }
.abb-stopp .abb-text { flex: 1 1 220px; }
@media (max-width: 640px) {
  .abb-leiste-warn { flex-wrap: wrap; }
  .abb-leiste-warn .abb-text { flex-basis: calc(100% - 32px); }
  .abb-leiste-warn .abb-knoepfe { flex: 1 1 100%; min-width: 0; }
}

/* Fuss */
.fuss { padding: var(--s8) 0 var(--s7); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-small); }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); gap: var(--s6) var(--s8); }
.fuss-marke p + p { margin-top: var(--s3); max-width: 34em; }
.fuss-links { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 0 var(--s7); align-content: start; margin: 0; padding: 0; list-style: none; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-2); text-decoration: none; }
.fuss-links a:hover { color: var(--ink); text-decoration: underline; }
.fuss-stand { grid-column: 1 / -1; font-size: var(--fs-tiny); }
.dl-leiste { display: none; }

/* Wurzel- und 404-Seite */
.wahl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s5); min-height: 100dvh; text-align: center; }
.marke.gross { font-size: 1.5rem; }
.marke.gross .logo { width: 40px; height: 40px; }
.knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }

/* 404 (17.10.2026): je Sprache ein Block mit data-l, sichtbar nur der von <html data-nf> (app.js, ohne Skript Deutsch).
   Szene: das Signet bewacht die verlorene Seite, ein Suchlicht streift knapp daneben. Nur Tokens, keine neuen Farben. */
.nf [data-l] { display: none; }
:root[data-nf="de"] [data-l="de"], :root[data-nf="en"] [data-l="en"], :root[data-nf="fr"] [data-l="fr"],
:root[data-nf="it"] [data-l="it"], :root[data-nf="es"] [data-l="es"], :root[data-nf="pt"] [data-l="pt"] { display: revert; }
.nf .aufklapp button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r1); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nf .aufklapp button:hover, .nf .aufklapp button[aria-current="true"] { background: var(--surface); }
.nf-haupt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s6); min-height: calc(100dvh - var(--kopf-hoehe) - 180px); padding-block: var(--s8); text-align: center; }
.nf-text { max-width: 40rem; }
.nf-kicker { margin: 0 0 var(--s3); color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; }
.nf-text h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); line-height: 1.12; letter-spacing: -0.03em; }
.nf-satz { margin: var(--s4) auto 0; max-width: 34em; color: var(--ink-2); font-size: 1.0625rem; }
.nf-trost { margin: var(--s3) 0 var(--s6); color: var(--muted); font-size: var(--fs-small); }
.nf-szene { position: relative; width: 260px; height: 200px; }
.nf-blatt {
  position: absolute; left: 8px; top: 30px; display: grid; place-items: center; width: 108px; height: 136px;
  border: 2px dashed var(--line-stark); border-radius: var(--r2); background: var(--surface);
  color: var(--muted); font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; letter-spacing: -0.04em;
  transform: rotate(-9deg);
}
.nf-signet { position: absolute; right: 6px; bottom: 0; width: 156px; height: 156px; transform-origin: 50% 92%; filter: drop-shadow(0 10px 24px var(--glow-soft)); }
.nf-licht {
  position: absolute; right: 70px; top: 54px; width: 190px; height: 110px; border-radius: 50%;
  background: radial-gradient(ellipse at 100% 50%, color-mix(in srgb, var(--gold-2) 45%, transparent), transparent 70%);
  transform-origin: 100% 50%; transform: rotate(8deg);
}
@media (prefers-reduced-motion: no-preference) {
  .nf-signet { animation: nf-wache 7s ease-in-out infinite; }
  .nf-blatt { animation: nf-schweben 5s ease-in-out infinite; }
  .nf-licht { animation: nf-suchen 7s ease-in-out infinite; }
}
@keyframes nf-wache { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes nf-schweben { 0%, 100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-8px) rotate(-6deg); } }
/* Das Suchlicht streift an der Seite vorbei, trifft sie aber nie ganz. */
@keyframes nf-suchen { 0%, 100% { transform: rotate(14deg); opacity: 0.5; } 50% { transform: rotate(-6deg); opacity: 0.9; } }
@media (max-width: 640px) {
  .nf-haupt { gap: var(--s5); padding-block: var(--s6); }
  .nf-szene { transform: scale(0.82); margin-block: -18px; }
  .nf .knoepfe .knopf { width: 100%; }
}

/* Tablet */
@media (max-width: 1080px) {
  .kopf-cta { display: none; }
}
@media (max-width: 900px) {
  .haupt { display: none; }
  .mobilmenue { display: block; position: static; }
  .mobilmenue .aufklapp { left: var(--s4); right: var(--s4); top: calc(var(--kopf-hoehe) - 4px); }
  .mobilmenue .aufklapp a { font-size: 1.0625rem; }
  .held { padding: var(--s6) 0 var(--s8); }
  .held-raster, .datenschutz-raster, .firmen-raster, .faq-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .held-raster { gap: var(--s7); }
  .doku-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .doku-seite { position: static; max-height: none; overflow: visible; padding-bottom: 0; }
  .doku-suche { margin-bottom: var(--s3); }
  .doku-menue { background: var(--surface); border-radius: var(--r2); }
  .doku-menue > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 var(--s4); font-weight: 600; cursor: pointer; list-style: none; }
  .doku-menue > summary::-webkit-details-marker { display: none; }
  .doku-menue > summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--muted); }
  .doku-menue[open] > summary::after { content: "–"; }
  .doku-menue .doku-nav { padding: var(--s2) var(--s2) var(--s4); }
  .doku-nav a { min-height: 44px; display: flex; align-items: center; }
  .doku-unter a { min-height: 40px; }
  .doku-install { flex-direction: column; align-items: flex-start; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Handy */
@media (max-width: 640px) {
  .breite { padding-inline: var(--s4); }
  .abschnitt { padding: var(--s8) 0; }
  .held { padding-top: var(--s5); }
  .held-aktionen .knopf { width: 100%; }
  .js .dl-leiste { transform: translateY(110%); transition: transform 240ms var(--ease-out); }
  .js.leiste-an .dl-leiste { transform: none; }
  .knopf-gross { height: 52px; font-size: 1rem; }
  .vertrauen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--s3); font-size: 0.8125rem; }
  .vertrauen li { align-items: flex-start; }
  .vertrauen .icon { margin-top: 2px; }
  .vertrauen.zentriert { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .doku .dl-leiste { display: none; }
  .abb-edge { grid-template-columns: minmax(0, 1fr); }
  .abb-seitenleiste { padding: 0 0 var(--s3); border-right: 0; border-bottom: 1px solid var(--line); }
  .abb-flaeche { padding: var(--s4); }
  body.doku { padding-bottom: 0; }
  .versprechen { grid-template-columns: minmax(0, 1fr); }
  .zwischen-cta .knopf { width: 100%; }
  .versprechen { padding: var(--s5); gap: var(--s5); }
  .kennzahl-wert { font-size: 2.75rem; }
  .text .karten { grid-template-columns: minmax(0, 1fr); }
  .seite { padding-top: var(--s5); }
  .fuss-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-links a { min-height: 44px; }
  .dl-leiste {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-leiste);
    padding: 10px var(--s4) calc(10px + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -1px 0 var(--line);
  }
  .dl-leiste .knopf { width: 100%; height: 50px; }
  body:not(.wurzel) { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .marke span { font-size: 1rem; }
  .sprachwahl > summary, .mobilmenue > summary, .symbolknopf { padding: 0 8px; }
}

/* SEO-Runde 14.10.2026: Brotkrumen, Copilot-Hinweis, Store-Hinweis (noch keine Store-Eintraege) */
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 var(--s5); padding: 0; list-style: none; font-size: var(--fs-small); color: var(--muted); }
.brotkrumen li + li::before { content: "›"; margin-right: 8px; }
.brotkrumen a { color: var(--muted); text-decoration: none; }
.brotkrumen a:hover { color: var(--ink); text-decoration: underline; }
.schritte-hinweis { margin-top: var(--s5); font-size: var(--fs-small); color: var(--muted); }
.store-bald { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.store-bald li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-small); font-weight: 550; }
.store-bald span { padding: 0 8px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: var(--fs-tiny); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.artikel-raster { display: grid; grid-template-columns: minmax(0, var(--text)) 240px; justify-content: start; gap: var(--s7); align-items: start; }
.artikel-seite { position: sticky; top: 96px; padding-left: var(--s5); border-left: 1px solid var(--line); font-size: var(--fs-small); }
.artikel-seite ul { display: grid; gap: 10px; margin: var(--s3) 0 var(--s5); padding: 0; list-style: none; }
.artikel-seite a { color: var(--muted); text-decoration: none; }
.artikel-seite a:hover { color: var(--ink); text-decoration: underline; }
.artikel-stand { color: var(--muted); }
@media (max-width: 900px) {
  .artikel-raster { grid-template-columns: minmax(0, 1fr); }
  .artikel-seite { display: none; }
}
/* Beleg aus manifest.json ueber die ganze Breite: Code links, Erklaerung rechts (keine leere Spalte) */
.code-breit { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.code-breit figcaption { grid-column: 1 / -1; }
.code-breit .code-notiz { padding: var(--s5); font-size: var(--fs-body); color: var(--ink-2); }
@media (max-width: 900px) { .code-breit { grid-template-columns: minmax(0, 1fr); } .code-breit .code-notiz { padding-top: 0; } }
.fuss-wer { grid-column: 1 / -1; color: var(--muted); }
.datenschutz-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
@media (max-width: 640px) {
  .held .held-aktionen .knopf-zweit { min-height: 44px; height: 44px; font-size: var(--fs-small); }
  .held .held-aktionen { gap: var(--s2); }
  /* Lange Knopftexte (z. B. "Für Firmen: per Intune oder GPO verteilen") umbrechen statt die Seite zu verbreitern */
  .held-aktionen .knopf { max-width: 100%; min-width: 0; height: auto; min-height: 52px; padding-block: 12px; white-space: normal; text-align: center; line-height: 1.25; }
  h1, h2, h3 { hyphens: auto; }
}
/* Lange Woerter in Ueberschriften (Sozialversicherungsnummern) bleiben in der Spalte */
h1, h2, h3, h4 { overflow-wrap: break-word; }

/* Startseite 14.10.2026: 3D-Hero, Nutzen-Band, Videos, Live-Demo, Detailbilder, Galerie, Installation */
.versprechen p { margin-top: 6px; color: var(--muted); font-size: 0.9375rem; }
.held-buehne { display: grid; width: 100%; max-width: 560px; justify-self: center; }
.held-szene { position: relative; width: 100%; aspect-ratio: 5 / 3.6; }
.held-produkt { position: relative; z-index: 1; width: 100%; margin: var(--s3) 0 0; justify-self: center; }
.held-produkt img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r3); background: var(--raised); box-shadow: var(--shadow); }
.held-produkt figcaption { margin-top: var(--s2); text-align: center; font-size: var(--fs-small); color: var(--ink-2); }
.detail-raster .browser:has(.bild-popup) { max-width: 360px; margin-inline: auto; }
/* Hell/Dunkel-Aufnahmen: passendes Bild zum Thema; Aufnahmen ohne Dunkel-Fassung leicht gedaempft. */
.nur-dunkel { display: none !important; }
:root[data-theme="dunkel"] .nur-hell { display: none !important; }
:root[data-theme="dunkel"] .nur-dunkel { display: block !important; }
:root[data-theme="dunkel"] main img[src*="/medien/"]:not(.nur-dunkel), :root[data-theme="dunkel"] main video { filter: brightness(0.86); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .nur-hell { display: none !important; }
  :root:not([data-theme="hell"]) .nur-dunkel { display: block !important; }
  :root:not([data-theme="hell"]) main img[src*="/medien/"]:not(.nur-dunkel), :root:not([data-theme="hell"]) main video { filter: brightness(0.86); }
}
.nutzen-link span { color: var(--accent); }
.nutzen-link { display: flex; align-items: center; gap: var(--s3); color: inherit; text-decoration: none; }
.nutzen-link:hover b { text-decoration: underline; }
.held-grafik { display: block; width: 100%; height: 100%; transition: opacity 400ms; }
.h3-chip rect { fill: var(--raised); stroke: var(--warn); stroke-width: 2; }
.h3-chip text { fill: var(--ink); font: 600 15px var(--font); text-anchor: middle; font-variant-numeric: tabular-nums; }
.h3-spur path { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 6; }
.h3-schild { fill: var(--accent); }
.h3-haken { fill: none; stroke: var(--bg); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.h3-balken { fill: var(--redact); }
.held3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms var(--ease-out); }
.held3d-an .held3d-canvas { opacity: 1; }
.held3d-an .held-grafik { opacity: 0; }
/* Poster der 3D-Szene: gleiche Flaeche wie die Live-Szene (contain), blendet beim Start der Live-Szene aus. */
.held-poster, .held-poster img { display: block; width: 100%; height: 100%; }
.held-poster img { object-fit: contain; transition: opacity 600ms var(--ease-out); }
.held3d-an .held-poster img { opacity: 0; }
.icon3d { display: block; width: 96px; height: 96px; margin: 0 0 var(--s3) -10px; }
.kopf-zentriert .icon3d { margin: 0 auto var(--s3); }
@media (max-width: 640px) { .icon3d { width: 72px; height: 72px; } }

.nutzen-band { border-block: 1px solid var(--line); background: var(--surface); }
.nutzen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); margin: 0 auto; padding-block: var(--s5); list-style: none; }
.nutzen li { display: flex; align-items: flex-start; gap: var(--s3); }
.nutzen .icon { margin-top: 2px; }
@media (min-width: 901px) { .held { padding-top: var(--s7); } }
.nutzen .icon { color: var(--accent); }
.nutzen span { display: grid; font-size: var(--fs-small); line-height: 1.35; color: var(--muted); }
.nutzen b { font-size: 0.9375rem; color: var(--ink); font-variant-numeric: tabular-nums; }

.kopf-zentriert { text-align: center; }
.kopf-zentriert .lead { margin-inline: auto; }

/* Browser-Rahmen fuer echte Bilder und Videos; auf grossen Bildschirmen leicht geneigt (CSS-Perspektive). */
.browser { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r3); background: var(--raised); box-shadow: var(--shadow); }
.browser-kopf { display: flex; align-items: center; gap: var(--s3); height: 34px; padding: 0 var(--s4); border-bottom: 1px solid var(--line); background: var(--surface); }
.browser-punkte { display: inline-flex; gap: 6px; }
.browser-punkte i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.browser-titel { font-size: var(--fs-tiny); font-weight: 550; color: var(--muted); }
.browser img, .browser video { display: block; width: 100%; height: auto; background: var(--surface); }
@media (min-width: 901px) {
  .nb-buehne .browser-3d { transform: perspective(2200px) rotateX(4deg); }
  .held-produkt img { transform: perspective(1400px) rotateX(6deg) rotateY(-6deg); }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .browser-3d { transition: transform 500ms var(--ease-out); }
  .nb-buehne .browser-3d:hover { transform: perspective(1800px) rotateX(0) rotateY(0); }
}

.video-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s6); }
.wahl-knopf { min-height: 44px; padding: 0 var(--s5); border: 1px solid var(--line-stark); border-radius: 999px; background: var(--knopf-zweit-grund); color: var(--ink-2); font: inherit; font-weight: 600; cursor: pointer; }
.wahl-knopf:hover { border-color: var(--accent); }
.wahl-knopf[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
/* «So sieht es aus» (16.10.2026): eigene Nachzeichnungen der Chat-Oberflaechen, Farben nur aus design/tokens.css (--nb-<dienst>-*).
   Ohne Bewegung steht der Moment vor dem Klick still (Werte markiert, Leiste mit «Schwaerzen»); Ablauf nur bei no-preference. */
.nb-buehne { display: grid; gap: var(--s6); max-width: 980px; margin: var(--s6) auto 0; }
.js .nb-figur[data-nicht-aktiv] { display: none; }
.nb-figur { margin: 0; }
.nb-figur figcaption { margin-top: var(--s4); text-align: center; font-size: var(--fs-small); color: var(--muted); }
.nb-chatgpt { --nb-bg: var(--nb-chatgpt-bg); --nb-seite: var(--nb-chatgpt-seite); --nb-feld: var(--nb-chatgpt-feld); --nb-rand: var(--nb-chatgpt-rand); --nb-ink: var(--nb-chatgpt-ink); --nb-muted: var(--nb-chatgpt-muted); --nb-senden: var(--nb-chatgpt-senden); --nb-senden-ink: var(--nb-chatgpt-senden-ink); --nb-blase: var(--nb-chatgpt-blase); }
.nb-claude { --nb-bg: var(--nb-claude-bg); --nb-seite: var(--nb-claude-seite); --nb-feld: var(--nb-claude-feld); --nb-rand: var(--nb-claude-rand); --nb-ink: var(--nb-claude-ink); --nb-muted: var(--nb-claude-muted); --nb-senden: var(--nb-claude-senden); --nb-senden-ink: var(--nb-claude-senden-ink); --nb-blase: var(--nb-claude-blase); }
.nb-gemini { --nb-bg: var(--nb-gemini-bg); --nb-seite: var(--nb-gemini-seite); --nb-feld: var(--nb-gemini-feld); --nb-rand: var(--nb-gemini-rand); --nb-ink: var(--nb-gemini-ink); --nb-muted: var(--nb-gemini-muted); --nb-senden: var(--nb-gemini-senden); --nb-senden-ink: var(--nb-gemini-senden-ink); --nb-blase: var(--nb-gemini-blase); }
.nb-copilot { --nb-bg: var(--nb-copilot-bg); --nb-seite: var(--nb-copilot-seite); --nb-feld: var(--nb-copilot-feld); --nb-rand: var(--nb-copilot-rand); --nb-ink: var(--nb-copilot-ink); --nb-muted: var(--nb-copilot-muted); --nb-senden: var(--nb-copilot-senden); --nb-senden-ink: var(--nb-copilot-senden-ink); --nb-blase: var(--nb-copilot-blase); }
.nb { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: 480px; background: var(--nb-bg); color: var(--nb-ink); font: 400 15px/1.5 var(--font); text-align: left; overflow: hidden; }
.nb-claude { grid-template-columns: 56px minmax(0, 1fr); }
.nb-gemini { grid-template-columns: 64px minmax(0, 1fr); }
.nb-copilot { grid-template-columns: minmax(0, 1fr); }
.nb-seite { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px 0; background: var(--nb-seite); color: var(--nb-muted); }
.nb-seite-text { align-items: stretch; gap: 2px; padding: 14px 10px; font-size: 13.5px; color: var(--nb-ink); }
.nb-seite-text p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 10px; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-seite-text .nb-icon { width: 16px; height: 16px; }
.nb-seite-text .nb-seite-titel { margin-top: 18px; padding-block: 4px; font-size: 12px; color: var(--nb-muted); }
.nb-seite-knopf { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--nb-senden); color: var(--nb-senden-ink); }
.nb-seite-knopf .nb-icon { width: 16px; height: 16px; }
.nb-claude .nb-seite { border-right: 1px solid var(--nb-rand); }
.nb-haupt { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; padding-bottom: 18px; }
.nb-kopf { margin: 0; padding: 14px 22px; font-size: 15px; }
.nb-kopf { display: flex; align-items: center; gap: 4px; }
.nb-kopf b { font-weight: 600; }
.nb-kopf .nb-icon { width: 16px; height: 16px; color: var(--nb-muted); }
.nb-claude .nb-kopf b { font-weight: 500; }
.nb-copilot .nb-kopf { justify-content: center; }
.nb-flaeche { display: grid; min-height: 0; padding: 0 22px; }
.nb-leer, .nb-verlauf { grid-area: 1 / 1; }
.nb-leer { display: grid; place-items: center; padding-bottom: 72px; }
.nb-gruss { margin: 0; font-size: 27px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; text-align: center; }
.nb-claude .nb-gruss { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 31px; }
.nb-gemini .nb-gruss { background: var(--nb-gemini-gruss); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 36px; }
.nb-verlauf { align-self: start; justify-self: center; display: grid; gap: 14px; width: min(100%, 620px); padding-top: 6px; opacity: 0; }
.nb-blase { justify-self: end; max-width: 88%; margin: 0; padding: 10px 16px; border-radius: 20px; background: var(--nb-blase); font-size: 14px; line-height: 1.55; }
.nb-claude .nb-blase { border-radius: 12px; }
.nb-ersatz { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--marke-2) 14%, transparent); color: var(--nb-ink); font-weight: 600; }
.nb-antwort { display: grid; gap: 9px; }
.nb-antwort { gap: 6px; }
.nb-antwort p { margin: 0; font-size: 14px; line-height: 1.6; }
.nb-antwort p + p { color: var(--nb-ink); opacity: 0.86; }
.nb-claude .nb-antwort p { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; }
.nb-unten { position: relative; padding: 0 22px; }
.nb-feld { display: grid; grid-template-areas: "text" "werkzeuge"; width: min(100%, 680px); margin-inline: auto; padding: 14px 12px 10px 18px; border: 1px solid var(--nb-rand); border-radius: 26px; background: var(--nb-feld);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--nb-ink) 6%, transparent), 0 10px 26px -14px color-mix(in srgb, var(--nb-ink) 22%, transparent); }
.nb-claude .nb-feld { border-radius: 18px; }
.nb-gemini .nb-feld { border-radius: 28px; box-shadow: none; }
.nb-copilot .nb-feld { border-radius: 22px; }
.nb-platzhalter, .nb-text { grid-area: text; margin: 0; }
.nb-platzhalter { color: var(--nb-muted); opacity: 0; }
.nb-text { display: grid; align-content: start; justify-items: start; min-height: 6em; }
.nb-zeile { position: relative; max-width: 100%; overflow: hidden; white-space: nowrap; padding-right: 3px; }
.nb-zeile::after { content: ""; position: absolute; inset: 0; border-left: 2px solid var(--nb-ink); background: var(--nb-feld); transform: translateX(101%); }
.nb-tausch { display: inline-grid; }
/* Tippen per app.js (17.10.2026): Zeichen-Spans halten ihren Platz, nur visibility wechselt; Schreibmarke statisch. */
.nb-tippt .nb-z { visibility: hidden; }
.nb-tippt .nb-z.an { visibility: visible; }
.nb-tippt .nb-z.nb-cursor { box-shadow: 2px 0 0 var(--nb-ink); }
.nb-tausch > * { grid-area: 1 / 1; justify-self: start; }
.nb-roh, .nb-tausch .nb-ersatz { opacity: 0; }
.nb-werkzeuge { grid-area: werkzeuge; display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--nb-muted); }
.nb-luft { flex: 1; }
.nb-rund, .nb-senden { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; }
.nb-rund { border: 1px solid var(--nb-rand); }
.nb-senden { background: var(--nb-senden); color: var(--nb-senden-ink); opacity: 0.35; }
.nb-claude .nb-rund, .nb-claude .nb-senden { border-radius: 10px; }
.nb-gemini .nb-rund { border: 0; }
.nb-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nb-leiste { position: absolute; left: 22px; right: 22px; bottom: calc(100% + 10px); display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto; padding: 7px 7px 7px 12px;
  border: 1px solid var(--line-stark); border-radius: 16px; background: var(--menue); color: var(--ink); box-shadow: var(--toast-glow); font: 500 13.5px/1.3 var(--font); }
.nb-signet { flex: none; width: 22px; height: 22px; }
.nb-meldung { flex: 1; display: grid; min-width: 0; }
.nb-meldung > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.nb-meldung > span + span { justify-content: flex-start; gap: 6px; opacity: 0; color: var(--ok); font-weight: 600; }
.nb-meldung .icon { width: 16px; height: 16px; stroke-width: 2.25; }
.nb-meldung-text { flex: 1; min-width: 0; }
.nb-zu { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-left: -4px; color: var(--muted); }
.nb-zu .nb-icon { width: 15px; height: 15px; }
.nb-mehr { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--nb-rand, var(--line)); border-radius: 50%; color: var(--nb-muted, var(--muted)); }
.nb-mehr .nb-icon { width: 15px; height: 15px; stroke-width: 3.4; }
.nb-knopf { flex: none; padding: 7px 14px; border-radius: var(--pill); background: var(--knopf-grund); color: var(--knopf-ink); box-shadow: var(--knopf-kante); font-weight: 650; font-size: 12.5px; }
@media (max-width: 640px) {
  .nb, .nb-claude, .nb-gemini { grid-template-columns: minmax(0, 1fr); height: 440px; font-size: 13.5px; }
  .nb-seite { display: none; }
  .nb-kopf { padding: 11px 14px; }
  .nb-flaeche, .nb-unten { padding-inline: 12px; }
  .nb-gruss, .nb-claude .nb-gruss { font-size: 22px; }
  .nb-gemini .nb-gruss { font-size: 28px; }
  .nb-feld { padding: 12px 10px 8px 14px; }
  .nb-leiste { left: 10px; right: 10px; gap: 8px; font-size: 12px; }
  .nb-knopf { padding: 5px 9px; font-size: 12px; }
  .nb-blase { font-size: 13px; }
  .nb-zeile { white-space: normal; overflow: visible; }
  .nb-zeile::after { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .nb-leer { animation: nb-takt 14s linear infinite; }
  .nb-verlauf { animation: nb-verlauf 14s var(--ease-out) infinite; }
  .nb-antwort { animation: nb-antwort 14s var(--ease-out) infinite; }
  .nb-platzhalter { animation: nb-platzhalter 14s linear infinite; }
  .nb-text { animation: nb-text 14s linear infinite; }
  .nb-zeile:nth-child(1) { animation: nb-s1 14s linear infinite; }
  .nb-zeile:nth-child(2) { animation: nb-s2 14s linear infinite; }
  .nb-zeile:nth-child(3) { animation: nb-s3 14s linear infinite; }
  .nb-zeile:nth-child(4) { animation: nb-s4 14s linear infinite; }
  .nb-zeile:nth-child(1)::after { animation: nb-t1 14s linear infinite; }
  .nb-zeile:nth-child(2)::after { animation: nb-t2 14s linear infinite; }
  .nb-zeile:nth-child(3)::after { animation: nb-t3 14s linear infinite; }
  .nb-zeile:nth-child(4)::after { animation: nb-t4 14s linear infinite; }
  .nb-tippt .nb-zeile { animation: none; }
  .nb-tippt .nb-zeile::after { display: none; }
  .nb-roh { animation: nb-roh 14s linear infinite; }
  .nb-tausch mark { animation: nb-mark 14s var(--ease-out) infinite; }
  .nb-tausch .nb-ersatz { animation: nb-ersatz 14s var(--ease-out) infinite; }
  .nb-leiste { animation: nb-leiste 14s var(--ease-out) infinite; }
  .nb-meldung > span:first-child { animation: nb-meldung 14s var(--ease-out) infinite; }
  .nb-meldung > span + span { animation: nb-fertig 14s var(--ease-out) infinite; }
  .nb-knopf { animation: nb-knopf 14s var(--ease-out) infinite; }
  .nb-senden { animation: nb-senden 14s var(--ease-out) infinite; }
  .js .nb-buehne:not([data-laeuft]) .nb *, .js .nb-buehne:not([data-laeuft]) .nb-zeile::after { animation-play-state: paused; }
}
@keyframes nb-takt { 0%, 64% { opacity: 1; } 68%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes nb-verlauf { 0%, 66% { opacity: 0; transform: translateY(14px); } 70%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes nb-antwort { 0%, 73% { opacity: 0; transform: translateY(6px); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes nb-platzhalter { 0%, 2% { opacity: 1; } 3%, 67% { opacity: 0; } 69%, 100% { opacity: 1; } }
@keyframes nb-text { 0%, 65% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes nb-s1 { 0%, 2.9% { opacity: 0; } 3%, 100% { opacity: 1; } }
@keyframes nb-t1 { 0% { transform: translateX(0); } 3% { transform: translateX(0); animation-timing-function: steps(22, end); } 11%, 100% { transform: translateX(101%); } }
@keyframes nb-s2 { 0%, 11.9% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes nb-t2 { 0% { transform: translateX(0); } 12% { transform: translateX(0); animation-timing-function: steps(22, end); } 19%, 100% { transform: translateX(101%); } }
@keyframes nb-s3 { 0%, 19.9% { opacity: 0; } 20%, 100% { opacity: 1; } }
@keyframes nb-t3 { 0% { transform: translateX(0); } 20% { transform: translateX(0); animation-timing-function: steps(22, end); } 26%, 100% { transform: translateX(101%); } }
@keyframes nb-s4 { 0%, 26.9% { opacity: 0; } 27%, 100% { opacity: 1; } }
@keyframes nb-t4 { 0% { transform: translateX(0); } 27% { transform: translateX(0); animation-timing-function: steps(22, end); } 33%, 100% { transform: translateX(101%); } }
@keyframes nb-roh { 0%, 34% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes nb-mark { 0%, 34% { opacity: 0; } 37%, 50% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes nb-ersatz { 0%, 50% { opacity: 0; } 53%, 100% { opacity: 1; } }
@keyframes nb-leiste { 0%, 36% { opacity: 0; transform: translateY(10px); } 40%, 62% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes nb-meldung { 0%, 50% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes nb-fertig { 0%, 50% { opacity: 0; } 53%, 100% { opacity: 1; } }
@keyframes nb-knopf { 0%, 46% { transform: none; } 48% { transform: scale(0.88); } 50%, 100% { transform: none; } }
@keyframes nb-senden { 0%, 53% { opacity: 0.35; transform: none; } 56% { opacity: 1; } 61% { opacity: 1; transform: scale(0.88); } 63%, 66% { opacity: 1; transform: none; } 70%, 100% { opacity: 0.35; transform: none; } }
.medien-hinweis { margin: var(--s4) auto 0; max-width: 46em; text-align: center; font-size: var(--fs-tiny); color: var(--muted); }
.zeigen .zwischen-cta { justify-content: center; }

.demo-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s8); align-items: center; }
.demo-vorlagen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s5); font-size: var(--fs-small); color: var(--muted); }
.vorlage { min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line-stark); border-radius: 999px; background: var(--knopf-zweit-grund); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.vorlage:hover { border-color: var(--accent); color: var(--accent); }
.demo-schutz { display: flex; gap: var(--s2); max-width: 34em; margin-top: var(--s5); font-size: var(--fs-small); color: var(--muted); }
.demo-schutz .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--ok); }
.chat-demo { display: flex; flex-direction: column; min-height: 400px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r4); background: var(--raised); box-shadow: var(--shadow); }
.chat-kopf { display: flex; align-items: center; gap: var(--s2); padding: 12px var(--s5); border-bottom: 1px solid var(--line); font-size: var(--fs-small); font-weight: 600; }
.chat-kopf .icon { color: var(--accent); }
.demo-beispiel { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: var(--fs-tiny); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.chat-verlauf { display: flex; flex: 1; flex-direction: column; gap: var(--s3); padding: var(--s5); }
.chat-blase { align-self: flex-start; max-width: 85%; padding: 10px 14px; border-radius: var(--r3); background: var(--surface); }
.chat-eigen { align-self: flex-end; background: var(--accent-soft); overflow-wrap: anywhere; }
.demo-leiste { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 48px; margin: 0 var(--s4); padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r2) var(--r2) 0 0; background: var(--surface); font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.demo-leiste[data-zustand="leer"] { visibility: hidden; }
.demo-leiste[data-zustand="fund"] { border-color: var(--warn); background: var(--warn-soft); color: var(--ink); }
.demo-leiste[data-zustand="geschwaerzt"], .demo-leiste[data-zustand="gesendet"] { color: var(--ok); }
.demo-leiste-text { display: inline-flex; align-items: center; gap: var(--s2); }
.demo-signet { flex: none; width: 18px; height: 18px; }
.demo-schwaerzen { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r1); background: var(--knopf-grund); color: var(--knopf-ink); box-shadow: var(--knopf-kante); font: inherit; font-weight: 650; cursor: pointer; }
.demo-schwaerzen:hover { background: var(--knopf-grund-hover); box-shadow: var(--knopf-schatten-hover); }
.demo-schwaerzen .icon { width: 16px; height: 16px; }
.chat-eingabe { position: relative; margin: 0 var(--s4) var(--s4); }
.chat-eingabe textarea { display: block; width: 100%; min-height: 96px; padding: 12px 60px 12px 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5; resize: vertical; }
.chat-eingabe textarea::placeholder { color: var(--muted); }
.chat-eingabe textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Pruefseite «Ist dieser Text sicher fuer ChatGPT?» (14.10.2026): Werkzeug ohne Formular, Ergebnis per pruefen.js. */
.text .pruefer { margin: var(--s5) 0 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r3); background: var(--raised); box-shadow: var(--shadow); }
.pruefer p { margin: 0; }
.text .pruefer-zusage { display: flex; gap: var(--s2); margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--accent-soft); color: var(--ink-2); font-size: var(--fs-small); }
.pruefer-zusage .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ok); }
.pruefer-label { display: block; margin-bottom: var(--s2); font-weight: 600; }
.pruefer-feld { display: block; width: 100%; min-height: 180px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5; resize: vertical; }
.pruefer-feld::placeholder { color: var(--muted); }
.pruefer-feld:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pruefer-leiste { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); }
.pruefer-beispiele { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.pruefer-beispiele > .klein { width: 100%; color: var(--muted); }
.pruefer-aktionen { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.pruefer-zaehler { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pruefer:not(.bereit) .pruefer-leiste { display: none; }
.text .pruefer-noscript { margin-top: var(--s3); color: var(--warn); }
.pruefer-ergebnis { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.text .pruefer-fazit { padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--surface); font-weight: 600; }
[data-stufe="funde"] .pruefer-fazit { background: var(--warn-soft); color: var(--warn); }
[data-stufe="keine"] .pruefer-fazit { color: var(--ok); }
.pruefer-weiter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-top: var(--s3); color: var(--ink-2); font-size: var(--fs-small); }
[data-stufe="fehler"] .pruefer-weiter { display: none; }
[data-stufe="keine"] .nur-funde, [data-stufe="fehler"] .nur-funde { display: none; }
.text .pruefer-zwischentitel { margin: var(--s4) 0 var(--s2); color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.pruefer-markiert { max-height: 320px; overflow: auto; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg); font-size: 0.9375rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.pruefer-markiert .fund { padding: 1px 2px; border-radius: 4px; background: var(--warn-soft); color: var(--ink); box-shadow: inset 0 -2px 0 var(--warn); }
.pruefer-markiert .fund-unsicher { background: transparent; box-shadow: none; border-bottom: 2px dashed var(--warn); border-radius: 0; }
.text .pruefer-typen { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.text .pruefer-typen .typ { margin: 0; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r2); }
.typ-kopf { display: flex; justify-content: space-between; gap: var(--s3); font-weight: 600; }
.typ-zahl { color: var(--warn); font-variant-numeric: tabular-nums; white-space: nowrap; }
.text .typ-werte { margin-top: 2px; color: var(--muted); font-family: var(--mono); font-size: var(--fs-small); overflow-wrap: anywhere; }
.text .typ-text { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-small); }
.text .pruefer-hinweis { margin-top: var(--s4); color: var(--muted); font-size: var(--fs-small); }
.text .pruefer-engine { margin-top: var(--s4); color: var(--muted); }
@media (max-width: 640px) { .text .pruefer { padding: var(--s4); } .pruefer-aktionen { width: 100%; justify-content: space-between; } }
/* Ab 1200 px: Werkzeug breiter als die Textspalte, Ergebnis zweispaltig (Text links, Datentypen rechts). */
@media (min-width: 1200px) {
  /* Doku-FAQ: rechts steht «Auf dieser Seite» mit denselben Themen */
  .doku .faq-themen { display: none; }
  .text .pruefer { width: 1040px; }
  .pruefer-ergebnis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "fazit fazit" "weiter weiter" "t1 t2" "mark typen" "hinweis hinweis"; column-gap: var(--s5); }
  .pruefer-fazit { grid-area: fazit; }
  .pruefer-weiter { grid-area: weiter; margin-bottom: var(--s2); }
  .pruefer-ergebnis > .pruefer-zwischentitel:nth-of-type(2) { grid-area: t1; }
  .pruefer-ergebnis > .pruefer-zwischentitel:nth-of-type(3) { grid-area: t2; }
  .pruefer-markiert { grid-area: mark; align-self: start; position: sticky; top: calc(var(--kopf-hoehe) + var(--s4)); max-height: 70vh; }
  .pruefer-typen { grid-area: typen; }
  .pruefer-hinweis { grid-area: hinweis; }
  [data-stufe="keine"].pruefer-ergebnis, [data-stufe="fehler"].pruefer-ergebnis { display: block; }
}
.chat-senden { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ink); color: var(--bg); cursor: pointer; }

.detail-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s7); margin: var(--s7) 0 0; padding: 0; list-style: none; }
.detail-raster figure { margin: 0; }
.detail-raster figcaption { margin-top: var(--s5); }
.detail-raster figcaption p { margin-top: 6px; color: var(--muted); }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); margin: var(--s7) 0 0; padding: 0; list-style: none; }
.galerie li { display: grid; align-content: start; gap: var(--s2); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r3); background: var(--raised); }
.galerie-kopf { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.galerie-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r2); background: var(--accent-soft); color: var(--accent); }
.vn { display: grid; gap: 2px; }
.vn-label { font-size: var(--fs-tiny); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.vn code { font-size: 0.875rem; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.vn mark { white-space: nowrap; }
.platzhalter { padding: 0 4px; border-radius: 4px; background: var(--redact); color: var(--bg); white-space: nowrap; }
.galerie-mehr { border-style: dashed; background: transparent; }
.galerie-mehr p:not(.galerie-kopf) { color: var(--muted); font-size: 0.9375rem; }
.galerie-quelle { margin-top: var(--s2); font-size: var(--fs-tiny); color: var(--muted); }
.pakete-liste li { display: inline-flex; align-items: center; gap: 6px; }
.pakete-liste .icon { width: 14px; height: 14px; }

.ihr-browser { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s4); padding: 6px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-small); }
.ihr-browser[hidden] { display: none; }
.install-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); margin: var(--s7) 0 0; padding: 0; list-style: none; }
.install-bild { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; aspect-ratio: 16 / 10; margin-bottom: var(--s5); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r3); background: var(--raised); box-shadow: var(--shadow); }
.install-bild img { width: 100%; height: 100%; min-height: 0; padding: var(--s3); object-fit: contain; }
/* Schematische Abbildungen des ZIP-Wegs (14.10.2026) kompakt in der Bildkarte, Hinweis «Darstellung vereinfacht» bleibt. */
.install-bild .abb { display: flex; flex-direction: column; width: 100%; height: 100%; max-width: none; margin: 0; }
.install-bild .abb-fenster { flex: 1; border: 0; border-radius: 0; font-size: 0.75rem; }
.install-bild .abb-flaeche { min-height: 0; padding: var(--s3) var(--s4); }
.install-bild .abb-edge { grid-template-columns: 116px minmax(0, 1fr); gap: var(--s3); min-height: 120px; }
.install-bild .abb-seitenleiste { padding-right: var(--s3); }
.install-bild .abb-knopf { min-height: 26px; padding: 0 8px; font-size: 0.75rem; }
.install-bild .abb-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.install-bild .abb figcaption { margin: 0; padding: 0 var(--s3) var(--s2); text-align: right; }
.browser .bild-popup { width: auto; max-width: 100%; max-height: 400px; margin-inline: auto; }
.install-schritte h3 { display: flex; align-items: center; gap: var(--s3); }
.install-schritte p { margin-top: 6px; color: var(--muted); }
.schritt-nr { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--bg); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.store-karte { display: grid; justify-items: center; gap: var(--s3); padding: var(--s5); text-align: center; }
.store-signet { width: 48px; height: 48px; }
.store-karte p { display: grid; gap: 2px; }
.store-karte p span { font-size: var(--fs-small); color: var(--muted); }
.store-knopf { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--knopf-grund); color: var(--knopf-ink); box-shadow: var(--knopf-kante); font-size: var(--fs-small); font-weight: 650; }
.store-knopf .icon { width: 16px; height: 16px; }
.install-cta { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin-top: var(--s7); }
.store-bald li .icon { width: 16px; height: 16px; color: var(--muted); }
.store-bald li.aktiv { border-color: var(--accent); color: var(--accent); }
.installieren .schritte-hinweis { text-align: center; }
/* Download der ZIP (14.10.2026): Untertitel, Kasten «Gratis fuer alle», Datei mit SHA-256, ehrliche Hinweise. */
.dl-unter { margin-top: var(--s2); font-size: var(--fs-small); color: var(--muted); }
.gratis-kasten { display: flex; gap: var(--s3); align-items: flex-start; max-width: 40rem; margin: var(--s6) auto 0; padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r3); background: var(--accent-soft); color: var(--ink); }
.gratis-kasten .icon { flex: none; margin-top: 3px; color: var(--accent); }
.gratis-kasten p { margin: 0; }
.dl-datei { max-width: 40rem; margin: var(--s6) auto 0; font-size: var(--fs-small); color: var(--muted); }
.dl-datei > p:first-child { text-align: center; }
.dl-datei details { margin-top: var(--s3); }
.dl-datei summary { cursor: pointer; font-weight: 550; color: var(--ink); min-height: 44px; display: flex; align-items: center; }
.dl-hash code { display: block; overflow-wrap: anywhere; padding: var(--s2) var(--s3); border-radius: var(--r1); background: var(--surface); font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.dl-datei .ehrlich { margin-top: var(--s4); }

@media (max-width: 900px) {
  .demo-raster, .detail-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .install-schritte { grid-template-columns: minmax(0, 1fr); }
  .nutzen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .held-buehne { max-width: 440px; }
}
@media (max-width: 640px) {
  .nutzen li:last-child { grid-column: 1 / -1; }
  .chat-demo { min-height: 360px; }
  .galerie { grid-template-columns: minmax(0, 1fr); }
  .held-buehne { max-width: 420px; }
  .held-szene { aspect-ratio: 5 / 3.4; }
  .held-raster { gap: var(--s4); }
  .held-produkt { margin-top: var(--s4); }
  .held .held-aktionen .knopf-zweit { height: 52px; min-height: 52px; font-size: 1rem; }
  .install-cta .knopf { width: 100%; }
}

/* Marke (16.10.2026): Wortmarke, Hero-Buehne mit grossem Signet und Lichtfleck, Pills (design-system.md) */
.wortmarke { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.045em; }
.wortmarke-ai { background: var(--wortmarke-ai); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Serifen-I (Markenvorgabe 17.10.2026, wie .dlx-ai-i der Erweiterung): Querstriche oben und unten am echten I aus
   Space Grotesk 700 (Versalhoehe 0,703 em, Stamm 0,132 em), Breite 0,387 em, Dicke = Stamm, mittig. text-box schneidet
   die Box auf Versalhoehe bis Grundlinie zu; der Innenabstand haelt die Striche frei von A und m. Ohne text-box bleibt
   ein normales I ohne Striche und ohne Abstand. Kontrastmodus: Striche in CanvasText (nur Farbverlauf, kein Bild). */
@supports (text-box: trim-both cap alphabetic) {
  .wortmarke-ai-i {
    padding: 0 0.09em 0 0.145em; text-box: trim-both cap alphabetic;
    background: var(--wortmarke-ai-i) 0.0835em 0 / 0.387em 0.132em no-repeat, var(--wortmarke-ai-i) 0.0835em 100% / 0.387em 0.132em no-repeat;
  }
  @media (forced-colors: active) {
    .wortmarke-ai-i { forced-color-adjust: none; color: CanvasText; background: linear-gradient(CanvasText, CanvasText) 0.0835em 0 / 0.387em 0.132em no-repeat, linear-gradient(CanvasText, CanvasText) 0.0835em 100% / 0.387em 0.132em no-repeat; }
  }
}
/* Hero kompakt (17.10.2026): Pill und Claim direkt ueber der Ueberschrift, Botschaft und Download auf den ersten Blick. */
.held-claim { margin: var(--s4) 0 var(--s3); font-family: var(--font-display); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 500; color: var(--accent); }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid var(--line-stark); border-radius: var(--pill); background: var(--knopf-zweit-grund); color: var(--ink-2); font-size: var(--fs-tiny); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.pill-punkt { width: 8px; height: 8px; flex: none; border-radius: var(--pill); background: var(--marke-1); box-shadow: 0 0 12px var(--marke-1); }
@media (max-width: 640px) {
  .pill { letter-spacing: 0.14em; }
}

/* Alltag (14.10.2026): vier Beispiele, Ablauf nur per CSS. Ohne Bewegung: markierter Zustand mit Leiste, kein Tausch. */
.faelle { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--s5); margin: var(--s7) 0 0; padding: 0; list-style: none; }
.fall { display: grid; align-content: start; gap: var(--s4); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r4); background: var(--raised); box-shadow: var(--shadow); }
.fall-kopf { display: flex; align-items: center; gap: var(--s3); }
.fall-kopf b { display: block; font-size: var(--fs-h3); }
.fall-kopf b + span { display: block; font-size: var(--fs-small); color: var(--muted); }
.fall-chat { display: grid; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); }
.fall-text { min-height: 3.2em; font-size: 0.9375rem; line-height: 1.6; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tausch { display: inline-grid; justify-items: start; vertical-align: bottom; }
.tausch > * { grid-area: 1 / 1; }
.tausch mark { white-space: nowrap; }
.tausch .platzhalter, .tausch .roh { opacity: 0; }
.tausch .roh { padding: 0 2px; }
.fall-leiste { display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 6px 6px 6px var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--raised); font-size: var(--fs-small); color: var(--ink-2); }
.fall-leiste > span:first-of-type { flex: 1; }
.fall-signet { flex: none; width: 18px; height: 18px; }
.fall-mehr { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
.fall-icon { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.fall-knopf { flex: none; padding: 4px 10px; border-radius: var(--r1); background: var(--redact); color: var(--bg); font-weight: 600; font-size: var(--fs-tiny); }
@media (min-width: 901px) {
  .faelle { perspective: 1600px; }
  .fall { transform: rotateX(3deg) rotateY(-3deg); }
  .fall:nth-child(even) { transform: rotateX(3deg) rotateY(3deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .fall { transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
  .fall:hover, .fall:nth-child(even):hover { transform: translateY(-4px); }
  /* 17.10.2026: Start erst im Sichtbereich (app.js setzt data-laeuft), alle Faelle beginnen beim Rohtext, leicht versetzt. */
  .fall:nth-child(2) { --verzug: 0.6s; }
  .fall:nth-child(3) { --verzug: 1.2s; }
  .fall:nth-child(4) { --verzug: 1.8s; }
  .tausch .roh { animation: fall-roh 10s var(--ease-out) var(--verzug, 0s) infinite backwards; }
  .tausch mark { animation: fall-mark 10s var(--ease-out) var(--verzug, 0s) infinite backwards; }
  .tausch .platzhalter { animation: fall-ersatz 10s var(--ease-out) var(--verzug, 0s) infinite backwards; }
  .fall-leiste { animation: fall-leiste 10s var(--ease-out) var(--verzug, 0s) infinite backwards; }
  .fall-knopf { animation: fall-knopf 10s var(--ease-out) var(--verzug, 0s) infinite backwards; }
  .js .faelle:not([data-laeuft]) .fall-chat * { animation-play-state: paused; }
}
/* Nur Deckkraft (vom Compositor animiert): Rohtext -> markiert -> Platzhalter. */
@keyframes fall-roh { 0%, 18% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes fall-mark { 0%, 18% { opacity: 0; } 26%, 56% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes fall-ersatz { 0%, 58% { opacity: 0; } 64%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fall-leiste { 0%, 22% { opacity: 0; transform: translateY(6px); } 30%, 60% { opacity: 1; transform: none; } 68%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes fall-knopf { 0%, 50% { transform: none; } 54% { transform: scale(0.92); } 58%, 100% { transform: none; } }


/* Funktionen «Im Detail» (18.10.2026): vier kurze Listen statt langer Karten oben */
.fx-detail-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s5); }
.text .fx-detail h3 { margin: 0; font-size: 1.0625rem; }
.text .fx-detail ul { display: grid; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; list-style: none; }
.text .fx-detail li { position: relative; margin: 0; padding-left: 28px; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.text .fx-detail li .icon { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); stroke-width: 2.5; }
@media (max-width: 1100px) { .fx-detail-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fx-detail-raster { grid-template-columns: minmax(0, 1fr); } }

/* Doku-Uebersicht (18.10.2026): erste Zwischenueberschrift naeher am Einstieg, damit beide Kartenreihen auf den ersten Bildschirm passen */
.doku .text .doku-start + .doku-zwischentitel { margin-top: var(--s5); }