/*
Theme Name: GWT
Theme URI: https://gwt.co.at
Author: Gütegemeinschaft Wassertechnik
Description: Block-Theme für die Website der Gütegemeinschaft Wassertechnik (GWT). Baut auf dem Design-Brief in docs/design/design-brief.md auf.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 0.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gwt
*/

/*
 * Der größte Teil der Gestaltung steht in theme.json (Farben, Schriftgrößen,
 * Abstände), damit sie in der ganzen Seite und im Editor gleich wirkt.
 * Hier stehen nur Dinge, die theme.json (noch) nicht abbilden kann:
 * sichtbarer Tastaturfokus (Pflicht, siehe Design-Brief 3.3), Linkfarbe auf
 * hellblauer Fläche, und der „Zum Inhalt springen“-Link.
 */

/* Zum Inhalt springen: sichtbar, sobald man ihn mit Tab anspringt. */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0.5rem;
	z-index: 100000;
	background: #ffffff;
	color: #0e2c42;
	padding: 0.75rem 1.25rem;
	border-radius: 2px;
	text-decoration: underline;
}

.skip-link:focus {
	top: 0.5rem;
}

/*
 * Sichtbarer Tastaturfokus – Pflichtregel aus Design-Brief Abschnitt 3.3.
 * Diese Regel darf NICHT entfernt oder durch „outline: none“/„outline: 0“
 * ersetzt werden.
 */
:focus-visible {
	outline: 3px solid #0e2c42;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #ffffff;
	border-radius: 2px;
}

/*
 * Pflichtregel aus Abschnitt 1.3: Auf der hellblauen Fläche (gwt-hellblau)
 * müssen auch Links dunkelblau sein, nicht gwt-blau – sonst nur 1,91:1.
 */
.has-gwt-hellblau-background-color a,
.band a {
	color: #0e2c42;
}

/* Textlinks sind immer unterstrichen (Abschnitt 3.2 / WCAG 1.4.1). */
.wp-site-blocks a:not(.wp-block-button__link) {
	text-decoration: underline;
}

/* Externe Links im Fußbereich sollen keine doppelte Unterstreichung
   von Icon-Elementen bekommen, sonst bleibt es beim Standard. */

/* Tabellen brechen am Handy nicht aus dem sichtbaren Bereich. */
.wp-block-table {
	overflow-x: auto;
}

/*
 * Platzhalter-Kästen (offene Punkte, die auf eine Angabe von Georg warten):
 * eigener gestrichelter Rahmen in gwt-linie, damit sie nicht wie fertiger
 * Inhalt aussehen. Ergänzt Block 7, Prüfrunde Punkt 5.
 */
.gwt-platzhalter {
	border: 2px dashed #7b8894 !important;
	background-color: #ffffff;
}

.gwt-platzhalter-label {
	display: inline-block;
	margin: 0 0 0.5rem 0;
	padding: 0.15rem 0.6rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #57646f;
	background-color: #f4f7f9;
	border-radius: 2px;
}

/*
 * Breite Tabellen am Handy: gilt für ALLE Tabellen der Seite, ohne dass eine
 * Redakteurin etwas dafür tun muss. Statt unsichtbar am Rand abgeschnitten
 * zu werden, wird die Tabelle waagrecht scrollbar UND es steht ein
 * sichtbarer Hinweis „Nach rechts wischen …“ davor.
 * Ergänzt Block 7, Prüfrunde Punkt 2/10 (Mobiltauglichkeit).
 */
@media (max-width: 782px) {
	.wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-top: 1px solid #dde5ea;
		border-bottom: 1px solid #dde5ea;
	}

	.wp-block-table::before {
		content: "Tabelle nach rechts wischen, um alle Spalten zu sehen";
		display: block;
		font-size: 0.8125rem;
		color: #57646f;
		margin-bottom: 0.4rem;
	}

	.wp-block-table table {
		min-width: 640px;
	}
}

/*
 * Ausnahme von der Scroll-Tabelle oben: die Richtlinien-Tabelle auf
 * "Richtlinien & Checklisten" bekommt am Handy Karten statt einer
 * wisch-baren Tabelle. Grund (Design-Brief 4.5): "Leseprobe" und
 * "anfragen" sind die wichtigste Handlung der ganzen Website und dürfen
 * nicht hinter einer Wischgeste verschwinden. Gilt NUR für Tabellen mit
 * der Klasse .gwt-richtlinien-tabelle – alle anderen Tabellen (Rechts-
 * rahmen, Zertifizierte Unternehmen, Datenschutz …) bleiben bei der
 * Scroll-Lösung oben, die dafür laut ux-designer passt.
 */
@media (max-width: 782px) {
	.wp-block-table.gwt-richtlinien-tabelle {
		overflow-x: visible;
		border-top: none;
		border-bottom: none;
	}

	.wp-block-table.gwt-richtlinien-tabelle::before {
		display: none;
	}

	.gwt-richtlinien-tabelle table {
		min-width: 0;
		width: 100%;
	}

	.gwt-richtlinien-tabelle thead {
		display: none;
	}

	.gwt-richtlinien-tabelle table,
	.gwt-richtlinien-tabelle tbody,
	.gwt-richtlinien-tabelle tr,
	.gwt-richtlinien-tabelle td {
		display: block;
		width: 100%;
	}

	.gwt-richtlinien-tabelle tr {
		border: 1px solid #dde5ea;
		border-radius: 4px;
		padding: 1rem;
		margin-bottom: 1rem;
	}

	.gwt-richtlinien-tabelle tr:last-child {
		margin-bottom: 0;
	}

	.gwt-richtlinien-tabelle td {
		border: none;
		padding: 0.2rem 0;
	}

	/* Nummer (z. B. "M03"): groß und fett ganz oben auf der Karte. */
	.gwt-richtlinien-tabelle td[data-label="Nr."] {
		font-size: 1.375rem;
		font-weight: 700;
		color: #0e2c42;
	}

	/* Titel direkt darunter. */
	.gwt-richtlinien-tabelle td[data-label="Titel"] {
		font-weight: 600;
		color: #2b3640;
		margin-bottom: 0.25rem;
	}

	/* Ausgabedatum sichtbar, mit Feldname davor. */
	.gwt-richtlinien-tabelle td[data-label="Ausgabe"] {
		color: #57646f;
		font-size: 0.9375rem;
		margin-bottom: 0.75rem;
	}

	.gwt-richtlinien-tabelle td[data-label="Ausgabe"]::before {
		content: "Ausgabe: ";
		font-weight: 600;
	}

	/* Leseprobe: normaler Link, direkt sichtbar. */
	.gwt-richtlinien-tabelle td[data-label="Leseprobe"] {
		margin-bottom: 0.5rem;
	}

	/* Anfragen: als Schaltfläche, damit die wichtigste Handlung auffällt. */
	.gwt-richtlinien-tabelle td[data-label="Anfragen"] a {
		display: inline-block;
		background-color: #0b6e91;
		color: #ffffff;
		font-weight: 600;
		text-decoration: none;
		padding: 0.6rem 1.2rem;
		border-radius: 4px;
	}

	.gwt-richtlinien-tabelle td[data-label="Anfragen"] a:hover {
		background-color: #08536e;
	}
}

/* =========================================================================
 * ÜBERARBEITUNG STARTSEITE (16.09.2026, Wunsch von Georg)
 * Modernere Gestaltung, Hintergrundvideo, Karten, aufgeräumter Kopfbereich.
 * Farbwerte kommen aus theme.json; hier stehen nur Layout-Regeln, die
 * theme.json nicht abbilden kann.
 * ========================================================================= */

:root {
	--gwt-nacht: #071a2b;
	--gwt-dunkelblau: #0e2c42;
	--gwt-blaugrau: #16334a;
	--gwt-blau: #0b6e91;
	--gwt-blau-dunkel: #08536e;
	--gwt-hellblau: #0dace2;
	--gwt-akzent: #7fdcf5;
	--gwt-blau-hell: #e8f4f9;
	--gwt-flaeche: #f4f7f9;
	--gwt-text: #2b3640;
	--gwt-text-leise: #57646f;
	--gwt-linie: #7b8894;
	--gwt-linie-leise: #dde5ea;
	--gwt-gruen: #14653a;
	--gwt-breite: 73.75rem;
}

/* ---------------------------------------------------------- Kopfbereich --
 * Vorher brach der Kopfbereich auf dem Desktop in drei Zeilen um. Jetzt:
 * eine schmale Meta-Zeile oben, darunter EINE Zeile mit Logo, Hauptmenü
 * und der Schaltfläche „Richtlinie anfragen“.
 */
.gwt-kopf {
	background-color: var(--gwt-dunkelblau);
}

.gwt-meta {
	background-color: var(--gwt-nacht);
	font-size: 0.875rem;
}

.gwt-meta .wp-block-group,
.gwt-kopf-haupt {
	max-width: var(--gwt-breite);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.gwt-meta p {
	margin: 0;
	padding-block: 0.5rem;
	text-align: right;
	max-width: none;
}

.gwt-meta a {
	color: #ffffff;
	text-decoration: none;
	opacity: 0.85;
}

.gwt-meta a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Zwei bewusste Zeilen: oben Logo und die Schaltfläche, darunter das
 * Hauptmenü über die volle Breite. Seit das Menü der Struktur der alten
 * Website folgt, sind die Beschriftungen zu lang, um mit Logo und
 * Schaltfläche in eine Zeile zu passen. Ein gewollter Umbruch sieht
 * besser aus als ein zufälliger. */
.gwt-kopf-haupt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	padding-block: 0.875rem;
}

.gwt-kopf-haupt > .wp-block-site-logo {
	flex: 0 0 auto;
	order: 1;
}

.gwt-kopf-haupt > .wp-block-buttons {
	order: 2;
	margin-left: auto;
}

.gwt-kopf-haupt > nav.wp-block-navigation,
.gwt-kopf-haupt > .wp-block-navigation {
	order: 3;
	flex: 1 0 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 0.5rem;
}

/* Hauptmenü: Beschriftungen der alten Website, gleichmäßige Abstände. */
.gwt-kopf-haupt .wp-block-navigation {
	justify-content: flex-start;
	/* Schrift und Abstand wachsen mit der Fensterbreite. Nötig, seit das
	 * Menü die Struktur der alten Website hat: "Service für Ausschreibungen"
	 * und "Richtlinien & Checklisten" sind lang, und das Menü soll trotzdem
	 * in eine Zeile passen. */
	font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
	font-weight: 600;
}

.gwt-kopf-haupt .wp-block-navigation .wp-block-navigation__container {
	gap: clamp(0.75rem, 1.1vw, 1.375rem);
}

.gwt-kopf-haupt .wp-block-navigation a {
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
}

.gwt-kopf-haupt .wp-block-navigation a:hover {
	border-bottom-color: var(--gwt-akzent);
}

/* Untermenüs: dunkle Karte statt heller Standardkasten. */
.gwt-kopf-haupt .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--gwt-blaugrau);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 4px;
	padding-block: 0.375rem;
	min-width: 17rem;
}

.gwt-kopf-haupt .wp-block-navigation .wp-block-navigation__submenu-container a {
	color: #ffffff;
	font-weight: 400;
	padding: 0.5rem 1rem;
	border-bottom: none;
}

.gwt-kopf-haupt .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background-color: rgba(255, 255, 255, 0.1);
	text-decoration: underline;
}

.gwt-kopf-haupt .wp-block-buttons {
	flex: 0 0 auto;
	margin: 0;
}

.gwt-kopf-haupt .wp-block-button__link {
	white-space: nowrap;
	font-size: 0.9375rem;
	padding: 0.7rem 1.25rem;
}

/* Die sieben Menüpunkte brauchen zusammen rund 950 px. Neben Logo und
   Schaltfläche blieben davon nur etwa 780 px übrig – das Menü würde
   umbrechen. Darum bekommt es auf dem Desktop eine eigene, ruhige Zeile:
   Zeile 1 = Logo und „Richtlinie anfragen“, Zeile 2 = das Menü. */
@media (min-width: 783px) {
	.gwt-kopf-haupt {
		flex-wrap: wrap;
		row-gap: 0;
		padding-bottom: 0;
	}

	.gwt-kopf-haupt .wp-block-navigation {
		order: 3;
		flex-basis: 100%;
		flex-grow: 1;
		justify-content: flex-start;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		margin-top: 0.875rem;
		padding-block: 0.625rem;
	}
}

/* Handy: Logo links, daneben Menü-Schaltfläche und Aktion. */
@media (max-width: 782px) {
	.gwt-meta p {
		text-align: left;
	}

	.gwt-kopf-haupt {
		gap: 0.75rem;
	}

	.gwt-kopf-haupt .wp-block-navigation {
		flex: 0 0 auto;
		order: 3;
	}

	.gwt-kopf-haupt .wp-block-button__link {
		font-size: 0.875rem;
		padding: 0.6rem 0.9rem;
	}

	.gwt-kopf-haupt > .wp-block-site-logo img {
		max-width: 150px;
		height: auto;
	}
}

/* Überlagerung des Handy-Menüs in den GWT-Farben. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--gwt-dunkelblau) !important;
	color: #ffffff !important;
	padding: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open a {
	color: #ffffff !important;
	text-decoration: none;
	font-size: 1.125rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container a {
	font-size: 1rem;
	opacity: 0.85;
}

/* -------------------------------------------------------- Titelbereich --
 * „Cover“-Block mit Hintergrundvideo. Das Video liegt auf dem eigenen
 * Server (kein YouTube, kein CDN – DSGVO). Darüber liegt ein dunkler
 * Verlauf, damit der Text mindestens 4,5:1 Kontrast hat.
 */
.gwt-hero {
	position: relative;
	min-height: 33rem;
	/* Standbild als Rückfallebene: sichtbar, solange das Video lädt,
	   und dauerhaft am Handy, wo das Video bewusst nicht startet. */
	background-image: url("assets/video/wasser-standbild.jpg");
	background-size: cover;
	background-position: center;
	background-color: var(--gwt-nacht);
}

.gwt-hero .wp-block-cover__background {
	background: linear-gradient(
		100deg,
		rgba(7, 26, 43, 0.93) 0%,
		rgba(7, 26, 43, 0.86) 42%,
		rgba(7, 26, 43, 0.55) 100%
	) !important;
	opacity: 1 !important;
}

.gwt-hero .wp-block-cover__inner-container {
	max-width: var(--gwt-breite);
	margin-inline: auto;
	width: 100%;
	padding-inline: 1.5rem;
}

.gwt-hero-kicker {
	display: inline-block;
	margin: 0 0 1rem 0;
	padding-left: 0.875rem;
	border-left: 3px solid var(--gwt-akzent);
	color: var(--gwt-akzent);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	max-width: none;
}

.gwt-hero h1 {
	font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.625rem);
	max-width: 24ch;
	margin-bottom: 1rem;
	color: #ffffff;
}

.gwt-hero-text {
	max-width: 42ch;
	font-size: 1.125rem;
	color: #e8f4f9;
	margin-bottom: 1.75rem;
}

.gwt-hero .wp-block-buttons {
	gap: 0.875rem;
}

/* Zweite Schaltfläche: heller Rahmen auf dunklem Grund. */
.gwt-hero .is-style-outline .wp-block-button__link,
.gwt-hero .wp-block-button.gwt-knopf-hell .wp-block-button__link {
	background-color: transparent;
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.7);
}

.gwt-hero .wp-block-button.gwt-knopf-hell .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: #ffffff;
}

/* Schaltfläche zum Anhalten des Videos – Pflicht nach WCAG 2.2.2,
   weil sich der Hintergrund länger als 5 Sekunden bewegt. */
.gwt-video-schalter {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.9rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #ffffff;
	background-color: rgba(7, 26, 43, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	cursor: pointer;
}

.gwt-video-schalter:hover {
	background-color: rgba(7, 26, 43, 0.95);
}

/* Wer in seinem Gerät „Bewegung reduzieren“ eingestellt hat, sieht das
   Standbild statt des Videos. */
@media (prefers-reduced-motion: reduce) {
	.gwt-hero video {
		display: none;
	}
}

@media (max-width: 782px) {
	.gwt-hero {
		min-height: 26rem;
	}

	/* Am Handy liegt der Text über der ganzen Breite, darum eine
	   gleichmäßige Abdunklung. 80 % sind das Minimum, damit weißer Text
	   auch über den hellsten Stellen des Standbildes 4,5:1 erreicht. */
	.gwt-hero .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgba(7, 26, 43, 0.8) 0%,
			rgba(7, 26, 43, 0.9) 100%
		) !important;
	}

	/* Der Cover-Block zentriert seinen Inhalt am Handy von sich aus –
	   hier soll der Text aber linksbündig bleiben wie am Desktop. */
	.gwt-hero,
	.gwt-hero .wp-block-cover__inner-container,
	.gwt-hero .wp-block-cover__inner-container > * {
		text-align: left;
	}

	.gwt-hero h1,
	.gwt-hero-text {
		max-width: none;
	}

	.gwt-hero .wp-block-buttons {
		justify-content: flex-start;
	}

	.gwt-hero .wp-block-button {
		width: 100%;
	}

	.gwt-hero .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* ------------------------------------------------------- Kennzahlenband --
 * Schmaler Streifen direkt unter dem Titelbereich.
 */
.gwt-fakten {
	border-bottom: 1px solid var(--gwt-linie-leise);
}

.gwt-fakten .wp-block-column {
	padding: 1.5rem 0.5rem;
	text-align: center;
}

.gwt-fakten .gwt-fakt-zahl {
	display: block;
	margin: 0 0 0.15rem 0;
	max-width: none;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--gwt-blau);
}

.gwt-fakten .gwt-fakt-text {
	margin: 0;
	max-width: none;
	font-size: 0.9375rem;
	color: var(--gwt-text-leise);
}

@media (max-width: 782px) {
	.gwt-karten .wp-block-column > .wp-block-image img {
		aspect-ratio: 16 / 9;
	}

	.gwt-karten .wp-block-column {
		box-shadow: 0 1px 3px rgba(7, 26, 43, 0.08);
	}

	.gwt-fakten .wp-block-columns {
		gap: 0 !important;
	}

	.gwt-fakten .wp-block-column {
		padding: 1rem 0.5rem;
		border-bottom: 1px solid var(--gwt-linie-leise);
	}

	.gwt-fakten .wp-block-column:last-child {
		border-bottom: none;
	}
}

/* ------------------------------------------------------------ Abschnitte --
 */
.gwt-abschnitt {
	padding-block: 4.5rem;
}

.gwt-abschnitt-hell {
	background-color: var(--gwt-flaeche);
}

.gwt-abschnitt > .wp-block-group__inner-container > h2,
.gwt-abschnitt h2.gwt-abschnitt-titel {
	margin-bottom: 0.5rem;
}

.gwt-abschnitt-vorspann {
	margin-top: 0;
	margin-bottom: 2.5rem;
	color: var(--gwt-text-leise);
	font-size: 1.0625rem;
}

@media (max-width: 782px) {
	.gwt-abschnitt {
		padding-block: 3rem;
	}
}

/* ---------------------------------------------------------------- Karten --
 * Die drei Zielgruppen stehen auf dem Desktop nebeneinander statt
 * untereinander. Jede Karte ist als Ganzes anklickbar wirkend, aber der
 * echte Link bleibt der Textlink – wichtig für Screenreader.
 */
/* Alle Karten gleich hoch. Ohne das richtet sich jede Karte nach ihrem
 * eigenen Text, und die Links am Fuß stehen auf unterschiedlicher Höhe. */
.gwt-karten.wp-block-columns {
	align-items: stretch;
}

.gwt-karten .wp-block-column {
	background-color: #ffffff;
	border: 1px solid var(--gwt-linie-leise);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.gwt-karten .wp-block-column > .wp-block-image {
	margin: 0;
}

.gwt-karten .wp-block-column > .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.gwt-karte-inhalt {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.gwt-karte-inhalt h2,
.gwt-karte-inhalt h3 {
	font-size: 1.35rem;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.gwt-karte-inhalt p {
	margin-top: 0;
	max-width: none;
	color: var(--gwt-text-leise);
}

/* Der Link wird an den unteren Rand der Karte geschoben, damit die Links
 * aller drei Karten auf gleicher Höhe stehen – auch wenn die Überschrift
 * einmal zweizeilig ist oder ein Text kürzer ausfällt.
 * Die Regel muss genauer sein als „.gwt-karte-inhalt p" weiter oben,
 * sonst setzt die den Abstand wieder auf 0. */
.gwt-karte-inhalt .gwt-karte-link {
	margin-top: auto;
	margin-bottom: 0;
	font-weight: 600;
}

.gwt-karte-link a {
	text-decoration: none;
	border-bottom: 2px solid var(--gwt-linie-leise);
	padding-bottom: 2px;
}

.gwt-karte-link a:hover {
	border-bottom-color: var(--gwt-blau);
}

.gwt-karte-link a::after {
	content: " →";
	white-space: nowrap;
}

/* ------------------------------------------- Ruhende Zertifizierungen --
 * Unternehmen mit ausgesetzter Zertifizierung bleiben sichtbar, treten aber
 * zurück (Entscheidung E-09). Nur die Schriftfarbe wird gedämpft – der
 * Kontrast bleibt über 4.5:1, sonst wäre die Liste nicht mehr barrierefrei.
 */
.gwt-ruhend td,
.gwt-ruhend th {
	color: var(--gwt-text-leise);
}

/* ------------------------------------------------------- Bild-Text-Block --
 */
.gwt-bildtext .wp-block-media-text__media img {
	border-radius: 6px;
}

.gwt-bildtext .wp-block-media-text__content {
	padding-inline: 0 0 0 2.5rem;
}

@media (max-width: 782px) {
	.gwt-bildtext .wp-block-media-text__content {
		padding: 1.5rem 0 0 0;
	}
}

/* Startseite, Abschnitt „Über die GWT“ ohne Foto (23.10.2026): ein
 * schmaler Textblock in der Mitte, so breit wie das Abschluss-Band, damit
 * die Zeilen gut lesbar bleiben. */
.gwt-ueber-text {
	max-width: 45rem;
	margin-inline: auto;
}

.gwt-ueber-text > :first-child {
	margin-top: 0;
}

/* ------------------------------------------------------- Abschluss-Band --
 * Dunkler Abschnitt mit der wichtigsten Handlung („Richtlinie anfragen“).
 */
.gwt-band-dunkel {
	background-color: var(--gwt-dunkelblau);
	color: #ffffff;
	padding-block: 3.5rem;
}

.gwt-band-dunkel h2 {
	color: #ffffff;
	margin-top: 0;
}

.gwt-band-dunkel p {
	color: var(--gwt-blau-hell);
	max-width: 46ch;
}

.gwt-band-dunkel a {
	color: var(--gwt-akzent);
}

.gwt-band-dunkel .wp-block-button__link {
	background-color: var(--gwt-hellblau);
	color: var(--gwt-nacht);
}

.gwt-band-dunkel .wp-block-button__link:hover {
	background-color: var(--gwt-akzent);
	color: var(--gwt-nacht);
}

/* Fokusrahmen auf dunklem Grund sichtbar halten. */
.gwt-hero :focus-visible,
.gwt-band-dunkel :focus-visible,
.gwt-kopf :focus-visible,
footer :focus-visible {
	outline-color: #ffffff;
	box-shadow: 0 0 0 6px rgba(7, 26, 43, 0.9);
}

/* ------------------------------------------- Absätze innerhalb Abschnitte --
 * WordPress zentriert in „constrained“-Bereichen jeden Block, der schmäler
 * ist als der Bereich. Absätze standen dadurch eingerückt unter ihrer
 * Überschrift. Gelöst ist das über den Aufbau: Jeder Abschnitt der
 * Startseite hat innen eine Gruppe im Fluss-Layout – dort wird nichts
 * zentriert, und die Begrenzung auf angenehme Zeilenlänge bleibt erhalten.
 * Deshalb steht hier bewusst KEINE Regel mit „!important“.
 */

.gwt-karte-inhalt p,
.gwt-fakten p {
	margin-inline: 0;
}

/* Kein weißer Streifen über und unter dem Kopfbereich. WordPress gibt
   jedem Block im Fluss einen oberen Abstand von 16 px. Über dem
   Kopfbereich ist der immer falsch; auf der Startseite soll außerdem der
   Titelbereich direkt am Kopfbereich anschließen. Auf allen anderen
   Seiten bleibt der Abstand erhalten. */
.wp-site-blocks > header:first-child {
	margin-block-start: 0;
}

/* Der „Zum Inhalt springen“-Link im Kopfbereich bekommt von WordPress einen
   oberen Abstand. Weil er ausgeblendet ist, wirkte der Abstand als weißer
   Streifen über der ganzen Seite. Der Kopfbereich regelt seine Abstände
   selbst. */
.gwt-kopf > * {
	margin-block-start: 0;
}

body.home .wp-site-blocks > main {
	margin-block-start: 0;
}

body.home .gwt-hero {
	margin-block-start: 0 !important;
}

/* Untermenüs breit genug, damit die Einträge nicht umbrechen.
   Gilt überall dort, wo das Menü als Balken erscheint.

   Die Grenze ist 783 px – dieselbe, ab der weiter unten das Burger-Menü
   übernimmt. So schließen sich die beiden Bereiche gegenseitig aus, und
   keine Regel muss die andere über die Reihenfolge im Stylesheet
   überstimmen. */
@media (min-width: 783px) {
	.gwt-kopf-haupt .wp-block-navigation .wp-block-navigation__submenu-container {
		width: max-content;
		/* Nie breiter als der Bildschirm, egal wie lang ein Eintrag ist.
		   Ohne diese Grenze wächst das Untermenü über den Fensterrand
		   hinaus, sobald jemand einen langen Menüpunkt anlegt. */
		max-width: min(24rem, calc(100vw - 2rem));
	}

	/* Das Untermenü hängt an der LINKEN Kante seines Menüpunkts und klappt
	   nach rechts auf.

	   Warum das hier stehen muss: Das Navigationsmenü trägt die Einstellung
	   „rechtsbündig“ (aus der Zeit, als es neben dem Logo in derselben Zeile
	   stand). WordPress hängt Untermenüs dann an die RECHTE Kante des
	   Menüpunkts und lässt sie nach links aufklappen. Seit das Menü in einer
	   eigenen Zeile über die ganze Breite steht, beginnt es aber links – und
	   das Untermenü des ersten Punktes („Über die GWT“) rutschte damit aus
	   dem Bild heraus: gemessen bis zu 151 px links außerhalb des
	   Fensters. Gemeldet von Georg am 18.09.2026. */
	.gwt-kopf-haupt .wp-block-navigation ul.wp-block-navigation__container
		> li.wp-block-navigation-item
		> .wp-block-navigation__submenu-container {
		/* WordPress setzt inset-inline-end. Beide Schreibweisen setzen, sonst
		   gewinnt die logische Eigenschaft und das Untermenü bleibt rechts
		   verankert. */
		inset-inline-start: 0;
		inset-inline-end: auto;
		left: 0;
		right: auto;
	}

	/* Der allerletzte Menüpunkt sitzt ganz rechts. Bekäme er eines Tages ein
	   Untermenü, ragte es nach rechts hinaus. Für ihn gilt deshalb die
	   umgekehrte Verankerung. Heute hat „Rechtsrahmen“ kein Untermenü –
	   die Regel ist eine Vorsorge für spätere Menüänderungen und wirkt
	   auch ohne JavaScript. */
	.gwt-kopf-haupt .wp-block-navigation ul.wp-block-navigation__container
		> li.wp-block-navigation-item:last-child
		> .wp-block-navigation__submenu-container {
		inset-inline-start: auto;
		inset-inline-end: 0;
		left: auto;
		right: 0;
	}

	/* Reicht der Platz nach rechts nicht, schiebt menue.js das Untermenü so
	   weit zurück, dass es im Bild bleibt. Die Verschiebung kommt als
	   Variable herein; ohne JavaScript bleibt sie 0 und alles funktioniert
	   trotzdem – nur eben ohne Feinjustierung. */
	.gwt-kopf-haupt .wp-block-navigation ul.wp-block-navigation__container
		> li.wp-block-navigation-item
		> .wp-block-navigation__submenu-container {
		transform: translateX(var(--gwt-menue-verschiebung, 0px));
	}

	.gwt-kopf-haupt .wp-block-navigation .wp-block-navigation__submenu-container a {
		white-space: nowrap;
	}
}

/* Handy-Menü: linksbündig und mit Umbruch. Ohne diese Regeln übernimmt die
   Überlagerung die rechtsbündige Ausrichtung des Desktop-Menüs – lange
   Einträge wurden dadurch am linken Rand abgeschnitten. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	width: 100%;
	padding-top: 1rem;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	align-items: flex-start;
	text-align: left;
	width: 100%;
	max-width: none;
	min-width: 0;
	padding-block: 0;
}

.wp-block-navigation__responsive-container.is-menu-open a {
	white-space: normal;
	width: 100%;
	padding-block: 0.4rem;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container a {
	padding-left: 1rem;
}

/* Trennlinie zwischen den Hauptpunkten, damit die Ebenen erkennbar sind. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > li {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 0.6rem;
	margin-bottom: 0.6rem;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > li:first-child {
	border-top: none;
}

/* ------------------------------------------------------------ Suchfeld --
 * Kompaktes Suchfeld in der Meta-Zeile. Vorher stand dort nur ein Link
 * „Suche“, der ins Leere führte – es gab weder ein Eingabefeld noch eine
 * Trefferseite.
 */
.gwt-meta-inhalt {
	gap: 1rem;
	padding-block: 0.35rem;
}

.gwt-meta .gwt-suche {
	margin: 0;
	width: 15rem;
	max-width: 100%;
}

.gwt-meta .gwt-suche .wp-block-search__inside-wrapper {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.08);
	padding: 0.1rem 0.1rem 0.1rem 0.75rem;
}

.gwt-meta .gwt-suche .wp-block-search__input {
	background: transparent;
	border: none;
	color: #ffffff;
	font-size: 0.875rem;
	padding-block: 0.3rem;
}

.gwt-meta .gwt-suche .wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, 0.7);
	opacity: 1;
}

.gwt-meta .gwt-suche .wp-block-search__button {
	background-color: transparent;
	border: none;
	color: #ffffff;
	padding: 0.25rem 0.5rem;
	min-width: 0;
}

.gwt-meta .gwt-suche .wp-block-search__button:hover {
	color: var(--gwt-akzent);
}

.gwt-meta .gwt-suche .wp-block-search__button svg {
	fill: currentColor;
	width: 1.25rem;
	height: 1.25rem;
}

@media (max-width: 782px) {
	.gwt-meta-inhalt {
		justify-content: space-between;
	}

	.gwt-meta .gwt-suche {
		width: 100%;
	}
}

/* --------------------------------------------- Such- und Fehlerseite --
 * Das Suchfeld auf der Trefferseite und der 404-Seite steht auf hellem
 * Grund und braucht darum andere Farben als das im Kopfbereich.
 */
main .wp-block-search__inside-wrapper {
	max-width: 32rem;
	border: 1px solid var(--gwt-linie-leise);
	border-radius: 4px;
	background-color: #ffffff;
}

main .wp-block-search__input {
	border: none;
	padding: 0.8rem 1rem;
	font-size: 1rem;
	color: var(--gwt-text);
}

main .wp-block-search__button {
	background-color: var(--gwt-blau);
	color: #ffffff;
	border: none;
	border-radius: 3px;
	font-weight: 600;
	padding: 0.7rem 1.25rem;
	margin: 0.25rem;
}

main .wp-block-search__button:hover {
	background-color: var(--gwt-blau-dunkel);
}

.gwt-fehler-nummer {
	margin-bottom: 0.25rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}

/* Trefferliste: jeder Treffer als abgesetzter Block. */
.gwt-treffer .wp-block-post-title {
	margin-bottom: 0.25rem;
}

.gwt-treffer .wp-block-post-title a {
	text-decoration: none;
}

.gwt-treffer .wp-block-post-title a:hover {
	text-decoration: underline;
}

.gwt-treffer .wp-block-post-excerpt {
	margin-top: 0;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--gwt-linie-leise);
}

/* --------------------------------------------------------- Brotkrumen --
 * Der Pfad „Startseite › Über die GWT › Gremien“ über der Überschrift.
 * Vorher stand dort nur ein Platzhaltertext.
 */
.gwt-brotkrumen {
	font-size: 0.9375rem;
	color: var(--gwt-text-leise);
	margin-bottom: 0.75rem;
	line-height: 1.5;
}

.gwt-brotkrumen a {
	color: var(--gwt-text-leise);
	text-decoration: underline;
}

.gwt-brotkrumen a:hover {
	color: var(--gwt-blau);
}

.gwt-brotkrumen-trenner {
	margin-inline: 0.15rem;
	color: var(--gwt-linie);
}

.gwt-brotkrumen [aria-current="page"] {
	color: var(--gwt-text);
	font-weight: 600;
}

/* Trefferüberschriften kleiner als normale Seitenüberschriften – in einer
   Liste soll der Titel den Text nicht erschlagen. */
.gwt-treffer .wp-block-post-title {
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.3;
}


/* ------------------------------------------------------------ Fußbereich --
 * Aufbau wie auf der alten Website: links Logo und Anschrift, rechts der
 * "Schnelleinstieg" in zwei Spalten, darunter eine schmale Zeile mit
 * Impressum, Datenschutz und Barrierefreiheit.
 */
.gwt-fuss {
	background-color: var(--gwt-dunkelblau);
	margin-top: 0;
}

.gwt-fuss-inhalt {
	max-width: var(--gwt-breite);
	margin-inline: auto;
	padding: 3rem 1.5rem 2rem;
}

/* Das Logo in Weiß. Als Hintergrundbild, weil der Fußbereich eine feste
 * Theme-Vorlage ist und keinen Medienverweis aus der Mediathek braucht.
 * Der Name steht direkt darunter als Text, das Bild ist also schmückend. */
.gwt-fuss-logo {
	background-image: url("assets/images/logo-weiss.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	height: 3.25rem;
	margin: 0 0 1.25rem;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gwt-fuss-adresse p {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	max-width: none;
}

.gwt-fuss-titel {
	margin: 0 0 1.25rem;
	font-size: 1.375rem;
	color: var(--gwt-weiss, #ffffff);
}

/* „Schnelleinstieg“ steht in der Mitte hervorgehoben, wie auf der alten
 * Seite. Der senkrechte Strich trennt ihn von der Anschrift. */
.gwt-fuss-schnelleinstieg {
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	padding-left: 2.5rem;
}

.gwt-fuss-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gwt-fuss-links li {
	margin-bottom: 0.6rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Die doppelten Pfeile der alten Seite. */
.gwt-fuss-links li::before {
	content: "» ";
	color: var(--gwt-akzent);
}

.gwt-fuss-links a,
.gwt-fuss-adresse a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.gwt-fuss-links a:hover,
.gwt-fuss-adresse a:hover {
	border-bottom-color: var(--gwt-akzent);
}

/* Alle Links im Fußbereich weiß statt blau: Das Blau hatte auf dem
 * dunklen Grund zu wenig Kontrast (Wunsch von Georg, 23.10.2026).
 * Auch für eine in WordPress selbst überarbeitete Fassung des
 * Fußbereichs: darum am footer-Element festgemacht, nicht nur an den
 * Klassen der Theme-Vorlage. */
footer.wp-block-group a:where(:not(.wp-element-button)),
footer.wp-block-group a:where(:not(.wp-element-button)):visited {
	color: var(--wp--preset--color--gwt-weiss, #ffffff);
}

footer.wp-block-group a:where(:not(.wp-element-button)):hover,
footer.wp-block-group a:where(:not(.wp-element-button)):focus-visible {
	color: var(--gwt-akzent);
}

.gwt-fuss-unten {
	background-color: var(--gwt-nacht);
	font-size: 0.875rem;
}

.gwt-fuss-unten > * {
	max-width: var(--gwt-breite);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* Beide Zeilen der unteren Leiste stehen im selben Raster wie der
 * Fußbereich darüber, damit sie bündig untereinander beginnen. */
.gwt-fuss-rechtliches {
	padding-top: 0.9rem;
	margin: 0 auto;
	max-width: var(--gwt-breite);
}

.gwt-fuss-unten .wp-block-shortcode {
	padding-bottom: 0.9rem;
	padding-inline: 1.5rem;
	margin: 0.25rem auto 0;
	max-width: var(--gwt-breite);
	color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 782px) {
	.gwt-fuss-schnelleinstieg {
		border-left: none;
		padding-left: 0;
		margin-top: 2rem;
	}

	.gwt-fuss-inhalt {
		padding: 2.5rem 1.25rem 1.5rem;
	}
}


/* --------------------------------------------- Langes Fachdokument --------
 * Verzeichnis am Seitenanfang und der Rücksprung dorthin. Gebraucht auf
 * „Zertifizierungssystem“: Die Seite ist lang, und Fachleute springen
 * gezielt zu einem nummerierten Abschnitt.
 */
.gwt-verzeichnis {
	background-color: var(--gwt-flaeche);
	border-left: 4px solid var(--gwt-blau);
	border-radius: 0 4px 4px 0;
	padding: 1.25rem 1.5rem;
	list-style: none;
	line-height: 1.9;
}

.gwt-verzeichnis li {
	margin: 0;
}

.gwt-zurueck {
	margin-top: 2rem;
	margin-bottom: 0;
	padding-top: 0.5rem;
	border-top: 1px solid var(--gwt-linie-leise);
	font-size: 0.875rem;
}

.gwt-zurueck a {
	color: var(--gwt-text-leise);
	text-decoration: none;
}

.gwt-zurueck a:hover {
	color: var(--gwt-blau);
	text-decoration: underline;
}

/* --------------------------------------------- Menü: Umschaltpunkt --------
 * Zwischen 600 und 782 px passt das Balkenmenü nicht mehr in die Zeile.
 * Weil es rechtsbündig ausgerichtet ist, werden die ERSTEN Punkte nach
 * links aus dem Bild geschoben – gemessen lagen „Über die GWT" und
 * „Service für Ausschreibungen" dort vollständig außerhalb des Fensters,
 * ohne Bildlaufleiste, also unerreichbar.
 *
 * WordPress schaltet bei der Einstellung „Überlagerung nur am Handy" erst
 * unter 600 px auf das Burger-Menü um. Diese Regeln ziehen den Umschaltpunkt
 * auf 782 px vor: Ab dort erscheint das Burger-Symbol, und das Menü klappt
 * als Überlagerung über die ganze Breite auf – dieselbe Darstellung wie am
 * Handy, die es ohnehin schon gibt.
 *
 * Befund des security-reviewer vom 18.09.2026, nachgemessen bei 782, 760,
 * 700, 640 und 601 px.
 *
 * Die Grenze lautet 782.98px und nicht 782px: Bei Browser-Zoom oder einer
 * Windows-Skalierung von 125 % entstehen Fensterbreiten mit Nachkommastellen
 * wie 782,4 px. Die fielen sonst durch beide Regeln und bekämen wieder das
 * abgeschnittene Balkenmenü.
 */
@media (max-width: 782.98px) {
	.gwt-kopf-haupt .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.gwt-kopf-haupt
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Untermenü-Einträge in der Überlagerung linksbündig.
 *
 * Sie standen weit rechts eingerückt, weil das Untermenü seine Desktop-Breite
 * behielt und rechtsbündig ausgerichtet blieb. Am Handy fiel das kaum auf,
 * im neuen Bereich bis 782 px dagegen deutlich: Die Einträge klebten am
 * rechten Rand, weit weg von ihrem Hauptpunkt.
 *
 * Die Regel steht bewusst am Ende der Datei und ist genauer gefasst als die
 * Desktop-Regeln weiter oben, damit sie in der Überlagerung gewinnt.
 */
.wp-block-navigation__responsive-container.is-menu-open
	ul.wp-block-navigation__container
	li.wp-block-navigation-item
	> .wp-block-navigation__submenu-container {
	position: static;
	width: 100%;
	max-width: none;
	min-width: 0;
	transform: none;
	border: none;
	background-color: transparent;
}

/* =========================================================================
 * MITGLIEDERBEREICH
 * Anmeldeformular, Dokumentenliste, „Mein Konto". Der Aufbau steht in
 * inc/mitgliederbereich/ansicht.php.
 * ========================================================================= */

.gwt-mb {
	margin-top: 2.5rem;
}

.gwt-mb h2 {
	margin-top: 0;
}

/* ---------------------------------------------------------------- Hinweise */
.gwt-mb-hinweis {
	max-width: 36rem;
	margin: 0 0 1.5rem;
	padding: 0.875rem 1rem;
	border-left: 4px solid var(--gwt-blau);
	background-color: var(--gwt-blau-hell);
	color: var(--gwt-text);
}

.gwt-mb-hinweis--fehler {
	border-left-color: #a1261b;
	background-color: #fdf0ee;
}

.gwt-mb-hinweis--ok {
	border-left-color: var(--gwt-gruen);
	background-color: #eaf5ee;
}

/* -------------------------------------------------------------- Formulare */
.gwt-mb-formular {
	max-width: 26rem;
}

.gwt-mb-formular p {
	margin: 0 0 1.125rem;
	max-width: none;
}

.gwt-mb-formular label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
	color: var(--gwt-dunkelblau);
}

.gwt-mb-formular input[type="text"],
.gwt-mb-formular input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--gwt-linie);
	border-radius: 4px;
	background-color: #ffffff;
	color: var(--gwt-text);
	font: inherit;
}

.gwt-mb-formular .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

.gwt-mb-formular input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--gwt-blau);
}

.gwt-mb-formular input[type="submit"],
.gwt-mb-formular button[type="submit"] {
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: 4px;
	background-color: var(--gwt-blau);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.gwt-mb-formular input[type="submit"]:hover,
.gwt-mb-formular button[type="submit"]:hover {
	background-color: var(--gwt-blau-dunkel);
}

.gwt-mb-hilfe {
	display: block;
	margin-top: 0.3rem;
	font-size: 1rem;
	color: var(--gwt-text-leise);
}

.gwt-mb-vergessen {
	margin: 0.25rem 0 1.5rem;
}

/* ----------------------------------------------------- Leiste (angemeldet) */
.gwt-mb-leiste {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-bottom: 2rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--gwt-linie-leise);
	border-radius: 4px;
	background-color: var(--gwt-flaeche);
}

.gwt-mb-leiste p {
	margin: 0;
	max-width: none;
}

/* ----------------------------------------------------- Ordner und Dokumente */
.gwt-mb-ordner {
	margin: 2rem 0 0;
}

.gwt-mb-ordner-titel {
	margin: 0 0 0.25rem;
	color: var(--gwt-dunkelblau);
}

.gwt-mb-ordner-text {
	margin: 0 0 0.75rem;
	color: var(--gwt-text-leise);
}

/* Unterordner: eingerückt, mit feiner Linie links. */
.gwt-mb-ordner .gwt-mb-ordner {
	margin-left: 0.25rem;
	padding-left: 1rem;
	border-left: 3px solid var(--gwt-linie-leise);
}

.gwt-mb-dokumente {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.gwt-mb-dokument {
	margin: 0;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--gwt-linie-leise);
}

.gwt-mb-dokument:last-child {
	border-bottom: 0;
}

.gwt-mb-dokument-link {
	font-weight: 600;
}

.gwt-mb-dokument-angaben {
	font-size: 1rem;
	color: var(--gwt-text-leise);
	white-space: nowrap;
}

.gwt-mb-dokument-text {
	margin: 0.25rem 0 0;
	font-size: 1rem;
	color: var(--gwt-text-leise);
}

.gwt-mb-leer {
	margin: 0.5rem 0 0;
	color: var(--gwt-text-leise);
	font-style: italic;
}

/* ------------------------------------------------------------- Mein Konto */
.gwt-mb-konto {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--gwt-linie-leise);
}

.gwt-mb-passwort summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--gwt-blau);
}

.gwt-mb-passwort form {
	margin-top: 1rem;
}

@media (max-width: 782px) {
	.gwt-mb {
		margin-top: 1.5rem;
	}

	.gwt-mb-formular {
		max-width: none;
	}

	.gwt-mb-leiste {
		flex-direction: column;
	}

	/* Genug Fläche zum Tippen (WCAG 2.5.8: mindestens 24 px, hier 44 px). */
	.gwt-mb-dokument-link,
	.gwt-mb-abmelden a,
	.gwt-mb-vergessen a {
		display: inline-block;
		padding-block: 0.4rem;
	}
}

/* Nachbesserungen aus der Gestaltungsprüfung */
.gwt-mb a[href^="tel:"] { white-space: nowrap; }
.gwt-mb-passwort summary { padding-block: 0.75rem; cursor: pointer; }
.gwt-mb-formular label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; }
@media (max-width: 640px) {
	.gwt-mb-dokument a,
	.gwt-mb-abmelden a { padding-block: 0.6rem; display: inline-block; }
}