/*
 * GP Project Recap – Styles
 * Design-Tokens siehe docs/DESIGN_TOKENS.md. Eigener Namespace .gppr-*,
 * kein Ueberschreiben von fusion-*-Klassen. Farben leiten sich mit Fallback
 * von --awb-* Avada-Variablen ab, damit Theme-Updates das Modul nicht brechen.
 */

.gppr-recap {
	--gppr-text-dark: var(--awb-color, #2b2b2b);
	--gppr-accent-gold: #d9b96f;
	/*
	 * Erfolgsgruen. Das fruehere #57685c war nicht zu dunkel, sondern zu
	 * unbunt: Buntheit C* 10,2 gegenueber C* 41,7 beim Gold - neben der
	 * Markenfarbe wirkte es wie ein Graugruen. #057441 hat mit C* 45,2
	 * die vergleichbare Sattheit des Golds, bleibt mit Farbwinkel 157 Grad
	 * aber klar davon getrennt (Gold: 87 Grad).
	 * Kontrast nachgerechnet: 4,60:1 auf der Kartenflaeche #e4e4e0 und
	 * 5,86:1 auf Weiss - beides ueber WCAG AA (4,5:1) und praktisch
	 * unveraendert gegenueber dem alten Ton (4,65 / 5,93).
	 */
	--gppr-success-green: #057441;
	--gppr-bg-light: #f5f5f5;
	--gppr-card-bg: #ffffff;
	--gppr-map-base: #e4e4e0;
	--gppr-border-muted: #d9d9d9;
	--gppr-low-confidence: #b8b0a0;
	--gppr-font: var(--awb-typography4-font-family, "Open Sans", Arial, Helvetica, sans-serif);
	--gppr-radius-card: 8px;
	--gppr-shadow-card: 0 4px 16px rgba(43, 43, 43, 0.12);

	box-sizing: border-box;
	font-family: var(--gppr-font);
	color: var(--gppr-text-dark);
	max-width: 100%;
	/* Kein eigener Aussenabstand: das Modul ist ein reines Embed, den
	   vertikalen Rhythmus (Abstand zu Ueberschrift und Folgeinhalt)
	   bestimmt die einbindende Seite bzw. der Avada-Container. */
	margin: 0;
}

.gppr-recap *,
.gppr-recap *::before,
.gppr-recap *::after {
	box-sizing: inherit;
}

/*
 * Ueberschriften und Einleitungstexte pflegt die Website selbst - das Modul
 * beginnt direkt mit der Steuerung. Einziger eigener Text: der Status-
 * Hinweis bei vorlaeufigen Daten, als eigenstaendiger, zentrierter Block.
 */
.gppr-preliminary-note {
	display: block;
	width: fit-content;
	margin: 0 auto 1.25em;
	padding: 0.4em 0.9em;
	background: var(--gppr-bg-light);
	border: 1px solid var(--gppr-border-muted);
	border-radius: var(--gppr-radius-card);
	font-size: 0.85em;
	text-align: center;
}

.gppr-empty-state {
	text-align: center;
	padding: 2em;
	background: var(--gppr-bg-light);
	border-radius: var(--gppr-radius-card);
}

/* Steuerung */

.gppr-controls {
	display: flex;
	gap: 0.75em;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 1.5em;
}

/* Ohne JS bleibt die Steuerung serverseitig hidden; display auf der
   Klasse wuerde das Attribut sonst aushebeln. */
.gppr-controls[hidden] {
	display: none;
}

/*
 * Buttons: min-height 44px erfuellt den Touch-Richtwert (Apple HIG).
 * Der Ghost-Button hebt sich mit Gewicht 600 und weicherem Rand vom
 * Browser-Default ab; der Primaer-CTA dunkelt im Hover das Markengold ab,
 * statt hart auf Schwarz zu kippen. border-color steht in der
 * transition-Liste, weil der Hover sie jetzt tatsaechlich aendert.
 */
.gppr-recap .gppr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 0.95em;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.6em 1.6em;
	min-height: 44px;
	border-radius: 999px;
	border: 1px solid rgba(43, 43, 43, 0.45);
	background: transparent;
	color: var(--gppr-text-dark);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* display auf der Klasse wuerde sonst das hidden-Attribut aushebeln
   (Author-CSS schlaegt die display:none-Regel des Browsers) - Play und
   Pause werden aber genau darueber umgeschaltet. */
.gppr-recap .gppr-btn[hidden] {
	display: none;
}

.gppr-recap .gppr-btn:hover,
.gppr-recap .gppr-btn:focus-visible,
.gppr-recap .gppr-btn:active {
	background: var(--gppr-text-dark);
	border-color: var(--gppr-text-dark);
	color: #fff;
}

/* Play und Pause gleich breit halten, damit beim Umschalten
   (toggleButtons) kein Zeilenumbruch-Wechsel und kein Layout-Sprung
   entsteht - "Animation wiederholen" bliebe sonst unter dem Finger nicht
   an seinem Platz. 12.5em = gemessene Breite von "Animation starten"
   inkl. Padding 1.6em plus Reserve. */
.gppr-recap .gppr-btn-play,
.gppr-recap .gppr-btn-pause {
	min-width: 12.5em;
}

/* Primaer-CTA: Hover dunkelt das Markengold ab (#c9a55c, Kontrast zu
   #2b2b2b: 6,1:1, ueber WCAG AA). Die Border laeuft mit, damit kein
   goldener Restrand auf der dunkleren Fuellung stehen bleibt. */
.gppr-recap .gppr-btn-play {
	background: var(--gppr-accent-gold);
	border-color: var(--gppr-accent-gold);
	color: var(--gppr-text-dark);
	box-shadow: 0 1px 2px rgba(43, 43, 43, 0.15);
}

.gppr-recap .gppr-btn-play:hover,
.gppr-recap .gppr-btn-play:focus-visible,
.gppr-recap .gppr-btn-play:active {
	background: #c9a55c;
	border-color: #c9a55c;
	color: var(--gppr-text-dark);
	box-shadow: 0 2px 6px rgba(43, 43, 43, 0.18);
}

/*
 * Fokus-Indikator: dunkle Outline statt Gold - Gold #d9b96f erreicht auf
 * Weiss nur ~1,9:1 und war als Fokusring kaum zu sehen (WCAG 2.4.11
 * verlangt 3:1). Der goldene Halo bleibt als Markenakzent auf
 * HTML-Elementen erhalten (auf SVG wirkt box-shadow nicht, dort traegt
 * die dunkle Outline allein).
 */
.gppr-recap :focus-visible {
	outline: 3px solid var(--gppr-text-dark);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(217, 185, 111, 0.35);
}

/*
 * Schnelle Doppeltipps (Play -> Pause -> Play) duerfen auf iOS keinen
 * Doppeltipp-Zoom ausloesen; das graue Android-Tap-Rechteck ersetzt der
 * jeweilige :active-Zustand.
 */
.gppr-btn,
.gppr-table-fallback summary,
.gppr-card-close,
.gppr-card-link,
.gppr-table a,
.gppr-marker {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Karte */

.gppr-map-wrap {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
}

.gppr-map-container {
	width: 100%;
	/* exakt die viewBox der Bundeslaender-Karte, damit nichts verzerrt */
	aspect-ratio: 1488.59 / 1981.51;
	position: relative;
}

.gppr-map-svg {
	width: 100%;
	height: 100%;
	display: block;
}

.gppr-map-outline {
	fill: var(--gppr-map-base);
	stroke: var(--gppr-border-muted);
	stroke-width: 1.5;
}

/*
 * Bundeslaender-Karte: die SVG liefert je Bundesland zwei Pfade -
 * "land" ist die Flaeche, "shade" die daruntergelegte Kante, die den
 * Grenzverlauf sichtbar macht. Beide Farben kommen bewusst aus den
 * Plugin-Variablen und nicht aus der SVG-Datei, damit sich die Karte
 * ins Website-Design einfuegt.
 */
.gppr-map-land {
	fill: var(--gppr-map-base);
}

.gppr-map-shade {
	fill: var(--gppr-border-muted);
}

.gppr-live-region {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Marker */

.gppr-marker {
	cursor: pointer;
}

.gppr-marker-dot {
	fill: var(--gppr-accent-gold);
	stroke: var(--gppr-card-bg);
	stroke-width: 5;
}

/*
 * Pin-Aufbau (Masse in gppr-recap.js, MARKER_GEOMETRIE):
 * Spitze am exakten Standort, Nadel senkrecht zum Kopf mit
 * Fortschrittsring, dahinter die zweizeilige Beschriftung. Der Pin baut
 * nach oben - oder, wenn dort ein Nachbarpin steht, nach unten.
 *
 * Die Strichstaerken sind mit den Markermassen mitgewachsen (Faktor 46/28),
 * sonst wirkten die groesseren Formen duenn umrandet.
 */
.gppr-marker-tip {
	fill: var(--gppr-text-dark);
}

.gppr-marker-stem {
	stroke: var(--gppr-text-dark);
	stroke-width: 5;
	stroke-linecap: round;
}

.gppr-marker-head {
	fill: var(--gppr-card-bg);
	stroke: var(--gppr-border-muted);
	stroke-width: 3;
}

/*
 * Unsichtbare Trefferflaeche ueber dem ganzen Marker. SVG-Text hat sonst
 * keine zusammenhaengende Klickflaeche - man muesste exakt einen Buchstaben
 * treffen. Groesse wird zur Laufzeit gemessen (setzeTrefferflaeche).
 */
.gppr-marker-hit {
	fill: transparent;
	/* stroke ausdruecklich abschalten: sonst erbt das Rechteck die Kontur
	   benachbarter Marker-Regeln und wird als Rahmen sichtbar. */
	stroke: none;
	cursor: pointer;
}

/*
 * Beschriftung: weisse Kontur hinter der Schrift (paint-order), damit der
 * Text auf jedem Bundesland-Farbton lesbar bleibt, ohne dass ein Kasten
 * die Karte zerschneidet. Die Fuellfarbe wird zur Laufzeit von Gold nach
 * Gruen animiert (animateLabelColour), der Startwert steht hier.
 *
 * Kein pointer-events: none mehr - die Schrift oeffnet die Projektkarte
 * genauso wie der Pin.
 */
.gppr-marker-label {
	fill: var(--gppr-accent-gold);
	stroke: var(--gppr-card-bg);
	stroke-width: 9;
	paint-order: stroke fill;
	stroke-linejoin: round;
	font-family: var(--gppr-font);
	cursor: pointer;
}

.gppr-marker-label-name {
	font-size: 50px;
	font-weight: 700;
}

.gppr-marker-label-kwp {
	font-size: 42px;
	font-weight: 400;
}

/*
 * Auf schmalen Bildschirmen schrumpft die Karte auf rund 315 px, der
 * Massstab faellt damit auf 0,21. Die Leistungszeile laege dann bei knapp
 * 9 px und waere kaum noch lesbar - deshalb wachsen beide Zeilen in
 * SVG-Einheiten mit, damit sie in echten Pixeln gleich gross bleiben.
 */
@media (max-width: 480px) {
	/* Bei 320px Viewport bleibt nach Seitenpadding nur ~288px Kartenbreite
	   (Massstab 0,19) - erst 66/58 SVG-Einheiten halten beide Zeilen ueber
	   der Lesbarkeitsuntergrenze von ~11px echten Pixeln. */
	.gppr-marker-label-name {
		font-size: 66px;
	}

	.gppr-marker-label-kwp {
		font-size: 58px;
	}
}

/*
 * Noch nicht gestartete Marker sind nicht nur unsichtbar, sondern auch
 * nicht bedienbar: opacity allein liesse vier unsichtbare, fokussierbare
 * Touch-Ziele auf der scheinbar leeren Karte zurueck (Tab-Fokus im
 * Nichts, Bottom-Sheet beim Tipp auf leere Flaeche). visibility: hidden
 * nimmt Hit-Testing und Fokus heraus; eine Transition existiert nicht,
 * der Wechsel auf "entering" sieht daher exakt aus wie bisher.
 */
.gppr-marker[data-state="upcoming"] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.gppr-marker[data-state="entering"] .gppr-marker-dot,
.gppr-marker[data-state="under_construction"] .gppr-marker-dot {
	fill: var(--gppr-accent-gold);
}

.gppr-marker[data-state="completed"] .gppr-marker-dot {
	fill: var(--gppr-success-green);
}

/*
 * Haekchen-Icon: macht "am Netz" auch ohne Farbwahrnehmung erkennbar
 * (Anforderung aus docs/TECHNICAL_SPEC.md, Marker-Zustand 4, und
 * WCAG 1.4.1 "Use of Color"). Standardmaessig ausgeblendet.
 */
.gppr-marker-check {
	stroke: var(--gppr-card-bg);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
}

.gppr-marker[data-state="completed"] .gppr-marker-check {
	opacity: 1;
}

.gppr-marker[data-state="completed_low_confidence"] .gppr-marker-dot {
	fill: var(--gppr-low-confidence);
	stroke-dasharray: 3 2;
}

.gppr-marker[data-state="excluded_no_start_date"] .gppr-marker-dot {
	fill: none;
	stroke: var(--gppr-low-confidence);
	stroke-dasharray: 2 2;
}

.gppr-marker-ring {
	fill: none;
	stroke: var(--gppr-accent-gold);
	stroke-width: 10;
	stroke-linecap: round;
	transform: rotate(-90deg);
	/*
	 * transform-box: fill-box ist hier zwingend. Ohne die Angabe gilt bei
	 * SVG-Elementen der Vorgabewert view-box, "center" waere dann die Mitte
	 * der gesamten Karte statt die des Rings - der Ring wuerde beim Drehen
	 * quer ueber die Karte wandern. Gilt genauso fuer den Punkt, dessen
	 * Pop-Effekt mit scale() arbeitet.
	 */
	transform-box: fill-box;
	transform-origin: center;
}

.gppr-marker-dot {
	transform-box: fill-box;
	transform-origin: center;
}

.gppr-marker[data-state="completed"] .gppr-marker-ring {
	stroke: var(--gppr-success-green);
}

/* Zeitleiste */

/*
 * Aufbau von oben nach unten: Schiene (der noch offene Rest des Jahres),
 * darauf die goldene Fortschrittsspur, darauf der Zeiger, darunter die
 * Monatsbeschriftung.
 *
 * Wichtig: Auf dem Container steht bewusst KEIN opacity mehr. Das frühere
 * opacity: 0.75 wirkte zwangsläufig auch auf den Zeiger und war die
 * Hauptursache dafür, dass er kaum zu sehen war - ein Kind kann die
 * Deckkraft des Elternelements nicht zurücknehmen. Die Dämpfung sitzt
 * jetzt gezielt auf den Monatsnamen.
 */
.gppr-timeline {
	/* Vier Stellschrauben, der Rest rechnet sich daraus. */
	--gppr-tl-top: 9px;    /* Abstand der Schiene von oben */
	--gppr-tl-rail: 6px;   /* Dicke von Schiene und Fortschrittsspur */
	--gppr-tl-head: 18px;  /* Höhe des Zeigers */
	--gppr-tl-labels: calc(var(--gppr-tl-top) + var(--gppr-tl-rail) + 10px);

	position: relative;
	/* Zwölf exakt gleich breite Spalten - nur so steht jeder Monatsname
	   maßstabsgetreu unter der Position, die der Zeiger anzeigt.
	   minmax(0, 1fr) verhindert, dass ein breiteres Label seine Spalte
	   aufweitet und damit die Skala verzieht. */
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	max-width: 620px;
	margin: 1.75em auto 0;
	padding: var(--gppr-tl-labels) 0 0;
	font-size: 0.8em;
	line-height: 1.25;
}

/* Grundschiene: der noch offene Teil des Jahres. Der Farbwert entspricht
   genau dem bisherigen --gppr-border-muted, ist also nicht blasser als
   die Haarlinie, die er ablöst - nur dicker und damit lesbar als Bahn. */
.gppr-timeline::before {
	content: "";
	position: absolute;
	top: var(--gppr-tl-top);
	left: 0;
	right: 0;
	height: var(--gppr-tl-rail);
	border-radius: 999px;
	background: rgba(43, 43, 43, 0.18);
}

/* Bereits vergangener Teil des Jahres, in der Markenfarbe. Eigenes
   Element statt eines überbreiten Pseudo-Elements: so wird nichts
   abgeschnitten und die Monatsnamen bleiben unangetastet. */
.gppr-timeline-progress {
	position: absolute;
	top: var(--gppr-tl-top);
	left: 0;
	width: var(--gppr-tl-progress, 0%);
	height: var(--gppr-tl-rail);
	border-radius: 999px;
	background: var(--gppr-accent-gold);
	transition: width 0.08s linear;
}

/* Zeiger: kräftiger Griff statt 2px-Haarlinie, in der Textfarbe statt
   in Gold. Gold auf Weiß erreicht nur 1,89:1 und war schlicht nicht zu
   sehen. Der weiße Saum trennt den Griff sauber von Schiene und Spur. */
.gppr-timeline-playhead {
	position: absolute;
	top: calc(var(--gppr-tl-top) - (var(--gppr-tl-head) - var(--gppr-tl-rail)) / 2);
	left: 0;
	width: 4px;
	height: var(--gppr-tl-head);
	margin-left: -2px;
	border-radius: 2px;
	background: var(--gppr-text-dark);
	box-shadow: 0 0 0 2px var(--gppr-card-bg);
	transition: left 0.08s linear;
}

.gppr-timeline-month {
	text-align: center;
	white-space: nowrap;
	/* Echtes Sekundaergrau statt opacity: rendert schaerfer und ist
	   unabhaengig vom Seitenhintergrund - derselbe Ton wie bei den
	   Kennzahlen-Labels und der dt-Spalte der Projektkarte. */
	color: #6b6b6b;
	letter-spacing: 0.02em;
}

@media (max-width: 480px) {
	.gppr-timeline {
		--gppr-tl-top: 8px;
		--gppr-tl-rail: 5px;
		--gppr-tl-head: 15px;
		font-size: 0.7em;
	}
}

/* Ganz schmale Geraete: jeden zweiten Monat ausblenden statt die Schrift
   weiter zu verkleinern. visibility erhaelt die Grid-Spalte - die Skala
   bleibt massstabsgetreu, angezeigt werden Jan/Mär/Mai/Jul/Sep/Nov. */
@media (max-width: 359px) {
	.gppr-timeline-month:nth-child(even) {
		visibility: hidden;
	}
}

/* Stats */

/*
 * Ruhige Hairline-Gruppierung im Stil eines Geschaeftsberichts: der
 * 1px-gap auf grauem Grund erzeugt die Trennlinien. Das verlangt immer
 * VOLLE Zeilen, deshalb feste Spaltenzahlen 4/2/1 statt auto-fit -
 * auto-fit liesse bei mittleren Breiten 3 Spalten mit 2 leeren grauen
 * Zellen entstehen.
 */
.gppr-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--gppr-border-muted);
	border: 1px solid var(--gppr-border-muted);
	border-radius: var(--gppr-radius-card);
	overflow: hidden;
	max-width: 900px;
	margin: 2.5em auto 0;
	text-align: center;
}

.gppr-stat {
	background: var(--gppr-card-bg);
	padding: 1.4em 1em 1.2em;
}

.gppr-stat-value {
	display: block;
	font-size: 2.1em;
	line-height: 1.15;
	font-weight: 700;
	color: var(--gppr-success-green);
	/* Ziffern gleich breit: verhindert Springen waehrend der
	   Zaehl-Animation (data-gppr-count-to) */
	font-variant-numeric: tabular-nums;
}

.gppr-stat-label {
	display: block;
	font-size: 0.82em;
	/* bewusstes Grau statt opacity: 5,3:1 auf Weiss, WCAG AA */
	color: #6b6b6b;
	margin-top: 0.35em;
	line-height: 1.4;
}

/* 2 Spalten auf Handys, 1 Spalte erst ganz schmal - immer volle Zeilen,
   keine Leerzellen. */
@media (max-width: 640px) {
	.gppr-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 359px) {
	.gppr-stats {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gppr-stats-empty {
	text-align: center;
	opacity: 0.7;
	margin-top: 2em;
}

/* Projekt-Card / Tooltip (Desktop) */

/*
 * Hairline-Kante + zweistufiger Schatten: schliesst die weisse Flaeche
 * auf der hellgrauen Karte praezise ab, statt am Rand zu verschwimmen.
 */
.gppr-project-card {
	position: absolute;
	z-index: 20;
	max-width: 300px;
	background: var(--gppr-card-bg);
	border: 1px solid rgba(43, 43, 43, 0.08);
	border-radius: var(--gppr-radius-card);
	box-shadow: 0 2px 6px rgba(43, 43, 43, 0.07), 0 12px 32px rgba(43, 43, 43, 0.14);
	padding: 1.1em 1.25em 1.2em;
	font-size: 0.9em;
}

/* padding-right reserviert Platz fuer das 44px-Schliessen-Ziel - lange
   Projektnamen laufen sonst unter das Kreuz. */
.gppr-recap .gppr-project-card h3 {
	margin: 0 0 0.5em;
	font-size: 1.1em;
	padding-right: 2.4em;
}

.gppr-project-card dl {
	margin: 0.6em 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3em 1em;
}

.gppr-project-card dt {
	color: #6b6b6b;
}

.gppr-project-card dd {
	margin: 0;
	font-weight: 600;
}

/* Link mit goldener Unterstreichung als Markenakzent; min-height 44px
   macht ihn am Daumen treffbar (das Bottom-Sheet ist sein Hauptort). */
.gppr-recap .gppr-project-card a.gppr-card-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 0.2em;
	color: var(--gppr-text-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--gppr-accent-gold);
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s ease;
}

.gppr-recap .gppr-project-card a.gppr-card-link:hover,
.gppr-recap .gppr-project-card a.gppr-card-link:focus-visible {
	text-decoration-color: var(--gppr-text-dark);
}

/*
 * Schliessen-Kreuz: 44x44px Trefferflaeche (Apple HIG; vorher ~18x25px,
 * unter dem WCAG-2.5.8-Minimum von 24px). Die Glyphe bleibt dezent
 * zentriert; die Kreisform haelt den Fokusring kompakt, statt als
 * Rechteck ueber der Titelzeile zu liegen. font-family/color: inherit,
 * weil Buttons beides nicht erben (das Kreuz lief sonst in
 * Browser-Default statt Open Sans / Textfarbe).
 */
.gppr-card-close {
	position: absolute;
	top: 0.15em;
	right: 0.15em;
	min-width: 44px;
	min-height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	background: none;
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: 1.25em;
	line-height: 1;
	color: inherit;
	opacity: 0.7;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.gppr-card-close:hover,
.gppr-card-close:focus-visible {
	background: var(--gppr-bg-light);
	opacity: 1;
}

/* Mobile: Bottom-Sheet statt Tooltip */

@media (max-width: 767px) {
	.gppr-project-card {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		max-width: none;
		width: 100%;
		border-radius: var(--gppr-radius-card) var(--gppr-radius-card) 0 0;
		box-shadow: 0 -4px 20px rgba(43, 43, 43, 0.18);
		/* safe-area: haelt den "Projekt ansehen"-Link aus der
		   Home-Indicator-Gestenzone von iPhones heraus. Faellt auf
		   Geraeten ohne Inset auf den bisherigen Wert zurueck. */
		padding: 1.6em 1.2em calc(1.6em + env(safe-area-inset-bottom, 0px));
		/* Landscape-Handys (~360px hoch): Sheet begrenzen und innen
		   scrollen lassen, statt die ganze Karte zu verdecken. */
		max-height: 75vh;
		max-height: 75dvh;
		overflow-y: auto;
	}

	/* Grabber: signalisiert "Overlay, schliessbar" - reine Optik, das
	   Schliessen uebernehmen Kreuz und Aussen-Tipp. */
	.gppr-project-card::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 36px;
		height: 4px;
		border-radius: 999px;
		background: var(--gppr-border-muted);
	}
}

/* Tabellen-Fallback */

.gppr-table-fallback {
	max-width: 900px;
	margin: 2.5em auto 0;
}

/*
 * Summary: auf die Mittelachse des Moduls gesetzt (alles andere ist
 * zentriert), eigenes goldenes Chevron statt Browser-Dreieck,
 * min-height 44px als Touch-Ziel.
 */
.gppr-table-fallback summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: fit-content;
	margin: 0 auto;
	min-height: 44px;
	padding: 0.5em 1.25em;
	font-weight: 600;
	cursor: pointer;
	border-radius: 999px;
	transition: background-color 0.2s ease;
}

.gppr-table-fallback summary::-webkit-details-marker {
	display: none;
}

.gppr-table-fallback summary::before {
	content: "\25B8";
	color: var(--gppr-accent-gold);
	font-size: 0.9em;
	line-height: 1;
	transition: transform 0.2s ease;
}

.gppr-table-fallback[open] summary::before {
	transform: rotate(90deg);
}

.gppr-table-fallback summary:hover,
.gppr-table-fallback summary:focus-visible {
	background: var(--gppr-bg-light);
}

/*
 * Eine Tabelle kann nicht unter ihre min-content-Breite schrumpfen
 * (~870px bei 9 Spalten). Statt den Container zu sprengen, scrollt sie
 * auf schmalen Viewports in diesem Wrapper; tabindex="0" im Markup macht
 * den Bereich auch fuer Tastaturnutzer scrollbar.
 */
.gppr-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gppr-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
	margin-top: 0.5em;
}

.gppr-table th,
.gppr-table td {
	text-align: left;
	padding: 0.6em 0.7em;
	border-bottom: 1px solid var(--gppr-border-muted);
}

/* Ruhige Finanztabellen-Anmutung: leichte Kopfzeile ohne Graukasten,
   dezentes Zebra, Zahlenspalten rechtsbuendig mit Tabellenziffern.
   Bewusst KEIN text-transform: uppercase - das wuerde Einheitenzeichen
   wie "kWp" zu "KWP" verfaelschen. */
.gppr-table thead th {
	background: transparent;
	font-size: 0.85em;
	letter-spacing: 0.03em;
	color: #6b6b6b;
	border-bottom: 2px solid var(--gppr-border-muted);
}

.gppr-table tbody tr:nth-child(even) > * {
	background: #fafafa;
}

.gppr-table th:nth-child(4),
.gppr-table td:nth-child(4),
.gppr-table th:nth-child(7),
.gppr-table td:nth-child(7) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Trefferflaeche der Tabellenlinks auf ~44px anheben: das Negativ-Margin
   gleicht das Padding aus, das sichtbare Layout bleibt unveraendert. */
.gppr-table a {
	display: inline-block;
	padding: 0.85em 0.4em;
	margin: -0.85em -0.4em;
}

.gppr-table-fallback .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Reduced Motion: keine Bewegung, alles sofort im Endzustand sichtbar */

@media (prefers-reduced-motion: reduce) {
	.gppr-recap * {
		animation: none !important;
		transition: none !important;
	}

	.gppr-marker[data-state="upcoming"],
	.gppr-marker[data-state="entering"] {
		opacity: 1;
		/* nimmt visibility/pointer-events der upcoming-Regel zurueck:
		   ohne Bewegung sind alle Marker sofort sichtbar und bedienbar */
		visibility: visible;
		pointer-events: auto;
	}
}

/*
 * Ohne Bewegung wird der Zeiger nicht mehr ausgeblendet, sondern steht
 * still am Jahresende - showEndStateImmediately() ruft vorher
 * updatePlayheadPosition(1) auf, die Spur ist also vollstaendig gefuellt.
 * Das ist ein korrektes, informatives Standbild; nur die Bewegung entfaellt.
 */
.gppr-recap[data-gppr-reduced-motion="true"] .gppr-timeline-playhead,
.gppr-recap[data-gppr-reduced-motion="true"] .gppr-timeline-progress {
	transition: none;
}