/* sichermitlicht – Entwurf Startseite (17.10.2026) */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:'Montserrat';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/montserrat-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --nacht:#1e2d44;
  --nacht-2:#2a3f5e;
  --blau:#375272;
  --gold:#cb993e;
  --gold-text:#a8781e;
  --gold-hell:#e0b04f;
  --text:#24344d;
  --grau:#5b6b80;
  --grund:#f3f5f8;
  --linie:#dde3ec;
  --radius:16px; --radius-sm:10px;
  --font:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  --h2:clamp(28px, 2.4vw, 44px);
  --fb:calc(clamp(17px, 1.25vw, 22px));
  --rand:max(20px, 5.1vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf, 60px) + 12px)}
html,body{margin:0;background:var(--grund);color:var(--text);font-family:var(--font)}
body{overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}

/* Kopf: dunkel, Wortmarke mit leuchtendem „licht“ */
.kopf{position:fixed;top:0;left:0;right:0;z-index:50;height:60px;background:rgba(30,45,68,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.kopf-innen{height:100%;padding:0 var(--rand);display:flex;align-items:center;justify-content:space-between;gap:16px}
.marke{display:flex;align-items:center;text-decoration:none}
.marke img{height:40px;width:auto}
nav.haupt{display:flex;align-items:center;gap:clamp(16px, 2vw, 30px)}
nav.haupt a{color:#fff;text-decoration:none;font-size:15px;font-weight:600;opacity:.82;padding:4px 0;border-bottom:2px solid transparent}
nav.haupt a:hover{opacity:1}
nav.haupt a.on{opacity:1;border-bottom-color:var(--gold)}
nav.haupt a.knopf{opacity:1;background:var(--gold);color:var(--nacht);border:0;border-radius:var(--radius-sm);padding:8px 16px;font-weight:700}
@media (max-width:820px){nav.haupt a:not(.knopf){display:none}}

/* Erster Bildschirm: Nacht, rechts die Weste, die angeht */
.start{position:relative;height:100vh;min-height:560px;overflow:hidden;color:#fff;
  background:radial-gradient(55% 65% at 74% 48%, #31496d 0%, rgba(49,73,109,0) 70%), radial-gradient(40% 50% at 12% 0%, rgba(203,153,62,.16) 0%, rgba(203,153,62,0) 70%), linear-gradient(180deg,#17243a 0%,#1e2d44 60%,#22344f 100%)}
.start-innen{position:relative;z-index:3;height:100%;padding:var(--kopf, 60px) var(--rand) calc(var(--h2) * 1.8);display:flex;flex-direction:column;justify-content:center}
.start-text{max-width:min(50%, 740px)}
.start h1{--f1:min(clamp(32px, 3vw, 56px), 5.6vh);margin:0;font-size:var(--f1);line-height:1.15;font-weight:700;letter-spacing:-.01em}
.start h1 .licht{color:var(--gold-hell)}
.start h1 .augenbraue{display:block;margin:0 0 .75em;font-size:max(13px, calc(var(--f1) * .36));line-height:1.3;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.start .subline{margin:1.1em 0 0;font-size:min(var(--fb), 2.7vh);line-height:1.62;color:rgba(255,255,255,.82)}

.weste{position:absolute;z-index:2;right:calc(var(--rand) + 2vw);top:50%;width:min(420px, 30vw, 58vh);transform:translateY(calc(-50% - var(--h2) * .4))}
.weste img{width:100%;height:auto;filter:brightness(.28) saturate(.4);transition:filter 1.1s ease}
.weste::before{content:"";position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(closest-side, rgba(184,244,31,.34), rgba(184,244,31,0));opacity:0;transition:opacity 1.1s ease;z-index:-1;filter:blur(18px)}
.start.an .weste img{filter:brightness(1.08) saturate(1.15) drop-shadow(0 0 18px rgba(184,244,31,.55)) drop-shadow(0 0 46px rgba(184,244,31,.35))}
.start.an .weste::before{opacity:1}
.schalter{position:absolute;left:50%;bottom:-54px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;font:inherit;font-size:14px;font-weight:600;padding:8px 14px 8px 10px;border-radius:999px;cursor:pointer;white-space:nowrap}
.schalter span{position:relative;width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.18);transition:background .3s}
.schalter span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .3s}
.start.an .schalter span{background:var(--gold)}
.start.an .schalter span::after{transform:translateX(16px);background:var(--nacht)}
@media (prefers-reduced-motion:reduce){.weste img,.weste::before{transition:none}}

/* Zweite Sektion: Karte unten mittig, H2 angeschnitten (seite.js setzt den Abstand) */
.anschnitt{position:relative;z-index:6;margin-top:calc(var(--h2) * -1.7);padding:0 var(--rand)}
.anschnitt-karte{max-width:1100px;margin:0 auto;background:#fff;border-radius:18px 18px var(--radius) var(--radius);box-shadow:0 -10px 34px rgba(0,0,0,.25);padding:30px clamp(20px, 4vw, 48px) clamp(32px, 4vw, 56px);font-size:var(--fb);line-height:1.6}
.anschnitt h2{margin:0 auto;font-size:var(--h2);line-height:1.2;font-weight:700;text-align:center;text-wrap:balance}

.produkte{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(16px, 2vw, 28px);margin-top:clamp(28px, 3vw, 44px)}
.produkt{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;background:#fff}
.produkt-bild{position:relative;aspect-ratio:1/1;overflow:hidden;min-height:0;background:radial-gradient(70% 70% at 50% 45%, #31496d 0%, var(--nacht) 100%);display:flex;align-items:center;justify-content:center;padding:12%}
.produkt-bild picture{display:block;width:100%;height:100%}
.produkt-bild img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 14px rgba(255,255,255,.12))}
.produkt-text{padding:1.1em 1.2em 1.3em;display:flex;flex-direction:column;flex:1}
.produkt h3{margin:0;font-size:1.05em;font-weight:700}
.produkt .preis{margin:.25em 0 .7em;font-size:1.25em;font-weight:700}
.produkt .preis small{display:block;font-size:.55em;font-weight:500;color:var(--grau)}
.produkt ul{margin:0 0 1em;padding-left:1.1em;font-size:.82em;line-height:1.5;color:var(--grau)}
.produkt li{margin:0 0 .25em}
.produkt li::marker{color:var(--gold)}
.produkt a.bestellen{margin-top:auto;align-self:flex-start;background:var(--blau);color:#fff;text-decoration:none;font-weight:700;font-size:.85em;padding:11px 18px;border-radius:var(--radius-sm)}
.versand-hinweis{margin:1.4em 0 0;text-align:center;font-size:.85em;color:var(--grau)}

/* Sektionen */
.blk{padding:clamp(56px, 6vw, 96px) var(--rand) 0}
main > .blk:last-child{padding-bottom:clamp(56px, 6vw, 96px)}
.blk-innen{max-width:1000px;margin:0 auto;background:#fff;border-radius:var(--radius);box-shadow:0 1px 2px rgba(20,30,40,.05),0 12px 34px rgba(20,30,40,.07);padding:clamp(34px, 4.4vw, 68px) clamp(20px, 4.4vw, 50px);font-size:var(--fb);line-height:1.63}
.blk h2{margin:0 0 1.1em;font-size:var(--h2);line-height:1.2;font-weight:700}
.blk p{margin:0 0 .9em}
.blk p:last-child{margin-bottom:0}
.dunkel .blk-innen{background:radial-gradient(120% 95% at 100% 0%, rgba(203,153,62,.16) 0%, rgba(203,153,62,0) 55%), var(--nacht);color:#fff}
.dunkel a{color:var(--gold-hell)}
.hl{color:var(--gold-text)}
.dunkel .hl{color:var(--gold-hell)}

/* Straßen-Grafik mit Schalter „Ohne Licht / Mit Licht“ (ersetzt das Balken-Diagramm) */
.strasse{margin:1.6em 0 1.6em}
.strasse-kopf{display:flex;justify-content:space-between;align-items:center;gap:1em;margin-bottom:.8em;font-size:.82em;font-weight:700}
.schalter-hell{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--linie);color:var(--text);font:inherit;font-size:1em;font-weight:600;padding:7px 14px 7px 9px;border-radius:999px;cursor:pointer;white-space:nowrap}
.schalter-hell span{position:relative;width:38px;height:22px;border-radius:999px;background:#c6cfdb;transition:background .3s}
.schalter-hell span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .3s}
.strasse[data-zustand="mit"] .schalter-hell span{background:var(--gold)}
.strasse[data-zustand="mit"] .schalter-hell span::after{transform:translateX(16px);background:var(--nacht)}
.strasse svg{display:block;width:100%;height:auto;border-radius:14px}
.strasse-klein{display:none !important}
.strasse .nur-mit{opacity:0;transition:opacity .5s}
.strasse .nur-ohne{opacity:1;transition:opacity .5s}
.strasse[data-zustand="mit"] .nur-mit{opacity:1}
.strasse[data-zustand="mit"] .nur-ohne{opacity:0}
.strasse-text{font-size:.9em;line-height:1.5;margin-top:.9em}
.strasse-text p{display:flex;gap:.6em;align-items:baseline;margin:0 0 .35em !important}
.strasse-text.nur-mit{display:none}
.strasse[data-zustand="mit"] .strasse-text.nur-mit{display:block}
.strasse[data-zustand="mit"] .strasse-text.nur-ohne{display:none}
.punkt{flex:none;width:.7em;height:.7em;border-radius:50%;transform:translateY(.05em)}
.punkt.gold{background:var(--gold)}
.punkt.rot{background:#d23a2a}
.punkt.gruen{background:#9ed11a;box-shadow:0 0 8px rgba(184,244,31,.8)}
@media (max-width:640px){
  .strasse-gross{display:none !important}
  .strasse-klein{display:block !important}
  .strasse-kopf{font-size:.78em}
}
@media (prefers-reduced-motion:reduce){.strasse .nur-mit,.strasse .nur-ohne{transition:none}}

/* Sichtweite als Balken: Maßstab 0–160 m */
.strecke{position:relative;margin:1.6em 0 1.6em;padding:1.2em 0 1.2em;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.strecke .zeile{display:grid;grid-template-columns:9.5em minmax(0, 1fr) 6em;align-items:center;gap:1em;margin:.55em 0;font-size:.85em}
.strecke .was{font-weight:600}
.strecke .wert{font-weight:700;text-align:right}
.strecke .spur{position:relative;height:14px;border-radius:999px;background:#e9edf3}
.strecke .balken{position:absolute;top:0;bottom:0;left:var(--von, 0%);width:calc(var(--bis) - var(--von, 0%));border-radius:999px}
.strecke .dunkel-b{background:var(--nacht)}
.strecke .hell-b{background:#c6cfdb}
.strecke .reflex-b{background:#d9c49a}
.strecke .led-b{background:var(--gold);box-shadow:0 0 10px rgba(203,153,62,.75)}
.strecke .spur::after{content:"";position:absolute;left:var(--bei);top:-.55em;bottom:-.55em;border-left:2px dashed #d23a2a}
.strecke .spur.ohne{background:none;height:auto}
.strecke .spur.ohne::after{top:-.6em;bottom:auto;height:.6em}
.strecke .spur.ohne b{display:block;margin-left:calc(var(--bei) - 1px);padding-left:8px;border-left:2px dashed #d23a2a;font-size:.85em;color:#d23a2a;white-space:nowrap}
.quelle{font-size:.72em !important;color:var(--grau)}
.gruss{margin-top:1.4em !important;font-weight:700;color:var(--gold-hell)}
.liste{margin:.2em 0 1em;padding-left:1.2em}
.liste li{margin:0 0 .4em}
.liste li::marker{color:var(--gold)}

.fragen details{border-top:1px solid var(--linie);padding:.9em 0}
.fragen details:last-child{border-bottom:1px solid var(--linie)}
.fragen summary{cursor:pointer;list-style:none;font-weight:700;display:flex;justify-content:space-between;gap:1em}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";color:var(--gold-text);font-weight:700}
.fragen details[open] summary::after{content:"–"}
.fragen details p{margin:.6em 0 0}

.kontakt{display:flex;flex-wrap:wrap;gap:.6em 2em;margin-top:1.2em;font-weight:600}
.kontakt a{text-decoration:none;overflow-wrap:anywhere;min-width:0}
.knopf-gross{display:inline-block;margin-top:1.4em;background:var(--gold);color:var(--nacht) !important;text-decoration:none;font-weight:700;padding:13px 24px;border-radius:var(--radius-sm)}

.fuss img{height:36px;width:auto;margin:0 auto 12px}
.fuss{padding:28px var(--rand) 40px;text-align:center;font-size:14px;color:var(--grau);line-height:1.8}
.fuss a{text-decoration:none;margin:0 .55em}

@media (max-width:1000px){
  .start{height:auto;min-height:0}
  .start-innen{height:auto;padding-top:calc(var(--kopf, 60px) + 40px);padding-bottom:30px}
  .start-text{max-width:none}
  .start h1{--f1:clamp(29px, 6vw, 44px)}
  .start .subline{font-size:var(--fb)}
  .weste{position:relative;right:auto;top:auto;transform:none;width:min(300px, 64vw);margin:0 auto 96px}
  .anschnitt{margin-top:0}
  .anschnitt-karte{border-radius:18px}
  .produkte{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
}
@media (max-width:640px){
  .strecke .zeile{grid-template-columns:6.6em minmax(0, 1fr) 4.4em;gap:.6em;font-size:.76em}
  .strecke .spur.ohne b{white-space:normal}
}

/* Bild und Text wechseln die Seite (Anwendung: Bild links, Wer wir sind: Bild rechts, Bestellen: Bild links) */
.geteilt{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);gap:clamp(24px, 4vw, 52px);align-items:center}
.geteilt.bild-rechts{grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr)}
.geteilt-bild{position:relative;border-radius:var(--radius);overflow:hidden}
.anwendung{aspect-ratio:1/1;background:radial-gradient(60% 60% at 42% 45%, #31496d 0%, var(--nacht) 100%)}
.anwendung .a-weste{position:absolute;left:8%;top:8%;width:58%}
.anwendung .a-weste img{width:100%;height:auto;filter:drop-shadow(0 0 16px rgba(184,244,31,.5)) drop-shadow(0 0 36px rgba(184,244,31,.25))}
.anwendung .a-clip{position:absolute;right:7%;bottom:9%;width:40%}
.anwendung .a-clip img{width:100%;height:auto;filter:drop-shadow(0 0 14px rgba(255,90,60,.45))}
.wald{display:block;width:100%;height:auto}
.trio{display:flex;align-items:flex-end;justify-content:center;gap:4%;padding:6% 4%;background:radial-gradient(70% 70% at 50% 60%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 70%)}
.trio picture{flex:1 1 0;min-width:0}
.trio img{width:100%;height:auto;filter:drop-shadow(0 0 14px rgba(255,255,255,.12))}
@media (max-width:760px){
  .geteilt,.geteilt.bild-rechts,.geteilt.video-gross{grid-template-columns:1fr}
  .geteilt .geteilt-bild{order:2}
  .geteilt.bild-rechts .geteilt-bild{order:2}
  .anwendung{max-width:420px;width:100%;margin:0 auto}
}

/* Handy: Tippflächen mindestens 44 px, Schrift mindestens 13 px */
.fragen summary{min-height:44px;align-items:center}
.kontakt a{display:inline-flex;align-items:center;min-height:44px}
.fuss a{display:inline-block;padding:13px 6px}
.schalter,.schalter-hell{min-height:44px}
.produkt .preis small{font-size:max(.55em, 13px)}
.quelle{font-size:max(.72em, 13px) !important}

/* Kopf auf dem Handy: Logo-Link 44 px hoch, Knopf bricht nicht um */
.marke{min-height:44px}
nav.haupt a.knopf{white-space:nowrap}
@media (max-width:480px){.marke img{height:32px}nav.haupt a.knopf{padding:8px 12px;font-size:14px}}
nav.haupt a.knopf{min-height:44px;display:inline-flex;align-items:center}
/* Warnlampe: Video mit großem Play-Knopf in der Mitte */
@media (min-width:761px){.geteilt.video-gross{grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr)}}
.video-rahmen{aspect-ratio:960/544;background:#000}
.video-rahmen video{display:block;width:100%;height:100%;object-fit:cover}
.video-start{position:absolute;inset:0;margin:auto;width:clamp(68px, 8vw, 92px);height:clamp(68px, 8vw, 92px);border:0;border-radius:50%;background:var(--gold);color:var(--nacht);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 34px rgba(0,0,0,.4);transition:transform .2s ease}
.video-start svg{width:44%;height:44%;margin-left:8%;fill:currentColor}
.video-start:hover,.video-start:focus-visible{transform:scale(1.07)}
.video-rahmen.spielt .video-start{display:none}