/* Black Place Society — Gestaltung (Fassung 3, 08.08.2026)
   ==========================================================================================
   ANLASS (Florian): „Die Seite soll sich anfühlen wie ein 2000er-Videospiel: wild, trashig, voller
   Scribble-Animationen, handgezeichneter Logos, Graffitis. Das soll belebt sein, nicht poliert,
   nicht modern. Sondern zerkratzt, trashig, verrucht, bewegt, haptisch."

   DIE ENTSCHEIDUNG, DIE ALLES ANDERE TRÄGT: Es bleibt bei EINER lauten Farbe auf hellem Papier —
   das ist Max' eigener Entwurf und Florians ausdrückliche Vorgabe. „Wild" wird deshalb NICHT über
   mehr Farben geholt, sondern über BEWEGUNG, KRUMME LINIEN und SCHIEFE. Das Textmarker-Gelb ist
   die einzige Ausnahme und ausschließlich für die Auswahl da.

   Warum das der schwierigere und der richtige Weg ist: Zwei laute Farben nebeneinander wirken
   schnell nach Vorlage. Eine Linie, die zittert, wirkt nach Hand — und darum geht es bei
   „haptisch".

   DAS KOCHEN (in `kritzel.js`): Rahmen werden dreifach mit Zufallszittern gezeichnet und mit acht
   Bildern je Sekunde durchgetauscht. Genau so entsteht Trickfilm mit der Hand. Ein `border` kann
   das nicht — deshalb steht hier fast nirgends einer.

   BREMSE: Wer „weniger Bewegung" gesetzt hat, bekommt alles ruhig, aber vollständig. */

:root {
  --papier:     #F4F2ED;
  --papier-tief:#E7E4DC;
  --tinte:      #14110F;
  --tinte-halb: #6E6862;
  --rot:        #E0231A;
  --rot-tief:   #B01610;
  --marker:     #FFE83D;   /* NUR Auswahl. Nie Fläche, nie Akzent. */

  --schrift-anzeige: "Arial Black", "Helvetica Neue", Impact, "Franklin Gothic Bold", system-ui, sans-serif;
  --schrift-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { min-width: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; height: auto; display: block; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 clamp(1rem, 0.97rem + 0.15vw, 1.0625rem)/1.65 var(--schrift-text);
  background-image: radial-gradient(var(--papier-tief) 1px, transparent 1.1px);
  background-size: 6px 6px;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }

.huelle { width: min(1180px, 100% - 2.5rem); margin-inline: auto; position: relative; z-index: 1; }

/* ── Dreck: Korn über allem ───────────────────────────────────────────────────────────────── */
/* Ein SVG-Rauschen als Datenadresse — kein Bild, das geladen werden müsste, und bei jeder
   Bildschirmgröße gleich fein. Liegt über der Seite, fängt aber keine Klicks ab. */
.dreck {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

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

.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.25rem;
}
.marke { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.marke__kuerzel {
  font: 900 1.75rem/0.9 var(--schrift-anzeige);
  letter-spacing: -0.04em; color: var(--rot);
  transform: skewX(-8deg) rotate(-2deg);
}
.marke__zeile {
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinte-halb); max-width: 12ch; line-height: 1.25;
}
/* Klebestreifen: schief, mit angedeuteter Faserung. */
.klebeband {
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.9rem; transform: rotate(2.5deg);
  background: repeating-linear-gradient(90deg, rgba(224,35,26,0.15) 0 3px, rgba(224,35,26,0.07) 3px 6px);
  border-left: 1px dashed rgba(20,17,15,0.25); border-right: 1px dashed rgba(20,17,15,0.25);
  color: var(--tinte);
}

/* ── Bühne ────────────────────────────────────────────────────────────────────────────────── */

.buehne { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); position: relative; }

.augenbraue {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0;
  font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
  color: var(--rot);
}
.augenbraue::before { content: ""; width: 2.25rem; height: 3px; background: var(--rot); }

.titel {
  margin: 1rem 0 0;
  font: 900 clamp(3.25rem, 13vw, 8rem)/0.86 var(--schrift-anzeige);
  letter-spacing: -0.045em; text-transform: uppercase;
}
/* Jedes Wort einzeln schief — gleichmäßig geneigt sähe wieder gebaut aus. Die Werte sind von
   Hand gesetzt, nicht gerechnet: Unregelmäßigkeit ist der ganze Punkt. */
.titel__wort { display: block; transform-origin: left center; }
.titel__wort:nth-child(1) { transform: skewX(-8deg) rotate(-1.2deg); }
.titel__wort:nth-child(2) { transform: skewX(-8deg) rotate(0.8deg) translateX(0.35em); }
.titel__wort:nth-child(3) { transform: skewX(-8deg) rotate(-0.5deg); }
.titel__zeile2 { color: var(--rot); }

/* Einflug beim Laden: jedes Wort einzeln, schnell und hart — kein sanftes Einblenden. */
@media (prefers-reduced-motion: no-preference) {
  .titel__wort { animation: reinschlagen 380ms cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
  .titel__wort:nth-child(1) { animation-delay: 60ms; }
  .titel__wort:nth-child(2) { animation-delay: 150ms; }
  .titel__wort:nth-child(3) { animation-delay: 240ms; }
}
@keyframes reinschlagen {
  from { opacity: 0; transform: skewX(-8deg) rotate(-6deg) translateX(-0.12em) scale(0.92); }
}

.untertitel {
  margin: 1.25rem 0 0; max-width: 32ch;
  font: 700 clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem)/1.35 var(--schrift-text);
  text-transform: uppercase;
}
.satz { margin: 1rem 0 0; max-width: 46ch; color: var(--tinte-halb); }

/* ── Kritzeleien, die sich selbst zeichnen ────────────────────────────────────────────────── */

.kritzel { overflow: visible; }
.kritzel path {
  fill: none; stroke: var(--rot); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
}
.kritzel.gezeichnet path { animation: zeichnen 700ms ease-out forwards; }
.kritzel.gezeichnet path:nth-child(2) { animation-delay: 180ms; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }

.kritzel--strich { width: min(520px, 100%); margin-top: 0.35rem; }
.kritzel--pfeil {
  position: absolute; right: 6%; bottom: -1rem; width: 70px; opacity: 0.85;
  transform: rotate(8deg);
}
.kritzel--pfeil path { stroke: var(--tinte); stroke-width: 3.5; }

/* Große Kritzel-Marke rechts in der Bühne: füllt die tote Fläche neben dem Namen und ist das
   einzige Stück, das wirklich nach Sprühdose aussehen darf. Auf schmalen Geräten weg — dort ist
   der Platz für Text da, nicht für Zierde. */
.kritzel--marke {
  position: absolute; right: -1%; top: 6%; width: min(360px, 34vw); opacity: 0.9;
  transform: rotate(-6deg);
}
.kritzel--marke path { stroke-width: 5; }
.kritzel--marke path:nth-child(2) { stroke: var(--tinte); stroke-width: 4; }
.kritzel--marke path:nth-child(3) { stroke: var(--tinte); stroke-width: 2.5; }
@media (max-width: 60rem) { .kritzel--marke { display: none; } }

/* ── Zwei gekreuzte Laufbänder ────────────────────────────────────────────────────────────── */
/* Zwei IDENTISCHE Gruppen je Band. Die Bewegung schiebt um genau eine Gruppenbreite (-50 %), so
   schließt die zweite lückenlos an. Mit ungleichen Gruppen überlappt es sichtbar — genau das war
   der Fehler in Fassung 1. */
.baender { position: relative; margin-block: clamp(2.5rem, 6vw, 4rem); overflow: hidden; padding-block: 0.75rem; }
/* Das erste Band rutscht ÜBER den unteren Rand des Grossbilds — daraus wird die Collage. */
.grossbild + .baender { margin-top: clamp(-7rem, -9vw, -4rem); }

/* Beide Bänder ragen absichtlich über den Bildschirmrand hinaus — sonst sieht man beim Drehen
   an den Ecken das Papier durchblitzen und es wirkt wie ein Fehler statt wie ein Aufkleber. */
.balken { padding: 0.8rem 0; overflow: hidden; width: 110%; margin-left: -5%; }
.balken--rot { background: var(--rot); color: var(--papier); transform: rotate(-1.6deg); }
/* KEIN negativer Abstand mehr. Beim ersten Wurf standen die Bänder 61 px ineinander und die
   Schrift beider war unlesbar — genau die Meldung „das rote Band ist verpackt". Sie kreuzen sich
   jetzt nur noch an den Enden, wo keine Schrift steht. */
.balken--hohl {
  transform: rotate(1.2deg); margin-top: 1.25rem;
  border-block: 2px solid var(--tinte);
  color: transparent; -webkit-text-stroke: 1.2px var(--tinte);
}
.balken__lauf { display: flex; width: max-content; animation: laufen 30s linear infinite; }
.balken__lauf--rueckwaerts { animation: laufen-rueck 38s linear infinite; }
.balken__gruppe {
  display: flex; align-items: center; flex: 0 0 auto;
  font: 900 1rem/1 var(--schrift-anzeige); letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
}
/* Abstand an die WÖRTER, nicht zwischen die Gruppen — sonst klebt beim Umschlagen das letzte
   Wort am ersten. */
.balken__gruppe span { padding-inline: 1.5rem; }
.balken__gruppe span::after { content: "✦"; margin-left: 1.5rem; opacity: 0.55; }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes laufen-rueck { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ── Fotos: Grossbild und Sammelalbum ────────────────────────────────────────────────────── */
/* Die Fotos sind SCHWARZWEISS, das Rot kommt aus Rahmen, Band und Zetteln — genau die Aufteilung
   von Max' Plakat. Farbige Fotos neben rotem Band ergäben drei Farben und damit Brei. */

.grossbild { position: relative; margin: 0; }
.grossbild img {
  width: 100%; height: auto;
  filter: grayscale(1) contrast(1.12) brightness(1.02);
}

/* ── Risskanten ───────────────────────────────────────────────────────────────────────────── */
/* Der erste Versuch war ein `clip-path` mit siebzehn gleich großen Zacken — das sah aus wie mit
   der Zickzackschere geschnitten, nicht wie gerissen. Jetzt liegt ein Streifen in PAPIERFARBE
   ÜBER dem Bild, dessen Kante gerechnet ist (siehe scripts/risskante.mjs): viele feine
   Auslenkungen, vereinzelt tiefe Kerben und ein hellerer Fasersaum. Der Saum ist der eigentliche
   Trick — er ist der unbedruckte Kern des Papiers und lässt die Kante gerissen wirken.
   Die Kachel ist nahtlos und wiederholt sich waagrecht über jede Bildschirmbreite. */
.riss {
  position: relative; z-index: 3;
  height: 46px; margin-top: -46px; pointer-events: none;
  background: url("/bilder/risskante-oben.svg") repeat-x bottom center / auto 100%;
}
.riss--unten { background-image: url("/bilder/risskante-unten.svg"); }
.riss--schmal { height: 30px; margin-top: -30px; background-image: url("/bilder/risskante-schmal.svg"); }
/* Zwei nebeneinander liegende Kanten dürfen nicht identisch sein — sonst sieht man das Muster. */
.riss--gespiegelt { transform: scaleX(-1); }

/* Zettel: kleine beschriftete Streifen, schief aufgeklebt. */
.zettel {
  display: inline-block; padding: 0.3rem 0.7rem;
  background: var(--papier); color: var(--tinte);
  font: 700 0.6875rem/1 var(--schrift-text); letter-spacing: 0.16em; text-transform: uppercase;
  transform: rotate(-1.6deg);
}
.zettel--gross {
  position: absolute; left: 4%; bottom: 12%;
  background: var(--rot); color: var(--papier);
  font-size: 0.8125rem; padding: 0.45rem 0.9rem; transform: rotate(-1.2deg);
}

.album { margin-block: clamp(2.5rem, 6vw, 4rem); }
.album__reihe {
  display: grid; gap: 1.75rem 1.5rem; margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.schnipsel { position: relative; margin: 0; background: var(--papier); padding: 0.5rem 0.5rem 0.9rem; }
/* Jeder Schnipsel anders geneigt — sonst sieht es nach Raster aus statt nach Sammelalbum. */
.schnipsel:nth-child(1) { transform: rotate(-1.4deg); }
.schnipsel:nth-child(2) { transform: rotate(1deg); }
.schnipsel:nth-child(3) { transform: rotate(-0.6deg); }
.schnipsel:nth-child(4) { transform: rotate(1.5deg); }
.schnipsel:nth-child(5) { transform: rotate(-1.1deg); }
.schnipsel:nth-child(6) { transform: rotate(0.7deg); }
.schnipsel img {
  width: 100%; height: auto; display: block;
  filter: grayscale(1) contrast(1.1);
  transition: filter 220ms ease;
}
/* Beim Darüberfahren kommt die Farbe zurück — der einzige Ort, an dem das erlaubt ist, und er
   belohnt Neugier, statt sich aufzudrängen. */
.schnipsel:hover img { filter: grayscale(0) contrast(1.02); }
.schnipsel figcaption { position: absolute; left: 0.6rem; bottom: -0.55rem; z-index: 3; }
/* Klebestreifen oben rechts an jedem Schnipsel. */
.schnipsel::before {
  content: ""; position: absolute; z-index: 3;
  top: -0.55rem; right: 1.2rem; width: 3.2rem; height: 1.1rem;
  transform: rotate(6deg);
  background: repeating-linear-gradient(90deg, rgba(224,35,26,0.16) 0 3px, rgba(224,35,26,0.07) 3px 6px);
  border-left: 1px dashed rgba(20,17,15,0.22); border-right: 1px dashed rgba(20,17,15,0.22);
}

/* ── Das Menü ─────────────────────────────────────────────────────────────────────────────── */

.menue-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.menue-hinweis {
  margin: 0; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinte-halb);
}

.menue { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 36rem; }

.menue__punkt { position: relative; cursor: pointer; }
/* Jede Zeile leicht anders geneigt — von Hand gesetzt. */
.menue__punkt:nth-child(1) { transform: rotate(-0.5deg); }
.menue__punkt:nth-child(2) { transform: rotate(0.35deg); }
.menue__punkt:nth-child(3) { transform: rotate(-0.25deg); }
.menue__punkt:nth-child(4) { transform: rotate(0.5deg); }

/* Der gezeichnete, kochende Rahmen kommt aus kritzel.js. */
.kiste-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.kiste-strich { fill: none; stroke: var(--tinte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.menue__strich {
  position: absolute; inset: 10% -1.5% 16% -1.5%;
  background: var(--marker);
  transform: scaleX(0) rotate(-0.7deg); transform-origin: left center;
  transition: transform 150ms cubic-bezier(0.3, 0.9, 0.4, 1);
  z-index: 0;
}
.menue__punkt.ist-gewaehlt .menue__strich { transform: scaleX(1) rotate(-0.7deg); }

.menue__inhalt {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.75rem 1.6rem 0.75rem 1rem;
  font: 900 clamp(1.25rem, 1rem + 1.4vw, 1.9rem)/1 var(--schrift-anzeige);
  text-transform: uppercase; letter-spacing: -0.02em;
}
/* Der Zeiger ist der Kern des Videospiel-Gefühls: Er zeigt auf die Auswahl und wippt dabei. */
.menue__zeiger { color: var(--rot); opacity: 0; transform: translateX(-0.4em); transition: opacity 120ms, transform 120ms; }
.menue__punkt.ist-gewaehlt .menue__zeiger { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: no-preference) {
  .menue__punkt.ist-gewaehlt .menue__zeiger { animation: wippen 620ms ease-in-out infinite; }
}
@keyframes wippen { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.28em); } }

.menue__name { flex: 0 0 auto; }
.menue__bald {
  margin-left: auto; text-align: right;
  font: 700 0.6875rem/1.2 var(--schrift-text);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-halb);
}

/* ── Aufkleber ────────────────────────────────────────────────────────────────────────────── */

.aufkleber-reihe { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2.5rem; }
.aufkleber {
  position: relative; padding: 0.6rem 1.1rem;
  font: 900 0.8125rem/1 var(--schrift-anzeige); letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--papier);
}
.aufkleber:nth-child(1) { transform: rotate(-3deg); }
.aufkleber:nth-child(2) { transform: rotate(2deg); }
.aufkleber:nth-child(3) { transform: rotate(-1.5deg); }
.aufkleber--rot { background: var(--rot); color: var(--papier); }
.aufkleber--rot .kiste-strich { stroke: var(--rot-tief); }

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

.fuss {
  position: relative; margin-top: clamp(3rem, 8vw, 5rem); margin-bottom: 3rem;
  padding: 1.5rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: baseline;
  font-size: 0.8125rem; color: var(--tinte-halb);
}
.fuss a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fuss a:hover { color: var(--rot); }
.fuss__rest { margin-left: auto; }

/* ── Social ───────────────────────────────────────────────────────────────────────────────── */
/* Der erste Social-Verweis der Seite. Das Zeichen ist ein einfarbiger Vektor in der aktuellen
   Textfarbe — KEIN Emoji und kein buntes Fremdlogo. Beides bricht das Bild und ist Hausregel.
   Beim Darüberfahren kippt es leicht, wie ein schief geklebter Aufkleber. */
.sozial {
  display: inline-flex; align-items: center; gap: 0.45rem;
  text-decoration: none; font-weight: 700; letter-spacing: 0.02em;
  transform: rotate(-0.8deg);
}
.sozial:hover { color: var(--rot); transform: rotate(0.8deg); }
.sozial__zeichen { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.sozial__zeichen rect, .sozial__zeichen circle {
  fill: none; stroke: currentColor; stroke-width: 1.9;
}
.sozial__zeichen .sozial__punkt { fill: currentColor; stroke: none; }

/* ── Kratz-Übergang beim Seitenwechsel ────────────────────────────────────────────────────── */

/* Seitenwechsel: Ein Blatt Papier fährt von unten über den Bildschirm, seine Oberkante ist
   gerissen. Vorher waren es fünf dicke schwarze Zickzacklinien — die sahen nach Kratzer im Lack
   aus und nicht nach Papier. Das Blatt trägt zusätzlich das Papierkorn, damit es sich nicht wie
   eine Farbfläche anfühlt. */
.kratz { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.kratz__blatt {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: var(--papier);
  background-image: radial-gradient(var(--papier-tief) 1px, transparent 1.1px);
  background-size: 6px 6px;
  transform: translateY(100%);
  animation: blattHoch 380ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  box-shadow: 0 -14px 30px rgba(20, 17, 15, 0.14);
}
.kratz__blatt::before {
  content: ""; position: absolute; left: 0; right: 0; top: -44px; height: 46px;
  background: url("/bilder/risskante-oben.svg") repeat-x bottom center / auto 100%;
}
@keyframes blattHoch { to { transform: translateY(0); } }

/* ── Rechtstexte ──────────────────────────────────────────────────────────────────────────── */

.text { max-width: 68ch; padding-block: 1rem 2rem; position: relative; z-index: 1; }
.text h1 {
  font: 900 clamp(2rem, 1.4rem + 2.6vw, 3.25rem)/0.95 var(--schrift-anzeige);
  text-transform: uppercase; letter-spacing: -0.03em;
  transform: skewX(-8deg) rotate(-1deg); transform-origin: left; margin: 0 0 1.5rem;
}
.text h2 {
  font: 900 1.125rem/1.25 var(--schrift-text); text-transform: uppercase; letter-spacing: 0.06em;
  margin: 2.25rem 0 0.6rem; padding-left: 0.7rem; border-left: 5px solid var(--rot);
}
.text h3 { font-size: 1rem; margin: 1.4rem 0 0.35rem; }
.text p, .text li { color: #2A2521; }
.text ul { padding-left: 1.15rem; }
.text li { margin-bottom: 0.35rem; }
.text table {
  width: 100%; border-collapse: collapse; margin: 0.75rem 0 1.25rem; font-size: 0.9rem;
  display: block; max-width: 100%; overflow-x: auto;
}
.text th, .text td { text-align: left; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--papier-tief); vertical-align: top; }
.text th { font-weight: 700; white-space: nowrap; }
.hinweis-kasten { position: relative; padding: 1.1rem 1.2rem; margin: 1.5rem 0; background: var(--papier-tief); }
.hinweis-kasten p:first-child { margin-top: 0; }
.hinweis-kasten p:last-child { margin-bottom: 0; }

/* ── Zustimmung ───────────────────────────────────────────────────────────────────────────── */

body.fragt-nach { padding-bottom: 15rem; }

.zustimmung {
  position: fixed; inset: auto 1rem 1rem; z-index: 60;
  width: min(34rem, calc(100% - 2rem)); margin-inline: auto;
  background: var(--papier); padding: 1.15rem 1.25rem;
  box-shadow: 9px 9px 0 var(--rot);
  border: 2.5px solid var(--tinte);
  transform: rotate(-0.6deg);
}
.zustimmung h2 { margin: 0 0 0.5rem; font: 900 1.0625rem/1.2 var(--schrift-anzeige); text-transform: uppercase; }
.zustimmung p { margin: 0 0 1rem; font-size: 0.875rem; color: #2A2521; }
.zustimmung__knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.zustimmung__knoepfe .knopf { flex: 1 1 auto; text-align: center; }
.zustimmung__mehr { margin-top: 0.75rem; font-size: 0.75rem; }

.knopf {
  position: relative;
  font: 700 0.8125rem/1 var(--schrift-text); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.75rem 1.1rem; border: 2.5px solid var(--tinte); background: var(--papier);
  cursor: pointer; color: var(--tinte);
}
.knopf:hover { background: var(--marker); transform: rotate(-1deg); }
.knopf--ja { background: var(--rot); color: var(--papier); border-color: var(--rot); }
.knopf--ja:hover { background: var(--rot-tief); border-color: var(--rot-tief); color: var(--papier); }
.knopf--klein { padding: 0.35rem 0.7rem; font-size: 0.6875rem; border-width: 2px; }

/* ── Bewegung nur, wenn erwünscht ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .kritzel path { stroke-dashoffset: 0; }
  .menue__punkt.ist-gewaehlt .menue__strich { transform: scaleX(1) rotate(-0.7deg); }
  .menue__punkt.ist-gewaehlt .menue__zeiger { opacity: 1; transform: none; }
}

@media (max-width: 34rem) {
  .huelle { width: calc(100% - 2rem); }
  .fuss__rest { margin-left: 0; width: 100%; }
  .kritzel--pfeil { display: none; }
  .balken--hohl { display: none; }   /* zwei Bänder sind auf dem Telefon eines zu viel */
  .menue__inhalt { flex-wrap: wrap; }
  .menue__bald { margin-left: 0; width: 100%; text-align: left; }
  .zustimmung { inset: auto 0.5rem 0.5rem; padding: 0.9rem 1rem; max-height: 62vh; overflow-y: auto; }
  .zustimmung p { font-size: 0.8125rem; margin-bottom: 0.75rem; }
  .zustimmung h2 { font-size: 0.9375rem; }
  .knopf { padding: 0.6rem 0.8rem; font-size: 0.75rem; }
  body.fragt-nach { padding-bottom: 20rem; }
}

/* ── Navigation ───────────────────────────────────────────────────────────────────────────── */
/* Dieselbe Bedienung wie das Menü auf der Startseite: Der aktive Punkt ist mit dem Textmarker
   angestrichen. Ein Verein hat nicht so viele Bereiche, dass ein Ausklappmenü nötig wäre — und
   eine offen liegende Leiste passt besser zu einer Seite, die nichts versteckt. */
.nav { margin-bottom: clamp(0.5rem, 2vw, 1.25rem); }
.nav__reihe { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
.nav__punkt {
  position: relative; text-decoration: none; padding: 0.3rem 0.55rem;
  font: 900 0.9375rem/1 var(--schrift-anzeige); letter-spacing: 0.02em; text-transform: uppercase;
}
.nav__punkt:nth-child(odd) { transform: rotate(-0.8deg); }
.nav__punkt:nth-child(even) { transform: rotate(0.6deg); }
.nav__wort { position: relative; z-index: 1; }
.nav__strich {
  position: absolute; inset: 18% -4% 20% -4%;
  background: var(--marker); z-index: 0;
  transform: scaleX(0) rotate(-0.8deg); transform-origin: left center;
  transition: transform 150ms cubic-bezier(0.3, 0.9, 0.4, 1);
}
.nav__punkt:hover .nav__strich,
.nav__punkt.ist-hier .nav__strich { transform: scaleX(1) rotate(-0.8deg); }
.nav__punkt.ist-bald { color: var(--tinte-halb); cursor: default; }
.nav__punkt.ist-bald .nav__strich { display: none; }
/* Was noch nicht da ist, bekommt einen Strich durch — ehrlicher als ein toter Verweis. */
.nav__punkt.ist-bald .nav__wort { text-decoration: line-through; text-decoration-thickness: 2px; }

/* ── Inhaltsseiten ────────────────────────────────────────────────────────────────────────── */

.inhalt { padding-block: 1rem 3rem; position: relative; z-index: 1; }
.seitentitel {
  margin: 0.5rem 0 1.5rem;
  font: 900 clamp(2.5rem, 1.6rem + 4vw, 5rem)/0.9 var(--schrift-anzeige);
  text-transform: uppercase; letter-spacing: -0.04em;
  transform: skewX(-8deg) rotate(-1deg); transform-origin: left;
}
.block { margin-block: clamp(2rem, 5vw, 3.5rem); }
.einleitung { font-size: 1.125rem; max-width: 52ch; }
.schlagzeile {
  margin: 1.5rem 0 0.6rem;
  font: 900 1.375rem/1.1 var(--schrift-anzeige); text-transform: uppercase; letter-spacing: -0.01em;
}
.schlagzeile--gross { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); margin-top: 0.5rem; }

/* Text neben Bild. Bricht früh um — zwei Spalten unter 50rem sind zwei zu schmale Spalten. */
.paar { display: grid; gap: 1.75rem; align-items: start; margin-top: 1.25rem; }
@media (min-width: 50rem) { .paar { grid-template-columns: 1.15fr 1fr; gap: 2.5rem; } }
.paar__text > :first-child { margin-top: 0; }
.stapel { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.fakten { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.25rem; margin: 1rem 0; }
.fakten dt { font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; padding-top: 0.2rem; color: var(--tinte-halb); }
.fakten dd { margin: 0; }
.liste { padding-left: 1.1rem; }
.liste li { margin-bottom: 0.3rem; }

/* Karten für Geplantes. Bewusst ohne Datum — ein erfundener Termin wäre schlimmer als keiner. */
.karten { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 1.5rem; }
.karte { position: relative; padding: 1.1rem 1.2rem 1.3rem; background: var(--papier); }
.karte:nth-child(odd) { transform: rotate(-0.6deg); }
.karte:nth-child(even) { transform: rotate(0.5deg); }
.karte h3 { margin: 0 0 0.4rem; font: 900 1.125rem/1.15 var(--schrift-anzeige); text-transform: uppercase; }
.karte p { margin: 0 0 0.5rem; font-size: 0.9375rem; }
.karte__stand {
  margin: 0.75rem 0 0 !important; font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rot); font-weight: 700;
}

.trenner { margin-block: clamp(2rem, 5vw, 3rem); }
.trenner svg { width: 100%; max-width: 40rem; }
.trenner path { fill: none; stroke: var(--tinte); stroke-width: 2.5; stroke-linecap: round; opacity: 0.5; }

/* Abschnittswechsel als gerissenes Band: ein dunkler Streifen, oben und unten abgerissen. So
   entsteht der Eindruck, ein Stück Papier läge quer über der Seite — statt einer gezogenen Linie. */
.rissband {
  position: relative; margin-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--tinte); color: var(--papier);
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
  /* Über die volle Breite ausbrechen, obwohl das Band im begrenzten Textbereich steht — ein
     gerissener Streifen, der am Rand aufhört, sieht aus wie ein Fehler. */
  margin-inline: calc(50% - 50vw); padding-inline: max(1.25rem, calc(50vw - 590px));
}
.rissband::before, .rissband::after {
  content: ""; position: absolute; left: 0; right: 0; height: 34px;
  background: url("/bilder/risskante-schmal.svg") repeat-x center / auto 100%;
}
.rissband::before { top: 0; transform: scaleY(-1); }
.rissband::after { bottom: 0; transform: scaleX(-1); }
.rissband .huelle { position: relative; z-index: 2; }
/* Auf dem schwarzen Band bleibt der Text in Papierfarbe. Gelb wäre naheliegend, ist aber für die
   AUSWAHL reserviert — und Rot auf Schwarz hat zu wenig Kontrast zum Lesen (rund 3,5 zu 1, nötig
   sind 4,5). Der kurze Strich davor darf rot bleiben: Er ist Zierde, kein Text. */
.rissband .augenbraue { color: var(--papier); }
.rissband .augenbraue::before { background: var(--rot); }
.rissband .schlagzeile { color: var(--papier); }

.knopf--gross { display: inline-block; margin-top: 1rem; padding: 0.9rem 1.4rem; font-size: 0.9375rem; text-decoration: none; }
a.aufkleber { text-decoration: none; }

.schnipsel--breit { margin-top: 1.5rem; }
.schnipsel--hoch img { aspect-ratio: 3 / 4; object-fit: cover; }
.album__reihe--vier { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

/* Auf Textseiten stört das Papierkorn beim Lesen — dort deutlich zurücknehmen. */
body.ist-text .dreck { opacity: 0.25; }

/* Dokumente und Grafiken behalten ihre Farbe. Fotos werden entfärbt, weil das zum Plakat passt —
   bei einem Lageplan zerstört genau das aber die LEGENDE (der rote Punkt ist die Bühne), und eine
   rote Wortmarke auf Schwarz wird zu grauem Matsch. Beides sind keine Fotos, sondern Grafiken. */
.schnipsel--doku img { filter: none; }
.schnipsel--doku:hover img { filter: none; }
.schnipsel--doku { max-width: 34rem; }

/* ── Zeitreise: die Scroll-Seite zur Geschichte ───────────────────────────────────────────── */
/* ANLASS (Max, Videocall 08.08.2026): „Diese Scroll-Dinger finde ich geil … wo halt sozusagen
   was näher und wieder weg kommt, wenn du scrollst." Gewünscht war eine Timeline zum Schwarzen
   Platz — vom alten zum neuen Platz, mit historischen Fotos und kurzen Texten, ausdrücklich auch
   für ältere Leute, bei denen Erinnerungen wach werden sollen.

   BAUART: Die Bildbühne bleibt stehen (sticky), die Textstufen ziehen daran vorbei. Das ist die
   verlässliche Variante — ein an den Scrollbalken gekoppeltes Video ruckelt auf Telefonen und
   braucht ein Video, das es hier nicht gibt. Die Bühne ist so gebaut, dass später ein Video an
   dieselbe Stelle kann, ohne die Stufen anzufassen. */

.zeitreise { position: relative; z-index: 1; }
@media (min-width: 62rem) {
  .zeitreise {
    display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 5rem);
    width: min(1180px, 100% - 2.5rem); margin-inline: auto;
    align-items: start;
  }
  /* Die Bühne steht, die Stufen laufen. */
  .zeitreise__buehne { position: sticky; top: 12vh; order: 2; }
}

.zeitreise__buehne { margin-bottom: 2rem; }
.zeitreise__rahmen {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--papier-tief);
  /* Der Rahmen ist ein aufgeklebtes Bild: leicht schief, mit Klebestreifen an der Ecke. */
  transform: rotate(-0.8deg);
}
.zeitreise__rahmen::after {
  content: ""; position: absolute; z-index: 4; top: -0.6rem; left: 12%;
  width: 5rem; height: 1.3rem; transform: rotate(-4deg);
  background: repeating-linear-gradient(90deg, rgba(224,35,26,0.16) 0 3px, rgba(224,35,26,0.07) 3px 6px);
  border-left: 1px dashed rgba(20,17,15,0.22); border-right: 1px dashed rgba(20,17,15,0.22);
}
.zeitreise__bild {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.06);
  transition: opacity 520ms ease, transform 900ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.zeitreise__bild.ist-da { opacity: 1; transform: scale(1); }
.zeitreise__bild img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }

/* Die Jahreszahl unter der Bühne — sie zählt beim Scrollen mit. */
.zeitreise__marke { margin: 0.9rem 0 0; }
.zeitreise__jahr {
  display: inline-block; padding: 0.35rem 0.9rem;
  background: var(--rot); color: var(--papier);
  font: 900 0.875rem/1 var(--schrift-anzeige); letter-spacing: 0.12em; text-transform: uppercase;
  transform: rotate(-1.4deg);
}

/* Platzhalter für die Archivbilder. Er sieht nach leerem Fotoalbum aus und sagt ehrlich, dass
   das Bild noch fehlt — besser als ein grauer Kasten und viel besser als ein erfundenes Bild. */
.platzhalter {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 0.6rem;
  text-align: center; padding: 1.5rem;
  background: var(--papier-tief);
  background-image: repeating-linear-gradient(45deg,
    rgba(20,17,15,0.045) 0 12px, transparent 12px 24px);
  border: 2px dashed rgba(20,17,15,0.28);
}
.platzhalter__jahr {
  font: 900 clamp(1.5rem, 1rem + 2vw, 2.5rem)/1 var(--schrift-anzeige);
  text-transform: uppercase; letter-spacing: -0.02em; color: var(--tinte);
}
.platzhalter__text {
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-halb);
  line-height: 1.6;
}
.platzhalter--offen { border-style: dotted; }

/* Die Textstufen. */
.zeitreise__stufen { padding-block: 1rem 2rem; }
@media (min-width: 62rem) { .zeitreise__stufen { order: 1; } }

.stufe {
  position: relative; padding: 1.4rem 0 1.4rem 1.6rem;
  margin-block: clamp(3rem, 22vh, 12rem);
  border-left: 3px solid var(--papier-tief);
  transition: border-color 300ms ease, opacity 300ms ease;
  opacity: 0.55;
}
.stufe.ist-da { opacity: 1; border-left-color: var(--rot); }
.stufe::before {
  content: attr(data-jahr);
  display: inline-block; margin-bottom: 0.5rem;
  font: 700 0.6875rem/1 var(--schrift-text); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rot);
}
.stufe h2 {
  margin: 0 0 0.6rem;
  font: 900 clamp(1.375rem, 1rem + 1.6vw, 2rem)/1.05 var(--schrift-anzeige);
  text-transform: uppercase; letter-spacing: -0.02em;
}
.stufe p { margin: 0 0 0.6rem; max-width: 44ch; }
.stufe__hinweis {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinte-halb); font-weight: 700;
}

/* Ohne Bewegung: keine Bühne, keine Überblendung — jede Stufe bekommt ihr Bild direkt darüber.
   Die Seite bleibt dadurch vollständig lesbar, sie erzählt nur nicht mehr mit. */
@media (prefers-reduced-motion: reduce) {
  .zeitreise__buehne { position: static; }
  .zeitreise__bild { position: relative; opacity: 1; transform: none; }
  .zeitreise__rahmen { aspect-ratio: auto; }
  .stufe { opacity: 1; }
}