/* ══ Global Button Reset ══ */
button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* ══════════════════════════════════════════════════
   CAGE QUESTS — Global Styles
   Reset, Typography, Buttons, Glassmorphism, Utilities
   ══════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Icons ─────────────────────────────────────── */
.cq-icon {
    display: inline-block;
    vertical-align: middle;
    color: var(--gold);
}

.cq-icon--missing {
    background: rgba(255, 0, 0, 0.2);
    border: 1px dashed red;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01s !important;
        transition-duration: 0.15s !important;
    }
}

/* ── Base ──────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    background: var(--black, #000);
}

body {
    font-family: var(--font-primary);
    background: var(--black);
    color: var(--white);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Skip Link (Accessibility) ─────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 99999;
    padding: 1rem 2rem;
    background: var(--gold);
    color: var(--black);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.skip-link:focus {
    left: 0;
}

/* ── Typography ────────────────────────────────── */
.cq-section-title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 100;
    letter-spacing: clamp(0.15rem, 0.5vw, 0.4rem);
    text-transform: uppercase;
    color: var(--white);
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
}

.cq-section-subtitle {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    max-width: 520px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.cq-gold-text {
    color: var(--gold);
}

.cq-muted {
    color: var(--muted);
}

/* ── Sections ──────────────────────────────────── */
.cq-section {
    padding: var(--section-pad) var(--section-pad-x);
    position: relative;
}

.cq-section--surface {
    background: var(--surface);
}

.cq-section--elevated {
    background: var(--elevated);
}

.cq-container {
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
}

/* ── Buttons ───────────────────────────────────── */

/* Shared */
.cq-btn-primary,
.cq-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 2.2rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    /* IMMER */
    transition: all 0.3s var(--ease);
    min-height: 50px;
    /* Touch Target */
}

.cq-btn-primary span,
.cq-btn-ghost span {
    position: relative;
    z-index: 2;
}

/* Primary Button — Gold Gradient */
.cq-btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: 2px solid var(--gold);
    color: var(--black);
    box-shadow: 0 5px 20px rgba(178, 148, 116, 0.3);
}

.cq-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.cq-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(178, 148, 116, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.cq-btn-primary:hover::before {
    transform: translateX(100%);
}

.cq-btn-primary:hover span {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Ghost Button — Transparent + Gold Border */
.cq-btn-ghost {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(178, 148, 116, 0.4);
    color: var(--white);
    font-weight: 500;
}

.cq-btn-ghost::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(178, 148, 116, 0.3), transparent);
    transition: left 0.6s ease;
}

.cq-btn-ghost:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(178, 148, 116, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(178, 148, 116, 0.2);
}

.cq-btn-ghost:hover::before {
    left: 100%;
}

.cq-btn-ghost:hover span {
    text-shadow: 0 0 10px var(--gold);
}

/* Button Group */
.cq-btn-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Focus States (Accessibility) */
.cq-btn-primary:focus-visible,
.cq-btn-ghost:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ── Glassmorphism ─────────────────────────────── */

/* Auf --black (Void) Hintergrund */
.cq-glass {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 50px var(--shadow-color),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Auf --surface Hintergrund */
.cq-glass--elevated {
    background: var(--elevated);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 50px var(--shadow-color),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Shine Overlay */
.cq-glass-shine::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Glass Fallback */
@supports not (backdrop-filter: blur(1px)) {
    .cq-glass {
        background: var(--elevated);
    }
}

/* Mobile: reduzierter Blur */
@media (max-width: 768px) {

    .cq-glass,
    .cq-glass--elevated {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
}

/* ── Difficulty Bar ────────────────────────────── */
.cq-difficulty {
    display: flex;
    gap: 3px;
}

.cq-diff-segment {
    width: 16px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease;
}

.cq-diff-segment.filled {
    background: var(--gold);
}

/* ── Star Rating ───────────────────────────────── */
.cq-stars {
    display: inline-flex;
    gap: 2px;
}

.cq-star {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

.cq-star.filled {
    color: var(--gold);
}

.cq-star.half {
    color: var(--gold);
    opacity: 0.6;
}

/* ── Badges ────────────────────────────────────── */
.cq-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 0;
    /* IMMER */
}

.cq-badge--gold {
    background: rgba(178, 148, 116, 0.15);
    border: 1px solid rgba(178, 148, 116, 0.3);
    color: var(--gold);
}

.cq-badge--soon {
    background: rgba(255, 165, 0, 0.15);
    border: 1px solid rgba(255, 165, 0, 0.3);
    color: var(--warn);
}

.cq-badge--ok {
    background: rgba(24, 194, 126, 0.15);
    border: 1px solid rgba(24, 194, 126, 0.3);
    color: var(--ok);
}

/* ── Live Indicator ────────────────────────────── */
.cq-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* Ausnahme: Dots sind rund */
    background: var(--ok);
    display: inline-block;
    animation: cq-pulse 2s infinite;
}

.cq-live-dot.coming-soon {
    background: var(--warn);
    animation: none;
}

@keyframes cq-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.85);
    }
}

/* ── Scroll Animations ─────────────────────────── */
.cq-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.cq-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Responsive Utilities ──────────────────────── */
.cq-desktop-only {
    display: block;
}

.cq-mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .cq-desktop-only {
        display: none;
    }

    .cq-mobile-only {
        display: block;
    }
}

/* ── Selection ─────────────────────────────────── */
::selection {
    background: rgba(178, 148, 116, 0.3);
    color: var(--white);
}

/* ── Scrollbar (Webkit) ────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--black);
}

::-webkit-scrollbar-thumb {
    background: rgba(178, 148, 116, 0.3);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* ── Placeholder ───────────────────────────────── */
::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

/* ══════════════════════════════════════════════════
   SHARED STYLES — Fehlten bei CSS-Extraktion
   Diese Regeln existierten in jedem Prototype als
   "shared block" zwischen Header-CSS und Page-CSS.
   Sie wurden bei der Extraktion übersprungen.
   ══════════════════════════════════════════════════ */

/* Grid Overlay — subtiles Rastermuster */
.cq-grid-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: 0.02;
    pointer-events: none;
    background-image:
        linear-gradient(var(--white) 1px, transparent 1px),
        linear-gradient(90deg, var(--white) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Section System — Hintergründe */
.cq-section--void {
    background: var(--black);
}

.cq-section--elevated {
    background: var(--elevated);
}

/* Section Inner — Content-Zentrierung */
.cq-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Labels */
.cq-section-label {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    /* a11y: opacity 0.6 ergab #6b5946 = 3.14 ratio (AA-fail). Ohne opacity: 6.96 (AA). */
    margin-bottom: 0.8rem;
}

/* Section Description */
.cq-section-desc {
    font-size: 0.95rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    max-width: 560px;
}

/* Section Subtitle */
.cq-section-subtitle {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    max-width: 560px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.skip {
    position: absolute;
    top: -100vh;
    left: -100vw;
}

/* ══ Global Button Reset ══ */
button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* ══ Shared Styles (aus Prototype shared blocks) ══ */
.cq-grid-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: 0.02;
    pointer-events: none;
    background-image: linear-gradient(var(--white) 1px, transparent 1px), linear-gradient(90deg, var(--white) 1px, transparent 1px);
    background-size: 60px 60px;
}

.cq-section--void {
    background: var(--black);
}

.cq-section--elevated {
    background: var(--elevated);
}

.cq-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.cq-section-label {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    /* a11y: opacity entfernt (vorher 0.6 = 3.14 ratio AA-fail). */
    margin-bottom: 0.8rem;
}

.cq-section-desc {
    font-size: 0.85rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    max-width: 560px;
}

.cq-section-subtitle {
    font-size: 0.85rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    max-width: 560px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.hidden {
    display: none !important;
}

/* ══════════════════════════════════════════════════
   WORDPRESS / WOOCOMMERCE OVERRIDE
   Verhindert dass WP-Default-Styles das Design brechen
   ══════════════════════════════════════════════════ */

/* WP Block Library Resets */
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
blockquote,
figure {
    margin: 0;
    padding: 0;
}

/* WP Button Override */
.wp-element-button,
.wp-block-button__link,
button.wp-element-button {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-primary) !important;
}

/* WP Admin Bar — fixed header offset */
.admin-bar .cq-header {
    top: 32px;
}

@media (max-width: 782px) {
    /* WP setzt "html { margin-top: 46px !important }" auf Mobile wenn eingeloggt.
       Admin-Bar ist position:absolute und scrollt weg → kein Offset nötig.
       Ohne Override entsteht ein weißer Streifen über dem Content. */
    html {
        margin-top: 0 !important;
    }
    .admin-bar .cq-header {
        top: 0;
    }
}

/* WooCommerce Global Overrides */
.woocommerce,
.woocommerce-page {
    background: var(--black);
    color: var(--white);
}

.woocommerce a {
    color: var(--gold);
}

.woocommerce a:hover {
    color: var(--gold-light);
}

.woocommerce table.shop_table {
    background: transparent;
    border-color: var(--glass-border);
    border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    color: var(--white);
    border-color: var(--glass-border);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    background: rgba(178, 148, 116, 0.08);
    border-top-color: var(--gold);
    color: var(--white);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background: var(--elevated) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--white) !important;
    font-family: var(--font-primary) !important;
    border-radius: 0 !important;
}

/* Prevent WP from adding unwanted backgrounds to our nav */
nav a,
nav button {
    background: transparent;
}

/* ══════════════════════════════════════════════════
   DESIGN-UPGRADE v2
   Zweifarbige Headlines, Gold-Divider, Scroll-Reveal,
   Page-Load Stagger, Grain-Overlay, Spatial Composition
   ══════════════════════════════════════════════════ */

/* ── Upgrade 1: Zweifarbige Headlines ─────────── */
.cq-headline-gold {
    color: var(--gold);
}

/* ── Upgrade 8: Gold-Divider unter Headlines ──── */
.cq-gold-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
    margin: 1.2rem 0;
}
/* Zentrierte Sections: Linie zentrieren */
.cq-hero .cq-gold-line,
.cq-cta-final .cq-gold-line,
[class*="-hero"] .cq-gold-line {
    margin-left: auto;
    margin-right: auto;
}

/* ── Elegant Frame for final CTA sections ───── */
.cq-cta-frame,
.cq-cta-final .cq-ev-cta,
.cq-cta-final .cq-bday-cta,
.cq-cta-final .cq-jga-cta,
.cq-cta-final .cq-grp-cta {
    position: relative;
}

.cq-cta-frame {
    max-width: 700px;
    margin: 0 auto;
    padding: 3rem 2rem;
    border: 1px solid rgba(178, 148, 116, 0.25);
    background: var(--glass);
    text-align: center;
}

.cq-cta-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

/* Corner accents — shared by .cq-cta-frame and all event CTA blocks inside .cq-cta-final */
.cq-cta-frame::after,
.cq-cta-final .cq-ev-cta::after,
.cq-cta-final .cq-bday-cta::after,
.cq-cta-final .cq-jga-cta::after,
.cq-cta-final .cq-grp-cta::after {
    content: '';
    position: absolute;
    inset: -1px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
    background-image:
        linear-gradient(to right, var(--gold), var(--gold)),
        linear-gradient(to bottom, var(--gold), var(--gold)),
        linear-gradient(to left, var(--gold), var(--gold)),
        linear-gradient(to bottom, var(--gold), var(--gold)),
        linear-gradient(to right, var(--gold), var(--gold)),
        linear-gradient(to top, var(--gold), var(--gold)),
        linear-gradient(to left, var(--gold), var(--gold)),
        linear-gradient(to top, var(--gold), var(--gold));
    background-size:
        20px 1px, 1px 20px,
        20px 1px, 1px 20px,
        20px 1px, 1px 20px,
        20px 1px, 1px 20px;
    background-position:
        top left, top left,
        top right, top right,
        bottom left, bottom left,
        bottom right, bottom right;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .cq-cta-frame { padding: 2rem 1.5rem; }
}

/* ── Upgrade 4A: Page-Load Stagger ────────────── */
@keyframes cq-fadeUp {
    from { opacity: 0; transform: translateY(35px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cq-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cq-slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}

.cq-anim-1 { animation: cq-fadeIn      0.7s var(--ease) 0.1s both; }
.cq-anim-2 { animation: cq-slideInLeft 0.8s var(--ease) 0.3s both; }
.cq-anim-3 { animation: cq-fadeUp      0.7s var(--ease) 0.5s both; }
.cq-anim-4 { animation: cq-fadeUp      0.7s var(--ease) 0.7s both; }
.cq-anim-5 { animation: cq-fadeUp      0.7s var(--ease) 0.9s both; }

/* ── Upgrade 4B: Scroll-Reveal ────────────────── */
.cq-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.cq-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* No-JS Fallback: Alles sofort sichtbar */
.no-js .cq-reveal {
    opacity: 1;
    transform: none;
}

/* ── Upgrade 5: Grain-Overlay ─────────────────── */
.cq-grain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* ── Upgrade 6A: Stagger-Offset Card-Grids ──────
   Entfernt (Beschluss Viktor 17.09.2026): Die Standort-Kacheln
   (Startseite "Wähle dein Abenteuer" + Über-uns) stehen in EINER
   Flucht — der Versatz wirkte mit zwei Karten schief. Die Klasse
   cq-grid-stagger bleibt im Markup (rückbaubar). */
.cq-grid-stagger > *:nth-child(2n) {
    transform: none;
}

/* ── Upgrade 6B: Steps-Overlap ────────────────── */
.cq-steps-overlap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.cq-steps-overlap > * {
    border: 1px solid var(--glass-border);
    margin-left: -1px;
    transition: all 0.4s var(--ease);
    position: relative;
}
.cq-steps-overlap > *:first-child { margin-left: 0; }
.cq-steps-overlap > *:hover {
    z-index: 10;
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border-color: rgba(178,148,116,0.25);
}
@media (max-width: 768px) {
    .cq-steps-overlap { grid-template-columns: 1fr; }
    .cq-steps-overlap > * { margin-left: 0; margin-top: -1px; }
    .cq-steps-overlap > *:first-child { margin-top: 0; }
}

/* ── Reduced Motion — Design-Upgrade Klassen ──── */
@media (prefers-reduced-motion: reduce) {
    .cq-anim-1, .cq-anim-2, .cq-anim-3, .cq-anim-4, .cq-anim-5,
    .cq-reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ══ Accessibility: Skip-to-main Link ══
   Sichtbar erst bei Tastatur-Fokus. Springt Screen-Reader + Tastatur-
   Nutzer direkt zum Hauptinhalt, ohne durch Header + Nav tabben zu müssen.
   Target-ID #main wird in header.php (auto) bzw. in buchen.php /
   woocommerce/cart/*.php / woocommerce/checkout/*.php explizit gesetzt. */
.cq-skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    padding: 0.75rem 1.2rem;
    background: var(--gold);
    color: var(--text-on-gold);
    text-decoration: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 100000;
    transition: top 0.15s ease;
    border: 2px solid var(--gold);
    outline: none;
}
.cq-skip-link:focus,
.cq-skip-link:focus-visible {
    top: 1rem;
    outline: 3px solid var(--white);
    outline-offset: 2px;
}

/* ══ Accessibility: Global Focus-Visible ══
   Die Codebase enthält viele `outline: none` Regeln auf :focus
   (z.B. in header.css, faq.css, booking.css, woo-overrides.css),
   die ursprünglich nur den Maus-Click-Fokus unterdrücken sollten —
   aber auch den Keyboard-Fokus unsichtbar machen.

   :focus-visible matcht NUR Tastatur-/Programmatic-Focus, nicht
   Maus-Click. Mit !important überschreibt es die Legacy-Regeln global.
   So bleiben Maus-Interaktionen ringfrei, aber Tab-Nutzer sehen
   jederzeit wo sie sind (WCAG 2.4.7 Focus Visible). */
:focus-visible {
    outline: 3px solid var(--gold) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(178, 148, 116, 0.25) !important;
    border-radius: 2px;
}
/* Auf Gold-Flächen (Buttons, Skip-Link) Weiß statt Gold, sonst unsichtbar */
.cq-header-cta:focus-visible,
.cq-btn-primary:focus-visible,
.cq-mobile-book-btn:focus-visible,
.cq-skip-link:focus-visible,
.cq-msg-btn:focus-visible {
    outline-color: var(--white) !important;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35) !important;
}

/* ─── Audit T8: Visually-hidden Helper für SEO-Keywords im H1 ───
   Standard sr-only-Pattern: nimmt 0px Layout, ist von Screen-Readern
   und Google-Crawler aber lesbar. */
.cq-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ══ Kachel-Staffelung beim Scroll-Reveal (14.08.2026) ══════════════
   Bis hierher blendete nur der Sektions-Container (.cq-reveal) ein —
   die Karten darin erschienen alle gleichzeitig als Block. Diese
   Ergaenzung laesst sie nacheinander hereinkommen.

   WICHTIG — warum `translate` und nicht `transform`:
   `.cq-grid-stagger > *:nth-child(2n)` (oben, Zeile ~849) und die
   Hover-Regeln der Karten belegen `transform` bereits. Wuerde die
   Bewegung ebenfalls ueber `transform` laufen, wuerde sie den
   statischen 16px-Versatz und die Hover-Effekte ueberschreiben.
   Die eigenstaendige Property `translate` addiert sich stattdessen
   sauber dazu. Browser ohne `translate`-Support zeigen ein reines
   Fade — kein Bruch.

   Der Block steht bewusst am DATEIENDE: `.cq-reveal.visible` (0-2-0)
   plus Container plus :nth-child ergibt genug Spezifitaet, und die
   spaetere Position vermeidet Kaskaden-Ueberraschungen. */
.cq-reveal :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > * {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
}
.cq-reveal.visible :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > * {
    opacity: 1;
    translate: 0 0;
}

/* Nacheinander statt gleichzeitig — 90 ms je Karte */
.cq-reveal.visible :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > *:nth-child(1) { transition-delay: 0.06s; }
.cq-reveal.visible :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > *:nth-child(2) { transition-delay: 0.15s; }
.cq-reveal.visible :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > *:nth-child(3) { transition-delay: 0.24s; }
.cq-reveal.visible :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > *:nth-child(4) { transition-delay: 0.33s; }
.cq-reveal.visible :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > *:nth-child(5) { transition-delay: 0.42s; }
.cq-reveal.visible :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > *:nth-child(6) { transition-delay: 0.51s; }
.cq-reveal.visible :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > *:nth-child(7) { transition-delay: 0.60s; }
.cq-reveal.visible :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > *:nth-child(n+8) { transition-delay: 0.69s; }

/* Kein JavaScript: Karten sofort sichtbar, sonst blieben sie leer */
.no-js .cq-reveal :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > * {
    opacity: 1;
    translate: none;
}

@media (prefers-reduced-motion: reduce) {
    .cq-reveal :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > *,
    .cq-reveal.visible :is(.cq-locations, .cq-events-grid, .cq-steps, .cq-proof-grid, .cq-rooms-grid, .cq-similar-grid, .cq-reviews-grid) > * {
        opacity: 1 !important;
        translate: none !important;
        transition: none !important;
        transition-delay: 0s !important;
    }
}

/* ══ Newsletter (17.08.2026, umbenannt WL-B10 25.08.2026) ═══════════
   Frueher "Warteliste / Newsletter". Der Name war die Ursache der
   Verwechslung, die WL-B10 aufloest: die ECHTE Warteliste lebt im
   Buchungsflow und bringt ihre eigenen Klassen (cq-wl-*) mit. */
.cq-nl { max-width: 560px; margin: 0 auto; padding: 88px 24px; text-align: center; }
.cq-nl-eyebrow { color: var(--gold); font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; font-weight: 500; margin-bottom: 18px; }
.cq-nl-titel { color: #fff; font-weight: 100; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(1.4rem, 4vw, 2.1rem); line-height: 1.3; margin: 0 0 16px; text-wrap: balance; }
.cq-nl-text { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 0 0 30px; }
.cq-nl-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cq-nl-input { flex: 1 1 260px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.15); color: #fff; padding: 15px 18px; font-size: .95rem; font-family: inherit; }
.cq-nl-input:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.05); }
.cq-nl-input::placeholder { color: #6a6a6a; }
.cq-nl-btn { background: var(--gold); color: #000; border: none; padding: 15px 30px; font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: background .3s var(--ease); }
.cq-nl-btn:hover:not(:disabled) { background: var(--gold-light); }
.cq-nl-btn:disabled { opacity: .55; cursor: default; }
.cq-nl-klein { color: #8a8a8a; font-size: .78rem; line-height: 1.6; margin: 18px 0 0; }
.cq-nl-klein a { color: var(--gold-light); }
.cq-nl-meldung { margin-top: 18px; font-size: .9rem; min-height: 1.4em; }
.cq-nl-meldung.erfolg { color: var(--ok); }
.cq-nl-meldung.fehler { color: #e0a0a0; }
.cq-nl-fertig .cq-nl-titel { margin-bottom: 14px; }
@media (max-width: 480px) { .cq-nl { padding: 56px 20px; } .cq-nl-btn { width: 100%; } }

/* Newsletter-Seite: Der Seitentitel kommt aus singular.php und ist linksbuendig,
   der Inhalt darunter zentriert — das brach optisch auseinander. */
.page-id-42278 .cq-section-title { text-align: center; }
.page-id-42278 .cq-post-content { text-align: center; }


/* ──────────────────────────────────────────────────────────────
   Laufendes Raster im Hintergrund — Animation ersatzlos entfallen
   (Nadja A1, Beschluss Viktor 07.09.2026).

   .cq-grid-overlay steht per header.php auf JEDER Seite und ist
   position:fixed/inset:0 — also ein bildschirmgrosser Compositing-
   Layer, den translate3d zusaetzlich auf eine eigene GPU-Textur legt
   (auf 4K rund 33 MB, dauerhaft neu gemalt). Ein IntersectionObserver
   kann daran nichts drehen: ein fixes Element scrollt nie aus dem
   Bild. Bei opacity 0.02 war die Bewegung ohnehin kaum zu sehen.

   Das statische Raster bleibt — seine Geometrie steht in
   css/homepage.css und laedt mit der Startseite.
   ────────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────
   Teilen — Icon-Zeile (cq_teilen)

   Eine Zeile statt drei Knoepfe: Sie sitzt unter dem Buchen-Knopf
   und darf ihm nicht die Aufmerksamkeit nehmen. Die Haarlinie
   oben trennt Haupt- von Nebenhandlung.
   ────────────────────────────────────────────────────────────── */
.cq-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1.4rem;
    padding: 1rem 1.4rem 0;
    border-top: 1px solid var(--glass-border);
}

/* "CREW REKRUTIEREN" misst bei 340 px Seitenleiste rund 125 px und passt
   damit in die verfuegbaren 147 px. Falls eine Ersatzschrift breiter baut,
   soll die Beschriftung umbrechen statt die Icons zu quetschen. */
.cq-share-label {
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    min-width: 0;
}

.cq-share-ics {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.cq-share-ic {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.cq-share-ic svg { width: 17px; height: 17px; }

.cq-share-ic:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(178, 148, 116, 0.07);
}

/* Bezeichnung beim Ueberfahren — auf dem Handy traegt sie das aria-label */
.cq-share-ic::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--elevated);
    border: 1px solid var(--glass-border);
    color: var(--white);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s var(--ease);
}

.cq-share-ic:hover::after,
.cq-share-ic:focus-visible::after { opacity: 1; }

.cq-share-ic.is-done {
    border-color: var(--gold);
    color: var(--gold);
}

/* Kurze Rueckmeldung: Ohne sie passiert beim Kopieren sichtbar nichts */
.cq-share-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%) translateY(20px);
    background: var(--elevated);
    border: 1px solid rgba(178, 148, 116, 0.5);
    color: var(--gold);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.75rem 1.4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    z-index: 900;
}

.cq-share-toast.is-on {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ══════════════════════════════════════════════════
   BEWERTUNGEN
   Lagen bis 21.08.2026 in location.css. Seit die Stimmen auch auf der
   Startseite stehen, wurden sie dort nicht mehr gefunden: location.css
   laedt nur auf Standortseiten. Sichtbar wurde das an den Sternen — sie
   sind Inline-SVG ohne Groessenangabe im Markup und fallen ohne CSS auf
   die Browser-Vorgabe von 300x150 px zurueck. Hier in global.css gelten
   sie fuer beide Seiten aus einer Quelle.
   ══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   4. REVIEWS
   ══════════════════════════════════════════════════ */
.cq-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.cq-review-card {
    padding: 2rem;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    transition: all 0.4s var(--ease);
}

.cq-review-card:hover {
    border-color: rgba(178, 148, 116, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.cq-review-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 1rem;
}

.cq-review-star {
    width: 12px;
    height: 12px;
    fill: var(--gold);
    opacity: 0.7;
}

.cq-review-text {
    font-size: 0.82rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin-bottom: 1.2rem;
    font-style: italic;
}

.cq-review-author {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.cq-review-room {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--gold);
    opacity: 0.5;
    margin-top: 0.2rem;
}

@media (max-width: 768px) {
    .cq-reviews-grid {
        grid-template-columns: 1fr;
    }
}