@keyframes paket{0%, 8%{opacity: 0; transform: none} 12%{opacity: 1; transform: none} 30%{opacity: 1; transform: translateX(calc(100% - 8px))} 34%, 100%{opacity: 0; transform: translateX(calc(100% - 8px))}}
@keyframes wert-raus{0%, 30%{opacity: 1; transform: none} 34%, 94%{opacity: 0; transform: translateY(-5px)} 100%{opacity: 1; transform: none}}
@keyframes wert-rein{0%, 31%{opacity: 0; transform: translateY(5px)} 36%, 92%{opacity: 1; transform: none} 98%, 100%{opacity: 0}}
@keyframes log{0%, 32%{opacity: 0; transform: translateY(4px)} 38%, 92%{opacity: 1; transform: none} 98%, 100%{opacity: 0}}
@keyframes erledigt{0%, 30%{opacity: 0; transform: scale(0.6)} 36%, 94%{opacity: 1; transform: none} 100%{opacity: 0}}
@keyframes meldung{0%, 38%{opacity: 0; transform: translateY(12px)} 44%, 86%{opacity: 1; transform: none} 92%, 100%{opacity: 0; transform: translateY(12px)}}
.cb-ud-stil-software{.site:has(&) .ablauf{padding-top: 16px}
.site:has(&) .ablauf .lineal{margin-bottom: 8px}
.site:has(&) .ablauf .messband{right: 8%}
.site:has(&) .ablauf .marke-punkt{color: var(--akzent)}
.site:has(&) .sync{display: grid; grid-template-columns: minmax(0, 1fr) 16% minmax(0, 1fr); align-items: center; padding: 12px 12px 0}
.site:has(&) .sys{border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); overflow: hidden}
.site:has(&) .sys-kopf{padding: 6px 8px; border-bottom: 1px solid var(--linie); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.site:has(&) .sys li{display: flex; justify-content: space-between; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--linie); white-space: nowrap}
.site:has(&) .sys li:last-child{border-bottom: 0}
.site:has(&) .sys b{font: 400 0.95em var(--mono); font-variant-numeric: tabular-nums}
.site:has(&) .wert{display: grid; justify-items: end}
.site:has(&) .wert > b{grid-area: 1 / 1}
.site:has(&) .wert .nach{color: var(--ok); opacity: 0}
.site:has(&) .bahn{position: relative; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, var(--linie-stark) 0 4px, transparent 4px 8px)}
.site:has(&) .bahn i{position: absolute; inset: -3px 0; opacity: 0}
.site:has(&) .bahn i::before{content: ''; display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--akzent)}
.site:has(&) .sync-log{margin: 12px 12px 0; padding-top: 8px; border-top: 1px solid var(--linie); font: 0.92em/1.8 var(--mono); color: var(--leise)}
.site:has(&) .sync-log li{display: flex; gap: 10px; white-space: nowrap}
.site:has(&) .sync-log b{margin-left: auto; font-weight: 400; color: var(--ok)}
.site:has(&) .szene-sync .bahn i{animation: paket 6s var(--ease) infinite; animation-delay: calc(var(--i) * 0.6s)}
.site:has(&) .szene-sync .wert .vor{animation: wert-raus 6s var(--ease) infinite; animation-delay: calc(var(--i) * 0.6s)}
.site:has(&) .szene-sync .wert .nach{animation: wert-rein 6s var(--ease) infinite; animation-delay: calc(var(--i) * 0.6s)}
.site:has(&) .szene-sync .sync-log li{animation: log 6s var(--ease) infinite; animation-delay: calc(var(--i) * 0.6s)}




.site:has(&) .p-gruss{display: grid; padding: 12px 12px 10px; font-weight: 600; font-size: 1.15em}
.site:has(&) .p-gruss small{font-weight: 400; font-size: 0.8em; color: var(--leise)}
.site:has(&) .szene-portal .seiten{border-top: 1px solid var(--linie)}
.site:has(&) .szene-portal .frei{position: relative}
.site:has(&) .szene-portal .frei::before{content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--akzent) 7%, transparent); opacity: 0; animation: zeile 6s var(--ease) infinite}
.site:has(&) .szene-portal .vor{animation: raus 6s var(--ease) infinite}
.site:has(&) .szene-portal .nach{animation: rein 6s var(--ease) infinite}
.site:has(&) .szene-app{font-size: clamp(9.5px, 0.62vw + 5px, 13px); line-height: 1.3}
.site:has(&) .telefon{position: absolute; left: 12%; top: 9%; bottom: 0; width: min(50%, 250px); padding: 22px 12px 0; background: var(--papier); border: 1px solid var(--linie); border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: var(--schatten); overflow: hidden}
.site:has(&) .telefon::before{content: ''; position: absolute; left: 50%; top: 8px; width: 34%; height: 5px; translate: -50% 0; border-radius: 99px; background: var(--linie-stark)}
.site:has(&) .t-titel{display: grid; font: 600 1.3em/1.2 var(--display); letter-spacing: -0.02em; margin: 6px 2px 10px}
.site:has(&) .t-titel small{font: 400 0.62em var(--mono); color: var(--leise); letter-spacing: 0}
.site:has(&) .t-liste{display: grid; gap: 6px}
.site:has(&) .t-liste li{display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche)}
.site:has(&) .t-liste b{font: 400 0.9em var(--mono); color: var(--akzent)}
.site:has(&) .t-liste span{display: grid; min-width: 0; font-weight: 600; white-space: nowrap}
.site:has(&) .t-liste small{font-weight: 400; color: var(--leise); font-size: 0.85em}
.site:has(&) .t-liste .ic{margin-left: auto; width: 1.5em; height: 1.5em; padding: 0.28em; border-radius: 50%; color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); stroke-width: 3; opacity: 0}
.site:has(&) .t-meldung{position: absolute; left: 10px; right: 10px; bottom: 44px; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--tinte); color: var(--papier); font-weight: 600; white-space: nowrap; overflow: hidden; opacity: 0}
.site:has(&) .t-meldung .ic{color: var(--himmel); flex: none}
.site:has(&) .t-tabs{position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 12px 0 14px; border-top: 1px solid var(--linie); background: var(--flaeche)}
.site:has(&) .t-tabs i{width: 18px; height: 4px; border-radius: 99px; background: var(--linie-stark)}
.site:has(&) .t-tabs i.an{background: var(--akzent)}
.site:has(&) .app-ziele{position: absolute; right: 7%; top: 26%; display: grid; gap: 10px; font: 0.95em var(--mono); color: var(--tinte)}
.site:has(&) .app-ziele li{display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--linie); border-radius: 99px; background: var(--flaeche)}
.site:has(&) .app-ziele .ic{color: var(--ok)}
.site:has(&) .szene-app .t-fertig .ic{animation: erledigt 6s var(--ease) infinite}
.site:has(&) .szene-app .t-meldung{animation: meldung 6s var(--ease) infinite}
.site:has(&) .szene-app .app-ziele li{animation: pruef 6s var(--ease) infinite; animation-delay: calc(var(--i) * 0.35s)}


@media (max-width: 760px){.site:has(&) .telefon{left: 6%; width: 56%}
.site:has(&) .app-ziele{right: 5%}
}
:root[data-bewegung="aus"] .site:has(&) .szene-sync .bahn i,  :root[data-bewegung="aus"] .site:has(&) .szene-sync .wert > b,  :root[data-bewegung="aus"] .site:has(&) .szene-sync .sync-log li,  :root[data-bewegung="aus"] .site:has(&) .szene-portal .vor,  :root[data-bewegung="aus"] .site:has(&) .szene-portal .nach,  :root[data-bewegung="aus"] .site:has(&) .szene-portal .frei::before,  :root[data-bewegung="aus"] .site:has(&) .szene-app .t-fertig .ic,  :root[data-bewegung="aus"] .site:has(&) .szene-app .t-meldung{animation: none !important}
:root[data-bewegung="aus"] .site:has(&) .szene-sync .wert .vor,  :root[data-bewegung="aus"] .site:has(&) .szene-portal .vor{opacity: 0}
:root[data-bewegung="aus"] .site:has(&) .szene-sync .wert .nach,  :root[data-bewegung="aus"] .site:has(&) .szene-sync .sync-log li,  :root[data-bewegung="aus"] .site:has(&) .szene-portal .nach,  :root[data-bewegung="aus"] .site:has(&) .szene-app .t-fertig .ic{opacity: 1}
.site:has(&) .sys-kopf .kurz{display: none}
@media (max-width: 760px){.site:has(&) .sync{grid-template-columns: minmax(0, 1fr) 10% minmax(0, 1fr)}
.site:has(&) .sys-kopf .lang{display: none}
.site:has(&) .sys-kopf .kurz{display: inline}
}}