/* ==========================================================================
   AVECTRA BASIS & KOMPONENTEN  ·  base.css
   ==========================================================================
   Setzt tokens.css voraus (vorher einbinden!). Design von Dennis vorgegeben
   (2026-07-14, Referenz: design-system/avectra-design-system.html).

   Enthält:
     1. Reset & Grundrhythmus
     2. Layout-Helfer (.container, .abschnitt)
     3. Header / Navigation / Wortmarke mit Logo
     4. Hero (dunkles Petrol-Panel)
     5. Feature-Karten
     6. Preiskarte
     7. Buttons
     8. Formular
     9. Badge & KI-Transparenz-Hinweis
    10. Akkordeon (FAQ)
    11. CTA-Sektion (dunkles Panel)
    12. Footer (dunkel)
    13. Barrierefreiheit (Fokus, reduzierte Bewegung)

   BAUREGELN FÜR BENEDICT:
   - Nur diese Klassen verwenden. Neue Komponenten zuerst hier ergänzen,
     nicht ad hoc im Seiten-<style> erfinden.
   - Klassen sind BEM-artig: .block, .block__element, .block--variante.
   - Abstände kommen aus den --raum-*-Tokens. Keine Magic Numbers.
   - Jede Seite: genau EIN <h1> (im Hero), Überschriften ohne Sprünge.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) RESET & GRUNDRHYTHMUS
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  background: var(--farbe-grund);
  color: var(--farbe-tinte);
  font-family: var(--schrift-text);
  font-size: var(--text-m);
  font-weight: var(--gewicht-text);
  line-height: var(--zeile-text);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }

::selection { background: var(--farbe-wash-rand); color: var(--farbe-tinte); }

/* Überschriften: Space Grotesk, schwer und eng — das Display-Gesicht. */
h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: var(--gewicht-display);
  letter-spacing: var(--laufweite-display);
  line-height: var(--zeile-eng);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); font-weight: var(--gewicht-mittel); }
h4 { font-size: var(--text-l);  font-weight: var(--gewicht-mittel); }

p { max-width: var(--breite-text); }

/* Links: Akzent ohne Unterstrich (Vorgabe), Unterstrich bei Hover/Fokus.
   Im Fließtext dadurch erkennbar: Akzent/Tinte-Unterschied + Hover-Linie. */
a {
  color: var(--farbe-akzent);
  text-decoration: none;
  transition: color var(--dauer-kurz) var(--kurve-standard);
}
a:hover, a:focus-visible { color: var(--farbe-akzent-stark); text-decoration: underline; text-underline-offset: 0.15em; }

code, kbd, pre {
  font-family: var(--schrift-mono);
  font-size: 0.9em;
}
pre {
  background: var(--farbe-flaeche-tief);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  padding: var(--raum-4);
  overflow-x: auto;
}

ul, ol { padding-left: 1.25em; }

/* Die Kennung (Eyebrow): Versalien in Space Grotesk über Abschnittstiteln.
   Immer klein, gesperrt, in Akzent — nie als Fließtext. */
.kennung {
  font-family: var(--schrift-display);
  font-size: var(--text-xs);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-versal);
  text-transform: uppercase;
  color: var(--farbe-akzent);
}
.kennung--akzent { color: var(--farbe-akzent); } /* Alias (Alt-Bestand) */

/* --------------------------------------------------------------------------
   2) LAYOUT-HELFER
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--raum-6);
}

/* Seitenabschnitt: 96-px-Rhythmus (2 × raum-7 zwischen Nachbarn). */
.abschnitt { padding-block: var(--raum-7); }
.abschnitt--kompakt { padding-block: var(--raum-5); }

/* Abgesetztes Band (voller Seitenbreite): sanfte Fläche mit Haarlinien. */
.abschnitt--flaeche {
  background: var(--farbe-flaeche-sanft);
  border-top: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
}

/* Abschnittskopf: Kennung + Überschrift + optionaler Lead. */
.abschnitt__kopf { margin-bottom: var(--raum-6); }
.abschnitt__kopf > .kennung { display: block; margin-bottom: var(--raum-3); }
.abschnitt__lead {
  margin-top: var(--raum-3);
  font-size: var(--text-l);
  color: var(--farbe-tinte-sanft);
}

/* Alt-Bestand: die „Messlinie" des Vorgänger-Designs. Jetzt eine ruhige
   Haarlinie — vorhandene Seiten brechen nicht, Neues nutzt sie nicht mehr. */
.messlinie { height: 0; border: 0; border-top: 1px solid var(--farbe-linie); background: none; }

/* --------------------------------------------------------------------------
   3) HEADER / NAVIGATION
   Sticky mit Milchglas-Effekt, Haarlinie unten, 72px hoch.
   -------------------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--farbe-grund) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--farbe-linie);
}
.kopf__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-6);
  min-height: 4.5rem; /* 72px */
}

/* Wortmarke: lowercase in Space Grotesk 700, davor die Logo-Kachel —
   abgerundetes Quadrat im Petrol-Verlauf mit weißem Pfeil nach rechts oben. */
.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-3);
  font-family: var(--schrift-display);
  font-size: 1.375rem; /* 22px */
  font-weight: var(--gewicht-display);
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--farbe-tinte);
  text-decoration: none;
}
.marke:hover, .marke:focus-visible { color: var(--farbe-tinte); text-decoration: none; }
.marke::before {
  content: "";
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-s);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 19L19 5M19 5H9M19 5V15' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 18px 18px no-repeat,
    var(--verlauf-logo);
  box-shadow: var(--schatten-s);
}
/* Zusatz hinter dem Produktnamen, z. B. „von avectra" */
.marke__zusatz {
  font-family: var(--schrift-text);
  font-size: var(--text-s);
  font-weight: var(--gewicht-text);
  letter-spacing: 0;
  color: var(--farbe-tinte-sanft);
}

.nav { display: flex; align-items: center; gap: var(--raum-5); flex-wrap: wrap; }
.nav__link {
  font-size: var(--text-s);
  font-weight: var(--gewicht-mittel);
  color: var(--farbe-tinte-sanft);
  text-decoration: none;
}
.nav__link:hover, .nav__link:focus-visible { color: var(--farbe-akzent); text-decoration: none; }

/* --------------------------------------------------------------------------
   4) HERO
   Die These der Seite als dunkles Petrol-Panel: Verlauf, große Rundung,
   dezenter Marken-Glow. Markup wie gehabt: .hero > .container > Inhalt.
   -------------------------------------------------------------------------- */
.hero {
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding: var(--raum-6) var(--raum-6) 0;
}
.hero > .container {
  position: relative;
  overflow: hidden;
  max-width: none;
  padding: clamp(var(--raum-6), 5vw, var(--raum-8)) clamp(var(--raum-5), 4vw, 3.5rem);
  background: var(--verlauf-dunkel);
  border-radius: var(--radius-2xl);
  color: var(--farbe-dunkel-text);
  box-shadow: var(--schatten-xl);
}
.hero > .container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--schein-marke);
  pointer-events: none;
}
.hero > .container > * { position: relative; }

/* Kennung im Hero: Glas-Pille mit Marken-Punkt. */
.hero__kennung {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  margin-bottom: var(--raum-5);
  padding: var(--raum-1) var(--raum-3);
  background: var(--farbe-dunkel-glas);
  border: 1px solid var(--farbe-dunkel-linie);
  border-radius: var(--radius-voll);
  color: var(--farbe-dunkel-akzent-hell);
  letter-spacing: 0.04em;
}
.hero__kennung::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-voll);
  background: var(--farbe-marke);
}

.hero__titel { max-width: 18ch; }
/* Optionales Highlight-Wort in der Hero-Zeile */
.hero__titel em, .hero__highlight { font-style: normal; color: var(--farbe-dunkel-akzent); }
.hero__lead {
  margin-top: var(--raum-4);
  max-width: 46ch;
  font-size: var(--text-l);
  color: var(--farbe-dunkel-text-sanft);
}
.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  margin-top: var(--raum-6);
}
/* Auf dem dunklen Panel: Primär-CTA mit Petrol-Glow, Sekundär als Glas. */
.hero .btn--primaer { box-shadow: var(--schatten-cta); }
.hero .btn--sekundaer {
  background: var(--farbe-dunkel-glas);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--farbe-dunkel-text);
}
.hero .btn--sekundaer:hover { background: rgba(255, 255, 255, 0.16); color: var(--farbe-dunkel-text); border-color: rgba(255, 255, 255, 0.3); }
/* Belege-Zeile unter den Aktionen (nur echte Aussagen!) */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-5);
  margin-top: var(--raum-6);
  font-size: var(--text-xs);
  color: var(--farbe-dunkel-text-sanft);
}
.hero__meta > * { display: inline-flex; align-items: center; gap: var(--raum-2); }

/* --------------------------------------------------------------------------
   5) FEATURE-KARTEN
   3 Spalten auf Desktop, 1 auf Mobil. Haarlinie + 18-px-Radius, Symbol-
   Kachel in Petrol-Wash. Kein Schatten im Ruhezustand.
   -------------------------------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--raum-5);
}
.feature {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-l);
  padding: var(--raum-6);
}
/* Symbol-Kachel (SVG-Icon hineinlegen, Strichfarbe currentColor). */
.feature__symbol {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--raum-4);
  border-radius: var(--radius-m);
  background: var(--farbe-akzent-wash);
  border: 1px solid var(--farbe-wash-rand);
  color: var(--farbe-akzent-stark);
}
.feature__titel { font-size: var(--text-xl); margin-bottom: var(--raum-2); }
.feature__text { font-size: var(--text-s); color: var(--farbe-tinte-sanft); }
/* Optionale Kennzeile über dem Titel (z. B. Modul-Schlüssel) */
.feature__schluessel {
  display: block;
  margin-bottom: var(--raum-3);
  font-family: var(--schrift-display);
  font-size: var(--text-xs);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-versal);
  text-transform: uppercase;
  color: var(--farbe-akzent);
}

/* --------------------------------------------------------------------------
   6) PREISKARTE
   Wenige, klare Preise. Preis groß in Space Grotesk. Höchstens 3 Karten.
   -------------------------------------------------------------------------- */
.preise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--raum-5);
  align-items: start;
}
.preiskarte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-l);
  padding: var(--raum-6);
}
/* Empfohlener Plan: Akzentrand + sanfter Schatten. Höchstens EINE Karte. */
.preiskarte--empfohlen {
  border-color: var(--farbe-akzent);
  box-shadow: var(--schatten-m);
}
.preiskarte__plan {
  font-family: var(--schrift-display);
  font-size: var(--text-xs);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-versal);
  text-transform: uppercase;
  color: var(--farbe-tinte-sanft);
}
.preiskarte__preis {
  font-family: var(--schrift-display);
  font-size: var(--text-2xl);
  font-weight: var(--gewicht-display);
  letter-spacing: -0.02em;
  margin-top: var(--raum-3);
}
.preiskarte__einheit {
  font-family: var(--schrift-text);
  font-size: var(--text-s);
  font-weight: var(--gewicht-text);
  letter-spacing: 0;
  color: var(--farbe-tinte-sanft);
}
.preiskarte__leistungen {
  list-style: none;
  padding: 0;
  margin-block: var(--raum-5);
  border-top: 1px solid var(--farbe-linie);
}
.preiskarte__leistungen li {
  padding-block: var(--raum-3);
  border-bottom: 1px solid var(--farbe-linie);
  font-size: var(--text-s);
}
/* Haken vor jeder Leistung — reines CSS, kein Icon-Font. */
.preiskarte__leistungen li::before {
  content: "✓";
  color: var(--farbe-akzent);
  font-weight: var(--gewicht-display);
  margin-right: var(--raum-2);
}
.preiskarte .btn { width: 100%; }

/* --------------------------------------------------------------------------
   7) BUTTONS
   12-px-Radius, Gewicht 600. Beschriftung sagt, was passiert
   („Zugang anfragen", nicht „Absenden").
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  padding: var(--raum-3) var(--raum-5);
  border-radius: var(--radius-m);
  border: 1px solid transparent;
  font-family: var(--schrift-text);
  font-size: var(--text-s);
  font-weight: var(--gewicht-mittel);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dauer-kurz) var(--kurve-standard),
    border-color     var(--dauer-kurz) var(--kurve-standard),
    color            var(--dauer-kurz) var(--kurve-standard),
    box-shadow       var(--dauer-kurz) var(--kurve-standard);
}
.btn:hover, .btn:focus-visible { text-decoration: none; }
.btn--primaer {
  background: var(--farbe-akzent);
  color: var(--farbe-invers);
  box-shadow: var(--schatten-s);
}
.btn--primaer:hover { background: var(--farbe-akzent-stark); color: var(--farbe-invers); }
.btn--sekundaer {
  background: var(--farbe-flaeche-tief);
  color: var(--farbe-tinte);
  border-color: var(--farbe-linie);
}
.btn--sekundaer:hover {
  border-color: var(--farbe-rand-feld);
  color: var(--farbe-tinte);
}
/* Umriss-Variante (dritte Priorität, sparsam) */
.btn--umriss {
  background: transparent;
  color: var(--farbe-akzent-stark);
  border-color: var(--farbe-marke-hell);
}
.btn--umriss:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
/* Heller Button für dunkle Panels (CTA): Weiß mit Ink-Text. */
.btn--hell {
  background: var(--farbe-dunkel-text);
  color: var(--farbe-dunkel);
}
.btn--hell:hover { background: var(--farbe-dunkel-akzent-hell); color: var(--farbe-dunkel); }
.btn[disabled], .btn--inaktiv {
  background: var(--farbe-flaeche-tief);
  color: var(--farbe-tinte-sanft);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   8) FORMULAR (Warteliste / Kontakt)
   Sichtbare Labels sind Pflicht. Fehler in --farbe-fehler MIT Text,
   nie nur Farbe.
   -------------------------------------------------------------------------- */
.formular { max-width: 34rem; }
.formular__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
}
.feld { flex: 1 1 14rem; }
.feld__label {
  display: block;
  margin-bottom: var(--raum-2);
  font-size: var(--text-s);
  font-weight: var(--gewicht-mittel);
}
.feld__eingabe {
  width: 100%;
  padding: var(--raum-3) var(--raum-4);
  background: var(--farbe-flaeche);
  color: var(--farbe-tinte);
  border: 1.5px solid var(--farbe-rand-feld); /* ≥3:1 — Pflichtkontrast für UI */
  border-radius: var(--radius-m);
  font-family: var(--schrift-text);
  font-size: var(--text-s);
  transition: border-color var(--dauer-kurz) var(--kurve-standard);
}
.feld__eingabe::placeholder { color: var(--farbe-tinte-sanft); }
.feld__eingabe:focus-visible {
  outline: none;
  border-color: var(--farbe-akzent);
  box-shadow: var(--fokus-ring);
}
.feld__eingabe--fehler { border-color: var(--farbe-fehler); }
/* Button in der Formularzeile sitzt auf der Grundlinie des Feldes */
.formular__zeile .btn { align-self: flex-end; }
.feld__fehler {
  display: block;
  margin-top: var(--raum-2);
  font-size: var(--text-xs);
  color: var(--farbe-fehler);
}
.formular__hinweis {
  margin-top: var(--raum-3);
  font-size: var(--text-xs);
  color: var(--farbe-tinte-sanft);
}

/* --------------------------------------------------------------------------
   9) BADGE & KI-TRANSPARENZ-HINWEIS
   Badges sind Pillen mit Statuspunkt. Der KI-Hinweis ist PFLICHT auf jeder
   Produktseite (siehe STYLEGUIDE.md) — Transparenz ist Teil der Marke.
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-1) var(--raum-3);
  border-radius: var(--radius-voll);
  background: var(--farbe-akzent-wash);
  border: 1px solid var(--farbe-wash-rand);
  font-size: var(--text-xs);
  font-weight: var(--gewicht-mittel);
  color: var(--farbe-akzent-stark);
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-voll);
  background: var(--farbe-marke);
}
.badge--neutral {
  background: var(--farbe-flaeche-tief);
  border-color: transparent;
  color: var(--farbe-tinte-sanft);
}
.badge--neutral::before { display: none; }
.badge--dunkel {
  background: var(--farbe-dunkel);
  border-color: transparent;
  color: var(--farbe-dunkel-text);
}
.badge--dunkel::before { background: var(--farbe-marke-hell); }
.badge--akzent { /* Alias (Alt-Bestand) — wie Standard-Badge */
  background: var(--farbe-akzent-wash);
  color: var(--farbe-akzent-stark);
}

/* Der KI-Transparenz-Baustein (Block-Variante für Fußbereich/Abschnitt) */
.ki-hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  max-width: var(--breite-text);
  padding: var(--raum-4) var(--raum-5);
  background: var(--farbe-akzent-wash);
  border: 1px solid var(--farbe-wash-rand);
  border-radius: var(--radius-m);
  font-size: var(--text-s);
  color: var(--farbe-tinte);
}
/* Statuspunkt: „System aktiv" — dezent, ohne Animation. */
.ki-hinweis::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.45em;
  border-radius: var(--radius-voll);
  background: var(--farbe-marke);
}
.ki-hinweis__titel {
  display: block;
  margin-bottom: var(--raum-1);
  font-family: var(--schrift-display);
  font-size: var(--text-xs);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-versal);
  text-transform: uppercase;
  color: var(--farbe-akzent-stark);
}

/* --------------------------------------------------------------------------
   10) AKKORDEON (FAQ)
   Natives <details>/<summary> — kein JavaScript. Haarlinien-Zeilen,
   Plus-Punkt in Petrol-Wash, dreht sich beim Öffnen.
   Markup:
     <div class="akkordeon">
       <details class="akkordeon__punkt">
         <summary class="akkordeon__frage">Frage?</summary>
         <p class="akkordeon__antwort">Antwort.</p>
       </details>
     </div>
   -------------------------------------------------------------------------- */
.akkordeon { border-top: 1px solid var(--farbe-linie); }
.akkordeon__punkt { border-bottom: 1px solid var(--farbe-linie); }
.akkordeon__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  padding: var(--raum-5) var(--raum-1);
  font-weight: var(--gewicht-mittel);
  font-size: var(--text-l);
  cursor: pointer;
  list-style: none; /* Standard-Dreieck ausblenden */
}
.akkordeon__frage::-webkit-details-marker { display: none; }
.akkordeon__frage::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--radius-voll);
  background: var(--farbe-akzent-wash);
  color: var(--farbe-akzent-stark);
  font-size: var(--text-l);
  font-weight: var(--gewicht-mittel);
  line-height: 1;
  transition: transform var(--dauer-mittel) var(--kurve-standard);
}
.akkordeon__punkt[open] > .akkordeon__frage::after { transform: rotate(45deg); }
.akkordeon__antwort {
  padding: 0 var(--raum-1) var(--raum-5);
  color: var(--farbe-tinte-sanft);
  font-size: var(--text-s);
}

/* --------------------------------------------------------------------------
   11) CTA-SEKTION
   Dunkles Petrol-Panel mit Verlauf, zentriert. Markup wie Hero:
   .cta > .container > (.cta__titel, .cta__lead, .cta__aktionen)
   -------------------------------------------------------------------------- */
.cta {
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding: var(--raum-7) var(--raum-6) 0;
}
.cta > .container {
  position: relative;
  overflow: hidden;
  max-width: none;
  padding: clamp(var(--raum-7), 6vw, 4.5rem) clamp(var(--raum-5), 4vw, 3.5rem);
  background: var(--verlauf-cta);
  border-radius: var(--radius-2xl);
  color: var(--farbe-dunkel-text);
  text-align: center;
  box-shadow: var(--schatten-xl);
}
.cta > .container::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  right: -1.25rem;
  width: 15rem;
  height: 15rem;
  border-radius: var(--radius-voll);
  background: var(--schein-deko);
  pointer-events: none;
}
.cta > .container > * { position: relative; }
.cta__titel { max-width: 20ch; margin-inline: auto; }
.cta__lead {
  max-width: 52ch;
  margin: var(--raum-4) auto 0;
  font-size: var(--text-l);
  color: var(--farbe-dunkel-text-sanft);
}
.cta__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-3);
  margin-top: var(--raum-6);
}
.cta .btn--sekundaer {
  background: var(--farbe-dunkel-glas);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--farbe-dunkel-text);
}
.cta .btn--sekundaer:hover { background: rgba(255, 255, 255, 0.16); color: var(--farbe-dunkel-text); }

/* --------------------------------------------------------------------------
   12) FOOTER
   Dunkler Ink-Footer in beiden Themes. Pflicht: Impressum + Datenschutz.
   -------------------------------------------------------------------------- */
.fuss {
  margin-top: var(--raum-9);
  background: var(--farbe-dunkel);
  color: var(--farbe-dunkel-text-sanft);
  padding-block: var(--raum-8) var(--raum-7);
  font-size: var(--text-s);
}
.fuss a { color: inherit; }
.fuss a:hover, .fuss a:focus-visible { color: var(--farbe-dunkel-text); }
.fuss .marke { color: var(--farbe-dunkel-text); }
.fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--raum-6);
  align-items: flex-start;
}
.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-4);
  list-style: none;
  padding: 0;
}
.fuss__rechtstraeger { margin-top: var(--raum-3); font-size: var(--text-xs); }
/* Untere Leiste (Copyright): Haarlinie in Weiß-Transparenz. */
.fuss__leiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--raum-3);
  margin-top: var(--raum-7);
  padding-top: var(--raum-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   13) BARRIEREFREIHEIT
   -------------------------------------------------------------------------- */
/* Sichtbarer Tastatur-Fokus überall (Maus-Klicks bleiben ringfrei). */
:focus-visible {
  outline: none;
  box-shadow: var(--fokus-ring);
  border-radius: var(--radius-s);
}

/* Reduzierte Bewegung respektieren — Pflicht, nicht optional. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Nur für Screenreader sichtbar (z. B. Skip-Links, Zusatzkontext). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}