/* WOMO – App-Layout auf Basis des Modernist-Systems (modernist.css). Mobile first. */

:root {
  --nav-hoehe: 58px;
  --inhalt-breite: 960px;
  --leise: var(--color-neutral-700);
}

html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
body.mit-nav { padding-bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom)); }
h1 { font-size: 32px; margin-top: var(--space-2); }
h2 { font-size: 20px; }
.text-leise { color: var(--leise); font-size: 13px; }
code { font-family: ui-monospace, Consolas, monospace; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-4);
  padding: calc(var(--space-2) + env(safe-area-inset-top)) var(--space-4) var(--space-2);
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-text);
}
.kopf-marke {
  font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: -0.02em;
  color: var(--color-text); text-decoration: none; margin-right: auto;
}
.kopf-nav { display: none; }
.kopf-nav a, .kopf-nav .folgt { font-size: 14px; font-weight: 600; color: inherit; text-decoration: none; }
.kopf-nav a:hover, .kopf-nav a[aria-current='page'] { color: var(--color-accent-700); }
.kopf-suche { color: var(--color-text); }
.kopf-suche:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* ---------- Navigation unten (Handy) ---------- */
.fuss-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-bg);
  border-top: 2px solid var(--color-divider);
  font-size: 12px; font-weight: 600;
}
.fuss-nav a, .fuss-nav .folgt {
  display: flex; flex-direction: column; justify-content: center;
  min-height: var(--nav-hoehe); padding: 0 var(--space-3);
  color: var(--color-text); text-decoration: none;
}
.fuss-nav a:hover { background: var(--color-neutral-100); }
.fuss-nav a[aria-current='page'] { color: var(--color-accent-700); box-shadow: inset 0 3px 0 var(--color-accent); }
.folgt { color: var(--color-neutral-500) !important; cursor: default; }
.folgt small { font-size: 10px; font-weight: 400; }

@media (min-width: 900px) {
  body.mit-nav { padding-bottom: 0; }
  .fuss-nav { display: none; }
  .kopf-nav { display: flex; gap: var(--space-6); }
  .kopf-marke { margin-right: var(--space-6); }
  .kopf-suche { margin-left: auto; }
}

/* ---------- Inhalt ---------- */
.inhalt {
  max-width: var(--inhalt-breite); margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-8);
}
.zurueck {
  display: inline-block; margin-bottom: var(--space-2);
  font-size: 14px; font-weight: 600; color: var(--color-accent-700); text-decoration: none;
}

/* Abschnittsüberschrift wie im Entwurf 1b: klein, Versalien, kräftige Linie */
.abschnitt {
  margin: var(--space-6) calc(-1 * var(--space-4)) 0;
  padding: 0 var(--space-4) 6px;
  font-family: var(--font-body); font-weight: 400;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--leise);
  border-bottom: 2px solid var(--color-text);
}
.abschnitt-akzent { color: var(--color-accent-700); }

/* ---------- Startseite ---------- */
.start-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); padding: var(--space-2) 0 var(--space-2); }
.start-datum { font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 6px; }

/* ---------- Zeilen (Listen) ---------- */
.zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: var(--space-3); align-items: center;
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  min-height: 56px;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text); text-decoration: none;
}
a.zeile:hover, summary.zeile:hover { background: var(--color-neutral-100); }
.zeile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zeile-text strong { font-size: 15px; font-weight: 600; }
.zeile-text small { font-size: 12px; color: var(--leise); overflow-wrap: anywhere; }
.zeile-wert { font-weight: 800; font-size: 15px; text-align: right; white-space: nowrap; display: flex; gap: 4px; }
.zeile-pfeil { color: var(--color-neutral-600); font-size: 16px; }
.zeile-dringend { grid-template-columns: 4px minmax(0, 1fr) auto; padding-left: 0; }
.zeile-dringend .zeile-balken { align-self: stretch; background: var(--color-accent); }
.zeile-dringend .zeile-wert { color: var(--color-accent-700); }
.zeile-aus { color: var(--color-neutral-600); }
.zeile-leer { padding: 14px 0; margin: 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; color: var(--leise); }

/* Aufklappbare Zeilen */
.klappe summary { list-style: none; cursor: pointer; }
.klappe summary::-webkit-details-marker { display: none; }
.klappe[open] summary .zeile-pfeil { transform: rotate(90deg); }
.klappe-aus summary strong { color: var(--color-neutral-600); }
.klappe-inhalt { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider); }

/* ---------- Formulare ---------- */
.formular { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.formular .abschnitt { margin-bottom: 0; }
.raster { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 600px) { .raster { grid-template-columns: 1fr 1fr; } }
.input { min-height: 44px; font-size: 16px; } /* 16px verhindert Zoom auf dem iPhone */
textarea.input { min-height: 96px; }
.field-fehler .input { border-color: var(--color-accent); }
.fehlertext { display: block; margin-top: 4px; font-size: 12px; color: var(--color-accent-700); }
.btn { min-height: 44px; }
.btn-gross { width: 100%; min-height: 50px; justify-content: flex-start; font-size: 16px; }
@media (min-width: 600px) { .btn-gross { width: auto; min-width: 240px; } }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.suchfeld { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); margin-bottom: var(--space-2); }
.schluessel { display: block; margin: var(--space-2) 0; padding: var(--space-3); background: var(--color-surface); font-size: 18px; letter-spacing: 0.05em; overflow-wrap: anywhere; }
.input-code { max-width: 200px; font-size: 22px; letter-spacing: 0.2em; }
.schritte { padding-left: 1.3em; }
.schritte li { margin-bottom: var(--space-3); }
.abmelden { margin-top: var(--space-8); }

/* ---------- Meldungen ---------- */
.meldung { padding: var(--space-3) var(--space-4); margin: var(--space-2) 0; font-size: 14px; border-left: 4px solid var(--color-text); background: var(--color-surface); }
.meldung-ok { border-left-color: var(--color-text); }
.meldung-fehler { border-left-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-900); }

/* ---------- Login ---------- */
.login { max-width: 420px; margin: var(--space-8) auto 0; }

/* ---------- Einrichtung ---------- */
.pruefliste { list-style: none; padding: 0; margin: var(--space-2) 0; }
.pruefliste li { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.pruefliste span { width: 40px; flex: none; font-weight: 800; }
.pruefliste .nein span { color: var(--color-accent-700); }

/* ---------- Offline ---------- */
.offline { max-width: 420px; margin: var(--space-8) auto; padding: 0 var(--space-4); }

/* ---------- M1 Belege ---------- */
.seiten-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.seiten-kopf h1 { margin-bottom: 0; overflow-wrap: anywhere; }
.seiten-kopf .btn { margin-top: var(--space-2); }
.betrag-gross { font-weight: 800; font-size: 28px; letter-spacing: -0.01em; white-space: nowrap; margin-top: var(--space-2); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.filter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-4) 0; }
.summe-gross { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-divider); }
.summe-gross strong { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.summen .table { margin: var(--space-2) 0 var(--space-3); }
.table td.zahl { text-align: right; white-space: nowrap; font-weight: 600; }
.table a { color: var(--color-text); }
.angaben { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; font-size: 15px; }
.angaben dt { color: var(--leise); font-size: 13px; }
.angaben dd { margin: 0; overflow-wrap: anywhere; }
.mehrzeilig { white-space: pre-line; }

.unsichtbar { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.datei-knopf { position: relative; cursor: pointer; }
.datei-knopf:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.datei-auswahl { display: flex; flex-direction: column; gap: var(--space-2); }
.datei-auswahl .btn-gross { margin: 0; }
.vorschau, .dateiliste { list-style: none; padding: 0; margin: 0; }
.vorschau li, .dateiliste li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
.dateiliste li { grid-template-columns: 96px minmax(0, 1fr); }
.vorschau img, .datei-kachel img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--color-surface); }
.vorschau-text { overflow-wrap: anywhere; }
.datei-kachel { display: block; }
.datei-pdf { display: grid; place-items: center; width: 100%; aspect-ratio: 1; background: var(--color-text); color: var(--color-bg); font-weight: 800; font-size: 14px; }
.datei-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.datei-info a { overflow-wrap: anywhere; color: var(--color-text); font-weight: 600; }
.datei-info .btn-ghost { min-height: 36px; padding-left: 0; }
.loeschen { margin-top: var(--space-8); }
.start-kopf .btn { flex: none; font-size: 15px; padding: 12px 14px; }

/* ---------- M2 Geräte, Verknüpfungen, PDF ---------- */
.zeile-mit-knopf { grid-template-columns: minmax(0, 1fr) auto; }
.zeile-mit-knopf .zeile-text { color: var(--color-text); text-decoration: none; }
.zeile-mit-knopf .zeile-pfeil { text-decoration: none; padding: var(--space-2); }
.zeile-mit-knopf:hover { background: var(--color-neutral-100); }
.btn-klein { min-height: 40px; padding: 6px 12px; font-size: 13px; }
.verknuepfen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); margin: var(--space-3) 0; }
.datei-info .tag { margin-bottom: 2px; }

body.vollbild { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.pdf-leiste { display: flex; align-items: center; gap: var(--space-3); padding: calc(var(--space-1) + env(safe-area-inset-top)) var(--space-4) var(--space-1); border-bottom: 2px solid var(--color-text); flex: none; }
.pdf-leiste .zurueck { margin: 0; white-space: nowrap; }
.pdf-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--leise); }
.pdf-rahmen { flex: 1; width: 100%; border: 0; display: block; }

/* ---------- M3 Schäden ---------- */
.feld-titel { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.seg-voll { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.seg-voll .seg-opt { min-height: 44px; font-size: 15px; font-weight: 600; justify-content: flex-start; position: relative; }
.haken { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: 15px; cursor: pointer; }
.haken input { width: 20px; height: 20px; accent-color: var(--color-accent); }
.reiter { display: flex; gap: 0; margin: var(--space-4) 0 0; border-bottom: 2px solid var(--color-text); }
.reiter a { padding: var(--space-2) var(--space-3); font-size: 14px; font-weight: 600; color: var(--color-text); text-decoration: none; }
.reiter a[aria-current='page'] { background: var(--color-text); color: var(--color-bg); }

.zeile-schaden { grid-template-columns: 4px 56px minmax(0, 1fr) auto; padding-left: 0; }
.zeile-bild { width: 56px; height: 56px; object-fit: cover; background: var(--color-surface); }
.zeile-bild-leer { display: block; }
.schwere-hoch .zeile-balken { background: var(--color-accent); }
.schwere-mittel .zeile-balken { background: var(--color-accent-300); }
.schwere-gering .zeile-balken { background: var(--color-neutral-300); }
.zeile-schaden .zeile-balken { align-self: stretch; }
.ist-behoben { color: var(--color-neutral-600); }
.ist-behoben .zeile-bild { filter: grayscale(1); opacity: 0.7; }

.schaden-kopf { border-left: 6px solid var(--color-neutral-300); padding-left: var(--space-3); }
.schaden-kopf.schwere-hoch { border-left-color: var(--color-accent); }
.schaden-kopf.schwere-mittel { border-left-color: var(--color-accent-300); }
.schaden-kopf h1 { margin-bottom: 2px; }
.schaden-stelle { font-size: 17px; margin-bottom: var(--space-2); }
.schaden-text { font-size: 16px; margin-top: var(--space-4); }
span.btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }

.galerie { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--space-2); }
.galerie li { display: flex; flex-direction: column; }
.galerie img, .galerie .datei-pdf { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--color-surface); }
.galerie .btn-ghost { justify-content: flex-start; padding-left: 0; }

.verlauf { list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-3) 6px; border-left: 2px solid var(--color-text); }
.verlauf li { position: relative; display: flex; flex-direction: column; padding: 0 0 var(--space-3) var(--space-4); }
.verlauf li::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; background: var(--color-bg); border: 2px solid var(--color-text); }
.verlauf li.verlauf-offen::before { background: var(--color-accent); border-color: var(--color-accent); }
.verlauf li.verlauf-behoben::before { background: var(--color-text); }

/* Menü "+ Neu" auf der Startseite */
.neu-menue { position: relative; flex: none; }
.neu-menue summary { list-style: none; cursor: pointer; font-size: 15px; padding: 12px 14px; }
.neu-menue summary::-webkit-details-marker { display: none; }
.neu-liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: min(280px, calc(100vw - 32px)); display: flex; flex-direction: column; padding: var(--space-3) var(--space-4); background: var(--color-bg); border-top: 2px solid var(--color-text); box-shadow: var(--shadow-lg); }
.neu-titel { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leise); padding-bottom: var(--space-2); }
.neu-liste a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 14px 0; border-top: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.neu-liste a strong { font-size: 17px; font-weight: 800; }
.neu-liste a small { font-size: 13px; color: var(--leise); }
.neu-liste a:hover strong { color: var(--color-accent-700); }

/* ---------- M4 Aufgaben, Km-Stand ---------- */
.zeile-aufgabe { grid-template-columns: 4px minmax(0, 1fr) 14px; padding-left: 0; }
.zeile-aufgabe .zeile-balken { align-self: stretch; background: transparent; }
.stufe-ueberfaellig .zeile-balken { background: var(--color-accent); }
.stufe-bald .zeile-balken { background: var(--color-accent-300); }
.stufe-spaeter .zeile-balken { background: var(--color-neutral-300); }
.stufe-erledigt { color: var(--color-neutral-600); }
.stufe-ueberfaellig small:first-of-type { color: var(--color-accent-700); font-weight: 600; }
.zeile-dringend.stufe-bald .zeile-wert { color: var(--color-text); }
.wiederkehrend { font-weight: 400; color: var(--leise); }
.aufgabe-kopf { border-left: 6px solid var(--color-neutral-300); padding-left: var(--space-3); }
.aufgabe-kopf.stufe-ueberfaellig { border-left-color: var(--color-accent); }
.aufgabe-kopf.stufe-bald { border-left-color: var(--color-accent-300); }
.aufgabe-kopf.stufe-erledigt { border-left-color: var(--color-text); }
.faellig-text { font-size: 16px; font-weight: 600; margin: 0; }
.stufe-ueberfaellig .faellig-text { color: var(--color-accent-700); }
.inline-form { display: inline; }
.km-gross strong { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
.km-tabelle { margin-top: var(--space-4); }
.km-tabelle th.zahl { text-align: right; }

/* ---------- M5 Umbauten ---------- */
.gewicht-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0; }
.gewicht-zahlen div { display: flex; flex-direction: column; }
.gewicht-zahlen strong { font-size: 18px; font-weight: 800; }
@media (min-width: 600px) { .gewicht-zahlen { grid-template-columns: repeat(4, 1fr); } }
.gewicht-balken { display: flex; height: 14px; background: var(--color-surface); border: 1px solid var(--color-divider); margin: var(--space-2) 0 var(--space-3); overflow: hidden; }
.gewicht-ist { background: var(--color-text); width: 0; }
.gewicht-geplant { background: repeating-linear-gradient(45deg, var(--color-neutral-400) 0 4px, transparent 4px 8px); width: 0; }
.gewicht-warnung { color: var(--color-accent-700); }

.zeile-wert-spalte { flex-direction: column; align-items: flex-end; gap: 0; }
.zeile-wert-spalte small { font-size: 11px; font-weight: 400; }
.ueber-budget, .ueber-budget strong { color: var(--color-accent-700); }
.zeile-umbau.status-fertig strong { color: var(--color-neutral-700); }
.aufgabe-kopf.status-in_umsetzung { border-left-color: var(--color-accent); }
.aufgabe-kopf.status-fertig { border-left-color: var(--color-text); }

.kosten-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.kosten-raster div { display: flex; flex-direction: column; }
.kosten-raster strong { font-size: 20px; font-weight: 800; }
@media (min-width: 600px) { .kosten-raster { grid-template-columns: repeat(4, 1fr); } }

.material-liste { list-style: none; padding: 0; margin: 0; }
.material-liste li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
.material-text { display: flex; flex-direction: column; min-width: 0; }
.material-text strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.material-text small { font-size: 12px; color: var(--leise); overflow-wrap: anywhere; }
.material-summe { font-weight: 800; font-size: 14px; white-space: nowrap; }
.haken-knopf { width: 36px; height: 36px; border: 2px solid var(--color-text); background: var(--color-bg); font-weight: 800; font-size: 18px; cursor: pointer; color: var(--color-bg); }
.haken-knopf[aria-pressed='true'] { background: var(--color-text); }
.haken-knopf:hover { border-color: var(--color-accent); }
.ist-gekauft .material-text strong { text-decoration: line-through; color: var(--color-neutral-600); }
.raster-drei { grid-template-columns: 1fr 1fr; }
.raster-drei .field:last-child { grid-column: 1 / -1; }
@media (min-width: 600px) { .raster-drei { grid-template-columns: 1fr 1fr 2fr; } .raster-drei .field:last-child { grid-column: auto; } }

/* Druckansicht */
.druck-leiste { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.druck-tabelle td.zahl, .druck-tabelle th.zahl { text-align: right; white-space: nowrap; }
.druck-tabelle .spalte-haken { width: 28px; text-align: center; }
.druck-tabelle .bezugsquelle { overflow-wrap: anywhere; font-size: 12px; }
.druck-tabelle tfoot td { border-top: 2px solid var(--color-text); border-bottom: 0; }
@media (max-width: 599px) { .druck-tabelle { font-size: 12px; } .druck-tabelle th, .druck-tabelle td { padding: 6px 4px; } }
@media print {
  .nicht-drucken, .kopf, .fuss-nav { display: none !important; }
  body { background: #fff; padding: 0; }
  .inhalt { max-width: none; padding: 0; }
  .druck-tabelle { font-size: 11pt; }
}

.druck-tabelle .nur-schmal { display: none; }
@media screen and (max-width: 599px) {
  .druck-tabelle .bezugsquelle { display: none; }
  .druck-tabelle .nur-schmal { display: block; font-size: 11px; color: var(--leise); overflow-wrap: anywhere; }
  .druck-tabelle td:nth-child(2) { overflow-wrap: anywhere; }
}

/* ---------- M6 Tanken ---------- */
.tank-rechner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
.input-gross { font-size: 20px; font-weight: 600; min-height: 50px; }
.input.berechnet { background: var(--color-bg); border-style: dashed; color: var(--color-accent-700); }
@media (max-width: 380px) { .tank-rechner .input-gross { font-size: 17px; padding-inline: 6px; } .tank-rechner label { font-size: 11px; } }
.kennzahlen strong { font-size: 24px; }
.kennzahlen small { font-size: 12px; color: var(--leise); }
.verbrauch { color: var(--color-text); font-weight: 800; }
.diagramme { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: var(--space-4) 0; }
@media (min-width: 900px) { .diagramme { grid-template-columns: 1fr 1fr; } }
.diagramm { margin: 0; }
.diagramm figcaption { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leise); margin: 0 0 var(--space-1); }
.diagramm svg { display: block; width: 100%; height: auto; background: var(--color-surface); }
.d-balken { fill: var(--color-text); }
.d-balken-2 { fill: var(--color-accent); }
.d-achse { stroke: var(--color-text); stroke-width: 1; }
.d-linie { stroke: var(--color-text); stroke-width: 1.5; stroke-dasharray: 5 4; }
.d-wert { font-size: 9px; font-weight: 600; text-anchor: middle; fill: var(--color-text); font-family: var(--font-body); }
.d-beschriftung { font-size: 9px; text-anchor: middle; fill: var(--color-neutral-700); font-family: var(--font-body); }
.d-legende { font-size: 12px; color: var(--leise); margin: var(--space-1) 0 0; }
.d-legende-linie { display: inline-block; width: 20px; border-top: 2px dashed var(--color-text); vertical-align: middle; }

/* ---------- M7 Spritkostenrechner ---------- */
.tabelle-rollen { overflow-x: auto; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }
.sprit-tabelle { font-size: 13px; min-width: 520px; }
.sprit-tabelle th, .sprit-tabelle td { padding: 8px 6px; white-space: nowrap; }
.sprit-tabelle .zahl { text-align: right; }
.sprit-tabelle .stark { font-weight: 800; }
.sprit-tabelle tbody th { text-align: left; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--color-text); border-bottom: 1px solid var(--color-divider); }
.sprit-tabelle .zeile-real th, .sprit-tabelle .zeile-real td { color: var(--color-accent-700); }
@media (max-width: 599px) {
  .sprit-tabelle { min-width: 0; }
  .sprit-tabelle th:nth-child(2), .sprit-tabelle td:nth-child(2) { display: none; }
  .sprit-tabelle th, .sprit-tabelle td { padding: 8px 3px; font-size: 12px; }
  .sprit-tabelle thead th { font-size: 9px; letter-spacing: 0.02em; }
}
.sprit-diagramm { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; }
.sprit-balken-reihe { display: grid; grid-template-columns: 64px minmax(0, 1fr) 80px; gap: var(--space-2); align-items: center; font-size: 13px; }
.sprit-balken { display: block; height: 22px; background: var(--color-text); width: 0; }
.sprit-balken-real { background: var(--color-accent); }
.sprit-balken-wert { text-align: right; font-weight: 800; }

/* ---------- M8 Karte ---------- */
.karte { height: 360px; margin: var(--space-3) calc(-1 * var(--space-4)); background: var(--color-surface); border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); }
@media (min-width: 900px) { .karte { height: 480px; margin-inline: 0; border: 2px solid var(--color-text); } }
.karte .leaflet-control-attribution { font-size: 10px; }
.monat-wahl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); }
.monat-wahl strong { text-align: center; font-size: 17px; }

/* ---------- M9 Startseite ---------- */
.zeile-kachel .zeile-wert { font-size: 20px; letter-spacing: -0.01em; align-items: baseline; }
.zeile-kachel .zeile-wert small { font-size: 12px; font-weight: 600; }