From 2c273802085dc546696ac2f7000cfe702db77122 Mon Sep 17 00:00:00 2001
From: "daniel.reimann" <gitea.daniel@reimann.mx>
Date: Wed, 28 Oct 2026 08:59:09 +0100
Subject: [PATCH] Upload files to "assets/css"

---
 assets/css/style.css | 505 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 505 insertions(+)
 create mode 100644 assets/css/style.css

diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..0e65787
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,505 @@
+:root{
+    --red:#c8102e;
+    --red-hover:#ab0d27;
+    --red-bar:#a01c2f;
+    --red-deep:#871726;
+    --menu-a:#c8102e;
+    --menu-b:#8c0d1e;
+    --ink:#16202e;
+    --ink-soft:#5a6472;
+    --ink-faint:#8a929e;
+    --paper:#f7f8fa;
+    --card:#ffffff;
+    --line:#e8eaee;
+    --line-soft:#eff1f4;
+    --soft:#f0f1f4;
+    --shadow:0 1px 2px rgba(22,32,46,.05), 0 10px 30px -18px rgba(22,32,46,.25);
+    --shadow-lg:0 24px 60px -24px rgba(22,32,46,.45);
+    --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
+    color-scheme: light;
+  }
+  /* Bewusst nur ein Theme: die Seite soll exakt wie die Vorlagen aussehen,
+     unabhaengig vom Dark-Mode-Setting des Geraets. */
+
+  *{box-sizing:border-box}
+  body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; font-size:15px}
+  h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.015em; line-height:1.25}
+  p{margin:0}
+  a{color:inherit; text-decoration:none}
+  button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
+  img,svg{display:block; max-width:100%}
+  ul{margin:0; padding:0; list-style:none}
+  :focus-visible{outline:2px solid var(--red); outline-offset:2px}
+  .sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
+  [hidden]{display:none!important}
+
+  .wrap{max-width:1240px; margin:0 auto; padding-inline:24px}
+  @media (max-width:720px){ .wrap{padding-inline:16px} }
+
+  /* ============ LOGO ============ */
+  .brand{display:flex; align-items:center; gap:11px}
+  .brand .flame{flex:none; color:var(--red)}
+  .brand .word{line-height:1}
+  .brand .l1{display:block; font-size:13px; font-weight:800; letter-spacing:.13em; color:var(--ink)}
+  .brand .l2{display:block; font-size:27px; font-weight:800; letter-spacing:.005em; color:var(--red); margin-top:2px}
+  .brand.on-red .flame{color:#fff}
+  .brand.on-red .l1,.brand.on-red .l2{color:#fff}
+
+  /* ============ UTILITY BAR ============ */
+  .utilitybar{background:var(--red-bar); color:#fff}
+  .utilitybar .wrap{display:flex; justify-content:flex-end; gap:26px; height:34px; align-items:center; font-size:12.5px; font-weight:500}
+  .utilitybar a{display:flex; align-items:center; gap:7px; opacity:.94}
+  .utilitybar a:hover{opacity:1}
+  .utilitybar svg{width:13px; height:13px}
+  @media (max-width:1080px){ .utilitybar{display:none} }
+
+  /* ============ HEADER ============ */
+  header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:#fff; border-bottom:1px solid var(--line)}
+  .headrow{display:flex; align-items:center; gap:26px; height:92px}
+  .headrow .brand{margin-right:-14px; gap:13px}
+  .headrow .brand .flame{width:70px; height:70px}
+  .headrow .brand .l1{font-size:14.5px}
+  .headrow .brand .l2{font-size:31px}
+  .tagline{font-size:10px; line-height:1.35; color:var(--ink-soft); font-weight:500; margin-right:auto;
+    white-space:nowrap; position:relative; top:8px}
+  @media (max-width:1180px){ .tagline{display:none} }
+
+  nav.primary{display:flex; align-items:center; gap:19px; margin-left:auto}
+  nav.primary a{font-size:13px; font-weight:500; color:#3d4757; white-space:nowrap; padding:30px 0; position:relative}
+  nav.primary a:hover{color:var(--red)}
+  nav.primary a.is-active{color:var(--red); font-weight:600}
+  nav.primary a.is-active::after{content:""; position:absolute; left:0; right:0; bottom:27px; height:2px; background:var(--red); border-radius:2px}
+  @media (max-width:1080px){ nav.primary{display:none} }
+
+  .btn-notruf{display:inline-flex; align-items:center; gap:9px; background:var(--red); color:#fff; font-weight:700; font-size:14.5px;
+    padding:13px 21px; border-radius:8px; white-space:nowrap; letter-spacing:.01em}
+  .btn-notruf:hover{background:var(--red-hover)}
+  .btn-notruf svg{width:16px; height:16px}
+  .burger{display:none; width:40px; height:40px; align-items:center; justify-content:center; color:var(--red); margin-left:4px}
+  .burger svg{width:26px; height:26px}
+
+  @media (max-width:1080px){
+    .headrow{height:62px; gap:10px}
+    .headrow .brand{margin-right:auto}
+    .headrow .brand .flame{width:30px; height:30px}
+    .headrow .brand .l1{font-size:9.5px; letter-spacing:.12em}
+    .headrow .brand .l2{font-size:18.5px}
+    nav.primary{display:none}
+    .btn-notruf{padding:9px 14px; font-size:14px; gap:7px; border-radius:8px}
+    .btn-notruf .lbl-long{display:none}
+    .burger{display:flex}
+
+    /* Mobiles Design: roter Header mit weissem Logo (wie Vorlage) */
+    header.site{background:var(--red); border-bottom-color:transparent}
+    header.site .brand .flame{color:#fff}
+    header.site .brand .l1,
+    header.site .brand .l2{color:#fff}
+    header.site .btn-notruf{background:transparent; border:1.6px solid rgba(255,255,255,.85); color:#fff; padding:7px 14px}
+    header.site .btn-notruf:hover{background:rgba(255,255,255,.15)}
+    header.site .burger{color:#fff}
+  }
+  @media (min-width:1081px){ .btn-notruf .lbl-short{display:none} }
+
+  /* ============ MOBILE TABBAR ============ */
+  .tabbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:38; background:var(--red);
+    padding:9px 4px calc(9px + env(safe-area-inset-bottom,0px))}
+  @media (max-width:720px){ .tabbar{display:flex} body{padding-bottom:70px} }
+  .tabbar button{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; font-weight:600; color:rgba(255,255,255,.72); padding:3px 0}
+  .tabbar button svg{width:21px; height:21px}
+  .tabbar button.is-active{color:#fff}
+
+  /* ============ MOBILE MENU (slides in from the RIGHT) ============ */
+  .menu-scrim{position:fixed; inset:0; background:rgba(12,6,8,.5); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:59}
+  .menu-scrim.is-open{opacity:1; pointer-events:auto}
+  .menu-panel{position:fixed; top:0; right:0; bottom:0; z-index:60; width:min(370px,88vw);
+    background:
+      radial-gradient(130% 55% at 12% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
+      linear-gradient(180deg, #c31329 0%, #ab1123 38%, #930f1e 68%, #7d0c19 100%);
+    color:#fff;
+    display:flex; flex-direction:column; transform:translateX(100%);
+    transition:transform .32s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-lg);
+    padding:calc(22px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px))}
+  .menu-panel.is-open{transform:translateX(0)}
+  .menu-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:24px; padding-inline:6px}
+  .menu-top .brand .flame{width:40px; height:40px}
+  .menu-top .brand .l1{font-size:12px}
+  .menu-top .brand .l2{font-size:26px}
+  .menu-close{width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:#fff; margin-top:2px}
+  .menu-close svg{width:24px; height:24px}
+  .menu-scroll{flex:1; overflow-y:auto; margin-inline:-6px; padding-inline:6px}
+  .menu-row{display:flex; align-items:center; gap:14px; padding:13px 12px; font-weight:700; font-size:16px; border-radius:8px; color:#fff}
+  .menu-row svg.ico{width:21px; height:21px; flex:none}
+  .menu-row svg,.menu-util svg{stroke-width:1.7}
+  .menu-row .chev{margin-left:auto; width:16px; height:16px; transition:transform .22s}
+  .menu-item.is-expanded .menu-row .chev{transform:rotate(180deg)}
+  .menu-item.is-active > .menu-row{background:rgba(255,255,255,.16)}
+  .submenu{display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease}
+  .menu-item.is-expanded .submenu{grid-template-rows:1fr}
+  .submenu > div{overflow:hidden}
+  .submenu a{display:block; padding:10px 12px 10px 47px; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.82)}
+  .submenu a:hover{color:#fff}
+  .menu-divider{height:1px; background:rgba(255,255,255,.2); margin:14px 6px 12px}
+  .menu-util a{display:flex; align-items:center; gap:14px; padding:12px; font-weight:600; font-size:15px; border-radius:8px; color:#fff}
+  .menu-util a svg{width:19px; height:19px}
+  .menu-foot{padding-top:6px}
+  .menu-scene{margin-inline:-20px; margin-bottom:2px; pointer-events:none}
+  .menu-scene svg{display:block; width:100%; height:auto}
+  .menu-foot .claim{font-size:16px; font-weight:600; line-height:1.38; margin-bottom:18px; padding-inline:6px; letter-spacing:-.005em}
+  .menu-rule{height:1px; background:rgba(255,255,255,.16); margin:0 6px 18px; width:86%}
+  .menu-social{display:flex; gap:17px; padding-inline:6px}
+  .menu-social a{width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:#fff}
+  .menu-social svg{width:32px; height:32px}
+  @media (min-width:1081px){ .menu-panel,.menu-scrim{display:none} }
+
+  /* ============ SHARED BITS ============ */
+  main{display:block; padding-block:22px 40px}
+  @media (max-width:720px){ main{padding-block:14px 16px} }
+  .card{background:var(--card); border:1px solid var(--line); border-radius:12px}
+  .pill{display:inline-flex; align-items:center; background:var(--red); color:#fff; font-size:10.5px; font-weight:800;
+    letter-spacing:.045em; text-transform:uppercase; padding:5px 10px; border-radius:4px; line-height:1}
+  .cat{font-size:10.5px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; color:var(--red)}
+  .meta{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); font-weight:400}
+  .meta svg{width:14px; height:14px; flex:none; color:var(--ink-faint)}
+  .sec-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
+  .sec-title{display:flex; align-items:center; gap:11px; font-size:19px; font-weight:800; color:var(--ink); white-space:nowrap}
+  .sec-title svg{width:22px; height:22px; color:var(--red); flex:none}
+  .sec-title.upper{font-size:17px; color:var(--red); text-transform:uppercase; letter-spacing:.05em}
+  .more{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--red); white-space:nowrap}
+  .more svg{width:14px; height:14px}
+  .more:hover{color:var(--red-hover)}
+  .ratio{position:relative; overflow:hidden; background:var(--soft)}
+  .ratio img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
+
+  /* ============ HOME: top row ============ */
+  .top-row{display:grid; grid-template-columns:1.82fr 1fr; gap:20px; align-items:stretch}
+  @media (max-width:980px){ .top-row{grid-template-columns:1fr; align-items:start} }
+  #heroWrap{position:relative; min-width:0}
+
+  .hero{position:relative; border-radius:12px; overflow:hidden; display:block; box-shadow:var(--shadow)}
+  .hero .pic{position:relative; padding-top:56.25%}
+  @media (max-width:720px){ .hero .pic{padding-top:72%} }
+  /* Desktop: Bild genau so hoch wie die Einsatzliste daneben */
+  @media (min-width:981px){
+    #heroWrap{height:100%}
+    .hero{height:100%}
+    .hero .pic{padding-top:0; height:100%; min-height:320px}
+  }
+
+  /* Bildergalerie auf Einsatz-Detailseiten */
+  .gallery{position:relative}
+  .gallery .detail-hero{margin-bottom:10px}
+  .gallery .hero-nav{top:50%}
+  .gal-count{position:absolute; right:14px; bottom:24px; z-index:3; background:rgba(12,8,10,.6); color:#fff;
+    font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; font-variant-numeric:tabular-nums}
+  .gal-thumbs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px}
+  .gal-thumb{width:98px; height:64px; border-radius:8px; overflow:hidden; padding:0; border:2px solid transparent;
+    opacity:.6; transition:opacity .15s ease, border-color .15s ease}
+  .gal-thumb img{width:100%; height:100%; object-fit:cover; display:block}
+  .gal-thumb:hover{opacity:1}
+  .gal-thumb.is-active{opacity:1; border-color:var(--red)}
+  @media (max-width:480px){ .gal-thumb{width:76px; height:52px} }
+
+  /* Slider-Steuerung */
+  /* sitzen im Bildbereich oberhalb der Textzone */
+  .hero-nav{position:absolute; top:34%; transform:translateY(-50%); z-index:3; width:38px; height:38px;
+    border-radius:50%; background:rgba(12,8,10,.5); color:#fff; display:flex; align-items:center; justify-content:center;
+    transition:background .18s ease}
+  .hero-nav:hover{background:rgba(12,8,10,.72)}
+  .hero-nav svg{width:19px; height:19px}
+  .hero-nav.prev{left:12px}
+  .hero-nav.next{right:12px}
+  @media (max-width:720px){ .hero-nav{top:26%} }
+  @media (min-width:981px){ .hero-nav{width:42px; height:42px} .hero-nav.prev{left:16px} .hero-nav.next{right:16px} }
+  .hero .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
+  .hero .veil{position:absolute; inset:0; background:linear-gradient(0deg,rgba(9,12,18,.93) 4%,rgba(9,12,18,.62) 38%,rgba(9,12,18,.05) 68%)}
+  .hero .body{position:absolute; left:0; right:0; bottom:0; padding:26px 28px 38px; color:#fff}
+  @media (max-width:720px){ .hero .body{padding:18px 18px 34px} }
+  .hero h2{font-size:30px; font-weight:800; line-height:1.14; margin:13px 0 12px; max-width:20ch; color:#fff}
+  @media (max-width:980px){ .hero h2{font-size:24px} }
+  @media (max-width:420px){ .hero h2{font-size:21px} }
+  .hero .desc{font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.86); max-width:56ch; margin-bottom:14px}
+  @media (max-width:980px){ .hero .desc{display:none} }
+  .hero .meta{color:rgba(255,255,255,.88)}
+  .hero .meta svg{color:rgba(255,255,255,.8)}
+  .dots{position:absolute; left:0; right:0; bottom:6px; display:flex; justify-content:center; gap:2px; z-index:3}
+  .dots button{width:22px; height:22px; display:flex; align-items:center; justify-content:center}
+  .dots button::before{content:""; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); transition:all .18s ease}
+  .dots button.is-active::before{background:#fff; width:9px; height:9px}
+
+  /* Einsatz-Liste */
+  .einsatz-card{padding:18px 20px 6px}
+  .einsatz-card .sec-head{margin-bottom:0; padding-bottom:14px; border-bottom:1px solid var(--line)}
+  .ev{display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
+  .ev:last-child{border-bottom:0}
+  .ev .txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
+  .ev .l1{display:flex; align-items:center; gap:13px; flex-wrap:wrap}
+  .ev .time{font-size:14px; color:var(--ink-soft)}
+  .photo-badge{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; line-height:1;
+    color:var(--ink-faint); margin-left:-6px}
+  .photo-badge svg{width:14px; height:14px}
+  .ev .ttl{font-size:17px; font-weight:700; line-height:1.3}
+  .ev .chev{width:20px; height:20px; color:var(--red); flex:none}
+  .sec-title .mob{display:none}
+  @media (max-width:720px){
+    .einsatz-card{background:none; border:0; padding:0}
+    .einsatz-card .sec-head{border-bottom:0; padding-bottom:0; margin-bottom:12px}
+    .sec-title .desk{display:none}
+    .sec-title .mob{display:inline}
+    .sec-title.upper{font-size:19px; color:var(--ink); text-transform:none; letter-spacing:-.015em}
+    .ev-list{display:flex; flex-direction:column; gap:12px}
+    .ev{background:#fff; border:1px solid var(--line); border-radius:12px; padding:15px 16px}
+    .ev .ttl{font-size:16px}
+  }
+
+  /* ============ HOME: three columns ============ */
+  .cols{display:grid; grid-template-columns:1.33fr 1.33fr 1.07fr; gap:20px; align-items:start; margin-top:22px}
+  @media (max-width:1080px){ .cols{grid-template-columns:1fr 1fr} .col-3{grid-column:span 2} }
+  @media (max-width:760px){ .cols{grid-template-columns:1fr} .col-3{grid-column:auto} }
+  .panel{padding:18px 20px}
+
+  .feature .shot{border-radius:8px; padding-top:52%; margin-bottom:14px}
+  .feature .pill{margin-bottom:10px}
+  .feature h3{font-size:19px; font-weight:700; margin-bottom:9px}
+  .feature .exc{font-size:14px; line-height:1.6; color:var(--ink-soft); margin-bottom:11px}
+  .mini-list{margin-top:16px; border-top:1px solid var(--line)}
+  .mini{display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line)}
+  .mini:last-child{border-bottom:0; padding-bottom:2px}
+  .mini .shot{width:86px; height:62px; border-radius:6px; flex:none}
+  .mini .ttl{font-size:14px; font-weight:500; line-height:1.4; margin:5px 0 6px}
+  .mini .meta{font-size:11.5px}
+  .mini .meta svg{width:12px; height:12px}
+
+  .wm{display:flex; gap:15px; align-items:flex-start; padding:15px 0; border-bottom:1px solid var(--line)}
+  .wm:first-of-type{padding-top:2px}
+  .wm:last-child{border-bottom:0; padding-bottom:2px}
+  .wm .shot{width:104px; height:78px; border-radius:8px; flex:none}
+  .wm .ttl{font-size:15px; font-weight:500; line-height:1.42; margin:6px 0 8px}
+  .wm .meta{font-size:12.5px}
+
+  .tm{display:flex; gap:16px; align-items:stretch; padding:14px 0; border-bottom:1px solid var(--line)}
+  .tm:first-of-type{padding-top:2px}
+  .tm:last-child{border-bottom:0; padding-bottom:2px}
+  .tm .dt{width:42px; flex:none; text-align:center; color:var(--red); line-height:1}
+  .tm .dt .d{font-size:25px; font-weight:800; letter-spacing:-.02em}
+  .tm .dt .m{font-size:11px; font-weight:800; letter-spacing:.06em; margin-top:3px}
+  .tm .rule{width:1px; background:var(--line); flex:none}
+  .tm .ttl{font-size:14.5px; font-weight:700; margin-bottom:5px; line-height:1.35}
+  .tm .sub{font-size:13px; color:var(--ink-soft); line-height:1.5}
+
+  .mapcard{background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-top:20px; position:relative; overflow:hidden}
+  .mapcard .bg{position:absolute; right:-20px; top:0; bottom:0; width:56%; opacity:.55; color:#c9ccd4}
+  .mapcard .inner{position:relative}
+  .mapcard .txt{font-size:13.5px; color:var(--ink-soft); margin:8px 0 15px; max-width:22ch}
+  .btn-red{display:inline-flex; align-items:center; gap:9px; background:var(--red); color:#fff; font-weight:700; font-size:14px; padding:12px 18px; border-radius:8px}
+  .btn-red:hover{background:var(--red-hover)}
+  .btn-red svg{width:14px; height:14px}
+
+  /* ============ SUBPAGES ============ */
+  .pagehead{margin-bottom:22px}
+  .crumbs{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-faint); font-weight:500; margin-bottom:10px}
+  .crumbs svg{width:11px; height:11px}
+  .crumbs a:hover{color:var(--red)}
+  .pagehead h1{font-size:32px; font-weight:800}
+  @media (max-width:720px){ .pagehead h1{font-size:25px} }
+  .pagehead .lead{color:var(--ink-soft); font-size:15.5px; line-height:1.6; max-width:68ch; margin-top:10px}
+  .grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
+  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
+  @media (max-width:900px){ .grid3{grid-template-columns:repeat(2,1fr)} }
+  @media (max-width:640px){ .grid2,.grid3{grid-template-columns:1fr} }
+  .newscard{display:block; overflow:hidden}
+  .newscard .shot{padding-top:56%}
+  .newscard .body{padding:16px 17px 18px}
+  .newscard .pill{margin-bottom:10px}
+  .newscard h3{font-size:17px; font-weight:700; margin-bottom:8px; line-height:1.35}
+  .newscard .exc{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:10px}
+
+  .detail-hero{border-radius:12px; overflow:hidden; padding-top:42%; margin-bottom:22px; box-shadow:var(--shadow)}
+  @media (max-width:720px){ .detail-hero{padding-top:62%} }
+  .split{display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start}
+  @media (max-width:900px){ .split{grid-template-columns:1fr} }
+  .prose{font-size:16px; line-height:1.75; color:var(--ink-soft); max-width:72ch}
+  .prose p{margin-bottom:15px}
+  .prose p.note{font-size:13.5px; color:var(--ink-faint)}
+  .back{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink-soft); margin-bottom:16px}
+  .back svg{width:15px; height:15px}
+  .back:hover{color:var(--red)}
+  .info{padding:20px}
+  .info h4{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:14px; font-weight:800}
+  .info .row{display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.5; margin-bottom:13px}
+  .info .row:last-child{margin-bottom:0}
+  .info .row svg{width:17px; height:17px; color:var(--red); flex:none; margin-top:2px}
+  .units{display:flex; flex-direction:column}
+  .unit{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:13px 0; border-bottom:1px solid var(--line)}
+  .unit:last-child{border-bottom:0}
+  .unit .nm{font-size:14.5px; font-weight:700}
+  /* Links in Einsatzangaben: unauffaellig schwarz, erst bei Mouseover rot */
+  a.nm,a.lnk{color:inherit; border-bottom:1.5px solid transparent; transition:color .15s, border-color .15s}
+  a.nm:hover,a.lnk:hover{color:var(--red); border-bottom-color:var(--red)}
+  .lnk{font-weight:600}
+  .unit .fz{display:flex; gap:6px; flex-wrap:wrap}
+  .unit .fz span{font-size:11.5px; font-weight:700; color:var(--ink-soft); background:var(--soft);
+    border:1px solid var(--line); padding:3px 9px; border-radius:5px; letter-spacing:.02em}
+  /* ---- einheitliches Geruest aller Detailseiten ---- */
+  .detail-head{margin:20px 0 20px}
+  .eyebrow{display:block; font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
+    color:var(--red); margin-bottom:9px}
+  .detail-head h1{font-size:34px; font-weight:800; line-height:1.15}
+  @media (max-width:720px){ .detail-head h1{font-size:26px} }
+  .detail-head .lead{margin-top:12px; font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:66ch}
+
+  .facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:14px; margin-bottom:20px}
+  .fact{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
+  .fact .k{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.05em;
+    text-transform:uppercase; color:var(--ink-faint); margin-bottom:7px}
+  .fact .k svg{width:14px; height:14px; color:var(--red); flex:none}
+  .fact .v{font-size:16.5px; font-weight:700; line-height:1.3}
+
+  .block{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:18px}
+  @media (max-width:560px){ .block{padding:17px 16px} }
+  .block > h2{display:flex; align-items:center; gap:12px; font-size:17px; font-weight:800; margin-bottom:16px}
+  .block > h2 .ic{width:32px; height:32px; border-radius:9px; background:#fdf0f2; color:var(--red);
+    display:flex; align-items:center; justify-content:center; flex:none}
+  .block > h2 .ic svg{width:18px; height:18px}
+  .block .prose{font-size:15.5px}
+  .block .prose p:last-child{margin-bottom:0}
+
+  .side{display:flex; flex-direction:column; gap:16px}
+  @media (min-width:901px){ .side{position:sticky; top:110px} }
+  /* Kompakte Liste in der Seitenspalte (z. B. letzte Einsätze) */
+  .side-items{display:flex; flex-direction:column}
+  .side-item{display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line)}
+  .side-item:first-child{padding-top:0}
+  .side-item:last-child{border-bottom:0; padding-bottom:0}
+  .side-item .shot{width:62px; height:46px; border-radius:7px; flex:none; overflow:hidden}
+  .side-item .cat{display:block; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
+    color:var(--red); margin-bottom:3px}
+  .side-item .ttl{display:block; font-size:13px; font-weight:600; line-height:1.35; transition:color .15s}
+  .side-item .dt{display:block; font-size:11.5px; color:var(--ink-faint); margin-top:4px}
+  .side-item:hover .ttl{color:var(--red)}
+  .side-more{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--red); margin-top:14px}
+  .side-more svg{width:13px; height:13px}
+
+  .side .people{grid-template-columns:1fr; gap:10px}
+  .side .person{padding:13px 14px}
+  .side .person .ava{width:42px; height:42px; font-size:14px}
+
+  /* Detailseiten Ortsfeuerwehr / Jugendfeuerwehr */
+  /* Fahrzeug-Kacheln */
+  .vehicles{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
+  @media (max-width:980px){ .vehicles{grid-template-columns:repeat(2,1fr)} }
+  @media (max-width:560px){ .vehicles{grid-template-columns:1fr} }
+  .veh{border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--card)}
+  .veh .ratio{padding-top:58%}
+  .veh .body{padding:12px 13px 14px}
+  .veh .k{display:block; font-size:15.5px; font-weight:800; letter-spacing:.01em}
+  .veh .t{display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.4; margin-top:3px}
+  .veh .sub{display:block; font-size:11.5px; color:var(--ink-faint); line-height:1.45; margin-top:7px}
+
+  /* Hervorgehobene Kinderfeuerwehr-Karte */
+  .feature-card{display:grid; grid-template-columns:280px 1fr; gap:0; overflow:hidden; margin-bottom:20px}
+  @media (max-width:720px){ .feature-card{grid-template-columns:1fr} }
+  .feature-card .ratio{padding-top:100%}
+  @media (max-width:720px){ .feature-card .ratio{padding-top:52%} }
+  .feature-card .body{padding:22px 24px}
+  @media (max-width:560px){ .feature-card .body{padding:18px 16px} }
+  .feature-card h3{font-size:21px; font-weight:800; margin:8px 0 10px}
+  .feature-card .txt{font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:14px}
+
+  .chips{display:flex; flex-wrap:wrap; gap:8px}
+  .chips a{color:var(--ink-soft); text-decoration:none}
+  .chips a:hover{border-color:var(--red); color:var(--red)}
+  .chips span,.chips a{display:inline-block; font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--card);
+    border:1px solid var(--line); padding:7px 13px; border-radius:999px; transition:border-color .15s, color .15s}
+  .ticks{display:flex; flex-direction:column; gap:9px}
+  .ticks.two{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px}
+  @media (max-width:700px){ .ticks.two{grid-template-columns:1fr} }
+  .ticks li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); line-height:1.5}
+  .ticks svg{width:16px; height:16px; color:var(--red); flex:none; margin-top:2px}
+  .people{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
+  @media (max-width:640px){ .people{grid-template-columns:1fr} }
+  .person{display:flex; align-items:center; gap:14px; padding:14px 16px}
+  .person .ava{width:46px; height:46px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
+    background:linear-gradient(160deg,#c8102e,#8c0d1e); color:#fff; font-weight:800; font-size:15px; letter-spacing:.02em}
+  .person .nm{display:block; font-size:15px; font-weight:700; line-height:1.3}
+  .person .role{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px}
+  .person .mail{display:block; font-size:12px; color:var(--red); margin-top:4px; overflow-wrap:anywhere}
+  .pullquote{font-size:19px; font-weight:800; color:var(--red); line-height:1.35; margin:22px 0 0; max-width:34ch}
+  .sub-sec{margin-top:26px}
+  .sub-sec > .sec-title{margin-bottom:13px}
+
+  /* Autorenbereich unter dem Artikel */
+  .author{display:flex; align-items:center; gap:16px; margin-top:26px; padding:16px 18px;
+    background:var(--card); border:1px solid var(--line); border-radius:12px}
+  .author .ava{width:58px; height:58px; border-radius:50%; flex:none; overflow:hidden; display:flex;
+    align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px;
+    background:linear-gradient(160deg,#c8102e,#8c0d1e)}
+  .author .ava img{width:100%; height:100%; object-fit:cover}
+  .author .ava svg{width:27px; height:27px}
+  .author .lbl{display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
+    color:var(--ink-faint); margin-bottom:5px}
+  .author .nm{display:block; font-size:16px; font-weight:700; line-height:1.3}
+  .author .role{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); margin-top:3px}
+  .author .role svg{width:13px; height:13px; color:var(--ink-faint)}
+  @media (max-width:480px){ .author{gap:13px; padding:14px 15px} .author .ava{width:48px; height:48px} }
+
+  .hint{display:flex; gap:11px; padding:13px 15px; background:#fdf0f2; color:#9a1228; border-radius:9px; font-size:13px; line-height:1.5; margin-bottom:20px}
+  .hint svg{width:17px; height:17px; flex:none; margin-top:1px}
+  .station{display:block; overflow:hidden}
+  .station .shot{padding-top:56%}
+  .station .body{padding:15px 16px 17px}
+  .station h3{font-size:16px; font-weight:700; margin-bottom:6px}
+  .station .desc{font-size:13px; color:var(--ink-soft); line-height:1.5}
+
+  .form{display:flex; flex-direction:column; gap:15px}
+  .field{display:flex; flex-direction:column; gap:7px}
+  .field label{font-size:12.5px; font-weight:700; color:var(--ink-soft)}
+  .field input,.field textarea{border:1px solid var(--line); background:#fff; border-radius:8px; padding:12px 14px; font:inherit; font-size:14.5px; color:var(--ink)}
+  .field textarea{resize:vertical; min-height:110px}
+  .row2{display:grid; grid-template-columns:1fr 1fr; gap:15px}
+  @media (max-width:560px){ .row2{grid-template-columns:1fr} }
+  .ok{display:none; align-items:center; gap:10px; padding:13px 15px; background:#e9f8ee; color:#1d7a3d; border-radius:9px; font-weight:600; font-size:13.5px}
+  .ok.is-on{display:flex}
+  .ok svg{width:17px; height:17px}
+  .searchbox{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:13px 16px; margin-bottom:22px}
+  .searchbox svg{width:19px; height:19px; color:var(--ink-faint); flex:none}
+  .searchbox input{flex:1; border:0; background:none; font:inherit; font-size:15.5px; color:var(--ink)}
+  .searchbox input:focus{outline:none}
+  .empty{padding:44px 20px; text-align:center; color:var(--ink-faint); font-size:14.5px}
+  .mapdemo{border-radius:12px; overflow:hidden; padding-top:48%; margin-bottom:18px; box-shadow:var(--shadow); background:var(--soft)}
+  @media (max-width:720px){ .mapdemo{padding-top:80%} }
+  .legend{display:flex; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); font-weight:500}
+  .legend .dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px}
+
+  /* ============ FOOTER ============ */
+  footer.site{background:var(--red-bar); color:#fff; margin-top:40px}
+  .footgrid{display:grid; grid-template-columns:1.1fr 1.15fr 1fr 1fr; padding-block:16px 12px}
+  .footcol{padding-inline:30px}
+  .footcol:first-child{padding-left:0}
+  .footcol + .footcol{border-left:1px solid rgba(255,255,255,.2)}
+  /* Schmale Viewports: Logo + Kontakt links, Schnellzugriff rechts, Social als eigene Zeile */
+  @media (max-width:760px){
+    .footgrid{grid-template-columns:1fr 1fr; column-gap:16px; row-gap:18px}
+    .footcol{padding-inline:0}
+    .footcol + .footcol{border-left:0}
+    .footcol:nth-child(1){grid-column:1; grid-row:1}
+    .footcol:nth-child(2){grid-column:1; grid-row:2}
+    .footcol:nth-child(3){grid-column:2; grid-row:1 / span 2; padding-left:16px; border-left:1px solid rgba(255,255,255,.2)}
+    .footcol:nth-child(4){grid-column:1 / -1; grid-row:3; display:flex; align-items:center; justify-content:space-between;
+      gap:14px; padding-top:15px; border-top:1px solid rgba(255,255,255,.2)}
+    .footcol:nth-child(4) h5{margin:0}
+    .footbottom{flex-direction:column; align-items:center; text-align:center; gap:7px}
+  }
+  .footcol h5{font-size:12.5px; font-weight:800; margin:0 0 8px; line-height:1.2}
+  .footlist{display:flex; flex-direction:column; gap:5px}
+  .footlist a,.footlist .row{font-size:12px; color:rgba(255,255,255,.88); display:flex; gap:10px; align-items:flex-start; line-height:1.3}
+  .footlist a:hover{color:#fff}
+  .footlist svg{width:15px; height:15px; flex:none; margin-top:1px}
+  .footsocial{display:flex; gap:11px}
+  .footsocial a{width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:#fff}
+  .footsocial svg{width:27px; height:27px}
+  .footbottom{border-top:1px solid rgba(255,255,255,.2); padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));
+    display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:11.5px; color:rgba(255,255,255,.8)}
+  .footbottom .left{display:flex; gap:14px; align-items:center}
+  .footbottom .sep{opacity:.5}
+  .footbottom a{text-decoration:underline; text-underline-offset:2px}
+  @media (max-width:720px){ .footbottom{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))} }