/* ==========================================================================
   AEO IT & Consulting — Stylesheet
   Alle Seiten benutzen dieselben Bausteine. Wer eine neue Seite baut,
   nimmt die Klassen von hier und schreibt kein Inline-CSS.
   ========================================================================== */

/* =====================
   SCHRIFT — selbst gehostet
   Vorher kam Inter von fonts.googleapis.com. Damit ging bei jedem Besuch die
   IP-Adresse des Besuchers an Google, ohne Einwilligung — genau darum ging es
   im Urteil des LG Muenchen I vom 20.01.2022 (Az. 3 O 17493/20) und der
   folgenden Abmahnwelle. Selbst gehostet entfaellt das Problem, und die Seite
   wird schneller: keine fremde DNS-Aufloesung, kein blockierender Fremdaufruf.

   Eine Variable Font deckt 300-700 ab. Der Browser laedt nur den Zeichensatz,
   den die Seite tatsaechlich braucht (unicode-range) - fuer deutsche Texte
   also nur "latin", rund 48 KB.
   Inter steht unter der SIL Open Font License.
===================== */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	               U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
	               U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
	               U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
	               U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================
   TOKENS
===================== */
:root {
	/* Flächen */
	--bg:          #f6f8fc;
	--bg-alt:      #eef2f9;   /* zweite helle Fläche, damit nicht alles gleich aussieht */
	--bg-card:     #ffffff;
	--bg-dark:     #070d18;
	--bg-dark2:    #0b1322;
	--bg-footer:   #04080f;

	/* Akzent */
	--accent:       #0ea5e9;
	--accent2:      #38bdf8;
	--accent-dark:  #0369a1;   /* Text auf hellem Grund: 5,9:1. Vorher #0284c7 = 4,1:1, unter WCAG AA */
	--accent-soft:  rgba(14,165,233,0.08);
	--accent-line:  rgba(14,165,233,0.18);
	/* Schrift AUF dem Akzent (Knöpfe): Weiß auf #0ea5e9 hatte 2,8:1, das hier 7,3:1 */
	--on-accent:    #04192b;
	--ok:           #22c55e;

	/* Text */
	--text:        #0b1220;
	--text-muted:  #56677f;
	--text-light:  rgba(255,255,255,0.66);
	--text-dim:    rgba(255,255,255,0.6);
	--white:       #ffffff;

	/* Linien */
	--border:      #e3e9f2;
	--border-dark: rgba(255,255,255,0.08);

	/* Typografie */
	--font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Radien */
	--radius-sm: 8px;
	--radius:    12px;
	--radius-lg: 18px;
	--radius-xl: 24px;

	/* Schatten — blaustichig statt grau, das wirkt weniger schmutzig */
	--shadow-sm: 0 1px 2px rgba(11,34,68,0.05), 0 2px 8px rgba(11,34,68,0.04);
	--shadow:    0 2px 4px rgba(11,34,68,0.05), 0 8px 24px rgba(11,34,68,0.07);
	--shadow-lg: 0 4px 8px rgba(11,34,68,0.05), 0 18px 48px rgba(11,34,68,0.11);
	--shadow-accent: 0 8px 28px rgba(14,165,233,0.28);

	/* Rhythmus */
	--sec-pad: 6.5rem;

	/* Fuer den dunklen Modus (13.10.2026): bisher feste Werte, hell unveraendert */
	--feld:          #ffffff;   /* Eingabefelder, Auswahlkacheln */
	--feld-gewaehlt: #f0f9ff;
	--linie-feld:    #e2e8f0;
	--linie-hover:   #cbd5e1;
	--text-stark:    #0f172a;
	--text-weich:    #4b5563;
	--auf-akzent-dunkel: #ffffff; /* Schrift auf --accent-dark */
	--featured-a:    #f2fbff;
	--featured-b:    #ffffff;
	color-scheme: light;
}

/* =====================
   BASE
===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Grundschrift 17 px statt 16 px (Alis Entscheidung 09.10.2026) — die
   Zielgruppe sind oft aeltere Menschen. Als Prozentwert, nicht als px: Wer im
   Browser eine groessere Schrift eingestellt hat, behaelt seinen Faktor.
   Alles in rem waechst mit (Abstaende eingeschlossen), alles in px nicht. */
html {
	font-size: 106.25%;
	scroll-behavior: smooth;
	/* Sprungmarken landen nicht unter dem klebenden Header */
	scroll-padding-top: 90px;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	background: var(--bg);
	color: var(--text);
	line-height: 1.65;
	font-size: 1rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; }
p { text-wrap: pretty; }

/* Preise und Zahlen mit gleicher Ziffernbreite */
.preis-amount, .stat-num, .fw-num, .anfahrt-preis, .karte-preis {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Tastaturbedienung sichtbar machen — fehlte komplett.
   Farbe nach Untergrund (WCAG 1.4.11, mindestens 3:1, gemessen 14.10.2026):
   heller Grund --accent-dark #0369a1 = 5,6–5,9:1 (vorher #38bdf8 = 1,9–2,1:1);
   im Dunkelmodus ist --accent-dark selbst #38bdf8. Dunkle Abschnitte auch im
   hellen Modus behalten #38bdf8 (8,8:1 auf --bg-dark). Der Ring sitzt mit
   outline-offset AUSSERHALB des Elements, zählt also gegen den Abschnitt,
   nicht gegen den Knopf. Neuer dunkler Abschnitt → hier eintragen.
   Geprüft per Browser-Test mit Kontrastmessung je Tab-Stopp. */
:focus-visible {
	outline: 2px solid var(--accent-dark);
	outline-offset: 3px;
	border-radius: 4px;
}
.header :focus-visible, .hero :focus-visible, .trust-bar :focus-visible,
.section-dark :focus-visible, .footer :focus-visible,
.meldeseite-kopf :focus-visible, .meldeseite-fuss :focus-visible {
	outline-color: var(--accent2);
}
:focus:not(:focus-visible) { outline: none; }

/* Sprunglink für Screenreader und Tastatur */
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--accent); color: var(--on-accent);
	padding: 0.8rem 1.4rem; border-radius: 0 0 var(--radius-sm) 0;
	font-size: 0.9rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

.container {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 1.5rem;
}
.container-narrow { max-width: 820px; }

/* =====================
   HEADER
===================== */
.header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(7,13,24,0.82);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border-bottom: 1px solid var(--border-dark);
	transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.header.scrolled {
	background: rgba(7,13,24,0.96);
	box-shadow: 0 8px 32px rgba(0,0,0,0.4);
	border-bottom-color: rgba(14,165,233,0.16);
}

.header-inner {
	display: flex; align-items: center;
	justify-content: space-between;
	gap: 1rem;
	/* Nur oben/unten: `padding: 0.85rem 0` ueberschrieb die Seitenraender von .container
	   (gleiche Spezifitaet, spaeter) — von 481 bis ~1200 px klebten Logo und Anrufen am
	   Rand, bis 768 px ragte der Menueknopf 8 px hinaus (18.10.2026, aktionsleiste_test.py). */
	padding-top: 0.85rem; padding-bottom: 0.85rem;
}

.logo { display: flex; align-items: center; gap: 0.65rem; color: var(--white); flex-shrink: 0; }
.logo-img { height: 38px; width: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-main {
	font-family: var(--font-display);
	font-weight: 700; font-size: 1rem;
	letter-spacing: 0.14em; color: var(--white);
}
.logo-sub { font-size: 0.7rem; color: rgba(255,255,255,0.62); letter-spacing: 0.05em; }

.nav { display: flex; align-items: center; gap: 0.15rem; }
.nav a {
	position: relative;
	color: rgba(255,255,255,0.68);
	/* ⚠ Werte seit 09.10.2026 auf 17-px-rem umgerechnet, damit die
	   Kopfzeile genau so breit bleibt wie vorher (14 px Schrift, 8/15 px
	   Innenabstand). Die Schwellen 1120/1240 px fuer .nav-tel und
	   .nav-kontakt sind auf diese Breite gemessen — mit mitwachsender
	   Schrift stiess der Anrufen-Knopf bei 1120 px an den Rand. */
	font-size: 0.8235rem; font-weight: 500;
	padding: 0.47rem 0.894rem; border-radius: var(--radius-sm);
	letter-spacing: 0.01em;
	transition: color 0.15s, background 0.15s;
}
.nav a:hover { color: var(--white); background: rgba(255,255,255,0.07); }
/* Aktuelle Seite markieren */
.nav a[aria-current="page"] { color: var(--white); }
.nav a[aria-current="page"]::after {
	content: ''; position: absolute;
	left: 0.95rem; right: 0.95rem; bottom: 0.15rem; height: 2px;
	background: var(--accent2); border-radius: 2px;
}
.nav-cta {
	display: inline-flex; align-items: center; gap: 0.45rem;
	background: var(--accent) !important;
	color: var(--on-accent) !important;
	margin-left: 0.6rem;
	font-weight: 600 !important;
	box-shadow: 0 2px 12px rgba(14,165,233,0.32);
	white-space: nowrap;
}
.nav-cta:hover { background: var(--accent2) !important; box-shadow: 0 4px 18px rgba(14,165,233,0.45); }
.nav-cta[aria-current="page"]::after { display: none; }

.menu-toggle {
	display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
	background: none; border: none; cursor: pointer; padding: 6px;
	/* Tippflaeche mind. 44 x 44 px (WCAG 2.5.5) — vorher 34 x 27 */
	min-width: 44px; min-height: 44px; margin-right: -8px;
}
.menu-toggle span {
	display: block; width: 24px; height: 2px;
	background: var(--white); border-radius: 2px;
	transition: transform 0.3s, opacity 0.2s;
}
.menu-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
	display: none; flex-direction: column;
	padding: 0.5rem 1.5rem 1.25rem;
	border-top: 1px solid var(--border-dark);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
	color: rgba(255,255,255,0.78); font-size: 0.95rem;
	padding: 0.8rem 0; border-bottom: 1px solid var(--border-dark);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav .mobile-cta {
	margin-top: 0.9rem; border-bottom: none;
	background: var(--accent); color: var(--on-accent);
	text-align: center; border-radius: var(--radius-sm);
	font-weight: 600; padding: 0.85rem;
}

/* =====================
   HERO
===================== */
.hero {
	position: relative; overflow: hidden;
	background: var(--bg-dark);
	padding: 6.5rem 0 5.5rem;
	color: var(--white);
	isolation: isolate;
}

/* Raster, das nach unten ausblendet statt hart abzuschneiden */
.hero-grid-bg {
	position: absolute; inset: 0; pointer-events: none; z-index: -2;
	background-image:
		linear-gradient(rgba(56,189,248,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(56,189,248,0.05) 1px, transparent 1px);
	background-size: 58px 58px;
	-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 30%, transparent 78%);
	mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 30%, transparent 78%);
}

/* Zwei Lichtquellen statt einer — gibt dem Dunkel Tiefe */
.hero::before {
	content: ''; position: absolute; z-index: -1; pointer-events: none;
	top: -240px; right: -180px; width: 720px; height: 720px;
	background: radial-gradient(circle, rgba(14,165,233,0.16) 0%, transparent 68%);
}
.hero::after {
	content: ''; position: absolute; z-index: -1; pointer-events: none;
	bottom: -320px; left: -220px; width: 680px; height: 680px;
	background: radial-gradient(circle, rgba(99,102,241,0.11) 0%, transparent 70%);
}

.hero-inner {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 400px;
	gap: 4.5rem; align-items: center;
}

.hero-badge {
	display: inline-flex; align-items: center; gap: 0.55rem;
	background: rgba(14,165,233,0.1);
	border: 1px solid rgba(14,165,233,0.28);
	color: var(--accent2);
	font-size: 0.78rem; font-weight: 500;
	padding: 0.4rem 0.95rem; border-radius: 999px;
	margin-bottom: 1.6rem; letter-spacing: 0.02em;
}
.badge-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--ok);
	box-shadow: 0 0 8px var(--ok);
	animation: blink 2.4s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.35} }

.hero h1 {
	font-size: clamp(2.1rem, 5.2vw, 3.5rem);
	font-weight: 700;
	line-height: 1.06; margin-bottom: 1.4rem;
	letter-spacing: -0.028em;
}
.hero h1 .accent {
	background: linear-gradient(100deg, var(--accent2) 10%, #7dd3fc 55%, var(--accent2) 90%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: var(--accent2);
}

/* Foto und Name direkt unter der H1 (09.10.2026, Mockup A) — „Sie bekommen
   eine Person" zeigen statt nur sagen. Steht nur auf der Startseite. */
.hero-person { display: flex; align-items: center; gap: 0.9rem; margin: -0.2rem 0 1.6rem; }
.hero-person picture { flex-shrink: 0; display: block; }
.hero-person-foto {
	display: block; width: 64px; height: 64px; border-radius: 50%;
	object-fit: cover; object-position: 50% 22%;
	border: 2px solid rgba(56,189,248,0.6);
}
.hero-person p { margin: 0; line-height: 1.35; }
.hero-person strong { display: block; color: var(--white); font-size: 1.05rem; font-weight: 700; }
.hero-person span { color: rgba(255,255,255,0.74); font-size: 0.94rem; }

.hero-desc {
	font-size: 1.06rem; color: rgba(255,255,255,0.78);
	max-width: 520px; margin-bottom: 2.2rem;
	line-height: 1.78; font-weight: 400;
}

.hero-btns { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2.1rem; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.ht-item {
	display: flex; align-items: center; gap: 0.42rem;
	font-size: 0.84rem; color: rgba(255,255,255,0.72);
}
.ht-item svg { color: var(--accent); flex-shrink: 0; }

/* Hero-Karte — Rand als Verlauf, damit sie nicht wie eine Box wirkt */
.hero-card {
	position: relative;
	background: linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
	border: 1px solid rgba(255,255,255,0.09);
	border-radius: var(--radius-xl);
	padding: 1.9rem;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.hero-card::before {
	content: ''; position: absolute; inset: -1px; border-radius: inherit;
	padding: 1px; pointer-events: none;
	background: linear-gradient(160deg, rgba(56,189,248,0.5), transparent 42%, transparent 60%, rgba(56,189,248,0.2));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
}
.hero-card-header {
	display: flex; align-items: center; gap: 0.5rem;
	font-size: 0.78rem; color: rgba(255,255,255,0.55);
	margin-bottom: 1.4rem; font-weight: 500;
	letter-spacing: 0.01em;
}
.status-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ok); box-shadow: 0 0 8px var(--ok);
	animation: blink 2.4s ease-in-out infinite;
	flex-shrink: 0;
}

.hero-services { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.4rem; }
.hero-service-item {
	display: flex; align-items: center; gap: 0.9rem;
	padding: 0.8rem 1rem; border-radius: var(--radius);
	background: rgba(255,255,255,0.035);
	border: 1px solid rgba(255,255,255,0.06);
	transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.hero-service-item:hover {
	border-color: rgba(56,189,248,0.32);
	background: rgba(56,189,248,0.06);
	transform: translateX(2px);
}

.hsi-icon {
	width: 38px; height: 38px; border-radius: 10px;
	background: linear-gradient(150deg, rgba(56,189,248,0.18), rgba(14,165,233,0.06));
	border: 1px solid rgba(56,189,248,0.16);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; color: var(--accent2);
}
.hero-service-item strong { display: block; font-size: 0.875rem; color: var(--white); font-weight: 600; margin-bottom: 1px; }
.hero-service-item small { font-size: 0.8rem; color: rgba(255,255,255,0.64); }

.hero-card-btn {
	display: block; text-align: center;
	background: var(--accent); color: var(--on-accent);
	padding: 0.85rem; border-radius: var(--radius);
	font-weight: 600; font-size: 0.9rem;
	letter-spacing: 0.01em;
	box-shadow: var(--shadow-accent);
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.hero-card-btn:hover { background: var(--accent2); transform: translateY(-2px); box-shadow: 0 12px 34px rgba(14,165,233,0.42); }

/* =====================
   BUTTONS
===================== */
.btn-primary, .btn-secondary, .btn-ghost {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	padding: 0.85rem 1.8rem; border-radius: var(--radius);
	font-weight: 600; font-size: 0.9rem;
	font-family: var(--font-body);
	letter-spacing: 0.01em; cursor: pointer;
	text-align: center; white-space: nowrap;
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
}
.btn-primary {
	background: var(--accent); color: var(--on-accent); border: 1px solid transparent;
	box-shadow: 0 2px 10px rgba(14,165,233,0.24);
}
.btn-primary:hover {
	background: var(--accent2);
	transform: translateY(-2px);
	box-shadow: var(--shadow-accent);
}
.btn-secondary {
	background: rgba(255,255,255,0.07);
	color: rgba(255,255,255,0.9);
	border: 1px solid rgba(255,255,255,0.14);
}
.btn-secondary:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.26); transform: translateY(-2px); }
/* Zweitbutton auf hellem Grund — vorher unsichtbar, weil weiß auf weiß */
.section:not(.section-dark) .btn-secondary,
.legal-page .btn-secondary {
	background: var(--bg-card); color: var(--text);
	border-color: var(--border); box-shadow: var(--shadow-sm);
}
.section:not(.section-dark) .btn-secondary:hover,
.legal-page .btn-secondary:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--bg-card); }

.btn-ghost { background: transparent; color: var(--accent-dark); border: 1px solid var(--accent-line); }
.btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent); }
/* Auf dunklem Grund war der dunkle Akzent kaum lesbar (3,3:1, entwicklung.html) */
.section-dark .btn-ghost, .hero .btn-ghost { color: var(--accent2); border-color: rgba(56,189,248,0.4); }
.section-dark .btn-ghost:hover, .hero .btn-ghost:hover { background: rgba(56,189,248,0.1); border-color: var(--accent2); }
.btn-full { width: 100%; }

/* Buttongruppe — vorher klebten Buttons ohne Abstand aneinander */
.btn-row {
	display: flex; flex-wrap: wrap; gap: 0.75rem;
	justify-content: center; align-items: center;
}

/* Knopf unter einem Karten-Raster. Gibt es, damit index.html dafuer kein
   style="margin-top:..." braucht — die Startseite ist die einzige Seite
   voellig ohne Inline-CSS, und das soll sie bleiben. */
.section-cta { margin-top: 2.5rem; }

/* =====================
   BELEG-FIGUR
   Bild + Bildunterschrift, mittig, begrenzte Breite. Fuer Messkarten auf
   entwicklung.html. Das Bild ist quadratisch (Google-Zuschnitt), deshalb
   die Deckelung — sonst frisst es auf dem Desktop die halbe Seite.
===================== */
/* Bild links, Erklaerung rechts. Auf schmalen Schirmen untereinander —
   Text ZUERST, damit auf dem Handy nicht erst ein Diagramm kommt, dessen
   Beschriftung dort ohnehin klein ist. Das macht `order` weiter unten. */
.beleg-inner {
	display: grid; grid-template-columns: minmax(0, 0.95fr) 1fr;
	gap: 3.5rem; align-items: center;
}
.beleg-text h3 {
	font-size: 1.06rem; font-weight: 650;
	color: var(--text); margin-bottom: 0.4rem; letter-spacing: -0.01em;
}
.beleg-text p {
	color: var(--text-muted); font-size: 0.96rem; line-height: 1.75;
	margin-bottom: 1.5rem; font-weight: 300;
}
.beleg-text p:last-child { margin-bottom: 0; }

.beleg-figur {
	max-width: 620px;
	margin: 0 auto;
}
.beleg-figur img {
	display: block; width: 100%; height: auto;
	border-radius: 18px;
	border: 1px solid var(--accent-line);
}
.beleg-figur figcaption {
	margin-top: 1rem;
	font-size: 0.92rem; line-height: 1.6;
	color: var(--text-muted);
	text-align: center;
}

/* =====================
   EINBLICKE — Artikel
===================== */
/* Kurzer Hero ohne Karte und ohne Vertrauensleiste. Fuer Seiten, die kein
   Angebot sind, sondern zum Lesen einladen. */
.hero-schmal { padding-bottom: 3.5rem; }
.hero-schmal .hero-text { max-width: 720px; }
.hero-schmal h1 { margin-bottom: 1.1rem; }

.eb-index {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem;
}
.eb-spalte strong {
	display: block; font-size: 0.8rem; font-weight: 600;
	letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--accent-dark); margin-bottom: 0.9rem;
}
.eb-spalte ul { list-style: none; }
.eb-spalte li { margin-bottom: 0.55rem; }
.eb-spalte a {
	color: var(--text); text-decoration: none;
	font-size: 0.94rem; line-height: 1.5;
	border-bottom: 1px solid transparent;
}
.eb-spalte a:hover { color: var(--accent-dark); border-bottom-color: var(--accent-line); }

.artikel {
	padding: 3rem 0;
	border-bottom: 1px solid var(--border);
	/* Anker-Ziel nicht unter den festen Kopf schieben */
	scroll-margin-top: 90px;
}
.artikel:first-child { padding-top: 0; }
.artikel:last-child { border-bottom: 0; padding-bottom: 0; }
.artikel-kopf { margin-bottom: 1.5rem; }
.artikel-kopf .sc-tag { margin-bottom: 0.9rem; }
.artikel-kopf h2 {
	font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 700;
	line-height: 1.2; letter-spacing: -0.022em; color: var(--text);
	margin-bottom: 0.7rem;
}
.artikel-lead {
	font-size: 1.06rem; line-height: 1.6; color: var(--text-muted);
	font-weight: 300;
}
.artikel-text p {
	color: var(--text-muted); font-size: 0.99rem; line-height: 1.8;
	font-weight: 300; margin-bottom: 1.1rem;
}
.artikel-text .beleg-figur { margin: 1.8rem auto; }
.artikel-ziel { margin-top: 1.4rem; margin-bottom: 0 !important; }
.artikel-ziel a {
	color: var(--accent-dark); text-decoration: none; font-weight: 500;
	font-size: 0.95rem;
}
.artikel-ziel a:hover .arr { transform: translateX(3px); }

/* =====================
   ZITATFELD (Startseite)
   Ohne JavaScript stehen alle Zitate untereinander und die Steuerung ist
   weg — Projektregel 3. Erst die Klasse .js blendet auf eins zurueck.
===================== */
.zitat-feld { max-width: 780px; margin: 0 auto; }
.zitat-karte + .zitat-karte { margin-top: 2rem; }
.zitat-marke {
	display: block; font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--accent2); margin-bottom: 1.1rem;
}
.zitat-karte blockquote {
	font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.45;
	font-weight: 300; color: var(--white); letter-spacing: -0.015em;
}
.zitat-karte blockquote a { color: var(--accent2); text-decoration: none; }
.zitat-karte .zitat-ziel { margin-top: 1.5rem; }
.zitat-karte .zitat-ziel a {
	color: var(--accent2); text-decoration: none; font-weight: 500;
	font-size: 0.95rem;
}
.zitat-nav { display: none; }

.js .zitat-karte { display: none; }
.js .zitat-karte.aktiv { display: block; }
.js .zitat-karte + .zitat-karte { margin-top: 0; }
.js .zitat-nav {
	display: flex; align-items: center; justify-content: center;
	gap: 1.4rem; margin-top: 2.5rem;
}
.zitat-pfeil {
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.14);
	color: rgba(255,255,255,0.75);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: 1.1rem; line-height: 1;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.zitat-pfeil:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.zitat-punkte { display: flex; gap: 0; }
.zitat-punkt {
	/* Tippflaeche 28 px, der sichtbare Punkt bleibt 10 px (Rand als Innenabstand) */
	width: 28px; height: 28px; border-radius: 50%; padding: 0;
	background: rgba(255,255,255,0.34); background-clip: content-box;
	border: 9px solid transparent; cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}
.zitat-punkt[aria-current="true"] { background-color: var(--accent2); transform: scale(1.25); }

/* =====================
   TRUST BAR
===================== */
.trust-bar {
	background: var(--bg-dark2);
	border-bottom: 1px solid var(--border-dark);
	padding: 1.4rem 0;
	position: relative;
}
.trust-bar::before {
	content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: min(600px, 80%); height: 1px;
	background: linear-gradient(90deg, transparent, rgba(56,189,248,0.4), transparent);
}
.trust-inner {
	display: flex; align-items: center;
	justify-content: center; flex-wrap: wrap;
	gap: 0.25rem;
}
.trust-item {
	display: flex; flex-direction: column;
	align-items: center; padding: 0.4rem 1.6rem;
	text-align: center;
}
.trust-item strong { color: var(--white); font-size: 0.875rem; font-weight: 600; }
.trust-item span { color: rgba(255,255,255,0.64); font-size: 0.82rem; margin-top: 2px; }
.trust-divider { width: 1px; height: 34px; background: rgba(255,255,255,0.1); }

/* =====================
   SECTIONS
===================== */
.section     { padding: var(--sec-pad) 0; background: var(--bg); position: relative; }
.section-alt { background: var(--bg-alt); }
.section-dark {
	padding: var(--sec-pad) 0;
	background: var(--bg-dark);
	color: var(--white);
	position: relative; overflow: hidden;
}
/* Sanfter Lichtschein oben in dunklen Abschnitten */
.section-dark::before {
	content: ''; position: absolute; pointer-events: none;
	top: -300px; left: 50%; transform: translateX(-50%);
	width: 900px; height: 600px;
	background: radial-gradient(ellipse, rgba(14,165,233,0.1) 0%, transparent 68%);
}
.section-dark > .container { position: relative; z-index: 1; }
.section-tight { padding: 4.5rem 0; }

.section-header { text-align: center; margin-bottom: 3.5rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.section-header.light h2 { color: var(--white); }
.section-header.light p { color: rgba(255,255,255,0.72); }
.section-header.light .section-label,
.section-dark .section-label,
.hero .section-label { color: var(--accent2); }

.section-label {
	display: inline-block;
	color: var(--accent-dark);
	font-size: 0.78rem; font-weight: 700;
	letter-spacing: 0.18em; text-transform: uppercase;
	margin-bottom: 0.8rem;
}
.section-header h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.45rem);
	font-weight: 700;
	margin-bottom: 0.9rem; letter-spacing: -0.024em;
	line-height: 1.15;
}
.section-header p { color: var(--text-muted); font-size: 1rem; margin: 0 auto; line-height: 1.75; }

/* =====================
   BREADCRUMB
===================== */
.breadcrumb {
	background: var(--bg-alt);
	border-bottom: 1px solid var(--border);
	padding: 0.85rem 0;
	font-size: 0.8rem;
	color: var(--text-muted);
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb li:not(:last-child)::after { content: '›'; color: #a9b6c9; }
.breadcrumb a { color: var(--text-muted); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 500; }

/* Brotkrumen ohne eigenen Streifen — sie gehören zum Inhalt, nicht zwischen
   zwei Abschnitte. Als eigene Bahn standen sie auf ueber-mich.html zwischen
   zwei dunklen Flächen (sah aus wie ein Darstellungsfehler) und auf den übrigen
   Seiten als loses Band zwischen Kopf und Inhalt.

   Grundfassung gilt für HELLE Seiten (Impressum, AGB, Datenschutz, Auftrag),
   wo die Krumen direkt unter dem Kopf stehen. Im Hero wird sie überschrieben. */
.breadcrumb-inline {
	background: transparent;
	border-bottom: 0;
	padding: 1.7rem 0 0;
}
.breadcrumb-inline li:not(:last-child)::after { color: #a9b6c9; }

/* Im dunklen Hero: helle Schrift, kein eigener Abstand nach oben — der Hero
   bringt seinen eigenen mit. Der Container hat dort schon Seitenabstand,
   ein zweiter würde die Krumen gegenüber der Überschrift einrücken. */
.hero .breadcrumb-inline { padding: 0 0 1.4rem; color: var(--text-dim); }
.hero .breadcrumb-inline .container { padding-left: 0; padding-right: 0; }
.hero .breadcrumb-inline li:not(:last-child)::after { color: rgba(255,255,255,0.3); }
.hero .breadcrumb-inline a { color: var(--text-dim); }
.hero .breadcrumb-inline a:hover { color: var(--accent2); }
.hero .breadcrumb-inline [aria-current="page"] { color: var(--text-light); }

/* =====================
   SERVICE-KARTEN
===================== */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.35rem;
}
.services-grid-2 { grid-template-columns: repeat(2, 1fr); }

.service-card {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 2rem 1.8rem;
	box-shadow: var(--shadow-sm);
	transition: transform 0.28s cubic-bezier(.2,.7,.3,1), box-shadow 0.28s, border-color 0.28s;
}
/* Feine Lichtkante oben */
.service-card::after {
	content: ''; position: absolute; top: 0; left: 1.8rem; right: 1.8rem; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(14,165,233,0.35), transparent);
	opacity: 0; transition: opacity 0.28s;
}
.service-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
	border-color: rgba(14,165,233,0.28);
}
.service-card:hover::after { opacity: 1; }
.service-card.featured {
	border-color: rgba(14,165,233,0.32);
	background: linear-gradient(158deg, var(--featured-a) 0%, var(--featured-b) 58%);
}

.sc-icon-wrap {
	width: 46px; height: 46px; border-radius: var(--radius);
	background: linear-gradient(150deg, rgba(14,165,233,0.14), rgba(14,165,233,0.04));
	border: 1px solid rgba(14,165,233,0.16);
	display: flex; align-items: center; justify-content: center;
	color: var(--accent); margin-bottom: 1.25rem;
	flex-shrink: 0;
	transition: transform 0.28s, background 0.28s;
}
.service-card:hover .sc-icon-wrap {
	transform: scale(1.06) rotate(-3deg);
	background: linear-gradient(150deg, rgba(14,165,233,0.22), rgba(14,165,233,0.07));
}

.service-card h3 {
	font-size: 1.12rem; font-weight: 700;
	margin-bottom: 0.55rem; letter-spacing: -0.012em;
	line-height: 1.3;
}
.service-card h3 a { transition: color 0.18s; }
.service-card:hover h3 a { color: var(--accent-dark); }
/* Fliesstext auf Karten mindestens 16 px (09.10.2026): 0.95rem = 16,2 px */
.service-card > p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.68; margin-bottom: 1.15rem; }

.sc-list { list-style: none; margin-bottom: 1.4rem; }
.sc-list li {
	font-size: 0.95rem; color: var(--text-muted);
	padding: 0.24rem 0 0.24rem 1.15rem; position: relative;
}
.sc-list li::before {
	content: ''; position: absolute; left: 0; top: 0.78em;
	width: 5px; height: 1.5px; background: var(--accent); border-radius: 2px;
}

/* Fuß der Karte immer unten, egal wie lang der Text ist */
.sc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

.sc-tag {
	display: inline-flex; align-items: center; gap: 0.35rem;
	background: var(--accent-soft);
	color: var(--accent-dark);
	border: 1px solid var(--accent-line);
	border-radius: 999px;
	font-size: 0.78rem; font-weight: 600;
	padding: 0.3rem 0.85rem; letter-spacing: 0.03em;
	transition: background 0.2s, gap 0.2s;
}
.service-card:hover .sc-tag { background: rgba(14,165,233,0.13); }
.sc-tag .arr { transition: transform 0.2s; display: inline-block; }
.service-card:hover .sc-tag .arr { transform: translateX(3px); }

/* Preis-Pille auf Übersichtskarten */
.karte-preis {
	font-size: 0.84rem; font-weight: 700; color: var(--text);
	background: var(--bg-alt); border: 1px solid var(--border);
	border-radius: 999px; padding: 0.28rem 0.75rem;
	white-space: nowrap;
}

/* Leistungskarten seit 09.10.2026 (Alis Entscheidung, Mockup B): Preis gross
   als Blickfang, darunter ein voller Knopf ueber die ganze Kartenbreite statt
   der kleinen Pille „Mehr dazu". Der Knopf ist nur Optik — geklickt wird
   der Kartenlink, der ueber der ganzen Karte liegt (.card-link::before).
   Dunkle Schrift auf Blau wie bei .btn-primary: 7,3:1. */
.sc-foot-knopf { flex-direction: column; align-items: stretch; gap: 0.9rem; }
.sc-foot-knopf .karte-preis {
	align-self: flex-start;
	font-size: 1.65rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em;
	background: none; border: 0; border-radius: 0; padding: 0;
}
.sc-knopf {
	display: flex; align-items: center; justify-content: center; gap: 0.45rem;
	min-height: 50px; padding: 0.75rem 1rem;
	background: var(--accent); color: var(--on-accent);
	border-radius: var(--radius);
	font-weight: 700; font-size: 1rem; letter-spacing: 0.01em;
	box-shadow: 0 2px 10px rgba(14,165,233,0.24);
	transition: background 0.2s, box-shadow 0.2s;
}
.service-card:hover .sc-knopf { background: var(--accent2); box-shadow: var(--shadow-accent); }
.sc-knopf .arr { transition: transform 0.2s; display: inline-block; }
.service-card:hover .sc-knopf .arr { transform: translateX(3px); }

/* Ganze Karte klickbar, ohne die Semantik des Links zu verlieren */
.card-link::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.service-card:has(.card-link) { cursor: pointer; }
.service-card:has(.card-link) .sc-foot { position: relative; z-index: 2; pointer-events: none; }

/* =====================
   ÜBER
===================== */
.ueber-inner {
	display: grid; grid-template-columns: minmax(0, 0.78fr) 1fr;
	gap: 4.5rem; align-items: center;
	position: relative; z-index: 1;
}

/* Portrait — der Hintergrund des Fotos liegt farblich auf dem Akzent,
   deshalb integriert es sich in den dunklen Abschnitt statt aufzukleben. */
.ueber-foto { position: relative; }
.ueber-foto::before {
	content: ''; position: absolute; inset: -18px -18px -24px -18px;
	border-radius: 32px; pointer-events: none;
	background: radial-gradient(ellipse at 50% 40%, rgba(56,189,248,0.22), transparent 70%);
	filter: blur(6px);
}
.ueber-foto img {
	position: relative;
	display: block; width: 100%; height: auto;
	border-radius: var(--radius-xl);
	border: 1px solid rgba(255,255,255,0.1);
	box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.ueber-foto figcaption {
	position: absolute; z-index: 2;
	left: 1.25rem; bottom: -1rem;
	display: flex; flex-direction: column; gap: 1px;
	background: rgba(7,13,24,0.9);
	border: 1px solid rgba(56,189,248,0.3);
	backdrop-filter: blur(10px);
	border-radius: var(--radius);
	padding: 0.7rem 1.1rem;
	box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.ueber-foto figcaption strong { font-size: 0.92rem; font-weight: 700; color: var(--white); letter-spacing: -0.01em; }
.ueber-foto figcaption span { font-size: 0.74rem; color: var(--accent2); letter-spacing: 0.08em; text-transform: uppercase; }

/* Kennzahlen wandern unter Foto und Text, ueber die volle Breite */
.ueber-stats.ueber-stats-breit {
	grid-template-columns: repeat(4, 1fr);
	margin-top: 4rem;
	position: relative; z-index: 1;
}
.ueber-text .section-label { color: var(--accent2); }
.ueber-text h2 {
	font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 700;
	color: var(--white); margin-bottom: 1.4rem; line-height: 1.15;
	letter-spacing: -0.024em;
}
.ueber-text p { color: rgba(255,255,255,0.58); margin-bottom: 1rem; font-size: 0.96rem; line-height: 1.8; font-weight: 300; }

.ueber-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.9rem; }
.u-badge {
	background: rgba(255,255,255,0.045);
	border: 1px solid rgba(255,255,255,0.11);
	color: rgba(255,255,255,0.72);
	border-radius: 999px; padding: 0.42rem 0.95rem;
	font-size: 0.78rem; font-weight: 500;
}

.ueber-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat-card {
	background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--radius-lg); padding: 1.8rem 1.4rem;
	text-align: center;
	transition: border-color 0.3s, transform 0.3s;
}
.stat-card:hover { border-color: rgba(56,189,248,0.3); transform: translateY(-3px); }
.stat-num {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 3.4vw, 2.2rem); font-weight: 700;
	color: var(--accent2); margin-bottom: 0.35rem;
	line-height: 1.1; hyphens: auto;
}
.stat-label { font-size: 0.85rem; color: rgba(255,255,255,0.66); line-height: 1.5; }

/* =====================
   ABLAUF-SCHRITTE
===================== */
.fw-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.1rem;
	margin-bottom: 2rem;
	counter-reset: schritt;
}
.fw-steps-3 { grid-template-columns: repeat(3, 1fr); }

.fw-step {
	position: relative;
	display: flex; flex-direction: column; gap: 0.7rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.7rem 1.5rem;
	box-shadow: var(--shadow-sm);
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.fw-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(14,165,233,0.24); }

/* Verbindungslinie zwischen den Schritten — ersetzt die alten Pfeil-Divs */
.fw-step:not(:last-child)::after {
	content: ''; position: absolute;
	right: -1.1rem; top: 2.45rem; width: 1.1rem; height: 1px;
	background: linear-gradient(90deg, var(--border), rgba(14,165,233,0.4));
}
.fw-num {
	font-family: var(--font-display);
	font-size: 1.9rem; font-weight: 700;
	line-height: 1;
	background: linear-gradient(150deg, var(--accent), rgba(14,165,233,0.28));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: var(--accent);
}
.fw-text { display: flex; flex-direction: column; gap: 0.4rem; }
.fw-text strong { color: var(--text); font-size: 0.93rem; font-weight: 700; letter-spacing: -0.01em; }
.fw-text span { color: var(--text-muted); font-size: 0.9rem; line-height: 1.62; }

/* Pfeil-Element aus alten Seiten — wird nicht mehr erzeugt, bleibt aber harmlos */
.fw-arrow { display: none; }

/* Ohne folgende Fussnote erzeugt der Abstand nur eine Leerflaeche */
.fw-steps:last-child { margin-bottom: 0; }

.fw-note {
	text-align: center; font-size: 0.82rem;
	color: var(--text-muted); letter-spacing: 0.02em;
}

/* Dunkle Variante der Schritte */
.section-dark .fw-step {
	background: rgba(255,255,255,0.04);
	border-color: rgba(255,255,255,0.08);
	box-shadow: none;
}
.section-dark .fw-step:hover { border-color: rgba(56,189,248,0.3); }
.section-dark .fw-text strong { color: var(--white); }
.section-dark .fw-text span { color: rgba(255,255,255,0.7); }
.section-dark .fw-step:not(:last-child)::after { background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(56,189,248,0.4)); }
.section-dark .fw-note { color: rgba(255,255,255,0.66); }

/* =====================
   PREISE
===================== */
.preise-grid {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 1.35rem; margin-bottom: 1.5rem;
	max-width: 760px; margin-left: auto; margin-right: auto;
}
.preise-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 1000px; }
/* Eine einzelne Preiskarte — sonst klebt sie in der linken Spalte des
   Zweispalters. Benutzt auf fernwartung.html. */
.preise-grid-1 { grid-template-columns: 1fr; max-width: 380px; }

.preis-card {
	display: flex; flex-direction: column;
	background: linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
	border: 1px solid rgba(255,255,255,0.09);
	border-radius: var(--radius-xl);
	padding: 2.3rem 2rem;
	position: relative;
	transition: transform 0.28s, border-color 0.28s;
}
.preis-card:hover { transform: translateY(-4px); border-color: rgba(56,189,248,0.28); }
.preis-card.featured-price {
	border-color: rgba(56,189,248,0.4);
	background: linear-gradient(165deg, rgba(14,165,233,0.11), rgba(14,165,233,0.03));
	box-shadow: 0 20px 60px rgba(14,165,233,0.14);
}
.preis-badge {
	position: absolute; top: -13px; left: 2rem;
	background: linear-gradient(135deg, var(--accent2), var(--accent));
	color: var(--on-accent);
	font-size: 0.74rem; font-weight: 700;
	padding: 0.3rem 0.9rem; border-radius: 999px;
	letter-spacing: 0.09em; text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(14,165,233,0.45);
}

.preis-label {
	font-size: 0.72rem; font-weight: 700;
	letter-spacing: 0.15em; text-transform: uppercase;
	color: var(--accent2); margin-bottom: 0.9rem;
}
.preis-amount {
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 4.6vw, 2.8rem); font-weight: 700;
	color: var(--white); margin-bottom: 1.5rem; line-height: 1;
	letter-spacing: -0.03em;
}
.preis-amount span { font-size: 1rem; color: rgba(255,255,255,0.66); font-weight: 400; letter-spacing: 0; }
/* Preise ohne Zahl ("Auf Anfrage", "nach Aufwand"). In der grossen Zahlengroesse
   sieht das erste Wort riesig und der Rest verloren aus. */
.preis-amount.textpreis { font-size: clamp(1.35rem, 2.6vw, 1.7rem); letter-spacing: -0.015em; }
.preis-amount.textpreis span { font-size: inherit; color: rgba(255,255,255,0.7); font-weight: 400; }

.preis-list { list-style: none; margin-bottom: 2rem; }
.preis-list li {
	font-size: 0.95rem; padding: 0.58rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.07);
	color: rgba(255,255,255,0.64);
	display: flex; align-items: flex-start; gap: 0.65rem;
	line-height: 1.55;
}
.preis-list li::before {
	content: ''; flex-shrink: 0; margin-top: 0.52em;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 6px rgba(14,165,233,0.7);
}
.preis-list li:last-child { border-bottom: none; }
.preis-card .btn-primary { margin-top: auto; }

.drin-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem; max-width: 960px; margin: 0 auto;
}
/* Sitzt in einem hellen .section, nicht im dunklen Preisblock: darum Tokens
   statt Weiss-Transparenz (axe color-contrast, 17.10.2026). Der Dunkelmodus
   stellt die Tokens selbst um. --text-muted auf --bg-card: 5,7:1 hell. */
.drin-karte {
	background: var(--bg-card); border: 1px solid var(--border);
	border-radius: 16px; padding: 1.5rem 1.6rem; box-shadow: var(--shadow-sm);
}
.drin-karte h3 { font-size: 1.05rem; margin-bottom: 0.6rem; color: var(--text); }
.drin-liste { list-style: none; }
.drin-liste li {
	font-size: 0.95rem; padding: 0.55rem 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-muted);
	display: flex; align-items: flex-start; gap: 0.65rem; line-height: 1.55;
}
.drin-liste li:last-child { border-bottom: none; }
.drin-liste li::before {
	content: ''; flex-shrink: 0; margin-top: 0.52em;
	width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.drin-liste.drin-nein li::before { background: var(--text-muted); border-radius: 1px; height: 2px; width: 8px; margin-top: 0.72em; }

.preis-hinweis {
	text-align: center; font-size: 0.86rem;
	color: rgba(255,255,255,0.62); margin-top: 1rem; margin-bottom: 2.5rem;
}

.anfahrt-box {
	background: rgba(255,255,255,0.035);
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-xl);
	padding: 2rem;
	max-width: 760px; margin: 0 auto;
}
/* Bei drei Preiskarten ist das Raster breiter — die Box zieht mit,
   sonst steht sie sichtbar eingerueckt darunter. */
.preise-grid-3 ~ .anfahrt-box { max-width: 1000px; }
.anfahrt-box h3 {
	font-size: 1rem; font-weight: 700;
	margin-bottom: 1.2rem; color: var(--white);
	letter-spacing: -0.01em;
}
.anfahrt-grid { display: flex; flex-direction: column; }
.anfahrt-item {
	display: flex; justify-content: space-between; align-items: center;
	gap: 1rem; padding: 0.72rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.07);
	font-size: 0.875rem;
}
.anfahrt-item:last-child { border-bottom: none; }
.anfahrt-zone { color: rgba(255,255,255,0.7); }
.anfahrt-preis { font-weight: 700; color: var(--accent2); white-space: nowrap; }

/* =====================
   HINWEIS-KARTE
   Ersetzt den nackten Absatz, den die Unterseiten vorher hatten.
===================== */
.note-card {
	display: flex; gap: 1.4rem;
	max-width: 820px; margin: 0 auto;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-lg);
	padding: 2rem 2.2rem;
	box-shadow: var(--shadow-sm);
}
/* Karte direkt unter einem Kartenraster (windows-10-betrieb.html): sonst klebt sie daran */
.services-grid + .note-card { margin-top: 1.5rem; }
.note-icon {
	width: 42px; height: 42px; border-radius: var(--radius);
	background: var(--accent-soft); border: 1px solid var(--accent-line);
	display: flex; align-items: center; justify-content: center;
	color: var(--accent); flex-shrink: 0;
}
.note-card p { color: var(--text-muted); font-size: 1rem; line-height: 1.85; }
.note-card p + p { margin-top: 0.9rem; }
/* Links im Hinweistext (13.10.2026: Verweis auf die Zeiterfassung) — global steht a ohne Farbe und Unterstrich */
.note-card p a { color: var(--accent-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.note-card p a:hover { color: var(--accent); }

/* Server-Code zum Kopieren (fernwartung.html#code, seit 08.10.2026).
   Der Knopf ist ohne JavaScript per `hidden` verborgen — `.btn-primary`
   setzt `display` und würde `hidden` sonst überstimmen. */
.server-code {
	max-width: 820px; margin: 1.6rem auto 0;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.8rem 2.2rem;
	box-shadow: var(--shadow-sm);
}
.server-code h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.server-code p { color: var(--text-muted); line-height: 1.75; }
.server-code .server-code-wert {
	margin: 1.1rem 0 1.2rem;
	padding: 0.9rem 1rem;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-family: ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
	font-size: 0.85rem; line-height: 1.5;
	color: var(--text);
	overflow-wrap: anywhere;
	user-select: all;
}
.server-code [hidden] { display: none; }

/* =====================
   FAQ
===================== */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.7rem; }
.faq-item {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item[open] { border-color: rgba(14,165,233,0.3); box-shadow: var(--shadow); }
.faq-item summary {
	cursor: pointer; list-style: none;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.15rem 1.5rem;
	font-weight: 600; font-size: 0.97rem; color: var(--text);
	transition: color 0.18s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-dark); }
.faq-item summary::after {
	content: ''; flex-shrink: 0;
	width: 9px; height: 9px;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-answer { padding: 0 1.5rem 1.35rem; color: var(--text-muted); font-size: 0.95rem; line-height: 1.78; }
.faq-answer p + p { margin-top: 0.7rem; }

/* =====================
   WEITERFÜHRENDE LINKS
===================== */
.related-grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 0.9rem;
}
.related-card {
	display: flex; align-items: center; gap: 0.9rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.2rem;
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.related-card:hover { transform: translateY(-2px); border-color: rgba(14,165,233,0.3); box-shadow: var(--shadow); }
.related-card .rc-icon {
	width: 34px; height: 34px; border-radius: var(--radius-sm);
	background: var(--accent-soft); border: 1px solid var(--accent-line);
	display: flex; align-items: center; justify-content: center;
	color: var(--accent); flex-shrink: 0;
}
.related-card strong { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.related-card small { font-size: 0.84rem; color: var(--text-muted); }

/* =====================
   KONTAKT
===================== */
.kontakt-grid {
	display: grid; grid-template-columns: 1fr 1.55fr;
	gap: 4rem; align-items: start;
}
/* min-width: 0, sonst duerfen Rasterspalten nicht unter ihre Inhaltsbreite
   schrumpfen. Zwischen 769 und ~830 px lief der Kontaktbereich dadurch schon
   vor dem 09.10.2026 um 66 px ueber den Rand, mit 17 px Grundschrift um 131. */
.kontakt-grid > *, .form-row > * { min-width: 0; }
@media (max-width: 1024px) { .kontakt-grid { gap: 2.5rem; } }

.kontakt-info { display: flex; flex-direction: column; gap: 1.7rem; }

.ki-item { display: flex; align-items: flex-start; gap: 1rem; }

.ki-icon-wrap {
	width: 38px; height: 38px; border-radius: var(--radius);
	background: linear-gradient(150deg, rgba(14,165,233,0.13), rgba(14,165,233,0.04));
	border: 1px solid rgba(14,165,233,0.16);
	display: flex; align-items: center; justify-content: center;
	color: var(--accent); flex-shrink: 0; margin-top: 2px;
}
.ki-item strong {
	display: block; color: var(--text); font-size: 0.72rem;
	font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
	margin-bottom: 0.28rem;
}
.ki-item a, .ki-item span { color: var(--text-muted); font-size: 0.95rem; }
.ki-item a { transition: color 0.15s; }
.ki-item a:hover { color: var(--accent-dark); }

.ki-legal {
	font-size: 0.75rem; color: var(--text-muted);
	line-height: 1.8; padding-top: 1.3rem;
	border-top: 1px solid var(--border);
}

.kontakt-form-wrap {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl); padding: 2.3rem;
	box-shadow: var(--shadow-lg);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; margin-bottom: 1.15rem; }
.form-group label {
	font-size: 0.76rem; font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase;
	margin-bottom: 0.45rem; color: var(--text);
}
.form-group input, .form-group textarea {
	padding: 0.8rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.92rem; color: var(--text);
	background: var(--bg);
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #9aa8bb; }
.form-group input:focus, .form-group textarea:focus {
	/* Fokus nicht nur über die Rahmenfarbe: #0ea5e9 auf Weiß hat 2,77:1, WCAG
	   1.4.11 verlangt 3:1 (gemessen 14.10.2026). Dasselbe Muster wie .termin-zeit. */
	outline: 3px solid var(--text-stark); outline-offset: 2px;
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(14,165,233,0.12);
	background: var(--bg-card);
}
.form-group textarea { resize: vertical; min-height: 120px; }

.checkbox-label {
	display: flex; align-items: flex-start; gap: 0.7rem;
	font-size: 0.9rem; color: var(--text-muted);
	margin-bottom: 1.3rem; cursor: pointer; line-height: 1.55;
}
.checkbox-label input { margin-top: 1px; flex-shrink: 0; accent-color: var(--accent-dark); width: 22px; height: 22px; }
.checkbox-label a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }

/* =====================
   RECHTSSEITEN
   Lagen vorher dreimal als Inline-CSS in impressum/datenschutz/agb und
   fehlten der Startseite komplett — deshalb war der Block dort ungestylt.
===================== */
.legal-page { padding: 4.5rem 0 5.5rem; min-height: 70vh; background: var(--bg); }
.legal-page > .container { max-width: 860px; }
.legal-page h1 {
	font-size: clamp(1.8rem, 4vw, 2.3rem); font-weight: 700;
	margin-bottom: 0.6rem; letter-spacing: -0.024em;
}
.legal-page .subtitle { color: var(--text-muted); font-size: 1rem; margin-bottom: 2.5rem; }
.legal-page h1 + .legal-block, .legal-page h1 + .legal-divider { margin-top: 2.5rem; }

.legal-block { margin-bottom: 2rem; }
.legal-block h2 {
	font-size: 0.8rem; font-weight: 700;
	margin-bottom: 0.7rem; color: var(--accent-dark);
	letter-spacing: 0.13em; text-transform: uppercase;
}
.legal-block h3 { font-size: 1rem; font-weight: 700; margin: 1.2rem 0 0.5rem; }
.legal-block p, .legal-block li { font-size: 0.95rem; color: var(--text-muted); line-height: 1.8; }
.legal-block p + p { margin-top: 0.8rem; }
.legal-block ul, .legal-block ol { padding-left: 1.3rem; margin-top: 0.5rem; }
.legal-block li { margin-bottom: 0.3rem; }
.legal-block a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }

.legal-divider { height: 1px; background: var(--border); margin: 2.2rem 0; border: none; }
.legal-hint {
	background: var(--accent-soft);
	border: 1px solid var(--accent-line);
	border-radius: var(--radius);
	padding: 1.1rem 1.4rem;
	font-size: 0.88rem; color: var(--text-muted);
	line-height: 1.7; margin-bottom: 2rem;
}
.back-btn { margin-top: 3rem; }

/* =====================
   FOOTER
===================== */
.footer {
	background: var(--bg-footer);
	color: rgba(255,255,255,0.62);
	padding: 3.5rem 0 1.25rem;
	font-size: 0.85rem;
	border-top: 1px solid rgba(255,255,255,0.06);
}
/* Fuenf Spalten seit 30.07.2026: „Über mich" und „Einblicke" hatten unter
   Rechtliches nichts zu suchen und haben jetzt eine eigene. */
.footer-inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
	gap: 2rem;
	padding-bottom: 2.25rem;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-brand { display: flex; flex-direction: column; gap: 0.9rem; }
.footer-left { display: flex; align-items: center; gap: 0.7rem; }
.footer-logo { height: 30px; opacity: 0.8; }
.footer-brand p { line-height: 1.75; font-size: 0.88rem; color: rgba(255,255,255,0.64); }
.footer-brand a { color: rgba(255,255,255,0.8); transition: color 0.15s; }
.footer-brand a:hover { color: var(--accent2); }

.footer-col strong {
	display: block; color: rgba(255,255,255,0.85);
	font-size: 0.78rem; font-weight: 700;
	letter-spacing: 0.13em; text-transform: uppercase;
	margin-bottom: 1rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a {
	color: rgba(255,255,255,0.7); font-size: 0.92rem; transition: color 0.15s;
	/* Tippflaeche: die Zeile selbst ist nur 16 px hoch */
	display: inline-block; padding: 0.2rem 0;
}
.footer-col a:hover { color: var(--accent2); }

/* Alte einzeilige Linkleiste — bleibt lesbar, falls irgendwo noch benutzt */
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-links a { color: rgba(255,255,255,0.7); transition: color 0.15s; }
.footer-links a:hover { color: var(--accent2); }

.footer-copy {
	padding: 1.25rem 0 0; font-size: 0.82rem;
	display: flex; justify-content: space-between;
	flex-wrap: wrap; gap: 0.5rem;
	color: rgba(255,255,255,0.55);
}

/* =====================
   EINBLENDEN BEIM SCROLLEN
   Wichtig: nur wenn JavaScript läuft. Sonst blieben die Karten für
   Crawler und Nutzer ohne JS dauerhaft unsichtbar — genau der Bug,
   der vorher mit einem 1,2-Sekunden-Timer geflickt wurde.
===================== */
.js .reveal,
.js .service-card, .js .preis-card, .js .stat-card, .js .ki-item, .js .fw-step {
	opacity: 0; transform: translateY(18px);
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.visible,
.js .service-card.visible, .js .preis-card.visible, .js .stat-card.visible,
.js .ki-item.visible, .js .fw-step.visible {
	opacity: 1; transform: none;
}
/* Gestaffelt, damit ein Raster nicht schlagartig erscheint */
.js .services-grid > *:nth-child(2), .js .fw-steps > *:nth-child(2),
.js .preise-grid > *:nth-child(2), .js .ueber-stats > *:nth-child(2) { transition-delay: 0.06s; }
.js .services-grid > *:nth-child(3), .js .fw-steps > *:nth-child(3),
.js .ueber-stats > *:nth-child(3) { transition-delay: 0.12s; }
.js .services-grid > *:nth-child(4), .js .fw-steps > *:nth-child(4),
.js .ueber-stats > *:nth-child(4) { transition-delay: 0.18s; }
.js .services-grid > *:nth-child(5) { transition-delay: 0.24s; }
.js .services-grid > *:nth-child(6) { transition-delay: 0.3s; }

/* Wer Bewegung abgestellt hat, bekommt keine */
@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;
	}
	.js .reveal, .js .service-card, .js .preis-card,
	.js .stat-card, .js .ki-item, .js .fw-step { opacity: 1 !important; transform: none !important; }
}

/* =====================
   TELEFONNUMMER SICHTBAR
   tel:-Links funktionieren am Rechner oft nicht — kein Dialog, keine Reaktion.
   Wer am Desktop-PC nach Computerhilfe sucht (also der Hauptfall dieser Seite),
   braucht die Nummer als LESBAREN, markierbaren Text. Als Knopfbeschriftung
   ist eine lange Ziffernfolge unruhig, als Textzeile daneben ist sie richtig.
===================== */

/* Zeile unter den Hero-Knoepfen */
/* ⚠ flex-wrap ist Pflicht, seit hier zwei Links stehen (Nummer + Termin).
   Ohne es quetscht der Flexcontainer bei 390 px alles in eine Zeile und
   die Telefonnummer reisst mitten durch — gefunden am 07.08.2026 beim
   Nachrendern in Handybreite. pruefen.py findet so etwas nicht. */
.tel-direkt {
	display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap;
	margin: -1.1rem 0 1.9rem;
	font-size: 0.95rem; color: rgba(255,255,255,0.7);
}
.tel-direkt a {
	white-space: nowrap;
	font-size: 1.15rem; font-weight: 700; color: var(--white);
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	border-bottom: 1px solid rgba(56,189,248,0.4);
	transition: color 0.15s, border-color 0.15s;
}
.tel-direkt a:hover { color: var(--accent2); border-color: var(--accent2); }

/* In der Hero-Karte unter dem Knopf */
.hero-card-tel {
	display: block; text-align: center;
	margin-top: 0.85rem;
	font-size: 1.05rem; font-weight: 700; color: var(--white);
	font-variant-numeric: tabular-nums;
}
.hero-card-tel span { display: block; font-size: 0.8rem; font-weight: 400;
	color: rgba(255,255,255,0.62); letter-spacing: 0.04em; margin-top: 2px; }

/* Fernwartung im Kopfmenue — seit 17.08.2026.
   Vorher stand die Seite auf jeder Seite NUR in der Fusszeile, obwohl Ali sie
   am Telefon ansagt („gehen Sie auf meine Seite, oben Fernwartung"). Sie ist
   damit der einzige Menuepunkt, den ein Kunde unter Zeitdruck sucht.

   Es reicht die Breite nicht fuer beide zusaetzlichen Punkte. Weichen muss
   „Kontakt": Der Abschnitt steht auf jeder Seite ohnehin am Ende, der
   Anrufen-Knopf direkt daneben tut dasselbe, und im Klappmenue bleibt er
   vollstaendig erhalten. Die Fernwartungsseite hat diesen Ersatzweg nicht.

   ⚠ Die Schwelle liegt bei 1240px, NICHT bei 1120px wie bei .nav-tel: bei
   1120px stossen Telefonnummer und Anrufen-Knopf sonst an den rechten Rand.
   Nachgemessen mit Kopfzeilen-Screenshots bei 800/1024/1120/1239/1300/1440. */
.nav-kontakt { display: none; }
@media (min-width: 1240px) { .nav-kontakt { display: inline-flex; } }

/* Im Kopf neben dem Knopf — erst wenn Platz da ist */
.nav-tel { display: none; }
@media (min-width: 1120px) {
	.nav-tel {
		display: inline-flex; align-items: center; gap: 0.4rem;
		margin-left: 0.5rem;
		font-size: 0.894rem; font-weight: 700; color: var(--white);
		font-variant-numeric: tabular-nums; white-space: nowrap;
	}
	.nav-tel:hover { color: var(--accent2); }
}

/* Auf dem Handy waehlt der Knopf ohnehin — die Zeile ist dort nur Wiederholung,
   bleibt aber zum Kopieren stehen und wird nur kleiner. */
@media (max-width: 768px) {
	.tel-direkt { margin: -0.6rem 0 1.5rem; font-size: 0.88rem; }
	.tel-direkt a { font-size: 1.05rem; }
	/* Umbruch auf dem Handy: der Trennpunkt stand sonst allein am Zeilenanfang */
	.tel-termin { flex-basis: 100%; }
	.tel-trenner { display: none; }
}

/* =====================
   WHATSAPP
   Bewusst nur ein Link auf wa.me — KEIN Meta-Widget. Ein Widget wuerde
   Skripte von Facebook nachladen und damit einwilligungspflichtig werden;
   dann braeuchte die Seite ein Cookie-Banner. Ein Link tut das nicht.
===================== */
.wa-float {
	position: fixed; right: 1.35rem; bottom: 1.35rem; z-index: 90;
	display: flex; align-items: center; gap: 0;
	height: 56px; padding: 0 15px;
	background: #25D366; color: #fff;
	border-radius: 999px;
	box-shadow: 0 6px 22px rgba(37,211,102,0.42), 0 2px 6px rgba(0,0,0,0.18);
	transition: gap 0.28s cubic-bezier(.2,.7,.3,1), padding 0.28s cubic-bezier(.2,.7,.3,1),
	            transform 0.2s, box-shadow 0.2s, background 0.2s;
	overflow: hidden;
}
.wa-float svg { width: 26px; height: 26px; flex-shrink: 0; }
.wa-float .wa-label {
	max-width: 0; opacity: 0;
	font-size: 0.9rem; font-weight: 600; white-space: nowrap;
	transition: max-width 0.28s cubic-bezier(.2,.7,.3,1), opacity 0.2s;
}
.wa-float:hover, .wa-float:focus-visible {
	background: #1EBE5A;
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(37,211,102,0.5), 0 2px 6px rgba(0,0,0,0.2);
	gap: 0.6rem; padding-right: 21px;
}
.wa-float:hover .wa-label, .wa-float:focus-visible .wa-label { max-width: 200px; opacity: 1; }
/* Unter ~1270 px reicht der rechtsbuendige Teil der Copyright-Zeile
   („… § 19 UStG“) unter den Knopf (18.10.2026, build/aktionsleiste_test.py).
   Ab 769 px; darunter uebernimmt die Aktionsleiste samt Fuss-Padding. */
@media (min-width: 769px) and (max-width: 1299px) {
	.footer-copy { padding-right: 4.5rem; }
}

/* Knopf im Textfluss, z. B. neben "Anrufen" */
.btn-whatsapp {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
	/* Weiss auf WhatsApp-Gruen = 2,0:1. Dunkelgruen darauf = 8,9:1. */
	background: #25D366; color: #04210f;
	padding: 0.85rem 1.6rem; border-radius: var(--radius);
	font-weight: 600; font-size: 0.9rem; white-space: nowrap;
	border: 1px solid transparent;
	box-shadow: 0 2px 10px rgba(37,211,102,0.28);
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-whatsapp:hover {
	background: #1EBE5A; transform: translateY(-2px);
	box-shadow: 0 8px 26px rgba(37,211,102,0.42);
}
.btn-whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Eintrag in der Kontaktliste */
.ki-item .ki-icon-wrap.wa {
	background: rgba(37,211,102,0.1);
	border-color: rgba(37,211,102,0.28);
	color: #128C4A;
}
.ki-item a.wa-link:hover { color: #128C4A; }

@media (max-width: 768px) {
	.wa-float { right: 1rem; bottom: 1rem; height: 52px; padding: 0 13px; }
	.wa-float svg { width: 24px; height: 24px; }
	/* Auf dem Handy nicht aufklappen — der Platz fehlt */
	.wa-float:hover { gap: 0; padding-right: 13px; }
	.wa-float:hover .wa-label { max-width: 0; opacity: 0; }
	/* Platz, damit Knopf bzw. Aktionsleiste keine Fussleisten-Links
	   verdecken. Am Fuss statt am body: dann gilt es auch ohne :has(), und
	   auf termin.php (ohne Leiste) schadet der dunkle Rand nicht. */
	.footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Hero-Karte der Startseite am Handy ausblenden (09.10.2026, Mockup A): Sie
   wiederholt dort nur Telefon und „Festpreise ab 59 €", die direkt darueber
   bzw. im Preisabschnitt stehen, und schob den Inhalt um eine Bildschirmhoehe
   nach unten. Kein Fall von Regel 3 — das ist eine Breitenfrage, kein
   JavaScript; mit und ohne JS gleich. Leistungsseiten behalten ihre Karte,
   dort steht der Festpreis der Leistung darin. */
@media (max-width: 768px) {
	.hero-card-startseite { display: none; }
}

/* =====================
   AKTIONSLEISTE — nur am Handy
   Alis Entscheidung vom 09.10.2026 (Mockup A): Anrufen · WhatsApp · Termin
   immer erreichbar, gross und mit Text. Markup aus aktionsleiste() in
   build/build_seiten.py, auf index.html von Hand.
   Sie steht im Markup VOR .wa-float; `.aktionsleiste ~ .wa-float` blendet
   den schwebenden Knopf dort aus, wo die Leiste ist — keine Doppelung.
   Auf termin.php gibt es beides nicht (Entscheidung Punkt 8).
===================== */
.aktionsleiste { display: none; }
@media (max-width: 768px) {
	.aktionsleiste {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
		display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
		padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
		background: var(--bg-dark);
		border-top: 1px solid rgba(255,255,255,0.14);
		box-shadow: 0 -6px 22px rgba(0,0,0,0.22);
	}
	.aktionsleiste a {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 3px; min-height: 58px; padding: 4px 2px;
		border-radius: var(--radius-sm); border: 1px solid transparent;
		font-weight: 700; font-size: 0.94rem; line-height: 1.15; text-align: center;
	}
	.aktionsleiste svg { width: 22px; height: 22px; flex-shrink: 0; }
	/* Kontraste: 7,3:1 · 8,9:1 · Weiss auf ~#20262f > 12:1 */
	.aktionsleiste .al-anruf { background: var(--accent); color: var(--on-accent); }
	.aktionsleiste .al-wa { background: #25D366; color: #04210f; }
	.aktionsleiste .al-termin { background: rgba(255,255,255,0.1); color: var(--white); border-color: rgba(255,255,255,0.24); }
	.aktionsleiste a:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
	.aktionsleiste ~ .wa-float { display: none; }
}

/* =====================
   DRUCK
   Aeltere Kunden drucken die Preisliste tatsaechlich aus. Die erste Fassung
   dieser Regeln war fehlerhaft: sie setzte den Hintergrund dunkler Abschnitte
   auf Weiss, liess den Text darin aber weiss — Ergebnis war unsichtbarer Text.
   Und sie haengte an JEDEN Link die URL an, wodurch die lange wa.me-Adresse
   quer durch den WhatsApp-Knopf lief.
===================== */
@media print {
	/* Nichts darf versteckt bleiben */
	.js .reveal, .js .service-card, .js .preis-card, .js .stat-card,
	.js .ki-item, .js .fw-step { opacity: 1 !important; transform: none !important; }

	/* Deko und Bedienelemente raus */
	.header, .mobile-nav, .menu-toggle, .hero-grid-bg, .wa-float, .aktionsleiste,
	.breadcrumb, .skip-link, .hero-card, .kontakt-form-wrap { display: none !important; }
	.hero::before, .hero::after, .section-dark::before { display: none !important; }

	body { background: #fff; color: #000; font-size: 11pt; }

	/* Flaechen weiss UND alles darin dunkel — sonst weiss auf weiss */
	.hero, .section, .section-dark, .trust-bar, .footer,
	.hero *, .section *, .section-dark *, .trust-bar *, .footer * {
		background: transparent !important;
		color: #111 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}
	.hero, .section, .section-dark { padding: 1.2rem 0 !important; }

	/* Akzentfarbe dunkler, damit sie auf Papier lesbar bleibt */
	.hero h1 .accent, .section-label, .preis-amount, .stat-num,
	.anfahrt-preis, .fw-num { color: #0b5a86 !important; -webkit-text-fill-color: #0b5a86 !important; }

	/* Karten als feine Rahmen statt Fuellflaechen */
	.service-card, .preis-card, .fw-step, .note-card, .faq-item,
	.anfahrt-box, .related-card, .stat-card {
		border: 1px solid #bbb !important;
		break-inside: avoid; page-break-inside: avoid;
	}
	.btn-primary, .btn-secondary, .btn-whatsapp, .hero-card-btn, .btn-ghost, .nav-cta {
		border: 1px solid #666 !important; padding: 0.3rem 0.7rem !important;
	}

	/* Antworten aufklappen, damit im Ausdruck nichts fehlt */
	.faq-item[open] .faq-answer, .faq-answer { display: block !important; }
	.faq-item summary::after { display: none !important; }

	/* Abschnitte nicht mitten durchschneiden */
	h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

	/* URL nur hinter Textlinks, NICHT hinter Knoepfen — dort sprengt sie das Layout */
	.legal-block a[href^="http"]::after,
	.faq-answer a[href^="http"]::after {
		content: " (" attr(href) ")"; font-size: 0.8em; color: #555; word-break: break-all;
	}
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 1024px) {
	:root { --sec-pad: 5rem; }
	.hero-inner { grid-template-columns: 1fr; gap: 3rem; }
	.hero-card { max-width: 520px; }
	.services-grid, .services-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.ueber-inner { grid-template-columns: 1fr; gap: 3rem; }
	.beleg-inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.beleg-inner .beleg-text { order: -1; }
	.ueber-foto { max-width: 380px; }
	.ueber-stats.ueber-stats-breit { grid-template-columns: repeat(2, 1fr); margin-top: 2.5rem; }
	.fw-steps, .fw-steps-3 { grid-template-columns: repeat(2, 1fr); }
	.fw-step:nth-child(2n)::after { display: none; }
	.related-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.footer-brand { grid-column: 1 / -1; }
	.preise-grid-3 { grid-template-columns: 1fr; max-width: 480px; }
}

@media (max-width: 768px) {
	:root { --sec-pad: 3.75rem; }
	.nav { display: none; }
	.menu-toggle { display: flex; }
	/* Ohne JavaScript oeffnet ☰ nichts (.open setzt nur das Skript) — gemessen
	   18.10.2026, das Menue war auf dem Handy unerreichbar. Projektregel 3: dann
	   den Knopf weg und die Links offen, kompakt umbrochen. Der Kopf klebt dann
	   nicht, sonst laege das Menue dauerhaft ueber dem Inhalt. */
	html:not(.js) .header { position: relative; }
	html:not(.js) .menu-toggle { display: none; }
	html:not(.js) .header-inner { min-height: 44px; }   /* die Hoehe gab bisher der Knopf */
	html:not(.js) .mobile-nav {
		display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 1.1rem;
		padding: 0.25rem 1.5rem 0.9rem;
	}
	html:not(.js) .mobile-nav a { border-bottom: none; padding: 0.7rem 0; min-height: 44px; }
	html:not(.js) .mobile-nav .mobile-cta { flex-basis: 100%; margin-top: 0.4rem; padding: 0.85rem; }
	.hero { padding: 3.5rem 0 3.25rem; }
	.hero-desc { font-size: 1rem; }
	.hero-btns { flex-direction: column; align-items: stretch; }
	.hero-btns .btn-primary, .hero-btns .btn-secondary { width: 100%; }
	.hero-card { padding: 1.5rem; }
	.services-grid, .services-grid-2 { grid-template-columns: 1fr; }
	.fw-steps, .fw-steps-3 { grid-template-columns: 1fr; }
	.fw-step::after { display: none !important; }
	.preise-grid { grid-template-columns: 1fr; max-width: 100%; }
	.preis-card { padding: 2rem 1.5rem; }
	.kontakt-grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.kontakt-form-wrap { padding: 1.6rem; }
	.form-row { grid-template-columns: 1fr; gap: 0; }
	/* Vier Punkte nebeneinander waren auf dem Handy gequetscht */
	.trust-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 0.5rem; }
	.trust-divider { display: none; }
	.trust-item { padding: 0.2rem 0.5rem; }
	.ueber-stats { grid-template-columns: 1fr 1fr; }
	.ueber-stats.ueber-stats-breit { grid-template-columns: repeat(2, 1fr); }
	.related-grid { grid-template-columns: 1fr; }
	.note-card { flex-direction: column; gap: 1rem; padding: 1.6rem; }
	.section-header { margin-bottom: 2.5rem; }
	/* Nur oben: Ein padding-Kurzwert hier ueberschrieb den Platz unter der
	   Aktionsleiste weiter oben (padding-bottom, 09.10.) — die Leiste
	   verdeckte die Copyright-Zeile (17.10.2026, build/aktionsleiste_test.py). */
	.footer { padding-top: 2.5rem; }
	.footer-inner { grid-template-columns: 1fr; gap: 1.75rem; }
	.footer-copy { flex-direction: column; }
	.footer-col ul { gap: 0.15rem; }
	.footer-col a { padding: 0.45rem 0; }
	.legal-page { padding: 3rem 0 4rem; }
	/* Drei feste Spalten liefen bei 390 px 40 px über den Rand (einblicke.html) */
	.eb-index { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 480px) {
	.container { padding: 0 1.15rem; }
	.ueber-stats, .ueber-stats.ueber-stats-breit { grid-template-columns: 1fr; }
	.hero-badge { font-size: 0.78rem; }
	.service-card { padding: 1.6rem 1.35rem; }
	.preis-badge { left: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   TERMIN VEREINBAREN
   Neu am 03.08.2026. Gehoert hierher und nicht in ein eigenes
   Stylesheet: die Seite traegt Kopf, Fusszeile und Bausteine der
   uebrigen Website — ein zweites Stylesheet waere ein zweiter Ort,
   an dem dieselben Variablen gepflegt werden muessten.

   Die Zielgruppe sind auch aeltere Menschen. Deshalb durchgehend
   grosse Klickflaechen (min. 44 px), kraeftige Kontraste und kein
   Element, das nur per Hover erkennbar ist.
   ══════════════════════════════════════════════════════════════ */

.termin-kopf { padding-bottom: 0; }

/* ⚠ Der Abschnitt DIREKT unter dem Kopfbereich bekommt weniger Luft nach oben
   (05.08.2026). `--sec-pad` ist 6,5rem, auf dem Handy 5rem — und weil
   `.termin-kopf` unten auf 0 steht, klaffte dazwischen die volle Zahl als
   Leere: rund 80 px, in denen nichts steht, direkt vor der ersten Frage.
   Nachbarschafts-Selektor statt eigener Klasse, damit das Markup unberuehrt
   bleibt und die Regel nur genau hier greift. */
.termin-kopf + .section { padding-top: 2.25rem; }

/* ⚠ Die Ueberschriften stehen im Markup NEBEN dem Formular, nicht darin
   (siehe termin/formular.php). Sie brauchen deshalb dieselbe Spaltenbreite
   und dieselbe Zentrierung wie `.termin-wahl` — sonst springt die linke
   Kante zwischen Ueberschrift und Karten. Wer eine der vier Breiten
   aendert, muss alle vier aendern. */
/* Fortschrittsanzeige (09.10.2026): Leistung → Ort & Zeit → Ihre Daten.
   Ersetzt die Zeile „Schritt 1 von 2". Drei gleich breite Felder, damit am
   Handy nichts umbricht; die aktuelle Stufe traegt Farbe UND Fettdruck,
   nicht nur Farbe. */
.termin-fortschritt {
	list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 0.4rem; margin: 0 auto 1.75rem; max-width: 44rem; padding: 0;
	counter-reset: none;
}
.termin-fortschritt li {
	display: flex; align-items: center; gap: 0.45rem;
	padding: 0.5rem 0 0.55rem; border-top: 4px solid var(--linie-hover);
	font-size: 0.94rem; font-weight: 500; color: var(--text-weich); line-height: 1.25;
}
.tf-nr {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 1.6rem; height: 1.6rem; border-radius: 50%;
	border: 2px solid #94a3b8; font-size: 0.85rem; font-weight: 700;
}
.termin-fortschritt li.erledigt { border-top-color: var(--accent-dark); color: var(--text-stark); }
.termin-fortschritt li.erledigt .tf-nr { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--auf-akzent-dunkel); }
.termin-fortschritt li.aktuell { border-top-color: var(--accent-dark); color: var(--accent-dark); font-weight: 700; }
.termin-fortschritt li.aktuell .tf-nr { border-color: var(--accent-dark); }

.termin-frage { font-size: 1.35rem; margin: 2.5rem auto 1rem; max-width: 44rem; }
.termin-frage:first-of-type { margin-top: 0; }

.termin-hinweis { color: var(--text-weich); font-size: 0.94rem; margin: 0 auto 1.25rem; max-width: 44rem; }

/* ── Schritt 1: Auswahl ────────────────────────────────── */
/* ⚠ `margin-inline: auto` ist hier PFLICHT, nicht Geschmack (05.08.2026):
   Der umgebende .container ist 1160 px breit und zentriert. Ohne die
   automatischen Seitenraender klebt das 44rem breite Formular links und
   laesst rechts ueber 400 px Leere — waehrend die Kopfzeile darueber
   zentriert ist. Genau dieser Bruch liess die Seite auf dem Desktop
   kaputt aussehen. Gemessen: Inhalt 142–848 px in einem 1400er Fenster. */
.termin-wahl { max-width: 44rem; margin-inline: auto; }

.termin-liste { border: 0; padding: 0; margin: 0 0 2rem; }

.termin-liste legend {
	font-size: 1.35rem; font-weight: 700; padding: 0; margin-bottom: 1rem;
}

/* ⚠ Kompakter seit 05.08.2026 — Padding von 1rem auf 0.8rem, Abstand von
   0.6 auf 0.45rem. Gemessen: Elf Karten à drei Zeilen ergaben 2276 px bis
   zum Absende-Knopf, also 2,7 Handy-Bildschirme Scrollen, bevor man buchen
   konnte. Die Mindest-Klickflaeche von 44 px bleibt dabei gewahrt (0.8rem
   oben + unten plus Textzeile ≈ 52 px) — das ist die Grenze, unter die
   wegen der Zielgruppe nichts gehen darf. */
.termin-option {
	display: flex; gap: 0.9rem; align-items: flex-start;
	padding: 0.8rem 1rem; margin-bottom: 0.45rem;
	background: var(--feld); border: 2px solid var(--linie-feld); border-radius: 10px;
	cursor: pointer;
}

.termin-option:hover { border-color: var(--linie-hover); }

/* Sichtbar auch fuer Tastatur — nicht nur bei Maus. */
.termin-option:focus-within { border-color: var(--accent); }

.termin-option input[type="radio"] {
	width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; flex-shrink: 0;
	accent-color: var(--accent-dark);
}

.termin-option input:checked + .termin-option-text strong { color: var(--accent-dark); }
/* Gewählte Karte als Ganzes kenntlich machen, nicht nur den kleinen Kreis */
.termin-option:has(input:checked) { border-color: var(--accent-dark); background: var(--feld-gewaehlt); box-shadow: 0 0 0 1px var(--accent-dark); }

/* ⚠ Raster statt Spalte (05.08.2026): Titel links, Preis RECHTS DANEBEN in
   derselben Zeile — vorher stand der Preis darunter und kostete pro Karte
   eine ganze Zeile. Die Beschreibung laeuft ueber beide Spalten und steht
   nur da, wo `formular.php` eine ausgibt.
   `min-width: 0` ist Pflicht: Ohne das kann ein Flex-Kind nicht unter seine
   Inhaltsbreite schrumpfen, und lange Titel wuerden die Karte sprengen. */
.termin-option-text {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.1rem 0.7rem;
	flex: 1; min-width: 0;
}
.termin-option-text strong { grid-column: 1; font-size: 1.05rem; }
.termin-option-text em {
	grid-column: 2; justify-self: end; white-space: nowrap;
	font-style: normal; font-size: 0.94rem; font-weight: 600; color: var(--text-stark);
}
.termin-option-text small {
	grid-column: 1 / -1;
	color: var(--text-weich); font-size: 0.95rem; line-height: 1.45;
}

/* Unter 480 px wird es zu eng fuer zwei Spalten — dann rutscht der Preis
   wieder unter den Titel, statt ihn zu quetschen.
   ⚠ Grenze 09.10.2026 von 380 auf 480 px angehoben: Mit 17 px Grundschrift
   brach „Hilfe nach Zeit" bei 390 px in drei Zeilen, weil „60 € pro Stunde ·
   60 Min" die rechte Spalte fuer sich beanspruchte. Der Knopf „Freie Zeiten
   anzeigen" klebt jetzt unten, die etwas laengere Liste kostet ihn nichts. */
@media (max-width: 480px) {
	.termin-option-text { grid-template-columns: 1fr; }
	.termin-option-text em { grid-column: 1; justify-self: start; }
}

/* ── Schritt 2: gewaehlte Leistung ─────────────────────── */
.termin-gewaehlt {
	display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
	justify-content: space-between;
	background: var(--feld); border: 2px solid var(--linie-feld); border-radius: 10px;
	padding: 1.1rem 1.25rem; margin-bottom: 2rem;
}
.termin-gewaehlt > div { display: flex; flex-direction: column; gap: 0.15rem; }
.termin-gewaehlt strong { font-size: 1.05rem; }
.termin-gewaehlt span { font-size: 0.9rem; color: var(--text-weich); }
.termin-aendern { flex-shrink: 0; }

.termin-leer p { margin: 0 0 0.75rem; }
.termin-leer p:last-child { margin-bottom: 0; }

/* ── Zeitauswahl ───────────────────────────────────────── */
.termin-tage { display: flex; flex-direction: column; gap: 1.25rem; }

.termin-tag { border-top: 1px solid var(--linie-feld); padding-top: 1rem; }
.termin-tag h3 { font-size: 1rem; margin: 0 0 0.7rem; }

.termin-zeiten { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Vormittag / Nachmittag je Tag (09.10.2026) */
.termin-tageszeit + .termin-tageszeit { margin-top: 0.85rem; }
.termin-tageszeit-titel {
	font-size: 0.94rem; font-weight: 600; color: var(--text-weich); margin: 0 0 0.4rem;
}

/* Das eigentliche Bedienelement. Der Radio-Knopf selbst wird
   ausgeblendet, die Flaeche ist der Knopf — aber NUR optisch: das
   Eingabefeld bleibt im Fluss und fuer Tastatur und Screenreader
   erreichbar. Kein display:none, das wuerde es unbedienbar machen. */
.termin-zeit { position: relative; }

.termin-zeit input {
	position: absolute; opacity: 0; width: 100%; height: 100%;
	margin: 0; cursor: pointer;
}

.termin-zeit span {
	display: block; min-width: 4.6rem; padding: 0.7rem 0.9rem;
	text-align: center; font-variant-numeric: tabular-nums;
	font-size: 1rem; font-weight: 600;
	background: var(--feld); border: 2px solid var(--linie-feld); border-radius: 8px;
	color: var(--text-stark);
}

.termin-zeit input:checked + span {
	background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.termin-zeit input:focus-visible + span { outline: 3px solid var(--text-stark); outline-offset: 2px; }

.termin-blaettern {
	display: flex; flex-wrap: wrap; gap: 1.25rem;
	margin: 1.5rem 0 0.5rem; font-weight: 600;
}

/* Gleiche Begruendung wie bei .termin-wahl — Schritt 2 hatte denselben Fehler. */
.termin-form { max-width: 44rem; margin-inline: auto; }

/* ── Kontaktfelder ─────────────────────────────────────── */
.termin-felder {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
	margin-bottom: 1.5rem;
}
.termin-felder label { display: flex; flex-direction: column; gap: 0.35rem;
	font-weight: 600; font-size: 0.95rem; }
.termin-felder label.breit { grid-column: 1 / -1; }
.termin-felder small { font-weight: 400; color: var(--text-weich); font-size: 0.85rem; }

.termin-felder input,
.termin-felder textarea {
	font: inherit; font-weight: 400;
	padding: 0.75rem 0.9rem;
	border: 2px solid var(--linie-feld); border-radius: 8px; background: var(--feld);
	width: 100%;
}
.termin-felder input:focus,
.termin-felder textarea:focus { border-color: var(--accent); outline: 3px solid var(--text-stark); outline-offset: 2px; }
.termin-felder textarea { resize: vertical; min-height: 6rem; }

.termin-agb {
	display: flex; gap: 0.75rem; align-items: flex-start;
	margin-bottom: 1.5rem; font-size: 0.95rem;
}
.termin-agb input { width: 1.35rem; height: 1.35rem; flex-shrink: 0;
	margin-top: 0.1rem; accent-color: var(--accent-dark); }

/* Links im Buchungsweg als Links erkennbar machen. Seitenweit gilt
   `a { color: inherit; text-decoration: none }` — die Telefonnummer im Kopf,
   „Spätere Termine", AGB und Datenschutz sahen deshalb aus wie Fließtext. */
.termin-kopf .section-header a,
.termin-hinweis a, .termin-agb a, .termin-leer a, .termin-blaettern a {
	color: var(--accent-dark); text-decoration: underline;
	text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.termin-blaettern a { display: inline-block; padding: 0.55rem 0; }

.termin-ablauf ol { margin: 0.5rem 0 0.75rem 1.2rem; }
.termin-ablauf li { margin-bottom: 0.35rem; }
.termin-ablauf p:last-child { margin-bottom: 0; }

/* ── Honeypot ──────────────────────────────────────────────
   Fuer Menschen unsichtbar, fuer Bots ein ausfuellbares Feld.
   ⚠ Nicht display:none — manche Bots pruefen genau darauf. Und
     Regel 3 des Projekts: was per CSS verschwindet, darf keine
     Funktion tragen. Dieses Feld traegt keine: bleibt es leer,
     passiert nichts. */
.hp-feld {
	position: absolute; left: -9999px; width: 1px; height: 1px;
	overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   MELDESEITE — Ergebnisseiten aus termin/rahmen.php
   (Bestätigungslink, Absenden ohne JavaScript, Kontaktformular)
   Vorher ohne Logo, ohne Absatzabstände, Links nicht erkennbar,
   die Aufzählung hing links über den Rand (09.10.2026).
   ══════════════════════════════════════════════════════════════ */
.meldeseite { background: var(--bg-alt); min-height: 100vh; display: flex; flex-direction: column; }
.meldeseite-kopf { background: var(--bg-dark); border-bottom: 1px solid var(--border-dark); }
.meldeseite-kopf-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; min-height: 68px; flex-wrap: wrap;
}
.meldeseite-tel {
	color: var(--white); font-weight: 600; font-size: 1rem;
	padding: 0.6rem 0.2rem; white-space: nowrap;
	border-bottom: 1px solid rgba(56,189,248,0.5);
}
.meldeseite-tel:hover { color: var(--accent2); }
.meldeseite-main { flex: 1; padding: 3rem 0 4rem; }
.meldeseite-karte {
	max-width: 40rem; margin: 0 auto;
	background: var(--bg-card); border: 1px solid var(--border);
	border-radius: var(--radius-lg); box-shadow: var(--shadow);
	padding: 2.5rem 2.25rem;
	font-size: 1.05rem; line-height: 1.7;
}
.meldeseite-karte h1 {
	font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.2;
	letter-spacing: -0.02em; margin-bottom: 1.1rem;
}
.meldeseite-karte p, .meldeseite-karte ul, .meldeseite-karte form { margin-bottom: 1.1rem; }
.meldeseite-karte ul { padding-left: 1.3rem; }
.meldeseite-karte li { margin-bottom: 0.4rem; }
.meldeseite-karte a:not([class]) {
	color: var(--accent-dark); text-decoration: underline;
	text-underline-offset: 3px; font-weight: 500;
}
.meldeseite-karte .btn-primary { white-space: normal; font-size: 1rem; padding: 0.95rem 1.6rem; }
.meldeseite-zurueck { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); margin-bottom: 0 !important; }
.meldeseite-knopf { margin-top: 1.5rem; margin-bottom: 0 !important; }
.meldeseite-fuss {
	background: var(--bg-footer); padding: 1.25rem 0;
	font-size: 0.9rem;
}
.meldeseite-fuss .container { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.meldeseite-fuss a { color: rgba(255,255,255,0.72); display: inline-block; padding: 0.5rem 0; }
.meldeseite-fuss a:hover { color: var(--accent2); }

@media (max-width: 640px) {
	.meldeseite-main { padding: 1.5rem 0 2.5rem; }
	.meldeseite-karte { padding: 1.75rem 1.35rem; font-size: 1rem; }
	.termin-felder { grid-template-columns: 1fr; }
	.termin-gewaehlt { flex-direction: column; align-items: stretch; }
	.termin-aendern { text-align: center; }
	.termin-zeit span { min-width: 4.2rem; padding: 0.75rem 0.6rem; }
}

/* „Freie Zeiten anzeigen" am Handy immer erreichbar (09.10.2026): Der Knopf
   klebt unten am Bildschirm, solange das Formular im Blick ist — reines CSS,
   ohne JavaScript bleibt er einfach am Ende des Formulars. Vorher lag er bei
   elf Leistungen und drei Orten mehrere Bildschirmhoehen tiefer. */
@media (max-width: 768px) {
	.termin-weiter {
		position: sticky; bottom: 0; z-index: 5;
		padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
		background: var(--bg-alt);
		border-top: 1px solid var(--border);
		box-shadow: 0 -8px 16px rgba(238,242,249,0.95);
	}
	.termin-weiter .btn-primary { width: 100%; min-height: 54px; font-size: 1.05rem; }
}

/* Ersatz fuer die Inline-Styles des Generators (13.10.2026, Regel 1).
   Bewusst am Dateiende: gleiche Spezifitaet wie .section-header, gewinnt
   also auch gegen dessen Media-Queries, so wie vorher das style-Attribut. */
.section-header-eng { margin-bottom: 2.25rem; }
.zentriert { text-align: center; }
.zentriert-2 { text-align: center; margin-top: 2rem; }
.kontaktzeile { text-align: center; margin-top: 1.5rem; }
.kontaktzeile a { color: var(--accent2); }

/* =====================
   DUNKLER MODUS (13.10.2026, Alis Entscheidung)
   Folgt der Einstellung des Geraets, kein Schalter. Nur Tokens werden
   umgestellt; die dunklen Abschnitte (Hero, Fussleiste) bleiben, wie sie sind.
   Kontraste nachgerechnet: Text 14,5:1, gedaempfter Text >= 7,4:1,
   Links (#38bdf8) >= 7,5:1 auf allen Flaechen; Knopfschrift 6,4:1.
===================== */
@media (prefers-color-scheme: dark) {
	:root {
		--bg:          #0a111e;
		--bg-alt:      #0d1626;
		--bg-card:     #111b2d;

		--accent-dark: #38bdf8;   /* Linkfarbe: auf Dunkel ist die helle Stufe die lesbare */
		--accent-soft: rgba(56,189,248,0.12);
		--accent-line: rgba(56,189,248,0.26);

		--text:        #e5ecf5;
		--text-muted:  #a3b2c7;
		--border:      #22304a;

		--shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
		--shadow:    0 2px 4px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.35);
		--shadow-lg: 0 4px 8px rgba(0,0,0,0.4), 0 18px 48px rgba(0,0,0,0.45);

		--feld:          #0e1829;
		--feld-gewaehlt: #0c2338;
		--linie-feld:    #3b4f70;
		--linie-hover:   #556b8e;
		--text-stark:    #e5ecf5;
		--text-weich:    #a3b2c7;
		--auf-akzent-dunkel: #04192b;
		--featured-a:    #0f2236;
		--featured-b:    #111b2d;
		color-scheme: dark;
	}
}

/* Ersatz fuer die Inline-Styles der handgepflegten Seiten (13.10.2026,
   Regel 1): Rechtstexte, 404, auftrag.html. Werte 1:1 uebernommen. */
/* ⚠ Spezifitaet: .legal-page > .container (0,2,0), .legal-block p + p
   (0,1,2) und .legal-block h3 (0,1,1) schlugen die einfachen Klassen.
   Das style-Attribut gewann vorher gegen alles, darum hier gezielt hoeher. */
.legal-page > .container.legal-schmal { max-width: 800px; }
.oben-04, .legal-block p.oben-04 { margin-top: 0.4rem; }
.oben-05 { margin-top: 0.5rem; }
.oben-06, .legal-block p.oben-06, .legal-block p + p.oben-06 { margin-top: 0.6rem; }
.oben-08, .legal-block p.oben-08, .legal-block p + p.oben-08 { margin-top: 0.8rem; }
.oben-10, .legal-block p.oben-10 { margin-top: 1rem; }
.oben-11, .legal-block p.oben-11, .legal-block p + p.oben-11 { margin-top: 1.1rem; }
.oben-14, .legal-block h3.oben-14 { margin-top: 1.4rem; }
.oben-15 { margin-top: 1.5rem; }
.section-404 { padding: 4.5rem 0 3rem; }
.section-header-weit { margin-bottom: 2.5rem; }
.karten-link { color: inherit; text-decoration: none; }
.link-akzent2 { color: var(--accent2); }
.link-akzent { color: var(--accent); }
/* Link im Fliesstext auf hellem Grund (13.10.2026): --accent faellt dort unter WCAG AA, --accent-dark 5,9:1; Dunkelmodus stellt den Token selbst um. */
.link-text { color: var(--accent-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.link-text:hover { color: var(--accent); }
.liste-eng { margin-top: 0.5rem; padding-left: 1rem; }
.knopf-abstand { margin-top: 2rem; display: inline-block; }

/* Nur fuer Screenreader sichtbar (13.10.2026, Ueberschriften-Gliederung der
   Startseite). Uebliches Muster: nicht display:none, sonst liest es niemand. */
.nur-vorlesen {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* Umbruch bei 320 px (WCAG 1.4.10 — entspricht 400 % Zoom). Gemessen
   14.10.2026: fünf Seiten scrollten waagerecht (bis 381 px), auf
   virus-entfernen.html und entwicklung.html schnitt `overflow: hidden` am
   Hero/Abschnitt Text und Knöpfe ab. Ursachen: Knöpfe mit `nowrap`, die
   Hero-Spalte (`1fr` = mindestens Inhaltsbreite) und überlange Wörter
   („Open-Source-Fernwartungssoftware“, Unterschriftslinie im Widerrufsformular).
   `overflow-wrap` bricht nur Wörter, die sonst überlaufen — bei normaler
   Breite ändert sich nichts. */
body { overflow-wrap: break-word; }
@media (max-width: 400px) {
	.btn-primary, .btn-secondary, .btn-ghost { white-space: normal; }
	.hero-inner > * { min-width: 0; }
}