@charset "UTF-8";

/* Einleitung der Referenzen mit Zeitstrahl (FUF, Entwurf 10/2026), Aufbau aus landing/build_referenzen.py.
   Paul 03.10.: der lange Kasten mit 17 Zeilen Technikgeschichte "passt mir nicht", die Zeitpunkte waeren
   "sogar cool als Spezialelement"; von drei Varianten nahm er B (Zeitstrahl, Beschriftung abwechselnd oben
   und unten). Der Kasten erbt Abstaende, Grund und Schrift von .textbox-info (global-all.css und die
   responsiven Dateien), hier steht nur, was neu ist. Farben aus dem Bestand: Hellgruen #ABCF8E, Akzent #8aed00. */

body .textbox-info.chr {
	padding: 0;
	overflow: hidden;
}

/* Kopf: Titel links, Text rechts */
.chr-kopf {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 0 56px;
	align-items: start;
	padding: 40px 44px 36px 44px;
}

.chr-titel {
	margin: 0;
	font-family: lato-bold, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.75em;
	line-height: 1.22;
	letter-spacing: 0.005em;
	color: #FFFFFF;
}

.chr-text { margin: 0; }

/* Band mit dem Zeitstrahl, etwas dunkler als der Kasten */
.chr-band {
	position: relative;
	padding: 34px 44px 40px 44px;
	background-color: rgba(0,0,0,0.22);
}

/* Zeitstrahl: 11 Stationen auf 22 Spalten, Beschriftung abwechselnd oben (gerade) und unten (ungerade).
   Jede Beschriftung ist 4 Spalten breit und steht mittig ueber ihrer Station; Spalte und Lage des
   Verbindungsstrichs (--x) setzt das Build-Skript an jede Station. */
.zs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(22, minmax(0, 1fr));
	grid-template-rows: auto 36px auto;
}

.zs > li { display: contents; }

.zs::before {
	content: "";
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: center;
	height: 1px;
	background: linear-gradient(90deg, rgba(171,207,142,0.2), rgba(171,207,142,0.8) 4%, rgba(171,207,142,0.8) 97%, rgba(171,207,142,0.2));
}

.zs-lab { position: relative; padding: 0 8px; }
.zs-lab.oben { grid-row: 1; align-self: end; padding-bottom: 18px; }
.zs-lab.unten { grid-row: 3; align-self: start; padding-top: 18px; }
.zs-lab.links { text-align: left; }
.zs-lab.rechts { text-align: right; }
.zs-lab.mitte { text-align: center; }

.zs-lab::after {
	content: "";
	position: absolute;
	left: var(--x, 50%);
	width: 1px;
	height: 22px;
	background: rgba(171,207,142,0.45);
}

.zs-lab.oben::after { bottom: -11px; }
.zs-lab.unten::after { top: -11px; }

.zs-jahr {
	display: block;
	margin-bottom: 4px;
	font-family: lato-bold, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.45em;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: #8aed00;
}

.zs-e {
	display: block;
	font-size: 0.86em;
	line-height: 1.42;
	color: #E2E9DA;
	text-wrap: balance;
}

.zs-e + .zs-e { margin-top: 7px; }
/* 1996: "Eigene Software" einmal, darunter die vier Fachgebiete ohne Abstand */
.zs-e.zs-gruppe { color: #FFFFFF; }
.zs-e.zs-teil { margin-top: 0; color: #C9D6BC; }

/* Station: Messpunkt-Zeichen auf der Achse */
.zs-pkt {
	grid-row: 2;
	align-self: center;
	justify-self: center;
	position: relative;
	width: 13px;
	height: 13px;
	box-sizing: border-box;
	border: 1.5px solid #8aed00;
	border-radius: 50%;
	background: #243319;
}

.zs-pkt::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3px;
	height: 3px;
	margin: -1.5px 0 0 -1.5px;
	border-radius: 50%;
	background: #8aed00;
}

/* 1024 bis 1279 px: Beschriftung etwas kleiner und das Band mit weniger Rand, damit lange Woerter
   ("Bestandsmodellierungen") in ihre vier Spalten passen */
@media only screen and (min-width:1024px) and (max-width:1279px) {
	.chr-band { padding-left: 24px; padding-right: 24px; }
	.zs-lab { padding: 0 5px; }
	.zs-e { font-size: 0.8em; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 5 5; }
	.zs-jahr { font-size: 1.3em; }
}

/* Bis 1023 px: Kopf untereinander, der Zeitstrahl behaelt seine Breite und laesst sich seitlich wischen.
   Solange rechts noch etwas kommt, blendet der Rand aus (Klasse "am-ende" setzt das Skript im Band). */
@media only screen and (max-width:1023px) {
	.chr-kopf { display: block; padding: 6% 5% 5% 5%; }
	.chr-titel { margin-bottom: 14px; font-size: 1.45em; }
	.chr-band {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding: 30px 0 34px 0;
		-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
		mask-image: linear-gradient(90deg, #000 82%, transparent);
	}
	.chr-band.am-ende { -webkit-mask-image: none; mask-image: none; }
	.zs { width: 1060px; padding: 0 22px; box-sizing: content-box; }
}

@media only screen and (max-width:539px) {
	.chr-titel { font-size: 1.3em; }
}