/*
Theme Name:   CopterArt
Theme URI:    https://copterart.tech
Author:       CopterArt Technic
Description:  Block-Theme für CopterArt Technic – Drohneninspektion und Vermessung.
              Ersetzt Woodmart und Elementor; kommt ohne Premium-Abhängigkeiten
              und ohne externe Schriftquellen aus.
Version:      1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  copterart
Tags:         block-theme, full-site-editing, translation-ready
*/

/*
 * Gestaltung steckt in theme.json, nicht hier.
 * Diese Datei hält nur, was theme.json nicht ausdrücken kann.
 */

/* ── Sprungmarke zum Inhalt ───────────────────────────────────────────────
   Tastaturnutzer sollen die Navigation überspringen können. Sichtbar erst
   bei Fokus. */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-strong);
	font-weight: 600;
	text-decoration: underline;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 2px;
}

/* ── Sichtbarer Tastaturfokus ─────────────────────────────────────────────
   Browser-Standard ist je nach Hintergrund kaum zu erkennen. :focus-visible
   zeigt den Rahmen nur bei Tastaturbedienung, nicht bei Mausklick. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Kopfbild ─────────────────────────────────────────────────────────────
   Der Hauptmangel des alten Designs: dunkle Schrift direkt auf einem
   detailreichen Foto. Hier liegt eine abgedunkelte Ebene darunter und die
   Schrift bekommt zusätzlich einen weichen Schatten – dadurch bleibt sie
   auch über hellen Bildstellen lesbar. */
.wp-block-cover :is(h1, h2, p) {
	text-shadow: 0 1px 3px rgb(0 0 0 / 45%);
}

/* ── Bewegung reduzieren ──────────────────────────────────────────────────
   Respektiert die Systemeinstellung für reduzierte Bewegung. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── Fußbereich ───────────────────────────────────────────────────────────
   Der Footer kehrt die Farben um: heller Text auf dunklem Grund. Die global
   gesetzte Linkfarbe (primary-strong, für gute Lesbarkeit auf Weiß gewählt)
   erreicht hier nur 2,87:1 und fällt durch WCAG AA. Die helle Markenfarbe
   kommt auf 8,65:1 und bleibt trotzdem als Link erkennbar. */
.site-footer :where(a) {
	color: var(--wp--preset--color--link-invers);
	text-decoration: none;
}

.site-footer :where(a):hover,
.site-footer :where(a):focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.site-footer :where(a):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Navigationslinks im Footer stehen untereinander und brauchen weniger
   Zeilenabstand als der Standard-blockGap. */
.site-footer .wp-block-navigation {
	--wp--style--block-gap: 0.4rem;
}

/* ── Kopfbilder: gerichteter Verlauf statt flächiger Abdunklung ───────────
   Eine gleichmäßige Abdunklung um 55 % macht jedes Foto grau – den Kontrast
   braucht die Schrift aber nur dort, wo sie steht: links. Der Verlauf ist
   links kräftig und läuft nach rechts aus, sodass das Bild sichtbar bleibt.
   Der zusätzliche Verlauf von unten fängt Motive ab, bei denen auch der
   untere Bildbereich hell ist. */
.wp-block-cover > .wp-block-cover__background.has-background-dim {
	opacity: 1;
	background-image:
		linear-gradient(to right,
			rgb(18 21 24 / 82%) 0%,
			rgb(18 21 24 / 62%) 38%,
			rgb(18 21 24 / 22%) 72%,
			rgb(18 21 24 / 10%) 100%),
		linear-gradient(to top,
			rgb(18 21 24 / 35%) 0%,
			rgb(18 21 24 / 0%) 45%);
}

/* Auf schmalen Geräten gibt es kein „links“ – dort muss die Abdunklung
   wieder flächig wirken, sonst steht die Schrift über der hellen Seite. */
@media (max-width: 781px) {
	.wp-block-cover > .wp-block-cover__background.has-background-dim {
		background-image: linear-gradient(to top,
			rgb(18 21 24 / 78%) 0%,
			rgb(18 21 24 / 62%) 55%,
			rgb(18 21 24 / 48%) 100%);
	}
}

/* Die Einleitung im Kopfbild soll nicht über die volle Breite laufen –
   sonst reicht sie in den hellen Bildteil hinein.

   Wichtig ist das `margin-inline: 0 auto`: Der Cover-Block nutzt ein
   constrained-Layout und zentriert jedes Kind, das schmaler ist als der
   Container. Ohne diese Zeile rückt der Absatz nach rechts ein, während
   die Überschrift links stehen bleibt – beide begännen dann auf
   unterschiedlichen Linien. */
/* Der innere Container des Kopfbilds bekommt selbst die Inhaltsbreite und
   wird zentriert. Damit beginnen Überschrift, Text und Schaltfläche auf
   derselben Linie wie Logo und Navigation im Kopfbereich. Ohne diese
   Begrenzung säßen sie am Fensterrand, weil das Cover über die volle
   Breite läuft. */
.wp-block-cover__inner-container {
	max-width: 76rem;
	margin-inline: auto;
	width: 100%;
}

.wp-block-cover__inner-container > :is(h1, h2, p, .wp-block-buttons) {
	max-width: 46rem;
	/*
	 * Das !important ist hier nötig, nicht bequem: WordPress erzeugt inline
	 * die Regel
	 *   .is-layout-constrained > :where(:not(.alignleft):not(.alignright))
	 *   { margin-left: auto !important; margin-right: auto !important; }
	 * und erzwingt damit die Zentrierung. Ohne Gegengewicht rückt der Text
	 * im Kopfbild um die halbe Restbreite nach innen und beginnt nicht mehr
	 * auf derselben Linie wie Logo und Navigation.
	 */
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* ── Bilder ───────────────────────────────────────────────────────────────
   Leicht gerundete Ecken nehmen den Bildern die harte Kante und passen zu
   den Schaltflächen und Kacheln. */
.wp-block-image img,
.wp-block-gallery .wp-block-image img {
	border-radius: 4px;
}

/* Verlinkte Bilder reagieren sichtbar – bislang gab es keinen Hinweis
   darauf, dass sie klickbar sind. */
.wp-block-image a img {
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.wp-block-image a:hover img {
	opacity: 0.88;
}

.wp-block-image a:focus-visible img {
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 3px;
}

/* ── Navigation ───────────────────────────────────────────────────────────
   Der aktive Menüpunkt war bisher nicht erkennbar. */
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation .current-menu-ancestor > a {
	text-decoration: underline;
	text-underline-offset: 0.4em;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--primary);
}

.site-header .wp-block-navigation a {
	transition: color 0.15s ease;
}

.site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary-strong);
}

/* ── Redaktionelle Hinweise ───────────────────────────────────────────────
   Markierungen für noch fehlende Inhalte. Sie sollen im Entwurf auffallen
   und beim Übersehen stören – deshalb deutlich abgesetzt. */
.redaktioneller-hinweis {
	padding: 0.7rem 0.9rem;
	border-inline-start: 3px solid #C98A2B;
	background-color: #FDF6E9;
	color: #6B4A14;
	border-radius: 0 3px 3px 0;
}

.has-contrast-background-color .redaktioneller-hinweis,
.has-primary-strong-background-color .redaktioneller-hinweis,
.ist-dunkel .redaktioneller-hinweis {
	background-color: rgb(255 255 255 / 12%);
	color: var(--wp--preset--color--base);
	border-inline-start-color: #E8C07A;
}

/* ── Schaltflächen auf dunklem Grund ──────────────────────────────────────
   Die Umriss-Variante erbt sonst die dunkle Textfarbe des Designsystems und
   verschwindet auf dunklem Hintergrund. Und die gefüllte Schaltfläche wird
   beim Überfahren normalerweise dunkler – auf dunklem Grund das Gegenteil
   von sichtbar. Hier wird sie deshalb heller. */
:is(.has-contrast-background-color, .has-primary-strong-background-color, .wp-block-cover, .ist-dunkel)
	.wp-block-button__link:not(.has-text-color) {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

:is(.has-contrast-background-color, .has-primary-strong-background-color, .wp-block-cover, .ist-dunkel)
	.wp-block-button__link:not(.has-text-color):hover,
:is(.has-contrast-background-color, .has-primary-strong-background-color, .wp-block-cover, .ist-dunkel)
	.wp-block-button__link:not(.has-text-color):focus-visible {
	background-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--contrast);
}

:is(.has-contrast-background-color, .has-primary-strong-background-color, .wp-block-cover, .ist-dunkel)
	.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

:is(.has-contrast-background-color, .has-primary-strong-background-color, .wp-block-cover, .ist-dunkel)
	.is-style-outline .wp-block-button__link:hover,
:is(.has-contrast-background-color, .has-primary-strong-background-color, .wp-block-cover, .ist-dunkel)
	.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Fokus muss auch auf dunklem Grund sichtbar bleiben. */
:is(.has-contrast-background-color, .has-primary-strong-background-color, .wp-block-cover, .ist-dunkel)
	.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 3px;
}

/* ── Kopfbereich ──────────────────────────────────────────────────────────
   Eine Zeile: Logo links, Navigation und Telefonnummer rechts. Vorher
   stapelten sich die Elemente auf schmalen Geräten untereinander, und der
   Telefon-Button klebte am Burger-Menü statt am rechten Rand.

   Sticky, damit Navigation und Anruf-Möglichkeit beim Lesen erreichbar
   bleiben. Beim Scrollen schrumpft die Leiste, um Platz zurückzugeben. */
/* Das sticky gehört auf den Wrapper, den der Template-Part-Block erzeugt,
   nicht auf den Kopfbereich selbst: Ein sticky-Element klebt nur innerhalb
   der Grenzen seines Elternelements, und der Wrapper ist exakt so hoch wie
   der Kopfbereich. Es gäbe also keinen Raum zum Kleben. Der Wrapper
   dagegen sitzt in .wp-site-blocks und hat die ganze Seitenhöhe zur
   Verfügung. */
.site-header-wrapper {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header {
	transition: padding 0.2s ease, box-shadow 0.2s ease;
}

.site-header__inner {
	max-width: 76rem;
	margin-inline: auto;
	width: 100%;
}

.site-header__logo img {
	display: block;
	transition: width 0.2s ease;
}

/* Zustand nach dem Scrollen: kompakter, mit abhebendem Schatten. */
.site-header.ist-gescrollt {
	padding-block: 0.45rem;
	box-shadow: 0 1px 12px rgb(18 21 24 / 12%);
}

.site-header.ist-gescrollt .site-header__logo img {
	width: 112px;
}

/* ── Schaltflächen auf dunklem Grund ──────────────────────────────────────
   Der globale Hover-Zustand dunkelt auf `contrast` ab. In den dunklen
   Abschnitten ist genau das der Hintergrund: Die Schaltfläche verschwindet
   beim Überfahren. Dort muss der Hover deshalb aufhellen statt abdunkeln.

   Gemessen gegen den Hintergrund #1A1D21:
     #1A1D21 (bisher)  1,00:1  unsichtbar
     #A6B9E9 (jetzt)   8,65:1  klar abgesetzt, trägt dunkle Schrift */
:is(.has-contrast-background-color, .has-primary-strong-background-color, .ist-dunkel)
	.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
:is(.has-contrast-background-color, .has-primary-strong-background-color, .ist-dunkel)
	.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--contrast);
}

/* Umrandete Schaltflächen füllen sich beim Überfahren, statt nur die
   Randfarbe zu wechseln: Der Zustandswechsel ist so eindeutiger. */
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-primary-strong-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.ist-dunkel .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--base);
}

.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.has-primary-strong-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-primary-strong-background-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.ist-dunkel .wp-block-button.is-style-outline .wp-block-button__link:hover,
.ist-dunkel .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary-light);
	border-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--contrast);
}

/* Der Fokusrahmen aus theme.json nutzt primary-strong. Auf dunklem Grund
   erreicht der nur 2,87:1 und wäre kaum zu sehen. */
:is(.has-contrast-background-color, .has-primary-strong-background-color, .ist-dunkel)
	.wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Sanfter Übergang, damit der Wechsel als Reaktion wahrnehmbar ist. */
.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ── Kopfbereich: Höhe nachjustiert ───────────────────────────────────────
   Gemessen ergaben sich 130 px im Ruhezustand und 105 px nach dem Scrollen.
   Für eine Leiste, die dauerhaft oben klebt, ist das zu viel – sie nimmt
   auf einem Laptop-Display rund ein Achtel der Höhe weg.

   Die Höhe folgt dem Logo: Bei 600×401 px Seitenverhältnis ergibt eine
   Breite von 132 px etwa 88 px Höhe. Zusammen mit der Polsterung landet
   die Leiste bei rund 108 px, im gescrollten Zustand bei etwa 72 px. */
.site-header {
	padding-block: 0.7rem;
}

.site-header__logo img {
	width: 132px;
}

.site-header.ist-gescrollt {
	padding-block: 0.4rem;
}

.site-header.ist-gescrollt .site-header__logo img {
	width: 88px;
}

@media (max-width: 781px) {
	.site-header {
		padding-block: 0.55rem;
	}

	.site-header__logo img {
		width: 110px;
	}

	.site-header.ist-gescrollt .site-header__logo img {
		width: 84px;
	}

	/* ── Platz im Kopfbereich ──────────────────────────────────────────────
	   Gemessen am 14.09.2026 bei 390 px: 350 px nutzbare Innenbreite, aber
	   305 px Aktionen plus 110 px Logo. Das Logo schrumpfte als Flex-Element
	   auf 25 px, weil `max-width: 100%` seine vorgesehene Breite schlaegt -
	   sichtbar wurde das erst mit dem zusaetzlichen Umschalter, eng war es
	   schon vorher (89 statt 110 px).

	   Die 2,75rem der Knoepfe bleiben unangetastet: Das ist die von den WCAG
	   empfohlene Mindestgroesse fuer Ziele, die mit dem Finger getroffen
	   werden. Der Platz kommt stattdessen aus den Abstaenden und dem
	   E-Mail-Knopf. */
	.site-header .site-header__inner,
	.site-header .site-header__aktionen {
		gap: 0.75rem;
	}

	.site-header__logo {
		flex-shrink: 0;
	}

}

/* Erst hier entfaellt der E-Mail-Knopf, nicht schon bei 781 px.

   Gemessen am 14.09.2026, jeweils mit erzwungenem Knopf:

     760 px Viewport - 12 px frei, kein Ueberlauf
     480 px Viewport - 49 px frei, kein Ueberlauf
     390 px Viewport - 41 px zu wenig

   Der Sprung kommt daher, dass die Navigation unterhalb von 600 px ins
   Overlay wandert und ihren Platz freigibt. Eng wird es rechnerisch erst
   ab etwa 435 px; die Grenze liegt bei 479 px, damit eine Reserve bleibt -
   die Breite des Sprachumschalters haengt am Text und kann in anderen
   Sprachpaaren groesser ausfallen.

   Anrufen ist auf dem Telefon die naheliegende Handlung. Die Adresse
   bleibt ueber den Fussbereich und die Kontaktseite erreichbar.

   `.site-header` davor ist noetig: `.header-kontakt__knopf` setzt weiter
   unten `display: inline-flex` und haette bei gleicher Spezifitaet
   gewonnen, weil es spaeter im Stylesheet steht. Gemessen: Der Knopf
   blieb sichtbar und der Kopfbereich lief um 33 px ueber den Rand. */
@media (max-width: 479px) {
	.site-header .header-kontakt__knopf--zweit {
		display: none;
	}
}

/* ── Telefon-Symbol ───────────────────────────────────────────────────────
   Zuvor stand hier das Unicode-Zeichen ☎ (U+260E). Dessen Darstellung
   schwankt stark: mal ein Schreibmaschinen-Telefon aus den Achtzigern, mal
   ein buntes Emoji – je nach Betriebssystem und installierten Schriften.

   Stattdessen eine CSS-Maske mit eingebettetem SVG. Die Maske färbt sich
   über `background-color` und erbt damit die Textfarbe der Schaltfläche –
   auch im Hover-Zustand, ohne zweite Grafik. */
.header-phone__icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-end: 0.45em;
	vertical-align: -0.12em;
	background-color: currentColor;
	-webkit-mask: var(--ca-telefon-symbol) center / contain no-repeat;
	mask: var(--ca-telefon-symbol) center / contain no-repeat;
}

:root {
	--ca-telefon-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

/* ── Rhythmus zwischen den Abschnitten ────────────────────────────────────
   Bislang trug jeder Abschnitt dieselben 80 px Polster, gleich ob Kopfbild,
   Kachelreihe oder Handlungsaufruf. Das liest sich gleichförmig von oben
   nach unten. Rhythmus entsteht durch Unterschied, und der lässt sich hier
   allein aus der Struktur ableiten, ohne die Seiteninhalte anzufassen. */

/* Grundabstand für jeden Abschnitt der ersten Ebene. Die Inline-Abstände
   wurden aus den Seiteninhalten entfernt, damit das Theme den Rhythmus
   steuern kann; diese Regel ist deshalb die Grundlage, auf der die
   folgenden Ausnahmen aufsetzen. */
.entry-content > :is(.wp-block-group, .wp-block-columns, section):not(.wp-block-cover) {
	padding-block: clamp(3rem, 6vw, 5rem);
}

/* Abschnitte mit eigenem Hintergrund wirken als geschlossener Block und
   vertragen mehr Luft. Ohne sie wirken sie wie ein eingeklemmtes Band. */
.entry-content > .wp-block-group:is(
	[class*="has-background"]
):not(.wp-block-cover) {
	padding-block: clamp(4rem, 9vw, 7rem);
}

/* Zwei transparente Abschnitte hintereinander addieren ihre Abstände zu
   160 px, was den Zusammenhang auseinander. Der zweite rückt näher. */
.entry-content > .wp-block-group:not([class*="has-background"])
	+ .wp-block-group:not([class*="has-background"]) {
	padding-top: 0;
}

/* Direkt nach dem Kopfbild braucht es keinen großen Abstand: Das Bild
   liefert die Zäsur bereits. */
.wp-block-cover + .wp-block-group {
	padding-top: clamp(2rem, 4vw, 3rem);
}

/* Der dunkle Abschluss-Abschnitt trägt den Handlungsaufruf und ist das
   Ende der Seite. Er darf am großzügigsten sein. */
.entry-content > :is(section, div).has-contrast-background-color:last-child {
	padding-block: clamp(4.5rem, 10vw, 8rem);
}

/* ── Bilder wirkungsvoller ────────────────────────────────────────────────
   Galerien liefen bisher in der normalen Inhaltsbreite und wirkten dadurch
   klein. Als breiter Block bekommen sie Gewicht und mehr Abstand zum
   Text davor und danach, damit sie als eigener Beitrag lesbar sind. */
.wp-block-gallery.alignwide {
	margin-block: clamp(2.5rem, 5vw, 4rem);
	gap: clamp(0.5rem, 1.2vw, 1rem);
}

/* Ein sehr dezenter Schatten gibt den Bildern Tiefe, ohne sie vom weißen
   Grund abzuheben wie einen Aufkleber. */
.wp-block-gallery .wp-block-image img,
.entry-content > .wp-block-image img {
	box-shadow: 0 2px 12px rgb(18 21 24 / 8%);
}

/* ── Videos ───────────────────────────────────────────────────────────────
   Vorbereitet am 16.09.2026, bevor Material vorliegt. Der Block kommt
   derzeit auf keiner Seite vor; ohne diese Regel liefe er in der normalen
   Inhaltsbreite und ohne den Abstand, den Bilder und Galerien haben.

   Bewusst dieselben Werte wie bei der Galerie, nicht neue: Ein Video ist
   im Seitenfluss dasselbe wie ein grosses Bild, und zwei knapp
   verschiedene Abstaende nebeneinander sehen aus wie ein Versehen.

   Der Schatten liegt am Element, nicht am <video>: Ist ein Vorschaubild
   gesetzt, zeichnet der Browser es innerhalb des Videorahmens, und ein
   Schatten am inneren Element waere davon verdeckt. */
.entry-content > .wp-block-video {
	margin-block: clamp(2.5rem, 5vw, 4rem);
}

.wp-block-video video {
	width: 100%;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 2px 12px rgb(18 21 24 / 8%);
}

/* Auf dunklem Grund traegt ein dunkler Schatten nicht - dort grenzt ein
   heller Saum das Video ab, wie bei den uebrigen Flaechen. */
.ist-dunkel .wp-block-video video {
	box-shadow: 0 0 0 1px var(--ca-dm-flaeche-2);
}

.wp-block-video figcaption {
	margin-block-start: 0.6rem;
}

/* Einzelbilder in Spalten (Leistungs-Karten) bekommen ein einheitliches
   Seitenverhältnis, sonst springt die Kartenhöhe je nach Hochformat. */
.wp-block-columns .wp-block-column > .wp-block-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

/* ── Abschnittsüberschriften ──────────────────────────────────────────────
   Eine feine Linie über zentrierten Abschnittsüberschriften markiert den
   Beginn, ohne eine harte Trennlinie über die ganze Breite zu ziehen. */
.entry-content > .wp-block-group > h2.has-text-align-center::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin: 0 auto 1.2rem;
	border-radius: 2px;
	background-color: var(--wp--preset--color--primary);
}

.has-contrast-background-color > h2.has-text-align-center::before {
	background-color: var(--wp--preset--color--primary-light);
}

/* ── Sprachumschalter ─────────────────────────────────────────────────────
   Textkürzel statt Flaggen: Eine Flagge steht für ein Land, nicht für eine
   Sprache. Die aktuelle Sprache ist kein Link, sondern hervorgehoben – so
   ist auf einen Blick erkennbar, worin man gerade liest. */
.sprachumschalter {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.sprachumschalter a {
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
	padding: 0.2rem 0.15rem;
	transition: color 0.15s ease;
}

.sprachumschalter a:hover,
.sprachumschalter a:focus-visible {
	color: var(--wp--preset--color--primary-strong);
	text-decoration: underline;
}

.sprachumschalter__aktiv {
	color: var(--wp--preset--color--contrast);
	padding: 0.2rem 0.15rem;
}

.sprachumschalter__trenner {
	color: var(--wp--preset--color--base-2);
}

/* Im Kopfbereich sitzt der Umschalter zwischen Navigation und Telefon.
   Der Shortcode-Block bringt einen eigenen Absatz mit – dessen Abstand
   würde ihn wie beim Telefon-Button nach unten schieben. */
.site-header .wp-block-shortcode {
	margin: 0;
	line-height: 1;
}

@media (max-width: 781px) {
	.sprachumschalter {
		font-size: 0.8rem;
	}
}


/* ── Links ────────────────────────────────────────────────────────────────
   Links tragen im Ruhezustand keine Unterstreichung, erst bei Hover und
   Tastaturfokus. Das ist eine gestalterische Entscheidung mit einer
   Bedingung: Nach WCAG 1.4.1 dürfen Links nur dann allein über die Farbe
   erkennbar sein, wenn sie sich um mindestens 3:1 vom umgebenden Text
   abheben. Deshalb sind die Linkfarben eigene Palettenwerte und nicht
   primary-strong:

     #4169D1 (link)         5,04:1 gegen Weiß,   3,36:1 gegen Fließtext
     #6E8FE3 (link-invers)  5,40:1 gegen Dunkel, 3,13:1 gegen weißen Text

   primary-strong (#3A5FBF) erreichte gegen den Fließtext nur 2,87:1 und
   war damit ohne Unterstreichung nicht ausreichend unterscheidbar.

   Wird eine Linkfarbe geändert, müssen beide Werte neu gerechnet werden. */
.entry-content :where(a):not(.wp-block-button__link):not(.wp-element-button):hover,
.entry-content :where(a):not(.wp-block-button__link):not(.wp-element-button):focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Schaltflächen und Navigation sind durch ihre Gestalt als bedienbar
   erkennbar und brauchen deshalb nie eine Unterstreichung. */
.wp-block-button__link,
.wp-element-button,
.wp-block-navigation a,
.leistung-icon + p a {
	text-decoration: none;
}


/* ── Kontakt-Schaltflächen im Kopfbereich ─────────────────────────────────
   Telefon und E-Mail als Symbole statt ausgeschriebener Nummer. Die
   Beschriftung bleibt für Screenreader erhalten, damit niemand nur ein
   unbenanntes Symbol vorgelesen bekommt.

   Die Symbole sind Inline-SVG, keine Icon-Schrift: kein zusätzlicher
   Download, keine fehlenden Glyphen, und sie erben die Textfarbe. */
.header-kontakt {
	display: inline-flex;
	gap: 0.4rem;
	margin: 0;
}

.header-kontakt__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 px ist die von den WCAG empfohlene Mindestgröße für Ziele, die mit
	   dem Finger getroffen werden sollen. */
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 0.25rem;
	background-color: var(--wp--preset--color--primary-strong);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.header-kontakt__knopf--zweit {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--base-2);
}

.header-kontakt__knopf:hover,
.header-kontakt__knopf:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ── Umschalter fuer helle und dunkle Darstellung ─────────────────────────
   Zurueckhaltender als die beiden Kontaktknoepfe daneben: Er ist kein
   Handlungsaufruf, sondern eine Einstellung. Gleiche Groesse, damit die
   Reihe ruhig bleibt und das Ziel mit dem Finger treffbar ist. */
.farbschema-schalter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 0.25rem;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.farbschema-schalter:hover,
.farbschema-schalter:focus-visible {
	background-color: var(--wp--preset--color--base-2);
}

/* Sichtbar ist immer nur ein Symbol, und zwar das des Zustands, in den der
   Klick fuehrt: hell zeigt den Mond, dunkel die Sonne. Der zugaengliche
   Name bleibt dabei unveraendert - welcher Zustand gerade gilt, sagt
   aria-pressed, nicht der Text. */
.farbschema-schalter__symbol--sonne {
	display: none;
}

.ist-dunkel .farbschema-schalter__symbol--mond {
	display: none;
}

.ist-dunkel .farbschema-schalter__symbol--sonne {
	display: block;
}

.header-kontakt__knopf--zweit:hover,
.header-kontakt__knopf--zweit:focus-visible {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast);
}

.header-kontakt__knopf svg {
	display: block;
}

/* Nur für Screenreader sichtbar. Nicht display:none, sonst würde der Text
   auch dort verschwinden. */
.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── Sprachumschalter ─────────────────────────────────────────────────────
   Als zusammenhängende Gruppe statt zweier loser Kürzel: So ist erkennbar,
   dass es sich um eine Auswahl handelt und welche Sprache gerade gilt. */
.sprachumschalter {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem;
	border-radius: 0.25rem;
	background-color: var(--wp--preset--color--base-2);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
}

.sprachumschalter a,
.sprachumschalter__aktiv {
	padding: 0.4rem 0.55rem;
	border-radius: 0.185rem;
	text-decoration: none;
	letter-spacing: 0.03em;
}

.sprachumschalter__aktiv {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 1px 2px rgb(18 21 24 / 10%);
}

.sprachumschalter a {
	color: var(--wp--preset--color--contrast-2);
}

.sprachumschalter a:hover,
.sprachumschalter a:focus-visible {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--link);
	text-decoration: none;
}

/* Der Trenner aus der alten Fassung entfällt: Die Gruppe trägt die
   Zusammengehörigkeit jetzt selbst. */
.sprachumschalter__trenner {
	display: none;
}

/* Auf schmalen Geräten reicht weniger Innenabstand, damit Sprachwahl und
   beide Kontakt-Schaltflächen neben der Menütaste Platz finden. */
@media (max-width: 782px) {
	.header-kontakt__knopf {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}

	.sprachumschalter a,
	.sprachumschalter__aktiv {
		padding: 0.35rem 0.4rem;
	}
}

/* ── Links in gedämpftem Text ─────────────────────────────────────────────
   Wo Text in contrast-2 gesetzt ist, erreicht die Linkfarbe nur 1,19:1
   gegen ihn. Die Farbe allein trägt die Erkennbarkeit dort nicht, also
   bleibt die Unterstreichung. Betrifft Bildunterschriften, Hinweise und
   Kleingedrucktes. */
:is(.has-contrast-2-color, .wp-block-image figcaption, .has-small-font-size) a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ═══ Mobile Navigation ═══════════════════════════════════════════════════
   Das Overlay von WordPress ist funktional, aber ungestaltet: Haupt- und
   Unterpunkte unterscheiden sich nur durch Einrückung, der aktive Punkt ist
   nicht erkennbar, und die Bedienflächen sind kleiner als ein Daumen. */

/* Menütaste und Schließen-Knopf auf Daumengröße. WordPress liefert 24 px,
   die WCAG empfehlen 44 px für Ziele, die mit dem Finger getroffen werden. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 0.25rem;
	transition: background-color 0.15s ease;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
	background-color: var(--wp--preset--color--base-2);
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem;
}

/* Kopfzeile des Overlays: Der Schließen-Knopf bekommt Luft und sitzt auf
   Höhe des Logos, damit der Übergang vom geschlossenen Zustand ruhig wirkt. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	inset-block-start: 1.4rem;
	inset-inline-end: 1.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog {
	margin-block-start: 3.5rem;
}

/* Hauptpunkte: großzügige Trefferfläche, Trennlinie, klare Hierarchie. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item {
	inline-size: 100%;
	border-block-end: 1px solid var(--wp--preset--color--base-2);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	display: block;
	padding-block: 0.9rem;
	font-size: 1.125rem;
	font-weight: 600;
}

/* Der aktive Punkt wird markiert. Auf Mobil liegt die Kachelnavigation weit
   unten, hier ist es der einzige Hinweis darauf, wo man gerade ist. */
.wp-block-navigation__responsive-container.is-menu-open
	:is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--link);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--primary-strong);
	padding-inline-start: 0.75rem;
}

/* Untermenü abgesetzt statt nur eingerückt: kleinere, leichtere Schrift auf
   getöntem Grund macht die Ebene ohne Erklärung erkennbar. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	margin-block: 0.25rem 0.75rem;
	padding-inline-start: 0.75rem;
	border-inline-start: 2px solid var(--wp--preset--color--base-2);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: 0.7rem;
	font-size: 1rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .current-menu-item
	.wp-block-navigation-item__content {
	color: var(--wp--preset--color--link);
	font-weight: 600;
}

/* ═══ Bewegung ════════════════════════════════════════════════════════════
   Zurückhaltend eingesetzt: Bewegung soll erklären, was passiert, nicht
   auffallen. Alle Dauern liegen zwischen 150 und 300 ms; darunter wirkt es
   abgehackt, darüber wartet man darauf.

   Eine Faustregel steckt in den Kurven: Elemente, die erscheinen, werden
   mit ease-out abgebremst (schnell da, sanft zur Ruhe), Elemente, die
   verschwinden, mit ease-in beschleunigt. Das entspricht der Erwartung an
   physisches Verhalten. */

/* Das Overlay blendet ein, statt zu erscheinen. */
@keyframes ca-einblenden {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ca-heranrutschen {
	from { opacity: 0; transform: translateY(0.5rem); }
	to   { opacity: 1; transform: translateY(0); }
}

.wp-block-navigation__responsive-container.is-menu-open {
	animation: ca-einblenden 0.2s ease-out both;
}

/* Menüpunkte laufen gestaffelt ein. Der Versatz von 30 ms je Punkt ergibt
   eine Leserichtung von oben nach unten, ohne dass man aufs Ende wartet:
   Bei acht Punkten ist alles nach 0,44 s da. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item {
	animation: ca-heranrutschen 0.25s ease-out both;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: 0.02s; }
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.05s; }
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.08s; }
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.11s; }
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+5) { animation-delay: 0.14s; }

/* Untermenü auf dem Desktop: klappt auf, statt zu springen. */
@media (min-width: 782px) {
	.wp-block-navigation .wp-block-navigation__submenu-container {
		transform-origin: top center;
		transition: opacity 0.18s ease-out, transform 0.18s ease-out;
	}

	.wp-block-navigation .wp-block-navigation-item:not(:hover):not(:focus-within)
		> .wp-block-navigation__submenu-container {
		opacity: 0;
		transform: translateY(-0.35rem);
	}
}

/* Kopfbilder: Das Motiv kommt beim Laden sanft zur Ruhe, statt hart
   aufzuschlagen. Nur einmal beim Seitenaufbau. */
.wp-block-cover__inner-container > :is(h1, p, .wp-block-buttons) {
	animation: ca-heranrutschen 0.35s ease-out both;
}

.wp-block-cover__inner-container > h1 { animation-delay: 0.05s; }
.wp-block-cover__inner-container > p { animation-delay: 0.12s; }
.wp-block-cover__inner-container > .wp-block-buttons { animation-delay: 0.19s; }

/* Schaltflächen heben sich beim Überfahren minimal an. 1 Pixel genügt: Es
   ist spürbar, ohne dass das Layout zu wackeln scheint. */
.wp-block-button__link:hover,
.header-kontakt__knopf:hover {
	transform: translateY(-1px);
}

.wp-block-button__link:active,
.header-kontakt__knopf:active {
	transform: translateY(0);
	transition-duration: 0.05s;
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt keine. Die weiter oben
   stehende Regel deckt Übergänge ab; hier werden zusätzlich die
   Keyframe-Animationen abgeschaltet, damit nichts eingeblendet wird und
   Inhalte auch ohne Animation sichtbar sind. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container > .wp-block-navigation-item,
	.wp-block-cover__inner-container > :is(h1, p, .wp-block-buttons) {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.wp-block-button__link:hover,
	.header-kontakt__knopf:hover {
		transform: none;
	}
}

/* ═══ Leistungskacheln ════════════════════════════════════════════════════
   Sechs gleichwertige Einstiege. Wichtig ist, dass sie als Schaltflächen
   lesbar sind und dass erkennbar bleibt, auf welcher man gerade steht. */

.wp-block-group:has(> figure.leistung-icon) {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	/* Gleiche Höhe unabhängig von der Textlänge: "Hochspannungsleitungen"
	   bricht auf zwei Zeilen um, "Windkraft" nicht. Ohne Mindesthöhe
	   entstünde ein unruhiges Raster. */
	min-block-size: 8.5rem;
	border: 1px solid transparent;
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

/* Nicht aktive Kacheln: zurückhaltend, aber als Fläche erkennbar. */
.wp-block-group:has(> figure.leistung-icon):not(.has-primary-strong-background-color) {
	border-color: var(--wp--preset--color--base-2);
}

.wp-block-group:has(> figure.leistung-icon):not(.has-primary-strong-background-color):hover {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgb(18 21 24 / 9%);
}

/* Das Symbol wächst beim Überfahren leicht mit. Die eigene Transition auf
   dem Bild, nicht auf der Kachel: sonst würde auch der Text skalieren und
   unscharf wirken. */
.leistung-icon img {
	transition: transform 0.18s ease;
}

.wp-block-group:has(> figure.leistung-icon):hover .leistung-icon img {
	transform: scale(1.08);
}

/* Die ganze Kachel ist Klickfläche, nicht nur die Beschriftung. */
.leistung-icon + p a {
	color: inherit;
	text-decoration: none;
}

.leistung-icon + p a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* ── Kacheln auf schmalen Bildschirmen ────────────────────────────────────
   Gemessen am 15.09.2026 bei 390 px: sechs Kacheln zu je 141 px, zusammen
   1009 px - bei 844 px Bildschirmhoehe also mehr als ein voller Scrollweg,
   nur fuer die Navigation. Der Kunde im Gespraech: "die kriegen wir auf
   jeden Fall auch noch ein bisschen kleiner".

   Zweispaltig plus kleineres Symbol bringt das auf rund 400 px. Die
   Trefferflaeche bleibt mit ueber 44 px Hoehe bequem mit dem Finger
   erreichbar - das ist die Untergrenze, unter die auch eine kompaktere
   Darstellung nicht gehen darf.

   `!important` ist hier noetig, weil Symbolgroesse und Polster als
   Inline-Stil im Block-Markup stehen: Der Bildblock schreibt `width:48px`
   direkt ans <img>, die Kachelgruppe ihre Polster ans <div>. Gegen einen
   Inline-Stil kommt keine Regel ohne !important an. Die Werte im Pattern
   bleiben unangetastet, damit die Darstellung auf breiten Bildschirmen
   dieselbe bleibt. */
@media (max-width: 781px) {
	.wp-block-group:has(> .wp-block-group > figure.leistung-icon) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-group:has(> figure.leistung-icon) {
		padding-block: 0.9rem !important;
		padding-inline: 0.5rem !important;
	}

	.leistung-icon {
		margin-block-end: 0.5rem;
	}

	.leistung-icon img {
		width: 36px !important;
	}
}

/* Tastaturfokus liegt auf dem Link, sichtbar werden soll aber die Kachel. */
.wp-block-group:has(> figure.leistung-icon):focus-within {
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 2px;
}

.leistung-icon + p a:focus-visible {
	outline: none;
}

/* Aktive Kachel: kräftige Fläche, Symbol invertiert, kein Anheben. Sie ist
   kein Ziel, sondern eine Standortanzeige. */
.wp-block-group.has-primary-strong-background-color:has(> figure.leistung-icon) {
	cursor: default;
}

.has-primary-strong-background-color > .leistung-icon img {
	filter: invert(1) brightness(2);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group:has(> figure.leistung-icon),
	.leistung-icon img {
		transition: none;
	}

	.wp-block-group:has(> figure.leistung-icon):hover {
		transform: none;
	}

	.wp-block-group:has(> figure.leistung-icon):hover .leistung-icon img {
		transform: none;
	}
}


/* ═══ Dark Mode ══════════════════════════════════════════════════════════
   Die Seite folgt der Systemeinstellung und laesst sich im Kopfbereich
   umschalten. Gesetzt wird die Klasse `ist-dunkel` auf <html>, noch im
   <head>, bevor der erste Pixel gezeichnet ist.

   WARUM EINE KLASSE UND NICHT UMDEFINIERTE PRESETS

   Nahe laege, im Dark Mode einfach `base` und `contrast` zu vertauschen.
   Das bricht hier aber alles: Die beiden Farben benennen in diesem Theme
   Helligkeiten, keine Rollen. Auf dunklem Grund steht
   `background-color: base` fuer eine weisse Schaltflaeche und
   `color: contrast` fuer die dunkle Schrift darauf. Vertauscht man sie,
   werden Fussbereich und Cover hell und die Schaltflaechen darauf kehren
   sich um.

   Stattdessen nutzt der Dark Mode eine Beobachtung: Das Theme kennt
   laengst "auf dunklem Grund" - als Selektorgruppe fuer Fussbereich,
   Cover und Gruppen mit dunkler Flaeche. Der Dark Mode ist nichts als
   deren Ausweitung auf die ganze Seite. `.ist-dunkel` steht deshalb in
   genau diesen Gruppen, und die dort bereits gerechneten Regeln gelten
   ohne Aenderung weiter.

   DIE VIER NEUEN WERTE

   Gerechnet am 14.09.2026, nachzurechnen mit docs/kontrast-rechner.py
   gegen docs/kontrast-paarungen.txt. Sie stehen bewusst nicht in
   theme.json: Es sind Modusfarben, keine Farben, die im Editor an einen
   Block vergeben werden sollen.

   LINKS SIND HIER UNTERSTRICHEN, UND DAS IST BEDINGUNG

   #7A99E7 erreicht gegen den Fliesstext nur 2,27:1. Ohne Unterstreichung
   waere das ein Verstoss gegen WCAG 1.4.1. Mit ihr entfaellt die
   Anforderung - und erst dadurch darf die Linkfarbe hell genug sein, um
   auf beiden dunklen Flaechen zu tragen (6,07:1 und 4,97:1).
   Wer die Unterstreichung entfernt, muss die Palette neu rechnen. */

.ist-dunkel {
	--ca-dm-flaeche: #1A1D21;
	--ca-dm-flaeche-2: #282D34;
	--ca-dm-text: #E6E8EC;
	--ca-dm-text-gedaempft: #9BA4B2;
	--ca-dm-link: #7A99E7;
	--ca-dm-schaltflaeche: #A6B9E9;
	--ca-dm-schaltflaeche-hover: #7B96E0;

	/* base-2 benennt durchgehend "sehr helle Flaeche oder zarter Rahmen"
	   und wird nie als Textfarbe auf hellem Grund verwendet. Nur deshalb
	   ist das Umdefinieren hier unbedenklich - es loest fuenf Stellen auf
	   einmal: Sprachumschalter, Menuetaste, Untermenue-Rahmen und den
	   Rahmen der Leistungskachel. */
	--wp--preset--color--base-2: var(--ca-dm-flaeche-2);
}

.ist-dunkel body {
	background-color: var(--ca-dm-flaeche);
	color: var(--ca-dm-text);
}

/* WARUM HIER !important STEHT

   WordPress erzeugt fuer jede Preset-Farbklasse eine eigene Regel, und
   zwar mit !important:

       .has-base-background-color { background-color: ... !important }

   Das ist Absicht - eine im Editor vergebene Farbe soll sich gegen das
   Theme durchsetzen. Gegen !important hilft aber keine Spezifitaet, nur
   ein zweites !important. Unter zwei wichtigen Deklarationen entscheidet
   dann wieder die Spezifitaet, und `.ist-dunkel .site-header` (0,2,0)
   schlaegt `.has-base-background-color` (0,1,0).

   Gemessen am 14.09.2026: Ohne !important blieb der Kopfbereich weiss,
   waehrend die Seite dunkel war.

   Der Kopfbereich traegt `has-base-background-color` fest im Markup. */
.ist-dunkel .site-header {
	background-color: var(--ca-dm-flaeche) !important;
	border-bottom-color: var(--ca-dm-flaeche-2);
}

/* Fussbereich und Gruppen mit dunkler Flaeche gehen eine Stufe heller.
   Sonst waeren sie #1A1D21 auf #1A1D21 und die Trennung verschwaende.
   Die Cover-Bloecke bleiben ausgenommen: Dort grenzt das Hintergrundbild
   ab, und die Textkontraste darauf sind bereits geprueft. */
.ist-dunkel .has-contrast-background-color:not(.wp-block-cover) {
	background-color: var(--ca-dm-flaeche-2) !important;
}

/* Fliesstext und Ueberschriften. `has-contrast-color` ist im hellen Modus
   die dunkle Schrift - hier muss sie hell werden.

   ZWEI REGELN, NICHT EINE

   Nur die Preset-Klasse braucht das !important: Gegen das
   `.has-contrast-color { color: ... !important }`, das WordPress selbst
   erzeugt, hilft keine Spezifitaet. Die beiden Container tragen keine
   konkurrierende Deklaration und kommen ohne aus - stuenden sie mit in
   der wichtigen Regel, ueberstimmte sie ausserdem das `has-base-color`,
   das der Fussbereich absichtlich traegt.

   Gemessen am 15.09.2026: Eine Ueberschrift mit der Farbe "Text" stand im
   Dark Mode auf 1,00:1, also unsichtbar. */
.ist-dunkel :is(.entry-content, .site-footer) {
	color: var(--ca-dm-text);
}

.ist-dunkel .has-contrast-color {
	color: var(--ca-dm-text) !important;
}

/* Nur was ausdruecklich als zweitrangig ausgezeichnet ist. `.has-small-font-size`
   stand hier zunaechst mit in der Liste - das war falsch: Die Klasse benennt
   eine Schriftgroesse, keine Rolle. Sie traf damit auch die Beschriftung der
   aktiven Kachel, die auf blauer Flaeche weiss sein muss, und drueckte sie
   auf 2,34:1. */
.ist-dunkel figcaption {
	color: var(--ca-dm-text-gedaempft);
}

.ist-dunkel .has-contrast-2-color {
	color: var(--ca-dm-text-gedaempft) !important;
}

/* `link` als ausdruecklich vergebene Textfarbe. Sie zeigt dasselbe
   Verhalten wie contrast: WordPress setzt sie mit !important durch, und im
   Dark Mode bleibt sie dann bei #4169D1 auf dunklem Grund stehen - 3,36:1.

   --ca-dm-link traegt auf beiden dunklen Flaechen (6,07:1 und 4,97:1).
   link-invers waere der naheliegende Griff, faellt auf der zweiten Flaeche
   aber mit 4,42:1 durch; deshalb hier die Modusfarbe.

   Gilt fuer die Farbzuweisung an beliebigen Text. Echte Verweise regelt die
   Regel weiter unten, samt Unterstreichung. */
.ist-dunkel .has-link-color {
	color: var(--ca-dm-link) !important;
}

/* ── Flaechen, die im Editor vergeben werden ──────────────────────────────

   Wer im Editor eine Flaeche waehlt, setzt damit keine Schriftfarbe. Die
   Schrift erbt weiter von aussen - und was draussen richtig war, ist auf
   der neuen Flaeche womoeglich falsch. Die Selektorgruppe "auf dunklem
   Grund" weiter oben deckt nur Schaltflaechen ab, keinen Fliesstext.

   Gemessen am 15.09.2026, jede Palettenfarbe als Flaeche mit geerbtem Text,
   vor den Regeln unten:

       Flaeche                     hell       dunkel
       base           #FFFFFF    16,91:1      1,23:1
       base-2         #F4F4F4    15,38:1     11,30:1   traegt von selbst
       contrast       #1A1D21     1,00:1     11,30:1
       contrast-2     #5A6472     2,82:1      4,89:1
       primary        #577DDD     4,34:1      3,18:1   nicht loesbar
       primary-light  #A6B9E9     8,65:1      1,59:1
       primary-strong #3A5FBF     2,87:1      4,80:1
       link           #4169D1     3,36:1      4,11:1
       link-invers    #6E8FE3     5,40:1      2,55:1

   Deshalb stellt hier jede vergebbare Flaeche ihre Schriftfarbe selbst
   her, statt sie zu erben.

   base-2 fehlt bewusst: Die Variable wird im Dark Mode umdefiniert, die
   Flaeche wandert also mit und braucht nichts.

   primary #577DDD fehlt ebenfalls, aus dem gegenteiligen Grund: Es traegt
   gar keine Schriftfarbe. Weder Weiss (3,90:1) noch contrast (4,34:1)
   erreicht 4,5:1, und eine dritte Farbe gibt die Palette nicht her. Das
   ist eine Gestaltungsfrage und steht als eigene Entscheidung im Tracker.

   Nachzurechnen mit docs/kontrast-rechner.py. */

/* Dunkle Flaechen im hellen Modus: helle Schrift. Im Dark Mode nicht
   noetig - dort greift die Regel fuer .entry-content weiter oben und
   liefert 11,30:1, ohne das grelle reine Weiss. */
html:not(.ist-dunkel) .entry-content :is(.has-contrast-background-color, .has-contrast-2-background-color, .has-primary-strong-background-color, .has-link-background-color):not(.wp-block-cover),
html:not(.ist-dunkel) .entry-content :is(.has-contrast-background-color, .has-contrast-2-background-color, .has-primary-strong-background-color, .has-link-background-color):not(.wp-block-cover) :where(p, li, dt, dd, h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

/* Flaechen, die im Dark Mode hell bleiben: dunkle Schrift wiederherstellen.
   link-invers steht mit in der Liste, obwohl es keine helle Flaeche ist: Die
   Modusschrift kommt darauf nur auf 2,55:1, contrast dagegen auf 5,40:1. */
.ist-dunkel .entry-content :is(.has-base-background-color, .has-primary-light-background-color, .has-link-invers-background-color),
.ist-dunkel .entry-content :is(.has-base-background-color, .has-primary-light-background-color, .has-link-invers-background-color) :where(p, li, dt, dd, h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--contrast);
}

/* Die Flaeche link ist der Gegenfall: Dort traegt die Modusschrift 4,11:1
   und faellt durch, reines Weiss dagegen 5,04:1. */
.ist-dunkel .entry-content .has-link-background-color,
.ist-dunkel .entry-content .has-link-background-color :where(p, li, dt, dd, h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

/* Dasselbe gegen eine ausdrueckliche Textfarbe, die sonst per !important
   hell bliebe - der Regressionsfall zur Regel oben. Gemessen: dunkler Text
   auf ausdruecklich heller Flaeche liefert 16,91:1 und muss das behalten. */
.ist-dunkel .entry-content :is(.has-base-background-color, .has-primary-light-background-color, .has-link-invers-background-color) .has-contrast-color,
.ist-dunkel .entry-content :is(.has-base-background-color, .has-primary-light-background-color, .has-link-invers-background-color).has-contrast-color {
	color: var(--wp--preset--color--contrast) !important;
}

.ist-dunkel .entry-content :is(.has-base-background-color, .has-primary-light-background-color) .has-contrast-2-color,
.ist-dunkel .entry-content :is(.has-base-background-color, .has-primary-light-background-color).has-contrast-2-color {
	color: var(--wp--preset--color--contrast-2) !important;
}

/* Links: Farbe und Unterstreichung gehoeren zusammen, siehe oben. */
.ist-dunkel .entry-content a:not(.wp-block-button__link):not(.wp-element-button),
.ist-dunkel .site-footer a:not(.wp-block-button__link):not(.wp-element-button) {
	color: var(--ca-dm-link);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Schaltflaechen. Die geerbte Regel fuer dunkle Bereiche macht sie weiss;
   auf einer ganzen dunklen Seite ist das zu grell, dieselbe Ueberlegung
   wie beim gedaempften Fliesstext. */
/* `:not(.is-style-outline)` ist hier nicht optional: Umriss-Schaltflaechen
   sind absichtlich flaechenlos. Ohne den Ausschluss bekam die Schaltflaeche
   im Kontaktbereich eine helle Flaeche, behielt aber ihre weisse Schrift -
   gemessene 1,96:1. Alle bestehenden Regeln des Themes nehmen sie ebenso aus.

   Und die Klasse sitzt am Wrapper `.wp-block-button`, nicht am Link. Ein
   `.wp-element-button:not(.is-style-outline)` greift deshalb *immer* - der
   Link traegt die Klasse ja nie. Nach dieser Falle fuellte sich die
   Umriss-Schaltflaeche im Dark Mode trotz des Ausschlusses; der Kontrast
   stimmte danach sogar, nur die Gestalt war falsch. Deshalb steht hier
   `:is(button, input).wp-element-button`: Es trifft die Schaltflaechen des
   Kontaktformulars, die nie in einem Umriss-Wrapper stecken. */
.ist-dunkel .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color),
.ist-dunkel :is(button, input).wp-element-button:not(.has-text-color) {
	background-color: var(--ca-dm-schaltflaeche);
	color: var(--ca-dm-flaeche);
}

.ist-dunkel .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color):hover,
.ist-dunkel .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color):focus-visible,
.ist-dunkel :is(button, input).wp-element-button:not(.has-text-color):hover,
.ist-dunkel :is(button, input).wp-element-button:not(.has-text-color):focus-visible {
	background-color: var(--ca-dm-schaltflaeche-hover);
	color: var(--ca-dm-flaeche);
}

/* Der dekorative Strich unter zentrierten Ueberschriften nutzt primary
   (#577DDD, 4,34:1 gegen den dunklen Grund - als Flaeche zulaessig). Auf
   der dunklen Seite traegt primary-light deutlicher, wie es im hellen
   Modus schon in dunklen Bereichen der Fall ist. */
.ist-dunkel .entry-content > .wp-block-group > h2.has-text-align-center::before {
	background-color: var(--wp--preset--color--primary-light);
}

/* ── Untermenü der Navigation ─────────────────────────────────────────────
   Das Untermenü ist ein eigenes Element mit eigener Preset-Klasse
   (`has-base-background-color`) und faellt deshalb nicht unter die Regel
   fuer `.site-header`. Gemessen am 15.09.2026: Es blieb im Dark Mode weiss,
   waehrend der Kopfbereich darueber dunkel war.

   `!important` aus demselben Grund wie beim Kopfbereich: WordPress setzt
   Preset-Farbklassen mit !important durch, und dagegen hilft keine
   Spezifitaet.

   Die zweite Flaeche statt der Grundflaeche, damit sich das aufgeklappte
   Menue vom Kopfbereich abhebt - sonst schwebte es unsichtbar darueber. */
.ist-dunkel .wp-block-navigation__submenu-container {
	background-color: var(--ca-dm-flaeche-2) !important;
	border-color: var(--ca-dm-flaeche);
}

.ist-dunkel .wp-block-navigation__submenu-container,
.ist-dunkel .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--ca-dm-text);
}

/* Der aktive Eintrag bleibt hervorgehoben, in der Linkfarbe des Dark Mode. */
.ist-dunkel .wp-block-navigation__submenu-container
	.current-menu-item .wp-block-navigation-item__content {
	color: var(--ca-dm-link);
}

/* ── Kopfbereich: was contrast als Schriftfarbe erbt ──────────────────────
   Diese drei Stellen setzen die dunkle Schrift ausdruecklich und liegen
   ausserhalb jeder Selektorgruppe. Gemessen am 14.09.2026, vor der
   Korrektur: der zweite Kontaktknopf stand bei 1,00:1 - dunkles Symbol
   auf dunklem Grund, vollstaendig unsichtbar. */
.ist-dunkel .farbschema-schalter,
.ist-dunkel .header-kontakt__knopf--zweit {
	color: var(--ca-dm-text);
}

/* Der Sprachumschalter setzt die aktive Sprache durch eine hellere Flaeche
   ab. Im Dark Mode wuerde daraus ein weisser Kasten im dunklen Kopf - hier
   setzt sie sich deshalb nach unten ab, dunkler als die Gruppe. */
.ist-dunkel .sprachumschalter__aktiv {
	background-color: var(--ca-dm-flaeche);
	color: var(--ca-dm-text);
	box-shadow: none;
}

/* contrast-2 erreicht auf der Gruppenflaeche nur 2,31:1. */
.ist-dunkel .sprachumschalter a {
	color: var(--ca-dm-text-gedaempft);
}

.ist-dunkel .sprachumschalter a:hover,
.ist-dunkel .sprachumschalter a:focus-visible {
	background-color: var(--ca-dm-flaeche);
	color: var(--ca-dm-link);
}

/* ── Kopfbild schliesst an den Kopfbereich an ─────────────────────────────
   WordPress setzt zwischen die Kinder von .wp-site-blocks seinen
   Standard-Blockabstand; `main` traegt dadurch 24 px Aussenabstand nach
   oben. Unter einem vollbreiten Kopfbild sieht das aus wie ein
   vergessener weisser Streifen.

   Die Regel greift bewusst nur, wenn der Inhalt tatsaechlich mit einem
   Cover beginnt. Auf Impressum, Datenschutz und AGB steht dort eine
   Ueberschrift - dort ist der Abstand richtig, und ohne ihn klebte der
   Text am Menue. */
.wp-site-blocks > main:has(> .entry-content > .wp-block-cover:first-child) {
	margin-block-start: 0;
}

/* ── Logo ─────────────────────────────────────────────────────────────────
   Das Positiv-Logo traegt schwarze Schrift und verschwindet auf dunklem
   Grund. Die Negativ-Fassung liegt in der Mediathek; copterart_logo_negativ()
   in der functions.php haengt sie als zweites Bild ein, hier wird
   umgeschaltet. Kein CSS-Filter: Eine invertierte Fassung trifft die
   Markenfarbe des Vogels nicht. */
/* `.site-header__logo img` setzt `display: block` und ist mit 0,1,1
   spezifischer als eine blosse Klasse - ein `.logo-negativ { display: none }`
   verliert dagegen. Gemessen am 15.09.2026: Im hellen Modus standen beide
   Fassungen untereinander und schoben den Kopfbereich von 120 auf 206 px.
   Die Dark-Mode-Regeln waren davon nicht betroffen, weil `.ist-dunkel` sie
   ohnehin auf 0,2,x hebt. */
.site-header__logo img.logo-negativ {
	display: none;
}

/* ── Tastaturfokus ────────────────────────────────────────────────────────
   Der Fokusrahmen nutzt primary-strong. Auf der dunklen Seite erreicht die
   Farbe nur 2,87:1 und verfehlt damit die 3:1, die WCAG 1.4.11 fuer
   Bedienelemente verlangt - ausgerechnet bei der Auszeichnung, auf die
   Tastaturbedienung angewiesen ist. primary-light kommt auf 8,65:1.

   Die globale Regel steht in `:where(...)` und hat damit Spezifitaet 0;
   `.ist-dunkel` genuegt, um sie zu ueberschreiben. */
.ist-dunkel .skip-link:focus,
.ist-dunkel :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.ist-dunkel .wp-block-image a:focus-visible img,
.ist-dunkel .wp-block-group:has(> figure.leistung-icon):focus-within {
	outline-color: var(--wp--preset--color--primary-light);
}

/* Das Positiv-Logo verschwindet nur dort, wo tatsaechlich eine
   Negativ-Fassung eingehaengt wurde. Fehlt sie, bleibt es stehen - lieber
   ein schwer lesbares Logo als gar keins. Die Klasse setzt
   copterart_logo_negativ(). */
.ist-dunkel .hat-logo-negativ .custom-logo {
	display: none;
}

.ist-dunkel .site-header__logo img.logo-negativ {
	display: block;
}


/* ═══ Kopfbild als Bildfolge ══════════════════════════════════════════════
   Angebunden über die Klasse `ca-bildfolge` am Cover-Block; die weiteren
   Bilder hängt copterart_bildfolge() beim Rendern ein.

   OHNE JAVASCRIPT BLEIBT EIN STANDBILD

   Die nachgeschobenen Bilder sind unsichtbar, solange das Skript die
   Steuerung nicht übernommen hat - sichtbar ist dann allein das Bild, das
   im Block gespeichert ist. Genau so sieht es auch im Editor aus, wo weder
   Filter noch Skript laufen. Das ist Absicht: Eine Fläche, die ohne Skript
   leer bleibt, wäre ein Fehler, keine Rückfallebene. */
.ca-bildfolge__bild {
	opacity: 0;
}

.ca-bildfolge.laeuft .wp-block-cover__image-background {
	opacity: 0;
	transition: opacity 0.9s ease-in-out;
}

.ca-bildfolge.laeuft .wp-block-cover__image-background.ist-sichtbar {
	opacity: 1;
}

/* Wer Bewegung reduziert haben will, bekommt den Wechsel ohne Überblendung -
   die Bilder springen dann hart, und der automatische Lauf bleibt aus. Das
   Weiterschalten von Hand funktioniert weiterhin. */
@media (prefers-reduced-motion: reduce) {
	.ca-bildfolge.laeuft .wp-block-cover__image-background {
		transition: none;
	}
}

/* ── Bedienpunkte ─────────────────────────────────────────────────────────
   Liegen im Cover unten rechts, über dem Overlay. Weiß auf dem
   abgedunkelten Bild: Der schlechteste gemessene Bilduntergrund erreicht
   4,56:1, die Punkte sind damit deutlich über den 3:1 für Bedienelemente.

   44 px Zielgröße wie bei den Kopfknöpfen - der sichtbare Punkt ist
   kleiner, die Trefferfläche nicht. */
.ca-bildfolge__punkte {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline-end: 1.25rem;
	z-index: 2;
	display: flex;
	gap: 0.15rem;
}

.ca-bildfolge__punkt {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.ca-bildfolge__punkt::before {
	content: "";
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--base);
	background-color: transparent;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ca-bildfolge__punkt[aria-current="true"]::before {
	background-color: var(--wp--preset--color--base);
	transform: scale(1.15);
}

.ca-bildfolge__punkt:hover::before,
.ca-bildfolge__punkt:focus-visible::before {
	background-color: var(--wp--preset--color--base);
}

.ca-bildfolge__punkt:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: -6px;
	border-radius: 0.25rem;
}

@media (max-width: 781px) {
	.ca-bildfolge__punkte {
		inset-block-end: 0.5rem;
		inset-inline-end: 0.5rem;
	}
}