/* =========================================================================
   CCRR - eigene Ergaenzungen
   =========================================================================

   Diese Datei wird nach site.css geladen und ueberschreibt deren Werte.
   Aenderungen bitte hier eintragen, nicht in site.css - dann bleiben sie
   erhalten, falls site.css einmal aus der Vorschau neu uebernommen wird.

   ------------------------------------------------------------------------
   1. Kontraste (WCAG 2.1 Stufe AA, Zielwert 4,5:1 fuer normalen Text)
   ------------------------------------------------------------------------

   Gemessen wurde jede Farbkombination gegen den Grund, auf dem sie
   tatsaechlich steht.

   Ergebnis vorweg: Das Vereinsgelb ist in Ordnung. Es wird als Schrift
   ausschliesslich auf Navy (13,16:1) oder Clubblau (7,01:1) eingesetzt,
   und als Flaeche immer mit dunkler Schrift darauf (13,63:1). Blau und
   Gelb bleiben also unangetastet.

   Durchgefallen sind zwei Grautoene, die niemandem auffallen, aber viel
   Text betreffen. Beide werden hier minimal abgedunkelt - der optische
   Unterschied ist kaum wahrnehmbar, der Lesbarkeitsgewinn deutlich.
   ========================================================================= */

:root {
	/* Sekundaertext: Bildunterschriften, Labels, Meta-Zeilen.
	   An 28 Stellen im Theme im Einsatz.

	   Der Wert war zweimal knapp danebengegriffen, beide Male aus
	   demselben Grund: gemessen wurde gegen einen Hintergrund, obwohl
	   es zwei gibt. #747b88 = 4,07:1 auf Papier, durchgefallen.
	   #6d737f = 4,56:1 auf Papier, aber nur 4,14:1 auf Knochenweiss
	   (--bone, #f2efe6) - und `.section-bone` gibt es auf mehreren
	   Seiten. Heute steht dort kein Muted-Text, das war Zufall und
	   keine Regel.

	   #636a78 traegt auf beiden: 5,20:1 auf Papier, 4,73:1 auf
	   Knochenweiss, 5,44:1 auf Weiss. Der optische Unterschied ist
	   kaum wahrnehmbar. */
	--muted: #636a78;
}

/* -------------------------------------------------------------------------
   2. Tastaturbedienung

   Wer nicht mit der Maus arbeitet, muss sehen koennen, wo er gerade ist.
   Der Browser-Standardrahmen geht auf dunklem Grund unter, deshalb hier
   ein eigener, der auf hell und dunkel funktioniert.
   ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--clubyellow);
	outline-offset: 2px;
	/* Zweiter Ring in Dunkelblau, damit der Rahmen auch auf gelben
	   Flaechen sichtbar bleibt. */
	box-shadow: 0 0 0 5px rgba(4, 20, 63, .85);
}

/* -------------------------------------------------------------------------
   3. Sprunglink zum Inhalt

   Erste Station fuer Tastatur- und Screenreader-Nutzer: ueberspringt die
   Navigation. Unsichtbar, bis er den Fokus bekommt.
   ------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 14px 20px;
	background: var(--clubblue);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .07em;
}

.skip-link:focus {
	left: 0;
}

/* -------------------------------------------------------------------------
   4. Nur fuer Screenreader

   Text, der vorgelesen, aber nicht angezeigt wird - etwa Beschriftungen
   von Suchfeldern, die optisch schon durch ihre Umgebung erklaert sind.
   ------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	white-space: normal;
}

/* -------------------------------------------------------------------------
   5. Ruhige Darstellung

   Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, bekommt
   die Seite ohne Animationen. site.js beruecksichtigt das bereits; hier
   werden zusaetzlich die reinen CSS-Uebergaenge stillgelegt.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Hinweis auf Pflichtfelder, eingefuegt bei der Barrierefreiheits-Runde.
   Steht als erstes Element im Formular, damit Screenreader ihn vor dem
   ersten Feld vorlesen. */
.form-hinweis {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--muted);
}

/* Formularbeschriftungen waren 9px gross, in Versalien und gesperrt.
   Das ist selbst mit guten Augen muehsam und der Altersschnitt im Verein
   ist nicht 25. 12px bleibt optisch dieselbe Zeile, ist aber lesbar.
   Der Kontrast von #4c5363 auf Weiss betraegt 7,71:1 und bleibt. */
.field label {
  font-size: 12px;
}

/* Rueckmeldung nach dem Absenden eines Formulars.
   Gruen und rot sind nicht die einzigen Unterscheidungsmerkmale: Der
   linke Balken und der Text selbst tragen die Aussage, damit auch
   farbfehlsichtige Leser sie erfassen. */
.ccrr-hinweis {
  margin: 0 0 26px;
  padding: 16px 20px;
  border-left: 4px solid;
  font-size: 15px;
  line-height: 1.5;
  scroll-margin-top: 100px;
}
.ccrr-hinweis-gut {
  border-left-color: #1f7a4d;
  background: #eef7f1;
  color: #14532d;
}
.ccrr-hinweis-fehler {
  border-left-color: #a4262c;
  background: #fdf0f0;
  color: #7a1c20;
}

/* Archiv-Waehler im Terminarchiv.
   Bis September 2026 stand hier eine Leiste mit allen Jahrgaengen -
   ueber vierzig Zahlen ueber der Liste. Rueckmeldung des Vereins:
   zu viel fuer Leute, die nur gucken wollen. Jetzt: Rueckweg zu den
   kommenden Terminen plus eine Jahrgangs-Auswahlliste. */
.archivwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 40px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.archivwahl .jahr {
  /* 21 Pixel hoch, gemessen am 05.09.2026 - unter den 24, die eine
     Fingerkuppe braucht. Der Verweis ist der Rueckweg aus dem
     Jahrgangsarchiv und wird auf dem Telefon getroffen; Polsterung
     statt groesserer Schrift, damit die Leiste nicht lauter wird. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 0;
  font-size: 13.5px;
  color: #46506a;
}
.archivwahl .jahr:hover { color: var(--navy); }

/* Kontaktverweise im Text bekommen eine Fingerkuppe.
   Gemessen am 05.09.2026: der Verweis auf poststelle@ldi.nrw.de in der
   Datenschutzerklaerung ist 20 Pixel hoch - unter den 24, die WCAG
   2.5.8 verlangt. Die Ausnahme fuer Verweise mitten im Satz greift
   dort nicht: die Zeile besteht fast nur aus dem Verweis.

   Polsterung statt groesserer Schrift oder Zeilenhoehe. Padding
   vergroessert die Trefferflaeche, ohne die Zeile auseinanderzuziehen
   und ohne den Umbruch langer Adressen zu stoeren. */
main a[href^="mailto:"],
main a[href^="tel:"] {
  padding-block: 3px;
}
.archivwahl form {
  display: flex;
  align-items: center;
  gap: 10px;
}
.archivwahl label {
  font-size: var(--text-2xs, 11px);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.archivwahl select {
  padding: 7px 10px;
  font: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Zugang zum Archiv aus der Kommende-Ansicht: eine ruhige Zeile. */
.archiv-verweis {
  margin-top: 34px;
  font-size: 13.5px;
  color: var(--muted);
}
.archiv-verweis a { color: #46506a; text-decoration: underline; text-underline-offset: 3px; }
.archiv-verweis a:hover { color: var(--navy); }

/* Ort unter dem Termintitel: "wo es hingeht" auf einen Blick. */
.event-row .wo {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: #46506a;
  max-width: 62ch;
}

/* Suchzeile auf der Suchseite und der 404-Seite.
   Nicht .searchwrap benutzen: Das ist ein Flex-Kind der Werkzeugleiste
   und laesst das Eingabefeld auf 100 % laufen, wodurch die Schaltflaeche
   in die naechste Zeile rutscht. */
.suchzeile {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  max-width: 620px;
}
.suchzeile input[type="search"] {
  flex: 1;
  min-width: 0;
}
.suchzeile .btn {
  flex: none;
}
@media (max-width: 560px) {
  .suchzeile { flex-direction: column; align-items: stretch; }
}

/* Ortsclub-Karte.
   Drei Zustaende: wartet (Frage sichtbar), laedt, fertig (Karte
   sichtbar). Die Hoehe steht fest, damit beim Umschalten nichts
   springt. */
.ccrr-karte {
  border: 1px solid var(--line);
  background: #f7f5ee;
  min-height: 420px;
  display: grid;
}
.karte-frage {
  align-self: center;
  justify-self: center;
  max-width: 560px;
  padding: 40px 24px;
  text-align: center;
}
.karte-frage h2 { margin: 0 0 12px; }
.karte-frage p { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.karte-flaeche { display: none; min-height: 420px; }
.karte-fehler { display: none; padding: 40px 24px; text-align: center; color: var(--muted); }

.ccrr-karte[data-zustand="laedt"] .karte-frage p:last-of-type::after {
  content: " Wird geladen …";
}
.ccrr-karte[data-zustand="fertig"] .karte-frage { display: none; }
.ccrr-karte[data-zustand="fertig"] .karte-flaeche { display: block; }
.ccrr-karte[data-zustand="fehler"] .karte-frage { display: none; }
.ccrr-karte[data-zustand="fehler"] .karte-fehler { display: block; }

/*
 * Die Zuruecknahme der Kartenfreigabe.
 *
 * Ein unscheinbarer Knopf unter der Karte, kein zweiter Aufruf zum
 * Handeln: Wer die Karte gerade sehen wollte, soll nicht gefragt
 * werden, ob er sie wirklich sehen will. Sichtbar ist er erst, wenn
 * die Karte steht - vorher gibt es nichts zurueckzunehmen.
 *
 * 24 Pixel hoch wie jedes andere Ziel auch (WCAG 2.2, 2.5.8).
 */
.karte-widerruf { display: none; margin: 0; }
.ccrr-karte[data-zustand="fertig"] .karte-widerruf { display: block; }

.karte-widerruf-knopf {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 10px 0 0;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--body, #384157);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.karte-widerruf-knopf:hover,
.karte-widerruf-knopf:focus-visible { color: var(--ink, #10172c); }

/* Leaflet setzt eine eigene Schrift; hier soll die des Themes gelten. */
.karte-flaeche .leaflet-container { font: inherit; }
.karte-flaeche .leaflet-popup-content b { font-family: var(--serif); font-size: 17px; font-weight: 400; }

@media (max-width: 700px) {
  .ccrr-karte, .karte-flaeche { min-height: 340px; }
}

/* Kopfbereich unter der WordPress-Adminleiste.
   Der Kopf klebt oben; ist man angemeldet, schiebt WordPress eine
   32 px hohe Leiste darueber und der Kopf verschwindet dahinter. Betrifft
   nur angemeldete Redaktion, aber die sieht die Seite am haeufigsten. */
body.admin-bar .header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* Kein waagerechtes Scrollen. `clip` statt `hidden`, damit der klebende
   Kopf klebrig bleibt - `overflow:hidden` auf einem Elternelement setzt
   position:sticky ausser Kraft. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe, svg { max-width: 100%; }

/* Waagerechtes Ueberlaufen im Markt und in den Listen.
   Ursache ist nicht die Breite der Karten, sondern eine Eigenheit von
   CSS-Grid: Ein Rasterfeld hat `min-width:auto`, waechst also mit
   seinem laengsten unumbrechbaren Inhalt. Bei 462 E-Mail-Adressen in
   den Kleinanzeigen reicht eine lange Adresse, und die Spalte sprengt
   den Container. `minmax(0, …)` deckelt das.

   Die Verhaeltnisse der Spalten bleiben, wie sie sind - `.story-grid`
   hat absichtlich einen breiteren ersten Beitrag. `.club-list` und
   `.event-list` sind keine Spaltenraster, deren Zeilen bringen ihre
   eigene Aufteilung mit. */
.market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.link-grid   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.story-grid  { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) minmax(0, .75fr); }

/* Dieselbe Falle in den Zeilenrastern. */
.club-row, .event-row, .document-list > a { min-width: 0; }
.club-row > *, .event-row > *, .document-list > a > * { min-width: 0; }

/* Lange Adressen umbrechen statt ueberstehen lassen. */
.listing p, .club-row, .event-row, .document-list p { overflow-wrap: anywhere; }

@media (max-width: 1050px) {
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .market-grid, .story-grid, .archive-grid, .link-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------
   Lesbarkeit: gemessene Kontraste nachgezogen
   ------------------------------------------------------------------
   Gemessen mit Chromium ueber neun Seiten, 792 Textstellen, gegen die
   Schwellen aus WCAG 2.1 (4,5:1 fuer normalen Text, 3:1 ab 24px oder
   ab 18,66px fett). Fuenf Stellen lagen darunter. Die Werte hier sind
   ausgerechnet, nicht geschaetzt - jeweils mit etwas Reserve ueber der
   Schwelle, damit eine kleine Farbverschiebung sie nicht wieder
   unterschreitet.
   ------------------------------------------------------------------ */

/*
 * `.cta p` war mit #c8d0df fuer dunklen Grund gedacht. Auf /termine/,
 * /clubs/, /markt/ und /galerie/ steht der Kasten aber auf Papier -
 * dort waren es 1,5:1, also praktisch unsichtbar. Genau davon war der
 * Erklaertext der Galerie betroffen.
 */
.cta p { color: var(--body); }                         /* 8,89:1 auf Papier */
.section-dark .cta p,
.hero .cta p,
.member-band .cta p { color: #c8d0df; }                /* 12,0:1 auf Navy */

/*
 * Fusszeile unten: 11px in #78849d waren 2,53:1. Der Grund ist
 * rgb(0,61,165), nicht der Tokenwert - deshalb hier gegen die
 * tatsaechlich gemessene Farbe gerechnet und nicht gegen die
 * vermutete.
 */
.footer-bottom { color: #b0bbcf; }                     /* 4,91:1 */

/*
 * `--muted` lag bei 4,08:1 und traegt Ortsangaben in der Terminliste
 * und den Hinweis vor der Karte.
 *
 * Der Wert steht weiter oben in dieser Datei, zusammen mit den anderen
 * Tokens. Hier stand er ein zweites Mal - beide Male mit einer eigenen
 * Begruendung, und die obere war die aeltere und niedrigere. Wirksam
 * war die untere, weil sie spaeter kommt. Wer nur die obere las, hielt
 * den Wert fuer knapp durchgefallen. Zusammengelegt.
 */

/* ------------------------------------------------------------------
   Fotoalben
   ------------------------------------------------------------------
   Das Raster passt sich der Breite an, statt eine feste Spaltenzahl zu
   erzwingen: bei 215 Aufnahmen ist die Zahl der Spalten weniger wichtig
   als eine gleichmaessige Kachelgroesse. `minmax(0, …)` steht auch hier,
   weil Rasterfelder sonst nicht unter ihren Inhalt schrumpfen.
   ------------------------------------------------------------------ */

.album-zahl {
	color: var(--muted);
	font-size: 14px;
	margin: 0 0 26px;
}

.foto-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
	gap: 10px;
}

/*
 * Kein Quadrat-Beschnitt mehr.
 *
 * Bis zum 26.08. bekam jedes Foto `aspect-ratio: 1/1` und
 * `object-fit: cover`. Bei einer Aufnahme im Hochformat - und die
 * Galerie lebt von gescannten Bildern aus den Siebzigern - schnitt
 * das oben und unten weg, oft genau die Haelfte des Motivs. Ein
 * Archiv, das seine Aufnahmen zurechtschneidet, ist kein Archiv.
 *
 * Die genaue Anordnung macht `site.js`: es misst jedes Bild und gibt
 * ihm so viele Rasterzeilen, wie es braucht. Bis dahin - und ohne
 * Javascript ueberhaupt - greift der Spaltensatz weiter unten. Auch
 * der zeigt vollstaendige Bilder; er ordnet sie nur spaltenweise
 * statt zeilenweise.
 */
.foto-raster figure {
	border-radius: 12px;
	overflow: hidden;
	margin: 0;
	position: relative;
	overflow: hidden;
	background: var(--bone);
	cursor: zoom-in;
}

.foto-raster img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .5s var(--ease-premium, ease);
}

/* Ohne Javascript: Spaltensatz. Vollstaendige Bilder, andere Reihung. */
.foto-raster:not([data-raster="bereit"]) {
	display: block;
	columns: 3 210px;
	column-gap: 10px;
}

.foto-raster:not([data-raster="bereit"]) figure {
	break-inside: avoid;
	margin-bottom: 10px;
}

/* Mit Javascript: Raster mit feinen Zeilen, jede Kachel bekommt ihre Hoehe. */
.foto-raster[data-raster="bereit"] {
	grid-auto-rows: 4px;
	align-items: start;
}

.foto-raster figure:hover img,
.foto-raster figure:focus-within img { transform: scale(1.04); }

/*
 * Die Bildunterschrift ist der Dateiname aus dem Archiv. Sie hilft beim
 * Zuordnen, soll aber die Aufnahme nicht zudecken - deshalb erst beim
 * Darauffahren, und fuer die Tastatur beim Fokus.
 */
.foto-raster figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 26px 10px 8px;
	color: #fff;
	font-size: 11px;
	letter-spacing: .04em;
	background: linear-gradient(transparent, rgba(6, 17, 45, .82));
	opacity: 0;
	transition: opacity .25s ease;
	overflow-wrap: anywhere;
}

.foto-raster figure:hover figcaption,
.foto-raster figure:focus-within figcaption { opacity: 1; }

/* Grossansicht */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 9000;
	margin: 0;
	display: none;
	place-items: center;
	background: rgba(6, 17, 45, .94);
	padding: 40px 60px 96px;
}

.lightbox.open { display: grid; }

.lightbox img {
	max-width: 100%;
	max-height: calc(100vh - 210px);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.lightbox figcaption {
	color: #c8d0df;
	font-size: 13px;
	text-align: center;
	margin-top: 14px;
	overflow-wrap: anywhere;
}

.lightbox button {
	position: absolute;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	padding: 12px 16px;
}

.lightbox .lb-zu   { top: 10px; right: 14px; font-size: 34px; }
.lightbox .lb-vor  { left: 6px;  top: 50%; transform: translateY(-50%); font-size: 40px; }
.lightbox .lb-nach { right: 6px; top: 50%; transform: translateY(-50%); font-size: 40px; }

.lightbox button:focus-visible {
	outline: 2px solid var(--yellow);
	outline-offset: 2px;
}

.lightbox .lb-stand {
	position: absolute;
	bottom: 72px;
	left: 0;
	right: 0;
	text-align: center;
	color: #8f9bb4;
	font-size: 12px;
	letter-spacing: .06em;
}

/*
 * Filmleiste
 * ----------
 * Bei 215 Aufnahmen in einem Album reicht "vor und zurueck" nicht: man
 * weiss weder, wo man ist, noch was noch kommt. Die Leiste steht unten,
 * das aktuelle Bild ist markiert und wird mitgescrollt. Unter fuenf
 * Aufnahmen wird sie ausgeblendet - dort kostet sie nur Hoehe.
 */
.lightbox .lb-buehne {
	display: grid;
	place-items: center;
	max-width: 100%;
}

.lightbox .lb-leiste {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	gap: 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 8px 12px 10px;
	background: rgba(3, 10, 28, .82);
	scrollbar-width: thin;
}

.lightbox .lb-leiste[hidden] { display: none; }

.lightbox .lb-daumen {
	position: static;
	flex: 0 0 auto;
	width: 64px;
	height: 44px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 3px;
	overflow: hidden;
	opacity: .55;
	background: #0b1631;
	transition: opacity .15s ease, border-color .15s ease;
}

.lightbox .lb-daumen img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	display: block;
}

.lightbox .lb-daumen:hover,
.lightbox .lb-daumen:focus-visible { opacity: 1; }

.lightbox .lb-daumen.jetzt {
	opacity: 1;
	border-color: var(--yellow);
}

/*
 * Die Seite hinter der Grossansicht darf nicht mitscrollen. Ohne das
 * wischt man auf dem Telefon durch die Bilder und findet die Seite
 * danach an einer anderen Stelle wieder.
 */
html.lb-offen { overflow: hidden; }

@media (max-width: 700px) {
	.lightbox { padding: 46px 8px 92px; }
	.lightbox .lb-vor  { left: 0; }
	.lightbox .lb-nach { right: 0; }
	.foto-raster { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 6px; }
}

/*
 * Kein Pfeil auf den Knoepfen.
 *
 * `.btn:after` hat beim Darauffahren ein "↗" eingeblendet. Die Regel ist
 * aus site.css entfernt; diese hier steht als Riegel, damit sie nicht
 * ueber einen spaeteren Stand wieder hereinkommt.
 */
.btn::after { content: none !important; }

/*
 * Zierstrich vor den Kleinueberschriften weg.
 *
 * `.eyebrow:before` setzt vor jede Rubrikzeile einen 30 Pixel langen
 * Strich. Rein dekorativ, steht auf jedem Abschnitt jeder Seite.
 */
.eyebrow::before { content: none !important; }

/* Der Abstand daneben gehoerte zum Strich und faellt mit weg. */
.eyebrow { gap: 0; }

/* ------------------------------------------------------------------
   Tippziele
   ------------------------------------------------------------------
   Gemessen ueber 28 Seiten in drei Breiten: Ueberlauf nirgends, dafuer
   eine Reihe zu kleiner Schaltflaechen. Die Seitenzahlen unter den
   Meldungen waren 9 x 17 Pixel gross - mit dem Finger nicht zu treffen.

   WCAG 2.2 verlangt 24 x 24 Pixel; Apple und Google empfehlen 44.
   Hier wird 24 als Untergrenze gesetzt und bei der Blaetterung 40,
   weil man dort oft mehrmals hintereinander tippt. Das Aussehen bleibt,
   es waechst nur die Flaeche, auf die der Finger darf.
   ------------------------------------------------------------------ */

/* Blaetterung: aus Ziffern werden Felder. */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid var(--line);
	text-decoration: none;
}

.pagination .page-numbers:hover { border-color: var(--blue); color: var(--blue); }

.pagination .page-numbers.current {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
	font-weight: 700;
}

.pagination .page-numbers.dots { border: 0; min-width: 24px; }

/*
 * Verweise in der Fusszeile stehen untereinander, sind also keine
 * Fliesstextverweise - fuer die gilt die Ausnahme nicht.
 */
.footer-grid nav a,
.footer-grid ul a,
.footer-links a,
.footer-contact a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/*
 * Verweise am Fuss einer Karte: "Weiterlesen", "Website", "Angebot bei
 * ...". Sie stehen fuer sich und werden angetippt, nicht gelesen.
 */
.story a,
.club-row a,
.listing a,
.archive-item a,
.credit a,
.link-card a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/*
 * Ausgenommen bleiben Verweise mitten im Satz. Sie kuenstlich zu
 * vergroessern wuerde den Zeilenabstand zerreissen, und WCAG nimmt sie
 * ausdruecklich aus.
 */
.prose a,
.markdown-content a,
p > a:not(.btn) {
	display: inline;
	min-height: 0;
}

/*
 * ... aber nicht die Verweise, die allein in ihrem Absatz stehen.
 * "Weiterlesen" unter einer Meldung und "Website" an einer Clubzeile
 * sind keine Fliesstextverweise, sie sind Schaltflaechen ohne Rahmen.
 * Die Ausnahmeregel oben haette sie sonst wieder verkleinert.
 */
.story p > a,
.club-row p > a,
.listing p > a,
.archive-item p > a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Das Klappmenue im Kopf gehoert zur Navigation, nicht zum Text. */
.nav .dropdown a,
.mobile a {
	display: flex;
	align-items: center;
	min-height: 24px;
}

/*
 * Brotkrumen: 32 x 13 Pixel waren zu wenig.
 *
 * Sie sind Navigation, kein Fliesstext - die Ausnahme aus WCAG 2.5.8
 * greift hier nicht. Der Schriftgrad bleibt, die anklickbare Flaeche
 * waechst nach oben und unten.
 */
.breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* ------------------------------------------------------------------
   Druckausgabe
   ------------------------------------------------------------------

   Es gab bisher keine. Was auf Papier tatsaechlich gebraucht wird, hat
   der Verein selbst genannt: die Ortsclubliste, die Terminliste, das
   Beitrittsformular, das SEPA-Mandat, die Satzung. Alles Dinge, die
   jemand ausdruckt und weiterreicht.

   Die Kopfbereiche kommen beim Laden ueber eine Animation von
   `opacity: 0` hoch. Beim Drucken laeuft keine Animation - ohne die
   Regel hier waere der Seitenkopf auf dem Papier leer. (Die
   Scroll-Reveals, die frueher denselben Fehler fuer alle Abschnitte
   hatten, sind seit dem 28.08.2026 komplett raus.)
*/
@media print {

	.hero-kicker, .hero h1, .hero-lead, .hero-actions,
	.page-hero .breadcrumb, .page-hero .eyebrow, .page-hero h1, .page-hero p {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}

	/* Bedienelemente haben auf Papier nichts verloren. */
	.header, .topbar, .nav, .mobile, .menu, .head-actions,
	.skip-link, .lightbox, .suchzeile,
	.footer-stripe, .club-stripe,
	.btn, .dropbtn, .karte-hinweis, .karte-flaeche, .ccrr-karte,
	.handynav, .quickrail, .toolbar, .archivwahl, .archiv-verweis,
	.filterset, .kopfsuche, .cta {
		display: none !important;
	}

	/*
	 * Der Fusszeilenblock bleibt, aber ohne Farbflaeche und ohne die
	 * Verweisliste. Anschrift und Erscheinungsjahr gehoeren aufs
	 * Blatt: wer eine Clubliste weiterreicht, soll sehen, woher sie
	 * kommt.
	 */
	.footer { background: none !important; color: #000 !important; border-top: 1px solid #000; }
	.footer-grid, .footer-logo { display: none !important; }
	.footer-bottom, .footer-kicker, .footer-contact { color: #000 !important; }

	/* Papier ist weiss, Toner ist teuer. */
	body, .section, .cta, main, .container {
		background: #fff !important;
		color: #000 !important;
		box-shadow: none !important;
	}
	h1, h2, h3, h4, .display, .eyebrow, .label { color: #000 !important; }
	.price, .num { color: #000 !important; }

	/*
	 * Grosse Zierbilder weg, Sachbilder bleiben. Ein Kopfbild ueber
	 * die halbe Seite kostet eine Tonerpatrone und sagt nichts.
	 */
	.hero img, .page-hero img, .page-visual { display: none !important; }
	img { max-width: 100% !important; }

	/*
	 * Die Eckdaten oben rechts ("1968 gegruendet", "ca. 40
	 * Ortsclubs") liegen als weisse Schrift ueber dem Kopfbild. Ohne
	 * das Bild waeren sie weiss auf weiss - und weil sie absolut
	 * positioniert sind, saessen sie ausserdem irgendwo im Nichts.
	 * Sie sind Inhalt, kein Zierrat, also zurueck in den Textfluss.
	 */
	.hero-bottom {
		position: static !important;
		display: flex !important;
		opacity: 1 !important;
		animation: none !important;
		border-left: 0;
		border-top: 1px solid #000;
		padding: 10px 0 0;
		margin-top: 14px;
		color: #000 !important;
	}
	.hero-bottom * { color: #000 !important; }
	.hero, .hero-content { position: static !important; min-height: 0 !important; }

	/*
	 * Zeilen nicht ueber den Seitenrand hinweg trennen. Eine
	 * Clubadresse, deren Ort auf dem naechsten Blatt steht, ist
	 * unbrauchbar.
	 */
	.club-row, .event-row, .listing, .story, .archive-item,
	.board, .stat, tr, li, figure {
		break-inside: avoid;
		page-break-inside: avoid;
	}
	h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

	/*
	 * Verweise: auf Papier ist ein unterstrichenes Wort wertlos, wenn
	 * niemand die Adresse sieht. Nur fremde Adressen ausschreiben -
	 * die eigenen wuerden die Clubliste zumuellen.
	 */
	a[href^="http"]:not([href*="ccrr.de"])::after {
		content: " (" attr(href) ")";
		font-size: 10px;
		word-break: break-all;
	}
	a { color: #000 !important; text-decoration: none; }

	/*
	 * Formulare bleiben - das Beitrittsformular und das SEPA-Mandat
	 * werden ausgedruckt und mit der Hand ausgefuellt. Die Felder
	 * brauchen dafuer einen sichtbaren Rahmen und genug Hoehe.
	 */
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="date"], input[type="number"], textarea, select {
		border: 1px solid #000 !important;
		background: #fff !important;
		min-height: 26px;
	}

	@page { margin: 16mm 14mm; }
}

/* ------------------------------------------------------------------
   Bildnachweise
   ------------------------------------------------------------------

   Die Nachweisliste hatte zwei Spalten: Motivname und Quelle. Damit
   liess sich kein Nachweis einem Bild zuordnen - "Citroen 2CV" gibt es
   auf der Seite ein Dutzend Mal. Bei CC-BY-Bildern ist die Zuordnung
   aber der Sinn der Sache. Jetzt steht der Dateiname als dritte Spalte
   dabei, dieselbe Angabe, die in der Bildadresse steht.
*/
.credit-list > div { grid-template-columns: 1fr 1.5fr auto; }

.credit-file {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
	align-self: center;
}

@media (max-width: 760px) {
	/* Auf dem Telefon untereinander, sonst reisst der Dateiname die
	   Zeile auf. */
	.credit-list > div { grid-template-columns: 1fr; gap: 4px; }
	.credit-file { white-space: normal; }
}

/* ------------------------------------------------------------------
   Bearbeiten direkt auf der Seite
   ------------------------------------------------------------------

   Der Wunsch war: was auf der Seite steht, soll sich von der Seite aus
   aendern lassen. Die Werkzeugleiste von WordPress leistet das auf
   Einzelansichten, aber nicht in den Listen - und dort liegt die
   Arbeit. Wer einen von 98 Ortsclubs berichtigen will, sucht ihn sonst
   im Backend noch einmal.

   Die Verweise sieht nur, wer angemeldet ist und den jeweiligen Beitrag
   bearbeiten darf. Fuer alle anderen steht hier nichts im Quelltext.

   Bewusst zurueckhaltend: Sie liegen ueber jeder Liste und duerfen den
   Blick auf den Inhalt nicht stoeren. Clubgelb als Rahmen genuegt, um
   sie zu finden, wenn man sie sucht.
*/
.ccrr-edit {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	margin-top: 6px;
	padding: 2px 10px;
	border: 1px solid var(--yellow, #f2db17);
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	background: rgba(255, 220, 0, .14);
}

.ccrr-edit:hover,
.ccrr-edit:focus-visible {
	background: var(--yellow, #f2db17);
	color: var(--ink);
}

/* Im Kopfbereich steht der Verweis auf dunklem Grund. */
.page-hero .ccrr-edit {
	color: #fff;
	border-color: rgba(255, 220, 0, .8);
	background: rgba(0, 0, 0, .28);
}

.page-hero .ccrr-edit:hover,
.page-hero .ccrr-edit:focus-visible {
	color: var(--ink);
	background: var(--yellow, #f2db17);
}

/* Auf Papier haben sie nichts verloren. */
@media print { .ccrr-edit { display: none !important; } }

/* ------------------------------------------------------------------
   Menue auf dem Telefon: Seite dahinter festhalten
   ------------------------------------------------------------------

   Solange das Menue offen ist, blieb die Seite darunter scrollbar. Man
   wischt, und es bewegt sich das Falsche - das Menue steht still und
   der Inhalt dahinter laeuft durch. `site.js` setzt dafuer eine Klasse
   an das Wurzelelement.
*/
html.menue-offen,
html.menue-offen body {
	overflow: hidden;
}

/* ------------------------------------------------------------------
   INFO-Archiv: Jahrgangskacheln sind Links, keine Schaltflaechen
   ------------------------------------------------------------------

   Vorher standen dort 57 `<button data-year="1988">` ohne Adresse und
   ohne Handler. Jetzt sind es Links auf `?jahr=`, damit jeder Jahrgang
   eine Adresse hat, die man weitergeben kann, und damit der Wechsel
   auch ohne Javascript funktioniert.

   Die vorhandenen Regeln fuer `.year-card` haengen an der Klasse, nicht
   am Element, und gelten weiter. Was ein Link zusaetzlich braucht: die
   Unterstreichung weg, die Textfarbe zurueckgesetzt, und ein sichtbarer
   Zustand fuer den gerade gewaehlten Jahrgang.
*/
a.year-card {
	text-decoration: none;
	color: inherit;
}

.year-card.active {
	background: #fff9d2;
	box-shadow: inset 3px 0 0 var(--clubblue);
}

/*
   Das Suchfeld war ein `<input>` ohne Funktion. Jetzt ist es eine
   Auswahl, die nur Jahrgaenge anbietet, in denen wirklich etwas liegt.
   Die vorhandene Regel spricht `.archive-toolbar input` an und greift
   deshalb nicht mehr.
*/
.archive-toolbar select {
	border: 0;
	border-bottom: 1px solid var(--navy);
	padding: 10px 0;
	background: transparent;
	font-size: 18px;
	font-family: inherit;
	width: 100%;
}

.info-archiv h2 {
	margin-top: 46px;
}

/*
   Auf schmalen Anzeigen stehen Auswahl und Schaltflaeche sonst
   nebeneinander und werden beide zu schmal zum Treffen.
*/
@media (max-width: 620px) {
	.archive-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.archive-toolbar label {
		max-width: none;
	}
}

/* ------------------------------------------------------------------
   Fliesstext
   ------------------------------------------------------------------

   `.prose` traegt den Inhalt jeder Detailseite: die 555 Meldungen, die
   4343 Termine, die 98 Ortsclubs, die Fotoalben - und alles, was der
   Verein spaeter im Editor schreibt. Bis hierher hatte die Klasse
   genau eine Regel, und die betraf nur den Kontrast von Verweisen.
   Alles andere kam von den Vorgaben des Browsers: Zeilenlaenge bis zur
   vollen Spaltenbreite, Ueberschriften in Standardgroessen, Abstaende
   nach Times-Logik.

   Die Zeilenlaenge ist der Punkt, der am meisten ausmacht. Bei 1240
   Pixeln Spaltenbreite laufen rund 150 Zeichen in eine Zeile; das Auge
   verliert beim Ruecksprung die naechste. 68 Zeichen sind der Wert,
   bei dem Lesetests am besten abschneiden - `70ch` trifft das etwa,
   ohne dass eine feste Pixelzahl den Textgrad festnagelt.

   Die Ueberschriftengroessen folgen dem, was das Theme sonst benutzt
   (Serif fuer Ueberschriften, Sans fuer Text), damit die Detailseiten
   nicht wie ein Fremdkoerper zwischen den gebauten Seiten stehen.
*/
.prose {
	max-width: 70ch;
	color: var(--body);
	font-size: 17px;
	line-height: 1.7;
}

.prose > * + * {
	margin-top: 1.1em;
}

.prose h2,
.prose h3,
.prose h4 {
	font-family: var(--serif);
	font-weight: 400;
	color: var(--ink);
	line-height: 1.25;
	/*
	 * Mehr Luft nach oben als nach unten: eine Ueberschrift gehoert
	 * sichtbar zu dem, was unter ihr steht, nicht zu dem darueber.
	 */
	margin-top: 1.9em;
	margin-bottom: 0.5em;
}

.prose h2 { font-size: 28px; }
.prose h3 { font-size: 22px; }
.prose h4 { font-size: 18px; font-family: var(--sans); font-weight: 700; }

/* Die erste Ueberschrift steht schon unter dem Kopfbereich. */
.prose > :first-child {
	margin-top: 0;
}

.prose strong { color: var(--ink); font-weight: 700; }
.prose em { font-style: italic; }

.prose ul,
.prose ol {
	padding-left: 1.4em;
}

.prose li + li {
	margin-top: 0.45em;
}

.prose blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--yellow);
	font-family: var(--serif);
	font-size: 19px;
	color: var(--ink);
}

.prose figure {
	margin-left: 0;
	margin-right: 0;
}

.prose figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--muted);
}

.prose hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.4em 0;
}

/*
   Bilder duerfen breiter werden als der Text. Ein Foto auf 70ch
   eingezwaengt wirkt wie ein Versehen, und der Lesefluss leidet nicht
   darunter, weil man an einem Bild ohnehin anhaelt.
*/
.prose img,
.prose figure {
	max-width: min(100%, 900px);
}

/*
   Tabellen kommen selten vor, aber wenn, dann meist mit mehr Spalten
   als Platz. Ohne eigenen Rollbereich schiebt eine breite Tabelle die
   ganze Seite seitlich - auf dem Telefon der haeufigste Grund, warum
   sich eine Seite "kaputt" anfuehlt.
*/
.prose table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 15px;
}

.prose th,
.prose td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.prose th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	font-weight: 900;
}

/*
 * Verweise im Fliesstext waren unsichtbar.
 *
 * Gemessen am 27.08.2026 auf der neuen Impressumsseite: Verweis und
 * Text hatten dieselbe Farbe (rgb(62,71,92)) und der Verweis keine
 * Unterstreichung. Wer "Bildnachweise" oder eine Mailadresse im Text
 * las, sah nicht, dass sie anklickbar ist.
 *
 * Die Kontrastpruefung hat das nicht gefunden, weil sie Kontrast
 * misst - und der war in Ordnung. Ein Verweis, der aussieht wie Text,
 * ist ein anderer Fehler: WCAG 1.4.1 verlangt, dass die Farbe nicht
 * das einzige Unterscheidungsmerkmal ist. Hier gab es gar keins.
 *
 * Unterstreichung statt Farbwechsel: Sie traegt auch dort, wo jemand
 * Farben schlecht unterscheidet, und stoert den Zeilenfall weniger als
 * ein zweiter Farbton mitten im Satz.
 */
.prose a {
	color: var(--blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.prose a:hover,
.prose a:focus-visible {
	color: var(--ink);
	text-decoration-thickness: 2px;
}

/* Das Datum unter einem Rechtstext. */
.rechtsstand {
	margin-top: 34px !important;
	padding-top: 18px;
	border-top: 1px solid var(--line, #d9d6cc);
	font-size: var(--text-2xs);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted, #747b8b);
}

@media (max-width: 760px) {
	.prose { font-size: 16px; }
	.prose h2 { font-size: 24px; }
	.prose h3 { font-size: 20px; }
}

/* ------------------------------------------------------------------
   Kleinanzeigen ohne Foto
   ------------------------------------------------------------------

   Keine der uebernommenen Anzeigen hat ein Bild; die alte Seite hatte
   auch keine. Vorher fiel die Bildflaeche dann ersatzlos weg, und das
   Raster stand ungleich hoch da.

   Kein ersatzweises Fahrzeugfoto: bei einer Verkaufsanzeige waere ein
   fremdes Auto irrefuehrend. Stattdessen eine ruhige Flaeche mit einem
   ehrlichen Hinweis, in denselben Massen wie ein Foto (4:3), damit die
   Karten gleich hoch bleiben.
*/
.listing-image-leer {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bone);
	border: 1px solid var(--line);
	/*
	 * Ein feines Streifenmuster nimmt der Flaeche das Unfertige, ohne
	 * ein Bild vorzutaeuschen.
	 */
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0 9px,
		rgba(7, 18, 47, .035) 9px 18px
	);
}

.listing-image-leer span {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 900;
	color: var(--muted);
}

/* ------------------------------------------------------------------
   Zahl an den Clubfiltern
   ------------------------------------------------------------------

   Die Filterknoepfe der Clubs zeigen, wie viele Eintraege dahinter
   liegen. Bei 98 Clubs, die sich in 31 Ortsclubs und 67 befreundete
   Clubs teilen, ist das der Unterschied zwischen "zwei Knoepfe" und
   "ich sehe, was mich erwartet".

   Andere Archive haben die Zahl nicht, weil sich ihre Filter
   gleichmaessiger verteilen.
*/
.filter-zahl {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 5px;
	border-radius: 2px;
	background: rgba(7, 18, 47, .07);
	/* 11px statt 9px: Untergrenze aus typo.css, Begruendung dort. */
	font-size: var(--text-2xs, 11px);
	font-variant-numeric: tabular-nums;
}

.filter.active .filter-zahl {
	background: rgba(255, 255, 255, .22);
}

/* ------------------------------------------------------------------
   Bereichsleiste der Suche
   ------------------------------------------------------------------

   Die Suche lieferte eine flache Liste. Bei 4343 Terminen, 555
   Meldungen und 98 Clubs ist das keine Antwort: Wer "Gedern" sucht,
   bekam 62 Termine und dazwischen irgendwo die eine Meldung.

   Die Leiste benutzt dieselben Knoepfe wie die Archivfilter, ist aber
   aus Verweisen gebaut und nicht aus Schaltflaechen - jeder Bereich
   hat eine eigene Adresse, die sich weitergeben laesst, und es
   funktioniert ohne Javascript.
*/
.suchbereiche {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 34px;
}

.suchbereiche .filter {
	display: inline-flex;
	align-items: center;
	/* Tippziel nach WCAG 2.2: mindestens 24 Pixel hoch. */
	min-height: 34px;
	text-decoration: none;
	color: inherit;
}

.suchbereiche .filter.active {
	background: var(--navy);
	color: #fff;
	border-color: var(--navy);
}

/* ------------------------------------------------------------------
   Karte auf der Club-Einzelseite
   ------------------------------------------------------------------

   Dieselben Bausteine wie im Archiv, nur flacher: auf einer
   Detailseite steht die Karte neben Treffpunkt und Rhythmus und soll
   den Text nicht verdraengen. Im Archiv ist sie das Hauptwerkzeug und
   darf hoch sein.
*/
.ccrr-karte-einzel {
	margin: 34px 0;
	max-width: 70ch;
}

.ccrr-karte-einzel .karte-flaeche {
	height: 300px;
}

.ccrr-karte-einzel .karte-frage {
	padding: 26px 22px;
}

.ccrr-karte-einzel .karte-frage h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 20px;
	margin: 0 0 10px;
}

/* ------------------------------------------------------------------
   Meldungen: Leitmeldung und Raster
   ------------------------------------------------------------------

   `.story-list` hatte keine einzige Regel. Die Meldungen standen
   einspaltig untereinander, jede mit derselben Groesse - die von
   gestern sah aus wie die von 2011, und auf einem breiten Bildschirm
   lief eine Kachel ueber die volle Seitenbreite.

   Jetzt zwei Spalten, und die neueste Meldung darueber in voller
   Breite mit grossem Bild. Das ist die Frage, mit der jemand auf
   /aktuelles/ kommt: was ist neu.
*/
.story-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 34px 30px;
	align-items: start;
}

/*
   Die Leitmeldung nimmt beide Spalten und stellt Bild und Text
   nebeneinander. 3fr zu 2fr entspricht etwa 60 zu 40 - genug Bild, um
   zu wirken, genug Text, um zu erklaeren, worum es geht.
*/
.story-leit {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 34px;
	align-items: center;
	border-top: 0;
	padding-top: 0;
	padding-bottom: 34px;
	border-bottom: 1px solid var(--line);
}

.story-leit .story-image {
	aspect-ratio: 16 / 10;
}

.story-leit h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.18;
	margin: 8px 0 12px;
}

.story-leit .lead {
	font-size: 17px;
	line-height: 1.6;
	color: var(--body);
	max-width: 46ch;
}

/*
   Ohne Bild waere die Textspalte auf 40 Prozent eingezwaengt, ohne
   dass daneben etwas steht. Dann lieber die volle Breite.
*/
.story-leit:not(:has(.story-image)) {
	grid-template-columns: 1fr;
}

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

	.story-leit {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.story-leit h2 {
		font-size: 26px;
	}
}

/* ------------------------------------------------------------------
   DET-Chronik
   ------------------------------------------------------------------

   Zwoelf Kacheln in vier Spalten lesen sich als Raster, nicht als
   Chronik. Die Jahre stehen aber in einer Reihenfolge, und die ist der
   eigentliche Inhalt: von 476 Fahrzeugen in Gedern 2004 auf 824 in
   Kommern 2016.

   Kein Scroll-Effekt. Die Referenzen, an denen sich das Projekt
   orientiert, arbeiten mit grossen Bildern und wenigen klaren
   Aussagen - nicht mit Bewegung. Was hier hilft, ist eine sichtbare
   Linie und eine Markierung je Jahr, damit das Auge die Folge sieht.
*/
.det-grid > div {
	position: relative;
	padding-top: 30px;
}

/* Die Linie, auf der die Jahre sitzen. */
.det-grid > div::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--line);
}

/* Der Punkt je Jahr. */
.det-grid > div::after {
	content: "";
	position: absolute;
	top: 11px;
	left: 24px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--clubblue, var(--blue));
	box-shadow: 0 0 0 4px #fff;
}

/*
   Jahre ohne belegte Angaben. Sie stehen bewusst da: eine Chronik, die
   von 2018 auf 2024 springt, sieht vollstaendig aus und ist es nicht.
   Zurueckgenommen, damit sie nicht wie ein Treffen mit Daten wirken.
*/
.det-luecke {
	background: var(--bone) !important;
}

.det-luecke b,
.det-luecke span,
.det-luecke small {
	color: var(--muted);
}

.det-luecke::after {
	background: transparent;
	border: 2px solid var(--line);
}

/* Das kommende Treffen. */
.det-kommend::after {
	background: var(--yellow);
	box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--yellow);
}

.det-kommend b {
	color: var(--navy);
}

@media (max-width: 1120px) {
	.det-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

/* ------------------------------------------------------------------
   Weitere Termine unter einer Einzelansicht
   ------------------------------------------------------------------

   Eine Termin-Einzelseite endete mit "Zurueck zu Termine" - einem Weg
   zurueck in eine Liste mit 4343 Eintraegen. Wer ueber die Suche oder
   einen geteilten Link ankommt, hat aber meist eine andere Frage: was
   ist da sonst noch, und wann.
*/
.weitere-termine {
	margin-top: 46px;
	padding-top: 30px;
	border-top: 1px solid var(--line);
}

.weitere-termine h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 22px;
	margin: 0 0 18px;
}

/* ------------------------------------------------------------------
   Mitgliedsantrag in Schritten
   ------------------------------------------------------------------

   Vierzehn Felder in einer Kolonne. Auf einem Telefon weiss man nach
   dem dritten nicht mehr, wie viel noch kommt - und genau dort brechen
   Leute ab.

   Die Aufteilung entsteht im Skript. Ohne Javascript stehen alle
   Felder untereinander und der Antrag funktioniert; er ist dann nur
   lang. Deshalb muss auch das CSS ohne die Schritt-Logik tragen:
   `.antrag-schritt` sieht ohne sie wie ein normaler Abschnitt aus.
*/
.antrag-schritt {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 0 0 26px;
	padding: 22px 0 0;
}

.antrag-schritt:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.antrag-schritt legend {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--serif);
	font-size: 21px;
	padding: 0;
}

/* Der Fokus landet beim Schrittwechsel hier - er muss sichtbar sein. */
.antrag-schritt legend:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 4px;
}

.antrag-nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 900;
	flex: none;
}

.antrag-unter {
	margin: 8px 0 20px;
	color: var(--muted);
	font-size: 14px;
}

/*
   Die Fortschrittsleiste. Sie steht im HTML mit `hidden`, weil sie
   ohne das Skript nichts anzeigen wuerde, was stimmt.
*/
.antrag-leiste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	counter-reset: schritt;
}

.antrag-leiste li {
	flex: 1 1 140px;
	padding: 10px 12px;
	border-top: 3px solid var(--line);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 900;
	color: var(--muted);
}

.antrag-leiste li.erledigt {
	border-top-color: var(--blue);
	color: var(--body);
}

.antrag-leiste li.aktiv {
	border-top-color: var(--yellow);
	color: var(--ink);
}

.antrag-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.antrag-navigation button[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

@media (max-width: 620px) {
	.antrag-leiste li {
		flex-basis: 100%;
		border-top-width: 2px;
		padding: 7px 0;
	}

	.antrag-navigation button {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------------------
   Initialen an den Vorstandskarten
   ------------------------------------------------------------------

   Die Karten hatten Funktion und Namen, sonst nichts, und lasen sich
   wie Tabellenzeilen mit Rahmen. Fotos gibt es nicht, und erfundene
   Portraits kommen nicht in Frage.

   Zwei Buchstaben genuegen, damit das Auge einen Menschen erkennt und
   nicht einen Eintrag. `aria-hidden`, weil der Name direkt darunter
   steht: vorgelesen waeren die Initialen nur zweimal dasselbe.
*/
.board {
	position: relative;
}

.board-initialen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--bone);
	border: 1px solid var(--line);
	font-family: var(--serif);
	font-size: 16px;
	color: var(--body);
	letter-spacing: .02em;
}

/* ------------------------------------------------------------------
   Kontakt nach Anliegen
   ------------------------------------------------------------------

   Die Seite hatte ein allgemeines Formular und erwaehnte die anderen
   vier mit keinem Wort. Wer Mitglied werden wollte, schrieb eine
   Nachricht ins Freitextfeld - und der Verein musste zurueckfragen,
   was das Antragsformular ohnehin abgefragt haette.
*/
.anliegen {
	margin-bottom: 44px;
}

.anliegen h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 24px;
	margin: 0 0 10px;
}

.anliegen > p {
	max-width: 62ch;
	color: var(--body);
}

.anliegen-liste {
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	margin: 22px 0 16px;
}

.anliegen-liste a {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 16px;
	align-items: center;
	padding: 16px 18px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	/* Tippziel nach WCAG 2.2 deutlich ueber 24 Pixel. */
	min-height: 56px;
}

.anliegen-liste a:hover,
.anliegen-liste a:focus-visible {
	background: #fff9d2;
}

.anliegen-liste b {
	font-size: 15px;
}

.anliegen-liste span {
	grid-column: 1;
	font-size: 13px;
	color: var(--muted);
}

.anliegen-liste i {
	grid-column: 2;
	grid-row: 1 / span 2;
	font-style: normal;
	font-size: 18px;
	color: var(--blue);
}

.anliegen-rest {
	font-size: 14px;
	color: var(--muted);
}

@media (min-width: 760px) {
	.anliegen-liste {
		grid-template-columns: 1fr 1fr;
	}
}

/* ------------------------------------------------------------------
   Der Weg zum Ortsclub
   ------------------------------------------------------------------

   Die Seite hatte alle Angaben, aber nicht die Reihenfolge. Wer
   wissen wollte, was zu tun ist, musste sie aus Grundlogik,
   Stueckzahlstaffel und Schlussabsatz zusammensuchen.

   Nichts Neues erfunden: jeder der vier Schritte steht so schon im
   Text der Seite, nur eben verteilt.
*/
.weg {
	list-style: none;
	counter-reset: none;
	margin: 30px 0 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.weg li {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 4px 18px;
	align-items: start;
	padding: 22px 20px;
	background: #fff;
}

.weg-nummer {
	grid-row: 1 / span 2;
	font-family: var(--serif);
	font-size: 30px;
	color: var(--clubblue, var(--blue));
	line-height: 1;
}

.weg b {
	font-size: 16px;
}

.weg li > span:last-child {
	font-size: 14px;
	color: var(--body);
	max-width: 60ch;
}

@media (min-width: 900px) {
	.weg {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.weg li {
		grid-template-columns: 1fr;
	}

	.weg-nummer {
		grid-row: auto;
		margin-bottom: 8px;
	}
}

/* ------------------------------------------------------------------
   Suche in der Kopfzeile
   ------------------------------------------------------------------

   Die Suche war von keiner Seite aus erreichbar - kein Eingabefeld
   ausser auf der 404-Seite und auf der Suchseite selbst. Bei 4343
   Terminen, 555 Meldungen und 98 Clubs war das der wichtigste
   fehlende Weg.

   Bewusst ein sichtbares Feld statt eines Knopfes, der eines
   aufklappt: Es funktioniert ohne Javascript, und was man sieht, wird
   benutzt.
*/
.kopfsuche {
	display: flex;
	align-items: stretch;
	margin-left: 20px;
	border: 1px solid var(--line);
	background: #fff;
}

.kopfsuche input {
	border: 0;
	background: transparent;
	padding: 0 12px;
	font-size: 13px;
	width: 132px;
	min-height: 34px;
}

.kopfsuche input:focus {
	outline: 0;
}

/* Der Fokusrahmen liegt am ganzen Feld, damit er nicht abgeschnitten wird. */
.kopfsuche:focus-within {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.kopfsuche button {
	border: 0;
	background: transparent;
	/* Tippziel nach WCAG 2.2: mindestens 24 mal 24 Pixel. */
	min-width: 34px;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--navy);
}

.kopfsuche button:hover {
	background: #fff9d2;
}

/*
   Ab hier wird es eng. Das Feld weicht als Erstes - im Mobilmenue
   steht eine eigene Suche.
*/
@media (max-width: 1180px) {
	.kopfsuche {
		display: none;
	}
}

.mobile-suche {
	display: flex;
	gap: 8px;
	padding: 0 0 22px;
	margin-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.mobile-suche input {
	flex: 1;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--line);
	background: #fff;
	font-size: 16px;
}

.mobile-suche button {
	min-height: 44px;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   Tippziele in der obersten Leiste
   ------------------------------------------------------------------

   WCAG 2.2 verlangt 24 mal 24 Pixel. Die drei Verweise dort waren
   16 Pixel hoch - auf jeder Seite, also 39 zu kleine Ziele bei
   dreizehn geprueften Seiten.

   Gefunden hat es niemand, weil bisher nur bei 390 Pixeln
   Fensterbreite gemessen wurde. Dort ist die Leiste ausgeblendet.
   Erst ab Tablet erscheint sie, und ab da war die Anforderung nicht
   erfuellt. Der Pruefer nimmt die Breite jetzt als Argument:

       node tests/pruefe-tippziele.mjs <adresse> 1024

   Die Leiste ist 30 Pixel hoch, 24 passen hinein. Die Verweise fuellen
   sie jetzt aus, ohne dass sich optisch etwas aendert - der Text sitzt
   weiter in der Mitte, nur die anklickbare Flaeche reicht bis an den
   Rand.
*/
.topbar a,
.topbar .topbar-links > * {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/*
   Die Leiste selbst wird auf 34 Pixel gebracht, sonst stehen die
   Ziele randlos aneinander und lassen sich nicht auseinanderhalten.
*/
.topbar {
	height: 34px;
}

/* ------------------------------------------------------------------
   Karten auf einer Hoehe: nicht nur oben, sondern innen
   ------------------------------------------------------------------

   Der Verein hat am 27.08.2026 zweimal dasselbe gemeldet: "nicht auf
   einer Hoehe". Beim ersten Mal war es der absichtliche Versatz der
   Kacheln, der ist raus. Danach stand die Meldung wieder da - und die
   Pruefung sagte trotzdem gruen, weil sie die OBERKANTEN der Karten
   verglichen hat. Die stimmten. Was nicht stimmte, war alles darunter.

   Gemessen ueber sieben Seiten bei 768, 1024 und 1440 Pixeln, 45
   Stellen:

     /markt/       Fusszeile     bis 124 px versetzt
     /markt/       Anrisstext    bis  34 px
     /aktuelles/   Weiterlesen   bis  70 px
     /links/       Beschreibung  bis  44 px
     /              Preis        bis  26 px
     /              Anrisstext   bis  26 px
     /ueber-uns/   Name          bis  17 px
     /galerie/     Jahr, Titel   bis   9 px

   Die Ursache ist immer dieselbe und hat nichts mit Absicht zu tun:
   ein Titel bricht in einer Karte auf zwei Zeilen um, in der daneben
   nicht - und ab da rutscht alles Weitere mit. Dazu kommen Felder, die
   es nicht in jeder Karte gibt: ohne Preis faellt der Preis weg, ohne
   Foto die Bildflaeche, ohne Jahr das Jahr.

   Die Loesung ist `subgrid`. Die Karte wird selbst zu einem Raster,
   das die ZEILEN ihres Behaelters benutzt statt eigene aufzumachen.
   Damit teilen sich alle Karten einer Reihe dieselben Zeilenhoehen:
   Titel neben Titel, Preis neben Preis, Fusszeile neben Fusszeile.
   Fehlt ein Feld, bleibt seine Zeile in dieser Karte einfach leer -
   die Nachbarn verrutschen nicht.

   Warum nicht einfach feste Hoehen? Weil eine feste Hoehe raet. Sie
   ist bei einem langen Vereinsnamen zu klein und bei "Kasse" zu gross,
   und sie muss bei jeder Schriftgroessenaenderung nachgezogen werden.
   Subgrid rechnet stattdessen mit dem, was tatsaechlich dasteht.

   Drei Dinge, die beim Einbau wichtig waren und im Browser gemessen
   wurden, nicht angenommen:

   1. `row-gap: 0` auf der Karte. Ohne das erbt die Karte den Abstand
      des Behaelters - bei sechs Zeilen also fuenfmal 24 Pixel Luft
      MITTEN in der Karte. Der Abstand ZWISCHEN den Kartenreihen bleibt
      davon unberuehrt, das ist geprueft.
   2. `align-self: stretch`, weil `.story-list` `align-items: start`
      setzt. Eine Karte, die nicht ueber ihre Zeilen gestreckt wird,
      kann sie auch nicht teilen.
   3. `@supports`. Firefox kann Subgrid seit 71, Safari seit 16,
      Chrome seit 117. Aeltere Browser fallen auf das heutige Verhalten
      zurueck - versetzt, aber nicht kaputt.
   ------------------------------------------------------------------ */

@supports (grid-template-rows: subgrid) {

	/* Kleinanzeigen. Sieben Zeilen: Bild, Kopfzeile, Titel, Preis,
	   Ort, Anriss, Fusszeile. Auf der Startseite gibt es nur die
	   ersten vier - leere Zeilen fallen auf null zusammen. Die
	   Ortszeile kam am 29.08. dazu; ohne eigene Zeilennummer haette
	   das Subgrid sie automatisch in die Bildzeile gesetzt (gemessen:
	   "Goslar" stand ueber der Kopfzeile). */
	.market-grid > .listing {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 7;
		row-gap: 0;
		align-self: stretch;
	}

	.market-grid > .listing > .listing-image { grid-row: 1; }
	.market-grid > .listing > .listing-top   { grid-row: 2; }
	.market-grid > .listing > h2,
	.market-grid > .listing > h3             { grid-row: 3; }
	.market-grid > .listing > .price         { grid-row: 4; }
	.market-grid > .listing > .listing-ort   { grid-row: 5; }
	.market-grid > .listing > p              { grid-row: 6; }
	.market-grid > .listing > .credit        { grid-row: 7; }

	/* Meldungen auf der Startseite. Vier Zeilen: Bild, Datum, Titel,
	   Anriss. Der erste Beitrag steht in der breiten Spalte und hat
	   eine groessere Ueberschrift - das bleibt so. Er teilt sich die
	   Zeilen trotzdem mit den beiden daneben, damit die Anrisstexte
	   auf einer Linie beginnen. */
	.story-grid > .story {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;
		align-self: stretch;
	}

	.story-grid > .story > .story-image { grid-row: 1; }
	.story-grid > .story > .story-meta  { grid-row: 2; }
	.story-grid > .story > h2,
	.story-grid > .story > h3           { grid-row: 3; }
	.story-grid > .story > p            { grid-row: 4; }

	/* Meldungsarchiv. Hier steckt der Text in einem eigenen Kasten,
	   also ein Raster im Raster: die Karte teilt sich die Zeilen mit
	   ihren Nachbarn, der Textkasten reicht sie an seine Kinder
	   weiter. Die Leitmeldung ganz oben steht allein in ihrer Reihe
	   und bleibt aussen vor. */
	.story-list > .story:not(.story-leit) {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 5;
		row-gap: 0;
		align-self: stretch;
	}

	.story-list > .story:not(.story-leit) > .story-image { grid-row: 1; }

	.story-list > .story:not(.story-leit) > div {
		grid-row: 2 / span 4;
		display: grid;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.story-list > .story:not(.story-leit) > div > .credit          { grid-row: 1; }
	.story-list > .story:not(.story-leit) > div > h2               { grid-row: 2; }
	.story-list > .story:not(.story-leit) > div > p:nth-of-type(1) { grid-row: 3; }
	.story-list > .story:not(.story-leit) > div > p:nth-of-type(2) { grid-row: 4; }

	/* Galerie. Titelbild oben, darunter Jahr, Titel, Anriss,
	   Angaben - wieder ein Raster im Raster. Nicht jedes Album hat
	   ein Jahr oder einen Anriss. */
	.album-raster > .album-kachel {
		grid-template-rows: subgrid;
		grid-row: span 5;
		row-gap: 0;
		align-self: stretch;
	}

	.album-raster > .album-kachel > .album-bild { grid-row: 1; }

	.album-raster > .album-kachel > .album-text {
		grid-row: 2 / span 4;
		display: grid;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.album-raster > .album-kachel > .album-text > .album-jahr { grid-row: 1; }
	.album-raster > .album-kachel > .album-text > h2          { grid-row: 2; }
	.album-raster > .album-kachel > .album-text > p           { grid-row: 3; }
	.album-raster > .album-kachel > .album-text > .album-meta { grid-row: 4; }

	/* Verweiskacheln. Der Pfeil stand bisher per `flex:1` unten am
	   Kartenrand; das hat die Kartenhoehen angeglichen, nicht die
	   Beschreibungen. Jetzt liegen Titel, Beschreibung und Pfeil je
	   auf einer gemeinsamen Linie. */
	.link-grid > .link-card {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		row-gap: 0;
		align-self: stretch;
	}

	.link-grid > .link-card > h3 { grid-row: 1; }
	.link-grid > .link-card > p  { grid-row: 2; }
	.link-grid > .link-card > i  { grid-row: 3; align-self: end; }

	/* Vorstand. "Stellvertretende Vorsitzende" ist zweizeilig,
	   "Kasse" einzeilig - die Namen standen entsprechend versetzt. */
	.board-grid > .board {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		row-gap: 0;
		align-self: stretch;
	}

	.board-grid > .board > .board-initialen { grid-row: 1; }
	.board-grid > .board > .role            { grid-row: 2; }
	.board-grid > .board > h3               { grid-row: 3; }

	/* Nummerierte Kacheln: Rubriken der INFO, Clubs im Ausland,
	   Aufkleberserien. Vier Zeilen, weil bei den Auslandsclubs noch
	   ein Verweis auf deren Website dazukommt - aber nicht bei
	   allen. */
	.archive-grid > .archive-item {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;
		align-self: stretch;
	}

	.archive-grid > .archive-item > .num { grid-row: 1; }
	.archive-grid > .archive-item > h2,
	.archive-grid > .archive-item > h3   { grid-row: 2; }
	.archive-grid > .archive-item > p    { grid-row: 3; }
	.archive-grid > .archive-item > a    { grid-row: 4; align-self: end; }
}

/* ------------------------------------------------------------------
   Welttreffen: Aufkleberwand und Chronik
   ------------------------------------------------------------------

   Der Verein hat am 27.08.2026 die Vereinsunterlage zu den
   Welttreffen geschickt - sechs Seiten, 25 Treffen von 1975 bis 2025,
   und auf vier Seiten die Aufkleber dazu. Bis dahin lag genau diese
   Datei als PDF hinter einem Knopf auf `/det-info/`. Ein PDF hinter
   einem Knopf ist kein Inhalt, es ist ein Anhang.

   Die Aufkleber sind das Beste daran. Sie zeigen fuenfzig Jahre
   europaeische Gestaltung an einem einzigen Motiv: die Ente. 1975 ein
   finnischer Sonnenuntergang, 1985 eine englische Federzeichnung,
   2003 eine italienische Handschrift, 2025 ein slowenisches
   Bergpiktogramm. So etwas laesst sich nicht erfinden und nicht
   nachbauen - deshalb bekommt es die Flaeche, nicht die Chronik.

   Kein Rahmen um die Aufkleber, kein Schatten, kein Radius. Sie
   bringen ihre eigene Form mit, und die ist bei jedem eine andere:
   rund, achteckig, laenglich, freigestellt. Ein einheitlicher Kasten
   darum haette genau das kaputtgemacht, was sie unterscheidet.
   ------------------------------------------------------------------ */

.wet-wand {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 34px 26px;
	align-items: end;
	margin-top: 8px;
}

.wet-stueck {
	margin: 0;
	display: grid;
	/* Zwei Zeilen: Bild, Beischrift. Die Bildzeile ist fuer alle
	   gleich hoch, damit die Beischriften auf einer Linie stehen -
	   bei 25 verschiedenen Seitenverhaeltnissen sonst aussichtslos. */
	grid-template-rows: 132px auto;
	gap: 12px;
	justify-items: center;
	text-align: center;
}

.wet-stueck img {
	max-width: 100%;
	max-height: 132px;
	width: auto;
	height: auto;
	align-self: end;
	/*
	 * Die Vorlagen sind zwischen 99 und 1080 Pixel breit - sie stammen
	 * aus einem Word-Dokument, in das sie ueber dreissig Jahre hinweg
	 * eingefuegt wurden. Hochskalieren waere sichtbar, deshalb deckelt
	 * `max-height` und die kleinen bleiben klein.
	 */
	transition: transform .4s var(--ease-premium, ease);
}

.wet-stueck:hover img {
	transform: scale(1.06);
}

.wet-stueck figcaption {
	font-size: var(--text-2xs, 11px);
	line-height: 1.45;
}

.wet-stueck figcaption b {
	display: block;
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 400;
	color: var(--clubblue, var(--blue));
}

.wet-stueck figcaption span {
	color: var(--ash, var(--muted));
}

.wet-hinweis {
	margin-top: 34px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: var(--text-2xs, 11px);
	color: var(--ash, var(--muted));
	max-width: 68ch;
}

/*
   Die Chronik. Eine Datumssaeule links, dann Ort, Zahlen, Termin -
   dieselbe Leserichtung wie in der Terminliste, damit man nicht
   zweimal lernen muss, wo etwas steht.
*/
.wet-chronik {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.wet-chronik li {
	display: grid;
	grid-template-columns: 84px minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 8px 24px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}

.wet-jahr {
	font-family: var(--serif);
	font-size: 26px;
	color: var(--clubblue, var(--blue));
}

.wet-ort b {
	font-weight: 700;
}

.wet-ort i {
	font-style: normal;
	color: var(--ash, var(--muted));
	margin-left: 8px;
}

.wet-zahl,
.wet-datum {
	font-size: var(--text-xs, 13px);
	color: var(--ash, var(--muted));
}

.wet-datum {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/*
   Ein Jahr ohne Eintrag. Es steht bewusst in der Liste: eine Chronik,
   die von 2019 auf 2023 springt, sieht vollstaendig aus und ist es
   nicht. Zurueckgenommen, damit es nicht wie ein Treffen wirkt.
*/
.wet-chronik .wet-luecke {
	background: var(--bone, #f2efe6);
}

.wet-chronik .wet-luecke .wet-jahr,
.wet-chronik .wet-luecke b {
	color: var(--ash, var(--muted));
	font-weight: 400;
}

.wet-chronik .wet-luecke .wet-datum {
	text-align: left;
	grid-column: 3 / -1;
}

@media (max-width: 900px) {
	.wet-chronik li {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.wet-zahl,
	.wet-datum {
		grid-column: 2;
	}

	.wet-datum {
		text-align: left;
	}

	.wet-chronik .wet-luecke .wet-datum {
		grid-column: 2;
	}

	.wet-jahr {
		font-size: 22px;
	}
}

@media (max-width: 700px) {
	.wet-wand {
		grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
		gap: 26px 18px;
	}

	.wet-stueck {
		grid-template-rows: 104px auto;
	}

	.wet-stueck img {
		max-height: 104px;
	}
}

/*
   Kopfbereich ohne Foto.
   ------------------------------------------------------------------
   `/welttreffen/` bekommt bewusst kein Titelbild. Zur Verfuegung
   staenden nur die allgemeinen Citroen-Motive, deren Herkunft noch
   offen ist (siehe /bildnachweise/) - und ein beliebiger 2CV ueber
   einer Seite, auf der es um 25 ganz bestimmte Treffen geht, sagt
   nichts. Die Aufkleber darunter sind das Bild dieser Seite.

   Ohne `<img>` blieb bisher eine leere Navy-Flaeche stehen. Hier
   stattdessen ein ruhiger Verlauf in den Vereinsfarben.
*/
.page-hero.page-hero-still {
	height: 320px;
	min-height: 320px;
	background:
		radial-gradient(120% 140% at 12% 0%, rgba(255, 220, 0, .10) 0%, transparent 55%),
		linear-gradient(160deg, var(--clubblue, #10305f) 0%, var(--ink, #0e162b) 78%);
}

.page-hero.page-hero-still::after {
	background: linear-gradient(0deg, rgba(3, 9, 28, .34), transparent 52%);
}

@media (max-width: 760px) {
	.page-hero.page-hero-still {
		height: 270px;
		min-height: 270px;
	}
}

/* Die Zahlenleiste steht unter dem Einleitungstext, nicht daneben.
   Nebeneinander blieb rechts eine halbe Bildschirmhoehe leer, weil
   der Text links dreimal so hoch ist wie drei Zahlen. */
.wet-fakten {
	margin-top: 54px;
}

/* Clubeintrag mit offener Pruefung.
   Kein Warnton, keine Farbe, kein Ausrufezeichen - der Club hat
   nichts falsch gemacht, uns fehlt nur die Bestaetigung. */
.club-ungeprueft {
	display: inline-block;
	margin: 4px 0 0;
	font-size: var(--text-2xs, 11px);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ash, var(--muted));
	border-bottom: 1px dotted var(--line);
}

/* Aufgeloester Ortsclub.

   Deutlicher als "Angaben werden geprueft", weil es eine Tatsache ist
   und keine offene Frage - aber ohne Warnfarbe: es ist keine Stoerung,
   sondern ein Stueck Vereinsgeschichte. */
.club-historisch {
	display: inline-block;
	margin: 4px 0 0;
	font-size: var(--text-2xs, 11px);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ash, var(--muted));
	border-bottom: 1px solid var(--line);
}

/* Land eines befreundeten Clubs.

   33 der 98 Clubs sitzen im Ausland. Sie stehen mit Absicht in
   derselben Liste - es sind Partner des Vereins -, brauchen aber ein
   Schild, damit die Liste beim Ueberfliegen nicht verwirrt. Ton wie
   bei den anderen Vermerken: eine Zeile Kleinschrift, keine Farbe,
   kein Rahmen. */
.club-land {
	display: inline-block;
	font-size: var(--text-2xs, 11px);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ash, var(--muted));
}

.club-aufgeloest {
	margin: 0 0 var(--space-md, 20px);
	padding: 12px 16px;
	border-left: 3px solid var(--line);
	background: var(--paper, #f6f4ef);
	color: var(--ink);
	font-size: var(--text-sm, 15px);
}

/* Top-Links auf der Startseite: gespeist aus der Links-Seite.
   Kein Kartenraster - eine ruhige Reihe aus Namen mit Adresse,
   wie ein Impressum der Szene. */
.toplinks {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 44px;
}
.toplinks .toplink b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
}
.toplinks .toplink:hover b { color: var(--clubblue); }
.toplinks .toplink small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
}

/* Das Veranstalter-Sternchen der alten Seite, samt Legende. */
.event-row h2 .stern {
  color: var(--clubblue);
  font-weight: 700;
  cursor: help;
}
.stern-legende {
  margin-top: 20px;
  font-size: 12px;
  color: var(--muted);
}

/* Website, Anmeldung, Einladung am Termin (03.09.2026) */
.termin-verweise { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.termin-verweise .btn { margin: 0; }

/* Anmeldeseite: beide Wege nebeneinander (03.09.2026) */
.anmelden-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.anmelden-zwei .cta { grid-template-columns: 1fr; }
.anmelden-zwei .login-form label, .anmelden-zwei #ccrr-konto-login label { display: block; font-size: 13px; margin: 12px 0 4px; }
.anmelden-zwei input[type="text"], .anmelden-zwei input[type="password"] { width: 100%; max-width: 380px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.anmelden-zwei #ccrr-konto-login .login-remember label { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; }
.anmelden-zwei #ccrr-konto-login .login-submit { margin-top: 14px; }
.anmelden-zwei #ccrr-konto-login .button-primary { background: var(--clubblue); color: #fff; border: 0; padding: 12px 22px; border-radius: 4px; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 900px) { .anmelden-zwei { grid-template-columns: 1fr; } }


/* ==========================================================
   Abmelden aus dem Heftzugang

   Wer sich mit dem Passwort aus der gedruckten Ausgabe angemeldet
   hat, hat kein WordPress-Konto - `wp_logout_url()` hilft ihm nicht.
   Der Weg hinaus fuehrt ueber einen Empfaenger, der einen Nonce
   verlangt, also ueber ein Formular. Damit es im Kopf nicht aus der
   Reihe faellt, traegt der Knopf darin dieselben Klassen wie die
   Verweise daneben; das Formular selbst ist nur die Huelle.

   Gefunden am 04.09.2026: Bis dahin sah ein Heftleser in der
   Kopfzeile weiter "Anmelden" und kam nicht wieder heraus.
   ========================================================== */

.abmelden-form {
	display: inline;
	margin: 0;
	padding: 0;
}

.abmelden-form button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* Ohne eigene Knopfklasse: wie ein Verweis, nicht wie ein Schalter. */
.abmelden-form button:not([class]) {
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	text-decoration: inherit;
}

/* ==========================================================
   Aufkleber-Archiv

   Die beiden Aufkleberseiten waren bis zum 04.09.2026 reine
   Textseiten mit erfundenen Bildunterschriften - obwohl auf der
   alten Vereinsseite 13 beziehungsweise 32 Motive liegen und ein
   ausfuehrlicher Text von Reinhard Hofmann dazu. Bei einem
   Aufkleber-Archiv sind die Bilder nicht Beiwerk, sondern der
   Inhalt.

   Die Motive sind klein (137 bis 500 Pixel breit) und teils auf
   farbiger Folie. Deshalb ein heller Grund, ein schmaler Rahmen und
   feste Hoehe statt Breite: sonst wird ein 12-cm-Rundaufkleber so
   gross wie ein Plakat.
   ========================================================== */

.aufkleber-reihe,
.aufkleber-jahre {
	display: grid;
	gap: var(--space-md, 20px);
	margin: var(--space-lg, 32px) 0;
	align-items: end;
}

.aufkleber-reihe {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.aufkleber-jahre {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.aufkleber-reihe figure,
.aufkleber-jahre figure,
.aufkleber-einzeln,
.aufkleber-tafel {
	margin: 0;
	background: #fff;
	border: 1px solid var(--line, #e5e1d8);
	border-radius: 4px;
	padding: 14px;
	text-align: center;
}

.aufkleber-reihe img,
.aufkleber-jahre img,
.aufkleber-einzeln img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 190px;
	object-fit: contain;
	margin: 0 auto;
}

.aufkleber-tafel {
	margin: var(--space-lg, 32px) auto;
	max-width: 560px;
}

.aufkleber-tafel img {
	display: block;
	width: 100%;
	height: auto;
}

.aufkleber-reihe figcaption,
.aufkleber-jahre figcaption,
.aufkleber-tafel figcaption {
	margin-top: 10px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--ash, #747b8b);
}

.aufkleber-einzeln {
	align-self: start;
	max-width: 320px;
}

.bildnachweis-zeile {
	margin-top: var(--space-md, 20px);
	font-size: 13px;
	color: var(--ash, #747b8b);
}

@media (max-width: 620px) {
	.aufkleber-reihe,
	.aufkleber-jahre {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}