/*
 * Site-Styling (ADR-36). Dark-first, Brand-Farben gespiegelt aus
 * @huntra/design-tokens (ADR-21).
 *
 * Design-System v2 „Kommandozentrale" (#1367): Die Flaechen bleiben das
 * Marken-Gruen der App — dieselben Token-Werte, kein zweiter Farbraum. Der
 * eigene Charakter der Site entsteht aus Typografie (Barlow Condensed in
 * Versalien, Barlow im Text, JetBrains Mono fuer Daten), Haarlinien statt
 * Schatten und knapp gesetztem Gold. Schriften liegen selbst gehostet unter
 * /fonts (kein externer Request, Pages-CSP-safe).
 */

/* ---------- Schriften (selbst gehostet, latin-Subset) ---------- */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('/fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('/fonts/barlow-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('/fonts/barlow-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
 * Fallback mit angepassten Metriken: Bis die Webfont da ist, rendert Arial —
 * `size-adjust` und die Overrides bringen dessen Zeilenbild so nah an Barlow,
 * dass der Wechsel kaum Layout verschiebt (CLS-Schutz, `swap` ohne Ruckeln).
 * Werte aus dem Verhaeltnis der unitsPerEm/Ascent-Metriken beider Schriften.
 */
@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  /* Der ganze Gewichtsbereich, nicht nur der Default: Ohne diese Angabe gilt
     der Face als `font-weight: 400`, und bei 500/600 im Text griffe wieder der
     unangepasste System-Font — genau der Sprung, den size-adjust verhindern
     soll. */
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 96%;
  ascent-override: 105%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Condensed Fallback';
  src: local('Arial Narrow'), local('Arial'), local('Liberation Sans Narrow');
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 82%;
  ascent-override: 122%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  /* Flaechen und Marken-Toene: 1:1 aus @huntra/design-tokens (ADR-21). */
  --bg: #11201a;
  --surface: #1a2e22;
  --surface-2: #233a2c;
  --border: #2d4334;
  --fg: #e9ece3;
  --muted: #8a9a78;
  --brand: #6f8456;
  --brand-light: #8aa06b;
  --brand-dark: #3d5a3a;
  --accent: #c89b54;
  --accent-hi: #d8b06a;
  --success: #4fae7e;
  /* Seit #1408: Die Tagesuhr braucht den Mondlicht-Ring (warn) und den
     Jetzt-Zeiger (danger). Beide standen schon in `@huntra/design-tokens`,
     nur die Site hatte sie nie gebraucht. */
  --warn: #e0a93f;
  --danger: #e5575c;

  /* Zwei Flaechentoene der FAQ-Buehne, die es in `@huntra/design-tokens` (noch)
     NICHT gibt (#1436). Sie standen bis hierher als rohe Hex-Werte an sieben
     Stellen im Stylesheet verstreut — damit war die Frage „entspricht die Site
     dem Styleguide?" an genau diesen Stellen mit „nein" zu beantworten, und
     eine Token-Aenderung waere an ihnen vorbeigelaufen.

     Bewusst site-lokal und nicht als Token: `--bg-tief` ist KEINE gleichmaessige
     Abdunklung von `--bg` (17,32,26 → 10,19,14 skaliert die Kanaele um 0,59 /
     0,59 / 0,54), sondern ein handgewaehlter, leicht gruener verschobener Ton.
     Er liesse sich also nicht ohne sichtbare Aenderung aus `--bg` ableiten, und
     ihn zum geteilten Token zu erheben ist eine Design-Entscheidung fuer Web,
     Mobile und Site zugleich — die gehoert nicht in einen Aufraeum-Commit.
     Hier stehen sie an EINER Stelle; die Befoerderung zum Token ist von hier
     aus ein Zweizeiler. */
  --bg-tief: #0a130e; /* tiefer als --bg: Abschluss-Sektion, Scrims, Suchfeld */
  --bg-tief-hell: #17291e; /* Lichtkante oben im FAQ-Hero-Radial */

  --radius: 0.625rem;
  --maxw: 1080px;

  /* Schrift-Rollen (#1367). Display traegt Versalien, Body den Fliesstext,
     Mono jede Zahl, die als Messwert gelesen wird. */
  --schrift-display:
    'Barlow Condensed', 'Barlow Condensed Fallback', 'Arial Narrow', system-ui, sans-serif;
  --schrift-body: 'Barlow', 'Barlow Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Text-Hierarchie ueber Weiss-Opazitaet statt ueber weitere Farben. */
  --ink-2: rgba(233, 236, 227, 0.74);
  --ink-3: rgba(233, 236, 227, 0.5);
  /* Haarlinien: feiner als --border, fuer Karten und Trenner im v2-Raster. */
  --linie: rgba(233, 236, 227, 0.1);
  --linie-hell: rgba(233, 236, 227, 0.22);

  /*
   * Schleier ueber dem Hero-Bewegtbild (#1435). Bewusst NICHT `--bg`: ein
   * markengruener Schleier legt sich als zweite Gruenschicht ueber Laub und
   * Wiese, dann wirkt der Clip flach. Neutral abgedunkelt bleiben die
   * Herbstfarben stehen — bei gleicher Deckung ist der Ton sogar etwas
   * dunkler als `--bg`, der Textkontrast wird also nicht schlechter.
   */
  --hero-schleier: #0d1210;

  /* Radien und Bewegung als Tokens — damit Dauer und Kurve nicht je
     Komponente neu erfunden werden. */
  --radius-gross: 14px;
  --dauer-schnell: 0.15s;
  --dauer-ruhig: 0.6s;
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * Seitenwechsel als Ueberblendung (Cross-document View Transitions).
 * Reines Progressive Enhancement: Browser ohne Unterstuetzung navigieren
 * normal. Muss auf beiden Seiten stehen — hier zentral fuer die ganze Site.
 */
@view-transition {
  navigation: auto;
}

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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Die Kopfzeile klebt oben (64 px). Ohne dieses Polster landet ein
     Sprungziel — und ein per Tastatur fokussiertes Element — darunter
     (WCAG 2.4.11 „Focus Not Obscured"). */
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--schrift-body);
  /* 17 px Grundgroesse: Die Zielgruppe reicht bis 75 Jahre, und Barlow laeuft
     etwas schmaler als der System-Stack davor. */
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Ueberschriften tragen die Display-Schrift in Versalien — die Signatur des
   v2-Systems. Groessen bleiben fluid, damit kein Breakpoint-Sprung entsteht. */
h1,
h2,
h3,
h4 {
  font-family: var(--schrift-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.02;
  text-wrap: balance;
}

h3,
h4 {
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.12;
}

/* Zahlen, die als Messwert gelesen werden (Uhrzeiten, Flaechen, Preise),
   stehen in der Mono — und mit gleichbreiten Ziffern, damit Spalten sitzen. */
.mono,
.mono-label {
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
}

.mono-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Sichtbarer Fokus ueberall — die Site wird auch per Tastatur bedient, und
   WCAG 2.4.11 verlangt, dass der Ring nicht unter der Kopfzeile verschwindet
   (dafuer das scroll-padding weiter unten). */
:where(a, button, summary, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* Wortmarke in der Display-Schrift, Versalien mit weitem Satz — das Logo
     bleibt die Geweih-Mark daneben. */
  font-family: var(--schrift-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1.3rem;
}

.brand .brand-mark {
  width: 28px;
  height: 28px;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-links a.muted {
  color: var(--muted);
  font-size: 0.95rem;
}

.nav-links a.muted:hover {
  color: var(--fg);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  border-radius: var(--radius);
  padding: 0.8rem 1.4rem;
  font-family: var(--schrift-body);
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  /* Ein `<button>` bekommt vom Browser eine eigene Flaeche (`ButtonFace`, unter
     Windows #f0f0f0) und eigene Kanten; ein `<a>` nicht. Ohne diese beiden
     Zeilen stand die helle Schrift der Ghost-Variante auf Hellgrau — Kontrast
     1,05, praktisch unlesbar (#1410). Dass es so lange durchging, liegt an
     `.btn-primary`: Das setzt selbst eine Flaeche und war nie betroffen.
     `appearance` nimmt iOS zusaetzlich seine Verlaeufe und Rundungen. */
  appearance: none;
  background: none;
  transition:
    background var(--dauer-schnell) ease,
    border-color var(--dauer-schnell) ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--accent-hi);
}

.btn-ghost {
  border-color: var(--border);
  color: var(--fg);
}

.btn-ghost:hover {
  background: var(--surface-2);
}

/* ---------- Hero (#1370) ----------
 * Zwei Bewegtbild-Ebenen: der Rotwild-Clip als abgedunkelte Atmosphaere hinter
 * dem Claim, das Produkt-Tile darunter als Beweis. Der Text steht mittig und
 * nicht mehr rechts — im v2-System traegt die Typografie, nicht die Position.
 */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vh, 6rem) 0;
  text-align: center;
}

/* Das Wild-Video fuellt den Hero, bleibt aber Hintergrund — die Abdunklung
 * dafuer steckt im Schleier auf `.hero-wild::after` (Kommentar dort). */
.hero-wild {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
   * Der Hirsch soll rechts neben dem Claim roehren (#1435). Sein Kopf liegt
   * bei ~58 % der Quellbreite, `object-position: X%` richtet Quellpunkt X auf
   * Containerpunkt X aus — ein Prozentwert allein kann den Kopf also nicht
   * nach rechts schieben, und der Ausschnitt haengt an der Ueberbreite
   * (`cover` skaliert 16:9 auf eine hohe, schmale Box), nicht am Viewport.
   * Genau daran ist der alte Wert `38%` gescheitert: Desktop Kopf bei ~70 %,
   * auf 375 px bei ~143 % — aus dem Bild geschoben. Der vw-Zuschlag
   * verschiebt um einen festen Anteil der Hero-Breite und wirkt damit auf
   * jeder Breite: Kopf bei ~75 % (1905 px) bzw. ~59 % (375 px), wo `cover`
   * das Tier stark vergroessert und 75 % das Geweih abschneiden wuerde.
   */
  object-position: calc(62% + 18vw) center;
}

/*
 * Zwei Ebenen (#1435): unten ein Verlauf, der den Clip nach unten sauber ins
 * Marken-Gruen auslaufen laesst, darueber ein Textbett, das zur Claim-Spalte
 * hin dicht ist und nach aussen ganz aufgeht. So bleibt der Text ohne
 * Textschatten lesbar, waehrend Wiese, Laub und der Hirsch selbst sichtbar
 * bleiben — mittlere Deckung 0,78 statt 0,93, ueber dem Tier 0,75 statt 0,88.
 *
 * Die Werte sind gegen die hellsten Frames des Clips geprueft (Himmel-
 * Spitzlichter bis rgb(255 255 246)), je auf 1905 px und 375 px Breite —
 * schlechtester Pixel: Label 4,97/5,54 · Lead 5,74/4,68 · Chips 5,07/4,70
 * (WCAG AA 4,5:1) und H1 4,96/3,25 (Grosstext, 3:1). Wer hier aufhellt,
 * misst gegen die hellsten Frames, nicht gegen den Durchschnitt.
 */
.hero-wild::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      90% 60% at 50% 20%,
      color-mix(in srgb, var(--hero-schleier) 90%, transparent) 0%,
      color-mix(in srgb, var(--hero-schleier) 42%, transparent) 60%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 36%, transparent) 0%,
      color-mix(in srgb, var(--bg) 42%, transparent) 46%,
      var(--bg) 96%
    );
}

.hero-inhalt {
  position: relative;
}

.hero-kern {
  max-width: 54rem;
  margin-inline: auto;
}

.hero h1 {
  margin: 0.8rem 0 0;
  font-size: clamp(2.6rem, 7.5vw, 5.4rem);
  letter-spacing: 0.01em;
}

.hero h1 .gold {
  color: var(--accent);
}

.hero-lead {
  max-width: 40rem;
  margin: 1.3rem auto 0;
  color: var(--ink-2);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

/* Das Vormerk-Formular steht mittig im Hero — die einzige Aktion hier. */
.hero-vormerken {
  margin-top: 2rem;
}

.hero-vormerken .vormerken {
  margin-inline: auto;
}

.hero-vormerken .vormerken-meldung,
.hero-vormerken .vormerken-klein {
  max-width: 34rem;
  margin-inline: auto;
}

.hero-chips {
  justify-content: center;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

/* ---------- Live-Meldung auf dem Produkt-Tile ----------
 * Erzaehlt das Produktversprechen in einem Element: Die Kamera meldet sich,
 * die KI hat die Wildart schon erkannt. */
.produkt {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
}

.live-chip {
  position: absolute;
  top: 12%;
  right: 4%;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--linie-hell);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgb(0 0 0 / 40%);
  font-size: 0.85rem;
  text-align: left;
  line-height: 1.35;
}

.live-chip b {
  font-weight: 600;
}

.live-chip .mono {
  font-size: 0.72rem;
  color: var(--ink-3);
}

.live-punkt {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

/* Unter 640 px verdeckt die Meldung mehr Karte, als sie erklaert. */
@media (max-width: 640px) {
  .live-chip {
    display: none;
  }
}

/* ---------- Abschnitts-Koepfe ---------- */
.abschnitt-kopf {
  max-width: 40rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}

.abschnitt-kopf h2 {
  margin: 0.5rem 0 0;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
}

.abschnitt-kopf p {
  margin: 0.9rem 0 0;
  color: var(--ink-2);
}

.abschnitt-fuss {
  margin-top: 2rem;
}

.abschnitt-fuss a,
.zelle-mehr a {
  color: var(--accent);
  font-weight: 600;
}

.abschnitt-fuss a::after,
.zelle-mehr a::after {
  content: ' →';
}

.abschnitt-fuss a:hover,
.zelle-mehr a:hover {
  color: var(--accent-hi);
}

.zelle-mehr {
  margin: 0;
  font-size: 0.95rem;
}

/* Herkunft nutzt das Ablauf-Raster, aber ohne dessen Nummerierung: 2019 ist
   ein Jahr, keine Schrittnummer. */
.herkunft {
  list-style: none;
  padding: 0;
  counter-reset: none;
}

.herkunft .schritt::before {
  content: none;
}

.herkunft .schritt .mono-label {
  margin: 0 0 0.5rem;
}

/* ---------- Werkzeug-Kacheln ---------- */
.werkzeug-kacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.werkzeug-kachel {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--surface);
  transition:
    border-color var(--dauer-schnell) ease,
    transform var(--dauer-schnell) ease;
}

.werkzeug-kachel h3 {
  margin: 0.5rem 0 0.6rem;
  font-size: 1.3rem;
}

.werkzeug-kachel p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

@media (prefers-reduced-motion: no-preference) {
  .werkzeug-kachel:hover {
    border-color: var(--linie-hell);
    transform: translateY(-2px);
  }
}

@media (max-width: 860px) {
  .werkzeug-kacheln {
    grid-template-columns: 1fr;
  }
}

/* ---------- Abschluss-Band ---------- */
.abschluss {
  border-top: 1px solid var(--linie);
  background: var(--surface);
  text-align: center;
}

.abschluss .wrap {
  max-width: 44rem;
}

.abschluss h2 {
  margin: 0.5rem 0 0;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
}

.abschluss > .wrap > p {
  margin: 1.1rem auto 1.8rem;
  max-width: 32rem;
  color: var(--ink-2);
}

.abschluss .vormerken,
.abschluss .vormerken-meldung,
.abschluss .vormerken-klein {
  margin-inline: auto;
  max-width: 34rem;
}

/* Ein Band mit abgesetzter Flaeche — trennt Kapitel ohne Ueberschrift. */
.band {
  background: color-mix(in srgb, var(--surface) 55%, var(--bg));
  border-block: 1px solid var(--linie);
}

/* ---------- Jagdtag-Teaser auf der Startseite (#1372) ---------- */
.jagdtag-teaser .wrap {
  max-width: 44rem;
  text-align: center;
}

.jagdtag-teaser h2 {
  margin: 0.5rem 0 0;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.jagdtag-teaser > .wrap > p {
  margin: 1rem auto 0;
  max-width: 34rem;
  color: var(--ink-2);
}

/* Die Uhrzeiten als Spur: fuenf Marken auf einer Linie — die Seite dahinter
   erzaehlt sie aus. */
.zeitspur {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  margin: 1.8rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--linie);
  list-style: none;
  font-size: 0.9rem;
  color: var(--ink-3);
}

/* ---------- Erzaehlseite /jagdtag/ (#1372) ---------- */
.jagdtag-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 14vh, 9rem) clamp(4rem, 10vh, 7rem);
}

.jagdtag-hero-bild {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.jagdtag-hero-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.jagdtag-hero-bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(17, 32, 26, 0.72) 0%,
    rgba(17, 32, 26, 0.58) 40%,
    rgba(17, 32, 26, 0.85) 78%,
    var(--bg) 100%
  );
}

.jagdtag-hero h1 {
  margin: 0.7rem 0 0;
  font-size: clamp(2.5rem, 6.5vw, 4.8rem);
}

.jagdtag-hero h1 .gold {
  color: var(--accent);
}

.jagdtag-lead {
  max-width: 38rem;
  margin: 1.3rem 0 0;
  color: var(--ink-2);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

/* Die Uhrzeit ist die Ueberschrift ueber der Ueberschrift — gross, ruhig,
   in der Mono. */
.kapitel-uhr {
  margin: 0 0 0.4rem;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.kapitel {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--linie);
}

.kapitel h2 {
  max-width: 20ch;
  margin: 0.5rem 0 0;
  font-size: clamp(1.8rem, 3.8vw, 2.9rem);
}

.kapitel-koerper {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: 2.2rem;
}

.kapitel-gedreht .kapitel-text {
  order: 2;
}

.kapitel-text p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.05rem;
}

.kapitel-text .zelle-mehr {
  margin-top: 1.1rem;
}

.kapitel-bild {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
}

.kapitel-bild img {
  display: block;
  width: 100%;
  height: auto;
}

/* Das Telefon-Bild ist hochkant — ohne Deckel wuerde es das Kapitel sprengen. */
.kapitel-telefon {
  max-width: 17rem;
  margin-inline: auto;
  border-radius: 26px;
}

.kapitel-daten {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--surface);
}

.kapitel-fussnote {
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.kapitel-fussnote a {
  color: var(--accent);
}

.kapitel-kamera {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
}

.kapitel-kamera img {
  height: 280px;
}

/* Push-Karte: zeigt, was beim Menschen ankommt — nicht, was das System tut. */
.push-karte {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  max-width: 24rem;
  margin: 1rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--linie);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgb(0 0 0 / 35%);
  font-size: 0.92rem;
  color: var(--ink-2);
}

.push-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-2);
}

.push-karte b {
  color: var(--fg);
  font-weight: 600;
}

.push-karte .mono {
  font-size: 0.78rem;
  color: var(--ink-3);
}

.bilanz {
  justify-content: center;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 840px) {
  .kapitel-koerper {
    grid-template-columns: 1fr;
  }

  .kapitel-gedreht .kapitel-text {
    order: 0;
  }
}

/* ---------- Sections ---------- */
section {
  padding: 4.75rem 0;
}

.section-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  text-align: center;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}

.section-sub {
  text-align: center;
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto 2.5rem;
}

/* ---------- Feature-Listen: zentrierter Einspalter (Login-Ruhe) ---------- */
.feature-cols {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.feature-col h4 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.feature-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-col li {
  position: relative;
  color: var(--muted);
  padding: 0.42rem 0 0.42rem 1.1rem;
  font-size: 0.98rem;
}

.feature-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-light);
}

/* ---------- Mobile-Menue (#1365) ----------
 * Bis 860 px traegt die Zeilen-Navigation zu viel; darunter uebernimmt ein
 * `<details>`-Menue. Ohne Skript, damit es auch bei blockiertem JavaScript
 * aufgeht — und ohne zweite Quelle: beide Listen entstehen aus NAV.
 */
.nav-menue {
  display: none;
  position: relative;
}

.nav-menue > summary {
  /* `list-style: none` + `::-webkit-details-marker` — Safari braucht beides. */
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44x44 px Trefferflaeche (Apple HIG / WCAG 2.5.8), Icon bleibt 24 px. */
  width: 44px;
  height: 44px;
  margin-right: -0.6rem;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius);
}

.nav-menue > summary::-webkit-details-marker {
  display: none;
}

.nav-menue > summary:hover {
  color: var(--fg);
}

.nav-menue > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-menue > summary svg {
  width: 24px;
  height: 24px;
}

.nav-menue-liste {
  position: absolute;
  right: 0;
  top: calc(100% + 0.75rem);
  z-index: 20;
  min-width: 14rem;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
}

.nav-menue-liste a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  color: var(--muted);
}

.nav-menue-liste a:hover {
  color: var(--fg);
  background: var(--surface-2);
}

.nav-menue-liste a[aria-current='page'] {
  color: var(--accent);
}

/* Uebergabe an das Menue bei 920 px, nicht erst bei 860 (#1391).
   Mit dem Jagdtag-Eintrag traegt die Zeile sieben Links plus den Knopf. Bei
   862 px stiess der erste Link auf 0 px an die Wortmarke, und die Zeile war
   dabei schon um 27 px gestaucht (719 -> 692) — die Links rueckten also
   zusammen, bevor irgendetwas sichtbar brach.
   Gemessen: Bei 922 px steht die Zeile auf ihrer natuerlichen Breite (719 px)
   mit 33 px Abstand zur Wortmarke, bei 918 px uebernimmt das Menue. */
@media (max-width: 920px) {
  .nav-links a.muted,
  .nav-links .btn {
    display: none;
  }

  .nav-menue {
    display: block;
  }
}

/* ---------- Über das Projekt: Timeline (ohne Icons) ---------- */
.timeline {
  list-style: none;
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
}

/* Vertikale Linie durch die Jahres-Marker. */
.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  padding: 0 0 2.25rem 2.75rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
}

.timeline-year {
  display: block;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}

.timeline-body h3 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
}

.timeline-body p {
  margin: 0;
  color: var(--muted);
}

.section-note {
  text-align: center;
  color: var(--muted);
  max-width: 620px;
  margin: 2.5rem auto 0;
  font-size: 0.95rem;
}

/* ---------- Rechtstexte (Impressum/Datenschutz) ---------- */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.legal h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin: 0 0 0.5rem;
}

.legal h2 {
  font-size: 1.2rem;
  margin: 2rem 0 0.5rem;
}

.legal p,
.legal li {
  color: var(--muted);
}

.legal a {
  color: var(--accent);
}

.legal a:hover {
  color: var(--accent-hi);
}

.legal .notice {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  margin: 1.5rem 0;
}

/* ---------- CTA ---------- */
.cta {
  text-align: center;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3rem 1.5rem;
  margin: 1rem 0 0;
}

.cta h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.cta p {
  color: var(--muted);
  margin: 0 0 1.5rem;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.foot a:hover {
  color: var(--fg);
}

.foot-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* ---------- Unterseiten (#1254) ----------
 * Aus dem OnePager ist eine Website mit rund 40 Seiten geworden. Alles ab hier
 * gilt fuer Inhalts-, Jagdzeiten- und Werkzeugseiten. */

/* Nur fuer Screenreader — Tabellen-Beschriftungen, die optisch stoeren wuerden. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lesespalte: ~70 Zeichen sind die bequeme Zeilenlaenge fuer Fliesstext. */
.wrap-schmal {
  max-width: 760px;
}

.artikel {
  padding: 2.5rem 0 4rem;
}

.artikel h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.artikel h2 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  margin: 2.5rem 0 0.75rem;
}

.artikel h3 {
  font-size: 1.08rem;
  margin: 1.75rem 0 0.4rem;
}

.artikel p {
  color: var(--muted);
  margin: 0 0 1rem;
}

/* Die Antwort-Einheit direkt unter dem H1 (#1374): Sie beantwortet die Frage
   der Seite in wenigen Sätzen — für eilige Leser und für Antwortmaschinen, die
   das erste Drittel einer Seite überproportional gewichten. Deshalb bekommt
   sie sichtbares Gewicht statt Fließtext zu sein. */
.artikel .lead {
  margin-bottom: 2rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
  color: var(--fg);
  font-size: 1.15rem;
  line-height: 1.6;
}

/* Fliesstext-Links im Artikel sind gold — Knoepfe nicht (#1410).
   Ohne das `:not(.btn)` gewann diese Regel gegen `.btn-primary`, und der CTA
   stand als goldene Schrift auf goldenem Grund: Textfarbe und Hintergrund
   exakt derselbe Wert, Kontrast 1,0.
   Warum sie gewinnt: `.artikel a` ist (0,1,1) — eine Klasse und ein
   Typselektor —, `.btn-primary` ist (0,1,0). Bei gleicher Klassenzahl gibt
   der Typselektor den Ausschlag. Ein Knopf ist kein Fliesstext-Link, und
   genau das sagt der Selektor jetzt. */
.artikel a:not(.btn) {
  color: var(--accent);
}

.artikel a:not(.btn):hover {
  color: var(--accent-hi);
}

.artikel .notice {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  margin: 1.5rem 0;
}

/* ---------- Autorenkasten am Fuss eines Ratgebers (#1374) ---------- */
.autor {
  margin: 3rem 0 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--surface);
}

.autor .mono-label {
  margin: 0 0 0.5rem;
}

.autor-name {
  margin: 0 0 0.25rem;
  font-family: var(--schrift-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fg);
}

/* Die Rolle unter dem Namen — dieselbe Angabe, die als `jobTitle` ins
   Article-Schema geht. */
.artikel .autor-rolle {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  color: var(--ink-3);
}

.artikel .autor-text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.punkte {
  color: var(--muted);
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.punkte li {
  margin-bottom: 0.4rem;
}

.stand {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 2.5rem;
  font-size: 0.85rem;
}

/* ---------- Brotkrumen ---------- */
.breadcrumb {
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  color: var(--muted);
}

.breadcrumb li + li::before {
  content: '›';
  margin-right: 0.5rem;
  color: var(--border);
}

.breadcrumb a {
  color: var(--muted);
}

.breadcrumb a:hover {
  color: var(--fg);
}

/* ---------- Tabellen ----------
 * Breite Inhalte scrollen in ihrem eigenen Container; die Seite selbst darf
 * nie horizontal scrollen. */
.tabelle-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.jagdzeiten-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 32rem;
}

.jagdzeiten-tabelle th,
.jagdzeiten-tabelle td {
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.jagdzeiten-tabelle thead th {
  background: var(--surface-2);
  color: var(--fg);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
}

.jagdzeiten-tabelle tbody th {
  font-weight: 600;
  color: var(--fg);
}

.jagdzeiten-tabelle tbody tr:last-child th,
.jagdzeiten-tabelle tbody tr:last-child td {
  border-bottom: 0;
}

.jagdzeiten-tabelle td {
  color: var(--muted);
  white-space: nowrap;
}

.jagdzeiten-tabelle td.geschont {
  color: var(--accent);
}

.tabelle-hinweis {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: normal;
}

.status-offen {
  color: var(--success);
  font-weight: 600;
}

.status-zu {
  color: var(--muted);
}

.tabellen-fuss {
  font-size: 0.85rem;
  margin-top: -0.75rem;
}

/* ---------- Quellenkasten ----------
 * Der Herkunftsnachweis ist das Unterscheidungsmerkmal der Jagdzeiten-Seiten,
 * deshalb bekommt er optisch Gewicht statt Kleingedrucktes zu sein. */
.quellenkasten {
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.25rem 1.4rem;
  margin: 2.5rem 0;
}

.quellenkasten h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

.quellenkasten dl {
  margin: 1rem 0 0;
  display: grid;
  gap: 0.5rem 1.25rem;
}

.quellenkasten dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-light);
}

.quellenkasten dd {
  margin: 0 0 0.75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (min-width: 46rem) {
  .quellenkasten dl {
    grid-template-columns: 14rem 1fr;
  }

  .quellenkasten dt {
    grid-column: 1;
  }

  .quellenkasten dd {
    grid-column: 2;
    margin-bottom: 0;
  }
}

.hinweis-liste {
  margin: 0.75rem 0 0;
}

.hinweis-liste dt {
  color: var(--fg);
  font-weight: 600;
  margin-top: 0.75rem;
}

.hinweis-liste dd {
  margin: 0.15rem 0 0;
  color: var(--muted);
}

/* ---------- FAQ ---------- */
.faq-item {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 1rem;
}

.faq-item h3 {
  margin-top: 0;
  color: var(--fg);
}

/* ---------- Querverweise ---------- */
.link-liste {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.link-liste a {
  display: block;
  /* 44 px Mindest-Trefferflaeche auf Touch (WCAG 2.5.8) — das Polster zaehlt mit. */
  padding: 0.7rem 0.5rem;
  border-radius: var(--radius);
}

/* ---------- FAQ-Seite /faq/ — Design "Buechsenlicht" (#1339) ---------- */
/* Das JS (faq.ts) blendet per hidden-Attribut aus; wo eigene display-Werte
   gesetzt sind, muss hidden trotzdem gewinnen. */
.faq-beliebt[hidden],
.faq-themen[hidden],
.faq-gruppe[hidden],
.faq-acc[hidden],
.faq-treffer[hidden],
.faq-keine-treffer[hidden] {
  display: none !important;
}

.faq-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5rem 0 7.5rem;
  text-align: center;
  background: radial-gradient(140% 100% at 50% 0%, var(--bg-tief-hell) 0%, var(--bg-tief) 78%);
}

.faq-hero-foto {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.faq-hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

.faq-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(
      90% 60% at 50% 108%,
      color-mix(in srgb, var(--accent) 22%, transparent) 0%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-tief) 68%, transparent) 0%,
      color-mix(in srgb, var(--bg-tief) 48%, transparent) 45%,
      color-mix(in srgb, var(--bg-tief) 90%, transparent) 100%
    );
}

/* Horizontlinie: der Buechsenlicht-Moment als Markenmotiv. */
.faq-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent 5%,
    color-mix(in srgb, var(--accent) 65%, transparent) 50%,
    transparent 95%
  );
}

.faq-geweih {
  position: absolute;
  z-index: -1;
  right: -4rem;
  bottom: -5rem;
  width: clamp(300px, 38vw, 470px);
  opacity: 0.09;
  transform: rotate(-6deg);
}

.faq-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--schrift-mono);
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
}

.faq-hero-kicker svg {
  width: 1rem;
  height: 1rem;
}

.faq-hero h1 {
  font-size: clamp(2.3rem, 5.5vw, 3.4rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.faq-hero h1 .gold {
  color: var(--accent);
}

.faq-hero-lead {
  color: #cdd6c2;
  max-width: 36rem;
  margin: 0 auto 2.4rem;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
}

.faq-suchfeld {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 640px;
  margin: 0 auto;
  background: color-mix(in srgb, var(--bg-tief) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px;
  padding: 0.4rem 0.7rem 0.4rem 1.3rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.faq-suchfeld:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

.faq-suchfeld svg {
  color: var(--accent);
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
}

.faq-suchfeld input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--fg);
  font: inherit;
  font-size: 1.08rem;
  padding: 0.7rem 0;
}

.faq-suchfeld input::placeholder {
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}

.faq-suchfeld input:focus {
  outline: none;
}

/* Trefferzahl ist ein Messwert — Mono, damit sie beim Tippen nicht springt. */
.faq-treffer {
  margin: 1.2rem auto 0;
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-size: 0.9rem;
  position: relative;
  z-index: 2;
}

/* Ueberlappende Karte: die meistgestellten Fragen ragen in den Hero hinein. */
.faq-beliebt {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: -4.5rem auto 0;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.8);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  padding: 1.9rem 2rem 1.4rem;
}

.faq-beliebt h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.9rem;
  color: var(--brand-light);
  text-transform: uppercase;
  font-weight: 700;
}

.faq-beliebt h2 svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--accent);
}

.faq-beliebt ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2.5rem;
}

.faq-beliebt li {
  break-inside: avoid;
}

.faq-beliebt a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.25rem;
  min-height: 44px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-weight: 500;
  font-size: 0.97rem;
}

.faq-beliebt a:hover {
  color: var(--accent-hi);
}

.faq-beliebt a svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .faq-beliebt ol {
    columns: 1;
  }
  .faq-beliebt {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    padding: 1.5rem 1.4rem 1rem;
  }
}

/* ---------- FAQ: Themen-Kacheln ---------- */
.faq-themen {
  padding: 4rem 0 1.5rem;
}

.faq-themen-h2 {
  text-align: center;
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  letter-spacing: -0.01em;
}

.faq-themen-sub {
  text-align: center;
  color: var(--muted);
  margin: 0 auto 2.2rem;
  max-width: 34rem;
}

.faq-kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

.faq-kachel {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  transition:
    border-color var(--dauer-schnell) ease,
    transform var(--dauer-schnell) ease;
}

.faq-kachel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 55%, transparent),
    transparent
  );
  opacity: 0;
  transition: opacity 0.15s ease;
}

.faq-kachel:hover {
  border-color: var(--linie-hell);
}

.faq-kachel:hover::before {
  opacity: 1;
}

.faq-kachel-bild {
  display: block;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  position: relative;
}

.faq-kachel-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.faq-kachel-bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 32, 26, 0.05) 35%, var(--surface) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .faq-kachel:hover {
    transform: translateY(-2px);
  }
  .faq-kachel-bild img {
    transition: transform 0.25s ease;
  }
  .faq-kachel:hover .faq-kachel-bild img {
    transform: scale(1.04);
  }
}

.faq-kachel-inhalt {
  display: block;
  padding: 0 1.4rem 1.3rem;
}

.faq-kachel-ikon {
  width: 1.9rem;
  height: 1.9rem;
  color: var(--accent);
  position: relative;
  margin: -2.5rem 0 0.9rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
}

.faq-kachel strong {
  display: block;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

.faq-kachel-inhalt p {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.faq-kachel-zu {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}

.faq-kachel-zu svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* ---------- FAQ: Akkordeon-Gruppen ---------- */
.faq-fragen {
  max-width: 780px;
  margin: 0 auto;
  padding: 1.5rem 0 1rem;
}

.faq-gruppe {
  padding: 2.2rem 0 0.5rem;
  scroll-margin-top: 84px;
}

/* Themen-Zaehler in der Mono: „Thema 3" ist eine Positionsangabe, keine
   Ueberschrift — dieselbe Rolle wie die Uhrzeiten und Messwerte im v2-System
   (#1371). */
.faq-kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}

.faq-kicker svg {
  width: 1.05rem;
  height: 1.05rem;
}

.faq-gruppe h2 {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  letter-spacing: -0.015em;
  margin: 0 0 1.1rem;
}

.faq-acc {
  position: relative;
  /* Haarlinie statt Rahmenfarbe (#1371): Im v2-System entsteht Tiefe aus
     Helligkeit, die Linie zeichnet nur die Kante nach. */
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--surface);
  margin-bottom: 0.6rem;
  scroll-margin-top: 84px;
  overflow: hidden;
}

.faq-acc::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.faq-acc[open] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.faq-acc[open]::before {
  opacity: 1;
}

.faq-acc summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* 44 px Mindest-Trefferflaeche auf Touch (WCAG 2.5.8). */
  padding: 1.05rem 1.25rem;
  min-height: 44px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
}

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

.faq-acc summary:hover {
  background: var(--surface-2);
}

.faq-plusminus {
  position: relative;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  color: var(--accent);
}

.faq-plusminus::before,
.faq-plusminus::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  border-radius: 1px;
}

.faq-plusminus::before {
  width: 100%;
  height: 2px;
}

.faq-plusminus::after {
  width: 2px;
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-plusminus::after {
    transition: transform 0.18s ease;
  }
}

.faq-acc[open] .faq-plusminus::after {
  transform: scaleY(0);
}

.faq-antwort {
  padding: 0 1.25rem 1.15rem;
  color: #cdd6c2;
}

.faq-antwort p {
  margin: 0 0 0.6rem;
  max-width: 65ch;
}

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

.faq-antwort a {
  color: var(--accent-hi);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.faq-antwort a:hover {
  border-bottom-color: var(--accent-hi);
}

.faq-horizont {
  border: none;
  height: 1px;
  margin: 2.2rem 0 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 30%, var(--border)),
    transparent
  );
}

/* ---------- FAQ: leerer Suchzustand + Kontakt ---------- */
.faq-keine-treffer {
  text-align: center;
  padding: 3rem 0 2rem;
  color: var(--muted);
}

.faq-keine-treffer svg {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--brand-light);
  margin-bottom: 0.75rem;
}

.faq-keine-treffer h2 {
  color: var(--fg);
  font-size: 1.3rem;
  margin: 0 0 0.4rem;
}

.faq-keine-treffer p {
  max-width: 30rem;
  margin: 0 auto 1.4rem;
}

.faq-kontakt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 3.5rem 0 0;
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--bg-tief);
  padding: 4.5rem 1.25rem 5rem;
}

.faq-kontakt-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.faq-kontakt-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}

.faq-kontakt-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      85% 90% at 50% 115%,
      color-mix(in srgb, var(--accent) 18%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg-tief) 72%, transparent) 35%,
      color-mix(in srgb, var(--bg-tief) 82%, transparent) 100%
    );
}

.faq-kontakt h2 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
}

.faq-kontakt p {
  color: var(--muted);
  max-width: 33rem;
  margin: 0 auto 1.7rem;
}

.link-liste a:hover {
  background: var(--surface);
}

.land-karten {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.land-karten a {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.9rem 1rem;
  color: var(--fg);
}

.land-karten a:hover {
  border-color: var(--brand);
}

.land-karten strong {
  display: block;
  margin-bottom: 0.15rem;
}

.land-karten span {
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---------- Jagdzeiten-Karte (#1352) ----------
 * Die anklickbare Deutschlandkarte ueber der Laenderliste. Die Flaechen tragen
 * bis zum Skript eine neutrale Fuellung: Ohne JavaScript soll die Karte nicht
 * halbfertig wirken, sondern schlicht eine Uebersicht sein. */
.jagdzeiten-karte {
  margin: 1.25rem 0 0;
}

.karte-buehne {
  position: relative;
  max-width: 27rem;
  margin: 0 auto;
}

.karte-svg {
  display: block;
  width: 100%;
  height: auto;
  /* Die viewBox gibt das Seitenverhaeltnis vor, damit die Flaeche schon vor dem
   * Zeichnen steht und die Liste darunter nicht springt. */
  aspect-ratio: 700 / 946;
}

.karte-land path {
  /* Traegt bis zum Skript und ohne JavaScript dauerhaft. Bewusst nicht
   * `--surface-2`: Das steht zu nah am Seitenhintergrund, die Karte saehe aus
   * wie ein nicht geladener Platzhalter statt wie eine schlichte Uebersicht. */
  fill: var(--brand-dark);
  stroke: var(--bg);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: fill 120ms ease;
}

/* Hervorhebung ueber die Flaeche, nicht nur ueber die Kontur: Ein SVG zeichnet
 * Geschwister in Dokumentreihenfolge, also uebermalen spaeter kommende Nachbarn
 * einen Teil der hervorgehobenen Grenzlinie. Das aktive Land dafuer ans Ende zu
 * schieben wuerde die Tabreihenfolge durcheinanderbringen. Die aufgehellte
 * Flaeche ist unabhaengig davon immer vollstaendig zu sehen. */
.karte-land:hover path,
.karte-land:focus-visible path {
  filter: brightness(1.4);
  stroke: var(--accent-hi);
  stroke-width: 2.5;
}

.karte-land:focus {
  outline: none;
}

.karte-land:focus-visible path {
  stroke-width: 3.5;
}

/* Stand-Zeile unter dem H1 (#1373): Datum und Umfang stehen sichtbar da, wo
   Mensch und Antwortmaschine sie zuerst suchen — bisher steckten sie nur im
   Quellenkasten weiter unten. Mono, weil es Messwerte sind.

   Eigener Name statt ".stand": Diese Klasse gibt es schon fuer den
   abgesetzten Nachweis am Fuss von Inhaltsseiten (Rahmen oben, viel Abstand).
   Bei gleicher Spezifitaet haetten sich beide Regeln vermischt — die
   Stand-Zeile haette Rahmen und Abstand geerbt, die sie nicht will. */
.jz-stand {
  margin: 0 0 1.1rem;
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Die Zahl auf dem Land ist ein Messwert (offene Jagdzeiten), kein Titel —
   Mono wie alle Messwerte im v2-System (#1373). */
.karte-zahl {
  font-family: var(--schrift-mono);
  font-size: 24px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--fg);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.karte-zahl.auf-hell {
  fill: #14200f;
}

.karte-tipp {
  position: absolute;
  z-index: 3;
  max-width: 15rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.82rem;
  line-height: 1.35;
  box-shadow: 0 8px 22px rgb(0 0 0 / 45%);
  pointer-events: none;
}

.karte-legende {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem auto 0;
  max-width: 27rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.karte-skala {
  flex: 0 0 4.5rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  /* Dieselben Endpunkte wie die Skala im Skript. */
  background: linear-gradient(90deg, rgb(45 74 52), rgb(200 155 84));
}

.jagdzeiten-karte figcaption {
  margin: 0.9rem auto 0;
  max-width: 34rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

.karte-quelle {
  margin: 1.25rem 0 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.karte-quelle a {
  text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
  .karte-lebt .karte-land path {
    animation: karte-auf 420ms ease both;
  }

  .karte-lebt .karte-zahl {
    animation: karte-auf 420ms ease both 180ms;
  }
}

@keyframes karte-auf {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---------- Werkzeuge (Buechsenlicht, Mondkalender) ---------- */
.werkzeug {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.25rem;
  margin: 1.5rem 0 2rem;
}

.werkzeug-bedienung {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: flex-end;
}

.werkzeug-bedienung label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 12rem;
  font-size: 0.82rem;
  color: var(--brand-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.werkzeug-bedienung select,
.werkzeug-bedienung input {
  /* 44 px Mindesthoehe auf Touch. */
  min-height: 2.75rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
}

.werkzeug-bedienung .btn {
  min-height: 2.75rem;
  flex: 0 1 auto;
}

.werkzeug-status {
  font-size: 0.85rem;
  color: var(--brand-light);
  margin: 0.75rem 0 0;
  min-height: 1.2rem;
}

.werkzeug-ausgabe {
  margin-top: 1rem;
}

.werkzeug-kopf {
  color: var(--fg);
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.werkzeug-werte {
  margin: 0;
  display: grid;
  gap: 0;
}

.werkzeug-gruppe h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-light);
  margin: 1.25rem 0 0.35rem;
}

.werkzeug-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}

.werkzeug-zeile dt {
  color: var(--muted);
}

.werkzeug-zeile dd {
  margin: 0;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.werkzeug-hinweis {
  display: block;
  font-size: 0.78rem;
  color: var(--border);
}

.werkzeug-fuss {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 1.25rem 0 0;
}

/* Aktive Navigation kennzeichnen. */
.nav-links a[aria-current='page'] {
  color: var(--fg);
}

/* =========================================================================
 * Design-System v2 „Kommandozentrale" — Komponenten (#1367)
 *
 * Bausteine, aus denen Startseite und Jagdtag-Seite gebaut werden. Sie liegen
 * hier zentral, damit dieselbe Karte nicht auf zwei Seiten zweimal entsteht
 * und dann auseinanderlaeuft.
 * ========================================================================= */

/* ---------- Chips: kurze Vertrauens-Aussagen ---------- */
.chip-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.88rem;
}

.chip svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--success);
}

/* ---------- Produkt-Tile: Screenshot oder Clip im Rahmen ----------
 * Der Gold-Schimmer liegt als statischer Verlauf dahinter — Tiefe ohne
 * Bewegung und ohne Laufzeit-Filter.
 */
.produkt {
  position: relative;
}

.produkt::before {
  content: '';
  position: absolute;
  inset: -8% 12% auto;
  height: 70%;
  background: radial-gradient(
    52% 62% at 50% 42%,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent 70%
  );
  filter: blur(30px);
  pointer-events: none;
}

.produkt-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius-gross);
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.produkt-tile > video,
.produkt-tile > img,
.produkt-rahmen > video,
.produkt-rahmen > img {
  display: block;
  width: 100%;
  height: auto;
}

.produkt-rahmen {
  position: relative;
}

/* Fensterleiste ueber dem Screenshot: macht aus dem Bild einen Beleg. */
.produkt-leiste {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--linie);
  background: var(--surface-2);
}

.produkt-leiste i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--linie-hell);
}

.produkt-leiste span {
  margin-left: 0.6rem;
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
}

/* ---------- Bento-Raster ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.zelle {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--surface);
  transition:
    border-color var(--dauer-schnell) ease,
    transform var(--dauer-schnell) ease;
}

.zelle p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

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

@media (prefers-reduced-motion: no-preference) {
  .zelle:hover {
    border-color: var(--linie-hell);
    transform: translateY(-2px);
  }
}

.z-voll {
  grid-column: span 6;
}

.z-gross {
  grid-column: span 4;
}

.z-halb {
  grid-column: span 3;
}

.z-klein {
  grid-column: span 2;
}

/* Bild sitzt buendig in der Zelle — der Innenabstand wird zurueckgenommen. */
.zelle-bild {
  margin: 0.8rem -1.5rem -1.5rem;
  border-top: 1px solid var(--linie);
}

.zelle-bild img,
.zelle-bild video {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}

@media (max-width: 900px) {
  .bento {
    grid-template-columns: 1fr 1fr;
  }

  .z-voll,
  .z-gross,
  .z-halb,
  .z-klein {
    grid-column: span 2;
  }
}

/* ---------- Daten-Reihe: Messwerte als Messwerte ---------- */
.daten {
  display: grid;
  gap: 0.1rem;
}

.daten-reihe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.92rem;
}

.daten-reihe:last-child {
  border-bottom: 0;
}

.daten-reihe .k {
  color: var(--ink-3);
}

.daten-reihe .v {
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--fg);
}

.daten-reihe .v.hell {
  color: var(--accent-hi);
}

/* ---------- Wildkamera-Beleg: Bild mit Erkennungs-Label ---------- */
.ki-rahmen {
  position: relative;
  margin: 0.8rem -1.5rem -1.5rem;
  border-top: 1px solid var(--linie);
}

.ki-rahmen img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.ki-label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--success);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  font-family: var(--schrift-mono);
  font-size: 0.78rem;
  color: var(--fg);
}

.ki-label b {
  font-weight: 400;
  color: var(--success);
}

/* ---------- Zahlen-Band ---------- */
.zahlen {
  border-block: 1px solid var(--linie);
  background: var(--surface);
}

.zahlen-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.zahl {
  padding: 1.6rem 1rem;
  border-left: 1px solid var(--linie);
  text-align: center;
}

.zahl:first-child {
  border-left: 0;
}

.zahl b {
  display: block;
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 400;
  color: var(--fg);
}

.zahl span {
  font-size: 0.85rem;
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .zahlen-raster {
    grid-template-columns: 1fr 1fr;
  }

  .zahl:nth-child(3) {
    border-left: 0;
  }

  .zahl:nth-child(n + 3) {
    border-top: 1px solid var(--linie);
  }
}

/* ---------- Stimmen ---------- */
.stimmen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.stimme {
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--surface);
}

.stimme p {
  margin: 0;
  color: var(--ink-2);
}

.stimme footer {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.stimme footer b {
  display: block;
  font-weight: 500;
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .stimmen {
    grid-template-columns: 1fr;
  }
}

/* ---------- Ablauf: nummerierte Schritte ---------- */
.ablauf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  counter-reset: schritt;
}

.schritt {
  counter-increment: schritt;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie-hell);
}

.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--schrift-mono);
  font-size: 0.85rem;
  color: var(--accent);
}

.schritt h3 {
  margin: 0.5rem 0 0;
}

.schritt p {
  margin: 0.4rem 0 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

@media (max-width: 760px) {
  .ablauf {
    grid-template-columns: 1fr;
  }
}

/* ---------- Vormerk-Formular (Early Access) ---------- */

/* Beschriftung nur fuer Screenreader: Sichtbar traegt der Platzhalter die
   Information, aber ein Feld ohne Label ist fuer Vorlesesoftware stumm. */
.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vormerken {
  display: flex;
  gap: 0.7rem;
  max-width: 30rem;
}

/* Traegt das Label; das Feld darin nimmt die volle Breite. */
.vormerken-feld {
  flex: 1;
  min-width: 0;
}

.vormerken input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}

.vormerken input::placeholder {
  color: var(--ink-3);
}

.vormerken button {
  /* Trefferflaeche wie im Menue — 44 px inklusive Polster. */
  min-height: 44px;
  white-space: nowrap;
}

/* Waehrend der Anfrage bleibt der Knopf sichtbar, aber offensichtlich inaktiv —
   ein verschwindender Knopf laesst den Absender raten, ob etwas passiert. */
.vormerken button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.vormerken-meldung {
  margin: 0.75rem 0 0;
  /* Platz reservieren, damit die Meldung den Inhalt darunter nicht schiebt. */
  min-height: 1.4em;
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* Der Zustand steht am Formular, die Meldung daneben — deshalb der
   Geschwister-Selektor statt einer zweiten Klasse am Text. */
.vormerken[data-zustand='fertig'] + .vormerken-meldung {
  color: var(--success);
}

.vormerken[data-zustand='fehler'] + .vormerken-meldung {
  color: var(--accent-hi);
}

/* Steht nur da, wenn das Skript nicht laeuft — dann ist es der einzige Weg
   weiter und darf nicht wie eine Fussnote aussehen. */
.vormerken-ohne-js {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  color: var(--accent-hi);
}

.vormerken-ohne-js a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vormerken-klein {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.vormerken-klein a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .vormerken {
    flex-direction: column;
  }
}

/* Bestaetigungsseite des Double-Opt-in. */
.bestaetigt {
  display: flex;
  align-items: center;
  min-height: 60vh;
}

.bestaetigt h1 {
  margin: 0.6rem 0 0.8rem;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.bestaetigt p {
  max-width: 34rem;
  color: var(--ink-2);
}

.bestaetigt-weiter {
  margin-top: 2rem;
}

/* ---------- Auftauchen beim Scrollen ----------
 * Ohne JavaScript, ueber die Scroll-Zeitleiste des Browsers: laeuft im
 * Compositor (kostet kein INP) und kann nicht haengenbleiben.
 *
 * Der unsichtbare Startzustand liegt AUSSCHLIESSLICH im `@supports`-Block.
 * Wo `animation-timeline` fehlt (Firefox bis auf Weiteres), gibt es schlicht
 * keinen Effekt — und keinen Inhalt, der unsichtbar bleibt. Genau deshalb
 * steht `opacity: 0` nicht ungeschuetzt weiter oben.
 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .zeig {
      animation: auftauchen linear both;
      animation-timeline: view();
      /* Beginnt, sobald das Element den Viewport betritt, und ist bei knapp
         einem Viertel Ueberdeckung fertig — sonst liest man in die Animation
         hinein. Was beim Laden schon sichtbar ist, steht sofort fertig da. */
      animation-range: entry 5% cover 22%;
    }
  }
}

@keyframes auftauchen {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Trefferflaechen eigenstaendiger Ziele (#1396) ----------
 *
 * Hausregel: mind. 44x44 px auf Touch-Viewports (CLAUDE.md Punkt 8). Die Zahl
 * kommt aus Apple HIG und WCAG 2.5.5 "Target Size (Enhanced)" -- das ist die
 * AAA-Stufe. Die AA-Stufe (2.5.8 "Target Size (Minimum)") verlangt nur 24x24;
 * hier wird bewusst die strengere angelegt. Beide Kriterien nennen dieselben
 * Ausnahmen, deshalb stehen sie unten ohne Nummer.
 *
 * Bei 375 px durchgemessen lagen fuenf Muster unter 44 px -- Fusszeile 24 px,
 * Brotkrumen 17 px, Karten-Verweise 18 px, Abschnitt-Verweise 20 px,
 * FAQ-Verweise 21 px.
 *
 * `inline-flex` statt Polster am Inline-Element: Ein `padding` an einem
 * Inline-Link waechst optisch, traegt aber nicht zur Zeilenhoehe bei -- die
 * Trefferflaeche bliebe dieselbe und das Polster ueberlappte den Text darueber.
 *
 * ZWEI AUSNAHMEN, wortgleich in 2.5.5 wie 2.5.8, bewusst so gelassen:
 *
 * 1. Links im Fliesstext ("Inline"): Ihre Groesse ist durch die Zeilenhoehe des
 *    Satzes bestimmt, in dem sie stehen. Sie aufzupolstern zerrisse den Absatz.
 * 2. Die Bundeslaender der Deutschlandkarte ("Equivalent"): Berlin misst
 *    23x19 px, Hamburg 21x20 px, und als SVG-Pfad laesst sich das nicht
 *    polstern. Direkt darunter steht dieselbe Auswahl als Liste mit 335x89 px
 *    je Eintrag -- ein gleichwertiges Ziel auf derselben Seite. Wer die Liste
 *    entfernt, muss die Karte anders loesen. */
.breadcrumb a,
.foot-links a,
.zelle-mehr a,
.abschnitt-fuss a,
.faq-antwort p > a:only-child {
  display: inline-flex;
  align-items: center;
  /* Auch quer: Kurze Beschriftungen wie „FAQ" (24 px) und „Start" (30 px)
     waeren sonst hoch genug, aber zu schmal. `justify-content` haelt den Text
     dabei in der Mitte des Ziels statt am linken Rand. */
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

/* Die Wortmarke ist der Weg zurueck zur Startseite -- und war 34 px hoch. */
.brand {
  min-height: 44px;
}

/* Das Polster der Links traegt den vertikalen Abstand jetzt selbst; der alte
   Zeilenabstand kaeme oben drauf und blaehte die Fusszeile auf. Der
   horizontale Abstand bleibt, er trennt die Ziele nebeneinander. */
.foot-links {
  column-gap: 1.25rem;
  row-gap: 0;
}

/* Dasselbe fuer die Brotkrumen: Das Polster der Zeile wandert in die Links.
   `align-items: center` haelt die Trenner (›) auf der Textmitte -- ohne das
   klebten sie am oberen Rand der nun 44 px hohen Zeile. */
.breadcrumb ol {
  align-items: center;
  padding: 0;
}

/* ---------- Tagesuhr (#1408) ----------
 *
 * Das 24-h-Zifferblatt aus der App (ADR-66), hier auf der Website. Geometrie
 * und Modell kommen aus `@huntra/tagesuhr`; dieses Stylesheet ist die
 * Site-Uebersetzung der Farb-Tabelle des Pakets — `apps/web` uebersetzt
 * dieselbe Tabelle in Tailwind-Klassen.
 *
 * Zwei Betriebsarten, ein Aussehen: Auf /jagdtag/ steht die Uhr fertig im
 * HTML (im Build gerechnet), auf /buechsenlicht/ zeichnet das Skript sie neu.
 * Beide bekommen dasselbe Markup aus `lib/tagesuhr-svg.mjs`.
 *
 * Trefferflaechen: Die Ringsegmente sind rund 13 px breit und damit eine
 * dokumentierte Ausnahme von der 44-px-Hausregel — dieselbe Begruendung wie
 * bei der Deutschlandkarte (WCAG 2.5.8, "Equivalent"). Das grosse Ziel ist die
 * Ereignis-Liste darunter, deren Zeilen 44 px hoch sind. Wer die Liste
 * entfernt, muss den Kreis anders loesen. */
.tagesuhr {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
  margin: 0;
}

@container (min-width: 34rem) {
  .tagesuhr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .tagesuhr .uhr-kopf,
  .tagesuhr .uhr-fuss,
  .tagesuhr > figcaption {
    grid-column: 1 / -1;
  }

  /* Neben der Uhr darf die Liste deren Hoehe nutzen. */
  .tagesuhr .uhr-liste {
    max-height: 30rem;
  }
}

.uhr-kopf {
  margin: 0;
  font-family: var(--schrift-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--brand-light);
}

.uhr-buehne {
  display: grid;
  gap: 0.75rem;
}

.uhr-svg {
  display: block;
  width: 100%;
  height: auto;
  /* Quadratisch wie die viewBox — verhindert einen Layout-Sprung, bevor das
     SVG gemessen ist. */
  aspect-ratio: 1;
}

/* ---- Grundringe und Skala ---- */
.uhr-grund {
  stroke: var(--surface-2);
}

.uhr-grund-leise {
  stroke: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

.uhr-tick {
  stroke: var(--border);
}

.uhr-tick-gross {
  stroke: var(--muted);
}

.uhr-stunde {
  fill: var(--muted);
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Ringfarben: die Uebersetzung der Token-Tabelle ---- */
[data-ring='licht'] .uhr-flaeche {
  fill: color-mix(in srgb, var(--accent) 50%, transparent);
}

[data-ring='jagdzeit'] .uhr-flaeche {
  fill: color-mix(in srgb, var(--success) 45%, transparent);
}

[data-ring='buechsenlicht'] .uhr-flaeche {
  fill: color-mix(in srgb, var(--success) 50%, transparent);
}

[data-ring='solunar'] .uhr-flaeche {
  fill: var(--accent);
}

[data-ring='mondlicht'] .uhr-flaeche {
  fill: color-mix(in srgb, var(--warn) 60%, transparent);
}

/* Varianten **innerhalb** eines Rings — keine eigenen Kategorien, deshalb
   nicht in der Legende. Bewusst eine Stufe spezifischer als die Ringregeln
   darueber: Bei gleicher Spezifitaet entschiede die Quelltext-Reihenfolge,
   und die haelt beim naechsten Umbau niemand im Kopf. */
[data-ring] .uhr-flaeche[data-key='daemmerung-morgen'],
[data-ring] .uhr-flaeche[data-key='daemmerung-abend'] {
  fill: color-mix(in srgb, var(--accent) 25%, transparent);
}

[data-ring] .uhr-flaeche[data-key='solunar-minor'] {
  fill: color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Die Nachtjagdzeit ist gedaempft und neutral getoent, nicht in einer
   Signalfarbe: Nachts ruht die Jagd nur auf den meisten Wildarten — sie ist
   kein Verbot, aber auch keine Gelegenheit wie die Tageszeit. Rot haette
   gelogen. */
[data-ring] .uhr-flaeche[data-key='jagdzeit-nacht'] {
  fill: color-mix(in srgb, var(--muted) 25%, transparent);
}

/* ---- Marken, Kappen, Zentrum, Zeiger ---- */
.uhr-marke {
  fill: var(--fg);
}

.uhr-marke-mond {
  fill: color-mix(in srgb, var(--fg) 70%, transparent);
}

.uhr-kappe {
  stroke: color-mix(in srgb, var(--fg) 60%, transparent);
}

.uhr-zentrum circle {
  fill: var(--bg);
}

.uhr-mond-grund {
  fill: var(--surface-2);
}

.uhr-mond-hell {
  fill: var(--fg);
}

.uhr-mond-rand {
  stroke: var(--border);
  fill: none;
}

.uhr-jetzt line {
  stroke: var(--danger);
}

.uhr-jetzt circle {
  fill: var(--danger);
}

/* ---- Auswahl: Kontur statt Farbwechsel ---- */
.uhr-treffer {
  cursor: pointer;
}

.uhr-segment[data-gewaehlt] .uhr-flaeche {
  stroke: var(--fg);
  stroke-width: 2.5;
}

/* Nur mit Zeiger: Auf Touch bliebe der Zustand nach einem Tipp kleben. */
@media (hover: hover) {
  .uhr-segment:hover .uhr-flaeche {
    stroke: color-mix(in srgb, var(--fg) 50%, transparent);
    stroke-width: 2;
  }
}

/* Der gewaehlte Ring bleibt hell, die uebrigen treten zurueck. */
.uhr-svg[data-ring-aktiv] .uhr-ring:not([data-aktiv]) {
  opacity: 0.4;
}

/* ---- Info-Zeile ---- */
.uhr-info {
  margin: 0;
  min-height: 2.6em;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.uhr-info b {
  color: var(--fg);
}

/* ---- Legende ---- */
.uhr-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--ink-2);
}

.uhr-legende li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.uhr-tupfer {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex: none;
}

.uhr-tupfer[data-ring='licht'] {
  background: color-mix(in srgb, var(--accent) 50%, transparent);
}

.uhr-tupfer[data-ring='jagdzeit'] {
  background: color-mix(in srgb, var(--success) 45%, transparent);
}

.uhr-tupfer[data-ring='buechsenlicht'] {
  background: color-mix(in srgb, var(--success) 50%, transparent);
}

.uhr-tupfer[data-ring='solunar'] {
  background: var(--accent);
}

.uhr-tupfer[data-ring='mondlicht'] {
  background: color-mix(in srgb, var(--warn) 60%, transparent);
}

/* ---- Ereignis-Liste: das grosse Ziel und die Textalternative ---- */
.uhr-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* Die Liste scrollt in sich, statt die Seite zu verlaengern. Gestapelt
     (schmaler Container) faellt sie kuerzer aus: Dort steht die Uhr darueber,
     und 17 Zeilen in voller Hoehe machten aus einem Kapitel eine Bildschirmseite. */
  max-height: 22rem;
  overflow-y: auto;
}

.uhr-zeile {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  /* 44 px Trefferflaeche (#1396) — hier traegt sie zusaetzlich die
     WCAG-Ausnahme der Ringsegmente. */
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.uhr-zeile:hover {
  background: var(--surface-2);
}

.uhr-zeile[aria-pressed='true'] {
  border-left-color: var(--fg);
  background: var(--surface-2);
  color: var(--fg);
}

.uhr-zeit {
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.uhr-name {
  color: var(--fg);
}

.uhr-zusatz {
  grid-column: 3;
  font-size: 0.78rem;
  color: var(--ink-3);
}

.uhr-fuss {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-3);
}