/*
 * Stile der Übersichtsseite /werke/ (Auftrag "Die Übersichtsseite",
 * Abschnitt 3d, ergänzt durch Nachbesserung 1 N6/N14/N15). Werte sind aus
 * features/6_uebersichtsseite/referenz/06-uebersicht.png abgelesen - sie
 * sind das Maß, nicht eine Anregung.
 *
 * Diese Datei ergänzt assets/werkseite.css, das die gemeinsamen Teile
 * trägt - Farbvariablen auf :root, die Leiste (.k8sg-leiste und ihre
 * Kinder), .k8sg-seite und, wichtig (Nachbesserung 1 N6), Schrift,
 * Hintergrund und Textfarbe an body.k8sg-werkseite-body. werkseite.css
 * bleibt sonst zeichengleich unangetastet - einzige, vom Nutzer eigens
 * freigegebene Ausnahme ist dieselbe color-scheme-Zeile wie unten (Nachtrag
 * S7 zum Auftrag "Die Übersichtsseite"). Beide Dateien werden zusammen
 * eingereiht (K8SG_Uebersicht::stilUndSkriptEinreihen()).
 */

/*
 * Nachtrag S7 zum Auftrag "Die Übersichtsseite" (Nutzer-Freigabe): Samsung
 * Internet färbt die Seite im Dunkelmodus um (Leiste rot statt orange,
 * Papiergrund fast schwarz) - color-scheme:light bewirkt dort NACHWEISLICH
 * nichts. Das ist eine gemessene Nutzererfahrung aus mehreren früheren
 * Projekten, mehrere Stunden erfolglos gesucht, keine Vermutung. Die Zeile
 * steht trotzdem: Sie kann in anderen Browsern (Chrome, iOS) wirken und
 * kostet nichts. Keine weiteren Versuche gegen den Dunkelmodus - keine
 * !important-Ketten, kein filter, keine Media-Query-Akrobatik, kein Umbau
 * der Farbvariablen: das hat der Nutzer ausdrücklich ausgeschlossen.
 * Dieselbe Zeile steht aus demselben Grund auch in assets/werkseite.css.
 */
body.k8sg-werkseite-body {
	color-scheme: light;
}

/*
 * Grundfläche der Ladeanzeige als eigene Custom Property, nicht als Zahl im
 * Regelwerk verankert. Sie steht hier und nicht bei den übrigen
 * Farbvariablen auf :root in assets/werkseite.css, weil jene Datei
 * zeichengleich bleiben soll - keine Zeile darin ändert sich. Der Ton ist
 * bewusst dunkler als Papiergrund (--k8sg-bg, #f2f0e8) und Feldfarbe
 * (--k8sg-feld-bg, #e9e6db) aus werkseite.css, damit er sich von der
 * Schraffur abhebt, die aus genau diesen beiden Tönen gebaut ist.
 */
:root {
	--k8sg-lader-bg: #e4e1d5;
}

.k8sg-titelblock {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 16px 8px 16px;
}

.k8sg-ueberschrift {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--k8sg-text-stark);
}

.k8sg-unterzeile {
	font-size: 13px;
	color: var(--k8sg-text-schwach);
}

.k8sg-raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	padding: 8px 16px 24px 16px;
}

/*
 * Nachbesserung 2, S8: Steht anstelle von .k8sg-raster (null veröffentlichte
 * Werke - Aufbautag vor dem Einspielen), deshalb dieselbe Polsterung wie
 * dort, als Außenabstand statt Innenabstand (k8sg-feld bringt seine eigene
 * Innenpolsterung aus werkseite.css bereits mit).
 */
.k8sg-leeres-archiv {
	margin: 8px 16px 24px 16px;
}

.k8sg-karte {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Nachbesserung 1, N14: werkseite.css führt keine globale a-Regel - ohne
	   diese beiden Zeilen erbt die Karte die Browservorgabe (blau,
	   unterstrichen, nach Besuch violett). */
	color: inherit;
	text-decoration: none;
}

.k8sg-karte-bild {
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * Bezugsrahmen für .k8sg-lader (position: absolute; inset: 0) darunter.
	 * Ohne diese Zeile wäre der nächste positionierte Vorfahre .k8sg-seite
	 * (assets/werkseite.css) - die Anzeige würde so groß wie die ganze
	 * Seite und entginge dem overflow: hidden dieser Fläche.
	 */
	position: relative;
	/*
	 * Nachbesserung 1, N6: zugelassene Wiederholung von werkseite.css
	 * .k8sg-bild-wrapper (Rahmen und Schraffur) - dort für das
	 * Seitenverhältnis der Werkseite (1 : Wurzel(2)) berechnet, hier für
	 * das A2-Verhältnis der Rasterzelle (171:242). Eine gemeinsame Regel
	 * für beide wäre nur über eine dritte, unbeteiligte Klasse möglich
	 * gewesen - mehr Kopplung für weniger Wiederholung.
	 */
	aspect-ratio: 171 / 242;
	border: 1px solid var(--k8sg-haarlinie);
	overflow: hidden;
	background: repeating-linear-gradient(45deg, #e9e6db 0 10px, #f2f0e8 10px 20px);
}

.k8sg-karte-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/*
	 * Das Bild wird ausschließlich über opacity versteckt, nie über
	 * display/visibility/width/height/content-visibility - sonst lädt
	 * loading="lazy" es nie (keine Box), und das von WordPress ergänzte
	 * sizes="auto, …" fiele auf die volle Fensterbreite zurück. Die
	 * Übergangsdauer gilt für beide Richtungen (Einblenden 320ms), verkürzt
	 * ist hier nichts - assets/uebersicht.js setzt/entfernt ausschließlich
	 * die Klasse 'k8sg-laedt' unten, das Bild selbst bleibt unberührt.
	 */
	opacity: 1;
	transition: opacity 320ms ease-out;
}

/*
 * Nur assets/uebersicht.js erzeugt 'k8sg-laedt' - läuft das Skript nicht
 * (Fehler, Blockade, abgebrochene Verbindung), bleibt diese Regel
 * wirkungslos und die Seite zeigt ihre Bilder wie ohne diese Ladeanzeige.
 */
.k8sg-karte-bild.k8sg-laedt img {
	opacity: 0;
}

/*
 * Die Ladeanzeige selbst: ein <span class="k8sg-lader">, nur von
 * assets/uebersicht.js erzeugt. Liegt dank .k8sg-karte-bild{position:
 * relative} über der ganzen Fläche und damit auch über den
 * Schraffur-Streifen, die ein Querbild oben und unten frei lässt. Ohne
 * eigenes z-index: Die Fläche baut keinen eigenen Stapelkontext auf, und
 * ein positioniertes Element malt innerhalb desselben Kontexts immer über
 * einem unpositionierten Geschwister wie dem <img> - unabhängig von der
 * Reihenfolge im Markup. Ein gesetztes z-index würde dagegen aus dieser
 * Fläche heraus wirken und könnte auf Seiten mit eigenem Stylesheet (etwa
 * über den Shortcode) über ein fremdes, höher positioniertes Element wie
 * einen fixierten Kopfbereich geraten.
 */
.k8sg-lader {
	position: absolute;
	inset: 0;
	background: var(--k8sg-lader-bg);
	opacity: 1;
	/* Verschwinden der Anzeige: 260ms - assets/uebersicht.js setzt dafür
	   lader.style.opacity = '0', diese Regel liefert den Übergang. */
	transition: opacity 260ms ease-out;
}

.k8sg-lader::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 28%, rgba(255, 255, 255, .85) 50%, transparent 72%);
	/* Lauf: von links nach rechts, 1,4 Sekunden, endlos, ease-in-out. */
	animation: k8sg-schimmern 1400ms ease-in-out infinite;
}

@keyframes k8sg-schimmern {
	0% {
		transform: translateX(-120%);
	}
	100% {
		transform: translateX(120%);
	}
}

/*
 * Der Streifen entfällt bei abgeschalteter Bewegung über content: none -
 * nicht über animation: none. Mit animation: none stünde das
 * Pseudoelement auf seiner Ruhelage (Mitte der Fläche) und damit als
 * heller Balken quer über jeder Karte; content: none erzeugt gar keine
 * Box. Die beiden Deckkraft-Übergänge oben (Lader 260ms, Bild 320ms)
 * bleiben davon unberührt.
 */
@media (prefers-reduced-motion: reduce) {
	.k8sg-lader::after {
		content: none;
	}
}

.k8sg-karte-person {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--k8sg-text-stark);
}

.k8sg-karte-titel {
	font-size: 13px;
	color: var(--k8sg-text-gedaempft);
}