/* ============================================================================
   styles.css — Verkaufsseite „Soufflr" (W4 Frontend Developer)

   Eine Datei, kein Build-Step, kein externer Host, keine Font-Datei.
   Token-Werte: W3 design-system.md §1 (drei Werte aus §11 ersetzt die Startwerte
   von css-tokens.md: surface-2 warm, <pre>-Grenze border-strong, accent-active).
   Kontrast-Nachweis: W3 kontrast.md (62 Paare, 0 offen).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------------- */
:root {
  /* --- Flaechen (3 Ebenen: Grund -> Karte -> warmes Studio-Panel) --- */
  --color-bg:            #0B0F14;  /* Seitengrund, Ink/Navy */
  --color-surface:       #141A22;  /* Karten, Panels, FAQ-Zeilen */
  --color-surface-2:     #221C16;  /* warmes Studio-Panel: pre, code (W3 §11.1) */

  /* --- Text --- */
  --color-text:          #F2F5F7;  /* Fliessext, Ueberschriften */
  --color-text-muted:    #A9B4C0;  /* Sekundaertext, Hinweis- und Mikro-Zeilen */

  /* --- Akzent (warmes Amber) --- */
  --color-accent:        #E8944A;
  --color-accent-hover:  #F2A65E;
  --color-accent-active: #C96C1A;  /* gedrueckt :active (W3 §11.4) */
  --color-accent-ink:    #14100C;  /* Text AUF der Akzentflaeche */

  /* --- Grenzen --- */
  --color-border:        #2A3441;  /* dekorativ: Kartenrahmen, Header-/Footer-Linie */
  --color-border-strong: #64758A;  /* funktional: pre, details[open], CTA-Textlink, Signalkante */

  /* --- Fokus: Doppelring (W3 §8 / kontrast.md §8.1) --- */
  --color-focus:         #FFFFFF;  /* aeusserer Ring */
  --color-focus-inner:   #0B0F14;  /* innerer Ring auf heller Fuellung */
  --focus-ring-width:    3px;
  --focus-ring-offset:   2px;
  --focus-inner-width:   2px;

  /* --- Abstaende: 4-px-Raster, acht Werte, keine Zwischenwerte --- */
  --space-1:  0.25rem; --space-2:  0.5rem;  --space-3:  0.75rem; --space-4:  1rem;
  --space-6:  1.5rem;  --space-8:  2rem;    --space-12: 3rem;    --space-16: 4rem;

  /* --- Radien --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* --- Typografie: System-Stack, keine Webfont-Datei, keine Font-URL --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;
  --leading-tight: 1.2;
  --leading-base:  1.6;
  --text-sm:   0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --text-2xl:  clamp(1.75rem, 1.2rem + 2.4vw, 3rem);

  /* --- Motion: alles <= 200 ms, nur transform/opacity/Farben --- */
  --motion-fast:     120ms;
  --motion-base:     180ms;
  --motion-max:      200ms;   /* OBERGRENZE, keine Ausnahme */
  --motion-none:     0.001ms;
  --easing-standard: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* --- Masse --- */
  --measure:       68ch;      /* Lesebreite 68 Zeichen (Zielband 60-75) */
  --container-max: 72rem;
  --target-min:    44px;      /* Touch-Ziel-Minimum (WCAG 2.5.5) */
  --hairline:      1px;

  /* --- Elevation: sparsam --- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* --- Anker-Versatz (W6 nachgezogen, im Browser gemessen; ia.md §8.3) ---
     Unter 768 px ist der Header NICHT klebend (W6-Punkt 1) — es gibt nichts zu unterlaufen,
     deswegen nur Atemluft. Ab 768 px bleibt er klebend: Wert = neu gemessene Header-Aussenhoehe
     + 16 px Reserve. Vorher/Nachher-Messwerte stehen in IMPLEMENTATION.md §10. */
  --anchor-offset: var(--space-4);
}
/* Breakpoints als Zahlen (Custom Properties sind in @media nicht nutzbar):
   360 Untergrenze · 768 = 2 Spalten · 1024 = 3 Spalten · 1440 Container-Maximum · 2560 zentriert. */

/* Anker-Versatz je Header-Hoehe (W6 nachgemessen: neue Header-Aussenhoehe + 16 px Reserve) */
@media (min-width: 768px)  { :root { --anchor-offset: 11.75rem; } }   /* Header 169,8 px */
@media (min-width: 1024px) { :root { --anchor-offset: 8.75rem; } }    /* Header 122,6-123,8 px */

/* ----------------------------------------------------------------------------
   2. Basis
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;   /* wird von der Reduced-Motion-Regel auf auto gestellt */
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
}

h1, h2, h3 {
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  text-wrap: balance;
  margin-block: 0 var(--space-4);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); margin-block-start: var(--space-12); }
h3 { font-size: var(--text-lg); }

p, li, summary, dd, dt { max-width: var(--measure); }
p { margin-block: 0 var(--space-4); }
ul, ol { padding-inline-start: var(--space-6); }

a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent-hover); text-decoration-thickness: 2px; }
a:active { color: var(--color-accent-active); }

strong { font-weight: var(--font-weight-bold); }

/* --- Layout --- */
.wrap { width: 100%; max-width: var(--container-max); margin-inline: auto; }

main, header, footer { padding-inline: var(--space-4); }
@media (min-width: 1024px) { main, header, footer { padding-inline: var(--space-6); } }

section { margin-block-end: var(--space-12); }
@media (min-width: 1024px) { section { margin-block-end: var(--space-16); } }

/* Ankerziele landen nicht unter dem klebenden Header (ia.md §8.3) */
section[id], #main, #impressum, #datenschutz, #top {
  scroll-margin-block-start: var(--anchor-offset);
}

/* ----------------------------------------------------------------------------
   3. Skip-Link: erstes fokussierbares Element, per clip-path verborgen (nie display:none)
   ---------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-2);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.skip-link:not(:focus):not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   4. Fokus-System (W3 §8) — Doppelring; der Fokusindikator wird nie abgeschaltet
   ---------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);   /* 3px #FFFFFF */
  outline-offset: var(--focus-ring-offset);                    /* 2px */
}
/* Auf heller Fuellung (Akzent) traegt der innere dunkle Ring die 3:1-Anforderung:
   weisser Ring allein waere auf #E8944A nur 2,40:1 (kontrast.md F04/F05, korrigiert F06-F08). */
.cta--primary:focus-visible,
.skip-link:focus-visible {
  box-shadow: inset 0 0 0 var(--focus-inner-width) var(--color-focus-inner);
}

/* ----------------------------------------------------------------------------
   5. Header (sticky, ohne Layout-Shift)
   ---------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--color-bg);
  border-block-end: var(--hairline) solid var(--color-border);
}
/* Kompaktes Raster: DOM-Reihenfolge = visuelle Reihenfolge (kein order, kein Umbau).
   Zeilen mobil: Wortmarke · Navigation · Handlungen · Offenheits-Zeile. */
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "brandline brandline"
    "nav       nav"
    "ctas      ctas";
  align-items: center;
  column-gap: var(--space-2);
  row-gap: var(--space-2);
  padding-block: var(--space-2);
}
.site-header__brandline {
  grid-area: brandline;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}
.site-nav { grid-area: nav; }
.site-header__ctas { grid-area: ctas; margin-block: 0; }
/* Kein `.site-header__note` mehr: die Offenheits-Zeile sitzt seit W6 in der Hero-Sektion (Punkt 1). */

/* Tablet: Wortmarke und Navigation teilen sich die erste Zeile (DOM-Reihenfolge bleibt). */
@media (min-width: 768px) {
  .site-header__inner {
    grid-template-areas:
      "brandline nav"
      "ctas      ctas";
  }
}
/* Desktop: eine Zeile fuer Wortmarke, Navigation und Handlungen. */
@media (min-width: 1024px) {
  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
  }
  .site-header__brandline { flex: 0 1 auto; }
  .site-nav { flex: 0 0 auto; }
  .site-header__ctas { flex: 0 0 auto; }
}
.brand {
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}
.brand:hover, .brand:focus-visible { text-decoration: underline; }
.site-header__claim { color: var(--color-text-muted); font-size: var(--text-sm); }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding-inline: var(--space-2);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;   /* Navigation umbricht zwischen Links, nie innerhalb eines Labels */
}
.site-nav a:hover, .site-nav a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;   /* Hover ist Verstaerkung, nicht Zugang; Fokus hat dasselbe Signal */
}
@media (min-width: 768px) { .site-nav a { padding-inline: var(--space-2); } }
@media (min-width: 1024px) { .site-nav a { padding-inline: var(--space-3); } }
/* Schmale Geraete (< 768 px) — W6-Punkte 1, 2 (und Voraussetzung fuer Punkt 5).
   Der Header ist hier NICHT klebend (F-1/F-2): bei 320 px war er 378 px hoch (= 79 % des
   Sichtfensters) und hat das Ankerziel #impressum vollstaendig verdeckt. Ohne Klebung kann kein
   Ankerziel mehr hinter dem Header liegen. Zusaetzlich verdichtet: Innenabstand, Zeilenabstand und
   die CTA-Hoehe im Header — sonst waere die Zielhoehe nicht erreichbar. Die vier Anker-Labels
   bleiben in einer bzw. zwei Zeilen (kein Burger-Menue, kein Off-Canvas, kein Informationsverlust).
   Im Header ist genau EINE CTA-Variante sichtbar: die per data-cta-variant aktive (Punkt 2).
   Die Ausblendung ist reines CSS, nicht .js-abhaengig — sie wirkt ohne JavaScript genauso, und der
   zweite Weg bleibt in Hero, Preisen, Abschluss und Fusszeilen-Navigation unveraendert erreichbar. */
@media (max-width: 767px) {
  .site-header { position: static; }
  .site-header__inner { padding-block: var(--space-1); row-gap: var(--space-1); }
  .site-nav ul { gap: 0; }
  .site-nav a { font-size: var(--text-sm); padding-inline: var(--space-1); }
  /* Nur im Header: die Handlungsflaeche wird 44 px hoch (statt 51,6 px aus dem Basis-Padding).
     Der Fokusring und die Zielgroesse >= 44 x 44 px bleiben unberuehrt. */
  .site-header .cta { padding-block: var(--space-2); }
  .site-header .cta-group { gap: var(--space-2); }
  html[data-cta-variant="store"] .site-header__ctas .cta[data-cta-target="waitlist"],
  html[data-cta-variant="waitlist"] .site-header__ctas .cta[data-cta-target="store"] { display: none; }
}

/* 360-374 px: die vier Anker-Labels brauchen mit 4 px Innenabstand 314 px, verfuegbar sind 313 px
   (gemessen) — es fehlen 1,3 px. Ohne Label-Kuerzung und ohne kleinere Schrift geht das nur ueber den
   Innenabstand; die Zielgroesse bleibt erhalten, weil jeder Link auf min-width 44 px gehalten und die
   Reihe gleichmaessig verteilt wird. Ab 375 px passen die Labels ohne diese Regel in eine Zeile. */
@media (max-width: 374px) {
  .site-nav a { padding-inline: 0; min-width: var(--target-min); }
  .site-nav ul { justify-content: space-between; }
}

/* 320-359 px: die Handlungsflaeche „App holen (Android) · Link folgt" ist 276 px breit und bricht im
   273 px breiten Raster auf zwei Zeilen (gemessen: 77 px statt 44 px Hoehe). Der geringere Innenabstand
   haelt ALLE Handlungsflaechen einzeilig und die Zielhoehe bei 44 px (kein Text-, kein Farbwechsel).
   Der Selektor `.cta-group .cta` hat hoehere Spezifitaet als die Basisregel `.cta`; ohne das wuerde
   deren `padding` diese Regel ueberschreiben. */
@media (max-width: 359px) {
  .cta-group .cta { padding-inline: var(--space-3); }
}

/* ----------------------------------------------------------------------------
   6. CTA — genau EIN Umschalt-Attribut, nichts wird ausgeblendet
   ---------------------------------------------------------------------------- */
.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block: var(--space-4);
}
.site-header .cta-group { margin-block: 0; }

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--easing-standard),
              color var(--motion-fast) var(--easing-standard),
              border-color var(--motion-fast) var(--easing-standard),
              transform var(--motion-fast) var(--easing-standard);
}
@media (min-width: 768px) { .cta { padding-inline: var(--space-4); } }

.cta--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: var(--hairline) solid var(--color-accent);
  text-decoration: none;
}
.cta--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-ink);
  transform: translateY(-1px);
}
.cta--primary:active {
  background: var(--color-accent-active);
  border-color: var(--color-accent-active);
  color: var(--color-accent-ink);
  transform: translateY(0);
}
.cta--text {
  background: transparent;
  color: var(--color-accent);
  border: var(--hairline) solid var(--color-border-strong);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.cta--text:hover { color: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.cta--text:active { color: var(--color-accent-active); border-color: var(--color-accent-active); }

/* W6-Punkt 5: sichtbare Mikro-Ergaenzung an der Store-Handlung („· Link folgt"). Sie nimmt dem
   Label „App holen (Android)" den Sofort-Download-Klang — kein neuer Claim, kein neues Ziel.
   Die Farbe erbt bewusst: Akzent-Tinte auf Akzentflaeche = 7,90:1, Akzent auf Seitengrund = 8,02:1
   (beide ueber 4,5:1, also auch bei 14 px Text ausreichend). */
.cta__micro {
  margin-inline-start: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
}

/* Umschaltung: html[data-cta-variant="store"|"waitlist"]. Beide Handlungen bleiben im DOM,
   fokussierbar und lesbar; gewichtet wird nur die Rolle (Fuellung + Unterstreichung). */
html[data-cta-variant="store"] .cta[data-cta-target="store"] {
  background: var(--color-accent); color: var(--color-accent-ink);
  border-color: var(--color-accent); text-decoration: none;
}
html[data-cta-variant="store"] .cta[data-cta-target="waitlist"] {
  background: transparent; color: var(--color-accent);
  border-color: var(--color-border-strong); text-decoration: underline;
}
html[data-cta-variant="waitlist"] .cta[data-cta-target="waitlist"] {
  background: var(--color-accent); color: var(--color-accent-ink);
  border-color: var(--color-accent); text-decoration: none;
}
html[data-cta-variant="waitlist"] .cta[data-cta-target="store"] {
  background: transparent; color: var(--color-accent);
  border-color: var(--color-border-strong); text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   7. Karten, Panels, Raster
   ---------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;   /* Mobile-first */
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}
@media (min-width: 768px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card, .panel {
  background: var(--color-surface);
  border: var(--hairline) solid var(--color-border);   /* dekorativ (1,39:1) — traegt keine Bedeutung */
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
}
.card > :last-child, .panel > :last-child { margin-block-end: 0; }
.card h3 { color: var(--color-text); }

.two-col {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-block-start: var(--space-8);
}
@media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; } }

.fact-list, .open-list { margin-block: 0; }
.fact-list li, .open-list li { margin-block-end: var(--space-2); }

/* Offene Punkte: linke Signalkante (border-strong, 3,71:1) — Bedeutung nicht nur ueber Farbe,
   sondern ueber Kante + eigene Spaltenueberschrift + sichtbare Zeichenkette [PLATZHALTER: ...] (W3 §10). */
.open-list {
  list-style: none;
  padding-inline-start: 0;
}
.open-list li {
  border-inline-start: 3px solid var(--color-border-strong);
  padding-inline-start: var(--space-3);
}

/* Begriffshilfe in Sektion 4 */
.glossary { max-width: var(--measure); margin-block: var(--space-6); }
.glossary dt { font-weight: var(--font-weight-medium); }
.glossary dd { margin: 0 0 var(--space-2); color: var(--color-text-muted); }

/* ----------------------------------------------------------------------------
   8. Codebloecke: woertliche Zeichenketten, byte-treu (kein Umbruch)
   ---------------------------------------------------------------------------- */
code, pre, kbd, samp { font-family: var(--font-mono); }

pre {
  background: var(--color-surface-2);                  /* warmes Studio-Panel */
  border: var(--hairline) solid var(--color-border-strong);  /* funktional (W3 §11.2) */
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-block: 0 var(--space-4);
  overflow-x: auto;                                    /* nur der Block scrollt, nie die Seite */
  white-space: pre;
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--color-text);
  scrollbar-color: var(--color-border-strong) transparent;
}
code {
  font-size: 0.95em;
  background: var(--color-surface-2);
  color: var(--color-text);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;                             /* verhindert Seiten-Scroll bei inline code */
}
pre code { background: transparent; padding: 0; border-radius: 0; }

/* ----------------------------------------------------------------------------
   9. FAQ: nativ bedienbar, ohne JavaScript
   ---------------------------------------------------------------------------- */
.faq-list { margin-block-start: var(--space-8); }

details {
  background: var(--color-surface);
  border: var(--hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  margin-block-end: var(--space-3);
}
summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  transition: background-color var(--motion-fast) var(--easing-standard);
}
summary:hover, summary:focus-visible { background: var(--color-surface-2); }
summary::marker { color: var(--color-accent); }        /* Zustandssymbol: Lage/Richtung traegt die Form */
details[open] > summary {
  border-block-end: var(--hairline) solid var(--color-border-strong);  /* offener Zustand: Marker + Trennlinie */
  border-start-start-radius: var(--radius-md);
  border-start-end-radius: var(--radius-md);
}
details > *:not(summary) { padding-inline: var(--space-4); padding-block-end: var(--space-3); }
.faq-answer > :first-child { margin-block-start: var(--space-3); }
.faq-answer > :last-child { margin-block-end: 0; padding-block-end: var(--space-4); }

/* Zustand des Aufklapp-Elements: offen/geschlossen wird nativ ueber <details>/<summary>
   an Assistenztechnik gemeldet (Marker-Richtung + Trennlinie als zweites Signal, W3 §10). */

/* Beschleunigung durch app.js (Progressiv-Enhancement): nur transform/opacity, <= 180 ms.
   Ohne .js-Klasse gibt es diese Bewegung nicht — es verschwindet aber nie Inhalt. */
.js .faq-answer.is-animating {
  animation: faq-answer-in var(--motion-base) var(--easing-standard) both;
}
@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------------------
   10. Schematische Darstellung (Sektion 2)
   ---------------------------------------------------------------------------- */
.hero-figure { margin: var(--space-6) 0 0; max-width: var(--measure); }
.hero-figure svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;      /* feste viewBox + width/height => kein Layout-Shift */
}
.hero-figure figcaption { margin-block-start: var(--space-3); }

/* ----------------------------------------------------------------------------
   11. Fusszeile
   ---------------------------------------------------------------------------- */
.site-footer {
  border-block-start: var(--hairline) solid var(--color-border);
  padding-block: var(--space-8);
}
/* W6-Punkt 1, 320-px-Fall (F-1): Das Dokumentende bekommt zusaetzlichen Innenabstand, damit auch
   der letzte Anker (#impressum / #datenschutz im Footer) vollstaendig sichtbar landen kann. Unter
   768 px ist der Header nicht klebend, deshalb genuegt die Anker-Atemluft als Zusatz zum Raster. */
@media (max-width: 767px) {
  .site-footer { padding-block-end: calc(var(--space-8) + var(--anchor-offset)); }
}
.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}
.site-footer a { text-decoration: underline; }
.site-footer h3 { margin-block-start: var(--space-6); }
.brand-line { font-weight: var(--font-weight-bold); margin-block-end: var(--space-4); }

/* ----------------------------------------------------------------------------
   12. Hinweiszeilen und Zielgroessen
   ---------------------------------------------------------------------------- */
.note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-block: 0 var(--space-2);
}
.note:last-child { margin-block-end: 0; }

/* JS-abhaengiger Hinweis: der Wrapper traegt die Optik, der Inhalt steht im noscript.
   Ohne JavaScript sichtbar, mit JavaScript bleibt der Wrapper leer und ohne Hoehe. */
.noscript-hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding-inline: var(--space-4);
}

/* Allein stehende Links und Links in Hinweiszeilen bekommen eine Zielhoehe >= 44 px.
   (Fliessext-Links innerhalb eines Satzes bleiben inline — Ausnahme nach WCAG 2.5.5.) */
p > a:only-child,
.note a {
  display: inline-block;
  min-height: var(--target-min);
  padding-block: var(--space-2);
}

/* ----------------------------------------------------------------------------
   13. Bewegungs-Reduktion: ALLE Bewegung aus (PLAN §5, ACCEPTANCE C7)
   Einziger !important-Block der Datei, verbindlich aus W2/W3-Spezifikation.
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: var(--motion-none) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--motion-none) !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   14. Systemkontrast-Modus: Ring bleibt sichtbar (W3 §8)
   ---------------------------------------------------------------------------- */
@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: var(--focus-ring-width) solid Highlight;
  }
}