@keyframes fg-marke{0%, 3%{opacity: 0} 8%, 56%{opacity: 1} 62%, 100%{opacity: 0}}
@keyframes fg-notiz{0%, 3%{opacity: 0; transform: translateY(8px) scale(0.97)} 10%, 96%{opacity: 1; transform: none} 100%{opacity: 0}}
@keyframes fg-raus{0%, 56%{opacity: 1; transform: none} 62%, 96%{opacity: 0; transform: translateY(-6px)} 100%{opacity: 1; transform: none}}
@keyframes fg-rein{0%, 58%{opacity: 0; transform: translateY(6px)} 64%, 94%{opacity: 1; transform: none} 100%{opacity: 0}}
.cb-ud-stil-agenturen{.site:has(&) .ag-nach-szene{margin-top: var(--a7)}
.site:has(&) .spalten > .inhalt-spalte .szene{height: clamp(260px, 26vw, 360px)}
.site:has(&) .ag-werte{display: flex; flex-wrap: wrap; gap: 12px}
.site:has(&) .ag-werte .messwert.kompakt{box-shadow: none}
.site:has(&) .fg{position: relative; display: grid; align-content: start; gap: 8px; height: 100%; padding: 14px 16px}
.site:has(&) .fg-block{position: relative; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche)}
.site:has(&) .fg-block p{display: flex; justify-content: space-between; gap: 12px; color: var(--leise)}
.site:has(&) .fg-block p span:last-child{color: var(--tinte); font-weight: 600}
.site:has(&) .fg-marke{position: absolute; inset: -4px; border: 1.5px dashed var(--akzent); border-radius: 10px; opacity: 0}
.site:has(&) .fg-notiz{justify-self: end; display: grid; gap: 2px; width: min(62%, 17em); margin-top: 2px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px 10px 10px 3px; background: var(--flaeche); box-shadow: var(--schatten); opacity: 0}
.site:has(&) .fg-notiz b{color: var(--akzent); font-size: 0.9em}
.site:has(&) .fg-notiz small{color: var(--leise); font: 0.8em var(--mono)}
.site:has(&) .fg-leiste{position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--linie); background: var(--flaeche); color: var(--leise); font-size: 0.9em}
.site:has(&) .szene-freigabe .fg-marke{animation: fg-marke 8s var(--ease) infinite}
.site:has(&) .szene-freigabe .fg-notiz{animation: fg-notiz 8s var(--ease) infinite}
.site:has(&) .szene-freigabe .vor{animation: fg-raus 8s var(--ease) infinite}
.site:has(&) .szene-freigabe .nach{animation: fg-rein 8s var(--ease) infinite}




.site:has(&) .felder{padding: 10px 12px; border-right: 1px solid var(--linie); display: grid; align-content: start; gap: 6px}
.site:has(&) .felder li{display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche)}
.site:has(&) .felder li span{color: var(--leise); font: 0.85em var(--mono)}
.site:has(&) .felder .fg-vorschau{margin-top: 6px; display: grid; border-style: dashed; background: transparent}
@media (max-width: 760px){.site:has(&) .felder{display: none}
.site:has(&) .fg-notiz{width: 78%}
}
:root[data-bewegung="aus"] .site:has(&) .szene-freigabe .fg-notiz{animation: none !important; opacity: 1}}