/* Facility Tool – Designs zum Wählen (ab 1.117.0, Systemeinstellungen → Design, nur Superadmin)
   Standard = nur app.css (dieses Stylesheet greift dann nicht). Auf <html> setzen theme-init.js/brand.js:
     data-design="glass"  Glass Night: Glasflächen, Leuchtkanten, Farblichter
     data-design="soft"   Soft-UI: weich geformte Flächen, Knöpfe drücken sich ein
     data-bg="lights|aurora|band|circuit|calm|none"   Hintergrund hinter Menü und Kacheln
   Hell/Dunkel bleibt data-theme="light" bzw. ohne Attribut (dunkel) wie in app.css.
   Fast alles läuft über die Farb-Tokens aus app.css; Glas, Schatten und Bewegung nur für die großen Flächen. */

/* ====================== Tokens ====================== */
/* Glass Night – dunkel */
:root[data-design="glass"] {
  --bg: #060a13;
  --panel: rgba(14, 22, 38, .74);
  --panel-2: rgba(34, 52, 78, .5);
  --panel-solid: rgba(10, 17, 30, .94);
  --line: rgba(34, 228, 255, .2);
  --line-soft: rgba(34, 228, 255, .09);
  --text: #e8f6ff;
  --muted: #8ea6c2;
  --faint: #5d7390;
  --signal-text: #f2b705;
  --lamp-off: #0a1020;
  --backdrop: rgba(2, 6, 14, .6);
  --r-m: 10px;
  --r-l: 16px;
  --d-acc: #22e4ff;
  --d-acc2: #b06cff;
  --d-blur: blur(14px) saturate(140%);
  --d-sh: 0 12px 32px -16px rgba(0, 0, 0, .85);
  --d-sh-h: 0 0 26px -6px rgba(34, 228, 255, .4), 0 18px 40px -16px rgba(0, 0, 0, .85);
  --d-field: rgba(4, 9, 18, .55);
  --d-nav: linear-gradient(90deg, rgba(34, 228, 255, .2), rgba(176, 108, 255, .12));
  --d-nav-sh: inset 0 0 0 1px rgba(34, 228, 255, .45), 0 0 18px -4px rgba(34, 228, 255, .6);
  --d-grid: rgba(34, 228, 255, .045);
  --b1: #00b8e6; --b2: #9b4dff; --b3: #ff3fa4; --b-o: .42;
}
/* Glass Night – hell */
:root[data-design="glass"][data-theme="light"] {
  --bg: #edf3fa;
  --panel: rgba(255, 255, 255, .66);
  --panel-2: rgba(232, 242, 252, .62);
  --panel-solid: rgba(250, 253, 255, .96);
  --line: rgba(0, 170, 220, .32);
  --line-soft: rgba(0, 140, 200, .13);
  --text: #0d1b2e;
  --muted: #4c5f78;
  --faint: #7b8ca3;
  --signal-text: #8a6400;
  --lamp-off: #ffffff;
  --backdrop: rgba(13, 27, 46, .3);
  --d-acc: #00a3d6;
  --d-acc2: #8a4dff;
  --d-blur: blur(16px) saturate(170%);
  --d-sh: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 10px 30px -16px rgba(40, 60, 140, .35);
  --d-sh-h: 0 0 24px -4px rgba(0, 190, 240, .5), 0 18px 36px -16px rgba(40, 60, 140, .4);
  --d-field: rgba(255, 255, 255, .7);
  --d-nav: linear-gradient(90deg, rgba(0, 200, 240, .18), rgba(138, 77, 255, .12));
  --d-nav-sh: inset 0 0 0 1px rgba(0, 170, 220, .55), 0 0 16px -4px rgba(0, 190, 240, .6);
  --d-grid: rgba(0, 140, 200, .06);
  --b1: #5fe6ff; --b2: #c39bff; --b3: #ff9ad5; --b-o: .55;
}
/* Soft-UI – dunkel */
:root[data-design="soft"] {
  --bg: #1f2630;
  --panel: #1f2630;
  --panel-2: #252d38;
  --panel-solid: #222a35;
  --line: rgba(255, 255, 255, .07);
  --line-soft: rgba(255, 255, 255, .045);
  --text: #e3e8ef;
  --muted: #9aa7b8;
  --faint: #6f7d90;
  --signal-text: #f2b705;
  --lamp-off: #151a21;
  --backdrop: rgba(10, 13, 18, .55);
  --r-m: 12px;
  --r-l: 20px;
  --d-acc: #3cc6d9;
  --d-acc2: #8ea6ff;
  --d-hi: #29323f;
  --d-lo: #151a21;
  --d-blur: none;
  --d-sh: 6px 6px 14px var(--d-lo), -6px -6px 14px var(--d-hi);
  --d-sh-h: 10px 10px 22px var(--d-lo), -10px -10px 22px var(--d-hi);
  --d-in: inset 3px 3px 7px var(--d-lo), inset -3px -3px 7px var(--d-hi);
  --d-field: transparent;
  --b1: #1b5f86; --b2: #4a3d8f; --b3: #6e5420; --b-o: .45;
}
/* Soft-UI – hell */
:root[data-design="soft"][data-theme="light"] {
  --bg: #e4e9f0;
  --panel: #e4e9f0;
  --panel-2: #dce2ea;
  --panel-solid: #e8ecf2;
  --line: rgba(120, 135, 160, .22);
  --line-soft: rgba(120, 135, 160, .14);
  --text: #26313f;
  --muted: #5c6a82;
  --faint: #8a96a8;
  --signal-text: #8a6400;
  --lamp-off: #ffffff;
  --backdrop: rgba(38, 49, 63, .28);
  --d-acc: #1a9bb0;
  --d-acc2: #6b8cff;
  --d-hi: #ffffff;
  --d-lo: #c3cad5;
  --b1: #8fd6ff; --b2: #b9a6ff; --b3: #ffd38a; --b-o: .5;
}
/* Soft-UI mit Hintergrund: Flächen leicht durchscheinend, damit der Hintergrund wirkt */
:root[data-design="soft"]:not([data-bg="none"]) {
  --panel: color-mix(in srgb, var(--bg) 82%, transparent);
  --d-blur: blur(14px);
}

/* ====================== Seite und Hintergrund ====================== */
:root[data-design] { background-color: var(--bg); }
:root[data-design] body { background-color: transparent; background-image: none; }
:root[data-design="glass"][data-bg="lights"] {
  background-image: linear-gradient(var(--d-grid) 1px, transparent 1px), linear-gradient(90deg, var(--d-grid) 1px, transparent 1px);
  background-size: 32px 32px; background-attachment: fixed;
}
:root[data-design]:not([data-bg="none"]) body::before,
:root[data-design]:not([data-bg="none"]) body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
/* Farblichter: weiche Lichtflecken, die langsam wandern */
:root[data-design][data-bg="lights"] body::before {
  inset: -15%; opacity: var(--b-o);
  background: radial-gradient(32% 32% at 18% 22%, var(--b1), transparent 70%), radial-gradient(28% 28% at 42% 92%, var(--b3), transparent 70%);
  animation: d-drift 26s ease-in-out infinite alternate;
}
:root[data-design][data-bg="lights"] body::after {
  inset: -15%; opacity: var(--b-o);
  background: radial-gradient(34% 34% at 86% 40%, var(--b2), transparent 70%);
  animation: d-drift 32s ease-in-out -9s infinite alternate-reverse;
}
@keyframes d-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5%, 6%) scale(1.06); } 100% { transform: translate(-4%, 2%) scale(.95); } }
/* Polarlicht: breite Farbbänder, die langsam schwingen */
:root[data-design][data-bg="aurora"] body::before,
:root[data-design][data-bg="aurora"] body::after { inset: -10% -20%; opacity: calc(var(--b-o) * 1.1); }
:root[data-design][data-bg="aurora"] body::before {
  background: linear-gradient(100deg, var(--b1), var(--b2) 50%, var(--b3));
  -webkit-mask: radial-gradient(60% 22% at 50% 24%, #000, transparent 72%); mask: radial-gradient(60% 22% at 50% 24%, #000, transparent 72%);
  animation: d-aurora 18s ease-in-out infinite alternate;
}
:root[data-design][data-bg="aurora"] body::after {
  background: linear-gradient(100deg, var(--b3), var(--b1) 50%, var(--b2));
  -webkit-mask: radial-gradient(55% 20% at 50% 82%, #000, transparent 72%); mask: radial-gradient(55% 20% at 50% 82%, #000, transparent 72%);
  opacity: calc(var(--b-o) * .8);
  animation: d-aurora 23s ease-in-out infinite alternate-reverse;
}
@keyframes d-aurora { 0% { transform: rotate(-7deg) translateX(-6%) scaleY(.85); } 100% { transform: rotate(5deg) translateX(7%) scaleY(1.2); } }
/* Delta-Band: leuchtendes Band in den Farben des Delta-Logos */
:root[data-design][data-bg="band"] body::before {
  inset: 30% -30% auto; height: 44vh;
  background: linear-gradient(90deg, #0087dc, #00a9c5, #6cbf4b, #00a9c5, #0087dc); background-size: 200% 100%;
  -webkit-mask: linear-gradient(transparent, #000 46%, #000 54%, transparent); mask: linear-gradient(transparent, #000 46%, #000 54%, transparent);
  opacity: .4; transform: rotate(-11deg);
  animation: d-band 16s linear infinite;
}
:root[data-design][data-bg="band"] body::after {
  inset: 52% -30% auto; height: 2px;
  background: linear-gradient(90deg, transparent, #00a9c5, #6cbf4b, transparent);
  opacity: .55; transform: rotate(-11deg);
}
@keyframes d-band { to { background-position: 200% 0; } }
/* Leiterbahnen: Platinen-Linien, über die Strom läuft */
:root[data-design][data-bg="circuit"] body::before {
  background-image: linear-gradient(100deg, color-mix(in srgb, var(--d-acc) 22%, transparent) 0 42%, var(--d-acc) 50%, color-mix(in srgb, var(--d-acc2) 22%, transparent) 58% 100%);
  background-size: 300% 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M0 40H70L100 70H170L200 40H260'/%3E%3Cpath d='M0 130H40L60 110H120L140 130H260'/%3E%3Cpath d='M0 210H90L120 180H190L220 210H260'/%3E%3Cpath d='M40 0V20L60 40'/%3E%3Cpath d='M150 70V110M190 180V130L210 110V0'/%3E%3Cpath d='M90 210V260M230 210V260'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='70' cy='40' r='4'/%3E%3Ccircle cx='170' cy='70' r='4'/%3E%3Ccircle cx='60' cy='110' r='4'/%3E%3Ccircle cx='140' cy='130' r='4'/%3E%3Ccircle cx='120' cy='180' r='4'/%3E%3Ccircle cx='190' cy='180' r='4'/%3E%3Ccircle cx='150' cy='110' r='3'/%3E%3Ccircle cx='210' cy='110' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M0 40H70L100 70H170L200 40H260'/%3E%3Cpath d='M0 130H40L60 110H120L140 130H260'/%3E%3Cpath d='M0 210H90L120 180H190L220 210H260'/%3E%3Cpath d='M40 0V20L60 40'/%3E%3Cpath d='M150 70V110M190 180V130L210 110V0'/%3E%3Cpath d='M90 210V260M230 210V260'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='70' cy='40' r='4'/%3E%3Ccircle cx='170' cy='70' r='4'/%3E%3Ccircle cx='60' cy='110' r='4'/%3E%3Ccircle cx='140' cy='130' r='4'/%3E%3Ccircle cx='120' cy='180' r='4'/%3E%3Ccircle cx='190' cy='180' r='4'/%3E%3Ccircle cx='150' cy='110' r='3'/%3E%3Ccircle cx='210' cy='110' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px repeat;
  opacity: .6;
  animation: d-current 7s linear infinite;
}
:root[data-design][data-bg="circuit"] body::after {
  background: radial-gradient(60% 50% at 80% 10%, color-mix(in srgb, var(--b1) 40%, transparent), transparent 70%);
  opacity: var(--b-o);
}
@keyframes d-current { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* Ruhiger Verlauf: nur ein sanfter Farbverlauf, ohne Bewegung */
:root[data-design][data-bg="calm"] body::before {
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--b1) 55%, transparent), transparent 60%),
    radial-gradient(100% 80% at 100% 100%, color-mix(in srgb, var(--b2) 50%, transparent), transparent 60%);
  opacity: calc(var(--b-o) * 1.2);
}
:root[data-design][data-bg="calm"] body::after { display: none; }

/* ====================== Flächen ====================== */
/* Große Flächen: Glas (Unschärfe) bzw. weich geformt */
:root[data-design] :is(.panel, .today, .sidenav, .sheet.as-page .sheet-body, .mc-view .mc-card, .set-card, .cov-card, .pr-card, .qr-card,
  .air-card, .fp-card, .scr-card, .mb-ov-card, .lk-card, .lg-card, .evr-kpi, .en-chart, .stv-card, .usr-form, .bk-panel, .net-stat, .lamp, .ticket, .dash-pr-item) {
  box-shadow: var(--d-sh);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
:root[data-design] :is(.panel, .today, .sidenav, .sheet.as-page .sheet-body, .mc-view .mc-card, .set-card, .cov-card, .pr-card, .lk-card, .lg-card, .en-chart, .bk-panel, .usr-form) {
  -webkit-backdrop-filter: var(--d-blur); backdrop-filter: var(--d-blur);
}
/* Fenster, Menüs und Vorschläge: fast deckend, damit nichts durchscheint */
:root[data-design] :is(.sheet:not(.as-page), .sn-fly, .menu, .fp-pop, .en-tip, .lg-menu, .lk-ac-list, .evr-sugg, .admin-tabs #tabs-list, .pwa-bar, .dash-arranging .dash-vis) {
  background-color: var(--panel-solid);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
}
:root[data-design] .sheet-foot { background: transparent; }
:root[data-design] .lk-table th { background: var(--panel-solid); }
:root[data-design] .topbar { background: color-mix(in srgb, var(--panel-solid) 70%, transparent); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
/* Anklickbare Kacheln heben sich beim Überfahren */
@media (hover: hover) {
  :root[data-design] :is(.ticket, .lamp, .dash-pr-item, .set-card, .qr-card, .scr-card, .lk-card):hover { transform: translateY(-3px); box-shadow: var(--d-sh-h); }
}
:root[data-design] .input, :root[data-design] .select, :root[data-design] .textarea { background-color: var(--d-field); }
:root[data-design] .btn { transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease; }
:root[data-design] .btn:not(:disabled):active { transform: translateY(1px) scale(.98); }

/* ---------- Glass Night ---------- */
:root[data-design="glass"] :is(.panel, .today, .sheet.as-page .sheet-body, .lamp, .ticket):hover { border-color: color-mix(in srgb, var(--d-acc) 55%, transparent); }
:root[data-design="glass"] .btn-primary { box-shadow: 0 0 18px -4px color-mix(in srgb, var(--signal) 80%, transparent); }
:root[data-design="glass"] .btn-primary:hover { box-shadow: 0 0 26px -2px color-mix(in srgb, var(--signal) 90%, transparent); }
:root[data-design="glass"] .input:focus, :root[data-design="glass"] .select:focus, :root[data-design="glass"] .textarea:focus {
  border-color: var(--d-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-acc) 22%, transparent), 0 0 18px -6px var(--d-acc);
}
/* Überschriften mit Farbverlauf */
:root[data-design="glass"] :is(.tk-head h1, .sheet.as-page .sheet-head h2) {
  background: linear-gradient(90deg, var(--text) 35%, var(--d-acc) 75%, var(--d-acc2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-transform: uppercase; letter-spacing: .03em;
}
/* Zahlen und Meldeleuchten glühen */
:root[data-design="glass"] .lamp.on .lamp-count { text-shadow: 0 0 16px color-mix(in srgb, var(--c) 70%, transparent); }
:root[data-design="glass"] .lamp.on .lamp-light { box-shadow: 0 0 14px var(--c), 0 0 4px var(--c); }
:root[data-design="glass"] .lamp[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--c), 0 0 22px -8px var(--c); }
/* Seitenmenü: leuchtende Pille für die offene Seite */
:root[data-design="glass"] .sidenav { border-right-color: var(--line); }
:root[data-design="glass"] .sn-it[aria-current="page"] { background: var(--d-nav); box-shadow: var(--d-nav-sh); }
:root[data-design="glass"] .sn-it[aria-current="page"]::before { display: none; }
:root[data-design="glass"] .sn-it[aria-current="page"] > svg:first-child { color: var(--d-acc); filter: drop-shadow(0 0 5px var(--d-acc)); }
:root[data-design="glass"] .sn-sec-t { color: color-mix(in srgb, var(--d-acc) 55%, var(--faint)); }
:root[data-design="glass"] .ticket:hover { box-shadow: var(--d-sh-h); }

/* ---------- Soft-UI ---------- */
:root[data-design="soft"] :is(.panel, .today, .sheet.as-page .sheet-body, .mc-view .mc-card, .set-card, .cov-card, .pr-card, .qr-card, .air-card,
  .fp-card, .scr-card, .mb-ov-card, .lk-card, .lg-card, .evr-kpi, .en-chart, .stv-card, .usr-form, .bk-panel, .net-stat, .lamp, .ticket, .dash-pr-item) {
  border-color: transparent;
}
:root[data-design="soft"] .sidenav { border-right-color: transparent; box-shadow: 6px 0 18px -10px var(--d-lo); }
:root[data-design="soft"] .sn-it[aria-current="page"] { background: transparent; box-shadow: var(--d-in); color: var(--d-acc); }
:root[data-design="soft"] .sn-it[aria-current="page"]::before { display: none; }
:root[data-design="soft"] .sn-it[aria-current="page"] > svg:first-child { color: var(--d-acc); }
:root[data-design="soft"] .sn-it:hover { background: transparent; box-shadow: 3px 3px 7px var(--d-lo), -3px -3px 7px var(--d-hi); }
:root[data-design="soft"] :is(.input, .select, .textarea) { border-color: transparent; box-shadow: var(--d-in); }
:root[data-design="soft"] :is(.input, .select, .textarea):focus { box-shadow: var(--d-in), 0 0 0 2px var(--d-acc); }
:root[data-design="soft"] .btn:not(.btn-ghost):not(.btn-primary) { border-color: transparent; background: var(--panel); box-shadow: 4px 4px 10px var(--d-lo), -4px -4px 10px var(--d-hi); }
:root[data-design="soft"] .btn-primary { border-color: transparent; box-shadow: 4px 4px 10px var(--d-lo), -4px -4px 10px var(--d-hi); }
:root[data-design="soft"] .btn:not(:disabled):active, :root[data-design="soft"] .lamp:active, :root[data-design="soft"] .ticket:active { box-shadow: var(--d-in); transform: none; }
:root[data-design="soft"] .lamp[aria-pressed="true"] { background: transparent; box-shadow: var(--d-in), inset 0 -3px 0 var(--c); }
:root[data-design="soft"] :is(.segments, .switch button, .chip, .list-tabs) { border-color: transparent; }
:root[data-design="soft"] .chip[aria-pressed="true"], :root[data-design="soft"] .switch button[aria-pressed="true"] { box-shadow: var(--d-in); }

/* ====================== Bewegung ====================== */
/* Seiten blenden beim Wechsel sanft ein (läuft, sobald eine Seite sichtbar wird) */
@keyframes d-in { from { opacity: .001; transform: translateY(12px); } to { opacity: 1; transform: none; } }
:root[data-design] #app > section.wrap:not([hidden]),
:root[data-design] .sheet.as-page:not([hidden]) { animation: d-in .5s cubic-bezier(.2, .8, .2, 1) backwards; }
:root[data-design] .dash-blocks > .dash-item { animation: d-in .55s cubic-bezier(.2, .8, .2, 1) backwards; }
:root[data-design] .dash-blocks > .dash-item:nth-child(2) { animation-delay: .06s; }
:root[data-design] .dash-blocks > .dash-item:nth-child(3) { animation-delay: .12s; }
:root[data-design] .dash-blocks > .dash-item:nth-child(4) { animation-delay: .18s; }
:root[data-design] .dash-blocks > .dash-item:nth-child(5) { animation-delay: .24s; }
:root[data-design] .dash-blocks > .dash-item:nth-child(n+6) { animation-delay: .3s; }
:root[data-design] .tickets > li { animation: d-in .45s cubic-bezier(.2, .8, .2, 1) backwards; }
:root[data-design] .tickets > li:nth-child(2) { animation-delay: .04s; }
:root[data-design] .tickets > li:nth-child(3) { animation-delay: .08s; }
:root[data-design] .tickets > li:nth-child(4) { animation-delay: .12s; }
:root[data-design] .tickets > li:nth-child(n+5) { animation-delay: .16s; }
:root[data-design] .login .panel, :root[data-design] .board > * { animation: d-in .6s cubic-bezier(.2, .8, .2, 1) backwards; }
:root[data-design] .board > *:nth-child(2) { animation-delay: .1s; }
/* Menüpunkte: Symbol wippt beim Überfahren */
:root[data-design] .sn-it > svg:first-child { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), color .2s; }
@media (hover: hover) { :root[data-design] .sn-it:hover > svg:first-child { transform: scale(1.12) rotate(-4deg); } }
:root[data-design] .sn-it { transition: background-color .2s, box-shadow .25s, color .2s; }

/* ====================== Meldeseite → Wallboxen: „Wie das Tool-Design“ ====================== */
/* Zeichnung wie „Linie“; ohne gewähltes Design (Standard) sieht es aus wie „Linie“ */
:root[data-design] .wbd .wbs-tool .wb-tile {
  background: var(--panel); border: 1px solid var(--line); border-top: calc(.6 * var(--wbu)) solid var(--wbc);
  border-radius: var(--r-l); box-shadow: var(--d-sh); -webkit-backdrop-filter: var(--d-blur); backdrop-filter: var(--d-blur);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease;
  animation: d-in .5s cubic-bezier(.2, .8, .2, 1) backwards;
}
@media (hover: hover) { :root[data-design] .wbd .wbs-tool .wb-tile:hover { transform: translateY(-3px); box-shadow: var(--d-sh-h); } }
:root[data-design="glass"] .wbd .wbs-tool .wb-tile { box-shadow: var(--d-sh), 0 0 22px -12px var(--wbc); }
:root[data-design="glass"] .wbd .wbs-tool .wl-led, :root[data-design="glass"] .wbd .wbs-tool .wb-led { filter: drop-shadow(0 0 4px var(--wbc)); }
:root[data-design="glass"] .wbd .wbs-tool .st-charging .wl-cable { filter: drop-shadow(0 0 4px var(--wbc)); }
:root[data-design="soft"] .wbd .wbs-tool .wb-tile { border-color: transparent; border-top: 0; position: relative; }
:root[data-design="soft"] .wbd .wbs-tool .wb-tile::before { content: ""; position: absolute; left: 14px; right: 14px; top: 6px; height: 4px; border-radius: 3px; background: var(--wbc); }
:root[data-design] .wbd .wbs-tool .wb-soc-bar { border-radius: 99px; overflow: hidden; }
:root[data-design] .wbd .wb-sums.wbs-tool .wb-sum { -webkit-backdrop-filter: var(--d-blur); backdrop-filter: var(--d-blur); box-shadow: var(--d-sh); }

/* ====================== Ruhe ====================== */
@media (prefers-reduced-motion: reduce) {
  :root[data-design] *, :root[data-design] *::before, :root[data-design] *::after { animation: none !important; transition-duration: .01ms !important; }
}
@media print {
  :root[data-design] { background: #fff !important; }
}