/* buchhaltung — Oberfläche.
 *
 * Marke wie im Kundenportal: tragend ist #006994, das Logo-Cyan nur als
 * Akzent, **kein Dunkelmodus**. Die Kopfleiste ist seit dem 31.08.2026 hell
 * und Zeile für Zeile dieselbe wie auf cloud.1863venture.com — Bildmarke,
 * Wortmarke, Produktname, rechts wer angemeldet ist. Sie ist den ganzen Tag im
 * Blick und soll nicht auffallen; getragen wird sie von einer Haarlinie und
 * der Cyan-Kante, nicht von einer Farbfläche.
 *
 * Alles Maßhalten läuft über die Marken unten. Vorher standen Breiten und
 * Abstände als `style="flex:1 1 34rem"` in der Auszeichnung — dadurch sah
 * jede Ansicht ein bisschen anders aus und nichts ließ sich zentral ändern.
 * In app.js steht deshalb **kein einziges style-Attribut mehr**.
 *
 * Buchhaltung heißt Tabellen: enge Zeilen, Zahlen rechtsbündig in
 * Tabellenziffern, damit Spalten untereinander stehen.
 */

@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; }

:root {
  /* Marke */
  --blau: #006994; --blau-dunkel: #00405c; --cyan: #00aeef;
  --text: #0b1622; --grau: #5f7080; --grau-hell: #8a99a6;
  --linie: #e2e9ef; --flaeche: #f6f8fa; --weiss: #fff;
  --warn: #8a4b00; --warn-flaeche: #fdf4e8;
  --fehler: #a3231f; --fehler-flaeche: #fdeeed;
  --gut: #1c6b41; --gut-flaeche: #e8f4ec;

  /* Maße — eine Skala, keine Einzelfälle */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem;
  --kante: 10px; --kante-klein: 6px;
  --kopf-hoehe: 56px;
  --schatten: 0 1px 2px rgba(11, 22, 34, .04), 0 1px 8px rgba(11, 22, 34, .04);
  --spalte-schmal: 21rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text);
  background: var(--flaeche); font-size: 14px; line-height: 1.5; }
h1, h2, h3 { font-family: 'Space Grotesk', Inter, sans-serif; margin: 0; letter-spacing: -.01em;
  font-weight: 700; }
h1 { font-size: 1.3rem; } h2 { font-size: 1rem; } h3 { font-size: .82rem; color: var(--grau);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
p { margin: 0; }
a { color: var(--blau); }

/* ==========================================================================
   Kopf
   Hell statt dunkel — dieselbe Leiste wie im Kundenportal auf
   cloud.1863venture.com, damit die beiden Anwendungen unter derselben Marke
   nicht auseinanderlaufen. Getragen wird sie von einer Haarlinie und der
   Cyan-Kante darunter, nicht von einer Farbfläche; die dunkle Fassung war die
   erste und wirkte billig. Die Kante läuft bewusst nur unter der Marke, nicht
   über die ganze Breite.
   ========================================================================== */

.kopf { position: sticky; top: 0; z-index: 30; display: flex; align-items: center;
  gap: var(--s3) var(--s5); height: var(--kopf-hoehe); padding: 0 var(--s5);
  background: var(--weiss); color: var(--text); border-bottom: 1px solid var(--linie);
  box-shadow: 0 1px 0 rgba(11, 22, 34, .02), 0 6px 20px -18px rgba(11, 22, 34, .5); }
.kopf::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--cyan) 0 96px, transparent 96px); }

.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.marke-bild { display: block; height: 30px; width: auto; }
.wortmarke { display: flex; align-items: baseline; gap: 7px; white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.02em;
  line-height: 1; }
.wortmarke b { font-size: 20px; }
/* „VENTURE" steht im Logo als Versalzeile unter der Zahl. Waagerecht daneben
   braucht es Laufweite und einen Hauch weniger Gewicht, sonst drückt es die
   Jahreszahl weg. */
.wortmarke i { font-style: normal; font-size: 18px; font-weight: 600; color: var(--cyan);
  text-transform: uppercase; letter-spacing: .04em; }
.produkt { margin-left: 9px; padding-left: 18px; border-left: 1px solid var(--linie);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .15em;
  color: var(--grau-hell); white-space: nowrap; }

.kopf-wahl { margin-left: auto; display: flex; align-items: center; gap: var(--s2);
  min-width: 0; }

/* Auf schmalen Fenstern weicht zuerst der Produktname — Marke und Mandantenwahl
   sind beide unverzichtbar. */
@media (max-width: 760px) { .produkt { display: none; } }

.chip { display: inline-flex; align-items: center; gap: var(--s2); font: inherit; font-size: .82rem;
  padding: .3rem .6rem; border-radius: var(--kante-klein); border: 1px solid var(--linie);
  background: var(--weiss); color: var(--text); cursor: pointer; max-width: 15rem; }
.chip:hover { background: var(--flaeche); border-color: var(--grau-hell); }
select.chip { appearance: none; padding-right: 1.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--grau) 50%),
                    linear-gradient(135deg, var(--grau) 50%, transparent 50%);
  background-position: calc(100% - 12px) 52%, calc(100% - 7px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select.chip option { color: var(--text); background: #fff; }
.chip:focus-visible, .chip:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.chip.leer { border-color: var(--cyan); background: #e4f3fb; }
.chip.an { border-color: var(--blau); background: #e4f3fb; color: var(--blau); font-weight: 600; }

/* Mandant und Wirtschaftsjahr gehören zusammen; was danach kommt, betrifft
   nicht den Mandanten, sondern die Anlage. Eine Haarlinie sagt das. */
.kopf-trenner { width: 1px; height: 22px; background: var(--linie); }

/* Angemeldet: derselbe Cyan-Punkt wie im Kundenportal. */
#benutzerknopf { font-weight: 600; }
#benutzerknopf::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 174, 239, .2); }

/* ==========================================================================
   Zwei Ebenen Navigation
   Oben was man tut, darunter womit. Vorher standen beide Ebenen als sieben
   gleichrangige Reiter nebeneinander — Kontenrahmen so groß wie Buchen.
   ========================================================================== */

.hauptnav { display: flex; gap: var(--s1); padding: 0 var(--s4); background: var(--weiss);
  border-bottom: 1px solid var(--linie); position: sticky; top: var(--kopf-hoehe); z-index: 25;
  overflow-x: auto; }
.hauptnav button { font: inherit; font-size: .9rem; font-weight: 500; background: none; border: 0;
  cursor: pointer; padding: var(--s3) var(--s4); color: var(--grau);
  border-bottom: 2px solid transparent; white-space: nowrap; }
.hauptnav button:hover { color: var(--text); }
.hauptnav button.an { color: var(--blau); border-bottom-color: var(--blau); font-weight: 600; }

.unternav { display: flex; gap: var(--s1); margin-bottom: var(--s4); flex-wrap: wrap; }
.unternav button { font: inherit; font-size: .82rem; background: var(--weiss); color: var(--grau);
  border: 1px solid var(--linie); border-radius: 999px; padding: .3rem .85rem; cursor: pointer; }
.unternav button:hover { color: var(--text); border-color: var(--grau-hell); }
.unternav button.an { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600; }

main { padding: var(--s5) var(--s4); max-width: 1560px; margin: 0 auto; }

/* ==========================================================================
   Flächen und Raster
   ========================================================================== */

.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--kante);
  padding: var(--s4); box-shadow: var(--schatten); }
.karte + .karte, .raster + .karte, .karte + .raster { margin-top: var(--s4); }
.kartenkopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s3); flex-wrap: wrap; }
.kartenkopf > h2, .kartenkopf > h3 { margin: 0; }

.raster { display: grid; gap: var(--s4); align-items: start; }
.raster.zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.raster.schmal-breit { grid-template-columns: var(--spalte-schmal) minmax(0, 1fr); }
.raster.breit-schmal { grid-template-columns: minmax(0, 1fr) var(--spalte-schmal); }
.raster.kacheln { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.raster.felder { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
@media (max-width: 1100px) {
  .raster.zwei, .raster.schmal-breit, .raster.breit-schmal { grid-template-columns: minmax(0, 1fr); }
}

.reihe { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.reihe.ende { justify-content: flex-end; }
.trenner { height: 1px; background: var(--linie); margin: var(--s4) 0; border: 0; }

/* ==========================================================================
   Formulare
   ========================================================================== */

label.feld { display: block; margin-bottom: var(--s3); }
label.feld > span:first-child { display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--grau); margin-bottom: var(--s1); font-weight: 600; }
input, select, textarea { font: inherit; font-size: .88rem; width: 100%; padding: .45rem .6rem;
  border: 1px solid var(--linie); border-radius: var(--kante-klein); background: var(--weiss);
  color: var(--text); }
input:hover, select:hover { border-color: var(--grau-hell); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cyan); outline-offset: -1px;
  border-color: var(--cyan); }
input:disabled, select:disabled { background: var(--flaeche); color: var(--grau); }
input[type=number], .zahl, td.r, th.r { font-variant-numeric: tabular-nums; }
input[type=number], input.zahl { text-align: right; }
input[type=checkbox] { width: auto; }
.hinweis { font-size: .74rem; color: var(--grau); margin-top: var(--s1); }
label.schalter { display: inline-flex; align-items: center; gap: var(--s2); font-size: .82rem;
  color: var(--grau); cursor: pointer; }

/* Freischaltung je Mandant. Die Liste wird beim Haken „alle" nicht versteckt,
   sondern nur stummgeschaltet — sonst wäre nicht zu sehen, was wieder gälte,
   wenn man den Haken wegnimmt. */
.freigabe > span:first-child { display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--grau); margin-bottom: var(--s2); }
.freigabe.tafel { margin-top: var(--s4); padding: var(--s4);
  border: 1px solid var(--linie); border-radius: var(--kante); background: var(--flaeche); }
.hakenliste { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s2);
  padding: var(--s2) var(--s3); max-height: 14rem; overflow-y: auto;
  border: 1px solid var(--linie); border-radius: var(--kante-klein); background: var(--weiss); }
.hakenliste.aus { opacity: .45; }
.hakenliste label.schalter { color: var(--text); }

button.tat { font: inherit; font-size: .85rem; font-weight: 600; padding: .48rem 1rem; width: auto;
  border: 1px solid var(--blau); border-radius: var(--kante-klein); background: var(--blau);
  color: #fff; cursor: pointer; white-space: nowrap; }
button.tat:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
button.tat:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button.tat.leise { background: var(--weiss); color: var(--blau); border-color: var(--linie); }
button.tat.leise:hover { background: var(--flaeche); border-color: var(--grau-hell); }
button.tat.warnung { background: var(--fehler); border-color: var(--fehler); }
button.tat.warnung:hover { background: #8a1d19; border-color: #8a1d19; }
button.tat.klein { font-size: .74rem; padding: .2rem .55rem; }
button.tat:disabled { background: var(--linie); border-color: var(--linie); color: var(--grau);
  cursor: not-allowed; }
a.tat { text-decoration: none; display: inline-block; }

/* Eine Datei wählen sieht aus wie ein Knopf. */
label.dateiknopf { cursor: pointer; }
label.dateiknopf input { display: none; }

/* ==========================================================================
   Tabellen
   ========================================================================== */

.rollbar { overflow: auto; border: 1px solid var(--linie); border-radius: var(--kante-klein);
  max-height: 62vh; }
.rollbar.hoch { max-height: 78vh; }
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th { text-align: left; font-weight: 600; color: var(--grau); background: var(--flaeche);
  padding: var(--s2); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 1;
  white-space: nowrap; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
td { padding: .4rem var(--s2); border-bottom: 1px solid var(--linie); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; }
tbody tr:hover td { background: var(--flaeche); }
tr.summe td { font-weight: 700; background: var(--flaeche); }
/* Bilanzgliederung: Abschnitt (A. Eigenkapital) über seinen Positionen. */
tr.abschnitt td { font-weight: 700; color: var(--blau); padding-top: var(--s3); }
.ziffer { display: inline-block; min-width: 3.8em; color: var(--grau-hell); }
tr.unterpunkt td:first-child { padding-left: var(--s3); }
tr.summe:hover td { background: var(--flaeche); }
tr.leise td, td.leise, .leise { color: var(--grau); }
tr.storniert td { color: var(--grau-hell); text-decoration: line-through; }
tr.gruppe td { font-weight: 600; background: var(--flaeche); }
.anklickbar { cursor: pointer; }
.leer { color: var(--grau); padding: var(--s5); text-align: center; font-size: .86rem; }

/* ==========================================================================
   Marken, Kästen, Kennzahlen
   ========================================================================== */

.marke-klein { display: inline-block; font-size: .68rem; padding: .05rem .4rem; border-radius: 4px;
  background: var(--flaeche); color: var(--grau); border: 1px solid var(--linie); white-space: nowrap; }
.marke-klein.fest { background: var(--gut-flaeche); color: var(--gut); border-color: #c3e0ce; }
.marke-klein.offen { background: var(--warn-flaeche); color: var(--warn); border-color: #f0dcc0; }

.kasten { padding: var(--s3); border-radius: var(--kante-klein); font-size: .84rem;
  margin-bottom: var(--s3); border: 1px solid transparent; }
.kasten:last-child { margin-bottom: 0; }
.kasten.warnung { background: var(--warn-flaeche); color: var(--warn); border-color: #f0dcc0; }
.kasten.fehler { background: var(--fehler-flaeche); color: var(--fehler); border-color: #f3d3d1; }
.kasten.gut { background: var(--gut-flaeche); color: var(--gut); border-color: #c3e0ce; }
.kasten.ruhig { background: var(--flaeche); color: var(--grau); border-color: var(--linie); }

.kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--kante);
  padding: var(--s3) var(--s4); box-shadow: var(--schatten); }
.kachel .name { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--grau); font-weight: 600; }
.kachel .wert { font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; font-weight: 700;
  font-variant-numeric: tabular-nums; margin-top: var(--s1); }
.kachel .wert.minus { color: var(--fehler); }

/* ==========================================================================
   Erfassungszeile
   Die Buchungsmaske ist der Arbeitsplatz: eine Zeile, von links nach rechts
   auszufüllen, Eingabetaste bucht. Deshalb ein eigenes Raster statt einer
   Spalte gestapelter Felder.
   ========================================================================== */

.erfassung { display: grid; gap: var(--s2) var(--s3);
  grid-template-columns: 7.5rem 7.5rem 8rem minmax(9rem, 1fr) minmax(9rem, 1fr) 8rem 10rem auto; }
.erfassung label.feld { margin-bottom: 0; }
.erfassung .voll { grid-column: 1 / -1; }
@media (max-width: 1300px) {
  .erfassung { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .erfassung .tatspalte { grid-column: 1 / -1; }
}

.vorschau { display: grid; gap: 2px; font-size: .82rem; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--kante-klein); padding: var(--s2) var(--s3); }
.vorschau div { display: flex; justify-content: space-between; gap: var(--s4); }
.vorschau .steuerzeile { color: var(--grau); }
.vorschau .konto { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Dialog
   Statt prompt() und confirm(): ein echtes Fenster, das die Frage vollständig
   stellt und sich mit Escape schließen lässt.
   ========================================================================== */

dialog { border: 0; border-radius: var(--kante); padding: 0; max-width: 34rem; width: 92vw;
  box-shadow: 0 12px 40px rgba(11, 22, 34, .22); color: var(--text); }
dialog::backdrop { background: rgba(11, 22, 34, .45); }
dialog .inhalt { padding: var(--s5); }
dialog h2 { margin-bottom: var(--s2); }
dialog .frage { color: var(--grau); font-size: .86rem; margin-bottom: var(--s4); }
dialog .reihe { justify-content: flex-end; margin-top: var(--s4); }

/* ==========================================================================
   Meldung
   ========================================================================== */

.meldung { position: fixed; right: var(--s4); bottom: var(--s4); max-width: 30rem; z-index: 60;
  padding: var(--s3) var(--s4); border-radius: var(--kante-klein); background: var(--text);
  color: #fff; font-size: .85rem; box-shadow: 0 8px 24px rgba(11, 22, 34, .25); }
.meldung.fehler { background: var(--fehler); }
.meldung.gut { background: var(--gut); }

/* ==========================================================================
   Kleinkram
   ========================================================================== */

.zeilenhilfe { font-size: .78rem; color: var(--grau); margin-top: var(--s2); }
.unterzeile { font-size: .74rem; color: var(--grau); }
.suchfeld { max-width: 22rem; }
.tastenhilfe { font-size: .72rem; color: var(--grau-hell); }
kbd { font-family: inherit; font-size: .7rem; border: 1px solid var(--linie); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 .3rem; background: var(--weiss); color: var(--grau); }

/* ==========================================================================
   Anmeldung
   Eine Seite ohne Navigation: Vor der Anmeldung gibt es nichts zu sehen.
   ========================================================================== */

.anmeldung { max-width: 24rem; margin: 12vh auto 0; }
.anmeldung h1 { margin-bottom: var(--s2); }
.anmeldung .zeilenhilfe { margin-bottom: var(--s4); }
.anmeldung .reihe { margin-top: var(--s4); }

/* Altersstruktur der offenen Posten: ein Balken sagt mehr als fünf Zahlen. */
.staffel { display: grid; grid-template-columns: 12rem 1fr 6rem; gap: var(--s2);
  align-items: center; font-size: .82rem; }
.staffel .balken { height: 10px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.staffel .balken i { display: block; height: 100%; background: var(--cyan); }
.staffel .balken.spaet i { background: var(--fehler); }
.staffel .balken.offen i { background: var(--gut); }
.staffel .wert { text-align: right; font-variant-numeric: tabular-nums; }