/* ═══════════════════════════════════════════════════
   hofmanns.digital — Block 1 / Hero
   Einbinden via: functions.php → wp_enqueue_style()
   oder direkt in: assets/css/blocks/hero.css
   ═══════════════════════════════════════════════════ */

.hd-hero {
  background: linear-gradient(135deg, #175B5F 0%, #1B4242 100%);
  border-radius: 16px;
  padding: 3.5rem;
  position: relative;
  overflow: hidden;
  font-family: var(--wp--preset--font-family--figtree), sans-serif;
}

/* ── Blobs ── */
.hd-hero__blob {
  position: absolute;
  background: #F0C767;
  z-index: 0;
}
.hd-hero__blob--1 {
  width: 300px;
  height: 300px;
  top: -80px;
  right: -60px;
  border-radius: 61% 39% 54% 46% / 55% 48% 52% 45%;
  opacity: 0.10;
}
.hd-hero__blob--2 {
  width: 160px;
  height: 160px;
  bottom: -40px;
  left: 42%;
  border-radius: 42% 58% 36% 64% / 60% 44% 56% 40%;
  opacity: 0.06;
}

/* ── Content ── */
.hd-hero > *:not(.hd-hero__blob) {
  position: relative;
  z-index: 1;
}

/* ── Stern ── */
.hd-hero__stern {
  width: 90px;
  height: 77px;
  margin-bottom: 1.25rem;
}
.hd-hero__stern img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Typografie ── */
.hd-hero__h1 {
  font-family: var(--wp--preset--font-family--figtree), sans-serif;
  font-size: var(--wp--preset--font-size--4xl);
  font-weight: 700;
  color: var(--wp--preset--color--mist);
  line-height: 1.1;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
}
.hd-hero__h1 span {
  color: var(--wp--preset--color--gold);
}
.hd-hero__subline {
  font-size: var(--wp--preset--font-size--xl);
  color: var(--wp--preset--color--mist);
  opacity: 0.85;
  margin: 0 0 1.25rem;
  max-width: 500px;
  line-height: 1.5;
}
.hd-hero__body {
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--mist);
  opacity: 0.68;
  line-height: 1.85;
  margin: 0 0 2rem;
  max-width: 440px;
}

/* ── CTAs ── */
.hd-hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Buttons (global, werden von allen Blöcken genutzt) ── */
.hd-btn {
  font-family: var(--wp--preset--font-family--figtree), sans-serif;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--medium);
  border-radius: 2rem;
  padding: 0.75rem 2rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border: 2px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hd-btn--gold {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--dark-teal);
  border-color: var(--wp--preset--color--gold);
}
.hd-btn--gold:hover {
  background: var(--wp--preset--color--dark-teal);
  color: var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--dark-teal);
}
.hd-btn--outline-light {
  background: transparent;
  color: var(--wp--preset--color--mist);
  border-color: rgba(222, 232, 232, 0.6);
}
.hd-btn--outline-light:hover {
  background: var(--wp--preset--color--mist);
  color: var(--wp--preset--color--dark-teal);
  border-color: var(--wp--preset--color--mist);
}
.hd-btn--outline-teal {
  background: transparent;
  color: var(--wp--preset--color--teal);
  border-color: var(--wp--preset--color--teal);
}
.hd-btn--outline-teal:hover {
  background: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--mist);
}

/* ── Label (global) ── */
.hd-label {
  font-family: var(--wp--preset--font-family--fira-code), monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.75rem;
  display: block;
  opacity: 0.4;
}
.hd-label--light { color: var(--wp--preset--color--mist); }
.hd-label--dark  { color: var(--wp--preset--color--teal); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .hd-hero { padding: 2rem 1.5rem; }
  .hd-hero__h1 { font-size: var(--wp--preset--font-size--3xl); }
  .hd-hero__ctas { flex-direction: column; }
  .hd-btn { text-align: center; }
}