/* =============================================================
WAZV Apfelstädt-Ohra — Design-System „Klarwasser"
Tokens → Basis → Komponenten → Overlays → Responsive
============================================================= */
/* ---------- Fonts (lokal, DSGVO-konform) ---------- */
@font-face {
font-family: "Schibsted Grotesk";
src: url("../fonts/schibsted-grotesk-v7-latin-regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Schibsted Grotesk";
src: url("../fonts/schibsted-grotesk-v7-latin-500.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Schibsted Grotesk";
src: url("../fonts/schibsted-grotesk-v7-latin-700.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Schibsted Grotesk";
src: url("../fonts/schibsted-grotesk-v7-latin-800.woff2") format("woff2");
font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Public Sans";
src: url("../fonts/public-sans-v21-latin-regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Public Sans";
src: url("../fonts/public-sans-v21-latin-600.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Public Sans";
src: url("../fonts/public-sans-v21-latin-700.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
}
/* =============================================================
1 — TOKENS
Alles, was mehr als einmal vorkommt, steht hier. Komponenten
greifen ausschließlich auf Tokens zu, nie auf rohe Werte.
============================================================= */
:root {
/* --- Marke: „Tiefwasser“-Blau ------------------------------ */
--blue-900: #0a1e46; /* dunkle Flächen: Footer, Notdienst, Topbar */
--blue-800: #0e2a63;
--blue-700: #123a8c; /* Logofarbe, Zahlen, Überschriften auf hell */
--blue-600: #1747ad; /* Primärfarbe: Buttons, Links */
--blue-500: #2e62d9; /* Hover auf hell */
--blue-100: #dbe6f9;
--blue-50: #eef3fc;
/* --- Akzent: „Quellwasser“-Aqua ---------------------------- */
--aqua-600: #1a7f9c; /* Icons mit Bedeutung — AA auf Weiß */
--aqua-400: #38b6d8; /* Flächen, Wellen, Diagramme */
--aqua-200: #a8e0ef;
/* --- Semantik ----------------------------------------------
Kein eigener Signalton für den Notfallpfad. Störung und
Notdienst werden nicht über eine zweite Farbe markiert,
sondern über Form: dunkle Fläche, Warnsymbol, kräftigere
Schrift. Ein Rot- oder Orangeton neben Marineblau und Aqua
hat sich als Fremdkörper gelesen. */
--alert-700: var(--blue-900); /* Notfalltext auf hell */
--alert-600: var(--blue-800); /* Symbole, Konturen */
--alert-100: var(--blue-100);
--alert-50: var(--blue-50);
--ok-600: #1e7f4f;
/* --- Neutrale: „Kiesel“ ------------------------------------ */
--ink-900: #16202e; /* Fließtext, Überschriften */
--ink-600: #46556b; /* Sekundärtext */
--ink-400: #5d6e86; /* gedämpfter Text — AA */
--ink-300: #8494ab; /* nur Deko: Chevrons, Platzhalter */
--line: #d8e0ea;
--line-soft: #e7edf5;
--paper: #ffffff;
--mist: #f4f7fb; /* getönte Sektionen */
/* --- Auf dunklem Grund ------------------------------------- */
--on-dark: #ffffff;
--on-dark-strong: #dce7fa;
--on-dark-muted: #a9bcdd; /* 7,0:1 auf --blue-900 */
--on-dark-line: rgba(255, 255, 255, .14);
--on-dark-fill: rgba(255, 255, 255, .08);
--on-dark-fill-hover: rgba(255, 255, 255, .16);
--on-dark-alert: var(--aqua-200); /* Notfallakzent auf dunklem Grund */
/* --- Typografie -------------------------------------------- */
--font-display: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
--font-text: "Public Sans", system-ui, -apple-system, sans-serif;
/* Eine Skala für die ganze Seite. Jede Schriftgröße im Stylesheet
greift auf eine dieser Stufen zu — Sondergrößen gibt es nicht.
`--fs-tiny` ist die Untergrenze: Darunter wird Text auf einem
Telefon nicht mehr zuverlässig gelesen.
Stufe Einsatz
display H1
h2 Sektionsüberschrift
h3 Unterüberschrift
h4 Karten- und Dialogtitel
lead Vorspann
body Fließtext, Eingabefelder
small Sekundärtext, dichte Bereiche
tiny Etiketten, Meta — kleinste Größe */
--fs-display: clamp(2.5rem, 1.7rem + 3.2vw, 3.9rem);
--fs-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.35rem);
--fs-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
--fs-h4: 1.125rem;
--fs-lead: clamp(1.1rem, 1rem + .5vw, 1.3rem);
--fs-body: 1.0625rem;
--fs-small: 0.9375rem;
--fs-tiny: 0.8125rem;
/* Zahlen stehen in der Display-Schrift und haben eigene Stufen —
eine Kennzahl ist keine Überschrift. */
--fs-num-xl: clamp(2.6rem, 2rem + 2vw, 3.6rem); /* Kennwert-Karte */
--fs-num-lg: clamp(1.5rem, 1.2rem + 1vw, 2rem); /* Kennzahlenleiste */
--fs-num: clamp(1.35rem, 1.1rem + 1.1vw, 1.7rem); /* Notdienstnummer */
--fs-num-sm: 1.25rem; /* Rufnummer in engen Kästen */
--lh-tight: 1.15;
--lh-snug: 1.35;
--lh-text: 1.65;
--tracking-tight: -0.02em;
--tracking-wide: 0.08em; /* Kapitälchen-Labels */
/* --- Abstände: 4-px-Basis ---------------------------------- */
--sp-1: .25rem; /* 4 */
--sp-2: .5rem; /* 8 */
--sp-3: .75rem; /* 12 */
--sp-4: 1rem; /* 16 */
--sp-5: 1.25rem; /* 20 */
--sp-6: 1.5rem; /* 24 */
--sp-7: 1.75rem; /* 28 */
--sp-8: 2rem; /* 32 */
--sp-10: 2.5rem; /* 40 */
--sp-12: 3rem; /* 48 */
--sp-14: 3.5rem; /* 56 */
--sp-16: 4rem; /* 64 */
--section-y: clamp(4rem, 8vw, 6.5rem);
/* --- Form -------------------------------------------------- */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--r-pill: 999px;
--r-round: 50%;
--bw: 1px; /* Standardkontur */
--bw-strong: 1.5px;
/* --- Elevation --------------------------------------------- */
--shadow-1: 0 1px 2px rgba(10, 30, 70, .06), 0 8px 24px rgba(10, 30, 70, .07);
--shadow-2: 0 2px 6px rgba(10, 30, 70, .08), 0 20px 48px rgba(10, 30, 70, .14);
--shadow-3: 0 4px 10px rgba(10, 30, 70, .10), 0 32px 60px rgba(10, 30, 70, .16);
--shadow-inset-line: inset 0 -1px 0 rgba(10, 30, 70, .06);
--shadow-raise: 0 1px 2px rgba(10, 30, 70, .12); /* gefüllte Buttons */
--shadow-bar: 0 1px 12px rgba(10, 30, 70, .07); /* eingerastete Leiste */
--scrim: rgba(10, 30, 70, .45); /* Grund hinter Dialogen */
/* --- Bewegung ---------------------------------------------- */
--dur-fast: .15s;
--dur-base: .2s;
--dur-slow: .3s;
--ease: cubic-bezier(.2, .6, .3, 1);
/* --- Ebenen ------------------------------------------------ */
--z-mega: 20;
--z-medallion: 30;
--z-header: 100;
--z-fab: 250;
--z-overlay: 300;
--z-toast: 400;
/* --- Raster ------------------------------------------------ */
--container: 1400px;
--gutter: clamp(1.25rem, 4vw, 2rem);
/* --- Header ------------------------------------------------ */
--header-h: 80px;
--header-h-stuck: 64px;
--logo-row-h: 48px; /* Querfassung, im Ruhezustand */
--topbar-h: 38px;
--header-lift: 0 14px 30px -14px rgba(5, 16, 40, .6); /* Leiste über dunklem Grund */
/* --- Fokus ------------------------------------------------- */
--focus: #2e62d9;
--focus-light: #a8e0ef;
--focus-w: 3px;
}
/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
/* Sprungziele landen unter dem Sticky-Header, nicht dahinter */
scroll-padding-top: calc(var(--header-h-stuck) + 1.5rem);
}
body {
margin: 0;
font-family: var(--font-text);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--ink-900);
background: var(--paper);
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 {
font-family: var(--font-display);
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 .6em;
color: var(--ink-900);
}
h1 { font-size: var(--fs-display); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0 0 1em; }
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: 4px;
}
/* Fokusring auf dunklen Flächen — Blau wäre dort unsichtbar */
.topbar :focus-visible,
.site-footer :focus-visible,
.wasserbote :focus-visible,
.contact-card.is-notdienst :focus-visible,
.chat-head :focus-visible { outline-color: var(--focus-light); }
body.nav-locked { overflow: hidden; }
/* Nur für Screenreader */
.visually-hidden {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Sprungziele der Sektionen */
[id] { scroll-margin-top: calc(var(--header-h-stuck) + 1.5rem); }
main:focus { outline: none; }
::selection { background: var(--blue-100); }
.container {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--blue-600); color: var(--on-dark);
padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0; z-index: 200;
}
.skip-link:focus { left: 0; }
/* =============================================================
3 — BUTTONS
Eine Basis, vier Varianten, drei Größen. Jede Größe hat eine
feste Mindesthöhe, damit Buttons nebeneinander immer bündig
sitzen — auch wenn ihre Labels unterschiedlich lang sind.
Variante Einsatz
primary die eine Hauptaktion je Bildschirm
secondary gleichwertige Nebenaktionen
alert Notfallpfad (Störung, Notdienst)
ghost Tertiär, in Fließtext und Sektionsköpfen
on-dark dieselbe Logik auf dunklen Flächen
Größe Höhe Einsatz
btn-lg 52px Hero
(Standard) 44px Header, Karten, Formulare
btn-sm 36px dichte Kontexte
============================================================= */
.btn {
--btn-h: 44px;
--btn-px: var(--sp-5);
display: inline-flex; align-items: center; justify-content: center;
gap: var(--sp-2);
min-height: var(--btn-h);
padding: 0 var(--btn-px);
border-radius: var(--r-sm);
border: var(--bw-strong) solid transparent;
font-family: var(--font-text);
font-weight: 600; font-size: var(--fs-small);
line-height: 1.2;
text-align: center; text-decoration: none;
cursor: pointer;
transition: background var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease),
color var(--dur-base) var(--ease),
box-shadow var(--dur-base) var(--ease),
transform var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled {
opacity: .5; pointer-events: none;
}
.btn svg { width: 18px; height: 18px; flex: none; }
/* Größen */
.btn-lg { --btn-h: 52px; --btn-px: var(--sp-7); font-size: var(--fs-body); }
.btn-lg svg { width: 20px; height: 20px; }
.btn-sm { --btn-h: 36px; --btn-px: var(--sp-4); font-size: var(--fs-tiny); }
.btn-sm svg { width: 16px; height: 16px; }
/* Icon-only — quadratisch, Label per aria-label */
.btn-icon { --btn-px: 0; width: var(--btn-h); }
/* Kreisform bleibt dem Siegel vorbehalten — Funktionselemente sind rechteckig. */
/* Varianten */
.btn-primary {
background: var(--blue-600); color: var(--on-dark);
box-shadow: var(--shadow-raise);
}
.btn-primary:hover { background: var(--blue-500); box-shadow: var(--shadow-1); }
.btn-primary:active { background: var(--blue-700); }
/* Die Kontur ist blau, nicht grau: Neben einem gefüllten Primärbutton sah
ein grau umrandeter aus wie abgeschaltet. Jetzt liest er sich als
gleichrangige zweite Aktion — gefüllt und umrandet, dieselbe Familie. */
.btn-secondary {
background: var(--paper); color: var(--blue-700);
border-color: var(--blue-500);
}
.btn-secondary:hover { background: var(--blue-50); border-color: var(--blue-600); }
.btn-secondary:active { background: var(--blue-100); }
/* Notfallpfad: kräftiger als „secondary“, aber ohne zweite Farbe —
die Kontur ist dicker und dunkler, das Warnsymbol trägt die Bedeutung. */
.btn-alert {
background: var(--paper); color: var(--blue-900);
border-color: var(--blue-900);
}
.btn-alert:hover { background: var(--blue-50); }
.btn-alert:active { background: var(--blue-100); }
.btn-ghost {
background: none; color: var(--blue-600);
--btn-px: var(--sp-3);
}
.btn-ghost:hover { background: var(--blue-50); }
.btn-on-dark {
background: var(--on-dark-fill); color: var(--on-dark);
border-color: var(--on-dark-line);
}
.btn-on-dark:hover { background: var(--on-dark-fill-hover); }
/* Umgekehrte Hauptaktion: auf dunklem Grund trägt Weiß, nicht Blau. */
.btn-invert {
background: var(--paper); color: var(--blue-700);
box-shadow: var(--shadow-raise);
}
.btn-invert:hover { background: var(--blue-50); box-shadow: var(--shadow-1); }
.btn-invert:active { background: var(--blue-100); }
/* Notfallpfad auf dunklem Grund — Rot bleibt als Signal erkennbar,
ohne dass zwei weiße Flächen nebeneinander konkurrieren. */
.btn-alert-on-dark {
background: var(--on-dark-fill); color: var(--on-dark);
border-color: rgba(168, 224, 239, .45);
}
.btn-alert-on-dark:hover { background: var(--on-dark-fill-hover); border-color: var(--aqua-200); }
.btn-alert-on-dark svg:first-child { color: var(--aqua-200); }
/* Pfeil-Icons wandern beim Hover mit — gilt für alle Varianten */
.btn .arrow { transition: transform var(--dur-base) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
/* =============================================================
4 — TEXTLINK MIT PFEIL
„Alle Services →“ in Sektionsköpfen, Karten und Footer.
============================================================= */
.link-arrow {
display: inline-flex; align-items: center; gap: var(--sp-2);
font-weight: 600; font-size: var(--fs-small);
color: var(--blue-600);
white-space: nowrap;
}
.link-arrow svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur-base) var(--ease); }
.link-arrow .ext-icon { width: 13px; height: 13px; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow:hover svg { transform: translateX(3px); }
/* =============================================================
2c — IKONOGRAFIE
Ein Satz, eine Stärke, eine Farbe. Grundlage: Phosphor Icons in
der Schnittstärke „Bold" (MIT-Lizenz, Lizenztext in
assets/img/LIZENZ-ICONS.txt). Als Flächen gezeichnet — dadurch
laufen beim Skalieren keine Strichstärken auseinander.
Bewusst einfarbig: Zweifarbige Symbole wirken bei 20–28 px
schmutzig statt klar, und die Zweifarbigkeit ist selbst ein
Moderauschen. Das Farbspiel trägt die Marke, nicht das Symbol.
============================================================= */
.icon-sprite { display: none; }
.icon {
width: 1.15em; height: 1.15em;
flex: none;
fill: currentColor;
vertical-align: -0.16em;
}
/* Externe Ziele kennzeichnen: Nutzer sollen wissen, wann sie die Seite
verlassen. In Fließtext und Listen als kleines Symbol hinter dem Wort. */
.ext-icon {
display: inline-block; width: 13px; height: 13px;
flex: none; opacity: .7; vertical-align: -1px; margin-left: .3rem;
}
/* Im Knopf ist das Symbol kein Anhängsel am letzten Buchstaben, sondern
steht durch eine Trennlinie abgesetzt am Ende — sonst liest es sich wie
ein verrutschter Buchstabe. */
.btn.is-ext { padding-right: var(--sp-3); }
.btn.is-ext .ext-icon {
width: 15px; height: 15px; opacity: 1;
margin-left: var(--sp-3); padding-left: var(--sp-3);
border-left: var(--bw) solid var(--line);
box-sizing: content-box;
}
/* =============================================================
2b — TOPBAR
Trägt genau zwei Dinge: Notdienst und Sprechzeiten.
============================================================= */
.topbar {
background: var(--blue-900);
color: var(--on-dark-strong);
font-size: var(--fs-tiny);
}
.topbar-inner {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-4); min-height: var(--topbar-h); padding-block: var(--sp-1);
}
.topbar a { color: var(--on-dark); font-weight: 600; }
.topbar-group { display: flex; align-items: center; gap: var(--sp-6); }
.topbar-item { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.topbar-item svg { width: 14px; height: 14px; opacity: .75; flex: none; }
.topbar .notdienst { color: var(--aqua-200); }
.topbar .notdienst a { color: var(--on-dark); }
/* =============================================================
5 — HEADER
Warum der Überstand jetzt funktioniert: Das Siegel ist weiß
gesäumt und die Fläche darunter ist dunkel. Dadurch liest sich
der Kreis nicht als aufgeklebter Aufkleber, sondern als
Ausbuchtung der weißen Leiste — oben gibt es keine Kante,
weil Saum und Leiste dieselbe Farbe haben, unten steht ein
sauberer Halbkreis im Dunkeln. Genau die ruhige Kante, die den
früheren Versuchen gefehlt hat.
Beim Scrollen zieht sich das Siegel als Bildmarke in die Leiste
zurück und der Überstand verschwindet.
============================================================= */
.site-header {
position: sticky; top: 0; z-index: var(--z-header);
background: var(--paper);
border-bottom: var(--bw) solid var(--line);
transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-bar); }
/* Ruhezustand über der dunklen Einstiegsfläche: dort trägt kein
heller Strich, sondern ein Schlagschatten die Kante. */
body:has(.hero) .site-header:not(.is-stuck) {
border-bottom-color: transparent;
box-shadow: var(--header-lift);
}
/* Drei Spalten: Marke links, Navigation exakt mittig, Aktionen rechts.
Die Navigation sitzt in der Bildmitte, unabhängig davon, wie breit
Logo und Aktionen sind. */
.header-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center; gap: var(--sp-6);
/* Spalten fest zuweisen: Sobald die Navigation ausgeblendet ist
(kleine Bildschirme), rutschten die Aktionen sonst in die mittlere
Spalte statt an den rechten Rand. */
grid-template-areas: "brand nav actions";
min-height: var(--header-h);
transition: min-height var(--dur-slow) var(--ease);
}
.site-header.is-stuck .header-inner { min-height: var(--header-h-stuck); }
/* Zwei Fassungen desselben Logos, je nach verfügbarer Höhe:
Im Ruhezustand steht die Querfassung — sie bringt den Verbandsnamen
in Klarschrift mit und füllt die Breite, die neben der Navigation
ohnehin frei ist. Rastet die Leiste beim Scrollen ein, übernimmt das
quadratische Siegel: Es braucht nur ein Viertel der Breite und ist
als Marke ohnehin das stärkere Zeichen.
Kein Träger, kein Ring, kein Überstand — beide Fassungen stehen
vollständig in der Leiste. */
.brand {
grid-area: brand;
display: flex; align-items: center;
height: var(--header-h-stuck);
justify-self: start;
}
.brand:focus-visible { outline-offset: 4px; border-radius: var(--r-sm); }
.brand img { display: none; width: auto; }
.brand .logo-row, .brand .logo-row-compact { height: var(--logo-row-h); }
/* Ruhezustand: Querfassung */
.brand .logo-row { display: block; }
/* Eingerastet bleibt dasselbe Logo, nur kleiner. Ein Wechsel auf die
Bildmarke ließ die Leiste beim Scrollen mit einem namenlosen Zeichen
zurück — der Verbandsname soll auch dort stehen. */
.site-header.is-stuck { --logo-row-h: 36px; }
.main-nav { grid-area: nav; justify-self: center; }
/* ---------- Hauptnavigation + Mega-Menü ---------- */
/* Mittige Ausrichtung übernimmt das Header-Raster */
.main-nav > ul {
display: flex; align-items: center; gap: .1rem; flex-wrap: nowrap;
list-style: none; margin: 0; padding: 0;
}
.nav-item > a,
.nav-item > button {
display: inline-flex; align-items: center; gap: .35rem;
white-space: nowrap;
padding: var(--sp-2) var(--sp-3);
border: 0; background: none;
border-radius: var(--r-sm);
font-weight: 600; font-size: var(--fs-small); color: var(--ink-900);
text-decoration: none;
transition: background .15s ease-out, color .15s ease-out;
}
.nav-item > a:hover,
.nav-item > button:hover,
.nav-item.is-open > button {
background: var(--blue-50); color: var(--blue-700); text-decoration: none;
}
.nav-item > button .chev {
width: 16px; height: 16px; flex: none;
color: var(--ink-300);
transition: transform .18s ease-out;
}
.nav-item > button:hover .chev { color: currentColor; }
.nav-item.is-open > button .chev { transform: rotate(180deg); color: currentColor; }
.mega {
position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-mega);
background: var(--paper);
border-bottom: var(--bw) solid var(--line);
box-shadow: var(--shadow-2);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
}
.nav-item.is-open > .mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* Nur Menüpunkte, keine Empfehlungskarte. Die Spalten bekommen eine feste
Höchstbreite und stehen links, statt sich über die volle Containerbreite
zu ziehen — sonst stünden bei zwei Spalten zwei sehr breite Blöcke da. */
.mega-grid {
display: grid;
grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 320px));
justify-content: start;
gap: var(--sp-12) var(--sp-10);
padding-block: var(--sp-8) var(--sp-10);
}
.mega-label {
font-family: var(--font-text);
font-size: var(--fs-small); font-weight: 700;
color: var(--ink-900); margin: 0 0 var(--sp-3);
padding-bottom: var(--sp-2);
border-bottom: var(--bw) solid var(--line-soft);
}
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mega ul a {
display: block; padding: var(--sp-2) var(--sp-3); margin-inline: calc(var(--sp-3) * -1);
border-radius: var(--r-sm);
color: var(--ink-900); font-weight: 500; font-size: var(--fs-small);
}
.mega ul a:hover { background: var(--blue-50); color: var(--blue-700); text-decoration: none; }
.mega ul a small { display: block; color: var(--ink-400); font-weight: 400; font-size: var(--fs-tiny); }
/* --- Header-Aktionen ---------------------------------------- */
.header-actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: var(--sp-3); }
.header-actions .btn { white-space: nowrap; }
/* Quadratische Icon-Schaltflächen im Header (Suche, Menü) */
.icon-btn, .nav-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; flex: none;
background: var(--paper);
border: var(--bw) solid var(--line);
border-radius: var(--r-sm);
color: var(--ink-900);
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.icon-btn:hover, .nav-toggle:hover { background: var(--mist); border-color: var(--ink-300); }
.icon-btn svg { width: 20px; height: 20px; }
.nav-toggle { display: none; }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
/* Sucheintrag im ausgeklappten Menü (nur kleine Screens) */
.nav-search { display: none; }
.nav-search button {
display: flex; align-items: center; gap: var(--sp-3);
width: 100%; padding: var(--sp-3) var(--sp-4); margin-block: var(--sp-2);
background: var(--mist); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
color: var(--ink-600); font-size: var(--fs-body); text-align: left;
}
.nav-search button svg { width: 18px; height: 18px; flex: none; color: var(--blue-600); }
/* ---------- Hinweisband (Störungen) ---------- */
/* Betriebsmeldung als Popup. Ein Band im Seitenkopf wurde überlesen
oder las sich als Zierstreifen; eine zeitkritische Meldung darf
unterbrechen. Dafür merkt sie sich das Wegklicken für die Sitzung
und ist über Esc, Hintergrundklick und zwei Knöpfe zu schließen. */
.notice-modal {
position: fixed; inset: 0; z-index: var(--z-overlay);
display: flex; align-items: center; justify-content: center;
padding: var(--gutter);
background: var(--scrim);
}
.notice-modal[hidden] { display: none; }
.notice-panel {
position: relative;
width: min(520px, 100%);
max-height: calc(100dvh - 3rem);
overflow-y: auto;
padding: var(--sp-8);
background: var(--paper);
border-radius: var(--r-md);
box-shadow: var(--shadow-3);
}
.notice-kicker {
display: flex; align-items: center; gap: var(--sp-2);
margin: 0 0 var(--sp-3);
font-size: var(--fs-tiny); font-weight: 700; color: var(--blue-700);
}
.notice-kicker svg { width: 17px; height: 17px; }
.notice-kicker time { font-weight: 400; color: var(--ink-400); }
.notice-panel h2 { font-size: var(--fs-h3); margin: 0 0 var(--sp-3); }
.notice-panel p { color: var(--ink-600); line-height: var(--lh-text); }
.notice-actions {
display: flex; flex-wrap: wrap; gap: var(--sp-3);
margin-top: var(--sp-6);
}
.notice-x {
position: absolute; top: var(--sp-4); right: var(--sp-4);
width: 34px; height: 34px; border-radius: var(--r-sm);
border: 0; background: none; color: var(--ink-400);
display: flex; align-items: center; justify-content: center;
}
.notice-x svg { width: 16px; height: 16px; }
.notice-x:hover { background: var(--mist); color: var(--ink-900); }
@media (max-width: 640px) {
.notice-panel { padding: var(--sp-6); }
.notice-actions .btn { width: 100%; }
}
/* =============================================================
6 — HERO
Die Einstiegsfläche ist dunkel. Das hat drei Gründe: Der weiße
Kopfbereich bekommt eine Kante, das weiße Siegel steht frei
darauf, und die Marke darf einmal groß auftreten, bevor die
Seite in den sachlichen Teil übergeht.
Deko ist nur das Wellenzeichen aus dem Siegel — einmal, groß,
angeschnitten. Kein gekacheltes Band, kein Wasserzeichen mit
Umschrift (die las sich als Buchstabenrauschen).
============================================================= */
.hero {
position: relative;
overflow: hidden;
color: var(--on-dark);
/* Flächige Farbe, kein Verlauf — Tiefe kommt aus den gestaffelten
Wellen, nicht aus einem Farbübergang. */
background: var(--blue-900);
}
/* Fokusring: Blau wäre auf dieser Fläche unsichtbar */
.hero :focus-visible { outline-color: var(--focus-light); }
/* --- Optionales Hintergrundbild -----------------------------
Ein Foto ist im Hero erlaubt, aber an Bedingungen geknüpft:
Es muss vom Verbandsgebiet sein (Ohra-Talsperre, Wasserwerk,
Kanalnetz) — ein Stockfoto mit Wassertropfen wäre austauschbar
und damit genau das, was die Seite sonst vermeidet.
Einsetzen: ![]()
als erstes Kind von
.hero, und .hero die Klasse `has-photo` geben. Dann tritt das
Wasserzeichen zurück (zwei Bildebenen wären eine zu viel) und
ein flächiger Schleier hält den Text lesbar. Kein Verlauf —
eine durchgehende Fläche altert nicht und hält die Kante zur
Leiste sauber.
Das Bild gehört lokal ins Projekt (keine externen Requests),
als WebP unter ~250 KB, Motiv rechts, damit die linke Hälfte
ruhig bleibt. */
.hero-photo {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: 58% 50%;
}
/* Der Schleier ist links dicht und wird nach rechts durchlässig: Der Text
bekommt eine ruhige Fläche, das Motiv bleibt dort sichtbar, wo nichts
steht. Das ist die eine Stelle, an der ein Verlauf richtig ist — er
gehört zum Bild, nicht zu einer Bedienfläche. */
.hero.has-photo::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(90deg,
rgba(9, 26, 60, .97) 0%,
rgba(9, 26, 60, .96) 38%,
rgba(9, 26, 60, .82) 58%,
rgba(9, 26, 60, .56) 80%,
rgba(9, 26, 60, .44) 100%);
}
/* Auf schmalen Bildschirmen steht der Text über der ganzen Breite —
dort deckt der Schleier durchgehend. */
@media (max-width: 900px) {
.hero.has-photo::after { background: rgba(9, 26, 60, .93); }
}
.hero.has-photo > .container { position: relative; z-index: 2; }
.hero.has-photo .stats { background: rgba(8, 22, 52, .72); z-index: 2; }
/* --- Optionales Hintergrundbild -----------------------------
Ein Foto ist im Hero erlaubt, aber an Bedingungen geknüpft:
Es muss vom Verbandsgebiet sein (Ohra-Talsperre, Wasserwerk,
Kanalnetz) — ein Stockfoto mit Wassertropfen wäre austauschbar
und damit genau das, was die Seite sonst vermeidet.
Einsetzen: ![]()
als erstes Kind von
.hero, und .hero die Klasse `has-photo` geben. Dann tritt das
Wasserzeichen zurück (zwei Bildebenen wären eine zu viel) und
ein flächiger Schleier hält den Text lesbar. Kein Verlauf —
eine durchgehende Fläche altert nicht und hält die Kante zur
Leiste sauber.
Das Bild gehört lokal ins Projekt (keine externen Requests),
als WebP unter ~250 KB, Motiv rechts, damit die linke Hälfte
ruhig bleibt. */
.hero-photo {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: 58% 50%;
}
/* Der Schleier ist links dicht und wird nach rechts durchlässig: Der Text
bekommt eine ruhige Fläche, das Motiv bleibt dort sichtbar, wo nichts
steht. Das ist die eine Stelle, an der ein Verlauf richtig ist — er
gehört zum Bild, nicht zu einer Bedienfläche. */
.hero.has-photo::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(90deg,
rgba(9, 26, 60, .97) 0%,
rgba(9, 26, 60, .96) 38%,
rgba(9, 26, 60, .82) 58%,
rgba(9, 26, 60, .56) 80%,
rgba(9, 26, 60, .44) 100%);
}
/* Auf schmalen Bildschirmen steht der Text über der ganzen Breite —
dort deckt der Schleier durchgehend. */
@media (max-width: 900px) {
.hero.has-photo::after { background: rgba(9, 26, 60, .93); }
}
.hero.has-photo > .container { position: relative; z-index: 2; }
.hero.has-photo .stats { background: rgba(8, 22, 52, .72); z-index: 2; }
/* Das Verbandssiegel als Wasserzeichen. Es steht bewusst groß und
angeschnitten: Erst ab dieser Größe liest sich die Umschrift als
Schrift. Klein und blass wird daraus Buchstabenrauschen. */
.hero-inner {
position: relative; z-index: 2; /* über der Deko und der Kennzahlenleiste */
padding-block: clamp(4.5rem, 9vw, 7rem) clamp(2.75rem, 5vw, 4rem);
max-width: 46rem;
}
.hero h1 { color: var(--on-dark); max-width: 17ch; margin-bottom: var(--sp-5); }
.hero .lead {
font-size: var(--fs-lead);
color: var(--on-dark-strong); max-width: 48ch;
margin-bottom: var(--sp-8);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Die Betriebsmeldung steht nicht mehr im Hero, sondern im Hinweisband
direkt unter der Leiste (Abschnitt 5). Im Einstiegstext war sie entweder
eine überlesbare Fußnote oder ein Kasten, der wie ein Template aussah. */
/* Kennzahlen-Leiste — schließt die dunkle Fläche nach unten ab */
.stats {
position: relative; z-index: 1;
border-top: var(--bw) solid var(--on-dark-line);
background: var(--blue-900); /* deckt das Wasserzeichen an der Linie ab */
}
.stats-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
padding-block: var(--sp-7);
gap: var(--sp-6);
}
/* Getrennt wird durch echte Spaltenlinien, nicht durch Akzentbalken */
.stat { padding-right: var(--sp-6); border-right: var(--bw) solid var(--on-dark-line); }
.stat:last-child { border-right: 0; padding-right: 0; }
.stat b {
display: block;
font-family: var(--font-display); font-weight: 800;
font-size: var(--fs-num-lg);
letter-spacing: -0.02em;
color: var(--on-dark);
}
.stat span { font-size: var(--fs-small); color: var(--on-dark-muted); }
/* =============================================================
8 — SEKTIONEN
============================================================= */
.section { padding-block: var(--section-y); }
.section.tinted { background: var(--mist); }
.section-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--sp-8); margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head h2 { margin-bottom: var(--sp-2); }
.section-head p { color: var(--ink-600); max-width: 52ch; margin: 0; }
/* Der Verweis neben der Überschrift ist ein Knopf: Er führt aus der Sektion
heraus auf eine eigene Seite und ist damit eine Aktion, keine Fußnote.
In den Karten bleibt der Textlink — dort ist die Karte selbst das Ziel.
Er steht allein und ist deshalb `btn-primary` (siehe Regel im
Design-System: `btn-secondary` gibt es nur als zweiten Knopf neben
einem gefüllten). */
.section-head .btn { flex: none; }
/* =============================================================
9 — KARTEN
Drei Ausprägungen auf einer gemeinsamen Grundform: Service-Kachel
(Aktion), News-Karte (Meldung), Kontaktkarte (Information).
Gleiche Kontur, gleicher Radius, gleiches Hover-Verhalten.
============================================================= */
.card,
.tile,
.news-card,
.contact-card {
background: var(--paper);
border: var(--bw) solid var(--line);
border-radius: var(--r-md);
color: var(--ink-900);
}
/* Anklickbare Karten heben sich beim Zeigen leicht an */
.tile, .news-card {
transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
/* Beim Zeigen bleibt die Fläche weiß. Eingefärbt sah die Karte aus, als
wäre sie ausgewählt; getönt wirkte sie stumpf. Es reagieren nur Kontur
und Schatten — die Karte tritt hervor, ohne die Farbe zu wechseln. */
.tile:hover, .news-card:hover {
text-decoration: none;
border-color: var(--blue-600);
box-shadow: var(--shadow-2);
}
.tile:hover .link-arrow,
.news-card:hover .link-arrow { text-decoration: underline; text-underline-offset: 3px; }
.tile:hover .link-arrow svg,
.news-card:hover .link-arrow svg { transform: translateX(3px); }
/* --- Service-Kacheln --------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.tile {
position: relative;
display: flex; flex-direction: column; gap: var(--sp-3);
padding: var(--sp-7);
}
.tile h3 { margin: 0; font-size: var(--fs-h4); }
.tile p { margin: 0; font-size: var(--fs-small); color: var(--ink-600); flex: 1; }
.tile .btn, .news-card .btn { align-self: flex-start; margin-top: auto; }
/* Symbolfläche — auch in Mega-Menü und Suchergebnissen im Einsatz */
.icon-tile {
display: inline-flex; align-self: flex-start;
color: var(--blue-600); flex: none;
}
.icon-tile svg { width: 28px; height: 28px; }
/* In „Was können wir für Sie tun?" sind alle sechs Kacheln gleichwertig.
Der Notfallpfad wird dort nicht hervorgehoben — er hat seine eigenen
Orte: Topbar, Hero, Kontaktkarte, Footer. */
/* --- Meldungen ---------------------------------------------- */
/* Sechs Karten, zwei Reihen: fünf Meldungen und als sechste die aktuelle
Ausgabe des Wasserboten. Sie liegt damit im selben Raster, unterscheidet
sich aber durch ihr Titelbild. */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
/* Die sechste Karte ist die Verbandszeitung: dunkelblau, damit sie sich als
anderer Inhaltstyp zu erkennen gibt, und mit dem **Zeitungskopf** als Band
oben. Eine ganze Titelseite ist bei gut 100 px Breite nicht lesbar — sie
wird zum Fleck, egal wie man sie beschneidet oder einpasst. Der Kopf ist
der Teil, der die Zeitung ausmacht, und er trägt auch klein. */
.news-card.is-heft {
padding: 0; overflow: hidden;
background: var(--blue-900);
border-color: var(--blue-900);
color: var(--on-dark-strong);
}
.news-card.is-heft:hover { border-color: var(--aqua-400); }
.news-kopf {
width: 100%; height: auto; display: block;
background: var(--paper);
border-bottom: var(--bw) solid var(--on-dark-line);
}
.news-body {
display: flex; flex-direction: column; gap: var(--sp-3);
min-width: 0; flex: 1; padding: var(--sp-6);
}
.news-card.is-heft .badge { background: var(--paper); color: var(--blue-900); }
.news-card.is-heft .news-date { color: var(--on-dark-muted); border-color: var(--on-dark-line); }
.news-card.is-heft h3 { color: var(--on-dark); }
.news-card.is-heft p { color: var(--on-dark-muted); }
.news-card.is-heft .link-arrow { color: var(--aqua-200); }
.news-card.is-heft :focus-visible { outline-color: var(--focus-light); }
.news-card {
position: relative;
display: flex; flex-direction: column; gap: var(--sp-3);
padding: var(--sp-6);
}
.news-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
font-size: var(--fs-tiny); color: var(--ink-400);
}
/* Die Kategorie ist eine volle Pille in ihrer Farbe — sie soll die Art der
Meldung auf einen Blick zeigen. Das Datum bleibt daneben zurückhaltend,
sonst konkurrieren zwei Etiketten um dieselbe Aufmerksamkeit. */
.news-meta .badge {
display: inline-flex; align-items: center; gap: var(--sp-2);
padding: 5px var(--sp-3);
border-radius: var(--r-pill);
color: var(--on-dark);
line-height: 1.35;
}
.news-meta .badge svg { width: 14px; height: 14px; }
.news-date {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px var(--sp-3);
border: var(--bw) solid var(--line); border-radius: var(--r-pill);
color: var(--ink-400); line-height: 1.35;
}
.news-date svg { width: 14px; height: 14px; }
/* Meldungsarten unterscheiden sich über Stufen derselben Farbe, nicht über
neue Farben: Baumaßnahme dunkel (greift ins Netz ein), Bekanntmachung
Markenblau (formal), Trinkwasser Aqua (Produkt). */
.news-card.is-bau .badge { background: var(--blue-900); }
.news-card.is-amt .badge { background: var(--blue-600); }
.news-card.is-wasser .badge { background: var(--aqua-600); }
.news-card.is-abwasser .badge { background: var(--ink-600); }
/* Der Verweis steht am Fuß, immer auf gleicher Höhe. */
.news-card .link-arrow, .tile .link-arrow { margin-top: auto; align-self: flex-start; }
.news-card h3 { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-snug); }
.news-card p { margin: 0; font-size: var(--fs-small); color: var(--ink-600); flex: 1; }
.badge { font-size: var(--fs-tiny); font-weight: 700; color: var(--blue-700); }
.news-meta .badge + time::before {
content: ""; display: inline-block;
width: 3px; height: 3px; margin-inline: var(--sp-1) var(--sp-2);
border-radius: var(--r-round); background: var(--ink-300);
vertical-align: middle;
}
/* Kundenzeitung — dunkle Variante der Karte */
/* Die Kundenzeitung stand als vierte Karte im Meldungsraster und ging
dort unter: gleiche Größe, gleiche Form, anderer Inhaltstyp. Jetzt ein
eigener Block unter den Meldungen — volle Breite, dunkel, mit echten
Knöpfen statt eines Textlinks, der in einer dunklen Fläche verschwindet. */
/* =============================================================
10 — THEMENBLOCK WASSER
============================================================= */
.water-grid {
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--sp-14);
align-items: center;
}
/* Der Container ist breit genug, dass diese Spalte sonst 85 Zeichen
pro Zeile bekäme — lesbar sind etwa 65. */
.water-copy > p, .water-copy .checklist { max-width: 64ch; }
.checklist { list-style: none; margin: var(--sp-5) 0 var(--sp-7); padding: 0; display: grid; gap: var(--sp-3); }
.checklist li {
display: flex; gap: var(--sp-3); align-items: flex-start;
color: var(--ink-600); font-size: var(--fs-small);
}
.checklist svg { width: 19px; height: 19px; color: var(--aqua-600); flex: none; margin-top: 3px; }
/* Kennwert-Karte — auch für weitere Werte (Druck, Verbrauch) nutzbar */
.value-card {
background: var(--paper);
border: var(--bw) solid var(--line);
border-radius: var(--r-lg);
padding: var(--sp-8);
box-shadow: var(--shadow-1);
}
.value-card .label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink-600); }
.value-card .value {
font-family: var(--font-display); font-weight: 800;
font-size: var(--fs-num-xl);
letter-spacing: -0.03em;
color: var(--blue-700);
line-height: 1.05;
margin: var(--sp-2) 0 var(--sp-1);
}
.value-card .sub { color: var(--ink-600); font-size: var(--fs-small); margin-bottom: var(--sp-5); }
.value-card .hint {
font-size: var(--fs-small); color: var(--ink-600);
background: var(--blue-50); border-radius: var(--r-sm);
padding: var(--sp-3) var(--sp-4); margin: 0;
}
.scale { display: flex; gap: 5px; margin-bottom: var(--sp-2); }
.scale i { height: 8px; flex: 1; border-radius: 4px; background: var(--blue-100); font-style: normal; }
.scale i.active { background: var(--aqua-400); }
.scale-caption {
display: flex; justify-content: space-between;
font-size: var(--fs-tiny); color: var(--ink-400); margin-bottom: var(--sp-5);
}
/* =============================================================
10b — VERBAND
Bewusst kein weiteres Kachelraster: Die sechs Service-Kacheln haben
diese Form schon. Hier eine Liste mit Trennlinien — dasselbe Mittel
wie die Spaltenlinien in der Kennzahlenleiste.
============================================================= */
.verband-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--sp-14); align-items: center;
}
.verband-grid > div > p { max-width: 56ch; margin-bottom: var(--sp-5); }
.verband-ot {
padding-top: var(--sp-5);
border-top: var(--bw) solid var(--line);
font-size: var(--fs-small); color: var(--ink-600); line-height: var(--lh-snug);
}
.verband-ot b { color: var(--ink-900); font-weight: 600; }
.verband-grid .hero-actions { margin-top: var(--sp-7); }
/* Die Gebietskarte übernimmt die Form der Kennwert-Karte: heller Kasten
auf getöntem Grund. Sie beantwortet die Frage, die man bei einem
Zweckverband zuerst hat — gehöre ich dazu?
Die Skizze ist ausdrücklich schematisch. Eine ungenaue Karte, die wie
eine genaue aussieht, ist schlimmer als keine: Man prüft daran seine
Adresse. Deshalb weiche Form, keine Gemeindegrenzen, Hinweis darunter
und die Telefonnummer für den Zweifelsfall. */
/* Rechts steht nur die Karte. Überschrift, Ortsliste und Hinweis standen
vorher im selben Kasten und machten daraus ein Datenblatt — die Karte
spricht für sich, der Text gehört in die Spalte daneben. */
/* Kein Kasten hinter der Karte: Der weiße Rahmen machte aus der Karte ein
Dokument in einem Dokument. Sie steht jetzt direkt auf der Sektionsfläche. */
.area-card { background: none; border: 0; padding: 0; }
.area-map { width: 100%; height: auto; display: block; }
/* Die übrigen 26 Gemeinden des Landkreises sind weg. Sie waren Hintergrund
ohne Aussage; übrig bleibt, was dem Verband gehört und was ihn versorgt:
Gebiet, Wasser, Anlagen. Den Namen liefert der native Tooltip aus dem
jedes Elements. */
/* Der Landkreis ist vollständig zu sehen und als Umriss erkennbar: eine
kräftigere Außenkontur für den Kreis, feine Linien für die Gemeinden
darin, keine Flächen. Angeschnitten wirkte er wie ein Ausschnitt aus
irgendetwas; ganz gezeigt trägt der Umriss selbst die Erkennbarkeit,
ohne dass eine Beschriftung nötig wäre. */
/* Auch hier zählt die Reihenfolge: Die Fläche des Landkreises liegt ganz
unten, dann die hellen Gemeindelinien, und erst darüber die Kreisgrenze.
Andersherum zeichneten die Gemeindelinien über die Kreisgrenze und
ließen sie ausgefranst aussehen — die äußeren Gemeinden teilen sich
ihre Grenze ja mit dem Kreis. */
.area-kreis-fill { fill: var(--paper); stroke: none; }
.area-kreis {
fill: none; stroke: var(--ink-300); stroke-width: 3.5;
stroke-linejoin: round; stroke-linecap: round;
}
.area-rest {
fill: none; stroke: var(--line-soft); stroke-width: 1.8; stroke-linejoin: round;
}
/* Die fünf Mitgliedsflächen grenzen aneinander. Zeichnet jede ihre eigene
Kontur, liegen an den gemeinsamen Rändern zwei Striche übereinander und
das Gebiet sieht zerstückelt aus. Deshalb: erst alle Konturen, dann alle
Füllungen darüber. Die inneren Linien verschwinden unter der Füllung des
Nachbarn, sichtbar bleibt nur die Außenkante des Verbandsgebiets. */
.area-outline {
fill: none; stroke: var(--blue-600); stroke-width: 6; stroke-linejoin: round;
}
.area-shape {
fill: var(--blue-100); stroke: none;
transition: fill var(--dur-fast) var(--ease);
}
.area-shape:hover { fill: var(--blue-200, #c3d6f5); }
/* Zwei Zuständigkeiten, zwei Töne: In Gräfenhain und Nauendorf ist der
Verband nur für das Abwasser zuständig. Die Karte darf das nicht
verschweigen — sonst wählt dort jemand bei einem Trinkwasserproblem
die falsche Nummer. */
.area-aw {
fill: var(--aqua-200); stroke: var(--aqua-600); stroke-width: 2.5;
stroke-linejoin: round;
transition: fill var(--dur-fast) var(--ease);
}
.area-aw:hover { fill: var(--aqua-400); }
.area-lake { fill: var(--aqua-400); stroke: none; }
.area-river { fill: none; stroke: var(--aqua-400); stroke-width: 5; stroke-linecap: round; }
/* Anlagen des Verbandes: gefüllter Punkt mit weißem Saum, damit er auch
über einer Fläche steht. Die Talsperre gehört der Thüringer
Fernwasserversorgung und ist deshalb nur Wasserfläche, kein Anlagenpunkt. */
.poi circle { stroke: var(--mist); stroke-width: 4; }
.poi.is-haus circle { fill: var(--blue-900); }
.poi.is-ka circle { fill: var(--blue-600); }
/* Legende in der Karte, nicht darunter: Der Kasten soll nur die Karte
enthalten, und ein Punkt ohne Erklärung ist ein Rätsel. */
.map-legend text {
/* Nutzereinheiten des viewBox, nicht Bildschirmpixel */
font-size: 24px; font-family: var(--font-text); font-weight: 600;
fill: var(--ink-600); dominant-baseline: middle;
}
.legend-rule { stroke: var(--line); stroke-width: 2; }
.map-legend .lg-voll { fill: var(--blue-100); stroke: var(--blue-600); stroke-width: 2; }
.map-legend .lg-aw { fill: var(--aqua-200); stroke: var(--aqua-600); stroke-width: 2; }
.map-legend .lg-haus { fill: var(--blue-900); }
.map-legend .lg-ka { fill: var(--blue-600); }
.map-legend .lg-water { fill: var(--aqua-400); }
/* Ortsnamen als Kartennadeln: weiße Pille mit Punkt, wie man es von Karten
kennt. Trägt über hellen wie dunklen Flächen, und der Punkt sagt, wo der
Ort genau liegt — Schrift allein liegt nur ungefähr richtig. */
.map-pin rect { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.map-pin .pin-dot { fill: var(--blue-900); stroke: var(--paper); stroke-width: 3; }
.map-pin text {
/* Ausnahme von der Schriftskala: font-size zählt hier in Nutzereinheiten
des viewBox (1000 breit), nicht in Bildschirmpixeln. */
font-size: 25px;
font-family: var(--font-text); font-weight: 700;
fill: var(--ink-900);
dominant-baseline: middle;
}
.area-label { filter: drop-shadow(0 2px 4px rgba(10, 30, 70, .22)); }
/* Zwei Zuständigkeiten, zwei Zeilen. Die Unterscheidung ist keine Fußnote:
Wer in Gräfenhain wohnt, bekommt sein Trinkwasser woanders her. */
.area-scope {
margin: var(--sp-6) 0 0; padding-top: var(--sp-5);
border-top: var(--bw) solid var(--line);
}
.area-scope dt {
font-size: var(--fs-tiny); font-weight: 700; color: var(--blue-700);
margin-top: var(--sp-4);
}
.area-scope dt:first-child { margin-top: 0; }
.area-scope dd {
margin: 2px 0 0;
font-size: var(--fs-small); color: var(--ink-900); line-height: var(--lh-snug);
}
/* =============================================================
11 — KONTAKT
============================================================= */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.contact-card { padding: var(--sp-7); }
.contact-card h3 {
display: flex; align-items: center; gap: var(--sp-3);
font-size: var(--fs-h4); margin-bottom: var(--sp-4);
}
.contact-card h3 svg { width: 20px; height: 20px; color: var(--blue-600); flex: none; }
.contact-card p, .contact-card ul { font-size: var(--fs-small); color: var(--ink-600); }
.contact-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.contact-card .times li { display: flex; justify-content: space-between; gap: var(--sp-4); }
.contact-card .times b { color: var(--ink-900); font-weight: 600; }
.contact-card a { font-weight: 600; }
.contact-card .note { margin: var(--sp-4) 0 0; }
.inline-arrow { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; }
.contact-card.is-notdienst {
background: var(--blue-900); border-color: var(--blue-900);
color: var(--on-dark-strong);
}
.contact-card.is-notdienst h3 { color: var(--on-dark); }
.contact-card.is-notdienst h3 svg { color: var(--on-dark-alert); }
.contact-card.is-notdienst p { color: var(--on-dark-strong); }
.notdienst-tel {
display: inline-block;
font-family: var(--font-display); font-weight: 800;
font-size: var(--fs-num); letter-spacing: -0.01em;
color: var(--on-dark); margin: var(--sp-2) 0 var(--sp-1);
font-variant-numeric: tabular-nums;
}
.notdienst-tel:hover { text-decoration: none; color: var(--aqua-200); }
/* =============================================================
12 — FOOTER
============================================================= */
.site-footer { background: var(--blue-900); color: var(--on-dark-muted); font-size: var(--fs-small); }
.footer-grid {
display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr);
gap: var(--sp-12);
padding-block: var(--sp-16) var(--sp-12);
}
.site-footer h4 {
font-family: var(--font-text); color: var(--on-dark);
font-size: var(--fs-small); font-weight: 700;
margin: 0 0 var(--sp-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.site-footer a { color: var(--on-dark-strong); }
.site-footer a:hover { color: var(--on-dark); }
/* Das Siegel trägt den Verbandsnamen selbst — kein Schriftzug daneben,
keine weiße Trägerfläche. Weiße Fassung auf dem dunklen Grund. */
.footer-brand { margin-bottom: var(--sp-5); }
.footer-adr { line-height: var(--lh-snug); }
/* Höhere Spezifität nötig: `.site-footer ul` setzt display:grid und würde
das Flex hier überstimmen. */
.site-footer .footer-social {
display: flex; gap: var(--sp-3); margin-top: var(--sp-6);
}
.site-footer .footer-social a {
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
background: var(--on-dark-fill); border: var(--bw) solid var(--on-dark-line);
border-radius: var(--r-sm); color: var(--on-dark);
transition: background var(--dur-fast) var(--ease);
}
.site-footer .footer-social a:hover { background: var(--on-dark-fill-hover); }
.site-footer .footer-social svg { width: 20px; height: 20px; }
.footer-brand img { width: 124px; height: 124px; }
.footer-notdienst {
margin-top: var(--sp-5);
background: var(--on-dark-fill);
border: var(--bw) solid var(--on-dark-line);
border-radius: var(--r-md);
padding: var(--sp-4) var(--sp-5);
}
.footer-notdienst b { color: var(--on-dark); display: block; font-size: var(--fs-small); }
.footer-notdienst a {
font-family: var(--font-display); font-weight: 800; font-size: var(--fs-num-sm); color: var(--on-dark);
}
.footer-bottom { border-top: var(--bw) solid var(--on-dark-line); }
.footer-bottom-inner {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--sp-4); padding-block: var(--sp-5);
font-size: var(--fs-tiny);
}
.footer-bottom ul { display: flex; gap: var(--sp-6); }
/* =============================================================
13 — HINWEIS-TOAST
Meldet, dass eine Unterseite im Prototyp noch fehlt.
============================================================= */
.toast {
position: fixed; left: 50%; bottom: var(--sp-7); z-index: var(--z-toast);
transform: translate(-50%, var(--sp-4));
display: flex; align-items: center; gap: var(--sp-3);
max-width: min(520px, calc(100vw - 2rem));
padding: var(--sp-3) var(--sp-5);
background: var(--blue-900); color: var(--on-dark);
border-radius: var(--r-sm);
box-shadow: var(--shadow-2);
font-size: var(--fs-small);
opacity: 0; pointer-events: none;
transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: var(--aqua-200); flex: none; }
/* =============================================================
14 — SUCHDIALOG
Wird über das Lupensymbol im Header, den Eintrag im mobilen Menü
oder Strg/Cmd + K geöffnet.
============================================================= */
.spotlight {
position: fixed; inset: 0; z-index: var(--z-overlay);
display: none;
background: var(--scrim);
padding: 12vh var(--gutter) 4vh;
}
.spotlight.is-open { display: block; }
.spotlight-panel {
max-width: 620px; margin-inline: auto;
background: var(--paper);
border-radius: var(--r-md);
box-shadow: var(--shadow-3);
overflow: hidden;
display: flex; flex-direction: column;
max-height: 72vh;
}
.spotlight-input-row {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
border-bottom: var(--bw) solid var(--line);
}
.spotlight-input-row svg { width: 20px; height: 20px; color: var(--blue-600); flex: none; }
.spotlight-input-row input {
flex: 1; border: 0; outline: 0;
font: inherit; font-size: var(--fs-h4); color: var(--ink-900);
background: none;
}
.spotlight-input-row input::placeholder { color: var(--ink-300); }
.spotlight-input-row .esc-hint {
font-size: var(--fs-tiny); color: var(--ink-400);
border: var(--bw) solid var(--line); border-radius: 4px;
padding: 2px var(--sp-2);
}
.spotlight-results { overflow-y: auto; padding: var(--sp-2); flex: 1; }
.spotlight-group-label {
font-size: var(--fs-tiny); font-weight: 700;
color: var(--ink-600); padding: var(--sp-3) var(--sp-3) var(--sp-1);
}
.spotlight-item {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3);
border-radius: var(--r-sm);
color: var(--ink-900);
cursor: pointer;
}
.spotlight-item .icon-tile { color: var(--blue-600); }
.spotlight-item .icon-tile svg { width: 20px; height: 20px; }
.spotlight-item b { display: block; font-weight: 600; font-size: var(--fs-small); line-height: var(--lh-snug); }
.spotlight-item b mark { background: var(--blue-100); color: inherit; border-radius: 3px; padding-inline: 1px; }
.spotlight-item small { color: var(--ink-400); font-size: var(--fs-tiny); }
.spotlight-item.is-active { background: var(--blue-50); }
.spotlight-item.is-active b { color: var(--blue-700); }
.spotlight-empty {
padding: var(--sp-10) var(--sp-4); text-align: center;
color: var(--ink-600); font-size: var(--fs-small);
}
.spotlight-footer {
display: flex; gap: var(--sp-5);
padding: var(--sp-3) var(--sp-5);
border-top: var(--bw) solid var(--line);
background: var(--mist);
font-size: var(--fs-tiny); color: var(--ink-400);
}
.spotlight-footer kbd {
font-family: var(--font-text); font-size: var(--fs-tiny);
background: var(--paper); border: var(--bw) solid var(--line);
border-radius: 4px; padding: 1px var(--sp-1);
}
/* =============================================================
14b — SERVICE-ASSISTENT
Der Hinweis auf das automatisierte System und die Einwilligung in
die Datenverarbeitung stehen einmal auf dem Einstiegsbildschirm.
Danach bleibt das Etikett im Kopf — mehr braucht ein Service-Chat
nicht, und mehr würde nur überlesen.
============================================================= */
/* Der Launcher soll auf den ersten Blick als Chat lesbar sein: runder
Knopf mit Sprechblase plus eine kleine Sprechblase als Ansprache.
Rund ist sonst der Marke vorbehalten — hier ist es die Ausnahme,
weil die Form selbst die Funktion benennt. */
.chat-dock {
position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: var(--z-fab);
display: flex; align-items: flex-end; gap: var(--sp-3);
}
.chat-dock[hidden] { display: none; }
.chat-bubble-wrap { position: relative; margin-bottom: 6px; }
.chat-dock.is-quiet .chat-bubble-wrap { display: none; }
.chat-bubble {
display: block;
max-width: 17rem;
padding-right: var(--sp-10);
padding: var(--sp-3) var(--sp-4);
background: var(--paper); color: var(--ink-900);
border: var(--bw) solid var(--line);
border-radius: var(--r-md) var(--r-md) 4px var(--r-md);
box-shadow: var(--shadow-2);
font-size: var(--fs-small); line-height: var(--lh-snug);
text-align: left;
}
.chat-bubble b {
display: block; margin-bottom: var(--sp-1);
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4);
}
.chat-bubble span { color: var(--ink-600); font-size: var(--fs-small); line-height: var(--lh-snug); }
.chat-bubble:hover { border-color: var(--blue-500); }
/* Flach in der Blase, nicht als schwebendes Kreis-Abzeichen am Eck —
das las sich wie der Schließen-Knopf einer Werbeeinblendung. */
.chat-bubble-close {
position: absolute; top: 6px; right: 6px;
width: 28px; height: 28px;
background: none; color: var(--ink-300);
border: 0; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
}
.chat-bubble-close:hover { background: var(--mist); color: var(--ink-900); }
.chat-bubble-close svg { width: 13px; height: 13px; }
.chat-launcher {
width: 76px; height: 76px; flex: none;
display: flex; align-items: center; justify-content: center;
background: var(--blue-600); color: var(--on-dark);
border: 0; border-radius: var(--r-round);
box-shadow: var(--shadow-2);
transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.chat-launcher:hover { background: var(--blue-500); box-shadow: var(--shadow-3); }
.chat-launcher:active { background: var(--blue-700); }
.chat-launcher svg { width: 56px; height: 56px; } /* Das Maskottchen ist detailreich und braucht Fläche */
/* Der Launcher steht dauerhaft in der Ecke. Statt den ganzen Footer
nach unten zu schieben, bekommt nur die Zeile mit den Rechtslinks
rechts Platz — darunter blieb sonst eine leere Fläche stehen. */
.footer-bottom-inner { padding-right: 112px; }
.chat-panel {
position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: calc(var(--z-fab) + 10);
width: min(412px, calc(100vw - 2rem));
height: min(620px, calc(100dvh - 4rem));
background: var(--paper);
border: var(--bw) solid var(--line);
border-radius: var(--r-md); /* dieselbe Rundung wie Karten */
box-shadow: var(--shadow-3);
display: none; flex-direction: column;
overflow: hidden;
}
.chat-panel.is-open { display: flex; }
/* `display: flex` auf .chat-log würde das UA-`[hidden]` überstimmen. */
.chat-log[hidden], .chat-compose[hidden], .chat-intro[hidden], .chat-suggest[hidden] { display: none; }
/* ---------- Kopf ---------- */
.chat-head {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-5);
background: var(--blue-900); color: var(--on-dark);
}
.chat-id { min-width: 0; margin-right: auto; }
.chat-id b {
font-family: var(--font-display); font-size: var(--fs-h4);
display: block; line-height: 1.2; white-space: nowrap;
}
.chat-id small {
display: block; margin-top: 2px;
color: var(--on-dark-muted); font-size: var(--fs-tiny); line-height: var(--lh-snug);
}
/* Der Verbandsname darf umbrechen, aber nicht in sich selbst */
.chat-id small span { white-space: nowrap; }
.chat-icon-btn {
flex: none;
width: 40px; height: 40px;
background: none; border: 0; border-radius: var(--r-sm);
color: var(--on-dark-muted);
display: flex; align-items: center; justify-content: center;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chat-icon-btn:hover { background: var(--on-dark-fill); color: var(--on-dark); }
.chat-icon-btn svg { width: 22px; height: 22px; }
/* ---------- Einstieg mit Einwilligung ---------- */
.chat-intro {
flex: 1; min-height: 0; overflow-y: auto;
padding: var(--sp-6) var(--sp-5) var(--sp-5);
}
.chat-intro h2 { font-size: var(--fs-h4); margin: 0 0 var(--sp-5); }
/* Vier Punkte statt Fließtext: Wer einwilligt, soll erfassen können,
worin — dafür braucht jede Aussage eine eigene Zeile. */
.chat-facts { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-4); }
.chat-facts li {
display: flex; align-items: flex-start; gap: var(--sp-3);
font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--ink-600);
}
.chat-facts svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--aqua-600); }
.chat-facts strong { color: var(--ink-900); font-weight: 700; }
.chat-facts .is-warn svg { color: var(--blue-900); }
.chat-intro .btn { width: 100%; }
.chat-intro-alt {
margin: var(--sp-4) 0 0;
padding-top: var(--sp-4);
border-top: var(--bw) solid var(--line-soft);
font-size: var(--fs-tiny); line-height: var(--lh-snug); color: var(--ink-400);
}
/* ---------- Verlauf ---------- */
.chat-log {
flex: 1; min-height: 0; overflow-y: auto;
padding: var(--sp-5) var(--sp-5) var(--sp-6);
display: flex; flex-direction: column; gap: var(--sp-2);
background: var(--mist);
}
/* Der Rhythmus macht das Gespräch lesbar: eng innerhalb eines Zuges,
luftig zwischen den Zügen. */
.chat-msg.user + .chat-row,
.chat-quick + .chat-msg.user { margin-top: var(--sp-4); }
/* Antwortzeile: Gesicht links, Sprechblase daneben */
.chat-row { display: flex; align-items: flex-start; gap: var(--sp-2); }
.chat-face {
width: 38px; height: 38px; flex: none; margin-top: 2px;
display: flex; align-items: center; justify-content: center;
background: var(--paper); color: var(--blue-600);
border: var(--bw) solid var(--line); border-radius: var(--r-round);
}
.chat-face svg { width: 30px; height: 30px; }
.chat-msg {
max-width: 100%;
padding: .7rem 1rem;
border-radius: var(--r-md);
font-size: var(--fs-small); line-height: 1.55;
}
.chat-msg.bot {
background: var(--paper); border: var(--bw) solid var(--line);
border-top-left-radius: 4px;
box-shadow: 0 1px 2px rgba(10, 30, 70, .04);
}
.chat-msg.user {
max-width: 86%;
background: var(--blue-600); color: var(--on-dark);
border-bottom-right-radius: 4px; align-self: flex-end;
}
.chat-msg a { font-weight: 600; }
.chat-msg .chat-tel {
font-family: var(--font-display); font-weight: 800; font-size: var(--fs-num-sm);
display: block; margin-top: var(--sp-1);
}
/* Vorgeschlagene Anschlussfragen */
/* Anschlussfragen fluchten mit der Sprechblase, nicht mit dem Gesicht */
.chat-quick {
display: flex; flex-wrap: wrap; gap: var(--sp-2);
margin-left: calc(38px + var(--sp-2));
padding-top: var(--sp-1);
}
.chat-quick button {
padding: .5rem 1rem;
background: var(--paper); color: var(--blue-700);
border: var(--bw-strong) solid var(--blue-100); border-radius: var(--r-sm);
font-size: var(--fs-small); font-weight: 600;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.chat-quick button:hover { border-color: var(--blue-500); background: var(--blue-50); }
/* Ein Zug erscheint mit einer kurzen Bewegung. Ohne das wirkt der Verlauf
wie eine Liste, die schon immer da war, statt wie ein Gespräch.
Der globale `prefers-reduced-motion`-Block schaltet es ab. */
@keyframes chat-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.chat-row, .chat-msg.user, .chat-quick { animation: chat-in .22s var(--ease) both; }
/* Tipp-Indikator */
.chat-typing { display: inline-flex; gap: 4px; padding: .9rem 1rem; }
.chat-typing i {
width: 6px; height: 6px; border-radius: 50%; background: var(--ink-400);
animation: typing 1.2s infinite ease-in-out;
}
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
/* ---------- Eingabe ---------- */
.chat-compose {
position: relative;
border-top: var(--bw) solid var(--line);
background: var(--paper);
box-shadow: 0 -6px 16px -12px rgba(10, 30, 70, .35);
}
.chat-suggest {
position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: calc(100% - var(--bw));
margin: 0; padding: var(--sp-2); list-style: none;
background: var(--paper);
border: var(--bw) solid var(--line); border-radius: var(--r-sm);
box-shadow: var(--shadow-2);
}
.chat-suggest li > button {
display: flex; align-items: center; gap: var(--sp-2);
width: 100%; padding: var(--sp-2) var(--sp-3);
background: none; border: 0; border-radius: 6px;
font: inherit; font-size: var(--fs-small); text-align: left; color: var(--ink-900);
}
.chat-suggest li > button svg { width: 15px; height: 15px; flex: none; color: var(--ink-300); }
.chat-suggest li.is-active > button,
.chat-suggest li > button:hover { background: var(--blue-50); color: var(--blue-700); }
.chat-suggest li.is-active > button svg,
.chat-suggest li > button:hover svg { color: var(--blue-600); }
/* `align-items: flex-end`: Wächst das Feld auf mehrere Zeilen, bleibt der
Senden-Knopf unten stehen, statt mittig zu schwimmen. */
.chat-input-row {
display: flex; align-items: flex-end; gap: var(--sp-2);
padding: var(--sp-4) var(--sp-4) var(--sp-2);
}
/* Ein Textfeld statt einer einzeiligen Eingabe: Fragen sind manchmal
länger als eine Zeile, und ein Feld, das den Anfang wegscrollt, ist
beim Korrigieren unbrauchbar. Es wächst mit, bis vier Zeilen. */
.chat-input-row textarea {
flex: 1; min-width: 0;
min-height: 48px; max-height: 7.5rem;
padding: .68rem 1rem;
border: var(--bw-strong) solid var(--line); border-radius: var(--r-sm);
font: inherit; font-size: var(--fs-body); line-height: 1.45;
resize: none; overflow-y: auto;
outline: none;
}
.chat-input-row textarea:focus { border-color: var(--blue-500); }
.chat-send {
width: 48px; height: 48px; flex: none;
background: var(--blue-600); color: var(--on-dark);
border: 0; border-radius: var(--r-sm);
display: flex; align-items: center; justify-content: center;
transition: background var(--dur-fast) var(--ease);
}
.chat-send:hover { background: var(--blue-500); }
.chat-send svg { width: 18px; height: 18px; }
.chat-foot {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
margin: 0; padding: 0 var(--sp-4) var(--sp-3);
font-size: var(--fs-tiny); color: var(--ink-400);
}
.chat-foot button {
background: none; border: 0; padding: 0;
font: inherit; font-weight: 600; color: var(--blue-600);
text-decoration: underline; text-underline-offset: 2px;
}
.chat-foot button:hover { color: var(--blue-700); }
/* Ab 1440 px ist neben der mittigen Navigation genug Platz, damit die
Querfassung ihre volle Höhe bekommt. */
@media (min-width: 1440px) { :root { --logo-row-h: 54px; } }
/* =============================================================
15 — KLEINE BILDSCHIRME
Umschaltpunkt 1240 px — die Navigation braucht neben dem Siegel
mehr Platz, als ein Tablet quer bietet.
(synchron zu matchMedia in main.js)
============================================================= */
@media (max-width: 1240px) {
:root {
--header-h: 72px;
--header-h-stuck: 60px;
--logo-row-h: 42px;
}
.header-inner { gap: var(--sp-4); }
.main-nav {
display: none;
position: absolute; left: 0; right: 0; top: 100%;
background: var(--paper);
border-bottom: var(--bw) solid var(--line);
box-shadow: var(--shadow-2);
max-height: calc(100dvh - var(--header-h-stuck));
overflow-y: auto;
margin: 0; padding: var(--sp-3) var(--gutter) var(--sp-6);
}
.main-nav.is-open { display: block; }
.main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
.nav-item { border-bottom: var(--bw) solid var(--line-soft); }
.nav-item:last-child { border-bottom: 0; }
.nav-item > a, .nav-item > button {
width: 100%; justify-content: space-between;
padding: var(--sp-4) var(--sp-1); border-radius: 0;
font-size: var(--fs-body);
}
.nav-item > a:hover, .nav-item > button:hover, .nav-item.is-open > button { background: none; }
.mega {
position: static; display: none;
opacity: 1; visibility: visible; transform: none;
box-shadow: none; border: 0; transition: none;
}
.nav-item.is-open > .mega { display: block; }
.mega-grid { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-1) 0 var(--sp-6); }
.nav-toggle { display: inline-flex; }
/* Nur der Notdienst bleibt in der Topbar — Sprechzeiten stehen im Kontaktteil */
.topbar-group.secondary { display: none; }
.hero-inner { max-width: none; }
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.stat:nth-child(2n) { border-right: 0; padding-right: 0; }
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.water-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
.verband-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
.contact-grid { grid-template-columns: minmax(0, 1fr); }
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
}
@media (max-width: 640px) {
:root { --logo-row-h: 48px; } /* kompakte Fassung ist dreizeilig, darf höher */
/* Hier hätte die breite Querfassung keinen Platz mehr neben
Hauptaktion und Menü — es übernimmt die kompakte Fassung. */
.brand .logo-row { display: none; }
.brand .logo-row-compact { display: block; }
.site-header.is-stuck .brand .logo-row-compact { display: none; }
/* Im Header bleiben Marke, Hauptaktion und Menü, die Suche zieht ins Menü */
.header-actions .icon-btn[data-open-search] { display: none; }
.header-cta { --btn-px: 0; width: 44px; }
.header-cta .btn-label { display: none; }
.nav-search { display: block; border-bottom: var(--bw) solid var(--line-soft); }
.tiles { grid-template-columns: minmax(0, 1fr); }
.news-grid { grid-template-columns: minmax(0, 1fr); }
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-grid { grid-template-columns: minmax(0, 1fr); }
.section-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.hero-actions { flex-direction: column; align-items: stretch; }
.hero-actions .btn { width: 100%; }
/* Die Rufnummer steht hier schon in der Topbar — im Button wäre sie
ein zweiter Umbruch ohne Mehrwert. Der Tipp wählt sie ohnehin. */
.btn-tel { display: none; }
.topbar-inner { justify-content: center; }
.footer-bottom-inner { padding-right: 0; padding-bottom: var(--sp-14); }
.chat-dock { right: var(--sp-4); bottom: var(--sp-4); }
.chat-bubble-wrap { display: none; } /* auf dem Telefon nur der Knopf */
.chat-launcher { width: 68px; height: 68px; }
.chat-panel { right: var(--sp-4); bottom: var(--sp-4); }
.toast { bottom: 5.5rem; }
}
/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
html { scroll-behavior: auto; }
}