/**
 * CQ Warteliste — Gast-Optik (WL-B1, WL-B4, WL-B7)
 *
 * Das ist KEINE Verwaltungs-Oberfläche. Verbindliche Regeln der Marke,
 * abgenommen am 25.08.2026 (Referenz: wl-mockup.html, Abschnitt .site):
 *
 *   · Schrift: Formular. Kommt über --font-primary aus tokens.css des
 *     Themes; der Rückfall-Stapel steht hier trotzdem, damit die Seite
 *     auch ohne Theme lesbar bleibt.
 *   · Farben: Schwarz #000, Flächen #0A0A0A / #111, Weiß, Gold #B29474.
 *     Sonst nichts.
 *   · border-radius: 0. Überall. Ausnahmslos.
 *   · GROSSBUCHSTABEN nur an Labels und Knöpfen, mit Sperrung. Niemals im
 *     Fließtext.
 *   · Gold sparsam: EIN Akzent je Einheit. Der Knopf ist gold ODER der
 *     Rahmen ist gold — nicht beides.
 *
 * Die Klassen tragen alle das Präfix cq-wl-, damit im Theme-Kontext nichts
 * kollidiert.
 */

:root {
    --cq-wl-bg: #000;
    --cq-wl-flaeche: #0a0a0a;
    --cq-wl-erhoben: #111;
    --cq-wl-rand: rgba(255, 255, 255, .12);
    --cq-wl-text: #fff;
    --cq-wl-gedaempft: #d4d4d4;
    --cq-wl-leise: #8f8f8f;
    --cq-wl-gold: #b29474;
    --cq-wl-gold-hell: #c8a886;
    --cq-wl-font: var(--font-primary, 'Formular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* ══ Grundformen ══════════════════════════════════════════════════════ */

.cq-wl-page {
    background: var(--cq-wl-bg);
    color: var(--cq-wl-text);
    font-family: var(--cq-wl-font);
    padding: clamp(28px, 6vw, 80px) clamp(16px, 4vw, 32px);
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.cq-wl-standalone { margin: 0; background: var(--cq-wl-bg); }

.cq-wl-card {
    width: 100%;
    max-width: 620px;
    background: var(--cq-wl-erhoben);
    border: 1px solid rgba(178, 148, 116, .35);
    border-radius: 0;
    padding: clamp(20px, 4vw, 34px);
}

.cq-wl-card--schmal { max-width: 520px; }

.cq-wl-eyebrow {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cq-wl-gold);
    margin-bottom: 10px;
}

.cq-wl-titel {
    font-family: var(--cq-wl-font);
    font-weight: 400;
    font-size: clamp(21px, 3.4vw, 28px);
    line-height: 1.25;
    letter-spacing: .01em;
    margin: 0 0 4px;
    color: var(--cq-wl-text);
    text-transform: none;
}

.cq-wl-titel-zeit {
    display: block;
    font-size: clamp(14px, 2vw, 16px);
    color: var(--cq-wl-gedaempft);
    margin-top: 6px;
    font-weight: 300;
}

.cq-wl-text {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--cq-wl-gedaempft);
    margin: 12px 0 0;
}

.cq-wl-text a, .cq-wl-abmeld a { color: var(--cq-wl-gold-hell); }

/* ══ Claim-Seite ══════════════════════════════════════════════════════ */

.cq-wl-frist {
    font-size: 11.5px;
    letter-spacing: .08em;
    color: var(--cq-wl-gold);
    margin-bottom: 14px;
    border-bottom: 1px solid var(--cq-wl-rand);
    padding-bottom: 10px;
}

.cq-wl-frist-rest { color: var(--cq-wl-leise); letter-spacing: .04em; }
.cq-wl-frist.is-knapp { color: #e6b892; }

.cq-wl-det {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    margin: 18px 0 0;
}

.cq-wl-det > div { min-width: 90px; }

.cq-wl-det dt {
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cq-wl-leise);
    margin: 0 0 3px;
}

.cq-wl-det dd {
    margin: 0;
    font-size: 15px;
    color: var(--cq-wl-text);
    font-weight: 400;
}

.cq-wl-warum {
    font-size: 12px;
    line-height: 1.6;
    color: var(--cq-wl-leise);
    border-left: 2px solid rgba(178, 148, 116, .4);
    padding-left: 11px;
    margin: 18px 0 0;
}

.cq-wl-klein {
    font-size: 11px;
    line-height: 1.6;
    color: var(--cq-wl-leise);
    border-top: 1px solid var(--cq-wl-rand);
    padding-top: 12px;
    margin: 18px 0 0;
}

.cq-wl-klein b { color: var(--cq-wl-gedaempft); font-weight: 500; }

.cq-wl-abmeld {
    font-size: 11px;
    color: #777;
    margin: 10px 0 0;
}

.cq-wl-wunsch {
    border: 1px solid var(--cq-wl-rand);
    background: var(--cq-wl-flaeche);
    padding: 12px 14px;
    margin: 16px 0 0;
}

.cq-wl-wunsch-lbl {
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cq-wl-gold);
    margin-bottom: 5px;
}

.cq-wl-wunsch-text { font-size: 13px; color: var(--cq-wl-gedaempft); line-height: 1.55; }

/* ══ Knöpfe ═══════════════════════════════════════════════════════════ */

.cq-wl-cta-row {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.cq-wl-btn {
    font-family: var(--cq-wl-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 12px 22px;
    cursor: pointer;
    border: 0;
    border-radius: 0;
    background: var(--cq-wl-gold);
    color: #000;
    text-decoration: none;
    display: inline-block;
    line-height: 1.2;
    transition: background .15s ease;
}

.cq-wl-btn:hover { background: var(--cq-wl-gold-hell); color: #000; }
.cq-wl-btn:focus-visible { outline: 2px solid var(--cq-wl-gold-hell); outline-offset: 2px; }
.cq-wl-btn[disabled] { opacity: .5; cursor: default; }

.cq-wl-btn--geist {
    background: transparent;
    border: 1px solid var(--cq-wl-rand);
    color: var(--cq-wl-gedaempft);
}

.cq-wl-btn--geist:hover { background: transparent; border-color: var(--cq-wl-gold); color: var(--cq-wl-text); }

/* ══ Meldungen ════════════════════════════════════════════════════════ */

.cq-wl-meldung { font-size: 13px; line-height: 1.6; margin-top: 14px; color: var(--cq-wl-gedaempft); }
.cq-wl-meldung:empty { margin-top: 0; }
.cq-wl-meldung.is-fehler { color: #e6a58c; }
.cq-wl-meldung.is-gut { color: var(--cq-wl-gold-hell); }

/* ══════════════════════════════════════════════════════════════════════
   WL-B1 — das eingeklappte Formular IM Buchungsflow
   ══════════════════════════════════════════════════════════════════════ */

/* Der Glöckchen-Knopf sitzt IM ausgebuchten Slot. Er ist der einzige Grund,
   warum ein belegter Slot überhaupt anklickbar ist — deshalb bekommt er
   eine eigene Trennlinie und die einzige Goldfarbe des Slots. */
.cq-slot .cq-wl-bell,
.cq-wl-bell {
    display: block;
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1px solid rgba(178, 148, 116, .3);
    font-family: var(--cq-wl-font);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cq-wl-gold);
    background: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    cursor: pointer;
    width: 100%;
}

.cq-wl-bell:hover { color: var(--cq-wl-gold-hell); }
.cq-wl-bell:focus-visible { outline: 2px solid var(--cq-wl-gold); outline-offset: 1px; }

.cq-wl-form {
    margin-top: 16px;
    border: 1px solid rgba(178, 148, 116, .35);
    background: var(--cq-wl-erhoben);
    border-radius: 0;
    padding: 16px;
    font-family: var(--cq-wl-font);
    color: var(--cq-wl-text);
}

.cq-wl-form h4 {
    margin: 0 0 3px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .04em;
    color: var(--cq-wl-text);
    text-transform: none;
}

.cq-wl-form .cq-wl-sub { font-size: 12px; color: var(--cq-wl-gedaempft); margin-bottom: 12px; line-height: 1.5; }

.cq-wl-grp { margin-bottom: 12px; }

.cq-wl-lb {
    display: block;
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cq-wl-gold);
    margin-bottom: 6px;
}

.cq-wl-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.cq-wl-chip {
    font-family: var(--cq-wl-font);
    font-size: 12px;
    border: 1px solid var(--cq-wl-rand);
    border-radius: 0;
    background: transparent;
    color: var(--cq-wl-gedaempft);
    padding: 7px 12px;
    cursor: pointer;
}

.cq-wl-chip.is-an {
    border-color: var(--cq-wl-gold);
    color: var(--cq-wl-text);
    background: rgba(178, 148, 116, .12);
}

.cq-wl-chip:focus-visible { outline: 2px solid var(--cq-wl-gold); outline-offset: 1px; }

.cq-wl-form input[type="text"],
.cq-wl-form input[type="email"],
.cq-wl-form input[type="tel"],
.cq-wl-form input[type="number"] {
    font-family: var(--cq-wl-font);
    font-size: 13px;
    background: var(--cq-wl-flaeche);
    border: 1px solid var(--cq-wl-rand);
    border-radius: 0;
    color: var(--cq-wl-text);
    padding: 9px 11px;
    width: 100%;
}

.cq-wl-form input::placeholder { color: #666; }
.cq-wl-form input:focus { outline: none; border-color: var(--cq-wl-gold); }

.cq-wl-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cq-wl-trio { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 8px; }

@media (max-width: 560px) {
    .cq-wl-duo, .cq-wl-trio { grid-template-columns: 1fr; }
}

.cq-wl-kanal { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--cq-wl-gedaempft); }
.cq-wl-kanal label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.cq-wl-kanal input { accent-color: var(--cq-wl-gold); }

/* Der Honigtopf. Nicht display:none — manche Bots überspringen genau das.
   Aus dem Bild geschoben und für Screenreader ausgeblendet. */
.cq-wl-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cq-wl-transparenz {
    font-size: 10.5px;
    color: var(--cq-wl-leise);
    line-height: 1.55;
    margin-top: 10px;
    border-top: 1px solid var(--cq-wl-rand);
    padding-top: 9px;
}

.cq-wl-transparenz b { color: var(--cq-wl-gedaempft); font-weight: 500; }

/* Der Leersuche-Zustand: dieselbe Einheit, nur ohne Slot darüber. */
.cq-wl-leer {
    border: 1px solid var(--cq-wl-rand);
    background: var(--cq-wl-flaeche);
    padding: 18px;
    text-align: center;
}

.cq-wl-leer p { color: var(--cq-wl-gedaempft); font-size: 13.5px; margin: 0 0 12px; line-height: 1.6; }