/* Buchhaltung version.blue — Oberfläche, Schicht 1 von 3
 *
 * Kontraste nach WCAG 2.1 AA, Tastaturbedienbarkeit, klare Fokusreihenfolge.
 *
 * ACHTUNG BEIM ÄNDERN: Über dieser Datei liegen zwei weitere, und sie wird von ihnen zum
 * Teil überschrieben. Die Ladereihenfolge in jeder Hülle ist:
 *
 *   1. app.css      — diese Datei: der Boden. Alles ist hier benutzbar, auch wenn 2 und 3
 *                     ausfallen. Das ist kein theoretischer Fall: Als die Anmeldeseite wegen
 *                     eines zerrissenen `<link>` eine Zeit lang ohne modern.css lief, war
 *                     sie schlicht, aber bedienbar. Deshalb bleibt diese Schicht vollständig.
 *   2. marke.css    — das Aussehen der Seiten nach außen (Anmeldung, Portal). Schreibt
 *                     `body.marke .x` und gewinnt damit durch Spezifität.
 *   3. modern.css   — die Auffrischung für alles dahinter.
 *
 * 23 Regeln hier sind von modern.css vollständig überschrieben: Eine Änderung daran wirkt
 * nicht. Welche das sind, sagt
 *
 *     php bin/console stil            — alle
 *     php bin/console stil karte      — nur die zu einem Selektor
 *
 * Das zu wissen ist der Unterschied zwischen einer Minute und einer halben Stunde mit dem
 * Verdacht, der Zwischenspeicher sei schuld.
 */

:root {
    --grund:        #f6f7f9;
    --flaeche:      #ffffff;
    --flaeche-alt:  #f0f2f5;
    --rand:         #d8dce3;
    --rand-stark:   #b6bcc7;
    --text:         #16191f;
    --text-leise:   #5a6472;
    --akzent:       #1c4f8b;
    --akzent-hell:  #e8f0fa;
    --gruen:        #1d6f42;
    --gruen-hell:   #e6f4ec;
    --gelb:         #8a5d00;
    --gelb-hell:    #fdf3d9;
    --rot:          #a32020;
    --rot-hell:     #fbeaea;
    --blau:         #1c4f8b;
    --blau-hell:    #e8f0fa;
    --radius:       6px;
    --schatten:     0 1px 2px rgba(20,25,35,.06), 0 2px 8px rgba(20,25,35,.05);
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body {
    margin: 0; background: var(--grund); color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

/* Rahmenlayout */
.rahmen { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.seitenleiste {
    background: #16233a; color: #cfd8e6; padding: 0 0 2rem;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.seitenmarke { padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.seitenmarke strong { display: block; color: #fff; font-size: .96rem; letter-spacing: .01em; }
.seitenmarke span { font-size: .74rem; color: #8fa0bb; }
.mandantenwahl { padding: .8rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.mandantenwahl select {
    width: 100%; background: #24344f; color: #fff; border: 1px solid #3a4d70;
    border-radius: var(--radius); padding: .42rem .5rem; font-size: .84rem;
}
.nav { padding: .5rem 0; }
.nav-gruppe { padding: .85rem 1.1rem .3rem; font-size: .68rem; text-transform: uppercase;
              letter-spacing: .08em; color: #7e91b0; }
.nav a {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .38rem 1.1rem; color: #cfd8e6; font-size: .87rem; border-left: 3px solid transparent;
}
.nav a:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.nav a.aktiv { background: rgba(255,255,255,.1); border-left-color: #6ea8f0; color: #fff; font-weight: 600; }
.nav .zaehler {
    background: #3a4d70; color: #fff; border-radius: 10px; padding: 0 .42rem;
    font-size: .7rem; min-width: 1.35rem; text-align: center;
}
.nav .zaehler.warn { background: var(--rot); }

.inhalt { display: flex; flex-direction: column; min-width: 0; }
.kopfleiste {
    background: var(--flaeche); border-bottom: 1px solid var(--rand);
    padding: .55rem 1.4rem; display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 20;
}
.kopfleiste .titel { font-weight: 600; font-size: 1rem; margin-right: auto; }
.kopfleiste .benutzer { font-size: .82rem; color: var(--text-leise); }
main { padding: 1.4rem; flex: 1; max-width: 1560px; width: 100%; }

/* Karten und Raster */
.karte {
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--radius); box-shadow: var(--schatten); margin-bottom: 1.1rem;
}
.karte > h2, .karte > .karte-kopf {
    margin: 0; padding: .7rem 1rem; border-bottom: 1px solid var(--rand);
    font-size: .92rem; font-weight: 600; display: flex; align-items: center; gap: .6rem;
}
.karte > .karte-kopf .rechts { margin-left: auto; display: flex; gap: .4rem; }
.karte-inhalt { padding: 1rem; }
.karte-inhalt.eng { padding: .6rem 1rem; }

.raster { display: grid; gap: 1.1rem; }
.raster.k2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.raster.k3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.raster.k4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.kennzahl { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
            padding: .85rem 1rem; box-shadow: var(--schatten); }
.kennzahl .beschriftung { font-size: .76rem; color: var(--text-leise); text-transform: uppercase;
                          letter-spacing: .04em; }
.kennzahl .wert { font-size: 1.5rem; font-weight: 650; margin-top: .2rem;
                  font-variant-numeric: tabular-nums; }
.kennzahl .zusatz { font-size: .78rem; color: var(--text-leise); margin-top: .1rem; }
.kennzahl.warn .wert { color: var(--rot); }
.kennzahl.gut .wert { color: var(--gruen); }

/* Tabellen */
table.liste { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.liste th {
    text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--rand-stark);
    font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-leise);
    white-space: nowrap; background: var(--flaeche-alt);
}
table.liste td { padding: .48rem .7rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
table.liste tbody tr:hover { background: var(--flaeche-alt); }
table.liste .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.liste .z { text-align: center; }
table.liste td.klein { font-size: .8rem; color: var(--text-leise); }
.tabellenrahmen { overflow-x: auto; }

/* Formulare */
.feld { margin-bottom: .85rem; }
.feld label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .22rem; }
.feld .hinweis { font-size: .76rem; color: var(--text-leise); margin-top: .2rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number],
input[type=search], select, textarea {
    width: 100%; padding: .42rem .55rem; border: 1px solid var(--rand-stark);
    border-radius: var(--radius); font: inherit; font-size: .87rem; color: var(--text);
    /* Als Token, nicht als `#fff`: Sonst entscheidet diese Zeile über die helle Fassung und
       eine zweite in `modern.css` über die dunkle — und eine Farbe, die zweimal entschieden
       wird, wird irgendwann an einer Stelle vergessen. */
    background: var(--eingabe-grund, var(--flaeche));
}
input:disabled, select:disabled, textarea:disabled { background: var(--flaeche-alt); color: var(--text-leise); }
textarea { min-height: 5rem; resize: vertical; }
.feldreihe { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
fieldset { border: 1px solid var(--rand); border-radius: var(--radius); padding: .9rem; margin: 0 0 1rem; }
legend { font-size: .8rem; font-weight: 600; padding: 0 .4rem; }
.kontrollkaestchen { display: flex; align-items: flex-start; gap: .45rem; font-size: .86rem; }
.kontrollkaestchen input { margin-top: .2rem; }

/* Schaltflächen */
.knopf {
    display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .8rem;
    border: 1px solid var(--rand-stark); border-radius: var(--radius); background: var(--flaeche);
    color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.knopf:hover { background: var(--flaeche-alt); text-decoration: none; }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
.knopf.haupt:hover { background: #163f70; }
.knopf.gefahr { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.gefahr:hover { background: #841919; }
.knopf.gut { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.knopf.klein { padding: .22rem .5rem; font-size: .78rem; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Marken und Ampeln */
.marke-status {
    display: inline-block; padding: .1rem .45rem; border-radius: 10px;
    font-size: .74rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.m-grau  { background: var(--flaeche-alt); color: var(--text-leise); border-color: var(--rand); }
.m-blau  { background: var(--blau-hell);  color: var(--blau);  border-color: #bcd4ef; }
.m-gruen { background: var(--gruen-hell); color: var(--gruen); border-color: #b9dfc9; }
.m-gelb  { background: var(--gelb-hell);  color: var(--gelb);  border-color: #ecd9a4; }
.m-rot   { background: var(--rot-hell);   color: var(--rot);   border-color: #f0c4c4; }

.ampel { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: -1px; }
.ampel.gruen { background: #26a35e; } .ampel.gelb { background: #d99b12; }
.ampel.rot { background: #c62828; }  .ampel.blau { background: #2f6fbf; }

/* Meldungen */
.meldung { padding: .65rem .9rem; border-radius: var(--radius); margin-bottom: 1rem;
           border: 1px solid; font-size: .87rem; }
.meldung.erfolg { background: var(--gruen-hell); border-color: #b9dfc9; color: #12522f; }
.meldung.fehler { background: var(--rot-hell);   border-color: #f0c4c4; color: #7d1818; }
.meldung.warnung{ background: var(--gelb-hell);  border-color: #ecd9a4; color: #6b4800; }
.meldung.info   { background: var(--blau-hell);  border-color: #bcd4ef; color: #15406f; }
.meldung ul { margin: .4rem 0 0; padding-left: 1.1rem; }

.leer { padding: 2rem 1rem; text-align: center; color: var(--text-leise); font-size: .88rem; }
.leise { color: var(--text-leise); }
.klein { font-size: .8rem; }
.zahl { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.negativ { color: var(--rot); }
.positiv { color: var(--gruen); }

/* Reiter und Filter */
.reiter { display: flex; gap: .2rem; border-bottom: 1px solid var(--rand); margin-bottom: 1.1rem;
          overflow-x: auto; }
.reiter a { padding: .45rem .8rem; font-size: .87rem; border-bottom: 2px solid transparent;
            color: var(--text-leise); white-space: nowrap; }
.reiter a.aktiv { border-bottom-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.filterleiste { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end;
                margin-bottom: 1rem; padding: .8rem 1rem; background: var(--flaeche);
                border: 1px solid var(--rand); border-radius: var(--radius); }
.filterleiste .feld { margin: 0; min-width: 150px; }

/* Anmeldung */
.anmeldung { display: flex; align-items: center; justify-content: center; min-height: 100vh;
             background: linear-gradient(160deg, #16233a, #24344f); padding: 1.5rem; }
.anmeldung .kasten { background: #fff; border-radius: 10px; padding: 1.8rem; width: 100%;
                     max-width: 400px; box-shadow: 0 12px 40px rgba(0,0,0,.28); }
.anmeldung h1 { margin: 0 0 .2rem; font-size: 1.2rem; }
.anmeldung .unter { color: var(--text-leise); font-size: .84rem; margin-bottom: 1.3rem; }

/* Rechenweg der Abschlagsrechnung */
.rechenweg { width: 100%; font-size: .88rem; font-variant-numeric: tabular-nums; }
.rechenweg td { padding: .22rem .4rem; }
.rechenweg td.r { text-align: right; }
.rechenweg tr.summe td { border-top: 1px solid var(--rand-stark); font-weight: 600; }
.rechenweg tr.gesamt td { border-top: 2px solid var(--text); font-weight: 700; font-size: .95rem; }
.rechenweg tr.einzug td:first-child { padding-left: 1.6rem; color: var(--text-leise); }

/* Fortschritt */
.balken { height: 7px; background: var(--flaeche-alt); border-radius: 4px; overflow: hidden; }
.balken > span { display: block; height: 100%; background: var(--akzent); }
.balken.warn > span { background: var(--rot); }

@media (max-width: 900px) {
    .rahmen { grid-template-columns: 1fr; }
    .seitenleiste { position: static; height: auto; }
    main { padding: 1rem; }
}
@media print {
    .seitenleiste, .kopfleiste, .knopfreihe, .reiter, .filterleiste { display: none !important; }
    .rahmen { display: block; }
    body { background: #fff; }
    .karte { box-shadow: none; border-color: #999; }
}

/* ------------------------------------------------------------------ Telefon */
/* Der Hörer hinter einer Rufnummer: klein, unaufdringlich, aber da. */
.hoerer { border: 0; background: none; cursor: pointer; padding: 0 .25rem;
  font-size: 1rem; line-height: 1; color: var(--blau, #2a5db0); opacity: .55; }
.hoerer:hover { opacity: 1; }

.modal-hintergrund { position: fixed; inset: 0; background: rgba(10,16,28,.45);
  display: flex; align-items: center; justify-content: center; z-index: 900; }
.modal-fenster { background: #fff; border-radius: 10px; width: min(26rem, 92vw);
  box-shadow: 0 12px 40px rgba(0,0,0,.28); overflow: hidden;
  max-height: 92vh; display: flex; flex-direction: column; }
/* Ein Formular ist breiter als eine Rückfrage — und länger, also scrollt sein Inhalt. */
.modal-fenster.weit { width: min(58rem, 94vw); }
.modal-fenster.weit .modal-inhalt { overflow: auto; }
.modal-inhalt .karte { box-shadow: none; border: 0; margin: 0; }
.modal-inhalt .karte-kopf { display: none; }
.modal-kopf { padding: .7rem 1rem; font-weight: 600; border-bottom: 1px solid #e6e9ef; }
.modal-inhalt { padding: 1rem; }
.modal-fenster .modal-inhalt { flex: 1 1 auto; }
.modal-inhalt label { display: block; font-size: .82rem; color: #55607a; margin: .6rem 0 .2rem; }
.modal-inhalt select, .modal-inhalt input { width: 100%; }
.telefon-ziel { font-size: 1.05rem; margin-bottom: .2rem; }
.telefon-meldung { margin: .7rem 0 0; color: #7d1818; font-size: .88rem; }
.modal-fuss { display: flex; gap: .5rem; justify-content: flex-end;
  padding: .7rem 1rem; background: #f7f8fb; border-top: 1px solid #e6e9ef; }

/* Hinweise unten rechts — für den Anruf, der gerade hereinkommt. */
.hinweise { position: fixed; right: 1rem; bottom: 1rem; z-index: 950;
  display: flex; flex-direction: column; gap: .5rem; max-width: 20rem; }
.hinweis-kasten { background: #fff; border: 1px solid #bcd4ef; border-left-width: 4px;
  border-radius: 8px; padding: .65rem .8rem; box-shadow: 0 6px 22px rgba(0,0,0,.18);
  cursor: pointer; font-size: .9rem; animation: hinweis-auf .2s ease-out; }
.hinweis-kasten.erfolg { border-color: #b9dfc9; }
.hinweis-kasten.fehler { border-color: #f0c4c4; }
@keyframes hinweis-auf { from { opacity: 0; transform: translateY(.5rem); } }
/* Eingabefeld mit Hörer: die Nummer bleibt so breit wie vorher, der Knopf steht daneben. */
.feld-mit-hoerer { display: flex; align-items: center; gap: .25rem; }
.feld-mit-hoerer input { flex: 1 1 auto; min-width: 0; }
.feld-mit-hoerer .hoerer { flex: 0 0 auto; font-size: 1.1rem; padding: 0 .35rem; }
/* Was nur auf der Seite gilt, nicht im Fenster: Der Fensterkopf trägt die Überschrift schon. */
.modal-inhalt .nur-seite { display: none; }

/* ------------------------------------------------------------------ Bauakte */
/* Ein Aktenschrank, kein Formular: links der Baum, rechts die Kacheln. Wer Dateien sucht,
   sucht sie mit den Augen — deshalb Symbole und nicht eine weitere Tabelle. */
/* ===================================================== Explorer der Bauakte
 *
 * Die Farben stehen hier als Token und nicht als Festwert. Vorher war der Explorer in
 * `#fff`, `#f2f5fa` und `#e6e9ef` gehalten — im Dunkelmodus blieb er als weiße Fläche auf
 * dunklem Grund stehen, und `modern.css` fing das mit Einzelregeln wieder ein. Eine Farbe,
 * die zweimal entschieden wird, wird irgendwann an einer Stelle vergessen.
 */
.explorer { display: grid; grid-template-columns: 17rem 1fr; gap: 1rem; align-items: start; }
@media (max-width: 62rem) { .explorer { grid-template-columns: 1fr; } }

.ex-baum { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: .5rem .35rem; position: sticky; top: 1rem; max-height: 82vh; overflow: auto; }
.ex-baum-kopf { font-weight: 600; padding: .3rem .6rem .5rem; font-size: .9rem; }
.ex-zweig { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem;
  border-radius: 6px; text-decoration: none; color: inherit; font-size: .88rem; }
.ex-zweig svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ex-zweig span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-zweig em { margin-left: auto; font-style: normal; font-size: .76rem; color: var(--text-leise); }
.ex-zweig:hover { background: var(--flaeche-alt); }
.ex-zweig.aktiv { background: var(--blau-hell); font-weight: 600; }

.ex-inhalt { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten);
  display: flex; flex-direction: column; min-height: 26rem; }
.ex-leiste { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .9rem; border-bottom: 1px solid var(--rand); }
.ex-pfad { font-size: .95rem; display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap; min-width: 0; }
.ex-pfad a { text-decoration: none; color: inherit; padding: .1rem .3rem; border-radius: 4px; }
.ex-pfad a:hover { background: var(--flaeche-alt); }
.ex-pfad a:last-child { font-weight: 600; }
.ex-trenner { color: var(--text-leise); }
.ex-werkzeuge { margin-left: auto; display: flex; gap: .4rem; }

.ex-flaeche { flex: 1 1 auto; display: grid; gap: .5rem; padding: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); align-content: start; }
.ex-flaeche.ablage-offen { outline: 2px dashed var(--blau); outline-offset: -8px;
  background: var(--akzent-hell); }
.ex-leer { grid-column: 1 / -1; color: var(--text-leise); font-size: .9rem; margin: 2rem 0; text-align: center; }

.ex-kachel { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .25rem; padding: .7rem .4rem .5rem; border-radius: 8px; text-align: center;
  text-decoration: none; color: inherit; border: 1px solid transparent; }
.ex-kachel:hover { background: var(--flaeche-alt); border-color: var(--rand); }
.ex-kachel a { display: flex; flex-direction: column; align-items: center; gap: .25rem;
  text-decoration: none; color: inherit; min-width: 0; width: 100%; }
.ex-name { font-size: .84rem; line-height: 1.25; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex-zusatz { font-size: .74rem; color: var(--text-leise); }
.ex-marke { font-size: .68rem; color: var(--blau); background: var(--blau-hell);
  border-radius: 4px; padding: 0 .3rem; }
.ex-entnehmen { position: absolute; top: .2rem; right: .2rem; margin: 0; opacity: 0; }
.ex-kachel:hover .ex-entnehmen { opacity: 1; }
.ex-x { border: 0; background: var(--flaeche); color: var(--rot); border-radius: 50%; width: 1.3rem;
  height: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); }

.ex-fuss { border-top: 1px solid var(--rand); padding: .45rem .9rem; font-size: .78rem;
  color: var(--text-leise); }
.ex-fuss code { font-size: .78rem; }