/*
 * Die Dimensionen-Seite: Übersicht, Fächer mit dem Band und die Liste ohne
 * JavaScript. Eingebunden wird dieses Blatt nur vom Shortcode [fb_dimensionen]
 * (inc/seite.php), also nur auf der einen Seite, auf der es etwas tut.
 *
 * MOBIL ZUERST. Ein großer Teil der Angeschriebenen kommt über das Telefon.
 * Alles hier gilt zunächst für die schmale Spalte; ab 48rem (768 px) rücken
 * Name, Balken und Zahl einer Zeile nebeneinander. Es gibt keinen Bruchpunkt
 * dazwischen und keine festen Breiten — nichts darf waagerecht rollen.
 *
 * ZWEI FARBEN, UND SIE ERKLÄREN DIE BALKEN. Gelb ist die gedruckte
 * Antwortkarte, Olivgrün (XIQIT-Gold) der Weg über das Formular. Diese
 * Zuordnung gilt in der Legende und im gestapelten Balken — und nur dort. Am
 * Beitrag selbst steht sie nicht mehr: alle Karten sind gleich gebaut, und
 * woher ein Beitrag kam, sagt allein das Zeichen oben rechts. Zwei
 * Darstellungen, die verschieden aussahen, ohne zu sagen warum, waren der
 * Grund für den Umbau.
 *
 * KEINE GEKIPPTEN ELEMENTE. Gedreht wird genau ein Ding, und das ist kein
 * Kasten: das kleine Dreieck vor dem Zeilennamen, das beim Öffnen von der
 * Spitze nach rechts auf die Spitze nach unten geht.
 */

/* DIE FARBEN STEHEN AN ZWEI STELLEN UND SIND DOCH EINE. Der Verweis zurück
   ist ein eigener Shortcode und steht auf der Seite außerhalb des großen
   Abschnitts — eine Seite kann ihn sogar ganz allein tragen. Erbte er die
   Werte nur von .fbd, stünde er dort ohne Farbe da. Darum nennt diese eine
   Regel beide Umschläge; die Werte selbst gibt es weiterhin genau einmal.
   (Liegt der Verweis doch einmal im Abschnitt, setzt er dieselben Werte noch
   einmal — das kostet nichts.) */
.fbd,
.fbd-zurueck {
	/* Gelb der gedruckten Karte, Oliv für den Weg über die Website. */
	--fbd-gelb: #fae013;
	--fbd-gelb-rand: #d9c111;
	--fbd-oliv: #a9a676;

	--fbd-tinte: #1d1d1b;
	--fbd-leise: #5c5c58;       /* 6,8:1 auf Weiß — auch klein noch lesbar */
	--fbd-grund: #f6f5f0;
	--fbd-spur: #f1f0ea;        /* der ungefüllte Teil eines Balkens */

	/* ZWEI HAARLINIEN, UND SIE SIND NICHT DASSELBE. Die helle trennt und
	   rahmt: Zeilen der Übersicht, Spur der Balken, Fach, Karte im Band. Sie
	   darf leise sein, sie trägt keine Bedienung. Die dunkle ist der Rand
	   eines Knopfes — dort verlangt WCAG 1.4.11 ein Verhältnis von 3:1, und
	   die helle käme auf 1,4:1. Gemessen: 3,80:1 auf Weiß, 3,48:1 auf dem
	   ruhigen Grund. */
	--fbd-haarlinie: #deddd3;
	--fbd-rand-knopf: #85837b;
	/* Dasselbe für den Rand beim Überfahren: das Oliv der Marke käme auf
	   2,5:1, diese dunklere Fassung auf 3,50:1 (Weiß) und 3,20:1 (Grund). */
	--fbd-oliv-dunkel: #8e8b5f;

	--fbd-schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fbd-serif: Georgia, "Times New Roman", serif;
}

.fbd {
	color: var(--fbd-tinte);
	font-family: var(--fbd-schrift);

	/* ABSTAND NACH OBEN, UND ZWAR AM ABSCHNITT. Über dem Shortcode steht die
	   Einleitung als gewöhnlicher Absatz der Seite. Läge der Abstand am ersten
	   Kind, fiele er mit dem des Absatzes darüber zusammen (Randzusammenfall
	   durch den Abschnitt hindurch) und wäre mal da, mal nicht. Am Abschnitt
	   selbst gilt er verlässlich. */
	margin-top: 1.5rem;
}

/* Nicht auf das Theme verlassen: ohne border-box läuft jedes Feld mit Rand und
   Innenabstand über die Breite des Telefons hinaus — und das Band rechnete
   falsch, denn es setzt die Breite einer Karte als flex-basis. */
.fbd *,
.fbd *::before,
.fbd *::after {
	box-sizing: border-box;
}

/* Die Fächer stehen auf `hidden`, bis das Skript eines öffnet. Ein Theme, das
   hidden überschreibt, klappte sie alle auf einmal auf. */
.fbd [hidden] {
	display: none;
}

/* ------------------------------------------------------------ Der Weg zurück
 *
 * Die Website hat keine Navigation (siehe inc/seite.php, Konstante ZURUECK).
 * Dieser Verweis ist der einzige Weg von hier zur Startseite, und er muss
 * leise bleiben: klein, in Tinte statt in einer Signalfarbe, mit einer
 * Haarlinie darunter statt einer Unterstreichung.
 *
 * ER STEHT FÜR SICH. Als eigener Shortcode [fb_zurueck] liegt er irgendwo im
 * Inhalt der Seite, nicht im Abschnitt der Übersicht — er bringt darum alles
 * mit, was er braucht: Farbwerte (oben, in der gemeinsamen Regel), Schrift,
 * Größe und seinen eigenen Fokusrahmen. Nichts davon darf voraussetzen, dass
 * die große Tabelle auf derselben Seite steht.
 */

.fbd-zurueck {
	margin: 0 0 1.1rem;
	color: var(--fbd-tinte);
	font-family: var(--fbd-schrift);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.fbd-zurueck__link {
	color: var(--fbd-tinte);
	text-decoration: none;
	border-bottom: 1px solid var(--fbd-haarlinie);
}

.fbd-zurueck__link:hover {
	border-bottom-color: var(--fbd-tinte);
}

.fbd-zurueck__pfeil {
	margin-right: 0.35rem;
	color: var(--fbd-leise);
}

/* Der eigene Fokusrahmen: die Regel für den Abschnitt weiter unten greift hier
   nicht, der Verweis liegt außerhalb. */
.fbd-zurueck__link:focus-visible {
	outline: 2px solid var(--fbd-tinte);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- Kopfzahlen */

.fbd-summe {
	margin: 1.5rem 0 0.15rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.fbd-summe__herkunft {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--fbd-leise);
}

/* Der Satz zum Unterschied der beiden Zahlenarten, der Satz zur Summe über
   100 %, der Hinweis über der Liste und die Zeile, wenn der Abzug fehlt. */
.fbd-grundlage,
.fbd-ueber-hundert,
.fbd-ohne-zahlen,
.fbd-ohne-js__hinweis {
	max-width: 42em;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--fbd-leise);
}

.fbd-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.9rem;
	align-items: center;
	margin: 0.9rem 0 0.6rem;
	font-size: 0.8125rem;
	color: var(--fbd-leise);
}

.fbd-legende__hinweis {
	margin-left: auto;
}

.fbd-pille {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-right: 5px;
	vertical-align: -1px;
}

.fbd-pille--karte {
	background: var(--fbd-gelb);
	border: 1px solid var(--fbd-gelb-rand);
}

.fbd-pille--online {
	background: var(--fbd-oliv);
}

/* ----------------------------------------- Die Übersicht ist die Auswahl (14)
 *
 * Jede Zeile ist ein Knopf über die ganze Breite; darunter liegt ihr Fach.
 * Darum trägt die Zeile selbst keinen Innenabstand und keinen Rahmen: der
 * Knopf hat beides, sonst endete seine Klickfläche vor dem Rand und ein
 * Treffer am Zeilenende täte nichts.
 */

.fbd-uebersicht {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fbd-uebersicht__zeile {
	border-top: 1px solid var(--fbd-haarlinie);
}

.fbd-uebersicht__zeile:last-child {
	border-bottom: 1px solid var(--fbd-haarlinie);
}

.fbd-zeile {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 0.75rem;
	row-gap: 0.3rem;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0.5rem 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.fbd-zeile__name {
	grid-row: 1;
	grid-column: 1;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.fbd-zeile:hover .fbd-zeile__name {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Die offene Zeile — am aria-expanded, das das Skript setzt, nicht an einer
   eigenen Klasse: der Zustand steht damit nur an einer Stelle, und was das
   Hilfsmittel vorliest, ist dasselbe, was das Auge sieht. Nur fett, kein
   gelber Grund: ein zweites Gelb auf der Seite erschlüge die Unterscheidung
   von Karte und Online im Balken. */
.fbd-zeile[aria-expanded="true"] .fbd-zeile__name {
	font-weight: 700;
}

/* Das Dreieck vor dem Namen: aus Rändern gezeichnet, nicht als Zeichen — ein
   Schriftzeichen säße je nach Schrift anders auf der Zeile. */
.fbd-zeile__pfeil {
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 0.45rem;
	border: 0.3rem solid transparent;
	border-right-width: 0;
	border-left-color: var(--fbd-rand-knopf);
	vertical-align: 0.05em;
	transition: transform 0.2s;
}

.fbd-zeile[aria-expanded="true"] .fbd-zeile__pfeil {
	transform: rotate(90deg);
}

/* Die kleinere der beiden Zahlenarten: was von dieser Zeile hier wirklich zu
   lesen ist. Sie gehört zur Zeile, nicht zum Zustand, und bleibt darum auch
   bei offener Zeile mager. */
.fbd-zeile__lesbar {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--fbd-leise);
}

.fbd-balken {
	display: flex;
	grid-row: 2;
	grid-column: 1 / -1;
	height: 13px;
	background: var(--fbd-spur);
}

.fbd-balken__karte {
	background: var(--fbd-gelb);
}

.fbd-balken__online {
	background: var(--fbd-oliv);
}

.fbd-zahl {
	grid-row: 1;
	grid-column: 2;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.fbd-zahl__absolut {
	display: block;
	font-size: 0.75rem;
	color: var(--fbd-leise);
}

/* „gemischt“ in der Zeile „Alle Beiträge“: sie hat keinen Anteil, weil sie
   keine Dimension ist. */
.fbd-zahl--wort {
	font-size: 0.75rem;
	color: var(--fbd-leise);
}

/* ------------------------------------------------------ Das Fach und das Band
 *
 * Das Fach liegt in der Tabelle, unter seiner Zeile. Es ist ohne Skript
 * `hidden` und bleibt es.
 */

.fbd-fach {
	margin-bottom: 0.7rem;
}

.fbd-fach__innen {
	padding: 0.75rem;
	border: 1px solid var(--fbd-haarlinie);
	background: var(--fbd-grund);
}

.fbd-fach__kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.6rem;
	align-items: baseline;
	margin-bottom: 0.6rem;
	font-size: 0.8125rem;
	color: var(--fbd-leise);
}

.fbd-fach__name {
	font-size: 0.875rem;
	color: var(--fbd-tinte);
}

.fbd-fach__kopf .fbd-knopf {
	margin-left: auto;
}

/* Die Hinweiszeile („nicht erreichbar“, „kein Beitrag veröffentlicht“) ist
   leer, solange es nichts zu sagen gibt, und nimmt dann auch keinen Platz: ein
   leerer Absatz ist null hoch, es bleibt nur der Abstand wegzunehmen.
   NICHT display: none — die Zeile ist eine lebende Region (role="status"),
   und was nicht dargestellt wird, steht auch nicht im Baum der Hilfsmittel.
   Der erste Satz käme dann womöglich gar nicht an. */
.fbd-fach__hinweis {
	margin: 0.6rem 0 0;
	font-size: 0.8125rem;
	color: var(--fbd-leise);
}

.fbd-fach__hinweis:empty {
	margin: 0;
}

/* DAS BAND ZIEHT VON RECHTS NACH LINKS.
 *
 * Das Fenster schneidet ab, das Band liegt darin und ist breiter als es: eine
 * Karte mehr, als nebeneinander passen, wartet rechts außerhalb. Ein Schritt
 * verschiebt das Band um genau eine Kartenbreite plus eine Lücke nach links;
 * danach nimmt das Skript die erste Karte heraus, hängt rechts eine neue an
 * und stellt das Band ohne Übergang auf null zurück. Für das Auge ist das
 * eine stetige Bewegung, im DOM bleibt es immer dieselbe Handvoll Elemente.
 *
 * Die Lücke steht hier und nur hier. Das Skript liest sie mit
 * getComputedStyle aus dem Band — zwei Zahlen, eine in CSS und eine in JS,
 * liefen beim ersten Ändern auseinander, und das Band verschöbe sich dann um
 * ein paar Pixel zu weit oder zu kurz.
 */

.fbd-fenster {
	overflow: hidden;
}

.fbd-band {
	display: flex;
	gap: 10px;
	align-items: stretch;
	transform: translateX(0);
}

.fbd-band--faehrt {
	transition: transform 0.55s cubic-bezier(0.33, 0.1, 0.25, 1);
}

/* ------------------------------------------------- Die Liste ohne JavaScript */

.fbd-ohne-js {
	margin-top: 1.4rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--fbd-haarlinie);
}

/* Zwei Spalten ab 48rem als Mehrspaltensatz, nicht als Raster: die Beiträge
   sind verschieden hoch, und ein Raster ließe neben jeder kurzen Karte ein
   großes Loch stehen. break-inside hält einen Beitrag beisammen. */
.fbd-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fbd-liste__eintrag {
	margin-bottom: 0.8rem;
	break-inside: avoid;
}

/* ------------------------------------------------------- Ein einzelner Beitrag
 *
 * Das Markup kommt aus beitrag_markup() (inc/karten.php): im <article> liegen
 * das Zeichen, das Textfeld und die Zuschreibung.
 *
 * ALLE GLEICH GEBAUT. Die Klassen --karte und --online stehen weiter im
 * Markup (die Routenprobe und tests/karten-test.php nageln sie fest, und der
 * Kanal eines Beitrags ist eine echte Angabe), aber sie färben nichts mehr.
 * Der gelbe Grund mit den schrägen Streifen ist weg: er machte die eine
 * Herkunft zum Ereignis und die andere zum Rest, ohne das zu erklären.
 * Geblieben ist das Zeichen oben rechts — Briefumschlag oder Bildschirm.
 */

.fbd-beitrag {
	position: relative;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--fbd-haarlinie);
	background: #fff;
}

.fbd-beitrag__text {
	margin: 0;
	/* Platz für das Zeichen in der Ecke: ohne ihn liefe die erste Zeile
	   darunter hindurch. */
	padding-right: 1.3rem;
	font-family: var(--fbd-serif);
	font-size: 0.95rem;
	line-height: 1.45;
	/* Lange zusammengesetzte Wörter dürfen die Spalte nicht aufsprengen. */
	overflow-wrap: break-word;
}

.fbd-beitrag__von {
	margin: 0.45rem 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--fbd-leise);
}

/* Briefumschlag oder Bildschirm, klein in der Ecke. Kein Kreis, kein Rahmen:
   es ist eine Herkunftsangabe, kein Siegel. */
.fbd-beitrag__zeichen {
	position: absolute;
	top: 0.55rem;
	right: 0.6rem;
	width: 17px;
	height: 17px;
	color: var(--fbd-rand-knopf);
}

/* Die Karte im Band: feste Höhe, damit die Karten nebeneinander eine Zeile
   bilden und das Fenster bei jedem Schritt gleich hoch bleibt. Die
   Zuschreibung sitzt unten, der Text füllt darüber — höchstens fünf Zeilen,
   dann wird abgeschnitten. Aufklappen gibt es nicht; die Seite ist für den
   Eindruck.

   DIE HÖHE RICHTET SICH NACH DEM LÄNGSTEN FALL, nicht nach dem häufigsten:
   fünf Zeilen Text und eine Zuschreibung über zwei Zeilen („— Hillesheim
   Günter u. Birgit aus Großenbrode“ ist echt und passt bei 250 px nicht in
   eine). Mit der knapperen Höhe liefe der Text unter die Zuschreibung. Karten
   mit kurzem Text bekommen dafür etwas mehr Luft zwischen Text und Name — so
   sehen sie ohnehin schon aus. */
.fbd-band .fbd-beitrag {
	display: flex;
	flex-direction: column;
	height: 11.5rem;
}

/* Der Riegel für alles Übrige: was trotz aller Rechnerei nicht in die Karte
   passt, wird abgeschnitten und legt sich nicht über die Zuschreibung. */
.fbd-band .fbd-beitrag__feld {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.fbd-band .fbd-beitrag__text {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Die Zuschreibung bleibt unten und nimmt höchstens zwei Zeilen; ein
   dreizeiliger Name äße sonst den Text auf. */
.fbd-band .fbd-beitrag__von {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: auto;
}

/* ------------------------------------------------------------------ Knöpfe */

/* VERBORGEN, BIS DAS SKRIPT DA IST. „Anhalten“ hielte ein Band an, das es
   ohne JavaScript nicht gibt. Der Knopf steht im HTML (das Skript braucht
   ihn), zeigt sich aber erst, wenn ein Band wirklich läuft und das Skript
   data-fbd-bereit am Abschnitt gesetzt hat. Das Skript setzt zusätzlich
   `hidden`, solange die Auswahl kleiner ist als das Band breit — dann steht
   das Band ohnehin still, und ein Knopf dagegen wäre ein leeres Versprechen.
   Darum die dritte Regel: sie muss die zweite überstimmen. */
.fbd [data-fbd-pause] {
	display: none;
}

.fbd[data-fbd-bereit] [data-fbd-pause] {
	display: inline-block;
}

.fbd [data-fbd-pause][hidden] {
	display: none;
}

.fbd-knopf {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--fbd-rand-knopf);
	border-radius: 6px;
	background: #fff;
	color: var(--fbd-tinte);
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1.2;
	cursor: pointer;
}

.fbd-knopf:hover {
	border-color: var(--fbd-oliv-dunkel);
}

/* Der Fokus muss auf jedem Knopf sichtbar bleiben. (Der Verweis zurück bringt
   denselben Rahmen selbst mit — er steht außerhalb dieses Abschnitts.) */
.fbd button:focus-visible {
	outline: 2px solid var(--fbd-tinte);
	outline-offset: 2px;
}

/* Die Zeile geht über die ganze Breite. Ihr Rahmen muss nach innen, sonst
   liefe er unter die Trennlinien der Nachbarzeilen. */
.fbd .fbd-zeile:focus-visible {
	outline-offset: -2px;
}

/* ------------------------------------------------------- Ab 48rem (768 px) */

@media (min-width: 48rem) {
	/* Name, Balken, Zahl in einer Zeile. */
	.fbd-zeile {
		grid-template-columns: 16rem 1fr 5rem;
	}

	.fbd-balken {
		grid-row: 1;
		grid-column: 2;
	}

	.fbd-zahl {
		grid-column: 3;
	}

	.fbd-fach__innen {
		padding: 0.9rem 1rem;
	}

	.fbd-liste {
		columns: 2;
		column-gap: 0.8rem;
	}
}

/* Wer Bewegung abbestellt hat, bekommt keine: das Band tauscht dann aus, ohne
   zu fahren (assets/dimensionen.js fragt dieselbe Medienabfrage ab und
   überspringt den Übergang). Steht am Ende, damit es jede Regel davor
   überschreibt. */
@media (prefers-reduced-motion: reduce) {
	.fbd *,
	.fbd *::before,
	.fbd *::after {
		transition: none;
		animation: none;
	}
}