/* ==========================================================================
   DIE AUFFRISCHUNG — August 2026
   ==========================================================================

   RÜCKMELDUNG, WÖRTLICH: „Das ganze Backend sieht irgendwie alt aus, als wenn
   es irgendwie 20 Jahre alt wäre."

   Das stimmte, und es lag an vier Dingen — in dieser Reihenfolge, nach Gewicht:

     1. KEINE EIGENE SCHRIFT. system-ui heißt: Die App sieht auf jedem Rechner
        aus wie das Betriebssystem und nach niemandem. Das ist der größte
        Einzelposten; alles andere wirkt erst danach.
     2. ÜBERSCHRIFTEN IN DER MARKENFARBE. Blaue h2 sind das Kennzeichen der
        Verwaltungsmaske: Wenn auch Überschriften, Rahmen und Symbole die
        Markenfarbe tragen, gibt es keine Betonung mehr, weil alles betont ist.
     3. RAHMEN STATT TIEFE. Jede Karte trug eine 1px-Linie ringsum. Dreißig
        Karten untereinander ergeben ein Gitter, in dem das Auge keine Ordnung
        findet.
     4. KEINE BEWEGUNG. Kein Knopf gab Rückmeldung beim Drücken, keine Zeile
        reagierte auf den Zeiger. Eine Oberfläche, die auf nichts antwortet,
        fühlt sich tot an, egal wie sie gefärbt ist.

   WARUM EINE EIGENE DATEI und keine 300 Zeilen mehr in app.css: Diese Datei ist
   eine SCHICHT über einer gewachsenen. Sie überschreibt bewusst — deshalb muss
   man auf einen Blick sehen können, was zur Auffrischung gehört und was zur
   ursprünglichen Gestaltung, und sie muss sich im Zweifel in einer Zeile wieder
   abhängen lassen (index.html). In app.css verteilt wäre beides unmöglich.

   Sie wird NACH app.css und VOR desktop.css geladen: Die Desktop-Schicht hat
   das letzte Wort über Dichte und Spaltenverhalten, weil dort die Entscheidung
   „Schreibtisch oder Handy" steht.

   WAS HIER NICHT PASSIERT IST: eine neue Struktur. Kein Bildschirm ist umgebaut,
   kein Bedienweg verlegt, kein Programmtext angefasst. Wer die App gestern
   bedient hat, findet heute alles an derselben Stelle.
   ========================================================================== */


/* --- A) Schrift ------------------------------------------------------------

   Eine Skala statt gewürfelter Größen. Überschriften mit engerem
   Buchstabenabstand — Archivo ist eine Beschilderungsschrift und trägt das; in
   Standardabständen wirkt sie zerfahren. */
body {
  font-family: var(--schrift);
  font-size: 0.94rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--schrift);
  color: var(--text);           /* NICHT die Markenfarbe — siehe Punkt 2 oben */
  letter-spacing: -0.015em;
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-size: 1.55rem; line-height: 1.2; }
h2 { font-size: 1.24rem; line-height: 1.25; margin: 0 0 2px; }
h3 { font-size: 1.02rem; line-height: 1.3; color: var(--text-weich); font-weight: 600; }
.login-karte h1 { color: var(--text); }

.hinweis { font-size: 0.845rem; line-height: 1.5; }
.untertitel { font-size: 0.9rem; }

/* Ziffern gleich breit, überall wo gerechnet wird. Eine Spalte Geldbeträge mit
   proportionalen Ziffern ist nicht vergleichbar — die Kommas stehen versetzt. */
.karte .zahl, .daten-wert, .kennzahl-wert,
.tabelle td[data-art="eur"], .tabelle td[data-art="zahl"],
.tabelle td[data-art="prozent"], .tabelle td[data-art="stunden"] {
  font-variant-numeric: tabular-nums;
}

.karte .zahl {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
}
.karte .beschriftung { font-size: 0.82rem; }


/* --- B) Tiefe statt Gitter -------------------------------------------------

   Die Karte hebt sich durch einen Schatten und eine Haarlinie in der Farbe des
   Grundes — nicht durch einen sichtbaren Rahmen. */
.karte, .daten-karte {
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--rund);
  box-shadow: var(--schatten-s);
}

/* Anfassbare Karten antworten. Das ist Punkt 4: Ohne Antwort auf den Zeiger
   sieht eine Liste aus wie ein Ausdruck. */
.daten-karte.tappbar { transition: box-shadow .16s ease, border-color .16s ease; }
.daten-karte.tappbar:hover {
  box-shadow: var(--schatten-m);
  border-color: var(--rahmen-stark);
}
.daten-karte.tappbar:active { background: var(--sand); }

/* Der Balken links trägt die Bedeutung, nicht eine getönte Fläche. Getönte
   Flächen für „wichtig" summieren sich — bei drei Hinweisen untereinander ist
   der Bildschirm bunt und nichts mehr wichtig. */
.warn-karte {
  border-left: 3px solid var(--warn);
  background: var(--flaeche);
}


/* --- C) Die Seitenspalte ---------------------------------------------------

   Vorher: ein Block in Marineblau über die volle Höhe, weiße Schrift, aktiver
   Eintrag = etwas hellere Fläche. Das ist die Bauform jedes Admin-Themes seit
   2005.

   Jetzt: tiefe Tinte, ruhig, mit einem einzigen kräftigen Zeichen — der Flamme
   am Eintrag, auf dem man steht. Und die Gruppenüberschriften bekommen die
   Behandlung, die sie zu Überschriften macht (Versalien, weiter
   Buchstabenabstand, klein), statt nur blasser Text zu sein. */
#sidebar {
  background: var(--spalte);
  color: var(--spalte-text);
  padding: 18px 10px 22px;
  gap: 1px;
}

#sidebar .logo {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 0 10px 2px;
  color: #fff;
}
#sidebar .tenant-name {
  font-size: 0.755rem;
  line-height: 1.35;
  opacity: 0.62;
  padding: 0 10px 18px;
}

.nav-gruppe {
  font-size: 0.665rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--spalte-text);
  opacity: 0.42;
  padding: 16px 11px 5px;
}

.nav-btn {
  font-family: var(--schrift);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 11px;
  border-radius: var(--rund-s);
  color: var(--spalte-text);
  position: relative;
  transition: background .13s ease, color .13s ease;
}
.nav-btn:hover { background: rgba(255, 252, 248, 0.07); color: #fff; }

/* Der aktive Eintrag: Fläche UND Balken. Die Fläche allein reicht nicht — auf
   dunklem Grund sind ein paar Prozent Aufhellung im Tageslicht kaum zu sehen. */
.nav-btn.aktiv {
  background: rgba(224, 74, 12, 0.17);
  color: #fff;
  font-weight: 600;
}
.nav-btn.aktiv::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primaer);
}
.nav-btn .nav-ikon { opacity: 0.72; font-size: 0.95rem; }
.nav-btn.aktiv .nav-ikon { opacity: 1; }
.nav-btn.logout { opacity: 0.6; }

/* Die Zahl am Eintrag („21 offen") ist eine Meldung, kein Etikett: Sie gehört in
   die Signalfarbe, nicht in dieselbe Fläche wie der Text. */
#sidebar .pill {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  background: var(--primaer);
  color: #fff;
}


/* --- D) Kopfzeile ----------------------------------------------------------

   Sie war eine graue Leiste. Jetzt trägt sie fast den Grund und nur eine
   Haarlinie — der Inhalt darunter ist die Hauptsache. */
#topbar {
  background: color-mix(in srgb, var(--hintergrund) 70%, #fff);
  border-bottom: 1px solid var(--rahmen);
}
#topbar-betrieb { font-weight: 700; letter-spacing: -0.01em; }


/* --- E) Knöpfe -------------------------------------------------------------

   Vorher: Farbfläche, keine Reaktion auf den Druck. Jetzt geben sie Rückmeldung
   — das ist der Unterschied zwischen dem Bild einer Schaltfläche und einer
   Schaltfläche. */
button, .knopf {
  font-family: var(--schrift);
  border-radius: var(--rund-s);
  transition: background .13s ease, border-color .13s ease, transform .09s ease;
}
button:active:not(:disabled) { transform: translateY(1px); }

.primaer {
  background: var(--primaer);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(90, 55, 25, 0.16);
}
.primaer:hover:not(:disabled) { background: var(--primaer-tief); }

/* Die zweite Wahl steht auf Weiß mit Haarlinie, nicht auf getönter Fläche. Zwei
   gefärbte Knöpfe nebeneinander sehen aus wie zwei Hauptwege — und man muss
   lesen, um zu erkennen, welcher der Rückweg ist. */
.sekundaer, .btn-klein {
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--rahmen-stark);
  font-weight: 600;
}
.sekundaer:hover:not(:disabled), .btn-klein:hover:not(:disabled) {
  background: var(--sand);
  border-color: var(--gedaempft);
}

.btn-ok { background: var(--ok); color: #fff; }
.btn-ok:hover:not(:disabled) { background: color-mix(in srgb, var(--ok) 86%, #000); }

/* Der Nein-Knopf war eine rote Fläche. Rote Flächen für gewöhnliche Rückwege
   („Abbrechen", „Nicht jetzt") lassen jede Entscheidung gefährlich aussehen. */
.btn-nein {
  background: var(--flaeche);
  color: var(--gefahr);
  border: 1px solid var(--gefahr);
  font-weight: 600;
}
.btn-nein:hover:not(:disabled) { background: var(--gefahr-blass); }

.knopf-gesperrt, button:disabled { opacity: 0.5; cursor: not-allowed; }


/* --- F) Eingabefelder ------------------------------------------------------

   Weißes Feld, Haarlinie, und beim Hineingehen ein Ring in der Flamme statt
   eines Systemrahmens. Das Feld, in dem man gerade tippt, ist eine Handlung —
   also die Handlungsfarbe. */
input, select, textarea {
  font-family: var(--schrift);
  font-size: 0.94rem;
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--rund-s);
  background: var(--flaeche);
  color: var(--text);
  transition: border-color .13s ease, box-shadow .13s ease;
}
input:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--gedaempft); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primaer);
  box-shadow: 0 0 0 3px var(--primaer-hell);
}
input::placeholder, textarea::placeholder { color: var(--gedaempft); opacity: 0.8; }
label { font-size: 0.845rem; font-weight: 600; color: var(--text-weich); }


/* --- G) Tabellen -----------------------------------------------------------

   Der Spaltenkopf war eine hellblaue Fläche mit blauer Schrift. Jetzt Sand mit
   Tinte, Versalien im Kleinformat: eine Beschriftung, keine zweite Farbe. */
.tabelle {
  border-radius: var(--rund);
  box-shadow: var(--schatten-s);
  border: 1px solid var(--rahmen);
}
.tabelle th {
  background: var(--sand);
  color: var(--text-weich);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--rahmen-stark);
}
.tabelle tbody tr { transition: background .11s ease; }
.tabelle tbody tr:last-child > td { border-bottom: none; }
.tabelle tbody tr.tappbar:hover > td { background: var(--sand); }


/* --- H) Plaketten ----------------------------------------------------------

   Kleiner, ruhiger, mit Buchstabenabstand. Eine Plakette ist eine Beschriftung
   und darf nicht so laut sein wie die Zeile, an der sie hängt. */
.status, .pill, .score-badge {
  font-size: 0.735rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  padding: 2px 9px;
  border-radius: 999px;
}


/* --- I) Der Fokusring ------------------------------------------------------

   Er war 3 px in der Markenfarbe — die jetzt Orange ist und auf Weiß sehr laut
   wird. 2 px Tinte: gut sichtbar, ohne zu schreien. Und er bleibt PFLICHT, wer
   ihn entfernt, sperrt die Tastaturbedienung aus. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: var(--rund-s);
}
.primaer:focus-visible, #ptt:focus-visible, #ptt-mobil:focus-visible,
#heute-mikro:focus-visible, .nav-btn:focus-visible {
  outline-color: #fff;
  outline-offset: 3px;
}


/* --- J) Kein Zappeln für die, die es nicht wollen -------------------------- */
@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled) { transform: none; }
}

/* --- K) Wer bearbeitet diese Anfrage ---------------------------------------

   Die Zeile steht im Anfrage-Blatt zwischen Stammdaten und Aktionen. In einem
   Büro mit zwei Leuten ist das die erste Frage beim Öffnen — nicht „welchen
   Status hat sie“, sondern „macht das schon jemand“. */
.zuweisung-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--sand);
  border-radius: var(--rund-s);
  font-size: 0.9rem;
}
.zuweisung-wahl { font-size: 0.86rem; padding: 5px 8px; max-width: 220px; }


/* --- L) Die KI-Assistenz als Gespräch --------------------------------------

   RÜCKMELDUNG: „Der KI-Assistent ist halt nur ein einziges Fragefeld. Aber es
   soll genauso funktionieren wie die Web-Oberfläche von ChatGPT."

   Der Unterschied ist nicht Geschmack. Ein FORMULAR füllt man einmal aus und
   schickt es ab — deshalb steht dort eine Beschriftung über dem Feld, deshalb
   liegen die Knöpfe daneben, deshalb ist es so hoch wie sein Inhalt. Ein
   GESPRÄCH führt man: Der Verlauf ist der Bildschirm, die Eingabe klebt unten,
   und der Absende-Knopf sitzt im Feld, weil er zum Feld gehört und nicht zur
   Seite.

   Die Beschriftung ist deshalb nicht gelöscht, sondern nur unsichtbar
   (.versteckt-fuer-auge): Ein Vorlese-Programm braucht sie weiterhin — ein
   Textfeld ohne Namen ist dort „Eingabefeld", und mehr erfährt man nicht. */

.versteckt-fuer-auge {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.assistenz-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.assistenz-kopf h2 { margin: 0; }

/* Der Verlauf trägt keinen eigenen Rahmen: Er IST der Bildschirm. Ein Kasten
   um ein Gespräch macht es wieder zu einem Formularfeld. */
.berater-verlauf {
  overflow-y: auto;
  padding: 4px 2px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- Die Eingabe -----------------------------------------------------------

   EIN Kasten, in dem Feld und Knöpfe zusammen sitzen. Vorher waren es ein
   beschriftetes Feld und drei gleich große Knöpfe darunter — drei Angebote,
   von denen zwei selten gebraucht werden, alle gleich laut. */
.assistenz-eingabe {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  background: var(--flaeche);
  border: 1px solid var(--rahmen-stark);
  border-radius: 22px;
  box-shadow: var(--schatten-s);
  transition: border-color .13s ease, box-shadow .13s ease;
}
/* Der Ring liegt am KASTEN, nicht am Feld darin: Sonst sähe man zwei Rahmen
   ineinander, sobald jemand hineinklickt. */
.assistenz-eingabe:focus-within {
  border-color: var(--primaer);
  box-shadow: 0 0 0 3px var(--primaer-hell);
}
.assistenz-eingabe textarea {
  flex: 1;
  border: none;
  background: transparent;
  box-shadow: none;
  resize: none;
  padding: 8px 0;
  min-height: 24px;
  max-height: 168px;
  line-height: 1.5;
  font-size: 0.96rem;
}
.assistenz-eingabe textarea:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.assistenz-knoepfe { display: flex; align-items: center; gap: 6px; }
.assistenz-knopf {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--sand);
  color: var(--text-weich);
  flex-shrink: 0;
}
.assistenz-knopf:hover:not(:disabled) { background: var(--sand-2); }
/* Der Absende-Knopf ist der einzige mit Farbe. Wer eine Frage getippt hat,
   sucht genau ihn — und nicht drei gleich aussehende Möglichkeiten. */
.assistenz-senden { background: var(--primaer); color: #fff; font-weight: 700; }
.assistenz-senden:hover:not(:disabled) { background: var(--primaer-tief); }

#berater-sprechen.laeuft { background: var(--gefahr); color: #fff; }

/* --- Der leere Zustand ----------------------------------------------------- */
.assistenz-leer { margin: auto 0; padding: 24px 4px; text-align: center; }
.assistenz-leer h3 { margin: 0 0 8px; color: var(--text); }
.assistenz-leer .hinweis { max-width: 62ch; margin: 0 auto 18px; }
.assistenz-beispiele {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.assistenz-beispiel {
  background: var(--flaeche);
  border: 1px solid var(--rahmen-stark);
  color: var(--text-weich);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.86rem;
}
.assistenz-beispiel:hover { background: var(--sand); border-color: var(--gedaempft); }

/* Während er nachsieht: dieselbe Blase wie eine Antwort, nur blass und in
   Bewegung. Ein stehender Text sieht aus wie eine fertige, sehr kurze Antwort. */
.assistenz-denkt { opacity: 0.65; animation: assistenzpuls 1.6s ease-in-out infinite; }
@keyframes assistenzpuls { 0%, 100% { opacity: 0.65 } 50% { opacity: 0.35 } }
@media (prefers-reduced-motion: reduce) { .assistenz-denkt { animation: none } }