/* ============================================================
   Stratmeyer-Zentrale · Oberflaeche
   © UNFINISHED e.U. - Bülent Toluay

   Das Design ist 1:1 vom Unfinished-Studios-Dashboard uebernommen,
   nicht neu erfunden: warmes Off-White #f0f0ee, Zinc-Palette, weisse
   Karten mit rounded-xl + shadow-sm, Zinc-900 als Knopffarbe, Cyan fuer
   Links, Emerald fuer aktive Zustaende.

   Das Dashboard baut auf Tailwind. Hier gibt es bewusst keinen
   Build-Schritt (das System laeuft spaeter auf einem Rechner beim
   Kunden), deshalb stehen dieselben Werte hier als Tokens.
   Rohe Werte NUR in diesem Token-Block, in allen Regeln var(--token).
   ============================================================ */

:root {
  /* ---- Zinc-Skala, wie im Dashboard ---- */
  --z-50:#fafafa;  --z-100:#f4f4f5; --z-200:#e4e4e7; --z-300:#d4d4d8;
  --z-400:#a1a1aa; --z-500:#71717a; --z-600:#52525b; --z-700:#3f3f46;
  --z-800:#27272a; --z-900:#18181b;

  /* ---- Flaechen ---- */
  --grund:        #f0f0ee;        /* bg-[#f0f0ee] aus dem Dashboard */
  --flaeche:      #ffffff;
  --flaeche-leise:#fafafa;
  --linie:        var(--z-200);
  --linie-fein:   var(--z-100);

  /* ---- Text ---- */
  --text:         var(--z-900);
  --text-leise:   var(--z-600);
  --text-still:   var(--z-500);
  --text-zart:    var(--z-400);

  /* ---- Bedeutungsfarben ---- */
  --knopf:        var(--z-900);
  --knopf-hover:  var(--z-800);
  --auf-knopf:    #ffffff;
  --link:         #0e7490;        /* cyan-700 */
  --gut:          #059669;  --gut-flaeche:  #ecfdf5;  --gut-linie:  #6ee7b7;
  --info:         var(--link); --info-flaeche:#ecfeff; --info-linie: #67e8f9;
  --warn:         #b45309;  --warn-flaeche: #fffbeb;  --warn-linie: #fcd34d;
  --schlecht:     #b91c1c;  --schlecht-flaeche:#fef2f2; --schlecht-linie:#fca5a5;

  /* ---- Abstaende ---- */
  --sp-2xs:.25rem; --sp-xs:.5rem; --sp-s:.75rem; --sp-m:1rem;
  --sp-l:1.25rem;  --sp-xl:1.5rem; --sp-2xl:2rem;

  /* ---- Schrift ---- */
  --schrift: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Die EINE Textgroesse ist --text-sm. Sie steht auf <body> und wird ueberall geerbt.
     Abweichen duerfen nur: Ueberschriften (lg/xl), Kleinteile (xs) und Kennzahlen (2xl). */
  --text-sm:.875rem;      /* DIE Textgroesse (14px) - dasselbe Mass wie das Studio-Dashboard
                             (dort text-sm, 468 Fundstellen) und wie docs/design-regeln.md
                             Regel 10 es beschreibt. Hier aendern = ueberall geaendert. */
  /* Die Skala ist die des Studio-Dashboards (Tailwind), Wert fuer Wert:
     text-xs .75 · text-sm .875 · text-lg 1.125 · text-xl 1.25 · text-2xl 1.5 */
  --text-lg:1.125rem;     /* h2 (Dashboard: text-lg) */
  --text-xl:1.25rem;      /* Kennzahl in der Kachel (Dashboard: text-xl) */
  --text-2xl:1.5rem;      /* Seitentitel h1 (Dashboard: text-2xl, 20 Fundstellen) */
  --text-kreis:.75rem;    /* Kleinteile: Initialen, Zaehler, Kachel-Label (text-xs) */

  /* ---- Rundungen, Schatten ---- */
  --rund-sm:.25rem; --rund-md:.375rem; --rund-lg:.5rem; --rund-xl:.75rem; --rund-voll:999px;
  --schatten-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --schatten-md: 0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .05);

  --hoehe-knopf: 2.25rem;   /* h-9, gilt fuer Knoepfe UND Felder */
  --hoehe-klein: 2rem;      /* h-8 */
  --hoehe-kopf:  3.5rem;    /* h-14, Kopfzeile links UND rechts */
}

* { box-sizing: border-box; }

/* Eingabefelder, Auswahlen und Knoepfe erben Schrift und Groesse NICHT von
   selbst - Browser setzen dort eigene Werte (ca. 13px). Deshalb hier einmal
   zentral geerbt. Das ist keine eigene Groesse, nur die fehlende Vererbung. */
input, select, textarea, button { font: inherit; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--text-sm);   /* DIE Textgroesse. Alles andere erbt sie. */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.011em; line-height: 1.25; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); }
p  { margin: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: var(--rund-sm);
}

/* ══ Rahmen ═══════════════════════════════════════════════ */

.huelle {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-height: 100vh;
}
@media (max-width: 60rem) {
  .huelle { grid-template-columns: 1fr; }
}

/* Rechte Spalte: Kopfleiste oben, darunter der Inhalt.
   Die Kopfleiste ist genauso hoch wie der Seitenleisten-Kopf, damit die
   Trennlinie ueber die ganze Breite auf einer Hoehe durchlaeuft. */
.rechts {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kopfleiste {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  height: var(--hoehe-kopf);
  padding: 0 var(--sp-l);          /* fluchtet mit dem Inhalt darunter */
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
  position: sticky;
  top: 0;
  z-index: 5;
}
/* Der Anlegen-Knopf sitzt am rechten Rand der Kopfleiste. */
/* Aktionsknopf rechts in der Kopfleiste: Plus zum Anlegen auf Listen,
   Stift zum Bearbeiten auf Detailseiten. Eine Klasse fuer beides. */
.kopfleiste__aktion { margin-left: auto; flex: 0 0 auto; }
/* Ist die Suche sichtbar, uebernimmt SIE das Nach-rechts-Schieben und der
   Knopf rueckt direkt neben sie. Sonst haetten beide margin-left:auto und
   der Browser verteilt den Freiraum - die Suche hing dann in der Mitte. */
.kopfsuche:not([hidden]) ~ .kopfleiste__aktion { margin-left: var(--sp-s); }
/* Stehen mehrere Knoepfe nebeneinander, schiebt nur der erste nach rechts. */
.kopfleiste__aktion ~ .kopfleiste__aktion { margin-left: 0; }
@media (max-width: 40rem) { .kopfleiste { padding: 0 var(--sp-s); } }

.seitenleiste {
  background: var(--grund);
  border-right: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  /* Bleibt beim Scrollen stehen: Abmelden und Name sind IMMER sichtbar,
     ohne dass man ans Seitenende scrollen muss (moniert 20.08.).
     Wird das Menue selbst mal laenger als der Bildschirm, scrollt nur es. */
  position: sticky;
  top: 0;
  height: 100vh;
}
.seitenleiste .navi { flex: 1 1 auto; overflow-y: auto; }
.seitenleiste__fuss { margin-top: auto; }
@media (max-width: 60rem) {
  .seitenleiste { border-right: 0; border-bottom: 1px solid var(--linie); }
}

.seitenleiste__kopf {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  height: var(--hoehe-kopf);            /* h-14 wie im Dashboard */
  padding: 0 var(--sp-m);
  border-bottom: 1px solid var(--linie);
}
.seitenleiste__zeichen {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;      /* size-7 */
  border-radius: var(--rund-md);
  background: var(--z-900);
  color: #ffffff;
  flex: 0 0 auto;
}
.seitenleiste__marke {
  font-weight: 600;
  letter-spacing: -.014em;
}

.navi { display: flex; flex-direction: column; gap: .125rem; padding: var(--sp-xs); }

.navi__gruppe {
  padding: var(--sp-s) var(--sp-s) var(--sp-2xs);
  font-weight: 600;
  color: var(--text-zart);
}

.navi__punkt {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  height: var(--hoehe-knopf);
  padding: 0 var(--sp-s);
  border-radius: var(--rund-md);
  color: var(--text-leise);
  transition: background .15s, color .15s;
}
.navi__punkt:hover { background: var(--flaeche); color: var(--text); text-decoration: none; }
.navi__punkt--aktiv { background: var(--flaeche); color: var(--text); font-weight: 500; box-shadow: var(--schatten-sm); }
.navi__punkt svg { flex: 0 0 auto; }
.navi__text { flex: 1 1 auto; }
.navi__zahl {
  /* Dieselbe Pille wie im Studio-Dashboard (dort:
     "rounded-full px-2 py-0.5 text-xs font-medium bg-zinc-100 text-zinc-600").
     Sie zaehlt, was offen ist - sie warnt nicht, deshalb ruhig statt rot. */
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  min-width: 1.5rem;
  padding: .125rem .5rem;
  border-radius: var(--rund-voll);
  background: var(--z-100);
  color: var(--z-600);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.seitenleiste__fuss {
  margin-top: auto;
  border-top: 1px solid var(--linie);
  padding: var(--sp-s);
  display: flex;
  align-items: center;
  gap: var(--sp-s);
}
.seitenleiste__wer { min-width: 0; flex: 1 1 auto; }
.seitenleiste__name {
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seitenleiste__rolle { color: var(--text-still); }

.inhalt {
  /* Gleicher Randabstand wie links: Dort beginnt der Menuetext bei
     --sp-xs (Navi) + --sp-s (Knopf) = --sp-l. Damit fluchten beide Spalten. */
  padding: var(--sp-l);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
  width: 100%;
}
@media (max-width: 40rem) { .inhalt { padding: var(--sp-m); gap: var(--sp-m); } }

/* ══ Namenskreis ══════════════════════════════════════════ */

/* Kleinteile teilen sich EINE Groessen-Angabe (Regel 10). */
.kreis, .navi__zahl { font-size: var(--text-kreis); }

.kreis {
  display: inline-grid;   /* inline: bricht neben Text nicht auf eine eigene Zeile um */
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--rund-voll);
  background: var(--z-200);
  color: var(--text-leise);
  font-weight: 600;
  line-height: 1;          /* Body-Zeilenhoehe (1.55) drueckte die Initialen nach unten */
  letter-spacing: 0;
  flex: 0 0 auto;
}
.kreis--dunkel { background: var(--z-900); color: #ffffff; }

/* ══ Seitenkopf ═══════════════════════════════════════════ */

.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-m);
  margin-bottom: var(--sp-l);   /* derselbe Abstand wie unter Kennzahlen und Filtern */
}
.seitenkopf:last-child { margin-bottom: 0; }

/* Abschnittskopf: Titel eines BLOCKS innerhalb einer Seite (h2), mit
   optionaler Aktion rechts. Bis 29.08. wurde dafuer .seitenkopf missbraucht -
   acht Views hatten dadurch zwei "Seitenkoepfe" uebereinander, und die Regel
   "genau ein h1 je Seite" liess sich nicht durchsetzen. Gleiche Anordnung,
   eigener Name, eigener Abstand. */
.abschnittskopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-m);
  margin-bottom: var(--sp-m);
}
/* Leise Marke ueber einem Block, wenn eine ganze h2 zu laut waere -
   etwa ueber den beiden Kachelreihen der Uebersicht. */
.abschnittsmarke {
  margin: 0 0 var(--sp-xs);
  font-weight: 500;
  color: var(--text-still);
}
.abschnittskopf__zusatz { margin: var(--sp-2xs) 0 0; color: var(--text-still); }
.seitenkopf__zusatz { margin-top: var(--sp-2xs); color: var(--text-still); }

/* ══ Brotkrumen ═══════════════════════════════════════════
   Teilt den Inhaltsbereich oben ab und sagt, wo man steht.
   Gegenstueck zur Gliederung in der Seitenleiste. */

.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2xs);
  color: var(--text-still);
}
.brotkrumen__weg {
  color: var(--text-still);
  text-decoration: none;
}
.brotkrumen__weg:hover { color: var(--link); text-decoration: underline; }
.brotkrumen__trenner { color: var(--text-zart); user-select: none; }
.brotkrumen__hier { color: var(--text); font-weight: 500; }

/* ══ Karte ════════════════════════════════════════════════ */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-xl);
  box-shadow: var(--schatten-sm);
  padding: var(--sp-l);
  margin-bottom: var(--sp-xl);
}
/* Fester Rhythmus IN jeder Karte: zwischen zwei direkten Kindern liegt
   immer eine Luecke (Regel 9). Damit klebt nie wieder ein Hinweistext an
   der Liste oder ein Formular am Text darueber - egal, wer die Karte baut. */
.karte > * + * { margin-top: var(--sp-m); }
.karte > .karte__zwischentitel { margin-top: var(--sp-xl); }
.karte > .karte__zwischentitel:first-child { margin-top: 0; }
.karte:last-child { margin-bottom: 0; }
.karte__titel { margin-bottom: var(--sp-l); }

/* Zwei Karten nebeneinander (50/50); auf schmalen Schirmen untereinander.
   Der Abstand zwischen den Karten entspricht dem normalen Karten-Rhythmus. */
.karten-paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-xl);
  margin-bottom: var(--sp-xl);
}
.karten-paar > .karte { margin-bottom: 0; }
.karten-paar:last-child { margin-bottom: 0; }
@media (max-width: 52rem) {
  .karten-paar { grid-template-columns: 1fr; }
}

/* ══ Unterschrift: Feld zum Zeichnen (Freigabe im Postfach) ═ */

/* Block-Klasse am Formular: Anker fuer das Zeichen-JS in zentrale.js */
.unterschrift { display: block; }
/* Rhythmus IM Formular: alles nach der Zeichenflaeche (Vorschau, Aktionszeile)
   bekommt denselben Abstand wie Karten-Kinder - der Karten-Rhythmus greift
   nur fuer direkte Kinder der Karte, nicht ins Formular hinein. */
.unterschrift .unterschrift__flaeche ~ * { margin-top: var(--sp-m); }
.unterschrift__leeren { flex: none; }
.unterschrift__flaeche {
  display: block;
  width: 100%;
  height: 9rem;
  border: 1px dashed var(--z-300);
  border-radius: var(--rund-lg);
  background: var(--flaeche-leise);
  color: var(--text);           /* Stiftfarbe, liest das JS aus */
  touch-action: none;
  cursor: crosshair;
}
.unterschrift__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
}
/* Angezeigte Unterschrift nach der Freigabe */
.unterschrift__bild { display: block; max-height: 5rem; max-width: 100%; }

/* ══ Kennzahlen ═══════════════════════════════════════════ */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--sp-s);
  margin-bottom: var(--sp-l);
}
.kennzahlen:last-child { margin-bottom: 0; }

.kennzahl {
  /* Masse wie im Studio-Dashboard (dort: p-4 + text-xl statt einer grossen
     Kachel). Eine Kennzahl soll nebenbei lesbar sein, nicht die Seite
     beherrschen - Wunsch Buelent, 28.08. */
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-lg);
  padding: var(--sp-s) var(--sp-m);
}
.kennzahl__zahl {
  display: block;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kennzahl__text {
  display: block;
  margin-top: var(--sp-2xs);
  font-weight: 500;
  color: var(--text-still);
}
.kennzahl--warnung .kennzahl__zahl { color: var(--schlecht); }

/* Steht nichts an, tritt die Kennzahl zurueck. Vorbild: Rentec Direct zeigt
   seine vier Kacheln nur dann kraeftig, wenn es etwas zu tun gibt - sonst
   wirken fuenf Nullen wie ein leeres System, obwohl der Bestand voll ist. */
.kennzahl--ruhig .kennzahl__zahl { color: var(--text-zart); }

/* Kennzahl als Filter: Ein Klick zeigt genau die Zeilen, die die Zahl meint.
   Sonst ist sie Deko (Buelent, 28.08.). Die gewaehlte Kachel ist markiert. */
.kennzahl--gewaehlt { border-color: var(--z-900); box-shadow: inset 0 0 0 1px var(--z-900); }

/* Filterknoepfe wie im Studio-Dashboard (ui.js: uiFilter) - der aktive Knopf
   ist dunkel gefuellt, die uebrigen tragen nur einen Rand. */
/* Knopfleiste als Filter. Steht sie IN der Filterleiste (Regel A1: eine
   Zeile), bringt sie keinen eigenen Abstand mit - den setzt die Leiste. */
.filterknoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-bottom: var(--sp-l); }
.filterleiste .filterknoepfe { margin-bottom: 0; }
.filterknopf {
  display: inline-flex;
  align-items: center;
  height: var(--hoehe-klein);
  padding: 0 var(--sp-s);
  border: 1px solid var(--linie-stark, var(--z-300));
  border-radius: var(--rund-md);
  color: var(--text-leise);
  background: var(--flaeche);
  transition: background .15s, color .15s;
}
.filterknopf:hover { background: var(--flaeche-leise); text-decoration: none; }
/* Der gewaehlte Filter ist ein AUSWAHL-Zustand, kein Primaerknopf. Bis 29.08.
   war er schwarz gefuellt und konkurrierte damit auf jeder Seite mit dem einen
   echten Primaerknopf (Regel A4). Jetzt nach Atlassian: 2px Rand heisst
   "ausgewaehlt", dazu kraeftigere Schrift und ein ruhiger Grund. */
.filterknopf--an {
  background: var(--z-100);
  border-color: var(--knopf);
  border-width: 2px;
  padding: 0 calc(var(--sp-s) - 1px);
  color: var(--text);
  font-weight: 500;
}
.filterknopf--an:hover { background: var(--z-200); }

/* ══ Kontokarte (Zahlungsverkehr) ══════════════════════════
   Aufbau 1:1 vom Studio-Dashboard: Name und IBAN oben, darunter Eingaenge,
   Ausgaenge und Saldo nebeneinander, unten eine Zeile mit Anzahl, Zeitraum
   und dem, was noch Arbeit macht. Dicht statt gross. */
.konten { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--sp-m); margin-bottom: var(--sp-l); }
.konto {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-lg);
  padding: var(--sp-m);
  display: flex;
  flex-direction: column;
  gap: var(--sp-s);
}
.konto__name { font-weight: 600; }
.konto__iban { color: var(--text-still); font-variant-numeric: tabular-nums; }
.konto__werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-s); }
.konto__wert { display: flex; flex-direction: column; gap: .125rem; text-align: right; }
.konto__wert:first-child { text-align: left; }
.konto__beschriftung { color: var(--text-still); }
.konto__zahl { font-weight: 600; font-variant-numeric: tabular-nums; }
.konto__zahl--ein  { color: var(--gut); }
.konto__zahl--aus  { color: var(--schlecht); }
.konto__fuss { display: flex; flex-wrap: wrap; gap: var(--sp-s); align-items: center;
               border-top: 1px solid var(--linie-fein); padding-top: var(--sp-s); color: var(--text-still); }
.konto__hinweis { margin-left: auto; display: flex; gap: var(--sp-xs); }

.fussnote { margin-top: var(--sp-m); color: var(--text-still); }
/* Eine Kachel als Verweis (z. B. "Warten auf Freigabe" -> Postfach) */
a.kennzahl--verweis { text-decoration: none; color: inherit; display: block; }
a.kennzahl--verweis:hover { border-color: var(--z-300); }

/* ══ Liste mit fluchtenden Spalten ════════════════════════ */

.liste {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-xl);
  box-shadow: var(--schatten-sm);
  overflow: hidden;
  margin-bottom: var(--sp-xl);
}
.liste:last-child { margin-bottom: 0; }

.zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem 6rem 6.5rem;
  gap: var(--sp-m);
  align-items: center;
  padding: var(--sp-s) var(--sp-l);
  border-bottom: 1px solid var(--linie-fein);
}
/* Aufgaben: Aufgabe · Gesellschaft · Zustaendig · Faellig · Stand · Aktion. */
/* Stand-Spalte 10rem: die Auswahl ("In Bearbeitung") braucht die Breite */
/* Der Aufgabentitel bekommt mehr Gewicht als die Gesellschaft: Er ist das,
   wonach man sucht, und wurde bei 14px Schrift regelmaessig abgeschnitten.
   Die Gesellschaft behaelt ihre 16rem (Regel 10b, Namen nie abschneiden). */
.zeile--tat { grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 1fr) 6rem 5.5rem 5.5rem 9.5rem; }

/* Werte, die nie umbrechen sollen (Namen): eine Zeile, notfalls mit Auslassung. */
.zeile__wert--einzeilig {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zeile:last-child { border-bottom: 0; }

/* Kopfzeile einer Tabelle: GENAUSO hoch wie die Datenzeilen (Carbon: "Do use
   the same row height for the table and header rows"), nur grau hinterlegt und
   leiser gesetzt. Bis 29.08. war sie hoeher - das ergab zusammen mit den
   uneinheitlichen Zeilen vier verschiedene Zeilenhoehen in der Anwendung. */
.zeile--kopf {
  background: var(--z-100);
  border-bottom: 1px solid var(--linie);
  font-weight: 500;
  color: var(--text-still);
}
/* In der Kopfzeile zaehlt NUR der Kopfzeilen-Stil: EINE Schriftgroesse fuer
   ALLE Spaltentitel, egal welche Klassen die Zelle sonst traegt.

   Warum doppelte Klasse (.zeile.zeile--kopf)?
   Der erste Anlauf am 17.08. hiess nur ".zeile--kopf > *" und blieb wirkungslos:
   Diese Regel und ".zeile__wert" haben dieselbe Spezifitaet, also entscheidet
   allein die Reihenfolge im CSS - und .zeile__wert steht weiter unten, gewinnt
   also mit seiner groesseren Schrift. Ergebnis waren zwei Groessen in einer
   Kopfzeile (erneut moniert 18.08.). Mit der doppelten Klasse ist die Regel
   staerker und die Reihenfolge egal. Nicht wieder abschwaechen. */
/* Kopfzeilen sind normaler Fliesstext (Wunsch Buelent 20.08.) - keine
   Grossbuchstaben, keine Sperrung. Abgehoben nur durch Gewicht, gedaempfte
   Farbe und den grauen Hintergrund der Kopfzeile. */
.zeile.zeile--kopf > * {
  font-weight: 500;
  color: var(--text-still);
  font-variant-numeric: normal;
}
@media (max-width: 52rem) {
  .zeile { grid-template-columns: 1fr; gap: var(--sp-xs); padding: var(--sp-m) var(--sp-l); }
  .zeile--kopf { display: none; }
}

.zeile__haupt { min-width: 0; }
/* Ueberfahren immer sichtbar - auch bei Zeilen ohne Verweis. Carbon: "The
   data table's row hover state should always be enabled as it can help the
   user visually scan the columns of data in a row even if the row is not
   interactive." Die Kopfzeile ist ausgenommen. */
.zeile:not(.zeile--kopf):hover { background: var(--z-50); }

.zeile__titel { font-weight: 500;
  display: flex; align-items: center; gap: var(--sp-xs);
  flex-wrap: nowrap; min-width: 0;
}
.zeile__titel > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile__titel a { color: inherit; }
/* EIN Verweis-Stil in Listen (B2). Bis 29.08. standen blaue Verweise und
   schwarz-fette Titel nebeneinander - zwei Signale fuer dieselbe Sache.
   Blau bleibt Fliesstext-Verweisen vorbehalten. */
.zeile a, .zeile__wert a { color: inherit; text-decoration: none; }
.zeile a:hover, .zeile__wert a:hover { text-decoration: underline; }
.zeile__info {
  margin-top: .125rem;
  color: var(--text-still);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Zahlen und Daten rechtsbuendig, die Beschriftung zieht mit. */
/* GRUNDREGEL: In Tabellen bricht keine Zelle um. Zu langer Text wird mit
   "..." abgeschnitten und steht per title-Attribut vollstaendig im Tooltip.
   Grund: Sobald eine Zelle zweizeilig wird, springt die Zeilenhoehe und die
   Liste wirkt unruhig (moniert 18.08.). Wenn Text regelmaessig abgeschnitten
   wird, ist die SPALTE zu schmal - dann das Grid anpassen, nicht den Umbruch
   erlauben. */
.zeile__wert {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}
/* Textspalten (Namen, Gesellschaften) stehen linksbuendig, nicht wie Zahlen rechts. */
/* Grundregel: .zeile__wert ist RECHTSbuendig mit Ziffernform gleicher Breite.
   Das gilt fuer alles Zaehlbare - Nummern, Anzahlen, Betraege, Prozente.
   Nur echter Text bekommt zusaetzlich --links. Betraege zusaetzlich --geld,
   damit Nachkommastellen und Waehrungszeichen untereinander stehen. */
.zeile__wert--links { text-align: left; }
.zeile__wert--geld {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.zeile__wert--warnung { color: var(--schlecht); font-weight: 500; }
.zeile__aktion { display: flex; justify-content: flex-end; gap: var(--sp-xs); }
@media (max-width: 52rem) {
  .zeile__wert, .zeile__aktion { text-align: left; justify-content: flex-start; }
}

/* ══ Zustands-Merker ══════════════════════════════════════ */

.stand {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .0625rem .4375rem;
  border-radius: var(--rund-voll);
  border: 1px solid transparent;
  font-weight: 500;
  white-space: nowrap;
}
.stand::before { content: ""; width: .375rem; height: .375rem; border-radius: var(--rund-voll); background: currentColor; }

.stand--offen    { background: var(--z-100);          color: var(--text-leise); border-color: var(--z-200); }
.stand--laeuft   { background: var(--warn-flaeche);   color: var(--warn);       border-color: var(--warn-linie); }
.stand--erledigt { background: var(--gut-flaeche);    color: var(--gut);        border-color: var(--gut-linie); }
.stand--neu      { background: #ecfeff;               color: var(--link);       border-color: #67e8f9; }
.stand--wartet   { background: var(--warn-flaeche);   color: var(--warn);       border-color: var(--warn-linie); }
.stand--dringend { background: var(--schlecht-flaeche); color: var(--schlecht); border-color: var(--schlecht-linie); }

/* ══ Knoepfe ══════════════════════════════════════════════ */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  height: var(--hoehe-knopf);
  padding: 0 var(--sp-s);
  border: 1px solid transparent;
  border-radius: var(--rund-md);
  background: var(--knopf);
  color: var(--auf-knopf);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.knopf:hover { background: var(--knopf-hover); color: var(--auf-knopf); text-decoration: none; }

.knopf--neutral {
  background: var(--flaeche);
  color: var(--text);
  border-color: var(--linie);
}
.knopf--neutral:hover { background: var(--z-50); color: var(--text); border-color: var(--z-300); }

.knopf--gut { background: var(--gut); }
.knopf--gut:hover { background: #047857; }

.knopf--klein { height: var(--hoehe-klein); padding: 0 var(--sp-xs); }
.knopf--zeichen { width: var(--hoehe-klein); padding: 0; flex: 0 0 auto; }
/* Ein Knopf, der bewusst nicht anklickbar ist (z. B. der eigene Zugang):
   gleiche Groesse wie die anderen, damit die Zeile ruhig bleibt. */
.knopf:disabled { opacity: .55; cursor: default; }

/* ══ Formulare ════════════════════════════════════════════ */

.beschriftung {
  display: block;
  margin-bottom: var(--sp-2xs);
  font-weight: 500;
  color: var(--text-still);
  white-space: nowrap;       /* Beschriftung bricht nie um */
}

.feld {
  display: block;
  width: 100%;
  height: var(--hoehe-knopf);          /* gleiche Hoehe wie die Knoepfe */
  padding: 0 var(--sp-s);
  border: 1px solid var(--z-300);
  border-radius: var(--rund-md);
  background: var(--flaeche);
  color: var(--text);
}
textarea.feld { height: auto; padding: var(--sp-xs) var(--sp-s); line-height: 1.5; resize: vertical; }
select.feld { cursor: pointer; }
.feld::placeholder { color: var(--text-zart); }
/* Auswahlfelder: das native OS-Aussehen abschalten, damit sie ueberall wie
   die uebrigen Felder wirken; eigener Pfeil rechts (eingebettetes SVG). */
select.feld {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-s) center;
}

/* Datumsfelder: WebKit setzt den Wert sonst oben in die Zeile statt mittig */
input[type="date"].feld { display: flex; align-items: center; }
input[type="date"].feld::-webkit-date-and-time-value { margin: 0; }

/* ══ Datumwahl: Kalender im Dashboard-Look ════════════════ */
/* Das OS-eigene Datumsfeld wirkt fremd in der Oberflaeche. Sichtbar ist ein
   eigenes Feld mit aufklappendem Kalender (public/js/zentrale.js); das native
   Feld bleibt unsichtbar im Formular und traegt den Wert beim Absenden. */

.datumwahl { position: relative; }
/* Doppelte Klasse noetig: input[type="date"].feld setzt display:flex und
   gewinnt sonst gegen den einfachen Klassen-Selektor. */
input[type="date"].datumwahl__nativ,
input[type="time"].datumwahl__nativ { display: none; }
.datumwahl__feld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xs);
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.datumwahl__feld--leer { color: var(--text-zart); }   /* wie ein Platzhalter */
.datumwahl__feld svg { color: var(--text-still); flex: none; }

.datumwahl__panel {
  position: absolute;
  top: calc(100% + var(--sp-2xs));
  left: 0;
  z-index: 20;
  width: 16.5rem;
  padding: var(--sp-s);
  display: flex;
  flex-direction: column;
  gap: var(--sp-s);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-lg);
  box-shadow: var(--schatten-md);
}
/* display:flex wuerde das hidden-Attribut sonst ueberstimmen
   (dieselbe Falle wie bei der Kopfsuche am 20.08.). */
.datumwahl__panel[hidden] { display: none; }

/* Uhrzeit im selben Baustein: scrollende Liste statt Kalender-Gitter */
.datumwahl__panel--zeit {
  width: 100%;
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--sp-2xs);
  gap: var(--sp-2xs);
}
.datumwahl__zeit {
  padding: var(--sp-xs);
  border: 0;
  border-radius: var(--rund-md);
  background: none;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.datumwahl__zeit:hover { background: var(--z-100); }
.datumwahl__zeit--gewaehlt,
.datumwahl__zeit--gewaehlt:hover { background: var(--gut); color: var(--auf-knopf); }

.datumwahl__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xs);
}
.datumwahl__monat { font-weight: 500; }
.datumwahl__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--rund-md);
  background: var(--flaeche);
  color: var(--text-leise);
  cursor: pointer;
}
.datumwahl__nav:hover { background: var(--z-100); }

.datumwahl__wochentage,
.datumwahl__gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-2xs);
}
.datumwahl__wochentage span { text-align: center; color: var(--text-still); }

.datumwahl__tag {
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;      /* gleiche Masse wie --heute, nichts springt */
  border-radius: var(--rund-md);
  background: none;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.datumwahl__tag:hover { background: var(--z-100); }
.datumwahl__tag--heute { border-color: var(--linie); }
.datumwahl__tag--gewaehlt,
.datumwahl__tag--gewaehlt:hover { background: var(--gut); color: var(--auf-knopf); }

.datumwahl__fuss {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-xs);
}

.feld:focus-visible { outline: 2px solid var(--link); outline-offset: -1px; border-color: var(--link); }

.hinweis { margin-top: var(--sp-2xs); margin-bottom: var(--sp-m); color: var(--text-still); }
.hinweis:last-child { margin-bottom: 0; }

/* Formular-Raster: alle Spalten gleich breit, alle Felder oben in einer Flucht.
   Die Spaltenzahl ergibt sich aus der Anzahl der Kinder (auto-fit). Hinweise
   unter einem Feld verschieben die Nachbarfelder nicht, weil oben ausgerichtet
   wird und jede Beschriftung genau eine Zeile hat. */
.formzeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--sp-m);
  align-items: start;
  margin-bottom: var(--sp-m);
}
.formzeile:last-of-type { margin-bottom: var(--sp-l); }
.formzeile > * { min-width: 0; }
/* Eine bewusst schmale Einzelzeile, z. B. fuer eine Stand-Auswahl. */
.formzeile--kurz { grid-template-columns: minmax(0, 14rem); }

/* Aktionen sitzen rechts unten. */
.aktionen {
  display: flex;
  align-items: center;      /* auch Wahl-Kacheln fluchten mit den Knoepfen */
  justify-content: flex-end;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-l);
}
.aktionen:last-child { margin-bottom: 0; }

/* ══ Meldungen ════════════════════════════════════════════ */

.meldung {
  padding: var(--sp-s) var(--sp-m);
  border: 1px solid;
  border-radius: var(--rund-lg);
  margin-bottom: var(--sp-m);
}
.meldung:last-child { margin-bottom: 0; }
.meldung--fehler  { background: var(--schlecht-flaeche); border-color: var(--schlecht-linie); color: var(--schlecht); }
.meldung--hinweis { background: var(--warn-flaeche);     border-color: var(--warn-linie);     color: var(--warn); }
.meldung--gut     { background: var(--gut-flaeche);      border-color: var(--gut-linie);      color: var(--gut); }

/* ══ Rollen-Seite: Rechte als anklickbare Karten ══════════ */

.rolle__kopf {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-l);
}

.rechte {
  display: grid;
  grid-template-columns: 1fr;   /* eine Karte je Zeile, immer einzeilig */
  gap: var(--sp-s);
  margin-bottom: var(--sp-l);
}
.rechte:last-child { margin-bottom: 0; }

/* Die echte Checkbox ist unsichtbar, die Karte zeigt den Zustand. */
.recht {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  padding: var(--sp-s);
  border: 1px solid var(--linie);
  border-radius: var(--rund-lg);
  background: var(--flaeche);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.recht:hover { border-color: var(--z-300); }
.recht input { position: absolute; opacity: 0; pointer-events: none; }

.recht__haken {
  display: grid;
  place-items: center;
  width: 1.125rem; height: 1.125rem;
  margin-top: .0625rem;
  border: 1.5px solid var(--z-300);
  border-radius: var(--rund-sm);
  background: var(--flaeche);
  color: transparent;
  flex: 0 0 auto;
  transition: background .15s, border-color .15s, color .15s;
}
.recht__text { line-height: 1.4; white-space: nowrap; }
/* Der Zusatz steht rechts in derselben Zeile, nie darunter. */
.recht__zusatz {
  margin-left: auto;
  color: var(--text-still);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Aktiv: gruener Rand, leichte gruene Flaeche, Haken weiss auf Gruen. */
.recht:has(input:checked) { border-color: var(--gut); background: var(--gut-flaeche); }
.recht:has(input:checked) .recht__haken { background: var(--gut); border-color: var(--gut); color: #ffffff; }
.recht:has(input:checked) .recht__text { color: var(--text); }

.recht--fest { cursor: default; opacity: .85; }
.recht--fest:hover { border-color: var(--gut); }

.recht:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }

/* ══ Gespraechsverlauf ════════════════════════════════════ */

.verlauf { display: flex; flex-direction: column; gap: var(--sp-m); margin-bottom: var(--sp-xl); }
.verlauf:last-child { margin-bottom: 0; }

.nachricht { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--sp-s); }
.nachricht__koerper {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-xl);
  box-shadow: var(--schatten-sm);
  padding: var(--sp-m);
}
.nachricht--eigen .nachricht__koerper { background: var(--z-50); }
.nachricht__kopf {
  display: flex; flex-wrap: wrap; gap: var(--sp-xs);
  align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-xs);
}
.nachricht__wer { font-weight: 600; }
.nachricht__rolle { font-weight: 400; color: var(--text-zart); }
.nachricht__wann { color: var(--text-zart); font-variant-numeric: tabular-nums; }
.nachricht__text { white-space: pre-wrap; }

/* ══ Leerer Zustand ═══════════════════════════════════════ */

.leer { padding: var(--sp-2xl) var(--sp-l); text-align: center; color: var(--text-still); }
.leer p { margin-bottom: var(--sp-2xs); }
.leer p:last-child { margin-bottom: 0; }

/* ══ Anmeldeseite ═════════════════════════════════════════ */

.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-m); }
.anmeldung__karte { width: 100%; max-width: 22rem; }
.anmeldung__kopf { display: flex; align-items: center; gap: var(--sp-s); margin-bottom: var(--sp-l); }

/* ══ Hinweis auf Beispieldaten ════════════════════════════ */

.probe {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  background: var(--warn-flaeche);
  border: 1px solid var(--warn-linie);
  color: var(--warn);
  border-radius: var(--rund-lg);
  padding: var(--sp-xs) var(--sp-m);
  margin-bottom: var(--sp-m);
}
.probe:last-child { margin-bottom: 0; }

/* ══ Automatik-Seite ══════════════════════════════════════ */

/* Liste innerhalb einer Karte: kein doppelter Schatten, nur feine Kontur. */
.liste--eingebettet {
  box-shadow: none;
  margin-bottom: var(--sp-l);
}

.karte__zwischentitel {
  /* Trennt zwei Abschnitte in derselben Karte: oben deutlich Luft, unten der
     normale Feldabstand. Ohne den oberen Abstand klebt die Ueberschrift am
     Feld darueber (moniert 17.08.). */
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-m);
}
.karte__zwischentitel:first-of-type { margin-top: 0; }

/* Tickets: Betreff · Dringlichkeit · Beitraege · Zuletzt · Stand. */
.zeile--ticket { grid-template-columns: minmax(0, 1fr) 6.5rem 5rem 5.5rem 7.5rem 6.5rem; }
@media (max-width: 52rem) {
  .zeile--ticket { grid-template-columns: 1fr; }
}

/* .zeile--quelle steht weiter unten bei den Postfach-Rastern (3 Spalten:
   Pfad, Hinweis, Aktion). Hier stand bis 29.08. eine zweite Fassung mit vier
   Spalten - ein totes Raster, das die Kopfzeile nicht traf. */
@media (max-width: 52rem) {
  .zeile--quelle { grid-template-columns: 1fr; }
}

/* Drei Spalten: Gesellschaft · Mandant · Adressfeld. */
.zeile--datev { grid-template-columns: minmax(0, 1fr) 5.5rem minmax(0, 16rem); }
@media (max-width: 52rem) {
  .zeile--datev { grid-template-columns: 1fr; }
}

.abstand-unten { margin-bottom: var(--sp-l); }

/* ══ Prüfliste ════════════════════════════════════════════ */

.beleg__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-s);
  margin-bottom: var(--sp-l);
}

.beleg__felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--sp-s);
  margin-bottom: var(--sp-l);
}
.beleg__feld {
  border: 1px solid var(--linie);
  border-radius: var(--rund-lg);
  padding: var(--sp-s);
  background: var(--flaeche-leise);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
}
/* Das eine unsichere Feld sticht heraus — der Rest bleibt ruhig. */
.beleg__feld--unsicher {
  border-color: var(--warn-linie);
  background: var(--warn-flaeche);
}
.beleg__feld--unsicher .beschriftung { color: var(--warn); }
.beleg__wert { font-weight: 600; }
.beleg__wert--zahl { font-variant-numeric: tabular-nums; text-align: left; }

.beleg__hinweis {
  color: var(--text-still);
  margin-bottom: var(--sp-l);
}

.beleg__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-m);
}
.beleg__wahl { flex: 0 1 16rem; min-width: 0; }
.beleg__aktion .aktionen { margin-left: auto; margin-bottom: 0; }

/* ══ Automatik: Stand + Laeufe ════════════════════════════ */

.ampel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-weight: 600;
}
.ampel::before {
  content: "";
  width: .625rem; height: .625rem;
  border-radius: var(--rund-voll);
  background: currentColor;
}
.ampel--gut  { color: var(--gut); }
.ampel--aus  { color: var(--text-zart); }

.zeile--lauf { grid-template-columns: minmax(0, 1fr) 6rem 5rem 6.5rem; }

/* Mieter am Objekt: Name | Wohnung | seit | Kaltmiete | Stand */
.zeile--mieter { grid-template-columns: minmax(0, 1fr) 9rem 6.5rem 7rem 6.5rem; }
@media (max-width: 60rem) { .zeile--mieter { grid-template-columns: 1fr; } }

/* Mietzahlung: Monat | Soll | Eingegangen | am | Stand */
.zeile--zahlung { grid-template-columns: minmax(0, 1fr) 7rem 7rem 6.5rem 7.5rem; }
@media (max-width: 52rem) { .zeile--zahlung { grid-template-columns: 1fr; } }

/* Abgelegtes Dokument: Dateiname | wann hochgeladen */
.zeile--dokument { grid-template-columns: minmax(0, 1fr) 8rem; }
@media (max-width: 40rem) { .zeile--dokument { grid-template-columns: 1fr; } }

/* Mieterliste: Name | Objekt | Wohnung | seit | Kaltmiete | Miete | Stand */
.zeile--mieterliste { grid-template-columns: minmax(0, 1fr) minmax(0, 12rem) 7rem 6.5rem 7rem 6.5rem 6.5rem; }
/* Ohne Zahlungsstand faellt eine Spalte weg; der Platz geht an Mieter,
   Objekt und Wohnung - gemessen: Mieternamen bis 26 Zeichen. */
.zeile--mieterliste-ohne-miete { grid-template-columns: minmax(0, 1.3fr) minmax(0, 13rem) 8rem 6.5rem 7.5rem 6.5rem; }
@media (max-width: 68rem) { .zeile--mieterliste { grid-template-columns: 1fr; } }
@media (max-width: 52rem) { .zeile--lauf { grid-template-columns: 1fr; } }

/* ══ Kleinteile ═══════════════════════════════════════════ */

.leise { color: var(--text-still); }
.stapel { display: flex; flex-direction: column; gap: var(--sp-m); }
.marke {
  display: inline-block;
  white-space: nowrap;
  background: var(--z-100);
  border: 1px solid var(--z-200);
  color: var(--text-still);
  border-radius: var(--rund-sm);
  padding: 0 .375rem;
}

/* ══ Ergaenzungen ═════════════════════════════════════════ */

/* Hinweistext in der Zeile darf umbrechen: er ist Inhalt, nicht Beiwerk. */
.zeile__info--voll {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.5;
}

/* Block aus Beschriftung und grossem Textfeld. */
.frage { margin-bottom: var(--sp-l); }
.frage:last-child { margin-bottom: 0; }
.feld--gross { min-height: calc(var(--hoehe-knopf) * 2.5); }

/* Unternehmen: Firma · Sitz · Mandant · Stand · Aktion. */
/* Firmenzeile: der Name bekommt den ganzen Rest, damit er einzeilig bleibt. */
/* Ausstattungsmerkmale einer Wohnung: anklickbare Kacheln mit Symbol. */
.merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--sp-xs);
  margin-top: var(--sp-s);      /* Abstand zum Text darueber */
  margin-bottom: var(--sp-m);
}
.merkmal {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-s);
  border: 1px solid var(--linie);
  border-radius: var(--rund-lg);
  background: var(--flaeche);
  cursor: pointer;
}
/* Breite Variante: zwei Kacheln nebeneinander, damit lange Namen
   (z. B. "Christian Stratmeyer Immobilien") vollstaendig lesbar bleiben. */
.merkmale--breit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 52rem) { .merkmale--breit { grid-template-columns: 1fr; } }

.merkmal:hover { border-color: var(--text-zart); }
.merkmal:has(input:checked) {
  border-color: var(--gut);
  background: var(--gut-flaeche);
}
/* Keine sichtbare Checkbox (Wunsch 20.08.): die gruene Kachel selbst
   zeigt die Auswahl - .merkmal:has(input:checked) faerbt sie. */
.merkmal input { display: none; }
.merkmal:has(input:checked) .merkmal__text { color: var(--gut); font-weight: 500; }
.merkmal__zeichen { flex: 0 0 auto; }
.merkmal__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merkmale--breit .merkmal { align-items: flex-start; padding: var(--sp-s); }
.merkmale--breit .merkmal__text { white-space: normal; overflow: visible; }
/* Firmennummer: KEINE eigene Schriftangabe - dieselbe wie ueberall (Body).
   Nur die feste Breite, damit die Namen daneben buendig beginnen. */
.merkmale--breit .merkmal__zeichen { min-width: 3rem; }

/* Filterleiste ueber Listen: Auswahlfelder, die beim Aendern sofort filtern */
.filterleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-m);
}
.feld--klein { height: var(--hoehe-klein); width: auto; padding: 0 var(--sp-s); }

/* Suchwahl: durchsuchbare Auswahl fuer lange Listen. Tippen filtert,
   Pfeiltasten bewegen, Enter waehlt den markierten (oder ersten) Treffer. */
.suchwahl { position: relative; }
.suchwahl__liste {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  max-height: 14rem;
  overflow-y: auto;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-md);
  box-shadow: var(--schatten-md);
  z-index: 20;
}
.suchwahl__liste[hidden] { display: none; }
.suchwahl__eintrag {
  padding: var(--sp-xs) var(--sp-s);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suchwahl__eintrag:hover,
.suchwahl__eintrag--aktiv { background: var(--z-100); }
.suchwahl__eintrag[hidden] { display: none; }

/* Ablage: Drag-&-Drop-Zone fuer Uploads. Hineinziehen ODER anklicken -
   beim Loslassen/Auswaehlen laedt sie sofort hoch (kein extra Knopf). */
.ablage {
  display: grid;
  place-items: center;
  gap: var(--sp-2xs);
  padding: var(--sp-l);
  border: 2px dashed var(--z-300);
  border-radius: var(--rund-lg);
  background: var(--flaeche-leise);
  color: var(--text-still);
  text-align: center;
  cursor: pointer;
}
.ablage--aktiv { border-color: var(--gut); background: var(--gut-flaeche); color: var(--gut); }
.ablage input { display: none; }
.ablage--schmal { padding: var(--sp-s); }

/* Personen-Auswahl als kompakte Chips: Kreis + Name, anklickbar.
   Die Checkbox selbst ist unsichtbar - der Zustand zeigt sich am Chip. */
.personen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-m);
}
.person { cursor: pointer; display: inline-flex; }
.person input { position: absolute; opacity: 0; pointer-events: none; }
.person .kreis { border: 2px solid transparent; }
.person:hover .kreis { border-color: var(--text-zart); }
.person:has(input:checked) .kreis { background: var(--gut); color: #ffffff; }

/* Mehrere Zustaendige als Initialen-Kreise nebeneinander */
.kreise { display: inline-flex; gap: .1875rem; vertical-align: middle; }

/* Suche in der Kopfleiste: schlankes Feld zwischen Brotkrumen und +-Knopf */
/* Ohne diese Regel gewinnt display:grid der Zeile gegen das hidden-Attribut -
   die Suche filterte dann zwar, aber nichts verschwand (Fehler vom 20.08.). */
.liste .zeile[hidden] { display: none; }

/* Der gefundene Suchbegriff wird in den Zeilen gelb markiert */
mark.fund {
  background: var(--warn-linie);
  color: inherit;
  border-radius: var(--rund-sm);
  padding: 0 .0625rem;
}

.kopfsuche {
  position: relative;              /* Anker fuer die Lupe im Feld */
  margin-left: auto;               /* rechtsbuendig, vor dem +-Knopf */
  color: var(--text-still);
}
.kopfsuche > svg {
  position: absolute;
  left: var(--sp-xs);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.kopfsuche__feld {
  border: 1px solid var(--linie);
  border-radius: var(--rund-md);
  background: var(--flaeche);
  height: var(--hoehe-klein);
  padding: 0 var(--sp-s) 0 1.75rem;   /* Platz fuer die Lupe links im Feld */
  width: 13rem;
  font: inherit;
  color: var(--text);
}
.kopfsuche__feld:focus-visible { outline: 2px solid var(--link); outline-offset: -1px; border-color: var(--link); }

/* Suche in der Seitenleiste: durchsucht ALLE Bereiche. Gleicher Aufbau wie
   .kopfsuche, nur volle Breite statt rechtsbuendig. */
.seitensuche {
  position: relative;                /* Anker fuer die Lupe im Feld */
  margin: var(--sp-s) var(--sp-s) var(--sp-m);
  color: var(--text-still);
}
.seitensuche > svg {
  position: absolute;
  left: var(--sp-xs);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.seitensuche__feld {
  border: 1px solid var(--linie);
  border-radius: var(--rund-md);
  background: var(--flaeche);
  height: var(--hoehe-klein);
  padding: 0 var(--sp-s) 0 1.75rem;
  width: 100%;
  font: inherit;
  color: var(--text);
}
.seitensuche__feld:focus-visible { outline: 2px solid var(--link); outline-offset: -1px; border-color: var(--link); }

/* Treffer der Suche: Bereich, Titel, Zusatz - eine Zeile je Fund */
.treffer { display: block; padding: var(--sp-xs) 0; border-bottom: 1px solid var(--linie); }
.treffer:last-child { border-bottom: 0; }
.treffer__titel { margin: 0; color: var(--link); }
.treffer__info { margin: var(--sp-2xs) 0 0; color: var(--text-still); }

/* Systemprotokoll: Zeilen umbruchsicher, lange Pfade scrollen horizontal */
.protokoll { max-height: 32rem; overflow: auto; }
.protokoll__zeile { white-space: pre; margin: 0 0 var(--sp-2xs); color: var(--text-leise); }
.einzug { color: var(--text-leise); }

/* Chat an der Aufgabe: Eingabezeile mit Senden-Knopf nebeneinander */
.chatzeile { display: flex; gap: var(--sp-xs); align-items: center; }
.chatzeile .feld { flex: 1 1 auto; }
.chatzeile .knopf { flex: 0 0 auto; }
.verlauf--eingebettet { max-height: 24rem; overflow-y: auto; }

/* Postfach: Eingang · Quelle · Kategorie · Gesellschaft · Eingegangen · Stand */
/* Eingang zweizeilig (Betreff + Gesellschaft als Untertext), dadurch ohne
   eigene Gesellschafts-Spalte - mehr Platz fuer den Betreff (Wunsch 21.08.). */
.zeile--post { grid-template-columns: minmax(0, 1fr) 8.5rem 6rem 7rem 8.5rem 7.5rem; }
.zeile--quelle { grid-template-columns: minmax(0, 1fr) 12rem 7rem; }

/* Eingebettete Dokument-Vorschau (PDF) */
.vorschau {
  width: 100%;
  height: 34rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-md);
}

/* Uebersicht 'Als Naechstes faellig': Aufgabe · Gesellschaft · Zustaendig · Faellig · Stand */
/* Stand-Spalte 8.5rem: die Pille "In Bearbeitung" braucht die Breite */
.zeile--start { grid-template-columns: minmax(0, 1fr) minmax(18rem, 1.1fr) 6rem 5.5rem 8.5rem; }

/* Kompakte Zweispalter in halben Karten (Uebersicht: Heute / Zuletzt erledigt) */
.zeile--kurz { grid-template-columns: minmax(0, 1fr) 8.5rem; }
@media (max-width: 52rem) {
  .zeile--kurz { grid-template-columns: 1fr; }
}

/* Hausverwaltung: Betreff · Art · Quelle · Dringlichkeit · Fotos · Zuletzt · Stand */
.zeile--anliegen { grid-template-columns: minmax(12rem, 1fr) 6.5rem 7rem 7rem 4rem 8.5rem 6rem; }

/* Fotogalerie eines Anliegens: feste Kachelhoehe, Ausschnitt statt Verzerrung */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--sp-s);
}
.galerie__bild img {
  width: 100%;
  height: 8rem;
  object-fit: cover;
  border-radius: var(--rund-md);
  border: 1px solid var(--linie);
  display: block;
}

/* Mietverhaeltnisse: Mieter · Von · Bis · Kaltmiete · Stand */
.zeile--vertrag { grid-template-columns: minmax(10rem, 1fr) 6rem 6rem 7rem 6rem 10rem; }

/* Objekte: Objekt · Ort · Gesellschaft · Einheiten · Verkehrswert · Stand · Aktion */
/* Die Gesellschaftsspalte braucht ihre 16rem (Regel 10b) - mit 12rem wurden
   "Christian Stratmeyer (privat Est)" und "ES Ernst Stratmeyer Immobilien GmbH"
   abgeschnitten. Der Platz kommt aus Stand und Aktion, die nur ein Zeichen zeigen. */
/* Buchungsliste: Absender+Zweck, Konto, Datum, Betrag, Zuordnung. */
/* Gemessen am Inhalt: Absender bis 24 Zeichen, Zweck bis 30 (beide in der
   ersten Spalte untereinander), Kontoname bis ~25, Datum 8, Betrag 12.
   Deshalb bekommt die Buchung das Doppelte des Kontos, die drei rechten
   Spalten nur so viel, wie ihr laengster Wert braucht. */
.zeile--buchung { grid-template-columns: minmax(16rem, 2fr) minmax(9rem, 1fr) 5.5rem 7rem 9rem; }
/* Objekte: Objekt · Art · Ort · Gesellschaft · Einheiten · Verkehrswert · Aktion.
   SIEBEN Spalten, nicht acht. Mit der frueheren Stand-Spalte kam die Zeile auf
   1048px in einer 1000px breiten Karte und lief rechts heraus - der Spaltenkopf
   endete sichtbar mit "A...". "Verkauft" steht jetzt im Filter (Regel C1). */
.zeile--objekt  { grid-template-columns: minmax(0, 1.4fr) 5.5rem 6rem minmax(16rem, 1fr) 4.5rem 7rem 4rem; }
/* Ohne die Stand-Spalte geht deren Breite an den Objektnamen. */
.zeile--still > * { color: var(--text-still); }
.zeile--objekt-ohne-stand { grid-template-columns: minmax(9rem, 1.5fr) 6rem 6.5rem minmax(16rem, 1fr) 4rem 7rem 4rem; }

/* Objekte innerhalb einer Gesellschaft: Adresse, Ort, Einheiten, Vermietung, Wert. */
.zeile--gesobjekt { grid-template-columns: minmax(12rem, 1fr) 8rem 6rem 7rem 9rem; }
/* Einheiten innerhalb eines Objekts */
.zeile--einheit { grid-template-columns: minmax(8rem, 1fr) minmax(12rem, 1.2fr) 7rem 6rem; }
/* Firmen-Nr. steht vorn: danach wird gesucht und sortiert (Wunsch Bülent, 28.08.). */
.zeile--firma { grid-template-columns: 5rem minmax(16rem, 1fr) 10rem 6rem 5rem 9.5rem; }
.zeile--firma .zeile__titel a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* Benutzer: Name · Rolle · Gesellschaft · Zugang.
   Die Aktionsspalte fasst zwei Knoepfe nebeneinander, deshalb 14rem —
   zu schmal, und die Spalten fluchten nicht mehr mit der Kopfzeile. */
/* Benutzer: Name · E-Mail · Rolle · Status · Gesellschaften · Aktion.
   Die E-Mail hat eine eigene Spalte (statt zweiter Zeile unter dem Namen) -
   sonst ist diese Zeile 76px hoch und damit die hoechste der Anwendung. */
/* Rollen-Kurzuebersicht auf der Benutzerseite. */
/* Dateipfade: gleiche Schrift wie alles andere (Regel C5, kein zweites
   font-family), nur leiser gesetzt. Vorher stand hier <code> in Monospace. */
.pfad { color: var(--text-leise); word-break: break-all; }

.zeile--rollenkurz { grid-template-columns: minmax(0, 1fr) 6rem 7rem 6.5rem; }
.zeile--nutzer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 9rem 7.5rem 7rem 6.5rem; }

/* Meetings: Meeting (zweizeilig, Gesellschaft als Untertext) · Teilnehmer ·
   Datum (mit Uhrzeit, 8,5rem) · To-dos */
.zeile--meeting { grid-template-columns: minmax(0, 1fr) 7rem 8.5rem 7rem; }
@media (max-width: 52rem) {
  .zeile--meeting { grid-template-columns: 1fr; }
}

/* To-dos in einem Meeting: To-do · Zustaendig · Faellig · Stand */
.zeile--mtodo { grid-template-columns: minmax(0, 1fr) 8rem 6rem 6rem; }
@media (max-width: 52rem) {
  .zeile--mtodo { grid-template-columns: 1fr; }
}

/* Neuerungen: Bereich links in fester Spalte, Beschreibung darf umbrechen
   (Fliesstext in einer Karte, keine Tabellenzeile). */
.neuerung {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--sp-m);
}
.neuerung__bereich { color: var(--text-still); }
.neuerung__text { margin: 0; color: var(--text-leise); }
@media (max-width: 52rem) {
  .neuerung { grid-template-columns: 1fr; gap: var(--sp-2xs); }
}

/* Nummerierte Liste in einer Karte (Erste Schritte). */
.schritte {
  margin: 0 0 var(--sp-l);
  padding-left: var(--sp-l);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  color: var(--text-leise);
}
.schritte:last-child { margin-bottom: 0; }