/*
Theme Name: Hampelkammer Child
Theme URI:
Description: Child Theme für hampelkammer.de – Kunst-Kollektiv, Webshop & Kurs-Buchungen
Author: Hampelkammer Kollektiv
Template: blocksy
Version: 1.0.0
*/

/* ============================================================
   MARKENFARBEN – HAMPELKAMMER
   Nutzung in Cursor-Prompts: var(--hk-pink), var(--hk-gold) etc.
   ============================================================ */

:root {

  /* Primärfarben */
  --hk-pink:        #BD0993;   /* Magenta/Pink – Hauptfarbe */
  --hk-gold:        #F8B418;   /* Gold/Gelb – Akzentfarbe */

  /* Abgeleitete Töne (aus Logo-Gradient) */
  --hk-pink-dark:   #8C0670;   /* Dunkleres Pink – Hover, Schatten */
  --hk-pink-light:  #E040B0;   /* Helleres Pink – sanfte Flächen */
  --hk-gold-dark:   #D4940E;   /* Dunkleres Gold – Hover */
  --hk-gold-light:  #FBCC5A;   /* Helles Gold – Highlights */

  /* Gradient (wie im Logo) */
  --hk-gradient:    linear-gradient(135deg, #F8B418 0%, #BD0993 100%);
  --hk-gradient-v:  linear-gradient(180deg, #F8B418 0%, #BD0993 100%);

  /* Neutrale Töne */
  --hk-black:       #1A1A1A;   /* Fast-Schwarz – Fließtext */
  --hk-dark:        #2D2D2D;   /* Dunkelgrau – Überschriften */
  --hk-gray:        #6B6B6B;   /* Mittelgrau – Sekundärtext */
  --hk-gray-light:  #F2F0ED;   /* Hellgrau – Hintergrundflächen */
  --hk-white:       #FFFFFF;   /* Weiß */

  /* Semantische Farben */
  --hk-success:     #2D9E5F;   /* Grün – Bestätigung, Buchung erfolgreich */
  --hk-error:       #D93025;   /* Rot – Fehler */
  --hk-warning:     #F59E0B;   /* Orange – Hinweise */

  /* ============================================================
     TYPOGRAFIE
     ============================================================ */

  --hk-font-heading: 'Rubik', sans-serif;         /* Überschriften */
  --hk-font-body:    'DM Sans', sans-serif;       /* Fließtext */
  --hk-font-hero:    'Rubik Moonrocks', cursive;  /* Hero-Headlines, Pebble-Effekt */
  --hk-font-mono:    'Courier New', monospace;

  /* Schriftgrößen */
  --hk-text-xs:     0.75rem;    /*  12px */
  --hk-text-sm:     0.875rem;   /*  14px */
  --hk-text-base:   1rem;       /*  16px */
  --hk-text-lg:     1.125rem;   /*  18px */
  --hk-text-xl:     1.25rem;    /*  20px */
  --hk-text-2xl:    1.5rem;     /*  24px */
  --hk-text-3xl:    1.875rem;   /*  30px */
  --hk-text-4xl:    2.25rem;    /*  36px */
  --hk-text-5xl:    3rem;       /*  48px */
  --hk-text-hero:   4rem;       /*  64px – Hero Headlines */

  /* Zeilenhöhen */
  --hk-leading-tight:  1.2;
  --hk-leading-normal: 1.6;
  --hk-leading-loose:  1.8;

  /* ============================================================
     ABSTÄNDE & LAYOUT
     ============================================================ */

  --hk-space-xs:    0.5rem;    /*   8px */
  --hk-space-sm:    1rem;      /*  16px */
  --hk-space-md:    1.5rem;    /*  24px */
  --hk-space-lg:    2.5rem;    /*  40px */
  --hk-space-xl:    4rem;      /*  64px */
  --hk-space-2xl:   6rem;      /*  96px */
  --hk-space-3xl:   8rem;      /* 128px */

  /* Section-Abstände (für Elementor-Sections) */
  --hk-section-padding-y: 5rem;
  --hk-section-padding-x: 1.5rem;

  /* Max-Breiten */
  --hk-max-width:       1200px;
  --hk-max-width-text:   720px;   /* Für Textblöcke – bessere Lesbarkeit */
  --hk-max-width-narrow: 560px;

  /* ============================================================
     FORMEN & EFFEKTE
     ============================================================ */

  --hk-radius-sm:   4px;
  --hk-radius-md:   8px;
  --hk-radius-lg:   16px;
  --hk-radius-xl:   24px;
  --hk-radius-full: 9999px;   /* Pills & runde Buttons */

  --hk-shadow-sm:   0 1px 3px rgba(0,0,0,0.12);
  --hk-shadow-md:   0 4px 16px rgba(0,0,0,0.10);
  --hk-shadow-lg:   0 8px 32px rgba(0,0,0,0.12);
  --hk-shadow-pink: 0 4px 20px rgba(189, 9, 147, 0.25);
  --hk-shadow-gold: 0 4px 20px rgba(248, 180, 24, 0.30);

  /* Transitions */
  --hk-transition:      all 0.2s ease;
  --hk-transition-slow: all 0.4s ease;

  /* Aliases – Snippet-Kompatibilität */
  --hk-magenta:      var(--hk-pink);
  --hk-yellow:       var(--hk-gold);
  --hk-font-display: var(--hk-font-hero);
}


/* ============================================================
   RUBIK FONT – @font-face (lokal gehostet, kein Google-Request)
   Benötigte Schnitte: Regular (400), Medium (500), Bold (700)
   ============================================================ */

@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   DM SANS – @font-face (lokal gehostet, kein Google-Request)
   Variable Font: eine Datei deckt 400/500/700 ab
   ============================================================ */

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Regular-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Regular.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext italic */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin italic */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin-ext (DE-Umlaute + Sonderzeichen) */
@font-face {
  font-family: 'Rubik Moonrocks';
  src: url('fonts/rubik-moonrocks-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rubik Moonrocks';
  src: url('fonts/rubik-moonrocks-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   GLOBALE BASIS-STYLES
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--hk-font-body);  /* DM Sans */
  font-size: var(--hk-text-base);
  color: var(--hk-black);
  background-color: var(--hk-white);
  line-height: var(--hk-leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hk-font-heading);
  color: var(--hk-dark);
  line-height: var(--hk-leading-tight);
  font-weight: 700;
  margin-top: 0;
}

/* Rubik Moonrocks hat nur weight 400 — Browser-Bold-Synthese verhindern */
.hk-hero__title,
.hk-section-title,
.hk-label,
.hk-nav__brand,
.hk-about-hero__title,
.hk-contact-hero__title,
.hk-contact__title,
.hk-ws-hero__title,
.hk-ws-feature__title,
.hk-ws-step__title,
.hk-ws-card__title,
.hk-shop-soon__title,
.hk-service-item__title,
.hk-cta-card__title,
.hk-event-card__title,
.hk-team__name,
.hk-footer__brand,
.hk-site-footer__brand,
.hk-about-closing__text,
.hk-footer__brand {
  font-weight: 400;
}

h1 { font-size: var(--hk-text-4xl); }
h2 { font-size: var(--hk-text-3xl); }
h3 { font-size: var(--hk-text-2xl); }
h4 { font-size: var(--hk-text-xl); }
h5 { font-size: var(--hk-text-lg); }
h6 { font-size: var(--hk-text-base); }

p {
  margin-top: 0;
  margin-bottom: var(--hk-space-sm);
  line-height: var(--hk-leading-loose);
}

a {
  color: var(--hk-pink);
  text-decoration: none;
  transition: var(--hk-transition);
}

a:hover {
  color: var(--hk-pink-dark);
}

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


/* ============================================================
   UTILITY-KLASSEN
   Nutzung direkt in Elementor HTML-Widgets & Cursor-Prompts
   ============================================================ */

/* Gradient-Text (für Hero-Headlines) */
.hk-text-gradient {
  background: var(--hk-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient-Hintergrund */
.hk-bg-gradient {
  background: var(--hk-gradient);
  color: var(--hk-white);
}

/* Buttons */
.hk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1.75rem;
  border-radius: var(--hk-radius-full);
  font-family: var(--hk-font-body);
  font-size: var(--hk-text-base);
  font-weight: 500;
  cursor: pointer;
  transition: var(--hk-transition);
  border: 2px solid transparent;
  text-decoration: none;
}

.hk-btn-primary {
  background: var(--hk-pink);
  color: var(--hk-white);
  border-color: var(--hk-pink);
}

.hk-btn-primary:hover {
  background: var(--hk-pink-dark);
  border-color: var(--hk-pink-dark);
  color: var(--hk-white);
  box-shadow: var(--hk-shadow-pink);
  transform: translateY(-1px);
}

.hk-btn-secondary {
  background: var(--hk-gold);
  color: var(--hk-dark);
  border-color: var(--hk-gold);
}

.hk-btn-secondary:hover {
  background: var(--hk-gold-dark);
  border-color: var(--hk-gold-dark);
  box-shadow: var(--hk-shadow-gold);
  transform: translateY(-1px);
}

.hk-btn-outline {
  background: transparent;
  color: var(--hk-pink);
  border-color: var(--hk-pink);
}

.hk-btn-outline:hover {
  background: var(--hk-pink);
  color: var(--hk-white);
}

/* Abschnitt-Container */
.hk-section {
  padding: var(--hk-section-padding-y) var(--hk-section-padding-x);
}

.hk-container {
  max-width: var(--hk-max-width);
  margin: 0 auto;
  padding: 0 var(--hk-space-sm);
}

/* Karten */
.hk-card {
  background: var(--hk-white);
  border-radius: var(--hk-radius-lg);
  box-shadow: var(--hk-shadow-md);
  padding: var(--hk-space-md);
  transition: var(--hk-transition);
}

.hk-card:hover {
  box-shadow: var(--hk-shadow-lg);
  transform: translateY(-2px);
}

/* Badge / Tag */
.hk-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--hk-radius-full);
  font-size: var(--hk-text-xs);
  font-weight: 500;
  background: var(--hk-pink-light);
  color: var(--hk-pink-dark);
}

.hk-badge-gold {
  background: var(--hk-gold-light);
  color: var(--hk-gold-dark);
}

/* Trennlinie mit Gradient */
.hk-divider {
  height: 2px;
  background: var(--hk-gradient);
  border: none;
  border-radius: var(--hk-radius-full);
  margin: var(--hk-space-lg) 0;
}

/* Hintergrund-Flächen */
.hk-bg-light  { background-color: var(--hk-gray-light); }
.hk-bg-pink   { background-color: var(--hk-pink); color: var(--hk-white); }
.hk-bg-gold   { background-color: var(--hk-gold); color: var(--hk-dark); }
.hk-bg-dark   { background-color: var(--hk-dark); color: var(--hk-white); }


/* ============================================================
   WEBSHOP – BASIS-STYLES (WooCommerce)
   ============================================================ */

/* Produkt-Grid */
.woocommerce ul.products li.product .price {
  color: var(--hk-pink);
  font-weight: 700;
}

/* Add-to-Cart Button */
.woocommerce .button,
.woocommerce button.button {
  background: var(--hk-pink);
  color: var(--hk-white);
  border-radius: var(--hk-radius-full);
  font-family: var(--hk-font-body);
  font-weight: 500;
  transition: var(--hk-transition);
  border: none;
  padding: 0.65rem 1.5rem;
}

.woocommerce .button:hover,
.woocommerce button.button:hover {
  background: var(--hk-pink-dark);
  color: var(--hk-white);
}

/* Sale-Badge */
.woocommerce span.onsale {
  background: var(--hk-gold);
  color: var(--hk-dark);
  border-radius: var(--hk-radius-full);
  font-weight: 700;
}


/* ============================================================
   RESPONSIVE – MOBILE FIRST
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --hk-text-hero: 2.5rem;
    --hk-text-4xl: 1.75rem;
    --hk-text-3xl: 1.5rem;
    --hk-section-padding-y: 3rem;
  }
}

@media (max-width: 480px) {
  :root {
    --hk-text-hero: 2rem;
    --hk-section-padding-y: 2rem;
  }
}


/* ============================================================
   HOMEPAGE – [hk_homepage] SHORTCODE STYLES
   Dunkles Design, scoped unter .hk-page
   ============================================================ */

/* Dark-Theme-Variablen nur innerhalb .hk-page überschreiben */
.hk-page {
    --hk-dark: #0f0c14;
    --hk-gray: #1e1826;
}

.hk-page * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hk-page {
    font-family: var(--hk-font-body);
    background: var(--hk-dark);
    color: var(--hk-white);
    overflow-x: hidden;
}

/* Buttons – Homepage-Variante (überschreibt globale .hk-btn für dark context) */
.hk-page .hk-btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    border-radius: 100px;
    font-family: var(--hk-font-body);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
}
.hk-page .hk-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(189,9,147,0.45);
}
.hk-page .hk-btn-primary {
    background: linear-gradient(135deg, var(--hk-magenta), var(--hk-yellow));
    color: var(--hk-white);
}
.hk-page .hk-btn-outline {
    background: transparent;
    border: 2px solid var(--hk-white);
    color: var(--hk-white);
}
.hk-page .hk-btn-outline:hover {
    background: rgba(255,255,255,0.1);
    box-shadow: 0 8px 24px rgba(255,255,255,0.15);
}

/* Section Label */
.hk-label {
    font-family: var(--hk-font-display);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hk-yellow);
    margin-bottom: 0.6rem;
    display: block;
}

/* Section Title */
.hk-section-title {
    font-family: var(--hk-font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.1;
    color: var(--hk-white);
    margin-bottom: 1.2rem;
}

/* ── HERO ── */
.hk-hero {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hk-hero__video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hk-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}
.hk-hero__video--mobile { display: none; }
@media (max-width: 768px) {
    .hk-hero__video--desktop { display: none; }
    .hk-hero__video--mobile  { display: block; }
}
.hk-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(189,9,147,0.55) 0%,
        rgba(248,180,24,0.30) 50%,
        rgba(15,12,20,0.85) 100%
    );
    z-index: 1;
}
.hk-hero__blobs {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}
.hk-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: hk-float 8s ease-in-out infinite alternate;
}
.hk-blob-1 { width:420px; height:420px; background:var(--hk-magenta); top:-100px; left:-100px; animation-duration:9s; }
.hk-blob-2 { width:350px; height:350px; background:var(--hk-yellow);  bottom:-80px; right:-80px; animation-duration:11s; animation-delay:-3s; }
.hk-blob-3 { width:200px; height:200px; background:var(--hk-magenta); top:50%; right:15%; animation-duration:7s; animation-delay:-1.5s; }
@keyframes hk-float {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(30px,20px) scale(1.08); }
}
.hk-hero__content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 1.5rem;
    animation: hk-fadeup 1s ease both;
}
@keyframes hk-fadeup {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}
.hk-hero__logo {
    width: clamp(120px, 20vw, 200px);
    height: auto;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 30px rgba(248,180,24,0.5));
}
.hk-hero__title {
    font-family: var(--hk-font-display);
    font-size: clamp(2.8rem, 9vw, 6.5rem);
    line-height: 1;
    background: linear-gradient(135deg, #fff 30%, var(--hk-yellow) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}
.hk-hero__sub {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 300;
    color: rgba(255,255,255,0.82);
    margin-bottom: 2.5rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.hk-hero__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.hk-hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.6;
    animation: hk-fadeup 1.5s ease 0.6s both;
}
.hk-hero__scroll span { font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--hk-white); }
.hk-hero__scroll-line {
    width: 1.5px;
    height: 40px;
    background: linear-gradient(to bottom, var(--hk-yellow), transparent);
    animation: hk-scrollpulse 2s ease infinite;
}
@keyframes hk-scrollpulse {
    0%,100% { opacity:0.6; transform:scaleY(1); }
    50%      { opacity:1;   transform:scaleY(1.15); }
}
@media (max-width: 768px) {
    .hk-hero__scroll {
        bottom: 5rem;
        animation: none;
        opacity: 0.55;
    }
}

/* ── ÜBER UNS ── */
.hk-about {
    padding: clamp(4rem,8vw,8rem) clamp(1.5rem,6vw,5rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .hk-about { grid-template-columns: 1fr; gap: 2.5rem; }
}
.hk-about__image-wrap { position: relative; }
.hk-about__img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:24px; display:block; }
.hk-about__img-placeholder {
    width:100%; aspect-ratio:4/5; border-radius:24px;
    background: linear-gradient(135deg, var(--hk-magenta) 0%, var(--hk-yellow) 100%);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--hk-font-display); font-size:1.2rem;
    color:rgba(255,255,255,0.7); letter-spacing:0.05em;
}
.hk-about__image-wrap::before {
    content:""; position:absolute; inset:-12px; border-radius:32px;
    background: linear-gradient(135deg, var(--hk-magenta), var(--hk-yellow));
    z-index:-1; opacity:0.35;
}
.hk-about__body { font-size:1.05rem; line-height:1.8; color:rgba(255,255,255,0.75); margin-bottom:2rem; }

/* ── EVENTS ── */
.hk-events {
    background: var(--hk-gray);
    padding: clamp(4rem,8vw,8rem) clamp(1.5rem,6vw,5rem);
}
.hk-events__inner { max-width:1200px; margin:0 auto; }
.hk-events__header {
    display:flex; align-items:flex-end; justify-content:space-between;
    flex-wrap:wrap; gap:1rem; margin-bottom:3rem;
}
.hk-events__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.hk-event-card {
    background:var(--hk-dark); border-radius:20px; overflow:hidden;
    transition:transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration:none; color:inherit; display:block;
}
.hk-event-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(189,9,147,0.3); }
.hk-event-card__thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.hk-event-card__thumb-placeholder {
    width:100%; aspect-ratio:16/9;
    background:linear-gradient(135deg,rgba(189,9,147,0.6),rgba(248,180,24,0.6));
    display:flex; align-items:center; justify-content:center; font-size:2rem;
}
.hk-event-card__body { padding:1.4rem 1.5rem 1.8rem; }
.hk-event-card__date { font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--hk-yellow); margin-bottom:0.5rem; font-weight:500; }
.hk-event-card__title { font-family:var(--hk-font-display); font-size:1.25rem; line-height:1.3; margin-bottom:0.6rem; color:var(--hk-white); }
.hk-event-card__desc { font-size:0.9rem; color:rgba(255,255,255,0.6); line-height:1.6; }

/* ── KONTAKT TEASER ── */
.hk-contact {
    padding: clamp(5rem,10vw,10rem) clamp(1.5rem,6vw,5rem);
    text-align:center; position:relative; overflow:hidden;
}
.hk-contact::before {
    content:""; position:absolute; width:600px; height:600px;
    background:radial-gradient(circle,rgba(189,9,147,0.25),transparent 70%);
    top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none;
}
.hk-contact__inner { position:relative; max-width:640px; margin:0 auto; }
.hk-contact__title {
    font-family:var(--hk-font-display); font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.1; margin-bottom:1.2rem;
    background:linear-gradient(135deg,#fff 30%,var(--hk-magenta) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hk-contact__sub { font-size:1.05rem; color:rgba(255,255,255,0.7); line-height:1.7; margin-bottom:2.5rem; }
.hk-contact__actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── FOOTER MINI ── */
.hk-footer {
    background:var(--hk-gray); border-top:1px solid rgba(255,255,255,0.06);
    padding:2rem clamp(1.5rem,6vw,5rem);
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.hk-footer__brand {
    font-family:var(--hk-font-display); font-size:1.1rem;
    background:linear-gradient(135deg,var(--hk-magenta),var(--hk-yellow));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hk-footer__links { display:flex; gap:1.5rem; list-style:none; }
.hk-footer__links a { color:rgba(255,255,255,0.5); text-decoration:none; font-size:0.85rem; transition:color 0.2s; }
.hk-footer__links a:hover { color:var(--hk-yellow); }

/* ── SCROLL REVEAL ── */
.hk-reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
.hk-reveal.hk-visible { opacity:1; transform:translateY(0); }
.hk-reveal-delay-1 { transition-delay:0.1s; }
.hk-reveal-delay-2 { transition-delay:0.2s; }
.hk-reveal-delay-3 { transition-delay:0.3s; }

/* ── SERVICES – Was wir machen ── */
.hk-services {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f0c14 0%, #1a0d1e 50%, #0c1020 100%);
    padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 6vw, 5rem);
}
.hk-services::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(189,9,147,0.18), transparent 55%),
        radial-gradient(ellipse at 80% 50%, rgba(248,180,24,0.12), transparent 55%);
    pointer-events: none;
}
.hk-services__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.hk-services__header {
    text-align: center;
    margin-bottom: 4rem;
}
.hk-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
@media (max-width: 768px) {
    .hk-services__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
.hk-service-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.hk-service-item:hover {
    border-color: rgba(189,9,147,0.4);
    transform: translateY(-4px);
}
.hk-service-item__icon {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 1.2rem;
}
.hk-service-item__title {
    font-family: var(--hk-font-display);
    font-size: 1.6rem;
    color: var(--hk-white);
    margin-bottom: 1rem;
    line-height: 1.2;
}
.hk-service-item__body {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.68);
}

/* ── WORKSHOPS & SHOP CARDS ── */
.hk-cta-section {
    background: #0f0c14;
    padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 6vw, 5rem);
}
.hk-cta-section__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.hk-cta-section__header {
    margin-bottom: 3rem;
}
.hk-cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .hk-cta-grid { grid-template-columns: 1fr; }
}
.hk-cta-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.hk-cta-card:hover {
    border-color: rgba(189,9,147,0.4);
    transform: translateY(-4px);
}
.hk-cta-card__emoji {
    font-size: 2.2rem;
    margin-bottom: 1.2rem;
}
.hk-cta-card__title {
    font-family: var(--hk-font-display);
    font-size: 1.6rem;
    color: var(--hk-white);
    margin-bottom: 0.8rem;
    line-height: 1.2;
}
.hk-cta-card__desc {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.68);
    flex: 1;
    margin-bottom: 1.5rem;
}
.hk-cta-card__btn {
    align-self: flex-start;
    font-size: 0.95rem;
    padding: 0.65rem 1.5rem;
}
.hk-cta-section__closing {
    text-align: center;
    margin-top: 3.5rem;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.5);
    font-style: italic;
}

/* ============================================================
   HEADER
   ============================================================ */

/* Blocksy Header komplett ausgeblendet – Child Theme nutzt hk-nav in header.php */
.ct-header { display: none !important; }

/* ── Custom Nav (Homepage) ── */
.hk-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    /* Alle Seiten: standardmäßig solid */
    background: rgba(15, 12, 20, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 24px rgba(0,0,0,0.4);
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

/* Hero-Buttons */
.hk-hero .hk-btn {
    padding: 0.7rem 1.8rem;
    font-size: 0.95rem;
    font-family: var(--hk-font-body);
    display: inline-block;
    border-radius: 100px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.hk-hero .hk-btn:hover {
    transform: translateY(-2px);
}
.hk-hero .hk-btn-primary {
    background: linear-gradient(135deg, var(--hk-magenta), var(--hk-yellow));
    color: var(--hk-white);
    border: none;
    box-shadow: 0 4px 20px rgba(189,9,147,0.35);
}
.hk-hero .hk-btn-primary:hover {
    box-shadow: 0 8px 28px rgba(189,9,147,0.5);
    color: var(--hk-white);
}
.hk-hero .hk-btn-outline {
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.5);
    color: var(--hk-white);
    backdrop-filter: blur(4px);
}
.hk-hero .hk-btn-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.8);
    color: var(--hk-white);
    box-shadow: none;
}
.hk-hero__actions {
    align-items: center;
}

/* Startseite: transparent über Hero */
body.page:has(.hk-page) .hk-nav {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Nach dem Hero: wieder solid (via JS) */
.hk-nav--solid {
    background: rgba(15, 12, 20, 0.95) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 2px 24px rgba(0,0,0,0.4) !important;
}
.hk-nav--solid::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,0.07);
}

.hk-nav__brand {
    font-family: var(--hk-font-display);
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--hk-gold), var(--hk-magenta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    flex-shrink: 0;
}

/* Menu wandert in die rechte Gruppe */
.hk-nav .menu {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0; padding: 0;
    order: 1;
}
.hk-nav .menu a {
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-family: var(--hk-font-body);
    font-size: 1.05rem;
    font-weight: 500;
    transition: color 0.2s;
}
.hk-nav .menu a:hover { color: var(--hk-gold); }

.hk-nav > .menu { margin-left: auto; }

/* ── Hamburger Button ── */
.hk-nav__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
}
.hk-nav__burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.85);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}
.hk-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hk-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.hk-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile Menü Panel ── */
.hk-mobile-menu {
    display: none;
    position: fixed;
    top: 68px;
    left: 0; right: 0;
    z-index: 998;
    background: rgba(15, 12, 20, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 1.5rem clamp(1.5rem, 6vw, 3rem) 2rem;
    transform: translateY(-8px);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.hk-mobile-menu.is-open {
    opacity: 1;
    transform: translateY(0);
}
.hk-mobile-menu__list,
.hk-mobile-menu .menu {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.hk-mobile-menu__list li,
.hk-mobile-menu .menu li {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hk-mobile-menu__list a,
.hk-mobile-menu .menu a {
    display: block;
    padding: 1rem 0;
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-family: var(--hk-font-body);
    font-size: 1.1rem;
    font-weight: 500;
    transition: color 0.2s;
}
.hk-mobile-menu__list a:hover,
.hk-mobile-menu .menu a:hover { color: var(--hk-gold); }

@media (max-width: 768px) {
    .hk-nav .menu { display: none; }
    .hk-nav__burger { display: flex; }
    .hk-mobile-menu { display: block; }
}

/* ============================================================
   ÜBER UNS – [hk_ueber_uns]
   ============================================================ */

.hk-about-hero {
    position: relative;
    overflow: hidden;
    background: #0f0c14;
    padding: clamp(7rem, 14vw, 12rem) clamp(1.5rem, 6vw, 5rem) clamp(5rem, 10vw, 9rem);
    text-align: center;
}
.hk-about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 40%, rgba(189,9,147,0.2), transparent 55%),
        radial-gradient(ellipse at 85% 60%, rgba(248,180,24,0.13), transparent 55%);
    pointer-events: none;
}
.hk-about-hero__inner {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
}
.hk-about-hero__title {
    font-family: var(--hk-font-display);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.1;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #fff 40%, var(--hk-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hk-about-hero__text {
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.85;
    color: rgba(255,255,255,0.75);
    margin-bottom: 1.5rem;
    text-align: left;
}

/* ── TEAM ── */
.hk-team {
    background: #0f0c14;
    padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 6vw, 5rem);
}
.hk-team__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}
.hk-team__member {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 3.5rem;
    align-items: center;
}
@media (max-width: 768px) {
    .hk-team__member { grid-template-columns: 1fr; gap: 2rem; }
}
.hk-team__photo {
    aspect-ratio: 3/4;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
.hk-team__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.hk-team__photo-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(189,9,147,0.5), rgba(248,180,24,0.4));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hk-font-display);
    font-size: 3rem;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.05em;
    min-height: 380px;
}
.hk-team__photo::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--hk-magenta), var(--hk-yellow));
    z-index: -1;
    opacity: 0.25;
}
.hk-team__name {
    font-family: var(--hk-font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--hk-white);
    margin-bottom: 1.2rem;
    line-height: 1.2;
}
.hk-team__bio {
    font-size: 1.05rem;
    line-height: 1.85;
    color: rgba(255,255,255,0.72);
}
.hk-team__tba {
    font-size: 1rem;
    color: rgba(255,255,255,0.35);
    font-style: italic;
}

/* ── CLOSING ── */
.hk-about-closing {
    background: #0f0c14;
    padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 5rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hk-about-closing::before {
    content: "";
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(189,9,147,0.18), transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.hk-about-closing__text {
    position: relative;
    font-family: var(--hk-font-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: rgba(255,255,255,0.85);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ============================================================
   WORKSHOPS – [hk_workshops]
   ============================================================ */

/* Intro Hero */
.hk-ws-hero {
    position: relative;
    overflow: hidden;
    background: #0f0c14;
    padding: clamp(7rem, 14vw, 11rem) clamp(1.5rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem);
}
.hk-ws-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(248,180,24,0.14), transparent 55%),
        radial-gradient(ellipse at 10% 80%, rgba(189,9,147,0.18), transparent 55%);
    pointer-events: none;
}
.hk-ws-hero__inner {
    position: relative;
    max-width: 820px;
}
.hk-ws-hero__label {
    font-family: var(--hk-font-display);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hk-gold);
    margin-bottom: 1rem;
    display: block;
}
.hk-ws-hero__title {
    font-family: var(--hk-font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.05;
    margin-bottom: 0.6rem;
    background: linear-gradient(135deg, #fff 40%, var(--hk-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hk-ws-hero__tagline {
    font-family: var(--hk-font-display);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: rgba(255,255,255,0.55);
    margin-bottom: 2rem;
}
.hk-ws-hero__body {
    font-size: 1.05rem;
    line-height: 1.85;
    color: rgba(255,255,255,0.72);
    max-width: 680px;
}

/* Feature: Glowbe */
.hk-ws-feature {
    background: #1a0d1e;
    padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 6vw, 5rem);
    position: relative;
    overflow: hidden;
}
.hk-ws-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(189,9,147,0.15), transparent 60%);
    pointer-events: none;
}
.hk-ws-feature__inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}
.hk-ws-feature__header {
    margin-bottom: 3.5rem;
}
.hk-ws-feature__emoji {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}
.hk-ws-feature__title {
    font-family: var(--hk-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--hk-white);
    margin-bottom: 1rem;
    line-height: 1.15;
}
.hk-ws-feature__intro {
    font-size: 1.05rem;
    line-height: 1.85;
    color: rgba(255,255,255,0.7);
    max-width: 680px;
}

/* Steps */
.hk-ws-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}
@media (max-width: 640px) {
    .hk-ws-steps { grid-template-columns: 1fr; }
}
.hk-ws-step {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    transition: border-color 0.3s;
}
.hk-ws-step:hover { border-color: rgba(248,180,24,0.3); }
.hk-ws-step__number {
    font-family: var(--hk-font-display);
    font-size: 2rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--hk-magenta), var(--hk-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
    width: 2rem;
}
.hk-ws-step__title {
    font-family: var(--hk-font-display);
    font-size: 1.2rem;
    color: var(--hk-white);
    margin-bottom: 0.5rem;
}
.hk-ws-step__body {
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.65);
}

/* Meta-Infos */
.hk-ws-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    padding: 1.5rem 2rem;
    background: rgba(255,255,255,0.04);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 2.5rem;
}
.hk-ws-meta__item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.hk-ws-meta__label {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hk-gold);
    font-weight: 500;
}
.hk-ws-meta__value {
    font-size: 1rem;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

/* Secondary Cards */
.hk-ws-cards {
    background: #0f0c14;
    padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 6vw, 5rem);
}
.hk-ws-cards__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 640px) {
    .hk-ws-cards__inner { grid-template-columns: 1fr; }
}
.hk-ws-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.hk-ws-card:hover {
    border-color: rgba(189,9,147,0.4);
    transform: translateY(-4px);
}
.hk-ws-card__emoji { font-size: 2.5rem; }
.hk-ws-card__title {
    font-family: var(--hk-font-display);
    font-size: 1.7rem;
    color: var(--hk-white);
    line-height: 1.2;
}
.hk-ws-card__body {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.68);
    flex: 1;
}

/* ============================================================
   SHOP COMING SOON – [hk_shop]
   ============================================================ */

.hk-shop-soon {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(6rem, 12vw, 10rem) clamp(1.5rem, 6vw, 4rem);
    background: #0f0c14;
    overflow: hidden;
}
.hk-shop-soon__blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hk-shop-soon__inner {
    position: relative;
    z-index: 2;
    max-width: 640px;
}
.hk-shop-soon__label {
    font-family: var(--hk-font-display);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hk-gold);
    display: block;
    margin-bottom: 1.2rem;
}
.hk-shop-soon__title {
    font-family: var(--hk-font-display);
    font-size: clamp(2.8rem, 7vw, 5rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #fff 30%, var(--hk-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hk-shop-soon__body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.65);
    margin-bottom: 2.5rem;
}

/* ============================================================
   KONTAKT – [hk_kontakt]
   ============================================================ */

.hk-contact-page { background: #0f0c14; }

.hk-contact-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(7rem, 14vw, 11rem) clamp(1.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
}
.hk-contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 90% 30%, rgba(189,9,147,0.15), transparent 55%),
        radial-gradient(ellipse at 5% 70%, rgba(248,180,24,0.12), transparent 55%);
    pointer-events: none;
}
.hk-contact-hero__inner { position: relative; max-width: 700px; }
.hk-contact-hero__title {
    font-family: var(--hk-font-display);
    font-size: clamp(2.8rem, 7vw, 5rem);
    line-height: 1.05;
    margin-bottom: 1.2rem;
    background: linear-gradient(135deg, #fff 40%, var(--hk-magenta) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hk-contact-hero__body {
    font-size: 1.05rem;
    line-height: 1.85;
    color: rgba(255,255,255,0.68);
    max-width: 560px;
}

/* Form section */
.hk-contact-form-section {
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem) clamp(5rem, 10vw, 9rem);
}
.hk-form {
    max-width: 740px;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.hk-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}
@media (max-width: 600px) { .hk-form__row { grid-template-columns: 1fr; } }

.hk-form__field { display: flex; flex-direction: column; gap: 0.5rem; }

.hk-form__label {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}
.hk-form__input,
.hk-form__textarea {
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    color: var(--hk-white);
    font-family: var(--hk-font-body);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}
.hk-form__input:focus,
.hk-form__textarea:focus {
    border-color: var(--hk-magenta);
    box-shadow: 0 0 0 3px rgba(189,9,147,0.15);
}
.hk-form__input::placeholder,
.hk-form__textarea::placeholder { color: rgba(255,255,255,0.25); }
.hk-form__textarea { min-height: 140px; resize: vertical; }

/* Anliegen Pills */
.hk-form__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.hk-form__option { position: relative; }
.hk-form__option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px; height: 1px;
}
.hk-form__option label {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border-radius: 100px;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    cursor: pointer;
    transition: box-shadow 0.2s, color 0.2s, background 0.2s;
    user-select: none;
    background: transparent;
}
.hk-form__option label:hover {
    box-shadow: inset 0 0 0 1.5px rgba(189,9,147,0.6);
    color: rgba(255,255,255,0.9);
}
.hk-form__option input[type="radio"]:checked + label {
    background: linear-gradient(135deg, var(--hk-magenta), var(--hk-yellow));
    box-shadow: none;
    color: var(--hk-white);
    font-weight: 500;
}

/* Feedback */
.hk-form__success,
.hk-form__error {
    padding: 1.2rem 1.5rem;
    border-radius: 14px;
    font-size: 1rem;
    line-height: 1.6;
}
.hk-form__success {
    background: rgba(45,158,95,0.15);
    border: 1px solid rgba(45,158,95,0.35);
    color: #6ecf9a;
}
.hk-form__error {
    background: rgba(217,48,37,0.12);
    border: 1px solid rgba(217,48,37,0.3);
    color: #f08080;
}

/* ============================================================
   STANDARD-SEITEN (Impressum, Datenschutz etc.)
   Seiten ohne .hk-page bekommen Abstand und lesbare Breite
   ============================================================ */

body:not(:has(.hk-page)) .entry-content,
body:not(:has(.hk-page)) .ct-post-content {
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 4rem);
    max-width: 780px;
    margin: 0 auto;
}

body:not(:has(.hk-page)) .entry-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 0.8rem;
}

body:not(:has(.hk-page)) .entry-content p,
body:not(:has(.hk-page)) .entry-content li {
    line-height: 1.8;
    color: var(--hk-dark);
}

/* ── SITE-FOOTER (global, alle Seiten) ── */
.hk-site-footer {
    background: #1e1826;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 2rem clamp(1.5rem, 6vw, 5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.hk-site-footer__brand {
    font-family: var(--hk-font-display);
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--hk-magenta), var(--hk-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hk-site-footer__links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hk-site-footer__links a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s;
}
.hk-site-footer__links a:hover { color: var(--hk-yellow); }
.hk-site-footer__copy {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.3);
}

/* ── Blocksy: Weiße Ränder + Seitentitel entfernen wenn .hk-page aktiv ── */
body.page:has(.hk-page) .entry-header     { display: none !important; }
body.page:has(.hk-page) .ct-breadcrumbs  { display: none !important; }
body.page:has(.hk-page) .entry-content   { padding: 0 !important; margin: 0 !important; }
body.page:has(.hk-page) .ct-container    { max-width: 100% !important; padding: 0 !important; }
body.page:has(.hk-page) #content         { padding: 0 !important; }
body.page:has(.hk-page) .content-wrap    { padding: 0 !important; }
body.page:has(.hk-page) main             { padding: 0 !important; }
body:has(.hk-page)                       { background: #0f0c14; }