/* ══ Shared Section Layout ══ */
.cq-section { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:4rem 3rem; }
.cq-section-label { font-size:0.6rem; font-weight:500; letter-spacing:0.4em; text-transform:uppercase; color:var(--gold); margin-bottom:0.8rem; }
.cq-section-title { font-size:clamp(1.4rem,3vw,2rem); font-weight:100; letter-spacing:clamp(0.1rem,0.4vw,0.4rem); text-transform:uppercase; margin-bottom:0.6rem; }
.cq-section-sub { font-size:0.8rem; font-weight:300; color:rgba(255,255,255,0.55); line-height:1.7; max-width:550px; }
@media (max-width: 768px) { .cq-section { padding:3rem 1.5rem; } }

/* Extracted from 1772718842385_cage-quests-faq.html */

/* ═══════════════════════════════════════════════════
   1. HERO — compact
   ═══════════════════════════════════════════════════ */
.cq-faq-hero {
    position: relative;
    padding: calc(var(--header-height) + 6rem) 3rem 3rem;
    background: var(--surface);
    border-bottom: 1px solid var(--glass-border);
}
.cq-faq-hero-inner { max-width: 1200px; margin: 0 auto; }
.cq-faq-hero-label { font-size:0.6rem; font-weight:500; letter-spacing:0.4em; text-transform:uppercase; color:var(--gold); margin-bottom:1.5rem; }
.cq-faq-hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 100;
    letter-spacing: clamp(0.2rem, 0.8vw, 0.8rem);
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.cq-faq-hero-text { font-size:0.95rem; font-weight:300; color: rgba(255,255,255,0.7); line-height:1.8; max-width:820px; }

/* ═══ Search ═══ */
.cq-faq-search {
    margin-top: 2rem;
    position: relative;
    max-width: 500px;
}
.cq-faq-search-input {
    width: 100%;
    padding: 1rem 1.5rem 1rem 3rem;
    background: var(--glass-medium);
    border: 1px solid var(--glass-border);
    color: var(--white);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 300;
    outline: none;
    transition: border-color 0.3s;
}
.cq-faq-search-input:focus { border-color: var(--gold); }
.cq-faq-search-input::placeholder { color: rgba(255,255,255,0.55); }
.cq-faq-search-icon {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 0.85rem; opacity: 0.3;
}
@media (max-width: 768px) {
    .cq-faq-hero { padding: calc(var(--header-height-mobile) + 3.5rem) 1.5rem 2rem; }
}

/* ═══════════════════════════════════════════════════
   2. CATEGORY TABS
   ═══════════════════════════════════════════════════ */
.cq-faq-tabs {
    display: flex; gap: 0;
    max-width: 1200px; margin: 0 auto;
    padding: 0 3rem;
    border-bottom: 1px solid var(--glass-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cq-faq-tabs::-webkit-scrollbar { display: none; }
.cq-faq-tab {
    padding: 1.2rem 1.5rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s var(--ease);
}
.cq-faq-tab:hover { color: rgba(255,255,255,0.6); }
.cq-faq-tab.active { color: var(--white); border-bottom-color: var(--gold); }
@media (max-width: 768px) { .cq-faq-tabs { padding: 0 1.5rem; } .cq-faq-tab { padding: 1rem; } }

/* ═══════════════════════════════════════════════════
   3. FAQ ACCORDION
   ═══════════════════════════════════════════════════ */
.cq-faq-category { display: none; }
.cq-faq-category.active { display: block; }

.cq-faq-category-title {
    font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(178,148,116,0.15);
}

.cq-faq-item {
    border-bottom: 1px solid var(--glass-border);
}
.cq-faq-question {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.4rem 0;
    background: none; border: none;
    color: var(--white);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 300;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s;
    gap: 1rem;
}
.cq-faq-question:hover { color: var(--gold-light); }
.cq-faq-arrow {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    transition: all 0.3s var(--ease);
}
.cq-faq-item.open .cq-faq-arrow { transform: rotate(180deg); color: var(--gold); }
.cq-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
}
.cq-faq-answer-inner {
    padding: 0 0 1.8rem 0;
    font-size: 0.92rem;
    font-weight: 300;
    color: rgba(255,255,255,0.65);
    line-height: 1.85;
}
.cq-faq-answer-inner a { color: var(--gold); text-decoration: none; }
.cq-faq-answer-inner a:hover { text-decoration: underline; }

/* Search match highlighting */
.cq-faq-item.search-hidden { display: none; }
.cq-faq-highlight { background: rgba(178,148,116,0.2); color: var(--white); padding: 0 2px; }
.cq-faq-no-results {
    padding: 3rem 0;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 300;
    color: rgba(255,255,255,0.7);
    display: none;
}
.cq-faq-no-results.visible { display: block; }

/* ═══════════════════════════════════════════════════
   4. CTA
   ═══════════════════════════════════════════════════ */
.cq-faq-cta {
    text-align: center;
    padding: 4rem 3rem;
    background: var(--surface);
    border-top: 1px solid var(--glass-border);
}
.cq-faq-cta-title { font-size: clamp(1.3rem,2.5vw,1.7rem); font-weight:100; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:0.8rem; }
.cq-faq-cta-text { font-size:0.9rem; font-weight:300; color: rgba(255,255,255,0.55); margin-bottom:2rem; line-height:1.7; }
.cq-faq-cta-actions { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
@media (max-width: 768px) {
    .cq-faq-cta { padding: 3rem 1.5rem; }
    .cq-faq-cta-actions { flex-direction: column; }
    .cq-faq-cta-actions .cq-btn-primary, .cq-faq-cta-actions .cq-btn-ghost { width:100%; justify-content:center; }
}

/* ═══ FOOTER ═══ */


/* ──────────────────────────────────────────────────────────────
   Gliederung der FAQ-Seite.
   Die Kategorien sind jetzt h2, die Fragen h3 — vorher trug die
   Seite genau eine Ueberschrift fuer 35 Fragen. Optisch aendert
   sich nichts: die Klassen bringen ihre Groessen mit, hier werden
   nur die Standardabstaende der Ueberschriften-Tags entfernt.
   ────────────────────────────────────────────────────────────── */
h2.cq-faq-category-title {
    margin-top: 0;
    line-height: 1.4;
}

.cq-faq-qh {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}


/* ──────────────────────────────────────────────────────────────
   cq-faq-tabs umbrechen statt abschneiden.

   Mit sieben Reitern ueberschritt die Zeile die 1200 px des
   Containers. Sie war zwar scrollbar, aber die Bildlaufleiste ist
   ausgeblendet — am Schreibtisch sah man nur ein angeschnittenes
   "Gutscheine" und hatte keinen Hinweis, dass da noch etwas kommt.

   Ab Tablet umbricht die Zeile deshalb und wird zentriert; damit
   ist sie unabhaengig davon, wie viele Kategorien gepflegt sind.
   Auf dem Handy bleibt es beim seitlichen Schieben — vier Zeilen
   Reiter waeren dort schlechter — dafuer zeigt eine weiche Kante
   rechts an, dass es weitergeht.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    .cq-faq-tabs {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        row-gap: 0;
    }
    .cq-faq-tab {
        padding: 1.2rem 1.15rem;
        letter-spacing: 0.12em;
    }
}

@media (max-width: 768px) {
    .cq-faq-tabs {
        position: relative;
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }
}

/* Hinweis, wenn keine Kategorien gepflegt sind */
.cq-faq-leer {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.9;
    color: var(--muted);
    max-width: 60ch;
}

.cq-faq-leer a {
    color: var(--gold);
}


/* ──────────────────────────────────────────────────────────────
   Abstand zwischen gestapelten Themengruppen (Reiter "Alle").

   Der Umbau der Kategorietitel auf h2 nahm den Standard-margin-top
   (richtig fuer den Einzelfall) und damit den einzigen Abstand
   zwischen zwei Gruppen: der goldene Titel der naechsten Gruppe
   stiess direkt auf die Trennlinie der letzten Frage der vorigen.

   Bewusst margin-BOTTOM statt margin-top auf der Folgegruppe:
   js/faq.js blendet Kategorien ueber inline style.display aus, NICHT
   ueber die active-Klasse. Ein margin-top haette bei gefilterter
   Ansicht einen Vorlauf ueber der ersten sichtbaren Gruppe erzeugt,
   sobald die Gruppe davor ausgeblendet ist. Ein Kasten mit
   display:none erzeugt dagegen gar keinen Aussenabstand — die Regel
   wirkt damit genau zwischen zwei tatsaechlich sichtbaren Gruppen.
   (Nadja F1, 07.09.2026)
   ────────────────────────────────────────────────────────────── */
.cq-faq-category { margin-bottom: 4rem; }