:root {
    --bg: #f4f5f7;
    --panel-bg: #ffffff;
    --surface-muted: #eceef1;
    --border: #dfe2e8;
    --primary: #d9483c;
    --primary-dark: #b53a30;
    --text: #1f2430;
    --text-muted: #6b7280;
    --radius: 10px;
    --shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Dark Mode: entweder explizit per data-theme gesetzt (Toggle + gespeicherte
   Praeferenz), oder als Fallback ueber die System-Einstellung, solange keine
   explizite Praeferenz gespeichert ist. */
:root[data-theme="dark"] {
    --bg: #0f1115;
    --panel-bg: #171a21;
    --surface-muted: #20242d;
    --border: #2a2f3a;
    --primary: #ef5350;
    --primary-dark: #d9483c;
    --text: #e8eaed;
    --text-muted: #9aa1ac;
    --shadow: 0 2px 14px rgba(0,0,0,0.4);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --bg: #0f1115;
        --panel-bg: #171a21;
        --surface-muted: #20242d;
        --border: #2a2f3a;
        --primary: #ef5350;
        --primary-dark: #d9483c;
        --text: #e8eaed;
        --text-muted: #9aa1ac;
        --shadow: 0 2px 14px rgba(0,0,0,0.4);
    }
}

* { box-sizing: border-box; }

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

/* Muss vor allen anderen Regeln stehen (bzw. mit !important), sonst kann
   z.B. "display: flex" auf einer Komponente das hidden-Attribut aushebeln -
   genau das war der Bug beim Modal und beim "Neues Deck"-Formular. */
[hidden] { display: none !important; }

/* Browser-Standard: button/select/input/textarea erben KEINE font-family
   vom umgebenden Element (eigene UA-Schriftart), anders als z.B. h2/p/div.
   Deshalb hat die Titel-Schriftart-Auswahl in der Deck-Ansicht (siehe
   #deckMain-Inline-Style in deck_view.php) bisher nur Ueberschriften/Text
   erfasst, nicht aber Buttons/Dropdowns (Sprache-Button, Loeschen-Button,
   Varianten-Auswahl usw.) - die blieben immer bei der System-Schrift haengen. */
button, select, input, textarea { font-family: inherit; }

/* --- Slim, theme-passender Scrollbar (statt der hässlichen weißen
   Standard-Browser-Leiste im Dark Mode) - gilt fuer die ganze Seite. --- */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    background-image: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 45%),
                       radial-gradient(circle at 90% 15%, color-mix(in srgb, var(--primary) 4%, transparent), transparent 40%);
    background-attachment: fixed;
    color: var(--text);
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* Individueller Seiten-Hintergrund der Deck-Ansicht (Customization) - das
   Bild kommt per Inline-Style (siehe deck_view.php/deck_shared.php), hier
   nur Size/Position/Attachment sowie ein abdunkelnder Verlauf als zweite
   Hintergrund-Ebene, damit Karten/Text bei beliebigen Fotos lesbar bleiben. */
body.has-page-bg {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

a { color: var(--primary); text-decoration: none; }

.btn {
    border: none;
    border-radius: var(--radius);
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-block;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent); }
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 45%, transparent); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface-muted); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.btn-small { padding: 0.3rem 0.6rem; font-size: 0.8rem; width: 100%; margin-top: 0.4rem; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.5rem;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 20;
    flex-wrap: wrap;
}
.topbar h1 { font-size: 1.2rem; margin: 0; }
.topbar-brand {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}
.topbar-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* --- Gast-Funktion: Hinweisstreifen unter der Kopfzeile (siehe
   includes/partials/guest_banner.php) --- */
.guest-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.5rem 1rem;
    background: color-mix(in srgb, var(--primary) 12%, var(--panel-bg));
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    text-align: center;
    flex-wrap: wrap;
}

.btn-large { padding: 0.85rem 1.6rem; font-size: 1.05rem; }

/* --- Theme-Toggle --- */
.theme-toggle {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
}
.theme-toggle-track {
    display: block;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    position: relative;
    transition: background-color 0.2s ease;
}
.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    transition: transform 0.2s ease;
    z-index: 2;
}
.theme-toggle-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 1;
    color: var(--text-muted);
    z-index: 1;
    pointer-events: none;
}
.theme-toggle-icon-sun { left: 4px; }
.theme-toggle-icon-moon { right: 4px; }
:root[data-theme="dark"] .theme-toggle-thumb { transform: translateX(18px); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle-thumb {
        transform: translateX(18px);
    }
}

/* --- Sprach-Dropdown --- */
.lang-select {
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
}

/* --- Landingpage --- */
.landing { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; position: relative; }

.hero {
    text-align: center;
    padding: 5rem 1rem 3.5rem;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    top: -220px;
    left: 50%;
    width: 760px;
    height: 520px;
    transform: translateX(-50%);
    background:
        radial-gradient(circle at 30% 30%, rgba(217, 72, 60, 0.35), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(60, 130, 217, 0.25), transparent 55%);
    filter: blur(60px);
    z-index: -1;
    animation: heroDrift 14s ease-in-out infinite alternate;
    pointer-events: none;
}
:root[data-theme="dark"] .hero::before { opacity: 0.7; }
@keyframes heroDrift {
    from { transform: translateX(-52%) translateY(0) scale(1); }
    to   { transform: translateX(-48%) translateY(20px) scale(1.08); }
}
.hero h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.2;
    margin: 0 0 1rem;
    animation: fadeSlideUp 0.6s ease both;
}
.hero-sub {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto 2rem;
    line-height: 1.5;
    animation: fadeSlideUp 0.6s ease 0.1s both;
}
.hero-cta {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeSlideUp 0.6s ease 0.2s both;
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1rem 0 3rem;
}
.feature-card {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.3rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    animation: fadeSlideUp 0.6s ease both;
    animation-delay: calc(0.15s + var(--card-index, 0) * 0.08s);
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--primary);
}
.feature-card h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.feature-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; }
.feature-card-soon { border-style: dashed; opacity: 0.85; }

.landing-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    border-top: 1px solid var(--border);
}

.page { padding: 1.5rem; max-width: 1100px; margin: 0 auto; }
.page-wide { max-width: 1400px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.page-header-secondary { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.section-hint { margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.85rem; }

/* --- Admin-Backend --- */
.admin-table-wrap {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: auto;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th, .admin-table td { padding: 0.75rem 1rem; text-align: left; white-space: nowrap; }
.admin-table th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid var(--border); }
.admin-table tbody tr { border-bottom: 1px solid var(--border); }
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--surface-muted); }
.admin-user-cell { display: flex; flex-direction: column; gap: 0.1rem; }
.admin-user-name-row { display: flex; align-items: center; gap: 0.4rem; }
.admin-user-email { color: var(--text-muted); font-size: 0.78rem; }
.admin-you-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    vertical-align: middle;
}
.admin-role-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-muted);
}
.admin-role-admin { color: #b8860b; background: color-mix(in srgb, #b8860b 15%, transparent); }
.admin-role-superadmin { color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); }
.admin-role-select { padding: 0.3rem 0.5rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel-bg); color: inherit; font-size: 0.82rem; }
.admin-status-badge { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px; }
.admin-status-active { color: #22c55e; background: rgba(34, 197, 94, 0.14); }
.admin-status-locked { color: #ef4444; background: rgba(239, 68, 68, 0.14); }
.admin-status-unverified { color: #eab308; background: rgba(234, 179, 8, 0.16); }
.admin-feature-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; cursor: pointer; }
.admin-feature-readonly { color: var(--text-muted); font-size: 0.82rem; }
.admin-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; }
.admin-actions .btn { width: auto; margin-top: 0; white-space: nowrap; }
.admin-no-permission { color: var(--text-muted); font-size: 0.75rem; font-style: italic; }
.admin-sets-details { margin-top: 2.5rem; }
.admin-sets-summary { cursor: pointer; list-style: none; }
.admin-sets-summary::-webkit-details-marker { display: none; }
.admin-sets-summary h3 { display: inline-flex; align-items: center; gap: 0.4rem; }
.admin-sets-summary h3::before { content: "▸ "; display: inline-block; font-size: 0.85em; }
.admin-sets-details[open] .admin-sets-summary h3::before { content: "▾ "; }
.admin-sets-count { color: var(--text-muted); font-weight: 400; font-size: 0.85em; }
.admin-sets-summary .section-hint { margin-left: 1.2rem; }
.admin-sets-details .admin-table-wrap { margin-top: 1rem; }
.admin-set-code-row { display: flex; align-items: center; gap: 0.5rem; }
.admin-set-code-input { width: 90px; text-transform: uppercase; font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-muted); color: var(--text); }
.admin-set-code-status { font-size: 0.8rem; color: var(--text-muted); }

.admin-images-filter { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.admin-images-filter select, .admin-images-filter input[type="text"] { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-muted); color: var(--text); }
/* Sammel-Upload-Leiste (siehe api/admin_bulk_card_image.php) - EIN Bild auf
   mehrere angehakte Karten zugleich anwenden, gedacht fuer grosse Mengen
   wiederverwendeter Illustrationen (z.B. Energie-Karten ueber viele Sets). */
.admin-bulk-image-bar { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.85rem; padding: 0.6rem 0.75rem; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap; }
.admin-bulk-also-de { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; }
.admin-image-upload-cell { display: flex; align-items: center; gap: 0.5rem; }
.admin-image-upload-thumb { width: 36px; height: 49px; object-fit: contain; border-radius: 4px; background: var(--surface-muted); }
.admin-image-upload-label { cursor: pointer; }
.admin-image-upload-label.is-disabled { opacity: 0.5; pointer-events: none; }
.admin-image-upload-status { font-size: 0.8rem; color: var(--text-muted); min-width: 1.2em; display: inline-block; }

.card-panel {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.card-panel input, .card-panel select {
    padding: 0.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text);
}

.deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.deck-card-wrap { position: relative; }
.deck-card {
    display: block;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    padding-right: 4.5rem;
    color: var(--text);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.deck-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.deck-card h3 { margin: 0 0 0.3rem; }
.deck-meta { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
.deck-card-actions { position: absolute; top: 0.8rem; right: 0.8rem; display: flex; gap: 0.4rem; }
.deck-card-edit:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.empty-hint { color: var(--text-muted); }

.auth-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.auth-topbar {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.auth-card {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.auth-card label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.auth-card input {
    padding: 0.55rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text);
}
.auth-card .error { color: var(--primary); font-size: 0.85rem; margin: 0; }
.auth-card .success { color: #2f9e44; font-size: 0.85rem; margin: 0; }
.auth-card .hint { font-size: 0.85rem; color: var(--text-muted); margin: 0; text-align: center; }
/* --- Gast-Funktion: "Ohne Account ausprobieren"-Einstieg unter dem
   Login-/Registrierungsformular (siehe login.php/register.php) --- */
.auth-guest-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.auth-guest-divider::before, .auth-guest-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.btn-block { display: block; text-align: center; width: 100%; box-sizing: border-box; }

.builder-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1rem;
    padding: 1rem;
    align-items: start;
}
@media (max-width: 900px) {
    .builder-layout { grid-template-columns: 1fr; }
}

.browser-filters {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.browser-filters input, .browser-filters select {
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    flex: 1;
    min-width: 140px;
    background: var(--panel-bg);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.browser-filters input:focus, .browser-filters select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.browser-filters input:hover, .browser-filters select:hover { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.8rem;
}
.card-tile {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.card-tile img { width: 100%; border-radius: 8px; display: block; }
.card-tile-image { cursor: pointer; border-radius: 8px; display: block; transition: transform 0.2s ease; }
.card-tile:hover .card-tile-image { transform: scale(1.03); }
.card-tile-image:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.no-image {
    aspect-ratio: 245 / 337;
    background: var(--surface-muted);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.card-tile-info { margin-top: 0.4rem; }
.card-tile-name { display: block; font-size: 0.85rem; font-weight: 600; }
.card-tile-set { display: block; font-size: 0.75rem; color: var(--text-muted); }
.card-tile-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; }
.card-tile-actions .qty-stepper { flex-shrink: 0; }
.card-tile-actions .btn-details { margin-left: auto; }

.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }

.deck-panel {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    box-shadow: var(--shadow);
    position: sticky;
    top: calc(1rem + 70px);
}
.deck-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.deck-panel-header h2 {
    margin: 0;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deck-collapse-toggle {
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}
.deck-panel-collapsed .deck-collapse-toggle { transform: rotate(180deg); }
.deck-panel-collapsed .deck-list { display: none; }

.deck-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.deck-list-item {
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
}
.deck-list-item-row { display: flex; align-items: center; gap: 0.5rem; }
.deck-list-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.deck-list-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-list-set { font-size: 0.72rem; color: var(--text-muted); }
/* Stern/Sprache/Info/Loeschen standen bisher rechts INNERHALB der
   deck-list-item-row, was bei langen Kartennamen (deck-list-name) deren
   verfuegbare Breite stark einschraenkte und den Namen vorzeitig abschnitt
   (Nutzer-Feedback). Jetzt eine eigene Zeile UNTER Menge+Name/Set, der Name
   bekommt so die volle Zeilenbreite. Das Druckvarianten-Dropdown (falls
   vorhanden) sitzt links in DERSELBEN Zeile auf Hoehe der Buttons (weiterer
   Nutzerwunsch: spart die vorherige eigene Variantenzeile darunter) - die
   Buttons selbst stecken in einer eigenen .deck-list-item-actions-buttons-
   Gruppe mit margin-left:auto, damit sie unabhaengig davon, ob ein Dropdown
   da ist oder nicht, immer rechtsbuendig bleiben. */
.deck-list-item-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; }
/* War zuerst auf 6rem gesetzt - enger als sogar die Basis-Breite der
   .variant-select-Regel (6.4rem), dadurch wurden laengere Label wie
   "Reverse Holo" faelschlich zu "Reverse H" abgeschnitten (Nutzer-Feedback
   per Screenshot). Jetzt deutlich breiter, damit auch der laengste Label
   ("Reverse Holo"/"1st Edition") komplett angezeigt wird. */
.deck-list-item-actions .variant-select { max-width: 10rem; }
.deck-list-item-actions-buttons { display: flex; align-items: center; gap: 0.3rem; margin-left: auto; flex-shrink: 0; }
.btn-remove {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-star {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-star:hover { background: rgba(234, 179, 8, 0.14); color: #eab308; border-color: rgba(234, 179, 8, 0.4); }
.btn-star-active { background: rgba(234, 179, 8, 0.16); color: #eab308; border-color: rgba(234, 179, 8, 0.5); }
.btn-remove:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
:root[data-theme="dark"] .btn-remove:hover { background: rgba(220, 38, 38, 0.18); color: #f87171; border-color: rgba(248, 113, 113, 0.4); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .btn-remove:hover {
        background: rgba(220, 38, 38, 0.18); color: #f87171; border-color: rgba(248, 113, 113, 0.4);
    }
}
.deck-remove-confirm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--surface-muted);
    border-radius: var(--radius);
    font-size: 0.78rem;
    animation: deck-confirm-in 0.15s ease;
}
@keyframes deck-confirm-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.deck-remove-confirm span { flex: 1; color: var(--text-muted); }
.deck-remove-confirm button {
    border: none;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-remove-yes { background: #dc2626; color: #fff; }
.btn-remove-yes:hover { background: #b91c1c; }
.btn-remove-no { background: var(--border); color: var(--text); }
.btn-remove-no:hover { background: var(--text-muted); color: var(--panel-bg); }
.btn-details {
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--primary);
    cursor: pointer;
    font-style: italic;
    font-weight: 700;
    font-family: Georgia, serif;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-details:hover { background: var(--surface-muted); }
.deck-list-item .btn-details { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
.btn-lang {
    flex-shrink: 0;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-lang:hover { background: var(--surface-muted); color: var(--text); }
.btn-lang-set { background: rgba(59, 130, 246, 0.14); color: #3b82f6; border-color: rgba(59, 130, 246, 0.4); }
.btn-lang-set:hover { background: rgba(59, 130, 246, 0.2); }

/* Druckvarianten-Dropdown (Normal/Holo/Reverse Holo/1st Edition) - nur
   gerendert, wenn eine Karte ueberhaupt mehr als eine moegliche Variante
   hat, daher bewusst kompakt/unauffaellig neben dem Sprache-Button. */
.variant-select {
    flex-shrink: 0;
    max-width: 6.4rem;
    height: 1.6rem;
    padding: 0 1.1rem 0 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    /* Zeigt bei zu wenig Platz wenigstens "..." statt die Beschriftung
       (z.B. "Reverse Holo") einfach hart abzuschneiden. */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.variant-select:hover { background: var(--surface-muted); color: var(--text); }

/* --- Anzahl-Stepper ("- 2 +"), ersetzt den alten reinen "+ Deck"-Button
   und die separaten Runden-Buttons in der Deck-Liste. --- */
.qty-stepper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.qty-stepper button {
    width: 1.8rem;
    height: 1.8rem;
    border: none;
    background: var(--surface-muted);
    color: var(--text);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
.qty-stepper button:hover { background: var(--border); }
.qty-stepper .qty-input {
    width: 2.4rem;
    height: 1.8rem;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: center;
    background: var(--panel-bg);
    color: var(--text);
    font-size: 0.85rem;
    -moz-appearance: textfield;
}
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty-stepper-compact button { width: 1.6rem; height: 1.6rem; }
.qty-stepper-compact .qty-input { width: 2.1rem; height: 1.6rem; font-size: 0.8rem; }

/* --- Detail-Popup --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 25, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 100;
}
.modal-box {
    background: var(--panel-bg);
    border-radius: var(--radius);
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    padding: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.modal-box-wide { max-width: 700px; }
.modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    z-index: 1;
}
.modal-body { display: flex; flex-direction: column; gap: 1rem; }

/* Bild links (~65%), Namen/Set rechts (~35%) - fällt auf schmalen Screens
   (Handy) auf eine gestapelte Spalte zurück. */
.modal-top {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}
.modal-image-col { flex: 0 0 46%; max-width: 46%; }
.modal-image { width: 100%; border-radius: 8px; display: block; }
.modal-info-col { flex: 1; min-width: 0; padding-top: 0.2rem; }
@media (max-width: 520px) {
    .modal-top { flex-direction: column; }
    .modal-image-col { flex-basis: auto; max-width: 60%; margin: 0 auto; }
    .modal-info-col { width: 100%; }
}

.modal-lang-row { margin: 0 0 0.1rem; font-size: 0.95rem; }
.modal-lang-row-de { margin-top: 0.7rem; }
.modal-lang-tag { color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; display: block; }
.modal-name { font-weight: 700; font-size: 1.05rem; }
.modal-set { color: var(--text-muted); font-size: 0.82rem; margin: 0 0 0.3rem; }
.modal-set-number {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.btn-copy-number {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-copy-number:hover { background: var(--surface-muted); color: var(--primary); }
.btn-copy-number.copied { color: #22c55e; border-color: #22c55e; }

.modal-meta { color: var(--text); font-size: 0.9rem; margin: 0 0 0.6rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.modal-meta-part { display: inline-flex; align-items: center; gap: 0.3rem; }
.modal-meta-sep { color: var(--text-muted); font-weight: 400; }
.type-icon { width: 1.15rem; height: 1.15rem; vertical-align: middle; display: inline-block; }
.type-badge { display: inline-block; font-size: 0.78rem; color: var(--text-muted); background: var(--surface-muted); border-radius: 999px; padding: 0.05rem 0.5rem; }
/* Energie-Symbol-Platzhalter ("{W}" usw.) mitten im Attacken-/Faehigkeiten-
   Fliesstext - siehe formatEffectText() in app.js/deck_view.js. Etwas
   kleiner als die Kosten-Icons und mit kleinem Abstand, damit es sich sauber
   in den Lauftext einfuegt statt wie ein separates Element zu wirken. */
.type-icon-inline { width: 0.95rem; height: 0.95rem; margin: 0 0.05rem; }

.modal-section { margin-top: 0.9rem; }
.modal-section h4 { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }

.modal-attacks { display: flex; flex-direction: column; gap: 0.6rem; }
.modal-attack { border-top: 1px solid var(--border); padding-top: 0.5rem; }
.modal-attack-name { font-weight: 600; }
.modal-attack-name-alt { font-weight: 400; color: var(--text-muted); }
.modal-attack-damage { color: var(--primary); font-weight: 700; }
.modal-attack-cost { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.3rem; }
.modal-attack-cost .type-icon { width: 1.3rem; height: 1.3rem; }
.modal-attack-effect { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; }
.modal-no-attacks { color: var(--text-muted); font-size: 0.85rem; }
.modal-trainer-effect { font-size: 0.9rem; color: var(--text); margin: 0; line-height: 1.5; }

/* --- Profilseite --- */
.profile-page h2 { margin-bottom: 1rem; }
.profile-panel { display: block; }
.profile-panel h3 { margin: 0 0 0.9rem; font-size: 1.05rem; }
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 420px;
}
.profile-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.profile-form input[type="email"],
.profile-form input[type="password"],
.profile-form input[type="text"] {
    padding: 0.55rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text);
}
.profile-form .btn { align-self: flex-start; }
.profile-form .error { color: var(--primary); font-size: 0.85rem; margin: 0; }
.profile-form .success { color: #2f9e44; font-size: 0.85rem; margin: 0; }

.profile-static-field { display: flex; gap: 0.5rem; margin: 0 0 0.3rem; }
.profile-static-label { font-weight: 600; min-width: 110px; }
.profile-panel .hint { color: var(--text-muted); font-size: 0.82rem; margin: 0 0 0.6rem; }

.avatar-row { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-fallback { font-size: 1.8rem; font-weight: 700; color: var(--text-muted); }
.avatar-controls { display: flex; flex-direction: column; gap: 0.5rem; }

.profile-appearance-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

/* --- Deck-Ansicht (deck_view.php) --- */
.view-hero {
    position: relative;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
    overflow: hidden;
}
/* Individuelles Hero-Hintergrundbild (Customization) - der eigentliche
   Inhalt sitzt auf einer halbtransparenten "Karte" darueber, damit Titel,
   Buttons und Statistiken unabhaengig vom Motiv immer lesbar bleiben. */
.view-hero.has-hero-bg { background-size: cover; background-position: center; }
.view-hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    /* Genug Platz fuer die absolut positionierte Aktions-Button-Spalte oben
       rechts (siehe .view-hero-actions) reservieren - die zaehlt bewusst
       nicht zur Zeilenhoehe der Titelzeile, faellt bei kurzem Hero-Inhalt
       (Sammlung/Deck ohne Hauptkarte, wenige Buttons noetig) aber sonst ueber
       den unteren Rand hinaus und wird vom .view-hero { overflow:hidden }
       abgeschnitten. 340px deckt auch den Maximalfall ab (Deck ohne
       Hauptkarte inkl. Turnierkarte-Button + Auswaehlen + Ansicht-Umschalter). */
    min-height: 340px;
}
.has-hero-bg .view-hero-content {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--panel-bg) 55%, transparent) 0%,
        color-mix(in srgb, var(--panel-bg) 38%, transparent) 55%,
        color-mix(in srgb, var(--panel-bg) 50%, transparent) 100%);
    backdrop-filter: blur(1px);
}
/* Leichter Textschatten statt starkem Overlay, damit das Hintergrundbild
   selbst bei hellen/bunten Motiven sichtbar bleibt und Text trotzdem lesbar ist. */
.has-hero-bg .view-hero-title,
.has-hero-bg .view-hero-desc-wrap,
.has-hero-bg .view-hero-set,
.has-hero-bg .view-hero-number,
.has-hero-bg .view-hero-stat-value,
.has-hero-bg .view-hero-stat-label {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* "Liquid Glass"-Kacheln fuer Titel/Beschreibung/Kartenname+Statistik bei
   individuellem Hintergrundbild: ein eigener halbtransparenter, geblurrter
   Hintergrund pro Textblock ist robuster als nur Textschatten (funktioniert
   auch bei sehr hellen/kontrastarmen Motiven). Jede Kachel ist bewusst nur
   so breit wie ihr Inhalt (width: fit-content) statt die ganze Flex-Spalte
   zu fuellen - sonst wuerde die Kachel z.B. bei der "X Karten"-Anzeige quer
   durchs Bild reichen und die Aktions-Buttons rechts oben verdecken. Die
   Deckkraft ist per --glass-opacity (inline auf .view-hero, Schieber im
   "Schrift"-Panel) einstellbar, Standard 72%. Kartenname/Set UND die
   Statistik-Zahlen (GESAMT/POKEMON/...) sitzen bewusst in derselben Kachel
   (.view-hero-info), statt wie zuvor getrennt - Wunsch war ein einzelnes,
   zusammenhaengendes Feld statt zwei visuell unabhaengiger Bloecke. */
.has-hero-bg .view-hero-title-wrap,
.has-hero-bg .view-hero-desc-col,
.has-hero-bg .view-hero-info {
    width: fit-content;
    background: color-mix(in srgb, var(--panel-bg) var(--glass-opacity, 72%), transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    border-radius: var(--radius);
    padding: 0.5rem 0.8rem;
}
/* Titel-Kachel: nicht mehr flex:1 (das hat sie vorher ueber die ganze
   Zeilenbreite gestreckt) und mit Maximalbreite, damit sie bei langen Namen
   trotzdem nicht unter die absolut positionierte Button-Spalte rechts oben
   reicht. Bei individueller Schrift/Farbe (.has-custom-title) entfaellt die
   Kachel komplett - der Nutzer waehlt dann selbst eine gut lesbare Farbe,
   ein staerkerer Textschatten uebernimmt die Lesbarkeit stattdessen. */
.has-hero-bg .view-hero-title-wrap {
    flex: 0 1 auto;
    max-width: calc(100% - 210px);
}
.has-hero-bg .view-hero-title-wrap.has-custom-title {
    background: none;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}
.has-custom-title .view-hero-title {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.6);
}
.has-hero-bg .view-hero-desc-col { max-width: min(340px, 100%); }
.has-hero-bg .view-hero-desc-col .view-hero-desc-wrap { margin: 0; }
.has-hero-bg .view-hero-info { flex: 0 1 auto; max-width: 100%; }
.has-hero-bg .view-hero-info-text { margin-bottom: 0.5rem; }
.has-hero-bg .view-hero-info-text .view-hero-set { margin-bottom: 0; }
/* Trennlinie zwischen Kartenname/Set und den Statistik-Zahlen innerhalb der
   gemeinsamen Kachel, statt eines harten Abstands. */
.has-hero-bg .view-hero-info .view-hero-stats {
    border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    padding-top: 0.6rem;
    margin-top: 0.1rem;
}
/* Kartenanzahl (Sammlung/Deck ohne Hauptkarte) sitzt jetzt direkt unter dem
   Namen in derselben Titel-Kachel statt in einer eigenen breiten Box. */
.view-hero-count-pill { margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; }
.has-hero-bg .view-hero-title-wrap .section-hint { margin-top: 0.25rem; }
@media (max-width: 560px) {
    .has-hero-bg .view-hero-title-wrap,
    .has-hero-bg .view-hero-desc-col,
    .has-hero-bg .view-hero-info {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Obere Zeile: Deck-Titel + Beschreibung links, Aktionen/Ansicht-Umschalter rechts */
/* Die Aktionen (Bearbeiten/Teilen/...) haengen absolut in der oberen rechten
   Ecke (siehe .view-hero-actions) statt als Flex-Geschwister der Titelzeile -
   sonst haette die gestapelte Button-Spalte (5-6 Zeilen) die ganze Zeile so
   hoch gezogen wie sie selbst ist und einen riesigen Leerraum ueber der
   Hauptkarte erzeugt. So bestimmt nur der Titel die Zeilenhoehe. */
.view-hero-top { display: flex; min-height: 1px; }
.view-hero-title-wrap { min-width: 0; flex: 1; padding-right: 180px; }
.view-hero-title { margin: 0; font-size: 1.4rem; overflow-wrap: break-word; }

.view-hero-body { display: flex; gap: 1.5rem; align-items: flex-start; }
.view-hero-image-col { flex: 0 0 auto; }
.view-hero-image-col-clickable {
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.view-hero-image-col-clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.view-hero-image-col-clickable:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.view-hero-image { width: 210px; border-radius: 8px; display: block; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.view-hero-image.no-image { width: 210px; height: 293px; aspect-ratio: auto; margin: 0; }
/* Beschreibung/Spieltipps sitzt jetzt als eigene Spalte neben der
   Hauptkarte statt unter dem Titel (Wunsch: mehr Platz fuer die Karte,
   Beschreibung optisch näher an den Deck-Infos). */
.view-hero-desc-col { flex: 1 1 240px; min-width: 200px; max-width: 340px; align-self: flex-start; padding-top: 10px; }
.view-hero-info { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 10px; }
.view-hero-info h2 { margin: 0; font-size: 1.3rem; }
/* Sprache-Umschalter direkt neben dem Kartennamen im Hero-Kasten - Nutzer-
   Feedback: das grosse Hero-Bild/-Name folgte dem Sprache-Umschalter oben
   nicht, wenn die Karte eine eigene (explizite) Druck-Sprache hatte; jetzt
   direkt hier umschaltbar statt nur ueber die Galerie/Liste weiter unten. */
.view-hero-name-row { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.2rem; flex-wrap: wrap; }
.view-hero-name-row h2 { margin: 0; }
.view-hero-lang { flex-shrink: 0; }
.view-hero-number { margin: 0 0 0.3rem; color: var(--text-muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.view-hero-set { margin: 0 0 1rem; color: var(--text-muted); }
.view-hero-info-plain { padding-top: 0; }
.view-hero-info-plain .section-hint { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.85rem; }
.view-hero-stats { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.view-hero-stat { display: flex; flex-direction: column; }
.view-hero-stat-value { font-size: 1.4rem; font-weight: 700; }
.view-hero-stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }

/* Softcap-Warnung (mehr als DECK_SIZE Karten im Deck): rein visueller Hinweis,
   das Hinzufuegen weiterer Karten bleibt erlaubt (siehe deck_builder.php/
   deck_view.php + app.js/deck_view.js updateDeckCounter()/recomputeStats()).
   Turnierliste (tournament_pdf.php) und Deck-Bild (deck_image.php) verweigern
   die Erstellung stattdessen komplett, siehe .overlimit-page dort. */
.counter-overlimit { color: #b45309; }
.has-hero-bg .counter-overlimit { color: #fbbf24; }
.overlimit-banner { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 1rem; padding: 0.75rem 1rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; color: #92400e; font-size: 0.9rem; line-height: 1.4; }
.overlimit-banner svg { flex-shrink: 0; margin-top: 0.15rem; width: 18px; height: 18px; }
:root[data-theme="dark"] .counter-overlimit { color: #fbbf24; }
:root[data-theme="dark"] .overlimit-banner { background: #3f2d0b; border-color: #78350f; color: #fcd34d; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .counter-overlimit { color: #fbbf24; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .overlimit-banner { background: #3f2d0b; border-color: #78350f; color: #fcd34d; }
}
/* Vorher align-items:center hier - das liess den Beschreibungs-Block links
   und die "X Karten"-Textspalte rechts unterschiedlich hoch werden, sobald
   die Beschreibung auf-/zugeklappt wurde, wodurch die Kartenanzahl optisch
   "gewandert" ist. flex-start (wie bei .view-hero-body generell) haelt
   beide Spalten oben ausgerichtet, damit die Anzahl an fester Position bleibt. */
.view-hero-empty .view-hero-body { align-items: flex-start; }
@media (max-width: 560px) {
    /* Auf Mobil stehen die Aktions-Buttons wieder im normalen Textfluss
       (.view-hero-actions wird static, siehe weiter unten) - die Reservierung
       fuer die sonst absolut positionierte Spalte wird dort nicht gebraucht. */
    .view-hero-content { min-height: 0; }
    .view-hero-top { flex-direction: column; align-items: stretch; text-align: center; }
    .view-hero-title-wrap { text-align: center; padding-right: 0; }
    .view-hero-body { flex-direction: column; align-items: center; text-align: center; }
    /* flex: 1 1 240px auf .view-hero-desc-col meint im Desktop-Zeilenlayout
       eine Breite von 240px (flex-basis). Sobald .view-hero-body hier auf
       flex-direction:column wechselt, wird dieselbe 240px-Angabe zur
       Hoehen-Basis - die Spalte bekommt dadurch eine ca. 240px hohe leere
       Box, auch wenn <details> zu ist (wirkt wie "immer offen"). Deshalb
       hier flex-basis auf auto zuruecksetzen und nicht mitwachsen lassen. */
    .view-hero-desc-col { flex: 0 0 auto; max-width: 100%; align-self: stretch; }
    .view-hero-stats { justify-content: center; }
}

/* --- Beschreibung/Spieltipps (aufklappbar) --- */
.view-hero-desc-wrap { margin-top: 0; }
.view-hero-desc { font-size: 0.85rem; }
.view-hero-desc summary {
    cursor: pointer;
    color: var(--primary);
    font-weight: 600;
    list-style: none;
}
.view-hero-desc summary::-webkit-details-marker { display: none; }
.view-hero-desc summary::before { content: "▸ "; display: inline-block; }
.view-hero-desc[open] summary::before { content: "▾ "; }
.view-hero-desc-text { margin: 0.5rem 0; color: var(--text); white-space: pre-line; max-width: 60ch; line-height: 1.5; }
.btn-text-link {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.view-hero-desc-editor { margin-top: 0.4rem; max-width: 480px; }
.view-hero-desc-input {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
}
.view-hero-desc-editor-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* --- Hero-Aktionen (Bearbeiten/Teilen/Als-Bild-oeffnen) + Ansicht-Umschalter --- */
.view-hero-actions {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* Muss NACH der obigen Basis-Regel stehen, sonst gewinnt bei gleicher
   Spezifitaet die spaetere Regel unabhaengig vom Media Query (CSS-
   Kaskade-Fallstrick, der hier schon einmal genau so aufgetreten ist). */
@media (max-width: 560px) {
    .view-hero-actions {
        position: static;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 0.75rem;
    }
}
.view-hero-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.view-hero-action-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.view-hero-action-btn:hover { background: var(--surface-muted); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.view-hero-action-primary { background: var(--primary); color: #fff; border-color: transparent; }
.view-hero-action-primary:hover { background: var(--primary-dark); color: #fff; }
.view-hero-action-btn[aria-expanded="true"], .view-hero-action-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--primary) 16%, var(--panel-bg)); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--primary); }
.view-hero-share-wrap { position: relative; }
/* Nutzerwunsch: die Titel-Schriftart (siehe #deckMain-Inline-Style weiter oben
   in deck_view.php) soll NICHT mehr auf die Hero-Buttons/das Menue durchschlagen
   (anders als bei den Buttons in der Kartenliste, die bewusst folgen sollen -
   siehe die globale button/select/input/textarea{font-family:inherit}-Regel
   ganz am Anfang dieser Datei). Deshalb hier explizit wieder auf die normale
   UI-Schrift zurueckgesetzt, unabhaengig vom gewaehlten Titel-Font. */
/* .design-panel (das neue verschiebbare Design-Fenster) UND .share-panel
   (Teilen/Turnierkarte, die per JS an <body> gehaengt werden) sind bewusst
   mit dabei - beides soll unabhaengig von der gewaehlten Titel-Schriftart
   immer die normale UI-Schrift zeigen. */
.view-hero-actions, .design-panel, .share-panel { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* --- Design-Fenster (Hauptkarte/Titel-Stil/Hintergrund/Typen - siehe
   Kommentar bei #designBtn in deck_view.php und designBtn-Block in
   deck_view.js). Anders als die kleinen Dropdown-Panels (.share-panel) ist
   das hier ein eigenstaendiges, per Titelleiste VERSCHIEBBARES Fenster -
   bewusst KEIN backdrop-filter/Unschaerfe, der Nutzer soll beim Anpassen von
   Schrift/Hintergrund/etc. alles klar sehen koennen. */
.view-hero-menu-wrap { position: relative; }
.design-panel {
    position: fixed;
    width: 400px;
    max-width: calc(100vw - 16px);
    display: flex;
    flex-direction: column;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 14px 40px rgba(0,0,0,0.28);
    z-index: 210;
    /* Kleines Fade-Ein beim Oeffnen (kein Slide noetig, die Position variiert
       ja je nach verfuegbarem Platz/vorherigem Verschieben). */
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}
/* Auf dem Handy ist ein frei schwebendes/verschiebbares Fenster unpraktisch
   (zu wenig Platz, Ziehen kollidiert mit Scrollen) - dort wird daraus eine
   fixe Bottom-Sheet: unten angedockt, volle Breite, eigene Scrollflaeche.
   Das Verschieben wird fuer diesen Fall in deck_view.js deaktiviert. */
@media (max-width: 560px) {
    .design-panel {
        left: 0 !important;
        right: 0;
        top: auto !important;
        bottom: 0;
        width: auto;
        max-width: none;
        border-radius: var(--radius) var(--radius) 0 0;
        max-height: min(80vh, calc(100vh - 16px)) !important;
    }
    .design-panel-header { cursor: default; touch-action: auto; }
}
.design-panel.is-open { opacity: 1; transform: scale(1); pointer-events: auto; }
.design-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.6rem 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 0.85rem;
    /* Zeigt an, dass die Titelleiste zum Verschieben gedacht ist (siehe
       pointerdown-Handler in deck_view.js). touch-action:none verhindert,
       dass ein Ziehen auf dem Handy stattdessen die Seite scrollt. */
    cursor: move;
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
}
.design-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.design-panel-close:hover { background: var(--surface-muted); color: var(--text); }
.design-panel-body {
    padding: 0.8rem 0.9rem 0.9rem;
    overflow-y: auto;
}
.design-section { padding: 0.7rem 0; border-top: 1px solid var(--border); }
.design-section:first-child { padding-top: 0; border-top: none; }
/* Hauptkarte-Abschnitt als <details> - auf-/zuklappbar, damit die lange
   Kartenliste das Fenster nicht unnoetig in die Laenge zieht, wenn man sie
   gerade nicht braucht (siehe deck_view.php, ersetzt das statische <p>). */
.design-section-collapsible { padding: 0; border-top: none; }
.design-section-collapsible > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.7rem 0;
}
.design-section-collapsible > summary::-webkit-details-marker { display: none; }
.design-section-collapsible > summary::before { content: "▸ "; display: inline-block; }
.design-section-collapsible[open] > summary::before { content: "▾ "; }
.design-section-collapsible > summary + * { margin-top: -0.1rem; }
.design-section-collapsible > .main-card-search { margin-top: 0; }

/* --- Grid/Liste-Umschalter --- */
.view-layout-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.view-layout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.9rem;
    border: none;
    background: var(--panel-bg);
    color: var(--text-muted);
    cursor: pointer;
}
.view-layout-btn svg { width: 15px; height: 15px; }
.view-layout-btn + .view-layout-btn { border-left: 1px solid var(--border); }
.view-layout-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--primary) 16%, var(--panel-bg)); color: var(--primary); }
.view-layout-btn:hover { background: var(--surface-muted); }

/* --- Teilen-Panel --- */
.share-panel {
    /* position: fixed statt absolute + JS-Positionierung (siehe deck_view.js
       positionFloatingPanel()): der Hero-Kasten hat overflow:hidden fuer das
       Hintergrundbild/die runden Ecken, damit wuerde ein absolut positioniertes
       Panel abgeschnitten, sobald es ueber den Kastenrand hinausragt. */
    position: fixed;
    width: 260px;
    max-width: calc(100vw - 1rem);
    overflow-y: auto;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    padding: 0.9rem;
    z-index: 200;
}
.share-panel-label { margin: 0 0 0.6rem; font-weight: 700; font-size: 0.85rem; }
.share-toggle-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; cursor: pointer; }
.share-toggle-row input { flex-shrink: 0; }
.share-link-row { display: flex; gap: 0.4rem; margin-top: 0.7rem; }
.share-link-row input {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text);
    font-size: 0.72rem;
}
.share-panel-hint { margin: 0.7rem 0 0; font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; }
.share-panel-hint.error { color: #dc2626; }

/* --- "Hauptkarte wechseln"-Panel (deck_view.php/deck_view.js): eigenes,
   etwas breiteres/hoeheres share-panel mit Suchfeld + scrollbarer Liste aller
   Deck-Karten, damit man die Hero-Karte direkt aus der Ansicht heraus
   wechseln kann statt nur ueber den Stern im Builder. --- */
.main-card-panel { width: 300px; display: flex; flex-direction: column; }
.main-card-search {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
    flex-shrink: 0;
}
.main-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
    max-height: 260px;
}
.main-card-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    cursor: pointer;
    font-size: 0.82rem;
    text-align: left;
}
.main-card-row:hover { background: var(--surface-muted); }
.main-card-row.is-current { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 10%, transparent); font-weight: 600; }
.main-card-row img, .main-card-row-noimg { width: 28px; height: 38px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.main-card-row-noimg { background: var(--surface-muted); }
.main-card-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-card-none-hint { color: var(--text-muted); font-size: 0.82rem; margin: 0.3rem 0 0; }
:root[data-theme="dark"] .share-panel-hint.error { color: #f87171; }

/* --- Eigenes Bestaetigungs-Popup statt Browser-confirm() (Karte(n) aus dem
   Deck/der Sammlung loeschen), siehe deck_view.js showInlineConfirm(). Fliegt
   per positionFloatingPanel() direkt am ausloesenden Button auf. --- */
.inline-confirm-popup {
    position: fixed;
    width: 220px;
    max-width: calc(100vw - 1rem);
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    padding: 0.75rem;
    z-index: 300;
}
.inline-confirm-text { margin: 0 0 0.6rem; font-size: 0.82rem; color: var(--text); line-height: 1.35; }
.inline-confirm-actions { display: flex; gap: 0.5rem; }
.inline-confirm-actions button {
    flex: 1;
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

/* --- Hero-Hintergrundbild-Panel (Customization) --- */
.hero-bg-current-label { margin: 0 0 0.3rem; font-size: 0.72rem; color: var(--text-muted); }
.hero-bg-preview { width: 100%; aspect-ratio: 1600 / 500; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 0.7rem; border: 1px solid var(--border); }
.hero-bg-form { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.hero-bg-form input[type="file"] { flex: 1; min-width: 0; font-size: 0.72rem; color: var(--text-muted); }
.bg-panel-sep { border: none; border-top: 1px solid var(--border); margin: 0.9rem 0; }
.page-bg-preview { aspect-ratio: 16 / 9; }

/* --- Schrift/Farbe-Panel fuer den Deck-/Sammlungsnamen + Deckkraft-Schieber
   fuer die Glas-Kacheln (Customization) --- */
.title-style-field { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; font-size: 0.82rem; }
.title-style-field span { color: var(--text-muted); }
.title-style-field select {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.4rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text);
    font-size: 0.8rem;
}
.title-style-field input[type="color"] {
    width: 44px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}
.title-style-field-slider { flex-direction: column; align-items: stretch; gap: 0.3rem; }
.title-style-field-slider input[type="range"] { width: 100%; accent-color: var(--primary); }
.title-style-stroke-label { display: flex; align-items: center; gap: 0.4rem; }
.title-style-stroke-label input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; cursor: pointer; accent-color: var(--primary); }
.title-style-field input[type="color"]:disabled { opacity: 0.4; cursor: not-allowed; }
#titleStyleResetBtn { width: 100%; margin-bottom: 0.2rem; }

/* --- Turnierkarte-Panel (offizielle Play! Pokemon Deckliste ausfuellen) --- */
#tournamentPanel { width: 280px; }
.tournament-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
.tournament-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--text-muted); }
.tournament-field input, .tournament-field select {
    font: inherit;
    font-size: 0.85rem;
    color: var(--text);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
}
.tournament-checkbox-row { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.78rem; color: var(--text-muted); }
.tournament-checkbox-row input { margin-top: 0.2rem; }

/* --- Typ-Tags-Panel (Customization) - bis zu 3 der 11 Energietypen fuer
   die Dashboard-Kachel --- */
.type-tags-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-top: 0.3rem; }
.type-tag-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.type-tag-btn img { width: 20px; height: 20px; display: block; }
.type-tag-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.type-tag-btn.active { background: color-mix(in srgb, var(--primary) 18%, var(--surface-muted)); border-color: var(--primary); }
.type-tag-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* Typ-Badges auf den Dashboard-Kacheln (read-only) */
.deck-type-tags { display: flex; gap: 0.3rem; margin-top: 0.4rem; }
.deck-type-tags img { width: 18px; height: 18px; display: block; }

/* --- Geteilte Ansicht (deck_shared.php) --- */
.shared-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, var(--panel-bg));
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
}
.shared-cta { margin-top: 2.5rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

.view-section { margin-bottom: 2rem; }
.view-section-heading { margin: 0 0 0.8rem; font-size: 1.05rem; }
.view-section-count { color: var(--text-muted); font-weight: 400; font-size: 0.9rem; }
.view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.9rem;
}
.view-card-tile {
    position: relative;
    cursor: pointer;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    padding: 0.4rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.view-card-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.view-card-tile:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.view-card-image { width: 100%; border-radius: 8px; display: block; }
.view-card-tile .no-image { margin: 0; }
.view-card-media { position: relative; }
.view-card-qty {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
}

/* Mengen-Stepper direkt auf der Galerie-Kachel (Nutzerwunsch): unauffaelliges,
   halbdurchsichtiges graues Kaestchen mit +/- rechts unten auf dem Bild -
   stoert bewusst nicht den Rest der Kachel (Name/Nummer/Buttonleiste bleiben
   unveraendert), da auf der Miniaturansicht dort ohnehin keine wichtigen
   Karteninfos liegen. Ruft dieselbe API wie der Mengensteller im Builder
   (siehe deck_view.js applyQtyDelta()); waehrend Mehrfachauswahl (select-mode)
   ausgeblendet, analog zum Loeschen-Button. */
.view-card-qty-adjust {
    position: absolute;
    right: 0.45rem;
    bottom: 0.45rem;
    display: flex;
    gap: 0.2rem;
    background: rgba(45, 45, 45, 0.55);
    border-radius: 999px;
    padding: 0.15rem;
}
.view-card-qty-minus,
.view-card-qty-plus {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.view-card-qty-minus:hover,
.view-card-qty-plus:hover { background: rgba(255, 255, 255, 0.4); }
.view-card-qty-minus:disabled,
.view-card-qty-plus:disabled { opacity: 0.55; cursor: default; }
#cardSections.select-mode .view-card-qty-adjust { display: none; }
.view-card-name {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.view-card-set-number {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Sprache-Umschalter + Loeschen-Button pro Karte in der Galerie: eigene
   kleine "Buttonbar" mit Trennlinie unterm Kartennamen/der Nummer statt
   frei ueber dem Bild schwebender Icons - Sprache zuerst, Loeschen zuletzt
   (Nutzerwunsch), beide ganz normal im Dokumentfluss (kein position:absolute
   mehr fuer beide), damit Ueberlappung strukturell ausgeschlossen bleibt und
   sich hier bei Bedarf spaeter weitere Buttons einreihen koennen. In der
   Liste bleiben beide wie bisher inline in der Zeile (siehe .view-list-lang/
   .view-list-delete). Das Druckvarianten-Dropdown (falls vorhanden) sitzt
   NICHT in dieser Zeile, sondern in einer eigenen Zeile darunter
   (.view-card-variant-row) - anders als im Builder, wo es (auf Nutzerwunsch)
   in dieselbe Zeile wie die Buttons gewandert ist. In der Galerie-Kachel war
   das Zusammenlegen zu eng (Nutzer-Feedback), daher hier bewusst wieder
   getrennt; die Buttons-Gruppe behaelt margin-left:auto, das schadet auch
   ohne Geschwister-Element nicht. --- */
.view-card-actions-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}
.view-card-actions-buttons { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-shrink: 0; }
/* Eigene Zeile fuer das Druckvarianten-Dropdown unter der Buttonzeile - da
   hier nichts anderes daneben steht, darf es ruhig die volle Kartenbreite
   nutzen (Nutzerwunsch), statt wie im Builder auf eine feste max-width
   begrenzt zu sein. */
.view-card-variant-row { margin-top: 0.35rem; }
.view-card-variant-row .variant-select { max-width: 100%; width: 100%; }
.view-list-lang { flex-shrink: 0; }
.view-list-star { flex-shrink: 0; }

/* --- Karten aus dem Deck/der Sammlung entfernen (Einzeln + Mehrfachauswahl),
   siehe deck_view.js. In der Listenansicht behaelt der Papierkorb den alten
   dunklen Icon-Look (sitzt dort neben dem kleinen Bild-Thumbnail); in der
   Galerie steht er jetzt in der helleren Buttonbar unterm Namen und bekommt
   deshalb denselben "Ghost-Button"-Look wie die anderen kleinen Rund-Buttons
   (siehe .btn-details/.btn-remove), statt als dunkler Kreis auf dem Bild zu
   schweben. Die Auswahl-Checkbox (Mehrfachauswahl) bleibt weiterhin oben
   rechts ueber dem Bild - andere Interaktion, andere Stelle. --- */
.view-card-delete {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}
.view-card-delete:hover { background: #dc2626; }
.view-card-actions-bar .view-card-delete {
    flex-shrink: 0;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.view-card-actions-bar .view-card-delete:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
:root[data-theme="dark"] .view-card-actions-bar .view-card-delete:hover { background: rgba(220, 38, 38, 0.18); color: #f87171; border-color: rgba(248, 113, 113, 0.4); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .view-card-actions-bar .view-card-delete:hover {
        background: rgba(220, 38, 38, 0.18); color: #f87171; border-color: rgba(248, 113, 113, 0.4);
    }
}
#cardSections.select-mode .view-card-actions-bar .view-card-delete,
#cardSections.select-mode .view-list-delete { display: none; }

.view-card-select-box {
    display: none;
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 3;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#cardSections.select-mode .view-card-select-box { display: flex; }
.view-card-select-box input { width: 1.15rem; height: 1.15rem; cursor: pointer; margin: 0; accent-color: var(--primary); }

.view-list-select-box { display: none; align-items: center; flex-shrink: 0; cursor: pointer; }
#cardSections.select-mode .view-list-select-box { display: flex; }
.view-list-select-box input { width: 1.1rem; height: 1.1rem; cursor: pointer; margin: 0; accent-color: var(--primary); }
.view-list-delete { flex-shrink: 0; }

.bulk-action-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
    padding: 0.6rem 0.9rem;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.bulk-action-count { font-size: 0.85rem; color: var(--text-muted); flex: 1; }
.bulk-action-count #bulkSelectedCount { font-weight: 700; color: var(--text); }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-danger:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; }

/* --- Listen-Ansicht (Alternative zur Galerie, siehe view-layout-toggle) --- */
#cardSections[data-layout="grid"] .view-list { display: none; }
#cardSections[data-layout="list"] .view-grid { display: none; }
.view-list { display: flex; flex-direction: column; gap: 0.4rem; }
.view-list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.7rem;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.view-list-row:hover, .view-list-row:focus-visible {
    background: var(--surface-muted);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    outline: none;
}
.view-list-thumb { width: 32px; height: 44px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.view-list-thumb.no-image { display: flex; font-size: 0; }
.view-list-qty {
    flex-shrink: 0;
    min-width: 2.1rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
}
.view-list-name { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-list-number { flex-shrink: 0; font-size: 0.75rem; color: var(--text-muted); }

/* --- Hover-Vorschau (Listen-Ansicht): grosses Kartenbild rechts beim Drueberfahren --- */
.hover-preview {
    position: fixed;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    width: 240px;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 45px rgba(0,0,0,0.28);
    padding: 10px;
    z-index: 40;
    pointer-events: none;
}
.hover-preview img { width: 100%; border-radius: 8px; display: block; }
@media (max-width: 1100px), (hover: none) {
    .hover-preview { display: none !important; }
}

/* --- Pokedex-Feature (pokedex.php/pokedex.js): Generationen-Navigation,
   Pokemon-Grid mit Regionalform-Chips, Auswahl-Popup. --- */
/* Pokemon-Suche (Name Deutsch oder Englisch) ueber dem Generationen-Tabs -
   rein clientseitig, siehe pokedex.js. */
.pokedex-search-input {
    display: block;
    width: 100%;
    max-width: 360px;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text);
    font-size: 0.9rem;
    margin: 1rem 0 0;
}
.pokedex-search-empty-hint { margin-top: 1.5rem; }

/* Filter "Alle/Mit Karte/Ohne Karte" - eigene Zeile unter der Suche, gleiches
   "drunter machen"-Designmuster wie schon beim Seltenheitsfilter im Zuweisungs-
   Popup (siehe .pokedex-modal-rarity). */
.pokedex-filter-row { margin: 0.5rem 0 0; }
.pokedex-caught-filter {
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text);
    font-size: 0.85rem;
}

.pokedex-gen-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem 0 1.4rem;
}
.pokedex-gen-tab {
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pokedex-gen-tab:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.pokedex-gen-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pokedex-grid {
    display: grid;
    /* Nutzerwunsch: weniger Pokemon pro Reihe, dafuer werden die (gerade bei
       gefangenen Pokemon im Kartenformat angezeigten) Kacheln insgesamt
       groesser/besser lesbar. */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.1rem;
}
@media (max-width: 560px) {
    .pokedex-grid {
        /* Auf sehr schmalen Handys wuerde 190px oft nur eine einzige Spalte
           erlauben - hier reichen zwei nebeneinander. */
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
        gap: 0.8rem;
    }
}
.pokedex-tile {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
}
.pokedex-tile-number {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
}
/* .pokedex-tile-sprite-wrap ist nur noch der (nicht klickbare) Rahmen; der
   eigentliche Klick zum Oeffnen des Auswahl-Popups sitzt auf dem Button
   .pokedex-tile-sprite-btn darin, damit der Entfernen-Button daneben als
   eigenes, unabhaengiges Element Platz hat (2 Buttons duerfen nicht
   ineinander verschachtelt sein). */
.pokedex-tile-sprite-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.15s ease, transform 0.15s ease, aspect-ratio 0.15s ease;
}
.pokedex-tile-sprite-wrap:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.pokedex-tile-sprite-btn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}
.pokedex-tile-sprite {
    max-width: 78%;
    max-height: 78%;
    image-rendering: pixelated;
    /* Nicht gefangene Pokemon werden entsaettigt/abgedunkelt dargestellt -
       "Silhouette"-Gefuehl wie im echten Pokedex, ohne echte Silhouetten
       generieren zu muessen. */
    filter: grayscale(1) brightness(0.55);
    opacity: 0.85;
    transition: filter 0.15s ease, opacity 0.15s ease;
}
/* Sobald ein Pokemon "gefangen" ist, zeigt die Kachel die tatsaechliche
   Sammelkarte (statt nur eines Haekchens ueber dem Pokemon-Sprite) - dafuer
   wechselt die Kachel auf das Hochformat einer echten Karte, das Bild wird
   nicht mehr entsaettigt und faellt nicht mehr auf die 78%-Sprite-Groesse
   zurueck, sondern nutzt die ganze Flaeche. */
.pokedex-tile-sprite-wrap.is-caught {
    aspect-ratio: 245 / 337;
    border-color: color-mix(in srgb, #22c55e 45%, var(--border));
    background: color-mix(in srgb, #22c55e 10%, var(--surface-muted));
}
.pokedex-tile-sprite-wrap.is-caught .pokedex-tile-sprite {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    filter: none;
    opacity: 1;
}
.pokedex-tile-remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pokedex-tile-remove-btn:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.pokedex-tile-name {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}
.pokedex-variant-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 0.1rem;
}
.pokedex-variant-chip {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pokedex-variant-chip:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.pokedex-variant-chip.is-caught {
    background: color-mix(in srgb, #22c55e 25%, var(--surface-muted));
    border-color: color-mix(in srgb, #22c55e 55%, var(--border));
    color: color-mix(in srgb, #16a34a 70%, var(--text));
}

/* Auswahl-Popup: eigene Karte fuer den geklickten Pokedex-Slot suchen. */
.pokedex-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.pokedex-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.pokedex-modal-content {
    position: relative;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem;
    width: min(640px, 100%);
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.pokedex-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.pokedex-modal-close:hover { background: var(--surface-muted); }
#pokedexModalTitle { margin: 0 1.8rem 0.6rem 0; }
.pokedex-modal-current {
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.pokedex-modal-current-thumb {
    width: 52px;
    border-radius: 6px;
    display: block;
    flex-shrink: 0;
}
.pokedex-modal-current-info { display: flex; flex-direction: column; gap: 0.15rem; }
.pokedex-modal-current-label { margin: 0; font-size: 0.78rem; color: var(--text-muted); }
.pokedex-modal-current-name { margin: 0 0 0.2rem; font-size: 0.9rem; font-weight: 600; }
.pokedex-modal-none { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
.pokedex-modal-search {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}
/* Seltenheits-Filter im Auswahl-Popup: eigene Zeile UNTER dem Suchfeld
   (Nutzerwunsch, gleiche Logik wie beim Druckvarianten-Dropdown weiter oben
   - lieber eine eigene Zeile als ein weiteres Element in eine ohnehin schon
   schmale Kopfzeile quetschen). */
.pokedex-modal-rarity {
    width: 100%;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    margin-bottom: 0.8rem;
    flex-shrink: 0;
    font-size: 0.85rem;
}
.pokedex-modal-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
    overflow-y: auto;
    flex: 1;
}
.pokedex-modal-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.pokedex-modal-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.pokedex-modal-card img { width: 100%; border-radius: 6px; display: block; }
.pokedex-modal-card-noimg {
    aspect-ratio: 245 / 337;
    background: var(--surface-muted);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-align: center;
}
.pokedex-modal-card-name { font-size: 0.72rem; font-weight: 600; line-height: 1.15; }
.pokedex-modal-card-set { font-size: 0.65rem; color: var(--text-muted); }
@media (max-width: 560px) {
    .pokedex-modal-content { padding: 1rem; max-height: 90vh; }
    .pokedex-modal-results { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}

/* --- Rechtliches: Footer-Link (Datenschutz) + Cookie-Consent-Banner
   (siehe includes/partials/legal_footer.php, assets/consent.js) --- */
.site-footer {
    text-align: center;
    padding: 1rem 1.5rem;
    font-size: 0.78rem;
}
.site-footer a { color: var(--text-muted); text-decoration: underline; }
.site-footer a:hover { color: var(--text); }

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    background: var(--panel-bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 14px rgba(0,0,0,0.12);
}
.cookie-banner p {
    margin: 0;
    flex: 1 1 320px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.cookie-banner p a { color: var(--primary); }
.cookie-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.cookie-banner-actions .btn { width: auto; margin-top: 0; white-space: nowrap; }
@media (max-width: 560px) {
    .cookie-banner { flex-direction: column; align-items: stretch; }
    .cookie-banner-actions { justify-content: stretch; }
    .cookie-banner-actions .btn { flex: 1 1 0; }
}

/* Funktions-Sperre ohne Cookie-Einwilligung (ausgeloggte Besucher, siehe
   assets/consent.js) - klar erkennbar ausgegraut + nicht klickbar statt nur
   optisch. */
.theme-toggle.is-locked,
.lang-select.is-locked {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
}

/* --- Datenschutz-Seite (datenschutz.php) --- */
.legal-page { max-width: 820px; }
.legal-page > .hint { color: var(--text-muted); margin: -0.5rem 0 1.5rem; }
.legal-section { margin-bottom: 1.25rem; }
.legal-section h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.legal-section p { margin: 0 0 0.7rem; line-height: 1.6; color: var(--text); }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a { color: var(--primary); }
.legal-table-wrap { overflow-x: auto; margin: 0.75rem 0; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.legal-table th, .legal-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.02em; }
.legal-table code { font-size: 0.78rem; background: var(--surface-muted); padding: 0.1rem 0.35rem; border-radius: 4px; }
.legal-back-link {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
}
.legal-back-link:hover { color: var(--primary); text-decoration: underline; }

/* --- Scan-Funktion (Kamera-Kartenerkennung, siehe assets/scan.js) --- */
.scan-modal-box { max-width: 480px; }
.scan-modal-body { display: flex; flex-direction: column; gap: 0.85rem; }
.scan-modal-title { margin: 0; font-size: 1.15rem; }

.scan-camera-view { display: flex; flex-direction: column; gap: 0.75rem; }
.scan-camera-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}
.scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fester Kartenrahmen (Standardformat 63:88mm ~ 0.716) mittig im Sichtfeld -
   die Karte darin auszurichten liefert dem Hash-Vergleich ein moeglichst
   formatfuellendes, wenig verzerrtes Bild. */
.scan-frame-overlay {
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 0.716;
    height: 84%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
/* Dezenter Pulse am Kartenrahmen, solange die automatische Hintergrund-
   Erkennung aktiv nach einer Karte sucht (siehe scan_core.js) - signalisiert
   "es passiert gerade was", ohne die Kamera-Ansicht mit einem Spinner zu
   unterbrechen (das wuerde bei jedem automatischen Versuch flackern). */
.scan-frame-overlay.scan-auto-live { animation: scan-frame-pulse 1.6s ease-in-out infinite; }
@keyframes scan-frame-pulse {
    0%, 100% { border-color: rgba(255, 255, 255, 0.85); }
    50% { border-color: var(--primary); }
}
.scan-hint { margin: 0; font-size: 0.85rem; color: var(--text-muted); text-align: center; }
.scan-error { margin: 0; font-size: 0.85rem; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 0.5rem 0.7rem; }
:root[data-theme="dark"] .scan-error { color: #fca5a5; background: #3f1414; border-color: #7f1d1d; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .scan-error { color: #fca5a5; background: #3f1414; border-color: #7f1d1d; }
}
.scan-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.scan-upload-label { text-align: center; cursor: pointer; }
.scan-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.scan-loading-view { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem 0; }
.scan-spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: scan-spin 0.8s linear infinite;
}
@keyframes scan-spin { to { transform: rotate(360deg); } }

.scan-results-view { display: flex; flex-direction: column; gap: 0.6rem; }
.scan-results-label { margin: 0; font-weight: 600; font-size: 0.95rem; }
.scan-candidates { display: flex; flex-direction: column; gap: 0.5rem; max-height: 55vh; overflow-y: auto; }
.scan-candidate {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font: inherit;
    color: var(--text);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.scan-candidate:hover, .scan-candidate:focus-visible { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface-muted)); }
.scan-candidate-image { width: 44px; height: 61px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: var(--panel-bg); }
.scan-candidate-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.scan-candidate-name { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-candidate-set { font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scan-added-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    border-radius: 10px;
    font-size: 0.88rem;
}
:root[data-theme="dark"] .scan-added-toast { background: #052e21; border-color: #065f46; color: #6ee7b7; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .scan-added-toast { background: #052e21; border-color: #065f46; color: #6ee7b7; }
}
.scan-added-toast.scan-toast-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
:root[data-theme="dark"] .scan-added-toast.scan-toast-warn { background: #3f2d0b; border-color: #78350f; color: #fcd34d; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .scan-added-toast.scan-toast-warn { background: #3f2d0b; border-color: #78350f; color: #fcd34d; }
}

.scan-footer-actions { display: flex; justify-content: center; }
.scan-footer-actions .btn-small { width: auto; }