/* Stilblatt des Kundenbereichs app.fahrzeugscheinscan.de
 *
 * Die Marken-Token sind aus /styles.css der Marketingseite kopiert und nicht verlinkt:
 * Der Kundenbereich liegt auf einer anderen Herkunft, ein Verweis dorthin waere ein
 * fremder Request - genau das verbietet die Content-Security-Policy des Dienstes
 * (default-src 'self'). Die Kopie ist der Preis dafuer, dass die Seite ohne fremde
 * Abhaengigkeiten laedt. Aendert sich ein Markenwert, aendert er sich hier mit.
 *
 * Alles darunter ist eigen: Der Kundenbereich ist ein Werkzeug, keine Anzeige. Er darf
 * dichter, kleiner und nuechterner sein - erkennbar dasselbe Produkt, aber gebaut fuer
 * jemanden, der zum dritten Mal an diesem Tag einen Fahrzeugschein einliest.
 */

/* ---------------------------------------------------------------------------
 * Marken-Token (Kopie aus der Marketingseite)
 * ------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --navy: #071726;
  --navy-soft: #0d2237;
  --paper: #f5f8fb;
  --white: #fff;
  --ink: #10263a;
  --muted: #607387;
  --line: #d7e1eb;
  --blue: #2f7cff;
  --cyan: #79d7ff;
  --green: #3cc99a;

  --blue-ink: #1a5fd6;
  --green-ink: #0f7a58;
  --green-tint: #e8f7f1;
  --blue-tint: #e9f1ff;

  /* Eigene Toene fuer Zustaende. Alle drei sind auf Weiss ueber 4.5:1 geprueft - sie
   * tragen Text, nicht nur Flaeche. */
  --red-ink: #b3261e;
  --red-tint: #fdeceb;
  --amber-ink: #8a5300;
  --amber-tint: #fff4e0;

  --shadow-card: 0 14px 34px rgba(8, 28, 47, .07);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------------
 * Grundlagen
 * ------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.55;
  /* 360px Geraetebreite ist die Untergrenze. Der Kundenbereich wird im Stehen am
   * Fahrzeug bedient, nicht am Schreibtisch. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  letter-spacing: -.03em;
  line-height: 1.2;
}

p {
  margin: 0;
}

a {
  color: var(--blue-ink);
}

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

.kopf :focus-visible {
  outline-color: var(--cyan);
}

/* Der erste Tabstopp der Seite. Ohne ihn muss sich jeder Tastaturnutzer bei jedem
 * Ansichtswechsel durch die komplette Navigation arbeiten. */
.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  padding: 12px 18px;
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.sprung:focus {
  left: 8px;
  top: 8px;
}

.versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Kopfzeile
 * ------------------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.kopf-innen {
  width: min(1320px, 100%);
  min-height: 58px;
  margin: auto;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marke {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: .95rem;
  font-weight: 850;
  letter-spacing: -.035em;
  text-decoration: none;
}

.marke-zeichen {
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid rgba(121, 215, 255, .65);
  border-radius: 8px;
}

.marke-zeichen:before,
.marke-zeichen:after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--cyan);
  border-left-color: transparent;
  border-right-color: transparent;
}

.marke-zeichen:after {
  inset: 10px 6px 9px;
  border-width: 1px 0 0;
  border-top-color: var(--white);
}

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.kopf-rechts a:not(.knopf) {
  color: #cddcea;
  font-size: .82rem;
  font-weight: 650;
  text-decoration: none;
}

.kopf-rechts a:not(.knopf):hover {
  color: var(--white);
}

.kopf-mail {
  max-width: 22ch;
  overflow: hidden;
  color: #9db3c5;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Kontostand steht in der Kopfzeile, weil er die Frage vor jedem Scan ist.
 * Beide Toepfe getrennt - eine Summe verschweigt, welcher Teil morgen weg ist. */
.stand-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: var(--white);
  font-size: .78rem;
  text-decoration: none;
  white-space: nowrap;
}

.stand-chip:hover {
  border-color: var(--cyan);
}

.stand-chip b {
  font-weight: 850;
}

.stand-chip span {
  color: #9db3c5;
}

.stand-chip i {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .2);
}

/* ---------------------------------------------------------------------------
 * Rahmen und Bereichsnavigation
 * ------------------------------------------------------------------------- */

.rahmen {
  width: min(1320px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  align-items: start;
}

.rahmen.ohne-nav {
  grid-template-columns: minmax(0, 1fr);
}

.seitennav {
  position: sticky;
  top: 59px;
  padding: 18px 12px;
  border-right: 1px solid var(--line);
}

.seitennav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.seitennav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--ink);
  font-size: .87rem;
  font-weight: 650;
  text-decoration: none;
}

.seitennav a:hover {
  background: var(--white);
}

.seitennav a[aria-current="page"] {
  background: var(--blue-tint);
  color: var(--blue-ink);
  font-weight: 800;
}

.nav-kuerzel {
  width: 22px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .1em;
}

.seitennav a[aria-current="page"] .nav-kuerzel {
  color: var(--blue-ink);
}

.seitennav-fuss {
  margin-top: 18px;
  padding: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.5;
}

.inhalt {
  min-width: 0;
  padding: 24px 20px 60px;
}

.inhalt:focus {
  outline: none;
}

.fuss {
  width: min(1320px, 100%);
  margin: auto;
  padding: 18px 20px 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .73rem;
}

/* ---------------------------------------------------------------------------
 * Seitenkopf und Karten
 * ------------------------------------------------------------------------- */

.seitenkopf {
  margin-bottom: 20px;
}

.seitenkopf .kicker {
  color: var(--blue-ink);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.seitenkopf h1 {
  margin: 8px 0 0;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
}

.seitenkopf p {
  margin: 8px 0 0;
  max-width: 74ch;
  color: var(--muted);
  font-size: .89rem;
}

.karte {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.karte + .karte,
.karte + .raster,
.raster + .karte,
.raster + .raster {
  margin-top: 14px;
}

.karte h2 {
  font-size: 1.02rem;
}

.karte h3 {
  font-size: .93rem;
}

.karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.karte-hinweis {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.6;
}

.raster {
  display: grid;
  gap: 14px;
}

.raster-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.raster-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------------------------------------------------------------------------
 * Knoepfe
 * ------------------------------------------------------------------------- */

.knopf {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color .16s ease, background .16s ease;
}

.knopf:hover {
  border-color: var(--blue-ink);
}

.knopf-primaer {
  border-color: var(--blue-ink);
  background: var(--blue-ink);
  color: var(--white);
}

.knopf-primaer:hover {
  background: #164fb4;
  border-color: #164fb4;
}

.knopf-still {
  border-color: rgba(255, 255, 255, .22);
  background: transparent;
  color: #cddcea;
  min-height: 36px;
  padding: 0 12px;
  font-size: .78rem;
}

.knopf-still:hover {
  border-color: var(--cyan);
  color: var(--white);
}

.knopf-klein {
  min-height: 34px;
  padding: 0 12px;
  font-size: .78rem;
}

.knopf-block {
  width: 100%;
}

.knopf[disabled],
.knopf[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

.knopf[disabled]:hover {
  border-color: var(--line);
}

.knopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

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

.feldgruppe {
  display: grid;
  gap: 14px;
}

.feldgruppe-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feld {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.feld > label,
.legende {
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
}

.feld input,
.feld select,
.feld textarea {
  min-height: 44px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: .92rem;
}

.feld input:focus,
.feld select:focus {
  border-color: var(--blue-ink);
}

.feld-hinweis {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
}

.feld-fehler input,
.feld-fehler select {
  border-color: var(--red-ink);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

/* Auswahl als Kacheln statt als Radioliste: Die Verarbeitungsstufe kostet Geld, sie
 * muss mit Preis danebenstehen und mit dem Daumen treffbar sein. */
.wahlraster {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.wahlraster-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wahl {
  position: relative;
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  cursor: pointer;
}

.wahl input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.wahl b {
  display: block;
  font-size: .86rem;
}

.wahl span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}

.wahl:hover {
  border-color: var(--blue-ink);
}

.wahl:has(input:checked) {
  border-color: var(--blue-ink);
  background: var(--blue-tint);
  box-shadow: inset 0 0 0 1px var(--blue-ink);
}

.wahl:has(input:focus-visible) {
  outline: 3px solid var(--blue-ink);
  outline-offset: 2px;
}

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

.meldung {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  font-size: .85rem;
  line-height: 1.6;
}

.meldung:empty {
  display: none;
}

.meldung b {
  display: block;
  font-weight: 850;
}

.meldung a {
  font-weight: 700;
}

.meldung-fehler {
  border-color: rgba(179, 38, 30, .35);
  background: var(--red-tint);
  color: #7a1a15;
}

.meldung-warnung {
  border-color: rgba(138, 83, 0, .32);
  background: var(--amber-tint);
  color: #6b4100;
}

.meldung-erfolg {
  border-color: rgba(15, 122, 88, .3);
  background: var(--green-tint);
  color: #0b5c43;
}

.meldung-info {
  border-color: rgba(26, 95, 214, .28);
  background: var(--blue-tint);
  color: #124aa8;
}

.meldung .knopfzeile {
  margin-top: 10px;
}

.lade {
  padding: 26px;
  color: var(--muted);
  font-size: .86rem;
}

/* ---------------------------------------------------------------------------
 * Guthaben: die zwei Toepfe
 * ------------------------------------------------------------------------- */

.topf {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.topf-plan {
  border-color: rgba(26, 95, 214, .3);
  background: linear-gradient(180deg, var(--blue-tint), var(--white) 60%);
}

.topf-wallet {
  border-color: rgba(15, 122, 88, .28);
  background: linear-gradient(180deg, var(--green-tint), var(--white) 60%);
}

.topf-name {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.topf-wert {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

.topf-wert strong {
  font-size: 2.1rem;
  letter-spacing: -.05em;
  line-height: 1;
}

.topf-wert span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}

.topf-verfall {
  margin-top: 10px;
  font-size: .78rem;
  line-height: 1.5;
}

.topf-plan .topf-verfall {
  color: #124aa8;
}

.topf-wallet .topf-verfall {
  color: #0b5c43;
}

.topf-gesamt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  font-size: .85rem;
}

.topf-gesamt b {
  font-size: 1.05rem;
}

/* ---------------------------------------------------------------------------
 * Scanbereich
 * ------------------------------------------------------------------------- */

.aufnahme {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: start;
}

.ablage {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 168px;
  padding: 22px;
  border: 2px dashed var(--line);
  border-radius: 14px;
  background: var(--paper);
  text-align: center;
}

.ablage.aktiv {
  border-color: var(--blue-ink);
  background: var(--blue-tint);
}

.ablage p {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

.ablage .knopfzeile {
  margin-top: 0;
  justify-content: center;
}

.datei-eingabe {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vorschau {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.vorschau img {
  display: block;
  width: 100%;
  max-height: 220px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--paper);
}

.vorschau-name {
  margin-top: 8px;
  overflow-wrap: anywhere;
  font-size: .8rem;
  font-weight: 700;
}

.vorschau-groesse {
  color: var(--muted);
  font-size: .76rem;
}

.pdf-marke {
  display: grid;
  place-items: center;
  height: 120px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--muted);
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: .1em;
}

/* Der Preis vor dem Absenden. Er steht unmittelbar ueber der Schaltflaeche, weil ein
 * Preis, den man erst nach dem Klick sieht, keiner ist. */
.kostenzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.kostenzeile strong {
  font-size: 1.05rem;
}

.kostenzeile span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Ergebnisfelder
 * ------------------------------------------------------------------------- */

.ergebnis-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.zaehler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.marke-chip {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: .76rem;
  font-weight: 750;
}

.marke-chip.gut {
  border-color: rgba(15, 122, 88, .3);
  background: var(--green-tint);
  color: var(--green-ink);
}

.marke-chip.offen {
  border-color: rgba(138, 83, 0, .34);
  background: var(--amber-tint);
  color: var(--amber-ink);
}

.felder {
  display: grid;
  gap: 6px;
}

/* Ein Feldkasten je Zeile, in der Reihenfolge des Papiers. Wer nachprueft, hat das
 * Dokument daneben liegen und geht es von oben nach unten durch. */
.feldkasten {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}

.feldkasten-code {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--blue-ink);
}

.feldkasten-name {
  font-size: .82rem;
  line-height: 1.4;
}

.feldkasten-einheit {
  display: block;
  color: var(--muted);
  font-size: .73rem;
}

.feldkasten-wert {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.feldkasten-wert input {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .82rem;
}

.feldkasten-wert input:focus {
  border-color: var(--blue-ink);
}

/* Nicht gelesene Kaesten werden hervorgehoben, nicht ausgeblendet. Ein weggelassenes
 * Feld sieht aus wie ein geprueftes. */
.feldkasten.nicht-lesbar {
  border-color: rgba(138, 83, 0, .4);
  background: var(--amber-tint);
}

.feldkasten.nicht-lesbar .feldkasten-wert input {
  border-color: rgba(138, 83, 0, .5);
  background: var(--white);
}

.feldkasten.nicht-lesbar .feldkasten-code {
  color: var(--amber-ink);
}

.feldkasten.geaendert {
  border-color: var(--blue-ink);
}

.wert-marke {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(138, 83, 0, .14);
  color: var(--amber-ink);
  font-size: .68rem;
  font-weight: 850;
  white-space: nowrap;
}

.wert-marke.blau {
  background: var(--blue-tint);
  color: var(--blue-ink);
}

/* ---------------------------------------------------------------------------
 * Tabellen: Verlauf und Scans
 * ------------------------------------------------------------------------- */

.tabellenrahmen {
  /* Die Tabelle scrollt fuer sich, damit die Seite es nicht tut. */
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

td.breit {
  white-space: normal;
  min-width: 22ch;
}

td.zahl,
th.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.delta-plus {
  color: var(--green-ink);
  font-weight: 850;
}

.delta-minus {
  color: var(--ink);
  font-weight: 750;
}

.status-punkt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.status-punkt:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.status-succeeded:before {
  background: var(--green);
}

.status-failed:before {
  background: var(--red-ink);
}

.status-pending:before {
  background: var(--amber-ink);
}

.leer {
  padding: 26px 4px;
  color: var(--muted);
  font-size: .86rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Pakete und Aufladung
 * ------------------------------------------------------------------------- */

.paket {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.paket-aktuell {
  border-color: var(--blue-ink);
  box-shadow: inset 0 0 0 1px var(--blue-ink);
}

.paket h3 {
  font-size: 1.1rem;
}

.paket-preis {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 10px;
}

.paket-preis strong {
  font-size: 1.7rem;
  letter-spacing: -.05em;
}

.paket-preis span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.paket-menge {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--paper);
  font-size: .84rem;
  font-weight: 800;
}

.paket-menge small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 600;
}

.paket-sparen {
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(15, 122, 88, .22);
  border-radius: 10px;
  background: var(--green-tint);
  color: var(--green-ink);
  font-size: .79rem;
  font-weight: 700;
  line-height: 1.5;
}

.paket ul {
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.paket li {
  position: relative;
  padding-left: 20px;
  font-size: .81rem;
  line-height: 1.45;
}

.paket li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green-ink);
  font-weight: 900;
}

.paket .knopf {
  margin-top: auto;
}

.staffeln {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.staffel b {
  display: block;
  font-size: 1.02rem;
}

.staffel span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .76rem;
}

/* ---------------------------------------------------------------------------
 * Anmelden und Registrieren
 * ------------------------------------------------------------------------- */

.tor {
  min-height: calc(100vh - 59px);
  display: grid;
  place-items: start center;
  padding: 34px 20px 60px;
}

.tor-karte {
  width: min(520px, 100%);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.tor-karte h1 {
  font-size: 1.55rem;
}

.tor-karte > p {
  margin-top: 8px;
  color: var(--muted);
  font-size: .87rem;
}

/* Das Versprechen aus der Marketingseite steht hier noch einmal - wer hier landet,
 * hat es dort gelesen und darf es nicht suchen muessen. */
.geschenk {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 4px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 122, 88, .26);
  border-radius: 12px;
  background: var(--green-tint);
  color: var(--green-ink);
}

.geschenk b {
  display: block;
  font-size: .95rem;
  font-weight: 900;
}

.geschenk span {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.5;
}

.geschenk-zahl {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--green-ink);
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 900;
}

.tor-wechsel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .84rem;
}

/* ---------------------------------------------------------------------------
 * Umbrueche
 * ------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .rahmen {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Die Bereichsnavigation wandert unter die Kopfzeile und scrollt waagerecht. Sie
   * bleibt sichtbar - ein Menue hinter einem Knopf kostet bei fuenf Zielen mehr, als
   * es spart. */
  .seitennav {
    position: sticky;
    top: 58px;
    z-index: 15;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    overflow-x: auto;
  }

  .seitennav ul {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 6px;
  }

  .seitennav a {
    padding: 8px 12px;
    white-space: nowrap;
  }

  .nav-kuerzel,
  .seitennav-fuss {
    display: none;
  }

  .aufnahme {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .raster-2,
  .raster-3,
  .feldgruppe-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .staffeln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kopf-mail {
    display: none;
  }
}

@media (max-width: 560px) {
  .inhalt {
    padding: 18px 14px 50px;
  }

  .karte {
    padding: 16px;
  }

  .kopf-innen {
    padding: 8px 14px;
  }

  .stand-chip {
    padding: 5px 10px;
    font-size: .73rem;
  }

  /* Der Feldkasten stapelt: Code und Name oben, Wert darunter. Nebeneinander bliebe
   * fuer den Wert kein Platz, und genau er wird hier bearbeitet. */
  .feldkasten {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .feldkasten-wert {
    grid-column: 1 / -1;
  }

  .wahlraster-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .tor {
    padding: 20px 14px 50px;
  }

  .tor-karte {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ===========================================================================
 * Löschen, Aufbewahrung, USt-IdNr.
 *
 * Nachtrag als eigener Abschnitt: Die drei Faehigkeiten kamen zusammen dazu, und ein
 * Nachtrag, der sich in die vorhandenen Bloecke einschleicht, ist beim naechsten Mal
 * nicht mehr als Nachtrag erkennbar. Keine Regel darueber wird angefasst - alles hier
 * sind neue Klassen.
 *
 * Die Farben kommen aus den vorhandenen Token (--red-ink, --red-tint, --amber-*). Neue
 * Toene waeren hier besonders teuer: Rot bedeutet in diesem Stilblatt „nicht umkehrbar“,
 * und zwei verschiedene Rot machen aus dieser Bedeutung eine Vermutung.
 * ======================================================================== */

/* Rueckfrage statt Systemdialog -----------------------------------------------------
 *
 * Der Raum haelt entweder den Ausloeser oder die Rueckfrage - nie beides. Deshalb
 * inline-flex und keine feste Breite: Die Zelle waechst mit der Frage und schrumpft
 * wieder, sobald abgebrochen wurde. */
.rueckfrage-raum {
  display: inline-flex;
  align-items: center;
}

.rueckfrage {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 11px;
  border: 1px solid rgba(138, 83, 0, .32);
  border-radius: 11px;
  background: var(--amber-tint);
}

.rueckfrage-frage {
  color: var(--amber-ink);
  font-size: .78rem;
  font-weight: 800;
  white-space: normal;
}

/* Der Ausloeser ist bewusst still: Er steht in jeder Zeile, und zwoelf rote Knoepfe
 * untereinander machen aus einer Warnung eine Tapete. Rot wird er erst als Bestaetigung,
 * wenn er wirklich loescht. */
.knopf-loeschen {
  border-color: var(--line);
  background: var(--white);
  color: var(--red-ink);
}

.knopf-loeschen:hover {
  border-color: var(--red-ink);
  background: var(--red-tint);
}

.knopf-gefahr {
  border-color: var(--red-ink);
  background: var(--red-ink);
  color: var(--white);
}

.knopf-gefahr:hover {
  border-color: #8f1e17;
  background: #8f1e17;
}

/* Aktionen in einer Tabellenzeile. Die Zelle darf umbrechen, sobald die Rueckfrage
 * aufgeht - sonst schiebt sie die ganze Tabelle aus dem Bild. */
.zeilen-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  white-space: normal;
}

/* Zustand der USt-IdNr. -------------------------------------------------------------
 *
 * Die Marke sagt kurz, was gilt; der Satz daneben sagt, warum. „nicht erreichbar“ ist
 * kein Fehler des Kunden und braucht die Erklaerung, sonst liest es sich wie einer. */
.ust-zustand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ust-zustand:empty {
  display: none;
}

.ust-erklaerung {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
}

/* Der vierte Zustand: geprueft und nicht bestaetigt. Warnend, nicht rot wie ein
 * Serverfehler - die Nummer laesst sich korrigieren. */
.marke-chip.schlecht {
  border-color: rgba(179, 38, 30, .35);
  background: var(--red-tint);
  color: var(--red-ink);
}

/* Kontoloeschung ---------------------------------------------------------------------
 *
 * Optisch abgesetzt, weil dieser Block als Einziger etwas tut, das sich nicht zuruecknehmen
 * laesst. Der Rahmen trennt ihn von den Formularen darueber, die alle korrigierbar sind. */
.gefahrzone {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(179, 38, 30, .35);
  border-radius: 12px;
  background: var(--red-tint);
}

.gefahrzone h3 {
  color: #7a1a15;
  font-size: 1rem;
}

.gefahr-warnung {
  margin-top: 8px;
  color: #7a1a15;
  font-size: .85rem;
  line-height: 1.6;
}

.gefahr-warnung b {
  display: block;
  font-weight: 850;
}

/* Der Stand als Zahl, nicht als Warnung: Wer sein gekauftes Guthaben sieht, entscheidet
 * anders als jemand, dem man es nur beschreibt. */
.gefahr-stand {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.gefahr-stand span {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-size: .78rem;
}

.gefahr-stand b {
  margin-right: 6px;
  font-size: 1.05rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

/* Der Satz unter dem Stand traegt die Offenlegung, dass gekauftes Guthaben mitgeht. Er
 * steht in Textfarbe und nicht in Rot: Die Zahl darueber warnt bereits, und eine zweite
 * Warnfarbe im selben Block laesst beide verblassen. Der gedaempfte Grauton der
 * Kartenhinweise reicht auf dem roten Untergrund nicht fuer 4,5:1 - deshalb --ink. */
.gefahr-hinweis {
  margin-top: 10px;
  color: var(--ink);
  font-size: .8rem;
  line-height: 1.6;
}

.gefahrzone .meldung {
  margin-top: 14px;
  background: var(--white);
}

.gefahrzone form {
  margin-top: 14px;
}

@media (max-width: 560px) {
  /* Auf dem Telefon steht die Rueckfrage unter dem Ausloeser statt daneben - nebeneinander
   * bliebe fuer „Ja, loeschen“ kein Platz, und genau der Knopf muss treffbar sein. */
  .rueckfrage {
    width: 100%;
  }

  .zeilen-aktionen {
    align-items: stretch;
    flex-direction: column;
  }

  .gefahr-stand span {
    flex: 1 1 100%;
  }
}