/* ══ SHARED PAGE STYLES ════════════════════════════════════════
   Gemeinsame CSS-Klassen, die auf mehreren Seiten identisch vorkommen.
   Ausgelagert aus den einzelnen <style>-Blöcken zur Cache-Optimierung.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Background (faq, topliste, news, 404) ── */
.page-bg {
    background:
        radial-gradient(ellipse 70% 40% at 50% -5%, rgba(244,194,61,.1) 0%, transparent 55%),
        linear-gradient(180deg, #060f04 0%, #0d1f0a 100%);
}

/* ── Section Badge (faq, topliste, news, impressum) ── */
.lp-section-badge {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.32rem .9rem; border-radius:999px;
    background:rgba(244,194,61,.08); border:1px solid rgba(244,194,61,.28);
    color:#f4c23d; font-size:.68rem; font-weight:800;
    letter-spacing:.14em; text-transform:uppercase;
}
.lp-section-badge svg { width:.85rem; height:.85rem; }

/* ── Hero Chip (faq, news) ── */
.hero-chip {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.3rem .85rem; border-radius:999px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    font-size:.7rem; font-weight:700; color:rgba(255,255,255,.45);
}
.hero-chip svg { width:.85rem; height:.85rem; color:#f4c23d; }

/* ── CTA Card (faq, news, impressum) ── */
.cta-card {
    position:relative; overflow:hidden; border-radius:22px;
    background:linear-gradient(140deg, #132e0f, #0d1f0a 60%);
    border:1px solid rgba(244,194,61,.22); padding:2.6rem 2rem; text-align:center;
}
.cta-card::before { content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(244,194,61,.12), transparent 65%); }

/* ── Icon Tile (shared base – pages may override size) ── */
.icon-tile {
    width:42px; height:42px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(145deg, rgba(244,194,61,.14), rgba(123,193,66,.1));
    border:1px solid rgba(244,194,61,.25); color:#f4c23d;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.icon-tile svg { width:1.2rem; height:1.2rem; }

/* ── Scroll Reveal (faq, topliste, news, impressum) ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── Auth / Form Styles (kontakt, passwort-vergessen) ── */
.auth-label { display:block; font-size:.66rem; font-weight:800; letter-spacing:.12em;
    text-transform:uppercase; color:rgba(123,193,66,.75); margin-bottom:.4rem; }
.auth-field { position:relative; }
.auth-field > svg { position:absolute; left:.95rem; top:50%; transform:translateY(-50%);
    width:1rem; height:1rem; color:rgba(123,193,66,.5); pointer-events:none; transition:color .2s; }
.auth-field:focus-within > svg { color:#f4c23d; }
.auth-input { width:100%; background:rgba(0,0,0,.35); border:1px solid rgba(123,193,66,.22);
    color:#fff; border-radius:12px; padding:.8rem 1rem .8rem 2.7rem; font-size:.88rem;
    transition:border-color .2s, box-shadow .2s; }
.auth-input::placeholder { color:rgba(255,255,255,.25); }
.auth-input:focus { outline:none; border-color:rgba(244,194,61,.55); box-shadow:0 0 0 3px rgba(244,194,61,.1); }
.auth-submit { width:100%; display:flex; align-items:center; justify-content:center; gap:.6rem;
    background:linear-gradient(135deg, #f4c23d, #e8a820); color:#0d1f0a;
    font-weight:900; font-size:.9rem; padding:.85rem; border-radius:13px;
    transition:all .22s; box-shadow:0 6px 20px rgba(244,194,61,.2); }
.auth-submit svg { width:1rem; height:1rem; }
.auth-submit:hover:not(:disabled) { filter:brightness(1.1); transform:translateY(-1px); }
.auth-submit:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.auth-note { display:flex; gap:.6rem; align-items:flex-start; border-radius:11px;
    padding:.7rem .9rem; font-size:.74rem; line-height:1.6; }
.auth-note svg { width:.95rem; height:.95rem; flex-shrink:0; margin-top:.1rem; }
.auth-note.err { background:rgba(180,40,40,.15); border:1px solid rgba(240,90,90,.4); color:#f5a3a3; }
.auth-note.ok { background:rgba(60,140,50,.15); border:1px solid rgba(123,193,66,.4); color:#a8d97f; }