/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.2
 Text Domain:  bricks
*/

/* ==========================================================================
   LAYER 1: FONT FACE — CUSTOM FONTS - Mont (CI-Font) & BD Megalona

   Mont: Premium Corporate Identity Font
   - 6 Weights (100-900) + Italic Varianten
   - Wird als Standard-Font für body verwendet
   - Bricks Theme Styles überschreiben bei expliziter Auswahl

   BD Megalona: Ergänzende Serif-Font
   - Nur Regular Weight
   ========================================================================== */

/* --------------------------------------------------------------------------
   MONT - Normal Weights
   -------------------------------------------------------------------------- */

/* Mont Thin (100) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-100.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-100.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Mont Light (300) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-300.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-300.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Mont Regular (400) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Regular.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Mont SemiBold (600) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-600.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-600.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Mont Bold (700) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-700.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Mont Black (900) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-900.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-900.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   MONT - Italic Weights
   -------------------------------------------------------------------------- */

/* Mont Thin Italic (100) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Italic-100.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Italic-100.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* Mont Light Italic (300) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Italic-300.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Italic-300.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Mont Regular Italic (400) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Italic-Regular.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Italic-Regular.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Mont SemiBold Italic (600) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Italic_600.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Italic_600.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Mont Bold Italic (700) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Italic-700.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Italic-700.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Mont Black Italic (900) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Italic-900.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Italic-900.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   BD MEGALONA - Serif Font
   -------------------------------------------------------------------------- */

/* BD Megalona Regular */
@font-face {
    font-family: 'BD Megalona';
    src: url('assets/fonts/bdmegalona/BDMegalona-Regular.woff2') format('woff2'),
         url('assets/fonts/bdmegalona/BDMegalona-Regular.woff') format('woff'),
         url('assets/fonts/bdmegalona/BDMegalona-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   DEFAULT TYPOGRAPHY

   Mont als Standard-Font für alle Textelemente.
   Bricks Theme Styles überschreiben diese Einstellungen wenn explizit gesetzt.
   ========================================================================== */

body {
    font-family: 'Mont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

/* ============================================================
   LAYER 2: VIEWPORT VARIABLES
   ============================================================ */
 
:root {
  --dvh: 1dvh;
  --svh: 1svh;
}

/* ============================================================
   LAYER 3: CONTEXT COLOR SYSTEM (v2.0 — S027, 2026-04-19)
   Elemente erben Farben aus ihrem Kontext.
   .on-dark / .on-light werden in Bricks auf Sections gesetzt.
   Raw-Anchors kommen aus Bricksbuilder Color Palette
   (ice, mist, signal, deep, obsidian, graphite, tide, frost + Shades).
   ============================================================ */

body,
.on-light {
  /* Backgrounds */
  --color-bg-page:        var(--ice);           /* #F3F6F8 */
  --color-bg-surface:     var(--mist);          /* #D4DDE2 */
  --color-bg-field:       #FFFFFF;              /* Weiss fuer klaren Kontrast */

  /* Text — 9-stufige Signal-Rampe (Signal Type Colors) */
  --color-display:        #051014;              /* Hero, groesste Headlines, volle Tiefe */
  --color-headline:       #0D1E24;              /* Hauptueberschriften */
  --color-subhead:        #1F3740;              /* Zwischenueberschriften */
  --color-body:           #2F4A54;              /* Fliesstext */
  --color-lead:           #3D5862;              /* Intro-Absaetze */
  --color-meta:           #6B8189;              /* Eyebrow, Labels, Mono */
  --color-caption:        #8EA2A9;              /* Bild-Unterschriften, Footnotes */
  --color-rule:           #DCE4E7;              /* Divider, Trennlinien */
  --color-disabled:       #B7C4C9;              /* Deaktivierter Text */
  --color-link:           #007A88;              /* Hyperlinks (deep-cyan) */

  /* Brand */
  --color-primary:        var(--signal);        /* #00E5FF */
  --color-primary-accent: var(--deep);          /* #007A88 */

  /* Borders */
  --color-border:         var(--mist-d-1);      /* #B6BDC2 */
  --color-border-hover:   var(--obsidian-l-2);  /* #4C5154 */

  /* State Colors (fix im Child-Theme, Signal-Forms-Tone) */
  --color-success:        #1A9A6A;
  --color-success-soft:   #E4F5ED;
  --color-error:          #D84A3D;
  --color-error-soft:     #FCE8E5;
  --shadow-focus:         rgba(0, 229, 255, 0.2);

  /* Rueckwaerts-Kompatibilitaet — Aliases auf neue Rampe */
  --color-text:           var(--color-body);    /* Alias fuer Bestand */
  --color-text-muted:     var(--color-meta);    /* Alias fuer Bestand */
  --color-text-subtle:    var(--color-caption); /* Alias fuer Bestand */
  --color-divider:        var(--color-rule);    /* Alias fuer Bestand */
}

.on-dark {
  /* Backgrounds */
  --color-bg-page:        var(--obsidian);      /* #050C10 */
  --color-bg-surface:     var(--graphite);      /* #0E1A20 */
  --color-bg-field:       var(--graphite-l-1);  /* #303B40 */

  /* Text — 9-stufige Signal-Rampe (invertiert) */
  --color-display:        #E6F4F7;
  --color-headline:       #D5E7EC;
  --color-subhead:        #B8CDD3;
  --color-body:           #9BB3BB;
  --color-lead:           #8AA3AC;
  --color-meta:           #637880;
  --color-caption:        #4C5E65;
  --color-rule:           #162128;
  --color-disabled:       #2D3A40;
  --color-link:           #00E5FF;              /* Signal-Cyan fuer Dark-Links */

  /* Brand */
  --color-primary:        var(--signal);        /* #00E5FF — identisch */
  --color-primary-accent: var(--tide);          /* #7EC9D4 */

  /* Borders */
  --color-border:         var(--graphite-l-2);  /* #535B60 */
  --color-border-hover:   var(--frost-d-1);     /* #C5D1D4 */

  /* State Colors (dark variants) */
  --color-success:        #4AD89C;
  --color-success-soft:   #0F2920;
  --color-error:          #FF6E62;
  --color-error-soft:     #2A1513;
  --shadow-focus:         rgba(0, 229, 255, 0.25);

  /* Rueckwaerts-Kompatibilitaet — Aliases */
  --color-text:           var(--color-body);
  --color-text-muted:     var(--color-meta);
  --color-text-subtle:    var(--color-caption);
  --color-divider:        var(--color-rule);
}

/* ============================================================
   LAYER 3b: (entfernt S027, 2026-04-19)
   Vorher enthielten wir Fallback-Color-Regeln auf h1 bis h6, p,
   a etc. — die ueberschrieben aber die Worker-Klassen aus
   Bricksbuilder (.color-headline, .color-body etc.) wegen
   hoeherer Spezifitaet. Jetzt keine Color-Zuweisungen auf puren
   HTML-Tags — Worker-Klassen sind SSOT.
   ============================================================ */

/* ============================================================
   LAYER 3c: GLOBAL FORM TOKENS (v2.0 — S027)
   Form-spezifische Tokens — Geometrie, Labels, Transition.
   State-Farben leben in Layer 3 (.on-light / .on-dark).
   ============================================================ */

:root {
  /* Form Field Geometry */
  --form-field-height:               50px;
  --form-field-radius:               var(--radius-button, 8px);
  --form-field-padding:              0.75rem 1rem;
  --form-focus-width:                2px;

  /* Label-Typography Tokens (Rolle 1 — Floating-Idle) */
  --form-label-floating-idle-size:   16px;
  --form-label-floating-idle-lh:     22px;
  --form-label-floating-idle-weight: 300;

  /* Rolle 2 — Floating-Active: fix, keine Skalierung */
  --form-label-floating-active-size:   13px;
  --form-label-floating-active-lh:     17px;
  --form-label-floating-active-weight: 300;

  /* Rolle 3 — Permanent (Select2, Native Select) */
  --form-label-permanent-size:       13px;
  --form-label-permanent-lh:         17px;
  --form-label-permanent-weight:     300;

  /* Rolle 4 — Group (Checkbox/Radio-Gruppen-Titel, Meta-Stil) */
  --form-label-group-size:           13px;
  --form-label-group-lh:             1.3;
  --form-label-group-weight:         500;
  --form-label-group-ls:             0.02em;
  --form-label-group-transform:      uppercase;
  --form-label-group-margin-bottom:  12px;

  /* Rolle 5 — Item (Beschriftung neben Checkbox/Radio) */
  --form-label-item-size:            15px;
  --form-label-item-lh:              1.4;
  --form-label-item-weight:          400;

  /* Rolle 6 — Feedback (Error- und Helper-Text) */
  --form-label-feedback-size:        13px;
  --form-label-feedback-lh:          1.4;
  --form-label-feedback-weight:      400;
  --form-label-feedback-padding-top: 6px;
}

/* ============================================================
   BASIS INPUT STYLES — universell (v2.0)
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  background-color: var(--color-bg-field);
  border: 1px solid var(--color-border);
  border-radius: var(--form-field-radius);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-body, 16px);
  font-weight: 300;
  min-height: var(--form-field-height);
  padding: var(--form-field-padding);
  width: 100%;
  transition: border-color var(--duration-medium, 200ms) var(--ease-default, ease),
              box-shadow var(--duration-medium, 200ms) var(--ease-default, ease);
  -webkit-appearance: none;
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--form-focus-width) var(--shadow-focus);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

label {
  color: var(--color-text-muted);
  font-size: var(--form-label-floating-idle-size);
  font-weight: var(--form-label-floating-idle-weight);
  letter-spacing: 0.015em;
}

/* ============================================================
   COLOR WORKER-KLASSEN (v2.0 — S027, 2026-04-19)
   Manuell in Bricksbuilder anwendbar — setzen Text-Farbe explizit.
   Nutzen die 9-stufige Signal-Rampe plus Link und Disabled.
   ============================================================ */

.color-display   { color: var(--color-display); }
.color-headline  { color: var(--color-headline); }
.color-subhead   { color: var(--color-subhead); }
.color-body      { color: var(--color-body); }
.color-lead      { color: var(--color-lead); }
.color-meta      { color: var(--color-meta); }
.color-caption   { color: var(--color-caption); }
.color-rule      { color: var(--color-rule); }
.color-disabled  { color: var(--color-disabled); }
.color-link      { color: var(--color-link); }
.color-primary   { color: var(--color-primary); }
.color-primary-accent { color: var(--color-primary-accent); }

/* Background Worker-Klassen */
.bg-page    { background-color: var(--color-bg-page); }
.bg-surface { background-color: var(--color-bg-surface); }
.bg-field   { background-color: var(--color-bg-field); }

/* Border Worker-Klassen */
.border-default { border-color: var(--color-border); }
.border-hover   { border-color: var(--color-border-hover); }
.border-rule    { border-color: var(--color-rule); }

/* State-Farben Worker-Klassen */
.color-success { color: var(--color-success); }
.color-error   { color: var(--color-error); }

/* ============================================================
   LABEL WORKER-KLASSEN (v2.0 — S027)
   Manuell in Bricksbuilder anwendbar
   ============================================================ */

.form-label-group {
  font-size:      var(--form-label-group-size);
  line-height:    var(--form-label-group-lh);
  font-weight:    var(--form-label-group-weight);
  letter-spacing: var(--form-label-group-ls);
  text-transform: var(--form-label-group-transform);
  color:          var(--color-text-muted);
  margin-bottom:  var(--form-label-group-margin-bottom);
  display:        block;
}

.form-label-item {
  font-size:   var(--form-label-item-size);
  line-height: var(--form-label-item-lh);
  font-weight: var(--form-label-item-weight);
  color:       var(--color-text);
  cursor:      pointer;
  user-select: none;
  margin:      0;
}

.form-label-feedback {
  font-size:   var(--form-label-feedback-size);
  line-height: var(--form-label-feedback-lh);
  font-weight: var(--form-label-feedback-weight);
  color:       var(--color-text-muted);
  padding-top: var(--form-label-feedback-padding-top);
  display:     block;
}

.form-label-feedback--error,
.wsf-field-wrapper.wsf-validated .form-label-feedback {
  color: var(--color-error);
}

/* ============================================================
   LAYER 4: HEADER INVERT SYSTEM
   ============================================================ */
 
.site-header {
  transition:
    color var(--duration-medium, 300ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1)),
    background-color var(--duration-medium, 300ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
}
 
.site-header .nav-link {
  color: var(--color-text);
  transition: color var(--duration-medium, 300ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
}
 
.site-header .logo {
  color: var(--color-headline);
  transition: color var(--duration-medium, 300ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
}
 
.site-header .cta {
  color: var(--color-headline);
  border-color: var(--color-border);
  transition:
    color var(--duration-medium, 300ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1)),
    border-color var(--duration-medium, 300ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
}

/* ============================================================
   emeu Link Arrow — Variante C (Rejouice-Style)
   Underline gleitet durch, Pfeil durchfliegt.
   Nutzt currentColor — erbt automatisch aus .on-dark / .on-light
   ============================================================ */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

.link-arrow .link-arrow-text {
  position: relative;
}

.link-arrow .link-arrow-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.link-arrow:hover .link-arrow-text::after {
  transform-origin: left;
  animation: emeu-underline-through 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes emeu-underline-through {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  50%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

.link-arrow .link-arrow-icon {
  position: relative;
  width: 1em;
  height: 1em;
  overflow: hidden;
  flex-shrink: 0;
}

.link-arrow .link-arrow-icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

.link-arrow .link-arrow-icon-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.link-arrow .link-arrow-icon-clone {
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  transform: translate(-100%, 100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.link-arrow:hover .link-arrow-icon-main {
  transform: translate(100%, -100%);
}

.link-arrow:hover .link-arrow-icon-clone {
  transform: translate(0, 0);
}

/* --- Variante: Headline-Links (groessere Schrift) --- */

.link-arrow-heading {
  font-size: var(--text-body);
  font-weight: 300;
  letter-spacing: 0.0125em;
}

/* --- Variante: Primary Accent Color --- */

.link-arrow-accent {
  color: var(--color-primary);
}

/* ============================================================
   emeu Link Underline — Through-Effekt (ohne Pfeil)
   ============================================================ */

.link-underline {
  text-decoration: none;
  position: relative;
  cursor: pointer;
}

.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.link-underline:hover::after {
  transform-origin: left;
  animation: emeu-underline-through 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* ============================================================
   emeu Link Swap — Text-Wechsel mit Stagger + Underline
   Nutzt currentColor — erbt automatisch aus .on-dark / .on-light
   
   Bricks / JetEngine Component:
   Klasse "link-swap" auf das <a>-Element setzen.
   Data-Attribute:
     data-primary="Sichtbarer Text"
     data-secondary="Hover Text"
   
   Varianten (zusätzliche Klasse):
     .link-swap-large    Grössere Schrift (Statement-Links)
   
   Das Script (link-swap.js) splittet die Buchstaben
   und erstellt die Underline automatisch.
   ============================================================ */

.link-swap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  color: currentColor;
  line-height: 1.4;
  padding-bottom: 5px;
}

.link-swap-inner {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.link-swap-primary {
  display: inline-flex;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.link-swap-secondary {
  display: inline-flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.link-swap-measure {
  display: inline-flex;
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
}

.link-swap-primary .char,
.link-swap-secondary .char {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  white-space: pre;
}

.link-swap:hover .link-swap-primary {
  transform: translateY(-100%);
}

.link-swap:hover .link-swap-secondary {
  transform: translateY(0);
}

.link-swap:hover .link-swap-primary .char {
  transform: translateY(-15%);
}

.link-swap:hover .link-swap-secondary .char {
  transform: translateY(-15%);
}

.link-swap-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  background: currentColor;
  transition: width 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

/* --- Variante: Groessere Links --- */

.link-swap-large {
  font-size: 22px;
  font-weight: 200;
  letter-spacing: -0.02em;
}

/* ============================================================
   UTILITY: sticky-bottom
   Haelt ein Element am unteren Rand seiner Sektion.
   Letztes sichtbares Element beim Scrollen (Hero-Footer Pattern).
   ============================================================ */

.sticky-bottom {
  position: sticky;
  bottom: 0;
}

/* ============================================================
   UNIT: Three Media Drag Slider (S027, 2026-04-19)
   Wiederverwendbare Unit im Unit-Namespace-Pattern
   (siehe epem-51-04 Section 2 "Unit-Namespace-Pattern").

   Namespace: .three-media-drag-slider__*
   Script-Hook (Ebene 4): .drag-slider plus optional .drag-slider--infinite

   Use-Case: Storytelling-Media, Video-Reel, Bild-Serien mit 16/9 Aspect
   und drei Items fuer Infinite-Loop.
   ============================================================ */

.three-media-drag-slider__content__slider .drag-slider__track {
  /* Track-Hoehe ergibt sich aus aspect-ratio der Items */
  height: auto;
}

.three-media-drag-slider__content__slider .drag-slider__item {
  flex-shrink: 0;
  width: 41vw;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
}

/* Breakpoint-Staffelung — Items werden relativ groesser auf kleineren
   Viewports, damit sie auch auf engen Screens praesent bleiben.
   Basis-Vorlage: 1050 mal 596 bei 2544px Viewport (entspricht 41vw). */

@media (max-width: 1279px) {
  /* BP-B Compact */
  .three-media-drag-slider__content__slider .drag-slider__item {
    width: 45vw;
  }
}

@media (max-width: 1024px) {
  /* BP-D Tablet */
  .three-media-drag-slider__content__slider .drag-slider__item {
    width: 55vw;
  }
}

@media (max-width: 899px) {
  /* BP-E Tablet Portrait */
  .three-media-drag-slider__content__slider .drag-slider__item {
    width: 65vw;
  }
}

@media (max-width: 600px) {
  /* BP-F Mobile + BP-G Mobile klein */
  .three-media-drag-slider__content__slider .drag-slider__item {
    width: 85vw;
  }
}

/* Content-Helfer: Bilder und Videos fuellen das 16/9-Feld via object-fit */
.three-media-drag-slider__content__slider .drag-slider__item > img,
.three-media-drag-slider__content__slider .drag-slider__item > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   HOVER-FX-SYSTEM (S028, 2026-04-20)
   Worker-Klassen am Slider-Container steuern die Hover-Animation.
   Drei Varianten: corporate, cinema, editorial.
   Kein FX-Klasse = kein Hover-Effekt (roh wie Standard).
   ============================================================ */

/* Base: Item ist Positioning-Context fuer Overlay */
.drag-slider__item {
  position: relative;
}

/* Overlay-Wrapper — sitzt ueber dem Bild/Video */
.drag-slider__item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* Headline im Overlay — Start-Position unten mit translateY */
.drag-slider__item__headline {
  transform: translateY(20px);
  color: #FFFFFF;
  font-size: clamp(1.25rem, 1.5vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

/* Pseudo-Element-Opacity wird via CSS-Variable animiert
   (GSAP kann CSS-Variablen auf Element animieren, nicht auf Pseudo direkt) */

/* --- Variante A: Corporate (hover-fx--corporate) ---
   Gradient-Overlay von unten, Sibling-Darken */
.hover-fx--corporate .drag-slider__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5, 12, 16, 0.85) 0%,
    rgba(5, 12, 16, 0.4) 50%,
    rgba(5, 12, 16, 0) 100%
  );
  opacity: var(--fx-pseudo-opacity, 0);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* --- Variante B: Cinema (hover-fx--cinema) ---
   Scale-Up + Sibling-Blur */
.hover-fx--cinema .drag-slider__item {
  transform-origin: center;
  will-change: transform, filter;
}

.hover-fx--cinema .drag-slider__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(5, 12, 16, 0) 40%,
    rgba(5, 12, 16, 0.75) 100%
  );
  opacity: var(--fx-pseudo-opacity, 0);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* --- Variante C: Editorial (hover-fx--editorial) ---
   Vignette + Sibling-Grayscale */
.hover-fx--editorial .drag-slider__item {
  will-change: filter;
}

.hover-fx--editorial .drag-slider__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(5, 12, 16, 0) 50%,
    rgba(5, 12, 16, 0.5) 100%
  );
  opacity: var(--fx-pseudo-opacity, 0);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}