/* ==========================================================================
   Hero- und Kartenvarianten
   Gilt fuer alle Designsprachen. Wird nach dN-*.css geladen, darf also
   Grundwerte ueberschreiben; sprachspezifische Feinheiten stehen weiter
   unten mit doppeltem Attribut.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero B · Buehne: Visualisierung oder Bild randabfallend, Text darauf
   -------------------------------------------------------------------------- */
.gf[data-hero="b"] .gf-hero {
  padding: 0;
  min-height: clamp(560px, 92vh, 920px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--inverse);
}
.gf[data-hero="b"] .gf-hero__grund { display: none; }
.gf[data-hero="b"] .gf-hero__layout { position: static; align-items: end; }
.gf[data-hero="b"] .gf-hero__visual {
  position: absolute; inset: 0; aspect-ratio: auto; grid-column: auto; z-index: 0; margin: 0;
}
.gf[data-hero="c"] .gf-hero__visual { margin-bottom: 40px; }
.gf[data-hero="b"] .gf-hero__fx, .gf[data-hero="b"] .gf-hero__foto { border-radius: 0; }
.gf[data-hero="b"] .gf-hero__visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--inverse) 94%, transparent) 0%, color-mix(in oklab, var(--inverse) 55%, transparent) 48%, transparent 78%),
    linear-gradient(90deg, color-mix(in oklab, var(--inverse) 70%, transparent) 0%, color-mix(in oklab, var(--inverse) 30%, transparent) 45%, transparent 70%);
}
.gf[data-hero="b"][data-visual="fx"] .gf-hero__visual::after {
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--inverse) 90%, transparent) 0%, transparent 42%),
    linear-gradient(90deg, color-mix(in oklab, var(--inverse) 88%, transparent) 0%, color-mix(in oklab, var(--inverse) 55%, transparent) 38%, transparent 66%);
}
.gf[data-hero="b"] .gf-hero__text { grid-column: 1 / span 8; padding-top: 180px; padding-bottom: 8px; }
.gf[data-hero="b"] .gf-hero__legende { left: auto; right: var(--rand); bottom: 18px; color: color-mix(in oklab, var(--text-inverse) 60%, transparent); z-index: 2; }
.gf[data-hero="b"] .gf-hero__panelkopf, .gf[data-hero="b"] .gf-hero__instrumente { display: none !important; }
.gf[data-hero="b"] .gf-hero__themen { margin-top: 48px; border-top-color: color-mix(in oklab, var(--text-inverse) 18%, transparent); padding-bottom: 30px; }
.gf[data-hero="b"] .gf-hero__themen li { color: var(--text-inverse); }

/* --------------------------------------------------------------------------
   Hero C · Statement: grosse Typografie, Visualisierung als breites Band
   -------------------------------------------------------------------------- */
.gf[data-hero="c"] .gf-hero__text {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  column-gap: var(--gap);
  align-items: end;
}
.gf[data-hero="c"] .gf-hero__text .gf-eyebrow, .gf[data-hero="c"] .gf-hero__text .gf-display { grid-column: 1 / -1; }
.gf[data-hero="c"] .gf-display { font-size: calc(var(--fs-display) * 1.1); max-width: 21ch; }
.gf[data-hero="c"] .gf-lead { grid-column: 1; }
.gf[data-hero="c"] .gf-hero__knoepfe { grid-column: 2; justify-self: end; margin-top: 0; }
.gf[data-hero="c"] .gf-hero__visual { grid-column: 1 / -1; aspect-ratio: 21 / 8; margin-top: 18px; }
.gf[data-hero="c"] .gf-hero__legende { bottom: -28px; }
.gf[data-hero="c"] .gf-hero__themen { margin-top: 64px; }

@container gf (max-width: 960px) {
  .gf[data-hero="c"] .gf-hero__text { grid-template-columns: 1fr; }
  .gf[data-hero="c"] .gf-hero__knoepfe { grid-column: 1; justify-self: start; }
  .gf[data-hero="c"] .gf-hero__visual { aspect-ratio: 4 / 3; }
  .gf[data-hero="b"] .gf-hero__text { grid-column: 1 / -1; padding-top: 140px; }
}

/* --------------------------------------------------------------------------
   Karten A · Kontur
   -------------------------------------------------------------------------- */
.gf[data-karten="a"] .gf-karte { background: transparent; border: 1px solid var(--c-linie); box-shadow: none; }
.gf[data-karten="a"] .gf-karte:hover { border-color: var(--text); }

/* Karten B · Flaeche */
.gf[data-karten="b"] .gf-karte { background: var(--c-karte-2); border: 1px solid transparent; box-shadow: var(--schatten-karte); }
.gf[data-karten="b"] .gf-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hover, var(--schatten-karte)); }

/* Karten C · Akzent: Bild oben, kraeftiger */
.gf[data-karten="c"] .gf-karte { background: var(--c-karte-2); border: 1px solid var(--c-linie); padding-top: 26px; }
.gf[data-karten="c"] .gf-karte__medien { display: block; }
.gf[data-karten="c"] .gf-karte:hover .gf-karte__medien img { transform: scale(1.05); }