/* Extracted from cage-quests-homepage.html */
/* W4 (Nadja R2, 17.09.2026 — Beschluss Viktor): Der Block "LOADING SCREEN
   (Erstbesuch)" ist ersatzlos entfernt — .cq-loading / .cq-loading-inner /
   .cq-loading-prompt / .cq-loading-text sowie die Keyframes loadFade,
   typewriter und blinkCursor. Alle drei Keyframes wurden ausschliesslich
   vom Lade-Vorhang benutzt; das Markup in front-page.php und der Block in
   js/homepage.js sind im selben Zug entfallen. */

/* ══════════════════════════════════════════════════
   BACKGROUND LAYERS
   ══════════════════════════════════════════════════ */
.cq-video-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0.4;
}

.cq-video-bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: brightness(1.3);
}

.cq-video-bg .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.3) 100%);
}

/* Reduced-Motion: Video ausblenden, Poster bleibt via Browser-Fallback.
   Nutzer mit OS-Setting "Bewegung reduzieren" bekommen ein statisches Bild. */
@media (prefers-reduced-motion: reduce) {
    .cq-video-bg video {
        display: none;
    }
    .cq-video-bg {
        background-image: url('../assets/video/hero-poster.jpg');
        background-size: cover;
        background-position: center;
    }
}

.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;
    /* Ohne Bewegung: siehe Begruendung in global.css (Nadja A1, 07.09.2026).
       Das @keyframes gridSlide entfaellt mit — es hatte keinen zweiten Nutzer. */
}

.cq-orb {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
    filter: blur(80px);
    opacity: 0.15;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    /* orbPulse ersatzlos entfallen (Nadja A1, 07.09.2026): filter:blur(80px)
       auf einer laufenden scale()-Animation ist der teuerste Renderpfad
       ueberhaupt — der Blur muss in jedem Frame neu gerechnet werden, weil
       sich die Quellgeometrie aendert. Der Orb bleibt statisch stehen,
       opacity 0.15 unveraendert. */
}

@media (max-width: 768px) {

    /* Der Leuchtpunkt bleibt auf dem Handy aus — er kostet dauerhaft
       Rechenzeit und bringt auf kleinem Schirm kaum Wirkung. */
    .cq-orb {
        display: none;
    }

    /* Das Video lief hier frueher NICHT: .cq-video-bg stand mit im
       display:none. Das Markup liefert aber eigens eine mobile Fassung
       (<source media="(max-width: 768px)">), die damit nie zu sehen war.
       Auf Wunsch (13.08.2026) laeuft es jetzt auch auf dem Handy. */

    /* Fest positionierte Hintergruende lassen mobile Browser beim Ein- und
       Ausblenden der Adressleiste springen — absolute Positionierung im Hero
       ist dort das ruhigere Verhalten. */
    .cq-video-bg {
        position: absolute;
        top: 0;
        bottom: auto;          /* sonst streiten inset:0 und die Hoehe */
        height: 100svh;        /* svh = ohne die ein-/ausfahrende Adressleiste */
    }
}

/* Wer Datensparen eingeschaltet hat, bekommt das Standbild statt der
   mobilen Videodatei — dieselbe Ruecksicht wie bei "Bewegung reduzieren". */
@media (prefers-reduced-data: reduce) {
    .cq-video-bg video {
        display: none;
    }
    .cq-video-bg {
        background-image: url('../assets/video/hero-poster.jpg');
        background-size: cover;
        background-position: center;
    }
}

/* ══════════════════════════════════════════════════
   HEADER (inline — same as component)
   ══════════════════════════════════════════════════ */
.cq-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
    transition: all 0.5s var(--ease);
    background: transparent;
    border-bottom: 1px solid transparent;
}

.cq-header.scrolled {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: var(--glass-border);
}

.cq-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 1001;
    flex-shrink: 0;
}

.cq-logo-img {
    width: auto;
    display: block;
    transition: all 0.4s var(--ease);
}

.cq-logo:hover .cq-logo-img {
    filter: brightness(1.2) drop-shadow(0 0 12px rgba(178, 148, 116, 0.4));
}

.cq-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.cq-nav-item {
    position: relative;
    padding: 0 1.2rem;
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.cq-nav-link {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s var(--ease);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    padding: 0.5rem 0;
    position: relative;
    background: none;
    border: none;
    font-family: inherit;
}

.cq-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 0.4s var(--ease);
}

.cq-nav-link:hover,
.cq-nav-link.active {
    color: var(--white);
}

.cq-nav-link:hover::after,
.cq-nav-link.active::after {
    width: 100%;
}

.cq-chevron {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.3s var(--ease);
}

.cq-nav-item.open .cq-chevron {
    transform: rotate(180deg);
}

.cq-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.65rem 1.6rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: 1.5px solid var(--gold);
    color: var(--black);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s var(--ease);
    box-shadow: 0 4px 15px rgba(178, 148, 116, 0.25);
    margin-left: 1.5rem;
    flex-shrink: 0;
}

.cq-header-cta::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-header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(178, 148, 116, 0.4);
}

.cq-header-cta:hover::before {
    transform: translateX(100%);
}

.cq-header-cta span {
    position: relative;
    z-index: 2;
}

.cq-cta-arrow {
    font-size: 1rem;
    line-height: 1;
    position: relative;
    z-index: 2;
    transition: transform 0.3s var(--ease);
}

.cq-header-cta:hover .cq-cta-arrow {
    transform: translateX(3px);
}

/* Hamburger */
.cq-hamburger {
    display: none;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    position: relative;
    z-index: 1001;
    padding: 0;
    transition: border-color 0.3s;
    flex-shrink: 0;
}

.cq-hamburger:hover {
    border-color: var(--gold);
}

.cq-hamburger-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 12px;
}

.cq-hamburger-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--white);
    transition: all 0.35s var(--ease);
}

.cq-hamburger-line:nth-child(1) {
    top: 0;
}

.cq-hamburger-line:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.cq-hamburger-line:nth-child(3) {
    bottom: 0;
}

.cq-hamburger.open .cq-hamburger-line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background: var(--gold);
}

.cq-hamburger.open .cq-hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(10px);
}

.cq-hamburger.open .cq-hamburger-line:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
    background: var(--gold);
}

/* Mega Dropdown */
.cq-mega {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.45s var(--ease);
    z-index: 999;
    pointer-events: none;
}

.cq-mega.open {
    max-height: 620px;
    opacity: 1;
    padding: 2.5rem 0 3rem;
    pointer-events: auto;
}

.cq-mega-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.cq-mega-col {
    position: relative;
}

.cq-mega-col+.cq-mega-col::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--glass-border);
}

.cq-mega-city {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.3rem;
}

.cq-mega-count {
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1.2rem;
}

.cq-mega-rooms {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.cq-mega-room {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.6rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    transition: all 0.25s var(--ease);
    border: 1px solid transparent;
}

.cq-mega-room:hover {
    color: var(--white);
    background: var(--glass);
    border-color: var(--glass-border);
}

.cq-mega-room-thumb {
    width: 40px;
    height: 26px;
    background-size: cover;
    background-position: center;
    background-color: var(--elevated);
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.6;
    transition: opacity 0.3s;
}

.cq-mega-room:hover .cq-mega-room-thumb {
    opacity: 1;
}

.cq-mega-room-name {
    flex: 1;
}

.cq-mega-room-dur {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.1em;
}

.cq-mega-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    opacity: 0.6;
    transition: all 0.3s var(--ease);
    border: 1px solid transparent;
}

.cq-mega-more:hover {
    opacity: 1;
    border-color: rgba(178, 148, 116, 0.3);
    background: rgba(178, 148, 116, 0.05);
}

.cq-mega-more-arrow {
    transition: transform 0.3s var(--ease);
    font-size: 0.85rem;
}

.cq-mega-more:hover .cq-mega-more-arrow {
    transform: translateX(4px);
}

.cq-mega-col.coming-soon .cq-mega-room {
    opacity: 0.35;
    pointer-events: none;
}

.cq-mega-col.coming-soon .cq-mega-room-name::before {
    content: '\1F512  ';
    font-size: 0.65rem;
}

.cq-mega-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--warn);
    color: var(--warn);
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

.cq-mega-badge-dot {
    width: 5px;
    height: 5px;
    background: var(--warn);
    border-radius: 50%;
    animation: pulseWarn 2s infinite;
}

@keyframes pulseWarn {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.4)
    }

    50% {
        box-shadow: 0 0 0 5px rgba(255, 165, 0, 0)
    }
}

/* Mobile menu & book button — abbreviated, same as component */
.cq-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.97);
    backdrop-filter: blur(30px);
    display: none;
    flex-direction: column;
    padding: calc(var(--header-height-mobile) + 2rem) 2rem 6rem;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}

.cq-mobile-menu.open {
    opacity: 1;
}

.cq-mobile-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cq-mobile-nav-item {
    border-bottom: 1px solid var(--glass-border);
}

.cq-mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 0;
    font-size: 1.1rem;
    font-weight: 200;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    width: 100%;
}

.cq-mobile-nav-link:hover {
    color: var(--white);
}

.cq-mobile-chevron {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    transition: transform 0.3s var(--ease);
    opacity: 0.5;
}

.cq-mobile-nav-item.open .cq-mobile-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

.cq-mobile-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--ease);
}

.cq-mobile-nav-item.open .cq-mobile-sub {
    max-height: 800px;
}

.cq-mobile-location {
    padding: 0.8rem 0 1.2rem;
}

.cq-mobile-location+.cq-mobile-location {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.cq-mobile-loc-title {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.6rem;
    opacity: 0.7;
}

/* .cq-mobile-room-link + :hover moved to header.css (single source of truth) */

.cq-mobile-more-link {
    display: inline-block;
    margin-top: 0.5rem;
    padding-left: 0.8rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.cq-mobile-more-link:hover {
    opacity: 1;
}

.cq-mobile-footer {
    display: flex;
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
    margin-top: auto;
}

.cq-mobile-footer a {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
}

.cq-mobile-book {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 997;
    padding: 0.8rem 1.5rem;
    padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
}

.cq-mobile-book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: 2px solid var(--gold);
    color: var(--black);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 1024px) {

    .cq-nav,
    .cq-header-cta {
        display: none;
    }

    .cq-hamburger {
        display: block;
    }

    .cq-mobile-menu {
        display: none;
        pointer-events: none;
    }

    .cq-mobile-menu.open {
        display: flex;
        pointer-events: auto;
    }

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

    .cq-header {
        height: var(--header-height-mobile);
    }
}

/* ══════════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════════ */
.cq-hero {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.cq-hero-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 100;
    letter-spacing: clamp(0.5rem, 2vw, 2rem);
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 0 60px rgba(178, 148, 116, 0.2);
    animation: heroFade 1.5s var(--ease) 1.8s both;
}

.cq-hero-tagline {
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.85;
    padding: 0.5rem 2rem;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    display: inline-block;
    margin-top: 1.5rem;
    animation: heroFade 1.2s var(--ease) 2.2s both;
}

.cq-hero-tagline strong {
    color: var(--gold);
    font-weight: 400;
}

.cq-hero-scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 0;
    right: 0;
    width: fit-content;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: heroFade 1s var(--ease) 3s both;
    /* Link-Verhalten: kein Underline, soft hover */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.cq-hero-scroll:hover {
    opacity: 0.85;
}

.cq-hero-scroll-text {
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* Chevron-Pfeil unter der Linie — soft Bounce um Aufmerksamkeit zu lenken */
.cq-hero-scroll-chevron {
    width: 18px;
    height: 18px;
    color: var(--gold);
    margin-top: 0.2rem;
    animation: chevronBounce 2s ease-in-out infinite;
    opacity: 0.85;
}
@keyframes chevronBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(4px); }
    60% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
    .cq-hero-scroll-chevron { animation: none; }
}

.cq-hero-scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleY(0.7);
    }

    50% {
        opacity: 0.8;
        transform: scaleY(1);
    }
}

@keyframes heroFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ══════════════════════════════════════════════════
   SECTION SYSTEM
   ══════════════════════════════════════════════════ */
.cq-section {
    position: relative;
    z-index: 10;
    padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 3vw, 3rem);
}

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

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

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

.cq-section-inner {
    max-width: 1400px;
    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;
    text-align: left;
}

.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: left;
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
}

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

/* ══════════════════════════════════════════════════
   LOCATION CARDS (from prototype)
   ══════════════════════════════════════════════════ */
.cq-locations {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    /* A3a (Nadja R2, 17.09.2026): stretch statt flex-start. Bricht die
       Status-Zeile ("★ Seit 2016 · Award Winner") bei schmalem Fenster
       zweizeilig um, war die eine Karte hoeher als die andere und die
       Reihe stand schief. stretch gibt beiden Karten dieselbe Hoehe,
       die Oberkanten liegen dadurch buendig. */
    align-items: stretch;
    /* Umbrechen statt abschneiden: die Reihe darf unterhalb der
       Desktop-Schwelle in die naechste Zeile rutschen, statt rechts aus
       dem Viewport zu laufen. Ab 1025 px wird der Umbruch im Media Query
       weiter unten wieder abgeschaltet — dort waechst eine Karte beim
       Hover auf 900 px, und ein Zeilenumbruch mitten im Aufklappen waere
       ein sichtbarer Sprung. */
    flex-wrap: wrap;
    transition: gap 0.6s var(--ease);
}

.cq-loc-card {
    width: 380px;
    /* A3a: "min-width: 380px" ist entfallen. Eine feste Mindestbreite kann
       breiter sein als der Viewport — genau daran schnitt die Reihe in
       halbierten Desktop-Fenstern (~500–900 px) rechts ab. Die Karte darf
       jetzt bis auf die Containerbreite schrumpfen und nie darueber
       hinauswachsen. */
    min-width: 0;
    max-width: 100%;
    position: relative;
    /* Hier steht bewusst keine transition mehr. Die Einblend-Animation in
       global.css (".cq-reveal :is(.cq-locations, …) > *", Zeile ~982) belegt
       transition und transition-delay mit (0,2,0) bzw. (0,4,0) und schlaegt
       jede Regel auf ".cq-loc-card" mit (0,1,0). Das fruehere
       "transition: all 0.6s var(--ease)" hat deshalb nie gewirkt: das
       Aufklappen sprang ohne Uebergang von 380 auf 900 px.
       "will-change: transform, width" ist ebenfalls entfallen — Breite
       laesst sich damit nicht beschleunigen, die drei Karten hingen aber
       dauerhaft in eigenen Compositor-Ebenen. */
}

@media (min-width: 1025px) {
    /* Die Reihe haelt die Hoehe der aufgeklappten Karte dauerhaft frei.
       595 px sind im Browser gemessen und fuer alle drei Standorte gleich.
       Ohne diese Reservierung wuchs die Seite beim Aufklappen um 75 px;
       beim Scrollen verschob dieser Sprung den Inhalt unter dem stehenden
       Mauszeiger, was die naechste Karte traf — die Seite fing an zu
       zucken. */
    .cq-locations {
        min-height: 595px;
        /* A3a: Auf dem Desktop bleibt die Reihe einzeilig. Das Aufklappen
           auf 900 px wuerde bei aktivem Umbruch die Nachbarkarte in die
           zweite Zeile werfen; ohne Umbruch schrumpfen stattdessen beide
           Karten gemeinsam, solange das Fenster schmal ist — kein
           Ueberlauf, kein Sprung. */
        flex-wrap: nowrap;
    }

    /* ── Aussehen ──
       Niedrige Spezifitaet mit Absicht: diese Regeln konkurrieren mit
       nichts, und der Effekt bleibt auch ohne JavaScript erhalten. */
    .cq-loc-card:hover {
        width: 900px;
        /* A3a: "min-width: 900px" ersetzt durch max-width. Die feste
           Mindestbreite zwang die Reihe auf 900 + 380 + Abstand = ~1300 px
           und schob den Rest bei schmaleren Desktop-Fenstern rechts aus
           dem Bild. Jetzt schrumpft die aufgeklappte Karte mit. */
        max-width: 100%;
        z-index: 100;
        transform: translateY(-10px);
    }

    .cq-loc-card:hover~.cq-loc-card {
        transform: translateX(80px);
    }

    .cq-loc-card:has(~ .cq-loc-card:hover) {
        transform: translateX(-80px);
    }

    /* ── Scroll-Sperre ──
       Solange homepage.js "cq-scrollt" am Wurzelelement haelt, sind die
       Karten fuer die Maus unsichtbar. Hover kann dadurch nur entstehen,
       wenn die Seite steht — nicht mehr dadurch, dass der Inhalt unter
       dem stehenden Zeiger durchwandert. Ohne JavaScript fehlt die Klasse
       schlicht, der Hover-Effekt bleibt dann uneingeschraenkt. */
    .cq-scrollt .cq-locations .cq-loc-card {
        pointer-events: none;
    }

    /* ── Uebergang ──
       Getrennt notiert und auf (0,5,0) gehoben, damit er die Einblend-
       Regeln aus global.css sicher schlaegt.
       Die 100 ms sind eine Absichtserkennung: wer beim Scrollen nur ueber
       eine Karte streift, loest nichts aus — die Breite aendert sich in
       dieser Zeit noch gar nicht, der Uebergang wird beim Verlassen
       einfach verworfen. Genau dieses versehentliche Auf- und Zuklappen
       hat die Seite beim Scrollen wackeln lassen.
       (26.08.2026 auf Viktors Wunsch gestrafft: 140→100 ms Erkennung,
       550→380 ms Aufklappen — die Karte steht jetzt nach ~480 statt
       ~690 ms. Die Erkennung NICHT unter ~80 ms druecken, sonst kehrt
       das Scroll-Wackeln zurueck, gegen das die Kette gebaut wurde.)
       Beim Verlassen greift diese Regel nicht mehr, das Zuklappen ist
       deshalb unmittelbar — gewollt: wer wegscrollt, soll die Karte
       sofort los sein. */
    .cq-reveal.visible .cq-locations > .cq-loc-card:hover,
    .cq-reveal.visible .cq-locations > .cq-loc-card:hover~.cq-loc-card,
    .cq-reveal.visible .cq-locations > .cq-loc-card:has(~ .cq-loc-card:hover) {
        transition: width 0.38s var(--ease) 100ms,
                    min-width 0.38s var(--ease) 100ms,
                    transform 0.38s var(--ease) 100ms;
    }
}

/* Standort-Tints (dezent, je Standort — über --loc-tint anpassbar).
   Karlsruhe = Gold (Marke), Freiburg = Salbei-Grün, Stuttgart = Lavendel. */
.cq-loc-card[data-location="karlsruhe"] { --loc-tint: 178, 148, 116; }
.cq-loc-card[data-location="freiburg"]  { --loc-tint: 120, 158, 134; }
.cq-loc-card[data-location="stuttgart"] { --loc-tint: 150, 134, 178; }

.cq-loc-card-inner {
    width: 100%;
    min-height: 520px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-top: 2px solid rgba(var(--loc-tint, 178, 148, 116), 0.55);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: all 0.6s var(--ease);
    position: relative;
}

.cq-loc-card-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--loc-tint, 255, 255, 255), 0.14) 0%, transparent 55%);
    pointer-events: none;
}

@media (min-width: 1025px) {
    .cq-loc-card:hover .cq-loc-card-inner {
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 120px rgba(var(--loc-tint, 178, 148, 116), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}

/* Card Header */
.cq-loc-header {
    padding: 3rem;
    text-align: center;
    transition: all 0.4s var(--ease);
}

@media (min-width: 1025px) {
    .cq-loc-card:hover .cq-loc-header {
        padding: 2rem 3rem;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        text-align: left;
        gap: 2rem;
    }
}

.cq-loc-number-wrap {
    margin-bottom: 1.5rem;
    transition: margin 0.6s var(--ease);
}

@media (min-width: 1025px) {
    .cq-loc-card:hover .cq-loc-number-wrap {
        margin-bottom: 0;
    }
}

.cq-loc-number {
    font-size: 7rem;
    font-weight: 100;
    color: var(--gold);
    line-height: 1;
    text-shadow: 0 0 30px rgba(178, 148, 116, 0.5), 0 0 60px rgba(178, 148, 116, 0.3);
    transition: font-size 0.6s var(--ease);
}

@media (min-width: 1025px) {
    .cq-loc-card:hover .cq-loc-number {
        font-size: 4.5rem;
    }
}

.cq-loc-number-label {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.5rem;
    transition: opacity 0.3s;
}

@media (min-width: 1025px) {
    .cq-loc-card:hover .cq-loc-number-label {
        opacity: 0;
        height: 0;
        margin: 0;
        overflow: hidden;
    }
}

.cq-loc-info {
    transition: text-align 0.6s var(--ease);
}

@media (min-width: 1025px) {
    .cq-loc-card:hover .cq-loc-info {
        text-align: left;
    }
}

.cq-loc-city {
    font-size: 2.2rem;
    font-weight: 100;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transition: font-size 0.6s var(--ease);
}

@media (min-width: 1025px) {
    .cq-loc-card:hover .cq-loc-city {
        font-size: 2.6rem;
    }
}

.cq-loc-status {
    font-size: 0.8rem;
    color: var(--gold);
    opacity: 0.7;
    letter-spacing: 0.15em;
    margin-top: 0.3rem;
}

.cq-loc-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(24, 194, 126, 0.08);
    border: 1px solid var(--ok);
    color: var(--ok);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.6s var(--ease);
}

@media (min-width: 1025px) {
    .cq-loc-card:hover .cq-loc-live {
        opacity: 1;
        max-height: 40px;
    }
}

.cq-live-dot {
    width: 6px;
    height: 6px;
    background: var(--ok);
    border-radius: 50%;
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(24, 194, 126, 0.6)
    }

    70% {
        box-shadow: 0 0 0 8px rgba(24, 194, 126, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(24, 194, 126, 0)
    }
}

/* Coming Soon */
.cq-loc-card--soon .cq-loc-number {
    animation: glitch 3s infinite;
}

@keyframes glitch {

    0%,
    100% {
        text-shadow: 0 0 30px rgba(178, 148, 116, 0.5)
    }

    20% {
        text-shadow: -2px 0 var(--gold), 2px 0 var(--gold-light)
    }
}

.cq-loc-card--soon .cq-loc-live {
    background: rgba(255, 165, 0, 0.08);
    border-color: var(--warn);
    color: var(--warn);
}

.cq-loc-card--soon .cq-live-dot {
    background: var(--warn);
}

/* Expandable Content */
.cq-loc-expand {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 3rem;
    transition: max-height 0.4s var(--ease), opacity 0.4s var(--ease), padding 0.4s var(--ease);
    transition-delay: 0s;
}

@media (min-width: 1025px) {
    .cq-loc-card:hover .cq-loc-expand {
        max-height: 1200px;
        opacity: 1;
        padding: 0 3rem 3rem;
        /* Muster der Vorlage (mogulinker.com), 26.08.2026 gestrafft:
           der Inhalt blendet jetzt schon WAEHREND der zweiten Haelfte des
           Aufklappens ein (Start 260 ms = Erkennung + ~40 % der
           Aufklappdauer) statt erst nach vollstaendigem Aufklappen —
           voll sichtbar nach ~560 statt ~1040 ms. Beim Verlassen gilt
           weiter die Grundregel ohne Verzoegerung: sofort weg. Ein kurzes
           Darueberstreichen zeigt so hoechstens die wachsende Karte,
           nie den Inhalt. */
        transition: max-height 0.38s var(--ease) 100ms,
                    padding 0.38s var(--ease) 100ms,
                    opacity 0.3s var(--ease) 260ms;
    }
}

/* Room Grid inside card */
.cq-loc-rooms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.8rem;
    margin: 1.5rem 0;
}

.cq-loc-room {
    position: relative;
    aspect-ratio: 16/10;
    background-color: var(--elevated);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--glass-border);
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
}

.cq-loc-room::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.9) 100%);
}

.cq-loc-room:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: var(--gold);
    box-shadow: 0 8px 25px rgba(178, 148, 116, 0.25);
}

.cq-loc-room-name {
    position: absolute;
    bottom: 8px;
    left: 10px;
    right: 10px;
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    z-index: 1;
}

.cq-loc-room-dur {
    position: absolute;
    top: 6px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 2px 5px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 2;
}

.cq-loc-card--soon .cq-loc-room {
    pointer-events: none;
    filter: brightness(0.5) saturate(0.6);
}

/* ── Location Cards: Mobile & Tablet ── */
@media (max-width: 1024px) {
    .cq-locations {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .cq-loc-card {
        width: 100%;
        min-width: unset;
        max-width: 500px;
        cursor: pointer;
    }

    /* Dezenter Touch-Feedback statt Expand */
    .cq-loc-card:active .cq-loc-card-inner {
        transform: scale(0.98);
        border-color: rgba(178, 148, 116, 0.4);
    }

    .cq-loc-card-inner {
        min-height: auto;
        transition: transform 0.15s ease, border-color 0.15s ease;
    }

    .cq-loc-header {
        padding: 2rem 1.5rem;
        cursor: pointer;
    }

    /* Expand-Bereich auf Mobile/Tablet ausblenden —
       Klick navigiert direkt zur Standortseite */
    .cq-loc-expand {
        display: none !important;
    }

    .cq-loc-card.expanded .cq-loc-expand {
        display: none !important;
    }

    .cq-loc-number {
        font-size: 4rem;
    }

    .cq-loc-city {
        font-size: 1.6rem;
        letter-spacing: 0.2em;
    }
}

@media (max-width: 480px) {
    .cq-loc-card {
        max-width: 100%;
    }

    .cq-loc-header {
        padding: 1.5rem 1rem;
    }

    .cq-loc-number {
        font-size: 3rem;
    }

    .cq-loc-city {
        font-size: 1.3rem;
    }
}

/* Card Buttons */
.cq-loc-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Scoped: nur die Buttons innerhalb der Standort-Cards
   (vorher unscoped → flex:1 ist global ausgelaufen und hat alle
    Buttons in flex-Containern auf volle Breite gestreckt). */
.cq-loc-buttons .cq-btn-ghost,
.cq-loc-buttons .cq-btn-primary {
    flex: 1;
    padding: 1rem 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.3s var(--ease);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.cq-btn-ghost {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(178, 148, 116, 0.4);
    color: var(--white);
}

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

.cq-btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: 2px solid var(--gold);
    color: var(--black);
    font-weight: 600;
    box-shadow: 0 5px 20px rgba(178, 148, 116, 0.3);
}

.cq-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(178, 148, 116, 0.5);
}

/* ══════════════════════════════════════════════════
   ÜBER UNS (About Text + Divider)
   ══════════════════════════════════════════════════ */
.cq-about-text {
    max-width: 820px;
    margin: 0 auto 3.5rem;
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    line-height: 2;
    text-align: center;
}

.cq-about-text strong {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.cq-about-divider {
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 0 auto 3rem;
    opacity: 0.6;
}

/* ══════════════════════════════════════════════════
   SO FUNKTIONIERT'S (Steps)
   ══════════════════════════════════════════════════ */
.cq-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 2rem;
    position: relative;
}

.cq-step {
    text-align: center;
    padding: 2rem 1.5rem;
    position: relative;
}

.cq-step::after {
    content: '';
    position: absolute;
    top: 2.8rem;
    right: 0;
    width: 40%;
    height: 1px;
    background: linear-gradient(to right, rgba(178,148,116,0.55), transparent);
}

.cq-step:last-child::after { display: none; }

.cq-step::before {
    content: '';
    position: absolute;
    top: 2.8rem;
    left: 0;
    width: 40%;
    height: 1px;
    background: linear-gradient(to left, rgba(178,148,116,0.55), transparent);
}

.cq-step:first-child::before { display: none; }

.cq-step-num {
    width: 36px;
    height: 36px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--gold);
    border: 1px solid rgba(178,148,116,0.45);
    position: relative;
    z-index: 1;
    background: var(--surface);
}

.cq-step-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.cq-step-desc {
    font-size: 0.82rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .cq-steps {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .cq-step::after, .cq-step::before { display: none; }
}

@media (max-width: 480px) {
    .cq-steps { grid-template-columns: 1fr; }
    .cq-step { position: relative; padding-bottom: 2.5rem; }
    .cq-step:last-child { padding-bottom: 2rem; }
    .cq-step::after {
        display: block;
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        height: 2rem;
        top: auto;
        right: auto;
        background: linear-gradient(to bottom, rgba(178,148,116,0.45), transparent);
    }
    .cq-step::before { display: none; }
    .cq-step:last-child::after { display: none; }
}

/* ══════════════════════════════════════════════════
   SOCIAL PROOF
   ══════════════════════════════════════════════════ */
.cq-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
}

.cq-proof-item {
    text-align: center;
    padding: 2.5rem 1.5rem;
    position: relative;
    border: 1px solid var(--glass-border);
    border-right: none;
    background: var(--glass);
    transition: all 0.4s var(--ease);
}

.cq-proof-item:last-child {
    border-right: 1px solid var(--glass-border);
}

.cq-proof-item:hover {
    background: var(--glass-heavy);
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.cq-proof-value {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 100;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(178, 148, 116, 0.3);
}

.cq-proof-label {
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/* Star Rating */
.cq-proof-stars {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.cq-proof-star {
    /* Auf die Hoehe der Nachbarzahlen gebracht — 14 px wirkten neben
       einer 3rem-Zahl wie ein Versehen. */
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--gold);
    opacity: 0.8;
}

@media (max-width: 600px) {
    .cq-proof-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cq-proof-item:nth-child(2) {
        border-right: 1px solid var(--glass-border);
    }

    .cq-proof-item:nth-child(3),
    .cq-proof-item:nth-child(4) {
        border-top: none;
    }
}

/* ══════════════════════════════════════════════════
   EVENTS TEASER
   ══════════════════════════════════════════════════ */
.cq-events-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.cq-event-card {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--elevated);
    border: 1px solid var(--glass-border);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    transition: all 0.4s var(--ease);
}

.cq-event-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
    transition: all 0.4s;
}

.cq-event-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
    box-shadow: 0 20px 50px rgba(178, 148, 116, 0.2);
}

.cq-event-card:hover::before {
    background: linear-gradient(180deg, rgba(178, 148, 116, 0.05) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.cq-event-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    opacity: 0.4;
    transition: all 0.6s var(--ease);
    z-index: 0;
}

.cq-event-card:hover .cq-event-icon {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1.2);
}

.cq-event-content {
    position: relative;
    z-index: 2;
}

.cq-event-title {
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 0.4rem;
}

.cq-event-desc {
    font-size: 0.72rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.cq-event-arrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 0.8rem;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.4s var(--ease);
}

.cq-event-card:hover .cq-event-arrow {
    opacity: 0.7;
    transform: translateY(0);
}

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

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

    .cq-event-card {
        aspect-ratio: 2/1;
    }
}

/* ══════════════════════════════════════════════════
   GUTSCHEIN BANNER
   ══════════════════════════════════════════════════ */
.cq-voucher {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 3rem);
    text-align: center;
    overflow: hidden;
    z-index: 10;
    background: var(--black);
}

.cq-voucher::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(178, 148, 116, 0.06) 0%, transparent 50%, rgba(178, 148, 116, 0.03) 100%);
    pointer-events: none;
}

.cq-voucher-inner {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    padding: 3rem 2rem;
    border: 1px solid rgba(178, 148, 116, 0.25);
    background: var(--glass);
}

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

/* Corner accents */
.cq-voucher-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--gold);
    border-style: solid;
    opacity: 0.4;
}

.cq-voucher-corner--tl {
    top: -1px;
    left: -1px;
    border-width: 1px 0 0 1px;
}

.cq-voucher-corner--tr {
    top: -1px;
    right: -1px;
    border-width: 1px 1px 0 0;
}

.cq-voucher-corner--bl {
    bottom: -1px;
    left: -1px;
    border-width: 0 0 1px 1px;
}

.cq-voucher-corner--br {
    bottom: -1px;
    right: -1px;
    border-width: 0 1px 1px 0;
}

.cq-voucher-label {
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.6;
    margin-bottom: 1rem;
}

.cq-voucher-title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 100;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

.cq-voucher-desc {
    font-size: 0.85rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.cq-voucher-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: 2px solid var(--gold);
    color: var(--black);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s var(--ease);
    box-shadow: 0 5px 25px rgba(178, 148, 116, 0.3);
}

.cq-voucher-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(178, 148, 116, 0.5);
}

.cq-voucher-cta span {
    position: relative;
    z-index: 2;
}

/* ══════════════════════════════════════════════════
   PANORAMA SLIDER PLACEHOLDER
   ══════════════════════════════════════════════════ */
.cq-slider-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    border: 1px dashed rgba(178, 148, 116, 0.2);
    margin: 2rem auto;
    max-width: 1000px;
}

.cq-slider-placeholder p {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* ══════════════════════════════════════════════════
   DESIGN-UPGRADE v2 — Homepage-spezifisch
   ══════════════════════════════════════════════════ */

/* Step 02 im Sekundaer-Ton (siehe tokens.css) */
.cq-step:nth-child(2) .cq-step-num {
    color: var(--accent);
    border-color: var(--accent-border);
}

/* Location-Cards Stagger entfernt (Beschluss Viktor 17.09.2026):
   Kacheln in einer Flucht — s. global.css "Upgrade 6A". */
.cq-locations.cq-grid-stagger > *:nth-child(2n) {
    transform: none;
}

/* ══════════════════════════════════════════════════
   FOOTER (inline)
   ══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   MOBIL-KORREKTUREN — bewusst am DATEIENDE
   Diese Regeln muessen nach ihren Grundregeln stehen. @media erhoeht die
   Spezifitaet NICHT: Eine gleich spezifische Regel weiter unten in der Datei
   gewinnt. Ein frueherer Versuch weiter oben wurde deshalb von
   `.cq-hero-scroll { bottom: 2.5rem }` (Zeile ~880) wirkungslos gemacht —
   der Hinweis blieb hinter dem Buchen-Balken.
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Der feste "Jetzt buchen"-Balken steht unten und verdeckte den
       Entdecken-Hinweis vollstaendig. Balkenhoehe rund 4,6rem
       (0,8rem Aussenabstand + 1rem Innenabstand je Seite + Textzeile),
       dazu Luft und die Geraete-Sicherheitszone. */
    .cq-hero-scroll {
        bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
        z-index: 3;   /* ueber dem Video-Hintergrund, unter dem Balken (997) */
    }

    /* Bildausschnitt bleibt formatfuellend (object-fit:cover aus der
       Grundregel). Die Alternative "ganzes Motiv zeigen" wurde am 13.08.2026
       ausprobiert und verworfen: Das Objekt wird dabei zu klein. Das Motiv
       ist damit auf Hochkant-Schirmen seitlich angeschnitten — bewusst in
       Kauf genommen. Sauber loesen liesse sich das nur mit einer eigenen
       Hochkant-Fassung des Videos (9:16). */
}


/* Stadt hinter dem Raumnamen — nur auf der Startseite noetig, weil dort
   Bewertungen aus mehreren Standorten nebeneinanderstehen. */
.cq-review-stadt {
    opacity: 0.55;
}