/* ==========================================================================
   KUHDORFINFERNO – Stylesheet
   Reines CSS, kein Framework. Klassen nach Funktion benannt (deutsch, ohne Umlaute).

   Inhalt:
   1. Variablen (Farben, Schrift, Abstaende)
   2. Grundlagen
   3. Layout-Hilfen
   4. Kopfzeile / Navigation
   5. Aufmacher (Startbereich mit Tarnmuster)
   6. Abschnitte allgemein
   7. Grafische Elemente (Tarnmuster, Warnstreifen, Marker, Aufkleber, Stempel)
   8. Kacheln (Grundsaetze, Meilensteine)
   9. Zugehoerigkeitskarte
  10. Fragen & Antworten
  11. Charta-Seite (Langtext)
  12. Fusszeile
  13. Kleinbildschirme / Bewegung reduziert

   Palette: Schwarz, Grautoene, Oliv-Toene, Neon-Gelb (#f8eb16) als einzige Signalfarbe.
   Regeln: keine Rundungen, keine Gesichter, Gelb nur sparsam.
   ========================================================================== */

/* Schrift fuer die Hauptueberschriften (h1): Permanent Marker, Edding-Optik.
   Liegt auf dem eigenen Server (Ordner schrift/), es wird nichts bei Dritten geladen.
   Lizenz: Apache 2.0, siehe schrift/LIZENZ-PermanentMarker.txt */
@font-face {
  font-family: "Permanent Marker";
  src: url("../schrift/PermanentMarker-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* 1. VARIABLEN ------------------------------------------------------------ */
:root {
  --schwarz:        #0b0b0c;  /* dunkle Flaechen, Rahmen, Text auf Hell */
  --grau-700:       #444444;  /* Tarngrau dunkel, Nebentext auf Hell */
  --grau-500:       #828482;  /* Tarngrau hell */
  --hellgrau:       #e4e4df;  /* Seitenhintergrund (hell) */
  --hellgrau-karte: #f2f2ee;  /* Karten */
  --oliv-dunkel:    #3d4126;  /* Kicker, grosse Zahlen auf Hell */
  --oliv:           #5a5f36;  /* Flaechen */
  --oliv-hell:      #7b8150;  /* Linien, Akzente */
  --khaki:          #a39a72;  /* Khaki: Sandton fuer Abschnitte, Rahmen, Tarn-Variante */
  --khaki-dunkel:   #6e674a;  /* Khaki dunkel: Linien, Schatten */
  --fell-hell:      #d5cdbf;  /* Logo Kuhkopf: Fell hell (Beige) */
  --fell:           #aea492;  /* Logo: Fell Hauptton */
  --fell-dunkel:    #9f9581;  /* Logo: Fell Schatten */
  --braun:          #7b6f5e;  /* Logo: Braun, Linien/Rahmen */
  --braun-dunkel:   #353129;  /* Logo: dunkles Braun, fast Schwarz */
  --auge:           #b85c02;  /* Logo: Augenfarbe, Rostbraun-Orange */
  --signal:         #f8eb16;  /* Neon-Gelb: Marker, Knoepfe, Warnstreifen */

  --schrift-edding: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --schrift-marke: "Courier New", "Courier 10 Pitch", "Liberation Mono", monospace;
  --schrift-text:  Verdana, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --abstand-1: 8px;
  --abstand-2: 16px;
  --abstand-3: 24px;
  --abstand-4: 32px;
  --abstand-5: 48px;
  --abstand-6: 90px;

  --breite-inhalt: 1100px;
  --breite-text: 760px;
  --schatten-hart: 8px 8px 0 var(--schwarz);
}

/* 2. GRUNDLAGEN ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--hellgrau); color: var(--schwarz);
  font-family: var(--schrift-text); font-size: 19px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--schrift-marke); text-transform: uppercase; line-height: 1.12; margin: 0 0 var(--abstand-3); }
h1, h2, h3, h4, .zeitstrahl__titel, .eintrittskarte__satz, .fusszeile__gruss { font-family: var(--schrift-edding); font-weight: 400; letter-spacing: .01em; }
.charta-text h2, .charta-text h3 { font-weight: 400; }
p { margin: 0 0 var(--abstand-3); }
a { color: var(--oliv-dunkel); text-underline-offset: 3px; }
a:hover { color: var(--schwarz); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

.sprunglink {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--schwarz); color: var(--hellgrau); padding: var(--abstand-1) var(--abstand-2);
}
.sprunglink:focus { left: 0; }

/* 3. LAYOUT-HILFEN -------------------------------------------------------- */
.inhalt       { max-width: var(--breite-inhalt); margin: 0 auto; padding: 0 var(--abstand-3); }
.inhalt--text { max-width: var(--breite-text); }
.mitte        { text-align: center; }
.kicker {
  font-family: var(--schrift-marke); font-size: 14px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--oliv-dunkel); margin: 0 0 var(--abstand-2);
}

/* 4. KOPFZEILE / NAVIGATION ----------------------------------------------- */
.kopfzeile { position: sticky; top: 0; z-index: 100; background: var(--schwarz); border-bottom: 4px solid var(--signal); }
.kopfzeile__innen {
  max-width: var(--breite-inhalt); margin: 0 auto; padding: 10px var(--abstand-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3);
}
.wortmarke {
  display: flex; align-items: center; gap: 10px; color: var(--hellgrau); text-decoration: none;
  font-family: var(--schrift-marke); font-weight: 800; font-size: 20px; letter-spacing: .06em; text-transform: uppercase;
}
.wortmarke:hover { color: var(--hellgrau); }
.wortmarke img { height: 46px; width: auto; display: block; filter: drop-shadow(1.5px 0 0 var(--hellgrau-karte)) drop-shadow(-1.5px 0 0 var(--hellgrau-karte)) drop-shadow(0 1.5px 0 var(--hellgrau-karte)) drop-shadow(0 -1.5px 0 var(--hellgrau-karte)); margin-right: 4px; }
.navigation { display: flex; flex-wrap: wrap; gap: 6px var(--abstand-3); }
.navigation a {
  font-family: var(--schrift-marke); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--hellgrau); padding: 4px 0; border-bottom: 3px solid transparent;
}
.navigation a:hover { color: var(--hellgrau); border-bottom-color: var(--signal); }
.navigation a[aria-current="page"] { border-bottom-color: var(--hellgrau); }

/* 5. AUFMACHER ------------------------------------------------------------ */
.aufmacher {
  background: var(--grau-700) url("../grafik/tarnmuster-grau.svg") repeat;
  background-size: 900px 900px;
  padding: var(--abstand-6) 0;
  position: relative; overflow: hidden; /* overflow: Kuh wird unten angeschnitten */
}
.aufmacher__raster { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; position: relative; z-index: 2; }
.aufmacher__text { max-width: 640px; }
/* Die grosse Kuh: freigestellt, mit hellem Aufkleber-Rand und Signal-Schatten, unten rechts im Anschnitt */
.aufmacher__kuh {
  position: absolute; z-index: 1; right: max(1%, 12px); bottom: -6%;
  width: min(48vw, 640px); height: auto; pointer-events: none;
  filter: drop-shadow(5px 0 0 var(--hellgrau-karte)) drop-shadow(-5px 0 0 var(--hellgrau-karte))
          drop-shadow(0 5px 0 var(--hellgrau-karte)) drop-shadow(0 -5px 0 var(--hellgrau-karte));
}
.aufmacher__text {
  background: var(--schwarz); color: var(--hellgrau); padding: var(--abstand-5);
  border: 3px solid var(--hellgrau); box-shadow: 10px 10px 0 var(--signal);
}
.aufmacher__text .kicker { color: var(--signal); }
.aufmacher__titel {
  font-size: clamp(2.3rem, 7vw, 4.8rem); font-weight: 400; letter-spacing: .01em; line-height: 1.05;
  margin-bottom: var(--abstand-2); overflow-wrap: anywhere;
}
.aufmacher__spruch {
  font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.2rem, 3vw, 1.9rem); line-height: 1.3; margin-bottom: var(--abstand-4);
}
.aufmacher__spruch .marker { color: var(--schwarz); background-position: 0 0; background-size: 100% 100%; }
.aufmacher__teaser { list-style: none; padding: var(--abstand-2) 0 0; margin: 0 0 var(--abstand-4); border-top: 3px solid var(--grau-500); }
.aufmacher__teaser li { font-size: 1.05rem; margin-bottom: 6px; }

.aufmacher__bild { position: relative; justify-self: center; width: min(100%, 340px); margin-bottom: 40px; }
.plakette {
  background: var(--fell-hell); border: 4px solid var(--schwarz);
  box-shadow: 10px 10px 0 var(--signal); padding: var(--abstand-3);
}
.aufmacher__logo { display: block; width: 100%; }
.aufmacher__stempel { position: absolute; z-index: 3; width: clamp(130px, 17vw, 240px); right: 2%; top: 6%; pointer-events: none; }

/* Knoepfe */
.knopf {
  display: inline-block; font-family: var(--schrift-marke); font-weight: 800; font-size: 16px;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  background: var(--schwarz); color: var(--hellgrau); padding: 14px 24px; border: 3px solid var(--schwarz);
  box-shadow: 6px 6px 0 var(--signal); transition: transform .12s, box-shadow .12s;
}
.knopf:hover { color: var(--hellgrau); transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--signal); }
.knopf--hell { background: var(--hellgrau-karte); color: var(--schwarz); box-shadow: 6px 6px 0 var(--schwarz); }
.knopf--hell:hover { color: var(--schwarz); box-shadow: 3px 3px 0 var(--schwarz); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--abstand-3); }
/* im schwarzen Aufmacher-Kasten */
.aufmacher__text .knopf { background: var(--signal); color: var(--schwarz); border-color: var(--signal); box-shadow: 6px 6px 0 var(--hellgrau); }
.aufmacher__text .knopf:hover { box-shadow: 3px 3px 0 var(--hellgrau); color: var(--schwarz); }
.aufmacher__text .knopf--hell { background: transparent; color: var(--hellgrau); border-color: var(--hellgrau); box-shadow: 6px 6px 0 var(--grau-700); }
.aufmacher__text .knopf--hell:hover { color: var(--hellgrau); box-shadow: 3px 3px 0 var(--grau-700); }

/* 6. ABSCHNITTE ----------------------------------------------------------- */
/* Hintergruende: schmutziges Grunge (Flecken, Kratzer, Staub) statt Tarnmuster.
   Das Tarnmuster bleibt dem Aufmacher oben vorbehalten. Grafiken liegen in grafik/grunge-*.svg */
.abschnitt { padding: var(--abstand-6) 0; background: var(--hellgrau) url("../grafik/grunge-papier.svg") repeat; background-size: 800px 800px; }
.abschnitt--karte { background: var(--hellgrau-karte) url("../grafik/grunge-papier.svg") repeat; background-size: 800px 800px; }
.abschnitt--grunge-oliv {
  background: var(--oliv) url("../grafik/grunge-oliv.svg") repeat; background-size: 800px 800px;
  color: var(--hellgrau);
}
.abschnitt--grunge-khaki {
  background: var(--khaki-dunkel) url("../grafik/grunge-khaki.svg") repeat; background-size: 800px 800px;
}
.abschnitt--grunge-fell {
  background: var(--fell) url("../grafik/grunge-fell.svg") repeat; background-size: 800px 800px;
}
/* Textplatte: heller Kasten, damit Text nie direkt auf dem Grunge-Hintergrund liegt */
.textplatte {
  background: var(--hellgrau-karte); border: 3px solid var(--schwarz);
  box-shadow: var(--schatten-hart); padding: var(--abstand-4);
}
.textplatte > :last-child { margin-bottom: 0; }
.abschnitt__titel { font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 400; }
.abschnitt__einleitung { font-size: 1.15rem; max-width: 40em; }
.hervorhebung { font-weight: 700; }
.titelplatte {
  display: inline-block; background: var(--schwarz); color: var(--hellgrau);
  padding: 12px 22px; margin-bottom: var(--abstand-2); border-left: 8px solid var(--signal);
}
.titelplatte .kicker, .titelplatte.kicker { color: var(--signal); margin: 0; }

/* 6b. PERSOENLICHE WORTE -------------------------------------------------- */
/* Bewusst anders gestaltet als der Rest: Notizzettel-Optik, schwarzer Kopf, gestrichelter Rahmen.
   So ist auf einen Blick klar: hier spricht eine Person, nicht die Gemeinschaft. */
.abschnitt--einwurf { background: var(--hellgrau) url("../grafik/grunge-papier.svg") repeat; background-size: 800px 800px; }
.einwurf { border: 3px dashed var(--schwarz); background: var(--hellgrau-karte); position: relative; }
.einwurf__kopf { background: var(--schwarz); color: var(--hellgrau); padding: var(--abstand-4) var(--abstand-5) var(--abstand-3); border-bottom: 8px solid var(--signal); }
.einwurf__marke {
  display: inline-block; background: var(--signal); color: var(--schwarz);
  font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  font-size: .9rem; padding: 4px 12px; margin: 0 0 var(--abstand-2); transform: rotate(-2deg);
}
.einwurf__titel { font-size: clamp(1.8rem, 4.6vw, 2.6rem); font-weight: 400; margin: 0 0 var(--abstand-2); }
.einwurf__hinweis { font-size: .95rem; margin: 0; color: var(--grau-500); }
.einwurf__inhalt { padding: var(--abstand-4) var(--abstand-5); }
.einwurf__eintrag { padding-bottom: var(--abstand-3); margin-bottom: var(--abstand-3); border-bottom: 2px dashed var(--grau-500); }
.einwurf__eintrag:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.einwurf__datum { font-family: var(--schrift-marke); font-weight: 800; font-size: .9rem; letter-spacing: .08em; color: var(--oliv-dunkel); margin: 0 0 var(--abstand-1); }
.einwurf__eintrag p:last-child { margin-bottom: 0; }
.einwurf__fuss { font-family: var(--schrift-marke); font-weight: 800; text-align: right; margin: 0; padding: 0 var(--abstand-5) var(--abstand-4); }
@media (max-width: 640px) { .einwurf__kopf, .einwurf__inhalt { padding-left: var(--abstand-3); padding-right: var(--abstand-3); } .einwurf__fuss { padding-right: var(--abstand-3); } }

/* 7. GRAFISCHE ELEMENTE --------------------------------------------------- */
.warnstreifen {
  height: 18px; background: url("../grafik/warnstreifen.svg") repeat-x left center; background-size: 48px 48px;
  border-top: 3px solid var(--schwarz); border-bottom: 3px solid var(--schwarz);
}

/* Textmarker */
.marker {
  background: url("../grafik/marker.svg") no-repeat 0 92% / 100% 52%;
  padding: 0 .18em; margin: 0 -.18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Aufkleber: durchgestrichene Begriffe */
.aufkleber-reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-3); margin: var(--abstand-4) 0; }
.aufkleber {
  position: relative; display: inline-block; background: var(--schwarz); color: var(--hellgrau);
  font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.2rem, 3vw, 1.8rem); letter-spacing: .08em; padding: 10px 24px;
}
.aufkleber::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; border-top: 6px solid var(--signal); transform: rotate(-3deg); }

/* 8. KACHELN -------------------------------------------------------------- */
.kachel-raster { display: grid; gap: var(--abstand-4); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin: var(--abstand-4) 0; }
.kachel {
  background: var(--hellgrau); border: 3px solid var(--schwarz); padding: var(--abstand-3);
  box-shadow: var(--schatten-hart); transition: transform .12s, box-shadow .12s;
}
.kachel:hover { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--schwarz); }
.kachel__zahl {
  display: inline-block; background: var(--schwarz); color: var(--hellgrau);
  font-family: var(--schrift-marke); font-weight: 800; font-size: 18px; line-height: 1;
  padding: 8px 10px; margin-bottom: var(--abstand-2);
}
.kachel__titel { font-family: var(--schrift-marke); font-size: 1.05rem; font-weight: 800; margin-bottom: var(--abstand-1); line-height: 1.25; }
.kachel__text { font-size: 1rem; line-height: 1.55; margin: 0; }
.kachel--signal .kachel__zahl { background: var(--signal); color: var(--schwarz); }
.kachel--breit { grid-column: 1 / -1; display: flex; gap: var(--abstand-3); align-items: center; flex-wrap: wrap; }
.kachel--breit .kachel__zahl { margin-bottom: 0; }
.kachel--breit .kachel__titel { flex: 1 1 260px; margin: 0; font-size: 1.25rem; }
.kachel--breit .kachel__text { flex: 2 1 320px; }

.meilenstein { background: var(--hellgrau-karte); border: 3px solid var(--schwarz); padding: var(--abstand-3); box-shadow: var(--schatten-hart); }
.meilenstein__jahr { font-family: var(--schrift-marke); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; margin: 0 0 var(--abstand-2); color: var(--oliv-dunkel); }
.zeitstrahl { max-width: 52rem; }
.zeitstrahl__titel { font-family: var(--schrift-edding); font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.9rem); text-transform: uppercase; margin: 0 0 var(--abstand-4); }
.zeitstrahl__eintrag { display: grid; grid-template-columns: 9rem 1fr; gap: var(--abstand-3); padding-top: var(--abstand-3); border-top: 3px solid var(--schwarz); margin-top: var(--abstand-3); }
.zeitstrahl__eintrag .meilenstein__jahr { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.zeitstrahl__eintrag p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .zeitstrahl__eintrag { grid-template-columns: 1fr; gap: var(--abstand-2); } }
.meilenstein p:last-child { margin-bottom: 0; font-size: 1rem; line-height: 1.55; }

/* 9. ZUGEHOERIGKEITSKARTE ------------------------------------------------- */
.eintrittskarte {
  display: grid; grid-template-columns: 1fr 170px; max-width: 940px; margin: var(--abstand-5) auto 0;
  background: var(--hellgrau-karte); color: var(--schwarz); border: 4px solid var(--schwarz); box-shadow: 10px 10px 0 var(--signal);
}
.eintrittskarte__haupt { padding: var(--abstand-5) var(--abstand-4); }
.eintrittskarte__kopf { font-family: var(--schrift-marke); font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--oliv-dunkel); margin: 0 0 var(--abstand-2); }
.eintrittskarte__satz { font-family: var(--schrift-edding); font-weight: 400; text-transform: uppercase; font-size: clamp(1.7rem, 4.6vw, 3rem); line-height: 1.1; margin-bottom: var(--abstand-3); }
.eintrittskarte__text { margin: 0; font-size: 1.05rem; }
.eintrittskarte__abriss {
  border-left: 4px solid var(--schwarz); background: var(--signal); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: var(--abstand-2);
  font-family: var(--schrift-marke); font-weight: 800; text-transform: uppercase; line-height: 1.25;
}
.eintrittskarte__abriss span { display: block; font-size: 13px; letter-spacing: .1em; }
.eintrittskarte__abriss strong { display: block; font-size: 1.6rem; margin: 6px 0; }
.abschnitt-hinweis {
  max-width: 36em; margin: var(--abstand-5) auto 0; padding: var(--abstand-2) var(--abstand-3);
  background: var(--schwarz); color: var(--hellgrau); text-align: center; border-bottom: 4px solid var(--signal);
}

/* 10. FRAGEN & ANTWORTEN -------------------------------------------------- */
.fragen { margin-top: var(--abstand-4); border-top: 3px solid var(--schwarz); }
.frage { border-bottom: 3px solid var(--schwarz); }
.frage summary {
  list-style: none; cursor: pointer; position: relative; padding: var(--abstand-3) 60px var(--abstand-3) 0;
  font-family: var(--schrift-marke); font-weight: 800; font-size: 1.1rem; line-height: 1.3;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; line-height: 36px; text-align: center; background: var(--schwarz); color: var(--hellgrau); font-size: 28px; font-weight: 800;
}
.frage[open] summary::after { content: "–"; background: var(--signal); color: var(--schwarz); }
.frage summary:hover { background: var(--hellgrau-karte); }
.frage__antwort { padding: 0 0 var(--abstand-3); max-width: 44em; }
.frage__antwort p:last-child { margin-bottom: 0; }

/* 11. CHARTA-SEITE (Langtext) --------------------------------------------- */
.charta-kopf { background: var(--grau-700) url("../grafik/tarnmuster-grau.svg") repeat; background-size: 900px 900px; padding: var(--abstand-5) 0; }
.charta-kopf__platte { background: var(--schwarz); color: var(--hellgrau); padding: var(--abstand-4); border: 3px solid var(--hellgrau); box-shadow: 10px 10px 0 var(--signal); }
.charta-kopf__platte .kicker { color: var(--signal); }
.charta-kopf h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 400; margin-bottom: var(--abstand-2); }
.charta-kopf .untertitel { font-size: 1.1rem; margin: 0; font-style: italic; }
.rueckverweis { font-family: var(--schrift-marke); font-weight: 700; margin: 0 0 var(--abstand-3); }
.charta-kopf .rueckverweis a { color: var(--signal); }

.charta-text { background: var(--hellgrau-karte); padding: var(--abstand-5) 0 var(--abstand-6); }
.charta-text h2 { font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 400; line-height: 1.25; margin: var(--abstand-5) 0 var(--abstand-3); }
.charta-text h2 .zahl { display: inline-block; background: var(--schwarz); color: var(--hellgrau); padding: 6px 10px; margin-right: 12px; font-size: .9em; vertical-align: .05em; }
.charta-text h3 { font-size: 1.05rem; font-weight: 400; margin: var(--abstand-4) 0 var(--abstand-2); }
.kernsatz { font-weight: 700; border: 3px solid var(--schwarz); background: var(--hellgrau); padding: var(--abstand-2) var(--abstand-3); box-shadow: 6px 6px 0 var(--schwarz); margin: var(--abstand-3) 0 var(--abstand-4); }
.charta-text ol { padding-left: 0; list-style: none; counter-reset: grundsatz; margin: 0 0 var(--abstand-4); }
.charta-text ol li { counter-increment: grundsatz; display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-bottom: 2px solid var(--grau-500); font-weight: 700; }
.charta-text ol li::before { content: counter(grundsatz, decimal-leading-zero); font-family: var(--schrift-marke); font-weight: 800; background: var(--schwarz); color: var(--hellgrau); padding: 3px 8px; flex: none; }
.charta-text hr { border: 0; margin: var(--abstand-4) 0; height: 18px; background: url("../grafik/warnstreifen.svg") repeat-x left center / 48px 48px; border-top: 3px solid var(--schwarz); border-bottom: 3px solid var(--schwarz); }
.charta-ende { margin-top: var(--abstand-5); }

/* 12. FUSSZEILE ----------------------------------------------------------- */
.fusszeile { background: var(--schwarz); color: var(--hellgrau); padding: var(--abstand-5) 0 var(--abstand-4); border-top: 4px solid var(--signal); }
.fusszeile__raster { display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-4); align-items: center; }
.fusszeile img { width: 120px; height: auto; display: block; filter: drop-shadow(3px 0 0 var(--hellgrau-karte)) drop-shadow(-3px 0 0 var(--hellgrau-karte)) drop-shadow(0 3px 0 var(--hellgrau-karte)) drop-shadow(0 -3px 0 var(--hellgrau-karte)) drop-shadow(3px 3px 0 var(--signal)); }
.fusszeile__gruss { font-family: var(--schrift-edding); font-weight: 400; font-size: 1.4rem; text-transform: uppercase; margin: 0 0 var(--abstand-1); color: var(--signal); }
.fusszeile__links { display: flex; flex-wrap: wrap; gap: 6px var(--abstand-3); margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.fusszeile a { color: var(--hellgrau); }
.fusszeile a:hover { color: var(--signal); }

/* 13. KLEINBILDSCHIRME / BEWEGUNG REDUZIERT ------------------------------- */
@media (max-width: 860px) {
  .aufmacher { padding-bottom: 0; }
  .aufmacher__kuh { position: relative; display: block; z-index: 1; right: auto; bottom: auto; width: min(86%, 420px); margin: var(--abstand-5) auto -14% auto; }
  .aufmacher__stempel { right: 4%; top: auto; bottom: 8%; width: 110px; }
  .aufmacher__text { padding: var(--abstand-3); }
  .eintrittskarte { grid-template-columns: 1fr; }
  .eintrittskarte__abriss { border-left: 0; border-top: 4px solid var(--schwarz); flex-direction: row; gap: 12px; }
}
@media (max-width: 640px) {
  body { font-size: 18px; }
  .kopfzeile__innen { flex-direction: column; align-items: flex-start; gap: 6px; }
  .navigation { gap: 4px 16px; }
  .abschnitt { padding: 56px 0; }
  .aufmacher { padding: 40px 0; }
  .kachel-raster { grid-template-columns: 1fr; }
  .fusszeile__raster { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kachel, .knopf { transition: none; }
}

/* ===== Spruchband: schwarzer Trenner mit einem Satz in Edding-Schrift ===== */
.spruchband { background: var(--schwarz); color: var(--hellgrau); text-align: center; padding: 40px 16px; border-top: 4px solid var(--signal); border-bottom: 4px solid var(--signal); }
.spruchband__satz { font-family: var(--schrift-edding); font-size: clamp(1.6rem, 4.5vw, 3rem); line-height: 1.2; text-transform: uppercase; margin: 0 auto; max-width: 900px; }
.spruchband .marker { background: var(--signal); color: var(--schwarz); padding: 0 .25em; margin: 0; display: inline-block; transform: rotate(-1.5deg); }

/* ===== Zitat in der Kontaktbox ===== */
.textplatte__zitat { font-size: 1.2rem; font-weight: 700; line-height: 1.5; margin: 0 0 var(--abstand-3); padding-left: var(--abstand-3); border-left: 6px solid var(--signal); }

/* ===== Sprungmarken in der Charta: Uebersicht verlinkt, Ziel nicht unter der Kopfzeile verstecken ===== */
.charta-text h2[id], .charta-text h3[id] { scroll-margin-top: 90px; }
.charta-text ol a { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
.charta-text ol a:hover { background: var(--signal); }