/**
 * morado – Ergänzungen zu theme.json
 *
 * Hier steht ausschließlich, was sich in theme.json nicht ausdrücken lässt:
 * Zustände (:hover, :focus-visible), Block-Stil-Varianten, Sprungmarke,
 * Bewegungsreduktion und Druckausgabe. Farben, Abstände und Schriftgrößen
 * kommen immer aus den Presets – nie als feste Werte.
 */

/* ------------------------------------------------------------------ *
 * 1. Grundlagen
 * ------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
}

/* Anker nicht unter dem klebenden Kopfbereich verstecken. */
:target {
	scroll-margin-top: 6rem;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Lange Wörter (Fachbegriffe, URLs) dürfen umbrechen statt zu überlaufen. */
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
	text-wrap: balance;
}

p {
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ *
 * 2. Tastaturbedienung
 * ------------------------------------------------------------------ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* Mausklicks sollen keinen Rahmen zeigen – Tastaturfokus sehr wohl. */
:where(a, button):focus:not(:focus-visible) {
	outline: none;
}

.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-dark);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--md);
	padding: 0.75rem 1.25rem;
	font-weight: 600;
	z-index: 100000;
}

/* ------------------------------------------------------------------ *
 * 3. Kopfbereich
 * ------------------------------------------------------------------ */

.morado-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow var(--wp--custom--transition--base),
		background-color var(--wp--custom--transition--base);
}

/* Schatten erst, wenn tatsächlich gescrollt wurde – setzt theme.js. */
.morado-header.ist-gescrollt {
	box-shadow: var(--wp--preset--shadow--sm);
}

.morado-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
}

/* Auf schmalen Geräten ist im Kopf kein Platz für den Knopf – das Menü
   führt ohnehin zur Kontaktseite. */
@media (max-width: 600px) {
	.morado-header__cta {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * 4. Block-Stil: Knopf-Varianten
 * ------------------------------------------------------------------ */

.wp-block-button.is-style-umriss > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary-dark);
	box-shadow: inset 0 0 0 2px currentColor;
}

.wp-block-button.is-style-umriss > .wp-block-button__link:hover,
.wp-block-button.is-style-umriss > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary-dark);
}

/* Umriss-Variante auf dunklem Grund, etwa auf der Bühne. */
.wp-block-button.is-style-umriss--hell > .wp-block-button__link {
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-umriss--hell > .wp-block-button__link:hover,
.wp-block-button.is-style-umriss--hell > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--base);
}

.wp-block-button.is-style-schlicht > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary-dark);
	padding-inline: 0;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.wp-block-button.is-style-schlicht > .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------------ *
 * 5. Block-Stil: Karte, Hinweis, Polaroid
 * ------------------------------------------------------------------ */

.wp-block-group.is-style-karte {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	height: 100%;
}

.wp-block-group.is-style-hinweis {
	background-color: var(--wp--preset--color--accent-soft);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--30);
}

.wp-block-image.is-style-polaroid img {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--md);
	padding: 0.6rem 0.6rem 2.4rem;
}

/* ------------------------------------------------------------------ *
 * 6. Block-Stil: Listen, Trenner, Zitat
 * ------------------------------------------------------------------ */

.wp-block-list.is-style-haken {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-haken > li {
	padding-left: 1.75em;
	position: relative;
}

.wp-block-list.is-style-haken > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.5em;
	height: 0.85em;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(45deg);
}

.wp-block-separator.is-style-punkte {
	border: none;
	height: auto;
	line-height: 1;
	text-align: center;
}

.wp-block-separator.is-style-punkte::before {
	content: "· · ·";
	color: var(--wp--preset--color--border);
	font-size: 1.75rem;
	letter-spacing: 0.5em;
}

/* Filmstreifen als Trenner.
   Das eine Gestaltungselement, das die analoge Seite des Angebots trägt –
   ganz aus CSS, ohne Bilddatei und ohne zusätzlichen Request. Die Löcher
   werden aus dem Grundton gestanzt, damit der Streifen auch auf farbigen
   Flächen sitzt. */
.wp-block-separator.is-style-filmstreifen {
	border: 0;
	height: 26px;
	opacity: 1;
	border-radius: 2px;
	background-color: var(--wp--preset--color--contrast);
	background-image:
		radial-gradient(circle at 10px 6.5px, var(--wp--preset--color--base) 2.5px, transparent 3px),
		radial-gradient(circle at 10px 19.5px, var(--wp--preset--color--base) 2.5px, transparent 3px);
	background-size: 20px 26px;
	background-repeat: repeat-x;
}

.wp-block-quote.is-style-gross {
	border-left: none;
	padding-left: 0;
	text-align: center;
}

.wp-block-quote.is-style-gross p {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
}

/* ------------------------------------------------------------------ *
 * 7. Karten-Raster (Beiträge, Kurse)
 * ------------------------------------------------------------------ */

.morado-karte {
	transition: transform var(--wp--custom--transition--base);
	/* Bezugspunkt für den Stempel auf dem Beitragsbild. */
	position: relative;
}

/* Stempel auf der Kachel: Buchtipp, Material, Methode, Fundstück.

   Er sitzt nur dann auf dem Bild, wenn es eines gibt – daran erkennbar,
   dass er unmittelbar auf das Beitragsbild folgt. Fehlt das Bild, rendert
   WordPress den Block gar nicht, der Nachbarschafts-Wähler greift nicht,
   und der Stempel bleibt im Textfluss über dem Titel stehen. Das ist der
   richtige Rückfall: sichtbar bleiben, statt über der Überschrift zu
   kleben. */
.morado-karte .wp-block-post-featured-image + .morado-stempel {
	position: absolute;
	top: var(--wp--preset--spacing--10);
	left: var(--wp--preset--spacing--10);
	z-index: 1;
	margin: 0;
}

.morado-stempel a {
	display: inline-block;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 0.3em 0.7em;
	border-radius: var(--wp--custom--radius--sm);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
}

.morado-stempel a:hover,
.morado-stempel a:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.morado-karte .wp-block-post-featured-image img {
	transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
	width: 100%;
	/* Alle Kachelbilder haben dasselbe Format: 3:2, zugeschnitten. Die
	   Vorlagen setzen das Seitenverhältnis am Bild selbst, und eine Angabe
	   dort geht vor. Das hier ist der Rückfall für jedes Kachelbild, das sie
	   nicht mitbringt – etwa wenn es als „kleines Beitragsbild" der Seite
	   gezeichnet wurde: Dann gilt sonst das natürliche Seitenverhältnis, und
	   ein Hochkantbild wird 3:4 statt 3:2 (Kachel „Vom Negativ zum Bild",
	   gemeldet am 07.10.2026). */
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
}

.morado-karte .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

/* In einer Kachel gibt es weder die Breitenbegrenzung des kleinen
   Beitragsbildes noch eine Bildunterschrift – der Nachweis steht auf der
   Seite, auf die die Kachel führt. */
.morado-karte .morado-bild-klein {
	margin: 0;
	max-width: none;
}

.morado-karte .wp-element-caption {
	display: none;
}

.morado-karte:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* Bilder mit Textumlauf.

   Den Umlauf selbst bringt WordPress mit: Der Bild-Block hat unter
   „Ausrichtung" die Punkte „Links" und „Rechts", und das Ergebnis ist ein
   float. Was fehlt, ist das Verhalten auf schmalen Geräten – dort bleibt
   der float stehen, und neben einem 300px-Bild in einer 343px-Spalte
   bleiben 43px für den Text übrig.

   Unterhalb von 640px wird deshalb aufgehoben: Bild oben, Text darunter.
   Die gewählte Bildbreite bleibt erhalten, sie wird nur gedeckelt. */
@media (max-width: 640px) {

	.wp-block-post-content .wp-block-image.alignleft,
	.wp-block-post-content .wp-block-image.alignright {
		float: none;
		margin-inline: 0;
		max-width: 100%;
	}

	.wp-block-post-content .wp-block-image.alignleft img,
	.wp-block-post-content .wp-block-image.alignright img {
		max-width: 100%;
		height: auto;
	}
}

/* Etwas Luft zwischen umflossenem Bild und Text, auch nach unten.
   WordPress setzt nur den seitlichen Abstand. */
.wp-block-post-content .wp-block-image.alignleft,
.wp-block-post-content .wp-block-image.alignright {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Kleines Beitragsbild: in Textbreite, im eigenen Seitenverhältnis.

   Gewählt wird das je Beitrag im Editor unter „Beitragsbild auf dieser
   Seite". Die Vorlage zeigt sonst einen breiten 16:9-Streifen – gut für ein
   Kursfoto, unpassend für einen Buchumschlag, der darin beschnitten wird. */
.morado-bild-klein {
	margin-block: var(--wp--preset--spacing--40);
	max-width: 30rem;
}

.morado-bild-klein__bild {
	height: auto;
	width: 100%;
	border-radius: var(--wp--custom--radius--md);
}

.morado-bild-klein__text {
	margin-top: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Karten im Raster gleich hoch, Text oben bündig. */
.morado-karten.is-layout-grid > li,
.morado-karten.is-layout-grid > .morado-karte {
	display: flex;
	flex-direction: column;
}

/* Rubrikenleiste über den Kursen: Filter als Chips statt als Aufzählung. */
.morado-rubriken p {
	margin: 0;
}

.morado-rubriken a {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	display: inline-block;
	padding: 0.4em 1em;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base);
}

.morado-rubriken a:hover,
.morado-rubriken a:focus {
	background-color: var(--wp--preset--color--surface-strong);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark);
}

/* ------------------------------------------------------------------ *
 * Terminübersicht
 * ------------------------------------------------------------------ */

.morado-termine {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.morado-termin {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--20);
	align-items: start;
	padding-block: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
}

.morado-termin:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Das Datumsblättchen – die einzige Stelle, an der Schwarz zur Fläche wird.
   Eigene Angebote bekommen stattdessen Rot: auf einen Blick erkennbar,
   wo direkt bei Ralf gebucht wird. */
.morado-termin__datum {
	display: grid;
	place-items: center;
	align-content: center;
	min-width: 3.75rem;
	padding: 0.5rem 0.6rem;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	line-height: 1.05;
}

.morado-termin--eigenes .morado-termin__datum {
	background-color: var(--wp--preset--color--primary);
}

.morado-termin__tag {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.morado-termin__monat {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.morado-termin__titel {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.morado-termin__titel a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.morado-termin__titel a:hover,
.morado-termin__titel a:focus {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

.morado-termin__meta {
	margin: 0.25em 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.morado-termin__veranstalter {
	margin: 0.35em 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-dark);
}

.morado-termine--kompakt .morado-termin {
	padding-block: var(--wp--preset--spacing--10);
}

.morado-termine__leer {
	color: var(--wp--preset--color--muted);
}

/* Hinweis, wenn die Anmeldung beim Träger liegt und keine Adresse vorliegt. */
.morado-anmeldehinweis {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.morado-liste__eintrag + .morado-liste__eintrag {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--20);
}

/* ------------------------------------------------------------------ *
 * 8. Inhalte
 * ------------------------------------------------------------------ */

/* Bildunterschriften mittig unter dem Bild, in gedämpftem Grau. Das gilt auch
   für den Nachweis unter dem Beitragsbild auf Einzelseiten (Plugin
   morado-core, inc/beitragsbild.php). Farbe und Größe kommen aus theme.json
   (elements.caption) über die Klasse wp-element-caption. */
.wp-block-image figcaption,
.morado-beitragsbild__text {
	margin-top: 0.6em;
	text-align: center;
}

/* Tabellen dürfen auf schmalen Geräten scrollen statt das Layout zu sprengen. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.6em 0.8em;
}

.wp-block-table thead th {
	background-color: var(--wp--preset--color--surface);
}

/* Externe Links im Fließtext bekommen ein dezentes Zeichen.
   Welche Links das sind, entscheidet theme.js anhand des eigenen
   Hostnamens – hier steht bewusst keine Domain, sonst müsste diese Datei
   bei jedem Domainwechsel angefasst werden. */
.morado-extern::after {
	content: " ↗";
	font-size: 0.85em;
	text-decoration: none;
}

/* Kursfakten und Termin als Definitionsliste. */
.morado-kurs-fakten dl,
.morado-buchung dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.morado-kurs-fakten dt,
.morado-buchung dt {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.morado-kurs-fakten dd,
.morado-buchung dd {
	margin: 0;
}

/* Die Faktenkarte steht in einer Spalte, nicht in einem Raster.
   `height: 100%` der Kartenvorlage (.is-style-karte) ist für gleich hohe
   Kacheln in Rastern gedacht. Hier streckt es die Karte auf die Höhe der
   ganzen Zeile – und der Kasten „Termin“ darunter ragt über das Ende der
   Spalten hinaus in den nächsten Abschnitt. Die Spezifität ist absichtlich
   höher als bei der Vorlage. */
.wp-block-group.morado-kurs-fakten.is-style-karte {
	height: auto;
}

/* Der Kasten unter den Fakten: Termin oder Anfrage.
   Mit Termin trägt er den roten Streifen wie das Datumsblättchen der
   eigenen Angebote in der Terminliste, sonst den orangen des Hinweises –
   so sieht man schon am Rand, ob ein fester Termin ansteht. */
.morado-buchung {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--lg);
}

.morado-buchung--termin {
	border-left-color: var(--wp--preset--color--primary);
}

.morado-buchung__titel {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.morado-buchung p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.morado-buchung__gruppe {
	color: var(--wp--preset--color--muted);
}

/* Atelier-Impressionen: Galerie mit Zufallsauswahl.

   Die Auswahl trifft das Plugin morado-core (inc/bilderpool.php) auf dem
   Server und gibt jedem Bild sein Seitenverhältnis als --bild-verhaeltnis
   mit. Hier werden die Bilder daraus zeilenweise auf gleiche Höhe gebracht,
   ohne Zuschnitt: Hochformat, Quadrat und Querformat füllen gemeinsam die
   Breite. Je nach Auswahl brechen die Zeilen anders um – daher wirkt jede
   Zusammenstellung anders.

   Jedes Bild bekommt flex-grow und flex-basis im Verhältnis seiner Form.
   Die Selektoren sind so lang, weil WordPress die Bildbreite einer Galerie
   mit :not(#individual-image) festlegt und das übertroffen werden muss. */
.wp-block-gallery.has-nested-images.is-style-zufall {
	--zeilenhoehe: 12rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.wp-block-gallery.has-nested-images.is-style-zufall figure.wp-block-image.wp-block-image:not(#individual-image) {
	flex: var(--bild-verhaeltnis, 1.5) 1 calc(var(--bild-verhaeltnis, 1.5) * var(--zeilenhoehe));
	/* Kein Bild wird höher als 18 rem. Ohne die Grenze zieht eine Zeile mit nur
	   einem oder zwei Bildern sie auf die volle Breite – am Telefon ein
	   Quadrat von 343 px Höhe. */
	max-width: calc(var(--bild-verhaeltnis, 1.5) * 18rem);
	margin: 0;
	width: auto;
}

.wp-block-gallery.is-style-zufall img {
	aspect-ratio: var(--bild-verhaeltnis, 1.5);
	border-radius: var(--wp--custom--radius--md);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Die letzte Zeile soll nicht über die ganze Breite aufgezogen werden, wenn
   nur ein oder zwei Bilder darin stehen: Ein Füllelement mit riesigem
   flex-grow nimmt den Rest. Der negative Rand gleicht den Abstand aus, den es
   selbst verursacht. */
.wp-block-gallery.is-style-zufall::after {
	content: "";
	flex-grow: 1000;
	margin-left: calc(var(--wp--preset--spacing--20) * -1);
}

@media (max-width: 30rem) {
	.wp-block-gallery.has-nested-images.is-style-zufall {
		--zeilenhoehe: 9rem;
	}
}

/* Der Link am Bild öffnet die Bildansicht (theme.js, bildansichtEinrichten).
   Ohne Skript führt er zur großen Bilddatei. line-height: 0, damit unter dem
   Bild kein Streifen Zeilenhöhe entsteht. */
.wp-block-gallery.is-style-zufall .morado-zoom {
	display: block;
	line-height: 0;
}

.wp-block-gallery.is-style-zufall .morado-zoom:focus-visible {
	border-radius: var(--wp--custom--radius--md);
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-gallery.is-style-zufall .morado-zoom {
		cursor: zoom-in;
	}
}

/* Die Bildansicht: Ein <dialog> über die ganze Fläche, dunkel hinterlegt.
   Die Schließen- und Blätterknöpfe sind 3 rem groß, also deutlich über der
   üblichen Mindestgröße für Fingerziele. Auf schmalen Geräten liegen die
   Blätterknöpfe unten in den Ecken statt an den Bildseiten, dort kommt der
   Daumen hin und sie verdecken nichts vom Bild. */
html:has(.morado-bildansicht[open]) {
	overflow: hidden;
}

.morado-bildansicht {
	background: transparent;
	border: 0;
	box-sizing: border-box;
	color: #fff;
	height: 100%;
	max-height: none;
	max-width: none;
	overscroll-behavior: contain;
	padding: 4rem 1rem 4.5rem;
	width: 100%;
}

.morado-bildansicht[open] {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.morado-bildansicht::backdrop {
	background: rgba(20, 20, 20, 0.96);
}

.morado-bildansicht__figur {
	margin: 0;
	max-width: 100%;
	text-align: center;
	touch-action: pan-y pinch-zoom;
}

.morado-bildansicht__bild {
	border-radius: var(--wp--custom--radius--md);
	display: block;
	height: auto;
	margin-inline: auto;
	max-height: calc(100vh - 11rem);
	max-height: calc(100dvh - 11rem);
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.morado-bildansicht__text {
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.75rem;
}

.morado-bildansicht__knopf {
	align-items: center;
	background: rgba(255, 255, 255, 0.14);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 3rem;
	justify-content: center;
	padding: 0;
	position: absolute;
	width: 3rem;
}

.morado-bildansicht__knopf:hover {
	background: rgba(255, 255, 255, 0.28);
}

.morado-bildansicht__knopf:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.morado-bildansicht__knopf[hidden] {
	display: none;
}

.morado-bildansicht__zu {
	right: 1rem;
	top: 1rem;
}

.morado-bildansicht__zurueck,
.morado-bildansicht__weiter {
	top: 50%;
	transform: translateY(-50%);
}

.morado-bildansicht__zurueck {
	left: 1rem;
}

.morado-bildansicht__weiter {
	right: 1rem;
}

.morado-bildansicht__zaehler {
	bottom: 1.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	left: 0;
	letter-spacing: 0.08em;
	margin: 0;
	position: absolute;
	right: 0;
	text-align: center;
}

@media (max-width: 40rem) {
	.morado-bildansicht__zurueck,
	.morado-bildansicht__weiter {
		bottom: 0.75rem;
		top: auto;
		transform: none;
	}

	.morado-bildansicht__zaehler {
		bottom: 1.5rem;
	}
}

/* Niedriges Fenster, etwa ein quer gehaltenes Telefon: Oben und unten wird
   jeder Rand zu viel – die Knöpfe stehen dort ohnehin an den Seiten. Das
   Bild bekommt die Höhe und lässt rechts und links Platz für sie. */
@media (max-height: 32rem) and (min-width: 40.01rem) {
	.morado-bildansicht {
		padding: 0.75rem 4.5rem 2.75rem;
	}

	.morado-bildansicht__bild {
		max-height: calc(100vh - 5.5rem);
		max-height: calc(100dvh - 5.5rem);
	}
}

/* Beim Überfahren mit der Maus wächst das Bild und liegt über den Nachbarn.

   Nur dort, wo es ein Überfahren gibt: Auf dem Telefon bleibt alles, wie es
   ist. Wie stark es wächst und von wo aus, rechnet theme.js je Bild aus
   (--zoom-faktor, --zoom-ursprung), damit ein Bild am Rand nicht aus dem
   Fenster wächst. Ohne das Skript gilt der Faktor 1,5 von der Mitte aus.
   Bei „Bewegung reduzieren" macht die Regel am Ende dieser Datei die
   Übergänge aus; das Bild springt dann ohne Animation auf die Größe. */
@media (hover: hover) and (pointer: fine) {
	.wp-block-gallery.has-nested-images.is-style-zufall figure.wp-block-image {
		border-radius: var(--wp--custom--radius--md);
		position: relative;
		transform-origin: var(--zoom-ursprung, 50% 50%);
		transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), box-shadow 220ms cubic-bezier(0.2, 0, 0, 1);
	}

	.wp-block-gallery.has-nested-images.is-style-zufall figure.wp-block-image:hover {
		box-shadow: var(--wp--preset--shadow--lg);
		transform: scale(var(--zoom-faktor, 1.5));
		z-index: 10;
	}
}

/* ------------------------------------------------------------------ *
 * 9. Formulare (Contact Form 7 und Kernblöcke)
 * ------------------------------------------------------------------ */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	/* Ohne border-box zählt WordPress Innenabstand und Rahmen zur Breite
	   hinzu: Aus width:100% wurden auf dem Telefon 374px in einer
	   343px-Spalte, und die Felder standen über den Text hinaus. */
	box-sizing: border-box;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.75em 0.9em;
	width: 100%;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 0;
}

.wpcf7 label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.wpcf7 .wpcf7-submit {
	background-color: var(--wp--preset--color--primary);
	border: none;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	padding: 0.9em 1.7em;
	transition: background-color var(--wp--custom--transition--base);
}

.wpcf7 .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* Honigtopf gegen Spam – für Menschen unsichtbar, für Bots verlockend.
   Kein display:none, weil manche Bots genau darauf prüfen. */
.morado-honigtopf {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * 10. Bewegungsreduktion und Druck
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.morado-header,
	.morado-footer,
	.wp-block-navigation,
	.wp-block-search,
	.wp-block-query-pagination,
	.wp-block-comments {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 11pt;
	}

	/* Beim Ausdruck ist das Ziel eines Links sonst nicht erkennbar. */
	.wp-block-post-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}