/*
 * Typografische Grundordnung.
 *
 * Diese Datei gibt es, weil die Schriftgroessen im Theme an 34 Stellen
 * einzeln entschieden wurden. Ergebnis: elf Beschriftungen in 9 px und
 * eine in 8 px, jeweils in Versalien mit bis zu 0,16em Sperrung.
 *
 * Bei einer Agenturseite faellt das nicht auf. Hier schon: der CCRR ist
 * 1968 gegruendet, ein grosser Teil der Mitglieder ist ueber 55. Neun
 * Pixel gesperrte Versalien sind fuer diese Leser schlicht schwer zu
 * lesen - und es ist genau der Text, der sagt, was ein Eintrag ist
 * ("ORTSCLUB IM CCRR", "TREFFPUNKT", "ROLLE IM VORSTAND").
 *
 * Statt 34 Einzelkorrekturen steht die Entscheidung jetzt einmal hier.
 * Wer die Beschriftungen kuenftig aendern will, aendert zwei Werte.
 *
 * Untergrenze: 11 px. Je kleiner der Text, desto weniger Sperrung -
 * gesperrte Versalien werden mit sinkender Groesse ueberproportional
 * schwer lesbar, weil die Wortform verloren geht.
 *
 * Geladen nach site.css, vor custom.css: die Grundordnung ueberschreibt
 * die Vorschauwerte, gezielte Einzelfaelle in custom.css behalten aber
 * das letzte Wort.
 */

:root {
	/* Schriftgroessen */
	--text-2xs: 11px;   /* Beschriftungen, Marken, Meta - Untergrenze */
	--text-xs:  12px;
	--text-sm:  13px;
	--text-base: 15px;
	--text-md:  17px;
	--text-lg:  20px;
	--text-xl:  26px;

	/* Sperrung fuer Versalien, nach Groesse gestaffelt */
	--track-label: .09em;
	--track-label-lg: .12em;

	/* Abstaende */
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-sm: 14px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 64px;
	--space-2xl: 104px;

	/* Breiten */
	--content-width: 720px;
	--site-width: 1240px;

	/* Radien und Schatten */
	--radius-sm: 2px;
	--radius-md: 4px;
	--shadow-soft: 0 2px 10px rgba(7, 18, 47, .06);
	--shadow-float: 0 20px 60px rgba(7, 18, 47, .14);
}

/*
 * Alle kleinen Versalien-Beschriftungen auf eine gemeinsame Groesse.
 *
 * Die Aufzaehlung ist lang, weil das Theme aus einer statischen
 * Vorschau gewachsen ist und jede Komponente ihre eigene Beschriftung
 * mitbrachte. Sie hier einmal zusammenzufassen ist ehrlicher, als in
 * 34 Regeln je zwei Zahlen zu aendern und beim naechsten Mal drei
 * davon zu vergessen.
 */
.topbar,
.topbar-links a,
.eyebrow,
.hero-stat span,
.stat span,
.event-row .place,
.tag,
.story-meta,
.club-preview a span,
.listing-top,
.gallery-strip figcaption,
.fact span,
.timeline-item .date,
.filter,
.club-row .label,
.field label,
.board .role,
.footer h4,
.dropdown-label,
.mobile-label,
.breadcrumb,
.context-title,
.filter-summary span,
.footer-kicker,
.archive-toolbar label,
.year-card i,
.masonry-gallery figcaption,
.document-list > a > span,
.login-form label,
.world-club span,
.issue-note,
.chapter-nav a,
.lightbox figcaption {
	font-size: var(--text-2xs);
	letter-spacing: var(--track-label);
}

/* Wo die Beschriftung traegt, darf sie etwas mehr Luft haben. */
.eyebrow,
.hero-kicker,
.footer-kicker {
	letter-spacing: var(--track-label-lg);
}

/*
 * Der Fliesstext hatte ausser einer Linkfarbe keine einzige Regel.
 * `.prose` traegt den Inhalt jeder Detailseite und jeder Seite, die
 * spaeter im Editor gebaut wird - ohne Zeilenlaenge, Zeilenhoehe und
 * Abstaende liest sich das ueber die volle Breite eines grossen
 * Bildschirms nicht mehr.
 */
.prose {
	max-width: var(--content-width);
	font-size: var(--text-md);
	line-height: 1.7;
}

.prose > * + * {
	margin-top: var(--space-md);
}

.prose h2 {
	margin-top: var(--space-xl);
	line-height: 1.15;
}

.prose h3 {
	margin-top: var(--space-lg);
	line-height: 1.25;
}

.prose li + li {
	margin-top: var(--space-xs);
}

.prose img {
	margin-block: var(--space-lg);
}

/*
 * Auch mobil nicht kleiner.
 *
 * site.css setzt `.breadcrumb` unter 760 px auf 8,5 px - gesperrte
 * Versalien in achteinhalb Pixeln. Das ist die kleinste Schrift der
 * ganzen Seite, und sie steht ausgerechnet dort, wo der Besucher
 * nachsieht, wo er gerade ist.
 */
@media (max-width: 760px) {
	.breadcrumb,
	.topbar,
	.topbar-links a {
		font-size: var(--text-2xs);
	}
}

/*
 * Faktenliste der Einzelseiten.
 *
 * Loest `.doc-fields` ab. Zwei Gruende: die alte Fassung war ein
 * `<div>`-Stapel ohne semantische Beziehung zwischen Beschriftung und
 * Wert, und ihre Verweise waren 16 Pixel hoch - unter den 24, die
 * WCAG 2.2 fuer Zeigeziele nennt. Jetzt eine echte Beschreibungsliste
 * mit ausreichend grossen Zielen.
 */
.fakten {
	display: grid;
	gap: 0;
	margin: var(--space-lg) 0 0;
	border-top: 1px solid var(--line, #d9d6cc);
}

.fakt {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--line, #d9d6cc);
}

@media (min-width: 640px) {
	.fakt {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		gap: var(--space-md);
		align-items: baseline;
	}
}

.fakt dt {
	margin: 0;
	font-size: var(--text-2xs);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	font-weight: 700;
	color: var(--muted, #747b8b);
}

.fakt dd {
	margin: 0;
	font-size: var(--text-md);
	color: var(--ink, #10172c);
}

/* Mindestens 24 Pixel hoch, damit der Verweis ein Zeigeziel ist. */
.fakt dd a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--blue, #0b2f92);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fakt dd a:hover,
.fakt dd a:focus-visible {
	text-decoration-thickness: 2px;
}

/*
 * Verweise in Listenueberschriften sind Zeigeziele.
 *
 * Am 26.08. habe ich die Titel in den Startseiten-Bloecken klickbar
 * gemacht - vorher stand dort blosser Text. Richtig gedacht, halb
 * gemacht: die Verweise waren 20 Pixel hoch, unter den 24 aus WCAG
 * 2.2. Gemeldet hat es die Tippziel-Pruefung nach dem Hochladen, nicht
 * vorher - in der Vorschau gab es die Bloecke noch nicht.
 *
 * Dieselbe Regel wie bei `.fakt dd a`: die Zeile darf ruhig eng
 * gesetzt bleiben, das anklickbare Feld nicht.
 */
/*
 * Der Termintitel stand als einziger Kartentitel in der Grotesk.
 *
 * Ortsclub, Anzeige, Meldung und Album setzen ihren Titel in die
 * Newsreader; die Terminliste tat es nicht - und weil sie fett und
 * 16 Pixel gross war, stand sie in ihrer eigenen Zeile unter dem
 * Datum, das mit 19 Pixel Newsreader daneben lag. Der Titel ist aber
 * das Ziel der Zeile, das Datum nur die Sortierung.
 *
 * Aufgefallen ist es der Kartenpruefung (`tests/pruefe-karten.mjs`),
 * die alle fuenf Bauformen nebeneinander misst. Beim Ansehen einer
 * einzelnen Seite faellt so etwas nicht auf.
 */
.event-row h2,
.event-row h3 {
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.2;
}

.event-row h3 a,
.event-row h2 a,
.story h3 a,
.story h2 a,
.listing h3 a,
.listing h2 a,
.club-row h3 a,
.document-list > a,
.breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* ==========================================================
   Mobilmenue
   ========================================================== */

/*
 * Die vier Ziele, wegen derer Leute herkommen, stehen gross und ohne
 * Gruppenueberschrift ganz oben. Vorher waren sie vier von 26 gleich
 * aussehenden Zeilen; wer auf dem Telefon zu "Markt" wollte, hat
 * siebenmal gescrollt.
 *
 * Der Rest liegt in einklappbaren Gruppen. `<details>` statt
 * Javascript: es funktioniert ohne Skript, laesst sich mit der
 * Tastatur bedienen, und der Browser kuemmert sich um die
 * Zugaenglichkeit.
 */
.mobile-haupt {
	display: grid;
	gap: 0;
	margin-bottom: var(--space-sm);
}

/*
 * `.mobile .mobile-haupt a` statt `.mobile-haupt a`: in custom.css
 * steht eine Tippziel-Korrektur `.mobile a { min-height: 24px }`, und
 * custom.css laedt spaeter. Bei gleicher Spezifitaet gewinnt die
 * spaetere Regel - der Menuepunkt waere 24 statt 56 Pixel hoch
 * geblieben, und man haette es fuer einen Schreibfehler in der
 * Zahl gehalten.
 */
.mobile .mobile-haupt a {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0;
	border-bottom: 1px solid var(--line, #d9d6cc);
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -.01em;
	color: var(--ink, #10172c);
}

.mobile .mobile-haupt a.active {
	color: var(--blue, #0b2f92);
}

.mobile details.mobile-group > .mobile-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
}

/* Der Standardpfeil der Browser passt nicht; ein eigener tut es. */
.mobile details.mobile-group > .mobile-label::-webkit-details-marker {
	display: none;
}

.mobile details.mobile-group > .mobile-label::after {
	content: "+";
	font-size: 18px;
	line-height: 1;
	color: var(--muted, #747b8b);
	transition: transform .2s ease;
}

.mobile details.mobile-group[open] > .mobile-label::after {
	content: "\2212";
}

.mobile details.mobile-group[open] > .mobile-label {
	margin-bottom: 4px;
}

/*
 * Abschnitte auf Papierton
 * ------------------------
 * Zwei Archive bestehen aus zwei Bloecken, die verschiedene Dinge
 * tun: /clubs/ hat die Karte und darunter die Liste, /dokumente/ hat
 * die Formulare und darunter das Archiv. Gemessen haben beide
 * Abschnitte Aussenabstand null - der Abstand entsteht allein aus
 * dem, was darin liegt. Auf dem Schirm laufen sie dadurch ineinander;
 * man sieht eine lange Seite statt zwei Teilen.
 *
 * `--bone` war seit dem ersten Tag als Papierton definiert und wurde
 * an keiner Stelle benutzt. Hier tut er, wofuer er gedacht war: er
 * trennt, ohne eine Linie zu ziehen.
 *
 * Die Abstaende stehen ausdruecklich mit dabei. Eine Flaeche ohne
 * Innenabstand waere ein Band, das sich an den Text quetscht.
 */
.abschnitt-papier {
	background: var(--bone);
	padding: var(--space-xl) 0;
	margin-bottom: var(--space-xl);
}

@media (max-width: 760px) {
	.abschnitt-papier {
		padding: var(--space-lg) 0;
		margin-bottom: var(--space-lg);
	}
}

/*
 * Datenschutzhinweis am Formular
 * ------------------------------
 * Steht vor dem Absendeknopf, weil er dort gelesen wird. Das Haekchen
 * bleibt links neben dem Text stehen, auch wenn der Text drei Zeilen
 * braucht - deshalb Raster statt Fliessumbruch.
 *
 * Das Kaestchen ist auf 20 Pixel gesetzt, die anklickbare Flaeche ist
 * aber die ganze Beschriftung; sie ist immer hoeher als 24 Pixel.
 */
.form-datenschutz {
	margin: var(--space-md) 0;
	max-width: 62ch;
}

.form-datenschutz label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: start;
	cursor: pointer;
	font-size: var(--text-sm);
	line-height: 1.5;
	min-height: 24px;
}

.form-datenschutz input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--blue);
	flex: 0 0 auto;
}

.form-datenschutz a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * Zweite Filterleiste: der Zeitraum
 * ---------------------------------
 * Steht ueber der Art-Leiste und ist ihr gleich gebaut - zwei Reihen
 * mit demselben Aussehen sind eine Leiste mit zwei Fragen, nicht zwei
 * verschiedene Werkzeuge.
 *
 * Die eigene Zeile bekommt sie, weil sonst auf mittleren Breiten acht
 * Knoepfe nebeneinanderstehen und der Umbruch mitten in einer Frage
 * passiert.
 */
.filterset-zeit {
	grid-column: 1 / -1;
	margin-bottom: var(--space-xs);
}

@media (max-width: 760px) {
	.filterset-zeit {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 3px;
	}

	.filterset-zeit .filter {
		white-space: nowrap;
	}
}