/*
 * AI MyDocuments, Marketing-Site (ai-mydocuments.de)
 * Eine gemeinsame Stylesheet-Datei. Statisch, kein JavaScript.
 * CI-Redesign F057: Corporate Design von Wirkmittel AI (Skill wirkmittel-design),
 * Dark Only, Petrolgrund #131122, Trennlinien statt Kaesten, Radius 0.
 * Layout-Pass (F057, Nachtrag Design-Konzept SS12): drei Containerbreiten, full-bleed
 * Sektionen mit voller Trennlinie, 4/8er-Spacing-Raster. Texte unveraendert, nur Struktur.
 * Fonts self-hosted aus ./fonts/ (InterVariable.woff2, SpaceGrotesk-Variable.woff2),
 * eingebunden per @font-face mit relativem Pfad. Kein externer Font-Hoster, kein CDN.
 */

@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Marken-Akzente --- */
  --electric-blue: #0ea5e9;
  --neon-orange: #fb923c;

  /* --- Petrol-Skala (Flaechen, dark only) --- */
  --petrol-dark: #131122;
  --petrol-medium: #1a1830;
  --petrol-light: #252240;
  --teal-700: #302d52;

  /* --- Neutrals --- */
  --neutral-100: #f5f5f5; /* Fliesstext */
  --neutral-400: #a3a3a3; /* Sekundaertext, Meta */
  --neutral-950: #0a0a0a; /* Text auf heller Button-Fuellung */

  /* --- Linien und Flaechenfuellungen aus der Petrol-Skala mit Deckung ---
     E3: --line von 40 auf 70 Prozent angehoben, damit die Linienraster (Karten, Tiers,
     Grid) auf #131122 als Struktur erkennbar bleiben; Hover-/Aktivzustaende nutzen eigene
     Tokens (--hover-fill u.a.) und sind davon unberuehrt. --line-soft im selben Zug
     mitgehoben, sonst waere die Kopfzeilen-Trennlinie der Tabelle (nutzt --line-soft)
     schwaecher als die einfachen Zeilentrenner (nutzen --line) und die Hierarchie kippt. */
  --line: rgba(37, 34, 64, 0.7); /* teal-800 bei 70 Prozent */
  --line-soft: rgba(37, 34, 64, 0.85);
  --hover-fill: rgba(26, 24, 48, 0.3); /* teal-900 bei 30 Prozent */
  --tint: rgba(26, 24, 48, 0.4); /* Sektionstoenung fuer Callout/Limits/Mock/Band */

  /* --- Der primaere CTA: Blau mit Orange-Slide, ausser auf dem Trustcenter --- */
  --cta-slide: var(--neon-orange);

  /* --- Links --- */
  --link: var(--electric-blue);
  --link-hover: var(--neon-orange);

  /* --- Typografie --- */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  /* Mono-Stack: moderne System-Monospace statt Courier New (Philipp 2026-07-26: Courier
     oft unleserlich). ui-monospace = SF Mono auf Apple; Windows faellt auf Cascadia/Consolas. */
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Segoe UI Mono', Menlo, monospace;

  /* --- Radius: eckig, keine Ausnahme --- */
  --radius: 0;

  /* --- Layout: drei Containerbreiten (Design-Konzept SS12) ---
     Marketing 1200px: Hero, Grids, Tiers, Claims, CTA-Band.
     Wide 1400px: Produkt-Visual (Mock auf funktionen).
     Narrow 900px: FAQ-Linienliste.
     Prosa 720px (--readw, Klasse .reading): Fliesstext-Absaetze und Rechtsseiten.
     Form 600px: Anfrage-Formular, Conversion-Standard. */
  --maxw: 1200px;
  --maxw-wide: 1400px;
  --maxw-narrow: 900px;
  --maxw-form: 600px;
  --readw: 720px;

  /* --- Sticky-Header-Hoehe fuer Scroll-Margin (F059 A4): eine Variable, zwei Werte.
     Mobiler Wert hier, Desktop-Wert unten als Override in der min-width:768px-Query auf
     :root. Genutzt von [id] weiter unten, damit Ankerziele nicht unter dem Sticky-Header
     verschwinden. --- */
  --header-h: 108px; /* Mobile Kopf-Hoehe (gemessen ~100px bei 390/375/360px Breite) plus Puffer */
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--petrol-dark);
  color: var(--neutral-100);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* --- Grundelemente --- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--neutral-100);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.55em;
  hyphens: auto;
}

h1 {
  font-size: 2rem; /* 32px, H1 Unterseiten */
  line-height: 1.1;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem; /* 40px */
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3rem; /* 48px */
  }
}

/* H1 Start (index.html): eigene Skala per clamp, leicht negatives Tracking (Design-Konzept SS12).
   hyphens (SS13): auto nur unterhalb 768px, darueber manuell (Split-Hero hat pro Zeile weniger Platz). */
.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.5rem); /* 32 bis 56px */
  letter-spacing: -0.03em;
  hyphens: auto;
}

@media (min-width: 768px) {
  .hero h1 {
    hyphens: manual;
  }
}

h2 {
  font-size: 1.75rem; /* 28px */
  margin-top: 0;
}

@media (min-width: 768px) {
  h2 {
    font-size: 2rem; /* 32px */
  }
}

h3 {
  font-size: 1.125rem; /* 18px, fest */
  line-height: 1.3;
  margin-top: 0;
}

/* Markennamen-Trennschutz (E2): "AI MyDocuments" darf als Ganzes in die naechste Zeile
   rutschen (Ueberschriften stehen auf hyphens:auto), aber nicht mitten im Namen getrennt
   werden. Bewusst KEIN white-space:nowrap, sonst koennte der Name nicht umbrechen. */
.brand-nowrap {
  hyphens: none;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 150ms ease;
}

a:hover {
  color: var(--link-hover);
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }

  /* E1: Fokus-Ring-Einzug (outline-offset) neutralisieren */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  .btn:focus-visible,
  summary:focus-visible {
    transition: none;
  }

  /* E5: FAQ-Aufklapp-Pfeil nicht rotieren lassen */
  .faq summary::before {
    transition: none;
  }
}

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

li {
  margin: 0.35rem 0;
}

strong {
  font-weight: 700;
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

/* Fokus-Sichtbarkeit (Tastaturbedienung), immer Electric Blue.
   E1: outline-offset transitioniert weich ein statt hart zu springen. Die Transition
   greift beim Wechsel IN diesen Zustand (CSS-Transitions-Spec: massgeblich ist die
   Transition-Deklaration im Zielzustand), eine eigene Basis-Regel fuer die Elemente ist
   dafuer nicht noetig. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--electric-blue);
  outline-offset: 2px;
  transition: outline-offset 150ms ease;
}

/* Skip-Link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--electric-blue);
  color: var(--neutral-950);
  font-weight: 700;
  padding: 0.6rem 1rem;
  z-index: 100;
  border-radius: 0;
}
.skip-link:focus {
  left: 0;
}

/* --- Layout-Container: drei Breiten plus Prosa-Sondermass --- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}

/* Modifikatoren, immer zusammen mit .container notiert (Reihenfolge im Markup: .container .container-x) */
.container-wide {
  max-width: var(--maxw-wide);
}

.container-narrow {
  max-width: var(--maxw-narrow);
}

/* E7: explizit zentriert (Formularbreite unveraendert). Die 600px-Spalte erbt
   margin:0 auto bereits von .container, das reicht bei 1440px rechnerisch fuer eine
   mittige Position (je 420px Abstand beidseitig, gemessen); die margin-Zeile hier macht
   das nur unabhaengig von der .container-Basisregel explizit und dokumentiert die
   Absicht am Ort der Modifikator-Klasse. */
.container-form {
  max-width: var(--maxw-form);
  margin-inline: auto;
}

.reading {
  max-width: var(--readw);
}

/* --- Kopfzeile / Navigation: full-bleed, sticky (kein JS: umbricht mobil) --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--petrol-dark);
  border-bottom: 1px solid var(--line);
}

/* Scroll-Ziel-Versatz (F059 A4): jedes Ankerziel bekommt denselben Versatz wie die
   Sticky-Header-Hoehe, sonst verschwindet die Ueberschrift nach einem Anker-Sprung
   darunter. Breit auf [id] statt auf einzelne Ueberschriften-Selektoren, damit jedes
   Sektionsziel erfasst ist, unabhaengig vom Element-Typ. */
[id] {
  scroll-margin-top: var(--header-h);
}

@media (min-width: 768px) {
  :root {
    --header-h: 76px; /* Desktop-Header-Hoehe (einzeilig, gemessen ~68px) plus Puffer */
  }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.85rem 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .nav {
    padding: 0.85rem 2rem;
  }
}

.brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--neutral-100); /* Fallback ohne background-clip:text-Unterstuetzung */
  text-decoration: none;
  letter-spacing: -0.01em;
  margin-right: auto;
  white-space: nowrap;
}

.brand:hover {
  color: var(--neutral-100);
}

/* Wortmarke (SS13): Verlauf Electric Blue zu Neon Orange ueber die GESAMTE Wortmarke
   "AI MyDocuments". Der brand-ai-Span bleibt im Markup, traegt aber keinen eigenen Effekt
   mehr (Text bleibt byte-gleich). Fallback-Farbe neutral-100, falls background-clip:text
   nicht unterstuetzt wird. Das Fusszeilen-Gegenstueck (.footer-brand) steht aus Cascade-
   Gruenden direkt bei seiner Basis-Regel weiter unten (sonst wuerde die spaeter im File
   stehende .footer-brand-Basisregel den Verlauf wieder ueberschreiben). */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .brand,
  .brand:hover {
    background: linear-gradient(to right, var(--electric-blue), var(--neon-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  position: relative;
  color: var(--neutral-400);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.2rem 0;
  transition: color 150ms ease;
}

.nav-links a:hover,
.nav-links a[aria-current='page'] {
  color: var(--electric-blue);
}

.nav-links a[aria-current='page'] {
  border-bottom: 2px solid var(--electric-blue);
}

/* Hover-Unterstreichung (E1): eigenes ::after, waechst per scaleX ein, analog zum
   .link-signin-Pfeil-Muster (Transform, 150ms). Der aktuelle Seitenlink behaelt seinen
   Zustand (border-bottom oben) und bleibt hier aussen vor, sonst liegen zwei Linien
   uebereinander. */
.nav-links a:not([aria-current='page'])::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--electric-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 150ms ease;
}

.nav-links a:not([aria-current='page']):hover::after {
  transform: scaleX(1);
}

/* "Login" ist in Nav und Footer auf allen 9 Seiten die eine Textlink-Ausnahme: blau im
   Ruhezustand, Hover Orange, Pfeil verschiebt sich 4px. Eigene Klasse statt Positions- oder
   URL-Selektor: bleibt stabil, egal wie Nav/Footer intern gruppiert sind, und es steht keine
   externe Adresse als Literal in dieser Datei. */
.link-signin {
  color: var(--electric-blue);
}

.link-signin:hover {
  color: var(--neon-orange);
}

.link-signin::after {
  content: '\2192';
  display: inline-block;
  margin-left: 0.3em;
  transition: transform 150ms ease;
}

.link-signin:hover::after {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .link-signin::after {
    transition: none;
  }

  .nav-links a::after {
    transition: none;
  }
}

/* --- Buttons: DS-Referenz mit echter Slide-Flaeche im Markup (kein ::before mehr) ---
   .btn traegt Groesse/Typografie, .btn-cta die Flaechenfarbe. Label und Pfeil liegen als
   eigene Spans mit z-index 10 ueber der Slide-Flaeche (.btn__slide), unabhaengig von der
   DOM-Reihenfolge im Markup (Slide-Span steht als letztes Kind, s. DS-Referenz). */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 1.1rem 2.4rem;
  border-radius: var(--radius);
  border: 0;
  text-decoration: none;
  cursor: pointer;
}

.btn-cta {
  background-color: var(--electric-blue);
  color: var(--neutral-950);
}

/* Der generische a:hover-Farbwechsel (Orange) darf Buttons nicht treffen: Label und Pfeil
   (currentColor) wuerden sonst auf der orangen Slide-Flaeche unsichtbar. */
.btn-cta:hover,
.btn-cta:focus-visible {
  color: var(--neutral-950);
}

.btn__label,
.btn__arrow {
  position: relative;
  z-index: 10;
}

.btn__arrow {
  flex-shrink: 0;
  transition: transform 300ms ease-out;
}

.btn__slide {
  position: absolute;
  inset: 0;
  background-color: var(--cta-slide);
  /* 101 statt 100 Prozent: bei fraktionalen Button-Breiten rundet translateX(-100%) auf
     einen Subpixel und die Slide-Flaeche blitzt links als 1px-Strich durch das Clipping. */
  transform: translateX(-101%);
  transition: transform 300ms ease-out;
}

.btn-cta:hover .btn__slide,
.btn-cta:focus-visible .btn__slide {
  transform: translateX(0);
}

.btn-cta:hover .btn__arrow,
.btn-cta:focus-visible .btn__arrow {
  transform: translateX(8px);
}

/* Trustcenter: seit dem Umbau 2026-07-26 (Claim-Flag entfernt) traegt die Seite kein
   eigenes statisches Orange mehr; der CTA-Hover-Slide bleibt trotzdem blau (gespiegelte
   Button-Variante), damit kein neues statisches Orange entsteht. */
.page-trustcenter {
  --cta-slide: color-mix(in srgb, var(--electric-blue) 70%, black 30%);
}

@media (prefers-reduced-motion: reduce) {
  .btn__slide,
  .btn__arrow {
    transition: none;
  }
}

.btn-nav {
  padding: 0.6rem 1.2rem;
  font-size: 0.92rem;
  gap: 0.5rem;
}

.btn-nav .btn__arrow {
  width: 16px;
  height: 16px;
}

/* --- Mobiler Kopf (F059 Block A1, Nachbesserung): echte 2 Zeilen unter 768px, kein
   Hamburger, kein JS. Dokumentierte Abweichung vom urspruenglichen PRD-Wortlaut A1 (4
   Links + voller CTA-Text passen bei 390px rechnerisch nie in eine Zeile, ohne den A3-
   Mindestabstand zu unterschreiten oder Text unlesbar zu verkleinern): der CTA-Button
   wandert zu Zeile 1 neben die Wortmarke, dafuer zieht Login in Zeile 2 zu den vier
   Nav-Links. .nav-links wird zu display:contents, wodurch ihre li-Kinder direkte Flex-
   Items von .nav werden (alle fuenf zusammen, order 4). Eine generierte ::after-Box mit
   voller Breite (flex-basis 100%) erzwingt den Zeilenumbruch nach Zeile 1. Der CTA-Button
   wird kompakter (kleineres Padding/Font), sein Pfeil-SVG ist bereits aria-hidden im
   Markup und entfaellt unter 480px rein optisch (display:none) fuer mehr Platz in Zeile 1;
   Login-Pfeil analog unter 480px, s. Tap-Targets-Query unten. Ab 768px bleibt .nav
   unveraendert: kein order gesetzt, die bestehenden Flex-Regeln oben gelten weiter. */
@media (max-width: 767.98px) {
  .nav {
    row-gap: 0;
  }

  .brand {
    order: 1;
  }

  .btn-nav {
    order: 2;
    margin-left: auto;
    padding: 0.45rem 0.9rem;
    font-size: 0.88rem;
  }

  .nav-links {
    display: contents;
  }

  .nav-links::after {
    content: '';
    order: 3;
    flex-basis: 100%;
  }

  .nav-links li {
    order: 4;
    margin-top: 0.5rem;
  }
}

/* Tap-Targets (F059 A3, WCAG 2.2 SC 2.5.8): unter 480px grosszuegigerer Link-Abstand und
   -Innenabstand, damit benachbarte Nav-Links nicht zu dicht beieinander liegen. Ziel war
   1.5rem column-gap, 1.25rem als Kompromiss vorgemerkt (Nachbesserungs-Vorgabe); gemessen
   reichen bei 390px selbst 1.25rem nicht fuer alle fuenf Elemente (vier Links + Login) in
   einer Zeile. Geloest per justify-content:space-between: 0.25rem column-gap als reine
   Untergrenze (verhindert, dass Links bei extremer Enge aneinanderkleben), der tatsaechlich
   sichtbare Abstand entsteht ueberwiegend aus dem gleichmaessig verteilten Freiraum und
   passt sich 390/375/360px automatisch an, ohne fest verdrahtete Zahl (gemessen effektiv
   rund 0.44rem bei 360px bis 0.91rem bei 390px, mit sinkender Breite naehert er sich der
   0.25rem-Untergrenze). Beide Pfeil-Icons (CTA-Button, Login) sind rein dekorativ
   (aria-hidden bzw. reines ::after-Zeichen) und entfallen hier zugunsten des Platzes in
   Zeile 1/2. */
@media (max-width: 479.98px) {
  .nav {
    column-gap: 0.25rem;
    justify-content: space-between;
  }

  .nav-links a {
    padding: 0.35rem 0;
  }

  .btn-nav .btn__arrow {
    display: none;
  }

  .link-signin::after {
    display: none;
  }
}

/* Grosser Submit/Abschluss-Button (Anfrage-Formular, Final-CTA-Band) */
.btn-lg {
  padding: 1.25rem 2.6rem;
  font-size: 1.05rem;
}

.btn-outline {
  background: transparent;
  color: var(--electric-blue);
  border: 1px solid var(--line);
  transition: border-color 150ms ease, background-color 150ms ease;
}

.btn-outline:hover {
  border-color: var(--electric-blue);
  background-color: var(--hover-fill);
  color: var(--electric-blue);
}

@media (prefers-reduced-motion: reduce) {
  .btn-outline {
    transition: none;
  }
}

.cta-row {
  margin: 3.5rem 0 0.5rem;
}

/* --- Abschnitte: full-bleed mit voller Trennlinie, Container innen traegt die Breite ---
   Spacing-Skala 4/8er-Raster: 48px mobil, 64px Tablet, 96px Desktop (Design-Konzept SS12). */
main {
  display: block;
}

.section {
  position: relative;
  padding-block: 3rem; /* 48px */
  border-top: 1px solid var(--line);
}

main > .section:first-child {
  border-top: 0;
}

@media (min-width: 768px) {
  .section {
    padding-block: 4rem; /* 64px */
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: 6rem; /* 96px */
  }
}

/* Hero (index): 60 bis 80dvh, Inhalt vertikal zentriert */
.section-hero {
  display: flex;
  align-items: center;
  min-height: 60dvh;
}

@media (min-width: 768px) {
  .section-hero {
    min-height: 70dvh;
  }
}

@media (min-width: 1024px) {
  .section-hero {
    min-height: 70dvh; /* SS13: Split-Hero mit Buehne, ca. 70dvh statt 80dvh */
  }
}

/* Hero-Fold (F059 A2): unter 768px kein festes vh-Mass mehr, Hoehe folgt dem Inhalt, damit
   Primaer-CTA und die Oberkante der Buehne im ersten Viewport (z. B. 390x844) liegen. Der
   .hero-split-Abstand wird unten bei der Basisregel der Klasse mitverknappt (Cascade-Gruende:
   dort steht die spaeter im File definierte Basisregel .hero-split{gap:3rem}). */
@media (max-width: 767.98px) {
  .section-hero {
    min-height: auto;
    padding-block: 1.5rem;
  }
}

.section-hero .container {
  width: 100%;
}

/* Unterseiten: kompakter Hero, kein grosses vh-Mass, nur grosszuegiges Padding */
.section-hero--compact {
  display: block;
  min-height: 0;
  padding-block: 2.5rem;
}

@media (min-width: 1024px) {
  .section-hero--compact {
    padding-block: 3.5rem;
  }
}

/* Datenschutz-Fakten-Band (nur index): Ersatz fuer eine Logo-Leiste, full-bleed getoent.
   Der bestehende .callout darin verliert seine eigene Box (Flaeche/Rahmen kommen jetzt vom
   Band), behaelt aber die blaue Akzentkante. */
.section-callout-band {
  background-color: var(--tint);
}

.section-callout-band .callout {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--electric-blue);
  border-radius: 0;
  padding: 0 0 0 1.25rem;
  margin: 0;
}

/* Final-CTA-Band (index, funktionen, preise): zusaetzlich unten gerahmt, zentriert, getoent */
.section-cta-band {
  border-bottom: 1px solid var(--line);
  background-color: var(--tint);
  text-align: center;
}

/* CTA-Band-Headline (SS13, index/funktionen/preise, werblich): ueber dem Button */
.cta-band-headline {
  font-size: clamp(1.75rem, 4vw, 2.25rem); /* 28 bis 36px */
  margin: 0 0 1.75rem;
}

.section-cta-band .cta-row {
  display: flex;
  justify-content: center;
  margin: 0 0 1.5rem;
}

.section-cta-band .stand {
  text-align: center;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--neutral-400);
  margin: 0 0 0.5rem;
}

/* 404-Ziffer (E7): grosse Zahl in der bestehenden Courier-Zahlensprache (vgl. .price-note,
   .calc-figure) ueber der H1. aria-hidden, weil der Kicker "Fehler 404" (.eyebrow) die
   Information bereits als Text traegt; diese Ziffer ist rein visuell. */
.error-code {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--electric-blue);
  font-size: clamp(3rem, 12vw, 6rem);
  line-height: 1;
  margin: 0 0 0.5rem;
}

/* Hero-CTA-Reihe (SS13, nur index): Primaer-Button + sekundaerer Textlink nebeneinander */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.hero .lead,
.lead {
  max-width: var(--readw);
  font-size: 1.25rem; /* 20px */
  color: var(--neutral-100);
  line-height: 1.5;
  font-weight: 400;
}

@media (min-width: 768px) {
  .hero .lead,
  .lead {
    font-size: 1.375rem; /* 22px */
  }
}

/* Erklaerabsatz unter einer Sektions-Headline: laeuft auf Prosamass, auch wenn Headline/Grid
   auf voller Containerbreite stehen (Design-Konzept SS12, Kern-Fix). Wiederverwendung der
   bestehenden .reading-Klasse (720px). SS13: der Direktantwort-Absatz auf index sitzt jetzt
   in einer eigenen Sektion direkt unter dem Hero; die Sektion selbst traegt das vertikale
   Rhythmus-Padding, daher kein Zusatzabstand mehr noetig. */
.hero-intro {
  margin-top: 0;
}

/* --- Hero-V2 Split (SS13, nur index): 55/45 ab lg, Buehne rechts, mobil gestapelt --- */
.hero-split {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .hero-split {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }

  .hero-content {
    flex: 0 0 55%;
    max-width: 55%;
  }

  .hero-stage {
    flex: 0 0 45%;
    max-width: 45%;
  }
}

/* Hero-Fold (F059 A2, Fortsetzung): unter 768px knapperer Abstand zwischen Inhalt und
   Buehne, Teil desselben Fold-Ziels wie die .section-hero-Regel weiter oben. */
@media (max-width: 767.98px) {
  .hero-split {
    gap: 2rem;
  }
}

/* Gradient-Subline direkt unter der H1: einziges Text-Verlaufs-Element der Seite.
   .text-gradient ist eine generische Verlaufs-Utility (Fallback neutral-100). */
.text-gradient {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--neutral-100); /* Fallback ohne background-clip:text-Unterstuetzung */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .text-gradient {
    display: inline-block;
    background: linear-gradient(to right, var(--electric-blue), var(--neon-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero-subline {
  font-size: clamp(1.375rem, 2vw, 1.75rem); /* 22 bis 28px */
  line-height: 1.3;
  margin: 0 0 1.25rem;
}

/* Buehne (SS13): echter Screenshot der Anwendung (site/public/app-demo.png). Der Rahmen
   kollabiert auch ohne Bild nicht: aspect-ratio 4/3 plus min-height als Rueckfallebene. */
.hero-stage {
  position: relative;
  display: block;
  margin: 0;
  border: 1px solid var(--line);
  border-right: 3px solid var(--electric-blue);
  background-color: var(--petrol-medium);
  aspect-ratio: 1440 / 1262;
  min-height: 260px;
  overflow: hidden;
}

.hero-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* F059 Phase 3 Block B: unter 768px laedt die picture-Quelle das Hochkant-Mobilbild
   (753x1082). Die Buehne oben hat aspect-ratio 1440/1262 (Querformat) fest gesetzt; mit
   object-fit: cover wuerde das Hochkantbild seitlich beschnitten. Aspect-ratio auf das
   Seitenverhaeltnis des Mobilbilds umstellen, damit cover ohne Beschnitt greift. Muss NACH
   der .hero-stage-Basisregel stehen, sonst gewinnt die unconditional Regel im Cascade. */
@media (max-width: 767.98px) {
  .hero-stage {
    aspect-ratio: 753 / 1082;
  }
}

/* Echtes Produktbild in voller Breite (funktionen): gleicher Rahmen wie die Hero-Buehne,
   aber ohne deren Split-Spaltenmasse. Ersetzt den frueheren HTML-Mock. */
.app-shot {
  margin: 2rem 0 0;
  border: 1px solid var(--line);
  border-right: 3px solid var(--electric-blue);
  background-color: var(--petrol-medium);
}

.app-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mesh-Raster nur im Start-Hero (Skill-Element), statisch ohne Scan-Animation, unter dem
   Inhalt (liegt als Section-Hintergrund automatisch hinter den Kindelementen). */
.section-hero--mesh {
  background-image:
    linear-gradient(to right, rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* --- Karten / Raster: Trennlinien statt Kaesten ---
   Aussenrahmen auf dem Grid-Container, gap 0, jede Zelle traegt einen eigenen 1px-Rahmen mit
   negativem Versatz (-1px oben/links). So kollabieren die Rahmen benachbarter Zellen zu einer
   einzigen Linie, unabhaengig von der Spaltenzahl und ohne nth-child-Sonderfaelle. Die
   Spaltenzahl je Modul kommt ueber die Modifikatoren darunter (SS12: Modul-Zuordnung je Seite). */
.grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  margin: 1.75rem 0;
}

/* grid-4 (index, "Was das Werkzeug leistet"): 2x2 ab md, bleibt bei zwei Spalten.
   grid-2 (preise, Tarife): zweispaltig ab md.
   grid-3 (funktionen, "Funktionen im Ueberblick"): zwei Spalten ab md, drei ab lg. */
@media (min-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card,
.tier {
  border: 1px solid var(--line);
  margin: -1px 0 0 -1px;
  padding: 1.75rem;
  background-color: transparent;
  transition: background-color 150ms ease, transform 150ms ease;
}

.card:hover,
.tier:hover {
  background-color: var(--hover-fill);
  transform: translateY(-2px);
}

.card:hover h3,
.tier:hover h3 {
  color: var(--electric-blue);
}

.card h3 {
  margin-top: 0;
  transition: color 150ms ease;
}

.card p:last-child,
.card ul:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .tier,
  .card h3 {
    transition: none;
  }
}

/* Beleg-Verweis / Hinweis-Kasten: Sektionstoenung + blaue Akzentlinie */
.callout {
  background-color: var(--tint);
  border: 1px solid var(--line);
  border-left: 3px solid var(--electric-blue);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

/* Abgrenzung */
.limits {
  background-color: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}

/* Beispielrechnung (nur preise.html): Sektionstoenung wie Callout/Limits, Zahlen in Courier
   ueber .calc-figure-Hooks im Fliesstext, Absatz selbst auf Prosamass begrenzt. */
.calc-block {
  background-color: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  max-width: var(--readw);
}

.calc-block p:last-child {
  margin-bottom: 0;
}

.calc-figure {
  font-family: var(--font-mono);
  font-weight: 700;
}

/* --- Trustcenter: Claim -> Beleg als Aufklapp-Liste (natives details/summary, FAQ-Bauart).
   Umbau 2026-07-26 (Triage-Freigabe): die 8 "In juristischer Pruefung"-Flags und die
   claim-review-Randlinie sind entfallen, alle 16 Claims tragen jetzt dieselbe Linienraster-
   Optik. Im geschlossenen Zustand zeigt summary den vollen fetten Claim-Satz plus
   Status-Kurzhinweis, der Beleg-Absatz steckt im Aufklapp-Teil (claim-support). --- */
.claim {
  border-bottom: 1px solid var(--line);
  margin: 0;
}

.claim:last-child {
  border-bottom: 0;
}

.claim summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  transition: background-color 150ms ease;
}

.claim summary:hover {
  background-color: var(--hover-fill);
}

.claim summary::-webkit-details-marker {
  display: none;
}

.claim summary::marker {
  content: '';
}

/* Aufklapp-Pfeil im CI (wie .faq summary::before): zwei Kanten, rotiert beim Oeffnen. */
.claim summary::before {
  content: '';
  flex-shrink: 0;
  width: 0.55em;
  height: 0.55em;
  margin-top: 0.4em;
  border-right: 2px solid var(--electric-blue);
  border-bottom: 2px solid var(--electric-blue);
  transform: rotate(-45deg);
  transition: transform 200ms ease;
}

.claim[open] summary::before {
  transform: rotate(45deg);
}

.claim-summary-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.claim-text {
  font-weight: 700;
  color: var(--neutral-100);
  margin: 0;
}

.claim-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0;
}

.claim-status {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--neutral-400);
}

@media (min-width: 768px) {
  .claim-status {
    font-size: 0.85rem;
  }
}

.claim-status-ok {
  color: var(--electric-blue);
  font-weight: 700;
}

/* Beleg-Teil: gedaempft (neutral-400 statt neutral-100), auf Pfeilbreite eingerueckt. */
.claim-support {
  padding: 0 0 1.5rem calc(0.55em + 0.75rem);
  min-width: 0;
}

.claim-beleg {
  font-size: 0.95rem;
  color: var(--neutral-400);
  margin: 0;
}

.claim-label {
  font-weight: 700;
  color: var(--neutral-400);
}

@media (prefers-reduced-motion: reduce) {
  .claim summary {
    transition: none;
  }

  .claim summary::before {
    transition: none;
  }

  /* E6: Tabellen-Zeilen-Hover (thematisch selbe Seite wie .claim) */
  table.subs tbody tr {
    transition: none;
  }
}

/* Filter-Chip-Leiste ueber der Zusagen-Liste: Text-Label-Buttons (kein Icon), nur per JS
   sichtbar (ZUSAGEN-FILTER-SCRIPT in trustcenter.html); ohne JS bleibt sie hidden und alle
   Claims sichtbar (progressive Enhancement, gleiche Bauart wie der Kalkulator auf preise). */
.claim-filters {
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
}

/* display:flex nur, wenn NICHT hidden: gleiche Spezifitaet wie die Basisregel oben, aber
   [hidden] braucht eine explizite Ausnahme, sonst gewinnt diese Klasse gegen die
   UA-Regel "[hidden]{display:none}" (beide 0,1,0, spaeter im Stylesheet gewinnt). Ohne
   das wuerde die Leiste auch ohne JS sichtbar bleiben. */
.claim-filters:not([hidden]) {
  display: flex;
}

.chip {
  appearance: none;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--neutral-400);
  background-color: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  transition:
    color 150ms ease,
    border-color 150ms ease;
}

.chip:hover {
  border-color: var(--electric-blue);
  color: var(--neutral-100);
}

.chip[aria-pressed='true'] {
  color: var(--electric-blue);
  border-color: var(--electric-blue);
}

@media (prefers-reduced-motion: reduce) {
  .chip {
    transition: none;
  }
}

/* --- Trustcenter: Architektur-Infografik (F058). Drei-Schritt-Fluss mit einer blauen
   Akzentlinie (Ihr Browser -> Cloudflare -> Anwendung), vier EU-Bausteine im bestehenden
   Linienraster (.grid.grid-4 + .card), Grundprinzip als Beschriftung, die zwei Ausnahmen als
   Fussnoten an den betroffenen Knoten. Kein zusaetzliches Orange: das Budget bleibt beim
   Claim-Flag. */
.arch-diagram {
  margin: 1.75rem 0 0;
}

.arch-flow {
  display: flex;
  flex-direction: column;
}

.arch-node {
  border: 1px solid var(--line);
  padding: 1.25rem 1.5rem;
}

.arch-node-title {
  font-weight: 700;
  color: var(--neutral-100);
  margin: 0 0 0.3rem;
}

.arch-meta {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--neutral-400);
  margin: 0;
}

/* Die eine blaue Flusslinie des Diagramms: mobil vertikal, ab md horizontal. */
.arch-connector {
  width: 1px;
  height: 1.5rem;
  background-color: var(--electric-blue);
  margin: 0 auto;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .arch-flow {
    flex-direction: row;
    align-items: stretch;
  }

  .arch-node {
    flex: 1;
  }

  .arch-connector {
    width: 1.5rem;
    height: 1px;
    align-self: center;
    margin: 0;
  }
}

.arch-principle {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--neutral-100);
}

.arch-principle-label {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--electric-blue);
  margin-right: 0.5rem;
}

.arch-note {
  color: var(--electric-blue);
  font-weight: 700;
}

.arch-footnotes {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--neutral-400);
}

.arch-footnotes li {
  margin: 0.35rem 0;
}

.arch-footnote-num {
  color: var(--electric-blue);
  font-weight: 700;
  margin-right: 0.35rem;
}

/* Inline-Code (technische Belege, z. B. mode=none, 127.0.0.1) */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--electric-blue);
  background-color: var(--petrol-medium);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.05rem 0.4rem;
}

/* --- Tabelle (breite Inhalte scrollen horizontal, Seite selbst nie) --- */
.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
}

/* E6: Scroll-Affordanz unter 768px. table.subs hat min-width:640px, unterhalb dieser
   Breite ist der Container praktisch immer horizontal scrollbar; die Ausblendung am
   rechten Rand macht das ohne zusaetzlichen Text sichtbar. */
@media (max-width: 767.98px) {
  .table-scroll {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }
}

table.subs {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--neutral-400);
}

@media (min-width: 768px) {
  table.subs {
    font-size: 0.85rem;
  }
}

table.subs th,
table.subs td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

table.subs th {
  color: var(--neutral-100);
  font-weight: 700;
  border-bottom: 1px solid var(--line-soft);
}

table.subs tbody tr:last-child td {
  border-bottom: none;
}

/* E6: Zeilen-Hover (Desktop) mit dem bestehenden Hover-Flaechen-Token, gleiche Farbe wie
   .card/.claim u.a. */
table.subs tbody tr {
  transition: background-color 150ms ease;
}

table.subs tbody tr:hover {
  background-color: var(--hover-fill);
}

/* Tarifkarten (Zellen des .grid.grid-2, siehe oben) */
.tier {
  display: flex;
  flex-direction: column;
}

.tier h3 {
  margin-top: 0;
  font-size: 1.3rem;
}

/* Preiszahl gross in Courier (Design-Konzept SS12: "Preiszahlen gross in Courier") */
.tier .price-note {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neutral-100);
  font-size: 1.3rem;
  margin: 0.4rem 0 1rem;
}

@media (min-width: 768px) {
  .tier .price-note {
    font-size: 1.6rem;
  }
}

.tier ul {
  margin-top: 0.4rem;
}

/* Tarifkarten-Ende (F059 Block C, T4.1): Entscheidungshilfe-Zeile + CTA. margin-top:auto auf
   .tier-hint schiebt beides an den Kartenboden, unabhaengig von der Listenlaenge der Karte
   darueber; .tier ist bereits display:flex/column (Basisregel weiter oben). Der Button behaelt
   seine Inhaltsbreite statt ueber align-items:stretch die volle Kartenbreite einzunehmen. */
.tier-hint {
  color: var(--neutral-400);
  font-size: 0.9rem;
  margin: auto 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.tier .btn-cta {
  align-self: flex-start;
}

/* Sektion #ve zweispaltig (F059 Block C, T4.2): links Beispielrechnung + Lesetext (Bestand,
   unveraendert), rechts der Tarif-Kalkulator. Beide Kinder bleiben direkte Kinder von
   .ve-columns (kein zusaetzlicher Wrapper um Beispielrechnung/Lesetext), die Spalten-
   Zuordnung kommt rein ueber Grid-Platzierung. Mobil (kein Grid-Template gesetzt) stapelt
   der Browser in Dokumentreihenfolge: Beispielrechnung, Lesetext, Kalkulator. */
.ve-columns {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .ve-columns {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 2.5rem;
  }

  .ve-columns > .calc-block {
    grid-column: 1;
    grid-row: 1;
  }

  .ve-columns > .reading {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
  }

  .ve-columns > .tarif-kalkulator {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* Tarif-Kalkulator (JS-Island): getoente Box wie Callout/Limits/Beispielrechnung. Ohne JS
   bleibt .calc-form hidden (Attribut im Markup), die Beispielrechnung links ist der Fallback. */
.tarif-kalkulator {
  background-color: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}

.tarif-kalkulator h3 {
  margin-top: 0;
}

.calc-form .field:last-of-type {
  margin-bottom: 0;
}

.calc-result {
  margin-top: 1.25rem;
}

.calc-result:empty {
  margin-top: 0;
}

.calc-result p {
  margin: 0 0 0.6rem;
}

.calc-result p:last-child {
  margin-bottom: 0;
}

.calc-result .btn-cta {
  margin-top: 0.5rem;
}

/* Empfehlung + empfohlene Preiszeile: NUR Blau/Weiss hervorgehoben (kein Orange, das
   Orange-Budget der Seite ist an den CTA-Hover-Slides bereits vergeben). */
.calc-empfehlung {
  color: var(--neutral-100);
  font-weight: 700;
  border-left: 3px solid var(--electric-blue);
  padding-left: 0.75rem;
}

.calc-preis {
  color: var(--neutral-400);
  font-family: var(--font-mono);
}

.calc-preis--empfohlen {
  color: var(--neutral-100);
  border-left: 3px solid var(--electric-blue);
  padding-left: 0.75rem;
}

.calc-note {
  color: var(--neutral-400);
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

/* Spezifikationsliste (funktionen.html): visuell zweispaltig ab md ueber CSS-Multicolumn statt
   Umbau auf dl/dt/dd, weil die Quelltexte keine Term/Beschreibung-Paare sind und ein Umbau neue
   Label-Texte erfordert haette (in dieser Welle nicht erlaubt). */
.spec-list {
  margin: 1.5rem 0 0;
}

@media (min-width: 768px) {
  .spec-list {
    columns: 2;
    column-gap: 2.5rem;
  }

  .spec-list li {
    break-inside: avoid;
  }
}

/* FAQ (E5): natives details/summary statt dauerhaft offener Liste, alle Eintraege
   starten geschlossen (kein open-Attribut im Markup, Browser-Default). Die Trennlinie
   wandert von .faq dt auf .faq details, der sichtbare Text bleibt byte-gleich, nur die
   umschliessenden Tags aendern sich (dt/dd -> summary/p). */
.faq details {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  margin-top: 1.75rem;
}

.faq details:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.faq summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--neutral-100);
  cursor: pointer;
  list-style: none;
}

/* Browser-eigenes Dreieck unterdruecken (drei Techniken fuer Cross-Browser-Deckung:
   list-style traegt in modernen Chromium/Firefox, ::-webkit-details-marker faengt
   aeltere WebKit-Engines ab, ::marker{content:''} ist der Standardweg fuer den Rest). */
.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::marker {
  content: '';
}

/* Eigener Aufklapp-Pfeil im CI (CSS-Dreieck statt Icon): zwei Kanten, die im
   Ruhezustand nach rechts zeigen und beim Oeffnen auf "nach unten" rotieren. */
.faq summary::before {
  content: '';
  flex-shrink: 0;
  width: 0.55em;
  height: 0.55em;
  margin-top: 0.35em;
  border-right: 2px solid var(--electric-blue);
  border-bottom: 2px solid var(--electric-blue);
  transform: rotate(-45deg);
  transition: transform 200ms ease;
}

.faq details[open] summary::before {
  transform: rotate(45deg);
}

.faq details > p {
  margin: 0.5rem 0 0;
  color: var(--neutral-100);
}

/* Stand-Datum: Meta, Courier */
.stand {
  font-family: var(--font-mono);
  color: var(--neutral-400);
  font-size: 0.8rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .stand {
    font-size: 0.85rem;
  }
}

/* Schematische Beispiel-Darstellung (keine echten Daten): Produkt-Visual, sitzt im
   Wide-Container (1400px) auf funktionen.html und traegt daher einen sichtbaren Rahmen. */
.mock {
  background-color: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 2rem 1.75rem;
  margin: 1.5rem 0 0.5rem;
}

@media (min-width: 768px) {
  .mock {
    padding: 2.5rem 3rem 2.25rem;
  }
}

.mock .mock-q {
  color: var(--neutral-400);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.mock .mock-a {
  color: var(--neutral-100);
  margin-bottom: 0.75rem;
}

/* Zitat-Beleg mit blauer Akzentlinie statt umrandeter Pille */
.mock .mock-cite {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--electric-blue);
  border: 0;
  border-left: 2px solid var(--electric-blue);
  background: transparent;
  border-radius: 0;
  padding: 0.1rem 0 0.1rem 0.6rem;
}

.mock-label {
  font-size: 0.82rem;
  color: var(--neutral-400);
  margin-top: 0.6rem;
}

/* --- Formular: dunkel, Inputs auf petrol-medium, Radius 0 --- */
.form {
  max-width: var(--maxw-form);
  margin-top: 1.75rem;
}

.field {
  margin-bottom: 1.25rem;
}

.field label {
  display: block;
  font-weight: 600;
  color: var(--neutral-100);
  margin-bottom: 0.35rem;
  transition: color 150ms ease;
}

/* E1: Label faerbt sich Electric Blue, sobald ein Feld innerhalb des .field-Blocks
   fokussiert ist (Eingabe oder Textarea). */
.field:focus-within label {
  color: var(--electric-blue);
}

.field .req {
  color: var(--electric-blue);
}

.field .hint {
  display: block;
  font-weight: 400;
  color: var(--neutral-400);
  font-size: 0.88rem;
  margin-top: 0.15rem;
}

.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--neutral-100);
  background-color: var(--petrol-medium);
  border: 1px solid var(--teal-700);
  border-radius: var(--radius);
  padding: 0.65rem 0.8rem;
  transition: border-color 150ms ease;
}

.field input:hover,
.field textarea:hover {
  border-color: var(--electric-blue);
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--electric-blue);
}

@media (prefers-reduced-motion: reduce) {
  .field input,
  .field textarea,
  .field label {
    transition: none;
  }
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-privacy {
  font-size: 0.92rem;
  color: var(--neutral-100);
  background-color: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0.5rem 0 1.4rem;
}

/* Honeypot, visuell und fuer Screenreader entfernt, aber im DOM vorhanden */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Fusszeile: 3-spaltig (Produkt-Links / Rechtliches / Wortmarke+Meta) --- */
.site-footer {
  background-color: var(--petrol-medium);
  border-top: 1px solid var(--line);
  color: var(--neutral-400);
  padding-block: 2.5rem;
  font-size: 0.95rem;
}

@media (min-width: 1024px) {
  .site-footer {
    padding-block: 4rem;
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.footer-col {
  min-width: 0;
}

.footer-brand {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--neutral-100); /* Fallback ohne background-clip:text-Unterstuetzung */
  margin-bottom: 0.85rem;
}

/* Verlauf Electric Blue zu Neon Orange ueber die gesamte Wortmarke (SS13, s. Nav .brand
   weiter oben). display:inline-block, damit die Box auf den Textinhalt schrumpft: sonst
   spannt sich der Verlauf ueber die volle (breitere) Grid-Spalte statt ueber den Text. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .footer-brand {
    display: inline-block;
    background: linear-gradient(to right, var(--electric-blue), var(--neon-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-note {
  color: var(--neutral-400);
  font-size: 0.85rem;
  margin: 0.9rem 0 0;
}

/* Wirkmittel-Wortmarke im Fuss: Herkunftszeichen, Mono-Variante fuer dunklen Grund.
   Mindestbreite 160px (logo.md), Schutzzone ueber grosszuegigen Aussenabstand im eigenen Block. */
.footer-mark {
  margin: 0;
}

.footer-mark img {
  display: block;
  width: 160px;
  height: auto;
}

/* --- Hilfsklassen --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.muted {
  color: var(--neutral-400);
}

.spaced {
  margin-top: 1.5rem;
}