/* Laufbuch · Designsystem (aus Claude Design übernommen) */
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/source-serif-4-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/source-serif-4-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/source-serif-4-latin-600-normal.woff2) format('woff2')}

:root,[data-theme="light"]{--bg:#F4F3EF;--surface:#FFFFFF;--surface-2:#EFEEE9;--ink:#1A1C1F;--ink-2:#464B52;--ink-3:#6B7077;--line:#E4E2DB;--line-2:#CCCAC2;--accent:#2C5F86;--accent-soft:#E4EDF4;--good:#2B7A4B;--good-soft:#E3F1E8;--warn:#A65A0B;--warn-soft:#FBEBD6;--bad:#B42A20;--bad-soft:#F9E3E0;--open:#6B7078;--open-soft:#ECEDEE;--map-bg:#ECEBE4;--water:#D3E0E8;--tip-bg:#1A1C1F;--tip-ink:#F4F3EF;--z1:#D3E1EB;--z2:#A6C3D8;--z3:#6F9BBD;--z4:#3F6F96;--z5:#1D4468;--s-tief:#1D4468;--s-rem:#5E8DB2;--s-leicht:#B3CCDF;--s-wach:#D8D4CB;color-scheme:light}
[data-theme="dark"]{--bg:#101214;--surface:#181B1F;--surface-2:#20242A;--ink:#ECEAE5;--ink-2:#B9BCC1;--ink-3:#8E939A;--line:#2A2F35;--line-2:#3B4149;--accent:#86B4D8;--accent-soft:#1E2E3B;--good:#5FC68C;--good-soft:#16301F;--warn:#EBA552;--warn-soft:#392813;--bad:#F2796D;--bad-soft:#3B1B18;--open:#9AA0A8;--open-soft:#252A30;--map-bg:#1B1F23;--water:#1F3140;--tip-bg:#ECEAE5;--tip-ink:#101214;--z1:#25384A;--z2:#33536C;--z3:#4C7699;--z4:#6E9CC2;--z5:#A3C8E6;--s-tief:#8DB8DD;--s-rem:#4C7699;--s-leicht:#2E4A60;--s-wach:#4A4F56;color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:15px;line-height:1.5;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
.serif{font-family:'Source Serif 4',Georgia,serif}
.zahl{font-variant-numeric:lining-nums tabular-nums}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.klein{font-size:12px;color:var(--ink-3)}
.text-2{color:var(--ink-2)}
[hidden]{display:none!important}

/* ---------- Rahmen ---------- */
.app{display:flex;min-height:100vh}
.app-inhalt{flex:1;min-width:0;padding:40px clamp(16px,4vw,56px) 80px}
.seite{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.seitenkopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.seitenkopf h1{margin:0;font-family:'Source Serif 4',Georgia,serif;font-weight:500;font-size:36px;line-height:1.15}

.nav{width:232px;flex:none;border-right:1px solid var(--line);background:var(--surface)}
.nav-innen{position:sticky;top:0;display:flex;flex-direction:column;gap:36px;padding:28px 16px;min-height:100vh}
.marke{display:flex;flex-direction:column;gap:2px;padding:0 12px;color:var(--ink)}
.marke b{font-family:'Source Serif 4',Georgia,serif;font-size:23px;font-weight:600;letter-spacing:-.01em}
.marke span{font-size:12px;color:var(--ink-3)}
.nav-liste{display:flex;flex-direction:column;gap:2px}
.nav-liste a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:7px;font-size:14px;color:var(--ink-2)}
.nav-liste a::before{content:"";width:5px;height:5px;border-radius:50%;background:transparent}
.nav-liste a[aria-current="page"]{color:var(--ink);background:var(--surface-2);font-weight:600}
.nav-liste a[aria-current="page"]::before{background:var(--accent)}
.nav-fuss{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding:0 12px}
.import-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
.punkt{width:7px;height:7px;border-radius:50%;background:var(--open);flex:none}
.punkt.gut{background:var(--good)}.punkt.warn{background:var(--warn)}.punkt.schlecht{background:var(--bad)}
.nav-fuss button{height:36px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);border-radius:7px;font:inherit;font-size:13px;cursor:pointer;text-align:left;padding:0 12px}
.nav-fuss .abmelden{background:none;border:none;padding:0;height:auto;font-size:13px;color:var(--ink-3)}
.nav-fuss .abmelden:hover{color:var(--ink)}

.mobil-kopf,.mobil-nav{display:none}
@media (max-width:820px){
  .app{flex-direction:column}
  .nav{display:none}
  .app-inhalt{padding:20px 16px 96px}
  .seitenkopf h1{font-size:28px}
  .mobil-kopf{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line)}
  .mobil-kopf a{font-family:'Source Serif 4',Georgia,serif;font-size:20px;font-weight:600;color:var(--ink)}
  .mobil-kopf button{min-height:44px;border:none;background:transparent;color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer;padding:0 4px}
  .mobil-nav{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .mobil-nav a{min-height:58px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10.5px;letter-spacing:-.01em;color:var(--ink-2)}
  .mobil-nav a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 2px 0 var(--ink)}
}

/* ---------- Bausteine ---------- */
.karte{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
@media (max-width:820px){.karte{padding:16px 18px}}
.kachel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px}
.raster{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--open-soft);color:var(--open);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.gut{background:var(--good-soft);color:var(--good)}
.pill.ausbau{background:var(--warn-soft);color:var(--warn)}
.pill.kritisch{background:var(--bad-soft);color:var(--bad)}
.pill-neutral{padding:2px 9px;border-radius:999px;border:1px solid var(--line-2);font-size:12px;font-weight:500;color:var(--ink-2)}
.abzeichen{padding:2px 9px;border-radius:999px;background:var(--accent);color:var(--surface);font-size:12px;font-weight:600}
.besser{color:var(--good)}.schlechter{color:var(--bad)}

.knopf{min-height:44px;padding:0 16px;border:none;background:var(--ink);color:var(--bg);border-radius:8px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopf.zweit{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:400}
.feld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500}
.feld input{height:46px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;font-weight:400}
.feld input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.feld.fehler input{border-color:var(--bad)}
.feld .hinweis{font-size:12px;color:var(--ink-3);font-weight:400}
.meldung{padding:12px 14px;border:1px solid var(--line-2);border-radius:8px;font-size:14px;display:flex;flex-direction:column;gap:2px}
.meldung b{font-weight:600}
.meldung.fehler{border-color:var(--bad);background:var(--bad-soft)}.meldung.fehler b{color:var(--bad)}
.meldung.warn{border-color:var(--warn);background:var(--warn-soft)}.meldung.warn b{color:var(--warn)}
.meldung.gut{border-color:var(--good);background:var(--good-soft)}.meldung.gut b{color:var(--good)}

.tabelle{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.tabelle th{font-size:12px;font-weight:400;color:var(--ink-3);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.tabelle td{padding:9px 8px;border-bottom:1px solid var(--line)}
.tabelle .r{text-align:right}

/* ---------- Zustände ---------- */
.leer{background:var(--surface);border:1px dashed var(--line-2);border-radius:10px;padding:32px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.leer .titel{font-family:'Source Serif 4',Georgia,serif;font-size:21px}
.leer p{margin:0;font-size:14px;color:var(--ink-2);max-width:520px}
.lade{background:var(--surface-2);border-radius:4px;min-height:18px}
.fehlerbox{background:var(--surface);border:1px solid var(--bad);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:8px}
.fehlerbox b{color:var(--bad)}

/* ---------- Login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 16px}
.login form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:24px}
.login .kopf{display:flex;flex-direction:column;gap:4px;text-align:center}
.login .kopf b{font-family:'Source Serif 4',Georgia,serif;font-size:34px;font-weight:600;letter-spacing:-.01em}
.login .kopf span{font-size:14px;color:var(--ink-3)}
.login .karte{padding:28px 24px;display:flex;flex-direction:column;gap:18px}
.login .code input{font-size:20px;letter-spacing:.35em;font-variant-numeric:tabular-nums}
.login .knopf{height:48px;font-size:15px}
.login .fuss{text-align:center;font-size:12px;color:var(--ink-3)}

/* ---------- Diagramme ---------- */
.lb-diagramm{position:relative;width:100%;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.lb-tip{position:absolute;pointer-events:none;background:var(--tip-bg);color:var(--tip-ink);border-radius:6px;padding:8px 10px;font-size:12px;line-height:1.5;min-width:130px;box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:5;white-space:nowrap}
.lb-tip-titel{font-weight:600;margin-bottom:3px}
.lb-tip-zeile{display:flex;align-items:center;justify-content:space-between;gap:14px}
.lb-tip-label{display:flex;align-items:center;gap:6px;opacity:.78}
.lb-tip-label i{width:8px;height:8px;border-radius:2px;display:inline-block}
.lb-tip-wert{font-variant-numeric:tabular-nums;font-weight:500}

/* ---------- Woche ---------- */
.seite{max-width:1320px;margin:0;gap:24px}
.seitenkopf .kopf-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.seitenkopf h1{font-size:34px;letter-spacing:-.01em;text-wrap:balance}
.wochen-knoepfe{display:flex;gap:8px}
a.knopf{display:inline-flex;align-items:center}
a.knopf.zweit{color:var(--ink);font-size:14px}
a.knopf[aria-disabled="true"]{pointer-events:none;color:var(--ink-3);border-color:var(--line);background:transparent}
.abschnitt{display:flex;flex-direction:column;gap:12px}
.abschnitt h2,.karte h2{margin:0;font-size:16px;font-weight:600}
.leer.gross{padding:48px 24px;gap:10px}
.leer.gross .titel{font-size:24px}
.leer .knopf{margin-top:8px}
.warnleiste{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:14px 18px;border:1px solid var(--bad);background:var(--bad-soft);border-radius:10px}
.warnleiste b{font-size:13px;font-weight:600;color:var(--bad)}
.kern{display:flex;flex-wrap:wrap;gap:24px 40px;padding:24px 28px}
.kern-aussage{flex:2 1 420px;display:flex;flex-direction:column;gap:14px;min-width:0}
.kern-aussage .pill{align-self:flex-start}
.kern-aussage p{margin:0;font-size:27px;line-height:1.35;font-weight:400;text-wrap:pretty}
.kern-hebel{flex:1 1 260px;display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--line);padding-left:28px}
.hebel-text{font-size:17px;font-weight:500;line-height:1.45;text-wrap:pretty}
.anders{display:flex;flex-direction:column;gap:4px;padding:24px 28px}
.anders h2{margin-bottom:10px}
.anders-kopf,.anders-zeile{display:flex;flex-wrap:wrap;gap:4px 24px}
.anders-kopf{padding:0 0 8px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.anders-zeile{padding:12px 0;border-bottom:1px solid var(--line)}
.anders-zeile:last-child{border-bottom:none}
.anders-kopf span:nth-child(1),.anders-zeile span:nth-child(1){flex:0 0 120px}
.anders-kopf span:nth-child(2),.anders-zeile span:nth-child(2){flex:1 1 240px}
.anders-kopf span:nth-child(3),.anders-zeile span:nth-child(3){flex:1.3 1 280px}
.anders-zeile .thema{font-weight:600}
.anders-zeile .befund{color:var(--ink-2)}
.ampel{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.ampel-karte{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--open);border-radius:10px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px}
.ampel-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ampel-titel{font-weight:600}
.ampel-wert{font-size:28px;line-height:1.1}
.ampel-empf{font-size:14px;color:var(--ink-2);text-wrap:pretty}
.ampel-vor{font-size:12px;color:var(--ink-3);padding-top:8px;border-top:1px solid var(--line)}
.kpi-leiste{background:var(--surface);border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;overflow:hidden}
.kpi{padding:16px 18px;display:flex;flex-direction:column;gap:4px;box-shadow:0 0 0 1px var(--line)}
.kpi-wert{display:flex;align-items:baseline;gap:5px}
.kpi-wert .serif{font-size:32px;line-height:1.1}
.kpi-diff{font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.kpi-diff.besser{color:var(--good)}.kpi-diff.schlechter{color:var(--bad)}
.kpi-diff .klein{font-weight:400}
.plan-reihe{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.plan{flex:1.5 1 440px;min-width:0;display:flex;flex-direction:column;gap:4px;padding:24px 28px}
.karte-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.plan-zeile{display:grid;grid-template-columns:86px 52px minmax(0,1fr) 58px;gap:12px;align-items:baseline;font-variant-numeric:tabular-nums}
.plan-zeile .r,.plan-kopf .r{text-align:right}
.plan-kopf{padding-bottom:8px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.plan-eintrag{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-bottom:1px solid var(--line)}
.plan-eintrag:last-child{border-bottom:none}
.plan-zeile .einheit{font-weight:500}
.plan-grund{font-size:13px;color:var(--ink-2);text-wrap:pretty}
.plan-erledigt{font-size:12px;font-weight:600;color:var(--good)}
.wetter{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:10px;padding:24px 28px}
.wetter-zeile{display:grid;grid-template-columns:72px 1fr 1fr;gap:6px;align-items:center;font-size:13px}
.wetter-kopf{font-size:12px;color:var(--ink-3)}
.wetter-tag{color:var(--ink-2)}
.wetter-zeile.heute .wetter-tag{font-weight:700;color:var(--ink)}
.wetter-zelle{padding:6px 8px;border-radius:6px;font-variant-numeric:tabular-nums;background:var(--surface-2);color:var(--ink-3)}
.wetter-zelle.gut{background:var(--good-soft);color:var(--good)}
.wetter-zelle.aus{background:var(--warn-soft);color:var(--warn)}
.wetter-zelle.krit{background:var(--bad-soft);color:var(--bad)}
.wetter-legende{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--ink-3);padding-top:6px}
.wetter-legende span{display:flex;align-items:center;gap:6px}
.wetter-legende i{width:10px;height:10px;border-radius:3px}
.wetter-legende i.gut{background:var(--good)}.wetter-legende i.aus{background:var(--warn)}.wetter-legende i.krit{background:var(--bad)}
.analyse-auf{display:flex;flex-direction:column;gap:16px}
.analyse-auf summary{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 18px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;list-style:none}
.analyse-auf summary::-webkit-details-marker{display:none}
.analyse-auf summary .analyse-label::after{content:"einblenden"}
.analyse-auf[open] summary .analyse-label::after{content:"ausblenden"}
.analyse-auf[open] summary{margin-bottom:16px}
.analyse{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(280px,calc((100% - 32px)/3))),1fr));gap:16px}
.analyse .kachel{display:flex;flex-direction:column;gap:8px}
.analyse h3{margin:0 0 2px;font-size:15px;font-weight:600}
.analyse-zeile{display:flex;gap:8px;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.analyse-zeile .marker{color:var(--ink-3);flex:none}
@media (max-width:820px){
  .seitenkopf h1{font-size:25px}
  .seite{gap:20px}
  .kern,.anders,.plan,.wetter{padding:18px}
  .kern-aussage p{font-size:22px}
  .kern-hebel{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:16px}
  .anders-kopf{display:none}
  .wochen-knoepfe{width:100%}
  .wochen-knoepfe .knopf{flex:1;justify-content:center}
}

/* ---------- Gesundheit ---------- */
.umschalter{display:flex;padding:3px;border-radius:8px;background:var(--surface-2);gap:2px}
.umschalter button{min-height:38px;padding:0 14px;border:none;border-radius:6px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink);background:transparent}
.umschalter button[aria-pressed="true"]{background:var(--surface);font-weight:600}
.karten-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(320px,calc((100% - 32px)/3))),1fr));gap:16px}
.diagramm-karte{padding:18px 20px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.diagramm-karte.voll{grid-column:1/-1}
.diagramm-karte.doppelt{grid-column:span 2}
@media (max-width:1100px){.diagramm-karte.doppelt{grid-column:1/-1}}
.dk-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.dk-kopf h2{font-size:15px}
.dk-wert{font-size:22px;line-height:1}
.dk-text{font-size:13px;color:var(--ink-2);text-wrap:pretty}
.legende{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--ink-3)}
.legende span{display:flex;align-items:center;gap:6px}
.leg-flaeche{width:12px;height:10px;border-radius:2px;background:var(--f)}
.leg-linie{width:12px;height:0;border-top:2px solid var(--f)}
.leg-linie.gestrichelt{border-top-style:dashed}
.dk-diagramm{display:flex;flex-direction:column;padding-top:4px}
.dk-label{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3)}
.dk-label span:last-child{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.dk-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:10px;border-top:1px solid var(--line);margin-top:6px}
.dk-kpis>div{display:flex;flex-direction:column}
.dk-kpi-wert{font-size:22px}
.wochentabelle{padding:20px 24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tabelle-rollen{overflow-x:auto}
.wochentabelle .tabelle{min-width:900px}
.wochentabelle tr.aktuell td{background:var(--surface-2);font-weight:600}
.wochentabelle td a{color:var(--ink)}
.tabelle td.schlechter{color:var(--bad)}

/* ---------- Aktivitaeten ---------- */
.filterleiste{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.umschalter a{min-height:38px;padding:0 14px;border-radius:6px;font-size:13px;color:var(--ink);display:inline-flex;align-items:center}
.umschalter a[aria-pressed="true"]{background:var(--surface);font-weight:600}
.auswahl{min-height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px}
.akt-gruppe{display:flex;flex-direction:column;gap:8px}
.gruppen-titel{margin:0;font-size:13px!important;font-weight:600;color:var(--ink-3)}
.akt-liste{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.akt-zeile{display:grid;grid-template-columns:132px minmax(0,1fr) repeat(4,minmax(72px,96px));gap:16px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
.akt-zeile:last-child{border-bottom:none}
.akt-zeile:hover{background:var(--surface-2);color:var(--ink)}
.mini-strecke{width:132px;height:76px;border-radius:6px;overflow:hidden;background:var(--map-bg);display:block}
.mini-strecke svg{width:100%;height:100%;display:block}
.akt-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.akt-name b{font-weight:600;font-size:15px}
.akt-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.akt-pills .pill-neutral,.akt-pills .abzeichen{font-size:11px;padding:1px 8px}
.akt-wert{display:flex;flex-direction:column}
.akt-wert span{font-size:11px;color:var(--ink-3)}
.akt-wert b{font-size:19px;font-weight:400}
@media (max-width:820px){
  .akt-zeile{grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);gap:10px 14px}
  .mini-strecke{width:96px;height:64px;grid-row:span 2}
  .akt-name{grid-column:2/-1}
  .akt-wert:nth-of-type(n+5){display:none}
}

/* ---------- Aktivitaet (Detail) ---------- */
.akt-kopf h1{font-size:34px}
.akt-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.akt-raster{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);grid-template-areas:"map side" "charts side2";gap:16px;align-items:start}
.akt-karte{grid-area:map;padding:0;overflow:hidden;display:flex;flex-direction:column}
.akt-seite{grid-area:side;display:flex;flex-direction:column;gap:16px;min-width:0}
.akt-verlauf{grid-area:charts;display:flex;flex-direction:column;gap:6px;min-width:0;padding:24px 28px}
.akt-seite2{grid-area:side2;display:flex;flex-direction:column;gap:16px;min-width:0}
.karte-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.karte-leiste .umschalter button{min-height:36px}
.karte-legende{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:12px;color:var(--ink-3)}
.karte-legende>span{display:flex;align-items:center;gap:6px}
.karte-legende .rampe{width:54px;height:6px;border-radius:3px;display:inline-block}
.leg-geh{width:14px;height:4px;border-radius:2px;background:var(--warn);display:inline-block}
.leg-seg{width:14px;height:8px;border-radius:4px;background:var(--ink);opacity:.18;display:inline-block}
.karte-flaeche{height:420px;background:var(--map-bg);position:relative}
.karte-flaeche.karte-leer{height:180px}
.karte-ersatz svg{display:block}
.karte-hinweis{padding:10px 14px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line)}
.maplibregl-ctrl-group{background:var(--surface)!important;border:1px solid var(--line-2);box-shadow:none!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--line-2)!important}
[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}
.maplibregl-ctrl-attrib{font-size:10px}
.kpi-raster{background:var(--surface);border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;gap:1px}
.kpi-klein{padding:14px 14px 12px;display:flex;flex-direction:column;gap:2px;box-shadow:0 0 0 1px var(--line)}
.kpi-klein b{font-size:24px;font-weight:400;line-height:1.15}
.akt-fazit{padding:20px;display:flex;flex-direction:column;gap:16px}
.akt-fazit p{margin:0;font-size:20px;line-height:1.4;text-wrap:pretty}
.naechstes{background:var(--surface-2);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.naechstes div:last-child{font-weight:500;text-wrap:pretty}
.plan-ist{padding:0 4px}
.vd{display:flex;flex-direction:column;gap:2px;padding-top:10px}
.vd-kopf{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.vd-kopf b{font-weight:500}
.balken-karte{padding:20px;display:flex;flex-direction:column;gap:12px}
.balken{display:flex;height:14px;border-radius:4px;overflow:hidden;gap:2px}
.balken span{height:100%}
.balken-liste{display:flex;flex-direction:column;gap:4px}
.balken-liste div{display:grid;grid-template-columns:14px 1fr auto 44px;gap:8px;align-items:center;font-size:13px;font-variant-numeric:tabular-nums}
.balken-liste i,.balken-legende i{width:10px;height:10px;border-radius:3px;display:inline-block}
.balken-liste .r{text-align:right}
.balken-legende{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;font-variant-numeric:tabular-nums}
.balken-legende span{display:flex;align-items:center;gap:6px}
.qual-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(250px,calc((100% - 32px)/3))),1fr));gap:16px}
.qual{background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.qual-kopf{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.qual-kopf b{font-weight:600}
.qual-wert{font-size:28px;line-height:1.1}
.qual-text{font-size:13px;color:var(--ink-2);text-wrap:pretty}
.splits{flex:1 1 380px;min-width:0;padding:24px 28px}
.splits h2,.seg-liste h2{margin-bottom:10px!important}
.splits tr.beste td{background:var(--surface-2)}
.splits tr.beste td:nth-child(2){font-weight:600}
.markierung{font-size:11px;font-weight:600;color:var(--accent);margin-left:6px}
.seg-liste{flex:1.2 1 400px;min-width:0;padding:24px 28px}
.seg-zeile{display:grid;grid-template-columns:minmax(0,1fr) 56px 76px 64px;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.seg-zeile .r{text-align:right}
.seg-zeile>span:first-child{display:flex;flex-direction:column;min-width:0}
.seg-zeile b{font-weight:500}
.seg-kopf{font-size:12px;color:var(--ink-3);padding:6px 0}
a.seg-zeile:hover{background:var(--surface-2);color:var(--ink)}
.detail-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:6px 32px;padding:20px}
@media (max-width:980px){
  .akt-raster{grid-template-columns:minmax(0,1fr);grid-template-areas:"side" "map" "charts" "side2"}
  .karte-flaeche{height:300px}
  .akt-kopf h1{font-size:26px}
  .akt-verlauf,.splits,.seg-liste{padding:18px}
}

/* ---------- Segmente ---------- */
.karte-flaeche.hoch{height:460px}
.seg-raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(360px,1fr);gap:16px;align-items:start}
.seg-karte,.segd-karte{padding:0;overflow:hidden}
.seg-tabelle{padding:16px 20px}
.segl-zeile{display:grid;grid-template-columns:28px minmax(0,1fr) 56px 56px 48px 64px;gap:10px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line);color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.segl-zeile .r{text-align:right}
.segl-kopf{font-size:12px;color:var(--ink-3);padding:6px 4px}
a.segl-zeile:hover,a.segl-zeile.aktiv{background:var(--surface-2);color:var(--ink)}
.segl-name{display:flex;flex-direction:column;min-width:0}
.segl-name b{font-weight:500}
.nummer{width:22px;height:22px;border-radius:50%;border:1.25px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.seg-fuss{padding-top:10px}
.karten-marke.start{width:14px;height:14px;border-radius:50%;background:var(--good);border:2px solid var(--surface)}
.karten-marke.ziel{width:13px;height:13px;background:var(--ink);border:2px solid var(--surface)}
.karten-marke.nummer{width:22px;height:22px;border-radius:50%;background:var(--surface);border:1.25px solid var(--ink);color:var(--ink);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Sans',system-ui,sans-serif}
.segd-raster{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:16px;align-items:start}
.segd-karte .karte-flaeche{height:340px}
.profil{padding:12px 16px 8px;border-top:1px solid var(--line)}
.profil-kopf{display:flex;justify-content:space-between;font-size:13px}
.pkt{display:inline-block;width:9px;height:9px;margin:0 4px 0 10px}
.pkt.start{border-radius:50%;background:var(--good)}.pkt.ziel{background:var(--ink)}
.segd-seite{display:flex;flex-direction:column;gap:16px;min-width:0}
.segd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi-klein.breit{grid-column:span 2}
.segd-aussage{padding:20px;display:flex;flex-direction:column;gap:10px}
.segd-aussage .pill{align-self:flex-start}
.segd-aussage p{margin:0;font-size:19px;line-height:1.4;text-wrap:pretty}
.bestenliste{flex:1.2 1 420px;min-width:0;padding:20px 24px}
.bestenliste td a{color:var(--ink)}
.platz{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink-2)}
.platz.p1{background:var(--accent);color:var(--surface);font-weight:600}
.platz.p2,.platz.p3{background:var(--accent-soft);color:var(--accent);font-weight:600}
.bestenliste tr.letzter td{background:var(--surface-2)}
.letzter-pill{padding:1px 7px;border-radius:999px;border:1px solid var(--ink);font-size:11px;font-weight:600;margin-left:6px}
.bestenliste tr.luecke td{text-align:center;color:var(--ink-3);padding:4px}
.segd-diagramme{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:16px}
.vergleich{padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.vergleich-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:flex-end}
.vergleich-wahl{display:flex;flex-wrap:wrap;gap:10px}
.vergleich-wahl label{display:flex;align-items:center;gap:8px}
.vergleich-diagramme{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:20px}
.vergleich-fazit{font-size:14px;color:var(--ink-2);padding-top:8px;border-top:1px solid var(--line)}
@media (max-width:980px){
  .seg-raster,.segd-raster{grid-template-columns:minmax(0,1fr)}
  .karte-flaeche.hoch{height:320px}
  .segl-zeile{grid-template-columns:26px minmax(0,1fr) 52px 52px;gap:8px}
  .segl-zeile>span:nth-child(5),.segl-zeile>span:nth-child(6){display:none}
}