/* ============================================================
   Horizontaler Prozessfluss (wiederverwendbar: Ablauf, Karriere)
   - Stationen liegen auf einer Linie; Klick/Pfeiltasten wechseln
   - Passierte Stationen und ihre Verbindungen sind GRÜN, noch nicht
     erreichte bleiben GRAU. Die Verbindung zur nächsten Station pulsiert
     und deutet so auf den nächsten Meilenstein.
   - Ohne JS: alle Infotexte untereinander sichtbar.
   ============================================================ */
.flow-track,.flow-nav{display:none}
.js .flow-track{display:flex}
.js .flow-nav{display:flex}
.flow-track{position:relative;overflow-x:auto;scroll-snap-type:x proximity;padding:10px 4px 22px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.flow-node{flex:1 0 128px;min-width:128px;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;padding:0 6px;font-family:inherit;color:var(--ink);scroll-snap-align:center}
.flow-node::before{content:"";position:absolute;top:22px;right:50%;width:100%;height:4px;border-radius:4px;background:#dde4ec;z-index:0;transition:background .4s}
.flow-node:first-child::before{display:none}
/* Standard = noch nicht erreicht -> grau */
.flow-node .n{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:#f1f4f8;border:2px solid #d3dce6;color:#8a99ab;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .4s,border-color .4s,color .4s,transform .3s,box-shadow .3s}
.flow-node .n .i{width:16px;height:16px}
.flow-node .l{font-size:13px;font-weight:600;text-align:center;line-height:1.3;max-width:132px;transition:color .4s;color:var(--ink-4)}
.flow-node:hover .n{border-color:var(--brand-2);color:var(--brand);box-shadow:0 0 0 5px var(--brand-soft)}
/* Station wurde passiert -> grün */
.flow-node.past .n{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:none}
.flow-node.past .l{color:var(--ink-2)}
.flow-node.past::before{background:var(--brand-2)}
.flow-node.past:hover .n{background:#08865a;border-color:#08865a;color:#fff;box-shadow:0 0 0 5px var(--brand-soft)}
/* aktuelle Station: grün, größer, mit Halo */
.flow-node.active .n{background:var(--brand);border-color:var(--brand);color:#fff;transform:scale(1.14);box-shadow:0 0 0 6px var(--brand-soft)}
.flow-node.active .l{color:var(--ink)}
.flow-node.active::before{background:var(--brand-2)}
/* Weg zum nächsten Meilenstein: pulsiert */
.flow-node.active + .flow-node::before{background:linear-gradient(90deg,var(--brand-2),#b9efd9);animation:flowPulse 1.7s ease-in-out infinite}
.flow-node.active + .flow-node .n{border-color:var(--brand-2);color:var(--brand);background:#fff;animation:flowNext 1.7s ease-in-out infinite}
@keyframes flowPulse{0%,100%{opacity:.35;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1.35)}}
@keyframes flowNext{0%,100%{box-shadow:0 0 0 0 rgba(13,209,140,0)}50%{box-shadow:0 0 0 6px rgba(13,209,140,.25)}}
@media(prefers-reduced-motion:reduce){.flow-node.active + .flow-node::before,.flow-node.active + .flow-node .n{animation:none}.flow-node.active + .flow-node::before{opacity:1}}

.flow-panels{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden}
.flow-panel{padding:32px;display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start}
.js .flow-panel{display:none}
.js .flow-panel.active{display:grid;animation:flowIn .35s ease}
@keyframes flowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.flow-panel .step-kicker{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--brand);margin-bottom:6px;display:block}
.flow-panel h3{font-size:26px;margin-bottom:12px}
.flow-aside{background:var(--brand-soft);border-radius:var(--radius);padding:22px}
.flow-aside h4{font-size:15px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.flow-aside ul{margin:0;padding-left:1.1em;font-size:14px;color:var(--ink-2)}
.flow-aside li{margin-bottom:6px}
.flow-aside figure{margin:-22px -22px 16px}
.flow-aside figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.flow-nav{align-items:center;justify-content:space-between;margin-top:18px;gap:12px}
.flow-count{font-size:13px;color:var(--ink-2);font-weight:600}
.flow-nav .btn[disabled]{opacity:.45}
@media(max-width:800px){.flow-panel{grid-template-columns:1fr;padding:22px;gap:20px}.flow-panel h3{font-size:22px}.flow-node{flex-basis:110px;min-width:110px}}