/* HAKIM Theme — Homepage Styles (Sections 1-5) */

/* ============================================================
   1. HERO — Cinematic full-viewport
   ============================================================ */

.hk-hero--cinematic {
    --hk-hero-frost: rgba(244, 240, 231, 0.26);
    --hk-hero-scrim: rgba(27, 42, 74, 0.30);
    position: relative;
    height: 100svh;
    min-height: 640px;
    overflow: hidden;
    background: var(--hk-parchment);
    display: grid;
    place-items: center;
    text-align: center;
}
:root[data-theme="dark"] .hk-hero--cinematic {
    --hk-hero-frost: rgba(9, 16, 32, 0.22);
    --hk-hero-scrim: rgba(7, 13, 26, 0.42);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hk-hero--cinematic {
        --hk-hero-frost: rgba(9, 16, 32, 0.22);
        --hk-hero-scrim: rgba(7, 13, 26, 0.42);
    }
}

/* Full-bleed background video (freezes on the last frame — see hakim-fx.js) */
.hk-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) { .hk-hero__video { display: none; } }
@media (prefers-reduced-data: reduce) { .hk-hero__video { display: none; } }

/* Frosted glass + bottom scrim (legibility) + film grain */
.hk-hero__frost {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--hk-hero-frost);
    backdrop-filter: blur(12px) saturate(1.12);
    -webkit-backdrop-filter: blur(12px) saturate(1.12);
}
.hk-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 32%, var(--hk-hero-scrim) 90%);
}
.hk-hero__grain {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0.34;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* Centered lockup: logo + wordmark + motto */
.hk-hero__lockup {
    position: relative;
    z-index: 6;
    padding: 0 22px;
    width: 100%;
}

/* Static logo icon — joins the motto in one beat, shortly after the first sheen */
.hk-hero__logo {
    width: 150px;
    height: auto;
    display: block;
    margin: 0 auto 24px;
    opacity: 0;
    transform: translateY(-8px) scale(0.94);
    filter: blur(5px) drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 3.8s,
                transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 3.8s,
                filter 1s ease 3.8s;
}
.hk-hero.is-playing .hk-hero__logo {
    opacity: 0.97;
    transform: none;
    filter: blur(0) drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
}

/* Mirrored calligraph wordmark */
.hk-hero__wm-wrap {
    display: inline-block;
    position: relative;
    width: min(92vw, 980px);
}
.hk-hero__wm-main, .hk-hero__wm-refl { position: relative; display: block; }
.hk-hero__wm-svg { display: block; width: 100%; height: auto; }
.hk-hero__wm-refl {
    transform: scaleY(-1);
    margin-top: -1%;
    opacity: 0.26;
    filter: blur(2.5px);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(0deg, transparent 8%, rgba(0,0,0,0.9) 88%);
    mask-image: linear-gradient(0deg, transparent 8%, rgba(0,0,0,0.9) 88%);
}
.hk-hero.is-playing .hk-hero__wm-refl { animation: hk-wm-wave 8s ease-in-out 3.4s infinite; }
@keyframes hk-wm-wave {
    0%,100% { transform: scaleY(-1) skewX(0) scaleX(1); }
    30% { transform: scaleY(-1) skewX(1.4deg) scaleX(1.005); }
    70% { transform: scaleY(-1) skewX(-1.2deg) scaleX(0.997); }
}

/* Wordmark text metrics (shared by static fallback + drawn letters) */
.hk-hero__wm-svg text {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    font-size: 188px;
}
/* No-JS / reduced-motion fallback: static gold word */
.hk-hero__wm-letters, .hk-hero__wm-clipped { opacity: 0; }
/* JS present (hk-reveal-on is set pre-paint): hide the static word immediately
   so it can't flash before the write-on entrance takes over. Reduced-motion
   keeps it visible — that IS the intended fallback there. */
html.hk-reveal-on .hk-hero__wm-static { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    html.hk-reveal-on .hk-hero__wm-static { opacity: 1; }
}
.hk-hero.is-playing .hk-hero__wm-static,
.hk-hero.is-resting .hk-hero__wm-static { opacity: 0; }
.hk-hero.is-playing .hk-hero__wm-letters,
.hk-hero.is-playing .hk-hero__wm-clipped,
.hk-hero.is-resting .hk-hero__wm-clipped { opacity: 1; }

/* Resting state (returning same-day visitor): final gold + eternal shine/sway,
   no write-on entrance. Reduced-motion never reaches here (JS gates it). */
.hk-hero.is-resting .hk-hero__wm-pour { transform: translateY(0); }
.hk-hero.is-resting .hk-hero__wm-shine { animation: hk-wm-shine 6.5s cubic-bezier(0.4,0,0.2,1) 1s infinite; }
.hk-hero.is-resting .hk-hero__wm-refl { animation: hk-wm-wave 8s ease-in-out infinite; }

/* Pen stroke: five letters drawn in sequence */
.hk-hero__wm-letters .draw {
    fill: none;
    stroke: rgba(230, 204, 150, 0.9);
    stroke-width: 1.5;
    stroke-dasharray: 1150;
    stroke-dashoffset: 1150;
}
.hk-hero.is-playing .hk-hero__wm-letters .draw {
    animation: hk-wm-scribe 0.8s cubic-bezier(0.45,0.15,0.35,0.9) forwards,
               hk-wm-dim 0.7s ease 2s forwards;
}
.hk-hero.is-playing .hk-hero__wm-letters .draw:nth-of-type(1) { animation-delay: 0.25s, 2s; }
.hk-hero.is-playing .hk-hero__wm-letters .draw:nth-of-type(2) { animation-delay: 0.47s, 2s; }
.hk-hero.is-playing .hk-hero__wm-letters .draw:nth-of-type(3) { animation-delay: 0.69s, 2s; }
.hk-hero.is-playing .hk-hero__wm-letters .draw:nth-of-type(4) { animation-delay: 0.91s, 2s; }
.hk-hero.is-playing .hk-hero__wm-letters .draw:nth-of-type(5) { animation-delay: 1.13s, 2s; }
@keyframes hk-wm-scribe { to { stroke-dashoffset: 0; } }
@keyframes hk-wm-dim { to { stroke: rgba(230, 204, 150, 0.4); } }

/* Gold pours up out of the horizon while the pen finishes; sheen lives in the same clip */
.hk-hero__wm-pour { transform: translateY(212px); }
.hk-hero.is-playing .hk-hero__wm-pour { animation: hk-wm-pour 1.3s cubic-bezier(0.22,1,0.36,1) 1.5s forwards; }
@keyframes hk-wm-pour { to { transform: translateY(0); } }
.hk-hero__wm-shine { transform: translateX(-260px) skewX(-14deg); opacity: 0; }
.hk-hero.is-playing .hk-hero__wm-shine { animation: hk-wm-shine 6.5s cubic-bezier(0.4,0,0.2,1) 3.4s infinite; }
@keyframes hk-wm-shine {
    0% { opacity: 0; transform: translateX(-260px) skewX(-14deg); }
    6% { opacity: 1; }
    30% { opacity: 1; transform: translateX(1130px) skewX(-14deg); }
    36%,100% { opacity: 0; transform: translateX(1130px) skewX(-14deg); }
}

/* Motto — appears with the first sheen */
.hk-hero__motto {
    margin: 14px auto 0;
    font-family: var(--hk-font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(23px, 4.4vw, 36px);
    letter-spacing: 0.015em;
    color: #F0EBDF;
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 3.8s, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 3.8s;
}
.hk-hero.is-playing .hk-hero__motto { opacity: 1; transform: none; }

/* Scroll funnel — small gold arrow */
.hk-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 3.4vh;
    transform: translateX(-50%);
    z-index: 7;
    display: block;
    padding: 10px;
    opacity: 0;
    transition: opacity 1.2s ease 4.8s;
}
.hk-hero.is-playing .hk-hero__scroll { opacity: 1; }
.hk-hero__scroll svg {
    display: block;
    width: 30px;
    height: 30px;
    stroke: var(--hk-gold-light);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.4));
    animation: hk-hero-dip 2.4s ease-in-out infinite;
}
.hk-hero__scroll:focus-visible { outline: 2px solid var(--hk-gold); outline-offset: 3px; border-radius: 8px; }
@keyframes hk-hero-dip {
    0%,100% { transform: translateY(-3px); opacity: 1; }
    50% { transform: translateY(5px); opacity: 0.5; }
}

/* Static-word fallback keeps a gentle presence when not animating */
.hk-hero:not(.is-playing) .hk-hero__logo,
.hk-hero:not(.is-playing) .hk-hero__motto,
.hk-hero:not(.is-playing) .hk-hero__scroll { opacity: 1; transform: none; filter: none; }
.hk-hero:not(.is-playing) .hk-hero__logo { opacity: 0.97; }

@media (max-width: 480px) {
    .hk-hero__logo { width: 112px; margin-bottom: 20px; }
    .hk-hero--cinematic { min-height: 560px; }
}
@media (prefers-reduced-motion: reduce) {
    .hk-hero__logo, .hk-hero__motto, .hk-hero__scroll { opacity: 1; transform: none; filter: none; }
    .hk-hero__logo { opacity: 0.97; }
    .hk-hero__scroll svg { animation: none; }
}

/* ============================================================
   1b. HERO — "Der Horizont" overlay
   Cinema gates part from a black stage, a gold horizon draws across
   the mirror axis, the wordmark rises out of it, the motto condenses
   into focus. One "Nachtsee" identity in both site themes.
   Layer scheme (single-digit z, per the z-index convention):
     video 1 · grade 2 · frost 3 · scrim 4 · grain 5 · lockup 6 ·
     scroll 7 · gates 8 · captions 9
   Fallback contract: NEW cinematic elements default to their FINAL
   (open / drawn / risen) state so no-JS shows the open stage, never a
   black screen. `html.hk-reveal-on` (set pre-paint only when JS runs)
   arms the hidden initial state; `.is-playing` releases the entrance;
   `html.hk-skip-anim` (returning same-day OR reduced-motion) snaps to
   the final state with no transition.
   ============================================================ */

/* One identity for both themes — force the Nachtsee palette */
.hk-hero[data-hero="horizont"] {
    --hk-hero-frost: rgba(9, 16, 32, 0.22);
    --hk-hero-scrim: rgba(5, 9, 18, 0.48);
}
.hk-hero[data-hero="horizont"] .hk-hero__video { filter: brightness(0.60) saturate(0.72) contrast(1.05); }
.hk-hero[data-hero="horizont"] .hk-hero__wm-main { filter: drop-shadow(0 0 26px rgba(200, 169, 110, 0.24)); }

/* Nocturne colour grade — moonlight from the upper right */
.hk-hero__grade {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(90% 70% at 72% 6%, rgba(180, 205, 230, 0.16), transparent 55%),
                linear-gradient(180deg, rgba(6, 11, 24, 0.30), transparent 50%, rgba(6, 11, 24, 0.42));
}

/* Cinema gates — default OPEN (no-JS safe) */
.hk-hero__gate {
    position: absolute; left: 0; width: 100%; height: 50.5%;
    z-index: 8; background: #05080F;
    transition: transform 2.4s cubic-bezier(0.76, 0, 0.19, 1) 0.1s;
}
.hk-hero__gate--top { top: -0.25%; transform: translateY(-102%); }
.hk-hero__gate--bot { bottom: -0.25%; transform: translateY(102%); }
.hk-hero__gate--top::after, .hk-hero__gate--bot::before {
    content: ""; position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 169, 110, 0.9), transparent);
}
.hk-hero__gate--top::after { bottom: 0; }
.hk-hero__gate--bot::before { top: 0; }
/* JS present → start closed for the aperture */
html.hk-reveal-on .hk-hero__gate--top,
html.hk-reveal-on .hk-hero__gate--bot { transform: translateY(0); }
/* entrance parts them */
.hk-hero[data-hero="horizont"].is-playing .hk-hero__gate--top { transform: translateY(-102%); }
.hk-hero[data-hero="horizont"].is-playing .hk-hero__gate--bot { transform: translateY(102%); }
/* returning visitor / reduced-motion → open instantly */
html.hk-skip-anim .hk-hero__gate--top { transform: translateY(-102%); transition: none; }
html.hk-skip-anim .hk-hero__gate--bot { transform: translateY(102%); transition: none; }

/* Corner captions */
.hk-hero__cap {
    position: absolute; top: 26px; z-index: 9;
    font-family: var(--hk-font-body);
    font-weight: 500; font-size: 11px; line-height: 1;
    letter-spacing: 0.26em;
    color: #D9D2C0;
    opacity: 0.85;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.hk-hero__cap--l { inset-inline-start: 30px; }
.hk-hero__cap--r { inset-inline-end: 30px; }
html.hk-reveal-on .hk-hero__cap { opacity: 0; transition: opacity 1.3s ease 4.3s; }
.hk-hero[data-hero="horizont"].is-playing .hk-hero__cap { opacity: 0.85; }
html.hk-skip-anim .hk-hero__cap { opacity: 0.85; transition: none; }

/* Horizon hairline — full-bleed across the mirror axis */
.hk-hero__horizon {
    position: absolute; top: 49.75%; left: 50%;
    width: 100vw; height: 1px;
    transform: translateX(-50%) scaleX(1);
    background: linear-gradient(90deg, transparent, rgba(212, 188, 138, 0.85) 16%, rgba(212, 188, 138, 0.85) 84%, transparent);
    box-shadow: 0 0 18px rgba(200, 169, 110, 0.45);
    pointer-events: none;
}
html.hk-reveal-on .hk-hero__horizon {
    transform: translateX(-50%) scaleX(0);
    transition: transform 1.9s cubic-bezier(0.22, 1, 0.36, 1) 0.75s;
}
.hk-hero[data-hero="horizont"].is-playing .hk-hero__horizon { transform: translateX(-50%) scaleX(1); }
html.hk-skip-anim .hk-hero__horizon { transform: translateX(-50%) scaleX(1); transition: none; }

/* Wordmark rises out of the horizon (replaces the pen-write) */
.hk-hero[data-hero="horizont"] .hk-hero__wm-letters { display: none; }
.hk-hero[data-hero="horizont"] .hk-hero__wm-pour { transform: translateY(0); }
.hk-hero[data-hero="horizont"].is-playing .hk-hero__wm-pour { animation: none; }
.hk-hero[data-hero="horizont"] .hk-hero__wm-main,
.hk-hero[data-hero="horizont"] .hk-hero__wm-refl { overflow: hidden; }
html.hk-reveal-on .hk-hero[data-hero="horizont"] .hk-hero__wm-svg {
    transform: translateY(103%);
    transition: transform 2.1s cubic-bezier(0.22, 1, 0.36, 1) 1.15s;
}
/* release must OUT-SPECIFY the arming rule above ((0,4,1)) — is-playing
   only ever exists alongside hk-reveal-on, so prefixing it is safe */
html.hk-reveal-on .hk-hero[data-hero="horizont"].is-playing .hk-hero__wm-svg { transform: translateY(0); }
html.hk-skip-anim .hk-hero[data-hero="horizont"] .hk-hero__wm-svg { transform: translateY(0); transition: none; }
/* sheen waits until the word has surfaced */
.hk-hero[data-hero="horizont"].is-playing .hk-hero__wm-shine { animation-delay: 3.7s; }

/* Motto — upright, larger, deeper; condenses out of a wide blurred line */
.hk-hero[data-hero="horizont"] .hk-hero__motto {
    font-style: normal;
    font-size: clamp(26px, 5vw, 42px);
    margin-top: 26px;
    opacity: 1; transform: none; filter: none; letter-spacing: 0.015em;
}
html.hk-reveal-on .hk-hero[data-hero="horizont"] .hk-hero__motto {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(9px);
    letter-spacing: 0.13em;
    transition: opacity 1.7s cubic-bezier(0.22, 1, 0.36, 1) 3.6s,
                transform 1.7s cubic-bezier(0.22, 1, 0.36, 1) 3.6s,
                filter 1.5s ease 3.6s,
                letter-spacing 2.4s cubic-bezier(0.22, 1, 0.36, 1) 3.5s;
}
/* release must OUT-SPECIFY the arming rule above ((0,4,1)) */
html.hk-reveal-on .hk-hero[data-hero="horizont"].is-playing .hk-hero__motto {
    opacity: 1; transform: none; filter: blur(0); letter-spacing: 0.015em;
}
html.hk-skip-anim .hk-hero[data-hero="horizont"] .hk-hero__motto {
    opacity: 1; transform: none; filter: none; letter-spacing: 0.015em; transition: none;
}

/* Scroll arrow lower — clear of the enlarged motto on wide/short viewports */
.hk-hero[data-hero="horizont"] .hk-hero__scroll { bottom: 10px; padding: 6px 10px; }

/* ============================================================
   2. MANIFESTO — Statement section
   ============================================================ */

.hk-manifesto {
    background: var(--hk-parchment);
    padding: clamp(80px, 10vw, 130px) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Ornamental star watermark */
.hk-manifesto::before {
    content: '\2726';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36vw;
    color: var(--hk-gold);
    opacity: 0.035;
    pointer-events: none;
    line-height: 1;
}

/* Top + bottom gold hairlines */
.hk-manifesto::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, 60%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    opacity: 0.4;
}

.hk-manifesto__inner {
    max-width: 780px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hk-manifesto__deco {
    display: block;
    font-family: var(--hk-font-heading);
    font-size: 7rem;
    line-height: 1;
    color: var(--hk-gold);
    opacity: 0.3;
    margin-bottom: -1.5rem;
}

.hk-manifesto__text {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.8vw, 2.8rem);
    line-height: 1.45;
    color: var(--hk-heading);
    letter-spacing: -0.01em;
}

/* "Fokus" — each word sharpens out of blur, staggered (delay set inline per word) */
.hk-manifesto__w {
    display: inline-block;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(6px);
    transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s var(--hk-ease-out);
}
.hk-manifesto__inner.is-visible .hk-manifesto__w {
    opacity: 1;
    filter: blur(0);
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .hk-manifesto__w { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
}

.hk-manifesto__divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 1.75rem auto;
}

.hk-manifesto__divider span {
    width: 48px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    display: block;
}

/* Diamond in the divider */
.hk-manifesto__divider::before {
    content: '\25C7';
    font-size: 8px;
    color: var(--hk-gold);
    opacity: 0.6;
}

.hk-manifesto__sub {
    font-family: var(--hk-font-body);
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--hk-body);
    /* 0.75 dropped body text to 3.78:1 on parchment; 0.9 keeps the muted look at WCAG AA */
    opacity: 0.9;
    max-width: 540px;
    margin: 0 auto;
    letter-spacing: 0.01em;
}

/* Bottom gold hairline toward events section */
.hk-manifesto__edge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, 60%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    opacity: 0.4;
}

/* ============================================================
   4. PROJECTS — "Die Lichtnische" (mihrab alcoves in the dark)
   ============================================================ */

.hk-projects {
    position: relative;
    overflow: hidden;
    background: linear-gradient(170deg, #0B1428 0%, #111D38 55%, #0A1122 100%);
    padding: var(--hk-section-padding) 0;
}

.hk-projects h2 {
    text-align: center;
    font-weight: 300;
    color: var(--hk-white);
}

.hk-projects .hk-section-heading__overline {
    color: var(--hk-gold-light);
}

/* Reveal choreography keys off the stage (base .hk-animate fade neutralised) */
.hk-projects__stage.hk-animate {
    opacity: 1;
    transform: none;
}

.hk-projects__stage .hk-section-heading {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1s var(--hk-ease) 0.1s, transform 1s var(--hk-ease) 0.1s;
}

.hk-projects__stage.is-visible .hk-section-heading {
    opacity: 1;
    transform: none;
}

.hk-projects__niches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(22px, 4vw, 52px);
    max-width: 1040px;
    margin: 0 auto;
}

.hk-projects__niche {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 1s var(--hk-ease) var(--hk-niche-delay, 0s), transform 1s var(--hk-ease) var(--hk-niche-delay, 0s);
}

.hk-projects__stage.is-visible .hk-projects__niche {
    opacity: 1;
    transform: none;
}

/* The arched alcove with stepped gold liners */
.hk-projects__alcove {
    position: relative;
    aspect-ratio: 3 / 4.2;
    overflow: hidden;
    background: #0A1122;
    border: 1px solid rgba(200, 169, 110, 0.55);
    border-radius: 170px 170px 0 0;
}

.hk-projects__alcove::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(200, 169, 110, 0.35);
    border-radius: 160px 160px 0 0;
    z-index: 6;
    pointer-events: none;
}

.hk-projects__alcove::after {
    content: '';
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(200, 169, 110, 0.22);
    border-radius: 150px 150px 0 0;
    z-index: 6;
    pointer-events: none;
}

/* Project resting in the depth of the niche — lifted out of darkness */
.hk-projects__alcove-back {
    position: absolute;
    inset: 0;
}

.hk-projects__alcove-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.28) saturate(0.7);
    transition: filter 2.2s var(--hk-ease) var(--hk-niche-delay, 0s), transform 1.4s var(--hk-ease);
}

.hk-projects__stage.is-visible .hk-projects__alcove-back img {
    filter: brightness(0.96) saturate(0.96);
}

.hk-projects__niche:hover .hk-projects__alcove-back img {
    transform: scale(1.05);
}

.hk-projects__alcove-back picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hk-projects__alcove-back--contain img {
    object-fit: contain;
    background: #FBF8F1;
    padding: 14%;
}

/* Light from the crown of the arch — no visible lamp, only the glow */
.hk-projects__alcove-light {
    position: absolute;
    left: 50%;
    top: -8%;
    transform: translateX(-50%);
    width: 130%;
    height: 62%;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(ellipse 42% 58% at 50% 0%, rgba(226, 198, 140, 0.32), transparent 70%);
    opacity: 0;
    transition: opacity 2.2s var(--hk-ease) calc(var(--hk-niche-delay, 0s) + 0.5s), width 0.8s var(--hk-ease), height 0.8s var(--hk-ease);
}

.hk-projects__stage.is-visible .hk-projects__alcove-light {
    opacity: 1;
}

.hk-projects__niche:hover .hk-projects__alcove-light {
    width: 160%;
    height: 74%;
}

.hk-projects__niche h3 {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--hk-white);
    margin-top: 20px;
    transition: color 0.4s var(--hk-ease);
}

.hk-projects__niche:hover h3 {
    color: var(--hk-gold-light);
}

.hk-projects__desc {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(247, 244, 238, 0.75);
    margin: 8px auto 0;
    max-width: 34ch;
}

.hk-projects__facts {
    display: flex;
    gap: 16px;
    justify-content: center;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: rgba(247, 244, 238, 0.7);
    margin-top: 12px;
}

.hk-projects__facts b {
    font-weight: 600;
    color: var(--hk-gold-light);
}

.hk-projects__link {
    display: inline-block;
    margin-top: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--hk-gold-light);
    transition: letter-spacing 0.5s var(--hk-ease);
}

.hk-projects__niche:hover .hk-projects__link {
    letter-spacing: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
    .hk-projects__stage .hk-section-heading,
    .hk-projects__niche,
    .hk-projects__alcove-light {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hk-projects__alcove-light {
        transform: translateX(-50%);
    }
    .hk-projects__alcove-back img {
        filter: brightness(0.96) saturate(0.96);
        transition: none;
    }
}

@media (max-width: 820px) {
    .hk-projects__niches {
        grid-template-columns: 1fr;
        max-width: 340px;
    }
}

/* ============================================================
   5. AKTUELLES — Editorial grid
   ============================================================ */

.hk-aktuelles {
    background: var(--hk-parchment);
    padding: var(--hk-section-padding) 0;
}

.hk-aktuelles h2 {
    text-align: center;
    font-weight: 300;
    color: var(--hk-heading);
}

.hk-aktuelles__more .hk-btn--text,
.hk-hp-events .hk-hp-events__all-btn,
.hk-pv-teaser__cta .hk-btn--gold {
    background: rgba(200, 169, 110, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(200, 169, 110, 0.45);
    border-radius: 100px;
    color: var(--hk-gold);
    padding: 0.75rem 2.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    box-shadow: none;
    transition: background 0.25s var(--hk-ease), border-color 0.25s var(--hk-ease), color 0.25s var(--hk-ease);
}

.hk-aktuelles__more .hk-btn--text:hover,
/* legacy .hk-events hover removed */
.hk-pv-teaser__cta .hk-btn--gold:hover {
    background: rgba(200, 169, 110, 0.35);
    border-color: rgba(200, 169, 110, 0.7);
    color: var(--hk-gold-light);
    transform: none;
    box-shadow: none;
}

/* Aktuelles — "Der Salon": magazine feature spreads.
   Alternating rows with a wide gold-framed panorama that unveils from the
   side, a ghost ordinal behind the text, serif headline + gold rule. Each
   row reveals individually via .hk-animate → .is-visible (base fade
   neutralised below; the veil/body choreography is scoped here). */
.hk-aktuelles__salon {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 7vw, 90px);
    max-width: 1080px;
    margin: 0 auto;
}

.hk-aktuelles__row.hk-animate {
    opacity: 1;
    transform: none;
}

.hk-aktuelles__row-link {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas: "im bd";
    gap: clamp(24px, 4.5vw, 56px);
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.hk-aktuelles__row--alt .hk-aktuelles__row-link {
    grid-template-columns: 0.85fr 1.15fr;
    grid-template-areas: "bd im";
}

/* Ghost ordinal — sits at the OUTER edge of the text column (away from the
   image), clear of the meta/title so it reads as a quiet watermark. */
.hk-aktuelles__num {
    position: absolute;
    top: -0.78em;
    inset-inline-end: -6px;
    font-family: var(--hk-font-heading);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(76px, 9vw, 112px);
    line-height: 1;
    color: var(--hk-heading);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

.hk-aktuelles__row--alt .hk-aktuelles__num {
    inset-inline-end: auto;
    inset-inline-start: -6px;
}

/* Panorama in a double gold frame, unveiled from the side */
.hk-aktuelles__row-im {
    grid-area: im;
    position: relative;
    aspect-ratio: 21 / 10;
    overflow: hidden;
    border: 1px solid rgba(139, 105, 20, 0.22);
    z-index: 1;
}

.hk-aktuelles__row-im::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid color-mix(in srgb, var(--hk-gold) 40%, transparent);
    z-index: 3;
    pointer-events: none;
}

.hk-aktuelles__row-im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.4s var(--hk-ease);
}

.hk-aktuelles__row:hover .hk-aktuelles__row-im img {
    transform: scale(1.05);
}

.hk-aktuelles__row-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--hk-parchment-dark, #EFE9DD);
    transform-origin: right;
    transition: transform 1.4s var(--hk-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) 0.15s;
}

.hk-aktuelles__row--alt .hk-aktuelles__row-veil {
    transform-origin: left;
}

.hk-aktuelles__row.is-visible .hk-aktuelles__row-veil {
    transform: scaleX(0);
}

/* Body */
.hk-aktuelles__row-bd {
    grid-area: bd;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s var(--hk-ease) 0.35s, transform 1s var(--hk-ease) 0.35s;
}

.hk-aktuelles__row.is-visible .hk-aktuelles__row-bd {
    opacity: 1;
    transform: none;
}

.hk-aktuelles__row-meta {
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex-wrap: wrap;
}

.hk-aktuelles__row-meta .hk-caption {
    font-size: 12px;
}

.hk-aktuelles__row-rt {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--hk-body);
    opacity: 0.7;
}

.hk-aktuelles__item-badge {
    background: rgba(200, 169, 110, 0.14);
    border: 1px solid rgba(139, 105, 20, 0.28);
    color: var(--hk-gold);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 4px 11px;
    border-radius: 999px;
}

.hk-aktuelles__row-bd h3 {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    font-size: clamp(1.55rem, 3.4vw, 2.1rem);
    line-height: 1.16;
    color: var(--hk-heading);
    margin: 12px 0 0;
    transition: color 0.4s var(--hk-ease);
}

.hk-aktuelles__row:hover .hk-aktuelles__row-bd h3 {
    color: var(--hk-gold);
}

.hk-aktuelles__row-rule {
    display: block;
    width: 52px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--hk-gold), transparent);
    margin-top: 16px;
}

.hk-aktuelles__row-bd p {
    color: var(--hk-body);
    font-size: 14px;
    line-height: 1.8;
    margin: 14px 0 0;
    max-width: 46ch;
}

.hk-aktuelles__item-more {
    display: inline-block;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--hk-gold);
    transition: color 0.3s var(--hk-ease), letter-spacing 0.5s var(--hk-ease);
}

.hk-aktuelles__row-link:visited .hk-aktuelles__item-more {
    color: var(--hk-gold);
}

.hk-aktuelles__row:hover .hk-aktuelles__item-more {
    color: var(--hk-gold-light);
    letter-spacing: 0.16em;
}

/* Draft / In Vorbereitung state */
.hk-aktuelles__row--preview {
    opacity: 0.8;
}
.hk-aktuelles__item-badge--draft {
    background: var(--hk-navy);
    border-color: var(--hk-navy);
    color: var(--hk-gold-light);
}
.hk-aktuelles__item-more--draft {
    color: var(--hk-body);
    font-style: italic;
    letter-spacing: normal;
}
.hk-aktuelles__row--preview:hover .hk-aktuelles__item-more--draft {
    color: var(--hk-body);
    letter-spacing: normal;
}

@media (prefers-reduced-motion: reduce) {
    .hk-aktuelles__row-veil {
        transform: scaleX(0);
        transition: none;
    }
    .hk-aktuelles__row-bd {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 860px) {
    .hk-aktuelles__row-link,
    .hk-aktuelles__row--alt .hk-aktuelles__row-link {
        grid-template-columns: 1fr;
        grid-template-areas: "im" "bd";
    }
    .hk-aktuelles__num,
    .hk-aktuelles__row--alt .hk-aktuelles__num {
        inset-inline-start: 0;
        inset-inline-end: auto;
    }
}

.hk-aktuelles__more {
    text-align: center;
    margin-top: 2.5rem;
}

.hk-aktuelles__empty {
    text-align: center;
    color: var(--hk-body);
    opacity: 0.7;
    padding: 2rem 0;
}

/* ============================================================
   Section heading gold shimmer on scroll-reveal
   ============================================================ */

.hk-aktuelles .hk-section-heading.is-visible h2,
.hk-aktuelles h2.is-visible {
    background: linear-gradient(135deg, var(--hk-heading) 0%, var(--hk-heading) 40%, var(--hk-gold) 50%, var(--hk-heading) 60%, var(--hk-heading) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hk-shimmer 3s ease-in-out 1;
}

.hk-kompendium-banner h2.is-visible,
.hk-hp-events .hk-hp-events__stage.is-visible h2,
.hk-hp-events h2.is-visible,
.hk-projects .hk-projects__stage.is-visible h2 {
    background: linear-gradient(135deg, var(--hk-white) 0%, var(--hk-white) 40%, var(--hk-gold) 50%, var(--hk-white) 60%, var(--hk-white) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hk-shimmer 3s ease-in-out 1;
}

/* B2: duplicate of style.css hk-shimmer primitive — delete in collapse */
@keyframes hk-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
    .hk-aktuelles .hk-section-heading.is-visible h2,
    .hk-aktuelles h2.is-visible {
        background: none;
        -webkit-text-fill-color: var(--hk-heading);
        animation: none;
    }

    .hk-kompendium-banner h2.is-visible,
    .hk-hp-events .hk-hp-events__stage.is-visible h2,
    .hk-hp-events h2.is-visible,
    .hk-projects .hk-projects__stage.is-visible h2 {
        background: none;
        -webkit-text-fill-color: var(--hk-white);
        animation: none;
    }
}

/* ============================================================
   RESPONSIVE — Desktop (≤ 1024px)
   ============================================================ */

@media (max-width: 1024px) {

    /* (Aktuelles grid rules removed — the Salon rows are fluid.) */

}

/* ============================================================
   RESPONSIVE — Tablet (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    /* Manifesto */
    .hk-manifesto__text {
        font-size: clamp(1.5rem, 3vw, 2rem);
    }

    .hk-manifesto__deco {
        font-size: 5rem;
    }

}

/* ============================================================
   RESPONSIVE — Mobile (≤ 480px)
   ============================================================ */

@media (max-width: 480px) {

    /* Manifesto */
    .hk-manifesto__text {
        font-size: 1.25rem;
    }

    .hk-manifesto__deco {
        font-size: 4rem;
        margin-bottom: -1rem;
    }

}

/* ============================================================
   6. EVENTS — Horizontal Timeline
   ============================================================ */

/* ============================================================
   7. HOMEPAGE EVENTS — Navy Premium Section
   ============================================================ */

.hk-hp-events {
    background: linear-gradient(170deg, var(--hk-navy) 0%, #1a2744 60%, #162038 100%);
    padding: clamp(80px, 10vw, 140px) 0;
    position: relative;
    overflow: hidden;
}

/* Ornamental watermark — star */
.hk-hp-events::before {
    content: '\2726';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28vw;
    opacity: 0.02;
    color: var(--hk-gold);
    pointer-events: none;
}

/* Secondary glow */
.hk-hp-events::after {
    content: '';
    position: absolute;
    top: -120px;
    inset-inline-end: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(200, 169, 110, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Stage: header + featured, revealed by parting curtains ── */
.hk-hp-events__stage {
    position: relative;
    z-index: 1;
    padding: clamp(28px, 5vw, 56px) clamp(18px, 4vw, 48px) clamp(36px, 5vw, 60px);
    margin-bottom: clamp(56px, 8vw, 96px);
    overflow: hidden;
    border: 1px solid rgba(200, 169, 110, 0.18);
    background: linear-gradient(180deg, rgba(9, 15, 30, 0.35), rgba(9, 15, 30, 0.15));
}

/* Curtains part on reveal — the .hk-animate base fade is neutralised so the
   curtains alone perform the entrance. */
.hk-hp-events__stage.hk-animate {
    opacity: 1;
    transform: none;
}

.hk-hp-events__curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 51%;
    z-index: 6;
    background: linear-gradient(90deg, #0a1224, #0c1630);
    pointer-events: none;
    transition: transform 1.9s var(--hk-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) 0.1s;
}

.hk-hp-events__curtain--l {
    inset-inline-start: 0;
    border-inline-end: 1px solid rgba(200, 169, 110, 0.4);
}

.hk-hp-events__curtain--r {
    inset-inline-end: 0;
    border-inline-start: 1px solid rgba(200, 169, 110, 0.4);
}

.hk-hp-events__stage.is-visible .hk-hp-events__curtain--l {
    transform: translateX(-102%);
}

.hk-hp-events__stage.is-visible .hk-hp-events__curtain--r {
    transform: translateX(102%);
}

/* Spotlight — fades in and settles over the featured act */
.hk-hp-events__spot {
    position: absolute;
    left: -20%;
    top: -18%;
    width: 140%;
    height: 150%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 36% 34% at 50% 34%, rgba(226, 198, 140, 0.16), transparent 70%);
    opacity: 0;
    transform: translate(-4%, -8%) scale(1.12);
    transition: opacity 2.4s ease 0.9s, transform 2.8s var(--hk-ease-out-cubic, cubic-bezier(0.33, 1, 0.68, 1)) 0.9s;
}

.hk-hp-events__stage.is-visible .hk-hp-events__spot {
    opacity: 1;
    transform: none;
}

/* Dust motes drifting in the beam */
.hk-hp-events__dust {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hk-hp-events__dust span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(226, 198, 140, 0.6);
    opacity: 0;
    animation: hk-events-twinkle 6s ease-in-out infinite;
}

@keyframes hk-events-twinkle {
    0%, 100% { opacity: 0; transform: translateY(0); }
    50% { opacity: 0.7; transform: translateY(-14px); }
}

/* ── Heading ── */
.hk-hp-events__header {
    text-align: center;
    margin-bottom: clamp(32px, 5vw, 56px);
    position: relative;
    z-index: 2;
}

.hk-hp-events__header .hk-overline {
    color: var(--hk-gold);
    margin-bottom: 1rem;
    display: block;
}

.hk-hp-events__header h2 {
    font-family: var(--hk-font-heading);
    font-weight: 300;
    color: var(--hk-white);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.hk-hp-events__divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--hk-gold), var(--hk-gold-light));
    margin: 1.5rem auto;
}

.hk-hp-events__lead {
    max-width: 600px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    line-height: 1.8;
}

/* ── Featured upcoming event — the act under the spotlight ── */
.hk-hp-events__featured {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: clamp(24px, 5vw, 56px);
    align-items: center;
    max-width: 940px;
    margin: 0 auto;
    text-decoration: none;
    color: inherit;
}

.hk-hp-events__stage-img {
    position: relative;
}

.hk-hp-events__stage-img::before {
    content: '';
    position: absolute;
    inset: -14px;
    border: 1px solid rgba(200, 169, 110, 0.4);
    z-index: 0;
}

.hk-hp-events__stage-img img,
.hk-hp-events__stage-img .hk-placeholder-img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 3 / 3.5;
    object-fit: cover;
    display: block;
    filter: saturate(0.9);
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8);
    transition: transform 0.6s var(--hk-ease), filter 0.6s var(--hk-ease);
}

.hk-hp-events__stage-img .hk-placeholder-img {
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.04);
    color: var(--hk-gold);
}

.hk-hp-events__featured:hover .hk-hp-events__stage-img img {
    transform: scale(1.03);
    filter: saturate(1);
}

.hk-hp-events__type {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 2;
    background: linear-gradient(120deg, var(--hk-gold-deep, #8F6F3D), var(--hk-gold), var(--hk-gold-light));
    color: #101a30;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 6px 12px;
}

.hk-hp-events__stage-body {
    min-width: 0;
}

/* Gold-sheen engraved date */
.hk-hp-events__stage-date {
    display: block;
    font-family: var(--hk-font-heading);
    font-weight: 300;
    line-height: 1.05;
    color: transparent;
    background: linear-gradient(100deg, #8F6F3D, #C8A96E 40%, #E2C68C 52%, #C8A96E 64%, #8F6F3D);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

.hk-hp-events__stage.is-visible .hk-hp-events__stage-date {
    animation: hk-events-datesheen 8s ease-in-out 2.6s infinite;
}

@keyframes hk-events-datesheen {
    0%, 100% { background-position: 0 0; }
    50% { background-position: 100% 0; }
}

.hk-hp-events__stage-dm {
    display: block;
    font-size: clamp(2rem, 4.4vw, 3.2rem);
}

.hk-hp-events__stage-yr {
    display: block;
    font-size: clamp(1.4rem, 3vw, 2rem);
    opacity: 0.85;
}

.hk-hp-events__stage-title {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    line-height: 1.18;
    color: var(--hk-white);
    margin: 0.65rem 0 0;
    max-width: 480px;
}

.hk-hp-events__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
    margin: 1rem 0 0;
}

.hk-hp-events__location svg {
    color: var(--hk-gold);
    flex-shrink: 0;
}

.hk-hp-events__featured-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.hk-hp-events__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 6px 13px;
    border-radius: 100px;
}

.hk-hp-events__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6FAF7C;
    box-shadow: 0 0 8px #6FAF7C;
}

.hk-hp-events__badge--open {
    color: var(--hk-gold);
    border: 1px solid rgba(200, 169, 110, 0.35);
}

.hk-hp-events__badge--full {
    background: rgba(200, 80, 80, 0.15);
    color: #e8a0a0;
    border: 1px solid rgba(200, 80, 80, 0.3);
}

/* Gold-fill CTA */
.hk-hp-events__stage-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 1.75rem;
    padding: 14px 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #101a30;
    background: linear-gradient(120deg, var(--hk-gold-deep, #8F6F3D), var(--hk-gold) 45%, var(--hk-gold-light));
    transition: transform 0.5s var(--hk-ease), box-shadow 0.5s var(--hk-ease);
}

.hk-hp-events__featured:hover .hk-hp-events__stage-cta {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -12px rgba(200, 169, 110, 0.55);
}

/* ── Past events — playbills on the shelf ── */
.hk-hp-events__past {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
}

/* Reduce gallery spacer inside homepage (not full-bleed like /seminare/) */
.hk-hp-events__past .hk-gallery__spacer {
    min-width: 0;
}

.hk-hp-events__past-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.hk-hp-events__past-header .hk-overline {
    color: var(--hk-gold);
    margin-bottom: 0.35rem;
    display: block;
}

.hk-hp-events__past-header h3 {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--hk-white);
}

/* Playbill treatment: reflection + lift, layered over the shared gallery card */
.hk-hp-events--buehne .hk-gallery__card {
    background: #0e1830;
    border: 1px solid rgba(200, 169, 110, 0.22);
    border-radius: 0;
    -webkit-box-reflect: below 3px linear-gradient(transparent 58%, rgba(255, 255, 255, 0.08));
    transition: transform 0.6s var(--hk-ease), border-color 0.5s var(--hk-ease), box-shadow 0.6s var(--hk-ease);
}

.hk-hp-events--buehne .hk-gallery__card:hover {
    transform: translateY(-10px);
    border-color: rgba(200, 169, 110, 0.6);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.75);
}

.hk-hp-events--buehne .hk-gallery__arrow {
    background: rgba(27, 42, 74, 0.85);
    border: 1px solid rgba(200, 169, 110, 0.35);
    color: var(--hk-gold);
}

.hk-hp-events--buehne .hk-gallery__arrow:hover {
    background: rgba(200, 169, 110, 0.2);
    border-color: var(--hk-gold);
}

/* ── Footer CTA ── */
.hk-hp-events__footer {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 2.75rem;
}

.hk-hp-events__all-btn {
    display: inline-block;
    background: rgba(200, 169, 110, 0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(200, 169, 110, 0.35);
    border-radius: 100px;
    color: var(--hk-gold);
    padding: 0.75rem 2.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s var(--hk-ease), border-color 0.25s var(--hk-ease), color 0.25s var(--hk-ease);
}

.hk-hp-events__all-btn:hover {
    background: rgba(200, 169, 110, 0.3);
    border-color: rgba(200, 169, 110, 0.6);
    color: var(--hk-gold-light);
}

/* ── Reduced motion: static, fully-open stage ── */
@media (prefers-reduced-motion: reduce) {
    .hk-hp-events__curtain--l { transform: translateX(-102%); }
    .hk-hp-events__curtain--r { transform: translateX(102%); }
    .hk-hp-events__spot { opacity: 1; transform: none; }
    .hk-hp-events__dust span { animation: none; }
    .hk-hp-events__stage-date { animation: none; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .hk-hp-events__stage {
        padding: clamp(22px, 6vw, 40px) clamp(16px, 5vw, 28px) clamp(28px, 6vw, 44px);
    }

    .hk-hp-events__featured {
        grid-template-columns: 1fr;
        max-width: 340px;
        text-align: center;
    }

    .hk-hp-events__stage-img {
        max-width: 260px;
        margin: 0 auto;
    }

    .hk-hp-events__stage-title {
        margin-inline: auto;
    }

    .hk-hp-events__location,
    .hk-hp-events__featured-footer {
        justify-content: center;
    }

    /* Fix gallery arrows overlapping card date on mobile */
    .hk-hp-events__past .hk-gallery__arrow {
        top: 100px; /* center within 200px card image area */
        transform: translateY(-50%);
    }
}

/* Event status badges (shared) */
.hk-badge {
    display: inline-block;
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 8px;
}

.hk-badge--open {
    background: rgba(200, 169, 110, 0.15);
    color: var(--hk-gold);
    border: 1px solid rgba(200, 169, 110, 0.3);
}

.hk-badge--full {
    background: rgba(27, 42, 74, 0.08);
    color: var(--hk-body);
    border: 1px solid rgba(27, 42, 74, 0.15);
}

/* ============================================================
   8. KOMPENDIUM BANNER — Cinematic open typography
   ============================================================ */

.hk-kompendium-banner {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: center;
}

/* Background image — cinematic backdrop */
.hk-kompendium-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hk-kompendium-banner__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 85% center;
    display: block;
}

/* Deep gradient veil — wider, smoother coverage */
.hk-kompendium-banner__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(200, 169, 110, 0.72) 0%,
        rgba(200, 169, 110, 0.50) 20%,
        rgba(200, 169, 110, 0.20) 40%,
        rgba(200, 169, 110, 0.05) 55%,
        transparent 65%
    );
    z-index: 1;
}

/* Content — floats directly on image, no container */
.hk-kompendium-banner > .hk-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hk-kompendium-banner__content {
    max-width: 460px;
    padding: 4rem 0;
    margin-inline-start: 5%;
}

/* Overline — deep gold accent */
.hk-kompendium-banner__overline {
    display: block;
    font-family: var(--hk-font-body);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: var(--hk-white);
    opacity: 0.7;
    margin-bottom: 1.25rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

/* Heading — white, commanding */
.hk-kompendium-banner__content h2 {
    font-family: var(--hk-font-heading);
    font-weight: 600;
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    line-height: 1.1;
    color: var(--hk-white);
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Panel — frosted glass over image */
.hk-kompendium-banner__panel {
    padding: 2.5rem 2.5rem 2rem;
    background: rgba(27, 42, 74, 0.28);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--hk-radius);
}

/* Divider — gold gradient accent */
.hk-kompendium-banner__divider {
    width: 48px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--hk-gold), var(--hk-gold-light), transparent);
    margin-bottom: 1.5rem;
}

/* Description — white, soft */
.hk-kompendium-banner__content p {
    font-size: 15px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

/* Edition tag — soft white, elegant */
.hk-kompendium-banner__edition {
    display: block;
    font-family: var(--hk-font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--hk-white);
    opacity: 0.55;
    margin-bottom: 2.5rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

/* CTA — white outline, fills on hover */
.hk-kompendium-banner__content .hk-btn--gold {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    color: var(--hk-white);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.35s var(--hk-ease), border-color 0.35s var(--hk-ease), color 0.35s var(--hk-ease);
}

.hk-kompendium-banner__content .hk-btn--gold:hover {
    background: var(--hk-white);
    border-color: var(--hk-white);
    color: var(--hk-heading);
    text-shadow: none;
}

/* Responsive — tablet */
@media (max-width: 768px) {
    .hk-kompendium-banner {
        min-height: 380px;
    }

    .hk-kompendium-banner__bg::after {
        background: linear-gradient(
            to right,
            rgba(200, 169, 110, 0.78) 0%,
            rgba(200, 169, 110, 0.60) 30%,
            rgba(200, 169, 110, 0.35) 60%,
            rgba(200, 169, 110, 0.15) 100%
        );
    }

    .hk-kompendium-banner__content {
        max-width: 300px;
        padding: 3rem 0;
    }

    .hk-kompendium-banner__content h2 {
        font-size: 1.75rem;
        letter-spacing: 0.04em;
    }
}

/* Responsive — mobile */
@media (max-width: 480px) {
    .hk-kompendium-banner {
        min-height: auto;
    }

    .hk-kompendium-banner__bg::after {
        background: linear-gradient(
            to bottom,
            rgba(27, 42, 74, 0.7) 0%,
            rgba(27, 42, 74, 0.55) 50%,
            rgba(27, 42, 74, 0.4) 100%
        );
    }

    .hk-kompendium-banner__bg img {
        object-position: center center;
    }

    .hk-kompendium-banner__content {
        max-width: 100%;
        margin-inline-start: 0;
        padding: 2.5rem 0;
        text-align: center;
    }

    .hk-kompendium-banner__panel {
        padding: 2rem 1.5rem 1.75rem;
        background: rgba(27, 42, 74, 0.35);
    }

    .hk-kompendium-banner__divider {
        margin-inline: auto;
    }

    .hk-kompendium-banner__content h2 {
        font-size: 1.5rem;
    }

    .hk-kompendium-banner__content p {
        font-size: 14px;
    }
}

/* ============================================================
   9. CONNECT CTA — Kontakt + Newsletter banner
   ============================================================ */

.hk-connect-cta {
    position: relative;
    background: image-set(
        url('/wp-content/themes/hakim-theme/assets/img/connect-parallax.webp') type('image/webp'),
        url('/wp-content/themes/hakim-theme/assets/img/connect-parallax.jpg') type('image/jpeg')
    ) center center / cover no-repeat;
    background-attachment: fixed;
    padding: var(--hk-section-padding) 0;
    text-align: center;
    color: var(--hk-white);
}

.hk-connect-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
}

.hk-connect-cta .hk-container {
    position: relative;
    z-index: 1;
}

.hk-connect-cta h2 {
    color: var(--hk-white);
    font-weight: 300;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 1rem 0;
}

.hk-connect-cta p {
    color: var(--hk-parchment-dark);
    max-width: 600px;
    margin: 0 auto 2rem;
    opacity: 0.85;
}

.hk-connect-cta__panel {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(200, 169, 110, 0.25);
    border-radius: var(--hk-radius);
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(200, 169, 110, 0.1);
}

.hk-connect-cta__impact {
    text-decoration: none;
    transition: transform 0.3s var(--hk-ease), opacity 0.3s ease;
}

.hk-connect-cta__impact:hover {
    transform: translateY(-4px);
    opacity: 1 !important;
}

.hk-connect-cta__newsletter {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(200, 169, 110, 0.2);
}

.hk-connect-cta__newsletter .hk-overline {
    display: block;
    margin-bottom: 1rem;
}

/* Newsletter form */
.hk-newsletter-form__row {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
}

.hk-newsletter-form__input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid rgba(200, 169, 110, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--hk-white);
    font-family: var(--hk-font-body);
    font-size: 15px;
}

.hk-newsletter-form__input::placeholder {
    color: rgba(247, 244, 238, 0.5);
}

.hk-newsletter-form__input:focus-visible {
    outline: 2px solid var(--hk-gold);
    outline-offset: 2px;
    border-color: var(--hk-gold);
    box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.15);
}

.hk-newsletter-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    max-width: 480px;
    margin-inline: auto;
    font-size: 12px;
    color: rgba(247, 244, 238, 0.6);
    cursor: pointer;
}

.hk-newsletter-form__consent input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--hk-gold);
}

.hk-newsletter-form__consent a {
    color: var(--hk-gold-light);
    text-decoration: underline;
}

.hk-newsletter-form__message {
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    max-width: 480px;
    margin-inline: auto;
}

.hk-newsletter-form__message--success {
    background: rgba(25, 135, 84, 0.15);
    color: #a3d9b1;
}

.hk-newsletter-form__message--error {
    background: rgba(220, 53, 69, 0.15);
    color: #f5a3ad;
}

/* Lead-magnet promise shown above the submit (only when configured) */
.hk-newsletter-form__magnet-promise {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-left: 2px solid var(--hk-gold);
    background: rgba(200, 169, 110, 0.08);
    color: var(--hk-body);
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
    border-radius: 0 6px 6px 0;
}
.hk-newsletter-form__magnet-promise strong { color: var(--hk-gold-light); font-weight: 600; }

/* Success card — replaces the form contents after a successful signup.
 * `.is-submitted` is added to the form by the JS handler on success. */
.hk-newsletter-form.is-submitted .hk-newsletter-form__row,
.hk-newsletter-form.is-submitted .hk-newsletter-form__consent,
.hk-newsletter-form.is-submitted .hk-newsletter-form__magnet-promise,
.hk-newsletter-form.is-submitted .hk-newsletter-form__message,
.hk-newsletter-form.is-submitted .cf-turnstile {
    display: none;
}

.hk-newsletter-form__success {
    margin: 12px auto 0;
    padding: 22px 24px;
    max-width: 520px;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(200, 169, 110, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hk-newsletter-form__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(200, 169, 110, 0.18);
    color: var(--hk-gold);
}
.hk-newsletter-form__success-icon svg { width: 26px; height: 26px; }
.hk-newsletter-form__success h4 {
    font-family: var(--hk-font-heading);
    font-size: 22px;
    font-weight: 500;
    color: var(--hk-gold-light);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.hk-newsletter-form__success p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(247, 244, 238, 0.82);
}
.hk-newsletter-form__success-tip {
    font-size: 12px !important;
    color: rgba(247, 244, 238, 0.55) !important;
    font-style: italic;
}
.hk-newsletter-form__success-magnet {
    margin-top: 14px !important;
    padding-top: 12px;
    border-top: 1px solid rgba(200, 169, 110, 0.2);
    color: rgba(247, 244, 238, 0.85) !important;
}
.hk-newsletter-form__success-magnet strong { color: var(--hk-gold-light); }

@media (max-width: 480px) {
    .hk-newsletter-form__row {
        flex-direction: column;
    }
}

.hk-connect-cta__coming-soon {
    display: block;
    font-family: var(--hk-font-body);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hk-gold-light);
    opacity: 0.7;
    margin-top: 0.35rem;
}

/* Newsletter form disabled state (coming soon) */
.hk-connect-cta__newsletter.is-disabled .hk-newsletter-form__row {
    opacity: 0.45;
    pointer-events: none;
}
.hk-newsletter-form__coming-soon {
    text-align: center;
    margin-top: 0.85rem;
}

/* Social row (newsletter section) */
.hk-social-row {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.hk-social-row__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.3);
    color: rgba(247, 244, 238, 0.85);
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    position: relative;
}

.hk-social-row__item svg {
    flex-shrink: 0;
}

a.hk-social-row__item:hover {
    color: var(--hk-gold);
    border-color: var(--hk-gold);
    background: rgba(200, 169, 110, 0.1);
}

.hk-social-row__item--soon {
    opacity: 0.4;
    cursor: default;
}

.hk-social-row__soon-label {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--hk-font-body);
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hk-gold-light);
    white-space: nowrap;
    opacity: 0.8;
}

.hk-connect-cta__form {
    display: flex;
    max-width: 480px;
    margin: 0 auto;
}

.hk-connect-cta__form .hk-input {
    border-radius: 8px 0 0 8px;
    min-width: 240px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(200, 169, 110, 0.3);
    color: var(--hk-white);
}

.hk-connect-cta__form .hk-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.hk-connect-cta__form .hk-btn {
    border-radius: 0 8px 8px 0;
}

.hk-connect-cta__form .hk-input:disabled,
.hk-connect-cta__form .hk-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   RESPONSIVE — Sections 6-10: Tablet (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    /* Mediathek — handled by component responsive rules */

    /* Contact+Newsletter CTA — form stacked */
    .hk-connect-cta__form {
        flex-direction: column;
        max-width: 100%;
    }

    .hk-connect-cta__form .hk-input {
        border-radius: 8px;
        min-width: auto;
        width: 100%;
    }

    .hk-connect-cta__form .hk-btn {
        border-radius: 8px;
    }

}

/* Navy accent divider between parchment sections */
.hk-divider--accent {
    background: var(--hk-parchment);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--hk-space-md) 0;
}

.hk-divider--accent::before {
    content: '';
    width: 80px;
    height: 3px;
    background: var(--hk-navy);
    border-radius: 2px;
    opacity: 0.15;
}

/* Glass card tilt — perspective container + smooth return */

.hk-glass {
    transition: transform 0.15s ease-out, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================================
   RESPONSIVE — Sections 6-10: Mobile (≤ 480px)
   ============================================================ */

/* ==========================================================================
   Premium Section Headings
   ========================================================================== */

.hk-section-heading {
    text-align: center;
    margin-bottom: 3.5rem;
    position: relative;
}

.hk-section-heading__overline {
    display: block;
    font-family: var(--hk-font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--hk-gold);
    margin-bottom: 0.75rem;
}

.hk-section-heading h2 {
    font-family: var(--hk-font-heading);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--hk-heading);
    margin: 0;
    position: relative;
    display: inline-block;
}

.hk-section-heading h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, var(--hk-gold), var(--hk-gold-light));
    margin: 1rem auto 0;
    border-radius: 1px;
}

/* Legacy direct h2 selectors (keep for any non-wrapped h2s) */
.hk-projects h2,
.hk-aktuelles h2,
.hk-pv-teaser__head h2 {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* ==========================================================================
   Impact Counter Strip
   ========================================================================== */

.hk-impact {
    padding: clamp(64px, 8vw, 110px) 0;
    background: linear-gradient(170deg, var(--hk-navy) 0%, #1a2744 60%, #162038 100%);
    position: relative;
    overflow: hidden;
}

/* Stage: astrolabe + readings. Base .hk-animate fade neutralised — the
   ring-draw performs the entrance. */
.hk-impact__astro {
    display: grid;
    grid-template-columns: minmax(280px, 460px) 1fr;
    gap: clamp(30px, 6vw, 80px);
    align-items: center;
    max-width: 1060px;
    margin: 0 auto;
}

.hk-impact__astro.hk-animate {
    opacity: 1;
    transform: none;
}

/* ── The instrument ── */
.hk-impact__inst {
    width: 100%;
    height: auto;
    overflow: visible;
}

.hk-impact__inst circle,
.hk-impact__inst line {
    fill: none;
    stroke: var(--hk-gold);
    stroke-width: 1;
}

.hk-impact__faint {
    stroke: rgba(200, 169, 110, 0.35) !important;
}

/* Rings engrave themselves on reveal */
.hk-impact__ring {
    stroke-dasharray: 1440;
    stroke-dashoffset: 1440;
}

.hk-impact__astro.is-visible .hk-impact__ring {
    animation: hk-astro-draw 2.4s var(--hk-ease) forwards;
}
.hk-impact__astro.is-visible .hk-impact__ring--2 { animation-delay: 0.3s; }
.hk-impact__astro.is-visible .hk-impact__ring--3 { animation-delay: 0.6s; }

@keyframes hk-astro-draw {
    to { stroke-dashoffset: 0; }
}

.hk-impact__ticks line {
    stroke: rgba(200, 169, 110, 0.35);
}

/* Rete + alidade fade in, then turn in slow perpetual rotation */
.hk-impact__rete,
.hk-impact__alidade {
    transform-origin: 240px 240px;
    opacity: 0;
    transition: opacity 1.2s var(--hk-ease) 1.4s;
}

.hk-impact__astro.is-visible .hk-impact__rete {
    opacity: 1;
    animation: hk-astro-spin 90s linear 1.4s infinite;
}

.hk-impact__astro.is-visible .hk-impact__alidade {
    opacity: 1;
    animation: hk-astro-spin-rev 130s linear 1.8s infinite;
    transition-delay: 1.8s;
}

@keyframes hk-astro-spin {
    to { transform: rotate(360deg); }
}
@keyframes hk-astro-spin-rev {
    to { transform: rotate(-360deg); }
}

/* ── The readings ── */
.hk-impact__stats {
    display: flex;
    flex-direction: column;
}

.hk-impact__stat {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: clamp(16px, 2.5vw, 22px);
    padding: clamp(16px, 2.4vw, 22px) 4px;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.9s var(--hk-ease) var(--hk-stat-delay, 0s), transform 0.9s var(--hk-ease) var(--hk-stat-delay, 0s);
}

.hk-impact__astro.is-visible .hk-impact__stat {
    opacity: 1;
    transform: none;
}

.hk-impact__stat::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(200, 169, 110, 0.22);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--hk-ease) var(--hk-stat-delay, 0s);
}

.hk-impact__astro.is-visible .hk-impact__stat::after {
    transform: scaleX(1);
}

.hk-impact__value {
    font-family: var(--hk-font-heading);
    font-weight: 300;
    font-size: clamp(2.6rem, 5.5vw, 4rem);
    line-height: 1;
    min-width: 2ch;
    color: transparent;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(160deg, var(--hk-gold-light), var(--hk-gold) 45%, var(--hk-gold-deep, #8F6F3D));
    -webkit-background-clip: text;
    background-clip: text;
}

/* Gold flare when the count lands (counter JS adds .is-visible) */
.hk-impact__value.is-visible {
    animation: hk-astro-flare 0.7s var(--hk-ease);
}

@keyframes hk-astro-flare {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.hk-impact__label {
    font-family: var(--hk-font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: rgba(247, 244, 238, 0.8);
}

@media (prefers-reduced-motion: reduce) {
    .hk-impact__ring {
        stroke-dashoffset: 0;
        animation: none;
    }
    .hk-impact__rete,
    .hk-impact__alidade {
        opacity: 1;
        animation: none;
        transition: none;
    }
    .hk-impact__stat {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hk-impact__stat::after {
        transform: scaleX(1);
    }
    .hk-impact__value.is-visible {
        animation: none;
    }
}

@media (max-width: 760px) {
    .hk-impact__astro {
        grid-template-columns: 1fr;
        gap: clamp(24px, 6vw, 44px);
    }
    .hk-impact__instrument {
        max-width: 320px;
        margin: 0 auto;
    }
    .hk-impact__value {
        font-size: clamp(2.4rem, 12vw, 3.2rem);
    }
}

/* ==========================================================================
   Testimonials — Luxury Redesign
   ========================================================================== */

/* ── Section ── */
.hk-testimonials {
    padding: clamp(80px, 10vw, 130px) 0;
    background: var(--hk-parchment);
    position: relative;
    overflow: hidden;
}

/* Ornamental star watermark */
.hk-testimonials::before {
    content: '\2726';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30vw;
    color: var(--hk-gold);
    opacity: 0.03;
    pointer-events: none;
    line-height: 1;
}

/* ── Header ── */
.hk-testimonials__header {
    text-align: center;
    margin-bottom: 3rem;
}

.hk-testimonials__header .hk-overline {
    color: var(--hk-gold-text);
}

.hk-testimonials__header h2 {
    font-family: var(--hk-font-heading);
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--hk-heading);
    margin: 0.5rem 0 0;
}

.hk-testimonials__header-divider {
    display: flex;
    justify-content: center;
    margin: 1.25rem auto 0;
}

.hk-testimonials__header-divider span {
    width: 48px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    display: block;
}

/* ── Glass card ── */
.hk-testimonials__card {
    max-width: 740px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(200, 169, 110, 0.2);
    border-radius: 20px;
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3.5rem) 2rem;
    position: relative;
    box-shadow: 0 8px 40px rgba(27, 42, 74, 0.06);
}

/* ── Decorative quote mark ── */
.hk-testimonials__deco {
    position: absolute;
    top: 16px;
    inset-inline-start: 28px;
    font-family: var(--hk-font-heading);
    font-size: 7rem;
    line-height: 1;
    color: var(--hk-gold);
    opacity: 0.15;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ── Track + slides ── */
.hk-testimonials__track {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.hk-testimonials__slide {
    grid-row: 1;
    grid-column: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 500ms var(--hk-ease);
    pointer-events: none;
    margin: 0;
    padding: 0;
}

.hk-testimonials__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── Quote text ── */
.hk-testimonials__quote {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.75;
    color: var(--hk-heading);
    margin: 0 0 2rem;
    position: relative;
    z-index: 1;
    text-align: center;
}

/* ── Author row ── */
.hk-testimonials__author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.hk-testimonials__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hk-navy) 0%, #2a3f66 100%);
    border: 2px solid rgba(200, 169, 110, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hk-font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--hk-gold-light);
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.hk-testimonials__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hk-testimonials__info strong {
    font-family: var(--hk-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hk-heading);
}

.hk-testimonials__info span {
    font-family: var(--hk-font-body);
    font-size: 0.78rem;
    color: var(--hk-body);
    opacity: 0.7;
}

/* ── Navigation row (arrows + dots) ── */
.hk-testimonials__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(200, 169, 110, 0.15);
}

.hk-testimonials__arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.3);
    background: transparent;
    color: var(--hk-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.hk-testimonials__arrow:hover {
    background: rgba(200, 169, 110, 0.12);
    border-color: var(--hk-gold);
}

/* ── Dots ── */
.hk-testimonials__dots {
    display: flex;
    gap: 4px;
}

/* The button is a 24x24 tap target (WCAG 2.5.8 Target Size); the visible dot is
   drawn by ::before, so the hit area meets the minimum without enlarging the dot. */
.hk-testimonials__dot {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
}

.hk-testimonials__dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(200, 169, 110, 0.3);
    transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}

.hk-testimonials__dot.is-active::before {
    background: var(--hk-gold);
    width: 18px;
    border-radius: 3px;
}

.hk-testimonials__dot:hover::before {
    background: rgba(200, 169, 110, 0.6);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .hk-testimonials__card {
        padding: 2rem 1.5rem 1.5rem;
        border-radius: 16px;
    }
    .hk-testimonials__deco {
        font-size: 5rem;
        top: 8px;
        inset-inline-start: 16px;
    }
    .hk-testimonials__quote {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .hk-testimonials__card {
        padding: 1.75rem 1.25rem 1.25rem;
    }
    .hk-testimonials__deco {
        font-size: 4rem;
    }
    .hk-testimonials__quote {
        font-size: 1rem;
    }
    .hk-testimonials__avatar {
        width: 40px;
        height: 40px;
        font-size: 13px;
    }
}

/* ==========================================================================
   Partners Logo Wall
   ========================================================================== */

.hk-partners {
    padding: 80px 0;
    background: var(--hk-parchment);
}

.hk-partners h2 {
    text-align: center;
    font-weight: 300;
}

.hk-partners__grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.hk-partners__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 100px;
    background: var(--hk-glass);
    border: var(--hk-glass-border);  /* Spec B1 — Family 3 full border shorthand */
    border-radius: var(--hk-radius);
    padding: 16px;
    text-align: center;
    transition: border-color 0.35s var(--hk-ease), box-shadow 0.35s var(--hk-ease), transform 0.35s var(--hk-ease), filter 0.35s var(--hk-ease), opacity 0.35s var(--hk-ease);
    cursor: default;
    filter: grayscale(1);
    opacity: 0.7;
}

.hk-partners__item:hover {
    filter: grayscale(0);
    opacity: 1;
    border-color: var(--hk-glass-border-hover);
    box-shadow: 0 16px 48px rgba(27, 42, 74, 0.15);
    transform: translateY(-6px);
}

.hk-partners__abbr {
    font-family: var(--hk-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--hk-heading);
    line-height: 1;
    margin-bottom: 6px;
}

.hk-partners__name {
    font-family: var(--hk-font-body);
    font-size: 0.65rem;
    color: var(--hk-body);
    letter-spacing: 0.02em;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .hk-partners__item {
        width: 140px;
        height: 80px;
    }
    .hk-partners__abbr {
        font-size: 1.2rem;
    }
}

/* Connect CTA — impact items */
.hk-connect-cta__impacts {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 30px 0 40px;
}

.hk-connect-cta__impact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    max-width: 180px;
}

.hk-connect-cta__impact svg {
    color: var(--hk-gold);
}

.hk-connect-cta__impact p {
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .hk-connect-cta {
        background-attachment: scroll;
    }

    .hk-connect-cta__impacts {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .hk-connect-cta__panel {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .hk-connect-cta__panel .hk-btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Perspektive Teaser (homepage section)
   ========================================================================== */

/* ============================================================
   FORGOTTEN HEROES BANNER — "Das Gedenkblatt"
   Dark memorial front page between the light Perspektive and
   Aktuelles sections. Reveal choreography keys off the stage's
   .hk-animate → .is-visible (base fade neutralised, like the
   events stage), so no extra JS is needed.
   ============================================================ */

.hk-fh-teaser {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 10vw, 140px) 0;
    background: linear-gradient(170deg, #0B1428 0%, #111D38 55%, #0A1122 100%);
}

/* faint golden aura, top corner */
.hk-fh-teaser::before {
    content: '';
    position: absolute;
    top: -140px;
    inset-inline-start: -140px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(200, 169, 110, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.hk-fh-teaser__stage.hk-animate {
    opacity: 1;
    transform: none;
}

.hk-fh-teaser__head {
    text-align: center;
    margin-bottom: 2.25rem;
}

.hk-fh-teaser__head .hk-overline {
    display: block;
    color: var(--hk-gold);
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.9s var(--hk-ease), transform 0.9s var(--hk-ease);
}

.hk-fh-teaser__head h2 {
    font-family: var(--hk-font-heading);
    font-weight: 300;
    font-size: clamp(2.5rem, 6vw, 4.2rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #F7F4EE;
    margin: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1s var(--hk-ease) 0.15s, transform 1s var(--hk-ease) 0.15s;
}

.hk-fh-teaser__stage.is-visible .hk-fh-teaser__head .hk-overline,
.hk-fh-teaser__stage.is-visible .hk-fh-teaser__head h2 {
    opacity: 1;
    transform: none;
}

.hk-fh-teaser__dot {
    color: var(--hk-gold);
}

/* Sub-line under the title: gold rules flanking a prominent serif line */
.hk-fh-teaser__sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.5vw, 24px);
    margin-top: 18px;
}

.hk-fh-teaser__sub-line {
    width: clamp(40px, 8vw, 110px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 1.3s var(--hk-ease) 0.4s;
}

.hk-fh-teaser__sub-line:last-child {
    background: linear-gradient(90deg, var(--hk-gold), transparent);
    transform-origin: left;
}

.hk-fh-teaser__stage.is-visible .hk-fh-teaser__sub-line {
    transform: scaleX(1);
}

.hk-fh-teaser__sub-text {
    font-family: var(--hk-font-heading);
    font-style: italic;
    font-size: clamp(16px, 2.4vw, 21px);
    letter-spacing: 0.02em;
    color: var(--hk-gold-light);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 1s var(--hk-ease) 0.55s, transform 1s var(--hk-ease) 0.55s;
}

.hk-fh-teaser__stage.is-visible .hk-fh-teaser__sub-text {
    opacity: 1;
    transform: none;
}

/* Spread gets a little air below the enlarged head */
.hk-fh-teaser__spread {
    margin-top: clamp(30px, 5vw, 48px);
}

/* Spread: lead + secondary column */
.hk-fh-teaser__spread {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(30px, 5vw, 60px);
}

.hk-fh-teaser__lead {
    display: block;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s var(--hk-ease) 0.4s, transform 1s var(--hk-ease) 0.4s;
}

.hk-fh-teaser__stage.is-visible .hk-fh-teaser__lead {
    opacity: 1;
    transform: none;
}

.hk-fh-teaser__lead-im {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(200, 169, 110, 0.3);
}

.hk-fh-teaser__lead-im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--hk-ease);
}

.hk-fh-teaser__lead:hover .hk-fh-teaser__lead-im img {
    transform: scale(1.04);
}

/* veil lift — matches the section ground so the image is "unveiled" */
.hk-fh-teaser__lead-im::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #0E1830;
    transform-origin: top;
    transform: scaleY(1);
    transition: transform 1.3s var(--hk-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) 0.6s;
}

.hk-fh-teaser__stage.is-visible .hk-fh-teaser__lead-im::after {
    transform: scaleY(0);
}

.hk-fh-teaser__epithet {
    display: block;
    font-family: var(--hk-font-heading);
    font-style: italic;
    font-size: 15px;
    color: var(--hk-gold-light);
}

.hk-fh-teaser__lead .hk-fh-teaser__epithet {
    margin-top: 22px;
}

.hk-fh-teaser__lead h3 {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.12;
    color: #F7F4EE;
    margin: 8px 0 0;
    transition: color 0.4s var(--hk-ease);
}

.hk-fh-teaser__lead:hover h3 {
    color: var(--hk-gold-light);
}

.hk-fh-teaser__meta {
    display: block;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(247, 244, 238, 0.55);
    margin-top: 8px;
}

/* Memorial lead line — hero leads are often a single sentence, so a quiet
   serif quotation reads better than a floated drop cap. */
.hk-fh-teaser__lead-text {
    margin: 16px 0 0;
    font-family: var(--hk-font-heading);
    font-style: italic;
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.6;
    color: rgba(247, 244, 238, 0.8);
    max-width: 48ch;
    padding-inline-start: 18px;
    border-inline-start: 2px solid var(--hk-gold);
}

.hk-fh-teaser__more {
    display: inline-block;
    margin-top: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--hk-gold-light);
}

/* Secondary entries */
.hk-fh-teaser__secol {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hk-fh-teaser__sec {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 76px;
    gap: 18px;
    align-items: center;
    padding: 17px 0;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s var(--hk-ease), transform 0.9s var(--hk-ease);
}

.hk-fh-teaser__sec { transition-delay: var(--hk-sec-delay, 0.7s); }

.hk-fh-teaser__stage.is-visible .hk-fh-teaser__sec {
    opacity: 1;
    transform: none;
}

.hk-fh-teaser__sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(200, 169, 110, 0.2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--hk-ease);
}

.hk-fh-teaser__sec::before { transition-delay: calc(var(--hk-sec-delay, 0.7s) + 0.1s); }

.hk-fh-teaser__stage.is-visible .hk-fh-teaser__sec::before {
    transform: scaleX(1);
}

.hk-fh-teaser__sec h4 {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.25;
    color: #F7F4EE;
    margin: 6px 0 0;
    transition: color 0.4s var(--hk-ease);
}

.hk-fh-teaser__sec:hover h4 {
    color: var(--hk-gold-light);
}

.hk-fh-teaser__sec-th {
    width: 76px;
    height: 76px;
    overflow: hidden;
    border: 1px solid rgba(200, 169, 110, 0.25);
}

.hk-fh-teaser__sec-th img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.7) brightness(0.9);
    transition: filter 0.7s var(--hk-ease), transform 1s var(--hk-ease);
}

.hk-fh-teaser__sec:hover .hk-fh-teaser__sec-th img {
    filter: grayscale(0) brightness(1);
    transform: scale(1.06);
}

/* CTA */
.hk-fh-teaser__cta {
    text-align: center;
    margin-top: clamp(36px, 5vw, 56px);
    opacity: 0;
    transition: opacity 1s var(--hk-ease) 1.2s;
}

.hk-fh-teaser__stage.is-visible .hk-fh-teaser__cta {
    opacity: 1;
}

.hk-fh-teaser__cta a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--hk-gold);
    text-decoration: none;
    border-bottom: 1px solid var(--hk-gold);
    padding-bottom: 5px;
    transition: letter-spacing 0.5s var(--hk-ease), color 0.4s var(--hk-ease);
}

.hk-fh-teaser__cta a:hover {
    letter-spacing: 0.22em;
    color: var(--hk-gold-light);
}

@media (prefers-reduced-motion: reduce) {
    .hk-fh-teaser__head .hk-overline,
    .hk-fh-teaser__head h2,
    .hk-fh-teaser__mast-row,
    .hk-fh-teaser__lead,
    .hk-fh-teaser__sec,
    .hk-fh-teaser__cta {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hk-fh-teaser__mast::before,
    .hk-fh-teaser__mast::after,
    .hk-fh-teaser__sec::before {
        transform: scaleX(1);
        transition: none;
    }
    .hk-fh-teaser__lead-im::after {
        transform: scaleY(0);
        transition: none;
    }
}

@media (max-width: 860px) {
    .hk-fh-teaser__spread {
        grid-template-columns: 1fr;
    }
    .hk-fh-teaser__secol {
        margin-top: 6px;
    }
}

.hk-pv-teaser {
    padding: var(--hk-section-padding) 0;
    background: var(--hk-parchment);
    position: relative;
}

/* Header (overline + h2 + subtitle) */
.hk-pv-teaser__head {
    text-align: center;
    margin-bottom: 3rem;
}

.hk-pv-teaser__head h2 {
    margin: 0.25rem 0 0.75rem;
    color: var(--hk-gold);
    font-weight: 300;
}

.hk-pv-teaser__subtitle {
    color: var(--hk-body);
    font-family: var(--hk-font-heading);
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.hk-pv-teaser__divider {
    display: flex;
    justify-content: center;
    margin: 0.75rem auto 1rem;
}

.hk-pv-teaser__divider span {
    width: 48px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    display: block;
}

/* CTA button row below carousel */
.hk-pv-teaser__cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* ============================================================
   PERSPEKTIVE TEASER — "Das Gesamtbild" premium carousel
   Scoped under .hk-pv-teaser so the /perspektive/ hub is unaffected.
   Reuses the base carousel mechanics (invisible scroll layer + snap
   slots at 260px cadence — DO NOT resize the slots/spacer: the
   scroll-timeline range calibration depends on them). Only the visual
   card + chrome are upgraded here.
   ============================================================ */

/* Taller stage (bigger card + reflection room) */
.hk-pv-teaser .pv-carousel-wrap {
    height: 500px;
    perspective: 1150px;
}
@media (min-width: 768px) {
    .hk-pv-teaser .pv-carousel-wrap { height: 560px; }
}

/* Bigger, sharper card with a mirror reflection on the still floor */
.hk-pv-teaser .pv-card {
    width: 290px;
    height: 392px;
    top: 42%;
    border-radius: 4px;
    contain: layout style; /* drop `paint` so -webkit-box-reflect isn't clipped */
    -webkit-box-reflect: below 10px linear-gradient(transparent 68%, rgba(255, 255, 255, 0.14));
}

/* Depth of field: side cards blur + dim; the focused card is the only crisp one.
   The hk-pvt-flow keyframe lives in perspektive.css alongside the base carousel
   keyframe (that file owns the carousel's internal z-index stacking). */
@supports (animation-timeline: scroll()) {
    .hk-pv-teaser .pv-card { animation-name: hk-pvt-flow; }
}
/* Fallback (no scroll-timeline): widen the JS --si-driven spread for the bigger card. */
@supports not (animation-timeline: scroll()) {
    .hk-pv-teaser .pv-card {
        --tx: calc(-50% + var(--sgn) * 1px * min(520, min(var(--abs) * 240, 80 + var(--abs) * 170, 200 + var(--abs) * 110)));
        transform: translate(var(--tx), -50%) scale(var(--s)) rotateY(var(--ry));
    }
}

/* Deeper cinematic scrim */
.hk-pv-teaser .pv-card__overlay {
    background: linear-gradient(to top,
        rgba(9, 15, 28, 0.92) 0%,
        rgba(11, 20, 40, 0.55) 42%,
        rgba(11, 20, 40, 0.12) 68%,
        transparent 100%);
}

/* Gold inset frame — brightens + glows on the focused card */
.hk-pv-teaser .pv-card__frame {
    position: absolute;
    inset: 9px;
    z-index: 3;
    border: 1px solid rgba(226, 198, 140, 0.5);
    pointer-events: none;
    transition: border-color 0.5s var(--hk-ease), box-shadow 0.5s var(--hk-ease);
}
.hk-pv-teaser .pv-card.is-center .pv-card__frame {
    border-color: var(--hk-gold-light);
    box-shadow: inset 0 0 0 1px rgba(226, 198, 140, 0.12), 0 0 26px -6px rgba(200, 169, 110, 0.4);
}

/* Silver sheen sweep across the focused card */
.hk-pv-teaser .pv-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(251, 248, 241, 0.14) 47%, rgba(251, 248, 241, 0.26) 50%, rgba(251, 248, 241, 0.14) 53%, transparent 62%);
    background-size: 280% 280%;
    background-position: 120% 0;
    opacity: 0;
}
.hk-pv-teaser .pv-card.is-center::after {
    opacity: 1;
    animation: hk-pvt-sheen 5.6s ease-in-out 1.2s infinite;
}
@keyframes hk-pvt-sheen {
    0%, 100% { background-position: 120% 0; }
    42%, 58% { background-position: -30% 0; }
}

/* Body typography — editorial serif */
.hk-pv-teaser .pv-card__body {
    padding: 20px 20px 18px;
}
.hk-pv-teaser .pv-card__tag {
    display: inline-block;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    color: var(--hk-gold-light);
    border: 1px solid rgba(226, 198, 140, 0.45);
    border-radius: 999px;
    padding: 4px 11px;
    margin-bottom: 10px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hk-pv-teaser .pv-card__title {
    font-family: var(--hk-font-heading);
    font-weight: 500;
    font-size: 20.5px;
    line-height: 1.26;
    -webkit-line-clamp: 3;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.hk-pv-teaser .pv-card__autor {
    font-family: var(--hk-font-heading);
    font-style: italic;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hk-pv-teaser .pv-card__autor::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--hk-gold);
    flex: none;
}

/* Excerpt + read link unfold on the focused card */
.hk-pv-teaser .pv-card__ex {
    font-family: var(--hk-font-body);
    font-size: 12px;
    line-height: 1.6;
    color: rgba(247, 244, 238, 0.78);
    margin: 8px 0 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: max-height 0.7s var(--hk-ease), opacity 0.7s var(--hk-ease);
}
.hk-pv-teaser .pv-card.is-center .pv-card__ex {
    max-height: 5.2em;
    opacity: 1;
    transition-delay: 0.2s;
}
.hk-pv-teaser .pv-card__read {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--hk-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--hk-gold-light);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s var(--hk-ease), transform 0.5s var(--hk-ease);
}
.hk-pv-teaser .pv-card.is-center .pv-card__read {
    opacity: 1;
    transform: none;
    transition-delay: 0.3s;
}

/* Golden-hour glow + faint ornamental star behind the focused card */
.hk-pv-teaser .pv-glow {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    height: 560px;
    max-width: 92%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--hk-gold) 16%, transparent), transparent 62%);
}
.hk-pv-teaser .pv-star {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    font-size: 30vw;
    line-height: 1;
    color: var(--hk-gold);
    opacity: 0.035;
    pointer-events: none;
}
.hk-pv-teaser .pv-floor {
    position: absolute;
    left: 10%;
    right: 10%;
    top: calc(42% + 216px);
    height: 1px;
    z-index: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hk-gold) 30%, transparent), transparent);
}

/* Gold-ring arrows */
.hk-pv-teaser .pv-arrow {
    width: 50px;
    height: 50px;
    top: 42%;
    background: color-mix(in srgb, var(--hk-parchment) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--hk-gold) 40%, transparent);
    color: var(--hk-gold-t, var(--hk-gold));
    margin-bottom: 0;
}
.hk-pv-teaser .pv-arrow:hover {
    background: color-mix(in srgb, var(--hk-gold) 12%, transparent);
    border-color: var(--hk-gold);
    color: var(--hk-gold);
}

/* Roman folio meter (replaces dots) */
.hk-pv-teaser .pv-meter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 16px;
}
.hk-pv-teaser .pv-meter__ro {
    font-family: var(--hk-font-heading);
    font-style: italic;
    font-size: 17px;
    color: var(--hk-gold);
    min-width: 68px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.hk-pv-teaser .pv-meter__tr {
    position: relative;
    width: min(300px, 42vw);
    height: 1.5px;
    background: color-mix(in srgb, var(--hk-gold) 14%, transparent);
    overflow: hidden;
}
.hk-pv-teaser .pv-meter__tr i {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--hk-gold-deep, #8F6F3D), var(--hk-gold-light));
    transform-origin: left;
    transform: scaleX(0.2);
    transition: transform 0.5s var(--hk-ease);
}

@media (prefers-reduced-motion: reduce) {
    .hk-pv-teaser .pv-card.is-center::after { animation: none; opacity: 0; }
}

/* Teaser mobile: smaller card, drop the reflection (saves height) */
@media (max-width: 767px) {
    .hk-pv-teaser .pv-carousel-wrap { height: 470px; }
    .hk-pv-teaser .pv-card {
        width: 250px;
        height: 342px;
        -webkit-box-reflect: none;
    }
    .hk-pv-teaser .pv-floor { display: none; }
}

/* ============================================================
   MOBILE REWORK — consolidated overrides (≤768px)
   All rules below are mobile-only. Desktop unchanged.
   ============================================================ */

@media (max-width: 768px) {

    /* --- 1. Manifesto typography --- */
    .hk-manifesto__text {
        font-size: 2.2rem;
    }

    .hk-manifesto__sub {
        font-size: 1.05rem;
    }

    /* --- 2. Section h2 sizes --- */
    .hk-section-heading h2,
    .hk-projects h2,
    .hk-aktuelles h2,
    .hk-pv-teaser__head h2 {
        font-size: 2.5rem;
    }

    .hk-hp-events__header h2 {
        font-size: 3.5rem;
    }

    /* --- 3. Testimonials heading --- */
    .hk-testimonials__header h2 {
        font-size: 2.6rem;
    }

    /* --- 4. Project card body — centre align --- */

    /* --- 6. Ramadan Kompendium — centre panel --- */
    .hk-kompendium-banner__bg::after {
        background: linear-gradient(
            to bottom,
            rgba(27, 42, 74, 0.65) 0%,
            rgba(27, 42, 74, 0.50) 60%,
            rgba(27, 42, 74, 0.40) 100%
        );
    }

    .hk-kompendium-banner__content {
        margin-inline: auto;
        text-align: center;
    }

    .hk-kompendium-banner__divider {
        margin-inline: auto;
    }

    /* --- 8. Project card facts — centre --- */

}

@media (max-width: 480px) {

    /* Manifesto — even larger on small phones */
    .hk-manifesto__text {
        font-size: 1.75rem;
    }
}

/* === Dark Mode Overrides === */

/* White-background sections → dark */
:root[data-theme="dark"] .hk-hero--cinematic,
:root[data-theme="dark"] .hk-hero__text-strip,
:root[data-theme="dark"] .hk-manifesto,
:root[data-theme="dark"] .hk-projects,
:root[data-theme="dark"] .hk-aktuelles,
:root[data-theme="dark"] .hk-mediathek,
:root[data-theme="dark"] .hk-testimonials {
    background: var(--hk-parchment);
}

:root[data-theme="dark"] .hk-hero__text-strip {
    border-top-color: rgba(200, 169, 110, 0.15);
}

:root[data-theme="dark"] .hk-manifesto,
:root[data-theme="dark"] .hk-impact,
:root[data-theme="dark"] .hk-aktuelles {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .hk-aktuelles__card,

:root[data-theme="dark"] .hk-hero__title-glass {
    background: linear-gradient(to right, rgba(9, 15, 28, 0.45), rgba(14, 23, 38, 0.25));
    border: 1px solid rgba(200, 169, 110, 0.2);
}

:root[data-theme="dark"] .hk-testimonials__card {
    background: var(--hk-glass);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

/* Project cards → dark glass instead of white */



/* Connect CTA / Kontakt + Newsletter — lock to light-mode appearance */
:root[data-theme="dark"] .hk-connect-cta p {
    color: #E8E2D6;
}

/* Connect CTA — class-based, dark-mode-aware */
.hk-connect-cta__overline {
    color: var(--hk-gold-light);
}

:root[data-theme="dark"] .hk-connect-cta__overline {
    color: var(--hk-gold);
}

.hk-connect-cta__link {
    color: var(--hk-gold-light);
    text-decoration: underline;
}

:root[data-theme="dark"] .hk-connect-cta__link {
    color: var(--hk-gold);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hk-hero__title-glass {
        background: linear-gradient(to right, rgba(9, 15, 28, 0.45), rgba(14, 23, 38, 0.25));
        border: 1px solid rgba(200, 169, 110, 0.2);
    }
    :root:not([data-theme="light"]) .hk-testimonials__card {
        background: var(--hk-glass);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    }
}

/* ============================================================
   12. EID AL-ADHA BANNER — temporary, DE-only
   TODO: remove after Eid al-Adha (target: 2026-05-30)
   Spec: docs/superpowers-optimized/specs/2026-05-26-eid-banner-design.md
   ============================================================ */

.hk-eid {
    background: var(--hk-parchment);
    padding: clamp(80px, 10vw, 130px) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Crescent moon watermark — mirrors .hk-manifesto::before pattern */
.hk-eid::before {
    content: '\262A'; /* ☪ */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30vw;
    color: var(--hk-gold);
    opacity: 0.035;
    pointer-events: none;
    line-height: 1;
    z-index: 0;
}

/* Top gold hairline */
.hk-eid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, 60%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    opacity: 0.4;
}

.hk-eid__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.75rem, 3vw, 2.5rem);
}

.hk-eid__overline {
    /* base typography inherited from .hk-overline (style.css) */
    transition-delay: 80ms;
}

.hk-eid__takbir {
    font-family: var(--hk-font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    line-height: 1.55;
    color: var(--hk-heading);
    letter-spacing: -0.005em;
    max-width: 620px;
    transition-delay: 160ms;
}

.hk-eid__takbir p {
    margin: 0 0 0.5rem;
}

.hk-eid__takbir p:last-child {
    margin-bottom: 0;
}

/* Diamond divider — gold hairline + diamond glyph, matches .hk-manifesto__divider feel */
.hk-eid__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 280px;
    margin: 0;
}

.hk-eid__divider span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    opacity: 0.5;
}

.hk-eid__divider i {
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    background: var(--hk-gold);
    opacity: 0.6;
    flex-shrink: 0;
}

.hk-eid__figure {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    transition-delay: 240ms;
}

.hk-eid__image {
    display: block;
    width: clamp(280px, 36vw, 420px);
    height: auto;
    border-radius: 4px;
}

.hk-eid__message {
    font-family: var(--hk-font-body);
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--hk-body);
    max-width: 620px;
    margin: 0 auto;
    transition-delay: 320ms;
}

.hk-eid__message p {
    margin: 0 0 1.25rem;
}

.hk-eid__message p:last-child {
    margin-bottom: 0;
}

.hk-eid__amin {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--hk-gold-text);
    margin: 0.5rem 0 0;
    letter-spacing: 0.01em;
    transition-delay: 480ms;
}

/* Bottom gold hairline */
.hk-eid__inner::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * clamp(80px, 10vw, 130px) + 24px);
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, 60%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    opacity: 0.4;
}

/* === Dark mode — illuminated manuscript === */
:root[data-theme="dark"] .hk-eid::before {
    opacity: 0.055;
}


@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hk-eid::before {
        opacity: 0.055;
    }
}

/* === Mobile === */
@media (max-width: 768px) {
    .hk-eid {
        padding: clamp(56px, 14vw, 80px) 0;
    }
    .hk-eid__inner {
        gap: 1.5rem;
    }
    .hk-eid__takbir {
        font-size: 1.25rem;
        line-height: 1.5;
    }
    .hk-eid__image {
        width: min(85vw, 320px);
    }
    .hk-eid__message {
        font-size: 1rem;
        line-height: 1.75;
    }
    .hk-eid__message p {
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .hk-eid__overline {
        font-size: 0.7rem;
    }
    .hk-eid__takbir {
        font-size: 1.15rem;
    }
    .hk-eid__amin {
        font-size: 1.45rem;
    }
}