/**
 * Theme Name: DivaPole
 * Theme URI: https://www.divapole.de/
 * Author: DivaPole
 * Description: Eigenes Theme für divapole.de. Responsiv, WCAG-AA-konforme Farben, für Elementor gebaut. Standalone — kein Parent-Theme, das ein Update überschreiben könnte.
 * Version: 1.0.0
 * Requires at least: 6.0
 * Requires PHP: 7.4
 * License: GPL-2.0-or-later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: divapole
 * Domain Path: /languages
 * Tags: custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready, two-columns, right-sidebar
 */

/* --------------------------------------------------------------------------
 * Inhalt
 *
 * 0. Schriften
 * 1. Design-Tokens
 * 2. Reset und Grundtypografie
 * 3. Barrierefreiheit
 * 4. Layout-Grid und Silhouetten-Spalte
 * 5. Kopfbereich und Navigation
 * 6. Buttons und Call-to-Action
 * 7. Inhaltsbausteine (Preise, Wochenplan, Beiträge, Formulare)
 * 7c. Bild-Ausrichtung und Galerien
 * 7d. Gleicher Abstand nach der Überschrift
 * 8. Fußbereich
 * 9. Sticky-Leiste (mobil)
 * 10. Elementor-Verträglichkeit
 * 11. Druck
 * 12. Dunkel-Design
 * 13. Sanfter Wechsel zwischen Hell und Dunkel
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * 0. Schriften
 *
 * Alle Schriften liegen im Theme unter assets/fonts und werden von der
 * eigenen Domain ausgeliefert. Vorher kam Font Awesome von
 * use.fontawesome.com, Asap wurde gar nicht geladen (nur im Font-Stack
 * genannt, also griff der System-Rückfall), und Ropa Sans hing an einem
 * Plugin-Verzeichnis unter uploads. Mit den Dateien im Theme gibt es keinen
 * externen Request, keine Abhängigkeit von einem Plugin und keine
 * IP-Übermittlung an Dritte beim Laden der Seite.
 *
 * font-display: swap zeigt sofort den Rückfall und tauscht nach dem Laden —
 * lieber unformatierter Text als für Sekunden kein Text.
 *
 * Lizenzen: siehe assets/fonts/LIZENZEN.md. Asap und Ropa Sans stehen unter
 * der SIL Open Font License 1.1, die Font-Awesome-Free-Schriftdateien
 * ebenfalls.
 * -------------------------------------------------------------------------- */

@font-face {
	font-family: "Asap";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/asap-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Asap";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/asap-latin-ext-400.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Asap";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/asap-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Asap";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/asap-latin-ext-600.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Asap";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/asap-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Asap";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/asap-latin-ext-700.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Ropa Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/ropasans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Ropa Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/ropasans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Ropa Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/ropasans-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Ropa Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/ropasans-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Font Awesome 5 Brands, Version 5.13.0 — dieselbe, die das Plugin vom CDN
 * geladen hat. Vom kompletten Icon-Satz wird nur diese eine Datei
 * eingebunden, und aus ihr nur zwei Zeichen: Facebook und Instagram.
 */
@font-face {
	font-family: "Font Awesome 5 Brands";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("assets/fonts/fa-brands-400.woff2") format("woff2");
}

/*
 * Nur die zwei benutzten Klassen statt der 58 KB des vollständigen
 * Font-Awesome-Stylesheets. Die Zeichen stehen an den Stellen f082
 * (facebook-square) und f955 (instagram-square) — ausgelesen aus
 * all.min.css der Version 5.13.0.
 *
 * font-display: block statt swap: Ein Icon-Zeichen hat keinen sinnvollen
 * Rückfall. Mit swap erschiene kurz ein Ersatzzeichen aus der
 * Systemschrift, was schlechter ist als ein Moment ohne Icon.
 */
.fab {
	font-family: "Font Awesome 5 Brands";
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.fa-facebook-square::before {
	content: "\f082";
}

.fa-instagram-square::before {
	content: "\f955";
}

/* --------------------------------------------------------------------------
 * 1. Design-Tokens
 *
 * Alle Farbwerte sind gegen Rosa (#fbdaec) und Weiß gemessen, nicht geschätzt:
 *
 *   --dp-magenta       #e2017b  Weiß darauf 4.64:1  → AA, nur Flächen/Buttons
 *   --dp-magenta-ink   #c6016c  auf Rosa 4.51:1     → AA, Text und Links
 *   --dp-magenta-deep  #91014f  auf Rosa 7.04:1     → AAA, Hover und Fokus
 *   --dp-ink           #03263b  auf Rosa 12.16:1    → Fließtext
 *   --dp-ink-soft      #404242  auf Rosa 7.87:1     → Sekundärtext
 *
 * Das alte Link-Magenta #f22092 lag bei 3.03:1 auf Rosa und damit unter der
 * AA-Schwelle von 4.5:1. --dp-magenta-ink behält Farbton (327.5°) und
 * Sättigung (99.1%) der Marke und senkt nur die Helligkeit von 44.5% auf
 * 39.0% — die Marke bleibt erkennbar, der Kontrast stimmt.
 * -------------------------------------------------------------------------- */

:root {
	--dp-magenta: #e2017b;
	--dp-magenta-ink: #c6016c;
	--dp-magenta-deep: #91014f;
	--dp-ink: #03263b;
	--dp-ink-soft: #404242;
	--dp-rose: #fbdaec;
	--dp-rose-deep: #f6c3de;
	--dp-surface: #ffffff;

	/*
	 * Textfarbe auf Markenflächen: magentafarbene Navigation, magentafarbene
	 * Buttons, dunkle Topbar.
	 *
	 * Bewusst ein eigenes Token und nicht --dp-surface: Im Dunkel-Design wird
	 * --dp-surface zur dunklen Kartenfläche. Die Navigation trug damit dunkle
	 * Schrift auf dem unverändert magentafarbenen Grund — gemessen 3.32:1.
	 * Dieses Token schaltet nie mit, weil die Fläche darunter auch nicht
	 * mitschaltet.
	 */
	--dp-on-brand: #ffffff;

	/*
	 * Gegenstück: Text auf einer weißen Fläche innerhalb der Leiste, etwa die
	 * aktive Schaltfläche des Umschalters. Schaltet ebenfalls nicht mit, weil
	 * die weiße Fläche in beiden Modi weiß bleibt. Weiß dahinter: 10.12:1.
	 */
	--dp-topbar-ink: #404242;

	/*
	 * Pink für die Social-Icons auf der grauen Leiste.
	 *
	 * Nicht das Marken-Magenta #e2017b: Das erreicht auf dem Anthrazit der
	 * Leiste nur 2.18:1 und bleibt damit unter den 3:1, die WCAG 1.4.11 für
	 * bedeutungstragende Grafiken verlangt. #fe35a2 ist der dunkelste Ton mit
	 * gleichem Farbton und gleicher Sättigung, der 3:1 hält (gemessen 3.01:1).
	 */
	--dp-topbar-accent: #fe35a2;

	/*
	 * Fläche des aktiven Umschalter-Knopfs. Grau statt weiß: Weiß zog auf der
	 * dunklen Leiste zu viel Aufmerksamkeit auf eine Nebensache. Das Icon
	 * darauf ist weiß und hält 4.63:1 — über der Textschwelle, obwohl hier nur
	 * die 3:1 für Grafiken gefordert wären.
	 */
	--dp-topbar-active: #6c6f6f;

	/*
	 * Textfarbe auf weißer Fläche innerhalb der Markenleiste — etwa die
	 * Schaltfläche „Probestunde anfragen" in der Navigation. Fest, damit die
	 * Schaltfläche in beiden Modi gleich aussieht: --dp-magenta-ink wird im
	 * Dunkel-Design zum hellen Magenta und erreicht auf Weiß nur 3.86:1.
	 * Dieser Ton hält 5.80:1.
	 */
	--dp-on-light: #c6016c;
	--dp-border: rgba(3, 38, 59, 0.15);

	/*
	 * Farbe der Silhouetten-Spalte, entnommen aus der Kachel left_bg.png.
	 * Rein dekorativ — auf dieser Fläche steht kein Text, deshalb gilt hier
	 * keine Kontrastanforderung.
	 */
	--dp-rail-bg: #2d2d2d;

	/*
	 * Palette für das Dunkel-Design.
	 *
	 * Eigene Namen statt direkter Überschreibung, damit tests/test-contrast.php
	 * beide Modi prüfen kann: Der Test liest die Werte aus dieser Datei, und
	 * eine Farbe, die nur in einem @media-Block existiert, wäre für ihn
	 * unsichtbar.
	 *
	 *   --dp-dark-bg        #191a1a  Seitengrund
	 *   --dp-dark-surface   #232525  Karten
	 *   --dp-dark-magenta   #fe30a0  Text und Links: 5.10:1 auf Grund, 4.51:1 auf Karten
	 *   --dp-dark-ink       #f2eef0  Fließtext: 15.17:1
	 *   --dp-dark-ink-soft  #c9c9c9  Sekundärtext: 10.53:1
	 *
	 * Das helle Magenta ist nötig, weil --dp-magenta-ink (#c6016c) auf dunklem
	 * Grund nur 2.5:1 erreicht. Farbton und Sättigung der Marke bleiben, die
	 * Helligkeit steigt.
	 */
	--dp-dark-bg: #191a1a;
	--dp-dark-surface: #232525;
	--dp-dark-magenta: #fe30a0;
	--dp-dark-ink: #f2eef0;
	--dp-dark-ink-soft: #c9c9c9;
	--dp-dark-rose-deep: #2f3131;
	--dp-dark-magenta-deep: #ff7bc0;

	--dp-font: "Asap", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

	--dp-step-0: 1.0625rem;
	--dp-step-1: 1.25rem;
	--dp-step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	--dp-step-3: clamp(1.9rem, 1.4rem + 2.4vw, 2.85rem);

	--dp-space-1: 0.5rem;
	--dp-space-2: 1rem;
	--dp-space-3: 1.5rem;
	--dp-space-4: 2.5rem;
	--dp-space-5: 4rem;

	/*
	 * Abstand zwischen der Überschrift und dem ersten Inhalt. Ein eigener Wert,
	 * weil er auf jeder Seite gleich sein soll — gemessen lag er vorher bei
	 * 34px auf /extras/ und 58px auf /kurse/, je nachdem was oben stand.
	 */
	--dp-title-gap: 1.5rem;

	/*
	 * Natürliche Maße der Logodatei für den Kopfbereich (divapole-queer.png,
	 * 375x151). Das Logo wird nie darüber hinaus vergrößert: Hochskaliert wäre
	 * es unscharf, auf dem Tablet stünde es sonst auf rund 1000px. Wird die
	 * Datei ersetzt, gehören die neuen Maße hierher — sonst nirgends.
	 *
	 * Geschrumpft sind es 75px Höhe; die zugehörige Breite steht als eigener
	 * Wert, weil der Übergang auf der Breite läuft.
	 */
	/*
	 * Blätterstrecke, über die das Logo von voller auf kleine Größe geht —
	 * ohne Einheit, weil assets/js/navigation.js damit rechnet.
	 *
	 * Sie muss länger sein als die Höhe, die der Kopf dabei abgibt (rund
	 * 80px), sonst jagt sich die Bewegung selbst: Der Kopf wird kleiner, der
	 * Inhalt rückt nach, und das löst die nächste Änderung aus.
	 */
	--dp-schrumpf-strecke: 150;

	--dp-logo-breite: 375px;
	--dp-logo-breite-klein: 186px;

	/*
	 * Deckkraft der Schicht über dem gezeichneten Stadtplan im
	 * Karten-Platzhalter. Im hellen Design genügt wenig, im dunklen
	 * braucht es mehr, sonst leuchtet die Karte aus dem Fußbereich heraus.
	 * Nach unten begrenzt durch die weiße Kontur der Schaltfläche, die
	 * auch beim hellsten Wert noch 3.85:1 gegen den Grund hält.
	 */
	--dp-map-veil: 0.45;

	/*
	 * Breite der Silhouetten-Spalte. 276px entspricht dem bisherigen Design
	 * und der natürlichen Breite des hochformatigen Logos (276x465) — es
	 * füllt die Spalte damit ohne Skalierung.
	 */
	/*
	 * Höchstbreite des Layouts. Auf sehr breiten Bildschirmen (21:9, 32:9)
	 * liefe die Seite sonst über die ganze Fläche: Die Navigation zöge sich
	 * über Meter, und der Weg vom Menü zum Inhalt wäre unnötig weit. Der
	 * Fließtext ist über .dp-entry ohnehin auf 1100px begrenzt — hier geht es
	 * um den Rahmen.
	 */
	--dp-max-width: 2260px;

	--dp-rail-width: 276px;

	/*
	 * Achse der Stange in der Spalte. Gemessen in den Grafiken: In der Kachel
	 * left_bg.png liegt die magentafarbene Spalte bei x 131–136, in
	 * leftBottom.png bei x 131–135 — Mitte also 133.5px. Schimmer und
	 * Lichtkegel richten sich danach; vorher saß der Schimmer bei 42% der
	 * Breite und lief neben der Stange, was aussah, als bräche sie.
	 */
	--dp-pole-x: 133.5px;
	--dp-radius: 10px;
	--dp-shadow: 0 2px 12px rgba(3, 38, 59, 0.12);

	--dp-header-height: 72px;
	--dp-sticky-height: 64px;
}

/* --------------------------------------------------------------------------
 * 2. Reset und Grundtypografie
 * -------------------------------------------------------------------------- */

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

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

/*
 * Der Körper trägt die Farbe AUSSERHALB des Rahmens, .dp-site die Farbe
 * darin. Unter 2260px sind beide Flächen deckungsgleich und der Unterschied
 * fällt nicht auf; darüber sitzt die Seite als mittiger Rahmen auf einer
 * abgesetzten Fläche.
 */
body {
	margin: 0;
	background-color: var(--dp-rose-deep);
	color: var(--dp-ink);
	font-family: var(--dp-font);
	font-size: var(--dp-step-0);
	line-height: 1.6;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--dp-space-2);
	color: var(--dp-magenta-ink);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

h1 {
	font-size: var(--dp-step-3);
}

h2 {
	font-size: var(--dp-step-2);
}

h3 {
	font-size: var(--dp-step-1);
}

p,
ul,
ol,
dl,
table,
figure {
	margin: 0 0 var(--dp-space-2);
}

a {
	color: var(--dp-magenta-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--dp-magenta-deep);
}

/*
 * Unterstreichung bleibt: Farbe allein darf ein Link nicht unterscheiden
 * (WCAG 1.4.1). Ausnahmen sind Elemente, die als Schaltfläche oder Icon
 * erkennbar sind — die tragen ihre Bedeutung über Form und Fläche.
 *
 * Die Schaltflächen nennen zusätzlich den Typ (a.dp-btn statt .dp-btn), weil
 * WordPress in seinen globalen Stilen `:root :where(a:where(:not(...)))` mit
 * text-decoration: underline ausgibt. Das hat dieselbe Spezifität wie eine
 * einzelne Klasse und wird später gedruckt.
 */
a.dp-btn,
a.dp-btn:hover,
a.dp-btn:focus,
.dp-btn,
.dp-brand__link,
.dp-menu a,
.dp-footer-menu a,
.dp-social__link,
.dp-theme-toggle__button {
	text-decoration: none;
}

/*
 * Das Listenelement der Social-Icons wird selbst zum Flex-Container. Als
 * Listenelement bildet es eine Zeilenbox, die durch die Unterlänge der Schrift
 * 2.4px höher ist als der Link darin — das Zeichen saß dadurch über der
 * Mittellinie von Strapline und Umschalter.
 */
.dp-social__item {
	display: flex;
	align-items: center;
}

/* Im Hauptmenü zeichnet die animierte Linie den Hover; eine zusätzliche
   Unterstreichung wäre eine zweite Linie darunter. */
.dp-footer-menu a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * 3. Barrierefreiheit
 * -------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	clip-path: none;
}

.dp-skip-link {
	position: absolute;
	top: -100px;
	left: var(--dp-space-2);
	z-index: 999;
	padding: var(--dp-space-1) var(--dp-space-2);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	color: var(--dp-magenta-deep);
	font-weight: 700;
}

.dp-skip-link:focus {
	top: var(--dp-space-2);
}

/*
 * Fokus nur bei Tastaturbedienung, aber dann zweifarbig.
 *
 * Ein einfarbiger Ring scheitert immer irgendwo: Dunkles Magenta auf
 * magentafarbener Fläche liegt bei 1.95:1, Anthrazit auf --dp-magenta-ink bei
 * 2.69:1 — beides unter der Nicht-Text-Schwelle von 3:1 (WCAG 1.4.11). Der
 * Ring besteht deshalb aus zwei Schichten: innen ein weißer Saum, außen die
 * dunkle Kontur. Damit hat der Indikator auf jedem Untergrund mindestens eine
 * kontrastierende Kante — weiß auf Magenta 4.64:1, Anthrazit auf Weiß 15.62:1.
 */
:focus-visible {
	outline: 3px solid var(--dp-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--dp-surface);
}

@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;
	}
}

/* --------------------------------------------------------------------------
 * 4. Layout-Grid und Silhouetten-Spalte
 *
 * Ein Grid mit zwei Spalten ersetzt den bisherigen Weg über
 * `body { padding-left: 276px !important }`. Das !important war nötig, weil
 * WordPress `#global-styles-inline-css` später im Dokument druckt und dort
 * `body { padding: 0 }` steht. Ohne body-Padding gibt es diesen Konflikt
 * nicht mehr, und `theme.json` liefert die global-styles konsistent zum Theme.
 * -------------------------------------------------------------------------- */

.dp-site {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--dp-max-width);
	margin-inline: auto;
	background-color: var(--dp-rose);
}

/*
 * Erst jenseits der Höchstbreite hebt sich der Rahmen ab. Darunter gäbe es
 * nichts abzuheben — die Seite füllt das Fenster.
 */
@media (min-width: 1921px) {

	.dp-site {
		box-shadow: 0 0 48px rgba(0, 0, 0, 0.3);
	}
}

.dp-shell {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100vh;
}

.dp-main {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--dp-space-3) var(--dp-space-2) var(--dp-space-5);
}

.dp-rail {
	display: none;
}

@media (min-width: 1024px) {

	.dp-site {
		grid-template-columns: minmax(0, var(--dp-rail-width)) minmax(0, 1fr);
	}

	/*
	 * Die Fläche ist einfarbig. Vorher lag hier die Kachel left_bg.png
	 * (291x6, #2d2d2d mit der Stange bei x 131–136), vertikal wiederholt. Die
	 * Kachel trug damit zwei Dinge auf einmal: Fläche und Stange. Die Stange
	 * zeichnet jetzt .dp-rail__pole, die Fläche diese Farbe — ein Bild weniger
	 * zu laden, und die Stange ist eine durchgehende Linie statt einer
	 * Kachelwiederholung, die an der Unterkante des Logos auf die gezeichnete
	 * Stange traf.
	 */
	.dp-rail {
		display: block;
		position: sticky;
		top: 0;
		align-self: start;
		height: 100vh;
		max-height: 100vh;
		overflow: hidden;
		background-color: var(--dp-rail-bg);
		/*
		 * Der zweite Schatten füllt die Fläche links des Rahmens mit derselben
		 * Farbe: Auf breiten Bildschirmen endet die Spalte sonst mitten im Bild
		 * und sieht wie ein abgeschnittener Block aus. 50vw reicht bis zum Rand,
		 * ohne ein weiteres Element im Markup.
		 */
		box-shadow: 4px 0 14px rgba(3, 38, 59, 0.25);
	}

	/*
	 * Die Stange: 6px breit auf der Achse --dp-pole-x, von oben bis unten.
	 * Maße und Farbe stammen aus den Vorlagen — in Kachel und Logo liegt sie
	 * bei x 131–136 mit dem Kern #e2017b.
	 *
	 * Der Verlauf über die Breite bildet die weichen Ränder der Vorlage nach;
	 * eine harte Kante hätte sich vom gezeichneten Teil im Logo abgesetzt.
	 *
	 * z-index 1: über den Lichtern, unter Verlauf und Logo.
	 */
	.dp-rail__pole {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(var(--dp-pole-x) - 3px);
		z-index: 1;
		width: 6px;
		background: linear-gradient(
			to right,
			rgba(226, 1, 123, 0.5) 0,
			rgba(226, 1, 123, 0.5) 1px,
			#e2017b 1px,
			#e2017b 5px,
			rgba(226, 1, 123, 0.5) 5px,
			rgba(226, 1, 123, 0.5) 6px
		);
		pointer-events: none;
	}

	/*
	 * Das Logo sitzt oben in der Spalte und füllt sie randlos — wie im
	 * bisherigen Design. Der Link umschließt nur das Bild, damit der
	 * Fokusrahmen nicht über die ganze Spalte läuft.
	 */
	.dp-rail__link {
		display: block;
		position: relative;
		z-index: 3;
		line-height: 0;
	}

	.dp-rail__logo {
		display: block;
		width: 100%;
		height: auto;
	}

	/*
	 * Am Desktop trägt die Spalte das Logo, der Kopfbereich bleibt frei. Ein
	 * zweites Logo rechts daneben wäre eine Dopplung derselben Marke.
	 */
	.dp-brand {
		display: none;
	}

	/*
	 * Die Silhouette (276x409) sitzt am unteren Rand. Über aspect-ratio
	 * behält sie ihr Seitenverhältnis, wenn die Spalte schmaler als das Bild
	 * ist — bei 200px Spaltenbreite wären 409px feste Höhe verzerrt.
	 */
	.dp-rail::after {
		content: "";
		z-index: 2;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		aspect-ratio: 276 / 409;
		background-image: url("assets/img/leftBottom.png");
		background-repeat: no-repeat;
		background-position: bottom center;
		background-size: contain;
	}

	/* ----------------------------------------------------------------------
	 * Bühnenlicht der Spalte
	 *
	 * Ein Lichtkegel von oben, drei driftende Glühpunkte und ein Schimmer, der
	 * an der Stange hochläuft. Alles CSS-Animationen — kein Skript, das
	 * dauerhaft rechnet.
	 *
	 * Animiert werden ausschließlich transform und opacity. Beide laufen im
	 * Compositor und lösen kein Neu-Layout aus; mit animierter Position oder
	 * Größe wäre die Spalte bei jedem Bild neu zu berechnen.
	 *
	 * mix-blend-mode: screen lässt die Lichter aufhellen statt überdecken —
	 * die Silhouette bleibt sichtbar.
	 * ---------------------------------------------------------------------- */

	.dp-stage--rail {
		position: absolute;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
	}

	/*
	 * Schwarzer Verlauf über dem oberen Teil der Spalte. Er reicht bis knapp
	 * unter den Namenszug: Das freigestellte Logo ist 465px hoch, die Schrift
	 * endet bei rund 115px, der Verlauf läuft bis 260px aus. Damit steht das
	 * Logo auf dunklem Grund, ohne dass eine Bildkante sichtbar wird.
	 *
	 * z-index 1: über den Lichtern, unter dem Logo.
	 */
	.dp-rail__veil {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 2;
		height: 340px;
		background: linear-gradient(
			to bottom,
			#000 0%,
			rgba(0, 0, 0, 0.94) 34%,
			rgba(0, 0, 0, 0.7) 58%,
			rgba(0, 0, 0, 0.3) 80%,
			rgba(0, 0, 0, 0) 100%
		);
		pointer-events: none;
	}

	.dp-stage--rail .dp-stage__beam,
	.dp-stage--rail .dp-stage__glow,
	.dp-stage--rail .dp-stage__shimmer {
		position: absolute;
		display: block;
		mix-blend-mode: screen;
		will-change: transform, opacity;
	}

	/* Lichtkegel von oben, leicht pendelnd wie ein Scheinwerfer. */
	/*
	 * Der Kegel setzt unterhalb des Logos an: Weiter oben läge er hinter der
	 * Grafik und wäre nicht zu sehen.
	 */
	/*
	 * Ein Schein, der hinter der Stange steht und nach oben und unten ausläuft.
	 *
	 * Vorher war es ein Lichtkegel von oben: eine Ellipse, die nach unten
	 * ausblendete und dort breit endete.
	 */
	.dp-stage--rail .dp-stage__beam {
		top: 6%;
		left: var(--dp-pole-x);
		width: 150%;
		height: 84%;
		/*
		 * Die Spindelform steckt im Verlauf, nicht in einem Schnitt: eine
		 * schmale, hohe Ellipse läuft nach oben und unten von selbst aus.
		 *
		 * Mit clip-path sah es zwar spitz aus, aber hart — der Schnitt greift
		 * nach dem Weichzeichner und schnitt dessen weiche Kante wieder ab.
		 */
		background: radial-gradient(
			ellipse 30% 52% at 50% 50%,
			rgba(255, 180, 225, 0.15) 0%,
			rgba(226, 1, 123, 0.1) 38%,
			rgba(226, 1, 123, 0) 76%
		);
		filter: blur(34px);
		transform: translateX(-50%);
		transform-origin: 50% 50%;
		animation: dp-beam 18s ease-in-out infinite;
	}


	/* Glühpunkte, die langsam nach oben ziehen und dabei atmen. */
	.dp-stage--rail .dp-stage__glow {
		filter: blur(38px);
	}

	.dp-stage--rail .dp-stage__glow--1 {
		bottom: 8%;
		left: 12%;
		width: 130px;
		height: 130px;
		background: rgba(226, 1, 123, 0.18);
		animation: dp-drift-a 26s ease-in-out infinite;
	}

	.dp-stage--rail .dp-stage__glow--2 {
		bottom: 34%;
		right: -14%;
		width: 160px;
		height: 160px;
		background: rgba(255, 120, 200, 0.13);
		animation: dp-drift-b 32s ease-in-out infinite;
	}

	.dp-stage--rail .dp-stage__glow--3 {
		bottom: 62%;
		left: -10%;
		width: 110px;
		height: 110px;
		background: rgba(130, 225, 255, 0.1);
		animation: dp-drift-a 38s ease-in-out infinite reverse;
	}



	/*
	 * Schimmer entlang der Stange. Die Stange sitzt in der Grafik bei rund 48%
	 * der Spaltenbreite, dort läuft ein schmaler Lichtstreifen hoch.
	 */
	/*
	 * Der Schimmer läuft an beiden Enden aus, statt als Band mit geraden Kanten
	 * an der Stange entlangzuwandern. Auch hier kommt die Form aus dem Verlauf:
	 * eine schmale Ellipse, die nach oben und unten verblasst.
	 */
	.dp-stage--rail .dp-stage__shimmer {
		top: 0;
		left: calc(var(--dp-pole-x) - 13px);
		width: 26px;
		height: 46%;
		background: radial-gradient(
			ellipse 42% 50% at 50% 50%,
			rgba(255, 255, 255, 0.24) 0%,
			rgba(255, 210, 235, 0.14) 40%,
			rgba(255, 255, 255, 0) 74%
		);
		filter: blur(6px);
		animation: dp-shimmer 7s linear infinite;
	}


	/*
	 * Ohne Bewegungswunsch bleibt das Licht stehen: Die Lichter sind dann
	 * ruhende Farbflächen, kein blinkender Hintergrund. @media
	 * prefers-reduced-motion setzt weiter oben schon alle Animationsdauern
	 * herunter; hier zusätzlich die Ausgangslage, damit nichts in einer
	 * halben Bewegung einfriert.
	 */
	@media (prefers-reduced-motion: reduce) {

		.dp-stage--rail .dp-stage__beam,
		.dp-stage--rail .dp-stage__glow,
		.dp-stage--rail .dp-stage__shimmer {
			animation: none;
			opacity: 0.55;
			transform: none;
		}

		.dp-stage--rail .dp-stage__beam {
			transform: translateX(-50%);
		}

		.dp-stage--rail .dp-stage__shimmer {
			display: none;
		}
	}

	.dp-main {
		padding: var(--dp-space-4) var(--dp-space-4) var(--dp-space-5);
	}

	.dp-no-rail .dp-site {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-no-rail .dp-rail {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Bühnenlicht — Grundlagen
 *
 * Gilt für beide Orte: die Silhouetten-Spalte ab 1024px und den Logo-Bereich
 * unter 768px. Die Positionen der einzelnen Lichter stehen bei den jeweiligen
 * Varianten, weil eine hochformatige Spalte und ein breiter Streifen andere
 * brauchen.
 *
 * mix-blend-mode: screen lässt die Lichter aufhellen statt überdecken — was
 * darunter liegt, bleibt sichtbar.
 * -------------------------------------------------------------------------- */

.dp-stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.dp-stage__beam,
.dp-stage__glow,
.dp-stage__shimmer {
	position: absolute;
	display: block;
	mix-blend-mode: screen;
	will-change: transform, opacity;
}

.dp-stage__glow {
	border-radius: 50%;
	filter: blur(26px);
}

/* Wer keine Bewegung will, bekommt die Lichter still. */
@media (prefers-reduced-motion: reduce) {

	.dp-stage__beam,
	.dp-stage__glow,
	.dp-stage__shimmer {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
 * Bewegung der Bühnenlichter
 *
 * Die Bilder stehen global, weil dieselben Animationen an zwei Orten laufen:
 * in der Silhouetten-Spalte ab 1024px und unter 768px hinter dem Logo im
 * Kopfbereich. Vorher standen sie in der Media Query der Spalte und waren
 * auf schmalen Geraeten gar nicht definiert.
 *
 * Animiert werden ausschliesslich transform und opacity: Beide laufen im
 * Compositor und loesen kein Neu-Layout aus.
 * -------------------------------------------------------------------------- */

@keyframes dp-beam {

	0%,
	100% {
		transform: translateX(-50%) rotate(-7deg);
		opacity: 0.75;
	}

	50% {
		transform: translateX(-50%) rotate(7deg);
		opacity: 1;
	}
}

@keyframes dp-drift-a {

	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.7;
	}

	50% {
		transform: translate3d(26px, -60px, 0) scale(1.3);
		opacity: 1;
	}
}

@keyframes dp-drift-b {

	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1.1);
		opacity: 0.55;
	}

	50% {
		transform: translate3d(-34px, -90px, 0) scale(0.85);
		opacity: 0.8;
	}
}

@keyframes dp-shimmer {

	0% {
		transform: translateY(-120%);
		opacity: 0;
	}

	12% {
		opacity: 1;
	}

	88% {
		opacity: 1;
	}

	100% {
		transform: translateY(320%);
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
 * 5. Kopfbereich und Navigation
 * -------------------------------------------------------------------------- */

/*
 * Graue Leiste über der Navigation, übernommen aus dem bisherigen Layout:
 * zwei Social-Icons und die Strapline. Weiß auf #404242 liegt bei 10.12:1.
 */
/*
 * Der Grund ist im Hell-Design das Anthrazit der alten Leiste und im
 * Dunkel-Design ein abgesetztes Grau — in beiden Fällen dunkel, deshalb
 * durchgehend weiße Schrift (10.12:1 bzw. 13.09:1).
 */
.dp-topbar,
.dp-headbar {
	background: var(--dp-ink-soft);
	color: var(--dp-on-brand);
}


/*
 * align-items: center richtet Icons, Strapline und Umschalter auf einer
 * gemeinsamen Mittellinie aus — unabhängig davon, wie hoch das jeweilige
 * Element ist.
 */
.dp-topbar__inner {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	padding: var(--dp-space-1) var(--dp-space-2);
}

.dp-topbar__strapline {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Die Icons stehen hier auf dunklem Grund und brauchen keine Fläche. */
/*
 * Wie im bisherigen Layout: gefüllte, magentafarbene Kacheln mit weißem
 * Zeichen, 40px groß. Vorher waren sie durchsichtig und dadurch nur zwei
 * weiße Umrisse auf grauem Grund.
 */
/*
 * Ohne Fläche und ohne feste Maße: Das Zeichen bestimmt die Größe des Links.
 * Bei 44px Schriftgröße ist die Trefferfläche damit von sich aus so groß, wie
 * eine Touch-Bedienung braucht.
 */
.dp-topbar .dp-social__link,
.dp-social--kopf .dp-social__link {
	border-radius: 4px;
	background: transparent;
	color: var(--dp-topbar-accent);
	line-height: 1;
}

.dp-topbar .dp-social__link:hover,
.dp-topbar .dp-social__link:focus,
.dp-social--kopf .dp-social__link:hover,
.dp-social--kopf .dp-social__link:focus {
	background: transparent;
	color: var(--dp-on-brand);
}

/*
 * Umschalter für das Erscheinungsbild. Drei Schaltflächen in einer Gruppe,
 * der aktive Zustand steckt in aria-pressed und wird darüber auch gestaltet —
 * kein zweiter Klassenzustand, der auseinanderlaufen kann.
 */
/*
 * Kein Innenmaß an der Gruppe: Es hätte die rechte Kante der letzten
 * Schaltfläche gegenüber dem Inhalt darunter verschoben.
 */
.dp-theme-toggle {
	display: flex;
	gap: 2px;
	margin-left: auto;
	border-radius: 6px;
}

/* Gleiche Höhe wie die Icons, damit die Leiste eine ruhige Linie behält. */
.dp-theme-toggle__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--dp-ink-soft);
	cursor: pointer;
}

/*
 * Ruhender Zustand: gedämpftes Grau, damit der aktive Knopf sich abhebt, ohne
 * dass die Leiste unruhig wirkt. #c9c9c9 auf dem Anthrazit sind 5.55:1.
 */
.dp-theme-toggle__button[aria-pressed="false"] {
	color: #c9c9c9;
}

.dp-theme-toggle__icon {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/*
 * Flächen ohne Transparenz: Ein halbdurchsichtiges Weiß über der Leiste
 * ergibt eine Mischfarbe, die sich nicht prüfen lässt — und das Icon darauf
 * wäre nur scheinbar kontrastreich.
 */
.dp-theme-toggle__button:hover {
	background: var(--dp-topbar-active);
	color: var(--dp-on-brand);
}

.dp-theme-toggle__button[aria-pressed="true"] {
	background: var(--dp-topbar-active);
	color: var(--dp-on-brand);
}

/*
 * Unter 560px ist neben Icons und Strapline kein Platz für drei Wörter.
 * Die Gruppe rutscht dann in eine eigene Zeile.
 */
@media (max-width: 559px) {

	.dp-topbar__inner {
		flex-wrap: wrap;
	}

	.dp-theme-toggle {
		margin-left: 0;
	}
}

.dp-topbar :focus-visible {
	outline-color: var(--dp-on-brand);
	box-shadow: 0 0 0 2px var(--dp-ink);
}

/* Unter 480px ist die Strapline zu lang für eine Zeile neben den Icons. */
@media (max-width: 479px) {

	.dp-topbar__strapline {
		font-size: 0.8125rem;
	}
}
/*
 * Der Kopfbereich bleibt beim Blättern am oberen Rand stehen. Bis 1024px hat
 * das noch einen zweiten Zweck: Nur ein stehender Kopf kann sein Logo beim
 * Blättern verkleinern — bei einem mitwandernden wäre es ohnehin aus dem Bild.
 */
.dp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--dp-surface);
	box-shadow: var(--dp-shadow);
}

/*
 * Kein Innenabstand am Kopfbereich selbst: Die magentafarbene Navigation soll
 * die volle Breite füllen, genau wie die graue Leiste darüber. Der Abstand
 * sitzt deshalb in den Kindelementen.
 */
.dp-header__inner {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	min-height: var(--dp-header-height);
	padding: var(--dp-space-1) var(--dp-space-2);
}

@media (min-width: 1024px) {

	/* Ab hier trägt die Silhouetten-Spalte das Logo samt Lichtern. */
	.dp-stage--brand {
		display: none;
	}

	.dp-header__inner {
		min-height: 0;
		padding: 0;
	}

	/*
	 * Die graue Leiste liegt auf denselben Achsen wie der Inhalt: Die Icons
	 * beginnen dort, wo die Überschrift beginnt, der Umschalter endet dort, wo
	 * der Inhalt endet. Derselbe Wert wie das Innenmaß von .dp-main. Die
	 * Navigation trägt ihren Wert in der eigenen Regel weiter unten — dort
	 * gesetzt, weil sie später im Stylesheet steht und eine getrennte Regel
	 * hier wieder überschrieben würde.
	 */
	.dp-topbar__inner {
		padding-right: var(--dp-space-4);
		padding-left: var(--dp-space-4);
	}
}

.dp-brand {
	margin-right: auto;
	min-width: 0;
}

.dp-brand__name {
	margin: 0;
	color: var(--dp-magenta-ink);
	font-size: var(--dp-step-1);
	font-weight: 700;
	text-transform: uppercase;
}

/*
 * Mobil maximal 80px hoch (Briefing Punkt 6). Vorher stand im Markup
 * `min-width: 375px` als Inline-Style, wodurch das Logo auf kleinen Geräten
 * breiter als der Viewport war.
 */
.dp-brand__logo {
	display: block;
	width: auto;
	max-height: 56px;
}

@media (min-width: 480px) {

	.dp-brand__logo {
		max-height: 80px;
	}
}

/* --------------------------------------------------------------------------
 * Kopfzeile auf schmalen Geräten
 *
 * Unter 768px trägt die Kopfzeile alles, was oben gebraucht wird, und nichts
 * darüber hinaus: das Logo in der Größe des bisherigen Layouts, daneben die
 * zwei Social-Icons und den Menü-Umschalter.
 *
 * Was wegfällt und warum:
 *
 * - Die graue Leiste. Ihre Strapline ist auf einem Telefon eine ganze Zeile
 *   für einen Satz, der auch im Inhalt steht; ihre Icons und ihr Umschalter
 *   stehen jetzt weiter unten in der Kopfzeile und im Menü.
 * - Die beiden Schaltflächen im Menü. Dieselben zwei stehen unten in der
 *   angehefteten Leiste, immer erreichbar, ohne das Menü zu öffnen.
 *
 * Ab 768px (Tablet) bleibt alles wie bisher — nur die Schaltflächen im Menü
 * entfallen auch dort, siehe unten.
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * Logo-Bühne auf Telefon und Tablet
 *
 * Bis 1024px trägt der Kopfbereich das Logo auf einer dunklen Bühne mit
 * Lichtern — auf dem Tablet genauso wie auf dem Telefon. Ab 1024px steht die
 * Silhouetten-Spalte, dann liegt das Logo dort und dieser Bereich entfällt.
 *
 * Der Kopf bleibt am oberen Rand stehen und das Logo schrumpft beim
 * Blättern; die Anordnung der Icons und der grauen Leiste unterscheidet sich
 * dagegen zwischen den beiden Größen und steht weiter unten.
 * -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.dp-header__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
	}
	/*
	 * Das Logo steht mittig und nimmt reichlich Platz — wie im bisherigen
	 * Layout. Beim Blättern schrumpft es auf 120px: Der Kopf gibt dann
	 * rund 60 Pixel Höhe an den Inhalt zurück. Die Klasse setzt
	 * assets/js/navigation.js.
	 *
	 * Bei prefers-reduced-motion springt die Größe statt zu gleiten.
	 */
	/*
	 * Der Logo-Bereich ist eine dunkle Bühne — dieselbe Fläche wie die
	 * Silhouetten-Spalte am Desktop, und zwar in beiden Designs: Auf hellem
	 * Grund wären Scheinwerfer nicht zu sehen, und das freigestellte Logo
	 * ist für dunklen Grund gezeichnet. --dp-rail-bg schaltet deshalb nicht
	 * mit dem Modus.
	 *
	 * Das Logo sitzt unten auf der Kante auf, wie die Silhouette in der
	 * Spalte: align-items: flex-end und kein Innenmaß nach unten.
	 */
	.dp-brand {
		display: flex;
		position: relative;
		align-items: flex-end;
		justify-content: center;
		overflow: hidden;
		margin: 0;
		padding: calc(var(--dp-space-2) - var(--dp-schrumpf, 0) * (var(--dp-space-2) - var(--dp-space-1))) 0 0;
		background: var(--dp-rail-bg);
	}
	/*
	 * Dunkler Schleier über den Lichtern, unter dem Logo — dasselbe Mittel wie
	 * in der Spalte. Ohne ihn überstrahlt der Kegel den Namenszug: Das Logo
	 * ist magenta, und darunter liegt genau der magentafarbene Lichtfleck.
	 */
	.dp-brand::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.45) 0%,
			rgba(0, 0, 0, 0.3) 60%,
			rgba(0, 0, 0, 0.12) 100%
		);
		pointer-events: none;
	}
	/*
	 * Das Logo liegt über den Lichtern.
	 *
	 * Der Link ist selbst ein zentrierender Container über die ganze Breite.
	 * Vorher war er ein Block: Beim Schrumpfen blieb er breit, das Bild klebte
	 * an seiner linken Kante und sprang erst in die Mitte, als das Layout die
	 * neue Breite übernahm.
	 */
	.dp-brand__link {
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: center;
		flex-shrink: 0;
		width: 100%;
		line-height: 0;
	}
	/*
	 * Maße für den breiten Streifen: Der Kegel kommt von oben mittig, die
	 * Glühpunkte sitzen an den Rändern, der Schimmer läuft mittig durch.
	 * Die Werte der Spalte passen hier nicht — sie rechnen mit 276px Breite
	 * und der Stangenachse.
	 */
	/*
	 * Die Lichter im Kopfbereich sind deutlich zurückgenommen.
	 *
	 * Die Werte der Spalte waren hier zu derb: Auf 372x150 statt 276x900 liegt
	 * jedes Licht sofort mitten im Bild, und der Kegel überstrahlte die Fläche.
	 * Jetzt zwei weiche, langsam wandernde Farbfelder und ein flacher Kegel —
	 * mehr Stimmung als Bühne.
	 *
	 * Der Schimmer entfällt: In der Spalte läuft er entlang der Stange, hier
	 * hätte er nichts, dem er folgen könnte, und zog als weißer Streifen mitten
	 * durch das Logo.
	 */
	.dp-stage--brand .dp-stage__beam {
		top: -55%;
		left: 50%;
		width: 130%;
		height: 190%;
		background: radial-gradient(
			ellipse at 50% 0%,
			rgba(255, 180, 225, 0.13) 0%,
			rgba(226, 1, 123, 0.1) 45%,
			rgba(226, 1, 123, 0) 78%
		);
		filter: blur(42px);
		transform: translateX(-50%);
		transform-origin: 50% 0%;
		animation: dp-beam 22s ease-in-out infinite;
	}
	.dp-stage--brand .dp-stage__glow {
		filter: blur(38px);
	}
	.dp-stage--brand .dp-stage__glow--1 {
		bottom: -60%;
		left: -6%;
		width: 190px;
		height: 190px;
		background: rgba(226, 1, 123, 0.18);
		animation: dp-drift-a 34s ease-in-out infinite;
	}
	.dp-stage--brand .dp-stage__glow--2 {
		top: -70%;
		right: -10%;
		width: 210px;
		height: 210px;
		background: rgba(255, 120, 200, 0.13);
		animation: dp-drift-b 42s ease-in-out infinite;
	}
	/* Zwei Felder genügen; das dritte machte die Fläche unruhig. */
	.dp-stage--brand .dp-stage__glow--3,
	.dp-stage--brand .dp-stage__shimmer {
		display: none;
	}
	/*
	 * Die Größe folgt dem Blättern, statt an einer Schwelle umzuspringen.
	 *
	 * --dp-schrumpf läuft von 0 (oben, volle Größe) bis 1 (geblättert, klein)
	 * und wird von assets/js/navigation.js bei jedem Bild fortgeschrieben.
	 * Zwischen beiden Größen wird linear gerechnet, deshalb gibt es keinen
	 * Sprung und keinen Übergang, der der Bewegung hinterherläuft.
	 *
	 * Vorher schaltete eine Klasse bei 40px zwischen zwei Größen um. Auf einem
	 * iPhone sah man genau das: Das Logo sprang, statt kleiner zu werden — und
	 * mit ihm der Kopf, weil dessen Höhe an der Logogröße hängt.
	 *
	 * Höchstens die natürliche Breite der Datei, nie darüber (siehe
	 * --dp-logo-breite).
	 */
	.dp-brand__logo {
		--dp-logo-spanne: calc(var(--dp-logo-breite) - var(--dp-logo-breite-klein));

		width: min(100%, calc(var(--dp-logo-breite) - var(--dp-schrumpf, 0) * var(--dp-logo-spanne)));
		max-width: 100%;
		max-height: none;
		height: auto;
		aspect-ratio: 375 / 151;
	}


}

@media (max-width: 767px) {
	.dp-topbar {
		display: none;
	}
	/*
	 * Der Streifen mit Icons und Menü-Umschalter trägt denselben grauen
	 * Grund wie die Leiste am Desktop. Weiß darauf liegt bei 10.12:1.
	 */
	.dp-headbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dp-space-2);
		padding: var(--dp-space-1) var(--dp-space-2);
	}
	.dp-social.dp-social--kopf {
		display: flex;
		gap: var(--dp-space-1);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	/* Im Menü steht der Umschalter rechts, auf Höhe der Menüpunkte. */
	.dp-theme-toggle.dp-theme-toggle--menue {
		display: flex;
		justify-content: flex-end;
		margin: var(--dp-space-2) 0 0;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {

	.dp-brand__logo {
		transition: none;
	}
}

/*
 * Ab 768px gibt es die graue Leiste wieder, und mit ihr die einzige Instanz
 * von Icons und Umschalter. Die Zweitfassungen in Kopfzeile und Menü sind
 * dann weg — display: none nimmt sie auch aus dem Baum, den Screenreader
 * vorlesen.
 */
@media (min-width: 768px) {

	/* Auf dem Tablet ist der Kopf höher; die Verkleinerung darf länger dauern. */
	:root {
		--dp-schrumpf-strecke: 200;
	}

	.dp-social.dp-social--kopf,
	.dp-theme-toggle.dp-theme-toggle--menue {
		display: none;
	}

	/*
	 * Der Streifen löst sich auf: display: contents nimmt den Container aus
	 * dem Layout, seine Kinder rücken an dessen Stelle in die Kopfzeile. Der
	 * Menü-Umschalter steht damit wieder frei, wie vor der Einführung des
	 * Streifens — sonst hätte er auf dem Tablet einen grauen Kasten hinter
	 * sich, den es dort nie gab (gemessen 108x50px).
	 *
	 * Ein Hintergrund wirkt bei display: contents nicht, die Farbe aus der
	 * gemeinsamen Regel mit .dp-topbar bleibt also folgenlos.
	 */
	.dp-headbar {
		display: contents;
	}




}

/*
 * Die beiden Schaltflächen in der Navigation entfallen unter 1424px.
 *
 * Bis 1024px steckt die Navigation im eingeklappten Menü; darüber steht sie
 * waagerecht, aber die Zeile reicht bis etwa 1424px nicht für Menü und beide
 * Schaltflächen — sie brachen in eine zweite Zeile um. In beiden Fällen
 * stehen dieselben zwei Schaltflächen unten in der angehefteten Leiste:
 * sichtbar, ohne dass jemand erst das Menü öffnet oder blättert.
 */
@media (max-width: 1423px) {

	.dp-cta.dp-cta--nav {
		display: none;
	}
}

.dp-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--dp-space-1);
	padding: 0.6rem 0.9rem;
	border: 2px solid var(--dp-magenta-ink);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	color: var(--dp-magenta-ink);
	font: inherit;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

.dp-nav-toggle__bars,
.dp-nav-toggle__bars::before,
.dp-nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.dp-nav-toggle__bars {
	position: relative;
}

.dp-nav-toggle__bars::before,
.dp-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.dp-nav-toggle__bars::before {
	top: -6px;
}

.dp-nav-toggle__bars::after {
	top: 6px;
}

/*
 * Ein einziger Navigations-Container für alle Breiten. Der Bestand hatte zwei
 * (#dp-leftNavi und #dp-topNavi), beide am gleichen Hook, was dieselben IDs
 * zweimal ins Dokument schrieb.
 */
/*
 * Das aufgeklappte Menü trägt dieselben Farben wie die Navigationsleiste am
 * Desktop: magenta mit weißer Schrift.
 */
.dp-nav {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	padding: var(--dp-space-2);
	background: var(--dp-magenta);
	box-shadow: var(--dp-shadow);
}

.dp-nav.is-open {
	display: block;
}

.dp-menu {
	margin: 0 0 var(--dp-space-2);
	padding: 0;
	list-style: none;
}

.dp-menu li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.dp-nav .dp-menu a {
	display: block;
	padding: 0.7rem 0.25rem;
	color: var(--dp-on-brand);
	font-weight: 600;
	text-transform: uppercase;
}

.dp-nav .dp-menu a[aria-current] {
	color: var(--dp-on-brand);
	text-decoration: underline;
}

/* Im aufgeklappten Menü liegen die Buttons ebenfalls auf Magenta. */
/*
 * Weiße Fläche, magentafarbene Schrift — feste Werte, damit die Schaltfläche
 * im eingeklappten Menü genauso aussieht wie in der Leiste auf dem Desktop.
 * Über --dp-surface und --dp-magenta-ink stand sie im Dunkel-Design dunkel
 * auf dunkel.
 */
.dp-nav .dp-btn.dp-btn--primary {
	background: var(--dp-on-brand);
	color: var(--dp-on-light);
}

.dp-nav .dp-btn.dp-btn--secondary {
	border-color: var(--dp-on-brand);
	background: transparent;
	color: var(--dp-on-brand);
}

.dp-menu .sub-menu {
	margin: 0;
	padding: 0 0 0 var(--dp-space-2);
	list-style: none;
}

@media (min-width: 1024px) {

	.dp-header__inner {
		flex-wrap: wrap;
	}

	.dp-nav-toggle {
		display: none;
	}

	/*
	 * Menü und Call-to-Action teilen sich eine Zeile. Reicht der Platz nicht,
	 * rutscht der Call-to-Action als Ganzes in die nächste Zeile — vorher
	 * brach das Menü in sich um und ein einzelner Punkt stand allein unter
	 * den übrigen.
	 */
	.dp-nav {
		display: flex;
		position: static;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--dp-space-1) var(--dp-space-2);
		flex: 1 1 100%;
		/*
		 * Seitliches Innenmaß wie bei .dp-main: Der erste Menüpunkt beginnt
		 * damit auf derselben Achse wie die Überschrift, die Schaltflächen
		 * rechts enden auf derselben Achse wie der Inhalt.
		 */
		padding: var(--dp-space-1) var(--dp-space-4);
		background: var(--dp-magenta);
		box-shadow: none;
	}

	.dp-menu {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dp-space-1) var(--dp-space-2);
		margin: 0;
		font-size: 0.9375rem;
	}

	.dp-cta--nav {
		margin-left: auto;
	}

	.dp-menu li {
		position: relative;
		border-bottom: 0;
	}

	/*
	 * Die Farbregeln tragen bewusst zwei Klassen (.dp-nav .dp-menu a).
	 * Elementor erzeugt aus seinen Site-Settings `.elementor-kit-26 a` —
	 * dieselbe Spezifität wie `.dp-menu a`, aber später geladen. Mit nur
	 * einer Klasse waren alle Menüpunkte außer dem aktiven dunkel auf dem
	 * magentafarbenen Grund; der aktive gewann allein deshalb, weil er über
	 * das Attribut aria-current eine Stufe höher lag.
	 *
	 * Weiß auf #e2017b liegt bei 4.64:1 und erfüllt AA auch für normalen
	 * Text. Der aktive Punkt wird zusätzlich unterstrichen — Farbe allein
	 * genügt als Unterscheidung nicht.
	 */
	.dp-nav .dp-menu a {
		position: relative;
		padding: 0.35rem 0;
		border-bottom: 0;
		color: var(--dp-on-brand);
	}

	.dp-nav .dp-menu a::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 2px;
		background: var(--dp-on-brand);
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 220ms ease;
	}

	.dp-nav .dp-menu a:hover::after,
	.dp-nav .dp-menu a:focus-visible::after,
	.dp-nav .dp-menu a[aria-current]::after {
		transform: scaleX(1);
	}

	.dp-nav .dp-menu a:hover,
	.dp-nav .dp-menu a:focus,
	.dp-nav .dp-menu a[aria-current] {
		color: var(--dp-on-brand);
		text-decoration: none;
	}

	/* Untermenü als eigene Fläche, damit der Text lesbar bleibt. */
	.dp-nav .dp-menu .sub-menu a {
		color: var(--dp-ink);
	}

	.dp-nav .dp-menu .sub-menu a:hover,
	.dp-nav .dp-menu .sub-menu a:focus {
		color: var(--dp-magenta-deep);
		border-bottom-color: var(--dp-magenta);
	}

	/*
	 * Auf der magentafarbenen Leiste kann der primäre Button nicht magenta
	 * sein. Er tauscht die Rollen: weiße Fläche, magentafarbene Schrift
	 * (5.80:1). Der sekundäre wird zur weißen Kontur.
	 */
	/*
	 * Weiße Fläche, magentafarbene Schrift — in beiden Modi dieselbe, weil
	 * beide Werte fest sind. Über --dp-surface und --dp-magenta-ink sah die
	 * Schaltfläche im Dunkel-Design anders aus als im hellen.
	 */
	.dp-nav .dp-btn.dp-btn--primary {
		background: var(--dp-on-brand);
		color: var(--dp-on-light);
	}

	/* Der Hover ist derselbe wie bei allen Schaltflächen — siehe Abschnitt 6. */

	.dp-nav .dp-btn.dp-btn--secondary {
		border-color: var(--dp-on-brand);
		background: transparent;
		color: var(--dp-on-brand);
	}

	.dp-nav :focus-visible {
		outline-color: var(--dp-on-brand);
		box-shadow: 0 0 0 2px var(--dp-ink);
	}

	/*
	 * Untermenüs öffnen auf Hover und auf Fokus. focus-within ist nötig, damit
	 * das Untermenü offen bleibt, während ein Kindelement den Fokus hat —
	 * ohne das ist es per Tastatur nicht erreichbar.
	 */
	.dp-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		display: none;
		min-width: 220px;
		padding: var(--dp-space-1);
		background: var(--dp-surface);
		box-shadow: var(--dp-shadow);
	}

	.dp-menu li:hover > .sub-menu,
	.dp-menu li:focus-within > .sub-menu {
		display: block;
	}
}

/* --------------------------------------------------------------------------
 * 6. Buttons und Call-to-Action
 * -------------------------------------------------------------------------- */

.dp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.25rem;
	border: 2px solid transparent;
	border-radius: var(--dp-radius);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

/*
 * Die Buttons sind Links (<a>) und wären damit jeder Regel ausgeliefert, die
 * eine Linkfarbe setzt. Elementor erzeugt aus seinen Site-Settings genau so
 * eine: `.elementor-kit-26 a { color: … }` — eine Klasse plus ein Typ, also
 * höhere Spezifität als eine einzelne Theme-Klasse, und später geladen.
 * Ergebnis war rosa Text auf magentafarbenem Grund, gemessen 1.2:1.
 *
 * Die doppelte Klasse (.dp-btn.dp-btn--primary) hebt die Spezifität über
 * jede solche Regel, ohne !important. Der Wert im Kit selbst wird zusätzlich
 * korrigiert — siehe tools/p2-content/apply.php, Schritt elementor-kit —,
 * aber ein Button darf sich gar nicht darauf verlassen: Er ist eine Fläche
 * mit eigener Textfarbe, kein Fließtext-Link.
 *
 * Weiß auf #e2017b liegt bei 4.64:1 und erfüllt AA auch für normalen Text.
 */
.dp-btn.dp-btn--primary {
	background: var(--dp-magenta);
	color: var(--dp-on-brand);
}

/*
 * Ein Verhalten für alle Schaltflächen: grauer Grund, weiße Schrift
 * (4.63:1). Vorher hatte jede Sorte ihr eigenes — die primäre wechselte auf
 * dunkles Magenta mit rosa Schrift, die sekundäre auf Magenta mit rosa,
 * die in der Navigation auf Grau, und der Platzhalter der Karte hatte gar
 * keins und übernahm die rosa Linkfarbe aus dem Elementor-Kit: Text auf
 * gleichfarbiger Fläche, nicht mehr lesbar.
 *
 * Der Grauton ist fest und schaltet nicht mit dem Design, sonst hätte
 * dieselbe Schaltfläche je Modus ein anderes Verhalten.
 *
 * Die Liste nennt den Platzhalter der Karte mit: Cookiebot liefert dort
 * einen Link, keinen Knopf mit Theme-Klasse. Die doppelte Klasse hebt die
 * Spezifität über `.elementor-kit-26 a:hover`.
 */
.dp-btn.dp-btn--primary:hover,
.dp-btn.dp-btn--primary:focus,
.dp-btn.dp-btn--secondary:hover,
.dp-btn.dp-btn--secondary:focus,
.cookieconsent-optout-marketing.cookieconsent-optout-marketing a:hover,
.cookieconsent-optout-marketing.cookieconsent-optout-marketing a:focus,
.cookieconsent-optout-statistics.cookieconsent-optout-statistics a:hover,
.cookieconsent-optout-statistics.cookieconsent-optout-statistics a:focus,
.cookieconsent-optout-preferences.cookieconsent-optout-preferences a:hover,
.cookieconsent-optout-preferences.cookieconsent-optout-preferences a:focus {
	border-color: var(--dp-topbar-active);
	background: var(--dp-topbar-active);
	color: var(--dp-on-brand);
}

.dp-btn.dp-btn--secondary {
	border-color: var(--dp-magenta-ink);
	background: var(--dp-surface);
	color: var(--dp-magenta-ink);
}


.dp-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dp-space-1);
}

.dp-cta--nav {
	flex: 0 0 auto;
}

/*
 * Das Paar im Inhalt ist überall doppelt und deshalb überall aus.
 *
 * Ab 1024px stehen dieselben zwei Schaltflächen in der Navigationsleiste,
 * darunter in der angehefteten Leiste am unteren Rand — auf Telefon und
 * Tablet. Im Inhalt kam es damit ein zweites Mal, wenige Zeilen über der
 * Leiste, die dasselbe anbietet.
 *
 * Die doppelte Klasse setzt sich gegen die allgemeine Regel für .dp-cta
 * durch, die weiter oben display: flex vergibt.
 */
.dp-cta.dp-cta--page {
	display: none;
}

@media (min-width: 1024px) {


	/*
	 * Auf der Startseite steht das Paar in einer eigenen Elementor-Sektion.
	 * Ausgeblendet war bisher nur der Inhalt; die Hülle blieb als 10 Pixel
	 * hoher Streifen unter der Überschrift stehen — gemessen 44px Abstand
	 * nach der h1 statt 24px wie auf allen anderen Seiten. Deshalb
	 * verschwindet die Sektion mit.
	 *
	 * :has() kennen alle aktuellen Browser. Fehlt es, bleibt es beim
	 * bisherigen Verhalten: ein schmaler leerer Streifen, kein Bruch.
	 */
	.dp-main .elementor-section:has( > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget:only-child .dp-cta--page ) {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * 7. Inhaltsbausteine
 * -------------------------------------------------------------------------- */



.dp-entry {
	max-width: 1100px;
}

.dp-entry__title a {
	color: inherit;
	text-decoration: none;
}

.dp-entry-meta {
	color: var(--dp-ink-soft);
	font-size: 0.9375rem;
}

.dp-entry__thumb {
	margin: 0 0 var(--dp-space-3);
}

.dp-prices {
	margin: var(--dp-space-4) 0;
	padding: var(--dp-space-3);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	box-shadow: var(--dp-shadow);
}

.dp-prices__list {
	margin: 0;
}

.dp-prices__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dp-space-2);
	padding: var(--dp-space-1) 0;
	border-bottom: 1px solid var(--dp-border);
}

.dp-prices__row:last-child {
	border-bottom: 0;
}

.dp-prices__label {
	font-weight: 700;
}

.dp-prices__note {
	display: block;
	color: var(--dp-ink-soft);
	font-size: 0.9375rem;
	font-weight: 400;
}

.dp-prices__amount {
	margin: 0;
	color: var(--dp-magenta-ink);
	font-size: var(--dp-step-1);
	font-weight: 700;
	white-space: nowrap;
}

/*
 * Breite Tabellen scrollen in ihrem eigenen Container, damit die Seite
 * horizontal nicht wandert.
 */
.dp-schedule-wrap {
	overflow-x: auto;
	margin: var(--dp-space-3) 0;
}

.dp-schedule {
	width: 100%;
	border-collapse: collapse;
	background: var(--dp-surface);
}

.dp-schedule caption {
	text-align: left;
}

.dp-schedule th,
.dp-schedule td {
	padding: var(--dp-space-1) var(--dp-space-2);
	border-bottom: 1px solid var(--dp-border);
	text-align: left;
	vertical-align: top;
}

.dp-schedule thead th {
	background: var(--dp-rose-deep);
	color: var(--dp-ink);
	text-transform: uppercase;
}

.dp-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dp-space-1);
	margin: var(--dp-space-3) 0;
}

.dp-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
	min-height: 48px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--dp-ink-soft);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	color: var(--dp-ink);
	font: inherit;
	max-width: 100%;
}

textarea {
	min-height: 8rem;
}

label {
	display: inline-block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * 7b. Inhaltsblöcke der Shortcodes
 *
 * Karten, Zitate, Karte, Über-mich und Formular. Alles auf weißer Fläche,
 * weil der rosa Seitenhintergrund bei großen Textmengen unruhig wirkt und
 * Weiß den Kontrast der Textfarben nochmals erhöht.
 * -------------------------------------------------------------------------- */

.dp-cards {
	display: grid;
	gap: var(--dp-space-2);
	margin: var(--dp-space-3) 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {

	.dp-cards {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	}
}

.dp-card {
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-1);
	padding: var(--dp-space-3);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	box-shadow: var(--dp-shadow);
}

.dp-card__title {
	margin: 0;
	font-size: var(--dp-step-1);
}

.dp-card__teacher {
	display: block;
	color: var(--dp-ink-soft);
	font-size: 0.9375rem;
	font-weight: 400;
	text-transform: none;
}

.dp-card__text {
	margin: 0;
}

.dp-card__facts {
	margin: 0;
}

.dp-card__fact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem var(--dp-space-1);
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--dp-border);
}

.dp-card__fact:last-child {
	border-bottom: 0;
}

.dp-card__fact dt {
	min-width: 7.5rem;
	color: var(--dp-ink-soft);
}

.dp-card__fact dd {
	margin: 0;
	font-weight: 600;
}

/* Der Button sitzt unten, damit Karten unterschiedlicher Länge gleich enden. */
/* Der Button sitzt unten rechts, damit Karten gleich enden und der
   Handlungsaufruf am erwarteten Platz steht. */
.dp-card__cta {
	margin-top: auto;
	align-self: flex-end;
}

.dp-private {
	margin: var(--dp-space-4) 0;
}

.dp-private__intro {
	max-width: 60ch;
	font-size: var(--dp-step-1);
}

.dp-private__subtitle {
	font-size: var(--dp-step-1);
}

.dp-steps {
	max-width: 60ch;
	margin: 0 0 var(--dp-space-2);
	padding-left: 1.25rem;
}

.dp-steps li {
	margin-bottom: 0.35rem;
}

.dp-private__price {
	font-size: var(--dp-step-1);
	font-weight: 700;
}

.dp-contact-block {
	max-width: 32rem;
	margin: var(--dp-space-3) 0;
	padding: var(--dp-space-3);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	box-shadow: var(--dp-shadow);
}

.dp-contact-block__address {
	display: grid;
	margin-bottom: var(--dp-space-2);
	font-style: normal;
}

.dp-contact-block__name {
	font-weight: 700;
}

.dp-contact-block__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-contact-block__list li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem var(--dp-space-1);
	padding: 0.2rem 0;
}

.dp-contact-block__key {
	min-width: 5.5rem;
	color: var(--dp-ink-soft);
}

.dp-map {
	margin: 0;
	padding: 0;
}

.dp-map__title {
	font-size: var(--dp-step-1);
}

/*
 * Die Einbettung behält ihr Seitenverhältnis und füllt die Breite. Ohne die
 * Vorgabe würde das iframe auf seinen Attributwerten (600x300) stehen bleiben
 * und auf schmalen Geräten überlaufen.
 */
/*
 * Der Rahmen ist erst da, wenn die Karte wirklich geladen ist.
 *
 * Cookiebot blendet .cookieconsent-optin-marketing bis zur Zustimmung aus.
 * Fehlt das Plugin oder lädt sein Skript nicht, greift diese Klasse nicht und
 * der Rahmen reservierte seine Höhe trotzdem — im Fußbereich waren das rund
 * 220 Pixel leere Fläche. Deshalb zusätzlich hier ausgeblendet;
 * assets/js/navigation.js setzt .dp-map--geladen, sobald das iframe eine
 * Quelle hat.
 *
 * Höhe begrenzt statt reines Seitenverhältnis: Die Karte soll im Fußbereich
 * nicht die halbe Bildschirmhöhe einnehmen.
 */
.dp-map__frame {
	display: none;
	position: relative;
	aspect-ratio: 2 / 1;
	max-height: 220px;
	overflow: hidden;
	border-radius: var(--dp-radius);
}

.dp-map--geladen .dp-map__frame {
	display: block;
}

.dp-map__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * Der Hinweis vor der Zustimmung. Cookiebot blendet .cookieconsent-optout-*
 * ein, solange die Zustimmung fehlt, und aus, sobald sie vorliegt — die
 * Sichtbarkeit steuert also das Plugin, nicht das Theme.
 */
/*
 * Sobald die Karte geladen ist, verschwindet der Hinweis und der Rahmen nimmt
 * seinen Platz ein.
 *
 * Zwei Regeln, weil zwei Wege dorthin führen: Mit Cookiebot blendet das Plugin
 * .cookieconsent-optout-marketing selbst aus. Ohne Plugin setzt
 * assets/js/navigation.js das hidden-Attribut — und das braucht die zweite
 * Regel, denn `display: flex` aus einer Klasse schlägt das display: none, das
 * der Browser für [hidden] mitbringt. Ohne sie blieb der Hinweis stehen und
 * die Karte erschien darunter.
 */
.dp-map.dp-map--geladen .dp-map__consent,
.dp-map .dp-map__consent[hidden] {
	display: none;
}

/*
 * Untereinander: Hinweis, ein Abstand von 1rem, dann die Schaltfläche.
 * Nebeneinander wurde der Text auf schmalen Spalten in vier Wörter pro Zeile
 * gequetscht.
 */
/*
 * Zwei Klassen: Weiter unten setzt die allgemeine Regel für
 * Cookiebot-Platzhalter `display: block`. Sie hat dieselbe Spezifität und
 * steht später — der Kasten war dadurch kein Flex-Container mehr, und der
 * Abstand von 1rem zwischen Hinweis und Schaltfläche wirkte nicht.
 */
/*
 * Der Kasten hat genau die Maße, die der Rahmen nach der Zustimmung
 * einnimmt: gleiches Seitenverhältnis, gleiche Höchsthöhe. Vorher war er
 * nur so hoch wie sein Text, und beim Laden der Karte sprang das Layout.
 *
 * Dahinter liegt ein gezeichneter Stadtplan aus dem Theme, abgedunkelt
 * über eine Farbschicht im background-image — eine Datei für beide
 * Designs. Vor der Zustimmung wird von Google nichts geladen, der Kasten
 * stand also auf leerer Fläche.
 */
.dp-map .dp-map__consent {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--dp-space-2);
	aspect-ratio: 2 / 1;
	max-height: 220px;
	padding: var(--dp-space-2);
	border: 2px dashed var(--dp-magenta-ink);
	border-radius: var(--dp-radius);
	background-image:
		linear-gradient(rgba(6, 8, 8, var(--dp-map-veil)), rgba(6, 8, 8, var(--dp-map-veil))),
		url("assets/img/karte-platzhalter.svg");
	background-position: center;
	background-size: cover;
	text-align: center;
}

/*
 * Versalien nur für Beschriftungen, nicht für Sätze.
 *
 * Die Schaltflächen im Theme tragen ein Wort oder zwei — als Großbuchstaben
 * sind sie ruhig. Die Zustimmung dagegen ist ein ganzer Satz, und der wurde
 * in Versalien laut und schlechter lesbar: Großbuchstaben haben keine Ober-
 * und Unterlängen, an denen das Auge Wörter erkennt.
 */
.dp-map__consent .dp-btn,
.cookieconsent-optout-marketing.cookieconsent-optout-marketing a,
.cookieconsent-optout-statistics.cookieconsent-optout-statistics a,
.cookieconsent-optout-preferences.cookieconsent-optout-preferences a {
	text-transform: none;
}

/*
 * Die Karte wird hinter der Schaltfläche dunkler.
 *
 * WCAG 1.4.11 verlangt für Bedienelemente 3:1 gegen die Umgebung. Das
 * Magenta der Fläche kommt auf dem abgedunkelten Kartengrund nur auf
 * 2.55:1, und die Karte ist an manchen Stellen hell (Straßen), an anderen
 * dunkel — die Kante wäre stellenweise kaum auszumachen.
 *
 * Vorher stand hier eine weiße Kontur. Sie trug den Kontrast, sah aber wie
 * ein aufgesetzter Rahmen aus. Der weiche Schatten leistet dasselbe, ohne
 * sichtbare Kante: Er senkt die Helligkeit direkt an der Fläche und hebt
 * den Kontrast auf 3.55:1 im hellen und 4.06:1 im dunklen Design.
 */
.dp-map__consent .dp-btn {
	box-shadow: 0 2px 18px 6px rgba(6, 8, 8, 0.8);
}

.dp-map__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--dp-radius);
}

/* Die Schaltfläche sitzt rechts an der Kante — wie in den Kurskarten. */
.dp-map__caption {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--dp-space-2);
}

.dp-about {
	display: grid;
	gap: var(--dp-space-3);
	margin: var(--dp-space-4) 0;
	padding: var(--dp-space-3);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	box-shadow: var(--dp-shadow);
}

@media (min-width: 700px) {

	.dp-about {
		grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
		align-items: start;
	}
}

.dp-about__photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--dp-radius);
}

.dp-about__body > :last-child {
	margin-bottom: 0;
}

.dp-form {
	max-width: 40rem;
	margin: var(--dp-space-3) 0;
	padding: var(--dp-space-3);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	box-shadow: var(--dp-shadow);
}

.dp-form p {
	margin-bottom: var(--dp-space-2);
}

.dp-form label {
	display: block;
}

.dp-form input[type="text"],
.dp-form input[type="email"],
.dp-form input[type="tel"],
.dp-form select,
.dp-form textarea {
	width: 100%;
}

/* Contact Form 7 kennzeichnet Pflichtfelder nur visuell; der Stern bekommt
   deshalb zusätzlich Farbe mit ausreichendem Kontrast. */
.dp-form .dp-required {
	color: var(--dp-magenta-ink);
}

/*
 * Der Absende-Button von Contact Form 7 ist ein <input type="submit"> und
 * erbt daher nichts von .dp-btn. Ohne diese Regeln steht am Ende des
 * Formulars ein grauer Browser-Standardbutton — die wichtigste Schaltfläche
 * der Seite in der unauffälligsten Form.
 */
.dp-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--dp-radius);
	background: var(--dp-magenta);
	color: var(--dp-on-brand);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
}

.dp-form .wpcf7-submit:hover,
.dp-form .wpcf7-submit:focus {
	background: var(--dp-magenta-deep);
}

/* Während des Absendens sperrt CF7 den Button — das soll man sehen. */
.dp-form .wpcf7-submit:disabled {
	opacity: 0.7;
	cursor: progress;
}

/* Die Datenschutz-Checkbox: Klickfläche groß genug und Text daneben lesbar. */
.dp-form .wpcf7-acceptance .wpcf7-list-item {
	display: flex;
	gap: var(--dp-space-1);
	align-items: flex-start;
	margin: 0;
}

.dp-form input[type="checkbox"] {
	width: 1.35rem;
	height: 1.35rem;
	margin-top: 0.15rem;
	flex: 0 0 auto;
	accent-color: var(--dp-magenta);
}

.dp-form .wpcf7-list-item-label {
	font-weight: 400;
}

.dp-form .wpcf7-not-valid-tip {
	color: var(--dp-magenta-deep);
	font-weight: 600;
}

.dp-form .wpcf7-response-output {
	margin: var(--dp-space-2) 0 0;
	padding: var(--dp-space-2);
	border: 2px solid var(--dp-magenta-ink);
	border-radius: var(--dp-radius);
}

/* Honeypot-Feld: für Menschen unsichtbar, für Screenreader ausgenommen. */
.dp-form .dp-trap {
	position: absolute !important;
	left: -9999px;
}

/*
 * Redaktionshinweise. Nur angemeldete Redakteure sehen sie überhaupt, die
 * Auszeichnung macht klar, dass es kein Seiteninhalt ist.
 */
.dp-editor-note {
	margin: var(--dp-space-2) 0;
	padding: var(--dp-space-2);
	border: 2px dashed var(--dp-ink-soft);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	color: var(--dp-ink-soft);
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
 * 7c. Bild-Ausrichtung und Galerien
 *
 * Die Klassen alignleft, alignright und aligncenter setzt der WordPress-Editor
 * beim Einfügen von Bildern. Ohne Regeln dafür fließt der Text nicht um das
 * Bild, sondern beginnt darunter — genau das war auf "Über mich" und
 * "Mein Team" zu sehen.
 * -------------------------------------------------------------------------- */

.alignleft {
	float: left;
	margin: 0 var(--dp-space-3) var(--dp-space-2) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--dp-space-2) var(--dp-space-3);
}

.aligncenter {
	display: block;
	margin: 0 auto var(--dp-space-2);
}

.alignnone {
	margin-bottom: var(--dp-space-2);
}

/*
 * Unter 640px ist neben einem Bild kein Platz für lesbare Zeilen: Ein Umfluss
 * mit vier Wörtern pro Zeile ist schlechter als ein Bild über dem Text.
 */
@media (max-width: 639px) {

	.alignleft,
	.alignright {
		float: none;
		display: block;
		margin: 0 0 var(--dp-space-2);
	}
}

/* Absätze nach einem umflossenen Bild sollen nicht in die Spalte hineinlaufen. */
.dp-entry__content::after,
.dp-main::after {
	content: "";
	display: block;
	clear: both;
}

/* --------------------------------------------------------------------------
 * Galerien
 *
 * Ein Raster statt einer Tabelle mit Bildunterschriften. Die Unterschriften
 * der Galerie sind hier Bildnachweise mit Nutzungsbedingungen — als laufender
 * Text unter jedem Bild sprengen sie das Raster und stehen länger als das Bild
 * hoch ist. Sie bleiben im Markup und damit für Screenreader erreichbar,
 * werden aber nicht angezeigt.
 * -------------------------------------------------------------------------- */

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: var(--dp-space-2);
	margin: var(--dp-space-3) 0;
}

/*
 * WordPress gibt jedem Galerie-Element abhängig von der Spaltenzahl eine
 * Maximalbreite in Prozent — bei vier Spalten 25%. Im Raster des Themes ist
 * jedes Element aber schon eine Zelle, die 25% wirkten also ein zweites Mal:
 * Aus 263 Pixeln Zellenbreite wurden 66 Pixel Bild. Beide Angaben müssen
 * zurückgesetzt werden, und weil der Kernstil sie über eine ID-Regel setzt,
 * geht das nur mit !important.
 */
.gallery-item {
	margin: 0;
	width: auto !important;
	max-width: none !important;
}

.gallery-icon {
	width: 100%;
	line-height: 0;
}

.gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--dp-radius);
	border: 0 !important;
}

.gallery-caption {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Dasselbe für die Galerie-Widgets von Elementor. */
.elementor-image-gallery .gallery-item {
	padding: 0 !important;
}

.elementor-image-gallery .gallery-icon img {
	margin: 0 !important;
}
/* --------------------------------------------------------------------------
 * 7d. Gleicher Abstand nach der Überschrift
 *
 * Der Abstand setzte sich vorher aus drei Beiträgen zusammen: dem
 * margin-bottom der Überschrift, dem oberen Innenmaß von Elementors
 * Widget-Hülle (10px) und dem margin-top des ersten Inhaltsblocks (24px bei
 * den Karten, 0 bei einer Überschrift). Gemessen ergab das 34px auf
 * /extras/ und 58px auf /kurse/.
 *
 * Jetzt liefert die Überschrift den Abstand, und die beiden anderen Beiträge
 * werden für das erste Element abgeschaltet. Zwischen den Blöcken weiter
 * unten bleiben die Abstände unberührt.
 * -------------------------------------------------------------------------- */

.dp-page-title {
	margin-bottom: var(--dp-title-gap);
}

/*
 * Elementors Widget-Hülle in der ersten Sektion. Mit !important, weil die
 * Angabe aus dem Elementor-Kit stammt: Dessen Stylesheet lädt nach dem Theme,
 * und bei gleichem Gewicht gewinnt das spätere. Auf der Startseite blieben
 * deshalb 10px stehen.
 */
.dp-main .elementor-section:first-of-type > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding-top: 0 !important;
}

/*
 * Ist die erste Sektion die ausgeblendete Hülle des Schaltflächen-Paars,
 * beginnt der sichtbare Inhalt erst in der zweiten. Ohne diese Regel
 * greift die Angabe darüber eine Sektion zu früh und die Startseite hielt
 * 34px statt 24px.
 */
@media (min-width: 1024px) {

	.dp-main .elementor-section:has( > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget:only-child .dp-cta--page ) + .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-top: 0 !important;
	}
}

/*
 * Das erste Element im ersten Widget. Vorher stand hier eine Liste einzelner
 * Klassen; die war unvollständig — auf /kontakt/ brachte der Formularblock
 * eigene 24px oben mit und der Abstand wuchs auf 72px. Die allgemeine Fassung
 * deckt jeden Inhalt ab, greift aber nur für das erste Widget der ersten
 * Sektion. Weiter unten bleiben alle Abstände unberührt.
 *
 * Nur der Außenabstand fällt weg, nicht das Innenmaß: Der erste Block ist
 * oft selbst ein Kasten — der Consent-Platzhalter auf /stundenplan/ etwa,
 * oder das Formular auf /kontakt/. Mit padding-top: 0 verlor die Box oben
 * ihre 24px und behielt sie unten, die Schaltfläche darin saß dann 8px zu
 * hoch.
 */
.dp-main .elementor-section:first-of-type .elementor-widget:first-of-type > .elementor-widget-container > *:first-child,
.dp-main .elementor-section:first-of-type .elementor-widget:first-of-type > .elementor-widget-container > .elementor-shortcode > *:first-child {
	margin-top: 0;
}
/* Ohne Elementor: der erste Absatz oder die erste Überschrift im Inhalt. */
.dp-entry__content > *:first-child,
.dp-entry__content > .elementor > *:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
 * 8. Fußbereich
 * -------------------------------------------------------------------------- */

.dp-footer {
	background: var(--dp-surface);
	border-top: 4px solid var(--dp-magenta);
}

/*
 * Kompakt: Die Angaben im Fußbereich sind kurz, ein großzügiges Raster hätte
 * hier nur Leerraum erzeugt.
 */
.dp-footer__inner {
	display: grid;
	gap: var(--dp-space-3);
	padding: var(--dp-space-3) var(--dp-space-2);
	align-items: start;
}

@media (min-width: 768px) {

	.dp-footer__inner {
		grid-template-columns: minmax(0, 22rem) minmax(0, 26rem);
		gap: var(--dp-space-4);
		padding: var(--dp-space-3) var(--dp-space-2);
	}
}

@media (min-width: 1024px) {

	.dp-footer__inner {
		padding: var(--dp-space-3) var(--dp-space-4);
	}
}

/*
 * Die Karte sitzt im Fußbereich neben den Kontaktdaten, das Rechtliche
 * darunter als eigene Zeile.
 */
.dp-footer__map .dp-map {
	margin: 0;
	padding: 0;
	box-shadow: none;
	background: none;
}

.dp-footer-nav {
	padding: var(--dp-space-2);
	border-top: 1px solid var(--dp-border);
}

@media (min-width: 1024px) {

	.dp-footer-nav {
		padding: var(--dp-space-2) var(--dp-space-4);
	}
}

.dp-footer-nav .dp-footer-menu {
	margin: 0;
}

.dp-footer-contact__title,
.dp-map__title {
	margin-bottom: var(--dp-space-1);
	font-size: var(--dp-step-1);
}

/* Der Kontaktblock im Fußbereich braucht keine zweite Kartenfläche. */
.dp-footer-contact .dp-contact-block {
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
}

.dp-footer-contact__address {
	display: grid;
	margin-bottom: var(--dp-space-2);
	font-style: normal;
}

.dp-footer-contact__name {
	font-weight: 700;
}

.dp-footer-contact__list {
	margin: 0 0 var(--dp-space-2);
	padding: 0;
	list-style: none;
}

.dp-footer-contact__list li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem var(--dp-space-1);
}

.dp-footer-contact__key {
	min-width: 5.5rem;
	color: var(--dp-ink-soft);
}

.dp-social {
	display: flex;
	align-items: center;
	gap: var(--dp-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--dp-magenta);
	color: var(--dp-on-brand);
}

.dp-social__link:hover,
.dp-social__link:focus {
	background: var(--dp-magenta-deep);
	color: var(--dp-on-brand);
}

/* Die Icons sind jetzt Schriftzeichen, keine SVG-Grafiken mehr. */
.dp-social__icon {
	font-size: 26px;
}

/*
 * display: block und line-height: 1 machen das Kästchen des Zeichens genau so
 * hoch wie die Schriftgröße. Ohne das bestimmt die Zeilenhöhe der Schrift die
 * Höhe, und das Zeichen saß einen Pixel neben der Mittellinie von Strapline
 * und Umschalter.
 */
.dp-topbar .dp-social__icon,
.dp-social--kopf .dp-social__icon {
	display: block;
	font-size: 44px;
	line-height: 1;
}

.dp-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dp-space-1) var(--dp-space-2);
	margin: 0 0 var(--dp-space-2);
	padding: 0;
	list-style: none;
}

/*
 * Der Bestand animierte hier die font-size beim Hover, was das Layout
 * verschiebt. Stattdessen Unterstreichung — kein Reflow, klarere Rückmeldung.
 */
.dp-footer-nav .dp-footer-menu a {
	color: var(--dp-ink);
	font-weight: 600;
}

.dp-footer-nav .dp-footer-menu a:hover,
.dp-footer-nav .dp-footer-menu a:focus {
	color: var(--dp-magenta-deep);
	text-decoration: underline;
}

.dp-footer__copyright {
	margin: 0;
	color: var(--dp-ink-soft);
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
 * 9. Sticky-Leiste (mobil)
 *
 * Nur unter 1024px sichtbar. Der body bekommt unten Platz in Höhe der Leiste,
 * damit sie den letzten Absatz nicht verdeckt; safe-area-inset schützt vor
 * der Gestenleiste auf iPhones.
 * -------------------------------------------------------------------------- */

.dp-sticky-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 200;
	padding: var(--dp-space-1);
	padding-bottom: calc(var(--dp-space-1) + env(safe-area-inset-bottom, 0px));
	background: var(--dp-surface);
	box-shadow: 0 -2px 12px rgba(3, 38, 59, 0.2);
}

.dp-cta--sticky {
	gap: var(--dp-space-1);
}

.dp-cta--sticky .dp-btn {
	flex: 1 1 0;
	min-width: 0;
	padding: 0.75rem 0.5rem;
	font-size: 0.9375rem;
}

/*
 * Platz für die angeheftete Leiste, damit sie den letzten Absatz nicht
 * verdeckt.
 *
 * Der Ausgleich sitzt im Fußbereich selbst. Drei Stellen wären denkbar, zwei
 * davon sind falsch:
 *
 * - Am body lag er außerhalb des Rahmens. Unter dem Fußbereich stand ein
 *   Streifen in der Farbe der Außenfläche, und die Silhouetten-Spalte endete
 *   dort, wo das Grid endete — beim Blättern ans Seitenende sprang sie
 *   sichtbar nach oben.
 * - An .dp-site oder .dp-shell läge er innerhalb des Rahmens, hätte aber die
 *   Farbe der Fläche und nicht die des Fußbereichs: derselbe Streifen, nur in
 *   Rosa statt in Grau.
 *
 * Im Fußbereich trägt der Ausgleich dessen Farbe, und die Grid-Zeile bleibt so
 * hoch wie das Dokument — die Spalte reicht damit bis zur Unterkante.
 *
 * --dp-sticky-height ist nur ein Startwert; assets/js/navigation.js misst die
 * tatsächliche Höhe der Leiste und schreibt sie zurück. Der zusätzliche
 * Puffer von 0.5rem hält den Abstand auch dann brauchbar, wenn JavaScript
 * nicht läuft und die Beschriftung umbricht.
 */
.dp-footer {
	padding-bottom: calc(var(--dp-sticky-height) + 0.5rem + env(safe-area-inset-bottom, 0px));
}

/*
 * Die angeheftete Leiste bleibt bis 1423px.
 *
 * Ab 1024px steht die Navigation waagerecht, aber bis etwa 1424px reicht die
 * Zeile nicht für Menü und beide Schaltflächen: Auf einem querformatigen
 * Tablet rutschten sie in eine zweite Zeile unter das Menü. Unten in der
 * angehefteten Leiste sind sie dort besser erreichbar — und immer sichtbar,
 * ohne zu blättern.
 */
@media (min-width: 1424px) {

	.dp-sticky-cta {
		display: none;
	}

	.dp-footer {
		padding-bottom: 0;
	}
}

/*
 * Bei offenem Menü wird die Sticky-Leiste ausgeblendet: Sie liegt sonst über
 * den unteren Menüpunkten.
 */
.dp-nav-open .dp-sticky-cta {
	display: none;
}

/* --------------------------------------------------------------------------
 * 10. Elementor-Verträglichkeit
 *
 * Elementor-Sections sitzen innerhalb von .dp-main, das als Grid-Kind
 * `min-width: 0` trägt — damit sprengt eine breite Section das Layout nicht.
 * Der frühere Eingriff, der jede boxed Section auf `max-width: 100%` zwang,
 * ist nicht mehr nötig: Die Inhaltsbreite regelt theme.json.
 * -------------------------------------------------------------------------- */

/*
 * Textfarben für Elementor-Widgets.
 *
 * Elementor gibt seinen Widgets Farben aus der eigenen globalen Palette:
 * `.elementor-widget-text-editor { color: var(--e-global-color-text) }` mit
 * #7A7A7A und `.elementor-widget-heading .elementor-heading-title` mit
 * #6EC1E4, dem Elementor-Standardblau. Gemessen 3.34:1 für den Fließtext und
 * 1.57:1 für die Überschrift — beides deutlich unter AA, und beides fest
 * verdrahtet, also nicht modusfähig.
 *
 * Diese Regeln setzen die Theme-Tokens als Vorgabe. Sie liegen eine
 * Klassenstufe über den Elementor-Regeln und damit darüber, aber unter einer
 * ausdrücklichen Farbwahl an einem einzelnen Widget: Wer im Editor bewusst
 * eine Farbe setzt, behält sie.
 */
[class*="elementor-kit-"] .elementor-widget-text-editor,
[class*="elementor-kit-"] .elementor-widget-icon-list,
[class*="elementor-kit-"] .elementor-widget-shortcode {
	color: var(--dp-ink);
}

[class*="elementor-kit-"] .elementor-widget-heading .elementor-heading-title {
	color: var(--dp-magenta-ink);
}

/*
 * Elementor-Inhalt beginnt auf derselben Achse wie die Überschrift.
 *
 * Vorher zog eine negative Außenkante den Inhalt aus dem Innenmaß der Spalte
 * heraus, und Elementors eigener Container zentrierte ihn dann innerhalb
 * seiner Maximalbreite — die Überschrift des Themes und die erste Überschrift
 * im Inhalt standen dadurch auf zwei verschiedenen Linien.
 *
 * Jetzt gilt das Innenmaß der Spalte für beides, und der Container darf die
 * Breite ausfüllen statt sich zu zentrieren.
 *
 * Die Selektoren fordern bewusst KEINE direkte Kindbeziehung zu .dp-main: Der
 * Elementor-Inhalt steckt in .dp-entry__content, ein `>` traf deshalb nie.
 */
.dp-main .elementor .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 100%;
}

.dp-main .elementor .elementor-section {
	padding-right: 0;
	padding-left: 0;
}

/*
 * Elementor gibt jeder gefüllten Spalte 10px seitliches Innenmaß. Damit stand
 * die erste Überschrift im Inhalt zehn Pixel rechts von der Überschrift des
 * Themes. Senkrecht bleibt das Innenmaß erhalten — nur die seitliche
 * Verschiebung geht weg.
 */
.dp-main .elementor .elementor-column > .elementor-element-populated {
	padding-right: 0;
	padding-left: 0;
}

/*
 * Cookiebot-Platzhalter: Der Dienst ersetzt blockierte Einbettungen durch
 * einen Hinweis. Ohne Auszeichnung erscheint der als blauer Fließtext ohne
 * erkennbare Aktion (Briefing Punkt 3). Hier bekommt er eine Karte mit
 * sichtbarem Button-Look.
 */
.cookieconsent-optout-marketing,
.cookieconsent-optout-statistics,
.cookieconsent-optout-preferences {
	display: block;
	padding: var(--dp-space-3);
	border: 2px dashed var(--dp-magenta-ink);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	text-align: center;
}

/*
 * Zwei Klassen, weil Elementor aus seinen Site-Settings `.elementor-kit-26 a`
 * erzeugt: gleiche Spezifität wie eine einzelne Klasse, aber später geladen.
 * Der Hinweistext stand deshalb magenta auf magenta und war in beiden Modi
 * unlesbar. --dp-on-brand statt --dp-surface, weil die Fläche in beiden Modi
 * magentafarben bleibt.
 */
.cookieconsent-optout-marketing.cookieconsent-optout-marketing a,
.cookieconsent-optout-statistics.cookieconsent-optout-statistics a,
.cookieconsent-optout-preferences.cookieconsent-optout-preferences a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: var(--dp-space-1);
	padding: 0.75rem 1.25rem;
	border-radius: var(--dp-radius);
	background: var(--dp-magenta);
	color: var(--dp-on-brand);
	font-weight: 700;
	text-decoration: none;
}

/*
 * Der Abstand darüber gilt nur, wenn über der Schaltfläche noch Text steht.
 * Steckt der Hinweis wie auf /stundenplan/ im Link selbst, ist er das
 * einzige Kind — die 8px oben ließen ihn dann sichtbar zu hoch im Kasten
 * sitzen (34px oben gegen 26px unten).
 */
.cookieconsent-optout-marketing.cookieconsent-optout-marketing a:first-child,
.cookieconsent-optout-statistics.cookieconsent-optout-statistics a:first-child,
.cookieconsent-optout-preferences.cookieconsent-optout-preferences a:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
 * 12. Dunkel-Design
 * 13. Sanfter Wechsel zwischen Hell und Dunkel
 *
 * Greift automatisch, wenn das Gerät auf ein dunkles Erscheinungsbild
 * eingestellt ist. Umgeschaltet werden nur die Tokens — jede Regel weiter
 * oben benutzt sie und braucht keine zweite Fassung.
 *
 * Zusätzlich lässt sich der Modus über ein Attribut am <html>-Element
 * erzwingen (`data-dp-theme="dark"` bzw. `"light"`), etwa für einen späteren
 * Umschalter oder für einen Test.
 *
 * Marken-Magenta als Fläche bleibt #e2017b: Weiß darauf hält 4.64:1, und die
 * Fläche selbst kommt auf 3.76:1 gegen den dunklen Grund — über der
 * Nicht-Text-Schwelle von 3:1.
 * -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

	:root:not([data-dp-theme="light"]) {
		--dp-rose: var(--dp-dark-bg);
		--dp-rose-deep: var(--dp-dark-rose-deep);
		--dp-surface: var(--dp-dark-surface);
		--dp-ink: var(--dp-dark-ink);
		--dp-ink-soft: var(--dp-dark-ink-soft);
		--dp-magenta-ink: var(--dp-dark-magenta);
		--dp-magenta-deep: var(--dp-dark-magenta-deep);
		--dp-border: rgba(242, 238, 240, 0.22);
		--dp-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
		color-scheme: dark;
	}

	/*
	 * Der Fokusring dreht die Schichten: helle Kontur, dunkler Saum. Auf
	 * dunklem Grund wäre eine anthrazitfarbene Kontur unsichtbar.
	 */
	:root:not([data-dp-theme="light"]) :focus-visible {
		outline-color: var(--dp-dark-ink);
		box-shadow: 0 0 0 2px var(--dp-dark-bg);
	}

	/* Weiße Flächen im Formular und in Feldern mitziehen. */
	:root:not([data-dp-theme="light"]) input[type="text"],
	:root:not([data-dp-theme="light"]) input[type="email"],
	:root:not([data-dp-theme="light"]) input[type="tel"],
	:root:not([data-dp-theme="light"]) input[type="search"],
	:root:not([data-dp-theme="light"]) textarea,
	:root:not([data-dp-theme="light"]) select {
		border-color: var(--dp-dark-ink-soft);
		background: var(--dp-dark-bg);
		color: var(--dp-dark-ink);
	}

	/*
	 * Dunkel-Design gegen den Elementor-Kit.
	 *
	 * Elementor schreibt die in seinen Site-Settings gewählten Farben auf die
	 * eigene Body-Klasse: `.elementor-kit-26 { color: #03263B }` und
	 * `.elementor-kit-26 a { color: #C6016C }`. Das schlägt `body { color }`
	 * und `a { color }` des Themes — im Dunkel-Design blieb der Text deshalb
	 * dunkelblau auf fast schwarzem Grund, gemessen 1.4:1.
	 *
	 * Die Nummer im Klassennamen ist pro Installation verschieden, deshalb
	 * greift der Selektor über [class*="elementor-kit-"] und nicht über eine
	 * feste ID. Drei Klassen bzw. Klassen plus Typ liegen über der Regel des
	 * Kits, ohne !important.
	 *
	 * :not(.dp-btn) nimmt die Buttons aus. Ohne die Ausnahme galt die
	 * Linkfarbe auch für sie, und der Button in der Sticky-Leiste stand mit
	 * hellem Magenta auf Marken-Magenta — gemessen 1.36:1.
	 */
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] {
		color: var(--dp-dark-ink);
	}

	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] a:not(.dp-btn) {
		color: var(--dp-dark-magenta);
	}

	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] a:not(.dp-btn):hover,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] a:not(.dp-btn):focus {
		color: var(--dp-dark-magenta-deep);
	}

	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] h1,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] h2,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] h3,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] h4,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] h5,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] h6 {
		color: var(--dp-dark-magenta);
	}

	/*
	 * Die Navigation bleibt magenta mit weißer Schrift, auch im Dunkelmodus —
	 * im Ruhezustand und beim Überfahren.
	 *
	 * Der Überfahren-Zustand stand vorher nicht dabei, und dann gewann die
	 * allgemeine Linkregel des Dunkel-Designs: Sie nennt :root, zwei Attribute,
	 * :not(.dp-btn) und :hover, kommt damit auf fünf Klassen und lag über den
	 * vier dieser Regel. Der Menüpunkt wechselte beim Überfahren auf helles
	 * Magenta, während er im hellen Design weiß blieb.
	 *
	 * .dp-nav und .dp-menu je doppelt genannt heben das Gewicht darüber — und
 * zwar unabhängig von der Reihenfolge im Stylesheet: Bei gleichem Gewicht
 * entscheidet die, und darauf soll es nicht ankommen.
	 */
	:root:not([data-dp-theme="light"]) .dp-nav.dp-nav .dp-menu.dp-menu a,
	:root:not([data-dp-theme="light"]) .dp-nav.dp-nav .dp-menu.dp-menu a:hover,
	:root:not([data-dp-theme="light"]) .dp-nav.dp-nav .dp-menu.dp-menu a:focus {
		color: var(--dp-on-brand);
	}



	:root:not([data-dp-theme="light"]) .dp-topbar .dp-social__link:hover,
	:root:not([data-dp-theme="light"]) .dp-topbar .dp-social__link:focus {
		background: var(--dp-magenta);
		color: var(--dp-on-brand);
	}

	/*
	 * Der Hinweistext im Consent-Platzhalter liegt auf magentafarbener Fläche
	 * und bleibt deshalb weiß. Ohne diese Regel gewinnt die Linkfarbe für den
	 * Kit-Container darüber — im Dunkel-Design stand der Text dann in hellem
	 * Magenta auf Magenta.
	 */
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] .cookieconsent-optout-marketing.cookieconsent-optout-marketing a,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] .cookieconsent-optout-marketing.cookieconsent-optout-marketing a:hover,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] .cookieconsent-optout-marketing.cookieconsent-optout-marketing a:focus,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] .cookieconsent-optout-statistics.cookieconsent-optout-statistics a,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] .cookieconsent-optout-statistics.cookieconsent-optout-statistics a:hover,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] .cookieconsent-optout-statistics.cookieconsent-optout-statistics a:focus,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] .cookieconsent-optout-preferences.cookieconsent-optout-preferences a,
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] .cookieconsent-optout-preferences.cookieconsent-optout-preferences a:hover
	:root:not([data-dp-theme="light"]) [class*="elementor-kit-"] .cookieconsent-optout-preferences.cookieconsent-optout-preferences a:focus {
		color: var(--dp-on-brand);
	}

	/* Der Stadtplan im Karten-Platzhalter wird stärker abgedunkelt. */
	:root:not([data-dp-theme="light"]) .dp-map__consent {
		--dp-map-veil: 0.72;
	}
	/* Die graue Leiste bleibt dunkelgrau, wird aber vom Grund abgesetzt. */
	:root:not([data-dp-theme="light"]) .dp-topbar,
	:root:not([data-dp-theme="light"]) .dp-headbar {
		background: var(--dp-dark-rose-deep);
	}
}

/*
 * Erzwungenes Dunkel-Design, unabhängig von der Geräteeinstellung.
 * Wiederholt bewusst die Werte von oben: Ein @media-Block lässt sich nicht
 * per Attribut aktivieren.
 */
:root[data-dp-theme="dark"] {
	--dp-rose: var(--dp-dark-bg);
	--dp-rose-deep: var(--dp-dark-rose-deep);
	--dp-surface: var(--dp-dark-surface);
	--dp-ink: var(--dp-dark-ink);
	--dp-ink-soft: var(--dp-dark-ink-soft);
	--dp-magenta-ink: var(--dp-dark-magenta);
	--dp-magenta-deep: var(--dp-dark-magenta-deep);
	--dp-border: rgba(242, 238, 240, 0.22);
	--dp-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
	color-scheme: dark;
}

:root[data-dp-theme="dark"] :focus-visible {
	outline-color: var(--dp-dark-ink);
	box-shadow: 0 0 0 2px var(--dp-dark-bg);
}

:root[data-dp-theme="dark"] input[type="text"],
:root[data-dp-theme="dark"] input[type="email"],
:root[data-dp-theme="dark"] input[type="tel"],
:root[data-dp-theme="dark"] input[type="search"],
:root[data-dp-theme="dark"] textarea,
:root[data-dp-theme="dark"] select {
	border-color: var(--dp-dark-ink-soft);
	background: var(--dp-dark-bg);
	color: var(--dp-dark-ink);
}

/*
 * Dunkel-Design gegen den Elementor-Kit.
 *
 * Elementor schreibt die in seinen Site-Settings gewählten Farben auf die
 * eigene Body-Klasse: `.elementor-kit-26 { color: #03263B }` und
 * `.elementor-kit-26 a { color: #C6016C }`. Das schlägt `body { color }`
 * und `a { color }` des Themes — im Dunkel-Design blieb der Text deshalb
 * dunkelblau auf fast schwarzem Grund, gemessen 1.4:1.
 *
 * Die Nummer im Klassennamen ist pro Installation verschieden, deshalb
 * greift der Selektor über [class*="elementor-kit-"] und nicht über eine
 * feste ID. Drei Klassen bzw. Klassen plus Typ liegen über der Regel des
 * Kits, ohne !important.
 */
:root[data-dp-theme="dark"] [class*="elementor-kit-"] {
	color: var(--dp-dark-ink);
}

:root[data-dp-theme="dark"] [class*="elementor-kit-"] a:not(.dp-btn) {
	color: var(--dp-dark-magenta);
}

:root[data-dp-theme="dark"] [class*="elementor-kit-"] a:not(.dp-btn):hover,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] a:not(.dp-btn):focus {
	color: var(--dp-dark-magenta-deep);
}

:root[data-dp-theme="dark"] [class*="elementor-kit-"] h1,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] h2,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] h3,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] h4,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] h5,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] h6 {
	color: var(--dp-dark-magenta);
}

/*
 * Die Navigation bleibt magenta mit weißer Schrift, auch im Dunkelmodus —
 * im Ruhezustand und beim Überfahren.
 *
 * Der Überfahren-Zustand stand vorher nicht dabei, und dann gewann die
 * allgemeine Linkregel des Dunkel-Designs: Sie nennt :root, zwei Attribute,
 * :not(.dp-btn) und :hover, kommt damit auf fünf Klassen und lag über den
 * vier dieser Regel. Der Menüpunkt wechselte beim Überfahren auf helles
 * Magenta, während er im hellen Design weiß blieb.
 *
 * .dp-nav und .dp-menu je doppelt genannt heben das Gewicht darüber — und
 * zwar unabhängig von der Reihenfolge im Stylesheet: Bei gleichem Gewicht
 * entscheidet die, und darauf soll es nicht ankommen.
 */
:root[data-dp-theme="dark"] .dp-nav.dp-nav .dp-menu.dp-menu a,
:root[data-dp-theme="dark"] .dp-nav.dp-nav .dp-menu.dp-menu a:hover,
:root[data-dp-theme="dark"] .dp-nav.dp-nav .dp-menu.dp-menu a:focus {
	color: var(--dp-on-brand);
}



:root[data-dp-theme="dark"] .dp-topbar .dp-social__link:hover,
:root[data-dp-theme="dark"] .dp-topbar .dp-social__link:focus {
	background: var(--dp-magenta);
	color: var(--dp-on-brand);
}

/*
 * Der Hinweistext im Consent-Platzhalter liegt auf magentafarbener Fläche
 * und bleibt deshalb weiß. Ohne diese Regel gewinnt die Linkfarbe für den
 * Kit-Container darüber — im Dunkel-Design stand der Text dann in hellem
 * Magenta auf Magenta.
 */
:root[data-dp-theme="dark"] [class*="elementor-kit-"] .cookieconsent-optout-marketing.cookieconsent-optout-marketing a,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] .cookieconsent-optout-marketing.cookieconsent-optout-marketing a:hover,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] .cookieconsent-optout-marketing.cookieconsent-optout-marketing a:focus,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] .cookieconsent-optout-statistics.cookieconsent-optout-statistics a,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] .cookieconsent-optout-statistics.cookieconsent-optout-statistics a:hover,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] .cookieconsent-optout-statistics.cookieconsent-optout-statistics a:focus,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] .cookieconsent-optout-preferences.cookieconsent-optout-preferences a,
:root[data-dp-theme="dark"] [class*="elementor-kit-"] .cookieconsent-optout-preferences.cookieconsent-optout-preferences a:hover
:root[data-dp-theme="dark"] [class*="elementor-kit-"] .cookieconsent-optout-preferences.cookieconsent-optout-preferences a:focus {
	color: var(--dp-on-brand);
}

/* Der Stadtplan im Karten-Platzhalter wird stärker abgedunkelt. */
:root[data-dp-theme="dark"] .dp-map__consent {
	--dp-map-veil: 0.72;
}

:root[data-dp-theme="dark"] .dp-topbar,
:root[data-dp-theme="dark"] .dp-headbar {
	background: var(--dp-dark-rose-deep);
}
/* --------------------------------------------------------------------------
 * 13. Sanfter Wechsel zwischen Hell und Dunkel
 *
 * Die Übergänge gelten nur, solange <html> die Klasse dp-theme-wechselt trägt
 * — assets/js/navigation.js setzt sie beim Klick und nimmt sie danach wieder
 * weg. Dauerhaft eingeschaltet würden dieselben Übergänge auch bei jedem
 * Überfahren einer Schaltfläche greifen und die Bedienung träge wirken lassen.
 *
 * Übergangen werden nur Farben. Größen oder Positionen zu animieren hieße,
 * bei jedem Bild neu zu rechnen.
 * -------------------------------------------------------------------------- */

.dp-theme-wechselt body,
.dp-theme-wechselt .dp-topbar,
.dp-theme-wechselt .dp-headbar,
.dp-theme-wechselt .dp-header,
.dp-theme-wechselt .dp-nav,
.dp-theme-wechselt .dp-main,
.dp-theme-wechselt .dp-footer,
.dp-theme-wechselt .dp-card,
.dp-theme-wechselt .dp-prices,
.dp-theme-wechselt .dp-about,
.dp-theme-wechselt .dp-form,
.dp-theme-wechselt .dp-map__consent,
.dp-theme-wechselt .dp-contact-block,
.dp-theme-wechselt .dp-schedule,
.dp-theme-wechselt .dp-schedule th,
.dp-theme-wechselt .dp-schedule td,
.dp-theme-wechselt .dp-btn,
.dp-theme-wechselt .dp-theme-toggle__button,
.dp-theme-wechselt input,
.dp-theme-wechselt textarea,
.dp-theme-wechselt select,
.dp-theme-wechselt a,
.dp-theme-wechselt h1,
.dp-theme-wechselt h2,
.dp-theme-wechselt h3,
.dp-theme-wechselt p,
.dp-theme-wechselt li,
.dp-theme-wechselt span {
	transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}
/* --------------------------------------------------------------------------
 * Menü-Umschalter in der Logo-Bühne (Tablet)
 *
 * Zwischen 768px und 1024px sitzt der Umschalter unten rechts in der dunklen
 * Bühne, nicht darunter: Der Kopfbereich bleibt so eine Fläche statt zwei
 * Streifen, und die Höhe, die der Kopf beim Blättern freigibt, wird nicht
 * durch eine eigene Zeile für den Umschalter aufgehoben.
 *
 * Auf dem Telefon bleibt es beim grauen Streifen unter der Bühne — dort ist
 * die Fläche zu schmal, um Icons und Umschalter neben dem Logo unterzubringen.
 *
 * Die Farben sind dieselben festen Werte wie bei der Schaltfläche in der
 * Navigation: weiße Fläche, magentafarbene Schrift (5.80:1). Die Grundfarben
 * des Umschalters taugen hier nicht — magenta auf dem dunklen Grund der Bühne
 * hält nur 1.58:1, und im Dunkel-Design wäre auch seine Fläche dunkel (1.12:1
 * gegen die Bühne, gemessen).
 *
 * Der Block steht bewusst weit hinten und nennt die Klasse doppelt: Die
 * Grundregeln des Umschalters kommen später im Stylesheet und haben dieselbe
 * Spezifität — sonst gewinnen sie.
 * -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {

	.dp-header__inner {
		position: relative;
	}

	.dp-nav-toggle.dp-nav-toggle {
		position: absolute;
		right: var(--dp-space-2);
		bottom: var(--dp-space-2);
		z-index: 2;
		margin: 0;
		border-color: var(--dp-on-brand);
		background: var(--dp-on-brand);
		color: var(--dp-on-light);
	}

	.dp-nav-toggle.dp-nav-toggle:focus {
		border-color: var(--dp-topbar-active);
		background: var(--dp-topbar-active);
		color: var(--dp-on-brand);
	}

	/*
	 * Der Überfahren-Zustand gilt nur für Geräte mit Zeiger. Auf einem
	 * Touch-Tablet bliebe er nach dem Antippen stehen — dieselbe Regel wie im
	 * Abschnitt weiter unten, hier aber als Bedingung um die Regel statt als
	 * Rücksetzung danach: Der Umschalter trägt in der Bühne andere Farben als
	 * sonst, eine Rücksetzung müsste sie ein zweites Mal wiederholen.
	 */
	@media (hover: hover) {

		.dp-nav-toggle.dp-nav-toggle:hover {
			border-color: var(--dp-topbar-active);
			background: var(--dp-topbar-active);
			color: var(--dp-on-brand);
		}
	}
}

/* --------------------------------------------------------------------------
 * Kein Überfahren-Zustand auf Touch-Geräten
 *
 * Ein Finger kann nichts überfahren. Trotzdem setzen Browser auf Touch den
 * :hover-Zustand beim Antippen — und lassen ihn stehen, bis irgendwo anders
 * getippt wird. Eine angetippte Schaltfläche blieb so grau, ein Menüpunkt
 * behielt seine Linie, obwohl längst die nächste Seite geladen war.
 *
 * `hover: none` trifft Geräte ohne Zeiger, die einen Überfahren-Zustand
 * überhaupt melden können. Zurückgesetzt wird auf die Ruhewerte; der
 * Fokus-Zustand bleibt unberührt, denn Tastatur und Screenreader brauchen ihn
 * auch auf einem Tablet mit angeschlossener Tastatur.
 * -------------------------------------------------------------------------- */

@media (hover: none) {

	.dp-btn.dp-btn--primary:hover {
		border-color: transparent;
		background: var(--dp-magenta);
		color: var(--dp-on-brand);
	}

	.dp-btn.dp-btn--secondary:hover {
		border-color: var(--dp-magenta-ink);
		background: var(--dp-surface);
		color: var(--dp-magenta-ink);
	}

	/* Im eingeklappten Menü liegt das Paar auf Magenta. */
	.dp-nav .dp-btn.dp-btn--primary:hover {
		background: var(--dp-on-brand);
		color: var(--dp-on-light);
	}

	.dp-nav .dp-btn.dp-btn--secondary:hover {
		border-color: var(--dp-on-brand);
		background: transparent;
		color: var(--dp-on-brand);
	}

	.dp-nav.dp-nav .dp-menu.dp-menu a:hover {
		color: var(--dp-on-brand);
	}

	/* Die Linie unter dem Menüpunkt bleibt dem aktiven Punkt vorbehalten. */
	.dp-nav .dp-menu a:hover::after {
		transform: scaleX(0);
	}

	.dp-nav .dp-menu a[aria-current]:hover::after {
		transform: scaleX(1);
	}

	.dp-topbar .dp-social__link:hover,
	.dp-social--kopf .dp-social__link:hover {
		background: transparent;
		color: var(--dp-topbar-accent);
	}

	.dp-theme-toggle__button:hover {
		background: transparent;
	}

	.dp-theme-toggle__button[aria-pressed="true"]:hover {
		background: var(--dp-topbar-active);
	}

	.cookieconsent-optout-marketing.cookieconsent-optout-marketing a:hover,
	.cookieconsent-optout-statistics.cookieconsent-optout-statistics a:hover,
	.cookieconsent-optout-preferences.cookieconsent-optout-preferences a:hover {
		border-color: transparent;
		background: var(--dp-magenta);
		color: var(--dp-on-brand);
	}
}

/* --------------------------------------------------------------------------
 * 11. Druck
 * 12. Dunkel-Design
 * 13. Sanfter Wechsel zwischen Hell und Dunkel
 * -------------------------------------------------------------------------- */

@media print {

	.dp-rail,
	.dp-nav,
	.dp-nav-toggle,
	.dp-sticky-cta,
	.dp-skip-link,
	.dp-search {
		display: none !important;
	}

	.dp-footer {
		padding-bottom: 0;
		background: #ffffff;
		color: #000000;
	}

	.dp-site {
		display: block;
	}

	/* Ziel-URL sichtbar machen, damit ein Ausdruck die Links nicht verliert. */
	.dp-entry__content a::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}