/* ============================================================
   style.css — foresight-review.com
   ------------------------------------------------------------
   Gestalterisches Leitmotiv: das Präzisionsinstrument.
   Die Seite soll wirken wie ein Messgerät, nicht wie ein
   Ratgeber — dunkler Graphitgrund, ein einziges kaltes
   Akzentlicht, gravierte Skalenstriche als wiederkehrendes
   Motiv, viel Ruhe um wenige Aussagen.

   Farblogik: Der Akzent-Türkis ist derselbe Ton, in dem die
   Bildstrecke ausgeleuchtet ist, und zugleich die Farbe des
   Typs „Der Wachsame" aus dem Schema. Die drei übrigen
   Typfarben kommen ausschließlich in der Auswertung vor.
   ============================================================ */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-var-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Grund */
  --bg:          #080b11;
  --bg-deep:     #05070c;
  --surface:     #0e131c;
  --surface-2:   #131924;
  --line:        rgba(230, 236, 245, 0.10);
  --line-strong: rgba(230, 236, 245, 0.20);

  /* Schrift */
  --ink:         #e6ecf5;
  --ink-dim:     #8e99ab;
  --ink-faint:   #5a6373;

  /* Akzent — dasselbe kalte Licht wie in der Bildstrecke */
  --accent:      #5ef0d0;
  --accent-soft: rgba(94, 240, 208, 0.13);
  --accent-glow: rgba(94, 240, 208, 0.30);

  /* Typfarben (aus dem Schema, nur in der Auswertung) */
  --t-wachsam:    #5ef0d0;
  --t-beobachter: #9d8cff;
  --t-getrieben:  #ffb95e;
  --t-ueberrascht:#ff7d7d;
  --t-planlos:    #8b98b5;

  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --wrap:      70rem;
  --wrap-text: 40rem;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);

  /* Höhe des Seitenkopfs — der Fortschrittsbalken des Checks klebt
     darunter und muss mitwachsen, wenn der Kopf zweizeilig wird. */
  --header-h:  4.25rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-soft); color: var(--ink); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

.wrap      { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
.wrap-text { max-width: var(--wrap-text); }

/* ── Typografie ─────────────────────────────────────────── */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.3; }

p + p { margin-top: 1.1em; }

.lead {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.6;
  color: var(--ink-dim);
  font-weight: 300;
}

.label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.label.accent { color: var(--accent); }

.small { font-size: 0.8125rem; line-height: 1.65; color: var(--ink-faint); }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Skalenstrich-Trenner — greift die gravierte Skala der
   Bildstrecke auf. Rein dekorativ. */
.scale-rule {
  height: 10px;
  margin: 0;
  border: 0;
  background-image: linear-gradient(to right, var(--line-strong) 1px, transparent 1px);
  background-size: 12px 10px;
  background-repeat: repeat-x;
  background-position: left bottom;
  opacity: 0.7;
}

/* ── Kopf ───────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 11, 17, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header > .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.wordmark .tld { color: var(--ink-faint); }
.wordmark .mark {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  vertical-align: 0.05em;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}
.site-nav a {
  font-size: 0.875rem;
  color: var(--ink-dim);
}
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a[aria-current='page'] { color: var(--ink); }

.lang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-left: clamp(0.5rem, 2vw, 1rem);
  border-left: 1px solid var(--line);
}
.lang a { color: var(--ink-faint); }
.lang a:hover { color: var(--ink); text-decoration: none; }
.lang .is-active { color: var(--accent); }

/* ── Hero ───────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(84vh, 46rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}
/* Der Text steht links im leeren Bilddrittel; der Verlauf
   sichert die Lesbarkeit unabhängig vom Bildzuschnitt. */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(8, 11, 17, 0.94) 44%, rgba(8, 11, 17, 0.40) 70%, rgba(8, 11, 17, 0.55) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 42%);
}
.hero > .wrap { position: relative; z-index: 1; padding-top: 4rem; padding-bottom: 4rem; }
/* Schmal gehalten, damit die Zeilen nicht in das Instrument
   hineinlaufen — der Blick soll erst auf den Text, dann auf das Bild. */
.hero-inner { max-width: 31rem; }
.hero h1 { margin-top: 1rem; font-size: clamp(2.25rem, 5.4vw, 3.5rem); }
.hero .lead { margin-top: 1.5rem; }
.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}

/* Auf schmalen Schirmen rutscht die Navigation in eine zweite Zeile,
   sonst liefe sie über den rechten Rand hinaus. Sie bleibt vollständig
   erreichbar und darf bei Bedarf waagerecht rollen — der Seitenkörper
   selbst rollt nie waagerecht. */
@media (max-width: 46rem) {
  :root { --header-h: 5.75rem; }

  .site-header > .wrap {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  .wordmark { font-size: 0.9375rem; }
  .site-nav {
    width: 100%;
    margin-left: 0;
    gap: 1.15rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { font-size: 0.8125rem; white-space: nowrap; }
  .lang { margin-left: auto; }

  .hero-bg img { object-position: 66% center; }
  .hero-bg::after {
    background:
      linear-gradient(to right, var(--bg) 0%, rgba(8, 11, 17, 0.86) 55%, rgba(8, 11, 17, 0.62) 100%),
      linear-gradient(to top, var(--bg) 0%, transparent 55%);
  }
}

/* ── Knöpfe ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.85rem 1.6rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--accent);
  color: #04120e;
}
.btn-primary:hover { background: #7df6da; }
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ── Abschnitte ─────────────────────────────────────────── */

section { padding: clamp(4rem, 10vh, 7.5rem) 0; }
section + section { border-top: 1px solid var(--line); }

.section-head { max-width: var(--wrap-text); }
.section-head h2 { margin-top: 0.9rem; }
.section-head .lead { margin-top: 1.1rem; }

/* Bild-plus-Text-Paare, im Wechsel */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: 3rem;
}
@media (min-width: 54rem) {
  .split { grid-template-columns: 1.05fr 1fr; }
  .split.reverse .split-media { order: 2; }
}
.split-media {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-deep);
}
.split-media img { width: 100%; }
.split-media figcaption {
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-faint);
  background: var(--surface);
}

/* Die Kette als Kartenreihe */
.chain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin-top: 3rem;
  background: var(--line);
  border: 1px solid var(--line);
}
.chain-link {
  background: var(--surface);
  padding: 1.5rem 1.25rem;
}
.chain-link .nr {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: var(--accent);
}
.chain-link h3 { margin-top: 0.6rem; font-size: 1.0625rem; }
.chain-link p { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-dim); }

/* Pathologie-Liste */
.patho-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1px;
  margin-top: 2.5rem;
  background: var(--line);
  border: 1px solid var(--line);
}
.patho {
  background: var(--surface);
  padding: 1.5rem 1.35rem;
}
.patho h3 {
  font-size: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.patho h3 .q {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.patho p { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.65; color: var(--ink-dim); }

/* ── Der Check ──────────────────────────────────────────── */

.check-shell { padding-top: clamp(2.5rem, 6vh, 4rem); padding-bottom: clamp(4rem, 10vh, 7rem); }

.progress {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--bg);
  padding: 1rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.progress-meta .dim { color: var(--accent); font-family: var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; }
.progress-track {
  margin-top: 0.7rem;
  height: 2px;
  background: var(--line);
  position: relative;
}
.progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width 0.4s var(--ease);
}

.frage { margin-top: clamp(2.5rem, 6vh, 4rem); }
.frage .label { display: block; }
.frage h2 {
  margin-top: 0.9rem;
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  max-width: 34rem;
}

.optionen {
  margin-top: 2.25rem;
  display: grid;
  gap: 0.5rem;
  max-width: 46rem;
}
.opt {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.opt:hover { border-color: var(--line-strong); background: var(--surface-2); }
.opt.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.opt-tick {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.32rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  position: relative;
}
.opt.is-selected .opt-tick { border-color: var(--accent); }
.opt.is-selected .opt-tick::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}
.opt-text { font-size: 0.9375rem; line-height: 1.6; }

.check-nav {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.check-nav .spacer { flex: 1 1 auto; }

/* Zusatzangaben */
.felder {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.75rem;
  max-width: 34rem;
}
.feld > span { display: block; margin-bottom: 0.7rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip.is-selected { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.beitrag {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 2px;
  max-width: 34rem;
}
.beitrag label { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; font-size: 0.875rem; }
.beitrag input { margin-top: 0.28rem; accent-color: var(--accent); width: 1rem; height: 1rem; }
.beitrag .small { margin-top: 0.6rem; }

/* ── Auswertung ─────────────────────────────────────────── */

.ergebnis { padding-top: clamp(2.5rem, 6vh, 4rem); }

.typ-karte {
  margin-top: 2rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--typ-farbe, var(--accent));
  background: var(--surface);
  border-radius: 2px;
}
.typ-karte h1 { font-size: clamp(2rem, 5vw, 3rem); color: var(--typ-farbe, var(--accent)); }
.typ-karte .lead { margin-top: 1.1rem; color: var(--ink); }
.typ-karte .grenzfall {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  margin-top: 1.5rem;
  background: var(--line);
  border: 1px solid var(--line);
}
.kz { background: var(--surface); padding: 1.4rem 1.35rem; }
.kz .zahl {
  font-family: var(--font-display);
  font-size: 2.125rem;
  font-weight: 500;
  line-height: 1.05;
  margin-top: 0.45rem;
}
.kz .zahl small { font-size: 0.9375rem; color: var(--ink-faint); font-weight: 400; }
.kz .sub { margin-top: 0.35rem; font-size: 0.75rem; color: var(--ink-faint); }
.kz.hebt .zahl { color: var(--accent); }

/* Profil: waagerechte Balken je Dimension */
.profil { margin-top: 1.5rem; border: 1px solid var(--line); background: var(--surface); padding: clamp(1.35rem, 3vw, 2rem); }
.profil-zeile {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0;
}
.profil-zeile + .profil-zeile { border-top: 1px solid var(--line); }
.profil-zeile.ist-kultur { border-top: 1px solid var(--line-strong); }
.profil-name { font-size: 0.875rem; color: var(--ink-dim); }
.profil-name .nr { color: var(--ink-faint); margin-right: 0.4rem; }
.profil-track {
  position: relative;
  height: 0.5rem;
  background: rgba(230, 236, 245, 0.07);
  border-radius: 999px;
}
.profil-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.8;
}
.profil-fill.unter { background: var(--t-ueberrascht); }
/* Schwelle „zukunftsfähig" = 5 von 8 */
.profil-schwelle {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 62.5%;
  width: 1px;
  background: var(--line-strong);
}
.profil-wert { font-size: 0.875rem; color: var(--ink); min-width: 3rem; text-align: right; }

.befunde {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  margin-top: 1.5rem;
  background: var(--line);
  border: 1px solid var(--line);
}
.befund { background: var(--surface); padding: 1.5rem 1.4rem; }
.befund h3 { font-size: 1rem; margin-top: 0.7rem; }
.befund p { margin-top: 0.6rem; font-size: 0.875rem; color: var(--ink-dim); }

.marker-liste { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.marker-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  background: var(--surface-2);
  border-left: 2px solid var(--t-ueberrascht);
}
.marker-item.ist-kombi { border-left-color: var(--t-getrieben); }
.marker-item h4 { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; }
.marker-item p { margin-top: 0.3rem; font-size: 0.8125rem; color: var(--ink-dim); }
.marker-item .q { font-size: 0.6875rem; color: var(--ink-faint); letter-spacing: 0.1em; }

/* ── /stats ─────────────────────────────────────────────── */

.stats-block { margin-top: 3rem; }
.stats-block > .label { display: block; margin-bottom: 1.25rem; }

.tage { list-style: none; margin-top: 1.25rem; }
.tage li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.8125rem;
  padding: 0.32rem 0;
}
.tage .tag { width: 6rem; flex-shrink: 0; color: var(--ink-faint); }
.tage .balken { height: 0.45rem; border-radius: 999px; background: var(--accent); opacity: 0.75; min-width: 2px; }
.tage .wert { color: var(--ink-dim); }

.rang { list-style: none; margin-top: 1.25rem; }
.rang li {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0;
  font-size: 0.875rem;
}
.rang li + li { border-top: 1px solid var(--line); }
.rang .name { color: var(--ink-dim); }
.rang .track { height: 0.45rem; background: rgba(230, 236, 245, 0.07); border-radius: 999px; position: relative; }
.rang .fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--t-ueberrascht); opacity: 0.8; }
.rang .wert { color: var(--ink); min-width: 3.5rem; text-align: right; }

.hinweis-box {
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px dashed var(--line-strong);
  border-radius: 2px;
  background: rgba(230, 236, 245, 0.02);
}

/* ── Fließtext-Seiten (Methode, Impressum, Datenschutz) ── */

.doc { padding-top: clamp(2.5rem, 6vh, 4rem); padding-bottom: clamp(4rem, 10vh, 7rem); }
.doc .wrap-text > * + * { margin-top: 1.1em; }
.doc h2 { margin-top: 2.75em; }
.doc h3 { margin-top: 2em; }
.doc h2 + p, .doc h3 + p { margin-top: 0.9em; }
.doc ul, .doc ol { margin-left: 1.35em; }
.doc li + li { margin-top: 0.5em; }
.doc .tabelle { margin-top: 1.5em; overflow-x: auto; }
.doc table { border-collapse: collapse; width: 100%; font-size: 0.875rem; min-width: 34rem; }
.doc th, .doc td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-family: var(--font-display); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.doc td .v { color: var(--accent); font-variant-numeric: tabular-nums; }
.doc blockquote {
  border-left: 2px solid var(--line-strong);
  padding-left: 1.25rem;
  color: var(--ink-dim);
  font-size: 0.9375rem;
}

/* ── Fuß ────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 7vh, 4.5rem) 0 clamp(2.5rem, 5vh, 3.5rem);
  background: var(--bg-deep);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 46rem) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer-grid h3 { font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.footer-grid ul { list-style: none; margin-top: 1rem; }
.footer-grid li + li { margin-top: 0.55rem; }
.footer-grid a { color: var(--ink-dim); font-size: 0.875rem; }
.footer-grid a:hover { color: var(--ink); text-decoration: none; }
.footer-note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* ── Zustände ───────────────────────────────────────────── */

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  background: var(--accent);
  color: #04120e;
  padding: 0.6rem 1rem;
  border-radius: 2px;
  font-size: 0.875rem;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.5rem; text-decoration: none; }

/* Einblenden beim Scrollen — nur wenn erwünscht */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .check-nav, .hero-bg { display: none !important; }
  body { background: #fff; color: #000; }
  .typ-karte, .kz, .profil, .befund { border-color: #ccc; background: #fff; }
}