/* Portfolio: Feinheiten, die theme.json nicht abdeckt. Schrift, Farben und Größen kommen aus theme.json / „Stile“. */

/* Dunkles Layout: überschreibt nur die Farbwerte aus theme.json.
   Ohne Wahl folgt die Seite dem System, der Umschalter setzt data-theme auf <html>. */
:root[data-theme="dark"] {
	--wp--preset--color--text: #e4e2de;
	--wp--preset--color--background: #1d1f1f;
	--wp--preset--color--muted: #9a9c9b;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--text: #e4e2de;
		--wp--preset--color--background: #1d1f1f;
		--wp--preset--color--muted: #9a9c9b;
		color-scheme: dark;
	}
}

/* Hell/Dunkel: alle Flächen mit eigener Hintergrundfarbe wechseln gleichzeitig und gleich schnell. */
body,
.site-header,
.site-footer,
.projekt__show {
	transition: background-color 0.25s ease, color 0.25s ease;
}

body {
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

@media (max-width: 500px) {
	body {
		--wp--preset--font-size--normal: 17px;
		--wp--preset--font-size--klein: 13px;
	}
}

/* Kopfzeile: Name, 30px Abstand, Menü. Am Handy Name links, Menü rechts. */
.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 30px;
	row-gap: 0;
	padding: 8px 15px; /* 11.11.2026: oben 10 → 8 px (Banner 15 % schmaler) */
	background: var(--wp--preset--color--background);
}

/* Kopfzeile als Banner in Hintergrundfarbe, das nach unten sanft ausläuft (29.10.2026). Bleibt beim Scrollen oben;
   auf Seiten mit endlosem Mosaik liegt es fest über der Fläche. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding-bottom: 12px; /* 11.11.2026: Banner 15 % schmaler (vorher 17 px, davor 10 px) */
}

.site-header::after {
	content: "";
	position: absolute;
	top: calc(100% - 1px); /* 1 px Überlappung: keine Fuge bei krummen Pixelwerten */
	left: 0;
	right: 0;
	height: 37px; /* 11.11.2026: 36 px Auslauf (vorher 30, kurz 48) */
	/* Hintergrundfarbe durch eine Maske ausgeblendet: die Farbe wechselt bei Hell/Dunkel gleichzeitig und gleich schnell
	   wie die Kopfzeile; die Maske fällt weich ohne Knick ab (smootherstep, 17 Stufen). */
	background-color: var(--wp--preset--color--background);
	-webkit-mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 1.000) 0.0%,
		rgba(0, 0, 0, 0.998) 6.2%,
		rgba(0, 0, 0, 0.984) 12.5%,
		rgba(0, 0, 0, 0.951) 18.8%,
		rgba(0, 0, 0, 0.896) 25.0%,
		rgba(0, 0, 0, 0.820) 31.2%,
		rgba(0, 0, 0, 0.725) 37.5%,
		rgba(0, 0, 0, 0.616) 43.8%,
		rgba(0, 0, 0, 0.500) 50.0%,
		rgba(0, 0, 0, 0.384) 56.2%,
		rgba(0, 0, 0, 0.275) 62.5%,
		rgba(0, 0, 0, 0.180) 68.8%,
		rgba(0, 0, 0, 0.104) 75.0%,
		rgba(0, 0, 0, 0.049) 81.2%,
		rgba(0, 0, 0, 0.016) 87.5%,
		rgba(0, 0, 0, 0.002) 93.8%,
		rgba(0, 0, 0, 0.000) 100.0%
	);
	mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 1.000) 0.0%,
		rgba(0, 0, 0, 0.998) 6.2%,
		rgba(0, 0, 0, 0.984) 12.5%,
		rgba(0, 0, 0, 0.951) 18.8%,
		rgba(0, 0, 0, 0.896) 25.0%,
		rgba(0, 0, 0, 0.820) 31.2%,
		rgba(0, 0, 0, 0.725) 37.5%,
		rgba(0, 0, 0, 0.616) 43.8%,
		rgba(0, 0, 0, 0.500) 50.0%,
		rgba(0, 0, 0, 0.384) 56.2%,
		rgba(0, 0, 0, 0.275) 62.5%,
		rgba(0, 0, 0, 0.180) 68.8%,
		rgba(0, 0, 0, 0.104) 75.0%,
		rgba(0, 0, 0, 0.049) 81.2%,
		rgba(0, 0, 0, 0.016) 87.5%,
		rgba(0, 0, 0, 0.002) 93.8%,
		rgba(0, 0, 0, 0.000) 100.0%
	);
	transition: background-color 0.25s ease;
	pointer-events: none;
}

/* WordPress legt die Kopfzeile in ein eigenes <header>-Kästchen, das nur so hoch ist wie sie selbst – darin kann sie
   nicht kleben. Ohne eigenes Kästchen bleibt sie beim Scrollen samt Verlauf oben (11.11.2026). */
header.wp-block-template-part {
	display: contents;
}

html.hat-endlos,
html.hat-endlos body {
	overflow: hidden;
	overscroll-behavior: none;
}

html.hat-endlos .site-header {
	position: fixed;
	left: 0;
	right: 0;
}

/* WordPress setzt im Fluss-Layout Abstände über den Elementen; in der Kopfzeile regelt das gap. */
.site-header > * {
	margin-block: 0;
}

.site-header .wp-block-site-title {
	margin: 0;
}

/* Hauptmenü: „Fotografie, Grafik, Services, About“, Komma aus dem CSS, aktiver Punkt kursiv. */
.haupt-menue ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.3em;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flex, damit der Zeilenumbruch im HTML vor dem Komma keinen Leerraum erzeugt. */
.haupt-menue li {
	display: flex;
	align-items: baseline;
}

.haupt-menue li:not(:last-child)::after {
	content: ",";
	font-style: normal;
}

/* Wörter, die beim Darüberfahren oder als aktueller Punkt kursiv werden, behalten ihre Breite: Das Wort steht mittig
   in einem Feld, das so breit ist wie die breitere der beiden Schreibweisen (zwei unsichtbare Kopien aus data-text,
   eine gerade, eine kursiv, ohne Höhe). So springen weder das Wort noch die Nachbarn. */
[data-text] {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}

[data-text]::before,
[data-text]::after {
	content: attr(data-text);
	order: 1;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	user-select: none;
	speak: never;
}

[data-text]::before {
	font-style: normal;
	letter-spacing: var(--sperrung-gerade);
}

[data-text]::after {
	font-style: italic;
	letter-spacing: var(--sperrung-kursiv);
}

/* Kursiv ist bei Crimson Pro rund 3 % schmaler; etwas mehr Buchstabenabstand gleicht das aus (gemessen an den
   Menüwörtern DE/EN: im Mittel 0,032 em je Buchstabe). Grundabstand 0,45 px = 0,025 em der 18-px-Grundschrift. */
:root {
	--sperrung-gerade: 0.45px;
	--sperrung-kursiv: calc(0.45px + 0.032em);
}

.haupt-menue .current-menu-item > a,
.haupt-menue a:hover {
	letter-spacing: var(--sperrung-kursiv);
}

.haupt-menue .current-menu-item > a,
.haupt-menue a:hover {
	font-style: italic;
}

/* Rechts in der Kopfzeile: Sprachwahl „DE EN“ (klein, aktuelle Sprache kursiv) und der Hell/Dunkel-Kreis.
   Der Kreis ist so hoch wie die Großbuchstaben von DE/EN und sitzt auf derselben Grundlinie wie die Schrift –
   damit liegt seine Mitte auf halber Höhe der Kleinbuchstaben. */
.kopf-rechts {
	display: flex;
	align-items: baseline;
	gap: 0 0.8em;
	margin-left: auto;
	font-size: var(--wp--preset--font-size--klein);
}

/* Sprachschalter: nur „DE EN“ und ein gefüllter Kreis unter der aktuellen Sprache, Schrift darauf in Hintergrundfarbe.
   Beim Wechsel fliegt der Kreis hinüber und verformt sich dabei (Strecken, Stauchen, Nachschwingen). */
.sprachwahl {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	color: inherit;
	font-size: 0.86em;
	font-style: normal;
	line-height: 1;
	text-decoration: none;
	isolation: isolate;
}

.sprachwahl__de,
.sprachwahl__en {
	width: 1.75em;
	text-align: center;
	letter-spacing: 0.03em;
	transition: color 0.3s ease;
}

/* Träger bewegt sich, der Kreis darin verformt sich. */
.sprachwahl__knopf {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 0.06em;
	width: 1.63em; /* +1 px auf Wunsch von Max (vorher 1.55em) */
	height: 1.63em;
	margin-top: -0.8em; /* Großbuchstaben optisch mittig */
	transition: transform 0.42s cubic-bezier(0.55, -0.15, 0.3, 1.35);
}

.sprachwahl__knopf::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: currentColor;
}

.sprachwahl[data-sprache="de"] .sprachwahl__de,
.sprachwahl[data-sprache="en"] .sprachwahl__en {
	color: var(--wp--preset--color--background);
}

.sprachwahl[data-sprache="en"] .sprachwahl__knopf {
	transform: translateX(1.75em);
}

.sprachwahl.fliegt .sprachwahl__knopf::after {
	animation: sprachwahl-fliegen 0.42s ease-in-out;
}

.sprachwahl:hover:not(.fliegt) .sprachwahl__knopf::after {
	animation: sprachwahl-atmen 1.6s ease-in-out infinite;
}

@keyframes sprachwahl-fliegen {
	0%   { transform: scale(1, 1); }
	30%  { transform: scale(1.75, 0.7); border-radius: 50% / 60%; }
	60%  { transform: scale(0.82, 1.16); }
	80%  { transform: scale(1.07, 0.94); }
	100% { transform: scale(1, 1); }
}

@keyframes sprachwahl-atmen {
	0%, 100% { transform: scale(1, 1); border-radius: 50%; }
	33%      { transform: scale(1.08, 0.94); border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%; }
	66%      { transform: scale(0.95, 1.06); border-radius: 54% 46% 48% 52% / 46% 54% 46% 54%; }
}

/* Größere Tippfläche am Handy, ohne den Schalter zu vergrößern. */
.sprachwahl::before {
	content: "";
	position: absolute;
	inset: -8px;
}

.sprachwahl:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
	border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
	.sprachwahl__knopf,
	.sprachwahl__de,
	.sprachwahl__en {
		transition: none;
	}

	.sprachwahl .sprachwahl__knopf::after {
		animation: none !important;
	}
}

/* Eigener Mauszeiger (nur mit Maus/Trackpad): kleiner grauer, halb durchsichtiger Kreis, der sich mit der Bewegung
   streckt, beim Klicken staucht, über Klickbarem wächst und in der Slideshow einen Pfeil zeigt. Steuerung: functions.php. */
/* Systemzeiger ausblenden: steht als Inline-Stil im <head> (functions.php → portfolio_mauszeiger_head), damit er
   auch beim Seitenwechsel nie kurz auftaucht. */
.mauszeiger {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483647;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.mauszeiger.ist-sichtbar {
	opacity: 1;
}

.mauszeiger__kreis {
	position: absolute;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
	opacity: 0.55;
}

.mauszeiger__pfeil {
	position: absolute;
	transform: translate(-50%, -58%);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--haupt);
	font-size: 15px;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.mauszeiger[data-richtung] .mauszeiger__pfeil {
	opacity: 1;
}

.theme-toggle {
	display: inline-block;
	flex: none;
	width: 0.573em;
	height: 0.573em;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: currentColor;
	color: inherit;
	font-size: inherit;
	cursor: pointer;
	position: relative;
	transition: transform 0.2s ease;
}

/* Größere Tippfläche, ohne den Kreis zu vergrößern. */
.theme-toggle::before {
	content: "";
	position: absolute;
	inset: -12px;
}

.theme-toggle:hover {
	transform: scale(1.2);
}

/* Am Handy passen Name und Menü nicht in eine Zeile. */
@media (max-width: 500px) {
	.site-header {
		row-gap: 4px;
	}

	/* Erste Zeile: Name links, Sprachwahl und Hell/Dunkel rechts; zweite Zeile: Menü. */
	.site-header .kopf-rechts {
		order: 1;
	}

	.site-header .haupt-menue {
		order: 2;
		flex-basis: 100%;
	}

	/* Handy (28.10.2026): eine Zeile – Name links, rechts Menüpfeil, DE EN und Kreis, alle mittig auf der Höhe
	   des Namens. Das Hauptmenü entfällt: Fotografie/Grafik über den Menüpfeil, About über den Namen,
	   Services über einen Knopf auf der About-Seite. */
	.site-header {
		align-items: center;
	}

	.site-header .haupt-menue {
		display: none;
	}

	.kopf-rechts {
		align-items: center;
	}

	html {
		overscroll-behavior-y: none; /* nicht über die Fußzeile hinaus nachfedern */
	}
}

/* Feine Liniensymbole (functions.php → portfolio_icon). */
.icon {
	display: block;
	width: auto;
	height: 1em;
	overflow: visible;
}

/* Menüpfeil fürs Handy: klappt Fotografie/Grafik auf. Am Desktop gibt es das Hauptmenü. */
.mobil-menue,
.nur-handy {
	display: none;
}

.mobil-menue__knopf {
	display: flex;
	align-items: center;
	height: 1.4em;
	padding: 0 2px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.mobil-menue__knopf .icon {
	height: 0.55em;
	transition: transform 0.25s ease;
}

.mobil-menue__knopf[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.mobil-menue__liste {
	/* Fläche in Hintergrundfarbe, die aus dem Banner nach unten aufgeht (Mitte deckend, Rand verlaufend);
	   erst wenn er da ist, blenden die Einträge ein. Oben setzt das Skript die Unterkante des Banners. */
	position: absolute;
	top: 30px;
	right: -46px;
	z-index: 70;
	margin: 0;
	padding: 6px 46px 46px 40px;
	list-style: none;
	/* Flache Fläche statt runder Blase: hinter der Schrift voll deckend, zu den Seiten und nach unten weich auslaufend. */
	background: var(--wp--preset--color--background);
	-webkit-mask-image:
		linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.75) 24px, #000 40px, #000 calc(100% - 30px), rgba(0, 0, 0, 0.6) calc(100% - 14px), transparent),
		linear-gradient(to top, transparent, rgba(0, 0, 0, 0.3) 12px, rgba(0, 0, 0, 0.75) 28px, #000 46px);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.75) 24px, #000 40px, #000 calc(100% - 30px), rgba(0, 0, 0, 0.6) calc(100% - 14px), transparent),
		linear-gradient(to top, transparent, rgba(0, 0, 0, 0.3) 12px, rgba(0, 0, 0, 0.75) 28px, #000 46px);
	mask-composite: intersect;
	font-size: var(--wp--preset--font-size--normal);
	line-height: 1.35;
	text-align: right;
	white-space: nowrap;
	transform-origin: 62% 0;
	transform: scale(0.6, 0);
	visibility: hidden;
	transition: transform 0.28s cubic-bezier(0.5, 0, 0.75, 0), visibility 0s linear 0.28s;
}

.mobil-menue__liste.ist-offen {
	transform: none;
	visibility: visible;
	transition: transform 0.45s cubic-bezier(0.2, 1.15, 0.35, 1), visibility 0s;
}

.mobil-menue__liste li {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.mobil-menue__liste.ist-offen li {
	opacity: 1;
	transform: none;
	transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
}

.mobil-menue__liste.ist-offen li + li {
	transition-delay: 0.27s;
}

.mobil-menue__liste a {
	color: inherit;
}

.mobil-menue__liste a.ist-aktuell {
	font-style: italic;
}

/* Zurück auf Kategorieseiten (Startseite mit ?kategorie=…), führt zur About-Seite. */
.kopf-zurueck {
	display: flex;
	align-items: center;
	height: 1.4em;
	color: inherit;
}

.kopf-zurueck .icon {
	height: 1.1em;
}

/* About-Seite: Kategorien schlicht untereinander wie normaler Text; fürs Handy ein Knopf zu den Services. */
.site-main .wp-block-post-content > .kategorien {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.site-main .wp-block-post-content > .kategorien li,
.site-main .wp-block-post-content > .kategorien li + li {
	margin: 0;
	padding: 0;
}

.site-main .kategorien a {
	color: inherit;
}

.site-main .about__services {
	margin-top: 30px;
}

.knopf {
	display: inline-block;
	padding: 0.35em 1em 0.45em;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	font-size: var(--wp--preset--font-size--klein);
	text-decoration: none;
}

/* Nach den Grundregeln, damit sie am Handy gewinnen. */
@media (max-width: 500px) {
	/* About am Handy: „Anfrage stellen“ entfällt (dafür der Services-Knopf darunter); die Kategorien stehen
	   ganz unten am Seitenende, rechtsbündig. */
	.about__anfrage {
		display: none;
	}

	.site-main:has(.about__einleitung) {
		display: flex;
		flex-direction: column;
	}

	.site-main:has(.about__einleitung) .wp-block-post-content {
		display: flex;
		flex: 1 0 auto;
		flex-direction: column;
	}

	.site-main .wp-block-post-content > .kategorien {
		margin-top: auto;
		padding-top: 60px;
		text-align: right;
	}

	.mobil-menue {
		position: relative;
		display: block;
	}

	.nur-handy {
		display: block;
	}
}

/* Inhalt */
.site-main {
	padding: 40px 15px 60px;
}

.site-main > * + * {
	margin-block-start: 18px;
}

/* Längere Texte (About, Services, Rechtliches) luftiger; Kopfzeile, Menü und Bildunterschriften bleiben bei 0,9. */
.site-main p,
.site-main li {
	line-height: 1.15;
}

/* Textseiten (Services, About, Rechtliches): ruhige Spalte, Zwischentitel kursiv, Listen ohne Punkte. */
/* Nur Texte begrenzen – das Mosaik läuft über die ganze Fensterbreite. */
.site-main .wp-block-post-content > :not(.mosaik) {
	max-width: 52em;
}

.site-main .wp-block-post-content h2 {
	margin: 48px 0 12px;
}

.site-main .wp-block-post-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-main .wp-block-post-content ul li + li {
	margin-top: 6px;
}

.services__einleitung {
	max-width: 36em;
}

/* About: Fließtext etwas schmaler als die übrigen Textseiten, Kontakt mit Abstand darunter. */
.site-main .wp-block-post-content:has(.about__einleitung) > p {
	max-width: 36em;
}

.site-main .about__kontakt {
	margin-top: 40px;
}

.site-main .services__spalten {
	gap: 30px 60px;
	margin-top: 0;
}

.site-main .services__spalten h2 {
	margin-top: 48px;
}

.site-main ol.services__ablauf {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: schritt;
}

.site-main ol.services__ablauf li {
	counter-increment: schritt;
	display: grid;
	grid-template-columns: 1.6em 1fr;
}

.site-main ol.services__ablauf li + li {
	margin-top: 6px;
}

.site-main ol.services__ablauf li::before {
	content: counter(schritt);
	font-style: italic;
}

.services__rechte {
	margin-top: 24px !important;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--muted);
}

/* Projektseite hat keine Kopfzeile, der Projektkopf steht oben wie die Kopfzeile. */
.site-main.projekt-main {
	padding-top: 8px; /* gleich wie die Kopfzeile (11.11.2026) */
}

/* Fußzeile: um 90° gedreht, fest in der rechten unteren Ecke, liest von unten nach oben. */
.site-footer {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	gap: 1em;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	padding: calc(15px + env(safe-area-inset-bottom, 0px)) 10px 15px calc(10px + env(safe-area-inset-right, 0px));
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1;
	background: var(--wp--preset--color--background);
	white-space: nowrap;
}

.site-footer p {
	margin: 0;
}

/* Fußzeile am großen Bildschirm nur als „©“ in der Ecke, mit weichem Hof in Hintergrundfarbe.
   Darüberfahren, Antippen oder Tastatur klappt Name, Impressum und Datenschutz auf (11.11.2026).
   Die Fußzeile ist um 180° gedreht: ihre linke obere Ecke liegt in der rechten unteren Bildschirmecke. */
@media (min-width: 1025px) {
	.site-footer {
		gap: 0;
		/* „©“ rund 15 % näher in die Ecke (Abstand unten 15 → 13 px, rechts 10 → 8,5 px) */
		padding-top: calc(13px + env(safe-area-inset-bottom, 0px));
		padding-left: calc(8.5px + env(safe-area-inset-right, 0px));
		background: none;
	}

	/* Weicher Hof in Hintergrundfarbe rund um den Inhalt: zugeklappt ein Kreis um „©“, aufgeklappt eine Kapsel
	   um die ganze Zeile (11.11.2026). Innenabstand der Fußzeile minus 15 px, durch Unschärfe weich auslaufend. */
	.site-footer::before {
		content: "";
		position: absolute;
		inset: calc(2px + env(safe-area-inset-bottom, 0px)) -1px 4px calc(-2.5px + env(safe-area-inset-right, 0px)); /* Hof 20 % kleiner */
		z-index: -1;
		border-radius: 999px;
		background-color: var(--wp--preset--color--background);
		filter: blur(4px); /* steil auslaufend (vorher 9, dann 5 px) */
		transition: background-color 0.25s ease;
		pointer-events: none;
	}

	.rechtliches__mehr {
		display: inline-block;
		max-inline-size: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-inline-size 0.45s ease, margin 0.45s ease, opacity 0.3s ease;
	}

	.site-footer:hover .rechtliches__mehr,
	.site-footer:has(:focus-visible) .rechtliches__mehr,
	.site-footer:has([aria-expanded="true"]) .rechtliches__mehr {
		max-inline-size: 20em;
		opacity: 1;
		margin-inline-start: 1em;
	}

	.site-footer:hover .rechtliches__name .rechtliches__mehr,
	.site-footer:has(:focus-visible) .rechtliches__name .rechtliches__mehr,
	.site-footer:has([aria-expanded="true"]) .rechtliches__name .rechtliches__mehr {
		margin-inline-start: 0.25em;
	}
}

.rechtliches__zeichen {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	line-height: inherit;
	color: inherit;
	cursor: pointer;
}

@media (max-width: 1024px) {
	/* Am Handy und Tablet steht alles ausgeschrieben; das Zeichen ist dort nur Text. */
	.rechtliches__zeichen {
		pointer-events: none;
		cursor: default;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rechtliches__mehr {
		transition: none;
	}
}

/* Platz rechts freihalten, damit Inhalte nicht unter der Fußzeile liegen. */
.site-header,
.site-main {
	padding-right: 45px;
}

/* Tablet und Handy (bis 1024 px): Fußzeile waagrecht ganz am Ende der Seite statt gedreht in der Ecke;
   rechts muss dann nichts mehr frei bleiben. */
@media (max-width: 1024px) {
	.site-header,
	.site-main {
		padding-right: max(15px, env(safe-area-inset-right, 0px));
	}

	/* Kurze Seiten: Fußzeile trotzdem ganz unten im Fenster. */
	.wp-site-blocks {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100dvh;
	}

	.wp-site-blocks > main,
	.wp-site-blocks > .site-main {
		flex: 1 0 auto;
	}

	/* --fuss-abstand setzt die Projektseite: so viel Platz, wie die unten fest stehende Beschreibung braucht,
	   damit die Fußzeile am Seitenende darüber steht und nie darunter verschwindet. */
	.site-footer {
		position: static;
		writing-mode: horizontal-tb;
		transform: none;
		flex-wrap: wrap;
		gap: 0.4em 1.2em;
		padding: 30px max(15px, env(safe-area-inset-right, 0px)) calc(20px + var(--fuss-abstand, 0px) + env(safe-area-inset-bottom, 0px)) max(15px, env(safe-area-inset-left, 0px));
		background: none;
		white-space: normal;
	}
}

/* Endloses Mosaik auf Tablet und Handy: keine Fußzeile – Impressum und Datenschutz stehen auf der About-Seite
   (der Name in der Kopfzeile führt dorthin, also zwei Klicks) und am Ende jeder Projektseite. */
@media (max-width: 1024px) {
	html.hat-endlos .site-footer {
		display: none;
	}
}

/* Auf Mosaik-Seiten zeichnet view.js einen lebendigen Verlauf unter der Kopfzeile; der feste entfällt dort. */
html.hat-endlos .site-header::after {
	display: none;
}

.mosaik-endlos__verlauf {
	position: fixed;
	left: 0;
	z-index: 49;
	width: 100%;
	pointer-events: none;
}

/* Bildunterschriften (Mosaik) */
.is-style-caption,
.portfolio-caption,
.site-main .portfolio-caption {
	text-align: center;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 0.9;
}

.portfolio-caption span {
	display: block;
}

.portfolio-caption span + span {
	font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
	.mobil-menue__liste,
	.mobil-menue__liste.ist-offen,
	.mobil-menue__liste li,
	.mobil-menue__liste.ist-offen li {
		transition: none;
	}

	body,
	.site-header,
	.site-footer,
	.projekt__show {
		transition: none;
	}
}

/* Sichtbarer Fokus für Tastatur-Bedienung */
a:focus-visible,
button:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 3px;
}

/* Bildschutz: Projektbilder nicht ziehen, markieren oder per langem Tippen (iPhone) sichern. Rechtsklick sperrt functions.php. */
.mosaik img,
.projekt img {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* Das Mosaik ragt um den Kachelabstand (--pad) über den Inhalt hinaus. Auf dem Tablet ist --pad (20 px) größer als
   der Seitenrand (15 px) – den leeren Überstand abschneiden, damit sich die Seite nicht seitlich verschieben lässt. */
.site-main:has(.mosaik) {
	overflow-x: clip;
}

/* Seitenwechsel: Inhalt blendet beim Verlassen aus und auf der neuen Seite ein, die Kopfzeile bleibt stehen.
   Zurück zur Hauptseite geht es schneller. Gesteuert vom Skript in functions.php, funktioniert in jedem Browser. */
.site-main,
.site-footer {
	animation: seite-ein 0.8s ease backwards;
}

html.kommt-schnell .site-main,
html.kommt-schnell .site-footer {
	animation-duration: 0.3s;
}

html.kommt-sprachwechsel .site-main,
html.kommt-sprachwechsel .site-footer {
	animation-duration: 0.5s;
}

html.geht .site-main,
html.geht .site-footer,
html.geht-schnell .site-main,
html.geht-schnell .site-footer {
	opacity: 0;
	transition: opacity 0.45s ease;
}

html.geht-schnell .site-main,
html.geht-schnell .site-footer {
	transition-duration: 0.2s;
}

@keyframes seite-ein {
	from {
		opacity: 0;
	}
}

/* Die einfache Liste nicht aufblitzen lassen, bevor das Mosaik steht; falls das Skript ausfällt, erscheint sie trotzdem. */
html.mit-skript .mosaik:not(.mosaik-endlos) {
	opacity: 0;
	animation: liste-zeigen 0.3s ease 2.5s forwards;
}

@keyframes liste-zeigen {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-main,
	.site-footer {
		animation: none;
	}
}

/* Nur für Suchmaschinen und Screenreader sichtbar. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}