/*
 * Waldbrand-Visualisierung - Gestaltung im Datenfreunde-Erscheinungsbild.
 *
 * Ersetzt das Stylesheet von 2013, das auf Bootstrap 3 und Font Awesome 3
 * aufsetzte und die Bedienelemente in dunkle, halbtransparente Kaesten legte.
 *
 * Farben, Schriften, Abstaende und Rahmenbreiten sind aus dem Design System der
 * Datenfreunde uebernommen: suva-df/datenfreunde-design-system, Datei
 * material/design-tokens.json. Namen und Werte absichtlich unveraendert, damit
 * ein spaeterer Abgleich mit dem Design System offensichtlich bleibt.
 *
 * Eine bewusste Abweichung: Das Design System zeichnet Buttons mit gelbem Rahmen
 * UND gelber Schrift. Hier liegen die Bedienelemente auf weissen Flaechen, wo
 * Gelb auf Weiss nur etwa 1,9:1 Kontrast erreicht und damit unlesbar waere.
 * Deshalb tragen Rahmen und Schrift Schwarz, und Gelb markiert ausschliesslich
 * den aktiven Zustand sowie die dekorative Linie.
 */

:root {
	/* --- Farben (Design System) --- */
	--color-black: #262626; /* Primaere Textfarbe, Navigation */
	--color-yellow: #f2c029; /* Marken-Akzentfarbe, Buttons, Borders */
	--color-blue: #65768c; /* Links, sekundaere Elemente */
	--color-blue-light: #8697a6; /* Hover-States, Highlights */
	--color-brown: #a69485; /* Footer-Hintergrund */
	--color-white: #ffffff; /* Hintergrund, helle Flaechen */
	--color-grey: #cccccc; /* Trennlinien, dekorative Elemente */

	/* --- Typografie (Design System) --- */
	--font-headline: 'Archivo', sans-serif;
	--font-body: 'Source Sans Pro', sans-serif;
	--font-weight-regular: 400;
	--font-weight-bold: 700;

	/* --- Abstaende und Rahmen (Design System) --- */
	--spacing-xs: 10px;
	--spacing-sm: 15px;
	--spacing-md: 30px;
	--border-width-btn: 3px;
	--border-width-deco: 4px;
	--shadow-card: 2px 2px 2px 1px rgba(0, 0, 0, 0.4);

	/* --- Anwendungsspezifisch, nicht Teil des Design Systems --- */
	/* Rot ausschliesslich fuer die Brandflaeche, nie als Bedienfarbe. */
	--fire-red: #BE1313;
	--map-backdrop: #EFEDEA;
	--code-backdrop: #F5F3F0;
	--panel-hover: #F7F5F2;
	--border: 1px solid var(--color-black);
	--shadow: var(--shadow-card);
	--gutter: 16px;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	/* Sicherung: waechst ein Element ueber die Fensterbreite hinaus, wird das
	 * Dokument breiter als das Fenster - und alles rechts Positionierte rutscht
	 * mit hinaus. Trat bei 400 Pixel Breite auf, weil Logo, Titel und Navigation
	 * in der Kopfzeile nicht nebeneinander passten. */
	overflow-x: hidden;
	background: var(--color-white);
	color: var(--color-black);
	font-family: var(--font-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--font-headline);
	margin: 0;
}

a {
	color: var(--color-black);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	text-decoration-color: var(--color-yellow);
	text-decoration-thickness: 3px;
}

/* ---------- Kopfzeile ---------- */

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 56px;
	z-index: 900;
	background: var(--color-white);
	border-bottom: 2px solid var(--color-black);
	display: flex;
	align-items: center;
	padding: 0 var(--gutter);
	gap: 12px;
	/* Der Titel darf schrumpfen und abgeschnitten werden, statt die Kopfzeile
	 * ueber die Fensterbreite zu schieben. */
	overflow: hidden;
}

/* Der Slash aus dem Datenfreunde-Logo als diagonaler Akzent. */
header::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: -2px;
	width: 120px;
	height: 2px;
	background: var(--color-yellow);
}

header .brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	text-decoration: none;
}

header .brand img {
	height: 26px;
	width: auto;
	display: block;
}

header .brand .slash {
	width: 2px;
	height: 24px;
	background: var(--color-black);
	transform: rotate(20deg);
}

header h1 {
	font-size: 17px;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* min-width: 0 ist noetig, damit ein Flex-Element unter seine
	 * Inhaltsbreite schrumpfen darf - ohne das greift text-overflow nicht. */
	flex: 1 1 auto;
	min-width: 0;
}

/* Archivo liegt nur im Schnitt 700 vor, ein staerkeres Gewicht liesse der
 * Browser kuenstlich fetten. Das Schluesselwort wird daher nicht ueber die
 * Strichstaerke hervorgehoben, sondern mit der dekorativen Linie des Design
 * Systems unterstrichen. */
header h1 .subject {
	border-bottom: var(--border-width-deco) solid var(--color-yellow);
	padding-bottom: 1px;
}

nav#nav {
	margin-left: auto;
	flex: 0 0 auto;
}

nav#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
}

nav#nav a {
	display: inline-block;
	padding: 5px 11px;
	font-size: 13px;
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	border: var(--border);
	background: var(--color-white);
	color: var(--color-black);
	white-space: nowrap;
}

nav#nav a:hover {
	background: var(--color-yellow);
}

/* ---------- Karte ---------- */

#main {
	position: absolute;
	top: 56px;
	left: 0;
	right: 0;
	bottom: 0;
}

#map-container {
	position: absolute;
	inset: 0;
}

#map {
	position: absolute;
	inset: 0;
	background: var(--map-backdrop);
}

#map.map-error {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	text-align: center;
	font-weight: var(--font-weight-bold);
}

/* ---------- Zustandsanzeige unten links ---------- */

#map-controls {
	position: absolute;
	left: var(--gutter);
	bottom: var(--gutter);
	z-index: 700;
	background: var(--color-white);
	border: 2px solid var(--color-black);
	box-shadow: var(--shadow);
	padding: 12px 14px 10px;
	min-width: 232px;
	/* Deckel nötig, seit die Zeitstrahl-Zusammenfassung im Kasten steht: ohne
	 * ihn zieht der Satz den Kasten in die Breite, bis er den mittig sitzenden
	 * Abspielknopf berührt. Bei 960 Pixel Fensterbreite trat das auf. */
	max-width: 320px;
}

#map-size {
	font-family: var(--font-headline);
	font-size: 25px;
	font-weight: var(--font-weight-bold);
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

#map-date {
	font-size: 13px;
	font-weight: var(--font-weight-bold);
	color: var(--color-blue);
	font-variant-numeric: tabular-nums;
	margin-top: 2px;
}

#fire-caption {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--color-grey);
	font-size: 12px;
	color: var(--color-blue);
}

#fire-region {
	display: block;
	font-weight: var(--font-weight-bold);
}

#fire-status {
	display: block;
	color: var(--color-blue);
}

/* ---------- Zeitstrahl ---------- */

/* Ersetzt den früheren Fortschrittsbalken, der rein nach abgespielten Bildern
 * füllte: jeder Schritt war gleich lang, ob zwischen zwei Aufnahmen 22 oder 49
 * Stunden lagen. Die Achse ist jetzt zeitproportional und beginnt beim
 * Brandausbruch, nicht bei der ersten Aufnahme — der Abstand dazwischen betrug
 * je Brand zwischen 20 und 106 Stunden und gehört ins Bild. */

#map-timeline {
	margin-top: var(--spacing-xs);
}

/* Seitliche Einrückung, damit Marken an den Enden der Achse nicht halb
 * abgeschnitten werden. */
#timeline-track {
	position: relative;
	height: 14px;
	margin: 0 5px 3px;
}

/* Grundlinie. */
#timeline-track::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 5px;
	height: 4px;
	background: var(--color-grey);
}

/* Zeitraum zwischen Brandausbruch und erster Satellitenaufnahme: schraffiert,
 * weil dort nichts kartiert ist und die Animation ihn nicht zeigen kann. */
#timeline-unmapped {
	position: absolute;
	left: 0;
	top: 5px;
	height: 4px;
	width: 0;
	background: repeating-linear-gradient(
		135deg,
		var(--color-blue-light) 0 2px,
		transparent 2px 4px
	);
}

#timeline-elapsed {
	position: absolute;
	top: 5px;
	height: 4px;
	width: 0;
	background: var(--fire-red);
	transition: width 90ms linear, left 90ms linear;
}

/* Eine Marke je Satellitenaufnahme — die Abstände zeigen, wie dicht kartiert
 * wurde. */
.timeline-tick {
	position: absolute;
	top: 1px;
	width: 2px;
	height: 12px;
	margin-left: -1px;
	background: var(--color-black);
}

.timeline-tick.outbreak {
	width: 0;
	height: 0;
	top: 2px;
	margin-left: -4px;
	background: none;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 7px solid var(--color-black);
}

#timeline-head {
	position: absolute;
	top: 0;
	width: 2px;
	height: 14px;
	margin-left: -1px;
	background: var(--color-black);
	box-shadow: 0 0 0 2px var(--color-white);
	transition: left 90ms linear;
}

#timeline-scale {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 10px;
	font-weight: var(--font-weight-bold);
	color: var(--color-blue);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

#timeline-summary {
	font-size: 11px;
	color: var(--color-blue);
	margin-top: 2px;
}

/* ---------- Abspielknopf ---------- */

/* Unten mittig statt in der Kartenmitte: dort verdeckte der Knopf nach dem
 * Ablauf genau die Brandflaeche, um die es geht. */
#map-startstop {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 750;
	height: 44px;
	padding: 0 20px 0 17px;
	border-radius: 22px;
	background: var(--color-white);
	border: 2px solid var(--color-black);
	box-shadow: var(--shadow);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-headline);
	font-size: 12px;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-black);
	transition: background 120ms ease, opacity 200ms ease;
}

#map-startstop:hover {
	background: var(--color-yellow);
}

/* Waehrend des Ablaufs zurueckhaltend, damit die Flaeche im Vordergrund steht. */
#map-container.playing #map-startstop {
	opacity: 0.35;
}

#map-container.playing #map-startstop:hover {
	opacity: 1;
}

#map-startstop .glyph {
	display: block;
	width: 0;
	height: 0;
	border-left: 14px solid var(--color-black);
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}

/* Waehrend des Ablaufs wird der Knopf zur Pause. */
#map-container.playing #map-startstop .glyph {
	width: 12px;
	height: 16px;
	border: 0;
	border-left: 4px solid var(--color-black);
	border-right: 4px solid var(--color-black);
}

/* ---------- Auswahlblöcke rechts ---------- */

.panel-stack {
	position: absolute;
	right: var(--gutter);
	top: var(--gutter);
	bottom: var(--gutter);
	z-index: 700;
	width: 186px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
	pointer-events: none;
}

.panel-stack > * {
	pointer-events: auto;
}

#map-fires,
#map-compare {
	background: var(--color-white);
	border: 2px solid var(--color-black);
	box-shadow: var(--shadow);
	padding: 10px 12px 12px;
	flex: 0 0 auto;
}

/* Der Brand-Block behaelt seine Hoehe, die Staedteliste gibt nach. Ohne das
 * wuchs der Vergleichsblock ueber die Kartenhoehe hinaus und schob sich in
 * Herkunftsangabe und Abspielknopf — auf einer 540 Pixel hohen Karte war
 * "Manhattan" nur nach unentdecktem Scrollen erreichbar.
 * min-height: 0 ist dabei entscheidend: ohne diese Angabe schrumpft ein
 * Flex-Element nicht unter die Hoehe seines Inhalts. */
#map-compare {
	flex: 0 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

#map-compare ul {
	overflow-y: auto;
	min-height: 0;
}

#map-fires h2,
#map-compare h2 {
	font-size: 11px;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-bottom: 7px;
	color: var(--color-blue);
}

#map-fires ul,
#map-compare ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

#map-fires a,
#map-compare a {
	display: block;
	padding: 5px 8px;
	font-size: 13px;
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	border: 1px solid var(--color-grey);
	background: var(--color-white);
	color: var(--color-black);
}

#map-fires a:hover,
#map-compare a:hover {
	border-color: var(--color-black);
	background: var(--panel-hover);
}

#map-fires a.highlight {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}

#map-compare a.highlight {
	background: var(--color-yellow);
	border-color: var(--color-black);
}

/* ---------- Überlagerungen ---------- */

.overlay {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 950;
	width: min(620px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	overflow-y: auto;
	background: var(--color-white);
	border: 2px solid var(--color-black);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.28);
	padding: 24px 26px;
}

#main.show-info #info,
#main.show-share #share {
	display: block;
}

.overlay h2 {
	font-size: 20px;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 10px;
}

.overlay h3 {
	font-size: 13px;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 20px 0 6px;
	padding-top: 12px;
	border-top: 1px solid var(--color-grey);
}

.overlay p {
	margin: 0 0 10px;
	font-size: 14px;
}

.overlay dl {
	margin: 0 0 10px;
	font-size: 14px;
}

.overlay dt {
	font-weight: var(--font-weight-bold);
	margin-top: 8px;
}

.overlay dd {
	margin: 0;
	color: var(--color-blue);
}

/* Standardmaessig im Fluss, damit ein Satzzeichen nach einem Code-Schnipsel
 * nicht in die naechste Zeile rutscht. */
.overlay code {
	padding: 1px 5px;
	background: var(--code-backdrop);
	border: 1px solid var(--color-grey);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.86em;
	white-space: nowrap;
}

/* Nur der Einbettungs-Schnipsel steht als eigener Block. */
.overlay code.snippet {
	display: block;
	margin: 0 0 12px;
	padding: 10px 12px;
	font-size: 12px;
	word-break: break-all;
	white-space: pre-wrap;
}

.btn-close {
	display: inline-block;
	margin-top: 6px;
	padding: 8px 18px;
	background: var(--color-black);
	color: var(--color-white);
	border: 2px solid var(--color-black);
	font-weight: var(--font-weight-bold);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.btn-close:hover {
	background: var(--color-yellow);
	color: var(--color-black);
}

.share-buttons ul {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Bewusst auf die Liste eingegrenzt: unbegrenzt wuerde diese Regel auch den
 * Schliessen-Knopf im selben Kasten treffen, dessen weisse Schrift dann auf
 * weissem Grund unsichtbar wird. */
.share-buttons ul a {
	display: inline-block;
	padding: 7px 14px;
	border: var(--border);
	background: var(--color-white);
	color: var(--color-black);
	font-size: 13px;
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}

.share-buttons ul a:hover {
	background: var(--color-yellow);
}

/* ---------- Eingebettete Darstellung ---------- */

html.in-frame header,
html.in-frame nav#nav {
	display: none;
}

html.in-frame #main {
	top: 0;
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 720px) {
	header h1 {
		font-size: 14px;
	}

	.panel-stack {
		right: 8px;
		top: 8px;
		width: 148px;
		bottom: auto;
		max-height: calc(100% - 130px);
	}

	#map-size {
		font-size: 21px;
	}

	/* Abspielknopf und Zustandsanzeige teilen sich die untere Kante: der Knopf
	 * rechts, die Anzeige links daneben. Vorher stand der Knopf mittig und die
	 * Anzeige spannte sich über die volle Breite — beide lagen uebereinander,
	 * die Beschriftung war nicht mehr lesbar. Aufgefallen im Hochformat-Beispiel
	 * mit 400 Pixel Breite.
	 *
	 * Der Abstand von 24 Pixel zur Unterkante laesst die Herkunftsangabe von
	 * Leaflet frei. Leaflet legt sie auf eine hoehere Stapelebene, ein
	 * Ueberlappen liesse sich also nicht durch z-index loesen - und verdecken
	 * darf man sie ohnehin nicht. */
	#map-controls {
		left: 8px;
		right: auto;
		bottom: 24px;
		min-width: 0;
		max-width: calc(100% - 176px);
	}

	#map-startstop {
		left: auto;
		right: 8px;
		bottom: 24px;
		transform: none;
		height: 38px;
		padding: 0 15px 0 13px;
		font-size: 11px;
		gap: 8px;
	}

	/* Die Auswahlbloecke duerfen die Karte nicht vollstaendig zudecken. Reicht
	 * die Hoehe nicht, wird in ihnen gescrollt. */
	.panel-stack {
		max-height: calc(100% - 108px);
	}
}

/* Sehr schmale Rahmen: die Staedteliste wird zur eigenen scrollenden Flaeche,
 * damit der Auswahlblock fuer die Braende immer sichtbar bleibt. */
@media (max-width: 460px) {
	/* Bei dieser Breite bleibt kein Platz fuer Logo, Titel und Navigation. Der
	 * Titel entfaellt - er steht ohnehin im Browser-Tab. */
	header h1 {
		display: none;
	}

	.panel-stack {
		width: 132px;
	}

	#map-controls {
		max-width: calc(100% - 156px);
	}

	#map-size {
		font-size: 18px;
	}

	#map-fires,
	#map-compare {
		padding: 8px 9px 9px;
	}

	/* „Größenvergleich" passt mit der weiten Laufweite nicht in die schmale
	 * Spalte und wurde abgeschnitten. */
	#map-fires h2,
	#map-compare h2 {
		letter-spacing: 0.04em;
		font-size: 10px;
	}

	#map-fires a,
	#map-compare a {
		padding: 4px 6px;
		font-size: 12px;
	}

}

/* Leaflet-Angaben an das Erscheinungsbild anpassen. */
.leaflet-container {
	font-family: var(--font-body);
	background: var(--map-backdrop);
}

/* Leaflet legt seine Bedienelemente auf Stapelebene 1000 und damit über die
 * eigenen Kästen. Die Herkunftsangabe soll aber nicht verdeckt werden, sondern
 * neben den Kästen Platz finden — deshalb wird sie hier auf eine Breite
 * begrenzt, in der sie einzeilig bleibt, statt sie zu überdecken. */
.leaflet-control-attribution {
	background: rgba(255, 255, 255, 0.92) !important;
	font-size: 10px !important;
	line-height: 1.5 !important;
	color: var(--color-blue);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.leaflet-control-attribution a {
	color: var(--color-blue);
}

.leaflet-bar a {
	color: var(--color-black) !important;
}