/* ============================================================
Freiwillige Feuerwehr Langwaid — Designsystem
Umsetzung des abgestimmten Entwurfs: Rot als Flaeche, Anthrazit
als Gegengewicht, warmes Off-White als Papier. Archivo Black fuer
Ueberschriften, Archivo fuer alles Uebrige.
Die Farbwerte hier muessen zu FARBEN in site_config.py passen.
Sie stehen doppelt, weil das CSS nicht erzeugt wird — wer eine
Farbe aendert, aendert sie an beiden Stellen.
============================================================ */
:root{
--rot:#D50D0D;
--rot-alt:#B00A0A;
--kohle:#131010;
--paper:#F5F2EF;
--paper-2:#FFFFFF;
--line:#E4DFDA;
--text:#131010;
--text-2:#6E6764;
--text-3:#8C8582;
--linie-dunkel:#2A2422;
--wrap:1280px;
--rand:80px;
/* Fuer Baender, die randlos laufen, deren Text aber auf der Spalte des
.wrap stehen soll: das Aussenmass des Bandes bleibt 100 %, der Text
bekommt links dieselbe Flucht wie der uebrige Seiteninhalt. */
--flucht:max(var(--rand), calc((100vw - var(--wrap)) / 2 + var(--rand)));
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
background:var(--paper); color:var(--text);
font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
font-size:16px; line-height:1.6;
-webkit-font-smoothing:antialiased;
}
/* height:auto ist Pflicht, nicht Kosmetik. Jedes ![]()
traegt width und
height gegen Layout-Spruenge. Wird die Breite per CSS beschnitten, bliebe
sonst die Hoehe aus dem Attribut stehen und das Bild waere verzerrt —
auf dem Desktop unsichtbar, auf dem Telefon sofort.
Regeln mit absichtlich fester Hoehe sind spezifischer und gewinnen. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3,h4{
font-family:'Archivo Black','Helvetica Neue',Arial,sans-serif;
font-weight:400; letter-spacing:-0.025em; line-height:1.05;
text-transform:uppercase;
}
/* Deutsche Komposita sind lang: "Tragkraftspritzenfahrzeug",
"Datenschutzerklaerung". In einer grossen Ueberschrift passt so ein Wort
auf 320 px nicht in die Spalte und schiebt die ganze Seite seitwaerts —
der Ueberlauf passiert INNERHALB des Textflusses, die Suche nach
ueberstehenden Kaesten findet dabei nichts.
hyphens:auto trennt nach deutschen Regeln, weil steht. */
h1,h2,h3,h4,summary{ overflow-wrap:break-word; hyphens:auto; }
p,li,td,th,dd,figcaption{ overflow-wrap:break-word; hyphens:auto; }
:focus-visible{ outline:3px solid var(--rot); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
*{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--rand); }
.skip-link{
position:absolute; left:-9999px; top:0; z-index:200;
background:var(--kohle); color:#fff; padding:14px 20px; font-weight:700;
}
.skip-link:focus{ left:0; }
/* ---------- Schaltflaechen ----------
Mindesthoehe 48 px: darunter wird auf dem Telefon danebengetippt. */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
min-height:52px; padding:0 28px;
font-size:14.5px; font-weight:700; letter-spacing:0.06em;
text-transform:uppercase; text-align:center;
border:2px solid transparent; cursor:pointer;
transition:background .15s, color .15s, border-color .15s;
}
.btn-rot{ background:var(--rot); color:#fff; }
.btn-rot:hover{ background:var(--rot-alt); }
.btn-kohle{ background:var(--kohle); color:#fff; }
.btn-kohle:hover{ background:#2A2422; }
.btn-weiss{ background:#fff; color:var(--rot); }
.btn-weiss:hover{ background:var(--paper); }
.btn-rand{ border-color:rgba(255,255,255,.6); color:#fff; }
.btn-rand:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
.btn-rand-dunkel{ border-color:var(--kohle); color:var(--kohle); }
.btn-rand-dunkel:hover{ background:var(--kohle); color:#fff; }
/* ---------- Notrufleiste ---------- */
.notruf{
background:var(--rot); color:#fff;
font-size:13px; font-weight:700; letter-spacing:.06em;
}
.notruf .wrap{
display:flex; align-items:center; justify-content:space-between;
gap:16px; min-height:44px; padding-top:8px; padding-bottom:8px;
}
.notruf-links{ display:flex; align-items:center; gap:10px; text-transform:uppercase; }
.notruf a{ text-decoration:underline; text-underline-offset:3px; }
.notruf-rechts{ font-weight:500; letter-spacing:.02em; }
/* ---------- Kopf ---------- */
/* relative: der Kopf ist der Bezugsrahmen fuer das Menue, das unter ihm
haengt. */
header{ background:var(--kohle); color:var(--paper); position:relative; z-index:60; }
.header-inner{
display:flex; align-items:center; justify-content:space-between; gap:24px;
min-height:96px; padding-top:12px; padding-bottom:12px;
}
/* Der Logo-Block darf nicht schrumpfen: sonst gibt ausgerechnet er nach,
sobald die Navigation eng wird. */
.marke{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.marke img{ width:56px; height:56px; }
/* Zwei in einem : ohne eigene Blockrichtung stehen Name und Ort
in einer Zeile hintereinander. */
.marke-text{ display:flex; flex-direction:column; }
.marke-name{
font-family:'Archivo Black',sans-serif; font-size:18px;
letter-spacing:-0.025em; text-transform:uppercase; line-height:1.1;
}
.marke-ort{ font-size:11.5px; color:var(--text-3); letter-spacing:.05em; margin-top:3px; }
.fuss-marke span{ display:block; }
nav.haupt{ display:flex; align-items:center; gap:4px; }
nav.haupt a{
display:flex; align-items:center; min-height:44px; padding:0 11px;
font-size:13px; font-weight:600; letter-spacing:.03em;
text-transform:uppercase; color:#CFC9C6; white-space:nowrap;
}
nav.haupt a:hover{ color:#fff; }
nav.haupt a.active{ color:#fff; box-shadow:inset 0 -3px 0 var(--rot); }
nav.haupt .btn{ margin-left:10px; min-height:48px; padding:0 22px; }
/* Die Balken hatten keine eigene Breite. In einem Flex-Container mit der
Vorgabe align-items:stretch liefen sie ueber die vollen 48 px von Kante
zu Kante — drei Striche ohne Rahmen, die nach Fehler aussahen statt nach
Schaltflaeche. Jetzt ein rotes Quadrat wie die uebrigen Schaltflaechen. */
.menu-btn{
display:none; width:48px; height:48px; flex-shrink:0; padding:0;
background:var(--rot); color:#fff; border:0; cursor:pointer;
flex-direction:column; align-items:center; justify-content:center; gap:5px;
transition:background .15s;
}
.menu-btn:hover{ background:var(--rot-alt); }
/* Der allgemeine Fokusrahmen ist rot. Auf einer roten Schaltflaeche vor
dunklem Grund bleibt davon ein schwarz wirkender Kasten uebrig — der
Abstand dazwischen. Hier deshalb weiss. */
.menu-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.menu-btn span{
display:block; width:20px; height:2.5px; background:#fff;
transition:transform .18s, opacity .18s;
}
/* Die Schaltflaeche wird zum Kreuz, statt hinter dem Menue zu verschwinden.
7.5 px ist der Abstand der Balkenmitten: 5 px Luecke plus 2.5 px Balken. */
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
/* Das Menue haengt am Kopf, es deckt ihn nicht ab. Absolut positioniert,
damit sein Aufklappen die Seite darunter nicht verschiebt — im Fluss
wuerde der Kopf hoeher und alles nach unten ruecken.
overflow-y:scroll statt auto ist Absicht: nur ein echter Scroll-Container
haelt mit overscroll-behavior:contain das Wischen davon ab, auf die Seite
dahinter durchzulaufen. Am Dokument selbst wird nichts veraendert — kein
overflow:hidden, das auf dem Telefon ruckt und auf iOS die Scrollposition
verliert. */
.mobile-nav{
display:none; position:absolute; top:100%; left:0; right:0;
background:var(--kohle); padding:4px var(--rand) 28px;
flex-direction:column; gap:0;
border-top:1px solid var(--linie-dunkel);
box-shadow:0 18px 32px rgba(0,0,0,.45);
max-height:70vh;
overflow-y:scroll; overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{
min-height:60px; display:flex; align-items:center;
font-family:'Archivo Black',sans-serif; font-size:20px;
text-transform:uppercase; color:#fff;
border-bottom:1px solid var(--linie-dunkel);
}
.mobile-nav a.active{ color:var(--rot); }
.mobile-nav .btn{ margin-top:20px; border-bottom:0; }
/* ---------- Aufmacher ---------- */
.aufmacher{ background:var(--rot); color:#fff; }
/* Das Bild laeuft bis an den Bildschirmrand, der Text bleibt in der Flucht
des uebrigen Seiteninhalts. Waere das Raster auf --wrap begrenzt, endete
das Foto mitten auf der roten Flaeche. */
.aufmacher-innen{
display:grid; grid-template-columns:1fr 44%; align-items:stretch;
}
.aufmacher-text{
display:flex; flex-direction:column; gap:28px; justify-content:center;
padding:96px 56px 96px var(--flucht);
}
.aufmacher-kopf{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rufname{
display:inline-flex; align-items:center; min-height:28px; padding:0 12px;
background:var(--kohle); color:#fff;
font-size:11.5px; font-weight:700; letter-spacing:.14em;
}
.aufmacher-kicker{
font-size:13px; letter-spacing:.1em; text-transform:uppercase;
color:rgba(255,255,255,.8);
}
/* hyphens:auto gilt fuer Fliesstext und lange Komposita. In einer
Schauzeile mit gesetzten Umbruechen trennt es "Melder" zu "Mel-der" —
hier also ausdruecklich aus. */
.aufmacher h1{ font-size:clamp(34px,4.4vw,68px); line-height:.94; hyphens:manual; }
.mitmachen h2, .abschnitt-kopf h2, .technik-text h2{ hyphens:manual; }
.aufmacher-lede{ font-size:19px; line-height:1.6; color:rgba(255,255,255,.92); max-width:520px; }
.aufmacher-ctas{ display:flex; flex-wrap:wrap; gap:0; padding-top:6px; }
.aufmacher-bild{ position:relative; min-height:620px; }
.aufmacher-bild img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.aufmacher-bild::after{
content:""; position:absolute; left:0; top:0; bottom:0; width:120px;
background:linear-gradient(90deg,var(--rot),rgba(213,13,13,0));
}
.bildnachweis{
position:absolute; right:14px; bottom:12px; z-index:2;
font-size:11px; letter-spacing:.04em; color:rgba(255,255,255,.6);
}
/* ---------- Zahlenband ---------- */
.zahlen{ background:var(--kohle); color:var(--paper); }
/* Die beiden aeusseren Kacheln beginnen am Bildschirmrand, ihr Text aber
auf der Fluchtlinie der Seite — derselben, auf der die Ueberschrift im
Aufmacher darueber steht. Diesen Vorlauf braucht die Kachel ZUSAETZLICH;
ohne die beiden Randspalten zog sie ihn von der eigenen Textbreite ab,
und die waechst mit dem Fenster nicht mit, sondern schrumpft:
Textbreite der ersten Kachel = 100vw/4 - flucht - 40px
= 520px - 100vw/4
Bei 1280 px blieben 200 px, bei 1600 px noch 120 px, bei 2000 px genau
19 px — nachgemessen, die "28" stand dann als "2" ueber "8". Ab 2080 px
waere die Kachel rechnerisch leer. Mit den beiden Randspalten sind alle
vier Textbreiten gleich und von der Fensterbreite unabhaengig. */
.zahlen-innen{
--vorlauf:calc(var(--flucht) - 40px);
display:grid;
grid-template-columns:var(--vorlauf) repeat(4,minmax(0,1fr)) var(--vorlauf);
}
.zahl{ display:flex; flex-direction:column; gap:8px; padding:44px 40px; border-right:1px solid var(--linie-dunkel); }
.zahl:first-child{ grid-column:1 / 3; padding-left:var(--flucht); }
.zahl:last-child{ grid-column:5 / -1; border-right:0; background:var(--rot); padding-right:var(--flucht); }
.zahl b{ font-family:'Archivo Black',sans-serif; font-weight:400; font-size:52px; line-height:1; letter-spacing:-.04em; color:#fff; }
.zahl span{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.zahl:last-child span{ color:rgba(255,255,255,.85); }
/* ---------- Abschnitte ---------- */
section{ padding:88px 0; }
.abschnitt-kopf{
display:flex; align-items:flex-end; justify-content:space-between;
gap:24px; flex-wrap:wrap; padding-bottom:34px;
}
.abschnitt-kopf h2{ font-size:clamp(30px,3.4vw,46px); line-height:1; }
.eyebrow{
font-size:12px; font-weight:700; letter-spacing:.18em;
text-transform:uppercase; color:var(--rot); margin-bottom:14px;
}
/* ---------- Einsatztabelle ----------
Als Raster gebaut, nicht als : die Zeilen sind Links auf den
jeweiligen Bericht, und ein darf kein umschliessen. */
.einsatzliste{ display:flex; flex-direction:column; background:var(--paper-2); }
.einsatzliste-kopf,
.einsatz-zeile{
display:grid; grid-template-columns:150px 210px 1fr 150px;
gap:24px; align-items:center; padding:24px 28px;
}
.einsatzliste-kopf{
background:var(--kohle); color:var(--paper); padding-top:15px; padding-bottom:15px;
font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.einsatzliste-kopf span:last-child,
.einsatz-quelle{ text-align:right; }
.einsatz-zeile{ border-bottom:1px solid var(--line); transition:background .12s; }
.einsatz-zeile:last-child{ border-bottom:0; }
.einsatz-zeile:hover{ background:var(--paper); }
.einsatz-datum{ font-size:16px; font-weight:700; letter-spacing:.03em; color:#4A4340; }
.einsatz-titel{ font-size:19px; font-weight:600; line-height:1.3; }
.einsatz-quelle{ font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--text-3); }
.einsatz-zeile.brand{ background:linear-gradient(90deg,rgba(213,13,13,.06),rgba(213,13,13,0) 55%); }
.art{
display:inline-flex; align-items:center; min-height:28px; padding:0 11px;
border:2px solid var(--kohle); color:var(--kohle);
font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.art.voll{ background:var(--rot); border-color:var(--rot); color:#fff; }
/* ---------- Technik ---------- */
.technik{ background:var(--kohle); color:var(--paper); padding:0; }
.technik-innen{ display:grid; grid-template-columns:1fr 1fr; }
.technik-text{ display:flex; flex-direction:column; gap:20px; justify-content:center; padding:76px 48px 76px var(--flucht); }
.technik-text h2{ font-size:clamp(28px,3.2vw,40px); line-height:1.02; }
.technik-text p{ font-size:17px; color:#A8A19E; max-width:460px; }
/* Das Bild fuellt die Spalte, bestimmt aber nicht mehr deren Hoehe.
Vorher stand am ![]()
height:100%; in einer Zeile ohne feste Hoehe faellt
das auf "auto" zurueck, und dann diktiert das Seitenverhaeltnis der
Aufnahme das Band: die Fahrzeugaufnahme ist hochformatig, 760x1013, und
machte das Band auf 1440 px Breite 960 px hoch — hoeher als der
Bildschirm. Auf dem Telefon waren es 520 px, zwei Drittel der Anzeige.
Jetzt liegt das Bild absolut in seiner Spalte. Die Zeilenhoehe kommt
damit vom Text, das Bild fuellt sie. min-height ist die Untergrenze fuer
den Fall, dass der Text einmal kuerzer ist. */
.technik-bilder{ position:relative; min-height:320px; }
.technik-bilder picture{ position:absolute; inset:0; display:block; }
.technik-bilder img{
width:100%; height:100%; object-fit:cover;
/* Etwas oberhalb der Mitte: das hochformatige Bild wird in der hohen
Spalte oben und unten beschnitten, und der Leuchtballon sitzt im
oberen Drittel. */
object-position:50% 42%;
}
/* ---------- Mitmachen ---------- */
.mitmachen{ background:var(--rot); color:#fff; text-align:center; }
.mitmachen .wrap{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.mitmachen .eyebrow{ color:rgba(255,255,255,.78); margin:0; }
.mitmachen h2{ font-size:clamp(32px,4.4vw,54px); line-height:1.02; max-width:1180px; }
.mitmachen p{ font-size:19px; color:rgba(255,255,255,.92); max-width:860px; }
.mitmachen-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; padding-top:8px; }
/* ---------- Fliesstext (Berichte und Inhaltsseiten) ---------- */
.seiten-kopf{ background:var(--kohle); color:var(--paper); padding:72px 0 64px; }
.seiten-kopf h1{ font-size:clamp(32px,4.2vw,56px); color:#fff; }
.seiten-kopf .lede{ font-size:19px; color:#A8A19E; max-width:720px; margin-top:20px; }
.brotkrume{ font-size:13px; letter-spacing:.04em; color:var(--text-3); margin-bottom:20px; }
.brotkrume a:hover{ color:#fff; text-decoration:underline; }
.prosa{ max-width:760px; }
.prosa h2{ font-size:clamp(24px,2.6vw,32px); margin:52px 0 18px; }
.prosa h3{ font-size:20px; margin:36px 0 12px; }
.prosa h2:first-child,.prosa h3:first-child{ margin-top:0; }
.prosa p{ margin-bottom:18px; font-size:17.5px; line-height:1.7; }
.prosa a{ color:var(--rot); text-decoration:underline; text-underline-offset:3px;
overflow-wrap:anywhere; }
.prosa a:hover{ color:var(--rot-alt); }
.prosa ul{ margin:0 0 22px; display:flex; flex-direction:column; gap:10px; }
.prosa ul li{ display:flex; gap:14px; font-size:17.5px; min-width:0; overflow-wrap:anywhere; }
.prosa ul li::before{ content:""; flex-shrink:0; width:7px; height:7px; margin-top:11px; background:var(--rot); }
.prosa strong{ font-weight:700; }
.prosa figure{ margin:32px 0; }
.prosa figcaption{ font-size:13.5px; color:var(--text-2); margin-top:10px; }
/* Tabellen scrollen in sich selbst, nie die Seite. */
.tabelle-scroll{ overflow-x:auto; margin-bottom:24px; }
.tabelle-scroll table{ border-collapse:collapse; min-width:480px; width:100%; }
.tabelle-scroll th,.tabelle-scroll td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); font-size:16px; }
.tabelle-scroll th{ font-weight:700; }
/* Personentafel (Kommandanten, Vorstand) */
.tafel{ background:var(--paper-2); border:1px solid var(--line); }
.tafel-kopf{ padding:18px 26px; border-bottom:1px solid var(--line); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); }
.tafel-zeile{ display:grid; grid-template-columns:1fr auto; gap:16px; padding:16px 26px; border-bottom:1px solid var(--line); align-items:baseline; }
.tafel-zeile:last-child{ border-bottom:0; }
.tafel-name{ font-weight:700; }
/* Die Adresse steht unter dem Namen, nicht hinter der Funktion versteckt.
Eigene Zeile, damit sie auch auf schmalen Anzeigen nicht mit der
Funktionsbezeichnung kollidiert. */
.tafel-mail{
display:block; margin-top:3px; font-weight:400; font-size:14.5px;
color:var(--rot); text-decoration:underline; text-underline-offset:3px;
overflow-wrap:anywhere;
}
.tafel-mail:hover{ color:var(--rot-alt); }
.tafel-rolle{ color:var(--text-2); font-size:14.5px; }
/* ---------- Archiv ---------- */
.archiv{ display:flex; flex-direction:column; background:var(--paper-2); }
.archiv .einsatz-zeile:last-child{ border-bottom:1px solid var(--line); }
.blaettern{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:40px; }
.blaettern-seiten{ display:flex; flex-wrap:wrap; gap:6px; }
.blaettern-seiten a,.blaettern-seiten span{
display:inline-flex; align-items:center; justify-content:center;
min-width:48px; min-height:48px; padding:0 12px;
font-weight:700; border:1px solid var(--line); background:var(--paper-2);
}
.blaettern-seiten a:hover{ border-color:var(--kohle); }
.blaettern-seiten .aktuell{ background:var(--kohle); border-color:var(--kohle); color:#fff; }
/* ---------- Offene Angaben ----------
Was noch fehlt, soll man sehen. Ein unauffaellig gesetzter Platzhalter
wird bei der Abnahme uebersehen und geht so live. */
.offen{
display:inline-block; padding:1px 8px;
background:rgba(213,13,13,.08); color:var(--rot);
border:1px dashed rgba(213,13,13,.45);
font-size:.92em; font-weight:600;
}
.bild-fehlt{
display:flex; align-items:center; justify-content:center;
min-height:220px; margin:32px 0;
background:var(--paper-2); border:1.5px dashed var(--line);
}
/* ---------- Eckdaten eines Einsatzes ---------- */
/* Die Trennlinien liegen als Innenschatten auf den Zellen, nicht als
1px-Luecke ueber einer eingefaerbten Flaeche. Bei auto-fit bleibt in der
letzten Reihe fast immer eine Spur frei — die waere sonst als grauer
Kasten neben dem letzten Feld zu sehen gewesen. */
.eckdaten{
display:flex; flex-wrap:wrap;
background:var(--paper-2); border:1px solid var(--line);
margin:0 0 34px;
}
/* flex statt grid: die letzte Zeile hat sonst leere Spuren, und eine leere
Zelle neben dem letzten Feld sieht aus wie eine vergessene Angabe. Mit
flex-grow fuellt das letzte Feld die Zeile aus. */
.eck{
flex:1 1 190px; min-width:0;
display:flex; flex-direction:column; gap:6px; padding:20px 22px;
box-shadow:inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);
}
.eck-breit{ flex-basis:100%; }
.eck-label{
font-size:11px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--text-2);
}
.eck-wert{ font-size:18px; font-weight:600; line-height:1.35; }
.eck-wert a{ color:var(--rot); text-decoration:underline; text-underline-offset:3px; }
.eck-wert a + a{ margin-left:14px; }
/* ---------- Galerie ---------- */
.galerie-abschnitt{ padding-top:0; }
.galerie-titel{ font-size:clamp(22px,2.2vw,28px); margin-bottom:22px; }
.galerie{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.galerie img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--line); }
.galerie-bild{ display:block; position:relative; cursor:zoom-in; }
.galerie-bild::after{
content:""; position:absolute; inset:0;
background:rgba(19,16,16,0); transition:background .15s;
}
.galerie-bild:hover::after{ background:rgba(19,16,16,.22); }
.galerie-bild:focus-visible{ outline:3px solid var(--rot); outline-offset:3px; }
/* ---------- Lightbox ----------
Wird von main.js gebaut und nur eingeblendet, wenn eine Kachel angeklickt
wird. Ohne JavaScript oeffnet der Link das Bild ganz gewoehnlich. */
.lightbox{
display:none; position:fixed; inset:0; z-index:200;
background:rgba(10,8,8,.94);
align-items:center; justify-content:center; padding:64px 24px 84px;
}
.lightbox.offen{ display:flex; }
.lb-buehne{
margin:0; display:flex; flex-direction:column; align-items:center; gap:14px;
max-width:100%; max-height:100%;
}
.lb-buehne img{
max-width:min(94vw,1400px); max-height:calc(100vh - 170px);
width:auto; height:auto; object-fit:contain;
}
.lb-text{
font-size:14px; color:#CFC9C6; text-align:center; max-width:70ch;
line-height:1.5;
}
.lb-zaehler{
position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
font-size:13px; font-weight:700; letter-spacing:.12em;
text-transform:uppercase; color:#8C8582;
}
.lb-schliessen,.lb-nav{
position:absolute; display:flex; align-items:center; justify-content:center;
width:52px; height:52px; border:0; cursor:pointer;
background:rgba(255,255,255,.1); color:#F5F2EF;
transition:background .15s;
}
.lb-schliessen:hover,.lb-nav:hover{ background:var(--rot); }
.lb-schliessen{ top:16px; right:16px; }
.lb-nav{ top:50%; margin-top:-26px; }
.lb-zurueck{ left:16px; }
.lb-vor{ right:16px; }
.lb-nav[hidden]{ display:none; }
.lightbox :focus-visible{ outline:3px solid #fff; outline-offset:2px; }
/* ---------- Fuss ---------- */
footer{ background:var(--paper); border-top:3px solid var(--kohle); padding:60px 0 34px; }
.fuss-spalten{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px; padding-bottom:44px; }
.fuss-marke{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.fuss-marke img{ width:46px; height:46px; }
.fuss-marke span{ font-family:'Archivo Black',sans-serif; font-size:16px; line-height:1.2; text-transform:uppercase; letter-spacing:-.02em; }
.fuss-adresse{ font-size:14px; color:var(--text-2); line-height:1.7; }
.fuss-spalte{ display:flex; flex-direction:column; gap:12px; }
.fuss-h{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.fuss-spalte a{ font-size:14px; color:var(--text-2); min-height:24px; display:flex; align-items:center; }
.fuss-spalte a:hover{ color:var(--rot); }
.fuss-unten{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--text-3); }
.fuss-notruf{ font-weight:700; color:var(--rot); }
/* ---------- Fehlerseite ---------- */
.fehler{ text-align:center; padding:120px 0; }
.fehler-code{ font-family:'Archivo Black',sans-serif; font-size:96px; line-height:1; color:var(--rot); }
.fehler h1{ font-size:clamp(28px,3.6vw,44px); margin:20px 0 16px; }
.fehler-wege{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:32px; }
.fehler-wege a{ display:inline-flex; align-items:center; min-height:48px; padding:0 20px; border:1px solid var(--line); background:var(--paper-2); font-weight:600; }
.fehler-wege a:hover{ border-color:var(--kohle); }
/* ============================================================
Ab hier die Breiten. Geprueft wurde von 320 bis 1440 px —
die Fehler sitzen in den Spruengen zwischen den Haltepunkten,
nicht an den Haltepunkten selbst.
============================================================ */
@media (max-width:1180px){
:root{ --rand:40px; }
.einsatzliste-kopf,.einsatz-zeile{ grid-template-columns:120px 175px 1fr 120px; gap:16px; padding:20px; }
.einsatz-titel{ font-size:17px; }
.fuss-spalten{ grid-template-columns:1fr 1fr; gap:36px; }
}
/* Sechs Menuepunkte plus Schaltflaeche brauchen neben dem ausgeschriebenen
Namen rund 1290 px. Zwischen 900 und 1290 px stand die Navigation deshalb
ueber dem rechten Seitenrand und schob die ganze Seite hinaus — sichtbar
nur daran, dass die Notrufzeile rechts abgeschnitten war. */
@media (max-width:1290px){
nav.haupt a:not(.btn){ display:none; }
nav.haupt .btn{ display:none; }
.menu-btn{ display:flex; }
/* Ohne das klebt der Kopf nicht, und die Menuetaste ist nur ganz oben auf
der Seite erreichbar — auf einer Seite von mehreren tausend Pixeln
Hoehe heisst das: erst hochscrollen, dann Menue. */
header{ position:sticky; top:0; }
}
@media (max-width:900px){
.aufmacher-innen{ grid-template-columns:1fr; }
.aufmacher-text{ padding:64px var(--rand); }
.zahl:first-child{ padding-left:var(--rand); }
.zahl:last-child{ padding-right:var(--rand); }
.aufmacher-bild{ min-height:340px; order:-1; }
.aufmacher-bild::after{ display:none; }
.technik-innen{ grid-template-columns:1fr; }
.technik-text{ padding:64px var(--rand); }
.technik-bilder{ min-height:240px; }
/* Auf schmalen Anzeigen laeuft bereits der querformatige Ausschnitt; der
passt fast genau in den Streifen und braucht keine Verschiebung. */
.technik-bilder img{ object-position:50% 50%; }
/* Zwei Spalten statt sechs: die Randspalten entfallen, damit duerfen
die aeusseren Kacheln auch nicht mehr ueber zwei Spalten laufen. */
.zahlen-innen{ grid-template-columns:1fr 1fr; }
.zahl:first-child,.zahl:last-child{ grid-column:auto; }
.zahl{ border-bottom:1px solid var(--linie-dunkel); padding:32px 28px; }
.zahl:nth-child(2){ border-right:0; }
section{ padding:64px 0; }
}
@media (max-width:720px){
.notruf .wrap{ flex-direction:column; align-items:flex-start; gap:6px; }
.notruf-rechts{ font-size:12px; }
/* Die Tabelle wird zur Liste. Vier Spalten auf 360 px waeren entweder
unlesbar klein oder wuerden die Seite seitwaerts schieben. */
.einsatzliste-kopf{ display:none; }
.einsatz-zeile{ grid-template-columns:1fr; gap:10px; padding:22px 20px; }
.einsatz-quelle{ text-align:left; }
.einsatz-titel{ font-size:19px; }
.zahlen-innen{ grid-template-columns:1fr; }
.zahl{ border-right:0; }
.fuss-spalten{ grid-template-columns:1fr; gap:32px; }
.blaettern{ flex-direction:column; align-items:stretch; }
.galerie{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.eck{ flex-basis:100%; }
/* Auf dem Telefon nimmt das Bild die Flaeche, die Pfeile ruecken nach
unten neben den Zaehler — mittig ueberdeckten sie sonst das Motiv. */
.lightbox{ padding:60px 12px 90px; }
.lb-buehne img{ max-height:calc(100vh - 180px); }
.lb-nav{ top:auto; bottom:14px; margin-top:0; width:48px; height:48px; }
.lb-zurueck{ left:14px; }
.lb-vor{ right:14px; }
.lb-zaehler{ bottom:30px; }
}
@media (max-width:560px){
/* Der Markenblock darf jetzt doch nachgeben. flex-shrink:0 schuetzt ihn
auf dem Desktop davor, von der Navigation zusammengedrueckt zu werden —
auf dem Telefon steht daneben nur die Menuetaste, und "Freiwillige
Feuerwehr Langwaid" ist laenger als der halbe Bildschirm. Ohne diese
Regel schob der Kopf die Seite auf einem 390 px breiten Geraet um 32 px
nach rechts, sichtbar an jedem abgeschnittenen Zeilenende. */
.marke{ flex-shrink:1; min-width:0; }
.marke-name{ font-size:14px; }
}
@media (max-width:420px){
:root{ --rand:20px; }
.marke img{ width:46px; height:46px; }
.marke-name{ font-size:13px; line-height:1.15; }
.marke-ort{ display:none; }
}