/* femogi TechShop — Farbpalette der Marke: Weiss und Beige als Grund, Anthrazit für Text,
   Orange als Akzent für Kaufen und Links. Viel Weiss, klare Flächen. */
:root {
  /* Markenfarben (Vorgabe Felix 22.09.2026) */
  --anthrazit: #040c1c;            /* Text, oberste Leiste, Fuss, Admin-Seitenleiste */
  --grau: #444444;                 /* zweitrangiger Text */
  --orange: #f37021;               /* Markenfarbe: Kaufen, Hervorhebungen */
  --beige: #f6f1eb;                /* ruhige Flächen */

  /* Rollen — im übrigen CSS nur diese verwenden */
  --primaer: #b34a0d;              /* Links, Überschriften, zweite Knöpfe — Orange dunkler
                                      für Lesbarkeit (5.4:1 auf Weiss, 4.8:1 auf Beige) */
  --primaer-dunkel: #8f3a09;       /* Hover dazu */
  --akzent: var(--orange);         /* helles Marken-Orange auf kleinen Flächen: Zähler, aktiver Menüpunkt, Logo-Wort */
  --akzent-dunkel: #c9530f;
  --akzent-bg: #fdefe4;
  --dunkel: var(--anthrazit);      /* oberste Leiste, Fuss, Admin-Seitenleiste, Hauptknöpfe */
  --dunkel-hover: #1e2836;
  --fehler: #c0392b;               /* Fehler bleiben rot, unabhängig von der Marke */
  --fehler-dunkel: #9f2d22;
  --fehler-bg: #fbeae8;
  --bg: #ffffff;
  --gray-bg: var(--beige);
  --gray-line: #e4dbd0;
  --line-strong: #c9bcab;          /* kräftigere Rahmen (Eingabefelder, Knöpfe) */
  --text: var(--anthrazit);
  --text-muted: var(--grau);       /* 9.7:1 auf Weiss */
  --green: #1a8a3c;
  --mono: ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--primaer); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Admin: «Ansicht als» (nur für Admin-Logins sichtbar) */
.admin-ansicht { background: var(--gray-bg); border-bottom: 1px solid var(--gray-line); font-size: 13px; }
.admin-ansicht-aktiv { background: #fff4e0; border-bottom-color: #f0c36d; }
.admin-ansicht-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding-top: 5px; padding-bottom: 5px; }
.admin-ansicht-wahl { display: flex; align-items: center; gap: 6px; }
.admin-ansicht-wahl button { font: inherit; border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; padding: 1px 10px; cursor: pointer; color: var(--primaer); }
.admin-ansicht-wahl button.on { background: var(--primaer); border-color: var(--primaer); color: #fff; }

/* Topbar */
.topbar { background: var(--dunkel); color: #fff; font-size: 13px; }
.topbar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding-top: 6px; padding-bottom: 6px; }
.topbar-claim { opacity: 0.9; }
.badge-group { background: var(--akzent); color: #fff; border-radius: 3px; padding: 1px 6px; font-weight: 600; }

/* Header */
.header { border-bottom: 1px solid var(--gray-line); background: #fff; }
/* Auf langen Listen bleiben Suche und Warenkorb erreichbar (Desktop). Unter
   900 px gilt die Handy-Ansicht weiter unten; dort scrollt der Kopf mit. */
@media (min-width: 901px) {
  .header { position: sticky; top: 0; z-index: 20; }
}
.header-inner { display: flex; align-items: center; gap: 24px; padding-top: 10px; padding-bottom: 10px; }
.logo { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; display: flex; flex-direction: column; flex-shrink: 0; }
.logo:hover { text-decoration: none; }
.logo-accent { color: var(--akzent-dunkel); display: inline; }
.logo small { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.search { flex: 1; display: flex; max-width: 720px; }
.search input {
  flex: 1; border: 1px solid var(--gray-line); border-right: none; border-radius: 3px 0 0 3px;
  padding: 10px 14px; font-size: 15px; outline: none;
}
.search input:focus { border-color: var(--primaer); }
/* Sichtbarer Tastaturfokus: die Felder setzen outline: none, für die Tastatur
   braucht es aber eine Markierung (UX-Review 2026-09-11). */
:focus-visible { outline: 2px solid var(--primaer); outline-offset: 2px; border-radius: 2px; }
.search button {
  background: var(--primaer); color: #fff; border: none; border-radius: 0 3px 3px 0;
  padding: 0 18px; cursor: pointer; display: flex; align-items: center;
}
.search button:hover { background: var(--primaer-dunkel); }
.topbar a { color: #fff; }
/* Konto und Warenkorb beschriftet statt als blosse Symbole (UX-Review 2026-09-11) */
.hdr-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hdr-action { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 3px; color: var(--text); }
.hdr-action:hover { background: var(--gray-bg); text-decoration: none; }
.hdr-action .ico { position: relative; display: flex; color: var(--primaer); }
.hdr-action .lbl { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.hdr-action .lbl small { font-size: 11.5px; color: var(--text-muted); }
.hdr-action .lbl strong { font-size: 14px; color: var(--primaer); }
.cart-count {
  position: absolute; top: -4px; right: -6px; background: var(--akzent); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 6px;
}

/* Hauptnavigation */
.mainnav { border-bottom: 1px solid var(--gray-line); }
/* Umbrechen statt über den Rand: angemeldet sind es bis zu acht Menüpunkte plus Konto/Abmelden */
.mainnav-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.mainnav-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.mainnav-links a { padding: 12px 2px; font-size: 16px; color: var(--text); border-bottom: 3px solid transparent; }
.mainnav-links a:hover { text-decoration: none; color: var(--primaer); }
.mainnav-links a.mainnav-active { border-bottom-color: var(--akzent); font-weight: 600; }
.mainnav-account { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.mainnav-account a { display: flex; align-items: center; gap: 6px; color: var(--text); }
.inline-form { display: inline; }
.linklike { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 0; }
.linklike:hover { color: var(--akzent); }

.main { padding-top: 24px; padding-bottom: 48px; min-height: 55vh; }

/* Filterleiste */
.filterbar { background: var(--gray-bg); border: 1px solid var(--gray-line); padding: 14px; margin-bottom: 22px; }
.filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.filter-grid select {
  width: 100%; padding: 11px 34px 11px 13px; border: 1px solid var(--gray-line); border-radius: 3px;
  font-size: 14.5px; font-family: inherit; color: var(--text); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e30613' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 13px; text-overflow: ellipsis;
}
.filter-grid select:focus { outline: none; border-color: var(--primaer); }
.filter-more {
  grid-column: 4; display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid var(--gray-line); background: #fff; border-radius: 3px; padding: 11px 13px;
  font-size: 14.5px; cursor: pointer; user-select: none;
}
.filter-more:hover { border-color: var(--primaer); color: var(--primaer); }
.more-toggle:not(:checked) ~ .filter-grid .fx { display: none; }
.more-toggle:not(:checked) ~ .filter-grid .more-close { display: none; }
.more-toggle:checked ~ .filter-grid .more-open { display: none; }
.filter-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.filter-reset { font-size: 14px; color: var(--akzent-dunkel); }
.js .no-js-only { display: none; }
.js .filter-actions-empty { display: none; }

/* Werkzeugzeile über der Produktliste */
.list-tools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.list-tools .tool { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-muted); }
.list-tools .tool select {
  padding: 6px 8px; border: 1px solid var(--gray-line); border-radius: 3px;
  background: #fff; font-size: 14px; font-family: inherit; color: var(--text); cursor: pointer;
}

/* Inhaltsseiten */
.content { max-width: 760px; }
.content h1 { font-size: 26px; color: var(--primaer); margin-bottom: 6px; }
.content h2, .content h2 { margin-top: 30px; }
.content .lead { font-size: 17px; color: var(--text-muted); line-height: 1.6; }
.content ul, .content ol { padding-left: 20px; }
.content li { margin-bottom: 7px; }
.steps { counter-reset: step; list-style: none; padding-left: 0; }
.steps li { position: relative; padding-left: 42px; margin-bottom: 14px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primaer); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.card { border: 1px solid var(--gray-line); border-radius: 3px; padding: 16px 18px; background: #fff; }
.card h3 { margin: 0 0 6px; font-size: 15.5px; color: var(--primaer); }
.card p { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.55; }
.contact-table { max-width: 520px; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

/* Produktliste */
.list-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.list-head h1 { font-size: 22px; margin: 0; }
.list-head .total { color: var(--text-muted); }
.list-note { margin: -8px 0 18px; color: var(--text-muted); font-size: 14px; }

/* Produktliste: Logo links; rechts Artikelnummer/Preis, Bezeichnung, Warenkorb */
.product-row { display: grid; grid-template-columns: 150px 1fr; gap: 28px; margin-bottom: 22px; }
.vendor-logo {
  width: 150px; height: 150px; border: 1px solid var(--gray-line); background: #fff;
  display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center;
  color: var(--text-muted); font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
}
.vendor-logo:hover { text-decoration: none; border-color: var(--line-strong); }
.vendor-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pr-body {
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); padding: 10px 0 12px; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
}
.pr-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 13.5px; color: var(--text-muted); }
.pr-sku { overflow-wrap: anywhere; }
.pr-price { white-space: nowrap; }
.pr-price strong { color: var(--text); font-size: 15px; }
/* overflow-wrap: Feed-Namen enthalten teils lange Codes ohne Trennstelle (z. B. «wCDMR836048XT4CDCNSVC») */
.pr-title { font-size: 21px; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.pr-title:hover { color: var(--primaer); text-decoration: none; }
.product-name { font-size: 15.5px; font-weight: 600; color: var(--primaer); }
.product-meta { color: var(--text-muted); font-size: 13px; margin-top: 3px; }
.chip { font-size: 12px; background: var(--gray-bg); border: 1px solid var(--gray-line); border-radius: 3px; padding: 1px 7px; color: var(--text-muted); }
.chip-group { background: var(--akzent-bg); border-color: #e8c9b3; color: var(--akzent-dunkel); font-weight: 600; }


.buy-form { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.buy-form input[type='number'] { width: 62px; padding: 7px 8px; border: 1px solid var(--gray-line); border-radius: 3px; }
.buy-form .btn { white-space: nowrap; padding: 9px 14px; }

/* Buttons — .btn anthrazit: Formular abschliessen (Speichern, Anlegen, Freigeben); .btn-kauf dunkles Orange: Kaufen/Bezahlen;
   .btn-ghost hell: Nebenaktionen und Abläufe von Hand anstossen (Jetzt abrufen, Import starten, Jetzt erzeugen) */
.btn {
  display: inline-block; background: var(--dunkel); color: #fff; border: 1px solid transparent; border-radius: 3px;
  padding: 9px 16px; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--dunkel-hover); text-decoration: none; }
/* Kaufknöpfe im dunkleren Marken-Orange: weisse Schrift erreicht darauf 5.4:1,
   auf dem hellen #F37021 wären es nur 2.9:1 (Entscheid Felix 23.09.2026). */
.btn-kauf { background: var(--primaer); color: #fff; }
.btn-kauf:hover { background: var(--primaer-dunkel); }
.btn-ghost { background: var(--gray-bg); color: var(--primaer); border-color: var(--line-strong); }
.btn-ghost:hover { background: #efe6da; border-color: var(--primaer); }
.btn[disabled] { background: var(--line-strong); border-color: transparent; color: #fff; cursor: not-allowed; }

/* Pagination */
.pagination { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.pagination .current { font-weight: 700; }

/* Detailseite */
.breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
/* Produktdetail: Logo links; rechts Artikelnummer/Preis, Bezeichnung,
   Beschreibung 2–4, Produktdaten, Warenkorb */
/* Bereiche statt Reihenfolge: Im Markup folgt die Kaufbox dem Kopf (Handy: Preis
   gleich unter der Bezeichnung); am Desktop steht sie rechts über beide Zeilen. */
.detail {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 300px; column-gap: 28px; align-items: start;
  grid-template-areas: "logo head buy" "logo specs buy";
}
.detail > .vendor-logo { grid-area: logo; }
.detail-head { grid-area: head; border-top: 1px solid var(--line-strong); padding-top: 10px; min-width: 0; }
.detail-specs { grid-area: specs; border-bottom: 1px solid var(--line-strong); padding-bottom: 16px; min-width: 0; }
.detail > .buybox { grid-area: buy; }
.detail h1 { margin: 22px 0 10px; font-size: 26px; font-weight: 400; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.detail h2 { margin: 26px 0 8px; font-size: 21px; font-weight: 400; color: var(--text); }
.detail-desc p { margin: 0 0 6px; font-size: 15px; color: var(--text); }
.spec-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.spec-table th, .spec-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--gray-line); font-size: 14px; }
.spec-table th { width: 220px; color: var(--text-muted); font-weight: 500; }

/* Formulare */
.form-card { max-width: 460px; border: 1px solid var(--gray-line); border-radius: 4px; padding: 24px; margin: 24px auto; }
.form-card h1 { margin-top: 0; font-size: 22px; color: var(--primaer); }
/* Karten in «Mein Konto» und 2FA: linksbündig, Zwischentitel kleiner. */
.form-card-left { margin-left: 0; }
.form-card-left h2 { margin-top: 0; font-size: 18px; }
.form-card-flat { margin: 0; }
.form-card-schmal { max-width: 560px; }
.table-schmal { max-width: 760px; }
/* Einmal angezeigter Link zum Kopieren (Passwort-Link ohne Mailversand) */
.link-feld { width: 100%; font-family: var(--mono); padding: 8px; margin: 6px 0 10px; }
/* Kleine Formulare in Panels (Erstattung, Ausnahme) */
.stack-sm { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.input-sm { padding: 5px 8px; font-size: 13.5px; border: 1px solid var(--gray-line); border-radius: 3px; }
.setting-inline { display: inline-flex; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13.5px; color: var(--text-muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--gray-line); border-radius: 3px; font-size: 15px; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primaer); }
.form-hint { font-size: 13px; color: var(--text-muted); }
.setting { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
/* Checkboxen und Radios in .field nicht auf volle Breite ziehen; ihre Beschriftung
   (.setting) steht neben dem Kästchen statt als Feldbeschriftung darüber. */
.field input[type='checkbox'], .field input[type='radio'] { width: auto; padding: 0; }
.field label.setting { display: flex; font-size: 15px; color: var(--text); margin: 4px 0; }
.date-row { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.date-row input[type='date'] { max-width: 220px; }
.fieldset-plain { border: 0; padding: 0; margin: 0 0 14px; }
.fieldset-plain legend { font-size: 13.5px; color: var(--text-muted); margin-bottom: 4px; padding: 0; }

/* Kunden & Exportprofile (Admin) */
.export-card { border: 1px solid var(--gray-line); border-radius: 4px; padding: 14px 18px; margin-bottom: 16px; background: #fff; }
.export-card-paused { background: var(--gray-bg); }
.export-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.export-title { font-size: 17px; font-weight: 600; color: var(--primaer); }
.export-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.kv dt { color: var(--text-muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.describe { font-style: italic; color: var(--text-muted); margin: 10px 0 0; }
.warn { color: var(--fehler-dunkel); } .ok { color: var(--green); }
/* Mehrfachauswahl im Umfang: ein Dropdown je Wert, + weiterer Wert, × entfernen */
.multi-rows { display: grid; gap: 6px; max-width: 520px; }
.multi-row { display: flex; gap: 6px; align-items: center; }
.field .multi-row select { flex: 1 1 auto; width: auto; min-width: 0; }
.multi-remove {
  flex: none; width: 36px; height: 38px; border: 1px solid var(--gray-line); border-radius: 3px; background: #fff;
  color: var(--akzent-dunkel); font-size: 20px; line-height: 1; cursor: pointer;
}
.multi-remove:hover { border-color: var(--akzent-dunkel); }
.multi-add { margin-top: 8px; }
.multi-add:disabled { opacity: .45; cursor: not-allowed; }

/* Spalten sortieren: Griff zum Ziehen, ▲ ▼ als Alternative */
.columns-table .col-grip { width: 28px; padding-right: 0; }
.columns-table .grip { cursor: grab; color: #9aa9b8; font-size: 18px; line-height: 1; user-select: none; display: inline-block; padding: 4px 2px; }
.columns-table .grip:hover { color: var(--primaer); }
.columns-table .col-move { white-space: nowrap; width: 1%; }
.columns-table .pos-badge {
  display: inline-block; min-width: 26px; text-align: center; border-radius: 999px; padding: 1px 7px;
  background: var(--primaer); color: #fff; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.columns-table tr.is-off .pos-badge { background: none; color: var(--text-muted); font-weight: 400; }
.columns-table tr.is-off td:nth-child(3) { color: var(--text-muted); }
.move-btn {
  width: 30px; height: 30px; border: 1px solid var(--gray-line); border-radius: 3px; background: #fff;
  color: var(--primaer); font-size: 11px; cursor: pointer; margin-left: 3px;
}
.move-btn:hover:not(:disabled) { border-color: var(--primaer); }
.move-btn:disabled { opacity: .35; cursor: default; }
.columns-table tr.dragging { opacity: .55; background: #fdf9f4; }
.columns-table tr.dragging .grip { cursor: grabbing; }
@keyframes row-moved { from { background: #fff4c7; } to { background: transparent; } }
.columns-table tr.moved td { animation: row-moved .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .columns-table tr.moved td { animation: none; } }
.scope-dim label:first-child { font-weight: 500; }
.columns-table input[type='text'] { width: 100%; padding: 5px 8px; border: 1px solid var(--gray-line); border-radius: 3px; }
.options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 24px; margin-top: 10px; }
.options-grid select { margin-left: 6px; padding: 4px 6px; }
.export-form .field input[type='text'] { max-width: 520px; }
.inline-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.inline-row select { padding: 7px 8px; border: 1px solid var(--gray-line); border-radius: 3px; font-size: 14px; }
.plain-list { padding-left: 18px; } .plain-list li { margin-bottom: 4px; }
.preview { border-left: 3px solid var(--primaer); padding-left: 14px; }
.demo-dl { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.preview-table td, .preview-table th { white-space: nowrap; font-size: 13px; }
.bytes { font-size: 12px; background: var(--gray-bg); padding: 10px; overflow-x: auto; white-space: pre; }

.msg { padding: 10px 14px; border-radius: 3px; margin-bottom: 16px; font-size: 14.5px; }
.msg-ok { background: #e9f3ec; border: 1px solid #bfe0c9; color: var(--green); }
.msg-error { background: var(--fehler-bg); border: 1px solid #f0c2bb; color: var(--fehler-dunkel); }
.msg-info { background: var(--gray-bg); border: 1px solid var(--gray-line); color: var(--primaer-dunkel); }

/* Tabellen (Warenkorb, Admin, Bestellungen) */
.table { width: 100%; border-collapse: collapse; background: #fff; }
.table th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); border-bottom: 2px solid var(--gray-line); padding: 8px 10px; }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--gray-line); font-size: 14.5px; vertical-align: middle; }
.table .num { text-align: right; white-space: nowrap; }
.cart-total td { font-size: 16px; font-weight: 700; border-top: 2px solid var(--primaer); }


.section { margin-bottom: 36px; }
.section h2 { font-size: 19px; color: var(--primaer); border-bottom: 2px solid var(--gray-line); padding-bottom: 6px; }

/* =====================================================================
   Kundenbereich: Warenkorb, Bestellungen, Konto (UX-Review 2026-09-11)
   ===================================================================== */
.list-head .count { color: var(--text-muted); font-size: 15px; font-weight: 400; }

/* Warenkorb: Positionen links, Zusammenfassung rechts */
.cart2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.cline {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
  margin: 0; padding: 14px 0; border-bottom: 1px solid var(--gray-line);
}
.cline .vendor-logo { width: 96px; height: 96px; padding: 8px; font-size: 12px; }
.cl-info { min-width: 0; }
.cl-remove { font-size: 13.5px; margin-top: 6px; }
.cl-total { text-align: right; white-space: nowrap; font-weight: 700; font-size: 16px; }
.cl-total small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--text-muted); }

.cl-qty { display: flex; align-items: center; gap: 6px; }
.cl-qty input[type='number'] {
  width: 68px; padding: 7px 8px; border: 1px solid var(--gray-line); border-radius: 3px;
  font-size: 15px; font-family: inherit; text-align: center;
}
.qty-btn {
  width: 34px; height: 36px; border: 1px solid var(--gray-line); background: #fff; border-radius: 3px;
  font-size: 18px; line-height: 1; color: var(--primaer); cursor: pointer;
}
.qty-btn:hover:not([disabled]) { border-color: var(--primaer); background: var(--gray-bg); }
.qty-btn[disabled] { color: #b9c2cc; cursor: not-allowed; }
/* «Übernehmen» steht im Dokument zuerst und ist damit der Standardknopf für
   Enter im Mengenfeld; angezeigt wird er zuletzt (und mit JS gar nicht). */
.qty-ok { order: 9; }

/* Schnellerfassung: Artikelnummern mit Menge einfügen */
.quick { margin-top: 22px; padding: 14px 16px; background: var(--gray-bg); border: 1px solid var(--gray-line); }
.quick h3 { margin: 0 0 4px; font-size: 16px; color: var(--primaer); }
.quick p { margin: 0 0 10px; }
.quick-row { display: flex; gap: 10px; align-items: flex-start; }
.quick-row textarea {
  flex: 1; padding: 9px 10px; border: 1px solid var(--gray-line); border-radius: 3px;
  font-family: inherit; font-size: 14.5px; resize: vertical;
}
.quick-row .btn { white-space: nowrap; }

/* Zusammenfassung mit MwSt., Bestellreferenz und Bestellknopf */
.summary { position: sticky; top: 12px; padding: 18px; background: #fff; border: 1px solid var(--gray-line); }
.summary h2 { margin: 0 0 12px; font-size: 18px; color: var(--primaer); }
.sumrow { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15px; }
/* Der Betrag bleibt auf einer Zeile; umbrechen darf die Beschriftung. */
.sumrow span:last-child { white-space: nowrap; text-align: right; }
.sumrow.total { margin-top: 6px; padding-top: 9px; border-top: 2px solid var(--primaer); font-size: 17px; font-weight: 700; }
.summary form { margin-top: 14px; }
.btn-block { display: block; width: 100%; }

/* Meine Bestellungen: eine Karte je Bestellung, Positionen aufklappbar */
.olist { display: grid; gap: 12px; }
.ocard { background: #fff; border: 1px solid var(--gray-line); }
.ocard > summary {
  display: grid; grid-template-columns: 1.1fr 1.2fr 1.3fr auto auto; gap: 16px; align-items: center;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
.ocard > summary::-webkit-details-marker { display: none; }
.ocard[open] > summary { background: var(--gray-bg); border-bottom: 1px solid var(--gray-line); }
.oc-no strong { font-size: 15.5px; color: var(--primaer); }
.oc-meta { font-size: 13px; color: var(--text-muted); }
.oc-sum { text-align: right; white-space: nowrap; font-weight: 700; }
.oc-sum small { display: block; font-weight: 400; font-size: 12.5px; color: var(--text-muted); }
.oc-more { color: var(--primaer); font-size: 14px; white-space: nowrap; }
.oc-more::after { content: " \25BE"; }
.ocard[open] .oc-more::after { content: " \25B4"; }
.ocard-body { padding: 0 16px 16px; }
.ocard-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }

/* Fortschritt Eingegangen → In Bearbeitung → Erledigt */
.steps3 { display: flex; align-items: center; margin-top: 7px; }
.steps3 .d { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-line); }
.steps3 .d.on { background: var(--primaer); }
.steps3 .l { width: 26px; height: 2px; background: var(--gray-line); }
.steps3 .l.on { background: var(--primaer); }

/* Mein Konto: Kacheln mit dem letzten Stand */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 18px; }
.tile { display: block; padding: 16px 18px; background: #fff; border: 1px solid var(--gray-line); color: var(--text); }
a.tile:hover { border-color: var(--primaer); text-decoration: none; }
.tile h3 { margin: 0 0 6px; font-size: 16.5px; color: var(--primaer); }
.tile p { margin: 0; font-size: 14px; color: var(--text-muted); }
.tile-last { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--gray-line); font-size: 14px; }
.tile-off { background: var(--gray-bg); }
.tile-tag {
  margin-left: 8px; padding: 1px 6px; border: 1px solid var(--gray-line); border-radius: 3px;
  background: var(--gray-bg); color: var(--text-muted); font-size: 11.5px; font-weight: 600; vertical-align: middle;
}

/* =====================================================================
   Öffentlicher Bereich: Liste, Detailseite, leere Suche (UX-Review 2026-09-11)
   ===================================================================== */

/* Listenzeile: Beschreibung einzeilig, Merkmale als Etiketten, Bestand unten */
.pr-desc {
  margin: 4px 0 0; color: var(--text-muted); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag {
  font-size: 12px; background: var(--gray-bg); border: 1px solid var(--gray-line);
  border-radius: 3px; padding: 2px 8px; color: var(--text-muted); white-space: nowrap;
}
.pr-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Lieferbarkeit in Worten mit Farbpunkt */
.stock { font-size: 13.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; }
.stock::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.stock-ok { color: var(--green); }
.stock-order { color: #9a6b00; }
.stock-no { color: var(--text-muted); }

/* Gesetzte Filter als entfernbare Chips */
.chips-active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.chip-x {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px;
  background: #fff; border: 1px solid var(--primaer); border-radius: 999px; padding: 4px 12px; color: var(--primaer);
}
.chip-x:hover { background: var(--gray-bg); text-decoration: none; }
.chip-x span { font-size: 15px; line-height: 1; color: var(--akzent-dunkel); }
.chip-plain { border-color: var(--gray-line); color: var(--text); }
.chip-clear { font-size: 13.5px; color: var(--akzent-dunkel); }

/* Suche ohne Treffer */
.nohits { border: 1px solid var(--gray-line); background: #fff; padding: 20px 22px; }
.nohits h2 { margin: 0 0 10px; font-size: 20px; color: var(--primaer); }
.nohits h3 { margin: 0 0 8px; font-size: 15px; color: var(--primaer); }
.nh-mean { font-size: 17px; margin: 0 0 18px; }
.nh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.nh-grid ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.nh-grid li { margin-bottom: 5px; }
.nh-quote { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--gray-line); font-size: 14.5px; }
.js .list-tools-empty .tool { display: none; }

/* Produktdetail: Logo, Angaben, Kaufbox */
.buybox { position: sticky; top: 92px; border: 1px solid var(--gray-line); background: #fff; padding: 18px; }
.bb-price { font-size: 15px; color: var(--text-muted); }
.bb-price strong { font-size: 24px; color: var(--text); }
.bb-vat { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }
.bb-stock { margin: 12px 0 4px; }
.bb-min { font-size: 13.5px; color: var(--text-muted); margin-bottom: 10px; }
.buybox .btn-block { margin-top: 8px; text-align: center; }
.bb-note { font-size: 12.5px; color: var(--text-muted); margin: 14px 0 0; }
.buy-form-block { justify-content: stretch; margin-top: 12px; }
.buy-form-block .btn { flex: 1; }

/* Projektanfrage von der Produktseite */
.anfrage-box { border-left: 3px solid var(--primaer); background: var(--gray-bg); padding: 14px 18px; margin-bottom: 26px; }
.anfrage-box h2 { margin: 0 0 8px; font-size: 18px; color: var(--primaer); border: 0; padding: 0; }
.anfrage-box p { margin: 0 0 12px; }

/* Footer */
.footer { background: var(--dunkel); color: #fff; margin-top: 40px; }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; font-size: 13.5px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
.footer a { color: #fff; }

@media (max-width: 900px) {
  .detail { grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; grid-template-areas: "logo head" "buy buy" "specs specs"; }
  .detail h1 { font-size: 21px; margin-top: 14px; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
  .filter-more { grid-column: 2; }
  .card-grid { grid-template-columns: 1fr; }
  .list-head { flex-direction: column; align-items: flex-start; }
  .vendor-logo { width: 72px; height: 72px; padding: 6px; font-size: 11px; }
  .buy-form { justify-content: flex-start; }
  .topbar-claim { display: none; }
  .buybox { position: static; margin: 14px 0 4px; }
  .hdr-action .lbl { display: none; }
  /* Produktdaten: schmalere Beschriftungsspalte, lange Werte dürfen umbrechen */
  .spec-table th { width: 42%; }
  .spec-table td { overflow-wrap: anywhere; }
  /* Warenkorb einspaltig: Menge und Total rücken unter die Artikelangaben */
  .cart2 { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .cline { grid-template-columns: 72px minmax(0, 1fr); row-gap: 10px; }
  .cline .vendor-logo { width: 72px; height: 72px; padding: 6px; }
  .cl-qty, .cl-total { grid-column: 2; }
  .cl-total { text-align: left; }
  .quick-row { flex-direction: column; }
  .ocard > summary { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .oc-sum { text-align: left; }
}

/* Smartphones: Suchfeld in eigener Zeile unter Logo und Warenkorb */
@media (max-width: 600px) {
  .header-inner { flex-wrap: wrap; gap: 12px 16px; }
  /* Logo darf schrumpfen (Unterzeile bricht um), sonst rutscht der Warenkorb bei 320 px in eine eigene Zeile */
  .logo { flex: 1 1 0; min-width: 0; }
  .search input { min-width: 0; }
  .mainnav-links { column-gap: 20px; }
  .mainnav-links a { padding: 10px 0 7px; font-size: 15px; }
  .mainnav-account { padding-bottom: 8px; }
  /* Sehr schmale Geräte: «In den Warenkorb» darf unter das Mengenfeld rutschen */
  .buy-form { flex-wrap: wrap; }
}

/* =====================================================================
   Handy-Ansicht des Shops (UX-Review 2026-09-11)
   Auf dem Desktop sind die Schalter und das Blatt unsichtbar.
   ===================================================================== */
.nav-toggle, .sheet-toggle, .more-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger, .nav-mobile, .m-filter, .sheet-head, .sheet-chips, .sheet-foot { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Trefferzahl neben der Überschrift, Werkzeuge rechts aussen */
.list-head .list-tools { margin-left: auto; }

@media (max-width: 900px) {
  /* Kopf in einer Zeile: ☰, Logo, Konto, Warenkorb — die Suche darunter */
  .topbar { display: none; }
  .header-inner { flex-wrap: wrap; gap: 8px 10px; padding-top: 10px; padding-bottom: 10px; }
  .nav-burger { display: flex; align-items: center; padding: 6px; color: var(--primaer); cursor: pointer; }
  .logo { flex-direction: row; align-items: baseline; font-size: 21px; gap: 6px; }
  .logo small { display: none; }
  .hdr-actions { gap: 0; }
  .hdr-action { padding: 6px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }

  /* Menüzeile erst nach ☰ */
  .mainnav-inner { flex-direction: column; align-items: stretch; }
  .mainnav-links { display: none; flex-direction: column; gap: 0; }
  .mainnav-links a { padding: 11px 0; border-bottom: 1px solid var(--gray-line); border-left: 3px solid transparent; padding-left: 0; }
  .mainnav-links a.mainnav-active { border-bottom-color: var(--gray-line); border-left-color: var(--akzent); padding-left: 10px; }
  .nav-mobile { display: block; }
  .mainnav-account { display: none; padding: 10px 0; }
  #nav-toggle:checked ~ .mainnav .mainnav-links,
  #nav-toggle:checked ~ .mainnav .mainnav-account { display: flex; }

  /* Filter und Sortieren als zwei Knöpfe, die oben angeheftet bleiben */
  .shop-head { flex-direction: column; align-items: stretch; gap: 6px; }
  .shop-head h1 { order: 2; font-size: 17px; }
  .shop-head .total { order: 3; font-size: 13.5px; }
  .chips-active { margin-bottom: 10px; }
  .shop-head .list-tools {
    order: 1; position: sticky; top: 0; z-index: 15; margin: 0 -16px 8px; padding: 8px 16px; gap: 10px;
    background: #fff; border-bottom: 1px solid var(--gray-line);
  }
  .shop-head .tool-per { display: none; }
  /* Ohne Treffer gibt es nichts zu filtern und nichts zu sortieren. */
  .shop-head .list-tools-empty { display: none; }
  .m-filter, .shop-head .tool-sort {
    display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 10px; border: 1px solid var(--gray-line); border-radius: 3px;
    background: #fff; color: var(--primaer); font-size: 0; cursor: pointer;
  }
  .m-filter { font-size: 14.5px; }
  .shop-head .tool-sort select { font-size: 14.5px; border: 0; padding: 0; color: var(--primaer); }

  /* Filterleiste als Blatt über der Seite */
  .filterbar { display: none; }
  #filter-sheet:checked ~ .filterbar {
    display: block; position: fixed; inset: 0; z-index: 40; overflow-y: auto;
    margin: 0; padding: 0 0 12px; background: #fff; border: 0;
  }
  #filter-sheet:checked ~ .filterbar .sheet-head {
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0;
    padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--gray-line); font-size: 17px;
  }
  .sheet-close { font-size: 22px; color: var(--text-muted); cursor: pointer; padding: 0 6px; }
  #filter-sheet:checked ~ .filterbar .sheet-chips { display: block; padding: 12px 16px 0; }
  #filter-sheet:checked ~ .filterbar .sheet-chips:empty { display: none; }
  #filter-sheet:checked ~ .filterbar .filter-grid { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
  #filter-sheet:checked ~ .filterbar .filter-grid .fx { display: block; }
  #filter-sheet:checked ~ .filterbar .filter-more,
  #filter-sheet:checked ~ .filterbar .filter-actions { display: none; }
  #filter-sheet:checked ~ .filterbar .sheet-foot {
    display: flex; align-items: center; gap: 14px; position: sticky; bottom: 0;
    padding: 12px 16px; background: #fff; border-top: 1px solid var(--gray-line);
  }
  .sheet-foot .btn-block { flex: 1; width: auto; }

  /* Kompakte Zeilen: kleines Logo, kein Mengenfeld — die Menge ändert man im Warenkorb */
  .product-row { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
  .product-row .vendor-logo { width: 56px; height: 56px; padding: 5px; font-size: 9.5px; overflow-wrap: break-word; }
  /* Auf dem Handy steht in dieser Zeile nur die Nummer — die Beschriftung
     würde die Nummer selbst abschneiden. */
  .product-row .sku-vendor, .product-row .sku-label { display: none; }
  .pr-body { padding: 6px 0 10px; gap: 8px; }
  /* Artikelnummer und Preis wieder auf einer Zeile — spart je Zeile eine Höhe;
     lange Nummern werden gekürzt, vollständig stehen sie auf der Detailseite. */
  .pr-top { flex-direction: row; justify-content: space-between; gap: 10px; }
  .pr-sku { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pr-title { font-size: 16px; }
  .pr-desc { display: none; }
  .pr-foot { gap: 10px; flex-wrap: nowrap; }
  .buy-form input[type='number'] { display: none; }
  .buy-form .btn { padding: 8px 12px; font-size: 13.5px; }
}

/* =====================================================================
   Admin-Arbeitsplatz: Seitennavigation, Übersicht, Listen (UX-Review 2026-09-11)
   ===================================================================== */
.adm { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; background: #f7f6f2; }
.adm :focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.adm-side {
  background: var(--dunkel); color: #d7d2cb; padding: 16px 12px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* .adm-side .adm-brand statt .adm-brand: sonst gewinnt die Link-Regel .adm-side a (flex, Abstand) */
.adm-side .adm-brand { display: block; color: #fff; font-weight: 700; font-size: 19px; padding: 4px 10px 14px; line-height: 1.15; }
.adm-side .adm-brand:hover { background: none; text-decoration: none; }
.adm-brand span { color: var(--akzent); }
.adm-brand small { display: block; font-weight: 400; font-size: 12px; color: #a49c92; }
.adm-grp { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8d867c; padding: 14px 10px 4px; }
.adm-side a, .adm-side button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  color: #d7d2cb; padding: 8px 10px; border-radius: 4px; font: inherit; font-size: 14.5px;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.adm-side a:hover, .adm-side button:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.adm-side a.on { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; }
.adm-badge { background: var(--akzent); color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 18px; padding: 0 7px; }
.adm-badge-soft { background: rgba(255, 255, 255, .2); }
.adm-foot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 10px; }
.adm-foot form { margin: 0; }
.adm-content { min-width: 0; display: flex; flex-direction: column; }
.adm-top { display: flex; align-items: center; gap: 14px; padding: 10px 26px; background: #fff; border-bottom: 1px solid var(--gray-line); }
.adm-find {
  flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 1px solid var(--gray-line); border-radius: 4px; color: var(--text-muted); background: #fff;
}
.adm-find:focus-within { border-color: var(--primaer); }
.adm-find input { flex: 1; min-width: 0; border: 0; padding: 9px 0; font: inherit; font-size: 14.5px; background: transparent; outline: none; }
.adm-find kbd { font: 11px var(--mono); border: 1px solid var(--gray-line); border-radius: 3px; padding: 1px 5px; }
.adm-me { margin-left: auto; font-size: 13.5px; color: var(--text-muted); }
.adm-main { padding: 20px 26px 48px; }
.adm-main h1 { margin: 0 0 4px; font-size: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; overflow-wrap: anywhere; }
.adm-main h1 .pill, .adm-main h1 .role { font-size: 13px; }
.adm-sub { color: var(--text-muted); margin: 0 0 18px; font-size: 14px; }
.adm .form-card { background: #fff; }
.adm code { font-size: 13px; background: var(--gray-bg); padding: 1px 5px; border-radius: 3px; }

.pill { display: inline-block; font-size: 12.5px; border-radius: 999px; padding: 2px 10px; font-weight: 600; white-space: nowrap; }
.pill-new { background: var(--gray-bg); color: var(--primaer-dunkel); }
.pill-run { background: #fff4e0; color: #8a5f00; }
.pill-done { background: #e9f3ec; color: var(--green); }
.pill-err { background: var(--fehler-bg); color: var(--fehler-dunkel); }
.pill-muted { background: var(--gray-bg); color: var(--text-muted); }
.role { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 3px; padding: 1px 7px; margin-right: 4px; }
.role-STD { background: var(--gray-bg); color: var(--text-muted); }
.role-EDU { background: var(--gray-bg); color: var(--primaer-dunkel); }
.role-GOV { background: #eee9fb; color: #5a3fa0; }
.role-ADM { background: var(--akzent-bg); color: var(--akzent-dunkel); }
.btn-sm { padding: 6px 11px; font-size: 13.5px; }

.panel { background: #fff; border: 1px solid var(--gray-line); border-radius: 6px; margin-bottom: 18px; min-width: 0; }
.panel > h2 {
  margin: 0; font-size: 15.5px; padding: 12px 16px; border-bottom: 1px solid var(--gray-line);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--text);
}
.panel > h2 a { font-size: 13.5px; font-weight: 400; }
.panel .table th, .panel .table td { padding-left: 16px; }
.panel .table tr:last-child td { border-bottom: 0; }
.panel-pad { padding: 14px 16px; margin: 0; }
.panel-empty { padding: 14px 16px; margin: 0; color: var(--text-muted); font-size: 14px; }
.panel-foot { padding: 10px 16px; border-top: 1px solid var(--gray-line); margin: 0; }
.table-wrap { overflow-x: auto; }
.cell-wrap { overflow-wrap: anywhere; max-width: 420px; }
.cell-clip { max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-muted td { color: var(--text-muted); }
.qg-report { font-size: 12px; white-space: pre-wrap; max-width: 520px; }
.two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.stack { display: grid; gap: 0; min-width: 0; }

.todo-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--gray-line); font-size: 14.5px; }
.todo-item:last-child { border-bottom: 0; }
.todo-item .go { margin-left: auto; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.sev { width: 4px; align-self: stretch; border-radius: 2px; flex: none; min-height: 20px; }
.sev-err { background: var(--fehler); }
.sev-warn { background: #e0a100; }
.sev-info { background: var(--primaer); }
.sev-muted { background: #9aa9b8; }
.sev-ok { background: var(--green); }
.todo-none { color: var(--text-muted); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid var(--gray-line); border-radius: 6px; padding: 13px 15px; min-width: 0; }
.kpi .k { font-size: 12.5px; color: var(--text-muted); }
.kpi .v { font-size: 24px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .v-sm { font-size: 15px; margin-top: 6px; }
.kpi .s { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.feedbar { display: flex; gap: 3px; margin-top: 8px; }
.feedbar i { flex: 1; height: 16px; border-radius: 2px; background: #e2ded3; }
.feedbar .fb-neu { background: var(--green); }
.feedbar .fb-unveraendert { background: #c9dccf; }
.feedbar .fb-fehler, .feedbar .fb-abgebrochen { background: #e57f86; }
.feedbar .fb-laeuft { background: #e0a100; }
.feedbar .fb-uebersprungen { background: #f5f3ee; outline: 1px dashed var(--line-strong); outline-offset: -1px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--gray-line); padding: 0 10px; overflow-x: auto; }
.tabs a { padding: 10px 12px; font-size: 14px; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.tabs a:hover { color: var(--primaer); text-decoration: none; }
.tabs a.on { color: var(--primaer); border-bottom-color: var(--primaer); font-weight: 600; }
.tabs a.attn { color: var(--primaer); font-weight: 600; }
.tabs .c { background: var(--gray-bg); border-radius: 999px; padding: 0 7px; font-size: 12px; margin-left: 6px; font-weight: 400; }
.tabs a.attn .c { background: var(--primaer); color: #fff; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--gray-line); }
.toolbar .find { flex: 1 1 240px; max-width: 380px; border: 1px solid var(--gray-line); border-radius: 4px; padding: 7px 10px; font: inherit; font-size: 14px; }
.toolbar select { padding: 7px 8px; border: 1px solid var(--gray-line); border-radius: 4px; font: inherit; font-size: 14px; background: #fff; }

.request {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fdf9f4; border: 1px solid var(--gray-line); border-left: 4px solid var(--primaer); border-radius: 6px;
  padding: 14px 16px; margin-bottom: 18px;
}
.request p { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); max-width: 70ch; }
.timeline { list-style: none; margin: 0; padding: 4px 16px 14px; font-size: 14px; }
.timeline li { padding: 5px 0 5px 16px; border-left: 2px solid var(--gray-line); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--primaer); }
.timeline .t { color: var(--text-muted); margin-right: 6px; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm-side { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 6px 8px; gap: 2px; }
  .adm-grp, .adm-brand small { display: none; }
  .adm-brand { padding: 6px 10px; font-size: 16px; }

  .adm-side a, .adm-side button { width: auto; white-space: nowrap; padding: 7px 9px; }
  .adm-foot { margin: 0; border: 0; padding: 0; display: flex; }
  .adm-top { padding: 8px 14px; }
  .adm-me { display: none; }
  .adm-main { padding: 16px 14px 40px; }
}

/* Zwei-Faktor-Anmeldung (/konto/2fa) */
.mfa-steps { padding-left: 20px; }
.mfa-steps li { margin-bottom: 18px; }
.mfa-qr { margin: 10px 0; }
.mfa-qr svg { width: 200px; height: 200px; display: block; }
.mfa-secret { display: inline-block; margin-top: 6px; padding: 6px 8px; border-radius: 3px; background: var(--gray-bg);
  font-family: var(--mono); font-size: 15px; letter-spacing: .5px; }  /* umbricht zwischen den Vierergruppen */
.mfa-codes { padding: 12px 16px; border-radius: 3px; background: var(--gray-bg); font-family: var(--mono);
  font-size: 16px; line-height: 1.8; columns: 2; }

/* Zahlungsabgleich: Befunde des letzten Laufs (admin-zahlungen.tsx) */
.befunde { margin: 10px 0 0; padding-left: 18px; }
.befunde li { margin: 4px 0; }

/* Bestätigung nach «In den Warenkorb» (app.js) — unten mittig, Seite bleibt bedienbar */
.cart-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  background: var(--primaer); color: #fff; padding: 12px 12px 12px 18px; border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22); font-size: 14.5px;
}
.cart-toast[hidden] { display: none; }
.cart-toast a { color: #fff; font-weight: 700; white-space: nowrap; text-decoration: underline; }
.cart-toast-error { background: var(--fehler-dunkel); }
.cart-toast-close { background: none; border: 0; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
@media (max-width: 600px) {
  .cart-toast { left: 16px; right: 16px; transform: none; bottom: 16px; flex-wrap: wrap; }
}