/* ============================================================
   Teil 13: Bausteine
   ------------------------------------------------------------
   Muster, die jedes kaufmaennische Modul braucht: Karte, Kennzahlen-
   leiste, Betragszeile, Statusmarke, Fortschrittsbalken, Schaltflaechen,
   erklaerender Text. Sie standen unter .honorar-rechner gekapselt in
   12-honorar.css; kopiert man sie ins naechste Modul, gibt es sie zweimal
   und sie driften auseinander.

   Diese Datei wird VOR 12-honorar.css geladen, obwohl sie die hoehere
   Nummer traegt: die Ladeposition von 12 bleibt unangetastet (dort haengt
   die Reihenfolge gegenueber Teil 03), und modulspezifische Regeln sollen
   weiterhin gewinnen. Ein neues Modul haengt seine eigene Datei ans Ende
   der Kette.

   Herkunft der Werte: der gebaute Honorarrechner, nicht der Prototyp -
   diese Datei verschiebt, sie gestaltet nicht neu. Wo der Entwurf unter
   briefing-auftraege/prototyp-auftraege.html abwich (Betragszeile 4px
   statt 2px Innenabstand, .stark mit 5/8 statt 4/6), gilt der gebaute
   Stand. Neu hinzu kommen nur Muster, die es in der App noch nicht gibt:
   Kennzahlenleiste, Marke, Balken.

   Zum !important an den Schaltflaechen: Teil 03 faerbt jedes
   button-Element pauschal in --taupe-dark mit weisser Schrift, und zwar
   mit !important. Gegen !important kommt nur !important an.
   ============================================================ */

/* ── Karte: Inhaltsblock mit Titelzeile ──────────────────────── */
.karte {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: var(--s4);
}

.karte > h2,
.karte-titel {
  font-family: var(--f-bold);
  font-weight: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

/* ── Kennzahlen: Zahlenleiste ueber einer Ansicht ────────────── */
/* Die 1px Abstand auf der Rahmenfarbe ergeben die Trennlinien zwischen
   den Feldern, ohne dass ein Feld einen eigenen Rahmen braucht. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  margin-bottom: var(--s4);
}

@media (max-width: 720px) {
  .kennzahlen {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kennzahl {
  background: var(--bg);
  padding: 14px 16px;
}

.kennzahl .titel {
  font-family: var(--f-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 5px;
}

.kennzahl .wert {
  font-family: var(--f-head);
  font-weight: normal;
  font-size: 19px;
  color: var(--taupe-dark);
  font-variant-numeric: tabular-nums;
}

.kennzahl .fuss {
  font-family: var(--f-ui);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
}

/* ── Betragszeile: Bezeichnung links, Zahl rechts ────────────── */
/* Ohne eigene Schriftgroesse - die Zeile nimmt die ihres Kastens an. */
.zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

.zeile > span:first-child {
  color: var(--muted);
}

.zeile > span:last-child {
  font-variant-numeric: tabular-nums;
}

.zeile.stark {
  font-family: var(--f-bold);
  font-weight: normal;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.zeile.gesamt {
  font-family: var(--f-head);
  font-weight: normal;
  font-size: 17px;
  border-top: 2px solid var(--text);
  margin-top: 8px;
  padding-top: 11px;
}

.zeile.gesamt > span:last-child {
  color: var(--taupe-dark);
}

/* ── Marke: Statuskennzeichnung ──────────────────────────────── */
/* Die Zustaende heissen nach ihrer Rolle, nicht nach ihrem Gegenstand:
   der Entwurf kannte .hoai und .pausch, das waere im naechsten Modul
   schon wieder zu eng. */
.marke {
  display: inline-block;
  padding: 1px 7px;
  font-family: var(--f-ui);
  font-size: 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--muted);
  white-space: nowrap;
}

.marke.betont {
  border-color: var(--taupe);
  color: var(--taupe-dark);
}

.marke.gut {
  border-color: var(--pos);
  background: var(--pos-wash);
  color: var(--pos);
}

.marke.warnung {
  border-color: var(--neg);
  background: var(--neg-wash);
  color: var(--neg);
}

/* ── Balken: Fortschritt ─────────────────────────────────────── */
/* display:block, weil der Balken auch als <span> vorkommt - ein inline
   gesetztes Element ignoriert die Hoehe und bliebe unsichtbar. */
.balken {
  display: block;
  position: relative;
  height: 6px;
  min-width: 64px;
  background: var(--border);
}

.balken i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--taupe);
}

.balken.fertig i {
  background: var(--pos);
}

/* ── Schaltflaechen ──────────────────────────────────────────── */
/* Breite und Verteilung setzt die Aktionsleiste des jeweiligen Moduls,
   nicht der Knopf selbst - er kommt allein wie in der Reihe vor. */
.knopf {
  padding: 10px 14px;
  font-family: var(--f-ui);
  font-size: 13.5px;
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius) !important;
  cursor: pointer;
  transition: all 0.12s;
  border: 1px solid var(--border) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

.knopf:hover {
  background: var(--taupe-wash) !important;
  border-color: var(--taupe) !important;
  color: var(--taupe-dark) !important;
}

.knopf.primaer {
  background: var(--taupe-dark) !important;
  border-color: var(--taupe-dark) !important;
  color: #ffffff !important;
  font-family: var(--f-bold);
  font-weight: normal;
}

.knopf.primaer:hover {
  background: var(--taupe-hover) !important;
  border-color: var(--taupe-hover) !important;
  color: #ffffff !important;
}

.knopf:disabled {
  opacity: 0.4;
  cursor: default;
}

.aktionen {
  display: flex;
  gap: 8px;
  margin-top: var(--s4);
  flex-wrap: wrap;
}

.aktionen.rechts {
  justify-content: flex-end;
}

/* ── Erklaerender Text ───────────────────────────────────────── */
/* .leitsatz steht ueber einer Ansicht und sagt, wozu sie da ist;
   .notiz steht daneben; .klein ist die kleinste lesbare Stufe. */
.leitsatz {
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 var(--s4);
  max-width: 82ch;
}

.leitsatz b {
  color: var(--text);
}

.notiz {
  font-family: var(--f-ui);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.klein {
  font-size: 11.5px;
  color: var(--muted);
}

/* ── Formularfeld und Feldreihe ──────────────────────────────── */
/* Aus 12-honorar.css hierher gezogen, als das Auftragsmodul dieselben
   Muster brauchte. Bewusst nur ueber Klassen: der Prototyp stylte
   input[type=text] und select global, und das faerbt auf einer gemeinsamen
   Seitenbasis jede andere Ansicht mit. Das Aussehen der Eingabefelder
   bleibt deshalb beim jeweiligen Modul, hier steht nur ihre Anordnung. */
.feld {
  margin-bottom: 13px;
}

.feld:last-child {
  margin-bottom: 0;
}

.feld > label {
  display: block;
  font-family: var(--f-ui);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.feld-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 620px) {
  .feld-reihe {
    grid-template-columns: 1fr;
  }
}

/* Zahlen stehen rechts und auf gleicher Ziffernbreite - in jedem Modul. */
.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Die Einheit sitzt im Feld, nicht daneben. */
.mit-einheit {
  position: relative;
}

.mit-einheit input {
  padding-right: 44px;
}

.mit-einheit .einheit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-ui);
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}