/*!
 * Verlag-OS — Admin Stylesheet
 * v0.8.0 — Verlag-OS Admin Shell
 *
 * Designziele:
 *   1. Sprache: das Backend redet wie ein Verlagswerkzeug, nicht wie eine
 *      Konsole. Operator-Werkzeuge sitzen in einer abgesetzten "Werkstatt".
 *   2. Verlag-OS-Tauglichkeit: das Shell-Markup und alle Komponenten sind
 *      verlagsneutral. Brand-Strings kommen aus BrandingService /
 *      Settings — keine "Verlag-OS"-Hardcoderei in den Tokens.
 *   3. Visuelle Ruhe: weiß, viel Raum, dünne Linien, keine Schatten außer
 *      Focus-Rings. Akzente nur an primären Aktionen.
 *   4. Backward-Compat: alle Klassen-Varianten aus v0.4-v0.7 (badge-live,
 *      btn-primary, kachel, panel, ...) bleiben funktional — sonst wären
 *      37 Views auf einen Schlag betroffen.
 *
 * Brand-Tokens (--vos-...) stehen auf Standardwerte. BrandingService kann
 * sie zur Laufzeit überschreiben (cssVariablesInline im Head).
 */

/* ══════════════════════════════════════════════════════════════════
 * 1. TOKEN-SYSTEM
 * ══════════════════════════════════════════════════════════════════ */
:root {
  /* --- Brand (Verlag-OS) ---
     Leitfarbe ist die Produktfarbe aus dem OS-Suite-Farbfächer: #6A3D9A.
     Alle Produkte der Familie unterscheiden sich über Farbe und Logo, sonst
     ist der Aufbau gleich — wer von einem Produkt ins andere wechselt, soll
     sich sofort zurechtfinden.

     Die abgeleiteten Töne sind GERECHNET, nicht geraten: dunkel = 28 % gegen
     Schwarz, hell = 38 % gegen Weiß, soft/line als Alpha derselben RGB-Werte.
     Wer die Leitfarbe ändert, muss die vier Ableitungen mitziehen — der
     Farbtest in tools/farbtest.php rechnet sie nach und meldet Abweichungen.

     Kontrast geprüft: Weiß auf #6A3D9A ergibt 7,64:1, die Farbe auf Papier
     7,15:1 — beides über der WCAG-AA-Schwelle von 4,5:1 für Fließtext.

     Papier, Bordeaux und Gold bleiben: sie tragen die Verlagsanmutung des
     Backends und stehen der Marke nicht im Weg.

     NICHT betroffen sind die Farben der Kunden-Website — die kommen aus
     BrandingService/#__settings und gehören dem Verlag, der die Software
     betreibt. --- */
  --vos-papier:        #fbf7ef;
  --vos-papier-tief:   #f3ece0;
  --vos-papier-warm:   #f8f4ea;
  --vos-tinte:         #6A3D9A;
  --vos-tinte-dunkel:  #4c2c6f;
  --vos-tinte-hell:    #a387c0;
  --vos-tinte-soft:    rgba(106, 61, 154, 0.08);
  --vos-tinte-line:    rgba(106, 61, 154, 0.18);
  --vos-bordeaux:      #7a2c1e;
  --vos-bordeaux-tief: #5a1f15;
  --vos-bordeaux-hell: #a8503a;
  --vos-bordeaux-soft: rgba(122, 44, 30, 0.10);
  --vos-gold:          #b8954a;
  --vos-gold-hell:     #d8b876;

  /* --- Surfaces (unabhängig von Brand) --- */
  --vos-surface:        #ffffff;
  --vos-surface-2:      #fafaf7;
  --vos-surface-sub:    #f5f3ed;
  --vos-bg:             #fbf9f4;

  /* --- Text --- */
  --vos-text:           #1a1814;
  --vos-text-soft:      #4a463f;
  --vos-text-mute:      #807a70;
  --vos-text-faint:     #a8a298;

  /* --- Linien --- */
  --vos-line:           rgba(20, 16, 12, 0.10);
  --vos-line-soft:      rgba(20, 16, 12, 0.06);
  --vos-line-strong:    rgba(20, 16, 12, 0.16);

  /* --- Status --- */
  --vos-success:        #2d7a3a;
  --vos-success-soft:   #e6f1e3;
  --vos-success-line:   #b5cfa8;
  --vos-warn:           #a86a00;
  --vos-warn-soft:      #fbeed1;
  --vos-warn-line:      #e0c285;
  --vos-danger:         #b5392c;
  --vos-danger-soft:    #f7e0dc;
  --vos-danger-line:    #d99a8f;
  --vos-info:           var(--vos-tinte);
  --vos-info-soft:      #f0ecf5;
  --vos-info-line:      #c6b5d9;

  /* --- Schriften --- */
  --vos-serif:  'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --vos-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --vos-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ════════════════════════════════════════════════════════════════
     TYPOGRAFIE-REGISTER (0.43.0.0)

     VIER GRÖSSEN, ZWEI GEWICHTE. Das ist die ganze Leiter; wer eine
     fünfte Stufe braucht, braucht in Wahrheit Abstand oder Position.

     ANLASS (Jens, 03.10.2026): „die typo anfassen aufhören treppchen
     damit zu bauen indem man so viele unterschiedliche schriftschnitte
     und größen nutzt."

     Gemessener Bestand davor: 46 verschiedene Schriftgrößen in Markup
     und CSS, elf davon allein im Band 0,65–0,88rem. Für die EINE Rolle
     „Abschnittstitel" waren sieben Werte im Umlauf (h2 1,3 ·
     card--tun__titel 1,15 · panel>h2 1,1 · tile-section__title 1,05 ·
     umgebung h2 1,02 · suche-seite h2 1,0).

     Das Vorbild ist MailStil (Services/Mail/MailStil.php), das Jens
     an den Mails gefallen hat: dort gibt es 11/14/16/21px und sonst
     nichts. Das Label dort setzt sich über VERSALIEN UND SPERRUNG ab,
     nicht über eine eigene Größe — derselbe Griff gilt hier.

     GRUNDGRÖSSE: `body.admin` stand auf 15px, während jede rem-Angabe
     gegen die Wurzel (16px) rechnete. 0,9rem sind 14,4px und damit
     KLEINER als der geerbte Text — wer eine Größe setzte, bekam etwas
     anderes als die Seite ohnehin hatte und justierte nach. Das
     erklärt einen guten Teil der 46 Größen. Jetzt steht die
     Grundgröße selbst im Register, in rem, und stimmt mit ihm überein.
     ════════════════════════════════════════════════════════════════ */

  /* Titel — Seitenüberschrift und Kennzahlen. Mehr als eine große
     Zahl pro Seite verträgt kein Arbeitswerkzeug. */
  --typo-titel:     1.75rem;   /* 28px */
  /* Abschnitt — jede h2, h3 und jeder Kartentitel. */
  --typo-abschnitt: 1.0625rem; /* 17px */
  /* Text — die Vorgabe. Tabellen, Formulare, Fließtext, Knöpfe.
     Wer nichts angibt, bekommt das hier. */
  --typo-text:      0.875rem;  /* 14px */
  /* Klein — Beschriftungen, Hilfetexte, Meta, Marken. Darunter
     kommt nichts mehr. */
  --typo-klein:     0.75rem;   /* 12px */

  /* Zwei Gewichte. 500 und 700 entfallen: 500 war von 600 nicht zu
     unterscheiden, 700 nur an vier Stellen und dort zufällig. */
  --typo-normal:    400;
  --typo-stark:     600;

  /* Zeilenhöhen gehören zum Register — ohne sie wandert das Treppchen
     nur eine Eigenschaft weiter. */
  --zeile-eng:      1.25;      /* Überschriften */
  --zeile:          1.5;       /* Vorgabe */
  --zeile-weit:     1.65;      /* längerer Fließtext */

  /* Die Sperrung, die das Label trägt statt einer fünften Größe. */
  --typo-sperrung:  0.06em;

  /* Glyphen sind keine Typografie. Ein Schließkreuz, ein Blätterpfeil
     und der Platzhalter für ein fehlendes Cover wurden bisher über
     `font-size` bemaßt (1,4 / 1,6 / 2,4rem) und standen damit als
     Schriftgrößen in der Zählung, obwohl kein Wort darin steht. Eigener
     Name, damit sie das Register nicht wieder auffüllen. */
  --glyph:       1.5rem;
  --glyph-gross: 2.4rem;

  /* --- Abstände (0.43.0.0) ---------------------------------------
     Dieselbe Begründung wie bei den Größen: wenn jeder Block seinen
     eigenen Abstand mitbringt, entsteht das Treppchen in der
     Senkrechten. Die Leiter ist dieselbe wie im Frontend
     (site.css --space-1 … --space-9), damit beide Seiten desselben
     Hauses dieselben Maße kennen. */
  --mass-1: 0.25rem;
  --mass-2: 0.5rem;
  --mass-3: 0.75rem;
  --mass-4: 1rem;
  --mass-5: 1.5rem;
  --mass-6: 2rem;
  --mass-7: 3rem;

  /* --- Layout --- */
  --sidebar-w:  224px;
  --topbar-h:   56px;
  --radius-sm:  6px;
  --radius:     8px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-pill: 999px;

  /* --- Schatten (sparsam, nur Focus + Modal) --- */
  --shadow-focus:  0 0 0 3px var(--vos-tinte-soft);
  --shadow-card:   0 1px 0 var(--vos-line-soft);
  --shadow-pop:    0 8px 32px rgba(20, 16, 12, 0.08), 0 2px 6px rgba(20, 16, 12, 0.05);

  /* --- Aliasse: ANDERE Namen für dieselben Token ---
     v0.33.0.0: Dieser Block enthielt bis hierher 27 Zeilen der Form
     `--vos-x: var(--vos-x);`. Sie waren einmal echte Aliasse
     (Altpräfix auf neues Token) für Views aus v0.4–v0.7 und wurden von der
     Präfix-Umstellung in v0.30.0.0 zu SELBSTREFERENZEN gemacht.

     Eine Custom Property, die sich selbst referenziert, ist nach der
     CSS-Spezifikation zur Rechenzeit ungültig — sie hat danach KEINEN Wert.
     Weil der Block hinter den echten Definitionen steht, hat er sie
     überschrieben: Leitfarbe, Papiertöne, Linien und Schriften waren im
     Backend seit v0.30.0.0 leer.

     Die Alt-Views, für die es diese Aliasse gab, tragen seit v0.30.0.0
     ebenfalls die neuen Namen — die Zeilen hatten also ohnehin keinen
     Zweck mehr. Entfernt. Was bleibt, sind Aliasse mit ABWEICHENDEM
     Namen; die sind echt und werden gebraucht. --- */
  --vos-primary:       var(--vos-tinte);
  --vos-primary-dk:    var(--vos-tinte-dunkel);
  --vos-accent:        var(--vos-bordeaux);
  --vos-border:        var(--vos-line);
  --radius:            var(--radius-md);
  --shadow-sm:         var(--shadow-card);
  --shadow-md:         0 4px 12px rgba(20, 16, 12, 0.06);
  --shadow-lg:         var(--shadow-pop);

  /* Optional: BrandingService kann --c-primary überschreiben */
  --c-primary:         var(--vos-tinte);
  --c-accent:          var(--vos-bordeaux);
}

/* ══════════════════════════════════════════════════════════════════════
   AUS admin-legacy.css ÜBERNOMMEN (0.43.0.0)

   `admin-legacy.css` (2819 Zeilen) lief als zweites Stylesheet neben
   diesem und wurde VOR ihm geladen. Das hatte zwei Folgen, die man
   nicht sah:

   1. 111 Selektoren waren in BEIDEN Dateien definiert. Die Fassung in
      dieser Datei gewann für die Eigenschaften, die sie setzt — aber
      was NUR drüben stand, sickerte durch. Beispiel: `.empty` bekam von
      dort `font-style: italic`, obwohl die hiesige Fassung keine
      Kursive vorsieht. Bei 50 Selektoren war das so.
   2. 78 Regelsätze waren tot: keine ihrer Klassen kam im Markup oder im
      JavaScript vor.

   Hier stehen die 419 Regeln, die gebraucht werden, in der Reihenfolge,
   in der sie vorher geladen wurden — also VOR allem, was in dieser
   Datei folgt. Die Darstellung bleibt damit dieselbe; nachgemessen an
   20.450 Elementen auf 90 Seiten.

   ACHTUNG beim Aufräumen: mehrere Klassennamen werden erst zur Laufzeit
   zusammengesetzt (`customer-card__status--<?= $key ?>`, `badge--` . $x).
   26 solcher Präfixe gibt es. Wer eine Regel für „unbenutzt" hält, muss
   auch danach suchen — ein erster Versuch hat genau daran die Marken der
   Kundenliste verloren.

   Dieser Block ist dazu da, zu schrumpfen: was besser in einen Abschnitt
   weiter unten gehört, gehört dorthin verschoben.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body.admin {
  font-family: var(--vos-sans);
  font-size: var(--typo-text);
  line-height: 1.55;
  color: var(--vos-text);
  background: var(--vos-papier);
  background-image:
    radial-gradient(ellipse at top right, rgba(184, 149, 74, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(122, 44, 30, 0.025) 0%, transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: var(--vos-tinte);
  text-decoration: none;
  transition: color 0.12s ease;
}
a:hover {
  color: var(--vos-bordeaux);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em;
  color: var(--vos-tinte-dunkel);
  font-weight: var(--typo-stark);
  line-height: 1.25;
}
h1 {
  font-family: var(--vos-serif);
  font-size: var(--typo-titel);
  font-weight: 500;
  letter-spacing: -0.005em;
}
h2 {
  font-family: var(--vos-serif);
  font-size: var(--typo-abschnitt);
  font-weight: var(--typo-stark);
}
h3 { font-size: var(--typo-abschnitt); font-weight: var(--typo-stark); letter-spacing: 0.005em; }
h4 { font-size: var(--typo-text); font-weight: var(--typo-stark); letter-spacing: 0.01em; }
p  { margin: 0 0 1rem; }
small, .small { font-size: var(--typo-klein); }
code, pre, kbd {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}
code {
  background: var(--vos-papier-tief);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--vos-tinte-dunkel);
}
.admin-wrap {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "brand topbar"
    "sidebar main";
  min-height: 100vh;
}
.admin-topbar {
  grid-area: topbar;
  background: var(--vos-surface);
  border-bottom: 1px solid var(--vos-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem 0 1.25rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 var(--vos-line-soft);
}
.admin-topbar__crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--typo-text);
  color: var(--vos-text-mute);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.admin-topbar__crumbs a { color: var(--vos-text-mute); }
.admin-topbar__crumbs a:hover {
  color: var(--vos-tinte);
  text-decoration: none;
}
.admin-topbar__crumb-sep {
  color: var(--vos-line-strong);
  font-size: var(--typo-klein);
}
.admin-topbar__crumb-current {
  color: var(--vos-tinte-dunkel);
  font-weight: var(--typo-stark);
}
.admin-topbar__user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--typo-text);
  white-space: nowrap;
}
.admin-topbar__user-name {
  font-weight: var(--typo-stark);
  color: var(--vos-tinte-dunkel);
}
.admin-topbar__user-role {
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-left: 0.5rem;
  border-left: 1px solid var(--vos-line);
}
.admin-topbar__logout {
  color: var(--vos-bordeaux);
  font-weight: var(--typo-stark);
  padding-left: 0.5rem;
  border-left: 1px solid var(--vos-line);
}
.admin-topbar__logout:hover { color: var(--vos-bordeaux-tief); }
.admin-brand {
  grid-area: brand;
  background: var(--vos-surface);
  border-bottom: 1px solid var(--vos-line);
  border-right: 1px solid var(--vos-line);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 51;
  height: var(--topbar-h);
}
.admin-brand a {
  font-family: var(--vos-serif);
  font-weight: var(--typo-stark);
  font-size: var(--typo-titel);
  letter-spacing: 0.005em;
  color: var(--vos-tinte-dunkel);
  text-decoration: none;
  line-height: 1;
}
.admin-brand a:hover {
  color: var(--vos-bordeaux);
  text-decoration: none;
}
.admin-version {
  font-family: var(--vos-sans);
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  letter-spacing: 0.04em;
  margin-left: auto;
  padding: 0.15rem 0.4rem;
  background: var(--vos-papier-tief);
  border-radius: var(--radius-sm);
}
.admin-sidebar {
  grid-area: sidebar;
  background: var(--vos-papier);
  border-right: 1px solid var(--vos-line);
  padding: 1rem 0 2rem;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--vos-line-strong) transparent;
}
.admin-sidebar::-webkit-scrollbar { width: 6px; }
.admin-sidebar::-webkit-scrollbar-thumb {
  background: var(--vos-line-strong);
  border-radius: 3px;
}
.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.admin-nav a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--vos-text);
  padding: 0.55rem 1.25rem 0.55rem 1rem;
  margin: 0 0.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  border-left: 3px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.admin-nav a:hover {
  background: var(--vos-papier-warm);
  color: var(--vos-tinte-dunkel);
  text-decoration: none;
}
.admin-nav a.active,
.admin-nav a[aria-current="page"] {
  background: var(--vos-surface);
  color: var(--vos-tinte-dunkel);
  border-left-color: var(--vos-bordeaux);
  font-weight: var(--typo-stark);
  box-shadow: var(--shadow-sm);
}
.admin-main {
  grid-area: main;
  padding: 1.75rem 2.25rem 3rem;
  min-width: 0; 
}
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--vos-line-soft);
}
.admin-header h1 { margin: 0; }
.admin-header__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.panel {
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.panel > h2:first-child,
.panel > h3:first-child { margin-top: 0; }
.kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.kachel {
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  text-decoration: none;
  color: var(--vos-text);
  display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  overflow: hidden;
}
.kachel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--vos-tinte);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.kachel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--vos-tinte-hell);
  text-decoration: none;
  color: var(--vos-text);
}
.kachel:hover::before { opacity: 1; }
.kachel__zahl {
  font-family: var(--vos-serif);
  font-size: var(--typo-titel);
  font-weight: var(--typo-stark);
  color: var(--vos-tinte);
  line-height: 1;
  letter-spacing: -0.01em;
}
.kachel__label {
  font-weight: var(--typo-stark);
  margin-top: 0.5rem;
  color: var(--vos-tinte-dunkel);
  font-size: var(--typo-text);
}
.kachel__sub {
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  margin-top: 0.3rem;
}
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .grid-2col { grid-template-columns: 1fr; }
}
.table-wrap {
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
table.table,
table.data-table {
  width: 100%;
  border-collapse: collapse;
}
table.table th,
table.table td,
table.data-table th,
table.data-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--vos-line-soft);
  vertical-align: middle;
}
table.table th,
table.data-table th {
  background: var(--vos-papier-tief);
  font-weight: var(--typo-stark);
  font-size: var(--typo-klein);
  color: var(--vos-tinte-dunkel);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
table.table tr:last-child td,
table.data-table tr:last-child td { border-bottom: none; }
table.table tbody tr:hover td,
table.data-table tbody tr:hover td { background: var(--vos-papier); }
table.table .actions,
table.data-table .actions,
table.data-table .td-actions,
td.td-actions {
  white-space: nowrap;
  text-align: right;
}
table.table .actions a,
table.table .actions button,
table.data-table .actions a,
table.data-table .actions button,
td.td-actions a,
td.td-actions button {
  margin-left: 0.4rem;
}
td.td-thumb { width: 60px; }
td.td-thumb img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--vos-line);
  display: block;
}
.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.row-muted td { color: var(--vos-text-mute); font-style: italic; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--vos-surface);
  color: var(--vos-tinte-dunkel);
  border: 1px solid var(--vos-line-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}
.btn:hover {
  background: var(--vos-papier);
  border-color: var(--vos-tinte-hell);
  color: var(--vos-tinte-dunkel);
  text-decoration: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.btn:active { transform: translateY(1px); }
.btn--primary,
.btn-primary {
  background: var(--vos-tinte);
  color: #fff;
  border-color: var(--vos-tinte);
}
.btn--primary:hover,
.btn-primary:hover {
  background: var(--vos-tinte-dunkel);
  border-color: var(--vos-tinte-dunkel);
  color: #fff;
}
.btn--secondary,
.btn-sec,
.btn-secondary {
  background: var(--vos-surface);
  color: var(--vos-tinte);
  border-color: var(--vos-tinte);
}
.btn--secondary:hover,
.btn-sec:hover,
.btn-secondary:hover {
  background: var(--vos-tinte);
  color: #fff;
  border-color: var(--vos-tinte);
}
.btn--danger,
.btn-danger {
  background: var(--vos-bordeaux);
  color: #fff;
  border-color: var(--vos-bordeaux);
}
.btn--danger:hover,
.btn-danger:hover {
  background: var(--vos-bordeaux-tief);
  border-color: var(--vos-bordeaux-tief);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--vos-tinte);
}
.btn--ghost:hover {
  background: var(--vos-tinte-soft);
  border-color: transparent;
}
.btn--sm, .btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: var(--typo-klein);
  border-radius: var(--radius-sm);
}
.btn[disabled],
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.form-row { margin-bottom: 1.1rem; }
.form-row label {
  display: block;
  font-weight: var(--typo-stark);
  margin-bottom: 0.35rem;
  color: var(--vos-tinte-dunkel);
  font-size: var(--typo-text);
  letter-spacing: 0.005em;
}
.form-row label .required { color: var(--vos-bordeaux); }
.form-row .hint {
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  margin-top: 0.25rem;
  line-height: 1.5;
}
.form-row .error {
  font-size: var(--typo-klein);
  color: var(--vos-bordeaux);
  margin-top: 0.25rem;
  font-weight: var(--typo-stark);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.55rem 0.8rem;
  font-size: var(--typo-text);
  font-family: inherit;
  background: var(--vos-surface);
  border: 1px solid var(--vos-line-strong);
  border-radius: var(--radius-sm);
  color: var(--vos-text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--vos-tinte);
  box-shadow: var(--shadow-focus);
}
input::placeholder,
textarea::placeholder {
  color: var(--vos-text-mute);
  opacity: 0.7;
}
input[disabled],
select[disabled],
textarea[disabled],
.is-disabled {
  background: var(--vos-papier-tief);
  color: var(--vos-text-mute);
  cursor: not-allowed;
}
textarea {
  min-height: 90px;
  line-height: 1.55;
  resize: vertical;
}
input[type="color"] {
  height: 38px;
  padding: 2px;
  width: 60px;
  cursor: pointer;
}
.form-row--inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.form-row--inline input[type="checkbox"],
.form-row--inline input[type="radio"] {
  width: auto;
}
.form-row--inline label {
  margin-bottom: 0;
  font-weight: var(--typo-normal);
  cursor: pointer;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 1rem;
}
.form-edit {  }
.form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vos-line-soft);
  flex-wrap: wrap;
}
.tabs,
.form-tabs__nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--vos-line);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.tabs__btn,
.form-tabs__nav button {
  background: none;
  border: none;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  color: var(--vos-text-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.tabs__btn:hover,
.form-tabs__nav button:hover {
  color: var(--vos-tinte-dunkel);
}
.tabs__btn.active,
.form-tabs__nav button.active {
  color: var(--vos-tinte-dunkel);
  border-bottom-color: var(--vos-bordeaux);
  font-weight: var(--typo-stark);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
[data-tab-panel] { display: none; }
[data-tab-panel].active { display: block; }
.form-tabs {  }
/* ──────────────────────────────────────────────────────────────────────
   0.44.2.0 — EINE Marke, eine Regel.

   Hier standen VIER `.badge`-Grundregeln in dieser einen Datei (Zeilen
   839, 2212, 3241, 4502). Die letzte gewann, was sie setzte; das
   tatsächliche Aussehen war eine Mischung aus allen vieren — dieselbe
   Krankheit wie die zwei Stylesheets, die sich in 0.43.0.0 gegenseitig
   überschrieben, nur innerhalb einer Datei. Die Erkennung toter Regeln
   von damals sucht Klassen ohne Regel; mehrfach definierte Regeln sieht
   sie nicht.

   Was dabei herauskam und niemand gewollt hatte:
   - `text-transform: uppercase` aus der letzten Regel galt für ALLE
     Marken. „BEI DRUCKEREI BESTELLT", „INVENTUR-KORREKTUR",
     „SCHWUND / BRUCH" — die Marke schrie den Wert.
   - Der farbige Punkt (`.badge::before`) aus der dritten Regel war
     unsichtbar: er braucht `inline-flex`, und die vierte Regel setzte
     `inline-block`. Er stand seit 0.43.0.0 da und hat nie gerendert.

   KEINE Versalien mehr. Die Gestaltungs-Ordnung sagt: Versalien und
   Sperrung setzen ein LABEL ab. Eine Marke trägt keinen Label, sondern
   einen WERT — den Zustand des Datensatzes. Ihn zu schreien macht ihn
   nicht deutlicher, nur lauter, und bei langen Wörtern unleserlich.
   ────────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  line-height: var(--zeile-eng, 1.4);
  border-radius: var(--radius-pill, 999px);
  background: var(--vos-surface-sub, var(--vos-papier-tief));
  color: var(--vos-text-soft, var(--vos-text-mute));
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
}
.badge--live,    .badge-live    { background: rgba(45, 138, 58, 0.14);  color: var(--vos-success); }
.badge--entwurf, .badge-entwurf { background: rgba(185, 107, 0, 0.14);  color: var(--vos-warn); }
.badge--archiv,  .badge-archiv  { background: var(--vos-papier-tief);   color: var(--vos-text-mute); }
.badge--neu,     .badge-neu     { background: var(--vos-tinte);         color: #fff; }
.badge--featured,.badge-featured{ background: var(--vos-bordeaux);      color: #fff; }
.badge--info,    .badge-info    { background: var(--vos-tinte-soft);    color: var(--vos-tinte-dunkel); }
.flash {
  padding: 0.85rem 1.15rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  border-left: 4px solid var(--vos-info);
  background: var(--vos-tinte-soft);
  color: var(--vos-tinte-dunkel);
  font-size: var(--typo-text);
  line-height: 1.5;
}
.subrow {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: start;
  padding: 0.7rem;
  background: var(--vos-papier-tief);
  border: 1px solid var(--vos-line-soft);
  border-radius: var(--radius-sm);
}
.subrow .btn--remove { align-self: start; }
.subrow textarea { min-height: 60px; }
table.repeater-table {
  width: 100%;
  border-collapse: collapse;
}
table.repeater-table th,
table.repeater-table td {
  padding: 0.45rem 0.6rem;
  vertical-align: top;
}
table.repeater-table th {
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}
.media-picker {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: start;
}
.media-picker__preview {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--vos-line);
  background: var(--vos-papier-tief);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-picker__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-dropzone.is-dragover {
  border-color: var(--vos-tinte);
  border-style: solid;
  background: var(--vos-papier);
}
.media-dropzone.is-dragover .media-dropzone__inner strong {
  color: var(--vos-tinte);
}
.galerie-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.6rem 0 1rem;
  flex-wrap: wrap;
}
.galerie-status {
  font-size: var(--typo-klein);
}
.galerie-status[data-kind="busy"]  { color: var(--vos-text-mute); }
.galerie-status[data-kind="ok"]    { color: var(--vos-tinte); }
.galerie-status[data-kind="error"] { color: #7a1c1c; }
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.8rem;
  min-height: 80px;
}
.galerie-item {
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: grab;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.galerie-item:hover {
  border-color: var(--vos-tinte-hell);
  box-shadow: var(--shadow-md);
}
.galerie-item:active {
  cursor: grabbing;
}
.galerie-item.sortable-chosen {
  border-color: var(--vos-tinte);
}
.galerie-item.sortable-ghost {
  opacity: 0.4;
}
.galerie-item__preview {
  width: 100%;
  height: 140px;
  display: block;
  background: var(--vos-papier-tief);
  overflow: hidden;
}
.galerie-item__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.galerie-item__icon {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vos-papier-tief);
  color: var(--vos-text-mute);
  font-size: var(--typo-titel);
}
.galerie-item__name {
  padding: 0.5rem 0.65rem;
  font-size: var(--typo-klein);
  color: var(--vos-tinte-dunkel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.galerie-item__remove {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--vos-tinte);
  font-size: var(--typo-abschnitt);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.galerie-item:hover .galerie-item__remove,
.galerie-item:focus-within .galerie-item__remove {
  opacity: 1;
}
.galerie-item__remove:hover {
  background: #7a1c1c;
  color: #fff;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 40, 69, 0.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--vos-surface);
  border-radius: var(--radius);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal__head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--vos-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal__head h3 { margin: 0; }
.modal__body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}
.modal__foot {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--vos-line);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.modal__close {
  background: none;
  border: none;
  font-size: var(--typo-titel);
  cursor: pointer;
  color: var(--vos-text-mute);
  line-height: 1;
  padding: 0;
}
.modal__close:hover { color: var(--vos-bordeaux); }
.vos-mp .modal {
  max-width: 1020px;
  height: 85vh;
  max-height: 85vh;
}
.vos-mp__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--vos-line);
  background: var(--vos-papier-tief);
  flex-shrink: 0;
}
.vos-mp__title {
  font-weight: var(--typo-stark);
  font-size: var(--typo-text);
  margin: 0;
  white-space: nowrap;
}
.vos-mp__search {
  flex: 1;
  max-width: 320px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--typo-text);
  background: var(--vos-surface);
}
.vos-mp__search:focus {
  outline: none;
  border-color: var(--vos-tinte);
  box-shadow: 0 0 0 3px var(--vos-tinte-soft);
}
.vos-mp__close { margin-left: auto; }
.vos-mp__body {
  flex: 1;
  
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
}
.vos-mp__grid {
  flex: 1;
  
  min-height: 0;
  overflow-y: auto;
  padding: 0.85rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  
  grid-auto-rows: minmax(190px, auto);
  gap: 0.55rem;
  align-content: start;
}
.vos-mp__pages {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  padding: .55rem .85rem;
  border-top: 1px solid var(--vos-line);
  background: var(--vos-papier-tief);
  font-size: var(--typo-text);
}
.vos-mp__pages:empty {
  display: none;
}
.vos-mp__pages-info {
  margin-right: auto;
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
}
.vos-mp__page-btn {
  min-width: 2rem;
  padding: .25rem .55rem;
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-sm);
  background: var(--vos-surface);
  font: inherit;
  font-size: var(--typo-klein);
  cursor: pointer;
  text-align: center;
  color: var(--vos-text);
  transition: border-color .1s, background .1s;
}
.vos-mp__page-btn:hover:not(.vos-mp__page-btn--disabled):not(.vos-mp__page-btn--current) {
  border-color: var(--vos-tinte);
  background: var(--vos-tinte-soft);
}
.vos-mp__page-btn--current {
  background: var(--vos-tinte);
  border-color: var(--vos-tinte);
  color: #fff;
  font-weight: var(--typo-stark);
  cursor: default;
}
.vos-mp__page-btn--disabled {
  opacity: .35;
  cursor: not-allowed;
}
.vos-mp__page-ellipsis {
  padding: 0 .25rem;
  color: var(--vos-text-mute);
}
.vos-mp__hint {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--vos-text-mute);
  padding: 2rem 1rem;
  margin: 0;
}
.vos-mp__hint--error { color: #7a1c1c; }
.vos-mp__item {
  
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--vos-papier-tief);
  padding: 0;
  font: inherit;
  text-align: left;
  transition: border-color 0.1s, transform 0.1s, box-shadow 0.1s;
}
.vos-mp__item:hover {
  border-color: var(--vos-tinte-hell);
  transform: translateY(-1px);
}
.vos-mp__item.is-selected {
  border-color: var(--vos-tinte);
  box-shadow: 0 0 0 2px var(--vos-tinte-soft);
}
.vos-mp__thumb {
  
  position: relative;
  width: 100%;
  height: 140px !important;
  flex-shrink: 0;
  background: var(--vos-papier-warm);
  display: block;
  overflow: hidden;
}
.vos-mp__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
}
.vos-mp__icon {
  
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--typo-titel);
  color: var(--vos-text-mute);
}
.vos-mp--multi .vos-mp__item .vos-mp__thumb::after {
  content: '';
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--vos-line);
}
.vos-mp--multi .vos-mp__item.is-selected .vos-mp__thumb::after {
  content: '✓';
  background: var(--vos-tinte);
  border-color: var(--vos-tinte);
  color: #fff;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vos-mp__name {
  font-size: var(--typo-klein);
  padding: 0.25rem 0.45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--vos-tinte-dunkel);
}
.vos-mp__foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.2rem;
  border-top: 1px solid var(--vos-line);
  background: var(--vos-papier-tief);
  flex-shrink: 0;
}
.vos-mp__upload {
  cursor: pointer;
  margin: 0;
}
.vos-mp__sel-label {
  flex: 1;
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  margin: 0 0.5rem;
}
.cat-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-tree ul {
  list-style: none;
  margin: 0;
  padding-left: 1.5rem;
  border-left: 1px dashed var(--vos-line);
}
.cat-tree li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--vos-line-soft);
}
.cat-tree li:last-child { border-bottom: none; }
.kategorie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}
.kat-label {
  font-weight: var(--typo-stark);
  color: var(--vos-tinte-dunkel);
}
.toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.toolbar__suche {
  flex: 1;
  min-width: 220px;
  
}
.imp-form { display: grid; gap: 1rem; }
@media (max-width: 900px) {
  .imp-grid { grid-template-columns: 1fr; }
}
.imp-section {
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 0;
  min-width: 0; 
}
.imp-section .data-table { width: 100%; }
.imp-fieldset {
  border: 1px solid var(--vos-line-soft);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.imp-fieldset legend {
  font-weight: var(--typo-stark);
  font-size: var(--typo-text);
  color: var(--vos-tinte-dunkel);
  padding: 0 0.4rem;
}
.imp-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.imp-note {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--typo-text);
  margin: 0.75rem 0;
  border-left: 3px solid var(--vos-tinte);
  background: var(--vos-tinte-soft);
  color: var(--vos-tinte-dunkel);
}
.imp-note--info { border-left-color: var(--vos-tinte); background: var(--vos-tinte-soft); color: var(--vos-tinte-dunkel); }
.imp-note--warn { border-left-color: var(--vos-warn); background: rgba(185, 107, 0, 0.10); color: #884e00; }
.imp-success {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  background: rgba(45, 138, 58, 0.10);
  border-left: 3px solid var(--vos-success);
  color: #1d5e26;
  margin: 0.75rem 0;
}
.imp-counters,
.imp-counter-table,
.imp-subdir-table,
.imp-err-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 0.75rem;
  font-size: var(--typo-text);
}
.imp-counters th,
.imp-counters td,
.imp-counter-table th,
.imp-counter-table td,
.imp-subdir-table th,
.imp-subdir-table td,
.imp-err-table th,
.imp-err-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--vos-line-soft);
  text-align: left;
  vertical-align: top;
}
.imp-counters th,
.imp-counter-table th,
.imp-subdir-table th,
.imp-err-table th {
  background: var(--vos-papier-tief);
  font-weight: var(--typo-stark);
  font-size: var(--typo-klein);
  color: var(--vos-tinte-dunkel);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.imp-keyvalue {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1rem;
  font-size: var(--typo-text);
  margin: 0.5rem 0;
}
.imp-keyvalue dt { color: var(--vos-text-mute); font-weight: var(--typo-stark); }
.imp-keyvalue dd { margin: 0; color: var(--vos-tinte-dunkel); font-variant-numeric: tabular-nums; }
.imp-details {
  margin: 0.75rem 0;
  padding: 0.6rem 0.85rem;
  background: var(--vos-papier-tief);
  border-radius: var(--radius-sm);
  font-size: var(--typo-text);
}
.imp-details > summary {
  cursor: pointer;
  font-weight: var(--typo-stark);
  color: var(--vos-tinte-dunkel);
}
ul.liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.liste li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--vos-line-soft);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
ul.liste li:last-child { border-bottom: none; }
ul.liste li a {
  color: var(--vos-tinte-dunkel);
  font-weight: var(--typo-stark);
}
ul.liste li a:hover {
  color: var(--vos-bordeaux);
}
.meta-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  font-size: var(--typo-text);
}
.meta-dl dt {
  color: var(--vos-text-mute);
  font-weight: var(--typo-stark);
}
.meta-dl dd { margin: 0; color: var(--vos-tinte-dunkel); }
.row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.row > label {
  font-weight: var(--typo-stark);
  color: var(--vos-tinte-dunkel);
  font-size: var(--typo-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.row > label > input[type="checkbox"],
.row > label > input[type="radio"] {
  margin: 0;
}
.row:has(> label > input[type="checkbox"]) > label,
.row:has(> label > input[type="radio"]) > label {
  font-weight: var(--typo-normal);
  font-size: var(--typo-abschnitt);
}
.row--inline,
.row:has(> label + label) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.sort-handle {
  cursor: grab;
  user-select: none;
  color: var(--vos-text-mute);
  padding: 0 0.3rem;
}
.sort-handle:active { cursor: grabbing; color: var(--vos-bordeaux); }
.ql-toolbar {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  border-color: var(--vos-line-strong) !important;
  background: var(--vos-papier-tief);
}
.ql-container {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  border-color: var(--vos-line-strong) !important;
  min-height: 180px;
  font-family: var(--vos-sans);
  font-size: var(--typo-text);
}
.p-richtext { min-height: 180px; }
.muted   { color: var(--vos-text-mute); }
.mt-2    { margin-top: 1rem; }
.mb-1    { margin-bottom: 0.5rem; }
.empty   {
  padding: 2.5rem;
  text-align: center;
  color: var(--vos-text-mute);
  font-style: italic;
  background: var(--vos-papier-tief);
  border: 1px dashed var(--vos-line);
  border-radius: var(--radius);
}
@media (max-width: 980px) {
  
  .admin-main { padding: 1.25rem 1.5rem 2rem; }
}
@media (max-width: 768px) {
  .admin-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) auto 1fr;
    grid-template-areas:
      "topbar"
      "sidebar"
      "main";
  }
  .admin-brand { display: none; }
  .admin-topbar { padding-left: 1rem; padding-right: 1rem; }
  .admin-topbar::before {
    content: attr(data-marke);
    font-family: var(--vos-serif);
    font-size: var(--typo-abschnitt);
    color: var(--vos-tinte-dunkel);
    font-weight: var(--typo-stark);
    margin-right: 0.75rem;
    padding-right: 0.75rem;
    border-right: 1px solid var(--vos-line);
  }
  .admin-topbar__user-role { display: none; }
  .admin-sidebar {
    position: relative;
    height: auto;
    top: 0;
    padding: 0.5rem 0;
    border-right: none;
    border-bottom: 1px solid var(--vos-line);
  }
  .admin-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 0.5rem;
  }
  .admin-nav a {
    padding: 0.5rem 0.85rem;
    margin: 0.15rem;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .admin-nav a.active {
    border-left: none;
    border-bottom-color: var(--vos-bordeaux);
    box-shadow: none;
  }
  .admin-nav__divider { display: none; }
  .admin-main { padding: 1rem; }
}
.btn-ki {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
  padding: 0.2rem 0.65rem;
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  letter-spacing: 0.01em;
  color: #4a3a5a;
  background: linear-gradient(135deg, #f3ebff 0%, #fce8f3 100%);
  border: 1px solid #c9b8e0;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  vertical-align: middle;
}
.btn-ki:hover {
  background: linear-gradient(135deg, #e8d8ff 0%, #f8d8eb 100%);
  border-color: #a890c8;
  transform: translateY(-1px);
}
.btn-ki:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}
.btn-ki .ki-icon {
  font-size: 0.85em;
  color: #7a4ab8;
  filter: drop-shadow(0 0 2px rgba(122, 74, 184, 0.3));
}
.btn-ki .spinner {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid #c9b8e0;
  border-top-color: #7a4ab8;
  border-radius: 50%;
  animation: ki-spin 0.6s linear infinite;
}
@keyframes ki-spin { to { transform: rotate(360deg); } }
label .btn-ki { vertical-align: baseline; }
textarea.ki-just-filled,
input.ki-just-filled {
  background: linear-gradient(180deg, #fcfaff 0%, #ffffff 100%);
  transition: background 1.5s ease;
}
@media print {
  .admin-topbar,
  .admin-sidebar,
  .admin-brand,
  .admin-header__actions,
  .form-actions,
  .btn { display: none !important; }
  .admin-wrap { display: block; }
  .admin-main { padding: 0; }
  body.admin { background: #fff; }
}
.badge--ok      { background: rgba(45, 138, 58, 0.14); color: var(--vos-success, #2d8a3a); }
.badge--warn    { background: rgba(185, 107, 0, 0.14); color: var(--vos-warn, #b96b00); }
.badge--mute    { background: var(--vos-papier-tief, #f1ead8); color: var(--vos-text-mute, #6b6358); }
.badge--danger  { background: rgba(138, 29, 42, 0.14); color: var(--vos-bordeaux, #8a1d2a); }
.badge--gross   { padding: 0.32em 0.85em; font-size: var(--typo-text); font-weight: var(--typo-stark); }
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
}
.card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.card__header h2 { margin: 0; }
.alert {
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--vos-tinte, #1a2436);
  background: var(--vos-papier-tief, #f1ead8);
  margin: 0.6rem 0;
  border-radius: 2px;
}
.alert--warn { border-color: var(--vos-warn, #b96b00); background: rgba(185, 107, 0, 0.06); }
.alert--info { border-color: var(--vos-tinte, #1a2436); }
.notiz-box {
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  background: var(--vos-papier-tief, #f1ead8);
  border-left: 3px solid var(--vos-text-mute, #6b6358);
  font-size: var(--typo-text);
  color: var(--vos-text, #1a2436);
}
.stats .muted         { font-size: var(--typo-klein); color: var(--vos-text-mute, #6b6358); }
.row.has-error label { color: var(--vos-bordeaux, #8a1d2a); }
.row.has-error input,
.row.has-error textarea,
.row.has-error select {
  border-color: var(--vos-bordeaux, #8a1d2a);
  background: rgba(138, 29, 42, 0.04);
}
.toolbar__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.pager {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  font-size: var(--typo-text);
}
.pager a {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--vos-line, #e5dccb);
  border-radius: 3px;
  text-decoration: none;
  color: var(--vos-text, #1a2436);
  background: #fff;
}
.pager a:hover { background: var(--vos-papier-tief, #f1ead8); }
.pager a.aktiv {
  background: var(--vos-tinte, #1a2436);
  border-color: var(--vos-tinte, #1a2436);
  color: #fff;
}
.data-table td.num,
.data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .td-actions { text-align: right; white-space: nowrap; }
.data-table .td-actions a + a,
.data-table .td-actions a + form,
.data-table .td-actions form + a { margin-left: 0.7rem; }
#items-table input { width: 100%; box-sizing: border-box; padding: 0.3rem 0.5rem; }
#items-table .num { width: 6rem; }
.ki-toasts {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(440px, calc(100vw - 2.5rem));
  pointer-events: none;
}
.ki-toast {
  pointer-events: auto;
  background: #fff;
  border: 1px solid var(--vos-bordeaux, #8b2e3a);
  border-left: 4px solid var(--vos-bordeaux, #8b2e3a);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  font-size: var(--typo-text);
  line-height: 1.4;
  color: var(--vos-text, #1a2436);
  animation: ki-toast-in 0.18s ease-out;
}
@keyframes ki-toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.ki-toast__title {
  font-weight: var(--typo-stark);
  color: var(--vos-bordeaux, #8b2e3a);
  margin-bottom: 0.25rem;
}
.ki-toast__body {
  white-space: pre-wrap;
  word-break: break-word;
}
.ki-toast__details {
  margin-top: 0.5rem;
  font-size: var(--typo-text);
}
.ki-toast__details summary {
  cursor: pointer;
  color: var(--vos-tinte, #1a2436);
  user-select: none;
}
.ki-toast__raw {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.6rem;
  background: var(--vos-papier-tief, #f1ead8);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--typo-klein);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
}
.ki-toast__actions {
  margin-top: 0.7rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.ki-toast__action {
  background: var(--vos-tinte, #1a2436);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
}
.ki-toast__action:hover { background: var(--vos-tinte-dunkel, #0d1622); }
.ki-toast__close {
  background: transparent;
  border: 1px solid var(--vos-rand, #d6cfb8);
  color: var(--vos-text, #1a2436);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-size: var(--typo-text);
  cursor: pointer;
}
.ki-toast__close:hover { background: var(--vos-papier-tief, #f1ead8); }
.vos-quill-wrap {
  margin-bottom: 0.4rem;
}
.vos-quill-wrap .ql-toolbar.ql-snow {
  border-radius: 6px 6px 0 0;
  border-color: var(--vos-rand, #d6cfb8);
  background: var(--vos-papier-tief, #f5f0db);
  padding: 0.4rem 0.5rem;
}
.vos-quill-wrap .ql-container.ql-snow {
  border-radius: 0 0 6px 6px;
  border-color: var(--vos-rand, #d6cfb8);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--typo-text);
  line-height: 1.5;
  background: #fff;
}
.vos-quill-wrap .ql-editor {
  min-height: 12rem;
  padding: 0.8rem 1rem;
  color: var(--vos-text, #1a2436);
}
.vos-quill-wrap .ql-editor.ql-blank::before {
  color: var(--vos-text-soft, #8a8472);
  font-style: italic;
  left: 1rem;
  right: 1rem;
}
.vos-quill-wrap .ql-toolbar button {
  border-radius: 3px;
}
.vos-quill-wrap .ql-toolbar button:hover,
.vos-quill-wrap .ql-toolbar button.ql-active {
  background: rgba(139, 46, 58, 0.08);
  color: var(--vos-bordeaux, #8b2e3a);
}
.vos-quill-wrap .ql-toolbar .ql-stroke {
  stroke: var(--vos-tinte, #1a2436);
}
.vos-quill-wrap .ql-toolbar button:hover .ql-stroke,
.vos-quill-wrap .ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--vos-bordeaux, #8b2e3a);
}
.vos-quill-wrap .ql-toolbar .ql-fill {
  fill: var(--vos-tinte, #1a2436);
}
.vos-quill-wrap .ql-toolbar button:hover .ql-fill,
.vos-quill-wrap .ql-toolbar button.ql-active .ql-fill {
  fill: var(--vos-bordeaux, #8b2e3a);
}
.vos-quill-wrap .ql-toolbar .ql-picker.ql-header {
  width: 7rem;
}
.view-toggle-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
  flex-wrap: wrap;
}
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--vos-rand, #d6cfb8);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: none;
  padding: 0.45rem 0.8rem;
  font-size: var(--typo-text);
  color: var(--vos-text-soft, #6b6655);
  cursor: pointer;
  border-right: 1px solid var(--vos-rand, #d6cfb8);
  transition: background 0.12s, color 0.12s;
}
.view-toggle__btn:last-child { border-right: none; }
.view-toggle__btn:hover {
  background: var(--vos-papier-tief, #f5f0db);
  color: var(--vos-text, #1a2436);
}
.view-toggle__btn.active {
  background: var(--vos-tinte, #1a2436);
  color: #fff;
}
.view-toggle__btn.active svg path,
.view-toggle__btn.active svg rect { stroke: #fff; }
.view-toggle__btn svg { flex-shrink: 0; }
.book-list[data-view-mode="liste"] .book-list__cards { display: none; }
.book-list[data-view-mode="cards"] .book-list__liste { display: none; }
.book-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 0.5rem;
}
.book-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--vos-rand, #d6cfb8);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.book-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}
.book-card__cover {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--vos-papier-tief, #f5f0db);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.book-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-card__no-cover {
  font-size: var(--glyph-gross);
  opacity: 0.35;
}
.book-card__status {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
}
.book-card__body {
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.book-card__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--typo-abschnitt);
  font-weight: var(--typo-stark);
  line-height: 1.25;
  margin: 0;
  color: var(--vos-text, #1a2436);
}
.book-card__subtitle {
  font-size: var(--typo-text);
  color: var(--vos-text-soft, #6b6655);
  font-style: italic;
}
.book-card__meta {
  display: flex;
  gap: 0.6rem;
  font-size: var(--typo-klein);
  color: var(--vos-text-soft, #6b6655);
  margin-top: auto;
  flex-wrap: wrap;
}
.book-card__bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--vos-rand, #d6cfb8);
}
.book-card__preis {
  font-weight: var(--typo-stark);
  font-size: var(--typo-abschnitt);
  color: var(--vos-bordeaux, #8b2e3a);
  font-variant-numeric: tabular-nums;
}
.author-list[data-view-mode="liste"] .author-list__cards,
.themes-list[data-view-mode="liste"] .themes-list__cards,
.customers-list[data-view-mode="liste"] .customers-list__cards { display: none; }
.author-list[data-view-mode="cards"] .author-list__liste,
.themes-list[data-view-mode="cards"] .themes-list__liste,
.customers-list[data-view-mode="cards"] .customers-list__liste { display: none; }
.author-cards,
.themes-cards,
.customer-cards {
  display: grid;
  gap: 1.25rem;
  margin-top: 0.5rem;
}
.author-cards   { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.themes-cards   { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.customer-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.author-card,
.themes-card,
.customer-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--vos-rand, #d6cfb8);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.author-card:hover,
.themes-card:hover,
.customer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}
.author-card__foto {
  aspect-ratio: 1 / 1;
  background: var(--vos-papier-tief, #f5f0db);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.author-card__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.author-card__no-foto {
  font-size: var(--typo-titel);
  opacity: 0.35;
}
.author-card__body { padding: 0.75rem 0.9rem 0.9rem; }
.author-card__name { font-weight: var(--typo-stark); font-size: var(--typo-abschnitt); margin: 0 0 .15rem; color: var(--vos-text, #1a2436); }
.author-card__sub  { font-size: var(--typo-text); color: var(--vos-muted, #7a7a72); margin: 0; }
.author-card__inactive {
  position: absolute; top: .5rem; right: .5rem;
  background: var(--vos-muted, #7a7a72); color: #fff;
  padding: 2px 8px; border-radius: 99px; font-size: var(--typo-klein); font-weight: var(--typo-stark);
  text-transform: uppercase; letter-spacing: .04em;
}
.themes-card__hero {
  aspect-ratio: 16 / 9;
  background: var(--vos-papier-tief, #f5f0db);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.themes-card__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.themes-card__no-hero { font-size: var(--typo-titel); opacity: 0.35; }
.themes-card__body { padding: .75rem .9rem .9rem; }
.themes-card__name { font-weight: var(--typo-stark); font-size: var(--typo-abschnitt); margin: 0 0 .25rem; color: var(--vos-text, #1a2436); }
.themes-card__desc { font-size: var(--typo-text); color: var(--vos-muted, #7a7a72); margin: 0; line-height: 1.4; }
.customer-card { padding: 1rem 1.1rem 1.1rem; gap: .4rem; }
.customer-card__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.customer-card__type { font-size: var(--typo-klein); font-weight: var(--typo-stark); text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 99px; }
.customer-card__type--endkunde { background: var(--vos-papier-tief, #f5f0db); color: var(--vos-text, #1a2436); }
.customer-card__type--haendler { background: var(--vos-info-bg, #dbeafe); color: var(--vos-info, #1e40af); }
.customer-card__status { font-size: var(--typo-klein); font-weight: var(--typo-stark); text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 99px; margin-left: auto; }
.customer-card__status--active  { background: var(--vos-ok-bg, #d4edda); color: var(--vos-ok, #155724); }
.customer-card__status--pending { background: var(--vos-warn-bg, #fff3cd); color: var(--vos-warn, #856404); }
.customer-card__status--blocked { background: var(--vos-danger-bg, #f8d7da); color: var(--vos-danger, #721c24); }
.customer-card__name  { font-weight: var(--typo-stark); font-size: var(--typo-abschnitt); margin: 0; color: var(--vos-text, #1a2436); }
.customer-card__name a { color: inherit; text-decoration: none; }
.customer-card__name a:hover { text-decoration: underline; }
.customer-card__meta  { font-size: var(--typo-text); color: var(--vos-muted, #7a7a72); margin: 0; }
.customer-card__rabatt {
  display: inline-block; margin-top: .25rem;
  background: var(--vos-papier-tief, #f5f0db);
  padding: 2px 8px; border-radius: 4px; font-size: var(--typo-klein);
  color: var(--vos-text, #1a2436);
}
.bulk-bar {
  position: sticky; top: 0; z-index: 5;
  display: none; 
  align-items: center; gap: .75rem;
  background: var(--vos-tinte, #1a2436); color: #fff;
  padding: .6rem 1rem; border-radius: 6px;
  margin: 0 0 1rem;
  flex-wrap: wrap;
}
.bulk-bar.active { display: flex; }
.bulk-bar__count { font-weight: var(--typo-stark); }
.bulk-bar__sep   { opacity: .4; }
.bulk-bar form   { margin: 0; display: inline; }
.bulk-bar .btn   { padding: .4rem .9rem; font-size: var(--typo-text); }
.bulk-bar .btn--ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.4);
}
.bulk-bar .btn--ghost:hover { background: rgba(255,255,255,.1); }
.bulk-bar .btn--danger {
  background: var(--vos-danger, #b91c1c); color: #fff; border: 1px solid var(--vos-danger, #b91c1c);
}
.bulk-bar .btn--danger:hover { background: #991919; }
.data-table th.cb-col,
.data-table td.cb-col { width: 36px; text-align: center; padding-left: 0; padding-right: 0; }
.testimonials-list[data-view-mode="liste"] .testimonials-list__cards,
.media-list[data-view-mode="liste"]        .media-list__cards { display: none; }
.testimonials-list[data-view-mode="cards"] .testimonials-list__liste,
.media-list[data-view-mode="cards"]        .media-list__liste { display: none; }
.pub-list-preview__items li.muted { font-style: italic; opacity: .7; }
.pub-match-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 1rem 0 .5rem;
  padding: .5rem .75rem;
  background: #fafafa;
  border: 1px solid #f3f4f6;
  border-radius: 6px;
  font-size: var(--typo-text);
}
.pub-match-bar__sep { opacity: .35; }
.pub-pair {
  display: grid;
  grid-template-columns: 22px 1fr 16px 1fr auto;
  gap: .6rem;
  align-items: center;
  padding: .5rem .9rem;
  border-bottom: 1px solid #f6f7f9;
  cursor: pointer;
  font-size: var(--typo-text);
  transition: background 0.1s;
}
.pub-pair:last-child { border-bottom: none; }
.pub-pair:hover { background: #fafbfc; }
.pub-pair__cb { cursor: pointer; }
.pub-pair__entity { font-weight: var(--typo-stark); color: var(--vos-text, #1a2436); }
.pub-pair__arrow  { color: #9ca3af; text-align: center; }
.pub-pair__file code { font-size: var(--typo-klein); color: #4b5563; }
.pub-pair__reason {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--typo-klein);
  color: #6b7280;
  background: var(--vos-papier-tief, #f5f0db);
  padding: 2px 8px; border-radius: 4px;
  white-space: nowrap;
}
.pub-pair--off .pub-pair__entity { text-decoration: line-through; }
.testimonials-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 0.5rem;
}
.testimonials-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--vos-rand, #d6cfb8);
  border-left: 4px solid var(--vos-bordeaux, #8b2e3a);
  border-radius: 8px;
  padding: 1rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  transition: box-shadow 0.15s ease-out, transform 0.15s ease-out;
}
.testimonials-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.testimonials-card__stars {
  display: flex; gap: 2px; font-size: var(--typo-abschnitt);
}
.testimonials-card__star { color: #d6cfb8; }
.testimonials-card__star.is-filled { color: var(--vos-warn, #b96b00); }
.testimonials-card__quote {
  margin: 0;
  font-style: italic;
  line-height: 1.5;
  color: var(--vos-text, #1a2436);
  font-size: var(--typo-text);
  quotes: "„" """ "‚" "'";
}
.testimonials-card__quote::before { content: open-quote; }
.testimonials-card__quote::after  { content: close-quote; }
.testimonials-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: .5rem;
  border-top: 1px solid #f3f4f6;
  padding-top: .6rem;
}
.testimonials-card__author { display: flex; flex-direction: column; gap: 2px; }
.testimonials-card__meta   { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.testimonials-card__edit {
  position: absolute; top: .5rem; right: .5rem;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vos-papier-tief, #f5f0db);
  color: var(--vos-text, #1a2436);
  border-radius: 50%;
  text-decoration: none;
  font-size: var(--typo-text);
  opacity: 0;
  transition: opacity 0.15s;
}
.testimonials-card:hover .testimonials-card__edit { opacity: 1; }
@media (min-width: 900px) {
  .order-detail-grid { grid-template-columns: 1fr 320px; }
}
/* 0.44.2.0 — zweite `.badge`-Grundregel entfallen, siehe oben.
   Die Farbvarianten darunter bleiben. */
.badge--pending    { background: #fff3cd; color: #856404; }
.badge--paid       { background: #d4e6cb; color: #2d5016; }
.badge--fulfilled  { background: #c5d8eb; color: #1e3a5f; }
.badge--cancelled  { background: #f4d4d2; color: #7a1d1d; }
.badge--archiv     { background: #e5e5e5; color: #555; }
.badge--aktiv      { background: #d4e6cb; color: #2d5016; }
.badge--verbraucht { background: #e5e5e5; color: #555; }
.badge--issued     { background: #c5d8eb; color: #1e3a5f; }
.payment-list { list-style: none; margin: 0; padding: 0; font-size: var(--typo-text); }
.payment-list li { padding: 8px 0; border-bottom: 1px solid #eee; }
.kommentar { margin: 0; padding: 12px; background: #fafafa; border-left: 3px solid #ccc; font-style: italic; }
address { font-style: normal; }
body.login {
  font-family: var(--vos-sans);
  font-size: var(--typo-text);
  color: var(--vos-text);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--vos-papier-warm) 0%, var(--vos-papier) 55%, var(--vos-papier-tief) 100%);
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.login .login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
body.login .login-card {
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.2rem 2.4rem 2.4rem;
  width: 100%;
  max-width: 420px;
}
body.login .login-card h1 {
  font-family: var(--vos-serif);
  color: var(--vos-tinte);
  font-size: var(--typo-titel);
  font-weight: var(--typo-stark);
  margin: 0 0 0.15rem;
  letter-spacing: -0.01em;
}
body.login .login-sub {
  color: var(--vos-text-mute);
  font-size: var(--typo-text);
  margin: 0 0 1.4rem;
}
body.login .login-card .flash,
body.login .login-card .flash-error,
body.login .login-card .flash-success,
body.login .login-card .flash-info {
  border: 1px solid var(--vos-line);
  background: var(--vos-papier-tief);
  color: var(--vos-text);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  margin: 0 0 1rem;
  font-size: var(--typo-text);
  line-height: 1.4;
}
body.login .login-card .flash-error {
  background: #fdecea;
  border-color: #f5c5c0;
  color: var(--vos-bordeaux-tief);
}
body.login .login-card .flash-success {
  background: #e6f4ea;
  border-color: #b6dcc1;
  color: #1b5e20;
}
body.login .login-card .row {
  display: block;
  margin: 0 0 0.85rem;
}
body.login .login-card .row label {
  display: block;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  color: var(--vos-tinte-dunkel);
  margin: 0 0 0.3rem;
}
body.login .login-card .row input[type="email"],
body.login .login-card .row input[type="password"],
body.login .login-card .row input[type="text"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--typo-text);
  background: var(--vos-surface);
  color: var(--vos-text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  box-sizing: border-box;
}
body.login .login-card .row input:focus {
  outline: none;
  border-color: var(--vos-tinte);
  box-shadow: var(--shadow-focus);
}
body.login .login-card .btn,
body.login .login-card .btn-primary,
body.login .login-card button[type="submit"] {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.65rem 1.3rem;
  background: var(--vos-tinte);
  color: #fff;
  border: 1px solid var(--vos-tinte);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.05s ease;
}
body.login .login-card .btn:hover,
body.login .login-card .btn-primary:hover,
body.login .login-card button[type="submit"]:hover {
  background: var(--vos-tinte-dunkel);
}
body.login .login-card .btn:active,
body.login .login-card .btn-primary:active,
body.login .login-card button[type="submit"]:active {
  transform: translateY(1px);
}

/* ══════════════════════════════════════════════════════════════════
 * 2. RESET / BASE
 * ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body.admin {
  font-family: var(--vos-sans);
  /* 0.43.0.0 — war 15px, während jede rem-Angabe gegen 16px rechnete.
     Jetzt aus dem Register, damit Geerbtes und Gesetztes übereinstimmen. */
  font-size: var(--typo-text);
  line-height: var(--zeile);
  color: var(--vos-text);
  background: var(--vos-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--vos-tinte);
  text-decoration: none;
  transition: color 0.12s ease;
}
a:hover { color: var(--vos-bordeaux); text-decoration: none; }

/* 0.43.0.0 — Überschriften aus dem Register. Vorher trugen h1…h4 vier
   Größen und zwei Gewichte; dazu kamen sechs weitere Werte für
   dieselbe Rolle in einzelnen Bausteinen. Jetzt gibt es zwei Stufen:
   TITEL für die Seite, ABSCHNITT für alles darunter. Dass h2, h3 und
   h4 gleich groß sind, ist Absicht — sie unterscheiden sich über ihre
   Stellung im Dokument, nicht über eine eigene Stufe. */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--mass-2);
  color: var(--vos-tinte-dunkel);
  font-weight: var(--typo-stark);
  line-height: var(--zeile-eng);
}
h1 {
  font-family: var(--vos-serif);
  font-size: var(--typo-titel);
  font-weight: 500;              /* Serifenschrift trägt schon */
  letter-spacing: -0.005em;
}
h2 { font-family: var(--vos-serif); font-size: var(--typo-abschnitt); font-weight: var(--typo-stark); }
h3 { font-size: var(--typo-abschnitt); color: var(--vos-text); }
h4 { font-size: var(--typo-abschnitt); color: var(--vos-text); }
h5, h6 { font-size: var(--typo-text); color: var(--vos-text); }
p  { margin: 0 0 var(--mass-4); }

/* 0.43.0.0 — `<strong>`, `<b>` und `<th>` tragen die Browservorgabe 700
   und brachten damit ein drittes Gewicht auf jede Seite, das niemand
   gesetzt hatte. Tabellen mit Klasse hatten eine eigene Regel; eine
   schlichte `<table>` ohne Klasse — etwa in den DATEV-Einstellungen —
   fiel durch. Das Register kennt zwei Gewichte, und zwar für alle. */
strong, b, th { font-weight: var(--typo-stark); }
small, .small { font-size: var(--typo-klein); }

/* Das Label: setzt sich über Versalien und Sperrung ab, NICHT über
   eine eigene Größe. Derselbe Griff wie in MailStil, und der Grund,
   warum vier Stufen reichen. */
.label, .toolbar label, .kachel__label, .stat-card__label, .dw-kpi__label {
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  text-transform: uppercase;
  letter-spacing: var(--typo-sperrung);
  color: var(--vos-text-mute);
}
.muted { color: var(--vos-text-mute); }
.muted-faint { color: var(--vos-text-faint); }

/* 0.43.0.0 — Monospace stand auf `0.88em` und `code` noch einmal auf
   `0.86em`. Relative Angaben erzeugen in jedem Umfeld eine andere
   Pixelgröße: gemessen kamen daraus allein 12,04px, 14,08px und
   14,72px — drei Stufen, die niemand gesetzt hat. Dazu multiplizierten
   sich die beiden Regeln an jedem `<code>`. Jetzt eine feste Stufe. */
code, pre, kbd { font-family: var(--vos-mono); font-size: var(--typo-text); }
code {
  background: var(--vos-surface-sub);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--vos-text-soft);
}

hr {
  border: 0;
  border-top: 1px solid var(--vos-line);
  margin: 1.5rem 0;
}

::selection { background: var(--vos-tinte-soft); color: var(--vos-tinte-dunkel); }

.admin-sidebar::-webkit-scrollbar { width: 8px; }
.admin-sidebar::-webkit-scrollbar-thumb {
  background: var(--vos-line-strong);
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
 * 3. LAYOUT — Sidebar + Topbar + Main
 * ══════════════════════════════════════════════════════════════════ */
.admin-wrap {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "brand topbar"
    "sidebar main";
  min-height: 100vh;
}

.admin-brand {
  grid-area: brand;
  background: var(--vos-surface);
  border-right: 1px solid var(--vos-line);
  border-bottom: 1px solid var(--vos-line);
  display: flex;
  align-items: center;
  padding: 0 1.125rem;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 51;
}
.admin-brand a {
  font-family: var(--vos-serif);
  font-size: var(--typo-abschnitt);
  color: var(--vos-tinte-dunkel);
  font-weight: var(--typo-stark);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.admin-brand a:hover { color: var(--vos-bordeaux); }
.admin-brand__mark {
  width: 28px; height: 28px;
  background: var(--vos-tinte);
  color: #fff;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--vos-serif);
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  flex-shrink: 0;
}
.admin-brand__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-version {
  font-family: var(--vos-mono);
  font-size: var(--typo-klein);
  color: var(--vos-text-faint);
  margin-left: auto;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.admin-topbar {
  grid-area: topbar;
  background: var(--vos-surface);
  border-bottom: 1px solid var(--vos-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
.admin-topbar__crumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.admin-topbar__crumbs a { color: var(--vos-text-mute); }
.admin-topbar__crumbs a:hover { color: var(--vos-tinte); }
.admin-topbar__crumb-sep { color: var(--vos-text-faint); }
.admin-topbar__crumb-current { color: var(--vos-text); font-weight: var(--typo-stark); }

.admin-topbar__user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--typo-text);
  color: var(--vos-text-soft);
}
.admin-topbar__user-name { font-weight: var(--typo-stark); }
.admin-topbar__user-role {
  font-size: var(--typo-klein);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vos-text-mute);
  background: var(--vos-surface-sub);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}
.admin-topbar__logout-form { margin: 0; padding: 0; display: inline; }
.admin-topbar__logout {
  background: transparent;
  border: 0;
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-family: inherit;
}
.admin-topbar__logout:hover { color: var(--vos-bordeaux); background: var(--vos-bordeaux-soft); }

.admin-sidebar {
  grid-area: sidebar;
  background: var(--vos-surface);
  border-right: 1px solid var(--vos-line);
  padding: 1rem 0.5rem 1.5rem;
  overflow-y: auto;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
}
.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.admin-nav__group { display: flex; flex-direction: column; gap: 1px; }
.admin-nav__divider {
  font-size: var(--typo-klein);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vos-text-faint);
  padding: 1rem 0.875rem 0.4rem;
  font-weight: var(--typo-stark);
}
.admin-nav__group:first-child .admin-nav__divider { padding-top: 0.25rem; }

/* ── v0.9.10.0 — Klappbare Nav-Gruppen (Akkordion) ──────────────────
 *
 * Klickbarer Header ersetzt den statischen <div class="admin-nav__divider">.
 * Visuell weiterhin Section-Label, jetzt mit hover/focus/chevron-Affordanz.
 *
 *   .admin-nav__group-header   — der <button> (Tastatur-bedienbar)
 *   .admin-nav__group-label    — der Text („Programm", „Geschäft", …)
 *   .admin-nav__group-chevron  — das SVG ▾ rechts, rotiert bei offen
 *   .admin-nav__group-items    — der DIV-Container mit den <a>-Links
 *
 * Open/Close: Server rendert hidden-Attribut bei zu, JS toggelt es.
 * `[hidden]` bekommt vom UA `display: none`, also kein extra CSS nötig.
 * Chevron-Rotation passiert über aria-expanded am Header.
 *
 * Reduced-motion: keine Transition auf chevron-Rotation.
 */
.admin-nav__group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  font-size: var(--typo-klein);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vos-text-faint);
  padding: 1rem 0.875rem 0.4rem;
  font-weight: var(--typo-stark);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: color 0.1s ease, background 0.1s ease;
}
.admin-nav__group:first-child .admin-nav__group-header { padding-top: 0.25rem; }
.admin-nav__group-header:hover {
  color: var(--vos-text-mute);
  background: var(--vos-surface-sub);
}
.admin-nav__group-header:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
}
.admin-nav__group-label { line-height: 1; }
.admin-nav__group-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vos-text-faint);
  transition: transform 0.15s ease;
  transform: rotate(-90deg); /* zugeklappt: nach rechts zeigend */
}
.admin-nav__group-header[aria-expanded="true"] .admin-nav__group-chevron {
  transform: rotate(0deg); /* aufgeklappt: nach unten zeigend */
}
.admin-nav__group-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* v0.16.7.2 — HARDCORE-FIX: das `display: flex` oben überschreibt das
   native [hidden]{display:none}-Verhalten des Browsers, weil .admin-nav__group-items
   und [hidden] gleiche Spezifität haben und Author-CSS gegen User-Agent-
   CSS gewinnt. Folge: Akkordeon-Gruppen klappten NIE wirklich zu, auch
   wenn aria-expanded und hidden korrekt gesetzt waren. Das war über
   viele Versionen hinweg ein stiller Bug. Jetzt mit !important explizit. */
.admin-nav__group-items[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .admin-nav__group-chevron { transition: none; }
}

/* Graceful Fallback ohne JS: dann sind alle Gruppen offen.
 * Wenn JS läuft, setzt admin.js eine .js-ready-Klasse am <html> —
 * davor müssen alle items sichtbar bleiben, damit Nutzer auch ohne
 * JS die Sidebar bedienen können. Mit dem Fix oben braucht es jetzt
 * eine Override-Regel, die das [hidden] in diesem Fall ignoriert. */
html:not(.js-ready) .admin-nav__group-items[hidden] { display: flex !important; }
html:not(.js-ready) .admin-nav__group-chevron { display: none; }

.admin-nav a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.475rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--vos-text-soft);
  font-size: var(--typo-text);
  font-weight: var(--typo-normal);
  transition: background 0.1s ease, color 0.1s ease;
  position: relative;
  /* v0.19.2.0 — admin-legacy.css setzte hier zusätzlich `border-left:
     3px solid transparent`, das im Active-Zustand auf Bordeaux umschwenkte.
     Zusammen mit dem ::before-Balken unten ergab das einen doppelten
     (6 px) Akzent-Block, der wie ein hängender Hover wirkte. Explizit
     den Legacy-Border deaktivieren — der ::before unten ist die einzige
     Quelle der Active-Markierung. */
  border-left: 0;
}
.admin-nav a:hover {
  background: var(--vos-surface-sub);
  color: var(--vos-tinte-dunkel);
}
.admin-nav a.active {
  background: var(--vos-tinte-soft);
  color: var(--vos-tinte-dunkel);
  font-weight: var(--typo-stark);
}
.admin-nav a.active::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  /* v0.19.2.0 — vorher --vos-tinte (Navy), passte nicht zur Akzentfarbe
     und doppelte sich mit dem Legacy-Bordeaux-Border. Jetzt Bordeaux in
     gedämpfter Sättigung als einzige Active-Markierung neben dem
     leichten Tint-Hintergrund. */
  background: var(--vos-bordeaux);
  opacity: 0.7;
  border-radius: 0 2px 2px 0;
}
.admin-nav__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.85;
}
.admin-nav__icon svg { width: 100%; height: 100%; }

/* ── v0.9.8.0 — Werkstatt-Gruppe als normaler Sidebar-Punkt am Fuß ──
   Werkstatt war bisher ein Aufklapp-Menü mit acht versteckten
   Einzel-Links. Jetzt: ein Sidebar-Link → /admin/werkstatt → eine
   Kachel-Landing. Die `--werkstatt`-Variante des nav-group bekommt
   nur einen Top-Border und mehr Luft drüber, sonst identisch zur
   normalen Gruppe. */
.admin-nav__group--werkstatt {
  margin-top: 1.5rem;
  border-top: 1px solid var(--vos-line);
  padding-top: 0.5rem;
}

.admin-main {
  grid-area: main;
  padding: 1.5rem 2rem 3rem;
  min-width: 0;
  max-width: 1400px;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════
 * 4. PAGE HEADER
 * ══════════════════════════════════════════════════════════════════ */
.admin-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--vos-line-soft);
}
.admin-header h1 { margin: 0 0 0.15rem; font-size: var(--typo-titel); color: var(--vos-tinte-dunkel); }
.admin-header__sub { color: var(--vos-text-mute); font-size: var(--typo-text); margin: 0; }
.admin-header__actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
.admin-header__title { flex: 1; min-width: 0; }

/* 0.37.0.0 — Rückweg über dem Titel. Ersetzt die vier Orte, an denen
   „zurück" vorher stand (Knopf in einer Karte, Link in der
   Werkzeugleiste, Knopf rechts oben, Textlink im Inhalt). */
.admin-header__back {
  display: inline-block;
  margin: 0 0 0.3rem;
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  text-decoration: none;
}
.admin-header__back:hover { color: var(--vos-tinte); text-decoration: underline; }
.admin-header__actions .kopf-aktion-form { display: inline-flex; margin: 0; }

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--vos-line-soft);
}
.page-header h1 { margin: 0 0 0.15rem; font-size: var(--typo-titel); color: var(--vos-tinte-dunkel); }
.page-header__sub { color: var(--vos-text-mute); font-size: var(--typo-text); margin: 0; }
.page-header__actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }

.admin-content { width: 100%; }

/* ══════════════════════════════════════════════════════════════════
 * 5. KOMPONENTEN — Panel / Card
 * ══════════════════════════════════════════════════════════════════ */
.panel, .vos-card, .card {
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.25rem;
}
.panel > h2:first-child, .vos-card > h2:first-child {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-family: var(--vos-serif);
  font-size: var(--typo-abschnitt);
  color: var(--vos-tinte-dunkel);
}
.panel > h3:first-child { margin-top: 0; }
.panel--quiet { background: var(--vos-surface-2); border-color: var(--vos-line-soft); }
.panel--accent { border-left: 3px solid var(--vos-tinte); border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.liste {
  list-style: none;
  padding: 0;
  margin: 0;
}
.liste li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--vos-line-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.liste li:last-child { border-bottom: 0; }
.liste a { font-weight: var(--typo-stark); }

/* ══════════════════════════════════════════════════════════════════
 * 6. KACHEL-GRID (Dashboard)
 * ══════════════════════════════════════════════════════════════════ */
.kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.875rem;
  margin: 0 0 1.5rem;
}
.kachel {
  display: flex;
  flex-direction: column;
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-md);
  padding: 1rem 1.125rem;
  color: var(--vos-text);
  text-decoration: none;
  transition: border-color 0.12s ease;
}
.kachel:hover {
  border-color: var(--vos-tinte-line);
  text-decoration: none;
}
.kachel__zahl {
  font-family: var(--vos-serif);
  font-size: var(--typo-titel);
  font-weight: var(--typo-stark);
  color: var(--vos-tinte-dunkel);
  line-height: 1.1;
  margin-bottom: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.kachel__label {
  font-size: var(--typo-text);
  color: var(--vos-text);
  font-weight: var(--typo-stark);
  margin-bottom: 0.1rem;
}
.kachel__sub {
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
}

.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 900px) { .grid-2col { grid-template-columns: minmax(0, 1fr); } }

/* ══════════════════════════════════════════════════════════════════
 * 7. TABELLEN
 * ══════════════════════════════════════════════════════════════════ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--typo-text);
}
.data-table thead th {
  text-align: left;
  font-weight: var(--typo-stark);
  font-size: var(--typo-klein);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vos-text-mute);
  background: var(--vos-surface-2);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--vos-line);
}
.data-table tbody td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--vos-line-soft);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--vos-surface-2); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.muted, .data-table td .muted { color: var(--vos-text-mute); }
.data-table--bare {
  border: 0;
  background: transparent;
}
.data-table--bare thead th { background: transparent; }

/* ══════════════════════════════════════════════════════════════════
 * 8. BUTTONS
 * ══════════════════════════════════════════════════════════════════ */
.btn, button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.475rem 0.95rem;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  font-family: inherit;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  min-height: 36px;
}
.btn:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary, .btn--primary {
  background: var(--vos-tinte);
  color: #fff;
  border-color: var(--vos-tinte);
}
.btn-primary:hover, .btn--primary:hover {
  background: var(--vos-tinte-dunkel);
  border-color: var(--vos-tinte-dunkel);
  color: #fff;
}

.btn-sec, .btn--secondary, .btn-secondary {
  background: var(--vos-surface);
  color: var(--vos-text);
  border-color: var(--vos-line-strong);
}
.btn-sec:hover, .btn--secondary:hover, .btn-secondary:hover {
  background: var(--vos-surface-sub);
  border-color: var(--vos-tinte-line);
  color: var(--vos-tinte-dunkel);
}

.btn-tertiary, .btn--tertiary, .btn-link {
  background: transparent;
  color: var(--vos-tinte);
  border-color: transparent;
  padding: 0.475rem 0.5rem;
}
.btn-tertiary:hover, .btn--tertiary:hover, .btn-link:hover {
  background: var(--vos-tinte-soft);
  color: var(--vos-tinte-dunkel);
}

.btn-accent, .btn--accent {
  background: var(--vos-bordeaux);
  color: #fff;
  border-color: var(--vos-bordeaux);
}
.btn-accent:hover, .btn--accent:hover {
  background: var(--vos-bordeaux-tief);
  border-color: var(--vos-bordeaux-tief);
  color: #fff;
}

.btn-danger, .btn--danger {
  background: var(--vos-surface);
  color: var(--vos-danger);
  border-color: var(--vos-danger-line);
}
.btn-danger:hover, .btn--danger:hover {
  background: var(--vos-danger-soft);
  color: var(--vos-danger);
  border-color: var(--vos-danger);
}

.btn-sm, .btn--sm { padding: 0.3rem 0.65rem; font-size: var(--typo-klein); min-height: 28px; }
.btn-lg, .btn--lg { padding: 0.7rem 1.4rem; font-size: var(--typo-text); min-height: 44px; }
.btn-icon { padding: 0.5rem; min-height: 36px; width: 36px; }

.btn-group {
  display: inline-flex;
  border: 1px solid var(--vos-line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.btn-group .btn {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--vos-line);
  min-height: 32px;
}
.btn-group .btn:last-child { border-right: 0; }
.btn-group .btn.is-active {
  background: var(--vos-tinte-soft);
  color: var(--vos-tinte-dunkel);
}

/* ══════════════════════════════════════════════════════════════════
 * 9. FORMS
 * ══════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: var(--typo-text);
  line-height: 1.4;
  color: var(--vos-text);
  background: var(--vos-surface);
  border: 1px solid var(--vos-line-strong);
  border-radius: var(--radius-sm);
  min-height: 36px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:hover:not(:focus):not([disabled]),
select:hover:not(:focus):not([disabled]),
textarea:hover:not(:focus):not([disabled]) {
  border-color: var(--vos-tinte-line);
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--vos-tinte);
  box-shadow: var(--shadow-focus);
}
textarea { min-height: 96px; resize: vertical; }
input[type="color"] {
  padding: 4px;
  width: 56px;
  min-height: 36px;
}
input[disabled], select[disabled], textarea[disabled] {
  background: var(--vos-surface-sub);
  color: var(--vos-text-mute);
  cursor: not-allowed;
}

.form-edit {
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 0 0 1.25rem;
}
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-grid .row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.form-grid .row > label {
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  color: var(--vos-text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.form-grid .row > label .field-hint {
  margin-left: auto;
}
.field-help, .form-help {
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  line-height: 1.45;
}
.field-help--warn { color: var(--vos-warn); }
.field-help--danger { color: var(--vos-danger); }

.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vos-line-soft);
}
.form-actions__spacer { flex: 1; }

.field-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--vos-surface-sub);
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
  cursor: help;
  border: 1px solid var(--vos-line);
  font-weight: var(--typo-stark);
  font-style: normal;
  line-height: 1;
  font-family: var(--vos-sans);
}
.field-hint:hover {
  background: var(--vos-tinte-soft);
  color: var(--vos-tinte);
  border-color: var(--vos-tinte-line);
}

/* ══════════════════════════════════════════════════════════════════
 * 10. TOOLBAR / FILTERBAR
 * ══════════════════════════════════════════════════════════════════ */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}
.toolbar__suche {
  display: flex;
  flex: 1;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}
.toolbar__suche input[type="search"],
.toolbar__suche input[type="text"] { flex: 1; min-width: 180px; }
.toolbar__suche select { min-width: 140px; max-width: 200px; }
.toolbar__spacer { flex: 1; }
.toolbar > form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0; }
.toolbar label { font-size: var(--typo-text); color: var(--vos-text-soft); font-weight: var(--typo-stark); }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.view-toggle-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.875rem;
}
.view-toggle {
  display: inline-flex;
  background: var(--vos-surface);
  border: 1px solid var(--vos-line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--vos-line);
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--typo-stark);
}
.view-toggle__btn:last-child { border-right: 0; }
.view-toggle__btn:hover { background: var(--vos-surface-sub); color: var(--vos-text); }
.view-toggle__btn[aria-pressed="true"] {
  background: var(--vos-tinte-soft);
  color: var(--vos-tinte-dunkel);
}

/* ══════════════════════════════════════════════════════════════════
 * 11. BADGES
 * ══════════════════════════════════════════════════════════════════ */
/* 0.44.2.0 — dritte `.badge`-Grundregel entfallen, siehe oben. Mit ihr
   der farbige Punkt `.badge::before`: er braucht `inline-flex`, und die
   vierte Regel setzte `inline-block` — er hat nie gerendert. Wieder
   eingeführt wird er nicht: die Marke sagt ihren Zustand im Wort und in
   der Farbe, ein Punkt davor ist eine dritte Mitteilung derselben Sache.
   Die Farbvarianten darunter bleiben. */

.badge-live, .badge--live, .badge-success, .badge--success,
.badge-publiziert, .badge--publiziert, .badge-ok, .badge--ok,
.badge-aktiv, .badge--aktiv {
  background: var(--vos-success-soft);
  color: var(--vos-success);
}
.badge-entwurf, .badge--entwurf, .badge-draft, .badge--draft,
.badge-inarbeit, .badge--inarbeit {
  background: var(--vos-surface-sub);
  color: var(--vos-text-mute);
}
.badge-warn, .badge--warn, .badge-warning, .badge--warning {
  background: var(--vos-warn-soft);
  color: var(--vos-warn);
}
.badge-danger, .badge--danger, .badge-error, .badge--error,
.badge-fehler, .badge--fehler {
  background: var(--vos-danger-soft);
  color: var(--vos-danger);
}
.badge-info, .badge--info, .badge-update, .badge--update {
  background: var(--vos-info-soft);
  color: var(--vos-info);
}
.badge-create { background: var(--vos-success-soft); color: var(--vos-success); }
.badge-update { background: var(--vos-info-soft); color: var(--vos-info); }
.badge-delete { background: var(--vos-danger-soft); color: var(--vos-danger); }
.badge-publish { background: var(--vos-success-soft); color: var(--vos-success); }
.badge-unpublish { background: var(--vos-warn-soft); color: var(--vos-warn); }
.badge--plain::before { display: none; }
.badge--plain { padding-left: 0.6rem; }

/* ══════════════════════════════════════════════════════════════════
 * 12. ALERTS
 * ══════════════════════════════════════════════════════════════════ */
.alert {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--vos-line);
  background: var(--vos-surface);
  margin: 0 0 1rem;
  font-size: var(--typo-text);
  line-height: 1.5;
}
.alert__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.alert__icon svg { width: 100%; height: 100%; }
.alert__body { flex: 1; min-width: 0; }
/* 0.39.1.0 — Hinweise ohne .alert__body (Text direkt im Kasten) als Block
   setzen. Sonst wird jedes Inline-Stück zu einer eigenen Flex-Spalte — so
   stand der Zentralregulierungs-Hinweis in der Bestellung in vier schmalen
   Spalten nebeneinander. */
.alert:not(:has(> .alert__body)) { display: block; }
.alert__body strong { font-weight: var(--typo-stark); }
.alert a { font-weight: var(--typo-stark); }
.alert--info {
  background: var(--vos-info-soft);
  border-color: var(--vos-info-line);
  color: var(--vos-tinte-dunkel);
}
.alert--info .alert__icon { color: var(--vos-info); }
.alert--warn, .alert--warning {
  background: var(--vos-warn-soft);
  border-color: var(--vos-warn-line);
  color: #6e4400;
}
.alert--warn .alert__icon { color: var(--vos-warn); }
.alert--success {
  background: var(--vos-success-soft);
  border-color: var(--vos-success-line);
  color: var(--vos-success);
}
.alert--success .alert__icon { color: var(--vos-success); }
.alert--danger, .alert--error {
  background: var(--vos-danger-soft);
  border-color: var(--vos-danger-line);
  color: var(--vos-danger);
}
.alert--danger .alert__icon { color: var(--vos-danger); }

.flash { margin: 0 0 1rem; }

/* ══════════════════════════════════════════════════════════════════
 * 13. MEDIA-PICKER
 * ══════════════════════════════════════════════════════════════════ */
.media-picker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.media-picker__preview {
  width: 90px;
  height: 64px;
  background: var(--vos-surface-sub);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.media-picker__preview img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}
.media-picker__preview:empty::before {
  content: 'kein Bild';
  font-size: var(--typo-klein);
  color: var(--vos-text-faint);
}

/* ══════════════════════════════════════════════════════════════════
 * 14. BÜCHER-LISTE / KARTEN
 * ══════════════════════════════════════════════════════════════════ */
.book-list { display: flex; flex-direction: column; gap: 0.5rem; }
.book-list[data-view-mode="liste"] .book-list__cards { display: none; }
.book-list[data-view-mode="cards"] .book-list__liste { display: none; }

/* v0.8.0 — generische View-Toggle-Sichtbarkeit. Greift für alle
   Listen-Komponenten mit dem Naming-Konvention *-list__liste /
   *-list__cards. Erspart View-spezifische Regeln (author-list,
   themes-list, customers-list, testimonials-list, media-list, …). */
[data-view-mode="liste"] [class*="-list__cards"],
[data-view-mode="liste"] [class*="_list__cards"] { display: none !important; }
[data-view-mode="cards"] [class*="-list__liste"],
[data-view-mode="cards"] [class*="_list__liste"] { display: none !important; }
.book-list__liste { display: flex; flex-direction: column; gap: 0.4rem; }
.book-row {
  display: grid;
  grid-template-columns: 56px 1fr 120px 110px 40px;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-md);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.book-row:hover { border-color: var(--vos-tinte-line); background: var(--vos-surface-2); }
.book-row__cover {
  width: 48px;
  height: 64px;
  background: var(--vos-surface-sub);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vos-text-faint);
  font-size: var(--typo-klein);
  overflow: hidden;
}
.book-row__cover img { width: 100%; height: 100%; object-fit: cover; }
.book-row__title { font-weight: var(--typo-stark); color: var(--vos-text); margin: 0; font-size: var(--typo-text); }
.book-row__meta { color: var(--vos-text-mute); font-size: var(--typo-klein); margin-top: 2px; }
.book-row__date { color: var(--vos-text-mute); font-size: var(--typo-klein); text-align: right; }
.book-row__actions { text-align: right; }
.book-list__cards {
  /* v0.19.4.1 — Hotfix: Doppel-Grid-Verschachtelung aufheben.
     In `app/Views/admin/books/index.php` ist die Struktur:
       <div class="book-list__cards">     ← dieser Container
         <div class="book-cards">         ← der HIER das Grid macht
           <a class="book-card">…</a> …
         </div>
       </div>
     Vor v0.19.4.1 hatten BEIDE Container `display: grid` mit
     `minmax(180px, 320px)`. Der äußere bekam dadurch genau einen
     Track (sein einziges Kind war der innere Wrapper), maximal
     320px breit. Der innere Grid hatte damit nur 320px Platz und
     konnte ebenfalls nur EINE Spalte rendern → alle Buch-Karten
     untereinander statt nebeneinander.
     Der äußere Container ist hier nur ein Visibility-Wrapper für
     das View-Toggle (Liste/Karten). Er bekommt jetzt block und
     überlässt das eigentliche Layout dem inneren `.book-cards`. */
  display: block;
}
.book-card {
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--vos-text);
  transition: border-color 0.12s ease;
}
.book-card:hover { border-color: var(--vos-tinte-line); }

/* v0.19.4.0 — Welle 3 P7: Defensive Haertung gegen sporadische
   „eine Karte ist groesser als die anderen"-Anomalie auf der
   Buecher-Card-View. Beobachtet wurde, dass nach Sidebar-Interaktionen
   oder Cover-Picker-Eingriffen einzelne Karten visuell aus der Reihe
   tanzen. Die wahrscheinlichsten Ursachen sind:
     (a) Grid-Track-Expansion durch Content-min-width — Karte wird breiter
         als ihre Mitspieler, weil ein langer Buchtitel/ISBN/Untertitel
         min-content > 180px liefert.
     (b) Image-Intrinsic-Sizing waehrend des Lade-Vorgangs — bevor das
         Bild fertig geladen ist, fallen Browser auf intrinsische
         Dimensionen zurueck, und ein hochformatiges Cover mit nativer
         Hoehe > aspect-ratio-Wunschhoehe drueckt die Box auf.
     (c) Object-fit-Konflikt mit fehlendem min-height: 0 auf Flexbox-
         Kindern.
   Daher: min-width:0 als Pflicht-Pendant fuer Grid-Items, max-width 100%
   um sicher in der Grid-Track zu bleiben, und am Cover ein hartes
   block-Element-Sizing plus min-height:0 fuer Flex-Container-Faelle. */
.book-card { min-width: 0; max-width: 100%; }
.book-card__cover {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  /* aspect-ratio greift jetzt verlaesslich, weil die Box nicht mehr
     durch Content-min-width oder Image-Intrinsic-Sizing aufgeblasen
     werden kann. */
}
.book-card__cover img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  /* width/height: 100% + object-fit:cover bleiben aus dem .book-card__cover
     img Block oben (Zeile 1186). max-width/max-height haerten zusaetzlich. */
}
.book-card__cover {
  aspect-ratio: 3 / 4;
  background: var(--vos-surface-sub);
  border-radius: var(--radius-sm);
  margin-bottom: 0.625rem;
  overflow: hidden;
}
.book-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.book-card__title { font-weight: var(--typo-stark); font-size: var(--typo-text); margin-bottom: 0.2rem; }
.book-card__meta { color: var(--vos-text-mute); font-size: var(--typo-klein); margin-bottom: 0.5rem; }

/* ══════════════════════════════════════════════════════════════════
 * 15. EMPTY-STATE
 * ══════════════════════════════════════════════════════════════════ */
.empty {
  background: var(--vos-surface);
  border: 1px dashed var(--vos-line-strong);
  border-radius: var(--radius-md);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--vos-text-mute);
}
.empty__title {
  color: var(--vos-text);
  font-family: var(--vos-serif);
  font-size: var(--typo-abschnitt);
  margin: 0 0 0.4rem;
}
.empty__body { font-size: var(--typo-text); margin: 0 0 1rem; }
.empty__actions { display: inline-flex; gap: 0.5rem; }

/* ══════════════════════════════════════════════════════════════════
 * 16. SECTION-HEADER (innerhalb Forms)
 * ══════════════════════════════════════════════════════════════════ */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--vos-line-soft);
}
.section-header h2, .section-header h3 { margin: 0; }

/* ══════════════════════════════════════════════════════════════════
 * 17. VERLAUF-LISTE (Audit-Log neu)
 * ══════════════════════════════════════════════════════════════════ */
.verlauf-liste {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.verlauf-eintrag {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--vos-line-soft);
  align-items: start;
}
.verlauf-eintrag:last-child { border-bottom: 0; }
.verlauf-eintrag:hover { background: var(--vos-surface-2); }
.verlauf-eintrag__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.verlauf-eintrag__icon svg { width: 14px; height: 14px; }
.verlauf-eintrag__icon--create { background: var(--vos-success-soft); color: var(--vos-success); }
.verlauf-eintrag__icon--update { background: var(--vos-info-soft); color: var(--vos-info); }
.verlauf-eintrag__icon--delete { background: var(--vos-danger-soft); color: var(--vos-danger); }
.verlauf-eintrag__icon--publish { background: var(--vos-success-soft); color: var(--vos-success); }
.verlauf-eintrag__icon--unpublish { background: var(--vos-warn-soft); color: var(--vos-warn); }
.verlauf-eintrag__main { min-width: 0; }
.verlauf-eintrag__title {
  font-size: var(--typo-text);
  color: var(--vos-text);
  line-height: 1.4;
}
.verlauf-eintrag__title strong { font-weight: var(--typo-stark); }
.verlauf-eintrag__diff {
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
  margin-top: 2px;
  line-height: 1.4;
}
.verlauf-eintrag__time {
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
  white-space: nowrap;
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════════
 * 18. STAT-ROW (KI-Übersicht u.ä.)
 * ══════════════════════════════════════════════════════════════════ */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.875rem;
  margin: 0 0 1.5rem;
}
.stat-card {
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-md);
  padding: 1rem 1.125rem;
}
.stat-card__label {
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.stat-card__value {
  font-family: var(--vos-serif);
  font-size: var(--typo-titel);
  color: var(--vos-tinte-dunkel);
  font-weight: var(--typo-stark);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-card__sub {
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  margin-top: 0.3rem;
}

/* ══════════════════════════════════════════════════════════════════
 * 19. SETTINGS-BEREICHS-TABS
 * ══════════════════════════════════════════════════════════════════ */
.settings-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--vos-line);
  flex-wrap: wrap;
}
.settings-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.9rem;
  font-size: var(--typo-text);
  color: var(--vos-text-mute);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid transparent;
  border-bottom: 0;
  margin-bottom: -1px;
  font-weight: var(--typo-stark);
}
.settings-tabs a:hover { color: var(--vos-text); }
.settings-tabs a.active {
  background: var(--vos-surface);
  color: var(--vos-tinte-dunkel);
  border-color: var(--vos-line);
}

/* ══════════════════════════════════════════════════════════════════
 * 20. RESPONSIVE
 * ══════════════════════════════════════════════════════════════════ */
/* 0.36.7.0: Unter 900 px ist die Navigation eine ausklappbare Leiste
   (Abschnitt MOBIL-NAVIGATION am Dateiende). Der frühere 56-px-Icon-
   Streifen verlor die Gruppen-Einträge und machte die Seite zu breit. */
@media (max-width: 640px) {
  .admin-header { flex-direction: column; align-items: flex-start; }
  .admin-header__actions { width: 100%; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar__suche { width: 100%; }
  .book-row { grid-template-columns: 48px 1fr; }
  .book-row__date, .book-row__actions, .book-row .badge { grid-column: 2; }
}

/* ══════════════════════════════════════════════════════════════════
 * 21. UTILITIES
 * ══════════════════════════════════════════════════════════════════ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-mute { color: var(--vos-text-mute); }
.text-success { color: var(--vos-success); }
.text-warn { color: var(--vos-warn); }
.text-danger { color: var(--vos-danger); }
.text-tinte { color: var(--vos-tinte); }
.text-bordeaux { color: var(--vos-bordeaux); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.flex { display: flex; }
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-gap-1 { gap: 0.5rem; }
.flex-gap-2 { gap: 1rem; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .admin-sidebar, .admin-topbar, .admin-brand, .admin-header__actions, .toolbar { display: none; }
  .admin-wrap { display: block; }
  .admin-main { padding: 0; }
}

/* ══════════════════════════════════════════════════════════════════
 * 22. LEGACY-KLASSEN (aus v0.4-v0.7 — Views nutzen sie noch direkt)
 *     Diese Klassen waren in der alten admin.css definiert und
 *     fehlen v0.8.0 sonst — ohne sie zerfallen Bücher-Cards,
 *     Featured-Sterne und Sonder-Badges.
 * ══════════════════════════════════════════════════════════════════ */

/* Status-Badges, weitere Varianten */
.badge--archiv,   .badge-archiv     { background: var(--vos-papier-tief); color: var(--vos-text-mute); }
.badge--neu,      .badge-neu        { background: var(--vos-tinte); color: #fff; }
.badge--neu::before, .badge-neu::before { background: #fff; opacity: 0.7; }
.badge--featured, .badge-featured   { background: var(--vos-bordeaux); color: #fff; }
.badge--featured::before, .badge-featured::before { background: #fff; opacity: 0.85; }
.badge--ok                          { background: var(--vos-success-soft); color: var(--vos-success); }
.badge--mute                        { background: var(--vos-surface-sub); color: var(--vos-text-mute); }
.badge--gross                       { padding: 0.32em 0.85em; font-size: var(--typo-text); font-weight: var(--typo-stark); }
.badge--addon                       { background: var(--vos-info-soft);    color: var(--vos-info); }
.badge--bestseller                  { background: var(--vos-bordeaux-soft); color: var(--vos-bordeaux); }
.badge--bestseller::before          { background: var(--vos-bordeaux); }
.badge--geplant                     { background: var(--vos-surface-sub); color: var(--vos-text-mute); }
.badge--spitzentitel                { background: var(--vos-gold-hell);   color: var(--vos-tinte-dunkel); }
.badge--spitzentitel::before        { background: var(--vos-tinte-dunkel); }
.badge--veroeffentlicht             { background: var(--vos-success-soft); color: var(--vos-success); }
.badge--aktiv                       { background: var(--vos-success-soft); color: var(--vos-success); }
.badge--verbraucht                  { background: var(--vos-surface-sub); color: var(--vos-text-mute); }
.badge--issued                      { background: var(--vos-info-soft);    color: var(--vos-info); }

/* book-cards Grid (Welle: ältere Books-View-Variante) — neben book-list__cards */
.book-cards {
  display: grid;
  /* v0.19.5.1 — Max-Cap von 320px auf 240px gesenkt. Bei typischer
     Admin-Content-Breite (Viewport 1440px minus Sidebar ~280px minus
     Container-Padding) blieb mit dem 320px-Cap nur Platz für 3
     Karten pro Reihe. 240px ist defensiv genug, dass bei breiteren
     Viewports 5–7 Karten reinpassen und bei schmalen Viewports
     (~800px Content) immer noch 4. Die ursprüngliche v0.19.3.0-
     Intention bleibt erhalten: `auto-fill` (nicht `auto-fit`) lässt
     leere Tracks leer, statt eine einzelne Karte auf Container-
     Breite zu ziehen — der Cap ist nur das Zusatz-Sicherheitsnetz. */
  grid-template-columns: repeat(auto-fill, minmax(180px, 240px));
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}

/* book-card Erweiterungen (Cover-Overlay-Pattern aus v0.7) */
.book-card { position: relative; }
.book-card__cover { position: relative; }
.book-card__no-cover {
  font-size: var(--glyph-gross);
  opacity: 0.25;
  color: var(--vos-text-faint);
}
.book-card__featured {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  background: var(--vos-bordeaux);
  color: #fff;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--typo-text);
  z-index: 1;
}
.book-card__status {
  position: absolute;
  bottom: 0.5rem; left: 0.5rem;
  z-index: 1;
}
.book-card__body {
  padding: 0.65rem 0;
  display: flex; flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}
.book-card__subtitle {
  font-size: var(--typo-klein);
  color: var(--vos-text-soft);
  font-style: italic;
}
.book-card__meta {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  margin-top: auto;
}
.book-card__bottom {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--vos-line-soft);
}
.book-card__preis {
  font-weight: var(--typo-stark);
  font-size: var(--typo-text);
  color: var(--vos-bordeaux);
  font-variant-numeric: tabular-nums;
}
.book-card__bestand {
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
}

/* td-actions (Tabellen-Aktionsspalte rechts) */
.td-actions {
  text-align: right;
  white-space: nowrap;
}
.td-actions .btn { margin-left: 0.25rem; }

/* kv (Key/Value-Liste, Definitionsliste mit zwei Spalten) */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  font-size: var(--typo-text);
}
.kv dt { color: var(--vos-text-mute); font-weight: var(--typo-stark); }
.kv dd { margin: 0; color: var(--vos-text); }

/* payment-list (Bestelldetails-Zahlungshistorie) */
.payment-list { list-style: none; margin: 0; padding: 0; font-size: var(--typo-text); }
.payment-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--vos-line-soft);
}
.payment-list li:last-child { border-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════
 *  v0.9.8.0 — UX-WELLE 1: KACHELN + DICHTERES FORMULAR-LAYOUT
 *
 *  Drei Bausteine:
 *    1. Tile-Grid für die Werkstatt- und Einstellungen-Landings
 *    2. 2-spaltige Form-Grids auf Desktop (war 1-spaltig stack)
 *    3. Sticky Tab-Navigation in langen Edit-Formularen
 * ══════════════════════════════════════════════════════════════════ */

/* ── 1. Kachel-Grid ──────────────────────────────────────────────── */
/* ── Tile-Section (v0.19.2.0) ─────────────────────────────────────────
   Gruppen-Wrapper für Kachel-Übersichten. Erlaubt mehrere Tile-Grids
   auf einer Seite, jeweils mit eigener Überschrift und Kurzbeschreibung.
   Eingeführt für /admin/einstellungen, wo die 35 Settings-Sektionen
   nach „Geschäft / Layout / Technik" gegliedert werden. */
.tile-section {
  margin: 0 0 1.75rem;
}
.tile-section:last-child {
  margin-bottom: 0;
}
.tile-section__head {
  margin: 0 0 0.7rem;
}
.tile-section__title {
  margin: 0 0 0.15rem;
  font-size: var(--typo-abschnitt);
  font-weight: var(--typo-stark);
  color: var(--vos-tinte-dunkel);
  letter-spacing: 0.005em;
}
.tile-section__sub {
  margin: 0;
  font-size: var(--typo-text);
  color: var(--vos-text-mute);
  line-height: 1.4;
}
/* Innerhalb einer Section braucht das Grid keinen zusätzlichen Bottom-
   Margin — Section selbst trägt den Abstand. */
.tile-section .tile-grid {
  margin-bottom: 0;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.25rem 1.15rem;
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
  min-height: 7rem;
}
.tile:hover {
  border-color: var(--vos-tinte);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.08);
}
.tile:focus-visible {
  outline: 2px solid var(--vos-tinte);
  outline-offset: 2px;
}
.tile__icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: var(--vos-tinte);
  margin-bottom: 0.15rem;
}
.tile__icon svg { width: 100%; height: 100%; }
.tile__title {
  font-weight: var(--typo-stark);
  font-size: var(--typo-text);
  color: var(--vos-tinte-dunkel);
  line-height: 1.3;
}
.tile__extern { font-weight: var(--typo-normal); color: var(--vos-text-mute); font-size: var(--typo-klein); }
.tile__sub {
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  line-height: 1.45;
  flex: 1;
}
.tile__meta {
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 0.35rem;
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  background: var(--vos-surface-sub);
  border-radius: 999px;
}

/* ── 2. 2-spaltiges Form-Grid ────────────────────────────────────── */
/*  Override gegenüber dem ursprünglichen .form-grid (Flex-Column-Stack).
   Auf Desktop zwei Spalten, auf mobil eine. Felder mit Textarea oder
   Media-Picker (.media-picker, .vos-quill-wrap) bekommen über :has()
   automatisch volle Breite — sonst werden lange Inhalte zerquetscht.
   Explizite Opt-In-Klasse .row--full erlaubt zusätzlich kontrolliertes
   Aufweiten ohne :has()-Reliance (für Browser ohne :has-Support
   bleibt das kein Bruch, nur weniger schön).  */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.5rem;
}
.form-grid .row { min-width: 0; }  /* prevent grid-blowout bei langen Werten */
.form-grid .row--full,
.form-grid .row:has(textarea),
.form-grid .row:has(.media-picker),
.form-grid .row:has(.vos-quill-wrap),
.form-grid .row:has(.repeater-table),
.form-grid .row:has(.radio-group) {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ── 3. Sticky Tab-Navigation in Edit-Formularen ─────────────────── */
/*  Bei langen Formularen (Autoren, Bücher) scrollt der User nach unten
   und verliert die Tab-Leiste aus dem Blick. Sticky-Position hält sie
   am oberen Rand der Scroll-Area, sobald der User dort hin scrollt.
   Background-Color und kleiner Box-Shadow sorgen dafür, dass die
   sticky Leiste den darunter durchscrollenden Content sauber abdeckt.

   .form-tabs__nav ist die <nav>-Schale im neuen Tab-System,
   .tabs ist der ältere Selektor — beide werden gestützt. */
.form-tabs__nav,
.form-edit .tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--vos-surface);
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--vos-line);
  box-shadow: 0 1px 0 var(--vos-line-soft);
}

/* Form-edit innenpolster: kompakter, damit weniger gescrollt werden muss */
.form-edit { padding: 1.25rem 1.5rem 1.5rem; }

/* ════════════════════════════════════════════════════════════════════
   v0.9.10.1 — Widget-Dashboard
   ════════════════════════════════════════════════════════════════════

   Welle 10 · Teil 2: Drag&Drop-Dashboard mit konfigurierbaren Widgets.

   Aufbau:
     .dashboard-grid              Flex-Container, wrappt Widgets
     .dashboard-widget            einzelne Karte
       .dashboard-widget__header  klickbare Drag-Zone + Titel + Aktionen
       .dashboard-widget__body    Widget-Inhalt
     .dw-breite--voll/halb/drittel  Breiten-Modifier

   Inline-Widget-Komponenten (in Widget-render()):
     .dw-list           Listen-Pattern für Bestellungen/Rechnungen/etc.
     .dw-kpi            Kennzahl-Block (2 KPIs nebeneinander)
     .dw-stacked-bar    Verteilungs-Balken (z.B. Bücherstatus)
     .dw-bookstat       3-Kacheln-Layout für BuecherStatus
     .dw-empty          Empty-State („Alles erledigt")
     .dw-leserstimme    Leserstimmen-Item mit Inline-Aktionen
     .dw-audit__zeile   Audit-Activity-Zeile
     .schnellstart-*    Schnellstart-Button-Grid
*/

.dashboard-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

.dashboard-widget {
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  flex: 1 1 100%;
  min-width: 0; /* damit ellipsis in flex-Kindern klappt */
  display: flex;
  flex-direction: column;
}

/* Breiten-Modifier: feste Anteile minus Gap (1rem = 16px → /2, /3).
   Flex-basis berechnen wir mit calc, damit gap nicht überlauft.
   Auf < 900px alles auf volle Breite (Mobile-First-Style). */
.dw-breite--voll    { flex: 1 1 100%; }
.dw-breite--halb    { flex: 1 1 calc(50% - 0.5rem); }
.dw-breite--drittel { flex: 1 1 calc(33.333% - 0.667rem); }

@media (max-width: 900px) {
  .dw-breite--halb,
  .dw-breite--drittel { flex: 1 1 100%; }
}

.dashboard-widget__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--vos-line-soft);
  background: var(--vos-surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
}

.dashboard-widget__drag {
  color: var(--vos-text-faint);
  cursor: grab;
  user-select: none;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: var(--radius-sm);
  transition: color 0.1s ease, background 0.1s ease;
}
.dashboard-widget__drag:hover { color: var(--vos-text-mute); background: var(--vos-line-soft); }
.dashboard-widget__drag:active { cursor: grabbing; }

.dashboard-widget__icon {
  color: var(--vos-text-mute);
  display: inline-flex;
  align-items: center;
}

.dashboard-widget__title {
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  color: var(--vos-text);
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-widget__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.dashboard-widget__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

/* Sortable-Visualisierung */
.dashboard-widget.sortable-ghost {
  opacity: 0.4;
  background: var(--vos-tinte-soft);
}
.dashboard-widget.sortable-chosen {
  box-shadow: var(--shadow-pop);
  transform: rotate(0.5deg);
}

/* ── Breite-Menü (details/summary) ─────────────────────────────── */
.dw-menu {
  position: relative;
}
.dw-menu__toggle {
  list-style: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  color: var(--vos-text-mute);
  font-size: var(--typo-text);
  background: transparent;
  border: 0;
  transition: background 0.1s ease;
}
.dw-menu__toggle::-webkit-details-marker { display: none; } /* Safari */
.dw-menu__toggle:hover { background: var(--vos-line-soft); color: var(--vos-text); }
.dw-menu[open] .dw-menu__toggle { background: var(--vos-line-soft); color: var(--vos-text); }

.dw-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 160px;
  background: var(--vos-surface);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 4px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dw-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--typo-text);
  color: var(--vos-text);
  cursor: pointer;
  font-family: inherit;
}
.dw-menu__item:hover { background: var(--vos-line-soft); }
.dw-menu__item.is-active {
  background: var(--vos-tinte-soft);
  color: var(--vos-tinte);
  font-weight: var(--typo-stark);
}

/* Inline-Forms in Widget-Headers/Items: kein default Margin/Padding */
.dw-inline-form {
  margin: 0;
  padding: 0;
  display: inline-block;
}

.btn-icon {
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: var(--radius-sm);
  color: var(--vos-text-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s ease, color 0.1s ease;
}
.btn-icon:hover { background: var(--vos-danger-soft); color: var(--vos-danger); }
.btn-icon:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }

/* ── Empty-State ──────────────────────────────────────────────── */
.dashboard-empty {
  background: var(--vos-surface);
  border: 1px dashed var(--vos-line);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--vos-text-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.dw-empty {
  text-align: center;
  padding: 1.5rem 0;
  color: var(--vos-text-mute);
}
.dw-empty__title {
  font-size: var(--typo-abschnitt);
  font-weight: var(--typo-stark);
  color: var(--vos-text);
  margin: 0 0 0.25rem 0;
}
.dw-empty__sub { margin: 0 0 1rem 0; font-size: var(--typo-text); }

/* ── List-Pattern ─────────────────────────────────────────────── */
.dw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dw-list__item {
  border-radius: var(--radius-sm);
  transition: background 0.1s ease;
}
.dw-list__item:hover { background: var(--vos-surface-sub); }
.dw-list__item--warn { background: var(--vos-warn-soft); }
.dw-list__item--warn:hover { background: var(--vos-warn-soft); filter: brightness(0.98); }

.dw-list__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  font-size: var(--typo-text);
}
.dw-list__link:hover { color: var(--vos-text); }
.dw-list__icon { color: var(--vos-text-mute); display: inline-flex; }

.dw-list__primary {
  flex: 1;
  min-width: 0;
  font-weight: var(--typo-stark);
  color: var(--vos-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dw-list__sub {
  flex-basis: 100%;
  order: 10; /* unter primary brechen */
  font-size: var(--typo-klein);
}
.dw-list__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  white-space: nowrap;
}
.dw-list__betrag {
  font-variant-numeric: tabular-nums;
  color: var(--vos-text);
  font-weight: var(--typo-stark);
}

.dw-mehr {
  margin: 0;
  padding: 0.25rem 0.625rem;
}

.dw-footer-link {
  display: block;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--typo-text);
  color: var(--vos-tinte);
  text-decoration: none;
  border-top: 1px solid var(--vos-line-soft);
}
.dw-footer-link:hover { text-decoration: underline; }

/* ── KPI-Block ────────────────────────────────────────────────── */
.dw-kpi {
  display: flex;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--vos-line-soft);
}
.dw-kpi__item {
  flex: 1;
}
.dw-kpi__zahl {
  font-size: var(--typo-titel);
  font-weight: var(--typo-stark);
  font-variant-numeric: tabular-nums;
  color: var(--vos-text);
  line-height: 1.1;
}
.dw-kpi__label {
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.125rem;
}

.dw-kpi-zeile {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--vos-line-soft);
}
.dw-kpi__zahl-klein {
  font-size: var(--typo-abschnitt);
  font-weight: var(--typo-stark);
  font-variant-numeric: tabular-nums;
  color: var(--vos-text);
}
.dw-kpi__label-klein {
  font-size: var(--typo-text);
  color: var(--vos-text-mute);
}

/* ── BuecherStatus-Widget ─────────────────────────────────────── */
.dw-bookstat {
  display: flex;
  gap: 0.5rem;
}
.dw-bookstat__row {
  flex: 1;
  background: var(--vos-surface-sub);
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  transition: background 0.1s ease;
}
.dw-bookstat__row:hover { background: var(--vos-tinte-soft); }
.dw-bookstat__zahl {
  font-size: var(--typo-titel);
  font-weight: var(--typo-stark);
  font-variant-numeric: tabular-nums;
  color: var(--vos-text);
  line-height: 1;
}
.dw-bookstat__label {
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dw-stacked-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--vos-line-soft);
  overflow: hidden;
  display: flex;
}
.dw-stacked-bar__seg {
  height: 100%;
  display: block;
}
.dw-stacked-bar__seg--live    { background: var(--vos-success); }
.dw-stacked-bar__seg--entwurf { background: var(--vos-warn); }
.dw-stacked-bar__seg--rest    { background: var(--vos-text-faint); }

/* ── Schnellstart-Widget ──────────────────────────────────────── */
.schnellstart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.625rem;
}
.schnellstart-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: var(--vos-surface-sub);
  border: 1px solid var(--vos-line-soft);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--vos-text);
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  transition: background 0.1s ease, border-color 0.1s ease, transform 0.05s ease;
}
.schnellstart-btn:hover {
  background: var(--vos-tinte-soft);
  border-color: var(--vos-tinte-line);
}
.schnellstart-btn:active {
  transform: translateY(1px);
}
.schnellstart-btn__icon {
  color: var(--vos-tinte);
  display: inline-flex;
}
.schnellstart-btn__label {
  flex: 1;
}

/* ── Leserstimmen-Widget ──────────────────────────────────────── */
.dw-list--leserstimmen { gap: 0.625rem; }
.dw-leserstimme {
  padding: 0.625rem 0.75rem;
  background: var(--vos-surface-sub);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--vos-warn);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.dw-leserstimme:hover { background: var(--vos-surface-sub); }
.dw-leserstimme__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.dw-leserstimme__autor { color: var(--vos-text); font-size: var(--typo-text); }
.dw-leserstimme__kontext { font-size: var(--typo-klein); }
.dw-leserstimme__sterne { color: var(--vos-gold); font-size: var(--typo-klein); }
.dw-leserstimme__zitat {
  margin: 0;
  font-size: var(--typo-text);
  color: var(--vos-text-soft);
  font-style: italic;
  line-height: 1.4;
}
.dw-leserstimme__actions {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

/* ── Audit-Activity-Widget ────────────────────────────────────── */
.dw-list--audit .dw-list__item {
  padding: 0.4rem 0.625rem;
}
.dw-audit__zeile {
  font-size: var(--typo-text);
  line-height: 1.4;
}
.dw-audit__user {
  font-weight: var(--typo-stark);
  color: var(--vos-text);
}
.dw-audit__verb {
  color: var(--vos-text-mute);
}
.dw-audit__entity {
  color: var(--vos-text-soft);
}
.dw-audit__label {
  color: var(--vos-tinte);
}
.dw-audit__action {
  color: var(--vos-text-mute);
}
.dw-audit__zeit {
  margin-top: 0.125rem;
}

/* ── Badge-Variationen (für Widget-Listen) ────────────────────── */
/* 0.44.2.0 — vierte `.badge`-Grundregel entfallen, siehe oben. Sie war
   die, die gewann: von ihr kamen die Versalien auf jede Marke im ganzen
   Backend. Der Kommentar darüber stimmte schon damals nicht — sie
   ergänzte nicht die Basis, sie überschrieb sie. */
.badge-ok      { background: var(--vos-success-soft); color: var(--vos-success); border: 1px solid var(--vos-success-line); }
.badge-warn    { background: var(--vos-warn-soft);    color: var(--vos-warn);    border: 1px solid var(--vos-warn-line); }
.badge-danger  { background: var(--vos-danger-soft);  color: var(--vos-danger);  border: 1px solid var(--vos-danger-line); }
.badge-info    { background: var(--vos-info-soft);    color: var(--vos-info);    border: 1px solid var(--vos-info-line); }
.badge-muted   { background: var(--vos-line-soft);    color: var(--vos-text-mute); border: 1px solid var(--vos-line); }

/* Button-Größen-Modifier */
.btn-sm {
  padding: 4px 10px;
  font-size: var(--typo-klein);
  line-height: 1.2;
}
.btn-ghost {
  background: transparent;
  border-color: var(--vos-line);
  color: var(--vos-text-soft);
}
.btn-ghost:hover {
  background: var(--vos-line-soft);
  color: var(--vos-text);
}

/* small + muted-Helpers (falls noch nicht vorhanden) */
.small { font-size: var(--typo-klein); }
.muted { color: var(--vos-text-mute); }

/* ── Widget-Fundus (Modal-Liste) ──────────────────────────────── */
.widget-fundus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.widget-fundus__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem;
  background: var(--vos-surface-sub);
  border: 1px solid var(--vos-line-soft);
  border-radius: var(--radius);
}
.widget-fundus__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vos-tinte-soft);
  color: var(--vos-tinte);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.widget-fundus__text { flex: 1; }
.widget-fundus__text h3 {
  margin: 0;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  color: var(--vos-text);
}
.widget-fundus__text p {
  margin: 0.125rem 0 0 0;
  font-size: var(--typo-klein);
}
.widget-fundus__form { margin: 0; padding: 0; }

/* ════════════════════════════════════════════════════════════════════
   v0.9.10.2 — Widget-Schwung 2
   ════════════════════════════════════════════════════════════════════

   - .dw-sparkline       SVG-Polyline für Verkaufskurve
   - .dw-trend           ↑/↓ neben KPI
   - .dw-section-label   kleines „Zuletzt versendet"-Label in Widgets
   - .dw-top__*          Top-Bücher-Liste mit Vergleichs-Balken
   - .dw-kalender__datum Datumsspalte links im Kalender-Item
   - .dw-list__item--today  Heute-Kennung
   - .dw-notiz           Sticky-Note (Textarea + Status)
*/

/* ── Sparkline ──────────────────────────────────────────────── */
.dw-sparkline {
  width: 100%;
  height: 60px;
  margin: 0.25rem 0;
}
.dw-sparkline svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.dw-sparkline__area {
  fill: var(--vos-tinte-soft);
}
.dw-sparkline__line {
  fill: none;
  stroke: var(--vos-tinte);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.dw-sparkline__peak {
  fill: var(--vos-bordeaux);
  stroke: var(--vos-surface);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* ── Trend-Pfeil neben KPI ──────────────────────────────────── */
.dw-trend {
  margin-left: auto;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  font-variant-numeric: tabular-nums;
}
.dw-trend--up   { color: var(--vos-success); }
.dw-trend--down { color: var(--vos-danger); }

/* dw-kpi-zeile sollte den Trend rechts halten — ergänzt das Layout */
.dw-kpi-zeile {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Section-Label in Widgets („Zuletzt versendet" o.ä.) ────── */
.dw-section-label {
  font-size: var(--typo-klein);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vos-text-faint);
  font-weight: var(--typo-stark);
  margin-top: 0.25rem;
}

/* ── Top-Bücher-Widget ──────────────────────────────────────── */
.dw-list--top { gap: 0.5rem; }
.dw-top__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
}
.dw-top__item:hover { background: var(--vos-surface-sub); }
.dw-top__rang {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vos-tinte-soft);
  color: var(--vos-tinte);
  border-radius: 50%;
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  flex-shrink: 0;
}
.dw-top__body {
  flex: 1;
  min-width: 0;
}
.dw-top__head {
  font-size: var(--typo-text);
  color: var(--vos-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}
.dw-top__head a {
  color: inherit;
  text-decoration: none;
}
.dw-top__head a:hover { color: var(--vos-tinte); text-decoration: underline; }
.dw-top__bar {
  height: 4px;
  background: var(--vos-line-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.dw-top__bar span {
  display: block;
  height: 100%;
  background: var(--vos-tinte);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}
.dw-top__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--typo-klein);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dw-top__meta strong { color: var(--vos-text); }

/* ── Kalender-Datum-Spalte ──────────────────────────────────── */
.dw-kalender__datum {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 6px;
  background: var(--vos-surface-sub);
  border-radius: var(--radius-sm);
  border: 1px solid var(--vos-line-soft);
  flex-shrink: 0;
  line-height: 1.1;
}
.dw-kalender__datum strong {
  font-size: var(--typo-text);
  color: var(--vos-text);
}
.dw-kalender__datum .small { font-size: var(--typo-klein); }

.dw-list__item--today {
  background: var(--vos-warn-soft);
}
.dw-list__item--today .dw-kalender__datum {
  background: var(--vos-warn);
  border-color: var(--vos-warn-line);
}
.dw-list__item--today .dw-kalender__datum strong,
.dw-list__item--today .dw-kalender__datum .small {
  color: #fff;
}

/* ── Notiz-Widget (Sticky-Note) ─────────────────────────────── */
.dw-notiz {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
  /* Notiz-Hintergrund: papierwarmes Gelb wie ein echter Sticky */
  background: #fdf6c4;
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin: -0.5rem;
  /* Negativer Margin überlappt das Widget-Padding, sodass der
     Sticky-Look bis zur Karten-Innenkante geht. */
  border: 1px solid #f0e08c;
}
.dw-notiz__textarea {
  width: 100%;
  min-height: 100px;
  background: transparent;
  border: 0;
  resize: vertical;
  font-family: var(--vos-sans);
  font-size: var(--typo-text);
  color: #5a4d10; /* dunkles Senfgelb für Lesbarkeit */
  line-height: 1.5;
  padding: 0;
}
.dw-notiz__textarea:focus {
  outline: 0;
  box-shadow: none;
}
.dw-notiz__textarea::placeholder {
  color: #a08d50;
  font-style: italic;
}
.dw-notiz__status {
  min-height: 1.1em;
  font-size: var(--typo-klein);
  color: var(--vos-text-faint);
  font-style: italic;
  transition: opacity 0.2s ease;
}
.dw-notiz__status.is-saving { color: var(--vos-text-mute); }
.dw-notiz__status.is-saved  { color: var(--vos-success); }
.dw-notiz__status.is-error  { color: var(--vos-danger); font-style: normal; }

/* ════════════════════════════════════════════════════════════════════
   v0.15.1.0 — Sidebar einklappen (Hamburger) + Profil-Link im User-Badge
   ──────────────────────────────────────────────────────────────────── */

/* Hamburger-Button links in der Topbar */
.admin-topbar__hamburger {
  background: transparent;
  border: 0;
  color: var(--vos-text-mute);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0.25rem;
}
.admin-topbar__hamburger:hover { color: var(--vos-tinte); background: var(--vos-surface-sub); }
.admin-topbar__hamburger:focus-visible { outline: 2px solid var(--vos-tinte); outline-offset: 2px; }

/* User-Badge wird klickbar — führt aufs eigene Profil. */
.admin-topbar__user-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--vos-text-soft);
  transition: background 0.15s ease;
}
.admin-topbar__user-link:hover { background: var(--vos-surface-sub); color: var(--vos-tinte); text-decoration: none; }
.admin-topbar__user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--vos-surface-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-topbar__user-avatar--init {
  font-weight: var(--typo-stark);
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
  text-transform: uppercase;
  background: var(--vos-surface-sub);
  border: 1px solid var(--vos-line);
}

/* Collapsed-State: Sidebar wird auf reine Icon-Spalte geschrumpft. */
.admin-wrap.is-sidebar-collapsed {
  grid-template-columns: 64px 1fr;
}
.admin-wrap.is-sidebar-collapsed .admin-brand__name,
.admin-wrap.is-sidebar-collapsed .admin-version {
  display: none;
}
.admin-wrap.is-sidebar-collapsed .admin-brand {
  justify-content: center;
  padding: 0;
}
.admin-wrap.is-sidebar-collapsed .admin-brand a { justify-content: center; gap: 0; }

/* Akkordeon-Gruppen-Titel im Collapsed-State ausblenden, Items zeigen
   nur noch das Icon (Text wird ausgeblendet). */
.admin-wrap.is-sidebar-collapsed .admin-nav-group__title,
.admin-wrap.is-sidebar-collapsed .admin-nav__group-toggle-text,
.admin-wrap.is-sidebar-collapsed .admin-nav__item-label,
.admin-wrap.is-sidebar-collapsed .admin-nav__group-chevron,
.admin-wrap.is-sidebar-collapsed .admin-nav__group-header > svg + span,
.admin-wrap.is-sidebar-collapsed .admin-sidebar .admin-nav span:not(.admin-nav__icon) {
  display: none !important;
}
.admin-wrap.is-sidebar-collapsed .admin-sidebar {
  padding: 0.75rem 0.25rem;
}
.admin-wrap.is-sidebar-collapsed .admin-sidebar a,
.admin-wrap.is-sidebar-collapsed .admin-sidebar button {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.admin-wrap.is-sidebar-collapsed .admin-sidebar a svg,
.admin-wrap.is-sidebar-collapsed .admin-sidebar button svg {
  margin: 0;
}

/* Sanfter Übergang */
.admin-wrap, .admin-wrap .admin-sidebar, .admin-wrap .admin-brand {
  transition: grid-template-columns 0.2s ease, padding 0.2s ease;
}

/* ════════════════════════════════════════════════════════════════════
   v0.15.5.0 — Navigation 2.0: Editor-Modal + Link-Picker
   ──────────────────────────────────────────────────────────────────── */

/* Drag-Indicator beim Sortieren */
.nav-row--dragging {
  opacity: .5;
  background: #fef3c7 !important;
}
.nav-drag-handle:active { cursor: grabbing; }

/* Editor-Modal (nutzt natives <dialog>) */
.nav-modal {
  border: 0;
  border-radius: 10px;
  padding: 0;
  width: min(640px, 96vw);
  max-height: 90vh;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  background: #fff;
  color: var(--vos-text, #0f172a);
}
.nav-modal::backdrop { background: rgba(15, 23, 42, 0.55); }
/* Fallback ohne <dialog>-Support */
.nav-modal.is-open-fallback {
  position: fixed;
  inset: 4vh auto auto 50%;
  transform: translateX(-50%);
  z-index: 999;
}

.nav-modal__form { display: flex; flex-direction: column; max-height: 90vh; }
.nav-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}
.nav-modal__head h2 { margin: 0; font-size: var(--typo-abschnitt); font-weight: var(--typo-stark); }
.nav-modal__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: var(--glyph); color: #94a3b8; padding: 0 .35rem;
  border-radius: 4px;
}
.nav-modal__close:hover { color: #0f172a; background: #f1f5f9; }

.nav-modal__body { padding: 1.25rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }

.nav-modal__foot {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: .85rem 1.25rem;
  border-top: 1px solid #e2e8f0;
  background: #fafbfc;
}

/* Felder im Modal */
.nav-field { display: flex; flex-direction: column; gap: .35rem; }
.nav-field__label {
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  color: #334155;
}
.nav-field__hint {
  font-size: var(--typo-klein);
  color: #64748b;
  margin: .25rem 0 0;
  font-weight: var(--typo-normal);
  line-height: 1.45;
}
.nav-field input[type="text"],
.nav-field input[type="search"],
.nav-field select {
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: var(--typo-text);
  font-family: inherit;
  background: #fff;
}
.nav-field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: .55rem;
}
.nav-field--check input { margin-top: .15rem; }
.nav-field--check > span { display: block; }
.nav-field-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 600px) {
  .nav-field-grid { grid-template-columns: 1fr; }
}

/* Link-Picker */
.nav-picker-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .65rem;
}
.nav-picker-tab {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: var(--typo-klein);
  cursor: pointer;
  color: #475569;
  font-family: inherit;
}
.nav-picker-tab:hover { border-color: #94a3b8; color: #0f172a; }
.nav-picker-tab.is-active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

.nav-picker-input {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: var(--typo-text);
  font-family: inherit;
  background: #fff;
}

.nav-picker-results { /* container styled inline in view */ }
.nav-picker-empty {
  padding: 1rem;
  text-align: center;
  color: #94a3b8;
  font-size: var(--typo-text);
}
.nav-picker-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: .15rem .75rem;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #f1f5f9;
  padding: .55rem .85rem;
  cursor: pointer;
  font-family: inherit;
  align-items: center;
}
.nav-picker-item:last-child { border-bottom: 0; }
.nav-picker-item:hover { background: #f8fafc; }
.nav-picker-item__label {
  grid-column: 1;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  color: #0f172a;
}
.nav-picker-item__pfad {
  grid-column: 1;
  font-size: var(--typo-klein);
  color: #64748b;
  font-family: ui-monospace, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-picker-badge {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-block;
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  color: #475569;
  background: #f1f5f9;
  padding: .15rem .55rem;
  border-radius: 999px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nav-picker-badge--warn {
  color: #92400e;
  background: #fef3c7;
}

/* Tabs für Menü-Auswahl */
.nav-tab:hover { color: #0f172a !important; }

/* ── Radio-Group (Branding-Setting `liste_card_dichte` u.a.) — v0.19.6.0 ──
   Optionen liegen nebeneinander auf Desktop, gestapelt mobil. Jede Option
   ist ein <label> mit Radio, Titel-Text und optionalem Hinweistext darunter.
   Die ausgewählte Option ist visuell hervorgehoben (Border + sanfter
   Background). Auf Touch-Geräten wird der Tap-Bereich automatisch groß
   genug, weil die ganze <label>-Fläche klickbar ist. */
.radio-group {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.radio-group__option {
  display: flex;
  flex-direction: column;
  flex: 1 1 200px;
  padding: .75rem .9rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  min-height: 44px; /* Touch-Target */
}
.radio-group__option:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}
.radio-group__option.is-checked,
.radio-group__option:has(input[type="radio"]:checked) {
  border-color: var(--c-primary, #a31c2c);
  background: #fff;
  box-shadow: 0 0 0 1px var(--c-primary, #a31c2c) inset;
}
.radio-group__option input[type="radio"] {
  margin: 0 0 .3rem;
  align-self: flex-start;
  accent-color: var(--c-primary, #a31c2c);
}
.radio-group__label {
  font-weight: var(--typo-stark);
  color: #0f172a;
  font-size: var(--typo-text);
  line-height: 1.2;
}
.radio-group__hint {
  display: block;
  margin-top: .2rem;
  color: #6b7280;
  font-size: var(--typo-klein);
  line-height: 1.3;
}
@media (max-width: 720px) {
  .radio-group { flex-direction: column; gap: .5rem; }
  .radio-group__option { flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════ */
/*  v0.19.9.0 — Einheitliche Sticky-Form-Actions-Bar (Welle 1)          */
/* ════════════════════════════════════════════════════════════════════ */

/* Container: Sticky am unteren Viewport-Rand.
   Position auf Viewport-Höhe via `position: sticky` mit bottom: 0.
   Damit bleibt die Bar beim Scrollen unten am Bildschirmrand kleben,
   solange das Edit-Form im Viewport ist. Beim Hochscrollen über den
   Form-Bereich hinaus verschwindet sie mit der Form (kein zusätzlicher
   Overlay-Effekt nötig). */
.vos-form-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 80;                       /* unter Modals (>=200), über Cards (<=10) */
  margin-top: 2rem;                  /* Abstand zum Form-Content */
  background: var(--vos-surface, #ffffff);
  border-top: 1px solid var(--vos-line, #e3decf);
  box-shadow: 0 -4px 12px -4px rgba(15, 23, 42, .08);
  padding: .65rem 1rem;
  padding-bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
}

.vos-form-actions__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
}

.vos-form-actions__hinweis {
  flex: 0 1 auto;
  font-size: var(--typo-klein);
  color: var(--vos-text-mute, #6b7280);
  line-height: 1.3;
  margin-right: auto;                /* drückt Links/Rechts-Gruppen auseinander */
}

.vos-form-actions__links {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

.vos-form-actions__rechts {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  margin-left: auto;                 /* drückt nach rechts, auch ohne Hinweis */
}

.vos-form-actions__delete-form {
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* Touch-Targets: alle Buttons in der Bar mindestens 40px hoch.
   Auf Touch-Geräten wachsen sie auf 44px (siehe Media-Query unten). */
.vos-form-actions .btn {
  min-height: 40px;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ── Verbesserte Hover-States für ALLE Backend-Buttons ─────────────── */
/* Punkt 5 vom Briefing: „achte auf das sichtbare hover. bisher oft     */
/* nicht der fall". Die alten Hover-Definitionen ändern NUR den         */
/* Background um 1–2 Nuancen — auf den hellen Tinte-Tönen kaum          */
/* sichtbar. Wir ergänzen:                                              */
/*   1) eine kleine Schatten-Anhebung (depth cue)                       */
/*   2) eine 1px-Translation nach oben (motion cue)                     */
/*   3) etwas stärkere Background-Differenz wo möglich                  */
.btn,
button.btn {
  /* transition wird in der Basis-Regel schon gesetzt — wir erweitern   */
  /* sie hier nicht, weil composing transitions auf bestehenden         */
  /* Definitionen unzuverlässig ist. Stattdessen reichen unsere         */
  /* zusätzlichen Properties (transform, box-shadow) als Hover-Cue.     */
  transition: background .12s ease,
              border-color .12s ease,
              color .12s ease,
              transform .12s ease,
              box-shadow .12s ease;
}

.btn:hover,
button.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px -1px rgba(15, 23, 42, .15);
}

.btn:active,
button.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px -1px rgba(15, 23, 42, .2);
}

/* Disabled darf kein Hover-Effekt zeigen */
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

/* Primärer Save-&-Close-Button kriegt zusätzlich kräftigeres Hover-    */
/* Feedback: dunklerer Background als der ohnehin schon dunklere Tinte- */
/* Hover-Wert, damit der Akzent-Charakter klar bleibt.                  */
.vos-form-actions__save-close.btn-primary:hover,
.vos-form-actions__save-close.btn--primary:hover {
  background: var(--vos-tinte-dunkel, #4c2c6f);
  border-color: var(--vos-tinte-dunkel, #4c2c6f);
}

/* ── Body-Padding-Bottom, damit Content nicht hinter Sticky-Bar       */
/*    versteckt liegt. Wird per JS auf Forms mit Sticky-Bar gesetzt    */
/*    (nicht global, damit Listen/Detail-Pages nicht unnötig Padding   */
/*    bekommen). */
body.has-form-actions {
  padding-bottom: 0;                 /* Sticky-Bar ist im Flow */
}

/* ── Mobile: kompakter, vertikale Anordnung bei sehr schmalen Geräten */
@media (max-width: 640px) {
  .vos-form-actions {
    padding: .6rem .75rem;
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  }
  .vos-form-actions__inner {
    gap: .55rem;
  }
  .vos-form-actions__hinweis {
    display: none;                   /* spart Platz; nur in Desktop */
  }
  .vos-form-actions__links,
  .vos-form-actions__rechts {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .vos-form-actions__rechts {
    order: -1;                       /* Speichern-Buttons OBEN auf Mobile */
  }
  .vos-form-actions .btn {
    min-height: 44px;                /* Touch-Target */
    flex: 1 1 auto;
    padding-left: .8rem;
    padding-right: .8rem;
  }
}

/* Touch-Geräte (Pointer:coarse) – grössere Touch-Targets, kein Hover- */
/* Lift (auf Touch wirkt das wie „klemmt"). */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  button.btn:hover {
    transform: none;
    box-shadow: none;
  }
  .vos-form-actions .btn {
    min-height: 44px;
  }
}

/* ── Print: Sticky-Bar nicht drucken */
@media print {
  .vos-form-actions { display: none; }
}

/* v0.36.0 — Schmale Bildschirme (bis 480 px): Die Spalte neben der Seitenleiste
   darf schmaler werden als ihr Inhalt, die Oberleiste bricht um. Vorher war die
   Backend-Hülle bei 320 px rund 400 px breit (Lizenzseite, Bücherliste u. a.). */
@media (max-width: 480px) {
  .admin-wrap { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .admin-main, .admin-topbar { min-width: 0; }
  .admin-topbar { flex-wrap: wrap; height: auto; row-gap: .35rem; }
  .admin-topbar__user { min-width: 0; flex-wrap: wrap; }
}

/* ── 0.38.0 Datensicherung (admin/backup) ───────────────────────── */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin-bottom: 1rem; position: relative; }
.tabelle-scroll > table { margin-bottom: 0; }
.zeilen-aktionen { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; align-items: center; }
.zeilen-aktionen form { display: inline-flex; margin: 0; }
.zeilen-aktionen .btn { min-height: 28px; padding: .25rem .6rem; font-size: var(--typo-klein); }
td.zeile-aktion { text-align: right; width: 1%; }
.sicherung-kacheln { margin-bottom: 1.25rem; }
.sicherung-karte { margin-bottom: 1.25rem; }
.sicherung-karte[hidden] { display: none; }
.sicherung-karte > h2, .sicherung-karte .card__header h2 { font-size: var(--typo-abschnitt); margin: 0 0 .5rem; }
.sicherung-karte h3 { font-size: var(--typo-text); font-weight: var(--typo-stark); margin: 1.25rem 0 .5rem; }
.sicherung-karte .hint { font-size: var(--typo-klein); color: var(--vos-text-mute); line-height: 1.5; }
.sicherung-karte .form-row--inline + .form-row--inline { margin-top: .25rem; }
.sicherung-abstand { margin-top: 1.25rem; }
.sicherung-schmal { max-width: 36rem; }
.sicherung-fehler { color: var(--vos-danger); }
.sicherung-name { word-break: break-all; font-size: var(--typo-klein); }
.sicherung-balken { height: 10px; background: var(--vos-line); border-radius: 5px; overflow: hidden; max-width: 40rem; margin: .5rem 0; }
.sicherung-balken i { display: block; height: 100%; width: 0; background: var(--vos-tinte); transition: width .4s; }
.sicherung-zusatz td { padding-top: 0; border-top: 0; }
.sicherung-zusatz summary { cursor: pointer; color: var(--vos-text-mute); font-size: var(--typo-klein); }
.sicherung-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.25rem 1.5rem; padding: .75rem 0 .5rem; }
.sicherung-raster form { border-left: 3px solid var(--vos-line); padding-left: .75rem; }
.sicherung-datei { max-width: 26rem; }
.sicherung-code { white-space: pre-wrap; word-break: break-all; background: var(--vos-surface-2); padding: .5rem .75rem; border-radius: 6px; font-size: var(--typo-klein); }
.sicherung-ziel { border: 1px solid var(--vos-line); border-radius: 8px; padding: .5rem .75rem; margin: .75rem 0; min-width: 0; }
.sicherung-ziel legend { font-weight: 600; padding: 0 .3rem; }
.sicherung-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sicherung-karte--wichtig { border-left: 4px solid var(--vos-danger); }
/* Knöpfe als <button> bekommen hier denselben Rahmen wie die gleichnamigen Links (button.btn setzt ihn sonst durchsichtig). */
.sicherung-karte button.btn-sec { border-color: var(--vos-line-strong); }
.sicherung-karte button.btn-danger { border-color: var(--vos-danger-line); }
.sicherung-karte button.btn-sec:hover { border-color: var(--vos-tinte-line); }
.sicherung-karte button.btn-danger:hover { border-color: var(--vos-danger); }
/* 0.29.3.0 — Einstellungstyp „mehrfach" (Häkchenliste) */
.check-list { display: grid; gap: .4rem; margin: .25rem 0 .35rem; }
.check-list__item { display: flex; align-items: flex-start; gap: .55rem; font-weight: var(--typo-normal); margin: 0; cursor: pointer; }
.check-list__item input { margin: .2rem 0 0; flex: none; width: 1rem; height: 1rem; }

/* v0.29.4.0 — Buchformular, Tab Autoren: Aktionen nebeneinander, mobil umbrechend */
.autor-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* 0.30.3.0 — Buchformular: Platzierung im Shop */
.platzierung { margin-top: 1.5rem; padding: 1.1rem 1.25rem 1.2rem; background: var(--vos-papier, #fbf7ef); border: 1px solid var(--vos-line, rgba(20,16,12,.10)); border-left: 4px solid var(--vos-gold, #b8954a); border-radius: 6px; }
.platzierung__titel { margin: 0 0 .9rem; font-size: var(--typo-abschnitt); color: var(--vos-tinte, #1e3a5f); }
.platzierung .row { margin-bottom: 1rem; }
.platzierung__wirkung { margin: .4rem 0 0; font-size: var(--typo-text); line-height: 1.5; color: var(--vos-text-soft, #4a463f); }
.platzierung__check { display: inline-flex; align-items: center; gap: .5rem; font-weight: var(--typo-stark); }
.platzierung__belegung { font-size: var(--typo-text); line-height: 1.55; color: var(--vos-text-soft, #4a463f); padding-top: .8rem; border-top: 1px solid var(--vos-line-soft, rgba(20,16,12,.06)); }
.platz-marke { display: inline-block; font-size: var(--typo-klein); font-weight: var(--typo-stark); letter-spacing: .04em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 3px; white-space: nowrap; }
.platz-marke--spitzentitel { background: var(--vos-gold, #b8954a); color: #1a1814; }
.platz-marke--empfehlung   { background: var(--vos-bordeaux, #7a2c1e); color: #fff; }
.platz-marke--bestseller   { background: var(--vos-tinte, #1e3a5f); color: #fff; }
.platz-marke--neu          { background: #fff; color: var(--vos-bordeaux, #7a2c1e); border: 1px solid var(--vos-bordeaux, #7a2c1e); }
.platz-marke--buehne       { background: #1a1814; color: var(--vos-gold, #b8954a); }
.book-card__platz { display: flex; flex-wrap: wrap; gap: 4px; margin: .25rem 0 .35rem; }
.platzierung__vorrang { color: var(--vos-tinte, #1e3a5f); font-style: italic; }

/* ── 0.32.0.0 — Gruppe der aktiven Seite hervorheben (alle Gruppen offen) ── */
.admin-nav__group--aktiv > .admin-nav__group-header { color: var(--vos-tinte, #1e3a5f); }
.admin-nav a { padding-top: 0.4rem; padding-bottom: 0.4rem; }           /* 0.32.0.0 — kompakter, alle Gruppen offen */
.admin-nav__group-header { padding-top: 0.75rem; padding-bottom: 0.3rem; }
.toolbar__suche input[type="date"] { width: auto; flex: 0 0 auto; }     /* 0.32.0.0 — Datumsfelder in der Filterleiste nicht auf volle Breite */
.toolbar__suche select { width: auto; }

/* ══════════════════════════════════════════════════════════════════
 * BILDFELD (0.36.3.0) — ein Medium: ziehen, klicken, Strg+V, Mediathek
 * Markup: Services\Media\Bildfeld::html(), Logik: assets/js/bildfeld.js
 * ══════════════════════════════════════════════════════════════════ */
.bildfeld { display: grid; gap: 0.5rem; max-width: 520px; }
.bildfeld__zone {
  position: relative;
  min-height: 150px;
  border: 2px dashed var(--vos-line-strong);
  border-radius: 8px;
  background: var(--vos-surface-2);
  display: flex; align-items: center; justify-content: center;
  padding: 0.9rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.bildfeld__zone:hover { border-color: var(--vos-tinte-hell); background: var(--vos-surface); }
.bildfeld__zone:focus-visible { outline: none; border-color: var(--vos-tinte); box-shadow: 0 0 0 3px var(--vos-tinte-soft); }
.bildfeld__zone.ist-ueber { border-color: var(--vos-tinte); border-style: solid; background: var(--vos-info-soft); }
.bildfeld.hat-medium .bildfeld__zone { border-style: solid; border-color: var(--vos-line); background: var(--vos-surface-sub); }

.bildfeld__vorschau { display: none; max-width: 100%; }
.bildfeld.hat-medium .bildfeld__vorschau { display: flex; justify-content: center; }
.bildfeld__vorschau img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  width: auto; height: auto;
  object-fit: contain;
  box-shadow: 0 8px 20px -10px rgba(20, 40, 69, 0.45), 0 2px 6px -3px rgba(20, 40, 69, 0.25);
  border-radius: 2px;
  background: #fff;
}
.bildfeld--klein .bildfeld__zone { min-height: 110px; }
.bildfeld--klein .bildfeld__vorschau img { max-height: 160px; }
.bildfeld--rund .bildfeld__vorschau img { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; }
.bildfeld__datei {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem; background: var(--vos-surface); border: 1px solid var(--vos-line);
  border-radius: 6px; font-size: var(--typo-text); color: var(--vos-text-soft); word-break: break-all;
}
.bildfeld__datei::before { content: '📄'; }

.bildfeld__leer { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; color: var(--vos-text-soft); }
.bildfeld.hat-medium .bildfeld__leer {
  /* bei vorhandenem Bild nur beim Überfahren/Ziehen als Schleier sichtbar */
  position: absolute; inset: 0; justify-content: center; border-radius: 6px;
  background: rgba(251, 249, 244, 0.9); opacity: 0; transition: opacity .15s ease;
}
.bildfeld.hat-medium .bildfeld__zone:hover .bildfeld__leer,
.bildfeld.hat-medium .bildfeld__zone.ist-ueber .bildfeld__leer { opacity: 1; }
/* Schleier über vorhandenem Bild: kurzer Hinweis statt des Leer-Textes */
.bildfeld.hat-medium .bildfeld__leer strong,
.bildfeld.hat-medium .bildfeld__leer small { display: none; }
.bildfeld.hat-medium .bildfeld__leer::after {
  content: 'Ersetzen: neues Bild hierher ziehen oder klicken';
  font-size: var(--typo-klein); font-weight: var(--typo-stark); color: var(--vos-text); padding: 0 .75rem; text-align: center;
}
.bildfeld[data-art="datei"].hat-medium .bildfeld__leer::after { content: 'Ersetzen: neue Datei hierher ziehen oder klicken'; }
.bildfeld__zone { overflow: hidden; }
.bildfeld__pfeil { font-size: var(--glyph); color: var(--vos-tinte); line-height: 1; }
.bildfeld__leer strong { font-weight: var(--typo-stark); color: var(--vos-text); }
.bildfeld__leer small { font-size: var(--typo-klein); color: var(--vos-text-mute); }

.bildfeld__fortschritt { position: absolute; left: .9rem; right: .9rem; bottom: .6rem; height: 4px; border-radius: 2px; background: var(--vos-line); overflow: hidden; }
.bildfeld__fortschritt span { display: block; height: 100%; width: 0; background: var(--vos-tinte); transition: width .15s linear; }
.bildfeld.laedt .bildfeld__zone { cursor: progress; }

.bildfeld__info { font-size: var(--typo-klein); color: var(--vos-text-mute); min-height: 1.1em; word-break: break-all; }
.bildfeld__info--fehler, .bildfeld__fehler { color: var(--vos-danger); }
.bildfeld__info--hinweis { color: var(--vos-text-soft); }
.bildfeld__aktionen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.bildfeld__aktionen [hidden] { display: none !important; }
.bildfeld__format { display: grid; gap: .25rem; margin-top: .35rem; padding-top: .6rem; border-top: 1px solid var(--vos-line-soft); }
.bildfeld__format label { font-size: var(--typo-klein); font-weight: var(--typo-stark); color: var(--vos-text); }
.bildfeld__format select { max-width: 320px; }
.bildfeld__format small { font-size: var(--typo-klein); line-height: 1.4; }

/* ══════════════════════════════════════════════════════════════════
 * ZUSCHNEIDEN (0.36.5.0) — Fenster aus assets/js/bild-zuschnitt.js
 * ══════════════════════════════════════════════════════════════════ */
body.zs-offen { overflow: hidden; }
.zs-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(20, 24, 32, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.zs-fenster {
  background: var(--vos-surface); color: var(--vos-text);
  border-radius: 10px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  width: min(1100px, 100%); max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
.zs-kopf { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.1rem; border-bottom: 1px solid var(--vos-line); }
.zs-titel { margin: 0; font-size: var(--typo-abschnitt); font-weight: var(--typo-stark); font-family: var(--vos-sans); }
.zs-x { border: 0; background: transparent; font-size: var(--glyph); line-height: 1; cursor: pointer; color: var(--vos-text-soft); padding: 0 .3rem; }
.zs-leiste { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem 1.1rem; border-bottom: 1px solid var(--vos-line-soft); background: var(--vos-surface-2); }
.zs-format { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--typo-klein); color: var(--vos-text-soft); }
.zs-format select { font-size: var(--typo-text); padding: .25rem .4rem; }
.zs-masse { margin-left: auto; font-size: var(--typo-klein); color: var(--vos-text-mute); font-variant-numeric: tabular-nums; }

.zs-buehne {
  position: relative; flex: 1; min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; overflow: hidden;
  /* Schachbrett, damit transparente PNG-Ränder sichtbar sind */
  background-color: #e9e7e1;
  background-image: linear-gradient(45deg, #dcd9d1 25%, transparent 25%), linear-gradient(-45deg, #dcd9d1 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #dcd9d1 75%), linear-gradient(-45deg, transparent 75%, #dcd9d1 75%);
  background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.zs-buehne:focus-visible { outline: 3px solid var(--vos-tinte-soft); outline-offset: -3px; }
.zs-halter { position: relative; display: inline-block; line-height: 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.zs-bild { display: block; max-width: 100%; max-height: calc(100vh - 16rem); width: auto; height: auto; pointer-events: none; }
.zs-rahmen {
  position: absolute; box-sizing: border-box; cursor: move;
  border: 1px solid #fff; outline: 1px dashed rgba(0, 0, 0, 0.6);
  /* Drittel-Hilfslinien */
  background-image:
    linear-gradient(to right, transparent calc(33.333% - .5px), rgba(255,255,255,.45) calc(33.333% - .5px), rgba(255,255,255,.45) calc(33.333% + .5px), transparent calc(33.333% + .5px),
                             transparent calc(66.666% - .5px), rgba(255,255,255,.45) calc(66.666% - .5px), rgba(255,255,255,.45) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), rgba(255,255,255,.45) calc(33.333% - .5px), rgba(255,255,255,.45) calc(33.333% + .5px), transparent calc(33.333% + .5px),
                             transparent calc(66.666% - .5px), rgba(255,255,255,.45) calc(66.666% - .5px), rgba(255,255,255,.45) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
.zs-schatten { position: absolute; inset: 0; background: rgba(15, 18, 24, 0.55); pointer-events: none; }
.zs-griff {
  position: absolute; width: 14px; height: 14px; background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.55); border-radius: 2px; box-sizing: border-box;
}
.zs-griff::after { content: ''; position: absolute; inset: -8px; } /* größere Trefferfläche für Finger */
.zs-griff--nw { left: -7px; top: -7px; cursor: nwse-resize; }
.zs-griff--n  { left: calc(50% - 7px); top: -7px; cursor: ns-resize; }
.zs-griff--ne { right: -7px; top: -7px; cursor: nesw-resize; }
.zs-griff--e  { right: -7px; top: calc(50% - 7px); cursor: ew-resize; }
.zs-griff--se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.zs-griff--s  { left: calc(50% - 7px); bottom: -7px; cursor: ns-resize; }
.zs-griff--sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.zs-griff--w  { left: -7px; top: calc(50% - 7px); cursor: ew-resize; }
.zs-laden { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--typo-text); color: var(--vos-text-soft); background: rgba(233, 231, 225, .85); }
.zs-laden[hidden] { display: none; }
.zs-laden--fehler { color: var(--vos-danger); font-weight: var(--typo-stark); }

.zs-meldung { min-height: 1.4em; padding: .45rem 1.1rem 0; font-size: var(--typo-text); color: var(--vos-text-soft); }
.zs-meldung--ok { color: var(--vos-success); }
.zs-meldung--hinweis { color: var(--vos-warn); }
.zs-meldung--fehler { color: var(--vos-danger); font-weight: var(--typo-stark); }
.zs-fuss { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem 1.1rem .9rem; }
.zs-fuss-rechts { display: flex; gap: .5rem; margin-left: auto; }
.zs-original { color: var(--vos-danger) !important; }
.zs-original[hidden] { display: none; }
.zs-original--frage { font-weight: var(--typo-stark); }
.zs-busy .zs-halter { pointer-events: none; opacity: .8; }
@media (max-width: 640px) {
  .zs-overlay { padding: 0; }
  .zs-fenster { border-radius: 0; height: 100%; }
  .zs-masse { margin-left: 0; width: 100%; }
  .zs-bild { max-height: calc(100vh - 19rem); }
}

/* ══════════════════════════════════════════════════════════════════
 * NICHT BEZAHLT (0.36.6.0) — Online-Zahlung nicht abgeschlossen
 * ══════════════════════════════════════════════════════════════════ */
.badge--abgelaufen, .badge--abgebrochen {
  background: var(--vos-warn-soft);
  color: var(--vos-warn);
}
.zahlung-offen { border-left: 4px solid var(--vos-warn); }
.zahlung-offen__titel { margin: 0 0 .4rem; color: var(--vos-warn); }
.zahlung-offen__aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
/* 0.39.1.0 — Bestellnummer des Kunden in der Bestellansicht: Feld und Knopf in einer Zeile */
.kbn-form { display: flex; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.kbn-form input[type="text"] { flex: 1; min-width: 0; }
/* 0.40.0.0 — Einmalpasswort: einmalige Anzeige */
.einmalpasswort-anzeige { border-left: 4px solid var(--vos-warn); }
.einmalpasswort-anzeige__wert { display: flex; align-items: center; gap: .75rem; }
.einmalpasswort-anzeige__wert code { font-size: var(--typo-titel); letter-spacing: .06em; padding: .35rem .6rem; background: var(--vos-surface); border: 1px solid var(--vos-line); border-radius: 6px; }
.zahlung-offen__aktionen form { margin: 0; }
.zahlung-offen__marke { color: var(--vos-warn); font-weight: var(--typo-stark); }


/* ══════════════════════════════════════════════════════════════════
 * MOBIL-NAVIGATION (0.36.7.0)
 * Unter 900 px: Inhalt in voller Breite, Navigation als Leiste von
 * links (Hamburger öffnet, Hintergrund/Esc/Link schließt).
 * ══════════════════════════════════════════════════════════════════ */
.admin-nav-backdrop { display: none; }

@media (max-width: 900px) {
  .admin-wrap,
  .admin-wrap.is-sidebar-collapsed {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand topbar"
      "main  main";
  }
  .admin-brand,
  .admin-wrap.is-sidebar-collapsed .admin-brand {
    padding: 0 0.6rem 0 0.75rem;
    border-right: 0;
  }
  .admin-brand__name,
  .admin-version { display: none; }

  .admin-topbar { padding: 0 0.75rem 0 0.25rem; gap: 0.5rem; min-width: 0; }
  .admin-topbar__hamburger { width: 44px; height: 44px; flex-shrink: 0; }
  .admin-topbar__crumbs { display: none; }
  .admin-topbar__spacer { flex: 1; }
  .admin-topbar__user { gap: 0.25rem; margin-left: auto; min-width: 0; }
  .admin-topbar__user-name,
  .admin-topbar__user-role { display: none; }
  .admin-topbar__logout { padding: 8px; }

  /* Leiste: außerhalb des Bildes, volle Beschriftung */
  .admin-sidebar,
  .admin-wrap.is-sidebar-collapsed .admin-sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    height: auto;
    width: min(300px, 86vw);
    padding: 0.75rem 0.5rem 1.5rem;
    z-index: 60;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .admin-wrap.is-nav-open .admin-sidebar {
    transform: none;
    box-shadow: 0 0 40px rgba(15, 23, 42, 0.25);
  }
  /* Eingeklappt-Zustand vom Desktop gilt hier nicht */
  .admin-wrap.is-sidebar-collapsed .admin-sidebar .admin-nav span:not(.admin-nav__icon),
  .admin-wrap.is-sidebar-collapsed .admin-nav-group__title,
  .admin-wrap.is-sidebar-collapsed .admin-nav__group-toggle-text,
  .admin-wrap.is-sidebar-collapsed .admin-nav__item-label,
  .admin-wrap.is-sidebar-collapsed .admin-nav__group-chevron,
  .admin-wrap.is-sidebar-collapsed .admin-nav__group-header > svg + span {
    display: revert !important;
  }
  .admin-wrap.is-sidebar-collapsed .admin-sidebar a,
  .admin-wrap.is-sidebar-collapsed .admin-sidebar button {
    justify-content: flex-start;
    padding-left: revert;
    padding-right: revert;
  }
  .admin-sidebar a,
  .admin-sidebar button { min-height: 44px; }

  .admin-nav-backdrop {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 59;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    cursor: pointer; /* iOS: Tipp auf die Fläche zuverlässig als Klick */
    -webkit-tap-highlight-color: transparent;
  }
  .admin-wrap.is-nav-open .admin-nav-backdrop { opacity: 1; pointer-events: auto; }
  html.admin-nav-offen, html.admin-nav-offen body { overflow: hidden; }

  .admin-main { padding: 1rem 0.875rem 2.5rem; }

  /* Inhalte: nichts breiter als der Bildschirm */
  .admin-zweispaltig { grid-template-columns: minmax(0, 1fr) !important; }
  .toolbar__actions { flex-wrap: wrap; }
  .admin-main input:not([type=checkbox]):not([type=radio]),
  .admin-main select,
  .admin-main textarea { max-width: 100%; }
  .admin-main code, .admin-main pre { overflow-wrap: anywhere; white-space: pre-wrap; }
  .admin-main img, .admin-main video { max-width: 100%; height: auto; }
  /* Breite Tabellen scrollen in sich (admin.js legt den Rahmen an) */
  .tabelle-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin-bottom: 1rem;
  }
  .tabelle-scroll > table { margin-bottom: 0; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .admin-sidebar, .admin-nav-backdrop { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
 * NEU-PUNKTE IM MENÜ (0.36.9.0) — Services\Admin\NavHinweise
 * ══════════════════════════════════════════════════════════════════ */
.nav-neu {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: var(--vos-bordeaux);
  color: #fff;
  font-family: var(--vos-sans);
  font-size: var(--typo-klein); font-weight: var(--typo-stark); line-height: 1;
  letter-spacing: 0; text-transform: none;
  vertical-align: middle;
}
.nav-neu--gruppe { min-width: 8px; width: 8px; height: 8px; padding: 0; margin-left: 0.45rem; }
/* offene Gruppe: der Punkt an der Überschrift ist überflüssig */
.admin-nav__group-header[aria-expanded="true"] .nav-neu--gruppe { display: none; }
/* eingeklappte Seitenleiste (nur Icons, Desktop): Punkt am Icon */
@media (min-width: 901px) {
  .admin-wrap.is-sidebar-collapsed .admin-sidebar a { position: relative; }
  .admin-wrap.is-sidebar-collapsed .admin-sidebar a span:has(> .nav-neu) {
    display: block !important; position: absolute; top: 4px; right: 10px;
    font-size: 0; line-height: 0;
  }
  .admin-wrap.is-sidebar-collapsed .admin-sidebar a .nav-neu {
    display: block !important; min-width: 8px; width: 8px; height: 8px; padding: 0; margin: 0; font-size: 0;
  }
}


/* ============================================================
   BESTELLÜBERSICHT (0.36.14.0) — Schnellfilter, klickbare Zeilen,
   „zu tun“-Blöcke, sortierbare Köpfe, Blättern
   ============================================================ */
.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.filter-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border: 1px solid rgba(0,0,0,.14); border-radius: 999px; background: #fff; color: inherit; font-size: var(--typo-text); text-decoration: none; line-height: 1.2; }
.filter-chip:hover { border-color: var(--vos-tinte, #253a5e); text-decoration: none; }
.filter-chip.is-aktiv { background: var(--vos-tinte, #253a5e); border-color: var(--vos-tinte, #253a5e); color: #fff; }
.filter-chip__zahl { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px; background: rgba(0,0,0,.08); font-size: var(--typo-klein); font-weight: var(--typo-stark); text-align: center; line-height: 1.5; }
.filter-chip.is-aktiv .filter-chip__zahl { background: rgba(255,255,255,.22); }
.filter-chip--tun:not(.is-aktiv) .filter-chip__zahl { background: var(--vos-bordeaux, #7a2e2e); color: #fff; }

.card--tun { border-left: 4px solid var(--vos-bordeaux, #7a2e2e); background: #fffaf3; }
.card--tun-warn { border-left-color: #c58a1a; }
.card--tun__titel { display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; font-size: var(--typo-abschnitt); }
.card--tun__titel .filter-chip__zahl { background: var(--vos-bordeaux, #7a2e2e); color: #fff; font-weight: var(--typo-stark); font-size: var(--typo-klein); line-height: 1.6; font-family: var(--vos-sans); }
.card--tun-warn .card--tun__titel .filter-chip__zahl { background: #c58a1a; }

.table--klickbar tr.zeile-link { cursor: pointer; transition: background-color .12s; }
.table--klickbar tr.zeile-link:hover, .table--klickbar tr.zeile-link:focus-within { background: rgba(37,58,94,.07); }
.zeile-link__nr { color: inherit; text-decoration: none; white-space: nowrap; } /* 0.47.1.1: BE-2026-0016 nicht in drei Zeilen */
.zeile-link__nr:hover { text-decoration: underline; }
.zeile-link__pfeil { color: var(--vos-text-mute, #888); text-align: right; white-space: nowrap; }
tr.zeile-link:hover .zeile-link__pfeil { color: var(--vos-tinte, #253a5e); }
.table th.num, .table td.num { text-align: right; white-space: nowrap; }
.th-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort:hover { text-decoration: underline; }
.th-sort.is-aktiv { color: var(--vos-tinte, #253a5e); }

.blaettern { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: center; margin-top: 1.25rem; }
.blaettern__link { padding: .35rem .7rem; border: 1px solid rgba(0,0,0,.14); border-radius: 6px; background: #fff; color: inherit; text-decoration: none; font-size: var(--typo-text); }
.blaettern__link:hover { border-color: var(--vos-tinte, #253a5e); text-decoration: none; }
.blaettern__link.is-aktiv { background: var(--vos-tinte, #253a5e); border-color: var(--vos-tinte, #253a5e); color: #fff; }
.blaettern__luecke { padding: 0 .25rem; color: var(--vos-text-mute, #888); }
.badge--bezahlt      { background: var(--vos-success-soft, #e3f1e6); color: var(--vos-success, #2c6b3c); }
.badge--versandt     { background: var(--vos-info-soft, #e3ecf6);    color: var(--vos-info, #2a5788); }
.badge--offen        { background: #fbf0d6; color: #8a5a00; }
.badge--auf_rechnung, .badge--kommission { background: #fbf0d6; color: #8a5a00; }
.badge--storniert    { background: var(--vos-surface-sub, #eee); color: var(--vos-text-mute, #777); }
.badge--vorgemerkt   { background: var(--vos-info-soft, #e3ecf6);    color: var(--vos-info, #2a5788); }   /* 0.47.0.0 */


/* LISTEN-KOMFORT (0.36.15.0) — klickbare Zeilen und sortierbare Köpfe in allen Tabellen */
tr.zeile-link { cursor: pointer; transition: background-color .12s; }
tr.zeile-link:hover, tr.zeile-link:focus-within { background: rgba(30,58,95,.06) !important; }
th.th-klick { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-klick:hover { color: var(--vos-tinte, #1e3a5f); text-decoration: underline; }
th.th-klick:focus-visible { outline: 2px solid var(--vos-tinte, #1e3a5f); outline-offset: -2px; }
th.th-klick::after { content: " ↕"; opacity: .3; font-size: .85em; }
th.th-klick[aria-sort="ascending"]::after { content: " ▲"; opacity: 1; }
th.th-klick[aria-sort="descending"]::after { content: " ▼"; opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
 * 0.37.0.0 — KNOPF-ORDNUNG (abschließend, steht bewusst am Ende)
 *
 * Befund vor 0.37.0.0: 738 Knöpfe im Backend in 55 Erscheinungsbildern.
 * Zwei Klassenfamilien liefen nebeneinander (btn-primary und
 * btn--primary), drei Schreibweisen hatten gar keine Gestaltung
 * (btn--klein, btn--small, btn--ghost im neuen Stylesheet), die Höhen
 * reichten von 20 bis 48 px.
 *
 * Ab hier gibt es VIER Arten und ZWEI Größen; jede bisher benutzte
 * Schreibweise zeigt auf eine davon.
 *
 *   haupt   btn-primary   Die eine Hauptaktion der Seite (Marineblau)
 *   zweit   btn-sec       Alles Übrige mit Rahmen (weiß)
 *   gefahr  btn-danger    Löschen, Stornieren (rot)
 *   dezent  btn-ghost     Nebensächliches ohne Rahmen
 *
 *   normal  36 px         klein  btn-sm  28 px
 *
 * WICHTIG — warum jede Regel hier auch `button.` und `a.` nennt:
 * Die Grundregel oben heißt `.btn, button.btn` und setzt
 * `border: 1px solid transparent`. `button.btn` ist spezifischer als
 * `.btn-sec`; eine Regel, die nur `.btn-sec` nennt, verliert daher bei
 * jedem <button> gegen den durchsichtigen Rahmen — unabhängig davon,
 * wie weit unten sie steht. Genau daran lag es, dass der Zweitknopf
 * („Filtern", „Speichern") seit jeher wie Fließtext aussah.
 * ══════════════════════════════════════════════════════════════════ */

.btn, button.btn, a.btn {
  min-height: 36px;
  padding: 0.475rem 0.95rem;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  border-radius: var(--radius-sm);
  border-width: 1px;
  border-style: solid;
}

/* — haupt — */
.btn-primary, button.btn-primary, a.btn-primary,
.btn--primary, button.btn--primary, a.btn--primary {
  background: var(--vos-tinte);
  color: #fff;
  border-color: var(--vos-tinte);
}
.btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover,
.btn--primary:hover, button.btn--primary:hover, a.btn--primary:hover {
  background: var(--vos-tinte-dunkel);
  border-color: var(--vos-tinte-dunkel);
  color: #fff;
}

/* — zweit —
   Der Rahmen ist bewusst kräftiger als --vos-line-strong (16 % Deckung):
   auf dem Papierton war der Zweitknopf sonst kaum von Text zu trennen. */
.btn-sec, button.btn-sec, a.btn-sec,
.btn-secondary, button.btn-secondary, a.btn-secondary,
.btn--secondary, button.btn--secondary, a.btn--secondary {
  background: #fff;
  color: var(--vos-text);
  border-color: rgba(20, 16, 12, 0.30);
}
.btn-sec:hover, button.btn-sec:hover, a.btn-sec:hover,
.btn-secondary:hover, button.btn-secondary:hover, a.btn-secondary:hover,
.btn--secondary:hover, button.btn--secondary:hover, a.btn--secondary:hover {
  background: var(--vos-surface-sub);
  border-color: var(--vos-tinte);
  color: var(--vos-tinte-dunkel);
}

/* — gefahr — */
.btn-danger, button.btn-danger, a.btn-danger,
.btn--danger, button.btn--danger, a.btn--danger,
.btn--hard-delete, button.btn--hard-delete, a.btn--hard-delete {
  background: #fff;
  color: var(--vos-danger);
  border-color: var(--vos-danger-line);
}
.btn-danger:hover, button.btn-danger:hover, a.btn-danger:hover,
.btn--danger:hover, button.btn--danger:hover, a.btn--danger:hover,
.btn--hard-delete:hover, button.btn--hard-delete:hover, a.btn--hard-delete:hover {
  background: var(--vos-danger-soft);
  color: var(--vos-danger);
  border-color: var(--vos-danger);
}

/* — dezent — */
.btn-ghost, button.btn-ghost, a.btn-ghost,
.btn--ghost, button.btn--ghost, a.btn--ghost,
.btn-link, button.btn-link, a.btn-link,
.btn-tertiary, button.btn-tertiary, a.btn-tertiary,
.btn--tertiary, button.btn--tertiary, a.btn--tertiary {
  background: transparent;
  color: var(--vos-tinte);
  border-color: transparent;
}
.btn-ghost:hover, button.btn-ghost:hover, a.btn-ghost:hover,
.btn--ghost:hover, button.btn--ghost:hover, a.btn--ghost:hover,
.btn-link:hover, button.btn-link:hover, a.btn-link:hover,
.btn-tertiary:hover, button.btn-tertiary:hover, a.btn-tertiary:hover,
.btn--tertiary:hover, button.btn--tertiary:hover, a.btn--tertiary:hover {
  background: var(--vos-tinte-soft);
  color: var(--vos-tinte-dunkel);
  border-color: transparent;
}

/* — klein — */
.btn-sm, button.btn-sm, a.btn-sm,
.btn--sm, button.btn--sm, a.btn--sm,
.btn--klein, button.btn--klein, a.btn--klein,
.btn--small, button.btn--small, a.btn--small {
  min-height: 28px;
  padding: 0.25rem 0.6rem;
  font-size: var(--typo-klein);
}

/* Die Leiste unter Formularen bleibt für den Daumen groß genug. */
.vos-form-actions .btn { min-height: 40px; padding-left: 1rem; padding-right: 1rem; }

/* Zeilenaktionen in Tabellen: immer rechts, immer klein, immer gleich.
   Vorher standen hier Knöpfe, unterstrichene Textlinks und nackte ×
   nebeneinander — in drei Höhen. */
.zeilen-aktionen {
  display: flex;
  gap: 0.3rem;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
}
.zeilen-aktionen form { display: inline-flex; margin: 0; }
.zeilen-aktionen .btn { min-height: 28px; padding: 0.25rem 0.6rem; font-size: var(--typo-klein); }
td.zeile-aktion { text-align: right; width: 1%; }

/* Aktionskasten auf Detailseiten (0.37.0.0) — siehe
   app/Views/_components/_aktionen_karte.php */
.aktionen-karte { padding: 1.25rem; margin-bottom: 1rem; }
.aktionen-karte__titel { margin: 0 0 0.85rem; font-size: var(--typo-text); }
.aktionen-karte form { margin: 0; }
.aktionen-karte .aktionen-karte__btn {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.aktionen-karte__eigen { margin-bottom: 0.5rem; }
.aktionen-karte__gefahr {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--vos-line);
}
.aktionen-karte__gefahr .aktionen-karte__btn:last-child { margin-bottom: 0; }

/* Löschen in der Formularleiste etwas abgesetzt, damit es nicht
   versehentlich neben „Abbrechen" getroffen wird. */
.vos-form-actions__delete-form { margin-left: 0.75rem !important; }

/* Mediathek: Die Seite bringt aus der GHOS-Vorlage eine eigene
   Knopf-Familie mit (`ghos-btn`). Deren Hauptknopf war bordeauxrot und
   41 px hoch, während derselbe Knopf im übrigen Backend marineblau und
   36 px hoch ist. Statt 24 Stellen in den Mediathek-Ansichten
   umzuschreiben, zeigt die Familie hier auf dieselben vier Arten.
   0.37.0.0 */
.ghos-btn, button.ghos-btn, a.ghos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0.475rem 0.95rem;
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(20, 16, 12, 0.30);
  background: #fff;
  color: var(--vos-text);
  text-decoration: none;
  cursor: pointer;
}
.ghos-btn:hover, button.ghos-btn:hover, a.ghos-btn:hover {
  background: var(--vos-surface-sub);
  border-color: var(--vos-tinte);
  color: var(--vos-tinte-dunkel);
}
.ghos-btn--haupt, .ghos-btn--primaer,
button.ghos-btn--haupt, button.ghos-btn--primaer,
a.ghos-btn--haupt, a.ghos-btn--primaer {
  background: var(--vos-tinte);
  border-color: var(--vos-tinte);
  color: #fff;
}
.ghos-btn--haupt:hover, .ghos-btn--primaer:hover,
button.ghos-btn--haupt:hover, button.ghos-btn--primaer:hover,
a.ghos-btn--haupt:hover, a.ghos-btn--primaer:hover {
  background: var(--vos-tinte-dunkel);
  border-color: var(--vos-tinte-dunkel);
  color: #fff;
}
.ghos-btn--zart, button.ghos-btn--zart, a.ghos-btn--zart {
  background: transparent;
  border-color: transparent;
  color: var(--vos-tinte);
}
.ghos-btn--zart:hover, button.ghos-btn--zart:hover, a.ghos-btn--zart:hover {
  background: var(--vos-tinte-soft);
  border-color: transparent;
  color: var(--vos-tinte-dunkel);
}
.ghos-btn--gefahr, button.ghos-btn--gefahr, a.ghos-btn--gefahr {
  background: #fff;
  border-color: var(--vos-danger-line);
  color: var(--vos-danger);
}
.ghos-btn--klein, button.ghos-btn--klein, a.ghos-btn--klein {
  min-height: 28px;
  padding: 0.25rem 0.6rem;
  font-size: var(--typo-klein);
}

/* Die KI-Knöpfe (✦) sind ein eigener Akzent und bleiben es — nur die
   Größe richtet sich nach dem kleinen Knopf statt nach 20 px. */
.btn-ki, button.btn-ki, a.btn-ki { min-height: 28px; }

/* Katalog-Editor: Quellen für Sektionen und Picker (0.38.0.0) */
.kat-neue-sektion {
  background: #fff;
  border: 1px dashed var(--vos-line-strong);
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
}
.kat-neue-sektion__zeile {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}
.kat-neue-sektion__label { color: var(--vos-text-soft); font-size: var(--typo-text); font-weight: var(--typo-stark); }
.kat-neue-sektion__feld {
  flex: 1;
  min-width: 220px;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--vos-line-strong);
  border-radius: 6px;
  font-size: var(--typo-text);
  font-family: inherit;
}
.kat-neue-sektion__trenner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.85rem 0 0.6rem;
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
}
.kat-neue-sektion__trenner::before,
.kat-neue-sektion__trenner::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--vos-line);
}
.kat-neue-sektion__hinweis {
  margin: 0.6rem 0 0;
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
  line-height: 1.5;
}
.kat-picker__filter {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--vos-line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.kat-picker__feld {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--vos-line-strong);
  border-radius: 6px;
  font-size: var(--typo-text);
  font-family: inherit;
}
#kat-picker-alle { align-self: stretch; justify-content: center; }
.is-versteckt { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
 * SOCIAL — POSTS AUS EINER QUELLE (0.39.0.0)
 * Seite „Posts aus einer Quelle erzeugen", Hinweise zur Quelle im
 * Post-Editor, KI-Meldung unter dem Textfeld, Serien-Hinweis in der Liste.
 * ══════════════════════════════════════════════════════════════════ */
.serie-wahl { padding: 1rem 1.1rem; margin-bottom: 1.1rem; }
.serie-wahl__form { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.serie-wahl__feld { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.serie-wahl__hinweis { margin: 0.75rem 0 0; }

.serie-form { display: flex; flex-direction: column; }
.serie-quelle { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.serie-quelle__cover {
  flex: 0 0 96px;
  height: 96px;
  border-radius: 6px;
  background: var(--vos-surface-sub) center / cover no-repeat;
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.serie-quelle__body { flex: 1; min-width: 0; }
.serie-quelle__titel { margin: 0.1rem 0 0.35rem; font-size: var(--typo-abschnitt); line-height: 1.3; }
.serie-quelle__text { margin: 0 0 0.45rem; color: var(--vos-text); line-height: 1.5; }

.serie-liste { margin: 0.35rem 0 0.5rem; padding-left: 1.2rem; }
.serie-liste li { margin: 0.15rem 0; }
.serie-nochmal { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.6rem; font-weight: var(--typo-stark); cursor: pointer; }

.serie-block { margin: 0.4rem 0 1rem; }
.serie-block__label { display: block; margin-bottom: 0.45rem; }

.serie-tabelle td { vertical-align: top; }
.serie-tabelle .serie-tabelle__haken { width: 2.2rem; text-align: center; }
.serie-tabelle__warnung { margin-top: 0.25rem; font-size: var(--typo-klein); color: var(--vos-warn); }
.serie-tabelle__anfang { margin-top: 0.15rem; font-size: var(--typo-klein); color: var(--vos-text-mute); line-height: 1.45; }
.serie-tabelle tr[hidden] { display: none; }
.serie-tabelle tr[data-serie-fest] td { background: var(--vos-surface-2); }

/* 0.40.0.0 — Auswahl-Werkzeuge über der Serien-Tabelle */
.serie-werkzeuge { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.35rem; }
.serie-werkzeuge .form-input { width: auto; margin: 0; }
.serie-werkzeuge__suche { flex: 1 1 14rem; min-width: 10rem; }
.serie-werkzeuge__filter, .serie-werkzeuge__sort { flex: 0 1 auto; }
.serie-werkzeuge__zaehler { font-weight: var(--typo-stark); color: var(--vos-text); white-space: nowrap; }
.serie-werkzeuge__hinweis { margin: 0 0 0.6rem; }
@media (max-width: 700px) {
  .serie-werkzeuge { display: grid; grid-template-columns: 1fr 1fr; }
  .serie-werkzeuge .form-input { width: 100%; min-width: 0; }
  .serie-werkzeuge__suche { grid-column: 1 / -1; }
}

.serie-filterhinweis { margin-top: 1rem; }

.quelle-warnungen { margin-top: 0.75rem; }
.quelle-warnungen[hidden] { display: none; }
.quelle-warnungen .alert { margin-bottom: 0.5rem; }

.ki-meldung {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--vos-line);
  background: var(--vos-surface-sub);
  font-size: var(--typo-text);
  line-height: 1.45;
}
.ki-meldung[hidden] { display: none; }
.ki-meldung--ok     { background: var(--vos-success-soft); border-color: var(--vos-success-line); color: var(--vos-success); }
.ki-meldung--warn   { background: var(--vos-warn-soft);    border-color: var(--vos-warn-line);    color: #6e4400; }
.ki-meldung--fehler { background: var(--vos-danger-soft);  border-color: var(--vos-danger-line);  color: var(--vos-danger); }

@media (max-width: 640px) {
  .serie-quelle { flex-direction: column; }
  .serie-quelle__cover { flex-basis: auto; width: 100%; height: 140px; }
}

/* ══════════════════════════════════════════════════════════════════
   Kataloge: Editor und Stammdaten (0.39.0.0)
   Nur Ergänzungen; bestehende Regeln oben bleiben unverändert.
   ══════════════════════════════════════════════════════════════════ */

/* Editor: Angaben unter dem Buchtitel (Autor, Spitzentitel, Lieferbarkeit) */
.kat-book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
  margin-top: 0.2rem;
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
  line-height: 1.4;
}
.kat-book-meta__warn { color: #92400e; }
.kat-badge {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  line-height: 1.5;
  white-space: nowrap;
  background: var(--vos-surface-sub);
  color: var(--vos-text-soft);
}
.kat-badge--spitze      { background: var(--vos-gold-hell); color: #4a3a12; }
.kat-badge--vorbereitung { background: #fef3c7; color: #92400e; }
.kat-badge--vergriffen  { background: #fee2e2; color: #991b1b; }
.kat-section-intro-marker {
  margin-top: 0.1rem;
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
}

/* Editor: Buch-Picker (rechts) */
.kat-pick-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--vos-surface-2);
  border: 1px solid var(--vos-line);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
  font-family: inherit;
}
.kat-pick-btn:hover { border-color: var(--vos-line-strong); background: var(--vos-surface); }
.kat-pick-btn:disabled { opacity: 0.55; cursor: default; }
.kat-picker__leer {
  color: var(--vos-text-faint);
  font-size: var(--typo-klein);
  text-align: center;
  padding: 1rem 0.5rem;
}

/* Editor: Dialoge (Sektion, Werbetext) */
.kat-modal-label {
  display: block;
  margin: 0 0 0.3rem 0;
  font-weight: var(--typo-stark);
  font-size: var(--typo-klein);
  color: var(--vos-text);
}
.kat-modal-feld {
  display: block;
  width: 100%;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.8rem;
  border: 1px solid var(--vos-line-strong);
  border-radius: 6px;
  font-size: var(--typo-text);
  font-family: inherit;
}
.kat-modal-feld--gross { font-size: var(--typo-text); }
.kat-modal-hinweis {
  margin: 0 0 0.5rem 0;
  color: var(--vos-text-mute);
  font-size: var(--typo-klein);
  line-height: 1.5;
}
.kat-modal-textarea {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--vos-line-strong);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--typo-text);
}
#kat-sektion-modal .vos-quill-wrap .ql-editor { min-height: 9rem; max-height: 40vh; overflow-y: auto; }

/* Stammdaten: Darstellung (Titelseite, Farben, Schalter) */
.kat-einst {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.kat-einst__farben { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.kat-einst__feld { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.kat-einst__feld > label { font-weight: var(--typo-stark); font-size: var(--typo-klein); color: var(--vos-text); }
.kat-einst__feld > small { color: var(--vos-text-mute); font-size: var(--typo-klein); line-height: 1.4; }
.kat-einst__feld > select {
  min-width: 260px;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--vos-line-strong);
  border-radius: 6px;
  font-size: var(--typo-text);
  font-family: inherit;
}
.kat-einst__feld > input[type="color"] {
  width: 64px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--vos-line-strong);
  border-radius: 6px;
  background: var(--vos-surface);
  cursor: pointer;
}
.kat-schalter-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.6rem 1.5rem;
}
.kat-schalter {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0 0 0.6rem 0;
  cursor: pointer;
}
.kat-schalter-liste .kat-schalter { margin-bottom: 0; }
.kat-schalter > input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; }
.kat-schalter > span { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.kat-schalter strong { font-size: var(--typo-text); font-weight: var(--typo-stark); color: var(--vos-text); }
.kat-schalter small { color: var(--vos-text-mute); font-size: var(--typo-klein); line-height: 1.4; }

/* 0.41.0.0 — Versandkosten je Händler (Anlegen- und Konditionsformular).
   Eigener Rahmen, weil die vier Regeln zusammengehören und je nach Wahl
   unterschiedlich viele Felder sichtbar sind. */
.haendler-versand {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem 1rem;
  margin: 0.25rem 0 0.75rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--vos-line, #e5e7eb);
  border-radius: 6px;
  background: var(--vos-surface-2, #f8fafc);
}
.haendler-versand > legend {
  padding: 0 0.4rem;
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  color: var(--vos-text, #1f2937);
}
.haendler-versand > label { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.haendler-versand > label > span {
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  color: var(--vos-text-mute, #64748b);
}
.haendler-versand input,
.haendler-versand select { width: 100%; }
.haendler-versand > label[hidden] { display: none; }
.haendler-versand > p { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) {
  .haendler-versand { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   UMGEBUNGS-KARTEN (0.42.0.0)

   Die verlinkten Listen verwandter Datensätze auf den Detailseiten —
   Bestellungen und Rechnungen am Kunden, Rechnung und Lieferschein an
   der Bestellung. Sie sollen als Gruppe erkennbar sein und sich vom
   Datensatz selbst absetzen, ohne wie ein eigener Seitenbereich zu
   wirken: derselbe Kartenrahmen, nur eine Spur zurückgenommen.
   ══════════════════════════════════════════════════════════════════════ */
.umgebung { --umgebung-rand: color-mix(in srgb, var(--vos-tinte, #1e3a5f) 14%, transparent); }
.umgebung .card__header h2 { font-size: var(--typo-abschnitt); }
.umgebung__hinweis { margin: -0.2rem 0 0.6rem; }
.umgebung .table { margin-bottom: 0; }
.umgebung .table td,
.umgebung .table th { padding-block: 0.42rem; }
.umgebung .empty { padding-block: 0.9rem; }
.umgebung__fuss {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--umgebung-rand);
}
.umgebung__mehr {
  font-size: var(--typo-text);
  font-weight: var(--typo-stark);
  text-decoration: none;
}
.umgebung__mehr:hover { text-decoration: underline; }

/* Zeilen der Umgebungs-Listen sind Wege, keine Tabellendaten: der ganze
   Bereich um den Link soll sich als anklickbar anfühlen. */
.umgebung .table tbody tr:hover { background: color-mix(in srgb, var(--vos-tinte, #1e3a5f) 5%, transparent); }
.umgebung .table a { text-decoration: none; font-weight: var(--typo-stark); }
.umgebung .table a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   BLÖCKE, DIE IN DER LUFT HINGEN (0.43.0.0)

   ANLASS (Jens, 03.10.2026): „bessere zordnung von inhalten. oft hängt
   irgendwas irgendwo als block in der luft."

   Gemessener Befund: 123 Klassennamen im Backend-Markup hatten KEINE
   EINZIGE CSS-Regel — 250 Vorkommen in 24 von 44 Bereichen. Darunter
   genau die Klassen, die etwas halten sollen. Ein `<div class="admin-card">`
   ohne Regel hat keinen Rahmen, kein Innenmaß und keine Fläche: der
   Inhalt fällt aus seinem Behälter und liegt auf dem Seitenhintergrund.
   Nachgeprüft unter Newsletter: die Filterleiste saß in einer Karte,
   „Noch keine Newsletter angelegt." lag nackt daneben.

   Der größere Teil ließ sich im Markup auf vorhandene Namen ziehen —
   `admin-card` → `card`, `empty-state` → `empty`, `alert-error` →
   `alert alert--danger`, `form-group` → `form-row`. Das verkleinert das
   Vokabular, statt es um weitere Aliase zu vergrößern. Was hier steht,
   sind die Klassen, für die es keinen vorhandenen Namen gab.
   ══════════════════════════════════════════════════════════════════════ */

/* Die Beschriftung über einem Formularfeld. Dieselbe Rolle wie
   `.form-grid .row > label`, nur als eigenes Element — sie steht in den
   Newsletter-Masken als <span> über dem Feld. */
.form-label {
  display: block;
  margin-bottom: var(--mass-1);
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  color: var(--vos-text-soft);
}

/* Seiteninhalt der Social-Masken: war ein Behälter ohne Eigenschaften,
   die Abschnitte darin standen deshalb ohne Abstand aneinander. */
.page-content { display: flex; flex-direction: column; gap: var(--mass-5); }

/* Der Innenraum einer Karte. In drei Ansichten liegt der Inhalt in
   einem eigenen `card-body`; ohne Regel lag er am Kartenrand. */
.card-body { padding: 0; }
.card > .card-body:not(:last-child) { margin-bottom: var(--mass-4); }

/* Der erklärende Satz unter einem Kartentitel. */
.card__hint {
  margin: 0 0 var(--mass-3);
  font-size: var(--typo-klein);
  color: var(--vos-text-mute);
}

/* Blätterleiste. `_partials/pagination.php` bringt `vos-pagination` mit,
   drei Newsletter-Ansichten schreiben stattdessen `pagination` — beides
   soll gleich aussehen. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mass-2);
  justify-content: center;
  margin-top: var(--mass-4);
  font-size: var(--typo-text);
}
.pagination a,
.pagination span {
  padding: var(--mass-1) var(--mass-3);
  border: 1px solid var(--vos-line);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.pagination .is-aktiv,
.pagination [aria-current="page"] {
  background: var(--vos-tinte);
  border-color: var(--vos-tinte);
  color: #fff;
}

/* Die Aktionen rechts in der Werkzeugleiste. Es gab nur eine Regel in
   einer Media-Query — ohne Grundregel standen sie links unter der Suche. */
.toolbar__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--mass-2);
  margin-left: auto;
}

/* ── Elf Klassen aus dem geerbten ghos-System, die in KEINEM Stylesheet
   standen (19 Vorkommen in den beiden CMS-Editoren und der Mediathek).
   Der Rest des Systems ist in Ordnung: `blocks.css` wird von den
   Editorseiten selbst nachgeladen und trägt sie — nur diese elf gab es
   nirgends. Sie bekommen hier Regeln aus dem Register, damit sie nicht
   weiter unformatiert dastehen. Umbenannt wird das System NICHT: es
   rendert zu zwei Dritteln die Website, und ein Rundum-Umbenennen von
   1705 Vorkommen wäre Lärm ohne Nutzen. */
.ghos-page { display: flex; flex-direction: column; gap: var(--mass-5); }
.ghos-text { font-size: var(--typo-text); color: var(--vos-text); }
.ghos-text-zart { font-size: var(--typo-klein); color: var(--vos-text-mute); }
.ghos-cms-editor__main { min-width: 0; }
.ghos-cms-editor__side { min-width: 0; }
.ghos-blocks-add { margin-top: var(--mass-4); }
.ghos-blocks-leer__icon { color: var(--vos-text-faint); margin-bottom: var(--mass-2); }
.ghos-pill--zart { background: var(--vos-surface-sub); color: var(--vos-text-mute); }
.ghos-pill--ohne-punkt::before { content: none; }
.ghos-mediathek-upload__kategorie { margin-top: var(--mass-2); }
.ghos-mediathek-karte__link { color: inherit; text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════
   MARKEN: FÜNF TÖNE (0.43.0.0)

   Vorher waren 41 Badge-Klassen definiert — mehrere für dieselbe
   Bedeutung (ok/success, mute/muted/neutral/plain, danger/error,
   warn/warning), dazu Klassen für einzelne Datenbankwerte
   (--bezahlt, --issued, --paid, --versandt, --storniert, --cancelled …),
   die Semantik und Domäne vermischten. Und drei Klassen, die das Markup
   benutzt, waren NIRGENDS definiert: `badge--muted` (8×),
   `badge--neutral` (4×), `badge--spitze` — sie erschienen unformatiert.

   Welchen Ton ein Wert hat, entscheidet jetzt
   Services/Verlag/Beschriftung::ton(). Hier stehen nur noch die fünf
   Töne. Die alten Namen bleiben als Aliase, damit bestehendes Markup
   weiterläuft.
   ══════════════════════════════════════════════════════════════════════ */
.badge--neutral,
.badge--muted { background: var(--vos-surface-sub); color: var(--vos-text-mute); }
.badge--info    { background: var(--vos-info-soft);    color: var(--vos-tinte);   }
.badge--ok      { background: var(--vos-success-soft); color: var(--vos-success); }
.badge--warn    { background: var(--vos-warn-soft);    color: var(--vos-warn);    }
.badge--gefahr  { background: var(--vos-danger-soft);  color: var(--vos-danger);  }

/* Aliase der bisherigen Namen auf die fünf Töne. */
.badge--success { background: var(--vos-success-soft); color: var(--vos-success); }
.badge--danger,
.badge--error   { background: var(--vos-danger-soft);  color: var(--vos-danger);  }
.badge--warning { background: var(--vos-warn-soft);    color: var(--vos-warn);    }
.badge--spitze  { background: var(--vos-info-soft);    color: var(--vos-tinte);   }

/* ══════════════════════════════════════════════════════════════════════
   DETAILSEITE: EIN SPALTENSYSTEM (0.43.0.0)

   Links der Datensatz selbst, rechts in einem Zug alles, was um ihn
   herum liegt. Eine Aufteilung für alle Detailseiten, damit man sie
   nicht je Bereich neu lernen muss.

   ANLASS (Jens, 03.10.2026, an einem Bild aus dem Betrieb): „einmal
   rechte spalte der kasten da dann volle bildbreite status. warum wieder
   solche leeren flächen warum das nicht nebeneinander".

   Das Bestelldetail führte ZWEI Spaltensysteme, 280 Zeilen auseinander:
   oben ein Flexbox mit `space-between` (eine Textzeile links, der
   Aktionskasten rechts, dazwischen rund 700 × 215 Pixel Leere), weiter
   unten ein echtes Gitter für Positionen und Umfeld. Die Folge: der
   Aktionskasten stand allein über einem Loch, während Kunde, Rechnung
   und Lieferschein 900 Pixel weiter unten im anderen Gitter lagen.

   Im Backend waren 52 verschiedene Spaltenaufteilungen im Umlauf —
   dieselbe Krankheit wie bei den 46 Schriftgrößen, nur in der Breite.
   ══════════════════════════════════════════════════════════════════════ */
.detailseite {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mass-5);
  align-items: start;
}
@media (min-width: 1000px) {
  .detailseite { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* Die linke Spalte muss schrumpfen dürfen, sonst sprengt eine breite
   Tabelle das Gitter statt zu scrollen. */
.detailseite__haupt { min-width: 0; }

.detailseite__rand { min-width: 0; }
/* Die Überschriften der rechten Spalte sind Wegweiser, keine Kapitel:
   eine Stufe kleiner und gesperrt, damit sie die Abschnitte der linken
   Spalte nicht überstimmen — abgesetzt über Versalien und Sperrung,
   nicht über eine eigene Größe. */
.detailseite__rand h3 {
  margin: var(--mass-5) 0 var(--mass-2);
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  text-transform: uppercase;
  letter-spacing: var(--typo-sperrung);
  color: var(--vos-text-mute);
}
.detailseite__rand > :first-child,
.detailseite__rand h3:first-child { margin-top: 0; }
.detailseite__rand p { margin: 0 0 var(--mass-2); }
.detailseite__storno { margin-bottom: var(--mass-3); }

/* Die Kopfzeile über dem Gitter: Datum, Status, Marken — eine Zeile in
   voller Breite statt der linken Hälfte eines Flexbox. */
.detailseite__kopfzeile {
  margin: 0 0 var(--mass-4);
  padding-bottom: var(--mass-3);
  border-bottom: 1px solid var(--vos-line-soft);
}

/* ══════════════════════════════════════════════════════════════════════
   EINGEGRENZTE LISTEN (0.42.0.0)

   Steht eine Liste für einen einzelnen Kunden und nicht für das ganze
   Haus, muss das zu sehen sein. Eine Liste mit vier Zeilen, die aussieht
   wie die Gesamtliste, ist die unangenehmste Sorte Fehler: sie sieht
   richtig aus. Darum eine eigene Zeile über der Werkzeugleiste — in der
   Leitfarbe, damit sie zum Datensatz gehört und nicht wie eine Warnung
   wirkt, und mit dem Weg zurück an ihrem rechten Ende.
   ══════════════════════════════════════════════════════════════════════ */
.eingrenzung {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.9rem;
  padding: 0.55rem 0.8rem;
  border-left: 3px solid var(--vos-tinte, #1e3a5f);
  border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, var(--vos-tinte, #1e3a5f) 6%, transparent);
}
.eingrenzung__text { margin: 0; }
.eingrenzung__was {
  font-size: var(--typo-klein);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vos-tinte, #1e3a5f);
  opacity: 0.75;
}
.eingrenzung__name {
  margin-left: 0.4rem;
  font-weight: var(--typo-stark);
  color: var(--vos-tinte, #1e3a5f);
  text-decoration: none;
}
a.eingrenzung__name:hover { text-decoration: underline; }
.eingrenzung__weg {
  font-size: var(--typo-text);
  color: var(--vos-tinte, #1e3a5f);
  opacity: 0.8;
}
.eingrenzung__weg:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════
   SCHNELLSUCHE IN DER TOPBAR (0.42.0.0)

   Ein Feld auf jeder Seite, damit der Weg zu einem Datensatz nicht mehr
   über Menü → Bereich → Suchfeld → tippen führt. Ruhig gehalten: es
   soll greifbar sein, ohne die Brotkrumen zu verdrängen.
   ══════════════════════════════════════════════════════════════════════ */
.admin-suche {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 clamp(14rem, 26vw, 24rem);
  margin-inline: auto 0.75rem;
}
.admin-suche__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.admin-suche__icon {
  position: absolute;
  inset-inline-start: 0.6rem;
  display: flex;
  color: var(--vos-tinte-hell, #4a6685);
  pointer-events: none;
}
input.admin-suche__feld {   /* 0.47.1.0: input[type="search"] (0,1,1) schlug die Klasse — das Icon lag über dem ersten Buchstaben */
  width: 100%;
  padding: 0.44rem 2.2rem 0.44rem 2.1rem;
  border: 1px solid var(--vos-line, #d9d4c8);
  border-radius: 7px;
  background: var(--vos-papier, #fdfcf8);
  font: inherit;
  font-size: var(--typo-text);
  line-height: 1.3;
}
.admin-suche__feld::placeholder { color: var(--vos-tinte-hell, #4a6685); opacity: 0.75; }
.admin-suche__feld:focus {
  outline: 2px solid var(--vos-tinte, #1e3a5f);
  outline-offset: 1px;
  background: #fff;
}
/* Das Tastaturkürzel verschwindet, sobald getippt wird — sonst steht es
   im Weg, wo der Text hinläuft. */
.admin-suche__kuerzel {
  position: absolute;
  inset-inline-end: 0.5rem;
  padding: 0.05rem 0.34rem;
  border: 1px solid var(--vos-line, #d9d4c8);
  border-radius: 4px;
  background: #fff;
  color: var(--vos-tinte-hell, #4a6685);
  font-family: var(--vos-mono, ui-monospace, monospace);
  font-size: var(--typo-klein);
  pointer-events: none;
}
.admin-suche:focus-within .admin-suche__kuerzel { display: none; }

/* ── Vorschlagsliste ── */
.admin-suche__liste {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.35rem);
  z-index: 120;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  padding: 0.3rem;
  border: 1px solid var(--vos-line, #d9d4c8);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(30, 58, 95, 0.16);
}
.admin-suche__liste[hidden] { display: none; }
.admin-suche__gruppe {
  padding: 0.45rem 0.6rem 0.2rem;
  color: var(--vos-tinte-hell, #4a6685);
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-suche__treffer {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}
.admin-suche__treffer:hover,
.admin-suche__treffer.is-aktiv {
  background: color-mix(in srgb, var(--vos-tinte, #1e3a5f) 8%, transparent);
}
.admin-suche__treffer-text { min-width: 0; flex: 1; }
.admin-suche__treffer-haupt {
  display: block;
  font-weight: var(--typo-stark);
  font-size: var(--typo-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-suche__treffer-zusatz {
  display: block;
  color: var(--vos-tinte-hell, #4a6685);
  font-size: var(--typo-klein);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-suche__treffer-rechts {
  flex: 0 0 auto;
  color: var(--vos-tinte-hell, #4a6685);
  font-size: var(--typo-klein);
  font-variant-numeric: tabular-nums;
}
.admin-suche__fuss {
  display: block;
  padding: 0.45rem 0.6rem;
  border-top: 1px solid var(--vos-line-soft, #ece8dd);
  margin-top: 0.3rem;
  font-size: var(--typo-klein);
  font-weight: var(--typo-stark);
  text-decoration: none;
}
.admin-suche__leer {
  padding: 0.7rem 0.6rem;
  color: var(--vos-tinte-hell, #4a6685);
  font-size: var(--typo-text);
}

/* Auf schmalen Geräten nimmt das Feld die ganze Breite unter der
   Kopfzeile ein, statt mit den Brotkrumen um den Platz zu streiten. */
@media (max-width: 860px) {
  .admin-suche { flex-basis: 100%; order: 10; margin: 0.45rem 0 0; }
  .admin-suche__kuerzel { display: none; }
}

/* ── Trefferseite ── */
.suche-seite__gruppe { margin-bottom: 1.4rem; }
.suche-seite__gruppe h2 { font-size: var(--typo-abschnitt); margin-bottom: 0.5rem; }


/* ── 0.44.2.0 — Mail-Queue: Auswahl per Haken ─────────────────────────
   Anlass: „ich muss jedes einzeln löschen. ne auswahl per häckchen
   fehlanzeige auch und gerade bei fehlgeschlagenen." */
.q-haken             { width: 2.25rem; text-align: center; }
.q-haken input       { cursor: pointer; }
.q-leiste {
  display: flex; align-items: center; gap: var(--mass-3);
  flex-wrap: wrap;
  padding: var(--mass-3) var(--mass-4);
  margin-bottom: var(--mass-3);
  background: var(--vos-tinte-soft, #eef2f7);
  border: 1px solid var(--vos-linie, #e2e8f0);
  border-radius: var(--radius, 6px);
}
.q-leiste[hidden]    { display: none; }
.q-leiste__zahl      { font-size: var(--typo-text); margin-right: auto; }
.q-alle {
  display: flex; align-items: center; gap: var(--mass-2);
  flex-wrap: wrap;
  margin-bottom: var(--mass-3);
}
.q-alle form         { display: inline; }


/* ══ 0.47.0.0 — Vorbestellungen ═══════════════════════════════════ */
.vb-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.vb-leiste__zahl { font-size: var(--typo-text); }
.vb-tabelle td.vb-wahl, .vb-tabelle th.vb-wahl { width: 2.2rem; text-align: center; }
.vb-tabelle .zeile-link__nr { white-space: nowrap; }
.vb-positionen { margin: 0; padding: 0; list-style: none; font-size: var(--typo-text); line-height: 1.5; }
.vb-positionen__neu { color: var(--vos-tinte, #1e3a5f); font-weight: var(--typo-stark); }
.vb-fehlt { color: var(--vos-text-soft, #4a463f); font-size: var(--typo-klein); }
.vb-bereit { color: var(--vos-success, #2c6b3c); font-weight: var(--typo-stark); font-size: var(--typo-klein); }
.vb-titel { margin: 0 0 .25rem; }
.bei-null [hidden] { display: none !important; }
.vormerkung-karte { border-left: 4px solid var(--vos-info, #2a5788); }
.vormerkung-karte__text { margin: .25rem 0 .75rem; }

/* ══ 0.47.1.0 — Sammelaktion im Kasten „Zu versenden" ═══════════════ */
.sammel-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 .75rem; padding: .55rem .8rem; background: var(--vos-surface-sub, #f3efe6); border-radius: 6px; font-size: var(--typo-text); }
.sammel-leiste__feld { display: inline-flex; align-items: center; gap: .4rem; }
.sammel-leiste__feld select { padding: .25rem .4rem; }
.sammel-leiste__check { display: inline-flex; align-items: center; gap: .35rem; }
.sammel-leiste__luecke { flex: 1; }
.table th.sammel-wahl, .table td.sammel-wahl { width: 2.2rem; text-align: center; }

/* 0.47.1.1 — Breite Tabellen scrollen in sich, auf JEDER Bildschirmbreite.
   admin.js legt den Rahmen `.tabelle-scroll` immer an, wenn eine Tabelle über
   den Inhaltsbereich hinausragt — die Regel dazu stand aber nur im Handy-Block
   (≤ 900 px). Zwischen 900 und ~1250 px Fensterbreite (kleines Notebook, halbes
   Fenster) lief die Tabelle deshalb über den Kasten hinaus und schob die ganze
   Seite seitwärts, z. B. „Zu versenden" mit der Hakenspalte. */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin-bottom: 1rem; }
.tabelle-scroll > table { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════
   0.48.0.0 — Nachricht an Kunden (Formular, Vorschau, Verlauf, Marke)
   ══════════════════════════════════════════════════════════════════════ */
.kn-feld { display: block; margin: 0 0 var(--mass-4); font-weight: var(--typo-stark); }
.kn-feld small { font-weight: normal; }
.kn-feld input, .kn-feld textarea { display: block; width: 100%; margin-top: var(--mass-1); font-weight: normal; }
.kn-text { min-height: 22rem; line-height: 1.5; font-family: inherit; }
.kn-zwei { display: grid; grid-template-columns: 1fr; gap: 0 var(--mass-4); }
@media (min-width: 900px) { .kn-zwei { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.kn-platzhalter summary { cursor: pointer; color: var(--vos-tinte); font-size: var(--typo-klein); }
.kn-platzhalter dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--mass-1) var(--mass-3); margin: var(--mass-3) 0; font-size: var(--typo-klein); }
.kn-platzhalter dt { margin: 0; } .kn-platzhalter dd { margin: 0; color: var(--vos-text-soft); }
.kn-vorschau { margin-top: var(--mass-4); }
.kn-vorschau__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mass-3); margin-bottom: var(--mass-3); }
.kn-vorschau__kopf h3 { flex: 1 1 auto; }
.kn-vorschau__wahl { display: flex; align-items: center; gap: var(--mass-2); font-size: var(--typo-klein); }
.kn-vorschau__wahl select { max-width: 22rem; }
.kn-vorschau__an { margin: 0; font-size: var(--typo-klein); color: var(--vos-text-soft); }
.kn-vorschau__betreff { margin: var(--mass-1) 0 var(--mass-3); font-weight: var(--typo-stark); }
.kn-vorschau__mail { border: 1px solid var(--vos-line); border-radius: 6px; background: #fff; padding: var(--mass-4) var(--mass-5); line-height: 1.55; }
.kn-vorschau__mail p { margin: 0 0 var(--mass-3); }
.kn-warn { color: var(--vos-warn); font-weight: var(--typo-stark); font-size: var(--typo-klein); }
.kn-senden .aktionen-karte__btn { width: 100%; margin-top: var(--mass-2); }
.kn-liste { list-style: none; margin: 0; padding: 0; font-size: var(--typo-klein); }
.kn-liste li { padding: var(--mass-2) 0; border-bottom: 1px solid var(--vos-line-soft); }
.kn-liste__aus { opacity: .6; }
.kn-marke { color: var(--vos-tinte); white-space: nowrap; }
.kn-verlauf { list-style: none; margin: 0 0 var(--mass-5); padding: 0; }
.kn-verlauf li { padding: var(--mass-2) 0; border-bottom: 1px solid var(--vos-line-soft); }
.kn-verlauf summary { cursor: pointer; }
.kn-verlauf__text { margin: var(--mass-2) 0 0 var(--mass-4); padding: var(--mass-3); background: var(--vos-surface-sub); border-radius: 6px; font-size: var(--typo-klein); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════
 * 0.49.0.0 — ZUGRIFFSSTATISTIK (Baustein _components/_statistik.php)
 * Dieselben Klassen stehen in site.css für den Autorenbereich.
 * Eine Reihe, eine Farbe: die Säulen tragen die Leitfarbe, Text bleibt
 * in Textfarbe. Werte erscheinen beim Darüberfahren oder Antippen.
 * ══════════════════════════════════════════════════════════════════ */
.stat { display: flex; flex-direction: column; gap: var(--mass-5); }
.stat__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mass-3); }
.stat__ansicht { display: inline-flex; border: 1px solid var(--vos-line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.stat__ansicht-link { padding: var(--mass-2) var(--mass-4); color: var(--vos-text-soft); text-decoration: none; font-size: var(--typo-text); }
.stat__ansicht-link + .stat__ansicht-link { border-left: 1px solid var(--vos-line-strong); }
.stat__ansicht-link:hover { background: var(--vos-tinte-soft); color: var(--vos-tinte); }
.stat__ansicht-link.is-aktiv { background: var(--vos-tinte); color: #fff; }
.stat__filter { display: flex; align-items: center; gap: var(--mass-2); }
.stat__filter-label { font-size: var(--typo-klein); color: var(--vos-text-mute); text-transform: uppercase; letter-spacing: var(--typo-sperrung); }
.stat__filter select { max-width: 24rem; }
.stat__kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--mass-3); }
.stat__kachel { background: var(--vos-surface); border: 1px solid var(--vos-line); border-radius: var(--radius-md); padding: var(--mass-4); }
.stat__kachel-label { font-size: var(--typo-klein); color: var(--vos-text-mute); text-transform: uppercase; letter-spacing: var(--typo-sperrung); }
.stat__kachel-wert { font-family: var(--vos-serif); font-size: var(--typo-titel); font-weight: var(--typo-stark); color: var(--vos-tinte-dunkel); font-variant-numeric: tabular-nums; line-height: var(--zeile-eng); margin-top: var(--mass-1); }
.stat__kachel-meta { font-size: var(--typo-klein); color: var(--vos-text-mute); margin-top: var(--mass-1); }
.stat__diagramm { margin: 0; background: var(--vos-surface); border: 1px solid var(--vos-line); border-radius: var(--radius-md); padding: var(--mass-4); }
.stat__titel { font-size: var(--typo-abschnitt); font-weight: var(--typo-stark); color: var(--vos-text); margin: 0 0 var(--mass-3); }
.stat__saeulen { display: flex; align-items: stretch; gap: 2px; height: 220px; margin-bottom: var(--mass-5); border-bottom: 1px solid var(--vos-line-strong); }
.stat__spalte { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; outline: none; }
.stat__flaeche { flex: 1 1 auto; display: flex; align-items: flex-end; }
.stat__saeule { width: 100%; height: var(--hoehe, 0%); min-height: 1px; background: var(--vos-tinte); border-radius: 4px 4px 0 0; }
.stat__spalte--aktuell .stat__saeule { background: var(--vos-tinte-hell); }
.stat__spalte--vor .stat__flaeche { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--vos-line) 5px 6px); }
.stat__spalte:hover .stat__saeule, .stat__spalte:focus .stat__saeule { background: var(--vos-bordeaux); }
.stat__achse { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: var(--mass-1); font-size: var(--typo-klein); color: var(--vos-text-mute); white-space: nowrap; }
.stat__tip { position: absolute; bottom: calc(100% - 2rem); left: 50%; transform: translateX(-50%); z-index: 3; display: none; padding: var(--mass-1) var(--mass-2); background: var(--vos-tinte-dunkel); color: #fff; font-size: var(--typo-klein); border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; }
.stat__spalte:hover .stat__tip, .stat__spalte:focus .stat__tip { display: block; }
.stat__spalte:first-child .stat__tip { left: 0; transform: none; }
.stat__spalte:last-child .stat__tip { left: auto; right: 0; transform: none; }
.stat__tabelle summary { cursor: pointer; color: var(--vos-tinte); font-size: var(--typo-text); }
.stat__tabelle[open] summary { margin-bottom: var(--mass-3); }
.stat__tabelle-rahmen { overflow-x: auto; }
.stat__tab { width: 100%; border-collapse: collapse; font-size: var(--typo-text); background: var(--vos-surface); }
.stat__tab th, .stat__tab td { padding: var(--mass-2) var(--mass-3); border-bottom: 1px solid var(--vos-line-soft); text-align: left; font-weight: var(--typo-normal); }
.stat__tab thead th { font-size: var(--typo-klein); color: var(--vos-text-mute); text-transform: uppercase; letter-spacing: var(--typo-sperrung); border-bottom: 1px solid var(--vos-line-strong); }
.stat__tab tbody th { font-weight: var(--typo-stark); }
.stat__tab .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__tab tr.is-aktiv { background: var(--vos-tinte-soft); }
.stat__zeile--vor { color: var(--vos-text-faint); }
.stat__marke { margin-left: var(--mass-2); font-size: var(--typo-klein); color: var(--vos-text-mute); font-weight: var(--typo-normal); }
.stat__abschnitt { display: block; }
.stat__herkunft { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mass-2); }
.stat__herkunft-zeile { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr 7.5rem; align-items: center; gap: var(--mass-3); font-size: var(--typo-text); }
.stat__herkunft-balken { height: 10px; background: var(--vos-tinte-soft); border-radius: 5px; overflow: hidden; }
.stat__herkunft-balken span { display: block; height: 100%; width: var(--anteil, 0%); background: var(--vos-tinte); border-radius: 5px; }
.stat__herkunft-wert { text-align: right; font-variant-numeric: tabular-nums; }
.stat__verweise { margin: var(--mass-3) 0 0; font-size: var(--typo-klein); }
.stat__hinweis { margin: 0; font-size: var(--typo-klein); color: var(--vos-text-mute); line-height: var(--zeile-weit); }
.stat__hinweis--warn { color: var(--vos-warn); font-weight: var(--typo-stark); }
@media (max-width: 640px) {
  .stat__herkunft-zeile { grid-template-columns: 1fr auto; }
  .stat__herkunft-balken { grid-column: 1 / -1; grid-row: 2; }
  .stat__saeulen { height: 160px; }
}

/* ── 0.49.0.0 — Freigaben aus dem Autorenbereich ─────────────────── */
.frg-liste { list-style: none; margin: 0; padding: 0; }
.frg-liste li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--mass-2); padding: var(--mass-3) 0; border-bottom: 1px solid var(--vos-line-soft); }
.frg-liste__meta { font-size: var(--typo-klein); color: var(--vos-text-mute); }
.frg-vergleich { width: 100%; border-collapse: collapse; font-size: var(--typo-text); table-layout: fixed; }
.frg-vergleich th, .frg-vergleich td { padding: var(--mass-3); border-bottom: 1px solid var(--vos-line-soft); vertical-align: top; text-align: left; font-weight: var(--typo-normal); overflow-wrap: anywhere; }
.frg-vergleich thead th { font-size: var(--typo-klein); color: var(--vos-text-mute); text-transform: uppercase; letter-spacing: var(--typo-sperrung); border-bottom: 1px solid var(--vos-line-strong); }
.frg-vergleich tbody th { width: 11rem; font-weight: var(--typo-stark); }
.frg-vergleich__alt { color: var(--vos-text-soft); }
.frg-vergleich__neu { background: var(--vos-success-soft); }
.frg-vergleich__leer { color: var(--vos-text-faint); font-style: italic; }
.frg-konflikt { margin-top: var(--mass-2); font-size: var(--typo-klein); color: var(--vos-warn); }
.frg-bild { max-width: 180px; max-height: 220px; border-radius: var(--radius-sm); border: 1px solid var(--vos-line); display: block; }
/* 0.51.0.0 — Bilder im Rahmen der Autorenseite (mit Ausschnitt) */
.frg-rahmen { border: 1px solid var(--vos-line); background: var(--vos-papier-tief); }
.frg-rahmen--rund { width: 140px; height: 140px; }
.frg-rahmen--banner { width: min(360px, 100%); aspect-ratio: 3 / 1; border-radius: var(--radius-sm); }
.frg-zeilen { margin: 0; padding-left: var(--mass-4); }
.frg-zeilen li { margin-bottom: var(--mass-2); }
.frg-ablehnen textarea { width: 100%; min-height: 6rem; }
.frg-ablehnen summary { cursor: pointer; color: var(--vos-danger); }
.frg-knoepfe { display: flex; flex-wrap: wrap; gap: var(--mass-2); align-items: center; }

/* ── 0.49.0.0 — Autorenzugang in der Autorenakte ─────────────────── */
.autor-zugang__form { display: flex; flex-direction: column; gap: var(--mass-2); margin-top: var(--mass-3); }
.autor-zugang__form input[type="email"] { width: 100%; }
.autor-zugang__knoepfe { display: flex; flex-wrap: wrap; gap: var(--mass-2); margin-top: var(--mass-3); }

/* ── 0.49.1.0 — Feld „Buch suchen" (Services\Verlag\Books\Buchwahl) ─── */
.buchwahl { position: relative; display: flex; flex-direction: column; gap: var(--mass-2); min-width: 0; }
.buchwahl__auswahl { display: flex; flex-wrap: wrap; gap: var(--mass-2); align-items: center; }
.buchwahl__leer { font-size: var(--typo-klein); color: var(--vos-text-mute); }
.buchwahl__karte { display: inline-flex; align-items: center; gap: var(--mass-2); max-width: 100%; padding: var(--mass-1) var(--mass-1) var(--mass-1) var(--mass-2); background: var(--vos-tinte-soft); border: 1px solid var(--vos-tinte-line); border-radius: var(--radius-sm); }
.buchwahl__karte--autor { background: var(--vos-surface-sub); border-color: var(--vos-line-strong); }
.buchwahl__karte-text { display: flex; flex-direction: column; min-width: 0; line-height: var(--zeile-eng); }
.buchwahl__karte-text strong { font-weight: var(--typo-stark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buchwahl__zusatz, .buchwahl__untertitel { font-size: var(--typo-klein); color: var(--vos-text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buchwahl__art { font-size: var(--typo-klein); color: var(--vos-text-mute); text-transform: uppercase; letter-spacing: var(--typo-sperrung); }
.buchwahl__cover { width: 28px; height: 40px; object-fit: contain; flex: 0 0 auto; background: var(--vos-surface-sub); border-radius: 2px; }
.buchwahl__cover--leer { display: inline-block; }
.buchwahl__weg { flex: 0 0 auto; width: 26px; height: 26px; border: 0; background: transparent; color: var(--vos-text-mute); cursor: pointer; border-radius: var(--radius-sm); font-size: var(--typo-abschnitt); line-height: 1; }
.buchwahl__weg:hover, .buchwahl__weg:focus-visible { background: var(--vos-danger-soft); color: var(--vos-danger); }
.buchwahl__suche-rahmen { position: relative; }
.buchwahl__suche { width: 100%; }
.buchwahl__treffer { position: absolute; z-index: 40; top: calc(100% + 2px); left: 0; right: 0; max-height: 22rem; overflow-y: auto; margin: 0; padding: var(--mass-1) 0; list-style: none; background: var(--vos-surface); border: 1px solid var(--vos-line-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(20, 16, 12, 0.12); }
.buchwahl__treffer-zeile { display: flex; align-items: center; gap: var(--mass-2); padding: var(--mass-2) var(--mass-3); cursor: pointer; min-width: 0; }
.buchwahl__treffer-zeile.is-aktiv { background: var(--vos-tinte-soft); }
.buchwahl__treffer-zeile.is-gewaehlt { opacity: .6; }
.buchwahl__treffer-zeile--autor { border-bottom: 1px solid var(--vos-line-soft); }
.buchwahl__nichts { padding: var(--mass-2) var(--mass-3); color: var(--vos-text-mute); font-size: var(--typo-text); }
.stat__filter--suche { flex: 1 1 32rem; justify-content: flex-end; flex-wrap: wrap; }
.stat__filter--suche .buchwahl { flex: 1 1 22rem; max-width: 30rem; }
.stat__mehr { margin: var(--mass-2) 0 0; font-size: var(--typo-klein); color: var(--vos-text-mute); }
.nachdruck-buch { display: flex; flex-direction: column; gap: var(--mass-1); }

/* ── 0.52.0.0 Datensicherung (admin/backup) ───────────────────────── */
.sicherung-kacheln { margin-bottom: var(--mass-4); }
.sicherung-karte { margin-bottom: var(--mass-4); }
.sicherung-karte[hidden] { display: none; }
.sicherung-karte > h2, .sicherung-karte .card__header h2 { font-size: var(--typo-abschnitt); margin: 0 0 var(--mass-2); }
.sicherung-karte h3 { font-size: var(--typo-text); font-weight: var(--typo-stark); margin: var(--mass-4) 0 var(--mass-2); }
.sicherung-karte .hint { font-size: var(--typo-klein); color: var(--vos-text-mute); line-height: 1.5; }
.sicherung-abstand { margin-top: var(--mass-4); }
.sicherung-schmal { max-width: 36rem; }
.sicherung-fehler { color: var(--vos-danger); }
.sicherung-name { word-break: break-all; font-size: var(--typo-klein); }
.sicherung-balken { height: 10px; background: var(--vos-line); border-radius: 5px; overflow: hidden; max-width: 40rem; margin: var(--mass-2) 0; }
.sicherung-balken i { display: block; height: 100%; width: 0; background: var(--vos-tinte); transition: width .4s; }
.sicherung-zusatz td { padding-top: 0; border-top: 0; }
.sicherung-zusatz summary { cursor: pointer; color: var(--vos-text-mute); font-size: var(--typo-klein); }
.sicherung-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--mass-4) var(--mass-5, 1.5rem); padding: var(--mass-3) 0 var(--mass-2); }
.sicherung-raster form { border-left: 3px solid var(--vos-line); padding-left: var(--mass-3); }
.sicherung-datei { max-width: 26rem; }
.sicherung-code { white-space: pre-wrap; word-break: break-all; background: var(--vos-surface-2); padding: var(--mass-2) var(--mass-3); border-radius: 6px; font-size: var(--typo-klein); }
.sicherung-ziel { border: 1px solid var(--vos-line); border-radius: 8px; padding: var(--mass-2) var(--mass-3); margin: var(--mass-3) 0; }
.sicherung-ziel legend { font-weight: var(--typo-stark); padding: 0 .3rem; }
.js .sicherung-ziel legend { display: none; }
.sicherung-karte .form-row--inline + .form-row--inline { margin-top: var(--mass-1); }
.sicherung-karte .tabelle-scroll { position: relative; } /* hält .sr-only in den Spaltenköpfen im Rahmen */
.sicherung-knoepfe { display: flex; flex-wrap: wrap; gap: var(--mass-2); align-items: center; }
.sicherung-karte--wichtig { border-left: 4px solid var(--vos-danger); }