/* ROK Verwaltung – Oberfläche
   Farben aus dem Briefkopf: Tintenblau + Messing. Status-Farben für das Mietbuch. */
:root {
  --tinte: #1f3a5f;
  --tinte-hell: #2d5281;
  --tinte-zart: #e8eef6;
  --messing: #b08d57;
  --messing-zart: #f6f1e7;
  --messing-rand: #e2d2b3;
  --messing-text: #85642f;
  --flaeche-zart: #f7f9fb;
  --rand: #cfd6e0;
  --grund: #f2f4f7;
  --flaeche: #ffffff;
  --text: #1d2430;
  --text-leise: #5a6270;
  --linie: #dde2e9;
  --bezahlt: #3f7a57;
  --bezahlt-zart: #e3f0e8;
  --offen: #b23a26;
  --offen-zart: #f9e6e2;
  --teil: #c58a1e;
  --teil-zart: #fbf0da;
  --fokus: #2d6fd6;
  --radius: 6px;
  --schatten: 0 1px 2px rgba(29, 36, 48, 0.06), 0 2px 8px rgba(29, 36, 48, 0.04);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--grund); }
/* iOS als App: Die Statusleiste (Uhr, Akku) liegt über der Seite und hat helle Schrift.
   Dieses Band färbt den Bereich dunkel, damit sie lesbar bleibt und nichts darunter verschwindet. */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px);
  background: var(--tinte); z-index: 40; pointer-events: none;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.25; color: var(--tinte); }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.1rem; font-weight: 600; }
h3 { font-size: 0.95rem; font-weight: 600; }
p { margin: 0 0 0.75em; }
a { color: var(--tinte-hell); }
.zahl, td.betrag, .betrag { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --- Marke ------------------------------------------------------------- */
.marke { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
.marke__name { font-weight: 700; font-size: 1.15rem; color: var(--tinte); }
.marke__zusatz { font-size: 0.78rem; color: var(--messing); font-weight: 600; letter-spacing: 0.02em; }
.marke--gross .marke__name { font-size: 1.6rem; }
.marke--gross { margin-bottom: 1.5rem; padding-bottom: 0.9rem; border-bottom: 2px solid var(--messing); }

/* --- Anmeldung ---------------------------------------------------------- */
.anmeldung {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px))
           calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
}
.installieren { margin-top: 0.6rem; }
.leiste__konto .installieren { margin-top: 0; }
.anmelde-karte {
  width: min(380px, 100%); background: var(--flaeche); padding: 2rem;
  border-radius: var(--radius); box-shadow: var(--schatten); border-top: 4px solid var(--tinte);
}
.hinweis { font-size: 0.85rem; color: var(--text-leise); margin-top: 1rem; }
.formfehler { color: var(--offen); font-size: 0.9rem; }

/* --- Formulare ---------------------------------------------------------- */
.feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0.9rem; font-size: 0.85rem; color: var(--text-leise); }
.feld > span { font-weight: 500; }
input, select, textarea {
  font: inherit; font-size: 0.95rem; color: var(--text); background: var(--flaeche);
  border: 1px solid #c4ccd7; border-radius: 4px; padding: 0.5rem 0.6rem; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--tinte-hell); outline: 2px solid var(--tinte-zart); }
input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--tinte); }
.feld--warnung input { border-color: var(--teil); }
.feldhinweis { font-size: 0.78rem; color: var(--teil); }
.formraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 1rem; }
.formraster .breit { grid-column: 1 / -1; }
.formgruppe { margin-bottom: 1.25rem; }
.formgruppe > h3 { margin-bottom: 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--linie); }
.checkfeld { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; margin: 0.4rem 0 0.9rem; }

/* --- Knöpfe -------------------------------------------------------------- */
.knopf {
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.5rem 0.9rem; border-radius: 4px; border: 1px solid #c4ccd7;
  background: var(--flaeche); color: var(--tinte); text-decoration: none; white-space: nowrap;
}
.knopf:hover { border-color: var(--tinte-hell); background: var(--tinte-zart); }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; background: var(--flaeche); border-color: #c4ccd7; }
.knopf--primaer { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.knopf--primaer:hover { background: var(--tinte-hell); border-color: var(--tinte-hell); }
.knopf--leise { border-color: transparent; background: transparent; color: var(--text-leise); font-weight: 500; }
.knopf--leise:hover { background: var(--tinte-zart); border-color: transparent; color: var(--tinte); }
.knopf--klein { padding: 0.3rem 0.6rem; font-size: 0.82rem; }
.knopf--breit { width: 100%; padding: 0.65rem; }
.knopf--gefahr { color: var(--offen); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* --- App-Rahmen ------------------------------------------------------- */
.leiste {
  display: flex; align-items: center; gap: 2rem;
  padding: calc(0.7rem + env(safe-area-inset-top, 0px)) calc(1.5rem + env(safe-area-inset-right, 0px))
           0.7rem calc(1.5rem + env(safe-area-inset-left, 0px));
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 10;
}
.navigation { display: flex; gap: 0.25rem; flex: 1; }
.navigation a {
  text-decoration: none; color: var(--text-leise); font-weight: 500; padding: 0.45rem 0.8rem; border-radius: 4px;
}
.navigation a:hover { color: var(--tinte); background: var(--tinte-zart); }
.navigation a[aria-current="page"] { color: var(--tinte); background: var(--tinte-zart); font-weight: 600; }
.leiste__konto { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-leise); }
.testbanner {
  background: var(--messing-zart); color: #6e5630; font-size: 0.8rem; text-align: center;
  padding: 0.3rem 1rem; border-bottom: 1px solid #eadfca;
}
.inhalt {
  max-width: 1180px; margin: 0 auto;
  padding: 1.75rem calc(1.5rem + env(safe-area-inset-right, 0px)) calc(4rem + env(safe-area-inset-bottom, 0px))
           calc(1.5rem + env(safe-area-inset-left, 0px));
}
.inhalt:focus { outline: none; }
.kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.kopf p { margin: 0.25rem 0 0; color: var(--text-leise); }

/* --- Flächen ---------------------------------------------------------- */
.flaeche { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.flaeche__kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--linie);
}
.flaeche__inhalt { padding: 1rem 1.1rem; }
.flaeche__fuss { padding: 0.75rem 1.1rem; border-top: 1px solid var(--linie); background: #fafbfc; border-radius: 0 0 var(--radius) var(--radius); }
.leer { padding: 1.5rem 1.1rem; color: var(--text-leise); }
.stapel > * + * { margin-top: 1.25rem; }

/* --- Kennzahlen (Übersicht) ------------------------------------------- */
.lage {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0; margin-bottom: 1.75rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.lage > div { padding: 1.1rem 1.25rem; }
.lage > div + div { border-left: 1px solid var(--linie); }
.lage__wert { font-size: 1.9rem; font-weight: 700; color: var(--tinte); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lage__wert--offen { color: var(--offen); }
.lage__text { color: var(--text-leise); font-size: 0.88rem; margin-top: 0.2rem; }

/* --- Tabellen --------------------------------------------------------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabelle th {
  text-align: left; font-weight: 600; font-size: 0.8rem; color: var(--text-leise);
  padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--linie); background: #fafbfc;
}
.tabelle td { padding: 0.6rem 0.75rem; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle .betrag { text-align: right; white-space: nowrap; }
.tabelle .eng { width: 1%; white-space: nowrap; }
.tabelle tbody tr.klickbar { cursor: pointer; }
.tabelle tbody tr.klickbar:hover { background: #f6f8fb; }
.tabelle tr.gruppe td {
  background: var(--grund); font-weight: 600; color: var(--tinte); font-size: 0.85rem; padding: 0.45rem 0.75rem;
}
.tabelle tfoot td { font-weight: 700; border-top: 2px solid var(--linie); }
.name { font-weight: 600; color: var(--text); text-decoration: none; }
.name:hover { color: var(--tinte-hell); text-decoration: underline; }
.leise { color: var(--text-leise); font-size: 0.85rem; }
.betrag--offen { color: var(--offen); font-weight: 700; }
.betrag--null { color: var(--text-leise); }

/* --- Mietbuch-Leiste: das zentrale Element --------------------------- */
.mietbuch { display: inline-grid; grid-auto-flow: column; gap: 3px; }
.mietbuch__monat {
  width: 2.35rem; height: 1.7rem; border-radius: 3px; display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 600; border: 1px solid transparent;
}
.mietbuch__monat--bezahlt { background: var(--bezahlt-zart); color: var(--bezahlt); }
.mietbuch__monat--offen { background: var(--offen); color: #fff; }
.mietbuch__monat--teil { background: var(--teil-zart); color: #8a5d0d; border-color: #ecd09a; }
.mietbuch__monat--leer { background: transparent; color: #a3abb7; border: 1px dashed #cfd5de; }
.mietbuch-legende { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-leise); }
.mietbuch-legende span { display: inline-flex; align-items: center; gap: 0.35rem; }
.mietbuch-legende i { width: 0.8rem; height: 0.8rem; border-radius: 2px; display: inline-block; }
.mietbuch-legende .l-bezahlt { background: var(--bezahlt-zart); border: 1px solid #bcd8c6; }
.mietbuch-legende .l-teil { background: var(--teil-zart); border: 1px solid #ecd09a; }
.mietbuch-legende .l-offen { background: var(--offen); }
.mietbuch-legende .l-leer { border: 1px dashed #cfd5de; }

/* --- Marken / Hinweise ------------------------------------------------ */
.marker {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 600;
  padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--tinte-zart); color: var(--tinte); white-space: nowrap;
}
.marker--messing { background: var(--messing-zart); color: #7a5d2e; }
.marker--offen { background: var(--offen-zart); color: var(--offen); }
.marker--ok { background: var(--bezahlt-zart); color: var(--bezahlt); }

/* --- Mieter-Detail ---------------------------------------------------- */
.zurueck { display: inline-block; margin-bottom: 0.9rem; font-size: 0.88rem; text-decoration: none; color: var(--text-leise); }
.zurueck:hover { color: var(--tinte); }
.akte { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.akte__kopf { margin-bottom: 1.25rem; }
.akte__kopf .unter { color: var(--text-leise); margin-top: 0.3rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.briefe {
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
  padding: 0.9rem 1.1rem; background: var(--tinte); border-radius: var(--radius); margin-bottom: 1.25rem;
}
.briefe__titel { color: #fff; font-weight: 600; margin-right: 0.5rem; }
.briefe .knopf { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); color: #fff; }
.briefe .knopf:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); }
.briefe .knopf:disabled { background: transparent; color: rgba(255,255,255,0.75); }
.briefe__hinweis { color: #c9d4e3; font-size: 0.8rem; flex-basis: 100%; margin-top: 0.2rem; }
.datenliste { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.9rem; }
.datenliste dt { color: var(--text-leise); }
.datenliste dd { margin: 0; overflow-wrap: anywhere; }
.iban { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; font-weight: 600; }
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { padding: 0.65rem 1.1rem; border-bottom: 1px solid #edf0f4; font-size: 0.9rem; }
.verlauf li:last-child { border-bottom: none; }
.verlauf .wann { color: var(--text-leise); font-size: 0.8rem; }
details.ausklapp > summary {
  cursor: pointer; padding: 0.85rem 1.1rem; font-weight: 600; color: var(--tinte); list-style: none;
}
details.ausklapp > summary::-webkit-details-marker { display: none; }
details.ausklapp > summary::before { content: "+"; display: inline-block; width: 1.1rem; color: var(--messing); font-weight: 700; }
details.ausklapp[open] > summary::before { content: "–"; }
details.ausklapp[open] > summary { border-bottom: 1px solid var(--linie); }

/* --- Vorlagen --------------------------------------------------------- */
.vorlage { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1.5rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--linie); }
.vorlage:last-child { border-bottom: none; }
.vorlage p { margin: 0.2rem 0 0; color: var(--text-leise); font-size: 0.9rem; }
.platzhalter { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; font-size: 0.85rem; margin: 0; }
.platzhalter code { background: var(--tinte-zart); color: var(--tinte); padding: 0.05rem 0.35rem; border-radius: 3px; font-size: 0.82rem; }
.platzhalter dd { margin: 0; color: var(--text-leise); }

/* --- Dialog & Meldungen ---------------------------------------------- */
.dialog { border: none; border-radius: var(--radius); padding: 0; width: min(480px, calc(100vw - 32px)); box-shadow: 0 12px 40px rgba(29,36,48,0.25); }
.dialog::backdrop { background: rgba(29, 36, 48, 0.45); }
.dialog form { padding: 1.4rem; }
.dialog h2 { margin-bottom: 1rem; }
.dialog .knopfreihe { justify-content: flex-end; margin-top: 0.5rem; }
.meldungen { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); right: calc(1rem + env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 0.5rem; z-index: 50; max-width: calc(100vw - 2rem); }
.meldung {
  background: var(--text); color: #fff; padding: 0.7rem 1rem; border-radius: var(--radius);
  font-size: 0.9rem; box-shadow: var(--schatten); max-width: min(420px, 100%); animation: rein 0.18s ease-out;
}
.meldung--fehler { background: var(--offen); }
.meldung--ok { background: var(--bezahlt); }
.meldung:has(.meldung__knopf) { display: flex; align-items: center; gap: 0.75rem; }
.meldung > span { min-width: 0; overflow-wrap: anywhere; }
.meldung__knopf {
  flex: none; background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.55);
  border-radius: 999px; padding: 0.3rem 0.8rem; font: inherit; font-weight: 600; cursor: pointer; min-height: 32px;
}
.meldung__knopf:hover { background: rgba(255,255,255,0.3); }
@keyframes rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.laden { padding: 3rem; text-align: center; color: var(--text-leise); }

/* --- Zeilen je Mietpartei (statt Tabelle, ohne seitliches Scrollen) --- */
.zeilen { display: flex; flex-direction: column; }
.zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 9.5rem; grid-template-areas: "wer buch betrag";
  align-items: center; gap: 0.4rem 1.25rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid #edf0f4;
  text-decoration: none; color: inherit;
}
.zeilen > :last-child .zeile, .zeilen > .zeile:last-child { border-bottom: none; }
.zeile:hover { background: #f6f8fb; }
.zeile:hover .zeile__name { color: var(--tinte-hell); text-decoration: underline; }
.zeile__wer { grid-area: wer; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.zeile__name { font-weight: 600; }
.zeile__ort { color: var(--text-leise); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.zeile__schritt { font-size: 0.82rem; color: var(--tinte); }
.zeile__buch { grid-area: buch; }
.zeile__betrag { grid-area: betrag; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeile__klein { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-leise); }
.objektgruppe + .objektgruppe { border-top: 1px solid var(--linie); }
.objektgruppe__titel {
  padding: 0.6rem 1.1rem; background: #f7f9fb; border-bottom: 1px solid #edf0f4; font-size: 0.9rem;
  display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap;
}
.objektgruppe__titel .leise { font-weight: 400; font-size: 0.8rem; }
.suchfeld { margin: 0; min-width: 260px; }

/* --- Offene Posten, nach Monat gruppiert ------------------------------ */
.posten { display: flex; flex-direction: column; }
.monat { border-bottom: 1px solid var(--linie); }
.monat__kopf {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center;
  padding: 0.6rem 1.1rem; background: #f7f9fb; cursor: pointer;
}
.monat__name { font-weight: 600; color: var(--tinte); }
.monat__summe { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.posten__zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: center;
  padding: 0.45rem 1.1rem 0.45rem 1.1rem; border-top: 1px solid #f0f2f5;
}
.posten__wahl { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; min-width: 0; }
.posten__wahl span { overflow-wrap: anywhere; }
.posten__betrag { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.auswahlsumme {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.1rem; font-size: 0.95rem;
  border-top: 2px solid var(--linie);
}
.auswahlsumme strong { font-variant-numeric: tabular-nums; }
.checkfeld--klein { margin: 0; font-size: 0.85rem; color: var(--text-leise); }

/* --- Bezahlte Posten -------------------------------------------------- */
.bezahlt__monat { padding: 0.7rem 1.1rem; border-bottom: 1px solid #edf0f4; }
.bezahlt__monat:last-child { border-bottom: none; }
.bezahlt__kopf { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.bezahlt__kopf .monat__summe { margin-left: auto; color: var(--bezahlt); }
.bezahlt__liste { list-style: none; margin: 0.35rem 0 0; padding: 0; font-size: 0.88rem; color: var(--text-leise); }
.bezahlt__liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.75rem; padding: 0.15rem 0; align-items: baseline; }
.textknopf {
  font: inherit; font-size: 0.8rem; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--tinte-hell); text-decoration: underline; text-underline-offset: 2px;
}
.textknopf:hover { color: var(--tinte); }

/* --- Schreiben als Kacheln (Vorschau öffnen) -------------------------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.75rem; padding: 1rem 1.1rem; }
.kacheln--eng { grid-template-columns: 1fr; }
.schreiben {
  font: inherit; text-align: left; cursor: pointer; display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 0.75rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: inherit;
}
.schreiben:hover { border-color: var(--tinte-hell); background: #f8fafc; }
.schreiben[data-ohne-datei] { cursor: default; opacity: 0.8; }
.schreiben[data-ohne-datei]:hover { border-color: var(--linie); background: var(--flaeche); }
.schreiben__blatt {
  flex: none; width: 2.6rem; height: 3.4rem; border: 1px solid #cfd5de; border-top: 3px solid var(--tinte);
  border-radius: 2px; background: #fff; padding: 0.45rem 0.35rem; display: flex; flex-direction: column; gap: 0.25rem;
}
.schreiben__blatt i { display: block; height: 2px; background: #d9dee6; }
.schreiben__blatt i:nth-child(2) { width: 70%; }
.schreiben__blatt i:nth-child(4) { width: 55%; }
.schreiben__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.schreiben__titel { font-weight: 600; color: var(--text); }
.schreiben__aktion { font-size: 0.8rem; font-weight: 600; color: var(--tinte-hell); margin-top: 0.15rem; }
.schreiben[data-ohne-datei] .schreiben__aktion { color: var(--text-leise); font-weight: 500; }

/* --- Vorschau-Dialog --------------------------------------------------- */
.dialog--vorschau {
  width: min(980px, calc(100vw - 24px));
  height: min(calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px), 1100px);
  max-height: none;
  height: min(calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px), 1100px);
}
.dialog--vorschau[open] { display: flex; }
.vorschau { display: flex; flex-direction: column; width: 100%; height: 100%; }
.vorschau__kopf {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--linie);
}
.vorschau__kopf h2 { margin: 0; }
.vorschau__kopf p { margin: 0.15rem 0 0; }
.vorschau__flaeche { position: relative; flex: 1; min-height: 0; background: #e6eaf0; }
.vorschau__blatt { width: 100%; height: 100%; border: 0; display: block; }
.vorschau__laden { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-leise); padding: 1rem; text-align: center; }
.vorschau__fuss { border-top: 1px solid var(--linie); padding: 0.75rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.vorschau__hinweis { margin: 0; }
.vorschau__aktionen { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.datei-chip {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.75rem 0.4rem 0.45rem;
  border: 1px dashed #9fb0c7; border-radius: var(--radius); background: #f6f8fb; text-decoration: none; color: var(--text);
  cursor: grab; max-width: 100%; font-size: 0.85rem;
}
.datei-chip:hover { border-color: var(--tinte-hell); background: var(--tinte-zart); }
.datei-chip:active { cursor: grabbing; }
.datei-chip > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.datei-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.datei-chip .leise { font-size: 0.75rem; }
.datei-chip__icon {
  flex: none; width: 1.9rem; height: 2.3rem; border-radius: 3px; background: #2b579a; color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 0.9rem;
}
.dialogliste { list-style: none; margin: 0 0 1rem; padding: 0; }
.dialogliste li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid #edf0f4; }
.fussnote { margin-top: 1rem; }
.anleitung { margin: 0 0 1rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }


/* --- Postfach ------------------------------------------------------------ */
.nav-zahl {
  display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; margin-left: 0.3rem;
  border-radius: 999px; background: var(--offen); color: #fff; font-size: 0.68rem; font-weight: 700; vertical-align: 0.1em;
}
.banner {
  background: var(--messing-zart); border: 1px solid #eadfca; color: #5e4a28; border-radius: var(--radius);
  padding: 0.7rem 1rem; margin-bottom: 1.25rem; font-size: 0.9rem;
}
.banner--leise { background: #f7f9fb; border-color: var(--linie); color: var(--text-leise); }
.reiter { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.9rem; }
.reiter__knopf {
  font: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer; padding: 0.35rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text-leise);
}
.reiter__knopf:hover { border-color: var(--tinte-hell); color: var(--tinte); }
.reiter__knopf[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; font-weight: 600; }
.reiter__zahl { font-variant-numeric: tabular-nums; opacity: 0.85; }
.posts { display: flex; flex-direction: column; }
.post {
  display: grid; grid-template-columns: 0.6rem minmax(0, 1fr); gap: 0.6rem; padding: 0.8rem 1.1rem;
  border-bottom: 1px solid #edf0f4; text-decoration: none; color: inherit;
}
.posts > .post:last-child { border-bottom: none; }
.post:hover { background: #f6f8fb; }
.post__punkt { width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-top: 0.45rem; }
.post--neu .post__punkt { background: var(--fokus); }
.post__haupt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.post__kopf { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.post__wer { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.post--neu .post__wer, .post--neu .post__betreff { font-weight: 700; }
.post__wann { color: var(--text-leise); font-size: 0.8rem; white-space: nowrap; flex: none; }
.post__betreff { color: var(--text); overflow-wrap: anywhere; }
.post__vorschau {
  color: var(--text-leise); font-size: 0.86rem; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post__marken { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }
.post__marken:empty { display: none; }
.post__ki { font-size: 0.75rem; color: var(--tinte-hell); }
.marker--neu { background: #e3edfc; color: #1f57b5; }
.marker--leise { background: #eef0f3; color: var(--text-leise); }
.umbruch { overflow-wrap: anywhere; }

/* --- Nachricht --------------------------------------------------------- */
.nachricht__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; line-height: 1.6; }
.fotolink { display: block; margin-top: 1rem; }
.fotovorschau {
  display: block; max-width: 100%; max-height: 360px; border: 1px solid var(--linie); border-radius: 4px;
  background: #f6f8fb; margin: 0 auto 0.75rem;
}
.anhaenge { margin-top: 1rem; }
.ki-text { margin: 0.8rem 0 0.5rem; }
.ki-vorschlag { margin: 0 0 0.9rem; padding: 0.55rem 0.75rem; background: var(--tinte-zart); border-radius: 4px; font-size: 0.9rem; }
.mieterkarte { display: flex; flex-direction: column; margin-bottom: 0.3rem; }
.feld--eng { margin-bottom: 0; }
.feld--oben { margin-top: 0.9rem; }
.signatur__kopf { display: inline-block; margin-top: 0.35rem; padding-top: 0.3rem; border-top: 2px solid var(--messing); overflow-wrap: anywhere; }
.datenliste--abstand { margin-top: 0.9rem; }
.antwort { border-bottom: 1px solid #edf0f4; }
.antwort:last-child { border-bottom: none; }
.antwort > summary {
  cursor: pointer; padding: 0.7rem 1.1rem; display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  list-style: none;
}
.antwort > summary::-webkit-details-marker { display: none; }
.antwort__art { font-weight: 600; color: var(--tinte); overflow-wrap: anywhere; }
.antwort__text { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 1.1rem 1rem; font-size: 0.9rem; }

/* --- Entwurf --------------------------------------------------------------- */
.entwurf { border-color: #c9d6e8; box-shadow: var(--schatten); }
.entwurf > .flaeche__kopf { background: var(--tinte-zart); border-radius: var(--radius) var(--radius) 0 0; }
.entwurf__editor { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.entwurf__text { min-height: 12rem; line-height: 1.55; resize: vertical; }
.entwurf__aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.entwurf__hinweis { margin: 0.6rem 0 0; font-size: 0.8rem; }
.signatur {
  margin: -0.4rem 0 1rem; font-size: 0.82rem; color: var(--text-leise); padding-left: 0.7rem; border-left: 3px solid var(--linie);
}
.ueberarbeiten { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: end; }
.ueberarbeiten .feld { margin: 0; }
.ki-hinweise {
  background: var(--messing-zart); border: 1px solid #eadfca; border-radius: 4px; padding: 0.6rem 0.8rem;
  margin-bottom: 1rem; font-size: 0.88rem; color: #5e4a28;
}
.ki-hinweise ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.knopf--ki { background: var(--messing-zart); border-color: #d8c49f; color: #6b5127; }
.knopf--ki:hover { background: #efe5d2; border-color: var(--messing); }
.knopf--ki[aria-disabled="true"] { opacity: 0.6; }
.knopf--hell { background: #fff !important; color: var(--tinte) !important; border-color: #fff !important; }
.knopf--hell:hover { background: var(--tinte-zart) !important; }
.knopf--links { margin-right: auto; }
.formraster--zwei { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mailvorschau {
  white-space: pre-wrap; overflow-wrap: anywhere; background: #f7f9fb; border: 1px solid var(--linie); border-radius: 4px;
  padding: 0.75rem; font-size: 0.88rem; max-height: 40vh; overflow-y: auto; margin-bottom: 0.75rem;
}
.entwurfzeile {
  display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 1.1rem; border-bottom: 1px solid #edf0f4;
  text-decoration: none; color: inherit; flex-wrap: wrap;
}
.entwurfzeile:hover { background: #f6f8fb; }
.entwurfzeile > span:first-child { overflow-wrap: anywhere; min-width: 0; }

/* Diktat: Mikrofon-Knopf im Textfeld */
.diktat { position: relative; display: block; }
.diktat > textarea, .diktat > input { padding-right: 2.9rem; }
.mikro {
  position: absolute; right: 0.35rem; top: 0.35rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid transparent; background: var(--tinte-zart); color: var(--tinte); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.diktat > input + .mikro { top: 50%; transform: translateY(-50%); width: 1.9rem; height: 1.9rem; }
.mikro:hover { border-color: var(--tinte-hell); }
.mikro--an { background: var(--offen); color: #fff; animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(178, 58, 38, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(178, 58, 38, 0); } }

/* Warten */
.kreisel {
  display: inline-block; width: 0.95rem; height: 0.95rem; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; animation: drehen 0.8s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
.warten { display: flex; align-items: center; gap: 0.8rem; padding: 1.4rem; color: var(--tinte); }
.warten p { margin: 0; }
.dialog--breit { width: min(640px, calc(100vw - 24px)); }
.dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
/* Handy: stabile Höhe (svh ändert sich nicht, wenn Safari die Leisten ein-/ausblendet), Dialog scrollt selbst,
   die Seite dahinter bleibt stehen (sonst rutscht beim Wischen der Hintergrund mit und iOS zeichnet den Dialog versetzt). */
.dialog { max-height: calc(100svh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html:has(dialog[open]), html:has(dialog[open]) body { overflow: hidden; }
/* iPhone/iPad zoomen beim Antippen in jedes Feld unter 16 px hinein und bleiben vergrößert – danach „fetzt“ es beim Scrollen. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1em) !important; }
}

/* --- Wissen ---------------------------------------------------------------- */
.wissensliste { display: flex; flex-direction: column; }
.wissen {
  font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.8rem 1.1rem; border: none; border-bottom: 1px solid #edf0f4; background: none; color: inherit; width: 100%;
}
.wissensliste > .wissen:last-child { border-bottom: none; }
.wissen:hover { background: #f6f8fb; }
.wissen__titel { font-weight: 600; color: var(--tinte); }
.wissen__text {
  color: var(--text-leise); font-size: 0.88rem; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wissen--aus .wissen__titel, .wissen--aus .wissen__text { opacity: 0.6; }

/* --- Einstellungen ------------------------------------------------------ */
.statusliste { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; }
.statusliste li { display: flex; gap: 0.6rem; align-items: baseline; overflow-wrap: anywhere; }
.statuspunkt { width: 0.65rem; height: 0.65rem; border-radius: 50%; flex: none; background: #c4ccd7; }
.statusliste .an .statuspunkt { background: var(--bezahlt); }
.statusliste .aus .statuspunkt { background: var(--teil); }
.kopierfeld { display: flex; gap: 0.4rem; }
.kopierfeld input { min-width: 0; font-size: 0.8rem; color: var(--text-leise); }
.feldhinweis--leise { color: var(--text-leise); }

/* --- Schmale Bildschirme --------------------------------------------- */
@media (max-width: 900px) {
  .akte { grid-template-columns: minmax(0, 1fr); }
  .lage { grid-template-columns: 1fr; }
  .lage > div + div { border-left: none; border-top: 1px solid var(--linie); }
}
@media (max-width: 1080px) {
  .leiste__email { display: none; }
}
@media (max-width: 960px) {
  .leiste {
    flex-wrap: wrap; gap: 0.5rem 1rem;
    padding: calc(0.6rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px))
             0.6rem calc(1rem + env(safe-area-inset-left, 0px));
  }
  .navigation { order: 3; flex-basis: 100%; gap: 0.25rem; }
  .leiste__konto { margin-left: auto; gap: 0.25rem; }
  .leiste__konto .knopf--leise { padding: 0.45rem 0.5rem; }
}
@media (max-width: 720px) {
  .navigation { justify-content: space-between; gap: 0; }
  .navigation a { padding: 0.4rem 0.5rem; font-size: 0.92rem; }
  .inhalt {
    padding: 1.25rem calc(1rem + env(safe-area-inset-right, 0px)) calc(3rem + env(safe-area-inset-bottom, 0px))
             calc(1rem + env(safe-area-inset-left, 0px));
  }
  .nur-breit { display: none; }
  .tabelle td, .tabelle th { padding: 0.5rem 0.45rem; }
  .vorlage { grid-template-columns: 1fr; }
  .mietbuch__monat { width: 1.95rem; }
  .zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "wer betrag" "buch buch"; row-gap: 0.55rem; }
  .kacheln { grid-template-columns: 1fr; }
  .posten__zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "wahl betrag" "wahl knopf"; row-gap: 0.25rem; }
  .posten__zeile .knopf { grid-area: knopf; justify-self: end; }
  .posten__wahl { grid-area: wahl; }
  .posten__betrag { grid-area: betrag; }
  .bezahlt__liste li { grid-template-columns: minmax(0, 1fr) auto; }
  .bezahlt__liste .textknopf { grid-column: 1 / -1; justify-self: start; }
  .suchfeld { min-width: 0; width: 100%; }
  .vorschau__aktionen { flex-direction: column; align-items: stretch; }
  .vorschau__aktionen .knopfreihe .knopf { flex: 1; }
  .datei-chip { display: none; }
  .ueberarbeiten { grid-template-columns: 1fr; }
  .entwurf__aktionen .knopf { flex: 1 1 calc(50% - 0.5rem); }
  .kopf > .knopfreihe { width: 100%; }
  .kopf > .knopfreihe .knopf { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .navigation a { padding: 0.4rem 0.3rem; font-size: 0.86rem; position: relative; }
  .nav-zahl {
    position: absolute; top: -0.2rem; right: -0.35rem; margin: 0;
    min-width: 1rem; height: 1rem; font-size: 0.6rem; padding: 0 0.2rem;
  }
}

/* --- Übersicht: Zu erledigen, Häuser ------------------------------------- */
.lage--kompakt { margin-bottom: 1.25rem; }
.lage.lage--kompakt > * { padding: 0.8rem 1.1rem; }
.lage.lage--kompakt > * + * { border-left: 1px solid var(--linie); }
/* Kachel: Zahl, Bezeichnung, Zusatz – immer gleich aufgebaut, links ausgerichtet */
.lage__kachel {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left;
  font: inherit; color: inherit; background: none; border: none; border-radius: 0; text-decoration: none; margin: 0;
}
a.lage__kachel, button.lage__kachel { cursor: pointer; }
a.lage__kachel:hover, button.lage__kachel:hover:not(:disabled) { background: #f6f8fb; }
button.lage__kachel:disabled { cursor: default; }
.lage--kompakt > :first-child { border-radius: var(--radius) 0 0 var(--radius); }
.lage--kompakt > :last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.lage__zusatz {
  font: inherit; font-size: 0.8rem; color: var(--text-leise); background: none; border: none; padding: 0; margin-top: 0.15rem;
  text-align: left; line-height: 1.3;
}
button.lage__zusatz { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.lage__zusatz--offen { color: var(--offen); font-weight: 600; }
.lage--kompakt .lage__wert { font-size: 1.5rem; }
.start { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.todos { display: flex; flex-direction: column; }
.todo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 2.6rem; align-items: center; gap: 0.25rem 0.6rem;
  border-bottom: 1px solid #edf0f4; border-left: 4px solid transparent; padding-right: 0.5rem;
}
.todos > .todo:last-child { border-bottom: none; }
.todo--s0 { border-left-color: var(--offen); }
.todo--s1 { border-left-color: var(--teil); }
.todo--s2 { border-left-color: var(--tinte-hell); }
.todo--s3 { border-left-color: #cfd5de; }
.todo__haupt {
  font: inherit; text-align: left; background: none; border: none; cursor: pointer; color: inherit; text-decoration: none;
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 0.4rem 0.7rem 0.85rem; min-width: 0;
}
.todo:hover { background: #f6f8fb; }
.todo__art { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-leise); }
.todo--s0 .todo__art { color: var(--offen); }
.todo__titel { font-weight: 600; overflow-wrap: anywhere; }
.todo__unter { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; color: var(--text-leise); font-size: 0.84rem; overflow-wrap: anywhere; min-width: 0; }
.todo__unter em { color: #8a5d0d; font-style: normal; }
.todo__wann { font-size: 0.82rem; color: var(--text-leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.todo__wann--not { color: var(--offen); font-weight: 700; }
.todo__haken {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid #c4ccd7; background: var(--flaeche);
  color: var(--bezahlt); display: grid; place-items: center; cursor: pointer; padding: 0;
}
.todo__haken svg { opacity: 0.25; }
.todo__haken:hover { border-color: var(--bezahlt); background: var(--bezahlt-zart); }
.todo__haken:hover svg { opacity: 1; }
.todo__haken--leer { border: none; background: none; cursor: default; }
details.mehr { border-top: 1px solid var(--linie); }
details.mehr > summary { cursor: pointer; padding: 0.65rem 1.1rem; color: var(--tinte-hell); font-size: 0.88rem; font-weight: 600; }
details.mehr[open] > summary { border-bottom: 1px solid #edf0f4; }
.haeuser { display: flex; flex-direction: column; }
.haus { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid #edf0f4; text-decoration: none; color: inherit; }
.haeuser > .haus:last-child { border-bottom: none; }
.haus:hover { background: #f6f8fb; }
.haus__name { font-weight: 600; color: var(--tinte); }
.haus__zahlen { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; font-size: 0.84rem; color: var(--text-leise); margin-top: 0.2rem; }
.haus--allgemein .haus__name { color: var(--text); }
.mietbuch-legende--innen { padding: 0.6rem 1.1rem 0; }
.objektgruppe__titel a { color: inherit; }

/* --- Ordner (Dokumente, Wissen), Handwerker ------------------------------ */
.ordner + .ordner { border-top: 1px solid var(--linie); }
.ordner__titel { padding: 0.55rem 1.1rem; background: #f7f9fb; border-bottom: 1px solid #edf0f4; font-size: 0.85rem; }
.ordner__titel .leise { font-weight: 400; font-size: 0.8rem; }
.dok {
  font: inherit; text-align: left; cursor: pointer; display: flex; gap: 0.75rem; align-items: center; width: 100%;
  padding: 0.65rem 1.1rem; border: none; border-bottom: 1px solid #edf0f4; background: none; color: inherit;
}
.ordner > .dok:last-child { border-bottom: none; }
.dok:hover { background: #f6f8fb; }
.dok__text { display: flex; flex-direction: column; min-width: 0; }
.dok__titel { font-weight: 600; overflow-wrap: anywhere; font-size: 0.9rem; }
.dok__text .leise { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok__icon {
  flex: none; display: inline-grid; place-items: center; min-width: 2.2rem; height: 1.5rem; padding: 0 0.3rem; border-radius: 3px;
  background: #b23a26; color: #fff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em;
}
.dok__icon--bild { background: var(--tinte-hell); }
.dok__icon--word { background: #2b579a; }
.dok__icon--excel { background: #217346; }
/* „In der Ablage“-Hinweis an Nachrichten, Antworten und Notizen */
.abgelegt { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-leise); }
.abgelegt::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bezahlt); flex: none; }
.abgelegt button { font: inherit; background: none; border: none; padding: 0; color: var(--tinte, inherit); text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.antwort__fuss { padding: 0 1.1rem 0.8rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.ki-tipp { font-size: 0.8rem; color: var(--text-leise); }
.dateizeile { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.dienst { display: flex; align-items: center; gap: 0.5rem; padding-right: 1.1rem; border-bottom: 1px solid #edf0f4; }
.zeilen > .dienst:last-child { border-bottom: none; }
.dienst:hover { background: #f6f8fb; }
.dienst__haupt {
  font: inherit; text-align: left; background: none; border: none; cursor: pointer; color: inherit; flex: 1; min-width: 0;
  display: flex; flex-direction: column; padding: 0.7rem 0 0.7rem 1.1rem;
}
.dienst__name { font-weight: 600; overflow-wrap: anywhere; }
.dienst--aus { opacity: 0.6; }

/* --- Dialoge: Auswahl, Gruppen, Fotos ------------------------------------ */
.wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }
.wahl label {
  display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.6rem 0.7rem; border: 1px solid var(--linie);
  border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; line-height: 1.35;
}
.wahl label:has(input:checked) { border-color: var(--tinte); background: var(--tinte-zart); }
.wahl input { width: auto; margin-top: 0.2rem; accent-color: var(--tinte); }
fieldset.gruppe { border: none; padding: 0; margin: 0; min-width: 0; }
fieldset.gruppe > legend { font-size: 0.85rem; font-weight: 500; color: var(--text-leise); padding: 0; margin-bottom: 0.4rem; }
.fotowahl { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.fotowahl label { position: relative; cursor: pointer; }
.fotowahl input { position: absolute; top: 0.3rem; left: 0.3rem; }
.fotowahl img { width: 6rem; height: 6rem; object-fit: cover; border-radius: 4px; border: 2px solid var(--linie); background: #f6f8fb; display: block; }
.fotowahl label:has(input:checked) img { border-color: var(--tinte); }
.ki-antwort { background: var(--tinte-zart); border-radius: 4px; padding: 0.7rem 0.85rem; margin-bottom: 0.9rem; font-size: 0.9rem; }
.ki-antwort p { margin: 0.35rem 0 0; white-space: pre-wrap; }
details.ausklapp--innen { border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 0.9rem; }
details.ausklapp--innen > div { padding: 0.9rem 0.9rem 0; }
.knopfreihe--senkrecht { flex-direction: column; align-items: stretch; }

/* --- Nachricht: Frist, Anhänge ---------------------------------------- */
.frist { border-left: 4px solid var(--teil); }
.frist--knapp { border-left-color: var(--offen); }
.frist__datum { font-size: 1.15rem; font-weight: 700; color: var(--tinte); margin-bottom: 0.5rem; }
.zitat {
  margin: 0 0 0.3rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--messing); background: var(--messing-zart);
  font-size: 0.88rem; overflow-wrap: anywhere; border-radius: 0 4px 4px 0;
}
.anhangliste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; align-items: center; }
.anhaenge-feld { margin-top: 0.75rem; }
.mailanhaenge { list-style: none; margin: 0.2rem 0 0.4rem; padding: 0; display: grid; gap: 0.3rem; }
.mailanhaenge li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; padding: 0.35rem 0.6rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche, #fff); min-width: 0; }
.mailanhaenge__name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; flex: 1 1 12rem; }
.anhang-bild img { width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: 4px; border: 1px solid var(--linie); background: #f6f8fb; display: block; }

/* --- Chat ------------------------------------------------------------------ */
.chat {
  border: none; padding: 0; margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(460px, 100vw);
  box-shadow: -8px 0 40px rgba(29,36,48,0.2);
}
.chat[open] { display: flex; flex-direction: column; }
.chat::backdrop { background: rgba(29, 36, 48, 0.3); }
.chat__kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: calc(0.75rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0.75rem 1rem;
  border-bottom: 1px solid var(--linie);
}
.chat__kopf h2 { display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; }
.chat__verlauf { flex: 1; overflow-y: auto; padding: 1rem calc(1rem + env(safe-area-inset-right, 0px)) 1rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; background: var(--grund); }
.chat__frage { align-self: flex-end; max-width: 85%; background: var(--tinte); color: #fff; padding: 0.55rem 0.8rem; border-radius: 12px 12px 2px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__antwort { align-self: flex-start; max-width: 95%; background: var(--flaeche); border: 1px solid var(--linie); padding: 0.6rem 0.85rem; border-radius: 12px 12px 12px 2px; overflow-wrap: anywhere; font-size: 0.93rem; }
.chat__antwort p { margin: 0 0 0.5rem; }
.chat__antwort p:last-child, .chat__antwort ul:last-child { margin-bottom: 0; }
.chat__antwort ul { margin: 0 0 0.5rem; padding-left: 1.2rem; }
.chat__denkt { display: flex; gap: 0.5rem; align-items: center; color: var(--text-leise); }
.chat__fehler { background: var(--offen-zart); color: var(--offen); padding: 0.55rem 0.8rem; border-radius: var(--radius); font-size: 0.9rem; }
.chat__aktionen { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--linie); }
.chat__aktionen .knopf { white-space: normal; text-align: left; }
/* Vorschlag aus dem Chat: kleine Karte mit Annehmen / Ändern / Ablehnen */
.chatvorschlag { border: 1px solid var(--linie); border-left: 3px solid var(--messing); border-radius: var(--radius); padding: 0.5rem 0.6rem; background: var(--messing-zart); min-width: 0; }
.chatvorschlag[data-status="gespeichert"] { border-left-color: var(--bezahlt); background: var(--bezahlt-zart); }
.chatvorschlag[data-status="abgelehnt"] { opacity: 0.65; background: var(--flaeche); border-left-color: var(--linie); }
.chatvorschlag__text { display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; }
.chatvorschlag__art { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6e5630; }
.chatvorschlag__knoepfe { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.45rem; }
.chatvorschlag__status { font-size: 0.85rem; color: var(--text-leise); }
.chatvorschlag__status--ok { color: var(--bezahlt); font-weight: 600; }
.chatvorschlag__status--ok::before { content: "✓ "; }
.chatvorschlag__name { margin: 0.45rem 0 0; }
.namefeld { display: flex; align-items: stretch; min-width: 0; }
.namefeld input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; font-size: 0.85rem; }
.namefeld__endung { display: flex; align-items: center; padding: 0 0.5rem; border: 1px solid #c4ccd7; border-left: 0; border-radius: 0 4px 4px 0; background: var(--grund); font-size: 0.85rem; color: var(--text-leise); }
.chat__leer p { color: var(--text-leise); }
.chat__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chat__eingabe { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.75rem calc(1rem + env(safe-area-inset-right, 0px)) 0.4rem 1rem; border-top: 1px solid var(--linie); }
.chat__eingabe .diktat { flex: 1; }
.chat__eingabe textarea { resize: none; max-height: 160px; }
.chat__hinweis { margin: 0; padding: 0 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); font-size: 0.75rem; color: var(--text-leise); }

/* --- Drucken (Auftrag mit Fotos) ------------------------------------------ */
#druck { display: none; }
@media print {
  body.druckmodus > *:not(#druck) { display: none !important; }
  body.druckmodus::before { display: none; }
  body.druckmodus { background: #fff; }
  #druck { display: block; font-size: 11pt; color: #000; }
  #druck h1 { font-size: 13pt; color: #000; margin: 1.2em 0 0.8em; }
  .druck__kopf { font-size: 9pt; border-bottom: 1px solid #999; padding-bottom: 4pt; margin-bottom: 18pt; }
  .druck__datum { text-align: right; }
  .druck__text { white-space: pre-wrap; line-height: 1.45; }
  #druck figure { margin: 14pt 0 0; break-inside: avoid; }
  #druck img { max-width: 100%; max-height: 120mm; }
  #druck figcaption { font-size: 9pt; color: #555; }
}

@media (max-width: 900px) {
  .start { grid-template-columns: minmax(0, 1fr); }
  .lage--kompakt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lage.lage--kompakt > * + * { border-top: none; border-left: 1px solid var(--linie); }
}
@media (max-width: 720px) {
  .wahl { grid-template-columns: 1fr; }
  .lage.lage--kompakt > * { padding: 0.65rem 0.7rem; }
  .lage--kompakt .lage__zusatz { font-size: 0.72rem; }
  .lage--kompakt .lage__mehr { display: none; }
  .lage--kompakt .lage__wert { font-size: 1.15rem; }
  .lage--kompakt .lage__text { font-size: 0.75rem; line-height: 1.3; }
  .chat { width: 100vw; }
}
@media (max-width: 420px) {
  .leiste__konto .knopf--ki { padding: 0.3rem 0.45rem; }
}

/* --- Ordner der Ablage bearbeiten ----------------------------------------- */

@media (max-width: 420px) {
  /* Unterordner haben lange Namen: Eingabe über die ganze Breite, Knöpfe darunter */
}

/* --- Stammdaten (Häuser, Wohnungen, Kostenträger) ------------------------ */
.stamm-haus .flaeche__kopf { align-items: flex-start; gap: 0.75rem; }
.stamm-haus .flaeche__kopf > div { min-width: 0; }
.stamm-haus .flaeche__kopf .leise { display: block; font-size: 0.82rem; overflow-wrap: anywhere; }
.stamm-zeile { display: flex; align-items: center; gap: 0.6rem; padding-right: 1.1rem; border-bottom: 1px solid #edf0f4; flex-wrap: wrap; }
.stamm-zeile:last-child { border-bottom: none; }
.stamm-zeile__haupt {
  font: inherit; color: inherit; text-decoration: none; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 1.1rem; flex: 1 1 10rem; min-width: 0;
}
.stamm-zeile__haupt:hover { background: #f6f8fb; }
.stamm-zeile__name { font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.stamm-zeile__mieter { font-size: 0.88rem; padding: 0.3rem 0 0.3rem 1.1rem; overflow-wrap: anywhere; }
.stamm-zeile__haupt + .stamm-zeile__mieter { padding-left: 0; }

/* Dateiname sichtbar beim Senden, Drucken und in der Brief-Vorschau */
.ablageblock { border-top: 1px solid var(--linie); margin-top: 0.9rem; padding-top: 0.8rem; }
.ablageblock .feld input { font-size: 0.9rem; }
.vorschau__name { margin: 0 0 0.6rem; }
.vorschau__namezeile { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.vorschau__namezeile input { flex: 1 1 auto; min-width: 0; font-size: 0.88rem; }

/* --- Ablagefläche (Dateien hineinziehen) ------------------------------- */
.ablegeflaeche {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.2rem 0.9rem;
  padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; cursor: pointer;
  border: 2px dashed #b9c3d1; border-radius: var(--radius); background: var(--flaeche);
  transition: background 0.15s, border-color 0.15s;
}
.ablegeflaeche:hover { border-color: var(--tinte-hell); background: #f8fafd; }
.ablegeflaeche:focus-within { outline: 2px solid var(--fokus); outline-offset: 2px; }
.ablegeflaeche--aktiv { border-color: var(--bezahlt); background: var(--bezahlt-zart); }
.ablegeflaeche__symbol { grid-row: span 2; color: var(--tinte-hell); display: flex; }
.ablegeflaeche--aktiv .ablegeflaeche__symbol { color: var(--bezahlt); }
.ablegeflaeche__text { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; color: var(--tinte); }
.ablegeflaeche__hinweis { font-size: 0.8rem; }
.ablegeflaeche__unter { margin: -0.75rem 0 1.25rem; font-size: 0.8rem; }
.ablegeflaeche--klein { margin: 0.75rem 1.1rem; padding: 0.7rem 0.9rem; border-width: 1.5px; }
.ablegeflaeche--klein .ablegeflaeche__hinweis { display: none; }
.ablegeflaeche--klein .ablegeflaeche__symbol { grid-row: auto; }
.ablegeflaeche--klein svg { width: 22px; height: 22px; }

/* --- Objekte: Karten und Ordnerbaum ----------------------------------- */
.objektkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0.75rem; }
.objektkarte {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem;
  padding: 1rem 1.1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  text-decoration: none; color: inherit; box-shadow: var(--schatten);
}
.objektkarte:hover { border-color: var(--tinte-hell); background: #f8fafd; }
.objektkarte__symbol {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--tinte-zart); color: var(--tinte);
}
.objektkarte__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.objektkarte__name { font-weight: 600; color: var(--tinte); overflow-wrap: anywhere; }
.objektkarte__zahlen { font-size: 0.82rem; color: var(--text-leise); margin-top: 0.15rem; }
.objektkarte__pfeil { font-size: 1.6rem; color: var(--text-leise); line-height: 1; }

.baum { padding: 0.35rem 0; }
.baum__ordner > summary {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 1.1rem; cursor: pointer; list-style: none;
  min-height: 2.6rem;
}
.baum__ordner > summary::-webkit-details-marker { display: none; }
.baum__ordner > summary::before {
  content: "›"; display: inline-block; width: 0.7rem; color: var(--text-leise); transition: transform 0.15s;
  font-size: 1.1rem; line-height: 1;
}
.baum__ordner[open] > summary::before { transform: rotate(90deg); }
.baum__ordner > summary:hover { background: #f6f8fb; }
.baum__symbol { color: var(--messing); display: flex; flex: none; }
.baum__ordner--leer > summary .baum__symbol { color: #c9cfd8; }
.baum__name { font-weight: 600; color: var(--tinte); min-width: 0; overflow-wrap: anywhere; }
.baum__ordner--leer > summary .baum__name { font-weight: 500; color: var(--text-leise); }
.baum__zahl {
  margin-left: auto; min-width: 1.6rem; text-align: center; font-size: 0.78rem; color: var(--text-leise);
  background: #eef0f3; border-radius: 999px; padding: 0 0.45rem;
}
.baum__inhalt { margin-left: 1.55rem; border-left: 1px solid var(--linie); }
.baum__inhalt > .dok { padding-left: 0.9rem; }
.baum__leer { padding: 0.35rem 1.1rem 0.6rem; font-size: 0.82rem; }
.baum > .baum__ordner + .baum__ordner { border-top: 1px solid #edf0f4; }
@media (max-width: 480px) {
  .ablegeflaeche { padding: 0.9rem 1rem; }
  .baum__ordner > summary { padding: 0.55rem 0.75rem; }
  .baum__inhalt { margin-left: 0.9rem; }
  .baum__ordner .marker { display: none; }
}
.dok--neu { background: var(--bezahlt-zart); box-shadow: inset 3px 0 0 var(--bezahlt); }
/* Schmale Bildschirme: „Einstellungen“ als Zahnrad, damit sechs Menüpunkte in eine Zeile passen */
.nav-kurz { display: none; vertical-align: middle; }
@media (max-width: 520px) {
  .navigation .nav-lang { display: none; }
  .navigation .nav-kurz { display: inline-block; }
}
/* Touch-Geräte (Handy, Tablet): Hineinziehen gibt es dort nicht, nur „Dateien auswählen“ */
@media (hover: none) and (pointer: coarse) { .nur-maus { display: none; } }

/* --- Ordner-Editor: neuer Ordner + Baum ---------------------------------- */
.ordner-neu {
  border: 1px solid var(--linie); border-radius: var(--radius); background: #f8fafd; padding: 0.75rem 0.9rem 0.6rem; margin: 0.75rem 0 1rem;
}
.ordner-neu legend { font-weight: 600; color: var(--tinte); padding: 0 0.3rem; }
.ordner-neu__zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.6rem; align-items: end; }
.ordner-neu__zeile .feld { margin: 0; }
.ordner-neu .feldhinweis { margin: 0.45rem 0 0; }
.feldhinweis--warn { color: var(--offen); }
.feldhinweis--ok { color: var(--bezahlt); }
.ordner-titel { font-size: 0.95rem; margin: 0 0 0.4rem; }
.ozliste { display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 0.75rem; }
.oz {
  padding: 0.5rem 0.7rem 0.5rem calc(0.7rem + var(--tiefe, 0) * 1.5rem);
  border-top: 1px solid #edf0f4; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.6rem; align-items: center;
}
.oz:first-child { border-top: none; }
.oz:not(.oz--unter) { background: #fbfcfd; }
.oz--unter { border-top-style: dashed; }
.oz__zeile { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.oz__symbol { color: var(--messing); display: flex; flex: none; }
.oz--unter .oz__symbol { color: #c4a676; }
.oz__name { flex: 1; min-width: 0; }
.oz:not(.oz--unter) .oz__name { font-weight: 600; }
.oz__zahl { font-size: 0.78rem; white-space: nowrap; }
.oz__knoepfe { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; align-items: center; }
.oz__auto { grid-column: 1 / -1; font-size: 0.82rem; padding: 0.3rem 0.45rem; min-height: 0; color: var(--text-leise); width: auto; max-width: min(26rem, calc(100% - 1.6rem)); margin-left: 1.6rem; }
.oz__hinweis { grid-column: 1 / -1; margin: 0 0 0 1.6rem; font-size: 0.8rem; color: var(--text-leise); }
.oz__hinweis--warn { color: var(--offen); }
.oz--weg .oz__name { text-decoration: line-through; opacity: 0.55; }
.oz--weg .oz__symbol { color: #c9cfd8; }
.oz--neu { background: var(--bezahlt-zart) !important; }
.oz--fest input { color: var(--text-leise); background: #f7f9fb; }
.oz-fehler { color: var(--offen); font-weight: 600; margin: 0 0 0.5rem; }
@media (max-width: 600px) {
  .ordner-neu__zeile { grid-template-columns: 1fr; }
  .oz { grid-template-columns: minmax(0, 1fr); padding-left: calc(0.55rem + var(--tiefe, 0) * 0.9rem); padding-right: 0.55rem; }
  .oz__knoepfe { justify-content: flex-start; margin-left: 1.6rem; }
}

/* --- Kontakte, Verlauf, Geburtstage ----------------------------------------- */
.reiter--seiten { margin-bottom: 1.1rem; }
a.reiter__knopf { text-decoration: none; display: inline-block; }
.reiter__knopf[aria-current="page"] { background: var(--tinte); border-color: var(--tinte); color: #fff; font-weight: 600; }
.kontaktliste { display: flex; flex-direction: column; }
.kontaktzeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem; align-items: center;
  padding: 0.7rem 1.1rem; border-bottom: 1px solid #edf0f4; text-decoration: none; color: inherit;
}
.kontaktzeile:last-of-type { border-bottom: none; }
.kontaktzeile:hover { background: #f6f8fb; }
.kontaktzeile__bild {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--tinte-zart); color: var(--tinte); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
}
.kontaktzeile__bild--gross { width: 3.2rem; height: 3.2rem; font-size: 1.05rem; }
.kontaktzeile__text { display: flex; flex-direction: column; min-width: 0; }
.kontaktzeile__name { font-weight: 600; color: var(--tinte); overflow-wrap: anywhere; }
.kontaktzeile__text .leise { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.kontaktzeile__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; font-size: 0.8rem; text-align: right; }
.kontaktzeile__rechts .marker svg, .geburtstage h2 svg { vertical-align: -2px; }
.kontaktkopf { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.kontaktkopf h1 { overflow-wrap: anywhere; }
.kontaktinfo { margin-top: 0.9rem; padding: 0.7rem 0.85rem; background: var(--messing-zart); border-radius: var(--radius); font-size: 0.9rem; }
.kontaktinfo p { margin: 0.25rem 0 0; white-space: pre-line; }
.geburtstage { margin-bottom: 1rem; }
.geburtstag {
  display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 1.1rem;
  border-bottom: 1px solid #edf0f4; text-decoration: none; color: inherit;
}
.geburtstag:last-child { border-bottom: none; }
.geburtstag:hover { background: #f6f8fb; }
.geburtstag__name { font-weight: 600; color: var(--tinte); }
.geburtstag__wann { font-size: 0.85rem; color: var(--text-leise); }
.geburtstag__wann--bald { color: #7a5d2e; font-weight: 600; }
.verlauf { display: flex; flex-direction: column; }
.verlauf__eintrag {
  font: inherit; text-align: left; cursor: pointer; width: 100%; background: none; color: inherit;
  border: none; border-bottom: 1px solid #edf0f4; padding: 0.75rem 1.1rem 0.75rem 1.5rem; position: relative;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.verlauf__eintrag::before {
  content: ""; position: absolute; left: 0.7rem; top: 1.05rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--messing);
}
.verlauf__eintrag:hover { background: #f6f8fb; }
.verlauf__kopf { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; font-size: 0.82rem; }
.verlauf__art { font-weight: 700; color: var(--tinte); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }
.verlauf__text { white-space: pre-line; overflow-wrap: anywhere; font-size: 0.92rem; }
.aufgabenzeile { display: grid; grid-template-columns: auto minmax(0, 1fr) 10.5rem; gap: 0.5rem; align-items: center; margin-bottom: 0.45rem; }
.geburtstagsfeld { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 7.5rem; gap: 0.6rem; }
.geburtstagsfeld .feld { margin: 0; }
@media (max-width: 600px) {
  .kontaktzeile { grid-template-columns: auto minmax(0, 1fr); }
  .kontaktzeile__rechts { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
  .aufgabenzeile { grid-template-columns: auto minmax(0, 1fr); }
  .aufgabenzeile input[type=date] { grid-column: 2; }
  .geburtstagsfeld { grid-template-columns: 4rem minmax(0, 1fr) 5.5rem; gap: 0.4rem; }
}
.geburtstagsfeld__titel { display: block; font-size: 0.85rem; font-weight: 600; margin: 0.25rem 0 0.2rem; }

/* Suchfeld mit Auswahlliste („An wen?“) */
.suchauswahl { position: relative; }
.suchauswahl .feld { margin-bottom: 0.6rem; }
.suchauswahl input[type="search"] { -webkit-appearance: none; appearance: none; }
.suchauswahl__liste {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% - 0.5rem);
  max-height: min(60vh, 340px); overflow-y: auto; background: var(--flaeche);
  border: 1px solid #c4ccd7; border-radius: var(--radius); box-shadow: 0 6px 20px rgba(29, 36, 48, 0.14);
}
.suchauswahl__gruppe {
  position: sticky; top: 0; background: var(--grund); color: var(--text-leise);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35rem 0.7rem;
}
.suchauswahl__eintrag {
  display: flex; flex-direction: column; gap: 1px; padding: 0.5rem 0.7rem; cursor: pointer; min-height: 44px; justify-content: center;
  border-top: 1px solid var(--linie); overflow-wrap: anywhere;
}
.suchauswahl__eintrag .leise { font-size: 0.8rem; }
.suchauswahl__eintrag:hover, .suchauswahl__eintrag[aria-selected="true"] { background: var(--tinte-zart); }
.suchauswahl__leer { padding: 0.7rem; color: var(--text-leise); font-size: 0.85rem; }
/* In Dialogen: Liste im Fluss statt darüber (kein Abschneiden, sauberes Scrollen am Handy) */
.suchauswahl--inline .suchauswahl__liste { position: static; margin: -0.3rem 0 0.8rem; max-height: min(45vh, 300px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.suchauswahl__eintrag--gewaehlt span:first-child { font-weight: 600; }
.suchauswahl__eintrag--gewaehlt span:first-child::after { content: " ✓"; color: var(--bezahlt); }

/* Vorgänge (Schriftverkehr je Thema) */
.vorgangzeile {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.65rem 1.1rem; border-bottom: 1px solid #edf0f4; color: var(--text); text-decoration: none;
}
.vorgangzeile:hover { background: #f6f8fb; }
.vorgangzeile__titel { font-weight: 600; overflow-wrap: anywhere; min-width: 0; flex: 1 1 12rem; }
.vorgangzeile__info { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.85rem; }
.faden { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.1rem; }
.faden__posten {
  max-width: min(46rem, 92%); padding: 0.7rem 0.9rem; border: 1px solid var(--linie); border-radius: 12px 12px 12px 3px;
  background: var(--flaeche); align-self: flex-start; min-width: 0;
}
.faden__posten--aus { align-self: flex-end; background: var(--tinte-zart); border-color: #cfdaea; border-radius: 12px 12px 3px 12px; }
.faden__posten--entwurf { align-self: flex-end; background: var(--messing-zart); border-style: dashed; border-radius: 12px 12px 3px 12px; }
.faden__kopf { display: flex; justify-content: space-between; gap: 0.4rem 0.8rem; flex-wrap: wrap; font-size: 0.85rem; margin-bottom: 0.25rem; }
.faden__wer { font-weight: 600; overflow-wrap: anywhere; }
.faden__betreff { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.3rem; overflow-wrap: anywhere; }
.faden__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; }
.faden__mehr > summary { cursor: pointer; color: var(--tinte-hell); font-size: 0.85rem; margin-top: 0.3rem; }
.faden__fuss { display: flex; justify-content: flex-end; gap: 0.8rem; margin-top: 0.4rem; font-size: 0.82rem; }
.vorgang-abschluss .ki-antwort { margin-top: 0.6rem; }
@media (max-width: 520px) { .faden { padding: 0.75rem; } .faden__posten { max-width: 100%; } }
.faden__posten:has(> .faden__mehr[open]) > .faden__text { display: none; }

/* Einsprechen: vorbereitete Schreiben */
.schreibzeile { border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.6rem 0.7rem; margin-bottom: 0.6rem; background: var(--flaeche); min-width: 0; }
.schreibzeile__an { margin-bottom: 0.4rem; font-weight: 600; }
.schreibzeile__felder { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; gap: 0 0.6rem; align-items: start; }
.schreibzeile__text { grid-column: 1 / -1; }
.schreibzeile .feld { margin-bottom: 0.5rem; }
@media (max-width: 520px) { .schreibzeile__felder { grid-template-columns: minmax(0, 1fr); } }

/* ZIP-Import */
.zip__vorschau { max-height: 40vh; overflow-y: auto; border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 0.8rem; }
.zip__haus > summary { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.8rem; cursor: pointer; flex-wrap: wrap; }
.zip__haus + .zip__haus { border-top: 1px solid var(--linie); }
.zip__ordner { list-style: none; margin: 0; padding: 0 0.8rem 0.5rem; font-size: 0.88rem; }
.zip__ordner li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.2rem 0; border-top: 1px dashed #edf0f4; overflow-wrap: anywhere; }
.fortschritt progress { width: min(320px, 100%); height: 0.6rem; accent-color: var(--tinte); }
.fortschritt [data-stand] { max-width: 320px; overflow-wrap: anywhere; min-height: 2.6em; }

/* Übersicht: Filter Alle / Eilig / Wiedervorlagen / Erledigt */
.reiter--filter { padding: 0.75rem 1.1rem 0; margin-bottom: 0.6rem; }
.reiter__zahl { font-variant-numeric: tabular-nums; opacity: 0.75; margin-left: 0.15rem; }
.lage__link {
  font: inherit; background: none; border: none; padding: 0; color: var(--tinte-hell); cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px;
}
.lage__link:hover { color: var(--tinte); text-decoration-color: currentColor; }
.lage__mehr { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px dashed var(--linie); font-size: 0.82rem; align-self: stretch; }
.lage__link { text-align: left; }
.todo--erledigt { border-left-color: var(--bezahlt-zart); }
.todo--erledigt .todo__titel { font-weight: 500; color: var(--text-leise); }
.todo__haken--zurueck { color: var(--tinte-hell); }
.todo__haken--zurueck svg { opacity: 0.55; }
.todo__haken--zurueck:hover { border-color: var(--tinte-hell); background: var(--tinte-zart); }

/* Brotkrumen: Wo bin ich? Am Handy nur „‹ Eltern“ */
.brotkrumen { margin: 0 0 0.9rem; font-size: 0.86rem; color: var(--text-leise); min-width: 0; }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.15rem; min-width: 0; }
.brotkrumen li { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.brotkrumen li + li::before { content: "›"; margin: 0 0.45rem; color: #a3acb9; }
.brotkrumen a, .brotkrumen span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
.brotkrumen a { color: var(--text-leise); text-decoration: none; }
.brotkrumen a:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: 2px; }
.brotkrumen [aria-current] span { color: var(--text); font-weight: 500; }
@media (max-width: 600px) {
  .brotkrumen li { display: none; }
  .brotkrumen li.brotkrumen__eltern { display: inline-flex; }
  .brotkrumen li.brotkrumen__eltern::before { content: "‹"; margin: 0 0.4rem 0 0; font-size: 1.1rem; line-height: 1; }
  .brotkrumen a { max-width: calc(100vw - 4rem); padding: 0.3rem 0; }
}

/* Filter am Handy: eine Zeile, notfalls wischen (die Seite selbst scrollt nicht seitlich) */
@media (max-width: 600px) {
  .reiter--filter { flex-wrap: wrap; row-gap: 0.35rem; padding: 0.65rem 0.75rem 0.15rem; gap: 0.25rem; margin-bottom: 0.4rem; }
  .reiter--filter::-webkit-scrollbar { display: none; }
  .reiter--filter .reiter__knopf { flex: none; font-size: 0.82rem; padding: 0.32rem 0.55rem; }
}
@media (max-width: 380px) {
  .reiter--filter { padding-left: 0.6rem; padding-right: 0.6rem; gap: 0.2rem; }
  .reiter--filter .reiter__knopf { font-size: 0.78rem; padding: 0.3rem 0.45rem; }
}

/* Rundschreiben: Mietparteien zum Anhaken, Zähler unter „An“ */
.rundempf { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.5rem 0; max-height: 22rem; overflow-y: auto; }
.rundempf__zeile { align-items: flex-start; padding: 0.3rem 0; border-bottom: 1px solid #edf0f4; }
.rundempf__zeile > span { min-width: 0; overflow-wrap: anywhere; }
.rundempf__name { font-weight: 600; }
.knopfreihe--eng { gap: 0.3rem; margin-top: 0.2rem; }
.rundan { margin: 0.35rem 0 0; font-weight: 500; }
.rundliste { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; max-height: 12rem; overflow-y: auto; }
.rundliste li { overflow-wrap: anywhere; }
.hinweisbox { background: #fff7e8; border: 1px solid #ecd9ad; border-radius: var(--radius); padding: 0.55rem 0.75rem; }
/* Weitere Absender in den Einstellungen */
.zeile--knopf {
  font: inherit; color: inherit; background: none; border: none; border-bottom: 1px solid #edf0f4; width: 100%; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.65rem 0; cursor: pointer;
}
.zeile--knopf > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.zeile--knopf:hover { background: #f6f8fb; }

/* Unterschrift (Einstellungen, Vorschau) */
.unterschrift-feld { min-height: 4.5rem; max-width: 22rem; padding: 0.6rem 0.9rem; border: 1px dashed var(--linie); border-radius: 8px;
  background: #fff; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 0.6rem; }
.unterschrift-feld img { display: block; max-width: 100%; max-height: 5rem; height: auto; }
.unterschrift-feld--gross { max-width: 100%; }
.unterschrift-feld--gross img { max-height: 8rem; }
.vorschau__unterschrift { margin: 0; }

/* „An alle im Haus“ am Feld „An“ und Hinweis bei Rundschreiben-Anrede */
.feld__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; font-weight: 500; }
.textknopf { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--tinte); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; }
.textknopf:hover, .textknopf:focus-visible { color: var(--tinte-hell); }
.rundtipp { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin: 0 0 0.8rem; color: var(--text); }

/* Ort am To-do (Haus, Wohnung) */
.todo__ort { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Dateien vom PC auf eine Seite ohne Ablagefläche ziehen (Übersicht, Postfach …) */
body.datei-ueber::after {
  content: "Loslassen – die KI liest die Datei und schlägt vor, ob sie ins Postfach oder in die Ablage gehört";
}
body.datei-ueber[data-ablage-text]::after { content: attr(data-ablage-text); }
body.datei-ueber::after {
  position: fixed; inset: 0.75rem; z-index: 60; pointer-events: none;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem;
  font-size: 1.15rem; font-weight: 600; color: var(--tinte);
  background: rgba(232, 238, 246, 0.86); border: 3px dashed var(--tinte-hell); border-radius: 12px;
}

/* „Ja und Ja“: nächste Schritte der KI auf der Nachrichtenseite */
.schritte { border-color: var(--messing-rand); background: linear-gradient(var(--messing-zart), var(--flaeche) 70%); }
.schritte .flaeche__kopf h2 { display: flex; align-items: center; gap: 0.4rem; }
.schritte__laeuft { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--tinte); }
.schritte__liste { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.schritt { display: grid; grid-template-columns: 1.7rem 1fr; gap: 0.2rem 0.6rem; align-items: start; }
.schritt__nr { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--tinte); color: #fff; font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; }
.schritt--fertig .schritt__nr { background: var(--bezahlt); }
.schritt--fertig .schritt__text { color: var(--text-leise); }
.schritt__text { padding-top: 0.2rem; }
.schritt__aktion { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.schritte__fuss { margin: 0; }
.marker--ki { background: var(--messing-zart); color: var(--messing-text); }

/* Teile, die nur im Design B (html.design-b, css/design-b.css) sichtbar sind */
.nav-icon, .nur-design-b { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.baum > .baum__leer { padding: 1.1rem 1.25rem; font-size: 0.92rem; }
.oz-leer { padding: 0.75rem 0.25rem; margin: 0; }
.notiz-vorgang { margin: 0 0 0.9rem; padding: 0.6rem 0.85rem; border-radius: 8px; background: var(--flaeche-zart); border: 1px solid var(--rand); font-size: 0.9rem; }
.chatvorschlag__aenderung { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.2rem; overflow-wrap: anywhere; }
.chatvorschlag__aenderung s { color: var(--text-leise); }

/* --- Nächster Schritt (Vorgang) ------------------------------------------- */
.schritte { display: grid; gap: 0.5rem; margin: 0.25rem 0 1rem; min-height: 2.5rem; }
.schritte .schritt {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; text-align: left; width: 100%; min-width: 0; cursor: pointer;
  padding: 0.65rem 0.85rem; border: 1px solid var(--linie); border-left: 3px solid var(--messing); border-radius: 8px;
  background: var(--flaeche); color: inherit; font: inherit;
}
.schritte .schritt:hover, .schritte .schritt:focus-visible { border-color: var(--messing); background: var(--messing-zart); }
.schritt__titel { font-weight: 650; overflow-wrap: break-word; min-width: 0; }
.schritt__unter { font-size: 0.85rem; overflow-wrap: break-word; min-width: 0; }
.dateiknopf { cursor: pointer; align-self: flex-start; }
.checkliste { display: grid; gap: 0.1rem; margin: 0.5rem 0 1rem; }
.checkliste .checkfeld { margin: 0.2rem 0; overflow-wrap: anywhere; }

/* --- Mieteingänge ---------------------------------------------------------- */
.me-steuerung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 1rem; }
.me-monat { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.me-monat strong { font-size: 1.05rem; min-width: 9.5rem; text-align: center; color: var(--tinte); }
.me-sicht { margin-bottom: 0; }
.me-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.me-kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 0.9rem 1rem; box-shadow: var(--schatten); min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.me-kachel__titel { font-size: 0.82rem; color: var(--text-leise); font-weight: 600; }
.me-kachel__wert { font-size: 1.55rem; font-weight: 700; color: var(--tinte); font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.me-kachel__unter { font-size: 0.82rem; color: var(--text-leise); }
.me-kachel__fuss { font-size: 0.85rem; font-weight: 600; margin-top: 0.15rem; }
.me-balken { height: 6px; border-radius: 3px; background: var(--grund); overflow: hidden; margin-top: 0.35rem; }
.me-balken span { display: block; height: 100%; background: var(--bezahlt); border-radius: 3px; }
.me-gut { color: var(--bezahlt); }
.me-verlauf summary { font-weight: 600; }
.me-jahr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.25rem; align-items: end; padding: 0.75rem 1rem 0.25rem; }
.me-jahr__monat { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; background: none; border: 1px solid transparent; border-radius: 6px; padding: 0.2rem 0; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.me-jahr__monat:hover, .me-jahr__monat--aktiv { border-color: var(--linie); background: var(--flaeche-zart); }
.me-jahr__saeulen { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 6.5rem; width: 100%; }
.me-jahr__soll, .me-jahr__ist { display: block; width: 38%; max-width: 0.9rem; border-radius: 2px 2px 0 0; min-height: 1px; }
.me-jahr__soll { background: var(--tinte-zart); border: 1px solid var(--rand); border-bottom: 0; }
.me-jahr__ist { background: var(--bezahlt); }
.me-jahr__ist--fehlt { background: var(--teil); }
.me-jahr__name { font-size: 0.72rem; color: var(--text-leise); }
.me-jahr__legende { padding: 0 1rem 0.75rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0; }
.me-jahr__legende i { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; vertical-align: -1px; }
.me-l-soll { background: var(--tinte-zart); border: 1px solid var(--rand); }
.me-l-ist { background: var(--bezahlt); }
.me-l-fehlt { background: var(--teil); }
.me-haeuser { margin: 0.25rem 0 0.75rem; }
.me-nur-offen { margin: 0; font-weight: 400; }
.me-zeile {
  display: grid; grid-template-columns: minmax(9rem, 1.3fr) minmax(5.5rem, 0.9fr) minmax(6.5rem, 0.8fr) minmax(7rem, 0.8fr) 14.75rem minmax(13rem, 1.6fr);
  gap: 0.4rem 0.9rem; align-items: center; padding: 0.7rem 1.1rem; border-top: 1px solid var(--linie); min-width: 0;
}
.me-zeile > * { min-width: 0; }
.me-zeile--kopf { font-size: 0.78rem; color: var(--text-leise); font-weight: 600; text-transform: none; padding-top: 0.5rem; padding-bottom: 0.5rem; background: var(--flaeche-zart); }
.me-zeile__mieter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; font-weight: 600; overflow-wrap: anywhere; }
.me-zeile__mieter a { color: var(--tinte); }
.me-zeile__mieter .marker { white-space: normal; max-width: 100%; }
.me-label { display: none; }
.me-betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.me-betrag b { display: inline-block; min-width: 1.1rem; text-align: center; border-radius: 3px; font-size: 0.85rem; }
.me-betrag--ok b { color: var(--bezahlt); }
.me-betrag--teil b { color: #8a5d0d; background: var(--teil-zart); }
.me-betrag--offen b { color: #fff; background: var(--offen); }
.me-betrag--zukunft b { color: var(--text-leise); }
.me-zeile__historie .mietbuch { flex-wrap: nowrap; }
.me-zeile__historie .mietbuch__monat { cursor: pointer; font: inherit; font-size: 0.72rem; padding: 0; }
.mietbuch__monat--erwartet { background: var(--tinte-zart); color: var(--tinte); border-color: var(--rand); }
.me-aktuell { outline: 2px solid var(--tinte); outline-offset: 1px; }
.me-zeile__aktion { display: flex; flex-direction: column; gap: 0.35rem; }
.me-vorschlag { font-size: 0.85rem; color: var(--text); overflow-wrap: anywhere; }
.me-ki svg { width: 0.85rem; height: 0.85rem; vertical-align: -1px; color: var(--messing-text); }
.me-aktion { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.me-aktion__wahl { max-width: 100%; font-size: 0.85rem; padding: 0.3rem 0.5rem; }
.me-hinweis { margin-top: 0.75rem; }
.me-dialog__titel { font-size: 0.95rem; margin: 0.9rem 0 0.3rem; }
.me-zahlungen li { align-items: flex-start; }
.me-neu { margin-top: 1rem; }
@media (max-width: 1100px) {
  .me-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.85rem 1rem; }
  .me-zeile--kopf { display: none; }
  .me-zeile__mieter, .me-zeile__historie, .me-zeile__aktion { grid-column: 1 / -1; }
  .me-label { display: block; font-size: 0.72rem; color: var(--text-leise); font-weight: 600; }
  .me-zeile__historie .mietbuch { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .me-kachel__wert { font-size: 1.3rem; }
  .me-monat strong { min-width: 0; }
  .me-jahr { padding: 0.5rem 0.4rem 0.25rem; gap: 0.1rem; }
  .me-jahr__name { font-size: 0.62rem; }
}

/* Zahlungsimport (Vorschau) */
.zi-wege { margin: 0 0 1rem; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.zi-zusammenfassung { margin: 0 0 0.4rem; }
.zi-zusammenfassung .leise { display: inline-block; margin-left: 0.3rem; }
.zi-ki-info { display: block; font-size: 0.8rem; margin-top: 0.3rem; }
.zi-liste { border: 1px solid var(--linie); border-radius: var(--radius); margin: 0.6rem 0; }
.zi-zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr); gap: 0.3rem 0.8rem; align-items: start;
  padding: 0.65rem 0.8rem; border-top: 1px solid var(--linie); border-left: 3px solid transparent; min-width: 0;
}
.zi-zeile:first-child { border-top: 0; }
.zi-zeile--unklar { border-left-color: var(--offen); }
.zi-zeile--pruefen { border-left-color: var(--teil); }
.zi-zeile > * { min-width: 0; }
.zi-an { padding-top: 0.15rem; }
.zi-an input { width: 1.2rem; height: 1.2rem; }
.zi-buchung { overflow-wrap: anywhere; font-size: 0.92rem; }
.zi-betrag { font-variant-numeric: tabular-nums; }
.zi-zahler { font-weight: 600; }
.zi-text { font-size: 0.82rem; }
.zi-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.35rem; }
.zi-felder select:first-child { grid-column: 1 / -1; }
.zi-felder select, .zi-felder input { width: 100%; min-width: 0; }
.zi-hinweis { grid-column: 2 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; font-size: 0.8rem; color: var(--text-leise); }
.zi-chip { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; font-weight: 600; font-size: 0.75rem; }
.zi-chip--sicher { background: var(--bezahlt-zart); color: var(--bezahlt); }
.zi-chip--pruefen { background: var(--teil-zart); color: #8a5d0d; }
.zi-chip--unklar { background: var(--offen-zart); color: var(--offen); }
.zi-ki { display: inline-flex; gap: 0.25rem; align-items: center; color: var(--tinte); }
.zi-warnungen { margin: 0.3rem 0; padding: 0.5rem 0.8rem 0.5rem 1.6rem; background: var(--teil-zart); border-radius: var(--radius); font-size: 0.86rem; }
.zi-blatt + .zi-blatt { margin-top: 1rem; }
.zi-fuss { align-items: center; }
.zi-summe { margin-right: auto; color: var(--text-leise); font-size: 0.9rem; }
@media (max-width: 640px) {
  .zi-zeile { grid-template-columns: auto minmax(0, 1fr); }
  .zi-felder, .zi-hinweis { grid-column: 1 / -1; }
  .zi-summe { flex-basis: 100%; }
}

/* Erfassen mit mehreren Dateien (ein Vorgang) */
.erfass-teile { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; margin-bottom: 0.6rem; }
.erfass-teile--eins { display: block; }
.erfass-teil { position: relative; margin: 0; min-width: 0; }
.erfass-teile:not(.erfass-teile--eins) .erfass-teil {
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-zart); overflow: hidden;
  min-height: 6.5rem; display: flex; align-items: center; justify-content: center;
}
.erfass-teile:not(.erfass-teile--eins) .erfass-teil img { display: block; width: 100%; height: 6.5rem; object-fit: cover; }
.erfass-teile:not(.erfass-teile--eins) .erfass-teil .dateizeile { padding: 0.5rem; font-size: 0.78rem; flex-direction: column; text-align: center; gap: 0.3rem; }
.erfass-teil__weg {
  position: absolute; top: 0.25rem; right: 0.25rem; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 999px;
  background: rgba(22, 36, 58, 0.72); color: #ffffff; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.erfass-teil__weg:hover, .erfass-teil__weg:focus-visible { background: var(--offen); }
.erfass-dazu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin: 0 0 0.6rem; }
.erfass-dazu .leise { font-size: 0.85rem; }
.erfass-dazu label.knopf { cursor: pointer; }
.erfass-namen { margin: 0.4rem 0 1rem; padding-left: 1.2rem; overflow-wrap: anywhere; }
.zi-ablage { margin: 0 0 0.75rem; }

/* Handwerker: Aufträge, Angebote, Handwerker-Liste (js/handwerker.js) */
.hw-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.hw-kachel { display: block; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.8rem 1rem; color: var(--text); text-decoration: none; box-shadow: var(--schatten); }
.hw-kachel:hover { border-color: var(--tinte-hell); }
.hw-kachel small { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-leise); }
.hw-kachel b { display: block; font-size: 1.6rem; line-height: 1.25; }
.hw-kachel span { font-size: 0.8rem; color: var(--text-leise); }
.hw-kachel--rot b { color: var(--offen); }
.hw-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.7rem; }
.hw-leiste .reiter { margin: 0; }
.hw-filter { margin-left: auto; }
.hw-filter select { min-width: 0; max-width: 100%; }
.hw-zahl { opacity: 0.7; margin-left: 0.15rem; font-weight: 500; }
.hw-flaeche { overflow: hidden; }
.hw-liste { display: grid; }
.hw-zeile {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1.3fr) auto; gap: 0.5rem 1rem; align-items: center;
  padding: 0.85rem 1.1rem; border-top: 1px solid var(--linie);
}
.hw-zeile:first-child { border-top: 0; }
.hw-zeile > * { min-width: 0; }
.hw-zeile__was { display: grid; gap: 0.1rem; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.hw-zeile__was:hover .hw-titel { text-decoration: underline; }
.hw-ort { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--messing-text); }
.hw-titel { font-weight: 700; }
.hw-zeile__was .leise { font-size: 0.83rem; }
.hw-wer { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.hw-person { font-size: 0.82rem; border: 1px solid var(--linie); border-radius: 999px; padding: 0.1rem 0.55rem; overflow-wrap: anywhere; }
.hw-person--gewaehlt { border-color: var(--bezahlt); background: var(--bezahlt-zart); }
.hw-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.85rem; }
.hw-post { font-size: 0.8rem; font-weight: 600; }
.hw-aktion { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
.hw-chip { display: inline-block; padding: 0.08rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; background: var(--tinte-zart); color: var(--tinte); }
.hw-chip--entwurf { background: var(--flaeche-zart); color: var(--text-leise); border: 1px dashed var(--rand); }
.hw-chip--angebot { background: var(--teil-zart); color: #8a5d0d; }
.hw-chip--beauftragt, .hw-chip--beauftragen { background: var(--messing-zart); color: var(--messing-text); }
.hw-chip--erledigt, .hw-chip--abgeschlossen { background: var(--bezahlt-zart); color: var(--bezahlt); }
.hw-chip--abgebrochen, .hw-chip--abgelehnt { background: var(--flaeche-zart); color: var(--text-leise); }
.hw-chip--rot { background: var(--offen-zart); color: var(--offen); }
.hw-schritte { display: inline-flex; gap: 3px; flex-basis: 100%; }
.hw-schritte i { width: 1.9rem; height: 4px; border-radius: 2px; background: var(--linie); }
.hw-schritte i.an { background: var(--tinte); }
.flaeche__kopf .hw-schritte { flex-basis: auto; }
.hw-summe { margin: 0; padding: 0.8rem 1.1rem 0; color: var(--text-leise); font-size: 0.9rem; }
.hw-legende { margin: 0.6rem 0.2rem 0; font-size: 0.82rem; }
.hw-warnung { margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: var(--radius); background: var(--offen-zart); color: var(--offen); font-weight: 600; }
.hw-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; padding: 1rem; }
.hw-karte { border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.8rem 0.9rem; display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.hw-karte--aus { opacity: 0.6; }
.hw-karte__kopf { all: unset; cursor: pointer; display: flex; gap: 0.6rem; align-items: center; min-width: 0; }
.hw-karte__kopf > span:last-child { display: grid; min-width: 0; overflow-wrap: anywhere; }
.hw-karte__kopf .leise { font-size: 0.82rem; }
.hw-karte__kopf:focus-visible { outline: 2px solid var(--fokus); border-radius: 6px; }
.hw-karte__zahlen { margin: 0; font-size: 0.85rem; }
.hw-ini { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--tinte-zart); color: var(--tinte); display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; }
.hw-fab { display: none; }
.hw-beteiligt { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: center; padding: 0.75rem 0; border-top: 1px solid var(--linie); overflow-wrap: anywhere; }
.hw-beteiligt:first-child { border-top: 0; padding-top: 0; }
.hw-beteiligt--gewaehlt { background: linear-gradient(90deg, var(--bezahlt-zart), transparent 70%); border-radius: 6px; padding-left: 0.5rem; }
.hw-betrag { font-weight: 700; margin-top: 0.2rem; }
.hw-schritte-knoepfe { display: grid; gap: 0.5rem; }
.hw-kasten { border-color: var(--messing-rand); }
.zeile--einfach { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.1rem; border-top: 1px solid var(--linie); color: var(--text); text-decoration: none; }
.zeile--einfach:first-child { border-top: 0; }
/* Maske */
.hw-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; margin-bottom: 0.4rem; }
.hw-seg label { position: relative; cursor: pointer; }
.hw-seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; left: 0; top: 0; }
.hw-seg span { display: block; padding: 0.65rem 0.5rem; text-align: center; font-weight: 700; color: var(--text-leise); }
.hw-seg input:checked + span { background: var(--tinte-zart); color: var(--tinte); box-shadow: inset 0 -3px 0 var(--tinte); }
.hw-seg input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: -2px; }
.hw-suche { width: 100%; margin-bottom: 0.4rem; }
.hw-wahlliste { max-height: 15rem; overflow-y: auto; border: 1px solid var(--linie); border-radius: 8px; }
.hw-wahl { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.55rem 0.7rem; border-top: 1px solid var(--linie); cursor: pointer; overflow-wrap: anywhere; }
.hw-wahl:first-child { border-top: 0; }
.hw-wahl:has(input:checked) { background: var(--tinte-zart); }
.hw-wahl input { margin-top: 0.2rem; flex: none; }
.hw-wahl .marker { margin-left: 0.3rem; }
.hw-anhaenge { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0; }
.hw-anhaenge:empty { display: none; }
.datei-chip-x { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; border: 1px solid var(--rand); border-radius: 999px; padding: 0.1rem 0.25rem 0.1rem 0.6rem; max-width: 100%; overflow-wrap: anywhere; }
.datei-chip-x button { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.3rem; color: var(--text-leise); }
.hw-ablagewahl { width: auto; max-width: 100%; }
.hw-anhaenge + .knopfreihe, fieldset .knopfreihe--eng { justify-content: flex-start; }
@media (max-width: 1000px) {
  .hw-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hw-zeile__was { grid-column: 1 / -1; }
  .hw-aktion { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 720px) {
  .hw-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .hw-kachel { padding: 0.65rem 0.75rem; }
  .hw-kachel b { font-size: 1.35rem; }
  .hw-filter { margin-left: 0; width: 100%; }
  .hw-filter select { width: 100%; }
  .hw-leiste .reiter { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hw-leiste .reiter__knopf { text-align: center; padding-left: 0.3rem; padding-right: 0.3rem; }
  .hw-zeile { grid-template-columns: minmax(0, 1fr); padding: 0.8rem 0.9rem; }
  .hw-beteiligt { grid-template-columns: minmax(0, 1fr); }
  .hw-karten { padding: 0.75rem; }
  .kopf .knopfreihe #hw-anfragen { display: none; }
  .hw-fab {
    display: inline-flex; align-items: center; gap: 0.35rem; position: fixed; z-index: 20;
    right: calc(1rem + env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    border: 0; border-radius: 999px; padding: 0.8rem 1.15rem; background: var(--tinte); color: #fff; font: inherit; font-weight: 700;
    box-shadow: 0 6px 16px rgba(20, 30, 50, 0.3); cursor: pointer;
  }
  .hw-flaeche { margin-bottom: 4.5rem; }
}
.hw-kurz { display: none; }
@media (max-width: 720px) {
  .hw-leiste .reiter__knopf { white-space: nowrap; font-size: 0.9rem; }
}
@media (max-width: 440px) {
  .hw-lang { display: none; }
  .hw-kurz { display: inline; }
}
/* Postfach: Haus/Wohnung bzw. „Allgemein“ neben dem Absender */
.post__werort { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; min-width: 0; }
.post__ort { font-size: 0.8rem; font-weight: 600; color: var(--messing-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.post__ort--allgemein { color: var(--text-leise); font-weight: 500; }
.zeile--kontakt { align-items: center; }
.zeile--kontakt .zeile__wer { display: grid; gap: 0.1rem; min-width: 0; }
.zeile__pfeil { color: var(--text-leise); font-size: 1.3rem; line-height: 1; }
.hw-doks { display: grid; gap: 0.2rem; justify-items: start; margin: 0 0 0.8rem; overflow-wrap: anywhere; }

/* --- Schaden-Ablauf (js/schaden.js): 4 Schritte, aktueller hervorgehoben ---- */
.schaden .schritte__liste .schritt {
  display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: 0.2rem 0.6rem; align-items: start; cursor: default;
  padding: 0.55rem 0.6rem; border: 1px solid transparent; border-radius: 8px; background: none; width: auto;
}
.schaden .schritte__liste .schritt:hover { background: none; border-color: transparent; }
.schaden .schritte__liste .schritt--jetzt, .schaden .schritte__liste .schritt--jetzt:hover { background: var(--flaeche); border-color: var(--messing-rand); }
.schaden .schritt--wartet .schritt__nr { background: var(--linie); color: var(--text-leise); }
.schaden .schritt--wartet .schritt__text { color: var(--text-leise); }
.schaden .schritt__text { overflow-wrap: anywhere; min-width: 0; }
.schaden .schritt__aktion:empty { display: none; }

/* Erfassen: „Betrifft“ als Suchfeld, Vorschlag „gehört zum Auftrag“ */
.betrifft-feld { min-width: 0; }
.betrifft-feld .suchauswahl .feld { margin-bottom: 0.3rem; }
.betrifft-feld > .feldhinweis { display: block; margin: -0.1rem 0 0.8rem; }
.auftrag-treffer { border: 1px solid var(--tinte-zart); background: #f3f7fc; border-radius: var(--radius); padding: 0.6rem 0.8rem 0.2rem; margin: 0 0 0.9rem; }
.auftrag-treffer .checkfeld { align-items: flex-start; margin-top: 0.2rem; font-weight: 600; color: var(--tinte); }
.auftrag-treffer .checkfeld input { margin-top: 0.15rem; flex: none; }
.auftrag-treffer [data-auftrag-felder] .checkfeld { font-weight: 400; color: var(--text); }

/* Standort-Check (Recherche im Internet) */
.recherche-gewerke { display: flex; flex-wrap: wrap; gap: 0.4rem; border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.recherche-gewerke legend { font-size: 0.85rem; font-weight: 500; color: var(--text-leise); margin-bottom: 0.4rem; padding: 0; }
.chipwahl { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border: 1px solid var(--linie); border-radius: 999px; font-size: 0.88rem; cursor: pointer; background: var(--flaeche); }
.chipwahl:has(input:checked) { border-color: var(--tinte-hell); background: var(--tinte-zart); color: var(--tinte); }
.chipwahl input { width: 1rem; height: 1rem; margin: 0; }
.recherche-bericht .flaeche { padding: 1.1rem 1.25rem; }
.recherche-zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0.6rem; margin: 0.6rem 0 0.8rem; }
.recherche-zahlen > div { border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.55rem 0.75rem; min-width: 0; }
.recherche-zahlen dt { font-size: 0.78rem; color: var(--text-leise); }
.recherche-zahlen dd { margin: 0.15rem 0 0; font-weight: 600; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 0.15rem; }
.recherche-zahlen dd .leise { font-weight: 400; font-size: 0.8rem; }
.recherche-punkte, .recherche-recht, .recherche-quellen { margin: 0.4rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; overflow-wrap: anywhere; }
.recherche-recht { list-style: none; padding: 0; gap: 0.6rem; }
.recherche-recht li { display: flex; flex-direction: column; gap: 0.15rem; border-bottom: 1px solid var(--linie); padding-bottom: 0.55rem; }
.recherche-recht__kopf { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.recherche-quelle { font-size: 0.82rem; }
.recherche-quelle a, .recherche-quellen a, .recherche-portale a { overflow-wrap: anywhere; }
.recherche-gruppe { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-leise); margin: 1rem 0 0.4rem; }
.recherche-kontakte { display: grid; gap: 0.5rem; }
.recherche-kontakt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.6rem 0.8rem; margin-top: 0.5rem; }
.recherche-kontakt > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 14rem; overflow-wrap: anywhere; }
.recherche-hinweis { margin: 0.5rem 0 2rem; }
.chat__modus { display: flex; gap: 0.4rem; padding: 0.5rem 1rem 0; flex-wrap: wrap; }
.chat__modus label { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border: 1px solid var(--linie); border-radius: 999px; font-size: 0.85rem; cursor: pointer; background: var(--flaeche); }
.chat__modus label:has(input:checked) { border-color: var(--tinte-hell); background: var(--tinte-zart); color: var(--tinte); font-weight: 600; }
.chat__modus input { margin: 0; width: 0.95rem; height: 0.95rem; accent-color: var(--tinte); }
.chat__quellen { margin-top: 0.5rem; font-size: 0.82rem; overflow-wrap: anywhere; }

/* Gesprächsmodus im Chat (Sprechen und Zuhören, z. B. im Auto) */
.chat__gespraech-start { display: inline-flex; align-items: center; gap: 0.3rem; }
.chat--gespraech .chat__eingabe, .chat--gespraech .chat__modus, .chat--gespraech .chat__hinweis, .chat--gespraech .chat__chips,
.chat--gespraech .chat__gespraech-start { display: none; }
.chat__gespraech {
  border-top: 1px solid var(--linie); background: var(--flaeche); text-align: center;
  padding: 1rem calc(1rem + env(safe-area-inset-right, 0px)) calc(0.9rem + env(safe-area-inset-bottom, 0px)) 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.chat__gespraech[hidden] { display: none; }
.gespraech__status { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--tinte); }
.gespraech__text { margin: 0; min-height: 1.3em; max-width: 100%; color: var(--text-leise); overflow-wrap: anywhere; font-size: 0.95rem; }
.gespraech__knoepfe { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; width: 100%; }
.gespraech__knoepfe .knopf { min-height: 52px; flex: 1 1 10rem; max-width: 16rem; font-size: 1rem; }
.gespraech__tipp { margin: 0; font-size: 0.75rem; color: var(--text-leise); }
.gespraech__welle { display: flex; gap: 6px; align-items: center; height: 34px; }
.gespraech__welle span { width: 8px; height: 10px; border-radius: 4px; background: var(--tinte-hell, var(--tinte)); opacity: 0.5; }
.chat__gespraech[data-phase="hoeren"] .gespraech__welle span,
.chat__gespraech[data-phase="frage"] .gespraech__welle span { background: var(--offen, #c0392b); opacity: 0.9; animation: gespraech-puls 1.1s ease-in-out infinite; }
.chat__gespraech[data-phase="sprechen"] .gespraech__welle span { opacity: 0.9; animation: gespraech-puls 0.7s ease-in-out infinite; }
.chat__gespraech[data-phase="denken"] .gespraech__welle span { animation: gespraech-denken 1.2s ease-in-out infinite; }
.gespraech__welle span:nth-child(2) { animation-delay: 0.15s !important; }
.gespraech__welle span:nth-child(3) { animation-delay: 0.3s !important; }
.gespraech__welle span:nth-child(4) { animation-delay: 0.45s !important; }
@keyframes gespraech-puls { 0%, 100% { height: 10px; } 50% { height: 32px; } }
@keyframes gespraech-denken { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .gespraech__welle span { animation: none !important; } }
.gespraech__marke { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinte); background: var(--tinte-zart, #e8eef6); border-radius: 999px; padding: 0.15rem 0.6rem; }
.gespraech__erste { margin: 0; font-size: 0.8rem; color: var(--text-leise); max-width: 26rem; }
.gespraech__erste .gespraech__marke { margin-right: 0.25rem; }

/* Seite eines Handwerkers (Kontakte › Handwerker): Aufträge kurz */
.hw-kurz {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.65rem 1.1rem;
  border-bottom: 1px solid #edf0f4; text-decoration: none; color: inherit;
}
.hw-kurz:last-child { border-bottom: none; }
.hw-kurz:hover { background: #f6f8fb; }
.hw-kurz__was { display: flex; flex-direction: column; min-width: 0; }
.hw-kurz__titel { font-weight: 600; color: var(--tinte); overflow-wrap: anywhere; }
.hw-kurz .leise { font-size: 0.85rem; overflow-wrap: anywhere; }
.hw-kurz .hw-chip { flex: none; }
@media (max-width: 600px) { .hw-kurz { flex-wrap: wrap; } }
/* Anmeldung: Passwort vergessen / neues Passwort */
.anmelde-link { margin-top: 0.4rem; }
.anmelde-text { font-size: 0.9rem; color: var(--text-leise); margin: 0 0 1rem; }
.formok { color: var(--bezahlt); font-size: 0.9rem; }