/* Oberflaeche des Rechnungssystems.
   Bewusst eine eigene Datei statt eines <style>-Blocks in der Vorlage:
   so wird sie von WhiteNoise mit Hash ausgeliefert und dauerhaft gecacht,
   und Aenderungen lassen sich pruefen, ohne HTML zu durchsuchen. */

/* Farben nach dem Logo. Das Blau ist nicht geschaetzt, sondern aus
   Logo_lang/logo_png_farbig_lang.png ausgezaehlt: #2A7FFF ist mit 146.020
   Pixeln die haeufigste deckende Farbe neben Schwarz. Die SVG-Variante des
   kurzen Logos fuehrt #0066FF - das lange Logo, das im Werkzeug steht,
   verwendet #2A7FFF. */

:root {
  color-scheme: light;

  --grund:        #F6F8FB;
  --flaeche:      #FFFFFF;
  --flaeche-2:    #F0F4FA;
  --linie:        #DDE4EE;
  --linie-stark:  #BFCADB;

  --tinte:        #0B0E12;
  --text:         #39404B;
  --gedaempft:    #6B7480;
  --blass:        #98A1AE;

  --akzent:       #1F6FE8;   /* etwas dunkler als das Logoblau: auf Weiss
                                erreicht #2A7FFF als Text keinen ausreichenden
                                Kontrast, als Flaeche schon. */
  /* Das Logoblau selbst - nur fuer Flaechen OHNE Text. Weisse Schrift darauf
     erreicht nur 3,76:1, WCAG AA verlangt 4,5:1. Nachgerechnet, nicht
     geschaetzt. Knopfbeschriftungen laufen deshalb auf --akzent (4,67:1). */
  --akzent-flaeche: #2A7FFF;
  --akzent-hell:  #E8F0FE;
  --akzent-linie: #AFC9F5;

  --gut:          #1C7A3E;
  --gut-hell:     #E4F3E9;
  --warnung:      #96610A;
  --warnung-hell: #FBF0DC;
  --fehler:       #B3261E;
  --fehler-hell:  #FBE9E7;

  --radius:       6px;
  --radius-klein: 4px;
  --schatten:     0 1px 2px rgba(11,14,18,.06), 0 1px 1px rgba(11,14,18,.04);

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  --schrift-zahl: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* Die dunkle Fassung bleibt erhalten, greift aber nicht mehr automatisch:
   das Werkzeug soll hell aussehen, unabhaengig davon, wie das Betriebssystem
   eingestellt ist. Zum Ausprobieren genuegt data-theme="dunkel" am <html>. */
[data-theme="dunkel"] {
  color-scheme: dark;

  --grund:        #0C0F14;
  --flaeche:      #141922;
  --flaeche-2:    #1A2029;
  --linie:        #262E3A;
  --linie-stark:  #38424F;

  --tinte:        #ECEFF3;
  --text:         #C2C9D2;
  --gedaempft:    #8A94A0;
  --blass:        #667080;

  --akzent:       #6BA5FF;
  --akzent-flaeche: #2A7FFF;
  --akzent-hell:  #16233A;
  --akzent-linie: #2C4874;

  --gut:          #6FBF86;
  --gut-hell:     #15271B;
  --warnung:      #D8A857;
  --warnung-hell: #2A2113;
  --fehler:       #E08878;
  --fehler-hell:  #2B1715;

  --schatten:     0 1px 2px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 14px/1.55 var(--schrift);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Grundgeruest ---------- */

.rahmen { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

.seitenleiste {
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
  padding: 20px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marke { display: block; text-decoration: none; padding: 4px 10px 18px; }
/* Feste Hoehe statt Breite: das Logo ist 4,6-mal so breit wie hoch, eine
   Hoehenangabe haelt die Seitenleiste unabhaengig von der Bilddatei ruhig. */
.marke-logo { display: block; height: 30px; width: auto; }
.marke-zusatz { display: block; font-size: 10px; letter-spacing: .09em;
                text-transform: uppercase; color: var(--blass); margin-top: 6px; }

.anmeldemarke { text-align: center; margin-bottom: 26px; }
.anmeldemarke img { height: 30px; width: auto; }
.anmeldemarke .marke-zusatz { margin-top: 8px; }

.seitenleiste nav { display: flex; flex-direction: column; gap: 1px; }
.gruppe {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blass); margin: 14px 0 4px; padding: 0 10px;
}
.gruppe:first-child { margin-top: 0; }

.seitenleiste nav a {
  display: block; padding: 7px 10px; border-radius: var(--radius-klein);
  color: var(--text); text-decoration: none; font-size: 13.5px;
}
.seitenleiste nav a:hover { background: var(--flaeche-2); color: var(--tinte); }
.seitenleiste nav a.aktiv { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }

.fussleiste {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 10px;
}
.konto { color: var(--text); text-decoration: none; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.konto:hover { color: var(--akzent); }
.abmelden {
  font: inherit; font-size: 12px; background: none; border: 1px solid var(--linie);
  color: var(--gedaempft); padding: 4px 9px; border-radius: var(--radius-klein); cursor: pointer;
}
.abmelden:hover { border-color: var(--linie-stark); color: var(--tinte); }

main { min-width: 0; }
.inhalt { max-width: 940px; padding: 36px 40px 80px; }
/* Datentabellen brauchen mehr Platz als Formulare - sonst bricht die Kundenspalte um. */
.inhalt.breit { max-width: 1320px; }

@media (max-width: 820px) {
  .rahmen { grid-template-columns: 1fr; }
  .seitenleiste { position: static; height: auto; flex-direction: row; flex-wrap: wrap;
                  align-items: center; gap: 12px; border-right: 0; border-bottom: 1px solid var(--linie); }
  .seitenleiste nav { flex-direction: row; flex-wrap: wrap; }
  .gruppe { display: none; }
  .fussleiste { margin: 0; border: 0; padding-top: 0; }
  .inhalt { padding: 24px 20px 60px; }
}

/* ---------- Typografie ---------- */

h1 { font-size: 22px; line-height: 1.25; font-weight: 650; color: var(--tinte);
     margin: 0 0 5px; letter-spacing: -.015em; }
h2 { font-size: 13px; font-weight: 650; color: var(--tinte); margin: 0 0 12px;
     letter-spacing: .01em; }
.unterzeile { color: var(--gedaempft); margin: 0 0 26px; font-size: 14px; max-width: 62ch; }
.normverweis { white-space: nowrap; }
p { margin: 0 0 12px; }
a { color: var(--akzent); }
code { font-family: var(--schrift-zahl); font-size: .88em; background: var(--flaeche-2);
       padding: 1.5px 5px; border-radius: 3px; color: var(--tinte); }

/* ---------- Bausteine ---------- */

.karte { background: var(--flaeche); border: 1px solid var(--linie);
         border-radius: var(--radius); padding: 18px 20px; margin: 0 0 14px;
         box-shadow: var(--schatten); }

.reihen { list-style: none; margin: 0; padding: 0; }
.reihen li { display: flex; justify-content: space-between; align-items: center; gap: 14px;
             padding: 9px 0; border-bottom: 1px solid var(--linie); }
.reihen li:last-child { border-bottom: 0; padding-bottom: 0; }
.reihen li:first-child { padding-top: 0; }
.reihen a { text-decoration: none; }
.reihen a:hover { text-decoration: underline; }
.wert { color: var(--gedaempft); font-size: 13px; font-variant-numeric: tabular-nums;
        white-space: nowrap; }

.marke-status { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px;
                border-radius: 20px; letter-spacing: .02em; white-space: nowrap; }
.status-fertig { background: var(--gut-hell); color: var(--gut); }
.status-arbeit { background: var(--warnung-hell); color: var(--warnung); }
.status-offen  { background: var(--flaeche-2); color: var(--gedaempft); }

button, .knopf {
  font: inherit; font-weight: 600; font-size: 13.5px; border: 0;
  border-radius: var(--radius-klein); padding: 9px 16px;
  background: var(--akzent); color: #fff; cursor: pointer; text-decoration: none;
  display: inline-block;
}
button:hover, .knopf:hover { filter: brightness(1.08); }
button.leise { background: transparent; color: var(--akzent); border: 1px solid var(--linie); font-weight: 500; }
button.leise:hover { border-color: var(--akzent-linie); filter: none; }
button.gefahr, a.gefahr { color: var(--fehler); }
button.gefahr:hover { border-color: var(--fehler); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

input[type=text], input[type=email], input[type=number] {
  font: inherit; width: 100%; padding: 9px 11px; border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte);
}

.hinweis { padding: 11px 14px; border-radius: var(--radius-klein); margin: 0 0 16px; font-size: 13.5px;
           border: 1px solid transparent; }
.hinweis-fehler { background: var(--fehler-hell); color: var(--fehler); border-color: var(--fehler); }
.hinweis-info   { background: var(--akzent-hell); color: var(--akzent); border-color: var(--akzent-linie); }

.leerzustand { text-align: center; padding: 26px 24px 20px; color: var(--gedaempft);
               border-bottom: 1px solid var(--linie); margin: -4px -20px 14px; }
.leerzustand h2 { color: var(--tinte); font-size: 15px; margin-bottom: 5px; }
.leerzustand p { max-width: 46ch; margin: 0 auto; }

/* ---------- Anmeldeseite ---------- */

.anmeldeflaeche { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
.anmeldeflaeche > * { width: 100%; max-width: 380px; }
.trenner { display: flex; align-items: center; gap: 12px; color: var(--blass); font-size: 11px;
           text-transform: uppercase; letter-spacing: .08em; margin: 20px 0; }
.trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.klein { font-size: 12.5px; color: var(--gedaempft); }

/* ---------- Kopfzeile mit Aktion ---------- */

.seitenkopf { display: flex; justify-content: space-between; align-items: flex-start;
              gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.seitenkopf .unterzeile { margin-bottom: 0; }

/* ---------- Kleine, wiederkehrende Bausteine ---------- */

.kopflink { font-size: 13.5px; }
.kopfaktionen { display: flex; align-items: center; gap: 14px; }
.abstand-oben { margin-top: 12px; }
.ohne-abstand { margin: 0; }
.ohne-linie { border-top: 0; border-bottom: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; }
.waagerecht-rollbar { overflow-x: auto; }
button:disabled, .knopf:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Auswertung ---------- */

.spalten-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 820px) { .spalten-zwei { grid-template-columns: 1fr; } }
.spalten-zwei .karte { margin-bottom: 0; }
.kennzahl .klein { color: var(--gedaempft); }

.kennzahlreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                 gap: 12px; margin-bottom: 16px; }
.karte.kennzahl { margin-bottom: 0; display: flex; flex-direction: column; gap: 4px; }
.kennzahl .beschriftung { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
                          color: var(--gedaempft); }
.kennzahl .wert { font-size: 20px; font-weight: 650; color: var(--tinte);
                  font-variant-numeric: tabular-nums; }
.kennzahl .wert.minus { color: var(--fehler); }

.verlauf { display: flex; align-items: flex-end; gap: 8px; height: 170px; margin-bottom: 10px; }
.verlauf .monat { flex: 1; display: flex; flex-direction: column; align-items: center;
                  height: 100%; gap: 6px; }
/* Feste Hoehe statt flex:1 - eine Prozenthoehe braucht einen Elternteil mit
   bestimmter Hoehe, sonst rechnet der Browser sie auf 0 herunter und alle
   Saeulen bleiben flach. */
.verlauf .saeulen { height: calc(100% - 20px); width: 100%; display: flex;
                    align-items: flex-end; justify-content: center; gap: 3px; }
.verlauf .saeule { width: 40%; min-height: 2px; border-radius: 2px 2px 0 0; }
.verlauf .saeule.umsatz { background: var(--akzent-flaeche); }
.verlauf .saeule.aufwand { background: var(--linie-stark); }
.verlauf .beschriftung { font-size: 10px; color: var(--gedaempft); }
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 2px;
         margin-right: 4px; vertical-align: baseline; }
.punkt.umsatz { background: var(--akzent-flaeche); }
.punkt.aufwand { background: var(--linie-stark); }

table.liste.schlicht { font-size: 13px; }
.exportreihe { display: flex; flex-wrap: wrap; gap: 10px; }
.ankreuzliste { max-height: 220px; overflow-y: auto; border: 1px solid var(--linie);
                border-radius: var(--radius-klein); padding: 8px 10px; }
.ankreuzliste ul { list-style: none; margin: 0; padding: 0; }
.ankreuzliste li { padding: 3px 0; font-size: 13px; }
.ankreuzliste label { display: inline; font-weight: 400; margin-left: 6px; }
.hinweis a { font-weight: 500; }
.knopf.leise-knopf { background: transparent; color: var(--akzent);
                     border: 1px solid var(--linie); }

/* ---------- Ablegeflaeche fuer Eingangsbelege ---------- */

.ablegeflaeche { border-style: dashed; border-width: 1.5px; text-align: center;
                 transition: border-color .12s, background .12s; }
.ablegeflaeche.bereit { border-color: var(--akzent); background: var(--akzent-hell); }
.ablage-inhalt strong { display: block; color: var(--tinte); font-size: 14px; margin-bottom: 4px; }
.ablage-inhalt p { max-width: 52ch; margin: 0 auto 12px; }

/* ---------- Filterleiste ueber Listen ---------- */

.filterleiste { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.filterleiste .suchfeld { flex: 1 1 240px; max-width: 420px; }
.filterleiste .statusfeld { flex: 0 0 180px; }
.filterleiste .mengenfeld { flex: 0 0 110px; }

/* ---------- Tabellen ---------- */

.tabellenrahmen { background: var(--flaeche); border: 1px solid var(--linie);
                  border-radius: var(--radius); overflow-x: auto;
                  box-shadow: var(--schatten); margin-bottom: 16px; }
table.liste { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.liste th { text-align: left; font-size: 10.5px; font-weight: 650; letter-spacing: .08em;
                 text-transform: uppercase; color: var(--gedaempft); padding: 10px 14px;
                 border-bottom: 1px solid var(--linie); background: var(--flaeche-2);
                 white-space: nowrap; }
table.liste td { padding: 11px 14px; border-bottom: 1px solid var(--linie);
                 vertical-align: middle; }
table.liste tr:last-child td { border-bottom: 0; }
table.liste tbody tr:hover { background: var(--flaeche-2); }
table.liste td.zahl, table.liste th.zahl { text-align: right;
                 font-variant-numeric: tabular-nums; white-space: nowrap; }
table.liste td.nummer { font-family: var(--schrift-zahl); font-size: 12.5px; white-space: nowrap; }
table.liste td.knapp { white-space: nowrap; }
/* Die dehnbare Spalte bekommt den freien Platz, alle anderen schrumpfen auf ihren Inhalt. */
table.liste td.dehnbar, table.liste th.dehnbar { width: 99%; }
table.liste a { text-decoration: none; font-weight: 500; }
table.liste a:hover { text-decoration: underline; }

/* ---------- Formulare ---------- */

.feldgruppe { display: grid; gap: 14px; margin-bottom: 16px; }
.feldgruppe.zweispaltig { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .feldgruppe.zweispaltig { grid-template-columns: 1fr; } }
.feldgruppe.zweispaltig .ganze-breite { grid-column: 1 / -1; }
.feld label { display: block; font-size: 12.5px; font-weight: 600; color: var(--tinte);
              margin-bottom: 5px; }
.feld .hilfe { font-size: 12px; color: var(--gedaempft); margin-top: 4px; }
.feld .fehler { font-size: 12.5px; color: var(--fehler); margin-top: 4px; }
.feld input, .feld select, .feld textarea {
  font: inherit; width: 100%; padding: 8px 10px; border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte);
}
.feld textarea { resize: vertical; }
input.schmal { max-width: 90px; }
input.mittel { max-width: 130px; }

/* ---------- Positionstabelle ---------- */

table.positionen th.s-pos { width: 52px; }
table.positionen th.s-menge { width: 90px; }
table.positionen th.s-einheit { width: 110px; }
table.positionen th.s-preis { width: 130px; }
table.positionen .beschreibung { margin-top: 6px; }
table.positionen { width: 100%; border-collapse: collapse; font-size: 13px; }
table.positionen th { text-align: left; font-size: 10.5px; font-weight: 650; letter-spacing: .08em;
                      text-transform: uppercase; color: var(--gedaempft); padding: 8px 8px 8px 0;
                      border-bottom: 1px solid var(--linie); }
table.positionen td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--linie);
                      vertical-align: top; }
table.positionen input, table.positionen textarea {
  font: inherit; padding: 6px 8px; border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); width: 100%;
}
table.positionen .entfernen { text-align: center; width: 74px; }

/* ---------- Summenblock ---------- */

.summen { margin-left: auto; max-width: 320px; font-size: 14px; }
.summen div { display: flex; justify-content: space-between; gap: 24px; padding: 6px 0; }
.summen .zahl { font-variant-numeric: tabular-nums; }
.summen .gesamt { border-top: 1px solid var(--linie-stark); margin-top: 4px; padding-top: 9px;
                  font-weight: 650; color: var(--tinte); font-size: 15px; }

/* ---------- Meldungen ---------- */

.meldungen { margin-bottom: 18px; display: grid; gap: 8px; }
.hinweis-erfolg { background: var(--gut-hell); color: var(--gut); border-color: var(--gut); }
.hinweis-warnung { background: var(--warnung-hell); color: var(--warnung); border-color: var(--warnung); }

/* ---------- Steuerkasten ---------- */

.steuerkasten { background: var(--flaeche-2); border: 1px solid var(--linie);
                border-radius: var(--radius-klein); padding: 12px 14px; font-size: 13px;
                margin-bottom: 16px; }
.steuerkasten .kennung { font-family: var(--schrift-zahl); font-weight: 650;
                         color: var(--akzent); }
.steuerkasten .norm { color: var(--gedaempft); font-size: 12.5px; }

.knopfzeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
              margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linie); }
.knopfzeile .rechts { margin-left: auto; }

/* Belegtext: vorformatiert, aber nicht ueber den Rand hinaus. */
details.karte > summary { cursor: pointer; list-style: revert; }
.belegtext { font-family: var(--schrift-zahl); white-space: pre-wrap; word-break: break-word; max-height: 24rem;
  overflow: auto; font-size: 12px; line-height: 1.5; color: var(--gedaempft);
  background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: 6px; padding: 12px; margin-top: 12px; }