/* =============================================================================
 * Freiwillige Feuerwehr Unterensingen
 * Design-Tokens fuer Hell und Dunkel
 * -----------------------------------------------------------------------------
 * Diese Datei MUSS als ERSTE aller eigenen CSS-Dateien geladen werden.
 * Sie definiert Variablen und die Grundlage fuer html/body.
 *
 * Reihenfolge im Seitenlayout (Externe Stylesheets):
 *     1. 00-design-tokens.css   <- diese Datei
 *     2. global.css
 *     3. news.css
 *     4. news_preview.css
 *     5. technik.css
 *
 * Wie es funktioniert:
 *   - :root enthaelt die HELLEN Werte als Standard.
 *   - @media (prefers-color-scheme: dark) ueberschreibt sie, wenn das
 *     Betriebssystem bzw. der Browser auf Dunkel steht.
 *   - [data-theme="dark"] / [data-theme="light"] erlauben einen
 *     Umschalter auf der Seite, der die Browsereinstellung uebersteuert.
 *
 * Stand: Die Dateien news.css, news_preview.css und technik.css sind
 * vollstaendig auf diese Variablen umgestellt. Dort stehen keine festen
 * Farbwerte mehr. Alle Farbaenderungen laufen ab jetzt ueber diese Datei.
 * =========================================================================== */


/* =============================================================================
 * HELL  (Standard)
 * =========================================================================== */
:root{
	color-scheme: light dark;      /* Scrollbalken und Formulare passen sich an */

	/* --- Marke --- */
	--brand:            #e32024;   /* Feuerwehrrot aus dem Logo */
	--brand-dark:       #b8181c;
	--brand-soft:       rgba(227,32,36,.10);

	/* --- Akzent (Datums-Pills, Trennlinien in Artikeln) --- */
	--accent:           #b45309;   /* dunkler als das dunkle Orange - weisse Schrift 5.0:1 */
	--accent-ink:       #ffffff;   /* Textfarbe AUF dem Akzent */
	--accent-line:      rgba(180,83,9,.35);

	/* --- Links --- */
	--link:             #c2410c;
	--link-hover:       #9a3412;

	/* --- Flaechen --- */
	--bg:               #ffffff;
	--bg-gradient:      radial-gradient(circle at top, #ffffff 0, #f4f6fb 60%);
	--surface:          #ffffff;   /* Karten, Artikelflaeche */
	--surface-2:        #f6f7fb;   /* leicht abgesetzte Flaechen, News-Karten */
	--bg-elevated-soft: #f6f7fb;   /* Name aus der fruehereren Datei */
	--media-bg:         #eceef4;   /* Flaeche hinter Bildern */
	--overlay-strong:   rgba(0,0,0,.75);   /* Verlauf ueber Bildern */

	/* --- Text --- */
	--text:             #333a4d;
	--text-strong:      #111827;
	--text-muted:       #5b6478;
	--text-on-dark:     #f8fafc;   /* fuer dauerhaft dunkle Flaechen */

	/* --- Linien und Schatten --- */
	--line:             #e4e7ee;
	--line-soft:        rgba(17,24,39,.08);
	--shadow-color:     rgba(17,24,39,.18);
	--shadow-sm:        0 1px 2px rgba(17,24,39,.05), 0 6px 18px rgba(17,24,39,.06);
	--shadow-md:        0 10px 30px rgba(17,24,39,.10);
	--shadow-lg:        0 20px 50px rgba(17,24,39,.14);

	/* --- Status --- */
	--ok:               #0f766e;   /* Haken; auf Weiss 5.5:1 */

	/* --- Kopfzeile und Navigation --- */
	--header-bg:        rgba(255,255,255,.92);
	--header-ink:       #111827;
	--header-line:      #e4e7ee;
	--nav-pill-bg:      #f6f7fb;
	--nav-pill-ink:     #1f2933;
	--nav-pill-line:    #e4e7ee;
	--menu-bg:          rgba(255,255,255,.97);
	--menu-item-bg:     #f6f7fb;
	--menu-item-ink:    #333a4d;
	--menu-item-line:   #d8dce6;

	/* --- Radien --- */
	--radius-sm:        .6rem;
	--radius:           1.1rem;
	--radius-lg:        1.5rem;
}


/* =============================================================================
 * DUNKEL  (automatisch nach Browsereinstellung)
 * Werte entsprechen dem bisherigen dunklen Design.
 * =========================================================================== */
@media (prefers-color-scheme: dark){
	:root{
		--brand-soft:       rgba(227,32,36,.16);

		--accent:           #f97316;
		--accent-ink:       #111827;
		--accent-line:      rgba(249,115,22,.30);

		--link:             #fb7185;
		--link-hover:       #f472b6;

		--bg:               #020617;
		--bg-gradient:      radial-gradient(circle at top, #050816 0, #020617 55%);
		--surface:          rgba(11,18,32,.98);
		--surface-2:        rgba(15,23,42,.96);
		--bg-elevated-soft: #0b1220;
		--media-bg:         #0f172a;
		--overlay-strong:   rgba(0,0,0,.85);

		--text:             #e5e7eb;
		--text-strong:      #f8fafc;
		--text-muted:       #cbd5f5;

		--line:             rgba(255,255,255,.12);
		--line-soft:        rgba(255,255,255,.06);
		--shadow-color:     rgba(15,23,42,.70);
		--shadow-sm:        0 10px 25px rgba(15,23,42,.70);
		--shadow-md:        0 18px 40px rgba(15,23,42,.80);
		--shadow-lg:        0 20px 40px rgba(2,6,23,.60);

		--header-bg:      rgba(15,23,42,.90);
		--header-ink:     #f9fafb;
		--header-line:    rgba(255,255,255,.10);
		--nav-pill-bg:    rgba(255,255,255,.85);
		--nav-pill-ink:   #1f2933;
		--nav-pill-line:  transparent;
		--menu-bg:        rgba(15,23,42,.95);
		--menu-item-bg:   rgba(15,23,42,.80);
		--menu-item-ink:  #e5e7eb;
		--menu-item-line: rgba(148,163,184,.60);

		--ok:               #4fe0c1;
	}
}


/* =============================================================================
 * MANUELLER UMSCHALTER  (optional, uebersteuert den Browser)
 * Wirkt nur, wenn am html-Element data-theme gesetzt ist.
 * =========================================================================== */
[data-theme="dark"]{
	color-scheme: dark;
	--brand-soft:       rgba(227,32,36,.16);
	--accent:           #f97316;
	--accent-ink:       #111827;
	--accent-line:      rgba(249,115,22,.30);
	--link:             #fb7185;
	--link-hover:       #f472b6;
	--bg:               #020617;
	--bg-gradient:      radial-gradient(circle at top, #050816 0, #020617 55%);
	--surface:          rgba(11,18,32,.98);
	--surface-2:        rgba(15,23,42,.96);
	--bg-elevated-soft: #0b1220;
	--media-bg:         #0f172a;
	--overlay-strong:   rgba(0,0,0,.85);
	--text:             #e5e7eb;
	--text-strong:      #f8fafc;
	--text-muted:       #cbd5f5;
	--line:             rgba(255,255,255,.12);
	--line-soft:        rgba(255,255,255,.06);
	--shadow-color:     rgba(15,23,42,.70);
	--shadow-sm:        0 10px 25px rgba(15,23,42,.70);
	--shadow-md:        0 18px 40px rgba(15,23,42,.80);
	--shadow-lg:        0 20px 40px rgba(2,6,23,.60);
	--header-bg:      rgba(15,23,42,.90);
	--header-ink:     #f9fafb;
	--header-line:    rgba(255,255,255,.10);
	--nav-pill-bg:    rgba(255,255,255,.85);
	--nav-pill-ink:   #1f2933;
	--nav-pill-line:  transparent;
	--menu-bg:        rgba(15,23,42,.95);
	--menu-item-bg:   rgba(15,23,42,.80);
	--menu-item-ink:  #e5e7eb;
	--menu-item-line: rgba(148,163,184,.60);
	--ok:               #4fe0c1;
}

[data-theme="light"]{
	color-scheme: light;
	--brand-soft:       rgba(227,32,36,.10);
	--accent:           #b45309;
	--accent-ink:       #ffffff;
	--accent-line:      rgba(180,83,9,.35);
	--link:             #c2410c;
	--link-hover:       #9a3412;
	--bg:               #ffffff;
	--bg-gradient:      radial-gradient(circle at top, #ffffff 0, #f4f6fb 60%);
	--surface:          #ffffff;
	--surface-2:        #f6f7fb;
	--bg-elevated-soft: #f6f7fb;
	--media-bg:         #eceef4;
	--overlay-strong:   rgba(0,0,0,.75);
	--text:             #333a4d;
	--text-strong:      #111827;
	--text-muted:       #5b6478;
	--line:             #e4e7ee;
	--line-soft:        rgba(17,24,39,.08);
	--shadow-color:     rgba(17,24,39,.18);
	--shadow-sm:        0 1px 2px rgba(17,24,39,.05), 0 6px 18px rgba(17,24,39,.06);
	--shadow-md:        0 10px 30px rgba(17,24,39,.10);
	--shadow-lg:        0 20px 50px rgba(17,24,39,.14);
	--header-bg:      rgba(255,255,255,.92);
	--header-ink:     #111827;
	--header-line:    #e4e7ee;
	--nav-pill-bg:    #f6f7fb;
	--nav-pill-ink:   #1f2933;
	--nav-pill-line:  #e4e7ee;
	--menu-bg:        rgba(255,255,255,.97);
	--menu-item-bg:   #f6f7fb;
	--menu-item-ink:  #333a4d;
	--menu-item-line: #d8dce6;
	--ok:               #0f766e;
}


/* =============================================================================
 * GRUNDLAGE
 * =========================================================================== */
html, body{
	height:100%;
	margin:0;
}

body{
	background:var(--bg-gradient);
	background-repeat:no-repeat;
	background-color:var(--bg);      /* Fallback fuer sehr lange Seiten */
	color:var(--text);
	min-height:100vh;
	display:flex;
	flex-direction:column;
}

#wrapper{ flex:1 0 auto; }

h1, h2, h3, h4, h5, h6{ color:var(--text-strong); }
a{ color:var(--link); }
a:hover{ color:var(--link-hover); }

/* Weicher Uebergang beim Umschalten, aber nur wenn erwuenscht */
@media (prefers-reduced-motion: no-preference){
	body{ transition:background-color .25s ease, color .25s ease; }
}


/* =============================================================================
 * WARUM DER HELLMODUS ANDERE AKZENTFARBEN HAT
 * -----------------------------------------------------------------------------
 * Die Farben aus dem dunklen Design sind auf Weiss nicht lesbar. Gemessen
 * als Kontrastverhaeltnis (WCAG AA verlangt 4.5:1 fuer normalen Text):
 *
 *   Orange #f97316 mit weisser Schrift     2.9:1   zu wenig
 *   Orange #d95f0e mit weisser Schrift     3.8:1   zu wenig
 *   Orange #b45309 mit weisser Schrift     5.0:1   erfuellt   <- gewaehlt
 *
 *   Link   #fb7185 auf Weiss               2.4:1   zu wenig
 *   Link   #c2410c auf Weiss               5.2:1   erfuellt   <- gewaehlt
 *
 *   Haken  #4fe0c1 auf Weiss               1.5:1   zu wenig
 *   Haken  #0f766e auf Weiss               5.5:1   erfuellt   <- gewaehlt
 *
 * Im Dunkelmodus bleiben die Originalfarben, dort stimmt der Kontrast:
 * #f97316 mit dunkler Schrift 6.3:1, #fb7185 auf dunklem Grund 7.5:1.
 *
 * Wer im Hellmodus trotzdem die helleren Toene will, aendert --accent,
 * --link und --ok oben im :root-Block. Der Text darauf wird dann aber
 * schwer lesbar, besonders fuer Menschen mit Sehschwaeche.
 * =========================================================================== */
/* =============================================================================
 * global.css
 * -----------------------------------------------------------------------------
 * Grundlagen, Kopfzeile, Navigation, Fusszeile, Startseiten-Hero,
 * Abschnitt "Letzte Einsaetze" und Wetterwarnungen.
 *
 * Hier stehen KEINE festen Farbwerte. Alle Farben kommen aus
 * 00-design-tokens.css und wechseln automatisch zwischen hell und dunkel.
 * Einzige Ausnahme: die drei Warnfarben der NINA-Schweregrade ganz unten,
 * die sollen in beiden Modi gleich aussehen.
 *
 * Reihenfolge im Seitenlayout:
 *     1. 00-design-tokens.css
 *     2. global.css        <- diese Datei
 *     3. news.css
 *     4. news_preview.css
 *     5. technik.css
 *
 * Die separaten Dateien hero.css, einsatz-teaser.css und wetterapp.css
 * werden NICHT mehr gebraucht - ihr Inhalt steht jetzt weiter unten in
 * dieser Datei. Falls sie schon im Seitenlayout eingetragen waren,
 * bitte dort wieder entfernen.
 *
 * WICHTIG: In den Modulen Header, Footer, Hero, Einsatz-Teaser und
 * Wetter-App darf KEIN <style>-Block mehr stehen. Die dortigen Styles
 * sind hierher gewandert. Bleiben sie in den Modulen, gewinnen sie (sie
 * stehen im body, also spaeter) und hebeln den Hellmodus wieder aus.
 * =========================================================================== */


/* =============================================================================
 * Reset
 * -----------------------------------------------------------------------------
 * Stammt aus dem Header-Modul und war dadurch auf allen Seiten aktiv.
 * Bewusst unveraendert uebernommen, damit sich am Layout nichts verschiebt.
 *
 * Achtung fuer spaeter: margin/padding auf 0 fuer ALLE Elemente heisst,
 * dass Absaetze und Ueberschriften ihre Standardabstaende verlieren. Wer
 * das irgendwann aufraeumen will, sollte das in einem eigenen Schritt tun
 * und alle Seiten durchsehen.
 * =========================================================================== */
*{
	box-sizing:border-box;
	margin:0;
	padding:0;
}


/* =============================================================================
 * Basis
 * =========================================================================== */
body{
	font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* =============================================================================
 * Kopfzeile
 * =========================================================================== */
.header-wrapper{
	position:relative;
	z-index:20;
}

header.site-header{
	position:sticky;            /* bleibt beim Scrollen oben */
	top:0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 1.5rem;
	height:70px;
	color:var(--header-ink);
	background:var(--header-bg);
	border-bottom:1px solid var(--header-line);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
}

/* ---- Logo ----
   Zwei Bilder, je Farbschema wird eines ausgeblendet. Das weisse Logo
   waere auf hellem Grund unsichtbar, deshalb braucht es eine dunkle
   Fassung. Siehe Hinweis am Dateiende. */
.logo img{
	display:block;
	height:auto;
	max-height:50px;
	width:auto;
}
/* Wichtig: Die Regel ".logo img" weiter oben hat Spezifitaet 0-1-1
   (eine Klasse plus ein Element). Ein einfaches ".logo__img--on-dark"
   haette nur 0-1-0 und wuerde verlieren - dann blieben beide Logos
   sichtbar. Deshalb hier ebenfalls mit dem img-Element im Selektor,
   das ergibt 0-2-1 und gewinnt zuverlaessig. */
.logo img.logo__img--on-dark{ display:none; }     /* weisses Logo */
.logo img.logo__img--on-light{ display:block; }   /* dunkles Logo */

@media (prefers-color-scheme: dark){
	.logo img.logo__img--on-dark{ display:block; }
	.logo img.logo__img--on-light{ display:none; }
}
[data-theme="dark"]  .logo img.logo__img--on-dark{ display:block; }
[data-theme="dark"]  .logo img.logo__img--on-light{ display:none; }
[data-theme="light"] .logo img.logo__img--on-dark{ display:none; }
[data-theme="light"] .logo img.logo__img--on-light{ display:block; }


/* ---- Desktop-Navigation ---- */
nav.main-nav{
	margin-left:auto;
}
nav.main-nav ul{
	display:flex;
	list-style:none;
	gap:1.2rem;
}
nav.main-nav a{
	color:var(--nav-pill-ink);
	text-decoration:none;
	font-size:.98rem;
	font-weight:500;
	padding:.45rem 1rem;
	border-radius:999px;
	background:var(--nav-pill-bg);
	border:1px solid var(--nav-pill-line);
	box-shadow:var(--shadow-sm);
	transition:background .2s ease, transform .2s ease,
	           box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
nav.main-nav a:hover,
nav.main-nav a:focus{
	background:var(--brand);
	border-color:var(--brand);
	color:#fff;
	transform:translateY(-1px);
	box-shadow:var(--shadow-md);
}

/* aktuelle Seite hervorheben - Contao setzt bei Navigationsmodulen
   die Klasse "active" bzw. "trail" */
nav.main-nav a.active,
nav.main-nav a.trail{
	background:var(--brand);
	border-color:var(--brand);
	color:#fff;
}


/* ---- Burger-Icon, nur mobil ---- */
.nav-toggle{
	display:none;
	background:none;
	border:none;
	padding:.3rem;
	margin-left:auto;
	cursor:pointer;
}
.nav-toggle-box{
	width:24px;
	height:18px;
	position:relative;
}
.nav-toggle-line{
	position:absolute;
	left:0;
	right:0;
	height:2px;
	border-radius:999px;
	background:var(--header-ink);
	transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease;
}
.nav-toggle-line:nth-child(1){ top:0; }
.nav-toggle-line:nth-child(2){ top:8px; }
.nav-toggle-line:nth-child(3){ bottom:0; }

.nav-toggle--open .nav-toggle-line:nth-child(1){
	top:8px;
	transform:rotate(45deg);
}
.nav-toggle--open .nav-toggle-line:nth-child(2){
	opacity:0;
}
.nav-toggle--open .nav-toggle-line:nth-child(3){
	bottom:8px;
	transform:rotate(-45deg);
}


/* ---- Mobiles Menue, direkt unter der Kopfzeile ---- */
.mobile-nav{
	display:none;
	position:absolute;
	left:0;
	right:0;
	top:70px;                    /* Hoehe der Kopfzeile */
	background:var(--menu-bg);
	border-bottom:1px solid var(--header-line);
	backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(16px);
}
.mobile-nav--open{
	display:block;
}
.mobile-nav ul{
	list-style:none;
	padding:1.25rem 1.5rem;
	display:flex;
	flex-direction:column;
	gap:.8rem;
}
.mobile-nav a{
	display:block;
	color:var(--menu-item-ink);
	text-decoration:none;
	font-size:1rem;
	padding:.65rem .85rem;
	border-radius:.75rem;
	background:var(--menu-item-bg);
	border:1px solid var(--menu-item-line);
}
.mobile-nav a:hover,
.mobile-nav a:focus{
	background:var(--brand);
	border-color:var(--brand);
	color:#fff;
}


/* ---- Umschaltpunkt Desktop / Mobil ---- */
@media (max-width:800px){
	nav.main-nav{ display:none; }
	.nav-toggle{ display:inline-flex; }
}


/* =============================================================================
 * Fusszeile
 * -----------------------------------------------------------------------------
 * Aus dem Footer-Modul entfernt wurden:
 *
 *   html, body { background: radial-gradient(... #111827 ... #020617 ...) }
 *   body       { background-color:#050912 }
 *
 *     Der Seitenhintergrund steht in 00-design-tokens.css und arbeitet
 *     dort mit Variablen. Der Block hier setzte ihn wieder fest auf
 *     dunkel - und weil er im body geladen wurde, hat er die Tokendatei
 *     ueberschrieben. Genau das haette den Hellmodus verhindert.
 *
 *   .inside, .page-wrapper { background: radial-gradient(...) }
 *
 *     .inside ist eine sehr allgemeine Contao-Klasse und kommt auf vielen
 *     Containern vor. Der Verlauf wurde damit mehrfach uebereinander
 *     gezeichnet. Der Hintergrund am body genuegt, deshalb entfernt.
 * =========================================================================== */
.site-footer{
	margin-top:4rem;
	background:transparent;      /* Seitenhintergrund scheint durch */
	color:var(--text);
	border-top:none;
}
.site-footer__inner{
	max-width:1200px;
	margin:0 auto;
	padding:2.5rem 2rem 2rem;
	display:grid;
	grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap:2rem;
}
.site-footer__title{
	margin:0 0 .75rem;
	font-size:1.2rem;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--text-strong);
}
.site-footer__subtitle{
	margin:0 0 .5rem;
	font-size:.95rem;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--text-strong);
}
.site-footer__text{
	margin:0 0 .6rem;
	font-size:.9rem;
	line-height:1.6;
	color:var(--text-muted);
}
.site-footer a{
	color:var(--text-strong);
	text-decoration:none;
}
.site-footer a:hover{
	color:var(--link);
	text-decoration:underline;
}

/* ---- Social Icons ---- */
.site-footer__social{
	display:flex;
	gap:.75rem;
	margin-top:.4rem;
}
.social-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	border-radius:999px;
	font-size:1.2rem;
	color:var(--text-strong);
	background:var(--surface-2);
	border:1px solid var(--line);
	transition:transform .15s ease, background-color .15s ease,
	           color .15s ease, box-shadow .15s ease;
}
.social-icon:hover{
	transform:translateY(-1px);
	background:var(--brand);
	border-color:var(--brand);
	color:#fff;
	box-shadow:var(--shadow-sm);
}

/* ---- Untere Leiste ---- */
.site-footer__bottom{
	border-top:1px solid var(--line);
	margin-top:1.5rem;
}
.site-footer__copy{
	max-width:1200px;
	margin:0 auto;
	padding:.8rem 2rem 1.1rem;
	font-size:.8rem;
	color:var(--text-muted);
}

/* ---- Responsive ---- */
@media (max-width:960px){
	.site-footer__inner{
		grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
	}
}
@media (max-width:720px){
	.site-footer__inner{
		grid-template-columns:minmax(0, 1fr);
		gap:1.75rem;
		padding-inline:1.5rem;
	}
	.site-footer__copy{
		padding-inline:1.5rem;
		text-align:center;
	}
}


/* =============================================================================
 * STARTSEITEN-HERO MIT DIASHOW
 * -----------------------------------------------------------------------------
 * WICHTIG - das war die Ursache der hellen Flaeche im Dunkelmodus:
 * Das Hero-Modul hatte im eigenen <style>-Block
 *
 *     html, body { background:#e5e7eb; }
 *
 * Module werden im <body> ausgegeben, also NACH den Stylesheets aus dem
 * <head>. Diese eine Zeile hat darum IMMER gewonnen und den Seiten-
 * hintergrund fest auf Hellgrau gesetzt, auch im Dunkelmodus. Der Hero
 * blendet unten weich nach durchsichtig aus (mask-image), darunter kam
 * also das feste Hellgrau zum Vorschein - genau die "helle Flaeche"
 * hinter den News-Karten.
 *
 * Der Seitenhintergrund steht jetzt nur noch an EINER Stelle, in
 * 00-design-tokens.css. Hier wird er bewusst nicht mehr angefasst.
 * =========================================================================== */
/* WARUM DIE KANTE UNTEN DA WAR
 * Der Hero hatte "background:var(--media-bg)" als Platzhalter. Das Bild
 * blendet zwar nach unten weg, darunter lag aber diese feste Flaeche -
 * im Dunkelmodus #0f172a, waehrend der Seitenhintergrund #020617 ist.
 * Zwei verschiedene Dunkeltoene, die an der Unterkante aneinanderstossen:
 * genau die harte Linie. Der Platzhalter ist jetzt weg, ausserdem
 * verlaeuft die Ausblendung ueber mehrere Stufen statt in einem Schritt,
 * und der folgende Inhalt rueckt in die Ausblendzone hinein. */
/* Feste Hoehe, wie vorher.
 *
 * Ein Versuch mit aspect-ratio statt fester Hoehe ist zurueckgenommen:
 * Der Hero wurde dadurch auf breiten Fenstern nicht mehr voll breit und
 * auf dem Handy zu flach - das Bild lief nicht mehr wie gewohnt nach
 * unten in den Inhalt hinein. Falls das Beschneiden an den Seiten
 * spaeter stoeren sollte, ist der bessere Hebel das Seitenverhaeltnis
 * der Bildgroesse "Hero" im Backend, nicht diese Hoehe hier.
 */
.hero-bg{
	position:relative;
	height:70vh;
	overflow:hidden;
	z-index:0;
	pointer-events:none;
	background:transparent;

	/* zieht den nachfolgenden Inhalt in die ausblendende Bildkante hinein,
	   dadurch gibt es keine sichtbare Naht mehr */
	margin-bottom:-9vh;
}

/* ---- Diashow: alle Bilder liegen uebereinander, nur .is-active ist sichtbar ---- */
.hero-bg__slide{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:0;
	transition:opacity 1.4s ease;

	/* Mehrstufige Ausblendung nach unten. Ein einzelner Sprung von
	   deckend auf durchsichtig wirkt als Kante, weil die Deckkraft
	   linear faellt, das Auge Helligkeit aber nicht linear wahrnimmt.
	   Die Zwischenstufen machen den Verlauf gleichmaessig. */
	-webkit-mask-image:linear-gradient(to bottom,
		#000 0%, #000 20%,
		rgba(0,0,0,.86) 58%,
		rgba(0,0,0,.55) 72%,
		rgba(0,0,0,.24) 85%,
		rgba(0,0,0,.06) 94%,
		transparent 100%);
	mask-image:linear-gradient(to bottom,
		#000 0%, #000 20%,
		rgba(0,0,0,.86) 58%,
		rgba(0,0,0,.55) 72%,
		rgba(0,0,0,.24) 85%,
		rgba(0,0,0,.06) 94%,
		transparent 100%);
}
.hero-bg__slide.is-active{
	opacity:1;
}

/* Ein Slide ist entweder ein <img> oder - bei responsiven Bildgroessen -
   ein <picture> mit mehreren <source>. Im zweiten Fall traegt das
   picture die Klasse, das Bild darin muss die Flaeche fuellen.
   picture ist von Haus aus inline, deshalb display:block. */
picture.hero-bg__slide{
	display:block;
}
.hero-bg__slide img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

/* ---- Quelle der Bilder: das Galerie-Element ----
 * Die Bilder der Diashow kommen aus einem Contao-Galerie-Element mit
 * der Klasse "hero-source". Das Script kopiert sie in den Hero und
 * setzt danach zusaetzlich "hero-source--verarbeitet".
 *
 * Ausgeblendet wird erst DIESE zweite Klasse, nicht "hero-source"
 * selbst. Grund: Laeuft das Script nicht - abgeschaltetes JavaScript,
 * ein Fehler, ein Filter im Modul - bliebe sonst ein leeres Loch auf
 * der Startseite. So sieht man in dem Fall die normale Galerie.
 */
.hero-source--verarbeitet{
	display:none;
}

/* Zusaetzlicher Verlauf in der Seitenfarbe ueber der unteren Bildhaelfte.
   Zwei Aufgaben:
   1. Er glaettet den Uebergang noch einmal zusaetzlich zur Maske.
   2. Er ist die Rueckfallloesung fuer Browser ohne mask-image - dort
      bleibt das Bild unten zwar deckend, verschwindet aber trotzdem
      weich hinter diesem Verlauf. */
.hero-bg::before{
	content:"";
	position:absolute;
	inset:auto 0 0 0;
	height:55%;
	z-index:1;
	pointer-events:none;
	background:linear-gradient(to bottom,
		rgba(0,0,0,0) 0%,
		var(--bg) 88%,
		var(--bg) 100%);
	/* Der Verlauf mischt von durchsichtig nach --bg. In manchen Browsern
	   wird "transparent" als durchsichtiges SCHWARZ interpretiert, was
	   im Hellmodus einen Grauschleier ergaebe. rgba(0,0,0,0) am Anfang
	   und ein frueher --bg-Stopp vermeiden das sichtbar. */
	opacity:.92;
}

/* leichter Schleier oben, damit z.B. ein Titel auf dem Bild lesbar bleibt */
.hero-bg::after{
	content:"";
	position:absolute;
	inset:0 0 auto 0;
	height:40%;
	background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 100%);
	pointer-events:none;
}

/* ---- Punkte-Navigation der Diashow ----
 * Punkte nicht gewuenscht? Dann diese eine Zeile einkommentieren:
 *
 *     .hero-bg__dots{ display:none; }
 *
 * Das ist der sicherste Weg. Loescht man stattdessen das div aus dem
 * Modul, muss man auch die Zeilen im Script anpassen, die es befuellen -
 * sonst bricht das Script mit einem Fehler ab und es laeuft gar nichts
 * mehr. Details stehen im Kommentar am Ende von hero-modul.html.
 */
.hero-bg__dots{
	position:absolute;
	left:50%;
	bottom:calc(9vh + 14px);   /* oberhalb der ueberlappenden Zone */
	transform:translateX(-50%);
	display:flex;
	gap:8px;
	z-index:3;
	pointer-events:auto;
}
.hero-bg__dot{
	width:9px;
	height:9px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,.85);
	background:rgba(255,255,255,.35);
	padding:0;
	cursor:pointer;
}
.hero-bg__dot.is-active{
	background:#fff;
}

/* ---- optional: Inhalt ins Bild hineinschieben ---- */
.page-content{
	position:relative;
	z-index:1;
	margin-top:-30vh;
	padding-left:1.5rem;
	padding-right:1.5rem;
	padding-bottom:3rem;
}

@media (max-width:768px){
	.hero-bg{
		height:60vh;
		margin-bottom:-6vh;
	}
	.hero-bg__dots{ bottom:calc(6vh + 12px); }
	.page-content{
		margin-top:-20vh;
		padding-left:1rem;
		padding-right:1rem;
	}
}

/* Wer keine Bewegung wuenscht, bekommt die Bilder ohne Ueberblendung.
   Das JS im Hero-Modul verlangsamt zusaetzlich den Wechsel. */
@media (prefers-reduced-motion:reduce){
	.hero-bg__slide{ transition:none; }
}


/* =============================================================================
 * ABSCHNITT "LETZTE EINSAETZE"  -  Kachelform
 * -----------------------------------------------------------------------------
 * Die bisherige Fassung hatte feste Farben, auf ein dunkles Umfeld
 * abgestimmt (color:#e5e7eb, #fefce8, #9ca3af). Auf hellem Grund waeren
 * diese Texte kaum lesbar gewesen. Jetzt Tokens.
 *
 * Ausserdem waren es lose Textbloecke ohne eigene Flaeche, die neben den
 * News-Kacheln wie ein Fremdkoerper wirkten. Jetzt echte Kacheln mit
 * derselben Flaeche, demselben Radius und demselben Schatten wie die
 * News-Karten - vier Stueck nebeneinander.
 *
 * Die ANZAHL steuert nicht das CSS, sondern das Script im Modul
 * (slice(0, 4)). Das Raster passt sich beliebigen Anzahlen an.
 * =========================================================================== */
#einsatz-teaser{
	max-width:1200px;
	margin:3rem auto;
	padding:0 1.5rem;
}

#einsatz-teaser h2{
	font-size:.95rem;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--text-muted);
	margin:0 0 1rem;
}

/* Keine Kacheln, keine farbigen Kanten - schlichte Textbloecke.
   auto-fit heisst: nebeneinander, solange Platz ist, sonst automatisch
   weniger Spalten. minmax(0,...) verhindert, dass ein langes Stichwort
   die Spalte breiter macht als erlaubt - das war die Ursache des
   Ueberstands am rechten Rand. */
.einsatz-teaser-list{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
	gap:1.1rem 1.5rem;
	max-width:100%;
}

.einsatz-teaser-card{
	min-width:0;               /* erlaubt dem Text, im Raster umzubrechen */
	display:flex;
	flex-direction:column;
	gap:.2rem;
}

/* Nummern-Badge - im aktuellen Modul nicht verwendet, bleibt fuer spaeter */
.einsatz-teaser-index{
	width:30px;
	height:30px;
	border-radius:999px;
	border:1px solid var(--line);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:.8rem;
	color:var(--text-muted);
}

.einsatz-teaser-maininfo{
	min-width:0;
}

.einsatz-teaser-stichwort{
	font-weight:600;
	font-size:1rem;
	line-height:1.3;
	color:var(--text-strong);
	margin-bottom:.2rem;
	overflow-wrap:anywhere;    /* lange Stichworte brechen um statt zu ueberstehen */
}

.einsatz-teaser-meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.4rem .6rem;
	font-size:.8rem;
	color:var(--text-muted);
}
.einsatz-teaser-meta span{
	display:inline-flex;
	align-items:center;
	gap:.3rem;
}
.einsatz-teaser-meta strong{
	font-weight:600;
	color:var(--accent);
}
/* kleiner Trennpunkt zwischen Datum und Uhrzeit */
.einsatz-teaser-meta span + span::before{
	content:"";
	width:3px;
	height:3px;
	border-radius:50%;
	background:var(--text-muted);
	opacity:.6;
}

/* Lade- und Fehlermeldungen - sollen ueber die volle Breite laufen und
   nicht als halbe Kachel aussehen */
.einsatz-meta-message{
	grid-column:1 / -1;
	font-size:.85rem;
	color:var(--text-muted);
}
/* ersetzt das bisherige inline style="color:#fca5a5" im Script -
   Markenrot passt inhaltlich ohnehin besser zu einer Fehlermeldung */
.einsatz-meta-message--error{
	color:var(--brand);
}

/* Handy: untereinander, mit duenner Trennlinie statt Kachelrand */
@media (max-width:700px){
	#einsatz-teaser{
		margin:2rem auto;
		padding:0 1rem;
	}
	.einsatz-teaser-list{
		grid-template-columns:minmax(0, 1fr);
		gap:0;
	}
	.einsatz-teaser-card{
		padding:.75rem 0;
		border-bottom:1px solid var(--line-soft);
	}
	.einsatz-teaser-card:last-child{
		border-bottom:none;
	}
	.einsatz-teaser-stichwort{
		font-size:.95rem;
	}
	.einsatz-teaser-meta{
		font-size:.78rem;
	}
}


/* =============================================================================
 * WETTERWARNUNGEN  (DWD + NINA)
 * -----------------------------------------------------------------------------
 * Die bisherige Fassung war komplett auf Dunkel gebaut: radial-gradient
 * von #111827 nach #020617 als Panel, durchgaengig weisse Schrift. Im
 * Hellmodus waere das ein dunkler Fremdkoerper auf heller Seite gewesen.
 *
 * Jetzt:
 *   - Panel nutzt var(--surface) wie die uebrigen Karten der Seite.
 *   - Warnboxen nutzen var(--surface-2), die "Karte in der Karte".
 *   - Schrift durchgehend --text / --text-strong / --text-muted.
 *
 * Die drei Schweregrad-Farben (gelb/orange/rot links an den NINA-
 * Warnungen) bleiben bewusst fest. Das sind Warnfarben wie eine Ampel
 * und sollen in beiden Modi gleich aussehen.
 * =========================================================================== */
#wetterapp{
	font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color:var(--text);
	padding:2.5rem 2rem;
}

.wetter-layout{
	max-width:1700px;
	margin:0 auto;
}

/* Keine Kachel mehr: keine eigene Flaeche, kein Rahmen, kein Schatten.
   Der Abschnitt sitzt jetzt direkt auf dem Seitenhintergrund. */
.wetter-main{
	padding:0;
	background:transparent;
	border:none;
	box-shadow:none;
}

.wetter-header h1{
	font-size:1.9rem;
	letter-spacing:.03em;
	margin:0;
	color:var(--text-strong);
}
.wetter-subline{
	margin-top:.35rem;
	font-size:.9rem;
	color:var(--text-muted);
}

.wetter-content{
	margin-top:1.6rem;
	display:grid;
	grid-template-columns:minmax(0, 2.1fr) minmax(0, 1.6fr);
	gap:2rem;
}

.wetter-col__title{
	margin:0 0 .6rem;
	font-size:.95rem;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--text-strong);
}
.wetter-col__title--with-icon{
	display:inline-flex;
	align-items:center;
	gap:.35rem;
}
.wetter-col__icon{
	height:75px;
	width:auto;
	display:block;
	transform:translateY(1px);
}

.wetter-col__body{
	display:flex;
	align-items:flex-start;
	gap:1.1rem;
}

.home-weather__map-link{
	flex:0 0 320px;
	display:block;
}
.home-weather__image{
	width:100%;
	height:auto;
	border-radius:var(--radius);
	opacity:.9;
	filter:drop-shadow(0 12px 32px rgba(0,0,0,.35));
}

.home-weather__warnings{
	flex:1 1 auto;
}

/* Ebenfalls keine Kacheln. Statt Flaeche und Rahmen trennt eine duenne
   Linie die einzelnen Warnungen voneinander. */
.home-weather__warn{
	padding:.85rem 0;
	background:transparent;
	border:none;
	border-bottom:1px solid var(--line-soft);
	box-shadow:none;
	margin-bottom:0;
}
.home-weather__warn:last-child{
	border-bottom:none;
}
.home-weather__warn-title{
	font-size:.78rem;
	text-transform:uppercase;
	letter-spacing:.1em;
	color:var(--accent);
}
.home-weather__warn-headline{
	font-weight:600;
	margin:.15rem 0 .1rem;
	font-size:.96rem;
	color:var(--text-strong);
}
.home-weather__warn-time{
	color:var(--text-muted);
	font-size:.8rem;
}
.home-weather__warn-text{
	margin-top:.25rem;
	font-size:.86rem;
	color:var(--text);
}

.home-weather__loading,
.home-weather__none{
	margin:0;
	font-size:.85rem;
	color:var(--text-muted);
}
.home-weather__source{
	margin-top:.5rem;
	font-size:.75rem;
	color:var(--text-muted);
}

/* Schweregrade - feste Warnfarben, absichtlich unabhaengig vom Theme.
   Kein Kachelrahmen, nur ein farbiger Strich links als Warnstufe.
   Das Einruecken haelt den Text vom Strich weg. */
.home-nina__warn--minor,
.home-nina__warn--moderate,
.home-nina__warn--severe{
	padding-left:.8rem;
}
.home-nina__warn--minor    { border-left:3px solid #fbbf24; }
.home-nina__warn--moderate { border-left:3px solid #f97316; }
.home-nina__warn--severe   { border-left:3px solid #ef4444; }


/* ---- Schmale Fenster und Handy ----
   Bisher blieben Karte und Hinweise auch hier nebeneinander, die Karte
   war ein 190px schmaler Streifen und der Text daneben sehr eng. Jetzt
   liegt die Karte oben ueber die volle Breite, die Warnungen darunter. */
@media (max-width:900px){
	#wetterapp{ padding:2rem 1.25rem; }
	.wetter-content{
		grid-template-columns:minmax(0, 1fr);
		gap:2.25rem;
	}
	.wetter-col__body{
		flex-direction:column;
		align-items:stretch;
		gap:1rem;
	}
	.home-weather__map-link{
		flex:0 0 auto;
		width:100%;
		max-width:420px;
		margin:0 auto;
	}
	.wetter-header h1{ font-size:1.6rem; }
	.wetter-col__icon{ height:52px; }
}

@media (max-width:700px){
	#wetterapp{ padding:1.75rem 1rem; }
	.wetter-header h1{ font-size:1.4rem; }
	.wetter-subline{ font-size:.86rem; }
	.home-weather__warn-headline{ font-size:.92rem; }
	.home-weather__warn-text{ font-size:.84rem; }
}


/* =============================================================================
 * Container ohne eigene Flaeche
 * -----------------------------------------------------------------------------
 * Der Seitenhintergrund wird EINMAL am body gezeichnet (siehe
 * 00-design-tokens.css) und soll durch alle Container hindurch
 * sichtbar bleiben.
 *
 * Vorher lag auf .inside und .page-wrapper ein fest dunkler Verlauf.
 * Der ist entfallen, weil er den Hellmodus verhindert haette. Dadurch
 * kommt aber eine hellere Flaeche zum Vorschein, die Contao bzw. das
 * Theme diesen Containern gibt - im Dunkelmodus stoerend.
 *
 * Deshalb hier auf transparent gesetzt statt auf eine feste Farbe:
 * so stimmt es in beiden Farbschemata.
 * =========================================================================== */
#wrapper,
#container,
#main,
#main .inside,
.page-wrapper,
.mod_article,
body > .inside{
	background:transparent;
}


/* =============================================================================
 * Footer-Bereich des Layouts ohne eigene Flaeche
 * Muss weiterhin nach den anderen Regeln stehen.
 * =========================================================================== */
#footer-custom{
	margin-top:0 !important;
	padding:0 !important;
	background:transparent !important;
	background-color:transparent !important;
	border:0 !important;
}

#footer-custom .inside,
#footer-custom .mod_article,
#footer-custom .ce_text{
	background:transparent !important;
	border:0 !important;
}

.hero-bg__dots{ display:none; }
/* =============================================================================
 * OFFENER PUNKT: das Logo
 * -----------------------------------------------------------------------------
 * Bisher wird nur files/pic/logo_white.png verwendet - ein weisses Logo.
 * Auf der hellen Kopfzeile ist das unsichtbar.
 *
 * Das Header-Modul enthaelt deshalb jetzt ZWEI Bilder:
 *     logo_white.png   mit Klasse logo__img--on-dark
 *     logo_dark.png    mit Klasse logo__img--on-light
 *
 * Die zweite Datei muss noch angelegt werden. Zwei Moeglichkeiten:
 *   a) Eine dunkle Fassung des Logos exportieren und als
 *      files/pic/logo_dark.png hochladen.
 *   b) Ein vorhandenes farbiges Logo verwenden, zum Beispiel
 *      files/cto_layout/img/transparent_logo.png - dann im Header-Modul
 *      den Pfad entsprechend aendern.
 *
 * Solange die Datei fehlt, bleibt im Hellmodus die Stelle leer.
 * =========================================================================== */
/* =========================
   GRID
========================= */
.fw-news-grid {
  width: 100%;
  margin: 2.5rem auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.fw-news-grid__pagination {
  max-width: 1200px;
  margin: 1.5rem auto 0;
}

/* =========================
   NEWS CARD (GRÖSSE WIEDERHERSTELLEN)
========================= */
.fw-news-box__link {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  border-radius: 1.1rem;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
  min-height: 260px; /* ← Größer gemacht */
}

/* =========================
   BILD (PERFEKT GEFÜLLT)
========================= */
.fw-news-box__image {
  flex: 0 0 40%;
  background: var(--media-bg);
  overflow: hidden;
  border-radius: 1.1rem 0 0 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* ← volle Höhe */
}

.fw-news-box__image figure,
.fw-news-box__image .image_container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.fw-news-box__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Content-Padding etwas vergrößert */
.fw-news-box__content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.8rem 1.8rem 1.8rem 2rem; /* ← mehr Platz */
}


/* =========================
   CONTENT (rechts) - BULLETPROOF FIX
========================= */
.fw-news-box__content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem 1.6rem 1.5rem 1.8rem;
  color: var(--text);
}

.fw-news-box__title {
  padding-right: 4.5rem;
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-strong);
  flex-shrink: 0;
}

/* Wrapper für Teaser - nimmt Platz ein */
.fw-news-box__text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fw-news-box__teaser {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.fw-news-box__more {
  margin-top: auto !important;
  flex-shrink: 0 !important;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--link);
  padding-top: 1rem;
}

.fw-news-box__more span::after {
  content: " →";
}

.fw-news-box__date {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.8rem;
  box-shadow: var(--shadow-sm);
}

.fw-news-box__date-text {
  letter-spacing: 0.05em;
}


/* =========================
   RESPONSIVE (GRID/CARDS)
========================= */
@media (max-width: 700px) {
  .fw-news-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .fw-news-box__content,
  .fw-news-box__date {
    display: none !important;
  }

  .fw-news-box__link {
    display: block;
    position: relative;
    border-radius: 1.1rem;
    overflow: hidden;
    margin: 0 auto;
  }

  .fw-news-box__image {
    width: 85vw !important;
    height: 50vh !important;
    max-width: 380px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 1.1rem !important;
  }

  .fw-news-box__image figure,
  .fw-news-box__image .image_container {
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;
  }

  .fw-news-box__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  .fw-news-box__link:hover .fw-news-box__image {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
  }

  .fw-news-box__link:hover .fw-news-box__image img {
    transform: scale(1.05);
  }

  .fw-news-box__image::after {
    content: "Tippen für mehr Infos";
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    text-align: center;
    font-size: clamp(1rem, 3vw, 1.2rem);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(transparent, var(--overlay-strong));
    padding: 1.5rem 1rem 1rem;
    backdrop-filter: blur(10px);
    border-radius: 0 0 1.1rem 1.1rem;
  }
}

/* =========================
   ARTICLE PAGE - VOLLSEITE
========================= */
.fw-article-page {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 3rem 2rem;
  min-height: 100vh;
  background: var(--surface);
  color: var(--text);
  line-height: 1.8;
}

.fw-article-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}

.fw-article-image-section {
  width: 100%;
  height: auto;
  background: var(--media-bg);
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: stretch;
}

.fw-article-image-section figure,
.fw-article-image-section .image_container,
.fw-article-image-section .ce_image {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  float: none !important;
  border-radius: 1.2rem;
  overflow: hidden;
}

.fw-article-image-section img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  border-radius: 1.2rem;
}

.fw-article-content-section {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 0 !important;
}

.fw-article-header {
  text-align: left;
  margin-bottom: 2.5rem;
}

.fw-article-title {
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 1rem 0;
  line-height: 1.25;
}

.fw-article-subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 0 1.5rem 0;
}

.fw-article-meta {
  font-size: 0.95rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.fw-article-date {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.fw-article-author {
  color: var(--text);
  font-weight: 500;
}

.fw-article-body,
.fw-article-content-section .ce_text {
  flex: 1;
  color: var(--text) !important;
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.fw-article-body p {
  margin-bottom: 1.4em;
}

.fw-article-body h2,
.fw-article-body h3 {
  color: var(--text-strong);
  margin: 2.5rem 0 1rem 0;
}

.fw-article-body h2 {
  font-size: 1.6rem;
  border-bottom: 2px solid var(--accent-line);
  padding-bottom: 0.5rem;
}

.fw-article-attachments {
  margin-top: 4rem;
  border-top: 1px solid var(--line);
  padding-top: 2.5rem;
}

.fw-article-attachments h3 {
  color: var(--accent);
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}

.fw-article-attachments ul {
  list-style: none;
  padding: 0;
}

.fw-article-attachments li {
  margin-bottom: 1rem;
}

.fw-article-attachments a {
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
  padding: 0.6rem 0;
  display: block;
}

.fw-article-attachments a:hover {
  color: var(--link-hover);
}

@media (max-width: 1100px) {
  .fw-article-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .fw-article-page {
    padding: 2rem 1.5rem;
  }
  .fw-article-title {
    font-size: 1.9rem;
  }
}

@media (max-width: 480px) {
  .fw-article-page {
    padding: 1.5rem 1rem;
  }
  .fw-article-title {
    font-size: 1.6rem;
  }
}
/* =============================================================================
 * news_preview.css
 * -----------------------------------------------------------------------------
 * News-Kacheln auf der Startseite (Vorschau).
 *
 * Farben kommen aus 00-design-tokens.css, hier stehen keine festen Werte.
 *
 * AUFBAU
 * Die Kachel sieht jetzt auf allen Geraeten gleich aus: Bild oben,
 * darunter Titel und der Hinweis "Mehr erfahren" (unten in der Kachel).
 * Vorschautext und Datum sind ausgeblendet.
 * Vorher gab es zwei verschiedene Bauformen - am Desktop lag das Bild
 * links neben dem Text, am Handy darueber. Das bedeutete doppelte
 * Pflege und die beiden Ansichten liefen mit der Zeit auseinander.
 *
 * Nur die Spaltenzahl aendert sich noch:
 *     ab 1000px    3 nebeneinander
 *     700 - 1000   2 nebeneinander
 *     unter 700    1 pro Zeile
 *
 * ZU DEN !important
 * Sie stehen dort, wo die alte Fassung dieser Datei ebenfalls !important
 * verwendet hat (feste vw/vh-Masse am Bild, Hinweis ueber die volle
 * Breite). Solange die alte Datei noch irgendwo mitgeladen wird, gewinnt
 * sie sonst - !important wird nur von !important geschlagen. Ist sie aus
 * dem Seitenlayout entfernt, koennen sie hier ersatzlos raus.
 * =========================================================================== */


/* =============================================================================
 * Raster
 * =========================================================================== */
.fw-news-grid{
	max-width:1280px;
	width:100%;
	margin:2.5rem auto;
	padding:0 1.5rem;
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:1.5rem;
	align-items:stretch;
}

.fw-news-grid__pagination{
	max-width:1280px;
	margin:1.5rem auto 0;
	padding:0 1.5rem;
}

/* Nichts in einer Kachel darf breiter werden als die Kachel selbst.
   Ohne diese Bremse schiebt ein einzelnes langes Wort oder ein Bild mit
   fester Breite die ganze Karte ueber den rechten Rand hinaus. */
.fw-news-box,
.fw-news-box *{
	max-width:100%;
}


/* =============================================================================
 * Kachel
 * =========================================================================== */
.fw-news-box{
	display:flex;
	height:100%;
}

.fw-news-box__link{
	position:relative;
	display:flex;
	flex-direction:column;      /* Bild oben, Text darunter */
	width:100%;
	text-decoration:none;
	color:inherit;
	border-radius:var(--radius);
	overflow:hidden;
	background:var(--surface-2);
	border:1px solid var(--line);
	box-shadow:var(--shadow-sm);
	transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Hover UND Tastaturfokus - wer mit Tab navigiert, soll dieselbe
   Rueckmeldung bekommen wie mit der Maus. */
.fw-news-box__link:hover,
.fw-news-box__link:focus-visible{
	transform:translateY(-4px);
	box-shadow:var(--shadow-lg);
	border-color:var(--accent-line);
}
.fw-news-box__link:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:3px;
}
.fw-news-box__link:active{
	transform:scale(.995);
}


/* =============================================================================
 * Bild
 * =========================================================================== */
.fw-news-box__image{
	position:relative !important;
	flex:0 0 auto !important;
	width:100% !important;
	max-width:none !important;
	height:auto !important;
	aspect-ratio:16 / 9;
	overflow:hidden;
	background:var(--media-bg);
}
/* Aeltere Browser ohne aspect-ratio bekommen eine feste Hoehe */
@supports not (aspect-ratio: 16 / 9){
	.fw-news-box__image{ height:200px !important; }
}

.fw-news-box__image figure,
.fw-news-box__image .image_container{
	margin:0 !important;
	padding:0 !important;
	width:100% !important;
	height:100% !important;
	position:static !important;
}
.fw-news-box__image img{
	position:static !important;
	display:block !important;
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	object-position:center !important;
	transition:transform .35s ease;
}
.fw-news-box__link:hover .fw-news-box__image img,
.fw-news-box__link:focus-visible .fw-news-box__image img{
	transform:scale(1.05);
}

/* ---- Verlauf auf dem Bild ----
   Rein dekorativ. Der Hinweis "Mehr erfahren" sitzt nicht mehr auf dem
   Bild, sondern unten im Textbereich (.fw-news-box__content::after). */
.fw-news-box__image::before{
	content:"";
	position:absolute;
	inset:auto 0 0 0;
	height:45%;
	background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
	pointer-events:none;
}


/* =============================================================================
 * Textbereich
 * =========================================================================== */
.fw-news-box__content{
	position:relative;
	flex:1;
	min-width:0;                 /* verhindert, dass lange Woerter sprengen */
	display:flex;
	flex-direction:column;
	padding:1.05rem 1.15rem 1.2rem;
	color:var(--text);
}

.fw-news-box__title{
	margin:0 0 .35rem;
	font-size:1.02rem;
	font-weight:600;
	line-height:1.32;
	color:var(--text-strong);
	flex-shrink:0;
}

.fw-news-box__text{
	flex:1;
	display:flex;
	flex-direction:column;
	min-height:0;
}

/* Vorschautext ausgeblendet - nur noch Titel + "Mehr erfahren" sichtbar */
.fw-news-box__teaser{
	display:none;
}

/* Die Zeile "Weitere Infos" waere neben dem Hinweis unten doppelt */
.fw-news-box__more{
	display:none;
}

/* ---- Hinweis "Mehr erfahren" ----
   Vorher als Pille oben auf dem Bild, jetzt unten im Textbereich.
   .fw-news-box__text hat flex:1 und ist ohne Teaser leer, daher
   schiebt sie den Hinweis automatisch an den unteren Kartenrand. */
.fw-news-box__content::after{
	content:"Mehr erfahren \2192";
	align-self:flex-start;
	margin-top:.6rem;
	padding:.4rem .8rem;
	border-radius:999px;
	font-size:.78rem;
	font-weight:600;
	color:#fff;
	background:rgba(17,24,39,.55);
	border:1px solid rgba(255,255,255,.28);
	transition:background-color .22s ease, border-color .22s ease;
}
.fw-news-box__link:hover .fw-news-box__content::after{
	background:var(--brand);
	border-color:var(--brand);
}


/* =============================================================================
 * Datums-Pille
 * -----------------------------------------------------------------------------
 * Sitzt auf dem Bild, unten links, direkt ueber der Textkante.
 * Das setzt voraus, dass .fw-news-box__date INNERHALB von
 * .fw-news-box__content liegt - so ist es im Contao-Template.
 * Sitzt sie bei euch direkt im Link, stattdessen "top:.7rem" nehmen.
 * =========================================================================== */
.fw-news-box__date{
	display:none;
}
.fw-news-box__date-text{
	letter-spacing:.04em;
}


/* =============================================================================
 * Spaltenzahl
 * =========================================================================== */
@media (max-width:1000px){
	.fw-news-grid{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:1.25rem;
	}
}

@media (max-width:700px){
	.fw-news-grid{
		grid-template-columns:minmax(0, 1fr);
		margin:1.75rem auto;
		padding:0 1rem;
		gap:1.1rem;
	}
	.fw-news-grid__pagination{
		padding:0 1rem;
	}
	.fw-news-box__teaser{
		-webkit-line-clamp:2;
		line-clamp:2;
	}
}


/* =============================================================================
 * Bewegung reduzieren
 * =========================================================================== */
@media (prefers-reduced-motion:reduce){
	.fw-news-box__link,
	.fw-news-box__image img,
	.fw-news-box__content::after{
		transition:none;
	}
	.fw-news-box__link:hover,
	.fw-news-box__link:focus-visible{
		transform:none;
	}
	.fw-news-box__link:hover .fw-news-box__image img{
		transform:none;
	}
}
/* =========================================================
   Allgemeine Fahrzeugkarte (alle Seiten)
   ========================================================= */

/* Liste aller Fahrzeuge (Artikel-Klasse "vehicle-list") */
.vehicle-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Karte */
.vehicle-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem;
  padding: 1.75rem 2rem;
  border-radius: 1.25rem;
  color: var(--text-strong);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-top: 5rem;   /* Abstand nach oben */

}

.vehicle-card:first-child {
  margin-top: 3rem;
}


/* leichtes Glow-Overlay */
.vehicle-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
  opacity: 0.7;
  pointer-events: none;
}

/* Inhaltsebenen */
.vehicle-card__media,
.vehicle-card__body {
  position: relative;
  z-index: 1;
}

/* Bild rechts */
.vehicle-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vehicle-card__image {
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.vehicle-card__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

.vehicle-card:hover .vehicle-card__image img {
  transform: scale(1.06);
}

/* Textbereich links */
.vehicle-card__header {
  margin-bottom: 1.25rem;
}

.vehicle-card__title {
  margin: 0 0 0.5rem 0;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vehicle-card__intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Spalten für Daten + Ausstattung */
.vehicle-card__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 1.75rem;
  margin-top: 0.5rem;
}

.vehicle-card__section-title {
  margin: 0 0 0.75rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.vehicle-card__specs {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.4rem 1.2rem;
  font-size: 0.95rem;
}

.vehicle-card__specs dt {
  font-weight: 600;
  color: var(--text-strong);
}

.vehicle-card__specs dd {
  margin: 0;
  text-align: right;
  color: var(--text-strong);
}

/* Ausstattungsliste */
.vehicle-card__equipment {
  margin: 0;
  padding-left: 1.2rem;
  list-style: none;
  font-size: 0.95rem;
}

.vehicle-card__equipment li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.35rem;
}

.vehicle-card__equipment li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8rem;
  color: var(--ok);
}

/* Responsive allgemein */
@media (max-width: 960px) {
  .vehicle-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.5rem 1.4rem;
  }

  .vehicle-card__media {
    order: -1;
  }
}

@media (max-width: 640px) {
  .vehicle-card__title {
    font-size: 1.4rem;
  }

  .vehicle-card__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .vehicle-card__specs {
    grid-template-columns: minmax(0, 1fr);
  }

  .vehicle-card__specs dd {
    text-align: left;
  }
}

/* =========================================================
   Technik-Seite: gemeinsamer Hintergrund + transparente Box
   ========================================================= */


/* Artikel mit allen Fahrzeugen */
.tech-page .tech-list {
  max-width: 1400px;
  margin: 0 auto 3rem;
  padding: 2.5rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Fahrzeugzeile: Layout von oben, aber ohne eigene Box */
.tech-page .vehicle-card {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 2.5rem;

  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tech-page .vehicle-card::before {
  display: none;
}

/* Bild – abgerundet, wie vorher */
.tech-page .vehicle-card .vehicle-card__image,
.tech-page .vehicle-card figure {
  margin: 0;
  border-radius: 1.5rem;
  overflow: hidden;
  /*box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);*/
}

.tech-page .vehicle-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Typografie */
.tech-page .vehicle-card__title,
.tech-page .vehicle-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tech-page .vehicle-card__intro,
.tech-page .vehicle-card p.vehicle-intro {
  margin: 0 0 1.2rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Spalten für Daten & Ausstattung */
.tech-page .vehicle-card__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr);
  gap: 1.8rem;
}

.tech-page .vehicle-card__section-title,
.tech-page .vehicle-card h3 {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Technische Daten */
.tech-page .vehicle-card__specs,
.tech-page .vehicle-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.35rem 1.2rem;
  font-size: 0.9rem;
}

.tech-page .vehicle-card dt {
  font-weight: 600;
  color: var(--text-strong);
}

.tech-page .vehicle-card dd {
  margin: 0;
  text-align: right;
}

/* Ausstattungsliste */
.tech-page .vehicle-card__equipment,
.tech-page .vehicle-card ul.vehicle-equipment {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.tech-page .vehicle-card__equipment li,
.tech-page .vehicle-card ul.vehicle-equipment li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.3rem;
}

.tech-page .vehicle-card__equipment li::before,
.tech-page .vehicle-card ul.vehicle-equipment li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.78rem;
  color: var(--ok);
}

/* Responsiv Technikseite */
@media (max-width: 900px) {
  .tech-page .vehicle-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .tech-page .tech-list {
    padding-inline: 1rem;
  }

  .tech-page .vehicle-card__title,
  .tech-page .vehicle-card h2 {
    font-size: 1.4rem;
  }

  .tech-page .vehicle-card__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .tech-page .vehicle-card dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .tech-page .vehicle-card dd {
    text-align: left;
  }
}