/* ==========================================================================
   Animierte Erklärgrafiken (Szenen) – gemeinsame Regeln
   Das SVG skaliert mit der Spalte; Schrift kommt aus der Seite (inline SVG).
   ========================================================================== */
.szene { position: relative; width: 100%; }
.szene svg { width: 100%; height: auto; overflow: visible; font-family: var(--schrift); }
.szene svg text { user-select: none; }

/* leichtes Schweben der Karten – auf einer inneren Gruppe, damit GSAP-Bewegungen nicht stören */
.schwebt, .schwebt2 { animation: sz-schweben 5.6s ease-in-out infinite; }
.schwebt2 { animation-duration: 6.4s; animation-delay: -2.2s; }
@keyframes sz-schweben { 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
    .schwebt, .schwebt2 { animation: none; }
}

/* Branchen-Szenen: Akzentfarbe kommt aus --m-akzent (am umgebenden Element gesetzt) */
.szene-branche { --m-akzent: var(--akzent, #6B47FF); }
.szene-branche .ak, .szene .ak { fill: var(--m-akzent, #6B47FF); }
.szene-branche .ak-hell, .szene .ak-hell { fill: color-mix(in srgb, var(--m-akzent, #6B47FF) 16%, #fff); }
.szene-branche .ak-s, .szene .ak-s { stroke: var(--m-akzent, #6B47FF); }