/* Cockpit V2. Ein Look für alle Bereiche: true black, Tiefe nur über Helligkeit, Volt nur auf Daten. Grundsätze in /srv/cockpit/DESIGN.md */
:root {
  color-scheme: dark;
  --ground: #000;
  --surface: #111;
  --raised: #2a2a2a;
  --rule: #1c1c1c;
  --text: #fff;
  --muted: #b4b4b4;
  --faint: #949494;
  --volt: #c6f24e;
  --negative: #e5484d;
  --pill-handeln-bg: #2c1a20; --pill-handeln-ink: #ef7186;
  --pill-beobachten-bg: #2b2414; --pill-beobachten-ink: #e5a93b;
  --pill-neutral-bg: #222; --pill-neutral-ink: #d6d6d6;
  --radius: 13px;
  --gutter: 22px;
  --abstand: 35px;
  --schrift: "Inter", system-ui, -apple-system, sans-serif;
  --ziffern: "Barlow Condensed", "Inter", system-ui, sans-serif;
  --nav-hoehe: 70px;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; background: var(--ground); -webkit-text-size-adjust: 100%; }
body { background: var(--ground); color: var(--text); font: 400 17px/24px var(--schrift); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
::selection { background: var(--text); color: #000; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

.countdown-zahl, .signalzahl, .wert-zahl, .wert-von, .kennzahl b, .zahl-gross, .zeile, .tag-rechts, .tag-unter, .leise { font-variant-numeric: tabular-nums; }

/* Icons: eigener Satz, nur Linien, eine Strichstärke */
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-gross { width: 33px; height: 33px; stroke-width: 1.3; color: var(--muted); }
.icon-volt { color: var(--volt); }
.mit-icon { display: inline-flex; align-items: center; gap: 7px; }
.klappe > summary > .icon { color: var(--muted); }

/* Rahmen: unten vier Bereiche am Handy, ab 1000 px Leiste links */
.rahmen { min-height: 100dvh; }
.seite { padding: 22px var(--gutter) calc(var(--nav-hoehe) + 35px + env(safe-area-inset-bottom)); max-width: 704px; margin: 0 auto; }
.nav { position: fixed; inset: auto 0 0 0; z-index: 5; background: var(--ground); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
.nav-marke { display: none; }
.nav-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: var(--nav-hoehe); }
.nav-link { display: grid; justify-items: center; align-content: center; gap: 4px; color: var(--faint); font-size: 12px; line-height: 15px; font-weight: 500; transition: color 150ms ease-out; }
.nav-link .icon { width: 22px; height: 22px; stroke-width: 1.5; }
.nav-link:hover { color: var(--text); }
.nav-link[aria-current] { color: var(--text); font-weight: 600; }

/* Kopf */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 13px; min-height: 48px; }
.kopf-marke { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; }
.kopf-marke svg { width: 22px; height: 22px; stroke: var(--text); fill: none; stroke-width: 1.6; }
.leise { color: var(--muted); font-size: 14px; line-height: 20px; }
.kopf-link { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; color: var(--muted); font-size: 14px; transition: color 150ms ease-out; }
.kopf-link:hover { color: var(--text); }
.pfeil { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: none; }

/* Countdown, das eine Element nur dieses Cockpits: 26 Wochen bis Hamburg */
.hero { margin-top: 13px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 165px); gap: 13px; align-items: end; }
.hero h1 { margin-top: 9px; font-size: 19px; line-height: 24px; font-weight: 600; }
.countdown-zahl { display: block; }
.route { margin: 0; text-align: right; }
.route svg { display: block; width: 100%; height: auto; max-height: 165px; }
.route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-ganz { stroke: #4a4a4a; }
.route-lauf { stroke: var(--volt); stroke-dasharray: 1; animation: route-zeichnen 1100ms cubic-bezier(.16, 1, .3, 1); }
.route-punkt { fill: var(--text); }
.route figcaption { margin-top: 7px; color: var(--faint); font-size: 12px; line-height: 15px; font-variant-numeric: tabular-nums; }
@keyframes route-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.countdown-zahl { font: 600 97px/84px var(--ziffern); }
.leiter { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 3px; margin-top: 22px; }
.leiter i { height: 10px; border-radius: 2px; background: var(--raised); }
.leiter i.vorbei { background: var(--text); }
.leiter i.jetzt { background: var(--volt); }

/* Bereiche auf Start */
.bereiche { margin-top: 26px; display: grid; }
.bereich { display: block; padding: 24px 0; border-top: 1px solid var(--rule); }
.bereich-kopf { transition: color 150ms ease-out; }
.bereich:hover .bereich-kopf { color: var(--text); }
.bereich-karte + .bereich { border-top: 0; }
.bereich-karte { background: var(--surface); border-radius: var(--radius); padding: 20px 22px; border-top: 0; margin-bottom: 9px; }
.bereich-kopf { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 24px; color: var(--muted); font-size: 14px; }
.bereich-rechts { display: inline-flex; align-items: center; gap: 9px; }
.bereich-titel { text-wrap: balance; margin-top: 7px; font-size: 23px; line-height: 29px; font-weight: 600; letter-spacing: -.01em; }
.bereich-unter { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 20px; }
.signalzeile { margin-top: 9px; display: flex; align-items: center; gap: 13px; }
.signalzeile b { font-weight: 600; }
.signalzahl { font: 600 37px/37px var(--ziffern); }
.ausnahme { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 9px 0; border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px; }

.bereich-zeile { margin-top: 7px; font-size: 18px; line-height: 24px; font-weight: 500; }
.bereich-signal { margin-top: 9px; font-size: 15px; line-height: 22px; }

/* Stufen */
.stufe { flex: none; display: inline-block; padding: 1px 9px; border-radius: 1099px; font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.stufe-Handeln { background: var(--pill-handeln-bg); color: var(--pill-handeln-ink); }
.stufe-Beobachten { background: var(--pill-beobachten-bg); color: var(--pill-beobachten-ink); }
.stufe-neutral { background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }
.keine-daten { color: var(--faint); font-size: 13px; line-height: 18px; }

/* Bereichsseite */
.titelzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 13px; min-height: 40px; }
.titelzeile h1 { font-size: 26px; line-height: 33px; font-weight: 600; letter-spacing: -.015em; }
.reiter { display: flex; gap: 24px; margin-top: 11px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.reiter a { padding: 12px 0; color: var(--faint); font-size: 15px; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 150ms ease-out; }
.reiter a:hover { color: var(--text); }
.reiter a[aria-current] { color: var(--text); border-color: var(--text); }
.abschnitt { margin-top: var(--abstand); }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 13px; }
.abschnitt-kopf h2 { font-size: 18px; line-height: 24px; font-weight: 600; }

/* Signal */
.signal { margin-top: 22px; background: var(--surface); border-radius: var(--radius); padding: 18px 22px; }
.signal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.signal-kopf h2 { font-size: 18px; line-height: 24px; font-weight: 600; }
.signal p { margin-top: 7px; font-size: 15px; line-height: 22px; color: var(--muted); }
.signal p.handlung { color: var(--text); }
.signal-weitere { margin-top: 11px; font-size: 14px; color: var(--muted); }
.signal-weitere summary { min-height: 48px; display: flex; align-items: center; }
.signal-weitere li { padding: 7px 0; display: flex; gap: 9px; align-items: baseline; justify-content: space-between; }

/* Training */
.training { margin-top: 22px; background: var(--surface); border-radius: var(--radius); padding: 22px; }
.training-kopf { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }
.training h2 { text-wrap: balance; font-size: 29px; line-height: 33px; font-weight: 600; letter-spacing: -.015em; }
.training-unter { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 22px; }
.training-ansage { margin-top: 13px; font-size: 17px; line-height: 24px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 18px; padding: 0 22px; border-radius: 1099px; background: var(--text); color: #000; font-weight: 600; font-size: 15px; transition: background-color 150ms ease-out, transform 100ms ease-out; }
.knopf:hover { background: #dedede; }
.knopf:active { transform: scale(.98); }
.knopf-still { background: var(--raised); color: var(--text); }
.knopf-still:hover { background: #363636; }
.bereitschaft { margin-top: 7px; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; }
.bereitschaft i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.bereitschaft-bereit i { background: var(--volt); }
.bereitschaft-moderat i { background: var(--pill-beobachten-ink); }
.bereitschaft-erholung i { background: var(--pill-handeln-ink); }
.essen { margin-top: 13px; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 15px; line-height: 22px; }
.essen .icon { margin-top: 2px; }
.klappe { margin-top: 13px; font-size: 15px; line-height: 22px; }
.klappe > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; color: var(--muted); }
.klappe > summary:hover { color: var(--text); }
.klappe > summary .pfeil { transition: transform 150ms ease-out; }
.klappe[open] > summary .pfeil { transform: rotate(90deg); }
.klappe p, .klappe ul { margin-top: 9px; color: var(--muted); }
.klappe li { display: flex; justify-content: space-between; gap: 13px; padding: 4px 0; }
.klappe li span:last-child { color: var(--faint); text-align: right; }
.vergleich { margin-top: 13px; font-size: 15px; line-height: 22px; color: var(--muted); }
.vergleich b { color: var(--text); font-weight: 500; }

/* Heute bisher */
.werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 15px; }
.wert-label { color: var(--muted); font-size: 14px; line-height: 20px; }
.wert-zahl { font: 600 42px/46px var(--ziffern); margin-top: 2px; }
.wert-zahl.leer { color: var(--faint); }
.wert-von { color: var(--faint); font-size: 13px; line-height: 18px; }
.balken { position: relative; height: 7px; margin-top: 11px; border-radius: 1099px; background: var(--raised); }
.balken i { display: block; height: 100%; min-width: 0; border-radius: 1099px; background: var(--text); }
.balken.haupt i { background: var(--volt); }
.balken u { position: absolute; top: -3px; width: 2px; height: 13px; background: var(--muted); }
.saeulen { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; height: 48px; margin-top: 11px; }
.saeule { cursor: default; display: flex; align-items: flex-end; height: 100%; background: linear-gradient(var(--rule), var(--rule)) bottom / 100% 2px no-repeat; }
.saeule i { display: block; width: 100%; min-height: 0; border-radius: 2px 2px 0 0; background: #5a5a5a; }
.saeule i.heute { background: var(--volt); }
.saeule:hover i:not(.heute), .saeule:focus i:not(.heute) { background: var(--text); }
.saeule:focus { outline: none; }
.saeule-info { position: absolute; z-index: 3; bottom: calc(100% + 7px); left: 0; display: none; padding: 4px 9px; border-radius: 7px; background: var(--text); color: #000; font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; box-shadow: 0 4px 15px rgba(0, 0, 0, .5); }
.saeule-info.pos-l { left: 0; right: auto; transform: none; }
.saeule-info.pos-m { left: 50%; right: auto; transform: translateX(-50%); }
.saeule-info.pos-r { left: auto; right: 0; transform: none; }
/* An die Grafik gehängt statt an die Säule: links, mittig, rechts, so ragt nichts über den Bildschirmrand */
.werte > div:nth-child(2) .saeule-info { left: 50%; transform: translateX(-50%); }
.werte > div:last-child .saeule-info { left: auto; right: 0; }
.saeule:hover .saeule-info, .saeule:focus .saeule-info { display: block; }
.saeulen u { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #6a6a6a; text-decoration: none; }
.wert-notiz { margin-top: 15px; color: var(--muted); font-size: 14px; line-height: 20px; }

/* Woche */
.leiter-klein { margin-top: 11px; }
.leiter-klein i { height: 7px; }
.wochenziele { margin-top: 11px; font-size: 15px; line-height: 22px; color: var(--muted); }
.tag-anders { display: inline-flex; align-items: center; gap: 4px; }
.tag-klapp[open] .tag-anders .pfeil { transform: rotate(90deg); }
.kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 13px; }
.kennzahl b { display: block; font: 600 31px/35px var(--ziffern); }
.kennzahl b small { font: 400 14px/1 var(--schrift); color: var(--muted); margin-left: 2px; }
.tagliste { margin-top: 15px; }
.tag { display: grid; grid-template-columns: 37px minmax(0, 1fr) auto; column-gap: 11px; align-items: center; min-height: 57px; padding: 9px 0; border-top: 1px solid var(--rule); }
.tag-klapp > summary { display: grid; grid-template-columns: 37px minmax(0, 1fr) auto; column-gap: 11px; align-items: center; min-height: 57px; padding: 9px 0; }
.tag-klapp { border-top: 1px solid var(--rule); }
.tag-klapp .vergleich { margin: 0 0 11px 48px; }
.status { justify-self: end; color: var(--muted); font-size: 13px; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.status .icon { width: 15px; height: 15px; }
.status-erledigt { color: var(--text); }
.status-erledigt .icon { color: var(--volt); }
.status-heute { color: var(--volt); font-weight: 500; }
.tag-klapp[open] .status .pfeil { transform: rotate(90deg); }
.laufpunkte { display: inline-flex; gap: 4px; margin-right: 9px; vertical-align: 1px; }
.laufpunkte i { width: 9px; height: 9px; border-radius: 50%; background: var(--raised); }
.laufpunkte i.voll { background: var(--volt); }
.tag-name { color: var(--faint); font-size: 14px; font-weight: 500; }
.tag-titel { font-size: 15px; line-height: 21px; font-weight: 500; overflow-wrap: anywhere; }
.tag-unter { color: var(--muted); font-size: 13px; line-height: 18px; margin-top: 1px; }
.tag-rechts { color: var(--muted); font-size: 14px; text-align: right; white-space: nowrap; }
.tag-kommend .tag-titel { color: var(--muted); font-weight: 400; }
.tag-kommend .tag-rechts { color: var(--faint); }
.tag-heute { background: var(--surface); border-top-color: transparent; border-radius: 11px; margin: 0 -11px; padding-inline: 11px; }
.tag-heute + .tag, .tag-heute + .tag-klapp { border-top-color: transparent; }
.tag-heute .tag-name { color: var(--volt); font-weight: 600; }

/* Kacheln und Listen */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.kachel { background: var(--surface); border-radius: var(--radius); padding: 18px; }
.kachel .icon-gross { display: block; margin-bottom: 11px; }
.kachel-wert { margin-top: 4px; font-size: 19px; line-height: 24px; font-weight: 600; }
.linkliste a { display: flex; align-items: center; justify-content: space-between; min-height: 53px; border-top: 1px solid var(--rule); font-size: 15px; }
.linkliste a:hover { color: var(--muted); }
.linkliste .icon { color: var(--muted); width: 20px; height: 20px; }
.linkliste .mit-icon { gap: 11px; }
.linkliste a.nur-desktop { display: none; }
.zahl-gross { font: 600 62px/62px var(--ziffern); }
.zeilen { margin-top: 11px; }
.zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 13px; padding: 11px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.zeile b { font-weight: 500; }
.zeile > span:last-child:not(:first-child) { text-align: right; flex: none; max-width: 60%; }
.spaeter { margin-top: var(--abstand); color: var(--muted); font-size: 15px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0 11px; }
.klappe-titel { color: var(--text); font-weight: 600; font-size: 18px; }
.klappe p.hell { color: var(--text); }
.signale-text { margin-top: 7px; }
.regel-zustand { display: block; }
.zahl-gross { margin-top: 9px; }
.keine-daten { display: block; margin-top: 7px; }

/* Fortschritt */
.score { margin-top: 22px; background: var(--surface); border-radius: var(--radius); padding: 22px; }
.score-kopf { display: flex; align-items: center; gap: 15px; }
.score-kopf h2 { font-size: 19px; line-height: 24px; font-weight: 600; }
.score-zahl { font: 600 79px/70px var(--ziffern); font-variant-numeric: tabular-nums; }
.score-skala { margin-top: 15px; height: 7px; border-radius: 1099px; background: var(--raised); }
.score-skala i { display: block; height: 100%; border-radius: 1099px; background: var(--volt); }
.score-teil { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 13px; padding: 9px 0 !important; }
.score-teil > .balken { grid-column: 1 / -1; display: block; height: 4px; margin-top: 4px; }
.score-teil > .balken i { background: var(--text); }
.ziele { display: grid; gap: 15px; margin-top: 15px; }
.ziel { background: var(--surface); border-radius: var(--radius); padding: 20px 22px; min-width: 0; }
.ziel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.ziel-kopf h2 { font-size: 18px; line-height: 24px; font-weight: 600; }
.ziel-kopf .icon { width: 22px; height: 22px; color: var(--muted); }
.ziel-stein-eng { margin-top: 2px; }
.ziel-urteil { margin-top: 9px; font-size: 15px; line-height: 22px; }
.ziel-zahl { margin-top: 13px; font: 600 62px/62px var(--ziffern); font-variant-numeric: tabular-nums; }
.ziel-zahl small { margin-left: 7px; font: 400 14px/1 var(--schrift); color: var(--muted); }
.ziel-stein { margin-top: 13px; color: var(--muted); font-size: 14px; line-height: 20px; }
.saeulen-leiter { grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 2px; height: 84px; margin-top: 15px; }
.stapel { position: relative; display: block; width: 100%; height: 100%; }
.stapel i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 1px 1px 0 0; }
.stapel i.plan { background: var(--raised); }
.stapel i.plan.jetzt { background: #5a5a5a; }
.stapel i.ist { background: var(--volt); }
.saeule:hover .stapel i.plan, .saeule:focus .stapel i.plan { background: var(--text); }
.testbalken { margin-top: 15px; display: grid; gap: 9px; }
.testbalken-zeile { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 11px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.testbalken-zeile > span:last-child { color: var(--text); }
.testbalken-spur { position: relative; height: 11px; border-radius: 2px; background: var(--raised); }
.testbalken-spur i { display: block; height: 100%; border-radius: 2px; background: #5a5a5a; }
.testbalken-spur i.heute { background: var(--volt); }
.testbalken-spur u { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--text); }
.linie-rahmen { position: relative; height: 106px; margin-top: 15px; }
.linie { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.linie path { fill: none; stroke: var(--volt); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.linie path.punkt { stroke: #7a7a7a; stroke-width: 4; }
.linie-y { position: absolute; left: 0; color: var(--faint); font-size: 12px; line-height: 15px; background: var(--surface); padding-right: 4px; }
.linie-y.oben { top: 0; }
.linie-y.unten { bottom: 0; }
.saeulen-bedienung { position: absolute; inset: 0; height: auto; margin: 0; gap: 0; grid-template-columns: repeat(42, minmax(0, 1fr)); }
.saeulen-bedienung .saeule { background: none; }
.saeulen-bedienung .saeule:hover, .saeulen-bedienung .saeule:focus { background: none; }
.saeulen-bedienung .saeule::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--x, 50%); display: none; width: 1px; background: rgba(255, 255, 255, .35); pointer-events: none; }
.saeulen-bedienung .saeule:hover::before, .saeulen-bedienung .saeule:focus::before { display: block; }
.tip-punkt { position: absolute; left: var(--x, 50%); display: none; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px; border-radius: 50%; box-shadow: 0 0 0 2px #000; pointer-events: none; }
.saeule:hover .tip-punkt, .saeule:focus .tip-punkt { display: block; }
.saeule-info.tip { min-width: 148px; padding: 8px 11px; border: 1px solid #333; border-radius: 10px; background: #1c1c1c; color: var(--text); font-weight: 400; }
.tip-titel { display: block; margin-bottom: 3px; color: var(--muted); font-size: 12px; line-height: 16px; }
.tip-zeile { display: flex; align-items: center; justify-content: space-between; gap: 18px; line-height: 21px; }
.tip-name { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.tip-marke { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.tip-wert { font-weight: 600; }
.tip-volt { background: var(--volt); }
.tip-hell, .tip-linie-eingezahlt, .tip-linie-weiss { background: #e8e8e8; }
.tip-grau, .tip-linie-grau { background: #8a8a8a; }
.wochenzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; margin-top: 15px; }
.wochenzahlen b { display: block; margin-top: 2px; font: 600 37px/42px var(--ziffern); font-variant-numeric: tabular-nums; }
.wochenzahlen b small { margin-left: 3px; font: 400 14px/1 var(--schrift); color: var(--muted); }
.wochenzahlen .icon { color: var(--muted); }
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 15px; }
.kal-tag { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 0 7px; border-radius: 7px; background: var(--surface); cursor: default; }
.kal-tag:focus { outline: none; }
.kal-tag:hover, .kal-tag:focus { background: var(--raised); }
.kal-zahl { color: var(--muted); font-size: 13px; line-height: 15px; font-variant-numeric: tabular-nums; }
.kal-tag.heute .kal-zahl { color: var(--volt); font-weight: 600; }
.kal-tag.ampel-gelb { background: var(--pill-beobachten-bg); }
.kal-tag.ampel-rot { background: var(--pill-handeln-bg); }
.kal-training { display: block; width: 20px; height: 4px; border-radius: 2px; background: transparent; }
.kal-locker { background: #7a7a7a; }
.kal-hart { background: var(--text); }
.kal-tag .saeule-info { white-space: normal; width: max-content; max-width: 190px; }
.kal-tag:hover .saeule-info, .kal-tag:focus .saeule-info { display: block; }
.legende { display: flex; flex-wrap: wrap; gap: 7px 15px; margin-top: 11px; color: var(--faint); font-size: 13px; line-height: 18px; }
.legende span { display: inline-flex; align-items: center; gap: 7px; }
.ampel-punkt { width: 11px; height: 11px; border-radius: 3px; }
.ampel-punkt.ampel-gelb { background: var(--pill-beobachten-ink); }
.ampel-punkt.ampel-rot { background: var(--pill-handeln-ink); }
.serien { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 11px; font-size: 15px; color: var(--muted); }
.serien b { font: 600 26px/31px var(--ziffern); color: var(--text); }
.route-gross { margin-top: 15px; text-align: left; }
.route-gross svg { max-height: 242px; margin: 0 auto; }
.route-still { animation: none; }

/* Tagebuch */
.abschnitt-eng { margin-top: 22px; }
.stelle { margin-top: 15px; }
.stelle-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 13px; font-size: 15px; font-weight: 500; }
.stelle-wert { font: 600 26px/29px var(--ziffern); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stelle-wert small { margin-left: 2px; font: 400 13px/1 var(--schrift); color: var(--muted); }
.stelle-kaesten { position: relative; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; margin-top: 7px; }
.kasten { display: block; height: 22px; border-radius: 3px; cursor: default; }
.kasten:focus { outline: 2px solid var(--text); outline-offset: 1px; }
.kasten:hover { outline: 1px solid var(--text); outline-offset: 1px; }
.kasten-leer { box-shadow: inset 0 0 0 1px #2a2a2a; }
.kasten-null { background: #3d3d3d; }
.kasten-leicht { background: #8a8a8a; }
.kasten-gelb { background: var(--pill-beobachten-ink); }
.kasten-rot { background: var(--pill-handeln-ink); }
.kasten:hover .saeule-info, .kasten:focus .saeule-info { display: block; }
.legende .kasten { width: 13px; height: 13px; }
.umschalter { display: inline-flex; gap: 2px; padding: 2px; border-radius: 1099px; background: var(--surface); }
.umschalter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border-radius: 1099px; color: var(--muted); font-size: 14px; font-weight: 500; transition: color 150ms ease-out; }
.umschalter a:hover { color: var(--text); }
.umschalter a[aria-current] { background: var(--raised); color: var(--text); }
.abschnitt-kopf:has(.umschalter) { align-items: center; }
.tb-liste { margin-top: 11px; }
.tb-tag { border-top: 1px solid var(--rule); }
.tb-tag > summary { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: 11px; align-items: center; min-height: 70px; padding: 11px 0; }
.tb-tag[open] > summary .pfeil { transform: rotate(90deg); }
.tb-tag > summary .pfeil { color: var(--faint); transition: transform 150ms ease-out; }
.tb-datum { font-size: 15px; line-height: 20px; font-weight: 600; }
.tb-datum small { display: block; color: var(--faint); font-size: 12px; line-height: 15px; font-weight: 400; font-variant-numeric: tabular-nums; }
.tb-heute .tb-datum { color: var(--volt); }
.tb-mitte { min-width: 0; display: grid; gap: 6px; }
.tb-titel { font-size: 15px; line-height: 21px; font-weight: 500; overflow-wrap: anywhere; }
.tb-chips { display: grid; grid-template-columns: 68px 128px auto; justify-content: start; gap: 4px 7px; color: var(--muted); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.tb-chip .icon { width: 14px; height: 14px; color: var(--faint); }
.tb-balken { display: inline-block; width: 35px; height: 4px; margin-left: 2px; border-radius: 2px; background: var(--raised); }
.tb-balken i { display: block; height: 100%; border-radius: 2px; background: var(--volt); }
.tb-inhalt { padding: 0 0 18px 53px; color: var(--muted); font-size: 15px; line-height: 22px; }
.tb-inhalt h3 { margin-top: 13px; color: var(--text); font-size: 14px; line-height: 20px; font-weight: 600; }
.tb-inhalt h3:first-child { margin-top: 0; }
.tb-inhalt h3 .icon { width: 15px; height: 15px; color: var(--muted); }
.tb-inhalt ul { margin-top: 4px; display: grid; gap: 3px; }
.tb-inhalt p { margin-top: 3px; }
.tb-werte { display: flex; flex-wrap: wrap; gap: 4px 15px; margin-top: 13px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.tb-werte .icon { width: 15px; height: 15px; }
.tb-hinweis { margin-top: 11px !important; color: var(--faint); font-size: 13px; line-height: 19px; }
.klappe p.hell + p { margin-top: 2px; }

/* Werte */
.werte-kopf { margin-top: 18px; }
.sprung { display: flex; gap: 7px; margin-top: 13px; overflow-x: auto; scrollbar-width: none; }
.sprung a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border-radius: 1099px; background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 500; transition: color 150ms ease-out; }
.sprung a:hover { color: var(--text); }
.widgets + .noch-leer, .noch-leer { margin-top: 11px; color: var(--faint); font-size: 14px; line-height: 20px; }
.abschnitt[id] { scroll-margin-top: 18px; }
.legende-eng { margin-top: 7px; }
.baustellen { display: grid; gap: 13px; margin-top: 13px; }
.baustelle { background: var(--surface); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }
.baustelle .ziel-zahl { margin-top: 9px; font-size: 48px; line-height: 51px; }
.baustelle-handlung { margin-top: 11px; font-size: 15px; line-height: 22px; }
.baustelle .wert-von { margin-top: 4px; }
.wert-kopf { display: flex; align-items: center; justify-content: space-between; gap: 9px; font-size: 14px; line-height: 20px; color: var(--muted); }
.wert-punkt { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.wert-punkt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--raised); }
.punkt-gut::before { background: var(--volt); }
.punkt-mittel::before { background: var(--pill-beobachten-ink); }
.punkt-schlecht::before { background: var(--pill-handeln-ink); }
.widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 13px; }
.widget { background: var(--surface); border-radius: var(--radius); padding: 15px; min-width: 0; }
.wert-oeffnen { display: grid; gap: 2px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wert-oeffnen .wert-kopf { transition: color 150ms ease-out; }
.wert-oeffnen:hover .wert-kopf { color: var(--text); }
.wert-karte { transition: background-color 150ms ease-out; }
.wert-karte:hover { background: #161616; }
.wert-dialog { margin: auto; width: min(616px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 22px; border: 0; border-radius: var(--radius); background: #161616; color: var(--text); overflow-y: auto; }
.wert-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.wert-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.wert-dialog-kopf h2 { font-size: 19px; line-height: 24px; font-weight: 600; }
.wert-schliessen { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: -11px -11px -11px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: color 150ms ease-out; }
.wert-schliessen:hover { color: var(--text); }
.wert-schliessen .icon { width: 22px; height: 22px; }
.wert-dialog-zahl { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-top: 9px; }
.wert-dialog-zahl .ziel-zahl { margin-top: 0; }
.wert-dialog-grafik { margin-top: 15px; padding-top: 31px; }
.wert-dialog-grafik .saeulen-klein, .wert-dialog-grafik .linie-klein { height: 165px; margin-top: 0; }
.wert-dialog .widget-mehr { margin-top: 18px; }
.wert-karte .saeule-info { left: 0; right: 0; transform: none; white-space: normal; }
.wert-dialog .saeule-info { white-space: nowrap; }
.wert-dialog .saeule-info.pos-l { left: 0; right: auto; }
.wert-dialog .saeule-info.pos-m { left: 50%; right: auto; transform: translateX(-50%); }
.wert-dialog .saeule-info.pos-r { left: auto; right: 0; }
.widget-name { min-width: 0; overflow-wrap: anywhere; }
.widget-zahl { font: 600 33px/37px var(--ziffern); font-variant-numeric: tabular-nums; }
.widget-zahl.leer { color: var(--faint); }
.widget-zahl small { margin-left: 3px; font: 400 12px/1 var(--schrift); color: var(--muted); }
.widget-notiz { min-height: 18px; color: var(--faint); font-size: 12px; line-height: 17px; }
.widget-mehr { margin-top: 11px; display: grid; gap: 4px; color: var(--muted); font-size: 14px; line-height: 20px; }
.widget-mehr b { color: var(--text); font-weight: 600; }
.widget-quelle { color: var(--faint); font-size: 13px; line-height: 19px; }
.saeulen-klein { height: 48px; gap: 1px; margin-top: 11px; }
.linie-klein { height: 48px; margin-top: 11px; }
.linie-klein .linie path { stroke-width: 1.5; }
.linie-klein .linie path.punkt { stroke: var(--volt); stroke-width: 3; }
.wert-leer { height: 48px; margin-top: 11px; border-bottom: 2px solid var(--rule); }
.saeule-stapel { flex-direction: column; justify-content: flex-end; align-items: stretch; }
.saeule-stapel i { border-radius: 0; flex: none; width: 100%; }
.st-locker { background: #6a6a6a !important; }
.st-mittel { background: var(--text) !important; }
.st-hart { background: var(--volt) !important; }

/* Erfolge */
.erfolg-kopf { margin-top: 18px; display: flex; align-items: center; gap: 16px; }
.erfolg-kopf-text { flex: 1; min-width: 0; }
.erfolg-kopf-text h2 { font-size: 18px; line-height: 24px; font-weight: 600; }
.erfolg-kopf .score-skala { margin-top: 10px; }
.naechstes { padding: 12px 0; border-top: 1px solid var(--rule); }
.naechstes-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 500; }
.naechstes-balken { margin-top: 8px; }
.abzeichen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 8px; margin-top: 14px; }
.abzeichen-knopf { justify-items: center; gap: 6px; text-align: center; }
.abzeichen-marke { position: relative; display: block; width: 62px; height: 70px; }
.abzeichen-marke svg { display: block; width: 100%; height: 100%; fill: var(--surface); stroke: var(--raised); stroke-width: 2; stroke-linejoin: round; }
.abzeichen-marke b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); font: 600 22px/1 var(--ziffern); }
.abzeichen.geschafft .abzeichen-marke svg { fill: var(--volt); stroke: var(--volt); }
.abzeichen.geschafft .abzeichen-marke b { color: #000; }
.abzeichen-titel { color: var(--faint); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
.abzeichen.geschafft .abzeichen-titel { color: var(--text); }
.wert-karte.abzeichen:hover { background: none; }
.abzeichen-knopf:hover .abzeichen-marke svg { stroke: var(--text); }
.wert-dialog-text { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 22px; }

/* Geld */
.titelzeile-mitte { align-items: center; }
.geld-raster { display: grid; gap: 14px; margin-top: 14px; }
.geld-raster > .abschnitt { margin-top: 22px; min-width: 0; }
.spalte-frei { min-width: 0; }
.spalte-frei > .abschnitt:first-child { margin-top: 22px; }
.geteilt { display: flex; height: 8px; margin-top: 12px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.geteilt-klein { display: flex; height: 5px; margin-top: 7px; }
.geteilt-a { background: var(--volt); }
.geteilt-b { background: var(--pill-beobachten-ink); }
.geteilt-volt { background: var(--volt); }
.geteilt-weiss { background: var(--text); }
.geteilt-rot { background: var(--pill-handeln-ink); }
.geteilt-grau { background: #8a8a8a; }
.geteilt i { display: block; height: 100%; }
.naechster-euro { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 14px 18px; border-radius: var(--radius); background: var(--surface); font-size: 15px; line-height: 22px; }
.naechster-euro .icon { margin-top: 3px; width: 18px; height: 18px; color: var(--volt); }
.naechster-euro b { font-weight: 600; }
.linie-gross { height: 180px; }
.linie path.linie-grau { stroke: #8a8a8a; stroke-width: 1.5; }
.saeulen-saldo, .saeulen-mittel { height: 150px; margin-top: 14px; gap: 3px; }
.saeulen-saldo .saeule { background: none; }
.saeulen-saldo .stapel i { background: var(--volt); min-height: 2px; border-radius: 2px; }
.saeulen-saldo .stapel i.minus { background: var(--pill-handeln-ink); }
.nulllinie { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #5a5a5a !important; text-decoration: none; }
.saeule i.ueber { background: var(--pill-beobachten-ink); }
.stapelbalken { display: flex; gap: 2px; height: 14px; margin-top: 12px; border-radius: 4px; overflow: hidden; }
.stapelbalken i { display: block; height: 100%; }
.stufe-0 { background: var(--volt); }
.stufe-1 { background: #e6e6e6; }
.stufe-2 { background: #a8a8a8; }
.stufe-3 { background: #6a6a6a; }
.stufe-4 { background: var(--pill-handeln-ink); }
.stufe-5 { background: var(--pill-beobachten-ink); }
.stufe-6 { background: #3d3d3d; }
.auf-liste { margin-top: 8px; }
.auf-text { display: block; color: var(--faint); font-size: 12px; line-height: 16px; font-weight: 400; }
.zeile-oben { align-items: flex-start; }
.monatswahl { display: grid; grid-template-columns: 44px auto 44px minmax(0, 1fr); align-items: center; margin-top: 12px; }
.monat-zurueck .pfeil { transform: rotate(180deg); }
.monat-name { font-size: 16px; font-weight: 600; text-align: center; white-space: nowrap; }
.monat-stand { justify-self: end; }
.topf-liste { display: grid; gap: 14px; margin-top: 14px; }
.kat-liste { margin-top: 8px; }
.kat { padding: 10px 0; border-top: 1px solid var(--rule); }
.kat .naechstes-kopf { display: flex; }
.kat-wert { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kat-wert small { color: var(--faint); font-size: 12px; font-weight: 400; }
.kat-ueber { color: var(--pill-handeln-ink); }
.wert-karte.kat:hover { background: none; }
.kat .wert-oeffnen:hover .naechstes-kopf > span:first-child { color: var(--muted); }
.wochenzahlen-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wert-dialog .zeile small { display: block; }

/* Geld, Tiefe */
.plus { color: var(--volt); }
.minus { color: var(--pill-handeln-ink); }
.warn { color: var(--pill-beobachten-ink); }
.meldung { margin-top: 16px; padding: 12px 18px; border-radius: var(--radius); background: var(--surface); font-size: 15px; line-height: 22px; }
.stand-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; }
.knopf-klein { min-height: 40px; margin-top: 0; padding: 0 16px; font-size: 14px; border: 0; cursor: pointer; }
.knopf { border: 0; cursor: pointer; font-family: inherit; }
.kopf-3 { font-size: 16px; line-height: 22px; font-weight: 600; }
.kopf-abstand { margin-top: 20px; }
.tabelle-rahmen { margin-top: 11px; overflow-x: auto; scrollbar-width: thin; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 21px; }
.tabelle th { padding: 8px 10px 8px 0; color: var(--faint); font-size: 13px; line-height: 18px; font-weight: 500; text-align: left; white-space: nowrap; }
.tabelle td { padding: 10px 10px 10px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.tabelle th:last-child, .tabelle td:last-child { padding-right: 0; }
.tabelle .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.breit-spalte { display: none; }
.tabelle-dicht { font-size: 13px; line-height: 18px; }
.tabelle-dicht td { padding: 8px 5px; }
.tabelle-dicht th { padding: 8px 5px; }
.matrix td:first-child, .matrix th:first-child { position: sticky; left: 0; z-index: 1; min-width: 150px; padding-left: 0; background: var(--ground); }
.matrix .wert-oeffnen { display: block; font-size: 13px; line-height: 18px; font-weight: 500; }
.matrix .wert-oeffnen:hover { color: var(--muted); }
.matrix .wert-karte:hover { background: none; }
.heat { background: color-mix(in srgb, var(--volt) calc(var(--h) * 34%), transparent); }
.matrix-summe { font-weight: 600; }
.bz-liste { margin-top: 8px; }
.bz { padding: 10px 0; border-top: 1px solid var(--rule); }
.bz .naechstes-kopf { font-weight: 400; }
.bz-name { min-width: 0; overflow-wrap: anywhere; }
.zeile > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.zeile small.auf-text { font-size: 12px; }
.auf-lang { font-size: 14px !important; line-height: 20px !important; color: var(--muted) !important; margin-top: 2px; }
.zeilen-scroll { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.zeile-still > span { color: var(--faint); }
.umh { cursor: pointer; transition: color 150ms ease-out; }
.umh:hover { color: var(--muted); }
.umh small.auf-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unterstrichen { text-decoration: underline; text-underline-offset: 3px; }
.zahl-text { font: 600 26px/42px var(--ziffern) !important; white-space: nowrap; }
.regler { display: grid; gap: 14px; margin-top: 14px; }
.regler label { display: grid; gap: 6px; font-size: 15px; }
.regler label span { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.regler output { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; height: 32px; margin: 0; accent-color: var(--volt); cursor: pointer; }
.linie-x { display: flex; justify-content: space-between; margin-top: 6px; color: var(--faint); font-size: 12px; line-height: 15px; }
.linie-marke { position: absolute; right: 0; margin-bottom: 3px; color: var(--faint); font-size: 12px; line-height: 15px; }
.linie path.linie-weiss { stroke: var(--text); stroke-width: 1.5; }
.linie path.linie-rot { stroke: var(--pill-handeln-ink); }
.hochladen { display: grid; gap: 12px; margin-top: var(--abstand); padding: 18px 22px; border-radius: var(--radius); background: var(--surface); }
.hochladen .knopf { margin-top: 0; justify-self: start; }
.datei { display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
.datei input { max-width: 100%; color: var(--text); font: inherit; font-size: 14px; }
.datei input::file-selector-button { min-height: 40px; margin-right: 12px; padding: 0 16px; border: 0; border-radius: 1099px; background: var(--raised); color: var(--text); font: 500 14px var(--schrift); cursor: pointer; }
.umh-dialog h2 { font-size: 19px; line-height: 24px; font-weight: 600; }
.umh-dialog .leise { margin-top: 6px; }
.feld { display: grid; gap: 6px; margin-top: 14px; color: var(--muted); font-size: 14px; }
.feld[hidden], #umh-m-h[hidden] { display: none; }
.feld select, .feld input { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--raised); border-radius: 9px; background: var(--ground); color: var(--text); font: 400 16px var(--schrift); }
.feld-haken { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 15px; line-height: 22px; cursor: pointer; }
.feld-haken input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--volt); }
.umh-status { min-height: 20px; }
.geld-raster-eben > * { min-width: 0; }

/* Geld, Ordnung: Gruppen, Karten, dichte Zeilen */
.gruppe { margin-top: 32px; font-size: 21px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; scroll-margin-top: 16px; }
.paar { display: grid; gap: 12px; margin-top: 12px; align-items: start; }
.paar > * { min-width: 0; }
.stapel-spalte { display: grid; gap: 12px; min-width: 0; }
.dreier { display: grid; gap: 12px; margin-top: 14px; align-items: start; }
.dreier > * { min-width: 0; }
.dreier-frei { margin-top: 18px; gap: 22px; }
.abstand-oben { margin-top: 12px !important; }
.abschnitt-eng[id], .paar[id], .ziel[id] { scroll-margin-top: 16px; }
.ziel-kopf h3 { font-size: 17px; line-height: 23px; font-weight: 600; }
.ziel-kopf .icon, .abschnitt-kopf .icon, .kopf-3 .icon, .kopf-4 .icon { width: 19px; height: 19px; color: var(--muted); }
.ziel-kopf .leise { flex: none; max-width: 50%; text-align: right; font-size: 13px; line-height: 18px; }
.kopf-3 { display: flex; }
.kopf-4 { display: flex; margin-top: 18px; font-size: 14px; line-height: 20px; font-weight: 600; }
.wert-label .icon { width: 15px; height: 15px; color: var(--faint); }
.zahlen-kopf { margin-top: 16px; }
.zahlen-eng { margin-top: 12px; gap: 14px; }
.zahlen-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 12px; }
.zahlen-2 b { display: block; margin-top: 1px; font: 600 31px/35px var(--ziffern); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zahlen-2 b small { margin-left: 3px; font: 400 13px/1 var(--schrift); color: var(--muted); }
.zahlen-2 .wert-label { font-size: 13px; line-height: 18px; }
.zahlen-2 .zahl-text { font: 600 24px/35px var(--ziffern) !important; }
.ziel .linie-gross { height: 120px; margin-top: 14px; }
.ziel .saeulen-saldo, .ziel .saeulen-mittel { height: 100px; margin-top: 14px; }
.dreier-frei .linie-gross, .dreier-frei .saeulen-mittel { height: 110px; margin-top: 12px; }
.linie-rahmen .saeulen-bedienung { margin: 0; }
.ziel-stein-klein { margin-top: 8px; font-size: 13px; line-height: 18px; }
.hinweis { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 19px; }
.hinweis > summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--faint); text-decoration: underline; text-decoration-color: var(--raised); text-underline-offset: 3px; transition: color 150ms ease-out; }
.hinweis > summary:hover { color: var(--text); }
.hinweis > p { margin-top: 6px; max-width: 72ch; }
.hinweis .tabelle-rahmen { margin-top: 4px; }
.hinweis .zeilen { margin-top: 4px; }
.regler { gap: 6px; margin-top: 10px; }
.regler label { gap: 0; font-size: 14px; }
input[type="range"] { height: 26px; }
.zeilen.dicht, .dicht { margin-top: 8px; }
.dicht .zeile { padding: 6px 0; font-size: 14px; line-height: 20px; }
.dicht .zeile > span:last-child:not(:first-child) { max-width: none; }
.dicht .zeile small { color: var(--faint); font-size: 12px; margin-right: 6px; }
.dicht .zeile small.warn { color: var(--pill-beobachten-ink); }
.dicht .mit-icon { min-width: 0; }
.dicht .mit-icon .icon { width: 16px; height: 16px; color: var(--faint); }
.dicht .zeile-still .icon { opacity: .6; }
.ellipse { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dicht .zeile > span.ellipse, .dicht .zeile > span.mit-icon { flex: 1 1 0; }
.zeile-drei { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; gap: 12px; }
.zeile-drei > .leise { font-size: 12px; line-height: 20px; }
.bz-liste { margin-top: 8px; }
.bz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(36px, 20%) 104px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 20px; }
.bz .geteilt { margin-top: 0; }
.bz-unter { grid-column: 1 / -1; margin-top: -8px; color: var(--faint); font-size: 12px; line-height: 15px; }
.bz-wert { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.bz-wert small { margin-left: 6px; color: var(--faint); font-size: 12px; line-height: 15px; font-weight: 400; }
.div-liste { margin-top: 8px; }
.div-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 2px 10px; padding: 5px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 19px; align-items: center; }
.div-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.div-spur { grid-column: 1 / -1; grid-row: 2; position: relative; display: block; height: 5px; border-radius: 3px; background: var(--raised); }
.div-spur::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #6a6a6a; }
.div-spur i { position: absolute; top: 0; bottom: 0; }
.div-spur i.rechts { left: 50%; border-radius: 0 3px 3px 0; background: var(--volt); }
.div-spur i.links { right: 50%; border-radius: 3px 0 0 3px; background: var(--pill-handeln-ink); }
.div-wert { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.depotleiste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.depotleiste a { display: grid; gap: 1px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); font-size: 14px; color: var(--muted); transition: background-color 150ms ease-out; }
.depotleiste a:hover { background: #1a1a1a; }
.depotleiste .icon { width: 17px; height: 17px; }
.depotleiste b { color: var(--text); font: 600 29px/33px var(--ziffern); font-variant-numeric: tabular-nums; }
.depotleiste small { color: var(--faint); font-size: 12px; line-height: 16px; }
.depot { margin-top: 12px; padding: 0 20px; border-radius: var(--radius); background: var(--surface); scroll-margin-top: 16px; }
.depot > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 15px; gap: 12px; align-items: center; min-height: 58px; padding: 10px 0; }
.depot > summary > .pfeil { color: var(--faint); transition: transform 150ms ease-out; }
.depot[open] > summary > .pfeil { transform: rotate(90deg); }
.depot[open] { padding-bottom: 12px; }
.depot-name { font-size: 16px; line-height: 22px; font-weight: 600; min-width: 0; align-items: flex-start; }
.depot-name .icon { width: 19px; height: 19px; margin-top: 2px; color: var(--muted); }
.depot-name .auf-text { font-size: 12px; }
.depot-summe { text-align: right; font: 600 22px/26px var(--ziffern); font-variant-numeric: tabular-nums; white-space: nowrap; }
.depot-summe small { display: block; color: var(--faint); font: 400 12px/15px var(--schrift); }
.depot .tabelle-rahmen { margin-top: 0; }
.tabelle-eng { font-size: 14px; line-height: 19px; }
.tabelle-eng th { padding: 5px 10px 5px 0; font-size: 12px; line-height: 16px; }
.tabelle-eng td { padding: 6px 10px 6px 0; vertical-align: baseline; }
.tabelle-eng .ampel-punkt { display: inline-block; width: 9px; height: 9px; }
.tabelle-eng .mit-icon { gap: 6px; }
.matrix .wert-oeffnen .icon { width: 15px; height: 15px; margin-right: 1px; color: var(--faint); }
.matrix .wert-oeffnen { display: flex; align-items: center; gap: 6px; }
.matrix td:first-child, .matrix th:first-child { min-width: 170px; }
.kat-zeile { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) minmax(40px, 22%) 118px; gap: 9px; align-items: center; }
.kat-zeile .icon { width: 17px; height: 17px; color: var(--muted); }
.kat-zeile .geteilt { margin-top: 0; }
.kat-name { min-width: 0; font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kat { padding: 8px 0; }
.kat-zeile .kat-wert { font-size: 14px; line-height: 20px; text-align: right; }
.kat-zeile .kat-wert small { display: inline; }
.topf-liste { gap: 10px; }
.topf .icon { width: 16px; height: 16px; color: var(--muted); }
.hochladen { margin-top: 12px; padding: 14px 16px; background: #171717; gap: 10px; }
.hochladen p.leise { font-size: 13px; line-height: 18px; margin-top: 2px; }
.hochladen .knopf-klein { justify-self: start; }
.hochladen-zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 10px; }
.hochladen-zeile .knopf { margin-top: 0; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.knopf.mit-icon { display: inline-flex; }
.knopf .icon { width: 16px; height: 16px; }
.wert-dialog .kopf-4 .icon { width: 17px; height: 17px; }

.dicht .zeile small.takt { margin-right: 0; }
.dicht .zeile small.auf-text { margin-right: 0; }
.dicht .zeile > span:last-child:not(:first-child) small.auf-text { text-align: right; }
/* Achsen: Platz links für Werte, unten für die Zeit, Hilfslinien leise, Bezugslinien beschriftet */
.mit-achse { margin-left: 50px; margin-bottom: 22px; }
.mit-achse-x { margin-bottom: 22px; }
.ziel .mit-achse, .dreier-frei .mit-achse { margin-bottom: 22px; }
u.gitter { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #1f1f1f !important; text-decoration: none; pointer-events: none; }
.ziel u.gitter { border-top-color: #262626 !important; }
.achse-y { position: absolute; right: calc(100% + 6px); transform: translateY(50%); color: var(--faint); font-size: 11px; line-height: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.achse-x { position: absolute; top: calc(100% + 5px); color: var(--faint); font-size: 11px; line-height: 13px; white-space: nowrap; pointer-events: none; }
.x-mitte { transform: translateX(-50%); }
.x-ende { transform: translateX(-100%); }
.saeulen .x-start { transform: translateX(-50%); }
.saeulen .x-ende { transform: translateX(-50%); }
.saeulen-mittel .x-start, .saeulen-saldo .x-start, .saeulen-leiter .x-start { left: 0 !important; transform: none; }
.saeulen-mittel .x-ende, .saeulen-saldo .x-ende, .saeulen-leiter .x-ende { left: auto !important; right: 0; transform: none; }
u.bezug { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #9a9a9a !important; text-decoration: none; pointer-events: none; z-index: 1; }
.bezug-text { position: absolute; right: 0; z-index: 1; margin-bottom: 2px; padding: 0 4px; border-radius: 3px; background: rgba(0, 0, 0, .72); color: var(--text); font-size: 11px; line-height: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.bezug-unter { margin-bottom: 0; transform: translateY(calc(100% + 2px)); }
.bezug-klein { font-size: 10px; line-height: 13px; padding: 0 3px; background: rgba(0, 0, 0, .85); color: var(--text); z-index: 3; }
.saeule { position: relative; z-index: 2; }
.saeulen > .saeule { position: static; }
.saeulen-bedienung { z-index: 2; }
.werte .saeulen { height: 62px; }
.tag-reihe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 4px; color: var(--faint); font-size: 10px; line-height: 12px; text-align: center; }
/* Werte: im Widget zählt die Form, im Modal alle Achsen */
.wert-karte .achse-y, .wert-karte .achse-x, .wert-karte u.gitter { display: none; }
.wert-karte .bezug-text { font-size: 10px; line-height: 13px; }
.wert-dialog .saeulen-klein, .wert-dialog .linie-klein { margin-left: 50px; margin-bottom: 22px; }
.zeitraum { display: inline-flex; flex: none; align-items: center; gap: 1px; padding: 2px; border-radius: 1099px; background: var(--surface); font-variant-numeric: tabular-nums; }
.ziel .zeitraum, .depot .zeitraum, .wert-karte .zeitraum { background: #1e1e1e; }
.zeitraum > a, .zeitraum-frei > summary { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 32px; min-height: 28px; padding: 0 8px; border-radius: 1099px; color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; transition: color 150ms ease-out, background-color 150ms ease-out; }
.zeitraum > a:hover, .zeitraum-frei > summary:hover { color: var(--text); }
.zeitraum > a[aria-current], .zeitraum-frei > summary[aria-current] { background: var(--raised); color: var(--text); }
.ziel .zeitraum > a[aria-current], .ziel .zeitraum-frei > summary[aria-current] { background: #3a3a3a; }
.zeitraum-frei { position: relative; }
.zeitraum-frei > summary .icon { width: 14px; height: 14px; }
.zeitraum-frei[open] > summary { color: var(--text); }
.zeitraum-frei form { position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; display: grid; gap: 10px; width: 210px; padding: 14px; border-radius: 12px; background: #1c1c1c; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.zeitraum-frei label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; line-height: 16px; }
.zeitraum-frei input { width: 100%; min-height: 38px; padding: 0 8px; border: 1px solid #333; border-radius: 8px; background: var(--ground); color: var(--text); color-scheme: dark; font: 400 14px var(--schrift); }
.zeitraum-frei .knopf { justify-self: stretch; margin-top: 2px; }
.fazit-plan { margin-top: 10px; font-size: 15px; line-height: 22px; }
.fluss { margin-top: 14px; }
.fluss-zahlen { display: grid; gap: 16px; margin-top: 12px; }
.fluss-teil { display: grid; align-content: start; min-width: 0; }
.fluss-name { color: var(--muted); font-size: 14px; line-height: 20px; }
.fluss-zahl { font: 600 38px/44px var(--ziffern); font-variant-numeric: tabular-nums; }
.fluss-zahl small { margin-left: 4px; color: var(--muted); font: 400 14px/1 var(--schrift); }
.fluss-teile { display: flex; flex-wrap: wrap; gap: 0 12px; color: var(--muted); font-size: 13px; line-height: 19px; }
.fluss-jahr { margin-top: 14px; padding-top: 12px; border-top: 1px solid #262626; font-size: 14px; line-height: 20px; }
.fluss-mehr { margin-top: 2px; }
.fluss-mehr > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 14px; line-height: 20px; cursor: pointer; list-style: none; }
.fluss-mehr > summary::-webkit-details-marker { display: none; }
.fluss-mehr > summary .icon { flex: none; transform: rotate(90deg); transition: transform 150ms ease-out; }
.fluss-mehr[open] > summary .icon { transform: rotate(-90deg); }
@media (max-width: 999px) {
  .fluss-teil { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
  .fluss-zahl { font-size: 30px; line-height: 36px; }
  .fluss-teile { grid-column: 1 / -1; }
}
@media (min-width: 1000px) { .fluss-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.kopf-zeitraum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 32px; scroll-margin-top: 16px; }
.kopf-zeitraum .gruppe { margin-top: 0; }
.kopf-zeitraum + .geld-raster-weit > .abschnitt { margin-top: 14px; }
.zeile-zeitraum { display: flex; justify-content: flex-end; margin-top: 12px; }
.zeile-zeitraum-text { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.abschnitt-kopf:has(.zeitraum), .ziel-kopf:has(.zeitraum) { flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.im-zeitraum { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 2px; }
.im-zeitraum span { display: block; color: var(--faint); font-size: 12px; line-height: 16px; }
.im-zeitraum b { font: 600 24px/28px var(--ziffern); font-variant-numeric: tabular-nums; }
.dr-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-top: 28px; }
.dr-kopf .leise { margin-top: 4px; max-width: 80ch; }
.dr-kopf .knopf { margin-top: 0; flex: none; }
.klassen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 12px; }
.klassen span { color: var(--muted); font-size: 13px; line-height: 18px; }
.klassen b { display: block; font: 600 26px/30px var(--ziffern); font-variant-numeric: tabular-nums; }
.klassen small { color: var(--faint); font-size: 12px; }
.klasse-0 { background: var(--volt); }
.klasse-1 { background: var(--pill-beobachten-ink); }
.klasse-2 { background: #8a8a8a; }
.klasse-3 { background: var(--pill-handeln-ink); }
.vg-kopf, .vg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 26%) 38px 38px; gap: 8px; align-items: center; }
.vg-kopf { margin-top: 8px; color: var(--faint); font-size: 11px; line-height: 14px; text-align: right; }
.vg { padding: 5px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 19px; }
.vg-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vg-spur { position: relative; display: block; height: 7px; border-radius: 2px; background: var(--raised); }
.vg-spur i { display: block; height: 100%; border-radius: 2px; background: var(--text); }
.vg-spur u { position: absolute; top: -3px; width: 2px; height: 13px; margin-left: -1px; background: var(--volt); text-decoration: none; }
.vg-du { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.vg-welt { text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; }
.vg-rest .vg-name, .vg-rest .vg-du { color: var(--faint); font-weight: 400; }
.vg-rest .vg-spur i { background: #5a5a5a; }
.kurz { margin-top: 16px; padding: 16px 20px; border-radius: var(--radius); background: var(--surface); }
.kurz h2 { font-size: 17px; line-height: 23px; font-weight: 600; }
.kurz .icon { width: 19px; height: 19px; color: var(--muted); }
.kurz ul { display: grid; gap: 7px; margin-top: 8px; }
.kurz li { position: relative; padding-left: 14px; font-size: 15px; line-height: 22px; }
.kurz li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--volt); }
.fazit { margin-top: 8px; font-size: 15px; line-height: 21px; font-weight: 500; }
.blick { margin-top: 12px; padding: 16px 20px 10px; border-radius: var(--radius); background: var(--surface); scroll-margin-top: 16px; }
.blick .ziel-kopf h2 { font-size: 17px; line-height: 23px; }
.blick-punkt { border-top: 1px solid #222; }
.blick-punkt:first-of-type { margin-top: 10px; }
.blick-punkt > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 15px; gap: 4px 10px; align-items: center; padding: 9px 0; }
.blick-titel { align-items: flex-start; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.blick-titel .icon { width: 17px; height: 17px; margin-top: 1px; color: var(--muted); }
.blick-wert { grid-column: 1; grid-row: 2; margin-left: 24px; color: var(--muted); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.blick-punkt .stufe { grid-column: 2; grid-row: 1; }
.blick-punkt > summary > .pfeil { grid-column: 3; grid-row: 1; color: var(--faint); transition: transform 150ms ease-out; }
.blick-punkt[open] > summary > .pfeil { transform: rotate(90deg); }
.blick-mehr { display: grid; gap: 5px; padding: 0 0 12px 24px; max-width: 80ch; font-size: 14px; line-height: 20px; color: var(--muted); }
.blick-mehr b { color: var(--text); font-weight: 500; }
.blick-mehr .leise { font-size: 12px; line-height: 17px; }
.blick-link { color: var(--text); transition: background-color 150ms ease-out; }
.blick-link:hover { background: #1a1a1a; }
.blick-link .pfeil { margin-left: auto; margin-top: 4px; color: var(--faint); }
.linie path.linie-eingezahlt { stroke: #e8e8e8; stroke-width: 1.5; }
.geteilt-hell { background: #e8e8e8; }
.saeulen-kauf .saeule i { min-height: 4px; }
.saeule i.kauf-plus { background: var(--volt); }
.saeule i.kauf-minus { background: var(--pill-handeln-ink); }
.saeulen-kauf .saeule:hover i.kauf-plus, .saeulen-kauf .saeule:focus i.kauf-plus { background: #d9ff6a; }
.saeulen-kauf .saeule:hover i.kauf-minus, .saeulen-kauf .saeule:focus i.kauf-minus { background: #ff94a6; }
.zeilen-scroll-hoch { max-height: 380px; overflow-y: auto; }
.zeilen-scroll-hoch thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.news-gruppe { padding: 10px 0; border-top: 1px solid #222; }
.news-gruppe:first-of-type { margin-top: 10px; }
.news-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.news-kopf b { font-size: 14px; font-weight: 600; }
.news-kopf .leise { font-size: 12px; line-height: 17px; }
.news-zeile { display: block; padding: 4px 0; font-size: 14px; line-height: 20px; transition: color 150ms ease-out; }
.news-zeile:hover { color: var(--muted); }
.news-zeile small { display: block; color: var(--faint); font-size: 12px; line-height: 16px; }
.fonds-kopf { margin-top: 14px; }
.fonds-kopf .kopf-link { min-height: 32px; }
.gruppe-eng { margin-top: 4px; }
.fonds-link { text-decoration: underline; text-decoration-color: #3a3a3a; text-underline-offset: 3px; transition: text-decoration-color 150ms ease-out; }
.fonds-link:hover { text-decoration-color: var(--text); }
.abdeckung { margin-top: 12px; }
.abdeckung .leise { margin-top: 8px; max-width: 90ch; }
.abdeckung .knopf { margin-top: 10px; }
.abstand-knopf { margin-top: 12px; }
.abstand-klein { margin-top: 8px; }
.wert-lang { max-width: 62% !important; text-align: right; overflow-wrap: anywhere; }
.zwei-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.suche { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 4px 6px 4px 14px; border-radius: 1099px; background: var(--surface); }
.suche .icon { color: var(--muted); }
.suche input { flex: 1; min-width: 0; min-height: 40px; border: 0; background: none; color: var(--text); font: 400 15px var(--schrift); outline: none; }
.suche input::placeholder { color: var(--faint); }
.suche .knopf { margin-top: 0; }
.seiten { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.seiten .knopf { margin-top: 0; }
.seiten .knopf, .abstand-knopf { display: inline-flex; }
@media (max-width: 999px) {
  .kat-zeile { grid-template-columns: 18px minmax(0, 1fr) 52px 54px; }
  .kat-zeile .kat-wert small { display: none; }
}

/* Schattenbetrieb */
.regel { border-top: 1px solid var(--rule); }
.regel > summary { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 53px; padding: 9px 0; font-size: 15px; }
.regel-nr { color: var(--faint); font-size: 13px; }
.regel-text { padding: 0 0 15px 37px; color: var(--muted); font-size: 14px; line-height: 21px; }
.regel-text p + p { margin-top: 4px; }
.regel-text b { color: var(--text); font-weight: 500; }

@media (min-width: 1000px) {
  .rahmen { display: grid; grid-template-columns: 242px minmax(0, 1fr); }
  .nav { position: sticky; top: 0; inset: auto; height: 100dvh; border-top: 0; border-right: 1px solid var(--rule); padding: 22px 13px; }
  .nav-marke { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; padding: 4px 11px 22px; }
  .nav-marke svg { width: 22px; height: 22px; stroke: var(--text); fill: none; stroke-width: 1.6; }
  .nav-liste { display: block; height: auto; }
  .nav-link { display: flex; justify-content: flex-start; align-items: center; gap: 11px; min-height: 42px; padding: 0 11px; font-size: 15px; line-height: 22px; }
  .nav-link .icon { width: 20px; height: 20px; }
  .seite { max-width: 1364px; padding: 31px 40px 70px; margin: 0; }
  .kopf-marke { display: none; }
  .kopf { justify-content: flex-end; }
  .hero { grid-template-columns: minmax(0, 1fr) 286px; }
  .route svg { max-height: 264px; }
  .bereiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .bereich-karte { grid-row: span 2; margin: 0; }
  .bereich-karte + .bereich { padding-top: 0; }
  .ausnahme { grid-column: 2; }
  .ziele { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wochenzahlen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stellen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
  .widgets { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .baustellen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .geld-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
  .geld-raster-weit { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .auf-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
  .auf-liste-zeilen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
  .regler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
  .breit-spalte { display: table-cell; }
  .schmal-spalte { display: none !important; }
  .hochladen { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; }
  .paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paar-weit { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .dreier { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .depotleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .klassen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .auf-liste.dicht { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
  .auf-liste.dicht .zeile { padding: 7px 0; }
  .wochenzahlen-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .breit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
  .breit > .spalte + .abschnitt { margin-top: 0; }
  .breit > .spalte > :first-child { margin-top: 22px; }
  .linkliste a.nur-desktop { display: flex; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* Content */
.content-werkzeuge { display: flex; align-items: center; gap: 8px; }
.content-rad { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--raised); color: var(--text); }
.content-rad:hover { background: #363636; }
.content-rad .icon { width: 18px; height: 18px; }
.content-fehler { margin-top: 12px; }
.content-fehler .icon { color: var(--pill-handeln-ink); }
.c-titel { display: block; margin-top: 12px; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.c-titel:hover { color: var(--muted); }
.ct-liste { margin-top: 8px; }
.ct-row { display: grid; grid-template-columns: 74px 36px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.ct-row[hidden], .ct-week[hidden], .fd-card[hidden], [id$="-leer"][hidden], #v-mediathek[hidden], #v-fundus[hidden] { display: none; }
.ct-datum { color: var(--muted); font-size: 13px; line-height: 18px; white-space: nowrap; }
.ct-heute .ct-datum { color: var(--volt); font-weight: 600; }
.ct-bild { display: block; width: 36px; height: 45px; border-radius: 5px; background: var(--raised); overflow: hidden; flex: none; }
.ct-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-bild-klein { width: 28px; height: 35px; }
.ct-titel { min-width: 0; font-size: 15px; line-height: 20px; }
.ct-titel b { display: block; font-weight: 500; }
.ct-titel small { display: block; color: var(--faint); font-size: 12px; line-height: 16px; }
.ct-titel:hover b { color: var(--muted); }
.ct-kanaele { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.kchip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 1099px; background: var(--raised); color: var(--text); font: 500 12px/16px var(--schrift); white-space: nowrap; cursor: pointer; }
.kchip:hover { background: #363636; }
.kchip i { color: var(--muted); font-style: normal; font-weight: 400; }
.kchip-gepostet i { color: var(--volt); }
.kchip-produziert i { color: var(--text); }
.kchip-spaet { background: var(--pill-handeln-bg); }
.kchip-spaet i { color: var(--pill-handeln-ink); }
.kchip-verworfen { opacity: 1; color: var(--faint); }
@media (max-width: 999px) {
  .ct-row { grid-template-columns: 36px minmax(0, 1fr); }
  .ct-datum { grid-column: 1 / -1; }
  .ct-kanaele { grid-column: 1 / -1; justify-content: flex-start; }
}
.filterzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 14px; }
.filter { display: inline-flex; max-width: 100%; gap: 2px; padding: 2px; border-radius: 1099px; background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.filter button { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 1099px; background: none; color: var(--muted); font: 500 13px/18px var(--schrift); cursor: pointer; }
.filter button:hover { color: var(--text); }
.filter button[aria-pressed="true"] { background: var(--raised); color: var(--text); }
.filter small { color: var(--faint); font-size: 12px; }
.filter-haken { margin-top: 0; color: var(--muted); font-size: 14px; }
.sprung-eng { margin-top: 0; }
.sprung a[aria-current="page"] { background: var(--raised); color: var(--text); }
.knopfreihe-eng { display: flex; flex-wrap: wrap; gap: 8px; }
.suchfeld { flex: 1 1 220px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 1099px; background: var(--surface); color: var(--text); font: 400 14px var(--schrift); }
.suchfeld::placeholder { color: var(--faint); }
.fd-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 14px; }
.fd-card { display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.fd-alt { opacity: .55; }
.fd-vor { display: flex; align-items: center; justify-content: center; height: 120px; background: #1a1a1a; color: var(--faint); font-size: 13px; overflow: hidden; }
.fd-vor img, .fd-vor video { width: 100%; height: 100%; object-fit: cover; }
.schrift-probe { color: var(--text); font-size: 44px; }
.ton { gap: 10px; padding: 0 14px; }
.ton-play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--raised); color: var(--text); cursor: pointer; }
.ton-play svg { width: 18px; height: 18px; fill: currentColor; }
.ton-play .i-pause, .spielt .ton-play .i-play { display: none; }
.spielt .ton-play .i-pause { display: inline; }
.ton-bar { flex: 1; height: 4px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.ton-bar i { display: block; width: 0; height: 100%; background: var(--volt); }
.ton-zeit { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; }
.fd-text { flex: 1; padding: 12px 14px 0; }
.fd-text b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.fd-text p { display: -webkit-box; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 18px; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fd-text small { display: block; margin-top: 6px; color: var(--faint); font-size: 12px; line-height: 16px; }
.fd-akt { display: flex; gap: 14px; padding: 8px 14px 10px; font-size: 13px; }
.fd-akt a, .fd-akt button { min-height: 32px; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: var(--muted); font: 500 13px var(--schrift); cursor: pointer; }
.fd-akt a:hover, .fd-akt button:hover { color: var(--text); }
#md-panel.drop { outline: 1px dashed var(--volt); outline-offset: 6px; border-radius: var(--radius); }
.feld-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.feld textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--raised); border-radius: 9px; background: var(--ground); color: var(--text); font: 400 16px/22px var(--schrift); resize: vertical; }
.dialog-knoepfe { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dialog-weg { margin-right: auto; color: var(--pill-handeln-ink); }
.dialog-knoepfe .st { margin-right: auto; font-size: 13px; }
.caption-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 14px; }
.caption { margin-top: 8px; padding: 12px; border-radius: 9px; background: var(--ground); font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }
.caption-knopf { margin-top: 8px; }
.kd-zahlen { margin-top: 12px; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 19px; }
.kd-zahlen[hidden] { display: none; }
.zp { display: flex; align-items: flex-start; gap: 10px; min-width: 220px; }
.st-reihe { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.st-reihe figure { flex: none; width: 110px; font-size: 12px; line-height: 16px; color: var(--muted); }
.st-reihe b { display: block; color: var(--text); font-weight: 600; }
.st-bild { display: block; width: 110px; height: 190px; margin-bottom: 6px; border-radius: 9px; background: var(--raised); overflow: hidden; }
.st-bild img { width: 100%; height: 100%; object-fit: cover; }
.zurueck-link .pfeil { transform: rotate(180deg); }
.post-titel { margin-top: 2px; font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -.015em; }
.post-raster { display: grid; gap: 14px; margin-top: 16px; align-items: start; }
.post-haupt, .post-seite { display: grid; gap: 14px; min-width: 0; }
.post-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 12px 16px; margin-top: 12px; }
.post-zahlen .wert-label { font-size: 13px; line-height: 18px; }
.post-zahlen b { display: block; font: 600 26px/30px var(--ziffern); font-variant-numeric: tabular-nums; }
.post-zahlen b small { margin-left: 2px; color: var(--muted); font: 400 13px/1 var(--schrift); }
.post-notiz { padding: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ziel > .post-notiz { padding: 10px 0 0; }
.post-bild { display: block; width: 110px; height: auto; margin-top: 12px; border-radius: 9px; }
.prosa { margin-top: 10px; font-size: 15px; line-height: 23px; overflow-wrap: anywhere; }
.prosa h2 { margin-top: 20px; font-size: 17px; line-height: 23px; font-weight: 600; }
.prosa h3, .prosa h4 { margin-top: 16px; font-size: 15px; line-height: 21px; font-weight: 600; }
.prosa p, .prosa ul, .prosa ol, .prosa table, .prosa blockquote { margin-top: 8px; }
.prosa ul, .prosa ol { padding-left: 20px; }
.prosa li { margin-top: 4px; }
.prosa a { text-decoration: underline; text-underline-offset: 2px; }
.prosa blockquote { padding-left: 12px; border-left: 2px solid var(--raised); color: var(--muted); }
.prosa table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prosa th { color: var(--faint); font-weight: 500; text-align: left; }
.prosa th, .prosa td { padding: 8px 10px 8px 0; border-top: 1px solid var(--rule); vertical-align: top; }
@media (min-width: 1000px) { .post-raster { grid-template-columns: minmax(0, 1fr) 380px; } .post-seite { position: sticky; top: 16px; } }
.content-drei, .content-zwei { display: grid; gap: 12px; margin-top: 12px; align-items: stretch; }
.content-drei > *, .content-zwei > * { min-width: 0; }
.content-eins { margin-top: 12px; }
.tabelle-mitte td { vertical-align: middle; }
.tabelle th button { all: unset; cursor: pointer; }
.tabelle th button:hover { color: var(--text); }
.kopf-link { white-space: nowrap; flex: none; }
@media (min-width: 1000px) { .content-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feld-haken[hidden] { display: none; }

/* Übungen, Pläne, Einstellungen, Grafik-Studio */
.ue-lead { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 22px; max-width: 70ch; }
.ue-stand { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin: 16px calc(var(--gutter) * -1) 0; padding: 12px var(--gutter); background: var(--ground); border-bottom: 1px solid var(--rule); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ue-stand .balken { margin: 0; height: 6px; border-radius: 1099px; background: var(--raised); overflow: hidden; }
.ue-stand .balken i { display: block; height: 100%; background: var(--volt); transition: width 150ms ease-out; }
.ue-ziel { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 22px; }
.ue { padding: 22px 0; border-top: 1px solid var(--rule); scroll-margin-top: 60px; }
.ue-block > .abschnitt-kopf + .ue, .ue-block > .ue-ziel + .ue { margin-top: 12px; }
.ue-clip { display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; aspect-ratio: 4 / 3; }
.ue-clip video { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; background: #000; }
.ue-text { min-width: 0; }
.ue-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 14px; }
.ue h3 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.ue-dosis { margin-top: 2px; font-size: 15px; line-height: 22px; font-weight: 500; }
.ue-haken { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 1099px; background: var(--raised); color: var(--faint); cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out; }
.ue-haken svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ue-haken:hover { color: var(--text); }
.ue-haken[aria-pressed="true"] { background: var(--volt); color: #000; }
.ue-erledigt .ue-clip { opacity: .45; }
.ue-erledigt h3 { color: var(--muted); }
.ue-muskel { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 20px; }
.ue-muskel i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--volt); transform: translateY(1px); }
.ue-ablauf { margin-top: 12px; padding: 0; list-style: none; counter-reset: ue; font-size: 15px; line-height: 22px; }
.ue-ablauf li { position: relative; padding: 0 0 8px 26px; counter-increment: ue; }
.ue-ablauf li::before { content: counter(ue); position: absolute; left: 0; color: var(--faint); font-variant-numeric: tabular-nums; }
.ue-hinweis { color: var(--muted); font-size: 14px; line-height: 20px; }
.ue-hinweis a, .ue-ablauf a { text-decoration: underline; text-underline-offset: 3px; }
.ue-zuletzt { margin-top: 8px; color: var(--faint); font-size: 13px; line-height: 18px; }
.ue b { font-weight: 600; }

.plan-zeile { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0; border-top: 1px solid var(--rule); }
.plan-zeile h2 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.plan-zeile p { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 22px; }
.plan-zeile .plan-meta { color: var(--faint); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.plan-zeile .pfeil { flex: none; }
.plan-zeile:hover h2 { color: var(--muted); }

.pool-steuer { display: grid; gap: 10px; margin-top: 16px; min-width: 0; }
.pool-steuer .suchfeld { width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 1099px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; }
.pool-chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 2px; scrollbar-width: none; }
.pool-chips::-webkit-scrollbar { display: none; }
.pool-chips button { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 1099px; background: var(--surface); color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: color 150ms ease-out; }
.pool-chips button:hover { color: var(--text); }
.pool-chips button[aria-pressed="true"] { background: var(--raised); color: var(--text); }
.pool-block[hidden], .pool-zeile[hidden] { display: none; }
.pool-zeile { border-top: 1px solid var(--rule); }
.pool-zeile > summary { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 80px; padding: 4px 0; }
.pool-zeile > summary img { display: block; width: 96px; height: 72px; object-fit: contain; background: #000; }
.pool-name { display: grid; gap: 1px; min-width: 0; }
.pool-name b { font-weight: 500; font-size: 16px; line-height: 22px; }
.pool-name small { color: var(--faint); font-size: 13px; line-height: 18px; }
.pool-zeile > summary .pfeil { transition: transform 150ms ease-out; }
.pool-zeile[open] > summary .pfeil { transform: rotate(90deg); }
.pool-zeile .ue { padding-top: 6px; border-top: 0; }

.pa-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.pa-feld { display: grid; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 18px; }
.pa-zeile .pa-feld { margin-top: 0; }
.pa input[type="date"], .pa input[type="number"], .pa input[type="text"], .pa textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; color-scheme: dark; }
.pa-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 0; border: 0; }
.pa-wahl legend { width: 100%; padding: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 18px; }
.pa-wahl label { cursor: pointer; }
.pa-wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.pa-wahl span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 1099px; background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 500; transition: color 150ms ease-out; }
.pa-wahl input:checked + span { background: var(--text); color: #000; }
.pa-wahl input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.pa-wahl-klein { margin-top: 8px; }
.pa-wahl-klein span { min-height: 40px; padding: 0 12px; font-size: 13px; }
.pa-ue { padding: 14px 0; border-top: 1px solid var(--rule); color: var(--text); }
.pa-ue b { font-weight: 500; font-size: 15px; }
.pa-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.pa-fuss .knopf { margin-top: 0; border: 0; cursor: pointer; font-family: inherit; }
.pa-fuss span { color: var(--muted); font-size: 14px; }
.pa-verlauf li { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pa-verlauf li b { color: var(--text); font-weight: 500; }

.einst > p { margin-top: 10px; font-size: 15px; line-height: 22px; }
.einst > p b { font-weight: 600; }
.einst .einst-meta { color: var(--faint); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.einst .einst-fehler { color: var(--pill-handeln-ink); }
.einst code { overflow-wrap: anywhere; font-size: 13px; }
.einst-form { display: grid; gap: 8px; margin-top: 10px; max-width: 480px; }
.einst-form input { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; }
.einst-form .knopf, .einst form .knopf { margin-top: 0; border: 0; cursor: pointer; font-family: inherit; justify-self: start; }
.einst > form { margin-top: 14px; }
.einst-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.einst-knoepfe .knopf { margin-top: 0; }
.einst-pre { margin-top: 9px; padding: 12px; max-height: 320px; overflow: auto; border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.einst-profile { display: grid; gap: 18px; margin-top: 12px; }
.einst-profile h3 { font-size: 16px; line-height: 22px; font-weight: 600; }
.einst-profile h3 a { font-weight: 400; color: var(--muted); }
.einst-profile p { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 22px; white-space: pre-line; }

.st-seite { display: grid; gap: 28px; margin-top: 18px; }
.st-seite [hidden] { display: none !important; }
.st-vorschau canvas { display: block; width: 100%; max-width: 440px; height: auto; border-radius: 6px; background: #fff; }
.st-steuer { display: grid; gap: 20px; align-content: start; min-width: 0; }
.st-feld { display: grid; gap: 8px; min-width: 0; }
.st-feld > span { color: var(--muted); font-size: 13px; line-height: 18px; }
.st-feld input:not([type="range"]):not([type="file"]):not([type="checkbox"]), .st-feld select, .st-feld textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; color-scheme: dark; }
.st-feld textarea { resize: vertical; }
.st-feld input[type="range"] { width: 100%; accent-color: #fff; }
.st-feld input[type="file"] { font-size: 14px; color: var(--muted); }
.st-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.st-seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 1099px; background: var(--surface); color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.st-seg button[aria-pressed="true"] { background: var(--raised); color: var(--text); }
.st-seg button i { width: 10px; height: 10px; border-radius: 50%; }
.st-chk { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; line-height: 20px; }
.st-chk input { width: 20px; height: 20px; accent-color: #fff; flex: none; }
.st-hinweis { color: var(--faint); font-size: 13px; line-height: 19px; max-width: 60ch; }
.st-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-aktionen button { margin-top: 0; border: 0; cursor: pointer; font-family: inherit; }
.st-blaettern { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 440px; margin-top: 10px; color: var(--muted); font-size: 14px; }
.st-blaettern button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--raised); color: var(--text); font-size: 22px; cursor: pointer; }
.st-cap { display: grid; gap: 6px; margin-top: 18px; max-width: 440px; }
.st-cap-kopf { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; color: var(--muted); font-size: 13px; }
.st-cap-kopf button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 1099px; background: var(--raised); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.st-cap textarea { width: 100%; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; line-height: 21px; resize: vertical; }

@media (min-width: 1000px) {
  .ue-stand { top: 0; margin-inline: 0; padding-inline: 0; }
  .ue { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 36px; align-items: start; }
  .ue-kopf { margin-top: 0; }
  .pool-chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .pool-steuer .suchfeld { max-width: 480px; }
  .pool-zeile .ue { padding-bottom: 28px; }
  .einst-profile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .st-seite { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 36px; align-items: start; }
  .st-vorschau { position: sticky; top: 20px; }
}

.ue-zurueck { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--muted); font-size: 15px; }
.ue-zurueck::before { content: ""; width: 8px; height: 8px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.ue-zurueck:hover { color: var(--text); }
.ue-spruenge { margin-top: 12px; }
.ue-spruenge a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 1099px; background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
.ue-spruenge a:hover { color: var(--text); }
.ue-block { scroll-margin-top: 60px; }
@media (min-width: 1000px) { .ue-spruenge { flex-wrap: wrap; } }

.wo-wahl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 14px; text-align: center; }
.wo-wahl p b { font-weight: 600; font-variant-numeric: tabular-nums; }
.wo-wahl .knopf { margin-top: 0; min-width: 48px; padding: 0; font-size: 20px; }
.wo-aus { opacity: .35; }
.wo-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; margin-top: 14px; }
.wo-zahlen b { display: block; font: 600 34px/38px var(--ziffern); font-variant-numeric: tabular-nums; }
.wo-zahlen span { display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
.wo-gross { margin-top: 8px; font: 600 48px/52px var(--ziffern); font-variant-numeric: tabular-nums; }
.wo-liste { margin-top: 12px; }
.wo-liste li { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.wo-liste a { display: grid; min-width: 0; }
.wo-liste b { font-weight: 500; }
.wo-liste small { color: var(--faint); font-size: 13px; line-height: 18px; }

/* Unterlagen aus dem Vault (Markdown), seit 08.11.2026 statt der alten Dokumentseite */
.dokument { color: var(--muted); font-size: 16px; line-height: 26px; }
.dokument > :first-child { margin-top: 0; }
.dokument h2 { margin: 35px 0 9px; color: var(--text); font-size: 20px; line-height: 28px; font-weight: 600; }
.dokument h3 { margin: 26px 0 7px; color: var(--text); font-size: 17px; line-height: 24px; font-weight: 600; }
.dokument p, .dokument ul, .dokument ol, .dokument blockquote { margin: 0 0 13px; }
.dokument ul { list-style: disc; padding-left: 22px; }
.dokument ol { padding-left: 22px; }
.dokument li + li { margin-top: 4px; }
.dokument strong { color: var(--text); font-weight: 600; }
.dokument a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.dokument blockquote { padding-left: 13px; border-left: 2px solid var(--raised); }
.dokument code { font-size: 14px; }
.dokument hr { margin: 26px 0; border: 0; border-top: 1px solid var(--rule); }
.dokument table { display: block; overflow-x: auto; margin: 9px 0 22px; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.dokument th, .dokument td { padding: 7px 13px 7px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.dokument th { color: var(--faint); font-weight: 500; }

/* Leute: Klick-Liste zum Folgen und Liken */
.lt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.lt-row .ct-titel small.lt-bio { margin-top: 2px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lt-akt { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lt-row .ct-titel b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-hilfe { margin-top: 8px; }
.lt-aus .ct-titel b, .lt-aus .ct-titel small { color: var(--faint); }
.lt-schwach { margin-left: 6px; padding: 1px 8px; border-radius: 1099px; background: var(--pill-beobachten-bg); color: var(--pill-beobachten-ink); font-size: 12px; font-weight: 500; }
.lt-neu { display: flex; align-items: flex-end; gap: 12px; }
.lt-neu .feld { flex: 1; }
.lt-hand { margin-top: 18px; }
.lt-hand textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--raised); border-radius: 9px; background: var(--ground); color: var(--text); font: 400 16px var(--schrift); }

/* Werte: Hover springt zum nächsten echten Wert, Box wie bei Geld und nicht mehr quer über der Zahl (08.11.2026) */
.wert-karte .saeule-info.tip { right: auto; white-space: nowrap; }
.wert-karte .saeule-info.tip.pos-l { left: 0; transform: none; }
.wert-karte .saeule-info.tip.pos-m { left: 50%; transform: translateX(-50%); }
.wert-karte .saeule-info.tip.pos-r { left: auto; right: 0; transform: none; }
.saeulen-klein > .saeulen-bedienung { z-index: 3; }

/* Hamburg-Strecke: alle Laufkilometer als Runden auf der Marathonstrecke (Wunsch Kay 08.11.2026) */
.strecke-kopf { display: grid; gap: 22px; margin-top: 13px; }
.strecke-karte { margin: 0; }
.strecke-karte svg { display: block; width: 100%; height: auto; max-height: 62vh; overflow: visible; }
.strecke-karte path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sk-ganz { stroke: #4a4a4a; }
.sk-ganz-fertig { stroke: var(--text); }
.sk-lauf { stroke: var(--volt); }
.sk-alt { stroke: #8fae38; }
.sk-lauf:hover { stroke: #e2ff8a; }
.sk-marke circle { fill: var(--ground); stroke: #8a8a8a; stroke-width: .6; }
.sk-marke text, .sk-start text { fill: var(--faint); font-family: var(--schrift); font-weight: 500; }
.sk-start rect { fill: var(--text); }
.sk-start text { fill: var(--muted); }
.sk-punkt { fill: var(--text); stroke: var(--ground); stroke-width: 1.2; }
.strecke-karte figcaption { margin-top: 7px; color: var(--faint); font-size: 12px; line-height: 16px; }
.strecke-zahlen .ziel-zahl { margin-top: 0; }
.strecke-ort { margin-top: 9px; color: var(--muted); font-size: 15px; line-height: 22px; }
.strecke-ort b { color: var(--text); font-weight: 600; }
.leiste-runde { height: 9px; margin: 13px 0 9px; border-radius: 2px; background: var(--raised); overflow: hidden; }
.leiste-runde i { display: block; height: 100%; background: var(--volt); }
.strecke-werte, .strecke-werte.wochenzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; }
.strecke-werte b { font-size: 33px; line-height: 38px; }
.zeile small.leise { font-size: 13px; line-height: 18px; }
@media (min-width: 1000px) {
  .strecke-kopf { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start; }
  .strecke-karte svg { max-height: 640px; }
  .strecke-paar { margin-top: 0; column-gap: 40px; }
}
.sk-marke text { paint-order: stroke; stroke: var(--ground); stroke-linejoin: round; }
.sk-start { fill: var(--text); }
.strecke-karte figcaption { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sk-legende { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.sk-legende i { display: inline-block; flex: none; }
.sk-l-start { width: 8px; height: 8px; border-radius: 2px; background: var(--text); }
.sk-l-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 1.5px var(--ground), 0 0 0 2.5px #4a4a4a; }
.sk-l-lauf { width: 18px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--volt) 50%, #8fae38 50%); }
.sk-quelle { flex-basis: 100%; }
/* Hamburg-Strecke: jede Runde in ihrer Farbe (--rf), Läufe darin hell und dunkel im Wechsel */
.sk-runde .sk-lauf, .sk-runde .sk-lauf.sk-alt { stroke: var(--rf); }
.sk-runde .sk-lauf.sk-alt { stroke-opacity: .62; }
.sk-runde .sk-lauf:hover { stroke-opacity: 1; filter: brightness(1.25); }
.sk-l-lauf { background: linear-gradient(90deg, var(--rf, var(--volt)) 50%, color-mix(in srgb, var(--rf, var(--volt)) 62%, #000) 50%); }
.leiste-runde i { background: var(--rf, var(--volt)); }
.rf-punkt { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--rf, var(--volt)); }
b.mit-icon { display: inline-flex; }

/* Läufe: Liste und Seite je Lauf (Wunsch Kay 08.11.2026). Zonen wie die Legende auf Werte: locker grau, mittel weiß, hart Volt */
.zf-z1 { background: #3d3d3d; }
.zf-z2 { background: #6a6a6a; }
.zf-z3 { background: var(--text); }
.zf-z4 { background: var(--volt); }
.zf-z5 { background: #e6ffa3; }
.laeufe-hinweis { margin-top: 4px; }
.lauf-liste { margin-top: 9px; }
.lauf-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; grid-template-areas: "wann zahlen pfeil" "zonen zonen pfeil"; align-items: center; gap: 7px 13px; padding: 11px 0; border-top: 1px solid var(--rule); transition: background 150ms ease-out; }
.lauf-zeile:hover { background: var(--surface); }
.lauf-zeile > .pfeil, .lauf-zeile > svg { grid-area: pfeil; color: var(--faint); }
.lauf-wann { grid-area: wann; display: flex; flex-direction: column; min-width: 0; }
.lauf-wann b { font-weight: 600; }
.lauf-wann small, .lauf-zahlen small { color: var(--faint); font-size: 13px; line-height: 18px; }
.lauf-wann .stufe { margin-left: 4px; font-style: normal; }
.lauf-zahlen { grid-area: zahlen; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.lauf-zahlen b { font-weight: 600; }
.lauf-zonen { grid-area: zonen; display: flex; height: 6px; border-radius: 2px; overflow: hidden; background: var(--raised); }
.lauf-zonen i { display: block; height: 100%; }
.lauf-zonen-gross { height: 12px; margin-top: 13px; }
.laeufe-legende { margin-top: 26px; }
.laeufe-legende .ampel-punkt, .zeile .ampel-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.lauf-blaettern { display: flex; gap: 8px; }
.lauf-blaettern .knopf { min-width: 44px; justify-content: center; font-size: 20px; }
.lauf-werte, .lauf-werte.wochenzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
.lauf-werte b { font-size: 33px; line-height: 38px; }
.lauf-kurve { height: 190px; margin-top: 15px; margin-left: 34px; }
.lauf-kurve .linie path { stroke: var(--text); stroke-width: 1.6; fill: none; vector-effect: non-scaling-stroke; }
.lauf-kurve rect { opacity: .16; }
.lauf-kurve .zb-z1 { fill: #3d3d3d; opacity: .5; } .lauf-kurve .zb-z2 { fill: #6a6a6a; opacity: .35; } .lauf-kurve .zb-z3 { fill: #fff; opacity: .1; }
.lauf-kurve .zb-z4 { fill: var(--volt); opacity: .16; } .lauf-kurve .zb-z5 { fill: #e6ffa3; opacity: .24; }
.lauf-kurve-hinweis { margin-top: 30px; font-size: 13px; }
.lauf-strecke { display: grid; gap: 18px; margin-top: 13px; align-items: start; }
.lauf-strecke svg { display: block; width: 100%; max-height: 300px; overflow: visible; }
.lauf-strecke path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sk-von { fill: var(--ground); stroke: var(--text); stroke-width: .8; }
.lauf-notiz { margin-top: 9px; color: var(--muted); white-space: pre-line; }
@media (min-width: 1000px) {
  .lauf-werte, .lauf-werte.wochenzahlen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lauf-strecke { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; }
  .lauf-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 150px 18px; grid-template-areas: "wann zonen zahlen pfeil"; }
}
.zeile-link { transition: background 150ms ease-out; } .zeile-link:hover { background: var(--surface); }

/* Läufe: Zonen in klar unterscheidbaren Farben, Abfolge wie bei Sportuhren (Kay 08.11.2026) */
:root { --zone-1: #8b96a3; --zone-2: #4f9df2; --zone-3: #4fd18b; --zone-4: #f5a142; --zone-5: #ff5a4a; }
.zf-z1 { background: var(--zone-1); }
.zf-z2 { background: var(--zone-2); }
.zf-z3 { background: var(--zone-3); }
.zf-z4 { background: var(--zone-4); }
.zf-z5 { background: var(--zone-5); }
.lauf-zonen i + i { box-shadow: -1px 0 0 var(--ground); }
.lauf-kurve .zb-z1, .lauf-kurve .zb-z2, .lauf-kurve .zb-z3, .lauf-kurve .zb-z4, .lauf-kurve .zb-z5 { opacity: .16; }
.lauf-kurve .zb-z1 { fill: var(--zone-1); }
.lauf-kurve .zb-z2 { fill: var(--zone-2); }
.lauf-kurve .zb-z3 { fill: var(--zone-3); }
.lauf-kurve .zb-z4 { fill: var(--zone-4); }
.lauf-kurve .zb-z5 { fill: var(--zone-5); }

/* Tempo je Minute auf der Lauf-Seite: Linie in Volt, damit sie sich vom Puls unterscheidet */
.tempo-kurve .linie path { stroke: var(--volt); }

/* RunKlub: Gastseiten, Formulare, Hinweise. Nur vorhandene Werte aus :root */
.gast { max-width: 440px; padding-bottom: 48px; }
.gast-marke { margin-bottom: 40px; }
.gast-titel { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.015em; }
.gast-form { margin-top: 8px; }
.gast-unter { margin-top: 22px; }
.link { color: var(--text); text-decoration: underline; text-decoration-color: var(--raised); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--text); }
.fehler { margin-top: 14px; color: var(--pill-handeln-ink); font-size: 14px; }
.fehlerkasten { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--pill-handeln-bg); color: var(--pill-handeln-ink); font-size: 14px; line-height: 20px; }
.fehlerkasten p + p { margin-top: 6px; }
.tage-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0 12px; }
.zeile-heute b { color: var(--volt); }
.schluessel code { display: block; margin-top: 8px; padding: 12px; border-radius: 9px; background: var(--surface); font-size: 14px; overflow-wrap: anywhere; user-select: all; }
.knopf-gefahr { background: var(--pill-handeln-bg); color: var(--pill-handeln-ink); }
.knopf-gefahr:hover { background: #3a2129; }
.tagebuch-form { margin-top: 6px; }
.knopfreihe-eng .knopf { margin-top: 8px; }
form .knopf-klein { margin-top: 8px; }

.recht { margin-top: 24px; }
.recht h2 { margin-top: 28px; font-size: 18px; line-height: 24px; font-weight: 600; }
.recht p { margin-top: 8px; color: var(--muted); max-width: 64ch; }
.recht .fehlerkasten { color: var(--pill-handeln-ink); }

/* Heute-Ansicht (Startseite) */
.hinweis-band { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); background: var(--pill-beobachten-bg); color: var(--pill-beobachten-ink); font-size: 14px; line-height: 20px; }
.hinweis-band b { font-weight: 600; }
.hinweis-band span { grid-column: 1; color: var(--text); }
.hinweis-band .pfeil, .hinweis-band svg { grid-column: 2; grid-row: 1 / span 2; }
.hinweis-not { background: var(--pill-handeln-bg); color: var(--pill-handeln-ink); }
.heute-karte { margin-top: 18px; padding: 24px 22px 22px; border-radius: 22px; background: var(--surface); }
.heute-tag { color: var(--muted); font-size: 14px; }
.heute-karte h1 { margin-top: 6px; font: 800 44px/44px var(--ziffern); text-transform: uppercase; letter-spacing: 0; text-wrap: balance; }
.heute-zahlen { display: flex; gap: 28px; margin-top: 22px; }
.heute-zahlen div { display: grid; }
.heute-zahlen .zahl { font: 600 56px/52px var(--ziffern); color: var(--volt); font-variant-numeric: tabular-nums; }
.heute-zahlen span { color: var(--muted); font-size: 14px; }
.heute-ansage { margin-top: 20px; font-size: 17px; line-height: 25px; max-width: 52ch; }
.heute-aktion { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.heute-aktion form { display: contents; }
.heute-aktion .knopf { margin-top: 0; }
.knopf-dunkel { background: var(--volt); color: #000; }
.knopf-dunkel:hover { background: #d4f86f; }
.knopf-hell { background: var(--raised); color: var(--text); }
.knopf-hell:hover { background: #363636; }
.heute-fertig { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 1099px; background: var(--raised); color: var(--volt); font-weight: 600; font-size: 15px; }
.heute-fertig .icon { width: 18px; height: 18px; }
.ist-erledigt h1 { color: var(--muted); }
.ist-frei h1 { color: var(--text); }
.warum { margin-top: 12px; padding: 16px 22px; border-radius: var(--radius); background: var(--surface); }
.warum summary { display: flex; justify-content: space-between; align-items: center; min-height: 28px; font-weight: 600; font-size: 15px; }
.warum[open] summary svg { transform: rotate(90deg); }
.warum p { margin-top: 10px; font-size: 15px; line-height: 22px; }
.warum p.leise { color: var(--muted); }
.abschnitt { margin-top: var(--abstand); }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.abschnitt-kopf h2 { font: 800 26px/28px var(--ziffern); text-transform: uppercase; }
.abschnitt-kopf .leise { color: var(--muted); font-size: 14px; }
.wochenstreifen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 14px; padding: 0; list-style: none; }
.wochenstreifen li { display: grid; align-content: start; gap: 4px; min-height: 92px; padding: 10px 7px; border-radius: 11px; background: var(--surface); }
.wochenstreifen .ws-tag { font: 600 17px/18px var(--ziffern); color: var(--muted); }
.wochenstreifen .ws-was { font-size: 11px; line-height: 14px; color: var(--muted); overflow-wrap: anywhere; hyphens: auto; }
.wochenstreifen .ws-km { font: 600 18px/18px var(--ziffern); color: var(--text); margin-top: auto; }
.wochenstreifen li.lauf .ws-was { color: var(--text); }
.wochenstreifen li.heute { background: var(--text); }
.wochenstreifen li.heute .ws-tag, .wochenstreifen li.heute .ws-was, .wochenstreifen li.heute .ws-km { color: #000; }
.wochenstreifen li.fertig { background: var(--raised); }
.wochenstreifen li.fertig .ws-km { color: var(--volt); }
.ziel-band h2 { font: 800 26px/30px var(--ziffern); text-transform: uppercase; }
.ziel-zahl { color: var(--volt); font-size: 44px; }
.ziel-band .leise { margin-top: 4px; color: var(--muted); font-size: 14px; }
.schnell { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.schnell-knopf { min-height: 44px; padding: 0 18px; border: 0; border-radius: 1099px; background: var(--raised); color: var(--text); font: 500 15px var(--schrift); cursor: pointer; transition: background-color 150ms ease-out; }
.schnell-knopf:hover { background: #363636; }
.schnell-knopf.an { background: var(--pill-handeln-bg); color: var(--pill-handeln-ink); }
@media (min-width: 700px) {
  .heute-karte { padding: 34px 34px 30px; }
  .heute-karte h1 { font-size: 64px; line-height: 62px; }
  .heute-zahlen .zahl { font-size: 72px; line-height: 66px; }
  .wochenstreifen li { min-height: 110px; padding: 12px 10px; }
  .wochenstreifen .ws-was { font-size: 12px; line-height: 15px; }
}

.wochenstreifen .ws-kurz { font-size: 12px; line-height: 14px; color: var(--muted); }
.wochenstreifen .ws-was { display: none; }
.wochenstreifen li.lauf .ws-kurz { color: var(--text); }
.wochenstreifen li.heute .ws-kurz { color: #000; }
.wochenstreifen li.vorher { background: transparent; box-shadow: inset 0 0 0 2px var(--surface); }
.wochenstreifen .ws-km small { font: 500 11px var(--schrift); }
.wochenstreifen li { min-height: 84px; }
@media (min-width: 700px) {
  .wochenstreifen .ws-kurz { display: none; }
  .wochenstreifen .ws-was { display: block; }
}

.heute-sperre { margin-top: 18px; padding: 12px 14px; border-radius: 11px; background: var(--pill-handeln-bg); color: var(--pill-handeln-ink); font-size: 15px; line-height: 21px; }
.zwickt { margin-top: 18px; border-radius: var(--radius); background: var(--surface); }
.zwickt summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 18px; font-weight: 600; font-size: 15px; }
.zwickt[open] summary svg { transform: rotate(90deg); }
.zwickt form { padding: 0 18px 18px; }
.zwickt fieldset { border: 0; padding: 0; margin: 10px 0 0; }
.zwickt legend { padding: 0; color: var(--muted); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 40px; padding: 0 13px; border-radius: 1099px; background: var(--raised); font-size: 14px; transition: background-color 150ms ease-out; }
.chip input:checked + span { background: var(--text); color: #000; }
.chip.rot input:checked + span { background: var(--pill-handeln-ink); color: #000; }
.chip input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.skala .chip span { padding: 0; font: 600 18px var(--ziffern); }