/* Feierklo Verwaltung – Styles
   Gleiche Designsprache wie feierklo.de (Farben, Schriften, Radien), aber als Werkzeug: dichter, klar, schnell.
   Handy zuerst; ab 1024 px Seitenleiste statt unterer Leiste. Keine externen Anfragen. */

/* ---------- Schriften ---------- */
@font-face {
  font-family: "Young Serif";
  src: url("../fonts/young-serif-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens (wie Website) ---------- */
:root {
  --tanne: #0F5C55;
  --tanne-tief: #0B2E2A;
  --porzellan: #F5F6F3;
  --kachel: #E4ECE8;
  --gelb: #FFD166;
  --stein: #56645F;
  --weiss: #FFFFFF;
  --linie: #CBD8D2;
  --frei: #2F8A5B;
  --besetzt: #C2412D;
  --hell-auf-dunkel: #B9C9C4;

  --f-head: "Young Serif", Georgia, "Times New Roman", serif;
  --f-body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --r-kachel: 12px; --r-ctrl: 10px; --r-klein: 6px;
  --fokus: 0 0 0 2px var(--tanne-tief), 0 0 0 5px var(--gelb);
  --schatten: 0 10px 30px -12px rgba(11, 46, 42, .35);
  --rand: 16px;
  --leiste: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 640px) { :root { --rand: 24px; } }
@media (min-width: 1280px) { :root { --rand: 40px; } }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  font-family: var(--f-body); font-size: 16px; line-height: 1.5;
  color: var(--tanne-tief); background: var(--porzellan);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; text-wrap: balance; }
h1 { font-family: var(--f-head); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); letter-spacing: -.01em; }
h2 { font-size: 1.0625rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0 0 .9em; }
a { color: var(--tanne); text-underline-offset: .18em; }
b, strong { font-weight: 650; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; background: var(--kachel); padding: .1em .35em; border-radius: 4px; overflow-wrap: anywhere; }
small, .klein { font-size: .875rem; color: var(--stein); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }

.sprung { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--tanne-tief); color: #fff; padding: 10px 14px; border-radius: var(--r-ctrl); }
.sprung:focus { top: 8px; }
.testband { background: var(--gelb); color: var(--tanne-tief); font-size: .8125rem; font-weight: 600; text-align: center; padding: 4px var(--rand); }

/* ---------- Marke ---------- */
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marke-zeichen { width: 32px; height: 32px; flex: none; }
.marke-zeichen rect { fill: var(--tanne); }
.marke-zeichen path { fill: var(--gelb); }
.marke-text { font-family: var(--f-head); font-size: 1.4rem; line-height: 1; }
.marke-text b { font-weight: 400; color: var(--tanne); }
.marke-gross .marke-zeichen { width: 44px; height: 44px; }
.marke-gross .marke-text { font-size: 2rem; }

/* ---------- Symbole ---------- */
.sym { width: 22px; height: 22px; flex: none; }

/* ---------- Rahmen: Handy ---------- */
.seitenleiste { display: none; }
.haupt { padding: 0 var(--rand) calc(var(--leiste) + 32px + env(safe-area-inset-bottom)); outline: none; max-width: 1240px; }
.kopfzeile-handy {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  margin: 0 calc(-1 * var(--rand)) 8px; padding: calc(10px + env(safe-area-inset-top)) var(--rand) 10px;
  background: rgba(245, 246, 243, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopfzeile-titel { font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopfzeile-konto { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; color: var(--tanne-tief); border-radius: var(--r-ctrl); }

.untenleiste {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--leiste) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--weiss); border-top: 1px solid var(--linie); box-shadow: 0 -6px 20px -16px rgba(11, 46, 42, .5);
}
.untenleiste a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--stein); text-decoration: none; font-size: .75rem; font-weight: 600; position: relative;
}
.untenleiste a.ist-aktiv { color: var(--tanne); }
.untenleiste a.ist-aktiv::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--tanne); }

/* ---------- Rahmen: PC ---------- */
@media (min-width: 1024px) {
  .rahmen { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }
  .seitenleiste {
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    background: var(--tanne-tief); color: var(--weiss); padding: 22px 14px 16px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
  }
  .ist-test .seitenleiste { height: calc(100dvh - 27px); top: 0; }
  .seitenleiste .marke { padding: 0 10px 22px; }
  .seitenleiste .marke-text b { color: var(--gelb); }
  .menue { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .menue-system { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .menue a, .ich-name {
    display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 7px 12px;
    color: var(--hell-auf-dunkel); text-decoration: none; border-radius: var(--r-ctrl); font-weight: 550;
  }
  .menue a:hover, .ich-name:hover { color: var(--weiss); background: rgba(255, 255, 255, .06); }
  .menue a.ist-aktiv, .ich-name.ist-aktiv { color: var(--weiss); background: rgba(255, 255, 255, .1); box-shadow: inset 3px 0 0 var(--gelb); }
  .menue a.ist-spaeter { opacity: .62; }
  .menue .stufe { margin-left: auto; color: var(--hell-auf-dunkel); font-size: .6875rem; white-space: nowrap; }
  .menue a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ich { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 4px; }
  .ich-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ich .knopf-text { color: var(--hell-auf-dunkel); padding: 6px 12px; }
  .ich .knopf-text:hover { color: var(--weiss); }
  .haupt { padding: 32px var(--rand) 64px; }
  .kopfzeile-handy, .untenleiste, .abmelden-handy { display: none; }
}

/* ---------- Seitenkopf ---------- */
.seitenkopf { margin: 16px 0 24px; }
.seitenkopf h1 { margin-bottom: .2em; }
.unterzeile { color: var(--stein); max-width: 70ch; margin: 0; }
.seitenkopf-aktionen { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pause-kopf .datum { margin: 0 0 4px; color: var(--stein); font-weight: 600; font-size: .875rem; }
@media (min-width: 1024px) { .seitenkopf { margin-top: 0; } }

/* ---------- Bausteine ---------- */
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-kachel); padding: 20px; }
.karte > :last-child { margin-bottom: 0; }
.karte h2 { margin-bottom: .75em; }
.karte-schmal { width: 100%; max-width: 440px; }
.karte-breit { width: 100%; max-width: 720px; }
.karte-hervor { border-color: var(--tanne); box-shadow: inset 4px 0 0 var(--tanne); margin-bottom: 20px; }

.raster { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) {
  .raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-seite { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
}

.block { margin-bottom: 28px; }
.block-titel { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-bottom: 10px; }
.zahl { font-variant-numeric: tabular-nums; }
.block-titel .zahl { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--r-klein); background: var(--tanne); color: var(--weiss); font-size: .8125rem; }

.leer { background: var(--kachel); border-radius: var(--r-kachel); padding: 16px 18px; color: var(--tanne-tief); }
.leer p { margin: 0; }
.leer p + p { margin-top: .6em; }
.leer-gross { padding: 28px 24px; max-width: 640px; }
.leer-knapp { padding: 12px 14px; font-size: .9375rem; }
.leer-knapp span { color: var(--stein); }

.karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .karten { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.karte-aufgabe { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.karte-aufgabe p { margin: 0; }
.karte-warnung { border-left: 4px solid var(--gelb); }
.karte-fehler { border-left: 4px solid var(--besetzt); }
.karte-info { border-left: 4px solid var(--tanne); }
.karte-aktionen { display: flex; justify-content: flex-end; gap: 8px; }

.kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
@media (min-width: 900px) { .kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kennzahlen div { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-kachel); padding: 12px 14px; }
.kennzahlen dt { font-size: .8125rem; color: var(--stein); }
.kennzahlen dd { margin: 2px 0 0; font-size: 1.125rem; font-weight: 650; font-variant-numeric: tabular-nums; }

.werte { margin: 0; display: grid; gap: 8px; }
.werte div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--kachel); padding-bottom: 8px; }
.werte dt { color: var(--stein); }
.werte dd { margin: 0; font-weight: 600; text-align: right; }

.liste { list-style: none; margin: 0 0 12px; padding: 0; }
.liste-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--kachel); }
.liste-zeile small { display: block; }
.marke-klein { font-size: .75rem; font-weight: 650; background: var(--kachel); color: var(--tanne); padding: 2px 6px; border-radius: var(--r-klein); }
.punkte { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }

.mehr-liste { list-style: none; margin: 0 0 24px; padding: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-kachel); overflow: hidden; }
.mehr-liste a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px; color: var(--tanne-tief); text-decoration: none; font-weight: 550; border-bottom: 1px solid var(--kachel); }
.mehr-liste li:last-child a { border-bottom: 0; }
.mehr-liste a.ist-spaeter { color: var(--stein); }
.mehr-liste .stufe { margin-left: auto; }

/* ---------- Hinweise ---------- */
.hinweise { display: grid; gap: 8px; margin: 12px 0 20px; }
.hinweis { margin: 0; padding: 12px 14px; border-radius: var(--r-ctrl); background: var(--kachel); border-left: 4px solid var(--tanne); }
.hinweis-ok { border-left-color: var(--frei); }
.hinweis-warnung { border-left-color: var(--gelb); background: #FFF6DD; }
.hinweis-fehler { border-left-color: var(--besetzt); background: #FBE9E5; }
.hinweis-info { border-left-color: var(--tanne); }
.karte .hinweis, .haupt > .hinweis { margin-bottom: 16px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .55em 1.1em; border: 1.5px solid transparent; border-radius: var(--r-ctrl);
  font-weight: 650; text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.knopf:active { transform: translateY(1px); }
.knopf-haupt { background: var(--tanne); color: var(--weiss); }
.knopf-haupt:hover { background: var(--tanne-tief); color: var(--weiss); }
.knopf-zweit { background: transparent; color: var(--tanne); border-color: var(--tanne); }
.knopf-zweit:hover { background: var(--kachel); }
.knopf-gefahr { background: transparent; color: var(--besetzt); border-color: var(--besetzt); }
.knopf-gefahr:hover { background: #FBE9E5; }
.knopf-klein { min-height: 36px; padding: .35em .8em; font-size: .875rem; }
.knopf-breit { width: 100%; }
.knopf-text { background: none; border: 0; padding: 0; color: var(--tanne); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 0; }
.leiste-speichern { position: sticky; bottom: calc(var(--leiste) + env(safe-area-inset-bottom)); display: flex; gap: 8px; padding: 12px 0; margin-top: 16px; background: linear-gradient(transparent, var(--porzellan) 30%); }
@media (min-width: 1024px) { .leiste-speichern { bottom: 0; } }

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 16px; }
.feld { display: grid; gap: 6px; margin: 0; border: 0; padding: 0; min-width: 0; }
.feld > span, .feld > label, .feld legend { font-weight: 600; font-size: .9375rem; padding: 0; }
.karte .feld + .feld { margin-top: 14px; }
.formular .feld + .feld { margin-top: 0; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  background: var(--weiss); border: 1.5px solid var(--linie); border-radius: var(--r-ctrl);
}
textarea { min-height: 96px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--stein); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--tanne-tief); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--tanne); flex: none; }
.haken { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.haken small { display: block; }
.code-eingabe { font-size: 1.5rem !important; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }
.suchleiste { display: flex; gap: 8px; margin-bottom: 16px; max-width: 560px; }

/* ---------- Tabellen ---------- */
.tabelle-rahmen { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabelle th { text-align: left; font-size: .8125rem; font-weight: 650; color: var(--stein); padding: 8px 10px; border-bottom: 1.5px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: 10px; border-bottom: 1px solid var(--kachel); vertical-align: top; }
.tabelle-dicht td { padding: 7px 10px; }
.tabelle .zahl { text-align: right; }
.tabelle tr.ist-gesperrt td { color: var(--stein); }
.tabelle .details code { font-size: .8rem; }
.zelle-aktionen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.blaettern { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; color: var(--stein); font-size: .875rem; }

.status { display: inline-block; font-size: .8125rem; font-weight: 650; padding: 2px 8px; border-radius: var(--r-klein); background: var(--kachel); color: var(--tanne-tief); white-space: nowrap; }
.status-ok, .status-aktiv { background: #E1F1E7; color: #1F6040; }
.status-fehler, .status-gesperrt { background: #FBE9E5; color: #9A2F1F; }
.status-eingeladen, .status-Einrichtung-offen, .status-laeuft { background: #FFF1CC; color: #6B4B00; }
.status-entfernt { color: var(--stein); }

/* ---------- Anmeldung (schlichtes Layout) ---------- */
.schlicht-haupt { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; padding: calc(40px + env(safe-area-inset-top)) var(--rand) 40px; }
@media (min-height: 760px) { .schlicht-haupt { padding-top: 10vh; } }
.schlicht-haupt .hinweise { width: 100%; max-width: 440px; margin: 0; }
.schritte { padding-left: 1.2em; margin: 0 0 16px; display: grid; gap: 4px; }
.qr { margin: 0 0 18px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.qr img { width: 220px; height: 220px; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-kachel); padding: 6px; image-rendering: pixelated; }
.qr figcaption { font-size: .875rem; color: var(--stein); }
.geheim { font-size: 1rem; letter-spacing: .05em; cursor: copy; }
.codes { columns: 2; gap: 16px; padding-left: 1.6em; margin: 0 0 16px; font-size: 1.05rem; }
.codes li { margin-bottom: 6px; }
.schluessel { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--tanne-tief); color: var(--weiss); padding: 14px 16px; border-radius: var(--r-ctrl); font-size: .85rem; }
.link-kasten code { display: block; padding: 10px 12px; font-size: .875rem; }
.aufklapp { margin-top: 16px; }
.aufklapp summary { cursor: pointer; color: var(--tanne); font-weight: 600; min-height: 32px; }
.aufklapp p { margin-top: 8px; }

/* ---------- Tastaturkürzel-Hilfe ---------- */
.kuerzel-hilfe { border: 0; border-radius: var(--r-kachel); padding: 24px; box-shadow: var(--schatten); max-width: 420px; }
.kuerzel-hilfe::backdrop { background: rgba(11, 46, 42, .4); }
.kuerzel-hilfe dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; }
.kuerzel-hilfe dt kbd { font-family: inherit; font-weight: 650; background: var(--kachel); padding: 2px 7px; border-radius: 5px; }
.kuerzel-hilfe dd { margin: 0; }

/* ---------- Druck (Wiederherstellungscodes) ---------- */
@media print {
  .seitenleiste, .untenleiste, .kopfzeile-handy, .testband, .aktionen, .marke { display: none !important; }
  body { background: #fff; }
  .karte { border: 0; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =====================================================================
   Stufe 2: Buchungen, Kalender, Marktanalyse
   ===================================================================== */
.abstand-oben { margin-top: 16px; }
.abstand-unten { margin-bottom: 16px; }
.zurueck { margin: 8px 0 0; font-size: .9375rem; }
.zurueck a::before { content: "\2039\00a0"; }
.stapel { display: grid; gap: 16px; align-content: start; }
.abschnitt-titel { margin: 32px 0 12px; font-family: var(--f-head); font-weight: 400; font-size: 1.5rem; }
form.inline { display: inline; }

/* Karten auf „Pause“ */
.karte-kopf { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.karte-kopf span { font-variant-numeric: tabular-nums; font-weight: 650; }
.karte-aufgabe > div:first-child p:last-child { margin: 0; }
.kurzliste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: .9375rem; }
.kurzliste li { padding: 8px 0; border-top: 1px solid var(--kachel); }
.karte-neu p:first-child { margin: 0; }

/* Terminlisten */
.terminliste { list-style: none; margin: 0; padding: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-kachel); overflow: hidden; }
.terminliste li + li { border-top: 1px solid var(--kachel); }
.terminliste a { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; min-height: 56px; color: inherit; text-decoration: none; }
.terminliste a:hover { background: var(--porzellan); }
.t-zeit { font-size: .875rem; font-weight: 650; color: var(--stein); font-variant-numeric: tabular-nums; line-height: 1.3; }
.t-text { min-width: 0; }
.t-text small { color: var(--stein); }
.t-helfer { font-size: .8125rem; font-weight: 650; color: var(--tanne); text-align: right; }
.t-helfer.ist-offen { color: #8A5A00; background: #FFF1CC; padding: 2px 8px; border-radius: var(--r-klein); }
.ist-erledigt .t-text { text-decoration: line-through; color: var(--stein); }
.terminliste-gross a { min-height: 72px; }

/* Filter, Tabellen mit Detailansicht */
.filterleiste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filterleiste input[type=search] { flex: 1 1 220px; }
.filterleiste select { flex: 0 1 180px; width: auto; }
.arbeitsbereich { display: grid; gap: 16px; }
@media (min-width: 1100px) {
  .arbeitsbereich.mit-detail { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
  .arbeitsbereich-detail { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; }
}
.arbeitsbereich-detail { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-kachel); padding: 18px; }
.detail-schliessen { display: flex; gap: 16px; justify-content: flex-end; margin: -4px 0 8px; font-size: .875rem; }
.tabelle-klickbar tbody tr:hover { background: var(--porzellan); }
.tabelle-klickbar tr.ist-gewaehlt { background: var(--kachel); }
.tabelle-klickbar td:first-child a { font-weight: 650; }
.sortieren { color: inherit; text-decoration: none; }
.sortieren.ist-aktiv { color: var(--tanne-tief); }
.tabelle tr.summe td { font-weight: 700; border-top: 1.5px solid var(--linie); }
.tabelle-hoch { max-height: 420px; overflow-y: auto; }

.status-b-anfrage { background: #FFF1CC; color: #6B4B00; }
.status-b-bestaetigt { background: #E1F1E7; color: #1F6040; }
.status-b-geliefert, .status-b-zurueck { background: var(--kachel); color: var(--tanne); }
.status-b-abgeschlossen { background: var(--porzellan); color: var(--stein); }
.status-b-storniert { background: #FBE9E5; color: #9A2F1F; }

/* Buchung im Detail */
.detail-kopf p { margin: 0 0 6px; }
.detail-titel { font-family: var(--f-head); font-weight: 400; font-size: 1.5rem; margin: 0 0 6px; }
.aktionen-status { margin: 12px 0 18px; }
.aufklapp-knopf summary { list-style: none; }
.aufklapp-knopf summary::-webkit-details-marker { display: none; }
.mini-formular { gap: 10px; margin-top: 10px; }
.notiz { background: var(--porzellan); border-radius: var(--r-ctrl); padding: 10px 12px; margin: 10px 0 0; }
.karte h3 { margin-top: 20px; }

/* Formulare (Buchung anlegen, Termin) */
.feldreihe { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.feld-schmal { max-width: 140px; }
.wahlreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl { position: relative; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; }
.wahl span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--linie); border-radius: var(--r-ctrl); background: var(--weiss); font-weight: 600; }
.wahl input:checked + span { border-color: var(--tanne); background: var(--kachel); color: var(--tanne-tief); box-shadow: inset 0 0 0 1px var(--tanne); }
.wahl input:focus-visible + span { box-shadow: var(--fokus); }
.preisvorschau { position: sticky; top: 16px; display: grid; gap: 12px; }
.preiszeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9375rem; }
.preiszeilen li { display: flex; justify-content: space-between; gap: 12px; }
.preiszeilen li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.preissumme { display: flex; justify-content: space-between; align-items: baseline; border-top: 1.5px solid var(--linie); padding-top: 10px; margin: 0; }
.preissumme b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.feld-zeile { grid-template-columns: 1fr 110px auto; align-items: center; column-gap: 8px; }
.feld-zeile > span:first-child { font-weight: 550; }
.eingabe-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.einheit { color: var(--stein); }
.unten-aktion { position: sticky; bottom: calc(var(--leiste) + env(safe-area-inset-bottom) + 8px); margin-top: 16px; }
@media (min-width: 1024px) { .unten-aktion { position: static; max-width: 360px; } }

/* Kalender */
.kalender-steuerung { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.umschalter { display: inline-flex; flex-wrap: wrap; background: var(--weiss); border: 1.5px solid var(--linie); border-radius: var(--r-ctrl); padding: 3px; gap: 2px; }
.umschalter a { padding: 7px 14px; border-radius: 7px; text-decoration: none; color: var(--tanne-tief); font-weight: 600; font-size: .9375rem; }
.umschalter a.ist-aktiv { background: var(--tanne); color: var(--weiss); }
.blaetterer { display: flex; gap: 6px; }
.monat { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-kachel); overflow: hidden; }
.monat-kopf, .monat-woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.monat-kopf span { padding: 8px; font-size: .8125rem; font-weight: 650; color: var(--stein); border-bottom: 1px solid var(--linie); }
.monat-tag { min-height: 112px; padding: 4px 5px 6px; border-right: 1px solid var(--kachel); border-bottom: 1px solid var(--kachel); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.monat-woche .monat-tag:nth-child(7) { border-right: 0; }
.monat-tag.ist-fremd { background: var(--porzellan); }
.monat-tag.ist-fremd .monat-zahl { color: var(--stein); }
.monat-tag.ist-heute .monat-zahl { background: var(--tanne); color: var(--weiss); }
.monat-tag.ist-belegt { background: #FCEFEC; }
.monat-tag.ist-ziel { outline: 2px dashed var(--tanne); outline-offset: -3px; }
.monat-zahl { align-self: flex-start; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 6px; font-size: .875rem; font-weight: 650; text-decoration: none; color: var(--tanne-tief); }
.monat-zahl:hover { background: var(--kachel); }
.termin, .beleg { display: block; font-size: .75rem; line-height: 1.3; padding: 3px 6px; border-radius: 5px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.termin { background: var(--kachel); color: var(--tanne-tief); border-left: 3px solid var(--tanne); cursor: grab; }
.termin-selbstabholung, .termin-rueckgabe { border-left-color: var(--stein); }
.termin-wartung { border-left-color: var(--besetzt); }
.termin.ohne-helfer { background: #FFF1CC; }
.termin.ist-erledigt { opacity: .55; text-decoration: line-through; }
.beleg { color: #9A2F1F; font-weight: 600; background: transparent; padding-left: 2px; }
.beleg-sperre { color: var(--stein); }
.tag-block { margin-bottom: 18px; }
.tag-titel { font-size: 1rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.tag-leer { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--kachel); margin-bottom: 6px; }
.tag-leer .tag-titel { margin: 0; color: var(--stein); font-weight: 550; }
.beleg-zeile { display: flex; gap: 10px; align-items: baseline; margin: 0 0 8px; font-size: .875rem; }
@media (max-width: 767px) {
  .monat-tag { min-height: 64px; padding: 2px; }
  .termin, .beleg { font-size: .6875rem; padding: 2px 3px; }
}

/* Marktanalyse */
.kennzahlen-gross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .kennzahlen-gross { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kennzahlen-gross { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kennzahlen-gross dd { font-size: 1.6rem; }
.kennzahlen small { display: block; color: var(--stein); font-size: .8125rem; margin-top: 2px; }
.balken-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.balken-liste li { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: .875rem; }
.b-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-balken { width: 100%; height: 14px; background: var(--porzellan); border-radius: 3px; }
.b-balken rect { fill: var(--tanne); }
.b-wert { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; min-width: 64px; text-align: right; }
.b-wert small { font-weight: 400; color: var(--stein); }
.karte-plz { width: 100%; max-width: 560px; height: auto; background: var(--porzellan); border-radius: var(--r-ctrl); }
.k-hintergrund circle { fill: #C3D0CA; }
.k-ringe circle { fill: none; stroke: var(--stein); stroke-width: .4; stroke-dasharray: 2 2; }
.k-ringe text { font-size: 4.4px; fill: var(--stein); font-family: var(--f-body); }
.k-punkte circle { fill: rgba(15, 92, 85, .72); stroke: var(--weiss); stroke-width: .5; }
.k-orte text { font-size: 5.2px; fill: var(--tanne-tief); font-family: var(--f-body); font-weight: 600; paint-order: stroke; stroke: var(--porzellan); stroke-width: 1.2px; }
.k-orte .k-lohne { font-size: 6px; fill: var(--tanne); }

@media (min-width: 1280px) { .raster-karte { grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); } }