/* Wiederverwendbare Bausteine (Auftrag "Betriebsdashboard Galini Olympou"
   Block 4): Karten/Zeilen statt dichter Tabellen, ruhige Statuskennzeichnung,
   Formulare, leere Zustaende. */

/* --- Karten/Buchungszeilen ------------------------------------------- */

.booking-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.booking-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease;
}

a.booking-card:hover,
a.booking-card:focus-visible {
  border-color: var(--color-aegean);
}

.booking-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.booking-card__name {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
}

.booking-card__dates {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.booking-card__meta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  flex-wrap: wrap;
}

/* --- Statuskennzeichnung ----------------------------------------------
   Ruhige, textbasierte Pills statt Ampelfarben (Auftrag: "sollen nicht
   nach technischem Monitoring-System aussehen"). Aegean fuer neutrale
   Zeit-/Ablaufzustaende, Olive fuer "laeuft/positiv", Gold ausschliesslich
   fuer Aufmerksamkeit. */

.status-pill {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-pill--arrival { background: #E7EEF3; color: var(--color-aegean); }
.status-pill--departure { background: #EFEAE0; color: #8A6A2F; }
.status-pill--current { background: #E9F0E7; color: var(--color-olive); }
.status-pill--neutral { background: var(--color-silver); color: var(--color-text-muted); }

/* --- Aufmerksamkeit erforderlich ---------------------------------------- */

.attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.attention-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--color-attention-bg);
  border: 1px solid #F0DFB8;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}

.attention-item__marker {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  margin-top: 6px;
}

.attention-item__text {
  color: var(--color-text);
  font-size: 0.92rem;
}

.attention-item__link {
  display: block;
  font-size: 0.85rem;
  margin-top: var(--space-1);
}

/* --- Leere Zustaende -----------------------------------------------------
   Ruhige, positive Formulierung statt leerer Flaeche (Auftrag: "eine
   ruhige positive Rueckmeldung"). */

.empty-state {
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-3) 0;
}

.empty-state--positive {
  color: var(--color-olive);
  font-style: normal;
  font-weight: 600;
}

/* --- Formulare (Login) -------------------------------------------------- */

.field {
  margin-bottom: var(--space-3);
}

.field label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

.field input:focus-visible {
  border-color: var(--color-aegean);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius);
  background: var(--color-aegean);
  color: var(--color-primary-contrast);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.button:hover { background: #16293D; }
.button:disabled { opacity: 0.6; cursor: default; }

.form-error {
  background: #F6EDE3;
  border: 1px solid #E6D2B6;
  color: #6B4A1E;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
}

/* --- Login-Seite ---------------------------------------------------------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: linear-gradient(180deg, var(--color-sand) 0%, var(--color-silver) 100%);
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

/* Vollstaendiges Galini-Olympou-Logo (Signet + griechischer und
   lateinischer Wortmarke) statt nur des Signets -- deutlich sichtbar mit
   grosszuegiger Ruheflaeche im Kartenformat (Auftrag: "gestalterische
   Korrektur vor dem Staging-Deploy"). Breitenbasierte Skalierung, da das
   Logo ein horizontales Wortmarken-Lockup ist (Seitenverhaeltnis ca. 1.9:1),
   nicht hoehenbasiert wie zuvor beim reinen Signet. */
.login-card__logo {
  width: min(260px, 72%);
  height: auto;
  margin: 0 auto var(--space-4);
}

.login-card h1 {
  margin-bottom: var(--space-4);
}

.login-card form {
  text-align: left;
}

/* --- Buchungsfall-Detail -------------------------------------------------- */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .detail-grid { grid-template-columns: 2fr 1fr; }
}

.detail-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.detail-block + .detail-block { margin-top: var(--space-3); }

.person-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.person-list li {
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}

.person-list li:last-child { border-bottom: none; }

.kv-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
}

.kv-list dt { color: var(--color-text-muted); }
.kv-list dd { margin: 0; }

.back-link {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
}

.search-field {
  margin-bottom: var(--space-4);
  max-width: 320px;
}

/* --- Buttons: weitere Varianten (Auftrag "Betriebsdashboard Galini
   Olympou" Block 5C) -- .button (primaer, siehe oben) bleibt fuer die
   haeufigste/empfohlene Aktion eines Dialogs reserviert. Sekundaer fuer
   "Abbrechen"/neutrale Zweitaktionen, "owner" ausschliesslich fuer
   folgenschwere, nur dem Owner vorbehaltene Aktionen (Storno, Preisaenderung,
   Kautionsabschluss mit Schaden) -- bewusst kein reines Rot/Alarm-Rot
   (Auftrag: "kein typisches technisches Admin-Panel"), sondern ein
   gedaempfter, erdiger Terracotta-Ton, der sich klar von Ägäisblau/Olivgruen
   absetzt, ohne wie eine Fehlermeldung zu wirken. --- */

.button {
  width: auto;
}

.button--block { width: 100%; }

.button--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.button--secondary:hover { background: var(--color-silver); }

.button--owner {
  background: #8A5A3D;
}

.button--owner:hover { background: #714A31; }

.button--small {
  padding: 6px 14px;
  font-size: 0.85rem;
}

.button-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* --- Dialog/Modal (Auftrag Block 5C: "bewusster Staff-Dialog", "klare
   Bestaetigung vor kritischen Aktionen") -- natives <dialog>, siehe
   js/modal.js. */

dialog.modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(560px, calc(100vw - var(--space-4) * 2));
  max-height: min(85vh, 720px);
  box-shadow: 0 12px 32px rgba(31, 60, 90, 0.22);
  color: var(--color-text);
  background: var(--color-surface);
}

dialog.modal--wide { width: min(720px, calc(100vw - var(--space-4) * 2)); }

dialog.modal::backdrop {
  background: rgba(31, 60, 90, 0.35);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.modal__title { margin: 0; }

.modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
}

.modal__close:hover { color: var(--color-text); }

.modal__body {
  padding: var(--space-4);
  overflow-y: auto;
  max-height: calc(85vh - 72px);
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.modal__section {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.modal__section h4 {
  margin: 0 0 var(--space-2);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
}

.field textarea { resize: vertical; min-height: 72px; }

.field__hint {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* --- Finanz-Kennzahlen (Buchungsdetail -> Finanzen, Auftrag Block 5C) --- */

.finance-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

@media (min-width: 480px) {
  .finance-stats { grid-template-columns: repeat(4, 1fr); }
}

.finance-stat {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}

.finance-stat__label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.finance-stat__value {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-aegean);
}

.finance-stat--positive .finance-stat__value { color: var(--color-olive); }
.finance-stat--attention .finance-stat__value { color: #8A6A2F; }

/* --- Forderungen ---------------------------------------------------------- */

.receivable-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.receivable-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}

.receivable-row__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.receivable-row__type { font-weight: 600; }

.receivable-row__meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-top: 2px;
}

.receivable-row__actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.status-pill--paid { background: #E9F0E7; color: var(--color-olive); }
.status-pill--partial { background: var(--color-attention-bg); color: #8A6A2F; }
.status-pill--open { background: #E7EEF3; color: var(--color-aegean); }
.status-pill--voided { background: var(--color-silver); color: var(--color-text-muted); text-decoration: line-through; }
.status-pill--released { background: #E9F0E7; color: var(--color-olive); }

/* --- Aufmerksamkeit erforderlich: angereicherte Karten (Block 5C) -------- */

.attention-item {
  align-items: stretch;
  flex-direction: column;
  gap: var(--space-1);
}

.attention-item__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.attention-item__body { flex: 1; min-width: 0; }

.attention-item__title {
  font-weight: 600;
  color: var(--color-text);
}

.attention-item__meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-top: 2px;
}

.attention-item__amount {
  font-weight: 600;
  color: var(--color-aegean);
}

.attention-item__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  margin-left: calc(8px + var(--space-2));
}

/* --- Verlauf (chronologische Finanzhistorie, Block 5C) ------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--color-border);
}

.timeline__item {
  position: relative;
  padding: 0 0 var(--space-3) var(--space-4);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-aegean);
}

.timeline__at {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.timeline__detail { color: var(--color-text); }

/* --- Kulanz (Block 5C) ---------------------------------------------------- */

.goodwill-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

.goodwill-card__status {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------
   Betreiberkalender (Auftrag 26.09.2026) -- Optik an den oeffentlichen
   Kalender angelehnt, Zustaende ohne Alarmfarben.
   ------------------------------------------------------------------ */
.ops-calendar {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  margin-bottom: var(--space-5);
}
.ops-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ops-calendar__title { margin: 0; font-family: var(--font-heading); }
.ops-calendar__weekdays,
.ops-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.ops-calendar__weekdays span {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding-bottom: var(--space-1);
}
.ops-day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 4.2rem;
  padding: 4px 6px;
  border-radius: 6px;
  background: #E9F0E7;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.8rem;
  overflow: hidden;
}
a.ops-day:hover,
a.ops-day:focus-visible { outline: 2px solid var(--color-aegean); outline-offset: 1px; }
.ops-day--empty { visibility: hidden; }
.ops-day__num { font-weight: 700; }
.ops-day__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
.ops-day__id { color: inherit; opacity: 0.8; }
.ops-day--free { background: #E9F0E7; }
.ops-day--reserved { background: var(--color-attention-bg); color: #6B4E17; }
.ops-day--confirmed { background: var(--color-aegean); color: #fff; }
.ops-day--block { background: #D9D6CF; color: var(--color-text); }
.ops-day--turnover { background: linear-gradient(135deg, #8FA6BB 50%, var(--color-aegean) 50%); color: #fff; }
.ops-day--arrival.ops-day--confirmed { background: linear-gradient(to right, #E9F0E7 35%, var(--color-aegean) 35%); }
.ops-day--arrival.ops-day--reserved { background: linear-gradient(to right, #E9F0E7 35%, var(--color-attention-bg) 35%); }
.ops-day--arrival.ops-day--block { background: linear-gradient(to right, #E9F0E7 35%, #D9D6CF 35%); }
.ops-day--departure { background: linear-gradient(to right, #8FA6BB 35%, #E9F0E7 35%); }
.ops-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-silver);
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.ops-calendar__legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.ops-swatch { width: 1.1rem; height: 1.1rem; border-radius: 3px; display: inline-block; }
.ops-swatch--free { background: #E9F0E7; border: 1px solid #C9D6C6; }
.ops-swatch--reserved { background: var(--color-attention-bg); border: 1px solid var(--color-gold); }
.ops-swatch--confirmed { background: var(--color-aegean); }
.ops-swatch--turnover { background: linear-gradient(135deg, #8FA6BB 50%, var(--color-aegean) 50%); }
.ops-swatch--block { background: #D9D6CF; }
@media (max-width: 640px) {
  .ops-day { min-height: 3rem; padding: 3px; }
  .ops-day__name { display: none; }
}

/* ------------------------------------------------------------------
   Preise & Saisonzeiten
   ------------------------------------------------------------------ */
.pricing-version { color: var(--color-text-muted); }
.pricing-form .detail-block { margin-bottom: var(--space-4); }
.pricing-test,
.pricing-check { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.pricing-table-wrap { overflow-x: auto; }
.pricing-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-2); }
.pricing-table th,
.pricing-table td { padding: 6px 6px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.pricing-table th { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); }
.pricing-table input:not([type="checkbox"]),
.pricing-table select { width: 100%; min-width: 4rem; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; }
.pricing-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.pricing-saved { color: var(--color-olive); font-weight: 600; }

/* --- Vorgang und Lebenszyklus (R2-G3) ------------------------------------
   Vier klar unterscheidbare Zustaende, weiterhin ohne Ampel: Anfrage
   neutral-hell, Vorreservierung Aegaeis, ueberfaellig als einziger
   Gold-Akzent, fest gebucht Olive. */

.status-pill--inquiry { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.status-pill--reserved { background: #E7EEF3; color: var(--color-aegean); }
.status-pill--overdue { background: var(--color-attention-bg); color: #6B4E17; border: 1px solid var(--color-gold); }

.lifecycle__status { margin-bottom: var(--space-2); }
.lifecycle__explanation p { margin: var(--space-1) 0; }

.notice {
  border-left: 3px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice p { margin: 0 0 var(--space-1); }
.notice--attention { border-left-color: var(--color-gold); background: var(--color-attention-bg); }

.progress {
  height: 6px;
  background: var(--color-silver);
  border-radius: 999px;
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-3);
  max-width: 420px;
}
.progress__bar { height: 100%; background: var(--color-olive); }

.booking-card__extra {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  color: var(--color-aegean);
}
.booking-card__extra--attention { color: #6B4E17; font-weight: 600; }

.receivable-row__flag {
  margin-top: var(--space-1);
  font-size: 0.8rem;
  color: var(--color-aegean);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.filter-chip {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 999px;
  padding: 4px 14px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.filter-chip[aria-pressed="true"] { background: var(--color-aegean); color: var(--color-white); border-color: var(--color-aegean); }

.code-list { list-style: none; padding: 0; margin: var(--space-3) 0; }
.code-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.code-value { font-size: 1.05rem; letter-spacing: 0.06em; user-select: all; }

.preline { white-space: pre-line; }


/* --- Nachbesserung R2-G3: Anfragen in der Aufmerksamkeitsliste ruhig, Ablaufplan,
   laufende Restzeit ------------------------------------------------------- */

.attention-item--inquiry { background: var(--color-surface); border-color: var(--color-border); }
.attention-item--inquiry .attention-item__marker { background: var(--color-aegean); }

.countdown { font-variant-numeric: tabular-nums; }
.countdown--overdue { color: #6B4E17; font-weight: 600; }

.case-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: var(--space-3);
  align-items: start;
}
@media (max-width: 760px) {
  .case-top { grid-template-columns: minmax(0, 1fr); }
}
.case-top > .lifecycle { margin: 0; }

.process-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.process__title { margin: 0 0 var(--space-2); font-size: 1rem; }
.process { list-style: none; margin: 0; padding: 0; }
.process__step {
  position: relative;
  display: flex;
  gap: var(--space-2);
  padding: 0 0 var(--space-3) 0;
}
.process__step:last-child { padding-bottom: 0; }
/* Verbindungslinie zum naechsten Schritt */
.process__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.process__step--done:not(:last-child)::before { background: var(--color-olive); }
.process__marker {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  margin-top: 2px;
  box-sizing: border-box;
}
.process__body { display: flex; flex-direction: column; min-width: 0; }
.process__label { font-size: 0.92rem; color: var(--color-text-muted); }
.process__state { font-size: 0.76rem; color: var(--color-text-muted); }

.process__step--done .process__marker { background: var(--color-olive); border-color: var(--color-olive); }
.process__step--done .process__label { color: var(--color-text); }

.process__step--current .process__marker { border-color: var(--color-aegean); box-shadow: inset 0 0 0 3px var(--color-surface); background: var(--color-aegean); }
.process__step--current .process__label { color: var(--color-aegean); font-weight: 700; }
.process__step--current .process__state { color: var(--color-aegean); }

.process__step--future .process__label { opacity: 0.75; }
.process__step--skipped .process__marker { border-style: dashed; }
.process__step--skipped .process__label { text-decoration: line-through; opacity: 0.7; }

.process__step--end .process__marker { background: var(--color-anthracite); border-color: var(--color-anthracite); border-radius: 3px; }
.process__step--end .process__label { color: var(--color-text); font-weight: 700; }

.process__step--problem .process__marker { background: var(--color-gold); border-color: var(--color-gold); box-shadow: none; }
.process__step--problem .process__label,
.process__step--problem .process__state { color: #6B4E17; }


/* --- R2-G3 Browserabnahme: einklappbare Bereiche, kompakte Zeilen, Faelligkeiten,
   Abzweige im Ablaufplan, Mehrmonatskalender ------------------------------- */

.fold { margin-bottom: var(--space-4); }
.fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: "›";
  display: inline-block;
  width: 1em;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
.fold[open] > summary::before { transform: rotate(90deg); }
.fold > summary h2,
.fold > summary h3 { margin: 0; display: inline; }
.fold__count { color: var(--color-text-muted); font-weight: 400; }
.fold__count--overdue { color: var(--color-danger); font-weight: 600; }
.fold--minor > summary { border-bottom: none; margin-bottom: var(--space-2); padding: var(--space-1) 0; }

.row-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.row-list > li + li { border-top: 1px solid var(--color-border); }
.case-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: inherit;
  text-decoration: none;
}
a.case-row:hover, a.case-row:focus-visible { background: var(--color-bg); }
.case-row__name { font-weight: 600; min-width: 10rem; }
.case-row__dates { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.case-row__extra { margin-left: auto; font-size: 0.88rem; color: var(--color-text-muted); }
.subgroup-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: var(--space-2) 0 var(--space-1); }

.countdown--overdue { color: var(--color-danger); font-weight: 700; }
.status-pill--overdue { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger); }
.attention-item--urgent { border-color: var(--color-gold); }
.attention-item--urgent .attention-item__marker { background: var(--color-gold); }
.attention-item--overdue { background: var(--color-danger-bg); border-color: var(--color-danger); }
.attention-item--overdue .attention-item__marker { background: var(--color-danger); }
.attention-item__due { font-size: 0.88rem; margin-top: var(--space-1); }

.process__due { font-size: 0.76rem; }
.process__branches { list-style: none; margin: var(--space-1) 0 0; padding: 0; }
.process__branch { font-size: 0.76rem; color: var(--color-text-muted); padding-left: 0.2rem; }
.process__branch::before { content: "↳ "; }
.process__branch--possible { color: var(--color-text); }
.process__branch--inactive { opacity: 0.6; }
.process__legend { font-size: 0.72rem; color: var(--color-text-muted); margin: var(--space-2) 0 0; }

.ops-months { display: grid; grid-template-columns: repeat(var(--months, 1), minmax(0, 1fr)); gap: var(--space-4); }
.ops-month__title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: 1.05rem; text-transform: capitalize; }
.ops-calendar__nav { display: flex; gap: var(--space-2); align-items: center; }
.ops-day--today { box-shadow: inset 0 0 0 2px var(--color-gold); }
.ops-months[style*="--months: 3"] .ops-day__name,
.ops-months[style*="--months: 2"] .ops-day__name { font-size: 0.66rem; }

.pricing-grid--aligned { align-items: flex-start; }
.pricing-grid--aligned .field { min-width: 14rem; }

.mail-link { color: var(--color-aegean); }


/* --- R2-G3 Nachbesserung: fester Prozessbaum, Finanzprotokoll, Gastzugang ---- */

/* Farbsprache: erledigt gruen, aktuell blau, offen grau, bald faellig gold,
   ueberfaellig rot, nicht genutzte Abzweige blass. */
.process__step--soon .process__marker { background: var(--color-gold); border-color: var(--color-gold); box-shadow: none; }
.process__step--soon .process__label,
.process__step--soon .process__state { color: #6B4E17; }
.process__step--overdue .process__marker,
.process__step--problem.process__step--overdue .process__marker { background: var(--color-danger); border-color: var(--color-danger); box-shadow: none; }
.process__step--overdue .process__label,
.process__step--overdue .process__state { color: var(--color-danger); }
.process__step--not_reached .process__marker { border-style: dotted; background: var(--color-surface); }
.process__step--not_reached .process__label { opacity: 0.55; }
.process__branch { margin-top: 2px; }
.process__branch--possible { color: var(--color-text); }
.process__branch--unused { opacity: 0.45; }
.process__branch--reached { color: var(--color-anthracite); font-weight: 700; opacity: 1; }
.process__branch--reached::before { content: "■ "; }
.process__branch-state { font-weight: 400; }
.process__legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.process__legend li { display: inline-flex; align-items: center; gap: 4px; }
.process__swatch { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--color-border); display: inline-block; box-sizing: border-box; }
.process__swatch--done { background: var(--color-olive); border-color: var(--color-olive); }
.process__swatch--current { background: var(--color-aegean); border-color: var(--color-aegean); }
.process__swatch--future { background: var(--color-surface); }
.process__swatch--soon { background: var(--color-gold); border-color: var(--color-gold); }
.process__swatch--overdue { background: var(--color-danger); border-color: var(--color-danger); }
.process__swatch--unused { opacity: 0.45; border-style: dashed; }

.finance-log > summary.finance-log__summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-aegean);
  padding: var(--space-1) 0;
}
.timeline__meta { font-size: 0.82rem; color: var(--color-text-muted); }

.code-list li.code-card { display: block; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.code-card .kv-list { margin-bottom: var(--space-2); }
.code-card .kv-list dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.code-name { font-weight: 600; }
.field .check-label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-weight: 600; font-size: 0.95rem; }
.field .check-label input[type="checkbox"] { width: auto; margin: 0; }


/* R2-G3 Abschlusskorrektur: bei beendetem Vorgang nur noch historisch durchlaufen. */
.process__step--passed .process__marker { background: #B7C8B1; border-color: #8FA889; }
.process__step--passed .process__label { color: var(--color-text); }
.process__step--passed:not(:last-child)::before { background: #B7C8B1; }
.process__swatch--passed { background: #B7C8B1; border-color: #8FA889; }


/* R2-G3: Anzahl offener Verfuegbarkeitsinteressen im Betreiberkalender. */
.ops-day { position: relative; }
.ops-day__interest {
  position: absolute; right: 3px; bottom: 2px;
  font-size: 0.66rem; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 6px;
  background: var(--color-surface); color: var(--color-aegean); border: 1px solid var(--color-gold);
}
.ops-legend-interest { font-size: 0.75rem; font-weight: 700; padding: 1px 4px; border-radius: 6px; border: 1px solid var(--color-gold); color: var(--color-aegean); background: var(--color-surface); }


/* Urlaubskasse: vorbereitete Nachrichten nur zum Kopieren. */
.prepared-message { border-top: 1px solid var(--color-border); padding-top: var(--space-2); margin-top: var(--space-2); }
.prepared-message__body { white-space: pre-wrap; font-family: var(--font-body); font-size: 0.9rem; background: var(--color-bg); padding: var(--space-2); border-radius: 6px; }

/* --- Finanzbereich (Finanzjournal P3) -------------------------------------
   Nutzt die vorhandenen Bausteine (detail-block, finance-stats, pricing-table,
   status-pill, timeline); hier nur das, was dort fehlt. */
.fin-filter { margin-bottom: var(--space-3); }
.fin-filter .field { min-width: 9rem; margin-bottom: 0; }
.fin-table td.fin-amount,
.fin-table th:nth-child(5) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-row--cancelled td { color: var(--color-text-muted); }
.fin-row--cancelled td.fin-amount { text-decoration: line-through; }
.fin-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.fin-link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.fin-history .timeline__detail { font-size: 0.9rem; }
/* Lange Geldart-Bezeichnungen duerfen das Raster auf schmalen Bildschirmen nicht sprengen. */
.fin-sums .finance-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .fin-sums .finance-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fin-sums .finance-stat__label { overflow-wrap: anywhere; hyphens: auto; }

.fin-hint--open { border-left: 4px solid var(--color-attention); padding-left: var(--space-2); }
.fin-hint--open .receivable-row__type { color: #8A6A2F; font-weight: 600; }

/* --- Verbesserungsrunde 1 (Finanzjournal) ----------------------------------
   Dialoge ohne doppelten Scrollbereich: nur der Inhalt scrollt, der Dialog
   selbst nicht. Gilt fuer alle Dialoge (gleicher Baustein). */
dialog.modal[open] { display: flex; flex-direction: column; overflow: hidden; }
dialog.modal .modal__header { flex: 0 0 auto; }
dialog.modal .modal__body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
dialog.modal--xwide { width: min(1080px, calc(100vw - var(--space-4) * 2)); max-height: min(92vh, 980px); }

/* Mehrspaltige Formulare ab Tablet-Breite; auf dem Smartphone einspaltig. */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-3); }
.form-grid > .field, .form-grid > details { min-width: 0; }
@media (min-width: 720px) {
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-grid .field--full { grid-column: 1 / -1; }
  .form-grid .field--half { grid-column: span 2; }
}
.form-grid .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-grid .field select { width: 100%; box-sizing: border-box; }

.fin-more { margin: 0 0 var(--space-2); }
.fin-more > summary { cursor: pointer; color: var(--color-primary); font-size: 0.9rem; padding: var(--space-1) 0; }
.fin-more[open] > summary { margin-bottom: var(--space-2); }

.fin-section { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2) var(--space-3) var(--space-1); margin: 0 0 var(--space-3); }
.fin-section > legend { font-weight: 600; padding: 0 var(--space-1); }

.fin-split__line {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-2);
  border-bottom: 1px dashed var(--color-border); margin-bottom: var(--space-2); position: relative;
}
@media (min-width: 720px) {
  .fin-split__line { grid-template-columns: minmax(10rem, 1.2fr) minmax(12rem, 1.6fr) minmax(7rem, 0.8fr) minmax(8rem, 1fr) 2rem; align-items: start; }
  .fin-split__line .field--wide { grid-column: 2 / 4; }
}
.fin-split__line .field select, .fin-split__line .field input { width: 100%; box-sizing: border-box; }
.fin-split__remove { background: none; border: none; font-size: 1.4rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; padding: var(--space-1); align-self: center; }
.fin-split__remove:hover { color: var(--color-danger); }
.fin-split__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.fin-split__status { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }
.fin-split__status--over { color: var(--color-danger); font-weight: 600; }
.fin-docmode { margin-bottom: var(--space-2); }
.fin-docmode .pricing-check { margin-bottom: 0; }
.fin-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Journal: Werkzeugzeile, kompakte Filter, breite Tabellen ohne unnoetige Umbrueche */
.fin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.fin-saved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; flex: 1 1 24rem; }
.fin-filter { margin-bottom: var(--space-3); }
.fin-filter__main { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-2) var(--space-3); align-items: end; }
.fin-filter__main .field { margin-bottom: 0; min-width: 0; }
.fin-filter__main .field select, .fin-filter__main .field input { width: 100%; box-sizing: border-box; }
.fin-filter__wide { grid-column: span 2; }
.fin-filter__buttons { align-self: end; padding-bottom: 2px; }
.fin-filter .pricing-check { margin-bottom: var(--space-1); align-self: end; }
.fin-table td, .fin-table th { white-space: nowrap; }
.fin-table td.fin-wrap { white-space: normal; min-width: 14rem; }
.fin-row--new td { background: var(--color-attention-bg); }
.fin-sort { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--color-primary); cursor: pointer; white-space: nowrap; }
.fin-sums > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; }
.fin-sums__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; }
.fin-sums__short { color: var(--color-text-muted); font-size: 0.9rem; }
@media (min-width: 1100px) { .fin-sums .finance-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fin-choice { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 720px) { .fin-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fin-choice .field__hint { margin-top: var(--space-1); }
.fin-open-group p { margin: 0 0 var(--space-2); font-size: 0.9rem; }

/* --- Abschliessende Korrekturrunde (K-01, K-03, K-04) --------------------- */
dialog.modal--lg { width: min(900px, calc(100vw - var(--space-4) * 2)); max-height: min(92vh, 980px); }
/* Schaltflaechen der Formulardialoge bleiben am unteren Rand sichtbar. */
.modal__body .modal__actions--sticky {
  position: sticky; bottom: calc(var(--space-4) * -1); z-index: 1;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  margin: var(--space-3) 0 calc(var(--space-4) * -1); padding: var(--space-3) 0 var(--space-4);
}

/* K-01 Vorgangsdialog: Kopfdaten im Raster, Zuordnungen und Belege nebeneinander */
.fin-detail-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.fin-facts { flex: 1 1 36rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-2) var(--space-3); margin: 0; }
.fin-facts > div { min-width: 0; }
.fin-facts dt { font-size: 0.78rem; color: var(--color-text-muted); }
.fin-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.fin-facts .fin-facts__wide { grid-column: 1 / -1; }
.fin-facts .fin-facts__wide dd { font-weight: 400; }
.fin-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.fin-detail-grid > .detail-block { margin: 0; }
@media (min-width: 900px) { .fin-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.fin-history-block { margin-top: var(--space-3); }
.fin-history-block > summary { cursor: pointer; font-family: var(--font-heading); font-weight: 600; }
.fin-history-block[open] > summary { margin-bottom: var(--space-2); }

/* Erfassungsdialog: Stand der Teilbetraege deutlicher */
.fin-split__badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 600; font-size: 0.85rem; }
.fin-split__badge--open { background: var(--color-attention-bg); color: #6B4E17; }
.fin-split__badge--done { background: #E9F0E7; color: var(--color-olive); }
.fin-split__badge--over { background: var(--color-danger-bg); color: var(--color-danger); }

/* K-03 Belegtabelle: lange Inhalte umbrechen kontrolliert, Aktionen bleiben sichtbar */
.fin-table td.fin-actions { white-space: normal; min-width: 13rem; }
.fin-table td.fin-actions .button-row { flex-wrap: wrap; gap: var(--space-1); }

/* Gastguthaben je Buchung: Summenzeilen je Guthabenart und gesamt */
.fin-table tr.fin-sumrow td { border-top: 1px solid var(--color-border); font-weight: 600; }
.fin-table tr.fin-sumrow--total td { border-top-width: 2px; }
/* Ausgeblendetes bleibt im Erfassungsdialog ausgeblendet, auch bei Klassen mit eigenem display */
.fin-section [hidden] { display: none !important; }

/* K-06 Rueckzahlungsdetails: fehlende oder unbestaetigte Angaben deutlich, Summenpruefung */
.fin-missing { color: #8A6A2F; font-style: italic; }
.fin-sum-check { margin-top: var(--space-2); font-weight: 600; }

/* K-07 Kontoabstimmung: Kennzahlen als Karten, bei Treffern anklickbar */
.fin-recon__controls { margin-bottom: var(--space-2); }
.fin-recon__status { font-weight: 600; margin: var(--space-1) 0; }
.fin-recon__status--ok { color: #3F6B3A; }
.fin-recon__status--open { color: #8A6A2F; }
.fin-recon__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
.fin-recon__card { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); font: inherit; color: inherit; }
.fin-recon__card--link { cursor: pointer; }
.fin-recon__card--link:hover, .fin-recon__card--link:focus-visible { border-color: var(--color-gold); }
.fin-recon__card--attention { background: var(--color-attention-bg); }
.fin-recon__value { font-size: 1.4rem; font-weight: 600; }
.fin-recon__title { font-weight: 600; }
.fin-recon__detail { font-size: 0.85rem; opacity: 0.8; }
.fin-recon-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; }

/* Geldübersichten (E2): alle Eurobeträge an einer gemeinsamen rechten Kante, unabhängig von
   der Art der Zeile. Die Bedeutung zeigt allein die linke Beschriftung: Einzelwert eingerückt,
   Unterposition tiefer eingerückt, Summe herausgerückt mit Schriftgewicht und Trennlinie.
   Wiederverwendbar für jede Betragsaufstellung: .money-line (+ --sub, --total). */
.money-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.5rem;
  column-gap: var(--space-3);
  align-items: baseline;
  padding: 0.3rem 0 0.3rem var(--space-3);
}
.money-line__label { min-width: 0; }
.money-line__amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.money-line--sub { padding-left: calc(var(--space-3) * 2); }
.money-line--total {
  padding-left: 0;
  margin-top: 0.25rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--color-border);
  font-weight: 600;
}
.money-line .field__hint { font-weight: 400; }
.money-details { padding-left: calc(var(--space-3) * 2); margin: 0 0 0.25rem; }
@media (max-width: 480px) {
  .money-line { grid-template-columns: minmax(0, 1fr) 7.5rem; column-gap: var(--space-2); }
}
h3 + .money-line--total { margin-top: 0; padding-top: 0.3rem; border-top: 0; }
/* Summenzeilen einer Betragstabelle: Betrag bleibt in seiner Spalte (gleiche rechte Kante),
   die Beschriftung ist herausgerueckt und durch Schriftgewicht und Trennlinie abgesetzt. */
.fin-table tfoot .fin-sum-row td { font-weight: 600; }
.fin-table tfoot .fin-sum-row td:first-child { padding-left: 0; }
.fin-table tfoot .fin-sum-row:first-child td { border-top: 1px solid var(--color-border); }
.fin-table tfoot .fin-sum-row .field__hint { font-weight: 400; }
/* E2b Betriebskosten-Vorsorge: Kategorienauswahl und Zahlungsauswahl als kompakte Liste,
   deaktivierte Kostenposten gedimmt. */
.fin-checklist { display: grid; gap: 2px; max-height: 14rem; overflow-y: auto; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: 6px; }
.fin-checklist__item { display: block; font-weight: 400; font-size: 0.9rem; }
.fin-table tr.is-muted td { opacity: 0.55; }
/* E2b Kostenliste: Beschriftungen links, Betragsspalten rechts (auch die Kopfzeile);
   Posten und Status umbrechen, damit die Liste auf dem Smartphone schmal bleibt. */
.fin-table.fin-cost-table th { text-align: left; }
.fin-table.fin-cost-table th.fin-amount { text-align: right; }
.fin-cost-table td.fin-cost-wrap { white-space: normal; min-width: 9rem; }
/* E2b: Hinweis "nicht vollständig abgesichert" (ungeklärte Bankabgleiche) deutlich vor den übrigen Hinweisen. */
.attention-item--strong { border-left: 4px solid #8A6A2F; }
.fin-bank-checks { margin: var(--space-2) 0 0; padding-left: 1.2rem; }
.fin-bank-checks li { margin-bottom: var(--space-1); }
/* E4a Zahlungsdaten (QR): QR-Code neben den kopierbaren Angaben, auf dem Smartphone untereinander
   und die Angaben zuerst, weil man den eigenen Bildschirm nicht scannen kann. */
.pay-qr { border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-3); }
.pay-qr h4 { margin: 0 0 var(--space-2); }
.pay-qr__body { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.pay-qr__code { width: 11rem; height: auto; flex: 0 0 auto; background: #fff; }
.pay-qr__data { flex: 1 1 16rem; min-width: 0; }
.pay-qr__fields dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pay-qr__value { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pay-qr__lines { margin-top: var(--space-2); max-width: 32rem; }
@media (max-width: 600px) {
  .pay-qr__body { flex-direction: column-reverse; }
  .pay-qr__code { width: 9rem; }
}

/* --- Verbesserungsrunde 2 (26.10.2026) ------------------------------------------------------------
   FJ-10 Betragsfeld mit fester Einheit; FJ-08 Checkboxen in Kategorienlisten (die allgemeine
   Regel .field input {width:100%} machte jede Checkbox zeilenbreit); FJ-15 Exportformular mit
   einheitlicher Feld- und Schaltflaechenhoehe. */
.money-input { position: relative; }
.money-input input { padding-right: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; }
.money-input__unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted);
  font-size: 0.9rem; pointer-events: none; }
.fin-checklist input[type="checkbox"], .fin-checklist input[type="radio"] { width: auto; margin: 0.2em 0 0; padding: 0; }
.fin-checklist__item { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); column-gap: var(--space-2); align-items: start;
  padding: 2px 0; }
.fin-export-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-2) var(--space-3);
  align-items: end; margin-bottom: var(--space-3); }
.fin-export-form .field { margin-bottom: 0; min-width: 0; }
.fin-export-form input, .fin-export-form select, .fin-export-form .button { box-sizing: border-box; width: 100%; height: 2.75rem; }
.fin-export-form__action label { display: none; }

/* FJ-02/04/05 Belege: Mehrfachupload, Vorschau neben den Eingaben, sortierte Auswahl */
.fin-docsplit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 900px) { .fin-docsplit { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.fin-docsplit__form { min-width: 0; }
.fin-drop { border: 2px dashed var(--color-border); border-radius: 8px; padding: var(--space-3); text-align: center; margin-bottom: var(--space-3); }
.fin-drop p { margin: 0 0 var(--space-2); }
.fin-drop--over { border-color: var(--color-primary); background: var(--color-attention-bg); }
.fin-upload-list { display: grid; gap: var(--space-3); }
.fin-upload { border: 1px solid var(--color-border); border-radius: 8px; padding: var(--space-3); }
.fin-upload__head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.fin-upload__head strong { overflow-wrap: anywhere; }
.fin-upload__status { margin: var(--space-2) 0 0; font-size: 0.9rem; }
.fin-upload--error { border-color: var(--color-danger); }
.fin-upload--done { border-color: var(--color-positive); opacity: 0.85; }
.fin-preview { border: 1px solid var(--color-border); border-radius: 8px; display: flex; flex-direction: column; min-height: 22rem;
  height: 60vh; resize: vertical; overflow: hidden; background: var(--color-surface); }
@media (min-width: 900px) { .fin-preview { position: sticky; top: 0; } }
.fin-preview:fullscreen { height: 100vh; border-radius: 0; }
.fin-preview__head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between;
  padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
.fin-preview__title { margin: 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.fin-preview__tools { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.fin-preview__body { flex: 1 1 auto; min-height: 0; display: flex; }
.fin-preview__body > .empty-state { margin: auto; padding: var(--space-3); text-align: center; }
.fin-preview__frame { border: 0; width: 100%; height: 100%; flex: 1 1 auto; }
.fin-preview__scroll { overflow: auto; flex: 1 1 auto; cursor: grab; touch-action: none; }
.fin-preview__img { display: block; user-select: none; }
.fin-pick-tools { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-bottom: var(--space-2); }
.fin-pick-tools input[type="search"] { flex: 1 1 14rem; }
.fin-pick-list { display: grid; gap: var(--space-1); max-height: 50vh; overflow: auto; margin-bottom: var(--space-2); }
.fin-pick { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: var(--space-2);
  border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; }
.fin-pick input { width: auto; margin: 0.2em 0 0; }
.fin-pick:has(input:checked) { border-color: var(--color-primary); }
.fin-pick .field__hint { display: block; margin-top: 2px; }
.pricing-check input[type="checkbox"] { width: auto; }
.fin-badge { display: inline-block; font-size: 0.78rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--color-border); background: transparent; font-family: inherit; }
button.fin-badge { cursor: pointer; margin-top: 2px; }
.fin-badge--ready { border-color: var(--color-positive); color: var(--color-positive); }
.fin-badge--check { border-color: #8a5a12; color: #8a5a12; }
.pricing-check[hidden], .fin-pick[hidden] { display: none; }

/* --- Nachbesserung nach der Abnahme von Runde 2 (27.10.2026) ---------------------------------------
   FJ-17: Im Finanzbereich (Seite und Dialoge) haben Eingabe- und Auswahlfelder dieselbe Höhe, Schrift
   und Ausrichtung; Datumsfelder und Auswahllisten weichen nicht mehr ab. Kontrollkästchen bleiben klein.
   FJ-18: Kostenzuordnung mit breiter, scrollbarer Vorschlagsliste; Hinweise umbrechen zeilenweise;
   Aktionen bleiben unten sichtbar. */
.page-finanzen .field :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"])),
.page-finanzen .field select {
  box-sizing: border-box; height: 2.75rem; min-height: 2.75rem; padding: 0 12px; line-height: normal;
  font-family: inherit; font-size: 1rem; vertical-align: middle;
}
.page-finanzen .field select { padding-right: 2rem; }
.page-finanzen .money-input input { padding-right: 3.4rem; }
.page-finanzen .field input[type="date"] { display: block; }
.page-finanzen .field input[type="checkbox"], .page-finanzen .field input[type="radio"],
.page-finanzen .pricing-check input { width: auto; height: auto; min-height: 0; margin: 0; flex: 0 0 auto; }
.page-finanzen .fin-filter__main { align-items: end; }
.page-finanzen .fin-filter__main .field > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-finanzen .fin-filter__buttons { padding-bottom: 0; flex-wrap: nowrap; }
.page-finanzen .fin-filter__buttons .button { height: 2.75rem; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.page-finanzen .fin-filter .pricing-check { margin-bottom: 0; min-height: 2.75rem; }
@media (max-width: 600px) {
  .page-finanzen .fin-filter__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-finanzen .fin-filter__wide, .page-finanzen .fin-filter__buttons { grid-column: 1 / -1; }
  .page-finanzen .fin-filter__buttons .button { flex: 1 1 0; }
}
.field__label-spacer { display: block; margin-bottom: var(--space-1); font-size: 0.9rem; }
.fin-cost-match__lead { margin: 0 0 var(--space-2); }
.fin-cost-match__list { max-height: min(40vh, 22rem); }
.fin-cost-match__list .fin-pick > span { min-width: 0; overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.fin-cost-match__list .status-pill { margin-right: var(--space-1); }
.fin-cost-match__fields { margin-top: var(--space-2); align-items: start; }
.fin-cost-match__fields .pricing-check { min-height: 2.75rem; margin-bottom: 0; }
.fin-cost-match__fit:empty { display: none; }
@media (max-width: 600px) {
  .fin-cost-match__fields { grid-template-columns: minmax(0, 1fr); }
  .fin-cost-match__fields .field__label-spacer { display: none; }
  .fin-cost-match__list { max-height: 45vh; }
}