/* Sicherheits-Clip: Ein Firmenkonto wird deaktiviert, und der Zugang zu den Apps endet.
   Reines CSS, 11 Sekunden, läuft in Schleife. Er startet, sobald er im Bild ist, und beginnt
   beim Zurückscrollen von vorn. Innen ist alles in em gesetzt, deshalb gibt es keine eigene
   Handy-Fassung. Bei reduzierter Bewegung zeigt er nur das Schlussbild. */
.sa { --dur: 11s; --h: 23.4em; }
.sa { --ok: #0f6a47; --ok-soft: #dcf2e8; --off: #8a93b4; --off-soft: #e9ebf3; --win: 0 .05em .1em rgba(15, 27, 77, .08), 0 .4em 1.1em rgba(15, 27, 77, .1); --navy: #1b2858; --off-solid: #e9ebf3; container-type: inline-size; margin: 0; width: 100%; max-width: 30rem; min-width: 0; transition: opacity .35s ease-out; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sa { --ok: #6fd3a8; --ok-soft: rgba(111, 211, 168, .16); --off: #a9b6e0; --off-soft: rgba(169, 182, 224, .12); --navy: #2f4296; --off-solid: #1f2f73; }
}
:root[data-theme="dark"] .sa { --ok: #6fd3a8; --ok-soft: rgba(111, 211, 168, .16); --off: #a9b6e0; --off-soft: rgba(169, 182, 224, .12); --navy: #2f4296; --off-solid: #1f2f73; }
.sa.reveal { opacity: 0; }
.sa.reveal.in { opacity: 1; }
.sa.reveal:not(.in) * { animation: none !important; }
.sa-split { margin-top: 2.75rem; align-items: start; }
.sa-split .facts { margin-top: 0; }
.sa .sa-stage { position: relative; height: var(--h); font-size: 4cqw; overflow: hidden; background: var(--panel); border: .05em solid var(--line); border-radius: .8em; box-shadow: 0 1px 2px rgba(15, 27, 77, .06), 0 10px 28px rgba(15, 27, 77, .08); font-family: var(--text); color: var(--fg); line-height: 1.3; }
.sa .sa-body { position: absolute; inset: 0; }
.sa .sa-body, .sa .sa-body * { animation-duration: var(--dur); animation-iteration-count: infinite; animation-timing-function: linear; }
.sa .sa-body { animation-name: sa-loop; }
.sa .st { display: grid; justify-items: end; }
.sa .st > * { grid-area: 1 / 1; }
.sa .zp { display: inline-flex; align-items: center; gap: .3em; padding: .12em .6em; border-radius: 1em; font-style: normal; font-size: .7em; font-weight: 600; white-space: nowrap; }
.sa .zp svg { width: 1em; height: 1em; }
.sa .zp--on { background: var(--ok-soft); color: var(--ok); }
.sa .zp--off { background: var(--off-soft); color: var(--muted); }
.sa .acct { display: flex; align-items: center; gap: .6em; padding: .7em .8em; border-radius: .7em; background: var(--bg); box-shadow: var(--win); outline: .05em solid var(--line); }
.sa .av { display: grid; place-items: center; flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; background: #0e7490; color: #fff; font-style: normal; font-size: .8em; font-weight: 600; }
.sa .who { min-width: 0; flex: 1; display: grid; }
.sa .who b { font-size: .9em; font-weight: 600; }
.sa .who small { font-size: .7em; color: var(--muted); white-space: nowrap; }
.sa .sw { display: grid; justify-items: end; gap: .25em; flex: none; }
.sa .tg { position: relative; width: 2.1em; height: 1.2em; border-radius: 1em; background: #2747a8; }
.sa .tg i { position: absolute; left: .13em; top: .13em; width: .94em; height: .94em; border-radius: 50%; background: #fff; }
.sa .tg { background: var(--off); }
.sa .tgl { font-size: .7em; color: var(--muted); white-space: nowrap; }
.sa .nm { flex: 1; min-width: 0; font-size: .84em; font-weight: 500; white-space: nowrap; }
.sa .top3 { position: absolute; left: 1em; right: 1em; top: 1em; z-index: 6; }
.sa .w { position: absolute; width: 18.4em; height: 12em; display: grid; grid-template-rows: 1.9em minmax(0, 1fr); border-radius: .6em; overflow: hidden; background: var(--bg); box-shadow: var(--win); outline: .05em solid var(--line); }
.sa .w0 { left: 1em; top: 5.9em; }
.sa .w1 { left: 3.3em; top: 8.4em; }
.sa .w2 { left: 5.6em; top: 10.9em; }
.sa .wb { display: flex; align-items: center; gap: .24em; padding-inline: .6em; border-bottom: .05em solid var(--line); background: var(--panel); }
.sa .wb .nm { margin-left: .45em; font-size: .72em; font-weight: 600; }
.sa .d { width: .46em; height: .46em; border-radius: 50%; flex: none; background: var(--line); }
.sa .wc { position: relative; padding: .7em; min-height: 0; }
.sa .wg { height: 100%; }
.sa .m1 { display: flex; align-items: flex-end; gap: .35em; height: 100%; }
.sa .m1 i { flex: 1; border-radius: .2em .2em 0 0; background: linear-gradient(#5b7be0, #2747a8); }
.sa .m2 { display: grid; gap: .4em; }
.sa .m2 i { height: 1.2em; border-radius: .2em; background: var(--accent-soft); }
.sa .m3 { display: grid; grid-template-columns: repeat(7, 1fr); gap: .22em; }
.sa .m3 i { height: 1.42em; border-radius: .15em; background: var(--accent-soft); }
.sa .lk { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.sa .lk svg { width: 2em; height: 2em; }
.sa .k-trk { animation-name: sa-k-trk; animation-timing-function: ease-out; }
.sa .k-knob { animation-name: sa-k-knob; animation-timing-function: cubic-bezier(.3,.8,.3,1); }
.sa .k-l1 { opacity: 0; animation-name: sa-k-l1; animation-timing-function: step-end; }
.sa .k-l2 { animation-name: sa-k-l2; animation-timing-function: step-end; }
.sa .k-a0 { opacity: 0; animation-name: sa-k-a0; animation-timing-function: step-end; }
.sa .k-b0 { animation-name: sa-k-b0; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.sa .k-g0 { opacity: .22; filter: grayscale(1); animation-name: sa-k-g0; animation-timing-function: ease-out; }
.sa .k-k0 { animation-name: sa-k-k0; animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
.sa .k-a1 { opacity: 0; animation-name: sa-k-a1; animation-timing-function: step-end; }
.sa .k-b1 { animation-name: sa-k-b1; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.sa .k-g1 { opacity: .22; filter: grayscale(1); animation-name: sa-k-g1; animation-timing-function: ease-out; }
.sa .k-k1 { animation-name: sa-k-k1; animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
.sa .k-a2 { opacity: 0; animation-name: sa-k-a2; animation-timing-function: step-end; }
.sa .k-b2 { animation-name: sa-k-b2; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.sa .k-g2 { opacity: .22; filter: grayscale(1); animation-name: sa-k-g2; animation-timing-function: ease-out; }
.sa .k-k2 { animation-name: sa-k-k2; animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
@media (prefers-reduced-motion: reduce) {
  .sa .sa-body, .sa .sa-body * { animation: none !important; }
}
@keyframes sa-loop { 0% { opacity: 0; } 3.636%, 95.455% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sa-k-trk { 0% { background: #2747a8; } 15.455% { background: #2747a8; } 17.727% { background: var(--off); } 100% { background: var(--off); } }
@keyframes sa-k-knob { 0% { transform: translateX(.9em); } 14.909% { transform: translateX(.9em); } 17.455% { transform: none; } 100% { transform: none; } }
@keyframes sa-k-l1 { 0% { opacity: 0; } 0% { opacity: 1; } 16.545% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sa-k-l2 { 0% { opacity: 0; } 16.545% { opacity: 1; } 100% { opacity: 1; } }
@keyframes sa-k-a0 { 0% { opacity: 0; } 0% { opacity: 1; } 22.727% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sa-k-b0 { 0% { opacity: 0; } 22.727% { opacity: 0; } 24.545% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes sa-k-g0 { 0% { opacity: 1; filter: none; } 22.727% { opacity: 1; filter: none; } 25.909% { opacity: .22; filter: grayscale(1); } 100% { opacity: .22; filter: grayscale(1); } }
@keyframes sa-k-k0 { 0% { opacity: 0; transform: scale(.7); } 23.636% { opacity: 0; transform: scale(.7); } 26.818% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes sa-k-a1 { 0% { opacity: 0; } 0% { opacity: 1; } 27.273% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sa-k-b1 { 0% { opacity: 0; } 27.273% { opacity: 0; } 29.091% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes sa-k-g1 { 0% { opacity: 1; filter: none; } 27.273% { opacity: 1; filter: none; } 30.455% { opacity: .22; filter: grayscale(1); } 100% { opacity: .22; filter: grayscale(1); } }
@keyframes sa-k-k1 { 0% { opacity: 0; transform: scale(.7); } 28.182% { opacity: 0; transform: scale(.7); } 31.364% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes sa-k-a2 { 0% { opacity: 0; } 0% { opacity: 1; } 31.818% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sa-k-b2 { 0% { opacity: 0; } 31.818% { opacity: 0; } 33.636% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes sa-k-g2 { 0% { opacity: 1; filter: none; } 31.818% { opacity: 1; filter: none; } 35% { opacity: .22; filter: grayscale(1); } 100% { opacity: .22; filter: grayscale(1); } }
@keyframes sa-k-k2 { 0% { opacity: 0; transform: scale(.7); } 32.727% { opacity: 0; transform: scale(.7); } 35.909% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }