/* =============================================================================
   EmKater WWS — Seitengeruest
   Ergaenzt app.css um Navigation, Bereichsreiter und Einstiegsseiten.
   Bewusst eine eigene Datei: app.css traegt das Farbschema, hier steht nur
   die Gliederung. Alle Farben kommen aus den dort definierten Variablen,
   damit Hell- und Dunkelmodus ohne Zutun mitlaufen.
   ============================================================================= */

/* --- Hauptnavigation: ein Eintrag je Bereich ------------------------------- */

.navi-bereich {
  gap: var(--abstand-2);
  font-weight: 600;
  color: var(--schrift);
}
.navi-bereich .navi-titel { flex: 1; min-width: 0; }
.navi-bereich.aktiv { color: var(--gruen-dunkel); font-weight: 700; }
.navi-bereich.aktiv .sym { color: var(--gruen-dunkel); }
.navi-bereich .marker { background: var(--linie); color: var(--schrift); }
.navi-bereich.aktiv .marker { background: var(--gruen); color: #111; }

/* --- Reiterleiste des Bereichs -------------------------------------------- */

/* Zieht sich mit einem negativen Rand genau auf den Innenrand der
   Inhaltsspalte zurueck, damit die Leiste von Kante zu Kante laeuft.
   --inhalt-y/--inhalt-x stehen in app.css; vorher standen hier eigene
   Zahlen, die um 2 px danebenlagen. */
.bereichsreiter {
  display: flex;
  align-items: flex-end;
  gap: var(--abstand-4);
  flex-wrap: wrap;
  margin: calc(-1 * var(--inhalt-y)) calc(-1 * var(--inhalt-x)) var(--abstand-4);
  padding: var(--abstand-2) var(--inhalt-x) 0;
  background: var(--flaeche-alt);
  border-bottom: var(--linie-breite) solid var(--linie);
}

.bereichsreiter .bereichsname {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  padding-bottom: var(--abstand-2);
  font-weight: 700;
  font-size: var(--text-liste);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--schrift-hell);
  white-space: nowrap;
}
.bereichsreiter .bereichsname .sym { color: var(--gruen-dunkel); }

.bereichsreiter .reiter { flex: 1; min-width: 0; border-bottom: 0; margin-bottom: 0; }
.bereichsreiter .reiter a { display: inline-flex; align-items: center; gap: var(--abstand-2); }
.bereichsreiter .reiter a .marker {
  background: var(--linie);
  color: var(--schrift);
  font-size: var(--text-mini);
  min-width: 16px;
  padding: 0 5px;
}
.bereichsreiter .reiter a.aktiv .marker { background: var(--gruen); color: #111; }

/* Beschriftete Trennung in der Reiterleiste.

   Zehn Reiter nebeneinander sehen alle gleich schwer aus, obwohl „Kassieren"
   hundertmal am Tag gebraucht wird und „Datenexport" einmal im Jahr. Die
   Beschriftung sagt, welche Familie hier anfaengt - Verkaufen,
   Tagesabschluss, Nachschlagen, Pruefung, Schnittstellen.

   Bewusst leiser als die Reiter selbst: sie ist Ordnung, kein Ziel. Wer sie
   anklickt, soll nichts erwarten, und deshalb ist sie auch kein Verweis. Die
   Daten dazu stehen als `gruppe` am Menuepunkt (Navigation.php); ohne sie
   sieht die Leiste aus wie vorher.                                          */
.bereichsreiter .reiter .reiter-gruppe {
  display: inline-block;
  padding: 0 var(--abstand-3) var(--abstand-2) var(--abstand-2);
  font-size: var(--text-mini);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--schrift-hell);
  border-left: var(--linie-breite) solid var(--linie);
  white-space: nowrap;
}
/* Vor der ersten Gruppe gibt es nichts zu trennen. */
.bereichsreiter .reiter .reiter-gruppe:first-child { border-left: 0; padding-left: 0; }

/* --- Einstiegsseiten ------------------------------------------------------- */

/* Kopf einer Einstiegsseite: Titel, Einordnung, die haeufigste Aktion rechts.
   Gleiche Rangfolge wie .seitenkopf in app.css, nur mit einer Zeile
   Einordnung darunter. */
.einstieg-kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-4);
  flex-wrap: wrap;
  margin-bottom: var(--abstand-4);
}
.einstieg-kopf h1 { margin: 0 0 var(--abstand-1); font-size: var(--text-gross); }
.einstieg-kopf .untertitel { margin: 0; color: var(--schrift-hell); max-width: 62ch; }
.einstieg-kopf .werkzeuge { margin-left: auto; display: flex; gap: var(--abstand-2); flex-wrap: wrap; }

/* Reihe mit den haeufigen Aktionen — steht immer ganz oben.
   Die Tasten sehen aus wie ueberall sonst; eine eigene Groesse hatten sie
   frueher, sie war mit der von .btn deckungsgleich. */
.schnellzugriff {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-4);
}

/* --- Kennzahl --------------------------------------------------------------
   Baustein "Kennzahl". Eine Zahl, ein Wort dazu, meist ein Verweis auf die
   Liste dahinter. Fuer Groessen, nach denen jemand handelt - nicht als
   Zierde. Wer eine Zahl nur nachschlagen will, findet sie in der Liste.

   Die Zahl steht in Tabellenziffern, damit eine Reihe von Kennzahlen
   untereinander dieselbe Stellenbreite hat.                                */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-4);
}
.kennzahl {
  display: block;
  background: var(--flaeche);
  border: var(--linie-breite) solid var(--linie);
  border-radius: var(--radius);
  padding: var(--abstand-3);
  color: var(--schrift);
}
a.kennzahl:hover { border-color: var(--gruen); text-decoration: none; }
.kennzahl .k-wert {
  font-size: var(--text-zahl);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.kennzahl .k-text { color: var(--schrift-hell); font-size: var(--text-klein); }
/* Zusatzzeile unter der Zahl, wenn die Einheit erklaert werden muss. */
.kennzahl .k-hinweis, .k-hinweis { color: var(--schrift-hell); font-size: var(--text-klein); }

/* Eine Kennzahlenreihe darf auch eine Beschreibungsliste sein (<dl> mit
   <dt> als Wort und <dd> als Zahl) — das ist die ehrlichere Auszeichnung.
   Browser ruecken <dd> dann aber um 40 px ein und schoeben Zahl und Text
   aus der Kachel heraus. */
.kennzahlen dt, .kennzahlen dd { margin: 0; }
.kennzahl dt { color: var(--schrift-hell); font-size: var(--text-klein); }
/* Farbe nur als Aussage: rot heisst Eingriff noetig, gelb heisst ansehen.
   (Die Klassennamen sind alt und liegen ueber Kreuz — .warnung ist rot,
   .achtung ist gelb. Umbenennen wuerde 60 Vorlagen brechen.) */
.kennzahl.warnung .k-wert { color: var(--rot); }
.kennzahl.achtung .k-wert { color: var(--gelb); }

/* Zwischenüberschrift über einer Kennzahlenreihe.
   Trennt Größen, die man nicht verwechseln darf — Bestände von Flüssen. */
.kz-gruppe {
  margin: var(--abstand-3) 0 var(--abstand-1);
  font-size: var(--text-klein);
  font-weight: 600;
  color: var(--schrift-hell);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.kz-gruppe:first-child { margin-top: 0; }

/* Abschnitt einer Einstiegsseite */
.abschnitt { margin-bottom: var(--abstand-5); }
.abschnitt > h2 {
  margin: 0 0 var(--abstand-1);
  font-size: var(--text-titel);
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
}
.abschnitt > .abschnitt-text {
  margin: 0 0 var(--abstand-3);
  color: var(--schrift-hell);
  font-size: var(--text-liste);
  max-width: 78ch;
}

/* Karten mit Ziel, Erklaerung und optionaler Zahl — statt reiner Linkliste */
.linkkarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--abstand-2);
}
.linkkarte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-0);
  background: var(--flaeche);
  border: var(--linie-breite) solid var(--linie);
  border-left: 3px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--abstand-3);
  color: var(--schrift);
}
.linkkarte:hover {
  border-left-color: var(--gruen);
  background: var(--flaeche-alt);
  text-decoration: none;
}
.linkkarte .lk-titel { font-weight: 600; display: flex; align-items: center; gap: var(--abstand-2); }
.linkkarte .lk-titel .marker { margin-left: auto; }
.linkkarte .lk-text { color: var(--schrift-hell); font-size: var(--text-klein); line-height: 1.35; }

/* Zweispaltiger Block: links Arbeitsvorrat, rechts Zahlen */
.spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--abstand-4);
  align-items: start;
}

@media (max-width: 900px) {
  /* --inhalt-x ist hier bereits auf die schmale Stufe gesetzt (app.css),
     die Leiste zieht sich von selbst mit. */
  .bereichsreiter .bereichsname { display: none; }

  /* Auf schmalen Geraeten waechst eine umbrechende Reiterleiste schnell auf
     mehrere Zeilen und schiebt den Inhalt aus dem Bild. Stattdessen eine
     Zeile, die sich seitlich schieben laesst. */
  .bereichsreiter .reiter {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .bereichsreiter .reiter a { white-space: nowrap; }
}

@media print {
  .bereichsreiter, .schnellzugriff { display: none !important; }
}