/* ==== Launch-Politur (Frodo, Entwurf) ==== */
.entwurf-banner{background:#fff7e0;border-bottom:1px solid #eeda9e;padding:8px 16px;font-size:12.5px;color:#7a5c10;text-align:center;font-family:var(--sans)}
/* Scroll-Reveal */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.12s}.js .rv-d2{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}
/* Hover-Politur */
.strang,.karte,.papier,.ergebnis-karte,.branche{transition:transform .3s ease,box-shadow .3s ease}
.strang:hover,.karte:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,40,50,.10)}
.knopf{transition:transform .2s ease,box-shadow .2s ease}
.knopf:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,90,100,.25)}
/* Use-Case-Rotation (nur Start) */
.uc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.uc-tab{border:1px solid var(--linie);background:var(--kasten);border-radius:999px;padding:5px 13px;font:600 13px var(--sans);color:var(--text-2);cursor:pointer;transition:all .25s}
.uc-tab[aria-selected="true"]{background:var(--akzent);border-color:var(--akzent);color:#fff}
.uc-pair{display:none}
.uc-pair.on{display:block;animation:ucfade .5s ease}
@keyframes ucfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.uc-pair.on{animation:none}}
.uc-dots{display:flex;gap:5px;margin-top:10px}
.uc-dots i{width:20px;height:4px;border-radius:2px;background:var(--linie);transition:background .3s}
.uc-dots i.on{background:var(--akzent)}
.arbeitsbild-fuss{font-size:12.5px;color:var(--text-2);margin-top:10px}
/* Branchen-Raster */
.branchen-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.branche{background:var(--kasten);border:1px solid var(--linie);border-radius:14px;padding:18px 20px}
.branche:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,40,50,.10)}
.branche h3{font-size:1.02rem;margin:0 0 .25rem}
.branche p{font-size:.88rem;color:var(--text-2);margin:0}
.ehrlich-kasten{background:color-mix(in srgb,var(--akzent) 9%,var(--kasten));border-left:4px solid var(--akzent);border-radius:0 10px 10px 0;padding:12px 16px;font-size:.9rem;margin-top:22px}
@media(max-width:860px){.branchen-raster{grid-template-columns:1fr}}
/* Rechtsseiten */
.recht{max-width:760px}
.recht h2{margin-top:2rem}
.platzhalter{background:#fff2f0;border:1px dashed #d99;border-radius:8px;padding:2px 8px;color:#a33;font-weight:600}

/* Vorgangs-Grid (adaptiert von flowphase "Use-Case-Grid") */
.vorgaenge{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.vorgang{background:var(--kasten);border:1px solid var(--linie);border-radius:12px;padding:14px 18px;display:flex;flex-direction:column;gap:4px;transition:transform .3s,box-shadow .3s}
.vorgang:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,40,50,.09)}
.vorgang .kopfzeile{display:flex;justify-content:space-between;align-items:center;gap:10px}
.vorgang h3{font-size:.98rem;margin:0}
.vorgang p{font-size:.86rem;color:var(--text-2);margin:0}
.tag{font:700 11px var(--sans);border-radius:999px;padding:3px 10px;white-space:nowrap}
.tag-schnell{background:color-mix(in srgb,var(--akzent) 14%,#fff);color:var(--akzent-tief)}
.tag-ausbau{background:var(--tint);color:var(--text-2)}
@media(max-width:760px){.vorgaenge{grid-template-columns:1fr}}
/* Detail-Cases (abwechselnd) */
.case{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin-top:40px}
.case .txt h3{font-size:1.25rem;margin:.4rem 0 .5rem}
.case .txt p{color:var(--text-2)}
.case-badges{display:flex;gap:8px;flex-wrap:wrap}
.b-ebene{background:color-mix(in srgb,var(--akzent) 13%,#fff);color:var(--akzent-tief);font:700 12px var(--sans);border-radius:999px;padding:3px 11px}
.b-reif{background:#f2efe2;color:#6b652f;font:700 12px var(--sans);border-radius:999px;padding:3px 11px}
.case-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.case-pill{font:600 12px var(--sans);border:1px solid var(--linie);background:var(--kasten);border-radius:999px;padding:3px 11px;color:var(--text-2)}
.minikarte{background:var(--kasten);border:1px solid var(--linie);border-radius:14px;padding:16px 20px;box-shadow:0 12px 32px rgba(20,40,50,.08)}
.minikarte .objekt-label{margin-bottom:.4rem}
.minikarte h4{font-size:1rem;margin:.1rem 0 .5rem}
.minizeile{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;padding:.32rem 0;border-bottom:1px dashed var(--linie);color:var(--text-2)}
.minizeile:last-child{border-bottom:none}
.minizeile strong{color:var(--text)}
.miniquelle{font-size:.8rem;color:var(--akzent-tief);font-weight:700;margin-top:.5rem}
@media(max-width:860px){.case{grid-template-columns:1fr}}


/* ==== Lebende Vorgangs-Strecke v2 (flowphase-Prinzip: Zustand wandert, nichts poppt) ==== */
.lauf-wrap{transition:opacity .3s ease}
.lauf-wrap.wechsel{opacity:0}
.lauf-karte{background:var(--kasten);border:1px solid var(--linie);border-radius:16px;padding:18px 22px 16px;box-shadow:0 16px 40px rgba(20,40,50,.10);height:440px;display:flex;flex-direction:column}
.lauf-kopf{display:flex;align-items:center;gap:8px;font:600 13px var(--sans);color:var(--text-2);margin-bottom:10px}
.lauf-kopf .puls{width:8px;height:8px;border-radius:50%;background:var(--akzent);animation:puls 1.6s ease-in-out infinite}
@keyframes puls{0%,100%{box-shadow:0 0 0 0 rgba(29,110,126,.35)}50%{box-shadow:0 0 0 6px rgba(29,110,126,0)}}
.schritte{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;position:relative;margin-left:6px}
.rail{position:absolute;left:7px;top:12px;bottom:12px;width:2px;background:var(--linie)}
.rail i{display:block;width:100%;height:0;background:var(--akzent);transition:height .5s ease}
.schritt{position:relative;padding-left:28px;opacity:.42;transition:opacity .4s ease}
.schritt.aktiv,.schritt.fertig{opacity:1}
.schritt::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--kasten);border:2px solid var(--linie);transition:border-color .3s,background .3s;z-index:1}
.schritt.aktiv::before{border-color:var(--akzent);animation:puls 1.2s ease-in-out infinite}
.schritt.fertig::before{background:var(--akzent);border-color:var(--akzent);animation:none}
.schritt .s-label{font:600 .93rem var(--sans);color:var(--text)}
.schritt .s-wert{position:relative;font-size:.84rem;color:var(--text-2);min-height:1.2em}
.s-wert .ghost{visibility:hidden}
.s-wert .tipp{position:absolute;left:0;top:0;right:0}
.schritt.aktiv .s-wert .tipp::after{content:"";display:inline-block;width:1px;height:.9em;background:var(--akzent);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lauf-fuss{display:flex;justify-content:flex-end;margin-top:8px;min-height:30px}
.freigabe{display:inline-flex;align-items:center;gap:6px;background:var(--akzent);color:#fff;border-radius:999px;padding:5px 14px;font:700 13px var(--sans);opacity:0;transform:scale(.92);transition:opacity .4s,transform .4s}
.freigabe.an{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.lauf-kopf .puls,.schritt.aktiv::before{animation:none}.schritt{opacity:1}.freigabe{opacity:1;transform:none}.s-wert .tipp::after{display:none!important}}
/* Hero-Titel: drei Zeilen, gestaffelt */
.hero-start .hero-inhalt h1{display:flex;flex-direction:column;gap:.05em;font-size:clamp(2.1rem,3.6vw,3.05rem);line-height:1.16;letter-spacing:-.01em}
.h1zeile{opacity:0;transform:translateY(14px);animation:h1rein .6s ease forwards}
.h1zeile:nth-child(2){animation-delay:.18s}
.h1zeile:nth-child(3){animation-delay:.36s}
@keyframes h1rein{to{opacity:1;transform:none}}
@media(min-width:861px){.h1zeile{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.h1zeile{opacity:1;transform:none;animation:none}}
.hero-start .inner{align-items:start}

/* Logo-Subline im Header */
.marken-link{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.marken-sub{font:700 9px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--akzent);white-space:nowrap}
@media(max-width:700px){.marken-sub{display:none}}

/* Hero: Box oben buendig mit Kicker */
.hero-start .inner{align-items:start}
.hero .arbeitsbild{margin-top:0;align-self:start}
.hero-inhalt .kicker{margin-top:0}
.arbeitsbild-kopf{margin-top:0;line-height:1.3}

.hero-start .inner{align-items:start}
.hero-start .arbeitsbild{padding-top:0}
.arbeitsbild-kopf{margin-left:0}

/* Branchen-Pills: 4er-Reihen */
.uc-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.uc-tab{text-align:center;padding:5px 8px;white-space:nowrap;font-size:12.5px}
@media(max-width:520px){.uc-tabs{grid-template-columns:repeat(2,1fr)}}
.uc-dots i{width:12px}

/* Schritt-Anatomie: Label oben, Wert darunter — einheitliche linke Kante */
.schritt{display:block!important}
.schritt .s-label{display:block!important;line-height:1.25}
.schritt .s-wert{display:block!important;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.s-wert .ghost{white-space:nowrap}

/* Freigeben-Chip: Luft statt Kanten-Clipping */
.lauf-karte{height:486px;padding-bottom:20px}
.lauf-fuss{margin-top:8px;min-height:32px;align-items:center}

/* Linke Hero-Spalte auf Boxhoehe strecken */
.hero-start .inner{align-items:stretch}
.hero-start .hero-inhalt{display:flex;flex-direction:column}
.hero-start .hero-inhalt .claim{margin-bottom:auto}
.hero-start .knopfreihe{margin-top:1.6rem}


/* Drei-Straenge-Band in der Hero-Luecke (eigenes SVG, laeuft hinter der Karte durch) */
.hero-start{position:relative;overflow:hidden}
.hero-start .hero-inhalt,.hero-start .arbeitsbild{position:relative;z-index:1}
.drei-linien{position:absolute;left:0;right:0;top:465px;height:150px;z-index:0;pointer-events:none;overflow:hidden}
.drei-linien svg{position:absolute;left:0;top:0;height:100%;width:200%}
.dl1{animation:dlauf 26s linear infinite}
.dl2{animation:dlauf 34s linear infinite reverse}
.dl3{animation:dlauf 44s linear infinite}
@keyframes dlauf{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@media(prefers-reduced-motion:reduce){.dl1,.dl2,.dl3{animation:none}}

@media(max-width:1100px){.drei-linien{display:none}}

/* Hero: Atempause vor dem Sektionswechsel */
.hero-start{padding-bottom:4.5rem}

/* ==== Hero-Eintritt: eine Komposition statt Einzel-Pops ==== */
@keyframes herein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hereinSanft{from{opacity:0}to{opacity:1}}
.hero-start .kicker,.hero-start .claim,.hero-start .knopfreihe,.hero-start .hero-fuss,.hero-start .arbeitsbild{opacity:0;animation:herein .7s cubic-bezier(.22,1,.36,1) both}
.h1zeile{opacity:0;transform:translateY(16px);animation:herein .8s cubic-bezier(.22,1,.36,1) both}
.hero-start .kicker{animation-delay:.05s}
.h1zeile:nth-child(1){animation-delay:.22s}
.h1zeile:nth-child(2){animation-delay:.42s}
.h1zeile:nth-child(3){animation-delay:.62s}
.hero-start .claim{animation-delay:.85s}
.hero-start .knopfreihe{animation-delay:1.0s}
.hero-start .hero-fuss{animation-delay:1.12s}
.hero-start .arbeitsbild{animation-delay:.5s;animation-duration:.9s}
.drei-linien{opacity:0;animation:hereinSanft 1.2s ease .95s both}
@media(prefers-reduced-motion:reduce){.hero-start .kicker,.h1zeile,.hero-start .claim,.hero-start .knopfreihe,.hero-start .hero-fuss,.hero-start .arbeitsbild,.drei-linien{opacity:1;transform:none;animation:none}}

/* Kicker als abgesetzte Marken-Pill */
.hero-start .kicker{color:var(--dunkel);font-weight:800}

/* Rechts-Satz als eigene, ruhige Zeile */
.hero-start .claim{margin-bottom:0}
.hero-start .claim-recht{margin-top:.7rem;margin-bottom:auto;font-weight:650;color:var(--dunkel)}
@media(min-width:861px){.hero-start .claim-recht{white-space:nowrap}}
.hero-start .claim-recht{animation-delay:.95s}
.hero-start .knopfreihe{animation-delay:1.08s}
.hero-start .hero-fuss{animation-delay:1.2s}

.hero-start .hero-inhalt .claim{margin-bottom:0}
.hero-start .hero-inhalt .claim-recht{margin-top:.8rem;margin-bottom:auto}

/* Header-CTA: sanfter Puls */
@keyframes ctapuls{0%,100%{box-shadow:0 0 0 0 rgba(29,110,126,.34)}55%{box-shadow:0 0 0 9px rgba(29,110,126,0)}}
.nav-cta{animation:ctapuls 2.6s ease-in-out infinite}
.nav-cta:hover{animation-play-state:paused}
/* Live-Punkt an der Anwendungsfall-Box: gruen + Puls */
.hero-start .arbeitsbild-kopf .punkt{background:#2ca06d}
@keyframes livepuls{0%,100%{box-shadow:0 0 0 0 rgba(44,160,109,.45)}55%{box-shadow:0 0 0 7px rgba(44,160,109,0)}}
.hero-start .arbeitsbild-kopf .punkt{animation:livepuls 1.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.nav-cta,.hero-start .arbeitsbild-kopf .punkt{animation:none}}

/* Hero-CTA pulsiert wie der Header-Button */
.hero-start .knopfreihe .knopf{animation:ctapuls 2.6s ease-in-out infinite .9s}
.hero-start .knopfreihe .knopf:hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-start .knopfreihe .knopf{animation:none}}

/* Linien v2: eigene Rhythmen + Atmen */
.dl1{animation:dlauf 30s linear infinite}
.dl2{animation:dlauf 38s linear infinite reverse}
.dl3{animation:dlauf 50s linear infinite}
.atme{transform-box:fill-box;transform-origin:50% 50%}
@keyframes atmen{from{transform:scaleY(.72)}to{transform:scaleY(1.22)}}
.a1{animation:atmen 7s ease-in-out infinite alternate}
.a2{animation:atmen 9.5s ease-in-out infinite alternate -3s}
.a3{animation:atmen 12s ease-in-out infinite alternate -6s}
@media(prefers-reduced-motion:reduce){.a1,.a2,.a3{animation:none}}

/* Branchen-Variante */
.uc-branchen{display:block;text-align:center;margin-top:12px}
.fw-anwendung .arbeitsbild{max-width:600px;margin:26px auto 0}