/**
 * Einzige globale Stylesheet-Datei des Ankaufstool V2. Bewusst schlicht: kein
 * Tailwind, keine UI-Bibliothek – reines CSS mit Custom Properties als
 * Design-System.
 *
 * Markenbezug (siehe .claude/skills/lotticards-ci):
 * - Farben: Gold #CFA22B (Primär, Logo-Farbe) + dunkles Navy #001021
 *   (Sekundär) sind die tragenden LottiCards-Marken­farben. Für dieses
 *   interne Business-Tool (dichte Tabellen, Formulare, stundenlange Nutzung
 *   durchs Team) werden sie bewusst als AKZENTE eingesetzt (Header, Buttons,
 *   Badges, Überschriften) statt als flächiger Dark-Hintergrund wie bei
 *   Social-Media-/Print-Material – das wäre für ein Arbeitswerkzeug weder
 *   augenfreundlich noch "seriös". Funktionsfarben (Erfolg/Fehler/Warnung/
 *   Info) sind 1:1 aus dem CI-Skill übernommen (Website-Werte).
 * - Schrift: Markenschrift ist eigentlich Gilroy (kommerziell lizenzpflichtig,
 *   keine Webfont-Freigabe im CI-Skill – daher hier weiterhin nicht
 *   eingebettet). Als Ersatz kam bislang ein System-Font-Stack zum Einsatz.
 *   Entscheidung Dennis, 18.07.2026 (Aufgabe 1): jetzt durch **Urbanist**
 *   ersetzt – eine geometrische Sans-Serif nah an Gilroys Anmutung, SIL Open
 *   Font License (kostenlos, kommerziell nutzbar, Web-Embedding
 *   ausdrücklich erlaubt). Selbst gehostet über `next/font/local`
 *   (`app/layout.tsx`, CSS-Variable `--font-urbanist`, Dateien in
 *   `app/fonts/`) – zur Laufzeit KEINE Anfragen an Google-Fonts-Server.
 *   `--font-display`/`--font-body` zeigen beide auf `--font-urbanist`
 *   (Gewichts-Differenzierung läuft über `font-weight`, nicht über
 *   getrennte Font-Stacks). Geprüft: Urbanist unterstützt KEIN OpenType-
 *   Feature "tnum" (siehe Kommentar in `app/layout.tsx`) – Tabellenziffern
 *   werden daher NICHT per `font-feature-settings` aktiviert.
 */

/**
 * PHP-Port-Ergänzung (Blade/Vanilla-JS-Oberfläche, s. resources/views/layouts/app.blade.php):
 * next/font/local (self-hosted Urbanist, s. Kopf-Kommentar oben) hat kein
 * PHP-Äquivalent – dieselben woff2-Dateien (SIL OFL, aus app-v2/app/fonts/
 * kopiert nach public/assets/fonts/) werden hier per @font-face selbst
 * eingebunden, KEIN Google-Fonts-Request (identische DSGVO-Vorgabe wie die
 * TS-Referenz). --font-urbanist wird direkt auf "Urbanist" gesetzt (statt
 * über eine von next/font generierte Hash-Klasse).
 */
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-urbanist: "Urbanist";

  /* ---- Markenfarben (LottiCards CI) ---- */
  --color-gold: #cfa22b;
  /* AA-Kontrast-Fix (Entscheidung Dennis, 18.07.2026, Aufgabe 6): der
     vorherige Wert #a97f1e erreichte auf --color-gold-soft (Badge-Hintergrund
     von .badge-progress/.badge-primary) nur 3,12:1 – abgedunkelt auf 5,48:1
     (siehe Kontrast-Nachweis im Ergebnisbericht). Wirkt sich NUR auf
     Textfarbe/Rahmen aus (dieser Token wird nie als große Fläche verwendet),
     verändert also nirgends spürbar die Optik außer beim Lesbarkeits-Gewinn. */
  --color-gold-dark: #7a5913;
  /* Diagnose UI-Runde 5, Aufgabe 4.1 ("oliv-brauner Bestätigen-Button"):
     --color-gold-dark ist laut Kommentar oben NUR für Text/Rahmen gedacht
     ("nie als große Fläche verwendet") – wurde aber als button:hover-
     Hintergrund (weiter unten) verwendet, wodurch JEDER Standard-Gold-Button
     (u. a. "Bestätigen" im Positions-Review) beim Hover/Klick in dieses
     dunkle Oliv-Braun kippte. --color-gold-hover ist eine eigene, spürbar
     hellere Hover-Fläche (bleibt erkennbar Gold statt Braun) – NUR für
     Flächen-Hintergründe, --color-gold-dark bleibt unverändert für
     Text/Rahmen (s. Kontrast-Nachweis oben). */
  --color-gold-hover: #b8901f;
  --color-gold-soft: #f6ecd6;
  --color-gold-line: #e7cf9a;
  --color-navy: #001021;
  --color-navy-soft: #0d2338;
  --color-navy-line: #1c3a56;

  /* ---- Funktionsfarben (exakt aus CI-Skill, Website-Werte) ---- */
  --color-success: #37ac03;
  --color-success-bg: #e9f7e1;
  --color-success-text: #276002;
  --color-danger: #cf2b2c;
  --color-danger-bg: #fbe9e9;
  --color-danger-text: #a11f20;
  --color-warning: #ffc107;
  --color-warning-bg: #fff6de;
  --color-warning-text: #7a5b00;
  --color-info: #17a2b8;
  --color-info-bg: #e3f5f8;
  --color-info-text: #0e6577;

  /* ---- Neutrale Basis (Website-Textfarbe + Rahmen aus CI-Skill) ---- */
  --color-bg: #f7f5f1;
  --color-surface: #ffffff;
  --color-surface-sunken: #faf8f4;
  --color-border: #e2e2e2;
  --color-border-strong: #d7d7d7;
  --color-text: #323232;
  /* AA-Kontrast-Fix (Review-Gate G, 18.07.2026): der vorherige Wert #767676
     erreicht auf `--color-bg` (#f7f5f1) nur 4,17:1 – unter den geforderten
     4,5:1 (WCAG AA, normale Textgröße). Betroffen u. a. `.dropzone-hint` für
     den E-Mail-Feld-Hinweistext auf der Kunden-Startseite: dieser sitzt
     dort NICHT auf Weiß (keine `.card`-Umrandung auf dieser Seite, s.
     `app/page.tsx` Kunden-Zweig), sondern direkt auf `--color-bg` – die
     gegenteilige Annahme im bisherigen Kommentar bei `.dropzone-format-line`
     war falsch. #666666 erreicht 5,27:1 auf `--color-bg` und 5,74:1 auf
     `--color-surface` (Weiß) – beide Kontexte, in denen der Token verwendet
     wird, jetzt AA-konform, ohne den Grauton merklich zu verändern. */
  --color-text-muted: #666666;
  --color-text-on-navy: #ffffff;
  --color-text-on-gold: #001021;

  /* ---- Typografie (Entscheidung Dennis, 18.07.2026, Aufgabe 1: Urbanist) ----
     --font-urbanist wird von next/font/local in app/layout.tsx auf <html>
     gesetzt (Klasse urbanist.variable); Fallback-Stack greift, solange die
     Variable (z. B. in isolierten Tests ohne Layout) nicht gesetzt ist. */
  --font-display: var(--font-urbanist, "Urbanist"), system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --font-body: var(--font-urbanist, "Urbanist"), system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 21px;
  --text-2xl: 26px;

  /* ---- Abstände ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;

  /* ---- Radien & Schatten ---- */
  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 16, 33, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 16, 33, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 16, 33, 0.12);

  --content-max: 1600px;
  --page-gutter: var(--space-6);
  --transition-fast: 120ms ease;
}

/* ---------------------------------------------------------------------- */
/* Reset & Basis                                                          */
/* ---------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

/* Sticky-Footer-Layout (Entscheidung Dennis, 18.07.2026, Aufgabe 3/Footer):
   body wird zur Flex-Spalte über die volle Viewport-Höhe – Header und
   Footer bleiben `flex-shrink: 0` (s. .site-header/.site-footer), der
   Seiteninhalt (`main.page`, s. "Seitenrahmen" unten) bekommt `flex: 1 0
   auto` und schiebt den Footer damit auch bei kurzen Seiten an den unteren
   Viewport-Rand statt darüber zu "schweben". */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

a {
  color: var(--color-navy);
  text-decoration: none;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-gold-dark);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------- */
/* Header & Navigation                                                    */
/* ---------------------------------------------------------------------- */

.site-header {
  background: var(--color-navy);
  /* Nutzerfeedback 17.07.2026: Goldlinie doppelt so dick wie zuvor (3px → 6px). */
  border-bottom: 6px solid var(--color-gold);
  padding: 0 var(--space-6);
  /* Sticky-Footer-Layout (18.07.2026, s. body-Kommentar oben): Header darf im
     Flex-Body nicht schrumpfen. */
  flex-shrink: 0;
}

.site-header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  /* Nutzerfeedback 17.07.2026: Logo + Schriftzug horizontal zentriert im
     Navy-Block; die Nav-Elemente bleiben rechts, dafür absolut positioniert
     (s. `.site-nav-wrap` unten) statt über `justify-content: space-between`
     – so bleibt die Marke unabhängig von der Nav-Breite echt mittig. */
  justify-content: center;
  /* Feedback 22.07.2026: Header um ~20 % verkleinert – Logo, Schrift und
     vertikales Padding proportional reduziert (Padding 28px → 22px, Gap
     ebenfalls eine Stufe kleiner). */
  gap: var(--space-4);
  padding: 22px 0;
  flex-wrap: wrap;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-on-navy);
}

.brand-link:hover {
  color: var(--color-text-on-navy);
  text-decoration: none;
}

.brand-logo {
  display: block;
  /* Nutzerfeedback 17.07.2026 (zweite Runde): nochmal ca. 1/3 größer (war
     76px) auf ca. 100px Höhe. Quelle public/lotticards-logo.png ist
     3508×2480px hochauflösend – bei fixer CSS-Höhe und width:auto bleibt das
     Bild gestochen scharf, KEINE Runterskalierung der Datei selbst.
     max-width:none überschreibt den globalen `img { max-width: 100% }`-Reset,
     damit die Breite nicht durch einen schmalen Elternflex eingeschränkt wird.
     Feedback 22.07.2026: Header um ~20 % verkleinert – Logohöhe 100px → 80px. */
  height: 80px;
  width: auto;
  max-width: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  /* Feedback 22.07.2026: Header um ~20 % verkleinert – Markenname 20px → 16px. */
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-on-navy);
}

.brand-suffix {
  /* Feedback 22.07.2026: Header um ~20 % verkleinert – Suffix 15px → 12px. */
  font-size: 12px;
  color: var(--color-gold);
  letter-spacing: 0.03em;
}

.site-nav-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  /* Nutzerfeedback 17.07.2026: Marke ist jetzt zentriert (s.
     `.site-header-inner`) – die Nav-Elemente werden dafür rechtsbündig aus
     dem Fluss genommen, damit sie die Zentrierung nicht verschieben. Auf
     schmalen Viewports (Wrap) fällt die absolute Positionierung wieder in
     den normalen Fluss zurück (s. Media Query unten). */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.site-nav {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.team-mode-hint {
  font-size: var(--text-xs);
  color: var(--color-gold);
  opacity: 0.85;
  white-space: nowrap;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.site-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-on-navy);
  text-decoration: none;
}

.site-nav a.active {
  background: var(--color-gold);
  color: var(--color-text-on-gold);
}

/* Nutzerfeedback 17.07.2026: Nav-Link "Einreichungen" als goldener Button
   (CI-Gold, Navy-Text) – IMMER golden, nicht nur im aktiven Zustand (dafür
   höhere Spezifität als `.site-nav a`/`.site-nav a.active` nötig). */
.site-nav a.nav-btn-gold,
.site-nav a.nav-btn-gold.active {
  background: var(--color-gold);
  color: var(--color-text-on-gold);
}

.site-nav a.nav-btn-gold:hover {
  background: var(--color-gold-hover);
  color: var(--color-text-on-gold);
  text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/* Seitenrahmen                                                           */
/* ---------------------------------------------------------------------- */

.page {
  /* Nutzerfeedback 17.07.2026: Content-Breite deutlich erhöht (1180px →
     1600px) UND fluid, damit die Positionstabelle ab ca. 1200px
     Fensterbreite ohne horizontales Scrollen passt. Der seitliche
     Abstand (--page-gutter) steckt in der width-Berechnung, deshalb hier
     kein horizontales Padding mehr (sonst doppelter Rand). */
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-max));
  margin: 0 auto;
  padding: var(--space-6) 0 var(--space-7);
  /* Sticky-Footer-Layout (18.07.2026, s. body-Kommentar oben): der
     Seiteninhalt wächst, damit der Footer bei kurzen Seiten unten bleibt. */
  flex: 1 0 auto;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-navy);
  margin: 0 0 var(--space-1);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

h3 {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 var(--space-2);
}

.muted {
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Karten (Cards)                                                         */
/* ---------------------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
}

.card > h2:first-child,
.card > h3:first-child {
  margin-top: 0;
}

.batch-card {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

/* Zurückgesetzte/stornierte Batches (s. "CSV zurücksetzen") ausgegraut, kein Upload mehr möglich. */
.batch-card-cancelled {
  opacity: 0.55;
}

/* ---------------------------------------------------------------------- */
/* Tabellen                                                               */
/* ---------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--color-surface);
}

.table-wrap table {
  border: none;
  min-width: 760px;
}

th,
td {
  text-align: left;
  /* Horizontales Padding auf --space-2 reduziert (war --space-3), damit die
     Positionstabelle bei ≥1200px Fensterbreite ohne horizontales Scrollen passt. */
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  font-size: var(--text-sm);
}

th {
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-surface-sunken);
  white-space: nowrap;
}

tbody tr {
  transition: background var(--transition-fast);
}

tbody tr:nth-child(even) {
  background: var(--color-surface-sunken);
}

tbody tr:hover {
  background: var(--color-gold-soft);
}

tbody tr.assign-panel-row,
tbody tr.assign-panel-row:hover {
  background: var(--color-surface-sunken);
}

.empty {
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-4) 0;
}

/* Freundlicher Leerzustand (eigener Block statt reinem Fließtext) */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-3);
  color: var(--color-text-muted);
  font-style: normal;
}

.empty-state-icon {
  font-size: 22px;
  line-height: 1;
}

.empty-state-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-navy);
  font-size: var(--text-md);
}

.empty-state p {
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Badges (Status)                                                        */
/* ---------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge-neutral {
  background: #eef0f2;
  color: #4a5560;
  border-color: #dfe3e7;
}

.badge-progress {
  background: var(--color-gold-soft);
  color: var(--color-gold-dark);
  border-color: var(--color-gold-line);
}

.badge-info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: #bfe6ec;
}

.badge-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: #ffe49a;
}

.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: #c3e8b0;
}

.badge-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: #f2c3c3;
}

/* Rückwärtskompatible Aliasse (falls badge-primary noch referenziert wird) */
.badge-primary {
  background: var(--color-gold-soft);
  color: var(--color-gold-dark);
  border-color: var(--color-gold-line);
}

.provenance {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.review-reasons {
  color: var(--color-danger-text);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 2px;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */

button,
.button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-gold);
  background: var(--color-gold);
  color: var(--color-text-on-gold);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast), box-shadow var(--transition-fast);
}

button:hover,
.button:hover {
  background: var(--color-gold-hover);
  border-color: var(--color-gold-hover);
  color: var(--color-text-on-gold);
  text-decoration: none;
}

button:active,
.button:active {
  transform: translateY(1px);
}

button:disabled,
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

button.secondary,
.button.secondary {
  background: var(--color-surface);
  color: var(--color-navy);
  border-color: var(--color-border-strong);
}

button.secondary:hover,
.button.secondary:hover {
  background: var(--color-surface-sunken);
  border-color: var(--color-navy-line);
  color: var(--color-navy);
}

button.danger,
.button.danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}

button.danger:hover,
.button.danger:hover {
  background: #a11f20;
  border-color: #a11f20;
}

/* Dezenter Rot-Outline-/Ghost-Button für leise destruktive Aktionen
   (UI-Runde 4, 26.07.2026, Aufgabe 6.4: "Entfernen" unter den Foto-Kacheln
   soll nicht mehr wie ein Vollflächen-Alarm wirken). --color-danger-text
   erreicht sowohl im Ruhezustand auf Weiß (7,69:1) als auch im Hover auf
   --color-danger-bg (6,56:1) WCAG AA (s. Kontrast-Nachweis im
   Ergebnisbericht). */
button.danger-ghost,
.button.danger-ghost {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger-text);
}

button.danger-ghost:hover,
.button.danger-ghost:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger-text);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.link-button {
  display: inline;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--color-navy);
  padding: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-button:hover {
  background: none;
  color: var(--color-gold-dark);
}

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

label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

input[type="text"],
input[type="number"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-soft);
}

input[type="checkbox"] {
  margin-right: 4px;
  accent-color: var(--color-gold-dark);
}

/* Einheitliches Disabled-Pattern für Formularelemente (UI-Runde 5, Aufgabe
   4.2) – dieselbe Sprache wie button:disabled oben (ausgewaschene Optik,
   cursor: not-allowed), jetzt konsistent auch für Inputs/Selects/Textareas
   im gesamten internen Bereich (u. a. Positionstabelle FIX C). */
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-surface-sunken);
}

/* Nutzerfeedback 17.07.2026: Sprache-/Zustand-Dropdowns dürfen Werte wie
   "German"/"Japanese" nie abschneiden – Mindestbreite unabhängig von der
   Tabellenspaltenbreite (width:100% oben bleibt für breitere Container aktiv). */
select {
  min-width: 9.5em;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  align-items: end;
}

/* Aufgabe 7.1 (UI-Runde 5): Felder mit langem mehrzeiligem Helfertext (z. B.
   "Sealed-Ankaufsprozentsatz" in der Ankaufskalkulation) bekommen die volle
   Grid-Breite statt einer einzelnen schmalen Spalte – dort ließ der
   umbrechende Text die Spalte bei `align-items: end` weit über die
   Nachbarfelder hinausragen und erzeugte optisch genau die "isolierte
   Position mit großer Leerfläche", die Aufgabe 7.1 beheben sollte, obwohl
   das Feld strukturell bereits Teil desselben .form-grid war. */
.field-full-width {
  grid-column: 1 / -1;
}

.field-full-width input {
  max-width: 220px;
}

.field {
  min-width: 0;
}

.inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
  margin-right: var(--space-2);
}

/* ---------------------------------------------------------------------- */
/* Hinweise (Notices)                                                     */
/* ---------------------------------------------------------------------- */

.notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin: var(--space-3) 0;
  border: 1px solid transparent;
}

.notice-error {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: #f2c3c3;
}

.notice-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: #c3e8b0;
}

.notice-info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: #bfe6ec;
}

.notice-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: #ffe49a;
}

.notice-warning ul,
.notice-error ul,
.notice-info ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* ---------------------------------------------------------------------- */
/* Upload-Zeile (Batches: Export-CSV hochladen)                           */
/* ---------------------------------------------------------------------- */

.upload-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.upload-row input[type="file"] {
  width: auto;
  flex: 1 1 240px;
}

/* ---------------------------------------------------------------------- */
/* Angebots-Zusammenfassung                                               */
/* ---------------------------------------------------------------------- */

.summary-bar {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
}

.summary-bar > div {
  min-width: 160px;
}

.summary-bar strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-gold);
}

/* ---------------------------------------------------------------------- */
/* Kandidatenlisten                                                       */
/* ---------------------------------------------------------------------- */

.candidate-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.candidate-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.candidate-list li:hover {
  border-color: var(--color-gold-line);
  box-shadow: var(--shadow-sm);
}

.candidate-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.price-edit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.price-edit input[type="text"] {
  width: 100px;
}

footer.hint {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------------------- */
/* Kartenbilder (Mini-Thumbnails in Positionstabelle + Kandidatenlisten)   */
/* ---------------------------------------------------------------------- */

.card-thumb {
  display: block;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-sm);
}

.card-thumb-sm {
  width: 40px;
  height: 56px;
}

.card-thumb-md {
  width: 52px;
  height: 72px;
}

.card-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 16px;
}

.candidate-list li > .candidate-info {
  flex: 1;
  min-width: 0;
}

/* ---------------------------------------------------------------------- */
/* Positionstabelle: Kartenzelle                                          */
/* ---------------------------------------------------------------------- */

.position-card-cell {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

/* Gegenmatch-Ansicht (Nutzerfeedback 17.07.2026, wichtigster Punkt):
   Kundenfoto und Katalogbild nebeneinander, damit das Team auf einen Blick
   sieht, ob Treffer und Foto zusammenpassen. Nur vorhanden, wenn die
   Position ein photoRef hat – sonst wie bisher nur das Katalogbild. */
.position-match-images {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.position-match-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.position-match-thumb {
  display: block;
  height: 72px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-sm);
}

.position-match-label {
  font-size: 9px;
  line-height: 1;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.position-card-info {
  min-width: 0;
}

.position-card-info > div:first-child {
  font-weight: 700;
  color: var(--color-navy);
}

.position-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.position-unmatched-hint {
  margin: var(--space-2) 0;
  padding: 6px 10px;
  font-size: var(--text-xs);
}

.photo-link {
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Zuordnen-Panel: eigene volle-Breite Tabellenzeile unter der Positionszeile. */

.assign-panel-row > td {
  padding: 0 var(--space-4) var(--space-4);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
}

.assign-panel {
  padding: var(--space-4);
  border: 1px solid var(--color-gold-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* ---------------------------------------------------------------------- */
/* Foto-Galerie                                                           */
/* ---------------------------------------------------------------------- */

/* Feste Rasterspalten (170px) statt frei umbrechender Flexbox: jede Karte
   ist gleich breit, und dank `align-items: stretch` (Grid-Default) sind alle
   Karten einer Zeile gleich HOCH. So haben Bildrahmen, Meta-Text und
   Button-Reihe über alle Karten hinweg dieselben festen Verankerungen. */
.photo-gallery {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, 170px);
  gap: var(--space-4);
}

.photo-gallery-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.photo-gallery-item:hover {
  border-color: var(--color-gold-line);
  box-shadow: var(--shadow-sm);
}

/* Bildrahmen mit FESTER Höhe: das eigentliche Foto (quer oder hoch) wird
   darin zentriert und passt sich per object-fit ein, ohne die Kartenhöhe zu
   verändern – dadurch beginnt der Meta-Block auf jeder Karte auf gleicher Höhe. */
.photo-thumb-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  overflow: hidden;
}

.photo-thumb {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Meta-Block füllt den Rest der Karte; die Button-Reihe wird über
   `margin-top: auto` an den KARTENFUSS gedrückt → einheitliche Verankerung
   unabhängig davon, ob ein Qualitäts-Warnhinweis dazwischen steht. */
.photo-gallery-meta {
  font-size: var(--text-xs);
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
}

.photo-gallery-actions {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Erkennung-erneut-ausführen + Löschen-Buttons in der schmalen Galerie-Karte
   (Nutzerwunsch "Erkennung erneut ausführen" je Foto) – kompakter als die
   Standard-Buttongröße, damit sie nicht breiter als die Foto-Karte wirken. */
.photo-gallery-meta .button {
  padding: 4px 10px;
  font-size: var(--text-xs);
  white-space: normal;
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Upload-Statusleiste (Foto-Upload + Erkennung)                          */
/* ---------------------------------------------------------------------- */

.upload-progress {
  margin-top: var(--space-3);
  height: 6px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
}

.upload-progress-bar {
  height: 100%;
  width: 40%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold));
  animation: upload-progress-indeterminate 1.2s ease-in-out infinite;
}

@keyframes upload-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

.upload-progress-text {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Karte-für-Karte-Review (Wizard, Nutzerauftrag Dennis, 17.07.2026)       */
/* ---------------------------------------------------------------------- */

.review-wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.review-wizard-header-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-navy);
  font-size: var(--text-md);
}

.review-wizard-progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-4);
}

.review-wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold));
  border-radius: var(--radius-pill);
  transition: width var(--transition-fast);
}

.review-wizard-nav {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Aktueller Schritt in der SSR-Sprungmarken-Navigation (bewusste Abweichung:
   ?step-Navigation statt Client-State, s. review-wizard.blade.php). */
.review-wizard-step-active {
  background: var(--color-gold) !important;
  border-color: var(--color-gold-dark) !important;
  color: var(--color-navy) !important;
  font-weight: 700;
}

/* Container der Alternativvorschläge in der „Manuelle Suche"-Sektion. */
.review-wizard-alternatives {
  margin-top: var(--space-4);
}

.review-wizard-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}

.review-wizard-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

/* Linke Spalte (Nutzerfeedback 17.07.2026, Feedback-Runde 8: Katalogbild
   NEBEN das Kundenfoto statt darunter – vorher standen beide Blöcke
   übereinander, was bei einem 600px hohen Kundenfoto + 350px Katalogbild die
   Spalte sehr hoch werden ließ. `flex-wrap` sorgt dafür, dass auf schmalen
   Fenstern (weniger Platz als beide Blöcke nebeneinander brauchen) wieder
   normal untereinander umgebrochen wird, statt das Katalogbild unter den
   Viewport/die Spaltenbreite zu drücken. */
.review-wizard-col-photos {
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.review-wizard-col-photos .review-wizard-photo-block {
  width: auto;
  flex: 1 1 220px;
  max-width: 100%;
}

.review-wizard-photo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  width: 100%;
}

.review-wizard-caption {
  font-weight: 700;
  color: var(--color-navy);
  font-size: var(--text-md);
}

/* Rechte Spalte "Kartendaten": linksbündiges Formular statt zentrierter Bildspalte. */
.review-wizard-col-data {
  align-items: stretch;
  text-align: left;
  gap: var(--space-5);
}

.review-wizard-section {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.review-wizard-section h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  color: var(--color-navy);
}

.review-wizard-readonly-value {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  min-height: 1.4em;
}

/* Aufgabe 10.3 (UI-Runde 5): gestylter Platzhalter statt literalem "?" in
   Set-/Seltenheit-Feldern ohne Wert. */
.review-wizard-readonly-placeholder {
  font-style: italic;
  color: var(--color-text-muted);
  opacity: 0.75;
}

.review-wizard-nav-block {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

/* Beide Bilder (Kundenfoto/Katalogbild) GLEICH GROSS, unabhängig vom
   Seitenverhältnis der Quelle – fester Rahmen im Karten-Seitenverhältnis
   (~63:88), Bildinhalt via object-fit:contain, damit nichts beschnitten
   wird (Kundenfotos können z. B. quer aufgenommen sein). */
.review-wizard-image,
.review-wizard-image-placeholder {
  height: 350px;
  aspect-ratio: 63 / 88;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-sm);
}

.review-wizard-image {
  display: block;
  object-fit: contain;
}

.review-wizard-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: var(--text-lg);
  text-align: center;
  padding: var(--space-3);
}

/* Kundenfoto deutlich größer als das Katalogbild (Nutzerauftrag Dennis,
   17.07.2026 – Team ist Desktop-only): das Kundenfoto ist das eigentliche
   Prüfobjekt (Sprache/1st Ed/Reverse-Details), das Katalogbild bleibt bei
   350px (s. o.). Überschreibt die Höhe aus `.review-wizard-image` /
   `.review-wizard-image-placeholder` (gleiche Selektor-Spezifität, gewinnt
   per Reihenfolge, da diese Regel danach im Stylesheet steht). */
.review-wizard-image-customer {
  height: 600px;
}

.review-wizard-photo-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.review-wizard-confidence {
  font-weight: 700;
  color: var(--color-gold-dark);
}

.review-wizard-complete {
  text-align: center;
  padding: var(--space-6) var(--space-3);
}

@media (max-width: 720px) {
  .review-wizard-columns {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/* /admin (Team-Auth, Entscheidung E29 – unsichtbar für Kunden, s. 17.07.2026) */
/* ---------------------------------------------------------------------- */

.page-narrow {
  max-width: 420px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--space-7);
}

.auth-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}

.auth-logo {
  /* Nutzerfeedback 17.07.2026 (Feedback-Runde 8): doppelt so groß wie zuvor (44px → 88px). */
  height: 88px;
  width: auto;
  margin: 0 auto var(--space-3);
}

.auth-form {
  /* Nutzerfeedback 17.07.2026 (Feedback-Runde 8): Passwortfeld + Button
     horizontal zentrieren – die Karte selbst ist bereits durch `.page-narrow`
     zentriert, `.auth-form` bekommt zusätzlich eine eigene, vom Kartenrand
     abgesetzte Maximalbreite, damit Feld/Button nicht auf die volle
     Kartenbreite gestreckt wirken, sondern als eigener zentrierter Block. */
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  text-align: left;
}

.auth-form button {
  justify-content: center;
}

@media (max-width: 720px) {
  .page {
    /* Kleinerer Gutter auf Mobile fließt in die width-Berechnung oben ein
       (statt zusätzlichem horizontalem Padding, sonst doppelter Rand). */
    --page-gutter: var(--space-4);
    padding: var(--space-4) 0 var(--space-6);
  }

  .site-header {
    padding: 0 var(--space-4);
  }

  /* Auf schmalen Viewports fällt die zentrierte Zwei-Zeilen-Kopfzeile
     (absolute Nav rechts + zentrierte Marke) sonst übereinander – Nav
     zurück in den normalen Fluss, unter der Marke, weiterhin zentriert. */
  .site-header-inner {
    flex-direction: column;
  }

  .site-nav-wrap {
    position: static;
    transform: none;
  }

  .card {
    padding: var(--space-4);
  }

  .summary-bar {
    gap: var(--space-4);
  }
}

/* ---------------------------------------------------------------------- */
/* Kunden-Kommentarfeld (Entscheidung Dennis, 17.07.2026)                 */
/* ---------------------------------------------------------------------- */

/* Auffällige Warnbox über dem Kommentarfeld (Kundenansicht) – goldener
   Rahmen, damit der Hinweis "Near-Mint-Basis ohne Angabe" nicht überlesen
   wird (Nutzerauftrag Dennis, 17.07.2026). */
.customer-comment-warning {
  border: 2px solid var(--color-gold);
  background: var(--color-gold-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  color: var(--color-navy);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.customer-comment-warning p {
  margin: 0 0 var(--space-2);
}

.customer-comment-warning p:last-child {
  margin-bottom: 0;
}

.customer-comment-warning ul {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-5);
}

.customer-comment-warning strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-gold-dark);
  font-family: var(--font-display);
  font-size: var(--text-md);
}

/* Hervorgehobene Box "Kundenanmerkungen" oben im Karten-Review (Team-Sicht). */
.customer-comment-box {
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-gold-soft);
}

.customer-comment-box-label {
  font-weight: 700;
  color: var(--color-gold-dark);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.customer-comment-box p {
  margin: 0;
  white-space: pre-wrap;
  color: var(--color-navy);
}

/* Read-only-Anzeige des Kommentars (gesperrte Zustände). */
.customer-comment-readonly {
  white-space: pre-wrap;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  color: var(--color-text);
}

/* ---------------------------------------------------------------------- */
/* /einstellungen (Entscheidung Dennis, 17.07.2026, Feedback-Runde 8)      */
/* ---------------------------------------------------------------------- */

/* Platzhalter-Sektionen ("Teammitglieder"/"Statistiken") – ausgegraut, keine
   Funktionalität, rein informativ, dass der Ausbau noch folgt. */
.settings-placeholder {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* Startseite: Kunden-Dropzone (Entscheidung Dennis, 17.07.2026,           */
/* Feedback-Runde 8 – ersetzt den "Neue Einreichung"-Button für Kunden)    */
/* ---------------------------------------------------------------------- */

.home-hero {
  text-align: center;
  margin-bottom: var(--space-6);
}

.home-hero h1 {
  margin-left: auto;
  margin-right: auto;
}

/* Subline eine Hierarchiestufe unter der H1 (Entscheidung Dennis,
   18.07.2026, Aufgabe 4): Regular/Medium statt Bold, Sekundärfarbe
   `--color-text` (#323232, AA-konform ≥4,5:1 auf weißem Kartenhintergrund)
   statt der vorherigen navyfarbenen Bold-Variante, deutlich kleiner als
   die H1. */
.home-hero-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text);
  max-width: 640px;
  margin: var(--space-2) auto 0;
}

/* Wichtiger Hinweis zur Sortenbeschränkung (Feedback 22.07.2026): Wir kaufen
   ausschließlich Pokémon-Karten. Dezenter Gold-Akzentrahmen, damit der Hinweis
   auffällt, ohne mit der H1 zu konkurrieren. */
.home-hero-note {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-gold-soft);
  border: 1px solid var(--color-gold-line);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  margin: var(--space-3) auto 0;
}

/* Content-Container der ÖFFENTLICHEN Kundenstartseite (Entscheidung Dennis,
   18.07.2026, Aufgabe 4): schmaler als der Admin-Bereich, überschreibt dazu
   lokal `--content-max` – `.page` (s. "Seitenrahmen" oben) berechnet seine
   Breite bereits über `var(--content-max)`, dadurch reicht diese einzelne
   Custom-Property-Überschreibung auf demselben Element (`<main class="page
   page-customer">`), ohne die width-Formel zu duplizieren. Admin-Ansichten
   nutzen weiterhin NUR `.page` (voller --content-max: 1600px). */
.page-customer {
  --content-max: 840px;
}

/* Hinweisbox "persönlicher Link" (Entscheidung Dennis, 18.07.2026, Aufgabe
   4): nutzt die bestehende `.notice.notice-info`-Farbgebung (Türkis-Familie,
   AA-geprüft), nur mit etwas mehr Abstand zur darüberliegenden Dropzone. */
.home-hint-box {
  margin: var(--space-5) 0 0;
}

/* ---------------------------------------------------------------------- */
/* Foto-Beispiele gut/schlecht (Feedback 22.07.2026)                      */
/* ---------------------------------------------------------------------- */
/* Bilder wirken einprägsamer als Text: 2 gute (grüner Haken) + 2 schlechte
   (rotes Kreuz) Beispiele unter der „So gelingen Fotos"-Box. object-fit:
   contain in einer festen Box-Höhe – so wird KEIN Foto beschnitten (die
   Beispiele haben gemischte Hoch-/Querformate), Randflächen bleiben neutral. */
/* Zusammengeführte Foto-Guide-Card (UI-Runde 3, 23.07.2026): enthält Regeln
   (legal-content), Einleitungssatz und Beispielraster. Die Regel-Überschrift
   kommt aus dem team-editierbaren photoTipsHtml (h3, via .legal-content
   gestylt) und ist zugleich der Card-Titel – daher KEINE eigene h2-Regel mehr. */
.photo-guide-card {
  margin-top: var(--space-5);
}

.photo-examples-intro {
  color: var(--color-text);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-4);
}

.photo-examples {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 560px) {
  .photo-examples {
    grid-template-columns: 1fr;
  }
}

.photo-example {
  position: relative;
  margin: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.photo-example-good {
  border-color: var(--color-success-text);
}

.photo-example-bad {
  border-color: var(--color-danger-text);
}

.photo-example img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: contain;
  background: var(--color-surface-sunken);
}

.photo-example-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}

.photo-example-badge-good {
  background: var(--color-success-text);
}

.photo-example-badge-bad {
  background: var(--color-danger-text);
}

.photo-example figcaption {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: center;
}

.dropzone {
  /* position:relative als Anker für den absolut positionierten Sparkle-Akzent
     (.dropzone-sparkle, Entscheidung Dennis, 18.07.2026, Aufgabe 4). */
  position: relative;
  border: 3px dashed var(--color-gold-line);
  border-radius: var(--radius-lg);
  background: var(--color-gold-soft);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

/* Marken-Signatur: EIN kleiner goldener Sparkle-Akzent oben rechts in der
   Dropzone (Entscheidung Dennis, 18.07.2026, Aufgabe 4) – ersetzt die
   Hintergrundtextur-Alternative aus dem CI-Skill (Auftrag: nur eines von
   beiden). Rein dekorativ, `aria-hidden` im Markup. */
.dropzone-sparkle {
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  width: 20px;
  height: 20px;
}

/* Goldenes Outline-Icon (Kamera) ersetzt das frühere 📸-Emoji (Entscheidung
   Dennis, 18.07.2026, Aufgabe 4) – Strichzeichnung analog zur
   Logo-Anmutung (Outline statt Flächenfüllung). */
.dropzone-icon-svg {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-3);
}

/* Formatzeile ("JPEG, PNG oder WebP · …") auf AA-konforme Textfarbe
   angehoben (Entscheidung Dennis, 18.07.2026, Aufgabe 4): das gedämpfte
   `--color-text-muted` unterschreitet auf dem hellen Gold-Soft-Hintergrund
   der Dropzone 4,5:1 – `--color-text` (#323232) erreicht dort >7:1 (siehe
   Kontrast-Nachweis im Ergebnisbericht). Ergänzt die bestehende
   `.dropzone-hint`-Klasse, ersetzt sie nicht. Korrektur Review-Gate G,
   18.07.2026: der E-Mail-Feld-Hinweis (ebenfalls `.dropzone-hint`) sitzt auf
   der Kunden-Startseite NICHT auf Weiß, sondern direkt auf `--color-bg`
   (keine `.card`-Umrandung dort) – `--color-text-muted` wurde deshalb
   zusätzlich global auf #666666 abgedunkelt (s. `:root`-Definition), damit
   AUCH dieser Fall AA erreicht, statt nur die Formatzeile separat
   auszunehmen.

   UI-Runde 3 (23.07.2026): Cascade-Bug behoben. Die frühere Regel
   `.dropzone-format-line` (0,1,0) wurde von der SPÄTER definierten Regel
   `.dropzone-hint` (0,1,0, gleiche Spezifität, gewinnt per Quellreihenfolge)
   überschrieben – die Formatzeile rutschte dadurch faktisch auf
   `--color-text-muted` (#666, nur ~4,9:1 auf Gold-Soft). Durch die
   höhere Spezifität `.dropzone .dropzone-format-line` (0,2,0) greift jetzt
   wieder das dunklere `--color-text` (#323232, ~10:1). */
.dropzone .dropzone-format-line {
  color: var(--color-text);
}

.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-md);
}

.dropzone-dragging {
  border-color: var(--color-gold-dark);
  background: #f0e2bd;
  box-shadow: var(--shadow-lg);
}

.dropzone-disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.dropzone-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.dropzone-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}

.dropzone-hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.dropzone-input {
  display: none;
}

/* Prominenter Übermitteln-Button (Kunde, Zustand "submitted"). */
.submit-card {
  text-align: center;
}

/* Überschrift linksbündig wie bei allen anderen Cards (UI-Runde 4,
   26.07.2026, Aufgabe 7) – .submit-card war bislang die einzige Card mit
   zentriertem h2. Satz/Button bleiben zentriert. */
.submit-card h2 {
  text-align: left;
}

.submit-card button {
  width: 100%;
  justify-content: center;
  padding: var(--space-4);
  font-size: var(--text-md);
}

/* ---------------------------------------------------------------------- */
/* E-Mail-Pflichtfeld (Kunden-Startseite, Entscheidung Dennis, 18.07.2026) */
/* ---------------------------------------------------------------------- */

/* Feedback 22.07.2026: E-Mail-Feld prominenter – Label „Deine E-Mail-Adresse"
   größer und zentriert, das Eingabefeld deutlich breiter (ca. doppelt so breit
   wie die schmale Browser-Standardbreite eines type=email-Feldes) und
   ebenfalls zentriert. Der ganze Block ist zentriert, damit E-Mail-Eingabe und
   Dropzone eine klare, mittige Handlungsachse bilden. */
.email-field {
  margin-bottom: var(--space-5);
  text-align: center;
}

.email-field label {
  display: block;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}

/* Breiteres, zentriertes Eingabefeld. type=email ist NICHT Teil der globalen
   input-Selektoren (nur text/number/file) – Breite/Optik daher hier explizit.
   min(100%, 460px) hält das Feld auf schmalen Viewports randbündig. */
.email-field input[type="email"] {
  width: min(100%, 460px);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-md);
  text-align: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.email-field input[type="email"]:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-soft);
}

/* E-Mail-Helpertext („Wir brauchen deine E-Mail …"): UI-Runde 3 (23.07.2026)
   auf `--color-text` (#323232) angehoben – zuvor `--color-text-muted` (#666,
   ~5,2:1 auf --color-bg). Größe bleibt (Sekundär-Hierarchie über die
   kleinere Schriftgröße, nicht über die Farbe). Scoped auf `.email-field`,
   damit andere `.dropzone-hint`-Vorkommen unberührt bleiben. */
.email-field .dropzone-hint {
  margin-top: var(--space-2);
  color: var(--color-text);
}

/* „* Pflichtfeld"-Legende unter dem E-Mail-Block (UI-Runde 3, 23.07.2026) –
   konsistent zur Legende im Kaufvertrag-Formular (.custform-legend):
   Sekundärtext in `--color-text-muted` (#666, AA – 5,27:1 auf --color-bg),
   kleine Schrift. Zentriert, da der gesamte E-Mail-Block zentriert ist. */
.email-legend {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Upload-Hinweis prominenter (Entscheidung Dennis, 18.07.2026): der Text
   "bitte die Seite nicht neu laden …" wurde in der Praxis übersehen – daher
   deutlich größer/fetter mit Gold-Akzentrahmen, Text bleibt dunkel (Navy)
   auf hellem Gold-Grund für gute Lesbarkeit (CI-konform). Ergänzt die
   BESTEHENDE `.upload-progress-text`-Klasse, ersetzt sie nicht. */
.upload-progress-text-emphasis {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--color-navy);
  background: var(--color-gold-soft);
  border: 1px solid var(--color-gold-line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

/* ---------------------------------------------------------------------- */
/* Wizard "Kein Katalog-Match" (Entscheidung Dennis, 18.07.2026, A2)       */
/* ---------------------------------------------------------------------- */

/* Kräftige, gut sichtbare Gold-Warnbox, wenn eine Wizard-Position keinen
   Katalog-Match hat (`cardmarketId === null`) – deutlich auffälliger als
   `.notice-warning`, weil das Team diesen Fall aktiv auflösen muss (manuelle
   Suche), statt ihn nur zur Kenntnis zu nehmen. */
.review-wizard-no-match-warning {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-md);
  background: var(--color-gold-soft);
  color: var(--color-navy);
  font-size: var(--text-md);
}

/* ---------------------------------------------------------------------- */
/* Öffentliche Rechtsseiten /impressum, /agb, /datenschutz                */
/* (Entscheidung Dennis, 18.07.2026, Aufgabe 3 UI-Redesign-Prompt)         */
/* ---------------------------------------------------------------------- */

.legal-page {
  max-width: 800px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-6) var(--space-7);
}

.legal-page > h1:first-child {
  margin-top: 0;
}

/* Aufgabe 3.2 (UI-Runde 5): kundengerichtete Foto-Tipps im Admin-Upload-Card
   standardmäßig eingeklappt (nativer <details>/<summary>-Accordion – kein
   JS nötig). Der volle Block bleibt beim Kunden immer offen (kein
   <details>-Wrapper dort, s. show.blade.php). */
.photo-tips-admin-details {
  margin-bottom: var(--space-4);
}

.photo-tips-admin-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-navy);
  padding: var(--space-2) 0;
}

.photo-tips-admin-details summary:hover {
  color: var(--color-gold-dark);
}

.photo-tips-admin-details[open] summary {
  margin-bottom: var(--space-2);
}

/* Der eigentliche, sanitisiert gerenderte Rechtstext (s. Modul-Kommentare in
   app/impressum|agb|datenschutz/page.tsx). Eigene Typo-Hierarchie statt der
   globalen h2-Regel (kein Unterstrich, da hier reiner Fließtext-Kontext). */
.legal-content h1 {
  margin-bottom: var(--space-4);
}

.legal-content h2,
.legal-content h3,
.legal-content h4 {
  border-bottom: none;
  margin: var(--space-5) 0 var(--space-2);
}

.legal-content h2:first-child,
.legal-content h3:first-child,
.legal-content h4:first-child {
  margin-top: 0;
}

.legal-content p {
  margin: 0 0 var(--space-4);
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.4em;
}

.legal-content li {
  margin-bottom: var(--space-1);
}

.legal-content table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  margin: 0 0 var(--space-4);
}

.legal-content th,
.legal-content td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--text-sm);
  white-space: normal;
}

.legal-content th {
  background: var(--color-surface-sunken);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-navy);
}

.legal-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-5) 0;
}

.legal-content a {
  color: var(--color-navy);
  text-decoration: underline;
}

.legal-content a:hover {
  color: var(--color-gold-dark);
}

/* ---------------------------------------------------------------------- */
/* Rechtstexte-Editor (TipTap) unter /einstellungen                       */
/* (Entscheidung Dennis, 18.07.2026, Aufgabe 3 UI-Redesign-Prompt)         */
/* ---------------------------------------------------------------------- */

.richtext-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-3) 0;
}

/* Höhere Spezifität (Element + Klasse) als die globale `button`-Regel, damit
   Tabs/Toolbar-Buttons standardmäßig NEUTRAL aussehen (bestehender
   Sekundär-Button-Stil) statt immer golden – Gold ist reserviert für den
   aktiven Zustand (Tab bzw. aktives Format), s. `.richtext-tab-active` /
   `.richtext-toolbar-btn-active` unten. */
button.richtext-tab,
button.richtext-toolbar-btn {
  background: var(--color-surface);
  color: var(--color-navy);
  border: 1px solid var(--color-border-strong);
  font-weight: 600;
}

button.richtext-tab:hover,
button.richtext-toolbar-btn:hover {
  background: var(--color-surface-sunken);
  border-color: var(--color-navy-line);
  color: var(--color-navy);
}

button.richtext-tab {
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: var(--text-sm);
}

button.richtext-tab-active,
button.richtext-tab-active:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-text-on-gold);
}

.richtext-tab-panel-hidden {
  display: none;
}

.richtext-editor {
  margin-bottom: var(--space-4);
}

.richtext-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-surface-sunken);
}

button.richtext-toolbar-btn {
  padding: 5px 10px;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

button.richtext-toolbar-btn-active,
button.richtext-toolbar-btn-active:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-text-on-gold);
}

button.richtext-toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.richtext-content {
  border: 1px solid var(--color-border-strong);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
  min-height: 220px;
}

.richtext-content .tiptap {
  outline: none;
  min-height: 200px;
}

.richtext-content .tiptap p {
  margin: 0 0 var(--space-3);
}

.richtext-content .tiptap h2,
.richtext-content .tiptap h3 {
  color: var(--color-navy);
  font-family: var(--font-display);
  margin: var(--space-4) 0 var(--space-2);
}

.richtext-content .tiptap a {
  color: var(--color-navy);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/* Footer (Entscheidung Dennis, 18.07.2026, Aufgabe 3 – Footer-Leiste;     */
/* die Rechtsseiten-INHALTE selbst entstehen in einem parallelen Strang)   */
/* ---------------------------------------------------------------------- */

.site-footer {
  background: var(--color-navy);
  border-top: 3px solid var(--color-gold);
  padding: var(--space-4) var(--space-6);
  /* Sticky-Footer-Layout (s. body-Kommentar oben in "Reset & Basis"). */
  flex-shrink: 0;
}

.site-footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-xs);
}

.site-footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-footer-links a {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer-links a:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

.site-footer-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* 404-Seite (Entscheidung Dennis, 18.07.2026, Aufgabe 2)                 */
/* ---------------------------------------------------------------------- */

.not-found-card {
  max-width: 520px;
  margin: var(--space-7) auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.not-found-eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  /* --color-gold allein erreicht auf --color-bg nur 2,18:1 (WCAG-Nachweis
     im Ergebnisbericht) – --color-gold-dark stattdessen (5,91:1). */
  color: var(--color-gold-dark);
  margin: 0;
}

.not-found-text {
  color: var(--color-text);
  max-width: 440px;
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Admin-Header: "Abmelden" als Ghost-/Textlink (Entscheidung Dennis,      */
/* 18.07.2026, Aufgabe 5 – dezenter als der Gold-Pill des aktiven Nav-Punkts) */
/* ---------------------------------------------------------------------- */

/* a.logout-ghost: "Zurück zur Startseite" der Kunden-Wege-Seiten (26.07.2026)
   teilt bewusst den Ghost-Stil des Team-Abmelden-Buttons (Kundenwunsch). */
button.logout-ghost,
a.logout-ghost {
  background: none;
  border: none;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.78);
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
}

button.logout-ghost:hover,
a.logout-ghost:hover {
  background: none;
  border-color: transparent;
  color: var(--color-text-on-navy);
  text-decoration: underline;
}

button.logout-ghost:disabled {
  opacity: 0.6;
}

/* ---------------------------------------------------------------------- */
/* Admin-Einreichungsliste: Suche + Tabelle (Entscheidung Dennis,          */
/* 18.07.2026, Aufgabe 6 + Zusatzauftrag Suchfunktion)                     */
/* ---------------------------------------------------------------------- */

/* Für Screenreader vorhandenes, visuell verstecktes Label (z. B. die
   Aktionsspalten-Überschrift der Einreichungstabelle). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.submissions-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.submissions-search-input {
  flex: 1 1 280px;
  max-width: 420px;
}

.submissions-search-clear {
  padding: 6px 12px;
  font-size: var(--text-md);
  line-height: 1;
}

.submissions-search-count {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.submissions-row-clickable {
  cursor: pointer;
}

.submission-id-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.submission-id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.submission-id-copy {
  padding: 3px 9px;
  font-size: var(--text-xs);
}

.submissions-open-cell {
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
}

.col-align-right {
  text-align: right;
}

/* Reserviert für Tabellen-Ziffern: Urbanist unterstützt (geprüft per
   fonttools-GSUB-Inspektion) KEIN OpenType-Feature "tnum" und hat auch keine
   von Haus aus gleich breiten Ziffern – ein `font-feature-settings: 'tnum'`
   hier wäre wirkungslos und wurde daher bewusst weggelassen (s.
   Ergebnisbericht). Die Spalte bleibt trotzdem über `.col-align-right`
   rechtsbündig. */
.col-tnum {
}

/* ---------------------------------------------------------------------- */
/* Kundenflow 1. Angebot (Entscheidung Dennis, 18.07.2026, I1–I4)          */
/* NEUE Klassen ausschließlich mit den Präfixen offerview-/custform-/      */
/* contract- (Auftrag: nur ANHÄNGEN, bestehende Regeln bleiben unangetastet) */
/* ---------------------------------------------------------------------- */

/* I1: prominenter Disclaimer (Warnbox Gold) – gleiche Anmutung wie
   .customer-comment-warning, eigene Klasse statt Wiederverwendung, damit
   diese Datei wirklich nur ANHÄNGT statt eine bestehende Regel zu ändern. */
.offerview-disclaimer {
  border: 2px solid var(--color-gold);
  background: var(--color-gold-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  color: var(--color-navy);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.offerview-disclaimer strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-gold-dark);
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.offerview-position-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.offerview-position-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  flex-wrap: wrap;
}

/* Entfernte Positionen: ausgegraut + durchgestrichen (Vorgabe Dennis, I1). */
.offerview-position-row-removed {
  opacity: 0.55;
}

.offerview-position-row-removed .offerview-position-name,
.offerview-position-row-removed .offerview-position-offer {
  text-decoration: line-through;
}

.offerview-position-info {
  min-width: 0;
  flex: 1 1 220px;
}

.offerview-position-name {
  font-weight: 700;
  color: var(--color-navy);
}

.offerview-position-offer {
  font-weight: 700;
  color: var(--color-gold-dark);
  white-space: nowrap;
}

.offerview-summary {
  padding: var(--space-4) var(--space-5);
  background: var(--color-navy);
  color: var(--color-text-on-navy);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  box-shadow: var(--shadow-md);
  margin-top: var(--space-2);
}

/* I2: freundliche Abschluss-Karte nach Ablehnung, größerer Text (Vorgabe Dennis). */
.offerview-declined-card {
  background: var(--color-navy);
  color: var(--color-text-on-navy);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-gold);
  padding: var(--space-6);
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 600;
}

/* I3: Annahme-Modus (clientseitig, VOR dem Statuswechsel). */
.offerview-accept-mode {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.offerview-accept-headline {
  font-family: var(--font-display);
  color: var(--color-navy);
  font-size: var(--text-lg);
  margin: 0;
}

/* I4: Erfolgskarte nach Annahme. */
.offerview-accepted-card {
  background: var(--color-gold-soft);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}

.offerview-accepted-card h3 {
  margin: 0;
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

/* I3: Formular "Deine Daten für den Kaufvertrag". */
.custform {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-5);
}

.custform-hint {
  margin: 4px 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.custform-payout {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.custform-radio-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* I3/I4: Next-Steps-Block + Adress-Karte + Zusammenfassung + Team-Kundendatenkarte. */
.contract-next-steps {
  margin: var(--space-4) 0;
}

.contract-address-card {
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-md);
  background: var(--color-gold-soft);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}

.contract-address-label {
  font-weight: 700;
  color: var(--color-gold-dark);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.contract-address-value {
  color: var(--color-navy);
  font-weight: 600;
  line-height: 1.5;
}

.contract-hints {
  margin: var(--space-3) 0 0;
  padding-left: 1.2em;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.contract-hints li {
  margin-bottom: 4px;
}

.contract-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

.contract-summary strong {
  color: var(--color-gold-dark);
  font-family: var(--font-display);
}

/* Team-Detailseite: dezente Karte mit vollständigen Kundendaten (I5). */
.contract-team-data {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ---------------------------------------------------------------------- */
/* Kundenflow 2. (finales) Angebot (Entscheidung Dennis, 18.07.2026, J1–J3) */
/* NEUE Klassen ausschließlich mit dem Präfix offerview- (Auftrag: nur       */
/* ANHÄNGEN, bestehende Regeln bleiben unangetastet).                       */
/* ---------------------------------------------------------------------- */

/* J1: Text innerhalb der Erfolgs-/Auszahlungs-Karte (I4 kannte bislang nur
   die Headline h3, s. .offerview-accepted-card oben) – zusätzlicher
   Fließtext für "48 Stunden"-Hinweis (payout_pending) bzw. Dankestext
   (paid_out). */
.offerview-accepted-card p {
  margin: var(--space-2) 0 0;
  color: var(--color-navy);
  font-size: var(--text-sm);
}

/* J1: inline Bestätigungskarte für "Angebot annehmen"/"Angebot ablehnen"
   (bewusst KEIN window.confirm, Vorgabe Dennis – bessere mobile Darstellung).
   Bleibt IMMER im DOM, nur per .offerview-confirm-hidden ausgeblendet (s.
   FinalCustomerOfferSection.tsx). */
.offerview-confirm-card {
  border: 2px solid var(--color-gold);
  background: var(--color-gold-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-3);
}

.offerview-confirm-card p {
  margin: 0 0 var(--space-3);
  color: var(--color-navy);
  font-weight: 600;
}

.offerview-confirm-hidden {
  display: none;
}

/* ---------------------------------------------------------------------- */
/* Vom Kunden entfernte Positionen — Team-Sichtbarkeit (Entscheidung Dennis, */
/* 21.07.2026, Bugfix): Positionstabelle der Teamansicht (PositionsTable.tsx) */
/* markiert Positionen mit acceptedByCustomer === false gedimmt + Badge, s. */
/* auch die Team-Hinweiszeile in page.tsx.                                  */
/* ---------------------------------------------------------------------- */

.position-customer-removed {
  opacity: 0.5;
}

.position-customer-removed-badge {
  margin-top: 2px;
}

/* ---------------------------------------------------------------------- */
/* UI-Runde 2 (Entscheidung Dennis, 21.07.2026): Status-Banner Kundenseite  */
/* (Aufgabe 2.1–2.3) + geteilte Kopieren-Komponente (Aufgabe 2.5) +         */
/* Kaufvertrag-Formular-Grid (Aufgabe 3). NUR NEUE Klassen – bestehende     */
/* Regeln bleiben unverändert (Scope-Vorgabe: globals.css nur anhängen).   */
/* ---------------------------------------------------------------------- */

/* 2.1: Banner-Block direkt unter dem Seitenkopf (H1 + Status-Badge),
   ersetzt die früher in der "Positionen"-Card verschachtelten
   Zustandsmeldungen. Gleicher Abstand nach unten wie eine .card. */
.status-banner {
  margin-bottom: var(--space-5);
}

.status-banner-notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.status-banner-notice .notice {
  margin: 0;
}

/* 2.3: kompakte Absage-/Rückversand-Meldung statt hoher Navy-Fläche –
   überschreibt GEZIELT nur Padding/Schriftgröße der bestehenden
   .offerview-declined-card-Regel (die selbst unangetastet bleibt) über die
   höhere Selektor-Spezifität der Klassenkombination. */
.offerview-declined-card.status-banner-compact {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-md);
  font-weight: 500;
}

/* 2.5: geteilte "gekürzte/volle ID + Kopieren"-Komponente (CopyableId.tsx),
   wiederverwendet in der Admin-Liste UND auf der Detailseiten-Kopfzeile. */
.copyable-id {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.copyable-id-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.copyable-id-copy {
  padding: 3px 9px;
  font-size: var(--text-xs);
}

/* Aufgabe 3: Kaufvertrag-Formular-Grid (CustomerDataForm.tsx) – feste Zeilen
   statt eines gemeinsamen auto-fit-Grids, s. Modul-Kommentar dort für den
   Grid-Baseline-Bug, den das behebt. `align-items: flex-start` (NICHT
   "end") verhindert grundsätzlich, dass unterschiedlich hohe Felder
   (Telefon + Helpertext) benachbarte Felder in derselben Zeile verschieben. */
.custform-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.custform-row > .field {
  flex: 1 1 200px;
  min-width: 0;
}

/* 3.2: PLZ schmal (~8–10 Zeichen Eingabebreite). Selektor bewusst als
   ".field.custform-field-narrow" (statt nur ".custform-field-narrow")
   geschrieben, damit die Spezifität die von ".custform-row > .field"
   (zwei Klassen) erreicht/übertrifft – sonst würde die dortige
   "flex: 1 1 200px" trotz späterer Position im Stylesheet gewinnen. */
.field.custform-field-narrow {
  flex: 0 0 auto;
}

.custform-field-narrow input {
  width: 9ch;
  min-width: 80px;
}

/* 3.2: Ort/Straße breit (nimmt den verbleibenden Platz der Zeile ein). */
.field.custform-field-wide {
  flex: 3 1 260px;
}

/* 3.2: IBAN-Eingabebreite auf ca. 30–34 Zeichen begrenzt (nicht Vollbreite). */
.custform-field-iban input {
  max-width: 32ch;
}

/* 3.4: "* Pflichtfeld"-Legende unter dem Formular – reine Zusatzklasse,
   verwendet dieselbe (bereits AA-geprüfte) Farbe/Größe wie .custform-hint. */
.custform-legend {
  margin-top: var(--space-1);
}

/* Flex-Wrapper Name+Thumb (PHP-Port-Ergänzung) */
.position-name-cell { display: flex; align-items: flex-start; gap: 0.6rem; }

/* ---------------------------------------------------------------------- */
/* Preis-Batches (Bepreisung): jede Batch als klar abgesetzte Karte, damit
   bei mehreren Batches eindeutig ist, welche Buttons zu welcher Batch
   gehören (Kundenwunsch 24.07.2026).                                      */
/* ---------------------------------------------------------------------- */
.batch-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.batch-item {
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.batch-item-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.batch-reupload {
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

/* ======================================================================== */
/* "3-WEGE"-STRUKTUR: Willkommens-Hub ("/") + Weg-Seiten                    */
/* (/einreichen, /ankauf-per-post, /ladengeschaeft)                        */
/* PORTIERUNGS-AUFTRAG "3-Wege-Struktur", Juli 2026.                        */
/* ======================================================================== */

/* ---- Hub-Hero (Marken-Hero: Navy-Hintergrund, Gold-Akzente, Versalien) --- */
/* Bewusst außerhalb von <main class="page"> (s. home-welcome.blade.php) –
   randloser Navy-Balken analog zu .site-header, .welcome-hero-inner hält
   die gewohnte Lesebreite darin zentriert. */
.welcome-hero {
  background: var(--color-navy);
  border-bottom: 6px solid var(--color-gold);
  padding: var(--space-7) var(--page-gutter);
  text-align: center;
}

.welcome-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

.welcome-hero-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 var(--space-2);
}

.welcome-hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-text-on-navy);
  margin: 0 0 var(--space-3);
  line-height: 1.15;
}

.welcome-hero-title-accent {
  color: var(--color-gold);
  /* "SO EINFACH GEHT'S" darf nie mitten im Satz umbrechen (Review
     26.07.2026) – der erzwungene <br> im Markup sorgt für den Zeilenumbruch
     davor, nowrap verhindert einen ZWEITEN, ungewollten Umbruch innerhalb
     des goldenen Teils selbst. */
  white-space: nowrap;
}

.welcome-hero-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-on-navy);
  opacity: 0.88;
  max-width: 520px;
  margin: 0 auto;
}

/* Content-Container des Hubs (analog zu .page-customer/.post-page: eigene
   --content-max-Überschreibung statt Breiten-Formel-Duplizierung). */
.page-welcome {
  --content-max: 1080px;
}

/* ---- Options-Karten (die drei Wege) --------------------------------------- */
.welcome-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-2);
}

@media (max-width: 880px) {
  .welcome-options {
    grid-template-columns: 1fr;
  }
}

.welcome-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-5) var(--space-5);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.welcome-option:hover,
.welcome-option:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold-line);
  text-decoration: none;
  color: inherit;
}

/* Empfohlener Weg ("Fotos hochladen"): kräftigerer Gold-Rahmen statt
   Standard-Kartenrand, damit er als primäre Option klar hervorsticht. */
.welcome-option-primary {
  border: 2px solid var(--color-gold);
  box-shadow: var(--shadow-md);
}

.welcome-option-badge {
  position: absolute;
  top: -13px;
  left: var(--space-5);
  background: var(--color-gold);
  color: var(--color-text-on-gold);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.welcome-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-gold-soft);
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}

.welcome-option-icon svg {
  width: 26px;
  height: 26px;
}

/* Überschreibt die globale h2-Regel (Rahmenlinie/große Abstände sind für
   Sektions-Überschriften gedacht, nicht für Karten-Titel im Grid). */
.welcome-option h2 {
  margin: 0 0 var(--space-2);
  padding-bottom: 0;
  border-bottom: none;
  font-size: var(--text-lg);
}

.welcome-option p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.welcome-option-cta {
  margin-top: auto;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-gold-dark);
}

/* ---- Ankaufs-Kriterien-Partial (resources/views/partials/ankauf-kriterien.blade.php) ----
   Gilt NUR für das automatische Foto-Angebot (/einreichen + kompakte
   Variante an der "Fotos hochladen"-Karte) – NICHT für Post/Ladengeschäft
   (dort auch Bulk-Ankauf möglich, s. Partial-Kommentar). */
.ankauf-kriterien-card {
  margin-top: var(--space-5);
}

.ankauf-kriterien-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ankauf-kriterien-list li {
  position: relative;
  padding-left: 24px;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.ankauf-kriterien-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-gold-dark);
  font-weight: 800;
}

.ankauf-kriterien-hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Kriterien-Hinweis mit Links auf Laden-/Post-Seite (UI-Runde 4, 26.07.2026):
   eigene, nicht-kursive Klasse unter der Fußnote – --color-text-muted
   erreicht auf --color-surface (Card-Weiß) 5,74:1 (WCAG AA), die Links
   erben die globale `a`-Farbe (--color-navy, ~19:1), s. Kontrast-Nachweis
   im Ergebnisbericht. */
.ankauf-kriterien-notice {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* .welcome-option-note (Korrektur Dennis, Post-Ankauf-Priorisierung):
   Kurzer Auszahlungs-Nutzen auf der "Per Post einsenden"-Karte im Hub –
   optisch identisch zur Ankaufs-Kriterien-Kompaktbox, aber inhaltlich ein
   anderer Zweck (Auszahlungsdauer statt Ankaufs-Kriterien), deshalb eigene
   Klasse statt Wiederverwendung von .ankauf-kriterien-compact. */
.ankauf-kriterien-compact,
.welcome-option-note,
.store-option-note {
  margin: var(--space-1) 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: left;
}

/* Entscheidung Dennis 27.07.2026 ("Variante B"): Die Infoboxen der drei
   Wege-Karten wirkten "schwimmend", weil sie je nach Textlänge auf
   unterschiedlichen Höhen endeten. Fix: innerhalb der Karten unten
   verankert (margin-top: auto drückt sie direkt über den CTA-Link) UND
   höhengleich (min-height = Bedarf der längsten Box bei 1440 px, der
   schmalsten Desktop-Breite laut Scope; breitere Viewports brauchen nie
   mehr Zeilen). align-content zentriert den Text in kürzeren Boxen
   vertikal – Fallback in älteren Browsern ist harmlos oben-bündig. */
.welcome-option .ankauf-kriterien-compact,
.welcome-option .welcome-option-note,
.welcome-option .store-option-note {
  margin-top: auto;
  min-height: 6rem;
  align-content: center;
}

.welcome-option .welcome-option-cta {
  margin-top: var(--space-3);
}

.ankauf-kriterien-compact strong,
.welcome-option-note strong,
.store-option-note strong {
  color: var(--color-navy);
}

/* ---- Weg-Seiten /ankauf-per-post + /ladengeschaeft (schlanke Info-Seiten) --- */
/* Eigene --content-max-Überschreibung wie .page-customer/.page-welcome oben. */
.post-page {
  --content-max: 760px;
}

.post-header {
  margin-bottom: var(--space-5);
}

.post-subheadline {
  color: var(--color-text);
  font-size: var(--text-md);
  margin: var(--space-2) 0 0;
}

.post-address-card {
  text-align: center;
}

.post-address-label {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--color-navy);
}

.post-address {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.4;
}

.post-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.post-step {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-gold-line);
}

.post-step-label {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: var(--space-1);
}

.post-step p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.store-hours {
  font-weight: 700;
  color: var(--color-navy);
}

.post-contact {
  margin-top: var(--space-5);
  text-align: center;
}

/* ======================================================================== */
/* TRACK C: Artikel-Typen (Raw/Graded/Sealed) – Positions-Gruppierung        */
/* (Auftrag 26.07.2026). Betrifft: positions-table.blade.php (Team- und      */
/* Kunden-Tabelle) sowie offer-section/final-offer-section.blade.php        */
/* (Kunden-Angebotsansicht). Backend unverändert – reine Darstellung.       */
/* ======================================================================== */

/* ---- Team-/Kundentabelle: Blöcke pro Artikel-Typ -------------------------- */
.positions-groups {
  display: flex;
  flex-direction: column;
}

.positions-block + .positions-block {
  margin-top: var(--space-6);
}

/* Kleine goldene Markierung vor der Block-Überschrift (dezenter CI-Akzent,
   s. LottiCards-CI: Gold als Akzent statt Fläche) statt eines generischen h3 –
   macht die Artikel-Typ-Blöcke auf einen Blick unterscheidbar. */
.positions-block-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gold-dark);
  margin: 0 0 var(--space-3);
}

.positions-block-heading::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-sm);
  background: var(--color-gold);
}

/* FIX C (UI-Runde 5, Dennis 26.07.2026): "Vom Kunden entfernt"-Zeilen
   deutlich sichtbar ausgrauen (inkl. Formularelemente/Buttons – die per
   :disabled ohnehin schon eigenes Disabled-Styling bekommen, opacity hier
   wirkt zusätzlich auf die ganze Zeile). Die Klasse existierte bereits im
   Markup, hatte bislang aber KEINE CSS-Regel (kein sichtbarer Effekt). */
.position-row-dimmed {
  opacity: 0.45;
}

/* ---- Graded: Kombi-Label + Kopier-Button ---------------------------------- */
.graded-label-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.graded-label-input {
  min-width: 220px;
  flex: 1 1 auto;
}

/* Kopier-Button bewusst dezent (kleiner als Standard-.secondary, s. Auftrag
   "Der Kopier-Button dezent") – gleiches Muster wie .copyable-id-copy. */
.copy-field-button {
  flex-shrink: 0;
  padding: 3px 9px;
  font-size: var(--text-xs);
}

.copy-field-button-done {
  border-color: var(--color-success);
  color: var(--color-success-text);
}

/* ---- Sealed: Produktname + EAN gestapelt, Prozentsatz-Feld schmal --------- */
.sealed-name-input {
  width: 100%;
  margin-bottom: var(--space-1);
}

.sealed-ean-input {
  width: 100%;
  max-width: 220px;
}

.sealed-percentage-input {
  width: 90px;
}

@media (max-width: 720px) {
  .graded-label-input {
    min-width: 0;
  }

  .sealed-ean-input {
    max-width: 100%;
  }
}

/* ---- Kunden-Angebotsansicht (offer-section/final-offer-section): Block-   */
/* Überschriften zwischen den Positions-Listen, gleiches Gold-Akzent-Muster   */
/* wie .positions-block-heading oben, an die dunklere Offerview-Karte        */
/* angepasst (kein zusätzlicher linker Einzug, da die Liste selbst schon      */
/* eingerückt/abgesetzt gestaltet ist).                                      */
.offerview-group-heading {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gold-dark);
  margin: var(--space-5) 0 var(--space-2);
}

.offerview-group-heading:first-of-type {
  margin-top: var(--space-3);
}

/* ---------------------------------------------------------------------- */
/* Foto-Guide-Typ-Tabs auf /einreichen (Raw/Graded/Sealed, 26.07.2026):    */
/* Anleitung + Beispielbilder VOR der Dropzone, Tabs wechseln nur den      */
/* Guide-Inhalt. Tab-Optik: bestehende .richtext-tab-Klassen (identisches  */
/* Muster wie die Einstellungs-Tabs), hier nur Abstände/Listen ergänzt.    */
/* ---------------------------------------------------------------------- */
.photo-guide-heading {
  margin-bottom: var(--space-1);
}

.photo-guide-tabs {
  margin: var(--space-3) 0 var(--space-4);
}

.photo-guide-tips {
  /* Bottom-Abstand zu den Beispielbildern = gleicher Abstand wie bei den
     Raw-Foto-Tipps (.photo-examples-intro margin-bottom, Dennis 28.07.2026). */
  margin: var(--space-3) 0 var(--space-4);
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-2);
}

.photo-guide-tips li {
  line-height: 1.55;
}

/* ---------------------------------------------------------------------- */
/* Angebots-Zusammenfassung unter den Positions-Blöcken (Team,            */
/* Dennis 28.07.2026): Gesamtankaufspreis prominent, Kennzahlen dahinter. */
/* ---------------------------------------------------------------------- */
.positions-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.positions-summary-total {
  color: var(--color-text);
  font-size: var(--text-base);
}

.positions-summary-total strong {
  color: var(--color-gold-dark);
  font-size: var(--text-lg);
}