:root{--grund:#080b12;--flaeche:#101623;--linie:#1d2739;--schrift:#e6ecf5;--leise:#8e9cb3;--akzent:#38bdf8;--signal:#f59e0b;--gut:#34d399;
--f-titel:Outfit, Segoe UI, system-ui, sans-serif;--f-text:Outfit, Segoe UI, system-ui, sans-serif;--f-zahl:JetBrains Mono, Consolas, monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--schrift);font-family:var(--f-text);line-height:1.65;font-size:17px}
a{color:var(--akzent)}
a:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.huelle{max-width:1040px;margin:0 auto;padding:0 20px}
header.kopf{background:var(--flaeche);border-bottom:1px solid var(--linie)}
header.kopf .huelle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;padding-bottom:14px}
.marke{font-family:var(--f-titel);font-size:22px;font-weight:700;color:var(--schrift);text-decoration:none;letter-spacing:.01em}
.marke span{color:var(--akzent)}
nav.haupt ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
nav.haupt a{color:var(--leise);text-decoration:none;font-size:15px}
nav.haupt a:hover,nav.haupt a[aria-current=page]{color:var(--schrift)}
nav.haupt a[aria-current=page]{border-bottom:2px solid var(--akzent)}
main{padding:28px 0 40px}
h1{font-family:var(--f-titel);font-size:32px;line-height:1.25;margin:0 0 12px}
h2{font-family:var(--f-titel);font-size:22px;margin:32px 0 10px}
h3{font-family:var(--f-titel);font-size:18px;margin:22px 0 8px}
p{margin:0 0 12px}
.leise{color:var(--leise)}
.gross{font-size:19px}
.band{border-left:3px solid var(--signal);padding:8px 14px;margin:16px 0;background:var(--flaeche);border-radius:0 8px 8px 0}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:14px 0}
.kachel{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:16px}
.angebot{margin:28px 0}.angebot .raster{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.angebot .kachel{display:flex;flex-direction:column}.angebot .kachel p:last-child{margin-top:auto}.angebot .preis strong{font-size:1.5em;color:var(--akzent)}
details.frage{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:10px 14px;margin:8px 0}
details.frage summary{cursor:pointer;font-weight:600}
details.frage p{margin:8px 0 2px}
ol.schritte li{margin:6px 0}
.kachel h3{margin:0 0 6px}
.kachel p{font-size:15px;margin:0 0 8px}
.kachel ul{margin:6px 0 0;padding-left:18px;font-size:15px}
.etikett{display:inline-block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--leise);border:1px solid var(--linie);border-radius:999px;padding:1px 9px;margin-bottom:6px}
.etikett.offen{color:var(--gut);border-color:var(--gut)}
table{width:100%;border-collapse:collapse;font-size:15px;margin:10px 0}
th,td{text-align:left;padding:8px 9px;border-bottom:1px solid var(--linie);vertical-align:top}
th{color:var(--leise);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.tabellenhuelle{overflow-x:auto}
figure{margin:18px 0}
figure img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--linie)}
code{font-family:var(--f-zahl);font-size:.9em;background:var(--flaeche);padding:1px 4px;border-radius:4px}
pre{overflow-x:auto;background:var(--flaeche);padding:12px;border-radius:8px}
.text{max-width:820px}
.text table{font-size:14.5px;display:block;overflow-x:auto;max-width:100%}
.text code{overflow-wrap:anywhere}
.text img{max-width:100%}
dl.angaben{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:12px 0}
dl.angaben dt{color:var(--leise)}
dl.angaben dd{margin:0}
footer.fuss{background:var(--flaeche);border-top:1px solid var(--linie);color:var(--leise);font-size:14px;padding:22px 0 36px}
footer.fuss p{margin:0 0 8px}
footer.fuss strong{color:var(--schrift)}
footer.fuss ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px}
.sprung{position:absolute;left:-9999px;top:0;background:var(--akzent);color:var(--grund);padding:8px 14px;z-index:10}
.sprung:focus{left:12px;top:12px}
.testband{background:var(--flaeche);border-bottom:1px solid var(--signal);font-size:14px;padding:8px 0}
.testband strong{font-weight:600;color:var(--schrift)}
.formular label{display:block;margin:12px 0 4px;color:var(--leise);font-size:15px}
.formular select,.formular textarea,.formular input[type=text],.formular input[type=email]{width:100%;max-width:640px;background:var(--grund);color:var(--schrift);border:1px solid var(--linie);border-radius:6px;padding:8px;font:inherit}
.formular textarea{min-height:150px}
.formular .reihe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.knopf{display:inline-block;background:var(--akzent);color:var(--grund);border:0;border-radius:7px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.knopf.leise{background:transparent;color:var(--schrift);border:1px solid var(--linie);font-weight:400}
.knopf:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.ok{color:var(--gut);font-weight:600}.nein{color:var(--signal);font-weight:600}
[hidden]{display:none!important}
.held{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;margin-bottom:8px}
.held h1{font-size:40px;line-height:1.12;letter-spacing:-.01em}
.held svg{width:100%;height:auto;display:block}
.bahn{fill:none;stroke:var(--linie);stroke-width:14;stroke-linecap:round}
.spur{fill:none;stroke:var(--akzent);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 12;animation:spur 14s linear infinite}
.puls{fill:none;stroke:var(--gut);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:puls 3.6s ease-out .3s forwards}
.punkt{fill:var(--akzent)}.punkt.zwei{fill:var(--signal)}.punkt.still{display:none}
@keyframes spur{to{stroke-dashoffset:-360}}
@keyframes puls{to{stroke-dashoffset:0}}
.frage{font-family:var(--f-titel);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--leise);margin:22px 0 2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.chip{background:transparent;color:var(--schrift);border:1px solid var(--linie);border-radius:999px;padding:7px 14px;font:inherit;font-size:15px;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.chip:hover{border-color:var(--akzent);transform:translateY(-1px)}
.chip[aria-pressed=true]{background:var(--akzent);color:var(--grund);border-color:var(--akzent);font-weight:600}
.chip:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.wege{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:14px 0}
.weg{display:block;text-decoration:none;color:var(--schrift);background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:16px 16px 14px;transition:transform .18s,border-color .18s,box-shadow .18s}
.weg:hover,.weg:focus-visible{transform:translateY(-3px);border-color:var(--akzent);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.weg .bild{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--grund);border:1px solid var(--linie)}
.weg svg,.zeichen svg{width:26px;height:26px;stroke:var(--akzent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.weg strong{display:block;margin:10px 0 2px;font-family:var(--f-titel);font-size:17px}
.weg span{display:block;color:var(--leise);font-size:14.5px;line-height:1.45}
.weg .etikett{display:inline-block;margin:8px 0 0;font-size:11.5px}
.weg.klein{padding:12px 14px}.weg.klein strong{margin-top:0}
.leiste{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
.suche{flex:1 1 220px;max-width:420px;background:var(--grund);color:var(--schrift);border:1px solid var(--linie);border-radius:999px;padding:9px 16px;font:inherit}
.zahl{color:var(--leise);font-size:15px}
.ein{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.ein.da{opacity:1;transform:none}
.menue-knopf{display:none;background:transparent;color:var(--schrift);border:1px solid var(--linie);border-radius:8px;padding:6px 12px;font:inherit;cursor:pointer}
.stufen{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin:12px 0;counter-reset:st}
.stufen li{list-style:none;counter-increment:st;border-top:3px solid var(--linie);padding:10px 12px 6px 0;position:relative}
.stufen li::before{content:counter(st);position:absolute;top:-13px;left:0;width:24px;height:24px;border-radius:50%;background:var(--akzent);color:var(--grund);font-size:13px;font-weight:700;display:grid;place-items:center}
.stufen strong{display:block;margin-top:6px}.stufen span{display:block;color:var(--leise);font-size:14px}
ol.stufen{padding:0}
.pfad{list-style:none;margin:18px 0 8px;padding:0;counter-reset:pf;max-width:760px}
.pfad li{counter-increment:pf;position:relative;padding:0 0 16px 58px}
.pfad li::before{content:counter(pf);position:absolute;left:0;top:6px;width:38px;height:38px;border-radius:50%;background:var(--akzent);color:var(--grund);font-weight:700;display:grid;place-items:center;font-family:var(--f-zahl)}
.pfad li::after{content:"";position:absolute;left:18px;top:50px;bottom:-2px;width:2px;background:var(--linie)}
.pfad li:last-child::after{display:none}
.pfad a{display:block;text-decoration:none;color:var(--schrift);background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:12px 16px;transition:transform .18s,border-color .18s}
.pfad a:hover,.pfad a:focus-visible{transform:translateX(4px);border-color:var(--akzent)}
.pfad strong{display:block;font-family:var(--f-titel);font-size:17px}.pfad span{display:block;color:var(--leise);font-size:15px}
.pfad .karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:12px 16px}
.pfad li.geplant::before,.pfad li.spaeter::before{background:var(--flaeche);color:var(--leise);border:1px solid var(--linie)}
.pfad li.offen .karte{border-color:var(--akzent)}.pfad li.spaeter .karte{opacity:.82}
.pfad .karte p{margin:6px 0 0}
.pfad .etikett{display:inline-block;margin:0 0 4px}
details.frage[hidden]{display:none}
.kopfzeile{display:flex;gap:16px;align-items:center;margin:8px 0 4px}.kopfzeile h1{margin:0}
.zeichen.gross{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--flaeche);border:1px solid var(--linie);flex:0 0 auto}
.zeichen.gross svg{width:38px;height:38px}
.blaettern{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:22px 0 0}
@media (max-width:820px){.held{grid-template-columns:1fr}.held h1{font-size:30px}.held .bildseite{order:-1;max-width:340px}
html.js .menue-knopf{display:inline-flex}html.js nav.haupt{display:none;width:100%}html.js nav.haupt.offen{display:block}
html.js nav.haupt ul{flex-direction:column;gap:0}html.js nav.haupt a{display:block;padding:9px 0;font-size:17px}}
.mehrfilter{margin:10px 0 4px;border:1px solid var(--linie);border-radius:12px;padding:8px 14px;background:var(--flaeche)}
.mehrfilter summary{cursor:pointer;color:var(--leise);font-size:14.5px;padding:4px 0}
.mehrfilter[open] summary{color:var(--schrift);margin-bottom:4px}
.folgen{margin:28px 0;padding:18px 20px;border:1px solid var(--linie);border-radius:14px;background:var(--flaeche)}
.folgen h2{margin-top:0}
.folgen-reihe{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.kanal{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--linie);background:var(--grund);color:var(--schrift);text-decoration:none;font-weight:600;font-size:15px}
.kanal::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--kfarbe,var(--akzent))}
.kanal:hover,.kanal:focus-visible{border-color:var(--kfarbe,var(--akzent))}
.kanal[data-kanal=facebook]{--kfarbe:#1877f2}.kanal[data-kanal=instagram]{--kfarbe:#e1306c}.kanal[data-kanal=tiktok]{--kfarbe:#25f4ee}
.kanal[data-kanal=youtube]{--kfarbe:#ff0033}.kanal[data-kanal=whatsapp]{--kfarbe:#25d366}.kanal.nachricht{font-weight:500}
ul.haken{list-style:none;padding:0}ul.haken li{padding-left:26px;position:relative;margin:6px 0}ul.haken li::before{content:"✓";position:absolute;left:0;color:var(--gut);font-weight:700}
[data-tf=planen]{--farbe:#38bdf8}[data-tf=training]{--farbe:#a78bfa}[data-tf=messen]{--farbe:#fbbf24}[data-tf=gesundheit]{--farbe:#fb7185}
[data-tf=sportarten]{--farbe:#4ade80}[data-tf=organisation]{--farbe:#fb923c}[data-tf=daten]{--farbe:#94a3b8}[data-tf=plattform]{--farbe:#2dd4bf}
[data-tf=forschung]{--farbe:#e879f9}[data-tf=allgemein]{--farbe:#cbd5e1}
.weg[data-tf]{border-top:3px solid var(--farbe)}.weg[data-tf]:hover,.weg[data-tf]:focus-visible{border-color:var(--farbe)}
.weg[data-tf] strong{margin-top:0}
.produkt input[type=number],.kachel input[type=number]{width:90px;background:var(--grund);color:var(--schrift);border:1px solid var(--linie);border-radius:6px;padding:6px 8px;font:inherit;margin-left:8px}
[data-aufgabe=planen]{--farbe:#38bdf8}[data-aufgabe=ueben]{--farbe:#a78bfa}[data-aufgabe=testen]{--farbe:#fbbf24}[data-aufgabe=draussen]{--farbe:#4ade80}
[data-aufgabe=gesund]{--farbe:#fb7185}[data-aufgabe=organisieren]{--farbe:#fb923c}[data-aufgabe=daten]{--farbe:#94a3b8}
.weg[data-aufgabe]{border-top:3px solid var(--farbe)}
.weg[data-aufgabe] svg{stroke:var(--farbe)}
.weg[data-aufgabe] .bild{background:color-mix(in srgb,var(--farbe) 12%,var(--grund));border-color:color-mix(in srgb,var(--farbe) 40%,var(--linie))}
.weg[data-aufgabe] .etikett{color:var(--farbe);border-color:color-mix(in srgb,var(--farbe) 45%,var(--linie))}
.weg[data-aufgabe]:hover,.weg[data-aufgabe]:focus-visible{border-color:var(--farbe)}
.sprungleiste{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.sprungleiste a{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;border:1px solid var(--linie);background:var(--flaeche);color:var(--schrift);text-decoration:none;font-size:14px}
.sprungleiste a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--farbe)}
.sprungleiste a b{font-weight:600;color:var(--leise);font-size:12.5px}
.sprungleiste a:hover{border-color:var(--farbe)}
.gruppe{margin:30px 0 8px;scroll-margin-top:80px}
.gruppenkopf{display:flex;align-items:center;gap:12px;margin:0 0 2px;padding-bottom:8px;border-bottom:2px solid color-mix(in srgb,var(--farbe) 55%,var(--linie))}
.gruppenkopf .bild{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--farbe) 14%,var(--grund));border:1px solid color-mix(in srgb,var(--farbe) 40%,var(--linie))}
.gruppenkopf svg{width:22px;height:22px;stroke:var(--farbe);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gruppenkopf .anzahl{margin-left:auto;font-size:13px;font-weight:600;color:var(--grund);background:var(--farbe);border-radius:999px;padding:2px 10px}
.gruppe>.leise{margin:6px 0 0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.ein{opacity:1;transform:none}.puls{stroke-dashoffset:0}.punkt.lauf{display:none}.punkt.still{display:inline}}
@media print{.ein{opacity:1;transform:none}.menue-knopf{display:none}}
@media (max-width:640px){body{font-size:16px}h1{font-size:26px}.huelle{padding:0 16px}dl.angaben{grid-template-columns:1fr}}
@media print{body{background:#fff;color:#000}header.kopf,footer.fuss,.kachel{background:#fff}nav.haupt{display:none}}