/* ══════════════════════════════════════════════════════════════════
   hof.css — das gemeinsame Aussehen aller Seiten der Hanne-Holstein-Farm
   ══════════════════════════════════════════════════════════════════

   Herkunft: 07.09.2026 aus dem <style>-Block von index.html herausgeloest,
   Zeile fuer Zeile unveraendert uebernommen (516 Zeilen).

   WARUM AUSGELAGERT — die Begruendung gehoert hierher, damit sie niemand
   versehentlich rueckgaengig macht:
   Am 06.09. wurde die neu gebaute Startseite mit eingebettetem CSS nach
   site/ uebernommen. Die sechs Unterseiten luden weiter style.css im Stand
   vom 03.09. Ergebnis: Wer auf der Startseite "Milch" anklickte, wechselte
   sichtbar den Stil — andere Schrift, anderes Raster, andere Farben.
   Der Bruch entstand also GENAU DURCH das Einbetten. Wer das CSS wieder in
   eine einzelne Seite zurueckschiebt, baut denselben Fehler erneut ein.

   PREIS UND GEGENWERT, gemessen statt geschaetzt:
   Eine externe Datei im <head> blockiert das Rendern und kostet beim ersten
   Aufruf einen zusaetzlichen Netzwerk-Roundtrip. Dafuer wird sie ab der
   zweiten Seite aus dem Cache bedient — eingebettetes CSS wird auf allen
   sieben Seiten neu uebertragen. Der Besucher, der von der Startseite
   weiterklickt, ist der Kunde; der zahlt beim Einbetten siebenmal.
   Die LCP-Nachmessung steht im Nachtbericht vom 07.09.

   RELATIVE PFADE: Diese Datei liegt im selben Ordner wie die HTML-Dateien.
   Das eine url() darin (schriften/Fraunces.woff2) bleibt dadurch gueltig.
   Beim Verschieben in einen Unterordner muesste es angepasst werden.

   style.css ist der ALTBESTAND vom 03.09. und wird nur noch von den
   Unterseiten geladen, die noch nicht umgestellt sind. Sie faellt weg,
   sobald die letzte Seite haengt. Bis dahin nicht anfassen.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   HANNE-HOLSTEIN-FARM — Startseite, Entwurf v4
   Gestaltungssprache 1:1 aus entwurf-v4/hero-ruhig.html uebernommen
   und nach unten fortgesetzt. Texte woertlich aus site/index.html.

   Gerechnet (WCAG 2.1):
     --text     #2B2620 auf --flaeche #EDE8DB = 12,25:1
     --text     #2B2620 auf --karte   #FCFAF4 = 14,36:1
     --text-mild#645B49 auf --karte           =  6,42:1
     --text-mild#645B49 auf --flaeche         =  5,48:1
     --ziegel-dunkel #7A3826 auf --flaeche    =  7,09:1
     --ziegel-dunkel #7A3826 auf --karte      =  8,31:1
     --ziegel   #9C4A31 auf --karte           =  5,85:1
     weiss      #FFFFFF auf --ziegel          =  6,11:1
     --hell     #EDE8DB auf --dunkel #2B2620  = 12,25:1
     #F2C9A0 (aus der Vorlage) auf --dunkel   =  9,74:1

   Abstaende (margin/padding/gap) nur aus 0 · 4 · 8 · 16 · 24 · 32 · 40 · 48 · 64.
   Kein JavaScript ausser dem JSON-LD-Block. Null Anfragen an fremde Server.
   Jede Bewegung ist in prefers-reduced-motion abgeschaltet.
   ══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Fraunces";
  src: url("schriften/Fraunces.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --flaeche:      #EDE8DB;
  --karte:        #FCFAF4;
  --linie:        #D2C9B0;
  --text:         #2B2620;
  --text-mild:    #645B49;
  --ziegel:       #9C4A31;
  --ziegel-dunkel:#7A3826;
  --dunkel:       #2B2620;
  --hell:         #EDE8DB;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px; line-height: 1.6;
  background: var(--karte); color: var(--text);
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--ziegel); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--karte); padding: 16px; z-index: 10; }
.skip:focus { left: 16px; }

/* ══ Kopfleiste ════════════════════════════════════════════════ */

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 24px 40px;
  border-bottom: 1px solid var(--linie);
  background: var(--karte);
}
.topbar__mark {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700; font-size: 22px; line-height: 1.2;
  text-decoration: none; margin-right: auto; letter-spacing: .01em;
  display: inline-flex; align-items: center; min-height: 44px;
}
.topbar__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.topbar__nav a {
  text-decoration: none; font-size: 16px;
  padding: 8px 16px; border-radius: 4px;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: background-color 160ms ease, color 160ms ease;
}
.topbar__nav a:hover { background: var(--flaeche); }
/* Aktivmarkierung nicht nur ueber Farbe (WCAG 1.4.1): zusaetzlich fett. */
.topbar__nav a[aria-current="page"] {
  background: var(--flaeche); color: var(--ziegel-dunkel); font-weight: 700;
}
.topbar__ort {
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mild);
}

/* ══ Erster Bildschirm, geteilt — aus hero-ruhig.html ══════════ */

.hero {
  display: grid;
  grid-template-columns: 5fr 7fr;   /* bewusst ungleich */
  min-height: calc(100svh - 92px);
  background: var(--flaeche);
}

.hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 40px;
}

.hero__eyebrow {
  margin: 0 0 16px;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--ziegel-dunkel);
}

.hero__head {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.04; letter-spacing: -0.02em;
  margin: 0 0 24px; max-width: 14ch;
  text-wrap: balance;
}
.hero__head em { font-style: normal; display: block; font-weight: 800; color: var(--ziegel); }

.hero__detail { margin: 0 0 8px; font-size: clamp(18px, 1.6vw, 21px); max-width: 34ch; }
.hero__ort    { margin: 0 0 32px; font-size: 16px; color: var(--text-mild); }

.fakten {
  display: flex; flex-wrap: wrap; gap: 40px;
  margin: 0 0 32px; padding: 24px 0 0;
  border-top: 1px solid var(--linie);
}
.fakten div { margin: 0; }
.fakten dt {
  margin: 0 0 4px; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mild);
}
.fakten dd {
  margin: 0; font-family: "Fraunces", Georgia, serif;
  font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.1;
}
.fakten__einheit { font-family: inherit; font-size: 14px; font-weight: 400; color: var(--text-mild); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 16px 32px;
  background: var(--ziegel); color: #FFFFFF;
  font-weight: 600; font-size: 18px; text-decoration: none; border-radius: 4px;
  transition: transform 160ms ease, background-color 160ms ease;
}
.knopf:hover { background: var(--ziegel-dunkel); transform: translateY(-2px); }

/* Abweichung von der Vorlage, begruendet: dort ist der Zweitweg ein reiner
   Inline-Link ohne vertikales Padding. Ein solcher Link erfuellt SC 2.5.8
   nie — Chromium misst die Glyphenhoehe (18 px), nicht die Zeilenhoehe.
   Deshalb inline-flex mit 44 px Mindesthoehe; der Abstand nach oben wandert
   von der Marge (16) in die Kastenhoehe, optisch bleibt es gleich. */
.hero__zweitweg { margin: 8px 0 0; font-size: 16px; color: var(--text-mild); }
.hero__zweitweg a {
  color: var(--ziegel-dunkel);
  display: inline-flex; align-items: center; min-height: 44px;
}

.hero__bildseite { position: relative; overflow: hidden; }
.hero__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}

/* ══ Zonen und Abschnitte ══════════════════════════════════════ */

.zone { position: relative; isolation: isolate; }
.zone--karte   { background: var(--karte); }
.zone--flaeche { background: var(--flaeche); }

.abschnitt { max-width: 1200px; margin: 0 auto; padding: 64px 40px; }

.abschnitt__eyebrow {
  margin: 0 0 8px;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--ziegel-dunkel);
}
.abschnitt__titel {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 600;
  line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 24px;
  max-width: 16ch;
}
.lede { margin: 0 0 32px; max-width: 60ch; color: var(--text-mild); }
.lede:last-child { margin-bottom: 0; }

/* ══ Wandernde Lichtflaechen ═══════════════════════════════════
   06.09.2026, zweiter Anlauf. Die erste Fassung war mit 1,17:1 gegen
   den Untergrund praktisch unsichtbar — im Kommentar stand beschoenigend
   "bewusst kaum merklich". Norman hat zu Recht gefragt, ob ueberhaupt
   etwas gebaut wurde.

   Jetzt gerechnet statt geschaetzt:
     --flaeche-tief #E1DBC6 auf --karte   #FCFAF4  = 1,33:1  (klar sichtbar)
     --sand         #E8D8C2 auf --flaeche #EDE8DB  = 1,14:1  (deutlich sichtbar)
   Obergrenze war der Text, nicht der Geschmack: Bei #D9D1B8 faellt der
   Nebentext auf 4,39:1 und damit unter die Vorschrift. Die gewaehlten
   Toene halten den Nebentext bei 4,83:1 bzw. 4,80:1.

   Ausgeblendet wird mit rgba(...,0) statt mit `transparent`. `transparent`
   ist rgba(0,0,0,0) — beim Verlauf mischt sich Schwarz ein und es entsteht
   ein grauer Saum.
   Bewegt werden nur Hintergrundpositionen, nicht der Kasten; es kann
   also nichts ueber Nachbarabschnitte laufen. */

.licht::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 22% 24%, rgba(225,219,198,.95) 0%, rgba(225,219,198,0) 70%),
    radial-gradient(34% 42% at 78% 78%, rgba(232,216,194,.80) 0%, rgba(232,216,194,0) 72%);
  background-size: 180% 180%, 200% 200%;
  background-position: 0% 0%, 100% 100%;
  animation: lichtwandern 40s ease-in-out infinite alternate;
}
.licht--hell::before {
  background:
    radial-gradient(38% 46% at 22% 24%, rgba(255,253,247,.95) 0%, rgba(255,253,247,0) 70%),
    radial-gradient(34% 42% at 78% 78%, rgba(232,216,194,.85) 0%, rgba(232,216,194,0) 72%);
  background-size: 180% 180%, 200% 200%;
  animation-duration: 34s;
}
@keyframes lichtwandern {
  from { background-position:  0%  0%, 100% 100%; }
  to   { background-position: 62% 44%,  38%  56%; }
}

/* ══ Bildrahmen, ueberall gleich ═══════════════════════════════ */

.bildrahmen {
  display: block; margin: 0; overflow: hidden;
  border-radius: 8px; background: var(--flaeche);
}
.bildrahmen img {
  display: block; width: 100%; height: auto;
  transition: transform 240ms ease;
}
.bildrahmen:hover img { transform: scale(1.02); }

/* 06.09.: Diese Klasse stand im HTML, war aber nie definiert — das Bild
   lief dadurch auf volle Spaltenbreite und wurde von 788 auf 1120 px
   HOCHGERECHNET, also unscharf dargestellt (gemessen 0,70x).
   Ein Bild nie ueber seine echte Breite hinaus zeigen. 788 px ist die
   natuerliche Breite von hof.webp; darunter skaliert es normal mit.
   Merke: eine Klasse im HTML beweist nicht, dass es sie im CSS gibt. */
.bildrahmen--breit { max-width: 788px; margin: 0 0 32px; }

/* ══ Drei Vertrauensbelege ═════════════════════════════════════ */

.belege {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.beleg {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 8px; padding: 32px 24px;
  transition: transform 200ms ease, border-color 200ms ease;
}
.beleg:hover { transform: translateY(-2px); border-color: var(--ziegel); }
.beleg__wert {
  display: block; margin: 0 0 8px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px; font-weight: 600; line-height: 1.2;
  color: var(--ziegel-dunkel);
}
.beleg__text { display: block; color: var(--text-mild); max-width: 34ch; }

/* ══ Dunkles Band ══════════════════════════════════════════════ */

.band { background: var(--dunkel); color: var(--hell); }
.band__innen { max-width: 1200px; margin: 0 auto; padding: 48px 40px; }
.band p { margin: 0; max-width: 60ch; }
.band strong { color: #F2C9A0; }
.hinweis { font-size: 18px; }
.hinweis + .hinweis { margin-top: 16px; }

/* ══ Zeitachse ═════════════════════════════════════════════════ */

.zeitachse { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; }
.station { display: grid; grid-template-columns: 8ch 1fr; gap: 32px; align-items: start; }
.station__jahr {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px; font-weight: 600; line-height: 1.2;
  color: var(--ziegel-dunkel);
  padding: 4px 0 0;
}
.station__inhalt { display: grid; gap: 24px; }
.station__inhalt--medien { grid-template-columns: 5fr 7fr; align-items: start; }
.station__titel {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px; font-weight: 600; line-height: 1.2;
  margin: 0 0 8px;
}
.station__text p { margin: 0 0 16px; max-width: 60ch; color: var(--text-mild); }
.station__text p:last-child { margin-bottom: 0; }

/* ══ Streifen: Alltag auf dem Hof ══════════════════════════════ */

.streifen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.streifen__item {
  margin: 0; overflow: hidden; border-radius: 8px;
  background: var(--karte); border: 1px solid var(--linie);
  transition: transform 200ms ease, border-color 200ms ease;
}
.streifen__item:hover { transform: translateY(-2px); border-color: var(--ziegel); }
.streifen__item img {
  display: block; width: 100%; height: auto;
  transition: transform 240ms ease;
}
.streifen__item:hover img { transform: scale(1.02); }
.streifen__item figcaption { padding: 16px; font-size: 18px; color: var(--text-mild); }

/* ══ Hoftiere ══════════════════════════════════════════════════ */

.tiere__leit { margin: 0 0 48px; }
.tiere__leit figcaption { margin: 8px 0 0; font-size: 18px; color: var(--text-mild); }

.tiere { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.tier__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px; font-weight: 600; line-height: 1.2;
  margin: 0 0 8px;
}
.tier__text { margin: 0 0 24px; max-width: 60ch; color: var(--text-mild); }
.tier__bilder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ══ Hofkatzen ═════════════════════════════════════════════════ */

.stamm { display: grid; gap: 40px; }
.generation {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 8px; padding: 32px 24px;
}
.generation__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px;
  margin: 0 0 24px; font-size: 18px; font-weight: 400;
}
.generation__jahr {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px; font-weight: 600; color: var(--ziegel-dunkel);
}
.generation__label { color: var(--text-mild); }

.katzen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px;
}
.katze {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 8px; padding: 16px; text-align: center;
  transition: transform 200ms ease, border-color 200ms ease;
}
.katze:hover { transform: translateY(-2px); border-color: var(--ziegel); }
.katze__bild {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto 8px;
  border-radius: 50%; background: var(--flaeche); border: 1px solid var(--linie);
}
.katze__initial {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px; font-weight: 600; color: var(--ziegel-dunkel);
}
.katze__name { margin: 0 0 4px; font-weight: 600; }
.katze__meta { margin: 0; color: var(--text-mild); }
/* Das Abzeichen der Muetter wird nicht nur ueber die Rahmenfarbe getragen —
   die Zeile "Mama von ..." steht als Text daneben (WCAG 1.4.1). */
.katze__rolle { margin: 8px 0 0; color: var(--ziegel-dunkel); font-weight: 600; }
.katze--mama-zwei, .katze--mama-drei { border-color: var(--ziegel); border-width: 2px; }
.katze--offen { border-style: dashed; }

/* ══ Anfahrt ═══════════════════════════════════════════════════ */

.plan { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.adresse { font-style: normal; margin: 0 0 24px; }
.adresse span { display: block; }
.adresse__name { font-weight: 600; }
.telefon {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ziegel-dunkel); font-weight: 600;
}
.plan__hinweis { margin: 0; max-width: 60ch; color: var(--text-mild); }
.plan__karte { margin: 0; min-width: 0; }
.plan__karte img { display: block; width: 100%; height: auto; background: #18291e; }
.plan__karte a { display: block; }
.plan__karte a:focus-visible { outline: 3px solid var(--ziegel); outline-offset: 4px; }
.plan__karte figcaption { margin-top: 12px; color: var(--text-mild); font-size: .9375rem; line-height: 1.5; }
.plan .knopf { margin-top: 8px; text-align: center; }

/* ══ Galerie ═══════════════════════════════════════════════════ */

.galerie {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;
}
.galerie figcaption { margin: 8px 0 0; font-size: 18px; color: var(--text-mild); }
.galerie li { margin: 0; }

/* ══ Kontakt ═══════════════════════════════════════════════════
   Bewusst auffaellig, aber schwaecher als der Hauptknopf "Anfahrt":
   Umrissknopf statt Flaechenknopf. Damit bleibt genau ein optisch
   gleichrangig hervorgehobener Knopf im ersten Bildschirm. */

.frage {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--ziegel);
  border-radius: 8px;
  padding: 40px 32px;
  margin: 32px 0 0;
}
.frage__titel {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.2;
  margin: 0 0 8px;
}
.frage__text { margin: 0; max-width: 60ch; color: var(--text-mild); }
.frage__wege { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.knopf--schwach {
  background: transparent; color: var(--ziegel-dunkel);
  border: 2px solid var(--ziegel-dunkel);
  padding: 16px 24px;
  /* Die Mailadresse ist 29 Zeichen lang und ohne Trennstelle. Ohne diese
     zwei Zeilen kann sie bei 320 px aus dem Kasten laufen und Querscrollen
     ausloesen. */
  max-width: 100%; overflow-wrap: anywhere;
}
.knopf--schwach:hover { background: var(--karte); color: var(--ziegel-dunkel); }

.zeiten { margin: 0 0 24px; max-width: 60ch; }

/* ══ Fussbereich ═══════════════════════════════════════════════ */

.footer { background: var(--dunkel); color: var(--hell); }
.footer__innen { max-width: 1200px; margin: 0 auto; padding: 48px 40px; }
.footer p { margin: 0; }
.footer a {
  color: var(--hell);
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ══ Bewegung vollstaendig abschalten ══════════════════════════
   Jede oben gesetzte animation/transition ist hier einzeln benannt.
   Kein !important, keine Sammelregel — damit nachpruefbar bleibt,
   dass wirklich alles erfasst ist. */

@media (prefers-reduced-motion: reduce) {
  .licht::before,
  .licht--hell::before          { animation: none; }

  .knopf,
  .knopf--schwach,
  .topbar__nav a,
  .beleg,
  .katze,
  .streifen__item,
  .streifen__item img,
  .bildrahmen img               { transition: none; }

  .knopf:hover,
  .beleg:hover,
  .katze:hover,
  .streifen__item:hover,
  .streifen__item:hover img,
  .bildrahmen:hover img         { transform: none; }
}

/* ══ Handy ═════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .topbar { padding: 16px; gap: 8px; }
  .topbar__mark { font-size: 18px; width: 100%; margin-right: 0; }
  /* Breite war gemessen 42,19 px und damit unter dem 44-px-Hausmass
     (Pflichtuntergrenze 24 px war eingehalten). Befund web-pruefer 06.09. */
  .topbar__nav a { padding: 8px; font-size: 15px; min-width: 44px; justify-content: center; }
  .topbar__ort { display: none; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__text { padding: 24px 16px; order: 2; }
  .hero__bildseite { order: 1; height: 200px; }
  .hero__head { font-size: 34px; }

  /* Auf dem Handy wandert der Hauptknopf ueber Adresse und Faktenreihe.
     Grund: gemessen lag er bei 375x667 auf 873,6 px, also weit unter dem
     Falz bei 667 — der Handlungsaufruf war im ersten Bildschirm unsichtbar.
     Genau derselbe Befund gab es schon in der alten Fassung (752,6 px).
     Was/wo/wann bleibt oben: Ort steht in der Eyebrow, Tage in der h1,
     Uhrzeit in der Detailzeile.

     Zur Barrierefreiheit, ehrlich benannt: `order` verschiebt nur das Bild,
     nicht den Quelltext. Auf dem Handy weicht die Sehreihenfolge damit von
     der Vorlesereihenfolge ab (Screenreader hoert Adresse und Fakten VOR
     dem Knopf, das Auge sieht ihn davor).
     Das ist vertretbar, weil beide Reihenfolgen fuer sich sinnvoll sind
     (WCAG 1.3.2 verlangt eine sinnvolle, keine identische Folge) — und weil
     die verschobenen Bloecke KEIN fokussierbares Element enthalten. Die
     Tab-Folge bleibt deshalb unveraendert und deckt sich weiter mit dem
     Bild: erst "Anfahrt", dann der Zweitweg-Link.
     Waere in .hero__ort oder .fakten je ein Link, muesste das hier anders
     geloest werden — dann per Umbau im HTML, nicht per order. */
  .hero__eyebrow { order: 1; }
  .hero__head    { order: 2; }
  .hero__detail  { order: 3; margin-bottom: 16px; }
  .hero__aktion  { order: 4; margin-bottom: 24px; }
  .hero__ort     { order: 5; margin-bottom: 16px; }
  .fakten        { order: 6; gap: 24px; margin: 0; padding-top: 16px; }
  .hero__zweitweg{ order: 7; margin-top: 16px; }

  .abschnitt { padding: 40px 16px; }
  .band__innen { padding: 32px 16px; }
  .footer__innen { padding: 32px 16px; }

  .belege { grid-template-columns: 1fr; }
  .streifen { grid-template-columns: 1fr; }
  .tiere { grid-template-columns: 1fr; gap: 40px; }
  .tiere__leit { margin-bottom: 32px; }

  .zeitachse { gap: 40px; }
  .station { grid-template-columns: 1fr; gap: 8px; }
  .station__inhalt--medien { grid-template-columns: 1fr; }

  .plan { grid-template-columns: 1fr; gap: 32px; }
  .galerie { grid-template-columns: 1fr; }
  .frage { padding: 32px 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   BEFUND 07.09.2026 — vier Klassen stehen im HTML und fehlen hier
   ══════════════════════════════════════════════════════════════════

   Beim Herausloesen gemessen, nicht vermutet. Der Fehler ist AELTER als
   diese Datei — er steckte schon im eingebetteten Stylesheet vom 06.09.
   und wurde erst durch das Trennen von HTML und CSS sichtbar:

   .katze__zeichen   12x in index.html, 0 Regeln.  Das Maennlich-/
                     Weiblich-Symbol vor "Kater"/"Katze".
   .generation--zwei  1x, 0 Regeln.  Modifier ohne Wirkung.
   .generation--drei  1x, 0 Regeln.  Ebenso.
   .tier              2x, 0 Regeln.  BEM-Block ohne eigene Regel —
                     harmlos, .tier__name/__text/__bilder gibt es.

   NICHT REPARIERT, und das mit Absicht: Regeln dafuer zu erfinden hiesse,
   das Aussehen zu aendern, das Norman am 06.09. abgenommen hat. Sie zu
   loeschen waere Kosmetik an fremdem Werk.

   Es ist derselbe Fehlertyp wie .bildrahmen--breit in der Nacht zuvor:
   Klasse ins HTML geschrieben, Regel vergessen. Wer .katze__zeichen
   sucht und nicht findet: Hier ist der Grund.

   KORREKTUR 07.09. nach der Messung — mein erster Eintrag hier sagte
   "folgenlos". Das war zu schnell geurteilt. Der Prueflauf hat
   nachgesehen, was auf dem Bildschirm steht, statt nur im Quelltext:

   .generation--zwei/--drei IST NICHT FOLGENLOS. Im Lauftext daneben
   steht "Die Farbe zeigt, zu welcher Generation eine Katze gehoert."
   Alle drei Generationskacheln (2021/2025/2026) sehen aber identisch
   aus — es gibt keine Farbcodierung. Der Text verspricht dem Leser
   etwas, das die Seite nicht zeigt.

   Das ist keine tote Klasse, sondern eine halb gebaute Funktion.
   Zu entscheiden hat das Norman: Farbcodierung bauen ODER den Satz
   streichen. Beides waere eine Aenderung an seiner abgenommenen Seite.

   Nur .katze__zeichen und .tier sind wirklich folgenlos — die
   Geschlechtssymbole sitzen laut Screenshot korrekt inline.

   Lehre: "Im Quelltext nicht definiert" und "auf dem Bildschirm
   unsichtbar" sind zwei verschiedene Aussagen. Ich hatte die erste
   gemessen und die zweite behauptet.
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   ERGAENZUNG 07.09.2026 — Bausteine, die nur Unterseiten brauchen
   ══════════════════════════════════════════════════════════════════

   Alles oberhalb dieser Linie stammt unveraendert aus der Startseite.
   Was hier folgt, gibt es dort nicht, weil die Startseite kein Formular,
   keinen Seitenkopf ohne Hero und keinen langen Fliesstext hat.

   Regel fuer spaetere Ergaenzungen: KEINE neuen Farben, KEINE neuen
   Schriftgroessen ausserhalb der bestehenden Reihe, Abstaende nur aus
   8 / 16 / 24 / 32 / 40 / 48 / 64. Wer hier einen Freihandwert einsetzt,
   bricht die Einheitlichkeit an genau der Stelle, die diese Nacht
   repariert hat.
   ══════════════════════════════════════════════════════════════════ */


/* ── Seitenkopf ────────────────────────────────────────────────────
   Der Ersatz fuer das Hero auf Seiten, die kein grosses Bild haben.
   Gleiche Schrift, gleiche Groessenkurve wie .abschnitt__titel, aber
   eine Stufe groesser — es ist die h1 der Seite. */

.seitenkopf {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 40px 48px;
}

.seitenkopf__eyebrow {
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ziegel-dunkel);
}

.seitenkopf__titel {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  max-width: 18ch;
  /* Deutsche Komposita sprengen schmale Bildschirme — gemessen 07.09.2026:
     "Datenschutzerklärung" rendert bei 32 px Fraunces auf 336 px, der
     Innenraum bei 320 px Viewport bietet 272 px. Das Wort hat kein
     Leerzeichen und keinen Bindestrich, an dem es umbrechen koennte, also
     lief es ueber und erzeugte 40 px Querscrollen. Bei 360 px lag es
     exakt buendig am Rand — null Reserve.

     hyphens trennt nach deutschen Regeln (greift, weil <html lang="de">),
     overflow-wrap ist der Notnagel fuer Woerter, die auch das nicht loest.
     Reihenfolge ist Absicht: erst sauber trennen, dann hart brechen.

     Warum das hier steht und nicht bei .abschnitt__titel: Diese Klasse ist
     neu und meine. .abschnitt__titel stammt aus der abgenommenen
     Startseite und hat dieselbe clamp-Formel — dort ist es bisher nicht
     aufgefallen, weil kein Titel so lang ist. Als Beobachtung im Bericht,
     nicht als Alleingang an fremdem Werk. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.seitenkopf__text {
  margin: 0;
  max-width: 60ch;
  font-size: 18px;
  color: var(--text-mild);
}

/* Handlungsknopf direkt unter dem Seitenkopf — bisher nur auf danke.html,
   wo der Weg zurueck die einzige sinnvolle Handlung ist. Eigene Klasse
   statt eines style-Attributs am Absatz: ein Inline-Wert entzieht sich
   jeder Messung und ist genau der Freihandwert, den der Kasten oben
   verbietet. */
.seitenkopf__aktion {
  margin: 32px 0 0;
}


/* ── Fliesstext ────────────────────────────────────────────────────
   Fuer Impressum und Datenschutz. Diese Seiten sind zum LESEN da,
   nicht zum Ueberfliegen: eine Spalte, 65 Zeichen breit, keine Kacheln.

   Warum Element-Selektoren statt Klassen an jedem Absatz: Rechtstexte
   werden bei Gesetzesaenderungen von Hand nachgezogen — oft von jemandem,
   der kein CSS kann. Wer hier einen <h2> einfuegt, soll nicht erst eine
   Klasse nachschlagen muessen. Die Selektoren sind auf .fliesstext
   begrenzt und wirken nirgends sonst. */

.fliesstext {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 64px;
}

.fliesstext > * {
  max-width: 65ch;
}

.fliesstext h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  margin: 48px 0 16px;
}

.fliesstext h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 32px 0 8px;
}

.fliesstext p,
.fliesstext li {
  margin: 0 0 16px;
  line-height: 1.6;
}

.fliesstext ul {
  margin: 0 0 16px;
  padding-left: 24px;
}

/* Die Anschrift im Impressum. <address> ist kursiv voreingestellt —
   in einer Pflichtangabe stoert das die Lesbarkeit. */
.fliesstext address {
  font-style: normal;
  margin: 0 0 16px;
}

/* Vorletzte Zeile jeder Rechtsseite: wann sie zuletzt geaendert wurde.
   Steht ausdruecklich klein und mild — sie ist Beleg, nicht Inhalt. */
.fliesstext__stand {
  margin-top: 48px;
  font-size: 14px;
  color: var(--text-mild);
}


/* ── Formular ──────────────────────────────────────────────────────
   Nur kontakt.html. Drei Festlegungen aus dem Regelwerk stecken hier
   drin, jede mit Grund:

   1. RAHMEN in --text-mild, nicht in --linie. --linie (#D2C9B0) auf
      --karte (#FCFAF4) ergibt rund 1,6:1 und reisst WCAG 1.4.11
      (3:1 fuer Bedienelemente) deutlich. Gemessen, nicht geschaetzt.
      --text-mild (#645B49) liegt bei rund 6,5:1.
   2. KEINE STERNCHEN an Pflichtfeldern. In diesem Formular ist jedes
      Feld Pflicht; Sternchen an allem tragen null Information. So im
      Regelwerk-Index aufgeloest (GOV.UK gegen USWDS).
   3. FELDHOEHE 44 px wie jedes andere Klickziel. Die Ausnahme auf
      24 px gilt laut Index nur fuer Checkbox und Radio MIT Label — die
      haben ihre Trefferflaeche im Text. */

.formular {
  max-width: 34rem;
}

.formular__gruppe {
  margin: 0 0 24px;
}

.formular__gruppe label {
  display: block;
  margin: 0 0 8px;
  font-weight: 600;
}

.formular__gruppe input,
.formular__gruppe textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  background: #FFFFFF;
  border: 2px solid var(--text-mild);
  border-radius: 4px;
}

.formular__gruppe textarea {
  min-height: 160px;
  resize: vertical;
}

.formular__gruppe input:focus-visible,
.formular__gruppe textarea:focus-visible {
  outline: 3px solid var(--ziegel-dunkel);
  outline-offset: 2px;
}

/* Erklaerung unter der Beschriftung, vor dem Feld — dort wird sie
   gelesen, bevor getippt wird. Per aria-describedby verknuepft. */
.formular__hilfe {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-mild);
}

/* Auswahl per Radiobuttons statt <select>: Ein Auswahlfeld hat seine
   erste Option immer vorbelegt, damit laeuft required ins Leere.
   Aufgeloest im Regelwerk-Index, gilt bis etwa fuenf Optionen. */
.formular__wahl {
  border: 0;
  margin: 0 0 24px;
  padding: 0;
}

.formular__wahl legend {
  padding: 0;
  margin: 0 0 8px;
  font-weight: 600;
}

/* Eine Auswahlzeile. input und label bleiben GESCHWISTER, nicht
   verschachtelt — nur so greift <label for>, und genau daran haengt die
   Ausnahme, die 24 px statt 44 px erlaubt. Das label bekommt flex: 1,
   damit die Trefferflaeche ueber die ganze Zeilenbreite geht: auf dem
   Handy trifft man den Text, nicht das Kaestchen. */
.formular__wahl-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.formular__wahl-zeile input[type="radio"] {
  width: 24px;
  height: 24px;
  accent-color: var(--ziegel);
  flex: none;
}

.formular__wahl-zeile label {
  flex: 1;
  padding: 8px 0;
  font-weight: 400;
}

/* Spamfalle. Muss unsichtbar sein, darf aber NICHT display:none
   bekommen — sonst fuellen manche Bots sie trotzdem aus, und
   Screenreader-Nutzer landen in einem Feld ohne Sinn. Deshalb aus dem
   Sichtfeld geschoben, aria-hidden und tabindex="-1" am Element. */
.formular__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__hinweis {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--text-mild);
  max-width: 60ch;
}

/* Der Hinweis direkt NACH dem Absendeknopf braucht Luft nach oben.
   Als Nachbarschafts-Regel formuliert und nicht als eigene Klasse: So
   stimmt der Abstand automatisch, egal wer die Seite spaeter bearbeitet.
   Eine Klasse haette man vergessen koennen, ein style-Attribut waere ein
   Freihandwert gewesen. */
button.knopf + .formular__hinweis {
  margin-top: 24px;
}

/* .knopf war bisher nur an <a> vergeben. Ein <button> erbt die Schrift
   des Dokuments NICHT und bringt einen eigenen Rahmen mit — ohne diese
   drei Zeilen saehe der Absendeknopf anders aus als jeder andere Knopf
   der Seite. Eigener Selektor statt Aenderung an .knopf, damit die
   Startseite unberuehrt bleibt. */
button.knopf {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}


/* ── Hervorgehobene Station ────────────────────────────────────────
   Nachgetragen 07.09.2026. Die alte geschichte.html hatte dafuer
   timeline__item--mark und hob damit den Staatsehrenpreis 2018 hervor.
   Beim Umbau auf die Zeitachse der Startseite ging die Hervorhebung
   verloren, weil es dort nichts Vergleichbares gab — die Station stand
   danach gleichrangig neben den anderen vier.

   Das ist der Unterschied zwischen "sieht gleich aus" und "kann
   dasselbe": Ein Umbau, der eine Aussage der Seite still fallen laesst,
   hat sie nicht angeglichen, sondern beschnitten. Gemeldet vom Bau,
   hier zentral nachgetragen. */

.station--mark {
  border-left: 4px solid var(--ziegel);
  padding-left: 24px;
}

/* Ein Platzhalter im Jahresfeld ist breiter als eine Jahreszahl und lief
   aus der 8ch-Spalte in den Text. Kostet nichts, solange dort Zahlen
   stehen, und faengt den Ausnahmefall ab. */
.station__jahr {
  overflow-wrap: anywhere;
}


/* ── Offene Stelle ─────────────────────────────────────────────────
   Markiert Text, der noch fehlt. Im alten style.css war .luecke ein
   schlichtes display: block — der Platzhalter "[TEXT: Wegbeschreibung …]"
   sah dadurch aus wie normaler Inhalt und steht bis heute sichtbar auf
   zwei Seiten, die indexiert werden sollen.

   Deshalb hier auffaellig statt unauffaellig: Wer diese Seite oeffnet,
   soll die Luecke sofort sehen und nicht versehentlich mit ihr
   veroeffentlichen. Die Markierung verschwindet, indem der Text
   geschrieben wird — nicht, indem die Klasse entfernt wird. */

.luecke {
  display: block;
  padding: 16px;
  border: 2px dashed var(--ziegel);
  border-radius: 4px;
  background: #FFF6F2;
  color: var(--ziegel-dunkel);
  font-size: 16px;
}


/* ── Schmale Bildschirme ───────────────────────────────────────────
   Gleiche Schwelle wie im Hauptteil (860 px), damit es nur eine
   Umbruchstelle im ganzen Stylesheet gibt. */

@media (max-width: 860px) {
  .seitenkopf { padding: 40px 24px 32px; }
  .fliesstext { padding: 0 24px 48px; }
}
/* User-supplied livestock portraits retain their original frame. */
img.livestock-portrait{width:100%;height:auto;object-fit:contain;filter:none}.bildrahmen img{height:auto}
