/* Leistungsseiten: Hero-Grafiken, Karten, Schnellcheck, weitere Leistungen. Baut auf stil.css. */

/* Texte und Linien in den Zeichnungen */
.haus-svg .t{fill:rgba(255,255,255,.72);font-family:'Plex',system-ui,sans-serif;font-size:13px;font-weight:500}
.haus-svg .t.klein{font-size:11px;fill:rgba(255,255,255,.55)}
.haus-svg .t.fett{fill:#fff;font-weight:600}
.haus-svg .t.gross{font-family:'Outfit';font-weight:700;font-size:28px;fill:#fff}
.haus-svg .fein{opacity:.4}
.haus-svg .strich{stroke-dasharray:4 5}
.haus-svg .palme{opacity:.6}
.haus-svg .rot-f{fill:var(--rot);stroke:none}
.haus-svg .terrasse,.haus-svg .pool{fill:rgba(255,255,255,.03)}
.haus-svg .pool{stroke:rgba(120,190,230,.7)}
.haus-svg .grund{stroke-dasharray:6 6;opacity:.5}
.hero .regler{margin-top:var(--s3)}
@media (max-width:899px){ .hero .regler{order:5} }
@media (min-width:900px){ .kanaele.regler{display:flex;flex-wrap:wrap;grid-template-columns:none} .kanaele.regler .kanal{justify-content:flex-start;padding:var(--s1) var(--s3) var(--s1) var(--s2)} }
.kanal[disabled]{opacity:.45;cursor:default}
.kanal .i{width:20px;height:20px;flex:none}

/* Schieber (SAT) */
.schieber{display:flex;flex-direction:column;gap:var(--s2);width:100%;max-width:520px;font-size:var(--f13);font-weight:600;color:var(--nt2);position:relative;padding-bottom:22px}
.schieber input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--rot) var(--p,0%),var(--nlinie) var(--p,0%));outline:none;margin:var(--s2) 0 0}
.schieber input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--rot);box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:grab}
.schieber input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--rot);cursor:grab}
.schieber input[type=range]:focus-visible{outline:2px solid var(--rot);outline-offset:6px}
.marken-skala{position:absolute;left:0;right:0;bottom:0;height:18px}
.marken-skala b{position:absolute;transform:translateX(-50%);font-size:var(--f12);color:var(--nt3);font-weight:600}
.marken-skala b:before{content:'';position:absolute;left:50%;top:-10px;width:1px;height:6px;background:var(--nt3)}

/* SAT: Schüssel, Strahl, Fernseher, Pegel */
.g-sat .strahl{stroke:rgba(255,255,255,.3);transition:stroke .3s}
.g-sat .strahl.an{stroke:var(--rot);stroke-dasharray:none}
.g-sat .schuessel .welle{opacity:0}
.g-sat .schuessel.an .welle{opacity:1;animation:funken 1.8s ease-out infinite}
.g-sat .schuessel.an .welle:nth-child(5){animation-delay:.25s}
.g-sat .schuessel.an .welle:nth-child(6){animation-delay:.5s}
.g-sat .satellit rect,.g-sat .satellit line{stroke:rgba(255,255,255,.5);transition:stroke .3s}
.g-sat .satellit.an rect,.g-sat .satellit.an line{stroke:var(--rot)}
.g-sat .satellit text{text-anchor:middle}
.g-sat .tv rect{stroke:rgba(255,255,255,.72)}
.g-sat .tvschirm{fill:#151719;transition:fill .4s}
.g-sat .tv.an .tvschirm{fill:#1C1F22}
.g-sat .sender text{fill:#6B7076;font-family:'Outfit';font-weight:600;font-size:14px;transition:fill .3s}
.g-sat .tv.an .sender text{fill:#fff}
.g-sat .tv.an .sender text:first-child{fill:var(--rot)}
.g-sat .sender{opacity:.35;transition:opacity .3s}
.g-sat .tv.an .sender{opacity:1}
.g-sat .kein{fill:#6B7076;font-family:'Outfit';font-weight:600;font-size:14px;text-anchor:middle}
.g-sat .tv.an .kein{display:none}
.g-sat .pegel rect{fill:none;stroke:rgba(255,255,255,.3);transition:fill .2s,stroke .2s}
.g-sat .pegel rect.an{fill:var(--rot);stroke:var(--rot)}

/* WLAN: Grundriss, Abdeckung, Punkte, Balken */
.g-wlan .deck{fill:url(#g-deck);transform-box:fill-box;transform-origin:center;animation:aufgehen .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes aufgehen{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.g-wlan .ap circle{fill:var(--rot);stroke:#fff;stroke-width:2}
.g-wlan .ap text{fill:#fff;font-family:'Plex';font-size:12px;font-weight:600}
.g-wlan .ap .ring{fill:none;stroke:var(--rot);stroke-width:1.5;animation:funken 1.8s ease-out infinite}
.g-wlan .balken rect{fill:rgba(255,255,255,.22);stroke:none}
.g-wlan .balken rect.an{fill:#fff}
.g-wlan .balken rect.schwach{fill:var(--rot)}
.g-wlan .balken text{fill:rgba(255,255,255,.72);font-family:'Plex';font-size:11px}

/* Alarm: Sensoren, Funk, Handy */
.g-alarm .sensor rect,.g-alarm .sensor path{stroke:rgba(255,255,255,.72);transition:stroke .3s}
.g-alarm .sensor .licht{fill:rgba(255,255,255,.3);stroke:none;transition:fill .3s}
.g-alarm .sensor .kegel{opacity:.25}
.g-alarm.scharf .sensor .licht{fill:var(--rot)}
.g-alarm.scharf .sensor rect,.g-alarm.scharf .sensor path{stroke:rgba(255,255,255,.9)}
.g-alarm .sensor.alarm rect,.g-alarm .sensor.alarm path{stroke:var(--rot)}
.g-alarm .sensor.alarm .licht{animation:blinken .5s step-end infinite}
@keyframes blinken{50%{fill:#fff}}
.g-alarm .funk path{stroke:rgba(255,255,255,.18);transition:stroke .3s}
.g-alarm.scharf .funk path{stroke:rgba(255,255,255,.4)}
.g-alarm .funk path.an{stroke:var(--rot);stroke-dasharray:9 7;animation:fliessen 1.2s linear infinite}
.g-alarm .handy rect{stroke:rgba(255,255,255,.72)}
.g-alarm .push{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.g-alarm .push rect{fill:#1C1F22;stroke:var(--rot)}
.g-alarm .push.an{opacity:1;transform:none}
.g-alarm .ruhe{transition:opacity .3s}
.g-alarm .ruhe.weg{opacity:0}

/* Heimkino: Lautsprecher und Wellen */
.g-kino .tvwand{fill:rgba(255,255,255,.72)}
.g-kino .box rect{stroke:#fff;fill:#1C1F22;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.g-kino .box circle{fill:var(--rot);stroke:none}
.g-kino .box text{fill:rgba(255,255,255,.72);font-family:'Plex';font-size:11px;text-anchor:middle}
.g-kino .box{transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s}
.g-kino .box.weg{opacity:0}
.g-kino .wellen path{stroke:var(--rot);opacity:.7;animation:funken 2s ease-out infinite}

/* Glasfaser: Tacho, Film */
.g-faser .bogen{stroke:var(--rot);transition:stroke-dasharray .8s cubic-bezier(.2,.8,.2,1)}
.g-faser .tacho line{stroke:#fff}
.g-faser .tacho circle{fill:#fff;stroke:none}
.g-faser .film rect{stroke:rgba(255,255,255,.72)}
.g-faser #g-balken{transition:width .8s cubic-bezier(.2,.8,.2,1)}
.g-faser .router .licht{fill:var(--rot);stroke:none;animation:blinken 1.4s step-end infinite}
.g-faser .router .licht:nth-of-type(2){animation-delay:.4s}
.g-faser .router .licht:nth-of-type(3){animation-delay:.8s}

/* Service: Weg, Puls, Tafel */
.g-service .weg{stroke:rgba(255,255,255,.3);transition:stroke .3s}
.g-service .weg.an{stroke:var(--rot);animation:fliessen 1.2s linear infinite}
.g-service .puls{fill:var(--rot);opacity:0}
.g-service .tafel rect{stroke:rgba(255,255,255,.72)}
.g-service .zeile-s .st{fill:#3CC26B;stroke:none;transition:fill .3s}
.g-service .zeile-s.aus .st{fill:var(--rot);animation:blinken .6s step-end infinite}
.g-service .zeile-s.aus .s-txt{fill:var(--rot)}
.g-service .laden rect,.g-service .finca rect,.g-service .finca path,.g-service .finca line{transition:stroke .3s}
.g-service .finca.aus rect{stroke:var(--rot)}

/* Abschnitt: Das bauen wir ein */
.punkte{padding:var(--s6) 0}
.punkte .kopfzeile .zeile{max-width:720px;font-size:var(--f17)}
.karten{display:grid;gap:var(--s3)}
.karte-l{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r2);padding:var(--s4);position:relative;overflow:hidden;transition:border-color .2s;--mx:50%;--my:50%}
.karte-l:before{content:'';position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(226,35,26,.08),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}
.karte-l:hover{border-color:var(--t1)}
.karte-l:hover:before{opacity:1}
.karte-l .vignette{width:52px;height:52px;display:block;color:var(--t2);flex:none}
.karte-l:hover .vignette .fein{opacity:1}
.karte-l h3{font-size:var(--f24);margin:var(--s3) 0 var(--s2)}
.karte-l p{font-size:var(--f17);color:var(--t2)}
.punkte .marken-zeile{margin-top:var(--s4);font-size:var(--f13);color:var(--t3);font-weight:500}
@media (min-width:900px){ .punkte{padding:var(--s7) 0} .karten{grid-template-columns:1fr 1fr;gap:var(--s4)} .karte-l{padding:var(--s5)} }

/* Einzelnes Zitat */
.stimmen .zitat.solo{max-width:760px;margin-top:var(--s6)}

/* Schnellcheck (Internet) */
.check-raster{display:grid;gap:var(--s3);margin-top:var(--s5)}
.check-frage,.check-ergebnis{background:var(--nfl);border:1px solid var(--nlinie);border-radius:var(--r2);padding:var(--s4)}
.check-ergebnis{border-color:var(--rot)}
.check-frage .frage{font-family:'Outfit';font-weight:600;font-size:var(--f19);color:#fff;margin-bottom:var(--s3)}
.antworten{display:flex;gap:var(--s2)}
.antworten .kanal{min-width:88px;justify-content:center}
.check-ergebnis .ergebnis{font-size:var(--f17);color:var(--nt1);margin-top:var(--s3);line-height:1.5}
.check-ergebnis .knoepfe{margin-top:var(--s3)}
@media (min-width:900px){ .check-raster{grid-template-columns:1fr 1fr 1.4fr;gap:var(--s4)} }

/* Weitere Leistungen */
.weitere{padding:var(--s6) 0;background:var(--flaeche);border-top:1px solid var(--linie)}
.weitere .label{margin-bottom:var(--s4)}
.weitere-liste{display:grid;gap:var(--s2)}
.weiter-karte{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border:1px solid var(--linie);border-radius:var(--r2);background:var(--bg);color:var(--t1);transition:border-color .2s,transform .2s}
.weiter-karte:hover{border-color:var(--t1);transform:translateY(-2px)}
.weiter-karte .vignette{width:40px;height:40px;flex:none;color:var(--t2)}
.weiter-karte b{display:block;font-family:'Outfit';font-weight:600;font-size:var(--f17)}
.weiter-karte span{font-size:var(--f13);color:var(--t3)}
.weiter-karte .i{margin-left:auto;color:var(--rot);flex:none}
@media (min-width:700px){ .weitere-liste{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .weitere-liste{grid-template-columns:repeat(5,1fr)} .weiter-karte{flex-direction:column;align-items:flex-start} .weiter-karte .i{margin-left:0} }

/* Textseiten (Impressum, Datenschutz) */
.textseite{padding:calc(var(--kopf) + var(--s6)) 0 var(--s7)}
.textseite .wrap{max-width:760px}
.textseite h1{font-size:var(--f44);margin:var(--s3) 0 var(--s4)}
.textseite .lead{margin-bottom:var(--s3);max-width:none}
.textseite h2{font-size:var(--f24);margin:var(--s5) 0 var(--s3)}
.textseite p{font-size:var(--f17);color:var(--t2);margin-bottom:var(--s3);line-height:1.6}
.textseite p b{color:var(--t1)}
.textseite a{color:var(--t1);border-bottom:1.5px solid var(--rot)}
@media (min-width:900px){ .textseite{padding:calc(var(--kopf) + var(--s7)) 0 var(--s8)} .textseite h1{font-size:var(--f60)} }

/* Signatur-Seite für Kay */
.sig-karte{background:#fff;border:1px solid var(--linie);border-radius:var(--r3);padding:var(--s4);margin-bottom:var(--s4);box-shadow:0 10px 30px rgba(14,18,24,.06)}
.sig-inhalt{overflow-x:auto;padding-bottom:var(--s2)}
.sig-inhalt a{border-bottom:0}
.sig-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--linie)}
.sig-knoepfe .knopf{cursor:pointer;font-family:inherit}
.sig-knoepfe .knopf .i{width:18px;height:18px}
.sig-meldung{font-size:var(--f15);color:var(--t2);font-weight:600}
.signatur .haken{list-style:none;padding:0;margin:0 0 var(--s4);display:grid;gap:var(--s2)}
.signatur .haken li{position:relative;padding-left:34px;font-size:var(--f17);line-height:1.6;color:var(--t2)}
.signatur .haken li b{color:var(--t1)}
.signatur .haken li .i{position:absolute;left:0;top:3px;width:22px;height:22px;color:var(--rot)}
@media (min-width:900px){ .sig-karte{padding:var(--s5)} }

/* Gut zu wissen */
.wissen{padding:var(--s6) 0 0;background:var(--flaeche);border-top:1px solid var(--linie)}
.wissen .label{margin-bottom:var(--s4)}
.wissen-raster{display:grid;gap:var(--s5)}
.wissen-block{border-top:2px solid var(--rot);padding-top:var(--s3)}
.wissen-block h2{font-size:var(--f24);margin-bottom:var(--s3);line-height:1.2}
.wissen-block p{font-size:var(--f17);color:var(--t2);line-height:1.6}
.wissen-block p+p{margin-top:var(--s3)}
.fuer-wen{margin-top:var(--s6);background:var(--nacht);color:var(--nt2);border-radius:var(--r3);padding:var(--s5) var(--s4)}
.fuer-wen h2{color:#fff;font-size:var(--f32);margin-bottom:var(--s4)}
.wen-raster{display:grid;gap:var(--s3)}
.wen{border-top:1px solid var(--nlinie);padding-top:var(--s3)}
.wen h3{color:#fff;font-size:var(--f17);margin-bottom:var(--s2)}
.wen p{font-size:var(--f15);color:var(--nt2);line-height:1.5}
@media (min-width:700px){ .wissen-raster{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6)} .wen-raster{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .wissen{padding-top:var(--s7)} .fuer-wen{padding:var(--s6) var(--s6);margin-top:var(--s7)} .fuer-wen h2{font-size:var(--f44)} }
@media (min-width:1100px){ .wen-raster{grid-template-columns:repeat(5,1fr);gap:var(--s4)} }
.wissen+.ablauf{border-top:0}

/* Ortsseiten: Karte des Südwestens */
.g-karte .kueste{stroke:rgba(255,255,255,.72)}
.g-karte .insel{stroke:rgba(255,255,255,.5)}
.g-karte .berge{opacity:.3}
.g-karte .strasse{stroke:rgba(255,255,255,.28);stroke-dasharray:3 6}
.g-karte .weg{fill:none;stroke:var(--rot);stroke-width:2;stroke-dasharray:9 7;animation:fliessen 1.2s linear infinite}
.g-karte .ort.laden .pkt{fill:var(--nacht);stroke:#fff;stroke-width:1.8}
.g-karte .ort.laden.an .pkt{fill:var(--rot);stroke:var(--rot)}
.g-karte .ort{cursor:pointer}
.g-karte .ort .ring{fill:none;stroke:rgba(255,255,255,.25);transition:stroke .3s}
.g-karte .ort .pkt{fill:rgba(255,255,255,.75);transition:fill .3s}
.g-karte .ort text{transition:fill .3s}
.g-karte .ort:hover .pkt,.g-karte .ort.hover .pkt{fill:#fff}
.g-karte .ort:hover .ring,.g-karte .ort.hover .ring{stroke:#fff}
.g-karte .ort.an .pkt{fill:var(--rot)}
.g-karte .ort.an .ring{stroke:var(--rot);animation:funken 1.8s ease-out infinite}
.g-karte .ort.an text{fill:#fff;font-weight:600}
.karten.drei .karte-l{display:flex;flex-direction:column;color:var(--t1)}
.karten.drei .karte-l .weiter{margin-top:auto;padding-top:var(--s3);display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--f15);font-weight:600;color:var(--t1)}
.karten.drei .karte-l .weiter svg{color:var(--rot);transition:transform .2s}
.karten.drei .karte-l:hover .weiter svg{transform:translateX(4px)}
.karten.drei .karte-l p{margin-bottom:0}
@media (min-width:1100px){ .karten.drei{grid-template-columns:repeat(3,1fr)} }
.orte-chips .kanal{text-decoration:none}
.orte-chips .vignette{width:22px;height:22px}
@media (min-width:1100px){ .weitere-liste.orte-liste{grid-template-columns:repeat(5,1fr)} }

/* Ratgeber: Übersicht und Artikel */
.r-hero{padding:calc(var(--kopf) + var(--s5)) 0 var(--s5);background:var(--flaeche);border-bottom:1px solid var(--linie)}
.krumen{display:flex;gap:var(--s2);font-size:var(--f13);color:var(--t3);margin-bottom:var(--s4)}
.krumen a{color:var(--t3);transition:color .2s}
.krumen a:hover{color:var(--t1)}
.r-hero-raster{display:grid;gap:var(--s4);align-items:center}
.r-hero h1{font-size:var(--f44);margin:var(--s2) 0 var(--s3);max-width:760px;line-height:1.05}
.r-hero .lead{max-width:680px}
.r-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s2);font-size:var(--f13);color:var(--t3);margin-top:var(--s3)}
.r-meta span+span:before{content:'·';margin-right:var(--s2);color:#C9CBCF}
.r-zeichen{display:none}
.r-zeichen .vignette{width:220px;height:220px;display:block}
.r-artikel{padding:var(--s5) 0 var(--s6)}
.r-raster{display:grid;gap:var(--s5)}
.artikel{max-width:720px;min-width:0}
.artikel h2{font-size:var(--f24);margin:var(--s5) 0 var(--s3);line-height:1.2;letter-spacing:-.01em}
.artikel h2:first-child{margin-top:0}
.artikel h3{font-size:var(--f19);margin:var(--s4) 0 var(--s2)}
.artikel p{font-size:var(--f17);line-height:1.65;color:var(--t2);margin-bottom:var(--s3)}
.artikel p b,.artikel li b{color:var(--t1)}
.artikel a:not(.knopf){color:var(--t1);border-bottom:1.5px solid var(--rot);padding-bottom:1px}
.artikel ul{margin:0 0 var(--s4);padding:0;list-style:none;display:grid;gap:var(--s2)}
.artikel ul li{position:relative;padding-left:26px;font-size:var(--f17);line-height:1.6;color:var(--t2)}
.artikel ul li:before{content:'';position:absolute;left:4px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--rot)}
.artikel .kurz{background:var(--flaeche);border:1px solid var(--linie);border-left:4px solid var(--rot);border-radius:var(--r2);padding:var(--s3) var(--s4);margin-bottom:var(--s5)}
.artikel .kurz .label{margin-bottom:var(--s2)}
.artikel .kurz p{margin:0;color:var(--t1);font-size:var(--f17)}
.artikel .kurz ul{margin:var(--s2) 0 0}
.artikel .kurz li{color:var(--t1)}
.artikel .tipp{display:flex;gap:var(--s3);align-items:flex-start;background:var(--nacht);color:var(--nt2);border-radius:var(--r2);padding:var(--s3) var(--s4);margin:var(--s4) 0}
.artikel .tipp .vignette{width:40px;height:40px;flex:none;color:#fff}
.artikel .tipp p{color:var(--nt2);margin:0;font-size:var(--f15);line-height:1.6}
.artikel .tipp b{color:#fff}
.artikel .fragen{margin-top:var(--s5)}
.artikel .fragen-titel{font-size:var(--f24);margin-bottom:var(--s2)}
.artikel .fragen details p{color:var(--t2)}
.artikel .tabelle{width:100%;border-collapse:collapse;margin:0 0 var(--s4);font-size:var(--f15)}
.artikel .tabelle th,.artikel .tabelle td{text-align:left;padding:var(--s2) var(--s2) var(--s2) 0;border-bottom:1px solid var(--linie);vertical-align:top;color:var(--t2);line-height:1.5}
.artikel .tabelle th{font-family:'Outfit';font-weight:600;color:var(--t1);font-size:var(--f13);letter-spacing:.02em}
.artikel .tabelle td:first-child{color:var(--t1);font-weight:500}
.r-seite{min-width:0}
.r-karte{position:sticky;top:calc(var(--kopf) + var(--s3));background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r3);padding:var(--s4);display:grid;gap:var(--s3)}
.r-karte .label{margin:0}
.r-karte .rk-satz{font-size:var(--f15);color:var(--t2);line-height:1.55}
.r-karte .knopf{justify-content:center}
.r-karte .rk-wer{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--f13);color:var(--t3);border-top:1px solid var(--linie);padding-top:var(--s3);line-height:1.5}
.r-karte .rk-wer b{display:block;color:var(--t1);font-size:var(--f15)}
.r-karte .rk-wer .vignette{width:40px;height:40px;flex:none}
.r-uebersicht{padding:var(--s5) 0 var(--s6)}
.r-weitere .ratgeber-karte{background:#fff}
@media (min-width:900px){
  .r-hero{padding:calc(var(--kopf) + var(--s6)) 0 var(--s6)}
  .r-hero-raster{grid-template-columns:1fr auto;gap:var(--s6)}
  .r-hero h1{font-size:var(--f60)}
  .r-zeichen{display:block}
  .r-artikel{padding:var(--s6) 0 var(--s7)}
  .r-raster{grid-template-columns:minmax(0,720px) 320px;gap:var(--s7);align-items:start;justify-content:space-between}
  .r-uebersicht{padding:var(--s6) 0 var(--s7)}
}

/* Anleitung für Kay */
.anleitung h2{margin-top:var(--s6)}
.anleitung h3{font-size:var(--f19);margin:var(--s4) 0 var(--s2)}
.anleitung p+p{margin-top:0}
.anleitung .an-druck{margin-top:var(--s6)}
@media print{
  .kopf,.menue-karte,.leiste,.kontakt,.a-fuss,.an-druck,.fenster{display:none!important}
  .textseite{padding:0}
  body{background:#fff;padding:0}
  .anleitung h2{break-after:avoid}
  .anleitung li{break-inside:avoid}
}

/* Handy: Leistungs- und Ortskarten kompakt */
@media (max-width:699px){
  .karte-l{padding:var(--s3)}
  .karte-l .vignette{width:40px;height:40px}
  .karte-l h3{font-size:var(--f19);margin:var(--s2) 0 var(--s1)}
  .karte-l p{font-size:var(--f15)}
  .punkte .marken-zeile{margin-top:var(--s3)}
  .wissen-block p{font-size:var(--f15)}
}

/* Alarm-Seite: Nacht in Farbe (Kays Wunsch 09.11.2026) */
.nachtfarbe{padding:var(--s6) 0;background:var(--alarm-h)}
.nf-kopf{max-width:760px}
.nf-kopf h2{max-width:none;white-space:normal}
@media (min-width:900px){ .nf-kopf{max-width:960px} .nf-kopf .lead{max-width:680px} }
.nf-kopf h2{margin-top:var(--s2)}
.nf-kopf .lead{margin-top:var(--s3)}
.nf-bild{position:relative;margin-top:var(--s5);aspect-ratio:3/2;border-radius:var(--r3);overflow:hidden;box-shadow:0 30px 60px -28px rgba(122,79,0,.55);--pos:50%;touch-action:pan-y}
.nf-bild>img,.nf-grau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nf-grau{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.nf-grau img{filter:grayscale(1) brightness(.42) contrast(1.35) blur(.6px)}
.nf-grau:after{content:'';position:absolute;inset:0;opacity:.28;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.nf-griff{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.4);pointer-events:none}
.nf-griff:after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--alarm) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.nf-regler{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.nf-etikett{position:absolute;top:var(--s3);font-size:var(--f13);font-weight:600;padding:var(--s1) var(--s2);border-radius:var(--r2);pointer-events:none}
.nf-etikett.links{left:var(--s3);background:rgba(22,24,27,.7);color:#fff}
.nf-etikett.rechts{right:var(--s3);background:var(--alarm);color:var(--t1)}
.nf-zeit{position:absolute;left:var(--s3);bottom:var(--s3);font:600 12px/1 'IBM Plex Mono',monospace;color:#fff;background:rgba(22,24,27,.55);padding:6px 8px;border-radius:4px;display:inline-flex;gap:6px;align-items:center;pointer-events:none}
.nf-zeit i{width:7px;height:7px;border-radius:50%;background:var(--rot);animation:rec 1s steps(1) infinite}
@keyframes rec{50%{opacity:0}}
.nf-marken{display:grid;gap:var(--s3);margin-top:var(--s5)}
.nf-marke{background:#fff;border-radius:var(--r2);padding:var(--s4);border-top:6px solid var(--alarm);display:flex;flex-direction:column;gap:var(--s2);box-shadow:0 14px 34px -24px rgba(122,79,0,.5)}
.nf-marke .wortmarke{display:block;height:34px}
.nf-marke .logo{height:30px;width:auto;opacity:1}
.nf-marke p{font-size:var(--f15);color:var(--t2)}
@media (min-width:900px){ .nachtfarbe{padding:var(--s7) 0} .nf-marken{grid-template-columns:repeat(3,1fr)} }

/* Hell statt dunkel (09.11.2026): Schnellcheck, Für-wen-Kasten, Tipp-Kasten */
.ton .check-frage,.ton .check-ergebnis{background:#fff;border-color:rgba(22,24,27,.08);box-shadow:0 14px 34px -24px rgba(22,99,47,.45)}
.ton .check-frage .frage{color:var(--t1)}
.fuer-wen{background:var(--sat-h);color:var(--t2)}
.fuer-wen h2,.wen h3{color:var(--sat-d)}
.wen p{color:var(--t2)}
.artikel .tipp{background:var(--alarm-h);color:var(--t2)}
.artikel .tipp .vignette{color:var(--alarm-d)}
.artikel .tipp p{color:var(--t2)}
.artikel .tipp b{color:var(--t1)}

/* Alarm-Seite: Foto statt Zeichnung (Kay 09.11.2026: „wie ein richtiges Gebäude“) */
.haus.grafik.alarmfoto{aspect-ratio:3/2;border-radius:var(--r3);overflow:hidden;box-shadow:0 30px 70px -24px rgba(122,79,0,.45)}
.alarmfoto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.alarmfoto .haus-svg{position:absolute;inset:0;width:100%;height:100%;filter:none!important}
.ton .alarmfoto .haus-svg{filter:none}
.alarmfoto .sichtfeld{opacity:0;transition:opacity .5s}
.alarmfoto .g-alarm.scharf .sichtfeld,.alarmfoto .scharf .sichtfeld{opacity:1}
.alarmfoto .sensor rect,.alarmfoto .sensor .ring{fill:rgba(255,255,255,.92);stroke:rgba(22,24,27,.25);filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.alarmfoto .sensor .licht{fill:#B8BCC1;stroke:none}
.alarmfoto .sensor line{stroke:#6B7076}
.alarmfoto .g-alarm.scharf .sensor .licht{fill:var(--glas)}
.alarmfoto .g-alarm.scharf .sensor rect,.alarmfoto .g-alarm.scharf .sensor .ring{stroke:var(--glas)}
.alarmfoto .sensor.alarm .licht{fill:var(--rot)!important;animation:blinken-r .5s step-end infinite}
.alarmfoto .sensor.alarm rect,.alarmfoto .sensor.alarm .ring{stroke:var(--rot)!important;stroke-width:3}
@keyframes blinken-r{50%{fill:#fff}}
.alarmfoto .funk path{stroke:rgba(255,255,255,0);transition:stroke .3s}
.alarmfoto .g-alarm.scharf .funk path{stroke:rgba(255,255,255,.75);filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.alarmfoto .funk path.an{stroke:var(--rot)!important;stroke-dasharray:12 9;animation:fliessen 1.2s linear infinite}
.af-etikett{position:absolute;transform:translate(-50%,0);font-size:var(--f12);font-weight:600;color:var(--t1);background:rgba(255,255,255,.9);padding:2px 8px;border-radius:var(--r2);pointer-events:none;white-space:nowrap}
@media (max-width:599px){ .af-etikett{display:none} }

/* Handy auf dem Alarm-Foto: echtes Smartphone mit buntem Sperrbildschirm (Kay 09.11.: „cooler“) */
.alarmfoto .handy .rahmen{fill:#1C1F22;stroke:#3A3F45;stroke-width:1.2;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45))}
.alarmfoto .handy .tasten{fill:#2A2E33}
.alarmfoto .handy .insel{fill:#0B0C0D}
.alarmfoto .handy .status{fill:#fff;stroke:none}
.alarmfoto .handy .status rect:first-child{fill:none;stroke:#fff;stroke-width:1}
.alarmfoto .handy .datum{fill:rgba(255,255,255,.92);font-family:'Plex',system-ui,sans-serif;font-size:9.5px;font-weight:500}
.alarmfoto .handy .uhrgross{fill:#fff;font-family:'Outfit';font-weight:700;font-size:38px;letter-spacing:-.02em}
.alarmfoto .handy .home{fill:rgba(255,255,255,.85)}
.alarmfoto .handy .t{fill:#464B51;font-family:'Plex',system-ui,sans-serif;font-size:9px;font-weight:500}
.alarmfoto .handy .t.klein{font-size:8px;fill:#6B7076}
.alarmfoto .handy .t.fett{fill:#16181B;font-size:10.5px;font-weight:600}
.alarmfoto .handy .t.hell{fill:rgba(255,255,255,.85)}
.alarmfoto .handy .push .t.hell{fill:rgba(255,255,255,.9)}
.alarmfoto .handy .app-name{font-size:8px;font-weight:700;letter-spacing:.08em;fill:#16181B}
.alarmfoto .handy .pkarte{fill:rgba(255,255,255,.94);stroke:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.alarmfoto .handy .app{fill:#16181B}
.alarmfoto .handy .app-zeichen{fill:none;stroke:#FFB81C;stroke-width:1.4}
.alarmfoto .handy .bildrand{fill:none;stroke:rgba(0,0,0,.12)}
.alarmfoto .handy .rec{fill:var(--rot);animation:blinken-r 1s step-end infinite}
.alarmfoto .handy .rec-t{fill:#fff;font-size:6.5px;font-weight:700;letter-spacing:.06em}
.alarmfoto .handy .ruhig{fill:#fff;font-size:11px;font-weight:600}
.alarmfoto .handy .schloss-k{fill:rgba(255,255,255,.2)}
.alarmfoto .handy .schloss{fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.alarmfoto .push{opacity:0;transform:translateY(-8px) scale(.96);transform-box:fill-box;transform-origin:center top;transition:opacity .45s,transform .45s cubic-bezier(.2,1.4,.4,1)}
.alarmfoto .push.an{opacity:1;transform:none}
.alarmfoto .wackel{transform-box:fill-box;transform-origin:center}
.alarmfoto .handy:has(.push.an) .wackel{animation:vibrieren .5s ease-in-out 2}
@keyframes vibrieren{0%,100%{transform:rotate(0)}20%{transform:rotate(-2.5deg)}40%{transform:rotate(2.5deg)}60%{transform:rotate(-1.5deg)}80%{transform:rotate(1.5deg)}}

/* Kacheln als Auswahl: kompakt, Symbol im Farbfeld, antippen setzt den Haken */
:where(.karten.wahl,.wahl-leiste){--c:#8A6D3B;--c-h:#F6EFE3;--c-d:#5B4523}
.ton-sat{--c:var(--sat);--c-h:var(--sat-h);--c-d:var(--sat-d)}
.ton-wlan{--c:var(--wlan);--c-h:var(--wlan-h);--c-d:var(--wlan-d)}
.ton-alarm{--c:var(--alarm);--c-h:var(--alarm-h);--c-d:var(--alarm-d)}
.ton-kino{--c:var(--kino);--c-h:var(--kino-h);--c-d:var(--kino-d)}
.ton-glas{--c:var(--glas);--c-h:var(--glas-h);--c-d:var(--glas-d)}
.karten.wahl{gap:12px}
.karten.wahl .karte-l{display:grid;grid-template-columns:52px 1fr;column-gap:18px;align-items:start;align-content:start;padding:20px 52px 20px 20px;cursor:pointer;user-select:none;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.karten.wahl .karte-l:before{display:none}
.karten.wahl .karte-l .vignette{grid-row:1/3;width:52px;height:52px;padding:10px;border-radius:14px;background:var(--c-h);color:var(--c-d);box-sizing:border-box}
.karten.wahl .karte-l .vignette .fein{opacity:1}
.karten.wahl .karte-l h3{font-size:var(--f19);margin:2px 0 6px;line-height:1.25}
.karten.wahl .karte-l p{font-size:var(--f15);line-height:1.55;margin:0}
.karten.wahl .karte-l:hover{border-color:var(--c);transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(60,40,0,.25)}
.karten.wahl .karte-l:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.karten.wahl .haken{position:absolute;top:18px;right:18px;width:24px;height:24px;border-radius:50%;border:2px solid var(--linie);display:grid;place-items:center;color:transparent;background:#fff;transition:all .2s}
.karten.wahl .karte-l:hover .haken{border-color:var(--c)}
.karten.wahl .karte-l.gewaehlt{border-color:var(--c);background:var(--c-h)}
.karten.wahl .karte-l.gewaehlt .vignette{background:var(--c);color:#fff}
.karten.wahl .karte-l.gewaehlt .haken{background:var(--c);border-color:var(--c);color:#fff;transform:scale(1.08)}
.ton-alarm .karte-l.gewaehlt .vignette,.ton-alarm .karte-l.gewaehlt .haken{color:var(--alarm-d)}
.wahl-leiste{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 14px 14px 22px;border-radius:var(--r2);background:var(--c-h);border:1px dashed var(--c);transition:background .25s,border-color .25s}
.wahl-leiste.aktiv{border-style:solid}
.wahl-text{margin:0;font-size:var(--f15);color:var(--t2)}
.wahl-text b{color:var(--c-d)}
.wahl-leiste .knopf{flex:none}
@media (min-width:900px){ .karten.wahl{gap:16px} .karten.wahl .karte-l{padding:24px 56px 24px 24px} }
@media (max-width:599px){
  .karten.wahl .karte-l{grid-template-columns:40px 1fr;column-gap:14px;padding:14px 44px 14px 14px}
  .karten.wahl .karte-l .vignette{width:40px;height:40px;padding:7px;border-radius:11px}
  .karten.wahl .karte-l h3{font-size:var(--f17);margin:0 0 4px}
  .karten.wahl .karte-l p{font-size:var(--f14,14px)}
  .karten.wahl .haken{top:14px;right:14px;width:22px;height:22px}
  .wahl-leiste{flex-direction:column;align-items:stretch;padding:14px}
  .wahl-leiste .knopf{justify-content:center}
}

/* ===== Alarm-Hero: Haus und App teilen sich einen Zustand ===== */
.ab{position:relative;--z:var(--alarm);--z-h:#FFF3D1;--z-d:#7A4F00}
.ab[data-mode="abwesend"]{--z:#2EA44F;--z-h:#E3F5E8;--z-d:#16632F}
.ab[data-mode="nacht"]{--z:#7C4DDB;--z-h:#EEE8FB;--z-d:#4B2799}
.ab.alarm{--z:#E2231A;--z-h:#FDE4E2;--z-d:#9E140D}
.ab .alarmfoto{position:relative}
.ab .alarmfoto:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 rgba(226,35,26,0);transition:box-shadow .4s}
.ab.alarm .alarmfoto:after{animation:ab-rot .8s ease-in-out infinite alternate}
@keyframes ab-rot{from{box-shadow:inset 0 0 40px rgba(226,35,26,.25)}to{box-shadow:inset 0 0 130px rgba(226,35,26,.6)}}
.g-alarm .nacht{fill:#241A5C;mix-blend-mode:multiply;opacity:0;transition:opacity .9s;pointer-events:none}
.ab[data-mode="nacht"] .g-alarm .nacht{opacity:.62}
.g-alarm .licht-an{opacity:0;mix-blend-mode:screen;transition:opacity .9s .2s;pointer-events:none}
.g-alarm .licht-an rect{opacity:.42}
.ab[data-mode="nacht"] .g-alarm .licht-an{opacity:1}
.g-alarm .tuer-loch{opacity:0}
.ab.tuer-offen .g-alarm .tuer-loch{opacity:1}
.g-alarm .fenster-rand{fill:none;stroke:#FFB81C;stroke-width:4;opacity:0}
.g-alarm .sichtfeld{fill:url(#ab-kegel);stroke:#1E88E5;stroke-width:2;stroke-dasharray:8 7;opacity:0;transition:opacity .5s;pointer-events:none}
.ab.kamera-an .g-alarm .sichtfeld{opacity:1}
.g-alarm .faecher{opacity:0;pointer-events:none}
.g-alarm .f-flaeche{fill:#7C4DDB;fill-opacity:.16}
.g-alarm .f-bogen{fill:none;stroke:#fff;stroke-width:3;stroke-opacity:.85}
.g-alarm .funkwege path{stroke:rgba(255,255,255,.55);stroke-width:2.5;stroke-dasharray:3 9;stroke-linecap:round;transition:stroke .4s;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.ab:not([data-mode="aus"]) .g-alarm .funkwege path{stroke:var(--z);stroke-width:3.5}
.g-alarm .funkwege .bruecke{opacity:0;transition:opacity .4s}
.ab.alarm .g-alarm .funkwege .bruecke,.ab.funk .g-alarm .funkwege .bruecke{opacity:1}
.ab.alarm .g-alarm .funkwege path{animation:ab-fluss .9s linear infinite}
@keyframes ab-fluss{to{stroke-dashoffset:-24}}
.g-alarm .geraet .koerper{fill:#fff;stroke:rgba(20,20,20,.18);stroke-width:1.5;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.g-alarm .geraet .balken{fill:#E2231A}
.g-alarm .geraet .linse{fill:#2B2F33}
.g-alarm .geraet .led{fill:var(--z)}
.g-alarm .geraet .schlitz{stroke:#9AA0A6;stroke-width:2;stroke-linecap:round}
.g-alarm .sirene-wellen path{fill:none;stroke:#E2231A;stroke-width:4;stroke-linecap:round;opacity:0}
.ab.sirene .g-alarm .sirene-wellen path{animation:ab-welle .5s ease-out infinite alternate}
.ab.sirene .g-alarm .sirene-k .koerper{animation:ab-blitz .24s step-end infinite}
@keyframes ab-welle{from{opacity:0}to{opacity:1}}
@keyframes ab-blitz{50%{fill:#FF5A4F}}
.g-alarm .funkpunkt{fill:#E2231A;stroke:#fff;stroke-width:3;opacity:0;pointer-events:none}
.g-alarm .hp{cursor:pointer;outline:none}
.g-alarm .hp .treffer{fill:transparent}
.g-alarm .hp .ring{fill:rgba(255,255,255,.18);stroke:#fff;stroke-width:3;transition:stroke .3s,fill .3s;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.g-alarm .hp .kern{fill:#fff;transition:fill .3s}
.g-alarm .hp .puls{fill:none;stroke:#fff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.ab:not([data-mode="aus"]) .g-alarm .hp .ring{stroke:var(--z)}
.ab:not([data-mode="aus"]) .g-alarm .hp .kern{fill:var(--z)}
.ab[data-mode="nacht"] .g-alarm .hp[data-id="fenster"] .ring{stroke:#fff}
.ab[data-mode="nacht"] .g-alarm .hp[data-id="fenster"] .kern{fill:#fff}
.g-alarm .hp:hover .ring,.g-alarm .hp:focus-visible .ring{fill:rgba(255,255,255,.4);stroke-width:4}
.g-alarm .hp .ring,.g-alarm .hp .kern{transform-box:fill-box;transform-origin:center;transition:transform .2s,stroke .3s,fill .3s}
.g-alarm .hp:hover .ring,.g-alarm .hp:focus-visible .ring{transform:scale(1.25)}
.g-alarm .hp.ausgeloest .ring{stroke:#E2231A!important;fill:rgba(226,35,26,.35)}
.g-alarm .hp.ausgeloest .kern{fill:#E2231A!important}
.g-alarm .hp.ausgeloest .puls,.g-alarm .hp.zeig .puls{stroke:currentColor;animation:ab-puls 1s ease-out infinite}
.g-alarm .hp.ausgeloest{color:#E2231A}.g-alarm .hp.zeig{color:#fff}
@keyframes ab-puls{from{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.9)}}
.g-alarm .tipp{fill:rgba(255,255,255,.35);stroke:#fff;stroke-width:3;opacity:0;pointer-events:none}
.ab-etikett{position:absolute;z-index:3;transform:translate(-50%,calc(-100% - 22px));background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 8px 24px -8px rgba(40,30,0,.4);pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;white-space:nowrap;text-align:left}
.ab-etikett.an{opacity:1;transform:translate(-50%,calc(-100% - 28px))}
.ab-etikett b{display:block;font-family:'Outfit';font-size:15px;color:#16181B}
.ab-etikett span{display:block;font-size:12px;color:#5A5F66;margin-top:1px}
.ab-demo{position:absolute;left:14px;top:14px;z-index:3;background:rgba(255,255,255,.92);color:#16181B;font-size:12px;font-weight:600;padding:6px 11px 6px 26px;border-radius:999px;opacity:0;transition:opacity .3s;pointer-events:none}
.ab-demo:before{content:'';position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--glas);animation:blinken-g 1.2s step-end infinite}
@keyframes blinken-g{50%{opacity:.2}}
.ab.demo .ab-demo{opacity:1}

/* Handy */
.ab-handy{position:relative;z-index:4;font-family:'Plex',system-ui,sans-serif;color:#16181B}
.ab-schirm{position:relative;background:#FAFAF7;overflow:hidden;display:flex;flex-direction:column}
.ab-status{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 4px;font-size:12px;font-weight:600;height:34px;box-sizing:border-box}
.ab-insel{width:68px;height:20px;border-radius:12px;background:#0B0C0D}
.ab-icons{display:flex;gap:2px;align-items:flex-end}.ab-icons i{width:3px;background:#16181B;border-radius:1px}.ab-icons i:nth-child(1){height:5px}.ab-icons i:nth-child(2){height:7px}.ab-icons i:nth-child(3){height:9px}.ab-icons b{width:18px;height:9px;border:1.5px solid #16181B;border-radius:3px;margin-left:4px;box-sizing:border-box;background:linear-gradient(90deg,#16181B 70%,transparent 70%) content-box;padding:1px}
.ab-kopf{display:flex;align-items:center;gap:8px;padding:8px 16px 10px}
.ab-kopf b{font-family:'Outfit';font-size:15px;font-weight:600;flex:1}
.ab-kopf>span:last-child{font-size:11px;color:#6B7076}
.ab-appicon{width:26px;height:26px;border-radius:7px;background:#FFB81C;display:grid;place-items:center;flex:none}
.ab-appicon svg{width:16px;height:16px;fill:#7A4F00}
.ab-appicon.klein{width:24px;height:24px}
.ab-ansichten{position:relative;flex:1;min-height:0}
.ab-ansicht{position:absolute;inset:0;padding:0 14px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s,transform .25s,visibility 0s .25s;display:flex;flex-direction:column;gap:8px}
.ab-ansicht.an{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.ab-karte{background:var(--z-h);border-radius:20px;padding:14px 12px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:background .4s}
.ab-kreis{width:60px;height:60px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-bottom:8px;box-shadow:0 0 0 6px color-mix(in srgb,var(--z) 18%,transparent);transition:box-shadow .4s}
.ab-kreis svg{width:30px;height:30px;fill:none;stroke:var(--z-d);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1;transition:opacity .3s,transform .3s}
.ab-kreis .i-haken,.ab-kreis .i-mond{opacity:0;transform:scale(.6)}
.ab[data-mode="abwesend"] .ab-kreis .i-haus,.ab[data-mode="nacht"] .ab-kreis .i-haus{opacity:0}
.ab[data-mode="abwesend"] .ab-kreis .i-haken{opacity:1;transform:none;stroke-width:3}
.ab[data-mode="nacht"] .ab-kreis .i-mond{opacity:1;transform:none}
.ab-karte b{font-family:'Outfit';font-size:18px;font-weight:700;color:var(--z-d);line-height:1.2}
.ab-karte span{font-size:11.5px;color:#5A5F66;margin-top:2px}
.ab-zeile{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #ECE8E0;border-radius:14px;padding:9px 12px;font:600 13px 'Plex',system-ui,sans-serif;color:#16181B;cursor:pointer;width:100%}
.ab-schalter{width:44px;height:26px;border-radius:13px;background:#D9D6CF;position:relative;transition:background .25s;display:block;flex:none}
.ab-schalter i{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s}
.ab:not([data-mode="aus"]) .ab-schalter{background:var(--z)}
.ab:not([data-mode="aus"]) .ab-schalter i{transform:translateX(18px)}
.ab-segment{display:grid;grid-template-columns:1fr 1fr;background:#EFECE6;border-radius:11px;padding:3px;gap:3px}
.ab-segment button{font:600 12px 'Plex',system-ui,sans-serif;color:#5A5F66;padding:6px 0;border-radius:8px;cursor:pointer;transition:background .2s,color .2s}
.ab-segment button.an{background:#fff;color:#16181B;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ab[data-mode="aus"] .ab-segment{opacity:.45}
.ab-liste{background:#fff;border:1px solid #ECE8E0;border-radius:14px;padding:2px 12px}
.ab-liste div{display:flex;justify-content:space-between;font-size:12px;padding:6px 0}
.ab-liste div+div{border-top:1px solid #F1EEE8}
.ab-liste span{color:#5A5F66}.ab-liste b{font-weight:600}
.ab-live{position:relative;border-radius:16px;overflow:hidden;flex:1;min-height:150px;background:#222 url(/a/eingang-800.webp) 44% 70%/240% auto no-repeat}
.ab.tuer-offen .ab-live:after{content:'';position:absolute;left:31%;top:30%;width:17%;height:45%;border:2px solid #1E88E5;border-radius:4px}
.ab-live-chip{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 7px;border-radius:6px;display:flex;align-items:center;gap:4px}
.ab-live-chip i{width:6px;height:6px;border-radius:50%;background:#E2231A;animation:blinken-g 1s step-end infinite}
.ab-live-ort{position:absolute;right:8px;top:8px;background:rgba(255,255,255,.9);font-size:10px;font-weight:600;padding:3px 7px;border-radius:6px}
.ab-live-zeit{position:absolute;left:8px;bottom:7px;color:#fff;font:500 10px ui-monospace,Menlo,monospace;text-shadow:0 1px 2px #000}
.ab-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ab-knoepfe button,.ab-beenden{font:600 12px 'Plex',system-ui,sans-serif;background:#fff;border:1px solid #E4E0D8;border-radius:11px;padding:8px 0;color:#16181B;cursor:pointer}
.ab-beenden{display:none;border-color:#E2231A;color:#E2231A}
.ab.alarm .ab-beenden{display:block}
.ab-geraete{display:flex;flex-direction:column;background:#fff;border:1px solid #ECE8E0;border-radius:14px;padding:0 10px}
.ab-geraete button{display:flex;align-items:center;gap:8px;padding:7.5px 0;font:500 12px 'Plex',system-ui,sans-serif;color:#16181B;text-align:left;cursor:pointer}
.ab-geraete button+button{border-top:1px solid #F1EEE8}
.ab-geraete i{width:8px;height:8px;border-radius:50%;background:#B8BCC1;flex:none}
.ab:not([data-mode="aus"]) .ab-geraete i{background:var(--z)}
.ab-geraete span{flex:1}
.ab-geraete b{font-size:10.5px;font-weight:600;background:#F1EEE8;color:#5A5F66;padding:2px 7px;border-radius:999px}
.ab-geraete b.warn{background:#FFF3D1;color:#7A4F00}.ab-geraete b.rot{background:#FDE4E2;color:#B0170F}
.ab-geraete button.blink{background:linear-gradient(90deg,transparent,var(--z-h),transparent)}
.ab-heute{font:600 11px 'Plex',system-ui,sans-serif;color:#6B7076;text-transform:uppercase;letter-spacing:.06em;margin:2px 0 0}
.ab-verlauf{list-style:none;margin:0;padding:0 10px;background:#fff;border:1px solid #ECE8E0;border-radius:14px;overflow:hidden}
.ab-verlauf li{display:flex;align-items:center;gap:8px;font-size:12px;padding:7px 0;overflow:hidden}
.ab-verlauf li+li{border-top:1px solid #F1EEE8}
.ab-verlauf time{font:500 10.5px ui-monospace,Menlo,monospace;color:#6B7076;width:34px}
.ab-verlauf i{width:7px;height:7px;border-radius:50%;flex:none;background:#B8BCC1}
.ab-verlauf i.gruen{background:#2EA44F}.ab-verlauf i.rot{background:#E2231A}.ab-verlauf i.gelb{background:#FFB81C}.ab-verlauf i.violett{background:#7C4DDB}.ab-verlauf i.blau{background:#1E88E5}
.ab-push{position:absolute;left:8px;right:8px;top:40px;z-index:5;display:flex;gap:9px;align-items:center;background:rgba(255,255,255,.97);border-radius:16px;padding:9px 10px;box-shadow:0 10px 30px -8px rgba(0,0,0,.35);transform:translateY(-140%);opacity:0;transition:transform .45s cubic-bezier(.34,1.4,.64,1),opacity .3s}
.ab-push.an{transform:none;opacity:1}
.ab-push div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ab-push small{font-size:10px;color:#6B7076}.ab-push b{font-size:12.5px}.ab-push div>span{font-size:11px;color:#5A5F66}
.ab-push-bild{width:36px;height:36px;border-radius:7px;background:url(/a/eingang-800.webp) 44% 70%/320% auto;display:none;flex:none}
.ab-push.bild .ab-push-bild{display:block}
.ab-alarm{position:absolute;inset:34px 0 0;z-index:4;display:flex;flex-direction:column;background:#fff;transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ab-alarm.an{transform:none}
.ab-alarm-oben{background:#E2231A;color:#fff;padding:22px 16px 20px;display:flex;flex-direction:column;gap:2px;flex:1;justify-content:center;text-align:center}
.ab-alarm-oben b{font-family:'Outfit';font-size:30px;font-weight:700}
.ab-alarm-oben span{font-size:14px;font-weight:600}
.ab-alarm-oben time{font:500 12px ui-monospace,Menlo,monospace;opacity:.85;margin-top:4px}
.ab-alarm-unten{padding:14px;display:flex;flex-direction:column;gap:8px}
.ab-alarm-unten button{font:600 13px 'Plex',system-ui,sans-serif;border-radius:12px;padding:10px 0;border:1.5px solid #D9D6CF;background:#fff;color:#16181B;cursor:pointer}
.ab-alarm-unten .blau{background:#1E88E5;border-color:#1E88E5;color:#fff}
.ab-alarm-unten .rotk{border-color:#E2231A;color:#E2231A}
.ab-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ECE8E0;background:rgba(250,250,247,.96);padding:6px 4px 16px;position:relative;z-index:3}
.ab-tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;font:600 10px 'Plex',system-ui,sans-serif;color:#8A8F96;cursor:pointer;padding:2px 0}
.ab-tabs svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ab-tabs button.an{color:var(--z-d)}
.ab-tipp{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(22,24,27,.18);border:2px solid rgba(22,24,27,.35);opacity:0;pointer-events:none;z-index:9}
.ab-satz{min-height:3.2em}
.ab-neu{margin:4px 0 0}.ab-neu button{font:600 14px 'Plex',system-ui,sans-serif;color:var(--alarm-d);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ab-handy.wackelt{animation:ab-vib .06s linear 6 alternate}
@keyframes ab-vib{from{translate:-3px 0}to{translate:3px 0}}

@media (min-width:900px){
  .ab{padding-right:118px;margin-top:20px;margin-bottom:70px}
  .ab-handy{position:absolute;right:0;top:-34px;width:244px;height:500px;border-radius:44px;background:#E9E6E0;padding:8px;box-sizing:border-box;box-shadow:0 30px 60px -20px rgba(60,40,0,.4),inset 0 0 0 1.5px #D3CFC7}
  .ab-schirm{height:100%;border-radius:36px}
  .ab-handy:before,.ab-handy:after{content:'';position:absolute;left:-3px;width:3px;border-radius:2px 0 0 2px;background:#D3CFC7}
  .ab-handy:before{top:110px;height:30px}.ab-handy:after{top:154px;height:52px}
}
@media (max-width:899px){
  .ab-handy{margin:-28px 10px 0;border-radius:26px;box-shadow:0 20px 40px -18px rgba(60,40,0,.45);overflow:hidden;border:1px solid #ECE6DC}
  .ab-schirm{height:420px}
  .ab-status{display:none}
  .ab-push{top:8px}
  .ab-alarm{inset:0}
  .ab-ansicht{flex-direction:row;flex-wrap:wrap;align-content:flex-start}
  .ab-ansicht>*{flex:1 1 100%}
  .ab-tabs{padding-bottom:8px}
}
@media (max-width:899px){ .hero .ab{order:3} .hero .ab-neu{order:5;margin-top:-8px} }
@media (min-width:900px){ .ab-satz,.ab-neu{padding-right:262px} }

.ab-etikett.links{transform:translate(calc(-100% + 24px),calc(-100% - 22px))}.ab-etikett.links.an{transform:translate(calc(-100% + 24px),calc(-100% - 28px))}
@media (max-width:899px){
  .g-alarm .hp .ring,.g-alarm .hp .kern,.g-alarm .hp .puls{scale:1.9}
  .ab-schirm{height:390px}
}
/* Nachschliff nach Design-Prüfung */
.ab-alarm{inset:0;z-index:6;background:#E3261C;color:#fff;transform:translateY(105%)}
.ab-alarm-oben{background:none;padding-top:40px}
.ab-alarm-unten{padding:14px 14px 22px;gap:8px}
.ab-alarm-unten button{min-height:44px;border-radius:12px;border:1.5px solid rgba(255,255,255,.9);background:transparent;color:#fff}
.ab-alarm-unten .blau{background:#fff;border-color:#fff;color:#E3261C}
.ab-alarm-unten .rotk{border-color:#fff;color:#fff}
.ab-push{z-index:8}
.g-alarm .hp .ring{r:24px;fill:#fff;stroke:#FFB81C;stroke-width:5;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.g-alarm .hp .kern{r:8px;fill:#FFB81C}
.g-alarm .hp[data-id="sirene"] .kern,.g-alarm .hp[data-id="zentrale"] .kern{r:0}
.g-alarm .hp[data-id="sirene"] .ring,.g-alarm .hp[data-id="zentrale"] .ring{r:34px;fill:rgba(255,255,255,.15)}
.g-alarm .hp .puls{r:24px;stroke:#fff;stroke-width:3}
.ab .g-alarm .hp:not(.ausgeloest) .puls{animation:ab-ruhe 2.4s ease-out infinite}
.ab .g-alarm .hp:nth-child(2) .puls{animation-delay:.4s}.ab .g-alarm .hp:nth-child(3) .puls{animation-delay:.8s}.ab .g-alarm .hp:nth-child(4) .puls{animation-delay:1.2s}.ab .g-alarm .hp:nth-child(5) .puls{animation-delay:1.6s}.ab .g-alarm .hp:nth-child(6) .puls{animation-delay:2s}
@keyframes ab-ruhe{0%{opacity:.9;transform:scale(1)}45%,100%{opacity:0;transform:scale(1.9)}}
.ab:not([data-mode="aus"]) .g-alarm .hp .ring{fill:#fff}
.g-alarm .sichtfeld{fill:url(#ab-kegel2);stroke:none}
.g-alarm .f-bogen{stroke-width:2;stroke-opacity:.6}
.ab.tuer-offen .ab-live:after{left:12%;top:37%;width:20%;height:45%;border-color:#E3261C;border-radius:3px}
.ab.tuer-offen .ab-live:before{content:'Tür offen';position:absolute;z-index:1;left:12%;top:calc(37% - 17px);background:#E3261C;color:#fff;font:600 10px 'Plex',system-ui,sans-serif;padding:2px 6px;border-radius:4px 4px 4px 0}
.ab-geraete i{background:#22A447}
.ab-geraete b.rot~i,.ab-geraete button:has(b.rot) i{background:#E3261C}
.ab-satz{min-height:78px;color:#3A352C;font-size:16px;line-height:1.6}
.ab-sys-alarm{color:#E3261C}
@media (max-width:899px){ .ab-satz{min-height:78px} }
.g-alarm .hp[data-id="sirene"] .ring,.g-alarm .hp[data-id="zentrale"] .ring,.ab:not([data-mode="aus"]) .g-alarm .hp[data-id="sirene"] .ring,.ab:not([data-mode="aus"]) .g-alarm .hp[data-id="zentrale"] .ring{fill:none}
.ab-live{aspect-ratio:200/260;flex:none;min-height:0}
@media (min-width:900px){ .ab-live{aspect-ratio:auto;flex:1} }
@media (max-width:899px){
  .g-alarm .hp .ring,.g-alarm .hp .kern,.g-alarm .hp .puls{scale:1.35}
  .ab-ansicht[data-tab="kamera"]{display:grid;grid-template-columns:44% 1fr;grid-template-rows:auto auto 1fr;align-content:start;gap:8px}
  .ab-ansicht[data-tab="kamera"] .ab-live{grid-row:1/4;width:100%}
  .ab-ansicht[data-tab="kamera"] .ab-knoepfe{grid-template-columns:1fr;align-self:start}
  .ab-ansicht[data-tab="kamera"] .ab-beenden{align-self:start}
}

/* Ortskarte hell und farbig: Meer, Land, Berge, jeder Ort in seiner Farbe */
.g-karte .meer-f,.g-karte .land-f,.g-karte .berge-f,.g-karte .wellen-m{display:none}
.ton .grafik .g-karte{filter:none}
.ton .g-karte .meer-f{display:block;fill:#CFE6F7}
.ton .g-karte .land-f{display:block;fill:#FBF3E4}
.ton .g-karte .berge-f{display:block;fill:#DDEBD2}
.ton .g-karte .wellen-m{display:block;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.9}
.ton .g-karte .kueste{stroke:#7FB4DA;stroke-width:2.4}
.ton .g-karte .insel{stroke:#7FB4DA;fill:#FBF3E4;stroke-width:2}
.ton .g-karte .berge{stroke:#8DB27A;opacity:1}
.ton .g-karte .strasse{stroke:#fff;stroke-width:5;stroke-dasharray:none;filter:drop-shadow(0 0 1px rgba(120,100,70,.5))}
.ton .g-karte .t{fill:#3A352C}
.ton .g-karte .t.klein{fill:#7A7263}
.ton .g-karte .t.klein[x="250"]{fill:#2B6FA3;font-style:italic}
.ton .g-karte .weg{stroke:var(--rot);stroke-width:3}
.ton .g-karte .ort .ring{stroke:var(--oc,#16181B);stroke-width:2;fill:#fff;opacity:.95}
.ton .g-karte .ort .pkt{fill:var(--oc,#16181B)}
.ton .g-karte .ort text{fill:#16181B;font-weight:600}
.ton .g-karte .ort:hover .pkt,.ton .g-karte .ort.hover .pkt{fill:var(--oc)}
.ton .g-karte .ort:hover .ring,.ton .g-karte .ort.hover .ring{stroke:var(--oc);stroke-width:3}
.ton .g-karte .ort.an .ring{stroke:var(--oc);stroke-width:3;fill:#fff}
.ton .g-karte .ort.an .pkt{fill:var(--oc)}
.ton .g-karte .ort.an text{fill:#16181B;font-weight:700}
.ton .g-karte .ort.laden .pkt{fill:var(--rot);stroke:#fff;stroke-width:2}
.ton .g-karte .ort.laden .ring{stroke:var(--rot)}
.g-karte .o-port-d-andratx{--oc:var(--wlan)}.g-karte .o-sant-elm{--oc:#E0A000}.g-karte .o-camp-de-mar{--oc:var(--glas)}.g-karte .o-peguera{--oc:var(--kino)}.g-karte .o-santa-ponca{--oc:var(--sat)}
.ton .grafik:has(.g-karte){border-radius:var(--r3);overflow:hidden;box-shadow:0 24px 60px -24px rgba(60,50,20,.35);background:#CFE6F7}
.ton .grafik .g-karte{display:block}

/* ===== Foto-Köpfe der Leistungsseiten (09.11.2026): echtes Foto, Technik ins Bild gezeichnet ===== */
.haus.grafik.fotohero{aspect-ratio:1200/810;border-radius:var(--r3);overflow:hidden;position:relative;box-shadow:0 30px 70px -24px rgba(40,50,70,.45)}
.fotohero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fotohero .haus-svg,.ton .fotohero .haus-svg{position:absolute;inset:0;width:100%;height:100%;filter:none!important}
.fotohero .fk{fill:rgba(255,255,255,.95);filter:drop-shadow(0 10px 22px rgba(0,0,0,.28))}
.fotohero .ft{fill:#16181B;font-family:'Plex',system-ui,sans-serif;font-size:25px;font-weight:500}
.fotohero .ft.klein{font-size:22px;fill:#5A5F66}
.fotohero .ft.fett{font-weight:700;font-family:'Outfit';font-size:27px}
.fotohero .ft.gross{font-family:'Outfit';font-size:50px;font-weight:700}
.fotohero .fchip rect,.fotohero .sat-label rect,.fotohero .log-chip rect{fill:rgba(255,255,255,.95);filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.fotohero .fchip text,.fotohero .sat-label text,.fotohero .log-chip text{fill:#16181B;font:600 21px 'Plex',system-ui,sans-serif}
@keyframes fh-fluss{to{stroke-dashoffset:-40}}
@keyframes fh-puls{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.2);opacity:0}}

/* SAT */
.fh-sat .strahl{stroke:rgba(255,255,255,.7);stroke-width:5;stroke-dasharray:14 12;stroke-linecap:round;fill:none;filter:drop-shadow(0 0 6px rgba(0,0,0,.25));animation:fh-fluss 1.4s linear infinite}
.fh-sat .strahl.an{stroke:#FFD24A;stroke-width:7;stroke-dasharray:none;filter:drop-shadow(0 0 10px rgba(255,200,40,.9))}
.fh-sat .strahl-start{fill:#fff;stroke:var(--sat);stroke-width:5}
.fh-sat .sat-icon rect{fill:#fff;stroke:#0B4C8C;stroke-width:3}
.fh-sat .sat-icon rect:not(:first-child){fill:#9CC8F2}
.fh-sat .satellit{opacity:.75;transition:opacity .3s}
.fh-sat .satellit.an{opacity:1}
.fh-sat .satellit.an .sat-label rect{fill:#FFD24A}
.fh-sat .satellit.astra.an .sat-label rect{fill:var(--glas)}
.fh-sat .satellit.astra.an .sat-label text{fill:#fff}
.fh-sat .tvschirm{fill:#1B1F24;transition:fill .4s}
.fh-sat .tv.an .tvschirm{fill:#0B4C8C}
.fh-sat .sender text{fill:#fff;font:600 23px 'Plex',system-ui,sans-serif;opacity:0;transition:opacity .4s}
.fh-sat .tv.an .sender text{opacity:1}
.fh-sat .tv.an .sender text:first-child{fill:#FFD24A}
.fh-sat .kein{fill:#8A9099;font:600 26px 'Plex',system-ui,sans-serif;transition:opacity .3s}
.fh-sat .tv.an .kein{opacity:0}
.fh-sat .pegel rect{fill:#E3E0D9;transition:fill .3s}
.fh-sat .pegel rect.an{fill:var(--glas)}

/* WLAN */
.fh-wlan .deck{fill:url(#g-deck);stroke:#7FF3EE;stroke-width:3;stroke-dasharray:10 10;animation:deckung-auf .7s cubic-bezier(.2,.8,.2,1) both;transform-box:fill-box;transform-origin:center}
.fh-wlan .ap .ring{fill:#fff;stroke:var(--wlan);stroke-width:6;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}
.fh-wlan .ap .kern{fill:var(--wlan)}
.fh-wlan .balken .b-karte{fill:rgba(255,255,255,.95);filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.fh-wlan .balken rect:not(.b-karte){fill:#D9D6CF}
.fh-wlan .balken rect.an{fill:var(--wlan)}
.fh-wlan .balken rect.schwach{fill:#F2B3AE}
.fh-wlan .balken .b-n{fill:#16181B;font:600 21px 'Plex',system-ui,sans-serif}
.fh-wlan .balken .b-w{fill:var(--wlan-d);font:700 19px 'Plex',system-ui,sans-serif}
.fh-wlan .balken .b-w.null{fill:#C0261C}
@keyframes deckung-auf{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}

/* Heimkino */
.fh-kino .box{transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s}
.fh-kino .box.weg{opacity:0}
.fh-kino .gehaeuse{fill:#2A2E33;stroke:#fff;stroke-width:3;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.fh-kino .membran{fill:#4B2799;stroke:#B9A4F0;stroke-width:2}
.fh-kino .box.flach .membran{display:none}
.fh-kino .wellen path{stroke:var(--kino);stroke-width:5;stroke-linecap:round;opacity:.9;animation:fh-welle 1.6s ease-out infinite}
@keyframes fh-welle{0%{opacity:0}30%{opacity:.95}100%{opacity:0}}

/* Glasfaser */
.fh-faser .faser-grund{fill:none;stroke:rgba(255,255,255,.85);stroke-width:14;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.fh-faser .leitung{fill:none;stroke:var(--glas);stroke-width:7;stroke-linecap:round;stroke-dasharray:22 14;animation:fh-fluss 1s linear infinite}
.fh-faser .router-f .r-ring,.fh-service .router-f .r-ring{fill:none;stroke:#fff;stroke-width:4;transform-box:fill-box;transform-origin:center;animation:fh-puls 1.8s ease-out infinite}
.fh-faser .router-f .r-kern{fill:var(--glas);stroke:#fff;stroke-width:4}
.fh-faser .tacho .fein{fill:none;stroke:#E3E0D9;stroke-width:18;stroke-linecap:round}
.fh-faser .tacho .bogen{fill:none;stroke:var(--glas);stroke-width:18;stroke-linecap:round;transition:stroke-dasharray .6s}
.fh-faser .tacho line{stroke:#16181B;stroke-width:5;stroke-linecap:round}
.fh-faser .tacho .nabe{fill:#16181B}
.fh-faser .fein-f{fill:#E3E0D9}.fh-faser .gruen-f{fill:var(--glas);transition:width .6s}

/* Service */
.fh-service .weg{fill:none;stroke:rgba(255,255,255,.75);stroke-width:5;stroke-dasharray:14 12;stroke-linecap:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.fh-service .weg.an{stroke:#FFD24A;animation:fh-fluss 1s linear infinite}
.fh-service .puls{fill:#FFD24A;stroke:#fff;stroke-width:4;opacity:0}
.fh-service .router-f .r-kern{fill:var(--glas);stroke:#fff;stroke-width:4}
.fh-service .finca.aus .r-kern{fill:var(--rot)}
.fh-service .finca.aus .r-ring{stroke:var(--rot)}
.fh-service .zeile-s .st{fill:var(--glas)}
.fh-service .zeile-s.aus .st{fill:var(--rot);animation:blinken-g .6s step-end infinite}
.fh-service .zeile-s.aus .s-txt{fill:var(--rot);font-weight:700}
.fh-service .s-txt{fill:var(--glas-d);font-weight:600}

.fh-sat .sat-icon{transform:scale(1.6)}
.fh-wlan .ap .fchip text{font-size:20px}
.fh-faser .film .ft.gross{font-size:42px}
.fh-kino .gehaeuse{stroke-width:4}

.fh-faser .faser-grund{stroke:var(--glas);stroke-width:12;opacity:.95}
.fh-faser .leitung{stroke:#C9F7D6;stroke-width:5;stroke-dasharray:18 22}
.fh-kino .wellen path{stroke-width:7;stroke:#7C4DDB}
@media (max-width:599px){ .fotohero .log-chip{display:none} }
.fh-wlan .balken .b-karte,.fh-wlan .balken .b-karte.schwach{fill:rgba(255,255,255,.95)}

/* Nachschliff Design-Chef 09.11. abends */
.fotohero .fchip text,.fotohero .sat-label text,.fotohero .log-chip text{font-size:24px}
.fh-wlan .balken .b-n{font-size:24px}.fh-wlan .balken .b-w{font-size:22px}
@media (max-width:599px){ .fh-wlan .balken .b-w{display:none} }
.ton .g-karte .meer-f{fill:#5BBDE6}
.ton .g-karte .land-f{fill:#FFF3D1}
.ton .g-karte .berge-f{fill:#8CC56B;opacity:.85}
.ton .g-karte .kueste{stroke:#2E8FC0}
.ton .g-karte .insel{stroke:#2E8FC0;fill:#FFF3D1}
.ton .g-karte .wellen-m{stroke:#E6F6FD}
.ton .g-karte .t{font-size:17px;font-weight:600;fill:#1F2A37}
.ton .g-karte .t.klein{font-size:14px;font-weight:500;fill:#5A5446}
.ton .g-karte .t.klein[x="250"]{fill:#fff}
.ton .g-karte .ort.an .ring{r:20px;fill:#fff;stroke:var(--rot);stroke-width:4}
.ton .g-karte .ort.an .pkt{r:10px;fill:var(--rot)}
.schieber input[type=range]::-webkit-slider-thumb{width:30px;height:30px}
.schieber input[type=range]::-moz-range-thumb{width:26px;height:26px}
.fh-sat ~ .regler,.haus-spalte .schieber{margin-top:8px}

/* SAT-Regler: Marken über der Leiste, aktueller Wert oben rechts */
.sat-regler{padding-bottom:0;gap:10px}
.sat-regler .s-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sat-regler #g-wert{font-family:'Outfit';font-size:20px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;transition:color .3s}
.sat-regler.astra #g-wert{color:var(--glas-d)}
.sat-regler.hot #g-wert{color:#9A6B00}
.sat-regler .marken-skala{position:relative;left:auto;right:auto;bottom:auto;height:30px;margin-top:4px}
.sat-regler .marken-skala b{position:absolute;bottom:0;left:calc(15px + (100% - 30px) * var(--p));transform:translateX(-50%);font-size:12px;font-weight:600;color:var(--t2);background:#fff;border:1px solid var(--linie);border-radius:999px;padding:3px 9px;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.sat-regler .marken-skala b:before{content:'';position:absolute;left:50%;top:auto;bottom:-9px;width:2px;height:7px;margin-left:-1px;background:var(--linie)}
.sat-regler.astra .m-astra{background:var(--glas);border-color:var(--glas);color:#fff}
.sat-regler.hot .m-hot{background:#FFD24A;border-color:#FFD24A;color:#16181B}
.sat-regler input[type=range]{margin-top:6px}
.sat-regler{padding-bottom:12px}
.sat-regler .marken-skala i{font-style:normal}
@media (max-width:599px){ .sat-regler .marken-skala i{display:none} }