/* ---- tokens.css ---- */
/*
 * tokens.css — Design Tokens diversity company
 * ============================================
 *
 * Quelle: Figma "RZ_DiversityCompany".
 * In der Figma-Datei sind KEINE Farb-Variablen angelegt. Alle Farbwerte hier
 * wurden aus den Layouts rekonstruiert (Fill-Werte der Sections, exportierte
 * Hexagon-SVGs, Pixel-Sampling der Renderings) und am 26.08.2026 freigegeben.
 *
 * REGEL: In Block-CSS niemals Hex-Werte oder feste px-Abstaende schreiben.
 * Immer eine Variable von hier oder eine --bs-* Variable verwenden.
 * Fehlt ein Wert, erst hier anlegen.
 */

:root {

	/* ------------------------------------------------------------------
	 * 1. Markenfarben
	 * ------------------------------------------------------------------ */

	--dc-gelb:    #f8d74a;  /* Section-Baender, Primaer-Button, Footer-Leiste */
	/*
	 * DAS GRAU IST DER SEITENHINTERGRUND, NICHT DAS WEISS.
	 *
	 * Nachgemessen in den Entwurfsexporten aller Seiten (Pixelwert am
	 * linken und rechten Rand, ober- und unterhalb der Baender): ueberall
	 * #f0f0f0. Hier stand einmal das Weiss als Seitenhintergrund - dadurch
	 * waren die weissen Karten der Angebotsliste und die weissen
	 * Bestseller-Karten vom Grund nicht zu unterscheiden.
	 */
	--dc-grau:    #f0f0f0;  /* Seitenhintergrund, Kacheln, Eingabefelder */
	--dc-schwarz: #000000;  /* Text, Konturen, Schlagschatten */
	--dc-weiss:   #ffffff;  /* Karten, die sich vom Grund abheben */

	/* ------------------------------------------------------------------
	 * 2. Bauteil-Anatomie
	 *
	 * Der Look des Designs entsteht nicht ueber Farbe, sondern ueber diese
	 * drei Werte: duenne schwarze Kontur, harter Versatzschatten nach
	 * links-unten, keine Eckenrundung. Gilt fuer Buttons, Kacheln,
	 * Eingabefelder und Bildrahmen gleichermassen.
	 * ------------------------------------------------------------------ */

	--dc-kontur:   1px solid var(--dc-schwarz);
	--dc-schatten: -3px 3px 0 var(--dc-schwarz);

	/* ------------------------------------------------------------------
	 * 3. Bootstrap-Ueberschreibungen
	 *
	 * Bootstrap 5 arbeitet mit CSS Custom Properties. Diese Zuweisungen
	 * faerben Bootstrap ein, ohne dass ein Sass-Build noetig ist.
	 * ------------------------------------------------------------------ */

	--bs-primary:       var(--dc-gelb);
	--bs-primary-rgb:   248, 215, 74;

	--bs-body-bg:       var(--dc-grau);
	--bs-body-color:    var(--dc-schwarz);
	--bs-body-color-rgb: 0, 0, 0;

	--bs-border-color:  var(--dc-schwarz);
	--bs-border-width:  1px;
	--bs-border-radius:    0;
	--bs-border-radius-sm: 0;
	--bs-border-radius-lg: 0;
	--bs-border-radius-xl: 0;

	--bs-link-color:       var(--dc-schwarz);
	--bs-link-hover-color: var(--dc-schwarz);

	/* ------------------------------------------------------------------
	 * 4. Typografie
	 *
	 * Schnitte laut Figma: Gotham Book (400), Medium (500), Bold (700),
	 * jeweils auch kursiv. Kursiv wird bisher nur fuer die Zwischenzeile im
	 * Hero gebraucht.
	 *
	 * SCHRIFT TAUSCHEN: Nur die naechste Zeile aendern. Die @font-face-
	 * Deklarationen stehen in base.css.
	 * ------------------------------------------------------------------ */

	/*
	 * "gotham" ohne Anfuehrungszeichen und klein geschrieben: So heisst
	 * die Familie bei Adobe Fonts (siehe DC-89). Sie steht nur dann zur
	 * Verfuegung, wenn der Besucher eingewilligt hat - sonst greift
	 * Montserrat aus dem Theme.
	 */
	--bs-body-font-family: gotham, "Montserrat", "Helvetica Neue", Arial, sans-serif;

	--dc-gewicht-book:   400;
	--dc-gewicht-medium: 500;
	--dc-gewicht-bold:   700;

	/* Groessen exakt aus den Figma-Text-Styles.
	 * Der zweite clamp-Wert skaliert mobil herunter (Desktop-Design ist fuehrend,
	 * mobil wird gestapelt — es gibt keine eigenen Mobile-Textgroessen in Figma). */

	/*
	 * Die Untergrenze greift unterhalb von 727 - dort ist 4,4vw kleiner als
	 * sie. Sie lag bei 2.5rem (40px); damit passte "Organisationen" in der
	 * Hero-Ueberschrift auf 390 nicht mehr in eine Zeile und wurde
	 * getrennt. Mit 2rem (32px) bleibt die Ueberschrift die groesste
	 * Schrift der Seite und die langen Komposita passen.
	 */
	--dc-fs-h1: clamp(2rem, 4.4vw, 4rem);        /* 64px, Bold   */
	--dc-lh-h1: 1;                                /* 64px         */

	--dc-fs-h2: clamp(1.75rem, 2.5vw, 2.25rem);  /* 36px, Bold   */
	--dc-lh-h2: 1.111;                            /* 40px         */

	--dc-fs-h3: clamp(1.75rem, 2.5vw, 2.25rem);  /* 36px, Medium */
	--dc-lh-h3: 1.111;                            /* 40px         */

	--dc-fs-h4: 1.5rem;                           /* 24px, Bold   */
	--dc-lh-h4: 1.083;                            /* 26px         */

	--dc-fs-h5: 1.5rem;                           /* 24px, Book   */
	--dc-lh-h5: 1.083;                            /* 26px         */

	--dc-fs-h6: 1.25rem;                          /* 20px, Bold   */
	--dc-lh-h6: 1.1;                              /* 22px         */

	--dc-fs-text: 1rem;                           /* 16px, Book   */
	--dc-lh-text: 1.25;                           /* 20px         */

	--dc-fs-fussnote: 0.75rem;                    /* 12px, Book   */
	--dc-lh-fussnote: 1.125;                      /* 13.5px       */

	/* ------------------------------------------------------------------
	 * 5. Layout
	 *
	 * Figma Desktop: Canvas 1920, Seitenrand 300, Inhalt 1320.
	 * Figma Mobil:   Canvas  390, Seitenrand  40, Inhalt  310.
	 * ------------------------------------------------------------------ */

	--dc-container:      1320px;
	--dc-rand-mobil:     40px;

	/*
	 * DIE GASSE - Abstand vom Fensterrand bis zur Containerkante.
	 *
	 * Gebraucht von allem, was AUSSERHALB von .dc-container steht und sich
	 * trotzdem an dessen Kante ausrichten muss: waagerecht scrollbare
	 * Reihen, randlose Farbkaesten, versetzte Bilder.
	 *
	 * WARUM NICHT EINFACH 100vw (21.09.2026)
	 *
	 * 100vw enthaelt die Breite des Scrollbalkens, der sichtbare Bereich
	 * ist schmaler. Gemessen auf Wissen & Ressourcen bei 1440: Der
	 * Container begann bei 53, die Kachelreihe bei 60 - sieben Pixel
	 * Versatz, und zwar an jeder dieser Stellen gleichzeitig.
	 *
	 * --dc-scrollbar rechnet die Differenz aus: Auf :root ist 100% die
	 * Breite OHNE Scrollbalken, 100vw die MIT. Was bleibt, ist der Balken.
	 */
	--dc-scrollbar: calc( 100vw - 100% );
	--dc-gasse: max(
		var(--dc-rand-mobil),
		calc( ( 100vw - var(--dc-scrollbar) - var(--dc-container) ) / 2 )
	);

	/*
	 * Abstand zwischen zwei Abschnitten. Figma misst hier durchgaengig 100
	 * (Startseite, alle 14 Abschnitte). Derselbe Wert ist der Innenabstand
	 * farbiger Baender - auch das kommt aus Figma (Publikationen und
	 * LinkedIn: oben 100, unten 100).
	 *
	 * DER ABSTAND STEHT NUR AN EINER STELLE, in base.css Abschnitt 6.
	 * Bloecke setzen ihn NICHT selbst - sonst addieren sich die Abstaende
	 * zweier benachbarter Bloecke und es werden 200 statt 100.
	 */
	--dc-abstand-section: clamp(3rem, 6vw, 6.25rem);   /* 48 ... 100 */
	--dc-abstand-block:   clamp(2rem, 4vw, 3.5rem);
	--dc-abstand-element: 1.25rem;

	/*
	 * Abstand zwischen zwei Absaetzen: eine Zeile Fliesstext (20px).
	 *
	 * ACHTUNG, HIER LAG EIN FEHLER: Frueher stand an diesen Stellen
	 * var(--dc-lh-text). Das ist eine Zeilenhoehe OHNE Einheit (1.25) und
	 * als Abstand eine ungueltige Angabe - der Browser hat die ganze
	 * margin-Zeile verworfen, die Absaetze klebten aneinander.
	 * Zeilenhoehen nie als Abstand verwenden.
	 */
	--dc-abstand-absatz: 1.25rem;

	/*
	 * Knopf: 172 x 50 im Entwurf (Kontakt 1013:1313, "Termin buchen").
	 *
	 * Waagerecht stimmen die 25 auf den Punkt - der Knopf misst gebaut
	 * exakt 172. Senkrecht waren es mit 15 zwei zu viel: 15 + 20 Zeilenhoehe
	 * + 15 + 2 Kontur = 52. Figma trimmt die Textbox auf die Versalhoehe und
	 * kommt damit auf 50. 14 statt 15 trifft das ohne Umweg.
	 */
	--dc-button-padding: 14px 25px;

	/* ------------------------------------------------------------------
	 * 5c. Formularfelder
	 *
	 * Quelle: Kontakt (1013:1313). Das Feld ist 50 hoch, der Text sitzt 30
	 * vom Rand (davon 1 Kontur), die Beschriftung steht 11 darueber, und
	 * zwischen zwei Zeilen liegen 30.
	 *
	 * ACHTUNG, ZWEI ABSTAENDE: WS Form nimmt fuer Spalten UND Zeilen
	 * dieselbe Variable. Die Spalten brauchen 20 (Vorname 204 + 20 +
	 * Nachname 204 = 428), die Zeilen 30. Deshalb bleibt die Variable des
	 * Plugins bei 20 und der Zeilenabstand steht hier getrennt.
	 *
	 * Die Feldfarbe ist Schwarz, nicht das #003850 aus dem Entwurf - siehe
	 * ENTSCHEIDUNGEN.md, "Feldkontur der Kontaktseite".
	 * ------------------------------------------------------------------ */

	--dc-feld-hoehe:          50px;   /* Figma */
	--dc-feld-padding-y:      14px;   /* 14 + 20 + 14 + 2 Kontur = 50 */
	--dc-feld-padding-x:      29px;   /* Figma: Text bei 30, davon 1 Kontur */
	--dc-feld-label-abstand:  11px;   /* Figma: Label endet 349, Feld ab 360 */
	--dc-feld-zeilenabstand:  30px;   /* Figma: Feld endet 410, Label ab 440 */
	--dc-feld-spaltenabstand: 20px;   /* Figma: 204 + 20 + 204 = 428 */
	--dc-feld-haken:          20px;   /* Figma: Ankreuzfeld 20 x 20 */
	--dc-feld-haken-abstand:  14px;   /* Figma: Kaestchen endet 990, Text 1004 */

	/* Beschriftung im Feld (Newsletter, Startseite). Figma: 60 % Schwarz. */
	--dc-feld-platzhalter: rgba(10, 10, 13, 0.6);

	/* ------------------------------------------------------------------
	 * 5b. Kachelfarben
	 *
	 * Die nummerierten Kacheln auf den Leistungsseiten (Figma:
	 * Trainings_und_Keynotes_Kategorien, 3001:1247) nutzen vier Flaechen-
	 * farben. Gelb ist das Markengelb, die drei anderen kommen nur hier vor.
	 *
	 * Alle vier tragen schwarzen Text mit mindestens 6,4:1 - also AA, drei
	 * davon AAA. Weisser Text erreicht auf keiner davon 4,5:1 und ist
	 * deshalb keine Option.
	 * ------------------------------------------------------------------ */

	--dc-kachel-gelb:    var(--dc-gelb);  /* Text schwarz  14,81:1 */
	--dc-kachel-pink:    #f1529e;         /* Text schwarz   6,44:1 */
	--dc-kachel-tuerkis: #00cccc;         /* Text schwarz  10,51:1 */
	--dc-kachel-rose:    #ffb3e9;         /* Text schwarz  12,88:1 */
	/*
	 * Rueckfall. Eine Verweiskachel, deren Zielseite keine Kachelfarbe
	 * gesetzt hat, wird grau statt stillschweigend gelb - sonst sieht sie
	 * aus wie Keynotes.
	 */
	--dc-kachel-grau:    var(--dc-grau);

	/* ------------------------------------------------------------------
	 * 6. Diversity-Dimensionen
	 *
	 * Die zehn Hexagon-Farben.
	 *
	 * REGEL: Ausschliesslich als Flaechenfarbe (Icon, Hexagon) verwenden.
	 * NIEMALS als Textfarbe — die meisten erreichen auf hellem Grund keine
	 * 4,5:1 nach WCAG AA (Ethnizitaet 1,99:1, Religion 1,18:1). Als Flaeche
	 * mit der jeweils angegebenen Textfarbe bestehen dagegen alle AA.
	 * ------------------------------------------------------------------ */

	--dc-dim-gender:           #5e287f;  /* Text darauf: weiss   10,07:1 */
	--dc-dim-orientierung:     #e69736;  /* Text darauf: schwarz  8,84:1 */
	--dc-dim-ethnizitaet:      #8bba57;  /* Text darauf: schwarz  9,26:1 */
	--dc-dim-alter:            #e66e99;  /* Text darauf: schwarz  7,05:1 */
	--dc-dim-behinderung:      #336fb2;  /* Text darauf: weiss    5,18:1 */
	--dc-dim-religion:         #fade4d;  /* Text darauf: schwarz 15,62:1 */
	--dc-dim-herkunft:         #c52c54;  /* Text darauf: weiss    5,44:1 */
	--dc-dim-neurodiversitaet: #b2508d;  /* Text darauf: weiss    4,75:1 */
	--dc-dim-fachlich:         #56a8dc;  /* Text darauf: schwarz  8,03:1 */
	--dc-dim-sprachniveau:     #5ca847;  /* Text darauf: schwarz  7,15:1 */

	/* OFFENER PUNKT (Design entscheidet nach, blockiert die Umsetzung nicht):
	 *
	 * a) --dc-gelb (#f8d74a) und --dc-dim-religion (#fade4d) sind fast
	 *    identisch. Auf einem gelben Section-Band verschwindet das Hexagon
	 *    der Dimension "Religion & Weltanschauung" praktisch.
	 *
	 * b) --dc-dim-ethnizitaet (#8bba57) und --dc-dim-sprachniveau (#5ca847)
	 *    sind als Paar schwer zu unterscheiden, besonders bei Rot-Gruen-
	 *    Schwaeche.
	 *
	 * Beide Werte stehen unveraendert wie in Figma. Aendert sich die
	 * Entscheidung, genuegt es, sie hier zu korrigieren.
	 */
}

/* ---- base.css ---- */
/*
 * base.css — Schriften und globale Typografie
 * ===========================================
 *
 * Laedt nach tokens.css. Setzt die Figma-Text-Styles auf die HTML-Elemente
 * und definiert die drei Gotham-Schnitte.
 */

/* ----------------------------------------------------------------------
 * 1. Schriften
 *
 * ACHTUNG — LIZENZ UNGEKLAERT (Stand 26.08.2026):
 * Die Dateien in assets/fonts/ stammen aus einem oeffentlichen Fremd-Repo
 * und sind fuer diversity-company.de NICHT lizenziert. Die Lizenzierung
 * laeuft ueber Adobe Fonts; Adobe erlaubt kein Self-Hosting, sondern liefert
 * ueber use.typekit.net aus. Vor dem Live-Gang muss dieser Block entweder
 * durch die Adobe-Einbindung ersetzt oder durch eine Self-Host-Lizenz
 * abgesichert werden. Siehe README.md.
 * ---------------------------------------------------------------------- */

/*
 * DIE SCHRIFT KOMMT VON ADOBE FONTS - ERST NACH EINWILLIGUNG (DC-89)
 *
 * Gotham ist ueber Adobe Fonts (Typekit) lizenziert. Die Lizenz deckt die
 * Auslieferung ueber Adobe ab, nicht das Ablegen der Schriftdateien auf
 * dem eigenen Server. Die frueher hier eingebundenen gotham-*.woff2 sind
 * deshalb entfernt.
 *
 * Adobe laedt von use.typekit.net und sieht dabei die IP-Adresse der
 * Besucher*innen. Das ist einwilligungspflichtig; der Aufruf steht
 * deshalb nicht im Kopf der Seite, sondern in assets/js/schrift.js und
 * laeuft erst, wenn Borlabs die Einwilligung meldet.
 *
 * BIS DAHIN - UND FUER ALLE, DIE ABLEHNEN - GILT MONTSERRAT. Sie liegt
 * lokal im Theme, ist frei lizenziert (SIL Open Font License) und wie
 * Gotham eine geometrische Grotesk. Die Seite hat damit in jedem Fall
 * eine Schrift, die zum Entwurf passt; niemand sieht Arial.
 *
 * Die Schnitte entsprechen denen von Gotham: 400, 500, 700, dazu kursiv
 * in 400 und 500.
 */

@font-face {
	font-family: "Montserrat";
	src: url(https://diversity-company.de/wp-content/themes/blim-diversity-company/assets/css/../fonts/montserrat-regular.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url(https://diversity-company.de/wp-content/themes/blim-diversity-company/assets/css/../fonts/montserrat-medium.woff2) format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url(https://diversity-company.de/wp-content/themes/blim-diversity-company/assets/css/../fonts/montserrat-bold.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url(https://diversity-company.de/wp-content/themes/blim-diversity-company/assets/css/../fonts/montserrat-regular-italic.woff2) format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url(https://diversity-company.de/wp-content/themes/blim-diversity-company/assets/css/../fonts/montserrat-medium-italic.woff2) format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

/* ----------------------------------------------------------------------
 * 2. Grundlagen
 * ---------------------------------------------------------------------- */

body {
	font-family: var(--bs-body-font-family);
	font-weight: var(--dc-gewicht-book);
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	color: var(--dc-schwarz);
	/* #f0f0f0, siehe tokens.css - der Entwurf hat keinen weissen Grund. */
	background-color: var(--dc-grau);
}

/* ----------------------------------------------------------------------
 * 3. Ueberschriften (Figma-Text-Styles)
 * ---------------------------------------------------------------------- */

/*
 * Deutsche Komposita wie "Hinweisgeberschutzgesetz" sind laenger als eine
 * Spalte auf einem 390 breiten Schirm. Ohne diese Regel schiebt so ein Wort
 * die ganze Seite waagerecht auf. break-word greift erst, wenn das Wort
 * sonst nicht passt - normale Ueberschriften bleiben unangetastet.
 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	overflow-wrap: break-word;
}

/*
 * Auf sehr schmalen Schirmen duerfen auch lange Woerter im Fliesstext
 * umbrechen.
 *
 * WCAG 1.4.10 verlangt, dass sich der Inhalt bis 320 Pixel Breite ohne
 * waagerechtes Scrollen umbricht. Deutsche Komposita wie
 * "Diversity-Manager*innen" sind laenger als eine Kachel auf 320 und
 * schoben dort die Seite auf. Ueberschriften regelt die Regel darunter
 * schon laenger; hier kommt der uebrige Text dazu.
 */
@media (max-width: 575.98px) {

	body {
		overflow-wrap: break-word;
	}
}

/*
 * Auf schmalen Schirmen mit Trennstrich umbrechen statt mitten im Wort.
 *
 * "Organisationen" passt in der Hero-Ueberschrift bei 390 nicht in eine
 * Zeile. Ohne diese Regel steht dort "Organisation" und in der naechsten
 * Zeile "en" - mit ihr "Organisatio-" und "nen".
 *
 * Die Silbentrennung braucht die Sprache am Dokument; WordPress setzt
 * lang="de-DE" am <html>. Nur unterhalb von 576, weil auf breiten Schirmen
 * die Zeilen ohnehin an Wortgrenzen umbrechen.
 */
@media (max-width: 575.98px) {

	h1, h2, h3, h4, h5, h6,
	.h1, .h2, .h3, .h4, .h5, .h6 {
		hyphens: auto;
	}
}

h1, .h1 {
	font-size: var(--dc-fs-h1);
	line-height: var(--dc-lh-h1);
	font-weight: var(--dc-gewicht-bold);
}

h2, .h2 {
	font-size: var(--dc-fs-h2);
	line-height: var(--dc-lh-h2);
	font-weight: var(--dc-gewicht-bold);
}

/* h3 ist im Design der einzige Titel in Medium, nicht in Bold. */
h3, .h3 {
	font-size: var(--dc-fs-h3);
	line-height: var(--dc-lh-h3);
	font-weight: var(--dc-gewicht-medium);
}

h4, .h4 {
	font-size: var(--dc-fs-h4);
	line-height: var(--dc-lh-h4);
	font-weight: var(--dc-gewicht-bold);
}

/* h5 ist im Design bewusst NICHT fett — gleiche Groesse wie h4, aber Book. */
h5, .h5 {
	font-size: var(--dc-fs-h5);
	line-height: var(--dc-lh-h5);
	font-weight: var(--dc-gewicht-book);
}

h6, .h6 {
	font-size: var(--dc-fs-h6);
	line-height: var(--dc-lh-h6);
	font-weight: var(--dc-gewicht-bold);
}

.dc-fussnote {
	font-size: var(--dc-fs-fussnote);
	line-height: var(--dc-lh-fussnote);
}

/* ----------------------------------------------------------------------
 * 4. Container
 *
 * Figma arbeitet mit einem festen Inhaltsbereich von 1320px. Bootstrap
 * bringt keinen 1320er-Container mit, deshalb dieser eine eigene.
 * ---------------------------------------------------------------------- */

.dc-container {
	width: 100%;
	max-width: calc(var(--dc-container) + 2 * var(--dc-rand-mobil));
	margin-inline: auto;
	padding-inline: var(--dc-rand-mobil);
}

/* ----------------------------------------------------------------------
 * 5. Buttons
 *
 * Zwei Varianten aus Figma: gelb (primaer) und grau (sekundaer).
 * Beide mit schwarzer Kontur und hartem Versatzschatten, ohne Rundung.
 * ---------------------------------------------------------------------- */

.dc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--dc-button-padding);
	border: var(--dc-kontur);
	box-shadow: var(--dc-schatten);
	font-weight: var(--dc-gewicht-bold);
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	color: var(--dc-schwarz);
	text-decoration: none;
	cursor: pointer;
}

.dc-btn--gelb {
	background-color: var(--dc-gelb);
}

.dc-btn--grau {
	background-color: var(--dc-grau);
}

.dc-btn:hover,
.dc-btn:focus-visible {
	color: var(--dc-schwarz);
	box-shadow: none;
	transform: translate(-3px, 3px);
}

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

/*
 * AUF SCHMALEN SCHIRMEN GEHT JEDER KNOPF UEBER DIE VOLLE BREITE (DC-77).
 *
 * Der Kunde am 11.09.2026 zum Stoererknopf: "gilt auch fuer andere
 * Buttons." Und am 13.09.2026: "laesst sich das auf alle Buttons
 * vererben?" - ja, und hierher gehoert es.
 *
 * Bis dahin stand die Regel im Stoerer und galt nur dort. Ein Knopf, der
 * die Breite fuellt, ist auf dem Handy leichter zu treffen und bildet eine
 * klare Zeile; nebeneinander stehende Knoepfe werden untereinander zu
 * einer Liste. Das ist auf 390 Pixeln fast immer die bessere Antwort.
 *
 * AUSGENOMMEN: Knoepfe, die in einer Reihe mit anderen Bedienelementen
 * stehen und dort ihre Breite brauchen - der Filterknopf der
 * Angebotsliste etwa. Die stellen sich in ihrem eigenen Block zurueck;
 * eine Ausnahme steht besser dort, wo man sie sucht, als hier in einer
 * wachsenden Liste.
 *
 * inline-flex bleibt inline-flex: display: block wuerde die Zentrierung
 * ueber justify-content verlieren. "width: 100%" reicht.
 */
@media (max-width: 767.98px) {

	.dc-btn {
		width: 100%;
	}
}

/* ----------------------------------------------------------------------
 * 6. Fokus
 *
 * Sichtbarer Fokus ist Pflicht — nicht entfernen.
 * ---------------------------------------------------------------------- */

:focus-visible {
	outline: 3px solid var(--dc-schwarz);
	outline-offset: 2px;
}


/* ----------------------------------------------------------------------
 * 5b. Weiterlesen-Link
 *
 * Text mit Pfeil auf einer Unterlinie. Kommt in sieben Bloecken und in
 * allen fuenf Detailseiten-Templates vor.
 *
 * ACHTUNG, HIER LAG EIN FEHLER: Diese Regeln standen frueher in
 * blocks/leistungen/style.css. Block-CSS wird aber nur geladen, wenn der
 * Block auf der Seite steht - auf jeder Seite ohne Leistungen-Block war
 * der Link deshalb unformatiert und damit browserblau. Betroffen waren
 * sechs Seiten und saemtliche Detailseiten.
 *
 * Gemeinsam genutzte Bauteile gehoeren hierher, nicht in einen Block.
 * ---------------------------------------------------------------------- */

.dc-weiterlesen {
	/*
	 * ACHTUNG, HIER LAG EIN FEHLER - "position: relative" nicht entfernen.
	 *
	 * Im Link steckt ein <span class="visually-hidden"> mit dem Titel, damit
	 * "Mehr Infos" auch vorgelesen eindeutig bleibt. Diese Bootstrap-Klasse
	 * arbeitet mit "position: absolute". Ohne einen positionierten Vorfahren
	 * ist der Bezugsrahmen dafuer die ganze Seite - und weil ein absolut
	 * gesetztes Element nur von Vorfahren aus SEINEM Bezugsrahmen
	 * beschnitten wird, entkam der Span den waagerechten Kartenreihen.
	 *
	 * Auf "Trainings & Keynotes" stand er dadurch bei x=2123 und machte die
	 * Seite 204 breiter als das Fenster: Sie liess sich am Schreibtisch
	 * seitlich schieben, ohne dass etwas zu sehen war.
	 */
	position: relative;

	display: inline-grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 4px 12px;
	width: fit-content;
	padding-block-end: 6px;
	border-block-end: 1px solid var(--dc-schwarz);
	color: var(--dc-schwarz);
	text-decoration: none;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
}

.dc-weiterlesen__pfeil {
	display: block;
	width: 21px;
	height: 8px;
}

.dc-weiterlesen:hover,
.dc-weiterlesen:focus-visible {
	color: var(--dc-schwarz);
}

.dc-weiterlesen:hover .dc-weiterlesen__text,
.dc-weiterlesen:focus-visible .dc-weiterlesen__text {
	text-decoration: underline;
}

/* ----------------------------------------------------------------------
 * 5c. Anklickbare Kachel (DC-9)
 *
 * Der Kunde am 07.09.2026: "In den meisten Elementen, bei denen es einen
 * Schriftzug 'weiterlesen' gibt, funktioniert die Ueberschrift nicht als
 * Link, z.B. bei Keynotes oder bei den Bestsellern. Fuer mich ist das
 * nicht intuitiv, ich will auf den Titel oder die ganze Kachel klicken
 * koennen."
 *
 * SO GEHT ES: Die Kachel bekommt .dc-kachel-klick, EIN Link darin
 * .dc-flaechenlink. Dessen Pseudoelement legt sich ueber die ganze Kachel.
 * Es bleibt bei einem einzigen Link je Ziel - kein zweiter, unsichtbarer
 * Link, den Screenreader noch einmal vorlesen wuerden. Das Muster ist
 * Bootstraps .stretched-link, hier mit eigenen Klassen, weil der
 * Flaechenlink zusaetzlich seine "position" abgeben muss.
 *
 * NUR EIN FLAECHENLINK JE KACHEL. Zwei ueberdeckten einander, und welcher
 * gewinnt, haengt an der Reihenfolge im Quelltext.
 *
 * WARUM position: static AM FLAECHENLINK. .dc-weiterlesen steht auf
 * "relative" (siehe oben, sonst entkommt der unsichtbare Zusatz der
 * Kartenreihe). Genau das macht die Flaeche kaputt: Das Pseudoelement
 * bezoege sich dann auf den Link selbst und waere nur so gross wie er.
 * Der Schutz geht dabei nicht verloren - der Bezugsrahmen ist jetzt die
 * Kachel, und die ist eine Ebene weiter aussen genauso geschlossen.
 * ---------------------------------------------------------------------- */

.dc-kachel-klick {
	position: relative;
}

.dc-kachel-klick .dc-flaechenlink {
	position: static;
}

.dc-kachel-klick .dc-flaechenlink::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

/*
 * Der Titel bleibt oben auf der Flaeche. Ohne das schluckt sie ihn: Ein
 * absolut gesetztes Pseudoelement liegt ueber allem, was nicht selbst
 * positioniert ist.
 *
 * NUR UEBERSCHRIFTEN, NICHT "a" ALLGEMEIN. Eine Regel auf jeden Link in
 * der Kachel wuerde die vorhandene Positionierung ueberschreiben - in der
 * Angebotsliste steht "Mehr Infos" absolut oben rechts (0,1,0), eine
 * Regel mit .dc-kachel-klick davor (0,2,0) haette ihn in den Fluss
 * zurueckfallen lassen. Was sonst noch anklickbar bleiben muss, hebt der
 * jeweilige Block in seinem eigenen CSS an.
 */
.dc-kachel-klick h2 a,
.dc-kachel-klick h3 a,
.dc-kachel-klick h4 a {
	position: relative;
	z-index: 1;
}

/*
 * Rueckmeldung fuer die ganze Kachel: Wer irgendwo darauf zeigt, sieht am
 * Titel und am Weiterlesen-Link, dass hier etwas passiert.
 */
.dc-kachel-klick:hover .dc-weiterlesen__text,
.dc-kachel-klick:focus-within .dc-weiterlesen__text {
	text-decoration: underline;
}

/*
 * Der Fokusrahmen gehoert um die ganze Kachel, nicht um den flachen,
 * unsichtbaren Kasten des Flaechenlinks.
 */
.dc-kachel-klick:has( .dc-flaechenlink:focus-visible ) {
	outline: 3px solid var(--dc-schwarz);
	outline-offset: 2px;
}

.dc-kachel-klick .dc-flaechenlink:focus-visible {
	outline: none;
}

/*
 * Die Titel der Kacheln sind Links, sollen aber aussehen wie Titel.
 */
.dc-kachel-klick h2 a,
.dc-kachel-klick h3 a,
.dc-kachel-klick h4 a {
	color: inherit;
	text-decoration: none;
}

.dc-kachel-klick:hover h2 a,
.dc-kachel-klick:hover h3 a,
.dc-kachel-klick:hover h4 a {
	text-decoration: underline;
}

/* ----------------------------------------------------------------------
 * 6a. Navigationspfeile der Slider
 *
 * Figma: zwei Instanzen "Pfeil", je 40 x 40 mit schwarzer Kontur,
 * rechtsbuendig an der Containerkante, auf Hoehe der Ueberschrift
 * (Startseite_Zufriedene_Kund*innen: x=1265 und x=1280 bei Containerbreite
 * 1320, also buendig mit dem rechten Rand).
 *
 * Das Markup steht in templates/slider-pfeile.php, das Verhalten in
 * assets/js/slider.js.
 * ---------------------------------------------------------------------- */

.dc-slider-kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--dc-abstand-element);
}

.dc-pfeile {
	display: flex;
	flex-shrink: 0;
	/*
	 * 15, nicht 0.
	 *
	 * ACHTUNG, HIER STAND ETWAS ANDERES: "die beiden Kaesten stossen
	 * aneinander, keine Luecke". Nachgemessen am Entwurfsexport
	 * (Trainings_und_Keynotes_Unsere_Bestseller): zwischen den beiden
	 * Kaesten liegen 15. Das gilt fuer alle sechs Slider, weil sie
	 * dieselben Pfeile aus templates/slider-pfeile.php benutzen.
	 */
	gap: 15px;   /* Figma */
}

.dc-pfeil {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;    /* Figma */
	height: 40px;
	padding: 0;
	border: var(--dc-kontur);
	background: none;
	color: var(--dc-schwarz);
	cursor: pointer;
}

/* Die beiden Kaesten teilen sich eine Kontur, sonst waere sie doppelt. */
/*
 * ENTFALLEN: border-inline-start: 0 am zweiten Pfeil.
 *
 * Die Regel gehoerte zu den aneinanderstossenden Kaesten - ohne sie stand
 * dort eine doppelte Linie. Seit die Kaesten 15 auseinanderliegen fehlte
 * dem rechten dadurch die linke Kante, der Kasten sah aufgeschnitten aus.
 */

.dc-pfeil:hover:not(:disabled),
.dc-pfeil:focus-visible:not(:disabled) {
	background-color: var(--dc-gelb);
}

/*
 * Am Anfang beziehungsweise Ende der Reihe. Der Pfeil bleibt sichtbar,
 * damit die Leiste nicht springt - er ist nur erkennbar abgeschaltet.
 */
.dc-pfeil:disabled {
	opacity: 0.35;
	cursor: default;
}

.dc-pfeil svg {
	display: block;
}

/*
 * Der Zaehler "2 / 6" neben der Ueberschrift.
 *
 * Nur auf dem Telefon sichtbar, wo die Pfeile aus sind - am Rechner sagen
 * die Pfeile bereits, dass es weitergeht, und der Entwurf zeigt dort keinen
 * Zaehler. Gefuellt wird er in slider.js.
 *
 * tabular-nums: Ohne das springt die Zeile beim Wechsel von "9 / 14" auf
 * "10 / 14", weil die Ziffern verschieden breit sind.
 */
.dc-slider-zaehler {
	display: none;
	margin: 0;
	align-self: center;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	font-weight: var(--dc-gewicht-bold);
	color: var(--dc-schwarz);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {

	/*
	 * Auf dem Telefon wird gewischt. Die Pfeile waeren dort nur zwei
	 * kleine Ziele, die Platz neben der Ueberschrift wegnehmen.
	 *
	 * AUSGEBLENDET WIRD JETZT DER EINZELNE PFEIL, NICHT DIE GANZE LEISTE:
	 * In der Leiste steht seit dem 13.09.2026 auch der Zaehler, und der
	 * soll genau hier sichtbar sein.
	 */
	.dc-pfeil {
		display: none;
	}

	.dc-slider-zaehler {
		display: block;
	}
}

/*
 * Keine Scrollleiste in den Reihen.
 *
 * Die Reihen bleiben scrollbar - nur die Leiste selbst wird ausgeblendet.
 * Bedient werden sie ueber die Pfeile, per Wischen, per Trackpad und per
 * Tastatur (die Reihen tragen tabindex="0").
 *
 * BEIM ANLEGEN EINER NEUEN REIHE hier ergaenzen. Bewusst als Liste und
 * nicht ueber eine Sammelklasse: So sieht man an einer Stelle, welche
 * Reihen es ueberhaupt gibt.
 */
.dc-stimmen__reihe,
.dc-angebote__reihe,
.dc-personen__reihe,
.dc-presse__karten,
.dc-publikationen__liste,
.dc-beitraege__liste,
.dc-dimensionen__reihe,
.dc-kurse__liste {
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* alter Edge */
}

.dc-stimmen__reihe::-webkit-scrollbar,
.dc-angebote__reihe::-webkit-scrollbar,
.dc-personen__reihe::-webkit-scrollbar,
.dc-presse__karten::-webkit-scrollbar,
.dc-publikationen__liste::-webkit-scrollbar,
.dc-beitraege__liste::-webkit-scrollbar,
.dc-dimensionen__reihe::-webkit-scrollbar,
.dc-kurse__liste::-webkit-scrollbar {
	display: none;                /* Chrome, Safari */
}

/*
 * DIE REIHEN LAUFEN AUF DEM TELEFON RANDLOS AUS DEM BILD
 *
 * Der Kunde am 13.09.2026: "Wie laesst sich noch besser bemerken, dass der
 * Slider mehrere Elemente hat?"
 *
 * DC-78 hatte dafuer die Karte auf 88 Prozent gesetzt, damit rechts ein
 * Streifen der naechsten steht. Nachgemessen auf der Stage bei 360:
 *
 *   E-Learnings   Reihe 265, Karte 233, sichtbar  12
 *   Presse        Reihe 265, Karte 233, sichtbar  12
 *   Beitraege     Reihe 345, Karte 233, sichtbar  52
 *
 * 12 Pixel sind 4,5 Prozent der Reihe - das sieht niemand. Der Unterschied
 * liegt nicht an den 88 Prozent, sondern daran, dass die Reihe der
 * Beitraege den Seitenrand als eigenen INNENabstand traegt und deshalb bis
 * zur Fensterkante reicht. Die anderen Reihen enden am Containerrand, und
 * dahinter ist Schluss.
 *
 * Diese Regel holt das nach, ohne das Markup anzufassen: Der Seitenrand
 * wird als negativer Aussenabstand zurueckgenommen und als gleich grosser
 * Innenabstand wieder hineingegeben. Die Karte bleibt damit exakt so breit
 * wie bisher - 88 Prozent beziehen sich auf den Inhaltsbereich, und der
 * aendert sich nicht -, die Reihe reicht aber bis zur Fensterkante.
 *
 * scroll-padding-inline-start haelt die einrastende Karte an derselben
 * Kante wie die Ueberschrift darueber.
 *
 * .dc-beitraege__liste und .dc-dimensionen__reihe fehlen hier: Die tragen
 * ihren Innenabstand schon selbst.
 */
@media (max-width: 767.98px) {

	/*
	 * ZWEI GRUPPEN, ZWEI RECHNUNGEN - das ist kein Schoenheitsfehler.
	 *
	 * Stimmen, Angebote, Presse und Publikationen setzen ihre Breite
	 * selbst ("width: min( var(--dc-container), 100% - 2 * Rand )" plus
	 * margin-inline: auto) und stehen direkt in der Section. Bei ihnen
	 * genuegt die volle Breite; ein negativer Aussenabstand wuerde sie nur
	 * nach links schieben, weil die Breite dabei nicht mitwaechst - genau
	 * das ist beim ersten Anlauf passiert: Reihe l=-40 w=265 statt
	 * l=0 w=345.
	 */
	.dc-stimmen__reihe,
	.dc-angebote__reihe,
	.dc-presse__karten,
	.dc-publikationen__liste {
		width: 100%;
		margin-inline: 0;
		padding-inline: var(--dc-rand-mobil);
		scroll-padding-inline-start: var(--dc-rand-mobil);
	}

	/*
	 * Personen und E-Learnings stehen dagegen INNERHALB von .dc-container
	 * und haben keine eigene Breite. Sie muessen den Rand des Containers
	 * erst zurueckholen, bevor sie ihn selbst setzen.
	 */
	.dc-personen__reihe,
	.dc-kurse__liste {
		margin-inline: calc( var(--dc-rand-mobil) * -1 );
		padding-inline: var(--dc-rand-mobil);
		scroll-padding-inline-start: var(--dc-rand-mobil);
	}
}

/* ----------------------------------------------------------------------
 * 6b. Abstand zwischen Abschnitten
 *
 * DIE EINZIGE STELLE, an der der senkrechte Rhythmus steht. Figma misst
 * zwischen allen Abschnitten der Startseite 100 Pixel.
 *
 * WARUM HIER UND NICHT IM BLOCK: Setzt jeder Block seinen eigenen
 * Innenabstand oben und unten, addieren sich die Abstaende zweier
 * benachbarter Bloecke - aus 100 werden 200. Genau das war vorher der
 * Fall. Ein margin-top am Folgeabschnitt kann sich dagegen nicht
 * verdoppeln.
 *
 * Wer den Rhythmus aendern will, aendert --dc-abstand-section in
 * tokens.css. Bloecke fassen ihren Aussenabstand nicht an.
 * ---------------------------------------------------------------------- */

main section + section {
	margin-block-start: var(--dc-abstand-section);
}

/*
 * Ausnahme Stoerer: Er gehoert im Entwurf zum Band darueber und sitzt
 * dicht darunter (Figma Muster_Keynote: 60 statt 100).
 */
main section + section.dc-stoerer {
	margin-block-start: 60px;
}

/*
 * Ausnahme Terminbuchung: Auf der Kontaktseite (1013:1313) liegen zwischen
 * dem Absenden-Knopf des Formulars (endet bei 1028) und der Ueberschrift
 * ueber dem Kalender (1168) 140 statt der ueblichen 100.
 */
main section + section.dc-termin {
	margin-block-start: 140px;   /* Figma */
}

/*
 * Ausnahme Kacheln mit Initial: Sie gehoeren im Entwurf (Ueber uns,
 * 3005:586) zur Ueberschrift und Einleitung darueber - alles ein Abschnitt
 * auf einem Band. Der Abstand von 25 kommt als Innenabstand aus
 * blocks/initial-kacheln/style.css, damit das Band durchlaeuft; hier bleibt
 * deshalb nichts uebrig.
 */
main section + section.dc-initial {
	margin-block-start: 0;
}

/* ----------------------------------------------------------------------
 * 7. Farbige Section-Baender
 *
 * Im Design laufen die Baender ueber die volle Fensterbreite, der Inhalt
 * darin bleibt im 1320er-Container.
 * ---------------------------------------------------------------------- */

.dc-band {
	padding-block: var(--dc-abstand-section);
}

.dc-band--gelb {
	background-color: var(--dc-gelb);
}

.dc-band--grau {
	background-color: var(--dc-grau);
}

/* ----------------------------------------------------------------------
 * 8. Kachel
 *
 * Karten-Grundform des Designs: grauer Grund, schwarze Kontur, Versatzschatten.
 * ---------------------------------------------------------------------- */

.dc-kachel {
	background-color: var(--dc-grau);
	border: var(--dc-kontur);
	box-shadow: var(--dc-schatten);
	padding: var(--dc-abstand-element);
}

/* ----------------------------------------------------------------------
 * 9. Formulare aus WS Form
 *
 * Im Entwurf: schwarze Kontur, keine Rundung, weisser Grund; nur der
 * Absenden-Knopf hat den Versatzschatten.
 *
 * UEBER WS-FORMS EIGENE VARIABLEN, NICHT UEBER EIGENE REGELN: WS Form
 * bringt eine vollstaendige Gestaltung mit und laedt sie NACH dem Theme.
 * Eigene Regeln verlieren deshalb - der Senden-Knopf blieb blau, obwohl im
 * Block "background-color: var(--dc-gelb)" stand. Hier werden stattdessen
 * die Variablen gesetzt, aus denen WS Form selbst seine Farben nimmt. Damit
 * bleibt das Plugin zustaendig und ein Update ueberschreibt nichts.
 *
 * WARUM IN base.css UND NICHT IM BLOCK: Es gibt drei Stellen mit Formularen
 * - die Kontaktseite, den Kontaktabschnitt der Startseite und den
 * Newsletter im Footer. Je Block gepflegt waere dieselbe Liste dreimal da.
 *
 * Die Namen stammen aus dem Plugin:
 *   grep -r "\-\-wsf-field-" wp-content/plugins/ws-form-pro/public/css
 * ---------------------------------------------------------------------- */

.wsf-form {

	/*
	 * Masse aus dem Entwurf (Kontakt 1013:1313). Die Werte selbst stehen in
	 * tokens.css, Abschnitt 5c - hier werden sie nur an die Namen des
	 * Plugins gereicht.
	 *
	 * Die Feldhoehe entsteht bei WS Form aus Zeilenhoehe + zweimal
	 * Innenabstand + zweimal Kontur. Deshalb steht hier keine Hoehe,
	 * sondern der Innenabstand, der sie ergibt.
	 */
	--wsf-field-line-height: var(--dc-lh-text);
	--wsf-field-font-size: var(--dc-fs-text);
	--wsf-field-padding-vertical: var(--dc-feld-padding-y);
	--wsf-field-padding-horizontal: var(--dc-feld-padding-x);
	--wsf-field-label-font-size: var(--dc-fs-text);
	--wsf-field-label-line-height: var(--dc-lh-text);
	--wsf-field-label-gap: var(--dc-feld-label-abstand);
	--wsf-form-grid-gap: var(--dc-feld-spaltenabstand);
	--wsf-field-checkbox-size: var(--dc-feld-haken);
	--wsf-field-checkbox-gap-horizontal: var(--dc-feld-haken-abstand);
	--wsf-field-button-padding: var(--dc-button-padding);
	--wsf-field-button-line-height: var(--dc-lh-text);
	--wsf-field-button-font-size: var(--dc-fs-text);

	/*
	 * Eingabefelder
	 *
	 * OHNE EIGENE FUELLUNG (DC-19). Hier stand --dc-weiss. Ein Pixelscan
	 * der Entwurfsexporte zeigt aber ueberall dieselbe Farbe INNEN wie
	 * AUSSEN, nur die Kontur trennt:
	 *
	 *   Startseite (3001:1240)   Feld (240,240,240), Grund (240,240,240)
	 *   Kontaktseite (3004:2500) Feld (240,240,240), Grund (240,240,240)
	 *   Newsletter im gelben Band  Feld (248,215,74), Band (248,215,74)
	 *
	 * "transparent" statt --dc-grau, weil dasselbe Formular auf grauem UND
	 * auf gelbem Grund steht. Ein fester Wert waere im Band ein grauer
	 * Kasten.
	 */
	--wsf-field-color-background: transparent;
	--wsf-field-color: var(--dc-schwarz);
	--wsf-field-border-color: var(--dc-schwarz);
	--wsf-field-border-color-hover: var(--dc-schwarz);
	--wsf-field-border-color-focus: var(--dc-schwarz);
	--wsf-field-border-width: 1px;
	--wsf-field-border-radius: 0;
	--wsf-field-box-shadow: none;

	/* Knoepfe */
	--wsf-field-button-color-background: var(--dc-gelb);
	--wsf-field-button-color-background-hover: var(--dc-gelb);
	--wsf-field-button-color-background-focus: var(--dc-gelb);
	--wsf-field-button-color: var(--dc-schwarz);
	--wsf-field-button-color-hover: var(--dc-schwarz);
	--wsf-field-button-color-focus: var(--dc-schwarz);
	--wsf-field-button-border-color: var(--dc-schwarz);
	--wsf-field-button-border-color-hover: var(--dc-schwarz);
	--wsf-field-button-border-color-focus: var(--dc-schwarz);
	--wsf-field-button-border-width: 1px;
	--wsf-field-button-border-radius: 0;
	--wsf-field-button-font-weight: var(--dc-gewicht-bold);

	--wsf-field-button-primary-color-background: var(--dc-gelb);
	--wsf-field-button-primary-color-background-hover: var(--dc-gelb);
	--wsf-field-button-primary-color-background-focus: var(--dc-gelb);
	--wsf-field-button-primary-color: var(--dc-schwarz);
	--wsf-field-button-primary-color-hover: var(--dc-schwarz);
	--wsf-field-button-primary-color-focus: var(--dc-schwarz);
	--wsf-field-button-primary-border-color: var(--dc-schwarz);
	--wsf-field-button-primary-border-color-hover: var(--dc-schwarz);
	--wsf-field-button-primary-border-color-focus: var(--dc-schwarz);
}

/*
 * Den Versatzschatten kennt WS Form nicht - dafuer gibt es keine Variable.
 * Die Klassen im Selektor sind noetig, um an die Regel des Plugins
 * heranzukommen.
 */
.wsf-form button.wsf-button {
	box-shadow: var(--dc-schatten);
}

.wsf-form button.wsf-button:hover {
	box-shadow: none;
	transform: translate(-3px, 3px);
}

/*
 * Zeilenabstand.
 *
 * WS Form nimmt fuer Spalten und Zeilen dieselbe Variable. Sie steht auf
 * 20, weil die Spalten das brauchen; zwischen zwei Zeilen sind es im
 * Entwurf aber 30. Die dritte Klasse im Selektor ist noetig, um an die
 * Regel des Plugins heranzukommen - es laedt nach dem Theme.
 */
.wsf-form.wsf-form-canvas .wsf-field-wrapper {
	margin-bottom: var(--dc-feld-zeilenabstand);
}

/*
 * Hinter der letzten Zeile steht nichts mehr - dort faellt der Abstand weg,
 * sonst waere das Formular 30 zu hoch.
 *
 * ACHTUNG, HIER STAND .wsf-bottom: Diese Klasse markiert NICHT die letzte
 * Zeile, sondern "unten ausrichten" (align-self: flex-end). Der
 * Senden-Knopf im Newsletter traegt sie. Ohne seinen Abstand war seine
 * Zeile 50 hoch, die Feldzeile daneben 80 - und flex-end schob den Knopf
 * um genau diese 30 nach unten, wo er das Feld ueberlappte.
 */
/*
 * Vor dem Absenden-Knopf stehen im Entwurf 50 statt 30: Das Ankreuzfeld
 * endet bei 928, der Knopf beginnt bei 978.
 */
.wsf-form.wsf-form-canvas .wsf-field-wrapper[data-type="checkbox"] {
	margin-bottom: 50px;   /* Figma */
}

/*
 * Hinter der letzten Zeile steht nichts mehr - dort faellt der Abstand weg,
 * sonst waere das Formular zu hoch. Die Regel steht NACH der des
 * Ankreuzfeldes: Im Newsletter ist das Ankreuzfeld die letzte Zeile, und
 * bei gleicher Spezifitaet gewinnt die spaetere.
 *
 * ACHTUNG, HIER STAND .wsf-bottom: Diese Klasse markiert NICHT die letzte
 * Zeile, sondern "unten ausrichten" (align-self: flex-end). Der
 * Senden-Knopf im Newsletter traegt sie. Ohne seinen Abstand war seine
 * Zeile 50 hoch, die Feldzeile daneben 80 - und flex-end schob den Knopf
 * um genau diese 30 nach unten, wo er das Feld ueberlappte.
 */
.wsf-form.wsf-form-canvas .wsf-field-wrapper:last-child {
	margin-bottom: 0;
}

/*
 * Der Zustimmungssatz neben dem Ankreuzfeld ist im Entwurf eine Fussnote
 * (12/13,5), nicht Fliesstext. Ohne diese Regel erbt er die Groesse der
 * Feldbeschriftungen und wird drei Zeilen zu hoch.
 */
.wsf-form input[type="checkbox"].wsf-field + label.wsf-label {
	font-size: var(--dc-fs-fussnote);
	line-height: var(--dc-lh-fussnote);
}

/*
 * Pflichtfeld-Sternchen.
 *
 * Im Entwurf steht das Sternchen IN der Beschriftung: "Vorname*:", nicht
 * "Vorname *". Die Beschriftungen sind deshalb so benannt
 * (bin/inhalte/ws-formulare.php), und der Zusatz, den WS Form von sich aus
 * anhaengt, entfaellt - sonst stuende dort zweimal ein Stern.
 *
 * FUER VORLESENDE BENUTZUNG AENDERT SICH NICHTS: Pflichtfelder tragen
 * weiterhin das Attribut required am Eingabefeld, und genau daraus liest
 * ein Screenreader die Pflichtangabe - nicht aus dem Sternchen.
 */
.wsf-form .wsf-label .wsf-required-wrapper {
	display: none;
}

/*
 * Beschriftung IM Feld - so gezeichnet im Newsletter-Kasten der
 * Kontaktseite und im Kontaktabschnitt der Startseite. WS Form bringt das
 * als Feldeinstellung "Label Position: Inside" mit; hier bekommt sie nur
 * die Farbe aus dem Entwurf.
 */
/*
 * SIE VERHAELT SICH WIE EIN PLATZHALTER (DC-19).
 *
 * WS Form baut die Beschriftung im Feld nach Bootstraps Muster
 * "form-floating": Beim Tippen wird sie verkleinert auf die Rahmenlinie
 * geschoben und dort in einen weissen Kasten gelegt; bei der Auswahl
 * "Anfrage" steht sie von Anfang an dort. Der Entwurf (3001:1240)
 * zeichnet nichts dergleichen - dort steht schlichter Text IM Feld.
 *
 * WAS HIER ZUERST STAND UND NICHT FUNKTIONIERT HAT: die Beschriftung
 * unsichtbar zu machen und den Platzhalter uebernehmen zu lassen. Zum
 * Muster gehoert naemlich "::placeholder { color: transparent }" - nach
 * dem Ausblenden der Beschriftung waren die Felder schlicht leer. Der
 * Kunde hat es sofort gesehen: "Bei DC-19 fehlt noch die Beschriftung der
 * anderen Felder."
 *
 * DESHALB UMGEKEHRT: Die Beschriftung bleibt sichtbar und bekommt nur das
 * Schweben abgewoehnt - keine Verschiebung, kein weisser Kasten, die
 * Farbe eines Platzhalters. Sie verschwindet, sobald das Feld den Fokus
 * hat oder etwas darin steht. Das <label> bleibt dabei ein echtes
 * <label>; vorlesende Benutzung behaelt die Feldbeschriftung.
 *
 * ZUR MESSUNG: Bei Formularfeldern meldet getComputedStyle die Farben des
 * Bedienelements, nicht die aus dem Blatt - auch fuer ::placeholder und
 * fuer den Hintergrund. Diese Regeln sind deshalb im Bild geprueft, nicht
 * am Messwert.
 */
.wsf-form .wsf-label-position-inside label.wsf-label {
	color: var(--dc-feld-platzhalter);
	background-color: transparent;
	padding: 0;
	transform: none;
	inset-block-start: 11.5px;   /* Figma 3001:1240: Feld 45 hoch, Text 20 */
}

/*
 * Weg damit, sobald jemand tippt - genau wie ein Platzhalter.
 *
 * :placeholder-shown greift, weil WS Form den Feldern einen Platzhalter
 * mitgibt (bin/inhalte/ws-formulare.php). Eine Auswahl hat keinen; dort
 * steht der Text in der ersten Zeile, die Beschriftung ist immer
 * ueberfluessig.
 */
.wsf-form .wsf-label-position-inside:focus-within label.wsf-label,
.wsf-form .wsf-label-position-inside:has( .wsf-field:not(:placeholder-shown) ) label.wsf-label,
.wsf-form .wsf-label-position-inside:has( select.wsf-field ) label.wsf-label {
	opacity: 0;
}

/*
 * Die Auswahl hat keinen Platzhalter, sondern eine erste Zeile mit dem
 * Text "Anfrage". Solange die gewaehlt ist, soll sie so grau sein wie ein
 * Platzhalter - sobald etwas anderes gewaehlt ist, wieder schwarz.
 */
.wsf-form .wsf-label-position-inside select.wsf-field:has( option[value=""]:checked ) {
	color: var(--dc-feld-platzhalter);
}

/*
 * Die Hoehe des Nachrichtenfeldes steht NICHT hier: Sie ist je Entwurf
 * verschieden - 169 auf der Kontaktseite, 87 im Kontaktabschnitt der
 * Startseite - und deshalb im jeweiligen Block gesetzt. Die Zeilenzahl im
 * Formular (bin/inhalte/ws-formulare.php) ist nur der Rueckfall, falls das
 * Block-CSS einmal nicht laedt.
 */

/* ----------------------------------------------------------------------
 * 10. Hinweiskachel von Borlabs
 *
 * Wo eine Einbettung erst nach der Einwilligung laedt - heute der
 * HubSpot-Kalender auf der Kontaktseite - steht bis dahin diese Kachel.
 * Sie kommt in Borlabs' eigener Gestaltung: blauer Knopf, blaue Verweise,
 * gerundete Ecken. Auf der Kontaktseite ist das die einzige Stelle, an der
 * eine fremde Gestaltung sichtbar wird.
 *
 * UEBER BORLABS' EIGENE VARIABLEN, NICHT UEBER EIGENE REGELN - wie bei WS
 * Form in Abschnitt 9 und aus demselben Grund: Borlabs setzt seinen Knopf
 * mit "all: unset" auf null und baut ihn danach aus diesen Variablen
 * wieder auf. Eine eigene Regel muesste die Genauigkeit von
 * "body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn"
 * erreichen und wuerde beim naechsten Update daneben liegen.
 *
 * Die Variablen stehen hier auf dem Kasten selbst und nicht auf :root.
 * Borlabs schreibt seine eigenen Werte aus dem Backend in eine erzeugte
 * Datei auf :root; auf dem Kasten gesetzt gewinnen unsere - unabhaengig
 * davon, welche Datei zuerst geladen wird.
 *
 * NICHT ENTFERNEN, um "aufzuraeumen": Ohne die Kachel wuerde die
 * Einbettung ohne Einwilligung laden.
 * ---------------------------------------------------------------------- */

.brlbs-cmpnt-content-blocker {
	--content-blocker-background-color: var(--dc-weiss);
	--content-blocker-text-color: var(--dc-schwarz);

	--content-blocker-button-color: var(--dc-gelb);
	--content-blocker-button-color-hover: var(--dc-gelb);
	--content-blocker-button-text-color: var(--dc-schwarz);
	--content-blocker-button-text-color-hover: var(--dc-schwarz);

	/* Keine Rundung - siehe tokens.css, Abschnitt 2. */
	--content-blocker-button-border-radius-top-left: 0;
	--content-blocker-button-border-radius-top-right: 0;
	--content-blocker-button-border-radius-bottom-left: 0;
	--content-blocker-button-border-radius-bottom-right: 0;
	--content-blocker-border-radius-top-left: 0;
	--content-blocker-border-radius-top-right: 0;
	--content-blocker-border-radius-bottom-left: 0;
	--content-blocker-border-radius-bottom-right: 0;

	--content-blocker-link-color: var(--dc-schwarz);
	--content-blocker-link-color-hover: var(--dc-schwarz);
	--content-blocker-separator-color: var(--dc-schwarz);

	/*
	 * Schriftgroesse der Kachel. Borlabs rechnet Text UND Knopf aus dieser
	 * einen Variablen; sie steht hier auf dem Kasten und betrifft den
	 * Cookie-Dialog nicht.
	 */
	--dialog-font-size: 1rem;   /* 16px, wie Fliesstext */
}

/* Der Knopf steht mittig und nicht ueber die ganze Breite. */
.brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-buttons {
	display: flex;
	justify-content: center;
}

/* Der Hinweistext ist Fliesstext, nicht Kleingedrucktes. */
body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-preset-a .brlbs-cmpnt-cb-description {
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
}

/*
 * Kontur und Versatzschatten kennt Borlabs nicht - dafuer gibt es keine
 * Variable. Der Selektor ist so lang, weil die Regel des Plugins fast
 * genauso lang ist und "all: unset" enthaelt: Bei gleicher Genauigkeit
 * gewinnt sie, weil sie spaeter geladen wird. Die zusaetzliche Klasse
 * brlbs-cmpnt-cb-buttons gibt hier den Ausschlag.
 */
body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-buttons a.brlbs-cmpnt-cb-btn {
	width: max-content;
	max-width: 100%;
	padding: var(--dc-button-padding);
	border: var(--dc-kontur);
	box-shadow: var(--dc-schatten);
	font-family: var(--bs-body-font-family);
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
}

body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-buttons a.brlbs-cmpnt-cb-btn:hover {
	box-shadow: none;
	transform: translate(-3px, 3px);
}

/* ---------------------------------------------------------------------------
 * 9b. HUBSPOT-FORMULARE (seit 21.09.2026, DC-112)
 *
 * Bis dahin liefen die Formulare ueber WS Form; dessen Gestaltung steht im
 * Abschnitt darueber und bleibt vorerst stehen, bis das Plugin entfernt ist.
 *
 * HubSpot kennt keine CSS-Variablen wie WS Form. Die Werte muessen deshalb
 * direkt auf die Klassen des Dienstes - und mit !important, weil HubSpots
 * eigenes Stylesheet nach unserem geladen wird.
 *
 * DIE MASSE SIND DIESELBEN wie bei WS Form, aus tokens.css Abschnitt 5c.
 * Sie stammen aus dem Entwurf (Kontakt 1013:1313) und aendern sich durch
 * den Wechsel des Dienstes nicht.
 *
 * VIER STELLEN: Kontaktseite (Kontakt und Newsletter), Kontaktabschnitt der
 * Startseite, Newsletter im Footer. Deshalb hier und nicht im Block.
 * --------------------------------------------------------------------------- */

/*
 * Der Behaelter braucht eine Mindesthoehe. Vor der Einwilligung steht dort
 * die Platzhalterkachel von Borlabs, danach das Formular. Ohne Mindesthoehe
 * springt die Seite im Moment des Zustimmens - unter der Hand, die gerade
 * geklickt hat.
 */
.dc-hubspot-formular {
	min-height: 320px;   /* geschaetzt, nicht gemessen - nach dem Einbau pruefen */
	width: 100%;
}

/*
 * Die Zeile, die sagt, was hinter der Platzhalterkachel liegt.
 *
 * Nur sichtbar, solange Borlabs blockt. Ist das Formular geladen, waere
 * sie eine doppelte Ueberschrift - daneben steht ja schon "Schicken Sie
 * uns eine Nachricht".
 *
 * :has() statt einer Klasse am Container: Borlabs setzt den Blocker erst
 * beim Ausliefern hinein, davon weiss unser PHP nichts.
 */
.dc-hubspot-formular__hinweis {
	display: none;
}

.dc-hubspot-formular:has(.brlbs-cmpnt-content-blocker) .dc-hubspot-formular__hinweis {
	display: block;
	margin: 0 0 var(--dc-abstand-element);
	font-weight: var(--dc-gewicht-bold);
	color: var(--dc-schwarz);
}

/*
 * BESCHRIFTUNGEN NUR IM FELD (21.09.2026)
 *
 * Gewuenscht: keine Ueberschrift ueber dem Feld, die Beschriftung steht im
 * Feld selbst.
 *
 * NICHT display:none. Das Label bleibt im Markup und wird nur visuell
 * versteckt - sonst faende ein Screenreader kein beschriftetes Feld, und
 * beim Tippen verschwindet der Platzhalter, ohne dass etwas nachrueckt.
 * Bei einer Seite mit Barrierefreiheitswidget waere das die falsche Wahl.
 *
 * VORAUSSETZUNG: Die Felder brauchen in HubSpot einen Platzhalter. Der
 * kommt von dort, nicht aus dem CSS - ohne ihn stehen die Felder leer da.
 *
 * Ankreuzfelder sind ausgenommen: Dort IST das Label der sichtbare Text
 * daneben, etwa die Einwilligung zur Datenverarbeitung.
 */
.dc-hubspot-formular .hs-form-field > label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Ankreuzfelder behalten ihre sichtbare Beschriftung. */
.dc-hubspot-formular .hs-form-booleancheckbox label,
.dc-hubspot-formular .hs-form-checkbox label,
.dc-hubspot-formular .hs-form-radio label,
.dc-hubspot-formular .legal-consent-container label {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	color: var(--dc-schwarz);
}

/*
 * Eingabefelder
 *
 * OHNE EIGENE FUELLUNG, wie bei WS Form. Ein Pixelscan der
 * Entwurfsexporte zeigt ueberall dieselbe Farbe innen wie aussen, nur die
 * Kontur trennt. "transparent" statt eines festen Werts, weil dasselbe
 * Formular auf grauem UND auf gelbem Grund steht - im Band waere ein
 * grauer Kasten.
 */
.dc-hubspot-formular input[type="text"],
.dc-hubspot-formular input[type="email"],
.dc-hubspot-formular input[type="tel"],
.dc-hubspot-formular input[type="number"],
.dc-hubspot-formular textarea,
.dc-hubspot-formular select {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	background-color: transparent !important;
	color: var(--dc-schwarz) !important;
	border: 1px solid var(--dc-schwarz) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: var(--dc-feld-padding-y) var(--dc-feld-padding-x) !important;
	font-family: inherit !important;
	font-size: var(--dc-fs-text) !important;
	line-height: var(--dc-lh-text) !important;
}

.dc-hubspot-formular ::placeholder {
	color: var(--dc-feld-platzhalter);
	opacity: 1;
}

/* Zeilenabstand zwischen den Feldern: im Entwurf 30, nicht die 20 der Spalten. */
.dc-hubspot-formular .hs-form-field {
	margin-block-end: var(--dc-feld-zeilenabstand);
}

/* Ankreuzfelder */
.dc-hubspot-formular input[type="checkbox"],
.dc-hubspot-formular input[type="radio"] {
	width: var(--dc-feld-haken) !important;
	height: var(--dc-feld-haken) !important;
	margin-inline-end: var(--dc-feld-haken-abstand) !important;
	accent-color: var(--dc-schwarz);
}

/*
 * Der Absendeknopf, samt Versatzschatten wie bei den uebrigen Knoepfen.
 * HubSpot setzt ihn im Standard rund und blau.
 */
.dc-hubspot-formular input[type="submit"],
.dc-hubspot-formular .hs-button {
	background-color: var(--dc-gelb) !important;
	color: var(--dc-schwarz) !important;
	border: 1px solid var(--dc-schwarz) !important;
	border-radius: 0 !important;
	box-shadow: var(--dc-schatten) !important;
	padding: var(--dc-button-padding) !important;
	font-family: inherit !important;
	font-size: var(--dc-fs-text) !important;
	line-height: var(--dc-lh-text) !important;
	font-weight: var(--dc-gewicht-bold) !important;
	cursor: pointer;
	transition: none;
}

.dc-hubspot-formular input[type="submit"]:hover,
.dc-hubspot-formular .hs-button:hover {
	background-color: var(--dc-gelb) !important;
	color: var(--dc-schwarz) !important;
	box-shadow: none !important;
	transform: translate(-3px, 3px);
}

/* Fokus bleibt sichtbar - Barrierefreiheit geht vor Gestaltung. */
.dc-hubspot-formular :focus-visible {
	outline: 2px solid var(--dc-schwarz) !important;
	outline-offset: 2px;
}

/*
 * Fehlermeldungen und Pflichtfeld-Sternchen in der Hausschrift. HubSpot
 * setzt sie rot; das ist die einzige Farbe, die wir stehen lassen - eine
 * Fehlermeldung soll auffallen.
 */
.dc-hubspot-formular .hs-error-msg,
.dc-hubspot-formular .hs-form-required {
	font-family: inherit !important;
	font-size: var(--dc-fs-fussnote) !important;
}

/* Die Fusszeile von HubSpot braucht niemand. */
.dc-hubspot-formular .hs-form__virality-link,
.dc-hubspot-formular .legal-consent-container .hs-form-booleancheckbox-display > span {
	margin-inline-start: 0;
}

/* ---------------------------------------------------------------------------
 * reCAPTCHA-ABZEICHEN AUSBLENDEN (21.09.2026)
 *
 * Das schwebende Abzeichen unten rechts ueberdeckt auf dem Telefon den
 * Barrierefreiheitsknopf von OneTap.
 *
 * DAS DARF MAN - ABER NUR MIT HINWEIS. Google erlaubt das Ausblenden
 * ausdruecklich, wenn stattdessen im Formular ein Hinweis mit Links zu
 * Datenschutzerklaerung und Nutzungsbedingungen steht. Den setzt HubSpot
 * von selbst unter das Formular, sobald reCAPTCHA aktiv ist.
 *
 * visibility statt display: Das Abzeichen bleibt im Layout und
 * funktionsfaehig, es ist nur unsichtbar. Mit display:none bricht die
 * Pruefung in manchen Faellen ab.
 * --------------------------------------------------------------------------- */

.grecaptcha-badge {
	visibility: hidden;
}

/* Der Pflichthinweis bleibt sichtbar, nur kleiner gesetzt. */
.dc-hubspot-formular .hs-recaptcha-hint,
.dc-hubspot-formular .legal-consent-container p:last-child {
	font-size: var(--dc-fs-fussnote);
	line-height: var(--dc-lh-text);
}

/* ---- navigation.css ---- */
/*
 * navigation.css — Kopfbereich und Hauptnavigation
 * ================================================
 *
 * Figma: Navigation_Gross (539:822), zwei Zustaende.
 *   Default  — Logo links, Burger und "MENÜ" rechts
 *   Variant2 — Vollflaechen-Overlay in --dc-grau
 *
 * Die Mechanik (oeffnen, schliessen, ESC, Fokusfalle) macht Bootstrap
 * Offcanvas. Hier steht nur das Aussehen.
 */

/* ---------------------------------------------------------------------------
 * Kopfbereich, geschlossener Zustand
 *
 * Liegt ueber dem Hero-Bild, deshalb absolut positioniert und transparent.
 * --------------------------------------------------------------------------- */

.dc-header {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 1030;  /* wie Bootstrap --bs-zindex-fixed */
}

.dc-header__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-block-start: 70px;  /* Figma: Logo top 70 */

	/*
	 * MINDESTABSTAND ZWISCHEN LOGO UND MENUE-SCHALTER (DC-75).
	 *
	 * "space-between" verteilt nur, was uebrig ist - bleibt nichts uebrig,
	 * stossen die beiden aneinander. Genau das hat der Kunde am 13.09.2026
	 * gemeldet: "Logo laeuft, wenn sehr schmal, in das Menue-Icon hinein."
	 *
	 * Nachgemessen: bei 316 Fensterbreite endete der Schriftzug bei 212 und
	 * der Schalter begann bei 212 - null Abstand. Bei 276 war der Schriftzug
	 * von 60 auf 20 zusammengequetscht und beruehrte den Schalter weiter.
	 *
	 * Ein gap kann nicht unterschritten werden. Damit ist der Fall
	 * grundsaetzlich erledigt, unabhaengig von jeder Bildschirmbreite.
	 */
	gap: 16px;
}

.dc-header__logo {
	display: block;
	flex-shrink: 0;
	width: 178px;   /* Figma: 178x178 */
	max-width: 40vw;
}

.dc-header__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Menue-Schalter
 *
 * Der Burger ist bewusst asymmetrisch: obere und untere Linie sind nach
 * rechts eingerueckt, die mittlere nach links. Im geoeffneten Zustand
 * spiegelt sich das. Deshalb zwei getrennte SVG-Dateien statt einer.
 * --------------------------------------------------------------------------- */

.dc-menue-schalter {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--dc-schwarz);
}

.dc-menue-schalter img {
	display: block;
	width: 58px;   /* Figma: 58x33 */
	height: 33px;
}

.dc-menue-schalter span {
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	text-decoration: underline;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Overlay, geoeffneter Zustand
 *
 * Bootstrap bringt .offcanvas-top mit fester Hoehe. Hier wird daraus eine
 * ganzflaechige Ebene.
 * --------------------------------------------------------------------------- */

.dc-nav {
	/*
	 * Bootstrap gibt .offcanvas-top standardmaessig 30vh Hoehe. Diese Regel
	 * hat zwei Klassen und damit hoehere Spezifitaet als eine eigene Klasse -
	 * ein "height: 100%" hier wuerde verlieren. Deshalb ueber die dafuer
	 * vorgesehenen Bootstrap-Variablen, das ist der stabilere Weg.
	 */
	--bs-offcanvas-height: 100%;
	--bs-offcanvas-bg: var(--dc-grau);
	--bs-offcanvas-border-width: 0;
	--bs-offcanvas-padding-x: 0;
	--bs-offcanvas-padding-y: 0;
}

.dc-nav__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-block: 70px;
}

/* Kopfzeile im Overlay: Logo links, Sprachwahl und Schalter rechts */

.dc-nav__kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--dc-abstand-element);
}

.dc-nav__kopf-rechts {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 24px;
}

/* ---------------------------------------------------------------------------
 * Sprachwahl (WPML)
 *
 * Rendert nur, wenn WPML aktiv ist. Die aktive Sprache steht fett und
 * unterstrichen, die andere normal.
 * --------------------------------------------------------------------------- */

.dc-sprachen {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	text-transform: uppercase;
}

.dc-sprachen a {
	color: var(--dc-schwarz);
	text-decoration: none;
}

.dc-sprachen .is-aktiv a {
	font-weight: var(--dc-gewicht-bold);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Hauptteil des Overlays
 *
 * Figma-Desktop: Bild links, Menue rechtsbuendig. Darunter links LinkedIn
 * und der Button. Mobil wird gestapelt, das Menue zuerst.
 * --------------------------------------------------------------------------- */

.dc-nav__haupt {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: var(--dc-abstand-block);
	flex-wrap: wrap;
}

.dc-nav__spalte-links {
	display: flex;
	flex-direction: column;
	gap: var(--dc-abstand-block);
}

.dc-nav__bild {
	width: 456px;   /* Figma: 456x365 */
	max-width: 100%;
}

.dc-nav__bild img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--dc-kontur);
}

.dc-nav__aktionen {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.dc-nav__linkedin {
	display: block;
	width: 61px;   /* Figma: 61x61 */
	height: 61px;
	flex-shrink: 0;
}

.dc-nav__linkedin img {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Der Button im Menue folgt NICHT dem Standard-Button aus base.css:
 * Er hat im Figma-Entwurf keinen Versatzschatten und groessere Schrift.
 * Deshalb eine eigene Klasse statt .dc-btn.
 */
/*
 * Figma gibt fuer diesen Button widerspruechliche Werte an: Rahmenhoehe 61px,
 * aber Innenabstand 23px oben und unten plus 26px Zeilenhoehe - das waeren
 * 72px. Massgeblich ist die sichtbare Hoehe von 61px, sie passt genau zum
 * LinkedIn-Icon daneben. Deshalb feste Hoehe und nur seitlicher Abstand.
 */
.dc-nav__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 61px;
	padding-inline: 32px;   /* Figma */
	border: var(--dc-kontur);
	font-size: var(--dc-fs-h4);
	line-height: var(--dc-lh-h4);
	font-weight: var(--dc-gewicht-bold);
	color: var(--dc-schwarz);
	text-decoration: none;
}

.dc-nav__button:hover,
.dc-nav__button:focus-visible {
	background-color: var(--dc-gelb);
	color: var(--dc-schwarz);
}

/* ---------------------------------------------------------------------------
 * Menueliste
 * --------------------------------------------------------------------------- */

.dc-nav__menue {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.dc-nav__menue > li + li {
	margin-block-start: 48px;   /* Figma: Abstand 88 minus Zeilenhoehe 40 */
}

/* ---------------------------------------------------------------------------
 * Die Ausklappebene (DC-68)
 *
 * Der Kunde: "Beim Navigieren merke ich, dass ich es hakelig finde in der
 * Seite zu navigieren. Eine Ausklappebene im Menue wuerde helfen."
 *
 * Es gibt keine Reinzeichnung dafuer - die Skizze am Ticket zeigt nur zwei
 * handschriftliche Woerter unter "Trainings & Keynotes". Die Masse hier sind
 * deshalb ABGELEITET, nicht gemessen: Der Unterpunkt nimmt die Textgroesse
 * des Fliesstextes, der Abstand zwischen zwei Unterpunkten ist die Haelfte
 * des Abstands zwischen zwei Hauptpunkten.
 *
 * Rechtsbuendig wie die Hauptpunkte. Die Skizze setzt sie linksbuendig unter
 * den Anfang des Hauptpunktes - in einem rechtsbuendigen Menue haengt das
 * frei in der Luft. Wenn der Kunde es anders will, ist es eine Zeile hier.
 * --------------------------------------------------------------------------- */

/*
 * Der Schalter steht direkt links neben dem Hauptpunkt. Mit "float" landete
 * er am Containerrand und stand einen halben Bildschirm vom Text entfernt;
 * eine Flexzeile mit rechtsbuendigem Inhalt haelt die beiden zusammen.
 *
 * ACHTUNG, DIE ZEILE IST EIN EIGENES ELEMENT: Lagen Schalter, Link und
 * Unterliste zusammen in der Flexzeile, war deren breiteste Ausdehnung die
 * SUMME aller drei. Das Menue wurde damit 1015 statt 470 breit, passte
 * nicht mehr neben das Bild und rutschte darunter, sobald ein zweiter
 * Bereich aufging.
 */
.dc-nav__zeile {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
}

.dc-nav__unter {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Der Abstand gehoert an die Liste, nicht an den ersten Punkt: Zugeklappt
 * faehrt Bootstrap die Hoehe auf null, ein Aussenabstand am Kind bliebe
 * stehen.
 */
.dc-nav__unter.show,
.dc-nav__unter.collapsing {
	padding-block-start: 20px;   /* abgeleitet: halber Hauptpunktabstand */
}

.dc-nav__unterpunkt + .dc-nav__unterpunkt {
	margin-block-start: 12px;   /* abgeleitet */
}

.dc-nav__menue .dc-nav__unterpunkt a {
	font-size: var(--dc-fs-h6);
	line-height: var(--dc-lh-h6);
	font-weight: var(--dc-gewicht-book);
}

/*
 * Der Schalter steht LINKS neben dem Hauptpunkt, nicht rechts: Rechts endet
 * die Zeile an der Containerkante, dort ist kein Platz. Dieselben Zeichen
 * wie im Akkordeon - ein Plus, aufgeklappt ein Kreuz.
 */
.dc-nav__schalter {
	margin-inline-end: 16px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dc-schwarz);
	font-size: var(--dc-fs-h2);
	line-height: var(--dc-lh-h2);
	font-weight: var(--dc-gewicht-bold);
}

.dc-nav__schalter::after {
	content: "\00D7";   /* Multiplikationszeichen, optisch ein Kreuz */
}

.dc-nav__schalter.collapsed::after {
	content: "+";
}

.dc-nav__menue a {
	font-size: var(--dc-fs-h2);
	line-height: var(--dc-lh-h2);
	font-weight: var(--dc-gewicht-bold);
	color: var(--dc-schwarz);
	text-decoration: none;
}

.dc-nav__menue a:hover,
.dc-nav__menue a:focus-visible,
.dc-nav__menue .current-menu-item > a {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme
 *
 * Das Desktop-Layout ist fuehrend, mobil wird gestapelt. Das Bild entfaellt,
 * es wuerde die Menuepunkte aus dem sichtbaren Bereich schieben.
 * --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

	.dc-header__inner,
	.dc-nav__inner {
		padding-block: 32px;
	}

	.dc-header__logo {
		width: 110px;
	}

	.dc-menue-schalter img {
		width: 42px;
		height: 24px;
	}

	/*
	 * flex-wrap: nowrap - OHNE DAS VERSCHWINDET DIE HALBE NAVIGATION.
	 *
	 * Die Grundregel oben setzt "flex-wrap: wrap" fuer das zweispaltige
	 * Layout am Rechner. Hier steht "flex-direction: column" - und bei
	 * einer Spalte bedeutet "wrap" nicht Zeilen-, sondern SPALTENumbruch:
	 * Was nicht in die Hoehe passt, wandert in eine zweite Spalte RECHTS
	 * daneben. Bei 360 Pixeln liegt die ausserhalb des Bildschirms.
	 *
	 * Nachgemessen bei 360 x 780 mit einem offenen Untermenue:
	 *
	 *   .dc-nav__menue          l=40   w=265   bis 715
	 *   .dc-nav__spalte-links   l=337  w=265   <- 337 + 265 = 602
	 *
	 * In der zweiten Spalte standen LinkedIn und die beiden Knoepfe, also
	 * genau das, was der Kunde vermisst hat. Mit geschlossenen Untermenues
	 * fiel es nicht auf: Dann passt das Menue in die Hoehe, und die Spalte
	 * bleibt darunter, wo sie hingehoert.
	 *
	 * Mit nowrap bleibt alles in einer Spalte; was nicht hineinpasst,
	 * erreicht man ueber overflow-y: auto - das steht ohnehin hier.
	 */
	.dc-nav__haupt {
		align-items: flex-start;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: var(--dc-abstand-block);
		/*
		 * Nicht mehr der ganze Bereich scrollt, sondern nur die Liste der
		 * Menuepunkte - siehe .dc-nav__menue gleich darunter. min-height: 0
		 * erlaubt dem Flex-Element, kleiner als sein Inhalt zu werden;
		 * ohne das gibt es nichts zu scrollen.
		 */
		overflow: visible;
		min-height: 0;
		flex: 1 1 auto;
		width: 100%;
	}

	/*
	 * LINKEDIN UND DIE KNOEPFE BLEIBEN SICHTBAR.
	 *
	 * Der Kunde am 13.09.2026: "ggf muss die Schrift im Menue auf mobile
	 * verkleinert werden, um auch, wenn ein Untermenue offen ist, LinkedIn
	 * Verlinkung und mehr zur Gruenderin zu sehen."
	 *
	 * Verkleinern allein loest es nicht. Nachgerechnet bei 360 x 640 mit
	 * einem offenen Untermenue: Menue 605 hoch, LinkedIn und Knoepfe 120,
	 * sichtbar sind 466. Damit beides hineinpasst, muesste das Menue auf
	 * 346 schrumpfen - 43 Prozent weniger, also von 24 auf etwa 14 Pixel
	 * Schrift. So klein ist ein Hauptmenuepunkt nicht mehr bedienbar.
	 *
	 * Deshalb scrollt jetzt nur die Liste der Menuepunkte. LinkedIn und
	 * die beiden Knoepfe stehen darunter fest im Bild, egal wie viele
	 * Untermenues offen sind.
	 */
	.dc-nav__menue {
		overflow-y: auto;
		min-height: 0;
		flex: 1 1 auto;
		width: 100%;
	}

	.dc-nav__spalte-links {
		flex: 0 0 auto;
	}

	/*
	 * Im Quelltext steht die linke Spalte (Bild, LinkedIn, Button) vor dem
	 * Menue, weil sie im Desktop-Layout links liegt. Gestapelt gehoeren die
	 * Menuepunkte aber nach oben - sie sind der Zweck des Menues.
	 */
	.dc-nav__menue {
		order: -1;
	}

	.dc-nav__bild {
		display: none;
	}

	.dc-nav__menue {
		text-align: left;
	}

	/*
	 * Die Zeile aus Hauptpunkt und Schalter richtet sich auf dem Desktop
	 * nach rechts aus. Mobil steht das Menue links - sonst haengen die
	 * Punkte an der rechten Kante, waehrend alles andere linksbuendig ist
	 * (DC-75).
	 */
	.dc-nav__zeile {
		justify-content: flex-start;
	}

	/*
	 * Nur die HAUPTpunkte bekommen den grossen Abstand. Ohne ">" traf die
	 * Regel auch die Unterpunkte der Ausklappebene.
	 */
	.dc-nav__menue > li + li {
		margin-block-start: 20px;
	}

	.dc-nav__menue a {
		font-size: var(--dc-fs-h4);
		line-height: var(--dc-lh-h4);
	}

	.dc-nav__button {
		min-height: 48px;
		padding-inline: 24px;
		font-size: var(--dc-fs-text);
		line-height: var(--dc-lh-text);
	}

	.dc-nav__linkedin {
		width: 48px;
		height: 48px;
	}
}

/* ---------------------------------------------------------------------------
 * Reduzierter Kopfbereich
 *
 * Figma: Navigation_Klein (835:638), geschlossener Zustand 1920 x 333.
 *
 * Auf den Unterseiten liegt kein Kopfbild hinter der Navigation. Sie steht
 * deshalb im normalen Fluss - absolut positioniert wuerde sie die
 * Ueberschrift des Seiteneinstiegs verdecken.
 *
 * Statt des quadratischen Logos steht hier eine waagerechte Fassung aus
 * Bildmarke und Wortmarke.
 * --------------------------------------------------------------------------- */

/*
 * Auf den Unterseiten steht der Kopf im Fluss - dort genuegt sticky, ganz
 * ohne JavaScript. Der Hintergrund ist Pflicht: sonst scrollt der Inhalt
 * sichtbar durch den Kopf hindurch.
 *
 * GRAU, NICHT WEISS. Zwei Gruende:
 *
 * 1. Der Entwurf. nav_reduziert (861:422) hat keine eigene Fuellung - der
 *    Kopf steht dort auf dem grauen Seitengrund.
 * 2. Sonst springt die Farbe beim Scrollen um. Ab 80 Pixel kommt
 *    .dc-header--fixiert dazu, und das ist seit 08.09.2026 grau; weiss
 *    hier haette den Kopf bei jedem Scrollen die Farbe wechseln lassen.
 *
 * Undurchsichtig ist Grau genauso wie Weiss - der Inhalt scrollt weiterhin
 * nicht durch.
 */
.dc-header--reduziert {
	position: sticky;
	inset-block-start: 0;
	background-color: var(--dc-grau);
}

/*
 * DER KOPF IST SO HOCH WIE GEZEICHNET (DC-8).
 *
 * Hier standen 40 oben und unten - der Kopf war damit 141 hoch und die
 * erste Ueberschrift begann direkt darunter. Der Kunde meldete am
 * 07.09.2026: "Fehlt der ersten Ueberschrift Platz nach oben? Figma sah
 * eleganter aus, ich glaube, weil es hoeher wirkte."
 *
 * Nachgemessen, Entwurf gegen Stage:
 *
 *   Logo oben        Figma 121 (835:428)      Stage  40
 *   Ueberschrift     Figma 300 (3001:1246)    Stage 141
 *
 * Die 121 stehen jetzt oben. Unten stehen 96: Im Entwurf endet die
 * Menue-Beschriftung bei 186, und der Inhalt der Unterseiten beginnt bei
 * 282 - so auf Workshops (3001:1466), Fortbildungen (3001:1815) und der
 * Personenuebersicht (3005:630). 282 minus 186 sind 96.
 *
 * NICHT ALLE SEITEN SIND GLEICH GEZEICHNET. Die Einstiege beginnen im
 * Entwurf zwischen 249 (Keynotes) und 333 (Agenturleistungen). 282 ist der
 * haeufigste Wert; die anderen Seiten weichen um bis zu 51 ab. Ein eigener
 * Kopfabstand je Seite waere dafuer der falsche Preis.
 *
 * MIT DER BREITE SKALIERT. Gezeichnet ist auf 1920; 121 sind dort 6,3 vw
 * und 96 sind 5 vw. Auf einem schmalen Notebook schrumpft der Kopf
 * entsprechend mit, statt ein Drittel des Fensters zu belegen.
 *
 * DER MITGEFUEHRTE KOPF BLEIBT KLEIN. Ab 80 Pixel Scrollweg kommt
 * .dc-header--fixiert dazu und setzt padding-block auf 20 - die Hoehe hier
 * gilt nur am Seitenanfang.
 */
.dc-header--reduziert .dc-header__inner {
	align-items: center;
	padding-block-start: clamp( 40px, 6.3vw, 121px );   /* Figma 835:428 */
	padding-block-end: clamp( 40px, 5vw, 96px );        /* Figma 3001:1466 */
}

.dc-header--reduziert .dc-header__logo {
	display: flex;
	align-items: center;
	gap: 24px;   /* Figma: Bildmarke endet bei 448, Text beginnt bei 471 */
	width: auto;
	max-width: none;
	color: var(--dc-schwarz);
	text-decoration: none;
}

/*
 * Die Bildmarke braucht mehr Spezifitaet als .dc-header__logo img weiter
 * oben. Sonst gewinnt dort width:100% und das Bild waechst auf seine
 * Originalbreite von 4096 Pixeln - die Seite wird waagerecht scrollbar.
 */
.dc-header--reduziert .dc-header__logo img.dc-header__bildmarke {
	display: block;
	width: 140px;   /* Figma */
	height: auto;
	flex-shrink: 0;
}

.dc-header__wortmarke {
	font-size: var(--dc-fs-h2);
	line-height: var(--dc-lh-h2);
	font-weight: var(--dc-gewicht-bold);
	white-space: nowrap;
}

@media (max-width: 991.98px) {

	.dc-header--reduziert .dc-header__inner {
		padding-block: 24px;
	}

	/*
	 * Schrumpfen erlauben: In der Grundregel steht flex-shrink: 0, damit das
	 * Logo im breiten Kopf seine Groesse behaelt. Hier muss es nachgeben
	 * koennen, sonst laeuft die Zeile ueber, statt den Schriftzug
	 * umzubrechen. min-width: 0 hebt die Mindestbreite auf, die ein
	 * Flex-Element sonst von seinem Inhalt bekommt.
	 */
	.dc-header--reduziert .dc-header__logo {
		gap: 12px;
		flex-shrink: 1;
		min-width: 0;
	}

	.dc-header--reduziert .dc-header__logo img.dc-header__bildmarke {
		width: 84px;
	}

	/*
	 * DER SCHRIFTZUG MUSS UMBRECHEN DUERFEN (DC-75).
	 *
	 * Hier stand nur die kleinere Schriftgroesse. Der Umbruch wurde erst
	 * unter 375 erlaubt - und dazwischen lag genau der Bereich, in dem der
	 * Kunde den Fehler sah.
	 *
	 * Nachgemessen bei 390 auf /trainings-keynotes/, schon OHNE Scrollen:
	 *
	 *   Logo         l=40  w=230     (auf den freien Platz geschrumpft)
	 *   Schriftzug   l=136 w=187  r=323
	 *   Schalter     l=286
	 *   Ueberlappung 37
	 *
	 * Das Logo als Flex-Element gibt nach - sein Inhalt aber nicht: Der
	 * Schriftzug steht auf "white-space: nowrap" und bringt als
	 * Mindestbreite seine ganze Zeile mit. Er ragt deshalb aus dem Logo
	 * heraus und ueber den Schalter.
	 *
	 * DESHALB HAT DER ERSTE ANLAUF NICHTS GEHOLFEN: Ein "gap" am
	 * .dc-header__inner haelt die beiden Flex-Elemente auseinander - die
	 * Ueberlappung entsteht aber, weil der Inhalt seinen eigenen Kasten
	 * verlaesst. Ein Abstand zwischen Kaesten kann das nicht verhindern.
	 *
	 * "normal" bricht nur, wenn der Platz nicht reicht: Ab etwa 500 Pixeln
	 * bleibt der Schriftzug einzeilig wie gezeichnet, darunter steht er
	 * zweizeilig - so wie auch im quadratischen Logo.
	 */
	.dc-header__wortmarke {
		font-size: var(--dc-fs-h6);
		line-height: var(--dc-lh-h6);
		white-space: normal;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Sehr schmale Schirme (unter 375)
 *
 * WCAG 1.4.10 verlangt, dass sich der Inhalt bis 320 Pixel Breite ohne
 * waagerechtes Scrollen umbricht. Genau daran scheiterte der Kopf: Bildmarke
 * 140, Abstand 24 und der Schriftzug "diversity company" in einer Zeile
 * ergeben 351 - dazu 40 Seitenrand und 49 fuer den Menue-Schalter. Auf 320
 * liessen sich dadurch sechzehn der siebzehn Seiten seitlich schieben.
 *
 * Hier bricht der Schriftzug auf zwei Zeilen um - so, wie er auch im
 * quadratischen Logo steht - und die Bildmarke wird kleiner. Ab 375 bleibt
 * alles wie gezeichnet.
 * --------------------------------------------------------------------------- */

@media (max-width: 374.98px) {

	/*
	 * Schrumpfen erlauben: In der Grundregel steht flex-shrink: 0, damit das
	 * Logo im breiten Kopf seine Groesse behaelt. Hier muss es nachgeben
	 * koennen, sonst laeuft die Zeile ueber, statt den Schriftzug
	 * umzubrechen. min-width: 0 hebt die Mindestbreite auf, die ein
	 * Flex-Element sonst von seinem Inhalt bekommt.
	 */
	.dc-header--reduziert .dc-header__logo {
		gap: 12px;
		flex-shrink: 1;
		min-width: 0;
	}

	/*
	 * Der Seitenrand von 40 kostet auf 320 Pixeln ein Viertel der Breite.
	 * Die Haelfte davon reicht hier und schafft 40 Pixel fuer den
	 * Schriftzug - besser, als ihn frueher wegfallen zu lassen.
	 */
	.dc-header--reduziert .dc-header__inner,
	.dc-header--reduziert .dc-nav__inner {
		padding-inline: 20px;
	}

	.dc-header--reduziert .dc-header__logo img.dc-header__bildmarke {
		width: 100px;
	}

	.dc-header__wortmarke {
		white-space: normal;
		min-width: 0;
		font-size: var(--dc-fs-text);
		line-height: var(--dc-lh-text);
	}
}

/* ---------------------------------------------------------------------------
 * Mitgefuehrter Kopf
 *
 * Die Klasse setzt assets/js/navigation.js ab 80 Pixel Scrollhoehe.
 *
 * Auf der Startseite liegt der Kopf absolut ueber dem Hero und ist
 * durchsichtig - sticky greift dort nicht. Deshalb hier fixed. Auf den
 * Unterseiten ist er ohnehin schon sticky; die Klasse macht ihn zusaetzlich
 * kompakter.
 * --------------------------------------------------------------------------- */

.dc-header--fixiert {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	/*
	 * GRAU, NICHT WEISS.
	 *
	 * --dc-grau ist der Seitengrund (--bs-body-bg in tokens.css). Der
	 * mitgefuehrte Kopf soll sich beim Scrollen in die Seite einfuegen und
	 * nicht als weisses Band darueber liegen (Kundenwunsch 08.09.2026).
	 *
	 * OHNE TRENNSTRICH (DC-2, 10.09.2026). Hier stand
	 * "box-shadow: 0 1px 0 var(--dc-schwarz)" - ein Pixel hoher schwarzer
	 * Schatten, der den Kopf vom Inhalt abgesetzt hat. Der Kunde wollte ihn
	 * weg.
	 *
	 * DIE FUELLUNG MUSS BLEIBEN. Sie ist undurchsichtig und der eigentliche
	 * Grund, warum der Inhalt nicht sichtbar durch den Kopf scrollt - das
	 * leistete nie der Strich. Wer hier background-color entfernt, bekommt
	 * einen durchscheinenden Kopf.
	 */
	background-color: var(--dc-grau);
}

/* Kompakter: aus 70 oben werden 20, aus 178 Logobreite werden 110. */
.dc-header--fixiert .dc-header__inner {
	padding-block: 20px;
	align-items: center;
}

/*
 * DIE 110 GELTEN NUR FUER DAS QUADRATISCHE SIGNET (DC-75).
 *
 * Hier stand ".dc-header--fixiert .dc-header__logo" ohne Einschraenkung -
 * und traf damit auch den reduzierten Kopf der Unterseiten, dessen Logo
 * aus Bildmarke UND Schriftzug nebeneinander besteht. 110 Pixel sind
 * dafuer zu wenig: Die Bildmarke allein ist 100 breit, mit dem Abstand
 * von 12 bleibt fuer den Schriftzug nichts uebrig.
 *
 * Genau das hat der Kunde gemeldet, und genau deshalb hat der erste
 * Anlauf (ein Mindestabstand am .dc-header__inner) nichts geholfen: Der
 * Schaden entsteht INNERHALB des Logos, und er entsteht erst beim
 * Scrollen. "Die Navbar sieht bei mir auch gut aus, wenn der Bildschirm
 * ganz oben ist. Sobald ich scrolle verrutscht sie in die vertikale
 * Textausrichtung." (13.09.2026)
 *
 * Nachgemessen auf der Stage, /trainings-keynotes/, gescrollt:
 *
 *   320   Kopf 360 hoch, Schriftzug 0 breit und 320 hoch - senkrecht
 *   360   Kopf 360 hoch, dasselbe Bild
 *   390   Schriftzug ragt bis 323, der Schalter beginnt bei 286
 *         - sie ueberlappen um 37
 *
 * Unter 375 darf der Schriftzug umbrechen (WCAG 1.4.10), darueber steht
 * er auf einer Zeile - daher einmal senkrechter Text und einmal
 * Ueberlappung, aber dieselbe Ursache.
 *
 * Der reduzierte Kopf behaelt im mitgefuehrten Zustand "width: auto" aus
 * seiner eigenen Regel weiter oben; kompakter wird er ueber padding-block.
 */
.dc-header--fixiert:not(.dc-header--reduziert) .dc-header__logo {
	width: 110px;
}

/* ---------------------------------------------------------------------------
 * Die waagerechte Logofassung im mitgefuehrten Kopf (DC-71)
 *
 * Der Kunde am 11.09.2026: "beim ersten Scrollen wuerde das Logo und das
 * Hamburger-Menue ueber das Bild scrollen und erst, wenn der gelbe Kasten
 * erreicht wird schaltet sich die Navbar ein. Dann gerne auch mit dem
 * laenglichen diversity company logo (Schriftzug rechts von den Symbolen)."
 *
 * Beide Fassungen stehen im Markup (header.php). Ueber dem Bild das
 * quadratische Signet, im mitgefuehrten Kopf die waagerechte Fassung.
 *
 * AUF ALLEN BREITEN. Der Wechsel war zuerst auf 992 und mehr beschraenkt,
 * weil die Schwelle am gelben Kasten nur dort gilt. Der Kunde am
 * 13.09.2026: "die Umstellung ist im responsive nicht erfolgt. Das ist
 * sinnvoll fuer das Scrollverhalten, aber der Wechsel auf das quer-Logo
 * waere trotzdem gut, da dieses auch weniger hoch ist und die Navbar damit
 * schmaler werden kann."
 *
 * Damit haengen die beiden Teile des Tickets nicht mehr aneinander: Die
 * SCHWELLE bleibt auf dem Telefon bei den 80 Pixeln (siehe
 * navigation.js), das LOGO wechselt ueberall. Die Navbar wird dadurch
 * mobil niedriger - das quadratische Signet ist 110 hoch, die waagerechte
 * Fassung rund 40.
 * --------------------------------------------------------------------------- */

/*
 * Am Seitenanfang zeigt der grosse Kopf nur das Signet. Die waagerechte
 * Fassung steht zwar im Markup, ist aber aus - sonst saehe man beides.
 */
.dc-header:not(.dc-header--reduziert) .dc-header__bildmarke,
.dc-header:not(.dc-header--reduziert) .dc-header__wortmarke {
	display: none;
}

.dc-header--fixiert:not(.dc-header--reduziert) .dc-header__logo {
	display: flex;
	align-items: center;
	gap: 24px;   /* Figma: Bildmarke endet bei 448, Text beginnt bei 471 */
	width: auto;
	max-width: none;
	color: var(--dc-schwarz);
	text-decoration: none;
}

.dc-header--fixiert:not(.dc-header--reduziert) .dc-header__signet {
	display: none;
}

/*
 * Mehr Spezifitaet als .dc-header__logo img weiter oben, sonst gewinnt
 * dort width: 100% und die Bildmarke waechst auf ihre Originalbreite von
 * 4096 Pixeln - die Seite wird waagerecht scrollbar. Derselbe Fallstrick
 * wie beim reduzierten Kopf.
 */
.dc-header--fixiert:not(.dc-header--reduziert) .dc-header__logo img.dc-header__bildmarke {
	display: block;
	width: 140px;   /* Figma */
	height: auto;
	flex-shrink: 0;
}

.dc-header--fixiert:not(.dc-header--reduziert) .dc-header__wortmarke {
	display: inline;
}

/*
 * Auf dem Telefon dieselben Masse wie beim reduzierten Kopf: schmalerer
 * Abstand, kleinere Bildmarke, und das Logo darf nachgeben. Ohne das
 * Nachgeben schoebe der Schriftzug den Menue-Schalter aus dem Bild -
 * derselbe Fall wie in DC-75.
 */
@media (max-width: 991.98px) {

	.dc-header--fixiert:not(.dc-header--reduziert) .dc-header__logo {
		gap: 12px;
		flex-shrink: 1;
		min-width: 0;
	}

	.dc-header--fixiert:not(.dc-header--reduziert) .dc-header__logo img.dc-header__bildmarke {
		width: 84px;
	}
}

@media (max-width: 374.98px) {

	.dc-header--fixiert:not(.dc-header--reduziert) .dc-header__logo img.dc-header__bildmarke {
		width: 100px;
	}

	/*
	 * Halber Seitenrand, wie beim reduzierten Kopf und aus demselben
	 * Grund: Auf 320 kostet der Rand von 40 ein Viertel der Breite.
	 * Nachgemessen ohne diese Zeile: Der Schriftzug bekam 48 Pixel und
	 * stand dreizeilig, der Kopf war 120 hoch - also hoeher als das, was
	 * er ersetzen soll. Mit halbem Rand steht er zweizeilig bei 92.
	 */
	.dc-header--fixiert:not(.dc-header--reduziert) .dc-header__inner {
		padding-inline: 20px;
	}
}

/*
 * Der Kopf faehrt von oben herein, statt hart zu erscheinen. Nur ab 992:
 * Dort wird er erst weit unten im Bild eingeschaltet, und ohne Uebergang
 * wirkt das wie ein Fehler. Auf dem Telefon erscheint er schon nach 80
 * Pixeln - da braucht es keinen Auftritt.
 */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {

	.dc-header--fixiert:not(.dc-header--reduziert) {
		animation: dc-kopf-herein 0.25s ease;
	}
}

@keyframes dc-kopf-herein {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/*
 * Das Umschalten weich, aber nur wenn die Person das mag. Bei
 * "Bewegung reduzieren" springt es hart um - das ist hier das
 * freundlichere Verhalten als eine unterdrueckte Animation.
 */
@media (prefers-reduced-motion: no-preference) {

	.dc-header {
		transition: padding 0.2s ease, background-color 0.2s ease;
	}

	.dc-header__logo {
		transition: width 0.2s ease;
	}
}

/*
 * Sprungmarken. Ohne das verschwindet das Ziel unter dem mitgefuehrten
 * Kopf - betrifft die Seiten Agentur, Wissen und Diversity Management, die
 * ueber Sprungmarken aufgebaut sind.
 */
html {
	scroll-padding-block-start: 110px;
}

/* ---------------------------------------------------------------------------
 * Unter 300: nur noch die Bildmarke (DC-75)
 *
 * Die letzte Stufe. Mit gap und schmalerem Seitenrand bleibt der Schriftzug
 * bis hinunter zu 300 Pixeln lesbar - nachgemessen. Darunter bekaeme er
 * weniger als 40 Pixel und waere ein Buchstabenhaufen neben der Bildmarke.
 *
 * Dann traegt die Bildmarke die Marke allein. Der Name geht nicht verloren:
 * Er steht im alt-Text des Logolinks und damit in der Vorlesereihenfolge.
 *
 * WCAG 1.4.10 verlangt 320 Pixel ohne waagerechtes Scrollen - dort steht
 * der Schriftzug noch. Diese Regel greift erst darunter, also auf
 * Schirmen, die keine Vorgabe mehr abdeckt.
 * --------------------------------------------------------------------------- */

@media (max-width: 299.98px) {

	.dc-header__wortmarke {
		display: none;
	}
}

/* ---- footer.css ---- */
/*
 * footer.css — Fussbereich
 * ========================
 *
 * Figma: Startseite_Footer_Large (3001:1242), 1920 x 993.
 *
 * Aufbau: oben zweispaltig (Inhalt links, Bild rechts), darunter ein
 * vollflaechiger gelber Balken. Das Bild ragt im Entwurf in den Balken
 * hinein - siehe --dc-footer-ueberlappung.
 */

.dc-footer {
	--dc-footer-bild-breite: 650px;   /* Figma */
	--dc-footer-balken-hoehe: 161px;  /* Figma */
	--dc-footer-ueberlappung: 56px;   /* Bildunterkante 888 minus Balkenoberkante 832 */

	/*
	 * Grau wie der Seitengrund. Hier stand --dc-weiss, aus der Zeit als das
	 * Weiss noch als Seitenhintergrund gefuehrt wurde. Nachgemessen im
	 * Entwurfsexport der Startseite: Der Footerbereich ueber dem gelben
	 * Balken ist #f0f0f0.
	 */
	background-color: var(--dc-grau);
	margin-block-start: var(--dc-abstand-section);
}

/* ---------------------------------------------------------------------------
 * Oberer Bereich
 * --------------------------------------------------------------------------- */

.dc-footer__oben {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--dc-abstand-block);
	padding-block-start: 1rem;
}

.dc-footer__inhalt {
	display: flex;
	flex-direction: column;
	gap: var(--dc-abstand-block);
	flex: 1 1 auto;
	min-width: 0;
}

.dc-footer__logo {
	display: block;
	width: 191px;   /* Figma */
	max-width: 50vw;
}

.dc-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Das Bild ragt unten in den gelben Balken hinein. Der negative Abstand
 * erzeugt die Ueberlappung, z-index legt es ueber den Balken.
 */
.dc-footer__bild {
	position: relative;
	z-index: 1;
	flex: 0 0 var(--dc-footer-bild-breite);
	max-width: var(--dc-footer-bild-breite);
	margin-block-end: calc( var(--dc-footer-ueberlappung) * -1 );
}

.dc-footer__bild img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Ueberschriften im Footer
 *
 * Im Entwurf sind "Melden Sie sich..." und "Sitemap" beide h4 (24/26 Bold).
 * --------------------------------------------------------------------------- */

.dc-footer__titel {
	font-size: var(--dc-fs-h4);
	line-height: var(--dc-lh-h4);
	font-weight: var(--dc-gewicht-bold);
	margin: 0 0 var(--dc-abstand-element);
}

/* ---------------------------------------------------------------------------
 * Newsletter
 *
 * Das Formular kommt aus WS Form. Die Regeln hier greifen auf dessen
 * Markup zu, damit Eingabefeld und Button dem Entwurf entsprechen:
 * graue Flaeche, schwarze Kontur, harter Versatzschatten, keine Rundung.
 * --------------------------------------------------------------------------- */

.dc-footer__newsletter {
	max-width: 727px;   /* Figma: Eingabefeld 427 + Abstand + Button */
}

/*
 * Auf sehr schmalen Schirmen untereinander statt nebeneinander.
 *
 * WS Form stellt Feld und Knopf in acht zu vier Zwoelfteln nebeneinander.
 * Auf 320 bleiben fuer den Knopf 80 - er ist aber 113 breit und schob die
 * Seite um 6 auf. Die Anteilszahl ist eine Variable des Plugins; auf zwoelf
 * gesetzt nimmt jedes Feld die volle Breite und die beiden stapeln sich.
 */
@media (max-width: 575.98px) {

	.dc-footer__newsletter .wsf-form.wsf-form-canvas .wsf-field-wrapper {
		--wsf-c: 12;
	}
}

.dc-footer__newsletter input[type="email"],
.dc-footer__newsletter input[type="text"] {
	width: 100%;
	max-width: 427px;   /* Figma */
	min-height: 46px;   /* Figma */
	padding: 0 1rem;
	background-color: var(--dc-grau);
	border: var(--dc-kontur);
	box-shadow: var(--dc-schatten);
	border-radius: 0;
	font-family: var(--bs-body-font-family);
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	color: var(--dc-schwarz);
}

.dc-footer__newsletter button[type="submit"],
.dc-footer__newsletter input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: var(--dc-button-padding);
	background-color: var(--dc-gelb);
	border: var(--dc-kontur);
	box-shadow: var(--dc-schatten);
	border-radius: 0;
	font-weight: var(--dc-gewicht-bold);
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	color: var(--dc-schwarz);
	cursor: pointer;
}

.dc-footer__newsletter button[type="submit"]:hover,
.dc-footer__newsletter input[type="submit"]:hover {
	box-shadow: none;
	transform: translate(-3px, 3px);
}

/* Einwilligungstext unter dem Formular: Fussnotengroesse laut Entwurf. */
.dc-footer__newsletter label,
.dc-footer__newsletter .ws-form-label {
	font-size: var(--dc-fs-fussnote);
	line-height: var(--dc-lh-fussnote);
}

.dc-footer__newsletter input[type="checkbox"] {
	width: 20px;    /* Figma */
	height: 20px;
	border: var(--dc-kontur);
	border-radius: 0;
	accent-color: var(--dc-schwarz);
}

/* Hinweis, solange kein Formular hinterlegt ist. */
.dc-hinweis {
	padding: 0.75rem 1rem;
	border: 1px dashed var(--dc-schwarz);
	font-size: var(--dc-fs-fussnote);
	line-height: var(--dc-lh-fussnote);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Sitemap und Siegel
 *
 * Im Entwurf stehen die Siegel NEBEN der Sitemap-Liste, nicht darunter:
 * Sitemap bei x 300 bis 615, Siegel bei x 635 und 777, gleiche Hoehe.
 * Das haelt die linke Spalte kuerzer als das Bild - erst dadurch ragt das
 * Bild unten in den gelben Balken.
 * --------------------------------------------------------------------------- */

.dc-footer__unten {
	display: flex;
	align-items: flex-end;
	gap: 20px;   /* Figma: Sitemap endet bei 615, Siegel beginnen bei 635 */
	flex-wrap: wrap;
}

.dc-footer__sitemap {
	flex: 0 1 auto;
}


.dc-footer__menue {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-footer__menue a {
	display: inline-block;
	line-height: 40px;   /* Figma */
	font-size: var(--dc-fs-text);
	color: var(--dc-schwarz);
	text-decoration: underline;
}

.dc-footer__menue a:hover,
.dc-footer__menue a:focus-visible {
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Siegel
 * --------------------------------------------------------------------------- */

/*
 * Oben buendig, nicht unten.
 *
 * Figma Footer_klein: beide Siegel beginnen bei y=86 - ProvenExpert
 * 87 x 145, Service Champion 101 x 101. Mit flex-end sass das kleinere
 * Siegel deutlich tiefer als das grosse.
 */
.dc-footer__siegel {
	display: flex;
	align-items: flex-start;
	gap: var(--dc-abstand-element);
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Die Siegel haben unterschiedliche Formate: ProvenExpert ist hochkant
 * (121 x 200), DISQ quadratisch (140 x 140). Beide Achsen begrenzen,
 * sonst blaeht ein quadratisches Siegel auf 200 x 200 auf und die Zeile
 * bricht um.
 */
.dc-footer__siegel img {
	display: block;
	width: auto;
	height: auto;        /* ohne dies gewinnt das height-Attribut aus dem img-Tag */
	max-width: 140px;    /* Figma */
	max-height: 200px;   /* Figma */
}

/* ---------------------------------------------------------------------------
 * Gelber Balken
 * --------------------------------------------------------------------------- */

.dc-footer__balken {
	background-color: var(--dc-gelb);
	min-height: var(--dc-footer-balken-hoehe);
	display: flex;
	align-items: center;
}

.dc-footer__balken-inhalt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dc-abstand-block);
	flex-wrap: wrap;
	width: 100%;
}

/*
 * Figma: LinkedIn-Rahmen 300 bis 345, Kontakt-Knopf ab 409, Karriere-Knopf
 * ab 588 - zwischen allen dreien liegen genau 64.
 */
.dc-footer__aktionen {
	display: flex;
	align-items: center;
	gap: 64px;   /* Figma */
	flex-wrap: wrap;
}

/*
 * Das LinkedIn-Icon steht im Balken in einem quadratischen Rahmen.
 * Das SVG bringt seinen eigenen Rahmen mit, deshalb hier nur die Groesse.
 */
.dc-footer__linkedin {
	display: block;
	width: 45px;    /* Figma */
	height: 45px;
	flex-shrink: 0;
}

.dc-footer__linkedin img {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Rechtliches
 *
 * Anders als die Sitemap-Links nicht unterstrichen.
 * --------------------------------------------------------------------------- */

.dc-footer__rechtlich-menue {
	display: flex;
	gap: 2.5rem;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-footer__rechtlich-menue a {
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	color: var(--dc-schwarz);
	text-decoration: none;
}

.dc-footer__rechtlich-menue a:hover,
.dc-footer__rechtlich-menue a:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme
 *
 * Gestapelt: Bild zuerst, darunter der Inhalt. Die Ueberlappung entfaellt -
 * sie funktioniert nur im zweispaltigen Layout.
 *
 * WARUM DAS BILD NACH OBEN WANDERT: Der Kunde am 13.09.2026 zu DC-74:
 * "Auf der Startseite sollte das Bild des Newsletter zwischen die Formulare."
 * Ueber dem Footer steht das Kontaktformular, im Footer folgt das
 * Newsletter-Formular - das Bild gehoert dazwischen, nicht ganz nach unten
 * hinter die Sitemap. Im mitgeschickten Nachbau (Anhang
 * image-20260913-104842.png) liegt es randlos ueber die volle Breite; das
 * Footer-Logo taucht dort mobil nicht auf, es steht ohnehin im gelben Balken.
 * --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

	.dc-footer__oben {
		flex-direction: column;
		gap: var(--dc-abstand-block);
		padding-block-start: 0;
	}

	/*
	 * order statt Umsortieren im Markup: Auf dem Desktop steht das Bild
	 * rechts neben dem Inhalt, dort ist die Quellreihenfolge richtig.
	 */
	/*
	 * align-self: stretch IST HIER PFLICHT, NICHT KOSMETIK.
	 *
	 * .dc-footer__oben steht mobil auf flex-direction: column und behaelt
	 * align-items: flex-start aus der Desktop-Regel. Die Querachse ist damit
	 * die waagerechte, und flex-start schrumpft das Bild auf seine
	 * Inhaltsbreite. Das <img> darin steht auf width: 100% - 100 Prozent von
	 * nichts ist nichts. Nachgemessen bei 390: w=0 h=0, das Bild war
	 * unsichtbar, obwohl es im Markup stand.
	 */
	.dc-footer__bild {
		order: -1;
		align-self: stretch;
		flex: 0 0 auto;
		max-width: none;
		margin-block-end: 0;
		/* Der Footer-Container hat 40px Seitenrand - das Bild soll randlos
		   ueber die volle Breite laufen, wie im Nachbau des Kunden. */
		margin-inline: calc( var(--dc-rand-mobil) * -1 );
	}

	.dc-footer__logo {
		display: none;
	}

	.dc-footer__balken {
		padding-block: var(--dc-abstand-block);
	}

	.dc-footer__balken-inhalt {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dc-abstand-element);
	}

	.dc-footer__rechtlich-menue {
		gap: 1.25rem;
	}

	.dc-footer__siegel img {
		max-height: 130px;
	}
}

/* ---------------------------------------------------------------------------
 * Kleine Variante
 *
 * Figma: Footer_klein (3001:1301), 1920 x 464.
 * Durchgehend gelb, ohne Newsletter und ohne grosses Bild. Die Sitemap steht
 * zweispaltig, damit die fuenf Links nicht so hoch bauen.
 * --------------------------------------------------------------------------- */

.dc-footer--klein {
	background-color: var(--dc-gelb);
	padding-block: var(--dc-abstand-block);
}

/*
 * Zwoelf Spalten, wie im Entwurf.
 *
 * Figma Footer_klein bei 1320 Inhaltsbreite: Logo ab 300 (Spalte 1),
 * Sitemap ab 635 (Spalte 4), die zweite Sitemap-Spalte ab 972 (Spalte 7),
 * die Siegel ab 1305 (Spalte 10). Mit space-between lagen sie vorher da,
 * wo der Platz sie hintrieb.
 */
.dc-footer--klein .dc-footer__oben-klein {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 30px;
	align-items: start;
	margin-block-end: var(--dc-abstand-section);
}

.dc-footer--klein .dc-footer__logo {
	grid-column: 1 / span 3;
	width: 140px;   /* Figma: kleiner als in der grossen Variante */
}

.dc-footer--klein .dc-footer__sitemap {
	grid-column: 4 / span 6;
}

.dc-footer--klein .dc-footer__siegel {
	grid-column: 10 / span 3;
}

/*
 * Zweispaltige Sitemap. Die Spaltenanzahl steht fest statt auf einer
 * Mindestbreite zu beruhen - im Entwurf sind es genau zwei.
 */
/*
 * Zwei gleich breite Spalten im Raster statt "columns".
 *
 * Figma: erste Spalte ab 635 (Grid 4), zweite ab 972 (Grid 7) - also je
 * drei Rasterspalten. Mit "columns" verteilte der Browser nach Textmenge
 * und die zweite Spalte begann irgendwo.
 */
.dc-footer__menue--zweispaltig {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
}

.dc-footer__menue--zweispaltig li {
	break-inside: avoid;
}

/*
 * In der kleinen Variante steht die untere Zeile im selben gelben Bereich,
 * es gibt keinen abgesetzten Balken.
 */
.dc-footer--klein .dc-footer__balken-inhalt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dc-abstand-block);
	flex-wrap: wrap;
}

@media (max-width: 991.98px) {

	/*
	 * ACHTUNG, HIER LAG EIN FEHLER: Hier stand "flex-direction: column" -
	 * an einem Raster. Die Angabe tut dort nichts, das Zwoelfspaltenraster
	 * blieb also auch auf 390 stehen. Die Siegel in Spalte 10 bis 12 hatten
	 * damit rund 78 Platz und sind mit ihren 140 aus der Seite gelaufen:
	 * Die Kontaktseite liess sich waagerecht schieben.
	 *
	 * Ein Raster wird mit grid-template-columns umgestellt, nicht mit
	 * flex-direction. Dasselbe galt fuer "columns: 1" an der Sitemap.
	 */
	.dc-footer--klein .dc-footer__oben-klein {
		grid-template-columns: 1fr;
		row-gap: var(--dc-abstand-block);
		margin-block-end: var(--dc-abstand-block);
	}

	.dc-footer--klein .dc-footer__logo,
	.dc-footer--klein .dc-footer__sitemap,
	.dc-footer--klein .dc-footer__siegel {
		grid-column: 1 / -1;
	}

	.dc-footer__menue--zweispaltig {
		grid-template-columns: 1fr;
	}

	.dc-footer--klein .dc-footer__balken-inhalt {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dc-abstand-element);
	}
}

/* ---- borlabs.css ---- */
/*
 * borlabs.css — Borlabs Cookie 3 im DC-Look
 * =========================================
 *
 * Borlabs bringt ein blaues Standarddesign mit (#2563eb, 4px Rundung). Diese
 * Datei stellt es auf die Anatomie des Entwurfs um: gelbe Flaeche, duenne
 * schwarze Kontur, harter Versatzschatten nach links-unten, keine Rundung.
 *
 * WIE ES FUNKTIONIERT — bitte vor dem Aendern lesen:
 *
 * Borlabs 3 legt sein gesamtes Design in benannten CSS-Variablen ab
 * (--dialog-*, --widget-*, --content-blocker-*) und definiert sie in einer
 * generierten Datei unter wp-content/cache/borlabs-cookie/. Der erste Block
 * hier setzt genau diese Variablen neu. Das ist die vom Plugin vorgesehene
 * Schnittstelle: kein !important, kein Nachbauen fremder Regeln, und ein
 * Plugin-Update kann es nicht zerschiessen.
 *
 * DIE DREI ERGAENZUNGEN weiter unten braucht es, weil Borlabs fuer Kontur
 * und Schatten keine Variablen anbietet. Nur dort werden Plugin-Selektoren
 * nachgebaut.
 *
 * SPEZIFITAET: Der Variablenblock steht auf "html:root" (0,1,1), nicht auf
 * ":root" (0,1,0). Damit gewinnt er gegen die Plugin-Definition unabhaengig
 * davon, in welcher Reihenfolge die beiden Dateien im <head> landen. Die
 * generierte Borlabs-Datei laedt frueher oder spaeter, je nach Cache-Zustand
 * - auf die Reihenfolge ist kein Verlass.
 *
 * FARBE AENDERN: Nur die Werte im ersten Block. Alle zeigen auf die Tokens
 * aus tokens.css, eine Farbe wird also an genau einer Stelle gepflegt.
 */

html:root {

	/* ------------------------------------------------------------------
	 * Flaechen und Text
	 * ------------------------------------------------------------------ */

	--dialog-background-color:        var(--dc-weiss);
	--dialog-text-color:              var(--dc-schwarz);
	--dialog-separator-color:         var(--dc-schwarz);

	/* Der Abdunkler hinter dem Fenster. Schwarz wie im Plugin, nur ueber
	   das Token gefuehrt. */
	--dialog-backdrop-background-color: var(--dc-schwarz);
	--dialog-backdrop-background-opacity: 0.8;

	/* Die Karten der Dienste-Liste heben sich wie im Entwurf ueber das
	   Grau vom weissen Grund ab, nicht ueber einen Schatten. */
	--dialog-card-background-color:   var(--dc-grau);
	--dialog-card-text-color:         var(--dc-schwarz);
	--dialog-card-separator-color:    var(--dc-schwarz);

	--dialog-footer-background-color: var(--dc-grau);
	--dialog-footer-text-color:       var(--dc-schwarz);

	/* ------------------------------------------------------------------
	 * Knoepfe
	 *
	 * GELB SIND DIE VIER HANDLUNGSKNOEPFE, GRAU IST DER NEBENWEG.
	 *
	 * "Alle akzeptieren" und "Nur essenzielle akzeptieren" sind bewusst
	 * gleich gestaltet - gleiche Farbe, gleiche Groesse, gleiches Gewicht.
	 * Ein hervorgehobenes "Alle akzeptieren" neben einem blassen "Nur
	 * essenzielle" gilt als Dark Pattern und macht die Einwilligung
	 * angreifbar. Das war im Plugin-Standard schon so (beide blau) und
	 * bleibt hier so.
	 * ------------------------------------------------------------------ */

	--dialog-button-accept-all-color:                  var(--dc-gelb);
	--dialog-button-accept-all-text-color:             var(--dc-schwarz);
	--dialog-button-accept-all-color-hover:            var(--dc-gelb);
	--dialog-button-accept-all-text-color-hover:       var(--dc-schwarz);

	--dialog-button-accept-only-essential-color:            var(--dc-gelb);
	--dialog-button-accept-only-essential-text-color:       var(--dc-schwarz);
	--dialog-button-accept-only-essential-color-hover:      var(--dc-gelb);
	--dialog-button-accept-only-essential-text-color-hover: var(--dc-schwarz);

	--dialog-button-save-consent-color:                var(--dc-gelb);
	--dialog-button-save-consent-text-color:           var(--dc-schwarz);
	--dialog-button-save-consent-color-hover:          var(--dc-gelb);
	--dialog-button-save-consent-text-color-hover:     var(--dc-schwarz);

	/*
	 * GRAU, OBWOHL ES EIN HANDLUNGSKNOPF IST.
	 *
	 * Das sind die kleinen "Alle auswaehlen" und "Alle abwaehlen" ueber der
	 * Dienste-Liste. Sie setzen nur Kaestchen; erst "Speichern" darunter tut
	 * etwas. In Gelb standen fuenf gleich starke Knoepfe im Fenster und die
	 * drei unten verloren ihren Vorrang.
	 */
	--dialog-button-selection-color:                   var(--dc-grau);
	--dialog-button-selection-text-color:              var(--dc-schwarz);
	--dialog-button-selection-color-hover:             var(--dc-grau);
	--dialog-button-selection-text-color-hover:        var(--dc-schwarz);

	/* Nebenweg: fuehrt in die Einstellungen, nicht aus dem Dialog heraus. */
	--dialog-button-preferences-color:                 var(--dc-grau);
	--dialog-button-preferences-text-color:            var(--dc-schwarz);
	--dialog-button-preferences-color-hover:           var(--dc-grau);
	--dialog-button-preferences-text-color-hover:      var(--dc-schwarz);

	--dialog-button-close-color:                       var(--dc-grau);
	--dialog-button-close-text-color:                  var(--dc-schwarz);
	--dialog-button-close-color-hover:                 var(--dc-grau);
	--dialog-button-close-text-color-hover:            var(--dc-schwarz);

	/* ------------------------------------------------------------------
	 * Links
	 *
	 * Im Entwurf sind Links schwarz und unterstrichen, nicht farbig -
	 * dieselbe Regel wie --bs-link-color in tokens.css.
	 * ------------------------------------------------------------------ */

	--dialog-link-primary-color:         var(--dc-schwarz);
	--dialog-link-primary-color-hover:   var(--dc-schwarz);
	--dialog-link-secondary-color:       var(--dc-schwarz);
	--dialog-link-secondary-color-hover: var(--dc-schwarz);

	--dialog-control-element-color:            var(--dc-schwarz);
	--dialog-control-element-color-hover:      var(--dc-schwarz);
	--dialog-card-control-element-color:       var(--dc-schwarz);
	--dialog-card-control-element-color-hover: var(--dc-schwarz);

	/* ------------------------------------------------------------------
	 * Schalter, Kaestchen, Reiter
	 *
	 * SCHWARZ ALS "AN", NICHT GELB. Ein gelber Schalter auf grauem Grund
	 * hat 1,3:1 Kontrast - der Zustand waere nicht ablesbar. Schwarz gegen
	 * Grau liegt bei 18,9:1. Gelb bleibt der Flaeche der Knoepfe
	 * vorbehalten, wo schwarzer Text darauf sitzt.
	 * ------------------------------------------------------------------ */

	--dialog-switch-button-background-color-active:   var(--dc-schwarz);
	--dialog-switch-button-background-color-inactive: #767676;
	--dialog-switch-button-color-active:              var(--dc-weiss);
	--dialog-switch-button-color-inactive:            var(--dc-weiss);

	--dialog-checkbox-background-color-active:   var(--dc-schwarz);
	--dialog-checkbox-background-color-inactive: var(--dc-weiss);
	--dialog-checkbox-background-color-disabled: var(--dc-grau);
	--dialog-checkbox-border-color-active:       var(--dc-schwarz);
	--dialog-checkbox-border-color-inactive:     var(--dc-schwarz);
	--dialog-checkbox-border-color-disabled:     #767676;
	--dialog-checkbox-check-mark-color-active:   var(--dc-weiss);
	--dialog-checkbox-check-mark-color-disabled: #767676;

	--dialog-tab-bar-tab-background-color-active:   var(--dc-gelb);
	--dialog-tab-bar-tab-background-color-inactive: var(--dc-weiss);
	--dialog-tab-bar-tab-text-color-active:         var(--dc-schwarz);
	--dialog-tab-bar-tab-text-color-inactive:       var(--dc-schwarz);
	--dialog-tab-bar-tab-border-color-bottom-active:   var(--dc-schwarz);
	--dialog-tab-bar-tab-border-color-bottom-inactive: var(--dc-schwarz);

	/* ------------------------------------------------------------------
	 * Listen, Tabellen, Suchfeld
	 * ------------------------------------------------------------------ */

	--dialog-list-item-background-color-even: var(--dc-weiss);
	--dialog-list-item-background-color-odd:  var(--dc-weiss);
	--dialog-list-item-text-color-even:       var(--dc-schwarz);
	--dialog-list-item-text-color-odd:        var(--dc-schwarz);
	--dialog-list-item-separator-color:       var(--dc-schwarz);
	--dialog-list-item-control-element-color:           var(--dc-schwarz);
	--dialog-list-item-control-element-color-hover:     var(--dc-schwarz);
	--dialog-list-item-control-element-separator-color: var(--dc-schwarz);

	--dialog-table-row-background-color-even: var(--dc-weiss);
	--dialog-table-row-background-color-odd:  var(--dc-grau);
	--dialog-table-row-text-color-even:       var(--dc-schwarz);
	--dialog-table-row-text-color-odd:        var(--dc-schwarz);
	--dialog-table-row-border-color:          var(--dc-schwarz);

	/* Eingabefelder sind im Entwurf grau hinterlegt mit schwarzer Kontur -
	   siehe die Formularfelder auf der Kontaktseite. */
	--dialog-search-bar-input-background-color:     var(--dc-grau);
	--dialog-search-bar-input-text-color:           var(--dc-schwarz);
	--dialog-search-bar-input-border-color-default: var(--dc-schwarz);
	--dialog-search-bar-input-border-color-focus:   var(--dc-schwarz);

	/* ------------------------------------------------------------------
	 * Typografie
	 *
	 * font-family steht auf "inherit" und erbt damit die Theme-Schrift -
	 * dabei bleibt es. Nur die Groesse geht von 14 auf die 16 des Entwurfs.
	 * ------------------------------------------------------------------ */

	--dialog-font-size: 16px;

	/* ------------------------------------------------------------------
	 * Keine Rundungen
	 *
	 * "Keine Eckenrundung" ist eine der drei Konstanten der Anatomie
	 * (tokens.css, Abschnitt 2). Borlabs fuehrt jede Ecke einzeln, deshalb
	 * die lange Liste - sie sagt nichts anderes als "ueberall 0".
	 * ------------------------------------------------------------------ */

	--dialog-border-radius-top-left:     0;
	--dialog-border-radius-top-right:    0;
	--dialog-border-radius-bottom-left:  0;
	--dialog-border-radius-bottom-right: 0;

	--dialog-button-border-radius-top-left:     0;
	--dialog-button-border-radius-top-right:    0;
	--dialog-button-border-radius-bottom-left:  0;
	--dialog-button-border-radius-bottom-right: 0;

	--dialog-card-border-radius-top-left:     0;
	--dialog-card-border-radius-top-right:    0;
	--dialog-card-border-radius-bottom-left:  0;
	--dialog-card-border-radius-bottom-right: 0;

	--dialog-checkbox-border-radius-top-left:     0;
	--dialog-checkbox-border-radius-top-right:    0;
	--dialog-checkbox-border-radius-bottom-left:  0;
	--dialog-checkbox-border-radius-bottom-right: 0;

	--dialog-list-border-radius-top-left:     0;
	--dialog-list-border-radius-top-right:    0;
	--dialog-list-border-radius-bottom-left:  0;
	--dialog-list-border-radius-bottom-right: 0;

	--dialog-search-bar-input-border-radius-top-left:     0;
	--dialog-search-bar-input-border-radius-top-right:    0;
	--dialog-search-bar-input-border-radius-bottom-left:  0;
	--dialog-search-bar-input-border-radius-bottom-right: 0;

	--dialog-tab-bar-tab-border-radius-top-left-active:     0;
	--dialog-tab-bar-tab-border-radius-top-right-active:    0;
	--dialog-tab-bar-tab-border-radius-top-left-inactive:   0;
	--dialog-tab-bar-tab-border-radius-top-right-inactive:  0;

	/* ------------------------------------------------------------------
	 * Content Blocker
	 *
	 * Die Kacheln vor eingebetteten Inhalten (LinkedIn ueber Juicer,
	 * Karten, Videos). Gleicher Bauplan wie der Dialog.
	 * ------------------------------------------------------------------ */

	--content-blocker-background-color:      var(--dc-grau);
	--content-blocker-text-color:            var(--dc-schwarz);
	--content-blocker-link-color:            var(--dc-schwarz);
	--content-blocker-link-color-hover:      var(--dc-schwarz);
	--content-blocker-separator-color:       var(--dc-schwarz);
	--content-blocker-button-color:          var(--dc-gelb);
	--content-blocker-button-color-hover:    var(--dc-gelb);
	--content-blocker-button-text-color:     var(--dc-schwarz);
	--content-blocker-button-text-color-hover: var(--dc-schwarz);

	--content-blocker-border-radius-top-left:     0;
	--content-blocker-border-radius-top-right:    0;
	--content-blocker-border-radius-bottom-left:  0;
	--content-blocker-border-radius-bottom-right: 0;

	--content-blocker-button-border-radius-top-left:     0;
	--content-blocker-button-border-radius-top-right:    0;
	--content-blocker-button-border-radius-bottom-left:  0;
	--content-blocker-button-border-radius-bottom-right: 0;

	/* Die Farbe des Zahnrads unten links. */
	--widget-color: var(--dc-schwarz);
}

/* ===========================================================================
 * ERGAENZUNGEN
 *
 * Ab hier werden Plugin-Selektoren nachgebaut. Das ist noetig, weil Borlabs
 * fuer Kontur und Schatten keine Variablen anbietet - sie kennen nur Farbe,
 * Radius und Abstand.
 *
 * DIE SELEKTOREN SIND ABSICHTLICH SO LANG. Zwei Gruende:
 *
 * 1. Borlabs schreibt jede Regel doppelt, einmal ueber die ID
 *    #BorlabsCookieBox und einmal ueber die Klasse .brlbs-cmpnt-container.
 *    Wer nur eine der beiden nachbaut, sieht die Aenderung an einer von zwei
 *    Stellen nicht. Beide stehen deshalb hier, in derselben Paarung wie im
 *    Plugin.
 *
 * 2. Davor steht jeweils ein "html". Das ist kein Schmuck: Die generierte
 *    Borlabs-Datei laedt NACH dieser hier, bei gleicher Spezifitaet gewinnt
 *    also das Plugin. Nachgemessen ist es an der Groesse des Widget-Knopfs -
 *    ohne das "html" blieb er auf den 48px des Plugins statt auf 58.
 *    Ein Element mehr im Selektor genuegt, um das zu drehen.
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. Das Dialogfenster
 *
 * Kontur und Versatzschatten wie bei jeder Kachel im Entwurf.
 * --------------------------------------------------------------------------- */

html #BorlabsCookieBox .brlbs-cmpnt-dialog,
html .brlbs-cmpnt-container .brlbs-cmpnt-dialog {
	border: var(--dc-kontur);
	box-shadow: var(--dc-schatten);
}

/* Die Dienste-Karten in den Einstellungen. */
html #BorlabsCookieBox .brlbs-cmpnt-card fieldset,
html .brlbs-cmpnt-container .brlbs-cmpnt-card fieldset {
	border: var(--dc-kontur);
}

/* ---------------------------------------------------------------------------
 * 2. Die Knoepfe
 *
 * Borlabs setzt auf den Knopf "all: unset" und danach nur Farbe, Radius und
 * Abstand. Kontur, Schatten und Schriftgewicht fehlen deshalb komplett - sie
 * kommen hier dazu, mit denselben Werten wie .dc-btn in base.css.
 *
 * Der Innenabstand des Plugins ist 12px 20px, der des Entwurfs 14px 25px.
 * --dc-button-padding setzt beide gleich.
 * --------------------------------------------------------------------------- */

html #BorlabsCookieBox .brlbs-cmpnt-btn,
html .brlbs-cmpnt-container .brlbs-cmpnt-btn {
	border: var(--dc-kontur);
	box-shadow: var(--dc-schatten);
	padding: var(--dc-button-padding);
	font-weight: var(--dc-gewicht-bold);
	line-height: var(--dc-lh-text);
}

/*
 * DIE ZWEITE REGEL FUER DAS SCHRIFTGEWICHT IST KEIN VERSEHEN.
 *
 * Borlabs haengt den Knoepfen zusaetzlich .brlbs-cmpnt-font-semibold an und
 * setzt darueber font-weight: 600. Diese Regel ist um eine Klasse
 * spezifischer als die obige und gewann - nachgemessen standen die Knoepfe
 * auf dem Staging bei 600 statt 700. Gotham hat keinen Schnitt fuer 600;
 * der Browser rechnet ihn sich zurecht, und das Ergebnis passt zu keinem
 * Knopf sonst auf der Seite.
 */
html #BorlabsCookieBox .brlbs-cmpnt-btn.brlbs-cmpnt-font-semibold,
html .brlbs-cmpnt-container .brlbs-cmpnt-btn.brlbs-cmpnt-font-semibold {
	font-weight: var(--dc-gewicht-bold);
}

/*
 * Hover wie beim Theme-Knopf: Der Schatten faellt weg und der Knopf rueckt
 * an seine Stelle. Die Farbe bleibt - deshalb stehen oben die -hover-
 * Variablen auf demselben Wert wie die Grundfarben.
 *
 * Die Ueberblendung des Plugins (transition auf color und background-color,
 * 0,4s) wuerde die Bewegung nicht mitnehmen; transform steht deshalb hier
 * ausdruecklich dabei.
 */
html #BorlabsCookieBox .brlbs-cmpnt-btn:hover,
html #BorlabsCookieBox .brlbs-cmpnt-btn:focus-visible,
html .brlbs-cmpnt-container .brlbs-cmpnt-btn:hover,
html .brlbs-cmpnt-container .brlbs-cmpnt-btn:focus-visible {
	box-shadow: none;
	transform: translate(-3px, 3px);
	transition-property: color, background-color, border-color, box-shadow, transform;
}

@media (prefers-reduced-motion: reduce) {

	html #BorlabsCookieBox .brlbs-cmpnt-btn:hover,
	html #BorlabsCookieBox .brlbs-cmpnt-btn:focus-visible,
	html .brlbs-cmpnt-container .brlbs-cmpnt-btn:hover,
	html .brlbs-cmpnt-container .brlbs-cmpnt-btn:focus-visible {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Der Widget-Knopf unten links
 *
 * Im Plugin-Standard ist das ein graues Zahnrad ohne Flaeche, das auf hellem
 * Grund kaum zu sehen ist. Hier wird es eine Kachel wie jede andere: gelb,
 * mit Kontur und Versatzschatten.
 *
 * DIE FLAECHE LIEGT AUF DEM SVG, NICHT AUF DEM DIV. Das aeussere Element
 * traegt "position: fixed" und "padding: 20px" - dieser Innenabstand ist der
 * Abstand zum Fensterrand. Eine Flaeche darauf klebte in der Ecke fest.
 * --------------------------------------------------------------------------- */

html #BorlabsCookieBox .brlbs-cmpnt-widget svg,
html .brlbs-cmpnt-container .brlbs-cmpnt-widget svg {
	box-sizing: border-box;
	width: 58px;
	height: 58px;
	padding: 12px;
	background-color: var(--dc-gelb);
	border: var(--dc-kontur);
	/*
	 * Eckig, nicht rund (21.09.2026). Borlabs 3.4.4 rundet den Knopf ab;
	 * im Entwurf ist er ein Quadrat wie alle anderen Flaechen der Seite.
	 * Vor 3.4.4 war das nicht noetig.
	 */
	border-radius: 0;
	box-shadow: var(--dc-schatten);
	color: var(--dc-schwarz);
	/* Der weiche Schein des Plugins passt nicht zur harten Kante. */
	filter: none;
}

/*
 * Borlabs blendet den Knopf beim Ueberfahren auf 80 Prozent ab. Statt dessen
 * dieselbe Bewegung wie bei den Knoepfen.
 */
html #BorlabsCookieBox .brlbs-cmpnt-widget:hover,
html .brlbs-cmpnt-container .brlbs-cmpnt-widget:hover {
	opacity: 1;
}

/*
 * DAS SYMBOL IM KNOPF (21.09.2026)
 *
 * Borlabs setzt das Cookie-Symbol als <use> mit Verweis auf eine externe
 * Datei. Das umgebende <svg> hat KEINE viewBox - ohne die skaliert der
 * Browser den Inhalt nicht, das Symbol rendert in seiner Eigengroesse und
 * sitzt schief im gelben Kasten.
 *
 * Seit der Aktualisierung auf Borlabs 3.4.4 faellt das auf.
 *
 * Der <use> bekommt deshalb ausdruecklich die volle Flaeche des
 * Innenraums. Das ist eine Notloesung fuer fremdes Markup und gehoert
 * geprueft, wenn Borlabs das naechste Mal aktualisiert.
 */
html .brlbs-cmpnt-container .brlbs-cmpnt-widget svg > use,
html #BorlabsCookieBox .brlbs-cmpnt-widget svg > use {
	width: 100%;
	height: 100%;
}

html #BorlabsCookieBox .brlbs-cmpnt-widget:hover svg,
html .brlbs-cmpnt-container .brlbs-cmpnt-widget:hover svg {
	box-shadow: none;
	transform: translate(-3px, 3px);
}

@media (prefers-reduced-motion: reduce) {

	html #BorlabsCookieBox .brlbs-cmpnt-widget:hover svg,
	html .brlbs-cmpnt-container .brlbs-cmpnt-widget:hover svg {
		transform: none;
	}
}

/* ---- barrierefreiheit.css ---- */
/*
 * barrierefreiheit.css — Der Knopf von Accessibility OneTap im DC-Look
 * ====================================================================
 *
 * Der Auslueseknopf unten rechts ist im Plugin-Standard eine blaue runde
 * Scheibe (#0048FE). Hier wird er dieselbe Kachel wie der Borlabs-Knopf
 * unten links: 58 x 58, gelb, duenne schwarze Kontur, Versatzschatten,
 * keine Rundung. Die beiden sitzen in denselben Ecken derselben Zeile und
 * sollen als Paar zu lesen sein.
 *
 * NUR DER KNOPF, NICHT DIE SCHUBLADE.
 *
 * Das Bedienfeld, das sich beim Klick oeffnet, bleibt im Plugin-Blau. Es
 * waere ein schlechter Tausch, es hier nachzubauen: OneTap gibt sein Design
 * als rund 11.000 Zeichen Inline-CSS mit !important aus, ohne eine einzige
 * CSS-Variable. Jede Farbe darin muesste einzeln ueberschrieben werden, und
 * das naechste Plugin-Update verschoebe die Selektoren.
 *
 * DER RICHTIGE WEG FUER DAS BEDIENFELD fuehrt ueber die Plugin-Einstellungen
 * im Backend: Dort steht die Akzentfarbe als eine Einstellung, aus der genau
 * dieses Inline-CSS erzeugt wird. Siehe ENTSCHEIDUNGEN.md.
 *
 * WARUM HIER !important STEHT: Weil das Plugin es tut. Die Regel, gegen die
 * angeschrieben wird, lautet im Original
 *   .onetap-container-toggle .onetap-toggle img {
 *       background: #0048fe !important; border-radius: 50% !important; }
 * Ohne !important gaebe es keine Moeglichkeit, sie zu erreichen. Das
 * vorangestellte "html" hebt die Spezifitaet zusaetzlich an, damit die
 * Ladereihenfolge keine Rolle spielt.
 */

/*
 * DIE FLAECHE LIEGT AUF DEM KNOPF, DAS ICON IM BILD DARIN.
 *
 * Das muss getrennt sein, weil das Icon einen Filter braucht (siehe unten)
 * und "filter" das ganze Element einfaerbt, den Hintergrund eingeschlossen.
 * Beides auf einem Element ergab einen blauen Knopf mit schwarzem Symbol -
 * das Gelb war mitinvertiert worden.
 *
 * box-sizing und die feste Groesse stehen hier, damit der Knopf mit Kontur
 * genau 58 x 58 misst wie der Borlabs-Knopf. Ohne sie waere er 60 breit:
 * Das Plugin gibt dem Bild 58 fest mit und legt den Rahmen aussen darum.
 */
html .onetap-container-toggle .onetap-toggle {
	box-sizing: border-box !important;
	width: 58px !important;
	height: 58px !important;
	padding: 0 !important;
	background: var(--dc-gelb) !important;
	border: var(--dc-kontur) !important;
	box-shadow: var(--dc-schatten) !important;
}

html .onetap-container-toggle .onetap-toggle img {
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	border-radius: 0 !important;

	/*
	 * DAS ICON IST WEISS, NICHT SCHWARZ.
	 *
	 * Die Datei Original_Logo_Icon.svg traegt fill="#fff" fest im Quelltext
	 * und ist als <img> eingebunden - ihre Farbe laesst sich von aussen
	 * nicht setzen. Auf der gelben Flaeche waere sie unsichtbar.
	 *
	 * invert(1) dreht das Weiss zu Schwarz. Es wirkt nicht auf den Alpha-
	 * Kanal, der durchsichtige Grund bleibt also durchsichtig, und in der
	 * Datei steht nur dieser eine Pfad - es gibt nichts, was sonst noch
	 * umkippen koennte. Der Hintergrund steht deshalb eine Regel hoeher.
	 */
	filter: invert(1);
}

/*
 * Beim Ueberfahren vergroessert das Plugin den Knopf um zehn Prozent. An
 * seine Stelle tritt dieselbe Bewegung wie bei .dc-btn: Der Schatten faellt
 * weg, der Knopf rueckt nach.
 */
html .onetap-container-toggle .onetap-toggle:hover {
	transform: translate(-3px, 3px) !important;
	box-shadow: none !important;
}

html .onetap-container-toggle .onetap-toggle img:hover {
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {

	html .onetap-container-toggle .onetap-toggle:hover {
		transform: none !important;
	}
}

/*
 * Der Fokusrahmen. Das Plugin nimmt beim Fokus den Umriss weg
 * (outline: 0 !important) und ersetzt ihn durch nichts - mit der Tastatur
 * waere der Knopf dann nicht auffindbar. Hier kommt er zurueck.
 */
html .onetap-container-toggle .onetap-toggle:focus-visible {
	outline: 2px solid var(--dc-schwarz) !important;
	outline-offset: 3px !important;
}