@charset "UTF-8";
/* ============================================================
Freiwillige Feuerwehr Colbitz — zentrales Stylesheet
Struktur: Tokens → Basis → Komponenten (mobile zuerst, Desktop
je Komponente in einer nested Media Query).
Desktop-Breakpoint überall identisch: [breakpoint-desktop] 1400px
============================================================ */
/* ---------- Design-Tokens ---------- */
:root {
/* Farben */
--c-primary: #2b5ca8; /* Dunkelblau der Menüleiste */
--c-primary-dark: #234b89; /* Hover/aktiv */
--c-accent: #c6d76f; /* Lindgrün des Suchfelds — für FLÄCHEN */
--c-on-accent: #1d1d1d; /* Text auf Grün */
/* Aufgehelltes Akzentgrün für TEXT auf blauem Grund. Das Flächen-Grün
--c-accent erreicht auf --c-primary nur 4.17:1 und verfehlt damit
WCAG 1.4.3 (4.5:1 für Text unter 18.66px/bold bzw. 24px). Dieser Ton
schafft 4.78:1 auf --c-primary und 6.27:1 auf --c-primary-dark, bei
gleichem Farbeindruck. Flächen (Notrufband, Badge, Suchfeld) behalten
bewusst --c-accent — dort steht dunkler Text darauf (10.7:1). */
--c-accent-text: #d5e488;
--c-text: #222;
--c-surface: #f4f6ea; /* heller Fond der Inhaltssektionen */
/* Formular-Zustände. Kontrast geprüft: Fehler 6.54:1 und Erfolg 7.87:1
auf Weiß, Feldrahmen 4.83:1 (nötig wären 3:1 für Bedienelemente).
Farbe ist nirgends das alleinige Unterscheidungsmerkmal — zu jedem
Fehler gehört Klartext (WCAG 1.4.1). */
--c-error: #b3261e;
--c-success: #1b5e20;
--c-field-border: #6b7280;
/* Trennlinien im Menü */
--nav-hairline: rgb(255 255 255 / 0.35);
--nav-hairline-soft: rgb(255 255 255 / 0.15);
/* Maße */
--header-h: 110px; /* Höhe der Menüleiste (Desktop) */
--header-h-mobile: 68px; /* Kopfzeile mobil: Brand-Padding (2×0.5rem) + Wappen (46px breit → ~52px hoch). Bei Änderung dort mitziehen! */
/* Überstand des Logo-Blocks ins Hero. Bestimmt zugleich die Höhe von
.brand (= --header-h + dieser Wert) und damit den Innenraum für
Wappen + Wortmarke + Slogan. Nicht unter 58px senken: darunter reicht
der Platz nicht mehr für die Unterlängen des Schreibschrift-Slogans
(siehe Kommentar bei .brand__slogan). */
--brand-overlap: 58px;
--tap-target: 44px; /* Mindestgröße interaktiver Flächen */
/* Maximale Inhaltsbreite — gilt für JEDE Seite: Startseiten-Abschnitte,
Meldungsübersicht, Beiträge, Rechtsseiten, Footer. Dadurch stehen alle
Inhalte auf derselben linken und rechten Kante, und der Wechsel von der
Startseite auf eine Unterseite lässt nichts springen (Nutzerentscheidung
25.07.2026 — vorher lagen Startseite bei 1200px und Unterseiten bei
960px, ein Versatz von 120px je Seite, der wie ein Fehler wirkte).
Wird dieser Wert geändert, ändert sich die Website als Ganzes — das ist
beabsichtigt. Ausgenommen bleiben nur Bereiche mit eigener,
inhaltlich begründeter Breite: Leichte Sprache (kurze Zeilen sind dort
Teil der Sprachregeln) und das Melde-Formular. */
--breite-inhalt: 75rem;
/* Sticky-Shrink-Kopfzeile: .site-header.is-scrolled schaltet --header-h /
--header-h-mobile lokal auf diese Kompaktwerte um (Scoping nur im
Header-Teilbaum — .hero rechnet weiter mit den vollen Werten) */
--header-h-scrolled: 72px; /* kompakte Menüleiste (Desktop) */
--header-h-mobile-scrolled: 56px; /* obere Schranke mobil; real ~53px (2×0.25rem Padding + Wappen 40px breit → ~45px hoch) */
--header-scroll-threshold: 48px; /* Scroll-Offset, ab dem geschrumpft wird (= Höhe der Messlatte aus header.js) */
/* Animationsdauern. Achtung: --dur-panel und --dur-mega stecken
jeweils AUCH im visibility-Delay der zugehörigen Transition —
bei Änderung bleibt die Kopplung über den Token erhalten. */
--dur-micro: 0.15s; /* Hover-Farbwechsel */
--dur-arrow: 0.18s; /* Pfeil der Untermenü-Links */
--dur-chevron: 0.2s; /* Chevron-Rotation mobil */
--dur-bar: 0.22s; /* grüner Balken unterm Menüpunkt */
--dur-burger: 0.25s; /* Burger-Icon ⇄ X */
--dur-header: 0.3s; /* Sticky-Kopfzeile: Wechsel voll ⇄ kompakt (steckt auch im visibility-Delay des Slogans) */
--dur-mega-fade: 0.28s; /* Fade des Mega-Panels */
--dur-panel: 0.3s; /* Akkordeon mobil (grid-rows) */
--dur-mega: 0.32s; /* Vorhang (clip-path) des Mega-Panels */
--dur-slide: 1s; /* Crossfade der Hero-Slideshow (steckt auch im visibility-Delay) */
/* Schriften */
--font-sans: system-ui, "Segoe UI", Arial, sans-serif;
--font-script: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
/* Überschriften: DIN-1451-artig (Bahnschrift = Windows-DIN, Fallbacks je Plattform) */
--font-title: "Bahnschrift", "DIN Alternate", "Franklin Gothic Medium", "Arial Narrow", system-ui, sans-serif;
/* Wortmarke im Logo: humanistisch, rundere Formen (Nutzerwahl 21.07.2026 per Vergleich) */
--font-logo: "Candara", "Corbel", "Optima", "Segoe UI", system-ui, sans-serif;
}
/* ---------- Basis ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
/* Sticky-Shrink: Browser-Scroll-Anchoring würde beim Schrumpfen der
Kopfzeile den Scrollwert zurückkorrigieren → Endlos-Toggle an der
Schwelle. Unkritisch abschaltbar: alle Bilder haben width/height,
es gibt keine nachladenden Layout-Shift-Quellen. */
overflow-anchor: none;
/* Ankerziele (z. B. Skip-Link → #inhalt) nie unter der Sticky-Kopfzeile
verstecken — bewusst die vollen :root-Höhen, nicht die kompakten */
scroll-padding-block-start: var(--header-h-mobile);
/* Ankersprünge (z. B. „Nach oben" im Footer) gleiten sanft — außer der
Nutzer wünscht reduzierte Bewegung */
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
/* [breakpoint-desktop] */
@media (min-width: 1400px) {
scroll-padding-block-start: var(--header-h);
}
}
/* Gegenstück zum : legt die Farbwelt auch für vom
Browser gezeichnete Teile fest (Formularfelder, Scrollbalken, Auswahlfarbe).
Erst dadurch ist ausgeschlossen, dass ein automatischer Dunkelmodus die
Eingabefelder des Melde-Formulars dunkel einfärbt. */
:root {
color-scheme: light;
}
body {
margin: 0;
font-family: var(--font-sans);
color: var(--c-text);
background: #fff;
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
:focus-visible {
outline: 3px solid var(--c-primary);
outline-offset: 2px;
}
/* Skip-Link-Ziel: Fokusring auf dem nicht-interaktiven main unterdrücken */
#inhalt:focus-visible {
outline: none;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
animation-duration: 0.01ms !important;
}
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
inset-inline-start: -9999px;
inset-block-start: 0;
z-index: 100;
background: #fff;
color: var(--c-primary);
font-weight: 700;
padding: 0.75rem 1.25rem;
text-decoration: none;
&:focus {
inset-inline-start: 0;
}
}
/* ============================================================
Kopfbereich
============================================================ */
/* Unsichtbare Scroll-Messlatte (fügt header.js an den Body-Anfang ein):
verlässt sie den Viewport, wird .site-header kompakt (.is-scrolled) */
.header-sentinel {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 1px;
height: var(--header-scroll-threshold);
pointer-events: none;
}
.site-header {
position: sticky;
inset-block-start: 0;
z-index: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
/* Mobil trägt die Kopfzeile die Markenfarbe (Nutzerentscheidung 25.07.2026):
Ein weißer Block wirkte über dem blauen Menü und dem Hero wie ein
Fremdkörper. Mit dem Verlauf gehen Kopfzeile, aufgeklapptes Menü und
Suchfeld ineinander über. Im Desktop-Block unten wird der Hintergrund
wieder auf transparent gesetzt — dort trägt .brand den weißen Block mit
der geschwungenen Unterkante, und daran ändert sich nichts. */
background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
/* Startwert mit Alpha 0, damit der Schatten weich einblenden kann */
box-shadow: 0 6px 18px rgb(0 0 0 / 0);
transition: box-shadow var(--dur-header) ease;
/* Kompakt-Zustand: Höhen-Tokens NUR im Header-Teilbaum umschalten —
Brand, Menüleiste, Suche, Mega-Panel-Offset und Panel-max-height
folgen automatisch; .hero (Sibling) behält die vollen Werte,
die Hero-Höhe bleibt also beim Scrollen exakt stehen */
&.is-scrolled {
--header-h: var(--header-h-scrolled);
--header-h-mobile: var(--header-h-mobile-scrolled);
--brand-overlap: 0px;
box-shadow: 0 6px 18px rgb(0 0 0 / 0.15);
}
/* [breakpoint-desktop] 3-Zonen-Grid wie Vorlage; Logo- und Suchspalte
wachsen mit dem Viewport mit, damit die Menüleiste am unteren
Desktop-Rand nicht gequetscht wird */
@media (min-width: 1400px) {
display: grid;
grid-template-columns: minmax(280px, min(21vw, 400px)) minmax(0, 1fr) minmax(250px, min(20vw, 380px));
grid-template-rows: var(--header-h);
align-items: start;
background: transparent;
transition: box-shadow var(--dur-header) ease, grid-template-rows var(--dur-header) ease;
}
}
/* ---------- Logo-Block ---------- */
.brand {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
flex: 1 1 auto;
min-width: 0; /* Wortmarke darf schrumpfen, statt den Menü-Button umzubrechen */
transition: padding var(--dur-header) ease;
/* Kompakt (mobil): flachere Leiste — ergibt real ~53px Kopfzeilenhöhe */
.site-header.is-scrolled & {
padding-block: 0.25rem;
}
/* [breakpoint-desktop] */
@media (min-width: 1400px) {
position: relative;
z-index: 2; /* liegt wie in der Vorlage über dem Mega-Panel */
flex-direction: column;
justify-content: center;
gap: 0.4rem;
width: 100%;
height: calc(var(--header-h) + var(--brand-overlap));
/* Knapp bemessen: Wappen (81.6px) + gap + Slogan-Zeile müssen in den
Innenraum passen, sonst staucht Flexbox den Slogan und overflow:hidden
schneidet die Unterlängen ab (Fix 25.07.2026). */
padding-block: 0.25rem 2rem;
padding-inline: 1.75rem;
background: #fff;
/* Unterkante: sanft geschwungener Bogen wie in der Vorlage;
die gerade Diagonale bleibt als Fallback für Browser ohne shape() */
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
clip-path: shape(from 0 0, line to 100% 0, line to 100% calc(100% - 34px), curve to 0 100% with 55% 100%);
transition: height var(--dur-header) ease, padding var(--dur-header) ease,
gap var(--dur-header) ease, clip-path var(--dur-header) ease;
/* Kompakt (Desktop): kein Überhang, flache Unterkante. WICHTIG:
gleiche Kommandostruktur wie oben — shape()/polygon → none wäre
nicht animierbar, degenerierte Kurve/Punkte interpolieren weich */
.site-header.is-scrolled & {
padding-block: 0.5rem 0.6rem;
gap: 0;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0px), 0 100%);
clip-path: shape(from 0 0, line to 100% 0, line to 100% calc(100% - 0px), curve to 0 100% with 55% 100%);
}
}
}
.brand__link {
display: flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
flex: 1;
min-width: 0;
/* [breakpoint-desktop] */
@media (min-width: 1400px) {
width: 100%;
}
}
.brand__wappen {
width: 46px;
transition: width var(--dur-header) ease;
/* Kompakt (mobil) */
.site-header.is-scrolled & {
width: 40px;
}
/* [breakpoint-desktop] */
@media (min-width: 1400px) {
width: 72px;
/* Kompakt (Desktop) */
.site-header.is-scrolled & {
width: 44px;
}
}
}
/* Wortmarke als skalierendes Gesamtbild: textLength sperrt beide Zeilen
auf exakt gleiche Breite — plattformunabhängig, egal welcher Font greift.
aspect-ratio ist nötig, weil ein