/**
 * Florian Adolph Website — Stylesheet.
 *
 * Ruhige Gestaltung ohne Effekte: Work Sans und Libre
 * Baskerville, Grau als Fläche, viel Weißraum, ein kräftiges Blau als Akzent.
 * Kein Gelb, keine Bühne, keine ausweichenden Kacheln.
 *
 * Jeder Gestaltungsparameter steht als Variable in Abschnitt 2. Wer Farben,
 * Größen, Abstände oder Formen ändern will, ändert sie dort. Akzentfarbe und
 * heller Grund kommen aus dem Backend (Website → Darstellung) und stehen als
 * kleiner Block hinter dieser Datei (flo4_colors_css()); die Werte hier
 * gelten nur, falls der fehlt. Nur die Umbrüche in den @media-Zeilen stehen als Zahl: Media
 * Queries können keine Variablen lesen.
 *
 *  1  Schriften
 *  2  Parameter, danach die Farben der dunklen Ansicht
 *  3  Grundlagen
 *  4  Rahmen: Spalten, Kopf, Name, Sprachen, Schalter hell/dunkel
 *  5  Menü
 *  6  Inhalt
 *  7  Startseite und News
 *  8  Fuß
 *  9  Schmale Fenster und Handy-Menü
 * 10  Weniger Bewegung
 * 11  Work: Kopf, Umschalter, Raster, Liste
 * 12  Eine Arbeit, als Seite und als Ebene
 * 13  About und Kontakt
 * 14  Seitenart AR-Objekt (/object)
 * 15  Lightbox: die Bilder einer Arbeit groß
 */

/* -------------------------------------------------------------------------
   1  Schriften

   Work Sans für Überschriften, Namen, Beschriftungen und das Menü; Libre
   Baskerville für Texte. Beide als variable Schrift: eine Datei für alle
   Gewichte. Lizenz: SIL Open Font License, die Texte liegen neben den Dateien.
   ------------------------------------------------------------------------- */

@font-face {
	font-family: "Work Sans";
	src: url("../fonts/work-sans-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Libre Baskerville";
	src: url("../fonts/libre-baskerville-var.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Libre Baskerville";
	src: url("../fonts/libre-baskerville-italic-var.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

/* -------------------------------------------------------------------------
   2  Parameter
   ------------------------------------------------------------------------- */

:root {
	/* Farben */
	--ground: #f9f9f7;                            /* leichtes Off-White; gewählt wird es im Backend (flo4_grounds() in inc/settings.php), hier steht die Voreinstellung */
	--panel: #efefec;                             /* Formen im Menü, Pillen, Flächen hinter Bildern */
	--panel-hover: #e3e0da;                       /* dieselbe Fläche unter dem Zeiger: dunkler und eine Spur wärmer */
	--ink: #141414;
	--muted: #5a5a56;                             /* Nebentext: Zusatztext, Rubriken, Fuß */
	--accent: #1e3cff;                            /* kräftiges Blau; der Wert aus dem Backend steht hinter dieser Datei */
	--on-accent: #fff;                            /* Schrift auf einer Fläche in Akzentfarbe (aktive Seite im Menü) */
	--rule: #141414;
	--rule-soft: rgba(20, 20, 20, 0.18);
	--veil: color-mix(in srgb, var(--ground) 90%, transparent); /* Schleier unter der Ebene einer Arbeit, im Ton des Grunds */
	--veil-blur: 18px;

	color-scheme: light;

	/* Schriften */
	--font-text: "Libre Baskerville", Georgia, serif;                       /* Lesetext, Name */
	--font-ui: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Menü, Beschriftungen, Titel */
	--weight-light: 300;
	--weight-regular: 400;
	--weight-label: 500;
	--weight-strong: 600;
	--tracking-label: 0.09em;                     /* versale Beschriftungen */
	--tracking-foot: 0.02em;
	--tracking-title: -0.01em;

	--size-text: 0.875rem;                        /* Lesetext, 14 px */
	--size-lead: 1.375rem;                        /* großer Satz: Statement, Zusatztext der Startseite, Einleitung der Kontaktseite */
	--size-lead-narrow: 1.1875rem;                /* … am Handy */
	--size-label: 0.6875rem;                      /* versale Beschriftungen, Menü, Sprachen, 11 px */
	--size-small: 0.78125rem;                     /* Zeitraum, Angaben */
	--size-foot: 0.6875rem;
	--size-name: 1.25rem;                         /* Name oben */
	--size-title: 2.125rem;                       /* Seitentitel, im leichten Schnitt */
	--size-heading: 1.375rem;                     /* Titel einer News, einer Arbeit */
	--leading: 1.45;
	--leading-text: 1.65;                         /* Lesetext in Baskerville */
	--leading-lead: 1.5;
	--leading-title: 1.1;
	--measure: 35rem;                             /* Zeilenlänge von Fließtext */
	--tagline-max: var(--measure);

	/* Rahmen */
	--edge: 2rem;                                 /* Abstand zum Fensterrand */
	--edge-narrow: 1rem;                          /* … in schmalen Fenstern */
	--nav-w: 7.5rem;                              /* Spalte des Menüs */
	--frame-gap: 4.5rem;                          /* zwischen Menü und Seite */
	--frame-gap-y: 2rem;                          /* … übereinander, in schmalen Fenstern */
	--column-max: clamp(67.5rem, 58vw, 90rem);    /* Breite der Seite: 1080 px, ab etwa 1860 px Fenster wächst sie mit, höchstens 1440 px */
	--head-h: 3.25rem;                            /* Zeile von Name und Sprachen, so hoch wie die Platte im Menü */
	--hit: 2.75rem;                               /* kleinste Fläche, die einen Klick fängt */
	--hit-narrow: 2.25rem;                        /* … in der vollen Kopfzeile am Handy (Sprachen, Schalter) */
	--theme-icon: 0.875rem;                       /* Mond und Kreis des Schalters für hell und dunkel */
	--size-name-narrow: 1.0625rem;                /* Name oben am Handy */
	--title-space: 3.5rem;                        /* über dem Seitentitel */
	--content-space: 2.5rem;                      /* unter dem Seitentitel */
	--foot-space: 10rem;                          /* mindestens so viel Luft über dem Fuß */
	--foot-gap: 0.5rem 1.5rem;

	/*
	 * Formen des Menüs: Home Platte, Work Pille, News Kreis, About Kachel,
	 * Kontakt Blatt. Schlicht: graue Flächen ohne Linie, alle gleich hoch
	 * und gleich breit (der Kreis so breit wie hoch), keine Schatten, keine
	 * Verläufe, nur ruhige Ecken. Die aktive Seite ist in der Akzentfarbe
	 * gefüllt. Linie statt Fläche: --shape-fill: transparent, --shape-line: 1px.
	 */
	--shape-w: 7.5rem;
	--shape-h: 3.25rem;
	--shape-gap: 0.5rem;
	--shape-line: 0px;                            /* 0 = reine Fläche */
	--shape-line-color: var(--rule);
	--shape-fill: var(--panel);
	--shape-fill-hover: var(--panel-hover);
	--shape-plate-radius: 0.125rem;               /* Platte: fast eckig */
	--shape-tile-radius: 0.5rem;                  /* Kachel: leicht gerundet */
	--shape-leaf-radius: 0 1rem 0 0;              /* Blatt: eine weiche Ecke oben rechts */
	--shape-size-menu: 0.8125rem;                 /* Schrift in den Formen im offenen Handy-Menü */
	--shape-w-menu: 13rem;                        /* … und ihre Breite und Höhe */
	--shape-h-menu: 4rem;
	--shape-gap-menu: 0.625rem;
	--toggle-w: 5.5rem;                           /* Knopf „Menu“ am Handy */
	--menu-ground: color-mix(in srgb, var(--ground) 72%, transparent); /* Fläche des offenen Handy-Menüs: milchig, im Ton des Grunds … */
	--menu-blur: var(--veil-blur);                /* … die Seite darunter verschwimmt … */
	--menu-shape-fill: var(--panel);              /* … und die Formen darauf grau wie am Desktop */

	/* Startseite und News (Chat 2) */
	--home-top: 70vh;                             /* so hoch ist der Bereich mit Name und Zusatztext, darunter beginnen die News */
	--home-top-mobile: 70svh;
	--news-pad: 1.75rem;                          /* über und unter jedem Eintrag, zwischen den Linien */
	--news-pad-narrow: 1.5rem;                    /* … am Handy */
	--news-head-gap: 1.25rem;                     /* unter der Überschrift „News“ */
	--news-empty-ratio: 4 / 3;                    /* graue Fläche eines Eintrags ohne Bild */
	--news-thumb: 7.5rem;                         /* Bild der kompakten Darstellung; muss zu flo4_news_sizes() passen */
	--news-thumb-narrow: 5.5rem;                  /* … am Handy */
	--news-text-max: var(--measure);
	--news-lines: 4;                              /* so viele Zeilen, bevor „Read more +“ kürzt */

	/* Work: Raster */
	--grid-cols: 4;                               /* so viele Spalten höchstens (in sehr breiten Fenstern 5, siehe unter Abschnitt 2) … */
	--tile-min: 11rem;                            /* … solange jede mindestens so breit ist */
	--grid-gap: 1.5rem;                           /* zwischen den Spalten */
	--grid-row-gap: 3.5rem;                       /* zwischen den Reihen */
	--grid-gap-narrow: 1rem;                      /* … am Handy, dort immer zwei Spalten */
	--grid-row-gap-narrow: 2.25rem;
	--tile-max-h: 18rem;                          /* höchstes Bild im Raster = Höhe der leeren Karten */
	--tile-max-h-narrow: 13.5rem;                 /* … am Handy */
	--card-pad: 1.125rem;                         /* Rand in der Karte einer Arbeit ohne Bild */
	--card-pad-narrow: 0.75rem;
	--size-card: 1.375rem;                        /* Titel auf der Karte */
	--size-card-narrow: 1.0625rem;

	/* Work: Liste */
	--list-cols: minmax(0, 5fr) minmax(0, 6fr) 6rem 2rem; /* Titel, Ort, Jahr, Zeichen */
	--size-row: 0.9rem;                           /* Titel in der Liste */
	--row-pad: 0.75rem;                           /* über und unter jeder Zeile */
	--list-rule: 1px solid var(--rule-soft);      /* Linie zwischen den Zeilen, ebenso zwischen den News */

	/* Eine Arbeit, als Seite und als Ebene */
	--size-work-title: 2.5rem;
	--size-work-text: 0.9375rem;
	--leading-work: 1.7;
	--work-text-max: 40rem;
	--gallery-h: 17.5rem;                         /* alle Bilder einer Galerie gleich hoch; muss zu flo4_gallery_sizes() passen */
	--gallery-gap: 1.5rem;
	--gallery-space: 4.5rem;                      /* zwischen Text und Galerie */
	--layer-speed: 0.3s;                          /* Ebene blendet ein und aus, die Lightbox ebenso */
	--zoom-ground: var(--ground);                 /* Lightbox: Fläche hinter dem großen Bild */
	--zoom-gap: 1rem;                             /* Lightbox: zwischen Knöpfen, Bild und Leiste */

	/* About und Kontakt */
	--part-space: 7.5rem;                         /* zwischen Statement, Lebenslauf und Presse */
	--portrait-w: 17.5rem;
	--cv-year-w: 5.5rem;                          /* Spalte der Jahre in Lebenslauf und Presse */
	--contact-top: 60vh;                          /* Mindesthöhe des Bereichs mit Titel, Einleitung, E-Mail und Links */
	--contact-top-mobile: 55svh;
	--contact-links-space: 1.75rem;               /* zwischen E-Mail-Adresse und den Pillen darunter */

	/* /object: Seitenart AR-Objekt */
	--ar-ground: #f4f4f2;                         /* heller Grund, wie ein Sockel im Museum */
	--ar-tool-line: #cfcec8;                      /* Rand der runden Knöpfe am Desktop */
	--ar-qr-ground: #fff;                         /* Fläche des QR-Codes — bleibt hell, auch in der dunklen Ansicht */
	--ar-qr-ink: #111;
	--ar-qr-line: #e2e1dc;
	--ar-pad: 1.5rem;                             /* Rand am Handy */
	--ar-pad-tablet: 2.5rem;                      /* … am Tablet */
	--ar-pad-desk: 3rem;                          /* … am Desktop, Werkschild und Leiste unter dem Objekt */
	--ar-stage-min: 20rem;                        /* Mindesthöhe des Objekts */
	--ar-stage-w: 35rem;                          /* Desktop: Mindestbreite der Bühne */
	--ar-aside-w: 26rem;                          /* Desktop: Breite des Werkschilds, wenn Platz ist … */
	--ar-aside-max: 30rem;                        /* … und höchstens */
	--ar-label-max: 23.75rem;                     /* Tablet: Breite von Titel und Zeile */
	--ar-gap-hint: 1.125rem;                      /* zwischen Objekt und Hinweis */
	--ar-gap-info: 1.375rem;                      /* Handy: zwischen Werkschild und Knopf */
	--ar-gap-info-desk: 2.25rem;                  /* Desktop: zwischen Text und QR-Code */
	--ar-size-title: 1.625rem;                    /* Titel am Handy … */
	--ar-size-title-tablet: 2.125rem;             /* … am Tablet … */
	--ar-size-title-desk: 2.375rem;               /* … am Desktop */
	--ar-tracking-title: -0.01em;
	--ar-size-byline: 0.875rem;                   /* „by Florian Adolph“, am Handy … */
	--ar-size-byline-wide: 0.9375rem;             /* … ab Tablet, ebenso der Text */
	--ar-leading-text: 1.7;
	--ar-size-hint: 0.75rem;                      /* „Drag to rotate“, am Handy … */
	--ar-size-hint-wide: 0.8125rem;               /* … ab Tablet */
	--ar-button-h: 3.5rem;                        /* AR-Knopf: Höhe … */
	--ar-button-w: 17.5rem;                       /* … und Breite ab Tablet */
	--ar-size-button: 1rem;
	--ar-tool: 2.75rem;                           /* runde Knöpfe am Desktop */
	--ar-qr-size: 6.5rem;                         /* Kantenlänge des QR-Codes */
	--ar-qr-pad: 0.5rem;                          /* weißer Rand um den Code */
	--ar-qr-gap: 1rem;                            /* zwischen Code und Worten */
	--ar-speed-hint: 0.4s;                        /* Hinweis blendet aus */

	/* Bewegung */
	--speed-hover: 0.2s;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);        /* fürs Wegfahren: zügig los, ohne Nachlauf */
	--menu-speed: 0.24s;                          /* Handy-Menü: die Fläche fährt herunter … */
	--menu-speed-out: 0.18s;                      /* … und wieder hoch */
	--menu-item-speed: 0.16s;                     /* die Punkte blenden ein, … */
	--menu-item-delay: 0.12s;                     /* … der erste so viel nach dem Öffnen, … */
	--menu-stagger: 0.025s;                       /* … jeder weitere etwas später */
}

/*
 * Dunkle Ansicht. Getauscht werden nur die Farben von oben — alles andere
 * bleibt. Ohne Zutun folgt die Seite dem Gerät; der Schalter (Chat 2)
 * überstimmt es in beide Richtungen (data-theme am <html>, siehe
 * flo4_boot_script()).
 *
 * Die Werte stehen deshalb zweimal da: einmal für das dunkle Gerät, einmal
 * für die Wahl von Hand. Wer einen ändert, ändert ihn an beiden Stellen —
 * --ground auch in FLO_GROUND_DARK in inc/base/i18n.php (Kontrastprüfung).
 */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ground: #151514;
		--panel: #232321;
		--panel-hover: #302e2b;
		--ink: #ecebe6;
		--muted: #a3a29b;
		--accent: #8496ff;
		--on-accent: #151514;
		--rule: #ecebe6;
		--rule-soft: rgba(236, 235, 230, 0.2);
		--veil: rgba(21, 21, 20, 0.9);
		--ar-ground: #1b1b19;
		--ar-tool-line: rgba(236, 235, 230, 0.3);

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--ground: #151514;
	--panel: #232321;
	--panel-hover: #302e2b;
	--ink: #ecebe6;
	--muted: #a3a29b;
	--accent: #8496ff;
	--on-accent: #151514;
	--rule: #ecebe6;
	--rule-soft: rgba(236, 235, 230, 0.2);
	--veil: rgba(21, 21, 20, 0.9);
	--ar-ground: #1b1b19;
	--ar-tool-line: rgba(236, 235, 230, 0.3);

	color-scheme: dark;
}

/*
 * Sehr breite Fenster: Ist die Seite auf rund 1300 px gewachsen, bekommt das
 * Work-Raster eine fünfte Spalte — die Kacheln sind dann etwa so breit wie
 * vier Spalten bei 1080 px. Die News folgen, sie teilen die Formel.
 */
@media (min-width: 140rem) {
	:root {
		--grid-cols: 5;
	}
}

/* -------------------------------------------------------------------------
   3  Grundlagen
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scrollbar-gutter: stable;
}

/*
 * Das <body> ist eine Spalte, mindestens so hoch wie das Fenster. Der Rahmen
 * füllt sie, die Seite darin auch, und der Inhalt nimmt den freien Platz —
 * so steht der Fuß auf kurzen Seiten am unteren Fensterrand.
 */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: var(--size-text);
	line-height: var(--leading-text);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img {
	max-width: 100%;
	height: auto;
}

picture {
	display: block;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--speed-hover) var(--ease);
}

a:hover {
	color: var(--accent);
}

button {
	font: inherit;
	color: inherit;
	border-radius: 0;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

[hidden] {
	display: none !important;
}

::selection {
	background: var(--accent);
	color: var(--on-accent);
}

.flo-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.flo-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 60;
	padding: 0.5rem 1rem;
	background: var(--ground);
	font-family: var(--font-ui);
}

.flo-skip:focus {
	left: 0;
}

/* Beschriftung: versal, gesperrt — Rubriken, kleine Schalter. */
.flo-label {
	margin: 0;
	font: var(--weight-label) var(--size-label) / 1.4 var(--font-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   4  Rahmen

   Zwei Spalten: links das Menü, rechts die Seite. Die Seite ist selbst eine
   Spalte aus Kopf, Inhalt und Fuß; der Inhalt wächst, der Fuß bleibt unten.
   Ist das Fenster breiter als Menü und Seite, stehen beide zusammen in der
   Mitte; die Ebene einer Arbeit (.flo-layer__inner) folgt derselben Rechnung.
   ------------------------------------------------------------------------- */

.flo-frame {
	flex: 1 0 auto;
	display: grid;
	grid-template-columns: var(--nav-w) minmax(0, var(--column-max));
	justify-content: center;
	column-gap: var(--frame-gap);
	padding: var(--edge);
}

.flo-column {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.flo-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--head-h);
}

.flo-name {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font: var(--weight-regular) var(--size-name) / 1 var(--font-text);
}

/* Rechts im Kopf: Sprachen und der Schalter für hell und dunkel. */
.flo-head__tools {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.flo-name a {
	text-decoration: none;
}

.flo-main {
	flex: 1 0 auto;
	min-width: 0;
}

/* Sprachen: DE und EN, die aktuelle unterstrichen in Akzentfarbe. */
.flo-langs {
	display: flex;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flo-langs__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hit);
	height: var(--hit);
	padding: 0 0.375rem;
	font: var(--weight-label) var(--size-label) / 1 var(--font-ui);
	letter-spacing: var(--tracking-label);
	color: var(--muted);
	text-decoration: none;
}

.flo-langs__link.is-current {
	font-weight: var(--weight-strong);
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.flo-langs__link.is-current:hover {
	color: var(--ink);
}

/*
 * Der Schalter für helle und dunkle Ansicht. Er zeigt
 * die Ansicht, in die er wechselt: Mond für dunkel, gefüllter Kreis für hell.
 * Welches Zeichen steht, sagt data-flo4-next (app.js).
 */
.flo-theme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hit);
	height: var(--hit);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.flo-theme:hover {
	color: var(--accent);
}

.flo-theme__icon {
	display: block;
	width: var(--theme-icon);
	height: var(--theme-icon);
}

.flo-theme:not([data-flo4-next="dark"]) .flo-theme__icon--dark,
.flo-theme:not([data-flo4-next="light"]) .flo-theme__icon--light {
	display: none;
}

/* -------------------------------------------------------------------------
   5  Menü

   Fünf schlichte Formen untereinander, graue Flächen ohne Linie. Die aktive
   Seite ist in der Akzentfarbe gefüllt. Am Desktop bleibt das Menü beim
   Scrollen stehen (sticky). Der Anhang mit E-Mail und
   Social-Links erscheint nur im offenen Handy-Menü (Abschnitt 9).
   ------------------------------------------------------------------------- */

.flo-nav {
	position: sticky;
	top: var(--edge);
	align-self: start;
}

.flo-nav__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--shape-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.flo-nav__extra {
	display: none;
}

.flo-shape,
.flo-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--shape-w);
	height: var(--shape-h);
	padding: 0 0.375rem;
	border: var(--shape-line) solid var(--shape-line-color);
	background: var(--shape-fill);
	color: var(--ink);
	font: var(--weight-label) var(--size-label) / 1.15 var(--font-ui);
	letter-spacing: var(--tracking-label);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--speed-hover) var(--ease), color var(--speed-hover) var(--ease), border-color var(--speed-hover) var(--ease);
}

.flo-shape:hover {
	background: var(--shape-fill-hover);
}

.flo-shape.is-current,
.flo-shape.is-current:hover {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

.flo-shape--plate {
	border-radius: var(--shape-plate-radius);
}

.flo-shape--pill {
	border-radius: 999px;
}

.flo-shape--circle {
	width: var(--shape-h);
	padding: 0;
	border-radius: 50%;
}

.flo-shape--tile {
	border-radius: var(--shape-tile-radius);
}

/* Blatt: wie ein Blatt Papier, eine weiche Ecke. */
.flo-shape--leaf {
	border-radius: var(--shape-leaf-radius);
}

/* Den Knopf „Menu“ gibt es nur in schmalen Fenstern mit Skript (Abschnitt 9). */
.flo-menu-slot,
.flo-menu-toggle {
	display: none;
	flex: 0 0 auto;
	width: var(--toggle-w);
	cursor: pointer;
}

.flo-menu-toggle:hover {
	background: var(--shape-fill-hover);
}

.flo-menu-toggle[aria-expanded="true"] {
	background: var(--shape-fill-hover);
}

.flo-menu-toggle[aria-expanded="true"] .flo-menu-toggle__open,
.flo-menu-toggle:not([aria-expanded="true"]) .flo-menu-toggle__close {
	display: none;
}

/* -------------------------------------------------------------------------
   6  Inhalt
   ------------------------------------------------------------------------- */

.flo-title {
	margin: var(--title-space) 0 var(--content-space);
	font: var(--weight-light) var(--size-title) / var(--leading-title) var(--font-ui);
	letter-spacing: var(--tracking-title);
}

.flo-text {
	max-width: var(--measure);
}

.flo-tagline {
	max-width: var(--tagline-max);
	margin: 0.375rem 0 0;
	font-size: var(--size-lead);                  /* wie das Statement der About-Seite (.flo-lead) */
	line-height: var(--leading-lead);
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   7  Startseite und News

   Oben Name und Zusatztext; zusammen mit dem Kopf ist dieser Bereich
   --home-top hoch, darunter beginnen die News, getrennt durch dieselben
   Linien wie die Liste der Arbeiten (--list-rule). Jeder Eintrag steht in
   den Spalten des Work-Rasters: in der ersten das Bild in seinem Format,
   höchstens --tile-max-h hoch wie dort, ab der zweiten die Angaben und der
   Text. Kompakt (.flo-news--compact): ein kleines quadratisches Bild neben
   dem Text, auch am Handy. Das Skript kürzt lange Texte auf --news-lines
   Zeilen.
   ------------------------------------------------------------------------- */

.flo-home__top {
	min-height: calc(var(--home-top) - var(--edge) - var(--head-h));
}

.flo-news {
	display: flex;
	flex-direction: column;
	gap: var(--news-head-gap);
	scroll-margin-top: var(--edge);
}

.flo-news__heading {
	font-size: var(--size-label);
}

.flo-news__empty {
	margin: 0;
	color: var(--muted);
}

.flo-news__list {
	border-bottom: var(--list-rule);
}

/* Spalten wie im Work-Raster (.flo-tiles), damit die Bilder bündig stehen. */
.flo-news__item {
	--tile-col: calc((100% - (var(--grid-cols) - 1) * var(--grid-gap)) / var(--grid-cols));
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--tile-min), var(--tile-col))), 1fr));
	gap: 0.875rem var(--grid-gap);
	align-items: start;
	padding: var(--news-pad) 0;
	border-top: var(--list-rule);
}

.flo-news__image:not(:has(img)) {
	aspect-ratio: var(--news-empty-ratio);
	max-height: var(--tile-max-h);
	background: var(--panel);
}

/* Zu hohe Bilder werden auf --tile-max-h beschnitten, flachere behalten ihr Format. */
.flo-news__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--tile-max-h);
	object-fit: cover;
}

.flo-news__body {
	grid-column: 2 / -1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.flo-news--compact .flo-news__item {
	grid-template-columns: var(--news-thumb) minmax(0, 1fr);
}

.flo-news--compact .flo-news__body {
	grid-column: auto;
}

.flo-news--compact .flo-news__image,
.flo-news--compact .flo-news__image img {
	aspect-ratio: 1;
}

.flo-news__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 0;
	font: var(--weight-label) var(--size-label) / 1.4 var(--font-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--muted);
}

.flo-news__date {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.flo-news__title {
	margin: 0.75rem 0 0;
	font: var(--weight-regular) var(--size-heading) / 1.25 var(--font-ui);
	letter-spacing: -0.005em;
}

.flo-news__when {
	margin: 0.375rem 0 0;
	font: var(--weight-regular) var(--size-small) / 1.4 var(--font-ui);
	color: var(--muted);
}

/* Absätze im Raster der Zeilen: Die Leerzeile zwischen zweien ist eine Zeile hoch. */
.flo-news__text {
	max-width: var(--news-text-max);
	margin-top: 0.875rem;
}

.flo-news__text > * {
	margin: 0;
}

.flo-news__text > * + * {
	margin-top: calc(var(--leading-text) * 1em);
}

.flo-news__text.is-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--news-lines);
	line-clamp: var(--news-lines);
	overflow: hidden;
}

.flo-news__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0.25rem 0 0;
}

.flo-news__more,
.flo-news__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--hit);
	padding: 0;
	border: 0;
	background: none;
	font: var(--weight-label) var(--size-label) / 1 var(--font-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	cursor: pointer;
}

.flo-news__more:hover,
.flo-news__link:hover {
	color: var(--accent);
}

.flo-news__more span[aria-hidden] {
	white-space: pre;
}

/* -------------------------------------------------------------------------
   8  Fuß
   ------------------------------------------------------------------------- */

.flo-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--foot-gap);
	margin-top: var(--foot-space);
	font: var(--weight-regular) var(--size-foot) / 1.5 var(--font-ui);
	letter-spacing: var(--tracking-foot);
	color: var(--muted);
}

.flo-foot__line {
	margin: 0;
}

.flo-foot__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--foot-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.flo-foot a {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   9  Schmale Fenster und Handy-Menü

   Bis 64rem (Handy und Tablet im Hochformat) eine Spalte. Mit Skript steht
   vor dem Namen der Knopf „Menu“; er legt das Menü über die ganze Seite,
   der Kopf bleibt oben stehen und die Seite darunter still (app.js,
   Abschnitt 2 — dort steht derselbe Umbruch). Ohne Skript steht das Menü
   als Reihe über dem Kopf.

   Der Knopf „Menu“ bleibt beim Scrollen oben links stehen (fixed); seinen
   Platz im Kopf hält .flo-menu-slot frei. Das Menü ist eine milchige
   Fläche, die von oben herunterfährt; danach erscheinen die Punkte kurz
   nacheinander (--flo-i aus nav.php), grau wie am Desktop. Beim Schließen fährt die Fläche zügig wieder hoch. Wer weniger
   Bewegung eingestellt hat, bekommt das Menü ohne Bewegung.

   Bis 47.5rem (Handy) zusätzlich der schmale Rand und der kleinere Kopf.
   ------------------------------------------------------------------------- */

@media (max-width: 64rem) {
	:root {
		--menu-edge: var(--edge);                 /* Rand von Kopf und Menü, solange das Menü offen ist */
	}

	.flo-frame {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: var(--frame-gap-y);
	}

	.flo-column {
		flex: 1 0 auto;
	}

	/* Ohne Skript: eine Reihe über dem Kopf, die mitscrollt. */
	.flo-nav {
		position: static;
	}

	.flo-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* Mit Skript: das Menü als Knopf, offen über der ganzen Seite. */
	.flo-js .flo-menu-slot {
		display: block;
		flex: 0 0 auto;
		width: var(--toggle-w);
		height: var(--shape-h);
	}

	/* Der Knopf steht fest an seinem Platz im Kopf, auch beim Scrollen. */
	.flo-js .flo-menu-toggle {
		display: flex;
		position: fixed;
		top: calc(var(--menu-edge) + (var(--head-h) - var(--shape-h)) / 2);
		left: var(--menu-edge);
	}

	/* Der Kopf liegt über der Fläche, auch während sie wieder hochfährt. */
	.flo-js .flo-head {
		position: relative;
		z-index: 50;
	}

	.flo4-menu-open {
		overflow: hidden;
	}

	.flo4-menu-open .flo-head {
		position: fixed;
		inset: 0 0 auto;
		padding: var(--menu-edge) var(--menu-edge) 0;
	}

	.flo4-menu-open .flo-menu-toggle {
		background: var(--menu-shape-fill);
	}

	.flo4-menu-open .flo-menu-toggle:hover {
		background: var(--shape-fill-hover);
	}

	/* Zu: über dem Fenster, unsichtbar und nicht erreichbar. */
	.flo-js .flo-nav {
		position: fixed;
		inset: 0;
		z-index: 40;
		align-self: stretch;                      /* sonst schrumpft es auf seinen Inhalt (align-self: start oben) */
		display: flex;
		flex-direction: column;
		padding: calc(var(--menu-edge) + var(--head-h) + 3.5rem) var(--menu-edge) 1.75rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--menu-ground);
		-webkit-backdrop-filter: blur(var(--menu-blur));
		backdrop-filter: blur(var(--menu-blur));
		visibility: hidden;
		transform: translateY(-100%);
		transition: transform var(--menu-speed-out) var(--ease-in), visibility 0s linear var(--menu-speed-out);
	}

	.flo-js.flo4-menu-open .flo-nav {
		visibility: visible;
		transform: none;
		transition: transform var(--menu-speed) var(--ease), visibility 0s;
	}

	.flo-js .flo-nav__list {
		flex-direction: column;
		gap: var(--shape-gap-menu);
	}

	.flo-js .flo-nav .flo-shape {
		width: var(--shape-w-menu);
		height: var(--shape-h-menu);
		font-size: var(--shape-size-menu);
	}

	.flo-js .flo-nav .flo-shape:not(.is-current) {
		background: var(--menu-shape-fill);
	}

	.flo-js .flo-nav .flo-shape:not(.is-current):hover {
		background: var(--shape-fill-hover);
	}

	.flo-js .flo-nav .flo-shape--circle {
		width: var(--shape-h-menu);
	}

	.flo-js .flo-nav__extra {
		display: flex;
		flex-direction: column;
		gap: 0.875rem;
		margin-top: auto;
		padding-top: 3rem;
	}

	/* Die Punkte: beim Öffnen nacheinander, beim Schließen alle zugleich. */
	.flo-js .flo-nav__item,
	.flo-js .flo-nav__extra {
		opacity: 0;
		transform: translateY(-0.5rem);
		transition: opacity var(--menu-item-speed) var(--ease-in), transform var(--menu-item-speed) var(--ease-in);
	}

	.flo4-menu-open .flo-nav__item,
	.flo4-menu-open .flo-nav__extra {
		opacity: 1;
		transform: none;
		transition-timing-function: var(--ease);
		transition-delay: calc(var(--menu-item-delay) + var(--flo-i, 0) * var(--menu-stagger));
	}

	.flo-nav__mail {
		margin: 0;
		font: var(--weight-regular) var(--size-text) / 1.4 var(--font-ui);
	}

	.flo-nav__mail a {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.flo-nav__small {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.25rem;
		margin: 0;
		padding: 0;
		list-style: none;
		font: var(--weight-regular) var(--size-foot) / 1.5 var(--font-ui);
		letter-spacing: var(--tracking-foot);
		color: var(--muted);
	}

	.flo-nav__small a {
		text-decoration: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.flo-js .flo-nav,
		.flo-js .flo-nav__item,
		.flo-js .flo-nav__extra {
			transition: none !important;
		}
	}
}

@media (max-width: 47.5rem) {
	:root {
		--menu-edge: var(--edge-narrow);
	}

	.flo-frame {
		padding: var(--edge-narrow);
	}

	.flo-head {
		gap: 0.875rem;
	}

	.flo-name {
		font-size: var(--size-name-narrow);
		line-height: 1.1;
	}

	.flo-head__tools {
		gap: 0;
	}

	.flo-langs {
		gap: 0;
	}

	.flo-langs__link {
		min-width: var(--hit-narrow);
		padding: 0;
	}

	.flo-theme {
		width: var(--hit-narrow);
	}

	.flo-home__top {
		min-height: calc(var(--home-top-mobile) - var(--edge-narrow) - var(--head-h));
	}

	.flo-tagline {
		margin-top: 1.5rem;
		font-size: var(--size-lead-narrow);
	}

	.flo-news {
		--tile-max-h: var(--tile-max-h-narrow);
		--news-thumb: var(--news-thumb-narrow);
		gap: 1rem;
	}

	.flo-news__item {
		grid-template-columns: minmax(0, 1fr);
		column-gap: var(--grid-gap-narrow);
		padding: var(--news-pad-narrow) 0;
	}

	.flo-news__body {
		grid-column: 1 / -1;
	}

	/* Ohne Bild: die graue Fläche so breit wie die Bilder, nicht schmaler. */
	.flo-news:not(.flo-news--compact) .flo-news__image:not(:has(img)) {
		width: 100%;
	}

	.flo-news__title {
		margin-top: 0.625rem;
		font-size: 1.25rem;
	}
}

/* -------------------------------------------------------------------------
  10  Weniger Bewegung

   Weiches Scrollen (etwa zu #news) nur, wer Bewegung nicht abgestellt hat.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
  11  Work: Kopf, Umschalter, Raster, Liste

   Überschrift links, Raster | Liste rechts. Beide Ansichten stehen im
   Markup, eine trägt hidden. Hat jemand zuletzt die Liste gewählt und ruft
   Work ohne ?view= auf, setzt das Skript im <head> data-flo4-view="list" —
   dann gilt die Liste schon beim ersten Bild, app.js räumt danach auf.
   ------------------------------------------------------------------------- */

.flo-pagehead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin: var(--title-space) 0 3rem;
}

.flo-pagehead .flo-title {
	margin: 0;
}

.flo-empty {
	margin: 0;
	color: var(--muted);
}

/* Umschalter: zwei Pillen, die gewählte grau gefüllt. */
.flo-switch {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flo-switch__link,
.flo-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: var(--hit);
	padding: 0 1.25rem;
	border-radius: 999px;
	font: var(--weight-label) var(--size-label) / 1 var(--font-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--muted);
	transition: background-color var(--speed-hover) var(--ease), color var(--speed-hover) var(--ease);
}

.flo-switch__link[aria-current="true"],
.flo-pill {
	background: var(--panel);
	color: var(--ink);
}

.flo-switch__link[aria-current="true"]:hover {
	color: var(--ink);
}

.flo-pill:hover {
	background: var(--panel-hover);
	color: var(--ink);
}

:root[data-flo4-view="list"] [data-flo4-panel="grid"] {
	display: none !important;
}

:root[data-flo4-view="list"] [data-flo4-panel="list"] {
	display: block !important;
}

/*
 * Raster: so viele Spalten, wie mit --tile-min hineinpassen, höchstens
 * --grid-cols. Jede Kachel belegt zwei Zeilen des Rasters — Bild und
 * Beschriftung — und reicht sie an ihren Inhalt durch (subgrid). So stehen
 * die Bilder einer Reihe unten bündig und die Beschriftungen beginnen auf
 * einer Höhe.
 */
.flo-tiles {
	--tile-col: calc((100% - (var(--grid-cols) - 1) * var(--grid-gap)) / var(--grid-cols));
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--tile-min), var(--tile-col))), 1fr));
	column-gap: var(--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.flo-tile,
.flo-tile__body {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	min-width: 0;
}

.flo-tile {
	margin-bottom: var(--grid-row-gap);
}

.flo-tile__body {
	color: var(--ink);
	text-decoration: none;
}

a.flo-tile__body:hover {
	color: var(--ink);
}

.flo-tile__frame {
	display: block;
	align-self: end;
}

/* Zu hohe Bilder werden auf --tile-max-h beschnitten, flachere behalten ihr Format. */
.flo-tile__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--tile-max-h);
	object-fit: cover;
}

/* Eine Arbeit ohne Bild: die graue Karte, so hoch wie das höchste Bild. */
.flo-tile__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75rem;
	height: var(--tile-max-h);
	padding: var(--card-pad);
	background: var(--panel);
	transition: background-color var(--speed-hover) var(--ease);
}

a.flo-tile__body:hover .flo-tile__card {
	background: var(--panel-hover);
}

.flo-tile__cardtitle {
	font: var(--weight-light) var(--size-card) / 1.12 var(--font-ui);
	letter-spacing: var(--tracking-title);
	overflow-wrap: anywhere;
	transition: color var(--speed-hover) var(--ease);
}

.flo-tile__ext {
	font: var(--weight-label) var(--size-label) / 1.2 var(--font-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--accent);
}

.flo-tile__caption {
	align-self: start;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.1875rem 0.75rem;
	padding-top: 0.625rem;
}

.flo-tile__title {
	font-size: var(--size-text);
	line-height: 1.4;
	transition: color var(--speed-hover) var(--ease);
}

a.flo-tile__body:hover .flo-tile__title,
a.flo-tile__body:hover .flo-tile__cardtitle {
	color: var(--accent);
}

.flo-tile__place,
.flo-tile__year {
	font: var(--weight-label) var(--size-small) / 1.35 var(--font-ui);
	color: var(--muted);
}

.flo-tile__year {
	font-size: var(--size-label);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.flo-tile__place--below {
	grid-column: 1 / -1;
}

/*
 * Liste: Spalten Titel, Ort, Jahr und ein Zeichen. „→“ erscheint beim
 * Überfahren einer Arbeit mit eigener Seite, „↗“ steht immer.
 */
.flo-rowlist__head,
.flo-row {
	display: grid;
	grid-template-columns: var(--list-cols);
	gap: 0.125rem var(--grid-gap);
	align-items: baseline;
}

.flo-rowlist__head {
	margin: 0;
	padding-bottom: 0.625rem;
	font: var(--weight-label) var(--size-label) / 1.4 var(--font-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--muted);
}

.flo-rowlist__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: var(--list-rule);
}

.flo-rowlist__list > li {
	border-top: var(--list-rule);
}

.flo-row {
	padding: var(--row-pad) 0;
	color: var(--ink);
	text-decoration: none;
}

a.flo-row:hover {
	color: var(--ink);
}

.flo-row__title {
	font-size: var(--size-row);
	line-height: 1.4;
	transition: color var(--speed-hover) var(--ease);
}

.flo-row__place {
	font: var(--weight-regular) var(--size-small) / 1.4 var(--font-ui);
	color: var(--muted);
}

.flo-row__year {
	font: var(--weight-label) 0.75rem / 1.4 var(--font-ui);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.flo-row__mark {
	font: var(--weight-regular) var(--size-small) / 1.4 var(--font-ui);
	text-align: right;
	color: var(--muted);
	transition: color var(--speed-hover) var(--ease), opacity var(--speed-hover) var(--ease);
}

.flo-row__mark--hover {
	opacity: 0;
}

a.flo-row:hover .flo-row__title,
a.flo-row:hover .flo-row__mark {
	color: var(--accent);
}

a.flo-row:hover .flo-row__mark--hover,
a.flo-row:focus-visible .flo-row__mark--hover {
	opacity: 1;
}

@media (max-width: 47.5rem) {
	.flo-pagehead {
		flex-wrap: nowrap;
		align-items: center;
		margin: 2.5rem 0 1.75rem;
	}

	.flo-pagehead .flo-title,
	.flo-about .flo-title,
	.flo-contact .flo-title {
		font-size: 1.75rem;
	}

	.flo-switch {
		gap: 0.125rem;
	}

	.flo-switch__link {
		padding: 0 1rem;
	}

	.flo-tiles {
		--tile-max-h: var(--tile-max-h-narrow);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--grid-gap-narrow);
	}

	.flo-tile {
		margin-bottom: var(--grid-row-gap-narrow);
	}

	.flo-tile__card {
		padding: var(--card-pad-narrow);
	}

	.flo-tile__cardtitle {
		font-size: var(--size-card-narrow);
	}

	.flo-tile__caption {
		gap: 0.125rem 0.5rem;
		padding-top: 0.5rem;
	}

	.flo-tile__title {
		font-size: 0.8125rem;
		line-height: 1.35;
	}

	.flo-tile__place {
		font-size: var(--size-label);
	}

	.flo-rowlist__head {
		display: none;
	}

	.flo-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.flo-row__place {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.flo-row__mark {
		display: none;
	}
}

/* -------------------------------------------------------------------------
  12  Eine Arbeit, als Seite und als Ebene

   Oben rechts „Schließen“, dann Titel, Angaben, Text und die Galerie: alle
   Bilder gleich hoch (--gallery-h) nebeneinander, umbrechend; am Handy
   jedes in voller Breite. Als Ebene liegt derselbe Block über der Seite,
   die Seite verschwimmt dahinter; gescrollt wird in der Ebene (app.js,
   Abschnitt 5). Die Ebene hat ihren eigenen Knopf „Schließen“ an derselben
   Stelle; den Link der Seite nimmt das Skript dort heraus.
   ------------------------------------------------------------------------- */

.flo-work__close {
	display: flex;
	justify-content: flex-end;
	margin: 2.75rem 0 0;
}

.flo-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: var(--hit);
	font: var(--weight-label) var(--size-label) / 1 var(--font-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
}

.flo-textlink:hover {
	color: var(--accent);
}

.flo-work__title {
	margin: 0.75rem 0 0;
	font: var(--weight-light) var(--size-work-title) / var(--leading-title) var(--font-ui);
	letter-spacing: var(--tracking-title);
	overflow-wrap: break-word;
}

.flo-work__title:focus {
	outline: none;
}

.flo-work__facts {
	max-width: var(--work-text-max);
	margin: 0.75rem 0 0;
	font: var(--weight-regular) var(--size-small) / 1.4 var(--font-ui);
	color: var(--muted);
}

.flo-work__text {
	max-width: var(--work-text-max);
	margin-top: 2.25rem;
	font-size: var(--size-work-text);
	line-height: var(--leading-work);
}

.flo-work__link {
	margin: 1.25rem 0 0;
}

.flo-work__link a {
	font-family: var(--font-ui);
	font-weight: var(--weight-label);
	font-size: var(--size-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	text-decoration: none;
}

/* Fließtext aus dem Editor: Absätze mit einer Zeile Luft. */
.flo-prose > * {
	margin: 0;
}

.flo-prose > * + * {
	margin-top: 1em;
}

.flo-prose ul,
.flo-prose ol {
	padding-left: 1.25em;
}

.flo-gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--gallery-gap);
	margin-top: var(--gallery-space);
}

.flo-gallery__item {
	max-width: 100%;
	margin: 0;
}

.flo-gallery__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--gallery-h);
	object-fit: contain;
}

.flo-gallery__caption {
	max-width: 100%;
	margin-top: 0.5rem;
	font: var(--weight-regular) var(--size-small) / 1.35 var(--font-ui);
	color: var(--muted);
}

/* Die Ebene */
.flo4-layer-open {
	overflow: hidden;
}

.flo-layer {
	position: fixed;
	inset: 0;
	z-index: 70;
	align-self: stretch;
	background: var(--veil);
	-webkit-backdrop-filter: blur(var(--veil-blur));
	backdrop-filter: blur(var(--veil-blur));
	opacity: 0;
	transition: opacity var(--layer-speed) var(--ease);
}

.flo-layer.is-open {
	opacity: 1;
}

.flo-layer:focus {
	outline: none;
}

.flo-layer__close {
	position: absolute;
	top: var(--edge);
	right: var(--edge);
	z-index: 1;
	border: 0;
	cursor: pointer;
}

.flo-layer__scroll {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * Der Inhalt steht in der Spalte der Seite, rechts neben dem Platz des Menüs:
 * so breit wie der Rahmen und wie er in der Mitte.
 */
.flo-layer__inner {
	max-width: calc(var(--column-max) + 2 * var(--edge) + var(--nav-w) + var(--frame-gap));
	margin-inline: auto;
	padding: var(--edge) var(--edge) 6rem calc(var(--edge) + var(--nav-w) + var(--frame-gap));
	transform: translateY(0.75rem);
	transition: transform var(--layer-speed) var(--ease);
}

.flo-layer.is-open .flo-layer__inner {
	transform: none;
}

/* In der Ebene beginnt der Titel unter ihrem Knopf „Schließen“, wie auf der Seite. */
.flo-layer .flo-work__title {
	margin-top: calc(var(--hit) + 0.75rem);
}

@media (max-width: 47.5rem) {
	.flo-work__close {
		margin-top: 1.75rem;
	}

	.flo-work__title {
		font-size: 1.875rem;
	}

	.flo-work__text {
		margin-top: 1.75rem;
	}

	.flo-gallery {
		flex-direction: column;
		gap: 1rem;
		margin-top: 3rem;
	}

	.flo-gallery__item,
	.flo-gallery__image {
		width: 100%;
	}

	.flo-gallery__image {
		height: auto;
	}

	.flo-layer__close {
		top: var(--edge-narrow);
		right: var(--edge-narrow);
	}

	.flo-layer__inner {
		padding: var(--edge-narrow) var(--edge-narrow) 4rem;
	}
}

/* -------------------------------------------------------------------------
  13  About und Kontakt

   About: Statement groß, daneben das Portrait; darunter die Vorträge als
   Liste über die volle Breite, der Lebenslauf (Vita-Abschnitte) in zwei
   Spalten und die Presse als Liste.
   Kontakt: aufgebaut wie die Startseite. Titel und Einleitung stehen in
   einem Bereich der Höhe --contact-top (etwas kürzer als .flo-home__top,
   damit die Seite samt Fuß in ein Fenster passt); eine Leerzeile unter der
   Einleitung die E-Mail-Adresse in derselben Größe, darunter Instagram und
   die übrigen Links als graue Pillen untereinander. Keine Linien.
   ------------------------------------------------------------------------- */

.flo-lead {
	max-width: var(--measure);
	font-size: var(--size-lead);
	line-height: var(--leading-lead);
}

.flo-about__intro .flo-lead {
	max-width: var(--work-text-max);
}

.flo-about__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem 4.5rem;
	align-items: start;
}

.flo-about__intro.has-portrait {
	grid-template-columns: minmax(0, 1fr) var(--portrait-w);
}

.flo-about__portrait {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--panel);
}

.flo-about__portrait picture,
.flo-about__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flo-about__part {
	margin-top: var(--part-space);
}

.flo-parthead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	min-height: var(--hit);
	margin-bottom: 1.5rem;
}

.flo-cv {
	columns: 2;
	column-gap: 4.5rem;
}

.flo-cv__section {
	break-inside: avoid;
	margin-bottom: 3rem;
}

.flo-cv__heading {
	margin: 0 0 0.875rem;
	font: var(--weight-label) var(--size-text) / 1.3 var(--font-ui);
}

.flo-cv__rows {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
}

.flo-cv__row {
	display: grid;
	grid-template-columns: var(--cv-year-w) minmax(0, 1fr);
	gap: 1rem;
	align-items: baseline;
}

.flo-cv__year,
.flo-press__year {
	font: var(--weight-label) 0.75rem / 1.4 var(--font-ui);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.flo-cv__entry {
	margin: 0;
	line-height: 1.55;
}

.flo-cv__entry a {
	text-decoration: none;
}

.flo-cv__more {
	color: var(--muted);
}

.flo-press {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--rule-soft);
}

.flo-press > li {
	border-top: 1px solid var(--rule-soft);
}

.flo-press__row {
	display: grid;
	grid-template-columns: var(--cv-year-w) minmax(0, 2fr) minmax(0, 4fr) 5rem;
	gap: 0.25rem 1rem;
	align-items: baseline;
	padding: 0.875rem 0;
	color: var(--ink);
	text-decoration: none;
}

a.flo-press__row:hover {
	color: var(--ink);
}

.flo-press__medium {
	font: var(--weight-regular) var(--size-small) / 1.4 var(--font-ui);
	color: var(--muted);
}

.flo-press__title {
	font-size: var(--size-row);
	line-height: 1.4;
	transition: color var(--speed-hover) var(--ease);
}

.flo-press__kind {
	font: var(--weight-label) var(--size-label) / 1.4 var(--font-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	text-align: right;
	color: var(--muted);
	transition: color var(--speed-hover) var(--ease);
}

a.flo-press__row:hover .flo-press__title,
a.flo-press__row:hover .flo-press__kind {
	color: var(--accent);
}

/* flow-root: der Abstand über dem Titel zählt zur Höhe des Bereichs. */
.flo-contact__top {
	display: flow-root;
	min-height: calc(var(--contact-top) - var(--edge) - var(--head-h));
	padding-bottom: var(--content-space);
}

.flo-contact__intro {
	margin: 0;
}

/* Abstand eine Leerzeile: so hoch wie eine Zeile der Einleitung. */
.flo-contact__mail {
	margin: calc(var(--leading-lead) * 1em) 0 0;
	overflow-wrap: anywhere;
}

.flo-contact__mail a:hover {
	color: var(--accent);
}

.flo-contact__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin: var(--contact-links-space) 0 0;
	padding: 0;
	list-style: none;
}

.flo-contact__more {
	max-width: var(--measure);
	margin-top: 3.5rem;
	color: var(--muted);
}

@media (max-width: 47.5rem) {
	.flo-about .flo-title,
	.flo-contact .flo-title {
		margin: 2.5rem 0 1.75rem;
	}

	.flo-lead {
		font-size: var(--size-lead-narrow);
	}

	.flo-about__intro.has-portrait {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.flo-about__portrait {
		width: 15rem;
	}

	.flo-about__part {
		margin-top: 5rem;
	}

	.flo-cv {
		columns: 1;
	}

	.flo-cv__section {
		margin-bottom: 2rem;
	}

	.flo-cv__row,
	.flo-press__row {
		--cv-year-w: 4.5rem;
		gap: 0.75rem;
	}

	.flo-press__row {
		grid-template-columns: var(--cv-year-w) minmax(0, 1fr) auto;
		row-gap: 0.125rem;
	}

	.flo-press__medium {
		grid-column: 2;
	}

	.flo-press__title {
		grid-column: 2;
		grid-row: 2;
	}

	.flo-press__kind {
		grid-column: 3;
		grid-row: 1;
	}

	.flo-contact__top {
		min-height: calc(var(--contact-top-mobile) - var(--edge-narrow) - var(--head-h));
	}
}

/* -------------------------------------------------------------------------
  14  Seitenart AR-Objekt (/object)

   Entwurf A „Sockel“: das Objekt hell
   wie im Museum, das Werkschild darunter oder daneben. Kein Name, kein
   Menü — das Template page-ar-object.php bringt nur diese Teile mit.

   Drei Fassungen nach der Fensterbreite: Handy gestapelt; Tablet ab 40rem
   mit Titel links und Knopf rechts; Desktop ab 64rem mit der Bühne links
   und dem Werkschild rechts.

   Knopf oder QR-Code: zuerst nach dem Zeiger — Finger zeigt den AR-Knopf,
   Maus den QR-Code —, dann nach ar-object.js, sobald model-viewer weiß, ob
   AR geht (flo-ar-yes, flo-ar-no). Ein iPad quer bekommt so das breite
   Layout und trotzdem den Knopf.
   ------------------------------------------------------------------------- */

.flo-ar-body {
	background: var(--ar-ground);
}

.flo-ar {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

/* Bühne: das Objekt füllt sie, darunter der Hinweis */
.flo-ar__stage {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	gap: var(--ar-gap-hint);
	min-height: var(--ar-stage-min);
	background: var(--ar-ground);                 /* auch im Vollbild */
}

.flo-ar__viewer {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-height: var(--ar-stage-min);
	background-color: transparent;

	/* Eigene Variablen von model-viewer: kein weißer Grund, kein blauer Ladebalken */
	--poster-color: transparent;
	--progress-bar-color: var(--ink);
	--progress-bar-height: 2px;
	--progress-mask: transparent;
}

.flo-ar__fallback {
	display: block;
	width: min(70%, 28rem);
	margin: auto;
}

.flo-ar__bar {
	display: flex;
	justify-content: center;
	padding-bottom: var(--ar-gap-info);         /* Luft zum Titel; ab Tablet übernimmt das Werkschild */
}

.flo-ar__hint {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--ar-size-hint);
	color: var(--muted);
	transition:
		opacity var(--ar-speed-hint) var(--ease),
		visibility 0s linear 0s;
}

.flo-ar__hint.is-gone {
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--ar-speed-hint) var(--ease),
		visibility 0s linear var(--ar-speed-hint);
}

.flo-ar__hint-mouse {
	display: none;
}

/* Ohne Skript lässt sich nichts drehen und AR nicht starten: Hinweis und
   Knopf entfallen, das Vorschaubild bleibt (der QR-Code am Desktop auch). */
html:not(.flo-js) .flo-ar__hint,
html:not(.flo-js) .flo-ar__go {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.flo-ar__hint-touch {
		display: none;
	}

	.flo-ar__hint-mouse {
		display: inline;
	}
}

/* Strichzeichen: Pfeil, Würfel, Zurücksetzen, Vollbild */
.flo-ar__hint svg,
.flo-ar__tool svg,
.flo-ar__go svg,
.flo-ar__qr-title svg {
	flex: none;
	width: 1.2em;
	height: 1.2em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.flo-ar__tools,
.flo-ar__tools[hidden],
.flo-ar__tool[hidden] {
	display: none;
}

/* Werkschild */
.flo-ar__info {
	display: flex;
	flex-direction: column;
	gap: var(--ar-gap-info);
	padding: 0 var(--ar-pad) 1.875rem;
}

.flo-ar__label {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.flo-ar__title {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--ar-size-title);
	font-weight: var(--weight-label);
	line-height: 1.15;
	letter-spacing: var(--ar-tracking-title);
}

.flo-ar__byline {
	margin: 0;
	font-family: var(--font-text);
	font-size: var(--ar-size-byline);
	line-height: 1.5;
	color: var(--muted);
}

.flo-ar__text {
	margin-top: 0.5rem;
	font-family: var(--font-text);
	font-size: var(--ar-size-byline);
	line-height: var(--ar-leading-text);
}

.flo-ar__text p {
	margin: 0 0 0.75em;
}

.flo-ar__text > :last-child {
	margin-bottom: 0;
}

/* AR-Knopf und QR-Code */
.flo-ar__act {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.flo-ar__act:empty {
	display: none;
}

.flo-ar__go,
.flo-ar__qr {
	display: none;
}

.flo-ar__go {
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	height: var(--ar-button-h);
	padding: 0 1.5rem;
	border: 0;
	border-radius: calc(var(--ar-button-h) / 2);
	background: var(--ink);
	color: var(--ground);
	font-family: var(--font-ui);
	font-size: var(--ar-size-button);
	font-weight: var(--weight-label);
	cursor: pointer;
}

.flo-ar__go:hover {
	background: var(--accent);
}

.flo-ar__qr {
	align-items: center;
	gap: var(--ar-qr-gap);
}

.flo-ar__qr-code {
	flex: none;
	padding: var(--ar-qr-pad);
	border: 1px solid var(--ar-qr-line);
	background: var(--ar-qr-ground);
}

.flo-ar__qr-code svg {
	display: block;
	width: var(--ar-qr-size);
	height: var(--ar-qr-size);
	fill: var(--ar-qr-ink);
}

.flo-ar__qr-words {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

.flo-ar__qr-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-ui);
	font-size: var(--ar-size-byline-wide);
	font-weight: var(--weight-label);
	white-space: nowrap;
}

.flo-ar__qr-text {
	font-family: var(--font-text);
	font-size: var(--size-text);
	line-height: 1.6;
	color: var(--muted);
	text-wrap: balance;
}

@media (pointer: coarse) {
	.flo-ar__go {
		display: flex;
	}
}

@media (hover: hover) and (pointer: fine) {
	.flo-ar__qr {
		display: flex;
	}
}

.flo-ar.flo-ar-yes .flo-ar__go {
	display: flex;
}

.flo-ar.flo-ar-yes .flo-ar__qr,
.flo-ar.flo-ar-no .flo-ar__go {
	display: none;
}

/* Impressum und Datenschutz, klein unter allem */
.flo-ar__foot {
	padding: 1rem var(--ar-pad) 1.5rem;
}

.flo-ar__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--size-label);
	color: var(--muted);
}

.flo-ar__legal a {
	text-decoration: none;
}

/* Tablet: Titel und Zeile links, Knopf rechts, ohne Linie darüber */
@media (min-width: 40rem) {
	.flo-ar__stage {
		gap: 1.5rem;
	}

	.flo-ar__bar {
		padding-bottom: 0;
	}

	.flo-ar__hint {
		font-size: var(--ar-size-hint-wide);
	}

	.flo-ar__info {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2.5rem;
		margin: 0 var(--ar-pad-tablet);
		padding: 2rem 0 2.75rem;
	}

	.flo-ar__label {
		max-width: var(--ar-label-max);
		gap: 0.625rem;
	}

	.flo-ar__title {
		font-size: var(--ar-size-title-tablet);
		line-height: 1.1;
	}

	.flo-ar__byline,
	.flo-ar__text {
		font-size: var(--ar-size-byline-wide);
		line-height: 1.55;
	}

	.flo-ar__text {
		line-height: var(--ar-leading-text);
	}

	.flo-ar__act {
		flex: none;
		align-items: flex-end;
		width: var(--ar-button-w);
	}

	.flo-ar__foot {
		padding-inline: var(--ar-pad-tablet);
	}
}

/* Desktop: Bühne links mit Leiste unten, Werkschild rechts unten */
@media (min-width: 64rem) {
	.flo-ar {
		flex-flow: row wrap;
	}

	.flo-ar__stage {
		flex: 999 1 var(--ar-stage-w);
		min-width: 0;
		min-height: 100vh;
		min-height: 100svh;
		padding-top: var(--ar-pad);
		gap: 0;
	}

	.flo-ar__bar {
		align-self: stretch;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		min-height: var(--ar-tool);
		padding: var(--ar-pad) var(--ar-pad-desk) 2rem;
	}

	.flo-ar__tools:not([hidden]) {
		display: flex;
		gap: 0.5rem;
	}

	.flo-ar__tool {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--ar-tool);
		height: var(--ar-tool);
		padding: 0;
		border: 1px solid var(--ar-tool-line);
		border-radius: 50%;
		background: transparent;
		color: var(--ink);
		cursor: pointer;
	}

	.flo-ar__tool:hover,
	.flo-ar__tool[aria-pressed="true"] {
		border-color: var(--ink);
	}

	.flo-ar__info {
		flex: 1 1 var(--ar-aside-w);
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-end;
		gap: var(--ar-gap-info-desk);
		max-width: var(--ar-aside-max);
		margin: 0;
		padding: var(--ar-pad-desk) var(--ar-pad-desk) 3.5rem;
	}

	.flo-ar__label {
		max-width: none;
		gap: 0.75rem;
	}

	.flo-ar__title {
		font-size: var(--ar-size-title-desk);
		letter-spacing: calc(var(--ar-tracking-title) * 1.5);
	}

	.flo-ar__act {
		align-items: stretch;
		width: auto;
		padding-top: 1.75rem;
		border-top: 1px solid var(--rule-soft);
	}

	.flo-ar__foot {
		padding-inline: var(--ar-pad-desk);
	}
}


/* -------------------------------------------------------------------------
  15  Lightbox: die Bilder einer Arbeit groß

   Nur, wenn sie im Backend eingeschaltet ist. Dann ist jedes Bild der
   Galerie ein Link (.flo-gallery__zoom); das Skript legt das Bild groß über
   alles (app.js, Abschnitt 6). Oben rechts „Schließen“, darunter das Bild
   so groß, wie es passt, unten Zurück, die Zählung mit Bildunterschrift
   und Vor.
   ------------------------------------------------------------------------- */

.flo-gallery__zoom {
	display: block;
	cursor: zoom-in;
}

.flo4-zoom-open {
	overflow: hidden;
}

.flo-zoom {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: var(--zoom-gap);
	padding: var(--edge);
	background: var(--zoom-ground);
	opacity: 0;
	transition: opacity var(--layer-speed) var(--ease);
}

.flo-zoom.is-open {
	opacity: 1;
}

.flo-zoom:focus {
	outline: none;
}

.flo-zoom .flo-pill {
	border: 0;
	cursor: pointer;
}

.flo-zoom__close {
	justify-self: end;
}

.flo-zoom__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
}

.flo-zoom__stage picture {
	display: contents;
}

/* So groß, wie es passt, nie verzerrt. */
.flo-zoom__image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.flo-zoom__bar {
	display: grid;
	grid-template-columns: var(--hit) minmax(0, 1fr) var(--hit);
	align-items: center;
	gap: var(--zoom-gap);
}

.flo-zoom__step {
	grid-row: 1;
	justify-content: center;
	width: var(--hit);
	padding: 0;
	font-size: 1rem;
}

.flo-zoom__step + .flo-zoom__info + .flo-zoom__step {
	grid-column: 3;
}

.flo-zoom__info {
	grid-column: 2;
	grid-row: 1;
	text-align: center;
}

.flo-zoom__count,
.flo-zoom__caption {
	margin: 0;
}

.flo-zoom__count {
	font: var(--weight-label) var(--size-label) / 1.4 var(--font-ui);
	letter-spacing: var(--tracking-label);
	color: var(--muted);
}

.flo-zoom__caption {
	max-width: var(--work-text-max);
	margin-inline: auto;
	font: var(--weight-regular) var(--size-small) / 1.35 var(--font-ui);
	color: var(--muted);
}

.flo-zoom__count + .flo-zoom__caption {
	margin-top: 0.25rem;
}

@media (max-width: 47.5rem) {
	.flo-zoom {
		padding: var(--edge-narrow);
	}
}