/*
Theme Name: Ratti Art Flexo
Author: Felix Deimling
Description: Sieht aus, als wäre kaum CSS eingebunden: Times, Browser-Blau, 20px Rand, Abstände in 10px-Schritten. Startseite = Untersuchungen im Umlauf, Archiv = Index aller Kategorien, Kategorie = Contact Sheet, Klick öffnet die nackte Bildansicht.
Version: 0.2.0
Text Domain: ratti-art-flexo
*/

/* Kein Reset. Link-Blau, Lila für besucht, Listen-Punkte: alles Browser-Default
   und bleibt so. Jede Regel hier schafft nur Ordnung.
   Abstände sind durchgehend Vielfache von 10px; Rand 20px statt der 8px des Browsers. */

body {
	margin: 20px;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 1.3;
	padding-top: 120px; /* Platz für Briefkopf und Nav, die fixiert oben liegen */
}

h1, h2, h3 {
	font-size: 1em;
	font-weight: bold;
	margin: 0;
}

/* Briefkopf oben links und Nav oben mittig scrollen nicht mit — der Text
   liegt über den Bildern, ohne Hintergrund. */
.kopf {
	position: fixed;
	top: 20px;
	left: 20px;
	margin: 0;
}

.nav {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	white-space: nowrap;
}

.nav a + a,
.nav mark + a,
.nav a + mark,
.nav mark + mark {
	margin-left: 30px;
}

/* Rechtsseiten: klein, fixiert rechts unten. */
.fuss {
	position: fixed;
	right: 20px;
	bottom: 20px;
	margin: 0;
	font-size: 12px;
}

/* Eingeloggt liegt die WordPress-Leiste oben; Kopf und Nav rutschen darunter. */
body.admin-bar .kopf,
body.admin-bar .nav {
	top: 50px;
}

/* Unterstrich als Signal, nicht als Default: Nav, Briefkopf, Kategorie-Zeile
   und Startseite ohne; aktiver Punkt, Archiv-Einträge, E-Mail und Links im
   Fließtext mit. Kein Marker-Gelb. */
a {
	text-decoration: none;
}

/* Besucht bleibt blau: Lila je nach Browserverlauf sieht im Register wie Zufall aus. */
a:visited {
	color: #0000ee;
}

mark {
	background: transparent;
	color: inherit;
}

mark a,
.archiv .untersuchung-kopf a,
.kopf a[href^="mailto:"],
.seite a,
.serientext a {
	text-decoration: underline;
}

/* Kategorie-Zeile: ein Absatz, Mittelpunkte trennen, die aktuelle in <mark> (unterstrichen). */
.katzeile {
	margin: 20px 0 50px;
}

/* Startseite und Archiv: pro Untersuchung nur Name, Zeitraum, ein Bild.
   Alles Weitere steht auf der Kategorie-Seite; das hier ist Verzeichnis. */
.current > h1 {
	margin-bottom: 20px;
}

.untersuchung {
	margin: 0 0 100px;
}

/* Figure schrumpft auf Bildbreite, die Beschriftung bleibt an ihrer Bildkante. */
.hauptbild {
	width: fit-content;
	max-width: 100%;
	margin: 0;
}

.untersuchung-kopf {
	margin: 0 0 10px; /* zwei Zeilen: Name, Zeitraum; dann Luft zum Bild */
	text-align: left;
}

/* Das Blatt: so groß, wie das Fenster unter dem Briefkopf hergibt, mittig
   wie die Nav. Beschriftung rechtsbündig unter der Bildkante, die figure ist
   so breit wie das Bild. Die anderen Blätter liegen versteckt daneben. */
.tagesblatt {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
}

.tagesblatt img[hidden] {
	display: none;
}

.tagesblatt figcaption {
	margin-top: 10px;
	text-align: right;
}

.hauptbild img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - 200px);
}

/* Archiv als Arbeitsregister. Kein dekoratives Bildraster: die Daten stehen
   offen da, das Hauptbild erscheint nur beim Hover über eine Zeile. */
.archiv > h1 {
	margin-bottom: 20px;
}

.archiv-register-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.archiv-register {
	width: 100%;
	min-width: 900px;
	border-collapse: collapse;
	font: inherit;
}

.archiv-register th,
.archiv-register td {
	padding: 10px 20px 10px 0;
	border-bottom: 1px solid #000;
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

.archiv-register thead th {
	padding-top: 0;
	white-space: nowrap;
}

.archiv-register tbody tr:hover,
.archiv-register tbody tr:focus-within {
	background: #ff0;
}

.archiv-register td:first-child,
.archiv-register td:nth-child(3),
.archiv-register td:nth-child(5),
.archiv-register td:last-child {
	white-space: nowrap;
}

.archiv-vorschau {
	position: fixed;
	top: 120px;
	right: 20px;
	z-index: 5;
	max-width: 42vw;
	max-height: calc(100vh - 140px);
	pointer-events: none;
	object-fit: contain;
	object-position: top right;
}

.archiv-vorschau[hidden] {
	display: none;
}

/* 404: Zahl riesig, Browserblau, mittig. */
.nichts {
	text-align: center;
	padding-top: 15vh;
}

.nichts-zahl {
	margin: 0 0 40px;
	font-size: 25vw;
	line-height: 1;
	color: #0000ee;
}

figcaption {
	margin-top: 10px;
}

/* Serientext auf der Kategorie-Seite: schmal genug zum Lesen, sonst nichts. */
.serientext {
	max-width: 36em;
	margin: 0 0 40px;
}

/* Contact Sheet: feste Zeilenhöhe, Breite ergibt sich aus dem Format.
   Zeilen brechen, wo sie brechen; rechts bleibt ein Rest frei. */
/* Bogen in gefüllten Zeilen: jedes Bild wächst proportional zu seinem
   Seitenverhältnis (--r), so wird jede Zeile genau so breit wie die Seite und
   die Höhe ergibt sich aus den Formaten. Kein Beschnitt, kein Script. Der
   ::after-Füller hält die letzte Zeile auf Grundhöhe statt sie zu strecken. */
.sheet {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin: 30px 0 50px;
}

.sheet a {
	flex-grow: calc(var(--r, 1) * 1000);
	flex-basis: calc(var(--r, 1) * 330px);
	min-width: 0;
}

.sheet::after {
	content: "";
	flex-grow: 1000000;
}

/* Serien-Navigation unter den Bildern, abgesetzt vom Bogen. */
.serien-nav {
	margin-top: 30px;
}

.serien-nav .katzeile {
	margin: 0 0 10px;
}

/* Hauptbild der Werkgruppe: ein Blatt groß, der Rest im Bogen darunter. */
.blatt {
	margin: 30px 0 0;
}

.blatt img {
	display: block;
	max-width: 100%;
	max-height: 80vh;
	width: auto;
	height: auto;
}

.sheet img {
	display: block;
	width: 100%;
	height: auto;
}

/* Bild-Vorschau beim Hover über einen Index-Eintrag: erscheint hart an
   fester Stelle rechts oben, ohne Übergang. */
.vorschau {
	position: fixed;
	top: 20px;
	right: 20px;
	max-height: 45vh;
	max-width: 40vw;
	pointer-events: none;
}

.vorschau[hidden] {
	display: none;
}

/* Textseiten (About, Kontakt, Impressum): Lesebreite, sonst nichts. */
.seite {
	max-width: 36em;
}

/* Lightbox wie ein Blatt auf weißem Tisch: kein Glas, kein Blur, nur Bild,
   Zettel mit Werkdaten und die zwei notwendigen Richtungen. */
.ratto-lightbox {
	position: fixed;
	inset: 0;
	z-index: 20;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(13em, 16em);
	gap: clamp(30px, 6vw, 120px);
	padding: clamp(20px, 4vw, 60px);
	background: #fff;
	color: #000;
}

.ratto-lightbox[hidden] {
	display: none;
}

.ratto-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.ratto-stage img {
	display: block;
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
}

.ratto-zettel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.ratto-zettel p {
	margin: 0;
}

/* Werke ohne Jahr oder Status hinterlassen sonst leere Lücken im Zettel. */
.ratto-zettel p:empty {
	display: none;
}

.ratto-zettel button {
	padding: 0;
	border: 0;
	background: transparent;
	color: #0000ee;
	font: inherit;
	cursor: pointer;
}


.ratto-controls {
	display: flex;
	gap: 20px;
}

body.ratto-open {
	overflow: hidden;
}

@media (max-width: 640px) {
	body { padding-top: 0; }
	.kopf, .nav, .fuss { position: static; transform: none; }
	.fuss { margin: 40px 0 0; }
	.nav { margin: 20px 0 40px; white-space: normal; }
	.sheet { gap: 20px; }
	.sheet a { flex-basis: calc(var(--r, 1) * 140px); }
	.blatt img { max-height: none; width: 100%; }
	.untersuchung { margin-bottom: 80px; }
	/* Startseite mobil: Bild linksbündig in voller Breite, Höhe aus dem Format. */
	.hauptbild { width: auto; margin: 0; }
	.hauptbild img { width: 100%; max-width: none; max-height: none; }
	.archiv-register {
		width: 100%;
		min-width: 0;
		table-layout: fixed;
	}
	.archiv-register th:nth-child(n + 4),
	.archiv-register td:nth-child(n + 4) {
		display: none;
	}
	.archiv-register th:first-child,
	.archiv-register td:first-child {
		width: 64px;
	}
	.archiv-register th:nth-child(3),
	.archiv-register td:nth-child(3) {
		width: 76px;
	}
	.archiv-register th,
	.archiv-register td {
		padding-right: 10px;
	}

	.vorschau { display: none; }
	.ratto-lightbox { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 20px; padding: 20px; }
	.ratto-stage img { max-height: 78vh; }
	.ratto-zettel { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
}