/* ===== v23: Design "Modern" (neues Design-System). Greift nur bei html[data-style="glass"][data-design="modern"].
   Klassisch und Glas bleiben unverändert. Nacht-Werte stehen in @media (prefers-color-scheme: dark),
   damit auch der Hell/Dunkel-Umschalter sie mitsteuert. Akzent: html[data-accent] = blue | orange | pink. ===== */
@media screen {
html[data-style="glass"][data-design="modern"] { --m-accent: #0297DE; --m-accent-soft: #4FC3FF; --m-accent-deep: #0A5F96; --m-on-accent: #02070A; --m-ui: var(--m-accent-deep); --m-ink: var(--m-accent-deep); }
@media (prefers-color-scheme: dark) { html[data-style="glass"][data-design="modern"] { --m-ui: var(--m-accent); --m-ink: var(--m-accent-soft); } }
html[data-style="glass"][data-design="modern"][data-accent="orange"] { --m-accent: #FC734D; --m-accent-soft: #FF9272; --m-accent-deep: #B03A14; }
html[data-style="glass"][data-design="modern"][data-accent="pink"] { --m-accent: #FD91CC; --m-accent-soft: #FFB3D9; --m-accent-deep: #A3206F; }
html[data-style="glass"][data-design="modern"] { --bg: #F5F8FC; --g-deckend-1: #FFFFFF; --g-deckend-2: #F5F8FC; --g-deckend-3: #F5F8FC; --g-flaeche-1: rgba(255, 255, 255, 0.64); --g-flaeche-2: rgba(255, 255, 255, 0.84); --g-flaeche-3: rgba(255, 255, 255, 0.93); --g-blur-1: blur(20px) saturate(150%); --g-blur-2: blur(28px) saturate(160%); --g-blur-3: blur(32px) saturate(160%); --g-spur: #E3EAF3; --g-zelle: #FFFFFF; --g-farbfeld: radial-gradient(40% 35% at 20% 12%, color-mix(in srgb, var(--m-accent) 42%, transparent), transparent 70%), radial-gradient(35% 30% at 85% 62%, color-mix(in srgb, var(--m-accent) 26%, transparent), transparent 70%), linear-gradient(180deg, #C1E8FF 0%, #F5F8FC 100%); --text: #02070A; --text2: #4A5C73; --text3: #566A82; --trenner: rgba(2, 16, 36, 0.14); --fuell: rgba(2, 7, 10, 0.09); --fuell2: rgba(2, 7, 10, 0.14); --akzent: var(--m-ui); --akzent-weich: color-mix(in srgb, var(--m-ui) 14%, transparent); --akzent-voll: var(--m-accent); --g-tint-akzent: color-mix(in srgb, var(--m-ui) 12%, transparent); --rot: #C62828; --gruen: #1B7F4B; --orange-text: #8A5A00; }
@media (prefers-color-scheme: dark) { html[data-style="glass"][data-design="modern"] { --bg: #021024; --g-deckend-1: #0B1830; --g-deckend-2: #0B1830; --g-deckend-3: #0B1830; --g-flaeche-1: rgba(11, 24, 48, 0.62); --g-flaeche-2: rgba(11, 24, 48, 0.84); --g-flaeche-3: rgba(11, 24, 48, 0.93); --g-spur: #16294A; --g-zelle: #12233F; --g-farbfeld: radial-gradient(40% 35% at 20% 12%, color-mix(in srgb, var(--m-accent) 46%, transparent), transparent 70%), radial-gradient(35% 30% at 85% 62%, color-mix(in srgb, var(--m-accent) 28%, transparent), transparent 70%), linear-gradient(180deg, #021024 0%, #052659 100%); --text: #F2F6FA; --text2: #9DB4CF; --text3: #8FA6C2; --trenner: rgba(193, 232, 255, 0.16); --fuell: rgba(242, 246, 250, 0.09); --fuell2: rgba(242, 246, 250, 0.15); --rot: #FF6B6B; --gruen: #3DDC97; --orange-text: #FFC857; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html[data-style="glass"][data-design="modern"] { --g-flaeche-1: var(--g-deckend-1); --g-flaeche-2: var(--g-deckend-2); --g-flaeche-3: var(--g-deckend-3); --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; }
}
@media (prefers-reduced-transparency: reduce) { html[data-style="glass"][data-design="modern"] { --g-flaeche-1: var(--g-deckend-1); --g-flaeche-2: var(--g-deckend-2); --g-flaeche-3: var(--g-deckend-3); --g-blur-1: none; --g-blur-2: none; --g-blur-3: none; }
}
html[data-style="glass"][data-design="modern"] :is(.knopf-primaer, .ck-knopf-primaer, .chip.an, .be-chip.an, .sh-phase.aktiv, .senden:not(:disabled), .fab) { color: var(--m-on-accent); }
html[data-style="glass"][data-design="modern"] .fab { box-shadow: inset 1px 1px 0 rgba(255,255,255,0.45), 0 8px 22px color-mix(in srgb, var(--m-accent) 40%, transparent); }
}
.stil-gruppe .reihe { flex-wrap: wrap; align-items: center; row-gap: 8px; }
.stil-block { display: grid; gap: 8px; flex: 1 1 250px; max-width: 100%; }
.stil-schalter, .stil-block .stil-akzent { min-width: 0; width: 100%; }
.stil-block [hidden] { display: none; }