/* Überschriften-Schrift selbst gehostet (SIL Open Font License), keine Verbindung zu Google */
@font-face { font-family: "Barlow SC"; font-weight: 600; font-display: swap; src: url(fonts/barlow-sc-600.woff2) format("woff2") }
@font-face { font-family: "Barlow SC"; font-weight: 700; font-display: swap; src: url(fonts/barlow-sc-700.woff2) format("woff2") }
/* SHALA SENTRIX – Webseite. Navy + Neongelb + Schachbrettband (Linie Sicherheitstechnik).
   Systemschriften, keine externen Fonts/Skripte (DSGVO). */
:root {
  --navy: #0a2a55; --navy2: #071d3c; --neon: #e3f01c; --hell: #f3f6fa; --text: #1c2836; --grau: #5b6b7e; --linie: #d6dee8;
  --kopf: "Barlow SC", Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
  --fliess: "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { font: 17px/1.6 var(--fliess); color: var(--text); background: #fff }
img { max-width: 100%; display: block }
a { color: inherit }
h1, h2, h3, h4, .btn, .nav a, .kicker { font-family: var(--kopf) }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px }
/* zwei Reihen Kacheln wie auf den Türmen; --k = Kantenlänge einer Kachel */
.checker { --k: 28px; height: calc(var(--k) * 2); position: relative;
  background: repeating-conic-gradient(var(--neon) 0 25%, var(--navy) 0 50%) 0 0 / calc(var(--k) * 2) calc(var(--k) * 2) }
/* Mitte: Navy-Feld mit SHALA in Neongelb wie auf den Türmen; Feld auf das Kachelraster gerundet */
.checker:before, .checker:after { content: ""; position: absolute; top: 0; height: 100%; width: calc(var(--k) * 6);
  left: calc(50% - var(--k) * 3); left: round(50% - var(--k) * 3, var(--k)) }
.checker:before { background: var(--navy) }
.checker:after { background: var(--neon); -webkit-mask: url(img/logo-weiss.svg) center / auto 62% no-repeat; mask: url(img/logo-weiss.svg) center / auto 62% no-repeat }

/* Kopf */
.top { position: sticky; top: 0; z-index: 20; background: var(--navy2) }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 72px }
.top .logo img { height: 34px; width: auto }
.nav { display: flex; gap: 22px; margin-left: auto }
.nav a { color: #dfe8f3; text-decoration: none; font-size: 15px; letter-spacing: .3px }
.nav a:hover, .nav a.aktiv { color: var(--neon) }
.btn { display: inline-block; background: var(--neon); color: var(--navy); font-weight: 700; text-decoration: none; letter-spacing: .4px;
  padding: 13px 24px; border-radius: 6px; border: 0; font-size: 16px; cursor: pointer; transition: transform .15s }
.btn:hover { transform: translateY(-2px) }
.btn.hohl { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff }
.btn.navy { background: var(--navy); color: #fff }
.top .btn { padding: 10px 18px; font-size: 15px }
.burger { display: none; margin-left: auto; background: none; border: 0; color: #fff; font-size: 30px; cursor: pointer; line-height: 1; padding: 6px 8px }

/* Hero */
.hero { position: relative; min-height: 640px; display: flex; align-items: center; color: #fff;
  background: var(--navy2) var(--bild) var(--pos, center) / cover no-repeat }
.hero:before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,29,60,.96) 0%, rgba(7,29,60,.82) 38%, rgba(7,29,60,.15) 70%, rgba(7,29,60,0) 100%) }
.hero .wrap { position: relative; width: 100%; padding-top: 44px; padding-bottom: 44px }
.hero .box { max-width: 620px }
.kicker { color: var(--neon); letter-spacing: 3px; font-size: 14px; font-weight: 600; text-transform: uppercase }
.hero h1, .hero .h1 { font: 700 clamp(38px, 6vw, 66px)/1.03 var(--kopf); margin: 14px 0 20px }
.hero h1 em, .hero .h1 em { font-style: normal; color: var(--neon) }
.hero h1.kicker { font: 600 14px/1.4 var(--kopf); margin: 0; letter-spacing: 3px }
.hero p { font-size: 19px; color: #d5e0ee; margin-bottom: 30px }
.hero .knoepfe { display: flex; gap: 14px; flex-wrap: wrap }
.hero.klein { min-height: 540px }
.leitsatz { display: inline-flex; align-items: baseline; gap: 2px; background: var(--neon); color: var(--navy); padding: 8px 16px; border-radius: 6px;
  margin: -6px 0 22px; transform: rotate(-1.5deg); box-shadow: 0 6px 18px rgba(0,0,0,.3) }
.leitsatz b { font: 700 clamp(18px, 2.2vw, 24px) var(--kopf); letter-spacing: .3px } .leitsatz span { font-weight: 700 }
.sternchen { font-size: 12.5px !important; color: #9fb1c7 !important; margin: 16px 0 0 !important; max-width: 520px }
.pfad { font-size: 14px; color: #c9d6e6; margin-bottom: 8px } .pfad a { color: #c9d6e6 }

/* Zahlen */
.zahlen { background: var(--navy); color: #fff }
.zahlen .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 34px 24px }
.zahlen b { display: block; font: 700 34px/1.1 var(--kopf); color: var(--neon) }
.zahlen span { font-size: 15px; color: #dfe8f3 }

/* Abschnitte */
section { padding: 88px 0 }
section.grau { background: var(--hell) }
section.dunkel { background: var(--navy2); color: #fff }
h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; color: var(--navy); margin: 10px 0 16px }
.dunkel h2 { color: #fff }
h2 span { background: linear-gradient(transparent 62%, var(--neon) 62%); padding: 0 4px }
.dunkel h2 span { background: none; color: var(--neon) }
.lead { font-size: 19px; color: var(--grau); max-width: 760px; margin-bottom: 44px }
.dunkel .lead { color: #c9d6e6 }
.kicker.navy { color: var(--navy) }
.grid { display: grid; gap: 24px }
.g2 { grid-template-columns: repeat(2, 1fr) } .g3 { grid-template-columns: repeat(3, 1fr) } .g4 { grid-template-columns: repeat(4, 1fr) }
.g5 { grid-template-columns: repeat(5, 1fr) }

/* Bereiche */
.bereich { position: relative; border-radius: 14px; overflow: hidden; min-height: 440px; color: #fff; display: flex; align-items: flex-end;
  background: var(--navy); text-decoration: none }
.bereich .hg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.bereich:before { content: ""; z-index: 1; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,29,60,0) 22%, rgba(7,29,60,.96) 76%) }
.bereich .in { position: relative; z-index: 2; padding: 28px }
.art { display: inline-block; background: var(--neon); color: var(--navy); font: 700 13px var(--kopf); letter-spacing: 1px;
  padding: 4px 10px; border-radius: 4px; margin-bottom: 12px }
.bereich h3 { font-size: 27px; line-height: 1.1; margin-bottom: 8px }
.bereich p { color: #d5e0ee; font-size: 16px }
.bereich .mehr { display: inline-block; margin-top: 14px; color: var(--neon); font: 600 16px var(--kopf) }

.bereich.klein { min-height: 340px } .bereich.klein h3 { font-size: 24px }

/* Fotokacheln: Melder eingebaut */
.fotokarte { background: #fff; border-radius: 12px; overflow: hidden; border-top: 5px solid var(--navy); box-shadow: 0 6px 24px rgba(10,42,85,.08); text-decoration: none }
.fotokarte .bild { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--hell) }
.fotokarte h3 { font-size: 19px; color: var(--navy); padding: 14px 18px 16px }
.fotokarte.cta { background: var(--navy); color: #fff; padding: 28px 22px; display: flex; flex-direction: column; justify-content: center; gap: 12px }
.fotokarte.cta h3 { color: #fff; padding: 0; font-size: 22px } .fotokarte.cta p { color: #c9d6e6 } .fotokarte.cta .btn { align-self: flex-start }

/* Modelle */
.modell { background: #fff; border-radius: 12px; overflow: hidden; border-top: 5px solid var(--navy); box-shadow: 0 6px 24px rgba(10,42,85,.08);
  display: flex; flex-direction: column; text-decoration: none }
.modell .bild { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%; background: var(--navy2) }
.modell .in { padding: 18px 18px 22px; display: flex; flex-direction: column; flex: 1 }
.modell small { font: 600 12px var(--kopf); letter-spacing: 1.5px; color: var(--grau); text-transform: uppercase }
.modell h3 { font-size: 23px; color: var(--navy); margin: 2px 0 8px }
.modell p { font-size: 15px; color: var(--grau); flex: 1 }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px }
.chips span { background: var(--navy); color: #fff; font: 600 13px var(--kopf); padding: 4px 9px; border-radius: 4px }
.chips span b { color: var(--neon); font-weight: 700 }

.konfig { display: grid; grid-template-columns: 1fr 2fr; gap: 28px; align-items: center; margin-top: 34px; background: var(--navy); color: #fff;
  border-radius: 14px; padding: 28px 30px; border-left: 8px solid var(--neon) }
.konfig h3 { font-size: 24px; color: var(--neon); margin-bottom: 6px } .konfig p { color: #c9d6e6; font-size: 15.5px }
.chips.gross span { font-size: 14px; padding: 7px 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(227,240,28,.5) }
@media (max-width: 1080px) { .konfig { grid-template-columns: 1fr } }

/* Karten mit Symbol */
.karte { background: var(--hell); border-radius: 12px; padding: 26px; border-top: 5px solid var(--navy) }
.grau .karte { background: #fff }
.karte .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--neon); display: grid; place-items: center; margin-bottom: 14px }
.ic svg { width: 28px; height: 28px; stroke: var(--navy); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.karte h3 { font-size: 20px; color: var(--navy); margin-bottom: 6px }
.karte p { font-size: 15.5px; color: var(--grau) }

/* Zwei Spalten mit Bild */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center }
.split.um .foto { order: 2 }
.split .foto { width: 100%; height: 500px; object-fit: cover; border-radius: 14px; background: var(--navy) }
.check { list-style: none; margin: 18px 0 28px }
.check li { position: relative; padding: 7px 0 7px 36px }
.check li:before { content: "✓"; position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--neon);
  color: var(--navy); font-weight: 700; font-size: 14px; display: grid; place-items: center }
.hinweis { font-size: 14px; color: var(--grau) }
.dunkel .hinweis { color: #9fb1c7 }
.split > * { min-width: 0 }
.werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 26px }
.werte div { background: var(--navy); color: #fff; border-radius: 10px; padding: 14px; text-align: center }
.werte b { display: block; font: 700 24px/1.1 var(--kopf); color: var(--neon) }
.werte span { font-size: 13px; color: #c9d6e6 }

/* Galerie echte Einsätze */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.wischen { display: none; font-size: 14px; color: #9fb1c7; margin-top: 10px } .wischen.hell { color: var(--grau) }
.galerie figure { border-radius: 12px; overflow: hidden; background: var(--navy); position: relative }
.galerie img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover }
.galerie figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; font: 600 16px var(--kopf);
  background: linear-gradient(180deg, rgba(7,29,60,0), rgba(7,29,60,.92)) }
@media (max-width: 1080px) { .galerie { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 40%; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 6px } .galerie figure { scroll-snap-align: start } .wischen { display: block } }
@media (max-width: 1080px) { .wischen.hell { display: none } }
@media (max-width: 620px) {
  .leiste, .grid:has(> .modell) { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; padding-bottom: 10px; margin-right: -16px; padding-right: 16px } .leiste > *, .grid:has(> .modell) > * { scroll-snap-align: start } .wischen.hell { display: block }
  .bereich { min-height: 360px } .bereich.klein { min-height: 270px } .bereich .in { padding: 22px }
}
@media (max-width: 620px) { .galerie { gap: 10px; grid-auto-columns: 72% } .galerie figcaption { font-size: 13px; padding: 28px 10px 10px } }

/* FLEX: Bilder mit eingezeichneten Meldern */
.flexbilder { display: grid; gap: 22px }
.flexbilder figure { margin: 0 }
.bildbox { position: relative; border-radius: 14px; overflow: hidden; background: var(--navy2) }
.bildbox img { width: 100%; height: auto }
.bildbox svg { position: absolute; inset: 0; width: 100%; height: 100%; font-family: var(--kopf) }
.flexbilder figcaption { font-size: 14px; color: var(--grau); margin-top: 8px }
.puls { fill: none; stroke: #e3f01c; stroke-width: 4; animation: puls 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center }
@keyframes puls { from { transform: scale(1); opacity: .9 } to { transform: scale(3.2); opacity: 0 } }
.lauf { animation: lauf 1.6s linear infinite } @keyframes lauf { to { stroke-dashoffset: -72 } }
.blink { animation: blink 1.1s steps(2, start) infinite } @keyframes blink { to { visibility: hidden } }
@media (prefers-reduced-motion: reduce) { .puls, .lauf, .blink { animation: none } }

/* Ablauf */
.schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s }
.schritt { border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 24px }
.schritt:before { counter-increment: s; content: counter(s); display: block; font: 700 44px/1 var(--kopf); color: var(--neon) }
.schritt h3 { font-size: 21px; margin: 10px 0 6px }
.schritt p { color: #c9d6e6; font-size: 15.5px }

.zitat { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; margin: 26px 0 0; padding: 20px 22px;
  background: #fff; border-radius: 14px; border-left: 6px solid var(--neon); box-shadow: 0 6px 24px rgba(10,42,85,.08) }
.zitat img { grid-row: span 2; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 3px solid var(--navy) }
.zitat blockquote { font: 600 18px/1.45 var(--kopf); color: var(--navy) } .zitat figcaption { font-size: 14px; color: var(--grau) }
.zitat:not(:has(img)) { grid-template-columns: 1fr }

.partner { display: flex; gap: 16px; align-items: center; margin: 4px 0 22px }
.partner img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 3px solid var(--neon) }
.partner small { display: block; font: 600 12px var(--kopf); letter-spacing: 1.5px; text-transform: uppercase; color: var(--neon) }
.partner b { display: block; font: 700 20px var(--kopf); color: #fff } .partner span { color: #c9d6e6; font-size: 14px }

/* Technische Daten */
table.daten { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; font-size: 15.5px }
table.daten td { padding: 12px 16px; border-bottom: 1px solid var(--linie); vertical-align: top }
table.daten td:first-child { font: 600 15px var(--kopf); color: var(--navy); width: 36%; background: #f8fafc }
.check li b { color: var(--navy) }

/* FAQ */
.faq { max-width: 900px }
.faq details { background: #fff; border-radius: 10px; margin-bottom: 12px; border-left: 5px solid var(--navy) }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; font: 600 19px var(--kopf); color: var(--navy); position: relative }
.faq summary::-webkit-details-marker { display: none }
.faq summary:after { content: "+"; position: absolute; right: 22px; top: 14px; font-size: 28px; color: var(--navy) }
.faq details[open] summary:after { content: "–" }
.faq details p { padding: 0 24px 22px; color: var(--grau) }

/* Anfrage */
.anfrage { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px }
.anfrage .kontakt p { margin-bottom: 18px; color: #c9d6e6 }
.anfrage .kontakt b { display: block; font: 700 26px var(--kopf); color: var(--neon) }
form { background: #fff; color: var(--text); border-radius: 14px; padding: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
form label { font: 600 14px var(--kopf); color: var(--navy); display: flex; flex-direction: column; gap: 6px }
form .voll { grid-column: 1 / -1 }
input, select, textarea { font: 16px var(--fliess); padding: 12px; border: 1px solid var(--linie); border-radius: 6px; width: 100% }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--neon); border-color: var(--navy) }

.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
/* Textseiten */
.textseite { padding: 60px 0 80px } .textseite .wrap { max-width: 860px }
.textseite h1 { font-size: clamp(32px, 4vw, 44px); color: var(--navy); margin: 8px 0 22px }
.textseite h2 { font-size: 22px; margin: 28px 0 8px } .textseite p { margin-bottom: 12px } .textseite a { color: var(--navy) }
.entwurf { background: var(--neon); color: var(--navy); font: 700 15px var(--kopf); padding: 12px 16px; border-radius: 8px; margin-bottom: 20px }
mark { background: #fff59d; padding: 0 3px }
.band-hell { background: var(--hell); border-left: 6px solid var(--neon); border-radius: 12px; padding: 22px 24px; margin: 32px 0 }
.band-hell h3 { font: 700 22px var(--kopf); color: var(--navy); margin-bottom: 6px } .band-hell p { margin-bottom: 14px }
.textseite .lead { margin-bottom: 26px }

.staedte a { background: var(--navy); color: #fff; font: 600 15px var(--kopf); padding: 9px 16px; border-radius: 6px; text-decoration: none; border: 0 }
.staedte a:hover { background: var(--neon); color: var(--navy) }
.check li a { color: var(--navy); font-weight: 600 }

.fehlertext { background: #ffe1e1; color: #8a0000; padding: 10px 12px; border-radius: 6px; font-size: 14px }

/* Aktionsleiste Handy */
.aktionsleiste { display: none }
@media (max-width: 620px) {
  .aktionsleiste { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--navy2); box-shadow: 0 -4px 18px rgba(0,0,0,.25) }
  .aktionsleiste a { text-align: center; padding: 13px 8px; border-radius: 6px; font: 700 15px var(--kopf); text-decoration: none }
  .aktionsleiste a:first-child { color: #fff; box-shadow: inset 0 0 0 2px #fff }
  body { padding-bottom: 72px }
}

/* Fuß */
footer { background: var(--navy2); color: #b9c7d8; font-size: 15px }
footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 56px 24px 40px }
footer h4 { color: #fff; font-size: 16px; margin-bottom: 12px; letter-spacing: .5px }
footer a { display: block; text-decoration: none; padding: 3px 0 } footer a:hover { color: var(--neon) }
footer .recht { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; font-size: 13px }

/* Tablet / Handy */
@media (max-width: 1080px) {
  .nav { display: none } .burger { display: block; margin-left: 0 } .top .btn { margin-left: auto }
  .nav.auf { display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: var(--navy2); padding: 16px 24px 24px; gap: 14px }
  .g3, .g4, .g5 { grid-template-columns: repeat(2, 1fr) } .split, .anfrage { grid-template-columns: 1fr } .split.um .foto { order: 0 }
  .split .foto { height: 340px } .schritte, .zahlen .wrap { grid-template-columns: repeat(2, 1fr) } footer .wrap { grid-template-columns: 1fr 1fr }
}
@media (max-width: 620px) {
  .top .btn { display: none } .burger { margin-left: auto }
  body { font-size: 16px } .wrap { padding: 0 16px } .checker { --k: 20px } section { padding: 60px 0 }
  .hero, .hero.klein { min-height: 600px; align-items: flex-end; padding-bottom: 44px }
  .hero:before { background: linear-gradient(180deg, rgba(7,29,60,.35) 0%, rgba(7,29,60,.95) 58%) }
  .hero.start { --bild: url(img/hero_handy.webp) !important; --pos: center top !important; min-height: 0; background-size: 100% auto; background-position: center top }
  .hero.start .wrap { padding-top: 118vw }  /* Text erst unter dem Turm; Bild ist 1,24 x so hoch wie breit */
  .hero.start:before { background: linear-gradient(180deg, rgba(7,29,60,0) 0%, rgba(7,29,60,0) 36%, rgba(7,29,60,.6) 43%, rgba(7,29,60,.94) 50%, #071d3c 56%) }
  .g2, .g3, .g4, .g5, .schritte, form { grid-template-columns: 1fr } footer .wrap { grid-template-columns: 1fr }
  .zahlen .wrap { padding: 26px 16px } .zahlen b { font-size: 28px } .werte b { font-size: 19px } .werte div { padding: 12px 6px } .werte span { font-size: 12px; line-height: 1.3; display: block } form { padding: 20px }
}

/* Sprunglink und sichtbarer Tastaturfokus (hell: Navy, dunkel: Neongelb) */
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--neon); color: var(--navy); font: 700 15px var(--kopf);
  padding: 10px 16px; border-radius: 6px; text-decoration: none }
.skip:focus { top: 12px }
a:focus-visible, button:focus-visible, summary:focus-visible, .tabelle-scroll:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px }
.top :focus-visible, .dunkel :focus-visible, .hero :focus-visible, footer :focus-visible, .bereich:focus-visible, .zahlen :focus-visible,
.aktionsleiste :focus-visible, .konfig :focus-visible { outline-color: var(--neon) }

/* Telefon im Kopf, nur wenn genug Platz */
.top .tel { display: none; color: #fff; text-decoration: none; font: 700 16px var(--kopf); white-space: nowrap; letter-spacing: .3px }
.top .tel:hover { color: var(--neon) }
@media (min-width: 1180px) { .top .tel { display: block } }

/* Systemfinder */
.finder { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: stretch }
.finder fieldset { border: 0; margin-bottom: 22px; min-width: 0 }
.finder legend { font: 700 20px var(--kopf); color: var(--navy); margin-bottom: 10px }
.wahl { display: flex; flex-wrap: wrap; gap: 10px }
.wahl label { position: relative; cursor: pointer }
.wahl input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer }
.wahl span { display: block; background: #fff; border: 2px solid var(--linie); border-radius: 8px; padding: 11px 16px; font: 600 15.5px var(--kopf);
  color: var(--navy); transition: border-color .15s, background .15s }
.wahl label:hover span { border-color: var(--navy) }
.wahl input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: inset 0 -4px 0 var(--neon) }
.wahl input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px }
.ergebnis { background: #fff; border-radius: 14px; border-top: 5px solid var(--neon); box-shadow: 0 6px 24px rgba(10,42,85,.08);
  display: grid; place-items: center; padding: 28px; text-align: center; min-height: 260px }
.ergebnis .leer { color: var(--grau); max-width: 340px }
.ergebnis.voll { grid-template-columns: 170px 1fr; gap: 22px; place-items: center stretch; text-align: left }
.ergebnis img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%; border-radius: 10px; background: var(--navy2) }
.ergebnis small { font: 600 12px var(--kopf); letter-spacing: 1.5px; text-transform: uppercase; color: var(--grau) }
.ergebnis h3 { font-size: 28px; color: var(--navy); margin: 2px 0 8px }
.ergebnis p { color: var(--grau); font-size: 15.5px; margin-bottom: 10px }
.ergebnis .tipp { background: var(--hell); border-left: 4px solid var(--neon); padding: 8px 12px; border-radius: 6px; color: var(--text) }
.ergebnis .knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px }

/* Vergleichstabelle */
.vergleich-titel { font: 700 26px var(--kopf); color: var(--navy); margin: 56px 0 14px }
.tabelle-scroll { overflow-x: auto; border-radius: 12px; box-shadow: 0 6px 24px rgba(10,42,85,.08); background: #fff }
table.vergleich { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 15px }
.vergleich th, .vergleich td { padding: 12px 14px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top }
.vergleich thead th { background: var(--navy); color: #fff; font: 700 17px var(--kopf); border-bottom: 0 }
.vergleich thead a { color: var(--neon); text-decoration: none } .vergleich thead a:hover { text-decoration: underline }
.vergleich tbody th { font: 600 15px var(--kopf); color: var(--navy); background: #f8fafc; white-space: nowrap }
.vergleich th:first-child { position: sticky; left: 0; z-index: 1 }
.vergleich tbody tr:last-child > * { border-bottom: 0 }

/* Anfrageformular */
.anfrage .kontakt b a { text-decoration: none }
form .pflicht { font-size: 13px; color: var(--grau); margin-top: -4px }
.systemwahl { background: var(--hell); border-left: 4px solid var(--neon); padding: 10px 14px; border-radius: 6px; color: var(--navy); font-size: 15px }
details.mehr { border: 1px dashed #b8c5d4; border-radius: 8px; padding: 12px 14px }
details.mehr summary { cursor: pointer; font: 600 15px var(--kopf); color: var(--navy) }
details.mehr .felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px }
details.mehr .felder label:first-child { grid-column: 1 / -1 }
form .senden .btn { font-size: 17px; padding: 15px 28px }
.datenschutz { font-size: 13px; color: var(--grau); margin-top: 10px } .datenschutz a { color: var(--navy) }

@media (max-width: 1080px) { .finder { grid-template-columns: 1fr } }
@media (max-width: 620px) {
  .ergebnis { padding: 18px; min-height: 0 } .ergebnis.voll { grid-template-columns: 96px 1fr; gap: 14px; place-items: start stretch }
  .ergebnis h3 { font-size: 22px } .ergebnis .knoepfe .btn { width: 100%; text-align: center }
  .wahl span { padding: 10px 13px; font-size: 15px }
  details.mehr .felder { grid-template-columns: 1fr } form .senden .btn { width: 100% }
  .vergleich-titel { font-size: 22px; margin-top: 40px }
}
.split .foto.studio { object-fit: contain; background: linear-gradient(#f3f5f8, #d6dce4); height: 560px }
@media (max-width: 1080px) { .split .foto.studio { height: 420px } }

/* Untermenüs (Videotürme, Einsatzbereiche) */
.nav { align-items: center }
.menue { position: relative; display: flex; align-items: center; gap: 2px }
.auf-zu { background: none; border: 0; cursor: pointer; padding: 6px 4px; display: grid; place-items: center }
.auf-zu svg { width: 11px; height: 8px; fill: none; stroke: #dfe8f3; stroke-width: 1.8; transition: transform .15s }
.menue.offen .auf-zu svg { transform: rotate(180deg) }
.untermenue { display: none; position: absolute; top: 100%; left: -18px; padding-top: 20px; z-index: 30 }
.untermenue .innen { background: #fff; border-radius: 12px; border-top: 5px solid var(--neon); box-shadow: 0 18px 40px rgba(0,0,0,.35);
  padding: 8px; min-width: 340px; display: grid; gap: 2px }
.menue.offen .untermenue { display: block }
@media (hover: hover) and (min-width: 1081px) { .menue:hover .untermenue { display: block } }
@media (min-width: 1081px) { .menue:focus-within .untermenue { display: block } }
.nav .untermenue a, .nav .untermenue a:hover { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--navy);
  text-decoration: none; font-family: var(--fliess); letter-spacing: 0 }
.nav .untermenue a:hover { background: var(--hell) }
.untermenue img { width: 42px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; background: var(--navy2) }
.untermenue b { display: block; font: 700 15.5px var(--kopf); color: var(--navy) }
.untermenue small { display: block; font-size: 13px; color: var(--grau); line-height: 1.35 }
.nav .untermenue a.fuss { display: block; border-top: 1px solid var(--linie); margin-top: 4px; border-radius: 0 0 8px 8px; padding-top: 12px;
  font: 600 14.5px var(--kopf) }
@media (max-width: 1080px) {
  .nav.auf { max-height: calc(100vh - 72px); overflow-y: auto; align-items: stretch; gap: 4px }
  .nav.auf > a, .nav.auf .menue > a { font-size: 17px; padding: 9px 0 }
  .menue { flex-wrap: wrap; justify-content: space-between }
  .auf-zu { padding: 8px 12px; margin-right: -12px } .auf-zu svg { width: 14px; height: 10px }
  .untermenue { position: static; padding-top: 6px; flex-basis: 100% }
  .untermenue .innen { background: rgba(255,255,255,.06); border-top: 0; border-left: 3px solid var(--neon); box-shadow: none; min-width: 0; padding: 4px }
  .nav .untermenue a, .nav .untermenue a:hover { color: #dfe8f3 } .untermenue b { color: #fff } .untermenue small { color: #9fb1c7 }
  .nav .untermenue a:hover { background: rgba(255,255,255,.08) } .nav .untermenue a.fuss { border-color: rgba(255,255,255,.15); color: var(--neon) }
}
.split .foto[src*="nacht_gruen_baustelle"] { object-position: 72% center }   /* Turm steht rechts im Bild */

/* Ausstattung: Gruppen im Raster */
.konfig { grid-template-columns: 1fr; gap: 20px }
.konfig-kopf { display: flex; gap: 8px 28px; align-items: baseline; flex-wrap: wrap } .konfig-kopf h3 { margin: 0 }
.ausstattung { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px }
.gruppe { background: rgba(255,255,255,.06); border: 1px solid rgba(227,240,28,.35); border-radius: 10px; padding: 14px 14px 12px }
.gruppe h4 { display: flex; align-items: center; gap: 8px; font: 700 15px var(--kopf); color: var(--neon); letter-spacing: .4px; margin-bottom: 8px }
.gruppe h4 svg { width: 22px; height: 22px; stroke: var(--neon); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none }
.gruppe ul { list-style: none } .gruppe li { position: relative; padding: 4px 0 4px 16px; font-size: 14.5px; color: #e4ebf4; line-height: 1.35 }
.gruppe li:before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 2px; background: var(--neon) }
@media (max-width: 1080px) { .ausstattung { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 620px) { .ausstattung { gap: 10px } .gruppe { padding: 12px 11px 10px } .gruppe:first-child { grid-column: 1 / -1 } .gruppe li { font-size: 13.5px; hyphens: auto } }

/* Systemfinder: gleich große Kacheln */
.wahl.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) }
.wahl.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) }
.wahl span { display: flex; align-items: center; gap: 10px; height: 100%; min-height: 54px; line-height: 1.25 }
.wahl span svg { width: 22px; height: 22px; flex: none; stroke: var(--navy); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.wahl input:checked + span svg { stroke: var(--neon) }
.finder .fragen fieldset:last-child { margin-bottom: 0 }
@media (max-width: 620px) { .wahl.drei { grid-template-columns: 1fr } .wahl.zwei { grid-template-columns: 1fr } }
/* Hochformat-Fotos in Bildkacheln: oberen Teil zeigen (Mast, grünes Licht, Kameras) */
.bereich .hg[src*="echt_solar_nacht"] { object-position: center 4% }

/* Kamera-Karussell: läuft endlos, hält beim Darüberfahren */
.karussell { overflow: hidden; margin-top: 8px; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) }
.karussell .spur { display: flex; gap: 22px; width: max-content; animation: band 48s linear infinite; padding: 6px 0 }
.karussell:hover .spur, .karussell:focus-within .spur { animation-play-state: paused }
@keyframes band { to { transform: translateX(calc(-50% - 11px)) } }
.kamerakachel { position: relative; width: 400px; height: 320px; border-radius: 14px; overflow: hidden; margin: 0; flex: none; background: var(--navy2) }
.kamerakachel img { width: 100%; height: 100%; object-fit: cover }
.kamerakachel figcaption { position: absolute; inset: auto 0 0 0; padding: 60px 20px 18px; color: #fff; background: linear-gradient(180deg, rgba(7,29,60,0), rgba(7,29,60,.95) 55%) }
.kamerakachel p { font-size: 15px; color: #dfe8f3; margin-top: 6px; line-height: 1.4 }
@media (prefers-reduced-motion: reduce) { .karussell { overflow-x: auto } .karussell .spur { animation: none } }
@media (max-width: 620px) { .kamerakachel { width: 280px; height: 240px } .karussell .spur { animation-duration: 36s } }

/* Smartlock-Bild mit Zutrittsrechten */
.zutrittsbild { margin: 0 } .zutrittsbild figcaption { font-size: 14px; color: var(--grau); margin-top: 10px }

/* Vorschau zwei Wege */
.wege-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 4px }
.weg { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; border-radius: 12px; text-decoration: none; color: #fff;
  background: rgba(7,29,60,.75); border: 2px solid rgba(227,240,28,.55); transition: transform .15s, border-color .15s }
.weg:hover { transform: translateY(-3px); border-color: var(--neon) }
.weg .art { align-self: flex-start; margin-bottom: 6px } .weg b { font: 700 24px/1.1 var(--kopf) } .weg small { color: #c9d6e6; font-size: 14.5px }
.weg i { font-style: normal; color: var(--neon); font: 600 15px var(--kopf); margin-top: 6px }
.wegband { background: var(--navy); color: #fff; padding: 56px 0 40px } .wegband h2 { color: #fff } .wegband h2 span { background: none; color: var(--neon) }
.wegband .lead { color: #c9d6e6; margin-bottom: 0 }
@media (max-width: 620px) { .wege-wahl { grid-template-columns: 1fr } }
/* Lange deutsche Wörter in Überschriften am Handy trennen statt seitlich überlaufen */
h1, h2, h3, .h1 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto }

/* Weg-Kopf über einem Abschnitt (statt eigener dunkler Bänder) */
.wegkopf { display: inline-flex; align-items: center; gap: 10px; font: 700 15px var(--kopf); color: var(--navy); letter-spacing: .5px; margin-bottom: 4px }
.wegkopf .art { margin: 0 }

/* Turmkarten: Abzeichen, Hover, Details */
.modell { position: relative; perspective: 900px }
.modell .bild { transition: transform .9s cubic-bezier(.25,.6,.3,1); transform-origin: center 85% }
/* Nur der Turm kommt nach vorne und schwenkt einmal (ein Foto, daher Schwenk statt voller Drehung) */
.modell:hover .bild, .modell:focus-visible .bild { transform: scale(1.07); animation: schwenk 1.8s ease-in-out .15s 1 }
@keyframes schwenk { 0% { transform: scale(1.07) rotateY(0) } 30% { transform: scale(1.07) rotateY(-14deg) } 70% { transform: scale(1.07) rotateY(10deg) } 100% { transform: scale(1.07) rotateY(0) } }
.modell .details { margin-top: 12px; font: 600 14.5px var(--kopf); color: var(--navy) }
.modell:hover .details { text-decoration: underline; text-decoration-color: var(--neon); text-decoration-thickness: 3px; text-underline-offset: 4px }
.abz { position: absolute; top: 12px; left: 12px; z-index: 1; font: 700 12px var(--kopf); letter-spacing: .5px; padding: 4px 9px; border-radius: 4px }
.abz.strom { background: var(--navy); color: #fff } .abz.autark { background: var(--neon); color: var(--navy) }
@media (prefers-reduced-motion: reduce) { .modell .bild { transition: none } .modell:hover .bild { animation: none } }   /* Hervorheben bleibt, nur ohne Bewegung */

/* Vergleich zum Aufklappen */
.vergleich-auf { margin-top: 40px }
.vergleich-auf summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; font: 700 17px var(--kopf); color: var(--navy);
  background: #fff; border: 2px solid var(--navy); border-radius: 8px; padding: 12px 18px; margin-bottom: 14px }
.vergleich-auf summary::-webkit-details-marker { display: none }
.vergleich-auf summary:after { content: "+"; font-size: 22px; line-height: 1 } .vergleich-auf[open] summary:after { content: "–" }
section:not(.grau):not(.dunkel) .faq details { background: var(--hell) }
.hero.wege h1.kicker { letter-spacing: 2px; font-size: 13px }

/* Produktnamen auf den Karten einzeilig: Schrift richtet sich nach der Kartenbreite */
.modell { container-type: inline-size }
.modell h3 { font-size: min(23px, 9.4cqi); white-space: nowrap }

/* Alarmanlage: Haus im Schnitt mit Legende */
.hausbild { position: relative; margin-top: 8px }
.hausbild img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 14px 40px rgba(10,42,85,.18) }
.hausbild figcaption { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: #fff; background: rgba(7,29,60,.6); padding: 2px 8px; border-radius: 4px }
.legende { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 16px }
.legende li { background: #fff; border-left: 4px solid var(--neon); padding: 6px 12px; border-radius: 6px; font: 600 14px var(--kopf); color: var(--navy) }
.legende { counter-reset: nr } .legende li { counter-increment: nr; display: flex; align-items: center; gap: 8px; border-left: 0 }
.legende li:before { content: counter(nr); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: var(--neon); border: 2px solid var(--neon); font: 700 12px var(--kopf) }

/* Produktseite: besondere Merkmale mit Einsatzfoto */
.merkmale { align-items: center }
.merkmale figure img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; display: block }
.merkliste { list-style: none; display: grid; gap: 10px; margin: 6px 0 12px }
.merkliste li { position: relative; padding: 14px 16px 14px 52px; background: rgba(255,255,255,.06); border: 1px solid rgba(227,240,28,.35); border-radius: 10px; color: #e4ebf4; font-size: 15.5px; line-height: 1.45 }
.merkliste li b { color: var(--neon); font-weight: 600 }
.merkliste li:before { content: ""; position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--neon);
  background: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23e3f01c' stroke-width='2'/%3E%3C/svg%3E") }