/* === BUILD: Iter 5.999o (2026-04-27) === */
/* =============================================================================
   MatLuk FotoChallenge - Stylesheet
   Designprinzip: editorial-modern, dunkler Hintergrund, akzentuiertes Akzent-Gelb,
   Schriften System-basiert (kein externer Tracker, DSGVO-konform).
   Mobile-first.
   ============================================================================= */

:root {
    /* Typo */
    --font-display: ui-serif, Georgia, "Times New Roman", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;

    /* Sonstiges */
    --radius: 14px;
    --radius-sm: 8px;
    --container: 720px;
}

/* === DARK MODE (default - Instagram-inspiriert) === */
:root,
[data-theme="dark"] {
    --bg: #000000;
    --bg-elevated: #121212;
    --bg-card: #1a1a1a;
    --border: #262626;
    --border-strong: #363636;
    --text: #f5f5f5;
    --text-dim: #a8a8a8;
    --text-mute: #737373;
    --accent: #ffd23f;        /* Gelb als Akzent */
    --accent-warm: #ff8c42;
    --danger: #ed4956;        /* Insta-Rot */
    --success: #4ade80;
    --shadow: none;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04);
    --noise-opacity: 0;
}

/* === LIGHT MODE (Instagram weiß) === */
[data-theme="light"] {
    --bg: #fafafa;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;
    --border: #dbdbdb;
    --border-strong: #c7c7c7;
    --text: #262626;
    --text-dim: #737373;
    --text-mute: #8e8e8e;
    --accent: #ffb700;
    --accent-warm: #ff7b30;
    --danger: #ed4956;
    --success: #2dc26b;
    --shadow: none;
    --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.03);
    --noise-opacity: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* dezenter Korn-Effekt für Atmosphäre - nur Dark Mode */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: var(--noise-opacity);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

main, header, footer { position: relative; z-index: 1; }

.skip-link {
    position: absolute;
    left: -9999px;
    background: var(--accent);
    color: var(--bg);
    padding: 8px 12px;
    z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ====================== Header / Navigation ====================== */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    /* Iter 5.1: Safe-Area-Insets für PWA im Standalone-Modus */
    /* Damit das Header nicht hinter Statusbar/Notch verschwindet */
    padding-top: max(env(safe-area-inset-top, 0px) + 12px, 18px);
    padding-left: max(env(safe-area-inset-left, 0px), 22px);
    padding-right: max(env(safe-area-inset-right, 0px), 22px);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
    background: rgba(11, 13, 18, 0.85);
    position: sticky;
    top: 0;
    z-index: 50;
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}
.brand-mark {
    color: var(--accent);
    font-size: 18px;
    line-height: 1;
}
.brand-text {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: -0.02em;
    font-style: italic;
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nav-link {
    color: var(--text-dim);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--text); background: var(--bg-elevated); }
.nav-cta {
    background: var(--accent);
    color: var(--bg);
}
.nav-cta:hover { background: var(--accent); color: var(--bg); filter: brightness(1.1); }
.nav-button { background: none; border: none; cursor: pointer; font-family: inherit; }
.inline-form { display: inline; margin: 0; }

/* ====================== Main Layout ====================== */
main {
    flex: 1;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 40px 22px 80px;
}

/* ====================== Hero ====================== */
.hero {
    padding: 32px 0 48px;
}
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 11px;
    color: var(--accent);
    margin: 0 0 18px;
    font-weight: 600;
}
h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 7vw, 4.2rem);
    line-height: 1.05;
    margin: 0 0 24px;
    letter-spacing: -0.025em;
    font-weight: 500;
}
h1 em {
    font-style: italic;
    color: var(--accent);
}
.lede {
    font-size: 18px;
    color: var(--text-dim);
    max-width: 540px;
    margin: 0 0 32px;
}
.welcome {
    font-size: 18px;
    color: var(--text-dim);
    margin: 0 0 24px;
}

.cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ====================== Buttons ====================== */
.btn {
    display: inline-block;
    padding: 14px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s, background .15s, color .15s, border-color .15s;
    font-family: inherit;
    text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--accent);
    color: var(--bg);
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--text-dim); }

/* Iter v6.35: btn-secondary als Alias fuer btn-ghost.
   Wird in Duell-Result-Cards, Pack-Buttons und weiteren Stellen verwendet. */
.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--text-dim); }
.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: var(--bg); }
.btn-full { width: 100%; }

/* ====================== Auth-Karte (Login/Register) ====================== */
.auth-card {
    max-width: 460px;
    margin: 24px auto;
    padding: 40px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.auth-card h1 { font-size: clamp(2rem, 5vw, 2.8rem); }

.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.field input {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 13px 14px;
    color: var(--text);
    font-size: 16px; /* >=16px verhindert Zoom auf iOS */
    font-family: inherit;
    transition: border-color .15s, background .15s;
}
.field input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-elevated);
}
.field small {
    color: var(--text-mute);
    font-size: 12px;
}

.checkbox-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
}
.checkbox-row input { margin-top: 4px; accent-color: var(--accent); }
.checkbox-row a { color: var(--accent); }

.form-foot {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--text-dim);
}
.form-foot a { color: var(--accent); }

/* ====================== Passwort-Stärke-Anzeige ====================== */
.pw-meter {
    margin-top: 8px;
}
.pw-meter-bar {
    height: 6px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.pw-meter-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--danger);
    transition: width .25s ease, background .25s ease;
    border-radius: 999px;
}
.pw-label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-mute);
    font-weight: 600;
}
.pw-hints {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-mute);
}
.pw-hints li::before { content: "· "; color: var(--accent); }

/* Stärke-Stufen-Farben */
.pw-strength-0 #pw-bar { width: 12%; background: var(--danger); }
.pw-strength-1 #pw-bar { width: 30%; background: var(--danger); }
.pw-strength-2 #pw-bar { width: 55%; background: var(--accent-warm); }
.pw-strength-3 #pw-bar { width: 80%; background: var(--accent); }
.pw-strength-4 #pw-bar { width: 100%; background: var(--success); }

/* ====================== Alerts ====================== */
.alert {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    margin: 0 0 20px;
    font-size: 14px;
    border: 1px solid;
}
.alert-error {
    background: rgba(255, 91, 110, 0.08);
    border-color: rgba(255, 91, 110, 0.4);
    color: #ffb3bb;
}
.alert ul { margin: 6px 0 0; padding-left: 20px; }

/* ====================== Install-Karte ====================== */
.install-card {
    margin-top: 64px;
    padding: 32px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.install-card h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 28px;
    margin: 0 0 8px;
}
.install-card > p { color: var(--text-dim); margin: 0 0 24px; }
.install-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.install-tabs .tab {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 10px 16px;
    border-radius: 999px;
    font: 600 13px var(--font-body);
    cursor: pointer;
    transition: all .15s;
}
.install-tabs .tab:hover { color: var(--text); }
.install-tabs .tab.is-active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
.tab-panel ol { padding-left: 22px; }
.tab-panel li { margin-bottom: 8px; }
.tab-panel strong { color: var(--accent); }
.hint { color: var(--text-mute); font-size: 13px; font-style: italic; }

/* ====================== Account / Info-Liste ====================== */
.info-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 24px;
    margin: 24px 0;
    padding: 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.info-list dt {
    color: var(--text-mute);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    align-self: center;
}
.info-list dd { margin: 0; }

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.tag-warn { background: rgba(255, 140, 66, 0.15); color: var(--accent-warm); }

.divider { border: none; height: 1px; background: var(--border); margin: 32px 0; }

/* ====================== Legal-Seiten ====================== */
.legal { line-height: 1.7; }
.legal h1 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    margin-bottom: 32px;
}
.legal h2 {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    margin-top: 36px;
    font-size: 22px;
}
.legal a { color: var(--accent); }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }

/* ====================== Footer ====================== */
.site-footer {
    padding: 24px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-mute);
}
.site-footer a {
    color: var(--text-dim);
    text-decoration: none;
}
.site-footer a:hover { color: var(--accent); }
.footer-mark {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ====================== Mobile-Anpassungen ====================== */
@media (max-width: 540px) {
    .site-header { padding: 14px 16px; }
    .brand-text { font-size: 18px; }
    main { padding: 24px 16px 60px; }
    .auth-card { padding: 28px 22px; }
    .install-card { padding: 24px 20px; }
    .footer-mark { margin-left: 0; flex-basis: 100%; text-align: center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ====================================================================
   ITERATION 1: QUEST + KAMERA + ADMIN
   ==================================================================== */

/* Body Padding für Bottom-Nav */
body.has-bottom-nav main { padding-bottom: 100px; }

/* ====== Top-Nav (Energie + Admin) ====== */
.top-nav { display: flex; align-items: center; gap: 8px; }
.energy-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 12px;
    color: var(--accent);
    font: 600 13px var(--font-body);
    text-decoration: none;
}
.energy-pill small { color: var(--text-mute); font-weight: 400; margin-left: 2px; }
.admin-link { background: rgba(255, 210, 63, 0.12); color: var(--accent); }

/* ====== Bottom-Nav (TikTok-Style) ====== */
.bottom-nav {
    /* Iter v6.45d: Nav unverrueckbar am Viewport-Boden nageln.
       !important + eigener Stacking-Context (translateZ) + will-change schuetzen
       vor iOS-PWA-Containing-Block-Bugs bei offenem Modal. */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: translateZ(0) !important;
    will-change: transform;
    background: rgba(11, 13, 18, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0));
    z-index: 100;
}
.bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text-mute);
    text-decoration: none;
    padding: 6px 4px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.15s;
}
.bn-item.is-active { color: var(--accent); }
.bn-item:hover { color: var(--text); }
.bn-form { flex: 1; margin: 0; }
.bn-button {
    width: 100%; background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 10px;
}
.bn-cta {
    transform: translateY(-12px);
    flex-direction: column;
    min-height: auto !important;
}
.bn-cta-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--accent);
    color: var(--bg);
    border-radius: 50%;
    box-shadow: 0 8px 24px -6px rgba(255, 210, 63, 0.5);
    transition: transform 0.15s;
    flex-shrink: 0;
}
.bn-cta:hover .bn-cta-circle,
.bn-cta:active .bn-cta-circle { transform: scale(1.08); }
.bn-cta span { display: none; }

@media (max-width: 540px) {
    .bn-item span { font-size: 9px; }
}

/* ====== Quest-Liste ====== */
.quests-page { padding-bottom: 32px; }
.quests-head { margin: 24px 0 16px; }
.quests-head h1 { font-size: clamp(2rem, 5vw, 2.6rem); }

.daily-card {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.15), rgba(255, 140, 66, 0.1));
    border: 1px solid rgba(255, 210, 63, 0.3);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
.daily-tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--accent);
    color: var(--bg);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.daily-card h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 32px;
    margin: 0 0 8px;
}
.daily-card p { color: var(--text-dim); margin: 0 0 16px; }

.cat-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 0 16px;
    margin: 0 -22px 16px;
    padding-left: 22px;
    padding-right: 22px;
    scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
    flex: 0 0 auto;
    background: var(--bg-card);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 14px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s;
}
.cat-tab:hover { color: var(--text); }
.cat-tab.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.cat-icon { margin-right: 4px; }

.quest-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.quest-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.15s, border-color 0.15s;
}
.quest-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.quest-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.quest-card h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}
.quest-card p {
    color: var(--text-dim);
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.quest-card-foot { margin-top: 12px; font-size: 12px; }

.diff {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.diff-easy { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.diff-medium { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.diff-hard { background: rgba(255, 140, 66, 0.15); color: var(--accent-warm); }
.diff-very_hard { background: rgba(255, 91, 110, 0.15); color: var(--danger); }
.diff-legendary {
    background: linear-gradient(90deg, rgba(255, 210, 63, 0.2), rgba(255, 140, 66, 0.2));
    color: var(--accent);
    box-shadow: 0 0 12px rgba(255, 210, 63, 0.2);
}
.cost { color: var(--accent); font-size: 13px; font-weight: 600; }
.stars { color: var(--text-mute); font-size: 13px; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.badge-pending { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.badge-stars { color: var(--accent); letter-spacing: 1px; }
.badge-stars .dim { color: var(--border); }
.badge-rejected { background: rgba(255, 91, 110, 0.12); color: var(--danger); }
.badge-new { background: rgba(255, 210, 63, 0.12); color: var(--accent); }

.empty { color: var(--text-mute); text-align: center; padding: 40px; }

/* ====== Quest-Detail ====== */
.quest-page { max-width: 720px; margin: 0 auto; }
.back-link {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 16px;
}
.back-link:hover { color: var(--accent); }
.quest-hero { margin-bottom: 24px; }
.quest-hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 12px 0 8px; }
.quest-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.quest-story {
    background: var(--bg-card);
    border-left: 3px solid var(--accent);
    padding: 20px 24px;
    border-radius: 4px;
    margin-bottom: 24px;
    font-style: italic;
    color: var(--text-dim);
    line-height: 1.7;
}

/* Capture-Card */
.capture-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}
.capture-card h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 24px;
    margin: 0 0 8px;
}
.capture-init {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 24px 0;
}
.capture-init .btn { flex: 1 1 200px; }

.camera-stage, .preview-stage {
    background: black;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    position: relative;
    margin-bottom: 16px;
}
#camera-video, #preview-img {
    width: 100%; height: 100%; object-fit: cover;
}
.camera-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.camera-controls .btn { padding: 8px 14px; font-size: 13px; }

.btn-shutter {
    width: 64px; height: 64px;
    padding: 0;
    border-radius: 50%;
    background: white;
    border: 4px solid white;
    flex: 0 0 auto;
}
.shutter-ring {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid var(--bg);
    background: white;
    transition: transform 0.1s;
}
.btn-shutter:active .shutter-ring { transform: scale(0.92); }

/* Eigene Versuche */
.own-list { margin-top: 32px; }
.own-list h2 { font-family: var(--font-display); font-style: italic; }
.sub-list { list-style: none; padding: 0; margin: 0; }
.sub-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}
.sub-row img {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.sub-meta { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sub-meta small { color: var(--text-mute); font-size: 11px; }
.btn-link-danger {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font: 600 13px var(--font-body);
    padding: 6px;
}

/* Pinnwand */
.wall-page { padding-bottom: 32px; }
.wall-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}
.wall-id { display: flex; gap: 16px; align-items: center; }
.avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-warm));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--bg);
    font-weight: bold;
}
.wall-id h1 { margin: 0; font-size: 24px; }
.wall-id p { margin: 4px 0 0; color: var(--text-dim); font-size: 14px; }
.visibility-line { color: var(--text-mute); font-size: 13px; }
.visibility-line a { color: var(--accent); }

.wall-grid {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.wall-tile {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background: var(--bg-card);
}
.wall-tile img { width: 100%; height: 100%; object-fit: cover; }
.wall-tile-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: white;
    font-size: 14px;
    text-align: center;
}
.wall-tile.sub-pending img { opacity: 0.55; }
.wall-tile.sub-rejected img { opacity: 0.4; filter: grayscale(0.8); }

.empty-state { text-align: center; color: var(--text-mute); padding: 48px 16px; }
.empty-state a { color: var(--accent); }

/* Account Energie-Card */
.account-page { max-width: 600px; }
.energy-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin: 16px 0 24px;
}
.energy-big { font-size: 28px; font-weight: bold; color: var(--accent); }
.energy-big small { color: var(--text-mute); font-size: 16px; }
.energy-bar {
    height: 6px; background: var(--bg-card); border-radius: 999px;
    overflow: hidden; margin-top: 8px;
}
.energy-bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width 0.3s;
}

.austria-mark { color: var(--text-mute); font-weight: 500; }

/* Alert-Variants */
.alert-info { background: rgba(96, 165, 250, 0.08); border-color: rgba(96, 165, 250, 0.3); color: #93c5fd; }
.alert-warn { background: rgba(255, 140, 66, 0.08); border-color: rgba(255, 140, 66, 0.3); color: #fdba74; }
.alert-success { background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.3); color: #86efac; padding: 14px 16px; border: 1px solid; border-radius: var(--radius-sm); margin-bottom: 16px; }

/* Visibility-Form */
.visibility-form { margin: 12px 0; }

/* ============== ADMIN-LAYOUT ============== */
.admin-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}
.admin-side {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    align-self: start;
    position: sticky;
    top: 80px;
}
.admin-side h2 {
    font-family: var(--font-display);
    font-style: italic;
    margin: 0 0 16px;
    color: var(--accent);
}
.admin-side nav { display: flex; flex-direction: column; gap: 4px; }
.admin-side nav a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    text-decoration: none;
    font-size: 14px;
}
.admin-side nav a:hover { background: var(--bg); color: var(--text); }
.admin-side nav a.is-active { background: var(--accent); color: var(--bg); font-weight: 600; }
.back-to-app { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.admin-main { min-width: 0; }
.admin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }

@media (max-width: 768px) {
    .admin-layout { grid-template-columns: 1fr; }
    .admin-side { position: static; }
    .admin-side nav { flex-direction: row; flex-wrap: wrap; }
    .admin-side nav a { font-size: 13px; padding: 6px 10px; }
}

/* KPI-Karten */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-decoration: none;
    color: var(--text);
    display: block;
}
.kpi-num { display: block; font-size: 32px; font-weight: bold; }
.kpi-label { color: var(--text-dim); font-size: 13px; }
.kpi-warn { border-color: rgba(255, 140, 66, 0.4); }
.kpi-warn .kpi-num { color: var(--accent-warm); }

/* Admin-Tabs (Status-Filter) */
.admin-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.admin-tabs a {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13px;
}
.admin-tabs a.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Submission-Grid */
.admin-sub-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.admin-sub-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.15s, opacity 0.15s;
}
.admin-sub-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.admin-sub-card.is-locked { opacity: 0.5; }
.admin-sub-card a { text-decoration: none; color: var(--text); display: block; }
.admin-sub-card img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
}
.admin-sub-meta { padding: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.admin-sub-meta small { color: var(--text-mute); font-size: 11px; }
.lock-info { color: var(--accent-warm); font-size: 11px; }
.stars-line { color: var(--accent); }

/* Review-Form */
.review-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }
@media (max-width: 720px) { .review-grid { grid-template-columns: 1fr; } }
.review-photo { background: black; border-radius: var(--radius); overflow: hidden; }
.review-photo img { width: 100%; display: block; }
.quest-meta-line { color: var(--text-dim); font-size: 14px; }
.star-picker { display: flex; flex-direction: column; gap: 4px; margin: 16px 0; }
.star-opt { cursor: pointer; padding: 8px 12px; border-radius: var(--radius-sm); transition: background 0.1s; }
.star-opt:hover { background: var(--bg); }
.star-opt input { margin-right: 8px; accent-color: var(--accent); }
.star-opt:has(input:checked) { background: var(--bg); border: 1px solid var(--accent); }
.star-opt span { color: var(--accent); font-size: 18px; letter-spacing: 2px; }
.star-opt .dim { color: var(--border); }
.review-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* Admin-Tables */
/* Iter 5.34: Tabellen-Wrap mit horizontalem Scroll bei Bedarf */
.admin-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0;
    border-radius: 8px;
    background: var(--bg-card);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 14px;
    /* KEIN min-width - Tabelle passt sich an Container an */
}
.admin-table-wrap .admin-table { margin: 0; }
.admin-table th,
.admin-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    /* KEIN nowrap pauschal - Text darf umbrechen */
    vertical-align: top;
}
.admin-table th {
    color: var(--text-mute);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    background: var(--bg-elevated);
    white-space: nowrap;  /* Headers nowrap, sind kurz */
    position: sticky;
    top: 0;
    z-index: 1;
}
.admin-table td input,
.admin-table td select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 8px;
    color: var(--text);
    font: 14px var(--font-body);
    max-width: 100%;
    box-sizing: border-box;
}
/* Aktions-Spalten: Buttons sollen nicht umbrechen */
.admin-table td.actions {
    white-space: nowrap;
}
/* Schmale, fixe Werte: nicht umbrechen */
.admin-table td.numeric,
.admin-table td.compact {
    white-space: nowrap;
    text-align: right;
}
/* Lange Texte: maximal so breit wie sinnvoll */
.admin-table td {
    max-width: 380px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.admin-table small {
    display: block;
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}

.admin-form { max-width: 720px; }
.admin-form-inline { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; padding: 16px; background: var(--bg-card); border-radius: var(--radius); margin-top: 24px; }
.admin-form-inline input { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 8px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: baseline; margin-right: 4px; }
.dot-ok { background: var(--success); }
.dot-off { background: var(--text-mute); }
.dot-btn { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; cursor: pointer; font-family: inherit; }
.dot-btn-on { background: var(--success); color: var(--bg); border-color: var(--success); }
.dot-btn-off { color: var(--text-mute); }
.btn-sm { padding: 6px 10px; font-size: 12px; }

textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--text);
    font: 14px var(--font-body);
    resize: vertical;
    min-height: 80px;
}

/* ====================================================================
   ITERATION 1.5: MOBILE-FIXES
   ==================================================================== */

/* Niemals horizontal scrollen */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Bilder/Videos passen sich automatisch an */
img, video, svg {
    max-width: 100%;
    height: auto;
}

/* Keine zu breiten Elemente */
* { min-width: 0; }

/* Header-Inhalte: KEIN Wrap mehr - alles in einer Reihe (Brand links, Nav rechts) */
.site-header {
    flex-wrap: nowrap;
    gap: 8px;
}
.top-nav {
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 0;  /* damit Nav nie schmaler wird */
}
.brand {
    flex: 1;
    min-width: 0;  /* damit Brand-Text gekuerzt werden kann */
    overflow: hidden;
}
.brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile: kompakter Header und kleinere Schriften */
@media (max-width: 540px) {
    main { padding: 16px 14px 90px; }
    body.has-bottom-nav main { padding-bottom: 110px; }

    /* Iter 5.1: Safe-Area auch im Mobile-Override drin */
    .site-header {
        padding: 10px 14px;
        padding-top: max(env(safe-area-inset-top, 0px) + 8px, 10px);
        padding-left: max(env(safe-area-inset-left, 0px) + 4px, 14px);
        padding-right: max(env(safe-area-inset-right, 0px) + 4px, 14px);
        gap: 6px;
        flex-wrap: nowrap;  /* AUF MOBILE EXPLIZIT NOWRAP */
        /* Iter v6.40: backdrop-filter rausnehmen damit nav-bell-dropdown
           wirklich position:fixed sein kann (sonst sind Kinder relativ zum
           Header gehalten und das Bottom-Sheet bleibt im Header oben kleben). */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        /* Stattdessen mehr Hintergrund-Opacity damit's trotzdem solid aussieht */
        background: var(--bg);
    }
    .brand-text { font-size: 16px; }
    .brand-mark { font-size: 14px; }
    /* Auf sehr schmalen Phones (≤380): brand-text noch kleiner */
    .top-nav { gap: 4px; }

    .energy-pill { padding: 5px 10px; font-size: 12px; }
    .nav-link { padding: 6px 10px; font-size: 13px; }

    /* Hero/Headlines kleiner */
    h1 { font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.15; }
    .quests-head h1 { font-size: clamp(1.6rem, 6vw, 2rem); }
    .quest-hero h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .daily-card h2 { font-size: 24px; }

    /* Cards kleiner padden */
    .auth-card,
    .quest-page,
    .capture-card,
    .quest-story,
    .daily-card { padding: 18px 16px; }

    /* Quest-Grid: eine Spalte */
    .quest-grid { grid-template-columns: 1fr; gap: 12px; }
    .quest-card { padding: 14px; }
    .quest-card h3 { font-size: 16px; }

    /* Wall: 3 Spalten bleibt, aber kleinere Gaps */
    .wall-grid { gap: 2px; }

    /* Buttons im Capture-Init untereinander */
    .capture-init { flex-direction: column; }
    .capture-init .btn { width: 100%; }

    /* Sub-Row kompakter */
    .sub-row img { width: 56px; height: 56px; }

    /* Account-Page nicht überzentriert */
    .account-page { padding: 0; }

    /* Field-Row auf Mobile: untereinander */
    .field-row { grid-template-columns: 1fr; }

    /* Admin: Sidebar-Nav als horizontale Pills */
    .admin-side { padding: 12px; }
    .admin-side h2 { font-size: 18px; margin-bottom: 8px; }

    /* Camera-Stage volle Breite */
    .camera-stage,
    .preview-stage { aspect-ratio: 4 / 5; }

    /* Tabellen-Scroll bei Admin */
    .admin-table { font-size: 12px; }
    .admin-main { overflow-x: auto; }
}

/* Mini-Phones */
@media (max-width: 380px) {
    .nav-link { padding: 5px 8px; font-size: 12px; }
    .brand-text { font-size: 15px; }
    .energy-pill span { font-size: 11px; }
    .bn-item span { font-size: 9px; letter-spacing: 0; }
}

/* iOS Safari: Safe-Area unten - bewusst 0 (kein Polster) */
@supports (padding: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }
}

/* Touch-friendly: Mindestgröße 40x40 für klickbare Elemente
   ABER: Plus-CTA-Button (.bn-cta) ausnehmen, sonst bricht der Translate-Trick! */
.bn-item:not(.bn-cta), .nav-link, .btn, .star-opt {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-shutter { min-height: 64px; }

/* ====================================================================
   SUPPORT-SEITE
   ==================================================================== */
.support-page { max-width: 720px; margin: 0 auto; }
.support-head { margin-bottom: 24px; }
.support-head h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }

.faq-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 32px; }
.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    transition: background .15s;
}
.faq-item:hover { background: var(--bg-elevated); }
.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    color: var(--text);
    padding: 4px 0;
    position: relative;
    padding-left: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
    content: "+";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    top: 2px;
    transition: transform .15s;
    width: 20px;
    text-align: center;
}
.faq-item[open] summary::before { content: "−"; }
.faq-item p {
    margin: 12px 0 0;
    color: var(--text-dim);
    line-height: 1.6;
}

.support-form select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--text);
    font: 14px var(--font-body);
    width: 100%;
}

/* ====================================================================
   PWA INSTALL HINT
   ==================================================================== */
.pwa-hint {
    margin: 16px 0 24px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.12), rgba(255, 140, 66, 0.08));
    border: 1px solid rgba(255, 210, 63, 0.3);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.5;
}
.pwa-hint strong { color: var(--accent); }

/* PWA-Hint AUSBLENDEN, wenn als App installiert */
@media (display-mode: standalone) {
    .pwa-hint { display: none !important; }
}

/* Account-Lösch-Bestätigung Warning */
.alert-danger {
    background: rgba(255, 91, 110, 0.1);
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}
.alert-danger p { color: #fda4ac; margin: 4px 0; }
.alert-danger ul { color: #fda4ac; }

/* ====================================================================
   ENERGIE-STRIP (immer sichtbarer Balken oben auf Game-Seiten)
   ==================================================================== */
.energy-strip {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.08), rgba(255, 140, 66, 0.05));
    border: 1px solid rgba(255, 210, 63, 0.25);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin: 0 0 20px;
    box-shadow: 0 4px 14px -8px rgba(255, 210, 63, 0.3);
}

.energy-strip-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.energy-strip-icon {
    font-size: 20px;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(255, 210, 63, 0.5));
}

.energy-strip-text {
    font-size: 17px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.02em;
}

.energy-strip-text .dim {
    color: var(--text-mute);
    font-weight: 400;
    margin-left: 2px;
}

.energy-strip-timer {
    margin-left: auto;
    color: var(--text-dim);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    background: var(--bg-card);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
}

.energy-strip-timer #energy-strip-countdown {
    color: var(--accent);
    font-weight: 600;
}

.energy-strip-bar {
    display: flex;
    gap: 3px;
    align-items: center;
}

.energy-pip {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 2px;
    transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.energy-pip.is-full {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-warm) 100%);
    box-shadow: 0 0 6px rgba(255, 210, 63, 0.5);
}

/* Animation wenn ein neuer Punkt dazukommt */
.energy-pip.just-filled {
    animation: energy-pop 0.7s ease-out;
}

@keyframes energy-pop {
    0% {
        transform: scaleY(0.5);
        background: var(--accent);
        box-shadow: 0 0 0 rgba(255, 210, 63, 0);
    }
    50% {
        transform: scaleY(1.6);
        background: #ffe573;
        box-shadow: 0 0 16px rgba(255, 210, 63, 0.9);
    }
    100% {
        transform: scaleY(1);
    }
}

/* Auf sehr schmalen Screens: kompakter */
@media (max-width: 380px) {
    .energy-strip { padding: 10px 14px; margin-bottom: 14px; }
    .energy-strip-text { font-size: 15px; }
    .energy-strip-timer { font-size: 11px; padding: 3px 8px; }
    .energy-pip { height: 6px; }
}

/* ====================================================================
   ITERATION 2: BOX-SYSTEM
   ==================================================================== */

/* Box-Grid auf der Quests-Übersicht */
.box-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.box-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    color: var(--text);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    overflow: hidden;
    min-height: 200px;
}

.box-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px -10px rgba(255, 210, 63, 0.4);
}

.box-card.is-locked {
    opacity: 0.65;
}
.box-card.is-locked:hover {
    opacity: 1;
}
.box-card.is-expired {
    border-color: rgba(255, 91, 110, 0.3);
}

.box-lock-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: var(--bg-elevated);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid var(--border);
    z-index: 2;
}
.box-lock-expired { background: rgba(255, 91, 110, 0.15); border-color: var(--danger); }

.box-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.box-icon {
    font-size: 28px;
    line-height: 1;
}

.box-type-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.box-type-tutorial { background: rgba(74, 222, 128, 0.15); color: var(--success); border-color: var(--success); }
.box-type-pokale { background: rgba(255, 140, 66, 0.15); color: var(--accent-warm); border-color: var(--accent-warm); }
.box-type-event { background: rgba(255, 210, 63, 0.15); color: var(--accent); border-color: var(--accent); }
.box-type-standard { background: var(--bg-elevated); }

.box-name {
    font-size: 18px;
    margin: 4px 0;
    line-height: 1.25;
}

.box-desc {
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.box-progress {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.box-progress-bar {
    height: 6px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 6px;
}
.box-progress-bar.large { height: 12px; margin-bottom: 12px; }
.box-progress-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-warm));
    transition: width 0.4s;
}

.box-progress-text {
    font-size: 12px;
    color: var(--text-dim);
}
.box-progress-text strong { color: var(--text); }

.box-locked-info {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-dim);
}
.box-locked-reason {
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 4px;
}
.box-locked-meta {
    margin: 0;
    color: var(--text-mute);
}

/* === BOX-DETAIL-SEITE === */
.box-detail-page { max-width: 800px; margin: 0 auto; }

.box-hero {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin: 16px 0 24px;
}
.box-hero-icon {
    font-size: 56px;
    line-height: 1;
    flex-shrink: 0;
}
.box-hero h1 { margin: 6px 0 4px; }

.event-banner {
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-weight: 600;
}
.event-active {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.15), rgba(255, 140, 66, 0.1));
    border: 1px solid rgba(255, 210, 63, 0.4);
    color: var(--accent);
}
.event-ended {
    background: rgba(255, 91, 110, 0.1);
    border: 1px solid var(--danger);
    color: var(--danger);
}

.unlock-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 28px;
}
.unlock-panel h2 { margin-top: 0; }

.unlock-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.unlock-option {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
}
.unlock-option h3 { margin-top: 0; font-size: 16px; }
.unlock-option p { font-size: 14px; }

.hint-warn {
    color: var(--accent-warm);
    font-weight: 500;
}

.quests-preview-head {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 18px;
    font-weight: 500;
}

.box-progress-card {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.08), rgba(255, 140, 66, 0.05));
    border: 1px solid rgba(255, 210, 63, 0.25);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 24px;
}
.box-progress-card h2 { margin-top: 0; font-size: 18px; }
.box-progress-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--text-dim);
}
.box-progress-stats strong { color: var(--text); }

/* Box-Detail Quest-Cards: schlicht halten (Iter 1.6-Stil) */
.quest-card.is-locked {
    opacity: 0.6;
    cursor: not-allowed;
}
.quest-card.is-completed {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.06), transparent 60%);
    position: relative;
}
.quest-card.is-completed::before {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: var(--success);
    color: var(--bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
}
.quest-card-meta {
    color: var(--text-mute);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.alert-success {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid var(--success);
    color: var(--success);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin: 0 0 20px;
}

/* === DAILY-CARD Updates === */
.daily-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}
.reward-pill {
    font-size: 12px;
    padding: 4px 10px;
    background: var(--bg-elevated);
    border-radius: 999px;
    color: var(--accent);
    font-weight: 600;
}
.energy-cost.free {
    color: var(--success);
    background: rgba(74, 222, 128, 0.15);
}
.daily-done {
    color: var(--success);
    font-weight: 600;
    margin: 8px 0 0;
}
.daily-pending {
    color: var(--accent);
    font-weight: 600;
    margin: 8px 0 0;
}

/* ====================================================================
   PINNWAND - STATS-CARDS
   ==================================================================== */
.wall-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 20px 0 28px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s;
}
.stat-card:hover { border-color: var(--accent); }

.stat-icon {
    font-size: 24px;
    line-height: 1;
}
.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.stat-label {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stat-label .dim { font-size: 10px; }

.stat-stars { background: linear-gradient(135deg, var(--bg-card), rgba(255, 210, 63, 0.05)); }
.stat-pokale { background: linear-gradient(135deg, var(--bg-card), rgba(255, 140, 66, 0.05)); }
.stat-streak { background: linear-gradient(135deg, var(--bg-card), rgba(255, 91, 110, 0.05)); }
.stat-wallet {
    background: linear-gradient(135deg, var(--bg-card), rgba(74, 222, 128, 0.05));
    border-color: rgba(74, 222, 128, 0.3);
}

.wall-section-head {
    margin-top: 28px;
    margin-bottom: 12px;
    color: var(--text-dim);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wall-tile-rejected {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(255, 91, 110, 0.05);
    border: 1px dashed var(--danger);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--danger);
    gap: 4px;
}
.wall-tile-rejected span { font-size: 24px; }
.wall-tile-rejected small {
    font-size: 9px;
    color: var(--text-mute);
    padding: 0 8px;
    text-align: center;
}

/* Mobile-Anpassungen für Iter 2 */
@media (max-width: 540px) {
    .box-grid { grid-template-columns: 1fr; gap: 10px; }
    .box-card { padding: 14px; min-height: auto; }
    .box-name { font-size: 16px; }

    .box-hero { flex-direction: row; gap: 12px; align-items: center; }
    .box-hero-icon { font-size: 40px; }
    .box-hero h1 { font-size: 22px; }

    .unlock-options { grid-template-columns: 1fr; }
    .wall-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 10px 12px; }
    .stat-value { font-size: 22px; }
    .stat-icon { font-size: 18px; }

    .box-progress-stats { gap: 12px; font-size: 13px; }
}

/* ====================================================================
   ITERATION 2.3: REVIEW UI (Bestanden / Abgelehnt)
   ==================================================================== */
.review-tabs {
    display: flex;
    gap: 4px;
    margin: 20px 0 16px;
    border-bottom: 2px solid var(--border);
}

.review-tabs .tab {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 12px 16px;
    color: var(--text-dim);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    margin-bottom: -2px;
}
.review-tabs .tab:hover { color: var(--text); }
.review-tabs .tab-pass.active {
    background: var(--bg-card);
    color: var(--success);
    border-color: var(--success);
    border-bottom: 2px solid var(--bg-card);
}
.review-tabs .tab-reject.active {
    background: var(--bg-card);
    color: var(--danger);
    border-color: var(--danger);
    border-bottom: 2px solid var(--bg-card);
}

.review-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 18px;
    margin-top: -1px;
}

.reward-preview {
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 14px;
}
.reward-preview p { margin: 0 0 8px; font-size: 14px; }
.reward-preview ul { margin: 0; padding-left: 20px; }
.reward-preview li { margin: 2px 0; font-size: 14px; }

.reject-info {
    background: rgba(255, 140, 66, 0.08);
    border: 1px solid rgba(255, 140, 66, 0.3);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 14px;
}
.reject-info p { margin: 4px 0; font-size: 14px; }

.review-form select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: 14px var(--font-body);
}

.required { color: var(--danger); }

/* Anzeige der Sub-Status auf der Pinnwand: rejected ohne Foto */
.sub-rejected-tile {
    width: 56px;
    height: 56px;
    background: rgba(255, 91, 110, 0.1);
    border: 1px dashed var(--danger);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger);
    font-size: 22px;
    flex-shrink: 0;
}

/* Rejection-Info auf Quest-Detail */
.rejection-info {
    background: rgba(255, 91, 110, 0.05);
    border-left: 3px solid var(--danger);
    padding: 8px 12px;
    margin-top: 6px;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
}
.rejection-info strong { color: var(--danger); }
.mod-note {
    font-style: italic;
    color: var(--text-dim);
    margin: 4px 0 0;
}

/* Badge-Variante für Iter 2 */
.badge-passed {
    background: rgba(74, 222, 128, 0.15);
    color: var(--success);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 540px) {
    .review-tabs .tab { padding: 10px 8px; font-size: 13px; }
    .review-form { padding: 14px; }
}

/* Admin-Submission-Liste: Status-Linien */
.admin-sub-card .reject-line {
    color: var(--danger);
    font-size: 11px;
    font-weight: 600;
}
.admin-sub-card .daily-line {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.admin-sub-card .stars-line {
    color: var(--success);
    font-size: 12px;
    font-weight: 600;
}
.admin-sub-rejected-tile {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(255, 91, 110, 0.05);
    border: 1px dashed var(--danger);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger);
    font-size: 32px;
}

/* ====================================================================
   ITERATION 2.4: ADMIN-EXTENSIONS
   ==================================================================== */
.admin-side-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 0;
}

.admin-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 16px 0;
}
.admin-fieldset legend {
    padding: 0 8px;
    font-size: 13px;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.row-inactive { opacity: 0.5; }

.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 32px 0;
}

/* Quest-Zuordnung Grid */
.quest-assign-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 16px;
}

.quest-assign-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.quest-assign-list li {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.quest-assign-list li:last-child { border-bottom: none; }
.quest-assign-list strong { flex: 1; }

/* User-Detail */
.user-detail-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 0 24px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.user-detail-head .avatar {
    width: 64px;
    height: 64px;
    font-size: 28px;
}
.badge-admin { background: rgba(255, 91, 110, 0.15); color: var(--danger); padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-mod { background: rgba(255, 210, 63, 0.15); color: var(--accent); padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }

.user-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.adjust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.adjust-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
}
.adjust-form h3 {
    margin-top: 0;
    font-size: 16px;
    color: var(--accent);
}

.input-mini {
    padding: 4px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 12px;
    width: 100px;
}

/* Daily-Kalender */
.daily-calendar td {
    vertical-align: top;
    padding: 10px;
}
.day-today {
    background: rgba(255, 210, 63, 0.05);
    border-left: 3px solid var(--accent);
}

/* Quick-Actions im Dashboard */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 16px 0 24px;
}
.quick-action {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 14px;
    text-decoration: none;
    color: var(--text);
    text-align: center;
    transition: border-color 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.quick-action:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.qa-icon { font-size: 32px; }
.qa-label { font-size: 13px; font-weight: 600; }

/* Stats-Row */
.stats-row {
    display: flex;
    gap: 12px;
    margin: 16px 0 24px;
    flex-wrap: wrap;
}
.kpi-card {
    flex: 1;
    min-width: 150px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}
.kpi-card.kpi-good { border-color: var(--success); background: rgba(74, 222, 128, 0.05); }
.kpi-card.kpi-bad { border-color: var(--danger); background: rgba(255, 91, 110, 0.05); }
.kpi-card .kpi-label { display: block; font-size: 12px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.kpi-card .kpi-value { display: block; font-size: 32px; font-weight: 700; }

@media (max-width: 768px) {
    .quest-assign-grid { grid-template-columns: 1fr; }
    .user-stats-grid { grid-template-columns: 1fr 1fr; }
    .adjust-grid { grid-template-columns: 1fr; }
}

/* ====================================================================
   ITERATION 2.5b: PROFILKOPF KOMPAKT
   ==================================================================== */

.profile-head-compact {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 0 14px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.profile-id-block {
    flex: 1;
    min-width: 0;
}
.profile-id-block h1 {
    font-size: 18px;
    margin: 0;
    line-height: 1.2;
}
.profile-id-block .profile-handle {
    font-size: 12px;
    color: var(--text-mute);
    margin: 2px 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inline-Stats – nebeneinander, dezent */
.profile-stats-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
}
.stat-inline {
    color: var(--text);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
a.stat-inline:hover {
    color: var(--accent);
}

/* Avatar-Größen kompakter */
.avatar.avatar-small {
    width: 48px;
    height: 48px;
    font-size: 22px;
    flex-shrink: 0;
}
.profile-image-small {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
    display: block;
}

@media (max-width: 540px) {
    .profile-head-compact {
        padding: 10px 12px;
        gap: 12px;
    }
    .profile-id-block h1 { font-size: 17px; }
    .profile-stats-inline { gap: 8px; font-size: 12px; }
}

/* ====================================================================
   ITERATION 2.5d: BOX-CARDS im Quest-Card-Stil
   ==================================================================== */

/* Box-Type-Pills (im selben Stil wie .diff-easy etc.) */
.diff-tutorial { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.diff-standard { background: rgba(255, 210, 63, 0.15); color: var(--accent); }
.diff-pokale { background: rgba(255, 140, 66, 0.15); color: var(--accent-warm); }
.diff-event {
    background: linear-gradient(90deg, rgba(255, 210, 63, 0.2), rgba(255, 140, 66, 0.2));
    color: var(--accent);
}

/* Box-as-Card: kleine Anpassungen vs. normale Quest-Card */
.box-as-card.is-locked {
    opacity: 0.7;
    cursor: pointer;          /* trotzdem klickbar – Lock-Vorschau */
}
.box-as-card.is-locked:hover {
    opacity: 1;
    border-color: var(--accent);
}

.card-progress-text {
    font-size: 13px;
    color: var(--text-dim);
}
.card-progress-text strong { color: var(--text); }
.card-progress-text.dim { color: var(--text-mute); font-size: 12px; }

/* Quests-Head Anpassung: nicht so groß */
.quests-page .quests-head {
    margin: 16px 0 12px;
}
.quests-page .quests-head h1 {
    font-size: 22px;
    margin: 0 0 4px;
    line-height: 1.2;
}
.quests-page .quests-head .lede {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0;
}


/* ====================================================================
   ITERATION 2.5f: BOX-CARD FORTSCHRITTSBALKEN + COMPLETED-STIL
   ==================================================================== */

/* Card-Progress-Row: Text links, Mini-Bar rechts */
.card-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.mini-progress {
    flex-shrink: 0;
    display: inline-block;
    width: 80px;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 999px;
    overflow: hidden;
}
.mini-progress-bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-warm));
    border-radius: 999px;
    transition: width 0.4s ease-out;
}

/* Bei is-completed (100%) - grüner Fortschrittsbalken */
.box-as-card.is-completed .mini-progress-bar {
    background: var(--success);
}

@media (max-width: 540px) {
    .mini-progress { width: 60px; }
}


/* ====================================================================
   ERROR-PAGE
   ==================================================================== */

.error-page {
    max-width: 480px;
    margin: 40px auto;
    padding: 0 16px;
}
.error-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
}
.error-code {
    font-size: 72px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}
.error-card h1 {
    font-size: 22px;
    margin: 0 0 12px;
}
.error-card p {
    color: var(--text-dim);
    margin: 0 0 20px;
    line-height: 1.5;
}
.error-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ====================================================================
   ACCOUNT-SEITE - SAUBERE STRUKTUR (FINAL)
   ==================================================================== */

.account-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 0 60px;
}

/* Sections-Container: gleichmäßiger Abstand */
.account-sections {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

/* Jede Section: gleiche Karte, gleiche Form */
.account-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.account-section h2 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

/* Forms in Sections - kompakt + einheitlich */
.account-section .form-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.account-section .form-compact .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}
.account-section .form-compact label {
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 500;
}
.account-section .form-compact input {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    box-sizing: border-box;
    font-family: inherit;
}
.account-section .form-compact input:focus {
    border-color: var(--accent);
    outline: none;
}
.account-section .form-compact button {
    margin-top: 4px;
    align-self: flex-start;
}

/* Hint-Text in Sections */
.account-section .hint {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-mute);
    margin: 6px 0 0;
}

/* Section: Profilbild */
.account-section .profile-image-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.account-section .profile-image-preview,
.account-section .profile-image-preview img,
.account-section .profile-image-preview .avatar-medium {
    width: 56px;
    height: 56px;
    font-size: 22px;
    flex-shrink: 0;
}
.account-section .profile-image-preview img {
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    display: block;
}
.account-section .profile-image-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.account-section .profile-image-actions form {
    margin: 0;
}

/* Sichtbarkeits-Section */
.account-section .big-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    margin: 0 0 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}
.account-section .big-checkbox:hover {
    border-color: var(--accent);
}
.account-section .big-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.account-section .big-checkbox span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.account-section .big-checkbox strong {
    font-size: 13px;
}
.account-section .big-checkbox small {
    font-size: 11px;
    color: var(--text-mute);
    line-height: 1.4;
    font-weight: 400;
}

/* Support-Section: Buttons nebeneinander */
.account-section .support-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.account-section .support-row .btn {
    flex: 1 1 auto;
}

/* Danger-Section */
.account-section.danger-section {
    border-color: rgba(255, 91, 110, 0.3);
}
.account-section.danger-section h2 {
    color: var(--danger);
    border-bottom-color: rgba(255, 91, 110, 0.2);
}

/* Mobile (Standard für Handy) */
@media (max-width: 540px) {
    .account-page {
        padding: 0 0 40px;
    }
    .account-sections {
        gap: 10px;
    }
    .account-section {
        padding: 12px 14px;
    }
    .account-section h2 {
        font-size: 13px;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }
}

/* ====================================================================
   ITERATION 2.6: ACCOUNT v2 - LISTEN-LAYOUT
   Komplett neuer Aufbau, wirft alle alten .account-section Regeln raus
   ==================================================================== */

.account-v2 {
    max-width: 540px;
    margin: 0 auto;
    padding: 8px 0 60px;
}

/* === Profilkopf - schlank === */
.acc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
}

.acc-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
    border: 2px solid var(--border);
}
.acc-avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 24px;
    font-weight: 700;
    border: 2px solid var(--border);
}

.acc-id {
    flex: 1;
    min-width: 0;
}
.acc-id h1 {
    font-size: 18px;
    margin: 0;
    line-height: 1.2;
}
.acc-id p {
    font-size: 13px;
    color: var(--text-mute);
    margin: 4px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === Listen-Menü === */
.acc-list {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.acc-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.acc-list-item:last-child {
    border-bottom: none;
}
.acc-list-item:hover,
.acc-list-item:active {
    background: var(--bg-elevated);
}

.acc-list-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.acc-list-label {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
}

.acc-list-value {
    font-size: 13px;
    color: var(--text-mute);
}

.acc-list-arrow {
    font-size: 20px;
    color: var(--text-mute);
    line-height: 1;
    margin-left: 4px;
}

.acc-list-danger {
    color: var(--danger);
}
.acc-list-danger .acc-list-arrow {
    color: var(--danger);
}


/* === Detail-Seiten === */

.acc-detail {
    max-width: 540px;
    margin: 0 auto;
    padding: 8px 0 60px;
}

.acc-back {
    display: inline-block;
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 12px;
}
.acc-back:hover { text-decoration: underline; }

.acc-detail h1 {
    font-size: 20px;
    margin: 0 0 16px;
}

.acc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}

.acc-card p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
}

.acc-card .field {
    margin-bottom: 12px;
}
.acc-card .field label {
    display: block;
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.acc-card .field label small {
    color: var(--text-mute);
    font-weight: 400;
}
.acc-card .field input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    box-sizing: border-box;
    font-family: inherit;
}
.acc-card .field input:focus {
    border-color: var(--accent);
    outline: none;
}

.acc-card .hint {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-mute);
    margin: 12px 0 0;
}

.acc-card .btn-block {
    display: block;
    width: 100%;
    margin-top: 8px;
    text-align: center;
    box-sizing: border-box;
}
.acc-card form + form {
    margin-top: 8px;
}

.email-current {
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin: 0 0 16px;
    font-size: 14px;
    word-break: break-all;
}

/* Profilbild-Detail-Vorschau */
.profile-pic-preview {
    display: flex;
    justify-content: center;
    margin: 8px 0 16px;
}
.profile-pic-preview img,
.profile-pic-preview .acc-avatar-letter {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid var(--border);
    object-fit: cover;
    font-size: 40px;
}

/* Sichtbarkeits-Optionen */
.vis-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}
.vis-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(255, 210, 63, 0.05);
}
.vis-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.vis-option div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vis-option strong {
    font-size: 14px;
}
.vis-option small {
    font-size: 12px;
    color: var(--text-mute);
    line-height: 1.4;
}


/* ====================================================================
   ITERATION 3.0: INSTAGRAM-LOOK
   ==================================================================== */

/* Body etwas neutraler */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}

/* Theme-Toggle im Header */
.theme-toggle {
    background: transparent;
    border: none;
    color: var(--text);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s;
}
.theme-toggle:hover {
    background: var(--bg-elevated);
}

/* === IG-Profile-Header === */

.ig-profile {
    max-width: 935px;
    margin: 0 auto;
    padding: 8px 0 60px;
}

.ig-profile-head {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px;
    margin-bottom: 16px;
}

.ig-avatar-wrap {
    flex-shrink: 0;
    /* Iter v6.43: Animierter Ring in MatLuk-Farben (Cyan/Blau-Palette aus Logo)
       statt des alten Instagram-Pink-Gradients. Der konische Gradient rotiert
       langsam und gibt dem Profilbild den "lebendigen" Look.
       prefers-reduced-motion respektieren wir weiter unten. */
    padding: 3px;
    border-radius: 50%;
    background:
        conic-gradient(
            from var(--matluk-ring-angle, 0deg),
            #03d7e2,    /* Cyan (Hauptmarke) */
            #12d0fd,    /* Hellblau */
            #146cfe,    /* Blau (Akzent) */
            #057ce9,    /* Mittelblau */
            #ffd23f,    /* Gelb (App-Akzent) */
            #03d7e2     /* zurueck zu Cyan -> nahtloser Loop */
        );
    /* Animation rotiert die conic-gradient-Achse fuer einen weichen Wechsel */
    animation: matluk-ring-rotate 6s linear infinite;
}

/* Property-Definition fuer animierbare Custom-Property -
   damit der konische Gradient in modernen Browsern animieren kann. */
@property --matluk-ring-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes matluk-ring-rotate {
    from { --matluk-ring-angle: 0deg; }
    to   { --matluk-ring-angle: 360deg; }
}

/* Fallback fuer Browser ohne @property-Support (z.B. aeltere Firefox-Versionen):
   wir rotieren stattdessen das ganze Element. Sieht in dem Fall auch gut aus. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .ig-avatar-wrap {
        background: linear-gradient(45deg, #03d7e2, #146cfe, #ffd23f, #03d7e2);
        animation: none;
    }
}

/* Reduced-Motion: keine Rotation, statischer Gradient mit MatLuk-Farben */
@media (prefers-reduced-motion: reduce) {
    .ig-avatar-wrap {
        animation: none;
        background: conic-gradient(from 0deg,
            #03d7e2, #12d0fd, #146cfe, #057ce9, #ffd23f, #03d7e2);
    }
}

.ig-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg);
    border: 3px solid var(--bg);
    display: block;
}

.ig-avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 36px;
    font-weight: 700;
    box-sizing: border-box;
}

.ig-profile-info {
    flex: 1;
    min-width: 0;
}

.ig-username-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ig-username {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
    color: var(--text);
}

.ig-edit-btn {
    padding: 6px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s;
}
.ig-edit-btn:hover {
    background: var(--border);
}

/* Stats horizontal wie bei Insta */
.ig-stats {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.ig-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.ig-stat-value {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.ig-stat-label {
    font-size: 14px;
    color: var(--text-dim);
}

/* Privates Info-Row für Owner */
.ig-private-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-dim);
}
.ig-private-item {
    white-space: nowrap;
}

/* === View-Toggle === */
.ig-view-toggle {
    display: flex;
    justify-content: center;
    gap: 60px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}

.ig-view-btn {
    background: transparent;
    border: none;
    color: var(--text-mute);
    cursor: pointer;
    padding: 12px 0;
    margin: 0;
    border-top: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ig-view-btn:hover {
    color: var(--text-dim);
}
.ig-view-btn.is-active {
    color: var(--text);
    border-top-color: var(--text);
    margin-top: -1px;
}

/* === GRID-View (3-Spalten wie bei Insta) === */
.ig-grid {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.ig-grid-tile {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-elevated);
    overflow: hidden;
    cursor: pointer;
}
.ig-grid-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}
.ig-grid-tile:hover img {
    opacity: 0.85;
}

.ig-tile-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.ig-tile-stars {
    background: rgba(255, 210, 63, 0.9);
    color: #000;
}

.ig-rejected {
    width: 100%;
    height: 100%;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger);
    font-size: 32px;
}

/* === FEED-View (Vollbild) === */
.ig-feed {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 470px;
    margin-left: auto;
    margin-right: auto;
}

.ig-feed-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.ig-feed-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.ig-feed-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ig-feed-avatar.ig-avatar-letter {
    font-size: 14px;
    border: none;
}

.ig-feed-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.ig-feed-meta strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.ig-feed-meta small {
    font-size: 12px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ig-feed-badge {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.ig-badge-pending {
    background: rgba(255, 210, 63, 0.15);
    color: var(--accent);
}
.ig-badge-rejected {
    background: rgba(237, 73, 86, 0.15);
    color: var(--danger);
}

.ig-feed-photo {
    background: var(--bg);
    aspect-ratio: 1;
}
.ig-feed-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ig-feed-rejected {
    aspect-ratio: 1;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--danger);
}
.ig-feed-rejected span { font-size: 64px; opacity: 0.6; }
.ig-feed-rejected small { font-size: 13px; color: var(--text-mute); padding: 0 24px; text-align: center; }

.ig-feed-footer {
    padding: 12px 16px;
}

.ig-feed-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    font-size: 18px;
}
.ig-feed-stars-count {
    margin-left: 6px;
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 500;
}

.ig-feed-caption {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 6px;
    color: var(--text);
}
.ig-feed-caption strong {
    font-weight: 600;
    margin-right: 6px;
}

.ig-feed-time {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* === Empty-State === */
.ig-empty {
    text-align: center;
    padding: 60px 24px;
    border-top: 1px solid var(--border);
    margin-top: 16px;
}
.ig-empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.5;
}
.ig-empty h2 {
    font-size: 22px;
    font-weight: 300;
    margin: 0 0 8px;
}
.ig-empty p {
    color: var(--text-dim);
    margin: 0 0 20px;
    font-size: 14px;
}

/* === LIGHT MODE: spezifische Insta-Anpassungen === */
[data-theme="light"] body {
    background: var(--bg);
}
[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
[data-theme="light"] .bottom-nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
}

/* === MOBILE === */
@media (max-width: 540px) {
    .ig-profile-head {
        gap: 16px;
        padding: 12px;
    }
    .ig-avatar { width: 64px; height: 64px; }
    .ig-avatar-letter { font-size: 26px; }
    .ig-username { font-size: 18px; }
    .ig-stats { gap: 16px; }
    .ig-stat-value { font-size: 14px; }
    .ig-stat-label { font-size: 12px; }
    .ig-edit-btn { padding: 4px 10px; font-size: 12px; }

    .ig-private-row {
        font-size: 12px;
        gap: 10px;
        padding: 10px 12px;
    }

    .ig-feed { gap: 8px; }
    .ig-grid { gap: 1px; }
}

/* Smooth Theme-Transition */
body, .site-header, .bottom-nav, .ig-feed-item, .ig-grid-tile, .ig-edit-btn {
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

/* ====================================================================
   ITERATION 3.0b: SCHLANKER ENERGY-STRIP + STATS-UPGRADE
   ==================================================================== */

/* Schlanker Energy-Strip - nur Text, keine Balken */
.energy-line {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    margin: 8px 0 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.energy-line-icon {
    font-size: 14px;
    line-height: 1;
}
.energy-line strong {
    color: var(--text);
    font-weight: 600;
}
.energy-line-sep {
    color: var(--text-mute);
    margin: 0 1px;
}
.energy-line-max {
    color: var(--text-dim);
}
.energy-line-timer {
    color: var(--text-mute);
    font-size: 12px;
    margin-left: 4px;
}

/* === Iter V.6: Boost-Indikator wenn Energie-Verdoppelung aktiv === */
.energy-line.is-boosted {
    background: linear-gradient(135deg,
        rgba(251, 191, 36, 0.10),
        rgba(245, 158, 11, 0.05));
    border-color: rgba(251, 191, 36, 0.40);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.15);
}
.energy-line.is-boosted .energy-line-icon {
    /* Verdoppelt-Icon hat zwei Blitze - leichter Glow */
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.5));
}
.energy-line-boost-info {
    color: #fbbf24;
    font-weight: 600;
    font-size: 12px;
    margin-left: 4px;
}
[data-theme="light"] .energy-line.is-boosted {
    background: linear-gradient(135deg,
        rgba(251, 191, 36, 0.18),
        rgba(245, 158, 11, 0.08));
    border-color: rgba(251, 191, 36, 0.55);
}
[data-theme="light"] .energy-line-boost-info {
    color: #b45309;
}

/* === STATS mit Icons + neue Felder === */

.ig-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 12px;
    flex: 1;
    margin: 0;
}

.ig-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.ig-stat-icon {
    font-size: 16px;
    line-height: 1;
    margin-bottom: 2px;
    display: inline-block;
}

.ig-stat-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ig-stat-value-secondary {
    font-size: 11px;
    color: var(--text-mute);
    font-weight: 500;
    margin-left: 2px;
}

.ig-stat-label {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 540px) {
    .ig-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .ig-stat-value { font-size: 14px; }
    .ig-stat-label { font-size: 10px; }
    .ig-stat-icon { font-size: 14px; }
    .energy-line { font-size: 12px; padding: 5px 10px; }
}

/* Cache-Bust: 3.0b */

/* ====================================================================
   ITERATION 3.1: TABS, MODALS, FRIENDS
   ==================================================================== */

/* Top-Action-Row (Lupe + Freunde-Icon) */
.ig-top-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px 0;
}
.ig-icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}
.ig-icon-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--text-mute);
}
.ig-icon-btn.has-badge::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid var(--bg);
}

/* Friend-Status-Tag */
.ig-friend-tag {
    background: var(--success);
    color: #000;
    border-color: var(--success);
}
.ig-edit-btn-primary {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}
.ig-edit-btn-primary:hover {
    filter: brightness(1.05);
}

/* Tabs */
.ig-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    margin: 16px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ig-tabs::-webkit-scrollbar { display: none; }

.ig-tab {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--text-mute);
    cursor: pointer;
    padding: 12px 4px;
    margin: 0;
    border-top: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.ig-tab:hover { color: var(--text-dim); }
.ig-tab.is-active {
    color: var(--text);
    border-top-color: var(--text);
    margin-top: -1px;
}
.ig-tab-icon { font-size: 16px; }
.ig-tab-label { letter-spacing: 0.04em; }
.ig-tab-count {
    background: var(--bg-elevated);
    color: var(--text-dim);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 2px;
}
.ig-tab.is-active .ig-tab-count {
    background: var(--text);
    color: var(--bg);
}

.ig-tab-pane { display: none; }
.ig-tab-pane.is-active { display: block; }

/* Tile als Button (clickable für Modal) */
.ig-tile-btn {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    position: relative;
}
.ig-tile-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ig-grid-tile.is-best {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.ig-tile-best {
    background: rgba(255, 210, 63, 0.95) !important;
    color: #000 !important;
}

/* === Modals === */
.ig-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ig-modal[hidden] { display: none; }
.ig-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ig-modal-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}
.ig-modal-photo {
    max-width: 600px;
}
.ig-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.ig-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.ig-modal-close {
    background: transparent;
    border: none;
    color: var(--text-mute);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 4px 8px;
    margin: -4px -8px;
}
.ig-modal-body {
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
}
.ig-modal-body h4 {
    margin: 16px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ig-modal-body h4:first-child { margin-top: 0; }

.ig-modal-photo-wrap {
    background: var(--bg);
    margin: -16px -16px 12px;
    aspect-ratio: 1;
    overflow: hidden;
}
.ig-modal-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ig-modal-meta {
    font-size: 12px;
    color: var(--text-dim);
    margin: 0 0 4px;
}
.ig-modal-caption {
    font-size: 14px;
    margin: 0 0 16px;
    line-height: 1.4;
}

.ig-vis-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.ig-vis-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
.ig-vis-radio:has(input:checked) {
    border-color: var(--accent);
    background: rgba(255, 210, 63, 0.05);
}

/* === Suche === */
.ig-search-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 12px;
    font-family: inherit;
}
.ig-search-input:focus {
    border-color: var(--accent);
    outline: none;
}

.ig-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ig-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.ig-search-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-elevated);
}
.ig-search-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ig-search-avatar .ig-avatar-letter {
    width: 100%;
    height: 100%;
    font-size: 16px;
    border: none;
}
.ig-search-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
}
.ig-search-name:hover { color: var(--accent); }
.ig-search-state {
    font-size: 12px;
    color: var(--text-mute);
    padding: 4px 8px;
}

/* === Friends-Page === */
.friends-page {
    max-width: 540px;
    margin: 0 auto;
    padding: 8px 0 60px;
}
.friends-page h1 {
    font-size: 22px;
    margin: 12px 0 16px;
}
.friends-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.friends-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.friends-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.friends-avatar img,
.friends-avatar .ig-avatar-letter {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-size: 18px;
    border: none;
}
.friends-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    min-width: 0;
}
.friends-name:hover { color: var(--accent); }
.friends-actions {
    display: flex;
    gap: 6px;
}

/* Mobile */
@media (max-width: 540px) {
    .ig-tab-label { font-size: 11px; }
    .ig-modal-card { max-height: 95vh; }
    .ig-modal-body { padding: 12px; }
    .ig-modal-photo-wrap { margin: -12px -12px 12px; }
}

/* Cache-Bust: 3.1 */

/* ====================================================================
   ITERATION 3.2: TITEL + ADMIN-LOGIN
   ==================================================================== */

/* Aktiver Titel unter dem Username */
.ig-active-title {
    margin: 4px 0 12px;
    font-size: 14px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ig-title-icon {
    font-size: 16px;
    line-height: 1;
}
.ig-title-text {
    font-style: italic;
    font-weight: 500;
    color: var(--accent);
}

/* Titel-Auswahl (Account) */
.titles-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.title-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.title-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(255, 210, 63, 0.05);
}
.title-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.title-option div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.title-option strong {
    font-size: 14px;
    color: var(--text);
}
.title-option small {
    font-size: 12px;
    color: var(--text-mute);
    line-height: 1.4;
}

/* Admin-Login-Page */
.admin-login-page {
    max-width: 420px;
    margin: 60px auto 0;
    padding: 16px;
}
.admin-login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px 24px;
}
.admin-login-card h1 {
    margin: 0 0 8px;
    font-size: 22px;
    text-align: center;
}
.admin-login-card .hint {
    text-align: center;
    margin-bottom: 24px;
}

/* Cache-Bust: 3.2 */

/* ====================================================================
   ITERATION 3.2b: ENERGY in Private-Row + JS-Fixes
   ==================================================================== */

/* Energy als private-item: kein Pill-Look mehr, gleiche Optik wie Wallet */
.ig-private-energy {
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
}
.ig-private-energy strong {
    color: var(--text);
    font-weight: 600;
}

/* === Iter V.6: Boost-Indikator in private-row Variante === */
.ig-private-energy.is-boosted {
    background: linear-gradient(135deg,
        rgba(251, 191, 36, 0.10),
        rgba(245, 158, 11, 0.05));
    border-radius: 6px;
    padding: 2px 8px;
    margin: -2px -2px;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.15);
}
[data-theme="light"] .ig-private-energy.is-boosted {
    background: linear-gradient(135deg,
        rgba(251, 191, 36, 0.18),
        rgba(245, 158, 11, 0.08));
}

/* Den alten Pill-Style überschreiben wenn der Strip in Private-Row ist */
.ig-private-row .energy-line {
    display: inline-flex;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: inherit;
}

/* Cache-Bust: 3.2b */

/* ====================================================================
   ITERATION 3.3: QUEST-SEITE + BOX-DETAIL im Insta-Stil
   ==================================================================== */

.ig-quests-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 8px 0 60px;
}

/* Section-Headers */
.ig-section-head {
    padding: 12px 16px 4px;
    margin-bottom: 4px;
}
.ig-section-head h1 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
}
.ig-section-head p {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0;
}
.ig-section-subhead {
    padding: 12px 16px 8px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-mute);
    margin: 12px 0 0;
}

/* Daily-Card - prominent oben */
.ig-daily-card {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.08), rgba(255, 140, 66, 0.06));
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 12px 16px 16px;
}
.ig-daily-card.is-done {
    border-left-color: var(--success);
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.06), transparent 60%);
}
.ig-daily-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.ig-daily-tag {
    background: var(--accent);
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.ig-daily-rewards {
    font-size: 12px;
    color: var(--text-dim);
}
.ig-daily-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
}
.ig-daily-desc {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0 0 12px;
    line-height: 1.4;
}
.ig-daily-action {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ig-daily-done {
    font-size: 13px;
    color: var(--success);
    font-weight: 500;
}
.ig-daily-pending {
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
}

/* === Box-Liste === */
.ig-box-list {
    list-style: none;
    margin: 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ig-box-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.1s;
}
.ig-box-card:hover {
    border-color: var(--border-strong);
}
.ig-box-card:active {
    transform: scale(0.99);
}
.ig-box-card.is-locked {
    opacity: 0.65;
}
.ig-box-card.is-complete {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.04), transparent 70%);
}

.ig-box-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    color: var(--text);
    text-decoration: none;
}

.ig-box-icon-col {
    position: relative;
    flex-shrink: 0;
}
.ig-box-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: 1px solid var(--border);
}
.ig-box-check {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    background: var(--success);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid var(--bg);
}
.ig-box-lock {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    background: var(--bg-elevated);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 2px solid var(--bg);
}

.ig-box-main {
    flex: 1;
    min-width: 0;
}
.ig-box-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.ig-box-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}
.ig-box-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-mute);
    flex-shrink: 0;
}
.ig-box-desc {
    font-size: 12px;
    color: var(--text-dim);
    margin: 0 0 8px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ig-box-title-reward {
    font-size: 11px;
    color: var(--text-mute);
    margin: 0 0 6px;
}
.ig-box-title-reward strong {
    color: var(--accent);
    font-weight: 600;
}

/* Progress */
.ig-box-foot { margin-top: 4px; }
.ig-box-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ig-box-progress-text {
    font-size: 11px;
    color: var(--text-dim);
}
.ig-box-progress-text strong {
    color: var(--text);
    font-weight: 600;
}
.ig-box-progress-bar {
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 999px;
    overflow: hidden;
}
.ig-box-progress-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.4s ease-out;
}
.ig-box-card.is-complete .ig-box-progress-fill {
    background: var(--success);
}

.ig-box-empty,
.ig-box-locked-text {
    font-size: 11px;
    color: var(--text-mute);
}

.ig-box-arrow {
    font-size: 22px;
    color: var(--text-mute);
    flex-shrink: 0;
}

/* === Box-Detail === */
.ig-box-detail-head {
    display: flex;
    gap: 16px;
    padding: 16px;
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.ig-box-detail-icon {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.ig-box-detail-info {
    flex: 1;
    min-width: 0;
}
.ig-box-detail-info h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 4px 0 6px;
}
.ig-box-detail-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-mute);
}
.ig-box-detail-desc {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0 0 8px;
    line-height: 1.5;
}
.ig-box-detail-reward {
    font-size: 12px;
    color: var(--text-mute);
    margin: 0;
}
.ig-box-detail-reward strong {
    color: var(--accent);
}

.ig-box-detail-progress {
    margin: 12px 16px 16px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ig-box-detail-progress-info {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.ig-box-detail-progress-info strong {
    color: var(--text);
}

/* Event-Banner */
.ig-event-banner {
    margin: 0 16px 12px;
    padding: 10px 14px;
    background: rgba(255, 210, 63, 0.1);
    border: 1px solid rgba(255, 210, 63, 0.3);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
}
.ig-event-banner.is-ended {
    background: rgba(237, 73, 86, 0.1);
    border-color: rgba(237, 73, 86, 0.3);
    color: var(--danger);
}

/* Lock-Card */
.ig-unlock-card {
    margin: 0 16px 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ig-unlock-card h2 {
    font-size: 16px;
    margin: 0 0 12px;
    font-weight: 600;
}
.ig-unlock-option {
    padding: 12px;
    margin: 12px 0 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.ig-unlock-option h3 {
    font-size: 13px;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    font-weight: 600;
}
.ig-unlock-option p {
    font-size: 13px;
    margin: 0 0 8px;
    line-height: 1.4;
}
.ig-unlock-card .hint-warn {
    color: var(--danger);
    font-size: 12px;
}

/* === Quest-Liste in Box === */
.ig-quest-list {
    list-style: none;
    margin: 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ig-quest-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.ig-quest-item:hover { border-color: var(--border-strong); }
.ig-quest-item.is-locked { opacity: 0.55; }
.ig-quest-item.is-done {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.04), transparent 60%);
}
.ig-quest-item.is-pending {
    border-color: rgba(255, 210, 63, 0.4);
}
.ig-quest-item.is-rejected {
    border-color: rgba(237, 73, 86, 0.4);
    opacity: 0.7;
}
.ig-quest-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--text);
    text-decoration: none;
}

.ig-quest-status {
    flex-shrink: 0;
}
.ig-quest-status-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid var(--border);
    background: var(--bg);
    color: var(--text-mute);
}
.ig-quest-status-icon.ok {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.ig-quest-status-icon.pending {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}
.ig-quest-status-icon.rejected {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.ig-quest-body {
    flex: 1;
    min-width: 0;
}
.ig-quest-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.ig-quest-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
    flex: 1;
    min-width: 0;
}
.ig-quest-desc {
    font-size: 12px;
    color: var(--text-dim);
    margin: 0 0 6px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ig-quest-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: var(--text-mute);
}
.ig-quest-state.ok { color: var(--success); font-weight: 500; }
.ig-quest-state.pending { color: var(--accent); font-weight: 500; }
.ig-quest-state.rejected { color: var(--danger); font-weight: 500; }

/* Cache-Bust: 3.3 */

/* ====================================================================
   ITERATION 3.4: CSP-Bugfix + Bottom-Nav-Umbau + Friends-Page
   ==================================================================== */

/* Friends-Page: Suche oben */
.friends-search-wrap {
    margin: 12px 16px 16px;
}
.friends-search-input-wrap {
    position: relative;
}
.friends-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
}
.friends-search-input-wrap .ig-search-input {
    padding-left: 40px;
    margin-bottom: 0;
}

#friends-search-results {
    margin-top: 10px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
#friends-search-results[hidden] {
    display: none;
}

/* Friend-Item mit Sub-Text "Pinnwand öffnen" */
.friends-name-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.friends-name-link small {
    font-size: 11px;
    color: var(--text-mute);
    font-weight: normal;
}
.friends-name-link:hover small {
    color: var(--accent);
}

/* Account-Liste: Logout als Button */
.acc-logout-form {
    margin: 0;
}
.acc-list-button {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    /* Identisch zu .acc-list-item */
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    text-decoration: none;
    border-radius: 10px;
    background: var(--bg-card);
    transition: border-color 0.15s, background 0.15s;
    font-size: 15px;
}
.acc-list-button:hover {
    border-color: var(--border-strong);
    background: var(--bg-elevated);
}

/* Friends-Page nutzt jetzt ig-quests-page Container, friends-list Sektion-spezifisch */
.friends-list {
    list-style: none;
    margin: 0 16px 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Cache-Bust: 3.4 */

/* ====================================================================
   ITERATION 3.5: 4:5 Hochformat + Melden + Quest-Detail
   ==================================================================== */

/* Pinnwand-Tiles in 4:5 (Hochformat) statt 1:1 */
.ig-grid {
    list-style: none;
    margin: 0;
    padding: 1px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
.ig-grid-tile {
    position: relative;
    aspect-ratio: 4 / 5;  /* Hochformat - das wichtige */
    overflow: hidden;
    background: var(--bg-elevated);
}
.ig-grid-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* schneidet Querfotos passend zu */
    display: block;
}

/* Melde-Button Stil */
.ig-report-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-mute);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-left: 4px;
    font-size: 14px;
    transition: border-color 0.15s, color 0.15s;
}
.ig-report-btn:hover {
    border-color: var(--danger);
    color: var(--danger);
}

/* Quest-Detail Insta-Stil */
.ig-quest-detail-head {
    padding: 12px 16px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.ig-quest-detail-info h1 {
    font-size: 22px;
    font-weight: 600;
    margin: 8px 0 6px;
    line-height: 1.25;
}
.ig-quest-detail-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 6px;
}
.ig-quest-meta-cost,
.ig-quest-meta-reward {
    font-size: 12px;
    color: var(--text-dim);
}
.ig-quest-detail-lede {
    font-size: 14px;
    color: var(--text-dim);
    margin: 0;
    line-height: 1.5;
}

.ig-quest-story {
    padding: 12px 16px;
    margin: 0 16px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-dim);
}
.ig-quest-story p { margin: 0; }

.ig-capture-card {
    margin: 0 16px 16px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ig-capture-card h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
}

/* Eigene Versuche-Liste */
.ig-attempt-list {
    list-style: none;
    margin: 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ig-attempt-item {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    align-items: center;
}
.ig-attempt-item.ig-attempt-approved {
    border-color: rgba(74, 222, 128, 0.4);
}
.ig-attempt-item.ig-attempt-rejected {
    border-color: rgba(237, 73, 86, 0.4);
}
.ig-attempt-thumb {
    width: 60px;
    height: 75px;  /* 4:5 */
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-elevated);
}
.ig-attempt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ig-attempt-rejected {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger);
    font-size: 24px;
    background: var(--bg);
}
.ig-attempt-body {
    flex: 1;
    min-width: 0;
}
.ig-attempt-reason {
    font-size: 12px;
    color: var(--text-dim);
    margin: 4px 0;
}
.ig-attempt-date {
    color: var(--text-mute);
    font-size: 11px;
    display: block;
    margin-top: 4px;
}

/* === Report-Form === */
.report-form {
    margin: 0 16px;
}
.report-reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

/* === Admin-Reports === */
.admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.admin-section-head h1 {
    font-size: 22px;
    margin: 0;
}
.badge-count {
    background: var(--danger);
    color: #fff;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    margin-left: 8px;
    vertical-align: middle;
}

.reports-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.report-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}
.report-card.report-open {
    border-left: 3px solid var(--accent);
}
.report-card.report-resolved {
    border-left: 3px solid var(--success);
    opacity: 0.85;
}
.report-card.report-dismissed {
    border-left: 3px solid var(--text-mute);
    opacity: 0.7;
}

.report-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}
.report-target-type {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--text-dim);
    margin-right: 8px;
}
.report-status {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}
.report-status-open { background: var(--accent); color: #000; }
.report-status-resolved { background: var(--success); color: #fff; }
.report-status-dismissed { background: var(--bg-elevated); color: var(--text-mute); }

.report-date {
    color: var(--text-mute);
    font-size: 11px;
}

.report-body p {
    margin: 6px 0;
    font-size: 13px;
}
.report-thumb {
    width: 120px;
    margin: 8px 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-elevated);
}
.report-thumb img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}
.report-note {
    background: var(--bg);
    padding: 8px 10px;
    border-radius: 6px;
    border-left: 2px solid var(--border-strong);
    font-size: 13px;
}
.report-resolution {
    color: var(--text-mute);
    font-size: 12px;
    margin-top: 8px;
}

.report-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Cache-Bust: 3.5 */

/* ====================================================================
   ITERATION 3.6: MatLuk-Logo + Box-Bilder + Templates
   ==================================================================== */

/* === Brand-Logo im App-Header === */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}
.brand-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}
.brand-logo {
    /* Legacy für Wort-Logo - falls noch irgendwo verwendet */
    width: 110px;
    height: auto;
    max-height: 36px;
    object-fit: contain;
}
.brand-text {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
}
@media (max-width: 480px) {
    .brand-icon { width: 32px; height: 32px; }
    .brand-text { font-size: 15px; }
}

/* === Footer: Made by MatLuk === */
.footer-matluk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-mute);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s;
}
.footer-matluk:hover {
    color: #03d7e2;  /* Cyan-Akzent on Hover */
}
.footer-logo {
    width: 24px;
    height: 9px;
    object-fit: contain;
}

/* === Auth-Hero-Logo (Login/Register) === */
.auth-hero-logo {
    display: flex;
    justify-content: center;
    margin: -8px 0 16px;
}
.auth-hero-logo img {
    width: 200px;
    max-width: 80%;
    height: auto;
    object-fit: contain;
}

/* === Box-Bilder als Icons === */
.ig-box-icon-image {
    padding: 0;
    background: transparent;
    border: none;
    overflow: hidden;
}
.ig-box-icon-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ig-box-detail-icon-image {
    padding: 0;
    background: transparent;
    border: none;
    overflow: hidden;
}
.ig-box-detail-icon-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* === Admin-Box-Thumb in Liste === */
.admin-box-thumb {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--bg-elevated);
    display: block;
}

/* === Box-Images-Grid (Admin Library) === */
.box-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.box-image-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.box-image-preview {
    aspect-ratio: 1 / 1;
    background: var(--bg-elevated);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.box-image-meta {
    font-size: 12px;
    color: var(--text-dim);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.box-image-meta strong {
    color: var(--text);
    font-size: 14px;
}
.box-image-meta small {
    font-size: 11px;
    color: var(--text-mute);
}
.box-image-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
}
.box-image-filename {
    font-family: monospace;
    font-size: 10px;
    background: var(--bg);
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    user-select: all;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Cache-Bust: 3.6 */

/* ====================================================================
   ITERATION 3.7: Freundschaftsanfragen-Toggle
   ==================================================================== */

/* Muted-Variante des edit-btn (für "Keine Anfragen") */
.ig-edit-btn-muted {
    background: var(--bg-elevated);
    color: var(--text-mute);
    border-color: var(--border);
    font-size: 12px;
    cursor: default;
}

/* Hidden-User in Suche: Username ohne Link */
.ig-search-name-hidden {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dim);
    cursor: default;
}
.ig-search-name-hidden small {
    font-size: 11px;
    color: var(--text-mute);
    font-weight: normal;
}

/* Cache-Bust: 3.7 */

/* ====================================================================
   ITERATION 3.8: Auth-Page Hero + Foto-CTA Sheet
   ==================================================================== */

/* === Auth-Page Layout === */
.auth-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}
.auth-hero {
    text-align: center;
    padding: 32px 0 24px;
}
.auth-hero-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    margin: 0 auto 20px;
    display: block;
}
.auth-hero-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.auth-hero-tagline {
    font-size: 14px;
    color: var(--text-dim);
    margin: 0;
    line-height: 1.5;
}
.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 20px;
    margin-bottom: 20px;
}

/* Iter v6.43: MatLuk-Akzent fuer die Login-Card.
   Hebt sich von der Umgebung ab (Cyan-Border + dezenter Cyan-Glow als Background)
   damit der User die Anmeldung nicht uebersieht. Funktioniert in Dark + Light. */
.auth-card-highlight {
    border: 2px solid #03d7e2;
    background:
        linear-gradient(180deg,
            rgba(3, 215, 226, 0.08),
            rgba(3, 215, 226, 0.02) 40%,
            var(--bg-card) 100%);
    box-shadow:
        0 0 0 4px rgba(3, 215, 226, 0.06),
        0 8px 24px rgba(3, 215, 226, 0.10);
    position: relative;
}
.auth-card-highlight::before {
    /* Subtiler Glow oben am Rand - "Hier geht's los"-Akzent */
    content: "";
    position: absolute;
    top: -2px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        #03d7e2 30%,
        #146cfe 50%,
        #03d7e2 70%,
        transparent);
    border-radius: 2px;
}
.auth-card-highlight .eyebrow {
    color: #03d7e2;
    font-weight: 700;
}

/* Iter v6.43: Feature-Liste hat jetzt eine Headline weil sie unter dem Login steht */
.auth-features-headline {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin: 28px 0 14px;
    color: var(--text);
}
.auth-card .eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mute);
    margin: 0 0 4px;
}
.auth-card h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px;
    line-height: 1.3;
}
.auth-card h2 em {
    font-style: normal;
    color: #03d7e2;  /* Cyan-Akzent aus Logo */
}
.auth-pwa-hint {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}
.auth-pwa-hint small {
    display: block;
    margin-top: 6px;
    color: var(--text-dim);
}
@media (max-width: 480px) {
    .auth-hero-img { width: 130px; height: 130px; }
    .auth-hero-title { font-size: 24px; }
}

/* === Foto-CTA Sheet (Plus-Button-Modal) === */
.cta-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}
.cta-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
}
.cta-option:hover,
.cta-option:focus {
    border-color: #03d7e2;
    transform: translateY(-1px);
    outline: none;
}
.cta-option-icon {
    font-size: 28px;
    margin-bottom: 4px;
}
.cta-option strong {
    font-size: 16px;
    font-weight: 600;
}
.cta-option small {
    font-size: 12px;
    color: var(--text-dim);
}

/* === Capture-Page === */
.capture-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 12px 16px 80px;
}
.capture-page .back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text-dim);
    text-decoration: none;
}
.capture-stage,
.capture-preview-stage {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    position: relative;
    margin-bottom: 16px;
}
.capture-stage video,
.capture-preview-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.capture-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 16px 0;
}
.capture-controls .btn-shutter {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--accent);
    padding: 0;
    cursor: pointer;
}
.capture-init-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px 16px;
    text-align: center;
}

/* Quest-Picker nach Foto */
.capture-quest-picker {
    margin-top: 16px;
}
.capture-quest-picker h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
}
.capture-quest-picker p {
    color: var(--text-dim);
    font-size: 13px;
    margin: 0 0 16px;
}
.capture-quest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.capture-quest-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.15s;
    width: 100%;
    text-align: left;
    color: var(--text);
    font-family: inherit;
    font-size: inherit;
}
.capture-quest-item:hover,
.capture-quest-item:focus {
    border-color: #03d7e2;
    outline: none;
}
.capture-quest-item-info {
    flex: 1;
    min-width: 0;
}
.capture-quest-item-info strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}
.capture-quest-item-info small {
    color: var(--text-dim);
    font-size: 12px;
}
.capture-quest-item-cost {
    font-size: 12px;
    color: var(--text-dim);
    white-space: nowrap;
}
.capture-quest-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Cache-Bust: 3.8 */

/* Cache-Bust: 3.9 - MatLuk-Schmetterling als App-Icon, Galerie-Fallback raus */

/* ====================================================================
   ITERATION 4.0: Roter Shutter + Cyan-Action-Buttons
   ==================================================================== */

/* === Shutter-Button ROT (iPhone-Kamera-Look) === */
.btn-shutter,
.capture-controls .btn-shutter {
    width: 72px !important;
    height: 72px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #ed4956 !important;  /* Rot - aufmerksamkeitsstark */
    border: 4px solid #fff !important;  /* Weißer Ring außen */
    box-shadow: 0 0 0 3px #ed4956, 0 4px 12px rgba(237, 73, 86, 0.4) !important;  /* Roter Außenring + Schatten */
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    flex: 0 0 auto;
    margin: 0 8px;
}
.btn-shutter:hover,
.capture-controls .btn-shutter:hover {
    box-shadow: 0 0 0 3px #ed4956, 0 6px 16px rgba(237, 73, 86, 0.6) !important;
}
.btn-shutter:active,
.capture-controls .btn-shutter:active {
    transform: scale(0.92);
}

/* Inner shutter-ring (für quest_detail.html) - Roter Vollkreis statt weiß */
.shutter-ring {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border: none !important;
    background: #ed4956 !important;
    transition: transform 0.1s;
}
.shutter-dot {
    /* Falls vorhanden, ausblenden - der Button ist jetzt einfarbig rot */
    display: none;
}

/* === Kamera-Action-Buttons in MatLuk-Cyan/Blau === */
.camera-controls .btn-ghost,
.capture-controls .btn-ghost,
#btn-flip,
#btn-cancel,
#btn-retake {
    background: #03d7e2 !important;     /* Cyan aus Logo */
    color: #0b0d12 !important;          /* dunkler Text auf Cyan */
    border: 1px solid #03d7e2 !important;
    font-weight: 600 !important;
    transition: background 0.15s, transform 0.1s;
}
.camera-controls .btn-ghost:hover,
.capture-controls .btn-ghost:hover,
#btn-flip:hover,
#btn-cancel:hover,
#btn-retake:hover {
    background: #146cfe !important;      /* Blau aus Logo bei Hover */
    border-color: #146cfe !important;
    color: #fff !important;
}
.camera-controls .btn-ghost:active,
.capture-controls .btn-ghost:active,
#btn-flip:active,
#btn-cancel:active,
#btn-retake:active {
    transform: scale(0.96);
}

/* === CTA-Button mit MatLuk-Logo (Iter 4.8) === */
/* Weißer Kreis mit Cyan-Glow drumrum, Logo ist Star der Show */
.bn-cta-circle {
    background: #fff !important;
    color: var(--bg) !important;
    box-shadow: 0 0 0 3px rgba(3, 215, 226, 0.6),
                0 6px 20px rgba(3, 215, 226, 0.5) !important;
    overflow: hidden;
    padding: 4px;
}
.bn-cta-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.bn-cta:hover .bn-cta-circle {
    box-shadow: 0 0 0 3px rgba(3, 215, 226, 0.8),
                0 8px 24px rgba(3, 215, 226, 0.7) !important;
}
.bn-cta:active .bn-cta-circle {
    transform: scale(0.94);
}

/* Cache-Bust: 4.0 */

/* ====================================================================
   ITERATION 4.1: Login-Welcome-Hero + i18n / Auto-Translate
   ==================================================================== */

/* === Feature-Highlights auf Login-Page === */
.auth-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 24px;
}
.auth-feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.auth-feature-icon {
    font-size: 28px;
    margin-bottom: 4px;
}
.auth-feature-card strong {
    font-size: 14px;
    font-weight: 600;
}
.auth-feature-card small {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.35;
}

/* === Auth-Lang-Picker === */
.auth-lang-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
.auth-lang-label {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0 0 8px;
    font-weight: 500;
}
.auth-lang-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}
.auth-lang-card small {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-mute);
}

/* === PWA-Install-Grid === */
.auth-pwa-hint .pwa-install-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
.auth-pwa-hint .pwa-install-grid > div {
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.auth-pwa-hint .pwa-install-grid strong {
    font-size: 12px;
    font-weight: 600;
}
.auth-pwa-hint .pwa-install-grid small {
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.4;
}
.pwa-os-icon {
    font-size: 24px;
}

@media (max-width: 360px) {
    .auth-pwa-hint .pwa-install-grid,
    .auth-features {
        grid-template-columns: 1fr;
    }
}

/* === Footer-Small auf Login === */
.auth-footer-small {
    text-align: center;
    margin: 24px 0 0;
    font-size: 11px;
    color: var(--text-mute);
}
.auth-footer-small a {
    color: #03d7e2;
    text-decoration: none;
}

/* === Translate-Banner ganz oben === */
.translate-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(90deg, #03d7e2, #146cfe);
    color: #fff;
    padding: 8px 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.translate-banner span {
    flex: 1;
    text-align: center;
}
.translate-banner strong {
    font-weight: 700;
}
.translate-banner button {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    flex: 0 0 auto;
}
.translate-banner button:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Bei aktivem Translate-Banner Body-Padding korrigieren */
body.has-translate-banner {
    padding-top: 0;  /* Banner ist sticky, daher kein Padding nötig */
}

/* Google Translate Element komplett verstecken */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon,
#goog-gt-tt,
.goog-te-balloon-frame,
div#goog-gt- {
    display: none !important;
}
.goog-text-highlight {
    background: transparent !important;
    box-shadow: none !important;
}
body {
    top: 0 !important;
}

/* === Sprach-Auswahl im Account === */
.lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}
.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.lang-option:hover {
    border-color: #03d7e2;
}
.lang-option.is-active {
    background: rgba(3, 215, 226, 0.1);
    border-color: #03d7e2;
}
.lang-option input[type="radio"] {
    margin: 0;
    flex: 0 0 auto;
}
.lang-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}
.lang-tag {
    font-size: 10px;
    background: var(--bg-elevated);
    color: var(--text-mute);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lang-option.is-active .lang-tag {
    background: #03d7e2;
    color: #0b0d12;
}

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

/* === Datenschutz-Hinweis-Box === */
.alert-info {
    background: rgba(3, 215, 226, 0.08);
    border: 1px solid rgba(3, 215, 226, 0.3);
    color: var(--text);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 16px 12px;
}
.alert-info p {
    margin: 4px 0 0;
}

/* Cache-Bust: 4.1 */

/* ====================================================================
   ITERATION 4.2: Pagination + Performance-Hinweise
   ==================================================================== */
.ig-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px 8px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}
.ig-pagination-info {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 500;
    padding: 0 8px;
}

/* Cache-Bust: 4.2 */

/* ====================================================================
   ITERATION 4.3: Legal-Pages (Datenschutz/Impressum/FAQ) + Profil-Links
   ==================================================================== */

/* === Legal-Page Layout === */
.legal-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 16px 80px;
}
.legal-page .back-link {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--text-dim);
    text-decoration: none;
}
.legal-page .back-link:hover { color: #03d7e2; }

.legal-header {
    text-align: center;
    padding: 16px 0 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.legal-header h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.legal-meta {
    color: var(--text-dim);
    font-size: 13px;
    margin: 0;
}

.legal-content {
    line-height: 1.65;
    font-size: 15px;
}
.legal-content h2 {
    font-size: 19px;
    font-weight: 700;
    margin: 32px 0 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    scroll-margin-top: 80px;
}
.legal-content h2:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 8px;
}
.legal-content h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 8px;
    color: var(--text-dim);
}
.legal-content p { margin: 0 0 12px; }
.legal-content ul {
    margin: 0 0 12px;
    padding-left: 22px;
}
.legal-content li { margin: 4px 0; }
.legal-content a {
    color: #03d7e2;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-content a:hover { color: #146cfe; }

.legal-contact-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 8px 0 16px;
    line-height: 1.6;
    font-size: 14px;
}

.legal-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 32px 0 0;
    margin-top: 32px;
    border-top: 1px solid var(--border);
}

/* === FAQ-Page === */
.faq-toc {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
    font-size: 14px;
}
.faq-toc strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text-dim);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.faq-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}
.faq-toc li { margin: 0; }
.faq-toc a {
    text-decoration: none;
    display: block;
    padding: 4px 0;
}

@media (max-width: 480px) {
    .faq-toc ul { grid-template-columns: 1fr; }
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 8px 0;
    transition: border-color 0.15s;
}
.faq-item[open] {
    border-color: rgba(3, 215, 226, 0.4);
    background: rgba(3, 215, 226, 0.04);
}
.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    list-style: none;
    position: relative;
    padding-right: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 22px;
    color: #03d7e2;
    transition: transform 0.2s;
    line-height: 1;
}
.faq-item[open] summary::after {
    content: "−";
}
.faq-item p, .faq-item ul {
    margin-top: 12px;
    margin-bottom: 4px;
    font-weight: normal;
}

/* === Account-Listen-Section-Label === */
.acc-list-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mute);
    padding: 16px 16px 6px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}

/* Cache-Bust: 4.3 */

/* ====================================================================
   ITERATION 4.4: VOLLBILD-KAMERA (wie native Handy-Kamera)
   ==================================================================== */

/* Alte Capture-Stage NICHT mehr nötig (Inline-Kamera) - wir behalten Preview */
.capture-stage {
    /* Wird nicht mehr verwendet - durch Vollbild-Overlay ersetzt */
    display: none !important;
}

/* === Vollbild-Overlay === */
/* === Camera-Fullscreen über ALLEM (Iter 5.8) === */
.camera-fullscreen {
    position: fixed;
    inset: 0;  /* top:0; right:0; bottom:0; left:0 */
    z-index: 2147483647 !important;  /* MAX z-index, über allem */
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Safe-Area für iPhone-Notch + Home-Indicator */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

.camera-fs-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

/* Body sperren wenn Kamera offen */
body.camera-fs-active {
    overflow: hidden !important;
    height: 100vh !important;
}
/* Iter 5.8: Brachial alle Header/Nav-Elemente verstecken wenn Kamera aktiv */
body.camera-fs-active .site-header,
body.camera-fs-active > header.site-header,
body.camera-fs-active > nav,
body.camera-fs-active .bottom-nav,
body.camera-fs-active .site-footer,
body.camera-fs-active .translate-banner,
body.camera-fs-active .skiptranslate,
body.camera-fs-active #google_translate_element {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Iter 5.8: alle Body-Direktkinder außer #main und .camera-fullscreen verstecken */
body.camera-fs-active > *:not(#main):not(.camera-fullscreen):not(script):not(style) {
    display: none !important;
}

/* === Top-Bar mit Cancel + Flip === */
.camera-fs-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: max(env(safe-area-inset-top, 16px), 16px) 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    /* Dunkler Verlauf nach unten für bessere Lesbarkeit der Buttons */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
}

.camera-fs-icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.15s, transform 0.1s;
    padding: 0;
}
.camera-fs-icon-btn:hover {
    background: rgba(0, 0, 0, 0.75);
}
.camera-fs-icon-btn:active {
    transform: scale(0.92);
    background: #03d7e2;
}

/* === Bottom-Bar mit Shutter === */
.camera-fs-bottombar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 16px max(env(safe-area-inset-bottom, 24px), 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

.camera-fs-shutter {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: transparent;
    border: 4px solid #fff;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.camera-fs-shutter-inner {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ed4956;  /* Rot, wie zuvor */
    transition: transform 0.1s;
    display: block;
}
.camera-fs-shutter:hover .camera-fs-shutter-inner {
    background: #ff5b67;
}
.camera-fs-shutter:active {
    transform: scale(0.94);
}
.camera-fs-shutter:active .camera-fs-shutter-inner {
    transform: scale(0.85);
}

/* Kamera-Page selbst: Padding minimal halten */
.capture-page {
    padding-bottom: 120px;  /* Platz für Bottom-Nav */
}

/* Bei aktiver Kamera den Page-Inhalt verstecken (ist eh hinterm Vollbild) */
body.camera-fs-active .capture-page,
body.camera-fs-active main {
    visibility: hidden;
}

/* Cache-Bust: 4.4 */

/* ====================================================================
   ITERATION 4.6: Slot-System + Support-Page Redesign
   ==================================================================== */

/* === Slot-Counter klein in Private-Row === */
/* Iter 5.63: Wieder Border + Hintergrund wie andere Pills (vorher: transparent) */
.ig-slot-counter {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: 12.5px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    color: var(--text) !important;
    padding: 5px 12px !important;
    font-weight: 600;
    transition: border-color 0.15s;
}
.ig-slot-counter.is-warn {
    color: #ffc107 !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), transparent) !important;
}
.ig-slot-counter.is-full {
    color: #ed4956 !important;
    border-color: rgba(237, 73, 86, 0.5) !important;
    background: linear-gradient(135deg, rgba(237, 73, 86, 0.10), transparent) !important;
    animation: slot-text-pulse 2s ease-in-out infinite;
}
@keyframes slot-text-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.7; }
}

/* === Slot-Banner === */
.slot-banner {
    margin: 12px 16px 16px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}
.slot-banner strong {
    display: block;
    font-size: 15px;
    margin-bottom: 6px;
}
.slot-banner p {
    margin: 6px 0;
    font-size: 13px;
}
.slot-banner-full {
    background: rgba(237, 73, 86, 0.1);
    border: 1px solid rgba(237, 73, 86, 0.4);
}
.slot-banner-full strong { color: #ed4956; }
.slot-banner-warn {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.4);
}
.slot-banner-warn strong { color: #ffc107; }

.slot-banner .btn {
    margin-top: 8px;
    text-decoration: none;
}

.slot-banner a {
    color: #03d7e2;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* === Slot-Voll-Hinweis im Quest-Detail / Capture === */
.slot-warn-inline {
    margin-bottom: 16px;
    text-align: left;
    line-height: 1.5;
}
.slot-warn-inline strong { display: block; margin-bottom: 4px; }
.slot-warn-inline p {
    margin: 4px 0 0;
    font-size: 13px;
}

/* === Support-Page Quick-Help-Cards === */
.support-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 24px;
}
.support-quick-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    text-decoration: none !important;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s, transform 0.1s;
}
.support-quick-card:hover {
    border-color: #03d7e2;
    transform: translateY(-2px);
}
.support-quick-icon {
    font-size: 28px;
    margin-bottom: 4px;
}
.support-quick-card strong {
    font-size: 14px;
    font-weight: 600;
}
.support-quick-card small {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.35;
}

@media (max-width: 480px) {
    .support-quick-grid { grid-template-columns: 1fr; }
}

/* === Support Direct-Contact-Box === */
.support-contact-info {
    background: rgba(3, 215, 226, 0.06);
    border: 1px solid rgba(3, 215, 226, 0.2);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
    font-size: 14px;
}
.support-contact-info h2 {
    margin-bottom: 8px !important;
    border-top: none !important;
    padding-top: 0 !important;
    font-size: 16px !important;
}
.support-contact-info a {
    color: #03d7e2;
    font-weight: 600;
    text-decoration: none;
}
.support-contact-info a:hover { text-decoration: underline; }

/* Cache-Bust: 4.6 */

/* ====================================================================
   ITERATION 4.7: Kamera-Loader + Error-Screen + MatLuk-Branding
   ==================================================================== */

/* === Loader-Overlay (während getUserMedia auf Permission wartet) === */
.camera-fs-loader {
    position: absolute;
    inset: 0;
    z-index: 5;  /* unter den Top/Bottom-Bars (z=10), aber über dem Video */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(135deg, #0b0d12 0%, #1a1d28 100%);
    color: #fff;
    text-align: center;
    padding: 32px;
}
.camera-fs-loader-logo {
    width: 96px;
    height: 96px;
    margin-bottom: 8px;
    animation: matluk-pulse 2s ease-in-out infinite;
}
@keyframes matluk-pulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.05); }
}
.camera-fs-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(3, 215, 226, 0.2);
    border-top-color: #03d7e2;
    border-radius: 50%;
    animation: matluk-spin 0.9s linear infinite;
}
@keyframes matluk-spin {
    to { transform: rotate(360deg); }
}
.camera-fs-loader-text {
    font-size: 17px;
    font-weight: 600;
    margin: 8px 0 0;
}
.camera-fs-loader-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 280px;
    line-height: 1.4;
}

/* === Error-Screen === */
.camera-fs-error {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(135deg, #1a0d12 0%, #2a1d28 100%);
    color: #fff;
    text-align: center;
    padding: 32px 24px;
    /* Iter 5.1: Scrollbar wenn Anleitung nicht reinpasst */
    overflow-y: auto;
    /* Safe-Area Insets damit auf iPhone nichts hinter Notch verschwindet */
    padding-top: max(env(safe-area-inset-top, 0px) + 32px, 32px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px) + 32px, 32px);
}
.camera-fs-error-icon {
    font-size: 56px;
    opacity: 0.85;
    flex-shrink: 0;
}
.camera-fs-error h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    flex-shrink: 0;
}
.camera-fs-error p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 340px;
    white-space: pre-line;  /* erhält \n in Fehlermeldungen */
    text-align: left;  /* Iter 5.1: Linksbündig damit nummerierte Liste lesbar ist */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 14px 16px;
}
.camera-fs-error .btn {
    margin-top: 8px;
    flex-shrink: 0;
}

/* === MatLuk-Brand in Top-Bar (zentriert) === */
.camera-fs-topbar {
    /* Override für 3-Spalten-Layout */
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
.camera-fs-topbar > button:first-of-type {
    justify-self: start;
}
.camera-fs-topbar > button:last-of-type {
    justify-self: end;
}
.camera-fs-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    user-select: none;
}
.camera-fs-brand-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}

/* === Video sanft einblenden === */
.camera-fs-video {
    transition: opacity 0.25s;
}

/* === Z-Index-Hierarchie sauber halten === */
.camera-fs-topbar,
.camera-fs-bottombar {
    z-index: 10 !important;  /* IMMER über Loader und Video */
}

/* === Login-Hero: MatLuk-Schriftzug deutlicher === */
.auth-hero-title {
    /* Wir machen das Branding deutlicher */
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(135deg, #03d7e2, #146cfe);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: 8px 0 4px !important;
}
.auth-hero-brand {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mute);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

/* === Header-Brand "MatLuk" auch wenn auf Mobile === */
.brand-text {
    font-weight: 700 !important;
}
.brand-text::before {
    content: "MatLuk · ";
    color: var(--text-mute);
    font-weight: 500;
    margin-right: 2px;
}
@media (max-width: 380px) {
    /* Auf sehr schmalen Screens kürzen */
    .brand-text::before { content: ""; }
}

/* === Bottom-Nav: alter MatLuk-Schriftzug-Balken raus (Iter 4.8) === */
/* Wir nutzen jetzt das MatLuk-Logo direkt als Icon im CTA-Button, kein Text-Balken mehr */

/* Cache-Bust: 4.7 */

/* ====================================================================
   ITERATION 5.0: HARTE CTA-BUTTON-OVERRIDES
   Falls Browser-Cache alte ::after-Regel persistiert, hier mit
   !important und unset überschreiben.
   ==================================================================== */

/* Alte ::after-Schriftzug-Regel UNDO falls noch im Browser-Cache */
.bn-cta::after,
.bn-cta::before {
    content: none !important;
    display: none !important;
}

/* CTA-Button: voller Reset von Browser-Defaults
   Iter 5.2: Der Button selbst muss komplett transparent sein, sonst sieht man 
   den Browser-Standard-Button-Hintergrund (das war der "graue Kasten"!) */
.bn-cta {
    padding: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
}
.bn-cta:focus,
.bn-cta:focus-visible,
.bn-cta:active {
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.bn-cta-circle {
    width: 56px !important;
    height: 56px !important;
    background: #fff !important;
    color: var(--bg) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(3, 215, 226, 0.6),
                0 6px 20px rgba(3, 215, 226, 0.5) !important;
    overflow: hidden !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bn-cta-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    pointer-events: none !important;
}

/* Cache-Bust: 5.2 */

/* ====================================================================
   ITERATION 5.3: 1V1-DUELLE
   ==================================================================== */

/* === Duelle-Banner auf Quests-Übersicht === */
.duels-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(237, 73, 86, 0.15), rgba(255, 153, 0, 0.1));
    border: 1px solid rgba(237, 73, 86, 0.3);
    border-radius: 14px;
    padding: 16px 20px;
    margin: 16px 0 24px;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.15s, border-color 0.15s;
}
.duels-banner:hover {
    transform: translateY(-2px);
    border-color: rgba(237, 73, 86, 0.6);
}
.duels-banner-icon {
    font-size: 32px;
    line-height: 1;
}
.duels-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.duels-banner-text strong {
    font-size: 16px;
    font-weight: 700;
}
.duels-banner-text small {
    font-size: 12px;
    color: var(--text-dim);
}
.duels-banner-arrow {
    font-size: 24px;
    color: var(--text-dim);
}

/* === Duelle-Übersichts-Page === */
.duels-page { max-width: 720px; margin: 0 auto; }
.duels-header {
    margin-bottom: 24px;
    text-align: center;
}
.duels-header h1 {
    font-size: 28px;
    margin: 0 0 4px;
}

.duels-page h2 {
    font-size: 17px;
    margin: 24px 0 12px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

/* === Duell-Cards === */
.duel-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.duel-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, transform 0.1s;
}
.duel-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.duel-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    flex-wrap: wrap;
    gap: 8px;
}
.duel-card-head strong {
    font-size: 15px;
}
.duel-card-head small {
    color: var(--text-dim);
    font-size: 12px;
    display: block;
    margin-top: 2px;
}

.duel-status {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
}
.duel-status-pending { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.duel-status-accepted { background: rgba(3, 215, 226, 0.15); color: #03d7e2; }
.duel-status-running { background: rgba(237, 73, 86, 0.15); color: #ed4956; }
.duel-status-decided { background: rgba(76, 175, 80, 0.15); color: #4caf50; }
.duel-status-expired { background: rgba(150, 150, 150, 0.15); color: #999; }
.duel-status-cancelled { background: rgba(150, 150, 150, 0.15); color: #777; }

.duel-card-invite {
    border-color: rgba(255, 193, 7, 0.4);
    background: rgba(255, 193, 7, 0.05);
}
.duel-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* === Duell-Erstellung === */
.duel-create-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.duel-create-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}
.duel-create-icon {
    font-size: 36px;
    margin-bottom: 8px;
}
.duel-create-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
}
.duel-create-card p {
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 8px;
}
.duel-create-card small {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}
.duel-create-form {
    margin-top: 12px;
}

/* === Duell-Detail === */
.duel-detail-page { max-width: 600px; margin: 0 auto; }
.duel-detail-head {
    text-align: center;
    margin-bottom: 16px;
}
.duel-detail-head h1 {
    margin: 8px 0 4px;
}
.duel-detail-meta {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

/* === VS-Anzeige === */
.duel-vs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    margin: 24px 0;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.duel-player {
    text-align: center;
    padding: 12px 8px;
    border-radius: 10px;
}
.duel-player.is-winner {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.4);
}
.duel-player-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}
.duel-player small {
    font-size: 11px;
    color: var(--text-dim);
    display: block;
}
.duel-player-status {
    margin-top: 8px;
    font-size: 12px;
    color: #03d7e2;
    font-weight: 600;
}
.duel-vs-divider {
    font-size: 22px;
    font-weight: 900;
    color: #ed4956;
    letter-spacing: 0.05em;
}

/* === Box-Info === */
.duel-box-info {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 16px 0;
    font-size: 14px;
}

/* === Action-Cards === */
.duel-action-card {
    background: rgba(3, 215, 226, 0.06);
    border: 1px solid rgba(3, 215, 226, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}
.duel-action-card p {
    margin: 0 0 12px;
}

/* === Running-Quest === */
.duel-running-quest {
    background: var(--bg-card);
    border: 2px solid #ed4956;
    border-radius: 12px;
    padding: 24px 20px;
    margin: 20px 0;
    text-align: center;
}
.duel-running-quest h2 {
    margin: 16px 0 8px;
    font-size: 18px;
}
.duel-running-quest p {
    color: var(--text-dim);
    margin: 0 0 16px;
    line-height: 1.5;
}

/* === Timer === */
.duel-timer {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    transition: color 0.4s ease;
}
/* Iter 5.999p: Farb-Stufen je nach Restzeit
 *   > 12h  -> ok    (gruen)
 *   6h-12h -> warn  (orange)
 *   1h-6h  -> hot   (gelb-orange)
 *   < 1h   -> low   (rot, pulsierend)
 */
.duel-timer.duel-timer-ok       { color: #2e9e3a; }     /* sattes Gruen */
.duel-timer.duel-timer-warn     { color: #ea8a14; }     /* Orange */
.duel-timer.duel-timer-hot      { color: #e26a08; }     /* dunkleres Orange */
.duel-timer.duel-timer-low {
    color: #ed4956;
    animation: timer-pulse 1s ease-in-out infinite;
}
.duel-timer.duel-timer-expired  { color: #888; animation: none; }
.duel-timer-big {
    font-size: 48px;
    font-weight: 800;
    color: #ed4956;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    transition: color 0.4s ease;
}
/* Iter 5.999p: Big-Timer auch mit Stufen */
.duel-timer-big.duel-timer-ok    { color: #2e9e3a; }
.duel-timer-big.duel-timer-warn  { color: #ea8a14; }
.duel-timer-big.duel-timer-hot   { color: #e26a08; }
.duel-timer-big.duel-timer-low {
    color: #ed4956;
    animation: timer-pulse 0.8s ease-in-out infinite;
}
.duel-timer-big.duel-timer-expired {
    color: #888;
    animation: none;
}
@keyframes timer-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.04); }
}

/* === Result === */
.duel-result {
    text-align: center;
    padding: 24px 20px;
    border-radius: 14px;
    margin: 20px 0;
}
.duel-result h2 {
    margin: 0 0 10px;
    font-size: 24px;
}
.duel-result.is-winner {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(3, 215, 226, 0.1));
    border: 2px solid rgba(76, 175, 80, 0.5);
}
.duel-result.is-loser {
    background: rgba(150, 150, 150, 0.05);
    border: 1px solid var(--border);
}

/* === Duell-Box-Info-Card auf Box-Detail === */
.duel-box-info-card {
    background: linear-gradient(135deg, rgba(237, 73, 86, 0.08), rgba(255, 153, 0, 0.05));
    border: 1px solid rgba(237, 73, 86, 0.3);
    border-radius: 14px;
    padding: 24px 20px;
    margin: 20px 0;
    text-align: center;
}
.duel-box-info-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.duel-box-info-card h3 {
    margin: 0 0 12px;
    font-size: 20px;
    color: #ed4956;
}
.duel-box-info-card p {
    margin: 8px 0;
    line-height: 1.5;
}
.duel-box-info-card ol {
    text-align: left;
    max-width: 400px;
    margin: 16px auto;
    padding-left: 24px;
    line-height: 1.6;
}
.duel-box-info-card ol li {
    margin: 6px 0;
}

/* Cache-Bust: 5.3 */

/* ====================================================================
   ITERATION 5.5: Neues Admin-Panel + Schnell-Review
   ==================================================================== */

/* === Layout === */
/* Iter 5.34: Admin-Bereich aus dem 720px-main-Container herauslösen.
   Trick: position fixed beim Hauptcontainer ginge, aber wir nutzen:
   - margin negativ um padding rauszuschieben
   - width: 100vw - sidebars um Browserseite voll zu nehmen
   - max-width: keine - Admin-Page nimmt was da ist */
.adm {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    min-height: calc(100vh - 80px);
    /* Aus dem max-width: 720px-Container von main ausbrechen */
    width: calc(100vw - 16px);  /* 16px für Scrollbar-Reserve */
    max-width: none;
    margin-left: calc(50% - 50vw + 8px);
    margin-right: calc(50% - 50vw + 8px);
    margin-top: -40px;  /* überschreibt main padding-top */
    margin-bottom: -80px;  /* überschreibt main padding-bottom */
    background: var(--bg);
    box-sizing: border-box;
}

.adm-main {
    min-width: 0;
    padding: 16px 24px;
    overflow-x: visible;
    max-width: 100%;
    box-sizing: border-box;
}

.adm-sidebar {
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
}

.adm-brand {
    padding: 0 20px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.adm-brand strong { font-size: 16px; }
.adm-brand small { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }

.adm-nav {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
}
.adm-nav-section {
    margin-bottom: 18px;
}
.adm-nav-label {
    display: block;
    padding: 0 20px 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.adm-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.12s;
    position: relative;
}
.adm-nav a:hover { background: var(--bg-elevated); }
.adm-nav a.is-active {
    background: linear-gradient(90deg, rgba(3,215,226,0.15), transparent);
    color: #03d7e2;
    font-weight: 600;
    border-left: 3px solid #03d7e2;
    padding-left: 17px;
}
.adm-nav-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.adm-nav-text {
    flex: 1;
    /* Iter 5.29: Lange Texte sollen umbrechen statt abgeschnitten zu werden */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adm-nav-badge {
    background: #ed4956;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}

.adm-sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}
.adm-back-app {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13px;
}
.adm-back-app:hover { color: var(--text); }

.adm-main {
    padding: 24px 32px;
    min-width: 0;
    max-width: 100%;
    overflow-x: visible;
    box-sizing: border-box;
}

/* === Page-Head === */
.adm-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.adm-page-head h1 {
    margin: 0 0 4px;
    font-size: 24px;
}
.adm-page-head p {
    margin: 0;
    color: var(--text-dim);
    font-size: 14px;
}

/* === Dashboard Hero === */
.adm-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 14px;
    margin-bottom: 24px;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.adm-hero:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.adm-hero-warn {
    background: linear-gradient(135deg, rgba(237, 73, 86, 0.15), rgba(255, 153, 0, 0.1));
    border: 1px solid rgba(237, 73, 86, 0.4);
    color: var(--text);
}
.adm-hero-ok {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.12), rgba(3, 215, 226, 0.08));
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: var(--text);
}
.adm-hero-icon {
    font-size: 40px;
    line-height: 1;
}
.adm-hero-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.adm-hero-text strong { font-size: 18px; }
.adm-hero-text small { font-size: 13px; color: var(--text-dim); }

/* === KPIs === */
.adm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}
.adm-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.adm-kpi-num {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
}
.adm-kpi-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* === Quick-Grid === */
.adm-section-title {
    margin: 32px 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.adm-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.adm-quick {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.12s, border-color 0.12s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.adm-quick:hover {
    transform: translateY(-2px);
    border-color: #03d7e2;
}
.adm-quick-icon { font-size: 28px; line-height: 1; }
.adm-quick-label { font-size: 12px; font-weight: 600; }


/* ====================================================================
   REVIEW-QUEUE
   ==================================================================== */

.adm-review-page {
    max-width: 720px;
    margin: 0 auto;
}
.adm-review-stats {
    display: flex;
    gap: 10px;
}
.adm-stat-pill {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.adm-stat-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.adm-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: #03d7e2;
}

.adm-review-stage {
    position: relative;
    min-height: 600px;
}

.adm-review-loading,
.adm-review-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 32px;
    text-align: center;
    color: var(--text-dim);
}
.adm-review-empty-icon {
    font-size: 56px;
}
.adm-review-empty h2 {
    color: var(--text);
    margin: 0;
}
.adm-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: #03d7e2;
    border-radius: 50%;
    animation: matluk-spin 0.9s linear infinite;
}

/* === Review-Card === */
.adm-review-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.25s ease-out, opacity 0.25s;
}
.adm-review-card.swipe-right {
    transform: translateX(120%) rotate(15deg);
    opacity: 0;
}
.adm-review-card.swipe-left {
    transform: translateX(-120%) rotate(-15deg);
    opacity: 0;
}

.adm-review-photo-wrap {
    width: 100%;
    background: #000;
    aspect-ratio: 4/5;
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.adm-review-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.adm-review-info {
    padding: 16px 20px;
}
.adm-review-quest strong {
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
}
.adm-review-quest small {
    color: var(--text-dim);
    font-size: 13px;
}
.adm-review-meta {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.adm-tag {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}
.adm-tag-stars { color: #ffc107; border-color: rgba(255, 193, 7, 0.3); }
.adm-tag-user { color: #03d7e2; border-color: rgba(3, 215, 226, 0.3); }

.adm-review-caption {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
}

/* === Review-Actions === */
.adm-review-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}
.adm-btn-reject,
.adm-btn-pass {
    border: none;
    border-radius: 12px;
    padding: 18px 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #fff;
}
.adm-btn-reject {
    background: linear-gradient(135deg, #ed4956, #c81e2a);
    box-shadow: 0 4px 14px rgba(237, 73, 86, 0.35);
}
.adm-btn-pass {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    box-shadow: 0 4px 14px rgba(76, 175, 80, 0.35);
}
.adm-btn-reject:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(237, 73, 86, 0.5); }
.adm-btn-pass:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(76, 175, 80, 0.5); }
.adm-btn-reject:active,
.adm-btn-pass:active { transform: scale(0.96); }
.adm-btn-icon {
    font-size: 22px;
    line-height: 1;
}
.adm-btn-reject kbd,
.adm-btn-pass kbd {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-family: monospace;
    margin-top: 4px;
}

/* === Reject-Sheet === */
.adm-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.adm-sheet {
    background: var(--bg-card);
    border-radius: 18px 18px 0 0;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    animation: sheet-slide-up 0.25s ease-out;
}
@keyframes sheet-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.adm-sheet header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
}
.adm-sheet header h3 { margin: 0; font-size: 16px; }
.adm-sheet-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
}
.adm-sheet-body {
    padding: 16px 20px 24px;
}

.adm-reject-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
@media (max-width: 480px) { .adm-reject-grid { grid-template-columns: 1fr; } }

.adm-reject-option {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text);
}
.adm-reject-option:hover {
    border-color: #ed4956;
    background: rgba(237, 73, 86, 0.05);
}
.adm-reject-option strong { font-size: 14px; }
.adm-reject-option small { font-size: 11px; color: var(--text-dim); line-height: 1.4; }

.adm-btn-cancel {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
}
.adm-btn-cancel:hover { color: var(--text); }


/* ====================================================================
   RESPONSIVE
   ==================================================================== */

@media (max-width: 900px) {
    .adm {
        grid-template-columns: 1fr;
    }
    .adm-sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 12px 0;
    }
    .adm-nav {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
        padding: 0 12px;
    }
    .adm-nav-section {
        flex-shrink: 0;
        margin-bottom: 0;
        display: flex;
        gap: 2px;
    }
    .adm-nav-label { display: none; }
    .adm-nav a {
        padding: 8px 12px;
        white-space: nowrap;
        font-size: 13px;
    }
    .adm-nav a.is-active { border-left: none; padding-left: 12px; }
    .adm-sidebar-footer { display: none; }
    .adm-brand { display: none; }
    .adm-main { padding: 16px; }
}

@media (max-width: 540px) {
    .adm-review-actions {
        padding: 12px;
        gap: 8px;
    }
    .adm-btn-reject, .adm-btn-pass {
        padding: 14px 8px;
        font-size: 14px;
    }
    .adm-page-head {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Cache-Bust: 5.5 */

/* ====================================================================
   ITERATION 5.6: Review-Page Layout-Update
   Quest oben mittig, Buttons LINKS und RECHTS vom Foto (nicht drunter)
   ==================================================================== */

/* Quest-Banner oben mittig === */
.adm-review-quest-banner {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 24px;
    margin-bottom: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.adm-review-quest-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.3;
}
.adm-review-quest-desc {
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.4;
    margin-bottom: 12px;
}
.adm-review-quest-banner .adm-review-meta {
    justify-content: center;
    margin-top: 0;
}

/* === Battle-Layout: Reject | Foto | Pass === */
.adm-review-arena {
    position: relative;
    min-height: 500px;
}

.adm-review-battle {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    max-width: 100%;
}

/* === Side-Buttons (groß, links/rechts vom Foto) === */
.adm-side-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 16px;
    padding: 24px 20px;
    cursor: pointer;
    color: #fff;
    transition: transform 0.12s, box-shadow 0.15s;
    min-width: 110px;
    min-height: 220px;
    font-weight: 700;
}
.adm-side-btn-reject {
    background: linear-gradient(135deg, #ed4956, #c81e2a);
    box-shadow: 0 6px 20px rgba(237, 73, 86, 0.35);
}
.adm-side-btn-pass {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.35);
}
.adm-side-btn:hover {
    transform: translateY(-3px);
}
.adm-side-btn-reject:hover { box-shadow: 0 10px 30px rgba(237, 73, 86, 0.55); }
.adm-side-btn-pass:hover { box-shadow: 0 10px 30px rgba(76, 175, 80, 0.55); }
.adm-side-btn:active { transform: scale(0.96); }

.adm-side-btn-icon {
    font-size: 56px;
    line-height: 1;
    font-weight: 900;
}
.adm-side-btn-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.adm-side-btn kbd {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-family: monospace;
    margin-top: 6px;
}

/* === Review-Card im Battle-Layout (kompakter weil Buttons schon Platz nehmen) === */
.adm-review-battle .adm-review-card {
    margin: 0;
}
.adm-review-battle .adm-review-photo-wrap {
    aspect-ratio: 4/5;
    max-height: 65vh;
}

/* Caption unter Foto */
.adm-review-battle .adm-review-caption {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
}

/* Override alte Actions-Bar - die brauchen wir nicht mehr */
.adm-review-card .adm-review-actions,
.adm-review-card .adm-review-info {
    display: none !important;
}

/* === Mobile: Buttons UNTER Foto === */
@media (max-width: 720px) {
    .adm-review-battle {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .adm-side-btn {
        min-height: auto;
        min-width: 0;
        flex-direction: row;
        gap: 12px;
        padding: 16px 20px;
    }
    .adm-side-btn-icon {
        font-size: 32px;
    }
    .adm-side-btn-reject {
        order: 3;  /* links → unten */
    }
    .adm-review-battle .adm-review-card {
        order: 1;
    }
    .adm-side-btn-pass {
        order: 2;  /* rechts → in der Mitte (zwischen Foto und Reject) */
    }
    .adm-side-btn kbd { display: none; }  /* Tastatur eh nicht relevant auf Mobile */

    .adm-review-quest-banner { padding: 14px 18px; }
    .adm-review-quest-title { font-size: 18px; }
}

/* Cache-Bust: 5.6 */

/* ====================================================================
   ITERATION 5.9: Admin Sichtbarkeits-Toggles
   ==================================================================== */

/* === Augen-Toggle in der Liste === */
.adm-toggle-btn {
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.adm-toggle-btn:hover {
    transform: scale(1.1);
}
.adm-toggle-btn.is-on {
    background: rgba(76, 175, 80, 0.15);
    border-color: rgba(76, 175, 80, 0.5);
}
.adm-toggle-btn:not(.is-on) {
    background: rgba(150, 150, 150, 0.1);
    border-color: rgba(150, 150, 150, 0.3);
    opacity: 0.6;
}
.adm-toggle-btn:active {
    transform: scale(0.92);
}

/* === Visibility-Fieldset im Edit-Form === */
.adm-visibility-fieldset {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.06), rgba(76, 175, 80, 0.04));
    border: 1px solid rgba(3, 215, 226, 0.3);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 16px 0 20px;
}
.adm-visibility-fieldset legend {
    font-weight: 700;
    color: #03d7e2;
    padding: 0 8px;
    font-size: 14px;
}
.adm-visibility-fieldset .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.adm-visibility-fieldset input[type="checkbox"] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.adm-visibility-fieldset strong {
    color: var(--text);
    font-size: 14px;
}

/* === row-inactive in Listen === */
.admin-table tr.row-inactive {
    opacity: 0.5;
}
.admin-table tr.row-inactive:hover {
    opacity: 0.85;
}

/* Cache-Bust: 5.9 */

/* ====================================================================
   ITERATION 5.10: Quests-Page Redesign mit Tabs + Hero
   ==================================================================== */

.qx-page {
    max-width: 720px;
    margin: 0 auto;
}

/* === HERO === */
.qx-hero {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.12), rgba(255, 153, 0, 0.08));
    border: 1px solid rgba(3, 215, 226, 0.3);
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.qx-hero-stats {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.qx-hero-stat {
    display: flex;
    align-items: center;
    gap: 10px;
}
.qx-hero-icon {
    font-size: 28px;
    line-height: 1;
}
.qx-hero-num {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}
.qx-hero-main .qx-hero-num {
    font-size: 28px;
    color: #ffc107;
}
.qx-hero-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}
.qx-hero-energy {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    flex-wrap: wrap;
}
.qx-hero-energy strong {
    color: #03d7e2;
    font-size: 15px;
}

/* === TABS === */
.qx-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin: 20px 0 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
}
.qx-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dim);
    transition: background 0.15s, color 0.15s, transform 0.1s;
    cursor: pointer;
    text-align: center;
}
.qx-tab:hover {
    background: var(--bg-elevated);
    color: var(--text);
}
.qx-tab.is-active {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.2), rgba(76, 175, 80, 0.12));
    color: #03d7e2;
    box-shadow: inset 0 0 0 1px rgba(3, 215, 226, 0.4);
}
.qx-tab-icon {
    font-size: 22px;
    line-height: 1;
}
.qx-tab-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.qx-tab-count {
    font-size: 11px;
    background: rgba(0, 0, 0, 0.15);
    padding: 1px 8px;
    border-radius: 8px;
    min-width: 20px;
    margin-top: 2px;
    font-weight: 700;
}
.qx-tab.is-active .qx-tab-count {
    background: rgba(3, 215, 226, 0.25);
    color: #fff;
}

/* === BOX-LISTE (Aktiv) === */
.qx-box-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qx-box-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
}
.qx-box-card:hover {
    transform: translateY(-2px);
    border-color: rgba(3, 215, 226, 0.5);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.qx-box-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    padding: 14px 16px;
    align-items: center;
    text-decoration: none;
    color: var(--text);
}
.qx-box-icon-col {
    position: relative;
    flex-shrink: 0;
}
.qx-box-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    overflow: hidden;
}
.qx-box-icon-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.qx-box-main {
    min-width: 0;
}
.qx-box-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.qx-box-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}
.qx-box-tag {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}
.qx-box-tag-event { background: rgba(255, 153, 0, 0.2); color: #ff9900; }
.qx-box-tag-duel { background: rgba(237, 73, 86, 0.2); color: #ed4956; }
.qx-box-tag-pokale { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.qx-box-desc {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.4;
}
.qx-box-progress-text {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.qx-box-progress-text strong {
    color: var(--text);
    font-size: 13px;
}
.qx-box-progress-bar {
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}
.qx-box-progress-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #03d7e2, #4caf50);
    border-radius: 3px;
    transition: width 0.5s ease-out;
}
.qx-box-empty {
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
}
.qx-box-arrow {
    font-size: 28px;
    color: var(--text-dim);
    line-height: 1;
}

/* === LOCKED === */
.qx-box-card-locked {
    opacity: 0.7;
}
.qx-icon-locked {
    filter: grayscale(0.6) brightness(0.7);
}
.qx-lock-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #2a2a2a;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.qx-box-locked-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.qx-lock-reason {
    font-size: 13px;
    color: #ffc107;
    font-weight: 600;
}
.qx-box-locked-info small {
    font-size: 11px;
    color: var(--text-dim);
}

/* === TROPHY-GRID (Geschafft) === */
.qx-trophy-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.qx-trophy-card {
    background: linear-gradient(160deg, rgba(255, 193, 7, 0.12), rgba(76, 175, 80, 0.08));
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
}
.qx-trophy-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(255, 193, 7, 0.2);
}
.qx-trophy-link {
    display: block;
    padding: 16px 12px 14px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    position: relative;
    z-index: 1;
}
.qx-trophy-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.15), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.qx-trophy-icon-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: rgba(255, 193, 7, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.qx-trophy-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}
.qx-trophy-emoji {
    font-size: 40px;
    line-height: 1;
}
.qx-trophy-check {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #4caf50;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    border: 3px solid var(--bg-card);
}
.qx-trophy-name {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}
.qx-trophy-stats {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.qx-trophy-date {
    display: block;
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.qx-trophy-title {
    margin-top: 8px;
    padding: 4px 8px;
    background: rgba(255, 193, 7, 0.15);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #ffc107;
}

/* === EMPTY === */
.qx-empty {
    text-align: center;
    padding: 40px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.qx-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.qx-empty h2 {
    margin: 0 0 6px;
    font-size: 18px;
}
.qx-empty p {
    color: var(--text-dim);
    font-size: 14px;
    margin: 0 0 16px;
    line-height: 1.5;
}

/* === MOBILE === */
@media (max-width: 540px) {
    .qx-hero-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .qx-hero-main .qx-hero-num { font-size: 24px; }
    .qx-tab-label { font-size: 11px; }
    .qx-tab-icon { font-size: 18px; }
    .qx-tab { padding: 8px 4px; }
    .qx-trophy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .qx-trophy-icon-wrap { width: 64px; height: 64px; }
    .qx-trophy-img { width: 50px; height: 50px; }
    .qx-trophy-emoji { font-size: 32px; }
    .qx-box-icon { width: 56px; height: 56px; font-size: 30px; }
}

/* Cache-Bust: 5.10 */

/* ====================================================================
   ITERATION 5.11: Native-Kamera-Workflow
   ==================================================================== */

/* === Großer "Kamera öffnen"-Button: einladend, klar === */
.btn-camera-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    padding: 18px 24px;
    background: linear-gradient(135deg, #03d7e2, #0190a0);
    color: #fff;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(3, 215, 226, 0.35);
    transition: transform 0.12s, box-shadow 0.15s;
    text-decoration: none;
}
.btn-camera-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(3, 215, 226, 0.5);
}
.btn-camera-cta:active {
    transform: scale(0.97);
}

/* === Vorschau-Bild === */
.capture-preview-stage {
    width: 100%;
    margin: 16px 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.capture-preview-stage img {
    width: 100%;
    max-height: 65vh;
    object-fit: contain;
    display: block;
}
.capture-controls {
    margin: 12px 0 16px;
    display: flex;
    gap: 8px;
}
.capture-controls .btn {
    flex: 1;
}

/* === Quest-Auswahl-Liste (capture-page) === */
.capture-quest-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.capture-quest-item {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    transition: transform 0.1s, border-color 0.15s;
}
.capture-quest-item:hover {
    transform: translateY(-2px);
    border-color: #03d7e2;
}
.capture-quest-item-info strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}
.capture-quest-item-info small {
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.3;
}
.capture-quest-item-cost {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    text-align: right;
    color: var(--text-dim);
}

/* Cache-Bust: 5.11 */

/* ====================================================================
   ITERATION 5.12: hidden-Attribut Override-Fix
   Das HTML5-Attribut hidden wird sonst von .capture-init-actions
   und ähnlichen Klassen mit explizitem display:flex überschrieben.
   ==================================================================== */
[hidden] {
    display: none !important;
}

/* ====================================================================
   ITERATION 5.13: Foto-Modal Redesign (Pinnwand-Detail)
   ==================================================================== */

/* Photo-Wrap passt sich jetzt dem Bildformat an */
/* Iter v6.40: Foto-Wrap nimmt natuerliche Bildgroesse, max 55vh -
   schrumpft NICHT mit dem Modal mit (flex-shrink:0), damit der
   Foto-Bereich konstant bleibt und der Rest darunter scrollbar wird. */
.ig-modal-photo-wrap {
    background: var(--bg) !important;
    margin: -16px -16px 16px !important;
    aspect-ratio: auto !important;
    max-height: 55vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;       /* Iter v6.40: Foto-Bereich schrumpft nicht */
}
.ig-modal-photo-wrap img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 55vh;
    object-fit: contain !important;
    display: block;
}

/* Modal-Card: passt sich an Inhalt an, max 92vh hoch (wie MatLuk-Modal) */
.ig-modal-card.ig-modal-photo {
    max-width: 520px;
    max-height: 92vh;
    /* Iter v6.40: flex-Layout damit Body scrollbar wird wie beim MatLuk-Modal */
    display: flex;
    flex-direction: column;
}

/* Iter v6.40: Body im Photo-Modal scrollt, der Foto-Bereich bleibt fix oben.
   Das gibt das gleiche Verhalten wie das MatLuk-Modal. */
.ig-modal-card.ig-modal-photo .ig-modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;        /* wichtig: ohne min-height: 0 schrumpft das Body nicht in flex */
    -webkit-overflow-scrolling: touch;
}

/* === Section-Wrapper === */
.photo-modal-section {
    margin: 0 0 16px;
}
.photo-modal-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

/* === Sichtbarkeit als Segmented Control === */
.photo-vis-segments {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
}
.photo-vis-seg {
    cursor: pointer;
    border-radius: 8px;
    text-align: center;
    transition: background 0.15s;
    position: relative;
    overflow: hidden;
}
.photo-vis-seg input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.photo-vis-seg span {
    display: block;
    padding: 10px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    line-height: 1.4;
}
.photo-vis-seg span:first-line {
    font-size: 18px;  /* Emoji oben groß */
}
.photo-vis-seg:hover span {
    background: rgba(3, 215, 226, 0.06);
    color: var(--text);
}
.photo-vis-seg input:checked + span {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.25), rgba(76, 175, 80, 0.15));
    color: #03d7e2;
    box-shadow: inset 0 0 0 1px rgba(3, 215, 226, 0.5);
}
.photo-vis-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
}

/* === Action-Buttons unten === */
.photo-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}
.photo-modal-action-form {
    margin: 0;
}
.photo-action-btn {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 8px;
    cursor: pointer;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.photo-action-btn:hover {
    border-color: #03d7e2;
}
.photo-action-icon {
    font-size: 22px;
    line-height: 1;
}
.photo-action-label {
    font-size: 12px;
    font-weight: 600;
}
.photo-action-btn.is-active {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.6);
    color: #ffc107;
}
.photo-action-danger:hover {
    border-color: #ed4956;
    background: rgba(237, 73, 86, 0.08);
    color: #ed4956;
}

/* Modal mit Animation */
.ig-modal:not([hidden]) .ig-modal-card {
    animation: modal-pop 0.2s ease-out;
}
@keyframes modal-pop {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Mobile: Modal Vollbild-nah, Fotos optimieren */
@media (max-width: 540px) {
    .ig-modal-photo-wrap {
        max-height: 45vh;
    }
    .ig-modal-photo-wrap img {
        max-height: 45vh;
    }
    .photo-vis-seg span {
        font-size: 10px;
        padding: 8px 2px;
    }
    .photo-action-btn {
        padding: 10px 6px;
    }
}

/* Cache-Bust: 5.13 */

/* ====================================================================
   ITERATION 5.14: Friends + Duelle-Integration
   ==================================================================== */

/* === Bottom-Nav-Badge === */
.bn-item {
    position: relative;
}
.bn-badge {
    position: absolute;
    top: 4px;
    right: 50%;
    transform: translateX(15px);
    background: #ed4956;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg);
    box-sizing: content-box;
    line-height: 1;
    pointer-events: none;
    animation: bn-badge-pulse 2s ease-in-out infinite;
}
@keyframes bn-badge-pulse {
    0%, 100% { transform: translateX(15px) scale(1); }
    50%      { transform: translateX(15px) scale(1.08); }
}

/* === Friends-Liste-Erweiterungen === */
.friends-actions-stacked {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}
.friends-btn-block {
    color: var(--text-dim);
    transition: color 0.15s;
}
.friends-btn-block:hover {
    color: #ed4956;
}

/* === Duell-Button in Friends-Liste === */
.friends-duel-btn {
    background: linear-gradient(135deg, rgba(237, 73, 86, 0.15), rgba(255, 153, 0, 0.1));
    border: 1px solid rgba(237, 73, 86, 0.4);
    color: #ed4956;
    font-size: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s;
}
.friends-duel-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(237, 73, 86, 0.3);
}

/* === Eingehende Anfragen mit 3 Buttons (Annehmen/Ablehnen/Block) === */
.friends-item-incoming .friends-actions {
    flex-shrink: 0;
}

/* === Blockierte Liste === */
.friends-list-blocked .friends-item {
    opacity: 0.6;
}
.friends-list-blocked .friends-item:hover {
    opacity: 1;
}

/* === Duell-Box-Picker im Friends-Modal === */
.duel-boxes-pick {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}
.duel-box-pick-form {
    margin: 0;
}
.duel-box-pick-btn {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    transition: border-color 0.15s, transform 0.1s;
}
.duel-box-pick-btn:hover {
    border-color: #ed4956;
    transform: translateY(-1px);
}
.duel-box-pick-icon {
    font-size: 28px;
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}
.duel-box-pick-info {
    flex: 1;
    min-width: 0;
}
.duel-box-pick-info strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}
.duel-box-pick-info small {
    color: var(--text-dim);
    font-size: 12px;
}

/* === Duell-Btn im Wall-Profil-Header === */
.ig-edit-btn-duel {
    background: linear-gradient(135deg, rgba(237, 73, 86, 0.15), rgba(255, 153, 0, 0.1)) !important;
    border-color: rgba(237, 73, 86, 0.4) !important;
    color: #ed4956 !important;
    font-weight: 700;
}
.ig-edit-btn-duel:hover {
    background: linear-gradient(135deg, rgba(237, 73, 86, 0.25), rgba(255, 153, 0, 0.18)) !important;
    transform: translateY(-1px);
}

/* Cache-Bust: 5.14 */

/* ====================================================================
   ITERATION 5.15: Shop + Admin-Verbesserungen + Friend-Remove + Box-Picker
   ==================================================================== */

/* === Friend-Remove-Button === */
.friends-btn-remove {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.friends-btn-remove:hover {
    color: #ed4956;
    border-color: #ed4956;
    background: rgba(237, 73, 86, 0.08);
}

/* === Box-Image-Picker im Admin === */
.adm-current-image {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: 10px;
    border: 1px solid var(--border);
}
.adm-current-image-row {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 8px;
}
.adm-current-image-preview {
    width: 96px;
    height: 96px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}
.adm-image-upload-section {
    margin: 16px 0;
    padding: 12px;
    background: rgba(3, 215, 226, 0.06);
    border-radius: 10px;
    border: 1px dashed rgba(3, 215, 226, 0.4);
}
.adm-upload-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.adm-upload-form input[type="file"] {
    flex: 1;
    min-width: 200px;
}
.adm-image-library-section {
    margin-top: 16px;
}
.adm-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    background: var(--bg-elevated);
    border-radius: 8px;
}
.adm-image-tile {
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: border-color 0.15s, transform 0.1s;
}
.adm-image-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.adm-image-tile:hover {
    border-color: #03d7e2;
    transform: scale(1.05);
}
.adm-image-tile.is-selected {
    border-color: #03d7e2;
    box-shadow: 0 0 0 3px rgba(3, 215, 226, 0.3);
}
.adm-image-emoji {
    font-size: 28px;
    line-height: 1;
}
.adm-image-tile span {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* ============================================================
   ITER v6.43: Admin Daily-Tages-Picker (Quest-Edit fuer Dailies)
   30-Tage-Grid, jedes Tile = 1 Tag. Belegte Tage sind disabled.
   ============================================================ */
.adm-daily-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 6px;
    margin: 4px 0 6px;
}
.adm-daily-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 60px;
    padding: 8px 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}
.adm-daily-day:hover:not(:disabled) {
    border-color: #03d7e2;
    background: rgba(3, 215, 226, 0.06);
    transform: translateY(-1px);
}
.adm-daily-weekday {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    font-weight: 600;
}
.adm-daily-day-num {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.adm-daily-badge {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #03d7e2;
    background: rgba(3, 215, 226, 0.12);
    padding: 1px 4px;
    border-radius: 3px;
    margin-top: 2px;
}
.adm-daily-day.is-today {
    border-color: rgba(3, 215, 226, 0.55);
}
.adm-daily-day.is-occupied {
    opacity: 0.42;
    cursor: not-allowed;
    background: var(--bg-elevated, rgba(255,255,255,0.03));
}
.adm-daily-day.is-occupied .adm-daily-day-num {
    text-decoration: line-through;
}
.adm-daily-day.is-selected {
    /* Iter v6.43: Auswahl muss sehr deutlich sichtbar sein - vorher kaum
       erkennbar auf weissem Background im Light-Mode. */
    border-color: #03d7e2;
    border-width: 2px;
    background: linear-gradient(135deg, #03d7e2, #146cfe);
    color: white;
    box-shadow: 0 4px 12px rgba(3, 215, 226, 0.4);
    transform: translateY(-1px);
}
.adm-daily-day.is-selected .adm-daily-weekday,
.adm-daily-day.is-selected .adm-daily-day-num {
    color: white;
}
.adm-daily-day.is-selected .adm-daily-badge {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}
/* Haekchen-Indikator damit klar ist: das ist der gewaehlte Tag */
.adm-daily-day.is-selected::after {
    content: "✓";
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    line-height: 1;
}
.adm-daily-day.is-self {
    /* Tag der aktuellen Quest selbst - ist waehlbar, hervorgehoben */
    border-color: rgba(245, 158, 11, 0.6);
    background: rgba(245, 158, 11, 0.06);
}
.adm-daily-day.is-self .adm-daily-badge {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}

/* === Admin Hilfe-Texte === */
.adm-page-hint {
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.5;
    margin: 4px 0 20px;
    max-width: 720px;
}
.adm-help-text {
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
    margin: -4px 0 16px;
    max-width: 720px;
}
.adm-form-hint {
    font-size: 12px;
    color: var(--text-dim);
    margin: 0 0 8px;
    line-height: 1.4;
}
.adm-help-box {
    background: rgba(3, 215, 226, 0.06);
    border: 1px solid rgba(3, 215, 226, 0.2);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 24px 0;
}
.adm-help-box h3 {
    font-size: 14px;
    margin: 0 0 8px;
    color: #03d7e2;
}
.adm-help-box h3:not(:first-child) {
    margin-top: 16px;
}
.adm-help-box ul {
    margin: 0 0 0 20px;
    padding: 0;
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
}
.adm-help-box li {
    margin: 4px 0;
}
.adm-help-box p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* === Admin-Section-Header === */
.adm-section-head {
    margin: 28px 0 8px;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border);
}

/* === Admin Stats-Cards (für Shop) === */
.adm-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 16px 0 24px;
}
.adm-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.adm-stat-icon {
    font-size: 28px;
    line-height: 1;
}
.adm-stat-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}
.adm-stat-label {
    font-size: 12px;
    color: var(--text-dim);
}

/* === Admin Shop-Form === */
.adm-shop-form {
    margin: 16px 0 24px;
}
.adm-price-input {
    width: 100px;
    text-align: right;
    padding: 6px 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

/* === User-Detail neue Header-Komponenten === */
.adm-user-head {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 18px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.adm-user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.adm-user-id h1 {
    margin: 0 0 2px;
    font-size: 22px;
}
.adm-user-email {
    margin: 0;
    color: var(--text-dim);
    font-size: 14px;
}
.adm-user-badges {
    margin: 6px 0 4px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.adm-user-meta {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-dim);
}

/* === Admin Stats-Grid (User-Detail) === */
.adm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 12px 0 24px;
}
.adm-stat-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
}
.adm-stat-tile-icon {
    font-size: 22px;
    line-height: 1;
}
.adm-stat-tile-num {
    font-size: 20px;
    font-weight: 800;
    margin: 4px 0 2px;
}
.adm-stat-tile-label {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.3;
}

/* === Boost-Cards im User-Detail === */
.adm-boost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin: 12px 0 24px;
}
.adm-boost-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.adm-boost-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.adm-boost-icon {
    font-size: 24px;
    line-height: 1;
}
.adm-boost-active-badge {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.4);
    border-radius: 8px;
    padding: 8px 12px;
    color: #4caf50;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}
.adm-boost-inactive {
    color: var(--text-dim);
    font-size: 13px;
    margin-bottom: 10px;
    font-style: italic;
}
.adm-boost-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* === Adjust-Forms-Grid === */
.adm-adjust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 12px 0 24px;
}
.adm-adjust-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.adm-adjust-form h3 {
    margin: 0 0 4px;
    font-size: 15px;
}

/* === Friends-Info === */
.adm-friends-info {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 8px 0 24px;
    font-size: 14px;
}

/* ===================== USER-FACING SHOP ===================== */
.shop-page {
    max-width: 800px;
    margin: 0 auto;
}
.shop-wallet {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(255, 153, 0, 0.06));
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 16px 0;
    text-align: center;
    font-size: 16px;
}
.shop-wallet strong {
    color: #ffc107;
    font-size: 22px;
}
.shop-active-boosts {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(3, 215, 226, 0.06));
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 14px;
    padding: 14px 18px;
    margin: 16px 0;
}
.shop-active-boosts h2 {
    margin: 0 0 10px;
    font-size: 16px;
    color: #4caf50;
}
.shop-boost-active {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.shop-boost-active + .shop-boost-active {
    border-top: 1px solid rgba(76, 175, 80, 0.2);
}
.shop-boost-icon {
    font-size: 24px;
    line-height: 1;
}
.shop-boost-active strong {
    display: block;
    font-size: 14px;
}
.shop-boost-active small {
    color: var(--text-dim);
    font-size: 12px;
}
.shop-section-head {
    margin: 24px 0 4px;
    font-size: 18px;
    font-weight: 700;
}
.shop-section-hint {
    margin: 0 0 14px;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.4;
}
.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.shop-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
.shop-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    position: relative;
    transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
}
.shop-card:hover {
    transform: translateY(-3px);
    border-color: #03d7e2;
    box-shadow: 0 6px 20px rgba(3, 215, 226, 0.15);
}
.shop-card-popular {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 4px 14px rgba(255, 193, 7, 0.12);
}
.shop-card-tag {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffc107;
    color: #1a1a1a;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.shop-card-head {
    margin-bottom: 6px;
}
.shop-card-icon {
    font-size: 32px;
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}
.shop-card-head strong {
    font-size: 16px;
}
.shop-card p {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-dim);
}
.shop-card-price {
    font-size: 20px;
    font-weight: 800;
    color: #ffc107;
    margin: 8px 0 12px;
}
.shop-disclaimer {
    margin: 28px 0 16px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
    text-align: center;
}
.acc-list-item-shop {
    background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.05));
}

/* === Mobile === */
@media (max-width: 540px) {
    .shop-grid { grid-template-columns: 1fr; }
    .shop-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .adm-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .adm-image-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* Cache-Bust: 5.15 */

/* ====================================================================
   ITERATION 5.16: Diamanten als Premium-Währung + Boost-No-Verlängerung
   ==================================================================== */

/* === Wallet Diamanten === */
.shop-wallet-diamonds {
    background: linear-gradient(135deg, rgba(146, 92, 252, 0.15), rgba(74, 144, 226, 0.08));
    border-color: rgba(146, 92, 252, 0.4);
}
.shop-wallet-diamonds strong {
    color: #b388ff;
    font-size: 24px;
}

/* === Info-Box mit Erklärung === */
.shop-info-box {
    background: rgba(3, 215, 226, 0.06);
    border: 1px solid rgba(3, 215, 226, 0.25);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 16px 0;
}
.shop-info-box h3 {
    margin: 0 0 8px;
    font-size: 14px;
    color: #03d7e2;
}
.shop-info-box ul {
    margin: 0 0 0 18px;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
}
.shop-info-box li {
    margin: 3px 0;
}

/* === Aktive Boosts: Hint dass kein Re-Buy === */
.shop-active-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
}

/* === Disabled Shop-Card === */
.shop-card-disabled {
    opacity: 0.55;
    pointer-events: none;
}
.shop-card-disabled button[disabled] {
    background: var(--bg-elevated) !important;
    color: var(--text-dim) !important;
    cursor: not-allowed;
}

/* === Diamond-Stat im Quest-Detail-Header === */
.ig-quest-meta-diamond {
    background: rgba(146, 92, 252, 0.15);
    color: #b388ff;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

/* === Diamond-Stat-Tile im Admin === */
.adm-stat-tile-diamonds {
    background: linear-gradient(135deg, rgba(146, 92, 252, 0.12), rgba(74, 144, 226, 0.06));
    border-color: rgba(146, 92, 252, 0.4);
}
.adm-stat-tile-diamonds .adm-stat-tile-num {
    color: #b388ff;
}

/* === Admin: Diamond-Grant-Card === */
.adm-diamond-grant-card {
    background: linear-gradient(135deg, rgba(146, 92, 252, 0.08), rgba(74, 144, 226, 0.04));
    border: 1px solid rgba(146, 92, 252, 0.4);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 12px 0 18px;
}
.adm-diamond-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.adm-diamond-icon {
    font-size: 32px;
    line-height: 1;
}
.adm-diamond-head strong {
    display: block;
    font-size: 16px;
}
.adm-diamond-head small {
    color: var(--text-dim);
    font-size: 13px;
}
.adm-diamond-grant-form {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 10px;
}
.adm-diamond-grant-form .field {
    margin: 0;
}
.adm-diamond-quick {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed rgba(146, 92, 252, 0.2);
}
.adm-diamond-quick small {
    color: var(--text-dim);
    margin-right: 4px;
}

/* === Quests-Hero Diamond-Stat === */
.qx-hero-stats-4 {
    grid-template-columns: 1.2fr 1fr 1fr 1fr !important;
}
.qx-hero-stat-diamond .qx-hero-num {
    color: #b388ff;
}

/* Mobile === */
@media (max-width: 540px) {
    .qx-hero-stats-4 {
        grid-template-columns: 1fr 1fr !important;
    }
    .adm-diamond-grant-form {
        grid-template-columns: 1fr;
    }
}

/* Cache-Bust: 5.16 */

/* ====================================================================
   ITERATION 5.17: Foto-Modal Scroll-Fix
   - Foto-Bereich oben fix sichtbar (kein flex-shrink)
   - Steuerelemente im scrollbaren Body
   - Header sticky
   ==================================================================== */

/* Modal-Card als saubere 3-Zeilen-Struktur */
.ig-modal-card.ig-modal-photo {
    max-width: 520px !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    /* Wichtig: padding raus, body übernimmt */
    padding: 0 !important;
}

/* Header bleibt fix */
.ig-modal-card.ig-modal-photo .ig-modal-header {
    flex-shrink: 0;
    background: var(--bg-card);
    z-index: 2;
}

/* Foto-Bereich: NICHT shrinken, klare Höhe */
.ig-modal-card.ig-modal-photo .ig-modal-body {
    /* WICHTIG: padding 0, weil Foto-Wrap selbst die Ränder regelt */
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;  /* erlaubt das Scrolling im Flex */
}

/* Foto sitzt oben, nimmt nur den Platz den's braucht */
.ig-modal-card.ig-modal-photo .ig-modal-photo-wrap {
    margin: 0 !important;
    background: #000 !important;
    max-height: 50vh !important;
    min-height: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto !important;
}
.ig-modal-card.ig-modal-photo .ig-modal-photo-wrap img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 50vh !important;
    object-fit: contain !important;
}

/* Steuerelemente unter dem Foto - mit Padding */
.ig-modal-card.ig-modal-photo .ig-modal-meta,
.ig-modal-card.ig-modal-photo .ig-modal-caption {
    padding: 0 16px;
    margin: 8px 0;
}
.ig-modal-card.ig-modal-photo .ig-modal-meta:first-of-type {
    margin-top: 12px;
}
.ig-modal-card.ig-modal-photo .photo-modal-section,
.ig-modal-card.ig-modal-photo .photo-modal-actions {
    margin-left: 16px;
    margin-right: 16px;
}
.ig-modal-card.ig-modal-photo .photo-modal-section:last-child,
.ig-modal-card.ig-modal-photo .photo-modal-actions:last-child {
    margin-bottom: 16px;
}

/* Mobile: Foto kleiner, mehr Platz für Controls */
@media (max-width: 540px) {
    .ig-modal-card.ig-modal-photo {
        /* Iter v6.49b: --bn-h-full statt 96vh, damit Card exakt auf
           Nav-Oberkante endet, nicht darueber hinaus. */
        max-height: calc(100dvh - var(--bn-h-full, 80px)) !important;
        margin: 0 !important;
    }
    .ig-modal {
        padding: 8px !important;
        align-items: flex-end !important;
    }
    .ig-modal-card.ig-modal-photo .ig-modal-photo-wrap {
        max-height: 38vh !important;
    }
    .ig-modal-card.ig-modal-photo .ig-modal-photo-wrap img {
        max-height: 38vh !important;
    }
    /* Mobile: Modal nimmt fast vollen Bildschirm */
    .ig-modal-card.ig-modal-photo {
        border-radius: 16px 16px 8px 8px !important;
    }
}

/* Cache-Bust: 5.17 */

/* ====================================================================
   ITERATION 5.18: Modal nochmal Scroll-Fix
   - Komplettes Modal scrollt natürlich
   - Foto begrenzt aber nicht mehr fix
   ==================================================================== */

/* Container scrollt komplett */
.ig-modal-card.ig-modal-photo {
    max-height: 92vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;  /* Kein Flex mehr - normaler Block-Flow */
    -webkit-overflow-scrolling: touch;  /* iOS smooth scroll */
}

/* Header sticky oben */
.ig-modal-card.ig-modal-photo .ig-modal-header {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 3;
    margin: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Body normaler Block (kein eigenes Scrolling) */
.ig-modal-card.ig-modal-photo .ig-modal-body {
    overflow: visible !important;
    padding: 0 !important;
    display: block !important;
}

/* Foto nimmt vernünftige Höhe an */
.ig-modal-card.ig-modal-photo .ig-modal-photo-wrap {
    margin: 0 !important;
    background: #000 !important;
    max-height: 50vh !important;
    flex-shrink: 1;  /* darf shrinken wenn nötig */
    display: flex;
    align-items: center;
    justify-content: center;
}
.ig-modal-card.ig-modal-photo .ig-modal-photo-wrap img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 50vh !important;
    object-fit: contain !important;
}

/* Steuerelemente unter Foto mit normalem Padding */
.ig-modal-card.ig-modal-photo .ig-modal-meta,
.ig-modal-card.ig-modal-photo .ig-modal-caption,
.ig-modal-card.ig-modal-photo .photo-modal-section,
.ig-modal-card.ig-modal-photo .photo-modal-actions {
    margin-left: 16px !important;
    margin-right: 16px !important;
}
.ig-modal-card.ig-modal-photo .photo-modal-actions:last-child {
    margin-bottom: 16px !important;
}

/* Mobile: noch kompakter */
@media (max-width: 540px) {
    .ig-modal-card.ig-modal-photo {
        /* Iter v6.49b: --bn-h-full statt 96vh */
        max-height: calc(100dvh - var(--bn-h-full, 80px)) !important;
    }
    .ig-modal-card.ig-modal-photo .ig-modal-photo-wrap {
        max-height: 40vh !important;
    }
    .ig-modal-card.ig-modal-photo .ig-modal-photo-wrap img {
        max-height: 40vh !important;
    }
}

/* ====================================================================
   ITERATION 5.18: Foto-Battle-Review-Page
   ==================================================================== */

.duel-battle-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 18px 0;
}
.duel-battle-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}
.duel-battle-head h3 {
    margin: 0 0 2px;
    font-size: 17px;
}
.duel-battle-quest-info {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--text-dim);
}
.duel-battle-desc {
    color: var(--text-dim);
    font-size: 13px;
    margin: 0 0 14px;
    line-height: 1.4;
}

.duel-battle-photos {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: stretch;
}
.duel-battle-photo-form {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.duel-battle-photo-card {
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    transition: border-color 0.15s, transform 0.12s;
}
.duel-battle-photo-card:hover {
    border-color: rgba(237, 73, 86, 0.6);
    transform: translateY(-2px);
}
.duel-battle-challenger:hover { border-color: #03d7e2; }
.duel-battle-opponent:hover { border-color: #ff9900; }

.duel-battle-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.duel-battle-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.duel-battle-user-row strong {
    display: block;
    font-size: 14px;
}
.duel-battle-user-row small {
    color: var(--text-dim);
    font-size: 11px;
}
.duel-battle-photo-wrap {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.duel-battle-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.duel-battle-meta {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.4;
}
.duel-battle-missing {
    color: var(--text-dim);
    font-style: italic;
    text-align: center;
    padding: 24px 8px;
    background: var(--bg);
    border-radius: 8px;
}
.duel-battle-pick-btn {
    margin-top: auto;
}

.duel-battle-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-dim);
    width: 40px;
    background: linear-gradient(180deg, transparent, rgba(237, 73, 86, 0.1), transparent);
    border-radius: 8px;
}

/* === Quest-Edit Mode-Picker === */
.adm-mode-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 6px;
}
.adm-mode-option {
    cursor: pointer;
    margin: 0;
}
.adm-mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.adm-mode-card {
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--bg-elevated);
    transition: border-color 0.15s, background 0.15s;
}
.adm-mode-option:hover .adm-mode-card {
    border-color: #03d7e2;
}
.adm-mode-option input:checked + .adm-mode-card {
    border-color: #03d7e2;
    background: rgba(3, 215, 226, 0.08);
    box-shadow: inset 0 0 0 1px rgba(3, 215, 226, 0.4);
}
.adm-mode-icon {
    font-size: 26px;
    line-height: 1;
    display: block;
    margin-bottom: 4px;
}
.adm-mode-card strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}
.adm-mode-card p {
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* === Empty-State Admin === */
.adm-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.adm-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.adm-empty h2 {
    margin: 0 0 6px;
    font-size: 18px;
}
.adm-empty p {
    color: var(--text-dim);
    margin: 0;
    font-size: 14px;
}

/* Mobile: Battle-Photos untereinander */
@media (max-width: 720px) {
    .duel-battle-photos {
        grid-template-columns: 1fr;
    }
    .duel-battle-vs {
        width: auto;
        height: 30px;
        background: linear-gradient(90deg, transparent, rgba(237, 73, 86, 0.1), transparent);
    }
    .adm-mode-picker {
        grid-template-columns: 1fr;
    }
}

/* === Iter v6.43: Duell-Bewertungs-UI Erweiterungen === */
.duel-battle-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.08);
    color: var(--text-dim);
}
.duel-battle-status-judge {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
}
.duel-battle-status-review {
    background: linear-gradient(135deg, #03d7e2, #146cfe);
    color: white;
}
/* Status-Badges am User-Row */
.duel-sub-status-badge {
    display: inline-block;
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(255,255,255,0.08);
}
.duel-sub-status-approved {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.duel-sub-status-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.duel-sub-status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
/* Aktionen-Block (Annehmen/Ablehnen) */
.duel-sub-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
/* Sieger-Wahl-Block (am Ende der Card wenn beide approved) */
.duel-battle-judge-block {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 2px dashed rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(239, 68, 68, 0.04));
    border-radius: 10px;
    padding: 14px;
}
.duel-battle-judge-block h4 {
    margin: 0 0 12px;
    font-size: 15px;
    text-align: center;
    color: #f59e0b;
}
.duel-battle-judge-buttons {
    display: flex;
    gap: 10px;
}
@media (max-width: 540px) {
    .duel-battle-judge-buttons {
        flex-direction: column;
    }
}
/* Reject-Sheet (Ablehnungs-Modal) */
.adm-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.adm-sheet-backdrop[hidden] { display: none; }
.adm-sheet {
    background: var(--bg-card);
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    border: 1px solid var(--border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.adm-sheet header {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.adm-sheet header h3 { margin: 0; font-size: 17px; }
.adm-sheet-close {
    background: transparent;
    border: 0;
    font-size: 20px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.adm-sheet-body { padding: 16px; }
.adm-reject-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.adm-reject-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.adm-reject-option:hover {
    border-color: rgba(3, 215, 226, 0.4);
}
.adm-reject-option.is-selected {
    border-color: #03d7e2;
    background: rgba(3, 215, 226, 0.08);
}
.adm-reject-option strong { font-size: 13.5px; }
.adm-reject-option small { font-size: 12px; color: var(--text-dim); }

/* Cache-Bust: 5.18 */

/* ====================================================================
   ITERATION 5.19: Duell-System Überarbeitung
   - Random-Duell-CTA, Mode-Picker im Modal, Sieger-Marker
   ==================================================================== */

/* === Random-Duell-Card === */
.duel-random-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(237, 73, 86, 0.12), rgba(255, 153, 0, 0.06));
    border: 1px solid rgba(237, 73, 86, 0.4);
    border-radius: 14px;
    margin: 14px 0 18px;
}
.duel-random-icon {
    font-size: 32px;
    line-height: 1;
}
.duel-random-text {
    flex: 1;
    min-width: 0;
}
.duel-random-text strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}
.duel-random-text small {
    color: var(--text-dim);
    font-size: 12px;
}

/* === Modal: Sektionen === */
.duel-modal-card {
    max-width: 480px !important;
}
.duel-modal-section {
    margin: 0 0 18px;
}
.duel-modal-section:last-child {
    margin-bottom: 0;
}
.duel-modal-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.duel-modal-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* === Modus-Picker (Speed vs Battle) === */
.duel-mode-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.duel-mode-radio {
    cursor: pointer;
    margin: 0;
}
.duel-mode-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.duel-mode-radio > div {
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    transition: border-color 0.15s, background 0.15s;
}
.duel-mode-radio:hover > div {
    border-color: rgba(3, 215, 226, 0.5);
}
.duel-mode-radio input:checked + div {
    border-color: #03d7e2;
    background: rgba(3, 215, 226, 0.08);
}
.duel-mode-icon {
    font-size: 20px;
    display: block;
    margin-bottom: 2px;
}
.duel-mode-radio strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}
.duel-mode-radio small {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.3;
    display: block;
}

/* === Box-Picks im Modal === */
.duel-boxes-pick {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.duel-box-pick-form {
    margin: 0;
}
.duel-box-pick-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
    text-align: left;
}
.duel-box-pick-btn:hover {
    border-color: #ed4956;
    transform: translateX(2px);
}
.duel-box-pick-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}
.duel-box-pick-img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.duel-box-pick-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.duel-box-pick-info strong {
    font-size: 14px;
    margin-bottom: 1px;
}
.duel-box-pick-info small {
    color: var(--text-dim);
    font-size: 11px;
}
.duel-box-pick-arrow {
    color: var(--text-dim);
    font-size: 20px;
    flex-shrink: 0;
}

/* === Sieger-Marker auf Tiles === */
.ig-tile-duel-won {
    position: relative;
}
.ig-tile-duel-won::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid #ffd700;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    box-shadow:
        inset 0 0 12px rgba(255, 215, 0, 0.4),
        0 0 0 2px rgba(255, 215, 0, 0.2);
}
.ig-tile-duel-won-badge {
    background: linear-gradient(135deg, #ffd700, #ff9900) !important;
    color: #000 !important;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.4);
}
.ig-tile-from-duel {
    background: rgba(237, 73, 86, 0.85) !important;
    color: #fff !important;
}

/* === Modal: Duell-gewonnen-Banner === */
.modal-duel-banner {
    margin: 12px 16px 0;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(255, 153, 0, 0.08));
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.modal-duel-banner-icon {
    font-size: 22px;
    line-height: 1;
}
.modal-duel-banner strong {
    color: #ffd700;
}

/* Mobile: Mode-Picker untereinander */
@media (max-width: 540px) {
    .duel-mode-picker {
        grid-template-columns: 1fr;
    }
    .duel-random-cta {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .duel-random-cta .btn {
        flex-basis: 100%;
        margin-top: 4px;
    }
}

/* Cache-Bust: 5.19 */

/* ====================================================================
   ITERATION 5.20: Duell-Limit + Energie-Hint
   ==================================================================== */

.duel-limit-warn {
    color: #ed4956;
    font-weight: 700;
}

.duel-modal-info {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: rgba(3, 215, 226, 0.06);
    border: 1px solid rgba(3, 215, 226, 0.25);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
.duel-modal-info strong {
    color: #03d7e2;
}

/* Duell-Box-Buttons disabled wenn Limit voll */
.duel-box-pick-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
#duel-random-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Cache-Bust: 5.20 */

/* ====================================================================
   ITERATION 5.21: Friends-Page Tab-Layout + Duell-Liste
   ==================================================================== */

/* === Top-Tabs auf Friends-Page === */
.friends-tabs {
    display: flex;
    gap: 6px;
    background: var(--bg-elevated);
    padding: 4px;
    border-radius: 12px;
    margin: 14px 0 18px;
    border: 1px solid var(--border);
}
.friends-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}
.friends-tab:hover { color: var(--text); }
.friends-tab.is-active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.friends-tab-count {
    background: var(--bg);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}
.friends-tab.is-active .friends-tab-count {
    background: var(--bg-elevated);
    color: var(--text);
}
.friends-tab-badge {
    background: #ed4956;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
    animation: pulse-badge 1.5s ease-in-out infinite;
}
@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Tab-Pane Switching */
.friends-tab-pane { display: none; }
.friends-tab-pane.is-active { display: block; }

/* === Head-to-Head-Tag bei Freund === */
.friends-h2h-tag {
    display: inline-block;
    margin-left: 8px;
    background: rgba(237, 73, 86, 0.12);
    color: #ed4956;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
}

/* === Pending-Tag === */
.friends-pending-tag {
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
    padding: 0 8px;
}

/* === Duell-Liste im Duelle-Tab === */
.duel-list {
    list-style: none;
    margin: 8px 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Iter v6.43: Hinweis am Ende der Historie wenn nicht alle Duelle gezeigt werden */
.duel-history-truncated {
    text-align: center;
    margin: 8px 0 4px;
    color: var(--text-dim);
    opacity: 0.85;
}

/* ====================================================================
   ITER v6.43: /duelle als eigene Seite (frueher Modal).
   Modal hatte auf iPhone Notch-Probleme + war auf Mobile zu eng.
   Layout entspricht im Wesentlichen der Modal-Innenstruktur, nur ohne
   Modal-Hoehe-/Backdrop-/Sticky-Header-Klimmzuege.
   ==================================================================== */
.duel-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px 24px;
}
.duel-page-header {
    text-align: center;
    margin: 18px 0 14px;
}
.duel-page-header h1 {
    margin: 0;
    font-size: clamp(22px, 5vw, 28px);
    font-weight: 700;
}
.duel-page-body {
    /* Analog zum Modal-Body, aber ohne Scroll-Container - ist ja ne ganze Seite */
    padding: 4px 0 12px;
}
@media (max-width: 540px) {
    .duel-page {
        padding: 0 10px 24px;
    }
    .duel-page-header {
        margin: 12px 0 10px;
    }
}

/* Iter v6.43: Pre-Select-Banner wenn Gegner via ?opponent=... uebergeben wurde */
.duel-preselect-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 0 14px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.12), rgba(3, 215, 226, 0.04));
    border: 1px solid rgba(3, 215, 226, 0.35);
    border-radius: 10px;
    font-size: 14px;
}
.duel-preselect-banner strong {
    color: #03d7e2;
}

/* === Iter v6.43: Slot-Banner ganz oben auf /duelle === */
/* === Iter v6.43: Tunier-Phase Banner === */
.duel-slot-banner {
    position: relative;
    margin: 0 0 18px;
    padding: 16px 18px 16px 60px;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
}
/* Großer Icon-Badge links */
.duel-slot-banner-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px;
    flex-shrink: 0;
    z-index: 2;
}
/* Subtiler animierter Glow im Hintergrund */
.duel-slot-banner::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse at center, var(--banner-glow-color, rgba(3, 215, 226, 0.18)) 0%, transparent 60%);
    z-index: 0;
    animation: duelBannerGlow 6s ease-in-out infinite alternate;
}
@keyframes duelBannerGlow {
    0%   { transform: translateX(-15%); }
    100% { transform: translateX(20%); }
}
.duel-slot-banner-row {
    position: relative;
    display: block;
    z-index: 2;
}
.duel-slot-banner-text {
    flex: 1;
    line-height: 1.45;
    font-size: 14.5px;
}
.duel-slot-banner-text strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.duel-slot-banner-text small {
    display: block;
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1.5;
}
.duel-slot-banner-text small strong {
    display: inline;
    font-size: inherit;
    font-weight: 700;
    margin: 0;
}

/* === Tunier laeuft (rot/orange = Stop, kein Anmelden) === */
.duel-slot-banner-tournament {
    --banner-glow-color: rgba(239, 68, 68, 0.22);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(245, 158, 11, 0.06) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow:
        0 4px 12px rgba(239, 68, 68, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.duel-slot-banner-tournament .duel-slot-banner-icon {
    background: linear-gradient(135deg, #ef4444, #f59e0b);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    animation: duelBannerPulse 2.4s ease-in-out infinite;
}
@keyframes duelBannerPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4); }
    50%      { box-shadow: 0 2px 16px rgba(239, 68, 68, 0.7); }
}
.duel-slot-banner-tournament .duel-slot-banner-text strong {
    color: #f59e0b;
}
.duel-slot-banner-tournament .duel-slot-banner-text small strong {
    color: #f59e0b;
}
.duel-slot-banner-tournament .duel-slot-countdown {
    color: #ef4444;
}

/* === Anmelde-Phase (cyan/blau = MatLuk-Brand) === */
.duel-slot-banner-registration {
    --banner-glow-color: rgba(3, 215, 226, 0.22);
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.12) 0%, rgba(20, 108, 254, 0.08) 100%);
    border: 1px solid rgba(3, 215, 226, 0.4);
    box-shadow:
        0 4px 12px rgba(3, 215, 226, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.duel-slot-banner-registration .duel-slot-banner-icon {
    background: linear-gradient(135deg, #03d7e2, #146cfe);
    box-shadow: 0 2px 8px rgba(3, 215, 226, 0.4);
}
.duel-slot-banner-registration .duel-slot-banner-text strong {
    color: #03d7e2;
}
.duel-slot-banner-registration .duel-slot-banner-text small strong {
    color: #03d7e2;
}
.duel-slot-banner-registration .duel-slot-countdown {
    color: #03d7e2;
}

/* Countdown-Zahl prominent + monospaced */
.duel-slot-countdown {
    display: inline-block;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding: 1px 7px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    margin: 0 2px;
}

/* === Iter v6.43: "Anmeldung geschlossen" Block (gross, im Tab) === */
.duel-no-registration-block {
    position: relative;
    text-align: center;
    padding: 44px 24px 32px;
    margin: 16px 0;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, rgba(245, 158, 11, 0.03) 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
}
/* Animated background shimmer */
.duel-no-registration-block::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.08) 0%, transparent 50%);
    z-index: 0;
    animation: duelBannerGlow 8s ease-in-out infinite alternate;
}
.duel-no-registration-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(245, 158, 11, 0.1));
    border: 2px solid rgba(245, 158, 11, 0.35);
    font-size: 36px;
    box-shadow:
        0 4px 16px rgba(239, 68, 68, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: duelLockPulse 3s ease-in-out infinite;
}
@keyframes duelLockPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
.duel-no-registration-block h2 {
    position: relative;
    z-index: 2;
    margin: 0 0 14px;
    font-size: 22px;
    color: #ef4444;
    letter-spacing: -0.01em;
}
.duel-no-registration-block p {
    position: relative;
    z-index: 2;
    margin: 8px auto;
    max-width: 420px;
    line-height: 1.6;
    color: var(--text);
    font-size: 14.5px;
}
.duel-no-registration-block p strong {
    color: #f59e0b;
    font-weight: 700;
}
.duel-no-registration-meta {
    margin-top: 18px !important;
    padding: 12px 18px;
    display: inline-block;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 10px;
    color: var(--text-dim);
    font-size: 13px !important;
}
.duel-no-registration-meta strong {
    color: #03d7e2 !important;
    letter-spacing: 0.02em;
}

/* === Iter v6.43: Tunier-Endzeitpunkt-Hinweis unter dem Live-Timer === */
.duel-tournament-end-hint {
    text-align: center;
    margin: 4px auto 16px;
    padding: 7px 14px;
    color: var(--text-dim);
    font-size: 13px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
}
.duel-tournament-end-hint strong {
    color: #f59e0b;
    font-variant-numeric: tabular-nums;
}

/* === Iter v6.43: Random-Topf-UI === */

/* User ist BEREITS im Topf -> Status-Card */
.duel-pool-status {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    margin: 0 0 18px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.1), rgba(20, 108, 254, 0.06));
    border: 1px solid rgba(3, 215, 226, 0.4);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(3, 215, 226, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.duel-pool-status-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #03d7e2, #146cfe);
    border-radius: 50%;
    font-size: 24px;
    box-shadow: 0 2px 8px rgba(3, 215, 226, 0.4);
    animation: duelLockPulse 3s ease-in-out infinite;
}
.duel-pool-status-content {
    flex: 1;
    min-width: 0;
}
.duel-pool-status-content strong {
    display: block;
    font-size: 16px;
    color: #03d7e2;
    margin-bottom: 4px;
}
.duel-pool-status-content p {
    margin: 4px 0;
    font-size: 14px;
    line-height: 1.45;
}
.duel-pool-status-content small {
    display: block;
    color: var(--text-dim);
    font-size: 12.5px;
    margin-top: 4px;
    line-height: 1.5;
}

/* Topf-Anmelde-Sektion */
.duel-pool-section {
    margin: 0 0 22px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.04), rgba(20, 108, 254, 0.02));
    border: 1px solid rgba(3, 215, 226, 0.2);
    border-radius: 14px;
}
.duel-pool-section .duel-section-title {
    margin: 0 0 6px;
    color: #03d7e2;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.duel-pool-hint {
    margin: 0 0 14px;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
}
.duel-pool-hint strong {
    color: #03d7e2;
}

/* Karten pro Box */
.duel-pool-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.duel-pool-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color 0.15s, transform 0.12s;
}
.duel-pool-card:hover {
    border-color: rgba(3, 215, 226, 0.4);
}
.duel-pool-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.duel-pool-card-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}
.duel-pool-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3, 215, 226, 0.1);
    border-radius: 8px;
    font-size: 22px;
}
.duel-pool-card-header strong {
    display: block;
    font-size: 14.5px;
    margin-bottom: 2px;
}
.duel-pool-card-header small {
    display: block;
    color: var(--text-dim);
    font-size: 12px;
}
.duel-pool-card-actions {
    display: flex;
    gap: 8px;
}
.duel-pool-form {
    flex: 1;
    margin: 0;
    display: flex;
}
.duel-pool-form button {
    flex: 1;
    width: 100%;
}
@media (max-width: 540px) {
    .duel-pool-card-actions {
        flex-direction: column;
    }
    .duel-pool-status {
        flex-direction: column;
        gap: 12px;
    }
}

/* Mobile: Banner kompakter */
@media (max-width: 540px) {
    .duel-slot-banner {
        padding: 14px 14px 14px 56px;
    }
    .duel-slot-banner-icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
        left: 12px;
    }
    .duel-slot-banner-text strong {
        font-size: 14px;
    }
    .duel-slot-banner-text small {
        font-size: 12px;
    }
    .duel-no-registration-block {
        padding: 36px 18px 26px;
    }
    .duel-no-registration-icon {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }
    .duel-no-registration-block h2 {
        font-size: 19px;
    }
}

/* Slot-Hinweise auf Aktuelle-Cards */
.duel-card-slothint {
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
}
.duel-card-slothint-accepted {
    color: #03d7e2;
    font-weight: 700;
    font-style: normal;
}

/* Slot-Start-Countdown auf Detail-Seite */
.duel-invite-expiry-accepted {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.10), rgba(20, 108, 254, 0.06));
    border-color: rgba(3, 215, 226, 0.35);
}
.duel-slot-start-countdown {
    color: #03d7e2;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.duel-preselect-banner small {
    display: block;
    margin-top: 2px;
    color: var(--text-dim);
    font-size: 12.5px;
}
.duel-preselect-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}
.duel-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.15s, background 0.15s;
}
.duel-list-incoming {
    border-color: rgba(237, 73, 86, 0.5);
    background: rgba(237, 73, 86, 0.04);
}
.duel-list-incoming:hover {
    border-color: #ed4956;
    background: rgba(237, 73, 86, 0.08);
}
.duel-list-won {
    border-color: rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.06), transparent);
}
.duel-list-lost {
    opacity: 0.75;
}
.duel-list-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg);
}
.duel-list-avatar img,
.duel-list-avatar .ig-avatar-letter {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    font-weight: 800;
    color: #fff;
}
.duel-list-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.duel-list-info strong {
    display: block;
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.duel-list-info small {
    display: block;
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.duel-list-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}
.duel-list-actions .btn {
    padding: 6px 12px;
}

/* Bottom-Nav Badge: rot statt blau weil mehr Aufmerksamkeit */
.bn-badge {
    background: #ed4956 !important;
}

/* Mobile: Duell-Buttons kleiner */
@media (max-width: 540px) {
    .friends-tab {
        font-size: 13px;
        padding: 9px 8px;
    }
    .duel-list-actions .btn {
        padding: 5px 9px;
        font-size: 12px;
    }
    .duel-list-info strong { font-size: 13px; }
    .duel-list-info small { font-size: 11px; }
}

/* Cache-Bust: 5.21 */

/* ====================================================================
   ITERATION 5.22: Wirtschafts-Umbau
   - Diamanten als Bezahlmittel, Pokal-Reward, Stern als Score
   ==================================================================== */
.qx-hero-stat-pokal .qx-hero-num {
    color: #ffd700;
}
/* Cache-Bust: 5.22 */

/* ====================================================================
   ITERATION 5.23: Diamanten-Pakete im Shop
   ==================================================================== */

.diamond-pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin: 18px 0 26px;
}

.diamond-pkg-card {
    position: relative;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.diamond-pkg-card:hover {
    transform: translateY(-2px);
    border-color: rgba(3, 215, 226, 0.5);
    box-shadow: 0 6px 18px rgba(3, 215, 226, 0.12);
}
.diamond-pkg-popular {
    border-color: rgba(255, 215, 0, 0.5);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.04), var(--bg-card));
}
.diamond-pkg-best {
    border-color: rgba(237, 73, 86, 0.55);
    background: linear-gradient(180deg, rgba(237, 73, 86, 0.05), var(--bg-card));
}

.diamond-pkg-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.diamond-pkg-badge-popular {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    box-shadow: 0 2px 6px rgba(255, 170, 0, 0.4);
}
.diamond-pkg-badge-best {
    background: linear-gradient(135deg, #ed4956, #c93341);
    color: #fff;
    box-shadow: 0 2px 6px rgba(237, 73, 86, 0.4);
}

.diamond-pkg-icon {
    font-size: 38px;
    margin-bottom: 6px;
    line-height: 1;
}

.diamond-pkg-name {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--text);
}

.diamond-pkg-amount {
    font-size: 28px;
    font-weight: 800;
    color: #03d7e2;
    line-height: 1.2;
    margin: 4px 0;
}
.diamond-pkg-amount span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.diamond-pkg-bonus {
    font-size: 13px;
    color: #ffd700;
    font-weight: 700;
    margin-top: 4px;
}
.diamond-pkg-total {
    font-size: 11px;
    color: var(--text-dim);
    margin: 4px 0 8px;
}

.diamond-pkg-desc {
    font-size: 12px;
    color: var(--text-dim);
    margin: 6px 0 10px;
    min-height: 32px;
    line-height: 1.4;
}

.diamond-pkg-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    margin: 10px 0 12px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.diamond-pkg-buy-btn {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
}

/* Mobile: 1 Spalte */
@media (max-width: 540px) {
    .diamond-pkg-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .diamond-pkg-card {
        padding: 14px;
    }
}

/* Cache-Bust: 5.23 */

/* ====================================================================
   ITERATION 5.24: Freunde einladen - Native Share + Modal-Fallback
   ==================================================================== */

/* CTA-Card oben im Friends-Tab */
.invite-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.08), rgba(255, 215, 0, 0.04));
    border: 1px solid rgba(3, 215, 226, 0.3);
    border-radius: 12px;
    margin-bottom: 14px;
}
.invite-cta-icon {
    font-size: 28px;
    line-height: 1;
}
.invite-cta-text {
    flex: 1;
    min-width: 0;
}
.invite-cta-text strong {
    display: block;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 2px;
}
.invite-cta-text small {
    display: block;
    color: var(--text-dim);
    font-size: 12px;
}

/* Modal */
.invite-modal-card {
    max-width: 480px;
}
.invite-modal-info {
    color: var(--text-dim);
    font-size: 13px;
    margin: 0 0 16px;
    line-height: 1.5;
}
.invite-modal-hint {
    color: var(--text-dim);
    font-size: 11px;
    margin: 14px 0 0;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    line-height: 1.5;
}

/* Link-Box mit Copy-Button */
.invite-link-box {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}
.invite-link-box input {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
    font-family: monospace;
    min-width: 0;
}
.invite-link-box .btn {
    flex-shrink: 0;
    white-space: nowrap;
}
.invite-copy-success {
    color: #4caf50;
    font-size: 12px;
    margin: 4px 0 0;
    font-weight: 700;
}

/* Share-Buttons-Grid */
.invite-share-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 16px 0 0;
}
.invite-share-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.invite-share-btn:hover {
    transform: translateY(-1px);
    background: var(--bg-elevated);
}
.invite-share-icon {
    font-size: 22px;
    line-height: 1;
}

.invite-share-whatsapp { border-color: rgba(37, 211, 102, 0.4); }
.invite-share-whatsapp:hover { border-color: #25d366; background: rgba(37, 211, 102, 0.08); }
.invite-share-sms { border-color: rgba(33, 150, 243, 0.4); }
.invite-share-sms:hover { border-color: #2196f3; background: rgba(33, 150, 243, 0.08); }
.invite-share-mail { border-color: rgba(237, 73, 86, 0.4); }
.invite-share-mail:hover { border-color: #ed4956; background: rgba(237, 73, 86, 0.08); }
.invite-share-telegram { border-color: rgba(0, 136, 204, 0.4); }
.invite-share-telegram:hover { border-color: #0088cc; background: rgba(0, 136, 204, 0.08); }

@media (max-width: 540px) {
    .invite-share-options { grid-template-columns: 1fr 1fr; }
    .invite-cta-text small { font-size: 11px; }
}

/* Cache-Bust: 5.24 */

/* Cache-Bust: 5.25 (HTML no-cache headers + SW v35) */

/* ====================================================================
   ITERATION 5.26: Admin-Broadcasts (Banner + Bell + News-Archiv)
   ==================================================================== */

/* === Banner === */
.announcement-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 0 8px;
    border-radius: 0;
    border-left: 4px solid;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.announcement-banner-info {
    background: rgba(33, 150, 243, 0.08);
    border-left-color: #2196f3;
}
.announcement-banner-warning {
    background: rgba(255, 152, 0, 0.1);
    border-left-color: #ff9800;
}
.announcement-banner-promo {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.1), rgba(233, 30, 99, 0.06));
    border-left-color: #9c27b0;
}
.announcement-banner-success {
    background: rgba(76, 175, 80, 0.08);
    border-left-color: #4caf50;
}

.announcement-banner-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.announcement-banner-content {
    flex: 1;
    min-width: 0;
}
.announcement-banner-title {
    display: block;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 2px;
}
.announcement-banner-body {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
}
.announcement-banner-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.announcement-banner-link:hover {
    text-decoration: underline;
}

.announcement-banner-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    flex-shrink: 0;
    border-radius: 4px;
}
.announcement-banner-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text);
}

@media (max-width: 540px) {
    .announcement-banner {
        padding: 10px 12px;
    }
    .announcement-banner-icon {
        font-size: 20px;
    }
    .announcement-banner-title {
        font-size: 13px;
    }
    .announcement-banner-body {
        font-size: 12px;
    }
}

/* === News-Archiv-Liste === */
.news-list {
    list-style: none;
    padding: 0;
    margin: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.news-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 12px;
}
.news-item-info { border-left-color: #2196f3; }
.news-item-warning { border-left-color: #ff9800; }
.news-item-promo { border-left-color: #9c27b0; }
.news-item-success { border-left-color: #4caf50; }

.news-item-dismissed {
    opacity: 0.6;
}

.news-item-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}
.news-item-content {
    flex: 1;
    min-width: 0;
}
.news-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.news-item-head strong {
    font-size: 14px;
    color: var(--text);
}
.news-item-head small {
    color: var(--text-dim);
    font-size: 11px;
    flex-shrink: 0;
}
.news-item-content p {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}
.news-item-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    margin-bottom: 8px;
    display: block;
}

/* Cache-Bust: 5.26 */

/* ====================================================================
   ITERATION 5.27: Admin-Panel Refresh - Dashboard + bessere Sidebar
   ==================================================================== */

/* === Dashboard-Layout === */
.adm-dashboard {
    max-width: 1200px;
}
.adm-dash-head {
    margin-bottom: 24px;
}
.adm-dash-head h1 {
    margin: 0 0 4px;
    font-size: 28px;
}
.adm-dash-sub {
    color: var(--text-dim);
    margin: 0;
    font-size: 14px;
}

/* === Action-Panel "Braucht Aufmerksamkeit" === */
.adm-action-panel {
    margin-bottom: 28px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.06), rgba(237, 73, 86, 0.03));
    border: 1px solid rgba(255, 152, 0, 0.2);
    border-radius: 14px;
}
.adm-action-panel-clean {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.06), rgba(3, 215, 226, 0.03));
    border-color: rgba(76, 175, 80, 0.2);
}
.adm-action-panel .adm-section-head {
    margin-top: 0;
}
.adm-clean-state {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
}
.adm-clean-icon {
    font-size: 36px;
}
.adm-clean-state strong {
    display: block;
    font-size: 16px;
    color: var(--text);
    margin-bottom: 2px;
}
.adm-clean-state small {
    color: var(--text-dim);
    font-size: 13px;
}

.adm-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.adm-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.adm-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.adm-action-card-warning {
    border-color: rgba(255, 152, 0, 0.5);
    background: rgba(255, 152, 0, 0.04);
}
.adm-action-card-warning:hover {
    border-color: #ff9800;
    background: rgba(255, 152, 0, 0.08);
}
.adm-action-card-danger {
    border-color: rgba(237, 73, 86, 0.5);
    background: rgba(237, 73, 86, 0.04);
}
.adm-action-card-danger:hover {
    border-color: #ed4956;
    background: rgba(237, 73, 86, 0.08);
}

.adm-action-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}
.adm-action-content {
    flex: 1;
    min-width: 0;
}
.adm-action-content strong {
    display: block;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 2px;
}
.adm-action-content small {
    color: var(--text-dim);
    font-size: 12px;
}
.adm-action-arrow {
    color: var(--text-dim);
    font-size: 22px;
    flex-shrink: 0;
    font-weight: 700;
}
.adm-action-card:hover .adm-action-arrow {
    color: var(--text);
    transform: translateX(2px);
}

/* === Sections === */
.adm-section {
    margin-bottom: 28px;
}

/* === Stats-Grid === */
.adm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.adm-stats-grid-secondary .adm-stat-tile {
    background: var(--bg-elevated);
}
.adm-stat-tile-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.15s;
}
.adm-stat-tile-link:hover {
    transform: translateY(-2px);
}
.adm-stat-tile-link:hover .adm-stat-tile {
    border-color: var(--primary);
}

.adm-stat-trend {
    display: block;
    margin-top: 8px;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
}
.adm-stat-trend-up { color: #4caf50; }
.adm-stat-trend-down { color: #ed4956; }

/* === Schnell-Aktionen === */
.adm-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.adm-quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    text-align: center;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.adm-quick-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    background: var(--bg-elevated);
}
.adm-quick-icon {
    font-size: 32px;
    margin-bottom: 4px;
    line-height: 1;
}
.adm-quick-card strong {
    font-size: 14px;
    color: var(--text);
}
.adm-quick-card small {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.4;
}

/* === Hilfe-Bereich === */
.adm-help-section {
    border-top: 1px solid var(--border);
    padding-top: 24px;
    margin-top: 32px;
}
.adm-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.adm-help-card {
    padding: 16px 18px;
    background: var(--bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.adm-help-card strong {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text);
}
.adm-help-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.adm-help-card li {
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
    padding-left: 12px;
    position: relative;
}
.adm-help-card li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary);
}
.adm-help-card code {
    background: rgba(0, 0, 0, 0.2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text);
}

/* === Sidebar-Verbesserungen === */
.adm-brand-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.adm-brand-link:hover strong {
    color: var(--primary);
}

.adm-nav a {
    cursor: help;
}
.adm-nav a[title]:hover::after {
    /* Tooltips kommen vom Browser via title-Attribute */
}

.adm-help-text {
    color: var(--text-dim);
    font-size: 13px;
    margin: 0 0 4px;
    line-height: 1.4;
}

/* Mobile Sidebar */
@media (max-width: 768px) {
    .adm-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .adm-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .adm-action-grid {
        grid-template-columns: 1fr;
    }
}

/* Cache-Bust: 5.27 */

/* ====================================================================
   ITERATION 5.27: Admin-Panel-Refresh
   - Konsistente Page-Header
   - Hilfe-Tooltips
   - Callouts
   ==================================================================== */

/* === Page-Head === */
.adm-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.adm-page-head-main {
    flex: 1;
    min-width: 0;
}
.adm-page-head-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.adm-page-head-title h1 {
    margin: 0;
    font-size: 22px;
    color: var(--text);
}
.adm-page-head-icon {
    font-size: 28px;
    line-height: 1;
}
.adm-page-head-desc {
    margin: 6px 0 0 0;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.5;
}
.adm-page-head-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Hilfe-Akkordeon */
.adm-page-help {
    margin: 0 0 18px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.06), rgba(3, 215, 226, 0.02));
    border: 1px solid rgba(3, 215, 226, 0.2);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}
.adm-page-help summary {
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    list-style: none;
    user-select: none;
}
.adm-page-help summary::-webkit-details-marker { display: none; }
.adm-page-help summary::after {
    content: "▾";
    margin-left: 6px;
    font-size: 11px;
    color: var(--text-dim);
}
.adm-page-help[open] summary::after { content: "▴"; }
.adm-page-help summary:hover {
    background: rgba(3, 215, 226, 0.05);
}
.adm-page-help-content {
    padding: 4px 16px 14px 16px;
    border-top: 1px solid rgba(3, 215, 226, 0.15);
}
.adm-page-help-content dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2fr;
    gap: 8px 16px;
}
.adm-page-help-content dt {
    font-weight: 700;
    color: var(--text);
    font-size: 13px;
}
.adm-page-help-content dd {
    margin: 0;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
}
@media (max-width: 720px) {
    .adm-page-help-content dl {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .adm-page-help-content dd {
        margin-bottom: 8px;
    }
}

/* === Inline-Callouts === */
.adm-callout {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 0 16px;
    border-radius: 10px;
    border-left: 4px solid;
    font-size: 13px;
    line-height: 1.5;
}
.adm-callout-info {
    background: rgba(33, 150, 243, 0.08);
    border-left-color: #2196f3;
    color: var(--text);
}
.adm-callout-warn {
    background: rgba(255, 152, 0, 0.1);
    border-left-color: #ff9800;
    color: var(--text);
}
.adm-callout-success {
    background: rgba(76, 175, 80, 0.08);
    border-left-color: #4caf50;
    color: var(--text);
}
.adm-callout-danger {
    background: rgba(237, 73, 86, 0.08);
    border-left-color: #ed4956;
    color: var(--text);
}
.adm-callout-icon {
    font-size: 18px;
    line-height: 1.4;
    flex-shrink: 0;
}
.adm-callout strong {
    display: block;
    margin-bottom: 2px;
}

/* === Field-Help-Tooltip === */
.adm-field-help {
    position: relative;
    display: inline-block;
    margin-left: 4px;
    cursor: help;
    vertical-align: middle;
}
.adm-field-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(3, 215, 226, 0.15);
    color: #03d7e2;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    transition: background 0.15s;
}
.adm-field-help:hover .adm-field-help-icon,
.adm-field-help:focus .adm-field-help-icon {
    background: rgba(3, 215, 226, 0.3);
}
.adm-field-help-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg);
    color: var(--text);
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    width: 240px;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 100;
    white-space: normal;
}
.adm-field-help-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--border);
}
.adm-field-help:hover .adm-field-help-tip,
.adm-field-help:focus .adm-field-help-tip {
    opacity: 1;
}
@media (max-width: 540px) {
    .adm-field-help-tip {
        width: 180px;
    }
}

/* === Sticky-Top für Admin-Sektionen mit vielen Items === */
.adm-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    padding: 10px 0;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.adm-toolbar input[type="search"] {
    flex: 1;
    min-width: 180px;
}

/* === Empty-State für Listen ohne Inhalt === */
.adm-empty {
    text-align: center;
    padding: 50px 20px;
    background: var(--bg-card);
    border: 2px dashed var(--border);
    border-radius: 12px;
    color: var(--text-dim);
}
.adm-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.adm-empty h3 {
    margin: 0 0 6px;
    color: var(--text);
}
.adm-empty p {
    margin: 0 0 16px;
    font-size: 14px;
}

/* ====================================================================
   ITER 5.33: Foto-Review - sauberes Vollbild-Layout, alter Bug behoben
   - Photo-URL hatte `photo_uuid` statt `user_id` → Bild lud nicht
   - Buttons + Foto auf gleicher Höhe (kein height-calc-chaos)
   - Foto hat min-height + nimmt natürliches Bild-Verhältnis
   ==================================================================== */

.adm-review-page-fullscreen {
    margin: -16px -32px;
    padding: 0;
    background: var(--bg);
    min-height: calc(100vh - 0px);
    display: flex;
    flex-direction: column;
}

.adm-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    gap: 12px;
}
.adm-review-head-left { display: flex; align-items: center; gap: 14px; }
.adm-review-head-right { display: flex; gap: 8px; }
.adm-review-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-elevated); color: var(--text);
    text-decoration: none; font-size: 18px;
}
.adm-review-back:hover { background: var(--bg); transform: translateX(-2px); }
.adm-review-head-title { font-weight: 700; font-size: 16px; color: var(--text); }

.adm-review-page-fullscreen .adm-review-quest-banner {
    background: var(--bg-card);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    flex-shrink: 0;
}
.adm-review-page-fullscreen .adm-review-quest-title {
    font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.adm-review-page-fullscreen .adm-review-meta {
    display: flex; gap: 8px; flex-wrap: wrap;
    justify-content: center; align-items: center;
}

/* Arena = der Bereich wo das Foto + Buttons sind */
.adm-review-page-fullscreen .adm-review-arena {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}

/* Battle: Buttons + Foto in einer Reihe */
.adm-review-page-fullscreen .adm-review-battle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;  /* Buttons natürlich, Foto flexibel */
    gap: 24px;
    align-items: stretch;  /* Buttons + Foto-Wrap gleiche Höhe */
    width: 100%;
    max-width: 1400px;
    height: 100%;
    max-height: calc(100vh - 200px);
}

/* === Foto-Card === */
.adm-review-page-fullscreen .adm-review-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    overflow: visible;
    min-width: 0;  /* Wichtig damit grid-shrink funktioniert */
}

/* Foto-Wrapper - WICHTIG: aspect-ratio: auto und nimmt natürliche Höhe vom Bild */
.adm-review-page-fullscreen .adm-review-photo-wrap {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 220px);
    aspect-ratio: auto !important;  /* Override 4/5 default */
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Foto im Wrapper */
.adm-review-page-fullscreen .adm-review-photo-wrap img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 220px);
    width: auto;
    height: auto;
    object-fit: contain;
}

.adm-review-page-fullscreen .adm-review-caption {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
    max-width: 600px;
    text-align: center;
    color: var(--text);
}

/* === Buttons: Stretch auf gleiche Höhe wie Foto === */
.adm-review-page-fullscreen .adm-side-btn {
    flex-shrink: 0;
    min-width: 110px;
    width: 110px;
    /* Höhe = Höhe des Grid-Containers (durchs grid align-items: stretch) */
    min-height: 0;
    height: auto;
    align-self: stretch;  /* Wichtig: grid item stretcht über Container-Höhe */
}

/* === Empty + Loading zentriert === */
.adm-review-page-fullscreen .adm-review-empty,
.adm-review-page-fullscreen .adm-review-loading {
    text-align: center;
    padding: 60px 30px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    max-width: 500px;
    margin: 0 auto;
}
.adm-review-page-fullscreen .adm-review-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

/* === Mobile / kleinere Screens === */
@media (max-width: 900px) {
    .adm-review-page-fullscreen {
        margin: -16px -16px;
    }
    .adm-review-page-fullscreen .adm-review-battle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
        max-height: none;
    }
    .adm-review-page-fullscreen .adm-review-card {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .adm-review-page-fullscreen .adm-side-btn {
        width: auto;
        min-width: 0;
        height: 70px;
        min-height: 70px;
        flex-direction: row;
        gap: 12px;
        padding: 14px 20px;
        align-self: auto;
    }
    .adm-side-btn-reject { grid-column: 1; grid-row: 2; }
    .adm-side-btn-pass { grid-column: 2; grid-row: 2; }
    .adm-review-page-fullscreen .adm-side-btn-icon { font-size: 32px; }
    .adm-review-page-fullscreen .adm-side-btn kbd { display: none; }
    .adm-review-page-fullscreen .adm-review-photo-wrap {
        max-height: 50vh;
    }
    .adm-review-page-fullscreen .adm-review-photo-wrap img {
        max-height: 50vh;
    }
}

/* Cache-Bust: 5.33 */

/* Iter 5.34: adm-table = admin-table (alias mit gleichen Eigenschaften) */
.adm-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 14px;
}
.admin-table-wrap .adm-table { margin: 0; }
.adm-table th,
.adm-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    max-width: 380px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.adm-table th {
    color: var(--text-mute);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    background: var(--bg-elevated);
    white-space: nowrap;
}
.adm-table td.actions { white-space: nowrap; }
.adm-table td input,
.adm-table td select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 8px;
    color: var(--text);
    max-width: 100%;
    box-sizing: border-box;
}

/* ====================================================================
   ITER 5.35: Foto-Review Vollbild V2
   - Foto füllt komplette Stage
   - Quest-Card unten zentriert (weiß auf dunkel)
   - Buttons schwebend unten-rechts (Annehmen) und unten-links (Ablehnen)
   ==================================================================== */

.adm-review-v2 {
    /* Aus dem Admin-Layout ausbrechen für echte Vollbild-Erfahrung */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

/* Schmaler Header oben */
.adm-review-v2-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
}
.adm-review-v2-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    flex-shrink: 0;
}
.adm-review-v2-back:hover { background: rgba(255, 255, 255, 0.2); }
.adm-review-v2-title {
    flex: 1;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}
.adm-review-v2-stats {
    display: flex;
    gap: 8px;
}
.adm-review-v2-stats .adm-stat-pill {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.adm-review-v2-stats .adm-stat-label {
    color: rgba(255, 255, 255, 0.6);
}
.adm-review-v2-stats .adm-stat-value {
    color: #fff;
}

/* Bühne = ganze restliche Höhe */
.adm-review-v2-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Empty + Loading */
.adm-review-v2-empty,
.adm-review-v2-loading {
    color: #fff;
    text-align: center;
    padding: 40px;
}
.adm-review-v2-empty-icon {
    font-size: 80px;
    margin-bottom: 16px;
}
.adm-review-v2-empty h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 24px;
}
.adm-review-v2-empty p {
    color: rgba(255, 255, 255, 0.7);
}

/* Hauptcontainer für Foto + Overlays */
.adm-review-v2-content {
    position: absolute;
    inset: 0;
    display: block;
}

/* === FOTO: füllt die komplette Bühne === */
.adm-review-v2-photo-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
.adm-review-v2-photo-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* === QUEST-KARTE: unten zentriert, weiß === */
.adm-review-v2-quest-card {
    position: absolute;
    bottom: 100px;  /* Platz für Buttons darunter */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.96);
    color: #1a1a2e;
    padding: 14px 20px;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width: 600px;
    width: calc(100% - 240px);  /* Platz für Buttons links/rechts */
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.adm-review-v2-quest-title {
    font-size: 18px;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 8px;
}
.adm-review-v2-quest-meta {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.adm-review-v2-quest-meta .adm-tag {
    background: rgba(0, 0, 0, 0.06);
    color: #1a1a2e;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 12px;
}
.adm-review-v2-quest-meta .adm-tag-stars {
    background: rgba(255, 193, 7, 0.15);
    color: #b88800;
    border-color: rgba(255, 193, 7, 0.3);
}
.adm-review-v2-quest-meta .adm-tag-user {
    background: rgba(3, 215, 226, 0.12);
    color: #0a7480;
    border-color: rgba(3, 215, 226, 0.3);
}
.adm-review-v2-quest-desc {
    font-size: 13px;
    color: #555;
    margin-top: 4px;
    font-style: italic;
}
.adm-review-v2-caption {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    font-size: 13px;
    font-style: italic;
    color: #1a1a2e;
}

/* === ACTION-BUTTONS: unten-links + unten-rechts schwebend === */
.adm-review-v2-action {
    position: absolute;
    bottom: 24px;
    width: 96px;
    height: 96px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-weight: 700;
    z-index: 5;
}
.adm-review-v2-action:hover {
    transform: scale(1.08) translateY(-4px);
}
.adm-review-v2-action:active {
    transform: scale(0.95);
}
.adm-review-v2-action-reject {
    left: 24px;
    background: linear-gradient(135deg, #ed4956, #c81e2a);
}
.adm-review-v2-action-reject:hover {
    box-shadow: 0 12px 40px rgba(237, 73, 86, 0.6);
}
.adm-review-v2-action-pass {
    right: 24px;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
}
.adm-review-v2-action-pass:hover {
    box-shadow: 0 12px 40px rgba(76, 175, 80, 0.6);
}
.adm-review-v2-action-icon {
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
}
.adm-review-v2-action-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}
.adm-review-v2-action kbd {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-family: monospace;
    margin-top: 2px;
}

/* Mobile-Anpassung */
@media (max-width: 600px) {
    .adm-review-v2-action {
        width: 76px;
        height: 76px;
        bottom: 16px;
    }
    .adm-review-v2-action-reject { left: 12px; }
    .adm-review-v2-action-pass { right: 12px; }
    .adm-review-v2-action-icon { font-size: 24px; }
    .adm-review-v2-action-label { font-size: 9px; }
    .adm-review-v2-action kbd { display: none; }

    .adm-review-v2-quest-card {
        bottom: 110px;
        width: calc(100% - 32px);
        max-width: none;
        padding: 10px 14px;
    }
    .adm-review-v2-quest-title { font-size: 14px; }
    .adm-review-v2-quest-meta .adm-tag { font-size: 11px; padding: 2px 6px; }
}

/* ====================================================================
   ITER 5.36: Belohnungs-Anzeige bei Fotokisten
   ==================================================================== */
.qx-box-rewards {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.qx-box-reward {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid;
    line-height: 1.4;
    white-space: nowrap;
}
.qx-box-reward-stars {
    background: rgba(255, 193, 7, 0.12);
    color: #b88800;
    border-color: rgba(255, 193, 7, 0.35);
}
.qx-box-reward-diamonds {
    background: rgba(3, 215, 226, 0.12);
    color: #0a7480;
    border-color: rgba(3, 215, 226, 0.35);
}
.qx-box-reward-pokale {
    background: rgba(255, 152, 0, 0.12);
    color: #c46100;
    border-color: rgba(255, 152, 0, 0.35);
}
.qx-box-reward-title {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.12), rgba(233, 30, 99, 0.08));
    color: #7c1e9c;
    border-color: rgba(156, 39, 176, 0.35);
}

/* Im Dark-Mode Akzente verstärken */
[data-theme="dark"] .qx-box-reward-stars {
    background: rgba(255, 193, 7, 0.18);
    color: #ffce47;
    border-color: rgba(255, 193, 7, 0.5);
}
[data-theme="dark"] .qx-box-reward-diamonds {
    background: rgba(3, 215, 226, 0.18);
    color: #5feaf0;
    border-color: rgba(3, 215, 226, 0.5);
}
[data-theme="dark"] .qx-box-reward-pokale {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb84d;
    border-color: rgba(255, 152, 0, 0.5);
}
[data-theme="dark"] .qx-box-reward-title {
    color: #d77ce5;
    border-color: rgba(156, 39, 176, 0.5);
}

/* ====================================================================
   ITER 5.37: Quest-Edit mit Type-Picker
   ==================================================================== */
.quest-type-picker {
    margin-bottom: 18px;
}
.quest-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.quest-type-card {
    cursor: pointer;
    display: block;
}
.quest-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.quest-type-card-inner {
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.15s;
    background: var(--bg-card);
    height: 100%;
}
.quest-type-card:hover .quest-type-card-inner {
    border-color: var(--primary);
    background: var(--bg-elevated);
}
.quest-type-card input:checked + .quest-type-card-inner {
    border-color: #03d7e2;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.08), rgba(3, 215, 226, 0.02));
    box-shadow: 0 0 0 1px #03d7e2;
}
.quest-type-icon {
    display: block;
    font-size: 36px;
    margin-bottom: 6px;
    line-height: 1;
}
.quest-type-card strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--text);
}
.quest-type-card p {
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .quest-type-grid {
        grid-template-columns: 1fr;
    }
}

/* ====================================================================
   ITER 5.38: Rewards-Block mit "Belohnung:"-Label
   ==================================================================== */
.qx-rewards-block {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin: 10px 0;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.qx-rewards-label {
    font-weight: 700;
    color: var(--text);
    font-size: 13px;
    margin-right: 4px;
    flex-shrink: 0;
}

/* Iter 5.40: Auf Mobile bleiben die Pills nebeneinander (mit wrap) */
@media (max-width: 540px) {
    .qx-rewards-block {
        gap: 5px;
        padding: 8px 10px;
        flex-direction: row;       /* nebeneinander statt column */
        align-items: center;
    }
    .qx-rewards-label {
        font-size: 12px;
        width: 100%;               /* Label nimmt eine eigene Zeile oben */
        margin-right: 0;
        margin-bottom: 2px;
    }
    /* Pills auf Mobile kompakter damit 3-4 nebeneinander passen */
    .qx-rewards-block .qx-box-reward {
        font-size: 10.5px;
        padding: 3px 7px;
        border-radius: 10px;
        gap: 3px;
    }
}

/* Sehr schmale Screens (kleine Phones) */
@media (max-width: 380px) {
    .qx-rewards-block .qx-box-reward {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* ====================================================================
   ITER 5.39: 2FA-Setup-Seiten
   ==================================================================== */
.adm-2fa-setup,
.adm-2fa-recovery,
.adm-2fa-active {
    max-width: 720px;
}

.adm-2fa-steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
}
.adm-2fa-steps > li {
    counter-increment: step;
    position: relative;
    padding: 18px 18px 18px 64px;
    margin-bottom: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.adm-2fa-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 18px;
    top: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #03d7e2, #0a9aaa);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.adm-2fa-steps > li > strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--text);
}

.adm-2fa-qr {
    margin: 14px 0;
    padding: 16px;
    background: #fff;
    border-radius: 10px;
    display: inline-block;
}
.adm-2fa-qr svg {
    display: block;
    max-width: 220px;
    height: auto;
}

.adm-2fa-secret {
    display: inline-block;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 14px;
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 0.05em;
    word-break: break-all;
    user-select: all;
}

.adm-2fa-codes-box {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin: 14px 0;
}
.adm-2fa-codes {
    font-family: monospace;
    font-size: 16px;
    line-height: 1.6;
    background: var(--bg);
    padding: 14px 18px;
    border-radius: 8px;
    margin: 0 0 12px;
    user-select: all;
    overflow-x: auto;
}

@media print {
    .adm-2fa-codes {
        font-size: 14px;
        background: #fff;
        color: #000;
    }
    .btn { display: none; }
}

/* Login-Card auch fuer login_2fa nutzbar (falls nicht vorhanden) */
.login-card {
    max-width: 420px;
    margin: 40px auto;
    padding: 30px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
}

/* ====================================================================
   ITER 5.40: Box-Card auf Mobile kompakter damit Belohnungs-Pills schoen passen
   ==================================================================== */
@media (max-width: 540px) {
    .qx-box-link {
        gap: 10px;
        padding: 12px 14px;
    }
    .qx-box-icon {
        width: 52px;
        height: 52px;
        font-size: 28px;
    }
    .qx-box-name {
        font-size: 15px;
    }
    .qx-box-desc {
        font-size: 12px;
        line-height: 1.35;
    }
}

@media (max-width: 380px) {
    .qx-box-link {
        gap: 8px;
        padding: 10px 12px;
    }
    .qx-box-icon {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }
    .qx-box-arrow {
        font-size: 18px;
    }
}

/* ====================================================================
   ITER 5.42: Login / Register - Security-Hint + Legal-Links
   ==================================================================== */

/* Security-Hint Card unten in Login/Register */
.auth-security-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-top: 18px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(3, 215, 226, 0.06));
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 10px;
}
.auth-security-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.auth-security-hint > div {
    flex: 1;
    min-width: 0;
}
.auth-security-hint strong {
    display: block;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 2px;
}
.auth-security-hint small {
    display: block;
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* Legal-Links unten in Auth-Pages */
.auth-legal-links {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 18px 0 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}
.auth-legal-links a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13px;
    padding: 4px 6px;
    transition: color 0.15s;
}
.auth-legal-links a:hover {
    color: var(--accent);
}

/* Mobile: kompakter */
@media (max-width: 540px) {
    .auth-security-hint {
        padding: 10px 12px;
        gap: 10px;
    }
    .auth-security-icon {
        font-size: 20px;
    }
    .auth-security-hint strong {
        font-size: 12.5px;
    }
    .auth-security-hint small {
        font-size: 11px;
    }
    .auth-legal-links {
        gap: 10px;
    }
    .auth-legal-links a {
        font-size: 12px;
    }
}

/* ====================================================================
   ITER 5.43: Duell-Modal mit 3 Modi-Tabs
   ==================================================================== */

/* Modus-Tabs oben */
.duel-mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 14px 0 16px;
    padding: 4px;
    background: var(--bg-elevated);
    border-radius: 12px;
}
.duel-mode-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.duel-mode-tab:hover {
    background: var(--bg-card);
    color: var(--text);
}
.duel-mode-tab.is-active {
    background: var(--bg-card);
    color: var(--text);
    border-color: #03d7e2;
    box-shadow: 0 2px 8px rgba(3, 215, 226, 0.15);
}
.duel-mode-tab-icon {
    font-size: 22px;
    line-height: 1;
}
.duel-mode-tab strong {
    font-size: 13px;
    font-weight: 700;
}
.duel-mode-tab small {
    font-size: 10.5px;
    line-height: 1.2;
}

/* Mode-Panes: nur aktiver wird angezeigt */
.duel-mode-pane {
    display: none;
}
.duel-mode-pane.is-active {
    display: block;
}

/* Hint oberhalb der Box-Liste */
.duel-modal-hint {
    background: rgba(3, 215, 226, 0.08);
    border-left: 3px solid #03d7e2;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 12px;
}
.duel-modal-pick-label {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    margin: 8px 0;
}

/* Lottery-Pane: groß, prominent */
.duel-lottery-info {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(237, 73, 86, 0.06));
    border: 2px solid rgba(255, 152, 0, 0.35);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
    text-align: center;
}
.duel-lottery-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 6px;
    line-height: 1;
}
.duel-lottery-info h4 {
    margin: 0 0 10px;
    font-size: 20px;
    color: var(--text);
}
.duel-lottery-info p {
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text);
}
.duel-lottery-info p:last-child {
    margin-bottom: 0;
}
.duel-lottery-bonus {
    display: inline-block;
    background: linear-gradient(135deg, #ff9800, #ed4956);
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
}
.duel-lottery-btn {
    background: linear-gradient(135deg, #ff9800, #ed4956) !important;
    font-size: 16px !important;
    padding: 14px 20px !important;
}

/* Mobile Anpassung */
@media (max-width: 540px) {
    .duel-mode-tab small {
        display: none;  /* spart Platz */
    }
    .duel-mode-tab strong {
        font-size: 12px;
    }
    .duel-mode-tab-icon {
        font-size: 20px;
    }
    .duel-lottery-icon {
        font-size: 44px;
    }
    .duel-lottery-info h4 {
        font-size: 17px;
    }
}

/* ====================================================================
   ITER 5.45: Notifications-Page
   ==================================================================== */

.notif-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 12px;
}
.notif-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.notif-header h1 {
    flex: 1;
    margin: 0;
    font-size: 22px;
}
.notif-mark-all {
    margin: 0;
}

.notif-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
}
.notif-empty-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.4;
}
.notif-empty h2 {
    color: var(--text);
    margin: 0 0 8px;
    font-size: 18px;
}
.notif-empty p {
    margin: 0;
    font-size: 14px;
}

.notif-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.notif-form {
    margin: 0;
    padding: 0;
    display: block;
}
.notif-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text);
}
.notif-item:hover {
    background: var(--bg-elevated);
    transform: translateX(2px);
    border-color: rgba(3, 215, 226, 0.3);
}
.notif-item.is-unread {
    background: linear-gradient(90deg, rgba(3, 215, 226, 0.06), transparent);
    border-left: 3px solid #03d7e2;
    padding-left: 13px;
}
.notif-item-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
}
.notif-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.notif-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.notif-item-body {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.4;
}
.notif-item-time {
    font-size: 11px;
    color: var(--text-dim);
    opacity: 0.7;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.notif-unread-dot {
    color: #03d7e2;
    font-size: 14px;
    line-height: 1;
}
.notif-item-arrow {
    font-size: 22px;
    color: var(--text-dim);
    flex-shrink: 0;
}

@media (max-width: 540px) {
    .notif-header h1 {
        font-size: 18px;
    }
    .notif-item-icon {
        font-size: 24px;
    }
    .notif-item-title {
        font-size: 13.5px;
    }
    .notif-item-body {
        font-size: 12.5px;
    }
}

/* ====================================================================
   ITER 5.45: Notification-Bell + Dropdown + Page
   ==================================================================== */

.nav-bell-wrap {
    position: relative;
    display: inline-block;
}
.nav-bell {
    position: relative;
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;  /* iOS/Android: kein blau-blinken */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;  /* kein 300ms double-tap delay */
}
.nav-bell:focus { outline: none; }
.nav-bell:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.nav-bell:hover {
    background: rgba(255,255,255,0.06);
}
.nav-bell-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #ed4956;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 8px;
    min-width: 14px;
    text-align: center;
    border: 1.5px solid var(--bg);
}

/* Dropdown */
.nav-bell-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: bellDropdownIn 0.15s ease-out;
}
@keyframes bellDropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nav-bell-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.nav-bell-mark-all {
    margin: 0;
}
.nav-bell-mark-all-btn:hover {
    color: var(--text);
    border-color: var(--accent);
}

.nav-bell-list {
    overflow-y: auto;
    max-height: 420px;
    flex: 1;
}
.nav-bell-item-form {
    margin: 0;
}
.nav-bell-item {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-align: left;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.nav-bell-item:focus { outline: none; }
.nav-bell-mark-all-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.nav-bell-item:last-child {
    border-bottom: none;
}
.nav-bell-item:hover {
    background: rgba(255,255,255,0.04);
}
.nav-bell-item.is-unread {
    background: rgba(3, 215, 226, 0.05);
}
.nav-bell-item-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}
.nav-bell-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-bell-item-content strong {
    font-size: 13px;
    line-height: 1.35;
    color: var(--text);
    font-weight: 600;
}
.nav-bell-item-content small {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.35;
}
.nav-bell-item-dot {
    color: #ed4956;
    font-size: 14px;
    line-height: 1;
    margin-top: 4px;
}

.nav-bell-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-dim);
}
.nav-bell-empty-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 6px;
}
.nav-bell-empty p {
    margin: 0;
    font-size: 13px;
}

.nav-bell-dropdown-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.nav-bell-dropdown-footer a {
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
}
.nav-bell-dropdown-footer a:hover {
    text-decoration: underline;
}

/* Mobile: Dropdown als Bottom-Sheet von unten / fixed Position */
.nav-bell-backdrop {
    display: none;  /* Default Desktop: kein Backdrop */
}
@media (max-width: 540px) {
    .nav-bell-dropdown {
        /* Iter v6.45f: Bell-Dropdown endet UEBER der Bottom-Nav, nicht ueber sie hinweg. */
        position: fixed;
        top: auto;
        bottom: calc(72px + env(safe-area-inset-bottom, 0));
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        max-height: 70vh;
        border-radius: 16px;
        margin: 0 8px;
        animation: bellDropdownInMobile 0.22s ease-out;
    }
    .nav-bell-list {
        max-height: calc(70vh - 110px);
    }
    /* Backdrop endet auch ueber der Nav */
    .nav-bell-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(72px + env(safe-area-inset-bottom, 0));
        background: rgba(0, 0, 0, 0.55);
        z-index: 999;
        animation: bellBackdropIn 0.18s ease-out;
    }
    .nav-bell-backdrop[hidden] {
        display: none;
    }
}
@keyframes bellDropdownInMobile {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bellBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* === /notifications Vollseite === */
.notif-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 12px;
}
.notif-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.notif-header h1 {
    margin: 0;
    flex: 1;
    font-size: 22px;
}
.notif-mark-all {
    margin: 0;
}
.notif-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
}
.notif-empty-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 12px;
}
.notif-empty h2 {
    margin: 0 0 6px;
    color: var(--text);
}

.notif-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.notif-form {
    margin: 0;
}
.notif-item {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    color: var(--text);
    text-align: left;
    transition: all 0.15s;
}
.notif-item:hover {
    border-color: var(--accent);
}
.notif-item.is-unread {
    background: rgba(3, 215, 226, 0.05);
    border-color: rgba(3, 215, 226, 0.3);
}
.notif-item-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
}
.notif-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.notif-item-title {
    font-size: 14.5px;
    font-weight: 600;
}
.notif-item-body {
    font-size: 12.5px;
    color: var(--text-dim);
}
.notif-item-time {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}
.notif-unread-dot {
    color: #ed4956;
    font-size: 14px;
    margin-left: 6px;
}
.notif-item-arrow {
    color: var(--text-dim);
    font-size: 20px;
    align-self: center;
}

/* Shop: Slot-Info-Box */
.shop-slots-info {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 13.5px;
}
.shop-slots-info p {
    margin: 0;
}
.shop-slots-info p + p {
    margin-top: 6px;
}
.shop-slots-warning {
    color: #ff9800;
    font-weight: 600;
}

/* ====================================================================
   ITER 5.46: Side-by-Side Foto-Review für Duelle
   ==================================================================== */

.adm-review-duel-banner {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255,152,0,0.95), rgba(237,73,86,0.95));
    color: #fff;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 5;
    white-space: nowrap;
}
.adm-duel-banner-icon {
    font-size: 18px;
    line-height: 1;
}

.adm-review-duel-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Iter v6.43: gap erhoeht von 6px -> 14px damit der Cyan-Aktiv-Rahmen +
       Glow-Schatten der Current-Spalte nicht in die Partner-Spalte uebergreift.
       padding-top 60->68 fuer mehr Platz fuer das "GERADE IN BEWERTUNG"-Badge. */
    gap: 14px;
    padding: 68px 8px 130px;
    background: #000;
}
.adm-duel-photo-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
    /* Iter v6.43: Default-Border nur fuer Current-Spalte ueber border-color */
    border: 3px solid transparent;
    position: relative;
    transition: border-color 0.18s ease, opacity 0.18s ease;
}
/* Iter v6.43: Current-Spalte = das Foto, das gerade bewertet wird.
   Bekommt Cyan-Rahmen + "GERADE IN BEWERTUNG"-Badge oben drueber damit
   der Admin sofort sieht welche Entscheidung er trifft. */
#duel-col-current {
    border-color: #03d7e2;
    box-shadow: 0 0 0 4px rgba(3, 215, 226, 0.15);
}
#duel-col-current::before {
    content: "👁 GERADE IN BEWERTUNG";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #03d7e2, #146cfe);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 10px;
    z-index: 2;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(3, 215, 226, 0.4);
}
/* Partner-Spalte: deutlich gedimmt + "Zum Vergleich"-Hint */
.adm-duel-photo-col-partner {
    opacity: 0.65;
    filter: saturate(0.8);
}
.adm-duel-photo-col-partner::before {
    content: "ZUM VERGLEICH";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(60, 60, 70, 0.95);
    color: rgba(255,255,255,0.85);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: 8px;
    z-index: 2;
    white-space: nowrap;
}
.adm-duel-photo-label {
    background: rgba(255,255,255,0.05);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: #fff;
    border-bottom: 2px solid rgba(255,255,255,0.08);
}
.adm-duel-photo-label strong {
    font-size: 13px;
    font-weight: 700;
}
.adm-duel-photo-label small {
    font-size: 10.5px;
    opacity: 0.75;
}
.adm-duel-faster-badge {
    display: inline-block;
    width: fit-content;
    background: linear-gradient(135deg, #ff9800, #ed4956);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 2px;
}
.adm-duel-status-badge {
    display: inline-block;
    width: fit-content;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 8px;
    margin-top: 2px;
}
.adm-duel-photo-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #000;
}
.adm-duel-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Tablet/Desktop: noch besser darstellen */
@media (min-width: 720px) {
    .adm-review-duel-grid {
        padding: 60px 16px 130px;
        gap: 12px;
    }
    .adm-duel-photo-label {
        padding: 10px 14px;
    }
    .adm-duel-photo-label strong { font-size: 14.5px; }
    .adm-duel-photo-label small  { font-size: 11.5px; }
}

/* Schmales Phone: vertikal stacken statt nebeneinander? Nein - Duell-Idee = nebeneinander */
@media (max-width: 380px) {
    .adm-review-duel-grid {
        gap: 3px;
        padding: 56px 4px 130px;
    }
    .adm-duel-photo-label {
        padding: 6px 8px;
    }
    .adm-duel-photo-label strong { font-size: 11.5px; }
    .adm-duel-photo-label small  { font-size: 9.5px; }
    .adm-review-duel-banner {
        font-size: 11.5px;
        padding: 5px 12px;
    }
}

/* Iter 5.47-fix: Body-Scroll-Lock wenn Bell-Sheet auf Mobile offen */
@media (max-width: 540px) {
    body.has-bell-open {
        overflow: hidden;
    }
    /* Sheet selbst muss scrollbar bleiben */
    body.has-bell-open .nav-bell-dropdown {
        overflow-y: auto;
    }
}

/* ====================================================================
   ITER 5.48: Duell-Hub-Card auf /quests
   ==================================================================== */

.duels-hub {
    background: linear-gradient(135deg, rgba(237,73,86,0.12), rgba(255,152,0,0.08));
    border: 2px solid rgba(237,73,86,0.3);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 12px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.duels-hub-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.duels-hub-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}
.duels-hub-title {
    flex: 1;
    min-width: 0;
}
.duels-hub-title strong {
    display: block;
    font-size: 16px;
    color: var(--text);
    font-weight: 700;
}
.duels-hub-title small {
    display: block;
    font-size: 12.5px;
    color: var(--text-dim);
    margin-top: 2px;
}
.duels-hub-cta {
    width: 100%;
    background: linear-gradient(135deg, #ff9800, #ed4956) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
}
.duels-hub-cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.duels-hub-warn {
    color: #ff9800;
    font-size: 12px;
    text-align: center;
    margin: 0;
}
.duels-hub-link {
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
    text-decoration: none;
    padding: 4px;
}
.duels-hub-link:hover {
    color: var(--accent);
}

/* Gegner-Dropdown im Modal */
.duel-opp-section {
    background: var(--bg-elevated);
    padding: 10px 12px;
    border-radius: 10px;
    margin: 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.duel-opp-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    flex-shrink: 0;
}
.duel-opp-select {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
}

/* ====================================================================
   ITER 5.48: Friends Duell-CTA-Link
   ==================================================================== */

.friends-duel-cta-link {
    display: block;
    text-decoration: none;
    margin: 12px 0 16px;
}
.friends-duel-cta {
    background: linear-gradient(135deg, rgba(237,73,86,0.12), rgba(255,152,0,0.08));
    border: 2px solid rgba(237,73,86,0.3);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}
.friends-duel-cta:hover {
    border-color: rgba(237,73,86,0.5);
    transform: translateY(-1px);
}
.friends-duel-cta-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}
.friends-duel-cta-text {
    flex: 1;
    min-width: 0;
}
.friends-duel-cta-text strong {
    display: block;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}
.friends-duel-cta-text small {
    display: block;
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1.4;
}
.friends-duel-cta-arrow {
    font-size: 24px;
    color: var(--text-dim);
    flex-shrink: 0;
}
.friends-duel-cta:hover .friends-duel-cta-arrow {
    color: var(--accent);
}

/* ====================================================================
   ITER 5.49: Sehr schmale Phones (≤380px) - Brand kuerzen damit Bell rechts bleibt
   ==================================================================== */
@media (max-width: 380px) {
    .site-header {
        padding: 8px 10px;
        padding-top: max(env(safe-area-inset-top, 0px) + 6px, 8px);
        gap: 4px;
    }
    .brand-text {
        font-size: 14px;
    }
    .brand-icon {
        width: 24px !important;
        height: 24px !important;
    }
    .nav-bell {
        padding: 4px 6px;
    }
    .theme-toggle {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .top-nav { gap: 2px; }
    .nav-link { padding: 5px 8px; font-size: 12px; }
    .admin-link { font-size: 11px; padding: 4px 8px; }
}

/* === Iter 5.49: Bell-Polling soll nicht 'permanent neu laden' wirken ===
   Beim Update-Banner darf kein "screen blink" auftreten */
#sw-update-banner {
    transition: opacity 0.2s ease;
}

/* ====================================================================
   ITER 5.51: Neue Landing-Page (Home)
   ==================================================================== */

.lp-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 12px 40px;
}

/* Hero */
.lp-hero {
    text-align: center;
    padding: 32px 16px 24px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.08), rgba(237, 73, 86, 0.06));
    border-radius: 16px;
    margin-bottom: 32px;
}
.lp-hero-logo {
    width: 88px;
    height: 88px;
    border-radius: 22%;
    margin-bottom: 8px;
    box-shadow: 0 8px 24px rgba(3, 215, 226, 0.25);
}
.lp-hero-eyebrow {
    display: block;
    color: var(--text-dim);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.lp-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 8vw, 3.6rem);
    margin: 0 0 12px;
    color: var(--text);
    font-style: italic;
    letter-spacing: -0.02em;
}
.lp-hero-tagline {
    font-size: 16px;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 12px;
}
.lp-hero-lede {
    color: var(--text-dim);
    line-height: 1.55;
    max-width: 520px;
    margin: 0 auto 24px;
    font-size: 14.5px;
}

.lp-hero-cta {
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-cta-primary {
    font-size: 17px !important;
    padding: 14px 24px !important;
    font-weight: 700 !important;
}
.lp-cta-secondary {
    font-size: 14px !important;
    padding: 10px 16px !important;
}
.lp-welcome-back {
    font-size: 16px;
    color: var(--text);
    margin: 0 0 8px;
}

.lp-hero-trust {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--text-dim);
    font-size: 12px;
}
.lp-hero-trust span {
    white-space: nowrap;
}

/* Section Heads */
.lp-section-head {
    font-size: 22px;
    color: var(--text);
    text-align: center;
    margin: 36px 0 18px;
}

/* Features */
.lp-features {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .lp-features {
        grid-template-columns: repeat(3, 1fr);
    }
}
.lp-feature {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 16px;
    transition: all 0.2s;
}
.lp-feature:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.lp-feature-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 10px;
}
.lp-feature h3 {
    margin: 0 0 8px;
    font-size: 16.5px;
    color: var(--text);
}
.lp-feature p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-dim);
}

/* Steps */
.lp-steps {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-steps li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.lp-step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #03d7e2, #ed4956);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-steps li > div {
    flex: 1;
}
.lp-steps strong {
    display: block;
    color: var(--text);
    font-size: 15px;
    margin-bottom: 2px;
}
.lp-steps small {
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1.45;
}

/* CTA-Block */
.lp-cta-block {
    margin: 36px auto 24px;
    max-width: 480px;
    text-align: center;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.12), rgba(237, 73, 86, 0.08));
    border: 2px solid rgba(3, 215, 226, 0.3);
    border-radius: 16px;
    padding: 24px 20px;
}
.lp-cta-block h2 {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--text);
}
.lp-cta-block p {
    color: var(--text-dim);
    margin: 0 0 16px;
    font-size: 14px;
}
.lp-cta-block-btn {
    font-size: 16px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
}
.lp-cta-block-small {
    margin-top: 12px !important;
    font-size: 12.5px !important;
}
.lp-cta-block-small a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

/* Install-Section */
.lp-install-intro {
    text-align: center;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.55;
    max-width: 540px;
    margin: 0 auto 18px;
}

/* FAQ */
.lp-faq {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0;
    margin-bottom: 8px;
    transition: border-color 0.15s;
}
.lp-faq:hover {
    border-color: rgba(3, 215, 226, 0.4);
}
.lp-faq summary {
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    list-style: none;
    position: relative;
    padding-right: 36px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--text-dim);
    line-height: 1;
}
.lp-faq[open] summary::after {
    content: "−";
}
.lp-faq p {
    padding: 0 16px 14px;
    margin: 0;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.55;
}
.lp-faq a {
    color: var(--accent);
}
.lp-more-faq {
    text-align: center;
    margin: 16px 0 0;
    font-size: 14px;
}
.lp-more-faq a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

/* Footer */
.lp-footer {
    text-align: center;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
}
.lp-footer p {
    margin: 0 0 6px;
}
.lp-footer a {
    color: var(--accent);
    text-decoration: none;
}
.lp-footer-links a {
    margin: 0 4px;
}

/* Mobile */
@media (max-width: 540px) {
    .lp-hero {
        padding: 24px 12px 20px;
    }
    .lp-hero-logo { width: 72px; height: 72px; }
    .lp-hero-tagline { font-size: 14px; }
    .lp-hero-lede { font-size: 13.5px; }
    .lp-section-head { font-size: 19px; margin-top: 28px; }
    .lp-feature h3 { font-size: 15.5px; }
    .lp-steps li { padding: 12px 14px; }
}

/* ====================================================================
   ITER 5.52: Duell-Hub kompakt (statt grosser Card)
   ==================================================================== */

.duels-hub-compact {
    display: flex;
    gap: 8px;
    margin: 10px 0 12px;
    align-items: stretch;
}

.duels-hub-main {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text);
    text-align: left;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.duels-hub-main:hover:not(:disabled) {
    border-color: rgba(237, 73, 86, 0.5);
    background: rgba(237, 73, 86, 0.06);
}
.duels-hub-main:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.duels-hub-mini-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}
.duels-hub-mini-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.duels-hub-mini-text strong {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}
.duels-hub-mini-text small {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.duels-hub-mini-arrow {
    font-size: 18px;
    color: var(--text-dim);
    flex-shrink: 0;
    line-height: 1;
}
.duels-hub-main:hover:not(:disabled) .duels-hub-mini-arrow {
    color: var(--accent);
}

.duels-hub-mini-link {
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 17px;
    color: var(--text-dim);
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.duels-hub-mini-link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.duels-hub-warn-mini {
    display: block;
    color: #ff9800;
    font-size: 11.5px;
    text-align: center;
    margin: -6px 0 12px;
}

/* ====================================================================
   ITER 5.59: Duell-Modal Scroll-Fix - BRACHIAL SIMPEL
   Statt komplexem flex+max-height: der ganze Modal-Wrapper scrollt.
   Die Card hat nur margin oben+unten, keinen max-height.
   ==================================================================== */

/* Duell-Modal-Wrapper scrollt selbst (Desktop + Mobile gleich) */
/* ====================================================================
   ITER v6.40: Duell-Modal verhaelt sich jetzt wie das MatLuk-Modal:
   - Card hat max-height (90vh), kein voll-Wrapper-Scroll
   - Header bleibt fix oben (flex-shrink:0)
   - Body scrollt intern (overflow-y: auto, flex: 1, min-height: 0)
   - Backdrop bleibt fixed
   ==================================================================== */
/* Iter v6.43: Diese Desktop-Regeln gelten NUR fuer Desktop (>540px).
   Auf Mobile soll das Modal Bottom-Sheet sein (modals-v6.css macht das),
   nicht zentriert mit padding. Vorher hatten diese Regeln keinen Media-Wrap
   und haben Mobile blockiert -> Modal landete oben am Bildschirmrand und
   Header verschwand hinter der iPhone-Notch. */
@media (min-width: 541px) {
    #duel-hub-modal,
    #qd-duel-modal,
    #duel-challenge-modal-profile {
        align-items: center !important;
        padding: 16px !important;
    }

    /* Card: gleiches Pattern wie cta-modal-card / Photo-Modal */
    #duel-hub-modal > .ig-modal-card,
    #qd-duel-modal > .ig-modal-card,
    #duel-challenge-modal-profile > .ig-modal-card {
        max-height: 90vh;
        display: flex !important;
        flex-direction: column;
        overflow: hidden;
        margin: auto;
    }
}

/* Body: scrollt intern */
#duel-hub-modal .ig-modal-body,
#qd-duel-modal .ig-modal-body,
#duel-challenge-modal-profile .ig-modal-body {
    overflow-y: auto !important;
    overflow-x: hidden;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Header: fix oben, scrollt NICHT mit */
#duel-hub-modal .ig-modal-header,
#qd-duel-modal .ig-modal-header,
#duel-challenge-modal-profile .ig-modal-header {
    flex-shrink: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: relative;  /* Iter v6.40: sticky war nicht noetig wenn Body intern scrollt */
}

/* Backdrop bleibt fixed */
#duel-hub-modal > .ig-modal-backdrop,
#qd-duel-modal > .ig-modal-backdrop,
#duel-challenge-modal-profile > .ig-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
}

/* Iter v6.43: Frueher hatten wir hier einen eigenen Mobile-Block der das
   Duell-Modal zum Full-Screen mit max-height:100dvh + align-items:stretch
   gemacht hat. Das hat aber dazu gefuehrt, dass auf iPhones mit Notch der
   Header hinter die Status-Bar gerutscht ist. Loesung: KEIN eigener
   Mobile-Block mehr - modals-v6.css macht das richtige Bottom-Sheet (dockt
   unten an, max-height = dvh - 96px - safe-area, oben rund, Drag-Indicator).
   Greift fuer alle .ig-modal-Instanzen einheitlich. */

/* ====================================================================
   ITER 5.53: Coming-Soon-Phantom-Boxen
   ==================================================================== */

.qx-box-card-coming-soon {
    opacity: 0.6;
    pointer-events: none;
}
.qx-box-card-coming-soon .qx-box-link {
    cursor: default !important;
}
.qx-icon-coming-soon {
    filter: grayscale(0.5);
}
.qx-coming-soon-tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.15), rgba(237, 73, 86, 0.1));
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* ====================================================================
   ITER 5.54: Titel-Empty-State auf Pinnwand
   ==================================================================== */

.ig-active-title-empty {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed var(--border);
    color: var(--text-dim) !important;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px !important;
    font-style: italic;
    text-decoration: none;
    transition: all 0.15s;
}
.ig-active-title-empty:hover {
    border-color: var(--accent);
    color: var(--accent) !important;
    background: rgba(3, 215, 226, 0.08);
}
.ig-active-title-empty .ig-title-icon {
    font-size: 13px;
    opacity: 0.7;
}

/* ====================================================================
   ITER 5.55: Box-Type-Trenner auf /quests
   ==================================================================== */

.qx-section-divider {
    list-style: none;
    margin: 18px 0 8px;
    padding: 6px 12px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-bottom: 2px solid var(--border);
    border-left: 3px solid var(--accent);
    background: linear-gradient(90deg, rgba(3,215,226,0.06), transparent 80%);
    border-radius: 4px;
}
.qx-section-divider:first-child {
    margin-top: 0;
}
.qx-section-icon {
    font-size: 18px;
    line-height: 1;
}
.qx-section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
}
.qx-section-hint {
    font-size: 11.5px;
    color: var(--text-dim);
    margin-left: auto;
    font-style: italic;
}
@media (max-width: 540px) {
    .qx-section-hint {
        display: none;  /* sehr schmal: hint weglassen */
    }
    .qx-section-title { font-size: 12.5px; }
}

/* ====================================================================
   ITER 5.55: Quest-Pick-Liste im Duell-Modal
   ==================================================================== */

.duel-quest-pick-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.duel-quest-group-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 4px 6px;
    border-bottom: 1px solid var(--border);
    margin-top: 8px;
    margin-bottom: 4px;
}
.duel-quest-group-header:first-child {
    margin-top: 0;
    padding-top: 0;
}
.duel-quest-group-icon {
    font-size: 18px;
    line-height: 1;
}
.duel-quest-group-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}
.duel-quest-group-meta {
    font-size: 11px;
    color: var(--text-dim);
    margin-left: auto;
}

.duel-quest-pick-form {
    margin: 0;
}
.duel-quest-pick-btn {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.duel-quest-pick-btn:hover:not(:disabled) {
    border-color: var(--accent);
    background: rgba(3, 215, 226, 0.06);
    transform: translateX(2px);
}
.duel-quest-pick-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Schwierigkeits-Badge */
.duel-quest-pick-diff {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    color: #fff;
    background: #03d7e2;
}
.duel-quest-pick-diff.diff-easy      { background: #03d7e2; }
.duel-quest-pick-diff.diff-medium    { background: #4caf50; }
.duel-quest-pick-diff.diff-hard      { background: #ff9800; }
.duel-quest-pick-diff.diff-very_hard { background: #ed4956; }
.duel-quest-pick-diff.diff-legendary {
    background: linear-gradient(135deg, #ffd700, #ed4956);
}

.duel-quest-pick-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.duel-quest-pick-info strong {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
}
.duel-quest-pick-info small {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.duel-quest-pick-arrow {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--text-dim);
}
.duel-quest-pick-btn:hover:not(:disabled) .duel-quest-pick-arrow {
    color: var(--accent);
}

/* ====================================================================
   ITER 5.56: 2-Schritt-Navigation im Duell-Modal
   ==================================================================== */

.duel-back-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.duel-back-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

/* ====================================================================
   ITER 5.56: Duell-CTA auf Quest-Detail-Seite
   ==================================================================== */

.qd-duel-cta {
    background: linear-gradient(135deg, rgba(237,73,86,0.10), rgba(255,152,0,0.06));
    border: 1px solid rgba(237,73,86,0.3);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 14px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.qd-duel-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}
.qd-duel-text {
    flex: 1;
    min-width: 0;
}
.qd-duel-text strong {
    display: block;
    font-size: 14.5px;
    color: var(--text);
    font-weight: 700;
    line-height: 1.2;
}
.qd-duel-text small {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
    line-height: 1.4;
}
.qd-duel-open {
    flex-shrink: 0;
    background: linear-gradient(135deg, #ff9800, #ed4956) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
}
.qd-duel-open:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 540px) {
    .qd-duel-cta {
        flex-wrap: wrap;
    }
    .qd-duel-open {
        width: 100%;
        margin-top: 6px;
    }
}

/* ====================================================================
   ITER 5.57: Toast-Bestaetigungen + Modal-Scroll-Fix Pinnwand-Foto
   ==================================================================== */

/* Toast: kleiner Hinweis am unteren Bildschirmrand */
.matluk-toast {
    position: fixed;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%) translateY(20px);
    background: rgba(3, 215, 226, 0.95);
    color: #000;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    max-width: calc(100vw - 32px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.matluk-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.matluk-toast.matluk-toast-error {
    background: #ed4956;
    color: #fff;
}

/* Pinnwand-Foto-Modal: Scrollbar machen */
.ig-modal-card.ig-modal-photo {
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;  /* dynamic viewport (iOS) */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
.ig-modal-card.ig-modal-photo .ig-modal-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 2;
}
.ig-modal-card.ig-modal-photo .ig-modal-body {
    flex: 1 1 auto;
    min-height: 0;  /* CRITICAL: ohne das greift overflow nicht */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
.ig-modal-card.ig-modal-photo .ig-modal-photo-wrap {
    flex-shrink: 0;
    max-height: 50vh;
    max-height: 50dvh;
    overflow: hidden;
}
.ig-modal-card.ig-modal-photo .ig-modal-photo-wrap img {
    max-height: 50vh;
    max-height: 50dvh;
    width: 100%;
    object-fit: contain;
}

/* Mobile: Bottom-Sheet-Style fuer Foto-Modal */
@media (max-width: 540px) {
    .ig-modal-card.ig-modal-photo {
        /* Iter v6.49b: Card endet exakt auf Nav-Oberkante (--bn-h-full aus
           modals-v6.css). Vorher 92dvh -> ueberlappt mit Nav. */
        max-height: calc(100vh - var(--bn-h-full, 80px)) !important;
        max-height: calc(100dvh - var(--bn-h-full, 80px)) !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        margin-bottom: 0 !important;
    }
    .ig-modal:has(.ig-modal-photo) {
        /* Iter v6.49b: padding-bottom = Nav-Hoehe, damit Card buendig auf
           Nav-Oberkante andockt. Vorher padding: 0 -> Card ging bis ganz unten. */
        padding: 0 !important;
        padding-bottom: var(--bn-h-full, 80px) !important;
        align-items: flex-end !important;
    }
}

/* ====================================================================
   ITER 5.58: Desktop-Hint (Foto nur am Handy)
   ==================================================================== */

.capture-desktop-hint {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    margin: 16px 0;
}
.capture-desktop-icon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 12px;
    opacity: 0.85;
}
.capture-desktop-hint h2 {
    margin: 0 0 12px;
    font-size: 20px;
    color: var(--text);
}
.capture-desktop-hint p {
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 12px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.capture-desktop-hint p:last-of-type {
    margin-bottom: 18px;
}
.capture-desktop-hint strong {
    color: var(--text);
    word-break: break-all;
}
.capture-desktop-hint .btn {
    display: inline-block;
    max-width: 320px;
}

/* ====================================================================
   ITER 5.58: Duell-Only-Quest-Hinweis auf Quest-Detail
   ==================================================================== */

.duel-only-card {
    text-align: center;
    padding: 32px 20px !important;
    background: linear-gradient(135deg,
        rgba(237,73,86,0.08),
        rgba(255,152,0,0.05));
    border: 1px dashed rgba(237,73,86,0.4) !important;
}
.duel-only-icon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 14px;
}
.duel-only-card h2 {
    margin: 0 0 12px;
    font-size: 19px;
    color: var(--text);
}
.duel-only-card p {
    color: var(--text-dim);
    line-height: 1.55;
    max-width: 440px;
    margin: 0 auto 12px;
}
.duel-only-card p.hint {
    font-size: 13px;
    margin-top: 16px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    display: inline-block;
}

/* ====================================================================
   ITER 5.59: Pinnwand-Style an Quest-Seite angeglichen
   - Groessere Icons + Werte
   - Farbiger Active-Tab (Cyan-Gradient wie auf Quests)
   - Card-Style einheitlich
   ==================================================================== */

/* === STATS-BAR: groessere Werte mit Akzent-Farbe === */
.ig-stats {
    gap: 14px !important;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
}

.ig-stat {
    align-items: center !important;  /* zentriert wie eine Card */
    text-align: center;
    padding: 10px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.15s, transform 0.12s;
}
.ig-stat:hover {
    border-color: rgba(3, 215, 226, 0.45);
    transform: translateY(-1px);
}

.ig-stat-icon {
    font-size: 22px !important;
    margin-bottom: 4px !important;
}
.ig-stat-value {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--text);
    letter-spacing: -0.01em;
}
.ig-stat-value-secondary {
    font-size: 13px !important;
    color: var(--text-mute);
}
.ig-stat-label {
    font-size: 11px !important;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-top: 2px;
}

@media (max-width: 540px) {
    .ig-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .ig-stat-value { font-size: 17px !important; }
    .ig-stat-icon { font-size: 18px !important; }
    .ig-stat-label { font-size: 10px !important; }
    .ig-stat { padding: 8px 4px; }
}

/* === TABS: Quest-Style (vertical stack, Cyan-Active, Border-Glow) === */
.ig-tabs.ig-tabs-v2 {
    display: flex !important;
    gap: 6px;
    margin: 18px 0 14px !important;
    background: var(--bg-card);
    border: 1px solid var(--border) !important;
    border-top: 1px solid var(--border) !important;  /* Override fuers default */
    border-radius: 12px;
    padding: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ig-tabs.ig-tabs-v2::-webkit-scrollbar { display: none; }

.ig-tabs-v2 .ig-tab {
    flex: 1;
    min-width: 70px;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 9px 6px !important;
    border-radius: 8px !important;
    border-top: none !important;
    margin-top: 0 !important;
    color: var(--text-dim) !important;
    transition: background 0.15s, color 0.15s, transform 0.1s !important;
}
.ig-tabs-v2 .ig-tab:hover {
    background: var(--bg-elevated);
    color: var(--text) !important;
}
.ig-tabs-v2 .ig-tab.is-active {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.22), rgba(76, 175, 80, 0.12)) !important;
    color: #03d7e2 !important;
    box-shadow: inset 0 0 0 1px rgba(3, 215, 226, 0.4);
    border-top-color: transparent !important;
}
.ig-tabs-v2 .ig-tab-icon {
    font-size: 22px !important;
    line-height: 1;
}
.ig-tabs-v2 .ig-tab-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ig-tabs-v2 .ig-tab-count {
    font-size: 10.5px !important;
    background: rgba(0, 0, 0, 0.18) !important;
    padding: 1px 7px !important;
    border-radius: 8px;
    min-width: 18px;
    margin: 1px 0 0 !important;
    font-weight: 700;
    color: var(--text-dim) !important;
}
.ig-tabs-v2 .ig-tab.is-active .ig-tab-count {
    background: rgba(3, 215, 226, 0.3) !important;
    color: #fff !important;
}

@media (max-width: 540px) {
    .ig-tabs-v2 .ig-tab-icon { font-size: 19px !important; }
    .ig-tabs-v2 .ig-tab-label { font-size: 10px !important; }
    .ig-tabs-v2 .ig-tab { padding: 7px 4px !important; min-width: 56px; }
}

/* === FOTO-GRID: hueberer Hover, gleicher Radius === */
.ig-grid-tile {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.12s, box-shadow 0.15s;
}
.ig-grid-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.ig-grid-tile.is-best {
    outline-width: 3px !important;
    box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* === Private-Row Pills mit mehr Akzent === */
.ig-private-row {
    gap: 10px;
    flex-wrap: wrap;
}
.ig-private-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    transition: border-color 0.15s;
}
.ig-private-item.ig-private-energy {
    border-color: rgba(3, 215, 226, 0.4);
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.08), transparent);
}

/* === Section-Subhead: edler === */
.ig-section-subhead {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
    margin: 22px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border);
    border-left: 3px solid var(--accent);
    padding-left: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(3,215,226,0.06), transparent 70%);
    padding-top: 6px;
}

/* ====================================================================
   ITER 5.60: Vereinfachtes Duell-Modal + Aktive Duelle Section
   ==================================================================== */

/* Modal: Form-Container statt Box-Picker */
.duel-simple-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 6px;
}

.duel-start-btn {
    margin-top: 4px;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 12px !important;
    background: linear-gradient(135deg, #03d7e2, #4caf50) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 12px !important;
    transition: transform 0.12s, box-shadow 0.15s;
}
.duel-start-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(3, 215, 226, 0.35);
}
.duel-start-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--bg-elevated) !important;
    color: var(--text-dim) !important;
}

/* === Aktive Duelle Section auf /quests === */
.active-duels-section {
    margin: 14px 0 6px;
}
.active-duels-headline {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
    margin: 0 0 8px;
    padding: 6px 12px;
    border-bottom: 2px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(237,73,86,0.08), transparent 80%);
}
.pending-duels-section .active-duels-headline {
    border-left-color: #ff9800;
    background: linear-gradient(90deg, rgba(255,152,0,0.08), transparent 80%);
}
.active-duels-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.active-duel-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
}
.active-duel-card:hover {
    transform: translateY(-1px);
    border-color: rgba(237,73,86,0.5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.pending-duel-card:hover {
    border-color: rgba(255,152,0,0.5);
}
.active-duel-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--text);
}
.active-duel-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}
.active-duel-info {
    flex: 1;
    min-width: 0;
}
.active-duel-info strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    display: block;
}
.active-duel-info small {
    display: block;
    font-size: 11.5px;
    color: var(--text-dim);
    margin-top: 2px;
    line-height: 1.4;
}
.active-duel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.active-duel-tag {
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.active-duel-tag-random {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.3), rgba(237, 73, 86, 0.2));
    color: #ffd23f;
}
.active-duel-tag-friend {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
}
.active-duel-arrow {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--text-dim);
}
.active-duel-link:hover .active-duel-arrow {
    color: var(--accent);
}
.active-duel-expires {
    font-weight: 600;
    color: #ff9800;
}

/* ====================================================================
   ITER 5.61: Quest-Edit-Form Anpassungen fuer 4 Quest-Typen
   ==================================================================== */

/* 4 Quest-Type-Cards in einer Reihe wenn Platz */
.quest-type-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

/* Hint im quest-type-card Text */
.quest-type-card p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
}

/* Duell-Settings Visual-Marker */
#duel-settings-fieldset {
    background: linear-gradient(135deg, rgba(237,73,86,0.04), transparent);
    border-left: 3px solid rgba(237,73,86,0.4);
}

/* Daily-Marker */
#daily-fieldset {
    background: linear-gradient(135deg, rgba(255,210,63,0.05), transparent);
    border-left: 3px solid rgba(255,210,63,0.4);
}

/* Duel-No-Reward-Hint hervorheben */
#duel-no-reward-hint {
    font-size: 12.5px;
    line-height: 1.5;
}

/* ====================================================================
   ITER 5.61: Foto-Tile Border + groesserer Gap fuer klarere Trennung
   ==================================================================== */

.ig-grid {
    gap: 8px !important;  /* statt 2px - klare Trennung zwischen Fotos */
}

.ig-grid-tile {
    border: 1px solid var(--border) !important;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
}
.ig-grid-tile:hover {
    border-color: rgba(3, 215, 226, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Best-of: kraeftigerer Gold-Rand */
.ig-grid-tile.is-best {
    border-color: var(--accent) !important;
    outline: 2px solid var(--accent);
    outline-offset: -3px;
    box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Mobile: leicht kleinerer Gap */
@media (max-width: 540px) {
    .ig-grid {
        gap: 6px !important;
    }
}

/* ====================================================================
   ITER 5.62: Sicherer Border-Override mit hoeherer Specificity
   ==================================================================== */

/* Doppelte Specificity damit garantiert spaetere Regeln nicht ueberschreiben */
ul.ig-grid {
    gap: 8px !important;
}
ul.ig-grid li.ig-grid-tile {
    border: 1px solid var(--border, rgba(255,255,255,0.12)) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--bg-elevated, #1a1a1a);
    transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
}
ul.ig-grid li.ig-grid-tile:hover {
    border-color: rgba(3, 215, 226, 0.55) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
ul.ig-grid li.ig-grid-tile.is-best {
    border-color: #ffd23f !important;
    box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 540px) {
    ul.ig-grid {
        gap: 6px !important;
    }
}

/* Edit-Link in Vis-Indicator */
.ig-vis-edit-link {
    color: var(--accent);
    text-decoration: underline;
    font-weight: 600;
    margin-left: 4px;
}
.ig-vis-edit-link:hover {
    opacity: 0.85;
}

/* ====================================================================
   ITER 5.64: Quick-Action-Cards (Daily + Duell) am Anfang Quest-Liste
   ==================================================================== */

.qx-quick-actions {
    margin-bottom: 18px !important;
}

/* Card-Container fuer Daily und Duell */
.qx-box-card-daily,
.qx-box-card-duel {
    position: relative;
    overflow: visible !important;  /* Damit Corner-Link sichtbar */
}

/* Daily-Card mit Flammen-Akzent */
.qx-box-card-daily {
    background: linear-gradient(135deg,
        rgba(255, 152, 0, 0.10),
        rgba(237, 73, 86, 0.06)) !important;
    border-color: rgba(255, 152, 0, 0.4) !important;
}
.qx-box-card-daily:hover {
    border-color: rgba(255, 152, 0, 0.7) !important;
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.15) !important;
}

/* Duell-Card mit Schwerter-Akzent */
.qx-box-card-duel {
    background: linear-gradient(135deg,
        rgba(237, 73, 86, 0.10),
        rgba(3, 215, 226, 0.05)) !important;
    border-color: rgba(237, 73, 86, 0.4) !important;
}
.qx-box-card-duel:hover {
    border-color: rgba(237, 73, 86, 0.7) !important;
    box-shadow: 0 6px 20px rgba(237, 73, 86, 0.15) !important;
}

/* Spezial-Icons */
.qx-box-icon-daily {
    background: linear-gradient(135deg, #ff9800, #ed4956) !important;
    color: #fff !important;
    font-size: 32px !important;
    box-shadow: 0 4px 14px rgba(255, 152, 0, 0.35);
    animation: daily-flame-glow 2.5s ease-in-out infinite;
}
@keyframes daily-flame-glow {
    0%, 100% { box-shadow: 0 4px 14px rgba(255, 152, 0, 0.35); }
    50%      { box-shadow: 0 4px 20px rgba(255, 152, 0, 0.6); }
}

.qx-box-icon-duel {
    background: linear-gradient(135deg, #ed4956, #ff9800) !important;
    color: #fff !important;
    font-size: 32px !important;
    box-shadow: 0 4px 14px rgba(237, 73, 86, 0.35);
}

/* Button-Variante (Duell) sieht aus wie Link */
.qx-box-btn {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.qx-box-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Done-Tag (Daily heute geschafft) */
.qx-box-tag-done {
    background: linear-gradient(135deg, #4caf50, #03d7e2) !important;
    color: #fff !important;
}
.qx-box-tag-daily {
    background: linear-gradient(135deg, #ff9800, #ed4956) !important;
    color: #fff !important;
}

/* Quick-Stats unter dem Box-Text */
.qx-quick-stats {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.qx-quick-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--text-dim);
}
.qx-quick-stat strong {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.qx-quick-stat small {
    font-size: 10.5px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Win/Loss-Akzente */
.qx-quick-stat-won strong {
    color: #4caf50;
}
.qx-quick-stat-lost strong {
    color: #ed4956;
}

/* Box-Arrow (kleiner Pfeil rechts) */
.qx-box-arrow {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--text-dim);
    margin-left: 8px;
}
.qx-box-link:hover .qx-box-arrow {
    color: var(--accent);
}

/* Corner-Link (📜 zu /duelle) */
.qx-quick-corner-link {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    color: var(--text);
    transition: background 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.qx-quick-corner-link:hover {
    background: rgba(0, 0, 0, 0.55);
    transform: scale(1.08);
}

/* Mobile: Stats etwas kompakter */
@media (max-width: 540px) {
    .qx-quick-stats { gap: 10px; }
    .qx-quick-stat strong { font-size: 14px; }
    .qx-quick-stat small { font-size: 9.5px; }
    .qx-box-icon-daily,
    .qx-box-icon-duel { font-size: 28px !important; }
}

/* ====================================================================
   ITER 5.65: Magic-Link-Login Styling
   ==================================================================== */

.magic-link-form {
    margin-bottom: 8px;
}
.btn-magic-link {
    background: linear-gradient(135deg, #03d7e2, #4caf50) !important;
    color: #000 !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 14px !important;
    box-shadow: 0 4px 14px rgba(3, 215, 226, 0.3);
    transition: transform 0.12s, box-shadow 0.15s;
}
.btn-magic-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(3, 215, 226, 0.45);
}
.magic-link-hint {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0 16px;
    color: var(--text-mute);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.auth-divider::before { margin-right: 14px; }
.auth-divider::after  { margin-left: 14px; }

.auth-pwd-form {
    opacity: 0.85;
}
.auth-pwd-form .field label {
    font-size: 12.5px;
    color: var(--text-dim);
}

/* Erfolgs-Banner nach Magic-Link-Senden */
.magic-success-banner {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
    padding: 16px !important;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(3, 215, 226, 0.08)) !important;
    border: 1px solid rgba(76, 175, 80, 0.4) !important;
    border-radius: 12px !important;
    margin-bottom: 20px;
}
.magic-success-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}
.magic-success-banner strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--text);
}
.magic-success-banner p {
    margin: 0;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
}

/* ====================================================================
   ITER 5.67: PWA-Install-Button + Welcome-Banner + Modal
   ==================================================================== */

/* === Install-Button im Login === */
.btn-pwa-install {
    background: linear-gradient(135deg, #03d7e2, #4caf50) !important;
    color: #000 !important;
    border: none !important;
    font-weight: 700 !important;
    margin-top: 8px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-pwa-install .pwa-install-icon {
    font-size: 22px;
}
.pwa-install-intro {
    margin: 8px 0 12px;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
}
.pwa-install-fallback {
    margin-top: 10px;
    text-align: center;
    color: var(--text-mute);
    font-size: 11px;
}
.pwa-install-fallback a {
    color: var(--accent);
    text-decoration: underline;
}

/* === Welcome-Banner auf Pinnwand === */
.pwa-welcome-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.15), rgba(76, 175, 80, 0.08));
    border: 1px solid rgba(3, 215, 226, 0.4);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(3, 215, 226, 0.1);
    animation: pwa-banner-slide 0.4s ease-out;
}
@keyframes pwa-banner-slide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pwa-banner-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 6px;
}
.pwa-banner-close:hover {
    background: rgba(0, 0, 0, 0.2);
    color: var(--text);
}
.pwa-banner-icon {
    font-size: 36px;
    flex-shrink: 0;
    line-height: 1;
}
.pwa-banner-text {
    flex: 1;
    min-width: 0;
}
.pwa-banner-text strong {
    display: block;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 3px;
}
.pwa-banner-text small {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}
.pwa-banner-cta {
    flex-shrink: 0;
    white-space: nowrap;
    background: linear-gradient(135deg, #03d7e2, #4caf50) !important;
    color: #000 !important;
    border: none !important;
    font-weight: 700 !important;
}

/* Mobile: Banner stacken */
@media (max-width: 540px) {
    .pwa-welcome-banner {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 16px 14px;
    }
    .pwa-banner-icon { font-size: 40px; }
    .pwa-banner-cta { width: 100%; }
}

/* === PWA-Install-Modal (iOS-Anleitung + Fallback) === */
.pwa-modal {
    /* Iter v6.45f: endet ueber der Bottom-Nav (siehe .ig-modal) */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(72px + env(safe-area-inset-bottom, 0));
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.pwa-modal[hidden] {
    display: none;
}
.pwa-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.pwa-modal-card {
    position: relative;
    max-width: 440px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.pwa-modal-card h3 {
    margin: 0 0 14px;
    font-size: 18px;
}
.pwa-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
}
.pwa-modal-close:hover {
    color: var(--text);
}
.pwa-ios-steps {
    padding-left: 22px;
    margin: 12px 0;
    line-height: 1.7;
}
.pwa-ios-steps li {
    margin-bottom: 10px;
    color: var(--text);
}
.pwa-ios-icon {
    display: inline-block;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 6px;
    margin: 0 4px;
}
.pwa-ios-note {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--text-dim);
    margin: 14px 0;
    line-height: 1.5;
}

/* Install-Grid im Fallback-Modal */
.pwa-modal-card .pwa-install-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 14px 0;
}
.pwa-modal-card .pwa-install-grid > div {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}
.pwa-modal-card .pwa-install-grid strong {
    display: block;
    margin: 6px 0 4px;
    font-size: 13.5px;
    color: var(--text);
}
.pwa-modal-card .pwa-install-grid small {
    display: block;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
}
.pwa-modal-card .pwa-os-icon {
    font-size: 22px;
}

/* === ITER 5.68: PWA-Eintrag im Account-Menue === */

/* Button mit gleichem Styling wie acc-list-item Links */
.acc-list-item.acc-list-item-pwa {
    background: linear-gradient(90deg, rgba(3, 215, 226, 0.10), transparent 60%);
    border-left: 3px solid var(--accent);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    color: var(--text);
    padding-left: calc(var(--acc-pad-x, 16px) - 3px);
}
.acc-list-item.acc-list-item-pwa:hover {
    background: linear-gradient(90deg, rgba(3, 215, 226, 0.18), transparent 60%);
}
.acc-list-item.acc-list-item-pwa .acc-list-value {
    color: var(--accent);
    font-weight: 600;
}

/* ====================================================================
   ITER 5.69: Username-Onboarding (Magic-Link Erstanmeldung)
   ==================================================================== */

.onboarding-page .auth-card {
    max-width: 520px;
    margin: 16px auto;
}

.onboarding-intro {
    text-align: center;
    margin-bottom: 18px;
}
.onboarding-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 8px;
    animation: onboarding-pulse 2.5s ease-in-out infinite;
}
@keyframes onboarding-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.onboarding-intro h2 {
    margin: 0 0 6px;
    font-size: 22px;
}
.onboarding-intro p {
    color: var(--text-dim);
    line-height: 1.5;
    margin: 0;
}

.onboarding-warn {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.15), rgba(237, 73, 86, 0.08)) !important;
    border: 1px solid rgba(255, 152, 0, 0.4) !important;
    border-radius: 10px;
    padding: 12px 14px !important;
    margin: 14px 0;
    font-size: 13px;
    line-height: 1.5;
}
.onboarding-warn strong {
    color: #ffc107;
}

.btn-onboarding {
    background: linear-gradient(135deg, #03d7e2, #4caf50) !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 14px !important;
}

.onboarding-tips {
    margin-top: 20px;
    padding: 14px;
    background: var(--bg-elevated);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
}
.onboarding-tips strong {
    display: block;
    margin-bottom: 6px;
    color: var(--accent);
}
.onboarding-tips ul {
    margin: 0;
    padding-left: 20px;
}
.onboarding-tips li {
    margin-bottom: 4px;
    color: var(--text-dim);
}

.field-hint {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-mute);
}

/* === ITER 5.70: Magic-Link "Neu hier?" Hinweis === */
.magic-link-newuser-hint {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.12), rgba(3, 215, 226, 0.06));
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
}
.magic-link-newuser-hint strong {
    color: var(--text);
}

/* ====================================================================
   ITER 5.71: HERO-Box-Cards - grosses Bild oben, Content unten
   ==================================================================== */

/* === ITER 5.996: Quests-Page-Refresh ===
   Roland-Anforderung: Kisten größer, kein künstlicher Rahmen rundum
   (die Fotos sind freistehend), Style etwas anpassen.
   Funktionen 1:1 gleich.

   Vorher: solider Card-Hintergrund + Border + opaker Bildhintergrund.
   Jetzt:  freistehendes Bild auf Page-Hintergrund, weicher Schatten,
           größere Aspect-Ratio, kein Card-Background außer im Content-Block. */
.qx-box-card-hero {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    transition: transform 0.18s ease;
    list-style: none;
    margin-bottom: 28px;
    padding: 0;
}
.qx-box-card-hero:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: none;
}
.qx-box-card-hero.qx-box-card-locked:hover {
    border-color: transparent;
}

.qx-box-link-hero {
    display: block;
    text-decoration: none;
    color: var(--text);
}

/* === Hero-Bild: freistehend, größer, ohne Hintergrund-Block === */
.qx-box-hero-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;          /* 5.996: höher = größer wirkend (war 16/9) */
    background: transparent;       /* 5.996: kein Hintergrund-Block mehr */
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.18));
    transition: filter 0.2s ease;
}
.qx-box-card-hero:hover .qx-box-hero-img {
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.28));
}
.qx-box-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;           /* 5.996: contain damit transparente PNGs richtig rauskommen */
    display: block;
    transition: transform 0.4s ease;
    background: transparent;
}
.qx-box-card-hero:hover .qx-box-hero-img img {
    transform: scale(1.04);
}

/* Locked: Bild leicht ausgegraut (statt Border-Effekt) */
.qx-box-card-hero.qx-box-card-locked .qx-box-hero-img img {
    opacity: 0.55;
    filter: grayscale(0.4);
}
.qx-box-card-hero.qx-box-card-locked:hover .qx-box-hero-img img {
    opacity: 0.7;
}
/* Bestanden: leichter grüner Glow ums Bild */
.qx-box-card-hero.qx-box-card-done .qx-box-hero-img {
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.18))
            drop-shadow(0 0 12px rgba(34, 197, 94, 0.35));
}

/* Fallback-Icon wenn kein Bild — Iter 5.996: rund + dezent */
.qx-box-hero-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 45%, rgba(3, 215, 226, 0.18), rgba(3, 215, 226, 0.04) 60%, transparent 80%);
    border-radius: 24px;
}
.qx-box-hero-fallback-icon {
    font-size: 120px;
    line-height: 1;
    opacity: 0.8;
}

/* Locked / Coming-Soon */
.qx-hero-locked img,
.qx-hero-locked .qx-box-hero-fallback {
    filter: grayscale(70%) brightness(0.7);
}
.qx-hero-coming-soon .qx-box-hero-fallback-icon {
    opacity: 0.5;
}
.qx-lock-badge-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 2;
}

/* Tag-Overlay (EVENT/DUELL/POKAL) oben rechts */
.qx-box-tag-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Title-Bar mit Gradient unten ueber dem Bild */
/* Iter 5.996: Titlebar ist jetzt KEIN Overlay mehr (das wirkt bei
   freistehenden Fotos künstlich). Stattdessen: schlichte Caption unter Bild. */
.qx-box-hero-titlebar {
    position: static;
    padding: 4px 6px 10px;
    background: transparent;
    z-index: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.qx-box-hero-name {
    margin: 0;
    color: var(--text) !important;
    font-size: 22px;
    font-weight: 800;
    text-shadow: none;
    line-height: 1.2;
    flex: 1;
    text-align: center;
}
.qx-box-hero-titlebar .qx-coming-soon-tag {
    background: rgba(255, 152, 0, 0.18);
    backdrop-filter: none;
    color: #e65100;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255, 152, 0, 0.3);
}
[data-theme="dark"] .qx-box-hero-titlebar .qx-coming-soon-tag,
:root:not([data-theme]) .qx-box-hero-titlebar .qx-coming-soon-tag {
    color: #ffb74d;
}

/* === Content unter dem Bild === */
.qx-box-hero-content {
    /* Iter 5.996: Content bleibt mit dezentem Card-Look damit Aktionen
       (Buttons, Progress) gut greifbar sind, aber kein voller Card-Border. */
    padding: 12px 14px 14px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.qx-box-hero-content:empty {
    display: none;
}
.qx-box-hero-content .qx-box-desc {
    margin: 0 0 10px;
    color: var(--text-dim);
    font-size: 13.5px;
    line-height: 1.5;
}
.qx-box-hero-content .qx-rewards-block {
    margin: 0 0 10px;
}

/* Progress-Bar im Content */
.qx-box-hero-content .qx-box-progress {
    margin-top: 12px;
}
.qx-box-hero-content .qx-box-progress-text {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12.5px;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.qx-box-hero-content .qx-box-progress-text strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Locked-Info-Block */
.qx-box-hero-content .qx-box-locked-info {
    margin-bottom: 10px;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
}
.qx-box-hero-content .qx-lock-reason {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 152, 0, 0.15);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 6px;
    color: #ffc107;
    font-size: 12px;
    font-weight: 600;
}

/* Mobile: Bild kompakter aber immer noch groß */
@media (max-width: 540px) {
    .qx-box-hero-img {
        aspect-ratio: 4 / 3;
    }
    .qx-box-hero-name {
        font-size: 18px;
    }
    .qx-box-hero-fallback-icon {
        font-size: 70px;
    }
    .qx-box-hero-titlebar {
        padding: 4px 4px 8px;
    }
    .qx-box-hero-content {
        padding: 10px 12px 12px;
    }
    .qx-box-card-hero {
        margin-bottom: 24px;
    }
}

/* Light-Theme Anpassungen — Iter 5.996: Titlebar ist nicht mehr Overlay */
[data-theme="light"] .qx-box-hero-titlebar {
    background: transparent;
}
[data-theme="light"] .qx-box-hero-fallback {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.10), rgba(76, 175, 80, 0.05));
}
/* Iter 5.996: kein Hintergrund-Block mehr noetig - Bilder sind freistehend.
   Light-Theme override fuer Hero-Img entfaellt komplett. */

/* ====================================================================
   ITER 5.72: Box-Image-Picker im Admin (groesser + 16:9)
   ==================================================================== */

/* Override: Tiles im 16:9-Format und groesser */
.adm-image-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    max-height: 540px !important;
    padding: 10px !important;
}
.adm-image-tile {
    aspect-ratio: 16 / 9 !important;
    position: relative;
}
.adm-image-tile.is-selected {
    border-color: #4caf50 !important;
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.35) !important;
}
.adm-image-tile.is-selected::after {
    content: "✓ Aktiv";
    position: absolute;
    top: 6px;
    right: 6px;
    background: #4caf50;
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.adm-image-emoji {
    font-size: 36px !important;
}

/* Save-Success deutlich + mit Bild-Preview */
.adm-save-success {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 14px 16px !important;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.18), rgba(3, 215, 226, 0.10)) !important;
    border: 2px solid rgba(76, 175, 80, 0.5) !important;
    border-radius: 12px !important;
    margin-bottom: 16px;
    animation: save-success-pulse 0.6s ease-out;
}
@keyframes save-success-pulse {
    0%   { transform: scale(0.97); opacity: 0; }
    60%  { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(1); }
}
.adm-save-success-icon {
    font-size: 36px;
    line-height: 1;
    flex-shrink: 0;
}
.adm-save-success-text {
    flex: 1;
}
.adm-save-success-text strong {
    display: block;
    font-size: 16px;
    color: var(--text);
    margin-bottom: 2px;
}
.adm-save-success-text small {
    display: block;
    font-size: 12.5px;
    color: var(--text-dim);
}
.adm-save-success-preview {
    width: 96px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid rgba(76, 175, 80, 0.5);
    flex-shrink: 0;
}

/* Mobile: stack vertical */
@media (max-width: 540px) {
    .adm-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    }
    .adm-save-success {
        flex-wrap: wrap;
    }
    .adm-save-success-preview {
        width: 80px;
        height: 45px;
    }
}

/* Aktuelles Bild gross */
.adm-current-image {
    margin-top: 14px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: 10px;
    border: 1px solid var(--border);
}
.adm-current-image-preview {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: block;
    margin: 8px 0;
}
.adm-current-image-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.adm-current-image-row > div {
    flex: 1;
    min-width: 200px;
}

/* Upload-Section staerker hervorheben */
.adm-image-upload-section {
    margin-top: 14px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.08), transparent);
    border: 1px dashed rgba(3, 215, 226, 0.4);
    border-radius: 10px;
}
.adm-upload-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap;
}
.adm-upload-form input[type="file"] {
    flex: 1;
    min-width: 200px;
    padding: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
}

.adm-image-library-section {
    margin-top: 18px;
}

/* ====================================================================
   ITER 5.73: PWA-Install-Hero-Banner ueber Login + App-Hinweis nach Magic
   ==================================================================== */

/* Hero-Banner ueber Login (auch fuer nicht-eingeloggte) */
.pwa-install-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px 0;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.18), rgba(76, 175, 80, 0.10));
    border: 2px solid rgba(3, 215, 226, 0.5);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(3, 215, 226, 0.15);
    animation: pwa-hero-glow 3s ease-in-out infinite;
}
@keyframes pwa-hero-glow {
    0%, 100% { box-shadow: 0 6px 20px rgba(3, 215, 226, 0.15); }
    50%      { box-shadow: 0 8px 28px rgba(3, 215, 226, 0.30); }
}
.pwa-install-hero-icon {
    font-size: 44px;
    line-height: 1;
    grid-row: 1 / span 2;
}
.pwa-install-hero-text {
    grid-row: 1 / span 2;
}
.pwa-install-hero-text strong {
    display: block;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 3px;
}
.pwa-install-hero-text p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.5;
}
.btn-pwa-install-hero,
.btn-pwa-install-fallback {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    white-space: nowrap;
    background: linear-gradient(135deg, #03d7e2, #4caf50) !important;
    color: #000 !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
}
.btn-pwa-install-fallback {
    background: transparent !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    font-weight: 600 !important;
}

/* Mobile: stack vertical */
@media (max-width: 540px) {
    .pwa-install-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .pwa-install-hero-icon {
        grid-row: 1;
        grid-column: 1;
        font-size: 50px;
    }
    .pwa-install-hero-text {
        grid-row: 2;
        grid-column: 1;
    }
    .btn-pwa-install-hero,
    .btn-pwa-install-fallback {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
    }
}

/* App-Hinweis im Magic-Sent-Banner */
.pwa-after-magic-hint {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(3, 215, 226, 0.08);
    border: 1px solid rgba(3, 215, 226, 0.3);
    border-radius: 10px;
}
.pwa-after-magic-hint strong {
    display: block;
    margin-bottom: 4px;
    color: var(--accent);
    font-size: 14px;
}
.pwa-after-magic-hint p {
    margin: 0 !important;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
}
.pwa-after-magic-not-installed {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.3);
}
.pwa-after-magic-not-installed strong {
    color: #4caf50;
}

/* ====================================================================
   ITER 5.74: Direkt-Upload als eigene Form vor Box-Edit-Hauptform
   (Bug-Fix: vorher waren Forms verschachtelt, image_filename wurde nicht gespeichert)
   ==================================================================== */

.adm-direct-upload-card {
    margin: 0 0 18px 0;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.10), rgba(76, 175, 80, 0.05));
    border: 2px dashed rgba(3, 215, 226, 0.5);
    border-radius: 12px;
}
.adm-direct-upload-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.adm-direct-upload-icon {
    font-size: 28px;
    line-height: 1;
}
.adm-direct-upload-header strong {
    font-size: 16px;
    color: var(--text);
}
.adm-direct-upload-card .hint {
    margin: 4px 0 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
}
.adm-direct-upload-card .adm-upload-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.adm-direct-upload-card .adm-upload-form input[type="file"] {
    flex: 1;
    min-width: 200px;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
}

/* ====================================================================
   ITER 5.75: Duell-Hub als Hero-Card + Challenge-Banner
   ==================================================================== */

/* Duell-Hub-Card als Hero-Variante mit Stats UNTER dem Bild */
.qx-box-card-duel-hero {
    border-color: rgba(237, 73, 86, 0.4);
}
.qx-box-card-duel-hero:hover {
    border-color: rgba(237, 73, 86, 0.7);
    box-shadow: 0 10px 32px rgba(237, 73, 86, 0.18);
}
.qx-box-link-hero-btn {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
    cursor: pointer;
    color: var(--text);
    text-align: left;
    font-family: inherit;
}
.qx-box-link-hero-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Bild im Duell-Hero */
.qx-duel-hero-img {
    /* Iter 5.76: Solider dunkler Hintergrund hinter der duellekiste.png
       (verhindert Schachbrett-Muster bei transparentem PNG). */
    background: #1a1a1a !important;
}
.qx-duel-hero-img img {
    background: #1a1a1a;
}
.qx-duel-hero-img .qx-box-hero-fallback {
    background: linear-gradient(135deg, rgba(237, 73, 86, 0.15), rgba(255, 152, 0, 0.10));
}
[data-theme="light"] .qx-duel-hero-img,
[data-theme="light"] .qx-duel-hero-img img {
    background: #f0f0f3 !important;
}
.qx-duel-hero-counter {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-variant-numeric: tabular-nums;
}

/* Stats-Strip unter der Kiste */
.qx-duel-hero-content .qx-duel-stats {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.qx-duel-hero-content .qx-quick-stat {
    flex: 1;
    text-align: center;
    background: var(--bg-elevated);
    padding: 8px 6px;
    border-radius: 8px;
}
.qx-duel-hero-content .qx-quick-stat strong {
    display: block;
    font-size: 18px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.qx-duel-hero-content .qx-quick-stat small {
    display: block;
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}
.qx-duel-hero-content .qx-quick-stat-won {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05));
    border: 1px solid rgba(76, 175, 80, 0.3);
}
.qx-duel-hero-content .qx-quick-stat-won strong { color: #4caf50; }
.qx-duel-hero-content .qx-quick-stat-lost {
    background: linear-gradient(135deg, rgba(237, 73, 86, 0.12), rgba(237, 73, 86, 0.05));
    border: 1px solid rgba(237, 73, 86, 0.25);
}
.qx-duel-hero-content .qx-quick-stat-lost strong { color: #ed4956; }

/* Corner-Link "Alle Duelle" nochmal sichtbarer */
.qx-duel-corner-link {
    display: block;
    text-align: center;
    padding: 10px 14px;
    margin: 8px 16px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.qx-duel-corner-link:hover {
    background: rgba(3, 215, 226, 0.10);
    border-color: rgba(3, 215, 226, 0.4);
}

/* Challenge-Erfolgs-Banner */
.challenge-success-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 16px 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.20), rgba(3, 215, 226, 0.08));
    border: 2px solid rgba(76, 175, 80, 0.5);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(76, 175, 80, 0.18);
    animation: challenge-banner-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes challenge-banner-in {
    0%   { transform: translateY(-30px); opacity: 0; }
    60%  { transform: translateY(4px); opacity: 1; }
    100% { transform: translateY(0); }
}
.challenge-success-icon {
    font-size: 36px;
    line-height: 1;
    flex-shrink: 0;
    animation: challenge-icon-pulse 1.4s ease-in-out infinite;
}
@keyframes challenge-icon-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25%      { transform: scale(1.1) rotate(-8deg); }
    75%      { transform: scale(1.1) rotate(8deg); }
}
.challenge-success-text {
    flex: 1;
}
.challenge-success-text strong {
    display: block;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 3px;
}
.challenge-success-text small {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
}
.challenge-success-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 10px;
    line-height: 1;
    border-radius: 6px;
    flex-shrink: 0;
}
.challenge-success-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text);
}

/* Pending-Card just-created Highlight */
.pending-duel-card-just-created {
    border: 2px solid rgba(76, 175, 80, 0.6) !important;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.10), transparent) !important;
    box-shadow: 0 4px 14px rgba(76, 175, 80, 0.20);
    animation: pending-just-glow 2s ease-out;
}
@keyframes pending-just-glow {
    0%   { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); }
    50%  { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 4px 14px rgba(76, 175, 80, 0.20); }
}

.pending-duels-hint {
    display: block;
    margin: 0 0 10px;
    color: var(--text-dim);
    font-size: 12.5px;
    font-style: italic;
}

/* Mobile */
@media (max-width: 540px) {
    .qx-duel-hero-content .qx-duel-stats {
        gap: 8px;
    }
    .qx-duel-hero-content .qx-quick-stat strong {
        font-size: 16px;
    }
    .challenge-success-banner {
        padding: 12px 14px;
        gap: 10px;
    }
    .challenge-success-icon {
        font-size: 30px;
    }
}

/* ====================================================================
   ITER 5.77: Duell-Hero kompakter + Stats-Zeile mit "Alle Duelle"
   ==================================================================== */

/* Iter 5.83: Kompaktes Hero-Format fuer ALLE Box-Cards (nicht nur Duell).
   Alle Kisten haben jetzt das gleiche Layout: 16:9, max-Hoehe gecapt,
   object-fit: contain (ganzes Bild sichtbar). */
.qx-duel-hero-img-compact {
    aspect-ratio: 16 / 9 !important;
    max-height: 160px !important;
    /* Bild zentriert mit Letterbox links/rechts */
    display: flex !important;
    align-items: center;
    justify-content: center;
}
@media (max-width: 540px) {
    .qx-duel-hero-img-compact {
        aspect-ratio: 16 / 9 !important;
        max-height: 140px !important;
    }
}

/* WICHTIG fuer ALLE Hero-Cards (Duell, Daily, Standard, Event, Pokal, Locked, Coming-Soon):
   object-fit: contain damit das ganze Bild sichtbar ist (statt zugeschnitten). */
.qx-box-hero-img.qx-duel-hero-img-compact img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

/* Daily-Hero: spezielle Akzent-Farbe (warm) */
.qx-daily-hero-img {
    background: #1a1a1a !important;
    background-image: none !important;
}
[data-theme="light"] .qx-daily-hero-img {
    background: #f0f0f3 !important;
}

/* Daily-Stats-Row analog Duell aber mit warmen Farben */
.qx-daily-stats-row .qx-quick-stat {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.10), rgba(255, 87, 34, 0.05));
    border-color: rgba(255, 152, 0, 0.3);
}
.qx-daily-stats-row .qx-quick-stat strong {
    color: #ff9800;
}

/* Stats-Zeile als eigene flex-row NACH dem Button (Iter 5.77) */
.qx-duel-stats-row {
    display: flex;
    gap: 8px;
    padding: 0 16px 14px;
    align-items: stretch;
}
.qx-duel-stats-row > .qx-quick-stat {
    flex: 1;
    text-align: center;
    background: var(--bg-elevated);
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.qx-duel-stats-row > .qx-quick-stat strong {
    display: block;
    font-size: 18px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.qx-duel-stats-row > .qx-quick-stat small {
    display: block;
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}
.qx-duel-stats-row > .qx-quick-stat-won {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05));
    border-color: rgba(76, 175, 80, 0.3);
}
.qx-duel-stats-row > .qx-quick-stat-won strong { color: #4caf50; }
.qx-duel-stats-row > .qx-quick-stat-lost {
    background: linear-gradient(135deg, rgba(237, 73, 86, 0.12), rgba(237, 73, 86, 0.05));
    border-color: rgba(237, 73, 86, 0.25);
}
.qx-duel-stats-row > .qx-quick-stat-lost strong { color: #ed4956; }

/* "Alle Duelle"-Link als 4. Element rechts in der Zeile */
.qx-duel-allduels-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 6px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.12), rgba(3, 215, 226, 0.04));
    border: 1px solid rgba(3, 215, 226, 0.35);
    border-radius: 8px;
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.qx-duel-allduels-link small {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
}
.qx-duel-allduels-link:hover {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.22), rgba(3, 215, 226, 0.08));
    border-color: rgba(3, 215, 226, 0.55);
    transform: translateY(-1px);
}

/* Mobile: Stats kleiner damit alle 4 Items reinpassen */
@media (max-width: 540px) {
    .qx-duel-stats-row {
        gap: 5px;
        padding: 0 12px 12px;
    }
    .qx-duel-stats-row > .qx-quick-stat,
    .qx-duel-allduels-link {
        padding: 6px 3px;
    }
    .qx-duel-stats-row > .qx-quick-stat strong {
        font-size: 15px;
    }
    .qx-duel-stats-row > .qx-quick-stat small,
    .qx-duel-allduels-link small {
        font-size: 9.5px;
    }
    .qx-duel-allduels-link {
        font-size: 16px;
    }
}

/* Iter 5.77: Alten Corner-Link nicht mehr verwenden (steht nicht mehr im Template) */
.qx-duel-corner-link {
    display: none !important;
}

/* ====================================================================
   ITER 5.78: Level-System auf Pinnwand
   ==================================================================== */

.ig-level-card {
    margin: 12px 0 14px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.10), rgba(76, 175, 80, 0.05));
    border: 1px solid rgba(3, 215, 226, 0.30);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(3, 215, 226, 0.08);
}

.ig-level-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

/* Level-Badge: gross + auffällig */
.ig-level-badge {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #03d7e2, #4caf50);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(3, 215, 226, 0.35);
    border: 3px solid var(--bg-card);
}
.ig-level-badge-icon {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 20px;
    background: var(--bg-card);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.ig-level-badge-num {
    color: #000;
    font-size: 24px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.ig-level-meta {
    flex: 1;
    min-width: 0;
}
.ig-level-label {
    display: block;
    font-size: 16px;
    color: var(--text);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 2px;
}
.ig-level-progress-text {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}
.ig-level-progress-text strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Fortschrittsbalken */
.ig-level-bar {
    width: 100%;
    height: 10px;
    background: var(--bg-elevated);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.ig-level-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #03d7e2, #4caf50);
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 12px rgba(3, 215, 226, 0.4);
    position: relative;
    overflow: hidden;
}
/* Schimmerndes Highlight ueber dem Balken */
.ig-level-bar-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: ig-level-shimmer 2.5s ease-in-out infinite;
}
@keyframes ig-level-shimmer {
    0%, 100% { transform: translateX(-30%); opacity: 0; }
    50%      { transform: translateX(330%); opacity: 1; }
}

/* Mobile: kleinere Badge */
@media (max-width: 540px) {
    .ig-level-card {
        padding: 10px 12px;
    }
    .ig-level-badge {
        width: 48px;
        height: 48px;
    }
    .ig-level-badge-num {
        font-size: 20px;
    }
    .ig-level-badge-icon {
        font-size: 16px;
        width: 22px;
        height: 22px;
        top: -4px;
        right: -4px;
    }
    .ig-level-label {
        font-size: 15px;
    }
    .ig-level-progress-text {
        font-size: 11.5px;
    }
}

/* ====================================================================
   ITER 5.78: Level-System Verfeinerung
   - Anfaenger-Variante (gruener Akzent)
   - Hoehere Level mit Krone-Emoji im Label
   ==================================================================== */

/* Anfaenger-Card: gruener statt cyan, einladend */
.ig-level-card-newbie {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.10), rgba(255, 193, 7, 0.05)) !important;
    border-color: rgba(76, 175, 80, 0.30) !important;
}
.ig-level-badge-newbie {
    background: linear-gradient(135deg, #4caf50, #ffc107) !important;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.35) !important;
}
.ig-level-card-newbie .ig-level-bar-fill {
    background: linear-gradient(90deg, #4caf50, #ffc107) !important;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.4) !important;
}

/* Pulse-Animation auf Anfaenger-Badge fuer Aufmerksamkeit */
.ig-level-badge-newbie {
    animation: ig-level-newbie-pulse 2.5s ease-in-out infinite;
}
@keyframes ig-level-newbie-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* ====================================================================
   ITER 5.79: Defensive Overrides - sichere dass die letzten 4 Iter durchkommen
   - Hartes !important fuer alle kritischen Properties
   - Nochmal Schachbrett-Fix mit max-Speziphizitaet
   - Stats-Row erzwungen
   ==================================================================== */

/* HARDER: Schachbrett-Fix mit doppelter Spezifizitaet */
li.qx-box-card.qx-box-card-duel-hero .qx-box-hero-img,
li.qx-box-card.qx-box-card-duel-hero .qx-box-hero-img img {
    background-color: #1a1a1a !important;
    background-image: none !important;
}
[data-theme="light"] li.qx-box-card.qx-box-card-duel-hero .qx-box-hero-img,
[data-theme="light"] li.qx-box-card.qx-box-card-duel-hero .qx-box-hero-img img {
    background-color: #f0f0f3 !important;
    background-image: none !important;
}

/* Stats-Row: erzwingen dass es NEBEN dem Bild als 4-Spalten-Strip steht */
.qx-box-card-duel-hero .qx-duel-stats-row {
    display: flex !important;
}

/* Alten Corner-Link killen (falls Browser-Cache noch hat) */
.qx-quick-corner-link.qx-duel-corner-link,
.qx-box-card-duel-hero .qx-quick-corner-link {
    display: none !important;
}

/* Compact-Image absolut erzwingen (Iter 5.80: flacher / Iter 5.82: object-fit fix) */
.qx-box-card-duel-hero .qx-box-hero-img.qx-duel-hero-img-compact {
    /* Iter 5.82: zurueck zu 16:9 damit das ganze Bild Platz hat,
       aber max-height auf 200px begrenzen damit's nicht wuchtig wird */
    aspect-ratio: 16 / 9 !important;
    max-height: 160px !important;
    /* Bild zentrieren, Letterbox dezent dunkel */
    display: flex !important;
    align-items: center;
    justify-content: center;
}
@media (max-width: 540px) {
    .qx-box-card-duel-hero .qx-box-hero-img.qx-duel-hero-img-compact {
        aspect-ratio: 16 / 9 !important;
        max-height: 140px !important;
    }
}

/* WICHTIG: Bei der Duell-Kiste 'contain' statt 'cover' damit die ganze Kiste
   sichtbar bleibt (statt nur ein zugeschnittener Mittelausschnitt). */
.qx-box-card-duel-hero .qx-box-hero-img img,
li.qx-box-card.qx-box-card-duel-hero .qx-box-hero-img img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

/* ====================================================================
   ITER 5.80: "Wartet auf Annahme" + "Laufende Duelle" UNTER der Duell-Kiste
   ==================================================================== */

.qx-duel-attached-list {
    padding: 4px 16px 14px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.qx-duel-attached-headline {
    margin: 12px 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.qx-duel-attached-list .pending-duels-hint {
    display: block;
    margin-bottom: 8px;
    color: var(--text-mute);
    font-size: 11.5px;
    font-style: italic;
    line-height: 1.4;
}
.qx-duel-attached-list .active-duels-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.qx-duel-attached-list .active-duel-card {
    margin-bottom: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.qx-duel-attached-list .active-duel-card:last-child {
    margin-bottom: 0;
}
.qx-duel-attached-list .active-duel-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text);
}
.qx-duel-attached-list .active-duel-link:hover {
    background: rgba(3, 215, 226, 0.06);
}
.qx-duel-attached-list .active-duel-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.qx-duel-attached-list .active-duel-info {
    flex: 1;
    min-width: 0;
}
.qx-duel-attached-list .active-duel-info strong {
    display: block;
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.3;
}
.qx-duel-attached-list .active-duel-info small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.4;
}
.qx-duel-attached-list .active-duel-arrow {
    color: var(--text-mute);
    font-size: 18px;
    flex-shrink: 0;
}
.qx-duel-attached-list .active-duel-tag {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.qx-duel-attached-list .active-duel-tag-random {
    background: rgba(255, 152, 0, 0.18);
    color: #ffb74d;
}
.qx-duel-attached-list .active-duel-tag-friend {
    background: rgba(76, 175, 80, 0.18);
    color: #81c784;
}

/* Pending: gelblicher Hintergrund */
.qx-duel-attached-list .pending-duel-card {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), transparent);
    border-color: rgba(255, 193, 7, 0.25);
}

/* ====================================================================
   ITER 5.80: Admin Box-Vergleichs-Vorschau
   ==================================================================== */
.adm-box-comparison {
    margin-top: 18px;
    padding: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.adm-box-comparison > strong {
    display: block;
    font-size: 15px;
    margin-bottom: 6px;
    color: var(--text);
}
.adm-box-comparison > .hint {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
}
.adm-box-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.adm-box-comparison-card {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform 0.15s, box-shadow 0.15s;
}
.adm-box-comparison-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.adm-box-comparison-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}
.adm-box-comparison-card.adm-box-comparison-current {
    border: 2px solid #4caf50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25);
}
.adm-box-comparison-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1a1a1a;
    overflow: hidden;
}
.adm-box-comparison-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #1a1a1a;
}
[data-theme="light"] .adm-box-comparison-img,
[data-theme="light"] .adm-box-comparison-img img {
    background: #f0f0f3;
}
.adm-box-comparison-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.10), rgba(76, 175, 80, 0.05));
    font-size: 48px;
}
.adm-box-comparison-titlebar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 8px 6px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    line-height: 1.2;
}
.adm-box-comparison-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #4caf50;
    color: #fff;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.adm-box-comparison-type-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* ====================================================================
   ITER 5.81 / 5.84: Modal-Scroll-Lock + Modal-Body korrekt scrollbar
   ====================================================================
   Beim Öffnen eines Modals soll der Hintergrund nicht mehr scrollen,
   sondern das Modal selbst.
   Iter 5.84: KEIN position:fixed mehr auf body - das verschob die
   Bottom-Nav nach oben. Stattdessen overflow:hidden auf html+body. */

/* Body-Scroll-Lock wenn ein Modal offen ist
   Iter 5.994: position:fixed mit Scroll-Snapshot via JS - der iOS-Standard.
   Bottom-Nav (auch position:fixed) bleibt sichtbar. */
html.has-modal-open {
    /* Iter v6.45c: KEINE Layout-Aenderungen - sonst rutscht Bottom-Nav in iOS-PWA hoch.
       Scroll-Lock laeuft ueber touchmove-Blocker im JS. */
}
body.has-modal-open {
    /* Iter v6.45c: Body unangetastet - Bottom-Nav muss am Viewport-Boden bleiben. */
}

/* Modal-Body korrekt scrollbar machen */
.ig-modal-card {
    /* Card-Hoehe: passt unter die Bottom-Nav (Iter 5.84) */
    max-height: 90vh;
    /* Bottom-Nav ist ca. 64px hoch + safe-area -> 100px Reserve */
    max-height: calc(100vh - 16px);
    display: flex;
    flex-direction: column;
}
.ig-modal-body {
    /* Body soll uebrigen Platz nehmen und scrollbar sein */
    flex: 1 1 auto;
    min-height: 0; /* WICHTIG fuer flex+overflow! */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
    overscroll-behavior: contain;       /* verhindert Scroll-Chain */
}

/* Auch fuer pwa-modal (iOS-Install-Anleitung etc.) */
.pwa-modal-card {
    max-height: 90vh;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Photo-Modal kann grosser sein - Bild-Wrap braucht eigenen Scroll-Schutz */
.ig-modal-photo-wrap {
    flex-shrink: 0;
}
.ig-modal-photo-wrap img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Mobile: Modal-Card laesst Platz fuer die Bottom-Nav (Iter 5.84) */
@media (max-width: 540px) {
    /* Iter v6.48: Alle Modals buendig an der Nav-Oberkante andocken. */
    .ig-modal {
        padding: 16px 12px 0;
        align-items: flex-end;
    }
    .ig-modal-card {
        max-height: calc(100vh - 96px - env(safe-area-inset-bottom, 0));
        max-height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0));
        width: 100%;
        margin-bottom: 0;
    }
    .ig-modal-photo-wrap img {
        max-height: 45vh;
    }
}

/* Pages OHNE Bottom-Nav (Login, Register etc.): Modal kann den Boden nutzen */
body:not(.has-bottom-nav).has-modal-open .ig-modal {
    padding-bottom: 8px;
    align-items: center;
}
body:not(.has-bottom-nav) .ig-modal-card {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
}

/* ====================================================================
   ITER 5.86: Box-Hero-Bilder mit transparentem Verlauf-Hintergrund
   ====================================================================
   Roland-Wunsch: kein schwarz-weiß-Rahmen mehr. Stattdessen ein
   dezenter Verlauf der zur Box-Card passt + Bild fuellt das Aspect-
   Ratio aus (object-fit: cover mit groesserer max-height). */

/* OVERRIDE alle vorherigen soliden Hintergruende - transparent mit Verlauf */
.qx-box-hero-img,
.qx-box-hero-img.qx-duel-hero-img,
.qx-box-hero-img.qx-duel-hero-img-compact,
.qx-box-hero-img.qx-daily-hero-img,
li.qx-box-card.qx-box-card-duel-hero .qx-box-hero-img {
    background: linear-gradient(180deg,
        rgba(3, 215, 226, 0.05) 0%,
        rgba(0, 0, 0, 0) 50%,
        rgba(255, 255, 255, 0.02) 100%) !important;
    background-color: transparent !important;
    background-image: linear-gradient(180deg,
        rgba(3, 215, 226, 0.05) 0%,
        rgba(0, 0, 0, 0) 50%,
        rgba(255, 255, 255, 0.02) 100%) !important;
}

/* Kein eigener Hintergrund am img-Element - laesst Verlauf der Card durchscheinen */
.qx-box-hero-img img,
.qx-box-hero-img.qx-duel-hero-img-compact img,
li.qx-box-card.qx-box-card-duel-hero .qx-box-hero-img img {
    background: transparent !important;
    background-image: none !important;
}

/* Light-Mode: hellerer Verlauf */
[data-theme="light"] .qx-box-hero-img,
[data-theme="light"] .qx-box-hero-img.qx-duel-hero-img,
[data-theme="light"] .qx-box-hero-img.qx-duel-hero-img-compact,
[data-theme="light"] .qx-box-hero-img.qx-daily-hero-img {
    background: linear-gradient(180deg,
        rgba(3, 215, 226, 0.08) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(0, 0, 0, 0.02) 100%) !important;
    background-image: linear-gradient(180deg,
        rgba(3, 215, 226, 0.08) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(0, 0, 0, 0.02) 100%) !important;
}

/* Iter 5.86: object-fit: cover statt contain - Bild fuellt voll aus,
   keine Letterbox-Raender mehr (= "schwarz-weiss-Rahmen") */
.qx-box-hero-img.qx-duel-hero-img-compact img,
li.qx-box-card.qx-box-card-duel-hero .qx-box-hero-img img {
    object-fit: cover !important;
    object-position: center;
    width: 100% !important;
    height: 100% !important;
}

/* Etwas groessere Bild-Max-Hoehe damit es nicht zu zugeschnitten wirkt */
.qx-duel-hero-img-compact,
.qx-box-card-duel-hero .qx-box-hero-img.qx-duel-hero-img-compact,
.qx-box-card-daily-hero .qx-box-hero-img.qx-duel-hero-img-compact {
    aspect-ratio: 16 / 9 !important;
    max-height: 160px !important;
    /* Iter 5.86: Bild wieder normales Block-Element (kein flex-center) */
    display: block !important;
}
@media (max-width: 540px) {
    .qx-duel-hero-img-compact,
    .qx-box-card-duel-hero .qx-box-hero-img.qx-duel-hero-img-compact,
    .qx-box-card-daily-hero .qx-box-hero-img.qx-duel-hero-img-compact {
        aspect-ratio: 16 / 9 !important;
        max-height: 140px !important;
    }
}

/* Diamanten-Tag: lila Akzent */
.qx-box-tag-diamanten {
    background: rgba(186, 104, 200, 0.85) !important;
    color: #fff !important;
}
/* Title-Tag: gold/orange */
.qx-box-tag-title {
    background: rgba(255, 152, 0, 0.85) !important;
    color: #fff !important;
}

/* ====================================================================
   ITER 5.86: Admin Multi-Section-Pills
   ==================================================================== */
.adm-display-cat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.adm-display-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    font-size: 13px;
}
.adm-display-cat-pill:hover {
    border-color: var(--accent);
}
.adm-display-cat-pill input[type="checkbox"] {
    margin: 0;
}
.adm-display-cat-pill input[type="checkbox"]:checked + span {
    color: var(--accent);
    font-weight: 700;
}
.adm-display-cat-pill:has(input[type="checkbox"]:checked) {
    background: rgba(3, 215, 226, 0.10);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(3, 215, 226, 0.15);
}

/* ====================================================================
   ITER 5.88: Duell-Meister-Level-Card auf der Pinnwand
   ==================================================================== */
.ig-duel-master-card {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--dm-color) 14%, transparent),
        color-mix(in srgb, var(--dm-color) 4%, transparent));
    /* Fallback fuer aeltere Browser ohne color-mix */
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.10), rgba(156, 39, 176, 0.04));
    border: 1px solid var(--dm-color, rgba(156, 39, 176, 0.3));
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.08);
}
@supports (background: color-mix(in srgb, red, blue)) {
    .ig-duel-master-card {
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--dm-color) 14%, transparent),
            color-mix(in srgb, var(--dm-color) 4%, transparent));
    }
}
.ig-duel-master-badge {
    background: var(--dm-color, #9c27b0) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dm-color, #9c27b0) 35%, transparent) !important;
    /* Fallback */
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.35) !important;
}
.ig-duel-master-label {
    color: var(--dm-color, var(--text)) !important;
}
.ig-duel-master-tier {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1px;
}
.ig-duel-master-bar-fill {
    background: linear-gradient(90deg, var(--dm-color, #9c27b0), color-mix(in srgb, var(--dm-color, #9c27b0) 60%, white)) !important;
    /* Fallback */
    background: linear-gradient(90deg, #9c27b0, #ce93d8) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--dm-color, #9c27b0) 40%, transparent) !important;
}
@supports (background: color-mix(in srgb, red, blue)) {
    .ig-duel-master-bar-fill {
        background: linear-gradient(90deg, var(--dm-color, #9c27b0), color-mix(in srgb, var(--dm-color, #9c27b0) 60%, white)) !important;
    }
}

/* Info-Banner im Duell-Modal: Schwerter-Belohnung erklaeren */
.duel-swords-info-banner {
    margin-top: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.10), rgba(255, 152, 0, 0.05));
    border: 1px solid rgba(156, 39, 176, 0.25);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text);
}
.duel-swords-info-banner strong {
    color: #9c27b0;
}
.duel-swords-info-banner-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 16px;
    vertical-align: middle;
}

/* ====================================================================
   ITER 5.90: Box-Hero-Bilder - object-fit:contain mit solidem Verlauf
   ====================================================================
   Roland: kein Schachbrett mehr (transparente PNGs zeigten den Browser-
   Hintergrund), kein schwarz/weiß-Rahmen, Kiste oben platziert,
   schön mittig und kompakt. */

/* Override aller vorherigen Hero-Img-Styles - solider Verlauf */
.qx-box-hero-img,
.qx-box-hero-img.qx-duel-hero-img,
.qx-box-hero-img.qx-duel-hero-img-compact,
.qx-box-hero-img.qx-daily-hero-img,
li.qx-box-card.qx-box-card-duel-hero .qx-box-hero-img {
    background: linear-gradient(180deg,
        rgba(45, 50, 60, 0.95) 0%,
        rgba(30, 35, 45, 0.85) 100%) !important;
    background-color: rgba(35, 40, 50, 0.9) !important;
}
[data-theme="light"] .qx-box-hero-img,
[data-theme="light"] .qx-box-hero-img.qx-duel-hero-img,
[data-theme="light"] .qx-box-hero-img.qx-duel-hero-img-compact,
[data-theme="light"] .qx-box-hero-img.qx-daily-hero-img,
[data-theme="light"] li.qx-box-card.qx-box-card-duel-hero .qx-box-hero-img {
    background: linear-gradient(180deg,
        rgba(245, 247, 250, 0.95) 0%,
        rgba(225, 230, 240, 0.85) 100%) !important;
    background-color: rgba(238, 242, 248, 0.9) !important;
}

/* Bild: object-fit: contain + object-position: top damit die Kiste OBEN
   sichtbar ist und nicht in der Mitte verschwindet. Container hat nun
   soliden Hintergrund -> kein Schachbrett mehr. */
.qx-box-hero-img.qx-duel-hero-img-compact img,
li.qx-box-card.qx-box-card-duel-hero .qx-box-hero-img img {
    object-fit: contain !important;
    object-position: center top !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    padding: 6px;
}

/* Container kompakt: Bild nicht wuchtig, schön mittig */
.qx-duel-hero-img-compact,
.qx-box-card-duel-hero .qx-box-hero-img.qx-duel-hero-img-compact,
.qx-box-card-daily-hero .qx-box-hero-img.qx-duel-hero-img-compact {
    aspect-ratio: 16 / 9 !important;
    max-height: 160px !important;
    min-height: 130px !important;
    display: block !important;  /* Zurück zu block - kein flex-center mehr */
    overflow: hidden;
}
@media (max-width: 540px) {
    .qx-duel-hero-img-compact,
    .qx-box-card-duel-hero .qx-box-hero-img.qx-duel-hero-img-compact,
    .qx-box-card-daily-hero .qx-box-hero-img.qx-duel-hero-img-compact {
        max-height: 140px !important;
        min-height: 110px !important;
    }
}

/* ====================================================================
   ITER 5.90: Wall-Header - Level-Karten unter Avatar (volle Breite)
   ==================================================================== */

/* ig-profile-info: jetzt nur noch Username + Title (kompakt) */
.ig-profile-info {
    flex: 1;
    min-width: 0;
    /* Kein eigenes Layout mehr - alles passt in eine Zeile + Title darunter */
}

/* ig-stats: jetzt in voller Breite UNTER dem Header */
.ig-profile-head + .ig-level-card,
.ig-profile-head ~ .ig-level-card {
    margin: 14px 16px 12px;
}
@media (max-width: 540px) {
    .ig-profile-head + .ig-level-card,
    .ig-profile-head ~ .ig-level-card {
        margin: 12px 12px 10px;
    }
}
.ig-profile-head ~ .ig-stats {
    margin: 14px 16px;
}
@media (max-width: 540px) {
    .ig-profile-head ~ .ig-stats {
        margin: 10px 12px;
    }
}

/* ====================================================================
   ITER 5.93: Einheitliche Box-Cards für alle Tabs (active/locked/done/all)
   ==================================================================== */

/* Done-Badge oben links (analog zu Lock-Badge) */
.qx-done-badge-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
    z-index: 5;
}

/* Done-Banner unten in der Card */
.qx-box-done-banner {
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.12), rgba(46, 125, 50, 0.06));
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 8px;
    color: #2e7d32;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
[data-theme="dark"] .qx-box-done-banner,
:root:not([data-theme]) .qx-box-done-banner {
    color: #81c784;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.18), rgba(46, 125, 50, 0.08));
}
.qx-box-done-icon {
    font-size: 18px;
}

/* Done-Cards: leichter grüner Schimmer am Rand */
.qx-box-card-done {
    border-color: rgba(76, 175, 80, 0.3) !important;
}

/* Quest-Hint im Locked-Tab unter Belohnungen */
.qx-box-quest-hint {
    display: block;
    margin-top: 6px;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 500;
}

/* Locked-Cards: leichte Verdunkelung des Hero-Bilds */
.qx-hero-locked img {
    filter: brightness(0.55) saturate(0.7);
}
.qx-hero-locked .qx-box-hero-fallback {
    opacity: 0.5;
}

/* Section-Divider auch in locked/all/completed - identisch wie in active */
/* (kein extra CSS nötig, .qx-section-divider gilt überall) */

/* ====================================================================
   ITER 5.94: Toggle-Switch im Account-Settings
   ==================================================================== */
.acc-toggle-form {
    margin: 0;
}
.acc-list-item-toggle {
    cursor: pointer;
    user-select: none;
}
.acc-list-item-toggle:hover {
    background: var(--bg-hover);
}
.acc-list-sublabel {
    display: block;
    font-size: 11.5px;
    color: var(--text-dim);
    margin-top: 2px;
    font-weight: 400;
}
.acc-toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    margin-left: auto;
}
.acc-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.acc-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    border-radius: 26px;
    transition: 0.25s;
}
.acc-toggle-slider::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.25s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.acc-toggle-switch input:checked + .acc-toggle-slider {
    background: linear-gradient(135deg, #03d7e2, #00b8c4);
}
.acc-toggle-switch input:checked + .acc-toggle-slider::before {
    transform: translateX(20px);
}

/* ====================================================================
   ITER 5.99: Duelle-Stat-Card neutral wie die anderen Stats (kein Verlauf)
   ==================================================================== */
.ig-stat-duels {
    /* Kein eigener Hintergrund/Border - nutzt Default-Styling der Stat-Karten */
}
.ig-stat-duels .ig-stat-icon {
    font-size: 16px;
}
.ig-duel-stat-grid {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 2px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.ig-duel-stat-item {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.ig-duel-stat-item strong {
    font-size: 16px;
    line-height: 1;
    color: var(--text);
}
.ig-duel-stat-item small {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.6;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}
/* Iter 5.99: Keine Farben mehr - alles in Standard-Textfarbe wie die anderen Stats */
.ig-duel-stat-wins,
.ig-duel-stat-losses,
.ig-duel-stat-draws {
    color: var(--text);
}
.ig-duel-stat-divider {
    color: var(--text-dim);
    opacity: 0.35;
    font-size: 12px;
}

/* ====================================================================
   ITER 5.94: Modals scrollbar machen (Mobile + Desktop)
   ==================================================================== */
/* Body von Modals: scrollbar wenn der Inhalt zu lang wird */
.ig-modal-card,
.modal-content,
.qx-modal-card {
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.ig-modal-body,
.modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Mobile: Modal soll fast Vollbild sein, Body scrollt */
@media (max-width: 540px) {
    .ig-modal-card,
    .modal-content,
    .qx-modal-card {
        /* Iter v6.48b: Card endet exakt auf Nav-Oberkante (--bn-h-full aus
           modals-v6.css). Vorher 64px hart codiert -> Spalt zur echten Nav. */
        max-height: calc(100dvh - 16px - var(--bn-h-full, 80px)) !important;
    }
}

/* Dropdowns scrollbar */
.ig-search-results,
.notif-tray-content,
.nav-bell-tray {
    max-height: 60vh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
@media (max-width: 540px) {
    .ig-search-results,
    .notif-tray-content,
    .nav-bell-tray {
        max-height: 50vh;
    }
}

/* ====================================================================
   ITER 5.97: Quest-Detail Beschreibungs-Card prominent
   ==================================================================== */
.qd-description-card {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    margin: 16px 0;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.08), rgba(3, 215, 226, 0.03));
    border: 1px solid rgba(3, 215, 226, 0.2);
    border-radius: 12px;
}
[data-theme="dark"] .qd-description-card,
:root:not([data-theme]) .qd-description-card {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.12), rgba(3, 215, 226, 0.04));
    border-color: rgba(3, 215, 226, 0.28);
}
.qd-description-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(3, 215, 226, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.qd-description-content {
    flex: 1;
    min-width: 0;
}
.qd-description-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 4px;
    font-weight: 700;
}
.qd-description-content p {
    margin: 0;
    line-height: 1.6;
    font-size: 15.5px;
    color: var(--text);
}

/* Duell-Quest-Meta-Tag in der Header-Zeile */
.ig-quest-meta-duel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.18), rgba(244, 67, 54, 0.10));
    border: 1px solid rgba(156, 39, 176, 0.3);
    color: #9c27b0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
[data-theme="dark"] .ig-quest-meta-duel,
:root:not([data-theme]) .ig-quest-meta-duel {
    color: #ce93d8;
}

/* ====================================================================
   ITER 5.97: Friends-Page eingehende Duell-Anfragen prominent
   ==================================================================== */
.friends-incoming-duels {
    margin: 16px 0;
    padding: 18px;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.12), rgba(244, 67, 54, 0.06));
    border: 2px solid rgba(255, 152, 0, 0.4);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.15);
    animation: friendsDuelPulse 2s ease-in-out infinite;
}
@keyframes friendsDuelPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(255, 152, 0, 0.15); }
    50% { box-shadow: 0 4px 22px rgba(255, 152, 0, 0.30); }
}
.friends-incoming-duels-title {
    margin: 0 0 12px 0;
    font-size: 17px;
    font-weight: 800;
    color: #e65100;
    display: flex;
    align-items: center;
    gap: 8px;
}
[data-theme="dark"] .friends-incoming-duels-title,
:root:not([data-theme]) .friends-incoming-duels-title {
    color: #ffab40;
}
.friends-incoming-duels-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.friends-incoming-duel-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.friends-incoming-duel-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}
.friends-incoming-duel-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.friends-incoming-duel-text {
    flex: 1;
    min-width: 0;
}
.friends-incoming-duel-text strong {
    color: var(--text);
    font-size: 15px;
}
.friends-incoming-duel-text small {
    display: block;
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 2px;
}
.friends-incoming-duel-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.friends-incoming-duel-actions .btn {
    padding: 6px 12px;
    font-size: 13px;
}
@media (max-width: 480px) {
    .friends-incoming-duel-card {
        flex-direction: column;
        align-items: stretch;
    }
    .friends-incoming-duel-actions {
        width: 100%;
    }
    .friends-incoming-duel-actions .btn {
        flex: 1;
    }
}

/* ====================================================================
   ITER 5.98: Admin-Aufräumung - Filter-Tabs + sauberer Editor
   ==================================================================== */

/* Filter-Tabs für Boxen-/Quests-Listen */
.adm-filter-tabs {
    display: flex;
    gap: 6px;
    margin: 16px 0 14px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.adm-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.15s;
}
.adm-filter-tab:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}
.adm-filter-tab.is-active {
    background: linear-gradient(135deg, #03d7e2, #00b8c4);
    color: white;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(3, 215, 226, 0.25);
}
.adm-filter-tab-count {
    background: rgba(0, 0, 0, 0.1);
    color: inherit;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}
.adm-filter-tab.is-active .adm-filter-tab-count {
    background: rgba(255, 255, 255, 0.25);
}

/* Filter-Row (Dropdowns unter Tabs) */
.adm-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 13px;
}
.adm-filter-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text-dim);
}
.adm-filter-row select {
    padding: 4px 8px;
    font-size: 13px;
}

/* Empty-Card für Listen ohne Einträge */
.adm-empty-card {
    text-align: center;
    padding: 40px 20px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: 12px;
    margin: 20px 0;
}
.adm-empty-card .adm-empty-icon {
    font-size: 40px;
    margin-bottom: 10px;
}
.adm-empty-card h2 {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: var(--text);
}

/* Quest-Typ-Badges in Liste */
.quest-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.quest-type-badge.type-standard {
    background: rgba(3, 215, 226, 0.15);
    color: #00838f;
    border: 1px solid rgba(3, 215, 226, 0.3);
}
[data-theme="dark"] .quest-type-badge.type-standard,
:root:not([data-theme]) .quest-type-badge.type-standard {
    color: #4dd0e1;
}
.quest-type-badge.type-daily {
    background: rgba(255, 152, 0, 0.15);
    color: #e65100;
    border: 1px solid rgba(255, 152, 0, 0.3);
}
[data-theme="dark"] .quest-type-badge.type-daily,
:root:not([data-theme]) .quest-type-badge.type-daily {
    color: #ffb74d;
}
.quest-type-badge.type-duel-speed,
.quest-type-badge.type-duel-battle {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.18), rgba(244, 67, 54, 0.10));
    color: #6a1b9a;
    border: 1px solid rgba(156, 39, 176, 0.3);
}
[data-theme="dark"] .quest-type-badge.type-duel-speed,
[data-theme="dark"] .quest-type-badge.type-duel-battle,
:root:not([data-theme]) .quest-type-badge.type-duel-speed,
:root:not([data-theme]) .quest-type-badge.type-duel-battle {
    color: #ce93d8;
}

/* Direkt-Upload-Card im Box-Editor */
.adm-direct-upload-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.08), transparent);
    border: 1px solid rgba(3, 215, 226, 0.25);
    border-radius: 10px;
    margin: 14px 0;
}
.adm-direct-upload-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.adm-direct-upload-row input[type="file"] {
    flex: 1;
    min-width: 200px;
    font-size: 13px;
}

/* ====================================================================
   ITER 5.99: Quest-Detail Box-Hinweis + Wait-Card
   ==================================================================== */
.qd-box-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 12px 0 8px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 13px;
    color: var(--text-dim);
}
.qd-box-hint-icon {
    font-size: 18px;
}
.qd-box-hint strong {
    color: var(--text);
}

/* Warte-Card (Foto eingereicht, läuft Bewertung) */
.qd-waiting-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    margin: 16px 0;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.10), rgba(76, 175, 80, 0.04));
    border: 2px solid rgba(76, 175, 80, 0.3);
    border-radius: 14px;
}
[data-theme="dark"] .qd-waiting-card,
:root:not([data-theme]) .qd-waiting-card {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.14), rgba(76, 175, 80, 0.06));
}
.qd-waiting-icon {
    flex-shrink: 0;
    font-size: 32px;
    line-height: 1;
}
.qd-waiting-content {
    flex: 1;
    min-width: 0;
}
.qd-waiting-title {
    display: block;
    font-size: 16px;
    color: #2e7d32;
    margin-bottom: 4px;
}
[data-theme="dark"] .qd-waiting-title,
:root:not([data-theme]) .qd-waiting-title {
    color: #81c784;
}
.qd-waiting-content p {
    margin: 0 0 10px 0;
    color: var(--text);
    line-height: 1.5;
}
.qd-waiting-timer {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.qd-waiting-timer small {
    color: var(--text-dim);
    font-size: 12px;
}
.qd-timer-display {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
}

/* ====================================================================
   ITER 5.99: Friends-Page laufende Duelle
   ==================================================================== */
.friends-running-duels {
    margin: 14px 0;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.friends-running-duels-title {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.friends-running-duels-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.friends-running-duel-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: background 0.15s;
}
.friends-running-duel-card:hover {
    background: var(--bg-hover);
}
.friends-running-duel-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text);
}
.friends-running-duel-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.friends-running-duel-text {
    flex: 1;
    min-width: 0;
}
.friends-running-duel-text strong {
    display: block;
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.3;
}
.friends-running-duel-text small {
    display: block;
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 2px;
}
.friends-running-duel-arrow {
    color: var(--text-dim);
    font-size: 22px;
    flex-shrink: 0;
}
.friends-running-duel-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
}

/* ====================================================================
   ITER 5.992: Box-Freischaltbedingungen mit ✓/✗-Anzeige
   ==================================================================== */
.qx-lock-title {
    display: block;
    font-size: 13px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.qx-lock-reqs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.qx-lock-reqs-detail {
    margin-bottom: 14px;
}
.qx-lock-req {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 13px;
}
.qx-lock-req-ok {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.3);
}
.qx-lock-req-missing {
    background: rgba(229, 57, 53, 0.06);
    border-color: rgba(229, 57, 53, 0.25);
}
.qx-lock-req-icon {
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}
.qx-lock-req-ok .qx-lock-req-icon {
    color: #4caf50;
}
.qx-lock-req-missing .qx-lock-req-icon {
    color: #e53935;
}
.qx-lock-req-label {
    color: var(--text);
    font-weight: 500;
}
.qx-lock-req-label small {
    margin-left: 4px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dim);
}
.qx-lock-req-status {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 12.5px;
    white-space: nowrap;
}
.qx-lock-req-ok .qx-lock-req-status {
    color: #4caf50;
}
.qx-lock-req-missing .qx-lock-req-status {
    color: #e53935;
}

/* ====================================================================
   ITER 5.993: Faire Duell-Bewertung im Admin-Panel
   ==================================================================== */

/* Duell-Paar in Submission-Liste markieren */
.admin-sub-card.is-duel-pair {
    border: 2px solid rgba(156, 39, 176, 0.4);
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.12);
}
.admin-sub-card.duel-pair-first {
    border-bottom-right-radius: 0;
    border-right: none;
    margin-right: -2px;
    z-index: 1;
}
.admin-sub-card.duel-pair-second {
    border-bottom-left-radius: 0;
    border-left: 2px dashed rgba(156, 39, 176, 0.3);
    margin-left: -2px;
}
@media (max-width: 720px) {
    /* Auf Mobile: Paar untereinander, einfacher Border */
    .admin-sub-card.duel-pair-first,
    .admin-sub-card.duel-pair-second {
        border: 2px solid rgba(156, 39, 176, 0.4);
        margin: 0;
        border-radius: 8px;
    }
}

.admin-sub-duel-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-bottom: 4px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.18), rgba(244, 67, 54, 0.10));
    color: #6a1b9a;
    border: 1px solid rgba(156, 39, 176, 0.3);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: fit-content;
}
[data-theme="dark"] .admin-sub-duel-badge,
:root:not([data-theme]) .admin-sub-duel-badge {
    color: #ce93d8;
}
.admin-sub-duel-badge-noshow {
    background: rgba(255, 152, 0, 0.15);
    color: #e65100;
    border-color: rgba(255, 152, 0, 0.3);
}
[data-theme="dark"] .admin-sub-duel-badge-noshow,
:root:not([data-theme]) .admin-sub-duel-badge-noshow {
    color: #ffb74d;
}

/* Duell-Wait-Card auf Detail-Page */
.duel-wait-card {
    max-width: 640px;
    margin: 24px auto;
    padding: 28px 24px;
    background: var(--bg-card);
    border: 2px dashed rgba(255, 152, 0, 0.4);
    border-radius: 16px;
    text-align: center;
}
.duel-wait-icon {
    font-size: 48px;
    margin-bottom: 8px;
    line-height: 1;
}
.duel-wait-card h2 {
    margin: 0 0 12px 0;
    color: var(--text);
    font-size: 22px;
}
.duel-wait-card p {
    color: var(--text);
    line-height: 1.55;
    margin: 8px 0;
}
.duel-wait-card ul {
    text-align: left;
    display: inline-block;
    margin: 12px 0;
    padding-left: 0;
    list-style: none;
}
.duel-wait-card ul li {
    padding: 4px 0;
    color: var(--text);
}
.duel-wait-timer {
    margin: 18px auto;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.10), rgba(255, 152, 0, 0.04));
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
    display: inline-block;
}
.duel-wait-timer-display {
    margin-left: 6px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text);
}
.duel-wait-card .hint {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-dim);
}

/* Foto-Vergleich (zwei Fotos nebeneinander) */
.review-photo-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
@media (max-width: 720px) {
    .review-photo-pair {
        grid-template-columns: 1fr;
    }
}
.review-photo-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.review-photo-side-label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.10), rgba(156, 39, 176, 0.04));
    border-radius: 6px;
    border-left: 3px solid rgba(156, 39, 176, 0.5);
}
.review-photo-side img {
    width: 100%;
    height: auto;
    max-height: 540px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--bg);
    display: block;
}
.review-photo-time {
    color: var(--text-dim);
    font-size: 11.5px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.review-photo-time .dim {
    margin-left: 4px;
    color: var(--text-dim);
    opacity: 0.65;
}

/* ====================================================================
   ITER 5.995: Quest-Stage-Icons (Schriftrollen pro Schwierigkeit)
   ==================================================================== */

/* Generisches Icon-Element (vom quest_icon-Macro gerendert) */
.quest-stage-icon {
    display: inline-block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}
.quest-stage-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    color: var(--text-dim);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* Box-Detail Quest-Tile: Icon + Status-Overlay */
.ig-quest-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}
.ig-quest-icon-wrap .quest-stage-icon {
    width: 56px;
    height: 56px;
    transition: transform 0.15s ease;
}
.ig-quest-item:not(.is-locked):hover .ig-quest-icon-wrap .quest-stage-icon {
    transform: scale(1.05);
}
.ig-quest-status-overlay {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    border: 2px solid var(--bg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    color: white;
    pointer-events: none;
}
.ig-quest-status-overlay.ok       { background: #22c55e; }
.ig-quest-status-overlay.pending  { background: #f59e0b; }
.ig-quest-status-overlay.rejected { background: #e53935; }

/* "Verschlossene"-Quest: Icon dezenter */
.ig-quest-item.is-locked .ig-quest-icon-wrap .quest-stage-icon {
    opacity: 0.45;
    filter: grayscale(0.5);
}
/* Bestanden: leichter Glow um's Icon */
.ig-quest-item.is-done .ig-quest-icon-wrap .quest-stage-icon {
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.35));
}

/* Quest-Detail-Page: großes Icon im Header neben Titel */
.ig-quest-detail-head {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ig-quest-detail-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
}
.ig-quest-detail-icon .quest-stage-icon {
    width: 88px;
    height: 88px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}
.ig-quest-detail-info {
    flex: 1;
    min-width: 0;
}
@media (max-width: 460px) {
    .ig-quest-detail-head {
        gap: 12px;
    }
    .ig-quest-detail-icon {
        width: 64px;
        height: 64px;
    }
    .ig-quest-detail-icon .quest-stage-icon {
        width: 64px;
        height: 64px;
    }
}

/* Admin-Review (Detail-Page): Icon vor Titel */
.review-info-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.review-info-head h1 {
    margin: 0;
    flex: 1;
    min-width: 0;
}
.review-info-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.review-info-icon .quest-stage-icon {
    width: 48px;
    height: 48px;
}

/* Admin Review-Queue: Icon links neben Quest-Titel in der Card unten */
.adm-review-v2-quest-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.adm-review-v2-quest-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
}
.adm-review-v2-quest-head .adm-review-v2-quest-title {
    flex: 1;
    min-width: 0;
}

/* ====================================================================
   ITER 5.997: Quest-Detail Klartext-Belohnungs-Card
   ==================================================================== */

.qd-rewards-card {
    margin: 16px 0;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.06), rgba(3, 215, 226, 0.04));
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qd-rewards-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.qd-rewards-cost {
    color: var(--text);
}

.qd-rewards-reward {
    color: var(--text);
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.qd-rewards-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.qd-rewards-label {
    font-weight: 600;
    color: var(--text);
}

.qd-rewards-cost .qd-rewards-label,
.qd-rewards-cost .qd-rewards-value {
    align-self: center;
}

.qd-rewards-cost {
    align-items: center;
}

.qd-rewards-value {
    color: var(--text);
}

.qd-rewards-value strong {
    font-size: 17px;
    color: var(--text);
}

.qd-rewards-divider {
    height: 1px;
    background: var(--border);
    opacity: 0.7;
    margin: 2px 0;
}

.qd-rewards-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.qd-rewards-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 15px;
    flex-wrap: wrap;
}

.qd-rewards-list li strong {
    font-size: 16px;
    font-weight: 700;
}

.qd-reward-bullet {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.qd-reward-bonus {
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(255, 152, 0, 0.06));
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    margin-top: 4px;
}

.qd-reward-bonus small {
    width: 100%;
    margin-top: 2px;
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
}

.qd-reward-title strong {
    color: #f59e0b;
}

@media (max-width: 460px) {
    .qd-rewards-card {
        padding: 12px 14px;
    }
    .qd-rewards-list {
        margin-left: 0;
    }
    .qd-rewards-icon {
        font-size: 20px;
    }
    .qd-rewards-list li {
        font-size: 14px;
    }
}

/* ====================================================================
   ITER 5.998: Pinnwand-Refresh - Kreis-Cards + Quest-Icon-Tiles
   ==================================================================== */

/* === 2 Kreis-Cards nebeneinander === */
.ig-rings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0;
}

.ig-ring-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ig-ring-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.ig-ring-rank {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.2;
    min-height: 18px;
    letter-spacing: 0.01em;
}
.ig-ring-rank-duel {
    color: var(--dm-color, #f59e0b);
}

.ig-ring-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
}

.ig-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
}

.ig-ring-bg {
    stroke: var(--border);
    opacity: 0.4;
}

.ig-ring-fill {
    transition: stroke-dashoffset 0.6s ease;
}
.ig-ring-fill-stars {
    stroke: url(#starGrad);
    stroke: linear-gradient(135deg, #facc15, #f97316);
    stroke: #facc15;
}
.ig-ring-fill-duel {
    stroke: var(--dm-color, #f59e0b);
}

/* Browser-Fallback: SVG kann mit linear-gradient nicht direkt - direkt Farbe */
.ig-ring-fill-stars { stroke: #facc15; }

.ig-ring-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    pointer-events: none;
    line-height: 1;
}
.ig-ring-icon {
    font-size: 22px;
    line-height: 1;
}
.ig-ring-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}
/* Iter v6.43: "Level"-Label unter der Zahl im Kreis,
   damit klar ist dass die Zahl ein Level ist (und nicht z.B. Sterne/Schwerter). */
.ig-ring-sublabel {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    line-height: 1;
    margin-top: 1px;
}

.ig-ring-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.ig-ring-bottom strong {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.ig-ring-bottom small {
    font-size: 11px;
    color: var(--text-dim);
}

/* Newbie-Variante: keine Sterne-Bar nötig */
.ig-ring-card-stars.is-newbie .ig-ring-bottom small {
    color: #4ade80;
    font-weight: 600;
}

/* Mobile: Kreise enger */
@media (max-width: 480px) {
    .ig-rings {
        gap: 8px;
    }
    .ig-ring-wrap {
        width: 96px;
        height: 96px;
    }
    .ig-ring-icon {
        font-size: 19px;
    }
    .ig-ring-num {
        font-size: 18px;
    }
    .ig-ring-sublabel {
        font-size: 8.5px;
    }
    .ig-ring-rank {
        font-size: 12.5px;
    }
    .ig-ring-bottom small {
        font-size: 10.5px;
    }
}

/* === Quest-Bestanden-Tiles (Stat-Reihe statt 6er-Cards) === */
.ig-quest-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 0 16px;
}

@media (min-width: 720px) {
    .ig-quest-stats {
        grid-template-columns: repeat(7, 1fr);  /* Iter 5.999b: 7 Tiles statt 8 */
    }
}

.ig-qs-tile {
    /* Iter 5.999h: Card-Hintergrund + Border zurück (5.999d-Stil) */
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 6px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: transform 0.15s ease;
    min-width: 0;
}
.ig-qs-tile:hover {
    transform: translateY(-1px);
}

.ig-qs-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    margin-bottom: 1px;
    /* Iter 5.999h: Drop-shadow nur auf Bild damit es vom Card-BG abhebt */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.ig-qs-icon-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--border);
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 1px;
}

.ig-qs-emoji,
.ig-qs-box-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 3px;
}

.ig-qs-num {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.ig-qs-num small {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    margin-left: 1px;
}

.ig-qs-label {
    font-size: 10px;
    color: var(--text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    text-align: center;
}

/* ====================================================================
   ITER 5.999k: Counter-Farben pro Difficulty/Kategorie
   - Easy: grün (#22c55e), Medium: blau (#3b82f6), Hard: orange (#f97316)
   - Legendary: violett (#a855f7) - das offizielle Tier-Lila
   - Daily: warm-gelb-orange (#fbbf24) - andere Schattierung als Hard
   - Kisten: braun (#92400e) - Holz-Braun passend zur Schatzkiste
   - Pokale: schwarz/Text-Color - hebt sich von Gold-Pokal ab
   ==================================================================== */
.ig-qs-tile-easy .ig-qs-num {
    color: #22c55e;
}
.ig-qs-tile-medium .ig-qs-num {
    color: #3b82f6;
}
.ig-qs-tile-hard .ig-qs-num {
    color: #f97316;
}
.ig-qs-tile-legendary .ig-qs-num {
    color: #a855f7;
}
.ig-qs-tile-daily-streak .ig-qs-num {
    color: #fbbf24;  /* warm-gelb-orange für Daily */
}
.ig-qs-tile-daily-streak .ig-qs-num small {
    color: #fbbf24;
    opacity: 0.7;
}
.ig-qs-tile-boxes .ig-qs-num {
    color: #92400e;  /* sattes Holz-Braun */
}
.ig-qs-tile-pokal .ig-qs-num {
    color: var(--text);  /* schwarz im Light-Theme, weiß im Dark-Theme */
}

/* Light-Theme: Braun bleibt sichtbar, schwarzer Pokal-Counter sichtbar */
[data-theme="light"] .ig-qs-tile-pokal .ig-qs-num {
    color: #111;
}

/* Iter 5.999g: Spezielle Counter-Farben (Cyan/Gold/Rot) entfernt -
   alle Tiles haben jetzt die gleiche neutrale Text-Farbe für Konsistenz. */

@media (max-width: 380px) {
    .ig-qs-icon { width: 36px; height: 36px; }
    .ig-qs-icon-fallback { width: 36px; height: 36px; font-size: 14px; }
    .ig-qs-emoji, .ig-qs-box-icon { font-size: 28px; }
    .ig-qs-num { font-size: 15px; }
    .ig-qs-label { font-size: 9.5px; }
}

/* ====================================================================
   ITER 5.999: Pinnwand-Refinement + Title-Tier-System
   ==================================================================== */

/* === Aktiver Titel als auffaelliger Banner ueber den Ringen === */
.ig-title-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 10px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(135deg, var(--bg-card), rgba(3, 215, 226, 0.05));
    border: 1px solid var(--border);
    color: var(--text);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ig-title-banner:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.ig-title-banner-icon {
    font-size: 26px;
    line-height: 1;
}
.ig-title-banner-text {
    font-weight: 800;
    letter-spacing: 0.01em;
}
.ig-title-banner-tier {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

.ig-title-banner-empty {
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    border: 1px dashed var(--border);
}
.ig-title-banner-empty .ig-title-banner-icon { font-size: 20px; opacity: 0.7; }
.ig-title-banner-empty .ig-title-banner-text { font-weight: 600; }

/* Tier-spezifische Banner-Farben */
.ig-title-banner-tier-easy {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.05));
    border-color: rgba(34, 197, 94, 0.4);
}
.ig-title-banner-tier-easy .ig-title-banner-text { color: #22c55e; }
.ig-title-banner-tier-easy .ig-title-banner-tier { background: rgba(34, 197, 94, 0.25); color: #166534; }

.ig-title-banner-tier-medium {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(29, 78, 216, 0.05));
    border-color: rgba(59, 130, 246, 0.4);
}
.ig-title-banner-tier-medium .ig-title-banner-text { color: #3b82f6; }
.ig-title-banner-tier-medium .ig-title-banner-tier { background: rgba(59, 130, 246, 0.25); color: #1e40af; }

.ig-title-banner-tier-hard {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(194, 65, 12, 0.05));
    border-color: rgba(249, 115, 22, 0.4);
}
.ig-title-banner-tier-hard .ig-title-banner-text { color: #f97316; }
.ig-title-banner-tier-hard .ig-title-banner-tier { background: rgba(249, 115, 22, 0.25); color: #9a3412; }

.ig-title-banner-tier-legendary {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(126, 34, 206, 0.06));
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.15);
}
.ig-title-banner-tier-legendary .ig-title-banner-text { color: #a855f7; }
.ig-title-banner-tier-legendary .ig-title-banner-tier { background: rgba(168, 85, 247, 0.3); color: #581c87; }

/* Light-Theme: dunklere Texte für Tier-Tags */
[data-theme="light"] .ig-title-banner-tier-easy .ig-title-banner-tier,
[data-theme="light"] .ig-title-banner-tier-medium .ig-title-banner-tier,
[data-theme="light"] .ig-title-banner-tier-hard .ig-title-banner-tier,
[data-theme="light"] .ig-title-banner-tier-legendary .ig-title-banner-tier {
    color: white;
    background: var(--accent);
}

/* Mobile: kompakter */
@media (max-width: 480px) {
    .ig-title-banner {
        padding: 10px 14px;
        font-size: 16px;
        gap: 8px;
    }
    .ig-title-banner-icon { font-size: 22px; }
    .ig-title-banner-tier { padding: 2px 8px; font-size: 10px; }
}

/* === Energy-Pills im Header (unter Username) === */
.ig-private-row-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 4px;
}
.ig-private-row-header .ig-private-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ig-private-row-header .ig-private-energy {
    color: #f59e0b;
}
.ig-private-row-header .ig-slot-counter.is-warn {
    color: #f97316;
    border-color: #f97316;
}
.ig-private-row-header .ig-slot-counter.is-full {
    color: #ef4444;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

@media (max-width: 480px) {
    .ig-private-row-header .ig-private-item {
        font-size: 12px;
        padding: 4px 10px;
    }
}

/* === Foto-Tiles: nur Pending-Badge bleibt, anderes weg === */
.ig-tile-pending {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    backdrop-filter: blur(4px);
}

/* ====================================================================
   ITER 5.999b: Title zurück in Header, Daily+Streak zusammengelegt,
                Box-Bild als Kisten-Icon, Pills unter Titel
   ==================================================================== */

/* === Aktiver Titel kleiner unter Username, mit Tier-Farbe === */
/* Override für die globale .ig-active-title aus 5.999 die zu groß war */
.ig-profile-info .ig-active-title {
    margin: 4px 0 8px;
    font-size: 14px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ig-profile-info .ig-active-title .ig-title-icon {
    font-size: 16px;
    line-height: 1;
}
.ig-profile-info .ig-active-title .ig-title-text {
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    /* Tier-Color wird per Klasse gesetzt - hier Default */
    color: var(--accent);
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    background: none;
}

/* Tier-Farben für den kleinen Titel im Header */
.ig-profile-info .ig-active-title-tier-easy .ig-title-text { color: #22c55e; }
.ig-profile-info .ig-active-title-tier-medium .ig-title-text { color: #3b82f6; }
.ig-profile-info .ig-active-title-tier-hard .ig-title-text { color: #f97316; }
.ig-profile-info .ig-active-title-tier-legendary .ig-title-text {
    color: #a855f7;
    text-shadow: 0 0 6px rgba(168, 85, 247, 0.35);
}

/* === Pills im Header unter Titel === */
.ig-private-row-header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
}
.ig-private-row-header .ig-private-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.ig-private-row-header .ig-private-energy {
    color: #f59e0b;
}
.ig-private-row-header .ig-slot-counter.is-warn {
    color: #f97316;
    border-color: rgba(249, 115, 22, 0.35);
}
.ig-private-row-header .ig-slot-counter.is-full {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}

/* === Daily + Streak Tile (zusammengelegt) === */
.ig-qs-tile-daily-streak .ig-qs-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-dim);
    line-height: 1;
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

/* === Banner-Stile aus 5.999 deaktivieren falls noch da === */
.ig-title-banner {
    display: none !important;
}

/* ====================================================================
   ITER 5.999c: 2-Spalten-Grid für /quests + /boxes (komplett neue Cards)
   ==================================================================== */

.qx-grid {
    /* Iter 5.999j: durchgehend 2 Spalten - so wie es Roland's Erinnerung nach
       am besten aussah. Bilder füllen die Breite voll aus. */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}

@media (min-width: 720px) {
    .qx-grid {
        gap: 16px;  /* Nur größerer Gap auf Tablet/Desktop, weiterhin 2 Spalten */
    }
}

/* Iter 5.999j: KEIN Wide-Desktop-Override mehr - 2 Spalten überall */

/* === Aktive/Pending Duelle: volle Breite über Grid === */
.qx-active-duels {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0;
}
.qx-active-duels-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
}
.qx-active-duels-block h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.qx-active-duels-block .active-duels-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* === Card === */
.qx-card {
    /* Iter 5.999h: Card-Background + Border zurück (5.999d-Stil) */
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease;
    list-style: none;
}
.qx-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    border-color: rgba(3, 215, 226, 0.4);
}
.qx-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text);
    height: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.qx-card-btn {
    /* Button als Card-Link für Duelle */
    font-family: inherit;
    font-size: inherit;
}

/* === Kosten-Tag oben in der Card === */
.qx-card-cost {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px;
    font-size: 12px;
}
.qx-card-cost-label {
    color: var(--text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10.5px;
}
.qx-card-cost-val {
    color: #f59e0b;
    font-weight: 700;
    font-size: 13px;
    background: rgba(245, 158, 11, 0.1);
    padding: 2px 8px;
    border-radius: 999px;
}
.qx-card-cost-val.qx-card-cost-empty {
    color: var(--text-dim);
    background: transparent;
    font-weight: 600;
}

/* === Card-Bild === */
.qx-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    box-sizing: border-box;
    /* Iter 5.999h: Subtiler heller Glow damit transparente Bilder vom
       Card-BG abheben - kein "schwarzer Hintergrund"-Effekt mehr */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07), transparent 65%);
}

[data-theme="light"] .qx-card-img {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.04), transparent 65%);
}
.qx-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}
.qx-card:hover .qx-card-img img {
    transform: scale(1.05);
}
.qx-card-img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    line-height: 1;
    /* Iter v6.43: Cyan-Glow-Hintergrund entfernt - Fallback-Emoji liegt jetzt
       sauber auf dem Card-Hintergrund. Vorher gab das einen grünlich/bläulichen
       Schimmer auf den CTA-Cards (Fotokisten/Erhalten) im hellen Modus. */
    border-radius: 16px;
}

/* === Quest-Tile-Bild (im box_detail) === */
.qx-card-img-quest {
    aspect-ratio: 1 / 1;
}
.qx-card-img-quest img {
    /* Quest-Icon ist schon transparent + freistehend */
    width: 80%;
    height: 80%;
    margin: 0 auto;
}

/* === Overlays auf Card-Bild === */
.qx-card-overlay-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    color: #fff;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.qx-card-overlay-badge.ok {
    background: rgba(34, 197, 94, 0.9);
}
.qx-card-overlay-badge.pending {
    background: rgba(234, 179, 8, 0.9);
    color: #1a1a1a;
}
.qx-card-overlay-badge.rejected {
    background: rgba(239, 68, 68, 0.9);
}
.qx-card-overlay-badge.muted {
    background: rgba(120, 120, 120, 0.7);
}
.active-duels-badge {
    background: rgba(168, 85, 247, 0.9);
}

/* Lock-Overlay über Quest/Box-Bild */
.qx-card-lock-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    z-index: 2;
}

.qx-card.is-locked .qx-card-img img,
.qx-card.is-locked .qx-card-img .qx-card-img-fallback {
    filter: grayscale(0.7) brightness(0.7);
    opacity: 0.6;
}
.qx-card.is-done .qx-card-img {
    filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.4));
}

/* === Iter V.6: Teaser-Mechanik bei verschlossener Box === */
/* Erste 3 Quests werden "normal" gezeigt (nur Schloss-Icon),
   ab der 4. Quest wird Titel + Beschreibung verborgen.
   Opacity wird inline (per Style-Attribut) gestuft gesetzt. */
.qx-card.is-teaser-blurred .qx-card-img img,
.qx-card.is-teaser-blurred .qx-card-img .qx-card-img-fallback {
    filter: blur(8px) grayscale(0.9) brightness(0.55);
    opacity: 0.45;
}
.qx-card.is-teaser-blurred .qx-card-lock-overlay {
    /* Schloss noch prominenter wenn alles drumherum verschwommen */
    font-size: 44px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.qx-teaser-redacted {
    /* Titel-Platzhalter "??? Geheime Quest ???" */
    color: var(--text-dim, #888);
    font-style: italic;
    letter-spacing: 1.5px;
    font-family: monospace;
    opacity: 0.85;
}
.qx-teaser-redacted-text {
    /* Beschreibungs-Platzhalter */
    font-style: italic;
    opacity: 0.65;
    font-size: 13px;
}

/* === Iter V.6: "Neue Quests"-Pulsier-Effekt === */
/* Wenn nach dem letzten User-Besuch neue Quests in eine Box reinkommen,
   pulsiert die Box-Kachel auf der /quests-Uebersicht. Sobald der User die
   Box oeffnet, wird sie als "gesehen" markiert und das Pulsieren stoppt. */
@keyframes qx-new-quests-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(3, 215, 226, 0.55),
                    0 6px 18px rgba(3, 215, 226, 0.20);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(3, 215, 226, 0),
                    0 6px 18px rgba(3, 215, 226, 0.35);
        transform: scale(1.012);
    }
}
.qx-card.has-new-quests {
    animation: qx-new-quests-pulse 1.8s ease-in-out infinite;
    border-color: rgba(3, 215, 226, 0.55) !important;
    position: relative;
    overflow: visible !important; /* Badge soll auch ausserhalb sichtbar sein */
}
[data-theme="light"] .qx-card.has-new-quests {
    border-color: rgba(8, 145, 178, 0.55) !important;
}

.qx-card-new-quests-badge {
    position: absolute;
    top: -10px;
    right: -8px;
    background: linear-gradient(135deg, #03d7e2, #0891b2);
    color: #0a1418;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.4px;
    box-shadow: 0 4px 10px rgba(3, 215, 226, 0.45);
    z-index: 5;
    pointer-events: none;
    animation: qx-new-badge-bounce 1.8s ease-in-out infinite;
    white-space: nowrap;
}
@keyframes qx-new-badge-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* User mit reduzierter Bewegungs-Toleranz: Animation aus */
@media (prefers-reduced-motion: reduce) {
    .qx-card.has-new-quests {
        animation: none;
    }
    .qx-card-new-quests-badge {
        animation: none;
    }
}

/* === Iter V.6 Phase 4: Pack-Shop-Cards === */
.pack-card {
    position: relative;
}
.pack-card-free-available {
    border-color: #facc15 !important;
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.45),
                0 6px 18px rgba(250, 204, 21, 0.22);
    animation: pack-free-pulse 2.4s ease-in-out infinite;
}
@keyframes pack-free-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.45),
                    0 6px 18px rgba(250, 204, 21, 0.22);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(250, 204, 21, 0),
                    0 6px 18px rgba(250, 204, 21, 0.45);
    }
}
.pack-badge-free {
    position: absolute;
    top: -10px;
    right: -8px;
    background: linear-gradient(135deg, #facc15, #ea580c);
    color: #0a0a0a;
    font-weight: 800;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.5);
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .pack-card-free-available { animation: none; }
}

/* === Iter V.6 Phase 4.1: Free-Pack & Pack-Shop Cards (auf /quests) === */
.qx-card-freepack {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.10), rgba(234, 88, 12, 0.05));
    border-color: rgba(250, 204, 21, 0.40);
}
.qx-card-freepack.is-ready {
    animation: qx-freepack-pulse 2.4s ease-in-out infinite;
}
@keyframes qx-freepack-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.45),
                    0 6px 18px rgba(250, 204, 21, 0.25);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(250, 204, 21, 0),
                    0 6px 18px rgba(250, 204, 21, 0.50);
    }
}
@media (prefers-reduced-motion: reduce) {
    .qx-card-freepack.is-ready { animation: none; }
}
.qx-card-img-freepack,
.qx-card-img-packshop {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.20), rgba(234, 88, 12, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}
.qx-card-img-packshop {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.20), rgba(8, 145, 178, 0.08));
}
.qx-card-packshop {
    border-color: rgba(3, 215, 226, 0.40);
}

/* === Free-Pack Countdown === */
.freepack-countdown {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* === Iter V.6 Phase 4.1: Foto-Aufnahme-Zeit-Banner im Review === */
.adm-review-v2-photo-time {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.adm-review-v2-photo-time.is-ok {
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.30);
    color: #86efac;
}
.adm-review-v2-photo-time.is-warning {
    background: rgba(249, 115, 22, 0.18);
    border: 1px solid rgba(249, 115, 22, 0.55);
    color: #fdba74;
    font-weight: 600;
    animation: photo-time-warn-pulse 2s ease-in-out infinite;
}
.adm-review-v2-photo-time.is-neutral {
    background: rgba(120, 120, 120, 0.10);
    border: 1px solid rgba(120, 120, 120, 0.25);
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}
@keyframes photo-time-warn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .adm-review-v2-photo-time.is-warning { animation: none; }
}

/* === Iter V.6 Phase 4.2: Quest-Card Difficulty-Akzente ===
   Die echten Schwierigkeits-Farben aus quest_detail.html (.diff-*).
   Easy=#4ade80 grün, Medium=#60a5fa blau, Hard=orange (--accent-warm),
   Legendary=gold (--accent) mit Gradient+Glow. */

.qx-card.qx-card-img-quest-easy { border-color: rgba(74, 222, 128, 0.45); }
.qx-card.qx-card-img-quest-easy .qx-card-img-quest {
    background: linear-gradient(160deg, rgba(74, 222, 128, 0.18), rgba(74, 222, 128, 0.04));
}
.qx-card.qx-card-img-quest-easy .qx-card-cost-val {
    color: #4ade80;
    font-weight: 700;
}

.qx-card.qx-card-img-quest-medium { border-color: rgba(96, 165, 250, 0.45); }
.qx-card.qx-card-img-quest-medium .qx-card-img-quest {
    background: linear-gradient(160deg, rgba(96, 165, 250, 0.18), rgba(96, 165, 250, 0.04));
}
.qx-card.qx-card-img-quest-medium .qx-card-cost-val {
    color: #60a5fa;
    font-weight: 700;
}

.qx-card.qx-card-img-quest-hard { border-color: rgba(255, 140, 66, 0.50); }
.qx-card.qx-card-img-quest-hard .qx-card-img-quest {
    background: linear-gradient(160deg, rgba(255, 140, 66, 0.20), rgba(255, 140, 66, 0.04));
}
.qx-card.qx-card-img-quest-hard .qx-card-cost-val {
    color: var(--accent-warm, #ff8c42);
    font-weight: 700;
}

.qx-card.qx-card-img-quest-legendary {
    border-color: rgba(255, 210, 63, 0.55);
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.15);
}
.qx-card.qx-card-img-quest-legendary .qx-card-img-quest {
    background: linear-gradient(160deg, rgba(255, 210, 63, 0.22), rgba(255, 140, 66, 0.10));
}
.qx-card.qx-card-img-quest-legendary .qx-card-cost-val {
    color: var(--accent, #ffd23f);
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 210, 63, 0.40);
}

/* Bei Pack-Reveal-Cards: stärkerer Akzent für die "Wow"-Wirkung */
.pack-reveal-quest-card.qx-card-img-quest-legendary {
    box-shadow: 0 0 28px rgba(255, 210, 63, 0.30);
    animation: pack-reveal-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               pack-legendary-glow 2s ease-in-out infinite 0.8s;
}
@keyframes pack-legendary-glow {
    0%, 100% { box-shadow: 0 0 28px rgba(255, 210, 63, 0.30); }
    50% { box-shadow: 0 0 36px rgba(255, 210, 63, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .pack-reveal-quest-card.qx-card-img-quest-legendary { animation: pack-reveal-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
}


/* === Iter V.6 Phase 4.2: Pack-Choose (Choice-System) === */
/* Buttons im Quest-Card-Stil - die schwierigkeits-Akzent-Borders kommen
   aus den existierenden .qx-card-img-quest-{difficulty}-Klassen. */

.pack-choose-progress {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 14px 0 22px;
    flex-wrap: wrap;
}
.pack-choose-progress-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.pack-choose-progress-dot.is-done {
    background: #22c55e;
}
.pack-choose-progress-dot.is-current {
    background: var(--cyan, #03d7e2);
    transform: scale(1.4);
    box-shadow: 0 0 0 4px rgba(3, 215, 226, 0.20);
}

/* Choose-Card-Form - keine Form-Optik */
.pack-choose-card-form {
    margin: 0;
    padding: 0;
    display: contents;
}

/* Card als Button - alle Default-Styles weg, dann normale qx-card-Optik */
.pack-choose-card-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pack-choose-card-btn:hover,
.pack-choose-card-btn:focus-visible {
    transform: translateY(-3px);
    outline: none;
}
.pack-choose-card-btn:hover .qx-card,
.pack-choose-card-btn:focus-visible .qx-card {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40);
}

/* CTA-Button am Ende der Card - dezent */
.pack-choose-cta {
    display: block;
    margin-top: 10px;
    padding: 8px 14px;
    background: var(--cyan, #03d7e2);
    color: #0a1418;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    transition: background 0.2s ease;
}
.pack-choose-card-btn:hover .pack-choose-cta {
    background: #0891b2;
    color: #fff;
}

/* Abbrechen-Link - dezent */
.pack-choose-cancel-link {
    background: none;
    border: none;
    color: var(--text-dim, rgba(255,255,255,0.55));
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
    padding: 8px 16px;
}
.pack-choose-cancel-link:hover {
    color: var(--text, #fff);
}

@media (prefers-reduced-motion: reduce) {
    .pack-choose-card-btn { transition: none; }
}


/* === Iter V.6 Phase 4.1: Pack-Reveal === */
.pack-reveal-page .ig-section-head h1 {
    margin-bottom: 6px;
}

/* Legendary-Banner */
.pack-reveal-legendary-banner {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.22), rgba(255, 140, 66, 0.10));
    border: 1px solid rgba(255, 210, 63, 0.55);
    color: var(--accent, #ffd23f);
    text-align: center;
    padding: 14px 20px;
    margin: 16px auto;
    max-width: 540px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 210, 63, 0.30);
    animation: pack-legendary-pulse 2s ease-in-out infinite;
}
@keyframes pack-legendary-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 210, 63, 0.25); }
    50% { box-shadow: 0 0 24px rgba(255, 210, 63, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .pack-reveal-legendary-banner { animation: none; }
}

/* Reveal-Cards: Stagger-Einblendung */
.pack-reveal-quest-card {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    animation: pack-reveal-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pack-reveal-pop {
    0% { opacity: 0; transform: translateY(20px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .pack-reveal-quest-card { animation: none; opacity: 1; transform: none; }
}

/* Box-Info-Block am Ende der Reveal-Card */
.pack-reveal-box-info {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(3, 215, 226, 0.08);
    border: 1px solid rgba(3, 215, 226, 0.20);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-dim, rgba(255,255,255,0.75));
    text-align: center;
}
.pack-reveal-box-info strong {
    color: var(--text, #fff);
}


/* === Card-Body === */
.qx-card-body {
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.qx-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    text-align: center;
}
.qx-card-info {
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.3;
}
/* Iter v6.43: "X erledigt"-Info im Mystery-Modus - dezent positiv markiert. */
.qx-card-info-done {
    color: #03d7e2;
    font-weight: 600;
}

/* === Belohnungs-Block in der Card === */
.qx-card-rewards {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.qx-card-rewards-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.qx-card-rewards-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    align-items: center;
    justify-content: center;
}
.qx-card-rewards-list span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px 7px;
    font-size: 12px;
}
.qx-card-rewards-empty {
    color: var(--text-dim);
    font-weight: 400;
    background: transparent !important;
    border: none !important;
}

/* === Quest-Rewards: Liste statt Pills (im box_detail) === */
.qx-card-rewards-fulllist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--text);
}
.qx-card-rewards-fulllist li {
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
}
.qx-card-reward-title {
    color: #f59e0b;
    font-weight: 700;
}

/* === Mobile-Anpassungen === */
@media (max-width: 480px) {
    .qx-card-title { font-size: 14px; }
    .qx-card-info { font-size: 11.5px; }
    .qx-card-rewards-list { font-size: 11.5px; }
    .qx-card-cost-val { font-size: 12px; }
    .qx-card-img { padding: 6px 10px; }
}

/* === Empty-State === */
.qx-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
}
.qx-empty-icon {
    font-size: 80px;
    margin-bottom: 12px;
    opacity: 0.5;
}
.qx-empty h2 {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--text);
}

/* ====================================================================
   ITER 5.999g: Override-Regeln aus 5.999e aufgeräumt - alle Tiles
   sind jetzt einheitlich. Nur Light-Theme-Spezial-Regeln behalten.
   ==================================================================== */

/* Iter 5.999g: Light-Theme qx-card-img Override entfernt - Card ist transparent */
[data-theme="light"] .qx-card-img img {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
}

/* ====================================================================
   ITER 5.999f: Quick-Action Bottom-Sheet (3 Optionen mit Bildern)
   ==================================================================== */

.cta-options-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cta-option-v2 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
}
.cta-option-v2:hover,
.cta-option-v2:focus {
    transform: translateY(-1px);
    border-color: rgba(3, 215, 226, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

/* === Bild links === */
.cta-option-img {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06), transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
[data-theme="light"] .cta-option-img {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.04), transparent 70%);
}
.cta-option-img img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
    transition: transform 0.3s ease;
}
.cta-option-v2:hover .cta-option-img img {
    transform: scale(1.05);
}
.cta-option-img-fallback {
    font-size: 36px;
    line-height: 1;
}

/* === Body in der Mitte === */
.cta-option-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cta-option-body strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.cta-option-body small {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.3;
}

/* === Pfeil rechts === */
.cta-option-arrow {
    flex: 0 0 auto;
    font-size: 28px;
    line-height: 1;
    color: var(--text-dim);
    font-weight: 300;
}

/* === Done-State (Daily heute schon geschafft) === */
.cta-option-v2.is-done {
    opacity: 0.65;
}
.cta-option-v2.is-done .cta-option-img img {
    filter: grayscale(0.6) drop-shadow(0 2px 6px rgba(34, 197, 94, 0.3));
}
.cta-option-v2.is-done .cta-option-body small {
    color: #22c55e;
    font-weight: 700;
}

/* === Disabled (kein Daily heute) === */
.cta-option-v2.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.cta-option-v2.is-disabled .cta-option-img img {
    filter: grayscale(0.85);
}

/* Iter 5.999f: Anchor zum Hinscrollen mit Offset für sticky Site-Header */
.qx-anchor {
    display: block;
    position: relative;
    top: -80px;  /* Offset für sticky Header */
    visibility: hidden;
    grid-column: 1 / -1;
    height: 0;
}

/* ====================================================================
   ITER 5.999f: /duelle Tab-Layout (Duell starten / Laufende / Statistik)
   ==================================================================== */

.duo-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    margin: 16px 0;
}

.duo-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
}
.duo-tab:hover {
    color: var(--text);
    background: rgba(3, 215, 226, 0.05);
}
.duo-tab.is-active {
    background: var(--accent);
    color: #fff;
}
.duo-tab.is-active .duo-tab-label {
    font-weight: 700;
}

.duo-tab-icon {
    font-size: 18px;
    line-height: 1;
}
.duo-tab-label {
    font-size: 11.5px;
    font-weight: 600;
}
.duo-tab-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
    min-width: 16px;
    text-align: center;
    line-height: 1.2;
}

.duo-pane {
    display: none;
}
.duo-pane.is-active {
    display: block;
}

/* === Statistik-Tab === */
.duo-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 16px 0;
}
.duo-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.duo-stat-icon {
    font-size: 28px;
    line-height: 1;
}
.duo-stat-num {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.duo-stat-label {
    font-size: 11.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.duo-stat-card-won .duo-stat-num { color: #22c55e; }
.duo-stat-card-lost .duo-stat-num { color: #ef4444; }
.duo-stat-card-rate .duo-stat-num { color: #f59e0b; }

@media (min-width: 720px) {
    .duo-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* === Duell-Meister-Card === */
.duo-master-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 16px 0;
}
.duo-master-card h3 {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.duo-master-tier {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.duo-master-icon {
    font-size: 36px;
    line-height: 1;
}
.duo-master-name {
    flex: 1;
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
}
.duo-master-level {
    background: var(--accent);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.duo-master-bar {
    height: 8px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 4px;
}
.duo-master-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444);
    transition: width 0.5s ease;
}
.duo-master-progress small {
    display: block;
    color: var(--text-dim);
    font-size: 12px;
}

/* === Stats-Info-Block === */
.duo-stats-info {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-dim);
}
.duo-stats-info p {
    margin: 0 0 6px;
    color: var(--text);
}
.duo-stats-info ul {
    margin: 0;
    padding-left: 18px;
}
.duo-stats-info li {
    margin: 3px 0;
}

/* ====================================================================
   ITER 5.999h: Bilder in Stat-Tiles bekommen Glow-Background damit
   transparente Bilder NICHT auf dunklem Card-BG schwarz wirken.
   Card-Umrandung bleibt - nur das Bild selbst hat eigenen "Lichtkegel".
   ==================================================================== */

.ig-qs-icon {
    /* Subtiler Glow direkt unter dem Bild damit es vom dunklen Card-BG abhebt */
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 70%);
    border-radius: 50%;
    padding: 2px;
}

[data-theme="light"] .ig-qs-icon {
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.04), transparent 70%);
}

/* ====================================================================
   ITER 5.999h: CTA-Modal mit echten qx-cards (wie auf /quests)
   ==================================================================== */

.cta-modal-card {
    /* Modal etwas breiter damit 2 Cards nebeneinander gut Platz haben */
    max-width: 600px;
}

.cta-grid {
    /* Grid im Modal: 2 Spalten auch auf Mobile */
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0;
}

.cta-all-boxes-link {
    display: block;
    text-align: center;
    padding: 14px;
    margin-top: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--accent);
    font-weight: 700;
    font-size: 14px;
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.cta-all-boxes-link:hover {
    transform: translateY(-1px);
    border-color: rgba(3, 215, 226, 0.45);
}

/* ====================================================================
   ITER 5.999j: Erweitertes Duell-Hub-Modal mit Top-Tabs
   ==================================================================== */

/* Modal-Card breiter damit Tabs Platz haben */
.duel-modal-card {
    max-width: 640px;
    width: 100%;
}

/* Top-Tabs direkt unter dem Header */
.duo-tabs-modal {
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 6px 8px;
    background: var(--bg-card);
    display: flex;
    gap: 4px;
}
.duo-tabs-modal .duo-tab {
    padding: 8px 4px;
}

/* Section-Title in den Tabs */
.duo-section-title {
    font-size: 13px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    margin: 12px 0 8px;
}
.duo-section-title:first-child {
    margin-top: 0;
}

/* Stat-Cards im Modal etwas kompakter */
.duo-pane[data-duo-pane="stats"] .duo-stats-grid {
    margin: 8px 0 12px;
}
.duo-pane[data-duo-pane="stats"] .duo-stat-card {
    padding: 10px 6px;
}
.duo-pane[data-duo-pane="stats"] .duo-stat-num {
    font-size: 20px;
}

/* ====================================================================
   ITER 5.999l: Dezenter Footer-Link im Duell-Modal -> /duelle Uebersicht
   ==================================================================== */
.duel-modal-footer-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    padding: 10px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-top: 1px solid var(--border);
    transition: color 0.18s ease;
}
.duel-modal-footer-link:hover {
    color: var(--accent);
}

/* ====================================================================
   ITER 5.999o: Modal Top-Tabs (Neues Duell / Laufende / Historie)
   + Trennlinien zwischen Mode-Tabs + Schwerter-Belohnungen-Info
   ==================================================================== */

/* === Top-Tabs unter dem Header === */
.duel-top-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    padding: 0;
    margin: 0;
    /* Iter V.6: Tab-Nav darf nicht den Body verdraengen - feste Hoehe.
       Flex-Layout der Modal-Card: Header (auto) + Tab-Nav (auto) + Body (1 1).
       Ohne diese Regel kann das Tab-Nav schrumpfen oder wachsen. */
    flex: 0 0 auto;
    /* Iter V.6: Sticky innerhalb der Card damit Tab-Nav beim Scrollen
       sichtbar bleibt (Body scrollt unter den Tabs durch) */
    position: sticky;
    top: 0;
    z-index: 1;
}
.duel-top-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 8px;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}
.duel-top-tab:hover {
    color: var(--text);
    background: rgba(3, 215, 226, 0.05);
}
.duel-top-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: rgba(3, 215, 226, 0.06);
}
.duel-top-tab-label {
    font-size: 14px;
    font-weight: 700;
}
.duel-top-tab-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 7px;
    border-radius: 999px;
}
.duel-top-tab.is-active .duel-top-tab-count {
    background: rgba(3, 215, 226, 0.18);
    color: var(--accent);
}
[data-theme="light"] .duel-top-tab-count {
    background: rgba(0, 0, 0, 0.06);
}

/* === Top-Panes (Inhalt der Tabs) === */
.duel-top-pane {
    display: none;
}
.duel-top-pane.is-active {
    display: block;
}

/* === Trennlinien zwischen Mode-Tabs === */
.duel-mode-tabs {
    display: flex;
    gap: 0;  /* Iter 5.999o: Gap raus, mit Border-Trennung */
    margin: 14px 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    position: relative;
}
.duel-mode-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 4px;
    cursor: pointer;
    color: var(--text-dim);
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.18s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
}
/* Trennlinien zwischen Tabs - dünne Linie auf der rechten Seite */
.duel-mode-tab:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--border);
}
.duel-mode-tab.is-active::after,
.duel-mode-tab.is-active + .duel-mode-tab::after {
    /* Bei aktivem Tab keine Trennlinien daneben */
    opacity: 0;
}
.duel-mode-tab:hover {
    color: var(--text);
    background: rgba(3, 215, 226, 0.05);
}
.duel-mode-tab.is-active {
    background: var(--bg-card);
    color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* === Schwerter-Belohnungen-Info-Box === */
.duel-rewards-info {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
}
.duel-rewards-info h4 {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.duel-rewards-info ul {
    margin: 0;
    padding-left: 16px;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
}
.duel-rewards-info li {
    margin: 3px 0;
}
.duel-rewards-info strong {
    color: var(--text);
}

/* === Section-Title in Tabs 2/3 === */
.duel-section-title {
    margin: 12px 0 10px;
    font-size: 13px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.duel-section-title:first-child {
    margin-top: 0;
}

/* === Empty-State === */
.duel-empty {
    text-align: center;
    color: var(--text-dim);
    padding: 24px 16px;
    margin: 0;
    font-size: 14px;
}
.duel-empty small {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
}

/* ====================================================================
   ITER v6.33: DUELL-MODAL — MOBILE-OPTIMIERUNG
   --------------------------------------------------------------------
   Behebt:
   1. Modal-Card nutzt vollen Screen auf Handy (kein 16px-Padding-Verlust)
   2. iOS Safe-Area (Notch oben + Home-Indicator unten) wird beruecksichtigt
   3. Bottom-Nav (Tab-Bar) ueberlappt das Modal nicht mehr
   4. Body-Scroll im Hintergrund wird gesperrt waehrend Modal offen
   5. Top-Tabs bleiben bei langer Liste (Historie) immer sichtbar (sticky)
   6. Mode-Tabs (Speed/Battle/Lottery) brechen bei sehr schmalen Screens
      nicht mehr unleserlich
   7. Touch-Targets: Annehmen/Ablehnen-Buttons mind. 40px hoch
   8. Body kann momentum-scrollen (-webkit-overflow-scrolling: touch)
   ==================================================================== */

/* === Hintergrund-Scroll sperren wenn IRGENDEIN ig-modal offen ist ===
   Wir setzen das per :has(...) auf <body>. Browser ohne :has fallen
   einfach zurueck (Scroll bleibt moeglich, kein Bruch).
   Iter v6.33: nur wenn ein NICHT verstecktes Modal existiert. */
@supports selector(:has(*)) {
    body:has(.ig-modal:not([hidden])) {
        overflow: hidden;
        /* iOS: position fixed waere besser, aber dann scrollt die Seite
           dahinter beim Schliessen zum Anfang. overflow:hidden reicht
           in Praxis fuer alle modernen iOS-Versionen. */
    }
}

/* === Duell-Modal: Mobile-Layout (<= 640px) === */
@media (max-width: 640px) {
    /* Iter v6.48: Modal buendig an Nav-Oberkante andocken (kein Spalt). */
    .ig-modal {
        padding: 8px 8px 0 8px;
        padding-top: max(8px, env(safe-area-inset-top));
        align-items: flex-end;
        z-index: 9999;
    }

    /* Iter v6.41: Mobile Duell-Modal verhaelt sich jetzt wie cta-modal-card.
       Die Card uebernimmt Bottom-Sheet-Look aus modals-v6.css (dockt unten an,
       oben gerundet, max-height = dvh - bottom-nav). KEIN height:100% mehr -
       sonst scrollt der ganze Wrapper inkl. Header mit. */
    .duel-modal-card {
        max-width: 100% !important;
        width: 100%;
        /* height/max-height: 100% raus - Bottom-Sheet-Logik in modals-v6.css
           setzt jetzt korrekt max-height: calc(100dvh - 96px - safe-area). */
    }

    /* Sehr kleine Hoehen (Landscape-Handy): Header kompakter, Body scrollt.
       Iter v6.41: border-radius hier nicht mehr setzen - modals-v6.css macht
       schon das Bottom-Sheet-Rounding (18px 18px 0 0). */
    @media (max-height: 600px) {
        .ig-modal-header {
            padding: 10px 12px;
        }
        .ig-modal-header h3 {
            font-size: 15px;
        }
    }

    /* Body scrollbar mit iOS-Momentum */
    .duel-modal-card .ig-modal-body {
        padding: 12px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;  /* Scroll nicht aus Modal rauspropagieren */
    }

    /* Top-Tabs (Neues Duell / Aktuelle / Historie) - kompakter */
    .duel-top-tab {
        padding: 10px 4px;
        font-size: 13px;
        /* min-height fuer Touch-Target */
        min-height: 44px;
    }
    .duel-top-tab-label {
        font-size: 13px;
    }
    .duel-top-tab-count {
        font-size: 10px;
        padding: 1px 6px;
    }

    /* Mode-Tabs (Speed / Battle / Lottery) - kompakter, nicht zu schmal */
    .duel-mode-tabs {
        margin: 10px 0;
    }
    .duel-mode-tab {
        padding: 8px 2px;
        gap: 2px;
        min-height: 56px;
    }
    .duel-mode-tab-icon {
        font-size: 18px;
    }
    .duel-mode-tab strong {
        font-size: 12px;
    }
    .duel-mode-tab small {
        font-size: 10px;
        line-height: 1.2;
        text-align: center;
    }

    /* Karten in "Aktuelle" / "Historie" - mehr Abstand zwischen Tap-Targets */
    .duel-card {
        padding: 10px;
    }

    /* Annehmen / Ablehnen Buttons in Einladungs-Karte: voll ausreichende Hoehe */
    .duel-card-actions .btn-sm {
        min-height: 40px;
        padding: 8px 14px;
        font-size: 13px;
    }

    /* Form-Selects (Gegner-Auswahl) - groesser fuer Touch */
    .duel-opp-select {
        min-height: 44px;
        font-size: 15px;  /* iOS: <16px triggert Auto-Zoom! 15px geht knapp */
    }

    /* Wichtig: Inputs duerfen iOS Auto-Zoom NICHT triggern */
    .duel-modal-card input[type="text"],
    .duel-modal-card input[type="number"],
    .duel-modal-card select,
    .duel-modal-card textarea {
        font-size: 16px;  /* >= 16px verhindert iOS-Zoom beim Fokus */
    }

    /* Submit-Buttons (Speed-Duell starten / etc.) - dicker fuer Touch */
    .duel-start-btn,
    .duel-lottery-btn {
        min-height: 48px;
        font-size: 15px;
    }
}

/* === Sehr kleine Screens (iPhone SE 1. Gen, 320px breit) === */
@media (max-width: 360px) {
    .duel-top-tab-label {
        font-size: 12px;
    }
    .duel-mode-tab small {
        display: none;  /* Bei 320px nur Icon + Titel, sonst zu eng */
    }
    .duel-mode-tab strong {
        font-size: 11px;
    }
    .duel-modal-card .ig-modal-body {
        padding: 10px;
    }
}

/* === Top-Tabs bleiben sticky beim Scrollen — Sicherheits-Override ===
   Die Basis-Regel hat das schon, aber wenn der Body sehr lang wird
   (Historie mit vielen Duellen), garantieren wir hier nochmal sticky. */
.duel-modal-card .duel-top-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-card);
}

/* ====================================================================
   ITER v6.34: ERGEBNIS-KARTEN IM "AKTUELLE"-TAB
   --------------------------------------------------------------------
   Beendete Duelle bleiben im Modal sichtbar bis User auf "OK" klickt.
   Card zeigt Ergebnis (Sieg/Verlust/Unentschieden/Ablauf) + Belohnung.
   ==================================================================== */

.duel-card-result {
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
    background: var(--bg-card);
    border: 2px solid;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.duel-card-result-won {
    border-color: #fbbf24;
    background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(251,191,36,0.02));
}
.duel-card-result-lost {
    border-color: #ef4444;
    background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.02));
}
.duel-card-result-draw {
    border-color: #94a3b8;
    background: linear-gradient(135deg, rgba(148,163,184,0.10), rgba(148,163,184,0.02));
}
.duel-card-result-expired {
    border-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(245,158,11,0.02));
}

.duel-result-banner {
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.5px;
    padding: 6px 0;
    border-radius: 8px;
}
.duel-card-result-won .duel-result-banner {
    color: #fbbf24;
    background: rgba(251,191,36,0.12);
}
.duel-card-result-lost .duel-result-banner {
    color: #ef4444;
    background: rgba(239,68,68,0.10);
}
.duel-card-result-draw .duel-result-banner {
    color: #94a3b8;
    background: rgba(148,163,184,0.12);
}
.duel-card-result-expired .duel-result-banner {
    color: #f59e0b;
    background: rgba(245,158,11,0.12);
}

.duel-result-reward {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: #fbbf24;
    padding: 4px 0;
}

/* ====================================================================
   ITER v6.34: BOX-CARD FORTSCHRITTSBALKEN
   --------------------------------------------------------------------
   Ersetzt Kosten/Belohnung-Anzeige in Box-Kacheln auf der Quest-Seite.
   Zeigt {approved}/{total} mit visueller Fuell-Bar.
   ==================================================================== */

.qx-card-progress {
    position: relative;
    width: 100%;
    height: 22px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 11px;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .qx-card-progress {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
}

.qx-card-progress-bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 11px 0 0 11px;
    transition: width 0.4s cubic-bezier(.4,1.6,.6,1);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
}

/* Bei 100% rechts auch sauber gerundet */
.qx-card-progress-bar[style*="width: 100%"] {
    border-radius: 11px;
}

.qx-card-progress-label {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    line-height: 22px;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    letter-spacing: 0.3px;
}

/* Erledigte Box (100%) - leuchtet golden */
.qx-card-progress-bar[style*="width: 100%"] {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
}

/* ====================================================================
   ITER v6.35: PACK-SHOP REDESIGN
   --------------------------------------------------------------------
   Header kompakter, Buttons mittig in Cards, Custom-Confirm-Modal,
   Light-Mode mit weissen Cards.
   ==================================================================== */

/* === Header === */
.pack-shop-head {
    text-align: center;
    margin-bottom: 18px;
}
.pack-shop-head h1 {
    font-size: 26px;
    margin: 0;
}
.pack-shop-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.pack-shop-wallet {
    background: rgba(3, 215, 226, 0.12);
    border: 1px solid rgba(3, 215, 226, 0.40);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    color: var(--text);
    font-size: 14px;
}
[data-theme="light"] .pack-shop-wallet {
    background: rgba(3, 215, 226, 0.10);
    color: #0a1418;
}
.pack-shop-history-link {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.15s;
}
.pack-shop-history-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}
[data-theme="light"] .pack-shop-history-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* === Card-Hintergrund Light-Mode wirklich weiss + sauberer Schatten === */
[data-theme="light"] .pack-card,
[data-theme="light"] .qx-card-quest.pack-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .pack-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}

/* === Pack-Card Layout: Body als Flex damit Button unten mittig === */
.pack-card {
    display: flex;
    flex-direction: column;
}
.pack-card .qx-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;  /* Body fuellt verbleibenden Platz */
}

/* Open-Form schiebt sich nach unten + zentriert sich */
.pack-open-form {
    margin-top: auto;  /* schiebt nach ganz unten in der Card */
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;  /* zentriert horizontal */
}
.pack-open-btn {
    /* Nicht volle Breite, sondern auto - aber min-width damits nicht zu schmal wird */
    width: auto;
    min-width: 200px;
    max-width: 100%;
    padding: 10px 20px;
    font-weight: 700;
}

/* === Custom Confirm Modal === */
.pack-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: pack-confirm-fade-in 0.2s ease-out;
}
.pack-confirm-overlay[hidden] { display: none; }
@keyframes pack-confirm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.pack-confirm-card {
    background: var(--bg-card);
    color: var(--text);
    border-radius: 16px;
    padding: 24px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    animation: pack-confirm-pop-in 0.25s cubic-bezier(.4,1.6,.6,1);
}
[data-theme="light"] .pack-confirm-card {
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
@keyframes pack-confirm-pop-in {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pack-confirm-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 8px;
}
.pack-confirm-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
}
.pack-confirm-text {
    margin: 0;
    color: var(--text-dim);
    font-size: 15px;
}
.pack-confirm-cost {
    margin: 12px 0 18px;
    font-size: 15px;
    color: var(--text);
    background: rgba(3, 215, 226, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
}
[data-theme="light"] .pack-confirm-cost {
    background: rgba(3, 215, 226, 0.08);
}
.pack-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.pack-confirm-actions .btn {
    flex: 1;
    max-width: 160px;
    padding: 11px 16px;
    font-weight: 700;
}

/* Mobile: Modal full-width-ish */
@media (max-width: 480px) {
    .pack-confirm-card {
        padding: 20px 18px;
    }
    .pack-confirm-actions {
        flex-direction: column;
    }
    .pack-confirm-actions .btn {
        max-width: 100%;
        width: 100%;
    }
    .pack-open-btn {
        min-width: 0;
        width: 100%;
    }
}

/* === Iter v6.35: Shop-Modal "Quests kaufen"-Card === */
.qx-card-img-cart-quests {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.18), rgba(8, 145, 178, 0.06));
}
.qx-card-cart-quests {
    border-color: rgba(3, 215, 226, 0.40);
}

/* Iter v6.36 / v6.41: Diamanten-Paket mit Bild statt Emoji-Icon.
   Iter v6.41: Bilder genauso gross wie Quest-Pack-Bilder (.qx-card-img) -
   nimmt die volle Card-Breite, quadratisch (aspect-ratio 1/1). */
.diamond-pkg-icon:has(img.diamond-pkg-img) {
    /* Wenn ein Bild drin ist: Container wird Quadrat-Box mit voller Breite */
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    box-sizing: border-box;
    margin: 0 auto 8px;
    font-size: 0;
    /* Subtiler Glow wie bei Quest-Pack-Cards damit transparente PNGs sich
       vom Card-Hintergrund abheben */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07), transparent 65%);
    border-radius: 14px;
}
[data-theme="light"] .diamond-pkg-icon:has(img.diamond-pkg-img) {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.04), transparent 65%);
}
.diamond-pkg-icon img.diamond-pkg-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 4px 12px rgba(3, 215, 226, 0.25));
    transition: transform 0.3s ease;
}
.diamond-pkg-card:hover .diamond-pkg-icon img.diamond-pkg-img {
    transform: scale(1.05);
}

/* ====================================================================
   ITER v6.36/v6.37: TOP-TABS auf der Quest-Seite
   3 Tabs: Quests / Favoriten / Quests erhalten
   Stil: Mini-Cards passend zu .qx-card mit Cyan-Akzent fuer aktiven Tab.
   Mobile-freundlich (44px Tap-Target, horizontal scrollbar bei Bedarf).
   ==================================================================== */

.qx-top-tabs {
    display: flex;
    gap: 12px;                  /* Iter v6.40: war 8px - mehr Abstand zwischen Tabs */
    margin: 8px 0 32px;          /* Iter v6.40: war 22px - mehr Abstand nach unten zur Sektion */
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;  /* Firefox */
}
.qx-top-tabs::-webkit-scrollbar { display: none; }

.qx-top-tab {
    flex: 1 1 0;
    min-width: max-content;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    min-height: 48px;  /* Tap-Target Mobile */
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, color 0.15s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    overflow: visible;
}

/* Hover (Desktop): Cards heben sich leicht (gleiches Verhalten wie .qx-card) */
.qx-top-tab:hover:not(.is-active):not([aria-selected="true"]) {
    transform: translateY(-1px);
    border-color: rgba(3, 215, 226, 0.35);
    color: var(--text);
}

/* Aktiver Tab: Iter v6.40: voller Cyan-Hintergrund - klar als aktiv erkennbar */
.qx-top-tab.is-active,
.qx-top-tab[aria-selected="true"] {
    color: #ffffff;
    border-color: #03d7e2;
    background: linear-gradient(135deg, #03d7e2 0%, #06b6c8 100%);
    box-shadow: 0 4px 16px rgba(3, 215, 226, 0.45);
}
[data-theme="light"] .qx-top-tab.is-active,
[data-theme="light"] .qx-top-tab[aria-selected="true"] {
    background: linear-gradient(135deg, #03d7e2 0%, #06b6c8 100%);
    color: #ffffff;
    border-color: #03d7e2;
    box-shadow: 0 4px 14px rgba(3, 215, 226, 0.40);
}

/* Cyan-Akzentlinie unten am aktiven Tab */
/* Iter v6.40: Akzentlinie unten entfernt - der ganze Tab ist jetzt Cyan-gefuellt */

/* Roter Counter-Badge bei "Quests erhalten" */
.qx-top-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
    animation: qx-tab-badge-pulse 2.0s ease-in-out infinite;
    margin-left: 2px;
}
/* Im aktiven Tab: weiss-Outline damit der rote Badge auf Cyan auffaellt */
.qx-top-tab.is-active .qx-top-tab-badge,
.qx-top-tab[aria-selected="true"] .qx-top-tab-badge {
    box-shadow: 0 0 0 2px #ffffff;
}
@keyframes qx-tab-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    50%       { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .qx-top-tab-badge { animation: none; }
}

/* Counter neben Tab-Namen "Favoriten (12/30)" - Iter v6.37 */
.qx-top-tab-count {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.7;
    margin-left: 2px;
}
/* Iter v6.40: Im aktiven Tab Counter heller weiss (Cyan-Hintergrund) */
.qx-top-tab.is-active .qx-top-tab-count,
.qx-top-tab[aria-selected="true"] .qx-top-tab-count {
    opacity: 0.92;
    color: #ffffff;
}

/* Tab-Pane Sichtbarkeit */
.qx-tab-pane[hidden] { display: none; }

/* Mobile: kompaktere Tabs, horizontal scrollbar wenn zu eng */
@media (max-width: 600px) {
    .qx-top-tabs {
        margin: 6px 0 26px;     /* Iter v6.40: war "6px -4px 18px" - mehr Abstand zur Sektion drunter */
        padding: 0;
        gap: 10px;              /* Iter v6.40: war 6px - mehr Luft zwischen Tabs */
    }
    .qx-top-tab {
        font-size: 13px;
        padding: 10px 12px;
        min-height: 46px;
        gap: 6px;
        border-radius: 12px;
    }
    /* Iter v6.40: Akzentlinie unten raus (Tab ist jetzt Cyan-gefuellt im aktiven Zustand) */
    .qx-top-tab-count {
        font-size: 11px;
    }
}

/* Sehr schmale Geräte (< 380px): Texte kleiner, Tabs weiter komprimiert */
@media (max-width: 380px) {
    .qx-top-tab {
        font-size: 12px;
        padding: 9px 8px;
    }
}

/* Buyable-Pack-Card: leicht abgehobener Stil */
.qx-card-buyable-pack {
    position: relative;
}



/* ====================================================================
   ITER v6.37: Register-Seite Erweiterungen (Feature-Mini, Info-Box)
   ==================================================================== */
.auth-features-mini {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 18px 0 12px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.auth-feature-mini {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.5;
}
.auth-feature-mini strong {
    color: var(--text);
}
.auth-feature-mini-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.auth-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 0 18px;
    padding: 14px 16px;
    background: rgba(3, 215, 226, 0.08);
    border: 1px solid rgba(3, 215, 226, 0.30);
    border-radius: 12px;
    color: var(--text);
}
.auth-info-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.auth-info-box strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
}
.auth-info-box small {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
    display: block;
}
.auth-info-box a {
    color: #03d7e2;
    text-decoration: underline;
}

@media (max-width: 540px) {
    .auth-features-mini { padding: 14px; }
    .auth-feature-mini { font-size: 13px; }
}

/* ====================================================================
   ITER v6.37: Foto-Rechte-Hinweis auf Capture-Seite
   ==================================================================== */
.capture-rights-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 16px;
    padding: 12px 14px;
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.30);
    border-radius: 12px;
}
.capture-rights-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
.capture-rights-text strong {
    display: block;
    font-size: 13.5px;
    margin-bottom: 3px;
    color: var(--text);
}
.capture-rights-text small {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
    display: block;
}
.capture-rights-text a {
    color: var(--accent);
    text-decoration: underline;
}

/* ====================================================================
   ITER v6.37: Rechtlicher Hinweis im Shop (Diamanten-Kauf)
   ==================================================================== */
.shop-legal-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 14px 0 22px;
    padding: 14px 16px;
    background: rgba(255, 140, 66, 0.08);
    border: 1px solid rgba(255, 140, 66, 0.32);
    border-radius: 12px;
}
.shop-legal-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
.shop-legal-text {
    flex: 1;
}
.shop-legal-text strong {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--text);
}
.shop-legal-text ul {
    margin: 0 0 8px;
    padding-left: 20px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim);
}
.shop-legal-text ul li + li {
    margin-top: 4px;
}
.shop-legal-text ul li strong {
    display: inline;
    font-size: inherit;
    margin-bottom: 0;
    color: var(--text);
}
.shop-legal-text small {
    display: block;
    font-size: 11.5px;
    color: var(--text-mute);
    line-height: 1.5;
}
.shop-legal-text a {
    color: var(--accent-warm, #ff8c42);
    text-decoration: underline;
}

/* ====================================================================
   ITER v6.37 / v6.43: Quick-Action-Modal - Fotokisten + Quests-erhalten Cards
   Iter v6.43: Eigener Cyan-Gradient-Hintergrund entfernt - jetzt greift der
   Standard-Glow von .qx-card-img (radial, sehr dezent), genauso wie bei
   Daily/Duell-Cards. Hochgeladene transparente PNGs sehen damit sauber aus.
   ==================================================================== */
.qx-card-img-fotokisten,
.qx-card-img-erhalten {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hintergrund kommt aus der Basis-Regel .qx-card-img - nicht ueberschreiben */
}
.qx-card-erhalten.has-pending-invite .qx-card-img-erhalten {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.18),
        rgba(239, 68, 68, 0.05));
    animation: qx-erhalten-pulse 2.0s ease-in-out infinite;
}
@keyframes qx-erhalten-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50%       { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10); }
}
@media (prefers-reduced-motion: reduce) {
    .qx-card-erhalten.has-pending-invite .qx-card-img-erhalten { animation: none; }
}

/* ====================================================================
   ITER v6.37: Pack-Buy-Confirm-Modal (im Tab "Quests erhalten")
   ==================================================================== */
.pack-buy-confirm-card {
    max-width: 420px;
}
.pack-buy-confirm-text {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 12px;
    text-align: center;
}
.pack-buy-confirm-content {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-dim);
    margin: 0 0 14px;
    text-align: center;
}
.pack-buy-confirm-wallet {
    background: rgba(3, 215, 226, 0.08);
    border: 1px solid rgba(3, 215, 226, 0.30);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 18px;
    font-size: 13.5px;
    text-align: center;
    color: var(--text);
}
.pack-buy-confirm-wallet strong {
    color: #03d7e2;
}
.pack-buy-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

/* ====================================================================
   ITER v6.42: No-Funds-Modal
   Wird global ueber window.showNoFundsModal() ausgeloest, sobald der User
   einen Diamanten-Kauf anstoesst aber zu wenig auf dem Konto hat.
   Stil: Same Look wie pack-buy-confirm-modal, mit Cyan-Akzent + Link
   zum Diamanten-Shop.
   ==================================================================== */
.no-funds-card {
    max-width: 400px;
}
.no-funds-icon {
    text-align: center;
    font-size: 48px;
    margin: 4px 0 12px;
    line-height: 1;
}
.no-funds-text {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 14px;
    text-align: center;
    color: var(--text);
}
.no-funds-balance {
    background: rgba(3, 215, 226, 0.06);
    border: 1px solid rgba(3, 215, 226, 0.25);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 16px;
    font-size: 13.5px;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.no-funds-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.no-funds-balance-row strong {
    color: #03d7e2;
    font-variant-numeric: tabular-nums;
}
.no-funds-balance-missing {
    border-top: 1px solid rgba(3, 215, 226, 0.20);
    padding-top: 6px;
    margin-top: 2px;
}
.no-funds-balance-missing strong {
    color: var(--danger, #ed4956);
    font-size: 16px;
}
.no-funds-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

/* Iter v6.37: Disabled-State für Buyable-Pack-Card (zu wenig Diamanten) */
.qx-card-buyable-pack.is-disabled {
    opacity: 0.65;
}
.qx-card-buyable-pack.is-disabled:hover {
    transform: none;
    border-color: var(--border);
    box-shadow: none;
}

/* ====================================================================
   ITER v6.40: Duell-Verfall-Hinweis (Pending/Accepted-Phase)
   ==================================================================== */
.duel-invite-expiry {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(255, 167, 38, 0.10);
    border: 1px solid rgba(255, 167, 38, 0.35);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.duel-invite-expiry-icon {
    display: none;  /* Icon ist schon im Text mit "⏱️ Anfrage verfaellt" */
}
.duel-invite-expiry-text {
    font-size: 14px;
    color: var(--text);
}
.duel-invite-countdown {
    font-variant-numeric: tabular-nums;
    color: #ffa726;
    font-weight: 700;
}
.duel-invite-expiry small {
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.4;
}
[data-theme="light"] .duel-invite-expiry {
    background: rgba(245, 124, 0, 0.08);
    border-color: rgba(245, 124, 0, 0.30);
}
[data-theme="light"] .duel-invite-countdown {
    color: #f57c00;
}

/* ====================================================================
   ITER v6.40: Duell-Detail-Seite Light-Mode-Anpassungen
   Die Duel-Detail-Seite hatte hardcoded Pastell-Farben die nur im Dark Mode
   gut aussehen. Im Light Mode wird das jetzt richtig kontrastreich.
   ==================================================================== */

[data-theme="light"] .alert-info {
    background: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.35);
    color: #1e40af;
}
[data-theme="light"] .alert-warn {
    background: rgba(245, 124, 0, 0.10);
    border-color: rgba(245, 124, 0, 0.35);
    color: #c2410c;
}
[data-theme="light"] .alert-success {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.35);
    color: #15803d;
}

/* Duel-Result Light-Mode */
[data-theme="light"] .duel-result.is-winner {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(3, 215, 226, 0.08));
    border: 2px solid rgba(34, 197, 94, 0.45);
}
[data-theme="light"] .duel-result.is-loser {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border);
}

/* Player-Winner-Highlight Light-Mode */
[data-theme="light"] .duel-player.is-winner {
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.40);
}

/* Action-Card Light-Mode (Cyan-akzentuierte Box) */
[data-theme="light"] .duel-action-card {
    background: rgba(3, 215, 226, 0.06);
    border: 1px solid rgba(3, 215, 226, 0.30);
}

/* Duel-Box-Info-Card Light-Mode */
[data-theme="light"] .duel-box-info-card {
    background: linear-gradient(135deg, rgba(237, 73, 86, 0.06), rgba(255, 153, 0, 0.04));
    border: 1px solid rgba(237, 73, 86, 0.25);
}

/* Duel-Verfall-Hinweis (Pending/Accepted-Phase) Light-Mode */
/* (war schon teilweise definiert - explizit hier nochmal sicher gestellt) */
[data-theme="light"] .duel-invite-expiry {
    background: rgba(245, 124, 0, 0.08);
    border-color: rgba(245, 124, 0, 0.30);
}
[data-theme="light"] .duel-invite-countdown {
    color: #c2410c;
}

/* Timer-Big im Light Mode auch klar lesbar */
[data-theme="light"] .duel-timer-big {
    color: #dc2626;  /* satter rot - auch auf weiss gut sichtbar */
}
[data-theme="light"] .duel-timer-big.duel-timer-ok    { color: #15803d; }
[data-theme="light"] .duel-timer-big.duel-timer-warn  { color: #c2410c; }
[data-theme="light"] .duel-timer-big.duel-timer-hot   { color: #b91c1c; }
[data-theme="light"] .duel-timer-big.duel-timer-low   { color: #991b1b; }
[data-theme="light"] .duel-timer-big.duel-timer-expired { color: #6b7280; }

/* Mini-Timer ebenfalls */
[data-theme="light"] .duel-timer.duel-timer-ok       { color: #15803d; }
[data-theme="light"] .duel-timer.duel-timer-warn     { color: #c2410c; }
[data-theme="light"] .duel-timer.duel-timer-hot      { color: #b91c1c; }
[data-theme="light"] .duel-timer.duel-timer-low      { color: #991b1b; }
[data-theme="light"] .duel-timer.duel-timer-expired  { color: #6b7280; }

/* Player-Status (Foto eingereicht) - Cyan auf weiss zu hell */
[data-theme="light"] .duel-player-status {
    color: #0891a8;
}

/* Running-Quest Box - 2px roter Border ist im Light-Mode sehr stark */
[data-theme="light"] .duel-running-quest {
    border-color: rgba(220, 38, 38, 0.65);
}

/* VS-Divider rot im Light-Mode auch passend */
[data-theme="light"] .duel-vs-divider {
    color: #dc2626;
}

/* Block-Warning fuer 24h-Sperre */
[data-theme="light"] .duel-limit-warning-block {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.30);
}

/* ====================================================================
   ITER v6.40: Duell-Listen-Cards Light-Mode-Anpassungen
   Im Quick-Action-Modal (Aktuelle/Historie) waren die Karten im Light-Mode
   schwer lesbar - die Pastell-Farben waren auf weiss zu hell.
   ==================================================================== */

/* === Status-Tags === */
[data-theme="light"] .duel-status-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}
[data-theme="light"] .duel-status-accepted {
    background: rgba(8, 145, 178, 0.12);
    color: #0e7490;
}
[data-theme="light"] .duel-status-running {
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
}
[data-theme="light"] .duel-status-decided {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}
[data-theme="light"] .duel-status-expired {
    background: rgba(107, 114, 128, 0.10);
    color: #4b5563;
}
[data-theme="light"] .duel-status-cancelled {
    background: rgba(107, 114, 128, 0.10);
    color: #4b5563;
}

/* === Duel-Card-Result (groesse Result-Cards in History) === */
[data-theme="light"] .duel-card-result {
    background: var(--bg-card);
}
[data-theme="light"] .duel-card-result-won {
    border-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.02));
}
[data-theme="light"] .duel-card-result-won .duel-result-banner {
    color: #b45309;
    background: rgba(245,158,11,0.12);
}
[data-theme="light"] .duel-card-result-lost {
    border-color: #dc2626;
    background: linear-gradient(135deg, rgba(220,38,38,0.06), rgba(220,38,38,0.01));
}
[data-theme="light"] .duel-card-result-lost .duel-result-banner {
    color: #b91c1c;
    background: rgba(220,38,38,0.10);
}
[data-theme="light"] .duel-card-result-draw {
    border-color: #6b7280;
    background: linear-gradient(135deg, rgba(107,114,128,0.06), rgba(107,114,128,0.01));
}
[data-theme="light"] .duel-card-result-draw .duel-result-banner {
    color: #4b5563;
    background: rgba(107,114,128,0.10);
}
[data-theme="light"] .duel-card-result-expired {
    border-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(245,158,11,0.01));
}
[data-theme="light"] .duel-card-result-expired .duel-result-banner {
    color: #b45309;
    background: rgba(245,158,11,0.10);
}

/* === Reward-Texte === */
[data-theme="light"] .duel-result-reward {
    color: #b45309;
}

/* === Tags (Random/Friend) === */
[data-theme="light"] .qx-duel-attached-list .active-duel-tag-random {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}
[data-theme="light"] .qx-duel-attached-list .active-duel-tag-friend {
    background: rgba(22, 163, 74, 0.14);
    color: #15803d;
}

/* === Pending-Card mit gelblichem Hintergrund - im Light-Mode kontrastreicher === */
[data-theme="light"] .qx-duel-attached-list .pending-duel-card,
[data-theme="light"] .duel-card-invite {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), transparent);
    border-color: rgba(245, 158, 11, 0.30);
}

/* === Hover-State im Light-Mode === */
[data-theme="light"] .qx-duel-attached-list .active-duel-link:hover {
    background: rgba(3, 215, 226, 0.08);
}

/* === Avatar-Kreise mit Initialen === */
[data-theme="light"] .duel-card-avatar {
    background: rgba(3, 215, 226, 0.10);
    color: #0e7490;
    border: 1px solid rgba(3, 215, 226, 0.30);
}

/* === Iter v6.43: Slot-Boost-UI (Duell-Tab + Shop) === */

/* Boost aktiv im Duell-Tab */
.duel-slot-boost-active {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    margin: 12px 0 14px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(255, 165, 0, 0.06));
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 10px;
}
.duel-slot-boost-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffd700, #ffa500);
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(255, 165, 0, 0.4);
}
.duel-slot-boost-active strong {
    display: block;
    font-size: 14px;
    color: #ffd700;
    margin-bottom: 2px;
}
.duel-slot-boost-active small {
    display: block;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
}

/* Hinweis (kein Boost aktiv) - dezenter */
.duel-slot-boost-hint {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 14px;
    margin: 12px 0 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border);
    border-radius: 10px;
}
.duel-slot-boost-hint-icon {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
}
.duel-slot-boost-hint strong {
    display: block;
    font-size: 13.5px;
    margin-bottom: 2px;
}
.duel-slot-boost-hint small {
    display: block;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 8px;
}
.duel-slot-boost-hint .btn {
    margin-top: 4px;
}

/* Shop-Spend: aktiver Boost-Hinweis */
.shop-slots-active-boost {
    margin: 8px 0 0;
    padding: 10px 14px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}
.shop-slots-active-boost strong {
    color: #ffd700;
}

/* Card Meta-Zeile (z.B. "⏱️ 7 Tage") */
.shop-card-meta {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 6px 0 10px;
    font-size: 12.5px;
    color: var(--text-dim);
}

/* Iter v6.43.2: Pool-Konflikt-Hinweis im Detail */
.duel-pool-conflict {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    margin: 0 0 16px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.12), rgba(20, 108, 254, 0.08));
    border: 1px solid rgba(3, 215, 226, 0.5);
    border-radius: 12px;
}
.duel-pool-conflict-icon {
    flex-shrink: 0;
    font-size: 28px;
    line-height: 1;
    margin-top: 2px;
}
.duel-pool-conflict strong {
    display: block;
    font-size: 15px;
    color: #03d7e2;
    margin-bottom: 4px;
}
.duel-pool-conflict p {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
}

/* Iter v6.43.6: Vereinfachte Duell-Erstellung - ein Form fuer alles */
.duel-simple-info {
    padding: 16px;
    margin: 0 0 18px;
    background: linear-gradient(135deg, rgba(20, 108, 254, 0.08), rgba(3, 215, 226, 0.06));
    border: 1px solid rgba(20, 108, 254, 0.3);
    border-radius: 12px;
}
.duel-simple-info h4 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--text-strong);
}
.duel-simple-info p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-mid);
}

/* Iter v6.43.6: Modus-Erklaerung im Duell-Detail (Speed vs Battle) */
.duel-mode-explainer {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    margin: 12px 0 18px;
    border-radius: 12px;
}
.duel-mode-explainer-speed {
    background: linear-gradient(135deg, rgba(20, 108, 254, 0.12), rgba(3, 215, 226, 0.08));
    border: 1px solid rgba(20, 108, 254, 0.45);
}
.duel-mode-explainer-battle {
    background: linear-gradient(135deg, rgba(255, 100, 200, 0.12), rgba(255, 165, 0, 0.08));
    border: 1px solid rgba(255, 100, 200, 0.45);
}
.duel-mode-explainer-icon {
    flex-shrink: 0;
    font-size: 28px;
    line-height: 1;
    margin-top: 2px;
}
.duel-mode-explainer strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}
.duel-mode-explainer-speed strong { color: #146cfe; }
.duel-mode-explainer-battle strong { color: #ff64c8; }
.duel-mode-explainer p {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-dim);
}

/* Vereinfachtes Form (kein Mode-Tabs mehr) */
.duel-simple-info {
    padding: 14px 16px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}
.duel-simple-info h4 {
    margin: 0 0 8px;
    font-size: 16px;
}
.duel-simple-info p {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-dim);
    line-height: 1.5;
}

/* Iter v6.43.11: Admin User-Suche */
.adm-user-search-form {
    margin: 16px 0 12px;
}
.adm-user-search-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.adm-user-search-input {
    flex: 1;
    min-width: 250px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 14px;
}
.adm-user-search-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.08);
}
.adm-search-result-info {
    margin: 8px 0 14px;
    padding: 10px 14px;
    background: rgba(20, 108, 254, 0.08);
    border: 1px solid rgba(20, 108, 254, 0.3);
    border-radius: 8px;
    font-size: 14px;
}
.adm-pagination {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin: 18px 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}
.adm-pagination-info {
    font-size: 13.5px;
    color: var(--text-dim);
}

/* Iter v6.43.11: Diamanten-Pakete im Admin-Panel */
.adm-diamond-packages {
    margin: 12px 0 14px;
    padding: 12px;
    background: rgba(255, 215, 0, 0.04);
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 10px;
}
.adm-diamond-pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.adm-diamond-pkg-form {
    margin: 0;
}
.adm-diamond-pkg-btn {
    width: 100%;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    position: relative;
    font-size: 13px;
}
.adm-diamond-pkg-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.4);
    transform: translateY(-2px);
}
.adm-pkg-icon {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 4px;
}
.adm-pkg-name {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
}
.adm-pkg-amount {
    color: #ffd700;
    font-weight: 600;
    margin: 4px 0;
    font-size: 13px;
}
.adm-pkg-amount small {
    color: #00d4aa;
    font-weight: 500;
}
.adm-pkg-price {
    color: var(--text-dim);
    font-size: 11.5px;
    margin-top: 2px;
}
.adm-pkg-badge {
    position: absolute;
    top: -8px;
    right: -4px;
    background: #146cfe;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}
.adm-pkg-badge-best {
    background: #00d4aa;
}
.adm-pkg-popular {
    border-color: rgba(20, 108, 254, 0.4);
}
.adm-pkg-best {
    border-color: rgba(0, 212, 170, 0.4);
}

/* Iter v6.43.13: Mystery-Hinweis vor Tunier-Start (Box+Quest noch unsichtbar) */
.duel-card-meta-mystery {
    justify-content: center;
}
.duel-card-mystery {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
}

/* Iter v6.43.14: Einheitliches Card-Design fuer "Wartet auf Tunier-Start" */
.duel-card-waiting {
    /* Gleicher Look wie duel-card-running, aber subtiler Cyan-Akzent
       um zu signalisieren "Wartezustand" */
    border-color: rgba(3, 215, 226, 0.35) !important;
    background: linear-gradient(135deg,
        rgba(3, 215, 226, 0.04),
        rgba(20, 108, 254, 0.03)
    ) !important;
}
.duel-card-waiting:hover {
    border-color: rgba(3, 215, 226, 0.55) !important;
}
.duel-card-cancel {
    margin-top: 12px;
    text-align: center;
}
.duel-card-cancel button {
    width: 100%;
}

/* Iter v6.43.16: Duell-Submit-Success Banner */
.duel-submit-success {
    padding: 16px 18px !important;
    margin: 0 0 18px;
}
.duel-submit-success strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}
.duel-submit-success p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.9;
}

/* ====================================================================
   ITER V.6.44: Pinnwand-Foto-Tiles - kein gelber Vollrahmen mehr
   Best-of, Duell-Sieg und Duell-Niederlage werden ueber dezente Badges
   oben rechts markiert statt ueber dicke gelbe Outlines/Borders.
   ==================================================================== */

/* Brutaler Override: ALLE Tiles bekommen einen neutralen Rahmen,
   auch is-best - der Stern-Badge oben rechts macht die Markierung. */
ul.ig-grid li.ig-grid-tile,
ul.ig-grid li.ig-grid-tile.is-best,
ul.ig-grid li.ig-grid-tile.is-best:hover,
.ig-grid-tile,
.ig-grid-tile.is-best,
.ig-grid-tile.is-best:hover {
    outline: none !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-color: var(--border, rgba(255,255,255,0.12)) !important;
}

/* Hover: Tuerkiser Rahmen, aber kraeftiger und dicker als der dezente Default */
ul.ig-grid li.ig-grid-tile:hover,
.ig-grid-tile:hover {
    border: 3px solid #03d7e2 !important;
    box-shadow: 0 0 0 1px rgba(3, 215, 226, 0.35), 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}

/* Duell-Sieger-Pseudo-Rahmen komplett killen */
.ig-tile-duel-won,
.ig-tile-btn.ig-tile-duel-won {
    /* falls die Klasse irgendwo noch dranbleibt: nichts mehr triggern */
}
.ig-tile-duel-won::before,
.ig-tile-btn.ig-tile-duel-won::before {
    content: none !important;
    display: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Best-of-Tab: dort sind ALLE Fotos is-best -> keine extra Markierung noetig.
   Hoechste Specificity ueber data-tab-pane Attribute, killt alle Reste. */
.ig-tab-pane[data-tab-pane="best"] ul.ig-grid li.ig-grid-tile,
.ig-tab-pane[data-tab-pane="best"] ul.ig-grid li.ig-grid-tile.is-best,
.ig-tab-pane[data-tab-pane="best"] ul.ig-grid li.ig-grid-tile:hover,
.ig-tab-pane[data-tab-pane="best"] ul.ig-grid li.ig-grid-tile.is-best:hover,
.ig-tab-pane[data-tab-pane="best"] .ig-grid-tile,
.ig-tab-pane[data-tab-pane="best"] .ig-grid-tile.is-best {
    outline: none !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: 1px solid var(--border, rgba(255,255,255,0.12)) !important;
}
.ig-tab-pane[data-tab-pane="best"] .ig-grid-tile::before,
.ig-tab-pane[data-tab-pane="best"] .ig-grid-tile::after,
.ig-tab-pane[data-tab-pane="best"] .ig-tile-btn::before,
.ig-tab-pane[data-tab-pane="best"] .ig-tile-btn::after {
    content: none !important;
    display: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* === Neue dezente Tile-Badges (oben rechts gestapelt) === */
.ig-tile-badge.ig-tile-best-mark,
.ig-tile-badge.ig-tile-duel-win-mark,
.ig-tile-badge.ig-tile-duel-loss-mark {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Best-of: MatLuk-Cyan */
.ig-tile-badge.ig-tile-best-mark {
    background: linear-gradient(135deg, #03d7e2, #02a8b0);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Duell gewonnen: gold (klassisch fuer Sieger) */
.ig-tile-badge.ig-tile-duel-win-mark {
    background: linear-gradient(135deg, #ffd700, #ff9900);
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Duell verloren: dezent rot */
.ig-tile-badge.ig-tile-duel-loss-mark {
    background: linear-gradient(135deg, #ed4956, #b8323d);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Wenn beide Marker gleichzeitig (Best-of UND Duell-Resultat) auftreten:
   Best-of bleibt rechts, Duell-Marker rueckt links daneben. */
.ig-tile-btn .ig-tile-best-mark + .ig-tile-duel-win-mark,
.ig-tile-btn .ig-tile-best-mark + .ig-tile-duel-loss-mark,
.ig-tile-btn .ig-tile-best-mark ~ .ig-tile-duel-win-mark,
.ig-tile-btn .ig-tile-best-mark ~ .ig-tile-duel-loss-mark {
    right: 42px;
}

/* ====================================================================
   ITER V.6.46: Login-Step-Layout (1 Schritt zur Zeit)
   ==================================================================== */
.login-step-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 18px 0 16px;
    padding: 14px 16px;
    background: rgba(3, 215, 226, 0.08);
    border: 1px solid rgba(3, 215, 226, 0.25);
    border-radius: 12px;
}
.login-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #03d7e2, #02a8b0);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(3, 215, 226, 0.3);
}
.login-step-intro > div:last-child {
    flex: 1;
    line-height: 1.4;
}
.login-step-intro strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--text);
}
.login-step-intro small {
    display: block;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
}
.login-newuser-hint {
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(255, 210, 63, 0.08);
    border-left: 3px solid var(--accent, #ffd23f);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-dim);
}
.login-step-back {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
}
.login-step-back a {
    color: var(--text);
    text-decoration: none;
    margin-left: 4px;
}
.login-step-back a:hover {
    text-decoration: underline;
}

/* ====================================================================
   ITER V.6.46: PWA-First Install-Block auf Login-Seite
   ==================================================================== */
.pwa-first-block {
    margin: 18px 0 8px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.10), rgba(2, 168, 176, 0.05));
    border: 1px solid rgba(3, 215, 226, 0.35);
    border-radius: 14px;
}
.pwa-first-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
.pwa-first-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #03d7e2, #02a8b0);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 3px 8px rgba(3, 215, 226, 0.4);
}
.pwa-first-text strong {
    display: block;
    font-size: 17px;
    margin-bottom: 4px;
    color: var(--text);
}
.pwa-first-text small {
    display: block;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
}
.btn-pwa-install {
    font-size: 16px;
    padding: 14px 18px;
}
.pwa-first-help {
    margin-top: 14px;
}
.pwa-first-help summary {
    cursor: pointer;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-dim);
    list-style: none;
    user-select: none;
}
.pwa-first-help summary::-webkit-details-marker {
    display: none;
}
.pwa-first-help summary::before {
    content: "ⓘ ";
    margin-right: 4px;
}
.pwa-first-help[open] summary {
    color: var(--text);
    margin-bottom: 8px;
}
.pwa-first-guides {
    display: grid;
    gap: 10px;
    padding: 4px 4px 8px;
}
.pwa-first-guide {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}
.pwa-first-guide strong {
    display: inline-block;
    margin-left: 6px;
    color: var(--text);
}
.pwa-first-guide small {
    display: block;
    margin-top: 4px;
    color: var(--text-dim);
}
.pwa-first-os {
    font-size: 18px;
}
.pwa-first-icon {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(3, 215, 226, 0.15);
    border-radius: 4px;
    margin: 0 2px;
}
.pwa-first-skip {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.pwa-first-skip:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(3, 215, 226, 0.4);
}
.pwa-first-skip:active {
    transform: scale(0.99);
}
.pwa-first-skip-icon {
    flex-shrink: 0;
    font-size: 22px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
.pwa-first-skip-text {
    flex: 1;
    line-height: 1.3;
}
.pwa-first-skip-text strong {
    display: block;
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
}
.pwa-first-skip-text small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-dim);
}
.pwa-first-skip-arrow {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--text-dim);
    transition: transform 0.15s, color 0.15s;
}
.pwa-first-skip:hover .pwa-first-skip-arrow {
    color: #03d7e2;
    transform: translateX(3px);
}

/* ====================================================================
   ITER V.6.46: Choice-Modal nach Skip-Klick (Anmelden / Mitmachen)
   ==================================================================== */
.pwa-choice-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.pwa-choice-modal.is-open {
    display: flex;
}
.pwa-choice-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.pwa-choice-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: var(--bg-card, #1a1d24);
    border: 1px solid rgba(3, 215, 226, 0.35);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    animation: pwaChoiceIn 0.18s ease-out;
}
@keyframes pwaChoiceIn {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.pwa-choice-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.pwa-choice-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}
.pwa-choice-title {
    margin: 0 0 4px;
    font-size: 20px;
    color: var(--text);
}
.pwa-choice-sub {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--text-dim);
}
.pwa-choice-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pwa-choice-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.1s, background 0.15s, border-color 0.15s;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}
.pwa-choice-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(3, 215, 226, 0.4);
}
.pwa-choice-btn:active {
    transform: scale(0.99);
}
.pwa-choice-btn-primary {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.15), rgba(2, 168, 176, 0.08));
    border-color: rgba(3, 215, 226, 0.5);
}
.pwa-choice-btn-primary:hover {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.22), rgba(2, 168, 176, 0.12));
}
.pwa-choice-btn-icon {
    flex-shrink: 0;
    font-size: 24px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
.pwa-choice-btn-primary .pwa-choice-btn-icon {
    background: rgba(3, 215, 226, 0.18);
}
.pwa-choice-btn-text {
    flex: 1;
    line-height: 1.3;
}
.pwa-choice-btn-text strong {
    display: block;
    font-size: 16px;
    color: var(--text);
}
.pwa-choice-btn-text small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-dim);
}

/* ====================================================================
   ITER V.0.7: Welcome-Modal fuer neue User (22 Diamanten Geschenk)
   Erscheint einmalig beim ersten Pinnwand-Besuch.
   ==================================================================== */
/* ====================================================================
   ITER V.0.7: Welcome-Modal (Neu-Design Mai 2026)
   - Sanfte Glow-Akzente (cyan + gelb) als Background-Effekt
   - X-Button als sauberer runder Kreis mit Border
   - Rundere Ecken (20px), mehr Whitespace
   - Primary-Button mit Cyan-Gradient + Schatten
   - Mobile-First (max-width 360px)
   ==================================================================== */
.welcome-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.welcome-modal.is-open {
    display: flex;
    animation: welcomeModalFadeIn 0.25s ease-out;
}
@keyframes welcomeModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.welcome-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.welcome-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 360px;
    background: var(--bg-card, #1a1a1a);
    border-radius: 20px;
    padding: 36px 24px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(3, 215, 226, 0.2);
    text-align: center;
    overflow: hidden;
    animation: welcomeModalPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes welcomeModalPop {
    0% { opacity: 0; transform: translateY(20px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dezente Glow-Effekte in den Ecken (rein dekorativ) */
.welcome-modal-content::before,
.welcome-modal-content::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.welcome-modal-content::before {
    top: -60px;
    left: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(3, 215, 226, 0.18), transparent 70%);
}
.welcome-modal-content::after {
    bottom: -80px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.10), transparent 70%);
}

/* X-Button sauber im Kreis oben rechts */
.welcome-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-dim, #a8a8a8);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.welcome-modal-close:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--text, #f5f5f5);
    border-color: rgba(255, 255, 255, 0.20);
}

/* Inhalt liegt ueber den Glows */
.welcome-modal-content > *:not(.welcome-modal-close) {
    position: relative;
    z-index: 1;
}

/* Konfetti-Emoji oben */
.welcome-modal-confetti {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 8px;
    animation: welcomeConfettiBounce 0.8s ease-out 0.2s both;
}
@keyframes welcomeConfettiBounce {
    0% { transform: translateY(-30px) rotate(-15deg); opacity: 0; }
    50% { transform: translateY(8px) rotate(8deg); opacity: 1; }
    100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

/* Titel */
.welcome-modal-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 500;
    color: var(--text, #f5f5f5);
    letter-spacing: -0.01em;
}

/* Untertitel-Zeile - kommt vor dem Geschenk */
.welcome-modal-subtitle {
    margin: 0 0 22px;
    font-size: 13px;
    color: var(--text-dim, #a8a8a8);
}

/* Geschenk-Box mit den Diamanten */
.welcome-modal-gift {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.12), rgba(3, 215, 226, 0.04));
    border: 0.5px solid rgba(3, 215, 226, 0.3);
    border-radius: 16px;
    padding: 22px 16px 18px;
    margin-bottom: 20px;
}
.welcome-modal-gift-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 6px;
}
.welcome-modal-gift-amount {
    font-size: 44px;
    font-weight: 500;
    line-height: 1;
    color: #03d7e2;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.welcome-modal-gift-label {
    font-size: 12px;
    color: var(--text-dim, #a8a8a8);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
}

/* Erklaerungstext linksbuendig fuer bessere Lesbarkeit */
.welcome-modal-text {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: #d4d4d4;
    text-align: left;
}
.welcome-modal-text strong {
    color: var(--text, #f5f5f5);
    font-weight: 500;
}

/* Buttons */
.welcome-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.welcome-modal-btn-primary {
    display: block;
    padding: 14px 20px;
    background: linear-gradient(135deg, #03d7e2, #02a8b0);
    color: #0a0a0a;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(3, 215, 226, 0.25);
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.welcome-modal-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(3, 215, 226, 0.35);
}
.welcome-modal-btn-primary:active {
    transform: translateY(0);
}
.welcome-modal-btn-later {
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: var(--text-dim, #a8a8a8);
    font-size: 13px;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.15s, color 0.15s;
}
.welcome-modal-btn-later:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text, #f5f5f5);
}

/* ====================================================================
   ITER V.0.7: Regeln & Sicherheit Seite (/account/regeln)
   Nutzt .legal-page als Basis-Layout (gleicher Look wie FAQ/Terms),
   nur dezente Akzent-Boxen fuer wichtige Hinweise.
   ==================================================================== */

/* Lead-Absatz oben */
.rules-page .rules-lead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dim);
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid #03d7e2;
    border-radius: 4px;
    margin: 0 0 24px;
}

/* Callout-Boxen fuer wichtige Hinweise (rot fuer Warnung, cyan fuer Tipp) */
.rules-callout {
    margin: 14px 0 18px;
    padding: 14px 16px;
    border-radius: 10px;
    line-height: 1.55;
}
.rules-callout strong {
    display: block;
    font-size: 15px;
}
.rules-callout-warning {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.35);
}
.rules-callout-warning strong {
    color: #ff8a8a;
}
.rules-callout-positive {
    background: linear-gradient(135deg, rgba(3, 215, 226, 0.12), rgba(2, 168, 176, 0.04));
    border: 1px solid rgba(3, 215, 226, 0.35);
}
.rules-callout-positive strong {
    color: #03d7e2;
}

/* Kleine Hint-Box (z.B. fuer rechtlichen Verweis) */
.rules-hint {
    margin: 8px 0 16px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-dim);
}

.rules-footer-meta {
    margin-top: 32px;
    text-align: center;
    color: var(--text-dim);
}

/* ====================================================================
   ITER V.0.7: User-Ban-System
   ==================================================================== */

/* === banned.html === */
.banned-page {
    max-width: 600px;
    margin: 30px auto;
    padding: 0 16px;
}
.banned-card {
    background: var(--bg-card, #1a1d24);
    border: 2px solid rgba(239, 68, 68, 0.4);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
}
.banned-icon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 8px;
}
.banned-card h1 {
    margin: 0 0 8px;
    color: #ff8a8a;
    font-size: 26px;
}
.banned-intro {
    color: var(--text-dim);
    margin: 0 0 22px;
}
.banned-details {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 22px;
    text-align: left;
}
.banned-detail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.banned-detail-row:last-child { border-bottom: none; }
.banned-detail-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.banned-detail-value {
    font-size: 15px;
    color: var(--text);
}
.banned-detail-highlight .banned-detail-value {
    font-weight: 600;
    color: #ffa3a3;
}
.banned-permanent .banned-detail-value {
    color: #ff5050;
    font-weight: 700;
}
.banned-info { text-align: left; }
.banned-info h2 {
    margin: 18px 0 8px;
    font-size: 17px;
    color: var(--text);
}
.banned-info p { line-height: 1.55; margin: 6px 0; }
.banned-info .hint {
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 10px;
}
.banned-footer {
    margin-top: 24px;
    text-align: center;
}

/* === Admin: Ban-Section === */
.adm-ban-section {
    margin-top: 24px;
    padding: 18px;
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
}
.adm-ban-section h2 { margin-top: 0; color: #ff8a8a; }

.adm-ban-active {
    background: rgba(239, 68, 68, 0.12);
    border: 1.5px solid rgba(239, 68, 68, 0.5);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.adm-ban-active-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #ffa3a3;
}
.adm-ban-active-icon { font-size: 20px; }
.adm-ban-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 14px;
}
@media (max-width: 600px) {
    .adm-ban-detail-grid { grid-template-columns: 1fr; }
}
.adm-ban-permanent {
    color: #ff5050;
    font-weight: 700;
}
.adm-ban-unban-form {
    background: rgba(255, 255, 255, 0.04);
    padding: 12px;
    border-radius: 8px;
}
.adm-ban-unban-form .field {
    margin-bottom: 10px;
}

.adm-ban-form-wrap {
    background: rgba(255, 255, 255, 0.03);
    padding: 14px 16px;
    border-radius: 10px;
}
.adm-ban-duration-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.adm-ban-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.adm-ban-radio:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}
.adm-ban-radio input[type="radio"]:checked + span {
    color: #03d7e2;
    font-weight: 600;
}
.adm-ban-radio:has(input:checked) {
    background: rgba(3, 215, 226, 0.12);
    border-color: rgba(3, 215, 226, 0.5);
}
.adm-ban-radio-danger:has(input:checked) {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.6);
}
.adm-ban-radio-danger:has(input:checked) span {
    color: #ff8a8a;
}
.btn-danger {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    border: none;
    margin-top: 10px;
}
.btn-danger:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}
.btn-success {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    border: none;
}

/* Ban-Historie-Tabelle */
.adm-ban-history {
    margin-top: 22px;
}
.adm-ban-history h3 { font-size: 16px; margin-bottom: 8px; }
.adm-ban-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.adm-ban-history-table th,
.adm-ban-history-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}
.adm-ban-history-table th {
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.adm-ban-row-active { background: rgba(239, 68, 68, 0.08); }
.adm-ban-row-lifted { background: rgba(34, 197, 94, 0.04); }
.adm-ban-row-expired { background: rgba(255, 255, 255, 0.02); color: var(--text-dim); }

.adm-ban-status-active { color: #ff8a8a; font-weight: 600; }
.adm-ban-status-lifted { color: #6ee7b7; font-weight: 600; }
.adm-ban-status-expired { color: var(--text-dim); }

.adm-ban-history-table small {
    display: block;
    color: var(--text-dim);
    font-size: 11px;
    margin-top: 2px;
}

/* /admin/banned-Liste */
.adm-ban-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: 14px;
}
.adm-ban-list-table th,
.adm-ban-list-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.adm-ban-list-table th {
    background: rgba(255, 255, 255, 0.04);
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}
.adm-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    margin-top: 20px;
}

/* ====================================================================
   ITER V.0.7: Announcement-Modal (Premium-Look mit Bild)
   Wird statt/zusaetzlich zum Banner angezeigt wenn show_as_modal=true.
   Frequenz wird via display_frequency + announcement_views gesteuert.
   ==================================================================== */
.ann-modal {
    position: fixed;
    inset: 0;
    z-index: 1095;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ann-modal.is-open {
    display: flex;
    animation: annModalFadeIn 0.25s ease-out;
}
@keyframes annModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.ann-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ann-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 360px;
    background: var(--bg-card, #1a1a1a);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
    animation: annModalPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes annModalPop {
    0% { opacity: 0; transform: translateY(20px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Type-spezifische Akzent-Borders + Glow */
.ann-modal-info     { box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(59,130,246,0.25); }
.ann-modal-warning  { box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(245,158,11,0.3); }
.ann-modal-promo    { box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(168,85,247,0.3); }
.ann-modal-success  { box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(74,222,128,0.3); }

/* X-Button */
.ann-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
    transition: background 0.15s;
}
.ann-modal-close:hover {
    background: rgba(0, 0, 0, 0.65);
}

/* Bild oben prominent */
.ann-modal-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #0a0a0a;
}
.ann-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Wenn kein Bild: grosser Icon-Banner mit Type-Farbverlauf */
.ann-modal-icon-banner {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ann-modal-info     .ann-modal-icon-banner { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.ann-modal-warning  .ann-modal-icon-banner { background: linear-gradient(135deg, #d97706, #f59e0b); }
.ann-modal-promo    .ann-modal-icon-banner { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.ann-modal-success  .ann-modal-icon-banner { background: linear-gradient(135deg, #15803d, #22c55e); }
.ann-modal-icon-large {
    font-size: 64px;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* Body-Wrap mit Padding (Bild hat kein Padding fuer full-width) */
.ann-modal-body-wrap {
    padding: 16px 24px 24px;
    text-align: center;
}

/* Type-Badge (Pille mit Icon) */
.ann-modal-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
    border: 0.5px solid;
}
.ann-modal-info .ann-modal-badge {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}
.ann-modal-warning .ann-modal-badge {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}
.ann-modal-promo .ann-modal-badge {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.4);
    color: #c4a3f8;
}
.ann-modal-success .ann-modal-badge {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.4);
    color: #86efac;
}

/* Titel + Text */
.ann-modal-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 500;
    color: var(--text, #f5f5f5);
    letter-spacing: -0.01em;
}
.ann-modal-text {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-dim, #a8a8a8);
    white-space: pre-line; /* Zeilenumbrueche aus body respektieren */
}

/* Buttons */
.ann-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ann-modal-btn-primary {
    display: block;
    padding: 14px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 12px;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.ann-modal-btn-info {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}
.ann-modal-btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
    color: #1a1a1a;
}
.ann-modal-btn-promo {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
}
.ann-modal-btn-success {
    background: linear-gradient(135deg, #22c55e, #15803d);
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.3);
}
.ann-modal-btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}
.ann-modal-btn-primary:active {
    transform: translateY(0);
}
.ann-modal-btn-later {
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: var(--text-dim, #a8a8a8);
    font-size: 13px;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.15s, color 0.15s;
}
.ann-modal-btn-later:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text, #f5f5f5);
}

/* ====================================================================
   ITER V.0.7 HOTFIX: Modal-Mittig-Garantie
   Schutz gegen Eltern-Container die position:fixed kapern koennten
   (transform/filter/perspective/will-change). Mit !important setzen
   wir Viewport-Bezug fest, egal was vorher kommt.
   ==================================================================== */
.welcome-modal,
.ann-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
}
.welcome-modal.is-open,
.ann-modal.is-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ====================================================================
   ITER V.0.7: Box-Fortschrittsbalken (in der Quest-Uebersicht)
   Dezenter Balken unter '{X}/{Y} erledigt' auf den Box-Karten.
   ==================================================================== */
.qx-card-progress {
    margin-top: 6px;
    height: 4px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.qx-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #03d7e2, #02a8b0);
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Wenn fertig - goldener Verlauf statt cyan */
.qx-card-progress-done .qx-card-progress-fill {
    background: linear-gradient(90deg, #ffd23f, #ff8c42);
    box-shadow: 0 0 6px rgba(255, 210, 63, 0.4);
}

/* ====================================================================
   ITER V.0.7: Icon-Picker im Admin (Box-Edit + ggf. weitere)
   Klick-bare Emoji-Vorschlaege gruppiert nach Themen.
   ==================================================================== */
.icon-picker {
    margin-top: 8px;
}
.icon-picker details {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
}
.icon-picker summary {
    cursor: pointer;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-dim);
    user-select: none;
    list-style: none;
}
.icon-picker summary::-webkit-details-marker { display: none; }
.icon-picker summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s;
}
.icon-picker details[open] summary::before {
    content: "▾ ";
}
.icon-picker-section {
    margin: 12px 0 8px;
}
.icon-picker-section strong {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-weight: 500;
}
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 4px;
}
.icon-pick {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.12s;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-pick:hover {
    background: rgba(3, 215, 226, 0.12);
    border-color: rgba(3, 215, 226, 0.4);
    transform: scale(1.1);
}
.icon-pick.is-active {
    background: rgba(3, 215, 226, 0.2);
    border-color: rgba(3, 215, 226, 0.6);
    box-shadow: 0 0 0 1px rgba(3, 215, 226, 0.5);
}

/* ====================================================================
   ITER V.0.7: Submission-Result-Modal (Glueckwunsch / Schade)
   Erscheint auf /quests sobald eine Submission beurteilt wurde.
   Gleicher Premium-Look wie Welcome-Modal + Broadcast-Modal.
   ==================================================================== */
.sm-modal {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 1090;
    display: none;
    padding: 16px;
}
.sm-modal.is-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: smModalFadeIn 0.25s ease-out;
}
@keyframes smModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.sm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.sm-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 360px;
    background: var(--bg-card, #1a1a1a);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
    animation: smModalPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes smModalPop {
    0% { opacity: 0; transform: translateY(20px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Akzent-Border-Glow je nach Approved/Rejected */
.sm-modal-approved {
    box-shadow: 0 20px 60px rgba(0,0,0,0.5),
                0 0 0 1px rgba(74,222,128,0.35),
                0 0 40px rgba(74,222,128,0.15);
}
.sm-modal-rejected {
    box-shadow: 0 20px 60px rgba(0,0,0,0.5),
                0 0 0 1px rgba(245,158,11,0.3);
}

/* X-Button */
.sm-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
    transition: background 0.15s;
}
.sm-modal-close:hover { background: rgba(0, 0, 0, 0.7); }

/* Foto-Header */
.sm-modal-photo {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #0a0a0a;
}
.sm-modal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Icon-Banner Fallback */
.sm-modal-icon-banner {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sm-modal-approved .sm-modal-icon-banner {
    background: linear-gradient(135deg, #15803d, #22c55e);
}
.sm-modal-rejected .sm-modal-icon-banner {
    background: linear-gradient(135deg, #92400e, #d97706);
}
.sm-modal-icon-large {
    font-size: 64px;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* Body-Wrap */
.sm-modal-body-wrap {
    padding: 20px 24px 24px;
    text-align: center;
}

/* Konfetti-Emoji oben */
.sm-modal-confetti {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 8px;
    margin-top: -24px;  /* ueberlappt etwas mit Foto-Header */
    animation: smConfettiBounce 0.8s ease-out 0.2s both;
}
@keyframes smConfettiBounce {
    0% { transform: translateY(-30px) rotate(-15deg); opacity: 0; }
    50% { transform: translateY(8px) rotate(8deg); opacity: 1; }
    100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

.sm-modal-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 500;
    color: var(--text, #f5f5f5);
    letter-spacing: -0.01em;
}
.sm-modal-approved .sm-modal-title { color: #6ee7b7; }
.sm-modal-rejected .sm-modal-title { color: #fcd34d; }

.sm-modal-subtitle {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--text-dim, #a8a8a8);
}

/* Belohnungs-Boxen */
.sm-modal-rewards {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.sm-modal-reward-item {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    flex: 1;
    max-width: 110px;
}
.sm-modal-reward-icon {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 4px;
}
.sm-modal-reward-amount {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--text, #f5f5f5);
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}
.sm-modal-reward-label {
    font-size: 11px;
    color: var(--text-dim, #a8a8a8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Titel-Freischaltung-Box */
.sm-modal-title-unlock {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255,210,63,0.15), rgba(255,140,66,0.08));
    border: 1px solid rgba(255,210,63,0.4);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    text-align: left;
}
.sm-modal-title-unlock-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}
.sm-modal-title-unlock-text {
    flex: 1;
    min-width: 0;
}
.sm-modal-title-unlock-text small {
    display: block;
    font-size: 11px;
    color: #ffd23f;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 2px;
}
.sm-modal-title-unlock-text strong {
    display: block;
    font-size: 16px;
    color: var(--text, #f5f5f5);
}

/* Reason-Box bei Rejection */
.sm-modal-reason-box {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    text-align: left;
}
.sm-modal-reason-label {
    display: block;
    font-size: 11px;
    color: #fcd34d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 4px;
}
.sm-modal-reason-text {
    font-size: 14px;
    color: var(--text, #f5f5f5);
    line-height: 1.5;
}
.sm-modal-text {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-dim, #a8a8a8);
}

/* Buttons */
.sm-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sm-modal-btn-primary {
    display: block;
    padding: 14px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 12px;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}
.sm-modal-btn-approved {
    background: linear-gradient(135deg, #22c55e, #15803d);
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.3);
}
.sm-modal-btn-rejected {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
    color: #1a1a1a;
}
.sm-modal-btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}
.sm-modal-btn-later {
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: var(--text-dim, #a8a8a8);
    font-size: 13px;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.15s, color 0.15s;
}
.sm-modal-btn-later:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text, #f5f5f5);
}

/* ====================================================================
   ITER V.0.7: Passwort-Login als Notausgang
   Aufklappbar damit Magic-Code-Flow primaer bleibt.
   ==================================================================== */
.login-fallback {
    margin-top: 24px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}
.login-fallback summary {
    cursor: pointer;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-dim, #a8a8a8);
    user-select: none;
    list-style: none;
}
.login-fallback summary::-webkit-details-marker { display: none; }
.login-fallback summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s;
}
.login-fallback details[open] summary::before,
.login-fallback[open] summary::before {
    content: "▾ ";
}
.login-fallback summary:hover {
    color: var(--text, #f5f5f5);
}

/* ====================================================================
   ITER V.0.7: REVIEW-PAGE Mobile Sticky Action-Bar
   Auf Mobile (<=720px) eine fixe Bar am unteren Rand mit den
   Bewerten-Buttons. Damit muss man nicht erst zu den Buttons runter
   scrollen.
   ==================================================================== */
.review-mobile-bar {
    display: none;  /* Auf Desktop unsichtbar */
}

@media (max-width: 720px) {
    .review-mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: var(--bg-card, #15171c);
        border-top: 1px solid var(--border, #2a2d35);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
        gap: 8px;
        z-index: 100;
    }
    .review-mobile-btn {
        flex: 1;
        min-height: 48px;
        padding: 12px 16px;
        font-size: 15px;
        font-weight: 700;
        border-radius: 10px;
        border: 2px solid transparent;
        cursor: pointer;
        font-family: inherit;
        transition: transform 0.1s, opacity 0.15s;
    }
    .review-mobile-btn:active {
        transform: scale(0.96);
    }
    /* Inaktive Buttons: nur Outline */
    .review-mobile-btn-pass {
        background: rgba(74, 222, 128, 0.15);
        color: #4ade80;
        border-color: rgba(74, 222, 128, 0.5);
    }
    .review-mobile-btn-reject {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        border-color: rgba(239, 68, 68, 0.5);
    }
    /* Aktiver Button (= aktuell ausgewaehltes Tab): voll farbig */
    .review-mobile-bar[data-active="pass"] .review-mobile-btn-pass {
        background: #4ade80;
        color: #051a0a;
        border-color: #4ade80;
    }
    .review-mobile-bar[data-active="reject"] .review-mobile-btn-reject {
        background: #ef4444;
        color: #1a0505;
        border-color: #ef4444;
    }
    /* Inhalt unten Platz lassen damit nichts hinter der Bar verschwindet */
    .adm main, .review-grid {
        padding-bottom: 88px !important;
    }
}

/* ====================================================================
   ITER V.0.7 (HARD-OVERRIDE): Bottom-Nav IMMER ganz unten, kein Puffer.
   Maximale Spezifitaet + !important damit nichts das ueberschreibt.

   Iter v6.45d: + transform-Stacking-Context als Containing-Block-Anker.
   In iOS-PWAs (display-mode standalone) verschieben Body/HTML-Layout-
   Aenderungen sonst den fixed-Containing-Block. transform: translateZ(0)
   pinnt die Nav an den ECHTEN Viewport, egal was Body/HTML machen.
   ==================================================================== */
.bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    padding-bottom: 0 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform;
    z-index: 10001 !important;
}