/* ============================================================
   Lorcana Diary — Design Tokens
   Bootstrap 5.3 overrides + utilities
   ============================================================

   Z-INDEX-CHEATSHEET (Pflicht-Lektüre bevor neue Overlay-Klassen!)

   Bei jedem neuen Overlay-Element (Modal, Dropdown, Tooltip,
   Sticky-Header, Fixed-Element) ZUERST hier eintragen + dann
   einbauen, sonst entstehen Stacking-Bugs (V1.2.2 hatte zwei davon:
   Deck-Preview-Modal + Matchups-Vollbild — beide weil card-hover-tip
   höher lag als Bootstrap-Default-Modal).

   | Layer                          | z-index | Klasse / Selector              |
   |--------------------------------|---------|--------------------------------|
   | Background-Decor               |       0 | (auto)                         |
   | ld-shell (Page-Wrapper)        |       1 | .ld-shell                      |
   | ld-topbar (Sticky-Nav)         |     100 | .ld-topbar                     |
   | Deckbuilder Bottom-Sheet (Mob) |     150 | .db-deck(Sheet)/.db-sheet-*    |
   | Deckbuilder ⋯-Aktions-Menü     |     200 | .db-actions-menu               |
   | Karten-Label-Popover (geteilt) |    2000 | .cl-pop (ADR 0125)             |
   | Matchup Sticky-First-Col       |       2 | .mx-matrix tbody th.mx-th-row  |
   | Matchup Sticky-Header-Row      |       3 | .mx-matrix thead th            |
   | Matchup Sticky-Corner          |       4 | .mx-matrix thead th.mx-corner  |
   | Sticky-Scrollbar (legacy)      |       5 | .mx-scrollbar                  |
   | Bootstrap-Modal-Backdrop       |    1050 | (Bootstrap-Default)            |
   | Bootstrap-Modal                |    1055 | (Bootstrap-Default)            |
   | card-hover-tip                 |    1080 | .card-hover-tip                |
   | Eigene Modal-Backdrops (scoped)|    2040 | #id ~ .modal-backdrop          |
   | — Alt-Muster, meiden (ADR 0042)|    2040 | .modal-backdrop.show (global)  |
   | Eigene Modals (über card-hover)|    2050 | #mxFullscreenModal,            |
   |                                |         | #deckPreviewModal, #deckModal, |
   |                                |         | #archLabelModal (ADR 0043)     |
   | Modal-Basis-Backdrop (Phase 0) |    2040 | .modal-backdrop.ld-backdrop    |
   | Modal-Basis (Phase 0)          |    2050 | .ld-modal (Onboarding/Feedback)|

   Faustregel: Bei Konflikt mit `.card-hover-tip` (1080) → Modal auf
   2050/2040. Bei neuen Sticky-Elementen → einen freien Slot unter 100
   wählen. Niemals `z-index: 9999` — das ist Schmerz auf Vorrat.
   ============================================================ */

/* --- Reset ---------------------------------------------------------------
   Innenabstand und Rahmen zählen IN die Breite. Kam bisher nur aus Bootstraps
   Reboot — public- und auth-Shell laden Bootstrap nicht (Herleitung im
   Iteration-Review 2026-08-11). Für die interne App ein No-Op. */
*, *::before, *::after { box-sizing: border-box; }

/* Wiederverwendbare Modal-Basis (Beta-Onboarding/Feedback, Phase 0):
   eigene Overlays (Willkommen/Seiten-Banner/Feedback) müssen über der
   card-hover-tip (1080) liegen. .ld-backdrop wird von modal-helper.js beim
   Öffnen an frische Bootstrap-Backdrops gehängt. Siehe Cheatsheet oben. */
.ld-modal.modal { z-index: 2050; }
.modal-backdrop.ld-backdrop { z-index: 2040; }

/* Onboarding-Schemata (iris-Lieferung, Phase 0): textfreie Erklär-SVGs.
   Kontur über currentColor → Ruhezustand gedämpft, Hero/aktiv im Gold-Akzent.
   Zentral hier (nicht page-local), damit alle Schemata konsistent bleiben. */
.iq-schema { color: var(--ld-text-dim); }
.iq-schema--hero { color: var(--ld-accent); }

/* Onboarding P2 — Seiten-Intro-Banner (Plan Phase 2, Paket ada-2026-0026).
   Wegklickbares Intro je Schlüsselseite (auf .ld-card-Basis) + dezentes
   Info-Symbol zum Wieder-Öffnen. Zentral hier (nicht page-local), damit alle
   Seiten-Einblendungen konsistent aussehen. Kein neuer Overlay-Z-Index nötig:
   das Banner ist inline im Seitenfluss, kein schwebendes Overlay. */
.page-intro { position: relative; }
.page-intro .page-intro-close {
  position: absolute; top: 8px; right: 8px;
  border: 0; background: transparent; color: var(--ld-text-dim);
  line-height: 1; padding: 4px; cursor: pointer; border-radius: 6px;
}
.page-intro .page-intro-close:hover { color: var(--ld-text); background: var(--ld-surface-2); }
.page-intro .page-intro-inner {
  display: flex; gap: 16px; align-items: center;
  padding: 14px 40px 14px 16px; flex-wrap: wrap;
}
.page-intro .page-intro-schema { flex: 0 0 auto; max-width: 160px; }
.page-intro .page-intro-schema svg { max-width: 100%; height: auto; }
.page-intro .page-intro-text { flex: 1 1 240px; min-width: 0; }
.page-intro-info {
  border: 1px solid var(--ld-border); background: transparent; color: var(--ld-text-dim);
  width: 32px; height: 32px; border-radius: 50%; margin-bottom: 12px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.page-intro-info:hover { color: var(--ld-accent); border-color: var(--ld-accent); }

/* Die Checklisten-Styles (.iq-checklist/.iq-check-*) sind mit S5 der
   UX-Sanierung entfallen (ADR 0206, F8) — wie Markup, JS und Routen. */

/* Self-hosted Geist + Geist Mono (Variable Fonts).
   DSGVO-Hinweis: hier bewusst keine Google-Fonts-CDN — Fonts liegen
   lokal in app/static/fonts/, keine User-IP-Leaks an Google. */
@font-face {
  font-family: 'Geist';
  src: url('/static/fonts/Geist-Variable.woff2') format('woff2-variations'),
       url('/static/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/static/fonts/GeistMono-Variable.woff2') format('woff2-variations'),
       url('/static/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Seitenverhältnis der offiziellen Kartenscans (Ravensburger-CDN) — an beiden
     Stellen genutzt, die einen Scan-Platzhalter aufspannen: Galerie-Kachel und
     Detailseite. Nicht zu verwechseln mit --dh-card-ratio (63/88), das die
     physische Kartenform im Deck-Hub beschreibt. */
  --card-scan-ratio: 1468 / 2048;

  /* Surfaces — stärker abgestuft, deutliches Tonwert-Delta für lesbare Hierarchie */
  --ld-bg:        #0a0a0c;   /* page */
  --ld-surface-1: #16161c;   /* card */
  --ld-surface-2: #1f1f27;   /* hover / table-row-hover / subhead */
  --ld-surface-3: #292932;   /* input bg, raised inner */
  --ld-surface-4: #34343f;   /* raised chip / avatar */

  /* Borders — sichtbar, nicht aufdringlich */
  --ld-border:        #2c2c36;
  --ld-border-strong: #3c3c48;

  /* Text */
  --ld-text:      #ededef;
  --ld-text-dim:  #a1a1aa;
  /* mute/faint auf WCAG-AA-Kontrast angehoben (usability-20, iris 2026-06-24):
     mute #8b8b96 = 5,87:1, faint #787884 = 4,54:1 auf --ld-bg (≥4,5:1 Normaltext). */
  --ld-text-mute: #8b8b96;
  --ld-text-faint:#787884;

  /* Brand — Team Gold (primary accent) */
  --ld-accent:        #e6c98a;
  --ld-accent-hover:  #f1d99c;
  --ld-accent-soft:   rgba(230, 201, 138, 0.12);
  --ld-accent-ring:   rgba(230, 201, 138, 0.30);
  --ld-accent-glow:   rgba(230, 201, 138, 0.18);   /* für Hover-Shadow */
  --ld-accent-outline: rgba(230, 201, 138, 0.45);  /* Etikett „Hervorgehoben" (Stilguide) */

  /* Glass-Effect (Backdrop-Blur-Surface) */
  --ld-glass:        rgba(10, 10, 12, 0.78);
  --ld-glass-strong: rgba(10, 10, 12, 0.92);

  /* Data semantics */
  --ld-pos:       #3ecf8e;   /* win / good (>=55%) */
  --ld-neg:       #f06870;   /* loss / bad (<45%) */
  --ld-mid:       #e8b339;   /* neutral 45-55% */

  /* Inks (only when actual ink is in context) */
  --ink-amber:    #f4a85c;
  --ink-amethyst: #b388ff;
  --ink-emerald:  #4ade80;
  --ink-ruby:     #ff5252;
  --ink-sapphire: #4dabf7;
  --ink-steel:    #adb5bd;

  /* Spacing scale (4/8/12/16/24/32/48) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Type — Geist for UI, JetBrains Mono for numerics */
  --font-ui:  'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Shadows (V1.3.0 Direction C — mehr Tiefe + accent-glow Varianten) */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.2);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px var(--ld-border);
  --shadow-hover:    0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px var(--ld-border-strong);
  --shadow-elevated: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px var(--ld-border-strong);
  --shadow-overlay:  0 10px 30px rgba(0,0,0,0.5);   /* Popover/Dropdown (E6): flacher Schlagschatten OHNE Ring — das Element trägt seine eigene Border */
  --shadow-glow:     0 0 24px var(--ld-accent-glow);
  /* `--shadow-glow-interactive` mit S3 (F21) entfernt — nie verwendet. */

  /* Density */
  --row-h: 44px;
}

/* Density modes */
[data-density="comfortable"] { --row-h: 52px; }
[data-density="medium"]      { --row-h: 44px; }
[data-density="compact"]     { --row-h: 36px; }

/* ============================================================
   Base
   ============================================================ */
html, body {
  background: var(--ld-bg);
  color: var(--ld-text);
  font-family: var(--font-ui);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
body { font-size: 14px; line-height: 1.5; }

/* V1.3.0 Direction C: stärker geschichtete Radial-Gradients —
   3 Akzent-Quellen (gold oben rechts, purple oben links, info unten)
   für premium-dunkles "Linear/Vercel"-Feeling ohne Bühne zu stehlen. */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(1400px 800px at 85% -10%, rgba(230, 201, 138, 0.055), transparent 55%),
    radial-gradient(1000px 700px at -5% 5%, rgba(139, 92, 246, 0.04), transparent 55%),
    radial-gradient(900px 500px at 50% 110%, rgba(110, 140, 255, 0.025), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Layout container */
.ld-shell { position: relative; z-index: 1; }

/* ============================================================
   Typography
   ============================================================ */
/* V1.3.0 Wave 4: Page-Title mit subtle Underline-Akzent (Gradient).
   Greift auf jedem <h1.t-display> ohne weitere Klassen-Änderungen. */
.t-display {
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--ld-accent);
  position: relative;
  padding-bottom: 8px;
}
.t-display::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--ld-accent), transparent);
  border-radius: 1px;
}
.t-h2     { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--ld-accent); }
.t-h3     { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--ld-accent); }

/* Skip-Link (usability-4, WCAG 2.4.1): versteckt bis Tastatur-Fokus, dann
   Gold-Pill oben links auf Near-Black. Liegt über allem (z-index frei > Nav). */
.ld-skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 3000;
  transform: translateY(-150%);
  background: var(--ld-accent);
  color: #111;
  font-size: 13px; font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  transition: transform .15s ease;
}
.ld-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--ld-accent-hover);
  outline-offset: 2px;
  color: #111;
  text-decoration: none;
}

/* Generische Headlines im Brand-Gold (überschreibt Bootstrap-Defaults). */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ld-accent);
}

/* Hyperlinks im Brand-Gold (gedeckt, nicht grell). Buttons (.ld-btn,
   .qa-item, .diary-item, Bootstrap .btn) setzen ihre eigene Farbe und
   sind durch Spezifität nicht betroffen. */
a {
  color: var(--ld-accent);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--ld-accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.t-body   { font-size: 14px; }
.t-small  { font-size: 13px; color: var(--ld-text-dim); }
.t-caps   {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ld-text-mute);
  white-space: nowrap;
}
.t-mono   { font-family: var(--font-mono); font-feature-settings: "tnum","zero"; }
.t-mute   { color: var(--ld-text-mute); }
.t-dim    { color: var(--ld-text-dim); }
.t-faint  { color: var(--ld-text-faint); }
/* V1.3.0 Direction C: Stat-Values bekommen einen feinen Glow für premium-Touch */
.t-pos    { color: var(--ld-pos); text-shadow: 0 0 16px rgba(62, 207, 142, 0.18); }
.t-neg    { color: var(--ld-neg); text-shadow: 0 0 16px rgba(240, 104, 112, 0.18); }
.t-mid    { color: var(--ld-mid); }
.t-accent { color: var(--ld-accent); }

/* Matchup-Favorability-Chips: Bedeutungsfarbe durchsetzen — .ld-chip überschrieb
   sonst per Quell-Reihenfolge die Textfarbe (gut/ausgeglichen/schlecht erschienen
   alle neutral-grau). Glow auf dem flachen Chip aus (clean vor flashy). */
.ld-chip.t-pos { color: var(--ld-pos); text-shadow: none; }
.ld-chip.t-neg { color: var(--ld-neg); text-shadow: none; }
.ld-chip.t-mid { color: var(--ld-mid); text-shadow: none; }

/* ============================================================
   Footer (V1.3.0 Direction C)
   ============================================================ */
.ld-footer {
  position: relative;
  color: var(--ld-text-faint);
  font-size: 12px;
  padding-top: 24px;
}
.ld-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ld-border-strong) 30%, var(--ld-border-strong) 70%, transparent);
}
.ld-footer a { color: var(--ld-text-mute); }
.ld-footer a:hover { color: var(--ld-accent); }
.ld-footer-disclaimer {
  font-size: 11px;
  opacity: 0.7;
  max-width: 900px;
  line-height: 1.55;
}

/* ============================================================
   Top bar / nav
   ============================================================ */
/* Mobile-Querscroll-Fix (backlog „375px", 2026-08-06): der Anzeigename im
   Avatar-Toggle bekommt einen Ellipsis-Deckel — lange Usernames skalierten
   den Seitenüberlauf sonst 1:1 (gemessen ~241px bei 375px Viewport). Unter
   576px blenden base.html-Klassen Name/Chip/Markenschriftzug zusätzlich aus. */
.ld-user-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.ld-topbar {
  background: rgba(10,10,12,0.85);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--ld-border);
  position: sticky; top: 0; z-index: 100;
}
.ld-topbar .navbar-brand { color: var(--ld-text) !important; font-weight: 600; font-size: 14px; }
.ld-topbar .nav-link {
  color: var(--ld-text-mute) !important;
  font-size: 13px; font-weight: 500;
  padding: 6px 12px !important;
  border-radius: var(--r-sm);
  transition: color .15s, background .15s;
}
.ld-topbar .nav-link:hover { color: var(--ld-text) !important; background: var(--ld-surface-2); }
.ld-topbar .nav-link.active { color: var(--ld-text) !important; background: var(--ld-surface-2); }

/* ==================================================================
   Aufklappende Navigationsleiste — GENERISCHE SCHICHT (`.ld-collapsenav`)
   ==================================================================
   In S2 (2026-08-10) für die Hauptnavigation gebaut, in S3 herausgelöst und
   verallgemeinert: Dieselbe Mechanik trägt jetzt auch die Reiter-Leisten
   (`_tabs.html`; seit S11a fünf Stück — Statistik, Deck-Hub, Scouting,
   Gametracker, Konto). Die Hauptnavigation ist erster Konsument, nicht mehr
   alleiniger Eigentümer — stört im Team etwas am Aufklapp-Verhalten, ist die
   Korrektur EIN Eingriff statt fünf.

   Regel dahinter (Komponenten-Norm „Reiter"): Mobil klappt eine Leiste AUF,
   statt seitlich zu schieben — „Schieben ohne sichtbare Kante ist keine
   zulässige Form". Zugeklappt zeigt der Knopf, wo man steht.

   Das Auf- und Zuklappen selbst macht bei der Hauptnavigation Bootstraps
   Collapse über data-bs-*, bei der Reiter-Leiste seit 2026-08-12
   `[data-ld-collapse]` aus csp-handlers.js (die Reiter erscheinen auch in der
   öffentlichen Shell, die kein Bootstrap-JS lädt — siehe _tabs.html).
   Beide schalten dieselbe Klasse `show`; was hier steht, ist nur die Optik
   plus das Aufheben des Collapse oberhalb des Umbruchs (gleiche Mechanik wie
   Bootstraps .navbar-expand-*).

   Was NICHT hierher gehört: alles Topbar-Eigene (Untermenüs, Gutter) und
   alles Reiter-Eigene — beides steht weiter unten bei seinem Konsumenten. */
@media (min-width: 768px) {
  .ld-collapsenav { display: block !important; height: auto !important; }
}

@media (max-width: 767.98px) {
  .ld-collapsenav-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 0;
    background: transparent;
    border: 0;
    color: var(--ld-text);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
  }
  .ld-collapsenav-toggle .bi {
    margin-left: auto;
    font-size: 11px;
    opacity: .6;
    transition: transform .15s ease;
  }
  .ld-collapsenav-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }

  /* Aufgeklappt: senkrechte Liste statt Zeile. */
  .ld-collapsenav .nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding-bottom: 8px;
  }
  .ld-collapsenav .nav-item { width: 100%; }
  .ld-collapsenav .nav-link { display: block; }
}

/* Waagerechte Leiste (Desktop-Grundform). Stand bis 2026-08-10 als Inline-Style
   am <ul> — von dort schlug er jede Klassenregel und zwang die Mobil-Fassung zu
   einem `!important`. Als Klasse ist er normal überschreibbar. */
.ld-topbar .ld-mainnav .nav { gap: 2px; margin-top: -2px; }

/* Hauptnavigation unter 768px — nur noch das TOPBAR-EIGENE; die Mechanik
   kommt aus `.ld-collapsenav` oben (F29, Felix-Entscheid 2026-08-10).

   Ersetzt die frühere Querscroll-Lösung (usability-17, 2026-07): Die Leiste war
   614px breit bei 351px sichtbarer Fläche — sechs Ziele lagen ausserhalb des
   Bildes, und die weiche Rechtskanten-Maske las sich wie ein Darstellungsfehler
   statt wie eine Einladung zu wischen. Mit dem Aufklappen entfallen zugleich
   die beiden Folge-Reparaturen an dieser Stelle: der Scroll-Clip der
   Untermenüs (`position: static`) und das Aussetzen der Maske bei offenem
   Menü — beides Symptome des Schiebens, nicht eigene Anforderungen. */
@media (max-width: 767.98px) {
  /* Trennlinie zur Zeile darüber — gibt es nur in der Topbar, weil dort eine
     zweite Zeile mit Logo und Profil sitzt. */
  .ld-mainnav-toggle { border-top: 1px solid var(--ld-border); }

  /* Hier stand bis S3 ein `padding: 8px 4px` für die aufgeklappten
     Navigationspunkte. Es war seit S2 WIRKUNGSLOS: `.ld-topbar .nav-link`
     (oben, ausserhalb dieser Media Query) setzt `padding: 6px 12px` mit
     `!important` und schlägt damit jede Regel ohne `!important`, unabhängig
     von der Spezifität. Gemessen bei 375px: effektiv 6px 12px.
     Beim Herauslösen der generischen Schicht nicht mitgezogen, sondern
     entfernt — toten Code umzuziehen verlängert nur seine Lebensdauer.
     OFFEN und bewusst nicht hier entschieden: ob die aufgeklappte Liste
     mobil überhaupt eine andere Polsterung tragen SOLL. Das war die
     erkennbare Absicht von S2; sie ist nie eingetreten und wäre eine
     Gestaltungsfrage, kein Aufräumen. */

  /* Untermenüs („Karten & Decks", „Mehr") stehen offen statt als zweites
     Popup: EIN Tipp zeigt alle Ziele. Der Eltern-Punkt wird damit zur
     Gruppen-Überschrift und ist kein Klickziel mehr — gleiche Form wie die
     Überschrift „Admin" im Profil-Menü. */
  .ld-topbar .ld-mainnav .nav-item.dropdown > .dropdown-toggle {
    pointer-events: none;
    color: var(--ld-text-mute) !important;
    background: transparent !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-bottom: 2px;
  }
  .ld-topbar .ld-mainnav .nav-item.dropdown > .dropdown-toggle::after { display: none; }
  .ld-topbar .ld-mainnav .dropdown-menu {
    display: block;
    position: static;
    float: none;
    margin: 0;
    padding: 0 0 4px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .ld-topbar .ld-mainnav .dropdown-item { padding-left: 20px; font-size: 13px; }

  /* Mobile-Querscroll-Fix: engere Gutter in beiden Topbar-Zeilen (24px → 12px
     je Seite gewinnt 24px auf 375px) + kürzerer Namens-Deckel. */
  .ld-topbar .container-fluid.px-4 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .ld-user-name { max-width: 110px; }
}

.ld-brand-logo {
  width: 22px; height: 22px;
  border-radius: 4px;
  display: inline-block;
  background-image: var(--brand-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ld-divider {
  width: 1px; height: 18px;
  background: var(--ld-border-strong);
  margin: 0 4px;
}

.ld-breadcrumb {
  font-size: 13px;
  color: var(--ld-text-mute);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.ld-breadcrumb a { color: var(--ld-text-mute); text-decoration: none; }
.ld-breadcrumb a:hover { color: var(--ld-text); }
.ld-breadcrumb .sep { color: var(--ld-text-faint); }
.ld-breadcrumb .crumb-current { color: var(--ld-text); }

/* ============================================================
   Cards
   ============================================================ */
.ld-card {
  background: linear-gradient(180deg, var(--ld-surface-1) 0%, rgba(22, 22, 28, 0.6) 100%);
  border: 1px solid var(--ld-border);
  border-radius: var(--r-lg);
  color: var(--ld-text);
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
/* V1.3.0 Direction C: Top-Gradient-Border als feiner Akzent-Strich.
   Subtil sichtbar, hebt den Card-Top hervor. */
.ld-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ld-accent-glow), transparent);
  opacity: 0.7; pointer-events: none;
}
/* Interactive Cards (Links, Hover-Use-Cases). Optional via Klasse. */
.ld-card--interactive { cursor: pointer; }
/* Klickbare Tabellen-Zeilen (data-row-href-Delegation, ADR 0152):
   Zeiger-Cursor signalisiert die Klickfläche — Karten (ld-card--interactive)
   bringen ihn schon selbst mit. */
tr[data-row-href] { cursor: pointer; }
.ld-card--interactive:hover {
  border-color: var(--ld-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
/* Hero-Card mit prominenter Glow-Border */
.ld-card--hero {
  border-color: var(--ld-border-strong);
  box-shadow: var(--shadow-glow);
}
/* `.ld-card--hero::before` ist mit S3 (F21) entfernt: kein Template nutzte
   `.ld-card--hero`, und der Farbverlauf lief von Gold nach Violett — der
   einzige Ort, an dem das Violett neben dem Marken-Gold stand. */
/* Semantische Karten-Akzente (interne Konto-/2FA-Seiten) — Iris-Spec 2026-06-23 */
.ld-card--danger { border-color: rgba(240, 104, 112, 0.40); }
.ld-card--danger .ld-card-header h3 { color: var(--ld-neg); }
.ld-card--warn { border-color: rgba(232, 179, 57, 0.35); }
.ld-card--warn .ld-card-header h3 { color: var(--ld-mid); }
.ld-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ld-border);
  background: transparent;
}
.ld-card-header h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; color: var(--ld-accent); }
.ld-card-header .ld-card-meta { font-size: 12px; color: var(--ld-text-mute); }
.ld-card-body { padding: 16px; }
.ld-card-body--flush { padding: 0; }

/* Bootstrap-Listen IN Token-Karten (S10a, 2026-08-23): `list-group-item` bringt
   aus Bootstrap weiße Fläche und Schwarztext mit — in einer dunklen `ld-card`
   leuchteten die Mitglieder-Zeilen der Teamseite weiß (Browser-Fund erste
   Hand). Vorher half sich `games/detail.html` mit Inline-Styles; hier die eine
   Stelle, damit Listen in Karten die Kartenfläche übernehmen. Nur innerhalb
   von `.ld-card` — Listen außerhalb bleiben unberührt. */
.ld-card .list-group-item {
  background: transparent;
  color: var(--ld-text);
  border-color: var(--ld-border);
}
.ld-card .list-group-flush > .list-group-item:last-child { border-bottom: 0; }

/* KPI tile */
.ld-kpi {
  background: linear-gradient(180deg, var(--ld-surface-1) 0%, rgba(22, 22, 28, 0.5) 100%);
  border: 1px solid var(--ld-border);
  border-radius: var(--r-lg);
  padding: 16px;
  padding-right: 104px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
  min-width: 0;
}
/* V1.3.0 Direction C: KPI bekommt einen feinen Top-Gradient-Akzent
   genau wie ld-card — konsistente Linear-Pattern-Sprache. */
.ld-kpi::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ld-accent-glow), transparent);
  opacity: 0.7; pointer-events: none;
}
.ld-kpi:hover {
  border-color: var(--ld-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
.ld-kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ld-text-mute);
  display: flex; align-items: center; gap: 6px;
}
.ld-kpi-value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum","zero";
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ld-text);
  line-height: 1.1;
  margin-top: 2px;
  white-space: nowrap;
}
.ld-kpi-sub {
  font-size: 12px;
  display: flex; align-items: center; gap: 6px;
  color: var(--ld-text-mute);
  margin-top: 4px;
  white-space: nowrap;
}
.ld-kpi-delta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 6px;
  border-radius: var(--r-sm);
}
/* V1.3.0 Wave 2: KPI-Delta als kleine Pill mit subtle Glow-Background */
.ld-kpi-delta.up   {
  color: var(--ld-pos);
  background: rgba(62, 207, 142, 0.12);
  box-shadow: 0 0 12px rgba(62, 207, 142, 0.15);
}
.ld-kpi-delta.down {
  color: var(--ld-neg);
  background: rgba(240, 104, 112, 0.12);
  box-shadow: 0 0 12px rgba(240, 104, 112, 0.15);
}
.ld-kpi-delta.flat {
  color: var(--ld-text-mute);
  background: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   Tables
   ============================================================ */
.ld-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: var(--ld-text);
}
.ld-table thead th {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ld-text-mute);
  padding: 10px 16px;
  border-bottom: 1px solid var(--ld-border);
  background: transparent;
  text-align: left;
  white-space: nowrap;
}
.ld-table tbody td {
  padding: 0 16px;
  height: var(--row-h);
  vertical-align: middle;
  border-bottom: 1px solid var(--ld-border);
  color: var(--ld-text);
}
.ld-table tbody tr:last-child td { border-bottom: 0; }
.ld-table tbody tr { transition: background .12s; }
.ld-table tbody tr:hover { background: var(--ld-surface-2); }
.ld-table .num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum","zero";
  text-align: right;
}
.ld-table .ta-r { text-align: right; }
.ld-table a { color: var(--ld-text); text-decoration: none; }
.ld-table a:hover { color: var(--ld-accent); }

/* ============================================================
   Buttons
   ============================================================ */
.ld-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 500;
  height: 32px; padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--ld-border-strong);
  background: var(--ld-surface-2);
  color: var(--ld-text);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  text-decoration: none;
  white-space: nowrap;
}
.ld-btn:hover { background: var(--ld-surface-3); border-color: #34343c; color: var(--ld-text); }
.ld-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ld-accent-ring); }
/* Deaktiviert (z.B. 2FA-Weiter vor Bestätigung, usability-14): gedimmt + nicht
   klickbar. Greift auf <a class="ld-btn disabled"> wie auf <button disabled>. */
.ld-btn.disabled, .ld-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.ld-btn--primary {
  background: var(--ld-accent);
  color: #1a1410;
  border-color: var(--ld-accent);
  font-weight: 600;
}
.ld-btn--primary:hover { background: var(--ld-accent-hover); border-color: var(--ld-accent-hover); color: #1a1410; }

.ld-btn--ghost {
  background: transparent; border-color: transparent;
  color: var(--ld-text-dim);
}
.ld-btn--ghost:hover { background: var(--ld-surface-2); color: var(--ld-text); }

/* Destruktive Aktionen (2FA deaktivieren, Token/Account löschen) — Iris-Spec 2026-06-23 */
.ld-btn--danger {
  background: transparent;
  border-color: rgba(240, 104, 112, 0.40);
  color: var(--ld-neg);
}
.ld-btn--danger:hover { background: var(--ld-neg); border-color: var(--ld-neg); color: #1a1410; }

.ld-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.ld-btn--icon { width: 32px; padding: 0; justify-content: center; }

/* ============================================================
   Badges & chips
   ============================================================ */
.ld-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  height: 22px;
  font-size: 11px; font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--ld-border-strong);
  background: var(--ld-surface-2);
  color: var(--ld-text-dim);
  white-space: nowrap;
}
.ld-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ld-text-mute);
  flex: 0 0 6px;
}
.ld-chip--pos { color: var(--ld-pos); border-color: rgba(62,207,142,0.25); background: rgba(62,207,142,0.08); }
.ld-chip--pos .dot { background: var(--ld-pos); }
.ld-chip--neg { color: var(--ld-neg); border-color: rgba(240,104,112,0.25); background: rgba(240,104,112,0.08); }
.ld-chip--neg .dot { background: var(--ld-neg); }
.ld-chip--mid { color: var(--ld-mid); border-color: rgba(232,179,57,0.25); background: rgba(232,179,57,0.08); }
.ld-chip--mid .dot { background: var(--ld-mid); }
.ld-chip--accent { color: var(--ld-accent); border-color: rgba(230,201,138,0.25); background: var(--ld-accent-soft); }
.ld-chip--accent .dot { background: var(--ld-accent); }

/* Ink chip — pill mit 1..N Logo-Bildern, optionalem Label.
   Vollständige Definition; siehe ink-logo / ink-fallback weiter unten. */
.ink-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px 2px 4px;
  height: 22px;
  font-size: 11px; font-weight: 500;
  border-radius: 999px;
  background: var(--ld-surface-3);
  border: 1px solid var(--ld-border-strong);
  color: var(--ld-text);
}
.ink-chip .ink-pair {
  display: inline-flex; align-items: center; gap: 2px;
}

/* ============================================================
   Forms
   ============================================================ */
.ld-input, .ld-select {
  background: var(--ld-surface-3);
  border: 1px solid var(--ld-border-strong);
  color: var(--ld-text);
  border-radius: var(--r-md);
  font-size: 13px;
  height: 32px;
  padding: 0 12px;
  transition: border-color .12s, box-shadow .12s;
}
.ld-input:focus, .ld-select:focus {
  outline: none;
  border-color: var(--ld-accent);
  box-shadow: 0 0 0 3px var(--ld-accent-ring);
}
.ld-input::placeholder { color: var(--ld-text-faint); }

/* ============================================================
   Misc helpers
   ============================================================ */
.hr-soft { height: 1px; background: var(--ld-border); border: 0; margin: 0; }

.dot-i {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ld-text-mute);
  margin-right: 6px;
  vertical-align: middle;
}
.dot-i--pos { background: var(--ld-pos); }
.dot-i--neg { background: var(--ld-neg); }
.dot-i--mid { background: var(--ld-mid); }

.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--ld-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--ld-surface-2);
  color: var(--ld-text-dim);
}

/* Win-rate bar */
.wr-bar {
  position: relative;
  height: 4px;
  width: 100%;
  background: var(--ld-surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.wr-bar > span {
  position: absolute; top: 0; left: 0; bottom: 0;
  border-radius: 999px;
  background: var(--ld-text-mute);
}
.wr-bar > span.pos { background: var(--ld-pos); }
.wr-bar > span.neg { background: var(--ld-neg); }
.wr-bar > span.mid { background: var(--ld-mid); }

/* Activity / diary item */
.diary-item {
  display: flex; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ld-border);
  cursor: pointer;
}
.diary-item:last-child { border-bottom: 0; }
/* ADR 0026: 3px-Hover-Indicator als Standard-Pattern für Listen-Elemente.
   Greift überall wo ein Item beim Klick zu einer Detail-Seite navigiert.
   Diary, Card-Grid-Listen, Tabellen-Zeilen mit Detail-Link, plus generische
   .ld-hover-indicator-Klasse für sonstige Custom-Listen. */
.diary-item { transition: background .15s, box-shadow .15s; }
.diary-item:hover {
  background: var(--ld-surface-2);
  box-shadow: inset 3px 0 0 var(--ld-accent);
}
.ld-hover-indicator,
.ld-table tbody tr {
  transition: background .15s, box-shadow .15s;
}
.ld-hover-indicator:hover,
.ld-table tbody tr:hover {
  box-shadow: inset 3px 0 0 var(--ld-accent);
}
/* .ld-card--interactive hat schon Hover-Lift; Indicator zusätzlich aufgesetzt
   via inset-shadow neben dem bestehenden Drop-Shadow. */
.ld-card--interactive:hover {
  box-shadow: var(--shadow-hover), inset 3px 0 0 var(--ld-accent);
}
.diary-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ld-surface-4);
  color: var(--ld-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  flex: 0 0 28px;
}
.diary-meta { font-size: 12px; color: var(--ld-text-mute); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; row-gap: 4px; margin-top: 4px; }
.diary-title { font-size: 13px; font-weight: 500; color: var(--ld-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; min-width: 0; }
.diary-time { font-family: var(--font-mono); font-size: 11px; color: var(--ld-text-faint); white-space: nowrap; flex: 0 0 auto; }
.diary-snippet { font-size: 12px; color: var(--ld-text-dim); margin-top: 4px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Quick actions */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ld-border); }
.qa-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .qa-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
.qa-item {
  background: var(--ld-surface-1);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: background .12s;
  text-decoration: none;
  color: var(--ld-text);
  min-width: 0;
}
.qa-item:hover { background: var(--ld-surface-2); color: var(--ld-text); }
.qa-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ld-surface-3);
  color: var(--ld-text-dim);
  flex: 0 0 28px;
}
.qa-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.qa-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-sub   { font-size: 11px; color: var(--ld-text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-kbd { margin-left: auto; }

/* E5.2-Orphan-Aufräumung (2026-07-15): .sec-title, .pill-group und
   .team-stack waren repo-weit ungenutzt (kein Template/JS-Treffer) und wurden
   entfernt. Nicht entfernt wurden .ld-card-meta/.t-h2/.t-h3 (aktiv genutzt) und
   .kbd/.qa-kbd (jetzt für Command-Palette/Shortcuts verwendet). */

/* Bootstrap reset bits we still rely on */
.dropdown-menu { background: var(--ld-surface-1); border: 1px solid var(--ld-border-strong); border-radius: var(--r-md); padding: 4px; box-shadow: var(--shadow-2); }
.dropdown-item { color: var(--ld-text-dim); font-size: 13px; border-radius: var(--r-sm); padding: 6px 10px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ld-surface-3); color: var(--ld-text); }
.dropdown-divider { border-color: var(--ld-border); margin: 4px 0; }

/* Tastatur-Fokusring für native Bootstrap-.btn (usability-21, WCAG 2.4.7).
   Maus-Klick bleibt ringfrei dank :focus-visible; nur Tastatur bekommt den Ring.
   Gleiches Ring-Token wie .ld-btn:focus-visible — keine zweite Farbwelt. */
.btn:focus, .btn-check:focus + .btn { box-shadow: none; }
.btn:focus-visible, .btn-check:focus-visible + .btn {
  box-shadow: 0 0 0 3px var(--ld-accent-ring);
}

/* ============================================================
   Ink logos / chips (project-specific extensions)
   ============================================================ */
.ink-logo {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  object-fit: contain;
}
.ink-fallback {
  display: inline-block;
  vertical-align: middle;
}
.ink-fallback--amber    { background: var(--ink-amber); }
.ink-fallback--amethyst { background: var(--ink-amethyst); }
.ink-fallback--emerald  { background: var(--ink-emerald); }
.ink-fallback--ruby     { background: var(--ink-ruby); }
.ink-fallback--sapphire { background: var(--ink-sapphire); }
.ink-fallback--steel    { background: var(--ink-steel); }

.ink-chip-label { font-size: 12px; color: var(--ld-text); }
.ink-chip--sm { height: 18px; padding: 0 6px 0 4px; font-size: 10px; }
.ink-chip--sm .ink-chip-label { font-size: 10px; }

/* App-specific: card-hover tooltip — Klassen-basiert für robustes Cleanup
   nach DOM-removal des Trigger-Elements (z.B. Such-Dropdown). */
.card-hover-tip {
  position: fixed; z-index: 1080; pointer-events: none; padding: 4px;
  background: var(--ld-surface-1); border: 1px solid var(--ld-border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.card-hover-tip img { display: block; max-width: 240px; max-height: 340px; border-radius: 6px; }
.card-hover { color: var(--ld-accent); text-decoration: underline dotted; cursor: help; }
.card-hover:hover { color: var(--ld-accent-hover); }

/* Scouting Deck-Modal (#deckModal): über card-hover-tip (1080) heben — analog
   #deckPreviewModal / #mxFullscreenModal. Backdrop scoped (NICHT global
   .modal-backdrop.show, das hebt jeden Backdrop und ist eine Falle). Greift
   zusammen mit dem <body>-Teleport in scouting-board.js. Siehe ADR 0042. */
#deckModal { z-index: 2050; }
#deckModal ~ .modal-backdrop { z-index: 2040; }

/* #archLabelModal + .al-* (Archetyp „Labels verwalten"-Modal, ADR 0043) mit
   ADR 0125 entfernt — Karten-Labels leben team-weit an der Karte (.cl-*). */

.illegal-card { color: var(--ld-neg); }
.needs-review-banner { background: rgba(232,179,57,0.10); border: 1px solid rgba(232,179,57,0.40); color: var(--ld-mid); padding: 12px 16px; border-radius: var(--r-md); }

/* Deckbuilder: Format-Legalität (Phase 1, Schritt 1.4, ADR 0045 D8b).
   Illegale Galerie-Karte = roter Rahmen + Warn-Punkt oben rechts; clean, kein
   Modal. Deck-Zeilen nutzen weiter .text-danger (im JS). Die Zusammenfassung
   (.db-legality) trägt eine ruhige OK-Zeile bzw. einen Warn-Stil. */
.db-illegal { position: relative; border: 1px solid var(--ld-neg); border-radius: var(--r-md); }
.db-illegal::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ld-neg); box-shadow: 0 0 0 2px var(--ld-bg);
}
.db-legality--ok   { color: var(--ld-pos); }
.db-legality--warn {
  color: var(--ld-neg); background: rgba(240,104,112,0.08);
  border: 1px solid rgba(240,104,112,0.25); border-radius: var(--r-md);
  padding: 6px 10px;
}

/* Deckbuilder: Lade-Fehler-Banner (Phase 1, ADR 0045, Fix A). Wird ?deck=<id>
   gesetzt und das Laden scheitert (nicht eingeloggt/401, 403, 404, Netz), zeigt
   das JS hier eine markenfarbige Inline-Meldung. Akzent-getönt (kein hartes Rot),
   damit „bitte anmelden" als Hinweis und nicht als Fehlalarm wirkt; clean, kein
   Modal. [hidden] respektiert den versteckten Standardzustand. */
.db-load-error {
  color: var(--ld-accent); background: var(--ld-accent-soft);
  border: 1px solid var(--ld-accent-ring); border-radius: var(--r-md);
  padding: 8px 12px; font-size: 13px;
}
.db-load-error[hidden] { display: none; }
.db-load-error a { color: var(--ld-accent-hover); }

/* Deckbuilder: Liste/Bild-Ansicht (ADR 0051, D1). Liste = Deck-Zeilen, Bild =
   Kachel-Raster der Deck-Karten. Im E2-Shell-Layout (ADR 0089) bestimmt die
   Spaltenbreite der ziehbare Splitter (#db-splitter), NICHT mehr ein „Ausdehnen"-
   Reflow — wer das Deck groß sehen will, zieht die Spalte breiter. Die Klassen
   db-view-list/db-view-image steuern nur noch Zeilen vs. Kacheln (siehe JS). */

/* Bild-Raster der Deck-Karten (Slice 2a): Karten-Bild + Gold-Mengen-Badge +
   kompakter −/+-Stepper. Flache Kacheln ohne Glow (Hausstil). Gruppierung nach
   Zonen (Maindeck/Cardpool) übernimmt das JS über je einen Grid-Container. Die
   Dreamborn-Regler (Gruppieren/Sortieren) und das Hover-Menü sind Slice 2b. */
/* 8 Spalten fest (Felix 2026-07-30) — EINE Regel für beide Karten-Raster:
   Deck-Bildansicht (.db-deck-grid, Kacheln skalieren mit der Splitter-Spalte)
   und Deck-Vorschau (.dp-grid, decks/_preview_fragment.html; dessen übriger
   Alt-Bestand bleibt inline, NEUE Regeln leben hier — CLAUDE.md-Konvention).
   Auf Mobil-Viewports bleibt je das auto-fill-Raster — 8 Spalten auf
   Handybreite wären unlesbar klein. */
.db-deck-grid, .deck-preview .dp-grid {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px;
}
@media (max-width: 767.98px) {
  .db-deck-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); }
  .deck-preview .dp-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
.db-deck-tile {
  position: relative; border: 1px solid var(--ld-border); border-radius: var(--r-md);
  overflow: hidden; background: var(--ld-surface-2);
}
.db-deck-tile.db-tile-illegal { border-color: var(--ld-neg); }
.db-deck-tile img { display: block; width: 100%; height: auto; }
.db-deck-tile .db-tile-noimg {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 7;
  padding: 4px; font-size: 11px; text-align: center; color: var(--ld-text-dim);
}
.db-tile-badge {
  position: absolute; top: 3px; left: 3px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center;
  background: var(--ld-accent); color: var(--ld-bg); box-shadow: 0 0 0 1px var(--ld-bg);
}
.db-tile-step {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(10,10,12,0.72); border-top: 1px solid var(--ld-border);
}
.db-tile-step button {
  flex: 1 1 0; border: 0; background: transparent; color: var(--ld-text);
  font-size: 14px; line-height: 1; padding: 3px 0; cursor: pointer;
}
.db-tile-step button:hover { background: var(--ld-surface-3); color: var(--ld-accent); }
.db-tile-del:hover { color: var(--ld-neg) !important; }
.db-deck-zone-empty { color: var(--ld-text-mute); font-size: 12px; }

/* Deckbuilder: Bild-Ansicht-Regler + Sub-Gruppen (Slice 2b, ADR 0052, D2).
   Gruppieren/Sortieren nach Dreamborn-Vorbild; Zonen bleiben äußere Ebene,
   gruppiert wird darin (Felix-Entscheidung 2026-06-19). Flach, ruhig, Gold-Akzent
   nur am Gruppen-Kopf. */
.db-view-controls { color: var(--ld-text-dim); }
.db-view-controls[hidden] { display: none !important; }
.db-deck-group { margin-bottom: 10px; }
.db-deck-group-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--ld-accent);
  border-bottom: 1px solid var(--ld-border); padding: 2px 0; margin-bottom: 4px;
}
.db-deck-group-count { color: var(--ld-text-mute); font-weight: 400; }

/* (E2/ADR 0089) Die frühere zweite „Cardpool"-Zone im Deckbuilder und die
   Mobile-Tabs (Galerie/Maindeck/Cardpool) sind entfallen: der Deckbuilder hat
   nur noch EINE Deck-Zone, der Cardpool ist ab E3 ein eigener Einstieg. Das neue
   Shell-Layout (Filterleiste oben, Galerie links, Splitter, Deck-Spalte rechts,
   Bottom-Sheet auf Mobile) steht gebündelt im Block „=== Builder-Shell (E2) ===". */

/* Markdown content rendering inside diary/notes */
.markdown-content { line-height: 1.6; color: var(--ld-text); }
.markdown-content h1, .markdown-content h2, .markdown-content h3 { color: var(--ld-accent); margin-top: 1.2em; }
.markdown-content code { background: var(--ld-surface-3); padding: 1px 6px; border-radius: 4px; color: var(--ld-accent); font-size: 12px; }
.markdown-content pre { background: var(--ld-surface-3); padding: 12px; border-radius: var(--r-md); overflow-x: auto; }
.markdown-content blockquote { border-left: 3px solid var(--ld-accent); padding-left: 12px; color: var(--ld-text-dim); margin-left: 0; }
.markdown-content a { color: var(--ld-accent); }
.markdown-content table { border-collapse: collapse; }
.markdown-content table th, .markdown-content table td { border: 1px solid var(--ld-border); padding: 6px 10px; }

/* Bootstrap form override to match new tokens */
.form-control, .form-select {
  background: var(--ld-surface-3);
  border: 1px solid var(--ld-border-strong);
  color: var(--ld-text);
  border-radius: var(--r-md);
}
.form-control:focus, .form-select:focus {
  background: var(--ld-surface-3);
  border-color: var(--ld-accent);
  color: var(--ld-text);
  box-shadow: 0 0 0 3px var(--ld-accent-ring);
}
.form-control::placeholder { color: var(--ld-text-faint); }
.form-label { color: var(--ld-text-dim); font-size: 13px; font-weight: 500; }

/* ------------------------------------------------------------------
   Bootstrap-Dialog auf die Marken-Farbwelt (F28 der UX-Aufnahme
   2026-08-09; Komponenten-Norm „Dialog", docs/guides/design-stilguide.md).

   EIN Griff in dieser Token-Override-Schicht statt Farben in einzelnen
   Overlays — damit trägt JEDES Modal die Regel, auch die fünf, die nicht
   auf `_modal_base.html` aufbauen.

   Ursache des Fehlers (S1, erste Hand): tokens.css stylte an Modals
   ausschliesslich den z-index (Zeile 46). Bootstraps weisser Default-Grund
   traf damit auf die geerbte helle App-Textfarbe --ld-text — fast weisse
   Schrift auf Weiss. Nicht ein Stilbruch, sondern ein Lesbarkeitsfehler.
   ------------------------------------------------------------------ */
.modal {
  --bs-modal-bg: var(--ld-surface-1);
  --bs-modal-color: var(--ld-text);
  --bs-modal-border-color: var(--ld-border);
  --bs-modal-header-border-color: var(--ld-border);
  --bs-modal-footer-border-color: var(--ld-border);
}
.modal-backdrop {
  --bs-backdrop-bg: var(--ld-bg);
  --bs-backdrop-opacity: 0.7;
}
/* Das Schliess-Kreuz ist bei Bootstrap ein SCHWARZES SVG (fill='%23000') und
   wäre auf dem dunklen Grund unsichtbar — im Auftragswortlaut nicht genannt,
   aber Teil desselben Fehlers. Der Weiss-Filter liegt bereits als Variable im
   Vendor-CSS (--bs-btn-close-white-filter); wir schalten ihn nur an, statt
   einen eigenen filter-Wert zu erfinden. */
.modal .btn-close { filter: var(--bs-btn-close-white-filter); }

/* Bootstrap card fallback for pages we don't fully port — make Bootstrap cards look like ld-cards */
.card {
  background: var(--ld-surface-1);
  border: 1px solid var(--ld-border);
  border-radius: var(--r-lg);
  color: var(--ld-text);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ld-border);
  color: var(--ld-text);
  padding: 14px 16px;
}

/* Bootstrap table fallback */
.table { color: var(--ld-text); }
.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--ld-border);
  color: var(--ld-text);
}
.table-hover > tbody > tr:hover > * { background-color: var(--ld-surface-2); }

/* Bootstrap nav-tabs in our look */
.nav-tabs {
  border-bottom: 1px solid var(--ld-border);
  gap: 2px;
}
.nav-tabs .nav-link {
  color: var(--ld-text-mute);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: color .15s, background .15s, border-color .15s;
}
.nav-tabs .nav-link:hover {
  color: var(--ld-text);
  background: var(--ld-surface-2);
  border-color: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--ld-text);
  background: transparent;
  border-bottom-color: var(--ld-accent);
}

/* Reiter unter 768px: aufgeklappte Fassung (S3, F4). Die Mechanik kommt aus
   `.ld-collapsenav`; hier steht nur, was die Reiter-Leiste selbst braucht.

   Die Desktop-Optik bleibt unverändert — sie war bereits normkonform. Was
   hier entsteht, ist die zuvor FEHLENDE Mobil-Fassung: vorher schob die
   Leiste seitlich, es gab also keine Gestalt, die sich ändern könnte.

   Übertragung des Prinzips „Gold markiert den aktiven Reiter" auf die
   senkrechte Liste: der 2px-Akzent wandert vom unteren an den linken Rand.
   Ein Unterstrich unter jedem gestapelten Eintrag läse sich als Trennlinie
   einer Tabelle, nicht als Markierung. */
@media (max-width: 767.98px) {
  .ld-tabs-toggle {
    border-bottom: 1px solid var(--ld-border);
    margin-bottom: 8px;
  }
  /* `gap` kommt bereits aus der generischen Schicht (`.ld-collapsenav .nav`);
     hier nur die durchgehende Unterkante weg — sie trennt waagerecht die
     Leiste vom Inhalt und wäre senkrecht eine Linie unter dem letzten Reiter. */
  .ld-collapsenav .nav-tabs { border-bottom: 0; }
  .ld-collapsenav .nav-tabs .nav-link {
    border-bottom: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    padding: 8px 12px;
  }
  .ld-collapsenav .nav-tabs .nav-link.active {
    border-left-color: var(--ld-accent);
  }
}

/* Der frühere .btn-primary-Gold-Override ist mit S4 (F27, ADR 0207) entfallen:
   Templates und JS tragen keine Bootstrap-Optikklassen mehr, Gold kommt
   ausschließlich aus .ld-btn--primary. */

/* Bootstrap alert in our tokens */
.alert { border-radius: var(--r-md); border: 1px solid var(--ld-border-strong); }
.alert-success { background: rgba(62,207,142,0.08); color: var(--ld-pos); border-color: rgba(62,207,142,0.25); }
.alert-danger  { background: rgba(240,104,112,0.08); color: var(--ld-neg); border-color: rgba(240,104,112,0.25); }
.alert-warning { background: rgba(232,179,57,0.08); color: var(--ld-mid); border-color: rgba(232,179,57,0.25); }
/* Info-Alerts sind seit dem Etiketten-Umbau (2026-08-11) neutral statt blau:
   Hinweise sind Ruhig-Rang, kein eigener Farbkanal (Stilguide „Etikett"). */
.alert-info    { background: var(--ld-surface-2); color: var(--ld-text-dim); border-color: var(--ld-border-strong); }

/* Bootstrap-Text-/Badge-Utilities auf die Token-Palette mappen (stil-1).
   Ohne data-bs-theme="dark" rendern .text-*/.bg-* sonst in Bootstrap-Default-
   Farben (zweite, abweichende Farbwelt + text-secondary fast unlesbar auf
   dunklem --ld-bg). !important nötig, weil Bootstrap diese Utilities selbst mit
   !important setzt. Bedeutungs-Badges mit dunklem Vordergrund (lesbar auf hellen
   Daten-Farben). Reihenfolge: .text-secondary erst NACH usability-20
   (mute aufgehellt), sonst erbt es das Kontrastproblem. */
.text-secondary { color: var(--ld-text-mute) !important; }
.text-success   { color: var(--ld-pos) !important; }
.text-danger    { color: var(--ld-neg) !important; }
.text-warning   { color: var(--ld-mid) !important; }
/* `.text-info` mit S3 (F21) entfernt — in keinem Template benutzt. */

.bg-success   { background-color: var(--ld-pos) !important; color: #111 !important; }
.bg-danger    { background-color: var(--ld-neg) !important; color: #111 !important; }
.bg-warning   { background-color: var(--ld-mid) !important; color: #111 !important; }
/* `.bg-info` ist mit dem Etiketten-Umbau (2026-08-11) ABGESCHAFFT, nicht
   umgefärbt: der Name verspricht Info-Blau, das es nicht mehr gibt. Ruhige
   Info-Marken tragen `.ld-badge-quiet`, gleichrangige Wertepaare die
   `.ld-tone--*`-Leiter (unten). */
.bg-primary   { background-color: var(--ld-accent) !important; color: #111 !important; }
.bg-secondary { background-color: var(--ld-surface-3) !important; color: var(--ld-text) !important; }

/* Ruhig-Etikett (Stilguide „Etikett", 2026-08-11): neutrale Fläche + Sekundär-
   text für solitäre Info-Marken (Bo3, Intern, OTP-Spalte nutzt die Leiter). */
.ld-badge-quiet { background: var(--ld-surface-4); color: var(--ld-text-dim); }

/* Helligkeitsleiter für GLEICHRANGIGE Werte einer Eigenschaft (Stilguide
   „Gleichrangige Werte", Felix-Entscheid 2026-08-11): hell · dunkel · Umriss,
   volle Spanne — zwei Nachbar-Töne trügen nicht (1,33:1, gemessen). Gold
   bleibt außen vor: Auszeichnung der Handlung, keine Partei-Kennung.
   Konsumenten: Flags „Ich · Gegner · Beide" (Badge + Eingabe-Knopf,
   sessions/games.html) und OTP/OTD (games/list.html). Der transparente Rand
   auf --light hält die Knopfmaße beim Umschalten stabil. */
.ld-tone--light   { background: var(--ld-text-dim); color: var(--ld-surface-1); border: 1px solid transparent; }
.ld-tone--dark    { background: var(--ld-surface-4); color: var(--ld-text); border: 1px solid var(--ld-border-strong); }
.ld-tone--outline { background: transparent; color: var(--ld-text-dim); border: 1px solid var(--ld-border-strong); }
/* Knopf-Fall: Bootstrap-Zustände über die btn-Vars DEFINIEREN statt per
   !important unterdrücken — Hover hellt Text/Rand auf, Flächen bleiben. */
.btn.ld-tone--light {
  --bs-btn-bg: var(--ld-text-dim); --bs-btn-color: var(--ld-surface-1);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--ld-text); --bs-btn-hover-color: var(--ld-surface-1);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--ld-text-dim); --bs-btn-active-color: var(--ld-surface-1);
  --bs-btn-active-border-color: transparent;
}
.btn.ld-tone--dark {
  --bs-btn-bg: var(--ld-surface-4); --bs-btn-color: var(--ld-text);
  --bs-btn-border-color: var(--ld-border-strong);
  --bs-btn-hover-bg: var(--ld-surface-4); --bs-btn-hover-color: var(--ld-text);
  --bs-btn-hover-border-color: var(--ld-text-dim);
  --bs-btn-active-bg: var(--ld-surface-4); --bs-btn-active-color: var(--ld-text);
  --bs-btn-active-border-color: var(--ld-text-dim);
}
.btn.ld-tone--outline {
  --bs-btn-bg: transparent; --bs-btn-color: var(--ld-text-dim);
  --bs-btn-border-color: var(--ld-border-strong);
  --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--ld-text);
  --bs-btn-hover-border-color: var(--ld-text-dim);
  --bs-btn-active-bg: transparent; --bs-btn-active-color: var(--ld-text);
  --bs-btn-active-border-color: var(--ld-text-dim);
}

/* Segment-Wahl (btn-check-/btn-group-Labels und Link-Umschalter): Bootstrap
   bleibt der Verhaltens-Baustein, die Optik kommt aus dieser Override-Schicht
   statt aus einer btn-outline-*-Wahl (Komponenten-Norm "Knopf", S4/F27).
   Gewählt = Fläche + starker Rand, bewusst KEIN Gold: Auswahlzustand ist ein
   gleichrangiger Wert, keine Handlung (Stilguide "Gleichrangige Werte").
   Den Gewählt-Zustand stylen die --bs-btn-active-*-Variablen — Bootstrap
   wendet sie sowohl auf ':checked + .btn' als auch auf '.btn.active' an,
   eine zweite Literalregel braucht es nicht. */
.btn.ld-segbtn {
  --bs-btn-bg: transparent; --bs-btn-color: var(--ld-text-dim);
  --bs-btn-border-color: var(--ld-border-strong);
  --bs-btn-hover-bg: var(--ld-surface-2); --bs-btn-hover-color: var(--ld-text);
  --bs-btn-hover-border-color: var(--ld-border-strong);
  --bs-btn-active-bg: var(--ld-surface-3); --bs-btn-active-color: var(--ld-text);
  --bs-btn-active-border-color: var(--ld-text-dim);
}

/* Formular-Größe der Segment-Wahl (Session-Formular Art/Typ). Maße analog
   .ink-btn-form, damit Formular-Umschalter einheitlich hoch sind; die 44px
   auf schmalen Geräten sind das Touch-Ziel-Maß und kein Optik-Detail.
   Übernommen aus der abgelösten Alt-Klasse für Marken-Umschalter — die Farbe
   kommt seit der Zusammenführung aus .ld-segbtn (kein Gold), die Größe von
   hier. */
.btn.ld-segbtn-lg {
  --bs-btn-font-size: 13px;
  --bs-btn-padding-y: 6px; --bs-btn-padding-x: 12px;
  /* inline-flex statt Bootstraps inline-block: sonst klebt die Beschriftung
     bei gesetzter min-height oben statt mittig. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px;
}
@media (max-width: 575.98px) { .btn.ld-segbtn-lg { min-height: 44px; } }

/* Info-tip helper used in /statistik/prep */
.info-tip {
  display: inline-block; cursor: help;
  width: 16px; height: 16px; line-height: 16px; text-align: center;
  border-radius: 50%; background: var(--ld-surface-3); color: var(--ld-text-mute);
  font-size: 11px; font-weight: 600; margin-left: 4px;
}
.info-tip:hover { background: var(--ld-surface-4); color: var(--ld-text); }
.tooltip-inner { max-width: 360px; text-align: left; background: var(--ld-surface-1); border: 1px solid var(--ld-border-strong); }

/* Round ink-logo buttons — Logo-only-Fassung (Felix 2026-07-16, ADR 0162:
   „Inklogos ohne farbigen Kreis — auf jeder Seite & jedem Filter").
   EIN Verhalten überall, identisch zum Deckbuilder-Muster .db-ink-toggle
   (Felix 2026-07-06): KEIN Ink-Color-Farbkreis hinter dem Logo — nur das
   Logo selbst. Unchecked: entsättigt/gedämpft; Checked: voll + weißer
   Ring + Outer-Glow in der Ink-Color; Hover: leichter Scale.
   `--ink-color` wird weiter per inline-style (Templates) oder
   .ink-btn-{A,M,E,R,S,T} (Letter-Variante) gesetzt und färbt den Glow. */
.ink-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 50%;
  /* !important schützt vor Bootstrap-.btn-Active-BG-Override im checked-State */
  background-color: transparent !important;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ink-filter-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 10px var(--ink-color, var(--ld-accent-glow));
}
.ink-filter-btn .ink-logo {
  border-radius: 50%;
  max-width: 100%; max-height: 100%;
}
/* Unchecked = entsättigt (Checkbox-Pattern; das Button-Pattern .db-ink-toggle
   regelt denselben Zustand über .is-active weiter unten). */
.btn-check:not(:checked) + .ink-filter-btn .ink-logo {
  filter: grayscale(.9); opacity: .55;
}
.btn-check:not(:checked) + .ink-filter-btn:hover .ink-logo { opacity: 1; }
.btn-check:checked + .ink-filter-btn {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 14px 2px var(--ink-color, var(--ld-accent));
}

/* Kompakte Variante (border-width-Schmal). Größe ist bereits Default 24px. */
.ink-filter-btn--sm { border-width: 1px; }
.ink-filter-group { gap: 6px; }

/* Round Ink-Picker-Button für sessions/games Spielzeile (Logo-Overlay).
   Per-Ink-Variante via .ink-btn-{A,M,E,R,S,T} Letter-Shortcut darunter.

   Toggle-Logik (V1.1): Default-Zustand zeigt das Logo desaturiert (User
   erkennt die Farbe sofort), bei Auswahl voll-saturiert mit dünner heller
   Umrandung statt dem alten low-opacity-Default. */
.ink-btn {
  width: 32px; height: 32px;
  padding: 0;
  font-size: 0;                /* hide letter visually; alt via title */
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: 50%;
  /* Logo-only (Felix 2026-07-16, ADR 0162): kein Ink-Color-Kreis hinter dem
     Logo — Auswahl-Ring (checked) bleibt farbig. */
  background-color: transparent;
  background-image: var(--ink-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Backlog Item 1 v2 (2026-05-15): Default voll sichtbar, leichte Mute.
     Ausgrauen passiert dynamisch über `.ink-picker--saturated` am Wrapper. */
  opacity: 0.95;
  transition: filter .12s, opacity .12s, transform .12s, border-color .12s, box-shadow .12s;
}
.ink-btn:hover { opacity: 1; transform: scale(1.04); }
.btn-check:checked + .ink-btn {
  filter: none;
  opacity: 1;
  border-color: var(--ink-color);
}
/* ============================================================
   Matchup-Matrix (/statistik/matchups)
   ============================================================ */
.mx-matrix { border-collapse: separate; border-spacing: 4px; font-size: 12px; font-family: var(--font-ui); }
.mx-matrix th, .mx-matrix td { padding: 0; vertical-align: middle; text-align: center; }
.mx-corner {
  font-size: 10px; color: var(--ld-text-mute); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 10px; min-width: 140px; text-align: left;
}
.mx-th-col { padding: 8px 4px; vertical-align: bottom; min-width: 88px; }
.mx-th-row { padding: 4px 8px; text-align: left; min-width: 140px; }

.mx-arch-head { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mx-arch-head--vert { align-items: center; }
.mx-arch-inks { display: inline-flex; gap: 3px; }

/* V1.3.0 Wave 2: Matchup-Matrix Ink-Pips als Glow-Dots (Mockup C-Pattern).
   Ersetzt die ink_logo-Img-Render in den Header-Cells durch farbige Punkte
   mit subtle Outer-Glow. Klassen werden via .mx-ink-pip + .mx-ink-pip--{ink} gesetzt. */
.mx-ink-pip {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink-color, var(--ld-surface-3));
  box-shadow: 0 0 6px var(--ink-color, transparent);
  display: inline-block;
}
.mx-ink-pip--amber    { --ink-color: var(--ink-amber); }
.mx-ink-pip--amethyst { --ink-color: var(--ink-amethyst); }
.mx-ink-pip--emerald  { --ink-color: var(--ink-emerald); }
.mx-ink-pip--ruby     { --ink-color: var(--ink-ruby); }
.mx-ink-pip--sapphire { --ink-color: var(--ink-sapphire); }
.mx-ink-pip--steel    { --ink-color: var(--ink-steel); }
.mx-arch-name {
  font-size: 11px; font-weight: 500; color: var(--ld-text);
  line-height: 1.1; max-width: 88px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-th-col .mx-arch-name { font-size: 10px; }

.mx-cell-wrap { min-width: 88px; }
.mx-cell {
  font-family: var(--font-mono);
  border-radius: var(--r-md);
  padding: 8px 4px;
  min-width: 80px; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .12s;
}
.mx-cell:hover { transform: scale(1.04); }
.mx-wr { font-size: 16px; font-weight: 600; line-height: 1; }
.mx-n {
  font-size: 11px;
  font-weight: 500;
  color: var(--ld-text-mute);
  margin-top: 4px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.mx-empty { background: var(--ld-surface-2); color: var(--ld-text-faint); font-size: 14px; }
.mx-mirror { background: transparent; color: var(--ld-text-faint); font-size: 14px; opacity: 0.4; }
/* Befüllte Spiegel-Zelle (Diagonale mit echten Spielen, Fix 2026-08-18):
   bewusst neutral statt in den WR-Farben — sie ist ein Sonderfall und soll
   nicht wie ein normales Matchup gelesen werden, muss aber ihre Spielzahl
   lesbar tragen (die leere .mx-mirror bleibt bei opacity 0.4). */
.mx-mirror-live { background: var(--ld-surface-2); color: var(--ld-text-mute); }

/* Low-Sample-Marker: Cells mit n<MIN_SAMPLE werden visuell abgesetzt
   (kursiv + reduzierte Opacity), damit sie nicht mit signifikanten WRs
   verwechselt werden. Tooltip via title-Attribut im Template. */
.mx-cell--low-n { font-style: italic; opacity: 0.55; }
.mx-low-n-mark {
  font-size: 9px; vertical-align: super; margin-left: 2px;
  color: var(--ld-text-faint); font-weight: 400;
}

/* WR-Buckets — Schwellwerte 38/42/58/62 (rot, rot-soft, gelb, grün-soft, grün) */
.mx-red       { background: rgba(240, 104, 112, 0.25); color: var(--ld-neg); }
.mx-red-soft  { background: rgba(232, 140,  90, 0.20); color: rgba(240, 140, 110, 1.0); }
.mx-yellow    { background: rgba(232, 179,  57, 0.18); color: var(--ld-mid); }
.mx-green-soft{ background: rgba(140, 200, 110, 0.20); color: rgba(110, 220, 130, 1.0); }
.mx-green     { background: rgba( 62, 207, 142, 0.25); color: var(--ld-pos); }

.mx-cell-legend {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 11px;
  margin-right: 6px;
}

/* Matrix am Telefon (Stilguide-Norm, Felix-Entscheide 2026-08-16, S11c):
   Unter dem Umschaltpunkt ersetzt die Schnitt-Ansicht (eine Achse wählen,
   die andere als Liste) die N×N-Tabelle — Zeile-als-Karte würde dort N×N
   Karten erzeugen. Die Zwischenstufen mx-red-soft/mx-green-soft entfallen
   mobil samt Legenden-Note; das Slice-Markup trägt von vornherein nur die
   drei Grundstufen. Desktop bleibt unverändert (Slice ist dort aus). */
.mx-slice { display: none; }
.mx-slice-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.mx-slice-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--ld-surface-2); border: 1px solid var(--ld-border);
  border-radius: var(--r-md);
  color: inherit; text-decoration: none;
}
.mx-slice-row--total { font-weight: 600; border-color: var(--ld-border-strong); }
.mx-slice-name { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.mx-slice-chip {
  padding: 2px 8px; border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  font-feature-settings: "tnum", "zero"; /* wie .t-mono — Prozentwerte stehen tabellarisch */
}
.mx-slice-n { font-size: 11px; color: var(--ld-text-mute); }
@media (max-width: 575.98px) {
  .mx-card-wrap { display: none; }
  .mx-slice { display: block; }
  .mx-legend-note { display: none; }
}

.ink-btn-A { --ink-color: var(--ink-amber);    --ink-img: url("/static/img/inks/amber.png"); }
.ink-btn-M { --ink-color: var(--ink-amethyst); --ink-img: url("/static/img/inks/amethyst.png"); }
.ink-btn-E { --ink-color: var(--ink-emerald);  --ink-img: url("/static/img/inks/emerald.png"); }
.ink-btn-R { --ink-color: var(--ink-ruby);     --ink-img: url("/static/img/inks/ruby.png"); }
.ink-btn-S { --ink-color: var(--ink-sapphire); --ink-img: url("/static/img/inks/sapphire.png"); }
.ink-btn-T { --ink-color: var(--ink-steel);    --ink-img: url("/static/img/inks/steel.png"); }

/* Form-Variante (Text + kleines Logo, für Archetype-Edit).
   Item 1 v2 (2026-05-15): Default voll farbig, Mute via Wrapper-Class. */
.ink-btn-form {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  background: var(--ld-surface-2);
  border: 1px solid var(--ld-border-strong);
  color: var(--ld-text-dim);
  font-size: 13px;
  padding: 6px 12px;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.ink-btn-form:hover { background: var(--ld-surface-3); color: var(--ld-text); }
/* Tinten-Feinschliff (2026-06-23): die Tinten-FARBE wird die Auswahl —
   dezenter Ink-Tint + Ink-Border, KEIN Glow (Hausstil: clean vor flashy).
   Der Ink-Ring kommt aus der box-shadow-Regel weiter unten (kein Reflow). */
.btn-check:checked + .ink-btn-form {
  background: var(--ld-surface-3);
  background: color-mix(in srgb, var(--ink-color, var(--ld-accent)) 16%, transparent);
  border-color: var(--ink-color, var(--ld-accent));
  color: var(--ld-text);
}

/* ============================================================
   Ink-Picker Verhalten (V1.3.0 Final, 2026-05-15)

   Saturated-Ausgrau-Pattern aus Item-1-v2 wurde entfernt — Felix-Feedback
   2026-05-15: alle Picker sollen identisch aussehen wie der Archetype-
   Picker oben, der KEIN Ausgrauen hat. Differenzierung läuft komplett
   über Ink-Color als BG (Default) + weißer Border + Outer-Glow (checked).

   Neon-Glow für die alte .ink-btn-Variante (Letter-Style, falls noch
   irgendwo genutzt): bleibt mit Inset-Bg-Ring für visuelle Tiefe.
   ============================================================ */
.btn-check:checked + .ink-btn {
  box-shadow:
    0 0 0 2px var(--ld-bg),
    0 0 12px 2px var(--ink-color, rgba(255,255,255,0.6));
}
/* Archetype-Form-Swatch: dezenter Ink-Ring statt Glow (Tinten-Feinschliff 2026-06-23). */
.btn-check:checked + .ink-btn-form {
  box-shadow: inset 0 0 0 1px var(--ink-color, var(--ld-accent));
}
.btn-check:focus-visible + .ink-btn-form { outline: none; box-shadow: 0 0 0 3px var(--ld-accent-ring); }
.ink-btn-form .ink-check { display: none; margin-left: 2px; color: var(--ink-color, var(--ld-accent)); }
.btn-check:checked + .ink-btn-form .ink-check { display: inline-flex; align-items: center; }
@media (max-width: 575.98px) { .ink-btn-form { min-height: 44px; } }

/* ============================================================
   Archetype Tinten-Feinschliff (2026-06-23, Iris-Spec)
   Tinte als Inhalts-/Orientierungsfarbe: Farb-Kante an Kacheln & Zeilen,
   Marken-Toggles in der Filter-Bar. Clean vor flashy: ein Akzent, flach.
   ============================================================ */
/* Kachel: linke Farb-Kante nach Tinte (2 Segmente = 2 Inks; neutral ohne).
   Liegt im overflow:hidden der .ld-card, folgt also der Eck-Rundung. */
.arch-ink-edge {
  position: absolute; top: 0; left: 0; bottom: 0; width: 5px;
  display: flex; flex-direction: column; z-index: 1; pointer-events: none;
}
.arch-ink-edge > span { flex: 1 1 0; display: block; }

/* Listen-Zeile: schlanke Farb-Kante in der Haupttinte; Hover bleibt Gold (ADR 0026). */
.ld-table tbody tr.arch-row { box-shadow: inset 3px 0 0 var(--row-ink, var(--ld-border)); }
.ld-table tbody tr.arch-row:hover { box-shadow: inset 3px 0 0 var(--ld-accent); }

/* Featured-Badge — seit der Kartenbild-Kachel-Norm (S11c, 2026-08-19) Rang
   „Ausgezeichnet": Ecke oben LINKS, --ld-accent-soft-Fläche + --ld-accent-Text
   (vorher Accent-Vollfläche oben rechts). Die Surface-Unterlage hält den
   12%-Alpha-Ton auf Kartenmotiven lesbar, ohne den Rang zu ändern. */
.featured-badge {
  position: absolute; top: var(--sp-1); left: var(--sp-1);
  background: linear-gradient(var(--ld-accent-soft), var(--ld-accent-soft)) var(--ld-surface-1);
  color: var(--ld-accent);
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
}

/* ============================================================
   Kartenbild-Kachel (Stilguide-Norm 2026-08-19, S11c)

   Echte Lorcana-Kartenbilder als Kachel-Raster (Cardpool: Vorschau,
   Core-Karten, Eingangskorb — und jedes künftige Kartenbild-Raster).
   Raster statt fester Kachelbreite: Kacheln füllen die Zeile gleichmäßig,
   unter 575.98px drei gleich breite Spalten auf 375px ohne Überlauf.
   Geometrie kommt IMMER aus aspect-ratio 5/7, nie aus fester Höhe.
   ============================================================ */
.ld-cardgrid {
  --card-tile-min: 96px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-tile-min), 1fr));
  gap: var(--sp-2);
}
@media (max-width: 575.98px) { .ld-cardgrid { --card-tile-min: 84px; } }

.ld-card-tile { position: relative; min-width: 0; text-align: center; }
.ld-card-tile img {
  display: block; width: 100%;
  aspect-ratio: 5 / 7; object-fit: cover;
  border-radius: var(--r-sm);
}
.ld-card-tile-noimg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 5 / 7;
  background: var(--ld-surface-3); border-radius: var(--r-sm);
  color: var(--ld-text-mute); font-size: 11px;
}
/* Bild vergrößert (Norm 3.4): der Vergrößerer ist ein Button ohne
   Navigations-Semantik — ein toter href="#" ist auf Touch eine Falle. */
.ld-card-zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: var(--r-sm);
}
/* Bildunterschrift navigiert — nur wo ein Ziel existiert (dann Anker). */
.ld-card-tile-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px; font-size: 11px; line-height: 1.2;
  color: var(--ld-text-dim); text-align: center;
}
a.ld-card-tile-name { color: var(--ld-accent); text-decoration: none; }
a.ld-card-tile-name:hover { text-decoration: underline; }
/* Gesehen-Zähler: Rang „Ruhig", Ecke oben rechts (Overlay --sp-1 vom Rand). */
.ld-card-tile-count { position: absolute; top: var(--sp-1); right: var(--sp-1); }
/* Kandidaten-Knöpfe: Desktop nebeneinander, unter 575.98px gestapelt —
   zwei Text-Knöpfe nebeneinander auf 84–103px sind unlesbar. */
.ld-card-tile-actions { display: flex; gap: 4px; margin-top: 4px; }
.ld-card-tile-actions .ld-btn { flex: 1 1 0; }
@media (max-width: 575.98px) {
  .ld-card-tile-actions { flex-direction: column; }
}

/* Touch-Vorschau des Vergrößerers (base.html-JS): mittige, schließbare
   Ebene über allem außer Modals (card-hover-tip 1080 < 1090 < Modal 2050). */
.card-zoom-preview {
  position: fixed; inset: 0; z-index: 1090;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 12, 0.72); cursor: zoom-out;
}
.card-zoom-preview img {
  max-width: min(85vw, 340px); max-height: 85vh;
  border-radius: var(--r-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
/* Schließen = Haus-Baustein btn-close (wie in allen Modals); hier nur Position. */
.card-zoom-preview .card-zoom-close { position: absolute; top: 12px; right: 16px; }

/* Empty-State-Innenabstand (war Inline-Style in list.html). */
.ld-empty { text-align: center; padding: 48px 24px; }

/* Tabellen-Scrollbox: verhindert horizontales Seiten-Scrollen auf schmalen Screens.

   SICHTBARE KANTE (Komponenten-Norm „Tabelle", 2026-08-10): „Passt nicht" ist
   kein zulässiger Zustand — und Schieben ohne sichtbare Kante auch nicht. Ohne
   Andeutung liest man eine abgeschnittene Tabelle als Darstellungsfehler statt
   als Einladung zu wischen (genau der Effekt aus Befund F29 eine Ebene höher).

   Mechanik ohne JS und ohne Scroll-Listener: Die beiden „Deckel" scrollen mit
   dem Inhalt mit (background-attachment: local) und decken die Kante ab, sobald
   man am jeweiligen Ende angekommen ist; die beiden Kanten-Verläufe bleiben am
   Kasten stehen (scroll). Ergebnis: rechts steht eine Kante, solange rechts
   noch etwas liegt — und nur dann.

   Nur die RECHTE Kante: Inhalt läuft in dieser Anwendung immer nach rechts aus
   dem Bild, und wer schon nach rechts geschoben hat, weiss, dass es zurückgeht.
   Eine zweite Kante links wäre doppelte Mechanik für die halbe Aussage.

   `--_edge-clear` ist derselbe Farbwert mit Deckkraft 0. Nicht `transparent`
   schreiben: das interpoliert in manchen Engines über transparentes SCHWARZ
   und erzeugt einen grauen Schleier mitten im Verlauf. */
.ld-table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  --_edge-clear: color-mix(in srgb, var(--ld-surface-1), transparent 100%);
  background:
    linear-gradient(to left, var(--ld-surface-1),      var(--_edge-clear)) 100% 0 / 24px 100% no-repeat local,
    linear-gradient(to left, var(--ld-border-strong),  var(--_edge-clear)) 100% 0 / 14px 100% no-repeat scroll;
}

/* ============================================================
   OP-Kalender (Tool /kalender)

   Theme-konforme Event-Liste, Monatsgitter und Detail. Nutzt
   durchgehend die --ld-Text-/Surface-Variablen statt der
   Bootstrap-Light-Utilities (text-muted/bg-light/text-body),
   die auf dem dunklen --ld-bg unlesbar gerendert hätten.
   ============================================================ */

.ld-cal-head { display:flex; justify-content:space-between; align-items:center;
  gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.ld-cal-head h2 { margin:0; }

/* Set-/Release-Banner (Lorcast, ADR 0066) */
.ld-cal-setbar {
  display:flex; gap:var(--sp-4); flex-wrap:wrap; align-items:center;
  background:var(--ld-surface-1); border:1px solid var(--ld-border);
  border-radius:var(--r-lg); padding:var(--sp-2) var(--sp-4);
  margin-bottom:var(--sp-4); font-size:13px; color:var(--ld-text-mute);
}
.ld-cal-setbar strong { color:var(--ld-text); }

/* Banner (leichte Hinweise, KEINE Events) — Listenansicht.
   Klar von .ld-cal-event unterschieden: gedämpft, kein Link, gestrichelter Rand. */
.ld-cal-banner {
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  border:1px dashed var(--ld-border); border-left:3px solid var(--ld-border-strong);
  border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3);
  margin-bottom:var(--sp-2); background:var(--ld-surface-1);
  font-size:13px; color:var(--ld-text-mute);
}
.ld-cal-banner__label { font-weight:600; color:var(--ld-text-dim); }
.ld-cal-banner__meta { color:var(--ld-text-mute); font-size:12px; }
.ld-cal-banner__admin { margin-left:auto; display:inline-flex; gap:var(--sp-3); font-size:12px; }
.ld-cal-banner__admin a { color:var(--ld-text-dim); text-decoration:none; }
.ld-cal-banner__admin a:hover { color:var(--ld-accent); }
.ld-cal-banner__del {
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--ld-text-dim); font-size:12px; font-family:inherit;
}
.ld-cal-banner__del:hover { color:#f3999d; }
.ld-cal-banner--release { border-left-color:#6fe0ad; }
.ld-cal-banner--release .ld-cal-banner__label { color:#6fe0ad; }
.ld-cal-banner--span { border-left-color:#edc56a; }
.ld-cal-banner--span .ld-cal-banner__label { color:#edc56a; }

/* Monats-Trenner in der Liste */
.ld-cal-month {
  font-size:12px; font-weight:600; letter-spacing:0.10em; text-transform:uppercase;
  color:var(--ld-accent); margin:var(--sp-5) 0 var(--sp-2);
}
.ld-cal-month:first-of-type { margin-top:0; }

/* Event-Zeile */
.ld-cal-event {
  display:flex; align-items:center; gap:var(--sp-4);
  background:var(--ld-surface-1); border:1px solid var(--ld-border);
  border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-2); text-decoration:none; color:var(--ld-text);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ld-cal-event:hover {
  border-color:var(--ld-accent); transform:translateY(-1px);
  box-shadow:var(--shadow-hover); color:var(--ld-text);
}
.ld-cal-date {
  flex:0 0 auto; min-width:56px; text-align:center;
  background:var(--ld-accent-soft); color:var(--ld-accent);
  border-radius:var(--r-md); padding:var(--sp-2) var(--sp-1); line-height:1.05;
}
.ld-cal-date .d { font-family:var(--font-mono); font-size:20px; font-weight:600; display:block; }
.ld-cal-date .m { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; }
.ld-cal-body { flex:1 1 auto; min-width:0; }
.ld-cal-title { color:var(--ld-text); font-weight:600; }
.ld-cal-meta { color:var(--ld-text-dim); font-size:13px; margin-top:2px; }
.ld-cal-meta .sep { color:var(--ld-text-faint); margin:0 6px; }

/* Event-Typ-Etiketten — Rangstufen statt Themenfarben (Stilguide „Etikett",
   Felix-Entscheid 2026-08-11). Die Basis-Klasse IST die Stufe „Ruhig" (der
   Normalfall, kein Modifier nötig); dazu „Ausgezeichnet" (--featured),
   „Hervorgehoben" (--highlight) und der Beiwerk-Umriss (--attr) für
   Sachangaben wie Format/Region. Nur der Entwurfs-Marker bleibt rot —
   bewusste Felix-Entscheidung: er soll auffallen. */
.ld-cal-tag {
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:0.03em;
  padding:2px 9px; border-radius:999px; white-space:nowrap;
  background:var(--ld-surface-4); color:var(--ld-text-dim); vertical-align:middle;
}
.ld-cal-tag--featured  { background:var(--ld-accent-soft); color:var(--ld-accent); }
.ld-cal-tag--highlight { background:transparent; color:var(--ld-accent);
  border:1px solid var(--ld-accent-outline); }
.ld-cal-tag--attr      { background:transparent; color:var(--ld-text-dim);
  border:1px solid var(--ld-border-strong); }
.ld-cal-tag--draft     { background:rgba(240,104,112,0.14); color:#f3999d; }

/* Monatsgitter */
.ld-cal-gridnav { display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--sp-3); }
.ld-cal-gridnav .lbl { font-size:18px; font-weight:600; color:var(--ld-text); }
.ld-cal-grid { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0;
  margin-bottom:0; }
.ld-cal-grid th {
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ld-text-mute); font-weight:600; padding:var(--sp-2) 0; text-align:center;
}
.ld-cal-grid td {
  border:1px solid var(--ld-border); height:94px; vertical-align:top;
  padding:6px; background:var(--ld-surface-1);
}
.ld-cal-grid td.empty { background:transparent; border-color:transparent; }
.ld-cal-daynum { font-size:12px; color:var(--ld-text-dim); }
.ld-cal-grid td.today { border-color:var(--ld-accent); background:var(--ld-accent-soft); }
.ld-cal-grid td.today .ld-cal-daynum { color:var(--ld-accent); font-weight:700; }
.ld-cal-chip {
  display:block; font-size:12px; color:var(--ld-accent);
  text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  margin-top:3px;
}
.ld-cal-chip:hover { color:var(--ld-accent-hover); text-decoration:underline; }
/* Grid-Banner: Ein-Tag-Release + Saison-Zeitspanne (dünner Balken je Tag) */
.ld-cal-daybanner {
  font-size:11px; margin-top:3px; padding:1px 5px; border-radius:var(--r-sm);
  background:rgba(62,207,142,0.14); color:#6fe0ad;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ld-cal-spanbar {
  height:14px; margin:3px -6px 0; padding:0 6px; font-size:10px; line-height:14px;
  background:rgba(232,179,57,0.16); color:#edc56a; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ld-cal-spanbar.is-start { border-top-left-radius:var(--r-sm); border-bottom-left-radius:var(--r-sm); margin-left:0; padding-left:5px; }
.ld-cal-spanbar.is-end { border-top-right-radius:var(--r-sm); border-bottom-right-radius:var(--r-sm); margin-right:0; padding-right:5px; }

/* Detail */
.ld-cal-back { font-size:13px; color:var(--ld-text-dim); text-decoration:none; }
.ld-cal-back:hover { color:var(--ld-accent); }
.ld-cal-dl { display:grid; grid-template-columns:130px 1fr; gap:var(--sp-2) var(--sp-4);
  margin:var(--sp-4) 0; }
.ld-cal-dl dt { color:var(--ld-text-dim); font-weight:500; }
.ld-cal-dl dd { color:var(--ld-text); margin:0; }
.ld-cal-dl a { color:var(--ld-accent); }
.ld-cal-dl a:hover { color:var(--ld-accent-hover); }
.ld-cal-sub { color:var(--ld-text-mute); font-size:12px; }

/* Detail — Team-Koordination */
.ld-cal-coord h6 { color:var(--ld-accent); font-size:13px; text-transform:uppercase;
  letter-spacing:0.06em; margin-bottom:var(--sp-3); }
.ld-cal-coord .item { font-size:13px; color:var(--ld-text-dim);
  padding-bottom:var(--sp-2); margin-bottom:var(--sp-2); border-bottom:1px solid var(--ld-border); }
.ld-cal-coord .item:last-of-type { border-bottom:0; }
.ld-cal-coord .item strong { color:var(--ld-text); font-weight:600; }
.ld-cal-coord .muted { color:var(--ld-text-mute); }
.ld-cal-free { color:var(--ld-pos); }
.ld-cal-full { color:var(--ld-text-mute); }
.ld-cal-attendees { color:var(--ld-text-dim); font-size:13px; }
.ld-cal-empty { color:var(--ld-text-mute); }

/* ============================================================
   Scouting (Opponent-Tracker /scouting)
   ============================================================ */
.scout-round-tab {
  font-size: 12px;
  color: var(--ld-text-mute);
  padding: 4px 11px;
  border-radius: 7px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .12s, color .12s;
}
.scout-round-tab:hover { background: var(--ld-surface-2); color: var(--ld-text); }
.scout-round-tab.is-active {
  background: var(--ld-accent);
  color: #1a1410;
  font-weight: 500;
}

.scout-pair {
  background: var(--ld-surface-1);
  border: 1px solid var(--ld-border);
  border-radius: 12px;
  padding: 11px 13px;
}
.scout-pair-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ld-text-mute);
  margin-bottom: 9px;
}
.scout-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.scout-player + .scout-player { margin-top: 7px; }
.scout-player-name { font-size: 14px; }
.scout-player--bye .scout-player-name { color: var(--ld-text-mute); font-style: italic; }
/* Watchlist (ADR 0065): Stern-Toggle + Hervorhebung verfolgter Spieler. */
.scout-watch-btn {
  flex: 0 0 auto;
  order: -1;               /* Stern immer ganz links in der Zeile */
  background: none;
  border: none;
  padding: 0 2px;
  margin-right: 2px;
  cursor: pointer;
  color: var(--ld-text-mute);
  font-size: 13px;
  line-height: 1;
}
.scout-watch-btn:hover { color: var(--ld-mid); }
.scout-watch-btn.is-on { color: var(--ld-mid); }
.scout-player--watched .scout-player-name { font-weight: 600; }
.scout-player--watched {
  border-left: 2px solid var(--ld-mid);
  padding-left: 6px;
  margin-left: -8px;
  border-radius: 2px;
}

/* Gegner-Gedaechtnis (ADR 0065, Feature 6): History-Button + Historien-Liste. */
.scout-history-btn {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--ld-accent);
  font-size: 13px;
  line-height: 1;
}
.scout-history-btn:hover { color: var(--ld-text); }
.scout-history-list { display: flex; flex-direction: column; gap: 8px; }
.scout-hist-item { border-left: 2px solid var(--ld-border); padding-left: 10px; }
.scout-hist-head { font-size: 14px; font-weight: 600; }
.scout-hist-conf { font-size: 11px; font-weight: 400; color: var(--ld-text-mute); }
.scout-hist-meta { font-size: 11px; color: var(--ld-text-mute); margin-top: 1px; }
.scout-hist-note { font-size: 12px; margin-top: 3px; white-space: pre-wrap; }

/* Match-Ergebnis (ADR 0065, Feature 1): Score-Badge + Sieger-Markierung. */
.scout-result-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--ld-surface-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ld-text);
  vertical-align: middle;
}
.scout-winner-icon { color: var(--ld-mid); font-size: 11px; }
.scout-player--winner .scout-player-name { color: var(--ld-text); }

/* Matchup-Plan-Verzahnung (ADR 0065): Plan-Button + read-only Plan-Modal. */
.scout-plan-btn {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--ld-text-mute);
  font-size: 13px;
  line-height: 1;
}
.scout-plan-btn:hover { color: var(--ld-accent); }
.scout-plan-wr {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--ld-surface-2);
  border-radius: 6px;
}
.scout-plan-wr-cell { display: flex; flex-direction: column; gap: 1px; }
.scout-plan-wr-label { font-size: 10px; text-transform: uppercase; color: var(--ld-text-mute); letter-spacing: .04em; }
.scout-plan-wr-val { font-size: 15px; font-weight: 600; }
.scout-plan-wr-fmt { margin-left: auto; display: flex; gap: 4px; }
.scout-plan-fmt-btn {
  background: none;
  border: 1px solid var(--ld-border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--ld-text-mute);
  cursor: pointer;
}
.scout-plan-fmt-btn.is-active { color: var(--ld-text); border-color: var(--ld-accent); }
.scout-plan-list { display: flex; flex-direction: column; gap: 10px; }
.scout-plan-item { border-left: 2px solid var(--ld-border); padding-left: 10px; }
.scout-plan-item-head { font-size: 12px; font-weight: 600; color: var(--ld-text-mute); margin-bottom: 2px; }
.scout-plan-item-notes { font-size: 13px; white-space: pre-wrap; }

/* Bearbeitungs-Spur (ADR 0065): dezenter Hinweis, wer das Deck zuletzt setzte. */
.scout-edit-trail {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  font-size: 11px;
  color: var(--ld-text-mute);
  white-space: nowrap;
}
.scout-edit-trail .bi { font-size: 9px; opacity: 0.8; }

.scout-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  max-width: 62%;
  transition: filter .12s, border-color .12s, color .12s;
}
.scout-chip:hover { filter: brightness(1.12); }
.scout-chip-deck { overflow: hidden; text-overflow: ellipsis; }
/* Farben-first (2026-07-05): neutraler „gesetzt"-Zustand — die Tinten-Icons
   tragen die Farbe, der Chip nur eine dezente Fläche als Klick-Ziel. */
.scout-chip--set { color: var(--ld-text); background: var(--ld-surface-2); }
.scout-chip--empty {
  color: var(--ld-text-mute);
  background: transparent;
  border: 1px dashed var(--ld-border-strong);
}
.scout-chip--empty:hover { color: var(--ld-text); border-color: var(--ld-accent); filter: none; }

.scout-label { display: block; font-size: 12px; color: var(--ld-text-dim); margin-bottom: 5px; }

/* Symbole (Notiz-Icon) konsistent hinter dem Deck-Namen */
.scout-chip-icon { margin-left: 5px; flex-shrink: 0; }
.scout-chip--ro { cursor: default; }
.scout-chip--ro:hover { filter: none; }
.scout-deck-none { color: var(--ld-text-faint); }

/* Suche */
.scout-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ld-surface-1);
  border: 1px solid var(--ld-border);
  border-radius: 9px;
  padding: 0 12px;
  margin-bottom: 14px;
}
.scout-search .bi-search { color: var(--ld-text-mute); font-size: 14px; }
.scout-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ld-text);
  font-size: 14px;
  height: 40px;
}
.scout-search input::placeholder { color: var(--ld-text-faint); }
.scout-search-count { font-size: 12px; color: var(--ld-text-mute); font-variant-numeric: tabular-nums; }

.scout-empty {
  padding: 18px;
  text-align: center;
  color: var(--ld-text-mute);
  font-size: 13px;
}

/* Spielerliste (players) — flache, getrennte Zeilen */
.scout-players .scout-player {
  padding: 11px 16px;
  border-bottom: 1px solid var(--ld-border);
  margin-top: 0;
}
.scout-players .scout-player:last-child { border-bottom: 0; }

/* Eigenes Pairing (DEIN MATCH) — oben angepinnt + gold umrandet */
.scout-pair--mine { border-color: var(--ld-accent); }
.scout-mine-badge {
  display: inline-block;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.04em;
  color: #1a1410; background: var(--ld-accent);
  padding: 2px 7px; border-radius: 5px; margin-left: 6px; vertical-align: 1px;
}

/* Live-Indikator (Polling) */
.scout-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ld-pos); }
.scout-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ld-pos); }

/* Archetyp-Detail: Die Sektions-Tabs-Sonderform (.arch-tabs/.arch-tab, B6,
   max-2026-0003) ist mit S11b (ADR 0222) RESTLOS entfernt — die Detailseite
   nutzt seither den gemeinsamen Reiter-Baustein `_tabs.html` (.nav-tabs). */

/* === Deckbuilder-Politur (max-2026-0003) === */
/* Label-Preset-Swatches statt nativem Farbwähler (Item 5). */
.db-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--ld-border) inset;
}
.db-swatch.is-selected { border-color: var(--ld-text); }
.db-swatch:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 2px; }
/* (E2/ADR 0089) .db-tool-menu (Export-Aufklapper) + .db-block-label (Deck-Panel-
   Blöcke) sind mit dem Shell-Umbau aus dem Template entfallen — verwaiste Regeln
   hier mit entfernt. Die Filter leben jetzt in der horizontalen Filterleiste oben
   (.db-filterbar, flex-wrap) statt in einer linken Spalte — das frühere mobile
   2-Spalten-Raster für #db-filters ist entfallen. Siehe „=== Builder-Shell (E2) ===". */

/* === Hilfe/Glossar-Seite (max-2026-0003): Begriffs-Liste === */
.ld-glossary { margin: 0; }
.ld-glossary dt { font-weight: 600; color: var(--ld-text); }
.ld-glossary dd { margin: 2px 0 14px; color: var(--ld-text-dim); font-size: 14px; }
.ld-glossary dd:last-child { margin-bottom: 0; }

/* Die First-Run-Tour-Styles (.tour-*) sind mit S5 entfallen (ADR 0206, F8). */

/* ============================================================
   === Builder-Shell (E2, ADR 0089) ===
   Geteilte Deckbuilder-Shell: Filterleiste OBEN, Galerie LINKS (Hauptfläche),
   Deck-Spalte RECHTS mit ziehbarem Splitter + einklappbar. Mobile-First: die
   Deck-Spalte ist als Bottom-Sheet aufgebaut; ab Desktop (inkl. Tablet quer)
   wird daraus die rechte Spalte. Flach, Diary-Palette, kein Glow (ADR 0032).
   Marken-Feinschliff E6 (iris, 2026-06-27): zentrale Marken-Fokusringe (s. u.),
   Overlay-Schatten-Token (--shadow-overlay), Kontrast-Härtung (WCAG AA).
   ============================================================ */

#deckbuilder-app { --db-deck-w: 340px; }

/* --- A11y: Marken-Fokusringe (E6, iris 2026-06-27; WCAG 2.4.7) ---
   Die Shell-Custom-Buttons/-Kacheln tragen keine .btn-Klasse → der globale
   .btn:focus-visible-Ring greift nicht. Tastatur-Fokus hier sichtbar machen,
   gleiches Ring-Token wie .ld-btn (keine zweite Farbwelt); Maus-Klick bleibt
   ringfrei (nur :focus-visible).
   Reichweite: Die nativen Elemente (button / a — .db-actions-tab, .db-deck-*,
   .db-sheet-handle, .ld-list-title, .db-save-login-login) sind
   tastatur-fokussierbar, der Ring greift sofort. Die JS-gerenderten .db-card
   (div role="button") brauchen für echten Tastatur-Fokus noch tabindex +
   Key-Handler im JS — vorbestehender A11y-Gap; der Ring ist hier bereits
   vorwärtskompatibel hinterlegt, schadet bis dahin nicht. */
.db-actions-tab:focus-visible,
.db-deck-collapse:focus-visible,
.db-tag-btn:focus-visible,
.db-deck-expand:focus-visible,
.db-save-login-login:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ld-accent-ring);
}
/* Klickbare Kacheln/Karten/Sheet-Griff: solider Outline-Ring mit Abstand
   (vermeidet Konflikt mit eigenem Schlagschatten). */
.db-card:focus-visible,
.ld-list-title:focus-visible,
.db-sheet-handle:focus-visible {
  outline: 2px solid var(--ld-accent);
  outline-offset: 2px;
}

/* --- Filterleiste oben: horizontale, umbrechende Werkzeugzeile --- */
.db-filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px; border: 1px solid var(--ld-border); border-radius: var(--r-md);
  background: var(--ld-surface-1);
}
.db-filterbar .form-select, .db-filterbar .form-control { width: auto; }
.db-filter-search { flex: 1 1 12rem; min-width: 9rem; max-width: 22rem; }
.db-filter-cost { width: 5.5rem; }

/* --- ⋯-Aktions-Dropdown: eine Stelle für Speichern/Import/Export/Labels/Infos --- */
.db-actions { position: relative; }
.db-actions-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 200;
  width: min(22rem, calc(100vw - 24px));
  background: var(--ld-surface-1); border: 1px solid var(--ld-border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-overlay);
  padding: 10px;
}
.db-actions-menu[hidden] { display: none; }
/* Sehr schmale Handys: das rechtsbündig verankerte Menü ragte links aus dem
   Viewport — unter 576px positioniert deckbuilder.js (positionActionsMenu) das
   Menü beim Öffnen viewport-fixiert unter dem Auslöser (Fix 2026-07-16). */
.db-actions-tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--ld-border); margin-bottom: 10px; padding-bottom: 6px;
}
.db-actions-tab {
  border: 0; background: transparent; color: var(--ld-text-dim);
  font-size: 12px; padding: 4px 8px; border-radius: var(--r-sm, 6px); cursor: pointer;
}
.db-actions-tab:hover { background: var(--ld-surface-2); color: var(--ld-text); }
.db-actions-tab[aria-selected="true"] {
  color: var(--ld-accent); background: var(--ld-accent-soft);
}
.db-actions-body[hidden] { display: none; }
.db-info { color: var(--ld-text-dim); line-height: 1.5; }
.db-info b { color: var(--ld-text); font-weight: 600; }
.db-info-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.db-info-ok { color: var(--ld-accent); font-weight: 600; }      /* 60/60: vollständig */
.db-info-warn { color: var(--ld-text); font-weight: 600; }      /* ≠60: Delta zeigt die Lücke (neutral, kein Alarm) */
.db-info-sec { margin-top: 10px; }
.db-info-label {
  color: var(--ld-text-mute); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 4px;
}
/* Kosten-Kurve als kleine Balken (0..7+). */
.db-info-curve { display: flex; align-items: flex-end; gap: 4px; height: 68px; }
.db-info-bar {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
}
.db-info-bar-n { font-size: 10px; color: var(--ld-text-dim); line-height: 1; }
.db-info-bar-fill {
  width: 100%; min-height: 2px;
  background: var(--ld-accent-soft); border-top: 2px solid var(--ld-accent);
  border-radius: 2px 2px 0 0;
}
.db-info-bar-x { font-size: 10px; color: var(--ld-text-mute); line-height: 1; }
/* Inkverteilung: Farbpunkt + Tinte + Anzahl. */
/* Kompakt-Zeile Tinten + Tintenfähig im Info-Panel (Felix 2026-07-16, „weniger
   ist mehr"): Ink-Logo bzw. Symbol + Menge, ohne Label/Namen (title/aria-label
   tragen die Erklärung). Trenner-Strich zwischen den beiden Gruppen. */
.db-info-ink { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ld-text); }
.db-info-ink-logo { width: 16px; height: 16px; flex: 0 0 auto; }
.db-info-inkw { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; }
.db-info-inkw-sep { width: 1px; height: 16px; background: var(--ld-border-strong); flex: 0 0 auto; }
.db-info-inkw-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ld-text); }
.db-info-inkw-item .icon-inkable, .db-info-inkw-item svg { width: 17px; height: 17px; color: var(--ld-accent); flex: 0 0 auto; }

/* --- Shell-Body: Mobile-First (gestapelt; Deck als Bottom-Sheet) --- */
.db-shell { display: flex; flex-direction: column; align-items: stretch; }
.db-gallery { min-width: 0; padding: 2px; overflow-x: hidden; }
.db-results { margin-top: 2px; }
/* 8 Karten nebeneinander (Felix 2026-07-30, „Karten & Decks"): Bootstrap liefert
   row-cols nur bis 6 — die 8er-Stufe nach demselben Muster selbst definiert
   (Breakpoint lg = 992px wie bei Bootstraps eigenen row-cols-lg-*-Stufen;
   gewinnt gegen deren gleiche Spezifität, weil tokens.css nach bootstrap.min.css
   lädt — wie alle Overrides in dieser Datei). Darunter greifen die responsiven
   Bootstrap-Stufen 2/3/4. */
@media (min-width: 992px) {
  .row-cols-lg-8 > * { flex: 0 0 auto; width: calc(100% / 8); }
}
.db-splitter { display: none; }

/* === Startpunkt der Karten-Galerie (UX-Sanierung S5, Befund F11) ===
   Leerzustand-Einstieg nach Komponenten-Norm („ld-empty": ein Satz plus der
   Weg, der Inhalt erzeugt): sechs Tinten-Kacheln + Beispielsuchen statt einer
   Suchmaske ohne Vorschlag (Markup: tools/deckbuilder.html, #db-start; die
   Innen-Zentrierung/-Polsterung kommt aus .ld-empty). Die Kachel folgt der
   Ink-Konvention des Bestands: --ink-color per inline-style, Logo aus
   ink_logo() — nur größer und mit Namens-Beschriftung, weil sie Einstieg ist,
   kein Dauer-Filter. Kein Gold (ADR 0207: Tinten-Kacheln sind Auswahl). */
.db-start {
  border: 1px solid var(--ld-border);
  border-radius: var(--r-md);
  background: var(--ld-surface-2);
  margin-bottom: var(--sp-2, 8px);
}
.db-start-inks {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2, 8px);
  margin: 12px 0;
}
.db-start-ink {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--ld-border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ld-text);
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.db-start-ink:hover {
  transform: scale(1.04);
  border-color: var(--ink-color, var(--ld-accent));
  box-shadow: 0 0 10px var(--ink-color, var(--ld-accent-glow));
}
.db-start-ink:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 2px; }
.db-start-ink .ink-logo { border-radius: 50%; }
.db-start-examples {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-1, 4px);
  color: var(--ld-text-mute);
}

/* Galerie-Karte: klickbar (Klick = +1), ruhiges Hover-Feedback. */
.db-card {
  cursor: pointer; border-radius: var(--r-md); padding: 2px;
  border: 1px solid transparent; transition: border-color .12s ease, transform .12s ease;
}
.db-card:hover { border-color: var(--ld-accent-ring); transform: translateY(-1px); }
.db-card:active { transform: translateY(0); }
/* aspect-ratio reserviert die Höhe VOR dem Bildladen — ohne sie ist jede Kachel
   anfangs ~0 hoch und jedes eintreffende Bild schiebt alles darunter nach unten
   („springt immer weiter", Feedback 2026-08-11). Verhältnis aus --card-scan-ratio. */
.db-card img {
  border-radius: var(--r-sm, 6px); display: block;
  width: 100%; aspect-ratio: var(--card-scan-ratio); object-fit: cover;
}
/* 6-Spalten-Dichte (P3): schmalere Galerie-Karten am Desktop → kompakter
   Karten-Name unter dem Bild (bleibt einzeilig via .text-truncate). Die kleinere
   Optik wird durch die Hover-Vergrößerung (P4) kompensiert. */
.db-card .small { font-size: 11px; line-height: 1.3; margin-top: 1px; }

/* Galerie-Mengenleiste (Felix 2026-07-23): [−] qty/max [+] unter der Kachel im
   Deck-Modus — ersetzt den Kartennamen, zeigt die Anzahl ins Deck gewählter
   Exemplare. Kompakt + markenneutral über die Bestands-Tokens (Fallbacks wie bei
   .db-card-tag). Listen-/Karten-Modus behalten den Namen (kein .db-card-qty). */
.db-card-qty {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 3px;
}
.db-card-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; line-height: 1;
  font-size: 15px; font-weight: 600;
  color: var(--ld-text, #e6e6e6);
  background: var(--ld-surface-2, rgba(20, 22, 28, 0.82));
  border: 1px solid var(--ld-border, #333); border-radius: var(--r-sm, 6px);
  cursor: pointer;
  transition: color .1s ease, border-color .1s ease, background .1s ease;
}
.db-card-step:hover { color: var(--ld-accent, #e6c98a); border-color: var(--ld-accent-ring); }
.db-card-step:active { transform: translateY(0.5px); }
.db-card-step:disabled { opacity: .38; cursor: default; }
.db-card-step:disabled:hover { color: var(--ld-text, #e6e6e6); border-color: var(--ld-border, #333); }
.db-card-qty-count {
  min-width: 2.6em; text-align: center;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ld-text-mute);
}
/* Überschreitung der Playset-Grenze (>4): Zähler-Warnfarbe — blockiert nicht, die
   Legalitäts-Ampel im Deck-Panel bleibt die eine Wahrheit über die >4-Regel. */
.db-card-qty.is-over .db-card-qty-count { color: var(--ld-neg); font-weight: 700; }

/* P4: Hover-Vergrößerung — schwebendes, vergrößertes Kartenbild neben der
   gehoverten Galerie-Karte (Position/Größe rechnet das JS, nur Zeigegeräte).
   pointer-events:none, damit es Maus/Klick nie stört; hoher z-index über der
   Shell (Popover 210 / Dropdown 200) und ruhiger Einblend-Übergang. */
.db-hover-preview {
  position: fixed; z-index: 300; pointer-events: none;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-overlay);
  opacity: 0; transform: scale(.98);
  transition: opacity .12s ease, transform .12s ease;
}
.db-hover-preview[hidden] { display: none; }
.db-hover-preview.is-visible { opacity: 1; transform: scale(1); }
.db-hover-preview img { display: block; width: 100%; height: 100%; }

/* === Filter-Overhaul (P1b, iris-Spec 2026-07-05) === Schnellfilter (Tinte/
   Kosten/Typ) + Text-zu-Chip. Nur Bestands-Tokens; Tinte trägt Ink-Farbe, alles
   andere Interaktive den Gold-Akzent. Zwei Ring-Familien: box-shadow-Ring
   (--ld-accent-ring) für Pills/×/Buttons, outline-Ring für Ink-Toggles (der
   Glow würde sonst mit einem box-shadow-Ring kollidieren). */
.db-quickfilter {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2, 8px);
  row-gap: 6px; flex: 1 1 auto;
}
.db-quickfilter-group { display: inline-flex; align-items: center; gap: var(--sp-1, 4px); }
.db-qf-sep { width: 1px; height: 20px; background: var(--ld-border); flex: 0 0 auto; }

/* Ink-Toggle = Bestands-.ink-filter-btn, aber Button (role=switch) statt
   checkbox+label: inaktiv entsättigt/gedämpft, aktiv voll + heller Ring. */
.db-ink-toggle { cursor: pointer; }
.db-ink-toggle:not(.is-active) .ink-logo { filter: grayscale(.9); opacity: .55; }
.db-ink-toggle:not(.is-active) { opacity: .85; }
.db-ink-toggle:hover .ink-logo { opacity: 1; }
.db-ink-toggle.is-active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 14px 2px var(--ink-color, var(--ld-accent));
}
.db-ink-toggle.is-active .ink-logo { filter: none; opacity: 1; }
.db-ink-toggle:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 2px; }

/* Logo-only Ink-Chips (Felix 2026-07-06): KEIN Ink-Color-Farbpunkt hinter dem
   Logo — nur das Ink-Logo selbst. Der Aktiv-Zustand bleibt über den weißen
   Ring/Glow (.is-active oben) erkennbar; inaktiv weiter entsättigt/gedämpft. */
.db-ink-toggle { background-color: transparent !important; border-color: transparent; }
.db-ink-toggle .ink-logo { max-width: 100%; max-height: 100%; }
/* Kompakte Variante für die Archetyp-Ink-Filter in der Segment-Leiste. */
.db-ink-toggle--sm { width: 20px; height: 20px; }
.db-segbar-ink { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; }

/* Speichern prominent in der oberen Leiste (Felix 2026-07-06): Deckname + Button
   direkt neben dem Menü statt versteckt im Menü. */
.db-save-top { display: inline-flex; align-items: center; gap: var(--sp-1, 4px); flex-wrap: wrap; }
.db-save-top-name { width: 9.5rem; max-width: 40vw; }
.db-save-top-msg:empty { display: none; }
.db-save-top-msg { flex: 1 1 100%; margin: 0; }

/* „Menü"-Burger (Felix 2026-07-06): drei Striche, weiße Schrift + weißer Rahmen
   (ersetzt das frühere „⋯ Aktionen"). Transparenter Grund, damit nur Rahmen +
   Schrift tragen. */
.db-actions-btn--burger {
  color: #fff; border: 1px solid #fff; background: transparent;
  display: inline-flex; align-items: center; gap: 6px;
}
.db-actions-btn--burger:hover,
.db-actions-btn--burger[aria-expanded="true"] {
  color: #fff; border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.db-actions-btn--burger > span[aria-hidden="true"] { font-size: 1.05em; line-height: 1; }

/* Export: Statuszeile + Deckprofile-Inline-Vorschau (kein Auto-Download). */
.db-export-msg:empty { display: none; }
.db-export-preview-img {
  max-width: 100%; height: auto; display: block; border-radius: 8px;
  border: 1px solid var(--ld-border);
}

/* Kosten-/Typ-Pills — Gold-Tint im Aktiv-Zustand (keine Tinten-Achse). */
.db-cost-pill, .db-type-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; border-radius: 999px; cursor: pointer;
  background: var(--ld-surface-2); border: 1px solid var(--ld-border-strong);
  color: var(--ld-text-dim); font-size: 13px; font-weight: 500;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.db-cost-pill { min-width: 28px; padding: 0 6px; font-family: var(--font-mono); }
.db-type-pill { padding: 0 12px; }
.db-cost-pill:hover, .db-type-pill:hover { background: var(--ld-surface-3); color: var(--ld-text); }
.db-cost-pill.is-active, .db-type-pill.is-active {
  background: var(--ld-accent-soft); border-color: var(--ld-accent); color: var(--ld-accent);
}
.db-cost-pill:focus-visible, .db-type-pill:focus-visible,
.db-quick-more:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ld-accent-ring); }

/* Inkable-Icon (2026-07-16, Sayman/Felix): Original-Symbol (Sechseck im
   Tintenwirbel) als PNG-Alpha-Maske aus Felix' Vorlage — background:currentColor
   färbt es wie ein SVG (gedimmt/gold je nach Zustand). Gegenstück „uninkable"
   ist ein Inline-SVG-Sechseck (deckbuilder.html / deckbuilder.js renderInfo). */
.icon-inkable {
  display: inline-block; width: 18px; height: 18px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url(../img/inkable-mask.png) center / contain no-repeat;
  mask: url(../img/inkable-mask.png) center / contain no-repeat;
}

/* Inkable/Uninkable-Schnellfilter (Punkt 4): kompakte Icon-Toggles.
   currentColor erbt die Textfarbe; aktiv = Akzent-Ring wie die anderen Pills. */
.db-inkable-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 999px; cursor: pointer;
  background: var(--ld-surface-2); border: 1px solid var(--ld-border-strong);
  color: var(--ld-text-dim);
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.db-inkable-toggle:hover { background: var(--ld-surface-3); color: var(--ld-text); }
.db-inkable-toggle.is-active {
  background: var(--ld-accent-soft); border-color: var(--ld-accent); color: var(--ld-accent);
}
.db-inkable-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ld-accent-ring); }

/* „Set ▾"-Öffner fürs Set-Vorschlagsmenü (kompakt statt 14 Dauer-Buttons). */
.db-quick-more {
  height: 28px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  background: var(--ld-surface-2); border: 1px solid var(--ld-border-strong);
  color: var(--ld-text-dim); font-size: 13px;
}
.db-quick-more:hover { background: var(--ld-surface-3); color: var(--ld-text); }

/* Textfeld + Vorschlags-Popover. */
.db-filter-input-wrap { position: relative; flex: 1 1 12rem; min-width: 9rem; max-width: 26rem; }
.db-filter-input { width: 100% !important; }
.db-suggest {
  position: absolute; left: 0; top: calc(100% + 4px); width: 100%; min-width: 16rem;
  z-index: 210; background: var(--ld-surface-1);
  border: 1px solid var(--ld-border-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-overlay); padding: var(--sp-1, 4px);
  max-height: min(22rem, 60vh); overflow-y: auto;
}
.db-suggest[hidden] { display: none; }
.db-suggest-group {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ld-text-mute); padding: 6px 8px 2px;
}
.db-suggest-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--r-sm); cursor: pointer; font-size: 13px; color: var(--ld-text-dim);
}
.db-suggest-item:hover, .db-suggest-item.is-active {
  background: var(--ld-surface-2); color: var(--ld-text);
}
.db-suggest-item.is-active { box-shadow: inset 2px 0 0 var(--ld-accent); }
.db-suggest-ink { width: 18px; height: 18px; }
.db-suggest-glyph { width: 18px; text-align: center; color: var(--ld-accent); }
.db-suggest-text { flex: 1 1 auto; }
.db-suggest-fulltext { color: var(--ld-text); }

/* Aktive Filter-Chips (Set/Seltenheit/Subtyp/Keyword/Volltext). */
.db-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; flex-basis: 100%; }
.db-chiprow[hidden] { display: none; }
.db-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 2px 4px 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: var(--ld-surface-2); border: 1px solid var(--ld-border-strong);
  color: var(--ld-text-dim);
}
.db-chip--kw { color: var(--ld-text); }
/* Label-Filter-Chip (E3.4): eigene Karten-Labels, leicht abgesetzt vom kw-Chip. */
.db-chip--label { color: var(--ld-text); border-style: dashed; }
.db-chip--search { background: var(--ld-accent-soft); border-color: var(--ld-accent-ring); color: var(--ld-accent); }
.db-chip.is-armed { outline: 2px solid var(--ld-neg); outline-offset: 1px; }
.db-chip-label { line-height: 1; }
.db-chip-remove {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 0; background: transparent; color: var(--ld-text-dim);
  font-size: 12px; line-height: 1; cursor: pointer;
}
.db-chip-remove:hover { background: var(--ld-surface-4); color: var(--ld-text); }
.db-chip-remove:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ld-accent-ring); }

@media (max-width: 575px) {
  .db-filter-input-wrap { flex: 1 1 100%; max-width: none; }
  .db-qf-sep { display: none; }
  /* Etwas mehr Abstand zwischen den runden Toggles fürs Touch-Zielen (der
     Button bleibt 24px rund, app-weit konsistent). */
  #db-qf-ink { gap: 8px; }
}

/* --- Deck-Spalte --- */
.db-deck-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.db-deck-title { font-weight: 600; color: var(--ld-text); }
.db-deck-count { color: var(--ld-text-mute); font-weight: 400; }
.db-deck-collapse {
  border: 1px solid var(--ld-border); background: var(--ld-surface-2);
  color: var(--ld-text-dim); border-radius: var(--r-sm, 6px);
  width: 26px; height: 26px; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.db-deck-collapse:hover { color: var(--ld-accent); border-color: var(--ld-accent-ring); }
.db-deck-zone { min-height: 2rem; }

/* Deck-Zeile (Listen-Ansicht): Stepper + Name + Tag-Icon + Label-Chips. */
.db-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 0 3px 6px; border-bottom: 1px solid var(--ld-border); }
/* Tinten-Färbung der Deck-Zeilen (Feedback 2026-07-13): Farbrand + dezenter
   Verlauf aus --row-ink1/2 (Inline-Style aus deckbuilder.js, gespeist von den
   --ink-*-Tokens oben). Ohne Tinte (Variablen ungesetzt) bleibt die Zeile
   neutral; Dual-Ink läuft von Farbe 1 nach Farbe 2. Funktioniert in hell wie
   dunkel (14 % Farbanteil auf transparentem Grund). */
.db-row {
  border-left: 3px solid var(--row-ink1, transparent);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--row-ink1, transparent) 14%, transparent),
    color-mix(in srgb, var(--row-ink2, transparent) 14%, transparent) 65%,
    transparent);
}
.db-row-name { flex: 1 1 auto; min-width: 0; }
.db-tag-btn {
  border: 1px solid var(--ld-border); background: var(--ld-surface-2);
  color: var(--ld-text-dim); border-radius: var(--r-sm, 6px);
  width: 26px; height: 26px; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.db-tag-btn:hover, .db-tag-btn.is-active { color: var(--ld-accent); border-color: var(--ld-accent-ring); }
.db-row-labels { display: flex; flex-wrap: wrap; gap: 3px; flex-basis: 100%; }

/* Das bespoke Deckbuilder-Label-Popover (.db-tag-pop/.db-tag-opt/.db-tag-dot)
   ist mit ADR 0125 entfernt — es läuft jetzt über das geteilte card-labels-
   Popover (.cl-*, window.CardLabels.openPopover). Der Tag-Button (.db-tag-btn)
   an den Karten-Zeilen/-Kacheln bleibt und öffnet dieses geteilte Popover. */

/* --- Eingeklappt-Reiter (Desktop): vertikale Lasche am rechten Rand --- */
.db-deck-expand {
  position: fixed; right: 0; top: 40%; z-index: 150;
  display: none; align-items: center; gap: 6px;
  writing-mode: vertical-rl;
  background: var(--ld-surface-2); color: var(--ld-text);
  border: 1px solid var(--ld-border-strong); border-right: 0;
  border-radius: var(--r-md) 0 0 var(--r-md); padding: 12px 6px; cursor: pointer;
}
.db-deck-expand:hover { color: var(--ld-accent); }
.db-deck-expand-count {
  writing-mode: horizontal-tb; background: var(--ld-accent); color: var(--ld-bg);
  border-radius: 9px; font-size: 11px; font-weight: 700; padding: 0 6px; min-width: 18px; text-align: center;
}

/* Anonyme Login-CTA-Box (E4, ADR 0093) — sitzt unter der Deck-Liste, macht den
   „ohne Konto kein Speichern"-Hinweis prominent + führt per Registrieren-CTA zur
   Anmeldung. Gold-Akzent-Rahmen auf abgesetztem Surface (Felix-Wahl 2026-06-26). */
.db-save-login {
  margin-top: 14px; padding: 12px;
  background: var(--ld-surface-3);
  border: 1px solid var(--ld-accent);
  border-radius: var(--r-lg, 14px);
}
.db-save-login-text {
  margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: var(--ld-text);
}
.db-save-login-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
}
.db-save-login-register { white-space: nowrap; }
.db-save-login-login {
  font-size: 13px; color: var(--ld-text-dim); text-decoration: underline;
}
.db-save-login-login:hover { color: var(--ld-accent); }

/* --- Bottom-Sheet-Griff (Mobile): sichtbar nur im gestapelten Layout --- */
.db-sheet-handle {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 151;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ld-accent); color: var(--ld-bg); border: 0;
  font-weight: 700; padding: 12px; box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}
.db-sheet-count {
  background: var(--ld-bg); color: var(--ld-accent);
  border-radius: 9px; font-size: 12px; padding: 1px 7px; min-width: 20px; text-align: center;
}

/* In der Mobile-Basis IST die Deck-Spalte das Bottom-Sheet (zugeklappt). */
.db-deck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  max-height: 80vh; overflow-y: auto;
  background: var(--ld-surface-1); border-top: 1px solid var(--ld-border-strong);
  border-radius: var(--r-lg, 14px) var(--r-lg, 14px) 0 0;
  padding: 14px 14px calc(14px + 3.2rem); /* Platz für den Griff unten */
  transform: translateY(100%); transition: transform .22s ease;
}
#deckbuilder-app.db-sheet-open .db-deck { transform: translateY(0); }
#deckbuilder-app.db-sheet-open .db-sheet-handle { background: var(--ld-surface-3); color: var(--ld-text); }

/* ============================================================
   Desktop-Shell — inkl. Tablet QUER (ADR 0089: „Tablet quer = Desktop").
   Greift ab 992px ODER ab 768px im Querformat; Tablet HOCHkant und Phones
   bleiben beim Bottom-Sheet (Basis oben).
   ============================================================ */
@media (min-width: 992px), (min-width: 768px) and (orientation: landscape) {
  .db-shell {
    flex-direction: row;
    height: calc(100vh - 9.5rem); min-height: 26rem;
  }
  .db-gallery { flex: 1 1 auto; overflow-y: auto; }
  .db-splitter {
    display: block; flex: 0 0 12px; align-self: stretch; position: relative;
    cursor: col-resize; touch-action: none;
  }
  .db-splitter::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
    transform: translateX(-50%); background: var(--ld-border); border-radius: 2px;
    transition: background .12s ease;
  }
  .db-splitter:hover::before, .db-splitter:focus-visible::before { background: var(--ld-accent); width: 3px; }
  .db-splitter:focus-visible { outline: none; }

  .db-deck {
    position: static; transform: none; z-index: auto;
    flex: 0 0 var(--db-deck-w); width: var(--db-deck-w);
    max-height: none; overflow-y: auto;
    background: transparent; border-top: 0; border-radius: 0;
    padding: 0 2px 0 6px;
  }
  .db-sheet-handle { display: none; }

  /* Einklappen: Splitter + Deck-Spalte raus, Galerie voll, Reiter sichtbar. */
  #deckbuilder-app.db-collapsed .db-splitter,
  #deckbuilder-app.db-collapsed .db-deck { display: none; }
  #deckbuilder-app.db-collapsed .db-deck-expand { display: flex; }
}

/* === Listen-Übersicht (E3c, ADR 0091) — Karten-Raster aller CardLists === */
.ld-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ld-list-card { transition: border-color .15s ease; }
.ld-list-card:hover { border-color: var(--ld-accent); }
.ld-list-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ld-text);
  text-decoration: none;
}
.ld-list-title:hover { color: var(--ld-accent); }

/* === Objekt-Kachel (Iris-Entwurf B1, Felix-Freigabe 2026-07-31) ===
   Aufsatz auf .ld-list-card: Tinten-Kante links, Bild als Anker, Untertitel
   unter dem Namen, Tinten als Logos statt Klartext. Etwas breiteres Raster als
   das schlichte Listen-Raster — die Kachel trägt eine Bildspalte und einen
   Untertitel.
   Hieß bis ADR 0184 `ld-coco-*` und war für Coconut-Decks gebaut; „Meine
   Sachen" nutzt dieselbe Kachel für Decks, Listen UND Coconut-Decks, deshalb
   der neutrale Name. Ein zweites Kachel-Raster wäre dieselbe Geometrie unter
   einem zweiten Namen — genau die Drift, die der Umbenennung vorausging. */
/* min(370px, 100%) statt 370px: eine feste Mindestbreite ist auf schmalen
   Viewports breiter als die Spalte selbst und erzwingt horizontales Scrollen
   (@375 fielen Öffnen/Löschen aus der Kachel). */
.ld-tile-grid { grid-template-columns: repeat(auto-fill, minmax(min(370px, 100%), 1fr)); }
.ld-tile-card { position: relative; overflow: hidden; }
/* Kante ohne eigenen Radius — der overflow:hidden der Karte beschneidet sie. */
.ld-tile-edge {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  display: flex; flex-direction: column;
}
.ld-tile-edge > span { flex: 1; }
.ld-tile-body { display: flex; gap: 13px; padding: 14px 16px 14px 21px; align-items: flex-start; }
.ld-tile-art {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: var(--r-md);
  overflow: hidden; background: var(--ld-surface-3);
  border: 1px solid var(--ld-border-strong);
  display: flex; align-items: center; justify-content: center;
}
/* Kartenbild: Ausschnitt auf das Artwork im oberen Drittel der Karte. */
.ld-tile-art > img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.ld-tile-art-fb { display: none; align-items: center; justify-content: center; }
.ld-tile-art-unknown { width: 100%; height: 100%; color: var(--ld-text-faint); font-size: 18px; }
.ld-tile-main { min-width: 0; flex: 1; }
.ld-tile-card .ld-list-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-tile-sub {
  font-size: 13px; color: var(--ld-text-dim); line-height: 1.35; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Zwei feste Zeilen statt eines Umbruchs nach Platz: Tinten oben, Fakten +
   Aktionen darunter. Bei flex-wrap hing der Aufbau an Tintenzahl und
   Namenslänge — Mono-Decks standen einzeilig, Drei-Tinten-Decks zweizeilig,
   und das Raster wirkte unruhig (Iris-Review 2026-07-31). */
.ld-tile-facts { margin-top: 8px; }
.ld-tile-inks { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.ld-tile-inks:empty { display: none; }
/* Umbruch NUR hier, nicht in der Tinten-Zeile: auf schmalen Viewports rutschen
   die Aktionen unter Zahl+Datum statt aus der Kachel zu laufen. nowrap sitzt
   an den Text-Kindern, nicht am Container — am Container verhinderte es jeden
   Umbruch und sprengte @375 die Kachelbreite. */
.ld-tile-meta {
  display: flex; align-items: center; gap: 9px; row-gap: 8px; flex-wrap: wrap;
  min-width: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--ld-text-mute);
}
.ld-tile-meta > span { white-space: nowrap; }
.ld-tile-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ld-text-faint); flex: 0 0 3px; }
.ld-tile-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
/* Löschen bleibt sekundär: Kontur erst beim Überfahren der Kachel, Rot erst
   auf dem Button selbst — der destruktive Weg soll nicht das Auge führen. */
.ld-tile-del { border-color: transparent; color: var(--ld-text-faint); }
.ld-tile-card:hover .ld-tile-del { border-color: var(--ld-border-strong); }
.ld-tile-del:hover { border-color: var(--ld-neg); color: var(--ld-neg); background: transparent; }

/* === „Meine Decks" (ADR 0184) === Reiter + Art-Abzeichen + Sperr-Hinweis.
   Die Reiter filtern die GELADENE Kachelmenge im Browser (Muster der
   Galerie-Sortierung, ADR 0057) — kein Server-Roundtrip je Reiterwechsel. */
.ld-ms-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ld-ms-tab {
  font-family: var(--font-mono); font-size: 12px;
  padding: 6px 12px; border-radius: var(--r-md);
  border: 1px solid var(--ld-border); background: transparent;
  color: var(--ld-text-dim); cursor: pointer;
  /* 38px Mindesthöhe: Touch-Ziel am Turniertisch (iris-Vorgabe, wie die
     Filter-Pills im Deckbuilder). */
  min-height: 38px;
}
.ld-ms-tab:hover { border-color: var(--ld-border-strong); color: var(--ld-text); }
.ld-ms-tab[aria-selected="true"] {
  border-color: var(--ld-accent); color: var(--ld-accent); background: var(--ld-surface-3);
}
.ld-ms-count { opacity: .65; margin-left: 5px; }
/* Art-Abzeichen: sagt in der gemischten Ansicht, WAS die Kachel ist. In der
   Ein-Art-Ansicht eines Reiters ist es redundant, bleibt aber stehen — ein
   Element, das je nach Reiter verschwindet, lässt die Kachel-Geometrie
   springen. */
.ld-tile-badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--ld-border); color: var(--ld-text-mute);
  flex: 0 0 auto; white-space: nowrap;
}
/* Der Sperr-Hinweis steht ANSTELLE des Löschknopfs (Deck mit Spielhistorie) —
   nicht als deaktivierter Knopf: ein grauer Knopf lädt zum Klicken ein und
   erklärt nichts. */
.ld-tile-locked {
  font-family: var(--font-mono); font-size: 10px; color: var(--ld-text-faint);
  white-space: normal; max-width: 190px; text-align: right; line-height: 1.3;
}
/* Die Schalter-Zeile „Importierte/Archivierte zeigen" (ADR 0226; loest den
   frueheren Link-Schalter `.ld-ms-archiv` ab) braucht KEINE eigene Klasse: Sie
   nutzt `form-check form-check-inline` wie die Filter-Haken der Spieleliste
   plus Flex-Utilities fuer die Zeile. Eine dritte Filterzeilen-Klasse waere
   eine Kopie von `.dh-filterbar`/`.db-filterbar` ohne eigene Optik gewesen. */
/* Archivierte Kachel sichtbar entsättigen — sonst ist der Schalter „auch
   archivierte zeigen" wirkungslos für das Auge. */
.ld-tile-card.is-archived { opacity: .62; }
.ld-tile-card.is-archived:hover { opacity: 1; }

/* === Listen-Builder (E3c) === Zeile ohne Stepper — Name + Entfernen (×). */
.db-row--list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.db-row--list .db-row-name { flex: 1 1 auto; }

/* === Karten-Detailseite (cards.detail, E3a) ===
   Aus dem page-local <style> nach tokens.css gehoben (E6, iris 2026-06-27) —
   Repo-Konvention „custom CSS in tokens.css, keine page-local <style>-Blocks". */
.card-detail-img {
  width: 100%;
  max-width: 420px;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-elevated);
  display: block;
}
.card-detail-noimg {
  width: 100%;
  max-width: 420px;
  aspect-ratio: var(--card-scan-ratio);
  background: var(--ld-surface-3);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-box {
  min-width: 68px;
  padding: 8px 12px;
  background: var(--ld-surface-3);
  border: 1px solid var(--ld-border);
  border-radius: var(--r-lg);
  text-align: center;
}
.stat-box-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--ld-accent);
  font-feature-settings: "tnum","zero";
  line-height: 1.1;
}
.stat-box-lbl {
  font-size: 11px;
  /* E6/iris-A11y: mute (#8b8b96) auf surface-3 = 4,28:1 (FAIL Normaltext) →
     dim (#a1a1aa = 5,62:1) für WCAG-AA-Lesbarkeit des Werte-Labels. */
  color: var(--ld-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ============================================================
   Deckbuilder Sticky Segment-Leiste (db-segbar) — P6, ADR 0103
   Iris-Spezifikation 2026-07-05. Schmale, unter der .ld-topbar
   klebende Leiste ganz oben im Builder. Links Archetyp-Kontext
   (Ink-Pips + Name/Select), rechts 3-Segment-Format-Umschalter
   Core|Infinity|Beide. z-index 90 = freier Slot unter der
   Topbar (100), siehe Layer-Tabelle oben. Nur bestehende Tokens.
   ============================================================ */
.db-segbar {
  position: sticky;
  top: 56px;                         /* Höhe der .ld-topbar; im Preview verifiziert */
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 44px;
  padding: 8px 16px;
  margin-bottom: 8px;
  /* S12/iris-Entscheid 2026-08-14: Vollton statt Weichzeichner. Diese Leiste
     klebte unter der ebenfalls weichgezeichneten .ld-topbar — zwei Ebenen
     uebereinander, die bei jedem Scroll-Bild doppelt zusammengesetzt wurden
     (Ruckeln auf Mobil). Der Effekt war hier ohnehin unsichtbar: der Grund
     --ld-glass-strong ist rgba(10,10,12,0.92), also zu 92 % exakt die Farbe
     des Seitenhintergrunds. Die .ld-topbar behaelt ihren Weichzeichner.
     Beleg: docs/reviews/2026-08-14-iris-weichzeichner-ebenen-mobil.md */
  background: var(--ld-surface-1);
  border-bottom: 1px solid var(--ld-border);
}

/* ---- Links: Archetyp-Kontext ---- */
.db-segbar-arch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;                      /* erlaubt Ellipsis-Schrumpfen im Flex */
}
.db-segbar-pips {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.db-segbar-arch-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ld-text);
  line-height: 1.2;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Select-Variante (Deck-Modus) — Chevron als inline-SVG-data-URI, kein CDN */
.db-segbar-select {
  height: 30px;
  padding: 0 28px 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ld-text);
  background-color: var(--ld-surface-3);
  border: 1px solid var(--ld-border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  max-width: 240px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%238b8b96' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: background-color .12s, border-color .12s;
}
.db-segbar-select:hover {
  background-color: var(--ld-surface-4);
  border-color: var(--ld-border-strong);
}
.db-segbar-select:focus-visible {
  outline: 2px solid var(--ld-accent);
  outline-offset: 2px;
}

/* ---- Rechts: 3-Segment-Format-Umschalter ---- */
.db-seg-group {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 2px;
  background: var(--ld-surface-2);
  border: 1px solid var(--ld-border-strong);
  border-radius: 999px;
  flex: 0 0 auto;
}
.db-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 60px;
  padding: 0 14px;
  border: 1px solid transparent;     /* Platzhalter, damit Aktiv-Border kein Layout-Shift erzeugt */
  border-radius: 999px;
  background: transparent;
  color: var(--ld-text-mute);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s, border-color .12s;
}
/* Trennlinie zwischen zwei inaktiven Segmenten (verschwindet neben aktivem) */
.db-seg + .db-seg { box-shadow: -1px 0 0 var(--ld-border); }
.db-seg:hover:not(.db-seg--active) {
  background: var(--ld-surface-3);
  color: var(--ld-text);
}
.db-seg--active,
.db-seg[aria-checked="true"] {
  background: var(--ld-accent-soft);
  border-color: var(--ld-accent);
  color: var(--ld-accent);
  font-weight: 600;                  /* dritte, farbunabhängige Unterscheidungs-Achse */
  box-shadow: none;                  /* überschreibt evtl. Trennlinie am aktiven Rand */
}
.db-seg--active + .db-seg,
.db-seg[aria-checked="true"] + .db-seg { box-shadow: none; }
.db-seg:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ld-accent-ring);
}
.db-seg:disabled {
  color: var(--ld-text-faint);
  opacity: .55;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .db-seg, .db-segbar-select { transition: none; }
}

@media (max-width: 576px) {
  .db-segbar { padding: 8px 12px; }
  .db-segbar-arch-name { max-width: 150px; }
  .db-seg { padding: 0 11px; min-width: 52px; }
}

/* ============================================================
   Karten-Labels (team-weit, ADR 0125) — card-labels.js
   Wiederverwendbarer Zuweiser: Chips + Popover (Palette + Neu).
   ============================================================ */
.cl-chip { font-size: 11px; }
.cl-pop {
  z-index: 2000;
  min-width: 220px;
  max-width: 280px;
  background: var(--ld-surface, #1a1d24);
  border: 1px solid var(--ld-border, #333);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 6px;
}
/* Scope-Kopf (ADR 0127): benennt den aktiven Raum (persönlich vs. Team). */
.cl-scope {
  padding: 4px 8px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ld-border, #333);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.cl-list { max-height: 220px; overflow-y: auto; }
.cl-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ld-text, #e6e6e6);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}
.cl-opt:hover, .cl-opt:focus { background: var(--ld-surface-2, rgba(255, 255, 255, 0.06)); outline: none; }
.cl-check { width: 14px; display: inline-block; color: var(--ld-accent, #e6c98a); }
.cl-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.cl-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-empty { padding: 8px; font-size: 12px; }
.cl-new {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--ld-border, #333);
  margin-top: 6px;
  padding-top: 8px;
}
.cl-name-in { flex: 1 1 100%; }
.cl-sws { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.cl-sw {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.cl-sw.is-sel { border-color: var(--ld-text, #fff); }

/* Etappe 2 (ADR 0125): inline Verwalten (Umbenennen/Umfärben/Löschen) im geteilten
   Popover + Tag-Affordanz je Suchtreffer-Kachel. */
.cl-opt-row { display: flex; align-items: center; gap: 2px; border-radius: 6px; }
.cl-opt-row .cl-opt { width: auto; flex: 1 1 auto; }
.cl-opt-row:hover { background: var(--ld-surface-2, rgba(255, 255, 255, 0.06)); }
.cl-opt-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; opacity: 0; transition: opacity .1s ease; }
.cl-opt-row:hover .cl-opt-actions,
.cl-opt-row:focus-within .cl-opt-actions { opacity: 1; }
.cl-edit, .cl-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--ld-text-mute, #9aa0a6); cursor: pointer; font-size: 15px; line-height: 1;
}
.cl-edit:hover, .cl-edit:focus-visible { color: var(--ld-accent, #e6c98a); background: var(--ld-surface, #1a1d24); outline: none; }
.cl-del:hover, .cl-del:focus-visible { color: var(--ld-neg, #f06870); background: var(--ld-surface, #1a1d24); outline: none; }
.cl-editing { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
.cl-edit-name { flex: 1 1 100%; }
.cl-edit-actions { display: flex; gap: 6px; flex: 1 1 auto; }
.cl-edit-err { flex: 1 1 100%; font-size: 12px; }
.cl-confirm { display: flex; align-items: center; gap: 6px; font-size: 12px; padding-right: 4px; }

/* Kartenauswahl (#db-results): kleiner Label-Button oben rechts auf der Kachel. */
.db-card { position: relative; }
/* Ecken-Knöpfe der Galerie-Kachel — geteilte Basis für den Label-Knopf
   (.db-card-tag, ADR 0125) und den Pool-Entfernen-Knopf (.db-pool-remove,
   ADR 0182): gleiche Größe, Farbe und Erscheinungs-Logik (nur bei Hover/Fokus
   sichtbar). Unterschiede stehen einzeln darunter — Ecke und Akzentfarbe. */
.db-card-tag,
.db-pool-remove {
  position: absolute; top: 4px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: rgba(20, 22, 28, 0.82); border: 1px solid var(--ld-border, #333);
  border-radius: 6px; color: var(--ld-text, #e6e6e6); cursor: pointer;
  opacity: 0; transition: opacity .1s ease, color .1s ease, border-color .1s ease;
}
.db-card:hover .db-card-tag,
.db-card:focus-within .db-card-tag,
.db-card-tag:focus-visible,
.db-card:hover .db-pool-remove,
.db-card:focus-within .db-pool-remove,
.db-pool-remove:focus-visible { opacity: 1; }

.db-card-tag { right: 4px; }
.db-card-tag:hover, .db-card-tag.is-active { color: var(--ld-accent, #e6c98a); border-color: var(--ld-accent-ring); }
.db-card-tag.is-active { opacity: 1; }

/* Coconut-Kandidaten-Pool (ADR 0182): „aus dem Pool entfernen" — linke Ecke
   (damit er nicht mit dem Label-Knopf kollidiert) und Gefahr-Farbe. Erscheint
   ausschließlich in der Galerie-Quelle „Coconut-Pool". */
.db-pool-remove { left: 4px; font-size: 16px; line-height: 1; }
.db-pool-remove:hover { color: var(--ld-danger, #e5726b); border-color: var(--ld-danger, #e5726b); }
.db-pool-remove:disabled { opacity: .38; cursor: default; }

/* Sofort-Rückgängig nach dem Entfernen aus dem ARCHETYP-Pool (Paket
   nora-2026-0090, Felix-Entscheid 3: kein Bestätigungsdialog vorher, dafür ein
   Rückweg danach). Bewusst NUR der Knopf, ohne Erklärtext (Felix-Entscheid
   2026-08-12). Fixiert am unteren Rand, damit er unabhängig von der
   Scroll-Position der Galerie erreichbar ist. */
.db-pool-undo {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 1090;  /* über card-hover-tip (1080), unter Bootstrap-Modals (2050) */
  display: flex; align-items: center;
  max-width: calc(100vw - 24px);
  padding: 8px 10px;
  background: rgba(20, 22, 28, 0.96);
  border: 1px solid var(--ld-border, #333); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  color: var(--ld-text, #e6e6e6); font-size: .92rem; line-height: 1.35;
}
.db-pool-undo[hidden] { display: none; }
.db-pool-undo-btn {
  flex: 0 0 auto;
  border: 1px solid var(--ld-accent-ring, #6b5a34);
  color: var(--ld-accent, #e6c98a); background: transparent;
}
.db-pool-undo-btn:hover:not(:disabled) {
  color: var(--ld-bg, #14161c); background: var(--ld-accent, #e6c98a);
}
.db-pool-undo-btn:disabled { opacity: .5; cursor: default; }

/* ============================================================
   Command-Palette / Quick-Switcher (E5.2) — command-palette.js
   Eigenes Overlay auf Modal-Ebene (Z-Index 2050, siehe Cheatsheet oben),
   nutzt durchgehend die Bestands-Tokens (surface/accent/mono) → wirkt nativ.
   ============================================================ */
.ld-cmdk {
  position: fixed; inset: 0; z-index: 2050;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.ld-cmdk[hidden] { display: none; }
.ld-cmdk-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.ld-cmdk-panel {
  position: relative; z-index: 1;
  width: min(560px, 92vw); max-height: 64vh;
  display: flex; flex-direction: column;
  background: var(--ld-surface-1);
  border: 1px solid var(--ld-border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  animation: ld-cmdk-in .12s ease-out;
}
@keyframes ld-cmdk-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
.ld-cmdk-search {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ld-border);
}
.ld-cmdk-search .bi-search { color: var(--ld-text-mute); font-size: 15px; }
.ld-cmdk-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: var(--ld-text); font-size: 15px; font-family: inherit;
}
.ld-cmdk-input::placeholder { color: var(--ld-text-faint); }
.ld-cmdk-list { overflow-y: auto; padding: 6px; }
.ld-cmdk-group-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ld-text-mute);
  padding: 8px 10px 4px;
}
.ld-cmdk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  border-left: 2px solid transparent;
  color: var(--ld-text); text-decoration: none; cursor: pointer;
}
.ld-cmdk-item.is-active { background: var(--ld-surface-2); border-left-color: var(--ld-accent); }
.ld-cmdk-ic {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--ld-surface-3); color: var(--ld-text-dim);
}
.ld-cmdk-label {
  flex: 1; min-width: 0;
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ld-cmdk-empty { padding: 22px; text-align: center; color: var(--ld-text-mute); font-size: 13px; }
body.ld-cmdk-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ld-cmdk-panel { animation: none; }
}

/* ============================================================
   Loading-States (E5.2) — loading.js + .ld-btn / Bootstrap-Buttons
   Butt on zeigt bei laufender Operation einen Spinner statt Text; das Element
   wird über [aria-busy] gesperrt. Rein additiv, No-Op ohne die Klasse.
   ============================================================ */
.ld-is-loading {
  position: relative; color: transparent !important;
  pointer-events: none; cursor: progress;
}
.ld-is-loading::after {
  content: ""; position: absolute;
  top: 50%; left: 50%; width: 15px; height: 15px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  color: var(--ld-text);
  animation: ld-spin .6s linear infinite;
}
/* Farbe des Spinners aus dem Button-Kontext (Primary-Button = dunkler Text,
   gleiche Farbe wie der Button-Text selbst in .ld-btn--primary). */
.ld-btn--primary.ld-is-loading::after { color: #1a1410; }
@keyframes ld-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ld-is-loading::after { animation-duration: 1.4s; }
}

/* ============================================================
   Focus-Visible-Fallback (E5.2) — Tastatur-Sichtbarkeit flächendeckend.
   Ergänzt die bestehenden Button/Input-Rings um interaktive Elemente ohne
   eigenen Ring (Nav-Links, Dropdown-Items, qa-item, Command-Palette-Items,
   Karten-Links). Maus-Klick bleibt ringfrei dank :focus-visible.
   ============================================================ */
.ld-topbar .nav-link:focus-visible,
.dropdown-item:focus-visible,
.qa-item:focus-visible,
.ld-cmdk-item:focus-visible,
.card-hover:focus-visible,
a.ld-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ld-accent-ring);
  border-radius: var(--r-sm);
}

/* ============================================================
   Favoriten-Stern (Archetypen-Übersicht, Paket 1 2026-07-15).
   Gefüllt = angepinnter Favorit (Akzentfarbe), leer = neutral.
   ============================================================ */
.fav-star {
  background: none;
  border: 0;
  padding: 0 2px;
  line-height: 1;
  cursor: pointer;
  color: var(--ld-accent);
  font-size: 15px;
}
.fav-star .bi-star { color: var(--ld-text-mute); }
.fav-star:hover .bi-star { color: var(--ld-accent); }
.fav-star:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ld-accent-ring);
  border-radius: var(--r-sm);
}

/* ============================================================
   E2 Gedächtnisstütze (Mockup-Freigabe 2026-07-16): Gegner-Karten-
   Pop-up + Verwerfen-Signalfarbe in Review-Inbox und Spiel-Detail.
   ============================================================ */

/* Verwerfen: eigene Signalfarbe (Orange) — bewusst getrennt vom
   Niederlage-/Danger-Rot (Felix-Feedback Mockup v4). */
.btn-discard {
  --bs-btn-color: #f0a35e;
  --bs-btn-border-color: rgba(240, 163, 94, .55);
  --bs-btn-hover-color: #f0a35e;
  --bs-btn-hover-bg: rgba(240, 163, 94, .12);
  --bs-btn-hover-border-color: #f0a35e;
  --bs-btn-active-color: #f0a35e;
  --bs-btn-active-bg: rgba(240, 163, 94, .18);
  --bs-btn-active-border-color: #f0a35e;
}

/* Karten-Grid im Gegner-Karten-Pop-up (echte Kartenbilder, Hover-Zoom). */
.gl-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.gl-card { margin: 0; position: relative; }
.gl-card img {
  width: 100%; border-radius: 6px; display: block;
  transition: transform .12s;
}
.gl-card img:hover { transform: scale(1.6); position: relative; z-index: 3; }
.gl-card .gl-card-count {
  position: absolute; top: 6px; right: 6px;
  font-size: 11px; font-weight: 700; padding: 1px 7px;
  background: rgba(0, 0, 0, .65); border-radius: 999px;
  color: var(--ld-accent);
}
.gl-card figcaption {
  font-size: 11px; color: var(--ld-text-dim);
  margin-top: 4px; line-height: 1.25;
}
@media (prefers-reduced-motion: reduce) {
  .gl-card img, .gl-card img:hover { transition: none; transform: none; }
}

/* Keycard-Picker (Kartensuche + Chip-Liste) — genutzt von der Archetype-
   Anlage (archetypes/form.html) und dem Review-Pop-up „Neuen Archetype
   erstellen" (sessions/detail.html). Zog aus dem page-lokalen <style>-Block
   der Archetype-Anlage hierher (Konvention: kein page-local CSS). */
.kc-search-wrap { position: relative; }
.kc-results {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  background: var(--ld-surface-2); border: 1px solid var(--ld-border-strong);
  border-radius: 8px; margin-top: 4px; max-height: 320px; overflow-y: auto;
  box-shadow: var(--shadow-2);
}
.kc-result-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; }
.kc-result-row:hover { background: var(--ld-surface-3); }
.kc-chip-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }

/* Guide-Deck-Embed (G2, ADR 0223): [[Deck:id]]-Anker im server-gerenderten
   Guide werden per fetch zur Deck-Vorschau erweitert — die Vorschau liest
   sich als eingelegtes Artefakt im Fließtext (Inset-Fläche mit Rahmen). */
.guide-deck-embed {
  background: var(--ld-surface-1);
  border: 1px solid var(--ld-border);
  border-radius: var(--r-md);
  padding: 12px;
  margin: 10px 0;
}

/* Turnier-Modul (ADR 0173 E2): Krönchen des amtierenden Wochenturnier-Siegers */
.champion-crown { font-size: .85em; margin-left: .25rem; }

/* [Format Coconut] (ADR 0180): Karten-Wähler + Coconut-Kacheln im Builder.
   Nutzt die bestehende .db-card-Kachel-Optik; der Wähler ist ein einklappbares
   Panel unter der Segment-Leiste (kein Overlay — Mobile-freundlich). */
.db-coconut-picker {
  background: var(--ld-surface-2, #f6f4ef);
  border: 1px solid var(--ld-border, #d9d4c8);
  border-radius: var(--r-md, 10px);
  padding: .75rem;
}
.db-coconut-card {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: center;
  cursor: pointer;
}
.db-coconut-card img { width: 100%; }

/* Team-Reiter von „Meine Decks" (Felix-Entscheid 2026-08-01): optisch
   abgesetzt, weil dort NICHT Selbstangelegtes liegt. Linker Abstand + eigene
   Kontur trennen ihn von den vier „meine"-Reitern, ohne ihn zu verstecken. */
.ld-ms-tab--fremd { margin-left: auto; border-style: dashed; }
@media (max-width: 560px) { .ld-ms-tab--fremd { margin-left: 0; } }
.ld-tile-card[data-ms-art="team"] .ld-tile-badge {
  border-color: var(--ld-accent); color: var(--ld-accent);
}

/* ============================================================
   Deck-Hub E1 (dh-*) — oeffentliche Deck-Seiten, iris-Konzept
   2026-08-07 (docs/plans/deck-hub-design-konzept.md): dunkle
   Galerie, EIN Gold-Akzent, Werte in Mono, Kennzahlen als EIN
   Band. Neue Tokens laut Konzept-Tabelle (nur Flaechen, nie Text).
   ============================================================ */
:root {
  --dh-card-ratio: 63 / 88;      /* echtes Lorcana-Kartenformat */
  --dh-bar-track: var(--ld-surface-2);
  /* Gedaempfte Ink-Toene NUR fuer Flaechen (Balken/Segmente), nie fuer Text
     (Kontrast z. T. < 3:1) — Konzept-Tabelle §4, gesampelt 2026-07-28.
     sapphire fehlte im Kreisdiagramm-Set; Wert nach demselben Verfahren aus
     den fuenf belegten Paaren abgeleitet (#29618e) und gegen iris' Schaetzung
     ~#2c5f86 verifiziert — uebernommen wird der Konzept-Wert. */
  --ink-amber-dim:    #bb8825;
  --ink-amethyst-dim: #623862;
  --ink-emerald-dim:  #2d7037;
  --ink-ruby-dim:     #9a0c2e;
  --ink-sapphire-dim: #2c5f86;
  --ink-steel-dim:    #81878e;
}

.dh-page .dh-eyebrow {
  font-family: var(--font-mono, monospace); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ld-accent);
}
.dh-mono { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; }

/* Hero: Identitaet links, (Coconut-)Karte als gerahmtes Exponat rechts. */
.dh-hero { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 20px; }
.dh-hero-main { flex: 1 1 auto; min-width: 0; }
.dh-hero-sub { color: var(--ld-text-dim); }
.dh-hero-card {
  flex: 0 0 auto; width: clamp(120px, 18vw, 190px);
  aspect-ratio: var(--dh-card-ratio); display: block; position: relative;
  border: 1px solid var(--ld-border-strong); border-radius: var(--r-lg, 12px);
  overflow: hidden; background: var(--ld-surface-1);
}
.dh-hero-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.dh-hero-card-fb { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
@media (max-width: 640px) { .dh-hero { flex-direction: column-reverse; } }

/* Panel-Variante des Heros (Coconut-Karten-Detailseite, Politur 2026-08-08):
   geschlossene Flaeche, Text senkrecht auf Bildmitte, Kartenbild etwas groesser.
   Als Modifier, damit hub/deck_public.html den flachen Hero behaelt. */
.dh-hero--panel {
  align-items: center; padding: 20px; margin-bottom: 28px;
  background: var(--ld-surface-1); border: 1px solid var(--ld-border);
  border-radius: var(--r-lg, 12px);
}
.dh-hero--panel .dh-hero-card { width: clamp(140px, 20vw, 220px); }
/* Kennzahlen im Hero: fuellen den Raum neben dem hohen Kartenbild, statt ihn
   leer zu lassen — Label klein und ruhig, Wert gross und lesbar. */
.dh-hero-facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 16px; }
.dh-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dh-fact-label {
  font-family: var(--font-mono, monospace); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ld-text-mute);
}
.dh-fact-value { font-size: 20px; line-height: 1.2; display: inline-flex; align-items: center; gap: 7px; }
.dh-hero-cta { margin-top: 18px; }
@media (max-width: 640px) { .dh-hero--panel { padding: 16px; } }

/* Kennzahlen-Band: EIN flaches Band, duenne Trenner — kein Kasten-Stapel. */
.dh-band {
  display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 24px;
  background: var(--ld-surface-1); border: 1px solid var(--ld-border);
  border-radius: var(--r-lg, 12px);
}
.dh-band-cell {
  flex: 1 1 220px; min-width: 0; padding: 12px 16px;
  border-right: 1px solid var(--ld-border);
  display: flex; flex-direction: column; gap: 6px;
}
.dh-band-cell:last-child { border-right: 0; }
@media (max-width: 720px) { .dh-band-cell { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--ld-border); } .dh-band-cell:last-child { border-bottom: 0; } }
.dh-band-label {
  font-family: var(--font-mono, monospace); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ld-text-mute);
}
.dh-band-value { color: var(--ld-text-dim); font-size: 14px; }

/* Kostenkurve: flache Gold-Balken, Wert doppelt kodiert (title + aria). */
.dh-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.dh-bar { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 2px; }
.dh-bar-fill { width: 100%; min-height: 2px; background: var(--ld-accent); border-radius: 2px 2px 0 0; background-clip: padding-box; }
.dh-bar-x { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--ld-text-mute); }

/* Karten-Raster der Deck-Seite (110px-Muster wie db-deck-grid).
   Seit S11c auf demselben --card-tile-min-Mechanismus wie .ld-cardgrid
   (Kartenbild-Kachel-Norm, „ein Kachel-System"); die abweichenden Werte
   (110/82px, gap 10px, Breakpoint 560px, Ratio 63/88, Rahmen + r-md) sind
   Bestand und als benannte Divergenz im S11c-Abschluss dokumentiert. */
.dh-group-head { margin: 18px 0 10px; }
.dh-card-grid {
  --card-tile-min: 110px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-tile-min), 1fr));
  gap: 10px;
}
@media (max-width: 560px) { .dh-card-grid { --card-tile-min: 82px; } }
.dh-card-tile { position: relative; margin: 0; }
.dh-card-tile img {
  width: 100%; aspect-ratio: var(--dh-card-ratio); object-fit: cover;
  border-radius: 8px; border: 1px solid var(--ld-border);
  display: block;
}
.dh-card-noimg {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; aspect-ratio: var(--dh-card-ratio); padding: 6px;
  border-radius: 8px; border: 1px solid var(--ld-border);
  background: var(--ld-surface-1); color: var(--ld-text-mute); font-size: 12px;
}
.dh-card-qty {
  position: absolute; top: 6px; left: 6px; padding: 1px 7px;
  background: rgba(10, 10, 12, .82); color: var(--ld-text);
  border: 1px solid var(--ld-border-strong); border-radius: var(--r-pill, 999px);
  font-size: 12px;
}
.dh-plainlist { list-style: none; padding: 0; color: var(--ld-text-dim); }
.dh-foot { margin-top: 28px; display: flex; gap: 16px; align-items: center; }

/* Galerie-Filterzeile: bricht UM, statt seitlich zu schieben (Felix-Feedback
   2026-08-12). Vorher `overflow-x: auto` — sobald die vier Auswahlfelder plus
   Knopf breiter waren als das Fenster, lag ein Scrollbalken unter der Zeile und
   die hinteren Filter ausserhalb des Bildes. Das ist genau die Form, die die
   Komponenten-Norm fuer Reiter bereits verworfen hat („Schieben ohne sichtbare
   Kante ist keine zulaessige Form", docs/guides/design-stilguide.md) — hier
   stand sie noch, weil die Zeile aus E1 stammt und der Norm-Satz aus S3.
   Umbruch braucht keine Kante: jedes Feld bleibt sichtbar. */
.dh-filterbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 16px;
}
/* `min-width: 0` erlaubt dem breitesten Feld (Coconut-Karten mit langen
   Namen) zu schrumpfen statt die Zeile aufzuspannen; `min-height` gleicht die
   Feldhoehe an den 28px-Knopf daneben an. */
.dh-filterbar .ld-share-select { min-width: 0; min-height: 28px; }

/* Autoren-Kopf: Initialen-Medaillon (Web-Uebertragung des Medaillon-Musters). */
.dh-author-head { display: flex; gap: 14px; align-items: center; }
.dh-author-medal {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ld-surface-4); border: 1px solid var(--ld-accent);
  color: var(--ld-accent); font-family: var(--font-mono, monospace); font-size: 22px;
}

/* Spieler-Suche (E3): Trefferzeile im selben Regal-Muster wie die Kacheln —
   Medaillon kleiner, Name nimmt den Raum, Deck-Zahl rechts. */
.dh-author-row {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  text-decoration: none;
}
.dh-author-row:hover { border-color: var(--ld-accent); }
.dh-author-row .dh-author-medal { width: 34px; height: 34px; font-size: 15px; }
.dh-author-row .ld-list-title { flex: 1 1 auto; }

/* ============================================================
   Deck-Hub E2 — Coconut-Meta (Uebersicht + Karten-Detail),
   iris-Konzept §3.4/3.5: EIN Raster aus 18 gleichen Kacheln
   (keine Top-3-Buehne), Werte doppelt kodiert (Mono-Zahl +
   duenner Gold-Balken), Tinten-Verteilung als flache Balken.
   ============================================================ */
.dh-meta-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
@media (max-width: 560px) { .dh-meta-grid { grid-template-columns: repeat(2, 1fr); } }
.dh-meta-tile {
  display: block; padding: 10px; text-decoration: none;
  background: var(--ld-surface-1); border: 1px solid var(--ld-border);
  border-radius: var(--r-lg, 12px); color: var(--ld-text);
}
.dh-meta-tile:hover { border-color: var(--ld-border-strong); color: var(--ld-text); }
.dh-meta-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ld-accent-ring); }
.dh-meta-tile img {
  width: 100%; aspect-ratio: var(--dh-card-ratio); object-fit: cover;
  border-radius: 8px; border: 1px solid var(--ld-border); display: block;
}
.dh-meta-tile-fb {
  display: none; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: var(--dh-card-ratio);
  border-radius: 8px; border: 1px solid var(--ld-border);
  background: var(--ld-surface-2);
}
.dh-meta-name { margin: 8px 0 2px; font-weight: 600; line-height: 1.25; }
.dh-meta-sub { color: var(--ld-text-mute); font-size: 13px; margin-bottom: 6px; }

/* Popularitaets-/Prozent-Balken: 4px-Laufbahn, Gold-Fuellung relativ zum
   Maximum — nie Farbe/Laenge allein, die Mono-Zahl steht immer daneben. */
.dh-pop { display: flex; align-items: center; gap: 8px; }
.dh-pop-track {
  flex: 1 1 auto; height: 4px; border-radius: var(--r-pill, 999px);
  background: var(--dh-bar-track); overflow: hidden;
}
.dh-pop-fill { display: block; height: 100%; background: var(--ld-accent); border-radius: var(--r-pill, 999px); }
.dh-pop-num { font-size: 13px; color: var(--ld-text-dim); white-space: nowrap; }

/* Prozent-Zeile unter einer Karten-Kachel (Detailseite §3.5).
   Politur 2026-08-08: GESTAPELT statt nebeneinander. In der 110-px-Kachel
   (mobil 82 px) blieb neben einer dreistelligen Zahl kaum Laufbahn uebrig —
   Balken und Zahl drueckten sich gegenseitig weg. Jetzt liegt der Balken als
   duenne Leiste direkt unter dem Kartenbild, die Zahl darunter auf voller
   Breite. Bewusst nur hier: die 18er-Uebersicht (dh-meta-tile) hat mit 200 px
   Kachelbreite genug Platz fuer die Zeilen-Form und behaelt sie. */
.dh-card-pct { margin-top: 6px; }
.dh-card-pct .dh-pop { flex-direction: column; align-items: stretch; gap: 4px; }
.dh-card-pct .dh-pop-num { font-size: 12px; line-height: 1.1; }

/* „Mehr anzeigen" je Typ-Gruppe: natives details/summary statt JS-Wand. */
.dh-more { margin-top: 10px; }
.dh-more > summary {
  cursor: pointer; list-style: none; display: inline-block;
  padding: 4px 12px; font-size: 13px; color: var(--ld-text-dim);
  border: 1px solid var(--ld-border); border-radius: var(--r-pill, 999px);
}
.dh-more > summary::-webkit-details-marker { display: none; }
.dh-more > summary:hover { border-color: var(--ld-border-strong); }
.dh-more > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ld-accent-ring); }
.dh-more[open] > summary { display: none; }
.dh-more > .dh-card-grid { margin-top: 10px; }

/* Tinten-Verteilung: flache horizontale Balken je Kombination — Flaeche in
   den -dim-Toenen (Segmente je Tinte), Wert als Mono-Zahl, Tinten-Namen als
   Text-Label (nie farb-allein, A11y §6.3). Label-Spalte so breit wie der
   laengste Kombi-Name (Deckel 260px, Ellipsis als Fallback) — mit der
   frueheren 1fr-Spalte wurden lange Namen abgeschnitten (Politur 2026-08-09). */
.dh-hbar { display: grid; grid-template-columns: fit-content(260px) 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.dh-hbar-label { display: flex; align-items: center; gap: 6px; color: var(--ld-text-dim); font-size: 14px; min-width: 0; }
.dh-hbar-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-hbar-track { height: 10px; border-radius: var(--r-pill, 999px); background: var(--dh-bar-track); overflow: hidden; }
.dh-hbar-fill { display: flex; height: 100%; border-radius: var(--r-pill, 999px); overflow: hidden; }
.dh-hbar-fill > span { flex: 1 1 0; }
.dh-hbar-num { font-size: 13px; color: var(--ld-text-dim); white-space: nowrap; }
@media (max-width: 560px) { .dh-hbar { grid-template-columns: 1fr auto; } .dh-hbar-track { grid-column: 1 / -1; } }

/* Unterbau der Detailseite (Politur 2026-08-08): gestapelte Abschnitte statt
   der frueheren zwei Spalten „Tinten | Decks". Die schmale Tinten-Spalte liess
   bei wenigen Kombinationen ein grosses leeres Feld stehen, waehrend die
   Deck-Kacheln daneben gequetscht waren. */
.dh-section { margin-top: 32px; }
.dh-section:first-of-type { margin-top: 0; }
/* Politur 2026-08-09 (Felix): Kombinationen strikt untereinander (EINE
   Spalte) — im frueheren mehrspaltigen auto-fit-Raster liefen lange
   Kombi-Label (Amber/Ruby/Sapphire) unter die Balken der Nachbarspalte
   (Ueberlagerung, Screenshot-Befund). Daneben der Einzelfarben-Kuchen. */
.dh-hbars { display: grid; grid-template-columns: 1fr; gap: 8px; }
.dh-inks-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px 48px; align-items: start; }
@media (max-width: 760px) { .dh-inks-split { grid-template-columns: 1fr; } }
/* Kuchen als reines CSS (conic-gradient aus dem Template), Donut-Loch per
   Maske — so braucht es keine Kenntnis der Panel-Hintergrundfarbe. Werte
   stehen daneben als Text (nie farb-allein, A11y §6.3). */
.dh-pie-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.dh-pie { width: 160px; height: 160px; border-radius: 50%; flex: 0 0 auto;
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%);
  mask: radial-gradient(circle, transparent 52%, #000 53%); }
.dh-pie-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 170px; flex: 1 1 170px; }
.dh-pie-legend li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ld-text-dim); }
.dh-pie-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.dh-pie-pct { margin-left: auto; font-size: 13px; }

/* Effekttext in der Hero-Mitte (Politur 2026-08-09): fuellt den vorher
   leeren Raum zwischen Textblock und Kartenbild; Typo kommt aus den
   t-*-Utilities im Template. */
.dh-hero-effect { flex: 1 1 0; min-width: 0; align-self: center; padding: 0 12px; }
.dh-hero-effect p { line-height: 1.5; }
.dh-hero-effect .dh-fact-label { display: block; margin-bottom: 6px; }
@media (max-width: 640px) { .dh-hero-effect { padding: 0; } }

/* Karten-Typ-Gruppen sichtbar voneinander trennen: duenne Oberlinie plus mehr
   Luft davor. Vorher stapelten sich Ueberschrift, Raster und „Mehr anzeigen"
   in gleichfoermigen Abstaenden — man sah nicht, wo eine Gruppe endet. */
.dh-group { border-top: 1px solid var(--ld-border); padding-top: 18px; margin-top: 24px; }
.dh-group:first-of-type { border-top: 0; padding-top: 0; margin-top: 14px; }
/* Titel links, Anzahl rechts. Eigener Modifier, weil hub/deck_public.html
   dieselbe dh-group-head-Klasse mit inline stehender Klammer-Zahl nutzt. */
.dh-group-head--split { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* Sichtbarkeits-Schalter auf „Meine Decks"-Kacheln (Deck-Hub E1). */
.ld-tile-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ld-border);
}
.ld-tile-share-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.ld-share-select {
  background: var(--ld-surface-2); color: var(--ld-text);
  border: 1px solid var(--ld-border); border-radius: 8px;
  padding: 3px 8px; font-size: 13px; max-width: 100%;
}
.ld-share-anon { display: inline-flex; align-items: center; gap: 4px; margin: 0; cursor: pointer; }
.ld-share-link { color: var(--ld-accent); text-decoration: none; }
.ld-share-link:hover { color: var(--ld-accent-hover, var(--ld-accent)); text-decoration: underline; }

/* ============================================================
   Matchup-Guides (Guide-Neubau G3, ADR 0223)
   ============================================================ */
/* Eine Zeile der Matchup-Liste: Gegnername als Aufklapp-Schalter, daneben die
   Winrate-Chips. Der Inhalt (drei Abschnitte) wird erst beim Aufklappen
   nachgeladen und sitzt in .mg-body. */
.mg-guide-row {
  border: 1px solid var(--ld-border);
  border-radius: var(--r-md, 10px);
  padding: 8px 10px;
  background: var(--ld-surface-1);
}
.mg-guide-row .mg-toggle {
  flex: 1 1 140px;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mg-kopf { gap: 6px; }
.mg-chips { gap: 6px; }
/* Die Aktion gehört nicht ins Abstands-Raster der Kennzahlen: bei durchgehend
   6 px las sich „Löschen" wie der vierte Chip der Reihe — verstärkt dadurch,
   dass der Unterschied-Chip bei Rückstand dieselbe Bedeutungsfarbe trägt wie
   der Knopf (`--ld-neg`). Die Farbe bleibt (Stilguide: Bewertungs-Chips müssen
   ihre Bedeutungsfarbe zeigen), getrennt wird über den Raum.
   Fester Abstand statt `margin-left:auto`: der Gegnername (`flex: 1 1 140px`)
   verbraucht den freien Raum bereits, `auto` hätte nichts zu verteilen gehabt
   (erste Hand gemessen: blieb bei 6 px). */
.mg-guide-row .mg-kopf .ld-btn--danger { margin-left: 14px; }
.mg-body {
  border-top: 1px solid var(--ld-border);
  padding-top: 10px;
}
/* Am Telefon stapeln sich Name, Chips und Löschen statt zu überlaufen. */
@media (max-width: 575.98px) {
  .mg-guide-row .mg-kopf { row-gap: 6px; }
  .mg-guide-row .mg-toggle { flex-basis: 100%; }
}