/* ══════════════════════════════════════════════════════════════════════
   Belegpostfach — Oberfläche

   Das Skelett aus V1 bleibt: linke Navigation, mittlere Belegliste,
   rechte Detailansicht. Wir schalten hart um; die Anwender müssen sich
   zurechtfinden, ohne etwas zu lernen.

   Farben laufen ausschließlich über Merkmale. --marke kommt zur Laufzeit
   vom Server (OEM), alles andere ist davon abgeleitet oder neutral.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --marke: #b51f29;
  --navi-breite: 246px;
  --marke-tief: #8e1820;
  --marke-schleier: rgba(181, 31, 41, .09);
  --marke-hauch: rgba(181, 31, 41, .045);
  --marke-rand: rgba(181, 31, 41, .3);

  --grund: #f6f5f3;
  --flaeche: #ffffff;
  --flaeche-still: #faf9f7;
  --flaeche-aktiv: #f0eeeb;
  --rand: #e9e5e0;
  --rand-stark: #d8d3cc;
  --text: #1c1a18;
  --text-leise: #6d6660;
  --text-still: #948c85;

  --gut: #1d7a4f;
  --gut-schleier: rgba(29, 122, 79, .1);
  --schlecht: #b3261e;
  --schlecht-schleier: rgba(179, 38, 30, .1);
  --warnung: #8a5b00;
  --warnung-schleier: rgba(138, 91, 0, .12);

  --schatten: 0 1px 2px rgba(28, 26, 24, .04), 0 2px 8px rgba(28, 26, 24, .05);
  --schatten-hoch: 0 2px 4px rgba(28, 26, 24, .06), 0 18px 48px rgba(28, 26, 24, .2);
  --schatten-hoehe: 0 1px 2px rgba(28, 26, 24, .05), 0 6px 16px rgba(28, 26, 24, .08);

  --radius-gross: 14px;
  --radius: 10px;
  --radius-klein: 8px;

  --liste-breite: 520px;
  --kopf-hoehe: 52px;

  --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

/* Dunkel in beiden Richtungen: ohne Merkmal entscheidet das System,
   mit Merkmal die Wahl des Anwenders. Die Vorgabe „automatisch" ist der
   Normalfall — sie steht nirgends im Merkmal und muss deshalb allein
   über die Systemabfrage funktionieren. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
  --marke-schleier: rgba(255, 255, 255, .07);
  --marke-hauch: rgba(255, 255, 255, .04);
  --marke-rand: rgba(255, 255, 255, .2);

  --grund: #16151a;
  --flaeche: #1e1d23;
  --flaeche-still: #232228;
  --flaeche-aktiv: #2b2a31;
  --rand: #302e38;
  --rand-stark: #423f4d;
  --text: #eceaf0;
  --text-leise: #a49fab;
  --text-still: #79747f;

  --gut: #4bbc85;
  --gut-schleier: rgba(75, 188, 133, .13);
  --schlecht: #f0736a;
  --schlecht-schleier: rgba(240, 115, 106, .13);
  --warnung: #d9a83f;
  --warnung-schleier: rgba(217, 168, 63, .14);

  --schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
  --schatten-hoch: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .55);
  --schatten-hoehe: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .35);

  color-scheme: dark;
  }
}

:root[data-thema="dunkel"] {
  --marke-schleier: rgba(255, 255, 255, .07);
  --marke-hauch: rgba(255, 255, 255, .04);
  --marke-rand: rgba(255, 255, 255, .2);

  --grund: #16151a;
  --flaeche: #1e1d23;
  --flaeche-still: #232228;
  --flaeche-aktiv: #2b2a31;
  --rand: #302e38;
  --rand-stark: #423f4d;
  --text: #eceaf0;
  --text-leise: #a49fab;
  --text-still: #79747f;

  --gut: #4bbc85;
  --gut-schleier: rgba(75, 188, 133, .13);
  --schlecht: #f0736a;
  --schlecht-schleier: rgba(240, 115, 106, .13);
  --warnung: #d9a83f;
  --warnung-schleier: rgba(217, 168, 63, .14);

  --schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
  --schatten-hoch: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .55);
  --schatten-hoehe: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .35);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .navi-eintrag[aria-current="page"] { color: var(--text); }
}

* { box-sizing: border-box; }

/* Ein hidden-Attribut muss stärker sein als jede Klasse, die display
   setzt. Sonst zeigt sich ein Element, das display: grid oder flex
   bekommt, trotz hidden — und man sucht den Fehler im JavaScript, wo er
   nicht ist. Vorher stand dieselbe Regel zehnmal einzeln da, für jeden
   Fall, in dem es jemandem aufgefallen war. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--schrift);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Ladeanzeige ───────────────────────────────────────────────────── */

.laden {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--grund);
  z-index: 50;
}

.laden-punkt {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--rand);
  border-top-color: var(--marke);
  border-radius: 50%;
  animation: dreh .7s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .laden-punkt { animation-duration: 2s; }
}

/* ── Grundbausteine ────────────────────────────────────────────────── */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoehe);
}

.knopf {
  font: inherit;
  font-weight: 550;
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
  color: var(--text);
  border-radius: var(--radius-klein);
  padding: 8px 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.knopf:hover:not(:disabled) {
  background: var(--flaeche-aktiv);
  border-color: var(--rand-stark);
  box-shadow: var(--schatten);
}
.knopf:active:not(:disabled) { box-shadow: none; }
.knopf:disabled { opacity: .5; cursor: default; }

.knopf-haupt {
  background: var(--marke);
  border-color: var(--marke);
  color: #fff;
}
.knopf-haupt:hover:not(:disabled) {
  background: var(--marke-tief);
  border-color: var(--marke-tief);
  box-shadow: var(--schatten-hoehe);
}

.knopf-gefahr { color: var(--schlecht); border-color: var(--rand-stark); }
.knopf-gefahr:hover:not(:disabled) { background: var(--schlecht-schleier); }

.knopf-leise { border-color: transparent; background: var(--flaeche-still); }

.knopf-blank {
  font: inherit;
  border: 0;
  background: none;
  color: var(--text-leise);
  padding: 7px;
  border-radius: var(--radius-klein);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, color .12s;
}
.knopf-blank:hover { background: var(--flaeche-aktiv); color: var(--text); }

.feld { display: block; margin-bottom: 14px; }
.feld-name {
  display: block;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-leise);
  margin-bottom: 5px;
}
.feld input[type="text"], .feld input[type="email"],
.feld input[type="password"], .feld input[type="search"],
.feld input[type="number"], .feld input[type="url"],
.feld input[type="tel"],
.feld select, .feld textarea, .dialog input, .dialog select, .dialog textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  padding: 10px 13px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.feld input:focus, .dialog input:focus, .dialog textarea:focus {
  outline: none;
  border-color: var(--marke);
  box-shadow: 0 0 0 3px var(--marke-schleier);
}
.feld textarea, .dialog textarea { resize: vertical; min-height: 90px; }

.feld-mit-knopf { position: relative; display: block; }
.feld-mit-knopf input { padding-right: 42px; }
.feld-mit-knopf .knopf-blank {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.meldung {
  border-radius: var(--radius-klein);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.meldung-fehler {
  background: var(--schlecht-schleier);
  border-color: var(--schlecht);
  color: var(--schlecht);
}
.meldung-hinweis {
  background: var(--marke-schleier);
  border-color: var(--marke-rand);
}

.unterzeile { color: var(--text-leise); font-size: 13px; margin: 0 0 20px; }

/* ── Logo ──────────────────────────────────────────────────────────── */

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--text);
}
.logo img { height: 52px; width: auto; max-width: 300px; }
.logo-klein {
  font-size: 15px;
  /* Volle Breite der Navigation, deshalb der negative Rand gegen deren
     Innenabstand. */
  margin: 0 -10px 14px;
  padding: 20px 16px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  justify-content: flex-start;
}
.logo-klein img { height: 38px; max-width: 100%; }
.logo-zeichen {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--marke);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}
.logo-klein .logo-zeichen { width: 21px; height: 21px; font-size: 11.5px; }

/* ══ Anmeldung ═════════════════════════════════════════════════════ */

.anmeldung {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  gap: 26px;
}

.anmeldung-marke { display: flex; justify-content: center; }

/* Die Anmeldekarte ist für viele das erste, was sie von dieser Anlage
   sehen — und für manche das einzige, wenn sie sich hier nicht anmelden
   können. Sie darf Platz brauchen: Auf 380 px standen Erklärung und
   nächste Beschriftung aufeinander, und aus vier Feldern wurde eine
   Kolonne. */
.anmeldung-karte {
  width: 100%;
  max-width: 440px;
  padding: 34px 36px 30px;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20, 18, 16, .05), 0 12px 32px rgba(20, 18, 16, .10);
}
.anmeldung-karte h1 {
  font-size: 23px;
  margin: 0 0 6px;
  letter-spacing: -.024em;
}
.anmeldung-karte > .erklaerung { margin: 0 0 22px; }
.anmeldung-karte .feld { margin-bottom: 18px; }
/* Ein Hinweis gehört zu dem Feld über ihm, nicht zu der Beschriftung
   darunter. Ohne den Abstand las man „Min. 12 Zeichen" als Vorgabe für
   die Rufnummer. */
.anmeldung-karte .feld + .erklaerung.blank { margin: -12px 0 20px; }
.anmeldung-karte .knopf-haupt {
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  font-size: 14px;
}

.anmeldung-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  justify-content: center;
  font-size: 12.5px;
}
.anmeldung-fuss a { color: var(--text-leise); text-decoration: none; }
.anmeldung-fuss a:hover { color: var(--marke); text-decoration: underline; }

.wahl-liste { display: flex; flex-direction: column; gap: 8px; }
.wahl-eintrag {
  font: inherit;
  text-align: left;
  border: 1px solid var(--rand);
  background: var(--flaeche-still);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color .14s ease, background .14s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
}
.wahl-eintrag:hover { border-color: var(--marke); background: var(--marke-schleier); }
.wahl-eintrag b { display: block; font-weight: 600; }
.wahl-eintrag span { display: block; font-size: 12.5px; color: var(--text-leise); }
.wahl-eintrag .zaehler {
  margin-left: auto;
  background: var(--marke);
  color: #fff;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 600;
}

/* ══ Anwendung ═════════════════════════════════════════════════════ */

.anwendung { height: 100%; display: flex; flex-direction: column; }

.kopf {
  height: var(--kopf-hoehe);
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 16px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}
.kopf-titel {
  font-size: 15px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.kopf-rechts .knopf-blank { font-size: 13px; }
#postfach-wechseln span {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stufe {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--warnung-schleier);
  color: var(--warnung);
  border: 1px solid currentColor;
  margin-right: 8px;
}

.raster {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--navi-breite) var(--liste-breite) 7px 1fr;
}

/* Rasterfelder bekommen von sich aus min-height:auto und wachsen dann
   über den Bildschirm hinaus, statt zu scrollen. */
.raster > * { min-height: 0; }

/* ── Navigation ────────────────────────────────────────────────────── */

.navi {
  border-right: 1px solid var(--rand);
  background: var(--flaeche-still);
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.navi-luecke { flex: 1 1 auto; min-height: 14px; }


.navi-ueberschrift {
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-still);
  padding: 4px 11px 10px;
}
.navi-liste { display: flex; flex-direction: column; gap: 3px; }

.navi-eintrag {
  font: inherit;
  text-align: left;
  border: 0;
  background: none;
  color: var(--text-leise);
  padding: 11px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  position: relative;
  font-size: 14.5px;
  transition: background .14s ease, color .14s ease;
}
.navi-eintrag:hover { background: var(--flaeche-aktiv); color: var(--text); }
.navi-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navi-eintrag[aria-current="page"] {
  background: var(--marke-schleier);
  color: var(--marke);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--marke-rand);
}
:root[data-thema="dunkel"] .navi-eintrag[aria-current="page"] { color: var(--text); }

.navi-zaehler {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-still);
  background: var(--flaeche-aktiv);
  border-radius: 20px;
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
}
/* Der Zähler des offenen Ordners hebt sich vom Schleier ab — außer er
   trägt schon die Hervorhebung. Sonst stünde weiße Schrift auf Weiß. */
.navi-eintrag[aria-current="page"] .navi-zaehler:not(.neu) { background: var(--flaeche); }
.navi-zaehler.neu {
  background: var(--marke);
  color: #fff;
  font-weight: 600;
  border-radius: 50%;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.navi-fuss {
  flex: none;
  border-top: 1px solid var(--rand);
  margin-top: 10px;
  padding: 10px 9px 0;
  font-size: 12px;
  color: var(--text-leise);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.navi-person { font-weight: 600; color: var(--text); word-break: break-word; }
.navi-lizenz { line-height: 1.4; }

progress.kontingent-balken {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 5px;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--flaeche-aktiv);
  color: var(--marke);
}
progress.kontingent-balken::-webkit-progress-bar { background: var(--flaeche-aktiv); }
progress.kontingent-balken::-webkit-progress-value { background: var(--marke); border-radius: 3px; }
progress.kontingent-balken::-moz-progress-bar { background: var(--marke); border-radius: 3px; }
progress.kontingent-balken.knapp { color: var(--warnung); }
progress.kontingent-balken.knapp::-webkit-progress-value { background: var(--warnung); }
progress.kontingent-balken.knapp::-moz-progress-bar { background: var(--warnung); }
progress.kontingent-balken.voll { color: var(--schlecht); }
progress.kontingent-balken.voll::-webkit-progress-value { background: var(--schlecht); }
progress.kontingent-balken.voll::-moz-progress-bar { background: var(--schlecht); }
.kontingent-text { font-size: 11.5px; font-variant-numeric: tabular-nums; }

.thema-wahl {
  display: flex;
  gap: 2px;
  background: var(--flaeche-aktiv);
  border-radius: var(--radius-klein);
  padding: 2px;
}
.thema-knopf {
  font: inherit;
  font-size: 11.5px;
  flex: 1;
  border: 0;
  background: none;
  color: var(--text-leise);
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.thema-knopf[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }

/* ── Belegliste ────────────────────────────────────────────────────── */

.liste {
  border-right: 1px solid var(--rand);
  background: var(--flaeche-still);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.liste-kopf {
  flex: none;
  padding: 14px 16px 12px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.liste-titel h1 { font-size: 16px; margin: 0; letter-spacing: -.01em; }
.liste-unterzeile { font-size: 12px; color: var(--text-still); font-variant-numeric: tabular-nums; }

.suche {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--flaeche-still);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0 10px;
  color: var(--text-still);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.suche:focus-within { border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-schleier); }
.suche input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  border: 0;
  background: none;
  color: var(--text);
  padding: 7px 0;
}
.suche input:focus { outline: none; }
.suche input::-webkit-search-cancel-button { display: none; }

.sammelaktion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
}
.sammelaktion .knopf { padding: 5px 10px; font-size: 12.5px; }
.sammel-name { color: var(--text-leise); font-weight: 550; }
.sammel-auswahl {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-still);
  white-space: nowrap;
}

.liste-inhalt { flex: 1; overflow-y: auto; padding-bottom: 6px; }
.liste-inhalt:focus { outline: none; }
.liste-mehr { flex: none; padding: 10px 16px 16px; }
.liste-mehr .knopf { width: 100%; }

/* Jede Zeile ist eine Karte: feine Linie und ein sehr weicher Schatten.
   Die Auswahl zeigt sich durch einen getönten Grund, nicht durch eine
   kräftige Kontur — sonst schreit die ausgewählte Karte lauter als der
   Prüfstatus, den sie trägt. */
.zeile {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 7px 10px;
  padding: 11px 12px;
  border: 1px solid var(--rand);
  border-radius: 13px;
  background: var(--flaeche);
  box-shadow: var(--schatten);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

/* Der Prüfstatus sitzt im Rahmen der Kachel: eine schmale Kante links.
   Sie sagt beim Überfliegen, was Sache ist, ohne eine zweite farbige
   Fläche neben den Angaben zu öffnen. */
.zeile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.zeile { position: relative; padding-left: 15px; }
.zeile-gut::before { background: var(--gut); }
.zeile-schlecht::before { background: var(--schlecht); }
.zeile-neutral::before { background: var(--rand-stark); }
.zeile:hover { box-shadow: var(--schatten-hoehe); border-color: var(--rand-stark); }
/* Getönter Grund und ein zurückgenommener Rand — eine kräftige Kontur
   um die ganze Karte schreit lauter als der Prüfstatus, den sie trägt. */
.zeile[aria-selected="true"] {
  background: var(--marke-hauch);
  border-color: var(--marke-rand);
  box-shadow: var(--schatten-hoehe);
}

.zeile-haken { flex: none; padding-top: 2px; }
.zeile-haken input {
  width: 16px;
  height: 16px;
  accent-color: var(--marke);
  cursor: pointer;
}

/* V1s Symbolspalte. Sichtbar, aber zurückgenommen: Sie darf nicht mit
   den Rechnungsangaben um Aufmerksamkeit ringen. Auf dem Telefon gibt es
   kein Hover — deshalb werden sie nicht erst dort eingeblendet. */
.zeile-werkzeuge {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: -1px;
}
.werkzeug {
  font: inherit;
  border: 0;
  background: none;
  color: var(--rand-stark);
  padding: 2px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  transition: background .14s ease, color .14s ease;
}
.zeile:hover .werkzeug { color: var(--text-still); }

/* Steckt etwas dahinter, steht das Symbol kräftiger — eine geschriebene
   Notiz, erfasste Schlagworte, ein Befund zum Prüfergebnis. */
.werkzeug.gefuellt { color: var(--text-leise); }
.zeile:hover .werkzeug.gefuellt { color: var(--text); }

.werkzeug:hover, .zeile:hover .werkzeug:hover { background: var(--flaeche-aktiv); color: var(--marke); }
.werkzeug.warnung, .zeile:hover .werkzeug.warnung { color: var(--warnung); cursor: help; }

/* Alles im Inhaltsblock steht auf einer Achse. Die Rangfolge macht die
   Größe: der Name ist der Anker, Nummer und Datum ordnen ein, der Betrag
   ist die Entscheidungsgrundlage. */
.zeile-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.zeile-kopf {
  font-variant-numeric: tabular-nums;
  color: var(--text-still);
  font-size: 11.5px;
  /* Nummer und Datum ordnen den Beleg ein und werden nie gekürzt. */
  flex: none;
  white-space: nowrap;
}
.zeile-absender {
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -.01em;
  line-height: 1.22;
  margin-bottom: 4px;
  /* Firmennamen sind lang. Zwei Zeilen sind besser als drei Punkte —
     der Name ist das, wonach gesucht wird. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Nummer, Datum und Prüfstatus in einer Zeile — oben ist Platz in der
   Breite, und die Kachel wird um eine Zeile kürzer. */
.zeile-oben {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-width: 0;
  margin-bottom: 3px;
}
.zeile-werte {
  display: grid;
  grid-template-columns: 3.4em minmax(0, max-content);
  gap: 0 10px;
  margin: 0;
  font-size: 13.5px;
}
.zeile-werte dt {
  color: var(--text-still);
  font-size: 12.5px;
  align-self: center;
}
.zeile-werte dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
  text-align: right;
  color: var(--text);
}
.zeile-werte dd.ohne-wert {
  grid-column: 1 / -1;
  text-align: left;
  font-weight: 400;
  color: var(--text-still);
}

/* Der Prüfstatus als Plakette. Als farbige Textzeile stand er gleichwertig
   neben den Angaben, obwohl er etwas anderes ist: keine Angabe des
   Belegs, sondern unser Befund dazu. */
.zeile-status {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  /* Lieber eine zweite Zeile als drei Punkte: Abgeschnitten wurde
     ausgerechnet das Wort, auf das es ankommt — „X-Rechnung 3.0 —
     fehl…". Der Befund ist der Grund, warum die Plakette überhaupt
     dasteht.
     Passt sie in die Zeile, schiebt space-between sie nach rechts;
     muss sie umbrechen, beginnt sie links unter der Nummer. Sie dort
     rechts stehen zu lassen, sah aus wie ein loser Zettel. */
  overflow-wrap: anywhere;
}
.zeile-gut .zeile-status { color: var(--gut); }
.zeile-schlecht .zeile-status { color: var(--schlecht); }
.zeile-neutral .zeile-status { color: var(--text-still); }


/* Die Aktionen stehen an der Zeile — wer den Eingang abarbeitet, soll
   nicht erst öffnen müssen. Sie sind verschieden schwer: Annehmen ist die
   Handlung, Ablehnen die begründete Ausnahme, Löschen zurückhaltend. */
/* Die Aktionen stehen unter dem Beleg, rechtsbündig in einer Zeile.
   Als Spalte daneben nahmen sie dem Namen die Breite — und je nach
   Ordner waren es zwei oder drei, wodurch die Karten verschieden hoch
   wurden. */
.zeile-aktionen {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 4px;
  margin-top: 6px;
}
.zeilen-knopf {
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  border: 1px solid transparent;
  background: none;
  color: var(--text);
  border-radius: var(--radius-klein);
  padding: 5px 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease;
}

/* Annehmen: die Handlung, für die der Anwender hier ist. */
.zeilen-knopf.haupt {
  background: var(--gut-schleier);
  border-color: transparent;
  color: var(--gut);
  font-weight: 600;
}
.zeilen-knopf.haupt:hover { box-shadow: inset 0 0 0 1px var(--gut); }

/* Ablehnen und Download: sachlich, ohne Farbe. */
.zeilen-knopf.neutral {
  border-color: var(--rand-stark);
  color: var(--text-leise);
}
.zeilen-knopf.neutral:hover { background: var(--flaeche-aktiv); color: var(--text); }

/* Löschen: erreichbar, aber nicht einladend. */
.zeilen-knopf.gefahr { color: var(--text-still); }
.zeilen-knopf.gefahr:hover { background: var(--schlecht-schleier); color: var(--schlecht); }
.zeilen-knopf.gefahr:hover svg { color: var(--schlecht); }

.marke-punkt {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.marke-gut { background: var(--gut-schleier); color: var(--gut); border-color: currentColor; }
.marke-schlecht { background: var(--schlecht-schleier); color: var(--schlecht); border-color: currentColor; }
.marke-neutral { background: var(--flaeche-aktiv); color: var(--text-leise); }
.marke-warnung { background: var(--warnung-schleier); color: var(--warnung); border-color: currentColor; }

.leer-hinweis {
  padding: 46px 24px;
  text-align: center;
  color: var(--text-still);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.leer-hinweis p { margin: 0; max-width: 260px; font-size: 13px; line-height: 1.55; }
.leer-hinweis b { color: var(--text-leise); font-size: 14px; }

/* ── Detailansicht ─────────────────────────────────────────────────── */

.detail { display: flex; flex-direction: column; min-width: 0; background: var(--grund); }
.detail-leer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-still);
}
.detail-leer p { margin: 0; font-size: 13px; }

.detail-inhalt { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.ansicht-wahl {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  overflow-x: auto;
  scrollbar-width: thin;
}
.reiter {
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  border: 0;
  background: none;
  color: var(--text-leise);
  padding: 7px 13px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.reiter:hover { background: var(--flaeche-aktiv); color: var(--text); }
.reiter[aria-selected="true"] { background: var(--marke); color: #fff; }
.ansicht-werkzeuge { margin-left: auto; display: flex; gap: 2px; padding-left: 10px; }

.hinweisleiste {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 9px 14px;
  font-size: 12.5px;
  background: var(--flaeche-still);
  border-bottom: 1px solid var(--rand);
  color: var(--text-leise);
}
.hinweisleiste .knopf { padding: 4px 10px; font-size: 12.5px; }
.hinweisleiste .rechts { margin-left: auto; display: flex; gap: 6px; }

.detail-rahmen { flex: 1; min-height: 0; padding: 12px; }
.detail-rahmen iframe {
  width: 100%;
  height: 100%;
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  background: #fff;
  box-shadow: var(--schatten-hoehe);
}

.zurueck {
  display: none;
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 20;
  font: inherit;
  font-weight: 600;
  align-items: center;
  gap: 5px;
  padding: 9px 15px 9px 11px;
  border-radius: 24px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  box-shadow: var(--schatten-hoch);
  cursor: pointer;
}

/* ── Angaben im Detail ─────────────────────────────────────────────── */

.angaben {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 7px 16px;
  font-size: 13px;
}
.angaben dt { color: var(--text-leise); }
.angaben dd { margin: 0; word-break: break-word; }
.angaben dd.zahl { font-variant-numeric: tabular-nums; }

.verlauf { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.verlauf li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rand);
}
.verlauf li:last-child { border-bottom: 0; }
.verlauf time { color: var(--text-still); font-variant-numeric: tabular-nums; }

/* ── Dialog ────────────────────────────────────────────────────────── */

.dialog {
  border: 0;
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--text);
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  box-shadow: 0 2px 4px rgba(20, 18, 16, .06), 0 18px 48px rgba(20, 18, 16, .22);
  overflow: hidden;
  flex-direction: column;
}
.dialog[open] { display: flex; }
.dialog::backdrop { background: rgba(24, 20, 18, .5); backdrop-filter: blur(3px); }
.dialog.breit { width: min(820px, calc(100vw - 32px)); }
:root[data-thema="dunkel"] .dialog { border: 1px solid var(--rand); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .dialog { border: 1px solid var(--rand); }
}

.dialog-kopf {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 12px 24px;
}
.dialog-kopf h2 {
  font-size: 18px;
  font-weight: 650;
  margin: 0;
  flex: 1;
  letter-spacing: -.02em;
}
.dialog-inhalt { flex: 1; overflow-y: auto; padding: 8px 24px 22px; }
.dialog-fuss {
  flex: none;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--rand);
}
.dialog-fuss .knopf { padding: 9px 18px; }
.dialog-fuss:empty { display: none; }
.dialog-fuss .links { margin-right: auto; }

.abschnitt { margin-bottom: 26px; }
.abschnitt:last-child { margin-bottom: 0; }
.abschnitt > h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-still);
  margin: 0 0 12px;
}
.erklaerung {
  font-size: 12.5px;
  color: var(--text-leise);
  margin: -8px 0 14px;
  line-height: 1.55;
}

.schalter {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
}
.schalter input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--marke); flex: none; }
.schalter b { display: block; font-weight: 550; }
.schalter small { display: block; color: var(--text-leise); font-size: 12.5px; line-height: 1.5; }

/* ── Toasts ────────────────────────────────────────────────────────── */

.toast-bereich {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}
.toast {
  background: var(--text);
  color: var(--grund);
  border-radius: var(--radius);
  padding: 11px 17px;
  font-size: 13px;
  box-shadow: var(--schatten-hoch);
  max-width: 380px;
  animation: rein .18s ease-out;
}
.toast.fehler { background: var(--schlecht); color: #fff; }
@keyframes rein { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ── Schmale Bildschirme ───────────────────────────────────────────── */

.nur-schmal { display: none; }

@media (max-width: 1240px) {
  :root { --liste-breite: 384px; }
}

@media (max-width: 900px) {
  .nur-schmal { display: inline-flex; }

  .raster { grid-template-columns: 1fr; }
  .raster > .griff { display: none; }

  .navi {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 268px;
    z-index: 40;
    background: var(--flaeche);
    box-shadow: var(--schatten-hoch);
    transform: translateX(-100%);
    transition: transform .18s ease-out;
    padding-top: 16px;
  }
  .navi.offen { transform: none; }

  .navi-schleier {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 16, .4);
    z-index: 39;
  }

  .liste { border-right: 0; }
  .detail { display: none; }

  /* Auf schmalen Geräten ist die Detailansicht eine eigene Seite —
     nebeneinander wäre beides unbrauchbar. */
  .anwendung[data-ansicht="detail"] .liste { display: none; }
  .anwendung[data-ansicht="detail"] .detail { display: flex; }
  .anwendung[data-ansicht="detail"] .zurueck { display: inline-flex; }

  .detail-rahmen { padding: 0; }
  .detail-rahmen iframe { border-radius: 0; border: 0; box-shadow: none; }

  .toast-bereich { left: 16px; right: 16px; align-items: stretch; bottom: 70px; }
  .toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .navi { transition: none; }
}

/* Druckausgabe: nur der Beleg. */
@media print {
  .kopf, .navi, .liste, .ansicht-wahl, .hinweisleiste, .zurueck, .toast-bereich { display: none !important; }
  .raster { display: block; }
  .detail-rahmen { padding: 0; }
  .detail-rahmen iframe { border: 0; box-shadow: none; height: 100vh; }
}

/* Eigene Darstellungen (Angaben, Verlauf) im Rahmen der Detailansicht. */
.detail-eigen {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  padding: 20px 22px;
}
.detail-rahmen:has(.detail-eigen:not([hidden])) iframe { display: none; }
@media (max-width: 900px) {
  .detail-eigen { border: 0; border-radius: 0; box-shadow: none; }
}

/* ── Abstandsklassen ───────────────────────────────────────────────────
   Die Inhaltsrichtlinie der Anwendung erlaubt keine Stile am Element
   (style-src 'self'). Was sonst ein style-Attribut wäre, steht deshalb
   hier. Sie kommen bewusst zuletzt: gleiche Gewichtung wie die
   Bausteinklassen, aber späteres Wort. */

.blank { margin: 0; }
.oben { margin-top: 0; }
.unten { margin-bottom: 0; }
.nachher { margin: 12px 0 0; }
.mittig { align-self: center; }
.leise { color: var(--text-still); }
.feld-nachher { margin-top: 12px; }
.schalter-anhang { padding-left: 26px; }
.schalter-anhang input { margin-top: 8px; }
.fliesstext { margin: 0 0 12px; line-height: 1.6; }
.punkteliste { margin: 0 0 14px; padding-left: 20px; line-height: 1.7; }
.anmeldung-marke { display: flex; justify-content: center; }

/* Verweis im Fuß der Navigation — wie V1s „Benutzerpasswort ändern". */
.navi-verweis {
  font: inherit;
  font-size: 12px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--marke);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
:root[data-thema="dunkel"] .navi-verweis { color: var(--text-leise); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .navi-verweis { color: var(--text-leise); }
}

.anmeldung-hilfe {
  font-size: 12.5px;
  color: var(--text-leise);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.5;
}

/* Auf schmalen Geräten füllen die Aktionen die Breite: Ein Daumen
   trifft eine breite Fläche sicherer als ein Wort. Dass sie unter dem
   Beleg stehen, gilt inzwischen überall. */
@media (max-width: 620px) {
  .zeile { flex-wrap: wrap; }
  .zeilen-knopf { flex: 1; justify-content: center; }
}

/* Zwei Logofassungen, damit der dunkelgraue Schriftzug auf dunklem Grund
   lesbar bleibt. Umgeschaltet wird über die Stilvorlage — am Element
   dürfen keine Stile stehen. */
.logo-dunkel { display: none; }
:root[data-thema="dunkel"] .logo-hell { display: none; }
:root[data-thema="dunkel"] .logo-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .logo-hell { display: none; }
  :root:not([data-thema="hell"]) .logo-dunkel { display: block; }
}

.schluesselzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.schluessel {
  font-family: var(--schrift-zahl);
  font-size: 12.5px;
  background: var(--flaeche-aktiv);
  border-radius: var(--radius-klein);
  padding: 5px 9px;
  word-break: break-all;
}

.feld select, .dialog select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  padding: 9px 11px;
}
.feld select:focus, .dialog select:focus {
  outline: none;
  border-color: var(--marke);
  box-shadow: 0 0 0 3px var(--marke-schleier);
}

/* ── Begrüßung nach dem Umstieg ────────────────────────────────────────
   Sie ist das Erste, was ein Anwender nach der Umstellung sieht. Deshalb
   bekommt sie einen eigenen Kopf statt der üblichen Dialogleiste. */

.begruessungsdialog .dialog-inhalt { padding: 0; }
.begruessungsdialog .dialog-fuss { border-top: 0; padding-top: 4px; }

.begruessung-kopf {
  background: var(--marke);
  color: #fff;
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.begruessung-kopf h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.begruessung-logo img { height: 34px; width: auto; max-width: 210px; }
.begruessung-logo .logo-hell { display: block; }
.begruessung-logo .logo-zeichen { background: #fff; color: var(--marke); }
.begruessung-kopf .logo { color: #fff; }

.begruessung-rumpf { padding: 24px 28px 6px; }
.begruessung-rumpf p { margin: 0 0 14px; line-height: 1.65; }

.neuerungen { list-style: none; margin: 20px 0 4px; padding: 0; }
.neuerungen li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  border-top: 1px solid var(--rand);
  line-height: 1.55;
}
.neuerungen li svg { color: var(--gut); margin-top: 3px; }

/* ── Ziehgriff zwischen Liste und Belegansicht ──────────────────────────
   Die Breite wird über eine Regel in dieser Vorlage gesetzt, nicht über
   ein style-Attribut: Das verwirft die Inhaltsrichtlinie stillschweigend. */

.griff {
  position: relative;
  cursor: col-resize;
  background: var(--rand);
  border: 0;
  transition: background .14s ease;
  touch-action: none;
}
.griff::before {
  /* Größere Trefferfläche als die sichtbare Linie. */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  right: -4px;
}
.griff:hover, .griff:focus-visible { background: var(--marke); }
.griff:focus-visible { outline: none; }

/* Beim Ziehen darf nichts markiert werden und der Zeiger bleibt gleich. */
body.zieht { cursor: col-resize; user-select: none; }
body.zieht iframe { pointer-events: none; }

@media (max-width: 900px) {
  .griff { display: none; }
}

/* ── Belege hochladen ──────────────────────────────────────────────────
   Die Ablagefläche erscheint erst, wenn wirklich Dateien über dem
   Fenster hängen — ein dauerhaft sichtbarer Rahmen wäre im Weg. */


.ablage {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(24, 20, 18, .45);
  backdrop-filter: blur(3px);
}

.ablage-feld {
  background: var(--flaeche);
  border: 2px dashed var(--marke);
  border-radius: 18px;
  padding: 44px 52px;
  max-width: 460px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: var(--schatten-hoch);
  color: var(--text);
}
.ablage-feld svg { color: var(--marke); }
.ablage-feld b { font-size: 18px; letter-spacing: -.01em; }
.ablage-feld span { color: var(--text-leise); font-size: 13.5px; line-height: 1.55; }

/* ── Sortierung und Zeitraum ──────────────────────────────────────── */

.listenfilter { display: flex; gap: 10px; flex-wrap: wrap; }
.filter { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.filter-name {
  font-size: 11px;
  font-weight: 550;
  color: var(--text-still);
  padding-left: 2px;
}
.filter select {
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--flaeche-still);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: 6px 8px;
}
.filter select:focus {
  outline: none;
  border-color: var(--marke);
  box-shadow: 0 0 0 3px var(--marke-schleier);
}

/* ── Suchzeile mit Filterknopf ─────────────────────────────────────────
   Sortierung und Zeitraum sind eingeklappt: Sie werden selten geändert
   und stünden sonst dauerhaft über der Liste im Weg. */

.suchzeile { display: flex; align-items: stretch; gap: 8px; }
.suchzeile .suche { flex: 1; min-width: 0; }

.filter-auf {
  position: relative;
  flex: none;
  padding: 0 11px;
  border: 1px solid var(--rand);
  background: var(--flaeche-still);
  border-radius: var(--radius);
}
.filter-auf[aria-expanded="true"] {
  background: var(--marke-schleier);
  color: var(--marke);
  border-color: var(--marke-rand);
}
.filter-punkt {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marke);
}


/* ── Was gerade geprüft wird ───────────────────────────────────────────
   Eine schmale Leiste über der Liste, die nichts sperrt. Der Prüfdienst
   braucht rund elf Sekunden je Beleg; solange soll der Anwender
   weiterarbeiten können. */

.hochladestand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  font-size: 12.5px;
  color: var(--marke);
  background: var(--marke-schleier);
  border-bottom: 1px solid var(--rand);
}
:root[data-thema="dunkel"] .hochladestand { color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .hochladestand { color: var(--text); }
}

.hochladestand-punkt {
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: dreh .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hochladestand-punkt { animation-duration: 2.4s; }
}

/* Wartet etwas auf den Prüfdienst, ist das kein Fortschritt, sondern ein
   Zustand — deshalb eine Uhr statt eines drehenden Rings. */
.hochladestand-uhr { display: inline-flex; }

.sammel-alle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.sammel-alle input {
  width: 15px;
  height: 15px;
  accent-color: var(--marke);
  cursor: pointer;
}

/* Die Postfachadresse ist zum Weitergeben da — ein Klick kopiert sie. */
.adresse-kopieren {
  font: inherit;
  font-size: 12px;
  border: 0;
  background: none;
  padding: 1px 4px 1px 0;
  margin-left: -2px;
  color: var(--text-still);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  transition: color .14s ease, background .14s ease;
}
.adresse-kopieren svg { opacity: 0; transition: opacity .14s ease; }
.adresse-kopieren:hover { color: var(--marke); background: var(--marke-schleier); }
.adresse-kopieren:hover svg { opacity: 1; }
.adresse-kopieren.kopiert { color: var(--gut); background: var(--gut-schleier); }
.adresse-kopieren.kopiert svg { opacity: 1; }

.leer-aktion {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.leer-aktion small { color: var(--text-still); font-size: 12px; }

.stufe-warnung {
  background: var(--schlecht-schleier);
  color: var(--schlecht);
}

/* Ein Verweis, der ein Knopf ist: Er löst etwas in der Anwendung aus,
   führt aber nirgendwohin. */
.verweis {
  font: inherit;
  font-size: inherit;
  border: 0;
  background: none;
  padding: 0;
  color: var(--marke);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.verweis:hover { color: var(--marke-tief); }

/* ── Angebot zum Anheften ──────────────────────────────────────────── */

.anheften {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--marke-rand);
  background: var(--marke-schleier);
  border-radius: 999px;
  overflow: hidden;
  font-size: 12.5px;
}
.anheften-tun {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--marke);
  font: inherit;
  font-weight: 600;
  padding: 5px 6px 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.anheften-tun svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.anheften-tun:hover { background: var(--marke-hauch); }
.anheften-zu {
  border: 0;
  background: transparent;
  color: var(--marke);
  font-size: 15px;
  line-height: 1;
  padding: 0 10px 0 6px;
  cursor: pointer;
  opacity: .6;
}
.anheften-zu:hover { opacity: 1; }

/* Auf schmalen Geräten ist der Kopf voll. Dort nur das Sinnbild. */
@media (max-width: 560px) {
  .anheften-tun span { display: none; }
  .anheften-tun { padding-left: 10px; }
}

/* Die Knopfzeile im Dialog: Ein Knopf, der zu seinem Feld gehört, steht
   darunter und nicht im Dialogfuß bei „Schließen". */
.abschnitt .knopfzeile { display: flex; gap: 10px; margin-top: 12px; }
.meldung-gut {
  background: var(--gut-schleier);
  color: var(--gut);
  border: 1px solid currentColor;
}

/* ── Selbstanmeldung ───────────────────────────────────────────────── */

.anmeldung-karte.breit { max-width: 560px; }
.feldpaarung {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
@media (max-width: 520px) {
  .feldpaarung { grid-template-columns: 1fr; }
}
.postfachwunsch {
  margin: 4px 0 16px;
  padding: 14px 15px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-still);
}
.postfachwunsch .feld { margin-bottom: 4px; }
.adressstand { min-height: 20px; font-size: 12.5px; margin-bottom: 6px; }
.adressstand .frei { color: var(--gut); }
.adressstand .belegt { color: var(--schlecht); }
.anmeldung-hilfe { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* Die Adresszeile: Präfix und Domäne stehen fest, änderbar ist die
   Mitte. So sieht der Anwender die ganze Adresse, die er später seinen
   Lieferanten gibt — nicht nur den Teil, den er tippt. */
.adresszeile {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: 0 12px;
  margin-bottom: 6px;
  overflow: hidden;
}
.adresszeile:focus-within {
  border-color: var(--marke);
  box-shadow: 0 0 0 3px var(--marke-schleier);
}
.adressteil {
  color: var(--text-leise);
  font-size: 14px;
  white-space: nowrap;
  flex: none;
}
.adresszeile input {
  border: 0;
  background: transparent;
  padding: 10px 0;
  min-width: 4em;
  flex: 1 1 auto;
  font: inherit;
  color: var(--text);
}
.adresszeile input:focus { outline: none; box-shadow: none; }

.adressstand .frei, .adressstand .belegt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.adressstand svg { fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.adressstand .frei { color: var(--gut); font-weight: 550; }

.zustimmung { align-items: flex-start; margin: 6px 0 20px; font-size: 12.5px; line-height: 1.6; }
.zustimmung input { margin-top: 2px; }
.zustimmung a { color: var(--marke); text-underline-offset: 2px; }
.zustimmung a:hover { color: var(--marke-tief); }

/* ── Warnung zum Lizenzstand ───────────────────────────────────────────
 *
 * Quer über die ganze Anwendung, nicht in eine Ecke: Wer sie übersieht,
 * verliert seine Belege. Ohne Schließknopf — sie erscheint bei jeder
 * Anmeldung neu, bis der Kunde verlängert oder mitgenommen hat. */
.lizenzbanner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--rand);
  background: var(--warnung-schleier);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.lizenzbanner svg {
  flex: none;
  margin-top: 1px;
  fill: none;
  stroke: var(--warnung);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lizenzbanner.schlimm { background: var(--schlecht-schleier); }
.lizenzbanner.schlimm svg { stroke: var(--schlecht); }
.lizenzbanner-text { min-width: 0; }
.lizenzbanner-text strong { display: block; font-weight: 600; }
.lizenzbanner-text span { color: var(--text-leise); }

@media (max-width: 700px) {
  .lizenzbanner { padding: 11px 14px; font-size: 12.5px; }
}

/* Eine Angabe mit anklickbarem Wert — die Postfachadressen in den
   Einstellungen. Sie werden weitergegeben; abtippen ist die Gelegenheit
   für einen Tippfehler. */
.angabenzeile { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.angabenzeile .feld-name { margin: 0; min-width: 11em; }

/* Die Reiterleiste im Dialog bricht um, statt zu rollen.
 *
 * Gerollt verschwand der letzte Reiter („Deine Daten") einfach aus dem
 * Bild — man sah ihn nicht und suchte ihn nicht, weil man nicht wusste,
 * dass es ihn gibt. In einem Dialog ist Höhe billiger als ein Reiter,
 * den niemand findet. */
.dialog .ansicht-wahl {
  flex-wrap: wrap;
  overflow-x: visible;
  padding: 0 0 10px;
  margin-bottom: 18px;
  row-gap: 4px;
  column-gap: 4px;
  border-bottom: 1px solid var(--rand);
}
/* Ein Kasten um die Reiter macht aus einer umgebrochenen Zeile einen
   halbleeren Rahmen. Die Trennlinie darunter reicht: Sie sagt dasselbe
   und sieht bei einer wie bei zwei Zeilen gleich aus. */
.dialog .ansicht-wahl .reiter { border-radius: 8px; padding: 7px 12px; }

/* ── Die Adressen des Postfachs ────────────────────────────────────────
   Sie sind das einzige auf dieser Seite, das man weitergibt, und das
   erste, wonach hier jemand sucht. Deshalb stehen sie zusammen und
   abgesetzt, nicht als zwei Zeilen im Fließtext. */
.adresskarte {
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--flaeche-still);
  padding: 4px 14px;
  margin-bottom: 12px;
}
.adresskarte .angabenzeile {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--rand);
}
.adresskarte .angabenzeile:first-child { border-top: 0; }
.adresskarte .angabenzeile[hidden] { display: none; }
.adresskarte .feld-name { min-width: 10.5em; }
.adresskarte .adresse-kopieren {
  font-size: 13px;
  font-weight: 550;
  color: var(--text);
}
/* Ein Dialog, dessen Inhalt je nach Reiter zwischen drei Zeilen und zwei
   Bildschirmen schwankt, springt bei jedem Klick. Eine Untergrenze
   hält ihn ruhig. */
.dialog .reitertafel { min-height: 16rem; }

/* Meldungen, während ein Dialog offen ist.
   Ein modaler Dialog liegt in der obersten Ebene; die Meldung muss
   deshalb in ihm liegen, nicht im Meldungsbereich der Seite. */
.toast-im-dialog {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 78px;
  align-items: stretch;
}

/* Die Vertragsdokumente in den Einstellungen: eine Liste zum Nachlesen,
   keine Schaltfläche zum Zustimmen — zugestimmt wurde bei der Anmeldung. */
.dokumentliste { display: flex; flex-direction: column; gap: 2px; }
.dokumentzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  transition: border-color .14s ease, background .14s ease;
}
.dokumentzeile:hover { border-color: var(--marke); background: var(--marke-schleier); }
.dokumentzeile svg { color: var(--text-still); flex: none; }
.abschnitt-nachher { margin-top: 28px; }

/* Ein Passwort, das man sich gerade ausdenkt, tippt man falsch — und
   merkt es erst bei der nächsten Anmeldung. Das Auge zeigt es, solange
   man es sehen will. */
.mit-auge { position: relative; display: block; }
.mit-auge > input { width: 100%; padding-right: 40px; }
.auge {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: var(--radius-klein);
  opacity: .55;
}
.auge:hover, .auge.auge-offen { opacity: 1; }

/* Ein Schlüssel, den man abschreiben oder markieren soll, braucht Platz
   und eine Schrift, in der 0 und O nicht dasselbe sind. */
.schluessel.breit {
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--flaeche-still);
  overflow-wrap: anywhere;
  user-select: all;
}