/* =============================================================================
   Enbound Website · Designsystem „Ziegel & Kalk“ (Richtung B, abgenommen vom CEO 07.10.2026)
   Ersetzt assets/styles.css + assets/decor.css auf allen Seiten (Makeover Phase 4, 07.10.2026).
   Quelle der Werte: Agents - ZaC/knowledge/enbound/TOKENS -- ziegel-kalk -- 2026-10-07.css
   Regeln (nicht verhandelbar, Blaupause §2):
   - Jede Fläche deckend. Kein backdrop-filter, kein filter, kein will-change, keine Dauer-Animation,
     keine Deko-Ebene über oder unter Text. Sticky-Kopfzeile nur mit deckendem Grund.
   - Nur ganze Pixel, nur Tokens. Serife (Source Serif 4, 600) nur ab 20 px. Text Source Sans 3 400/600.
   - Radien nur 2 und 4. Kein Verlauf außer im Logo. Ein Primärknopf je Ansicht.
   - Links in Tinte-Blau, immer unterstrichen. Logo-Blau nur im Logo.
   - Schriften: unveränderte Originaldateien (OFL 1.1, Reserved Font Name „Source“), kein Subsetting,
     kein Umwandeln, kein fremder Schriftserver. Lizenztexte liegen daneben (assets/schrift/).
   ============================================================================= */

@font-face {
  font-family: "Source Serif 4";
  src: url("schrift/SourceSerif4-Semibold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("schrift/SourceSans3-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("schrift/SourceSans3-Semibold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* Flächen */
  --kalk: #F5F2EC;
  --kalk-tief: #EDE8DF;
  --flaeche: #FFFFFF;
  --linie: #E0D9CE;
  --linie-feld: #857C70;
  /* Schrift */
  --text: #1C2230;
  --hilfstext: #6A6458;
  /* Marke */
  --ziegel: #B3382F;
  --ziegel-hover: #962C25;
  --ziegel-gedrueckt: #84271F;
  --auf-ziegel: #FFFFFF;
  --ziegel-schrift: #B3382F;
  --ziegel-hauch: #F3D9D5;
  /* Blau: Logo-Blau steht nur im Logo (fest im SVG), Tinte-Blau für Links, Fokus, Hinweis */
  --tinte-blau: #1E4785;
  --blau-hauch: #E6ECF6;
  /* Status (feste Werte) */
  --fehler: #9C0F3F;
  --fehler-flaeche: #FBEBEF;
  --warn: #7A5200;
  --warn-flaeche: #FAF0D6;
  --ok: #1E6B4F;
  --ok-flaeche: #E5F1EA;
  /* Fokus */
  --fokus-farbe: var(--tinte-blau);
  --fokus-breite: 2px;
  --fokus-abstand: 2px;
  /* Formen */
  --r-1: 2px;
  --r-2: 4px;
  --schatten-schwebend: 0 4px 12px rgba(28, 34, 48, .14);
  --w-raster: 28px;
  --heftrand-x: 31px;
  /* Schrift */
  --w-font-titel: "Source Serif 4", Georgia, "Times New Roman", serif;
  --w-font-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --w-font-marke: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* Wortmarke bleibt in ihrer Schrift (Blaupause §2.2) */
  --w-font-mono: Consolas, ui-monospace, monospace;
  --w-fs-cap: 12px;  --w-lh-cap: 16px;
  --w-fs-sm: 14px;   --w-lh-sm: 20px;
  --w-fs-md: 16px;   --w-lh-md: 24px;
  --w-fs-lg: 18px;   --w-lh-lg: 28px;
  --w-fs-h4: 20px;   --w-lh-h4: 28px;
  --w-fs-h3: 24px;   --w-lh-h3: 32px;
  --w-fs-h2: 32px;   --w-lh-h2: 40px;
  --w-fs-h1: 48px;   --w-lh-h1: 56px;
  --w-fs-nr: 32px;   --w-lh-nr: 32px;
  --w-fs-marke: 21px; --w-lh-marke: 28px;
  --w-ls-titel: -0.01em;
  --w-ls-versal: 0.06em;
  --w-knopf-hoehe: 44px;
  --fw-text: 400;
  --fw-titel: 600;
  /* Raster der Seite */
  --w-spalte: 1152px;
  --w-rand: 24px;
  --w-kopf-hoehe: 64px;
  --w-abstand: 96px;
  color-scheme: light;
}

/* Dunkelmodus „Nachttinte“ — gesetzt per html.dark (Schalter auf der Seite, wie bisher) */
html.dark {
  --kalk: #161A24;
  --kalk-tief: #1A1F2A;
  --flaeche: #1E2330;
  --linie: #333A48;
  --linie-feld: #808796;
  --text: #F0ECE4;
  --hilfstext: #B3AC9F;
  --ziegel: #C4453A;
  --ziegel-hover: #A9352C;
  --ziegel-gedrueckt: #8A2A22;
  --auf-ziegel: #FFFFFF;
  --ziegel-schrift: #E8806F;
  --ziegel-hauch: #45292B;
  --tinte-blau: #8FB1EA;
  --blau-hauch: #233250;
  --fehler: #F2879F;
  --fehler-flaeche: #3A1E29;
  --warn: #E0B060;
  --warn-flaeche: #33291A;
  --ok: #6DC29A;
  --ok-flaeche: #1B3229;
  --schatten-schwebend: 0 4px 12px rgba(0, 0, 0, .40);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- Grundlage */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--w-font-text); font-weight: var(--fw-text);
  font-size: var(--w-fs-md); line-height: var(--w-lh-md);
  background: var(--kalk); color: var(--text);
  counter-reset: abschnitt;
}
h1, h2, h3, h4 { font-family: var(--w-font-titel); font-weight: var(--fw-titel); letter-spacing: var(--w-ls-titel); color: var(--text); text-wrap: balance; }
h1 { font-size: var(--w-fs-h1); line-height: var(--w-lh-h1); }
h2 { font-size: var(--w-fs-h2); line-height: var(--w-lh-h2); }
h3 { font-size: var(--w-fs-h4); line-height: var(--w-lh-h4); }
strong, b { font-weight: 600; }
img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--tinte-blau); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: var(--fokus-abstand); }
::selection { background: var(--blau-hauch); color: var(--text); }
section[id], [id="kuendigung-form"], [id="widerruf-form"] { scroll-margin-top: calc(var(--w-kopf-hoehe) + 16px); }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: calc(var(--w-spalte) + 2 * var(--w-rand)); margin: 0 auto; padding: 0 var(--w-rand); }
.eyebrow {
  display: block; font-family: var(--w-font-text); font-weight: 600;
  font-size: var(--w-fs-cap); line-height: var(--w-lh-cap); letter-spacing: var(--w-ls-versal);
  text-transform: uppercase; color: var(--hilfstext);
}
.sec-p, .sec-head p { font-size: var(--w-fs-lg); line-height: var(--w-lh-lg); color: var(--hilfstext); margin-top: 16px; max-width: 40em; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.todo { display: inline-block; font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); font-weight: 600; color: var(--warn); background: var(--warn-flaeche); border: 1px solid var(--warn); border-radius: var(--r-1); padding: 0 8px; }

/* Ikonen: lucide-Strich, in Text- oder Statusfarbe */
.ic svg, .ic-24 { width: 24px; height: 24px; }

/* ------------------------------------------------------------ Beta-Hinweis */
/* Deckend, schließbar, an der Inhaltsspalte ausgerichtet (DIAGNOSE-WEBSITE §7). Wortlaut unverändert.
   14/20 mehrzeilig ist eine benannte Ausnahme: Pflichthinweis mit festem Wortlaut, mobil sonst zu hoch. */
.beta-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 8px max(var(--w-rand), calc((100% - var(--w-spalte)) / 2));
  background: var(--blau-hauch); color: var(--text);
  border-bottom: 1px solid var(--linie);
  font-size: var(--w-fs-sm); line-height: var(--w-lh-sm);
}
.beta-banner__text { flex: 1; min-width: 0; }
.beta-banner a { color: var(--tinte-blau); font-weight: 600; }
.beta-banner__close {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-1);
  color: var(--text); cursor: pointer; font-size: var(--w-fs-sm); line-height: var(--w-lh-sm);
}
.beta-banner__close:hover { border-color: var(--linie-feld); }

/* ---------------------------------------------------------------- Kopfzeile */
header#top {
  position: sticky; top: 0; z-index: 50;
  background: var(--kalk); border-bottom: 1px solid var(--linie);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: calc(var(--w-kopf-hoehe) - 1px); }
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font-family: var(--w-font-marke); font-weight: 600; font-size: var(--w-fs-marke); line-height: var(--w-lh-marke);
  letter-spacing: 0; color: var(--text); text-decoration: none;
}
.brand:hover { text-decoration: none; }
.logo { display: block; width: 28px; height: 28px; flex: none; }
.logo svg { width: 28px; height: 28px; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-links { display: flex; align-items: center; gap: 24px; margin-right: 16px; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--w-fs-md); line-height: var(--w-lh-md); font-weight: 600;
  color: var(--text); text-decoration: none;
}
.nav-links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.icon-btn {
  height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie-feld); border-radius: var(--r-1); cursor: pointer;
}
.icon-btn:hover { border-color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; flex: none; }
.lang-toggle { padding: 0 12px; font-weight: 600; font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); letter-spacing: 0.02em; }
.lang-toggle svg { width: 16px; height: 16px; color: var(--hilfstext); }
.theme-toggle .moon { display: none; }
html.dark .theme-toggle .sun { display: none; }
html.dark .theme-toggle .moon { display: block; }
.menu-toggle { display: none; }
.menu-toggle .zu { display: none; }
header.menu-offen .menu-toggle .auf { display: none; }
header.menu-offen .menu-toggle .zu { display: block; }

/* ------------------------------------------------------------------- Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--w-knopf-hoehe); padding: 0 20px;
  font-family: var(--w-font-text); font-weight: 600; font-size: var(--w-fs-md); line-height: var(--w-lh-md);
  border: 1px solid transparent; border-radius: var(--r-1);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--ziegel); border-color: var(--ziegel); color: var(--auf-ziegel); }
.btn-primary:hover { background: var(--ziegel-hover); border-color: var(--ziegel-hover); }
.btn-primary:active { background: var(--ziegel-gedrueckt); border-color: var(--ziegel-gedrueckt); }
.btn-primary:disabled { cursor: progress; background: var(--ziegel-gedrueckt); border-color: var(--ziegel-gedrueckt); }
.btn-ghost, .btn-zweit { background: transparent; border-color: var(--text); color: var(--text); }
.btn-ghost:hover, .btn-zweit:hover { background: var(--flaeche); }
.plat-chip {
  display: inline-block; font-size: var(--w-fs-sm); line-height: 20px; font-weight: 600;
  padding: 0 8px; border-radius: var(--r-1);
  background: var(--ziegel-gedrueckt); color: var(--auf-ziegel);
}
.wip-chip {
  display: inline-block; font-size: var(--w-fs-sm); line-height: 20px; font-weight: 600;
  padding: 0 8px; border-radius: var(--r-1);
  background: var(--kalk-tief); color: var(--hilfstext);
}
.mac-note {
  margin-top: 16px; max-width: 36em; padding-left: 12px; border-left: 2px solid var(--linie-feld);
  font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext);
}

/* ------------------------------------------------------------ Abschnitte */
section { padding: var(--w-abstand) 0; }
.abschnitt { counter-increment: abschnitt; border-top: 1px solid var(--linie); }
.band { background: var(--kalk-tief); }
/* Abschnittskopf mit Nummer in Ziegel (Tagesordnungspunkt). Die Nummer ist gestalterisch und für
   Screenreader stumm (content: … / ""). */
.kopf { display: grid; grid-template-columns: 64px minmax(0, 760px); column-gap: 24px; }
.kopf::before {
  content: counter(abschnitt, decimal-leading-zero) / "";
  grid-column: 1; grid-row: 1 / span 3;
  font-family: var(--w-font-titel); font-weight: 600;
  font-size: var(--w-fs-nr); line-height: var(--w-lh-nr); color: var(--ziegel-schrift);
}
.kopf > * { grid-column: 2; }
.kopf h2 { margin-top: 8px; }
.kopf .sec-p, .kopf > p { margin-top: 16px; }
/* Inhalt unter einem Abschnittskopf steht an der Textkante, die Nummer hängt im Rand (Heftrand-Prinzip) */
.abschnitt .wrap > .video-stage, .abschnitt .wrap > .video-note, .abschnitt .wrap > .profile-box,
.abschnitt .wrap > .karten, .abschnitt .wrap > .fakten, .abschnitt .wrap > .randnotiz, .abschnitt .wrap > .steps,
.abschnitt .wrap > .extras, .abschnitt .wrap > .price-tiers, .abschnitt .wrap > .price-shared,
.abschnitt .wrap > .price-action, .abschnitt .wrap > .contact-grid { margin-left: 88px; }

/* -------------------------------------------------------------------- Hero */
.hero { padding: 56px 0 var(--w-abstand); }
/* Überschrift über die volle Spalte, darunter Text links und Protokollblatt rechts */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
.hero-kopf { grid-column: 1 / -1; }
.hero-kopf h1 { max-width: 18em; }
.hero-text { padding-top: 8px; }
.hero-blatt { margin-top: 32px; }
.hero-trial-badge {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px;
  padding: 8px 12px; border: 1px solid var(--linie-feld); border-radius: var(--r-1);
  background: var(--flaeche); color: var(--text);
  font-size: var(--w-fs-md); line-height: var(--w-lh-md);
}
.hero-trial-badge strong { font-weight: 600; }
/* Folgekosten gleich groß und gleich dunkel wie das Angebot (§ 5 UWG, § 312j BGB) — nur das Gewicht unterscheidet */
.hero-trial-badge .danach { color: var(--text); padding-left: 12px; border-left: 1px solid var(--linie-feld); }
.hero .eyebrow { margin-top: 24px; }
.hero h1 { margin-top: 12px; }
.hero h1 .accent { color: var(--ziegel-schrift); }
.hero .lede { font-size: var(--w-fs-lg); line-height: var(--w-lh-lg); color: var(--hilfstext); margin-top: 32px; max-width: 32em; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.hero-trial {
  margin-top: 16px; max-width: 36em; padding: 12px 16px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-1);
  font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--text);
}
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; }
.hero-meta > span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); color: var(--hilfstext); }
.hero-meta svg { width: 16px; height: 16px; flex: none; color: var(--text); }

/* -------------------------------------------------- Protokollblatt (Linierung) */
/* Harte Linien in der background-Angabe des deckenden Blatts, Grundfarbe als letzte Schicht (Blaupause §2.1).
   Raster 28 px; alles im Blatt sitzt auf diesem Raster. Heftrand 1 px Ziegel, 31 px vom linken Rand. */
.blatt {
  position: relative;
  background:
    linear-gradient(to right, transparent var(--heftrand-x), var(--ziegel) var(--heftrand-x),
                    var(--ziegel) calc(var(--heftrand-x) + 1px), transparent calc(var(--heftrand-x) + 1px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--w-raster) - 1px),
                    var(--linie) calc(var(--w-raster) - 1px) var(--w-raster)),
    var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r-2);
  padding: 0 24px 28px 48px;
  font-size: var(--w-fs-md); line-height: var(--w-raster); color: var(--text);
}
.blatt-kopf {
  display: flex; align-items: center; gap: 12px; height: 56px;
  margin: 0 -24px 0 -48px; padding: 0 16px 0 48px;
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
  border-radius: var(--r-2) var(--r-2) 0 0;
}
.blatt-titel {
  display: block; font-size: var(--w-fs-cap); line-height: var(--w-raster); font-weight: 600;
  letter-spacing: var(--w-ls-versal); text-transform: uppercase; color: var(--hilfstext);
}
.blatt-titel + * { margin-top: 0; }
.blatt-titel--zwei { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.blatt-chip {
  font-size: var(--w-fs-sm); line-height: 20px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--text); background: var(--kalk-tief); border-radius: var(--r-1); padding: 0 6px;
}
.blatt-gruppe + .blatt-gruppe { margin-top: 28px; }
.blatt-zeile { display: block; }
.wer {
  font-size: var(--w-fs-cap); font-weight: 600; letter-spacing: var(--w-ls-versal); text-transform: uppercase;
  color: var(--hilfstext); margin-right: 8px;
}
.wer--ich { color: var(--text); }
.feld-l { font-weight: 600; margin-right: 8px; }
.marke { background: var(--ziegel-hauch); color: var(--text); font-weight: 600; padding: 2px 4px; border-radius: var(--r-1); margin-right: 8px; }
.blatt-meta { font-size: var(--w-fs-sm); color: var(--hilfstext); }
.beispiel { margin-top: 8px; font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); color: var(--hilfstext); }

/* Reiter im Blattkopf (Hero: Zweiergespräch / Meetingraum) — schalten nur per Klick, kein Selbstlauf */
.mock-tabs { display: flex; gap: 4px; }
.mock-tab {
  height: 40px; padding: 0 12px; background: transparent; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); font-weight: 600; color: var(--hilfstext);
}
.mock-tab:hover { color: var(--text); }
.mock-tab.on { color: var(--text); border-bottom-color: var(--ziegel); }
.rec { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); font-weight: 600; color: var(--text); white-space: nowrap; }
/* Aufnahme läuft: gefüllter Punkt 10 px in Ziegel, still (kein Puls), immer mit Wort */
.rec .dot, .aufnahme-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--ziegel); flex: none; display: inline-block; }
.mock-scene { min-height: 364px; }

/* Raum-Kopf, Teilnehmer, Abstimmung */
.room-head { display: flex; align-items: center; gap: 12px; font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); font-weight: 600; color: var(--hilfstext); }
.room-code { font-family: var(--w-font-mono); font-weight: 400; letter-spacing: 0.08em; color: var(--text); background: var(--kalk); border: 1px solid var(--linie); border-radius: var(--r-1); padding: 0 6px; }
.room-people { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
/* Teilnehmer als Ringe in Tinte (ein gefüllter Punkt ohne Zeichen bedeutet nur „Aufnahme“) */
.room-people i { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text); background: var(--flaeche); }
.room-people i.speaking { background: var(--text); }
.room-topic { display: block; font-size: var(--w-fs-cap); line-height: var(--w-raster); font-weight: 600; letter-spacing: var(--w-ls-versal); text-transform: uppercase; color: var(--hilfstext); }
.rs-line { display: block; }
.rs-tag { font-size: var(--w-fs-cap); font-weight: 600; letter-spacing: var(--w-ls-versal); text-transform: uppercase; color: var(--hilfstext); margin-right: 8px; }
.rs-tag--me { color: var(--text); }
.rs-vote { margin-top: 28px; }
.rs-vote-l { display: block; font-size: var(--w-fs-cap); line-height: var(--w-raster); font-weight: 600; letter-spacing: var(--w-ls-versal); text-transform: uppercase; color: var(--hilfstext); }
.rs-vote-q { display: block; font-weight: 600; }
.rs-vote-zeile { display: flex; align-items: center; gap: 12px; height: 28px; }
.rs-bar { flex: 1; height: 8px; background: var(--kalk-tief); border: 1px solid var(--linie); border-radius: var(--r-1); overflow: hidden; }
.rs-bar i { display: block; height: 100%; background: var(--text); }
.rs-bar-75 { width: 75%; }
.rs-vote-r { font-size: var(--w-fs-sm); color: var(--hilfstext); white-space: nowrap; }
.room-note-line { display: block; }
.rs-priv-title { display: flex; align-items: center; gap: 6px; }
.rs-priv-title svg { width: 14px; height: 14px; color: var(--hilfstext); }

/* --------------------------------------------------------------------- Video */
.video-stage { margin-top: 48px; max-width: 960px; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; background: var(--kalk-tief); border: 1px solid var(--linie); border-radius: var(--r-2); }
.video-note { margin-top: 12px; font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); color: var(--hilfstext); }

/* --------------------------------------------------------------- Meetingraum */
.room-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.room-flagrow { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.badge-new {
  display: inline-block; font-size: var(--w-fs-cap); line-height: 20px; font-weight: 600; letter-spacing: var(--w-ls-versal);
  text-transform: uppercase; padding: 0 8px; border-radius: var(--r-1); background: var(--ziegel); color: var(--auf-ziegel);
}
.room-vers { font-family: var(--w-font-mono); font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); color: var(--hilfstext); }
.haken-liste { display: grid; gap: 12px; margin-top: 32px; }
.haken-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--w-fs-md); line-height: var(--w-lh-md); }
.haken-liste svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--text); }
.hinweis-kasten {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 32px; max-width: 36em; padding: 12px 16px;
  background: var(--blau-hauch); border: 1px solid var(--tinte-blau); border-radius: var(--r-1);
  font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--text);
}
.hinweis-kasten svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--tinte-blau); }
.room-blatt .rs-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 24px; }
.room-blatt .rs-priv { padding-left: 24px; border-left: 1px solid var(--linie); }

/* ---------------------------------------------------------- Sichtbarer Punkt */
.dot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.dot-points { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin-top: 40px; }
.dot-points p, .karte p { margin-top: 8px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }
.dot-scene { position: relative; height: 392px; background: var(--kalk-tief); border: 1px solid var(--linie); border-radius: var(--r-2); overflow: hidden; }
.dot-window { position: absolute; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-2); overflow: hidden; }
.dot-window--a { top: 40px; left: 24px; width: 56%; }
.dot-window--b { top: 160px; right: 24px; width: 48%; }
.dw-bar { display: flex; align-items: center; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--linie); font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); font-weight: 600; color: var(--hilfstext); }
.dw-body { display: grid; gap: 8px; padding: 12px; }
.dw-tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dw-tile { aspect-ratio: 16 / 10; background: var(--kalk-tief); border-radius: var(--r-1); display: grid; place-items: center; }
.dw-face { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--linie); }
.dw-line { height: 8px; background: var(--kalk-tief); border-radius: var(--r-1); }
.dw-line--70 { width: 70%; } .dw-line--82 { width: 82%; } .dw-line--64 { width: 64%; }
.float-dot { position: absolute; top: 24px; right: 64px; width: 16px; height: 16px; border-radius: 50%; background: var(--ziegel); box-shadow: 0 0 0 4px var(--flaeche), 0 0 0 5px var(--linie); }
.dot-menu {
  position: absolute; top: 56px; right: 32px; z-index: 2; width: 216px; padding: 4px;
  background: var(--flaeche); border: 1px solid var(--linie-feld); border-radius: var(--r-2); box-shadow: var(--schatten-schwebend);
  font-size: var(--w-fs-sm); line-height: var(--w-lh-sm);
}
.dm-item { display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-1); color: var(--text); }
.dm-item.on { background: var(--kalk-tief); font-weight: 600; }
.dm-sep { height: 1px; background: var(--linie); margin: 4px 0; }
.dm-lang { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; color: var(--hilfstext); }
.dm-lang svg { width: 14px; height: 14px; flex: none; }

/* ------------------------------------------------------------- Feld-Profile */
.profile-box { margin-top: 48px; max-width: 860px; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 0 8px; border-bottom: 1px solid var(--linie); }
.profile-chip-btn {
  height: 44px; padding: 0 12px; margin-bottom: -1px; cursor: pointer; background: transparent;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  font-size: var(--w-fs-md); line-height: var(--w-lh-md); font-weight: 600; color: var(--hilfstext);
}
.profile-chip-btn:hover { color: var(--text); }
.profile-chip-btn.on { color: var(--text); border-bottom-color: var(--ziegel); }
.profile-panel { margin-top: 24px; }
.profile-panel .blatt { padding-top: 28px; }
.profile-out { display: flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 600; }
.profile-out svg { width: 18px; height: 18px; flex: none; color: var(--ok); }
.prof-note { margin-top: 16px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }

/* ------------------------------------------------------------ Karten, Fakten */
.karten { display: grid; gap: 24px; margin-top: 48px; }
.karten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.karten--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-2); padding: 24px; }
.karte .ic { color: var(--text); margin-bottom: 16px; }
.karten--5 .karte { padding: 20px; }
.fakten { display: flex; flex-wrap: wrap; margin-top: 32px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.fakten li { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px 12px 0; margin-right: 24px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); }
.fakten svg { width: 18px; height: 18px; flex: none; color: var(--ok); }
.randnotiz { margin-top: 32px; max-width: 860px; padding: 20px 24px; background: var(--flaeche); border: 1px solid var(--linie); border-left: 2px solid var(--text); border-radius: var(--r-1); }
.randnotiz p { margin-top: 8px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }

/* --------------------------------------------------------- Aussage (Im Einsatz) */
.aussage .kopf h2 { max-width: 20em; }

/* ------------------------------------------------------------------- Ablauf */
.steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; margin-top: 48px; align-items: start; }
.step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 24px 0; border-top: 1px solid var(--linie); }
.step:last-child { border-bottom: 1px solid var(--linie); }
.step .num { font-family: var(--w-font-titel); font-weight: 600; font-size: var(--w-fs-nr); line-height: var(--w-lh-nr); color: var(--text); }
.step p { margin-top: 8px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }
.fertig { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); font-weight: 600; color: var(--ok); }
.fertig svg { width: 16px; height: 16px; }
.punkt-liste li { display: flex; gap: 10px; }
/* Spiegelstrich statt Punkt: ein gefüllter Punkt ohne Zeichen bedeutet auf dieser Seite nur „Aufnahme“ */
.punkt-liste li::before { content: "" / ""; flex: none; width: 8px; height: 2px; margin-top: 13px; background: var(--text); }
.aufgabe { display: flex; align-items: center; gap: 8px; }
.kaestchen { width: 16px; height: 16px; flex: none; border: 1px solid var(--linie-feld); border-radius: var(--r-1); background: var(--flaeche); display: grid; place-items: center; }
.kaestchen svg { width: 12px; height: 12px; color: var(--ok); }
.aufgabe--offen { color: var(--hilfstext); }

/* ------------------------------------------------------------- Außerdem drin */
.extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.x-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; padding-top: 24px; border-top: 1px solid var(--linie); }
.xic svg { width: 24px; height: 24px; color: var(--text); }
.x-item p { margin-top: 8px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }

/* --------------------------------------------------------------------- Preis */
.price-trial { margin-top: 16px; font-size: var(--w-fs-lg); line-height: var(--w-lh-lg); font-weight: 600; color: var(--text); }
.price-trial-note { margin-top: 8px; max-width: 46em; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--text); }
.sec-head .price-trial { color: var(--text); }
.sec-head .price-trial-note { color: var(--text); font-size: var(--w-fs-md); line-height: var(--w-lh-md); }
.price-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 860px; margin-top: 48px; }
.price-tier { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-2); padding: 32px; }
.price-tier .tier-name { font-size: var(--w-fs-cap); line-height: var(--w-lh-cap); font-weight: 600; letter-spacing: var(--w-ls-versal); text-transform: uppercase; color: var(--ziegel-schrift); }
.price-tier .amount { margin-top: 12px; font-family: var(--w-font-titel); font-weight: 600; font-size: var(--w-fs-h1); line-height: var(--w-lh-h1); letter-spacing: var(--w-ls-titel); color: var(--text); }
.price-tier .amount span { font-family: var(--w-font-text); font-weight: 400; font-size: var(--w-fs-lg); line-height: var(--w-lh-lg); letter-spacing: 0; color: var(--hilfstext); }
.price-tier .note, .price-tier .net { font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }
.price-tier .note { margin-top: 8px; }
.price-tier .devices { display: flex; align-items: center; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: var(--w-fs-md); line-height: var(--w-lh-md); }
.price-tier .devices svg { width: 20px; height: 20px; flex: none; color: var(--text); }
.price-shared { max-width: 860px; margin-top: 24px; padding: 24px 32px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-2); }
.price-shared .shared-head { font-size: var(--w-fs-cap); line-height: var(--w-lh-cap); font-weight: 600; letter-spacing: var(--w-ls-versal); text-transform: uppercase; color: var(--hilfstext); }
.price-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin-top: 16px; }
.price-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--w-fs-md); line-height: var(--w-lh-md); }
.price-feats svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--ok); }
.price-business { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }
.price-action { max-width: 860px; margin-top: 24px; }
.price-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.price-choose { margin-top: 16px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }
.smartscreen { margin-top: 24px; }

/* ------------------------------------------------------------------- Kontakt */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.contact-box { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-2); padding: 32px; }
.contact-box p { margin-top: 8px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }
.contact-box a.mail { display: inline-block; margin-top: 16px; font-size: var(--w-fs-lg); line-height: var(--w-lh-lg); font-weight: 600; }
.legal-links { display: flex; flex-direction: column; margin-top: 16px; border-top: 1px solid var(--linie); }
.legal-links a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--linie); font-size: var(--w-fs-md); line-height: var(--w-lh-md); }
.legal-links a svg { width: 16px; height: 16px; color: var(--hilfstext); }

/* --------------------------------------------------------------------- Fuß */
footer { background: var(--kalk); border-top: 1px solid var(--linie); padding: 48px 0 40px; }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.foot .brand { font-size: var(--w-fs-marke); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-links a { font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); }
.consumer-strip { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--linie); }
.ce-head { font-size: var(--w-fs-cap); line-height: var(--w-lh-cap); font-weight: 600; letter-spacing: var(--w-ls-versal); text-transform: uppercase; color: var(--text); }
.consumer-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.consumer-btn {
  display: inline-block; padding: 9px 16px; white-space: nowrap;
  border: 1px solid var(--text); border-radius: var(--r-1); background: var(--flaeche); color: var(--text);
  font-size: var(--w-fs-md); line-height: var(--w-lh-md); font-weight: 600; text-decoration: none;
}
.consumer-btn:hover { text-decoration: none; background: var(--kalk-tief); }
.consumer-btn svg { display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -4px; }
.consumer-note, .foot-note { margin-top: 16px; max-width: 64em; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }
.foot-note { margin-top: 24px; }

/* ------------------------------------------------------- Rechts- und Infoseiten */
.legal-hero { padding: 48px 0 16px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); }
.back-link svg { width: 16px; height: 16px; flex: none; }
.legal-hero h1 { margin-top: 24px; }
.verbindlich {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 4px 10px;
  border: 1px solid var(--linie-feld); border-radius: var(--r-1); background: var(--flaeche);
  font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); color: var(--text);
}
.verbindlich svg { width: 16px; height: 16px; flex: none; color: var(--ok); }
.legal { max-width: 760px; padding: 24px 0 80px; }
.legal h2 { font-size: var(--w-fs-h3); line-height: var(--w-lh-h3); margin: 40px 0 8px; }
.legal h2:first-child { margin-top: 8px; }
.legal h3 { font-size: var(--w-fs-h4); line-height: var(--w-lh-h4); margin: 24px 0 8px; }
.legal p, .legal li { font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--text); }
.legal p { margin: 8px 0; }
.legal ul { list-style: disc; margin: 8px 0 8px 24px; }
.legal ol { list-style: decimal; margin: 8px 0 8px 24px; }
.legal li { margin: 4px 0; }
.legal p.muted, .legal .muted { color: var(--hilfstext); }
.legal hr { border: 0; border-top: 1px solid var(--linie); margin: 32px 0; }
.legal .meta-line, .meta-line { font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); color: var(--hilfstext); }
.legal .addr { line-height: var(--w-lh-md); }
.legal .hinweis {
  margin: 16px 0; padding: 12px 16px 12px 44px; position: relative;
  background: var(--blau-hauch); border: 1px solid var(--tinte-blau); border-radius: var(--r-1);
  font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--text);
}
.legal .hinweis::before {
  content: "" / ""; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px;
  background: no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4785' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
html.dark .legal .hinweis::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FB1EA' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.legal .hinweis strong { color: var(--text); }
.legal .muster { margin: 16px 0; padding: 16px 20px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-2); }
.legal .muster p { margin: 8px 0; }
.legal .muster-note { font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }
.legal a { overflow-wrap: anywhere; }

/* FAQ */
.faq-lede { max-width: 760px; margin: 8px 0 24px; font-size: var(--w-fs-lg); line-height: var(--w-lh-lg); color: var(--hilfstext); }
.faq-list { max-width: 760px; padding: 0 0 80px; }
.faq-item { border-top: 1px solid var(--linie); }
.faq-item:last-child { border-bottom: 1px solid var(--linie); }
.faq-item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 0; font-size: var(--w-fs-lg); line-height: var(--w-lh-lg); font-weight: 600; color: var(--text);
}
.faq-item > summary::-webkit-details-marker { display: none; }
/* Plus/Minus aus harten Linien (keine gedrehte Form) */
.faq-item > summary::after {
  content: "" / ""; flex: none; width: 16px; height: 16px; margin-top: 6px;
  background:
    linear-gradient(var(--text), var(--text)) center / 16px 2px no-repeat,
    linear-gradient(var(--text), var(--text)) center / 2px 16px no-repeat;
}
.faq-item[open] > summary::after { background: linear-gradient(var(--text), var(--text)) center / 16px 2px no-repeat; }
.faq-answer { padding: 0 0 20px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--text); }

/* Verbraucher-Formulare (§ 356a Widerruf, § 312k Kündigung) — nur Stil, Wortlaut unverändert */
.cform-wrap { max-width: 760px; margin: 16px 0 24px; padding: 28px 32px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-2); }
.cform-wrap > h2 { font-size: var(--w-fs-h3); line-height: var(--w-lh-h3); margin: 0; }
.cform-intro { margin: 8px 0 24px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }
.cform-intro--fuss { margin: 16px 0 0; }
.cform { display: grid; gap: 16px; }
.cform-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cform-field { display: flex; flex-direction: column; gap: 6px; }
.cform-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: var(--w-fs-cap); line-height: 20px; font-weight: 600; letter-spacing: var(--w-ls-versal); text-transform: uppercase; color: var(--hilfstext); }
.cform-label .req { color: var(--text); }
.cform-label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--w-fs-sm); line-height: var(--w-lh-sm); color: var(--hilfstext); }
.cform input, .cform select, .cform textarea {
  width: 100%; min-height: var(--w-knopf-hoehe); padding: 9px 12px;
  font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie-feld); border-radius: var(--r-1);
}
.cform textarea { min-height: 96px; resize: vertical; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: 0; border-color: var(--fokus-farbe); }
.cform-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cform-consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--text); cursor: pointer; }
.cform-consent input { flex: none; width: 18px; height: 18px; min-height: 0; margin-top: 3px; padding: 0; accent-color: var(--text); }
.cform-submit { justify-self: start; margin-top: 8px; }
.cform-status { margin: 0; font-size: var(--w-fs-md); line-height: var(--w-lh-md); }
.cform-status:empty { display: none; }
/* Fehler: Karmin, mit Umriss-Symbol (nie allein über die Farbe) */
.cform-status.error, .msg.bad { color: var(--fehler); padding-left: 28px; background: no-repeat left 2px / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0F3F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); }
html.dark .cform-status.error, html.dark .msg.bad { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2879F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); }
.cform-success { padding: 24px 28px; background: var(--ok-flaeche); border: 1px solid var(--ok); border-radius: var(--r-2); }
.cform-success h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.cform-success h3 svg { width: 22px; height: 22px; flex: none; color: var(--ok); }
.cform-success p { margin: 8px 0 0; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--text); }
.cform-success .ref, .cform-success .rtime { font-family: var(--w-font-mono); font-weight: 400; color: var(--text); }

/* 404 */
.seite-404 .wrap { max-width: 688px; text-align: center; }
.seite-404 h1 { margin-top: 12px; }
.seite-404 .lede { margin: 16px auto 0; font-size: var(--w-fs-lg); line-height: var(--w-lh-lg); color: var(--hilfstext); }
.seite-404 .aktion { display: flex; justify-content: center; margin-top: 32px; }

/* Konto-Landeseiten (E-Mail bestätigt, Neues Passwort) */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: 100%; max-width: 460px; padding: 40px 36px; text-align: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-2); }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 32px; font-family: var(--w-font-marke); font-weight: 600; font-size: var(--w-fs-marke); line-height: var(--w-lh-marke); color: var(--text); }
.auth-icon { width: 56px; height: 56px; margin: 0 auto 24px; display: grid; place-items: center; border-radius: var(--r-2); background: var(--ok-flaeche); color: var(--ok); }
.auth-icon svg { width: 28px; height: 28px; }
.auth-icon.err { background: var(--fehler-flaeche); color: var(--fehler); }
.auth-card h1 { font-size: var(--w-fs-h2); line-height: var(--w-lh-h2); margin-bottom: 12px; }
.auth-card p { margin-bottom: 8px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--hilfstext); }
.auth-card .hint { margin-top: 16px; }
.auth-card .btn { margin-top: 24px; }
.pw-field { margin-top: 16px; text-align: left; }
.pw-field label { display: block; margin-bottom: 6px; font-size: var(--w-fs-cap); line-height: var(--w-lh-cap); font-weight: 600; letter-spacing: var(--w-ls-versal); text-transform: uppercase; color: var(--hilfstext); }
.pw-field input { width: 100%; min-height: var(--w-knopf-hoehe); padding: 9px 12px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); color: var(--text); background: var(--flaeche); border: 1px solid var(--linie-feld); border-radius: var(--r-1); }
.pw-field input:focus { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: 0; border-color: var(--fokus-farbe); }
.auth-card .pw-save { width: 100%; }
.msg { margin-top: 16px; min-height: 24px; font-size: var(--w-fs-md); line-height: var(--w-lh-md); text-align: left; }

.auth-card--voll .btn { width: 100%; }

/* Registrieren: Schritte (Seite /registrieren/) */
.legal p.reg-intro { font-size: var(--w-fs-lg); line-height: var(--w-lh-lg); color: var(--hilfstext); margin-bottom: 24px; }
.reg .step h3 { margin: 0; }
.reg .step p { margin: 8px 0 0; }
.reg .step p.reg-stark { color: var(--text); }
.reg .price-btns { margin-top: 16px; }
.reg .mac-note { margin-top: 16px; }

/* Preise (Seite /preise/) und weitere Rahmen der Unterseiten */
.preis-seite { padding-top: 32px; }
.sec-head h2 { margin-top: 8px; }
.preis-unten { padding: 64px 0; border-top: 1px solid var(--linie); }
.legal-hero .eyebrow { margin-top: 24px; }
.legal-hero .eyebrow + h1 { margin-top: 8px; }
.legal p.abstand-oben { margin-top: 28px; }
.seite-404 .aktion .btn { min-width: 0; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 1199px) {
  .karten--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .nav-links { gap: 16px; margin-right: 8px; }
  .room-grid, .dot-grid, .steps { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-blatt { margin-top: 48px; }
  .karten--3 { grid-template-columns: minmax(0, 1fr); }
  .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 879px) {
  :root { --w-abstand: 64px; }
  .menu-toggle { display: inline-flex; }
  .nav-links { display: none; }
  header.menu-offen .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px var(--w-rand) 16px; background: var(--kalk); border-bottom: 1px solid var(--linie);
  }
  header.menu-offen .nav-links a { min-height: 48px; border-bottom: 1px solid var(--linie); }
  .price-tiers, .contact-grid, .price-feats { grid-template-columns: minmax(0, 1fr); }
  .karten--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  :root { --w-rand: 16px; }
  h1, .hero h1, .legal-hero h1 { font-size: 32px; line-height: 40px; }
  h2 { font-size: 24px; line-height: 32px; }
  .price-tier .amount { font-size: 32px; line-height: 40px; }
  .kopf { grid-template-columns: minmax(0, 1fr); }
  .kopf::before { grid-row: auto; margin-bottom: 8px; }
  .kopf > * { grid-column: 1; }
  .abschnitt .wrap > * { margin-left: 0 !important; }
  .dot-points, .cform-row, .extras { grid-template-columns: minmax(0, 1fr); }
  .karten--5 { grid-template-columns: minmax(0, 1fr); }
  .room-blatt .rs-body { grid-template-columns: minmax(0, 1fr); }
  .room-blatt .rs-priv { padding-left: 0; border-left: 0; margin-top: 28px; }
  .hero-trial-badge { flex-direction: column; align-items: flex-start; }
  .hero-trial-badge .danach { padding-left: 0; border-left: 0; }
  .nav-right > .btn { display: none; }
  .cform-wrap, .contact-box, .price-tier, .price-shared { padding: 24px 20px; }
  .auth-card { padding: 32px 20px; }
  .dot-scene { height: 360px; }
  .dot-window--a { width: 72%; left: 16px; }
  .dot-window--b { width: 64%; right: 16px; }
  .dot-menu { right: 16px; }
  .float-dot { right: 40px; }
}
@media (max-width: 479px) {
  .hero-cta .btn, .price-btns .btn { width: 100%; }
  .consumer-actions { flex-direction: column; }
  .consumer-btn { text-align: center; white-space: normal; }
  .cform-submit { width: 100%; justify-self: stretch; }
  .mock-tab { padding: 0 8px; }
  /* Blattkopf mit Reitern und „Aufnahme läuft“: zweizeilig, bleibt im 28-px-Raster (84 = 3 × 28) */
  .mock .blatt-kopf { height: 84px; flex-wrap: wrap; align-content: center; row-gap: 0; }
  .mock .rec { margin-left: 8px; width: 100%; height: 28px; }
  .blatt { padding-right: 16px; }
  .blatt-kopf { margin-right: -16px; padding-right: 12px; }
}

/* ------------------------------------------------------------------- Druck */
@media print {
  header#top, footer, .consumer-strip, .back-link, .cform-wrap, .lang-toggle, .theme-toggle, .menu-toggle, .hero-cta, .beta-banner { display: none !important; }
  body { background: #fff; color: #000; }
  .wrap { max-width: 100%; padding: 0 12px; }
  .legal { max-width: 100%; padding: 0; }
  .legal-hero { padding: 0 0 8px; }
  a { color: #000; }
  .legal a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #444; word-break: break-all; }
  .verbindlich { border: 1px solid #000; color: #000; }
  .legal h2, .legal h3 { break-after: avoid; }
  .legal p, .legal li { break-inside: avoid; }
}