/* Stromfritzen-Dashboard (11.10.2026). Ergänzt sunlife.css und gilt nur auf stromfritzen.html.
   Glasoptik in den Stromfritzen-Farben (MM 11.10.2026: "moderne Glasoptik mit den Farben der
   Stromfritzen"). Werte aus der Stromfritzen-Website (die-stromfritzen.de, style.css und glas.css):
   Navy #202957, Navy dunkel #171E45, Rot #D01D24, Creme #FBFAF6, Schriften Space Grotesk und
   IBM Plex Sans. Alles hängt an body.sf-glas, die übrigen DESK-Seiten bleiben unberührt.
   Regeln: Navy trägt die Flächen, Rot ist Signal (Handlungsbedarf, aktiver Zustand), Creme ist Text.
   Ampelfarben bleiben Ampelfarben.
   Zweite Stufe (MM 11.10.2026: "alles zentrieren und viel mehr Effekte aus unserem Katalog"):
   Inhalt mittig, Kopf als zentrierte Bühne, Effekte aus dem Hauskatalog (Abschnitt "Effekte"
   unten, Steuerung in js/sf-effekte.js). Tabellen und Listen bleiben linksbündig, damit sie
   lesbar bleiben.
   Dritte Stufe (MM 11.10.2026): Stromfritzen-Eingang auf dasselbe DESK (js/marke.js). Dort setzt
   js/marke-frueh.js body.sf-glas auch auf Anmeldung und Aufgaben, deshalb gelten die Regeln unten
   im Abschnitt "Stromfritzen-Eingang" auch dort. Dazu die Zahlen als Metallverlauf mit Glanzlauf,
   Zählwerk und Änderungsmarke für das minütliche Nachladen (Abschnitt "Zahlen"). */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../fonts/SpaceGrotesk-300-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../fonts/SpaceGrotesk-300-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/IBMPlexSans-400-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/IBMPlexSans-400-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ================= Farben und Material ================= */
body.sf-glas{
  --sf-navy:#202957; --sf-navy-dunkel:#171E45; --sf-rot:#D01D24; --sf-creme:#FBFAF6;
  --sf-rot-hell:#FF7B80; --sf-blau:#8EA2FF; --sf-gruen:#46D49A; --sf-gelb:#F7C548;
  --display:"Space Grotesk","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;

  /* Die DESK-Variablen neu belegt: Schale, Hilfe und Seite folgen damit von selbst */
  --brand:#D01D24; --brand-soft:#FF8A8E; --brand-deep:#9E1219;
  --sun:#D01D24; --sun-soft:#FF8A8E;
  --bg:#090D27; --bg-2:#0E1436;
  --panel:rgba(23,30,69,.44); --panel-solid:#1B2350; --panel-2:rgba(18,24,58,.94);
  --text:#FBFAF6; --muted:#CDD0DF; --faint:#A3A9C6;
  --line:rgba(251,250,246,.10); --line-strong:rgba(251,250,246,.22);
  --ok:#46D49A; --warn:#F7C548; --bad:#FF6B70; --info:#8EA2FF;
  --font:"IBM Plex Sans","Inter",-apple-system,system-ui,sans-serif;
  --r:20px; --r-sm:12px;
  --glass-material:linear-gradient(180deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.025) 32%,rgba(255,255,255,0) 62%);
  --shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(5,8,28,.35),
    0 1px 2px rgba(5,8,28,.30),0 10px 24px -8px rgba(5,8,28,.45),0 30px 70px -24px rgba(5,8,28,.60);
  --shadow-float:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(5,8,28,.35),
    0 2px 4px rgba(5,8,28,.30),0 18px 38px -12px rgba(5,8,28,.60),0 0 46px -14px rgba(142,162,255,.35);
  --sf-filter:blur(22px) saturate(170%) brightness(1.04);
  --sf-filter-klein:blur(14px) saturate(160%);
  background:var(--bg);
  font-family:var(--font);
}

/* Hintergrund: Navy mit Lichtinseln in Blau, Rot und Violett, darüber ein feines Raster.
   Die drei Lichtflecken (.sf-aurora) wandern langsam, damit das Glas etwas zu brechen hat. */
body.sf-glas::before{
  background:
    radial-gradient(1100px 620px at 92% -12%,rgba(72,92,210,.34),transparent 62%),
    radial-gradient(900px 560px at -10% 105%,rgba(208,29,36,.20),transparent 60%),
    radial-gradient(700px 480px at 50% 120%,rgba(110,60,140,.18),transparent 65%),
    linear-gradient(180deg,#141B47 0%,#0C1131 42%,var(--bg) 100%);
}
body.sf-glas::after{
  background-image:
    linear-gradient(rgba(251,250,246,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(251,250,246,.035) 1px,transparent 1px);
}
.sf-aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sf-aurora i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.7;will-change:transform}
.sf-aurora i:nth-child(1){width:46vw;height:46vw;left:48%;top:-14vw;background:radial-gradient(circle,#3D52C8 0%,rgba(61,82,200,0) 70%);animation:sf-drift-a 38s ease-in-out infinite alternate}
.sf-aurora i:nth-child(2){width:40vw;height:40vw;left:-10vw;top:46%;background:radial-gradient(circle,rgba(208,29,36,.75) 0%,rgba(208,29,36,0) 70%);opacity:.5;animation:sf-drift-b 46s ease-in-out infinite alternate}
.sf-aurora i:nth-child(3){width:34vw;height:34vw;left:34%;top:62%;background:radial-gradient(circle,#6B4BC4 0%,rgba(107,75,196,0) 70%);opacity:.45;animation:sf-drift-c 54s ease-in-out infinite alternate}
@keyframes sf-drift-a{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-9vw,6vw) scale(1.12)}100%{transform:translate(-3vw,12vw) scale(.94)}}
@keyframes sf-drift-b{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12vw,-8vw) scale(1.1)}100%{transform:translate(20vw,-2vw) scale(.92)}}
@keyframes sf-drift-c{0%{transform:translate(0,0) scale(.95)}50%{transform:translate(-14vw,-10vw) scale(1.08)}100%{transform:translate(10vw,-16vw) scale(1)}}

/* ================= Schale: Seitenleiste und Kopfleiste ================= */
body.sf-glas .sd-sidebar{
  background:var(--glass-material),rgba(14,19,52,.70);
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  border-right:1px solid rgba(251,250,246,.10);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04),14px 0 44px -18px rgba(5,8,28,.8),26px 0 70px -30px rgba(72,92,210,.25);
}
body.sf-glas .sd-logo::before{
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.14) 47%,rgba(255,138,142,.22) 50%,rgba(255,255,255,.14) 53%,transparent 100%);
}
body.sf-glas .sd-nav-group-label{font-family:var(--display);letter-spacing:.1em}
body.sf-glas .sd-nav-item{font-family:var(--font);font-weight:500}
body.sf-glas .sd-nav-item:hover{background:rgba(255,255,255,.06)}
body.sf-glas .sd-nav-item.active{
  background:linear-gradient(90deg,rgba(208,29,36,.26) 0%,rgba(208,29,36,.10) 45%,rgba(255,255,255,.03) 100%);
  border-left-color:var(--sf-rot);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 26px -8px rgba(208,29,36,.6);
}
body.sf-glas .sd-topbar{
  background:var(--glass-material),rgba(12,17,47,.62);
  -webkit-backdrop-filter:blur(22px) saturate(175%);backdrop-filter:blur(22px) saturate(175%);
  border-bottom:1px solid rgba(251,250,246,.10);
}
body.sf-glas .btn-logout:hover{border-color:rgba(251,250,246,.5)}

/* ================= Seitenkopf als Glasbühne ================= */
body.sf-glas .sf-hero{
  position:relative;overflow:hidden;isolation:isolate;
  flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;text-align:center;gap:12px;
  margin:6px 0 34px;padding:34px 24px 30px;
  border-radius:30px;
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(208,29,36,.30),rgba(208,29,36,0) 52%),
    radial-gradient(90% 160% at 100% 100%,rgba(72,92,210,.34),rgba(72,92,210,0) 60%),
    var(--glass-material),rgba(23,30,69,.46);
  -webkit-backdrop-filter:blur(30px) saturate(180%) brightness(1.06);backdrop-filter:blur(30px) saturate(180%) brightness(1.06);
  border:1px solid rgba(251,250,246,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(5,8,28,.4),
    0 22px 48px -18px rgba(5,8,28,.7),0 0 60px -18px rgba(208,29,36,.35);
}
/* Lichtkante oben und ein einziger Glanzlauf auf der Seite */
body.sf-glas .sf-hero::after{
  content:"";position:absolute;left:8%;right:8%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
}
body.sf-glas .sf-hero::before{
  content:"";position:absolute;top:0;left:-50%;width:42%;height:100%;pointer-events:none;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.10) 46%,rgba(255,170,172,.16) 50%,rgba(255,255,255,.10) 54%,transparent 100%);
  filter:blur(2px);
  animation:sf-glanz 9s cubic-bezier(.55,.05,.45,.95) infinite;
}
@keyframes sf-glanz{0%{transform:translateX(0) skewX(-18deg);opacity:0}8%{opacity:1}55%{transform:translateX(420%) skewX(-18deg);opacity:1}58%{opacity:0}100%{transform:translateX(420%) skewX(-18deg);opacity:0}}
.sf-hero-logo{width:84px;height:84px;flex:0 0 auto;border-radius:50%;position:relative;z-index:1;display:block;
  box-shadow:0 0 0 3px rgba(251,250,246,.12),0 12px 30px -8px rgba(5,8,28,.85),0 0 40px -6px rgba(208,29,36,.55)}
.sf-hero-text{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;max-width:100%;position:relative;z-index:1}
body.sf-glas .sf-hero h1{
  font:700 clamp(28px,4vw,46px)/1.04 var(--display);letter-spacing:-.035em;white-space:nowrap;
  color:var(--text);background:linear-gradient(180deg,#FFFFFF 0%,#EEF0FA 48%,#AEB7E6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(208,29,36,.30));font-variant-ligatures:none}
body.sf-glas .sf-hero .sub{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.sf-kicker{position:relative;padding-left:17px;font:600 11px/1.2 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#FFA3A6}
.sf-kicker::before,.sf-kicker::after{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#FF4A52}
.sf-kicker::before{box-shadow:0 0 10px rgba(255,74,82,.9)}
.sf-kicker::after{animation:sf-live 2.4s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes sf-live{0%{transform:scale(1);opacity:.75}100%{transform:scale(3.4);opacity:0}}
body.sf-glas .sf-hero .sf-druck{position:absolute;top:16px;right:16px;z-index:3;
  translate:var(--tx,0px) var(--ty,0px);transition:translate .35s cubic-bezier(.2,.7,.2,1),border-color .15s ease,box-shadow .2s ease}
.sf-druck>span{display:inline-block;translate:calc(var(--tx,0px) * .45) calc(var(--ty,0px) * .45);transition:translate .35s cubic-bezier(.2,.7,.2,1)}

/* ================= Überschriften ================= */
body.sf-glas .section-title{
  display:flex;align-items:center;justify-content:center;gap:16px;text-align:center;
  font:600 20px/1.2 var(--display);letter-spacing:-.015em;text-transform:none;color:var(--text);
  margin:50px 0 18px;scroll-margin-top:72px;
  text-shadow:0 0 28px rgba(142,162,255,.25);
}
/* Zwei Leitungen führen auf den Titel zu, ab und zu läuft ein roter Stromimpuls hinein */
body.sf-glas .section-title::before,body.sf-glas .section-title::after{
  content:"";flex:1 1 0;max-width:190px;min-width:24px;height:2px;border-radius:2px;
  background:
    linear-gradient(90deg,rgba(255,90,96,0),#FF5A60 45%,#FFE3E4 55%,rgba(255,90,96,0)) no-repeat,
    linear-gradient(90deg,rgba(251,250,246,0),rgba(251,250,246,.30));
  background-size:64px 100%,100% 100%;
  background-position:-64px 0,0 0;
  animation:sf-puls-l 6.5s cubic-bezier(.45,0,.55,1) infinite;
}
body.sf-glas .section-title::after{
  background:
    linear-gradient(270deg,rgba(255,90,96,0),#FF5A60 45%,#FFE3E4 55%,rgba(255,90,96,0)) no-repeat,
    linear-gradient(270deg,rgba(251,250,246,0),rgba(251,250,246,.30));
  background-size:64px 100%,100% 100%;
  background-position:calc(100% + 64px) 0,0 0;
  animation-name:sf-puls-r;
}
@keyframes sf-puls-l{0%{background-position:-64px 0,0 0}38%,100%{background-position:calc(100% + 64px) 0,0 0}}
@keyframes sf-puls-r{0%{background-position:calc(100% + 64px) 0,0 0}38%,100%{background-position:-64px 0,0 0}}
body.sf-glas .sf-unter,body.sf-glas .sf-panel-kopf{font-family:var(--display);color:var(--faint);letter-spacing:.12em}
body.sf-glas .sf-unter{scroll-margin-top:72px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center}
body.sf-glas .sf-unter::before,body.sf-glas .sf-unter::after{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:#FF5A60;box-shadow:0 0 8px rgba(255,74,82,.9)}
body.sf-glas .f-hinweis{color:var(--faint);text-align:center;max-width:78ch;margin:-8px auto 16px}

/* ================= Glasflächen ================= */
body.sf-glas .panel{
  background:var(--glass-material),var(--panel);
  border:1px solid rgba(251,250,246,.12);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:var(--sf-filter);backdrop-filter:var(--sf-filter);
}
body.sf-glas .table-wrap{border-radius:var(--r);scrollbar-color:rgba(251,250,246,.3) rgba(255,255,255,.04)}
body.sf-glas .table-wrap::-webkit-scrollbar-thumb{background:rgba(251,250,246,.3)}

/* ================= Kacheln ================= */
.sf-frische{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:-12px 0 6px}
.sf-frische .loading{padding:8px 0}
.sf-kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:6px}
/* Kachelreihen als zentrierte Reihen: eine angebrochene letzte Reihe steht mittig statt links.
   Die Spaltenzahl richtet sich nach der Breite des Kachelblocks (Containerabfrage), nicht nach dem Fenster. */
#k-heute,#k-leitung{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;container-type:inline-size}
#k-heute>.kpi{flex:0 0 calc((100% - 14px) / 2);min-width:0}
#k-leitung>.kpi{flex:0 0 100%;min-width:0}
#k-leitung>.sf-kpi-stand{flex:0 0 100%}
@container (min-width:520px){
  #k-heute>.kpi{flex-basis:calc((100% - 3 * 14px) / 4)}
  #k-leitung>.kpi{flex-basis:calc((100% - 2 * 14px) / 3)}
}
@container (min-width:1000px){
  #k-heute>.kpi{flex-basis:calc((100% - 6 * 14px) / 7)}
  #k-leitung>.kpi{flex-basis:calc((100% - 5 * 14px) / 6)}
}
a.sf-kpi{display:block;color:inherit;text-decoration:none}
a.sf-kpi:hover{text-decoration:none}
.sf-kpi-stand{grid-column:1/-1;color:var(--faint);font-size:11.5px;margin-top:-4px;text-align:center}

body.sf-glas .kpi{border-radius:20px;padding:20px 16px 18px;text-align:center}
/* Kippkarte: Mauslicht plus Glanzstreifen, der mit dem Zeiger wandert (Katalog: 3D-Kippkarten mit Lichtring und Glanz) */
body.sf-glas .kpi::after{
  background:
    linear-gradient(105deg,transparent calc(var(--mx) - 24%),rgba(255,255,255,.11) var(--mx),transparent calc(var(--mx) + 24%)),
    radial-gradient(circle 200px at var(--mx) var(--my),rgba(255,255,255,.12) 0%,rgba(142,162,255,.07) 40%,transparent 72%);
}
body.sf-glas a.sf-kpi:hover{border-color:rgba(251,250,246,.28)}
body.sf-glas .kpi .kpi-label{font:500 12.5px/1.3 var(--font);color:var(--muted);letter-spacing:0}
body.sf-glas .kpi .kpi-value{font:600 42px/1.05 var(--display);letter-spacing:-.04em;margin-top:10px;font-variant-numeric:tabular-nums}
body.sf-glas .kpi .kpi-value small{font:500 14px var(--display);color:var(--muted);letter-spacing:.01em;margin-left:3px}
body.sf-glas .kpi .kpi-note{font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.35}
/* Handlungsbedarf: rote Lichtkante oben, Zahl in hellem Rot */
body.sf-glas .kpi.sun{
  box-shadow:inset 0 2px 0 rgba(255,90,96,.85),var(--shadow),0 0 40px -16px rgba(208,29,36,.55);
  background:radial-gradient(120% 90% at 100% 0%,rgba(208,29,36,.18),rgba(208,29,36,0) 60%),var(--glass-material),var(--panel);
}
body.sf-glas .kpi.sun .kpi-value{color:var(--sf-rot-hell);text-shadow:0 0 26px rgba(208,29,36,.55)}
body.sf-glas .kpi.accent{box-shadow:inset 0 2px 0 rgba(142,162,255,.75),var(--shadow)}
body.sf-glas .kpi.accent .kpi-value{color:#DCE2FF;text-shadow:0 0 26px rgba(142,162,255,.5)}
/* In der Leitung heißt die Hervorhebung Erfolg (Netzzusage), nicht Alarm */
body.sf-glas #k-leitung .kpi.sun{
  box-shadow:inset 0 2px 0 rgba(70,212,154,.8),var(--shadow),0 0 40px -16px rgba(70,212,154,.45);
  background:radial-gradient(120% 90% at 100% 0%,rgba(70,212,154,.14),rgba(70,212,154,0) 60%),var(--glass-material),var(--panel);
}
body.sf-glas #k-leitung .kpi.sun .kpi-value{color:#8EF0C4;text-shadow:0 0 26px rgba(70,212,154,.45)}

/* ================= Tabellen ================= */
.sf-panel{padding:18px 20px}
.sf-2col{margin-top:4px}
.two-col.sf-gleich{grid-template-columns:1fr 1fr}
.sf-unter.sf-unter-oben{margin-top:0}
.sf-unter{font:700 11.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:20px 0 10px}
.sf-panel-kopf{font:700 11.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.sf-fuss{color:var(--faint);font-size:12px;margin:14px auto 0;line-height:1.5;text-align:center;max-width:82ch}
.sf-faint{color:var(--faint)}
.sf-rot{color:#FF8A8E;font-weight:600}
.sf-gelb{color:var(--sf-gelb,#F7C548);font-weight:600}

table.sd.sf-tab tbody tr{cursor:default}
table.sd.sf-tab tbody tr[data-kunde]{cursor:pointer}
table.sd.sf-tab td{vertical-align:top}
table.sd.sf-tab td a{color:var(--text);font-weight:600;text-decoration:none}
table.sd.sf-tab td a:hover{color:var(--brand-soft);text-decoration:underline;text-underline-offset:3px}
table.sd.sf-schmal{min-width:420px}
body.sf-glas table.sd th{
  font:600 10.5px var(--display);letter-spacing:.09em;color:var(--faint);
  padding:14px 14px 10px;border-bottom:1px solid rgba(251,250,246,.14);
}
body.sf-glas table.sd td{border-bottom:1px solid rgba(251,250,246,.07)}
body.sf-glas table.sd tbody tr:last-child td{border-bottom:0}
body.sf-glas table.sd tbody tr:nth-child(even){background:rgba(255,255,255,.022)}
body.sf-glas table.sd tbody tr:hover{background:linear-gradient(90deg,rgba(208,29,36,.16),rgba(208,29,36,.03) 70%);box-shadow:inset 2.5px 0 0 var(--sf-rot)}
body.sf-glas table.sd.sf-tab tbody tr:not([data-kunde]):hover{background:rgba(255,255,255,.04);box-shadow:none}
body.sf-glas table.sd td.num{font-family:var(--font);font-size:13px;font-variant-numeric:tabular-nums}
.sf-titel{font-weight:600}
.sf-sub{display:block;color:var(--faint);font-size:11.5px;margin-top:2px;font-weight:500}
.sf-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:46ch;line-height:1.4}
.sf-quellen{font-size:12.5px;color:var(--muted)}
tr.sf-leer td{color:var(--faint);text-align:center;padding:22px 14px}
tr.sf-verborgen{display:none}
table.sd.sf-tab tr.sf-mehr-zeile td{text-align:center;padding:12px 14px}
table.sd.sf-tab tbody tr.sf-mehr-zeile:hover{background:none;box-shadow:none}
/* Eigene Zeilen: helle Kante links (Rot bleibt dem Handlungsbedarf vorbehalten) */
table.sd.sf-tab tr.sf-ich td:first-child{box-shadow:inset 3px 0 0 rgba(251,250,246,.75)}
.sf-liste li.sf-ich{border-left-color:rgba(251,250,246,.75)}

/* ================= Plaketten, Stapel-Knöpfe, Knöpfe ================= */
body.sf-glas .badge{font-family:var(--font);font-weight:500;
  -webkit-backdrop-filter:var(--sf-filter-klein);backdrop-filter:var(--sf-filter-klein);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
body.sf-glas .badge.b-ok{color:#9BF0C8;background:rgba(70,212,154,.12);border-color:rgba(70,212,154,.38)}
body.sf-glas .badge.b-warn{color:#FADD8A;background:rgba(247,197,72,.12);border-color:rgba(247,197,72,.38)}
body.sf-glas .badge.b-bad{color:#FFB0B3;background:rgba(208,29,36,.18);border-color:rgba(255,107,112,.45)}
body.sf-glas .badge.b-mut{color:var(--muted);background:rgba(251,250,246,.06);border-color:rgba(251,250,246,.18)}
body.sf-glas .badge.b-mut .dot{background:var(--faint)}

#vg-chips{margin:0 0 16px;justify-content:center}
body.sf-glas .chip{
  font:500 12.5px var(--font);color:var(--muted);
  background:var(--glass-material),rgba(255,255,255,.05);
  -webkit-backdrop-filter:var(--sf-filter-klein);backdrop-filter:var(--sf-filter-klein);
  border:1px solid rgba(251,250,246,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 6px 16px -10px rgba(5,8,28,.6);
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
body.sf-glas .chip:hover{color:var(--text);border-color:rgba(251,250,246,.36)}
body.sf-glas .chip.active{
  color:var(--sf-creme);background:var(--glass-material),rgba(208,29,36,.30);border-color:rgba(255,107,112,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 26px -6px rgba(208,29,36,.65);
}
#vg-chips .chip b{font:600 11.5px var(--display);margin-left:5px;opacity:.9;font-variant-numeric:tabular-nums}
body.sf-glas .btn.secondary{
  font:500 13px var(--font);color:var(--text);
  background:var(--glass-material),rgba(255,255,255,.06);
  -webkit-backdrop-filter:var(--sf-filter-klein);backdrop-filter:var(--sf-filter-klein);
  border:1px solid rgba(251,250,246,.22);border-radius:var(--r-sm);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px -10px rgba(5,8,28,.6);
}
body.sf-glas .btn.secondary:hover{border-color:rgba(251,250,246,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 26px -8px rgba(142,162,255,.5)}

/* ================= Aufklappbare Zusatzlisten ================= */
.sf-mehr{margin-top:16px}
.sf-mehr>summary{cursor:pointer;color:var(--muted);font:500 13px var(--font);padding:6px 0;list-style-position:inside;text-align:center}
.sf-mehr>summary::marker{color:var(--sf-rot,#D01D24)}
.sf-mehr>summary:hover{color:var(--text)}
.sf-mehr[open]>summary{margin-bottom:8px}
.sf-mehr-hinweis{margin:0 0 10px}

/* ================= Balken: Netzstatus, CRM-Pflege, Board, Wochen ================= */
.sf-bars{display:block}
.sf-bar{display:grid;grid-template-columns:minmax(120px,190px) 1fr minmax(84px,auto);align-items:center;gap:10px;margin-bottom:10px;font-size:13px}
.sf-bar-n{color:var(--muted);line-height:1.25}
.sf-bar-sp{background:rgba(255,255,255,.07);border-radius:99px;height:12px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(5,8,28,.45)}
.sf-bar-sp i{display:block;height:100%;border-radius:99px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
/* Grundfarben: Blau ist Menge, Rot ist Handlungsbedarf */
.sf-bar-sp i.gruen{background:linear-gradient(90deg,#3446B8,#8EA2FF)}
.sf-bar-sp i.gelb{background:linear-gradient(90deg,#B98710,#F7C548)}
.sf-bar-sp i.rot{background:linear-gradient(90deg,#9E1219,#FF5A60)}
.sf-bar-sp i.grau{background:linear-gradient(90deg,#4A5277,#8A92B5)}
.sf-bar-sp i.dunkel{background:linear-gradient(90deg,#23306E,#4E5FB0)}
/* Wo Farbe Bedeutung trägt: Pflegegrad als Ampel, Netzzusage als Erfolg */
#pflege-balken .sf-bar-sp i.gruen,#netz-status .sf-bar-sp i.gelb{background:linear-gradient(90deg,#1C8A5E,#46D49A)}
.sf-bar-w{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sf-bar-w small{font-weight:400;color:var(--faint);font-size:11.5px}

.sf-woche{display:grid;grid-template-columns:78px 1fr minmax(150px,auto);align-items:center;gap:10px;margin-bottom:9px;font-size:13px}
.sf-woche-l{color:var(--muted);white-space:nowrap}
.sf-woche-w{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sf-woche-w b{display:inline-block;min-width:34px;font-family:var(--display,inherit);font-weight:600}
.sf-woche-w small{display:block;color:var(--faint);font-size:11px}

/* ================= Listen: Zusagen und Aufgaben ================= */
.sf-liste{list-style:none;margin:0;padding:0}
.sf-liste li{padding:10px 0 10px 12px;border-bottom:1px solid var(--line);border-left:3px solid transparent;font-size:13.5px;line-height:1.45}
.sf-liste li:last-child{border-bottom:0}
.sf-li-kopf{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.sf-li-kopf>span{color:var(--muted);font-size:12.5px;white-space:nowrap}
.sf-liste a{color:var(--text);font-weight:600;text-decoration:none}
.sf-liste a:hover{color:var(--brand-soft);text-decoration:underline;text-underline-offset:3px}

#sf-sperre .empty{margin-top:10px}
/* Leer- und Ladezustand in Markenfarben: Blitz statt Sonnenpanel, Ladebalken in Creme */
body.sf-glas .empty::before{opacity:.9;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M28 3 12 27h11l-4 18 17-25H25z" fill="%23D01D24"/></svg>') center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(208,29,36,.55))}
body.sf-glas .loading::before{background:linear-gradient(90deg,rgba(251,250,246,.08) 25%,rgba(251,250,246,.42) 50%,rgba(251,250,246,.08) 75%);background-size:200% 100%}

/* ================= Effekte aus dem Hauskatalog ================= */
/* Mittig im Bereich rechts der Seitenleiste (auf breiten Schirmen bleibt sonst rechts ein Streifen frei) */
@media (min-width:901px){
  body.sf-glas .sd-main{margin-left:calc(238px + max(0px,(100% - 238px - 1280px) / 2))}
}

/* Stromnetz (Katalog: Verbindende Punkte, Plexus), Zeigerlicht und Filmkorn */
.sf-netz{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.sf-netz.sf-an{opacity:.85}
.sf-zeigerlicht{position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(208,29,36,.20) 0%,rgba(72,92,210,.13) 38%,rgba(72,92,210,0) 70%);
  opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s ease;will-change:transform}
.sf-zeigerlicht.sf-an{opacity:1}
.sf-korn{position:fixed;inset:-80px;z-index:50;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
  animation:sf-korn .6s steps(3) infinite}
@keyframes sf-korn{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}}

/* Umlaufender Stromrand (Katalog: Rotierender Verlaufsrand über registrierte CSS-Eigenschaft) */
@property --sf-ga{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes sf-ga{to{--sf-ga:360deg}}
.sf-hero-rand,body.sf-glas .kpi::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
}
.sf-hero-rand{z-index:0;padding:1.5px;will-change:transform;
  background:conic-gradient(from var(--sf-ga),rgba(208,29,36,0) 0deg,rgba(208,29,36,0) 190deg,#D01D24 262deg,#FF6A70 296deg,#FBFAF6 318deg,#8EA2FF 336deg,rgba(142,162,255,0) 360deg);
  animation:sf-ga 7s linear infinite}
/* Kacheln: Ring erscheint unter dem Zeiger; Kacheln mit Handlungsbedarf atmen mit einem roten Rand */
body.sf-glas .kpi::before{padding:1.5px;opacity:0;transition:opacity .3s ease;
  background:conic-gradient(from var(--sf-ga),rgba(142,162,255,0) 0deg,rgba(142,162,255,0) 200deg,#8EA2FF 280deg,#FBFAF6 316deg,rgba(251,250,246,0) 360deg)}
body.sf-glas .kpi:hover::before{opacity:1;animation:sf-ga 2.8s linear infinite}
body.sf-glas #k-heute .kpi.sun::before{
  background:conic-gradient(from var(--sf-ga),rgba(255,90,96,.55) 0deg,rgba(255,90,96,.15) 150deg,#FF5A60 270deg,#FFE3E4 310deg,rgba(255,90,96,.55) 360deg);
  animation:sf-atmen 3.2s ease-in-out calc(var(--i,0) * -.45s) infinite alternate}
body.sf-glas #k-heute .kpi.sun:hover::before{opacity:1;animation:sf-ga 2.4s linear infinite}
@keyframes sf-atmen{from{opacity:.25}to{opacity:.9}}
body.sf-glas a.sf-kpi:focus-visible{outline:2px solid #FF8A8E;outline-offset:3px}

/* Lichtring um das Logo (Katalog: Lichtring der Kippkarten), dreht nur per transform */
.sf-logo-ring{position:relative;z-index:1;display:grid;place-items:center;width:108px;height:108px;flex:0 0 auto}
.sf-logo-ring::before,.sf-logo-ring::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.sf-logo-ring::before{inset:-4px;opacity:.9;filter:blur(11px);
  background:conic-gradient(rgba(208,29,36,0) 0deg,#FF4A52 70deg,#FBFAF6 92deg,#8EA2FF 128deg,rgba(142,162,255,0) 190deg,rgba(208,29,36,0) 250deg,#D01D24 320deg,rgba(208,29,36,0) 360deg);
  animation:sf-dreh 8s linear infinite}
.sf-logo-ring::after{inset:3px;
  background:conic-gradient(rgba(251,250,246,0) 0deg,rgba(251,250,246,0) 240deg,#FBFAF6 320deg,#FF5A60 340deg,rgba(255,90,96,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  animation:sf-dreh 3.4s linear infinite reverse}
@keyframes sf-dreh{to{transform:rotate(1turn)}}

/* Laufband mit den Kennzahlen im Seitenkopf (Katalog: Marquee endlos ohne Ruck) */
.sf-band{position:relative;z-index:1;align-self:stretch;margin:12px -24px -30px;padding:13px 0;overflow:hidden;
  border-top:1px solid rgba(251,250,246,.10);background:linear-gradient(180deg,rgba(9,13,39,.10),rgba(9,13,39,.38));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.sf-band-spur{display:flex;width:max-content;animation:sf-lauf var(--dauer,60s) linear infinite}
.sf-band:hover .sf-band-spur{animation-play-state:paused}
.sf-band-satz{display:flex;flex:0 0 auto}
.sf-band-posten{display:inline-flex;align-items:center;gap:7px;padding:0 22px 0 0;white-space:nowrap;font:500 13px var(--font);color:var(--muted)}
.sf-band-posten::before{content:"";flex:0 0 auto;width:11px;height:14px;margin-right:12px;opacity:.85;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M28 3 12 27h11l-4 18 17-25H25z" fill="%23FF5A60"/></svg>') center/contain no-repeat}
.sf-band-posten b{font:600 16px var(--display);color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.015em;
  background:linear-gradient(180deg,#FFFFFF 0%,#E8EBFA 50%,#AFB8E8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sf-band-heiss b{color:#FF8A8E;background-image:linear-gradient(180deg,#FFECEC 0%,#FF8A8E 50%,#E2343B 100%)}
.sf-band-gut b{color:#8EF0C4;background-image:linear-gradient(180deg,#ECFFF6 0%,#8EF0C4 50%,#2FB57E 100%)}
@keyframes sf-lauf{to{transform:translateX(-50%)}}

/* Spotlight auf allen Glasflächen (Katalog: Spotlight-Kachel per CSS-Variable) */
body.sf-glas #sf-inhalt .panel:not(.kpi):not(.empty){position:relative}
body.sf-glas #sf-inhalt .panel:not(.kpi):not(.empty)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle 340px at var(--lx,50%) var(--ly,50%),rgba(255,255,255,.075) 0%,rgba(208,29,36,.05) 42%,transparent 72%);
  opacity:0;transition:opacity .35s ease;mix-blend-mode:screen}
body.sf-glas #sf-inhalt .panel.sf-licht::after{opacity:1}
body.sf-glas table.sd thead th{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0))}

/* Einblenden beim Scrollen (Katalog: Element-Einblendung beim Scrollen). Die Klasse sf-fx setzt
   erst das Skript, ohne Skript ist nichts versteckt. translate und scale statt transform, damit
   das Kippen der Kacheln (fx.js) unberührt bleibt. */
body.sf-fx .sf-rv{opacity:0;translate:0 28px;scale:.985;
  transition:opacity .8s ease var(--d,0ms),translate 1.05s cubic-bezier(.16,1,.3,1) var(--d,0ms),scale 1.05s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
body.sf-fx .kpi.sf-rv{
  transition:opacity .8s ease var(--d,0ms),translate 1.05s cubic-bezier(.16,1,.3,1) var(--d,0ms),scale 1.05s cubic-bezier(.16,1,.3,1) var(--d,0ms),
    transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .2s ease}
body.sf-fx .sf-rv.sf-da{opacity:1;translate:none;scale:none}

/* Balken wachsen beim Einblenden und führen danach ab und zu einen Lichtimpuls */
.sf-bar-sp i{position:relative;overflow:hidden}
body.sf-fx .sf-bar-sp i{transform-origin:left center;animation:sf-wachsen 1.3s cubic-bezier(.16,1,.3,1) both paused}
body.sf-fx .sf-rv.sf-da .sf-bar-sp i{animation-play-state:running}
@keyframes sf-wachsen{from{transform:scaleX(0)}}
.sf-bar:nth-child(2) i,.sf-woche:nth-child(2) i{animation-delay:.06s}
.sf-bar:nth-child(3) i,.sf-woche:nth-child(3) i{animation-delay:.12s}
.sf-bar:nth-child(4) i,.sf-woche:nth-child(4) i{animation-delay:.18s}
.sf-bar:nth-child(5) i,.sf-woche:nth-child(5) i{animation-delay:.24s}
.sf-bar:nth-child(6) i,.sf-woche:nth-child(6) i{animation-delay:.30s}
.sf-bar:nth-child(7) i,.sf-woche:nth-child(7) i{animation-delay:.36s}
.sf-bar:nth-child(n+8) i,.sf-woche:nth-child(n+8) i{animation-delay:.42s}
.sf-bar-sp i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  transform:translateX(-120%);animation:sf-fluss 5.5s cubic-bezier(.45,0,.55,1) 1.6s infinite}
.sf-bar:nth-child(even) i::after,.sf-woche:nth-child(even) i::after{animation-delay:2.4s}
@keyframes sf-fluss{0%{transform:translateX(-120%)}35%,100%{transform:translateX(240%)}}

/* Glockenfenster und Neuheiten-Hinweis der Schale: in sunlife.css fest auf DESK-Grün gesetzt */
body.sf-glas .wv-panel,body.sf-glas .wv-hinweis{background:var(--glass-material),rgba(16,22,56,.96);border-color:rgba(251,250,246,.18)}
body.sf-glas .wv-hinweis{border-color:rgba(255,107,112,.5);box-shadow:0 26px 60px -18px rgba(5,8,28,.9),0 0 40px -14px rgba(208,29,36,.45)}
body.sf-glas .wv-btn.wv-erfassen{color:#FFE3E4;background:rgba(208,29,36,.22);border-color:rgba(255,107,112,.6)}
body.sf-glas .wv-btn.wv-erfassen:hover{color:#fff;background:#D01D24;border-color:#D01D24}

/* ================= Zahlen (MM 11.10.2026: "die Zahlen optisch noch wertiger") ================= */
/* Jede Kachelzahl steckt in .sf-zahl (js/sf-effekte.js): Metallverlauf von oben nach unten
   (Katalog: Verlaufstext per background-clip), darüber ab und zu ein Glanzlauf (Katalog: Schimmer
   aus "Schwarzer Marmor mit Gold"), Nachkommastellen kleiner, darunter ein Sockel in der Farbe
   der Kachel. Rot bleibt Handlungsbedarf, in der Leitung ist die Hervorhebung grün. */
body.sf-glas .kpi{--sf-lh:1.05;--sf-metall:linear-gradient(180deg,#FFFFFF 0%,#F2F3FB 42%,#AFB8E8 100%);--sf-glut:rgba(142,162,255,.30)}
body.sf-glas .kpi.accent{--sf-metall:linear-gradient(180deg,#FFFFFF 0%,#DCE2FF 45%,#8EA2FF 100%);--sf-glut:rgba(142,162,255,.5);--sf-sockel:#8EA2FF}
body.sf-glas .kpi.sun{--sf-metall:linear-gradient(180deg,#FFECEC 0%,#FF8A8E 46%,#E2343B 100%);--sf-glut:rgba(208,29,36,.62);--sf-sockel:#FF5A60}
body.sf-glas #k-leitung .kpi.sun{--sf-metall:linear-gradient(180deg,#ECFFF6 0%,#8EF0C4 46%,#2FB57E 100%);--sf-glut:rgba(70,212,154,.5);--sf-sockel:#46D49A}
body.sf-glas .sf-zahl{display:inline-block;line-height:var(--sf-lh);text-shadow:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.92) 50%,rgba(255,255,255,0) 58%) no-repeat,var(--sf-metall);
  background-size:300% 100%,100% 100%;background-position:150% 0,0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 16px var(--sf-glut));
  animation:sf-zahl-glanz 8s cubic-bezier(.45,0,.55,1) calc(2.6s + var(--i,0) * .45s) infinite}
@keyframes sf-zahl-glanz{0%{background-position:150% 0,0 0}24%,100%{background-position:-50% 0,0 0}}
body.sf-glas .sf-nk{font-size:.58em;letter-spacing:0;margin-left:.02em}
body.sf-glas .kpi .kpi-value::after{content:"";display:block;width:38px;height:2px;margin:10px auto 0;border-radius:2px;
  background:linear-gradient(90deg,rgba(251,250,246,0),var(--sf-sockel,rgba(251,250,246,.55)),rgba(251,250,246,0));
  box-shadow:0 0 12px var(--sf-glut)}

/* Zählwerk: Jede Ziffer ist eine senkrechte Spur, die auf ihre Ziffer rollt. Der Platzhalter hält
   Breite und Grundlinie, clip-path statt overflow, damit die Grundlinie der Zahl stehen bleibt. */
body.sf-glas .sf-zahl.sf-rollt{background:none;animation:none}
.sf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sf-ziffer{position:relative;display:inline-block;clip-path:inset(0 -.12em)}
.sf-platz{visibility:hidden}
.sf-spur{position:absolute;left:0;right:0;top:0;white-space:pre;text-align:center;line-height:var(--sf-lh);
  background:var(--sf-metall);background-size:100% calc(1em * var(--sf-lh));background-repeat:repeat-y;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transform:translateY(calc(var(--a) * -1em * var(--sf-lh)));
  transition:transform var(--dauer,1.2s) cubic-bezier(.16,1,.3,1)}
.sf-rolle.sf-los .sf-spur{transform:translateY(calc(var(--e) * -1em * var(--sf-lh)))}
.sf-rollt .sf-trenn{background:var(--sf-metall);-webkit-background-clip:text;background-clip:text}

/* Änderung beim Nachladen: kurzes Aufleuchten der Kachel und eine neutrale Marke mit der Differenz */
.sf-delta{position:absolute;top:10px;right:10px;z-index:2;padding:1px 8px;border-radius:99px;
  font:600 11px/1.6 var(--display);font-variant-numeric:tabular-nums;color:var(--sf-creme,#FBFAF6);
  background:rgba(251,250,246,.10);border:1px solid rgba(251,250,246,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 18px -4px rgba(142,162,255,.6);
  animation:sf-delta-ein .7s cubic-bezier(.16,1,.3,1) both;transition:opacity 1.4s ease}
.sf-delta.sf-weg{opacity:0}
@keyframes sf-delta-ein{from{opacity:0;transform:translateY(-6px) scale(.85)}}
body.sf-glas .kpi.sf-neu{animation:sf-neu 2.8s cubic-bezier(.2,.7,.2,1)}
@keyframes sf-neu{0%{box-shadow:inset 0 0 0 1px rgba(251,250,246,.55),0 0 46px -4px rgba(142,162,255,.75)}}

/* Live: Beim minütlichen Nachzeichnen wachsen die Balken nicht neu (js/page-stromfritzen.js) */
body[data-sf-live] .sf-bar-sp i{animation:none}
/* Reißt die Verbindung ab, steht der Live-Punkt still und wird grau */
.sf-kicker.sf-aus{color:var(--faint)}
.sf-kicker.sf-aus::before{background:#8A92B5;box-shadow:none}
.sf-kicker.sf-aus::after{animation:none;opacity:0}

/* Tabellenzahlen in der Zahlenschrift, gleich breite Ziffern */
body.sf-glas table.sd td.num{font-family:var(--display);font-size:13.5px;font-weight:500;letter-spacing:-.005em;font-variant-numeric:tabular-nums}
body.sf-glas .sf-bar-w{font-family:var(--display)}

/* ================= Stromfritzen-Eingang: Anmeldung und Aufgaben ================= */
/* Was nur in einem Eingang gilt, trägt nur-sf oder nur-sl. html[data-marke] setzt
   js/marke-frueh.js vor dem ersten Bild, die Stromfritzen-Teile stehen bis dahin verborgen. */
/* Das hidden-Attribut allein reicht nicht: .login-card img.logo (sunlife.css) setzt display:block */
html:not([data-marke="stromfritzen"]) .nur-sf{display:none!important}
html[data-marke="stromfritzen"] .nur-sl{display:none!important}
html[data-marke="stromfritzen"] .nur-sf{display:block}

body.sf-glas .login-wrap{background:none}
body.sf-glas .login-card{position:relative;isolation:isolate;max-width:420px;border-radius:28px;padding:40px 36px 34px;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(208,29,36,.26),rgba(208,29,36,0) 55%),
    radial-gradient(100% 120% at 100% 100%,rgba(72,92,210,.30),rgba(72,92,210,0) 60%),
    var(--glass-material),rgba(23,30,69,.5);
  -webkit-backdrop-filter:blur(30px) saturate(180%) brightness(1.06);backdrop-filter:blur(30px) saturate(180%) brightness(1.06);
  border:1px solid rgba(251,250,246,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(5,8,28,.4),0 30px 70px -24px rgba(5,8,28,.85),0 0 70px -20px rgba(208,29,36,.4)}
/* Umlaufender Stromrand wie im Kopf des Dashboards */
body.sf-glas .login-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--sf-ga),rgba(208,29,36,0) 0deg,rgba(208,29,36,0) 190deg,#D01D24 262deg,#FF6A70 296deg,#FBFAF6 318deg,#8EA2FF 336deg,rgba(142,162,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:sf-ga 7s linear infinite}
body.sf-glas .login-card img.logo.logo-sf{width:96px;height:96px;max-width:none;margin:0 auto 4px;border-radius:50%;
  box-shadow:0 0 0 3px rgba(251,250,246,.12),0 12px 30px -8px rgba(5,8,28,.85),0 0 40px -6px rgba(208,29,36,.55)}
body.sf-glas .login-card .desk-line{font:600 11px/1 var(--display);letter-spacing:.24em;color:#FFA3A6;margin:16px 0 26px}
body.sf-glas .login-foot{color:var(--faint)}

body.sf-glas .btn:not(.secondary){color:#fff;
  background:linear-gradient(180deg,#F04A51 0%,#D01D24 52%,#A3141A 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.25) inset,0 6px 16px -4px rgba(208,29,36,.55),0 10px 24px -10px rgba(5,8,28,.7)}
body.sf-glas .btn:not(.secondary):hover{
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.25) inset,0 10px 24px -4px rgba(208,29,36,.65),0 16px 32px -12px rgba(5,8,28,.8)}
body.sf-glas .input{background:rgba(9,13,39,.55);border-color:rgba(251,250,246,.20);transition:border-color .15s ease,box-shadow .15s ease}
body.sf-glas .input:focus{border-color:#FF6A70;box-shadow:0 0 0 3px rgba(208,29,36,.22)}
body.sf-glas select.input option{background:#141B47;color:#FBFAF6}
body.sf-glas .input[type="date"]{color-scheme:dark}

body.sf-glas .sd-page-head:not(.sf-hero) h1{font:700 30px/1.1 var(--display);letter-spacing:-.035em;
  background:linear-gradient(180deg,#FFFFFF 0%,#EEF0FA 48%,#AEB7E6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.sf-glas .sd-page-head:not(.sf-hero) .sub{font-family:var(--display);font-variant-numeric:tabular-nums}
body.sf-glas .tr-gruppe td{font-family:var(--display);color:#FFA3A6;background:rgba(208,29,36,.08);letter-spacing:.12em}
body.sf-glas .badge.b-brand{color:#FFB0B3;background:rgba(208,29,36,.14);border-color:rgba(255,107,112,.4)}
body.sf-glas .badge.b-info{color:#C3CDFF;background:rgba(142,162,255,.12);border-color:rgba(142,162,255,.38)}
body.sf-glas .badge.b-info .dot{background:#8EA2FF}

body.sf-glas .modal-back{background:rgba(5,8,28,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.sf-glas .modal{border-radius:24px;border:1px solid rgba(251,250,246,.18);box-shadow:var(--shadow-float);
  background:radial-gradient(120% 80% at 0% 0%,rgba(208,29,36,.16),rgba(208,29,36,0) 55%),var(--glass-material),rgba(20,26,62,.95)}
body.sf-glas .modal h2{font:600 20px/1.2 var(--display);letter-spacing:-.015em}
body.sf-glas .modal .section-title{justify-content:flex-start;text-align:left;font-size:15px;margin:24px 0 10px;text-shadow:none}
body.sf-glas .modal .section-title::before,body.sf-glas .modal .section-title::after{display:none}

/* Stufe 3 (12.10.2026): Wesselys Arbeitsbereich im Stromfritzen-Eingang (Anrufliste, Kundengewinnung,
   Kundenliste, Pipeline, Termine, Themenkarten, Bericht). Im SUNlife DESK steht auf Markenflächen dunkle
   Schrift auf Grün; auf Stromfritzen-Rot braucht es Weiß. Rot heißt Handlungsbedarf, deshalb sind
   Telefonnummern hier Creme statt Rot. */
body.sf-glas .wv-btn.wv-ruf,body.sf-glas .wv-btn.wv-ruf:hover,
body.sf-glas .wv-btn.wv-erfassen:hover,body.sf-glas .chip.chip-alarm.active{color:#fff}
body.sf-glas .sd-tel{color:var(--text);text-decoration:underline;text-decoration-color:rgba(251,250,246,.22);text-underline-offset:3px}
body.sf-glas .sd-tel:hover{color:#fff;text-decoration-color:rgba(251,250,246,.6)}

/* ================= Rückfälle und Barrierefreiheit ================= */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.sf-glas .panel,body.sf-glas .sf-hero{background:var(--glass-material),var(--panel-solid)}
  body.sf-glas .sd-sidebar,body.sf-glas .sd-topbar{background:#121842}
}
@media (prefers-reduced-transparency:reduce){
  body.sf-glas .panel,body.sf-glas .sf-hero,body.sf-glas .chip,body.sf-glas .badge,body.sf-glas .btn.secondary,
  body.sf-glas .sd-sidebar,body.sf-glas .sd-topbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body.sf-glas .panel,body.sf-glas .sf-hero{background:var(--panel-solid)!important}
  body.sf-glas .sd-sidebar,body.sf-glas .sd-topbar{background:#121842!important}
  .sf-aurora,.sf-korn,.sf-zeigerlicht{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sf-aurora i,body.sf-glas .sf-hero::before,.sf-korn,.sf-hero-rand,.sf-logo-ring::before,.sf-logo-ring::after,
  .sf-kicker::after,body.sf-glas .section-title::before,body.sf-glas .section-title::after,
  body.sf-glas .kpi::before,body.sf-glas .kpi:hover::before,body.sf-glas #k-heute .kpi.sun::before,.sf-bar-sp i::after{animation:none!important}
  body.sf-glas .sf-hero::before,.sf-kicker::after,.sf-bar-sp i::after,.sf-zeigerlicht{display:none}
  body.sf-glas #k-heute .kpi.sun::before{opacity:.6}
  body.sf-glas .sf-zahl,body.sf-glas .kpi.sf-neu,.sf-delta,body.sf-glas .login-card::before{animation:none!important}
  /* Laufband entfällt: dieselben Zahlen stehen in den Kacheln */
  .sf-band{display:none!important}
}

@media(max-width:900px){
  .two-col.sf-gleich{grid-template-columns:1fr}
}
@media(max-width:760px){
  body.sf-glas{--sf-filter:blur(14px) saturate(160%)}
  .sf-aurora i{filter:blur(60px)}
  .sf-aurora i:nth-child(1){width:80vw;height:80vw}
  .sf-aurora i:nth-child(2){width:70vw;height:70vw}
  .sf-aurora i:nth-child(3){display:none}
  body.sf-glas .sf-hero{padding:26px 14px 24px;gap:10px;border-radius:24px}
  .sf-band{margin:8px -14px -24px}
  .sf-logo-ring{width:86px;height:86px}
  .sf-hero-logo{width:66px;height:66px}
  body.sf-glas .sf-hero h1{font-size:clamp(22px,7.2vw,30px)}
  .sf-kicker{font-size:9.5px;letter-spacing:.14em}
  body.sf-glas .sf-hero .sf-druck{top:10px;right:10px;padding:6px 11px;font-size:12px}
  body.sf-glas .section-title{font-size:17px;gap:10px;margin:40px 0 14px}
  body.sf-glas .section-title::before,body.sf-glas .section-title::after{max-width:56px;min-width:14px}
  body.sf-glas .kpi .kpi-value{font-size:30px}
  .sf-delta{top:6px;right:6px;font-size:10px;padding:0 6px}
  .sf-korn{opacity:.07}
  .sf-bar{grid-template-columns:1fr auto;gap:4px 10px}
  .sf-bar-n{grid-column:1/-1}
  .sf-bar-sp{grid-column:1}
  .sf-woche{grid-template-columns:64px 1fr auto;gap:8px}
  .sf-woche-w small{display:none}
  .sf-clamp{max-width:none}
}

/* ================= Druck: hell, ohne Glas ================= */
@media print{
  body.sf-glas{--text:#1c2230;--muted:#3e4558;--faint:#5d6478;--line:rgba(32,41,87,.14);--line-strong:rgba(32,41,87,.3);background:#fff!important;color:#1c2230}
  body.sf-glas::before,body.sf-glas::after,.sf-aurora,body.sf-glas .sf-hero::before{display:none!important}
  .sf-netz,.sf-zeigerlicht,.sf-korn,.sf-band,.sf-hero-rand,.sf-kicker::after,.sf-logo-ring::before,.sf-logo-ring::after,body.sf-glas .kpi::before{display:none!important}
  body.sf-fx .sf-rv{opacity:1!important;translate:none!important;scale:none!important}
  body.sf-fx .sf-bar-sp i{animation:none!important}
  .sf-bar-sp i::after{display:none!important}
  body.sf-glas .sf-hero{gap:6px}
  .sf-logo-ring{width:56px;height:56px}
  .sf-hero-logo{width:52px;height:52px;box-shadow:none}
  body.sf-glas .sf-hero h1{font-size:26px;background:none;-webkit-text-fill-color:#202957;color:#202957;filter:none}
  .sf-kicker{color:#a3141a}
  body.sf-glas .section-title{margin:22px 0 10px;text-shadow:none;font-size:16px}
  body.sf-glas .section-title::before,body.sf-glas .section-title::after{animation:none;background:rgba(32,41,87,.28);max-width:120px;height:1px}
  body.sf-glas .sf-unter::before,body.sf-glas .sf-unter::after{box-shadow:none}
  body.sf-glas .panel,body.sf-glas .sf-hero,body.sf-glas .chip,body.sf-glas .badge,body.sf-glas .btn{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
  body.sf-glas .panel,body.sf-glas .kpi,body.sf-glas .kpi.sun,body.sf-glas .kpi.accent,body.sf-glas #k-leitung .kpi.sun{background:#fff!important;border:1px solid rgba(32,41,87,.22)}
  body.sf-glas .sf-hero{background:#fff!important;border:0;border-bottom:3px solid #D01D24;border-radius:0;padding:0 0 12px}
  body.sf-glas .kpi .kpi-value,body.sf-glas .kpi.accent .kpi-value{color:#202957!important;text-shadow:none!important}
  body.sf-glas .kpi.sun .kpi-value{color:#D01D24!important;text-shadow:none!important}
  body.sf-glas #k-leitung .kpi.sun .kpi-value{color:#1C8A5E!important}
  body.sf-glas .sf-zahl,body.sf-glas .sf-spur,body.sf-glas .sf-trenn{background:none!important;-webkit-text-fill-color:currentColor!important;filter:none!important;animation:none!important}
  body.sf-glas .kpi .kpi-value::after{background:rgba(32,41,87,.3);box-shadow:none}
  .sf-delta{display:none!important}
  body.sf-glas table.sd tbody tr:nth-child(even){background:#f4f5f9}
  body.sf-glas .badge.b-ok{color:#0f6b45}
  body.sf-glas .badge.b-warn{color:#8a6100}
  body.sf-glas .badge.b-bad{color:#a3141a}
  body.sf-glas .sf-rot{color:#a3141a}
  body.sf-glas .sf-gelb{color:#8a6100}
  tr.sf-verborgen{display:table-row !important}
  .sf-mehr-zeile{display:none !important}
  .sd-sidebar,.sd-topbar,.sf-noprint,#vg-chips,#desk-help-btn,#desk-help-panel,#desk-help-back{display:none !important}
  /* Schwebende Fenster der Schale (Neuheiten-Hinweis, Glocke, Meldungen) stünden sonst auf jeder Seite */
  #wv-hinweis,#wv-panel,#sd-toast,.toast{display:none !important}
  .sd-main{margin:0;padding:0}
  .panel{break-inside:avoid}
  /* Große Tabellen dürfen umbrechen, sonst bleibt vor jeder eine halbe Seite leer */
  .panel.table-wrap{break-inside:auto}
  table.sd tr{break-inside:avoid}
  table.sd thead{display:table-header-group}
  .sf-mehr{display:block}
  .sf-bar-sp i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}