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

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--hk-font-body);
  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;
  margin: 0;
}

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-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-team__name,
.hk-site-footer__brand,
.hk-about-closing__text {
  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
   ============================================================ */

.hk-text-gradient {
  background: var(--hk-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.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;
  -webkit-tap-highlight-color: transparent;
}

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

.hk-btn.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.hk-btn-secondary {
  background: var(--hk-gold);
  color: var(--hk-dark);
  border-color: var(--hk-gold);
}

.hk-btn.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.hk-btn-outline {
  background: transparent;
  color: var(--hk-pink);
  border-color: var(--hk-pink);
}

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

/* Bridge: native Gutenberg-Buttons-Block ("hk-btn-*" als zusätzliche
   CSS-Klasse gesetzt) auf dieselbe Optik wie .hk-btn mappen. */
.wp-block-button.hk-btn-primary .wp-block-button__link,
.wp-block-button.hk-btn-secondary .wp-block-button__link,
.wp-block-button.hk-btn-outline .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1.75rem;
  border-radius: var(--hk-radius-full) !important;
  font-family: var(--hk-font-body);
  font-size: var(--hk-text-base);
  font-weight: 500;
  border: 2px solid transparent;
  text-decoration: none;
  transition: var(--hk-transition);
  -webkit-tap-highlight-color: transparent;
}
.wp-block-button.hk-btn-primary .wp-block-button__link {
  background: var(--hk-pink);
  color: var(--hk-white);
  border-color: var(--hk-pink);
}
.wp-block-button.hk-btn-primary .wp-block-button__link:hover {
  background: var(--hk-pink-dark);
  border-color: var(--hk-pink-dark);
  box-shadow: var(--hk-shadow-pink);
  transform: translateY(-1px);
}
.wp-block-button.hk-btn-outline .wp-block-button__link {
  background: transparent;
  color: var(--hk-pink);
  border-color: var(--hk-pink);
}
.wp-block-button.hk-btn-outline .wp-block-button__link:hover {
  background: var(--hk-pink);
  color: var(--hk-white);
}

/* Dunkler Kontext (.hk-page): Buttons wie im bisherigen Design */
.hk-page .wp-block-button .wp-block-button__link {
  border-radius: 100px !important;
  font-weight: 500;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}
.hk-page .wp-block-button .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(189,9,147,0.45);
}
.hk-page .wp-block-button.hk-btn-primary .wp-block-button__link {
  background: linear-gradient(135deg, var(--hk-magenta), var(--hk-yellow));
  color: var(--hk-white);
  border-color: transparent;
}
.hk-page .wp-block-button.hk-btn-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--hk-white);
  color: var(--hk-white);
}
.hk-page .wp-block-button.hk-btn-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(255,255,255,0.15);
}

/* Bridge: WordPress rendert jeden Group-Block mit einem zusätzlichen
   .wp-block-group__inner-container-Wrapper um seine Kinder. Für Klassen,
   deren Kinder direkte Flex-/Grid-Items sein müssen, blenden wir diesen
   Wrapper per display:contents aus dem Box-Baum aus. */
.hk-services__grid > .wp-block-group__inner-container,
.hk-cta-grid > .wp-block-group__inner-container,
.hk-cta-card > .wp-block-group__inner-container,
.hk-team__inner > .wp-block-group__inner-container,
.hk-team__member > .wp-block-group__inner-container,
.hk-ws-steps > .wp-block-group__inner-container,
.hk-ws-step > .wp-block-group__inner-container,
.hk-ws-meta > .wp-block-group__inner-container,
.hk-ws-meta__item > .wp-block-group__inner-container,
.hk-ws-cards__inner > .wp-block-group__inner-container,
.hk-ws-card > .wp-block-group__inner-container,
.hk-ws-gallery__grid > .wp-block-group__inner-container,
.hk-traumraum__gallery > .wp-block-group__inner-container {
  display: contents;
}

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

/* Scroll-Reveal (per IntersectionObserver in main.js getriggert) */
.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; }


/* ============================================================
   PROSE – Standard-Seiten (Impressum, Datenschutz, Blog)
   ============================================================ */

.hk-prose {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 4rem);
  max-width: 780px;
  margin: 0 auto;
}

.hk-prose h1 {
  margin-bottom: var(--hk-space-md);
}

.hk-prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.8rem;
}

.hk-prose p,
.hk-prose li {
  line-height: 1.8;
  color: var(--hk-dark);
}