/* Balsa Lizenzverwaltung — Oberfläche.
 *
 * App-Schicht ÜBER dem Balsa Design System. Die Basis (Tokens, self-gehostete
 * Plus Jakarta Sans, globaler Focus-Ring, prefers-reduced-motion) kommt aus
 * /design/styles.css — einer unveränderten Kopie aus dem Design-Paket.
 * Regel des Systems: Token ändern, nie die Instanz. Deshalb hier:
 *
 *  - keine eigenen Hexwerte, keine px-Schriftgrößen, keine Ad-hoc-Abstände;
 *    alles über var(--*) aus tokens/tokens.css,
 *  - UI-Gewichte nur 400/500 (--fw-regular/--fw-medium),
 *  - Status nie über Farbe allein: jedes Abzeichen und jeder Kasten trägt ein
 *    Lucide-Outline-Icon (2px, currentColor) neben dem Text,
 *  - kein Blau — auch nicht für Hinweise,
 *  - kein Dark Mode (Design-System §12: bewusst nicht gebaut).
 *
 * Tonlage: dichte Admin-Fläche (§5 Dichte-Flex) — dieselben Skalen, aber ihr
 * unteres Ende: --fs-sm/--fs-xs in Tabellen, --radius-xs an Eingabefeldern,
 * kleinere Zeilenknöpfe (32 px, über der WCAG-Untergrenze von 24 px; die
 * Knöpfe außerhalb der Tabellen bleiben bei 44 px).
 *
 * Bewusst ohne Framework und ohne Build-Schritt: eine Datei, die man in fünf
 * Minuten versteht und direkt am Server ändern kann.
 */

:root {
  /* Zwei Layout-Größen, die das Token-Set (noch) nicht abdeckt — der Kompakt-
     Satz für dichte Screens wird laut §5 erst beim ersten echten dichten
     Screen kanonisiert. Bis dahin lokal und benannt statt verstreut. */
  --breite-verwaltung: 1240px;
  --breite-anmeldung: 24rem;

  /* Akzent-Tints der Roh-Ebene, hier auf sprechende Namen gelegt (wie im
     Design-Paket selbst bei .btn-secondary:hover). Nur für Flächen. */
  --flaeche-akzent: var(--balsa-terrakotta-08);
  --flaeche-akzent-hover: var(--balsa-terrakotta-12);
  --rand-akzent: var(--balsa-terrakotta-30);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* --- Icons -------------------------------------------------------------- */

/* Lucide-Outline (2px) als Maske: die Farbe folgt currentColor, das Markup in
   app.js bleibt unangetastet. Welches Zeichen gilt, sagt --zeichen. */
.abzeichen::before,
.toast::before,
.fehler::before,
.warnkasten::before {
  content: '';
  width: 1.15em;
  height: 1.15em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--zeichen) center / contain no-repeat;
  mask: var(--zeichen) center / contain no-repeat;
}

/* --- Kopfbereich -------------------------------------------------------- */

/* Hinweis und Kopfzeile bleiben zusammen oben stehen — der Intern-Hinweis ist
   damit auf jeder Ansicht sichtbar, auch auf der Anmeldung. */
.kopfbereich {
  position: sticky;
  top: 0;
  z-index: 20;
}

.intern-hinweis {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-6);
  background: var(--error-bg);
  border-bottom: 2px solid var(--error-base);
  color: var(--error-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.intern-hinweis strong {
  font-weight: var(--fw-medium);
}
.hinweis-zeichen {
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-2) var(--space-6);
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
}
/* Ohne diese Zeile bliebe die Kopfzeile auf der Anmeldung sichtbar: das
   hidden-Attribut käme gegen die Regel darüber nicht an. */
header[hidden] {
  display: none;
}

.marke {
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marke span {
  font-weight: var(--fw-regular);
  color: var(--fg-secondary);
}

header nav {
  display: flex;
  gap: var(--space-1);
  margin-right: auto;
  overflow-x: auto;
  /* Auf schmalen Schirmen scrollt die Navigation seitlich — ohne sichtbaren
     Balken, der sonst zwischen Kopfzeile und Inhalt hängt. */
  scrollbar-width: none;
}
header nav::-webkit-scrollbar {
  display: none;
}

/* Der Benutzername ist der Weg zur Kontenverwaltung: gleiche Höhe und
   Fläche wie ein stiller Knopf, kein loser unterstrichener Link. */
#benutzer {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  color: var(--fg-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
#benutzer:hover {
  background: var(--bg-inset);
  color: var(--fg-primary);
}

header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  color: var(--fg-secondary);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
header nav a:hover {
  background: var(--bg-inset);
  color: var(--fg-primary);
}
/* Aktiv nicht nur farblich: die Unterkante trägt die Auswahl mit. */
header nav a.aktiv {
  background: var(--flaeche-akzent);
  color: var(--fg-accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

main {
  max-width: var(--breite-verwaltung);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-20);
}

/* --- Text --------------------------------------------------------------- */

h1 {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-1);
}
h2 {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-3);
}
.unterzeile {
  color: var(--fg-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-6);
}
/* Im Seitenkopf hängt die Unterzeile direkt am Titel; den Abstand nach unten
   trägt die .kopf-reihe, damit er auf jeder Seite derselbe ist. */
.seitentitel {
  min-width: 0;
}
.seitentitel h1 {
  margin: 0;
}
.seitentitel .unterzeile {
  margin: var(--space-1) 0 0;
  max-width: var(--max-width-prose);
}
/* Erklärende Zeile direkt in einer Karte (z. B. Verbrauch auf dem
   Lizenzblatt): bündig mit dem Karteninhalt statt an der Kante klebend. */
.karte > .unterzeile {
  margin: var(--space-4) var(--space-5) 0;
}
.laden {
  color: var(--fg-secondary);
  font-size: var(--fs-sm);
}

/* --- Flächen ------------------------------------------------------------ */

.karte {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.karte + .karte {
  margin-top: var(--space-5);
}
.karte > h2 {
  padding: var(--space-4) var(--space-5);
  margin: 0;
  border-bottom: 1px solid var(--border-light);
}
.karte-inhalt {
  padding: var(--space-5);
}

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

table {
  width: 100%;
  border-collapse: collapse;
}
/* Dichte Admin-Tabelle: 12 px seitlich je Zelle, die erste und letzte Zelle
   holen den Kartenrand mit 20 px auf, damit Text und Kartentitel bündig sind. */
th {
  text-align: left;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-secondary);
  font-weight: var(--fw-medium);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: bottom;
  white-space: nowrap;
}
/* Lange Überschriften (Verträge: „Perioden & Zahlweise", „€ / Monat netto")
   dürfen zweizeilig werden — sonst zwingen sie die ganze Tabelle bei 1240 px
   in den seitlichen Scroll, obwohl die Zellen darunter schmal sind. */
th.umbruch {
  white-space: normal;
  min-width: 6.5rem;
}
td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
tbody tr:last-child td {
  border-bottom: none;
}
tr > th:first-child,
tr > td:first-child {
  padding-left: var(--space-5);
}
tr > th:last-child,
tr > td:last-child {
  padding-right: var(--space-5);
}
tbody tr:hover {
  background: var(--bg-inset);
}
td.zahl {
  font-variant-numeric: tabular-nums;
}
td.aktionen {
  text-align: right;
  white-space: nowrap;
}
/* Zeilenknöpfe stehen mit festem Abstand nebeneinander, nicht mit einem
   Leerzeichen, dessen Breite von der Schrift abhängt. */
td.aktionen .knopf + .knopf {
  margin-left: var(--space-2);
}
.nowrap {
  white-space: nowrap;
}
.tabelle-scroll {
  overflow-x: auto;
}

/* Ablaufende Lizenz bzw. Vertrag mit näher rückender Frist: dezenter
   Hinweisstreifen, keine Alarmfarbe. Die Zeile sagt im Text, was ansteht —
   der Streifen ist nur die Wiederholung. */
tr.laeuft-ab td:first-child {
  box-shadow: inset 3px 0 0 var(--warning-base);
}

/* Abgelaufene Lizenz: die stärkste Stufe der Tabelle. Hier ist die Frist nicht
   näher gerückt, sie ist verstrichen, der Kunde arbeitet nicht mehr. Deshalb
   zusätzlich zum Streifen ein eingefärbter Grund. Die Farbe ist die
   Wiederholung, das Abzeichen in der Zeile sagt es im Text. */
tr.abgelaufen td {
  background: var(--error-bg);
}
tr.abgelaufen td:first-child {
  box-shadow: inset 3px 0 0 var(--error-base);
}
/* Der eingefaerbte Grund liegt auf der Zelle und wuerde das Zeilen-Hover
   verdecken. Deshalb hier eine eigene Stufe, sonst wirkt die Zeile tot. */
tbody tr.abgelaufen:hover td {
  background: var(--error-border);
}

/* Gruppenzeile der Alarm-Zone: trennt kritisch, hoch und mittel voneinander.
   Kein eigener Farbwert, sondern dieselbe Fläche und dieselbe Schrift wie eine
   Tabellenüberschrift — die Zeile ist eine Überschrift, keine Meldung. */
tr.alarm-gruppe td {
  background: var(--bg-inset);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-secondary);
  font-weight: var(--fw-medium);
}
/* Eine Überschrift reagiert nicht auf den Mauszeiger. */
tbody tr.alarm-gruppe:hover td {
  background: var(--bg-inset);
}

/* Summenzeile, z. B. wiederkehrende Erlöse eines Vertrags. */
tfoot td {
  font-weight: var(--fw-medium);
  background: var(--bg-inset);
  border-top: 1px solid var(--border);
  border-bottom: none;
}

.firma-zelle {
  font-weight: var(--fw-medium);
}
.leise {
  color: var(--fg-secondary);
}
.klein {
  font-size: var(--fs-xs);
}
.mono {
  font-family: var(--font-mono);
}
/* Vertragsnummern u. Ä. nicht mitten im Bezeichner umbrechen — die Tabelle
   scrollt notfalls in ihrem eigenen Container. Gilt für die Zelle wie für
   einen verlinkten Bezeichner darin. */
td.mono,
td .mono {
  white-space: nowrap;
}

/* --- Abzeichen ---------------------------------------------------------- */

/* Jeder Status trägt Icon UND Text (WCAG 1.4.1) — Farbe allein entscheidet
   nie. Die vier Klassen bilden den warmen Status-Satz des Design-Systems ab. */
.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  white-space: nowrap;
}
.abzeichen.gruen {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.abzeichen.gelb {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}
.abzeichen.grau {
  background: var(--bg-inset);
  border-color: var(--border);
  color: var(--fg-secondary);
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
}
/*
 * Einordnung einer Lizenz (Probe, intern, ohne Vertrag). Bewusst ohne Icon und
 * damit ohne .abzeichen: das Kennzeichen steht oft in einer Tabellenzelle neben
 * dem Statusabzeichen, und zwei Icons nebeneinander lesen sich als Fehler.
 * Kommerzielle Lizenzen tragen gar keines — sie sind der Normalfall.
 */
.art-kennzeichen {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-inset);
  color: var(--fg-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  white-space: nowrap;
}
/* Probe und intern sind Vertriebszustände, kein Fehler: warnfarben, nicht rot. */
.art-kennzeichen.art-probe,
.art-kennzeichen.art-intern {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.abzeichen.rot {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E");
}

/* Überbelegung ist ein Vertriebssignal, kein Fehler — deshalb der Warn-Satz,
   nicht der Fehler-Satz. Die Zahl steht im Text. */
.ueberbelegung {
  display: inline-block;
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-pill);
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  cursor: help;
}

/* --- Knöpfe ------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--fg-primary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.knopf:hover {
  background: var(--bg-inset);
}

/* Ein gefüllter Terrakotta-Knopf pro Ansicht (Design-Prinzip 1). */
.knopf.haupt {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-on-accent);
}
.knopf.haupt:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.knopf.gefahr {
  border-color: var(--error-border);
  color: var(--error-text);
}
.knopf.gefahr:hover {
  background: var(--error-bg);
}
.knopf.still {
  background: transparent;
  border-color: transparent;
  color: var(--fg-secondary);
}
.knopf.still:hover {
  background: var(--bg-inset);
  color: var(--fg-primary);
}

/* Zeilenknopf: dichter Screen, deshalb 32 px (Untergrenze WCAG 2.5.8 = 24). */
.knopf.klein {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
}
/* In einer Tabelle stehen viele „Verlängern" nebeneinander — gefüllt wäre das
   Terrakotta als Tapete. Der Zeilenknopf trägt den Akzent nur getönt, der
   gefüllte Knopf bleibt der Ansicht vorbehalten. */
.knopf.klein.haupt {
  background: var(--flaeche-akzent);
  border-color: var(--rand-akzent);
  color: var(--fg-accent);
}
.knopf.klein.haupt:hover {
  background: var(--flaeche-akzent-hover);
  border-color: var(--rand-akzent);
}

/* Deaktiviert: Fläche Sand, Text tertiär — nie nur Opacity (Zustands-Kanon). */
.knopf[disabled],
.knopf.klein.haupt[disabled] {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--fg-tertiary);
  cursor: not-allowed;
}

.knopf-reihe {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.kopf-reihe {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
/* Die Aktionen eines Seitenkopfs brechen nicht mitten im Titel um, sondern
   erst, wenn der Platz wirklich fehlt. */
.kopf-reihe > .knopf-reihe {
  flex: none;
  justify-content: flex-end;
}
/* Abschließende Knopfreihe unter den Karten einer Seite (z. B. Abschluss). */
main > .knopf-reihe {
  margin-top: var(--space-5);
}
/* Fuß eines Formulars: links die Rechen-Vorschau, rechts die Knöpfe. Bricht
   auf schmalen Schirmen untereinander. */
.formular-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
}
.formular-fuss > .hinweis,
.formular-fuss > span {
  color: var(--fg-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.formular-fuss > .hinweis:empty,
.formular-fuss > span:empty {
  display: none;
}
.formular-fuss > .knopf-reihe,
.formular-fuss > .knopf {
  margin-left: auto;
}

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

.feld {
  display: block;
  margin-bottom: var(--space-4);
}
.feld > span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--fg-secondary);
  margin-bottom: var(--space-1);
}
.feld .hinweis {
  display: block;
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  color: var(--fg-tertiary);
  font-size: var(--fs-xs);
  margin: var(--space-1) 0 0;
}
input[type='text'],
input[type='search'],
input[type='password'],
input[type='number'],
input[type='date'],
input[type='month'],
input[type='file'],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-primary);
  color: var(--fg-primary);
  font: inherit;
  font-size: var(--fs-sm);
}
textarea {
  min-height: 0;
  line-height: var(--lh-normal);
  resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}
/* Dateifeld: derselbe Rahmen wie jedes andere Feld, der Auswahlknopf darin
   als kleiner Zeilenknopf statt der Browser-Standardfläche. */
input[type='file'] {
  padding: var(--space-1) var(--space-1);
  color: var(--fg-secondary);
  font-size: var(--fs-xs);
  cursor: pointer;
}
input[type='file']::file-selector-button {
  min-height: 32px;
  margin-right: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-secondary);
  color: var(--fg-primary);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
input[type='file']::file-selector-button:hover {
  background: var(--bg-inset);
}
/* Der Focus-Ring selbst kommt global aus dem Design-System (2 px Terrakotta,
   Offset 2) — hier wird er nur nicht entfernt. */

/* Ankreuzfeld: Kästchen und Beschriftung in einer Zeile. */
.feld.ankreuz {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.feld.ankreuz > span {
  margin-bottom: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  color: var(--fg-primary);
}
.feld.ankreuz input {
  width: var(--space-5);
  height: var(--space-5);
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}
.gitter-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 var(--space-5);
}

/* Suche und Statusfilter über einer Tabelle: nebeneinander, auf schmalen
   Schirmen untereinander. Sitzt im Kartenkopf, deshalb dieselbe Polsterung
   und Trennlinie wie .karte-kopf. */
.filter-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-light);
}
.filter-reihe .feld {
  flex: 1 1 16rem;
  margin-bottom: 0;
}
.filter-reihe .feld.schmal {
  flex: 0 1 14rem;
}
/* Ergebnis- oder Einschränkungstext neben den Filtern („Nur Firma X · alle
   zeigen", Stand im Monat): auf Höhe der Eingabefelder, nicht der Labels. */
.filter-reihe > span,
.filter-hinweis {
  align-self: flex-end;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--fg-secondary);
  font-size: var(--fs-sm);
}
.filter-hinweis a {
  margin-left: 0.25em;
}

/* Eine Vertragsperiode (Erstlaufzeit bzw. Verlängerung) als eigener Block.
   Die Umrandung macht sichtbar, dass Dauer, Zahlweise und Betrag zusammen
   gehören und je Periode getrennt gelten. */
fieldset.periode {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-4) var(--space-2);
  margin: 0 0 var(--space-4);
  background: var(--bg-primary);
}
fieldset.periode > legend {
  padding: 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--fg-secondary);
}
/* Die Rechen-Vorschau unter den Feldern einer Periode. */
fieldset.periode > .hinweis {
  display: block;
  color: var(--fg-tertiary);
  font-size: var(--fs-xs);
  margin: 0 0 var(--space-3);
}
fieldset.periode input:disabled {
  background: var(--bg-inset);
  color: var(--fg-tertiary);
}

/* Kartenkopf mit Aktionsknopf rechts (z. B. „Zahlung erfassen"). */
.karte > .karte-kopf {
  padding: var(--space-4) var(--space-5);
  margin: 0;
  border-bottom: 1px solid var(--border-light);
  align-items: center;
}
.karte > .karte-kopf > h2 {
  padding: 0;
  margin: 0;
  border: 0;
}

/* Fehlerkasten über dem Formular. Kein display hier: das hidden-Attribut, mit
   dem app.js ihn ein- und ausblendet, muss weiter greifen. Die Meldung unten
   trägt dieselbe Klasse und ist deshalb ausgenommen. */
.fehler:not(.toast) {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
  margin-bottom: var(--space-4);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-sm);
  background: var(--error-bg);
  color: var(--error-text);
  font-size: var(--fs-sm);
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}
.fehler:not(.toast)::before {
  position: absolute;
  left: var(--space-4);
  top: var(--space-3);
  width: var(--space-5);
  height: var(--space-5);
}

/* --- Anmeldung ---------------------------------------------------------- */

.anmeldung {
  max-width: var(--breite-anmeldung);
  margin: var(--space-16) auto 0;
}
.anmeldung .marke {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-1);
}
.anmeldung p {
  color: var(--fg-secondary);
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-6);
}

/* --- Dialoge ------------------------------------------------------------ */

dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--fg-primary);
  padding: 0;
  max-width: var(--max-width-prose);
  width: calc(100% - var(--space-8));
  box-shadow: var(--shadow-xl);
}
dialog::backdrop {
  background: color-mix(in srgb, var(--fg-primary) 55%, transparent);
}
dialog h2 {
  padding: var(--space-5) var(--space-5) 0;
  margin: 0 0 var(--space-3);
}
.dialog-inhalt {
  padding: 0 var(--space-5);
}
.dialog-fuss {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-2);
  border-top: 1px solid var(--border-light);
  background: var(--bg-secondary);
}

.dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
}
.dl dt {
  color: var(--fg-secondary);
}
.dl dd {
  margin: 0;
}

.schnellwahl {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
/* app.js setzt das Attribut beim Aufbau ohne Wert (aria-pressed="") und erst
   beim Klick auf "true"/"false" — beide Schreibweisen müssen greifen, sonst
   sieht man die Vorauswahl nicht. */
.schnellwahl .knopf[aria-pressed]:not([aria-pressed='false']) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-on-accent);
}

/* Hinweiskasten im Dialog — Warn-Satz, mit Icon. Ebenfalls ohne display, damit
   Inhalt aus <strong> + Fließtext in einer Zeile weiterläuft. */
.warnkasten {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
  margin-bottom: var(--space-4);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: var(--fs-sm);
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.warnkasten::before {
  position: absolute;
  left: var(--space-4);
  top: var(--space-3);
  width: var(--space-5);
  height: var(--space-5);
}
.warnkasten strong {
  display: block;
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-1);
}

.schluessel-feld {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  margin-bottom: var(--space-4);
}
.schluessel-feld code {
  flex: 1;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  word-break: break-all;
  user-select: all;
}

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

#toasts {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  z-index: 100;
  pointer-events: none;
}
.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--fg-primary);
  color: var(--bg-primary);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-lg);
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.toast.fehler {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}
/* Leerer Zustand: ein Satz, was fehlt — und, wo möglich, der nächste Schritt
   als Knopf darunter. */
.leerzustand {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-5);
  text-align: center;
  color: var(--fg-secondary);
  font-size: var(--fs-sm);
}
.leerzustand p {
  margin: 0;
}

/* --- Schmale Fenster (< --bp-sm) ---------------------------------------- */

@media (max-width: 640px) {
  .intern-hinweis {
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-xs);
  }
  header {
    gap: 0 var(--space-2);
    padding: var(--space-1) var(--space-4);
  }
  .marke span {
    display: none;
  }
  /* Kopfzeile in zwei Reihen: oben Marke, Benutzer und Abmelden, darunter
     die Navigation über die volle Breite — so bleibt jeder Reiter lesbar,
     statt sich mit den Knöpfen rechts um ein paar Zentimeter zu streiten. */
  header nav {
    order: 3;
    flex: 1 0 100%;
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 var(--space-4);
    border-top: 1px solid var(--border-light);
  }
  #benutzer {
    margin-left: auto;
  }
  main {
    padding: var(--space-5) var(--space-4) var(--space-16);
  }
  .kopf-reihe {
    flex-direction: column;
    align-items: stretch;
  }
  .kopf-reihe > .knopf-reihe {
    justify-content: flex-start;
  }
  .karte > .karte-kopf {
    flex-direction: row;
    align-items: center;
  }
  .karte > .unterzeile {
    margin: var(--space-4) var(--space-4) 0;
  }
  .karte > h2,
  .karte-inhalt,
  .karte > .karte-kopf,
  .filter-reihe {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  tr > th:first-child,
  tr > td:first-child {
    padding-left: var(--space-4);
  }
  tr > th:last-child,
  tr > td:last-child {
    padding-right: var(--space-4);
  }
  .dialog-fuss {
    flex-wrap: wrap;
  }
  .dialog-fuss .knopf {
    flex: 1 1 auto;
  }
}

/* Perioden-Spalte der Vertragsliste: Fließtext in zwei kurzen Zeilen, nicht
   in sieben schmalen — die Spalte behält eine lesbare Mindestbreite. */
td.perioden {
  min-width: 10.5rem;
}

/* Fließtext direkt in einer Karte (z. B. der Hinweis auf der Sätze-Seite):
   die Kartenpolsterung trägt den Abstand, nicht der Absatz. */
.karte-inhalt > p:first-child {
  margin-top: 0;
}
.karte-inhalt > p:last-child {
  margin-bottom: 0;
}
.karte-inhalt > p {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
p.hinweis {
  color: var(--fg-secondary);
  font-size: var(--fs-xs);
}