/* Triathlon-Kalender – Moselwasser, Petrol und Startnummern-Orange */

@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(fonts/barlow-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fonts/barlow-latin-600-normal.woff2) format("woff2"); }

:root {
  --bg: #e6eef0;
  --flaeche: #ffffff;
  --flaeche-2: #f2f7f8;
  --tinte: #10303a;
  --leise: #587079;
  --linie: #d2dfe2;
  --petrol: #0d5b6b;
  --petrol-tief: #0d3b45;
  --signal: #ff6a13;
  --signal-text: #c24a00;
  --schwimmen: #2a7ab8;
  --rad: #d69500;
  --laufen: #d8453a;
  --gruen: #1f8a5b;
  --gruen-bg: #dcf1e6;
  --gelb: #a8680f;
  --gelb-bg: #fbecd2;
  --grau: #75878d;
  --grau-bg: #e3eaec;
  --rot: #b42318;
  --rot-bg: #fde6e3;
  --schatten: 0 1px 2px rgba(16, 48, 58, .06), 0 8px 24px -12px rgba(16, 48, 58, .25);
  --anzeige: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Distanzklassen: von hell (Volksdistanz) bis kräftig (Langdistanz) */
  --kat-vd-bg: #e3eaec; --kat-vd: #587079;
  --kat-sd-bg: #cfe8ed; --kat-sd: #0d5b6b;
  --kat-kd-bg: #93cbd6; --kat-kd: #0b3540;
  --kat-md-bg: #1f7d8f; --kat-md: #ffffff;
  --kat-ld-bg: #0d3b45; --kat-ld: #ffffff;
  color-scheme: light;
}
/* Dunkel: automatisch nach Systemeinstellung – außer im Profil ist "Hell" gewählt – oder fest "Dunkel" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1a1f;
    --flaeche: #11262c;
    --flaeche-2: #0d2026;
    --tinte: #e2eef0;
    --leise: #8ea7ae;
    --linie: #1f3c45;
    --petrol: #5cbccd;
    --petrol-tief: #082a32;
    --signal: #ff7a2b;
    --signal-text: #ff9a5c;
    --schwimmen: #4c9be0;
    --rad: #e9b02a;
    --laufen: #ef6a5f;
    --gruen: #5fd39a;
    --gruen-bg: #123a2a;
    --gelb: #f0b85a;
    --gelb-bg: #3a2c12;
    --grau: #a2b4ba;
    --grau-bg: #1e343b;
    --rot: #ff8a80;
    --rot-bg: #3d1915;
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .7);
    --kat-vd-bg: #1e343b; --kat-vd: #a2b4ba;
    --kat-sd-bg: #163f48; --kat-sd: #9ad8e4;
    --kat-kd-bg: #22606d; --kat-kd: #e2f4f7;
    --kat-md-bg: #3fa3b5; --kat-md: #06222a;
    --kat-ld-bg: #8fdbe8; --kat-ld: #06222a;
    color-scheme: dark;
  }
}
/* im Profil fest "Dunkel" gewählt – dieselben Werte wie oben */
:root[data-theme="dark"] {
  --bg: #0a1a1f; --flaeche: #11262c; --flaeche-2: #0d2026; --tinte: #e2eef0; --leise: #8ea7ae; --linie: #1f3c45;
  --petrol: #5cbccd; --petrol-tief: #082a32; --signal: #ff7a2b; --signal-text: #ff9a5c;
  --schwimmen: #4c9be0; --rad: #e9b02a; --laufen: #ef6a5f;
  --gruen: #5fd39a; --gruen-bg: #123a2a; --gelb: #f0b85a; --gelb-bg: #3a2c12; --grau: #a2b4ba; --grau-bg: #1e343b;
  --rot: #ff8a80; --rot-bg: #3d1915;
  --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .7);
  --kat-vd-bg: #1e343b; --kat-vd: #a2b4ba;
  --kat-sd-bg: #163f48; --kat-sd: #9ad8e4;
  --kat-kd-bg: #22606d; --kat-kd: #e2f4f7;
  --kat-md-bg: #3fa3b5; --kat-md: #06222a;
  --kat-ld-bg: #8fdbe8; --kat-ld: #06222a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 var(--text);
  background: var(--bg);
  color: var(--tinte);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--petrol); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.leise { color: var(--leise); }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Kopf ---------- */
.kopf { background: var(--petrol-tief); color: #fff; position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); }
.kopf-innen { max-width: 880px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marke { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.marke { gap: 9px; }
.marke .marke-zeichen { width: 36px; height: 36px; stroke: none; transform: rotate(-7deg); transition: transform .2s; margin: -4px 0; }
.marke:hover .marke-zeichen { transform: rotate(0); }
@media (prefers-reduced-motion: reduce) { .marke .marke-zeichen { transition: none; } }
.marke-text { font: 800 26px/1 var(--anzeige); letter-spacing: .01em; }
.marke-jahr { color: var(--signal); margin-left: 2px; }
.hauptnav { display: flex; align-items: center; gap: 2px; }
.hauptnav a { color: #c7e3ea; text-decoration: none; font: 600 17px/1 var(--anzeige); padding: 9px 10px; border-radius: 8px; }
.hauptnav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.hauptnav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 var(--signal); border-radius: 8px 8px 2px 2px; }
.hauptnav .profil-link { display: flex; align-items: center; gap: 6px; }
.hauptnav .profil-link svg { width: 20px; height: 20px; }

.inhalt { max-width: 880px; width: 100%; margin: 0 auto; padding: 16px 16px 24px; flex: 1; }
.fuss { max-width: 880px; width: 100%; margin: 0 auto; padding: 8px 16px calc(28px + env(safe-area-inset-bottom)); color: var(--leise); font-size: 13px; }

/* Handy: Menü als Leiste am unteren Rand */
@media (max-width: 600px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .hauptnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-around; gap: 0;
    background: var(--petrol-tief); padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px -10px rgba(0, 0, 0, .5);
  }
  .hauptnav a { flex: 1; text-align: center; padding: 12px 4px; font-size: 16px; }
  .hauptnav a[aria-current="page"] { box-shadow: inset 0 3px 0 var(--signal); border-radius: 2px 2px 8px 8px; }
  .hauptnav .profil-link { justify-content: center; }
}

/* ---------- Werkzeugleiste ---------- */
.werkzeug { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.suche { flex: 1 1 220px; position: relative; }
.suche svg { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--leise); }

.werkzeug input, .werkzeug select {
  width: 100%; font: 500 15px/1.2 var(--text); color: var(--tinte); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; min-height: 42px;
}
.werkzeug select { width: auto; flex: 0 0 auto; }
.werkzeug .suche input { padding-left: 38px; }
.schalter { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font: 700 15px/1 var(--anzeige); letter-spacing: .02em; color: var(--tinte); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 999px; padding: 0 14px; min-height: 42px; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--flaeche); }
.treffer { margin: 4px 2px 10px; font-size: 13px; color: var(--leise); }

/* ---------- Monatsliste ---------- */
.monat { margin-bottom: 14px; }
.monat-titel {
  font: 800 30px/1 var(--anzeige); color: var(--petrol); margin: 0; padding: 14px 4px 8px;
  position: sticky; top: 52px; z-index: 5; background: linear-gradient(var(--bg) 80%, transparent);
}
.zeilen { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border-radius: 14px; box-shadow: var(--schatten); overflow: hidden; }
.zeile + .zeile { border-top: 1px solid var(--linie); }
.zeile[hidden] { display: none; }
.zeile-knopf {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px;
}
.zeile-knopf:hover { background: var(--flaeche-2); }
.zeile-knopf:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; border-radius: 0; }
.zeile.vorbei .zeile-knopf { opacity: .5; }
.z-datum { display: grid; justify-items: center; line-height: 1; }
.z-tag { font: 800 30px/1 var(--anzeige); }
.z-wtag { font: 600 13px/1.2 var(--anzeige); color: var(--leise); }
.z-offen { font: 800 26px/1 var(--anzeige); color: var(--grau); width: 34px; height: 34px; display: grid; place-items: center; border: 2px dashed var(--grau); border-radius: 8px; }
.z-haupt { min-width: 0; display: grid; }
.z-name { font-weight: 600; font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-ort { font-size: 13.5px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-meta { display: flex; align-items: center; gap: 8px; }
.z-kats { display: flex; gap: 3px; }
.kat {
  font: 700 12.5px/1 var(--anzeige); letter-spacing: .03em; min-width: 24px; padding: 4px 5px 3px; text-align: center;
  border-radius: 5px; background: var(--kat-vd-bg); color: var(--kat-vd);
}
.kat-SD { background: var(--kat-sd-bg); color: var(--kat-sd); }
.kat-KD { background: var(--kat-kd-bg); color: var(--kat-kd); }
.kat-MD { background: var(--kat-md-bg); color: var(--kat-md); }
.kat-LD { background: var(--kat-ld-bg); color: var(--kat-ld); }
.z-status { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.z-status.s-bestaetigt { background: var(--gruen); }
.z-status.s-vorlaeufig { background: transparent; box-shadow: inset 0 0 0 2px var(--gelb); }
.z-status.s-unklar { background: transparent; box-shadow: inset 0 0 0 2px var(--grau); opacity: .7; }
.z-teilnahme { width: 18px; height: 14px; flex: none; border-radius: 3px; position: relative; }
.z-teilnahme.t-geplant { box-shadow: inset 0 0 0 2px var(--signal); }
.z-teilnahme.t-angemeldet { background: var(--signal); }
.z-teilnahme.t-geplant::before, .z-teilnahme.t-angemeldet::before,
.z-teilnahme.t-geplant::after, .z-teilnahme.t-angemeldet::after {
  content: ""; position: absolute; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--flaeche);
}
.z-teilnahme.t-geplant::before, .z-teilnahme.t-angemeldet::before { left: 3px; }
.z-teilnahme.t-geplant::after, .z-teilnahme.t-angemeldet::after { right: 3px; }
.z-teilnahme.t-geplant::before, .z-teilnahme.t-geplant::after { background: var(--signal); }
.leer { text-align: center; color: var(--leise); padding: 28px; }

@media (max-width: 520px) {
  .z-kats .kat:nth-last-child(n+3) { display: none; }
  .monat-titel { font-size: 26px; top: 48px; }
}

/* ---------- Detailfenster ---------- */
.detail {
  border: 0; padding: 0; width: min(580px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  border-radius: 18px; background: var(--flaeche); color: var(--tinte); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
}
.detail::backdrop { background: rgba(6, 26, 31, .55); backdrop-filter: blur(2px); }
.detail[open] { animation: auf .22s ease-out; }
@keyframes auf { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .detail[open] { animation: none; } }
.d-schliessen-form { position: sticky; top: 0; z-index: 2; height: 0; display: flex; justify-content: flex-end; }
.d-schliessen { all: unset; cursor: pointer; margin: 10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche-2); color: var(--tinte); }
.d-schliessen svg { width: 20px; height: 20px; }
.d-schliessen:focus-visible { outline: 3px solid var(--signal); }
.d-inhalt { padding: 22px 22px 20px; }
.d-kopf { padding-right: 40px; border-left: 4px solid var(--grau); padding-left: 14px; margin-left: -4px; }
.d-kopf.s-bestaetigt { border-color: var(--gruen); }
.d-kopf.s-vorlaeufig { border-color: var(--gelb); }
.d-datum { margin: 0; font: 700 17px/1.2 var(--anzeige); color: var(--petrol); }
.d-kopf h2 { margin: 2px 0 4px; font: 800 32px/1.02 var(--anzeige); }
.d-ort { margin: 0 0 8px; font-weight: 500; }
.d-status { margin: 0; font-size: 14px; color: var(--leise); }
.badge { display: inline-block; font: 700 13px/1 var(--anzeige); letter-spacing: .02em; border-radius: 5px; padding: 4px 7px 3px; margin-right: 4px; vertical-align: 1px; }
.badge.s-bestaetigt { background: var(--gruen-bg); color: var(--gruen); }
.badge.s-vorlaeufig { background: var(--gelb-bg); color: var(--gelb); }
.badge.s-unklar { background: var(--grau-bg); color: var(--grau); }
.badge.s-voll { background: var(--rot-bg, var(--grau-bg)); color: var(--rot, var(--grau)); }

.d-teilnahme { margin: 18px 0 4px; display: grid; gap: 10px; }
.segment { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 12px; padding: 3px; gap: 3px; }
.segment button {
  font: 700 16px/1 var(--anzeige); letter-spacing: .01em; border: 0; border-radius: 9px; padding: 11px 6px;
  background: transparent; color: var(--leise); cursor: pointer; justify-content: center;
}
.segment button[aria-checked="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.segment button[data-wert="geplant"][aria-checked="true"] { color: var(--signal-text); box-shadow: inset 0 0 0 2px var(--signal); }
.segment button[data-wert="angemeldet"][aria-checked="true"] { background: var(--signal); color: #fff; }
.d-meine-distanz { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--leise); }
.d-meine-distanz select { flex: 1; font: 500 15px var(--text); color: var(--tinte); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; }

.d-block { margin-top: 20px; }
.d-block h3 { margin: 0 0 8px; font: 700 18px/1 var(--anzeige); color: var(--leise); }
.d-block p { margin: 0; }
.d-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .d-zwei { grid-template-columns: 1fr; } }
.d-dist + .d-dist { margin-top: 12px; }
.d-dist-kopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; font-size: 15px; }
.d-dist-kopf .kat { align-self: center; }
.tribalken { display: flex; gap: 3px; height: 24px; }
.tb { min-width: 42px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 13px/1 var(--anzeige); }
.tb-s { background: var(--schwimmen); }
.tb-b { background: var(--rad); color: #2a1d00; }
.tb-r { background: var(--laufen); }
.legende { margin-top: 10px !important; font-size: 13px; color: var(--leise); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.legende span { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.legende span:first-child { margin-left: 0; }

.d-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linie); }

@media (max-width: 600px) {
  .detail { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 92vh; padding-bottom: env(safe-area-inset-bottom); }
  @keyframes auf { from { transform: translateY(40px); } to { transform: none; } }
  .d-kopf h2 { font-size: 28px; }
}

/* ---------- Knöpfe ---------- */
button, .knopf {
  font: 700 16px/1 var(--anzeige); letter-spacing: .01em; border: 0; border-radius: 10px; padding: 12px 16px;
  background: var(--petrol); color: var(--flaeche); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.knopf svg { width: 18px; height: 18px; }
button:hover, .knopf:hover { filter: brightness(1.08); }
button.zweit, .knopf.zweit { background: var(--grau-bg); color: var(--tinte); }
button.gefahr { background: transparent; color: var(--rot); box-shadow: inset 0 0 0 1.5px var(--rot); }
.knopf.aus { background: var(--grau-bg); color: var(--grau); cursor: default; filter: none; }
.knopf.leise-knopf { background: transparent; color: var(--leise); padding-left: 8px; padding-right: 8px; margin-left: auto; }

/* ---------- Meine Starts: Startnummern ---------- */
.starts-kopf h1 { font: 800 38px/1 var(--anzeige); margin: 6px 0 6px; color: var(--petrol); }
.starts-kopf p { margin: 0 0 18px; color: var(--leise); }
.starts-kopf strong { color: var(--tinte); }
.startnummern { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.startnummer {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 100%;
  display: grid; justify-items: center; text-align: center; padding: 34px 18px 0; overflow: hidden;
  background: #fffdf8; color: #10303a; border-radius: 6px; box-shadow: var(--schatten);
  border-top: 14px solid var(--petrol);
}
.startnummer.t-angemeldet { border-top-color: var(--signal); }
.startnummern .zeile:nth-child(odd) .startnummer { transform: rotate(-.8deg); }
.startnummern .zeile:nth-child(even) .startnummer { transform: rotate(.6deg); }
.startnummer:hover, .startnummer:focus-visible { transform: none !important; }
.startnummer:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.loch { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.loch:nth-child(1) { top: 10px; left: 10px; } .loch:nth-child(2) { top: 10px; right: 10px; }
.loch:nth-child(3) { bottom: 44px; left: 10px; } .loch:nth-child(4) { bottom: 44px; right: 10px; }
.sn-zahl { font: 800 88px/.85 var(--anzeige); letter-spacing: -.02em; }
.sn-einheit { font: 700 15px/1 var(--anzeige); color: #587079; margin: 4px 0 14px; }
.sn-name { font: 700 21px/1.1 var(--anzeige); }
.sn-info { font-size: 13.5px; color: #587079; }
.sn-band { margin-top: 14px; align-self: end; width: calc(100% + 36px); padding: 9px; font: 700 15px/1 var(--anzeige); letter-spacing: .03em; background: #e6eef0; color: #0d5b6b; }
.startnummer.t-angemeldet .sn-band { background: var(--signal); color: #fff; }
.zeile.vorbei .startnummer { opacity: .6; }
.leer-gross { background: var(--flaeche); border: 2px dashed var(--linie); border-radius: 14px; padding: 26px; text-align: center; }
.leer-gross p { margin: 4px 0; }

/* ---------- Anmeldung ---------- */
.login { display: grid; justify-items: center; gap: 22px; padding-top: 6vh; }
.login .startnummer { width: 250px; cursor: default; transform: rotate(-2deg); padding-bottom: 22px; }
.login .loch:nth-child(3), .login .loch:nth-child(4) { bottom: 10px; }
.startnummer-zahl { font: 800 92px/.9 var(--anzeige); }
.startnummer-text { font: 700 18px/1 var(--anzeige); color: #587079; }
.login-formular { width: min(360px, 100%); background: var(--flaeche); padding: 22px; border-radius: 14px; box-shadow: var(--schatten); }
.login-formular h1 { margin: 0 0 4px; font: 800 30px/1 var(--anzeige); }
.login-formular button { justify-content: center; }

/* ---------- Verwaltung & Formulare ---------- */
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.admin-nav a { text-decoration: none; padding: 9px 13px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--tinte); font: 600 16px/1 var(--anzeige); }
.admin-nav a.aktiv { background: var(--petrol); border-color: var(--petrol); color: var(--flaeche); }
.zahl { display: inline-block; min-width: 20px; text-align: center; border-radius: 999px; background: var(--signal); color: #fff; font-size: 13px; padding: 2px 6px; margin-left: 2px; }
.box { background: var(--flaeche); border-radius: 14px; padding: 18px; margin-bottom: 16px; box-shadow: var(--schatten); }
.box.schmal { max-width: 380px; margin: 40px auto; }
.box h1 { font: 800 28px/1.05 var(--anzeige); margin: 0 0 12px; }
.box h2 { font: 700 20px/1.1 var(--anzeige); margin: 18px 0 6px; color: var(--petrol); }
.kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kopfzeile h1 { margin: 0; }
.hinweis { background: var(--gruen-bg); color: var(--tinte); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; font: 14px/1.5 var(--text); margin: 0 0 14px; }
.hinweis.fehler { background: var(--rot-bg); color: var(--rot); }
.formular { display: grid; gap: 12px; }
.formular label { display: grid; gap: 5px; font-size: 13.5px; font-weight: 500; color: var(--leise); }
.formular input, .formular select, .formular textarea {
  width: 100%; font: 15px/1.4 var(--text); color: var(--tinte); background: var(--flaeche-2);
  border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px;
}
.formular.raster { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.formular .breit { grid-column: 1 / -1; }
.formular .check { display: flex; align-items: center; gap: 8px; color: var(--tinte); font-size: 14.5px; }
.formular .check input { width: 18px; height: 18px; accent-color: var(--petrol); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vorschlaege { display: grid; gap: 8px; }
.vorschlag { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px; border: 1px solid var(--linie); border-radius: 10px; font-size: 14.5px; cursor: pointer; }
.vorschlag input { accent-color: var(--petrol); width: 18px; height: 18px; }
.vorschlag .alt { text-decoration: line-through; color: var(--leise); }
.vorschlag .neu { color: var(--gruen); font-weight: 600; }
.klein { font-size: 13px; color: var(--leise); }
.tabelle-scroll { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabelle th, .tabelle td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font: 700 14px/1 var(--anzeige); color: var(--leise); }
.tabelle tr.inaktiv { opacity: .5; }
.quellen { padding-left: 18px; font-size: 14px; display: grid; gap: 4px; word-break: break-all; }
.quellen .klein { display: block; }
.code { background: var(--flaeche-2); padding: 10px; border-radius: 8px; overflow-x: auto; font-size: 13px; }
.fortschritt { height: 10px; background: var(--grau-bg); border-radius: 999px; overflow: hidden; margin: 8px 0 14px; }
.fortschritt div { height: 100%; background: var(--signal); transition: width .3s; }

/* ---------- Gruppe & Mitglieder ---------- */
.z-gruppe { display: inline-flex; align-items: center; gap: 2px; font: 700 13px/1 var(--anzeige); color: var(--petrol); }
.z-gruppe svg { width: 17px; height: 17px; }
.vorschlagen-knopf { min-height: 42px; padding: 0 14px; }
.d-dabei ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.d-dabei li { display: flex; align-items: baseline; gap: 8px; font-size: 15px; }
.d-person { width: 14px; height: 11px; border-radius: 2px; flex: none; align-self: center; }
.d-person.t-geplant { box-shadow: inset 0 0 0 2px var(--signal); }
.d-person.t-angemeldet { background: var(--signal); }
.d-dabei li.ich strong { color: var(--signal-text); }
.sn-gruppe { font-size: 13px; color: #0d5b6b; font-weight: 600; margin-top: 4px; }
.klein-knopf { padding: 8px 10px; font-size: 14px; }
.login-formular > a { justify-self: center; }
.formular label .klein { font-weight: 400; }
@media (max-width: 600px) { .hauptnav a:nth-child(4) .profil-text { display: none; } }
.rechtstext { max-width: 720px; }
.rechtstext h1 { margin-top: 8px; }
.rechtstext h1 + p { margin-top: 0; }
.rechtstext h2 { margin: 22px 0 6px; }
.rechtstext p, .rechtstext li { line-height: 1.6; }
.rechtstext ul { padding-left: 20px; display: grid; gap: 6px; }
details.box summary { cursor: pointer; font: 700 18px/1 var(--anzeige); color: var(--rot); }
.fuss a { color: var(--leise); }

/* Legende unter der Terminliste */
.legende-box { margin: -4px 0 12px; font-size: 13.5px; color: var(--leise); }
.legende-box summary { cursor: pointer; font: 700 14px/1.2 var(--anzeige); text-transform: uppercase; letter-spacing: .04em; color: var(--petrol); width: max-content; padding: 4px 2px; }
.legende-liste { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; }
.legende-liste + .legende-liste { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie, rgba(127,127,127,.2)); }
.legende-liste div { display: flex; align-items: center; gap: 7px; }
.legende-liste dt { display: flex; justify-content: center; min-width: 18px; }
.legende-liste dd { margin: 0; }

/* Ausgebucht-Hinweise */
.voll { display: inline-block; padding: 1px 6px; border-radius: 4px; font: 700 12px/1.5 var(--anzeige); letter-spacing: .03em; text-transform: uppercase;
  background: #d8453a; color: #fff; vertical-align: 1px; }
.voll.wenig { background: #e3a008; color: #2a1c00; }
.d-voll { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; font-weight: 600; background: rgba(216, 69, 58, .12); color: #b8322a; }
.d-voll.wenig { background: rgba(227, 160, 8, .15); color: #8a5d00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-voll { color: #ff8a80; }
  :root:not([data-theme="light"]) .d-voll.wenig { color: #ffc94d; }
}
:root[data-theme="dark"] .d-voll { color: #ff8a80; }
:root[data-theme="dark"] .d-voll.wenig { color: #ffc94d; }

/* ---------- Version 6: Karte, Bilanz, Ergebnisse, Notizen, Wetter, Preise ---------- */
/* Umschalter Liste/Karte und Segment-Links */
.segment.ansicht-wahl, .bilanz-wahl .segment { display: inline-flex; grid-template-columns: none; }
.segment.ansicht-wahl button, .bilanz-wahl .segment a {
  font: 700 15px/1 var(--anzeige); border-radius: 9px; padding: 10px 14px; background: transparent; color: var(--leise); text-decoration: none; display: inline-flex; align-items: center;
}
.segment.ansicht-wahl button[aria-pressed="true"], .bilanz-wahl .segment a[aria-pressed="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.bilanz-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Karte */
.karte { height: min(70vh, 640px); border-radius: 14px; overflow: hidden; box-shadow: var(--schatten); margin-bottom: 16px; background: var(--flaeche-2); z-index: 0; }
.k-popup { display: grid; gap: 3px; font: 14px/1.35 var(--text); min-width: 180px; }
.k-popup .k-datum { font: 700 13px/1 var(--anzeige); color: var(--petrol); }
.k-popup strong { font: 700 17px/1.1 var(--anzeige); }
.k-popup .k-kats { display: flex; gap: 3px; margin: 2px 0 4px; }
.k-popup .knopf { justify-self: start; color: #fff; }
.leaflet-container { font-family: var(--text); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--flaeche); color: var(--tinte); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .karte .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88); }
}
:root[data-theme="dark"] .karte .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88); }

/* Reiter "Kommende Starts | Bilanz" */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--linie); margin: 0 0 14px; }
.tabs a { padding: 10px 12px; font: 700 17px/1 var(--anzeige); color: var(--leise); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--signal); }

/* Bilanz */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kachel { background: var(--flaeche); border-radius: 14px; padding: 14px 16px; box-shadow: var(--schatten); display: grid; gap: 4px; border-top: 4px solid var(--petrol); }
.kachel.k-s { border-top-color: var(--schwimmen); }
.kachel.k-b { border-top-color: var(--rad); }
.kachel.k-r { border-top-color: var(--laufen); }
.k-zahl { font: 800 34px/1 var(--anzeige); }
.k-text { font-size: 13.5px; color: var(--leise); }
.ergebnisse { list-style: none; margin: 0; padding: 0; display: grid; }
.ergebnisse .zeile + .zeile { border-top: 1px solid var(--linie); }
.erg { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 10px 2px; background: none; color: var(--tinte); text-align: left; font: inherit; border-radius: 0; }
button.erg:hover { filter: none; background: var(--flaeche-2); }
.erg-datum { font: 700 16px/1 var(--anzeige); color: var(--leise); }
.erg-name { display: grid; gap: 2px; font-size: 15px; }
.erg-name .leise, .erg-zeit .leise { font-size: 13px; }
.erg-zeit { display: grid; justify-items: end; font: 700 18px/1.1 var(--anzeige); }
.bestzeiten { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bestzeiten li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bestzeiten strong { font: 700 20px/1 var(--anzeige); }
.tabelle-rahmen { overflow-x: auto; }
.gruppe-tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.gruppe-tabelle th, .gruppe-tabelle td { padding: 9px 6px; border-bottom: 1px solid var(--linie); text-align: right; white-space: nowrap; }
.gruppe-tabelle th:first-child, .gruppe-tabelle td:first-child { text-align: left; }
.gruppe-tabelle th { font: 700 14px/1 var(--anzeige); color: var(--leise); }
.gruppe-tabelle th.z-s { color: var(--schwimmen); } .gruppe-tabelle th.z-b { color: var(--rad); } .gruppe-tabelle th.z-r { color: var(--laufen); }
.gruppe-tabelle tr.ich td { font-weight: 600; color: var(--signal-text); }

/* Ergebnis, Notiz, Wetter, Preis im Detailfenster */
.d-ergebnis { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 8px; align-items: end; }
.d-ergebnis label { display: grid; gap: 4px; font-size: 13px; color: var(--leise); }
.d-ergebnis input, #d-notiz { width: 100%; font: 15px/1.4 var(--text); color: var(--tinte); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 9px 10px; }
.d-ergebnis button { padding: 11px 14px; }
.d-ergebnis .d-status-text { grid-column: 1 / -1; }
.d-ergebnis.mit-km { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.d-ergebnis.mit-km label { white-space: nowrap; }
.d-ergebnis.mit-km button { grid-column: 1; justify-self: start; }
@media (max-width: 480px) { .d-ergebnis, .d-ergebnis.mit-km { grid-template-columns: 1fr 1fr; } .d-ergebnis label:first-child { grid-column: 1 / -1; } .d-ergebnis.mit-km button { grid-column: auto; justify-self: stretch; } }
.d-block details summary { cursor: pointer; color: var(--petrol); font-weight: 600; margin-bottom: 8px; }
#d-notiz { resize: vertical; min-height: 54px; }
.d-status-text { font-size: 13px; }
.d-zeit { margin-left: auto; font: 700 16px/1 var(--anzeige); }
.wetter { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.w-icon { font-size: 38px; line-height: 1; }
.w-stunden { list-style: none; display: flex; gap: 6px; padding: 0; margin: 10px 0 4px; overflow-x: auto; }
.w-stunden li { display: grid; justify-items: center; gap: 2px; min-width: 56px; padding: 6px 4px; background: var(--flaeche-2); border-radius: 10px; font-size: 13px; }
.w-stunden strong { font: 700 16px/1 var(--anzeige); }
.d-preis { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--grau-bg); font-size: 14.5px; }
.d-preis.bald { background: var(--gelb-bg); }
.z-anm { font: 700 12px/1 var(--anzeige); padding: 3px 5px; border-radius: 4px; background: var(--gruen-bg); color: var(--gruen); white-space: nowrap; }
.z-preis { font: 700 12px/1 var(--anzeige); padding: 3px 5px; border-radius: 4px; background: var(--gelb-bg); color: var(--gelb); white-space: nowrap; }
.z-notiz svg { width: 16px; height: 16px; fill: none; stroke: var(--leise); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; display: block; }
@media (max-width: 600px) { .z-preis { display: none; } }

/* Profil: Kalender-Abo */
.ics-link { display: flex; gap: 8px; margin: 10px 0 4px; }
.ics-optionen { margin: 4px 0 14px; }
.ics-link input { flex: 1; min-width: 0; font: 13.5px/1.4 ui-monospace, monospace; color: var(--tinte); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; }
.klein-details { margin-top: 10px; }
.klein-details summary { cursor: pointer; color: var(--petrol); font-weight: 600; font-size: 14px; }
.sicherungen { padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; }
.sicherungen .leise { display: block; font-size: 13px; }

/* Legende auf der Karte */
.k-legende { background: var(--flaeche); color: var(--tinte); border-radius: 10px; box-shadow: var(--schatten); padding: 8px 10px; font: 13px/1.3 var(--text); }
.k-leg-kopf { all: unset; cursor: pointer; font: 700 14px/1 var(--anzeige); color: var(--petrol); display: block; }
.k-leg-kopf::after { content: " ▾"; }
.k-legende.zu .k-leg-kopf::after { content: " ▸"; }
.k-legende ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.k-legende.zu ul { display: none; }
.k-legende li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.k-legende svg { width: 18px; height: 18px; flex: none; }

/* ---------- Kalender (Monatsansicht) ---------- */
.kalender { background: var(--flaeche); border-radius: 14px; box-shadow: var(--schatten); padding: 14px; margin-bottom: 16px; }
.k-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.k-kopf button { min-height: 40px; padding: 0 14px; border: 1px solid var(--linie); }
.k-kopf .k-pfeil { width: 40px; padding: 0; justify-content: center; }
.k-pfeil svg { width: 20px; height: 20px; }
.k-titel { font: 800 28px/1 var(--anzeige); color: var(--petrol); margin: 0 0 0 8px; flex: 1; min-width: max-content; }
.k-anzahl { font-size: 13px; }

.k-wochentage, .k-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.k-wochentage span { font: 700 13px/1 var(--anzeige); letter-spacing: .05em; text-transform: uppercase; color: var(--leise); text-align: center; padding: 0 0 6px; }
.k-raster { border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.k-tag {
  min-width: 0; min-height: 108px; padding: 4px 4px 5px; display: flex; flex-direction: column; gap: 3px;
  border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.k-tag.hat { cursor: pointer; }
.k-tag.hat:hover { background: var(--flaeche-2); }
.k-tag.aussen { background: var(--flaeche-2); }
.k-tag.aussen .k-nr { color: var(--grau); }
.k-tag.gewaehlt { box-shadow: inset 0 0 0 2px var(--petrol); }
.k-nr {
  all: unset; box-sizing: border-box; align-self: center; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font: 600 14px/1 var(--text); color: var(--tinte);
}
button.k-nr { cursor: pointer; }
button.k-nr:hover { background: var(--grau-bg); filter: none; }
button.k-nr:focus-visible { outline: 3px solid var(--signal); outline-offset: 1px; }
.k-tag.heute .k-nr { background: var(--signal); color: #fff; font-weight: 700; }

.k-eintrag {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer;
  font: 600 12px/1.3 var(--text); padding: 2px 6px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--grau-bg); color: var(--tinte);
}
.k-eintrag:hover { filter: brightness(1.06); }
.k-eintrag:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.k-eintrag.s-bestaetigt { background: var(--petrol); color: var(--flaeche); }
.k-eintrag.s-vorlaeufig { background: var(--gelb-bg); color: var(--gelb); }
.k-eintrag.s-unklar { background: var(--grau-bg); color: var(--leise); }
.k-eintrag.t-geplant { box-shadow: inset 0 0 0 2px var(--signal); }
.k-eintrag.t-angemeldet { background: var(--signal); color: #fff; }
.k-eintrag.k-anm { background: transparent; color: var(--petrol); font-weight: 500; box-shadow: inset 0 0 0 1px var(--linie); }
.k-eintrag.vorbei { opacity: .5; }
.k-mehr { font: 600 12px/1.3 var(--text); color: var(--leise); padding: 0 6px; }

.k-legende-zeile { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--leise); }
.k-legende-zeile span { display: inline-flex; align-items: center; gap: 6px; }
.k-legende-zeile .k-eintrag { width: 18px; height: 12px; padding: 0; cursor: default; display: inline-block; }

.k-tagesliste { margin-top: 16px; }
.k-tagesliste h3 { font: 700 20px/1 var(--anzeige); margin: 0 0 8px; color: var(--tinte); }
.k-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; }
.k-liste li + li { border-top: 1px solid var(--linie); }
.k-zeile {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px;
}
.k-zeile:hover { background: var(--flaeche-2); }
.k-zeile:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
.k-zeile-text { display: grid; min-width: 0; }
.k-zeile-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-zeile-text .leise { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-offen { margin-top: 14px; }
.k-offen .k-liste { margin-top: 8px; }

@media (max-width: 600px) {
  .kalender { padding: 10px 6px; margin-left: -8px; margin-right: -8px; }
  .k-kopf { padding: 0 4px; }
  .k-titel { font-size: 24px; margin-left: 4px; }
  .k-anzahl { display: none; }
  .k-wochentage span { font-size: 12px; }
  .k-tag { min-height: 66px; padding: 2px 1px 3px; gap: 2px; }
  .k-nr { width: 22px; height: 22px; font-size: 12.5px; }
  .k-eintrag { font-size: 10px; line-height: 1.25; padding: 1px 3px; border-radius: 3px; }
  .k-mehr { font-size: 10px; padding: 0 2px; }
  .k-zeile .z-kats { display: none; }
}

/* ---------- Abgleich: Seiten je Veranstaltung ---------- */
.q-status { display: inline-block; font: 700 12.5px/1 var(--anzeige); letter-spacing: .02em; border-radius: 5px; padding: 4px 7px 3px; white-space: nowrap; }
.q-status.q-gruen { background: var(--gruen-bg); color: var(--gruen); }
.q-status.q-gelb { background: var(--gelb-bg); color: var(--gelb); }
.q-status.q-rot { background: var(--rot-bg); color: var(--rot); }
.q-status.q-grau { background: var(--grau-bg); color: var(--grau); }
.q-zaehler { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; font-size: 14px; color: var(--leise); }
.q-zaehler > span { display: inline-flex; align-items: center; gap: 6px; }
.q-events { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.q-event { border: 1px solid var(--linie); border-left: 4px solid var(--grau); border-radius: 10px; padding: 10px 12px; }
.q-event.q-rand-rot { border-left-color: var(--rot); }
.q-event.q-rand-gelb { border-left-color: var(--gelb); }
.q-event.q-rand-gruen { border-left-color: var(--gruen); }
.q-event-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.q-event-kopf > span:first-child { flex: 1; min-width: 200px; }
.q-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.q-liste li { word-break: break-all; }
.q-liste .q-status { margin-right: 4px; vertical-align: 1px; }
.q-liste .klein { display: block; word-break: normal; margin-top: 2px; }

/* =================================================================
   Layout 2: Detailspalte am PC, "Auf einen Blick", Reiter, Filter-Knopf
   ================================================================= */

/* ---------- Breite Seite mit Detailspalte (ab 1100 px) ---------- */
.detail-spalte { display: none; }
@media (min-width: 1100px) {
  .seite-breit .kopf-innen, .seite-breit .inhalt, .seite-breit .fuss { max-width: 1360px; }
  .termine-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); gap: 24px; align-items: start; }
  .detail-spalte {
    display: block; position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--flaeche); border-radius: 18px; box-shadow: var(--schatten);
  }
  .detail-spalte .d-kopf { padding-right: 0; }
  .detail-spalte .d-kopf h2 { font-size: 30px; }
}
.d-leer { text-align: center; padding: 48px 24px; color: var(--tinte); }
.d-leer svg { width: 44px; height: 44px; color: var(--petrol); opacity: .6; margin-bottom: 8px; }
.d-leer p { margin: 6px 0; }

/* ausgewählte Veranstaltung */
.zeile.aktiv .zeile-knopf { background: var(--flaeche-2); }
.zeile.aktiv .z-name { color: var(--petrol); }
.k-eintrag.aktiv { outline: 2px solid var(--tinte); outline-offset: 1px; }

/* ---------- Auf einen Blick ---------- */
.blick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.blick-karte { background: var(--flaeche); border-radius: 14px; box-shadow: var(--schatten); padding: 12px 14px; display: grid; align-content: start; gap: 4px; border-top: 4px solid var(--petrol); min-width: 0; }
.blick-start { border-top-color: var(--signal); }
.blick-preis { border-top-color: var(--gelb); }
.blick-karte h2 { margin: 0 0 4px; font: 700 15px/1 var(--anzeige); letter-spacing: .04em; text-transform: uppercase; color: var(--leise); }
.blick-karte p { margin: 0; font-size: 14px; }
.blick-eintrag { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 1px; border-radius: 8px; padding: 4px 6px; margin: 0 -6px; min-width: 0; }
.blick-eintrag:hover { background: var(--flaeche-2); }
.blick-eintrag:focus-visible { outline: 3px solid var(--signal); outline-offset: 0; }
.blick-gross { font: 800 30px/1 var(--anzeige); color: var(--signal-text); }
.blick-eintrag strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blick-eintrag .leise { font-size: 13.5px; }
.blick-zeile { grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; gap: 8px; }
.blick-wann { font: 700 15px/1.2 var(--anzeige); color: var(--petrol); }
.blick-name { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blick-zeile.meins .blick-name { font-weight: 600; }
/* Handy: kein Platz für die Kacheln – der nächste Start steht unter "Meine Starts" */
@media (max-width: 600px) {
  .blick { display: none; }
}

/* ---------- Reiter (Navigation innerhalb einer Seite): Liste/Kalender/Karte, Starts/Bilanz, Verwaltung ---------- */
/* Grundlinie als innerer Schatten, damit die Leiste waagerecht scrollen kann (Handy) */
.tabs, .admin-nav { display: flex; gap: 4px; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--linie); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar, .admin-nav::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap; flex: none;
  padding: 10px 14px; font: 700 17px/1 var(--anzeige); color: var(--leise);
  border-bottom: 3px solid transparent;
}
.tabs a:hover, .tabs button:hover { color: var(--tinte); }
.tabs a[aria-current="page"], .tabs button[aria-pressed="true"] { color: var(--tinte); border-bottom-color: var(--signal); }
.tabs a:focus-visible, .tabs button:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; border-radius: 6px 6px 0 0; }
.tabs .zahl { margin-left: 4px; vertical-align: 1px; }
.ansicht-wahl { margin-bottom: 12px; }
/* Verwaltung: gleiche Reiter statt Pillen */
.admin-nav { flex-wrap: nowrap; margin: 0 0 16px; }
.admin-nav a { flex: none; white-space: nowrap; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 10px 12px; color: var(--leise); font: 700 17px/1 var(--anzeige); }
.admin-nav a:hover { color: var(--tinte); }
.admin-nav a.aktiv { background: none; color: var(--tinte); border-bottom-color: var(--signal); }

/* ---------- Werkzeugleiste ---------- */
.filter-knopf { display: none; align-items: center; gap: 6px; }
.filter-knopf svg { width: 18px; height: 18px; }
.filter-zahl { background: var(--signal); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; font-size: 13px; }
.filter-zahl[hidden] { display: none; }
@media (max-width: 600px) {
  .werkzeug .suche { flex-basis: 0; }
  .filter-knopf { display: inline-flex; flex: none; }
  .filter-knopf[aria-expanded="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--flaeche); }
  .schalter { display: none; flex-basis: 100%; }
  .schalter.offen { display: flex; }
}
.vorschlag-hinweis { text-align: center; color: var(--leise); font-size: 14px; margin: 8px 0 20px; }

/* Trefferzahl mit Legende als "?" */
.treffer-zeile { display: flex; align-items: center; gap: 8px; margin: 2px 2px 8px; position: relative; }
.treffer-zeile .treffer { margin: 0; }
.legende-box { margin: 0; }
.legende-box summary {
  list-style: none; width: 24px; height: 24px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  font: 700 14px/1 var(--anzeige); text-transform: none; letter-spacing: 0; color: var(--petrol);
  border: 1.5px solid currentColor; cursor: pointer;
}
.legende-box summary::-webkit-details-marker { display: none; }
.legende-box[open] summary { background: var(--petrol); color: var(--flaeche); border-color: var(--petrol); }
.legende-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 15; max-width: 560px;
  background: var(--flaeche); border-radius: 14px; box-shadow: var(--schatten), 0 0 0 1px var(--linie); padding: 12px 14px; font-size: 13.5px; color: var(--leise);
}
.legende-pop .klein { margin: 10px 0 0; }

/* ---------- Zeilen der Terminliste ---------- */
/* Eigene Teilnahme als Randstreifen: angemeldet kräftig, vorgemerkt heller */
.zeile[data-teilnahme="angemeldet"] .zeile-knopf { box-shadow: inset 5px 0 0 var(--signal); }
.zeile[data-teilnahme="geplant"] .zeile-knopf { box-shadow: inset 5px 0 0 rgba(255, 106, 19, .4); }
.leg-streifen { display: inline-block; width: 5px; height: 18px; border-radius: 2px; background: var(--signal); }
.leg-streifen.t-geplant { background: rgba(255, 106, 19, .4); }
/* Termin-Status nur, wenn nicht bestätigt – als Text statt Punkt */
.z-status-text { font: 700 12px/1 var(--anzeige); letter-spacing: .02em; border-radius: 4px; padding: 3px 5px 2px; white-space: nowrap; }
.z-status-text.s-vorlaeufig { background: var(--gelb-bg); color: var(--gelb); }
.z-status-text.s-unklar { background: var(--grau-bg); color: var(--leise); }
@media (max-width: 520px) { .z-meta { gap: 6px; } .z-status-text { padding: 3px 4px 2px; } }

/* ---------- Detailfenster: Aktionsleiste unten (Handy & Tablet) ---------- */
.d-fuss {
  position: sticky; bottom: 0; z-index: 2; display: flex; gap: 8px; align-items: center;
  margin: 18px -22px -20px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--flaeche); border-top: 1px solid var(--linie); box-shadow: 0 -8px 20px -14px rgba(0, 0, 0, .4);
}
.d-fuss .segment { flex: 1; }
.d-fuss .segment button { padding: 11px 4px; font-size: 15px; }
.d-fuss .knopf { flex: none; padding: 12px; }
.d-fuss .knopf svg { width: 20px; height: 20px; }
@media (max-width: 420px) { .d-fuss .knopf { font-size: 0; gap: 0; } }   /* nur Symbol */
.detail .d-teilnahme:empty { display: none; }

/* ---------- Meine Starts: nächstes Rennen groß, Erledigtes eingeklappt ---------- */
.startnummer.gross { padding-top: 40px; }
.startnummer.gross .sn-zahl { font-size: 120px; }
.startnummer.gross .sn-name { font-size: 26px; }
.sn-kopf { position: absolute; top: 12px; left: 0; right: 0; font: 700 13px/1 var(--anzeige); letter-spacing: .08em; text-transform: uppercase; color: #587079; }
@media (min-width: 600px) { .startnummern .zeile.naechster { grid-column: span 2; } }
.erledigt { margin-top: 26px; }
.erledigt summary { cursor: pointer; font: 700 20px/1 var(--anzeige); color: var(--leise); padding: 6px 2px 14px; }
.erledigt .startnummer { opacity: .75; }

/* ---------- Kalender: auf dem Handy nur Farbbalken ---------- */
@media (max-width: 600px) {
  .k-eintrag { font-size: 0; line-height: 0; height: 6px; padding: 0; border-radius: 3px; }
  .k-eintrag.k-anm { height: 4px; }
  .k-mehr { font-size: 11px; line-height: 1; padding: 0 1px; }
  .k-mehr-wort { display: none; }
  .k-legende-zeile .k-eintrag { height: 10px; }
}
.k-zeile { grid-template-columns: minmax(0, 1fr) auto auto; position: relative; }
.k-zeile.t-angemeldet { box-shadow: inset 5px 0 0 var(--signal); }
.k-zeile.t-geplant { box-shadow: inset 5px 0 0 rgba(255, 106, 19, .4); }

/* ---------- Überschriften: eine h1 je Seite, Kästen mit h2 ---------- */
.box h2.box-titel { font: 800 28px/1.05 var(--anzeige); margin: 0 0 12px; color: var(--tinte); }
.kopfzeile h2.box-titel { margin: 0; }
.box h3 { font: 700 19px/1.1 var(--anzeige); margin: 18px 0 6px; color: var(--petrol); }
.formular h3.breit { margin: 8px 0 0; }
.seiten-titel { font: 800 34px/1 var(--anzeige); color: var(--petrol); margin: 4px 0 14px; }

/* ---------- Profil: Darstellung Hell/Dunkel ---------- */
.theme-wahl .segment { display: inline-flex; }
.theme-wahl .segment button { padding: 10px 16px; }
.theme-wahl .segment button[aria-pressed="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }

/* Detailfenster: Hinweis aufs Kalender-Abo (statt einzelner "In Google Kalender eintragen"-Knöpfe) */
.d-abo-hinweis { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--flaeche-2); font-size: 14px; color: var(--leise); }
.d-abo-hinweis svg { width: 20px; height: 20px; flex: none; color: var(--petrol); margin-top: 1px; }

/* Verwaltung: Einladungslink mit Begleittext zum Kopieren */
.einladung { border-top: 4px solid var(--signal); }
.einladung-text { width: 100%; font: 15px/1.5 var(--text); color: var(--tinte); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 12px; resize: vertical; margin-top: 4px; }

/* Kopf: Umschalter aktuelles/nächstes Jahr direkt neben "Tri" */
.jahr-wahl { display: inline-flex; gap: 2px; margin-right: auto; margin-left: -2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.jahr-wahl a { font: 800 19px/1 var(--anzeige); letter-spacing: .01em; color: #c7e3ea; text-decoration: none; padding: 6px 10px 5px; border-radius: 999px; }
.jahr-wahl a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.jahr-wahl a[aria-current="true"] { background: var(--signal); color: #fff; }
.jahr-wahl a:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }
@media (max-width: 600px) { .jahr-wahl a { font-size: 18px; padding: 6px 9px 5px; } }

/* ---------- Läufe ---------- */
/* Kopf: Umschalter "Tri | Run" – beide einzeln an- und abwählbar */
.sport-wahl { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); margin-left: -2px; }
.sport-wahl a, .sport-wahl span { font: 800 19px/1 var(--anzeige); letter-spacing: .01em; text-decoration: none; padding: 6px 10px 5px; border-radius: 999px; color: #8fb3bc; }
.sport-wahl a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.sport-wahl [aria-pressed="true"] { background: #fffdf8; color: var(--petrol-tief, #0d3b45); }
.sport-wahl span[aria-pressed="true"] { cursor: default; }
.sport-wahl a:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }
.kopf-innen .sport-wahl + .jahr-wahl { margin-left: 6px; }
.kopf-innen .sport-wahl:not(:has(+ .jahr-wahl)) { margin-right: auto; }
@media (max-width: 600px) {
  .sport-wahl a, .sport-wahl span, .jahr-wahl a { font-size: 17px; padding: 6px 8px 5px; }
  .kopf-innen { gap: 8px; }
  .marke .marke-zeichen { width: 32px; height: 32px; }
}

/* Lauf-Distanzklassen: hell (kurz) bis kräftig (Ultra), in Laufrot statt Petrol */
.kat-5K  { background: #fbe3df; color: #9a2f25; }
.kat-10K { background: #f6c3bc; color: #7a2119; }
.kat-HM  { background: #ea8f84; color: #4a120c; }
.kat-M   { background: #c8463a; color: #fff; }
.kat-U   { background: #8e2a21; color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kat-5K  { background: #3d1c18; color: #f3b1a8; }
  :root:not([data-theme="light"]) .kat-10K { background: #5a2620; color: #f8cfc9; }
  :root:not([data-theme="light"]) .kat-HM  { background: #8a3a31; color: #fde9e6; }
  :root:not([data-theme="light"]) .kat-M   { background: #d9655a; color: #2a0906; }
  :root:not([data-theme="light"]) .kat-U   { background: #f3a59b; color: #2a0906; }
}
:root[data-theme="dark"] .kat-5K  { background: #3d1c18; color: #f3b1a8; }
:root[data-theme="dark"] .kat-10K { background: #5a2620; color: #f8cfc9; }
:root[data-theme="dark"] .kat-HM  { background: #8a3a31; color: #fde9e6; }
:root[data-theme="dark"] .kat-M   { background: #d9655a; color: #2a0906; }
:root[data-theme="dark"] .kat-U   { background: #f3a59b; color: #2a0906; }

/* Lauf-Kennzeichen in der Liste: "Lauf" bzw. "Trail" */
.z-sport { font: 700 12px/1 var(--anzeige); letter-spacing: .03em; text-transform: uppercase; border-radius: 4px; padding: 3px 5px 2px;
  background: var(--grau-bg); color: var(--leise); white-space: nowrap; }
.z-sport.trail { background: #e2ecd6; color: #4a6b25; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .z-sport.trail { background: #26361a; color: #b7d68e; } }
:root[data-theme="dark"] .z-sport.trail { background: #26361a; color: #b7d68e; }

/* Detailfenster: Lauf-Strecken als Liste */
.d-lauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.d-lauf li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; }

/* Profil: Willkommen nach der ersten Anmeldung eines übernommenen Kontos */
.willkommen { border-top: 4px solid var(--signal); }
.willkommen ul { padding-left: 20px; display: grid; gap: 4px; }

/* Terminliste: vergangene Veranstaltungen eingeklappt oben */
.vergangen { margin: 0 0 6px; }
.vergangen > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; width: max-content;
  font: 700 15px/1 var(--anzeige); letter-spacing: .02em; color: var(--leise);
  padding: 8px 12px; border-radius: 999px; background: var(--flaeche); box-shadow: var(--schatten);
}
.vergangen > summary::-webkit-details-marker { display: none; }
.vergangen > summary::before { content: "▸"; font-size: 13px; }
.vergangen[open] > summary::before { content: "▾"; }
.vergangen > summary:hover { color: var(--tinte); }
.vergangen[open] { margin-bottom: 18px; padding-bottom: 6px; border-bottom: 2px dashed var(--linie); }
.vergangen[hidden] { display: none; }

/* Registrierung: Fangfeld für Bots – für Menschen unsichtbar (nicht display:none, das erkennen manche Bots) */
.fangfeld { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.login-formular .check span { line-height: 1.4; }

/* ---------- Anmeldeseite: Logo und Kurzbeschreibung ---------- */
.login-marke { text-align: center; max-width: 420px; display: grid; justify-items: center; gap: 6px; }
.login-logo { width: 96px; height: 96px; transform: rotate(-7deg); filter: drop-shadow(0 8px 18px rgba(13, 59, 69, .25)); }
.login-name { margin: 4px 0 0; font: 800 44px/1 var(--anzeige); color: var(--petrol-tief); letter-spacing: .01em; }
.login-name span { color: var(--signal); }
.login-text { margin: 4px 0 0; color: var(--leise); font-size: 15px; line-height: 1.5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .login-name { color: var(--tinte); } }
:root[data-theme="dark"] .login-name { color: var(--tinte); }

/* ---------- Werkzeugleiste: "Meine" und Filter als Aufklapp-Menü ---------- */
.filter-knopf, .meine-knopf { display: inline-flex !important; align-items: center; gap: 6px; flex: none; }
.meine-knopf svg, .filter-knopf svg { width: 18px; height: 18px; }
.meine-knopf[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: #fff; }
.meine-knopf[aria-pressed="true"] svg { fill: currentColor; }
.filter-knopf.aktiv { border-color: var(--petrol); color: var(--petrol); }
.filter-knopf[aria-expanded="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--flaeche); }
.filter-menue { position: relative; flex: none; }
.filter-feld {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; width: min(420px, calc(100vw - 32px));
  background: var(--flaeche); border-radius: 14px; box-shadow: var(--schatten), 0 0 0 1px var(--linie); padding: 12px 14px 10px;
  display: grid; gap: 10px;
}
.filter-feld[hidden] { display: none; }
.filter-feld fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.filter-feld legend { width: 100%; padding: 0 0 6px; font: 700 13px/1 var(--anzeige); letter-spacing: .05em; text-transform: uppercase; color: var(--leise); }
.filter-feld .chip { min-height: 36px; padding: 0 12px; font-size: 14.5px; }
.filter-fuss { border-top: 1px solid var(--linie); padding-top: 8px; text-align: right; }
.filter-leeren { all: unset; cursor: pointer; font-size: 13.5px; color: var(--petrol); }
.filter-leeren:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .werkzeug .suche { flex: 1 1 100%; }
  .filter-feld { position: fixed; left: 16px; right: 16px; top: auto; width: auto; margin-top: 6px; }
  .meine-knopf, .filter-menue { flex: 1 1 0; }
  .meine-knopf, .filter-knopf { width: 100%; justify-content: center; }
}

/* ---------- Läufe: echte Kilometer statt Klassen-Etiketten ---------- */
.z-km { font: 700 13px/1 var(--anzeige); letter-spacing: .02em; white-space: nowrap; color: #9a2f25; background: #fbe3df;
  border-radius: 5px; padding: 4px 6px 3px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .z-km { background: #3d1c18; color: #f3b1a8; } }
:root[data-theme="dark"] .z-km { background: #3d1c18; color: #f3b1a8; }
@media (max-width: 520px) { .z-km { max-width: 110px; } }
.d-lauf .z-km { font-size: 15px; padding: 5px 8px 4px; }

/* Kalender: Termin noch offen – am Vorjahrestag, grau und gestrichelt */
.k-eintrag.k-geschaetzt { background: transparent; color: var(--leise); font-weight: 500; box-shadow: inset 0 0 0 1px var(--grau); outline: 1px dashed var(--grau); outline-offset: -1px; }
.k-eintrag.k-geschaetzt.t-geplant, .k-eintrag.k-geschaetzt.t-angemeldet { color: var(--signal-text); outline-color: var(--signal); }
@media (max-width: 600px) { .k-eintrag.k-geschaetzt { background: repeating-linear-gradient(90deg, var(--grau) 0 4px, transparent 4px 7px); outline: 0; box-shadow: none; } }
.d-datum .leise { font: 500 14px/1.3 var(--text); }

/* ausgegraute Knöpfe (z. B. "Noch nicht geprüfte abgleichen (0)") */
button:disabled, button:disabled:hover { opacity: .5; cursor: default; filter: none; }

/* ---------- Zeitläufe ("6 h", "8 h") ---------- */
.z-km.z-zeitlauf { color: var(--petrol); background: var(--kat-sd-bg); }
.d-zeitlauf { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--flaeche-2); font-size: 14.5px; }
.d-zeitlauf-hinweis { margin: 6px 0 0; color: var(--signal-text); }
.d-ergebnis input.wichtig { border-color: var(--signal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--signal) 25%, transparent); }

/* ---------- Handy: schmale Zeile statt der Kacheln "Auf einen Blick" ---------- */
.blick-kurz { display: none; }
@media (max-width: 600px) {
  .blick-kurz { display: grid; gap: 6px; margin: 0 0 12px; }
  .blick-kurz button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: baseline; gap: 6px; min-width: 0;
    background: var(--flaeche); border-radius: 10px; box-shadow: var(--schatten); padding: 8px 12px; border-left: 4px solid var(--petrol); font-size: 14.5px; }
  .blick-kurz button:first-child { border-left-color: var(--signal); }
  .blick-kurz button:focus-visible { outline: 3px solid var(--signal); }
  .blick-kurz .bk-label { font: 700 13px/1 var(--anzeige); letter-spacing: .04em; text-transform: uppercase; color: var(--leise); white-space: nowrap; }
  .blick-kurz strong { font: 800 17px/1 var(--anzeige); color: var(--signal-text); white-space: nowrap; }
  .blick-kurz .bk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}

/* ---------- Karte: Pins nach Sportart (Tri rund/blau, Lauf Raute/rot), Status über Füllung ---------- */
.k-pin-rahmen { background: none; border: 0; display: grid; place-items: center; }
.k-pin { --pin: var(--schwimmen); display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--pin);
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); box-sizing: content-box; }
.k-pin.sport-lauf { --pin: var(--laufen); border-radius: 3px; transform: rotate(45deg); width: 12px; height: 12px; }
.k-pin.s-vorlaeufig, .k-pin.s-unklar { background: radial-gradient(circle, #fff 0 32%, var(--pin) 34%); }
.k-pin.offen { background: #fff; border: 2px dashed var(--pin); }
.k-pin.dabei { width: 18px; height: 18px; border: 3px solid var(--petrol-tief); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .5); }
.k-pin.sport-lauf.dabei { width: 16px; height: 16px; }
.k-pin.vorbei { opacity: .45; }
.k-leg-pin { width: 22px; height: 22px; flex: none; }
.k-leg-cluster { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--petrol); color: #fff; font: 700 12px/1 var(--text); flex: none; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: color-mix(in srgb, var(--petrol) 30%, transparent); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background-color: var(--petrol); color: #fff; font: 700 13px/30px var(--text); }

/* ---------- Bilanz: Kilometer je Monat, Höhenmeter ---------- */
.kachel.k-hm { border-top-color: var(--gruen); }
.monats-diagramm { width: 100%; height: auto; display: block; stroke: none; }
.monats-diagramm * { stroke: none; }
.monats-diagramm .md-flaeche { fill: transparent; }
.monats-diagramm g:hover .md-flaeche { fill: var(--flaeche-2); }
.monats-diagramm .md-vj { fill: var(--grau-bg); }
.monats-diagramm .md-akt { fill: var(--petrol); }
.monats-diagramm text { font: 600 12px var(--text); fill: var(--leise); }
.md-legende { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }
.md-akt-punkt, .md-vj-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--petrol); }
.md-vj-punkt { background: var(--grau-bg); margin-left: 8px; }