/*
 * VOMA Child Theme – hero.css
 *
 * Hero-Sektion: Section-Wrapper, Inner-Card, Text-Spalte,
 * Bild-Spalte, Typografie, Button-Gruppe.
 *
 * Quellen:
 *   06_Standards/CI/COMPONENTS.md  – Zielwerte Hero
 *   06_Standards/CI/TYPOGRAPHY.md  – Schrifthierarchie
 *   06_Standards/CI/COLORS.md      – Farbpalette
 *   06_Standards/DEVELOPMENT/CSS-TOKENS.md – Token-Register
 *   06_Standards/DEVELOPMENT/BREAKPOINTS.md – Mobile First
 */

/* ============================================================
   SECTION WRAPPER
   Quelle: COMPONENTS.md – Section Padding 20px 16px 26px
   ============================================================ */

.voma-hero {
  background: #ffffff;
  /* Nur vertikaler Rhythmus – horizontales Padding kommt ab jetzt
     ausschließlich von .site-content (Mobile-Design-System,
     docs/components/mobile-design-system.md). Vorher stapelte sich
     hier zusätzliches 16px-Padding auf das Seiten-Padding. */
  padding-block: 20px 26px;
}

/* ============================================================
   INNER CARD
   Quelle: COMPONENTS.md – Inner Max Width 1200px, Radius 18px,
   Shadow var(--voma-shadow-card), Padding mobil 26px 20px
   ============================================================ */

.voma-hero__inner {
  max-width: var(--voma-max);
  margin-inline: auto;
  /* Premium-Feinschliff 04.07.2026: sehr dezenter Verlauf statt Flat-
     Weiß, positioniert Richtung Bildspalte – bindet Foto-Glow (siehe
     .voma-hero__image--cutout::before) und Kartenfläche optisch
     zusammen statt zweier getrennter Flächen. Eigener, etwas
     kräftigerer Schatten (nicht der sitweite --voma-shadow-card-Token,
     um keine andere Karte im System mit zu verändern) – der Hero ist
     das prominenteste Element der Seite und darf mehr Tiefe zeigen. */
  background:
    radial-gradient(120% 100% at 82% 12%, rgba(82, 177, 101, .05), transparent 55%),
    #ffffff;
  border-radius: var(--voma-radius-card);
  box-shadow: 0 24px 60px rgba(17, 24, 39, .08), 0 2px 10px rgba(17, 24, 39, .04);
  padding: 26px 20px;
}

/* ============================================================
   LAYOUT
   Mobile: Stack (untereinander)
   Desktop: Flex, Text links / Bild rechts, Gap 36px
   ============================================================ */

.voma-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--voma-space-6);
}

.voma-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--voma-space-4);
}

/* Bild-Container – Basisvariante für echte Rechteck-Fotos (Kontakt-
   und Service-Hero: Bürogebäude/Mitarbeiterin). Gerundete Ecken wie
   die Hero-Card selbst, Foto füllt den Rahmen kantenlos aus. */
.voma-hero__image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.voma-hero__img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--voma-radius-card);
}

/* Cutout-Variante: freigestelltes Foto (transparenter Hintergrund,
   z. B. Felix im Homepage-Hero).
   Premium-Feinschliff 04.07.2026: Die bisherige flache graue Box
   (#f7f8f9 + Padding) wirkte wie ein separates "Foto-Dokument" neben
   der Hero-Card, nicht wie Teil derselben Komposition (Kritik: Service-
   Seiten-Hero mit echtem Rechteck-Foto wirkt hochwertiger/präsenter).
   Ersetzt durch einen weichen, unscharfen Grün-Glow hinter dem Motiv
   (::before) plus Drop-Shadow direkt auf dem Foto – das Motiv "schwebt"
   dadurch mit eigener Tiefe auf der Karte, statt in einem Rahmen zu
   stecken. object-fit: contain bleibt (Kopf/Motiv nie beschnitten). */
.voma-hero__image--cutout {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

.voma-hero__image--cutout::before {
  content: "";
  position: absolute;
  inset: 4%;
  background: radial-gradient(circle, rgba(82, 177, 101, .16), rgba(82, 177, 101, 0) 70%);
  filter: blur(12px);
  z-index: 0;
}

.voma-hero__image--cutout .voma-hero__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 22px 28px rgba(17, 24, 39, .16));
}

/* ============================================================
   TYPOGRAFIE
   Quelle: COMPONENTS.md, TYPOGRAPHY.md
   ============================================================ */

/* Eyebrow – kleine Kategorie-Zeile über dem Titel */
.voma-hero__eyebrow {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, .55);
  letter-spacing: 0.02em;
  margin: 0;
}

/* Titel */
.voma-hero__title {
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 900;
  line-height: 1.08;
  color: #111827;
  max-width: 18ch;
  margin: 0;
  /* War hyphens: auto (Begründung: sehr lange deutsche Komposita wie
     "Wohngebäudeversicherung" sollen an einer Silbengrenze statt roh
     mitten im Zeichen brechen). In der Praxis (03.07.2026, Premium-
     Feinschliff) trennte der Browser damit aber wiederholt normal lange,
     problemlos passende Wörter unnötig mitten durch ("Finan-zierung",
     "Absiche-rung") – hyphens:auto hyphenisiert nicht nur bei echtem
     Overflow, sondern auch für vermeintlich ausgeglichenere Zeilen.
     manual verhindert das; das geerbte overflow-wrap: break-word
     (GeneratePress-Basis) bleibt als Sicherheitsnetz für den seltenen
     Fall eines wirklich zu langen Einzelworts aktiv. */
  hyphens: manual;
}

/* Lead-Text */
.voma-hero__lead {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(17, 24, 39, .78);
  max-width: 62ch;
  margin: 0;
}

/* ============================================================
   BUTTON-GRUPPE
   Mobile: Buttons vollbreit, vertikal gestapelt
   Desktop: Buttons inline, automatische Breite
   ============================================================ */

.voma-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--voma-space-3);
}

.voma-hero__actions .voma-btn {
  width: 100%;
  justify-content: center;
}

/* ============================================================
   TRUST-CHIPS
   Premium-Feinschliff 04.07.2026: ersetzt die reine Fließtext-Zeile
   "Seit 1991 · Familienunternehmen ... · Mitglied der VEMA eG" im
   Homepage-Hero. Als Fließtext wirkten drei unterschiedlich wichtige
   Fakten gleich beiläufig; als Chips mit Mini-Icon bekommt jede
   Aussage einen eigenen, ruhigen visuellen Anker. Das VEMA-Siegel
   bleibt hier bewusst klein (nur Wiedererkennung) – der ausführliche,
   große Auftritt der Mitgliedschaft lebt im eigenen .voma-vema-
   Bereich weiter unten auf der Seite.
   ============================================================ */

.voma-hero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--voma-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.voma-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(17, 24, 39, .04);
  border-radius: var(--voma-radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(17, 24, 39, .68);
  white-space: nowrap;
}

.voma-hero__chip svg {
  width: 14px;
  height: 14px;
  color: var(--voma-green);
  flex-shrink: 0;
}

.voma-hero__chip--vema {
  padding: 4px 12px 4px 5px;
}

.voma-hero__chip--vema img {
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Kleine Vertrauens-Zeile unterhalb der Buttons (z. B. "✓ Struktur ·
   ✓ Überblick"), nur auf textlastigen Landingpage-Heros ohne Bild. */
.voma-hero__note {
  font-size: 13px;
  font-weight: 600;
  color: rgba(17, 24, 39, .55);
  margin: 0;
}

/* ============================================================
   DESKTOP BREAKPOINT (≥ 64rem / 1024px)
   Quelle: COMPONENTS.md – Inner Padding 32px, Layout Flex,
   Text links / Bild rechts, Gap 36px
   ============================================================ */

@media (min-width: 64rem) {
  /* Desktop-Spacing-Pass 02.07.2026 (Runde 2): Section-Padding blieb
     bisher bei jeder Breite auf dem mobilen Wert (20px/26px) stehen –
     wirkte auf breiten Screens zu eng. */
  .voma-hero {
    padding-block: 56px 64px;
  }

  .voma-hero__inner {
    padding: var(--voma-space-6);
  }

  .voma-hero__body {
    flex-direction: row;
    align-items: center;
    gap: 36px;
  }

  .voma-hero__text {
    flex: 1;
    min-width: 0;
  }

  .voma-hero__image {
    flex: 0 0 auto;
    width: 45%;
    max-width: 520px;
  }

  /* Premium-Feinschliff 04.07.2026: von 40%/420px auf 48%/480px
     vergrößert – das Foto soll auf der Karte eine ähnliche Präsenz
     wie das echte Rechteck-Foto im Kontakt-/Service-Hero entfalten. */
  .voma-hero__image--cutout {
    width: 48%;
    max-width: 480px;
  }

  /* Desktop: Buttons inline nebeneinander */
  .voma-hero__actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .voma-hero__actions .voma-btn {
    width: auto;
  }
}

/* ============================================================
   TEXT-ONLY VARIANTE (Bereichsseiten-Hero ohne Bildspalte)
   Betrifft Privatkunden, Handwerksbetriebe, Wohngebäudeversicherung,
   Baufinanzierung, Vertragscheck: .voma-hero__body hat nur
   .voma-hero__text als Kind, kein .voma-hero__image daneben.
   Titel/Lead blieben bisher trotzdem auf die für die Bild-Variante
   kalibrierte Lesebreite begrenzt – auf breiten Screens entstand
   dadurch ein großer ungenutzter Bereich rechts. :has() erkennt den
   Fall strukturell (keine Content-Änderung nötig), etwas mehr
   Titel-Breite plus ein großformatiges, sehr dezentes Sparten-Icon
   im freien Bereich balancieren die Karte aus, ohne von der Headline
   abzulenken. Icon-Auswahl bewusst identisch zu den bereits
   bestehenden Zielgruppen-Kachel-Icons auf der Startseite (gleiche
   Bildsprache statt neuer, beliebiger Symbole).
   ============================================================ */

@media (min-width: 64rem) {
  .voma-hero__body:has(> .voma-hero__text:only-child) {
    position: relative;
    isolation: isolate;
  }

  .voma-hero__body:has(> .voma-hero__text:only-child) .voma-hero__title {
    max-width: 22ch;
  }

  /* Eigene Breite statt volle Zeile: .voma-hero__text ist als einziges
     Flex-Kind sonst 100% breit, wodurch der border-top der Bullet-Liste
     (.voma-tile__bullets) quer durchs Icon lief. */
  .voma-hero__body:has(> .voma-hero__text:only-child) .voma-hero__text {
    flex: 0 1 620px;
    position: relative;
    z-index: 1;
  }

  .voma-hero__body:has(> .voma-hero__text:only-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 320px;
    height: 320px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .07;
    pointer-events: none;
    z-index: 0;
  }
}

.page-slug-privatkunden .voma-hero__body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352b165' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

.page-slug-versicherungen-handwerksbetriebe .voma-hero__body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352b165' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9'/%3E%3Cpath d='m18 15 4-4'/%3E%3Cpath d='m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'/%3E%3C/svg%3E");
}

.page-slug-wohngebaeudeversicherung .voma-hero__body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352b165' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}

.page-slug-baufinanzierung .voma-hero__body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352b165' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 18v-7'/%3E%3Cpath d='M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z'/%3E%3Cpath d='M14 18v-7'/%3E%3Cpath d='M18 18v-7'/%3E%3Cpath d='M3 22h18'/%3E%3Cpath d='M6 18v-7'/%3E%3C/svg%3E");
}

.page-slug-vertrags-check .voma-hero__body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352b165' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}

/* ============================================================
   TABLET BREAKPOINT (≥ 48rem / 768px)
   ============================================================ */

@media (min-width: 48rem) {
  .voma-hero__inner {
    padding: var(--voma-space-5);
  }

  .voma-hero__img {
    max-width: 380px;
  }

  .voma-hero__image--cutout {
    max-width: 380px;
  }
}