/* OneQrew v7 — Element 08 Abschluss (Text-Banner, Full-Width-Banner).

   Umsetzung zweier Design-Vorgaben fuer denselben Handle: die vier
   Aufbauformen (mitte/links/zwei/statement) aus
   "taifun-element-03-textbanner.html" fuer den Block text-banner, und die
   vier Medienvarianten (keiner/rechts/links/flaeche) aus
   "taifun-element-08-fullwidth-banner.html" fuer den Block
   full-width-banner. Beide teilen sich Section-Grundflaeche, Flaechenrollen
   und Sektionsinhalt-Contract (kern.css) — dieses Element fuegt keine neuen
   oq-inhalt__*-Klassen hinzu, nur die Anordnung ringsherum. Aenderungen
   immer auch in abschluss.min.css.

   Die Doppelbanner-Variante (zwei fwb.ohne-bild-Baenner nebeneinander in
   einem gemeinsamen Grid) aus der Full-Width-Banner-Vorgabe ist bewusst
   nicht umgesetzt: sie braucht zwei nebeneinanderstehende Blockinstanzen in
   einem gemeinsamen Raster, das der einzelne Full-Width-Banner-Block nicht
   herstellen kann (kein Gruppierungsmechanismus im Contract). Redaktionell
   erreichbar ueber zwei Bloecke mit unterschiedlicher Flaeche
   untereinander, nur ohne das gemeinsame Zwei-Spalten-Grid der Vorgabe.

   Farbwerte kommen aus der Theme-Palette, wie bei stage.css. --oq-farbe-linie
   und --oq-farbe-text-leise stehen nicht global in kern.css, deshalb lokal
   berechnet. */

.oq-v7 .oq-abschluss {
  /* Masse aus der Vorgabe */
  --oq-abschluss-breite: 1320px;
  --oq-abschluss-innen-block: clamp(72px, 9vw, 132px);
  --oq-abschluss-innen-inline: clamp(20px, 4vw, 56px);
  --oq-abschluss-spalten-abstand: clamp(28px, 4vw, 64px);
  --oq-abschluss-medien-abstand: clamp(24px, 3.5vw, 56px);
  --oq-abschluss-medien-hoehe: clamp(300px, 34vw, 440px);
  --oq-abschluss-medien-hoehe-flaeche: clamp(340px, 38vw, 480px);

  --oq-farbe-text-leise: color-mix(in oklab, var(--oq-farbe-text) 74%, var(--oq-farbe-flaeche));
  --oq-farbe-linie: color-mix(in oklab, var(--oq-farbe-text) 18%, var(--oq-farbe-flaeche));

  position: relative;
  container-type: inline-size;
  background: var(--oq-farbe-flaeche);
  color: var(--oq-farbe-text);
}

.oq-v7 .oq-abschluss__in {
  max-width: var(--oq-abschluss-breite);
  margin-inline: auto;
  padding-inline: var(--oq-abschluss-innen-inline);
  padding-block: var(--oq-abschluss-innen-block);
}

.oq-v7 .oq-abschluss--linie {
  border-top: 1px solid var(--oq-farbe-linie);
}

/* --- Die vier Flaechenrollen -----------------------------------------
   variant-dark(-alt)     dunkler Grund im Ton der Marke ("main")
   variant-branded(-alt)  Markenflaeche
   variant-neutral(-alt)  gedeckte Flaeche
   variant-white(-alt)    Grundflaeche, deshalb ohne eigene Regel
   Kein variant-accent — die Vorgabe kennt nur diese vier Flaechen. */
.oq-v7 .oq-abschluss.variant-dark {
  --oq-farbe-flaeche: var(--oq-farbe-dunkel);
  --oq-farbe-text: var(--oq-farbe-dunkel-text);
}

.oq-v7 .oq-abschluss.variant-dark-alt {
  --oq-farbe-flaeche: var(--oq-farbe-dunkel-alt);
  --oq-farbe-text: var(--oq-farbe-dunkel-text);
}

.oq-v7 .oq-abschluss.variant-branded,
.oq-v7 .oq-abschluss.variant-branded-alt {
  --oq-farbe-flaeche: var(--oq-farbe-marke);
  --oq-farbe-text: var(--oq-farbe-marke-kontrast);
}

.oq-v7 .oq-abschluss.variant-neutral,
.oq-v7 .oq-abschluss.variant-neutral-alt {
  --oq-farbe-flaeche: var(--oq-farbe-flaeche-alt);
}

/* Die Marke als Dachzeilen-/Button-Farbe wuerde auf der eigenen Flaeche
   verschwinden — dieselbe Umschreibung wie bei stage.css. */
.oq-v7 .oq-abschluss.variant-branded .oq-abschluss__in,
.oq-v7 .oq-abschluss.variant-branded-alt .oq-abschluss__in {
  --oq-farbe-marke: var(--oq-farbe-text);
  --oq-farbe-marke-kontrast: var(--oq-farbe-flaeche);
}

/* --- Aufbau: links (Default), mitte, statement -------------------------
   max-width 700px auf jedem direkten Kind — v6-Standardbreite
   (SectionContent::narrowWidthFields(), section-intro.twig max-w-[700px]),
   damit Fliesstext nicht ueber die volle 1320px-Sektionsbreite laeuft. */

.oq-v7 .oq-abschluss--aufbau-links .oq-abschluss__in > *,
.oq-v7 .oq-abschluss--aufbau-mitte .oq-abschluss__in > * {
  max-width: 700px;
}

/* Fliesstext soll die volle Sektionsbreite nutzen statt der 700px-
   Lesebreite der uebrigen Kinder (Dachzeile/Headline/Modul) -- explizite
   Ausnahme wie beim __html-Kind unten, hoehere Spezifitaet noetig weil beide
   Regeln dieselbe Klassenzahl haben. */
.oq-v7 .oq-abschluss--aufbau-links .oq-inhalt__text,
.oq-v7 .oq-abschluss--aufbau-mitte .oq-inhalt__text {
  max-width: none;
}

/* .oq-abschluss__html (html-code.v7.twig) traegt freies, embedded HTML —
   Formulare, Banner, Breitendarstellungen. Anders als Dachzeile/Headline/
   Fliesstext gibt es dafuer keine Lesebreiten-Begruendung, und es steht nie
   neben einem zweiten Element, das die 700px-Spalte rechtfertigen wuerde
   (aufbau "zwei" hat gar keine max-width, siehe oben) — deshalb hier explizit
   ausgenommen statt die Grenze fuer alle Aufbauformen aufzuweichen. */
.oq-v7 .oq-abschluss--aufbau-links .oq-abschluss__in > .oq-abschluss__html,
.oq-v7 .oq-abschluss--aufbau-mitte .oq-abschluss__in > .oq-abschluss__html {
  max-width: none;
}

/* Nachgebautes v6-Feld "Fullwidth" (SectionContent::hasFullWidth(), Feld
   "fullwidth", App\V7\Inhalt::aus()): hebt die 700px-Grenze fuer Aufbau
   links/mitte wieder auf. Hoehere Spezifitaet (drei statt zwei Klassen)
   statt Reihenfolge im Stylesheet, damit die Regel unabhaengig davon
   gewinnt, wo dieser Block in einer kuenftigen Bearbeitung landet. Aufbau
   "statement" bleibt bewusst aussen vor — die grosse Einzelaussage ist
   immer schmal, unabhaengig vom Fullwidth-Feld. */
.oq-v7 .oq-abschluss--voll.oq-abschluss--aufbau-links .oq-abschluss__in > *,
.oq-v7 .oq-abschluss--voll.oq-abschluss--aufbau-mitte .oq-abschluss__in > * {
  max-width: none;
}

.oq-v7 .oq-abschluss--aufbau-mitte .oq-abschluss__in,
.oq-v7 .oq-abschluss--aufbau-statement .oq-abschluss__in {
  text-align: center;
}

.oq-v7 .oq-abschluss--aufbau-mitte .oq-abschluss__in > *,
.oq-v7 .oq-abschluss--aufbau-statement .oq-abschluss__in > * {
  margin-inline: auto;
}

/* Unter 560px lohnt Zentrierung nicht mehr, wie in der Vorgabe. */
@container (max-width: 560px) {
  .oq-v7 .oq-abschluss--aufbau-mitte .oq-abschluss__in,
  .oq-v7 .oq-abschluss--aufbau-statement .oq-abschluss__in {
    text-align: left;
  }

  .oq-v7 .oq-abschluss--aufbau-mitte .oq-abschluss__in > *,
  .oq-v7 .oq-abschluss--aufbau-statement .oq-abschluss__in > * {
    margin-inline: 0;
  }
}

/* --- Aufbau: statement ---------------------------------------------------
   Eigene, deutlich groessere Typografie fuer die Einzelaussage — ersetzt
   die 56ch-Grenze der Headline durch 20ch, wie t-statement in der Vorgabe. */
.oq-v7 .oq-abschluss--aufbau-statement .oq-inhalt__headline {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(2.4rem, 5.4cqw, 4.4rem);
  font-weight: 750;
  line-height: 0.99;
  letter-spacing: -0.035em;
}

/* --- Aufbau: zwei ---------------------------------------------------------
   Grid-Zeilen sind projektuebergreifende Spuren: ein Element in Spalte 1/
   Zeile 2 startet erst nach der Hoehe von Zeile 1 UEBER BEIDE SPALTEN, nicht
   nur seiner eigenen. Ein Grid kann aus einer flachen Kind-Liste deshalb
   keine zwei unabhaengig hohen Spalten bauen (im Browser verifiziert: die
   Headline landete neben dem Modul statt am Kopf der linken Spalte, sobald
   der Fliesstext hoeher war als die Dachzeile). Float loest das, wie vor
   Flexbox/Grid ueblich: die linke Spalte wird per float aus dem Fluss
   genommen und bekommt damit ihre eigene, vom rechten Inhalt unabhaengige
   Hoehe; die rechte Spalte bekommt einen Einzug (margin-inline-start), der
   ihr ausweicht. */
.oq-v7 .oq-abschluss--aufbau-zwei .oq-abschluss__in {
  display: flow-root;
}

.oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__roofline,
.oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__headline {
  float: inline-start;
  clear: inline-start;
  width: calc(5 / 12 * 100% - var(--oq-abschluss-spalten-abstand) / 2);
}

.oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__text,
.oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__liste,
.oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__tabelle-scroll,
.oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__kennzahlen,
.oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__zitat,
.oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__shortcode,
.oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__aufklapper,
.oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__aktionen,
.oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__trust {
  margin-inline-start: calc(5 / 12 * 100% + var(--oq-abschluss-spalten-abstand) / 2);
}

@container (max-width: 820px) {
  .oq-v7 .oq-abschluss__in {
    padding-block: clamp(52px, 8vw, 72px);
  }

  .oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__roofline,
  .oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__headline,
  .oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__text,
  .oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__liste,
  .oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__tabelle-scroll,
  .oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__kennzahlen,
  .oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__zitat,
  .oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__shortcode,
  .oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__aufklapper,
  .oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__aktionen,
  .oq-v7 .oq-abschluss--aufbau-zwei .oq-inhalt__trust {
    float: none;
    width: auto;
    margin-inline-start: 0;
    clear: none;
  }
}

/* --- Medienvariante: keiner (schmales Band, Full-Width-Banner Vorgabe D) --
   Aussage links, Aktion rechts, eine Zeile hoch — fuer den Zwischenruf ohne
   Bild. Dieselbe Float-Technik wie bei aufbau-zwei: die Aktionen-Zeile wird
   per float aus dem Fluss genommen, der Kopf (Dachzeile/Headline/Text)
   flieszt rechts daran vorbei, solange beides in eine Zeile passt. */
.oq-v7 .oq-abschluss--medien-keiner .oq-abschluss__in {
  padding-block: clamp(30px, 3.6vw, 48px);
}

.oq-v7 .oq-abschluss--medien-keiner .oq-inhalt__headline {
  max-width: 26ch;
}

.oq-v7 .oq-abschluss--medien-keiner .oq-inhalt__aktionen {
  float: inline-end;
  clear: inline-end;
  margin-inline-start: var(--oq-abschluss-spalten-abstand);
  margin-block-start: 0;
}

@container (max-width: 560px) {
  .oq-v7 .oq-abschluss--medien-keiner .oq-inhalt__aktionen {
    float: none;
    clear: none;
    margin-inline-start: 0;
    margin-block-start: var(--oq-space-m);
  }
}

/* --- Medienvariante: rechts/links (Bild randlos, Full-Width-Banner
   Vorgabe A/B) --------------------------------------------------------------
   Dieselbe Drei-Spalten-Rechnung wie in der Vorgabe: die aeusseren Spuren
   nehmen Zentrieroffset bzw. Bildflaeche auf, die Textspalte bleibt auf
   halber Rasterbreite buendig zu den uebrigen Abschnitten. Kein 100vw plus
   negativem Rand (Bildlaufleisten-Problem auf Windows), siehe abschluss.css
   Kommentarkopf und die Begruendung in der Vorgabe selbst. */
.oq-v7 .oq-abschluss--medien-rechts .oq-abschluss__medienraster,
.oq-v7 .oq-abschluss--medien-links .oq-abschluss__medienraster {
  display: grid;
  align-items: stretch;
  min-height: var(--oq-abschluss-medien-hoehe);
}

.oq-v7 .oq-abschluss--medien-rechts .oq-abschluss__medienraster {
  grid-template-columns:
    minmax(var(--oq-abschluss-innen-inline), calc((100% - var(--oq-abschluss-breite)) / 2 + var(--oq-abschluss-innen-inline)))
    minmax(0, calc(var(--oq-abschluss-breite) / 2 - var(--oq-abschluss-innen-inline)))
    minmax(0, 1fr);
}

.oq-v7 .oq-abschluss--medien-rechts .oq-abschluss__medientext {
  grid-column: 2;
}

.oq-v7 .oq-abschluss--medien-rechts .oq-abschluss__medium {
  grid-column: 3;
}

.oq-v7 .oq-abschluss--medien-links .oq-abschluss__medienraster {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, calc(var(--oq-abschluss-breite) / 2 - var(--oq-abschluss-innen-inline)))
    minmax(var(--oq-abschluss-innen-inline), calc((100% - var(--oq-abschluss-breite)) / 2 + var(--oq-abschluss-innen-inline)));
}

.oq-v7 .oq-abschluss--medien-links .oq-abschluss__medium {
  grid-column: 1;
}

.oq-v7 .oq-abschluss--medien-links .oq-abschluss__medientext {
  grid-column: 2;
}

.oq-v7 .oq-abschluss__medientext {
  /* Eigenstaendige Box, keine .oq-abschluss__in-Klasse — die Position kommt
     bei rechts/links von der Grid-Spur, bei flaeche von der Karte, nicht von
     einer zentrierten max-width/margin-Basis. */
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  padding-block: var(--oq-abschluss-innen-block);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.oq-v7 .oq-abschluss--medien-rechts .oq-abschluss__medientext {
  padding-inline-end: var(--oq-abschluss-medien-abstand);
}

.oq-v7 .oq-abschluss--medien-links .oq-abschluss__medientext {
  padding-inline-start: var(--oq-abschluss-medien-abstand);
}

.oq-v7 .oq-abschluss__medium {
  position: relative;
  min-width: 0;
  margin: 0;
  background: var(--oq-farbe-flaeche-alt);
}

.oq-v7 .oq-abschluss__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oq-v7 .oq-abschluss--medien-rechts .oq-abschluss__bild,
.oq-v7 .oq-abschluss--medien-links .oq-abschluss__bild {
  position: absolute;
  inset: 0;
}

/* Imagify-Kompatibilitaet: live wrappt Imagify ein nacktes <img> in ein
   <picture>-Element und verschiebt dabei Klasse und style-Attribut aufs
   <picture> — dieselbe Absicherung wie in text-media.css und stage.css. */
.oq-v7 picture.oq-abschluss__bild {
  display: block;
  width: 100%;
  height: 100%;
}

.oq-v7 .oq-abschluss--medien-rechts picture.oq-abschluss__bild,
.oq-v7 .oq-abschluss--medien-links picture.oq-abschluss__bild {
  position: absolute;
  inset: 0;
}

.oq-v7 picture.oq-abschluss__bild > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@container (max-width: 820px) {
  /* Bleibt ein Grid (nicht display:block): "order" reorganisiert nur
     Flex-/Grid-Items, nicht Blockkinder — das Bild soll trotz Text-zuerst im
     Markup (siehe full-width-banner.v7.twig) oben stehen, wie in der Vorgabe
     und bei oq-textmedia. */
  .oq-v7 .oq-abschluss--medien-rechts .oq-abschluss__medienraster,
  .oq-v7 .oq-abschluss--medien-links .oq-abschluss__medienraster {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .oq-v7 .oq-abschluss--medien-rechts .oq-abschluss__medium,
  .oq-v7 .oq-abschluss--medien-links .oq-abschluss__medium {
    grid-column: 1;
    order: -1;
    min-height: clamp(200px, 44vw, 280px);
  }

  .oq-v7 .oq-abschluss--medien-rechts .oq-abschluss__medientext,
  .oq-v7 .oq-abschluss--medien-links .oq-abschluss__medientext {
    grid-column: 1;
    padding-inline: var(--oq-abschluss-innen-inline);
    padding-block: clamp(32px, 6vw, 44px);
  }
}

/* --- Medienvariante: flaeche (Bild als Flaeche mit Textfeld, Full-Width-
   Banner Vorgabe E) -----------------------------------------------------
   Text steht nie direkt auf dem Foto: die Karte liegt in der Markenfarbe
   ueber dem Bild, damit der Kontrast unabhaengig vom Motiv feststeht. */
.oq-v7 .oq-abschluss--medien-flaeche .oq-abschluss__medienraster {
  position: relative;
  min-height: var(--oq-abschluss-medien-hoehe-flaeche);
  background: var(--oq-farbe-flaeche-alt);
}

.oq-v7 .oq-abschluss--medien-flaeche .oq-abschluss__medium {
  position: absolute;
  inset: 0;
}

/* Die Karte ist unabhaengig von der Section-Flaeche immer markenfarben —
   anders als die variant-branded-Umschreibung oben, die von der jeweils
   aktiven Flaeche ableitet. --oq-farbe-marke/-kontrast duerfen deshalb nicht
   direkt getauscht werden (Zirkelbezug: die Karte ist selbst ein
   .oq-abschluss__medientext-Nachfahre). Der Umweg ueber zwei auf dem
   Raster eingefrorene Kopien loest das, ohne die beiden Custom Properties
   gegenseitig voneinander abhaengig zu machen. */
.oq-v7 .oq-abschluss--medien-flaeche .oq-abschluss__medienraster {
  --oq-abschluss-karte-marke: var(--oq-farbe-marke);
  --oq-abschluss-karte-marke-kontrast: var(--oq-farbe-marke-kontrast);
}

.oq-v7 .oq-abschluss--medien-flaeche .oq-abschluss__medientext {
  position: relative;
  z-index: 1;
  max-width: calc(var(--oq-abschluss-breite) / 2 + 60px);
  margin: clamp(28px, 3.4vw, 44px) auto;
  padding: clamp(30px, 3.6vw, 48px);
  background: var(--oq-abschluss-karte-marke);
  color: var(--oq-abschluss-karte-marke-kontrast);
  border-radius: var(--oq-radius-gross);
  /* Dachzeile und primaerer Button lesen --oq-farbe-marke/-kontrast (kern.css)
     — ohne diesen Tausch waeren beide unsichtbar auf der eigenen Karte. */
  --oq-farbe-marke: var(--oq-abschluss-karte-marke-kontrast);
  --oq-farbe-marke-kontrast: var(--oq-abschluss-karte-marke);
}

@container (max-width: 820px) {
  .oq-v7 .oq-abschluss--medien-flaeche .oq-abschluss__medienraster {
    min-height: 0;
  }

  /* Bugfix (nach v6->v7-Migration gemeldet): min-height reichte hier nicht
     — .medium hat dadurch keine definite Hoehe, .oq-abschluss__bild greift
     mit seinem `height: 100%` (Basisregel oben) dann ins Leere und faellt
     laut Spezifikation auf 'auto' zurueck. Bei einer indefinite Elternhoehe
     bestimmt dann statt dem 100%-Fuellen ausschliesslich das inline
     `aspect-ratio` der echten Datei (components/elements/image.twig) die
     Bildhoehe — ein breites/panoramaartiges Motiv blieb dadurch unter der
     280px-Vorgabe und liess eine Luecke im Container. `height` statt
     `min-height` gibt .medium eine definite Hoehe zurueck, ohne den Fluss-
     Charakter zu verlieren (bewusst kein position:absolute hier — die
     Karte darunter muss ueber dem Bild ueberlappen koennen, siehe
     margin-block-start unten). */
  .oq-v7 .oq-abschluss--medien-flaeche .oq-abschluss__medium {
    position: relative;
    inset: auto;
    height: clamp(200px, 44vw, 280px);
  }

  .oq-v7 .oq-abschluss--medien-flaeche .oq-abschluss__medientext {
    margin-block: 0;
    margin-inline: var(--oq-abschluss-innen-inline);
    margin-block-start: calc(-1 * clamp(28px, 6vw, 44px));
    max-width: none;
    padding: clamp(24px, 4vw, 32px);
  }
}