/*==============================================================================
  Beyond Steps • Duo Content Block (autark)
  Datei: styles-content-block-double.css
  Version: v1.1 • 2025-09-28
  Autor: Hardy & Bruder

  ZWECK
  ─────
  2-spaltiger Content-Block (Media + Body) mit frei steuerbarem Spaltenverhältnis,
  optionalen festen Seitenverhältnissen für die Medienbox und sauberem Mobile-Fallback.

  NAMENSRAUM
  ──────────
  Alle Klassen beginnen mit .duo-*  (keine Seiteneffekte auf bestehende Styles).

  ABHÄNGIGKEITEN
  ──────────────
  • Optional: :root --container-max (globale Maximalbreite). Fallback 1100px.

  GRUNDSTRUKTUR (HTML)
  ────────────────────
    <section class="duo [rev] [duo--media-40]">
      <figure class="duo__media" data-ratio="16x9|4x3|1x1|none">
        <img src="…" alt="…">
      </figure>
      <div class="duo__body">
        <h3 class="duo__title">Titel</h3>
        <p class="duo__text">Text …</p>
        <div class="duo__actions"><a href="#">Mehr erfahren</a></div>
      </div>
    </section>

  WICHTIGE VARIABLEN (CSS Custom Properties)
  ──────────────────────────────────────────
  • --duo-media : Breite der Medien-Spalte (z. B. 40%, 420px oder clamp()).
  • --duo-gap   : Spaltengap.
  • --duo-minh  : Mindesthöhe für Media & Body (aktiv, wenn data-ratio="none").
  • --duo-radius, --duo-shadow, --duo-bg, --duo-border : Look & Feel.
  • --duo-max   : Maximalbreite des Blocks (zieht --container-max, sonst 1100px).

  SPALTENVERHÄLTNIS STEUERN (3 Wege)
  ───────────────────────────────────
  A) Inline (höchste Priorität):
     <section class="duo" style="--duo-media: 33%;">…</section>
  B) Utility-Klasse:
     .duo--media-33 { --duo-media: 33%; } → <section class="duo duo--media-33">…</section>
  C) Fix/Smart:
     • Pixel:  <section class="duo" style="--duo-media: 420px;">
     • clamp:  <section class="duo" style="--duo-media: clamp(300px, 36%, 520px);">

  HÖHE & SEITENVERHÄLTNIS
  ───────────────────────
  • data-ratio="16x9|4x3|1x1": Höhe ergibt sich aus Breite (aspect-ratio).
  • data-ratio="none"       : Ratio AUS; Höhe kommt ausschließlich über --duo-minh.
  • Merke: Wenn Ratio aktiv ist, wirkt eine Änderung von --duo-media optisch primär
           über die Breite; die Höhe folgt dem gewählten Ratio.

  LAYOUT-VARIANTEN
  ────────────────
  • Standard: Bild links, Text rechts.
  • Rechtsbündig: Klasse .rev (tauscht die Spalten).
  • Mobile: Unter 900px automatisch 1-Spalter.

  THEMES
  ──────
  • .duo--aurora: dezente Beyond-Steps-Gradientfläche für den gesamten Block.

  PRIORITÄT / OVERRIDES
  ─────────────────────
  • Reihenfolge der Stärke: Inline style > Utility-Klasse > Basiswert.
  • grid-template-columns ist absichtlich !important, damit globale Regeln nicht stören.

  ACCESSIBILITY
  ─────────────
  • Aussagekräftiges alt-Attribut am Bild.
  • Optional <figcaption> für Bildunterschriften.

  DEBUG-TIPPS
  ───────────
  • Bei Bedarf temporär aktivieren:
      .duo{ outline:2px solid lime; } .duo > *{ outline:1px dashed orange; }
  • In DevTools immer das <section class="duo"> selektieren und dort
    „grid-template-columns“ prüfen.
  • min-width:0 auf .duo__media & .duo__body verhindert „Aufspreizen“ durch Inhalte.

  CHANGELOG
  ─────────
  • v1.1: data-ratio="none", min-width:0 gesetzt, !important an Grid-Columns,
          Utility-Klassen ergänzt.

==============================================================================*/




/*=====================================================
=  Beyond Steps • Duo Content Block (autark, v1.1)    =
=  Prefix: .duo-*                                     =
=====================================================*/

/* ---------- Root-Defaults (nur für diese Datei) ---------- */
:root{
  --duo-max: var(--container-max, 1100px);
}

/*=====================================================
=                    Grundstruktur                    =
=====================================================*/
.duo{
  /* Steuer-Variablen */
  --duo-media: 44%;                /* Anteil Medien-Spalte */
  --duo-gap: 1.25rem;              /* Spaltengap */
  --duo-minh: 260px;               /* Mindesthöhe je Spalte */
  --duo-radius: 16px;
  --duo-shadow: 0 10px 30px rgba(0,0,0,.30);
  --duo-bg: rgba(10,16,24,.35);
  --duo-border: 1px solid rgba(255,255,255,.12);

  display: grid;
  grid-template-columns: minmax(0, var(--duo-media, 40%)) 1fr !important;
  grid-template-areas: "media body";
  gap: var(--duo-gap, 1.25rem);
  align-items: stretch;

  width: min(var(--duo-max), 96vw);
  max-width: var(--duo-max);
  margin: 0 auto 2rem;
  padding: 0;
}
/* Zuordnung der Kinder zu den Areas */
.duo__media{ grid-area: media; }
.duo__body { grid-area: body; }

.duo.rev{
  grid-template-columns: 1fr minmax(0, var(--duo-media, 40%)) !important;
  grid-template-areas: "body media";
}


/*=====================================================
=                        Media                        =
=====================================================*/
.duo__media{
  position: relative;
  min-height: var(--duo-minh, 260px);
  border-radius: var(--duo-radius);
  overflow: hidden;
  box-shadow: var(--duo-shadow);
  background: rgba(255,255,255,.04);
  margin: 0;
  min-width: 0; /* verhindert Spaltenaufspreizen */
}

/* Bild / Video sauber einpassen */
.duo__media > img,
.duo__media > video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optionale feste Proportionen */
.duo__media[data-ratio="16x9"]{ aspect-ratio: 16 / 9; }
.duo__media[data-ratio="4x3"] { aspect-ratio: 4 / 3; }
.duo__media[data-ratio="1x1"] { aspect-ratio: 1 / 1; }
/* Ratio AUS → Höhe nur über --duo-minh */
.duo__media[data-ratio="none"]{ aspect-ratio: auto; }

/*=====================================================
=                         Body                        =
=====================================================*/
.duo__body{
  min-height: var(--duo-minh, 260px);
  padding: 1rem 1.25rem;
  border-radius: var(--duo-radius);
  border: var(--duo-border);
  background: var(--duo-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0; /* wichtig im Grid */
}
.duo__title{ margin: 0 0 .5rem; font-size: 1.375rem; font-weight: 700; }
.duo__text { margin: 0; line-height: 1.55; opacity: .98; }
.duo__actions{ margin-top: .75rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.duo__body a{ color: #fff; text-decoration: underline; }

/*=====================================================
=                        Themes                       =
=====================================================*/
.duo--aurora{
  background:
    linear-gradient(0deg, rgba(0,0,0,.14), rgba(0,0,0,.14)),
    radial-gradient(120% 80% at 50% 110%, rgba(0,0,0,.08), transparent 60%),
    linear-gradient(180deg, #0b3140 0%, #134d62 58%, #1d7090 100%);
}
.duo--aurora.rev{
  background:
    linear-gradient(0deg, rgba(0,0,0,.14), rgba(0,0,0,.14)),
    radial-gradient(120% 80% at 50% -10%, rgba(0,0,0,.08), transparent 60%),
    linear-gradient(0deg,  #0b3140 0%, #134d62 58%, #1d7090 100%);
}

/*=====================================================
=                      Responsive                     =
=====================================================*/
@media (max-width: 899px){
  .duo{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "media"
      "body";
  }

  /* Gleiche Reihenfolge auf Mobile für .rev */
  .duo.rev{
    grid-template-columns: 1fr !important; /* optional, erbt eh 1fr */
    grid-template-areas:
      "media"
      "body";
  }

  /* Wenn du für .rev lieber Text zuerst willst, dann statt oben:
  .duo.rev{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "body"
      "media";
  }
  */
}


/*=====================================================
=                Optionale Utilities                  =
=====================================================*/
.duo--media-30{ --duo-media: 30%; }
.duo--media-35{ --duo-media: 35%; }
.duo--media-40{ --duo-media: 40%; }
.duo--media-45{ --duo-media: 45%; }
.duo--media-50{ --duo-media: 50%; }

.duo__media.is-contained > img,
.duo__media.is-contained > video{
  object-fit: contain;
  background: rgba(255,255,255,.02);
}

/* Debug */
/*
.duo{ outline: 2px solid lime; }
.duo > *{ outline: 1px dashed orange; }
*/




/*=====================================================
=                    harte Hoehe                      =
=====================================================*/
/* Exakte Blockhöhe via Variable */
.duo { --duo-h: auto; }
.duo__media, .duo__body {
  min-height: var(--duo-minh, 260px);
  height: var(--duo-h);
}

/* Min-Höhe aushebeln, wenn du hart fixen willst */
.duo--no-minh { --duo-minh: 0; }

/* Fixhöhen-Utilities (Beispiele) */
.duo--h-100 { --duo-h: 100px; }
.duo--h-120 { --duo-h: 120px; }
.duo--h-160 { --duo-h: 160px; }
.duo--h-180 { --duo-h: 180px; }
.duo--h-200 { --duo-h: 200px; }
.duo--h-240 { --duo-h: 240px; }

/* Optional: Text clampen, damit nichts überläuft */
.duo--clamp-4 .duo__text{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}





/*=====================================================
=     Duo • Generischer Media-Overlay & Text-Badge    =
=     Steuerung NUR per CSS-Variablen (HTML style=)   =
=====================================================*/

/* Voraussetzung: .duo__media hat position:relative im Basisblock */
.duo__media{ position: relative; }

/* --- (1) TINT-OVERLAY -----------------------------------------
   Aktiv: Setze --duo-tint-alpha > 0 (z. B. .25)
   Farbe: per HSL-Komponenten (Hue/Sat/Light)
------------------------------------------------------------------*/
.duo__media::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  /* Dim + Farbton */
  --_dim: var(--duo-dim, .12);
  --_hsl: var(--duo-tint-hsl, 210 70% 45%);
  --_a:   var(--duo-tint-alpha, 0); /* 0 = aus */
  background:
    linear-gradient(180deg, rgba(0,0,0,var(--_dim)), rgba(0,0,0,var(--_dim))),
    radial-gradient(120% 80% at 50% 0%, hsl(var(--_hsl) / var(--_a)), transparent 60%);
  mix-blend-mode: normal;
}

/* --- (2) LABEL-BADGE (Text aus Variable) -----------------------
   Inhalt:   --duo-label   → MUSS in Anführungszeichen stehen ('...').
   Position: via top/left/right/bottom + translate.
   Style:    Größe, Gewicht, Kursiv, Familie, Farbe, Hintergrund, Radius, etc.
------------------------------------------------------------------*/
.duo__media::after{
  content: var(--duo-label, "");
  /* sichtbar nur wenn Inhalt ≠ "" */
  position: absolute;
  left: 50%; top: 50%; right: auto; bottom: auto;         /* Standard: zentriert */
  transform: translate(var(--duo-label-translate-x, -50%), var(--duo-label-translate-y, -50%));
  padding: var(--duo-label-pad, 6px 10px);
  font-size: var(--duo-label-size, 0.9rem);
  font-weight: var(--duo-label-weight, 700);
  font-style: var(--duo-label-style, normal);
  font-family: var(--duo-label-family, inherit);
  letter-spacing: var(--duo-label-tracking, .02em);
  text-transform: var(--duo-label-transform, none);
  line-height: 1;
  color: var(--duo-label-fg, #fff);
  background: var(--duo-label-bg, rgba(0,0,0,.35));
  border: var(--duo-label-border, 1px solid rgba(255,255,255,.22));
  border-radius: var(--duo-label-radius, 999px);
  box-shadow: var(--duo-label-shadow, 0 2px 10px rgba(0,0,0,.25));
  pointer-events: none;
  white-space: nowrap;
}

/* Positions-Utilities per Variablen (optional; Standard ist Center)
   Beispiel:
   --duo-label-top: auto; --duo-label-left: 12px; --duo-label-bottom: 10px; --duo-label-translate-x: 0; --duo-label-translate-y: 0;
*/
.duo__media::after{
  top:    var(--duo-label-top, 50%);
  left:   var(--duo-label-left, 50%);
  right:  var(--duo-label-right, auto);
  bottom: var(--duo-label-bottom, auto);
}



/*=====================================================
=        Duo • Clickable Media Overlay (generic)      =
=        aktiviert durch <a class="duo__link">        =
=====================================================*/
.duo__media{ position: relative; } /* ist schon gesetzt – doppelt OK */

.duo__link{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  border-radius: inherit;
  text-decoration: none;
  outline: none;
  /* Hover-Tuning per Variablen */
  --duo-hover-bg: rgba(255,255,255,.06);
  --duo-hover-border: 1px solid rgba(255,255,255,.18);
  --duo-hover-shadow: 0 8px 24px rgba(0,0,0,.35);
  --duo-hover-translate: -2px;
}

.duo__link::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: transparent;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  pointer-events: none;
}

.duo__link:hover::after,
.duo__link:focus-visible::after{
  background: var(--duo-hover-bg);
  border: var(--duo-hover-border);
  box-shadow: var(--duo-hover-shadow);
  transform: translateY(var(--duo-hover-translate));
}

/* Tastaturfokus – sichtbarer Ring */
.duo__link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(93,198,255,.55);
  border-radius: inherit;
}

/* Screenreader-Text helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}

/* Bewegungsreduktion */
@media (prefers-reduced-motion: reduce){
  .duo__link::after{ transition: none; }
}