/* BEGIN selbst gehostete Schriften (tools/build_fonts.py): Overpass, Karla und eine Auswahl von Font Awesome 4.7, alle SIL OFL 1.1 */
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/karla-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/karla-normal-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: 'Overpass'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('../fonts/overpass-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Overpass'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('../fonts/overpass-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/overpass-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/overpass-normal-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: 'FontAwesome'; font-style: normal; font-weight: normal; font-display: block; src: url('../fonts/fa-subset.woff2') format('woff2'); }
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.fa-check:before { content: "\f00c"; }
.fa-angle-right:before { content: "\f105"; }
.fa-angle-down:before { content: "\f107"; }
.fa-users:before { content: "\f0c0"; }
.fa-thumbs-o-up:before { content: "\f087"; }
.fa-sun-o:before { content: "\f185"; }
.fa-phone:before { content: "\f095"; }
.fa-moon-o:before { content: "\f186"; }
.fa-map-marker:before { content: "\f041"; }
.fa-info-circle:before { content: "\f05a"; }
.fa-id-card-o:before { content: "\f2c3"; }
.fa-handshake-o:before { content: "\f2b5"; }
.fa-graduation-cap:before { content: "\f19d"; }
.fa-envelope:before { content: "\f0e0"; }
.fa-clock-o:before { content: "\f017"; }
.fa-check-circle:before { content: "\f058"; }
.fa-car:before { content: "\f1b9"; }
/* END selbst gehostete Schriften */
/* Bleifuss v3 - design tokens match the real brand (navy + red), same
   values as the v2 WordPress preview, independent implementation. */
:root {
	--paper: #FFFFFF;
	--ink: #1A2035;
	--ink-soft: #565C82;
	--line: #DADDE6;
	--blue: #305CDE;
	--blue-deep: #1D43B4;
	--red: #C62330;
	--red-deep: #A81C27;
	--surface: #FFFFFF;
	/* Hell-Modus 2026-11-02: Blau = Royal Blue #305CDE (Kundenwunsch), Dark Mode unten auf die alten Werte gepinnt. */
	--hero-1: #305CDE;
	--accent: #FF6670;
	--accent-on-band: #FFE0E3;
	--link-on-band: #FFE0E3;
	--band-faint: #FFFFFF;
	--footer-muted: #C0C6E6;
	--footer-bg: #0A2A9E;
	--band-text-strong: #FFFFFF;
	--band-text: rgba(255,255,255,.92);
	--band-text-soft: rgba(255,255,255,.9);
	--drawer-sub: rgba(255,255,255,.92);
	--band-card: rgba(8,16,70,.22);
	--band-card-hover: rgba(8,16,70,.32);
	--nav-btn-border: rgba(255,255,255,.8);
	--surface-blue: #305CDE;
	/* Header-Verlauf nur im Hell-Modus (Wunsch 2026-11-02): Royal Blue #305CDE nach Marken-Rot. Rot auf Rot -> weisser Anrufen-Button. */
	--header-bg: linear-gradient(90deg, #305CDE 0%, #C62330 100%);
	--nav-link: rgba(255,255,255,.92);
	--nav-cta-bg: #FFFFFF;
	--nav-cta-fg: #C62330;
	--nav-btn-hover-bg: rgba(255,255,255,.22);
	--nav-btn-hover-border: #FFFFFF;
	/* Feste Marken-Farben fuer Flaechen mit weissem Text (Buttons, Tags,
	   Hover-Kreise): bleiben im Dark Mode bewusst UNVERAENDERT, genau wie
	   --hero-1/--accent oben. --red/--red-deep/--blue selbst
	   werden im Dark Mode heller (richtig fuer TEXT auf dunklem Papier),
	   aber als Hintergrund hinter weissem Text faellt der Kontrast dadurch
	   auf 2,2-2,8:1 (gefordert: 4,5:1) - gefunden 2026-10-29 im
	   Accessibility-Audit. Gleiche Bug-Klasse wie schon beim Footer/
	   CTA-Band/Tabellenkopf/Karussell-Punkten gefixt, hier auf die
	   restlichen Stellen (Buttons, Tags, Hover-Zustaende) angewendet. */
	--brand-red: #C62330;
	--brand-red-deep: #A81C27;
	--brand-blue: #305CDE;
	--brand-blue-deep: #1D43B4;
	--font-display: 'Overpass', 'Arial Narrow', sans-serif;
	--font-body: 'Karla', 'Segoe UI', sans-serif;
	color-scheme: light;
}

/* Hell/Dunkel-Umschalter (<html data-theme="dark">, Klick-Handler in
   main.js, Zustand per localStorage 'bleifuss-theme' - gleicher Key wie im
   v2-Theme, damit die Wahl eines Besuchers dort genauso gilt). Nur diese
   Tokens werden umgeschaltet. --accent bleibt fix; die Blau-/Band-Tokens
   (--hero-*, --brand-blue*) sind im Hell-Modus das Logo-Blau (2026-11-02) und
   hier auf die fruehere dunklere Palette gepinnt, damit der Dark Mode gleich
   bleibt. */
:root[data-theme="dark"] {
	--paper: #12162A;
	--ink: #ECEEF5;
	--ink-soft: #AEB3D1;
	--line: #2A3055;
	--surface: #1B2040;
	--blue: #8DA0F0;
	--blue-deep: #B7C2F7;
	--red: #FF6670;
	--red-deep: #FF8D94;
	--hero-1: #1A224F;
	--brand-blue: #2B3A8C;
	--brand-blue-deep: #1D2860;
	--accent-on-band: #FF6670;
	--link-on-band: #FF8D94;
	--band-faint: rgba(255,255,255,.55);
	--footer-muted: #9AA0C2;
	--footer-bg: #1D2860;
	--band-text-strong: #ECEEF5;
	--band-text: rgba(255,255,255,.85);
	--band-text-soft: rgba(255,255,255,.78);
	--drawer-sub: rgba(255,255,255,.75);
	--band-card: rgba(255,255,255,.06);
	--band-card-hover: rgba(255,255,255,.1);
	--nav-btn-border: rgba(255,255,255,.45);
	--surface-blue: #1D2860;
	--header-bg: linear-gradient(90deg, var(--hero-1) 0%, var(--brand-red) 100%);
	--nav-link: rgba(255,255,255,.85);
	--nav-cta-bg: var(--brand-red);
	--nav-cta-fg: #fff;
	--nav-btn-hover-bg: var(--brand-red);
	--nav-btn-hover-border: var(--brand-red);
	color-scheme: dark;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	transition: background-color .2s ease, color .2s ease;
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }

a { color: var(--blue); }

.page-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.v3-notice {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	border-left: 4px solid var(--blue);
	padding: 12px 20px;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

/* ===== Header ===== */
.site-header {
	background: var(--header-bg);
	border-top: 4px solid var(--red);
	position: sticky;
	top: 0;
	z-index: 25;
}
.site-header-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 70px; width: auto; }
@media (max-width: 600px) { .logo img { height: 64px; } }
.site-header nav { display: flex; align-items: center; gap: 24px; }
.site-header nav a { text-decoration: none; color: var(--nav-link); font-weight: 600; white-space: nowrap; }
.site-header nav a:hover { color: #fff; }
/* Aktive Seite bzw. aktiver Bereich (layout.php setzt .is-current) */
.site-header nav > a.is-current,
.nav-dropdown-toggle.is-current {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--accent-on-band);
	text-decoration-thickness: 2px;
	text-underline-offset: 7px;
}
.nav-cta {
	background: var(--nav-cta-bg);
	color: var(--nav-cta-fg) !important;
	padding: 8px 18px;
	border-radius: 999px;
	border: 2px solid #fff;
}

/* Icon-Knoepfe (Hell/Dunkel, EN/DE): gleiche kompakte, runde Form, damit sie
   als zusammengehoeriges Paar in der Nav wirken statt wie Textbuttons. */
.v3-theme-toggle, .v3-lang-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; flex: 0 0 auto;
	border: 1.5px solid var(--nav-btn-border); background: transparent; color: #fff;
	border-radius: 50%; padding: 0; margin: 0;
	font-family: var(--font-body); font-weight: 700; font-size: 0.78rem;
	cursor: pointer; line-height: 1;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.v3-theme-toggle:hover, .v3-lang-toggle:hover { background: var(--nav-btn-hover-bg); border-color: var(--nav-btn-hover-border); }
.v3-theme-toggle .fa { font-size: 1.05rem; }
.v3-theme-toggle .theme-icon-night { display: none; }
:root[data-theme="dark"] .v3-theme-toggle .theme-icon-day { display: none; }
:root[data-theme="dark"] .v3-theme-toggle .theme-icon-night { display: inline; }

/* data-i18n-Spans gibt es im ausgelieferten HTML nicht mehr zu sehen: der
   Sprachumschalter ist jetzt ein echter Link auf /en/... bzw. zurueck, und
   index.php loest jedes <span data-i18n="de">...</span><span data-i18n="en">
   ...</span>-Paar serverseitig zur richtigen Sprache auf, bevor ueberhaupt
   etwas an den Browser geht (siehe bleifuss_resolve_i18n in index.php) -
   kein CSS/JS zum Sprache-Umschalten mehr noetig. */

/* Dropdown "Ausbildung": Klick/Tipp per main.js (.is-open), auf Desktop zusaetzlich Hover */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
	font: inherit; font-weight: 600; color: var(--nav-link); white-space: nowrap;
}
.nav-dropdown-toggle:hover, .nav-dropdown.is-open .nav-dropdown-toggle { color: #fff; }
.nav-dropdown-toggle .fa { transition: transform .2s ease; }
.nav-dropdown.is-open .nav-dropdown-toggle .fa { transform: rotate(180deg); }
.nav-dropdown-panel {
	position: absolute; top: calc(100% + 28px); left: -20px; z-index: 30;
	min-width: 240px; padding: 8px 0;
	display: flex; flex-direction: column;
	background: var(--paper);
	border-top: 3px solid var(--red);
	border-radius: 0 0 12px 12px;
	box-shadow: 0 18px 40px rgba(20,22,42,.25);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* unsichtbare Bruecke zwischen Knopf und Panel, damit der Hover nicht abreisst */
.nav-dropdown-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 31px; }
.nav-dropdown.is-open .nav-dropdown-panel { opacity: 1; visibility: visible; transform: none; }
.site-header nav .nav-dropdown-panel a { display: block; padding: 10px 20px; color: var(--ink); white-space: nowrap; }
.site-header nav .nav-dropdown-panel a:hover,
.site-header nav .nav-dropdown-panel a:focus-visible { color: var(--red); background: rgba(198,35,48,.06); }
.site-header nav .nav-dropdown-panel a.is-current { color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
@media (hover: hover) and (min-width: 921px) {
	.nav-dropdown:hover .nav-dropdown-panel { opacity: 1; visibility: visible; transform: none; }
}

.hamburger { display: none; }
/* Logo plus 8 Nav-Elemente (6 Links, Sprach- und Theme-Schalter, Anrufen) brauchen gemessen ca. 970px (plus Scrollbalken),
   darum Drawer bis 990px; bis 1100px sitzen die Abstaende enger. */
@media (max-width: 1100px) { .site-header nav { gap: 16px; } }
@media (max-width: 990px) {
	.hamburger {
		display: flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0;
		position: relative; z-index: 2; /* bleibt ueber dem offenen Drawer, wird dort zum X */
	}
	.hamburger span { display: block; width: 24px; height: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
	.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.site-header nav {
		position: fixed; inset: 0; flex-direction: column; align-items: center;
		justify-content: flex-start; justify-content: safe center;
		overflow-y: auto; padding: 96px 24px 40px;
		background: var(--hero-1); gap: 22px; font-size: 1.2rem;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	}
	.site-header nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
	.nav-dropdown { display: flex; flex-direction: column; align-items: center; }
	.nav-dropdown-panel {
		position: static; display: none; min-width: 0; margin-top: 14px; padding: 0;
		align-items: center; gap: 12px;
		background: none; border: 0; border-radius: 0; box-shadow: none;
		opacity: 1; visibility: visible; transform: none; transition: none;
	}
	.nav-dropdown-panel::before { display: none; }
	.nav-dropdown.is-open .nav-dropdown-panel { display: flex; }
	.site-header nav .nav-dropdown-panel a { padding: 0; font-size: 1.05rem; color: var(--drawer-sub); }
	.site-header nav .nav-dropdown-panel a:hover,
	.site-header nav .nav-dropdown-panel a:focus-visible { background: none; color: #fff; }
	.site-header nav .nav-dropdown-panel a.is-current { box-shadow: none; color: var(--accent-on-band); }
}

/* ===== Buttons ===== */
.v2-cta, .cta {
	display: inline-flex; align-items: center; height: 48px;
	background: var(--brand-red); color: #fff; font-family: var(--font-display);
	font-weight: 700; font-size: 0.95rem; padding: 0 26px;
	border: 2px solid #fff; border-radius: 999px;
	box-shadow: 0 0 0 2px rgba(198, 35, 48, 0.4);
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}
.v2-cta:hover, .cta:hover { background: var(--brand-red-deep); }
.v2-cta--dark { background: var(--hero-1); color: var(--accent-on-band); }
.v2-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.v2-eyebrow { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; }

/* ===== Hero ===== */
.v2-hero { position: relative; min-height: clamp(460px, 45.8vw, 880px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; isolation: isolate; }
/* Hero-Slideshow: drei Slides (Strassenvideo, Auto, Motorrad) im Takt von Headline-Rotator und Fortschrittsbalken (main.js).
   Alle liegen unter dem Overlay (::after, z-index -1). Der aktive Slide blendet ueber den abtretenden ein; der bleibt bis zum Ende
   der Blende voll sichtbar, sonst entstuende in der Mitte der Blende eine dunkle Luecke. */
.v2-hero-slide { position: absolute; inset: 0; z-index: -3; opacity: 0; transition: opacity 1.2s ease; }
.v2-hero-slide.is-leaving { opacity: 1; }
.v2-hero-slide.is-active { z-index: -2; opacity: 1; }
.v2-hero-bg {
	position: absolute; inset: -20px;
	background-image: url('../img/hero-video-poster.jpg');
	background-size: cover;
	background-position: center 60%;
	filter: blur(6px) saturate(1.2);
}
/* Fotos: scharf (kein Blur), eigener Bildausschnitt; das Bild setzt main.js erst nach dem Laden der Seite (data-bg). */
.v2-hero-bg--photo { inset: 0; filter: none; background-color: #14162a; }
.v2-hero-bg--car { background-position: center 55%; }
.v2-hero-bg--bike { background-position: center 12%; }
/* Ken-Burns nur am sichtbaren (und beim Ausblenden am abtretenden) Slide, damit nicht drei Animationen gleichzeitig laufen. */
.v2-hero-slide.is-active .v2-hero-bg, .v2-hero-slide.is-leaving .v2-hero-bg { animation: v2-hero-kenburns 9.5s linear infinite; }
@media (prefers-reduced-motion: reduce) {
	.v2-hero-slide.is-active .v2-hero-bg, .v2-hero-slide.is-leaving .v2-hero-bg { animation: none; }
}
@keyframes v2-hero-kenburns { from { transform: scale(1); } to { transform: scale(1.05) translate(-1.5%, -1%); } }
/* Hero-Video: liegt im ersten Slide ueber dem Poster (.v2-hero-bg) und blendet ein, sobald es laeuft (.has-video). */
.v2-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.v2-hero.has-video .v2-hero-video { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.v2-hero-video { display: none; }
}
.v2-hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(20,22,42,.93) 0%, rgba(20,22,42,.82) 35%, rgba(20,22,42,0) 74%);
	z-index: -1;
}
.v2-hero-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.15); z-index: 2; }
.v2-hero-progress > span { display: block; height: 100%; width: 0; background: var(--accent); animation: v2-hero-progress 9.5s linear infinite; }
@keyframes v2-hero-progress { from { width: 0; } to { width: 100%; } }
.v2-hero-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 48px 24px; width: 100%; }
.v2-hero-copy { max-width: 720px; }
.v2-hero-social a { color: #fff; display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); align-items: center; justify-content: center; margin-bottom: 16px; }
.v2-hero-eyebrow { display: block; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; margin-bottom: 10px; }
.v2-hero h1 { font-weight: 400; font-size: clamp(2rem, 3.6vw, 3.5rem); text-wrap: balance; display: grid; margin: 0 0 24px; }
.v2-hero-rotator { grid-area: 1/1; opacity: 0; transform: translateY(100%); transition: opacity .5s ease, transform .5s ease; }
.v2-hero-rotator.is-active { opacity: 1; transform: translateY(0); }
.v2-accent { color: var(--accent); font-style: normal; }

/* ===== Road strip ===== */
.v2-road-strip { background: var(--paper); padding: 40px 24px 10px; }
.v2-road { width: 100%; height: auto; }
.road-line { stroke: var(--blue); }
.waypoint-dot { fill: var(--paper); stroke: var(--blue); stroke-width: 3; }
.waypoint-dot.destination { fill: var(--red); stroke: var(--red); }
.waypoint-label { font-family: var(--font-display); font-size: 15px; fill: var(--ink-soft); font-weight: 700; }
.waypoint-label.current { fill: var(--red); }

/* ===== Classes carousel ===== */
.v2-classes { padding: 40px 24px 10px; }
.v2-classes-grid { display: grid; grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.v2-classes-intro { grid-column: 1; grid-row: 1; }
.v2-classes-carousel { grid-column: 2; grid-row: 1; position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.v2-classes-intro h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin: 10px 0 16px; }
.v2-classes-intro p { color: var(--ink-soft); max-width: 46ch; margin: 0 0 22px; }
.v2-classes-track { display: flex; flex: 1 1 0%; min-width: 0; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; }
.v2-classes-track::-webkit-scrollbar { display: none; }
.v2-class-card {
	flex: 0 0 auto; scroll-snap-align: start; width: min(280px, 78vw);
	background: var(--paper); border: 1px solid rgba(20,22,42,.1); border-radius: 14px; padding: 22px 20px;
	box-shadow: 0 8px 24px rgba(20,22,42,.06);
}
.v2-class-tag { display: inline-block; background: var(--brand-red); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; }
.v2-class-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.v2-class-card p { margin: 0 0 14px; font-size: 0.92rem; color: var(--ink-soft); }
.v2-class-card a { color: var(--red); font-weight: 700; text-decoration: none; }
.v2-class-card a:hover { text-decoration: underline; }
.v2-classes-arrow {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--red);
	background: transparent; color: var(--red); font-size: 1.3rem; cursor: pointer;
}
.v2-classes-arrow:hover { background: var(--brand-red); color: #fff; }
.v2-classes-dots { position: absolute; left: 50px; right: 50px; bottom: -22px; display: flex; justify-content: center; gap: 8px; }
@media (max-width: 860px) {
	.v2-classes-grid { grid-template-columns: 1fr; }
	.v2-classes-intro, .v2-classes-carousel { grid-column: 1; }
	.v2-classes-carousel { grid-row: 2; }
}

/* ===== Feature sections ===== */
.v2-feature { padding: 70px 24px; }
.v2-feature--light { background: var(--paper); }
.v2-feature--dark { background: var(--hero-1); color: var(--band-text); }
.v2-feature--accent { background: linear-gradient(135deg, rgba(198,35,48,.06), rgba(43,58,140,.06)); }
.v2-feature-grid { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 56px; align-items: center; }
.v2-feature--reverse .v2-feature-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); }
.v2-feature-grid > .v2-feature-visual { grid-column: 1; grid-row: 1; }
.v2-feature-grid > .v2-feature-copy { grid-column: 2; grid-row: 1; }
.v2-feature--reverse .v2-feature-grid > .v2-feature-copy { grid-column: 1; }
.v2-feature--reverse .v2-feature-grid > .v2-feature-visual { grid-column: 2; }
.v2-feature-visual { aspect-ratio: 4/3; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); }
.v2-feature--dark .v2-feature-visual { background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%); }
.v2-feature--accent .v2-feature-visual { background: linear-gradient(135deg, var(--red-deep) 0%, var(--blue-deep) 100%); }
.v2-feature-icon { width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #fff; }
.v2-feature-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.v2-feature-visual img.v2-feature-visual-contain { object-fit: contain; padding: 24px; box-sizing: border-box; background: var(--paper); }
/* Bild-Kachel: das Papier liegt am <img>; der Verlauf des Rahmens darf nicht darunter durchscheinen,
   sonst bleibt an den abgerundeten Ecken ein Rand sichtbar. */
.v2-feature-visual:has(> .v2-feature-visual-contain) { background: none; }
.theorie-plan-relocation-notice { background: rgba(43,58,140,0.08); border: 1px solid var(--blue); border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; color: var(--ink); font-size: 0.98rem; }
.theorie-plan-relocation-notice a { color: var(--blue); font-weight: 700; }
.v2-feature-copy h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin: 8px 0 16px; }
.v2-feature--dark .v2-feature-copy h2 { color: #fff; }
.v2-feature-copy p { max-width: 50ch; margin: 0 0 24px; font-size: 1.02rem; }
.v2-feature--light .v2-feature-copy p, .v2-feature--accent .v2-feature-copy p { color: var(--ink-soft); }
.v2-feature--dark .v2-feature-copy p { color: var(--band-text-soft); }
/* Rot auf Navy ist als kleine Schrift zu kontrastarm (ca. 2,6:1), hier das hellere Akzent-Rot. */
.v2-feature--dark .v2-eyebrow { color: var(--accent-on-band); }
@media (max-width: 860px) {
	.v2-feature { padding: 48px 24px; }
	.v2-feature-grid, .v2-feature--reverse .v2-feature-grid { grid-template-columns: 1fr; gap: 28px; }
	/* Die festen grid-column-Zuweisungen oben erzwingen sonst auch hier eine
	   zweite, implizite Spalte (gleiche Spezifitaet, darum alle vier Selektoren). */
	.v2-feature-grid > .v2-feature-visual,
	.v2-feature-grid > .v2-feature-copy,
	.v2-feature--reverse .v2-feature-grid > .v2-feature-visual,
	.v2-feature--reverse .v2-feature-grid > .v2-feature-copy { grid-column: 1; grid-row: auto; }
	.v2-feature-visual { order: -1; max-width: 280px; margin: 0 auto; }
}

/* ===== Standorte band + mini map (site-wide, in layout.php) ===== */
.standorte-band { background: var(--hero-1); padding: 58px 24px; }
.standorte-band h2 { max-width: 1140px; margin: 0 auto 28px; font-size: 1.3rem; color: var(--accent-on-band); }
.standorte-band-layout { max-width: 1140px; margin: 0 auto; display: flex; align-items: stretch; gap: 24px; }
.standorte-band-grid { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.standorte-band-card {
	flex: 1 1 210px; display: flex; flex-direction: column; gap: 6px; padding: 18px;
	background: var(--band-card); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
	transition: transform .3s ease, background-color .3s ease;
}
.standorte-band-card:hover { transform: translateY(-6px); background: var(--band-card-hover); }
.standorte-band-card i.fa { color: var(--accent-on-band); font-size: 1.6rem; margin-bottom: 4px; }
.standorte-band-card strong { font-family: var(--font-display); font-size: 1.02rem; color: #fff; }
.standorte-band-card address { font-style: normal; color: var(--band-text-strong); margin: 0; line-height: 1.6; }
.standorte-hours { margin-top: 4px; }
.standorte-hours-label { display: block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--band-faint); margin-bottom: 4px; }
.standorte-hours-list { list-style: none; margin: 0; padding: 0; font-size: .85rem; line-height: 1.5; color: var(--band-text-strong); }
.standorte-hours-list li { display: flex; justify-content: space-between; gap: 10px; }
.standorte-hours-list li span:last-child { font-weight: 700; white-space: nowrap; }

.standorte-band-card address a { color: var(--accent-on-band); font-weight: 700; }
.mini-map { flex: 0 0 300px; width: 300px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(20,22,42,.1); isolation: isolate; }
.mini-map .leaflet-control-attribution { background: rgba(255,255,255,.75); font-size: 9px; padding: 0 4px; line-height: 1.6; }
.mini-map .leaflet-attribution-flag { display: none !important; }
@media (max-width: 860px) {
	.standorte-band-layout { flex-direction: column; }
	.mini-map { width: 100%; flex: none; height: 220px; }
}

/* Seitentitel (nur die h1): kein eigenes Band mehr, sondern erstes Element im Inhaltsbereich
   (.page bzw. erste Sektion der Inhaltsseiten), mit demselben .page-inner-Rand wie der Rest. */
.page-title { margin-bottom: 28px; }
.page-title h1 { margin: 0; }
.standorte-intro { max-width: 70ch; margin: 0 0 24px; }

/* Seitenrand kommt allein von .page-inner (24px), sonst haetten Inhalte auf dem
   Handy 48px Rand und fluchteten nicht mit dem Seitentitel. */
.page { padding: 40px 0 72px; }

.standorte-map {
	width: 100%;
	height: 420px;
	border-radius: 12px;
	margin-bottom: 32px;
	background: var(--surface);
	border: 1px solid var(--line);
	isolation: isolate;
}

.standorte-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}
.standort-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 20px;
}
.standort-card h3 { font-size: 1.05rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.standort-card p { margin: 4px 0; font-size: 0.95rem; }
.standort-card .muted { color: var(--ink-soft); font-style: italic; }
.standort-hours { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.standort-hours-label { display: block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.standort-hours-list { list-style: none; margin: 0; padding: 0; font-size: .9rem; line-height: 1.6; }
.standort-hours-list li { display: flex; justify-content: space-between; gap: 10px; }
.standort-hours-list li span:last-child { font-weight: 700; white-space: nowrap; }

.site-footer {
	border-top: 4px solid var(--red);
	background: var(--footer-bg);
	padding: 56px 24px 28px;
	color: #ECEEF5;
	font-size: 0.95rem;
}
.site-footer-inner {
	max-width: 1120px; margin: 0 auto;
	display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px;
}
.site-footer-col h3 {
	font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.05rem; margin: 0 0 14px;
}
.site-footer-tagline { color: var(--accent-on-band); font-weight: 700; margin: 0 0 14px; }
.site-footer-col p { color: #C7CBE0; line-height: 1.6; margin: 0 0 12px; }
.site-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer-col a { color: #C7CBE0; text-decoration: none; }
.site-footer-col a:hover { color: #fff; text-decoration: underline; }
.site-footer-bottom {
	max-width: 1120px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 0.85rem; color: var(--footer-muted);
}
/* Rechtliches (Impressum, Datenschutz, AGB) nur hier im Footer, nicht in der Hauptnav */
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-legal a { color: var(--footer-muted); font-weight: 700; text-decoration: none; }
.footer-legal a:hover, .footer-legal a[aria-current="page"] { color: #fff; text-decoration: underline; }

@media (max-width: 760px) {
	.site-footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 600px) {
	.standorte-map { height: 300px; }
}

/* ===== Theorie-Plan (added this session - see tools/theorie-plan-generate.php) ===== */
.theorie-plan-locations { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.theorie-plan-locations a {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 700;
	text-decoration: none;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 14px 18px;
}
.theorie-plan-locations a:hover { border-color: var(--blue); color: var(--blue); }

.theorie-plan-month {
	font-size: 1.1rem;
	margin: 32px 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--blue);
	display: inline-block;
}
.theorie-plan-table-wrap { overflow-x: auto; margin-bottom: 12px; }
.theorie-plan-table { width: 100%; border-collapse: collapse; }
.theorie-plan-table th, .theorie-plan-table td {
	border: 1px solid var(--line);
	padding: 10px 12px;
	text-align: left;
	font-size: 0.95rem;
	vertical-align: top;
}
.theorie-plan-table th {
	background: var(--surface-blue);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
}
.theorie-plan-table tbody tr:nth-child(even) td { background: rgba(43, 58, 140, 0.04); }
.theorie-plan-table tr.is-off td {
	background: rgba(198, 35, 48, 0.08);
	color: var(--ink-soft);
	font-style: italic;
}
.theorie-plan-table tr.is-today td {
	background: rgba(43, 58, 140, 0.12);
	box-shadow: inset 3px 0 0 var(--blue);
	font-weight: 700;
}
.theorie-plan-table tr.is-today.is-off td {
	background: rgba(198, 35, 48, 0.08);
	box-shadow: inset 3px 0 0 var(--red);
	font-weight: 700;
}

/* ===== Kontakt (v3, /kontakt/) - spiegelt die .v2-kontakt-* Klassen der
   WordPress-Version (bleifuss-drive/style.css), ohne die wpcf7-Selektoren ===== */
.v2-kontakt-page {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 48px;
	align-items: start;
}
.v2-kontakt-page > .v2-kontakt-form-wrap { grid-column: 1; grid-row: 1; }
.v2-kontakt-page > .v2-kontakt-intro { grid-column: 2; grid-row: 1; }
@media (max-width: 860px) {
	.v2-kontakt-page { grid-template-columns: 1fr; gap: 28px; }
	.v2-kontakt-page > .v2-kontakt-form-wrap,
	.v2-kontakt-page > .v2-kontakt-intro { grid-column: 1; grid-row: auto; }
}
.v2-kontakt-form-title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.v2-kontakt-form-title .fa { color: var(--red); }

.v2-kontakt-intro {
	background: linear-gradient(135deg, rgba(198,35,48,.06), rgba(43,58,140,.06));
	border-left: 4px solid var(--red);
	border-radius: 14px;
	padding: 26px 26px 22px;
	font-size: 1.05rem;
}
.v2-kontakt-intro p { margin: 10px 0 18px; color: var(--ink-soft); }
.v2-kontakt-intro a { font-weight: 700; }
.v2-kontakt-direct { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v2-kontakt-direct li { display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; }
.v2-kontakt-direct .fa {
	flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--brand-red); color: #fff; font-size: 1rem;
}

.v2-notice {
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--blue);
	padding: 14px 18px;
	border-radius: 2px;
	margin: 0 0 24px;
	font-size: 0.95rem;
}
.v2-form-success { border-left-color: var(--blue); }
.v2-form-error { border-left-color: var(--red); color: var(--ink); }
.v2-form-error:focus { outline: 2px solid var(--red); outline-offset: 2px; }

.v2-kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px) {
	.v2-kontakt-grid { grid-template-columns: 1fr; }
}
.v2-kontakt-field { margin: 0 0 14px; }
.v2-kontakt-form label { display: block; margin-bottom: 4px; font-size: 0.92rem; color: var(--ink-soft); }
.v2-kontakt-form input[type="text"],
.v2-kontakt-form input[type="email"],
.v2-kontakt-form input[type="tel"],
.v2-kontakt-form select,
.v2-kontakt-form textarea {
	display: block;
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 11px 13px;
	margin: 0;
}
.v2-kontakt-form textarea { min-height: 140px; resize: vertical; }
.v2-kontakt-form input:focus,
.v2-kontakt-form select:focus,
.v2-kontakt-form textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.v2-kontakt-form input[aria-invalid="true"],
.v2-kontakt-form select[aria-invalid="true"],
.v2-kontakt-form textarea[aria-invalid="true"] { border-color: var(--red); }
.v2-kontakt-field-error { display: block; color: var(--red); font-size: 0.85rem; margin-top: 4px; }

.v2-kontakt-privacy { margin-top: 18px; font-size: 0.88rem; color: var(--ink-soft); }
.v2-kontakt-form .v2-kontakt-privacy label { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); font-weight: 700; font-size: 0.95rem; }
.v2-kontakt-privacy input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--red); }
.v2-kontakt-privacy-text { display: block; margin: 6px 0 0 26px; }

.v2-kontakt-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; }
.v2-kontakt-form .v2-kontakt-captcha label { margin: 0; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.v2-kontakt-form .v2-kontakt-captcha input { width: 90px; }
.v2-kontakt-captcha .v2-kontakt-field-error { flex-basis: 100%; margin-top: 0; }

.v2-kontakt-submit { margin: 8px 0 6px; }
.v2-kontakt-form button.v2-cta { cursor: pointer; }
.v2-kontakt-hint { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }

/* ===== Fuehrerscheinklassen (app/views/fuehrerscheinklassen.php) =====
   .v2-classlist* uebernommen aus dem v2-Theme (bleifuss-drive/style.css),
   ohne die :root:not([data-theme="light"]) Dark-Mode-Regeln, weil v3 keinen
   Theme-Toggle hat (die Regeln wuerden sonst immer greifen). */
.v3-klassen-intro { max-width: 760px; margin: 0 0 26px; }
.v3-klassen-intro h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin: 10px 0 16px; }
.v3-klassen-intro p { color: var(--ink-soft); max-width: 60ch; margin: 0; font-size: 1.05rem; }

.v3-klassen-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.v3-klassen-chip {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
	border: 2px solid var(--blue); border-radius: 999px;
	font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
	color: var(--blue); text-decoration: none; background: var(--paper);
	transition: background-color .2s ease, color .2s ease;
}
.v3-klassen-chip:hover, .v3-klassen-chip:focus-visible { background: var(--brand-blue); color: #fff; }
.v3-klassen-chip.is-bike { border-color: var(--red); color: var(--red); }
.v3-klassen-chip.is-bike:hover, .v3-klassen-chip.is-bike:focus-visible { background: var(--red); color: #fff; }

/* Flex statt Grid: 10 Karten in 3 Spalten lassen eine einzelne Karte in der
   letzten Reihe uebrig, justify-content:center setzt sie mittig statt links. */
.v2-classlist {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin: 36px 0 0;
}
.v2-classlist-card {
	flex: 0 1 100%; min-width: 0;
	display: flex; flex-direction: column;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--paper);
	box-shadow: 0 2px 10px rgba(20, 22, 42, 0.08);
	scroll-margin-top: 24px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.v2-classlist-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(20, 22, 42, 0.12); }
.v2-classlist-card:target { outline: 3px solid var(--red); outline-offset: 3px; }
.v2-classlist-media {
	position: relative;
	height: 132px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-deep) 100%);
	color: rgba(255, 255, 255, 0.85);
}
.v2-classlist-card.is-bike .v2-classlist-media { background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-deep) 100%); }
/* Weisser Kreis hinter dem Emoji: das rote Motorrad-Emoji verschwimmt sonst
   auf dem roten Verlauf der Zweirad-Karten. */
.v2-classlist-emoji {
	display: flex; align-items: center; justify-content: center;
	width: 84px; height: 84px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 6px 18px rgba(20, 22, 42, 0.25);
	font-size: 3rem; line-height: 1;
}
.v2-classlist-tag {
	position: absolute; top: 12px; left: 12px;
	background: rgba(255, 255, 255, 0.16); color: #fff;
	font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em;
	padding: 3px 10px; border-radius: 999px;
}
.v2-classlist-body { padding: 20px 22px 24px; flex: 1 1 auto; }
.v2-classlist-card h3 { margin: 0 0 10px; font-size: 1.2rem; }
.v2-classlist-body > p { color: var(--ink-soft); margin: 0 0 14px; }
.v2-classlist-facts { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; }
.v2-classlist-facts li { padding: 6px 0; border-top: 1px solid var(--line); }
.v2-classlist-facts li:first-child { border-top: none; }
.v2-classlist-facts strong { color: var(--red); font-weight: 700; }

.v2-classlist-card { cursor: pointer; }
.v2-classlist-trigger {
	background: none; border: none; padding: 0; margin: 0; cursor: pointer;
	font: inherit; font-family: var(--font-display); font-weight: 700; color: var(--ink);
	display: inline-flex; align-items: center; gap: 6px; text-align: left;
}
.v2-classlist-chevron { font-size: 0.8em; transition: transform .2s ease; }
.v2-classlist-card.is-active { box-shadow: 0 0 0 3px var(--blue); }
.v2-classlist-card.is-bike.is-active { box-shadow: 0 0 0 3px var(--red); }
.v2-classlist-card.is-active .v2-classlist-chevron { transform: rotate(180deg); }

.v2-classlist-panel {
	flex: 1 0 100%;
	position: relative;
	margin: 28px 0 0;
	padding: 28px 56px 32px 28px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper);
	box-shadow: 0 10px 30px rgba(20, 22, 42, 0.1);
	scroll-margin-top: 24px;
}
.v2-classlist-panel h3 { margin: 0 0 16px; font-size: 1.4rem; text-align: center; }
.v2-classlist-panel-row { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.v2-classlist-panel-media { flex: 1 1 260px; max-width: 320px; }
.v2-classlist-panel-media img { width: 100%; border-radius: 12px; display: block; }
.v2-classlist-panel-media-caption { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--ink-soft); text-align: center; }
.v2-classlist-panel-row p { flex: 2 1 320px; margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; }
.v2-classlist-panel-close {
	position: absolute; top: 16px; right: 16px;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
	font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.v2-classlist-panel-close:hover { background: var(--line); color: var(--ink); }
@media (max-width: 640px) {
	.v2-classlist-panel { padding: 24px 20px 28px; }
}

.v3-klassen-cta-inner { max-width: 1120px; }
.v3-klassen-cta .v2-feature-copy h2 { margin-top: 8px; }
@media (min-width: 640px) {
	.v2-classlist-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (min-width: 960px) {
	.v2-classlist-card { flex-basis: calc((100% - 48px) / 3); }
}
@media (max-width: 600px) {
	.v3-klassen-chip { min-height: 36px; padding: 0 14px; font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
	.v2-classlist-card, .v2-classlist-card:hover { transition: none; transform: none; }
	.v2-classlist-chevron { transition: none; }
}

/* ===== Inhaltsseiten: Aufbauseminar / Simulator / Umschreibung =====
   Volle Seiten aus den .v2-feature-Sektionen der Startseite, plus
   Checkliste, Info-Karten und Kontakt-CTA-Band am Seitenende. */
.v3-content-page .v2-feature-copy p { margin-bottom: 16px; }
.v3-content-page .v2-feature-copy p:last-child { margin-bottom: 0; }


.v3-checklist { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; max-width: 56ch; }
.v3-checklist:last-child { margin-bottom: 0; }
.v3-checklist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.v3-checklist li > .fa { color: var(--red); margin-top: 0.3em; }
.v2-feature--light .v3-checklist, .v2-feature--accent .v3-checklist { color: var(--ink-soft); }
.v2-feature--dark .v3-checklist { color: var(--band-text); }
.v2-feature--dark .v3-checklist li > .fa { color: var(--accent-on-band); }

.v3-section-head { margin-bottom: 28px; }
.v3-section-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin: 8px 0 0; }

.v3-info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.v3-info-card {
	background: var(--paper); border: 1px solid rgba(20,22,42,.1); border-top: 4px solid var(--red);
	border-radius: 14px; padding: 26px 24px; box-shadow: 0 8px 24px rgba(20,22,42,.06);
}
.v3-info-card h3 { font-size: 1.25rem; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.v3-info-card h3 .fa { color: var(--blue); }
.v3-info-card p { color: var(--ink-soft); margin: 0 0 12px; }
.v3-info-card .v3-info-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.v3-info-card .v3-info-note .fa { color: var(--red); margin-right: 6px; }

.v3-cta-band { background: linear-gradient(120deg, var(--brand-red-deep) 0%, var(--brand-red) 100%); color: #fff; padding: 56px 24px; }
.v3-cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px 40px; flex-wrap: wrap; }
.v3-cta-band-copy { flex: 1 1 360px; min-width: 0; }
.v3-cta-band .v2-eyebrow { color: rgba(255,255,255,.85); }
.v3-cta-band h2 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 6px 0 10px; }
.v3-cta-band p { margin: 0; max-width: 52ch; color: rgba(255,255,255,.92); }
.v3-cta-band .v2-cta { box-shadow: none; }
.v3-cta-band .v2-cta--dark { color: #fff; }
.v3-cta-band .v2-cta--dark:hover { background: var(--brand-blue-deep); }
.v3-cta-band .v2-cta--ghost { background: transparent; color: #fff; }
.v3-cta-band .v2-cta--ghost:hover { background: rgba(255,255,255,.14); }

@media (max-width: 860px) {
	.v3-content-page .v2-feature-visual { max-width: 200px; }
	.v3-content-page .v2-feature-icon { width: 96px; height: 96px; font-size: 2.4rem; }
}

/* Titel steht in der ersten Sektion: gleicher Abstand nach oben wie auf den .page-Seiten (40px) und kein doppelter
   Seitenrand (.page-inner liefert die 24px), sonst steht der Titel zwischen 861 und ca. 1167px 24px weiter innen. */
.v3-content-page > .v2-feature:first-child { padding-top: 40px; }
.v3-content-page .v2-feature { padding-left: 0; padding-right: 0; }

/* Fotos statt Icon-Kachel: das ganze Bild im eigenen Seitenverhaeltnis, nichts wird beschnitten.
   Auf dem Handy in voller Breite statt als 200-px-Kachel. */
.v3-content-page .v2-feature-visual--photo { aspect-ratio: auto; background: none; justify-self: center; width: 100%; max-width: 440px; }
.v3-content-page .v2-feature-visual--photo img { height: auto; }
@media (max-width: 860px) {
	.v3-content-page .v2-feature-visual--photo { max-width: min(100%, 420px); }
}
/* Logo-Kachel (320 px Quelle): nicht groesser ziehen als das Bild breit ist. */
.v3-content-page .v2-feature-visual--logo { max-width: 320px; }

/* ===== Team (app/views/team.php) ===== */
.team-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 24px;
}
.team-card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid rgba(20,22,42,.1);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(20,22,42,.06);
}
.team-card-photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 30%;
	border-bottom: 4px solid var(--red);
	background: var(--line);
}
.team-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 22px; }
.team-card-body .v2-eyebrow { font-size: 0.78rem; }
.team-card h3 { font-size: 1.45rem; margin: 0; overflow-wrap: anywhere; }
.team-card-langs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.team-card-langs li {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--blue);
	border: 1.5px solid var(--blue);
	border-radius: 999px;
	padding: 2px 10px;
}
.team-card--hiring { background: var(--hero-1); border-color: var(--hero-1); color: var(--band-text); }
.team-card--hiring h3 { color: #fff; }
.team-card--hiring .v2-eyebrow { color: var(--accent-on-band); }
.team-card-cta { margin-top: auto; padding-top: 18px; }

/* Team in Reihen (Fahrlehrer, Buero Krefeld, Buero Duisburg) */
.team-group + .team-group { margin-top: 48px; }
.team-group-title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 0 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--line); }

/* ===== Rechtliche Seiten: Impressum, Datenschutz, AGB (app/views/impressum|datenschutz|agb.php) ===== */
.page--legal { padding-top: 40px; }
.legal {
	max-width: 76ch;
	overflow-wrap: break-word;
}
.legal > :first-child { margin-top: 0; }
.legal p { margin: 0 0 1em; }
.legal a { overflow-wrap: anywhere; }
.legal h2 {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	color: var(--blue-deep);
	margin: 2.2em 0 0.6em;
	padding-bottom: 0.35em;
	border-bottom: 2px solid var(--line);
}
.legal h3 {
	font-size: clamp(1.12rem, 1.9vw, 1.3rem);
	color: var(--ink);
	margin: 1.8em 0 0.5em;
}
.legal h4 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.25;
	color: var(--blue);
	margin: 1.6em 0 0.4em;
}
.legal-lead { font-weight: 700; }
.legal-address {
	max-width: 34rem;
	padding: 14px 18px;
	border-left: 4px solid var(--red);
	border-radius: 0 8px 8px 0;
	background: rgba(43, 58, 140, 0.04);
}
.legal-sub { margin: 1.4em 0 0.4em; }
.legal-list { margin: 0 0 1em; padding-left: 1.3em; }
.legal-list li { margin: 0.3em 0; }
.legal-list li::marker { color: var(--red); }
/* "a) ... e)" bleibt Teil des Textes (woertlich), daher eigene haengende Einrueckung statt <ol type="a"> */
.legal-list--lettered { list-style: none; padding-left: 2.6em; }
.legal-list--lettered li { text-indent: -1.25em; }
.page-title--legal h1 { overflow-wrap: break-word; }
@media (max-width: 600px) {
	/* nur den 24px-Rand von .page-inner behalten: buendig mit dem Seitentitel, mehr Platz fuer Fliesstext */
	.page--legal { padding: 40px 0 56px; }
	.legal { hyphens: auto; }
}

/* ===== Dark-Mode-Feinschliff =====
   Die meisten Komponenten drehen sich automatisch mit, weil sie nur var(--...)
   nutzen. Diese hier haben zusaetzlich fest codierte rgba(20,22,42,X)-Werte
   ("Tinte, halbtransparent") fuer Rahmen/Schatten auf hellem Papier - auf
   dunklem Papier waeren die praktisch unsichtbar. Bewusst NICHT das v2-Muster
   ":root:not([data-theme=\"light\"])" uebernommen: dort entfernt der helle
   Zustand das Attribut komplett (statt data-theme=\"light\" zu setzen), darum
   greift :not([data-theme=\"light\"]) dort auch im HELLEN Modus - ein echter,
   bislang unbehobener Bug in v2 (4 Komponenten verlieren dort ihre helle
   Umrandung). Hier stattdessen der korrekte, eindeutige Gate-Selektor. */
:root[data-theme="dark"] .v2-class-card,
:root[data-theme="dark"] .v2-classlist-card,
:root[data-theme="dark"] .v3-info-card,
:root[data-theme="dark"] .team-card {
	border-color: rgba(255,255,255,.12);
	box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .v2-classlist-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.45); }
:root[data-theme="dark"] .v2-classlist-panel { box-shadow: 0 10px 30px rgba(0,0,0,.4); }
:root[data-theme="dark"] .theorie-plan-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .standort-card,
:root[data-theme="dark"] .theorie-plan-locations a { box-shadow: none; }

/* ===== Mobile-Audit-Fixes (Startseite priorisiert, geteiltes Layout wirkt ueberall) ===== */

/* Doppelter Seitenrand: .page-inner UND die Section hatten beide 24px
   Padding, Inhalte hatten dadurch effektiv nur noch ~279px auf 375px Breite
   (statt 327px) - verschaerfte u. a. das Karussell-Clipping unten. */
@media (max-width: 860px) {
	.v2-road-strip, .v2-classes, .v2-feature, .standorte-band {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Klassen-Karussell: Karten waren auf Mobil 280px breit in einem durch
   Pfeile + Gaps auf ~179px gequetschten Track - der Text brach mitten im
   Wort ab. Pfeile unter 560px ausblenden, Karte auf Spaltenbreite ziehen. */
@media (max-width: 560px) {
	.v2-classes-arrow { display: none; }
	.v2-classes-carousel { gap: 0; }
	.v2-class-card { width: calc(100% - 28px); }
	/* Ohne Pfeile wird der 50px-Platz dafuer nicht mehr gebraucht. */
	.v2-classes-dots { left: 8px; right: 8px; }
}

/* Karussell-Punkte: 8x8px sichtbar bleibt, aber 32px Tippflaeche (WCAG). */
.v2-classes-dots { gap: 0; }
.v2-classes-dots button {
	width: 32px; height: 32px; background: none; position: relative;
	border: none; padding: 0; cursor: pointer;
}
.v2-classes-dots button::after {
	content: ""; position: absolute; inset: 12px; border-radius: 50%;
	background: rgba(20,22,42,.2);
}
:root[data-theme="dark"] .v2-classes-dots button::after { background: rgba(255,255,255,.2); }
.v2-classes-dots button.is-active::after { background: var(--red); }
/* Fix: die Dark-Mode-Regel oben hat durch [data-theme="dark"] hoehere
   Spezifitaet als .is-active allein und ueberschrieb die rote Markierung
   im Dark Mode wieder auf Grau - deshalb hier explizit mit derselben
   Attribut-Selektor-Spezifitaet erneut gesetzt. */
:root[data-theme="dark"] .v2-classes-dots button.is-active::after { background: var(--red); }
/* 32px-Tippflaeche pro Punkt (8 Stueck) passt bei schmalen Handy-Breiten
   nicht nebeneinander in den durch left/right 8px freigegebenen Platz -
   die sichtbaren Punkte wurden dann auf 1-4px zusammengequetscht statt
   8px. Nur die Tippflaeche verkleinern, der sichtbare Punkt bleibt 8px
   (20px Box - 2x6px Inset). Muss NACH der obigen 32px-Regel stehen,
   gleiche Spezifitaet, sonst gewinnt die 32px-Regel per Reihenfolge. */
@media (max-width: 560px) {
	.v2-classes-dots button { width: 20px; height: 20px; }
	.v2-classes-dots button::after { inset: 6px; }
}

/* Weg-Grafik unter dem Hero: die Desktop-SVG (viewBox 1000x240) wird auf
   Handy/Tablet so klein skaliert, dass die Etappen-Beschriftungen (4-10px)
   unlesbar werden. Unter 640px stattdessen eine einfache HTML-Schrittliste. */
.v2-road-strip .v3-road-steps { display: none; }
@media (max-width: 640px) {
	.v2-road-strip svg.v2-road { display: none; }
	.v2-road-strip .v3-road-steps {
		display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px;
		list-style: none; margin: 0; padding: 0;
	}
	.v2-road-strip .v3-road-steps li {
		display: flex; align-items: center; gap: 8px;
		font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
		color: var(--ink-soft);
	}
	.v2-road-strip .v3-road-steps li.is-current,
	.v2-road-strip .v3-road-steps li.is-destination { color: var(--red); }
	.v2-road-strip .v3-road-steps li i.fa { font-size: 0.7rem; }
}

/* Feature-Kacheln (Aufbauseminar/Simulator/Umschreibung-Teaser): hatten auf
   Mobil keine reservierte Breite, bevor das Bild lazy-geladen war (0x0px),
   das Nachladen verschob dann den ganzen Rest der Seite (~370px CLS). Die
   Icon-only-Kachel (Umschreibung) blieb dazu dauerhaft viel kleiner als die
   beiden Bild-Kacheln. aspect-ratio:4/3 (oben schon gesetzt) reserviert die
   Hoehe jetzt zuverlaessig, sobald die Breite 100% hat. */
@media (max-width: 860px) {
	.v2-feature-visual { width: 100%; max-width: none; }
}

/* Header ist jetzt auf allen Breiten sticky (siehe .site-header oben) - auf
   langen Seiten war das Menue sonst nur ganz oben erreichbar. Die
   Prototyp-Hinweisleiste bleibt bewusst aussen vor (darf mitscrollen), nur
   der eigentliche Header bleibt stehen. scroll-padding-top sorgt dafuer,
   dass Ankerspruenge (z. B. #klasse-b) nicht unter dem Header landen. */
html { scroll-padding-top: 94px; }

/* Tippflaechen in Hauptnav und Dropdown-Panel naeher an 44px, nicht nur am
   reinen Textkasten. */
@media (max-width: 990px) {
	.site-header nav > a, .nav-dropdown-toggle { padding: 8px 16px; min-height: 44px; }
	.site-header nav .nav-dropdown-panel a { padding: 10px 16px; min-height: 44px; }
	.hamburger { width: 44px; height: 44px; }
}
.v2-hero-social a { width: 44px; height: 44px; }
.v2-classes-arrow { width: 44px; height: 44px; }

/* Footer- und Rechtlich-Links: reine Inline-Textlinks waren auf Mobil kaum
   gezielt antippbar. */
@media (max-width: 760px) {
	.site-footer-col a { display: inline-block; padding: 10px 0; min-height: 44px; }
	.footer-legal { gap: 10px 16px; }
	.footer-legal a, .bl-cc-reopen { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Hero-Ueberschrift: der einwechselnde Rotator-Text glitt beim Crossfade
   kurz unter/hinter die CTA-Buttons darunter, weil overflow auf dem H1
   sichtbar war. */
.v2-hero h1 { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.v2-hero-rotator { transition: none; }
}

/* Leaflet-Karten (Standorte-Uebersicht + die kleine Karte im Footer-Band):
   ein-Finger-Wischen verschob bisher die Karte statt die Seite zu scrollen -
   siehe main.js (dragging per JS deaktiviert, hier nur die Sicherheitsnetz-
   Eigenschaft fuer den Fall, dass Leaflet touch-action selbst nicht loescht). */
@media (max-width: 920px) {
	#standorte-map, .mini-map { touch-action: pan-y; }
}

/* Maxi-Chat-Widget (externes Skript, api.fahrschulmanager.de): die
   "Jetzt anmelden!"-Sprechblase blieb dauerhaft sichtbar und ueberdeckte auf
   Mobil Fliesstext/Adressen; ausserdem lag das Widget ueber dem geoeffneten
   Mobilmenue. Unter 720px die Blase ausblenden und den Avatar verkleinern,
   und waehrend das Menue offen ist (body.v3-nav-open, siehe main.js) das
   ganze Widget kurz ausblenden. */
@media (max-width: 720px) {
	.maxi-message { display: none !important; }
	.maxi-button-bottom-right { right: 12px !important; bottom: 12px !important; }
	.maxi-portrait, .maxi-button img { width: 48px !important; height: 48px !important; }
}
body.v3-nav-open .maxi-button { display: none !important; }