/* DIS – gemeinsame Renderer-Styles (Player + Editor) */
.sv { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.ss { position: absolute; left: 0; top: 0; overflow: hidden; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: #0f172a; }
.sbg-ov, .sbg-fx { position: absolute; inset: 0; pointer-events: none; }
.se { position: absolute; box-sizing: border-box; }
.se-a, .se-l, .se-c { width: 100%; height: 100%; box-sizing: border-box; }
.se-c { position: relative; overflow: hidden; }
.se[data-type="shape"] .se-c, .se[data-type="emoji"] .se-c, .se[data-type="clock"] .se-c { overflow: visible; }
.se-hidden { opacity: .25 !important; outline: 2px dashed rgba(255,255,255,.4); }
.tx { width: 100%; height: 100%; display: flex; flex-direction: column; white-space: pre-wrap; word-break: break-word; }
.tx.center { align-items: stretch; }
.ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 16px, rgba(255,255,255,.1) 16px 32px); color: rgba(255,255,255,.6); font-size: 28px; border: 2px dashed rgba(255,255,255,.3); box-sizing: border-box; }
.se img, .se video { width: 100%; height: 100%; display: block; user-select: none; }
.se iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.emoji { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.cd { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cd-l { opacity: .75; } .cd-v { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Kolli-Kacheln */
.kov { width: 100%; height: 100%; display: grid; }
.kov-t { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 6% 4%; box-sizing: border-box; min-width: 0; transition: box-shadow .3s; }
.kov-l { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; line-height: 1.15; }
.kov-v { font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; margin: .12em 0; white-space: nowrap; }
.kov-s { line-height: 1.2; min-height: 1.2em; }
.kov-t.stale { box-shadow: inset 0 0 0 4px rgba(251,191,36,.55); }
.km { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.km-v { font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; }
.km-l { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* Bereichstabelle */
.kt { width: 100%; height: 100%; display: flex; flex-direction: column; }
.kt-r { display: grid; align-items: center; gap: .6em; padding: .32em .6em; border-radius: .3em; }
.kt-r.z { background: rgba(255,255,255,.05); }
.kt-h { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding-bottom: .5em; }
.kt-b { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; min-height: 0; }
.kt-f { border-top: 2px solid rgba(255,255,255,.3); border-top-style: solid; font-weight: 800; margin-top: .2em; }
.kt-c, .kt-n { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-n { font-weight: 700; display: flex; align-items: center; gap: .45em; }
.kt-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; flex: none; }
.kt-bar { position: relative; height: 1.15em; background: rgba(255,255,255,.14); border-radius: .6em; overflow: hidden; }
.kt-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: .6em; transition: width .8s ease; }
.kt-bar span { position: relative; display: block; text-align: center; font-size: .72em; line-height: 1.6em; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.kt-chip { display: inline-block; padding: .08em .6em; border-radius: 1em; color: #0b1220; font-weight: 700; font-size: .75em; }
.kt-empty { opacity: .6; text-align: center; }

/* Fortschritt */
.kp { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.kp-h { display: flex; justify-content: space-between; font-weight: 600; }
.kp-bar { position: relative; overflow: hidden; }
.kp-bar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .8s ease; }
.kp-t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kp-b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Nachrichten */
.nl { width: 100%; height: 100%; display: flex; flex-direction: column; }
.nl-g { flex: 1; display: flex; flex-direction: column; gap: .5em; min-height: 0; }
.ni { border-radius: .45em; padding: .55em .8em; box-sizing: border-box; flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.ni.urgent { box-shadow: 0 0 0 3px rgba(248,113,113,.9) inset; animation: sig-urg 2s ease-in-out infinite; }
@keyframes sig-urg { 50% { box-shadow: 0 0 0 3px rgba(248,113,113,.35) inset; } }
.ni-top { display: flex; align-items: center; gap: .5em; min-width: 0; }
.ni-chip { flex: none; font-size: .6em; font-weight: 700; padding: .2em .65em; border-radius: 1em; color: #fff; text-transform: uppercase; letter-spacing: .05em; }
.ni-t { font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ni-b { font-size: .8em; line-height: 1.3; margin-top: .25em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ni-m { font-size: .6em; opacity: .6; margin-top: .3em; }
.ni-ic { font-size: 1.1em; flex: none; } .ni-pin { flex: none; font-size: .8em; }
.nl-dots { display: flex; justify-content: center; gap: .4em; padding-top: .4em; }
.nl-dots i { width: .35em; height: .35em; border-radius: 50%; background: currentColor; opacity: .3; } .nl-dots i.on { opacity: 1; }
.nl-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; opacity: .7; height: 100%; font-size: 1em; }
.nc { width: 100%; height: 100%; }
.nc-card { width: 100%; height: 100%; display: flex; gap: 1em; padding: 1em 1.2em; box-sizing: border-box; border-radius: .5em; overflow: hidden; }
.nc-img { width: 42%; height: 100%; object-fit: cover; border-radius: .35em; flex: none; }
.nc-tx { flex: 1; display: flex; flex-direction: column; gap: .4em; min-width: 0; justify-content: center; }
.nc-tx .ni-chip { align-self: flex-start; }
.nc-t { font-weight: 800; font-size: 1.25em; line-height: 1.15; }
.nc-b { line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }
.nc-n { font-size: .6em; opacity: .55; margin-top: auto; }

/* Ticker */
.tk { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; white-space: nowrap; }
.tk-t { display: flex; will-change: transform; }
.tk-s { display: flex; align-items: center; flex: none; }
.tk-tag { font-size: .62em; font-weight: 700; padding: .2em .6em; border-radius: .3em; margin-right: .5em; text-transform: uppercase; color: #fff; }
.tk-x { font-weight: 600; } .tk-sep { opacity: .45; margin: 0 1.2em; font-size: .7em; }
@keyframes sig-tk { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tk-w))); } }

/* Tabellen / Diagramme */
.tb { width: 100%; height: 100%; overflow: hidden; }
.tb table { width: 100%; border-collapse: collapse; }
.tb th, .tb td { padding: .35em .6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb th { font-size: .75em; text-transform: uppercase; letter-spacing: .05em; }
.tb td { border-bottom: 1px solid rgba(255,255,255,.08); font-variant-numeric: tabular-nums; }
.ch { width: 100%; height: 100%; display: flex; flex-direction: column; }
.ch-t { font-weight: 700; margin-bottom: .4em; } .ch-b { flex: 1; min-height: 0; }
.ch svg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* Hintergrund-Effekte */
.fx-shimmer { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%); background-size: 300% 100%; animation: fx-sh 9s linear infinite; }
@keyframes fx-sh { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.fx-aurora { background: radial-gradient(ellipse at 20% 30%, rgba(56,189,248,.25), transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(168,85,247,.22), transparent 50%); animation: fx-au 18s ease-in-out infinite alternate; }
@keyframes fx-au { to { transform: scale(1.25) rotate(8deg); } }
.fx-grid { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 60px 60px; animation: fx-gr 20s linear infinite; }
@keyframes fx-gr { to { background-position: 60px 60px; } }
.fx-pulse { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 60%); animation: fx-pu 6s ease-in-out infinite; }
@keyframes fx-pu { 50% { opacity: .2; transform: scale(1.2); } }
.fx-stripes { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 40px, transparent 40px 80px); background-size: 113px 113px; animation: fx-st 6s linear infinite; }
@keyframes fx-st { to { background-position: 113px 0; } }
.fx-vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55)); }