:root {
  --bg: #f5f4ef; --surface: #ffffff; --text: #1f2a1f; --muted: #66705f; --line: #dcdcd2;
  --accent: #2f6b3a; --accent-text: #ffffff; --warn: #a15c07; --bad: #a3271e; --good: #2f6b3a;
  --chip-yes: #e1efe1; --chip-no: #f6e1df; --chip-unk: #ecebe4;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141814; --surface: #1d231d; --text: #e7ebe3; --muted: #9aa597; --line: #343c33;
    --accent: #6fb27a; --accent-text: #0f1a10; --warn: #e3a64b; --bad: #ef8a80; --good: #7cc487;
    --chip-yes: #24402a; --chip-no: #4a2623; --chip-unk: #2b312a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.45; }
/* Am PC alles doppelt so groß; Handy bleibt unskaliert */
@media (min-width: 900px) {
  body { zoom: 2; }
  /* Leaflet rechnet mit unskalierten Pixeln – Gegen-Zoom, sonst laden Kacheln nur links */
  #flur-map { zoom: 0.5; }
}
a { color: var(--accent); }
header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
header h1 { font-size: 18px; margin: 0; }
nav { display: flex; gap: 4px; }
nav button { background: none; border: 0; padding: 8px 10px; white-space: nowrap; border-radius: 6px; font: inherit; color: var(--muted); cursor: pointer; }
nav button.active { background: var(--accent); color: var(--accent-text); }
header .spacer { flex: 1; }
main { max-width: none; margin: 0; padding: 8px; }
section.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
h2 { font-size: 16px; margin: 0 0 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted); }
input, select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; min-width: 0; }
button.primary, button.secondary { font: inherit; border-radius: 6px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--accent); }
button.primary { background: var(--accent); color: var(--accent-text); }
button.secondary { background: transparent; color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg); }
.tile .v { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tile .k { font-size: 12px; color: var(--muted); }
.tile.big .v { font-size: 28px; }
.tile.good .v { color: var(--good); } .tile.bad .v { color: var(--bad); }
.tile.hint .k:last-child { color: var(--warn); }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px; margin: 1px 2px 1px 0; white-space: nowrap; }
.chip.ja { background: var(--chip-yes); } .chip.nein { background: var(--chip-no); } .chip.unk { background: var(--chip-unk); }
.muted { color: var(--muted); font-size: 13px; }
.warn { color: var(--warn); font-size: 13px; }
.status-weg { color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.breakdown td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.breakdown tr.sum td { font-weight: 650; border-top: 2px solid var(--text); }
.bar { height: 8px; background: var(--chip-unk); border-radius: 4px; overflow: hidden; min-width: 120px; }
.bar > span { display: block; height: 100%; background: var(--accent); }
td .link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
fieldset.checks { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
fieldset.checks legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
fieldset.checks label { flex-direction: row; align-items: center; gap: 5px; color: var(--text); }
.pill { font: inherit; font-size: 13px; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 14px; padding: 4px 10px; cursor: pointer; }
.pill.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.anfrage { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; background: var(--bg); }
.anfrage textarea { width: 100%; min-height: 150px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px; resize: vertical; }
.anfrage .grid { margin-top: 8px; }
#map { height: 560px; border-radius: 8px; border: 1px solid var(--line); z-index: 0; }
@media (max-width: 800px) { #map { height: 65vh; min-height: 360px; } }
/* Vollbild: Karte füllt den Bildschirm, Knöpfe und Legende bleiben sichtbar */
#map-panel.map-vollbild { position: fixed; inset: 0; z-index: 2000; margin: 0; border-radius: 0; display: flex; flex-direction: column;
  padding: 10px; overflow: auto; }
#map-panel.map-vollbild #map { flex: 1; height: auto; min-height: 0; }
#map-panel.map-vollbild .map-kopf h2, #map-panel.map-vollbild .legend > .muted:last-child { display: none; }
#map-panel.map-vollbild .legend { max-height: 18vh; overflow: auto; margin-top: 6px; }
#map-panel.map-vollbild #zonen-arten, #map-panel.map-vollbild #zonen-ebene { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 6px !important; }
body.kein-scroll { overflow: hidden; }
@media (max-width: 600px) {
  .map-kopf h2 .muted { display: none; }
  #zonen-arten { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  #zonen-arten .pill { white-space: nowrap; }
  .leaflet-touch .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; font-size: 20px; }
}
.legend-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; margin-right: 4px; border: 1px solid rgba(0,0,0,.25); }
.legend-swatch.square { border-radius: 3px; }
/* Nur die Straßenkarte grau – das Luftbild bleibt farbig */
#map .osm-grau { filter: grayscale(1) brightness(1.08) contrast(0.9); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; font-size: 13px; }
.profil-search { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; }
.profil-search input { font-size: 16px; padding: 9px 10px; }
@media (max-width: 600px) { .profil-search { grid-template-columns: 1fr; } }
table.arten td { vertical-align: middle; }
table.arten .muted, #profil-groesse .muted { font-size: 12px; }
#profil-groesse th { white-space: nowrap; vertical-align: middle; }
.leaflet-tooltip { font-size: 13px; line-height: 1.4; }
.profil-search .more-filters { grid-column: 1 / -1; }
.more-filters summary { cursor: pointer; color: var(--accent); font-size: 14px; }
label.inline { flex-direction: row; align-items: center; gap: 8px; }
.pill.small { font-size: 12px; padding: 3px 9px; }
.row.pills { gap: 6px; }
/* Werte im Kartenfeld: Ortsname klein, Wert fett; immer dunkel auf hell, unabhängig vom Farbschema */
.ort-label { background: none; border: 0; pointer-events: none; }
.ort-label > div { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap;
  color: #1b1b1b; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.ort-label span { display: block; font-size: 10px; line-height: 1.1; }
.ort-label b { display: block; font-size: 12px; line-height: 1.2; }
/* Flurstück-Info-Panel */
.flur-map-wrap { position: relative; overflow: hidden; border-radius: 8px; }
.flur-info-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 22%; min-width: 190px;
  background: var(--surface); border-left: 1px solid var(--line);
  border-radius: 0 8px 8px 0; z-index: 450; display: flex;
  transition: transform .25s ease; box-shadow: -2px 0 8px rgba(0,0,0,.08); overflow: hidden;
}
.flur-info-panel.collapsed { transform: translateX(calc(100% - 26px)); }
.flur-info-tab {
  flex-shrink: 0; width: 26px; align-self: stretch;
  background: var(--surface); border: none; border-right: 1px solid var(--line);
  cursor: pointer; color: var(--muted); font-size: 13px; padding: 0;
  display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl;
  gap: 4px; letter-spacing: 1px;
}
.flur-info-tab:hover { background: var(--bg); }
.flur-info-body { flex: 1; overflow-y: auto; padding: 10px 12px; font-size: 12px; line-height: 1.45; }
.info-block { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.info-block:last-child { border-bottom: none; margin-bottom: 0; }
.info-block-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 5px; }
.info-row { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 3px; font-size: 12px; }
.info-key { color: var(--muted); flex-shrink: 0; max-width: 52%; }
.info-val { text-align: right; font-weight: 500; word-break: break-word; }
.info-ok { color: var(--good); }
.info-warn { color: var(--warn); }
.info-na { color: var(--muted); font-style: italic; }
@media (max-width: 600px) { .flur-info-panel { display: none; } }
.leaflet-popup-content { font-size: 13px; line-height: 1.4; }
[hidden] { display: none !important; }
@media (max-width: 800px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.calc > * { min-width: 0; }

/* ---------- Grundstücke: Art-Reiter und Diagramme ---------- */
:root { --s1: #2563b0; --s2: #c4610f; --grid: #e6e6de; }
@media (prefers-color-scheme: dark) { :root { --s1: #4f8fd6; --s2: #c97328; --grid: #2c332b; } }
.s1 { background: var(--s1); } .s2 { background: var(--s2); }
.art-tabs { display: flex; gap: 2px; margin-top: 14px; border-bottom: 2px solid var(--line); overflow-x: auto; }
.art-tab { font: inherit; font-size: 14px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: 8px 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.art-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.chart { margin-top: 6px; }
.hgroup { padding: 8px 0; border-bottom: 1px solid var(--line); }
.hgroup:last-child { border-bottom: 0; }
.hgroup-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.hbar { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px; gap: 10px; align-items: center; font-size: 13px; padding: 2px 0; }
.hbar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 14px; }
.hbar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.hbar-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) { .hbar { grid-template-columns: 110px minmax(0, 1fr) 110px; } }
.cols { display: flex; align-items: flex-end; gap: 4px; height: 190px; padding-top: 18px; }
.col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.col-bar { width: 70%; max-width: 46px; border-radius: 4px 4px 0 0; }
.col-value { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; margin-bottom: 2px; }
.col-label { font-size: 11px; color: var(--muted); margin-top: 4px; text-align: center; height: 28px; line-height: 1.2; overflow: hidden; }
.scatter { width: 100%; height: auto; display: block; }
.scatter .grid { stroke: var(--grid); stroke-width: 1; }
.scatter .axis { fill: var(--muted); font-size: 11px; }
.scatter .dot { fill: var(--s1); fill-opacity: .55; stroke: var(--surface); stroke-width: 1; }
.scatter .dot.gone { fill: none; stroke: var(--s1); stroke-width: 1.5; }
.scatter .dot:hover { fill-opacity: 1; }
.versand { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; background: var(--bg); }
.versand-good { color: var(--good); font-weight: 600; } .versand-bad { color: var(--bad); font-weight: 600; } .versand-hint { color: var(--warn); font-weight: 600; }
.versand .zugang { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
#versand-bild { display: block; max-width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; }
a.button-link { display: inline-block; text-decoration: none; font: inherit; border-radius: 6px; padding: 8px 14px; border: 1px solid var(--accent); }
a.button-link.primary { background: var(--accent); color: var(--accent-text); }
/* Kurzgutachten */
#map.pruefmodus { cursor: crosshair; }
.hint-box { background: var(--chip-unk); border-radius: 6px; padding: 8px 10px; }
.gutachten { font-size: 13px; line-height: 1.45; }
.gutachten-kopf { padding: 6px 8px; border-radius: 6px; margin-bottom: 6px; color: #fff; }
.gutachten-kopf.bad { background: #b2182b; } .gutachten-kopf.hint { background: #b35806; } .gutachten-kopf.good { background: #1b7837; }
.gutachten-bereich { margin-top: 6px; }
.gutachten ul { margin: 2px 0 0; padding-left: 4px; list-style: none; }
.gutachten .stufe-rot { color: #b2182b; } .gutachten .stufe-gelb { color: #b35806; } .gutachten .stufe-info { color: var(--muted); }
.leaflet-popup-content .gutachten .stufe-info { color: #555; }
#gutachten .gutachten { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--bg); }
.chart-tip { position: fixed; z-index: 1000; max-width: 320px; pointer-events: none; background: var(--text); color: var(--surface);
  font-size: 12px; line-height: 1.4; padding: 6px 8px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
/* Handy: Kopfzeile nicht festkleben, Reiter waagrecht scrollbar statt umbrechen */
@media (max-width: 899px) {
  #flur-map { height: 70vh !important; }
}
@media (max-width: 700px) {
  header { position: static; gap: 8px; }
  header h1 { font-size: 16px; }
  nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  nav button { white-space: nowrap; }
}

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px; width: 100%; max-width: 340px; display: grid; gap: 12px; }
.login h1 { margin: 0; font-size: 20px; }
.error { color: var(--bad); font-size: 14px; min-height: 1.2em; }

/* ===== Aufklappbare Bereiche im Reiter Grundstücke & Rechner ===== */
details.panel.more { padding: 0; }
details.panel.more > summary { padding: 14px 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.panel.more > summary::-webkit-details-marker, details.more-fields > summary::-webkit-details-marker { display: none; }
details.panel.more > summary::before, details.more-fields > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
details[open].panel.more > summary::before, details[open].more-fields > summary::before { transform: rotate(90deg); }
details.panel.more[open] { padding: 0 16px 4px; }
details.panel.more[open] > summary { padding-inline: 0; }
details.panel.more > section.panel, details.panel.more .calc > section.panel { border: 0; padding: 12px 0; margin: 0; border-top: 1px solid var(--line); border-radius: 0; }
details.more-fields { grid-column: 1 / -1; }
details.more-fields > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--accent); font-weight: 600; padding: 4px 0; }
details.more-fields[open] > summary { margin-bottom: 10px; }

/* ===== Kalender ===== */
:root {
  --h-wit: #4d7c0f; --h-vei: #be123c; --h-mfk: #1d4ed8; --h-zell: #7c3aed; --h-ger: #c026d3;
  --h-est: #0e7490; --h-reich: #b45309; --h-ran: #475569; --h-mag: #0f766e; --h-dorf: #a16207; --h-rim: #9333ea;
  --k-frist: #c2410c; --k-frist-bg: #fdeee5; --k-ersch: #1d7a52; --k-ersch-bg: #e4f3ec; --k-todo: #1d4ed8; --k-todo-bg: #e5edfd;
  --k-today: #2f6b3a; --k-weekend: rgba(0,0,0,.025);
}
@media (prefers-color-scheme: dark) {
  :root {
    --h-wit: #a3e635; --h-vei: #fb7185; --h-mfk: #60a5fa; --h-zell: #a78bfa; --h-ger: #e879f9;
    --h-est: #22d3ee; --h-reich: #f59e0b; --h-ran: #94a3b8; --h-mag: #2dd4bf; --h-dorf: #facc15; --h-rim: #c084fc;
    --k-frist: #fb923c; --k-frist-bg: #3a2418; --k-ersch: #4ade80; --k-ersch-bg: #16301f; --k-todo: #93c5fd; --k-todo-bg: #1b2a44;
    --k-today: #6fb27a; --k-weekend: rgba(255,255,255,.025);
  }
}
.kal { display: flex; flex-direction: column; gap: 16px; }
.kal .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 650; color: var(--muted); }
.kal button { font: inherit; color: inherit; cursor: pointer; }
.kal button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kal-hero { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 12px; }
.kal-hero > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kal-hero-main { background: linear-gradient(135deg, var(--k-frist-bg), var(--surface)) !important; border-color: color-mix(in srgb, var(--k-frist) 35%, var(--line)) !important; }
.kal-hero-main .lbl { color: var(--k-frist); }
.kal-hero-main.urgent .lbl::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--k-frist); margin-right: 6px; vertical-align: 1px; animation: kal-pulse 1.6s infinite; }
@keyframes kal-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .kal-hero-main.urgent .lbl::before { animation: none; } }
.kal-hero-main .big { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.kal-hero-main ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.kal-hero-main li i { display: inline-block; margin-right: 6px; }
.kal-hero-main li b { margin-right: 4px; }
.kal-hero-main li i, .kal-offen li i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; transform: translateY(-1px); }
.kal-stat .v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kal-stat .s { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kal-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; container-type: inline-size; }
.kal-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.kal-nav { display: flex; align-items: center; gap: 6px; }
.kal-title { margin: 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; min-width: 9.5ch; text-align: center; }
.kal-title span { color: var(--muted); font-weight: 500; }
.kal-ib { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); font-size: 20px !important; line-height: 1; display: grid; place-items: center; padding: 0 0 2px; }
.kal-ib:hover, .kal-btn:hover { border-color: var(--accent); }
.kal-btn { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 7px 12px; font-size: 13px !important; white-space: nowrap; }
.kal-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kal-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.kal-seg button { border: 0; background: transparent; padding: 7px 12px; font-size: 13px !important; }
.kal-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.kal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; }
.kal-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 4px 11px; font-size: 12.5px !important; }
.kal-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.kal-chip[aria-pressed="false"] { opacity: .5; }
.kal-chip[aria-pressed="false"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.kal-chip-all { color: var(--muted) !important; border-style: dashed; }

.kal-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container (min-width: 820px) { .kal-main { grid-template-columns: minmax(0, 1fr) 250px; } }

.kal-wh { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 4px; }
.kal-wh span { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: center; padding: 4px 0; }
.kal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.kal-day { position: relative; border: 0; background: var(--surface); min-height: 54px; padding: 5px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: left; min-width: 0; }
.kal-day.we { background: color-mix(in srgb, var(--surface) 97%, var(--text)); }
.kal-day:hover { background: color-mix(in srgb, var(--surface) 92%, var(--accent)); }
.kal-day.out { color: var(--muted); }
.kal-day.out .kal-n { opacity: .45; }
.kal-day.past .kal-pills, .kal-day.past .kal-dots { opacity: .45; }
.kal-n { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.kal-day.today .kal-n { background: var(--k-today); color: var(--accent-text); }
.kal-day.sel { box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; }
.kal-pills { display: none; flex-direction: column; gap: 2px; width: 100%; min-width: 0; }
.kal-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.kal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.kal-dots i.t-f { border-radius: 1px; transform: rotate(45deg); box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 2.5px var(--k-frist); }
@container (min-width: 560px) {
  .kal-day { min-height: 108px; align-items: stretch; padding: 4px 4px 6px; }
  .kal-n { width: 24px; height: 24px; font-size: 12.5px; }
  .kal-pills { display: flex; }
  .kal-dots { display: none; }
}
.kal-pill { display: flex; align-items: center; gap: 4px; font-size: 10.5px; line-height: 1.3; padding: 2px 5px; border-radius: 4px; min-width: 0;
  background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: var(--text); white-space: nowrap; overflow: hidden; }
.kal-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.kal-pill b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.kal-pill span { display: none; }
@container (min-width: 1000px) { .kal-pill span { display: inline; color: var(--muted); overflow: hidden; text-overflow: ellipsis; } }
.kal-pill.t-f { background: var(--k-frist-bg); box-shadow: inset 2px 0 0 var(--k-frist); }
.kal-pill.t-f span { color: var(--k-frist); font-weight: 600; }
.kal-pill.t-t { background: var(--k-todo-bg); box-shadow: inset 2px 0 0 var(--k-todo); }
.kal-pill.t-t span { color: var(--k-todo); font-weight: 600; }
.kal-more { font-size: 10.5px; color: var(--muted); padding-left: 5px; font-weight: 600; }
.kal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.kal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.kal-legend .lg { width: 12px; height: 10px; border-radius: 3px; }
.kal-legend .lg.t-f { background: var(--k-frist-bg); box-shadow: inset 2px 0 0 var(--k-frist); }
.kal-legend .lg.t-e { background: var(--k-ersch-bg); box-shadow: inset 2px 0 0 var(--k-ersch); }
.kal-legend .lg.t-t { background: var(--k-todo-bg); box-shadow: inset 2px 0 0 var(--k-todo); }

.kal-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kal-side-head { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.kal-side-head h3 { margin: 2px 0 0; font-size: 16px; }
.kal-side h4 { margin: 10px 0 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.kal-empty { color: var(--muted); font-size: 13px; margin: 6px 0; }

.kal-ev { display: flex; gap: 10px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); box-shadow: inset 3px 0 0 var(--c); min-width: 0; }
.kal-ev.past { opacity: .5; }
.kal-ev-date { width: 38px; flex: none; text-align: center; line-height: 1.1; padding-top: 1px; }
.kal-ev-date b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.kal-ev-date span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.kal-ev-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kal-ev-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.kal-heft { font-weight: 650; font-size: 13.5px; }
.kal-ev-note { font-size: 12.5px; }
.kal-ev-mail { font-size: 12px; color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-ev-mail:hover { color: var(--accent); text-decoration: underline; }
.kal-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; }
.kal-tag.t-f { background: var(--k-frist-bg); color: var(--k-frist); }
.kal-tag.t-e { background: var(--k-ersch-bg); color: var(--k-ersch); }
.kal-tag.t-t { background: var(--k-todo-bg); color: var(--k-todo); }
.kal-tag.t-o { background: var(--chip-unk); color: var(--muted); }
.kal-soon { font-size: 11px; font-weight: 600; color: var(--k-frist); }

.kal-list { display: flex; flex-direction: column; gap: 14px; }
.kal-lmonth { display: flex; flex-direction: column; gap: 6px; }
.kal-lmonth h3 { margin: 4px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); position: sticky; top: 0; background: var(--surface); padding: 4px 0; z-index: 1; }
@container (min-width: 700px) { .kal-list .kal-lmonth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .kal-lmonth h3 { grid-column: 1 / -1; } }

.kal-section { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; }
.kal-section h2 { margin: 0 0 12px; }
.kal-hefte { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.kal-heftcard { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg); border-top: 3px solid var(--c); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kal-heftcard.offen { border-top-style: dashed; }
.kal-heftcard header { all: unset; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kal-heftcard header i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.kal-heftcard h4 { margin: 0; font-size: 14px; flex: 1; min-width: 0; }
.kal-rueck { font-size: 11px; font-weight: 700; background: var(--k-ersch-bg); color: var(--k-ersch); padding: 2px 7px; border-radius: 999px; }
.kal-orte { margin: 0; font-size: 12px; color: var(--muted); }
.kal-heftcard dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12.5px; }
.kal-heftcard dt { color: var(--muted); }
.kal-heftcard dd { margin: 0; min-width: 0; }
.kal-heftcard a { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-offen ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.kal-offen li { display: flex; gap: 8px; align-items: baseline; max-width: 90ch; }

@media (max-width: 899px) {
  .kal-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .kal-hero-main { grid-column: 1 / -1; }
  .kal-hero > div { padding: 10px 12px; }
  .kal-stat .v { font-size: 20px; }
  .kal-stat .lbl { font-size: 10px; letter-spacing: .04em; overflow-wrap: anywhere; hyphens: auto; }
  .kal-stat .s { white-space: normal; font-size: 11px; }
  .kal-panel { padding: 12px; }
  .kal-bar { flex-direction: column; align-items: stretch; }
  .kal-nav { justify-content: space-between; }
  .kal-title { font-size: 19px; flex: 1; }
  .kal-tools { justify-content: space-between; }
  .kal-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -12px; padding-inline: 12px; scrollbar-width: none; }
  .kal-chip { flex: none; }
  .kal-grid { border-radius: 8px; }
  .kal-hefte { grid-template-columns: minmax(0, 1fr); }
}