/* HAKIM Theme — Pages Styles
   Universal page, blog listing, archive, search, 404
   ========================================================================== */

/* ==========================================================================
   Premium Page Hero (shared across page.php, archive, search)
   ========================================================================== */

.hk-page-hero {
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: var(--hk-hero-gradient);
    overflow: hidden;
}

.hk-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(200, 169, 110, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.hk-page-hero::after {
    content: '✦';
    position: absolute;
    inset-inline-end: -3%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40rem;
    color: rgba(200, 169, 110, 0.02);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.hk-page-hero--compact {
    min-height: 32vh;
}

.hk-page-hero__content {
    position: relative;
    z-index: 1;
    padding: 6rem 2rem;
}

.hk-page-hero .hk-overline {
    display: block;
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-page-hero__title {
    font-family: var(--hk-font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    color: var(--hk-white);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0.75rem 0 1.5rem;
}

.hk-page-hero__divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 1.5rem;
}

.hk-page-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 1.4rem;
    font-weight: 300;
    color: rgba(247, 244, 238, 0.8);
    letter-spacing: 0.03em;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.hk-page-hero__highlight {
    color: var(--hk-gold-light);
}

/* ==========================================================================
   Generic Page Template (.hk-page)
   ========================================================================== */

.hk-page {
    padding: 4rem 0 var(--hk-section-padding);
    background: var(--hk-parchment);
}

.hk-page__card {
    background: var(--hk-white);
    border-radius: var(--hk-radius, 8px);
    padding: var(--hk-space-xl, 48px);
    box-shadow: 0 2px 20px rgba(27, 42, 74, 0.04), 0 0 0 1px rgba(27, 42, 74, 0.04);
    position: relative;
}

.hk-page__card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: var(--hk-space-lg, 32px);
    inset-inline-end: var(--hk-space-lg, 32px);
    height: 1px;
    background: linear-gradient(to right, transparent, var(--hk-gold), transparent);
    opacity: 0.3;
}

:root[data-theme="dark"] .hk-page__card {
    background: #233456;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.hk-page__content p {
    margin-bottom: 1.5em;
    font-size: 1.05rem;
    line-height: 1.9;
}

.hk-page__content ul,
.hk-page__content ol {
    margin-bottom: 1.5em;
    padding-inline-start: 1.75em;
}

.hk-page__content ul {
    list-style: disc;
}

.hk-page__content ol {
    list-style: decimal;
}

.hk-page__content h2 {
    font-family: var(--hk-font-heading);
    font-size: 2rem;
    font-weight: 500;
    color: var(--hk-heading);
    margin: 2em 0 1em;
}

.hk-page__content h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--hk-heading);
    margin: 1.5em 0 0.75em;
}

.hk-page__content blockquote {
    border-inline-start: 3px solid var(--hk-gold);
    padding: 1.25rem 1.75rem;
    margin: 2em 0;
    font-style: italic;
    color: var(--hk-heading);
    background: rgba(200, 169, 110, 0.04);
    border-radius: 0 4px 4px 0;
}

.hk-page__content a {
    color: var(--hk-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hk-page__content a:hover {
    color: var(--hk-gold);
}

.hk-page__content img {
    border-radius: 12px;
    display: block;
    margin: 1.5em auto;
    max-width: 100%;
    height: auto;
}

.hk-page__content h2,
.hk-page__content h3,
.hk-page__content h4 {
    margin-top: 2em;
    margin-bottom: 0.5em;
}

/* ==========================================================================
   Post Cards (shared: index, archive, search, homepage aktuelles)
   ========================================================================== */

.hk-post-grid {
    margin-bottom: 3rem;
}

a.hk-post-card {
    color: inherit;
    text-decoration: none;
}

.hk-post-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s var(--hk-ease), box-shadow 0.3s var(--hk-ease);
}

.hk-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hk-glass-shadow-elevated);
}

.hk-post-card.hk-glass {
    padding: 0;
}

/* Image area */
.hk-post-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
}

.hk-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s var(--hk-ease);
}

.hk-post-card:hover .hk-post-card__image img {
    transform: scale(1.04);
}

.hk-post-card__image--fallback {
    background: linear-gradient(135deg, var(--hk-navy), var(--hk-navy-mid));
}

/* Category badge */
.hk-post-card__badge {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--hk-heading);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 100px;
    border: none;
}

/* Card body */
.hk-post-card__body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hk-post-card__body h3 {
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);  /* Spec B1.1 — 18-22 px floor, matches Aktuelles hotfix */
    margin-bottom: 0.5rem;
    line-height: 1.35;
}

.hk-post-card__body h3 {
    color: var(--hk-heading);
    transition: color var(--hk-transition);
}

.hk-post-card:hover .hk-post-card__body h3 {
    color: var(--hk-gold);
}

.hk-post-card__excerpt {
    color: var(--hk-body);
    font-size: 15px;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 0;
}

.hk-post-card__date {
    display: block;
    font-size: 13px;
    color: var(--hk-gold);
    font-weight: 500;
    margin-top: 1rem;
}

/* ==========================================================================
   Responsive — Tablet (768px)
   ========================================================================== */

@media (max-width: 768px) {
    /* Page hero */
    .hk-page-hero { min-height: 30vh; }
    .hk-page-hero--compact { min-height: 25vh; }
    .hk-page-hero__content { padding: 4rem 1.5rem; }
    .hk-page-hero__title { word-break: break-word; hyphens: auto; }

    /* Page card */
    .hk-page__card { padding: 2rem 1.5rem; }

    /* 404 hero */
    .hk-404-hero { min-height: 40vh; }
    .hk-404__inner { padding: 2rem 1.5rem; }

    /* Contact */
    .hk-contact-hero { min-height: 50vh; }
    .hk-contact-cta { padding: 4rem 0; }

    .hk-post-card__image {
        height: 200px;
    }

    /* Mobile — events grid single column */
    .hk-template-events .hk-grid--2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Responsive — Mobile (480px)
   ========================================================================== */

@media (max-width: 480px) {
    .hk-page__header {
        padding: 50px 0 30px;
    }

    .hk-search-form {
        flex-direction: column;
        max-width: 100%;
    }

    .hk-search-form__input {
        border-radius: 12px 12px 0 0;
    }

    .hk-search-form__btn {
        border-radius: 0 0 12px 12px;
    }

    .hk-post-card__image {
        height: 180px;
    }

    .hk-empty-state {
        font-size: 16px;
        padding: 2rem 1rem;
    }

    /* 480px — 404 card padding reduction */
    .hk-404__inner {
        padding: 2.5rem 1.5rem;
    }

}

/* ==========================================================================
   Project Page — SAKINA Logo
   ========================================================================== */

.hk-project__logo {
    display: block;
    height: 180px;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 12px;
}

/* ── HAKIM-Campus Premium Hero ── */
.hk-campus-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.hk-campus-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(247, 244, 238, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hk-campus-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 4rem 2rem;
}

.hk-campus-hero__logo {
    display: block;
    height: clamp(140px, 20vw, 220px);
    width: auto;
    object-fit: contain;
    margin: 0 auto;
    filter: drop-shadow(0 4px 16px rgba(27, 42, 74, 0.08));
}

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

.hk-campus-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    font-weight: 300;
    color: var(--hk-heading);
    letter-spacing: 0.01em;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .hk-campus-hero {
        min-height: 50vh;
    }
}

/* ==========================================================================
   SAKINA Page — Premium Layout v2
   ========================================================================== */

/* --- Hero --- */
.hk-sakina-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--hk-navy);
}

.hk-sakina-hero__bg {
    position: absolute;
    inset: 0;
    background: image-set(
        url('/wp-content/themes/hakim-theme/assets/img/sakina-hero-bg.webp') type('image/webp'),
        url('/wp-content/themes/hakim-theme/assets/img/sakina-hero-bg.jpg') type('image/jpeg')
    ) center 30% / cover no-repeat;
}

.hk-sakina-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}

.hk-sakina-hero__content {
    position: relative;
    text-align: center;
    padding: 4rem 2rem 6rem;
    z-index: 1;
    max-width: 800px;
}

.hk-sakina-hero__logo {
    display: none;
}

.hk-sakina-hero__title {
    font-family: var(--hk-font-heading);
    font-size: 5.5rem;
    font-weight: 300;
    color: var(--hk-white);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
    line-height: 1;
}

.hk-sakina-hero__divider {
    width: 60px;
    height: 1px;
    background: var(--hk-gold);
    margin: 0 auto 1.5rem;
    opacity: 0.6;
}

.hk-sakina-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 2.4rem;
    font-weight: 300;
    font-style: italic;
    color: var(--hk-gold);
    margin: 0 0 1.5rem;
    letter-spacing: 0.03em;
    line-height: 1.5;
}

.hk-sakina-hero__sub {
    font-family: var(--hk-font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.hk-sakina-hero__scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.4;
    animation: hk-sakina-scroll-pulse 2.5s ease-in-out infinite;
}

.hk-sakina-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--hk-white);
}

.hk-sakina-hero__scroll svg {
    width: 40px;
    height: 40px;
    stroke: var(--hk-gold);
}

/* B2: unique, assess (pulse+translateY scroll-indicator; no clean primitive match) */
@keyframes hk-sakina-scroll-pulse {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
    50% { opacity: 0.7; transform: translateX(-50%) translateY(6px); }
}

/* --- About (split layout) --- */
.hk-sakina-about {
    padding: 10rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

/* Gold top rule */
.hk-sakina-about::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

/* Large faint background ornament */
.hk-sakina-about::after {
    content: '✦';
    position: absolute;
    inset-inline-end: -2%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 52rem;
    color: rgba(200, 169, 110, 0.025);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.hk-sakina-about .hk-container {
    position: relative;
    z-index: 1;
}

.hk-sakina-about__grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 7rem;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
}

.hk-sakina-about__text {
    padding-inline-start: 3rem;
    border-inline-start: 1px solid rgba(200, 169, 110, 0.3);
}

.hk-sakina-about .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-sakina-about .hk-overline::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, var(--hk-gold), transparent);
    margin-top: 1rem;
}

.hk-sakina-about__text .hk-display {
    font-size: 4.8rem;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 2.5rem;
    margin-top: 1.5rem;
    color: var(--hk-white);
}

.hk-sakina-lead {
    font-size: 1.05rem;
    line-height: 2;
    color: rgba(247, 244, 238, 0.72);
    margin-bottom: 1.2rem;
    font-weight: 300;
}

.hk-sakina-signoff {
    font-family: var(--hk-font-heading);
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 400;
    color: var(--hk-gold);
    margin-top: 2.5rem;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.hk-sakina-about__image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hk-sakina-about__image--logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hk-sakina-about__image--logo img {
    width: auto;
    height: auto;
    max-width: 360px;
    max-height: 440px;
    object-fit: contain;
    border-radius: 24px;
    box-shadow:
        0 0 0 1px rgba(200,169,110,0.5),
        0 0 40px rgba(200,169,110,0.12),
        0 0 100px rgba(200,169,110,0.06),
        0 40px 100px rgba(0,0,0,0.7);
    transition: box-shadow 0.4s ease;
}

.hk-sakina-about__image--logo img:hover {
    box-shadow:
        0 0 0 1px rgba(200,169,110,0.7),
        0 0 60px rgba(200,169,110,0.2),
        0 0 120px rgba(200,169,110,0.1),
        0 40px 100px rgba(0,0,0,0.7);
}

/* --- Motto --- */
.hk-sakina-motto {
    padding: 5rem 0;
}

.hk-sakina-motto__card {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--hk-glass-border);  /* Spec B1 — Family 3 full border shorthand */
    border-radius: 16px;
    padding: 3rem 3.5rem;
    position: relative;
}

.hk-sakina-motto__ornament {
    color: var(--hk-gold);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    opacity: 0.6;
}

.hk-sakina-motto__card p {
    font-family: var(--hk-font-heading);
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--hk-heading);
    margin: 0 0 1rem;
}

.hk-sakina-motto__card cite {
    display: block;
    font-family: var(--hk-font-body);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--hk-gold);
}

/* --- Approach (split layout, reversed) --- */
.hk-sakina-approach {
    padding: 5rem 0 6rem;
    background: var(--hk-white);
}

.hk-sakina-approach__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.hk-sakina-approach__image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(27, 42, 74, 0.1);
}

.hk-sakina-approach__text h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.2rem;
    font-weight: 500;
    color: var(--hk-heading);
    margin-bottom: 1.5rem;
}

.hk-sakina-approach__text p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--hk-body);
    margin-bottom: 1.25rem;
}

.hk-sakina-approach__leitsatz {
    font-family: var(--hk-font-heading);
    font-size: 1.35rem;
    font-style: italic;
    color: var(--hk-gold);
    margin-top: 1rem;
}

/* --- Parallax image break --- */
.hk-sakina-parallax {
    height: 45vh;
    min-height: 350px;
    background: url('/wp-content/themes/hakim-theme/assets/img/sakina-workshop.jpg') center center / cover no-repeat;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hk-sakina-parallax__overlay {
    position: absolute;
    inset: 0;
    background: rgba(27, 42, 74, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.hk-sakina-parallax__overlay .hk-overline {
    color: var(--hk-gold);
    margin-bottom: 1rem;
}

.hk-sakina-parallax__text {
    font-family: var(--hk-font-heading);
    font-size: 3.8rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 1.4;
    margin: 0;
}

/* --- Pillars (3 columns, navy) --- */
.hk-sakina-pillars {
    background: var(--hk-navy);
    padding: 5rem 2rem 6rem;
}

.hk-sakina-pillars > .hk-container > .hk-overline {
    color: var(--hk-gold);
    text-align: center;
    display: block;
    margin-bottom: 3rem;
}

.hk-sakina-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.hk-sakina-pillar {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(200, 169, 110, 0.2);
    border-top: 3px solid var(--hk-gold);
    transition: transform 0.4s var(--hk-ease), box-shadow 0.4s var(--hk-ease);
}

.hk-sakina-pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.hk-sakina-pillar__illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    height: 160px;
}

.hk-sakina-pillar__illustration img {
    max-height: 140px;
    max-width: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: invert(1) opacity(0.85);
    transition: transform 0.5s var(--hk-ease);
}

.hk-sakina-pillar:hover .hk-sakina-pillar__illustration img {
    transform: scale(1.08);
}

.hk-sakina-pillar h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--hk-white);
    margin-bottom: 1rem;
}

.hk-sakina-pillar p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

/* --- Journey (3-step process) --- */
.hk-sakina-journey {
    padding: 6rem 0;
    background: var(--hk-parchment);
}

.hk-sakina-journey .hk-overline {
    text-align: center;
}

.hk-sakina-journey__steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
}

.hk-sakina-journey__step {
    flex: 1;
    text-align: center;
    padding: 2rem 1.5rem;
}

.hk-sakina-journey__number {
    font-family: var(--hk-font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--hk-gold);
    line-height: 1;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.hk-sakina-journey__step h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--hk-heading);
    margin-bottom: 0.75rem;
}

.hk-sakina-journey__step p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--hk-body);
    margin: 0;
}

.hk-sakina-journey__connector {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--hk-gold), var(--hk-gold-light));
    margin-top: 3.5rem;
    flex-shrink: 0;
    opacity: 0.5;
}

/* --- Audience (target groups) --- */
.hk-sakina-audience {
    padding: 5rem 0 6rem;
    background: var(--hk-white);
}

.hk-sakina-audience .hk-overline {
    text-align: center;
}

.hk-sakina-audience__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.hk-sakina-audience__card {
    text-align: center;
    padding: 2.5rem 2rem;
    border-top: 3px solid var(--hk-gold);
    transition: transform 0.4s var(--hk-ease), box-shadow 0.4s var(--hk-ease);
}

.hk-sakina-audience__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(27, 42, 74, 0.1);
}

.hk-sakina-audience__icon {
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
    line-height: 1;
}

.hk-sakina-audience__card h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--hk-heading);
    margin-bottom: 0.75rem;
}

.hk-sakina-audience__card p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--hk-body);
    margin: 0;
}

/* --- Quote Section (Quran verse) --- */
.hk-sakina-quote-section {
    padding: 5rem 0;
    background: var(--hk-navy);
}

.hk-sakina-quote-section__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.hk-sakina-quote-section__ornament {
    color: var(--hk-gold);
    font-size: 1.5rem;
    opacity: 0.5;
    margin: 1rem 0;
}

.hk-sakina-quote-section blockquote {
    margin: 0;
    padding: 0;
    border: none;
}

.hk-sakina-quote-section blockquote p {
    font-family: var(--hk-font-heading);
    font-size: 2rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;
    color: var(--hk-white);
    margin: 0;
}

.hk-sakina-quote-section cite {
    display: block;
    font-family: var(--hk-font-body);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--hk-gold);
    margin-top: 1.5rem;
}

/* --- Impact Numbers --- */
.hk-sakina-impact {
    padding: 4rem 0;
    background: var(--hk-parchment);
}

.hk-sakina-impact__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.hk-sakina-impact__item {
    padding: 1.5rem 1rem;
}

.hk-sakina-impact__number {
    font-family: var(--hk-font-heading);
    font-size: 3rem;
    font-weight: 600;
    color: var(--hk-heading);
    line-height: 1;
}

.hk-sakina-impact__suffix {
    font-family: var(--hk-font-heading);
    font-size: 2rem;
    font-weight: 300;
    color: var(--hk-gold);
}

.hk-sakina-impact__label {
    display: block;
    font-family: var(--hk-font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hk-body);
    margin-top: 0.5rem;
}

/* --- CTA --- */
.hk-sakina-cta {
    padding: 6rem 0;
    background: var(--hk-navy);
}

.hk-sakina-cta__inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.hk-sakina-cta .hk-overline {
    color: var(--hk-gold);
}

.hk-sakina-cta h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--hk-white);
    margin-bottom: 1rem;
}

.hk-sakina-cta__sub {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2.5rem;
}

.hk-sakina-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hk-sakina-cta__buttons .hk-btn--glass {
    color: var(--hk-white);
    border-color: rgba(255, 255, 255, 0.3);
}

.hk-sakina-cta__buttons .hk-btn--glass:hover {
    border-color: var(--hk-gold);
    color: var(--hk-gold);
}

/* --- SAKINA Mobile Responsive --- */
@media (max-width: 768px) {
    .hk-sakina-hero {
        min-height: 90vh;
    }

    .hk-sakina-hero__title {
        font-size: 3rem;
        letter-spacing: 0.1em;
    }

    .hk-sakina-hero__tagline {
        font-size: 1.6rem;
    }

    .hk-sakina-hero__sub {
        font-size: 0.8rem;
    }

    .hk-sakina-hero__logo {
        width: 90px;
    }

    .hk-sakina-about__grid,
    .hk-sakina-approach__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hk-sakina-about__text {
        padding-inline-start: 1.5rem;
    }

    .hk-sakina-about__text .hk-display {
        font-size: 2.8rem;
    }

    .hk-sakina-about__image img,
    .hk-sakina-approach__image img {
        height: 280px;
    }

    .hk-sakina-about__image--logo img {
        max-width: 260px;
        height: auto;
    }

    .hk-sakina-approach__image {
        order: -1;
    }

    .hk-sakina-motto__card {
        padding: 2rem 1.5rem;
    }

    .hk-sakina-parallax {
        height: 35vh;
        background-attachment: scroll;
    }

    .hk-sakina-parallax__text {
        font-size: 2.2rem;
    }

    .hk-sakina-pillars {
        padding: 3rem 1.25rem 4rem;
    }

    .hk-sakina-pillars__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hk-sakina-journey__steps {
        flex-direction: column;
        align-items: center;
    }

    .hk-sakina-journey__connector {
        width: 2px;
        height: 40px;
        margin: 0;
    }

    .hk-sakina-audience__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hk-sakina-quote-section blockquote p {
        font-size: 1.4rem;
    }

    .hk-sakina-impact__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hk-sakina-cta h2 {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   Project Page Hero Image
   ========================================================================== */

.hk-project__hero-image {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    position: relative;
}

.hk-project__hero-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    margin: 0;
}

/* Project hero — dark-to-transparent bottom gradient overlay */
.hk-project__hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(27, 42, 74, 0.5) 0%, transparent 60%);
    pointer-events: none;
}

/* ==========================================================================
   Template: Project Page (.hk-template-project)
   ========================================================================== */

.hk-template-project {
    padding-top: 40px;
    padding-bottom: var(--hk-section-padding);
}

.hk-template-project--sakina {
    padding: 0;
}

.hk-template-project__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--hk-space-xl);
    align-items: start;
}

.hk-template-project__content p {
    margin-bottom: 1.5em;
}

.hk-template-project__content h2,
.hk-template-project__content h3 {
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.hk-template-project__facts {
    padding: 1.5rem;
    position: sticky;
    top: 100px;
    border-top: 3px solid var(--hk-gold);
}

.hk-template-project__facts h4 {
    margin-bottom: 1rem;
    color: var(--hk-heading);
    font-family: var(--hk-font-heading);
    font-size: 1.1rem;
}

.hk-template-project__facts ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hk-template-project__facts li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--hk-parchment-dark);
    font-size: 15px;
    color: var(--hk-body);
    display: flex;
    gap: 8px;
}

.hk-template-project__facts li strong {
    color: var(--hk-gold);
    font-weight: 600;
    min-width: 72px;
    flex-shrink: 0;
}

.hk-template-project__facts li:last-child {
    border-bottom: none;
}

.hk-template-project__cta {
    padding: var(--hk-space-2xl) 0;
}

/* ==========================================================================
   Kompendium Banner (shared: homepage + /hakim-magazin/ page)
   ========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

/* Standalone page variant — taller hero */
.hk-kompendium-banner--page {
    min-height: 500px;
}

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

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

/* ==========================================================================
   Magazin Page Sections (/hakim-magazin/)
   ========================================================================== */

/* --- Intro: split text + cover image --- */
.hk-magazin-intro {
    padding: var(--hk-space-2xl) 0;
}

.hk-magazin-intro__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hk-space-2xl);
    align-items: center;
}

.hk-magazin-intro__text .hk-overline {
    margin-bottom: 1rem;
}

.hk-magazin-intro__text h2 {
    font-family: var(--hk-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    color: var(--hk-heading);
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.hk-magazin-intro__text p {
    font-size: 16px;
    line-height: 1.85;
    color: var(--hk-body);
    margin-bottom: 1.25rem;
}

.hk-magazin-intro__image {
    display: flex;
    justify-content: center;
}

.hk-magazin-intro__image-frame {
    position: relative;
    max-width: 360px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(27, 42, 74, 0.12), 0 4px 12px rgba(27, 42, 74, 0.06);
    transition: transform 0.4s var(--hk-ease), box-shadow 0.4s var(--hk-ease);
}

.hk-magazin-intro__image-frame:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 64px rgba(27, 42, 74, 0.16), 0 8px 20px rgba(27, 42, 74, 0.08);
}

.hk-magazin-intro__image-frame img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .hk-magazin-intro__split {
        grid-template-columns: 1fr;
        gap: var(--hk-space-xl);
    }

    .hk-magazin-intro__image {
        order: -1;
    }

    .hk-magazin-intro__image-frame {
        max-width: 280px;
    }
}

/* --- Topics: 3-column numbered cards --- */
.hk-magazin-topics {
    padding: var(--hk-space-2xl) 0;
    background: var(--hk-navy);
}

.hk-magazin-topics__header {
    text-align: center;
    margin-bottom: var(--hk-space-xl);
}

.hk-magazin-topics__header .hk-overline {
    color: var(--hk-gold);
}

.hk-magazin-topics__header h2 {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 300;
    color: var(--hk-white);
    line-height: 1.2;
}

.hk-magazin-topics__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hk-space-lg);
}

.hk-magazin-topic {
    padding: 2.5rem 2rem 2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--hk-radius);
    transition: background 0.3s var(--hk-ease), border-color 0.3s var(--hk-ease);
}

.hk-magazin-topic:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(200, 169, 110, 0.2);
}

.hk-magazin-topic__number {
    font-family: var(--hk-font-heading);
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--hk-gold);
    opacity: 0.4;
    line-height: 1;
    margin-bottom: 1.25rem;
}

.hk-magazin-topic h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--hk-white);
    margin-bottom: 0.75rem;
}

.hk-magazin-topic p {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 768px) {
    .hk-magazin-topics__grid {
        grid-template-columns: 1fr;
        gap: var(--hk-space-md);
    }
}

/* --- Download CTA: centered navy section --- */
.hk-magazin-download {
    padding: var(--hk-space-2xl) 0;
}

.hk-magazin-download__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.hk-magazin-download__inner .hk-overline {
    margin-bottom: 0.75rem;
}

.hk-magazin-download__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 300;
    color: var(--hk-heading);
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

.hk-magazin-download__divider {
    width: 48px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--hk-gold), var(--hk-gold-light), transparent);
    margin: 0 auto 1.5rem;
}

.hk-magazin-download__inner p {
    font-size: 16px;
    line-height: 1.85;
    color: var(--hk-body);
    margin-bottom: 2rem;
}

.hk-magazin-download__buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hk-magazin-download__buttons .hk-btn svg {
    margin-inline-end: 0.4rem;
    vertical-align: -2px;
}

@media (max-width: 480px) {
    .hk-magazin-download__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hk-magazin-download__buttons .hk-btn {
        text-align: center;
    }
}

/* --- Legal disclaimer --- */
.hk-magazin-legal {
    padding: 0 0 var(--hk-space-2xl);
}

.hk-magazin-legal__inner {
    max-width: 640px;
    margin: 0 auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(27, 42, 74, 0.08);
}

.hk-magazin-legal__inner p {
    font-size: 12px;
    line-height: 1.7;
    color: var(--hk-body);
    opacity: 0.55;
    text-align: center;
}

.hk-magazin-legal__inner a {
    color: var(--hk-teal);
}

/* ==========================================================================
   Event Card with Image (.hk-event-card)
   ========================================================================== */

/* Legacy event card — retained for homepage timeline cards */
.hk-event-card {
    overflow: hidden;
    padding: 0;
}

.hk-event-card--has-image .hk-event-card__thumb {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.hk-event-card--has-image .hk-event-card__thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    margin: 0;
    transition: transform 0.4s var(--hk-ease);
}

.hk-event-card--has-image:hover .hk-event-card__thumb img {
    transform: scale(1.04);
}

/* ==========================================================================
   Template: Contact Page — Premium
   ========================================================================== */

/* --- Contact Hero --- */
/* --- Contact Hero (premium 80vh) --- */
.hk-contact-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: var(--hk-hero-gradient);
    overflow: hidden;
}

.hk-contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(200, 169, 110, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.hk-contact-hero__watermark {
    position: absolute;
    font-size: clamp(20rem, 35vw, 40rem);
    color: rgba(200, 169, 110, 0.03);
    line-height: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
}

.hk-contact-hero__content {
    position: relative;
    z-index: 1;
    padding: 4rem 2rem;
}

.hk-contact-hero .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-contact-hero__title {
    font-family: var(--hk-font-heading);
    font-size: clamp(3.2rem, 7vw, 5.5rem);
    font-weight: 300;
    color: var(--hk-white);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0.75rem 0 1.5rem;
}

.hk-contact-hero__divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 1.5rem;
}

.hk-contact-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 300;
    color: rgba(247, 244, 238, 0.85);
    letter-spacing: 0.03em;
}

.hk-contact-hero__scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--hk-gold);
    opacity: 0.5;
    z-index: 1;
    animation: hk-scroll-pulse 2.5s ease-in-out infinite;
}

.hk-contact-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* --- Contact Page Main Section (parallax glass) --- */
.hk-contact-main {
    position: relative;
    padding: var(--hk-space-2xl, 64px) 0;
    background: url('/wp-content/themes/hakim-theme/assets/img/connect-parallax.jpg') center center / cover no-repeat;
    background-attachment: fixed;
    color: var(--hk-white);
}

@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
    .hk-contact-main {
        background-image: 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')
        );
    }
}

.hk-contact-main__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.hk-contact-main .hk-container {
    position: relative;
    z-index: 1;
}

.hk-contact-main__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Left: Form Panel */
.hk-contact-main__form-panel {
    padding: 3rem;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(200, 169, 110, 0.2);
    border-radius: var(--hk-radius, 8px);
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(200, 169, 110, 0.08);
}

.hk-contact-main__form-panel h2 {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 300;
    color: var(--hk-white);
    margin: 0.5rem 0 0.75rem;
}

.hk-contact-main__lead {
    color: rgba(247, 244, 238, 0.75);
    margin: 0 0 2rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Glass form field overrides for contact page */
.hk-contact-main .hk-contact-form__field label {
    color: rgba(255, 255, 255, 0.85);
}

.hk-contact-main .hk-contact-form__field input,
.hk-contact-main .hk-contact-form__field select,
.hk-contact-main .hk-contact-form__field textarea {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(200, 169, 110, 0.18);
    color: var(--hk-white);
}

.hk-contact-main .hk-contact-form__field input::placeholder,
.hk-contact-main .hk-contact-form__field textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.hk-contact-main .hk-contact-form__field select {
    background: rgba(255, 255, 255, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C8A96E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center;
}

.hk-contact-main .hk-contact-form__field select option {
    background: var(--hk-navy);
    color: var(--hk-white);
}

.hk-contact-main .hk-contact-form__field input:focus,
.hk-contact-main .hk-contact-form__field select:focus,
.hk-contact-main .hk-contact-form__field textarea:focus {
    border-color: var(--hk-gold);
    box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.2);
}

.hk-contact-main .hk-contact-form__field--checkbox .hk-checkbox-label {
    color: rgba(255, 255, 255, 0.6);
}

.hk-contact-main .hk-contact-form__field--checkbox a {
    color: var(--hk-gold-light);
}

.hk-contact-main .hk-contact-form__message--success {
    background: rgba(72, 187, 120, 0.15);
    color: #68d391;
    border-color: rgba(72, 187, 120, 0.3);
}

.hk-contact-main .hk-contact-form__message--error {
    background: rgba(245, 101, 101, 0.15);
    color: #fc8181;
    border-color: rgba(245, 101, 101, 0.3);
}

/* Right: Info Cards */
.hk-contact-main__info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 1rem;
}

.hk-contact-main__info-card {
    padding: 1.75rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(200, 169, 110, 0.12);
    border-radius: var(--hk-radius, 8px);
    transition: transform 0.3s var(--hk-ease), border-color 0.3s ease;
}

.hk-contact-main__info-card:hover {
    transform: translateY(-2px);
    border-color: rgba(200, 169, 110, 0.35);
}

.hk-contact-main__info-icon {
    color: var(--hk-gold);
    margin-bottom: 0.75rem;
}

.hk-contact-main__info-card h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--hk-white);
    margin: 0 0 0.4rem;
}

.hk-contact-main__info-card p {
    color: rgba(247, 244, 238, 0.75);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
}

.hk-contact-main__info-card a {
    color: var(--hk-gold-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.hk-contact-main__info-card a:hover {
    color: var(--hk-gold);
}

/* Quote card */
.hk-contact-main__info-quote {
    padding: 2rem 1.75rem;
    background: rgba(200, 169, 110, 0.06);
    border: 1px solid rgba(200, 169, 110, 0.15);
    border-radius: var(--hk-radius, 8px);
    margin-top: 0.5rem;
}

.hk-contact-main__info-quote-mark {
    font-family: var(--hk-font-heading);
    font-size: 3rem;
    line-height: 1;
    color: var(--hk-gold);
    opacity: 0.5;
    margin-bottom: 0.25rem;
}

.hk-contact-main__info-quote p {
    font-family: var(--hk-font-heading);
    font-size: 1.1rem;
    font-weight: 300;
    font-style: italic;
    color: rgba(247, 244, 238, 0.8);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 1024px) {
    .hk-contact-main__grid {
        grid-template-columns: 1fr;
    }
    .hk-contact-main__info {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .hk-contact-main__info-card {
        flex: 1 1 200px;
    }
    .hk-contact-main__info-quote {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .hk-contact-main { background-attachment: scroll; }
    .hk-contact-main__form-panel { padding: 2rem 1.5rem; }
    .hk-contact-main__info { flex-direction: column; }
}

/* --- Contact Form (shared field styles) --- */

.hk-contact-form__form {
    max-width: 640px;
    margin: 0 auto;
}

.hk-contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.hk-contact-form__field {
    margin-bottom: 1.25rem;
}

.hk-contact-form__field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--hk-heading);
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
}

.hk-contact-form__field input[type="text"],
.hk-contact-form__field input[type="email"],
.hk-contact-form__field select,
.hk-contact-form__field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(27, 42, 74, 0.12);
    border-radius: 6px;
    background: var(--hk-parchment);
    color: var(--hk-heading);
    font-family: var(--hk-font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hk-contact-form__field input:focus-visible,
.hk-contact-form__field select:focus-visible,
.hk-contact-form__field textarea: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-contact-form__field textarea {
    resize: vertical;
    min-height: 120px;
}

.hk-contact-form__field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-inline-end: 2.5rem;
}

.hk-contact-form__field--checkbox {
    margin-bottom: 1.5rem;
}

.hk-contact-form__field--checkbox .hk-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--hk-body);
    cursor: pointer;
    line-height: 1.6;
}

.hk-contact-form__field--checkbox input[type="checkbox"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
    accent-color: var(--hk-gold);
}

.hk-contact-form__submit {
    text-align: center;
    margin-top: 0.5rem;
}

.hk-contact-form__submit .hk-btn {
    min-width: 200px;
}

.hk-contact-form__submit .hk-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.hk-contact-form__message {
    text-align: center;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.hk-contact-form__message--success {
    background: rgba(72, 187, 120, 0.08);
    color: #276749;
    border: 1px solid rgba(72, 187, 120, 0.2);
}

.hk-contact-form__message--error {
    background: rgba(245, 101, 101, 0.08);
    color: #c53030;
    border: 1px solid rgba(245, 101, 101, 0.2);
}

/* Project page inline contact form — parallax glass style */
.hk-project-contact {
    position: relative;
    padding: var(--hk-space-2xl, 64px) 0;
    background: url('/wp-content/themes/hakim-theme/assets/img/connect-parallax.jpg') center center / cover no-repeat;
    background-attachment: fixed;
    text-align: center;
    color: var(--hk-white);
}

@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
    .hk-project-contact {
        background-image: 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')
        );
    }
}

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

.hk-project-contact .hk-container--narrow {
    position: relative;
    z-index: 1;
}

.hk-project-contact__card {
    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, 8px);
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(200, 169, 110, 0.1);
}

.hk-project-contact__card h3 {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 300;
    color: var(--hk-white);
    margin: 0.5rem 0 0.75rem;
}

.hk-project-contact__card > p {
    color: rgba(247, 244, 238, 0.85);
    margin: 0 0 2rem;
}

/* Glass form field overrides for dark background */
.hk-project-contact .hk-contact-form__field label {
    color: rgba(255, 255, 255, 0.85);
}

.hk-project-contact .hk-contact-form__field input,
.hk-project-contact .hk-contact-form__field textarea {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(200, 169, 110, 0.2);
    color: var(--hk-white);
}

.hk-project-contact .hk-contact-form__field input::placeholder,
.hk-project-contact .hk-contact-form__field textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.hk-project-contact .hk-contact-form__field input:focus,
.hk-project-contact .hk-contact-form__field textarea:focus {
    border-color: var(--hk-gold);
    box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.2);
}

.hk-project-contact .hk-contact-form__field--checkbox .hk-checkbox-label {
    color: rgba(255, 255, 255, 0.6);
}

.hk-project-contact .hk-contact-form__field--checkbox a {
    color: var(--hk-gold-light);
}

.hk-project-contact .hk-contact-form__message--success {
    background: rgba(72, 187, 120, 0.15);
    color: #68d391;
    border-color: rgba(72, 187, 120, 0.3);
}

.hk-project-contact .hk-contact-form__message--error {
    background: rgba(245, 101, 101, 0.15);
    color: #fc8181;
    border-color: rgba(245, 101, 101, 0.3);
}

.hk-contact-form__form--compact {
    max-width: 540px;
    margin: 0 auto;
    text-align: start;
}

/* Newsletter form consent */
.hk-newsletter-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    line-height: 1.5;
}

.hk-newsletter-form__consent input[type="checkbox"] {
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--hk-gold);
}

.hk-newsletter-form__message {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    text-align: center;
}

.hk-newsletter-form__message--success {
    color: #68d391;
}

.hk-newsletter-form__message--error {
    color: #fc8181;
}

@media (max-width: 768px) {
    .hk-contact-form__card { padding: 2rem 1.5rem; }
    .hk-contact-form__row { grid-template-columns: 1fr; }
    .hk-project-contact__card { padding: 2rem 1.5rem; }
    .hk-project-contact { background-attachment: scroll; }
}

/* --- Contact CTA (legacy, kept for non-DE pages) --- */
.hk-contact-cta {
    padding: 6rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-contact-cta::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-contact-cta__watermark {
    position: absolute;
    font-size: clamp(14rem, 25vw, 28rem);
    color: rgba(200, 169, 110, 0.03);
    line-height: 1;
    bottom: -2rem;
    inset-inline-end: -2rem;
    pointer-events: none;
    user-select: none;
}

.hk-contact-cta__inner {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hk-contact-cta .hk-overline {
    color: var(--hk-gold);
}

.hk-contact-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 400;
    color: var(--hk-white);
    margin: 0.5rem 0 1rem;
}

.hk-contact-cta__desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(247, 244, 238, 0.8);
    margin: 0 0 2.5rem;
}

.hk-contact-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hk-contact-cta__buttons .hk-btn--glass {
    color: var(--hk-white);
    border-color: rgba(255, 255, 255, 0.3);
}

.hk-contact-cta__buttons .hk-btn--glass:hover {
    border-color: var(--hk-gold);
    color: var(--hk-gold);
}

/* --- Shared scroll pulse animation --- */
/* B2: unique, assess (pulse+translateY scroll-indicator; no clean primitive match) */
@keyframes hk-scroll-pulse {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
    50% { opacity: 0.7; transform: translateX(-50%) translateY(6px); }
}

/* ==========================================================================
   Template: Seminare & Veranstaltungen — Premium Redesign
   ========================================================================== */

/* ── Hero ── */
.hk-seminare-hero {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--hk-navy-dark);
    background-image: var(--hero-bg, none);
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    color: var(--hk-white);
    position: relative;
    overflow: hidden;
    padding: 0 var(--hk-space-md);
}

.hk-seminare-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(9, 15, 28, 0.82) 0%, rgba(17, 29, 51, 0.75) 45%, rgba(26, 45, 74, 0.78) 100%);
    pointer-events: none;
    z-index: 0;
}

.hk-seminare-hero > * {
    position: relative;
    z-index: 1;
}

.hk-seminare-hero::before {
    content: '✦';
    position: absolute;
    font-size: 28vw;
    opacity: 0.025;
    color: var(--hk-gold);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.hk-seminare-hero__content {
    max-width: 700px;
}

.hk-seminare-hero__title {
    font-family: var(--hk-font-heading);
    font-size: clamp(3.2rem, 7vw, 5.5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    color: var(--hk-white);
}

.hk-seminare-hero__divider {
    width: 60px;
    height: 2px;
    background: var(--hk-gold-gradient);
    margin: 0 auto 1.5rem;
}

.hk-seminare-hero__subtitle {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.01em;
    margin-bottom: 1.25rem;
}

.hk-seminare-hero__desc {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.55);
    max-width: 560px;
    margin: 0 auto;
}

.hk-seminare-hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--hk-gold);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 500;
    animation: hkSeminareFloat 2s ease-in-out infinite;
}

.hk-seminare-hero__scroll svg {
    width: 20px;
    height: 20px;
    stroke: var(--hk-gold);
}

/* B2: unique, assess (translateY-only float; no opacity component, no primitive match) */
@keyframes hkSeminareFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

/* ── Section headers (shared) ── */
.hk-seminare-section-header {
    margin-bottom: 3rem;
}

.hk-seminare-section-header h2 {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 400;
    color: var(--hk-heading);
    margin-bottom: 0;
    line-height: 1.2;
}

/* ── Upcoming / Featured event ── */
.hk-seminare-upcoming {
    padding: 5rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-seminare-upcoming::before {
    content: '☽';
    position: absolute;
    font-size: 20vw;
    opacity: 0.02;
    color: var(--hk-gold);
    top: 10%;
    inset-inline-end: -5%;
    pointer-events: none;
}

.hk-seminare-upcoming .hk-seminare-section-header h2 {
    color: var(--hk-white);
}

.hk-seminare-upcoming .hk-overline {
    color: var(--hk-gold);
}

.hk-seminare-featured {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(200, 169, 110, 0.15);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.4s var(--hk-ease), box-shadow 0.4s var(--hk-ease), border-color 0.4s var(--hk-ease);
    margin-bottom: 2rem;
}

.hk-seminare-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border-color: rgba(200, 169, 110, 0.35);
}

.hk-seminare-featured__link {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-decoration: none;
    color: inherit;
}

.hk-seminare-featured__image {
    position: relative;
    overflow: hidden;
    min-height: 320px;
}

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

.hk-seminare-featured:hover .hk-seminare-featured__image img {
    transform: scale(1.05);
}

.hk-seminare-featured__type {
    position: absolute;
    top: 1.25rem;
    inset-inline-start: 1.25rem;
    background: rgba(200, 169, 110, 0.9);
    color: var(--hk-white);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 6px 14px;
    border-radius: 4px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.hk-seminare-featured__body {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 2.5rem;
    color: var(--hk-white);
}

.hk-seminare-featured__date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: 1rem 0.75rem;
    background: rgba(200, 169, 110, 0.1);
    border: 1px solid rgba(200, 169, 110, 0.2);
    border-radius: 8px;
    flex-shrink: 0;
}

.hk-seminare-featured__day {
    font-family: var(--hk-font-heading);
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--hk-gold);
}

.hk-seminare-featured__month {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.25rem;
}

.hk-seminare-featured__year {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.hk-seminare-featured__info h3 {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 400;
    color: var(--hk-white);
    margin-bottom: 1rem;
    line-height: 1.25;
}

.hk-seminare-featured__time,
.hk-seminare-featured__location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
}

.hk-seminare-featured__time svg,
.hk-seminare-featured__location svg {
    color: var(--hk-gold);
    flex-shrink: 0;
}

.hk-seminare-featured__excerpt {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.hk-seminare-featured__footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(200, 169, 110, 0.12);
}

.hk-seminare-featured__cta {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hk-gold);
    transition: letter-spacing 0.3s var(--hk-ease);
}

.hk-seminare-featured:hover .hk-seminare-featured__cta {
    letter-spacing: 0.16em;
}

/* ── Archive / Event format cards ── */
.hk-seminare-archive {
    padding: 5rem 0;
    background: var(--hk-parchment);
}

.hk-seminare-archive__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hk-gap);
}

.hk-seminare-archive__card {
    background: var(--hk-white);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    border: 1px solid rgba(200, 169, 110, 0.12);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.4s var(--hk-ease), box-shadow 0.4s var(--hk-ease), border-color 0.4s var(--hk-ease);
    position: relative;
    overflow: hidden;
}

.hk-seminare-archive__card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 3px;
    background: var(--hk-gold-gradient);
}

.hk-seminare-archive__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
    border-color: rgba(200, 169, 110, 0.3);
}

.hk-seminare-archive__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(200, 169, 110, 0.08);
    color: var(--hk-gold);
    margin-bottom: 1.25rem;
}

.hk-seminare-archive__card h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--hk-heading);
    margin-bottom: 0.75rem;
}

.hk-seminare-archive__count {
    font-size: 13px;
    color: var(--hk-body);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hk-seminare-archive__number {
    font-family: var(--hk-font-heading);
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--hk-gold);
    display: block;
    margin-bottom: 0.25rem;
}

/* ── Past events — Horizontal Scroll Gallery ── */
.hk-seminare-past {
    padding: 8rem 0 6rem;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-seminare-past::before {
    content: '✦';
    position: absolute;
    font-size: 22vw;
    opacity: 0.015;
    color: var(--hk-gold);
    top: 20%;
    inset-inline-end: -5%;
    pointer-events: none;
}

.hk-seminare-past .hk-seminare-section-header h2,
.hk-seminare-past__header h2 {
    color: var(--hk-white);
    font-family: var(--hk-font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0;
}

.hk-seminare-past .hk-overline,
.hk-seminare-past__header .hk-overline {
    color: var(--hk-gold);
}

.hk-seminare-past__header {
    margin-bottom: 3rem;
}

/* Gallery wrapper — full bleed */
.hk-gallery {
    position: relative;
    width: 100%;
}

/* Navigation arrows — always visible */
.hk-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--hk-z-dropdown);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(200, 169, 110, 0.4);
    background: rgba(9, 15, 28, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--hk-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s var(--hk-ease);
}

.hk-gallery__arrow:hover {
    background: rgba(200, 169, 110, 0.15);
    border-color: var(--hk-gold);
    box-shadow: 0 0 24px rgba(200, 169, 110, 0.25);
    transform: translateY(-50%) scale(1.08);
}

.hk-gallery__arrow--prev { inset-inline-start: 1rem; }
.hk-gallery__arrow--next { inset-inline-end: 1rem; }

.hk-gallery__arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* Scrollable track */
.hk-gallery__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 1rem 4rem 2.5rem;
    cursor: grab;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hk-gallery__track::-webkit-scrollbar {
    display: none;
}

.hk-gallery__track:active {
    cursor: grabbing;
}

/* Edge spacers — allow first/last card to center-snap */
.hk-gallery__spacer {
    flex-shrink: 0;
    min-width: calc(50% - 180px);   /* half viewport minus half card width */
    scroll-snap-align: none;
}

/* Year dividers in the scroll strip */
.hk-gallery__year-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    scroll-snap-align: none;
    padding: 0 0.5rem;
    min-width: 56px;
}

.hk-gallery__year-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--hk-font-heading);
    font-size: 2.4rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--hk-gold);
    opacity: 0.5;
    white-space: nowrap;
    user-select: none;
}

/* Gallery card */
.hk-gallery__card {
    position: relative;
    flex-shrink: 0;
    width: 360px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(200, 169, 110, 0.1);
    text-decoration: none;
    color: inherit;
    scroll-snap-align: center;
    transition: transform 0.5s var(--hk-ease), box-shadow 0.5s var(--hk-ease), border-color 0.5s var(--hk-ease);
}

.hk-gallery__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(200, 169, 110, 0.25);
    border-color: rgba(200, 169, 110, 0.4);
}

/* Card image */
.hk-gallery__card-img {
    position: relative;
    height: 240px;
    overflow: hidden;
}

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

.hk-gallery__card:hover .hk-gallery__card-img img {
    transform: scale(1.08);
}

.hk-gallery__card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(9, 15, 28, 0.65) 0%, rgba(9, 15, 28, 0.15) 40%, transparent 70%);
    pointer-events: none;
}

.hk-gallery__card-type {
    position: absolute;
    top: 1rem;
    inset-inline-start: 1rem;
    background: rgba(200, 169, 110, 0.92);
    color: var(--hk-white);
    font-size: 10px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 4px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.hk-gallery__card-materials {
    position: absolute;
    bottom: 1rem;
    inset-inline-end: 1rem;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(91, 138, 154, 0.85);
    color: var(--hk-white);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 4px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Card content area */
.hk-gallery__card-content {
    padding: 1.5rem;
}

.hk-gallery__card-date {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.hk-gallery__card-day {
    font-family: var(--hk-font-heading);
    font-size: 2.2rem;
    font-weight: 300;
    line-height: 1;
    color: var(--hk-gold);
}

.hk-gallery__card-monthyear {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.hk-gallery__card-title {
    font-family: var(--hk-font-heading);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--hk-white);
    margin-bottom: 0.75rem;
    line-height: 1.3;
    transition: color 0.3s var(--hk-ease);
}

.hk-gallery__card:hover .hk-gallery__card-title {
    color: var(--hk-gold-light);
}

.hk-gallery__card-location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 1rem;
}

.hk-gallery__card-location svg {
    color: var(--hk-gold);
    flex-shrink: 0;
    opacity: 0.6;
}

.hk-gallery__card-cta {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--hk-gold);
    padding-top: 0.75rem;
    border-top: 1px solid rgba(200, 169, 110, 0.12);
    width: 100%;
    transition: letter-spacing 0.3s var(--hk-ease);
}

.hk-gallery__card:hover .hk-gallery__card-cta {
    letter-spacing: 0.16em;
}

/* Scroll indicator dots */
.hk-gallery__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 1.5rem 0 0;
}

.hk-gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(200, 169, 110, 0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.35s var(--hk-ease);
}

.hk-gallery__dot--active {
    background: var(--hk-gold);
    box-shadow: 0 0 10px rgba(200, 169, 110, 0.4);
    transform: scale(1.3);
}

/* Drag state — disable link clicks while dragging */
.hk-gallery__track.is-dragging a {
    pointer-events: none;
}

/* ── CTA ── */
.hk-seminare-cta {
    padding: 8rem 0;
    background: var(--hk-hero-gradient);
    border-top: 3px solid var(--hk-gold);
}

.hk-seminare-cta__inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.hk-seminare-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 400;
    color: var(--hk-white);
    margin-bottom: 2.5rem;
    line-height: 1.25;
}

.hk-seminare-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Responsive: Tablet ── */
@media (max-width: 1024px) {
    .hk-seminare-featured__link { grid-template-columns: 1fr; }
    .hk-seminare-featured__image { min-height: 240px; }
    .hk-seminare-archive__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Responsive: Mobile ── */
@media (max-width: 768px) {
    .hk-seminare-hero { min-height: 70vh; }
    .hk-seminare-hero__title { font-size: 3rem; }
    .hk-seminare-archive__grid { grid-template-columns: repeat(2, 1fr); }
    .hk-seminare-archive__card { padding: 2rem 1.25rem; }
    .hk-seminare-archive__number { font-size: 1.5rem; }
    .hk-seminare-featured__body { flex-direction: column; gap: 1.25rem; padding: 1.75rem; }
    .hk-seminare-featured__date-block { flex-direction: row; gap: 0.5rem; padding: 0.5rem 1rem; min-width: auto; }
    .hk-seminare-featured__day { font-size: 1.4rem; }
    .hk-seminare-types__grid { grid-template-columns: repeat(2, 1fr); }
    .hk-seminare-past { padding: 6rem 0 4rem; }

    /* Gallery mobile adjustments */
    .hk-gallery__track {
        padding: 1rem 1.25rem 2rem;
        gap: 1rem;
        scroll-snap-type: x mandatory;
    }

    .hk-gallery__card {
        width: 82vw;
        max-width: 340px;
    }

    .hk-gallery__card-img {
        height: 200px;
    }

    .hk-gallery__arrow {
        width: 40px;
        height: 40px;
    }

    .hk-gallery__arrow--prev { inset-inline-start: 0.5rem; }
    .hk-gallery__arrow--next { inset-inline-end: 0.5rem; }

    .hk-gallery__year-divider {
        min-width: 40px;
        padding: 0 0.25rem;
    }

    .hk-gallery__year-label {
        font-size: 1.6rem;
    }

    .hk-gallery__card-content {
        padding: 1.25rem;
    }

    .hk-gallery__card-day {
        font-size: 1.8rem;
    }

    .hk-gallery__card-title {
        font-size: 1.15rem;
    }
    .hk-seminare-upcoming { padding: 4rem 0; }
    .hk-seminare-cta { padding: 6rem 0; }
    .hk-seminare-cta__inner h2 { font-size: 2rem; }
}

/* Legacy event card styles (homepage timeline) */
.hk-event-card__date {
    font-size: 14px;
    color: var(--hk-gold);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.hk-event-card__location {
    font-size: 14px;
    color: var(--hk-body);
    margin-bottom: 0.5rem;
}

.hk-event-card--past {
    opacity: 0.8;
}

.hk-event-card--past:hover {
    opacity: 1;
}

/* ==========================================================================
   Template Responsive — Tablet (768px)
   ========================================================================== */

@media (max-width: 1024px) {
    .hk-template-project__layout {
        grid-template-columns: 1fr 260px;
    }
}

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

    .hk-template-project__sidebar {
        order: -1;
    }

    .hk-template-project__facts {
        position: static;
        max-width: 400px;
    }

    .hk-template-contact__layout {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================================
   Über HAKIM Page (.hk-template-ueberhakim)
   ========================================================================== */

/* ---- Hero ---- */
.hk-ueberhakim-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/islamic-architecture.jpg') center center / cover no-repeat;
    background-attachment: fixed;
}

.hk-ueberhakim-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1;
}

.hk-ueberhakim-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2rem;
    max-width: 900px;
}

.hk-ueberhakim-hero__content .hk-overline {
    color: var(--hk-gold-light);
    opacity: 1;
    margin-bottom: 1.5rem;
}

.hk-ueberhakim-hero__title {
    font-family: var(--hk-font-heading);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 300;
    color: var(--hk-white);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 1.5rem;
}

.hk-ueberhakim-hero__divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 1.5rem;
}

.hk-ueberhakim-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 300;
    letter-spacing: 0.02em;
    margin: 0;
}

.hk-ueberhakim-hero__scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    animation: sakina-scroll-bounce 2s ease-in-out infinite;
}

.hk-ueberhakim-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.hk-ueberhakim-hero__scroll svg {
    width: 40px;
    height: 40px;
    stroke: rgba(200, 169, 110, 0.8);
}

/* ---- Identity Section (dark navy) ---- */
.hk-ueberhakim-identity {
    padding: 10rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-ueberhakim-identity::before {
    content: '';
    position: absolute;
    top: 0; inset-inline-start: 0; inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.9), transparent);
}

.hk-ueberhakim-identity::after {
    content: '✦';
    position: absolute;
    inset-inline-end: -2%; top: 50%;
    transform: translateY(-50%);
    font-size: 52rem;
    color: rgba(200,169,110,0.025);
    pointer-events: none;
    z-index: 0;
    line-height: 1;
}

.hk-ueberhakim-identity__grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 7rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hk-ueberhakim-identity__text {
    padding-inline-start: 3rem;
    border-inline-start: 1px solid rgba(200,169,110,0.3);
}

.hk-ueberhakim-identity__text .hk-overline {
    color: var(--hk-gold-light);
    opacity: 1;
}

.hk-ueberhakim-identity__text .hk-display {
    font-size: 4.8rem;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--hk-white);
    margin-bottom: 2rem;
}

.hk-ueberhakim-lead {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1.25rem;
}

.hk-ueberhakim-signoff {
    font-family: var(--hk-font-heading);
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 400;
    color: var(--hk-gold);
    margin-top: 2.5rem;
    letter-spacing: 0.05em;
}

.hk-ueberhakim-identity__visual img {
    width: 100%;
    border-radius: 4px;
    box-shadow:
        0 0 0 1px rgba(200,169,110,0.3),
        0 0 40px rgba(200,169,110,0.08),
        0 40px 80px rgba(0,0,0,0.6);
}

/* ---- Verantwortung card ---- */
.hk-ueberhakim-verantwortung {
    padding: 8rem 0;
    background: var(--hk-parchment);
}

.hk-ueberhakim-verantwortung__card {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    background: var(--hk-white);
    border-radius: 4px;
    padding: 4rem 5rem;
    border-top: 3px solid var(--hk-gold);
    box-shadow: 0 4px 40px rgba(27,42,74,0.08);
}

.hk-ueberhakim-verantwortung__ornament {
    font-size: 1.5rem;
    color: var(--hk-gold);
    margin-bottom: 1.5rem;
    opacity: 0.6;
}

.hk-ueberhakim-verantwortung__card p {
    font-family: var(--hk-font-heading);
    font-size: 1.35rem;
    line-height: 1.7;
    color: var(--hk-heading);
    font-style: italic;
    font-weight: 400;
    margin-bottom: 1.25rem;
}

.hk-ueberhakim-verantwortung__card p:last-of-type {
    margin-bottom: 1.5rem;
}

.hk-ueberhakim-verantwortung__card cite {
    font-family: var(--hk-font-body);
    font-size: 0.75rem;
    font-style: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hk-gold);
}

/* ---- Parallax section ---- */
.hk-ueberhakim-parallax {
    position: relative;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/medical-students.jpg') center center / cover no-repeat;
    background-attachment: fixed;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hk-ueberhakim-parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
}

.hk-ueberhakim-parallax__overlay {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 5rem 2rem;
}

.hk-ueberhakim-parallax__overlay .hk-overline {
    color: var(--hk-gold-light);
    opacity: 1;
    margin-bottom: 1.5rem;
}

.hk-ueberhakim-parallax__text {
    font-family: var(--hk-font-heading);
    font-size: 3.8rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

/* ---- Pillars (dark navy) ---- */
.hk-ueberhakim-pillars {
    padding: 8rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-ueberhakim-pillars::before {
    content: '';
    position: absolute;
    top: 0; inset-inline-start: 0; inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.9), transparent);
}

.hk-ueberhakim-pillars .hk-overline {
    text-align: center;
    display: block;
    color: var(--hk-gold-light);
    opacity: 1;
    margin-bottom: 3.5rem;
}

.hk-ueberhakim-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.hk-ueberhakim-pillar {
    padding: 2.5rem;
    border: 1px solid rgba(200,169,110,0.2);
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    text-align: center;
}

.hk-ueberhakim-pillar h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--hk-white);
    margin: 1rem 0 0.75rem;
}

.hk-ueberhakim-pillar p {
    color: rgba(255,255,255,0.65);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.hk-ueberhakim-pillar__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(200,169,110,0.1);
    border: 1px solid rgba(200,169,110,0.3);
}

.hk-ueberhakim-pillar__icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--hk-gold);
}

/* ---- Themenspektrum (white) ---- */
.hk-ueberhakim-themen {
    padding: 8rem 0;
    background: var(--hk-white);
}

.hk-ueberhakim-themen__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
}

.hk-ueberhakim-themen__text .hk-overline {
    color: var(--hk-gold);
    opacity: 1;
}

.hk-ueberhakim-themen__text h2 {
    font-family: var(--hk-font-heading);
    font-size: 3rem;
    font-weight: 300;
    color: var(--hk-heading);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 1.5rem;
}

.hk-ueberhakim-themen__text p {
    color: var(--hk-body);
    font-size: 1.05rem;
    line-height: 1.75;
}

.hk-ueberhakim-themen__list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.hk-ueberhakim-themen__list ul li {
    font-family: var(--hk-font-body);
    font-size: 0.9rem;
    color: var(--hk-heading);
    padding: 1rem 1.25rem;
    background: var(--hk-parchment);
    border-inline-start: 3px solid var(--hk-gold);
    border-radius: 0 4px 4px 0;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ---- Quote (parallax image) ---- */
.hk-ueberhakim-quote-section {
    padding: 6rem 0;
    position: relative;
    background: linear-gradient(170deg, var(--hk-navy) 0%, #162038 100%);
    overflow: hidden;
}

/* Subtle geometric watermark */
.hk-ueberhakim-quote-section::before {
    content: '\2726';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28rem;
    color: rgba(200, 169, 110, 0.04);
    pointer-events: none;
    line-height: 1;
}

.hk-ueberhakim-quote-section__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 3rem;
    border-top: 1px solid rgba(200, 169, 110, 0.2);
    border-bottom: 1px solid rgba(200, 169, 110, 0.2);
}

.hk-ueberhakim-quote-section__ornament {
    color: var(--hk-gold);
    font-size: 1.2rem;
    opacity: 0.6;
}

.hk-ueberhakim-quote-section__ornament:first-child {
    margin-bottom: 2rem;
}

.hk-ueberhakim-quote-section__ornament:last-child {
    margin-top: 2rem;
}

.hk-ueberhakim-quote-section blockquote {
    margin: 0 0 1.5rem;
    border: none;
    padding: 0;
    background: none;
    box-shadow: none;
}

.hk-ueberhakim-quote-section blockquote p {
    font-family: var(--hk-font-heading);
    font-size: 1.8rem;
    font-weight: 400;
    font-style: italic;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.7;
    margin: 0;
}

.hk-ueberhakim-quote-section cite {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--hk-gold);
    opacity: 0.8;
}

/* ---- CTA ---- */
.hk-ueberhakim-cta {
    padding: 8rem 0;
    background: var(--hk-parchment);
    text-align: center;
}

.hk-ueberhakim-cta__inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-ueberhakim-cta__inner .hk-overline {
    color: var(--hk-gold);
    opacity: 1;
}

.hk-ueberhakim-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 3rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 1.5rem;
    letter-spacing: -0.02em;
}

.hk-ueberhakim-cta__sub {
    color: var(--hk-body);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

.hk-ueberhakim-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .hk-ueberhakim-identity__grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .hk-ueberhakim-pillars__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hk-ueberhakim-themen__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

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

    .hk-ueberhakim-hero__title {
        font-size: 3.5rem;
    }

    .hk-ueberhakim-identity {
        padding: 6rem 0;
    }

    .hk-ueberhakim-identity__text {
        padding-inline-start: 1.5rem;
    }

    .hk-ueberhakim-identity__text .hk-display {
        font-size: 3rem;
    }

    .hk-ueberhakim-verantwortung__card {
        padding: 2.5rem 2rem;
    }

    .hk-ueberhakim-verantwortung__card p {
        font-size: 1.15rem;
    }

    .hk-ueberhakim-parallax {
        background-attachment: scroll;
    }

    .hk-ueberhakim-parallax__text {
        font-size: 2.2rem;
    }

    .hk-ueberhakim-pillars {
        padding: 6rem 0;
    }

    .hk-ueberhakim-themen {
        padding: 6rem 0;
    }

    .hk-ueberhakim-themen__list ul {
        grid-template-columns: 1fr;
    }

    .hk-ueberhakim-quote-section {
        padding: 4rem 0;
    }

    .hk-ueberhakim-quote-section__inner {
        padding: 2rem 1.5rem;
    }

    .hk-ueberhakim-quote-section blockquote p {
        font-size: 1.35rem;
    }

    .hk-ueberhakim-cta__inner h2 {
        font-size: 2.25rem;
    }
}

/* ---- Über HAKIM Video Section ---- */

.hk-ueberhakim-video {
    padding: var(--hk-space-2xl) 0;
    background: var(--hk-parchment);
    position: relative;
}

.hk-ueberhakim-video__header {
    text-align: center;
    margin-bottom: var(--hk-space-xl);
}

.hk-ueberhakim-video__header h2 {
    font-family: var(--hk-font-display);
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--hk-heading);
    margin: 0.5rem 0 1.2rem;
}

.hk-ueberhakim-video__wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.hk-ueberhakim-video__frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(27, 42, 74, 0.15),
                0 4px 16px rgba(27, 42, 74, 0.08);
    background: var(--hk-navy);
    aspect-ratio: 16 / 9;
}

.hk-ueberhakim-video__frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Custom play button overlay */
.hk-ueberhakim-video__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 42, 74, 0.35);
    border: none;
    cursor: pointer;
    transition: background 400ms var(--hk-ease);
    z-index: 2;
}

.hk-ueberhakim-video__play:hover {
    background: rgba(27, 42, 74, 0.2);
}

.hk-ueberhakim-video__play svg {
    width: 72px;
    height: 72px;
    color: var(--hk-white);
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.3));
    fill: var(--hk-white);
    stroke: none;
    transition: transform 300ms var(--hk-ease);
}

.hk-ueberhakim-video__play:hover svg {
    transform: scale(1.1);
}

/* Hide play button when video is playing */
.hk-ueberhakim-video__play.is-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms var(--hk-ease);
}

@media (max-width: 768px) {
    .hk-ueberhakim-video__header h2 {
        font-size: 2rem;
    }

    .hk-ueberhakim-video__frame {
        border-radius: 12px;
    }

    .hk-ueberhakim-video__play svg {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 480px) {
    .hk-ueberhakim-video {
        padding: var(--hk-space-xl) 0;
    }

    .hk-ueberhakim-video__frame {
        border-radius: 8px;
        aspect-ratio: auto;
    }
}

/* ==========================================================================
   Strategisches Leitbild Page (.hk-template-leitbild)
   ========================================================================== */

/* ---- Hero ---- */
.hk-leitbild-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/hakim-arabic-calligraphy.jpg') center center / cover no-repeat;
    background-attachment: fixed;
}

.hk-leitbild-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 1;
}

.hk-leitbild-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2rem;
    max-width: 900px;
}

.hk-leitbild-hero__content .hk-overline {
    color: var(--hk-gold-light);
    opacity: 1;
    margin-bottom: 1.5rem;
}

.hk-leitbild-hero__title {
    font-family: var(--hk-font-heading);
    font-size: clamp(3.5rem, 7vw, 6.5rem);
    font-weight: 300;
    color: var(--hk-white);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 1.5rem;
}

.hk-leitbild-hero__divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 1.5rem;
}

.hk-leitbild-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 1.5rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 300;
    letter-spacing: 0.02em;
    margin: 0;
}

.hk-leitbild-hero__scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    animation: sakina-scroll-bounce 2s ease-in-out infinite;
}

.hk-leitbild-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.hk-leitbild-hero__scroll svg {
    width: 40px;
    height: 40px;
    stroke: rgba(200, 169, 110, 0.8);
}

/* ---- Vision (dark navy) ---- */
.hk-leitbild-vision {
    padding: 10rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-leitbild-vision::before {
    content: '';
    position: absolute;
    top: 0; inset-inline-start: 0; inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.9), transparent);
}

.hk-leitbild-vision::after {
    content: '✦';
    position: absolute;
    inset-inline-end: -2%; top: 50%;
    transform: translateY(-50%);
    font-size: 52rem;
    color: rgba(200,169,110,0.025);
    pointer-events: none;
    z-index: 0;
    line-height: 1;
}

.hk-leitbild-vision__grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 7rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hk-leitbild-vision__text {
    padding-inline-start: 3rem;
    border-inline-start: 1px solid rgba(200,169,110,0.3);
}

.hk-leitbild-vision__text .hk-overline {
    color: var(--hk-gold-light);
    opacity: 1;
}

.hk-leitbild-vision__text .hk-display {
    font-size: 4.2rem;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--hk-white);
    margin-bottom: 2rem;
}

.hk-leitbild-lead {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 1.25rem;
}

.hk-leitbild-vision__image img {
    width: 100%;
    border-radius: 4px;
    box-shadow:
        0 0 0 1px rgba(200,169,110,0.4),
        0 0 60px rgba(200,169,110,0.10),
        0 0 120px rgba(200,169,110,0.05),
        0 40px 100px rgba(0,0,0,0.7);
}

/* ---- Mission card (parchment) ---- */
.hk-leitbild-mission {
    padding: 8rem 0;
    background: var(--hk-parchment);
}

.hk-leitbild-mission__card {
    max-width: 860px;
    margin: 0 auto;
    background: var(--hk-white);
    border-radius: 4px;
    padding: 4rem 5rem;
    border-top: 3px solid var(--hk-gold);
    box-shadow: 0 4px 40px rgba(27,42,74,0.08);
}

.hk-leitbild-mission__card .hk-overline {
    color: var(--hk-gold);
    opacity: 1;
    margin-bottom: 1rem;
}

.hk-leitbild-mission__card h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.4rem;
    font-weight: 300;
    color: var(--hk-heading);
    letter-spacing: -0.02em;
    margin: 0 0 2rem;
    line-height: 1.2;
}

.hk-leitbild-mission__card p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--hk-body);
    margin-bottom: 1.25rem;
}

.hk-leitbild-mission__card p strong {
    color: var(--hk-heading);
    font-weight: 600;
}

/* ---- SHIFA (dark navy) ---- */
.hk-leitbild-shifa {
    padding: 9rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.hk-leitbild-shifa::before {
    content: '';
    position: absolute;
    top: 0; inset-inline-start: 0; inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.9), transparent);
}

.hk-leitbild-shifa__header {
    margin-bottom: 4rem;
}

.hk-leitbild-shifa__header .hk-overline {
    color: var(--hk-gold-light);
    opacity: 1;
    margin-bottom: 1rem;
    display: block;
}

.hk-leitbild-shifa__word {
    font-family: var(--hk-font-heading);
    font-size: clamp(5rem, 12vw, 10rem);
    font-weight: 300;
    color: var(--hk-white);
    letter-spacing: 0.15em;
    line-height: 1;
    margin: 0 0 0.5rem;
}

.hk-leitbild-shifa__sub {
    font-family: var(--hk-font-heading);
    font-size: 1.3rem;
    font-style: italic;
    color: rgba(255,255,255,0.6);
    font-weight: 300;
    margin: 0;
}

.hk-leitbild-shifa__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: start;
}

.hk-leitbild-shifa__pillar {
    padding: 2.5rem 2rem;
    border: 1px solid rgba(200,169,110,0.2);
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    position: relative;
}

.hk-leitbild-shifa__letter {
    font-family: var(--hk-font-heading);
    font-size: 4rem;
    font-weight: 300;
    color: rgba(200,169,110,0.25);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.hk-leitbild-shifa__pillar h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--hk-white);
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.hk-leitbild-shifa__pillar p {
    color: rgba(255,255,255,0.62);
    font-size: 0.92rem;
    line-height: 1.7;
    margin: 0;
}

/* ---- Warum HAKIM (parallax) ---- */
.hk-leitbild-warum {
    position: relative;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/hakim-glass-logo.jpg') center center / cover no-repeat;
    background-attachment: fixed;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hk-leitbild-warum::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.hk-leitbild-warum__overlay {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 5rem 2rem;
    max-width: 900px;
}

.hk-leitbild-warum__overlay .hk-overline {
    color: var(--hk-gold-light);
    opacity: 1;
    margin-bottom: 1.5rem;
}

.hk-leitbild-warum__text {
    font-family: var(--hk-font-heading);
    font-size: 3.4rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0;
}

/* ---- Why section (white) ---- */
.hk-leitbild-why {
    padding: 8rem 0;
    background: var(--hk-white);
}

.hk-leitbild-why__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.hk-leitbild-why__inner .hk-overline {
    color: var(--hk-gold);
    opacity: 1;
}

.hk-leitbild-why__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 3rem;
    font-weight: 300;
    color: var(--hk-heading);
    letter-spacing: -0.02em;
    margin: 0.5rem 0 2rem;
    line-height: 1.15;
}

.hk-leitbild-why__inner p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--hk-body);
}

/* ---- CTA ---- */
.hk-leitbild-cta {
    padding: 8rem 0;
    background: var(--hk-parchment);
    text-align: center;
}

.hk-leitbild-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-leitbild-cta__inner .hk-overline {
    color: var(--hk-gold);
    opacity: 1;
}

.hk-leitbild-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 1.5rem;
    letter-spacing: -0.02em;
}

.hk-leitbild-cta__sub {
    color: var(--hk-body);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

.hk-leitbild-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
    .hk-leitbild-shifa__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .hk-leitbild-vision__grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

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

    .hk-leitbild-hero__title {
        font-size: 3rem;
    }

    .hk-leitbild-vision {
        padding: 6rem 0;
    }

    .hk-leitbild-vision__text {
        padding-inline-start: 1.5rem;
    }

    .hk-leitbild-vision__text .hk-display {
        font-size: 2.8rem;
    }

    .hk-leitbild-mission__card {
        padding: 2.5rem 2rem;
    }

    .hk-leitbild-shifa__grid {
        grid-template-columns: 1fr;
    }

    .hk-leitbild-warum {
        background-attachment: scroll;
    }

    .hk-leitbild-warum__text {
        font-size: 2.2rem;
    }

    .hk-leitbild-why__inner h2 {
        font-size: 2.25rem;
    }

    .hk-leitbild-cta__inner h2 {
        font-size: 2.25rem;
    }
}

/* ==========================================================================
   Unsere Historie Page (.hk-template-historie)
   ========================================================================== */

/* ---- Hero ---- */
.hk-historie-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/hakim-vorstand.jpg') center center / cover no-repeat;
    background-attachment: fixed;
}

.hk-historie-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 1;
}

.hk-historie-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2rem;
    max-width: 860px;
}

.hk-historie-hero__content .hk-overline {
    color: var(--hk-gold-light);
    opacity: 1;
    margin-bottom: 1.5rem;
}

.hk-historie-hero__title {
    font-family: var(--hk-font-heading);
    font-size: clamp(3.5rem, 7vw, 6.5rem);
    font-weight: 300;
    color: var(--hk-white);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 1.5rem;
}

.hk-historie-hero__divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 1.5rem;
}

.hk-historie-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 1.5rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 300;
    letter-spacing: 0.02em;
    margin: 0;
}

.hk-historie-hero__scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: sakina-scroll-bounce 2s ease-in-out infinite;
}

.hk-historie-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}

.hk-historie-hero__scroll svg {
    width: 40px;
    height: 40px;
    stroke: rgba(200, 169, 110, 0.8);
}

/* ---- Context (dark navy) ---- */
.hk-historie-context {
    padding: 10rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-historie-context::before {
    content: '';
    position: absolute;
    top: 0; inset-inline-start: 0; inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.9), transparent);
}

.hk-historie-context::after {
    content: '2020';
    position: absolute;
    inset-inline-end: -1%; top: 50%;
    transform: translateY(-50%);
    font-family: var(--hk-font-heading);
    font-size: 28rem;
    font-weight: 300;
    color: rgba(200,169,110,0.03);
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    letter-spacing: -0.04em;
}

.hk-historie-context__inner {
    max-width: 820px;
    padding-inline-start: 3rem;
    border-inline-start: 1px solid rgba(200,169,110,0.3);
    position: relative;
    z-index: 1;
}

.hk-historie-context__inner .hk-overline {
    color: var(--hk-gold-light);
    opacity: 1;
}

.hk-historie-context__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 4rem;
    font-weight: 300;
    color: var(--hk-white);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0.5rem 0 2.5rem;
}

.hk-historie-body {
    font-size: 1.08rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 1.5rem;
}

/* ---- Parallax pull-quote ---- */
.hk-historie-parallax {
    position: relative;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/hakim-fertig.jpg') center center / cover no-repeat;
    background-attachment: fixed;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hk-historie-parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.74);
}

.hk-historie-parallax__overlay {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 5rem 2rem;
    max-width: 900px;
}

.hk-historie-parallax__text {
    font-family: var(--hk-font-heading);
    font-size: 3.2rem;
    font-weight: 300;
    font-style: italic;
    color: var(--hk-white);
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0;
}

/* ---- Konsequenz (white) ---- */
.hk-historie-konsequenz {
    padding: 9rem 0;
    background: var(--hk-white);
}

.hk-historie-konsequenz__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
}

.hk-historie-konsequenz__text .hk-overline {
    color: var(--hk-gold);
    opacity: 1;
}

.hk-historie-konsequenz__text h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0.5rem 0 2rem;
}

.hk-historie-konsequenz__text p {
    font-size: 1.05rem;
    line-height: 1.82;
    color: var(--hk-body);
    margin-bottom: 1.25rem;
}

.hk-historie-konsequenz__signoff {
    font-family: var(--hk-font-heading);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--hk-gold);
    margin-top: 2rem;
    letter-spacing: 0.04em;
}

.hk-historie-konsequenz__three {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 4rem;
}

.hk-historie-konsequenz__item {
    padding: 1.5rem 2rem;
    background: var(--hk-parchment);
    border-inline-start: 3px solid var(--hk-gold);
    border-radius: 0 4px 4px 0;
}

.hk-historie-konsequenz__item strong {
    display: block;
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hk-gold);
    margin-bottom: 0.4rem;
}

.hk-historie-konsequenz__item p {
    font-family: var(--hk-font-heading);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--hk-heading);
    margin: 0;
    line-height: 1.5;
}

/* ---- Sources (dark) ---- */
.hk-historie-quellen {
    padding: 5rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
}

.hk-historie-quellen::before {
    content: '';
    position: absolute;
    top: 0; inset-inline-start: 0; inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.9), transparent);
}

.hk-historie-quellen .hk-overline {
    color: var(--hk-gold-light);
    opacity: 1;
    margin-bottom: 2rem;
    display: block;
}

.hk-historie-quellen__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hk-historie-quellen__list li {
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.5);
    padding-inline-start: 1.25rem;
    border-inline-start: 2px solid rgba(200,169,110,0.3);
}

/* ---- CTA ---- */
.hk-historie-cta {
    padding: 8rem 0;
    background: var(--hk-parchment);
    text-align: center;
}

.hk-historie-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-historie-cta__inner .hk-overline {
    color: var(--hk-gold);
    opacity: 1;
}

.hk-historie-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 1.5rem;
    letter-spacing: -0.02em;
}

.hk-historie-cta__sub {
    color: var(--hk-body);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

.hk-historie-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .hk-historie-konsequenz__grid { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 768px) {
    .hk-historie-hero { background-attachment: scroll; }
    .hk-historie-hero__title { font-size: 3rem; }
    .hk-historie-context { padding: 6rem 0; }
    .hk-historie-context__inner { padding-inline-start: 1.5rem; }
    .hk-historie-context__inner h2 { font-size: 2.6rem; }
    .hk-historie-parallax { background-attachment: scroll; }
    .hk-historie-parallax__text { font-size: 2rem; }
    .hk-historie-konsequenz__text h2 { font-size: 2.2rem; }
    .hk-historie-cta__inner h2 { font-size: 2.25rem; }
}

/* ==========================================================================
   HAKIM CAMPUS PAGE
   ========================================================================== */

/* ---- Template wrapper ---- */
.hk-template-campus {
    margin: 0;
    padding: 0;
    background: none;
}

/* ---- Hero ---- */
.hk-campus-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: var(--hk-hero-gradient);
    overflow: hidden;
}

.hk-campus-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 40%, rgba(200,169,110,0.06) 0%, transparent 60%);
    pointer-events: none;
}

.hk-campus-hero__content {
    position: relative;
    z-index: 1;
    padding: 0 2rem;
}

.hk-campus-hero__logo {
    width: 220px;
    height: auto;
    margin-bottom: 1rem;
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.3));
}

.hk-campus-hero__title {
    font-family: var(--hk-font-heading);
    font-size: 60px;
    font-weight: 600;
    letter-spacing: 0.14em;
    background: linear-gradient(to right, rgba(27, 42, 74, 0.35), rgba(255, 255, 255, 0.18));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 0 0.3em;
    color: var(--hk-white);
    display: inline-block;
    margin-bottom: 0.25rem;
}

.hk-campus-hero__subtitle {
    display: block;
    font-family: var(--hk-font-heading);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--hk-gold-light);
    margin-bottom: 1.5rem;
}

.hk-campus-hero__divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 2rem;
}

.hk-campus-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 300;
    color: rgba(247, 244, 238, 0.85);
    letter-spacing: 0.04em;
}

.hk-campus-hero__scroll {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--hk-gold);
    opacity: 0.6;
    transition: opacity 0.3s var(--hk-ease);
}

.hk-campus-hero__scroll:hover { opacity: 1; }

.hk-campus-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.hk-campus-hero__scroll svg {
    width: 20px;
    height: 20px;
    stroke: var(--hk-gold);
    animation: hk-float 2.5s ease-in-out infinite;
}

/* ---- About (dark navy) ---- */
/* ── Campus About — Premium parchment section ── */
.hk-campus-about {
    padding: clamp(80px, 10vw, 130px) 0;
    background: var(--hk-parchment);
    position: relative;
    overflow: hidden;
}

/* Ornamental star watermark */
.hk-campus-about::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 gold hairline */
.hk-campus-about::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-campus-about .hk-container {
    position: relative;
    z-index: 1;
}

.hk-campus-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.hk-campus-about__text {
    padding: 0;
    border-inline-start: none;
}

.hk-campus-about .hk-overline {
    color: var(--hk-gold-text);
    letter-spacing: 0.2em;
}

.hk-campus-about .hk-overline::after {
    display: none;
}

.hk-campus-about__text .hk-display {
    font-family: var(--hk-font-heading);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 2rem;
    margin-top: 0.75rem;
    color: var(--hk-heading);
}

.hk-campus-lead {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--hk-body);
    margin-bottom: 1rem;
}

.hk-campus-about__image {
    position: relative;
}

.hk-campus-about__image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(27, 42, 74, 0.12);
    border: 1px solid rgba(200, 169, 110, 0.15);
}

/* ---- Identity (card section) ---- */
.hk-campus-identity {
    padding: 8rem 0;
    background: var(--hk-parchment);
}

.hk-campus-identity__inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 5rem 4rem;
    background: var(--hk-white);
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(27, 42, 74, 0.06);
    border-top: 3px solid var(--hk-gold);
    position: relative;
}

.hk-campus-identity .hk-overline {
    color: var(--hk-gold);
}

.hk-campus-identity__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2rem;
    letter-spacing: -0.02em;
}

.hk-campus-identity__inner p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--hk-body);
    max-width: 640px;
    margin: 0 auto 1rem;
}

/* ---- Parallax ---- */
.hk-campus-parallax {
    padding: 8rem 0;
    position: relative;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/unsplash-dom.jpg') center center / cover no-repeat;
    background-attachment: fixed;
}

.hk-campus-parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.hk-campus-parallax__overlay {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 2rem;
}

.hk-campus-parallax__text {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 1.3;
    max-width: 700px;
    margin: 0 auto;
    letter-spacing: -0.02em;
}

/* ---- Pillars (4 cards) ---- */
.hk-campus-pillars {
    padding: 10rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-campus-pillars::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-campus-pillars__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 5rem;
}

.hk-campus-pillars__header .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-campus-pillars__header h2 {
    font-family: var(--hk-font-heading);
    font-size: 3.2rem;
    font-weight: 300;
    color: var(--hk-white);
    margin: 0.5rem 0 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.hk-campus-pillars__sub {
    color: rgba(247, 244, 238, 0.65);
    font-size: 1.05rem;
    line-height: 1.8;
}

.hk-campus-pillars__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.hk-campus-pillars__card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(200, 169, 110, 0.12);
    border-radius: 4px;
    padding: 3rem 2.5rem;
    transition: all 0.4s var(--hk-ease);
}

.hk-campus-pillars__card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(200, 169, 110, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.hk-campus-pillars__icon {
    color: var(--hk-gold);
    margin-bottom: 1.5rem;
}

.hk-campus-pillars__card h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--hk-white);
    margin-bottom: 0.3rem;
}

.hk-campus-pillars__label {
    font-family: var(--hk-font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--hk-gold);
    margin-bottom: 1.2rem;
}

.hk-campus-pillars__card p:last-child {
    font-size: 0.95rem;
    line-height: 1.85;
    color: rgba(247, 244, 238, 0.65);
}

/* ---- CTA ---- */
.hk-campus-cta {
    padding: 8rem 0;
    background: var(--hk-parchment);
    text-align: center;
}

.hk-campus-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-campus-cta__inner .hk-overline {
    color: var(--hk-gold);
    opacity: 1;
}

.hk-campus-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 1.5rem;
    letter-spacing: -0.02em;
}

.hk-campus-cta__sub {
    color: var(--hk-body);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

.hk-campus-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .hk-campus-about__grid { grid-template-columns: 1fr; gap: 3rem; }
    .hk-campus-pillars__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .hk-campus-hero__logo { width: 160px; }
    .hk-campus-hero__title { font-size: 42px; }
    .hk-campus-hero__subtitle { font-size: 20px; letter-spacing: 0.3em; }
    .hk-campus-hero__tagline { font-size: 1.2rem; }
    .hk-campus-about__text .hk-display { font-size: 2rem; }
    .hk-campus-parallax { background-attachment: scroll; }
    .hk-campus-parallax__text { font-size: 2rem; }
    .hk-campus-pillars { padding: 6rem 0; }
    .hk-campus-pillars__header h2 { font-size: 2.4rem; }
    .hk-campus-cta__inner h2 { font-size: 2.25rem; }
}

/* ==========================================================================
   UNSER LOGO PAGE
   ========================================================================== */

/* ---- Hero ---- */
.hk-logo-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: var(--hk-hero-gradient);
    overflow: hidden;
}

.hk-logo-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(200,169,110,0.08) 0%, transparent 50%);
    pointer-events: none;
}

.hk-logo-hero__content {
    position: relative;
    z-index: 1;
    padding: 0 2rem;
}

.hk-logo-hero__title {
    font-family: var(--hk-font-heading);
    font-size: 5.5rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0.75rem 0 2rem;
}

.hk-logo-hero__divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 2rem;
}

.hk-logo-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 300;
    color: rgba(247, 244, 238, 0.85);
    letter-spacing: 0.04em;
}

.hk-logo-hero__scroll {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--hk-gold);
    opacity: 0.6;
    transition: opacity 0.3s var(--hk-ease);
}

.hk-logo-hero__scroll:hover { opacity: 1; }

.hk-logo-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.hk-logo-hero__scroll svg {
    width: 20px;
    height: 20px;
    stroke: var(--hk-gold);
    animation: hk-float 2.5s ease-in-out infinite;
}

/* ---- Showcase (logo + text grid) ---- */
.hk-logo-showcase {
    padding: 10rem 0;
    background: var(--hk-parchment);
}

.hk-logo-showcase__grid {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: 7rem;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
}

.hk-logo-showcase__frame {
    background: var(--hk-white);
    border-radius: 4px;
    padding: 3rem;
    box-shadow: 0 8px 40px rgba(27, 42, 74, 0.08);
    border: 1px solid rgba(200, 169, 110, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hk-logo-showcase__frame img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.hk-logo-showcase__text {
    padding-inline-start: 3rem;
    border-inline-start: 1px solid rgba(200, 169, 110, 0.3);
}

.hk-logo-showcase .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-logo-showcase .hk-overline::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, var(--hk-gold), transparent);
    margin-top: 1rem;
}

.hk-logo-showcase__text .hk-display {
    font-size: 3.8rem;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 2.5rem;
    margin-top: 1.5rem;
    color: var(--hk-heading);
}

.hk-logo-lead {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--hk-body);
    margin-bottom: 1.2rem;
}

/* ---- Quran section (dark navy) ---- */
.hk-logo-quran {
    padding: 10rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-logo-quran::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-logo-quran::after {
    content: '۝';
    position: absolute;
    inset-inline-start: -5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 42rem;
    color: rgba(200, 169, 110, 0.025);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.hk-logo-quran__inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.hk-logo-quran .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-logo-quran__verse {
    margin: 2.5rem 0;
    padding: 0;
    border: none;
}

.hk-logo-quran__arabic {
    font-family: 'Amiri', serif;
    font-size: 2.2rem;
    line-height: 2;
    color: var(--hk-gold);
    direction: rtl;
    margin-bottom: 2rem;
}

.hk-logo-quran__german {
    font-family: var(--hk-font-heading);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--hk-white);
    font-style: italic;
    max-width: 600px;
    margin: 0 auto;
}

.hk-logo-quran__reflection {
    font-size: 1.05rem;
    line-height: 2;
    color: rgba(247, 244, 238, 0.65);
    max-width: 640px;
    margin: 2rem auto 0;
}

/* ---- Meaning (2-col with image) ---- */
.hk-logo-meaning {
    padding: 10rem 0;
    background: var(--hk-parchment);
}

.hk-logo-meaning__grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 7rem;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
}

.hk-logo-meaning .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-logo-meaning__text h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2rem;
    letter-spacing: -0.02em;
}

.hk-logo-meaning__text p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--hk-body);
    margin-bottom: 1.2rem;
}

.hk-logo-meaning__frame {
    background: var(--hk-white);
    border-radius: 4px;
    padding: 2rem;
    box-shadow: 0 8px 40px rgba(27, 42, 74, 0.08);
    border: 1px solid rgba(200, 169, 110, 0.15);
}

.hk-logo-meaning__frame img {
    width: 100%;
    border-radius: 2px;
}

/* ---- Statement (parallax) ---- */
.hk-logo-statement {
    padding: 8rem 0;
    position: relative;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/hakim-glass-logo.jpg') center center / cover no-repeat;
    background-attachment: fixed;
}

.hk-logo-statement::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}

.hk-logo-statement__overlay {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 2rem;
}

.hk-logo-statement__text {
    font-family: var(--hk-font-heading);
    font-size: 2.6rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 1.4;
    max-width: 700px;
    margin: 0 auto;
    letter-spacing: -0.02em;
}

/* ---- CTA ---- */
.hk-logo-cta {
    padding: 8rem 0;
    background: var(--hk-parchment);
    text-align: center;
}

.hk-logo-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-logo-cta__inner .hk-overline {
    color: var(--hk-gold);
}

.hk-logo-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2.5rem;
    letter-spacing: -0.02em;
}

.hk-logo-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .hk-logo-showcase__grid { grid-template-columns: 1fr; gap: 4rem; }
    .hk-logo-meaning__grid { grid-template-columns: 1fr; gap: 4rem; }
}

@media (max-width: 768px) {
    .hk-logo-hero__title { font-size: 3.5rem; }
    .hk-logo-showcase__text { padding-inline-start: 1.5rem; }
    .hk-logo-showcase__text .hk-display { font-size: 2.8rem; }
    .hk-logo-quran { padding: 6rem 0; }
    .hk-logo-quran__arabic { font-size: 1.6rem; }
    .hk-logo-quran__german { font-size: 1.2rem; }
    .hk-logo-meaning__text h2 { font-size: 2.2rem; }
    .hk-logo-statement { background-attachment: scroll; }
    .hk-logo-statement__text { font-size: 2rem; }
    .hk-logo-cta__inner h2 { font-size: 2.25rem; }
}

/* ==========================================================================
   UNSER EID PAGE
   ========================================================================== */

/* ---- Hero ---- */
.hk-eid-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/hakim-arabic-calligraphy.jpg') center center / cover no-repeat;
    overflow: hidden;
}

.hk-eid-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(9,15,28,0.92) 0%, rgba(17,29,51,0.88) 45%, rgba(26,45,74,0.85) 100%);
}

.hk-eid-hero__content {
    position: relative;
    z-index: 1;
    padding: 0 2rem;
}

.hk-eid-hero__title {
    font-family: var(--hk-font-heading);
    font-size: 5.5rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0.75rem 0 2rem;
}

.hk-eid-hero__divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 2rem;
}

.hk-eid-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 300;
    color: rgba(247, 244, 238, 0.85);
    letter-spacing: 0.04em;
}

.hk-eid-hero__scroll {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--hk-gold);
    opacity: 0.6;
    transition: opacity 0.3s var(--hk-ease);
}

.hk-eid-hero__scroll:hover { opacity: 1; }

.hk-eid-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.hk-eid-hero__scroll svg {
    width: 20px;
    height: 20px;
    stroke: var(--hk-gold);
    animation: hk-float 2.5s ease-in-out infinite;
}

/* ---- Intro ---- */
.hk-eid-intro {
    padding: 8rem 0;
    background: var(--hk-parchment);
}

.hk-eid-intro__inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
}

.hk-eid-intro .hk-overline {
    color: var(--hk-gold);
}

.hk-eid-intro__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2rem;
    letter-spacing: -0.02em;
}

.hk-eid-intro__inner p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--hk-body);
    margin-bottom: 1.2rem;
}

/* ---- Quran quote (parallax) ---- */
.hk-eid-quran {
    padding: 8rem 0;
    position: relative;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/hakim-arabic-calligraphy.jpg') center center / cover no-repeat;
    background-attachment: fixed;
}

.hk-eid-quran::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(9, 15, 28, 0.85);
}

.hk-eid-quran__overlay {
    position: relative;
    z-index: 1;
}

.hk-eid-quran__inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
}

.hk-eid-quran .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-eid-quran__verse {
    margin: 1.5rem 0 0;
    padding: 0;
    border: none;
}

.hk-eid-quran__verse p {
    font-family: var(--hk-font-heading);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--hk-white);
    font-style: italic;
}

/* ---- Oath (main oath text) ---- */
.hk-eid-oath {
    padding: 10rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-eid-oath::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-eid-oath::after {
    content: '﷽';
    position: absolute;
    inset-inline-end: -5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28rem;
    color: rgba(200, 169, 110, 0.02);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    font-family: 'Amiri', serif;
}

.hk-eid-oath__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
}

.hk-eid-oath .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-eid-oath__title {
    font-family: var(--hk-font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--hk-white);
    margin: 0.5rem 0 3rem;
    letter-spacing: -0.02em;
}

.hk-eid-oath__text {
    text-align: start;
    padding-inline-start: 3rem;
    border-inline-start: 1px solid rgba(200, 169, 110, 0.3);
}

.hk-eid-oath__text p {
    font-size: 1.1rem;
    line-height: 2;
    color: rgba(247, 244, 238, 0.75);
    margin-bottom: 1.5rem;
}

.hk-eid-oath__opening {
    font-family: var(--hk-font-heading);
    font-size: 1.5rem !important;
    font-weight: 600;
    color: var(--hk-gold) !important;
    letter-spacing: 0.02em;
}

.hk-eid-oath__closing {
    font-family: var(--hk-font-heading);
    font-size: 1.3rem !important;
    font-style: italic;
    color: var(--hk-gold) !important;
    margin-top: 2rem !important;
    padding-top: 2rem;
    border-top: 1px solid rgba(200, 169, 110, 0.2);
}

/* ---- CTA ---- */
.hk-eid-cta {
    padding: 8rem 0;
    background: var(--hk-parchment);
    text-align: center;
}

.hk-eid-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-eid-cta__inner .hk-overline {
    color: var(--hk-gold);
}

.hk-eid-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2.5rem;
    letter-spacing: -0.02em;
}

.hk-eid-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .hk-eid-hero { background-attachment: scroll; }
    .hk-eid-hero__title { font-size: 3.5rem; }
    .hk-eid-intro__inner h2 { font-size: 2.2rem; }
    .hk-eid-quran { background-attachment: scroll; }
    .hk-eid-quran__verse p { font-size: 1.2rem; }
    .hk-eid-oath { padding: 6rem 0; }
    .hk-eid-oath__title { font-size: 2.8rem; }
    .hk-eid-oath__text { padding-inline-start: 1.5rem; }
    .hk-eid-cta__inner h2 { font-size: 2.25rem; }
}

/* ==========================================================================
   PHILOSOPHY PAGES — Shared Arabic subtitle
   ========================================================================== */

.hk-hero-arabic {
    font-family: 'Amiri', serif;
    font-size: 4.5rem;
    font-weight: 400;
    color: var(--hk-gold-light);
    opacity: 1;
    letter-spacing: 0;
    margin-top: 1rem;
    direction: rtl;
}

@media (max-width: 768px) {
    .hk-hero-arabic {
        font-size: 3rem;
    }
}

/* ==========================================================================
   SPIRITUALITAET PAGE
   ========================================================================== */

/* ---- Hero ---- */
.hk-spirit-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/hakim-dua.jpg') center center / cover no-repeat;
    overflow: hidden;
}

.hk-spirit-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(9,15,28,0.9) 0%, rgba(17,29,51,0.85) 45%, rgba(26,45,74,0.82) 100%);
}

.hk-spirit-hero::after {
    content: 'عبادة';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Amiri', serif;
    font-size: 28rem;
    font-weight: 400;
    opacity: 0.03;
    pointer-events: none;
    color: var(--hk-gold);
    line-height: 1;
    z-index: 0;
}

.hk-spirit-hero__content {
    position: relative;
    z-index: 1;
    padding: 0 2rem;
}

.hk-spirit-hero__title {
    font-family: var(--hk-font-heading);
    font-size: 5.5rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0.75rem 0 2rem;
}

.hk-spirit-hero__divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 2rem;
}

.hk-spirit-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 300;
    color: rgba(247, 244, 238, 0.85);
    letter-spacing: 0.04em;
}

.hk-spirit-hero__scroll {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--hk-gold);
    opacity: 0.6;
    transition: opacity 0.3s var(--hk-ease);
}

.hk-spirit-hero__scroll:hover { opacity: 1; }

.hk-spirit-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.hk-spirit-hero__scroll svg {
    width: 20px;
    height: 20px;
    stroke: var(--hk-gold);
}

.hk-spirit-hero__scroll {
    animation: hk-scroll-pulse 2.5s ease-in-out infinite;
}

/* ---- Context (dark navy) ---- */
.hk-spirit-context {
    padding: 10rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-spirit-context::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-spirit-context::after {
    content: '❊';
    position: absolute;
    inset-inline-end: -3%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48rem;
    color: rgba(200, 169, 110, 0.02);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.hk-spirit-context__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding-inline-start: 3rem;
    border-inline-start: 1px solid rgba(200, 169, 110, 0.3);
}

.hk-spirit-context .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-spirit-context .hk-overline::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, var(--hk-gold), transparent);
    margin-top: 1rem;
}

.hk-spirit-context__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--hk-white);
    margin: 1rem 0 2.5rem;
    letter-spacing: -0.02em;
}

.hk-spirit-body {
    font-size: 1.05rem;
    line-height: 2;
    color: rgba(247, 244, 238, 0.72);
    margin-bottom: 1.2rem;
}

/* ---- Parallax ---- */
.hk-spirit-parallax {
    padding: 8rem 0;
    position: relative;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/hakim-dua.jpg') center center / cover no-repeat;
    background-attachment: fixed;
}

.hk-spirit-parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(9, 15, 28, 0.82);
}

.hk-spirit-parallax__overlay {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 2rem;
}

.hk-spirit-parallax__text {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 1.3;
    max-width: 700px;
    margin: 0 auto;
    letter-spacing: -0.02em;
}

/* ---- Vision (2-col with image) ---- */
.hk-spirit-vision {
    padding: 10rem 0;
    background: var(--hk-parchment);
}

.hk-spirit-vision__grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 7rem;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
}

.hk-spirit-vision .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-spirit-vision__text h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2rem;
    letter-spacing: -0.02em;
}

.hk-spirit-vision__text p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--hk-body);
    margin-bottom: 1.2rem;
}

.hk-spirit-vision__image img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(27, 42, 74, 0.12);
}

/* ---- Quran verse (dark navy) ---- */
.hk-spirit-quran {
    padding: 8rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-spirit-quran::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-spirit-quran__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
}

.hk-spirit-quran .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-spirit-quran__ornament {
    color: var(--hk-gold);
    font-size: 1.5rem;
    opacity: 0.5;
    margin: 1rem 0;
}

.hk-spirit-quran__verse {
    margin: 2rem 0 0;
    padding: 0;
    border: none;
}

.hk-spirit-quran__arabic {
    font-family: 'Amiri', serif;
    font-size: 2.8rem;
    line-height: 1.8;
    color: var(--hk-gold);
    direction: rtl;
    margin-bottom: 2rem;
}

.hk-spirit-quran__german {
    font-family: var(--hk-font-heading);
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--hk-white);
    font-style: italic;
}

/* ---- CTA ---- */
.hk-spirit-cta {
    padding: 8rem 0;
    background: var(--hk-parchment);
    text-align: center;
}

.hk-spirit-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-spirit-cta__inner .hk-overline {
    color: var(--hk-gold);
}

.hk-spirit-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2.5rem;
    letter-spacing: -0.02em;
}

.hk-spirit-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .hk-spirit-vision__grid { grid-template-columns: 1fr; gap: 4rem; }
}

@media (max-width: 768px) {
    .hk-spirit-hero { background-attachment: scroll; }
    .hk-spirit-hero__title { font-size: 3.5rem; }
    .hk-spirit-context { padding: 6rem 0; }
    .hk-spirit-context__inner { padding-inline-start: 1.5rem; }
    .hk-spirit-context__inner h2 { font-size: 2.6rem; }
    .hk-spirit-parallax { background-attachment: scroll; }
    .hk-spirit-parallax__text { font-size: 2rem; }
    .hk-spirit-vision__text h2 { font-size: 2.2rem; }
    .hk-spirit-quran__arabic { font-size: 2rem; }
    .hk-spirit-quran__german { font-size: 1.4rem; }
    .hk-spirit-cta__inner h2 { font-size: 2.25rem; }
}


/* =========================================================================
   WISSEN UND KOMPETENZ PAGE
   ========================================================================= */

/* ---- Hero ---- */
.hk-wissen-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: var(--hk-hero-gradient);
    overflow: hidden;
}

.hk-wissen-hero::before {
    content: 'علم';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Amiri', serif;
    font-size: 28rem;
    font-weight: 400;
    opacity: 0.03;
    pointer-events: none;
    color: var(--hk-gold);
    line-height: 1;
}

.hk-wissen-hero__content {
    position: relative;
    z-index: 1;
    padding: 0 2rem;
}

.hk-wissen-hero__title {
    font-family: var(--hk-font-heading);
    font-size: 5.5rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0.75rem 0 2rem;
}

.hk-wissen-hero__divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 2rem;
}

.hk-wissen-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 300;
    color: rgba(247, 244, 238, 0.85);
    letter-spacing: 0.04em;
}

.hk-wissen-hero__scroll {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--hk-gold);
    opacity: 0.6;
    transition: opacity 0.3s var(--hk-ease);
}

.hk-wissen-hero__scroll:hover { opacity: 1; }

.hk-wissen-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.hk-wissen-hero__scroll svg {
    width: 20px;
    height: 20px;
    stroke: var(--hk-gold);
    animation: hk-float 2.5s ease-in-out infinite;
}

/* ---- Intro (parchment) ---- */
.hk-wissen-intro {
    padding: 10rem 0;
    background: var(--hk-parchment);
}

.hk-wissen-intro__inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-wissen-intro .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-wissen-intro .hk-overline::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, var(--hk-gold), transparent);
    margin-top: 1rem;
}

.hk-wissen-intro__inner h2,
.hk-wissen-intro__text h2 {
    font-family: var(--hk-font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 1rem 0 3.5rem;
    letter-spacing: -0.02em;
}

.hk-wissen-intro__inner p,
.hk-wissen-intro__text p {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--hk-body);
    margin-bottom: 1.2rem;
}

/* Split layout: text + image */
.hk-wissen-intro__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.hk-wissen-intro__text {
    padding: 0 2rem;
}

.hk-wissen-intro__image {
    position: relative;
    display: flex;
    justify-content: center;
}

.hk-wissen-intro__image-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(27, 42, 74, 0.18), 0 0 0 1px rgba(200, 169, 110, 0.2);
    max-width: 420px;
}

.hk-wissen-intro__image-frame img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0.97) contrast(1.03);
    transition: transform 0.6s var(--hk-ease), filter 0.6s var(--hk-ease);
}

.hk-wissen-intro__image:hover .hk-wissen-intro__image-frame img {
    transform: scale(1.03);
    filter: brightness(1) contrast(1.03);
}

.hk-wissen-intro__image-accent {
    position: absolute;
    top: -12px;
    inset-inline-end: -12px;
    bottom: -12px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(200, 169, 110, 0.5), transparent);
}

/* ---- Hadith (dark navy) ---- */
/* ---- Hadith card (teal accent, matches blog hadith style) ---- */
.hk-wissen-hadith {
    padding: 6rem 0;
    background: var(--hk-parchment);
}

.hk-wissen-hadith__inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 3.5rem 3.5rem 3rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(91, 138, 154, 0.2);
    border-top: 3px solid var(--hk-teal);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 40px rgba(27, 42, 74, 0.06);
}

.hk-wissen-hadith .hk-overline {
    color: var(--hk-teal);
    letter-spacing: 0.3em;
}

.hk-wissen-hadith__arabic {
    margin-top: 2rem;
    font-family: var(--hk-font-arabic);
    font-size: 2.2rem;
    line-height: 2;
    text-align: center;
    direction: rtl;
    color: var(--hk-teal);
    margin-bottom: 2rem;
}

.hk-wissen-hadith__text {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--hk-heading);
    font-style: italic;
}

.hk-wissen-hadith__source {
    font-family: var(--hk-font-body);
    font-size: 0.8rem;
    color: var(--hk-teal);
    margin-top: 2rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
}

/* ---- Mission (parchment, 2-col) ---- */
.hk-wissen-mission {
    padding: 10rem 0;
    background: var(--hk-parchment);
}

.hk-wissen-mission__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    max-width: 1140px;
    margin: 0 auto;
    align-items: start;
}

.hk-wissen-mission__text {
    padding-inline-start: 3rem;
    border-inline-start: 1px solid rgba(200, 169, 110, 0.3);
}

.hk-wissen-mission .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-wissen-mission__text h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2rem;
    letter-spacing: -0.02em;
}

.hk-wissen-mission__text p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--hk-body);
    margin-bottom: 1.2rem;
}

.hk-wissen-mission__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.hk-wissen-pillar {
    background: var(--hk-white);
    border-radius: 4px;
    padding: 2.5rem 2rem;
    border-top: 2px solid var(--hk-gold);
    box-shadow: 0 4px 24px rgba(27, 42, 74, 0.06);
    transition: transform 0.4s var(--hk-ease), box-shadow 0.4s var(--hk-ease);
}

.hk-wissen-pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(27, 42, 74, 0.1);
}

.hk-wissen-pillar__icon {
    width: 40px;
    height: 40px;
    color: var(--hk-gold);
    margin-bottom: 1.2rem;
}

.hk-wissen-pillar h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--hk-heading);
    margin-bottom: 0.5rem;
}

.hk-wissen-pillar p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--hk-body);
}

/* ---- Quran verse (dark navy) ---- */
.hk-wissen-quran {
    padding: 8rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-wissen-quran::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-wissen-quran__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
}

.hk-wissen-quran .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-wissen-quran__verse {
    margin: 2rem 0 0;
    padding: 0;
    border: none;
}

.hk-wissen-quran__arabic {
    font-family: 'Amiri', serif;
    font-size: 2.8rem;
    line-height: 1.8;
    color: var(--hk-gold);
    direction: rtl;
    margin-bottom: 2rem;
}

.hk-wissen-quran__german {
    font-family: var(--hk-font-heading);
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--hk-white);
    font-style: italic;
}

/* ---- CTA ---- */
.hk-wissen-cta {
    padding: 8rem 0;
    background: var(--hk-parchment);
    text-align: center;
}

.hk-wissen-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-wissen-cta__inner .hk-overline {
    color: var(--hk-gold);
}

.hk-wissen-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2.5rem;
    letter-spacing: -0.02em;
}

.hk-wissen-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .hk-wissen-mission__grid { grid-template-columns: 1fr; gap: 4rem; }
    .hk-wissen-mission__pillars { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .hk-wissen-hero__title { font-size: 3.5rem; }
    .hk-wissen-intro { padding: 6rem 0; }
    .hk-wissen-intro__inner h2 { font-size: 2.6rem; }
    .hk-wissen-intro__split { grid-template-columns: 1fr; gap: 3rem; }
    .hk-wissen-intro__text h2 { font-size: 2.6rem; }
    .hk-wissen-intro__image-frame { max-width: 320px; }
    .hk-wissen-intro__image-accent { display: none; }
    .hk-wissen-hadith__inner { padding: 2.5rem 1.5rem 2rem; }
    .hk-wissen-hadith__arabic { font-size: 1.5rem; }
    .hk-wissen-mission { padding: 6rem 0; }
    .hk-wissen-mission__text { padding-inline-start: 1.5rem; }
    .hk-wissen-mission__text h2 { font-size: 2.2rem; }
    .hk-wissen-mission__pillars { grid-template-columns: 1fr; }
    .hk-wissen-quran__arabic { font-size: 2rem; }
    .hk-wissen-quran__german { font-size: 1.4rem; }
    .hk-wissen-cta__inner h2 { font-size: 2.25rem; }
}


/* =========================================================================
   SELBSTBEWUSSTSEIN PAGE
   ========================================================================= */

/* ---- Hero ---- */
.hk-selbst-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: var(--hk-hero-gradient);
    overflow: hidden;
}

.hk-selbst-hero::before {
    content: 'عزة';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Amiri', serif;
    font-size: 28rem;
    font-weight: 400;
    opacity: 0.03;
    pointer-events: none;
    color: var(--hk-gold);
    line-height: 1;
}

.hk-selbst-hero__content {
    position: relative;
    z-index: 1;
    padding: 0 2rem;
}

.hk-selbst-hero__title {
    font-family: var(--hk-font-heading);
    font-size: 5.5rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0.75rem 0 2rem;
}

.hk-selbst-hero__divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 2rem;
}

.hk-selbst-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 300;
    color: rgba(247, 244, 238, 0.85);
    letter-spacing: 0.04em;
}

.hk-selbst-hero__scroll {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--hk-gold);
    opacity: 0.6;
    transition: opacity 0.3s var(--hk-ease);
}

.hk-selbst-hero__scroll:hover { opacity: 1; }

.hk-selbst-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.hk-selbst-hero__scroll svg {
    width: 20px;
    height: 20px;
    stroke: var(--hk-gold);
    animation: hk-float 2.5s ease-in-out infinite;
}

/* ---- Context (dark navy) ---- */
.hk-selbst-context {
    padding: 10rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-selbst-context::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-selbst-context::after {
    content: '⟡';
    position: absolute;
    inset-inline-end: -3%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48rem;
    color: rgba(200, 169, 110, 0.02);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.hk-selbst-context__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding-inline-start: 3rem;
    border-inline-start: 1px solid rgba(200, 169, 110, 0.3);
}

/* Split layout: text + image side by side */
.hk-selbst-context__split {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.hk-selbst-context__text {
    padding-inline-start: 3rem;
    border-inline-start: 1px solid rgba(200, 169, 110, 0.3);
}

.hk-selbst-context__image {
    position: relative;
    display: flex;
    justify-content: center;
}

.hk-selbst-context__image-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(200, 169, 110, 0.15);
    max-width: 420px;
}

.hk-selbst-context__image-frame img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0.95) contrast(1.05);
    transition: transform 0.6s var(--hk-ease), filter 0.6s var(--hk-ease);
}

.hk-selbst-context__image:hover .hk-selbst-context__image-frame img {
    transform: scale(1.03);
    filter: brightness(1) contrast(1.05);
}

/* Gold accent line behind image */
.hk-selbst-context__image-accent {
    position: absolute;
    top: -12px;
    inset-inline-end: -12px;
    bottom: -12px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(200, 169, 110, 0.5), transparent);
}

.hk-selbst-context .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-selbst-context .hk-overline::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, var(--hk-gold), transparent);
    margin-top: 1rem;
}

.hk-selbst-context__inner h2,
.hk-selbst-context__text h2 {
    font-family: var(--hk-font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--hk-gold);
    margin: 1rem 0 3.5rem;
    letter-spacing: -0.02em;
}

.hk-selbst-body {
    font-size: 1.05rem;
    line-height: 2;
    color: rgba(247, 244, 238, 0.72);
    margin-bottom: 1.2rem;
}

/* ---- Conflict (parchment) ---- */
.hk-selbst-conflict {
    padding: 10rem 0;
    background: var(--hk-parchment);
}

.hk-selbst-conflict__inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-selbst-conflict .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-selbst-conflict .hk-overline::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, var(--hk-gold), transparent);
    margin-top: 1rem;
}

.hk-selbst-conflict__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 1rem 0 2.5rem;
    letter-spacing: -0.02em;
}

.hk-selbst-conflict__inner p {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--hk-body);
    margin-bottom: 1.2rem;
}

/* ---- Parallax ---- */
.hk-selbst-parallax {
    padding: 8rem 0;
    position: relative;
    background: url('/wp-content/themes/hakim-theme/assets/img/content/hakim-dua.jpg') center center / cover no-repeat;
    background-attachment: fixed;
}

.hk-selbst-parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(9, 15, 28, 0.82);
}

.hk-selbst-parallax__overlay {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 2rem;
}

.hk-selbst-parallax__text {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 1.3;
    max-width: 700px;
    margin: 0 auto;
    letter-spacing: -0.02em;
}

/* ---- Quran verse (dark navy) ---- */
.hk-selbst-quran {
    padding: 8rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-selbst-quran::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-selbst-quran__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
}

.hk-selbst-quran .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-selbst-quran__verse {
    margin: 2rem 0 0;
    padding: 0;
    border: none;
}

.hk-selbst-quran__arabic {
    font-family: 'Amiri', serif;
    font-size: 2.8rem;
    line-height: 1.8;
    color: var(--hk-gold);
    direction: rtl;
    margin-bottom: 2rem;
}

.hk-selbst-quran__german {
    font-family: var(--hk-font-heading);
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--hk-white);
    font-style: italic;
}

/* ---- CTA ---- */
.hk-selbst-cta {
    padding: 8rem 0;
    background: var(--hk-parchment);
    text-align: center;
}

.hk-selbst-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-selbst-cta__inner .hk-overline {
    color: var(--hk-gold);
}

.hk-selbst-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2.5rem;
    letter-spacing: -0.02em;
}

.hk-selbst-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .hk-selbst-hero__title { font-size: 3rem; }
    .hk-selbst-context { padding: 6rem 0; }
    .hk-selbst-context__inner { padding-inline-start: 1.5rem; }
    .hk-selbst-context__inner h2 { font-size: 2.6rem; }
    .hk-selbst-context__split { grid-template-columns: 1fr; gap: 3rem; }
    .hk-selbst-context__text { padding-inline-start: 1.5rem; }
    .hk-selbst-context__text h2 { font-size: 2.6rem; }
    .hk-selbst-context__image-frame { max-width: 320px; }
    .hk-selbst-context__image-accent { display: none; }
    .hk-selbst-conflict { padding: 6rem 0; }
    .hk-selbst-conflict__inner h2 { font-size: 2.2rem; }
    .hk-selbst-parallax { background-attachment: scroll; }
    .hk-selbst-parallax__text { font-size: 2rem; }
    .hk-selbst-quran__arabic { font-size: 2rem; }
    .hk-selbst-quran__german { font-size: 1.4rem; }
    .hk-selbst-cta__inner h2 { font-size: 2.25rem; }
}


/* =========================================================================
   GEMEINNUETZIGKEIT PAGE
   ========================================================================= */

/* ---- Hero ---- */
.hk-gemein-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: var(--hk-hero-gradient);
    overflow: hidden;
}

.hk-gemein-hero::before {
    content: 'خدمة';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Amiri', serif;
    font-size: 28rem;
    font-weight: 400;
    opacity: 0.03;
    pointer-events: none;
    color: var(--hk-gold);
    line-height: 1;
}

.hk-gemein-hero__content {
    position: relative;
    z-index: 1;
    padding: 0 2rem;
}

.hk-gemein-hero__title {
    font-family: var(--hk-font-heading);
    font-size: 5.5rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0.75rem 0 2rem;
}

.hk-gemein-hero__divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 2rem;
}

.hk-gemein-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 300;
    color: rgba(247, 244, 238, 0.85);
    letter-spacing: 0.04em;
}

.hk-gemein-hero__scroll {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--hk-gold);
    opacity: 0.6;
    transition: opacity 0.3s var(--hk-ease);
}

.hk-gemein-hero__scroll:hover { opacity: 1; }

.hk-gemein-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.hk-gemein-hero__scroll svg {
    width: 20px;
    height: 20px;
    stroke: var(--hk-gold);
}

.hk-gemein-hero__scroll {
    animation: hk-scroll-pulse 2.5s ease-in-out infinite;
}

/* ---- Intro (parchment) ---- */
.hk-gemein-intro {
    padding: 10rem 0;
    background: var(--hk-parchment);
}

.hk-gemein-intro__inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-gemein-intro .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-gemein-intro .hk-overline::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, var(--hk-gold), transparent);
    margin-top: 1rem;
}

.hk-gemein-intro__inner h2,
.hk-gemein-intro__text h2 {
    font-family: var(--hk-font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 1rem 0 3.5rem;
    letter-spacing: -0.02em;
}

.hk-gemein-intro__inner p,
.hk-gemein-intro__text p {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--hk-body);
    margin-bottom: 1.2rem;
}

/* Split layout: text + image */
.hk-gemein-intro__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.hk-gemein-intro__text {
    padding: 0 2rem;
}

.hk-gemein-intro__image {
    position: relative;
    display: flex;
    justify-content: center;
}

.hk-gemein-intro__image-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(27, 42, 74, 0.18), 0 0 0 1px rgba(200, 169, 110, 0.2);
    max-width: 420px;
}

.hk-gemein-intro__image-frame img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0.97) contrast(1.03);
    transition: transform 0.6s var(--hk-ease), filter 0.6s var(--hk-ease);
}

.hk-gemein-intro__image:hover .hk-gemein-intro__image-frame img {
    transform: scale(1.03);
    filter: brightness(1) contrast(1.03);
}

.hk-gemein-intro__image-accent {
    position: absolute;
    top: -12px;
    inset-inline-end: -12px;
    bottom: -12px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(200, 169, 110, 0.5), transparent);
}

/* ---- Quran verse (dark navy) ---- */
.hk-gemein-quran {
    padding: 8rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-gemein-quran::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-gemein-quran::after {
    content: '۝';
    position: absolute;
    inset-inline-end: -3%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48rem;
    color: rgba(200, 169, 110, 0.02);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.hk-gemein-quran__inner {
    position: relative;
    z-index: 1;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
}

.hk-gemein-quran .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-gemein-quran__ornament {
    color: var(--hk-gold);
    font-size: 1.5rem;
    opacity: 0.5;
    margin: 1rem 0;
}

.hk-gemein-quran__verse {
    margin: 2rem 0 0;
    padding: 0;
    border: none;
}

.hk-gemein-quran__arabic {
    font-family: 'Amiri', serif;
    font-size: 2.4rem;
    line-height: 1.8;
    color: var(--hk-gold);
    direction: rtl;
    margin-bottom: 2rem;
}

.hk-gemein-quran__german {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--hk-white);
    font-style: italic;
    max-width: 650px;
    margin: 0 auto;
}

.hk-gemein-quran__ref {
    font-family: var(--hk-font-body);
    font-size: 0.85rem;
    color: rgba(247, 244, 238, 0.5);
    margin-top: 1.5rem;
    letter-spacing: 0.05em;
}

/* ---- Vision (parchment) ---- */
.hk-gemein-vision {
    padding: 10rem 0;
    background: var(--hk-parchment);
}

.hk-gemein-vision__inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem;
    padding-inline-start: 5rem;
    border-inline-start: 1px solid rgba(200, 169, 110, 0.3);
}

.hk-gemein-vision .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-gemein-vision__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2rem;
    letter-spacing: -0.02em;
}

.hk-gemein-vision__inner p {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--hk-body);
    margin-bottom: 1.2rem;
}

/* ---- CTA ---- */
.hk-gemein-cta {
    padding: 8rem 0;
    background: var(--hk-hero-gradient);
    text-align: center;
    position: relative;
}

.hk-gemein-cta::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-gemein-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-gemein-cta__inner .hk-overline {
    color: var(--hk-gold);
}

.hk-gemein-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-white);
    margin: 0.5rem 0 2.5rem;
    letter-spacing: -0.02em;
}

.hk-gemein-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .hk-gemein-hero__title { font-size: 3rem; }
    .hk-gemein-intro { padding: 6rem 0; }
    .hk-gemein-intro__inner h2 { font-size: 2.6rem; }
    .hk-gemein-intro__split { grid-template-columns: 1fr; gap: 3rem; }
    .hk-gemein-intro__text h2 { font-size: 2.6rem; }
    .hk-gemein-intro__image-frame { max-width: 320px; }
    .hk-gemein-intro__image-accent { display: none; }
    .hk-gemein-quran__arabic { font-size: 1.8rem; }
    .hk-gemein-quran__german { font-size: 1.3rem; }
    .hk-gemein-vision { padding: 6rem 0; }
    .hk-gemein-vision__inner { padding-inline-start: 3.5rem; }
    .hk-gemein-vision__inner h2 { font-size: 2.2rem; }
    .hk-gemein-cta__inner h2 { font-size: 2.25rem; }
}


/* =========================================================================
   DER GUTE RATSCHLAG PAGE
   ========================================================================= */

/* ---- Hero ---- */
.hk-ratschlag-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: var(--hk-hero-gradient);
    overflow: hidden;
}

.hk-ratschlag-hero::before {
    content: 'نصيحة';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Amiri', serif;
    font-size: 28rem;
    font-weight: 400;
    opacity: 0.03;
    pointer-events: none;
    color: var(--hk-gold);
    line-height: 1;
}

.hk-ratschlag-hero__content {
    position: relative;
    z-index: 1;
    padding: 0 2rem;
}

.hk-ratschlag-hero__title {
    font-family: var(--hk-font-heading);
    font-size: 5.5rem;
    font-weight: 300;
    color: var(--hk-white);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0.75rem 0 2rem;
}

.hk-ratschlag-hero__divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 0 auto 2rem;
}

.hk-ratschlag-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 300;
    color: rgba(247, 244, 238, 0.85);
    letter-spacing: 0.04em;
}

.hk-ratschlag-hero__scroll {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--hk-gold);
    opacity: 0.6;
    transition: opacity 0.3s var(--hk-ease);
}

.hk-ratschlag-hero__scroll:hover { opacity: 1; }

.hk-ratschlag-hero__scroll span {
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.hk-ratschlag-hero__scroll svg {
    width: 20px;
    height: 20px;
    stroke: var(--hk-gold);
}

.hk-ratschlag-hero__scroll {
    animation: hk-scroll-pulse 2.5s ease-in-out infinite;
}

/* ---- Intro (dark navy) ---- */
.hk-ratschlag-intro {
    padding: 10rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-ratschlag-intro::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-ratschlag-intro::after {
    content: '☽';
    position: absolute;
    inset-inline-end: -3%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48rem;
    color: rgba(200, 169, 110, 0.02);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.hk-ratschlag-intro__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding-inline-start: 3rem;
    border-inline-start: 1px solid rgba(200, 169, 110, 0.3);
}

.hk-ratschlag-intro .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-ratschlag-intro .hk-overline::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, var(--hk-gold), transparent);
    margin-top: 1rem;
}

.hk-ratschlag-intro__inner h2,
.hk-ratschlag-intro__text h2 {
    font-family: var(--hk-font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--hk-gold);
    margin: 1rem 0 3.5rem;
    letter-spacing: -0.02em;
}

.hk-ratschlag-body {
    font-size: 1.05rem;
    line-height: 2;
    color: rgba(247, 244, 238, 0.72);
    margin-bottom: 1.2rem;
}

/* Split layout: text + image */
.hk-ratschlag-intro__split {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.hk-ratschlag-intro__text {
    padding-inline-start: 3rem;
    border-inline-start: 1px solid rgba(200, 169, 110, 0.3);
}

.hk-ratschlag-intro__image {
    position: relative;
    display: flex;
    justify-content: center;
}

.hk-ratschlag-intro__image-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(200, 169, 110, 0.15);
    max-width: 420px;
}

.hk-ratschlag-intro__image-frame img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0.95) contrast(1.05);
    transition: transform 0.6s var(--hk-ease), filter 0.6s var(--hk-ease);
}

.hk-ratschlag-intro__image:hover .hk-ratschlag-intro__image-frame img {
    transform: scale(1.03);
    filter: brightness(1) contrast(1.05);
}

.hk-ratschlag-intro__image-accent {
    position: absolute;
    top: -12px;
    inset-inline-end: -12px;
    bottom: -12px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(200, 169, 110, 0.5), transparent);
}

/* ---- Hadith (parchment) ---- */
/* ---- Hadith card (teal accent, matches blog hadith style) ---- */
.hk-ratschlag-hadith {
    padding: 6rem 0;
    background: var(--hk-parchment);
}

.hk-ratschlag-hadith__inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 3.5rem 3.5rem 3rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(91, 138, 154, 0.2);
    border-top: 3px solid var(--hk-teal);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 40px rgba(27, 42, 74, 0.06);
}

.hk-ratschlag-hadith .hk-overline {
    color: var(--hk-teal);
    letter-spacing: 0.3em;
}

.hk-ratschlag-hadith__arabic {
    margin-top: 2rem;
    font-family: var(--hk-font-arabic);
    font-size: 2.2rem;
    line-height: 2;
    text-align: center;
    direction: rtl;
    color: var(--hk-teal);
    margin-bottom: 2rem;
}

.hk-ratschlag-hadith__text {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--hk-heading);
    font-style: italic;
}

.hk-ratschlag-hadith__source {
    font-family: var(--hk-font-body);
    font-size: 0.8rem;
    color: var(--hk-teal);
    margin-top: 2rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 1;
}

/* ---- Drei Schritte (dark navy, 3-col) ---- */
.hk-ratschlag-steps {
    padding: 10rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
}

.hk-ratschlag-steps::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-ratschlag-steps__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 5rem;
    padding: 0 2rem;
}

.hk-ratschlag-steps__header .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-ratschlag-steps__header h2 {
    font-family: var(--hk-font-heading);
    font-size: 3rem;
    font-weight: 300;
    color: var(--hk-white);
    margin: 0.5rem 0 0;
    letter-spacing: -0.02em;
}

.hk-ratschlag-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-ratschlag-step {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(200, 169, 110, 0.15);
    border-top: 3px solid var(--hk-gold);
    border-radius: 4px;
    padding: 3rem 2.5rem;
    transition: transform 0.4s var(--hk-ease), box-shadow 0.4s var(--hk-ease);
}

.hk-ratschlag-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.hk-ratschlag-step__number {
    font-family: var(--hk-font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--hk-gold);
    line-height: 1;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.hk-ratschlag-step h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--hk-white);
    margin-bottom: 1rem;
}

.hk-ratschlag-step p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(247, 244, 238, 0.65);
}

/* ---- Conclusion (parchment) ---- */
.hk-ratschlag-conclusion {
    padding: 10rem 0;
    background: var(--hk-parchment);
}

.hk-ratschlag-conclusion__inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem;
    padding-inline-start: 5rem;
    border-inline-start: 1px solid rgba(200, 169, 110, 0.3);
}

.hk-ratschlag-conclusion .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-ratschlag-conclusion__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2rem;
    letter-spacing: -0.02em;
}

.hk-ratschlag-conclusion__inner p {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--hk-body);
    margin-bottom: 1.2rem;
}

/* ---- Quran verse (dark navy) ---- */
.hk-ratschlag-quran {
    padding: 8rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-ratschlag-quran::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.6) 30%, rgba(200,169,110,0.9) 50%, rgba(200,169,110,0.6) 70%, transparent 100%);
}

.hk-ratschlag-quran__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
}

.hk-ratschlag-quran .hk-overline {
    color: var(--hk-gold);
    letter-spacing: 0.3em;
}

.hk-ratschlag-quran__verse {
    margin: 2rem 0 0;
    padding: 0;
    border: none;
}

.hk-ratschlag-quran__arabic {
    font-family: 'Amiri', serif;
    font-size: 2.8rem;
    line-height: 1.8;
    color: var(--hk-gold);
    direction: rtl;
    margin-bottom: 2rem;
}

.hk-ratschlag-quran__german {
    font-family: var(--hk-font-heading);
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--hk-white);
    font-style: italic;
}

/* ---- CTA ---- */
.hk-ratschlag-cta {
    padding: 8rem 0;
    background: var(--hk-parchment);
    text-align: center;
}

.hk-ratschlag-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hk-ratschlag-cta__inner .hk-overline {
    color: var(--hk-gold);
}

.hk-ratschlag-cta__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--hk-heading);
    margin: 0.5rem 0 2.5rem;
    letter-spacing: -0.02em;
}

.hk-ratschlag-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .hk-ratschlag-steps__grid { grid-template-columns: 1fr; max-width: 550px; }
}

@media (max-width: 768px) {
    .hk-ratschlag-hero__title { font-size: 3rem; }
    .hk-ratschlag-intro { padding: 6rem 0; }
    .hk-ratschlag-intro__inner { padding-inline-start: 1.5rem; }
    .hk-ratschlag-intro__inner h2 { font-size: 2.6rem; }
    .hk-ratschlag-intro__split { grid-template-columns: 1fr; gap: 3rem; }
    .hk-ratschlag-intro__text { padding-inline-start: 1.5rem; }
    .hk-ratschlag-intro__text h2 { font-size: 2.6rem; }
    .hk-ratschlag-intro__image-frame { max-width: 320px; }
    .hk-ratschlag-intro__image-accent { display: none; }
    .hk-ratschlag-hadith__inner { padding: 2.5rem 1.5rem 2rem; }
    .hk-ratschlag-hadith__text { font-size: 1.3rem; }
    .hk-ratschlag-steps { padding: 6rem 0; }
    .hk-ratschlag-steps__header h2 { font-size: 2.4rem; }
    .hk-ratschlag-conclusion { padding: 6rem 0; }
    .hk-ratschlag-conclusion__inner { padding-inline-start: 3.5rem; }
    .hk-ratschlag-conclusion__inner h2 { font-size: 2.2rem; }
    .hk-ratschlag-quran__arabic { font-size: 2rem; }
    .hk-ratschlag-quran__german { font-size: 1.4rem; }
    .hk-ratschlag-cta__inner h2 { font-size: 2.25rem; }
}

/* ==========================================================================
   Mediathek Page
   ========================================================================== */

/* ---- ① Hero ---- */

.hk-mediathek-hero {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: var(--hk-hero-gradient);
    overflow: hidden;
}

.hk-mediathek-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.35;
}

.hk-mediathek-hero__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(9, 15, 28, 0.5) 70%);
}

.hk-mediathek-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(200, 169, 110, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 1;
}

.hk-mediathek-hero::after {
    content: '\2726';
    position: absolute;
    bottom: 15%;
    inset-inline-end: 8%;
    font-size: 18rem;
    color: rgba(200, 169, 110, 0.03);
    pointer-events: none;
    z-index: 1;
}

.hk-mediathek-hero__content {
    position: relative;
    z-index: 2;
    padding: 6rem 2rem;
}

.hk-mediathek-hero__title {
    font-family: var(--hk-font-heading);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 300;
    color: var(--hk-white);
    letter-spacing: -0.02em;
    margin: 0.5rem 0 1.5rem;
}

.hk-mediathek-hero__divider {
    width: 60px;
    height: 2px;
    background: var(--hk-gold);
    margin: 0 auto 1.5rem;
}

.hk-mediathek-hero__tagline {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    color: rgba(247, 244, 238, 0.7);
    font-weight: 300;
}

.hk-mediathek-hero__scroll {
    position: absolute;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--hk-gold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 2;
}

.hk-mediathek-hero__scroll svg {
    width: 20px;
    height: 20px;
    stroke: var(--hk-gold);
    animation: hk-float 2s ease-in-out infinite;
}

/* ---- ② Featured Publication ---- */

.hk-mediathek-featured {
    padding: 8rem 0;
    background: var(--hk-parchment);
    position: relative;
    overflow: hidden;
}

.hk-mediathek-featured__header {
    text-align: center;
    margin-bottom: 3.5rem;
}

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

.hk-mediathek-featured__header-divider {
    display: flex;
    justify-content: center;
}

.hk-mediathek-featured__header-divider span {
    display: block;
    width: 60px;
    height: 2px;
    background: var(--hk-gold);
}

.hk-mediathek-featured__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    max-width: 1000px;
    margin: 0 auto;
    background: var(--hk-white);
    border-radius: 4px;
    border: var(--hk-glass-border);  /* Spec B1 — Family 3 full border shorthand */
    box-shadow: 0 4px 24px rgba(27, 42, 74, 0.08);
    overflow: hidden;
}

.hk-mediathek-featured__cover {
    background:
        radial-gradient(ellipse 70% 55% at 50% 35%, rgba(200, 169, 110, 0.12) 0%, transparent 65%),
        var(--hk-parchment);
    padding: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.hk-mediathek-featured__cover img {
    width: 98%;
    height: auto;
    max-height: 94%;
    object-fit: contain;
    display: block;
    border-radius: 3px;
    box-shadow:
        0 1px 2px rgba(27, 42, 74, 0.12),
        0 12px 24px rgba(27, 42, 74, 0.14),
        0 32px 64px rgba(27, 42, 74, 0.20);
    transition: transform 0.6s var(--hk-ease), box-shadow 0.6s var(--hk-ease);
    position: relative;
    z-index: 1;
    -webkit-box-reflect: below 0 linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.30) 14%, transparent 30%);
}

.hk-mediathek-featured__cover:hover img {
    transform: translateY(-6px);
    box-shadow:
        0 2px 4px rgba(27, 42, 74, 0.12),
        0 18px 32px rgba(27, 42, 74, 0.16),
        0 40px 72px rgba(27, 42, 74, 0.22);
}

.hk-mediathek-featured__body {
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hk-mediathek-featured__badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hk-gold);
    margin-bottom: 1rem;
}

.hk-mediathek-featured__body h3 {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 500;
    color: var(--hk-heading);
    line-height: 1.3;
    margin: 0 0 1rem;
}

.hk-mediathek-featured__body p {
    color: var(--hk-body);
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.hk-mediathek-featured__meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--hk-gold);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: var(--hk-glass-border);  /* Spec B1 — Family 3 full border shorthand */
}

.hk-mediathek-featured__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---- ③ Downloads & Ressourcen ---- */

.hk-mediathek-downloads {
    padding: 8rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-mediathek-downloads::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(200, 169, 110, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.hk-mediathek-downloads__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
}

.hk-mediathek-dl-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(200, 169, 110, 0.12);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s var(--hk-ease), border-color 0.3s var(--hk-ease), background 0.3s var(--hk-ease);
}

.hk-mediathek-dl-card:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 169, 110, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

.hk-mediathek-dl-card__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(200, 169, 110, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hk-gold);
    margin-bottom: 1.5rem;
}

.hk-mediathek-dl-card__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hk-gold);
    background: rgba(200, 169, 110, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 1.25rem;
}

.hk-mediathek-dl-card h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--hk-white);
    margin: 0 0 0.75rem;
}

.hk-mediathek-dl-card p {
    color: rgba(247, 244, 238, 0.6);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.hk-mediathek-dl-card .hk-btn {
    margin-top: auto;
}

/* ---- ④ Videos ---- */

.hk-mediathek-videos {
    padding: 8rem 0;
    background: var(--hk-parchment);
}

.hk-mediathek-videos__header {
    text-align: center;
    margin-bottom: 3.5rem;
}

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

.hk-mediathek-videos__header-divider {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.hk-mediathek-videos__header-divider span {
    display: block;
    width: 60px;
    height: 2px;
    background: var(--hk-gold);
}

.hk-mediathek-videos__intro {
    color: var(--hk-body);
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 550px;
    margin: 0 auto;
}

.hk-mediathek-videos__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 700px;
    margin: 0 auto;
}

.hk-mediathek-video-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    background: var(--hk-white);
    border: var(--hk-glass-border);  /* Spec B1 — Family 3 full border shorthand */
    box-shadow: 0 2px 12px rgba(27, 42, 74, 0.06);
    text-decoration: none;
    transition: transform 0.3s var(--hk-ease), box-shadow 0.3s var(--hk-ease);
}

.hk-mediathek-video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(27, 42, 74, 0.12);
}

.hk-mediathek-video-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--hk-navy) 0%, #2a3d66 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hk-mediathek-video-card__placeholder {
    color: rgba(255, 255, 255, 0.15);
}

.hk-mediathek-video-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s var(--hk-ease);
}

.hk-mediathek-video-card:hover .hk-mediathek-video-card__play {
    color: var(--hk-gold);
}

.hk-mediathek-video-card__body {
    padding: 1.25rem 1.5rem;
}

.hk-mediathek-video-card__body h3 {
    font-family: var(--hk-font-heading);
    /* Spec B1.1 — keep in sync with .hk-post-card__body h3 in pages.css and .hk-aktuelles__item-body h3 in homepage.css (shared 18-22 px card-h3 floor) */
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: 600;
    color: var(--hk-heading);
    margin: 0 0 0.25rem;
}

.hk-mediathek-video-card__body span {
    font-size: 0.85rem;
    color: var(--hk-body);
    opacity: 0.7;
}

/* ---- ⑤ Ausblick ---- */

.hk-mediathek-ausblick {
    padding: 8rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-mediathek-ausblick::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(200, 169, 110, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.hk-mediathek-ausblick .hk-section-heading {
    margin-bottom: 1.5rem;
}

.hk-mediathek-ausblick__intro {
    text-align: center;
    color: rgba(247, 244, 238, 0.6);
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 550px;
    margin: 0 auto 3rem;
    position: relative;
    z-index: 1;
}

.hk-mediathek-ausblick__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.hk-mediathek-ausblick__item {
    text-align: center;
    padding: 2rem 1.5rem;
}

.hk-mediathek-ausblick__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hk-gold);
    margin: 0 auto 1.25rem;
}

.hk-mediathek-ausblick__item h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--hk-white);
    margin: 0 0 0.75rem;
}

.hk-mediathek-ausblick__item p {
    color: rgba(247, 244, 238, 0.5);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ---- ⑥ CTA ---- */

.hk-mediathek-cta {
    padding: 8rem 0;
    background: var(--hk-parchment);
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
    .hk-mediathek-downloads__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hk-mediathek-hero { min-height: 60vh; }
    .hk-mediathek-hero__content { padding: 4rem 1.5rem; }
    .hk-mediathek-hero::after { display: none; }

    .hk-mediathek-featured { padding: 5rem 0; }
    .hk-mediathek-featured__card {
        grid-template-columns: 1fr;
    }
    .hk-mediathek-featured__cover {
        padding: 2rem;
        justify-content: center;
        background: var(--hk-hero-gradient);
    }
    .hk-mediathek-featured__cover img {
        width: auto;
        height: auto;
        max-width: 260px;
        object-fit: contain;
    }
    .hk-mediathek-featured__body { padding: 2rem; }
    .hk-mediathek-featured__meta { flex-wrap: wrap; }

    .hk-mediathek-downloads { padding: 5rem 0; }
    .hk-mediathek-downloads__grid { grid-template-columns: 1fr; }

    .hk-mediathek-videos { padding: 5rem 0; }
    .hk-mediathek-videos__grid { grid-template-columns: 1fr; }

    .hk-mediathek-ausblick { padding: 5rem 0; }
    .hk-mediathek-ausblick__grid { grid-template-columns: 1fr; }

    .hk-mediathek-cta { padding: 5rem 0; }
}

/* ── FAQ Accordion ─────────────────────────────────────────────── */

.hk-faq__intro {
    font-size: 1.15rem;
    color: var(--hk-body);
    line-height: 1.8;
    margin-bottom: var(--hk-space-xl);
    max-width: 640px;
}

.hk-faq__category {
    margin-bottom: var(--hk-space-xl);
}

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

.hk-faq__heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--hk-heading);
    margin-bottom: var(--hk-space-md);
    padding-bottom: var(--hk-space-xs);
    border-bottom: 2px solid var(--hk-gold);
    letter-spacing: -0.01em;
}

.hk-faq__item {
    border-bottom: 1px solid rgba(200, 169, 110, 0.2);
    transition: background-color 0.3s var(--hk-ease);
}

.hk-faq__item:last-child {
    border-bottom: none;
}

.hk-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--hk-heading);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.2s var(--hk-ease);
    line-height: 1.5;
}

.hk-faq__item summary::-webkit-details-marker {
    display: none;
}

.hk-faq__item summary::after {
    content: '+';
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-inline-start: 1rem;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--hk-gold);
    border: 1.5px solid var(--hk-gold);
    border-radius: 50%;
    transition: all 0.3s var(--hk-ease);
}

.hk-faq__item[open] summary::after {
    content: '\2212';
    background: var(--hk-gold);
    color: #fff;
    transform: rotate(180deg);
}

.hk-faq__item summary:hover {
    color: var(--hk-gold);
}

.hk-faq__item summary:hover::after {
    background: var(--hk-gold);
    color: #fff;
}

.hk-faq__answer {
    padding: 0 0.5rem 1.5rem;
    animation: hkFaqReveal 0.3s var(--hk-ease);
}

.hk-faq__answer p {
    font-size: 1.05rem;
    color: var(--hk-body);
    line-height: 1.8;
    margin-bottom: 0.75rem;
}

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

.hk-faq__answer ul {
    padding-inline-start: 1.25rem;
    margin: 0.75rem 0;
}

.hk-faq__answer ul li {
    font-size: 1.05rem;
    color: var(--hk-body);
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.hk-faq__answer a {
    color: var(--hk-teal);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--hk-ease);
}

.hk-faq__answer a:hover {
    border-bottom-color: var(--hk-teal);
}

.hk-faq__answer strong {
    color: var(--hk-heading);
    font-weight: 600;
}

/* B2: collapse into hk-fade-in-down (style.css primitive) */
@keyframes hkFaqReveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── FAQ mobile ── */
@media (max-width: 768px) {
    .hk-faq__heading {
        font-size: 1.35rem;
    }
    .hk-faq__item summary {
        padding: 1rem 0.25rem;
        font-size: 0.95rem;
    }
    .hk-faq__item summary::after {
        width: 24px;
        height: 24px;
        font-size: 1.1rem;
    }
    .hk-faq__answer {
        padding: 0 0.25rem 1.25rem;
    }
    .hk-faq__answer p,
    .hk-faq__answer ul li {
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hk-faq__answer {
        animation: none;
    }
    .hk-faq__item summary::after {
        transition: none;
    }
}

/* ═══════════════════════════════════════════
   KOMPENDIUM PAGE
   ═══════════════════════════════════════════ */

/* ① Hero */
.hk-kompendium-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--hk-hero-gradient);
}

.hk-kompendium-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.45;
}

.hk-kompendium-hero__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(9, 15, 28, 0.4) 70%);
}

.hk-kompendium-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(200, 169, 110, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 1;
}

.hk-kompendium-hero::after {
    content: '\2726';
    position: absolute;
    inset-inline-end: -3%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 45rem;
    color: rgba(200, 169, 110, 0.025);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.hk-kompendium-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 700px;
    padding: 2rem;
}

.hk-kompendium-hero__title {
    font-family: var(--hk-font-heading);
    font-size: clamp(2.8rem, 5.5vw, 4.5rem);
    font-weight: 300;
    color: var(--hk-white);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 1.5rem 0 0;
}

.hk-kompendium-hero__divider {
    width: 70px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 2rem auto;
}

.hk-kompendium-hero__tagline {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 300;
    color: rgba(247, 244, 238, 0.75);
    letter-spacing: 0.03em;
    line-height: 1.6;
}

/* ② About (parchment) */
.hk-kompendium-about {
    padding: 8rem 0;
    background: var(--hk-parchment);
    position: relative;
    overflow: hidden;
}

.hk-kompendium-about::after {
    content: '\2726';
    position: absolute;
    inset-inline-start: -5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40rem;
    color: rgba(200, 169, 110, 0.03);
    line-height: 1;
    pointer-events: none;
}

.hk-kompendium-about__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.hk-kompendium-about__inner h2 {
    font-family: var(--hk-font-heading);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 300;
    color: var(--hk-heading);
    margin: 1.25rem 0 0;
    letter-spacing: -0.02em;
}

.hk-kompendium-about__divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: 2rem auto;
}

.hk-kompendium-about__inner p {
    color: var(--hk-body);
    font-size: 1.1rem;
    line-height: 1.9;
    max-width: 640px;
    margin: 0 auto 1.5rem;
}

.hk-kompendium-about__highlight {
    font-family: var(--hk-font-heading);
    font-size: 1.3rem !important;
    font-weight: 400;
    color: var(--hk-heading) !important;
    font-style: italic;
    border-inline-start: 3px solid var(--hk-gold);
    padding-inline-start: 1.5rem;
    text-align: start;
    margin-top: 2.5rem !important;
    max-width: 580px !important;
}

/* ③ Features (dark navy) */
.hk-kompendium-features {
    padding: 8rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-kompendium-features::after {
    content: '\2726';
    position: absolute;
    inset-inline-end: -3%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48rem;
    color: rgba(200, 169, 110, 0.02);
    line-height: 1;
    pointer-events: none;
}

.hk-kompendium-features .hk-section-heading {
    position: relative;
    z-index: 1;
    margin-bottom: 4rem;
}

.hk-kompendium-features .hk-section-heading h2 {
    font-family: var(--hk-font-heading);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    margin-top: 1rem;
}

.hk-kompendium-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.hk-kompendium-feature {
    padding: 3rem 2.5rem;
    border: 1px solid rgba(200, 169, 110, 0.2);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    text-align: center;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.hk-kompendium-feature:hover {
    border-color: rgba(200, 169, 110, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.hk-kompendium-feature__icon {
    color: var(--hk-gold);
    margin-bottom: 1.5rem;
}

.hk-kompendium-feature h3 {
    font-family: var(--hk-font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--hk-white);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.hk-kompendium-feature p {
    color: rgba(247, 244, 238, 0.65);
    font-size: 1rem;
    line-height: 1.8;
}

/* ④ Download (parchment) */
.hk-kompendium-download {
    padding: 8rem 0;
    background: var(--hk-parchment);
    position: relative;
    overflow: hidden;
}

.hk-kompendium-download__header {
    text-align: center;
    margin-bottom: 3.5rem;
}

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

.hk-kompendium-download__header-divider {
    display: flex;
    justify-content: center;
}

.hk-kompendium-download__header-divider span {
    display: block;
    width: 60px;
    height: 2px;
    background: var(--hk-gold);
}

.hk-kompendium-download__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    max-width: 1000px;
    margin: 0 auto;
    background: var(--hk-white);
    border-radius: 4px;
    border: var(--hk-glass-border);  /* Spec B1 — Family 3 full border shorthand */
    box-shadow: 0 4px 24px rgba(27, 42, 74, 0.08);
    overflow: hidden;
}

.hk-kompendium-download__cover {
    background:
        radial-gradient(ellipse 70% 55% at 50% 35%, rgba(200, 169, 110, 0.12) 0%, transparent 65%),
        var(--hk-parchment);
    padding: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.hk-kompendium-download__cover img {
    width: 98%;
    height: auto;
    max-height: 94%;
    object-fit: contain;
    display: block;
    border-radius: 3px;
    box-shadow:
        0 1px 2px rgba(27, 42, 74, 0.12),
        0 12px 24px rgba(27, 42, 74, 0.14),
        0 32px 64px rgba(27, 42, 74, 0.20);
    transition: transform 0.6s var(--hk-ease), box-shadow 0.6s var(--hk-ease);
    position: relative;
    z-index: 1;
    -webkit-box-reflect: below 0 linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.30) 14%, transparent 30%);
}

.hk-kompendium-download__cover:hover img {
    transform: translateY(-6px);
    box-shadow:
        0 2px 4px rgba(27, 42, 74, 0.12),
        0 18px 32px rgba(27, 42, 74, 0.16),
        0 40px 72px rgba(27, 42, 74, 0.22);
}

.hk-kompendium-download__body {
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hk-kompendium-download__desc {
    color: var(--hk-body);
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.hk-kompendium-download__meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--hk-gold);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: var(--hk-glass-border);  /* Spec B1 — Family 3 full border shorthand */
}

.hk-kompendium-download__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.hk-kompendium-download__buttons .hk-btn svg {
    margin-inline-end: 0.4rem;
    vertical-align: -2px;
}

.hk-kompendium-download__legal {
    font-size: 0.85rem;
    color: var(--hk-body);
    line-height: 1.7;
    background: rgba(27, 42, 74, 0.05);
    border-left: 3px solid var(--hk-gold);
    padding: 1rem 1.25rem;
    border-radius: 0 6px 6px 0;
    margin-top: 1.5rem;
}

.hk-kompendium-download__legal a {
    color: var(--hk-teal);
    text-decoration: underline;
}

/* ⑤ CTA (dark navy) */
.hk-kompendium-cta {
    padding: 6rem 0;
    background: var(--hk-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hk-kompendium-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(200, 169, 110, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .hk-kompendium-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hk-kompendium-hero {
        min-height: 70vh;
    }

    .hk-kompendium-about,
    .hk-kompendium-features,
    .hk-kompendium-download {
        padding: 5rem 0;
    }

    .hk-kompendium-features__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hk-kompendium-feature {
        padding: 2rem 1.5rem;
    }

    .hk-kompendium-download__card {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hk-kompendium-download__cover {
        padding: 2rem;
        min-height: auto;
        justify-content: center;
        background: var(--hk-hero-gradient);
    }

    .hk-kompendium-download__cover img {
        width: auto;
        height: auto;
        max-width: 260px;
        object-fit: contain;
    }

    .hk-kompendium-download__body {
        padding: 2rem;
    }

    .hk-kompendium-download__meta {
        flex-wrap: wrap;
    }

    .hk-kompendium-download__buttons {
        flex-direction: column;
    }

    .hk-kompendium-hero::after,
    .hk-kompendium-about::after,
    .hk-kompendium-features::after {
        display: none;
    }
}

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


:root[data-theme="dark"] .hk-page-content {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

:root[data-theme="dark"] .hk-page-content blockquote {
    background: rgba(14, 23, 38, 0.5);
}

:root[data-theme="dark"] .hk-leitbild__hero-title-glass,
:root[data-theme="dark"] .hk-perspektive__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-team-card {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .hk-team-card:hover {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.15);
}

:root[data-theme="dark"] .hk-event-card {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* WPForms dark mode */
:root[data-theme="dark"] .wpforms-container input[type="text"],
:root[data-theme="dark"] .wpforms-container input[type="email"],
:root[data-theme="dark"] .wpforms-container textarea,
:root[data-theme="dark"] .wpforms-container select {
    background: rgba(14, 23, 38, 0.6);
    border-color: rgba(200, 169, 110, 0.2);
    color: var(--hk-body);
}

/* Hadith/quote/motto glass cards → dark glass */
:root[data-theme="dark"] .hk-wissen-hadith__inner,
:root[data-theme="dark"] .hk-ratschlag-hadith__inner,
:root[data-theme="dark"] .hk-sakina-motto__card {
    background: var(--hk-glass);
    border-color: rgba(91, 138, 154, 0.15);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

/* Hardcoded white glass elements → dark glass */
:root[data-theme="dark"] .hk-post-card__badge {
    background: rgba(14, 23, 38, 0.85);
}

:root[data-theme="dark"] .hk-category-filter a {
    background: rgba(14, 23, 38, 0.6);
}

/* White-background sections → dark parchment */
:root[data-theme="dark"] .hk-sakina-approach,
:root[data-theme="dark"] .hk-sakina-audience,
:root[data-theme="dark"] .hk-ueberhakim-themen,
:root[data-theme="dark"] .hk-leitbild-why,
:root[data-theme="dark"] .hk-historie-konsequenz {
    background: var(--hk-parchment);
}

/* White-background cards/containers → slightly lighter dark */
:root[data-theme="dark"] .hk-contact-form__card,
:root[data-theme="dark"] .hk-seminare-archive__card,
:root[data-theme="dark"] .hk-ueberhakim-verantwortung__card,
:root[data-theme="dark"] .hk-leitbild-mission__card,
:root[data-theme="dark"] .hk-campus-identity__inner,
:root[data-theme="dark"] .hk-logo-showcase__frame,
:root[data-theme="dark"] .hk-logo-meaning__frame,
:root[data-theme="dark"] .hk-wissen-pillar,
:root[data-theme="dark"] .hk-mediathek-featured__card,
:root[data-theme="dark"] .hk-kompendium-download__card {
    background: var(--hk-parchment-dark);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

/* Card hover shadows for dark mode */
:root[data-theme="dark"] .hk-seminare-archive__card:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

/* No-JS fallback */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hk-page-content {
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);
    }
    :root:not([data-theme="light"]) .wpforms-container input[type="text"],
    :root:not([data-theme="light"]) .wpforms-container input[type="email"],
    :root:not([data-theme="light"]) .wpforms-container textarea,
    :root:not([data-theme="light"]) .wpforms-container select {
        background: rgba(14, 23, 38, 0.6);
        border-color: rgba(200, 169, 110, 0.2);
        color: var(--hk-body);
    }
    :root:not([data-theme="light"]) .hk-sakina-approach,
    :root:not([data-theme="light"]) .hk-sakina-audience,
    :root:not([data-theme="light"]) .hk-ueberhakim-themen,
    :root:not([data-theme="light"]) .hk-leitbild-why,
    :root:not([data-theme="light"]) .hk-historie-konsequenz {
        background: var(--hk-parchment);
    }
    :root:not([data-theme="light"]) .hk-contact-form__card,
    :root:not([data-theme="light"]) .hk-seminare-archive__card,
    :root:not([data-theme="light"]) .hk-ueberhakim-verantwortung__card,
    :root:not([data-theme="light"]) .hk-leitbild-mission__card,
    :root:not([data-theme="light"]) .hk-campus-identity__inner,
    :root:not([data-theme="light"]) .hk-logo-showcase__frame,
    :root:not([data-theme="light"]) .hk-logo-meaning__frame,
    :root:not([data-theme="light"]) .hk-wissen-pillar,
    :root:not([data-theme="light"]) .hk-mediathek-featured__card,
    :root:not([data-theme="light"]) .hk-kompendium-download__card {
        background: var(--hk-parchment-dark);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    }
    :root:not([data-theme="light"]) .hk-wissen-hadith__inner,
    :root:not([data-theme="light"]) .hk-ratschlag-hadith__inner,
    :root:not([data-theme="light"]) .hk-sakina-motto__card {
        background: var(--hk-glass);
        border-color: rgba(91, 138, 154, 0.15);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    }
}

/* ==========================================================================
   Wissensarchiv
   ========================================================================== */

.hk-wissensarchiv {
    padding: var(--hk-space-xl) 0 var(--hk-section-padding);
}

.hk-wissensarchiv__filters {
    padding: var(--hk-space-md);
    margin-bottom: var(--hk-space-lg);
    border-radius: var(--hk-radius);
}

.hk-wissensarchiv__search-form {
    display: flex;
    gap: var(--hk-space-sm);
    align-items: flex-end;
    flex-wrap: wrap;
}

.hk-wissensarchiv__search-form .hk-form-group {
    flex: 1;
    min-width: 160px;
}

.hk-wissensarchiv__search-form input,
.hk-wissensarchiv__search-form select {
    width: 100%;
    padding: 10px 14px;
    border: var(--hk-glass-border);  /* Spec B1 — Family 3 full border shorthand */
    border-radius: 8px;
    font-family: var(--hk-font-body);
    font-size: 15px;
    color: var(--hk-body);              /* was var(--hk-heading) — switch to body for contrast against white bg */
    background: var(--hk-white);
    -webkit-text-fill-color: var(--hk-body);  /* Safari override against any inherited fill */
}

.hk-wissensarchiv__search-form input::placeholder {
    color: var(--hk-body);
    opacity: 0.6;
}

.hk-wissensarchiv__search-form input:focus-visible,
.hk-wissensarchiv__search-form select: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-wissensarchiv__count {
    font-size: 14px;
    color: var(--hk-body);
    margin-bottom: var(--hk-space-md);
}

.hk-wissensarchiv__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--hk-space-md);
}

.hk-resource-card {
    padding: var(--hk-space-md);
    border-radius: var(--hk-radius);
    display: flex;
    flex-direction: column;
    border-top: 3px solid var(--hk-gold);
    transition: transform var(--hk-transition), box-shadow var(--hk-transition);
}

.hk-resource-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--hk-shadow-lg);
}

.hk-resource-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--hk-space-xs);
}

.hk-resource-card__type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hk-teal);
}

.hk-resource-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.hk-resource-card__badge--members {
    background: rgba(200, 169, 110, 0.1);
    color: var(--hk-gold);
}

.hk-resource-card__badge--members svg {
    width: 14px;
    height: 14px;
}

.hk-resource-card__title {
    font-family: var(--hk-font-display);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: var(--hk-space-xs);
}

.hk-resource-card__title a {
    color: var(--hk-heading);
    text-decoration: none;
}

.hk-resource-card__title a:hover {
    color: var(--hk-gold);
}

.hk-resource-card__excerpt {
    font-size: 14px;
    color: var(--hk-body);
    line-height: 1.6;
    flex: 1;
}

.hk-resource-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--hk-space-sm);
    padding-top: var(--hk-space-xs);
    border-top: var(--hk-glass-border);  /* Spec B1 — Family 3 full border shorthand */
}

.hk-resource-card__date {
    font-size: 13px;
    color: var(--hk-body);
    opacity: 0.7;
}

.hk-wissensarchiv__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--hk-space-xl);
    border-radius: var(--hk-radius);
}

.hk-wissensarchiv__pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: var(--hk-space-xl);
}

.hk-wissensarchiv__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hk-body);
    text-decoration: none;
    transition: all var(--hk-transition);
}

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

.hk-wissensarchiv__page--active {
    background: var(--hk-gold);
    color: var(--hk-white);
}

@media (max-width: 768px) {
    .hk-wissensarchiv__search-form {
        flex-direction: column;
    }

    .hk-wissensarchiv__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Newsletter confirmation / thanks / unsubscribe pages
   Rendered by hakim_handle_newsletter_actions in inc/newsletter.php — not
   regular WP page templates. Class hierarchy: .hk-nl-page > .hk-container >
   .hk-nl-card. Used by the confirm-click step, the post-confirm celebration,
   and the unsubscribe ack.
   ========================================================================== */
.hk-nl-page {
    padding: 5rem 0 6rem;
    min-height: 60vh;
    background: var(--hk-parchment);
}

.hk-nl-card {
    max-width: 600px;
    margin: 0 auto;
    padding: 3.5rem 3rem;
    background: #fff;
    border: 1px solid rgba(200, 169, 110, 0.28);
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(27, 42, 74, 0.06);
    position: relative;
}
.hk-nl-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--hk-gold-gradient, linear-gradient(90deg, var(--hk-gold), var(--hk-gold-light), var(--hk-gold)));
    border-radius: 14px 14px 0 0;
}

.hk-nl-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    background: rgba(200, 169, 110, 0.16);
    color: var(--hk-gold);
}
.hk-nl-card__icon--check {
    background: rgba(40, 167, 69, 0.14);
    color: #198754;
}

.hk-nl-card__title {
    font-family: var(--hk-font-heading);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 400;
    color: var(--hk-navy);
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.hk-nl-card__lead {
    font-size: 16px;
    line-height: 1.7;
    color: var(--hk-body);
    margin: 0 auto 1.4rem;
    max-width: 460px;
}

.hk-nl-card__meta {
    font-size: 13px;
    color: rgba(74, 85, 104, 0.7);
    margin: 0 0 1.5rem;
}
.hk-nl-card__meta strong { color: var(--hk-navy); font-weight: 500; }

.hk-nl-card__magnet {
    margin: 1.4rem auto;
    padding: 14px 18px;
    background: rgba(200, 169, 110, 0.1);
    border-left: 3px solid var(--hk-gold);
    color: var(--hk-body);
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
    border-radius: 0 8px 8px 0;
    max-width: 460px;
}
.hk-nl-card__magnet strong { color: var(--hk-navy); }

.hk-nl-card__form {
    margin: 1.5rem 0 0;
}

/* Magnet box on the thanks page (after confirmation) — prominent CTA */
.hk-nl-card__magnet-box {
    margin: 2rem auto 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(200, 169, 110, 0.08), rgba(200, 169, 110, 0.14));
    border: 1px solid rgba(200, 169, 110, 0.3);
    border-radius: 12px;
    max-width: 460px;
}
.hk-nl-card__magnet-intro {
    margin: 0 0 0.85rem;
    font-family: var(--hk-font-heading);
    font-size: 18px;
    font-weight: 500;
    color: var(--hk-navy);
}
.hk-nl-card__magnet-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 22px !important;
}
.hk-nl-card__magnet-btn svg { flex-shrink: 0; }

/* "Schon gelesen?" next-content prompt */
.hk-nl-card__next {
    margin: 1.8rem auto 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(200, 169, 110, 0.22);
    max-width: 460px;
}
.hk-nl-card__next-intro {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--hk-gold);
    font-weight: 500;
    margin: 0 0 0.6rem;
}
.hk-nl-card__next-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hk-font-heading);
    font-size: 18px;
    color: var(--hk-navy);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s var(--hk-ease, ease);
}
.hk-nl-card__next-link:hover { color: var(--hk-gold); }
.hk-nl-card__next-link svg { transition: transform 0.2s var(--hk-ease, ease); }
.hk-nl-card__next-link:hover svg { transform: translateX(3px); }

.hk-nl-card__return {
    margin: 1.8rem 0 0;
    font-size: 13px;
}
.hk-nl-card__return a {
    color: var(--hk-teal);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .hk-nl-page { padding: 3rem 1rem 4rem; }
    .hk-nl-card { padding: 2.5rem 1.5rem; }
    .hk-nl-card__icon { width: 60px; height: 60px; }
}