/**
 * @file css/redesign/media.css - Redesign Welle W4 (Bild-/Video-/Overlay-Ebene)
 * Agent W4-3.
 *
 * VERBINDLICHES PRINZIP (Kundenanmerkung 309f1465). Es ERSETZT die frueher
 * gueltige Scrim-Spezifikation aus Spec 8.3 (Vollflaechen-Verlauf, 60 %
 * Mindestdeckung):
 *
 *   1. Ein Bild soll klar dargestellt werden. Keine Flaeche, die ein Bild
 *      fast nicht mehr darstellt.
 *   2. Videos duerfen LEICHT und GLEICHMAESSIG abgesenkt werden - ein
 *      flacher Vollton, nie ein Verlauf.
 *   3. Lesbarkeit der Typo entsteht LOKAL: eine ruhige Hintergrundflaeche
 *      hinter dem Textblock, nicht durch Abdunkeln des ganzen Motivs.
 *   4. Insgesamt keine Verlaeufe-Optik. Auch Platzhalter-/Fallback-Flaechen
 *      sind Volltoene.
 *   5. Keine Dauer-Abdunkelungsfilter (filter: brightness(<1)) auf Bildern.
 *
 * Rechenweg der Deckungswerte (WCAG 2.1, sRGB-Kompositing):
 *   Absenkung a1 = 0,30 (Motiv), Textflaeche a2 = 0,55 (nur hinter der Typo)
 *   -> Gesamtdeckung im Textfeld A = 1 - (1 - 0,30) * (1 - 0,55) = 0,685
 *   Worst Case "weisser Frame" (Y = 1,0):
 *     Kanal = A * Ink + (1 - A) * 255  mit Ink = rgb(11, 13, 14)
 *     -> rgb(88 / 89 / 90), Y = 0,0999
 *     -> Weiss auf Textflaeche: (1,00 + 0,05) / (0,0999 + 0,05) = 7,01:1
 *   Ohne Textflaeche (nur Absenkung 0,30) waeren es 2,02:1 - deshalb ist die
 *   lokale Flaeche zwingend und die Absenkung darf trotzdem dezent bleiben.
 *
 * Laedt nach style.min.css, welle-0.css, tokens.css, base.css, buttons.css,
 * header-footer.css. Rein additiv, ueberschreibt gezielt einzelne
 * Deklarationen. Zustaendigkeit: NUR Bild-/Video-/Overlay-Verhalten.
 * Die .feb-app-preview-Sektionen werden von W4-4 umgebaut und hier bewusst
 * NICHT angefasst.
 */

/* ============================================================
   0. Lokale Werte der Medien-Ebene
   Eigener Praefix --feb-media-*, damit tokens.css (W4-1) unberuehrt bleibt.
   ============================================================ */

:root {
  /* Grundton aller Absenkungen: --feb-ink #0B0D0E als RGB-Tripel. */
  --feb-media-ink-rgb: 11, 13, 14;

  /* Gleichmaessige, flache Absenkung ueber Bild/Video. Kein Verlauf. */
  --feb-media-damp: rgba(var(--feb-media-ink-rgb), 0.30);

  /* Ruhige Flaeche hinter der Typo. Kein Verlauf, kein Radius, kein
     Schatten - sie soll als Flaeche lesen, nicht als Karte. */
  --feb-media-plate: rgba(var(--feb-media-ink-rgb), 0.55);

  /* Luft zwischen Textkante und Flaechenkante. */
  --feb-media-plate-x: clamp(1.25rem, 2.4vw, 2rem);
  --feb-media-plate-y: clamp(1.25rem, 2.4vw, 2rem);
}

/* ============================================================
   1. HERO (Spec 01) und HERO MIT QUICK-FACTS (Spec 02)
   Startseite, /de/automatisierung, alle Branchenseiten.
   ============================================================ */

/* ============================================================
   1.0 HERO-HOEHE DER VIDEO-HEROES (W4-11, Kundenvorgabe
   "Hero-Hoehe wie Mercedes")
   ------------------------------------------------------------
   Vorgabe: das Video darf den Bildschirm nicht mehr ausfuellen, der
   Folgeinhalt soll unten schon hervorlugen.

   Bestand (css/style.css):
     .brm-hero              min-height 32rem
     .brm-hero  >=768px     aspect-ratio 16/9,  min-height 40rem,
                            max-height 92vh
     .brm-hero--quickfacts  min-height 38rem
     .brm-hero--quickfacts >=768px  aspect-ratio 16/10,
                            min-height 44rem, KEIN max-height
   Wirkung im Bestand: die Startseite lief auf 1440x900 auf 810 px
   (= 90 vh), die Branchenseiten mit Quick-Facts auf 1920x1080 sogar
   auf 1200 px - also 111 vh, das Video war hoeher als der Bildschirm.
   Unter dem Hero stand nichts mehr an.

   Neu: 84 svh ab 768 px, 78 svh darunter.
     1440x900  -> Hero 756 px, darunter 144 px der Folgesektion
      390x844  -> Hero 658 px, darunter 186 px der Folgesektion
   Der Kopfbereich liegt auf dem Hero (body{padding-top:0} bei
   Hero-Erstposition), die Prozentwerte messen also wirklich den
   sichtbaren Anteil.

   Warum svh und nicht vh: auf Mobilgeraeten rechnet vh mit dem
   GROESSTEN Viewport (eingeklappte Adressleiste). 84 vh waeren bei
   ausgeklappter Leiste wieder rund 95 % der sichtbaren Flaeche - der
   Effekt waere genau dann weg, wenn er gebraucht wird. svh rechnet
   mit dem kleinsten Viewport, das Hervorlugen ist damit im
   ungeguenstigsten Zustand garantiert. Die vh-Zeile davor ist der
   Rueckfall fuer Browser ohne svh-Einheit.

   Warum min-height und nicht height: .brm-hero traegt overflow:hidden.
   Eine feste Hoehe wuerde Headline, Lead, CTAs und Quick-Facts auf
   niedrigen oder querformatigen Viewports abschneiden. min-height
   deckelt nur den LEERRAUM; reicht der Platz fuer den Inhalt nicht,
   waechst die Sektion und es geht nichts verloren.

   Geltungsbereich: ausschliesslich Heroes mit Hintergrund-VIDEO
   (Startseite, die acht Branchenseiten, /automatisierung und
   /automation). :has() prueft das am Markup, dadurch greift die
   Regel ohne Zutun von JavaScript und ohne Umbruch beim Laden.
   Bild-Heroes (Technologie-, Unternehmensseiten) bleiben bewusst
   unveraendert - sie waren nicht Teil der Anmerkung. Falls der
   Auftraggeber dieselbe Hoehe dort ebenfalls will, genuegt es,
   ":has(video[data-brm-autoplay-video])" aus beiden Selektoren zu
   streichen.
   ============================================================ */

.brm-hero--has-bg:has(video[data-brm-autoplay-video]) {
  aspect-ratio: auto;
  max-height: none;
  min-height: 78vh;
  min-height: 78svh;
}

@media (min-width: 768px) {
  .brm-hero--has-bg:has(video[data-brm-autoplay-video]) {
    min-height: 84vh;
    min-height: 84svh;
  }
}

/* 1.1 Vorher: 180deg-Verlauf in drei Stufen (0,15 -> 0,35 -> 0,65).
       Nachher: ein flacher Vollton bei 0,30 - das Video bleibt in seiner
       ganzen Flaeche erkennbar, die Absenkung ist an keiner Stelle staerker
       als an einer anderen. */
.brm-hero .brm-hero__overlay {
  background: var(--feb-media-damp);
}

/* 1.2 Textflaeche hinter dem Hero-Textblock.
       Sie sitzt als Pseudo-Element HINTER Headline, Lead und Aktionen,
       laeuft nach links aus dem Bild heraus (bis zum Viewport-Rand) und
       endet rechts kurz hinter der Textspalte. Dadurch bleibt der Text
       exakt auf dem Seitenraster - keine Verschiebung durch Innenabstand -
       und rechts sowie oben bleibt das Motiv frei sichtbar. */
.brm-hero--has-bg .brm-hero__inner {
  position: relative;
  z-index: 0;
}

.brm-hero--has-bg .brm-hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--feb-media-plate-y));
  bottom: calc(-1 * var(--feb-media-plate-y));
  left: -100vw;
  right: calc(-1 * var(--feb-media-plate-x));
  background: var(--feb-media-plate);
  pointer-events: none;
}

/* 1.3 Quick-Facts-Kacheln liegen ebenfalls direkt auf dem Video und
       bekommen denselben Flaechenwert wie die Textflaeche - eine Sprache,
       zwei Traeger. Vorher rgba(0,0,0,.35), zusammen mit dem alten
       Verlauf am Fuss des Heros. */
.brm-hero--has-bg .brm-quickfacts__item {
  background: var(--feb-media-plate);
}

/* 1.4 Die gedimmten Mikro-Texte der Quick-Facts erreichen auf der
       Textflaeche sonst nur 4,42:1 (Label) bzw. 4,06:1 (Beschreibung).
       Auf 0,80 Deckkraft angehoben: 5,20:1 im Worst Case. */
.brm-hero--has-bg .brm-quickfacts__label,
.brm-hero--has-bg .brm-quickfacts__desc {
  color: rgba(255, 255, 255, 0.8);
}

/* 1.5 Hero OHNE Hintergrundmedium: vorher ein 135deg-Verlauf ueber drei
       Stufen, jetzt die ruhige Ink-Flaeche. */
.brm-hero:not(.brm-hero--has-bg) {
  background: var(--feb-ink, #0b0d0e);
}

/* 1.6 Hoehere Kontrastanforderung des Systems: Flaeche fester ziehen,
       Motiv aber weiterhin nicht zusaetzlich abdunkeln. */
@media (prefers-contrast: more) {
  :root {
    --feb-media-plate: rgba(var(--feb-media-ink-rgb), 0.72);
  }
}

/* ============================================================
   2. NEWS-HERO (Beitragsdetailseiten)
   ============================================================ */

/* 2.1 Vorher: Verlauf nach oben in drei Stufen (0,8 -> 0,4 -> 0,1) ueber dem
       Beitragsbild - der untere Bildbereich war praktisch geschlossen.
       Nachher: derselbe flache 0,30-Vollton wie im Hero. */
.news-hero::after {
  background: var(--feb-media-damp);
}

/* 2.2 Textflaeche hinter Titel und Meta-Zeile. Das Band laeuft ueber die
       volle Breite (der Textblock tut das auch), umfasst aber nur die
       Texthoehe plus Luft - der Innenabstand des Heros bleibt Bild. */
.news-hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--feb-media-plate-y);
  bottom: var(--feb-media-plate-y);
  left: -100vw;
  right: -100vw;
  background: var(--feb-media-plate);
  pointer-events: none;
}

/* ============================================================
   3. CTA MIT BILD (Spec 22)
   Text und Bild liegen hier nebeneinander, es wird also nichts verdeckt.
   Zu ersetzen ist nur die Verlaufs-Platzhalterflaeche hinter dem Bild.
   ============================================================ */

.brm-cta-image__media,
.brm-cta-image__bg {
  background: var(--feb-ink, #0b0d0e);
}

/* Falls die Overlay-Ebene der Spec je gerendert wird: flach statt Verlauf. */
.brm-cta-image__overlay {
  background: var(--feb-media-damp);
}

/* ============================================================
   4. BILDER GRUNDSAETZLICH
   ============================================================ */

/* 4.1 Hero-Hintergruende tragen keinen Dauerfilter. Explizit gesetzt,
       damit spaetere Sektions-CSS aus dem Content nicht wieder abdunkelt. */
.brm-hero__bg-img,
.news-hero__media img {
  filter: none;
}

/* 4.2 Bewegung respektieren: ohne Video (reduced motion greift in
       js/hero-video.js) traegt das Poster dieselbe Behandlung - hier ist
       nichts zu tun, die Regeln oben gelten fuer <img> und <video>
       gleichermassen. Dieser Hinweis steht bewusst als Kommentar. */

/* ============================================================
   5. PAUSE-SCHALTER DER HERO-VIDEOS (W4-11)
   ------------------------------------------------------------
   WCAG 2.2.2 (Pause, Stop, Hide): bewegter Inhalt, der automatisch
   startet und laenger als fuenf Sekunden laeuft, braucht eine
   Bedienmoeglichkeit zum Anhalten. Die Hero-Videos laufen in
   Endlosschleife - der Schalter ist also Pflicht und nicht Kuer.

   Kundenwunsch dazu: "sehr dezent wie bei MB". Deshalb ein kleiner
   runder Ghost-Button unten rechts, kein Beschriftungstext, keine
   Farbe. Er wird von js/hero-video.js erzeugt und existiert nur bei
   Video-Heroes - reine Bild-Heroes bekommen ihn nicht, weil es dort
   nichts anzuhalten gibt.

   Warum unten rechts und nicht im Inhaltsfluss: .brm-hero__content
   traegt unten 3 rem (mobil) bzw. 3,5 rem (ab 768 px) Innenabstand.
   Der Schalter sitzt vollstaendig in diesem Streifen, also UNTER
   Headline, Lead, CTAs und Quick-Facts. Er kann sie damit auf keiner
   Breite ueberdecken: 2,5 rem Hoehe + 0,75 rem Abstand = 3,25 rem
   passen unter die 3,5 rem des Desktop-Streifens, mobil sind es
   2,5 rem + 0,5 rem = 3 rem bei 3 rem Streifen.

   Kontrast: die Flaeche ist derselbe Vollton wie die Textflaeche
   (--feb-media-plate, 0,55) und liegt wie diese ueber der Absenkung
   0,30. Gesamtdeckung 0,685, im Worst Case "weisser Frame" also
   rgb(88/89/90) - das weisse Symbol steht darauf bei 7,01:1 (Rechenweg
   im Dateikopf). Das erfuellt 1.4.11 (>= 3:1 fuer Bedienelemente) mit
   grossem Abstand, obwohl der Schalter optisch zurueckhaltend bleibt.
   ============================================================ */

.brm-hero__mediatoggle {
  position: absolute;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(0.5rem, 1.2vw, 0.75rem);
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;

  /* Der einzige Radius im ganzen System - eine runde Marke liest als
     Player-Bedienung und nicht als Inhalts-Button. Bewusste Ausnahme
     zur Radius-0-Regel, genau wie bei der Referenz. */
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: var(--feb-media-plate);
  color: #fff;
  cursor: pointer;

  -webkit-appearance: none;
  appearance: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.brm-hero__mediatoggle:hover,
.brm-hero__mediatoggle:focus-visible {
  background: rgba(var(--feb-media-ink-rgb), 0.72);
  border-color: rgba(255, 255, 255, 0.85);
}

/* Fokusring monochrom - Weiss auf dunkler Flaeche, gleiche Breite und
   gleicher Versatz wie im uebrigen Buttonsystem (--feb-focus-*). */
.brm-hero__mediatoggle:focus-visible {
  outline: var(--feb-focus-width, 2px) solid var(--feb-focus-inverse, #fff);
  outline-offset: var(--feb-focus-offset, 2px);
}

/* Symbol: 14 px, currentColor - erbt also das Weiss des Schalters. */
.brm-hero__mediatoggle svg {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
  pointer-events: none;
}

/* Nur eines der beiden Symbole ist sichtbar. Umschaltung ueber
   aria-pressed, damit Zustand und Darstellung nicht auseinanderlaufen
   koennen: das Attribut ist die einzige Quelle der Wahrheit.
   aria-pressed="true" = angehalten -> Play-Dreieck (naechste Aktion),
   aria-pressed="false" = laeuft     -> Pause-Balken. */
.brm-hero__mediatoggle .brm-hero__mediatoggle-play,
.brm-hero__mediatoggle[aria-pressed="true"] .brm-hero__mediatoggle-pause {
  display: none;
}

.brm-hero__mediatoggle[aria-pressed="true"] .brm-hero__mediatoggle-play {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .brm-hero__mediatoggle {
    transition: none;
  }
}