/* Wege-Karte (wege-karte.html, tools/seiten/34-wege.js, js/wege-karte.js) – Karte, Detailfeld, Wege-Auswahl, Timeline „Praxis-HAS – 3 Jahre und dann?“ */
.wk-sek{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 85% -10%,rgba(33,185,239,.22),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(216,189,120,.16),transparent 60%),#071019;color:#fff}
.wk-buehne{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1.4rem;align-items:start}
.wk-karte{position:relative;aspect-ratio:1200/660;border-radius:2rem;background:linear-gradient(150deg,#0a2f4c 0%,#081a2a 55%,#071019 100%);border:1px solid rgba(255,255,255,.1);box-shadow:0 2rem 5rem rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.03);overflow:hidden}
.wk-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.wk-svg-m{display:none}
.wk-k{fill:none;stroke:var(--f);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9;transition:opacity .35s,stroke-width .35s,filter .35s;animation:wk-zeichnen 1.3s cubic-bezier(.6,.05,.3,1) forwards;animation-delay:calc(var(--i) * 70ms + 150ms)}
.wk-k.gestr{stroke-width:3;stroke-dasharray:.012 .016;stroke-dashoffset:0;opacity:0;animation:wk-auf .8s ease forwards;animation-delay:calc(var(--i) * 70ms + 400ms)}
@keyframes wk-zeichnen{to{stroke-dashoffset:0}}
@keyframes wk-auf{to{opacity:.85}}
.wk-karte.fertig.hat-wahl .wk-k{opacity:.13}
.wk-karte.fertig.hat-wahl .wk-k.an{opacity:1;stroke-width:8;filter:drop-shadow(0 0 7px var(--f))}
.wk-karte.fertig.hat-wahl .wk-k.gestr.an{stroke-width:4}
.wk-laeufer circle{fill:#fff;filter:drop-shadow(0 0 6px #fff)}
.wk-karte.fertig .wk-k{animation:none;stroke-dashoffset:0}.wk-karte.fertig .wk-k.gestr{animation:none;opacity:.85}.wk-karte.fertig .wk-station{animation:none;opacity:1}
.wk-karte.fertig.hat-wahl .wk-k.gestr:not(.an){opacity:.13}
/* Stationen */
.wk-stationen{position:absolute;inset:0}
.wk-station{position:absolute;left:var(--dx);top:var(--dy);display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:0;border:0;background:none;color:#fff;transform:translate(-50%,-21px);cursor:pointer;opacity:0;animation:wk-pop .55s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(var(--i) * 60ms + 300ms);z-index:1}
@keyframes wk-pop{from{opacity:0;transform:translate(-50%,-21px) scale(.4)}to{opacity:1;transform:translate(-50%,-21px) scale(1)}}
.wk-punkt{position:relative;display:grid;place-items:center;width:42px;height:42px;border:3px solid var(--f);border-radius:50%;background:#071a2a;color:var(--f);font-size:1.05rem;box-shadow:0 .4rem 1.2rem rgba(0,0,0,.4);transition:transform .25s,background .25s,color .25s,box-shadow .25s}
.wk-a-schule .wk-punkt{width:50px;height:50px;font-size:1.3rem}
.wk-a-schule{transform:translate(-50%,-25px);animation-name:wk-pop-gross}
@keyframes wk-pop-gross{from{opacity:0;transform:translate(-50%,-25px) scale(.4)}to{opacity:1;transform:translate(-50%,-25px) scale(1)}}
.wk-a-start .wk-punkt:after{content:"";position:absolute;inset:-9px;border:2px solid rgba(255,255,255,.55);border-radius:50%;animation:wk-puls 2.2s ease-out infinite}
@keyframes wk-puls{from{transform:scale(.8);opacity:1}to{transform:scale(1.5);opacity:0}}
.wk-name{max-width:11rem;padding:.18rem .6rem;border-radius:50rem;background:rgba(5,14,22,.86);font-weight:750;font-size:.82rem;line-height:1.2;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.wk-dauer{margin-top:-.1rem;padding:.05rem .5rem;border-radius:50rem;background:var(--f);color:#071019;font-size:.7rem;font-weight:800}
.wk-station:hover .wk-punkt,.wk-station:focus-visible .wk-punkt{transform:scale(1.12);box-shadow:0 0 0 6px rgba(255,255,255,.14),0 .4rem 1.2rem rgba(0,0,0,.4)}
.wk-station:focus-visible{outline:none}
.wk-station:focus-visible .wk-name{outline:2px solid #fff;outline-offset:2px}
.wk-karte.fertig.hat-wahl .wk-station{opacity:.4}
.wk-karte.fertig.hat-wahl .wk-station.an{opacity:1}
.wk-station.an .wk-punkt{background:var(--f);color:#071019;box-shadow:0 0 0 7px rgba(255,255,255,.12),0 0 24px var(--f)}
.wk-station.gewaehlt .wk-name{background:#fff;color:#071019}
/* Detailfeld */
.wk-detail{position:sticky;top:110px;min-height:100%;padding:1.6rem;border-radius:1.6rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);outline:none}
.wk-detail.neu{animation:wk-rein .4s ease}
@keyframes wk-rein{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
.wk-nr{margin:0 0 .35rem;color:#f2d27a;font-size:.72rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.wk-d-titel{margin:0 0 .7rem;font:700 clamp(1.9rem,3vw,2.5rem)/1 "Barlow Condensed",sans-serif;color:#fff}
.wk-detail p{color:#d3e4ee;line-height:1.6}
.wk-fakten{display:grid;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.wk-fakten li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .9rem;border-radius:.9rem;background:rgba(255,255,255,.07)}
.wk-fakten b{color:#fff}.wk-fakten span{color:#b9cfdc;text-align:right}
.wk-badges{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0}
.wk-badge{padding:.85rem .9rem;border-radius:1rem;background:rgba(255,255,255,.08);border-top:3px solid var(--f,#fff)}
.wk-badge small{display:flex;gap:.35rem;align-items:center;color:#9fb8c7;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.wk-badge b{display:block;margin-top:.25rem;font:700 1.25rem/1.1 "Barlow Condensed",sans-serif;color:#fff}
.wk-schritte{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin:0 0 1rem;padding:0;list-style:none}
.wk-schritte li{display:flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:700;color:#e6f1f7}
.wk-schritte li+li:before{content:"→";color:var(--f,#f2d27a)}
.wk-schritte span{padding:.15rem .55rem;border-radius:50rem;background:rgba(255,255,255,.1)}
.wk-extra{display:flex;gap:.5rem;padding:.7rem .9rem;border-radius:.9rem;background:rgba(242,210,122,.12);color:#f7e6b5!important;font-size:.92rem}
.wk-berufe-kopf{margin:1.1rem 0 .5rem;color:#f2d27a;font-size:.72rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.wk-berufe{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.wk-berufe li{padding:.3rem .75rem;border:1px solid rgba(255,255,255,.25);border-radius:50rem;background:rgba(255,255,255,.06);font-size:.82rem;font-weight:650;opacity:0;animation:wk-rein .35s ease forwards;animation-delay:calc(var(--i) * 45ms)}
.wk-links{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:1.1rem}
.wk-links a{color:#7fd6ff;font-weight:750;text-decoration:none}.wk-links a:hover{color:#fff;text-decoration:underline}
/* Wege-Auswahl */
.wk-wege-titel{margin:2.4rem 0 1rem;font:700 clamp(1.8rem,3vw,2.4rem)/1 "Barlow Condensed",sans-serif;color:#fff}
.wk-wege{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:.7rem;margin:0;padding:0;list-style:none}
.wk-weg{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;min-height:4.4rem;padding:.8rem 1rem .8rem 1.35rem;border:1px solid rgba(255,255,255,.14);border-radius:1rem;background:rgba(255,255,255,.04);color:#fff;text-align:left;transition:background .2s,border-color .2s,transform .2s}
.wk-weg-strich{position:absolute;left:.55rem;top:.8rem;bottom:.8rem;width:4px;border-radius:4px;background:var(--f)}
.wk-weg b{font-weight:750;line-height:1.25}.wk-weg small{color:#a9c1cf}
.wk-weg:hover,.wk-weg:focus-visible{background:rgba(255,255,255,.1);transform:translateY(-2px);outline:none;border-color:rgba(255,255,255,.4)}
.wk-weg[aria-pressed="true"]{background:rgba(255,255,255,.14);border-color:var(--f);box-shadow:0 0 0 1px var(--f),0 .8rem 2rem rgba(0,0,0,.3)}
/* Timeline Praxis-HAS */
.hz-leiste{position:relative;margin:0;padding:0 0 0 3.4rem;list-style:none}
.hz-leiste:before{content:"";position:absolute;left:1.2rem;top:.5rem;bottom:4rem;width:4px;border-radius:4px;background:linear-gradient(#f0d891,#d8bd78 45%,#ffb86b 70%,#c6a4ff)}
.hz-jahr,.hz-meilenstein{position:relative;display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.1rem}
.hz-jahr>div,.hz-meilenstein>div{flex:1;padding:1rem 1.3rem;border-radius:1.2rem;background:#fff;border:1px solid var(--linie,#dce5eb)}
.hz-marke{position:absolute;left:-3.4rem;top:.7rem;display:grid;place-items:center;width:2.8rem;height:2.8rem;border:4px solid #edf5f9;border-radius:50%;background:#d8bd78;color:#241d0f;font:700 1.3rem/1 "Barlow Condensed",sans-serif}
.hz-marke.gross{background:#071019;color:#f2d27a;font-size:1.2rem}
.hz-nr{margin:0 0 .2rem;color:#8e7950;font-size:.72rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.hz-jahr h3,.hz-meilenstein h3{margin:0;font:700 1.7rem/1.05 "Barlow Condensed",sans-serif}
.hz-meilenstein>div{background:#071019;color:#fff;border-color:#071019}
.hz-meilenstein .hz-nr{color:#f2d27a}.hz-meilenstein p{margin:.4rem 0 0;color:#cfdde6}
.hz-kreuzung{position:relative;margin-left:-3.4rem;padding-top:2.2rem}
.hz-kreuzung:before{content:"";position:absolute;left:1.2rem;right:1.2rem;top:.6rem;height:4px;border-radius:4px;background:linear-gradient(90deg,#ffb86b,#ff8a7a,#c6a4ff,#f0d891,#ffffff)}
.hz-optionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1rem}
.hz-option{display:flex;flex-direction:column;padding:1.4rem;border-radius:1.4rem;background:#fff;border:1px solid var(--linie,#dce5eb);border-top:6px solid var(--f);box-shadow:0 .8rem 2rem rgba(11,55,79,.08);transition:transform .25s,box-shadow .25s}
.hz-option:hover{transform:translateY(-4px);box-shadow:0 1.4rem 3rem rgba(11,55,79,.16)}
.hz-ico{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:.8rem;border-radius:1rem;background:#071019;color:var(--f);font-size:1.4rem}
.hz-option h3{margin:0 0 .8rem;font:700 1.75rem/1.05 "Barlow Condensed",sans-serif}
.hz-daten{display:grid;gap:.55rem;margin:0 0 .9rem}
.hz-daten div{padding:.55rem .75rem;border-radius:.8rem;background:#f2f7fa}
.hz-daten dt{color:#5b6872;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hz-daten dd{margin:.1rem 0 0;font-weight:650;color:#13222d}
.hz-gut{margin:0 0 1rem;padding-left:1.1rem;line-height:1.55;color:#33424d}
.hz-gut li+li{margin-top:.35rem}
.hz-zeigen{align-self:flex-start;margin-top:auto;min-height:44px;padding:.5rem 1rem;border:0;border-radius:50rem;background:#071019;color:#fff;font-weight:750;transition:background .2s}
.hz-zeigen:hover,.hz-zeigen:focus-visible{background:#0a4e7e}
.hz-quelle{display:flex;gap:.5rem;margin:2rem 0 0;color:#5b6872;font-size:.88rem;line-height:1.6}
.hz-quelle a{color:#0a4e7e;font-weight:700}
/* Weiter entdecken */
.wk-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem}
.wk-kachel{display:flex;flex-direction:column;gap:.4rem;padding:1.5rem;border-radius:1.4rem;background:#edf5f9;color:#13222d;text-decoration:none;transition:transform .25s,background .25s}
.wk-kachel i{font-size:1.8rem;color:var(--industrial)}
.wk-kachel b{font:700 1.7rem/1.05 "Barlow Condensed",sans-serif}
.wk-kachel span{color:#5b6872}
.wk-kachel:hover,.wk-kachel:focus-visible{transform:translateY(-4px);background:#dff1fa;color:#071019}
/* Größen */
@media(max-width:1199.98px){.wk-buehne{grid-template-columns:1fr}.wk-detail{position:static;min-height:0}}
@media(max-width:991.98px){.wk-name{font-size:.72rem;padding:.12rem .45rem}.wk-dauer{display:none}.wk-punkt{width:34px;height:34px;font-size:.9rem}.wk-a-schule .wk-punkt{width:40px;height:40px;font-size:1.05rem}.wk-station{transform:translate(-50%,-17px)}.wk-a-schule{transform:translate(-50%,-20px)}
  @keyframes wk-pop{from{opacity:0;transform:translate(-50%,-17px) scale(.4)}to{opacity:1;transform:translate(-50%,-17px) scale(1)}}
  @keyframes wk-pop-gross{from{opacity:0;transform:translate(-50%,-20px) scale(.4)}to{opacity:1;transform:translate(-50%,-20px) scale(1)}}}
@media(max-width:767.98px){
  .wk-karte{aspect-ratio:360/960;border-radius:1.4rem}
  .wk-svg-d{display:none}.wk-svg-m{display:block}
  .wk-station{left:var(--mx);top:var(--my)}
  .wk-name{max-width:6.4rem;white-space:normal;text-align:center;font-size:.7rem}
  .wk-k{stroke-width:4}.wk-karte.fertig.hat-wahl .wk-k.an{stroke-width:6}
  .wk-detail{padding:1.2rem}
  .wk-badges{grid-template-columns:1fr}
  .hz-leiste{padding-left:2.8rem}.hz-leiste:before{left:.95rem}
  .hz-marke{left:-2.8rem;width:2.3rem;height:2.3rem;font-size:1.1rem}
  .hz-kreuzung{margin-left:-2.8rem}
  /* Alle Wege: zwei Spalten, höhere Kacheln mit Farbbalken oben */
  .wk-wege{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .wk-weg{min-height:7.4rem;padding:1.45rem .85rem .85rem;gap:.35rem;border-radius:1.1rem;background:linear-gradient(165deg,color-mix(in srgb,var(--f) 16%,transparent),rgba(255,255,255,.03) 65%)}
  .wk-weg-strich{left:.85rem;right:auto;top:.8rem;bottom:auto;width:1.8rem;height:4px}
  .wk-weg b{font-size:.92rem;line-height:1.2;hyphens:auto;overflow-wrap:break-word}
  .wk-weg small{margin-top:auto;font-size:.74rem;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){
  .wk-k,.wk-k.gestr,.wk-station,.wk-berufe li,.wk-detail.neu{animation:none;opacity:1}
  .wk-k{stroke-dashoffset:0}.wk-k.gestr{opacity:.85}
  .wk-karte.fertig.hat-wahl .wk-k{opacity:.13}.wk-karte.fertig.hat-wahl .wk-k.an{opacity:1}
  .wk-karte.fertig.hat-wahl .wk-station{opacity:.4}.wk-karte.fertig.hat-wahl .wk-station.an{opacity:1}
  .wk-a-start .wk-punkt:after{animation:none;opacity:0}
  .wk-weg,.hz-option,.wk-kachel,.wk-punkt{transition:none}
}
@media(scripting:none){.wk-k{stroke-dashoffset:0;animation:none}.wk-k.gestr{opacity:.85}.wk-station{opacity:1;animation:none}}