:root {
    /* Schicksverwaltung: tiefes Tannengrün als Arbeitsfarbe, das Gold
       des Firmenzeichens als Signatur (Headerkante, Überschriften-
       Strich, Fokus). Warmer Papierton statt Klinikweiß. */
    --farbe-primaer: #1f3d33;
    --farbe-primaer-hell: #2a5245;
    --gold: #a48b42;
    --gold-hell: #f5f1e5;
    --farbe-text: #24282a;
    --gedaempft: #6b7069;
    --farbe-rand: #e3e1da;
    --papier: #f4f3ef;
    --karte: #ffffff;
    --farbe-warnung-rand: #b8860e;
    --farbe-warnung-bg: #fbf4de;
    --farbe-fehler: #a12d24;
    --farbe-erfolg-bg: #e9f3ec;
    --farbe-erfolg-rand: #2f6b46;
    --radius: 10px;
    --radius-klein: 8px;
}

body {
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    color: var(--farbe-text);
    background: #fafafa;
}

a {
    color: var(--farbe-primaer);
}

.app-header {
    background: var(--farbe-primaer);
    color: white;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.app-header h1 {
    font-size: 1.25rem;
    margin: 0;
}

.app-header a {
    color: white;
    text-decoration: none;
}

.app-nav a {
    color: white;
    margin-left: 1.25rem;
    text-decoration: none;
    font-weight: 600;
}

.app-nav a:hover {
    text-decoration: underline;
}

main {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem 4rem;
}

h2 {
    margin-top: 0;
}

.kopfzeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.tabelle th, .tabelle td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--farbe-rand);
}

.tabelle tr:hover td {
    background: #f2f2f2;
}

.hinweis {
    color: #555;
    font-style: italic;
}

/* Formulare */
form {
    max-width: 480px;
}

.feld {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

.feld label {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.feld input,
.feld select,
.feld textarea {
    padding: 0.5rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
}

.feld-fehler {
    color: var(--farbe-fehler);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

.formular-fehler {
    background: #fbeaea;
    border: 1px solid var(--farbe-fehler);
    color: var(--farbe-fehler);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

button, .button, .button-sekundaer, .button-gefahr {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: 1px solid var(--farbe-primaer);
    background: var(--farbe-primaer);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    margin-right: 0.5rem;
}

.button-sekundaer {
    background: white;
    color: var(--farbe-primaer);
}

.button-gefahr {
    background: white;
    color: var(--farbe-fehler);
    border-color: var(--farbe-fehler);
}

.button-klein {
    padding: 0.25rem 0.6rem;
    font-size: 0.875rem;
}

/* Hinweis-/Warn-/Erfolgsboxen */
.box {
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.box-warnung {
    background: var(--farbe-warnung-bg);
    border: 1px solid var(--farbe-warnung-rand);
}

.box-erfolg {
    background: var(--farbe-erfolg-bg);
    border: 1px solid var(--farbe-erfolg-rand);
}

.box-gefahr {
    background: #fbeaea;
    border: 1px solid var(--farbe-fehler);
}

.abschnitt {
    margin-top: 2rem;
}

.tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: #eee;
}

.tag-aktiv {
    background: var(--farbe-erfolg-bg);
    color: var(--farbe-erfolg-rand);
}

.tag-beendet {
    background: #eee;
    color: #555;
}

/* --- Kopfzeile: wer ist angemeldet (ab Mehrbenutzer) --------------- */
.app-benutzer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--farbe-gedaempft, #5a6570);
}

/* ---------------------------------------------------------------
   Startseite: Kacheln als Einstieg
   --------------------------------------------------------------- */
.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.kachel {
    border: 1px solid #d0d4da;
    border-radius: 6px;
    padding: 1rem 1.1rem;
    background: #fff;
}

.kachel h3 {
    margin: 0 0 .4rem 0;
    font-size: 1.05rem;
}

.kachel h3 a {
    text-decoration: none;
}

.kachel h3 a:hover {
    text-decoration: underline;
}

.kachel p {
    margin: .3rem 0 0 0;
    color: #4a5057;
    font-size: .9rem;
    line-height: 1.4;
}

.kachel-zahl {
    font-size: 1.9rem !important;
    font-weight: 600;
    color: #1f2933 !important;
    line-height: 1.1;
    margin: .2rem 0 .4rem 0 !important;
}

.hinweis-kasten {
    border: 1px solid #e0c97f;
    background: #fdf8e8;
    border-radius: 6px;
    padding: 1rem 1.2rem;
    margin-top: 1.5rem;
}

.hinweis-kasten h3 {
    margin-top: 0;
}

/* Auf schmalen Bildschirmen (Tablet/Handy) eine Spalte */
@media (max-width: 40rem) {
    .kacheln {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
   Geführter Abrechnungs-Ablauf
   --------------------------------------------------------------- */
.assistent-fortschritt ol {
    display: flex; flex-wrap: wrap; gap: .4rem;
    list-style: none; margin: 0 0 .8rem 0; padding: 0;
}
.assistent-fortschritt li {
    display: flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem; border-radius: 999px;
    background: #eef0f3; color: #6b7280; font-size: .85rem;
}
.assistent-fortschritt li.erledigt { background: #e3f1e4; color: #2f6f36; }
.assistent-fortschritt li.aktuell  { background: #1f2933; color: #fff; font-weight: 600; }
.schritt-nummer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.3rem; height: 1.3rem; border-radius: 50%;
    background: rgba(0,0,0,.08); font-size: .75rem;
}
.assistent-fortschritt li.aktuell .schritt-nummer { background: rgba(255,255,255,.2); }

.assistent-kopf { color: #4a5057; margin: 0 0 1.2rem 0; }

.assistent-navigation {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; margin-top: 1.8rem; padding-top: 1rem;
    border-top: 1px solid #e0e3e7;
}

.auswahlzeile {
    display: block; padding: .6rem .8rem; margin-bottom: .4rem;
    border: 1px solid #d0d4da; border-radius: 6px; cursor: pointer;
}
.auswahlzeile:hover { background: #f7f8fa; }
.auswahlzeile .nebentext {
    display: block; margin-left: 1.6rem; color: #6b7280; font-size: .88rem;
}

.befundliste { list-style: none; padding: 0; margin: 1rem 0; }
.befund {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
    padding: .6rem .8rem; margin-bottom: .4rem;
    border-radius: 6px; border-left: 4px solid #d0d4da; background: #f7f8fa;
}
.befund-fehlt   { border-left-color: #c0392b; background: #fdf1f0; }
.befund-hinweis { border-left-color: #d9a441; background: #fdf8e8; }
.befund-marke {
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; color: #6b7280; min-width: 4.5rem;
}
.befund-fehlt .befund-marke { color: #c0392b; }
.befund-text { flex: 1 1 20rem; }
.befund-ziel { white-space: nowrap; }

.dokumentliste { line-height: 2; }
.zeile-gut td, .zeile-gut th { background: #e3f1e4; }
.zeile-warnung td, .zeile-warnung th { background: #fdf1f0; }
.erfolg  { color: #2f6f36; font-weight: 500; }
.warnung { color: #9a6b00; font-weight: 500; }
.fehler-kasten {
    border: 1px solid #e0a49b; background: #fdf1f0;
    border-radius: 6px; padding: 1rem 1.2rem; margin: 1rem 0;
}
.fehler-kasten h3 { margin-top: 0; }

/* ---------------------------------------------------------------
   Verteilung: Standard sichtbar, Auswahl eingeklappt
   --------------------------------------------------------------- */
.verteilung-standard {
    margin: .2rem 0 .5rem 0;
    padding: .5rem .7rem;
    background: #eef3ee;
    border-left: 3px solid #2f6f36;
    border-radius: 4px;
}
.verteilung-aendern > summary {
    cursor: pointer;
    color: #4a5057;
    font-size: .9rem;
    margin-bottom: .5rem;
}
.verteilung-aendern[open] > summary { margin-bottom: .8rem; }

.verteilung-warnung {
    margin: .2rem 0 .6rem 0;
    padding: .5rem .7rem;
    background: #fdf4e7;
    border-left: 3px solid #b8791f;
    border-radius: 4px;
}

/* ---------------------------------------------------------------
   KI-Assistent
   --------------------------------------------------------------- */
.ki-verlauf { margin: 1rem 0; }
.ki-nachricht { margin-bottom: .8rem; padding: .6rem .8rem; border-radius: 6px; }
.ki-user      { background: #eef3ee; border-left: 3px solid #2f6f36; }
.ki-assistant { background: #f4f4f6; border-left: 3px solid #4a5057; }
.ki-wer   { margin: 0 0 .3rem 0; font-size: .85rem; color: #4a5057; font-weight: 600; }
.ki-text  { white-space: pre-wrap; }
.ki-fehler {
    margin: .6rem 0; padding: .6rem .8rem;
    background: #fdf4e7; border-left: 3px solid #b8791f; border-radius: 4px;
}
.ki-kontext > summary { cursor: pointer; color: #4a5057; font-size: .9rem; }
.ki-kontext pre {
    white-space: pre-wrap; font-size: .85rem;
    background: #f7f7f8; padding: .6rem; border-radius: 4px;
}
.ki-formular { margin-top: 1rem; }
.htmx-indicator { opacity: 0; margin-left: .6rem; color: #4a5057; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ---------------------------------------------------------------
   PDF-Auslese (Paket 3)

   Zwei Spalten: links das Original, rechts die Werte. Das Arbeits-
   paket verlangt die Werte "neben dem Original" - deshalb wirklich
   nebeneinander und nicht untereinander.

   Auf schmalen Bildschirmen bricht die Aufteilung um; dort steht
   das Dokument oben. Ein zweispaltiges Raster auf einem Telefon
   waere unbenutzbar, und die Pruefung ist der Schritt, bei dem man
   genau hinsehen muss.
   --------------------------------------------------------------- */
.auslese-spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .auslese-spalten { grid-template-columns: 1fr; }
}
.auslese-original { position: sticky; top: 1rem; }
.beleg-rahmen {
    width: 100%;
    height: 70vh;
    min-height: 24rem;
    border: 1px solid #d5d7db;
    border-radius: 6px;
    background: #fff;
}
.auslese-vorschau {
    white-space: pre-wrap;
    font-size: .8rem;
    max-height: 20rem;
    overflow: auto;
    background: #f7f7f8;
    padding: .6rem;
    border-radius: 4px;
}
.auslese-formular table { font-size: .9rem; }
.auslese-formular select { max-width: 100%; }

/* Kopfbereich der Pruefmaske: knapp statt mahnend. */
.auslese-kopf { margin-bottom: 1rem; }
.auslese-kopf > p { margin: .2rem 0 .5rem 0; }
.auslese-kontrolle { list-style: none; padding: 0; margin: .4rem 0; }
.auslese-kontrolle li {
    padding: .35rem .6rem; margin-bottom: .25rem;
    border-radius: 4px; font-size: .9rem;
}
.kontrolle-passt      { background: #eef4ee; border-left: 3px solid #2f6f36; }
.kontrolle-abweichung { background: #fdf4e7; border-left: 3px solid #b8791f; }
.auslese-kopf details > summary { cursor: pointer; color: #4a5057; font-size: .9rem; }

/* ---------------------------------------------------------------
   "Was fehlt noch?" - die Abarbeitungsliste je Abrechnung.
   --------------------------------------------------------------- */
.stand-kopf { padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.stand-fertig { background: #eef4ee; border-left: 4px solid #2f6f36; }
.stand-offen  { background: #fdf4e7; border-left: 4px solid #b8791f; }
.stand-kopf p { margin: 0; }
.stand-liste { list-style: none; padding: 0; margin: .5rem 0; }
.stand-liste li {
    padding: .5rem .75rem; margin-bottom: .3rem;
    border-radius: 4px; display: flex; gap: .75rem;
    align-items: center; justify-content: space-between;
}
.stand-punkt-offen    { background: #fdf4e7; border-left: 3px solid #b8791f; }
.stand-punkt-hinweis  { background: #f4f4f6; border-left: 3px solid #4a5057; }
.stand-punkt-erledigt { background: #eef4ee; border-left: 3px solid #2f6f36; }

/* ---------------------------------------------------------------
   Sammelmasken: Vorjahr uebernehmen, Zaehler ablesen.

   Beides sind Tabellen, in denen viele Zahlen untereinander stehen.
   Rechtsbuendig, damit Tausender unter Tausendern stehen - bei
   linksbuendigen Betraegen uebersieht man eine Stelle zu viel.

   ".zahl" wurde in mehreren Vorlagen schon benutzt, war aber nie
   definiert. Die Regel gilt deshalb ab jetzt auch dort.
   --------------------------------------------------------------- */
.zahl { text-align: right; white-space: nowrap; }
th.zahl, td.zahl { text-align: right; }

/* Bereits erfasst: sichtbar, aber zurueckgenommen. Nicht ausblenden -
   wer nicht sieht, was uebersprungen wurde, sucht danach. */
.zeile-blass td { opacity: .6; }

/* Befund je Zeile der Ablesemaske. Dieselben drei Farben wie in der
   Liste "Was fehlt noch", damit Gelb ueberall dasselbe bedeutet. */
.befund { font-size: .9rem; padding: .3rem .5rem; border-radius: 4px; }
.befund-ok       { color: #4a5057; }
.befund-hinweis  { background: #fdf4e7; border-left: 3px solid #b8791f; }
.befund-ruecklauf{ background: #fbeceb; border-left: 3px solid #a5342c; }

/* ---------------------------------------------------------------
   Jahresuebersicht: wo steht welcher Zeitraum.

   Dieselben drei Farben wie in der Liste "Was fehlt noch" - Gelb
   bedeutet ueberall dasselbe. Rot ist der Sonderfall: eine bereits
   verschickte Abrechnung passt nicht mehr zu den Daten.
   --------------------------------------------------------------- */
.stufe {
    display: inline-block; padding: .15rem .5rem; border-radius: 4px;
    font-size: .85rem; white-space: nowrap;
}
.stufe-versendet     { background: #eef4ee; color: #2f6f36; }
.stufe-plan          { background: #f4f4f6; color: #4a5057; }
.stufe-neu           { background: #f4f4f6; color: #4a5057; }
.stufe-in_arbeit     { background: #fdf4e7; color: #8a5a12; }
.stufe-bereit        { background: #eef2f8; color: #2f4f6f; }
.stufe-abgeschlossen { background: #fdf4e7; color: #8a5a12; }
.stufe-nachgelaufen  { background: #fbeceb; color: #a5342c; font-weight: 600; }

/* Fortschrittsbalken der Einrichtungs-Checkliste. */
.fortschritt {
    height: .5rem; background: #e2e2e6; border-radius: 3px;
    overflow: hidden; margin-top: .5rem;
}
.fortschritt-balken { height: 100%; background: #2f6f36; }


/* ==================================================================
 * Modernisierung (Paket 30). Diese Schicht überschreibt gezielt die
 * Grundbausteine - alle Spezialkomponenten darüber erben das neue
 * Erscheinungsbild. Signatur: die Goldlinie der Marke; sonst ruhig,
 * flach, aufgeräumt. Fokus immer sichtbar (Tastatur!).
 * ================================================================== */

body {
    background: var(--papier);
    font-size: 15.5px;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

main, .haupt {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.6rem 2rem 3rem;
}

/* --- Kopf: Marke mit Goldkante ------------------------------------ */
.app-header {
    background: var(--farbe-primaer);
    border-bottom: 2px solid var(--gold);
    padding: 0.75rem 2rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.app-header h1 { font-size: 1.05rem; letter-spacing: 0.01em; }
.app-header h1 a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}
.app-header .marke-zeichen {
    height: 26px;
    width: 26px;
    border-radius: 6px;
    background: #ffffff;
    padding: 2px;
}
.app-nav { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.app-nav a {
    padding: 0.42rem 0.7rem;
    border-radius: var(--radius-klein);
    text-decoration: none;
    transition: background 120ms ease;
}
.app-nav a:hover { background: var(--farbe-primaer-hell); text-decoration: none; }
.app-benutzer { opacity: 0.85; font-size: 0.9rem; }
.app-untertitel { font-weight: 400; opacity: 0.75; }

/* --- Überschriften mit Gold-Signatur ------------------------------- */
h2 {
    font-size: 1.45rem;
    line-height: 1.25;
    margin: 0.4rem 0 1rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--gold);
}
h3 { font-size: 1.08rem; margin: 1.4rem 0 0.6rem; }

/* --- Flächen: Karten flach und ruhig ------------------------------- */
.abschnitt, .box, .kachel, .hinweis-kasten, .blatt {
    background: var(--karte);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
}
.abschnitt { padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; }
.box { padding: 1rem 1.2rem; }
.box-warnung { border-left: 4px solid var(--farbe-warnung-rand); background: var(--farbe-warnung-bg); }
.box-gefahr { border-left: 4px solid var(--farbe-fehler); background: #fbeeee; }
.box-erfolg { border-left: 4px solid var(--farbe-erfolg-rand); background: var(--farbe-erfolg-bg); }
.kacheln { gap: 1rem; }
.kachel { padding: 1.1rem 1.25rem; }
.kachel-zahl { font-size: 1.9rem; font-weight: 650; letter-spacing: -0.01em; }

/* --- Tabellen: ruhige Linien, lesbare Köpfe, Zeilen-Hover ---------- */
table { border-collapse: collapse; }
.tabelle, table.tabelle { width: 100%; }
th {
    font-weight: 600;
    color: var(--gedaempft);
    border-bottom: 2px solid var(--farbe-rand);
    padding: 0.55rem 0.6rem;
}
td {
    border-bottom: 1px solid var(--farbe-rand);
    padding: 0.55rem 0.6rem;
    vertical-align: middle;
}
tbody tr:hover > td { background: var(--gold-hell); }
.geld, .zahl, td.geld, th.geld { text-align: right; white-space: nowrap; }

/* --- Knöpfe -------------------------------------------------------- */
.button, button, input[type="submit"] {
    background: var(--farbe-primaer);
    color: #ffffff;
    border: 1px solid var(--farbe-primaer);
    border-radius: var(--radius-klein);
    padding: 0.5rem 0.95rem;
    font-size: 0.95rem;
    font-weight: 550;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 120ms ease, border-color 120ms ease;
}
.button:hover, button:hover, input[type="submit"]:hover {
    background: var(--farbe-primaer-hell);
    border-color: var(--farbe-primaer-hell);
    text-decoration: none;
}
.button-sekundaer, a.button-sekundaer {
    background: var(--karte);
    color: var(--farbe-primaer);
    border: 1px solid var(--farbe-rand);
}
.button-sekundaer:hover, a.button-sekundaer:hover {
    background: var(--gold-hell);
    border-color: var(--gold);
    color: var(--farbe-text);
}
.button-gefahr, a.button-gefahr {
    background: var(--karte);
    color: var(--farbe-fehler);
    border: 1px solid var(--farbe-fehler);
}
.button-gefahr:hover, a.button-gefahr:hover { background: #fbeeee; }
.button-klein { padding: 0.28rem 0.6rem; font-size: 0.85rem; }

/* --- Formulare ------------------------------------------------------ */
input[type="text"], input[type="date"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-klein);
    padding: 0.5rem 0.65rem;
    font-size: 0.98rem;
    background: var(--karte);
    color: var(--farbe-text);
    max-width: 30rem;
    width: 100%;
    box-sizing: border-box;
}
.feld { margin-bottom: 0.9rem; }
.feld label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.feld-fehler { color: var(--farbe-fehler); margin: 0.25rem 0 0; font-size: 0.9rem; }
.formular-fehler {
    background: #fbeeee;
    border: 1px solid var(--farbe-fehler);
    border-left-width: 4px;
    border-radius: var(--radius-klein);
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
}

/* --- Sichtbarer Fokus (Tastatur) - die Gold-Signatur --------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: var(--radius-klein);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--gold);
}

/* --- Kleinkram ------------------------------------------------------ */
.hinweis { color: var(--gedaempft); }
.klein { font-size: 0.85rem; color: var(--gedaempft); }
.tag {
    display: inline-block;
    border: 1px solid var(--farbe-rand);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.82rem;
    background: var(--karte);
}
.tag-aktiv { border-color: var(--farbe-erfolg-rand); color: var(--farbe-erfolg-rand); background: var(--farbe-erfolg-bg); }
.tag-beendet { color: var(--gedaempft); }
.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}
@media (max-width: 720px) {
    main, .haupt { padding: 1rem; }
    .app-header { position: static; padding: 0.75rem 1rem; }
}