/* KOV – Foto-Hero mit Verlaufs-Overlay.
   Das Hintergrundbild liefert das generische Frame-Feld background_image
   (plate_bootstrap → .frame-backgroundimage, absolut/cover ueber die volle,
   randabfallende Frame-Flaeche). Solide forest-Farbe (background_color_class)
   bleibt als dunkler Fallback dahinter. Hier nur die Praesentation DARUEBER:
   Verlaufs-Overlay, weisse Typo, Innenabstaende.
   WICHTIG: Dachzeile (pretitle) + H1 (header) rendert der generische Frame-Header.
   Overlay, weisse Typo und die grosszuegigen vertikalen Innenabstaende liegen
   darum auf der FRAME-Flaeche (.frame-type-atomicplan_kovhero), nicht mehr nur im
   Main-Content, damit sie den Frame-Header mit einschliessen. */

/* Verlaufs-Overlay ueber das Frame-Bild (deckt die volle Frame-Flaeche inkl.
   Frame-Header; liegt unter dem Content, da .frame-backgroundimage-container im
   DOM vor der .frame-container steht). */
.frame-type-atomicplan_kovhero .frame-backgroundimage-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(7, 28, 21, 0.25) 0%,
    rgba(7, 28, 21, 0.55) 65%,
    rgba(7, 28, 21, 0.85) 100%);
}

/* Hero-Komposition auf der Frame-Flaeche: der gesamte Frame-Inhalt (generischer
   Frame-Header + Main) liegt ueber dem Overlay (z-index) und traegt die
   grosszuegigen vertikalen Innenabstaende + weisse Typo. */
.frame-type-atomicplan_kovhero {
  .frame-inner {
    position: relative;
    z-index: 1;
    color: #fff;
    /* Unterhalb Desktop ist der fixed Header (grosses Logo) deutlich hoeher —
       6rem reichten nicht, Text stand unterm Header (User-Vorgabe 08/2026: 12rem;
       Desktop ab 1024px bleibt bei 9rem, s. u.). */
    padding-top: 12rem;
    padding-bottom: 8rem;
  }
  /* Dachzeile + H1 (generischer Frame-Header) hell; etwas Luft zum Lead.
     (background_color_class=forest faerbt bereits invertiert – hier explizit,
     damit der Hero unabhaengig von der Frame-Farbe hell bleibt.) */
  .frame-header { margin-bottom: 2rem; }
  .frame-header h1 { color: #fff; }
  .frame-pretitle { color: rgba(255, 255, 255, 0.9); }
}

/* Tablet-Zwischenbereich: ab 768px waechst der fixed Header auf ~223px (volles
   Logo, Burger-Zeile bis 990px) — 12rem (192px) liegen dann UNTER der Headerkante
   (gemessen: Dachzeile -31px). Ab 991px (Nav-Umbruch, lgbp) reicht die Basis wieder. */
@media (min-width: 768px) and (max-width: 990px) {
  .frame-type-atomicplan_kovhero .frame-inner {
    padding-top: 15rem;
  }
}

@media (min-width: 1024px) {
  .frame-type-atomicplan_kovhero .frame-inner {
    padding-top: 9rem;
    padding-bottom: 11rem;
  }
}

.kov-cb-hero {

  .kov-hero { position: relative; }

  /* Lead + CTAs (Main-Content). Horizontale Kante via .container-edge; die
     vertikalen Innenabstaende liefert jetzt die Frame-Flaeche (s. o.). */
  .kov-hero__inner {
    position: relative;
    color: #fff;
  }
  .kov-hero__content { max-width: 48rem; }

  .kov-hero__lead {
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 42rem;
    margin-bottom: 2.5rem;
    color: rgba(255, 255, 255, 0.85);
  }

  /* CTA-Buttons (bauen auf .btn-kov auf) */
  .kov-hero__cta-primary {
    background: #fff;
    color: var(--color-forest-900);
    box-shadow: var(--shadow-soft);
    &:hover { color: var(--color-forest-900); transform: translateY(-1px); }
  }
  .kov-hero__cta-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    &:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
  }

  /* Partner-Badge (Mitgliedschaft/Dachverband) — Geschwister der Textspalte
     direkt in .kov-hero__inner. Inhalt (Logo/Text/Link) kommt aus assets +
     pi_flexform, hier nur Optik. Label steht UEBER dem Logo (Spalte).
     Mobil: unter den CTAs, linksbuendig. Ab 768px wird .kov-hero__inner zur
     Zeile (Textspalte links, Badge rechts, an der Grundlinie der CTA-Zeile);
     die rechte Badge-Kante liegt damit exakt auf der Inhaltskante des
     generischen .frame-container — keine eigene Breite im Block-CSS. */
  .kov-hero__badge {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 2rem;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s var(--easing), filter 0.2s var(--easing);
  }
  .kov-hero__badge-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.85);
  }
  .kov-hero__badge-logo {
    display: block;
    height: 112px;
    width: auto;
  }
  a.kov-hero__badge:hover {
    color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.08);
  }

  @media (min-width: 768px) {
    .kov-hero__inner {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
    }
    .kov-hero__content { flex: 1 1 auto; min-width: 0; }
    .kov-hero__badge {
      flex: 0 0 auto;
      align-items: flex-end;
      margin-top: 0;
    }
  }
}