/* Gman 22:39 Startseite: Startkarten, Kennzahlen, Zeitleiste 3 Phasen, Handy-Wischreihen */
/* Startkarten im Hero */
.start-karten{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:620px}
.start-karte{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:84px;padding:14px 18px;border-radius:8px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.start-online{background:#A3421D;color:#fff}
.start-persoenlich{background:#F6F1E8;color:#122E4D}
.sk-kicker{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.sk-titel{font-size:18px;font-weight:700;line-height:1.25}
.start-karte:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.hero-aktionen{flex-direction:column;align-items:flex-start!important;gap:14px!important}
@media (max-width:767px){.start-karten{gap:8px;width:100%}.start-karte{min-height:72px;padding:10px 12px}.sk-kicker{font-size:11px}.sk-titel{font-size:15px}}
/* Kennzahlen */
.folge-kz{display:flex;flex-wrap:wrap;gap:8px 28px;margin:14px 0 4px}
.folge-kz div{display:flex;flex-direction:column-reverse}
.folge-kz dt{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin:0}
.folge-kz dd{margin:0;font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.folge-meta{font-size:14px!important;margin-top:6px!important;opacity:.85}
/* Zeitleiste */
.zl{position:relative;margin-top:40px;--fuell:0}
.zl-linie{position:absolute;background:#DDD2C0;border-radius:3px;overflow:hidden}
.zl-wasser{position:absolute;inset:0;background:linear-gradient(90deg,#4FB3C9,#1C7FA6);transform-origin:left center;transform:scaleX(var(--fuell))}
.zl-ph{margin:0}
.zl-kopf{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;color:#122E4D}
.zl-ph-nr{width:40px;height:40px;border-radius:50%;background:#122E4D;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.zl-ph-name{font-size:22px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.zl-ph-anz{font-size:14px;color:#55606E}
.zl-schritte{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.zl-schritt{position:relative;display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start;background:#fff;border-radius:8px;padding:10px;opacity:.55;transition:opacity .5s ease,box-shadow .5s ease}
.zl-schritt.an{opacity:1;box-shadow:0 0 0 2px #4FB3C9,0 8px 22px rgba(28,127,166,.18)}
.zl-nr{position:absolute;top:6px;left:6px;width:24px;height:24px;border-radius:50%;background:#122E4D;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:1}
.zl-schritt.an .zl-nr{background:#1C7FA6}
.zl-schritt img{width:96px;height:72px;object-fit:cover;border-radius:5px;display:block}
.zl-schritt h4{font-size:16px;margin:0 0 4px;color:#122E4D}
.zl-schritt p{font-size:14px;line-height:1.45;margin:0;color:#2B3642}
.zl-becken{position:relative;margin:28px auto 0;max-width:420px;height:72px;border:3px solid #122E4D;border-top:0;border-radius:0 0 12px 12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.zl-becken-wasser{position:absolute;left:0;right:0;bottom:0;height:calc(var(--becken,0) * 100%);background:linear-gradient(#4FB3C9,#1C7FA6);transition:height .4s ease}
.zl-becken-text{position:relative;font-weight:700;color:#122E4D;opacity:calc(var(--becken,0));transition:opacity .4s ease}
.zl-becken.voll .zl-becken-text{color:#fff}
@media (min-width:1000px){
.zl{display:grid;grid-template-columns:4fr 3fr 1.3fr;gap:24px;padding-top:28px}
.zl-linie{left:0;right:0;top:0;height:6px}
.zl-kopf{cursor:default}
.zl-pfeil{display:none}
.zl-schritte{grid-template-columns:repeat(var(--n,1),1fr)}
.zl-phase:nth-of-type(1) .zl-schritte{--n:2}.zl-phase:nth-of-type(2) .zl-schritte{--n:1}
.zl-schritt{grid-template-columns:1fr}
.zl-schritt img{width:100%;height:auto;aspect-ratio:4/3}
.zl-becken{grid-column:1/-1}
}
@media (max-width:999px){
.zl{padding-left:22px}
.zl-linie{left:0;top:0;bottom:0;width:6px}
.zl-wasser{background:linear-gradient(180deg,#4FB3C9,#1C7FA6);transform-origin:center top;transform:scaleY(var(--fuell))}
.zl-phase{border-bottom:1px solid #DDD2C0;padding:12px 0}
.zl-kopf{min-height:48px}
.zl-pfeil{margin-left:auto;width:12px;height:12px;border-right:2px solid #122E4D;border-bottom:2px solid #122E4D;transform:rotate(45deg);transition:transform .25s ease}
.zl-kopf[aria-expanded="true"] .zl-pfeil{transform:rotate(-135deg)}
.zl-kopf:focus-visible{outline:3px solid #F2C14E;outline-offset:3px}
}
/* Handy: Projekte als Wischreihe */
@media (max-width:767px){
.folge{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 24px 12px;scroll-padding:0 24px}
.folge-panel{position:relative!important;top:auto!important;flex:0 0 86%;height:auto!important;min-height:0!important;aspect-ratio:auto!important;scroll-snap-align:start;border-radius:10px;margin:0!important}
.folge-link{display:flex!important;flex-direction:column;height:auto!important}
.folge-bild{position:relative!important;inset:auto!important;height:230px!important}
.folge-bild img{width:100%;height:100%;object-fit:cover}
.folge-verlauf{display:none!important}
.folge-inhalt{position:relative!important;height:auto!important;padding:16px 16px 18px!important;justify-content:flex-start!important}
.folge-inhalt::before{display:none!important}
.folge-ort{font-size:28px!important;margin-top:6px!important}
.folge-text{font-size:15px!important}
.folge-kz dd{font-size:24px}
.folge-fortschritt{display:none!important}
}
@media (prefers-reduced-motion:reduce){.zl-wasser,.zl-schritt,.zl-becken-wasser,.zl-becken-text,.start-karte,.zl-pfeil{transition:none!important}.start-karte:hover{transform:none}}
.zl-pflicht{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;background:#A3421D;color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;vertical-align:middle}
.zl-schritte[hidden]{display:none!important}
@media (max-width:767px){.folge-inhalt>*{opacity:1!important;transform:none!important;filter:none!important}.folge-link .tl{margin-top:auto}}
@media (min-width:1000px){
.zl{display:block!important;padding-top:28px}
.zl-phase{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start;padding:22px 0;border-bottom:1px solid #DDD2C0}
.zl-schritte{margin:0!important;grid-template-columns:repeat(4,1fr)!important}
.zl-schritt img{height:120px!important;aspect-ratio:auto!important}
.zl-becken{width:100%;max-width:520px}
}
@media (min-width:1000px){.zl-schritt{align-content:start;grid-template-rows:auto 1fr}}
/* Grok Bot 23.10.2026 16:40, Gman: Projekte Handy wie Desktop als gestapelte Sticky-Folge (Mechanismus aus css/start.css .folge-panel) statt Wischreihe */
@media (max-width:767px){
.wisch-hinweis{display:none!important}
.folge{display:block!important;overflow:visible!important;padding:0!important;gap:0!important;scroll-snap-type:none!important}
.folge-panel{position:sticky!important;top:var(--menue-h)!important;height:calc(100svh - var(--menue-h))!important;flex:none!important;border-radius:0!important;margin:0!important;overflow:hidden}
.folge-link{display:block!important;height:100%!important}
.folge-bild{position:absolute!important;inset:0!important;height:100%!important}
.folge-verlauf{display:block!important}
.folge-inhalt{position:relative!important;height:100%!important;display:flex!important;flex-direction:column;justify-content:flex-end!important;padding:24px 24px 112px!important}
.folge-ort,.folge-text,.folge-nr,.folge-kz{color:var(--creme)}
.folge-link .tl{margin-top:16px}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.folge-panel{position:relative!important;top:auto!important;height:auto!important;aspect-ratio:4/5}}