/* immo-intake Stylesheet. Jeder Wert folgt docs/design/DESIGN.md.
   Abschnitte: Tokens, Basis, Typografie, Layout, Komponenten, Seiten. */

/* ===== Tokens ===== */
:root {
  --ink-900: #1E2321; --ink-700: #3A423E; --ink-500: #5C665F; --ink-450: #6A746D; --ink-400: #7B857E; --ink-300: #9AA39C;
  --paper-0: #FFFFFF; --paper-50: #FAF7F2; --paper-100: #F1ECE3; --paper-200: #E4DCCE;
  --green-700: #2E4B3F; --green-500: #476B59; --green-100: #E3EBE6;
  --brass-500: #A98E5B; --brass-300: #C6B389; --brass-100: #F3EDDF;
  --amber-700: #7A5A12; --amber-100: #F6EED8;
  --signal-600: #8C4A3C; --signal-100: #F4E4DF;
  --ring: rgb(30 35 33 / .08);
  --ring-strong: rgb(30 35 33 / .16);
  --shadow-1: 0 1px 2px rgb(30 35 33 / .05);
  --shadow-2: 0 4px 12px -4px rgb(30 35 33 / .10);
  --schrift: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --schrift-marke: "Libre Caslon Text", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dauer: 150ms;
  /* Select-Pfeil (ink-500), Haus-Platzhalter (ink-300), Leer-Strich (ink-300) */
  --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235C665F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  --haus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239AA39C' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M2.5 7 8 2.5 13.5 7v6.5h-11z'/%3E%3Cpath d='M6.5 13.5V10h3v3.5'/%3E%3C/svg%3E");
  --strich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='1'%3E%3Crect width='8' height='1' fill='%239AA39C'/%3E%3C/svg%3E");
}

/* ===== Basis ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper-50); color: var(--ink-900);
  font: 400 14px/22px var(--schrift); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, form, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
a { color: var(--green-700); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
table { width: 100%; border-collapse: collapse; }
.visuell-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes einblenden { from { opacity: 0; } }
@keyframes schimmer { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
}

/* ===== Typografie ===== */
.seitentitel { font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -.01em; text-wrap: balance; }
.panel-titel { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ink-900); }
/* overflow-wrap: eine Quellen-Adresse im Hinweis sprengt sonst die Seite (Richter Preisbasis, Befund 1) */
.hinweis { color: var(--ink-500); font-size: 13px; line-height: 18px; text-wrap: pretty; overflow-wrap: anywhere; }
.label { color: var(--ink-500); font-size: 12px; font-weight: 500; line-height: 16px; }
.leer { color: var(--ink-300); }
.negativ { color: var(--signal-600); }
.faellig { color: var(--signal-600); }
p { text-wrap: pretty; }

/* ===== Layout ===== */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh;
  padding: 16px 12px; background: var(--green-700);
}
.marke { display: block; align-self: flex-start; padding: 4px 12px 32px; line-height: 0; }
.marke img { width: 150px; height: auto; }
.hauptnav { flex: 1; }
.nav-gruppe { display: grid; gap: 4px; }
.nav-gruppe + .nav-gruppe { margin-top: 24px; }
.nav-titel {
  padding: 0 12px 4px; color: var(--brass-300); font-size: 11px; font-weight: 600; line-height: 14px;
  letter-spacing: .04em; text-transform: uppercase;
}
.nav-punkt {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 0 6px 6px 0;
  color: var(--paper-200); font-weight: 500; line-height: 20px;
  transition: color var(--dauer) var(--ease), background-color var(--dauer) var(--ease);
}
.nav-punkt:hover { color: var(--paper-0); text-decoration: none; }
.nav-punkt.aktiv { background: rgb(255 255 255 / .10); box-shadow: inset 2px 0 0 var(--brass-500); color: var(--paper-0); }
.nav-punkt svg { flex: none; }
.sidebar :focus-visible { outline-color: var(--paper-0); }
.nav-punkt circle { fill: var(--green-700); }
.nav-zaehler {
  min-width: 20px; margin-left: auto; padding: 0 6px; border-radius: 8px; background: var(--brass-500);
  color: var(--ink-900); font-size: 11px; font-weight: 600; line-height: 16px; text-align: center;
}
.inhalt { width: 100%; max-width: 1424px; min-width: 0; padding: 32px; }
.seitenkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.zurueck { display: inline-block; margin-bottom: 12px; color: var(--ink-500); font-size: 13px; line-height: 18px; }
.zurueck:hover { color: var(--ink-900); }
.spalten { display: grid; gap: 16px; align-items: start; }
.spalten > * { min-width: 0; }
.stapel { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 1100px) {
  .spalten.zwei-eins { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .spalten.halb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 959px) {
  .app { display: block; }
  .sidebar { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; height: auto; padding: 12px 16px; }
  .marke { flex: 1; padding: 0; }
  .marke img { width: 110px; }
  .abmelden { order: 2; }
  .hauptnav {
    order: 3; display: flex; flex: 0 0 100%; gap: 2px; padding: 2px; overflow-x: auto; scrollbar-width: none;
    border-radius: 6px;
  }
  .nav-gruppe, .nav-gruppe + .nav-gruppe { display: contents; }
  .nav-titel, .hauptnav svg { display: none; }
  .nav-punkt { flex: none; gap: 4px; padding: 6px; border-radius: 4px; font-size: 13px; line-height: 18px; }
  .nav-punkt.aktiv { background: rgb(255 255 255 / .10); box-shadow: none; }
  .inhalt { padding: 16px; }
}

/* ===== Komponenten ===== */

/* Knöpfe: Sekundär ist der Standard, Primär und Tertiär als Klasse */
button, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border: 0;
  border-radius: 6px; background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring), var(--shadow-1);
  color: var(--ink-900); font: 500 13px/18px var(--schrift); white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease), color var(--dauer) var(--ease);
}
button:hover, .knopf:hover { box-shadow: 0 0 0 1px var(--ring-strong), var(--shadow-1); color: var(--ink-900); text-decoration: none; }
button:active, .knopf:active { transform: translateY(1px); }
button:disabled { color: var(--ink-400); box-shadow: 0 0 0 1px var(--ring); cursor: default; transform: none; }
.knopf-primaer, .knopf-primaer:hover { background: var(--green-700); box-shadow: none; color: var(--paper-50); }
.knopf-primaer:hover { background: var(--green-500); }
.knopf-tertiaer, .knopf-tertiaer:hover { padding-inline: 0; background: none; box-shadow: none; color: var(--green-700); font-weight: 500; }
.knopf-tertiaer:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Eine Primäraktion je Blick: trägt der geladene Reiter eine eigene, wird die Kopfaktion sekundär */
/* Analyse Kurz blendet "Annahmen speichern" aus: dann bleibt die Kopfaktion primär */
/* Offene Menüs zählen zum Blick: zeigt der Kopf "Prüfung starten" primär, ist der Absendeknopf im Menü sekundär */
#kopf:has(.aktionsleiste > .inline-form .knopf-primaer, .fakt-leer .knopf-primaer) .aufklapp-panel .knopf-primaer { background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring), var(--shadow-1); color: var(--ink-900); }
#kopf:has(.aktionsleiste > .inline-form .knopf-primaer, .fakt-leer .knopf-primaer) .aufklapp-panel .knopf-primaer:hover { background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring-strong), var(--shadow-1); }
.inhalt:has(#tab .knopf-primaer):not(:has(#tiefe-kurz:checked)) #kopf :is(.fakt-leer, .aktionsleiste > .inline-form) .knopf-primaer { background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring), var(--shadow-1); color: var(--ink-900); }
.inhalt:has(#tab .knopf-primaer):not(:has(#tiefe-kurz:checked)) #kopf :is(.fakt-leer, .aktionsleiste > .inline-form) .knopf-primaer:hover { background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring-strong), var(--shadow-1); }
.knopfleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-form { display: inline-flex; }

/* Eingaben */
input:where([type="text"], [type="password"], [type="number"], [type="date"]), select, textarea {
  height: 34px; min-width: 0; padding: 0 12px; border: 0; border-radius: 6px; background-color: var(--paper-0);
  box-shadow: 0 0 0 1px var(--ring); color: var(--ink-900); font: 400 14px/22px var(--schrift);
  font-variant-numeric: tabular-nums; transition: box-shadow var(--dauer) var(--ease), background-color var(--dauer) var(--ease);
}
:where(input, select, textarea):hover { box-shadow: 0 0 0 1px var(--ring-strong); }
:where(input, select, textarea):focus { outline: none; box-shadow: 0 0 0 2px var(--green-500); }
textarea { width: 100%; height: auto; padding: 8px 12px; resize: vertical; }
select { appearance: none; padding-right: 32px; background: var(--paper-0) var(--pfeil) no-repeat right 12px center / 12px; }
::placeholder { color: var(--ink-450); opacity: 1; }
input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--green-700); }
input[type="range"] { appearance: none; width: 100%; height: 16px; margin: 0; background: transparent; box-shadow: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--paper-200); }
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 2px solid var(--paper-0); border-radius: 50%;
  background: var(--green-700); box-shadow: 0 0 0 1px var(--green-700);
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--paper-200); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--paper-0); border-radius: 50%; background: var(--green-700); }
.feld { display: grid; gap: 4px; min-width: 0; }
.feld > span:first-child { color: var(--ink-500); font-size: 12px; font-weight: 500; line-height: 16px; }
.feld :where(input, select) { width: 100%; }
.feld.feld-fehler :where(input, select) { box-shadow: 0 0 0 1px var(--signal-600); }
.fehler { color: var(--signal-600); font-size: 12px; line-height: 16px; }
.feld-haken { display: flex; align-items: center; gap: 8px; min-height: 34px; }

/* Datei-Auswahl: nativer Knopf versteckt, eigener Sekundärknopf plus Dateiname */
.datei-wahl { position: relative; display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.datei-wahl input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.datei-wahl input:focus-visible + .knopf { outline: 2px solid var(--green-500); outline-offset: 2px; }
.datei-name { min-width: 0; overflow: hidden; color: var(--ink-500); font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
/* Ablagefläche (Nachliefern): Dateien lassen sich auch hierher ziehen, die Namen dürfen umbrechen */
.datei-wahl.ablage { display: flex; flex-wrap: wrap; padding: 12px; border: 1px dashed var(--ink-400); border-radius: 8px;
  transition: border-color var(--dauer) var(--ease), background-color var(--dauer) var(--ease); }
.datei-wahl.ablage .datei-name { flex: 1 1 160px; white-space: normal; }
.datei-wahl.ablage:hover, .datei-wahl.drag { border-color: var(--green-500); background: var(--green-100); }
.datei-wahl.drag:not(.ablage) { outline: 2px dashed var(--green-500); outline-offset: 4px; border-radius: 8px; }

/* Inline-Edit: in Ruhe ohne Ring, Hover paper-100, Fokus Ring; Speichern erst nach Änderung */
.inline-edit { display: flex; align-items: center; gap: 8px; }
:is(.inline-edit, .einheiten-tabelle) :is(input, select) { background-color: transparent; box-shadow: none; }
:is(.inline-edit, .einheiten-tabelle) :is(input, select):hover { background-color: var(--paper-100); box-shadow: none; }
:is(.inline-edit, .einheiten-tabelle) :is(input, select):focus { background-color: var(--paper-0); box-shadow: 0 0 0 2px var(--green-500); }
/* Kopf: einzelnes Feld sendet per Enter, der Knopf darf ganz fehlen. Tabelle: Knopf bleibt Standardknopf der Zeile. */
.inline-edit .knopf-tertiaer { display: none; }
.inline-edit.geaendert .knopf-tertiaer { display: inline-flex; }
.einheiten-tabelle .knopf-tertiaer { visibility: hidden; }
.einheiten-tabelle .geaendert .knopf-tertiaer { visibility: visible; }

/* Segment-Control */
.segment { display: inline-flex; gap: 2px; padding: 2px; border-radius: 6px; background: var(--paper-100); box-shadow: 0 0 0 1px var(--ring); }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment :where(a, label) {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 4px; color: var(--ink-500);
  font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dauer) var(--ease), color var(--dauer) var(--ease);
}
.segment :where(a, label):hover { color: var(--ink-900); text-decoration: none; }
.segment .aktiv, .segment input:checked + label { background: var(--paper-0); box-shadow: var(--shadow-1), 0 0 0 1px var(--ring); color: var(--ink-900); }
.segment input:focus-visible + label { outline: 2px solid var(--green-500); outline-offset: 2px; }

/* Badges und Flaggen-Chips */
.badge {
  display: inline-flex; align-items: center; max-width: 100%; padding: 2px 6px; border-radius: 4px;
  background: var(--paper-100); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
  color: var(--ink-700); font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; vertical-align: middle;
}
.badge.gruen { background: var(--green-100); color: var(--green-700); }
.badge.gelb { background: var(--amber-100); color: var(--amber-700); }
.badge.rot { background: var(--signal-100); color: var(--signal-600); }
.badge.chip { display: inline-block; overflow: hidden; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; }
.chip-mehr { color: var(--ink-500); font-size: 11px; font-weight: 600; line-height: 14px; cursor: help; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* Status: Punkt plus Text */
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-900); font-size: 13px; line-height: 18px; white-space: nowrap; }
.status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); }
.status.gruen::before { background: var(--green-500); }
.status.messing::before { background: var(--brass-500); box-shadow: 0 0 0 2px var(--brass-100); }
.status.amber::before { background: var(--amber-700); }

/* Beleg-Kürzel und FEHLT */
.kz-label, .fehlt, .kz-fehlt {
  display: inline-flex; align-items: center; margin-left: 4px; padding: 0 4px; border-radius: 4px;
  background: var(--paper-0); box-shadow: inset 0 0 0 1px rgb(169 142 91 / .35); color: var(--brass-500); font-size: 11px; font-weight: 600;
  line-height: 14px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; vertical-align: 1px; cursor: help;
}
.kz-label:empty, .kz-fehlt:empty { display: none; }
.fehlt, .kz-fehlt { box-shadow: inset 0 0 0 1px rgb(140 74 60 / .35); color: var(--signal-600); }

/* Kennzahlen-Strip ohne Kasten */
/* Jede Kennzahl trägt links Linie plus 24 px; der Strip ist um diese Breite nach links versetzt und
   abgeschnitten, damit die Linie am Anfang jeder (auch umbrochenen) Reihe verschwindet. */
.kennzahlen {
  --luft: 24px; display: flex; flex-wrap: wrap; row-gap: 16px; margin: 0 0 24px calc(-1 * var(--luft) - 1px);
  clip-path: inset(-4px -4px -4px calc(var(--luft) + 1px));
}
.kennzahl { display: flex; flex-direction: column; min-width: 0; padding: 0 var(--luft); border-left: 1px solid var(--paper-200); }
.kennzahl-wert { order: 1; font-size: 24px; font-weight: 500; line-height: 28px; white-space: nowrap; }
.kennzahl-label { order: 2; margin-top: 4px; color: var(--ink-500); font-size: 12px; font-weight: 500; line-height: 16px; }
.kennzahl-zusatz { order: 3; color: var(--ink-500); font-size: 12px; line-height: 16px; }
.kennzahl-wert > .fehlt { margin-left: 0; }
.kennzahl .knopf-tertiaer { order: 3; justify-content: flex-start; padding-block: 4px 0; font-size: 12px; line-height: 16px; }
@media (max-width: 639px) {
  .kennzahlen { --luft: 12px; display: grid; grid-template-columns: 1fr 1fr; }
}

/* Panels */
.panel, .gruppe { min-width: 0; padding: 20px; border-radius: 10px; background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring); }
.panel-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; margin-bottom: 12px; }
.panel-kopf > div:first-child { flex: 1 1 320px; min-width: 0; }
.panel-kopf .hinweis { margin-top: 4px; }
.panel > .panel-titel { margin-bottom: 12px; }
.panel-titel + .panel-titel, * + .panel-titel.zwischen { margin-top: 24px; }
.panel-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* Leerzustand und Hinweiszeile */
.leerzustand { display: grid; justify-items: center; gap: 12px; padding: 48px 24px; color: var(--ink-500); text-align: center; }
.hinweiszeile {
  display: flex; align-items: flex-start; gap: 4px 8px; min-height: 40px; margin-bottom: 8px; padding: 11px 12px;
  border-radius: 6px; background: var(--amber-100); color: var(--amber-700); font-size: 13px; line-height: 18px;
}
/* Punkt auf Höhe der ersten Textzeile (DESIGN 5): Zeile ohne Umbruch der Elemente, der Text bricht in sich um */
.hinweiszeile::before { content: ""; flex: none; align-self: flex-start; width: 6px; height: 6px; margin: 6px 4px 0 0; border-radius: 50%; background: var(--amber-700); }
.hinweiszeile > span { min-width: 0; }
/* Ein Link-Stil in Hinweiszeilen (DESIGN 5): amber-700 500, unterstrichen erst bei Hover */
.hinweiszeile :is(a, .knopf-tertiaer) { flex: none; height: 18px; padding-block: 0; color: var(--amber-700); font-weight: 500; text-decoration: none; }
.hinweiszeile :is(a, .knopf-tertiaer):hover { text-decoration: underline; text-underline-offset: 2px; }
/* Unter 960 px bricht der Link unter den Text; der Text füllt die erste Zeile neben dem Punkt (18 px = Punkt, Rand, Abstand) */
@media (max-width: 959px) {
  .hinweiszeile { flex-wrap: wrap; }
  .hinweiszeile > span { flex: 1 1 auto; max-width: calc(100% - 18px); }
  .hinweiszeile > :is(a, .knopf-tertiaer) { flex: none; margin-left: 18px; }
}
.hinweiszeile + .kennzahlen { margin-top: 16px; }
.hinweis[data-status]:empty { display: none; }
.fehlerzeile {
  display: flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 16px; padding: 0 12px;
  border-radius: 6px; background: var(--signal-100); color: var(--signal-600); font-size: 13px; line-height: 18px;
}
.fehlerzeile::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--signal-600); }
.fehlerzeile span { flex: 1; }
.fehlerzeile .knopf-tertiaer { color: var(--signal-600); }

/* Laden: HTMX setzt .htmx-request auf das hx-indicator-Ziel; kein Spinner */
:is(#tab, #kopf, #aufgaben, #verlauf-liste, tr).htmx-request { opacity: .56; transition: opacity var(--dauer) var(--ease); }
[aria-busy="true"] { cursor: progress; }
form.htmx-request button { color: var(--ink-400); pointer-events: none; }

/* Tabellen: im Panel bündig, Kopf 12 px, Zeilen mit paper-200-Linien */
th, td { padding: 10px 12px; border-bottom: 1px solid var(--paper-200); text-align: left; vertical-align: middle; }
th { background: var(--paper-0); color: var(--ink-500); font-size: 12px; font-weight: 500; line-height: 16px; padding-block: 8px; white-space: nowrap; }
td { font-size: 13px; line-height: 18px; }
tbody tr { transition: background-color var(--dauer) var(--ease); }
tbody tr:hover { background: var(--paper-100); }
tbody tr:last-child td { border-bottom: 0; }
th a { color: inherit; }
th a:hover { color: var(--ink-900); text-decoration: none; }
.num { text-align: right; white-space: nowrap; }
.sortpfeil { margin-left: 4px; color: var(--brass-500); }
.tabelle-panel { padding: 0; overflow: clip; }
.tabelle-panel > .panel-kopf { margin: 0; padding: 20px; }
.tabelle-panel :where(th, td):first-child { padding-left: 20px; }
.tabelle-panel :where(th, td):last-child { padding-right: 20px; }
/* position: relative hält absolut gesetzte Kinder (visuell versteckte Kopfzeilen) im Scrollrahmen */
.tabelle-scroll { position: relative; overflow-x: auto; }
.tabelle-panel > .hinweiszeile, #einheiten-hinweis > .hinweiszeile { margin: 0 20px 12px; }
.tabelle-panel > .panel-fuss { margin: 0; padding: 16px 20px; border-top: 1px solid var(--paper-200); }
tfoot td { border-top: 1px solid var(--paper-200); border-bottom: 0; font-weight: 600; }
tfoot tr + tr td { border-top: 0; }
@media (max-width: 959px) { .tabelle-panel { overflow: hidden; } }

/* Aufklappmenü (details) */
.aufklapp { position: relative; }
.aufklapp > summary { list-style: none; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp[open] > summary { background: var(--paper-100); box-shadow: 0 0 0 1px var(--ring-strong); }
.aufklapp-panel {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 220px; padding: 4px;
  border-radius: 8px; background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring), var(--shadow-2);
  animation: einblenden var(--dauer) var(--ease);
}
.menue { display: grid; }
.menue form { display: flex; }
.menue :where(a, button) {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 32px; padding: 0 12px;
  border-radius: 4px; background: none; box-shadow: none; color: var(--ink-900); font-size: 13px; font-weight: 400; line-height: 18px;
}
.menue :where(a, button):hover { background: var(--paper-100); box-shadow: none; text-decoration: none; }
.menue :where(a, button):active { transform: none; }
.menue hr { margin: 4px 0; border: 0; border-top: 1px solid var(--paper-200); }
.menue .gefahr { color: var(--signal-600); }
.menue .gefahr:hover { background: var(--signal-100); }
.aufklapp-panel.formular { display: grid; gap: 12px; min-width: 300px; padding: 16px; }
.aufklapp-panel.formular button[type="submit"] { justify-self: end; }
@media (max-width: 959px) {
  .objekt-kopf .aufklapp { position: static; }
  .objekt-kopf .aufklapp-panel, .objekt-kopf .aufklapp-panel.formular { top: auto; right: 0; left: 0; min-width: 0; margin-top: 4px; }
}

/* Reiter */
.reiter-huelle { position: relative; margin: 16px 0; }
/* Nur solange rechts weitere Reiter liegen: 32 px Ausblendung als Scroll-Hinweis (Controller-Entscheid Runde 3). */
.reiter-huelle::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 32px; pointer-events: none; opacity: 0;
  background: linear-gradient(to right, rgb(250 247 242 / 0), var(--paper-50)); transition: opacity var(--dauer) var(--ease);
}
.reiter-huelle.rest::after { opacity: 1; }
.reiter { display: flex; gap: 24px; margin: 0; overflow-x: auto; box-shadow: inset 0 -1px 0 var(--paper-200); scrollbar-width: none; }
.reiter button {
  flex: none; padding: 12px 4px; border-radius: 0; background: none; box-shadow: none; color: var(--ink-500);
  font-size: 14px; font-weight: 500; line-height: 20px;
}
.reiter button:hover { box-shadow: none; color: var(--ink-900); }
.reiter button:active { transform: none; }
.reiter button:focus-visible { outline-offset: -2px; }
.reiter button.aktiv { box-shadow: inset 0 -2px 0 var(--green-700); color: var(--ink-900); }
#tab { min-height: 240px; }
#tab > * { animation: einblenden var(--dauer) var(--ease); }

/* Listen mit Trennlinien und Wertelisten */
.liste > li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--paper-200); }
.liste > li:last-child { border-bottom: 0; }
.liste > li.leer, .zeitleiste > li.leer { color: var(--ink-500); }

/* Dateien: Bilder-Raster, Titelbild wählen (DESIGN 6 Dateien). Kachel Radius 8, Bild 6 bei 2 px Abstand (konzentrisch) */
.bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 12px; }
.bild-kachel {
  display: grid; align-content: start; gap: 4px; min-width: 0; padding: 2px 2px 8px; border-radius: 8px; background: var(--paper-0);
  box-shadow: 0 0 0 1px var(--ring); transition: box-shadow var(--dauer) var(--ease);
}
.bild-kachel:hover { box-shadow: 0 0 0 1px var(--ring-strong), var(--shadow-1); }
.bild-kachel.ist-titelbild, .bild-kachel.ist-titelbild:hover { box-shadow: 0 0 0 2px var(--green-700); }
.bild-kachel img { width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; background: var(--paper-100); object-fit: cover; }
.bild-name { overflow: hidden; padding: 4px 6px 0; color: var(--ink-500); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.bild-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 22px; padding-inline: 6px; }
.bild-aktion .knopf-tertiaer { padding-block: 2px; }
/* Bilder hochladen: das echte Feld bleibt unsichtbar, das Label ist der Knopf (Stephan 23.09.2026) */
.bilder-upload { display: inline-flex; align-items: center; gap: 8px; }
.bilder-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bilder-upload label { cursor: pointer; }
.bilder-upload input[type="file"]:focus-visible + span { outline: 2px solid var(--green-500); }
.bilder-upload .hinweis:empty { display: none; }
.bilder-ziehen .lade, .bilder-ziehen.htmx-request .ruhe { display: none; }
.bilder-ziehen.htmx-request .lade { display: inline; }
.bilder-mehr { margin-top: 12px; }
.bilder-mehr > summary { list-style: none; cursor: pointer; }
.bilder-mehr > summary::-webkit-details-marker { display: none; }
.bilder-mehr[open] > summary { margin-bottom: 12px; }
.werte { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.werte > :where(dt, dd) { padding: 10px 0; border-bottom: 1px solid var(--paper-200); }
.werte dt { color: var(--ink-700); }
.werte dd { padding-left: 16px; font-weight: 500; text-align: right; white-space: nowrap; }
.werte > :nth-last-child(-n+2) { border-bottom: 0; }
.werte.links { grid-template-columns: 160px minmax(0, 1fr); }
.werte.links dd { padding-left: 0; font-weight: 400; text-align: left; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 639px) { .werte.links { grid-template-columns: 1fr; } .werte.links dt { padding-bottom: 0; border: 0; } }

/* Zeitleiste */
.zeitleiste > li { position: relative; padding: 0 0 16px 20px; }
.zeitleiste > li::before { content: ""; position: absolute; top: 8px; left: 4px; translate: -50% -50%; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); }
.zeitleiste > li::after { content: ""; position: absolute; top: 16px; bottom: 0; left: 4px; translate: -50% 0; width: 1px; background: var(--paper-200); }
.zeitleiste > li:last-child::after, .zeitleiste > li.leer::before, .zeitleiste > li.leer::after { display: none; }
.zeitleiste > li.leer { padding-left: 0; }
.zeitleiste > li:is(.art-aktion, .art-lauf, .art-zustimmung)::before { background: var(--green-500); }
.zeitleiste > li.art-fehler::before { background: var(--signal-600); }
.zeitleiste-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 12px; line-height: 16px; }
.zeitleiste-art { color: var(--ink-700); font-weight: 500; }
.zeitleiste-datum { color: var(--ink-500); }
.zeitleiste-betreff, .zeitleiste-text { max-width: 68ch; margin-top: 4px; overflow-wrap: anywhere; }
.zeitleiste-betreff { font-weight: 500; }
.zeitleiste-text { white-space: pre-line; }

/* Skeleton: drei Balken mit Schimmer */
.skelett { display: grid; gap: 8px; }
.skelett span { position: relative; height: 12px; overflow: hidden; border-radius: 4px; background: var(--paper-100); }
.skelett span:nth-child(2) { width: 80%; }
.skelett span:nth-child(3) { width: 56%; }
.skelett span::after { content: ""; position: absolute; inset: 0; width: 40%; background: rgb(255 255 255 / .6); animation: schimmer 1.6s linear infinite; }
.jobstatus { display: grid; gap: 12px; }
.job-log { max-height: 240px; overflow: auto; padding: 12px; border-radius: 6px; background: var(--paper-50); color: var(--ink-700); font: 12px/16px var(--mono); white-space: pre-wrap; }

/* Überblick als Entscheidungsseite */
.entscheidung { display: grid; gap: 24px; }
@media (min-width: 960px) { .entscheidung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.entscheidung .label { display: block; margin: 16px 0 4px; }
.entscheidung-verdict { margin-top: 12px; }
.entscheidung-verdict .badge { padding: 4px 8px; font-size: 13px; line-height: 16px; }
.entscheidung-text { max-width: 68ch; white-space: pre-line; }
.panel > .label { display: block; margin-bottom: 4px; }
.label.zwischen { display: block; margin-top: 24px; }

/* Aufgaben */
.aufgaben > li { padding: 8px 0; border-bottom: 1px solid var(--paper-200); }
.aufgaben > li:last-child { border-bottom: 0; }
.aufgabe { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.aufgabe input { flex: none; margin-top: 4px; }
.aufgabe-meta { display: block; color: var(--ink-500); font-size: 12px; line-height: 16px; }

/* Markdown (Kurzfassung, Prüfung, Chat) */
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md :where(p, ul, ol, blockquote) { max-width: 68ch; margin: 0 0 12px; }
.md h1 { margin: 0 0 12px; font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -.01em; text-wrap: balance; }
.md h2 { margin: 24px 0 8px; font-size: 14px; font-weight: 600; line-height: 20px; }
.md h3 { margin: 16px 0 4px; color: var(--ink-700); font-size: 14px; font-weight: 600; line-height: 20px; }
.md :where(ul, ol) { padding-left: 20px; }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md li { margin-bottom: 4px; }
.md li::marker { color: var(--ink-300); }
.md hr { margin: 24px 0; border: 0; border-top: 1px solid var(--paper-200); }
.md .tabelle-scroll { margin: 0 0 16px; }
.md table { width: auto; overflow-wrap: normal; }
.panel .md h1 { display: none; }
.md :where(th, td) { padding: 8px 12px; overflow-wrap: normal; }
/* Zahlen und Daten bleiben zusammen; nur die letzte Spalte (Freitext wie Vertragsart) bricht um */
.md th, .md td:not(:last-child) { white-space: nowrap; }
.md :where(th, td):first-child { padding-left: 0; }
.md tbody tr:hover { background: none; }
.md tbody tr:last-child td { border-bottom: 1px solid var(--paper-200); }
.md code { padding: 0 4px; border-radius: 4px; background: var(--paper-100); font: .92em var(--mono); }
.md pre { margin: 0 0 12px; padding: 12px; overflow-x: auto; border-radius: 6px; background: var(--paper-50); }
.md blockquote { padding-left: 12px; border-left: 1px solid var(--brass-500); color: var(--ink-700); }

/* ===== Seiten ===== */

/* Dashboard */
/* Soll-Spalte ohne Soll und ohne Aufschlag fällt weg; rechner.js schaltet live um */
.ohne-soll .soll-spalte { display: none; }
.filterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
/* 200 px: Platzhalter "Flagge, z. B. Erbbaurecht" passt ganz, Wert-Probe scrollWidth <= clientWidth (Runde 7) */
.filterleiste input[type="text"] { width: 200px; }
.filter-klappe > summary { list-style: none; width: max-content; }
.filter-klappe > summary::-webkit-details-marker { display: none; }
@media (min-width: 960px) { .filter-klappe > summary { display: none; } }
@media (max-width: 959px) {
  .filter-klappe { margin-bottom: 16px; }
  .filter-klappe[open] > summary { margin-bottom: 12px; background: var(--paper-100); }
  .filter-klappe .filterleiste { margin-bottom: 0; }
  /* Kennzahlen des Dashboards: eine Zeile, scrollt waagrecht im eigenen Rahmen */
  .kennzahlen.dashboard-kennzahlen {
    display: flex; flex-wrap: nowrap; margin-left: 0; overflow-x: auto; clip-path: none; scrollbar-width: none;
  }
  .dashboard-kennzahlen .kennzahl { flex: none; }
  .dashboard-kennzahlen .kennzahl:first-child { padding-left: 0; border-left: 0; }
}
.objekt-tabelle thead th { position: sticky; top: 0; z-index: 2; }
/* Kopf klebt an der Seite: ab 960 px passt die Tabelle ohne eigenen Scrollrahmen (1280: 996 = 996) */
@media (min-width: 960px) { .tabelle-scroll:has(> .objekt-tabelle) { overflow-x: visible; } }
/* 52 px Zeile: Bild 40 plus 4 px oben und unten passt, Name und Meta zusammen 32 px */
.objekt-tabelle td { height: 52px; padding-block: 4px; }
.objekt-tabelle .spalte-bild { width: 60px; padding-right: 0; }
.thumb { width: 40px; height: 40px; border-radius: 6px; background: var(--paper-100) var(--haus) no-repeat center / 16px; box-shadow: 0 0 0 1px var(--ring); object-fit: cover; }
.objekt-zelle { width: 100%; min-width: 280px; max-width: 0; }
.objekt-name, .objekt-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.objekt-name { color: var(--ink-900); font-size: 14px; font-weight: 500; line-height: 16px; }
.objekt-name:hover { color: var(--green-700); text-decoration: none; }
.objekt-meta, .zelle-sub { color: var(--ink-500); font-size: 12px; line-height: 16px; }
.objekt-tabelle .num .zelle-sub { display: block; }
.schwelle + .kz-label { vertical-align: 0; }
.schwelle { color: var(--ink-500); cursor: help; }
.verdict-zelle .chips { flex-wrap: nowrap; }
.verdict-zelle .badge.chip { max-width: 112px; }
/* Punkt 6 plus 4 px Abstand: die Tabelle passt bei 1280 px (Statustext bis 141 px breit) */
.status-zelle .status { gap: 4px; line-height: 16px; }
.status-zelle .zelle-sub { display: block; margin-left: 8px; white-space: nowrap; }
/* an .verdict-zelle gebunden, sonst gewinnt .badge.chip (display: inline-block) */
.verdict-zelle .ab-1440 { display: none; }
@media (min-width: 1440px) { .verdict-zelle .ab-1440 { display: inline-block; } .verdict-zelle .bis-1440 { display: none; } }
.objekt-tabelle .schmal { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-1600 { display: none; }
@media (min-width: 1600px) { .ab-1600 { display: table-cell; } }
@media (max-width: 959px) {
  .objekt-tabelle { min-width: 960px; }
  /* Kopf klebt im Scrollrahmen des Panels (DESIGN 5 Tabelle): Rahmen scrollt in beide Richtungen */
  .tabelle-scroll:has(> .objekt-tabelle) { max-height: 70vh; overflow: auto; }
  .objekt-zelle { width: 240px; min-width: 240px; max-width: 240px; }
  .filterleiste select { flex: 1 1 160px; }
  /* Flagge-Feld in eigener Zeile: Platzhalter "Flagge, z. B. Erbbaurecht" ganz lesbar (Runde 7) */
  .filterleiste input[type="text"] { flex: 1 1 100%; }
}
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); align-items: stretch; gap: 16px; }
.karte {
  position: relative; display: flex; flex-direction: column; padding: 4px; border-radius: 10px; background: var(--paper-0);
  box-shadow: 0 0 0 1px var(--ring); transition: box-shadow var(--dauer) var(--ease);
}
.karte:hover { box-shadow: 0 0 0 1px var(--ring-strong), var(--shadow-1); }
/* Kopfzeile: Thumbnail 72 x 54 links, Name und Ort rechts; kein großes Bild, Reihen gleich hoch */
.karte-kopf { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.karte-kopf > div { flex: 1; min-width: 0; }
.karte-bild { flex: none; width: 72px; height: 54px; border-radius: 6px; background: var(--paper-100) var(--haus) no-repeat center / 16px; box-shadow: 0 0 0 1px var(--ring); object-fit: cover; }
/* min-width 0 und minmax(0, 1fr): lange Namen (nowrap) dürfen Karte und Raster nicht verbreitern */
.karte { min-width: 0; }
.karte-inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
/* Name bis zwei Zeilen, Ort umbrechend: in der Karte wird nichts abgeschnitten */
.karte-titel {
  display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; overflow-wrap: anywhere;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.karte-titel a { color: var(--ink-900); }
.karte-titel a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.karte-titel a:hover { text-decoration: none; }
.karte .objekt-meta { margin-top: 0; white-space: normal; overflow-wrap: anywhere; }
.karte-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.karte-zahlen dt { color: var(--ink-500); font-size: 11px; font-weight: 500; line-height: 14px; }
/* Wert und Kürzel bleiben je für sich ganz; reicht die Spalte nicht, bricht das Kürzel unter den Wert */
.karte-zahlen dd { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.karte-zahlen dd .kz-label { margin-left: 0; }
.karte .chips .badge { white-space: normal; overflow-wrap: anywhere; }

/* Board (Kacheln): nur belegte Spalten. Bis vier teilen sich die Breite (je mindestens 232 px), die Köpfe kleben
   an der Seite; ab fünf 264 px und waagrechter Scroll im Rahmen. Nie Maximalhöhe, nie senkrechter Scroll im Board. */
.board-ohne { margin-bottom: 8px; color: var(--ink-500); font-size: 13px; line-height: 18px; }
.board {
  display: grid; grid-template-columns: repeat(var(--spalten), minmax(232px, 1fr)); align-items: start; gap: 12px;
  padding: 0 12px 12px; overflow-x: auto; border-radius: 10px; background: var(--paper-100); box-shadow: 0 0 0 1px var(--ring);
}
.board.breit { grid-template-columns: repeat(var(--spalten), 264px); }
@media (min-width: 1280px) { .board:not(.breit) { overflow: visible; } }
.board-spalte { min-width: 0; }
.board-kopf {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 8px; padding: 12px 0 8px; background: var(--paper-100); box-shadow: inset 0 -2px 0 var(--ink-300);
}
.board-kopf.gruen { box-shadow: inset 0 -2px 0 var(--green-500); }
.board-kopf.messing { box-shadow: inset 0 -2px 0 var(--brass-500); }
.board-kopf.amber { box-shadow: inset 0 -2px 0 var(--amber-700); }
.board-kopf h2 { overflow: hidden; color: var(--ink-900); font-size: 13px; font-weight: 600; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.board-zaehler { color: var(--ink-500); font-size: 12px; line-height: 16px; }
/* Kacheln behalten ihre Breite: eine breite Spalte (Status-Filter) legt sie nebeneinander */
.board-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
/* Listenelement streckt die Kachel: Kacheln einer Reihe sind gleich hoch */
.board-kacheln > li { display: grid; }
.board-alle { margin-top: 8px; font-size: 13px; font-weight: 500; line-height: 18px; }
.kachel {
  display: grid; align-content: start; gap: 8px; padding: 12px; border-radius: 8px; background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring);
  color: var(--ink-900); transition: box-shadow var(--dauer) var(--ease);
}
.kachel:hover { box-shadow: 0 0 0 1px var(--ring-strong), var(--shadow-1); text-decoration: none; }
.kachel-kopf { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kachel .thumb { flex: none; border-radius: 4px; }
.kachel-name-block { flex: 1; min-width: 0; }
.kachel-name { display: block; overflow: hidden; font-size: 13px; font-weight: 500; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
/* Zeile 2 bricht um, bevor ein Kürzel fällt; jeder Mini-Wert bleibt in sich ganz */
.kachel-zahlen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; font-weight: 500; line-height: 20px; }
.kachel-zahlen > span { white-space: nowrap; }
.mini-label { margin-right: 4px; color: var(--ink-500); font-size: 11px; font-weight: 500; }
.kachel-chips .badge { white-space: normal; overflow-wrap: anywhere; }
.chips-rest { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.kachel-chips .laeuft::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--green-500); vertical-align: 1px; }
@media (max-width: 959px) {
  .board, .board.breit { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0; overflow: visible; background: none; box-shadow: none; }
  .board-kopf { position: static; padding-top: 0; background: none; }
}

/* Objektdetail: Kopfpanel */
.objekt-kopf { position: relative; padding: 20px; border-radius: 10px; background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring); }
.kopf-oben { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.kopf-identitaet { display: flex; align-items: center; gap: 16px; min-width: 0; }
.kopf-bild { flex: none; width: 120px; height: 90px; border-radius: 8px; background: var(--paper-100) var(--haus) no-repeat center / 24px; box-shadow: 0 0 0 1px var(--ring); object-fit: cover; }
.objekt-titel { font: 700 26px/32px var(--schrift-marke); letter-spacing: -.01em; text-wrap: balance; }
.kopf-meta { margin-top: 4px; color: var(--ink-500); font-size: 13px; line-height: 18px; }
.fakten { display: flex; flex-wrap: wrap; row-gap: 12px; }
.fakten > div { min-width: 0; padding: 0 16px; border-left: 1px solid var(--paper-200); }
.fakten > div:first-child { padding-left: 0; border-left: 0; }
.fakten dt { color: var(--ink-500); font-size: 12px; font-weight: 500; line-height: 16px; }
.fakten dd { display: flex; align-items: center; min-height: 34px; font-weight: 500; white-space: nowrap; }
.fakten .inline-edit { gap: 4px; margin-left: -12px; }
.fakten .inline-edit :where(input, select) { font-weight: 500; }
.fakten input[name="unser_preis"] { width: 128px; }
.fakten select { field-sizing: content; }
.fakten dd .kz-label { margin-left: 4px; }
.fakt-leer dd { gap: 16px; color: var(--ink-700); white-space: normal; }
.fakten-zeile { display: none; }
.wiedervorlage { min-height: 34px; }
.wiedervorlage .wv-setzen { display: inline-flex; }
/* Leeres Datum wie im Kopf: Strich plus "setzen", erst dann das native Feld (Wiedervorlage, Verlauf) */
:is(.wiedervorlage, .datum-feld).wv-leer input, :is(.wiedervorlage, .datum-feld):not(.wv-leer) :is(.wv-strich, .wv-setzen) { display: none; }
.datum-zeile { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.kopf-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--paper-200); }
.wiedervorlage label { color: var(--ink-500); font-size: 12px; font-weight: 500; line-height: 16px; }
.wiedervorlage input { width: 148px; }
.aktionsleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aktionsleiste summary svg { color: var(--ink-500); }
@media (min-width: 640px) { .nur-schmal { display: none !important; } }
/* Mobil: Fakten als eine Zeile unter dem Namen, Status bleibt bedienbar, seltene Knöpfe ins Mehr-Menü */
@media (max-width: 639px) {
  .nur-breit { display: none !important; }
  .kopf-oben { gap: 12px; }
  .kopf-identitaet { align-items: flex-start; gap: 12px; }
  .kopf-bild { width: 64px; height: 48px; }
  .objekt-titel { font-size: 20px; line-height: 28px; }
  .fakten-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: 13px; line-height: 18px; }
  .fakten { width: 100%; }
  .fakten > .fakt { display: none; }
  .fakten > div, .fakten > div:first-child { padding: 0; border: 0; }
  .fakt-status { display: flex; align-items: center; gap: 8px; }
  .fakt-leer { width: 100%; margin-bottom: 8px; }
  .fakt-leer dd { flex-wrap: wrap; gap: 8px 16px; }
  .kopf-unten { margin-top: 12px; padding-top: 12px; }
}

/* Einheiten */
.einheiten-tabelle td { height: 52px; padding-block: 0; white-space: nowrap; }
.einheiten-tabelle :where(input, select) { padding: 0 8px; font-size: 13px; }
.einheiten-tabelle select { padding-right: 8px; background-image: none; }
.einheiten-tabelle select:is(:hover, :focus) { padding-right: 24px; background-image: var(--pfeil); background-position: right 8px center; }
.einheiten-tabelle .num input { padding-right: 0; text-align: right; }
/* Zahl hängt direkt am Kürzel: Feld so breit wie der Inhalt */
.einheiten-tabelle .ist-feld input { width: auto; field-sizing: content; min-width: 48px; }
.einheiten-tabelle :where(input[name="ist_miete"], input[name="marktmiete"], input[name="soll_12_18"]) { width: 64px; }
/* Markt und Soll mit Nachkommastellen (1595,83) nicht abschneiden: Feld wächst mit dem Inhalt */
.einheiten-tabelle :where(input[name="marktmiete"], input[name="soll_12_18"]) { width: auto; field-sizing: content; min-width: 64px; }
.einheiten-tabelle input[name="m2"] { width: auto; field-sizing: content; min-width: 48px; }
.einheiten-tabelle input[type="date"] { width: 132px; }
.einheiten-tabelle input[name="notiz"] { width: 160px; }
.einheiten-tabelle input::placeholder { color: var(--ink-300); }
/* Felder als Felder erkennbar (DESIGN 6 Einheiten): die Zeile wird bei Hover paper-100, die Felder darin tragen
   paper-0 als Fläche (paper-100 auf paper-100 wäre unsichtbar), am Feld selbst zusätzlich der Ring */
.einheiten-tabelle tbody tr:hover :is(input, select):not(:focus) { background-color: var(--paper-0); }
.einheiten-tabelle tbody tr :is(input, select):hover:not(:focus) { box-shadow: 0 0 0 1px var(--ring); }
/* In Ruhe sah man den Feldern nicht an, dass man dort etwas eintragen kann (Stephan 04.10.2026: "bei Gewerbe und
   Stellplätzen muss ich absolute Zahlen im Soll eingeben können"). Ein gepunkteter Unterstrich zeigt es, ohne zu
   lärmen; bei Hover und Fokus weicht er dem Ring. */
.einheiten-tabelle tbody td.num input[type="text"]:not(:hover, :focus) {
  border-bottom: 1px dashed var(--ink-300); border-radius: 3px 3px 0 0;
}
.einheiten-tabelle tbody td.num input[type="text"]:is(:hover, :focus) { border-bottom-color: transparent; }
/* Möglich: Wert mit Termin in der Zukunft in ink-500, "übernehmen" steht immer (nicht erst nach Änderung) */
.einheiten-tabelle .spaeter { color: var(--ink-500); }
.einheiten-tabelle .knopf-tertiaer.uebernehmen { display: flex; width: fit-content; margin-left: auto; padding-block: 0; visibility: visible; }
/* Passt bei 1280 ins Panel (996 px): 8 px Zellabstand, Kopf und Bezeichnung dürfen umbrechen, Badge und
   "übernehmen" stehen unter dem Wert (Zeile bleibt 52 px) */
.einheiten-tabelle :where(th, td) { padding-inline: 8px; }
.einheiten-tabelle th { white-space: normal; }
/* Bruch am Schrägstrich über <wbr> (Filter wbr_slash); kein hyphens: auto, das bricht in Chromium mitten im Wort
   ("EG Laden (Imb" / "iss/Dönerlad", gemessen 14.09.2026); anywhere bleibt Notbremse */
.einheiten-tabelle td:first-child { min-width: 120px; max-width: 136px; white-space: normal; overflow-wrap: anywhere; line-height: 16px; }
.einheiten-tabelle .delta .badge { display: table; margin: 2px 0 0 auto; }
.einheiten-tabelle tr:not(.geaendert) input[type="date"][value=""]:not(:hover, :focus) { color: transparent; background: var(--strich) no-repeat left 8px center; }
.einheiten-tabelle tr:not(.geaendert) input[type="date"][value=""]:not(:hover, :focus)::-webkit-calendar-picker-indicator { opacity: 0; }
/* Kalender-Icon in Ruhe unsichtbar, bei Hover oder Fokus der Zeile sichtbar (Inline-Edit, DESIGN 5 Eingaben) */
.einheiten-tabelle input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }
.einheiten-tabelle tr:is(:hover, :focus-within) input[type="date"]::-webkit-calendar-picker-indicator { opacity: 1; }
.einheiten-panel:has(#ansicht-vertraege:checked) .ansicht-mieten,
.einheiten-panel:has(#ansicht-mieten:checked) .ansicht-vertraege { display: none; }
.einheiten-tabelle .text-feld select { margin-left: -8px; }
/* Beleg-Kürzel als Auswahl: sieht aus wie das Kürzel, Tooltip nennt Herkunft und Quelle */
.einheiten-tabelle select.kz-select, .einheiten-tabelle select.kz-select:is(:hover, :focus) {
  height: 18px; padding: 0 4px; border-radius: 4px; background: var(--paper-0); color: var(--brass-500);
  font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: .04em; cursor: pointer;
}
.einheiten-tabelle select.kz-select { box-shadow: inset 0 0 0 1px rgb(169 142 91 / .35); }
.einheiten-tabelle select.kz-select:hover { box-shadow: inset 0 0 0 1px var(--brass-500); }
.einheiten-tabelle select.kz-select:focus { box-shadow: 0 0 0 2px var(--green-500); }
.ist-feld { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
/* Soll: Betrag in der Zeile, darunter Euro je m2 und die beiden Kappungsknoepfe (Stephan 21.09.2026).
   td ist 52 px hoch: die zweite Ebene liegt absolut und erscheint erst, wenn die Zeile angefasst wird,
   sonst waechst sie aus der Zeile heraus und ueberlappt die Trennlinie (gemessen 21.09.2026). */
.einheiten-tabelle td.soll-zelle { position: relative; white-space: nowrap; }
/* Deckt die Zelle beim Anfassen der Zeile ab, statt sich mit dem Betrag zu ueberlagern (gemessen 21.09.2026).
   Sichtbarkeit steuert allein die Huelle; die Knoepfe erben sie, sonst setzt die globale Regel
   ".einheiten-tabelle .knopf-tertiaer { visibility: hidden }" sie wieder gegen die Huelle durch. */
/* Liegt neben dem Betrag, nicht darüber: als Overlay verdeckte sie das Eingabefeld, ein Klick traf den
   Kappungsknopf statt das Feld (gemessen 04.10.2026). Der Platz ist in Ruhe reserviert, damit nichts springt. */
.soll-zweite {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; visibility: hidden;
}
.einheiten-tabelle tbody tr:is(:hover, :focus-within) .soll-zweite { visibility: visible; }
.einheiten-tabelle .soll-zweite .knopf-tertiaer { visibility: inherit; padding-block: 0; font-size: 12px; line-height: 16px; }
.einheiten-tabelle input.je-m2 { width: auto; field-sizing: content; min-width: 56px; }
.ist-feld .fehlt { margin: 0; }
.einheiten-tabelle .badge { margin-left: 4px; }

/* Rechner: Analyse und Entwicklung */
.rechner { display: grid; gap: 16px; }
.rechner > .kennzahlen { margin-block: 8px; }
.rechner-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rechner-spalten { display: grid; gap: 16px; align-items: start; }
.rechner-spalten > div { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1100px) { .rechner-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
fieldset.gruppe > legend { float: left; width: 100%; margin-bottom: 4px; padding: 0; }
fieldset.gruppe > legend + * { clear: both; }
.gruppe > :where(legend, h3) { margin-bottom: 4px; font-size: 14px; font-weight: 600; line-height: 20px; }
.gruppe label {
  display: grid; grid-template-columns: minmax(0, 1fr) 136px; align-items: center; column-gap: 16px; padding: 8px 0;
  border-bottom: 1px solid var(--paper-200); color: var(--ink-700);
}
.gruppe label .hinweis { display: block; font-size: 12px; line-height: 16px; }
.gruppe label input[type="number"] { width: 100%; text-align: right; }
.gruppe label:has(input[type="range"]) { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
.gruppe label input[type="range"] { grid-column: 1 / -1; }
.gruppe label output { color: var(--ink-900); font-weight: 500; text-align: right; white-space: nowrap; }
.gruppe > p { margin-top: 12px; }
.gruppe > button { margin-top: 12px; }
.gruppe .werte + .werte { margin-top: 8px; border-top: 1px solid var(--paper-200); }
/* Posten mit Haken (Laufende Kosten): Haken und Name links, Feld rechts, Vorschlagszeile darunter über beide Spalten */
.posten {
  display: grid; grid-template-columns: minmax(0, 1fr) 136px; align-items: center; column-gap: 16px; row-gap: 2px;
  padding: 8px 0; border-bottom: 1px solid var(--paper-200);
}
.posten .haken { display: flex; align-items: center; gap: 8px; color: var(--ink-700); cursor: pointer; }
.posten .haken input { flex: none; }
.posten input[type="number"] { width: 100%; text-align: right; }
.posten .vorschlag { grid-column: 1 / -1; padding-left: 24px; font-size: 12px; line-height: 16px; }
.posten .vorschlag .eigen { display: none; }
.posten .vorschlag.eigener-wert .eigen { display: inline; }
.gruppe table { margin-top: 4px; }
.gruppe :where(th, td) { padding-inline: 8px; }
.gruppe :where(th, td):first-child { padding-left: 0; }
.gruppe :where(th, td):last-child { padding-right: 0; }
.gruppe :where(th, td):not(:first-child), .jahre-tabelle :where(th, td):not(:first-child) { text-align: right; white-space: nowrap; }
.gruppe tr.summe td { border-top: 1px solid var(--ink-300); font-weight: 600; }
.klartext p { max-width: 68ch; }
.analyse-kopf { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .analyse-kopf { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.schwelle-block .kennzahl-wert { margin-top: 8px; }
.schwelle-block .hinweis { margin-top: 4px; }
.gruppe-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 4px; }
.gruppe-kopf h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; }
.diagramm-leer { padding-block: 32px; }
.klartext .kz { font-weight: 500; }
.diagramme { display: grid; gap: 24px; margin: 8px 0 16px; }
@media (min-width: 960px) { .diagramme { grid-template-columns: 1fr 1fr; } }
.chart { display: block; width: 100%; height: auto; }
.chart polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .achse { stroke: var(--ink-300); stroke-width: 1; }
.chart text { fill: var(--ink-500); font-size: 11px; }
.linie-cashflow { stroke: var(--ink-700); }
.linie-wert { stroke: var(--green-700); }
.linie-schuld { stroke: var(--signal-600); }
.linie-cashflow-farbe { color: var(--ink-700); font-weight: 600; }
.linie-wert-farbe { color: var(--green-700); font-weight: 600; }
.linie-schuld-farbe { color: var(--signal-600); font-weight: 600; }
.legende { margin-top: 8px; color: var(--ink-500); font-size: 12px; line-height: 16px; }
.analyse:has(#tiefe-kurz:checked) :where(.ab-rechnen, .ab-alles),
.analyse:has(#tiefe-rechnen:checked) .ab-alles { display: none; }

/* Fragen (Chat) */
.gespraech { display: grid; gap: 16px; margin-bottom: 24px; }
.nachricht { display: grid; gap: 4px; max-width: 70%; min-width: 0; }
.nachricht.frage { justify-self: end; justify-items: end; }
.nachricht-kopf { color: var(--ink-500); font-size: 12px; line-height: 16px; }
.nachricht .md { padding: 12px 16px; border-radius: 10px; }
.nachricht.frage .md { background: var(--paper-100); }
.nachricht.antwort .md { background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring); }
.vorschlag-box { display: grid; gap: 12px; margin-bottom: 24px; padding: 16px; border-radius: 10px; background: var(--amber-100); }
.vorschlag-box pre { max-height: 220px; overflow: auto; color: var(--ink-700); font: 12px/16px var(--mono); }
.chat-job { margin-bottom: 16px; }
.chat-form { display: flex; align-items: flex-end; gap: 12px; }
@media (max-width: 639px) { .nachricht { max-width: 100%; } .chat-form { flex-direction: column; align-items: stretch; } }

/* Eingang */
.eingang-form { display: grid; align-items: start; gap: 16px; }
@media (min-width: 960px) { .eingang-form { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 240px; padding: 32px; border: 1px dashed var(--ink-400); border-radius: 10px; background: var(--paper-0);
  text-align: center; transition: border-color var(--dauer) var(--ease), background-color var(--dauer) var(--ease);
}
.dropzone:hover, .dropzone.drag { border-color: var(--green-500); background: var(--green-100); }
.dropzone:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 1px var(--green-500); }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone svg { margin-bottom: 4px; color: var(--ink-300); }
.dropzone-titel { font-weight: 500; }
.dropzone-titel .nur-schmal { display: none; }
@media (max-width: 959px) {
  .dropzone { min-height: 160px; padding: 24px 16px; }
  .dropzone-titel .nur-breit { display: none; }
  .dropzone-titel .nur-schmal { display: inline; }
}
/* Liste liegt über dem unsichtbaren Dateifeld, damit "Entfernen" klickbar bleibt; Ziehen fängt weiter die Dropzone */
.dateiliste { position: relative; z-index: 1; width: 100%; max-width: 480px; margin-top: 16px; text-align: left; }
.dateiliste:empty { display: none; }
.dateiliste li { display: flex; align-items: center; gap: 16px; padding: 4px 0; border-top: 1px solid var(--paper-200); font-size: 13px; line-height: 18px; }
.dateiliste li span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateiliste li span:nth-child(2) { flex: none; color: var(--ink-500); }
.dateiliste li span + span { flex: none; color: var(--ink-500); }
.eingang-felder { display: grid; gap: 16px; }
/* Name oben, Quelle und Datum darunter: jede Zeile gleich gebaut, auch bei kurzen Namen */
.zuletzt .liste > li { display: grid; gap: 2px; justify-content: stretch; }
.zuletzt .liste a { min-width: 0; overflow-wrap: anywhere; }
.eingang-felder > button { justify-self: end; }

/* Unzugeordnet */
.mail-liste { padding: 0; }
.mail-zeile { display: grid; gap: 12px 32px; padding: 16px 20px; border-bottom: 1px solid var(--paper-200); }
.mail-zeile:last-child { border-bottom: 0; }
.mail-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.mail-kopf { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-500); font-size: 12px; line-height: 16px; }
.mail-kopf span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-kopf span + span { flex: none; }
.mail-betreff { margin-top: 4px; font-weight: 500; line-height: 20px; }
.mail-auszug {
  display: -webkit-box; max-width: 68ch; margin-top: 4px; overflow: hidden; color: var(--ink-500); font-size: 13px;
  line-height: 18px; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mail-aktionen-spalte { display: flex; align-items: center; gap: 16px; }
.mail-aktionen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mail-aktionen select { width: 220px; }
.mail-aktionen input { width: 176px; }
@media (max-width: 639px) {
  .mail-zeile { grid-template-columns: minmax(0, 1fr); }
  .mail-aktionen :is(select, input) { flex: 1 1 100%; width: 100%; }
}

/* Einstellungen */
.einstellungen { display: grid; gap: 16px; max-width: 960px; }
.felder { display: grid; gap: 16px; }
@media (min-width: 960px) { .felder { grid-template-columns: 1fr 1fr; } }
.felder + .panel-titel { margin-top: 24px; margin-bottom: 12px; }
.feld .zahl-feld { width: 12rem; max-width: 100%; text-align: right; }
.speicherleiste {
  position: sticky; bottom: 16px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px;
  padding: 12px 20px; border-radius: 10px; background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring), var(--shadow-2);
}
.status-tabelle th { width: 200px; padding-left: 0; color: var(--ink-700); font-size: 13px; line-height: 18px; white-space: normal; }
.status-tabelle td:last-child { padding-right: 0; }
.status-tabelle tbody tr:hover { background: none; }
.upload-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.preise-tabelle input { width: 112px; text-align: right; }
.maklerfragen-text { width: 100%; min-height: 480px; }

/* Login */
.login-seite { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-form { display: grid; gap: 16px; width: 100%; max-width: 320px; }
.login-marke { line-height: 0; text-align: center; }
.login-marke img { width: 220px; height: auto; margin-inline: auto; }
.login-marke::after { content: ""; display: block; width: 24px; height: 1px; margin: 16px auto 8px; background: var(--brass-500); }
.login-form button { width: 100%; }

/* Reiter Unterlagen: drei Bereiche nebeneinander ab 1280 px, darunter untereinander */
.unterlagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: start; }
.fortschritt { flex: none; padding: 2px 8px; border-radius: 4px; background: var(--paper-100); color: var(--ink-700); font-size: 12px; font-weight: 500; line-height: 18px; font-variant-numeric: tabular-nums; }
.fortschritt.voll { background: var(--green-100); color: var(--green-700); }
.checkliste { margin: 0; padding: 0; list-style: none; }
.checkliste > li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--paper-200); font-size: 13px; line-height: 18px; }
.checkliste > li:last-child { border-bottom: 0; }
.checkliste .haken { display: flex; align-items: flex-start; gap: 8px; min-width: 0; color: var(--ink-900); font-size: 14px; line-height: 22px; }
.checkliste .haken input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--green-700); }
.checkliste .haken input.fest { pointer-events: none; }
.checkliste .haken span { overflow-wrap: anywhere; }
.checkliste .befund { grid-column: 1; padding-left: 24px; color: var(--ink-500); overflow-wrap: anywhere; }
.checkliste .befund a { color: var(--green-700); text-decoration: none; }
.checkliste .befund a:hover { text-decoration: underline; text-underline-offset: 2px; }
.checkliste .befund .knopf-tertiaer { margin-left: 8px; }
.checkliste .notiz { grid-column: 1; height: 28px; margin-left: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--ink-900); font: inherit; font-size: 13px; }
.checkliste .notiz::placeholder { color: var(--ink-450); }
/* leere Notiz in Ruhe unsichtbar (Platz bleibt), sichtbar bei Hover der Zeile, Fokus oder Inhalt */
.checkliste .notiz:placeholder-shown { opacity: 0; }
.checkliste > li:hover .notiz, .checkliste > li:focus-within .notiz, .checkliste .notiz:not(:placeholder-shown) { opacity: 1; background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring); }
.checkliste .notiz:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--green-500); }
.checkliste .entfaellt { grid-column: 2; grid-row: 1; align-self: start; color: var(--ink-500); }
.checkliste .entfaellt:hover { color: var(--green-700); }
.checkliste > li.stand-entfaellt .haken span { color: var(--ink-500); text-decoration: line-through; text-decoration-color: var(--ink-300); }
.checkliste > li.stand-teil .haken input { accent-color: var(--amber-700); }

/* Entscheidungs-Cockpit (Überblick): Ampeln, Preisrahmen, Wege */
.badge.gross { padding: 4px 8px; font-size: 13px; line-height: 16px; }
.ampeln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0 0 4px; padding: 0; list-style: none; }
.ampel { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 8px 0; border-top: 1px solid var(--paper-200); cursor: help; }
.ampel-punkt { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--ink-300); }
.ampel.stand-gruen .ampel-punkt { background: var(--green-500); }
.ampel.stand-gelb .ampel-punkt { background: var(--amber-700); }
.ampel.stand-rot .ampel-punkt { background: var(--signal-600); }
.ampel-text { display: flex; flex-direction: column; min-width: 0; }
.ampel-label { color: var(--ink-500); font-size: 12px; font-weight: 500; line-height: 16px; }
.ampel-wert { font-size: 14px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ampel-wert.fehlt { display: inline-flex; align-self: flex-start; margin: 2px 0; }
.preisrahmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0 0 8px; padding: 0; list-style: none; }
.preis { display: flex; flex-direction: column; min-width: 0; padding: 8px 0; border-top: 1px solid var(--paper-200); cursor: help; }
.preis-label { color: var(--ink-500); font-size: 12px; font-weight: 500; line-height: 16px; }
.preis-wert { font-size: 14px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preis.wichtig .preis-wert { color: var(--green-700); }
.preis-zusatz { min-height: 16px; color: var(--ink-500); font-size: 12px; line-height: 16px; }
.entscheidung-wege { justify-content: flex-end; }
/* Gebot */
.gebot-form .felder-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 16px; }
.gebot-form textarea { width: 100%; }
.vorbehalte { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.vorbehalte legend { margin-bottom: 4px; color: var(--ink-500); font-size: 12px; font-weight: 500; line-height: 16px; }
.vorbehalte .haken { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 22px; }
.vorbehalte .haken input { flex: none; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--green-700); }
.antwort-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.antwort-form input[type="text"] { width: 160px; }
.preisbasis-tabelle { width: 100%; border-collapse: collapse; }
.preisbasis-tabelle th, .preisbasis-tabelle td { padding: 4px 8px; border-bottom: 1px solid var(--paper-200); font-size: 13px; line-height: 18px; }
/* Gruppenkopf (Aufruf, Unser Preis) links ueber seinen zwei Spalten, Linie bindet die Gruppe; kein Zentrieren (DESIGN 8) */
.preisbasis-tabelle thead tr:first-child th { padding-bottom: 2px; border-bottom: 0; text-align: left; }
.preisbasis-tabelle thead tr:first-child th[colspan] { border-bottom: 1px solid var(--paper-200); }
.preisbasis-tabelle thead tr:last-child th { padding-top: 2px; }
.preisbasis-tabelle th { color: var(--ink-500); font-size: 12px; font-weight: 500; }
.preisbasis-tabelle th:first-child, .preisbasis-tabelle td:first-child { padding-left: 0; }
.preisbasis-tabelle tr:last-child td { border-bottom: 0; }
.preisbasis-tabelle td.num { font-weight: 500; font-variant-numeric: tabular-nums; }
.preis-inline { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.preis-inline input { width: 120px; text-align: right; }
/* Zielfelder (03.10.2026): Rendite oder Faktor eintragen, die App setzt den Preis; Kuerzel wie in der Wertzelle */
.ziel-inline { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0; }
/* Zielfelder tragen einen gepunkteten Unterstrich, sonst sehen sie aus wie Text und niemand tippt hinein.
   Beim Zeigen und beim Fokus werden sie zum vollen Feld. */
.ziel-inline input[type="text"] { width: 52px; padding: 0 4px 0 6px; text-align: right; font-size: 13px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed var(--ink-300); border-radius: 3px 3px 0 0; cursor: text; }
tr:hover .ziel-inline input[type="text"],
.ziel-inline input[type="text"]:hover { background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring); border-bottom-color: transparent; border-radius: 3px; }
.ziel-inline input[type="text"]:focus { border-bottom-color: transparent; }
.ziel-inline .einheit { font-weight: 500; }
.ziel-inline .einheit:empty { display: none; }
.ziel-inline .knopf-tertiaer { margin-left: 6px; }
@media (max-width: 599px) {
  /* 400 px: fuenf Spalten ohne Scrollen, Kuerzel bricht unter den Wert (wie in der Karte, DESIGN 5) */
  .preisbasis-tabelle th, .preisbasis-tabelle td { padding-inline: 4px; }
  .preisbasis-tabelle td.num .kz-label { display: block; width: fit-content; margin: 2px 0 0 auto; }
  .ziel-inline { display: grid; grid-template-columns: auto auto; justify-content: end; }
  .ziel-inline :is(.kz-label, .kz-fehlt, .knopf-tertiaer) { grid-column: 1 / -1; justify-self: end; }
  .preis-inline input { width: 92px; padding-inline: 4px; }
  .ziel-inline input[type="text"] { width: 40px; padding-inline: 2px; }
}
/* Dashboard: Heute */
.heute { margin-bottom: 16px; }
.heute .liste > li { gap: 4px 16px; }
.heute .liste a { font-weight: 500; color: var(--ink-900); text-decoration: none; }
.heute .liste a:hover { color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; }
.heute-gebot { color: var(--green-700); }
.heute-wiedervorlage { color: var(--signal-600); }

/* Richter-Runde Cockpit (24.09.2026) */
.ampel-punkt { width: 6px; height: 6px; margin-top: 5px; }
.preis-wert { font-size: 16px; line-height: 22px; }
.gebot-form { display: grid; gap: 16px; }
.vorbehalte { gap: 8px; }
/* Offenes Gebot-Formular: dann führt nur "Entwurf speichern" (eine Primäraktion je Blick) */
#tab:has(.gebot-form) .entscheidung-wege .knopf-primaer { background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring), var(--shadow-1); color: var(--ink-900); }
#tab:has(.gebot-form) .entscheidung-wege .knopf-primaer:hover { background: var(--paper-0); box-shadow: 0 0 0 1px var(--ring-strong), var(--shadow-1); }
.unterlagen .panel-kopf > div:first-child { flex: 1 1 180px; }
/* Verträge-Ansicht: elf Spalten passen bei 1440 px ins Panel, Textfelder wachsen mit dem Inhalt */
.ansicht-vertraege .einheiten-tabelle td { padding-inline: 6px; }
.ansicht-vertraege .einheiten-tabelle input[type="date"] { width: 118px; }
.ansicht-vertraege .einheiten-tabelle :where(input[name="mieter"], input[name="option"], input[name="wertsicherung"]) { width: auto; field-sizing: content; min-width: 64px; max-width: 160px; }
.ansicht-vertraege .einheiten-tabelle input[name="notiz"] { width: 88px; }
.ansicht-vertraege .einheiten-tabelle :where(input[name="bk_vz"], input[name="kaution"]) { width: 60px; }
.heute .liste > li { justify-content: flex-start; }
.panel-kopf .hinweis, .gebot .hinweis, .preisbasis .hinweis { max-width: 68ch; }
@media (max-width: 599px) {
  .entscheidung-wege { display: grid; grid-template-columns: 1fr 1fr; }
  .entscheidung-wege > .knopf-tertiaer { grid-column: span 2; justify-content: flex-start; }
  .entscheidung-wege .inline-form, .entscheidung-wege .inline-form button, .entscheidung-wege > button { width: 100%; }
  .entscheidung-wege > button { grid-column: span 2; }
}

/* Aufräumen in der Tabelle: Auswahlspalte, Leiste über der Tabelle, Gefahrknopf nur mit Auswahl aktiv */
.auswahl-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--ring); }
.auswahl-stand { color: var(--ink-500); font-size: 13px; }
.spalte-wahl { width: 36px; padding-inline: 12px 0 !important; }
.spalte-wahl input { accent-color: var(--green-700); width: 16px; height: 16px; margin: 0; vertical-align: middle; }
.knopf-gefahr { color: var(--signal-600); }
.knopf-gefahr:hover:not(:disabled) { background: var(--signal-100); color: var(--signal-600); box-shadow: 0 0 0 1px var(--signal-600); }
.loeschen-aktionen { justify-content: flex-end; margin-top: 16px; }

/* Gesamt-Ist in Entwicklung, Überblick und Leerzustand: zwei Felder unter der Kennzahl, nur ohne Ist in den Einheiten.
   Mit gespeichertem Wert sind die Felder hinter "Ändern" (details) eingeklappt; offen tragen sie Ring und Fläche. */
:is(.kennzahl, .leerzustand) .ist-gesamt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kennzahl :is(.ist-gesamt, .ist-gesamt-aendern) { order: 3; }
.leerzustand .ist-gesamt { justify-content: center; }
:is(.kennzahl, .leerzustand) .ist-gesamt input { min-width: 0; }
:is(.kennzahl, .leerzustand) .ist-gesamt input[name="ist_miete_pa"] { width: 120px; }
:is(.kennzahl, .leerzustand) .ist-gesamt input[name="ist_miete_quelle"] { flex: 1 1 140px; }
.ist-gesamt-aendern > summary { display: inline-flex; list-style: none; cursor: pointer; }
.ist-gesamt-aendern > summary::-webkit-details-marker { display: none; }
.ist-gesamt-aendern[open] .ist-gesamt input { background-color: var(--paper-0); box-shadow: 0 0 0 1px var(--ring); }
.ist-gesamt-aendern[open] .ist-gesamt .knopf-tertiaer { display: inline-flex; }
.kennzahl-zusatz.quelle { overflow-wrap: anywhere; }
/* Kennzahlen im Entscheidungs-Cockpit: festes Raster, drei Spalten ab 640 px, zwei darunter, damit die Trennlinien
   untereinander stehen (Richter Befund 4). Zusatzzeile mit Basis oder FEHLT-Grund. */
.entscheidung-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
/* Kennzahl bleibt eine Zeile (Richter N1): bei schmaler Breite lieber kleiner als Zahl und Einheit getrennt */
.entscheidung-kennzahlen .kennzahl-wert { white-space: nowrap; }
.kz-anker { white-space: nowrap; }
/* Weitere FEHLT-Gruende hinter einem Hinweis statt in voller Laenge (Richter N2) */
.kennzahl-zusatz .mehr { white-space: nowrap; border-bottom: 1px dotted var(--ink-300); cursor: help; }
@media (max-width: 639px) {
  .entscheidung-kennzahlen { grid-template-columns: 1fr 1fr; }
  /* Block mit den Gesamt-Ist-Feldern über die volle Breite, die Felder darunter in einer Zeile */
  .entscheidung-kennzahlen .kennzahl:has(.ist-gesamt) { grid-column: 1 / -1; }
  .entscheidung-kennzahlen .kennzahl-wert { font-size: 20px; line-height: 24px; }
  /* Speichern neben den Betrag, die Quelle darunter in voller Breite (Richter N6) */
  /* Speichern neben den Betrag, Quelle darunter voll breit; gleicher Selektor-Praefix wie die Grundregel,
     sonst gewinnt deren hoehere Spezifitaet (Richter N6) */
  :is(.kennzahl, .leerzustand) .ist-gesamt input[name="ist_miete_quelle"] { order: 3; flex: 1 1 100%; }
  :is(.kennzahl, .leerzustand) .ist-gesamt .knopf-tertiaer { order: 1; }
}

/* Einstieg bei Verdict RAUS: eigener Block vor den Wegen, damit ein tiefes Gebot sichtbar bleibt (Stephan 04.10.2026) */
.raus-einstieg { margin: 16px 0 0; padding: 12px 16px; border-radius: 8px; background: var(--paper-100); }
.raus-einstieg p { margin: 4px 0 0; }
.raus-einstieg .label { margin: 0; }

/* Was die Bank trägt (Überblick, 04.10.2026): aufklappbar, der Kernsatz steht immer in der Summary, die zwei Tabellen
   darunter. Grund und Basis als 12-px-Unterzeile unter der ersten Spalte, nie als eigene Spalte: so passt Bank p.a. bei
   400 px ohne Scrollen ins Bild (Richter 04.10.2026). Summen in ink-900, grün nur bei Lücke null oder darunter. */
.bank { margin-top: 24px; }
.bank > summary { display: grid; gap: 4px; list-style: none; cursor: pointer; border-radius: 4px; }
.bank > summary::-webkit-details-marker { display: none; }
.bank > summary:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
.bank > summary .label { display: block; }
.bank-satz { max-width: 68ch; font-size: 14px; line-height: 22px; }
.bank-satz strong { font-weight: 600; color: var(--green-700); }
.bank-klappe { justify-self: start; }
.bank[open] > summary .zu, .bank:not([open]) > summary .auf { display: none; }
.bank > .hinweis { margin: 8px 0 12px; max-width: 68ch; }
.bank-tabelle { margin-bottom: 16px; }
.bank-tabelle td { vertical-align: top; }
.bank-tabelle .sub { display: block; max-width: 68ch; color: var(--ink-500); font-size: 12px; font-weight: 400; line-height: 16px; }
.bank-tabelle tr.summe td { font-weight: 500; border-top: 1px solid var(--paper-200); }
.bank-tabelle td.num.gut { color: var(--green-700); }
.bank-tabelle .bank-oder { color: var(--ink-500); font-weight: 400; }
.bank-tabelle th .kz-label { vertical-align: 0; }
@media (max-width: 599px) {
  /* 400 px: Einheiten und Ist p.a. weg, Zahlenspalten so schmal wie ihr Inhalt, Spaltenköpfe dürfen umbrechen;
     die erste Spalte nimmt den Rest, nichts scrollt */
  .bank-tabelle .ab-600 { display: none; }
  .bank-tabelle td.num .bank-oder { display: block; }
  .bank-tabelle th { white-space: normal; }
  .bank-tabelle th.num, .bank-tabelle td.num { width: 1%; }
  .bank-tabelle th.num .kz-label { display: block; width: fit-content; margin: 2px 0 0 auto; }
}