/* Huelle des Kontobereichs: Seitennavigation, Karten, Listen, Zustaende.
   Getrennt von konto.css, weil stueckliste.html den Grundteil (die Regeln
   aus cart.html) bereits inline mitbringt und nur diesen Abschnitt braucht.
   Die Kontoseiten laden beide Dateien, stueckliste.html nur diese.

   Setzt die Farb- und Radiusmarken aus :root voraus, die jede Seite des
   Prototyps ohnehin definiert.

   Abstaende: 8er-Raster mit 4 als halbem Schritt. */

/* Sprungmarke: erscheint erst bei Tastaturbedienung und spart den Weg durch
   Kopfzeile und Navigation. Im Bestand fehlt sie. */
.konto-skip {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 3000;
  padding: 8px 16px;
  background: var(--c-bg-white);
  border: 1px solid var(--c-blue);
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-blue);
  transition: top 0.15s;
}
.konto-skip:focus { top: 8px; text-decoration: none; }

/* Sichtbarer Fokus auf allem, was im Kontobereich bedienbar ist. */
.konto-nav a:focus-visible,
.konto-kpi:focus-visible,
.konto-btn:focus-visible,
.konto-search input:focus-visible,
.konto-select:focus-visible,
.konto-check:focus-visible,
.konto-table a:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

/* Die Krume polstert seitlich 24px, die Produktseite setzt den Inhalt 24px
   darunter an. Der Kontobereich stand bei 16px seitlich und ohne Abstand
   nach oben, also weder in der Flucht noch im Rhythmus der anderen Seiten. */
.konto-main {
  max-width: 1680px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}
/* Zwei Spalten: Navigation und Inhalt. Die Navigation laeuft mit, damit man
   aus jeder Liste in jede andere springt, ohne zurueckzugehen. */
.konto-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.konto-aside { position: sticky; top: 16px; }

/* --- Seitennavigation ---------------------------------------------------- */
.konto-nav {
  background: var(--c-bg-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 8px;
}
.konto-nav-group + .konto-nav-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
}
/* Die Gruppen sind beschriftet. In der Produktion trennen nur Haarlinien,
   und die Zuordnung muss geraten werden (Befund A7). */
.konto-nav-title {
  margin: 4px 0;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
}
.konto-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  color: var(--c-text);
  text-decoration: none;
  transition: background 0.15s;
}
.konto-nav a:hover { background: var(--c-bg-tint); text-decoration: none; }
.konto-nav a[aria-current="page"] {
  background: var(--c-blue-tint);
  color: var(--c-blue);
  font-weight: 600;
}
.konto-nav svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Zaehler am Eintrag: man sieht ohne Klick, wo etwas liegt. */
.konto-nav-count {
  margin-left: auto;
  min-width: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--c-bg-tint);
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  color: var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
}
.konto-nav a[aria-current="page"] .konto-nav-count { background: var(--c-bg-white); color: var(--c-blue); }

/* --- Seitenkopf ---------------------------------------------------------- */
.konto-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.konto-h1 { font-size: 24px; font-weight: 700; margin: 0; line-height: 1.25; }
.konto-head-sub { margin: 4px 0 0; font-size: 13px; color: var(--c-text-secondary); }
.konto-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Karte --------------------------------------------------------------- */
.konto-card {
  background: var(--c-bg-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 16px;
}
.konto-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}
.konto-card-title { font-size: 16px; font-weight: 600; margin: 0; }
/* Ein Verweis, der neben einem Wert steht, begleitet ihn und uebertoent
   ihn nicht. */
.konto-mini { font-size: 13px; }
.konto-card-link { font-size: 13px; font-weight: 500; }
.konto-section { margin-top: 24px; }

/* --- Aufmerksamkeitsband ------------------------------------------------- */
/* Steht vor allem anderen. Die Produktionsuebersicht spiegelt nur die
   Navigation und sagt nicht, was offen ist (Befund A9). */
.konto-attention {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.konto-kpi {
  display: block;
  background: var(--c-bg-white);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-border-control);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--c-text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.konto-kpi:hover { background: var(--c-bg-tint); border-color: var(--c-border-strong); text-decoration: none; }
.konto-kpi.is-warn { border-left-color: var(--c-warning); }
.konto-kpi.is-blue { border-left-color: var(--c-blue); }
.konto-kpi.is-ok { border-left-color: var(--c-success); }
.konto-kpi-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.konto-kpi-label { font-size: 13px; color: var(--c-text-secondary); margin-top: 4px; }
.konto-kpi-note { font-size: 12px; color: var(--c-text-tertiary); margin-top: 4px; }
.konto-kpi.is-warn .konto-kpi-note { color: var(--c-warning); font-weight: 600; }

/* --- Raster der Uebersicht ----------------------------------------------- */
.konto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(336px, 1fr));
  gap: 16px;
  align-items: start;
}
/* Zwei Listen nebeneinander schliessen buendig ab. Der freie Platz in der
   kuerzeren Karte bleibt nicht leer, sondern traegt die Fusszeile - sonst
   tauscht man ausgefranste Unterkanten gegen Leerraum. */
.konto-grid.is-gleich { align-items: stretch; }
.konto-grid.is-gleich .konto-card { display: flex; flex-direction: column; }
.konto-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
  color: var(--c-text-secondary);
}
.konto-card-foot strong { color: var(--c-text); font-weight: 600; }
.konto-card-foot a { font-weight: 600; white-space: nowrap; }

/* --- Streifen fuer Nachschlagewerte -------------------------------------- */
/* Adresse, Zahlungsart und Unternehmen sind keine Aufgaben. Sie stehen
   deshalb kleiner als die Listen darueber - aber jede Angabe in einer eigenen
   Karte. Ein Rahmen mit Trennlinien darin sah aus wie eine Karte, die in
   Spalten zerschnitten wurde: zusammen und getrennt zugleich. */
.konto-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.konto-strip-col {
  padding: 16px;
  background: var(--c-bg-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.konto-strip-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
}
.konto-strip-value { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.konto-strip-note { margin: 4px 0 0; font-size: 13px; color: var(--c-text-secondary); line-height: 1.5; }
.konto-strip-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 500; }
/* --- Werkzeugleiste ueber Listen ----------------------------------------- */
.konto-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.konto-search {
  position: relative;
  flex: 1 1 256px;
  min-width: 200px;
}
.konto-search input {
  width: 100%;
  height: 40px;
  padding: 0 16px 0 40px;
  border: 1px solid var(--c-border-control);
  border-radius: var(--radius-xs);
  background: var(--c-bg-white);
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
  transition: border-color 0.15s;
}
.konto-search input:hover { border-color: var(--c-border-strong); }
.konto-search svg {
  position: absolute;
  left: 16px; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  color: var(--c-text-tertiary);
  pointer-events: none;
}
.konto-select {
  height: 40px;
  padding: 0 32px 0 16px;
  border: 1px solid var(--c-border-control);
  border-radius: var(--radius-xs);
  background: var(--c-bg-white) var(--pfeil-unten) no-repeat right 8px center;
  background-size: 16px;
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
  cursor: pointer;
  appearance: none;
  transition: border-color 0.15s;
}
.konto-select:hover { border-color: var(--c-border-strong); }
:root { --pfeil-unten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.konto-toolbar-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* Knopf in Hoehe der Filter, sekundaere Stufe wie im Warenkorb. */
.konto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-xs);
  background: var(--c-blue-soft);
  color: var(--c-navy);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.konto-btn:hover { background: var(--c-blue-soft-hover); text-decoration: none; }
.konto-btn.primary { background: var(--c-blue); color: var(--c-text-on-dark); }
.konto-btn.primary:hover { background: var(--c-blue-hover); }
/* Weisse Flaeche, nicht durchsichtig: auf dem grauen Seitengrund sah ein
   Knopf ohne Fuellung aus wie ein Rahmen ohne Inhalt. Auf weissen Karten
   faellt der Unterschied nicht auf. */
.konto-btn.ghost {
  background: var(--c-bg-white);
  border: 1px solid var(--c-border-control);
  color: var(--c-text);
  font-weight: 500;
}
.konto-btn.ghost:hover { background: var(--c-bg-tint); border-color: var(--c-border-strong); }
/* Zerstoerende Handlungen tragen die Warnfarbe und stehen nie an erster
   Stelle. Fuellung bleibt weiss - rot gefuellt waere ein Hauptknopf, und das
   ist Kuendigen nicht. */
.konto-btn.danger {
  background: var(--c-bg-white);
  border: 1px solid var(--c-border-control);
  color: var(--c-danger);
  font-weight: 500;
}
.konto-btn.danger:hover { background: #fdecef; border-color: var(--c-danger); }
/* Symbolknopf fuer genau eine Handlung mit eindeutigem Zeichen - Teilen zum
   Beispiel. Kein Punktemenue: das waere ein Behaelter ohne Aussage, und was
   darin steht, erfaehrt man erst nach einem Klick. Die Flaeche misst 40px,
   damit sie ohne Zielhilfe zu treffen ist. */
.konto-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--c-border-control);
  border-radius: var(--radius-xs);
  background: var(--c-bg-white);
  color: var(--c-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.konto-icon-btn { position: relative; }
.konto-icon-btn svg { width: 18px; height: 18px; }
/* Ein Symbol allein muss sagen koennen, was es tut. Der Hinweis steht deshalb
   nicht nur in aria-label, sondern auch sichtbar bei Mauszeiger und Tastatur.
   Dieselbe Bauart wie .icon-btn[data-tooltip] im Warenkorb, damit es im
   Prototyp eine Sprechblase gibt und nicht zwei. */
.konto-icon-btn[data-tooltip]:hover::after,
.konto-icon-btn[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--c-navy);
  color: var(--c-text-on-dark);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.konto-icon-btn:hover { background: var(--c-bg-tint); border-color: var(--c-border-strong); }
.konto-icon-btn:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* Steht nach den Spielarten, sonst gewinnt .primary bei gleicher Staerke. */
.konto-btn:disabled,
.konto-btn:disabled:hover {
  background: var(--c-disabled-bg);
  border-color: transparent;
  color: var(--c-disabled-text);
  cursor: default;
}
.konto-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* --- Liste ---------------------------------------------------------------- */
/* Die Tabelle fuellt ihren Rahmen und bricht um, statt darueber
   hinauszuwachsen. Die Stueckliste rollt waagerecht, weil sie zwoelf Spalten
   mit Zahlen traegt, die nicht brechen duerfen. Die Kontolisten haben
   Textspalten, und die brechen lieber, als den Nutzer schieben zu lassen.
   Nicht brechen duerfen nur Zahlen, Daten und die Handlungsspalte. */
.konto-table-wrap { overflow-x: auto; background: var(--c-bg-white); border: 1px solid var(--c-border); border-radius: var(--radius); }
.konto-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.konto-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
  padding: 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-tint);
  vertical-align: bottom;
}
.konto-table td { padding: 16px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.konto-table tbody tr:last-child td { border-bottom: none; }
.konto-table tbody tr:hover { background: var(--c-bg-tint); }
.konto-table tr[hidden] { display: none; }
.konto-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Lange Bezeichnungen brechen, bevor sie die Spalte sprengen - aber nur
   zwischen Woertern, und im Wort erst, wenn ein einzelnes Wort allein schon
   zu breit waere. "anywhere" stand hier zuerst und zerlegte
   "Verbindungsklemme" mitten im Wort. */
.konto-table td { overflow-wrap: break-word; hyphens: auto; }
.konto-table td.konto-num, .konto-table td.konto-amount { overflow-wrap: normal; hyphens: none; }
.konto-amount { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; font-weight: 600; }
.konto-table th.konto-amount { text-align: right; }
.konto-cell-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--c-text-secondary); }
.konto-row-actions { display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.konto-check { width: 16px; height: 16px; accent-color: var(--c-blue); cursor: pointer; }
/* Sammelaktion erscheint erst, wenn etwas ausgewaehlt ist. */
.konto-bulk {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--c-blue-tint);
  border: 1px solid var(--c-blue);
  border-radius: var(--radius);
  font-size: 14px;
}
.konto-bulk[hidden] { display: none; }
.konto-bulk-count { font-weight: 600; }
.konto-bulk-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Leerzustand --------------------------------------------------------- */
/* Gleiche Bauart wie der leere Warenkorb: Titel, ein Satz, Handlung. */
.konto-empty {
  background: var(--c-bg-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
}
.konto-empty-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.konto-empty-text { font-size: 14px; color: var(--c-text-secondary); margin: 0 auto 16px; max-width: 520px; line-height: 1.5; }
.konto-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* --- Ladezustand --------------------------------------------------------- */
/* Im Bestand gibt es keinen. Auf der Produktionsliste standen Zeilen im
   Ladezustand wie fertige Bestellungen da (Befund B2). Hier sagt eine Zeile,
   dass geladen wird, und zwar auch fuer Vorlesewerkzeuge. */
.konto-skeleton td { color: transparent; }
.konto-skeleton-bar {
  display: block;
  height: 12px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, #eef0f4 25%, #e3e6ec 37%, #eef0f4 63%);
  background-size: 400% 100%;
  animation: konto-shimmer 1.4s ease infinite;
}
@keyframes konto-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .konto-skeleton-bar { animation: none; } }

/* --- Fehlerzustand ------------------------------------------------------- */
.konto-error {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px;
  background: #fdecef;
  border: 1px solid var(--c-danger);
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: 16px;
}
.konto-error svg { width: 24px; height: 24px; color: var(--c-danger); flex-shrink: 0; }
.konto-error-actions { margin-left: auto; }

/* --- Artikelvorschau in einer Liste -------------------------------------- */
/* Eine Bestellliste ohne Artikel zwingt zum Oeffnen jeder Zeile, nur um zu
   sehen, worum es ging. Hersteller-Nummern helfen dabei nicht; ein Bild und
   ein kurzer Titel schon. Drei Bilder reichen: mehr wird zur Zahl. */
.konto-vorschau { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.konto-vorschau-bild {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.konto-vorschau-bild img { width: 100%; height: 100%; object-fit: contain; }
.konto-vorschau-mehr {
  flex-shrink: 0;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
}
/* Hoechstens zwei Zeilen: die Zelle soll die Zeilenhoehe der Tabelle nicht
   sprengen, und ein dritter Umbruch bringt kein Unterscheidungsmerkmal mehr. */
.konto-vorschau-titel {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-text);
}

/* --- Feld mit Pflichtmarke und Zeichenzaehler -----------------------------
   Gleiche Bauart wie jede andere Eingabe im Kontobereich: Beschriftung
   darueber, 1px Rand, 48px hoch. Der Stern sagt, was Pflicht ist, der Zaehler
   sagt, wie viel noch geht - beides ist Information, keine Gestaltung. */
.konto-feldbox { display: block; }
/* Label und Zeichenzaehler teilen sich eine Zeile ueber dem Feld. Stand der
   Zaehler unter dem Feld, war der Abstand zum naechsten Label dort um seine
   Zeile groesser als bei einem Feld ohne Zaehler - gemessen stimmten die
   16 px zwischen den Kaesten, gesehen stimmte nichts. Jetzt hat jeder Kasten
   denselben Aufbau: eine Kopfzeile, ein Feld. */
.konto-feldbox-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.konto-feldbox-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 6px;
}
.konto-feldbox-kopf .konto-feldbox-label { margin-bottom: 0; }
.konto-feldbox-label .pflicht { color: var(--c-text-secondary); font-weight: 400; }
.konto-feldbox input,
.konto-feldbox select {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--c-border-control);
  border-radius: var(--radius-xs);
  background: var(--c-bg-white);
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
  transition: border-color 0.15s;
}
.konto-feldbox select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}
.konto-feldbox input:hover,
.konto-feldbox select:hover { border-color: var(--c-border-strong); }
.konto-feldbox input:focus-visible,
.konto-feldbox select:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.konto-feldbox.ist-fehler input { border-color: var(--c-danger); }
/* Der Pfeil sitzt im Feld, weil das Auswahlfeld sein eigenes Zeichen nicht
   zeigen darf, wenn der Rest gestaltet ist. */
.konto-feldbox-wrap { position: relative; }
.konto-feldbox-pfeil {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--c-text-secondary);
  pointer-events: none;
}
.konto-feldbox-zaehler {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--c-text-tertiary);
  font-variant-numeric: tabular-nums;
}
/* Alle Felder untereinander und gleich breit. Nebeneinander sahen sie aus
   wie zwei Formulare; ein Formular hat eine Kante, an der das Auge
   hinunterlaeuft. Das Mass ist dasselbe wie das der Adresszeile mit ihrem
   Knopf, damit keine Zeile aus der Flucht faellt. */
.konto-feldreihe { display: grid; gap: 16px; max-width: 620px; }

/* Anrede und Titel sind kurze Auswahlen - nebeneinander sparen sie eine
   Zeile, ohne die Kante zu brechen: zusammen mit dem Abstand sind sie
   genauso breit wie die Felder darunter. Wird es zu eng, stapeln sie. */
.konto-feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .konto-feldpaar { grid-template-columns: 1fr; } }

/* --- Eingabereihe: Feld und Knopf als eine Einheit ------------------------ */
/* Gleiche Bauart wie im Anmeldeband ueber dem Seitenfuss. Unter 560px stapeln
   beide und werden wieder rundum gerundet. */
.konto-eingabe-reihe { display: flex; flex-wrap: wrap; max-width: 620px; }
.konto-eingabe-reihe input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--c-border-control);
  border-right: 0;
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
  background: var(--c-bg-white);
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
  transition: border-color 0.15s;
}
.konto-eingabe-reihe input[type="email"]:hover { border-color: var(--c-border-strong); }
.konto-eingabe-reihe input[type="email"][aria-invalid="true"] { border-color: var(--c-danger); }
.konto-eingabe-reihe input[type="email"]:focus-visible { position: relative; z-index: 1; }
.konto-eingabe-reihe .konto-btn {
  flex: 0 0 auto;
  min-height: 48px;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
@media (max-width: 559px) {
  .konto-eingabe-reihe { gap: 8px; }
  .konto-eingabe-reihe input[type="email"] { flex: 1 1 100%; border-right: 1px solid var(--c-border-control); border-radius: var(--radius-xs); }
  .konto-eingabe-reihe .konto-btn { flex: 1 1 100%; border-radius: var(--radius-xs); }
}
/* Platz fuer Fehler und Tippfehler-Vorschlag. Leer nimmt er keinen Raum:
   ein dauerhaft leerer Streifen waere die eine Luecke im Formular, die aus
   der Reihe faellt. Erscheint eine Meldung, ruecken Kaestchen und Hinweis
   darunter um eine Zeile nach - unter dem Feld, das gerade korrigiert wird. */
.konto-eingabe-meldung { font-size: 13px; }
.konto-eingabe-meldung:not(:empty) { padding-top: 6px; }
.konto-eingabe-meldung .konto-feldfehler { display: flex; gap: 8px; color: var(--c-danger); }
.konto-eingabe-meldung .konto-tipp { color: var(--c-text-secondary); }
.konto-eingabe-meldung .konto-tipp button {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--c-blue); text-decoration: underline; cursor: pointer;
}

/* --- Einwilligung --------------------------------------------------------- */
/* Gleiche Bauart wie im Anmeldeband und im Konzept: ein Kaestchen, das etwas
   bedeutet, nie vorausgewaehlt, mit eigener Meldung. */
.konto-einwilligung {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 72ch;
  cursor: pointer;
  font-size: 13px;
  color: var(--c-text-secondary);
  line-height: 1.5;
}
.konto-einwilligung input {
  width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0;
  accent-color: var(--c-blue); cursor: pointer;
}
.konto-einwilligung input[aria-invalid="true"] { outline: 2px solid var(--c-danger); outline-offset: 2px; }
/* Meldung zum Kaestchen. Sie steht am Ende der Karte, also verschiebt sie
   nichts ausser dem Kartenrand; deshalb kein reservierter Platz. */
.konto-einwilligung-note:empty { display: none; }
.konto-einwilligung-note {
  margin: 10px 0 0;
  max-width: 72ch;
  font-size: 13px;
  color: var(--c-danger);
  line-height: 1.5;
}

/* --- Beilaeufige Bemerkung ------------------------------------------------ */
/* Ein Satz, der nur einen Zustand erklaert, ist kein Hinweisbanner. .konto-note
   traegt Rahmen, Flaeche und eine Handlung und liest sich deshalb als Warnung.
   "Noch nicht versendet, deshalb noch stornierbar" hat so ausgesehen wie eine
   Meldung, auf die man reagieren muss. */
.konto-bemerkung {
  margin: 0;
  max-width: 72ch;
  font-size: 13px;
  color: var(--c-text-secondary);
  line-height: 1.5;
}

/* --- Hinweis mit Weg ----------------------------------------------------- */
/* Die Produktion sagt "bitte IBAN hinterlegen" ohne Verweis darauf, wo das
   geht (Befund B12/F5). Jeder Hinweis hier traegt seine Handlung. */
.konto-note {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--c-blue-tint-soft);
  border: 1px solid var(--c-blue-soft);
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: 16px;
}
.konto-note svg { width: 24px; height: 24px; color: var(--c-blue); flex-shrink: 0; }
.konto-note > span { flex: 1 1 320px; }
.konto-note a { margin-left: auto; font-weight: 600; white-space: nowrap; }

/* --- Datensatz: Listen nebeneinander ------------------------------------- */
/* Vierter Anlauf, deshalb hier die ganze Begruendung.
   1. Bezeichnung links in fester Spalte von 120px, Wert nimmt den ganzen
      Rest, unter jeder Zeile eine Linie. Bei 1920px Fenster 1198px
      Wertspalte fuer Werte von hoechstens 268px, und die Linie lief quer
      durch den leeren Teil.
   2. Raster mit Bezeichnung ueber dem Wert. Fuellte die Breite, hatte aber
      zwei Leserichtungen: Bezeichnung und Wert beginnen an derselben Kante,
      also bildet keines von beiden eine Spalte, an der das Auge
      entlanglaufen kann, und bei unterschiedlich hohen Zellen ist nicht mehr
      zu sehen, was zusammengehoert.
   3. Liste, aber auf 640px begrenzt. Damit war die Leere nur verschoben: aus
      den Zeilen in den Kartenrahmen.
   Jetzt: dieselbe Liste, aber in Spalten gesetzt. Der Satz laeuft
   spaltenweise - erst die eine Spalte von oben nach unten, dann die naechste
   - also bleibt die Leserichtung die einer Liste. Bezeichnungen und Werte
   fluchten innerhalb jeder Spalte. Und die Breite wird benutzt, weil so viele
   Spalten entstehen, wie hineinpassen: zwei in einer Karte ueber die volle
   Inhaltsbreite, eine in einer schmalen Karte oder einer Adresszeile. */
.konto-fakten {
  margin: 0;
  max-width: 640px;
  font-size: 14px;
}
.konto-fakten > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 6px 0;
  min-width: 0;
}
/* 160px statt der frueheren 120px: "Voraussichtlich am" misst 130px und
   brach vorher um. Bleibt zu wenig Platz fuer den Wert, rutscht er unter die
   Bezeichnung, statt Buchstabe fuer Buchstabe zu brechen. */
.konto-fakten dt { flex: 0 0 160px; margin: 0; color: var(--c-text-secondary); }
.konto-fakten dd { flex: 1 1 180px; margin: 0; min-width: 0; line-height: 1.5; }

/* --- Positionszeile einer Bestellung ------------------------------------- */
.konto-pos { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--c-border); }
.konto-pos:last-of-type { border-bottom: none; }
.konto-pos-img {
  width: 64px; height: 64px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xs);
  background: var(--c-bg-white);
  overflow: hidden;
}
.konto-pos-img img { max-width: 100%; max-height: 100%; }
.konto-pos-body { flex: 1; min-width: 0; }
.konto-pos-name { font-size: 14px; font-weight: 600; margin: 0 0 4px; line-height: 1.4; }
.konto-pos-meta { font-size: 12px; color: var(--c-text-secondary); display: flex; gap: 16px; flex-wrap: wrap; }
.konto-pos-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.konto-pos-price { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.konto-pos-unit { font-size: 12px; color: var(--c-text-secondary); }

/* --- Summenblock --------------------------------------------------------- */
/* Netto, Versand, MwSt., Gesamt. Die Produktion zeigt "Bruttopreis" und
   darunter eine MwSt.-Zeile zwischen zwei gleichen Betraegen (Befund B8). */
.konto-sum { max-width: 320px; margin-left: auto; font-size: 14px; }
.konto-sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.konto-sum-row span:last-child { font-variant-numeric: tabular-nums; }
.konto-sum-total {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--c-border);
  font-size: 16px; font-weight: 700;
}
.konto-sum-note { font-size: 12px; color: var(--c-text-secondary); text-align: right; margin: 8px 0 0; }

/* --- Zeitstrahl der Sendung ---------------------------------------------- */
.konto-steps { display: flex; gap: 0; margin: 16px 0 0; }
.konto-step { flex: 1; position: relative; padding-top: 24px; font-size: 12px; color: var(--c-text-secondary); }
.konto-step::before {
  content: '';
  position: absolute; top: 4px; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-bg-white);
  border: 2px solid var(--c-border-control);
}
.konto-step::after {
  content: '';
  position: absolute; top: 11px; left: 16px; right: 0;
  height: 2px;
  background: var(--c-border);
}
.konto-step:last-child::after { display: none; }
.konto-step.is-done::before { background: var(--c-success); border-color: var(--c-success); }
.konto-step.is-done::after { background: var(--c-success); }
.konto-step.is-now::before { border-color: var(--c-blue); background: var(--c-blue); }
.konto-step.is-now { color: var(--c-text); font-weight: 600; }

/* --- Auswahlzeile (Zahlungsart) ------------------------------------------ */
/* Ganze Zeile bedienbar, sichtbarer gewaehlter Zustand. Die Produktion
   wiederholt rechts als graue Marke, was links schon steht (Befund F2). */
.konto-option {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 16px;
  border: 1px solid var(--c-border-control);
  border-radius: var(--radius);
  background: var(--c-bg-white);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.konto-option + .konto-option { margin-top: 8px; }
.konto-option:hover { border-color: var(--c-blue); }
.konto-option:has(input:checked) { border-color: var(--c-blue); background: var(--c-blue-tint); }
.konto-option:focus-within { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.konto-option input { width: 16px; height: 16px; accent-color: var(--c-blue); flex-shrink: 0; }
.konto-option-body { flex: 1; min-width: 0; }
.konto-option-name { display: block; font-size: 14px; font-weight: 600; }
.konto-option-note { display: block; font-size: 13px; color: var(--c-text-secondary); margin-top: 4px; line-height: 1.45; }
.konto-option-logo { flex-shrink: 0; display: flex; align-items: center; }

/* --- Schmalere Schirme ---------------------------------------------------- */
/* Der Schwerpunkt liegt auf dem Schreibtisch, siehe 02-concept.md. Hier nur
   so viel, dass nichts seitlich aus der Seite laeuft. */
/* Statt zu rollen gibt die Tabelle zuerst Polsterung ab, dann Schriftgroesse,
   dann stapelt sie die Knoepfe. Erst danach bliebe waagerechtes Rollen. */
@media (max-width: 1279px) {
  .konto-table th, .konto-table td { padding: 12px 8px; }
  .konto-btn { padding: 8px 12px; }
  /* Statuspille und Knopfbeschriftung duerfen brechen. Solange Platz ist,
     aendert das nichts, und wenn es eng wird, spart es die Rollleiste. */
  .konto-row-actions { white-space: normal; }
  .konto-table .bom-status { white-space: normal; }
  /* Der Kurztitel auf eine Zeile. Das spart der Zeile rund 18px Hoehe. Die
     Bilder bleiben alle drei: sie sind 32px schmal, und eines davon zu
     verstecken wuerde die Zahl daneben ("+1") falsch machen. */
  .konto-vorschau-titel { -webkit-line-clamp: 1; max-width: 22ch; }
}
@media (max-width: 1100px) {
  .konto-table { font-size: 13px; }
  .konto-table th { font-size: 10px; letter-spacing: 0.02em; }
  .konto-table th, .konto-table td { padding: 12px 6px; }
  .konto-row-actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .konto-row-actions .konto-btn { min-height: 32px; font-size: 13px; padding: 4px 8px; }
  /* Gestapelt bleibt der Symbolknopf quadratisch: ueber die ganze Zellbreite
     gezogen saehe ein Zeichen in der Mitte aus wie ein leerer Knopf. */
  .konto-row-actions .konto-icon-btn { align-self: flex-end; width: 32px; height: 32px; }
  .konto-cell-sub { font-size: 11px; }
  /* Eine Spalte weniger, bevor die Knopfbeschriftung dreizeilig wird. Faellt
     die, die am wenigsten sagt: wie viele Positionen es sind, steht auch auf
     der Bestellseite. Die Artikelvorschau bleibt - sie ist der Grund, warum
     die Liste ueberhaupt gelesen wird. */
  .konto-table .konto-spalte-opt { display: none; }
}
/* Letzter Schritt vor dem Umbruch der Seitenleiste bei 900. Muss nach dem
   1100er-Block stehen: beide treffen zu, und bei gleicher Staerke gewinnt der
   spaetere. */
@media (max-width: 1023px) {
  .konto-table th, .konto-table td { padding: 10px 4px; }
  /* Letzte Reserve: hier darf auch im Wort gebrochen werden, wo die
     Silbentrennung nicht reicht. Oberhalb bleibt es bei sauberer Trennung. */
  .konto-table td { overflow-wrap: anywhere; }
  .konto-table td.konto-num, .konto-table td.konto-amount { overflow-wrap: normal; }
}
@media (max-width: 900px) {
  .konto-layout { grid-template-columns: 1fr; }
  .konto-aside { position: static; }
  .konto-nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .konto-nav-group { display: contents; }
  .konto-nav-title { display: none; }
  .konto-nav a { border: 1px solid var(--c-border); }
  .konto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .konto-main { padding: 16px 16px 32px; }
  .konto-sum { max-width: none; }
  .konto-pos { flex-wrap: wrap; }
  .konto-pos-right { width: 100%; align-items: flex-start; text-align: left; }
}

/* --- Werkzeugseite in der Kontohuelle ------------------------------------ */
/* stueckliste.html bringt ihren eigenen Hauptbereich mit. In der Spalte
   braucht der weder Breitenbegrenzung noch eigene Polsterung, sonst
   polstert die Huelle ein zweites Mal. */
.konto-content > .bom { max-width: none; margin: 0; padding: 0; }
/* Fehlt in stueckliste.html, wird aber dort im Markup benutzt. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Breite Tabellen rollen in ihrem eigenen Rahmen. Damit die Rasterspalte
   dabei nicht mitwaechst, braucht sie min-width: 0.
   Das allein genuegt nicht: der Rollbereich der Tabelle schlaegt trotzdem auf
   den Rollbereich der Seite durch, und die ganze Seite laesst sich seitlich
   schieben. Nachgewiesen an der Bestellliste bei 1024px - die Seitenleiste
   wanderte beim Rollen von 16px auf -224px. Weder overflow:hidden noch
   overflow:clip an der Spalte halten das auf, contain: layout schon: es
   trennt den inneren Aufbau vom aeusseren, ohne etwas abzuschneiden. */
.konto-content { min-width: 0; }
.konto-content > .bom { min-width: 0; }
.konto-content .bom-table-wrap { max-width: 100%; }
.konto-table-wrap,
.konto-content .bom-table-wrap,
.konto-content .bom-preview-wrap { contain: layout; }

/* --- Auswahlgruppe (segmented control) ----------------------------------- */
/* Drei sich ausschliessende Ansichten als ein Bedienelement, nicht als drei
   Knoepfe mit Luecken. Gebaut wie die Datenblatt-Gruppe auf der Produktseite:
   ein Rahmen um das Ganze, duenne Trennlinien dazwischen, und die Haelften
   toenen ihre eigene Flaeche. Dieselbe Bauart, dieselbe Hoverregel.

   Der gewaehlte Abschnitt traegt die Auswahlfarbe des Prototyps
   (--c-blue-tint mit blauer Schrift), so wie .pack-pill.selected und .vtile.
   Einen eigenen Rahmen bekommt er nicht - den haelt die Gruppe, sonst sieht
   der gewaehlte Abschnitt aus wie ein vierter, falsch gestylter Knopf.

   Aussenrahmen in --c-border-control wie Suchfeld und Auswahlfeld daneben,
   Trennlinien in --c-border wie in der Datenblatt-Gruppe. */
.konto-segment {
  display: inline-flex;
  align-items: stretch;
  background: var(--c-bg-white);
  border: 1px solid var(--c-border-control);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.konto-segment button {
  /* 38 plus zwei Rahmen der Gruppe ergibt die 40 der Werkzeugleiste. */
  height: 38px;
  padding: 0 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.konto-segment button + button { border-left: 1px solid var(--c-border); }
.konto-segment button:hover { background: var(--c-bg-tint); }
.konto-segment button[aria-pressed="true"] {
  background: var(--c-blue-tint);
  color: var(--c-blue);
  font-weight: 600;
}
.konto-segment button[aria-pressed="true"]:hover { background: var(--c-blue-tint); }
/* Nach innen, damit der Ring nicht ueber den Gruppenrahmen laeuft. */
.konto-segment button:focus-visible { outline: 2px solid var(--c-blue); outline-offset: -2px; }
@media (max-width: 480px) {
  .konto-segment { width: 100%; }
  .konto-segment button { flex: 1; padding: 0 8px; }
}

/* Bloecke untereinander, volle Breite. Fuer Seiten, deren Inhalt in Zeilen
   gelesen wird statt in Spalten verglichen. */
.konto-stapel { display: flex; flex-direction: column; gap: 16px; }

/* Voraussetzung einer Zahlungsart, sichtbar erst wenn sie gewaehlt ist. */
.konto-option-bedarf {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--c-bg-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xs);
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-text);
}
.konto-option-bedarf[hidden] { display: none; }

/* --- Zeile im Bearbeiten-Zustand ----------------------------------------- */
/* Eine Handlung in der Ruhe, mehr erst nach dem Klick. Das Punktemenue, das
   hier stand, war ein zweites Bedienelement fuer dieselbe Zeile und enthielt
   bei der Standardadresse nur einen Eintrag. */
.konto-pos.ist-offen { background: var(--c-bg-tint); border-radius: var(--radius); padding: 16px; }
/* Dieselbe Bauart wie die Felder im Newsletter: eine Spalte auf 620 px,
   halbfettes dunkles Label, 6 px darunter, 48 px hohes Feld. Vorher waren es
   zwei Formularstile im selben Kontobereich - vierspaltig, hellgraues Label,
   40 px - und nebeneinander sahen sie aus wie zwei Programme. */
.konto-felder {
  display: grid;
  gap: 16px;
  max-width: 620px;
  margin-top: 16px;
}
.konto-feld { display: flex; flex-direction: column; gap: 6px; }
.konto-feld-label { font-size: 13px; font-weight: 600; color: var(--c-text); }
/* Nur im Formular. In den Filterleisten bleibt die Auswahl bei 40 px. */
.konto-feld .konto-select { height: 48px; }
.konto-feld input {
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--c-border-control);
  border-radius: var(--radius-xs);
  background: var(--c-bg-white);
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
  transition: border-color 0.15s;
}
.konto-feld textarea {
  min-height: 88px;
  padding: 10px 12px;
  border: 1px solid var(--c-border-control);
  border-radius: var(--radius-xs);
  background: var(--c-bg-white);
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s;
}
.konto-feld input:hover,
.konto-feld textarea:hover { border-color: var(--c-border-strong); }
.konto-feld input:focus-visible,
.konto-feld textarea:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
/* Links, was die Aenderung abschliesst. Rechts, was selten gebraucht wird. */
.konto-zeilenleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
.konto-zeilenleiste-links, .konto-zeilenleiste-rechts { display: flex; gap: 8px; flex-wrap: wrap; }
/* Ein erklaerender Satz in der Leiste schrumpft mit, statt den Knopf in die
   naechste Zeile zu draengen. */
.konto-zeilenleiste .konto-bemerkung { flex: 1 1 280px; }

/* Zusatz am Kartentitel: nennt den Umfang, ohne wie eine zweite Ueberschrift
   auszusehen. */
.konto-card-zusatz { font-size: 13px; font-weight: 400; color: var(--c-text-secondary); margin-left: 8px; }

/* --- Gewaehlte Einstellung in Ruhe --------------------------------------- */
/* Was gilt, steht gross und allein. Die Liste darunter sagt, was sonst
   moeglich waere, ohne dass fuenf Knoepfe so aussehen, als muesste man
   jedes Mal waehlen. */
.konto-gewaehlt { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; }
.konto-gewaehlt-note { margin: 4px 0 0; font-size: 14px; color: var(--c-text-secondary); line-height: 1.5; }
.konto-annahme { display: flex; gap: 12px; padding: 8px 0; font-size: 14px; }
.konto-annahme-haken { width: 16px; flex-shrink: 0; color: var(--c-success); margin-top: 2px; }
.konto-annahme-name { display: block; font-weight: 600; }
.konto-annahme.ist-aktiv .konto-annahme-name { color: var(--c-success); }
.konto-annahme-note { display: block; font-size: 13px; color: var(--c-text-secondary); line-height: 1.45; }

/* --- Rueckfrage vor einer Handlung, die nicht zurueckgeht ---------------- */
/* Stornieren laesst sich nicht widerrufen. Die Rueckfrage steht deshalb an
   der Stelle, an der geklickt wurde, und nicht in einem Dialog, der die
   Sendung verdeckt, um die es geht. */
.konto-frage {
  margin-top: 16px;
  padding: 16px;
  background: #fdecef;
  border: 1px solid var(--c-danger);
  border-radius: var(--radius);
}
.konto-frage-titel { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.konto-frage-text {
  margin: 4px 0 12px;
  max-width: 62ch;
  font-size: 14px;
  color: var(--c-text-secondary);
  line-height: 1.5;
}
.konto-frage-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Auswahlzeile in einem Formular -------------------------------------- */
/* Fuer das Waehlen einzelner Positionen einer Ruecksendung. Die ganze Zeile
   ist das Ziel, nicht nur das 16px grosse Kaestchen. */
.konto-satz { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.konto-satz > legend { padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--c-text-secondary); }
.konto-wahl {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xs);
  background: var(--c-bg-white);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.konto-wahl + .konto-wahl { margin-top: 8px; }
.konto-wahl:hover { border-color: var(--c-border-strong); background: var(--c-bg-tint); }
.konto-wahl:has(input:checked) { border-color: var(--c-blue); background: var(--c-blue-tint); }
.konto-wahl:has(input:focus-visible) { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.konto-wahl input { margin: 2px 0 0; flex-shrink: 0; }
.konto-wahl-body { min-width: 0; }
.konto-wahl-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.konto-wahl-note { display: block; margin-top: 2px; font-size: 13px; color: var(--c-text-secondary); }
.konto-wahl-preis {
  margin-left: auto;
  padding-left: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* Hilfetext und Fehlermeldung eines Formulars. */
.konto-feld-hilfe { margin: 8px 0 0; font-size: 13px; color: var(--c-text-secondary); line-height: 1.45; }
.konto-feld-fehler {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: #fdecef;
  border: 1px solid var(--c-danger);
  border-radius: var(--radius-xs);
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.45;
}