/* ==========================================================================
   Karp & Partner Elektrotechnik, Stylesheet
   --------------------------------------------------------------------------
   Mobile-first: die Basisregeln gelten für das Handy, die Media Queries
   bauen von dort nach oben auf. Getestet ab 320px Viewport-Breite.

   Gliederung
     01  Schriften
     02  Farben und Maße
     03  Reset und Grundlagen
     04  Hilfsklassen
     05  Typografie
     06  Knöpfe
     07  Kopfbereich und Navigation
     08  Hero
     09  Vertrauensleiste
     10  Textsektion
     11  Leistungskarten
     12  Split-Sektion
     13  CTA-Band
     14  Fußbereich
     15  Anrufleiste (nur Handy)
     16  Formular
     17  Kontaktseite
     18  Rechtstexte
     19  Karten ohne Foto
     20  Fragen und Antworten
     21  Einzugsgebiet
   ========================================================================== */


/* == 01  Schriften ========================================================
   Lokal ausgeliefert. Keine Verbindung zu fonts.googleapis.com, damit beim
   Seitenaufruf keine Besucher-IP an Dritte geht, eine der Voraussetzungen
   dafür, dass diese Seite ohne Cookie-Banner auskommt.
   Details siehe assets/fonts/LIESMICH.txt
   ------------------------------------------------------------------------ */

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Inter liegt als variable Schrift vor: eine Datei deckt 100 bis 900 ab. */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-var.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}


/* == 02  Farben und Maße ================================================== */

:root {
	--akzent:       #f0a315;
	--akzent-dunkel:#d18c0a;
	--dunkel:       #12181f;
	--dunkel-weich: #1b232d;
	--tinte:        #1e2833;
	--papier:       #faf8f5;
	--papier-tief:  #f2eee8;
	--linie:        #e3dfd8;
	/* --linie erreicht auf Papier nur 1,25:1 und taugt deshalb für reine
	   Trennstriche, nicht für die Umrisse von Bedienelementen. Dafür gibt es
	   --linie-stark mit 3,51:1 (WCAG 1.4.11 verlangt 3:1). */
	--linie-stark:  #8d8375;
	/* Bernstein hebt sich auf Papier nur mit 1,99:1 ab. Gefüllte Knöpfe
	   bekommen dort diesen dunkleren Rand aus derselben Farbfamilie: 3,40:1. */
	--akzent-rand:  #b87a09;
	--grau:         #5a6470;
	--weiss:        #ffffff;

	/* Auf dunklem Grund: aufgehellte Varianten für ausreichenden Kontrast. */
	--auf-dunkel:        #ffffff;
	--auf-dunkel-weich:  #b9c2cd;

	--schrift-text:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--schrift-titel: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--breite:      72rem;
	--rand:        clamp(1.25rem, 5vw, 3rem);
	--sektion:     clamp(3.5rem, 9vw, 7rem);
	--radius:      4px;

	--kopf-hoehe:  4rem;
}

@media (min-width: 64em) {
	:root { --kopf-hoehe: 4.75rem; }
}


/* == 03  Reset und Grundlagen ============================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Sprungmarken landen nicht unter dem klebenden Kopfbereich. */
	scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--papier);
	color: var(--tinte);
	font-family: var(--schrift-text);
	font-size: 1rem;
	line-height: 1.65;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	/* Lange Wörter wie „Sanierung & Modernisierung" oder E-Mail-Adressen
	   dürfen bei 320px nicht seitlich aus dem Layout laufen. */
	overflow-wrap: break-word;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

svg { display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--schrift-titel);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
	hyphens: auto;
}

p, ul, ol { margin: 0; }

/* Fokusring: auf hellem Grund anthrazit, auf dunklem Grund bernstein.
   Bernstein auf Papier käme nur auf rund 2:1 und wäre als Indikator
   unbrauchbar, deshalb der Wechsel. */
:focus-visible {
	outline: 3px solid var(--dunkel);
	outline-offset: 3px;
	border-radius: 2px;
}

.auf-dunkel :focus-visible,
.kopf :focus-visible,
.fuss :focus-visible,
.cta-band :focus-visible {
	outline-color: var(--akzent);
}


/* == 04  Hilfsklassen ===================================================== */

.huelle {
	width: 100%;
	max-width: var(--breite);
	margin-inline: auto;
	padding-inline: var(--rand);
}

.huelle--schmal { max-width: 52rem; }

.sektion { padding-block: var(--sektion); }

/* Nur für Screenreader sichtbar. */
.nur-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sprungmarke {
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	z-index: 100;
	transform: translateY(-200%);
	background: var(--dunkel);
	color: var(--auf-dunkel);
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius);
	font-weight: 600;
	text-decoration: none;
}

.sprungmarke:focus { transform: translateY(0); }


/* == 05  Typografie ======================================================= */

.titel-xl {
	font-size: clamp(2.125rem, 1.5rem + 3vw, 3.75rem);
	letter-spacing: -0.025em;
}

.titel-l {
	font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
	letter-spacing: -0.02em;
}

.titel-m { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); }

/* Kleine Auszeichnungszeile über einer Überschrift. */
.dachzeile {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--grau);
	margin-bottom: 1rem;
}

.dachzeile::before {
	content: '';
	width: 2rem;
	height: 3px;
	background: var(--akzent);
	flex: none;
}

.auf-dunkel .dachzeile { color: var(--auf-dunkel-weich); }

.vorspann {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	color: var(--grau);
	line-height: 1.7;
}

.auf-dunkel .vorspann { color: var(--auf-dunkel-weich); }

.fliess p + p { margin-top: 1.15em; }

/* Zwischenüberschriften und Listen in einem Fließtext. Ohne diese Regeln
   kleben sie am Folgeabsatz. Der globale Reset setzt alle Abstände auf
   null, und .fliess kannte bisher nur den Abstand zwischen zwei Absätzen. */
.fliess h2,
.fliess h3 { margin-top: 2em; }

.fliess h2:first-child,
.fliess h3:first-child { margin-top: 0; }

.fliess h2 + p,
.fliess h3 + p { margin-top: 0.6em; }

.fliess ul {
	margin: 1.15em 0 0;
	padding-left: 1.25em;
	list-style: disc;
}

.fliess li + li { margin-top: 0.4em; }


/* == 06  Knöpfe ===========================================================
   Bernstein trägt anthrazitfarbene Schrift (rund 8:1). Umgekehrt wäre
   Bernstein als Textfarbe auf hellem Grund nicht lesbar.
   Alle Knöpfe erfüllen die 44px-Mindesthöhe für Berührungsziele.
   ------------------------------------------------------------------------ */

.knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--radius);
	font-family: var(--schrift-text);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.knopf svg { flex: none; }

.knopf--voll {
	background: var(--akzent);
	border-color: var(--akzent-rand);
	color: var(--dunkel);
}

.knopf--voll:hover { background: var(--akzent-dunkel); border-color: var(--akzent-rand); }

/* Auf dunklem Grund trägt die Bernsteinfläche selbst schon 8,46:1, dort darf
   der Rand wieder die Flächenfarbe haben, sonst wirkt der Knopf umrandet. */
.kopf .knopf--voll,
.auf-dunkel .knopf--voll {
	border-color: var(--akzent);
}

.kopf .knopf--voll:hover,
.auf-dunkel .knopf--voll:hover { border-color: var(--akzent-dunkel); }

.knopf--rand {
	background: transparent;
	border-color: var(--linie-stark);
	color: var(--tinte);
}

.knopf--rand:hover { border-color: var(--dunkel); background: var(--papier-tief); }

.auf-dunkel .knopf--rand {
	border-color: rgba(255, 255, 255, 0.35);
	color: var(--auf-dunkel);
}

.auf-dunkel .knopf--rand:hover {
	border-color: var(--auf-dunkel);
	background: rgba(255, 255, 255, 0.08);
}

.knopf--dunkel {
	background: var(--dunkel);
	border-color: var(--dunkel);
	color: var(--auf-dunkel);
}

.knopf--dunkel:hover { background: var(--dunkel-weich); border-color: var(--dunkel-weich); }

.knopf-reihe {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Ab Handy-Querformat nebeneinander statt gestapelt. */
@media (min-width: 30em) {
	.knopf-reihe { flex-direction: row; flex-wrap: wrap; }
}


/* == 07  Kopfbereich und Navigation =======================================
   Auf dem Handy bleibt der Telefonknopf immer sichtbar, anrufen ist die
   häufigste Handlung auf einer Handwerker-Website. Nur die übrige
   Navigation klappt hinter den Schalter.
   ------------------------------------------------------------------------ */

.kopf {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--dunkel);
	color: var(--auf-dunkel);
}

.kopf__innen {
	max-width: var(--breite);
	margin-inline: auto;
	padding-inline: var(--rand);
	min-height: var(--kopf-hoehe);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* -- Wortmarke -- */

.marke {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-right: auto;
	padding-block: 0.625rem;   /* Berührungsziel auf mindestens 44px bringen */
	text-decoration: none;
	color: var(--auf-dunkel);
	min-width: 0;
}

.marke__blitz {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	color: var(--akzent);
}

.marke__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.marke__name {
	font-family: var(--schrift-titel);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	line-height: 1.1;
	white-space: nowrap;
}

.marke__zusatz {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--auf-dunkel-weich);
	line-height: 1.4;
}

@media (min-width: 26em) {
	.marke__name { font-size: 1.0625rem; }
	.marke__blitz { width: 1.75rem; height: 1.75rem; }
}

/* -- Telefonknopf im Kopfbereich -- */

.kopf__tel {
	min-height: 2.75rem;
	padding: 0.5rem 0.875rem;
	gap: 0.5rem;
	font-size: 0.9375rem;
	flex: none;
}

/* Unter 30em nur das Symbol: bei 320px reicht der Platz sonst nicht für
   Wortmarke, Nummer und Menüschalter nebeneinander. Der Screenreader-Text
   in .kopf__tel-lang bleibt erhalten. */
.kopf__tel-lang { display: none; }

@media (min-width: 30em) {
	.kopf__tel-lang { display: inline; }
	.kopf__tel { padding-inline: 1.125rem; }
}

/* -- Menüschalter -- */

.nav-schalter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	padding: 0;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.42);   /* 4,08:1, vorher 2,26:1 */
	border-radius: var(--radius);
	color: var(--auf-dunkel);
	cursor: pointer;
}

.nav-schalter:hover { border-color: rgba(255, 255, 255, 0.75); }

.nav-schalter__strich {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	position: relative;
	transition: background-color 0.15s ease;
}

.nav-schalter__strich::before,
.nav-schalter__strich::after {
	content: '';
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform 0.18s ease;
}

.nav-schalter__strich::before { top: -6px; }
.nav-schalter__strich::after  { top: 6px; }

/* Geöffnet: die Striche werden zum Kreuz. */
.nav-schalter[aria-expanded='true'] .nav-schalter__strich { background: transparent; }
.nav-schalter[aria-expanded='true'] .nav-schalter__strich::before { transform: translateY(6px) rotate(45deg); }
.nav-schalter[aria-expanded='true'] .nav-schalter__strich::after  { transform: translateY(-6px) rotate(-45deg); }

/* -- Navigation -- */

.hauptnav {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--dunkel-weich);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: none;
}

.hauptnav[data-offen='true'] { display: block; }

.hauptnav__liste {
	list-style: none;
	margin: 0;
	padding: 0.5rem var(--rand) 1.25rem;
	max-width: var(--breite);
	margin-inline: auto;
}

.hauptnav__link {
	display: block;
	padding: 0.875rem 0;
	font-weight: 600;
	text-decoration: none;
	color: var(--auf-dunkel);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hauptnav__link:hover { color: var(--akzent); }

.hauptnav__link[aria-current='page'] { color: var(--akzent); }

/* Ab Tablet: Navigation dauerhaft sichtbar, Schalter weg.
   62em statt der sonst üblichen 56em: Mit vier Menüpunkten reicht der Platz
   neben Logo und Telefonknopf bei 56em nicht mehr. Der Wert steht auch in
   assets/js/site.js (matchMedia). Beide müssen gleich bleiben, sonst
   bleibt data-offen beim Zurückdrehen hängen. */
@media (min-width: 62em) {
	.nav-schalter { display: none; }

	.hauptnav {
		position: static;
		display: block;
		background: transparent;
		border: 0;
		margin-right: 1.25rem;
	}

	.hauptnav__liste {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		padding: 0;
	}

	.hauptnav__link {
		padding: 0.25rem 0;
		border-bottom: 2px solid transparent;
		font-size: 0.9375rem;
	}

	.hauptnav__link[aria-current='page'] {
		color: var(--auf-dunkel);
		border-bottom-color: var(--akzent);
	}
}


/* == 08  Hero =============================================================
   Handy: Foto oben im 3:2-Ausschnitt, Textfeld darunter.
   Ab 56em nebeneinander.
   ------------------------------------------------------------------------ */

.hero {
	background: var(--papier);
	color: var(--tinte);
}

.hero__gitter {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 90rem;
	margin-inline: auto;
}

.hero__bild {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--papier-tief);   /* Platzhalter, solange das Foto lädt */
}

.hero__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Der Elektriker sitzt links im Bild und muss auch im schmalen
	   Ausschnitt sichtbar bleiben. */
	object-position: 34% center;
}

.hero__inhalt {
	padding: clamp(2.25rem, 7vw, 4.5rem) var(--rand);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
}

.hero__inhalt > * { max-width: 34rem; }

@media (min-width: 56em) {
	.hero__gitter {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
		min-height: min(78vh, 44rem);
	}

	.hero__bild {
		aspect-ratio: auto;
		height: 100%;
	}

	.hero__inhalt {
		padding-inline: clamp(2.5rem, 5vw, 4.5rem);
	}
}

@media (min-width: 75em) {
	.hero__gitter { grid-template-columns: 1.05fr 1fr; }
}


/* == 09  Vertrauensleiste ================================================= */

.vertrauen {
	background: var(--papier-tief);
	color: var(--tinte);
	border-top: 1px solid var(--linie);
	border-bottom: 1px solid var(--linie);
}

.vertrauen__liste {
	list-style: none;
	margin: 0;
	padding: 1.5rem 0;   /* auch inline auf 0, sonst bleibt das <ul>-Standardpolster */
	display: grid;
	/* Nicht repeat(2, 1fr): ein festes Zweispalten-Raster lief bei 320px
	   über, weil lange Wörter wie „Familienunternehmen“ eine Mindestbreite
	   erzwingen. auto-fit legt die Spaltenzahl nach dem vorhandenen Platz
	   fest und fällt bei sehr schmalen Geräten auf eine Spalte zurück. */
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 1rem 1.5rem;
}

.vertrauen__punkt {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	hyphens: auto;             /* trennt nach Sprachregeln … */
	overflow-wrap: anywhere;   /* … und notfalls auch ohne */
}

.vertrauen__punkt svg {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
	margin-top: 0.1em;
	/* Auf hellem Grund käme Bernstein nur auf 1,83:1 und verschwämme.
	   Der Bernstein-Akzent sitzt hier stattdessen im Balken der Dachzeile
	   und in den Knöpfen. */
	color: var(--dunkel);
}

@media (min-width: 56em) {
	.vertrauen__liste {
		grid-template-columns: repeat(4, auto);
		justify-content: space-between;
		gap: 2rem;
		padding: 1.25rem 0;
	}
	.vertrauen__punkt { font-size: 0.9375rem; }
}


/* == 10  Textsektion ====================================================== */

.text-sektion { text-align: left; }

.text-sektion .titel-l { margin-bottom: 1.25rem; }

@media (min-width: 56em) {
	.text-sektion {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: clamp(2rem, 5vw, 4.5rem);
		align-items: start;
	}
	.text-sektion .titel-l { margin-bottom: 0; }
}


/* == 11  Leistungskarten ==================================================
   Handy einspaltig, ab 44em zweispaltig. Die Karten sind bewusst kein
   Raster mit fester Höhe: unterschiedlich lange Texte sollen sich
   ausgleichen, ohne dass Lücken entstehen.
   ------------------------------------------------------------------------ */

.leistungen { background: var(--papier-tief); }

.leistungen__kopf { margin-bottom: clamp(2rem, 4vw, 3rem); }

.karten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 44em) {
	.karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.karte {
	display: flex;
	flex-direction: column;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	overflow: hidden;
}

.karte__bild {
	aspect-ratio: 3 / 2;
	background: var(--papier-tief);
}

.karte__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.karte__text {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	flex: 1;
}

.karte__nummer {
	font-family: var(--schrift-titel);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--grau);
}

.karte__titel {
	font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
}

.karte__beschreibung {
	color: var(--grau);
	font-size: 0.9375rem;
	line-height: 1.65;
}


/* == 12  Split-Sektion ====================================================
   Auf sehr schmalen Viewports wird das Bild ausgeblendet: es trägt keine
   Information, kostet aber Ladezeit und Scrollweg.
   ------------------------------------------------------------------------ */

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.split__bild {
	/* Handy: breiter, flacher Ausschnitt. Ein hohes Bild würde hier den
	   halben Bildschirm fressen. Desktop: hochkant, wie aufgenommen. */
	aspect-ratio: 16 / 10;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--papier-tief);
}

.split__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

@media (min-width: 40em) {
	.split__bild { aspect-ratio: 2 / 1; }
}

@media (min-width: 56em) {
	.split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
	.split__bild { aspect-ratio: 3 / 4; }
	.split__bild img { object-position: center center; }
}

.merkmale {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.375rem;
}

.merkmal { display: flex; gap: 0.875rem; }

.merkmal__symbol {
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	display: grid;
	place-items: center;
	background: var(--akzent);
	border-radius: var(--radius);
}

.merkmal__symbol svg {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--dunkel);
}

.merkmal__titel {
	font-family: var(--schrift-titel);
	font-weight: 700;
	font-size: 1.0625rem;
	margin-bottom: 0.15rem;
}

.merkmal__text {
	color: var(--grau);
	font-size: 0.9375rem;
	line-height: 1.6;
}


/* == 13  CTA-Band ========================================================= */

.cta-band {
	background: var(--dunkel);
	color: var(--auf-dunkel);
}

.cta-band__innen {
	display: grid;
	gap: 1.75rem;
	padding-block: clamp(2.75rem, 7vw, 4.5rem);
}

@media (min-width: 56em) {
	.cta-band__innen {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 3rem;
	}
}


/* == 14  Fußbereich ======================================================= */

.fuss {
	background: var(--dunkel-weich);
	color: var(--auf-dunkel);
	font-size: 0.9375rem;
}

.fuss__gitter {
	display: grid;
	gap: 2.25rem;
	padding-block: clamp(2.75rem, 6vw, 4rem);
}

@media (min-width: 44em) {
	.fuss__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
	.fuss__gitter { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}

.fuss__titel {
	font-family: var(--schrift-titel);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--auf-dunkel-weich);
	margin-bottom: 1rem;
}

.fuss__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.125rem;
}

.fuss__liste a,
.fuss__unten a {
	display: inline-block;
	padding-block: 0.5rem;
}

.fuss a { color: var(--auf-dunkel); text-decoration: none; }
.fuss a:hover { color: var(--akzent); text-decoration: underline; }

.fuss__marke { color: var(--auf-dunkel-weich); line-height: 1.7; }

.fuss__marke .marke { margin-bottom: 1rem; }

.fuss__unten {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: var(--auf-dunkel-weich);
}

@media (min-width: 44em) {
	.fuss__unten {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}


/* == 15  Anrufleiste (nur Handy) ==========================================
   Erscheint erst, wenn der Hero durchgescrollt ist, solange die
   Telefonnummer ohnehin auf dem Schirm steht, wäre sie doppelt.
   Wird per JavaScript umgeschaltet; ohne JavaScript bleibt sie verborgen,
   die Telefonnummer steht dann weiterhin im Kopfbereich.
   ------------------------------------------------------------------------ */

.anrufleiste {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	display: none;
	gap: 0.625rem;
	padding: 0.625rem;
	padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
	background: var(--dunkel);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	transform: translateY(100%);
	transition: transform 0.22s ease;
}

.anrufleiste[data-sichtbar='true'] { transform: translateY(0); }

.anrufleiste .knopf { flex: 1; min-height: 3rem; padding-inline: 0.75rem; }

@media (max-width: 47.99em) {
	.anrufleiste { display: flex; }

	/* Platz schaffen, damit die Leiste den Fußbereich nicht verdeckt. */
	body[data-anrufleiste-platz='true'] { padding-bottom: 4.5rem; }
}


/* == 16  Formular =========================================================
   Wichtig: font-size mindestens 16px auf allen Eingabefeldern. Darunter
   zoomt iOS Safari beim Fokussieren automatisch in das Feld hinein und
   verschiebt das ganze Layout.
   ------------------------------------------------------------------------ */

.formular {
	display: grid;
	gap: 1.25rem;
}

.feld { display: grid; gap: 0.4rem; }

.feld__label {
	font-weight: 600;
	font-size: 0.9375rem;
}

.feld__pflicht { color: var(--grau); font-weight: 400; }

.feld__hinweis {
	font-size: 0.8125rem;
	color: var(--grau);
}

.feld input,
.feld select,
.feld textarea {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 0.875rem;
	font-family: inherit;
	font-size: 1rem;          /* niemals kleiner, siehe Kommentar oben */
	line-height: 1.5;
	color: var(--tinte);
	background: var(--weiss);
	border: 2px solid var(--linie-stark);
	border-radius: var(--radius);
	transition: border-color 0.15s ease;
}

.feld textarea {
	min-height: 9rem;
	resize: vertical;
}

.feld select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235a6470' d='M8 11.5 2.5 6l1.1-1.1L8 9.3l4.4-4.4L13.5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 1rem;
	padding-right: 2.75rem;
}

.feld input:hover,
.feld select:hover,
.feld textarea:hover { border-color: var(--grau); }

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
	border-color: var(--dunkel);
	outline: 3px solid var(--akzent);
	outline-offset: 0;
}

.feld [aria-invalid='true'] { border-color: #b3261e; }

.feld__fehler {
	font-size: 0.875rem;
	font-weight: 600;
	color: #b3261e;
	display: none;
}

.feld__fehler[data-sichtbar='true'] { display: block; }

/* -- Statusmeldung -- */

.formular__status {
	display: none;
	padding: 1rem 1.125rem;
	border-radius: var(--radius);
	border-left: 4px solid var(--akzent);
	background: var(--papier-tief);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.formular__status[data-sichtbar='true'] { display: block; }

.formular__status[data-art='fehler'] {
	border-left-color: #b3261e;
	background: #fdf1f0;
}

.formular__status[data-art='erfolg'] {
	border-left-color: #1e7a48;
	background: #eef7f1;
}

.formular__status a { color: var(--tinte); }

.formular__fusszeile {
	font-size: 0.8125rem;
	color: var(--grau);
}

/* Der Link zur Datenschutzerklärung steht in grauem Kleingedrucktem und
   ginge dort unter. Deshalb volle Textfarbe und die bernsteinfarbene
   Unterstreichung wie bei den übrigen Links im Fließtext. */
.formular__fusszeile a {
	color: var(--tinte);
	text-decoration-color: var(--akzent);
	text-decoration-thickness: 2px;
}


/* == 17  Kontaktseite =====================================================
   Auf dem Handy stehen die Kontaktdaten VOR dem Formular. Wer schnell
   anrufen will, soll nicht an einem langen Formular vorbeiscrollen müssen.
   Auf dem Desktop kehrt sich die Reihenfolge um: dort ist links/rechts
   nebeneinander ohnehin gleichzeitig sichtbar, und das Formular gehört
   an die Hauptposition.
   ------------------------------------------------------------------------ */

.seitenkopf {
	background: var(--papier);
	color: var(--tinte);
	border-bottom: 1px solid var(--linie);
	padding-block: clamp(2.5rem, 7vw, 4.5rem);
}

.seitenkopf .vorspann { max-width: 44rem; margin-top: 1rem; }

.kontakt-gitter {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 60em) {
	.kontakt-gitter { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Schnellzugriff im Seitenkopf: Telefon und E-Mail stehen damit auf dem
   Handy vor dem Formular, ohne dass die Spalten per `order` getauscht
   werden müssten. Ein solcher Tausch würde die sichtbare Reihenfolge von
   der Tab-Reihenfolge trennen. */
.schnellkontakt {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

@media (min-width: 30em) {
	.schnellkontakt { flex-direction: row; flex-wrap: wrap; }
}

.datenkarte {
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 4vw, 2rem);
}

.datenliste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}

.datenliste__punkt { display: flex; gap: 0.875rem; }

.datenliste__symbol {
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	display: grid;
	place-items: center;
	background: var(--papier-tief);
	border-radius: var(--radius);
}

.datenliste__symbol svg { width: 1.125rem; height: 1.125rem; color: var(--dunkel); }

.datenliste__bezeichnung {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--grau);
	margin-bottom: 0.2rem;
}

/* Berührungsziel mindestens 44px hoch, damit Telefon und E-Mail auf dem
   Handy sicher zu treffen sind. */
.datenliste__wert {
	font-family: var(--schrift-titel);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--tinte);
	text-decoration: none;
	display: inline-block;
}

a.datenliste__wert {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

a.datenliste__wert { text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a.datenliste__wert:hover { color: var(--dunkel); }

.datenliste__zusatz {
	font-size: 0.875rem;
	color: var(--grau);
	margin-top: 0.35rem;
}

.datenliste__zusatz a {
	display: inline-block;
	padding-block: 0.5rem;
}

.karriere {
	background: var(--papier-tief);
	border-left: 4px solid var(--akzent);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	margin-top: clamp(2.5rem, 6vw, 4rem);
}

.karriere .titel-m { margin-bottom: 0.875rem; }


/* == 18  Rechtstexte ======================================================
   Lange Fließtexte. Auf dem Handy führt ein Inhaltsverzeichnis mit
   Sprungmarken durch die Abschnitte, ohne das wäre die
   Datenschutzerklärung auf einem kleinen Display kaum navigierbar.
   ------------------------------------------------------------------------ */

.rechtstext { max-width: 48rem; }

.rechtstext h2 {
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	margin-top: 2.75rem;
	margin-bottom: 1rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--linie);
}

.rechtstext h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }

.rechtstext h3 {
	font-size: 1.125rem;
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
}

.rechtstext p,
.rechtstext ul {
	margin-top: 0.875rem;
	color: var(--tinte);
	font-size: 0.9375rem;
	line-height: 1.75;
}

.rechtstext ul { padding-left: 1.25rem; display: grid; gap: 0.5rem; }

.rechtstext a {
	color: var(--tinte);
	text-decoration: underline;
	text-decoration-color: var(--akzent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.rechtstext dl { margin: 1rem 0 0; }
.rechtstext dt { font-weight: 600; margin-top: 1rem; }
.rechtstext dd { margin: 0.25rem 0 0; color: var(--grau); }

.rechtstext dd a {
	display: inline-block;
	padding-block: 0.5rem;
}

/* Großgeschriebene Rechtsabsätze (Widerspruchsrecht) sind als Fließtext
   schwer lesbar, hier etwas Luft und ein ruhigerer Grauton. */
.rechtstext .versalien {
	background: var(--papier-tief);
	padding: 1rem 1.125rem;
	border-radius: var(--radius);
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--grau);
}

.inhalt-vz {
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 2.5rem;
}

.inhalt-vz__titel {
	font-family: var(--schrift-titel);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--grau);
	margin-bottom: 0.875rem;
}

.inhalt-vz ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.125rem;
	counter-reset: vz;
}

.inhalt-vz li { counter-increment: vz; }

.inhalt-vz a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--tinte);
	text-decoration: none;
}

.inhalt-vz a::before {
	content: counter(vz) '. ';
	color: var(--grau);
	font-weight: 400;
}

.inhalt-vz a:hover { text-decoration: underline; text-decoration-color: var(--akzent); }

.hinweiskasten {
	background: var(--papier-tief);
	border-left: 4px solid var(--akzent);
	border-radius: var(--radius);
	padding: 1.125rem 1.375rem;
	margin-top: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.7;
}


/* == 19  Karten ohne Foto ==================================================
   Für Leistungen, zu denen kein passendes Foto vorliegt. Ein beliebiges
   Stockbild einzusetzen, das die Leistung nicht zeigt, wäre schlechter als
   gar keines: Es beansprucht denselben Platz und sagt nichts. Stattdessen
   tritt hier ein ruhiges Feld mit dem Symbol der Leistung an die Stelle des
   Bildes, gleiches Seitenverhältnis wie .karte__bild, damit die Karten in
   einer Reihe gleich hoch beginnen.
   ------------------------------------------------------------------------ */

.karte__symbolfeld {
	aspect-ratio: 3 / 2;
	background: var(--dunkel);
	display: grid;
	place-items: center;
}

.karte__symbolfeld svg {
	width: 3.25rem;
	height: 3.25rem;
	color: var(--akzent);
}


/* == 20  Fragen und Antworten =============================================
   <details>/<summary> statt eigener Aufklapp-Logik: funktioniert ohne
   JavaScript, ist über die Tastatur bedienbar und wird von Screenreadern
   von sich aus als aufklappbar angesagt. Der Text steht vollständig im
   Quelltext. Versteckte Antworten, die nur für Suchmaschinen da sind,
   verstoßen gegen Googles Richtlinien.
   ------------------------------------------------------------------------ */

.fragen {
	margin-top: 2.25rem;
	border-top: 1px solid var(--linie);
}

.frage { border-bottom: 1px solid var(--linie); }

.frage__titel {
	cursor: pointer;
	padding: 1.125rem 2.75rem 1.125rem 0;
	position: relative;
	font-family: var(--schrift-titel);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--tinte);
	/* Das Standard-Dreieck abschalten. Beide Zeilen sind nötig: die erste
	   für Firefox und Chrome, die zweite für Safari. */
	list-style: none;
}

.frage__titel::-webkit-details-marker { display: none; }

/* Winkel statt Dreieck, dreht sich beim Aufklappen. */
.frage__titel::after {
	content: '';
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--akzent-rand);
	border-bottom: 2px solid var(--akzent-rand);
	transform: translateY(-75%) rotate(45deg);
	transition: transform 0.15s ease;
}

.frage[open] .frage__titel::after {
	transform: translateY(-25%) rotate(-135deg);
}

.frage__titel:hover { color: var(--akzent-rand); }

.frage__titel:focus-visible {
	outline: 2px solid var(--akzent-rand);
	outline-offset: 3px;
	border-radius: 2px;
}

.frage__text {
	padding: 0 2.75rem 1.5rem 0;
	color: var(--grau);
	line-height: 1.75;
}

.frage__text p + p { margin-top: 0.75rem; }
.frage__text a { color: inherit; }

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


/* == 21  Einzugsgebiet =====================================================
   Die Orte sind nach Entfernung gebündelt, nicht nach Himmelsrichtung. Ein
   Radialdiagramm wäre hier unlesbar geworden: Sieben der siebzehn Orte
   liegen im selben schmalen Sektor nach Süden (der Korridor Richtung
   Lübeck), ihre Beschriftungen lägen übereinander.
   ------------------------------------------------------------------------ */

.gebiet {
	display: grid;
	gap: 2.25rem;
	margin-top: 2.5rem;
}

.gebiet__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	border-bottom: 2px solid var(--akzent);
	padding-bottom: 0.5rem;
}

.gebiet__weite {
	font-family: var(--schrift-titel);
	font-weight: 700;
	font-size: 1.1875rem;
	color: var(--tinte);
}

.gebiet__zusatz {
	font-size: 0.875rem;
	color: var(--grau);
}

.gebiet__orte {
	list-style: none;
	margin: 1.125rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gebiet__ort {
	background: var(--papier-tief);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	padding: 0.4375rem 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.gebiet__km {
	color: var(--grau);
	/* Gleiche Ziffernbreite, damit die Zahlen nicht zappeln. */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}