/* ============================================================
   FKB Adria-Pool — Muster-Seite
   Abgeleitet aus WEB-DESIGN-SYSTEM.md (FKB), angepasst:
   FKB-Blau als Signal, FKB-Rot sparsamer Pop, Adria-Blau in Verläufen.
   Leitplanken: mobil-first · wenig Daten · Zielgruppe 45+ (große Typo,
   hoher Kontrast, klare CTAs, dezente Bewegung, WCAG-AA).
   ============================================================ */

/* Archivo — lokal gehostet (DSGVO + weniger Daten), Variable Font 400–800 */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --ink:#0F1E3D;        /* Navy — Text & dunkle Flächen */
  --paper:#FFFFFF;
  --signal:#0C60AC;     /* FKB-Blau — Akzent/Links/Buttons */
  --signal-dk:#094B86;  /* Hover */
  --pop:#E2001A;        /* FKB-Rot — sehr sparsam (Sicherheit/Kindersicherung) */
  --sea1:#0C60AC;       /* Adria-Verlauf dunkel */
  --sea2:#4Fb0e0;       /* Adria-Verlauf hell */
  --mut:#54607A;        /* gedämpfter Fließtext (AA auf Weiß) */
  --line:#E2E6EC;
  --soft:#F4F7FA;       /* helle Flächen */
  --radius:8px;
  --shadow:0 18px 50px rgba(15,30,61,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:1200px; margin:0 auto; padding:0 22px}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-weight:700; line-height:1.16; letter-spacing:-.014em; margin:0}
p{margin:0}
.mut{color:var(--mut)}
.signal{color:var(--signal)}
.label{font-weight:700; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--signal)}

/* skip-link (A11y) */
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; z-index:200}
.skip:focus{left:12px; top:12px; border-radius:6px}

/* ---------- Buttons (große Touch-Ziele) ---------- */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:1rem;
  padding:15px 26px; border-radius:var(--radius); transition:.18s; cursor:pointer; border:0; min-height:52px}
.btn-signal{background:var(--signal); color:#fff}
.btn-signal:hover{background:var(--signal-dk)}
.btn-line{border:1.5px solid var(--ink); background:transparent; color:var(--ink)}
.btn-line:hover{background:var(--ink); color:#fff}
.btn-white{background:#fff; color:var(--ink)}
.arrow{transition:transform .18s}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- Header / Nav ---------- */
nav{position:sticky; top:0; z-index:90; background:#fff; border-bottom:1px solid var(--line)}
nav .bar{height:72px; display:flex; align-items:center; justify-content:space-between; gap:16px}
nav .brand{display:flex; align-items:center; gap:12px}
nav .brand img{height:38px; width:auto}
nav .brand .bt{font-weight:700; font-size:.78rem; letter-spacing:.02em; color:var(--mut); line-height:1.1; display:none}
@media(min-width:560px){nav .brand .bt{display:block}}
.navlinks{display:none; gap:26px; align-items:center}
.navlinks a{font-weight:600; font-size:.98rem; padding:6px 0; border-bottom:2px solid transparent}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--signal); border-bottom-color:var(--signal)}
.navcta{display:none}
@media(min-width:940px){.navlinks{display:flex} .navcta{display:inline-flex}}
.burger{display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; padding:12px; cursor:pointer}
@media(min-width:940px){.burger{display:none}}
.burger span{width:26px; height:2.5px; background:var(--ink); border-radius:2px; transition:.2s}
.mobile{display:none; border-top:1px solid var(--line); background:#fff}
.mobile.open{display:block}
.mobile a{display:block; padding:15px 22px; font-weight:600; font-size:1.05rem; border-bottom:1px solid var(--line)}
.mobile a:last-child{border-bottom:0}

/* ---------- Hero ---------- */
.hero{position:relative; color:#fff; overflow:hidden}
.hero-bg{position:absolute; inset:0; background:
    radial-gradient(120% 100% at 80% 0%, rgba(79,176,224,.55), transparent 55%),
    linear-gradient(160deg, #0a2a54 0%, var(--sea1) 55%, #0a4f8f 100%)}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 15% 90%, rgba(255,255,255,.10), transparent 60%)}
.hero .wrap{position:relative; padding:78px 22px 92px}
.hero h1{font-size:clamp(2.05rem,5.4vw,3.5rem); max-width:16ch}
.hero .sub{color:#dbe8f6; font-size:clamp(1.05rem,2.4vw,1.28rem); max-width:40ch; margin-top:20px}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
.hero .flag{display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  background:rgba(255,255,255,.14); padding:7px 15px; border-radius:100px; font-weight:600; font-size:.9rem}

/* Trust-Streifen */
.trust{background:var(--ink); color:#cdd7e6}
.trust .wrap{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,.10)}
@media(min-width:760px){.trust .wrap{grid-template-columns:repeat(4,1fr)}}
.trust .t{background:var(--ink); padding:20px 18px}
.trust .t b{display:block; font-size:1.05rem; color:#fff}
.trust .t span{font-size:.86rem}

/* ---------- Sections ---------- */
.sec{padding:74px 0}
.sec.soft{background:var(--soft)}
.sec-h{display:flex; align-items:center; gap:14px; margin-bottom:30px}
.sec-h .no{font-weight:800; color:var(--signal); font-size:1.15rem}
.sec-h .br{flex:1; height:1px; background:var(--line)}
.sec h2{font-size:clamp(1.6rem,3.6vw,2.4rem); max-width:20ch}
.lead{font-size:1.12rem; max-width:60ch; margin-top:14px; color:var(--mut)}

/* Split Text|Bild */
.split{display:grid; grid-template-columns:1fr; gap:30px; align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr; gap:52px} .split.rev .media{order:-1}}
.media{border-radius:12px; box-shadow:var(--shadow); overflow:hidden; aspect-ratio:3/2;
  background:linear-gradient(150deg,var(--sea1),var(--sea2)); position:relative}
.media .ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center; padding:22px; gap:8px}
.media .ph .ic{font-size:2.2rem; opacity:.9}
.media .ph small{font-size:.82rem; opacity:.85; max-width:26ch; font-weight:600; letter-spacing:.02em}
.media .tag{position:absolute; left:12px; top:12px; background:rgba(255,214,10,.95); color:#5a4a00;
  font-weight:700; font-size:.72rem; padding:5px 10px; border-radius:6px; letter-spacing:.03em}

/* Karten (Schmerz→Lösung / Leistungen) */
.grid{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:640px){.grid.c2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid.c3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--line); border-radius:12px; padding:24px; background:#fff; height:100%}
.card .ic{width:46px; height:46px; border-radius:10px; background:var(--soft); display:flex; align-items:center;
  justify-content:center; font-size:1.4rem; margin-bottom:14px}
.card h3{font-size:1.16rem; margin-bottom:8px}
.card p{color:var(--mut); font-size:1rem}
.card.pain{background:var(--soft); border-color:transparent}
.card.pain .q{font-style:italic; color:var(--ink); font-weight:600; margin-bottom:10px; font-size:1.05rem}
.card.pain .a{color:var(--mut)} .card.pain .a b{color:var(--signal)}

/* Liste mit Haken */
.ticks{list-style:none; padding:0; margin:18px 0 0}
.ticks li{position:relative; padding:9px 0 9px 34px; border-bottom:1px solid var(--line); font-size:1.05rem}
.ticks li::before{content:"✓"; position:absolute; left:2px; top:8px; color:#fff; background:var(--signal);
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700}

/* Paket-Box */
.paket{border:2px solid var(--signal); border-radius:16px; padding:30px; background:#fff; box-shadow:var(--shadow)}
.paket .pk-name{font-size:1.5rem; font-weight:800}

/* CTA-Band */
.cta-band{background:linear-gradient(160deg,var(--ink),#0a3a6b); color:#fff; text-align:center; padding:88px 0}
.cta-band h2{font-size:clamp(1.7rem,4vw,2.6rem)}
.cta-band p{color:#c7d3e6; max-width:44ch; margin:16px auto 26px; font-size:1.12rem}

/* Formular */
.form{display:grid; grid-template-columns:1fr; gap:16px; max-width:640px}
@media(min-width:620px){.form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}}
.field label{display:block; font-weight:600; font-size:.95rem; margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; padding:14px 15px; font:inherit; font-size:1rem;
  border:1.5px solid var(--line); border-radius:8px; background:#fff; color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(12,96,172,.28); border-color:var(--signal)}
.checkline{display:flex; gap:12px; align-items:flex-start; font-size:.95rem; color:var(--mut)}
.checkline input{width:22px; height:22px; margin-top:2px; flex-shrink:0}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:#9fabc0}
footer .wrap{padding:52px 22px 30px; display:grid; grid-template-columns:1fr; gap:30px}
@media(min-width:760px){footer .wrap{grid-template-columns:1.4fr 1fr 1fr}}
footer h4{color:#fff; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px}
footer a{display:block; padding:5px 0; color:#c2cdde; font-size:.98rem}
footer a:hover{color:#fff}
footer .logo{background:#fff; padding:12px 14px; border-radius:10px; display:inline-block; margin-bottom:14px}
footer .logo img{height:34px}
.legal{border-top:1px solid rgba(255,255,255,.12); margin-top:8px}
.legal .wrap{grid-template-columns:1fr; padding:18px 22px; font-size:.85rem; display:flex;
  flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center}

/* Mobile Sticky Call-Bar */
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:95; display:flex; background:#fff;
  border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(15,30,61,.10)}
.callbar a{flex:1; text-align:center; padding:14px 8px; font-weight:700; font-size:.98rem}
.callbar a.c1{color:var(--signal)}
.callbar a.c2{background:var(--signal); color:#fff}
@media(min-width:940px){.callbar{display:none}}
body{padding-bottom:60px}
@media(min-width:940px){body{padding-bottom:0}}

/* Reveal */
.rv{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;
  animation:rv-failsafe .01s linear 2.2s forwards}
.rv.in{opacity:1; transform:none; animation:none}
/* Failsafe: laedt assets/site.js nicht (404) oder wirft es einen Fehler, bevor der
   Reveal-Observer laeuft, wird der .rv-Inhalt nach 2,2s per CSS trotzdem sichtbar.
   Schuetzt gegen die Blank-Page-Klasse vom 2026-07-23 (JS-Error -> alles unter dem Hero
   unsichtbar). Im Normalfall setzt das JS .in lange vor 2,2s -> Failsafe feuert nie. */
@keyframes rv-failsafe{to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none; animation:none} html{scroll-behavior:auto}}

/* Hinweisbalken Entwurf */
.draft{background:var(--pop); color:#fff; text-align:center; font-size:.82rem; font-weight:600; padding:7px 14px}

/* ============================================================
   v2 — Anti-Slop-Refinements · Dropdown · SVG-Icons · Content
   ============================================================ */

/* SVG-Line-Icons statt Emoji */
.ico{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block}
.card .ic{background:transparent; width:44px; height:44px; border:1px solid var(--line); border-radius:11px; color:var(--signal)}
.trust .t b{display:flex; align-items:center; gap:8px}
.trust .t .ico{width:18px; height:18px; stroke:var(--sea2)}

/* Dropdown-Navigation (Desktop hover/focus, mobil Akkordeon) */
.navlinks .drop{position:relative}
.navlinks .drop>a{display:inline-flex; align-items:center; gap:5px; cursor:pointer}
.navlinks .drop>a .chev{width:14px; height:14px; transition:transform .2s}
.navlinks .drop:hover>a .chev,.navlinks .drop:focus-within>a .chev{transform:rotate(180deg)}
.navlinks .panel{position:absolute; top:calc(100% + 14px); left:-14px; min-width:280px; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; opacity:0;
  visibility:hidden; transform:translateY(6px); transition:.18s; z-index:95}
.navlinks .drop:hover .panel,.navlinks .drop:focus-within .panel{opacity:1; visibility:visible; transform:none}
.navlinks .panel a{display:block; border:0; padding:11px 12px; border-radius:8px; font-size:.96rem}
.navlinks .panel a:hover{background:var(--soft); color:var(--signal)}
.navlinks .panel a small{display:block; color:var(--mut); font-weight:500; font-size:.82rem; margin-top:1px}
.mobile .sub a{padding-left:40px; font-size:.98rem; color:var(--mut); background:var(--soft)}
.mobile .subhead{padding:14px 22px 6px; font-weight:700; font-size:.98rem}

/* Bild-Platzhalter: intentionales Duotone-„Foto folgt"-Feld statt AI-Farbklecks */
.media{background:#0d2c53}
.media .ph{background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 22px),
    linear-gradient(160deg,#12386b,#0b2748)}
.media .ph .ic{font-size:0; width:40px; height:40px; opacity:.9}
.media .ph .ic .ico{width:40px; height:40px; stroke:#9cc4ea}
.media .ph small{opacity:.72; font-weight:500; letter-spacing:0; font-size:.8rem}
.media .tag{background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.14)}

/* Servicegebiet-Chips */
.area{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.area .chip{border:1px solid var(--line); border-radius:100px; padding:9px 18px; font-weight:600; font-size:.98rem; background:#fff}
.area .chip.more{border-style:dashed; color:var(--mut); font-weight:500}
.mapband{background:linear-gradient(150deg,#0b2748,#0c60ac); color:#fff; border-radius:16px; padding:34px 30px}

/* Vergleichstabelle (scrollt horizontal auf Mobil) */
/* Scroll-Schatten-Affordanz: die dunklen Kanten-Schatten erscheinen NUR wenn
   die Tabelle breiter ist als der Rahmen (also auf Mobil überläuft) und
   verschwinden am jeweiligen Scroll-Ende. Rein CSS, kein JS, keine Markup-
   Änderung. Technik: weiße "Cover"-Verläufe scrollen mit dem Inhalt (local),
   die Schatten sind an den Rahmen-Kanten fixiert (scroll). Eigener weißer
   Grund macht die Affordanz hintergrund-unabhängig (auch auf .sec.soft) und
   gibt der Tabelle auf soften Sektionen wieder Header/Body-Kontrast. */
.cmp-wrap{
  overflow-x:auto; margin-top:24px;
  border:1px solid var(--line); border-radius:12px;
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(255,255,255,0)) 0 0,
    linear-gradient(to left,  var(--paper) 30%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%,   rgba(15,30,61,.16), rgba(15,30,61,0)) 0 0,
    radial-gradient(farthest-side at 100% 50%, rgba(15,30,61,.16), rgba(15,30,61,0)) 100% 0,
    var(--paper);
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 20px 100%, 20px 100%;
  background-attachment:local, local, scroll, scroll;
}
table.cmp{border-collapse:collapse; width:100%; min-width:560px; font-size:.96rem}
table.cmp th,table.cmp td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line)}
table.cmp thead th{background:var(--soft); font-weight:700}
table.cmp tr:last-child td{border-bottom:0}
table.cmp .yes{color:var(--signal); font-weight:700}
table.cmp .no{color:var(--mut)}

/* Schema-Flow (eigener, markenfreier Fernwartungs-Datenfluss) — responsiv:
   Spalte mit Abwaerts-Pfeilen mobil, Reihe mit Rechts-Pfeilen ab 860px */
.flow{display:flex; flex-direction:column; gap:6px; margin-top:26px}
.flow-step{flex:1; border:1px solid var(--line); border-radius:14px; padding:22px 18px; background:var(--paper); text-align:center}
.flow-step .fic{width:52px; height:52px; margin:0 auto 12px; border-radius:14px; background:var(--soft); display:flex; align-items:center; justify-content:center; color:var(--signal)}
.flow-step .fic svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.flow-step b{display:block; font-size:1.02rem; margin-bottom:5px}
.flow-step span{color:var(--mut); font-size:.92rem; line-height:1.55}
.flow-arrow{display:flex; align-items:center; justify-content:center; color:var(--signal); padding:2px}
.flow-arrow svg{width:22px; height:22px; transform:rotate(90deg)}
@media(min-width:860px){
  .flow{flex-direction:row; align-items:stretch}
  .flow-arrow svg{transform:none}
}

/* Hinweis-/Ehrlichkeitsbox — ruhiger Rahmen statt farbigem Balken */
.note{border:1px solid var(--line); background:var(--soft); padding:17px 20px; border-radius:12px; margin-top:22px}
.note.warn{border-color:#efc9cd; background:#fdf4f5}
.note h4{font-size:1rem; margin-bottom:4px; display:flex; align-items:center; gap:8px}
.note h4::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--signal); flex:none}
.note.warn h4::before{background:var(--pop)}
.note p{color:var(--mut); font-size:.98rem}

/* Sichtbare Tastatur-Fokus-States (A11y) */
a:focus-visible, button:focus-visible, select:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible{
  outline:3px solid rgba(12,96,172,.5); outline-offset:2px; border-radius:5px;
}
.hero a:focus-visible, .cta-band a:focus-visible, .mapband a:focus-visible,
nav .btn-signal:focus-visible, .callbar a:focus-visible{
  outline-color:rgba(255,255,255,.85);
}
:focus:not(:focus-visible){ outline:none; }

/* ============================================================
   v3 — STRUKTUR: einheitliche Banner-Höhen · Breiten · Footer (Stitch)
   ============================================================ */

/* Banner: jede Unterseite exakt gleich hoch, Inhalt vertikal zentriert */
.hero .wrap{display:flex; flex-direction:column; justify-content:center}
/* Banner: ALLE Seiten exakt gleich hoch (auch die Startseite) */
.hero--main .wrap, .hero--sub .wrap{height:470px; min-height:470px; padding:48px 22px}
@media(max-width:760px){
  .hero--main .wrap, .hero--sub .wrap{height:360px; min-height:360px; padding:34px 22px}
}
.hero h1{font-size:clamp(1.75rem,3.5vw,2.6rem); line-height:1.14; max-width:24ch}
.hero .sub{max-width:54ch; font-size:1.02rem; margin-top:16px}
.hero .cta{margin-top:24px}

/* Lesebreite nur über die Textbreite begrenzen – Container bleibt zentriert wie überall
   (KEIN max-width auf .prose selbst, sonst bricht die .wrap-Zentrierung) */
.prose > *{max-width:70ch}
.prose h2{max-width:22ch}

/* ---------- Footer (Vorlage: Google-Stitch-Entwurf) ---------- */
footer{background:#0D1C32; color:rgba(255,255,255,.75); border-top:1px solid rgba(255,255,255,.10)}
footer .ftr{display:grid; grid-template-columns:1fr; gap:44px; padding:64px 22px 58px}
@media(min-width:900px){ footer .ftr{grid-template-columns:1.05fr 1.45fr; gap:64px} }
.ftr-brand img{height:40px; width:auto; display:block; margin-bottom:20px; filter:brightness(0) invert(1); opacity:.95}
.ftr-brand p{max-width:46ch; font-size:.97rem; line-height:1.75; color:rgba(255,255,255,.70)}
.ftr-cols{display:grid; grid-template-columns:1fr 1fr; gap:32px 26px}
@media(min-width:640px){ .ftr-cols{grid-template-columns:repeat(3,1fr)} }
.ftr-h{display:block; font-size:.7rem; letter-spacing:.19em; text-transform:uppercase; color:#F0D9A8; font-weight:700; margin-bottom:14px}
footer .ftr-cols a, footer .ftr-cols .li{display:block; padding:6px 0; font-size:.97rem; color:rgba(255,255,255,.75)}
footer .ftr-cols a:hover{color:#F0D9A8; text-decoration:underline; text-underline-offset:4px}
footer .ftr-cols .li{color:rgba(255,255,255,.45)}
/* Unterzug: Inhalt jeder Kachel mittig */
.trust .t{text-align:center}
.trust .t b{justify-content:center}

/* Modell-Karten mit Foto + Farbmuster (Hersteller-Sortiment) */
.modelgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:28px}
.model{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff}
.model img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block}
.model .b{padding:16px 18px}
.model h3{font-size:1.08rem; margin-bottom:6px}
.model p{color:var(--mut); font-size:.95rem}
.swatches{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:22px}
@media(min-width:560px){ .swatches{grid-template-columns:repeat(3,1fr)} }
@media(min-width:940px){ .swatches{grid-template-columns:repeat(6,1fr)} }
.sw{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff}
.sw i{display:block; height:58px}
.sw span{display:block; padding:9px 11px; font-size:.88rem; font-weight:600; line-height:1.35}
.sw span small{display:block; font-weight:500; font-size:.76rem; margin-top:1px}

.ftr-area{border-top:1px solid rgba(255,255,255,.10); padding:22px 22px 34px}
.ftr-area .ftr-h{margin-bottom:8px}
.ftr-area p{color:rgba(255,255,255,.55); font-size:.9rem; line-height:1.7}

/* Editorial-Feinschliff gegen den „Template"-Look */
.sec h2{letter-spacing:-.02em}
.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--signal); font-weight:700; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--signal)}
.kicker{max-width:62ch}
.prose p{margin-top:14px; color:var(--mut)} .prose h3{margin-top:28px; font-size:1.22rem}
.prose ul{margin:14px 0 0; padding-left:0; list-style:none}
.prose ul li{position:relative; padding:7px 0 7px 26px; color:var(--mut)}
.prose ul li::before{content:""; position:absolute; left:2px; top:15px; width:7px; height:7px; border-radius:50%; background:var(--signal)}

/* Hero mit Foto-Hintergrund */
.hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero .hero-bg{z-index:1; background:linear-gradient(160deg, rgba(9,30,61,.84), rgba(11,58,110,.60) 52%, rgba(9,58,104,.74))}
.hero .hero-bg::after{content:none}
.hero .wrap{z-index:2}

/* Echte Bilder in den Media-Slots */
.media > img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; display:block}

/* Breadcrumbs */
.crumbs{background:#fff; border-bottom:1px solid var(--line)}
.crumbs .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:11px 22px; font-size:.86rem; color:var(--mut)}
.crumbs a{color:var(--mut)} .crumbs a:hover{color:var(--signal)}
.crumbs .sep{opacity:.5}
.crumbs .cur{color:var(--ink); font-weight:600}

/* Mobil-Durchgang: Touch-Ziele >= 44px (45+-Zielgruppe, mobil-first)  [Felix 2026-07-25]
   Gemessen bei 390px (headless Edge, getBoundingClientRect):
   Footer-Links 37,6px -> 45,6px · Burger 41,5px -> 44px. CTAs (.btn min-height:52px) waren bereits ok. */
footer .ftr-cols a{padding-top:10px; padding-bottom:10px}
.burger{min-height:44px; min-width:44px; align-items:center; justify-content:center}