/* ============================================================
   Druckassistent – Komponenten-Layer

   WICHTIG: Diese Datei enthält KEINE Farb-/Schrift-/Abstandswerte.
   Alle Werte kommen aus der Theme-Datei (static/css/themes/*.css),
   die vor dieser Datei geladen wird. Neues Theme = neue Datei dort,
   hier ist nichts anzupassen.
   ============================================================ */

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-family);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}
h1 { font-size: 1.6rem; font-weight: 800; color: var(--text); text-align: center; margin-bottom: 1.25rem; }
/* Folgt ein Untertitel, rückt er dicht an die Überschrift */
h1:has(+ .subtitle), h1:has(+ .admin-greeting) { margin-bottom: .35rem; }
h2 { font-size: 1.1rem; font-weight: 700; color: var(--text); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ── Top-Navigation ─────────────────────────────────────────── */
.topnav-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
  position: sticky; top: 0; z-index: 100;
}
.topnav-logo {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1rem; color: var(--primary);
  text-decoration: none;
}
.topnav-logo:hover { text-decoration: none; opacity: .8; }
.logo-text { letter-spacing: -.01em; }
.topnav-right { display: none; }

/* ── Hamburger ──────────────────────────────────────────────── */
.hamburger {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 6px;
  background: none; border: none; cursor: pointer; border-radius: var(--radius-sm);
}
.hamburger svg line {
  stroke: var(--primary); stroke-width: 2; stroke-linecap: round;
  transform-box: fill-box; transform-origin: center;
  transition: transform .25s, opacity .25s;
}
.hamburger.open svg line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open svg line:nth-child(2) { opacity: 0; }
.hamburger.open svg line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile-Nav ─────────────────────────────────────────────── */
.mobile-nav {
  display: flex; flex-direction: column;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--surface);
  overflow: hidden; max-height: 0;
  transition: max-height .3s ease;
}
.mobile-nav.open {
  max-height: 300px;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.mobile-nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.5rem;
  font-size: .95rem; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
  transition: background .12s, color .12s;
}
.mobile-nav-item:last-child { border-bottom: none; }
.mobile-nav-item:hover { background: var(--surface-2); color: var(--text); }
.mobile-nav-item.active { color: var(--primary); background: var(--primary-light); }

.nav-item {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem;
  border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; color: var(--text-muted);
  transition: background .15s, color .15s;
  text-decoration: none;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.active {
  background: var(--nav-active-bg);
  color: var(--nav-active-fg);
}

/* ── Main Content ───────────────────────────────────────────── */
.main-content {
  flex: 1;
  width: 100%; max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  text-align: center; padding: 1rem;
  font-size: .8rem; color: var(--text-light);
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  display: flex; justify-content: center; align-items: center; gap: .5rem;
}

/* ── Upload-Bereich ─────────────────────────────────────────── */
.upload-section { }
.subtitle { text-align: center; color: var(--text-muted); margin-bottom: 1.5rem; font-size: .95rem; }

.upload-box {
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem; padding: 2.5rem 2rem;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color .2s, box-shadow .2s;
  text-align: center;
}
.upload-icon { color: var(--primary); opacity: .7; }
.upload-box p { color: var(--text-muted); font-size: .9rem; margin: 0; }
.upload-box strong { color: var(--text); }
.upload-box.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: var(--shadow);
}
.hint { font-size: .8rem; color: var(--text-light); }

/* Upload Progress */
#upload-progress-list { width: 100%; display: flex; flex-direction: column; gap: .5rem; margin-top: .25rem; }
.upload-progress-item {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .5rem .75rem;
  background: var(--surface-2); border-radius: var(--radius);
  font-size: .82rem;
}
.upload-progress-item .filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-bar-row { display: flex; align-items: center; gap: .6rem; }
.upload-progress-item .progress-pct { flex: 0 0 auto; width: 2.5rem; text-align: right; color: var(--text-muted); font-size: .78rem; }
.upload-progress-item.done .filename { color: var(--text-muted); }
.upload-progress-item.done .progress-pct { color: var(--accent-green); font-weight: 700; }
.upload-bar-track {
  flex: 1; min-width: 0; height: 6px;
  background: var(--border-soft);
  border-radius: 99px;
  overflow: hidden;
}
.upload-bar-fill {
  height: 100%;
  background: var(--grad-btn);
  border-radius: 99px;
  transition: width .2s ease;
}
.upload-progress-item.error .upload-bar-fill { background: var(--danger); }

/* ── File-Tabs ──────────────────────────────────────────────── */
/* Abstand kommt vom margin-bottom der vorhergehenden Karte (1rem) */
#file-tabs-wrapper { margin-top: 0; }
.tabs-header {
  display: flex; flex-wrap: wrap; gap: .35rem;
  border-bottom: 2px solid var(--border-soft);
  margin-bottom: 0;
}
.tab-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem 1.1rem;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border-soft);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: .82rem; font-weight: 500; cursor: pointer;
  transition: background .12s, color .12s;
}
.tab-btn { text-decoration: none; }
.tab-btn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.tab-btn.active {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--border-soft);
  border-bottom: 2px solid var(--surface);
  margin-bottom: -2px;
  font-weight: 600;
}
/* Schließkreuz der Dateireiter.
 *
 * Bis zum 28.09.2026 war es ein graues × ohne Fläche (`--text-light`) und
 * bekam erst beim Überfahren einen Hintergrund. Auf Wunsch des Betreibers
 * jetzt dauerhaft ein farbiges Quadrat mit weißem Kreuz: Es war schlecht zu
 * erkennen, und was man nicht sieht, findet man auch nicht, wenn man eine
 * Datei wieder loswerden will.
 *
 * Die Fläche trägt die Hausfarbe (`--primary`), damit das Kreuz in jedem
 * Theme zu den Knöpfen passt.
 *
 * Das Kreuz selbst ist **festes Weiß**, nicht `--nav-active-fg`. Beim ersten
 * Versuch stand hier diese Variable — „dieselbe Farbe wie die Knöpfe" —, und
 * das war gut gemeint, aber falsch: Im Theme „modernist" ist sie
 * `var(--color-bg)`, also #f3f2f2. Auf der farbigen Fläche wirkte das
 * gebrochen statt weiß. Der Betreiber hat es gesehen, bevor es mir auffiel.
 * Eine Variable, die in einem Theme etwas anderes bedeutet als gemeint, ist
 * hier kein Gewinn.
 *
 * `--radius-sm` statt eines festen Wertes: Im Theme „modernist" ist er 0 —
 * dort sind Ecken scharf, und das soll auch für dieses Quadrat gelten.
 *
 * Feste 16 × 16 px mit `inline-flex`: Ein reines `padding` ergäbe je nach
 * Schriftart ein Rechteck statt eines Quadrats, weil das ×-Zeichen nicht in
 * allen Schriften gleich breit ist.
 *
 * `margin-left` zusätzlich zum `gap: .35rem` von `.tab-btn`: Der Abstand
 * zum Dateinamen soll deutlich größer sein als der zwischen Symbol und
 * Name — sonst klebt das Kreuz am letzten Buchstaben und man trifft beim
 * Klicken das Falsche. Zusammen also .35rem + .4rem. */
.tab-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: 0 0 auto;
  margin-left: .4rem;
  background: var(--primary); color: #fff;
  border-radius: var(--radius-sm, 3px);
  font-size: .75rem; line-height: 1; font-weight: 700;
}
/* Beim Überfahren rot: Das Kreuz entfernt eine Datei, und das ist der
 * einzige Knopf im Reiter, der etwas wegnimmt. */
.tab-close:hover { background: var(--danger); color: #fff; }
.tabs-body { background: var(--surface); border: 1px solid var(--border-soft); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.tab-content { display: none; padding: 1.75rem 1.5rem; }
.tab-content.active { display: block; }

/* Tabs innerhalb einer Karte: keine doppelten Rahmen/Innenabstände */
.checkout-card-body > .tabs-body {
  background: transparent;
  border: none;
  border-radius: 0;
}
.checkout-card-body > .tabs-body .tab-content { padding: 1.25rem 0 .25rem; }
.checkout-card-body > .tabs-header { margin-bottom: 0; }

/* ── Cart-Bar ───────────────────────────────────────────────── */
/* Warenkorb-Leiste: schwebt am unteren Fensterrand mit, solange ihre
   normale Position noch unterhalb des sichtbaren Bereichs liegt. Ist die
   Position erreicht, sitzt die Leiste fest an ihrem Platz.

   Das macht `position: sticky` allein — ohne Skript, ohne Zustand.

   Bis August 2026 stand hier `position: fixed`, und ein Skript entschied
   bei jedem Scrollbild neu, ob geschwebt wird: Schweben aufheben,
   nachmessen, gegebenenfalls wieder schweben. Genau daran ist es
   gescheitert. Wer bei jedem Bild das Layout ändert, um es zu messen,
   arbeitet gegen zwei Einrichtungen des Browsers:

     · Scroll-Anchoring korrigiert die Scrollposition, wenn sich das
       Layout ändert — was ein weiteres Scroll-Ereignis auslöst, das
       wieder das Layout ändert. Beim Hochscrollen fiel das am stärksten
       auf, weil dort am meisten nachkorrigiert wird.
     · Der ResizeObserver auf `document.body` meldete dieselben
       Änderungen zurück und stieß die nächste Runde an.

   Was dabei herauskam, hing davon ab, in welchem Bild man landete —
   deshalb mal richtig, mal nicht.

   `sticky` löst das in der Layoutphase des Browsers: kein Messen, kein
   Umschalten, kein Platzhalter, und die Leiste kann gar nicht erst im
   falschen Zustand hängenbleiben.

   Der frühere Einwand gegen sticky war, das Verhalten hänge an der Höhe
   des Elternelements und an `overflow` bei einem Vorfahren. Das stimmt —
   nur trifft hier beides nicht zu: Über `#cart-bar` liegen
   `.upload-section`, `.main-content` und `body`, und keines davon setzt
   `overflow`. Bezugsrahmen ist damit das Fenster. **Wer das ändert,
   bricht die Leiste** — dann bitte hier nachsehen.

   Die Klasse `.schwebend` steuert nur noch den angehobenen Schatten; das
   Skript in templates/index.html setzt sie über einen IntersectionObserver.
   Geht das schief, sitzt die Leiste trotzdem richtig, sie sieht nur
   flacher aus. */
#cart-bar {
  margin-top: 1rem;
  position: sticky;
  bottom: 1rem;
  z-index: 20;
}
.cart-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: .85rem 1.25rem;
  box-shadow: var(--shadow-sm);
  font-weight: 600; font-size: 1rem; color: var(--text);
  transition: box-shadow .2s, border-color .2s;
}
/* Angehoben, solange die Leiste über dem Inhalt schwebt */
#cart-bar.schwebend > .cart-bar {
  box-shadow: 0 6px 24px rgba(0,0,0,.16);
  border-color: var(--border);
}
@media (prefers-reduced-motion: reduce) {
  .cart-bar { transition: none; }
}
@media (max-width: 400px) {
  .cart-bar { flex-direction: column; align-items: stretch; gap: .75rem; text-align: center; }
  .cart-bar .btn { width: 100%; }
}

/* ── Datei-Vorschau & Analyse ───────────────────────────────── */
.file-preview-header {
  display: flex; align-items: center; gap: 1rem;
  margin-top: .5rem; margin-bottom: .75rem;
}
.file-info {
  display: flex; flex-direction: column; gap: .5rem;
  padding-top: .25rem;
}
.cover-image-wrap { flex: 0 0 auto; }
.cover-image {
  width: 140px; border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-soft);
}
.cover-placeholder {
  width: 140px; height: 180px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}
.file-title {
  font-size: .9rem; font-weight: 600; color: var(--text);
  word-break: break-all; padding-top: .1rem;
}
/* Kennzahlen als gefüllte Kacheln: Beschriftung oben, Wert groß darunter. */
.analysis-bar {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.stat {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--stat-bg, var(--color-neutral-800, #444141));
  color: #fff;
}
.stat-label {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.stat-value {
  font-family: var(--font-heading, var(--font-family));
  font-weight: var(--font-heading-weight, 700);
  font-size: 1.05rem; line-height: 1.1;
  letter-spacing: -0.01em; color: #fff;
}
.stat-value-sm { font-size: .95rem; }

/* Farbgebung je Kennzahl */
.stat:nth-child(1) { --stat-bg: var(--color-neutral-900, #2d2b2b); }
.stat-color        { --stat-bg: var(--primary); }
.stat:nth-child(3) { --stat-bg: var(--color-neutral-600, #7d7979); }
.stat:nth-child(4) { --stat-bg: var(--color-neutral-700, #605d5d); }

@media (max-width: 560px) {
  .stat { padding: .3rem var(--space-2); }
  .stat-value { font-size: .95rem; }
}

@media (max-width: 560px) {
  .file-preview-header { flex-direction: column; }
  /* `align-items: center` am Rahmen zentriert in der Spaltenanordnung nur
     die Kästen selbst. Das Vorschaubild ist genau so breit wie sein Kasten
     und sitzt damit mittig — .file-info ist dagegen ein eigener
     Flex-Container, dessen Inhalt weiter links begann. Sichtbar wurde das
     als Dateiname und Kennzahlen, die unter dem zentrierten Bild nach
     links ausbrachen. Deshalb hier ausdrücklich auch den Inhalt zentrieren. */
  .file-info { align-items: center; text-align: center; }
  .analysis-bar { justify-content: center; }
}

/* ── Options-Panel ──────────────────────────────────────────── */
.options-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1rem 0 .75rem;
  color: var(--text-muted); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.options-divider::before, .options-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border-soft);
}
.options-divider:empty { display: block; height: 1px; background: var(--border-soft); }

.print-options-form { display: flex; flex-direction: column; gap: .85rem; }
.form-group-full { width: 100%; }
.options-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 560px) { .options-two-col { grid-template-columns: 1fr; } }

/* Feld-Beschriftung (wie .field > label) */
.field-label {
  display: block; font-size: .78rem; color: var(--text-muted); margin-bottom: .25rem;
}

/* Druckmodus: horizontal, gleichmäßig aufgeteilt, gleiche Höhe */
.color-mode-group {
  display: flex; flex-direction: row; gap: .6rem;
  flex-wrap: nowrap; align-items: stretch;
}
@media (max-width: 560px) {
  .color-mode-group { flex-direction: column; }
  .color-mode-group .option-card { flex: none; }
}
.color-mode-group .option-card { flex: 1 1 0; }

/* Option-Karte (Druckmodus, Zahlungsart) */
.option-card {
  padding: .6rem .75rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .15s, background .15s;
}
.option-card:hover { border-color: var(--primary-mid); background: var(--surface-2); }
.option-card:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.radio-label { display: flex; flex-direction: column; gap: .1rem; }
.radio-label strong { font-size: .875rem; }
.radio-label small { font-size: .78rem; color: var(--text-muted); font-weight: 400; }

/* ── Mail-Editor (Auftragsbenachrichtigung) ─────────────────── */
.mail-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  padding: .4rem .5rem;
  background: var(--surface-2);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.mail-toolbar button {
  min-width: 2rem; height: 1.9rem; padding: 0 .5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: .85rem; color: var(--text);
  transition: background .12s, border-color .12s;
}
.mail-toolbar button:hover { border-color: var(--primary); color: var(--primary); }
.mail-toolbar button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.mail-toolbar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 .25rem; }
.mail-ph-select {
  height: 1.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: .82rem; padding: 0 .35rem; cursor: pointer;
}
.mail-wysiwyg, .mail-source {
  border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius);
  padding: .75rem .85rem; min-height: 220px; background: var(--surface);
  font-size: .9rem; color: var(--text); line-height: 1.5;
  outline: none;
}
.mail-wysiwyg:focus { border-color: var(--primary); }
.mail-wysiwyg h2 { font-size: 1.2rem; margin: .3rem 0 .5rem; }
.mail-wysiwyg h3 { font-size: 1rem; margin: .6rem 0 .3rem; }
.mail-source {
  display: none; width: 100%; box-sizing: border-box;
  font-family: monospace; font-size: .82rem; white-space: pre; resize: vertical;
}
.mail-editor-hint { font-size: .8rem; color: var(--text-muted); margin: .5rem 0 0; line-height: 1.5; }
.mail-editor-hint code {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: .05rem .3rem; font-size: .78rem;
  color: var(--primary); white-space: nowrap;
}

/* ── Staffel-Matrix (Admin) ─────────────────────────────────── */
.tier-matrix .brutto-col {
  color: var(--text-muted); font-size: .8rem; white-space: nowrap;
  min-width: 4.5rem;
}
.tier-warning {
  margin: .5rem 1rem; padding: .5rem .75rem;
  background: var(--tint-warn); border: 1px solid var(--tint-warn-border); border-radius: var(--radius);
  color: var(--tint-warn-text); font-size: .82rem;
}
.tier-preview { display: flex; flex-direction: column; gap: .75rem; }
.tier-preview .input { max-width: 160px; }
.tier-preview-results { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
.preview-item strong { color: var(--primary); }

/* ── Preisaufschlüsselung ───────────────────────────────────── */
.price-area { margin-top: 1rem; }
.price-placeholder { color: var(--text-light); font-size: .85rem; font-style: italic; padding: .5rem 0; }
.price-summary {
  padding: 1rem 1.1rem;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.price-summary h4 {
  font-size: .72rem; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem;
}
.quote-message { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .6rem; }
.quote-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: .1rem; }
.quote-message p { margin: 0; font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.price-summary-quote.cart-quote { border-color: var(--primary); }
.price-summary-quote.cart-quote .quote-message p { color: var(--primary); }
.price-detail { color: var(--text-light); font-size: .8rem; }
.price-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.price-table td { padding: .22rem 0; color: var(--text-muted); }
.price-table .price-col { text-align: right; font-variant-numeric: tabular-nums; }
.price-table .price-net td { border-top: 1px solid var(--border); padding-top: .45rem; color: var(--text); }
/* Linie und Betrag folgen --border und --text, genau wie die Summenzeile
   im Warenkorb (.cart-total-row und .grand-total). Vorher war beides an
   die Akzentfarbe gebunden: die Linie an --primary-light, der Betrag an
   --primary. Dieselbe Summe sah dadurch im Druckauftrag rot aus und im
   Warenkorb schwarz — zwei Darstellungen derselben Sache.

   Betont wird die Zeile über die doppelte Linienstärke und den fetten
   Schnitt, nicht über Farbe. */
.price-table .price-total td {
  border-top: 2px solid var(--border); padding-top: .45rem;
  font-size: 1rem; font-weight: 700; color: var(--text);
}

/* ── Warenkorb ──────────────────────────────────────────────── */
.empty-cart { text-align: center; padding: 3rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; color: var(--text-muted); }
.cart-files { display: flex; flex-direction: column; gap: 0; margin-bottom: 1rem; }
.cart-item {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); margin-bottom: .6rem; overflow: hidden;
}
.cart-item-main { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; gap: .75rem; }
.cart-item-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cart-filename { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.cart-copies { font-size: .85rem; font-weight: 700; color: var(--primary); }
.cart-pages { font-size: .8rem; color: var(--text-muted); }
.cart-item-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.cart-item-price { font-size: 1rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
.cart-item-quote { font-size: .82rem; color: var(--primary); font-weight: 600; }
.pdf-icon { width: 18px; height: 18px; vertical-align: middle; }
.cart-total-row {
  display: flex; justify-content: space-between;
  /* seitliche Polsterung wie .cart-item-main, damit die Texte fluchten */
  padding: .4rem 1.1rem; font-size: .9rem; color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
}
.grand-total { font-size: 1.05rem; font-weight: 700; color: var(--text); padding-top: .7rem; margin-top: .3rem; }

/* Positionen innerhalb der Karte: flache Zeilen statt Box-in-Box */
.checkout-card-body > .cart-files { margin-bottom: 0; }
.checkout-card-body > .cart-files .cart-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  margin-bottom: 0;
}
.checkout-card-body > .cart-files .cart-item:last-of-type { border-bottom: none; }
.checkout-card-body > .cart-files .cart-item-main { padding: .8rem 0; }
.checkout-card-body > .cart-files .cart-total-row { padding-left: 0; padding-right: 0; }
.checkout-card-body > .cart-files .cart-total-row:first-of-type { padding-top: .7rem; }

/* Checkout-Formular */
.checkout-form { margin-top: 1.5rem; }
.checkout-form h2 { margin: 1.5rem 0 .75rem; }
.checkout-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }
@media (max-width: 560px) { .checkout-fields { grid-template-columns: 1fr; } }

.payment-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  margin: .5rem 0 1.5rem;
}
.payment-card {
  padding: .6rem .75rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .15s, background .15s;
}
.payment-card:hover { border-color: var(--primary-mid); background: var(--surface-2); }
.payment-card:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
@media (max-width: 800px) {
  .payment-options { grid-template-columns: 1fr; }
}
.payment-label { display: flex; flex-direction: column; }
.payment-label small { color: var(--text-muted); font-size: .8rem; }
/* Checkout-Karten (Kontaktdaten, Zahlungsart) */
.checkout-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  /* kein overflow:hidden — sonst wird der aufgeklappte Kalender abgeschnitten */
  margin-bottom: 1rem;
}
.checkout-card-head {
  padding: .85rem 1.25rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.checkout-card-head h2 {
  margin: 0; font-size: .9rem; font-weight: 700; color: var(--primary);
}
.checkout-card-body { padding: 1rem 1.25rem; }
.checkout-card-body .payment-options { margin-bottom: 0; }

/* Rechnungswunsch im Warenkorb */
.invoice-toggle {
  display: flex; align-items: center; gap: .5rem;
  margin-top: 1rem; font-size: .9rem; cursor: pointer;
}
.invoice-toggle input { width: 1rem; height: 1rem; cursor: pointer; }
.invoice-fields {
  margin-top: .75rem; padding: .85rem 1rem;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.invoice-fields[hidden] { display: none; }

/* Rechnungsanschrift im Auftragsdetail */
.order-billing {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; border-bottom: 1px solid var(--border-soft); font-size: .9rem;
}
.order-billing > div { text-align: right; }
.order-billing .label { color: var(--text-muted); white-space: nowrap; }

/* Datenschutzhinweis mit Zustimmung */
.privacy-box {
  margin-top: 1rem; padding: 1rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.privacy-box h3 {
  margin: 0 0 .35rem; font-size: .95rem;
  font-family: var(--font-heading, var(--font-family));
}
.privacy-box p { margin: 0 0 .75rem; font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.privacy-check {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .88rem; cursor: pointer;
}
.privacy-check input { width: 1rem; height: 1rem; margin-top: .15rem; flex: none; cursor: pointer; }

.checkout-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }

/* ── Admin ──────────────────────────────────────────────────── */
.admin-wrap { max-width: 1200px; margin: 0 auto; }
.admin-top-bar { margin-bottom: 1.25rem; text-align: left; }
.admin-top-bar h1 { text-align: left; margin-bottom: .2rem; }
.admin-greeting {
  margin: 0; font-size: .9rem; color: var(--text-muted);
}
.admin-greeting strong { color: var(--primary); }
.admin-tab-body {
  /* Padding kommt per inline-style; border/radius von .tabs-body */
}
.admin-empty { color: var(--text-muted); font-style: italic; padding: 1rem 0; }

/* Admin-Tabelle */
.admin-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.admin-table th { padding: .6rem .75rem; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); text-align: left; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.admin-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--surface-2); }
/* ── Erfolgsseite (Bestellung abgesendet) ───────────────────── */
.success-page {
  max-width: 480px; margin: 2rem auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.success-page h1 { font-size: 1.5rem; margin: 0; }
.success-info {
  width: 100%; padding: 1rem 1.25rem;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.success-info h3 { margin: 0 0 .35rem; font-size: 1rem; color: var(--primary); }
.success-info p { margin: 0; }
.success-summary { color: var(--text-muted); font-size: .9rem; }
.success-summary p { margin: 0; }
.success-page .btn { margin-top: .5rem; }

/* ── Status/Logs (Admin) ────────────────────────────────────── */
.log-view {
  margin: 0; max-height: 460px; overflow: auto;
  background: var(--log-bg); color: var(--log-fg);
  border-radius: var(--radius); padding: .85rem 1rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}

/* ── Auftragsdetail (Admin) ─────────────────────────────────── */
.order-detail-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.order-detail-header h1 { margin: 0; font-size: 1.4rem; }
.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; align-items: start; }
.order-actions-col { display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 700px) { .order-grid { grid-template-columns: 1fr; } }
.order-info-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; border-bottom: 1px solid var(--border-soft); font-size: .9rem;
}
.order-info-row:last-child { border-bottom: none; }
.order-info-row .label { color: var(--text-muted); }
.tx-id {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .8rem; word-break: break-all; text-align: right;
}
.order-note {
  margin-top: .75rem; padding: .6rem .75rem;
  background: var(--surface-2); border-radius: var(--radius);
  font-size: .85rem; color: var(--text); font-style: italic;
}
.order-action-hint {
  display: flex; align-items: center; gap: .4rem;
  margin: .25rem 0 0; font-size: .8rem; color: var(--text-muted);
}

/* Mehrzeilige Erläuterung — als Zusatz zu .order-action-hint.
   
   Bewusst kein eigenständiger Baustein: Schriftgröße und Farbe sollen
   dieselben sein wie bei den einzeiligen Hinweisen („Der Kunde wird
   automatisch benachrichtigt bei …"). Stünden sie hier ein zweites Mal,
   liefen beide beim nächsten Umgestalten auseinander — dieselbe Farbe an
   zwei Stellen zu pflegen geht erfahrungsgemäß schief. Geerbt wird
   deshalb alles; überschrieben nur, was sich unterscheiden muss.

   Und das ist die Darstellungsart: .order-action-hint ist ein
   Flex-Container für eine Zeile mit Symbol. Steht darin ein <strong>
   mitten im Satz, wird jedes Textstück zu einem eigenen Flex-Element,
   und der Absatz bricht in Spalten nebeneinander um — genau so ist der
   Storno-Hinweis am 01.09.2026 auseinandergefallen. */
.order-action-hint.hinweis-absatz {
  display: block;
  margin: 0 0 .6rem;
  line-height: 1.5;
}
.order-action-hint.hinweis-absatz:last-of-type { margin-bottom: .75rem; }

/* Beispielhafte Ordnerstruktur im Reiter Export. Feste Zeichenbreite,
   damit die Einrückung stimmt — bei einer Proportionalschrift verrutscht
   der Baum und die Struktur ist nicht mehr zu erkennen. */
/* Untergliederung innerhalb einer Karte — etwa „Automatisch auf die
   Freigabe" unterhalb des Rechnungsexports von Hand. Beide gehören
   thematisch zusammen; eine zweite Karte würde sie auseinanderreißen. */
.abschnitt-trenner {
  border: 0; border-top: 1px solid var(--border-soft);
  margin: 1.25rem 0 1rem;
}
.abschnitt-titel {
  margin: 0 0 .6rem; font-size: 1rem;
}

.ablage-beispiel {
  margin: .25rem 0 0;
  padding: .6rem .8rem;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem; line-height: 1.5;
  color: var(--text-muted);
  overflow-x: auto;
}
.order-status-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.order-status-form .input { flex: 1; min-width: 140px; }
.order-file {
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: .85rem 1rem; margin-bottom: .6rem; background: var(--surface);
}
.order-file:last-child { margin-bottom: 0; }
.order-file-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-bottom: .4rem;
}
.order-file-head strong { font-size: .92rem; display: flex; align-items: center; gap: .4rem; }
.order-file-name {
  display: flex; align-items: center; gap: .4rem;
  font-size: .92rem; font-weight: 700; color: var(--text); text-decoration: none;
}
.order-file-name:hover { color: var(--primary); text-decoration: none; }
.order-file-dl { color: var(--primary); font-size: .95rem; opacity: .6; }
.order-file-name:hover .order-file-dl { opacity: 1; }
.order-file-price { font-weight: 700; color: var(--primary); white-space: nowrap; }
.order-file-meta { font-size: .82rem; color: var(--text-muted); margin-bottom: .5rem; }
.order-file-specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1.5rem;
}
@media (max-width: 560px) { .order-file-specs { grid-template-columns: 1fr; } }
.order-file-specs > div {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .85rem; padding: .25rem 0; border-bottom: 1px solid var(--border-soft);
}
.order-file-specs .label { color: var(--text-muted); }

/* ── Logo-Upload (Firmendaten) ──────────────────────────────── */
.logo-field { display: flex; flex-direction: column; gap: .35rem; }
.logo-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.logo-preview {
  width: 140px; height: 60px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface);
  padding: .35rem;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-empty { color: var(--text-light); font-size: .78rem; font-style: italic; }
.logo-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.logo-upload { display: flex; align-items: center; gap: .5rem; }
.logo-upload .input { font-size: .8rem; padding: .25rem .4rem; min-height: 30px; max-width: 15rem; }

/* ── Anmeldung & Benutzerverwaltung ─────────────────────────── */
.login-page { max-width: 380px; margin: 3rem auto; }
.login-form { display: flex; flex-direction: column; gap: .85rem; margin-top: 1.25rem; }
.mobile-nav-logout { display: block; }
.mobile-nav-logout button {
  width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--border-soft); cursor: pointer;
  font: inherit; color: var(--text-muted);
}
.user-inline-form { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.user-inline-form .input { min-height: 30px; padding: .2rem .4rem; font-size: .8rem; max-width: 9rem; }
.user-new-form {
  display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap;
}
.user-new-form .field { flex: 1; min-width: 9rem; }

/* Fehlermeldung unter einer fehlgeschlagenen Upload-Zeile */
.upload-error-text {
  margin-top: .25rem; font-size: .8rem; color: var(--danger, #b91c1c);
}

/* ── Systemreiter ───────────────────────────────────────────── */
/* Die Boxen bekommen ihren Abstand hier, nicht über margin-top an jeder
   einzelnen — sonst fehlt er beim Umsortieren an einer Stelle und steht
   an anderer doppelt. */
.system-tab { display: flex; flex-direction: column; gap: 1rem; }

/* ── Statistik-Panel (Auftragsliste) ────────────────────────── */
/* Ohne äußeren Rahmen: Die einzelnen Karten haben bereits einen, ein
   zweiter darum herum wirkte doppelt gemoppelt. Die Box gibt nur noch
   den Abstand zur Auftragsliste vor. */
.stats-panel {
  margin-bottom: 1rem;
}
/* Die frühere Kopfzeile mit Aufklapp-Pfeil entfällt: Die Box wird über den
   Schalter „Statistik" in der Filterzeile ganz ein- oder ausgeblendet. */
.stats-panel[hidden] { display: none; }
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (max-width: 800px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-card {
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: .6rem; background: var(--surface);
  display: flex; flex-direction: column; gap: .5rem;
}
.stat-card-head { display: flex; gap: .35rem; }
.stat-card-head .input-sm {
  min-height: 30px; padding: .2rem .4rem; font-size: .78rem;
}
.stat-card-head select { flex: 1; min-width: 0; }
.stat-year { flex: 0 0 6.5rem !important; }
.stat-kind { flex: 0 0 5.5rem !important; }
@media (max-width: 560px) { .stat-card-head { flex-wrap: wrap; } }
.stat-card-body {
  min-height: 150px; display: flex;
  align-items: center; justify-content: center;
}

/* Wird in handlers/stats.go als HTML-Zeichenkette erzeugt, nicht in einer
   Vorlage — deshalb findet eine Suche nach "stat-empty" in templates/ sie
   nicht. Am 29.09.2026 war sie deswegen schon aus dieser Datei entfernt und
   musste zurück. Dieselbe Falle wie bei der Mailvorlage am 28.09. */
.stat-empty { color: var(--text-light); font-size: .82rem; font-style: italic; margin: auto; }

.chart { width: 100%; height: 150px; overflow: visible; }
.chart .ax {
  font-size: 8px; fill: var(--text-muted);
  font-family: var(--font-family);
}
.chart .val {
  font-size: 8.5px; fill: var(--text); font-weight: 700;
  font-family: var(--font-heading, var(--font-family));
}
.pie-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; width: 100%;
}
.pie { width: 110px; height: 110px; flex: none; }
.pie-legend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .76rem; color: var(--text-muted); min-width: 0;
}
.pie-legend li { display: flex; align-items: center; gap: .35rem; }
.pie-legend .key { width: 10px; height: 10px; flex: none; border-radius: 2px; }
.pie-legend strong { color: var(--text); margin-left: auto; padding-left: .4rem; }

/* ── Mehrfachauswahl (Auftragsliste) ────────────────────────── */
.bulk-bar {
  display: none; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .85rem; margin-bottom: .75rem;
  background: var(--primary-light); border: 1px solid var(--primary-mid);
  border-radius: var(--radius);
}
.bulk-bar.visible { display: flex; }
.bulk-count { font-size: .85rem; font-weight: 600; color: var(--primary-dark); margin-right: .25rem; }
.bulk-status { min-width: 160px; }
.admin-table .bulk-col { width: 2.25rem; text-align: center; }
.admin-table .bulk-col input { cursor: pointer; width: 1rem; height: 1rem; }

.admin-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.admin-table th.sortable:hover { color: var(--primary); }
.admin-table th .sort-arrow { color: var(--primary); font-size: .7rem; }
.status-badge { display: inline-block; padding: .2rem .55rem; border-radius: 20px; font-size: .75rem; font-weight: 600; background: var(--surface-2); color: var(--text-muted); }
.status-badge.status-bezahlt { background: var(--tint-ok); color: var(--tint-ok-text); }
.status-badge.status-abholbereit { background: var(--tint-info); color: var(--tint-info-text); }
.status-badge.status-storniert { background: var(--tint-danger); color: var(--tint-danger-text); }

/* Preis-Cards */
.prices-form { display: flex; flex-direction: column; gap: 1.25rem; }
.price-group-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.price-group-header { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; padding: .85rem 1.25rem; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); }
.price-group-header h2 { margin: 0; font-size: .9rem; font-weight: 700; color: var(--primary); }
.price-group-hint { font-size: .78rem; color: var(--text-muted); font-weight: 400; }
.price-group-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .65rem; }
.price-group-footer { padding: .6rem 1.25rem; border-top: 1px solid var(--border-soft); background: var(--surface-2); }
.prices-actions { display: flex; justify-content: flex-end; gap: .75rem; padding-top: .4rem; flex-wrap: wrap; }

/* Preis-Tabellen (Admin) */
.price-table-wrap { overflow-x: auto; }
.price-edit-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.price-edit-table thead th { padding: .5rem .75rem; text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); font-weight: 600; color: var(--text-muted); font-size: .78rem; white-space: nowrap; }
.price-edit-table tbody tr { border-bottom: 1px solid var(--border-soft); }
.price-edit-table tbody tr:last-child { border-bottom: none; }
.price-edit-table tbody tr:hover { background: var(--surface-2); }
.price-edit-table td { padding: .4rem .6rem; vertical-align: middle; }
.price-edit-table td .input { width: 100%; }
.price-edit-table td:last-child { width: 2.5rem; text-align: center; }

/* Einstellungen */
.settings-form { display: flex; flex-direction: column; gap: 1rem; }
.settings-fields { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.25rem; }
.settings-field { display: flex; flex-direction: column; gap: .35rem; }
.settings-field label { font-size: .85rem; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: .5rem; }
.settings-field label small { font-weight: 400; color: var(--text-light); }
.settings-field input[type="color"] { width: 56px; height: 36px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); cursor: pointer; padding: 2px; }
.settings-select { padding: .45rem .7rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: .875rem; font-family: inherit; color: var(--text); background: var(--surface); width: 100%; max-width: 280px; }

/* Tab-Loading-Placeholder */
.tab-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 3rem 2rem;
  color: var(--text-muted); text-align: center;
}
.css-spinner {
  width: 2.5rem; height: 2.5rem;
  border: 3px solid var(--border, #E2DCF5);
  border-top-color: var(--primary, #A51D2D);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  flex-shrink: 0;
  display: block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tab-loading small { color: var(--text-light); font-size: .82rem; }


/* ═══════════════════════════════════════════════════════════════
   Native Komponenten — reines CSS auf nativem HTML.
   ═══════════════════════════════════════════════════════════════ */

/* — Buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading, var(--font-family));
  font-weight: 600; font-size: .9rem; line-height: 1.2;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  min-height: 38px;                 /* gleiche Höhe wie .input */
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--grad-btn); color: var(--nav-active-fg, #fff); }
.btn-primary:hover  { background: var(--primary-mid); color: var(--nav-active-fg, #fff); }
.btn-primary:active { background: var(--primary-dark); }
.btn-secondary { border-color: var(--border); color: var(--text); }
.btn-secondary:hover  { background: var(--surface-2); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-sm { font-size: .8rem; min-height: 30px; padding: var(--space-1) var(--space-3); }
.btn-lg { font-size: 1rem; min-height: 44px; padding: var(--space-3) var(--space-5); }
.btn-block { width: 100%; }

/* — Formularfelder — */
.field { display: flex; flex-direction: column; gap: .25rem; }
.field > label {
  font-size: .78rem; color: var(--text-muted);
}
/* Zusatz in der Beschriftung bleibt in derselben Zeile — sonst werden
   einzelne Felder höher und die Eingaben fluchten nicht mehr. */
.field > label small { font-weight: 400; color: var(--text-light); }
/* Beschriftung einzeilig halten, Eingaben stehen dadurch auf gleicher Höhe */
.field > label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.input {
  width: 100%; min-height: 38px; padding: .4rem .6rem;
  font: inherit; font-size: .9rem;
  color: var(--text); caret-color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.input:hover { border-color: var(--primary-mid); }
.input:focus-visible { border-color: var(--primary); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
select.input { cursor: pointer; }

/* — Radios als Karten (Druckmodus, Zahlungsart) — */
.radio {
  display: inline-flex; align-items: flex-start; gap: .5rem;
  cursor: pointer; font-size: .9rem;
}
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio .dot {
  width: 16px; height: 16px; flex: none; margin-top: .15rem;
  border-radius: 50%; border: 1.5px solid var(--border);
}
.radio:hover .dot { border-color: var(--primary); }
.radio input:checked + .dot {
  border-color: var(--primary); background: var(--primary);
  box-shadow: inset 0 0 0 4px var(--surface);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--primary); outline-offset: 2px; }

/* — Tags — */
.tag {
  display: inline-flex; align-items: center;
  font-size: .7rem; letter-spacing: .02em;
  padding: .15rem .55rem; border-radius: var(--radius-sm);
}
.tag-accent  { background: var(--primary-light); color: var(--primary-dark); }
.tag-neutral { background: var(--surface-2); color: var(--text-muted); }
.tag-outline { border: 1px solid var(--primary); color: var(--primary); }

/* — kompakter Icon-Button (Zeile löschen in Tabellen) — */
.btn-icon-danger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: transparent; color: var(--text-light);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.btn-icon-danger:hover {
  color: var(--danger); border-color: var(--danger);
  background: var(--tint-danger);
}

/* — Schalter (Ein/Aus) — */
.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .9rem; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative; flex: none; width: 40px; height: 22px;
  background: var(--border); border-radius: 99px;
  transition: background .18s;
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; background: var(--surface);
  border-radius: 50%; transition: transform .18s;
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }

/* — Hinweise & Meldungen — */
.field-hint { font-size: .75rem; color: var(--text-light); }
.alert {
  padding: .75rem 1rem; margin-bottom: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .9rem;
}
.alert-success { background: var(--tint-ok); border-color: var(--tint-ok-border); color: var(--tint-ok-text); }
.alert-danger  { background: var(--tint-danger); border-color: var(--danger); color: var(--tint-danger-text); }
.alert-warning { background: var(--tint-warn); border-color: var(--tint-warn-border); color: var(--tint-warn-text); }

/* — starke Trennlinie — */
.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--border); }




/* Select / Input: einheitliche Größe */
.options-two-col .input { width: 100%; }

/* Checkout-Felder */
.checkout-fields .input { width: 100%; }

/* ── Abhol-Datumsfeld (Flatpickr) ───────────────────────────── */
.pickup-field-wrap { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pickup-label {
  font-size: .78rem;
  font-weight: 400;
  color: var(--text-muted);
}
/* Kalender darf über die Feldgrenzen hinausragen */
.pickup-input-wrap .flatpickr-calendar { z-index: 50; }
.pickup-required { color: var(--danger); margin-left: .15rem; }

.pickup-input-wrap {
  position: relative; display: flex; align-items: center;
}
/* Flatpickr legt im static-Modus einen eigenen Container um das Feld,
   der sich sonst auf Inhaltsbreite zusammenzieht. */
.pickup-input-wrap .flatpickr-wrapper {
  display: block; width: 100%;
}
.pickup-icon {
  position: absolute; left: .75rem; font-size: 1rem;
  color: var(--text-light); pointer-events: none; z-index: 1;
}
.pickup-input {
  width: 100%;
  min-height: 38px;
  padding: .4rem .6rem .4rem 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: .9rem;
  color: var(--text);
  background: var(--surface);
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
  -webkit-appearance: none;
}
.pickup-input::placeholder { color: var(--text-light); }
.pickup-input:hover  { border-color: var(--primary); }
.pickup-input:focus  { border-color: var(--primary); }

/* Flatpickr Kalender – Site-Theme */
.fp-site-theme {
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-family) !important;
  color: var(--text) !important;
}
.fp-site-theme .flatpickr-months { background: var(--surface) !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
.fp-site-theme .flatpickr-month  { color: var(--text) !important; fill: var(--text) !important; }
.fp-site-theme .flatpickr-current-month input.cur-year,
.fp-site-theme .flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--text) !important; font-family: var(--font-family) !important; font-weight: 600 !important;
}
.fp-site-theme .flatpickr-monthDropdown-months { background: var(--surface) !important; }
.fp-site-theme svg { fill: var(--text-muted) !important; }
.fp-site-theme .flatpickr-prev-month:hover svg,
.fp-site-theme .flatpickr-next-month:hover svg { fill: var(--primary) !important; }
.fp-site-theme .flatpickr-weekdays { background: var(--surface-2) !important; }
.fp-site-theme span.flatpickr-weekday { color: var(--text-muted) !important; background: transparent !important; font-size: .78rem; font-weight: 600; }
.fp-site-theme .flatpickr-days { border-color: var(--border-soft) !important; }
.fp-site-theme .dayContainer { border-color: var(--border-soft) !important; }
.fp-site-theme .flatpickr-day {
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
}
.fp-site-theme .flatpickr-day:hover,
.fp-site-theme .flatpickr-day.prevMonthDay:hover,
.fp-site-theme .flatpickr-day.nextMonthDay:hover {
  background: var(--primary-light) !important; border-color: var(--primary-light) !important; color: var(--primary) !important;
}
.fp-site-theme .flatpickr-day.today { border-color: var(--primary-mid) !important; }
.fp-site-theme .flatpickr-day.today:hover { background: var(--primary-light) !important; }
.fp-site-theme .flatpickr-day.selected,
.fp-site-theme .flatpickr-day.selected:hover {
  background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important;
}
.fp-site-theme .flatpickr-day.flatpickr-disabled,
.fp-site-theme .flatpickr-day.prevMonthDay,
.fp-site-theme .flatpickr-day.nextMonthDay { color: var(--text-light) !important; }
.fp-site-theme .flatpickr-day.flatpickr-disabled { opacity: .4 !important; }

/* Flatpickr: mobil volle Breite mit größeren Tap-Zielen */
@media (max-width: 560px) {
  .pickup-input-wrap .flatpickr-calendar.fp-site-theme {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
  }
  .fp-site-theme .flatpickr-rContainer,
  .fp-site-theme .flatpickr-days { width: 100% !important; }
  .fp-site-theme .dayContainer {
    width: 100% !important; min-width: 100% !important; max-width: 100% !important;
  }
  .fp-site-theme .flatpickr-day {
    max-width: 14.28% !important;
    height: 2.75rem !important; line-height: 2.75rem !important;
    font-size: 1rem !important;
  }
  .fp-site-theme span.flatpickr-weekday { font-size: .85rem; }
  .fp-site-theme .flatpickr-current-month,
  .fp-site-theme .flatpickr-current-month input.cur-year { font-size: 1.05rem !important; }
}


/* ============================================================
   Startseite: Auswahl Druckauftrag / Dateisendung
   ============================================================ */
.choose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
.choose-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.choose-card,
.choose-card:hover,
.choose-card:hover h2,
.choose-card:hover p,
.choose-card:hover .choose-go {
  text-decoration: none;
}
.choose-card:hover,
.choose-card:focus-visible {
  text-decoration: none;
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.choose-card h2 {
  margin: 0;
  font-size: 1.15rem;
}
.choose-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.5;
}
.choose-go {
  margin-top: .5rem;
  font-weight: 600;
  color: var(--primary);
  font-size: .92rem;
}

/* ============================================================
   Dateisendung
   ============================================================ */
.drop-list {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.drop-list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: .9rem;
}
/* Der Name nimmt den Platz und wird bei Bedarf gekürzt; Größe und
   Entfernen-Knopf behalten ihre Breite. Ohne min-width: 0 wächst ein
   langer Dateiname über die Zeile hinaus, statt gekürzt zu werden — ein
   Flex-Kind schrumpft sonst nicht unter seinen Inhalt. */
.drop-list .drop-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop-list .drop-groesse {
  color: var(--text-muted);
  white-space: nowrap;
}
/* Einzelne Datei wieder wegnehmen, ohne die ganze Auswahl zu verlieren */
.drop-list .drop-entfernen {
  flex: none;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 .15rem;
  border-radius: var(--radius);
}
.drop-list .drop-entfernen:hover,
.drop-list .drop-entfernen:focus-visible {
  color: var(--danger);
}
.drop-list:empty { display: none; }

.drop-warnung { color: var(--text-muted); margin-top: .5rem; }

.drop-progress { margin-top: 1.25rem; }
.drop-progress .upload-progress-item { width: 100%; }

/* Honeypot – für Menschen unsichtbar, für Bots ausfüllbar */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 800px) {
  .choose-grid { grid-template-columns: 1fr; }
}

/* ── Funktionsprüfung (Status/Logs) ─────────────────────────── */
.health-list { display: flex; flex-direction: column; }
.health-row {
  display: grid;
  grid-template-columns: 6.5rem 14rem 1fr auto;
  align-items: baseline;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: .88rem;
}
.health-row:last-child { border-bottom: none; }
.health-badge {
  justify-self: start;
  padding: .15rem .5rem;
  border-radius: var(--radius-sm);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid transparent;
}
.health-name { font-weight: 600; }
.health-detail { color: var(--text-muted); word-break: break-word; }
.health-time { color: var(--text-light); font-size: .78rem; white-space: nowrap; }

.health-ok      .health-badge { background: var(--tint-ok);     color: var(--tint-ok-text);     border-color: var(--tint-ok-border); }
.health-warn    .health-badge { background: var(--tint-warn);   color: var(--tint-warn-text);   border-color: var(--tint-warn-border); }
.health-fail    .health-badge { background: var(--tint-danger); color: var(--tint-danger-text); border-color: var(--danger); }
.health-skipped .health-badge { background: var(--surface-2);   color: var(--text-light);       border-color: var(--border-soft); }

@media (max-width: 800px) {
  .health-row { grid-template-columns: 6.5rem 1fr; }
  .health-detail { grid-column: 1 / -1; }
  .health-time { grid-column: 1 / -1; }
}

/* ── Log-Werkzeugleiste ─────────────────────────────────────── */
.log-toolbar {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .75rem; flex-wrap: wrap;
}
.log-filter { flex: 1 1 16rem; min-width: 12rem; }
.log-stufe { flex: 0 0 auto; width: auto; }
.log-count { color: var(--text-muted); font-size: .82rem; white-space: nowrap; }
@media (max-width: 560px) {
  .log-toolbar { flex-direction: column; align-items: stretch; }
  .log-count { order: 3; }
}

/* Bilanz über der Liste — die Frage „liegt etwas an?" vor der Liste selbst. */
.log-bilanz { margin: 0 0 .75rem; font-size: .85rem; color: var(--text-light); }
.log-marke {
  display: inline-block; margin-right: .4rem;
  padding: .1rem .45rem; border-radius: var(--radius);
  font-weight: 600; font-size: .8rem;
}
.log-marke-fehler  { background: var(--tint-danger); color: var(--tint-danger-text); }
.log-marke-warnung { background: var(--tint-warn);   color: var(--tint-warn-text); }
.log-marke-ok      { background: var(--tint-ok);     color: var(--tint-ok-text); }

/* Stufen in der Liste.
 *
 * Feste Farbwerte statt der --tint-Variablen: Die Logansicht steht in
 * jedem Theme auf dunklem Grund (--log-bg), und die Tint-Farben sind für
 * helle Flächen gedacht. Auf Dunkelblau wären sie unleserlich.
 *
 * Der linke Streifen trägt die eigentliche Arbeit: Farbe allein genügt
 * nicht, wenn jemand Rot und Gelb schlecht unterscheidet. */
.log-zeile { padding-left: .5rem; border-left: 2px solid transparent; }
.log-zeile-fehler  { color: #ff9a9a; border-left-color: #ff5f5f; }
.log-zeile-warnung { color: #ffd27a; border-left-color: #e0a33a; }

/* ── Datenbankverwaltung ────────────────────────────────────── */
.db-actions { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.db-action {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.db-action h3 { margin: 0 0 .35rem; font-size: .95rem; }
.db-action .field-hint { margin: 0 0 .75rem; line-height: 1.5; }
.db-action-danger { border-color: var(--danger); background: var(--tint-danger); }
.db-action-danger .field-hint { color: var(--tint-danger-text); }

/* Sichern und Wiederherstellen nebeneinander.
 *
 * `1fr 1fr` statt `auto auto`: Beide Kästen sollen gleich breit sein, auch
 * wenn der eine drei Zeilen Hinweistext hat und der andere fünf. Sonst
 * bestimmt die Textlänge die Aufteilung, und das sieht bei jedem Theme
 * anders aus.
 *
 * `align-items: start` verhindert, dass der kürzere Kasten auf die Höhe des
 * längeren gestreckt wird — ein halbleerer Rahmen wirkt wie ein Fehler. */
.db-paar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  align-items: start;
}
/* Unter 900 px wird jede Spalte zu schmal: Das Dateiauswahlfeld und der
 * Knopf daneben brauchen zusammen etwa 26 rem. Dann untereinander. */
@media (max-width: 900px) {
  .db-paar { grid-template-columns: 1fr; }
}

.db-import-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.db-import-form .input { flex: 1 1 18rem; }
.db-reset-form label { display: block; font-size: .85rem; margin-bottom: .35rem; }
.db-reset-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.db-reset-row .input { flex: 0 1 12rem; }

@media (max-width: 560px) {
  .db-import-form, .db-reset-row { flex-direction: column; align-items: stretch; }
  .db-import-form .btn, .db-reset-row .btn { width: 100%; }
}

/* ── Auftragsliste: Filter, Sortierung, Blättern ────────────── */
.orders-filter {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .85rem; flex-wrap: wrap;
}
.orders-search { flex: 1 1 22rem; min-width: 12rem; }
.orders-status { flex: 0 1 12rem; }

.admin-table th.sortable { padding: 0; }
.sort-link {
  display: flex; align-items: center; gap: .3rem;
  padding: .6rem .75rem;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.sort-link:hover { color: var(--primary); text-decoration: none; }
.sort-link.sort-active { color: var(--primary); font-weight: 700; }
.sort-arrow { font-size: .7em; }

.orders-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: .85rem; padding-top: .85rem;
  border-top: 1px solid var(--border-soft);
  font-size: .85rem; color: var(--text-muted);
}
.orders-perpage { display: flex; align-items: center; gap: .4rem; }
.orders-perpage .input { width: auto; }
.orders-pages { display: flex; align-items: center; gap: .35rem; }
.orders-page-info { padding: 0 .4rem; white-space: nowrap; }

@media (max-width: 800px) {
  .orders-pager { flex-direction: column; align-items: stretch; text-align: center; }
  .orders-pages { justify-content: center; flex-wrap: wrap; }
  .orders-perpage { justify-content: center; }
}

/* Ergebnisliste während der Suche leicht abblenden */
#orders-result { transition: opacity .12s; }
#orders-result.is-loading { opacity: .5; pointer-events: none; }

/* Dateisendungen in der Auftragsliste */
.status-badge.status-datenupload { background: var(--tint-info); color: var(--tint-info-text); }
.admin-table td.cell-muted { color: var(--text-light); }

.invoice-mark {
  display: inline-block;
  margin-left: .15rem;
  color: var(--text-light);
  font-weight: 700;
  cursor: help;
}

/* Rechnungsanschrift nachtragen */
.billing-edit { margin-top: .5rem; }
.billing-edit > summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--primary);
  padding: .25rem 0;
}
.billing-edit > summary:hover { text-decoration: underline; }
.billing-form {
  display: flex; flex-direction: column; gap: .6rem;
  margin-top: .6rem; padding: .85rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.billing-form .btn { align-self: flex-start; }

/* ── Live-Aktualisierung der Auftragsliste ──────────────────── */
.orders-live {
  display: inline-flex; align-items: center; gap: 1rem;
  margin-left: auto;
  font-size: .82rem; color: var(--text-muted);
}
/* Kleinere Ausführung der Schalter für die Werkzeugleiste */
.switch-sm { gap: .4rem; font-size: .82rem; }
.switch-sm .switch-track { width: 32px; height: 18px; }
.switch-sm .switch-track::after { width: 12px; height: 12px; top: 3px; left: 3px; }
.switch-sm input:checked + .switch-track::after { transform: translateX(14px); }
/* Neue Zeilen blinken, bis die Maus darüberfährt.
   Eigene Farbe statt --tint-warn: die ist im Theme „modernist" ein sehr
   helles Pfirsich (#fff2ef) und auf weißem Grund praktisch unsichtbar.
   Hier soll es quer durch den Raum auffallen. */
.admin-table tr.row-new > td {
  animation: row-blink 1.4s ease-in-out infinite;
}
.admin-table tr.row-new > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
@keyframes row-blink {
  0%, 100% { background: transparent }
  50%      { background: rgba(245, 158, 11, .38) }
}
@media (prefers-reduced-motion: reduce) {
  .admin-table tr.row-new > td { animation: none; background: rgba(245, 158, 11, .38); }
}

@media (max-width: 800px) {
  .orders-live { margin-left: 0; width: 100%; }
}

/* ── Statusfarben (Einstellungen) ───────────────────────────── */
.status-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .6rem 1rem;
}
.status-color-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: .4rem .6rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.status-color-preview { font-size: .78rem; }
.status-color-input {
  width: 3rem; height: 2rem; padding: 2px;
  flex: none; cursor: pointer;
}

/* ── Vollbild der Auftragsliste ─────────────────────────────── */
/* Blendet alles aus, was nicht zur Liste gehört, und nutzt die
   volle Fensterbreite. Der Schalter bleibt sichtbar zum Beenden. */
body.orders-fullscreen .topnav-wrap > .topnav,
body.orders-fullscreen .mobile-nav,
body.orders-fullscreen .site-footer,
body.orders-fullscreen .admin-top-bar,
body.orders-fullscreen .tabs-header {
  display: none !important;
}
/* Die Statistik wird hier bewusst nicht ausgeblendet: Über den Schalter
   „Statistik" soll sie auch in der reinen Listenansicht sichtbar sein —
   etwa auf einem Bildschirm, der den ganzen Tag die Aufträge zeigt. */
body.orders-fullscreen .main-content { max-width: none; padding: 0; }
body.orders-fullscreen .admin-wrap { max-width: none; }
/* Die Liste sitzt in einer weißen Fläche, die bis zum Fensterrand reicht —
   der Abstand gehört deshalb nach innen, sonst schiene der graue
   Seitenhintergrund durch. */
body.orders-fullscreen .tabs-body.admin-tab-body {
  border: none; border-radius: 0;
  padding: 1rem 1.25rem !important;
  min-height: 100vh;
}
/* Seiten ohne diese Fläche (z.B. Auftragsdetails) brauchen den Abstand
   dagegen außen. */
body.orders-fullscreen .main-content:not(:has(.admin-tab-body)) {
  padding: 1rem 1.25rem 1.5rem;
}

/* In der Ansicht „Nur Liste" auch die Auftragsdetails aufgeräumt zeigen —
   die Kopfzeile der Detailseite bleibt, sie enthält den Weg zurück.
   Ohne die Navigationsleiste darüber braucht sie etwas Luft nach oben. */
body.orders-fullscreen .order-detail-header { margin-top: 1.25rem; }

/* Rechnungsexport (Einstellungen) */
.invoice-export-form {
  display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap;
}
.invoice-export-form .field { margin: 0; }
.invoice-export-form .input { width: auto; min-width: 9rem; }
@media (max-width: 560px) {
  .invoice-export-form { flex-direction: column; align-items: stretch; }
  .invoice-export-form .input, .invoice-export-form .btn { width: 100%; }
}

/* Rollen-Rechtematrix */
.role-matrix td.role-cell, .role-matrix th:not(:first-child) { text-align: center; }
.role-matrix .switch { justify-content: center; }
.role-fixed { color: var(--primary); font-weight: 700; }

/* HTTPS-Box: Zertifikatsangaben */
.cert-table th { text-align: left; white-space: nowrap; width: 11rem; color: var(--text-muted); font-weight: 600; vertical-align: top; }
.cert-table td { word-break: break-word; }
.cert-fingerprint { font-size: .72rem; line-height: 1.5; word-break: break-all; }
.tag-fehler  { border-color: #dc2626; color: #dc2626; }
.tag-warnung { border-color: #d97706; color: #b45309; }
.tls-schalter { padding-bottom: .75rem; border-bottom: 1px solid var(--border-soft); margin-bottom: .75rem; }

/* Schalter des Wartungsmodus.
   Bewusst eine eigene Klasse statt der geliehenen .tls-schalter: Dort
   kommt zum Abstand noch ein margin-bottom, und zusammen mit dem
   gap: .75rem von .settings-fields ergab das den dreifachen Abstand zur
   Meldung darunter — deutlich mehr als überall sonst im Panel.
   Hier trägt nur die Trennlinie einen Innenabstand; den Abstand danach
   liefert der Flex-Gap des Kastens, wie bei jedem anderen Feld auch. */
.wartung-schalter { padding-bottom: .75rem; border-bottom: 1px solid var(--border-soft); }

/* ── Wartungsseite ──────────────────────────────────────────
   Wird mit Status 503 ausgeliefert, wenn der Betreiber den
   Wartungsmodus eingeschaltet hat (handlers/wartung.go). */
.wartung-seite {
  max-width: 34rem;
  margin: 3rem auto;
  text-align: center;
}
/* Auf **jedem** Nachfahren ausdrücklich, nicht nur geerbt. Zwei Gründe:
   Manche Bausteine (z. B. .field-hint) setzen ihre eigene Ausrichtung
   und gewännen gegen bloße Vererbung — und auf dieser Seite soll
   ausnahmslos alles mittig stehen, das ist ihr ganzer Zweck. */
.wartung-seite, .wartung-seite * { text-align: center; }
.wartung-symbol { color: var(--text-muted); margin-bottom: 1rem; }
.wartung-seite h1 { margin: 0 0 1rem; }
.wartung-text {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text);
  /* Zeilenumbrüche aus dem Panel beibehalten. `pre-line` bricht lange
     Zeilen weiterhin um und lässt die Zentrierung unberührt — `pre`
     täte beides nicht. */
  white-space: pre-line;
  margin: 0 auto;
}
.wartung-kontakt {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
}
.wartung-kontakt p { margin: 0 0 .35rem; }
.wartung-kontakt-titel { font-weight: 600; }
.wartung-kontakt a { color: var(--primary); }

/* Die Box im Panel wird auffällig, solange der Modus läuft — sonst
   übersieht man einen gesperrten Shop zwischen den anderen Karten. */
.karte-warnung { border-color: var(--tint-danger-text); }

/* Datei, deren Analyse gescheitert ist — im Warenkorb. */
.cart-pages-fehler { color: var(--tint-danger-text); font-weight: 600; }