/* ==========================================================================
   KUHDORFINFERNO – Stylesheet V2 "Fotokopie-Manifest"
   Wird NACH kdi.css geladen und ueberschreibt nur die Gestaltung.
   Idee: Kopiervorlage / Flugblatt. Schwarz auf Kopierpapier, Toner-Koernung,
   Rasterpunkte, Risskanten, Klebeband. Nur Rahmen, Ueberschriften und Hintergruende
   sind rau, der Fliesstext bleibt ruhig und gut lesbar.
   Schriften (selbst gehostet, nichts wird bei Dritten geladen):
     Anton, Rubik Dirt (SIL OFL) -> Ueberschriften (V2b, ersetzt Permanent Marker)
     Special Elite    (Apache 2.0)  -> Schreibmaschine: Navigation, Kicker, Kachel-Titel, Fragen
     Black Ops One    (SIL OFL 1.1) -> jetzt Anton statt Stencil: Zahlen, Jahre, Knoepfe, Aufkleber
   ========================================================================== */

@font-face { font-family: "Special Elite"; src: url("../schrift/SpecialElite-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Black Ops One"; src: url("../schrift/BlackOpsOne-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --schrift-schreibmaschine: "Special Elite", "Courier New", "Liberation Mono", monospace;
  --schrift-stencil: "Anton", Impact, "Arial Black", sans-serif;
  --papier:   #dedcd5;   /* Kopierpapier */
  --papier-hell: #eceae3;
  --toner:    #121212;
  --raster-punkte: radial-gradient(circle, rgba(0,0,0,.30) 1.4px, transparent 1.9px);
}

/* Grundflaeche: Papier + Koernung + feine Tonerstreifen */
body {
  background-color: var(--papier);
  background-image: url("../grafik/kopie-korn.svg"), url("../grafik/kopie-streifen.svg");
  background-size: 600px 600px, 900px 900px;
}
.abschnitt, .abschnitt--karte, .abschnitt--einwurf {
  background-color: transparent; background-image: none;
}
.abschnitt--karte { background-color: rgba(255,255,255,.28); }

/* Abschnitt mit Rasterpunkten (statt Khaki) */
.abschnitt--grunge-khaki {
  background-color: #c4c2ba;
  background-image: url("../grafik/kopie-korn.svg"), var(--raster-punkte);
  background-size: 600px 600px, 9px 9px;
  color: var(--toner);
}
/* Umgekehrter Abschnitt: weiss auf schwarz, mit Risskanten (statt Oliv) */
.abschnitt--grunge-oliv, .abschnitt--grunge-fell {
  background-color: var(--toner);
  background-image: url("../grafik/kopie-korn.svg"), radial-gradient(circle, rgba(255,255,255,.10) 1.2px, transparent 1.7px);
  background-size: 600px 600px, 8px 8px;
  color: var(--papier-hell);
  position: relative; margin: -10px 0; padding: 110px 0;
  clip-path: polygon(0.0% 5px, 5.8% 6px, 10.5% 1px, 15.8% 1px, 19.4% 0px, 25.0% 3px, 27.4% 6px, 31.2% 3px, 33.7% 6px, 36.1% 9px, 38.8% 3px, 43.4% 9px, 49.2% 9px, 53.6% 0px, 59.5% 0px, 63.9% 2px, 67.2% 2px, 71.4% 9px, 74.8% 10px, 77.7% 9px, 82.0% 3px, 85.7% 8px, 90.6% 9px, 93.0% 3px, 97.1% 8px, 100.0% 5px, 100.0% calc(100% - 7px), 99.8% calc(100% - 10px), 94.9% calc(100% - 4px), 89.5% calc(100% - 10px), 85.1% calc(100% - 10px), 80.3% calc(100% - 11px), 77.8% calc(100% - 10px), 73.8% calc(100% - 4px), 68.4% calc(100% - 1px), 63.2% calc(100% - 9px), 58.8% calc(100% - 5px), 55.3% calc(100% - 5px), 50.9% calc(100% - 8px), 48.4% calc(100% - 10px), 44.6% calc(100% - 7px), 41.8% calc(100% - 5px), 39.0% calc(100% - 6px), 36.3% calc(100% - 1px), 31.8% calc(100% - 4px), 26.8% calc(100% - 5px), 22.8% calc(100% - 8px), 18.4% calc(100% - 1px), 13.2% calc(100% - 11px), 8.0% calc(100% - 3px), 4.4% calc(100% - 7px), 0.0% calc(100% - 7px));
}
.abschnitt--grunge-fell { clip-path: polygon(0.0% 5px, 2.8% 1px, 6.9% 3px, 12.0% 2px, 17.0% 6px, 20.7% 7px, 23.2% 7px, 27.0% 4px, 32.5% 6px, 38.0% 4px, 42.9% 5px, 47.7% 6px, 53.5% 2px, 56.0% 2px, 59.1% 3px, 61.4% 9px, 64.3% 4px, 66.5% 6px, 70.7% 9px, 75.1% 2px, 79.9% 8px, 85.7% 10px, 90.5% 0px, 94.4% 10px, 99.6% 6px, 100.0% 6px, 100.0% calc(100% - 4px), 95.6% calc(100% - 1px), 89.6% calc(100% - 4px), 84.6% calc(100% - 0px), 80.3% calc(100% - 11px), 76.7% calc(100% - 8px), 73.7% calc(100% - 0px), 70.9% calc(100% - 11px), 67.7% calc(100% - 11px), 62.7% calc(100% - 1px), 60.1% calc(100% - 4px), 56.1% calc(100% - 7px), 50.1% calc(100% - 7px), 47.5% calc(100% - 7px), 43.0% calc(100% - 5px), 39.8% calc(100% - 10px), 36.2% calc(100% - 9px), 30.7% calc(100% - 1px), 26.1% calc(100% - 5px), 21.9% calc(100% - 2px), 19.7% calc(100% - 1px), 15.2% calc(100% - 5px), 12.4% calc(100% - 7px), 6.5% calc(100% - 1px), 4.0% calc(100% - 6px), 0.0% calc(100% - 1px)); background-color: #1c1c1b; }
.abschnitt--grunge-oliv a, .abschnitt--grunge-fell a { color: var(--signal); }
.abschnitt--grunge-oliv .textplatte a, .abschnitt--grunge-fell .textplatte a { color: var(--toner); }
.abschnitt--grunge-oliv .titelplatte, .abschnitt--grunge-fell .titelplatte { background: var(--signal); color: var(--toner); border-left-color: var(--papier-hell); }
.abschnitt--grunge-oliv .titelplatte .kicker, .abschnitt--grunge-fell .titelplatte .kicker { color: var(--toner); }
.abschnitt--grunge-oliv .titelplatte h2, .abschnitt--grunge-fell .titelplatte h2 { color: var(--toner); }

/* Schreibmaschine fuer Beschriftungen */
.kicker, .navigation a, .rueckverweis, .eintrittskarte__kopf, .einwurf__datum, .kachel__titel,
.frage summary, .wortmarke, .fusszeile__links, .einwurf__fuss, .abschnitt-hinweis {
  font-family: var(--schrift-schreibmaschine); font-weight: 400;
}
.kicker { letter-spacing: .14em; font-size: 15px; }
.kachel__titel { font-size: 1.2rem; line-height: 1.25; }
.frage summary { font-size: 1.25rem; }
.navigation a { font-size: 15px; letter-spacing: .06em; }
.wortmarke { font-size: 22px; font-weight: 400; }
.kicker { color: var(--toner); background: none; }

/* Stencil fuer Zahlen, Jahre, Knoepfe, Aufkleber */
.kachel__zahl, .knopf, .aufkleber, .einwurf__marke,
.charta-text ol li::before, .charta-text h2 .zahl, .eintrittskarte__abriss {
  font-family: var(--schrift-stencil); font-weight: 400; letter-spacing: .04em;
}
.meilenstein__jahr { color: var(--toner); font-family: var(--schrift-edding, "Anton", Impact, sans-serif); font-weight: 400; letter-spacing: .03em; }
.knopf { font-size: 17px; letter-spacing: .1em; }
.aufkleber-reihe { gap: .8rem; }
.aufkleber { font-size: clamp(1.1rem, 2.6vw, 1.45rem); }
.aufkleber::after { border-top-width: 7px; }

/* Ueberschriften: Edding bleibt, dazu ein schiefer Toner-Balken */
.abschnitt__titel { position: relative; display: inline-block; margin-bottom: var(--abstand-4); }
.abschnitt__titel::after {
  content: ""; display: block; height: 10px; margin-top: 10px; background: var(--toner);
  transform: skewX(-24deg) rotate(-.6deg); width: 62%;
}
.titelplatte .abschnitt__titel::after, .abschnitt--grunge-oliv .abschnitt__titel::after, .abschnitt--grunge-fell .abschnitt__titel::after { display: none; }

/* Aufmacher: Kopierkoernung ueber der Tarnung, Kasten leicht schief */
.aufmacher::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../grafik/kopie-korn.svg"), var(--raster-punkte); background-size: 600px 600px, 10px 10px; opacity: .55; mix-blend-mode: multiply; }
.aufmacher__text { transform: rotate(-.8deg); }

/* Kacheln: Zettel mit Klebeband, leicht verdreht */
.kachel { background: var(--papier-hell); background-image: url("../grafik/kopie-korn.svg"); background-size: 600px 600px; position: relative; padding-top: 34px; }
.kachel::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 92px; height: 26px; margin-left: -46px;
  background: rgba(248,235,22,.82); transform: rotate(-3deg);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 90% 0, 94% 12%, 100% 0, 100% 92%, 95% 100%, 91% 88%, 86% 100%, 8% 100%, 4% 90%, 0 100%);
}
.kachel:nth-child(3n+1) { transform: rotate(-.9deg); }
.kachel:nth-child(3n+2) { transform: rotate(.7deg); }
.kachel:nth-child(3n)   { transform: rotate(-.3deg); }
.kachel:nth-child(3n+2)::before { transform: rotate(4deg); margin-left: -20px; }
.kachel:hover { transform: rotate(0) translate(3px, 3px); }
.kachel--signal { background-color: var(--signal); }
.kachel--signal::before { background: rgba(18,18,18,.8); }
.kachel__zahl { background: none; color: var(--toner); font-size: 2.2rem; padding: 0; margin: 0 0 6px; display: block; position: absolute; top: 14px; right: 16px; opacity: .9; }
.kachel--breit .kachel__zahl { position: static; }
.kachel--signal .kachel__zahl { background: none; }

/* Textplatten, Zeitstrahl, Karten: Papier mit Koernung */
.textplatte, .meilenstein, .einwurf, .charta-text, .kernsatz {
  background-color: var(--papier-hell); background-image: url("../grafik/kopie-korn.svg"); background-size: 600px 600px;
}
.zeitstrahl__eintrag { border-top: 4px solid var(--toner); }
.eintrittskarte { transform: rotate(-.6deg); background-image: url("../grafik/kopie-korn.svg"); background-size: 600px 600px; }

/* Spruchband: Riss oben/unten */
.spruchband { background-image: url("../grafik/kopie-korn.svg"), radial-gradient(circle, rgba(255,255,255,.09) 1.2px, transparent 1.7px);
  background-size: 600px 600px, 8px 8px; border: 0; padding: 70px 16px; margin: -8px 0; position: relative;
  clip-path: polygon(0.0% 5px, 2.8% 1px, 6.9% 3px, 12.0% 2px, 17.0% 6px, 20.7% 7px, 23.2% 7px, 27.0% 4px, 32.5% 6px, 38.0% 4px, 42.9% 5px, 47.7% 6px, 53.5% 2px, 56.0% 2px, 59.1% 3px, 61.4% 9px, 64.3% 4px, 66.5% 6px, 70.7% 9px, 75.1% 2px, 79.9% 8px, 85.7% 10px, 90.5% 0px, 94.4% 10px, 99.6% 6px, 100.0% 6px, 100.0% calc(100% - 4px), 95.6% calc(100% - 1px), 89.6% calc(100% - 4px), 84.6% calc(100% - 0px), 80.3% calc(100% - 11px), 76.7% calc(100% - 8px), 73.7% calc(100% - 0px), 70.9% calc(100% - 11px), 67.7% calc(100% - 11px), 62.7% calc(100% - 1px), 60.1% calc(100% - 4px), 56.1% calc(100% - 7px), 50.1% calc(100% - 7px), 47.5% calc(100% - 7px), 43.0% calc(100% - 5px), 39.8% calc(100% - 10px), 36.2% calc(100% - 9px), 30.7% calc(100% - 1px), 26.1% calc(100% - 5px), 21.9% calc(100% - 2px), 19.7% calc(100% - 1px), 15.2% calc(100% - 5px), 12.4% calc(100% - 7px), 6.5% calc(100% - 1px), 4.0% calc(100% - 6px), 0.0% calc(100% - 1px)); }

/* Fusszeile */
.fusszeile { background-image: url("../grafik/kopie-korn.svg"); background-size: 600px 600px; }

/* Fragen */
.frage summary:hover { background: rgba(255,255,255,.4); }

@media (max-width: 640px) {
  .abschnitt--grunge-oliv, .abschnitt--grunge-fell { padding: 80px 0; }
  .kachel:nth-child(n) { transform: rotate(-.4deg); }
}
@media (prefers-reduced-motion: reduce) { .kachel, .aufmacher__text, .eintrittskarte { transform: none !important; } }

/* Kachel: Titel nicht unter die Stencil-Zahl laufen lassen */
.kachel:not(.kachel--breit) .kachel__titel { padding-right: 52px; }

/* ==========================================================================
   SCHRIFTWECHSEL: Anton (Plakatschrift) fuer Ueberschriften, Rubik Dirt (Kopier-Dreck) nur fuer
   "Kuhdorfinferno" und das Spruchband. Beide SIL OFL 1.1, selbst gehostet.
   Permanent Marker wird nicht mehr verwendet.
   ========================================================================== */
@font-face { font-family: "Anton"; src: url("../schrift/Anton-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik Dirt"; src: url("../schrift/RubikDirt-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --schrift-edding: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --schrift-dreck: "Rubik Dirt", "Anton", Impact, sans-serif;
}
h1, h2, h3, h4, .zeitstrahl__titel, .eintrittskarte__satz, .fusszeile__gruss, .einwurf__titel { letter-spacing: .03em; line-height: 1.08; }
.abschnitt__titel { font-size: clamp(2.3rem, 5.5vw, 3.8rem); }
.abschnitt__titel::after { height: 8px; width: 48%; }
.aufmacher__titel { font-family: var(--schrift-dreck); font-size: clamp(2.2rem, 6.4vw, 4.4rem); letter-spacing: .02em; line-height: 1.1; }
.spruchband__satz { font-family: var(--schrift-dreck); letter-spacing: .02em; line-height: 1.3; }
.eintrittskarte__satz { font-size: clamp(2rem, 5vw, 3.4rem); }
.einwurf__titel { font-size: clamp(2rem, 5vw, 2.9rem); }
.charta-kopf h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); }
.charta-text h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); letter-spacing: .03em; }
.charta-text h3 { font-size: 1.2rem; }
.zeitstrahl__titel { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.fusszeile__gruss { font-size: 1.6rem; }
.aufmacher__spruch { font-family: var(--schrift-edding); font-weight: 400; letter-spacing: .04em; }

/* LESBARKEIT: Textflaechen behalten immer dunkle Schrift, auch im umgekehrten Abschnitt;
   Koernung wurde auf den Flaechen deutlich abgeschwaecht (kopie-korn.svg). */
.textplatte, .meilenstein, .kachel, .eintrittskarte, .einwurf__inhalt, .kernsatz { color: var(--toner); }
.textplatte p, .textplatte__zitat { color: var(--toner); }
.abschnitt--grunge-oliv .textplatte a:not(.knopf), .abschnitt--grunge-fell .textplatte a:not(.knopf) { color: var(--toner); }
.abschnitt--grunge-oliv .knopf, .abschnitt--grunge-fell .knopf { background: var(--toner); color: var(--papier-hell); border-color: var(--toner); }
.abschnitt--grunge-oliv .knopf:hover, .abschnitt--grunge-fell .knopf:hover { color: var(--papier-hell); }
.textplatte .knopf { background: var(--toner); color: var(--papier-hell) !important; }
.abschnitt--grunge-khaki { background-color: #cfcdc5; }

/* ==========================================================================
   KARUSSELL "Persoenliche Worte" - reines CSS, kein JavaScript.
   Alle Beitraege liegen in einer waagerechten Scroll-Leiste mit Einrasten (scroll-snap):
   Am Handy mit dem Finger wischen, am Desktop per Pfeil oder Tastatur (Pfeiltasten, wenn die Leiste den Fokus hat).
   Die Pfeile sind Anker-Links auf den jeweiligen Beitrag. Jede Kachel traegt ihre eigene Nummer (1 / 2) und ihre eigene Pfeil-Leiste,
   so liegt alles innerhalb der Kachel. Die hoechste Kachel bestimmt die Hoehe aller (Flex-Dehnung), so springt beim Blaettern nichts.
   Erzeugt von einwurf-bauen.py aus persoenliche-worte.txt.
   ========================================================================== */
.nur-lesegeraet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.einwurf { position: relative; margin-bottom: 0; }
.einwurf__inhalt {
  display: flex; padding: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.einwurf__inhalt::-webkit-scrollbar { display: none; }
.einwurf__inhalt:focus-visible { outline: 3px solid var(--toner); outline-offset: -6px; }
.einwurf__eintrag {
  flex: 0 0 100%; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; margin: 0; border: 0;
  padding: var(--abstand-4) var(--abstand-5);
  scroll-margin-top: 260px;
}
.einwurf__eintrag, .einwurf__eintrag:last-child { border-bottom: 0; margin-bottom: 0; }
.einwurf__eintrag:last-child { padding-bottom: var(--abstand-4); }
.einwurf__eintrag > p:not(.einwurf__datum):not(.einwurf__fuss) { flex: 0 0 auto; }
.einwurf__fuss { font-family: var(--schrift-marke); font-weight: 800; text-align: right; margin: var(--abstand-3) 0 0; padding: 0; }
.einwurf__navigation {
  display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2);
  margin: auto 0 0; padding-top: var(--abstand-3); border-top: 3px solid var(--toner);
}
.einwurf__eintrag .einwurf__fuss { margin-bottom: var(--abstand-4); }
.einwurf__pfeil {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 48px; cursor: pointer; user-select: none;
  background: var(--signal); color: var(--toner); border: 3px solid var(--toner); box-shadow: 4px 4px 0 var(--toner);
  font-family: var(--schrift-stencil); font-size: 26px; line-height: 1; text-decoration: none; transition: transform .1s, box-shadow .1s;
}
.einwurf__pfeil:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--toner); }
.einwurf__pfeil:focus-visible { outline: 3px solid var(--toner); outline-offset: 3px; }
.einwurf__zaehler { font-family: var(--schrift-schreibmaschine, "Special Elite", monospace); font-size: 1.15rem; letter-spacing: .08em; color: var(--toner); }
@media (max-width: 640px) {
  .einwurf__eintrag { padding: var(--abstand-3); scroll-margin-top: 300px; }
  .einwurf__eintrag:last-child { padding-bottom: var(--abstand-3); }
  .einwurf__eintrag .einwurf__fuss { margin-bottom: var(--abstand-3); }
  .einwurf__pfeil { width: 48px; height: 44px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .einwurf__inhalt { scroll-behavior: auto; } }

/* Grosser Haupt-Knopf (Grundsaetze -> Charta): als Knopf erkennbar, nicht mit der gelben Titelplatte darunter verwechseln */
#grundsaetze { padding-bottom: 96px; }
.knopf--gross { font-size: 1.15rem; padding: 20px 28px; box-shadow: 8px 8px 0 var(--signal); }
.knopf--gross span { display: inline-block; margin-left: .4em; font-size: 1.3em; line-height: 1; transition: transform .1s; }
.knopf--gross:hover span { transform: translateX(4px); }
@media (max-width: 640px) {
  .knopf--gross { display: block; width: 100%; box-sizing: border-box; text-align: center; font-size: 1.05rem; }
  #grundsaetze .knopfreihe { margin-right: 8px; }
}

/* Startseite: Der Kontakt-Abschnitt hat eine Risskante, durch die die gelbe Linie der Fusszeile als Zacken sichtbar wurde -> dort keine Linie */
main:has(#kontakt) + .fusszeile { border-top: 0; }
main:has(#kontakt) + .fusszeile { margin-top: -14px; padding-top: calc(var(--abstand-5) + 14px); position: relative; z-index: 0; }
#kontakt { z-index: 1; }

/* Knopf mit Instagram-Symbol (Inline-SVG, nimmt die Textfarbe an) */
.knopf--icon { display: inline-flex; align-items: center; gap: .55em; }
.knopf__icon { flex: none; display: block; }

/* Dezenter Akzent aus dem Flyer: Flyer-Rot (#e8202b) fuer das Durchstreichen der Aufkleber */
:root { --akzent-rot: #e8202b; }
.aufkleber::after { border-top-color: var(--akzent-rot); }

/* Anfuehrungszeichen in einer Schrift mit sauberen deutschen Gaensefuesschen (Verdana & Co. zeichnen sie klein und schief) */
.anf { font-family: Arial, "Helvetica Neue", "Liberation Sans", sans-serif; font-weight: inherit; }

/* Aufmacher: Marker hinter "Eine Gemeinschaft." in Flyer-Rot statt Gelb (weisse Schrift) */
.aufmacher__spruch .marker { background: url("../grafik/marker-rot.svg") no-repeat 0 0 / 100% 100%; color: #fff; }

/* Nummerierung Charta: feste Breite, damit alle Zeilen buendig starten */
.charta-text ol li::before { min-width: 2.4ch; text-align: center; box-sizing: content-box; }

/* Stand 08.11.2026: Gelb nur noch als Signal (Knoepfe, Marker, Aufkleber, Platten),
   ruhige Strukturflaechen (Linien, Schatten, Streifen, Klebeband) in Oliv. */
:root { --oliv-akzent: #727a38; --oliv-akzent-hell: #98a355; }
.kopfzeile { border-bottom-color: var(--oliv-akzent); }
.fusszeile { border-top-color: var(--oliv-akzent); }
.spruchband { border-top-color: var(--oliv-akzent); border-bottom-color: var(--oliv-akzent); }
.aufmacher__text .kicker, .charta-kopf__platte .kicker, .titelplatte .kicker { color: var(--oliv-akzent-hell); }
.aufmacher__text, .charta-kopf__platte, .eintrittskarte { box-shadow: 10px 10px 0 var(--oliv-akzent); }
.einwurf__kopf { border-bottom-color: var(--oliv-akzent); }
.textplatte__zitat { border-left-color: var(--oliv-akzent); }
.navigation a:hover { border-bottom-color: var(--oliv-akzent-hell); }
.fusszeile__gruss { color: var(--oliv-akzent-hell); }
.warnstreifen { background-image: url("../grafik/warnstreifen-oliv.svg"); }
.charta-text hr { background-image: url("../grafik/warnstreifen-oliv.svg"); }
.kachel::before { background: rgba(114,122,56,.88); }
.titelplatte { border-left-color: var(--oliv-akzent); }
.abschnitt--grunge-oliv .titelplatte, .abschnitt--grunge-fell .titelplatte { border-left-color: var(--papier-hell); }

/* Ausmalbild-Satz unter der Eintrittskarte (Abschnitt Dazugehoeren) */
.ausmalbild { margin: 56px auto 0; max-width: 34ch; text-align: center; font-family: var(--schrift-label, "Special Elite", monospace); font-size: clamp(1.1rem, 2.6vw, 1.45rem); line-height: 1.45; color: var(--papier-hell); }