/* ============================================================
   denschQ — Landing-CSS (11.09.2026)
   ============================================================
   NUR die zwei seiteneigenen Bühnen-Mockups (Präfix qb-) und der
   Kleinkram der Landing. Die alte denschq.css lädt die Landing NICHT
   mehr (App-CSS bleibt dort). Die Seite ist dunkel
   (html[data-stil=dunkel]) — die Mockups sind bewusst HELLE Karten,
   wie die Karten der Bibliothek (ddl-mockups.css).
   Bühne, Einflug, .zoom__item-Presets: ddl-buehne.css (SSOT).
   Die Einsatzpunkte (--ab je Element) stehen im <style> der Seite,
   hier steht nur das Aussehen.
   Farben: FARBEN.md Projekt 04 Berry — #9D174D auf Weiß, #DB2777 hell.
   ============================================================ */

/* ── Gemeinsame helle Karte ─────────────────────────────── */
.qb-karte {
    background: #fff; color: #1d1d1f;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(157, 23, 77, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.04);
    /* rotateX/rotateY der .zoom__item-Presets brauchen Tiefe am DIREKTEN Eltern */
    perspective: 600px;
    text-align: left;
}

/* ── (a) QR-Aufsteller: Tischaufsteller-Karte ───────────── */
.qb-auf { width: min(80vw, 300px); padding: 24px 24px 22px; text-align: center; }
.qb-auf-marke { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #6e6e73; }
.qb-auf-marke span { color: #9D174D; }
.qb-auf-titel {
    margin: 6px 0 16px;
    font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
    color: #1d1d1f;
}
/* Das QR-Muster: 21×21 Zellen (<i>), Suchmuster + Taktspuren + Pseudo-
   Rauschen kommen aus index.php — kein Bild, kein SVG. Modul 7 px →
   147 px, dazu 9 px Ruhezone. content-box, damit die 21 Spalten exakt
   in die Breite passen. */
.qb-qr {
    --m: 7px;
    box-sizing: content-box;
    display: grid; grid-template-columns: repeat(21, var(--m)); grid-auto-rows: var(--m);
    width: calc(21 * var(--m)); padding: 9px; margin: 0 auto;
    background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px;
}
.qb-qr i { display: block; }
/* der halbe Pixel Schatten schließt Haarrisse zwischen Modulen, wenn
   --mz (zoom) mobil auf krumme Pixel skaliert */
.qb-qr .qb-qr-d { background: #111; box-shadow: 0 0 0 0.4px #111; }
.qb-auf-hinweis { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: #6e6e73; }
.qb-auf-format {
    display: inline-block; margin-top: 12px; padding: 4px 10px;
    border-radius: 980px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #9D174D; background: rgba(157, 23, 77, 0.08);
}
.qb-auf-sprachen { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.qb-auf-sprachen span {
    padding: 3px 9px; border-radius: 980px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: #1d1d1f;
}
.qb-auf-sprachen .aktiv { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }

/* ── (b) Event-Statistik: Top-Wünsche als Balken ────────── */
.qb-st { width: min(88vw, 360px); padding: 22px 24px 20px; }
.qb-st-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.qb-st-titel { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.qb-st-sub { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #86868b; white-space: nowrap; }
.qb-st-zeile {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px; row-gap: 5px; align-items: baseline;
    margin-bottom: 10px;
}
.qb-st-song { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-st-votes { font-size: 11px; font-weight: 700; color: #9D174D; font-variant-numeric: tabular-nums; }
/* Balkenbreite per Klasse (--w), Füllung als ::before — keine style=""-Attribute */
.qb-st-balken {
    display: block; grid-column: 1 / -1;
    height: 8px; border-radius: 980px;
    background: rgba(157, 23, 77, 0.10); overflow: hidden;
}
.qb-st-balken::before {
    content: ''; display: block; height: 100%; width: var(--w, 50%);
    border-radius: inherit;
    background: linear-gradient(90deg, #9D174D, #db2777);
}
.qb-st-balken--1 { --w: 100%; }
.qb-st-balken--2 { --w: 79%; }
.qb-st-balken--3 { --w: 57%; }
.qb-st-balken--4 { --w: 36%; }
.qb-st-sperre {
    display: flex; align-items: center; gap: 8px;
    margin-top: 4px; padding: 8px 10px; border-radius: 10px;
    background: #f5f5f7; font-size: 11px; font-weight: 600; color: #1d1d1f;
}
.qb-st-sperre i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9D174D; }
.qb-st-sperre span { color: #6e6e73; font-weight: 500; }
.qb-st-spitze {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 12px; color: #6e6e73;
}
.qb-st-spitze strong { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: #1d1d1f; font-variant-numeric: tabular-nums; }

/* Schmal: Karten füllen die Bahn, Deckel bleibt (Order-Muster .bu-*) */
@media (max-width: 56.24rem) {
    .qb-auf, .qb-st { width: 100%; }
    .qb-auf { max-width: 300px; }
    .qb-st { max-width: 360px; }
}

/* ── Preis-Andeutung (Einschub): drei Stufen ohne Zahlen ── */
.qb-stufen { max-width: 880px; margin: 0 auto; }
.qb-stufen .lp-card .lp-eyebrow { margin-bottom: 8px; }
.qb-stufen .lp-card h3 { font-size: 18px; }

/* ── CTA-Hinweis (zweiter Knopf „Anmelden") ─────────────────
   landing.php setzt margin:18px 0 0 INLINE auf den Hinweis-Absatz und
   hebt damit das margin:auto des 480-px-Absatzes (.lp-cta-panel p) auf —
   der Knopf stünde 108 px links der Mitte. Absatz auf volle Breite. */
#cta .lp-cta-panel p:last-child { max-width: none; }