/* Multimediatres Startseite, Vorschau 2 (05.11.2026). Leitern nach Tornado-Maßstab, Farben nach Showroom-Beschluss 27.10. */
@font-face{font-family:'Outfit';src:url(fonts/outfit-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Outfit';src:url(fonts/outfit-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Outfit';src:url(fonts/outfit-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Plex';src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex';src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --f12:12px; --f13:13px; --f15:15px; --f17:17px; --f19:19px;
  --f24:24px; --f32:32px; --f44:44px; --f60:60px; --f80:80px; --f112:112px;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:104px; --s8:168px;
  --wrap:1240px; --rand:16px;
  --r1:4px; --r2:8px; --r3:14px;
  --bg:#FFFBF5; --flaeche:#FFFFFF; --t1:#16181B; --t2:#464B51; --t3:#6B7076; --linie:#ECE6DC;
  /* Leistungsfarben (09.11.2026): kräftig, hell, dunkel (Text) */
  --sat:#1E88E5; --sat-h:#E4F1FD; --sat-d:#0B4C8C;
  --wlan:#00A3A1; --wlan-h:#DDF4F2; --wlan-d:#00625F;
  --alarm:#FFB81C; --alarm-h:#FFF3D1; --alarm-d:#7A4F00;
  --kino:#7C4DDB; --kino-h:#EEE8FC; --kino-d:#4B2799;
  --glas:#2EA44F; --glas-h:#E1F4E6; --glas-d:#16632F;
  --nacht:#111315; --nfl:#1C1F22; --nt1:#FFFFFF; --nt2:#C9CDD1; --nt3:#8C9298; --nlinie:#2A2E33;
  --rot:#E2231A; --rothover:#C41D15;
  --kopf:56px;
}
@media (min-width:900px){ :root{ --rand:40px; --kopf:64px } }

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--t2);font-family:'Plex',system-ui,sans-serif;font-size:var(--f17);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
svg.i{width:20px;height:20px;flex:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--rand)}
h1,h2,h3{font-family:'Outfit',sans-serif;color:var(--t1);letter-spacing:-.02em;line-height:1.05;font-weight:700}
h1{font-size:var(--f32)}
h2{font-size:var(--f32)}
h3{font-size:var(--f24);line-height:1.15}
@media (min-width:900px){ h1{font-size:var(--f44)} h2{font-size:var(--f44)} }
.dunkel{background:var(--nacht);color:var(--nt2)}
.dunkel h1,.dunkel h2,.dunkel h3{color:var(--nt1)}
.label{font-size:var(--f13);font-weight:600;color:var(--t3);letter-spacing:.02em}
.dunkel .label{color:var(--nt3)}
.lead{font-size:var(--f19);line-height:1.5;color:var(--t2);max-width:560px}
.dunkel .lead{color:var(--nt2)}
.zeile{font-size:var(--f15);color:var(--t3)}
.dunkel .zeile{color:var(--nt3)}
.nummer{font-variant-numeric:tabular-nums}
.raster>*{min-width:0}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;padding:0 var(--s4);border-radius:var(--r2);font-size:var(--f15);font-weight:600;transition:background .2s,transform .2s,border-color .2s,color .2s;will-change:transform}
.knopf.rot{background:var(--rot);color:#fff}
.knopf.rot:hover{background:var(--rothover);transform:translateY(-2px)}
.knopf.kontur{border:1.5px solid currentColor;color:var(--t1)}
.knopf.kontur:hover{background:var(--t1);color:#fff;border-color:var(--t1)}
.dunkel .knopf.kontur{color:#fff}
.dunkel .knopf.kontur:hover{background:#fff;color:var(--nacht);border-color:#fff}
.knoepfe{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.textlink{font-weight:600;color:var(--t1);border-bottom:1.5px solid var(--rot);padding-bottom:2px;transition:border-width .15s}
.textlink:hover{border-bottom-width:3px}
.dunkel .textlink{color:#fff}

/* Wortmarke */
.wm{display:inline-flex;flex-direction:column;gap:2px;line-height:1}
.wm .name{font-family:'Outfit';font-weight:800;font-size:var(--f24);letter-spacing:-.02em;color:var(--t1);white-space:nowrap}
.wm .name i{font-style:normal;color:var(--rot)}
.wm .name small{font-size:var(--f13);font-weight:800}
.wm .unter{display:flex;gap:var(--s2);font-family:'Outfit';font-weight:700;font-size:var(--f12);letter-spacing:.08em;color:var(--t1);align-items:center}
.wm .unter span{display:inline-flex;align-items:center;gap:var(--s1)}
.wm .unter svg{width:12px;height:12px;color:var(--rot)}
.wm .unter b{color:#C9CBCF;font-weight:400}

/* Kopf */
.kopf{position:fixed;top:0;left:0;right:0;height:var(--kopf);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie);z-index:50;padding-top:env(safe-area-inset-top)}
.kopf .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.kopf nav{display:none;gap:var(--s4);font-size:var(--f15);color:var(--t2)}
.kopf nav a{position:relative;padding:var(--s1) 0}
.kopf nav a:after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--rot);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.kopf nav a:hover{color:var(--t1)}
.kopf nav a:hover:after{transform:scaleX(1)}
.kopf .rechts{display:flex;align-items:center;gap:var(--s2)}
.kopf .knopf{min-height:40px;padding:0 var(--s3)}
.kopf .knopf .lang{display:none}
.menuek{width:40px;height:40px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;color:var(--t1)}
.menuek:hover{background:var(--bg)}
.menue-karte{position:fixed;top:var(--kopf);left:0;right:0;background:#fff;border-bottom:1px solid var(--linie);z-index:49;padding:var(--s3) var(--rand) var(--s4);display:none;flex-direction:column}
.menue-karte.auf{display:flex}
.menue-karte a{padding:var(--s3) 0;border-bottom:1px solid var(--linie);font-size:var(--f19);color:var(--t1);font-family:'Outfit';font-weight:600}
@media (min-width:900px){
  .kopf nav{display:flex}
  .menuek{display:none}
  .kopf .knopf .lang{display:inline}
}

/* Hero mit dem versorgten Haus */
.hero{padding:calc(var(--kopf) + var(--s5)) 0 var(--s6)}
.hero .raster{display:grid;gap:var(--s5)}
.hero .eyebrow{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--f13);font-weight:600;color:var(--nt3);margin-bottom:var(--s3)}
.hero .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--rot);display:inline-block;flex:none}
.hero h1 .wort{display:inline-block}
.hero .lead{margin:var(--s4) 0 var(--s5)}
.hero .ort-zeile{margin-top:var(--s4)}
.haus{position:relative}
/* Strichzeichnungen der Unterseiten (beim Hero-Umbau 08.11. versehentlich entfernt, 09.11. zurück) */
.haus.grafik{aspect-ratio:900/470;overflow:visible}
.grafik .haus-svg{width:100%;height:100%;display:block}
.grafik .haus-svg .berge{stroke:rgba(255,255,255,.14)}
.grafik .haus-svg .haus{stroke:rgba(255,255,255,.72);transition:opacity .4s}
.grafik .haus-svg .fl,.grafik .haus-svg .fl2{fill:none}
.grafik .haus-svg .fl0{fill:var(--nfl)}
.grafik .haus-svg .sys{stroke:rgba(255,255,255,.72);transition:stroke .35s,opacity .35s}
.grafik .haus-svg .sys.an{stroke:var(--rot)}
.grafik .haus-svg.akt .sys:not(.an){opacity:.45}
.grafik .haus-svg .kegel{stroke-dasharray:4 5;opacity:.3;transition:opacity .35s}
.grafik .haus-svg .welle,.grafik .haus-svg .leitung{opacity:.35;transition:opacity .35s}
.grafik .haus-svg .leitung{stroke-dasharray:9 7}
.grafik .haus-svg .sys.an .kegel,.grafik .haus-svg .sys.an .welle,.grafik .haus-svg .sys.an .leitung{opacity:1}
.grafik .haus-svg .sys.an .leitung{animation:fliessen 1.2s linear infinite}
.grafik .haus-svg .sys.an .welle{animation:funken 1.8s ease-out infinite}
.grafik .haus-svg .sys.an .schirm{fill:rgba(226,35,26,.18);transition:fill .35s}
/* Heller Unterseiten-Kopf: die Zeichnung wird umgekehrt, Weiß wird Dunkel, Rot bleibt Rot */
.ton .grafik .haus-svg{filter:invert(1) hue-rotate(180deg)}
.ton-tuerkis{--ton:var(--wlan-h)}
.ton-warm{--ton:#FFF6EA}
.leistung-hero.ton .eyebrow i{background:var(--rot)}
@keyframes fliessen{to{stroke-dashoffset:-32}}
@keyframes funken{0%{opacity:.35}30%{opacity:1}100%{opacity:.35}}
.punkt{position:absolute;transform:translate(-6px,-50%);display:inline-flex;align-items:center;gap:var(--s2);color:var(--nt2);font-size:var(--f13);font-weight:600;padding:0;z-index:3}
.punkt i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.55);display:inline-block;flex:none;position:relative;transition:background .3s,transform .3s}
.punkt span{display:none;background:rgba(17,19,21,.88);border:1px solid var(--nlinie);border-radius:var(--r1);padding:2px var(--s2);white-space:nowrap;transition:color .3s,border-color .3s}
.punkt:hover i{transform:scale(1.25)}
.punkt.an i{background:var(--rot)}
.punkt.an i:after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--rot);opacity:0;animation:puls 1.6s ease-out infinite}
.punkt.an span{color:#fff;border-color:var(--rot)}
@keyframes puls{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.haus-satz{min-height:48px;margin-top:var(--s4);font-size:var(--f15);color:var(--nt2);line-height:1.5}
.kanaele{display:flex;gap:var(--s2);margin-top:var(--s3);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.kanaele::-webkit-scrollbar{display:none}
.kanal{flex:none;display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--f13);font-weight:600;color:var(--nt2);border:1px solid var(--nlinie);border-radius:var(--r2);padding:var(--s1) var(--s3) var(--s1) var(--s2);min-height:44px;transition:background .2s,color .2s,border-color .2s}
.kanal:hover{color:#fff;border-color:#4a4f56}
.kanal.an{background:var(--rot);border-color:var(--rot);color:#fff}
.kanal .vignette{width:26px;height:26px;flex:none;color:currentColor}
.kanal .vignette .fein{opacity:.5}
.kanal .vignette .rot{fill:currentColor;opacity:.9}
.kanal.an .vignette .rot{fill:#fff}
@media (min-width:600px){ .punkt span{display:inline-block} }
@media (max-width:899px){
  .hero .text,.hero .haus-spalte{display:contents}
  .hero .eyebrow{order:1} .hero h1{order:2} .hero .haus{order:3} .hero .haus-satz{order:4;margin-top:0} .hero .kanaele{order:5} .hero .lead{order:6;margin:var(--s3) 0 var(--s4)} .hero .knoepfe{order:7} .hero .ort-zeile{order:8;margin-top:0}
  .hero .raster{gap:var(--s4)}
}
@media (min-width:900px){
  .kanaele{display:grid;grid-template-columns:repeat(5,1fr);overflow:visible}
  .kanal{justify-content:center;padding:var(--s2) var(--s2)}
  .hero{padding:calc(var(--kopf) + var(--s6)) 0 var(--s7)}
  .hero .raster{grid-template-columns:5fr 7fr;align-items:center;gap:var(--s6)}
  .hero .text{order:1}
  .hero .haus-spalte{order:2}
}
.punkt.links{transform:translate(calc(-100% + 6px),-50%)}
.punkt.links span{order:-1}

/* Heller Hero mit Foto (Startseite) */
.hero.hell{background:linear-gradient(170deg,#E1EEF9 0%,#F4F3EF 55%,#FBF2E4 100%);color:var(--t2)}
.hero.hell h1{color:var(--t1)}
.hero.hell .eyebrow{color:var(--t3)}
.hero.hell .lead{color:var(--t2)}
.hero.hell .zeile{color:var(--t3)}
.haus.foto{aspect-ratio:3/2;border-radius:var(--r3);overflow:hidden;background:#D9E4EE;box-shadow:0 30px 70px -20px rgba(22,24,27,.35),0 2px 6px rgba(22,24,27,.08)}
.haus.foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Overlay: ein SVG deckungsgleich mit dem Foto, Linien in Weiß, Impulse in Rot */
.foto .haus-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.foto .sys{opacity:0}
.foto.statisch .sys.an{opacity:1}
.foto .haupt{fill:none;stroke:rgba(255,255,255,.95);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.foto .flaeche{stroke:none}
.foto .neben{fill:none;stroke:rgba(255,255,255,.7);stroke-width:2.4;stroke-linecap:round}
.foto .umriss{fill:none;stroke:rgba(255,255,255,.95);stroke-width:3.4}
.foto .kante{fill:none;stroke-width:2.4}
.foto .ecke{fill:none;stroke:rgba(255,255,255,.95);stroke-width:2.8;stroke-linecap:round}
.foto .zone{fill:var(--rot);opacity:0}
.foto .blitz,.foto .herz{fill:none;stroke:#fff;stroke-width:2.4;opacity:0}
.foto .front{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;opacity:0}
.foto .welle-g{opacity:0}
.foto .welle{fill:none;stroke:rgba(255,255,255,.9);stroke-width:3.4}
.foto .band{fill:none;stroke:rgba(255,255,255,.12);stroke-width:44}
.foto .impuls{fill:none;stroke:var(--rot);stroke-width:4.8;stroke-linecap:round;opacity:0}
.foto .kabel-impuls{stroke-dasharray:6 30}
.foto .faser-impuls{stroke-dasharray:14 110}
.foto .erd{stroke:rgba(255,255,255,.85);stroke-dasharray:10 10}
.foto .marke{fill:rgba(255,255,255,.25);stroke:rgba(255,255,255,.9);stroke-width:2.4}
@media (min-width:900px){ .foto .linien{filter:drop-shadow(0 1px 2px rgba(22,24,27,.5))} }
@media (max-width:599px){
  .foto .haupt,.foto .umriss,.foto .welle,.foto .front{stroke-width:6} .foto .neben,.foto .kante,.foto .blitz,.foto .herz{stroke-width:4.2} .foto .ecke{stroke-width:4.9} .foto .impuls{stroke-width:8.4}
  .foto .kabel-impuls{stroke-dasharray:10 52} .foto .faser-impuls{stroke-dasharray:24 190} .foto .erd{stroke-dasharray:17 17}
  .foto .welle-g:nth-of-type(n+2){display:none}
}
/* Punkte auf dem Foto: 14 px sichtbar, 44 px Trefferfläche, Label als weiße Pille mit zweiter Zeile beim aktiven System */
.hell .punkt{transform:translate(-7px,-50%);color:var(--t1);transition:opacity .3s}
.hell .punkt:before{content:'';position:absolute;left:-15px;top:50%;width:44px;height:44px;transform:translateY(-50%)}
.hell .punkt i{width:14px;height:14px;background:#fff;box-shadow:0 1px 3px rgba(22,24,27,.35);transition:background .3s,box-shadow .3s,transform .3s}
.hell .punkt span{display:none;flex-direction:column;align-items:flex-start;line-height:1.25;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.92);border-radius:var(--r3);padding:var(--s1) var(--s2);color:var(--t1);box-shadow:0 2px 10px rgba(0,0,0,.18);white-space:nowrap;transition:border-color .3s}
.hell .punkt span small{display:none;font-size:var(--f12);font-weight:500;color:var(--t3);animation:zeile-auf .3s ease both}
@keyframes zeile-auf{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.hell .punkt.an i{background:radial-gradient(circle at center,var(--rot) 0 3.9px,#fff 4px 6px,rgba(255,255,255,0) 6.1px);box-shadow:none;filter:drop-shadow(0 1px 2px rgba(22,24,27,.4))}
.hell .punkt.an i:after{inset:-4px;border-width:2px;animation:puls-ring 2.4s ease-out infinite}
.hell .punkt.an span{border-color:var(--rot)}
.hell .punkt.an span small{display:block}
.hell .punkt.links{transform:translate(calc(-100% + 7px),-50%)}
.hell .punkt.links span{align-items:flex-end}
.foto.spielt .punkt:not(.an){opacity:.7}
@keyframes puls-ring{0%{transform:scale(.55);opacity:.5}66%{transform:scale(2);opacity:0}100%{transform:scale(2);opacity:0}}
@media (min-width:600px){ .hell .punkt span{display:inline-flex} }
/* Abdeckungs-Chips (WLAN) und Handy-Meldung (Kamera), erscheinen nur, wenn das System spielt */
.chip{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;font-size:var(--f12);font-weight:600;color:var(--t1);background:rgba(255,255,255,.92);padding:var(--s1) var(--s2);border-radius:var(--r3);box-shadow:0 2px 10px rgba(0,0,0,.18);opacity:0;pointer-events:none;z-index:3;white-space:nowrap}
.chip i{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.chip i b{display:block;width:2px;border-radius:1px;background:var(--rot);transform-origin:bottom;transform:scaleY(0)}
.chip i b:nth-child(1){height:4px} .chip i b:nth-child(2){height:7px} .chip i b:nth-child(3){height:10px}
.haus .karte{position:absolute;width:204px;display:flex;gap:10px;align-items:center;padding:6px 10px 6px 6px;border-radius:var(--r2);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(22,24,27,.18);opacity:0;pointer-events:none;z-index:3}
.k-bild{width:36px;height:24px;border-radius:3px;background:#16181B url(/a/haus-800.webp) 88% 92%/300% auto no-repeat;position:relative;flex:none;overflow:hidden}
.k-bild:after{content:'';position:absolute;inset:0;background:rgba(22,24,27,.25)}
.k-bild i{position:absolute;left:4px;top:4px;width:4px;height:4px;border-radius:50%;background:var(--rot);z-index:1}
.k-text b{display:block;font-size:var(--f13);font-weight:600;color:var(--t1);line-height:1.2;white-space:nowrap}
.k-text small{display:block;font-size:var(--f12);color:var(--t3);line-height:1.2;white-space:nowrap}
@media (max-width:599px){ .chip,.haus .karte{display:none} }
.hell .haus-satz{color:var(--t2)}
.hell .kanal{color:var(--t2);border-color:var(--linie);background:var(--flaeche)}
.hell .kanal:hover{color:var(--t1);border-color:#B8BCC1}
.hell .kanal.an{background:var(--rot);border-color:var(--rot);color:#fff}

/* Markenband */
.marken{background:var(--flaeche);border-bottom:1px solid var(--linie);padding:var(--s4) 0 var(--s4)}
.marken .label{text-align:center;margin-bottom:var(--s3)}
.band{overflow:hidden;white-space:nowrap}
.band .spur{display:flex;will-change:transform}
.band .satz{display:flex;flex:none;align-items:center;gap:var(--s5);padding-right:var(--s5)}
.marke{display:inline-flex;align-items:center;height:40px;flex:none}
.logo{height:calc(26px * var(--h,1));width:auto;display:block;color:var(--t1);opacity:.5;transition:opacity .25s}
.marke:hover .logo{opacity:.95}
@media (min-width:900px){ .marken{padding:var(--s5) 0} .band .satz{gap:var(--s6);padding-right:var(--s6)} .logo{height:calc(30px * var(--h,1))} }

/* Leistungen */
.leistungen{padding:var(--s6) 0}
.kopfzeile{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
.kopfzeile .zeile{max-width:620px}
.bento{display:grid;gap:var(--s3)}
.kachel{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r2);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);overflow:hidden;transition:border-color .2s;transform-style:preserve-3d;--mx:50%;--my:50%}
.kachel: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}
.kachel:hover{border-color:var(--t1)}
.kachel:hover:before{opacity:1}
.kachel .vignette{width:56px;height:56px;display:block;color:var(--t2);flex:none}
.vignette .fein{opacity:.45;transition:opacity .3s}
.vignette .strich{stroke-dasharray:4 4}
.vignette .rot{fill:var(--rot)}
.kachel:hover .vignette .fein{opacity:1}
.kachel.gross .vignette{width:64px;height:64px;color:var(--nt2)}
.kachel h3{font-size:var(--f24)}
.kachel p{font-size:var(--f17);color:var(--t2)}
.kachel .marken-zeile{font-size:var(--f13);color:var(--t3);font-weight:500}
.kachel .weiter{margin-top:auto;display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--f15);font-weight:600;color:var(--t1)}
.kachel .weiter svg{transition:transform .2s;color:var(--rot)}
.kachel:hover .weiter svg{transform:translateX(4px)}
.kachel.gross{background:var(--nacht);border-color:var(--nacht);color:var(--nt2)}
.kachel.gross:hover{border-color:var(--rot)}
.kachel.gross h3{color:#fff;font-size:var(--f32)}
.kachel.gross p{color:var(--nt2)}
.kachel.gross .marken-zeile{color:var(--nt3)}
.kachel.gross .weiter{color:#fff}
.kachel.gross:before{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.07),transparent 60%)}
.kachel.gross .innen{display:grid;gap:var(--s4)}
.kachel-text{display:flex;flex-direction:column;gap:var(--s3)}
.tvrahmen{width:100%;max-width:420px;margin:0 auto;aspect-ratio:16/9;border:1.5px solid rgba(255,255,255,.55);border-radius:var(--r2);padding:10px;background:#0B0C0D;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.tvrahmen .schirm{height:100%;border-radius:var(--r1);background:#151719;padding:14px 16px;overflow:hidden}
.tvrahmen .sender{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-family:'Outfit';font-weight:600;font-size:14px;color:#6B7076;line-height:1.3}
.tvrahmen .sender span{display:flex;align-items:center;gap:8px;padding:3px 0;border-bottom:1px solid #22262A}
.tvrahmen .sender span.an{color:#fff}
.tvrahmen .sender span.an i{width:6px;height:6px;border-radius:50%;background:var(--rot);display:inline-block}
@media (min-width:700px){ .bento{grid-template-columns:repeat(2,1fr)} .kachel.gross{grid-column:span 2} .kachel.gross .innen{grid-template-columns:1fr 1fr;align-items:center} }
@media (min-width:1100px){
  .leistungen{padding:var(--s7) 0}
  .bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(240px,auto)}
  .kachel.gross{grid-column:span 2;grid-row:span 2;padding:var(--s5)}
  .kachel.gross .innen{grid-template-columns:1fr;gap:var(--s5)}
  .kopfzeile{grid-template-columns:1fr 1fr;align-items:end}
}

/* Statement und Zahlen */
.statement{padding:var(--s6) 0;background:var(--flaeche);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.statement .satz{font-family:'Outfit';font-weight:700;font-size:var(--f32);line-height:1.15;letter-spacing:-.02em;color:var(--t1);max-width:1000px;margin-top:var(--s3)}
.statement .satz .w{color:var(--t1)}
.js .statement .satz .w{color:#C3C6CB}
.zahlen{display:grid;gap:var(--s4);margin-top:var(--s5)}
.zahl{border-top:2px solid var(--t1);padding-top:var(--s3)}
.zahl .w{font-family:'Outfit';font-weight:700;font-size:var(--f60);color:var(--rot);line-height:1;letter-spacing:-.02em}
.zahl p{font-size:var(--f15);color:var(--t2);margin-top:var(--s2)}
@media (min-width:900px){
  .statement{padding:var(--s7) 0}
  .statement .satz{font-size:var(--f44)}
  .zahlen{grid-template-columns:repeat(3,1fr);gap:var(--s5)}
  .zahl .w{font-size:var(--f80)}
}
@media (min-width:1200px){ .zahl .w{font-size:var(--f112)} }

/* Für Abwesende */
.fern{padding:var(--s6) 0}
.fern .kopfzeile{margin-bottom:var(--s5)}
.drei{display:grid;gap:var(--s3)}
.punkt-karte{border-left:1px solid var(--nlinie);padding:var(--s1) 0 var(--s1) var(--s4);display:flex;flex-direction:column;gap:var(--s2);transition:border-color .2s}
.punkt-karte:hover{border-color:var(--rot)}
.punkt-karte h3{font-size:var(--f19);display:flex;align-items:center;gap:var(--s2)}
.punkt-karte h3:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--rot);flex:none}
.punkt-karte p{font-size:var(--f15);color:var(--nt2)}
@media (min-width:900px){ .fern{padding:var(--s7) 0} .fern .kopfzeile{grid-template-columns:1fr auto;align-items:end} .drei{grid-template-columns:repeat(3,1fr);gap:var(--s5)} }

/* Kay */
.kay{padding:var(--s6) 0}
.kay .raster{display:grid;gap:var(--s5)}
.kay .lead{margin-top:var(--s4)}
.kay-foto{margin-top:var(--s4);border-radius:var(--r3);overflow:hidden;aspect-ratio:1086/848;box-shadow:0 24px 50px -24px rgba(22,24,27,.45)}
.kay-foto img{width:100%;height:100%;object-fit:cover;display:block}
.kay ul{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2)}
.kay li{font-size:var(--f13);font-weight:600;color:var(--t2);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r2);padding:var(--s1) var(--s3);transition:border-color .2s,color .2s}
.kay li:has(a):hover{border-color:var(--t1);color:var(--t1)}
.kay li a{color:inherit}
.visitenkarte{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r2);padding:var(--s5) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.aufkleber{position:absolute;top:-20px;right:var(--s4);background:var(--rot);color:#fff;font-family:'Outfit';font-weight:800;font-size:var(--f19);padding:var(--s2) var(--s3);border-radius:var(--r1);box-shadow:6px 6px 0 var(--t1);transform:rotate(6deg);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.visitenkarte:hover .aufkleber,.aufkleber:hover{transform:rotate(0)}
.visitenkarte .zeile1{font-family:'Outfit';font-weight:700;font-size:var(--f24);color:var(--t1)}
.visitenkarte dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3);font-size:var(--f15)}
.visitenkarte dt{color:var(--t3)}
.visitenkarte dd{color:var(--t1)}
.visitenkarte dd a{border-bottom:1px solid var(--linie)}
.visitenkarte dd a:hover{border-color:var(--rot)}
@media (min-width:900px){ .kay{padding:var(--s7) 0} .kay .raster{grid-template-columns:7fr 5fr;align-items:center;gap:var(--s6)} }

/* Stimmen */
.stimmen{padding:0 0 var(--s6)}
.zitate{display:grid;gap:var(--s4);margin-top:var(--s5)}
.zitat{border-left:3px solid var(--rot);padding-left:var(--s3)}
.zitat p{font-size:var(--f17);color:var(--t1);line-height:1.5}
.zitat span{display:block;margin-top:var(--s2);font-size:var(--f13);color:var(--t3);font-weight:600}
.zitat.hell p{color:#fff}
.zitat.hell span{color:var(--nt3)}
@media (min-width:900px){ .stimmen{padding:0 0 var(--s7)} .zitate{grid-template-columns:repeat(3,1fr);gap:var(--s5)} }

/* Glasfaser */
.glasfaser{padding:var(--s6) 0}
.glasfaser .kopfzeile .zeile{max-width:560px}
.anbieter{display:grid;gap:var(--s3)}
.anbieter-karte{background:var(--nfl);border:1px solid var(--nlinie);border-radius:var(--r2);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);transition:border-color .2s}
.anbieter-karte:hover{border-color:#4a4f56}
.anbieter-karte .wortmarke{display:block;height:36px}
.anbieter-karte .wortmarke .logo{height:36px;width:auto;color:#fff;opacity:1}
.anbieter-karte .wortmarke img.logo{filter:invert(1) brightness(1.4)}
.tarife{width:100%;border-collapse:collapse;font-size:var(--f15);color:#fff}
.tarife td{padding:var(--s2) 0;border-top:1px solid var(--nlinie)}
.tarife td:last-child{text-align:right;font-family:'Outfit';font-weight:700;font-size:var(--f19);color:#fff}
.anbieter-karte .klein{font-size:var(--f13);margin-top:calc(-1 * var(--s2))}
.anbieter-karte h3{font-size:var(--f19)}
.anbieter-karte ul{display:grid;gap:var(--s2);margin-top:var(--s1);font-size:var(--f15);color:var(--nt2)}
.anbieter-karte li{display:flex;gap:var(--s2);align-items:flex-start}
.anbieter-karte li svg{color:var(--rot);margin-top:2px}
.anbieter-karte .knopf{margin-top:auto;align-self:flex-start}
.glasfaser-fuss{display:grid;gap:var(--s4);margin-top:var(--s5);align-items:center}
@media (min-width:900px){
  .glasfaser{padding:var(--s7) 0}
  .glasfaser .kopfzeile{grid-template-columns:1fr 1fr;align-items:end}
  .anbieter{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .anbieter-karte{padding:var(--s5)}
  .glasfaser-fuss{grid-template-columns:1fr auto;gap:var(--s6)}
}

/* Ablauf und Fragen */
.ablauf{padding:var(--s6) 0;background:var(--flaeche);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.schritte{display:grid;gap:var(--s4);margin:var(--s5) 0 var(--s6);counter-reset:s}
.schritt{border-top:2px solid var(--rot);padding-top:var(--s3)}
.schritt .vignette{width:48px;height:48px;display:block;color:var(--t2);margin-bottom:var(--s3)}
.schritt:hover .vignette .fein{opacity:1}
.schritt h3{font-size:var(--f19)}
.schritt p{font-size:var(--f15);margin-top:var(--s1)}
.fragen{display:grid;max-width:860px;border-bottom:1px solid var(--linie)}
.fragen details{border-top:1px solid var(--linie)}
.fragen details:hover summary{color:var(--rot)}
.fragen summary{list-style:none;cursor:pointer;padding:var(--s3) 0;transition:color .2s;font-family:'Outfit';font-weight:600;font-size:var(--f19);color:var(--t1);display:flex;justify-content:space-between;gap:var(--s3);align-items:center}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary svg{color:var(--rot);transition:transform .2s}
.fragen details[open] summary svg{transform:rotate(45deg)}
.fragen details p{padding:0 var(--s6) var(--s4) 0;font-size:var(--f17)}
@media (min-width:900px){ .ablauf{padding:var(--s7) 0} .schritte{grid-template-columns:repeat(3,1fr);gap:var(--s5)} }

/* Webcams, klein */
.webcams{padding:var(--s6) 0}
.webcams .raster{display:grid;gap:var(--s5)}
.webcams .lead{margin:var(--s4) 0 var(--s5)}
.ziel{cursor:pointer}
.ziel .bildrahmen{position:relative;border-radius:var(--r3);overflow:hidden;background:#000;aspect-ratio:16/9}
.ziel .bildrahmen img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ziel:hover .bildrahmen img{transform:scale(1.03)}
.ziel .play{position:absolute;left:var(--s3);bottom:var(--s3);display:inline-flex;align-items:center;gap:var(--s2);background:rgba(17,19,21,.86);color:#fff;border-radius:var(--r2);padding:var(--s2) var(--s3);font-size:var(--f13);font-weight:600;transition:background .2s}
.ziel:hover .play,.ziel:focus-visible .play{background:var(--rot)}
.ziel .unter{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s3);padding-top:var(--s3);font-size:var(--f15)}
.ziel .unter b{color:var(--t1);font-weight:600}
.ziel .unter span{color:var(--t3);font-size:var(--f13)}
@media (min-width:900px){ .webcams{padding:var(--s7) 0} .webcams .raster{grid-template-columns:5fr 7fr;align-items:center;gap:var(--s6)} }

/* Kontakt */
.kontakt{padding:var(--s6) 0 var(--s5)}
.kontakt .raster{display:grid;gap:var(--s5)}
.kontakt .lead{margin:var(--s3) 0 var(--s5)}
.kontaktliste{display:grid;gap:var(--s3);font-size:var(--f17)}
.kontaktliste a,.kontaktliste div{display:flex;gap:var(--s3);align-items:flex-start;color:var(--nt2)}
.kontaktliste a:hover{color:#fff}
.kontaktliste svg{color:var(--rot);margin-top:3px}
.kontaktliste b{display:block;color:#fff;font-weight:600}
.fuss{border-top:1px solid var(--nlinie);margin-top:var(--s6);padding-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);justify-content:space-between;font-size:var(--f13);color:var(--nt3)}
.fuss nav{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4)}
.fuss a:hover{color:#fff}
@media (min-width:900px){ .kontakt{padding:var(--s7) 0 var(--s5)} .kontakt .raster{grid-template-columns:7fr 5fr;gap:var(--s6);align-items:end} }

/* Leiste am Handy */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s2);padding:var(--s2) var(--rand) calc(var(--s2) + env(safe-area-inset-bottom));background:rgba(17,19,21,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.leiste a{display:flex;align-items:center;justify-content:center;gap:var(--s1);min-height:48px;border-radius:var(--r2);font-size:var(--f13);font-weight:600;color:#fff;background:var(--nfl)}
.leiste a.rot{background:var(--rot)}
.leiste svg.i{width:18px;height:18px}
body{padding-bottom:72px}
@media (min-width:900px){ .leiste{display:none} body{padding-bottom:0} }

/* Live-Fenster */
.fenster{position:fixed;inset:0;z-index:80;background:rgba(10,11,12,.86);display:none;align-items:center;justify-content:center;padding:var(--s3)}
.fenster.auf{display:flex}
.fenster .box{width:100%;max-width:1100px}
.fenster .video{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r3);overflow:hidden}
.fenster iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fenster .oben{display:flex;justify-content:space-between;align-items:center;color:#fff;margin-bottom:var(--s3);gap:var(--s3)}
.fenster .oben b{font-family:'Outfit';font-size:var(--f24)}
.fenster .zu{width:44px;height:44px;border-radius:var(--r2);background:var(--nfl);color:#fff;display:flex;align-items:center;justify-content:center}
.fenster .zu:hover{background:var(--rot)}

/* Hell und farbig (seit 09.11.2026, Kay: „bunt, hell, fröhlich“). Die ehemals dunklen Abschnitte behalten .dunkel,
   .ton dreht die Nacht-Variablen auf hell, .ton-… setzt den Farbton. */
.dunkel.ton{--nfl:#fff;--nt1:var(--t1);--nt2:var(--t2);--nt3:var(--t3);--nlinie:rgba(22,24,27,.12);background:var(--ton);color:var(--t2)}
.ton-himmel{--ton:var(--sat-h)}
.ton-sand{--ton:var(--alarm-h)}
.ton-mint{--ton:var(--glas-h)}
.ton-violett{--ton:var(--kino-h)}
.dunkel.ton .knopf.kontur{color:var(--t1)}
.dunkel.ton .knopf.kontur:hover{background:var(--t1);color:#fff;border-color:var(--t1)}
.dunkel.ton .textlink{color:var(--t1)}
.ton .kontaktliste a:hover,.ton .fuss a:hover{color:var(--rot)}
.ton .kontaktliste b{color:var(--t1)}
.ton .punkt-karte{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);border-left:3px solid var(--rot);border-radius:var(--r2);padding:var(--s3) var(--s4);box-shadow:0 10px 30px -20px rgba(22,24,27,.35)}
.ton .anbieter-karte{box-shadow:0 14px 34px -22px rgba(22,24,27,.4);border-color:rgba(22,24,27,.08)}
.ton .anbieter-karte:hover{border-color:var(--rot)}
.ton .anbieter-karte .wortmarke .logo{color:var(--t1)}
.ton .anbieter-karte .wortmarke img.logo{filter:none}
.ton .tarife,.ton .tarife td:last-child{color:var(--t1)}
.ton .zitat.hell p{color:var(--t1)}
.ton .zitat.hell span{color:var(--t3)}
/* Große SAT-Kachel: Himmel statt Nacht, der Fernseher bleibt ein Fernseher */
.kachel.gross{background:linear-gradient(160deg,#D6E8F8 0%,#EAF3FB 55%,#F8F3EA 100%);border-color:#D2E2F1;color:var(--t2)}
.kachel.gross h3,.kachel.gross .weiter{color:var(--t1)}
.kachel.gross p{color:var(--t2)}
.kachel.gross .marken-zeile{color:var(--t3)}
.kachel.gross:before{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 60%)}
.tvrahmen{border-color:#2A2E33;box-shadow:0 24px 50px -16px rgba(22,24,27,.45)}
/* Handy-Leiste: weiß statt schwarz */
.leiste{background:rgba(255,255,255,.94);border-top:1px solid var(--linie)}
.leiste a{background:var(--bg);color:var(--t1)}
.leiste a.rot{color:#fff}

/* Bunt: jede Leistung hat ihre Farbe (Grafikdesign-Chef 09.11.2026). Rot nur für Anfrage-Knöpfe, Logo, Live-Punkt. */
.f-sat{--k:var(--sat);--h:var(--sat-h);--d:var(--sat-d);--ik:#fff}
.f-wlan{--k:var(--wlan);--h:var(--wlan-h);--d:var(--wlan-d);--ik:#fff}
.f-alarm{--k:var(--alarm);--h:var(--alarm-h);--d:var(--alarm-d);--ik:var(--t1)}
.f-kino{--k:var(--kino);--h:var(--kino-h);--d:var(--kino-d);--ik:#fff}
.f-glas{--k:var(--glas);--h:var(--glas-h);--d:var(--glas-d);--ik:#fff}
.f-neutral{--k:var(--bg);--h:var(--flaeche);--d:var(--t1);--ik:var(--t1)}
.kachel.f-neutral .vignette{border:1px solid var(--linie)}
/* Leistungs-Kacheln */
.kachel[class*=" f-"]{background:var(--h);border-color:transparent}
.kachel.f-neutral{border-color:var(--linie)}
.kachel[class*=" f-"]:hover{border-color:var(--k);transform:translateY(-3px)}
.kachel[class*=" f-"] h3,.kachel[class*=" f-"] .weiter{color:var(--d)}
.kachel[class*=" f-"] .weiter svg{color:var(--d)}
.kachel[class*=" f-"] .marken-zeile{color:var(--d);opacity:.8}
.kachel[class*=" f-"] .vignette,.kachel.gross[class*=" f-"] .vignette{width:64px;height:64px;padding:10px;border-radius:16px;background:var(--k);color:var(--ik)}
.kachel[class*=" f-"] .vignette .rot{fill:var(--ik)}
.kachel[class*=" f-"] .vignette .fein{opacity:.75}
.kachel.gross.f-sat{background:var(--sat-h)}
.kachel.gross.f-sat:before{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.6),transparent 60%)}
.kachel.gross .tvrahmen{background:#fff;border:1.5px solid #CFE2F5;box-shadow:0 24px 50px -22px rgba(11,76,140,.45)}
.kachel.gross .tvrahmen .schirm{background:#F5FAFF}
.kachel.gross .tvrahmen .sender{color:#7E95AD}
.kachel.gross .tvrahmen .sender span{border-bottom-color:#E1ECF7}
.kachel.gross .tvrahmen .sender span.an{color:var(--sat-d)}
.kachel.gross .tvrahmen .sender span.an i{background:var(--sat)}
@media (max-width:699px){ .kachel[class*=" f-"] .vignette,.kachel.gross[class*=" f-"] .vignette{width:44px;height:44px;padding:7px;border-radius:12px} }
/* Markenlogos voll statt halb durchsichtig */
.logo{opacity:1}
.marke[data-marke=samsung] .logo{color:#1428A0}
.marke[data-marke=o2] .logo{color:#0019A5}
/* Kennzahlen auf Farbkarten */
.statement{background:var(--flaeche)}
.zahl{border:0;border-radius:var(--r3);padding:var(--s4);color:#fff}
.zahl:nth-child(1){background:#1971C2}
.zahl:nth-child(2){background:#00827F}
.zahl:nth-child(3){background:var(--kino)}
.zahl .w{color:#fff}
.zahl p{color:#fff;font-weight:600}
/* Ihr Haus bleibt erreichbar: Hellgelb, Karten mit Farbstreifen */
.ton .punkt-karte{border-left-width:6px}
.ton .punkt-karte:nth-child(1){border-left-color:var(--alarm)}
.ton .punkt-karte:nth-child(2){border-left-color:var(--wlan)}
.ton .punkt-karte:nth-child(3){border-left-color:var(--glas)}
.ton .punkt-karte:nth-child(1) h3:before{background:var(--alarm)}
.ton .punkt-karte:nth-child(2) h3:before{background:var(--wlan)}
.ton .punkt-karte:nth-child(3) h3:before{background:var(--glas)}
.ton .punkt-karte{background:#fff}
/* Kay: Ortschips in den hellen Leistungstönen */
.kay li:nth-child(5n+1){background:var(--sat-h);border-color:var(--sat-h);color:var(--sat-d)}
.kay li:nth-child(5n+2){background:var(--wlan-h);border-color:var(--wlan-h);color:var(--wlan-d)}
.kay li:nth-child(5n+3){background:var(--alarm-h);border-color:var(--alarm-h);color:var(--alarm-d)}
.kay li:nth-child(5n+4){background:var(--kino-h);border-color:var(--kino-h);color:var(--kino-d)}
.kay li:nth-child(5n+5){background:var(--glas-h);border-color:var(--glas-h);color:var(--glas-d)}
.visitenkarte{background:var(--bg)}
/* Stimmen: Hellviolett, weiße Karten */
.stimmen{background:var(--kino-h);padding:var(--s6) 0}
.zitat{background:#fff;border-left:0;border-radius:var(--r3);padding:var(--s4);position:relative;box-shadow:0 14px 34px -24px rgba(75,39,153,.5)}
.zitat:before{content:'“';font-family:'Outfit';font-weight:800;font-size:64px;line-height:1;color:var(--kino);display:block;height:40px;margin-bottom:var(--s1)}
.stimmen .textlink{border-bottom-color:var(--kino)}
@media (min-width:900px){ .stimmen{padding:var(--s7) 0} }
/* Glasfaser: Hellgrün, Häkchen und Preise grün */
.ton .anbieter-karte{border-top:6px solid var(--glas)}
.ton .anbieter-karte li svg{color:var(--glas)}
.ton .tarife td:last-child{color:var(--glas-d)}
/* Ablauf: Schritte in Blau, Türkis, Grün; Fragen-Plus blau */
.schritt:nth-child(1){border-top-color:var(--sat)} .schritt:nth-child(2){border-top-color:var(--wlan)} .schritt:nth-child(3){border-top-color:var(--glas)}
.schritt:nth-child(1) .vignette{color:var(--sat-d)} .schritt:nth-child(2) .vignette{color:var(--wlan-d)} .schritt:nth-child(3) .vignette{color:var(--glas-d)}
.schritt .vignette .rot{fill:currentColor}
.fragen summary svg{color:var(--sat-d)}
/* Webcams: Himmel und Meer */
.webcams{background:var(--sat-h)}
/* Kontakt: Himmelblau mit Farbfaden aus allen fünf Leistungen */
.kontakt{position:relative}
.kontakt:before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--sat) 0 20%,var(--wlan) 20% 40%,var(--alarm) 40% 60%,var(--kino) 60% 80%,var(--glas) 80% 100%)}
/* Hero: Reiter und Overlay in den Leistungsfarben */
.kanal[data-sys=sat]{--k:var(--sat);--ik:#fff} .kanal[data-sys=wlan]{--k:var(--wlan);--ik:#fff} .kanal[data-sys=kamera]{--k:var(--alarm);--ik:var(--t1)} .kanal[data-sys=tv]{--k:var(--kino);--ik:#fff} .kanal[data-sys=faser]{--k:var(--glas);--ik:#fff}
.hell .kanal .vignette{color:var(--k)}
.hell .kanal .vignette .rot{fill:var(--k)}
.hell .kanal:hover{border-color:var(--k);color:var(--t1)}
.hell .kanal.an{background:var(--k);border-color:var(--k);color:var(--ik)}
.hell .kanal.an .vignette,.hell .kanal.an .vignette .rot{color:var(--ik);fill:var(--ik)}
.punkt[data-sys=sat]{--k:var(--sat)} .punkt[data-sys=wlan]{--k:var(--wlan)} .punkt[data-sys=kamera]{--k:var(--alarm)} .punkt[data-sys=tv]{--k:var(--kino)} .punkt[data-sys=faser]{--k:var(--glas)}
.hell .punkt.an i{background:radial-gradient(circle at center,var(--k) 0 3.9px,#fff 4px 6px,rgba(255,255,255,0) 6.1px)}
.hell .punkt.an i:after{border-color:var(--k)}
.hell .punkt.an span{border-color:var(--k)}
#sys-sat .impuls{stroke:var(--sat)}
#sys-faser .impuls{stroke:var(--glas)}
#sys-kamera .zone{fill:var(--alarm)}
.chip i b{background:var(--wlan)}
.foto .welle{stroke:rgba(255,255,255,.95)}
.foto .band{stroke:rgba(0,163,161,.16)}

@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }
:focus-visible{outline:2px solid var(--rot);outline-offset:3px}

/* Aktuell: Neuigkeit oder Angebot aus dem Bearbeitungsbereich, erscheint nur, wenn Kay etwas eingetragen hat */
.aktuell{padding:var(--s4) 0 0}
.aktuell-karte{display:grid;gap:var(--s2);background:var(--flaeche);border:1px solid var(--linie);border-left:4px solid var(--rot);border-radius:var(--r2);padding:var(--s3) var(--s4)}
.aktuell-karte .label{margin:0}
.aktuell-karte .titel{font-family:'Outfit';font-weight:700;font-size:var(--f19);line-height:1.25;letter-spacing:-.01em;color:var(--t1)}
.aktuell-karte p{color:var(--t2);font-size:var(--f17);line-height:1.6}
.aktuell-karte .textlink{justify-self:start}
@media (min-width:900px){ .aktuell{padding-top:var(--s5)} .aktuell-karte{grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s2) var(--s5);padding:var(--s3) var(--s5)} .aktuell-karte .label{grid-row:1} .aktuell-karte .titel{grid-row:1} .aktuell-karte p{grid-column:2;grid-row:2} .aktuell-karte .textlink{grid-column:3;grid-row:1 / span 2} }

/* Ratgeber-Karten (Startseite, Übersicht, Artikel) */
.ratgeber-liste{display:grid;gap:var(--s3)}
.ratgeber-karte{display:flex;flex-direction:column;gap:var(--s3);background:#fff;border:1px solid var(--linie);border-radius:var(--r3);padding:var(--s4);color:var(--t1);transition:transform .2s,border-color .2s,box-shadow .2s}
.ratgeber-karte:hover{transform:translateY(-3px);border-color:var(--t1);box-shadow:0 14px 34px rgba(14,18,24,.08)}
.ratgeber-karte .vignette{width:48px;height:48px}
.ratgeber-karte .rk-text b{display:block;font-family:'Outfit';font-weight:700;font-size:var(--f19);line-height:1.25;margin-bottom:var(--s1);letter-spacing:-.01em}
.ratgeber-karte .rk-text span{font-size:var(--f15);color:var(--t2);line-height:1.5}
.ratgeber-karte .rk-fuss{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:var(--f13);font-weight:600;color:var(--t3)}
.ratgeber-karte .rk-fuss .i{color:var(--rot)}
.ratgeber-teaser{margin-top:var(--s6);border-top:1px solid var(--linie);padding-top:var(--s5)}
.ratgeber-teaser .kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4)}
.ratgeber-teaser h3{margin:0}
@media (min-width:900px){ .ratgeber-liste{grid-template-columns:repeat(2,1fr)} .ratgeber-liste.gross{grid-template-columns:repeat(2,1fr);gap:var(--s4)} .ratgeber-teaser .ratgeber-liste{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ .ratgeber-liste{grid-template-columns:repeat(4,1fr)} .ratgeber-liste.gross{grid-template-columns:repeat(3,1fr)} .ratgeber-teaser .ratgeber-liste{grid-template-columns:repeat(3,1fr)} }
.ratgeber-liste.lesen{grid-template-columns:1fr}
@media (min-width:700px){ .ratgeber-liste.lesen{grid-template-columns:repeat(auto-fit,minmax(280px,380px))} }
.weitere.lesen{padding-bottom:0;border-top:0}

/* Handy: Kacheln und Karten kompakt, damit die Seite nicht erschlägt */
@media (max-width:699px){
  .bento{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .kachel,.kachel.gross{padding:var(--s3);gap:var(--s2);grid-column:auto}
  .kachel .vignette,.kachel.gross .vignette{width:40px;height:40px}
  .kachel h3,.kachel.gross h3{font-size:var(--f17);line-height:1.2}
  .kachel p,.kachel .marken-zeile,.kachel.gross .tvrahmen{display:none}
  .kachel.gross .innen{gap:0}
  .kachel-text{gap:var(--s2)}
  .kachel .weiter{font-size:var(--f13);margin-top:var(--s1);display:flex;justify-content:space-between;width:100%}
  .kachel .weiter .mehr{display:none}
  .kachel .weiter svg{width:16px;height:16px}
  .statement .satz{font-size:var(--f24)}
  .ratgeber-liste:not(.gross) .ratgeber-karte{flex-direction:row;align-items:center;gap:var(--s3);padding:var(--s3)}
  .ratgeber-liste:not(.gross) .ratgeber-karte .vignette{width:36px;height:36px;flex:none}
  .ratgeber-liste:not(.gross) .rk-text{flex:1;min-width:0}
  .ratgeber-liste:not(.gross) .rk-text b{font-size:var(--f15);margin:0}
  .ratgeber-liste:not(.gross) .rk-text span,.ratgeber-liste:not(.gross) .rk-fuss span{display:none}
  .ratgeber-liste:not(.gross) .rk-fuss{margin:0;flex:none}
  .ratgeber-liste.gross .ratgeber-karte{padding:var(--s3);gap:var(--s2)}
  .ratgeber-liste.gross .ratgeber-karte .vignette{width:40px;height:40px}
  .ratgeber-liste.gross .rk-text b{font-size:var(--f17)}
  .ratgeber-teaser{margin-top:var(--s5);padding-top:var(--s4)}
  .ratgeber-teaser .kopfzeile a{white-space:nowrap}
  .ratgeber-teaser h3{font-size:var(--f19)}
}
/* Logo als Einheit (Kay 09.11.): Unterzeile nie breiter als die Wortmarke, genau bündig darunter */
.wm{width:max-content}
.wm .unter{justify-content:space-between;gap:0;font-size:10.5px;letter-spacing:.05em;width:100%;padding-right:2px;box-sizing:border-box}
.wm .unter svg{width:10px;height:10px}
.wm .unter span{gap:3px}