/*
 * PatternLib: Feinheiten, die theme.json nicht ausdruecken kann.
 *
 * Diese Datei ist absichtlich der kleinere Teil. Alles Gestalterische gehoert nach
 * theme.json, weil WordPress die Werte von dort in den Editor UND ins Frontend traegt.
 * Genau das hat bei Serenada gefehlt: Design lag in einer style.css, die nur per
 * wp_enqueue_scripts geladen wurde, also ausschliesslich vorn. Der Editor sah dadurch
 * anders aus als die Seite, und niemand fand den Grund.
 *
 * Geladen wird sie ueber enqueue_block_assets, das beide Welten in einem Aufruf bedient.
 * In der Theme-Fassung brauchte es dafuer zwei Wege: wp_enqueue_scripts fuer vorn und
 * add_editor_style() fuer den Editor. Ein Plugin kann add_editor_style() nicht benutzen,
 * und das ist hier kein Verlust, sondern die Gelegenheit, es richtig zu machen.
 */
/*
 * Diese Datei ist absichtlich fast leer.
 *
 * Alles Gestalterische gehoert nach theme.json, weil WordPress die Werte von dort in den
 * Editor UND ins Frontend traegt. Genau das hat bei Serenada gefehlt: Design lag in dieser
 * style.css, die nur per wp_enqueue_scripts geladen wurde, also ausschliesslich vorn.
 * Der Editor sah dadurch anders aus als die Seite, und niemand fand den Grund.
 *
 * Was hier trotzdem stehen darf: Feinheiten, die theme.json nicht ausdruecken kann.
 * Alles davon muss ueber add_editor_style() auch im Editor landen, siehe functions.php.
 */

/* Kicker: Versalien ueber der Seitenueberschrift. */
.is-style-kicker {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
}

/* Karten sollen in einer Zeile gleich hoch sein, auch bei ungleichem Text. */
.wp-block-columns.is-style-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-columns.is-style-cards > .wp-block-column > .wp-block-group {
	flex: 1;
}

/*
 * Alle Links im Fussbereich: Textfarbe statt Akzent, dafuer unterstrichen.
 *
 * Zwei Gruende, beide gemessen. Erstens der Kontrast: Der Akzent schafft auf dem grauen
 * Fussgrund nur 3,63:1, die Schwelle liegt bei 4,5. Die Textfarbe kommt auf ueber 9.
 * Zweitens die Erkennbarkeit — WCAG 1.4.1 verbietet, Farbe als einziges Unterscheidungs-
 * merkmal zu benutzen. Ein Link, der sich nur durch seinen Farbton vom Text abhebt, ist
 * fuer Farbfehlsichtige kein Link. Die Unterstreichung loest beides auf einmal.
 *
 * Die Seitenliste darunter ist die Ausnahme: Sie steht als Menuespalte, dort waere jede
 * Zeile unterstrichen und das liest sich wie ein Fehler.
 */
footer a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

footer a:hover,
footer a:focus-visible {
	text-decoration-thickness: 2px;
}

/* Fussbereich: Seitenliste soll wie eine Menuespalte aussehen, nicht wie eine Aufzaehlung. */
footer .wp-block-page-list {
	list-style: none;
	padding-left: 0;
}

footer .wp-block-page-list li {
	margin-block: 0.4em;
}

footer .wp-block-page-list a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

footer .wp-block-page-list a:hover,
footer .wp-block-page-list a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/*
 * Kein X im Fussbereich.
 *
 * Die Vorlage hat dort ein grosses diagonales X. Drei Anlaeufe (Groesse, Position,
 * Media Query) haben es nicht geschafft, es so zu setzen, dass es die Service-Spalte
 * nicht ueberdeckt — der Fussbereich hier ist dreispaltig bis zum rechten Rand, der
 * Fussbereich der Vorlage ist es nicht. Statt weiter zu schieben: weggelassen.
 * Lesbare Links schlagen eine Dekoration, die sie verdeckt.
 *
 * Bei den nummerierten Karten und bei der Kundenstimme steht das X und funktioniert
 * dort, weil es hinter Kartenraendern und Weissraum liegt, nicht hinter Text.
 */

/*
 * Dekoration ueber eine Klasse statt ueber Block-Attribute.
 *
 * Das background-Attribut von core/group von Hand ins Markup zu schreiben, fuehrt im
 * Editor zu "Dieser Block enthaelt unerwarteten oder ungueltigen Inhalt": Der Editor
 * vergleicht das gespeicherte HTML mit dem, was die save()-Funktion des Blocks erzeugen
 * wuerde, und meine Handarbeit traf das nicht exakt. Eine zusaetzliche CSS-Klasse ist
 * fuer diese Pruefung unsichtbar und kann den Konflikt nicht ausloesen.
 */
.wp-block-group.hat-deko-x {
	background-image: url("/wp-content/uploads/2026/08/deko-x.png");
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: auto 52%;
}

@media (max-width: 1200px) {
	.wp-block-group.hat-deko-x {
		background-image: none;
	}
}

/*
 * Keine grauen Streifen zwischen den Sektionen.
 *
 * WordPress setzt auf jeden Block der obersten Ebene einen margin-block-start aus dem
 * blockGap (hier 24 px). Zwischen zwei randabfallenden Sektionen scheint dadurch der
 * Seitenhintergrund als Streifen durch. Der Abstand kommt bei uns aus dem Innenabstand
 * der Sektionen selbst, der aeussere ist ueberfluessig.
 */
.wp-site-blocks > .alignfull,
.wp-site-blocks > .wp-block-group.alignfull,
.wp-site-blocks > .wp-block-cover.alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * Halbtransparenter Kopfbereich ueber dem Aufmacher.
 *
 * Einstellbar ueber zwei Klassen am Header-Block:
 *   .kopf-ueber-hero        liegt ueber dem Aufmacher, halbtransparent   (Standard)
 *   .kopf-ueber-hero.deckend  bleibt undurchsichtig, ohne Ueberlappung
 *
 * Umschalten im Editor: Header-Block markieren, unter "Erweitert" die Klasse "deckend"
 * ergaenzen oder entfernen. Wer es site-weit anders will, aendert diese Regel.
 *
 * backdrop-filter wird von allen aktuellen Browsern unterstuetzt; wo nicht, bleibt die
 * Flaeche schlicht halbtransparent, was ebenfalls lesbar ist.
 */
.wp-site-blocks > .kopf-ueber-hero:not(.deckend) {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 10;
	background-color: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Der Aufmacher rutscht unter den Kopfbereich, damit nichts verdeckt wird. */
.wp-site-blocks > .kopf-ueber-hero:not(.deckend) + .wp-block-cover {
	padding-block-start: calc(var(--wp--preset--spacing--60) + 4rem);
}

@media (max-width: 781px) {
	/* Auf schmalen Geraeten deckend, sonst kollidiert das Menue mit dem Hero-Text. */
	.wp-site-blocks > .kopf-ueber-hero {
		position: static;
		background-color: var(--wp--preset--color--surface);
		backdrop-filter: none;
	}
	.wp-site-blocks > .kopf-ueber-hero + .wp-block-cover {
		padding-block-start: var(--wp--preset--spacing--60);
	}
}

/*
 * Das X als Hintergrundelement im Aufmacher, optional.
 *
 * Einschalten: dem Cover-Block die Klasse "hat-deko-x-hero" geben.
 * Es liegt hinter dem Text und ueber dem Video, deshalb gedaempft.
 */
.wp-block-cover.hat-deko-x-hero > .wp-block-cover__inner-container::before {
	content: "";
	position: absolute;
	inset-block: -2rem;
	inset-inline-end: -6rem;
	width: 26%;
	background-image: url("/wp-content/uploads/2026/08/deko-x.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.4;
	pointer-events: none;
	z-index: -1;
}

@media (max-width: 1200px) {
	.wp-block-cover.hat-deko-x-hero > .wp-block-cover__inner-container::before {
		display: none;
	}
}

/*
 * Streifen zum Durchblaettern — Slider ohne JavaScript und ohne Plugin.
 *
 * Technik: CSS Scroll Snap. Ein waagerecht scrollbarer Flex-Container, dessen Kinder an
 * definierten Punkten einrasten. Wischen, Scrollen und Tastatur funktionieren nativ,
 * Screenreader lesen alle Folien nacheinander.
 *
 * Verwendung: dem aeusseren Flex-Block die Klasse "streifen" geben, jedem Kind
 * "streifen__folie". Wie breit eine Folie ist, steuert --folien-breite.
 */
.wp-block-group.streifen {
	--folien-breite: 34rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	scrollbar-width: thin;
	padding-block-end: var(--wp--preset--spacing--20);
	align-items: stretch;
}

.wp-block-group.streifen > .streifen__folie {
	flex: 0 0 min(var(--folien-breite), 85%);
	scroll-snap-align: start;
}

/* Ein sichtbarer Fokusring, wenn der Streifen per Tastatur angesteuert wird. */
.wp-block-group.streifen:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* Breite Folien fuer Bildstreifen. */
.wp-block-group.streifen.streifen--breit {
	--folien-breite: 60rem;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.streifen { scroll-behavior: auto; }
}

/*
 * Icons in Kartengroesse.
 *
 * core/icon rendert ein SVG mit fest eingetragenem width/height von 24 px; die fontSize im
 * Blockattribut wirkt darauf nicht. Die Groesse kommt deshalb von hier. Wer ein einzelnes
 * Icon anders will, gibt dem Block eine der Zusatzklassen.
 */
.wp-block-icon.wp-block-icon > svg {
	width: 1em;
	height: 1em;
}

/* Icons in Karten: gross genug, um als Bildmarke zu wirken. */
.wp-block-group.has-muted-background-color > .wp-block-icon.wp-block-icon,
.wp-block-icon.wp-block-icon.icon-gross {
	font-size: 4rem;
	line-height: 1;
	margin-block-end: var(--wp--preset--spacing--10);
}

.wp-block-icon.wp-block-icon.icon-mittel { font-size: 2.5rem; line-height: 1; }
.wp-block-icon.wp-block-icon.icon-klein  { font-size: 1.5rem; line-height: 1; }

/* Die Haken in der Merkmalliste bleiben textnah, sie stehen neben einer Zeile. */
.wp-block-group.is-nowrap > .wp-block-icon.wp-block-icon {
	font-size: 1.5rem;
	line-height: 1;
	margin-block-end: 0;
}

/*
 * Aufmacher: Text nicht am Rand kleben lassen.
 *
 * Die contentSize des Cover-Blocks setzt sich hier nicht durch, deshalb begrenzen wir den
 * Inhalt von aussen. Der Textblock steht linksbuendig innerhalb der Inhaltsbreite, nicht
 * am Fensterrand — so wie in der Vorlage.
 */
.wp-block-cover.hat-deko-x-hero > .wp-block-cover__inner-container.is-layout-constrained {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.wp-block-cover.hat-deko-x-hero > .wp-block-cover__inner-container.is-layout-constrained > * {
	max-width: 46rem;
	margin-inline: 0;
}

/*
 * Streifen: Blaettern statt Scrollbalken.
 *
 * Der Balken verschwindet, dafuer gibt es zwei Schaltflaechen. Sie entstehen per
 * JavaScript (siehe functions.php) und sind bewusst Fortschritt, nicht Voraussetzung:
 * Ohne JavaScript bleibt der Streifen scroll- und wischbar, nur ohne Knoepfe.
 */
.wp-block-group.streifen {
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.wp-block-group.streifen::-webkit-scrollbar {
	display: none;
}

.streifen-huelle {
	position: relative;
}

.streifen-knopf {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border: none;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
	transition: opacity 0.2s;
}

.streifen-knopf[hidden] { display: none; }
.streifen-knopf--zurueck { inset-inline-start: -1.5rem; }
.streifen-knopf--vor     { inset-inline-end: -1.5rem; }

.streifen-knopf:hover  { background: var(--wp--preset--color--contrast); }
.streifen-knopf:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	/* Auf schmalen Geraeten wischt man, da stoeren Knoepfe nur. */
	.streifen-knopf { display: none; }
}

/*
 * Zeilenlaenge: geregelt ueber contentSize in theme.json, nicht hier.
 *
 * Ein Versuch, Text per max-width zu begrenzen und gleichzeitig linksbuendig mit den
 * Karten zu halten, ist am 21.08.2026 dreimal an WordPress' generierten Layout-Regeln
 * gescheitert. Die tragen dieselbe Spezifitaet und setzen margin-inline: auto, was jede
 * Begrenzung wieder mittig zieht.
 *
 * Der Weg mit dem System statt gegen es: contentSize begrenzt den Text (70rem), Karten,
 * Bilder, Slider und Tabellen laufen als alignwide auf die volle Breite. Ueberschrift und
 * Text stehen dadurch gemeinsam etwas eingerueckt gegenueber den Medien — ein etabliertes
 * Layoutmuster, kein Versehen.
 */

/*
 * Karte mit Einwilligung vor dem Laden.
 *
 * Der Knopf sieht aus wie eine Karte, ist aber nur eine Flaeche mit Hinweis. Erst der
 * Klick holt das iframe von OpenStreetMap. Siehe inc-karte.php und assets/js/karte.js.
 */
.karte-osm {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--40);
	block-size: var(--karte-hoehe, 420px);
	border-radius: 5px;
	overflow: hidden;
	background-color: var(--wp--preset--color--muted);
}

.karte-osm__knopf {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
	block-size: 100%;
	padding: var(--wp--preset--spacing--40);
	border: 2px dashed color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	border-radius: 5px;
	background: none;
	color: var(--wp--preset--color--contrast);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s;
}

.karte-osm__knopf:hover,
.karte-osm__knopf:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
}

.karte-osm__knopf:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: -3px;
}

.karte-osm__titel {
	font-size: var(--wp--preset--font-size--card);
	font-weight: 600;
}

.karte-osm__hinweis {
	max-inline-size: 44rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.karte-osm__rahmen {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}

/* Der Ersatzlink steht immer da: als Angebot neben der Karte, als Rettung ohne JavaScript. */
.karte-osm__ersatz {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	margin: 0;
	padding: 0.4em 0.8em;
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) 92%, transparent);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Gerenderter Markdown folgt denselben Regeln wie Bloecke.
 *
 * Der Renderer erzeugt schlichtes HTML ohne wp-block-Klassen. Ohne diese Regeln stuende
 * gerenderter Text in Browser-Standardtypografie neben Bloecken im Theme-Design — der
 * Unterschied faellt sofort auf und laesst die Seite unfertig wirken.
 *
 * Die Werte kommen aus theme.json, nicht aus eigenen Zahlen. Wer die Skala aendert,
 * aendert damit auch den Markdown-Bereich.
 */
.markdown-inhalt {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

.markdown-inhalt > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.markdown-inhalt :is(h2, h3, h4, h5, h6) {
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 600;
	line-height: 1.2;
}

.markdown-inhalt > :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.markdown-inhalt h2 { font-size: var(--wp--preset--font-size--section); }
.markdown-inhalt h3 { font-size: var(--wp--preset--font-size--card); }
.markdown-inhalt h4 { font-size: var(--wp--preset--font-size--lead); }

.markdown-inhalt p {
	max-inline-size: 70rem;
}

.markdown-inhalt :is(ul, ol) {
	padding-inline-start: 1.4em;
}

.markdown-inhalt li + li {
	margin-block-start: 0.4em;
}

.markdown-inhalt a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.markdown-inhalt blockquote {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--lead);
}

.markdown-inhalt code {
	padding: 0.15em 0.4em;
	border-radius: 3px;
	background-color: var(--wp--preset--color--muted);
	font-size: 0.9em;
}

.markdown-inhalt hr {
	margin-block: var(--wp--preset--spacing--50);
	border: 0;
	border-block-start: 1px solid var(--wp--preset--color--muted);
}

.markdown-inhalt img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 5px;
}

/*
 * Contact Form 7 im Theme-Design.
 *
 * Das mitgelieferte CF7-Stylesheet ist abbestellt (siehe inc-cf7.php), hier steht der
 * Ersatz. Alle Werte kommen aus theme.json: Wer die Akzentfarbe wechselt, wechselt auch
 * die Fokusringe und die Absendeschaltflaeche.
 */
.wpcf7 {
	--feld-rahmen: color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
}

/*
 * Leere Huellen ausblenden.
 *
 * CF7 legt um seine versteckten Felder ein <p>, das ohne Inhalt trotzdem Platz beansprucht.
 * Und die Meldungsflaeche steht mit Rahmen auf der Seite, bevor irgendetwas abgeschickt
 * wurde. Beides sieht aus wie ein vergessenes Eingabefeld.
 */
/*
 * Getrennte Regeln, nicht als Kommaliste.
 *
 * Steht in einer Selektorliste ein Teil, den der Browser nicht versteht, verwirft er die
 * GANZE Regel — auch die Teile, die er verstanden haette. Am 23.08.2026 riss ein
 * verschachteltes :has(:not(...)) die fieldset-Regel mit, und nichts wies darauf hin:
 * Das CSS wurde ausgeliefert, es passierte nur nichts.
 */
.wpcf7 fieldset.hidden-fields-container {
	display: none;
}

/* Absaetze, die nur versteckte Felder enthalten, beanspruchen sonst Platz. */
.wpcf7 form > p:not(:has(label)):not(:has(input[type="submit"])):not(:has(textarea)) {
	display: none;
}

.wpcf7 form .wpcf7-response-output:empty {
	display: none;
}

.wpcf7 label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="url"], input[type="number"], select, textarea) {
	/* CF7-Felder erben kein border-box; ohne das ragen sie aus ihrer Rasterzelle heraus. */
	box-sizing: border-box;
	inline-size: 100%;
	margin-block-start: 0.3em;
	padding: 0.32em 0.7em;
	border: 1px solid var(--feld-rahmen);
	border-radius: 4px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.4;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.wpcf7 textarea {
	min-block-size: 7em;
	resize: vertical;
}

/*
 * Kurze Auswahlfelder brauchen keine volle Breite. Ein Anrede-Feld ueber 800 Pixel wirkt
 * wie ein Fehler, weil die Breite eines Feldes andeutet, wie viel hineingehoert.
 */
.wpcf7 label:has(> .wpcf7-form-control-wrap select) {
	max-inline-size: 50%;
}

.wpcf7 :is(input, select, textarea):focus-visible {
	border-color: var(--wp--preset--color--accent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
}

/* Pflichtfelder tragen einen Stern, gesetzt aus dem required-Attribut. */
.wpcf7 [data-pflicht="ja"] {
	border-inline-start: 3px solid var(--wp--preset--color--accent);
}

/*
 * PLZ und Ort in einer Zeile.
 *
 * CF7 verpackt jedes Feld in ein eigenes span.wpcf7-form-control-wrap; das Label enthaelt
 * beide Spans nebeneinander. Ein Grid auf dem Label und die Spans als Zellen — der
 * Beschriftungstext ist ein Textknoten und braucht eine eigene Zeile ueber beiden.
 */
.wpcf7 label:has(input[name="plz"]) {
	display: grid;
	grid-template-columns: 1fr 2.2fr;
	column-gap: var(--wp--preset--spacing--30);
	row-gap: 0;
}

.wpcf7 label:has(input[name="plz"]) > .wpcf7-form-control-wrap {
	grid-row: 2;
}

.wpcf7 label:has(input[name="plz"]) > .wpcf7-form-control-wrap input {
	margin-block-start: 0;
}

/* Einwilligung: Kaestchen und Text nebeneinander, nicht untereinander. */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	display: flex;
	gap: 0.7em;
	align-items: start;
	margin: 0;
}

.wpcf7 .wpcf7-acceptance label {
	display: flex;
	gap: 0.7em;
	align-items: start;
	font-weight: 400;
	line-height: 1.4;
}

.wpcf7 input[type="checkbox"] {
	inline-size: 1.2em;
	block-size: 1.2em;
	margin-block-start: 0.15em;
	accent-color: var(--wp--preset--color--accent);
	flex: 0 0 auto;
}

/* Absenden sieht aus wie die Schaltflaechen im Rest der Seite. */
.wpcf7 input[type="submit"] {
	margin-block-start: var(--wp--preset--spacing--20);
	padding: 14px 28px;
	border: 0;
	border-radius: 4px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s;
}

.wpcf7 input[type="submit"]:hover {
	background-color: var(--wp--preset--color--contrast);
}

.wpcf7 input[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Meldungen: farbig, aber nicht schreiend, und immer mit Rahmen fuer Farbenblinde. */
.wpcf7 form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0.9em 1.1em;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #1B6B4A;
	background-color: color-mix(in srgb, #1B6B4A 8%, transparent);
}

.wpcf7 form:is(.invalid, .unaccepted, .failed) .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-block-start: 0.35em;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wpcf7 .wpcf7-not-valid {
	border-color: var(--wp--preset--color--accent);
}

.wpcf7 .wpcf7-spinner {
	margin-inline-start: 0.8em;
}

/*
 * Aufmacher mit Bild daneben.
 *
 * Zwei Schalter, beide als Klasse am aeusseren Block:
 *   bild-rechts / bild-links       Seite des Bildes
 *   format-original / format-4-3   Bild wie geliefert oder auf 4:3 beschnitten
 *
 * Warum das mit schlechtem Material besser funktioniert als ein randabfallender Aufmacher:
 * Das Bild steht in einer Spalte von rund 590 px statt ueber 1400 px. Ein 800-px-Foto wird
 * dadurch verkleinert statt hochgezogen und bleibt scharf.
 */
.hero-neben.bild-links .wp-block-columns {
	flex-direction: row-reverse;
}

/* Bild auf 4:3 zwingen, zentrierter Ausschnitt, Raender fallen gleichmaessig weg. */
.hero-neben.format-4-3 .hero-neben__bild img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	inline-size: 100%;
}

/* Im Originalformat nur die Breite fuehren, die Hoehe ergibt sich. */
.hero-neben.format-original .hero-neben__bild img {
	inline-size: 100%;
	block-size: auto;
}

/*
 * Sehr hohe Bilder bremsen: Ein Hochformat macht die Spalte sonst dreimal so hoch wie den
 * Text daneben, und der Aufmacher fuellt den halben Bildschirm mit einem einzigen Foto.
 */
.hero-neben.format-original .hero-neben__bild img {
	max-block-size: 34rem;
	object-fit: cover;
}

@media (max-width: 781px) {
	/* Auf schmalen Geraeten steht das Bild immer unter dem Text, auch bei bild-links. */
	.hero-neben .wp-block-columns {
		flex-direction: column;
	}
}

/*
 * Kopfbereich: Anordnung und Hoehe.
 *
 * Drei Schalter als Klasse am Header-Block, im Site-Editor unter "Erweitert":
 *
 *   kopf-logo-links / kopf-logo-rechts        Marke links und Menue rechts, oder umgekehrt
 *   kopf-hoehe-flach / -normal / -hoch        Logohoehe 2,2 / 3,2 / 4,4 rem
 *   kopf-ueber-hero / (weglassen)             halbtransparent ueber dem Aufmacher
 *
 * Fuer einen Zwischenwert bei der Hoehe: settings.custom.kopfLogoHoehe in theme.json.
 */
.kopf {
	--kopf-logo-hoehe: 3.2rem;
}

.kopf.kopf-hoehe-flach  { --kopf-logo-hoehe: 2.2rem; }
.kopf.kopf-hoehe-normal { --kopf-logo-hoehe: 3.2rem; }
.kopf.kopf-hoehe-hoch   { --kopf-logo-hoehe: 4.4rem; }

.kopf .wp-block-site-logo img {
	block-size: var(--kopf-logo-hoehe);
	inline-size: auto;
	max-inline-size: none;
}

/* Marke und Menue tauschen die Seiten. */
.kopf.kopf-logo-rechts .kopf__zeile {
	flex-direction: row-reverse;
}

.kopf.kopf-logo-rechts .kopf__menue {
	justify-content: flex-start;
}

/*
 * Die Wortmarke, wenn kein Bildlogo gesetzt ist. Sie ist von WordPress aus mit der
 * Startseite verlinkt — der Link, den man vermisst, sobald er fehlt.
 */
.kopf .kopf__titel a {
	text-decoration: none;
}

.kopf .kopf__titel a:hover,
.kopf .kopf__titel a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.kopf .kopf__marke {
	gap: var(--wp--preset--spacing--20);
}

@media (max-width: 781px) {
	/* Auf schmalen Geraeten steht die Marke immer links, egal welcher Schalter gilt. */
	.kopf.kopf-logo-rechts .kopf__zeile {
		flex-direction: row;
	}
}