* { box-sizing: border-box; }
:root {
    --c-bg: #07031a; --c-panel: #120b2e; --c-border: #2e1d6b;
    --c-accent: #38e8ff; --c-on-accent: #1a1a1a; --c-text: #e5e7eb; --c-muted: #9ca3af;
    --font-body: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --space-1: 8px; --space-2: 16px; --radius: 10px;
}
body { font-family: var(--font-body); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #2e1d6b; border-radius: 9999px; }

/* Hintergrund: Verlauf und Raster, siehe rex.css */
.bg-brand {
    position: fixed;
    inset: 0;
    background-image: url('/assets/img/background-1280.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}
.bg-brand.bg-brand-dim { opacity: 0.10; }
.bg-content { position: relative; z-index: 1; }

.card {
    background: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: 14px;
}

.input {
    width: 100%;
    background: #07031a;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #e5e7eb;
}
.input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 2px rgba(56,232,255,.35); }
.btn:focus-visible, .tab:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--c-accent); color: #1a1a1a; padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.label { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #9ca3af; margin-bottom: 6px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
    cursor: pointer; border: none; transition: background-color .15s, opacity .15s;
}
.btn:hover { opacity: .88; }
.btn-primary { background: var(--c-accent); color: #1a1a1a; }
.btn-secondary { background: transparent; border: 1px solid var(--c-border); color: #d1d5db; }
.btn-danger { background: rgba(239,68,68,.15); color: #f87171; }
.btn-success { background: rgba(34,197,94,.15); color: #4ade80; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-icon { padding: 8px; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.badge-amber { background: rgba(217,119,6,.15); color: #fbbf24; }
.badge-blue { background: rgba(37,99,235,.15); color: #60a5fa; }
.badge-green { background: rgba(34,197,94,.15); color: #4ade80; }
.badge-red { background: rgba(239,68,68,.15); color: #f87171; }
.badge-gray { background: rgba(156,163,175,.15); color: #9ca3af; }

.tab { padding: 8px 16px; border-radius: 9999px; font-size: 13px; font-weight: 500; border: 1px solid var(--c-border); color: #9ca3af; white-space: nowrap; }
.tab.active { background: var(--c-accent); border-color: var(--c-accent); color: #1a1a1a; }

.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
    background: var(--c-panel); border: 1px solid var(--c-border); border-radius: 16px;
    width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 24px;
}
.hidden { display: none !important; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data-table th { text-align: left; padding: 10px 12px; color: #9ca3af; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--c-border); }
table.data-table td { padding: 12px; border-bottom: 1px solid #1a1a1a; color: #e5e7eb; }
table.data-table tr:hover td { background: rgba(255,255,255,.02); }

/* Rabatt-Karten */
.discount-chip { flex-direction: column; gap: 4px; padding: 4px; flex: 1 1 0; min-width: 0; background: transparent; border: 0; color: #d1d5db; font-size: 13px; font-weight: 500; }
.discount-chip.btn-primary { background: transparent; color: var(--c-accent); }
.discount-chip .discount-card { width: 100%; max-width: 84px; height: auto; border-radius: 8px; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.discount-chip.btn-primary .discount-card { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(56,232,255,.35); }
.discount-chip .coin { width: 56px; height: 56px; border-radius: 6px; border: 2px solid transparent; background: #1a1a1a center / cover no-repeat; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.discount-chip[data-percent="10"] .coin { background-image: url(../img/karten/karte-silber.webp); }
.discount-chip[data-percent="20"] .coin { background-image: url(../img/karten/karte-bronze.webp); }
.discount-chip[data-percent="30"] .coin { background-image: url(../img/karten/karte-gold.webp); }
.discount-chip[data-percent="40"] .coin { background-image: url(../img/karten/karte-platin.webp); }
.discount-chip[data-percent="50"] .coin { background-image: url(../img/karten/karte-rubin.webp); }
.discount-chip.btn-primary .coin { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(56,232,255,.35); }
.discount-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ic { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex-shrink: 0; }

.btn, .tab, .input, select.input { min-height: 44px; }
.btn-sm { min-height: 44px; }
.btn:active, .tab:active { transform: translateY(1px); opacity: .8; }
.btn-secondary:hover, .tab:hover { border-color: var(--c-accent); color: var(--c-text); }
a:not(.btn):hover { text-decoration: underline; }
.tab { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.cta-sticky { display: none; }
@media (max-width: 1023px) {
    .cta-sticky { display: inline-flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; min-height: 56px; font-size: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.6); }
    body { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { .btn:active, .tab:active { transform: none; } }