/* 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.40);
    --hk-hero-scrim: rgba(5, 9, 18, 0.60);
}
/* Only a whisper of blur so the video reads clearly through the glass
   rather than as a frosted haze */
.hk-hero[data-hero="horizont"] .hk-hero__frost {
    backdrop-filter: blur(3px) saturate(1.08);
    -webkit-backdrop-filter: blur(3px) saturate(1.08);
}
.hk-hero[data-hero="horizont"] .hk-hero__video { filter: brightness(0.92) saturate(0.85) contrast(1.02); }
.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 (kept light so the
   video shows through; just enough to seat the gold + hold text legibility) */
.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.10), transparent 55%),
                linear-gradient(180deg, rgba(6, 11, 24, 0.44), rgba(6, 11, 24, 0.20) 50%, rgba(6, 11, 24, 0.62));
}

/* 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;
}
/* The condense effect uses scale(), NOT letter-spacing: animating
   letter-spacing re-wraps the line mid-transition, which both changes the
   text's look while fading in AND shrinks the centered lockup (the whole
   hero visibly jumped down when the wrap flipped). transform is
   layout-neutral. */
html.hk-reveal-on .hk-hero[data-hero="horizont"] .hk-hero__motto {
    opacity: 0;
    transform: translateY(16px) scale(1.05);
    filter: blur(9px);
    transition: opacity 1.7s cubic-bezier(0.22, 1, 0.36, 1) 3.6s,
                transform 2.2s cubic-bezier(0.22, 1, 0.36, 1) 3.5s,
                filter 1.5s ease 3.6s;
}
/* 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);
}
html.hk-skip-anim .hk-hero[data-hero="horizont"] .hk-hero__motto {
    opacity: 1; transform: none; filter: none; transition: none;
}

/* Logo entrance without blur(): iOS WebKit paints a blur()ed <img> layer
   as a white box while it rasterizes — even at opacity 0. Entrance is
   opacity + transform only; the drop-shadow is static (never transitioned). */
.hk-hero[data-hero="horizont"] .hk-hero__logo {
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 3.6s,
                transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 3.6s;
}
/* Arm/release/skip trio — the legacy `.hk-hero:not(.is-playing)` fallback
   ((0,3,0)) otherwise shows the logo at 0.97 BEFORE the entrance, and the
   delayed transition then keeps it visible forever: it never fades in.
   Armed here at (0,4,1), released at (0,5,1) in the same beat as the
   motto (3.6s), skip path snaps final. */
html.hk-reveal-on .hk-hero[data-hero="horizont"] .hk-hero__logo {
    opacity: 0;
    transform: translateY(-8px) scale(0.94);
}
html.hk-reveal-on .hk-hero[data-hero="horizont"].is-playing .hk-hero__logo {
    opacity: 0.97;
    transform: none;
}
html.hk-skip-anim .hk-hero[data-hero="horizont"] .hk-hero__logo {
    opacity: 0.97; transform: none; 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%;
}

/* Forgotten Heroes banner — the man with the flashlight is on the RIGHT
   of the photo, so push the cover crop toward the right edge to bring him
   into the center of the narrow arch */
.hk-projects__img--fh { object-position: 68% center; }

/* Crown-of-the-arch glow removed per request — no lamp, no shimmer. */
.hk-projects__alcove-light { display: none; }

.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.75rem;
    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: 15px;
    line-height: 1.7;
    color: rgba(247, 244, 238, 0.78);
    margin: 10px auto 0;
    max-width: 34ch;
}

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

.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 {
    display: none;
}

.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);
}

/* Date not fixed yet — refined italic serif placeholder in place of the
   gold numerals (no gradient/sheen: that treatment is for the date digits). */
.hk-hp-events__tba {
    margin: 0 0 2px;
    max-width: 20ch;
    font-family: var(--hk-font-heading);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.55rem, 3.2vw, 2.15rem);
    line-height: 1.32;
    color: var(--hk-gold-light);
}

.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;
    }

    /* Arrows centered on the seam between the 200px card image and the caption
       below it (image starts ~17px into the gallery, so its bottom edge is at
       ~217px). This selector out-specifies the shared pages.css arrow rule. */
    .hk-hp-events__past .hk-gallery__arrow {
        top: 217px;
        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);
    }
    /* Center each reading row (value + label) on narrow screens */
    .hk-impact__stat {
        justify-content: center;
    }
}

/* ==========================================================================
   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 {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 15px 34px;
    font-family: var(--hk-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--hk-gold-light);
    text-decoration: none;
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(200, 169, 110, 0.55);
    border-radius: 2px;
    background: rgba(200, 169, 110, 0.04);
    overflow: hidden;
    transition: color 0.5s var(--hk-ease), border-color 0.5s var(--hk-ease);
}
/* Gold sweep fills from the left on hover; the arrow nudges forward */
.hk-fh-teaser__cta a::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, var(--hk-gold), var(--hk-gold-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.55s var(--hk-ease);
}
.hk-fh-teaser__cta a:hover {
    color: #0B1428;
    border-color: var(--hk-gold-light);
}
.hk-fh-teaser__cta a:hover::before {
    transform: scaleX(1);
}
.hk-fh-teaser__cta a:focus-visible {
    outline: 2px solid var(--hk-gold-light);
    outline-offset: 3px;
}

@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 {
        /* Scale with viewport so the long word "Veranstaltungen" never
           overruns the right edge on narrow phones. */
        font-size: clamp(2rem, 8.5vw, 3.4rem);
    }

    /* --- 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;
    }
}