/*
 * Styles der Landingpage (nur index.html).
 * Bewusst NICHT in die @import-Kette von main.css aufgenommen: enthaelt
 * globale Overrides (Theme-Variablen hell/dunkel, *-Reset, body, .btn, .card),
 * die Editor/Account/QuizHub zerschiessen wuerden. index.html laedt diese
 * Datei per <link> direkt nach main.css.
 */
/* css/landing.css */

/* ─── Inter (lokal gehostet) ───────────────────────────────────────
 * Vorher per <link> von fonts.googleapis.com geladen: das uebertraegt bei
 * jedem Seitenaufruf die Besucher-IP an Google/USA ohne Einwilligung (DSGVO-
 * Risiko, u. a. LG-Muenchen-Urteil). Dateien liegen unter ../fonts/inter/,
 * jeweils latin (de/en/es/it) + cyrillic (uk) Subset pro Schriftschnitt.
 * ──────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter/inter-300-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter/inter-300-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter/inter-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter/inter-400-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter/inter-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter/inter-600-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter/inter-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter/inter-800-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ─── Landing Page Theme Variables ────────────────────────────────
 * These come AFTER main.css so they override base.css dark defaults.
 * base.css vars (--bg-nav, --text-main, etc.) are remapped to
 * light values here so that auth.css components look correct.
 * ──────────────────────────────────────────────────────────────── */
:root {
    /* Landing page–specific vars */
    --bg-color: #f8fafc;
    --surface-color: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --accent-green: #10b981;
    --accent-gold: #f59e0b;
    --accent-blue: #3b82f6;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Override base.css dark defaults → light */
    --bg-body: #f8fafc;
    --bg-nav: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --bg-hover: #f1f5f9;
    --text-highlight: #334155;
    --accent-color: #6366f1;
    --accent-hover: #4f46e5;
    --accent-active-bg: #e0e7ff;
    --accent-active-border: #6366f1;
    --accent-active-text: #3730a3;
    --bg-dropdown: #ffffff;
    --bg-header: #f1f5f9;
    --card-shadow: rgba(0, 0, 0, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --start-bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --blob-1: #a5b4fc;
    --blob-2: #818cf8;
    --modal-bg: #ffffff;
    --input-bg: #f8fafc;
    --container-bg: #ffffff;
    --warning-bg: #f59e0b;
    --error-border: #ef4444;
}

body.dark-theme {
    /* Landing page–specific vars (dark) */
    --bg-color: #0f172a;
    --surface-color: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);

    /* Override base.css `:root` dark vars that are already correct,
       but still needed because `:root` was overridden above with light values */
    --bg-body: #1a1a2e;
    --bg-nav: #0f0f1a;
    --text-main: #eaeaea;
    --text-muted: #94a3b8;
    --border-color: #2d2d44;
    --bg-hover: #1e293b;
    --text-highlight: #e2e8f0;
    --accent-color: #6366f1;
    --accent-hover: #4f46e5;
    --accent-active-bg: #1e3a5f;
    --accent-active-border: #38bdf8;
    --accent-active-text: #7dd3fc;
    --bg-dropdown: #1e293b;
    --bg-header: #0f172a;
    --card-shadow: rgba(0, 0, 0, 0.3);
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --start-bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --blob-1: #6366f1;
    --blob-2: #4f46e5;
    --modal-bg: #16213e;
    --input-bg: #1e293b;
    --container-bg: #16213e;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.6;
    /* Override base.css centering so landing page uses full width */
    align-items: stretch !important;
    min-height: 100vh;
}

/* ─── Sektions-"Banden" ──────────────────────────────────────────────
 * Trennt Hero/Dashboard, QuizHub und Preise optisch durch abwechselnde
 * Hintergruende: Grundfarbe (--bg-color, wie <body>) und ein Ton heller
 * (--surface-color, in beiden Themes eine Stufe heller als --bg-color).
 * display:flow-root verhindert Margin-Collapse der inneren Sektionen, damit
 * die Bandfarbe wirklich bis an den Rand reicht statt durch die Aussenraender
 * der Kind-Elemente "durchzubluten". ──────────────────────────────────── */
.landing-band {
    display: flow-root;
    width: 100%;
}

.landing-band--alt {
    background: var(--surface-color);
}

/* Gleicher Abstand vor der Ueberschrift wie bei .quizhub-section (90px),
   statt sich (wie zuvor) auf den zufaelligen UA-Default-margin von h2 zu
   verlassen. */
.landing-band--pricing {
    margin-top: 90px;
}

/* ─── Floating Navigation ────────────────────────────────────────── */
.navbar {
    position: fixed;
    top: calc(20px + var(--top-banner-height, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1500px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    transition: top 0.3s ease;
    /* #auth-header wird unten aus dem Flex-Fluss genommen (position: absolute);
       ohne min-height wuerde die Pille dadurch auf die Hoehe von .logo allein
       schrumpfen (36px Buttons vs. 24-34px Logo). */
    min-height: 56px;
}

/* Eigener Klassenname statt der globalen .hidden-Utility (base.css: display:
   none !important): eine Kollision mit .hidden hätte wegen !important die
   ganze Navbar abrupt unsichtbar gemacht statt sie per "top" sanft
   hochzuschieben (display:none kann nicht animiert werden). */
.navbar.navbar-scroll-hidden {
    top: -100px;
}

.logo {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Bildmarke (ersetzt frueheres SVG-Icon) - auf allen Breakpoints sichtbar,
   Schriftzug "OmegaQuiz" daneben wird nur auf Mobil ausgeblendet (siehe
   Media Query unten). Zwei Varianten (Q_01 hell / Q_02 dunkel), passend
   zum jeweiligen Theme umgeschaltet - Default (kein .dark-theme) ist auf
   der Startseite das helle Theme, siehe body.dark-theme in landing.css. */
.logo-img {
    display: none;
    height: 34px;
    width: auto;
    border-radius: 8px;
}
.logo-img-light { display: block; }
body.dark-theme .logo-img-light { display: none; }
body.dark-theme .logo-img-dark { display: block; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* #auth-header aus dem Flex-Fluss der Navbar herausnehmen und rechts andocken
   (auth.css macht es sonst position:fixed fuer die anderen Seiten). Dadurch
   traegt sein Inhalt (Anmelden-Button, Sprache, Theme) nie zur Breite der
   Navbar bei - bei laengeren Uebersetzungen (z.B. "Iniciar sesión") waechst
   der Block stattdessen einfach nach links, statt die Pille/Seite breiter
   zu machen oder horizontales Scrollen auszuloesen. .navbar bleibt dank
   position:fixed bereits Containing Block fuer dieses position:absolute. */
.navbar #auth-header {
    position: absolute;
    top: 50%;
    right: 24px;
    left: auto;
    transform: translateY(-50%);
    z-index: auto;
    padding: 0;
}

/* Buttons used in hero / pricing */
.btn {
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-text {
    background: transparent;
    color: var(--text-primary);
}

.btn-text:hover { text-decoration: underline; }

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-google {
    background-color: var(--surface-color);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-google:hover { background-color: var(--bg-hover); }

/* ─── Hero Section ───────────────────────────────────────────────── */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 120px auto 60px;
    padding: 0 24px;
    gap: 40px;
    min-height: 70vh;
}

.hero-content { flex: 1; }

.hero-cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

/* Gestapelte Mobil-CTAs (Anmelden / Als Gast fortsetzen) - siehe Media Query
   unten; auf Desktop-Breiten bleibt stattdessen .hero-cta-row sichtbar. */
.hero-cta-mobile { display: none; }

.hero-cta-guest {
    background: transparent;
    color: var(--text-secondary);
    flex-direction: column;
    gap: 2px;
}

.hero-cta-guest-icon {
    animation: hero-cta-guest-bounce 1.6s ease-in-out infinite;
}

@keyframes hero-cta-guest-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

.social-proof-kicker {
    display: inline-block;
    background: var(--border-color);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    background: linear-gradient(135deg, var(--primary-color), #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 32px;
    max-width: 90%;
}

.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

/* Hero-Karussell: kleine Varianten der Anmelde-Bilder (img/c1_sm.jpg …) */
.hero-carousel {
    position: relative;
    width: min(440px, 90%);
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-float);
    border: 1px solid var(--border-color);
    transform: rotate(2deg);
    transition: transform 0.3s ease;
}

.hero-carousel:hover {
    transform: rotate(0deg) scale(1.02);
}

.hero-carousel .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-carousel .slide.active {
    opacity: 1;
}

/* Dezenterer Overlay als im Auth-Modal: nur unten leicht abdunkeln (Dots) */
.hero-carousel .carousel-overlay {
    background: linear-gradient(to bottom, transparent 65%, rgba(0, 0, 0, 0.55) 100%);
    padding: 1.1rem;
}

/* ─── Section Titles ─────────────────────────────────────────────── */
/* margin-top explizit auf 0: ohne diese Zeile faellt der Browser auf den
   UA-Default (0.83em relativ zur eigenen font-size, hier ~53px) zurueck,
   der je nach Kontext unterschiedlich mit dem Abstand der umgebenden
   Sektion kollabiert. Der Sektionsabstand wird stattdessen einheitlich
   ueber margin-top der jeweiligen Sektion/Band gesteuert (siehe #pricing,
   .quizhub-section). */
.section-title {
    text-align: center;
    font-size: 2.4rem;
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--text-primary);
}

/* ─── Quiz Feed (dummy card UI — logic added later) ──────────────── */
.feed-container {
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.card {
    background: var(--surface-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-float);
}

.card-img-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    background-color: #cbd5e1;
}

.card-img { width: 100%; height: 100%; object-fit: cover; }

.badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(4px);
}

.badge.free    { background: rgba(16, 185, 129, 0.85); }
.badge.premium { background: rgba(245, 158, 11, 0.85); }
.badge.sale    { background: rgba(59, 130, 246, 0.85); }

.card-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    flex: 1;
}

.card-creator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.creator-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-color);
}

.creator-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.card-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.metric { display: flex; align-items: center; gap: 4px; }

/* ─── Pricing Section ────────────────────────────────────────────── */
/* Kurzer Call-to-Action unter der Überschrift "Wähle deinen Weg" */
.pricing-subtitle {
    text-align: center;
    color: var(--text-secondary);
    max-width: 560px;
    /* -8px: gleicher Titel->Untertitel-Abstand wie .quizhub-intro-text */
    margin: -8px auto 0;
    padding: 0 24px;
}

.pricing-container {
    /* War 1000px - die Seite ist inzwischen an anderer Stelle breiter
       geworden (Navbar/"Aktuell"-Grid liegen bei 1500px), die Pricing-Karten
       blieben dabei zurück und wirkten schmal/gedrungen im Vergleich. */
    max-width: 1200px;
    margin: 0 auto 100px;
    /* Oben Luft für die skalierte Featured-Karte + "Beliebtestes Paket"-Badge,
       damit nichts mehr in den Text darüber ragt. */
    padding: 48px 24px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    /* War "center": bei unterschiedlich hohen Karten (Premium ist durch
       Entwicklungshinweis + Coffee-Support-Block inzwischen deutlich hoeher
       als Free/Pro) fuehrte das zu unterschiedlich hoch platzierten Karten/
       Badges. "start" richtet alle drei oben buendig aus. */
    align-items: start;
}

.price-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 40px 36px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.price-card.featured {
    transform: scale(1.05);
    border: 2px solid var(--primary-color);
    box-shadow: var(--shadow-float);
    position: relative;
}

.featured-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.price-title  { font-size: 1.65rem; margin-bottom: 8px; color: var(--text-primary); }
.price-amount { font-size: 2.75rem; font-weight: 800; margin-bottom: 24px; color: var(--text-primary); }
.price-amount span { font-size: 1.05rem; color: var(--text-secondary); font-weight: 400; }

.feature-list {
    list-style: none;
    margin-bottom: 32px;
    text-align: left;
}

.feature-list li {
    position: relative;
    margin-bottom: 13px;
    padding-left: 28px;
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Marker: aktives Feature = grüner Haken, inaktives = graues Kreuz */
.feature-list li::before {
    content: "✅";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.9em;
}

/* Feature, die in diesem Tier nicht enthalten ist: ausgegraut + Kreuz */
.feature-list li.locked {
    opacity: 0.55;
    color: var(--text-secondary);
}

.feature-list li.locked::before {
    content: "❌";
}

/* Sammelzeile "Alle kostenlosen/Pro-Funktionen" am Kartenanfang: kein Haken,
   stattdessen als Trennlinie zum Rest der (Zusatz-)Features abgesetzt. */
.feature-list li.feature-list-heading {
    padding-left: 0;
    margin-bottom: 16px;
    padding-bottom: 12px;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.feature-list li.feature-list-heading::before {
    content: none;
}

/* Info-Button (blauer Kreis mit „?") neben komplizierten Begriffen */
.info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent-blue, #2f6bff);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    position: relative;
    vertical-align: middle;
}

.info-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 240px;
    background: var(--text-primary);
    color: var(--bg-color);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s;
    z-index: 60;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.info-tip:hover::after,
.info-tip:focus::after,
.info-tip.open::after {
    opacity: 1;
    visibility: visible;
}

/* Free-CTA im „Aktiv"-Zustand (registriert & angemeldet) sowie generell
   deaktivierte Pricing-Buttons (z.B. "Premium holen" solange "Bald"): */
.btn.is-current-plan,
.btn.btn-disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
    background: var(--border-color) !important;
    color: var(--text-secondary) !important;
    box-shadow: none;
}

/* ─── "Bald"-Paket (Premium): inaktives Design ───────────────────── */
.price-card.coming-soon {
    position: relative;
    border-style: dashed;
}

/* Inhalt abdunkeln/entfärben — das "Bald"-Badge und der Support-Bereich (echt
   klickbar, siehe .coffee-support) bleiben voll sichtbar. */
.price-card.coming-soon > *:not(.coming-soon-badge):not(.coffee-support) {
    opacity: 0.5;
    filter: grayscale(0.4);
}

/* Hinweis auf den Entwicklungsaufwand statt Preisangabe (Premium ist noch
   nicht verkaufbar) - bewusst im gedimmten Kartenbereich, nur der Support-
   Bereich darunter (.coffee-support) soll voll hervorstechen. */
.price-dev-note {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 0 0 24px;
}

/* Buy-Me-a-Coffee-Support auf der Premium-Karte: offizieller Button (fixe
   Maße vom BMC-Button-Generator) + QR-Code zum Scannen mit dem Smartphone. */
.coffee-support {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.coffee-support-btn {
    height: 60px;
    width: 217px;
}

.coffee-support-qr-caption {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 6px 0 0;
}

.coffee-support-qr {
    width: 140px;
    height: 140px;
    border-radius: 6px;
}

.coming-soon-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-blue);
    color: white;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ─── Eingeloggtes Aktions-Dashboard ─────────────────────────────── */
.dashboard {
    max-width: 1200px;
    margin: 0 auto;
    /* Platz für die fixierte Floating-Navbar (top: 20px + ~56px Höhe) plus
       eventuelle Top-Banner, damit die Überschrift nicht verdeckt wird. */
    padding: calc(110px + var(--top-banner-height, 0px)) 24px 110px;
    width: 100%;
}
.dashboard-title {
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 24px;
    color: var(--text-primary);
}
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.dashboard-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 24px;
    border-radius: 16px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    border-color: var(--primary-color);
}
/*.dropdown-icon { font-size: 1.4rem; }*/
.dashboard-card-icon { font-size: 2.4rem; }
.dashboard-card-title { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); }
.dashboard-card-desc { font-size: 0.9rem; color: var(--text-secondary); }

/* "Erstellen"-Karte fuer Gaeste: sichtbar, aber inaktiv (kein Editor ohne
   Registrierung) - Klick fuehrt stattdessen zur Kontoseite, siehe auth.js. */
.dashboard-card-disabled {
    cursor: pointer;
    opacity: 0.55;
}
.dashboard-card-disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-color);
}
.dashboard-card-lock-hint {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* ─── "Aktuell"-Sektion (Überschrift + Demo-Quizze) ──────────────── */
.quizhub-section {
    /* War 1200px - auf breiten Screens (z.B. 1920px) blieb dadurch links/rechts
       ca. 360px ungenutzter Rand stehen. 1500px senkt diesen Rand um ~40%. */
    max-width: 1500px;
    /* Bewusst großer Abstand nach oben, damit die Überschrift klar
       unterhalb von Hero/Dashboard sitzt. */
    margin: 90px auto 60px;
    padding: 0 24px;
    text-align: center;
    scroll-margin-top: 110px; /* Anker #quizhub nicht unter der Navbar */
}
.quizhub-intro-text {
    color: var(--text-secondary);
    margin: -8px auto 32px;
    max-width: 640px;
}
/* Grid liegt jetzt IN der Sektion: eigenes Padding/Margin sowie das engere
   max-width der Basisregel (siehe .quiz-cards-grid in home.css, 1200px)
   zurücknehmen - die Breite wird allein von .quizhub-section vorgegeben. */
.quizhub-section .quiz-cards-grid {
    max-width: none;
    padding: 0;
    margin-bottom: 48px;
    text-align: left;
}

/* ─── Creepy Button (Augen-Effekt) ───────────────────────────────── */
.creepy-btn { position: relative; display: inline-block; }
.creepy-btn .btn,
.creepy-btn .auth-btn { position: relative; z-index: 2; transition: transform 0.25s ease; transform-origin: left bottom; }
.creepy-btn:hover .btn { transform: rotate(-8deg); }
/* .auth-btn (Header-"Anmelden") ist deutlich schmaler als die Hero-CTA -
   bei gleichem Winkel oeffnet sich rechts kaum ein Spalt (Hebung skaliert
   mit der Breite), daher hier ein staerkerer Winkel fuer sichtbare Augen. */
.creepy-btn:hover .auth-btn { transform: rotate(-18deg); }

/* Wrapper mitverstecken, wenn auth.js den Anmelden-Button versteckt
   (sonst bliebe ein leeres Flex-Item mit doppeltem gap in der Navbar). */
.creepy-btn:has(> .auth-btn.hidden) { display: none; }

.creepy-eyes {
    position: absolute;
    right: 14px;
    bottom: 6px;
    transform: translateY(6px);
    display: flex;
    gap: 8px;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}
.creepy-btn:hover .creepy-eyes { animation: creepy-peek 1.6s ease forwards; }
.eye {
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
}
.pupil { width: 6px; height: 6px; border-radius: 50%; background: #111; }
.creepy-btn:hover .pupil { animation: creepy-look 1.6s ease forwards; }

@keyframes creepy-peek {
    0%   { opacity: 0; transform: translateY(6px); }
    12%  { opacity: 1; transform: translateY(0); }
    82%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(10px); }
}
@keyframes creepy-look {
    0%, 18% { transform: translateX(0); }
    34%     { transform: translateX(-3px); } /* schaut vorsichtig links */
    54%     { transform: translateX(3px); }  /* dann rechts */
    74%     { transform: translateX(0); }     /* dann auf den User (Mitte) */
    100%    { transform: translateX(0); }
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero { flex-direction: column; text-align: center; padding-top: 40px; }
    .hero h1 { font-size: 2.5rem; }
    .hero p { margin: 0 auto 32px; }
    .hero-visual { height: 350px; width: 100%; margin-top: 40px; }
    .price-card.featured { transform: scale(1); }
    .price-card { padding: 32px 28px; }
    .desktop-only { display: none; }
    .nav-actions { gap: 6px; }

    /* Kopfzeile: Schriftzug ausblenden, damit "Anmelden" + Sprach-/Theme-Toggle
       wieder ohne Umbruch passen - nur die Bildmarke bleibt sichtbar. */
    .logo-text-desktop { display: none; }

    /* Hero-CTAs: statt der Desktop-Reihe zwei zentrierte, gestapelte Pillen */
    .hero-cta-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
        margin-top: 8px;
    }
    .hero-cta-mobile .btn {
        justify-content: center;
        width: min(280px, 100%);
    }
}

/* ─── Footer ─────────────────────────────────────────────────────── */
footer {
    margin-top: auto;
    padding: 60px 24px;
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.footer-logo {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.footer-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s;
}

.footer-nav a:hover {
    color: var(--primary-color);
}

.footer-copy {
    display: block; /* overrides home.css .footer-copy flex-column (sonst stapeln die Spans) */
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0 auto;
    line-height: 1.6;
    text-align: center;
}

.footer-cc,
.footer-version {
    display: inline;
    font-size: 0.8rem;
    opacity: 0.8;
}

.footer-cc::before,
.footer-version::before {
    content: " · ";
    opacity: 0.6;
}

.footer-version {
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}