/* ---------- Geschichte als Zeitstrahl ----------
   Block-Stile für Core-Blöcke (Pedi pflegt alles im Seiteneditor):
   eckdaten (Gruppe), zitat-gelb (Zitat), zeitstrahl (Gruppe als Container),
   kapitel-zeile (Gruppe je Kapitel), kapitel (Details im Kapitel).
   Nur geladen, wenn einer dieser Stile auf der Seite steht
   (dpk2026_geschichte_laden in functions.php). Kein JavaScript. */

@font-face {
	font-family: "IBM Plex Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/IBMPlexSerif-Italic.woff2") format("woff2");
}

/* ---------- Eckdaten: drei Karten in einer Reihe ---------- */

.wp-block-group.is-style-eckdaten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

/* Abstände nach oben/unten: stärker als die Grundregel des Seitentexts
   (.dpk-inhalt .wp-block-post-content > *, theme.css). */
.wp-block-post-content > .wp-block-group.is-style-eckdaten {
	margin-block: 8px 32px;
}

.wp-block-group.is-style-eckdaten > * {
	margin: 0;
	padding: 18px 20px;
	background: var(--wp--preset--color--karte);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 10px;
}

.is-style-eckdaten > * > * {
	margin: 0;
}

.is-style-eckdaten > * > :first-child {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--tinte);
}

.is-style-eckdaten > * > :not(:first-child) {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--grau);
}

/* ---------- Zitat auf hellem Gelb (Fläche mit Tinte) ---------- */

.wp-block-quote.is-style-zitat-gelb {
	margin: 0;
	padding: 22px 26px;
	background: var(--wp--custom--flaeche--zitat-gelb);
	border: 0;
	border-radius: 10px;
	color: var(--wp--preset--color--tinte);
}

.is-style-zitat-gelb p {
	margin: 0;
	font-family: "IBM Plex Serif", ui-serif, Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
}

.is-style-zitat-gelb cite {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--grau);
}

/* ---------- Zeitstrahl ----------
   Linke Spalte 112 px für die Jahre, dann die Linie (2 px), rechts Titel,
   Kurzfassung und der aufklappbare Text. Die Linie läuft am Container durch,
   jeder Punkt sitzt an seiner Kapitel-Zeile. */

.wp-block-group.is-style-zeitstrahl {
	--zs-jahre: 112px;
	--zs-luecke: 24px;
	--zs-linie: calc(var(--zs-jahre) + var(--zs-luecke));
	position: relative;
}

.wp-block-post-content > .wp-block-group.is-style-zeitstrahl {
	margin-block: 40px 48px;
}

.wp-block-group.is-style-zeitstrahl::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: calc(var(--zs-linie) - 1px);
	width: 2px;
	background: var(--wp--preset--color--linie);
}

.is-style-zeitstrahl > .is-style-kapitel-zeile {
	position: relative;
	display: grid;
	grid-template-columns: var(--zs-jahre) minmax(0, 1fr);
	column-gap: calc(2 * var(--zs-luecke));
	align-items: start;
	margin: 0;
	padding-bottom: 32px;
}

.is-style-zeitstrahl > .is-style-kapitel-zeile:last-child {
	padding-bottom: 0;
}

.is-style-kapitel-zeile > * {
	grid-column: 2;
	margin: 0;
}

/* Jahre: erstes Element der Zeile */
.is-style-kapitel-zeile > :first-child {
	grid-column: 1;
	grid-row: 1 / span 3;
	padding-top: 2px;
	text-align: right;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--tinte);
}

.is-style-kapitel-zeile > h3,
.is-style-kapitel-zeile > .wp-block-heading {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}

.is-style-kapitel-zeile > p:not(:first-child) {
	margin-top: 6px;
	font-size: 16px;
	line-height: 1.6;
}

.is-style-kapitel-zeile > .wp-block-details {
	margin-top: 4px;
}

/* Punkt auf der Linie: 14 px weiß mit Rand in Tinte; erstes und letztes
   Kapitel 18 px gelb gefüllt (Fläche, Rand in Tinte). */
.is-style-zeitstrahl > .is-style-kapitel-zeile::before {
	content: "";
	position: absolute;
	top: 5px;
	left: calc(var(--zs-linie) - 7px);
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--tinte);
	border-radius: 50%;
	background: var(--wp--preset--color--papier);
}

.is-style-zeitstrahl > .is-style-kapitel-zeile:first-child::before,
.is-style-zeitstrahl > .is-style-kapitel-zeile:last-child::before {
	top: 3px;
	left: calc(var(--zs-linie) - 9px);
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--klub);
}

/* ---------- Kapitel: „Ganzes Kapitel lesen“ / „Kapitel schließen“ ----------
   Der Text der Zusammenfassung kommt aus dem Editor; der Server legt ihn in
   .kapitel__zu und ergänzt .kapitel__auf („Kapitel schließen“). CSS zeigt je
   nach Zustand eins von beiden (display: none nimmt das andere auch aus der
   Vorlese-Ausgabe). */

.wp-block-details.is-style-kapitel > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--tinte);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.is-style-kapitel > summary::-webkit-details-marker {
	display: none;
}

.is-style-kapitel > summary::after {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	transition: transform 160ms ease;
}

.is-style-kapitel[open] > summary::after {
	transform: rotate(-135deg) translate(-0.1em, -0.1em);
}

.is-style-kapitel > summary:hover {
	text-decoration-thickness: 2px;
}

.is-style-kapitel > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--tinte);
	outline-offset: 3px;
	border-radius: 3px;
}

.is-style-kapitel .kapitel__auf,
.is-style-kapitel[open] .kapitel__zu {
	display: none;
}

.is-style-kapitel[open] .kapitel__auf {
	display: inline;
}

.is-style-kapitel[open] > summary {
	margin-bottom: 8px;
}

.is-style-kapitel > :not(summary) {
	font-size: 17px;
	line-height: 1.65;
}

.is-style-kapitel > p {
	margin: 0 0 1em;
}

@media (prefers-reduced-motion: reduce) {
	.is-style-kapitel > summary::after {
		transition: none;
	}
}

/* ---------- Handy: unter 700 px ----------
   Eckdaten untereinander. Jahre über dem Titel, die Linie bleibt links. */

@media (max-width: 699px) {
	.wp-block-group.is-style-eckdaten {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-group.is-style-zeitstrahl {
		--zs-linie: 9px;
	}

	.is-style-zeitstrahl > .is-style-kapitel-zeile {
		display: block;
		padding-left: 36px;
	}

	.is-style-kapitel-zeile > :first-child {
		padding-top: 0;
		text-align: left;
	}

	.is-style-kapitel-zeile > h3,
	.is-style-kapitel-zeile > .wp-block-heading {
		margin-top: 2px;
	}

	.is-style-zeitstrahl > .is-style-kapitel-zeile::before {
		top: 4px;
	}

	.is-style-zeitstrahl > .is-style-kapitel-zeile:first-child::before,
	.is-style-zeitstrahl > .is-style-kapitel-zeile:last-child::before {
		top: 2px;
	}
}