@keyframes st-pin{0%, 12%{opacity: 0; transform: scale(0.4)} 18%, 94%{opacity: 1; transform: none} 100%{opacity: 0}}
@keyframes st-notiz{0%, 20%{opacity: 0; transform: translateY(6px)} 27%, 94%{opacity: 1; transform: none} 100%{opacity: 0}}
@keyframes st-neu{0%, 40%{opacity: 0; transform: translateY(-6px)} 47%, 94%{opacity: 1; transform: none} 100%{opacity: 0}}
@keyframes st-vor{0%, 58%{opacity: 1; transform: none} 63%, 96%{opacity: 0; transform: translateY(-5px)} 100%{opacity: 1}}
@keyframes st-nach{0%, 60%{opacity: 0; transform: translateY(5px)} 65%, 94%{opacity: 1; transform: none} 100%{opacity: 0}}
@keyframes sp-zeile{0%, 20%{opacity: 0} 30%, 80%{opacity: 1} 90%, 100%{opacity: 0}}
@keyframes sp-code{0%, 62%{opacity: 0; transform: translateX(-6px)} 68%, 94%{opacity: 1; transform: none} 100%{opacity: 0}}
.cb-ud-stil-plattform{.site:has(&) .seitenkopf .szene.gross{margin-top: clamp(40px, 5vw, 64px); height: clamp(290px, 32vw, 440px)}
.site:has(&) .szene.gross .fenster{font-size: clamp(9.5px, 0.42vw + 6.6px, 14px)}
.site:has(&) .szene.gross .l-bild{height: 7.5em}
.site:has(&) .geraete{margin-left: auto; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--linie); border-radius: 7px; font: 0.85em var(--mono); color: var(--leise)}
.site:has(&) .geraete span{padding: 2px 6px; border-radius: 5px}
.site:has(&) .geraete .an{background: var(--papier); color: var(--tinte)}
.site:has(&) .geraete + .status-chip{margin-left: 8px}
.site:has(&) .l-drei{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px}
.site:has(&) .l-drei span{padding: 0.6em 0.5em; border-radius: 6px; background: var(--flaeche-2); border: 1px solid var(--linie); font-weight: 600; text-align: center}
.site:has(&) .studio{display: grid; grid-template-columns: 24% minmax(0, 1fr); height: 100%}
.site:has(&) .st-nav{padding: 10px 8px; border-right: 1px solid var(--linie); background: var(--flaeche); display: grid; align-content: start; gap: 2px}
.site:has(&) .st-nav li{display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 5px 8px; border-radius: 6px; color: var(--leise)}
.site:has(&) .st-nav .an{background: var(--papier); color: var(--tinte); font-weight: 600}
.site:has(&) .st-nav b{min-width: 1.5em; padding: 0 5px; border-radius: 99px; background: var(--akzent); color: var(--akzent-text); font-size: 0.85em; text-align: center}
.site:has(&) .st-haupt{padding: 12px 14px; display: grid; align-content: start; gap: 10px; min-width: 0}
.site:has(&) .st-seite{display: grid; gap: 8px}
.site:has(&) .st-kopf{display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 650}
.site:has(&) .st-kopf .chip{margin-left: 0}
.site:has(&) .st-vor{color: var(--ok); opacity: 0}
.site:has(&) .st-nach{color: var(--fehler)}
.site:has(&) .st-block{position: relative; display: grid; gap: 2px; padding: 9px 11px; border: 1.5px dashed var(--akzent); border-radius: 8px; background: var(--flaeche)}
.site:has(&) .st-block span{color: var(--leise)}
.site:has(&) .st-pin{position: absolute; top: -0.7em; right: 10px; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; background: var(--akzent); color: var(--akzent-text); font: 600 0.85em/1 var(--text); font-style: normal}
.site:has(&) .st-notiz{justify-self: end; max-width: 80%; padding: 7px 10px; border-radius: 10px 10px 2px 10px; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten)}
.site:has(&) .st-notiz b{display: block; color: var(--leise); font-weight: 400; font-size: 0.85em}
.site:has(&) .st-liste{border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); overflow: hidden}
.site:has(&) .st-liste li:last-child{border-bottom: 0}
.site:has(&) .szene-studio .st-pin{animation: st-pin 8s var(--ease) infinite}
.site:has(&) .szene-studio .st-notiz{animation: st-notiz 8s var(--ease) infinite}
.site:has(&) .szene-studio .st-neu, .site:has(&) .szene-studio .st-zahl{animation: st-neu 8s var(--ease) infinite}
.site:has(&) .szene-studio .st-vor{animation: st-vor 8s var(--ease) infinite}
.site:has(&) .szene-studio .st-nach{animation: st-nach 8s var(--ease) infinite}





.site:has(&) .zaehlwerk .messwert-zahl .einheit{font-size: 0.3em}
.site:has(&) .anteile{position: relative; display: flex; margin-top: 20px; padding-bottom: 12px}
.site:has(&) .anteile::after{content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: repeating-linear-gradient(90deg, var(--linie-stark) 0 1px, transparent 1px calc(100% / 45)) 0 0 / calc(100% + 1px) 100%}
.site:has(&) .anteile span{flex: var(--w) 1 0; min-width: 3.6rem; display: grid; gap: 8px; padding-bottom: 12px; font: 0.75rem/1.2 var(--mono); color: var(--leise); white-space: nowrap}
.site:has(&) .anteile span::before{content: ''; height: 10px; border-radius: 3px; background: var(--akzent); box-shadow: inset -2px 0 0 var(--flaeche); transform-origin: 0 50%; transition: transform 1.2s var(--ease); transition-delay: calc(0.3s + var(--i) * 0.25s)}
.site:has(&) .anteile span:first-child::before{opacity: 0.45}
.site:has(&) .anteile span:last-child::before{opacity: 0.7}
.site:has(&) .anteile b{display: block; font: 600 1rem/1.1 var(--display); color: var(--tinte)}
:root.js .site:has(&) .zaehlwerk:not(.da) .anteile span::before{transform: scaleX(0)}
.site:has(&) .sp-tabelle{padding: 8px 12px}
.site:has(&) .sp-zeile{position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 8px; border-bottom: 1px solid var(--linie)}
.site:has(&) .sp-zeile .chip{margin-left: 0; justify-self: start}
.site:has(&) .sp-kopf{font: 0.85em var(--mono); color: var(--leise)}
.site:has(&) .sp-aktiv::before{content: ''; position: absolute; inset: 0; border-radius: 6px; background: color-mix(in srgb, var(--akzent) 8%, transparent)}
.site:has(&) .sp-aktiv > span{position: relative}
.site:has(&) .sp-vor{opacity: 0}
.site:has(&) .sp-nach{color: var(--ok)}
.site:has(&) .sp-code{position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 14px; border-top: 1px solid var(--linie); background: var(--flaeche); font-size: 0.85em}
.site:has(&) .szene-sprachen .sp-aktiv::before{animation: sp-zeile 7s var(--ease) infinite}
.site:has(&) .szene-sprachen .sp-vor{animation: st-vor 7s var(--ease) infinite}
.site:has(&) .szene-sprachen .sp-nach{animation: st-nach 7s var(--ease) infinite}
.site:has(&) .szene-sprachen .sp-code b{display: inline-block; animation: sp-code 7s var(--ease) infinite}


.site:has(&) .module{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie)}
.site:has(&) .module li{display: grid; align-content: start; gap: 10px; padding: 24px 24px 32px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie)}
.site:has(&) .module li > p:last-child{color: var(--leise)}
.site:has(&) .modul-kopf{display: flex; align-items: center; justify-content: space-between; color: var(--leise); margin-bottom: 8px}
.site:has(&) .modul-schalter{position: relative; width: 40px; height: 24px; border-radius: 99px; background: var(--linie-stark); overflow: hidden}
.site:has(&) .modul-schalter::before{content: ''; position: absolute; inset: 0; background: var(--akzent)}
.site:has(&) .modul-schalter::after{content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--flaeche); box-shadow: 0 1px 2px color-mix(in srgb, var(--tinte) 30%, transparent); transform: translateX(16px)}
.site:has(&) .modul-schalter::before, .site:has(&) .modul-schalter::after{transition: transform 0.5s var(--feder), opacity 0.3s; transition-delay: calc(0.35s + var(--i, 0) * 0.12s)}
:root.js .site:has(&) .module li:not(.da) .modul-schalter::before{opacity: 0}
:root.js .site:has(&) .module li:not(.da) .modul-schalter::after{transform: none}
.site:has(&) .addon-uni{display: flex; align-items: center; gap: 20px; margin-top: 12px}
.site:has(&) .addon-uni .klein{max-width: 22em}
@media (max-width: 1080px){.site:has(&) .module{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 760px){.site:has(&) .module{grid-template-columns: minmax(0, 1fr)}
.site:has(&) .module li{padding: 20px 18px 24px}
.site:has(&) .studio{grid-template-columns: minmax(0, 1fr)}
.site:has(&) .st-nav{display: none}
.site:has(&) .sp-code, .site:has(&) .geraete{display: none}
.site:has(&) .addon-uni{gap: 12px}
}
:root[data-bewegung="aus"] .site:has(&) .szene-studio *,  :root[data-bewegung="aus"] .site:has(&) .szene-sprachen *{animation: none !important}
:root[data-bewegung="aus"] .site:has(&) .szene-sprachen .sp-aktiv::before{animation: none !important}}