.animations-karte { max-width: 1000px; margin-inline: auto; overflow: hidden; border: 1px solid #dce5ef; border-radius: 1.15rem; background: #fff; box-shadow: 0 12px 34px rgba(31,54,91,.07); }
.animations-karte[data-breites-diagramm] { max-width: 1400px; }
.animations-kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid #e5ebf2; color: #17243b; }
.animations-kopf strong { font-size: .92rem; }
.animations-steuerung { display: flex; gap: .5rem; }
.animations-steuerung button { min-height: 2.4rem; padding: .4rem .7rem; border: 1px solid #b8d8d8; border-radius: .65rem; background: #eff9f8; color: #12696e; font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer; }
.animations-steuerung button:hover { background: #dff3f1; }
.animations-steuerung button:disabled { opacity: .5; cursor: default; }
.animations-steuerung button:focus-visible { outline: 3px solid #e8aa56; outline-offset: 2px; }
.animations-einleitung { max-width: 72ch; margin: 0; padding: 1rem 1rem .2rem; color: #4b5d75; font-size: .92rem; line-height: 1.55; }
.animations-beispiel { max-width: 78ch; margin: .7rem 1rem .25rem; padding: .65rem .8rem; border-left: 3px solid #e6a241; border-radius: .35rem; background: #fff9ee; color: #40536b; font-size: .82rem; line-height: 1.5; }
.animations-beispiel strong { display: block; margin-bottom: .12rem; color: #9a651d; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.animations-buehne { padding: clamp(.35rem, 1.2vw, .9rem); overflow-x: auto; }
.animations-scroll-hinweis { display: none; margin: 0; padding: .15rem 1rem .65rem; color: #52647c; font-size: .82rem; }
.animations-svg { display: block; width: auto; height: auto; min-width: 0; max-width: 100%; margin-inline: auto; }
.animations-svg:not(.animations-vorlage) [data-animations-pfad] { stroke: #a7b8ca; }
.animations-svg:not(.animations-vorlage) [data-animations-pfad].animation-aktiv { stroke: #13a1a6; }
.animations-svg:not(.animations-vorlage) [data-animations-pfad].antwort.animation-aktiv { stroke: #e09a37; }
.animations-svg:not(.animations-vorlage) [data-animations-pfad].gesperrt.animation-aktiv { stroke: #d65e49; }
.animations-svg:not(.animations-vorlage) rect[stroke] { filter: drop-shadow(0 4px 8px rgba(38,70,102,.08)); }
.animations-paket { opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(38,70,102,.2)); }
.animations-paket rect { fill: #15979d; }
.animations-paket.antwort rect { fill: #df9228; }
.animations-vorlage .verbindung { fill: none; stroke: #b6c4d4; stroke-width: 3; stroke-linecap: round; }
.animations-vorlage .nebengleis { stroke-dasharray: 7 8; }
.animations-vorlage .fluss { fill: none; stroke: #13a1a6; stroke-width: 5; stroke-linecap: round; opacity: .12; transition: opacity .24s ease; }
.animations-vorlage .fluss.antwort { stroke: #e09a37; }
.animations-vorlage .fluss.animation-aktiv { opacity: 1; }
.animations-vorlage .knoten { filter: drop-shadow(0 6px 12px rgba(38,70,102,.08)); }
.animations-vorlage .knoten rect { stroke-width: 2.4; }
.animations-vorlage .portal rect { fill: #eff4f9; stroke: #9fb1c5; }
.animations-vorlage .broker rect { fill: #e0f6f4; stroke: #16848a; }
.animations-vorlage .tarif rect { fill: #e7efff; stroke: #5a7fd1; }
.animations-vorlage .inaktiv rect { fill: #f6f8fc; stroke: #b8c5d5; }
.animations-vorlage .knoten .name { fill: #17243b; font-size: 23px; font-weight: 800; }
.animations-vorlage .knoten .zusatz { fill: #52647c; font-size: 14px; }
.animations-vorlage .pfadtext { fill: #61718a; font-size: 14px; font-weight: 700; }
.animations-vorlage .pfadtext.aktiv { fill: #128388; }
.animations-vorlage .paket { opacity: 0; }
.animations-vorlage .paket rect { fill: #15979d; }
.animations-vorlage .paket.antwortpaket rect { fill: #df9228; }
.animations-vorlage .paket text { fill: #fff; font-size: 16px; font-weight: 800; }
.animations-vorlage .hinweis { fill: #7990a6; font-size: 13px; }
.animations-fortschritt { height: 4px; background: #e8eff5; }
.animations-fortschritt span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#15979d,#e6a241); transform: scaleX(0); transform-origin: left; }
.animations-schritte { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin: 0; padding: 1rem; list-style: none; counter-reset: none; }
.animations-karte[data-animation-id="broker-pattern"] .animations-schritte { grid-template-columns: repeat(4,minmax(0,1fr)); }
.animations-schritt { min-width: 0; padding: .7rem .8rem; border: 1px solid #e0e8f0; border-radius: .75rem; background: #f9fbfd; line-height: 1.4; transition: background .25s ease, border-color .25s ease; }
.animations-schritt.aktiv { border-color: #52b8b9; background: #e2f7f4; }
.animations-schritt.aktiv.antwortschritt { border-color: #e7af59; background: #fff2db; }
.animations-schritt .animations-nummer { display: block; margin-bottom: .2rem; color: #147f82; font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.animations-schritt strong { display: block; color: #17243b; font-size: .85rem; overflow-wrap: anywhere; }
.animations-schritt > span:last-child { display: block; margin-top: .2rem; color: #4b5d75; font-size: .82rem; overflow-wrap: anywhere; }
.animations-hinweis { margin: 0; padding: 0 1rem 1rem; color: #61738a; font-size: .78rem; line-height: 1.45; }
@media (max-width: 760px) { .animations-schritte, .animations-karte[data-animation-id="broker-pattern"] .animations-schritte { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .animations-svg { width: max(100%, 620px); max-width: none; } }
@media (max-width: 700px) { .animations-scroll-hinweis { display: block; } }
@media (max-width: 700px) { .animations-karte[data-breites-diagramm] .animations-svg { width: 1000px; max-width: none; } }
@media (max-width: 480px) { .animations-schritte, .animations-karte[data-animation-id="broker-pattern"] .animations-schritte { grid-template-columns: 1fr; } .animations-steuerung { width: 100%; } .animations-steuerung button { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .animations-svg [data-animations-pfad], .animations-vorlage .fluss { transition: none; } .animations-paket, .animations-vorlage .paket { display: none; } }
.animations-marke { transition: opacity .25s ease; }
.animations-marke.marke-aktiv circle { fill: #13a1a6; stroke: #13a1a6; }
.animations-marke.marke-aktiv text:first-of-type { fill: #fff; }
.animations-marke.marke-aktiv text:nth-of-type(2) { fill: #0f6f73; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .animations-marke { transition: none; } }
.animations-marke.antwort.marke-aktiv circle { fill: #df9228; stroke: #df9228; }
.animations-marke.antwort.marke-aktiv text:nth-of-type(2) { fill: #9a5f14; }
.animations-marke.abgewiesen.marke-aktiv circle { fill: #c65a48; stroke: #c65a48; }
.animations-marke.abgewiesen.marke-aktiv text:nth-of-type(2) { fill: #a4412f; }