/* =============================================================
   DAZZLETIC – BLOCK-PRESETS  ·  Werte je Block & Breakpoint
   -------------------------------------------------------------
   Ein Preset = eine Block-Ausgabe der Startseite (Hero, Newest,
   Sports …). Es wirkt überall, wo die Section die Klasse trägt:
     Shortcode  [dazzletic_articles block="sports" …]
                → <section class="dz-section dz-section--sports">
     Divi       Section → Erweitert → CSS-Klasse:
                dz-section dz-section--sports
   Welche Klassen die Elemente darin brauchen (Row, Spalte, Module):
   Anleitung „Dazzletic Divi-Klassen" bzw. Kopf von 07-articles.css.

   SO WIRD ANGEPASST
   Jeder Block hat vier Werte-Sets:
     Mobile 428            Basis (ohne Media Query) – gilt bis 767px, also auch im
                           schmalen Browserfenster (Divi-Phone, Mega-Menü und
                           custom.css enden ebenfalls bei 767px)
     Portrait-Tablet 768   @media (min-width: 768px) – greift wegen Landscape ab 769px
                           nur bei exakt 768px
     Landscape-Tablet 1024 @media (min-width: 769px)
     Desktop 1512          @media (min-width: 1025px)
   In jedem Set stehen ALLE Maße des Blocks – einfach den Wert ändern.
   Farben/Schriften stehen einmal oben im Block, sie gelten für alle
   Breakpoints. Diese Datei enthält nur Variablen; die Regeln liegen
   in 02-layout (Section), 06-components (Überschrift), 07-articles
   (Karten/Raster/Slider), dm.css (Newsletter) und dsp.css (Mixtapes).

   LEGENDE
   Section        --sec-pt / -pb      Innenabstand oben / unten
                  --sec-px            Gutter links/rechts (Mindestabstand zum Rand)
                  --sec-bw            Rahmenstärke (CSS-Kurzform, z. B. 3px 0)
                  --sec-margin        Außenabstand (Kurzform)
                  --sec-end           Innenabstand unten, nur wenn der Block der LETZTE vor dem Footer ist
                  ABSTAND ZWISCHEN BLÖCKEN = genau einmal --space-section (Figma „Abstand 96 px"):
                    Plain-Presets (ohne Hintergrund): --sec-pt = Abstand zum Vorgänger, --sec-pb: 0,
                                      --sec-end: var(--space-section) für den letzten Block.
                    Bänder (people, interview, newsletter, mixtapes): --sec-margin: var(--space-section) 0 0,
                                      Padding = Innenabstand im Band.
                  --sec-max           max. Inhaltsbreite (Band bleibt randlos)
                  --sec-bg / -bc      Hintergrund / Rahmenfarbe
   Überschrift    --head-fs / -lh / -ls   Größe / Zeilenhöhe / Laufweite
                  --head-fw           Schriftstärke (Default semibold)
                  --head-mb           Abstand zum Inhalt
                  --head-gap / -icon  Abstand Text→Pfeil / Pfeil-Größe
                  --head-pad / -bw / -radius   Box um den Text (Pill „MIXTAPES")
                  --head-align / -mx  Textausrichtung / Box-Position (0 auto = links, auto = mittig)
   Raster         --grid-cols         Spalten
                  --grid-gap-x / -y   Spalten- / Zeilenabstand
                  --grid-orphan       einzelne letzte Karte: auto | 1 / -1 (volle Zeile)
                  --grid-slide-w      Folienbreite im Slider
                  --grid-bleed        Überstand des Sliders bis zum Rand (var(--sec-px) = randlos, 0px = im Gutter)
   Karte          --card-dir          column | row (Bild links) | row-reverse (Bild rechts)
                  --card-align        vertikale Ausrichtung im Split
                  --card-gap          Abstand Bild → Text
                  --card-pad / -bw / -radius   Innenabstand / Rahmen / Rundung der Karte
   Bild           --media-ratio       Seitenverhältnis (Breite / Höhe)
                  --media-radius      Rundung
                  --media-w           Bildbreite im Split (auto = gestapelt)
                  --media-bleed       Überstand bis zum Rand (var(--sec-px) = randlos, 0px = im Gutter)
   Textbereich    --body-pad / -gap / -radius
   Label          --chip-fs / -pad / -bw / -radius / -ls
   Texte          --title-fs / -lh / -ls / -lines (Größe / Zeilenhöhe / Laufweite / max. Zeilen, none = alle)
                  --credit-fs / -lh   --excerpt-fs / -lh / -lines (max. Zeilen, none = alle – Mixtapes-Seite)
   Trennlinie     --rule-gap / -w     Abstand / Stärke der Linie unter dem Raster (Hero)
   Newsletter     --dm-*              Formular (Feld, Button, Hinweis) – s. dazzletic-mailjet/dm.css
   Mixtapes       --navi-*            Pfeil-Box des Sliders – s. dazzletic-spotify-playlist/dsp.css
   Einleitung     --lead-fs / -lh / -mb / -align   Einleitungszeile (.dz-lead), z. B. im Footer-Newsletter
   Load more      --more-w / -fs / -pad / -radius   Button der Kategorie- und Mixtapes-Seite: Breite / Schriftgröße / Innenabstand / Rundung
                  --btn-offset        Versatz des schwarzen Schattens (Mixtapes-Seite; sonst 5px aus 06-components.css)
   Mixtape-Beitrag (Einzelseite, Presets mixtape-*, Regeln: dazzletic-spotify-playlist/dsp.css)
                  --hero-bg / -dir / -align   Band: Farbe / column | row / vertikale Ausrichtung
                  --hero-pad / -gap / -radius / -shadow   Band: Innenabstand / Abstand Bild→Text / Rundung / Schatten
                  --hero-text-w       Breite der Textspalte neben dem Bild (--media-* = Bild, s. o.)
                  --text-pad          Innenabstand der Textspalte (Preset mixtape-title)
                  --text-gap-1 / -2   Abstand Titel→Kurzbeschreibung / Kurzbeschreibung→Credits
                  --excerpt-fs / -lh  Kurzbeschreibung (Größe / Zeilenhöhe), --title-fs / -lh = Titel (s. Texte)
                  --credit-align / -ml / -px   Credits: Ausrichtung (center | start) / Einzug links / Seitenpolster
                  --credit-line-gap / -w / -dash / -dash-gap   lila Strichlinie: Abstand zur Schrift / Dicke / Strich / Lücke
                  --txt-fs / -lh / -ls / -gap   Lesetext: Größe (Token --fs-body) / Zeilenhöhe / Laufweite / Absatzabstand
                  --sub-fs / -lh / -ul-offset   Zwischentitel (h2): Größe / Zeilenhöhe / Abstand der Unterstreichung
                  --sub-mt / -mt-intro / -mb    Zwischentitel: Abstand oben (nach Absatz) / oben (nach dem Einleitungsabsatz) / unten
                  --embed-ratio / -radius       Playlist / Video: Seitenverhältnis (Breite / Höhe) / Rundung
                  --p2-w / --p2-fs              Absatz 2 (nach dem ersten Zwischentitel): Breite der Textbox / Schriftgröße (Figma weicht dort ab)
                  --more-fs / -lh / -ls / -ul-offset   „WEITERE MIXTAPES" (Preset mixtape-more): Schrift (Abstand zum folgenden Band: Geschwister-Regel im Preset)
   Beitrag (Detailseite im Divi Theme Builder, Presets post-title / -hero / -body / -related, Regeln: 09-divi.css „BEITRAG")
                  --title-fs / -lh / -ls / -w   Titel: Größe (Token --fs-h1-hero) / Zeilenhöhe / Laufweite / max. Breite;  --text-gap-2 = Abstand Titel → Byline
                  --credit-fs / -lh / -line-gap   Byline (lila Strichlinie wie bei den Mixtape-Credits: --credit-line-*)
                  --media-ratio       Seitenverhältnis des Beitragsbilds (Preset post-hero);  --cap-gap / -fs / -color   Bildnachweis: Abstand zum Bild / Größe / Farbe
                  --txt-w / -fs / -lh / -ls / -gap   Lesespalte: Breite / Größe (Token --fs-body) / Zeilenhöhe / Laufweite / Absatzabstand
                  --quote-fs / -lh / -w / -mt / -mb   Zitat (H2): Größe / Zeilenhöhe / max. Breite / Abstand oben / unten
                  --sub-fs / -lh / -mt / -mb          Zwischentitel (H3, Versalien): Größe / Zeilenhöhe / Abstand oben / unten
                  --pair-w / --img-a-w / -ratio / --img-b-w / -ratio / --img-b-dy   versetztes Bildpaar: Breite der Reihe / Hochformat / Querformat / Versatz des Querformats
                  --eq-w / -ratio / -gap, --eq-mt / -mb   gleich große Bilder: Breite (bis 1024 untereinander) / Seitenverhältnis / Abstand / Reihenabstand
                  --full-ratio / --full-mt / -mb     randloses Bild: Seitenverhältnis / Abstand oben / unten;  --pair-mt / -mb = Abstand des versetzten Paars
                  --band-pt / -pb / -bg   grünes Band „Weitere Artikel": Innenabstand oben / unten / Farbe;  --head-mb = Abstand Überschrift → Band
                  --peek-k / -p / -min    Slider mit überstehenden Karten: k volle Karten + Anteil p der nächsten sichtbar (angeschnitten); -min = Mindestbreite der Karte
   Rezept (Detailseite, Presets recipe-hero / -body / -card / -related, Regeln: 09-divi.css „REZEPT")
                  Titelblock  --credit-box-w / -px / -py   Byline im lila Strichrahmen: Breite / Innenabstand seitlich / oben+unten;  --hero-dir column-reverse = Bild über dem Text (Mobile)
                  Lesespalte  --txt-w / -fs / -lh / -ls / -gap   wie Beitrag;  --sub-fs / -lh / -mt / -mb   Zwischentitel in Textgröße (dsp-body__subtitle_text)
                              --btn-mt / -mb   Button-Zeile „Direkt zum Rezept";  --wide-w / -ratio / -mt / -mb   breites Bild (Breite in % der Containerbreite)
                              --eq-w / -ratio / -gap / -gap-y / -mt / -mb / -radius   zwei Bilder nebeneinander, zwei Rows = 2 × 2 (Zeilenabstand --eq-gap-y)
                              --tall-w / -ratio / -mt   Hochformat (dsp-body__image_tall)
                  Karte       --title-fs / -lh   Rezepttitel;  --servings-fs / -lh / -mt   Portionen;  --rg-mt / -cols / -gap / -gap-y   Raster Zutaten | Zubereitung (--rg-cols = Spaltenbreiten)
                              --ing-pad / -bw / -bc / -bg / -radius   lila Zutaten-Box;  --rhead-fs / -lh / -mb   Überschriften ZUTATEN / ZUBEREITUNG;  --prep-pt   Abstand oben der Zubereitung
                              --list-fs / -lh / -gap / -indent   Zutatenliste;  --steps-lh / -gap / -indent   Schritte;  --card-text-fw / -color   Schrift der Karte
                              --actions-mt / -dir / -gap / -btn-w   Button-Zeile: Abstand zum Raster / row | column / Abstand / Mindestbreite der Buttons
                  Weitere     wie Beitrag (--more-*, --head-mb, --grid-*, --media-*, --chip-*, --title-*, --peek-*), ohne Band (--band-bg transparent)
   Suche (Ergebnisseite /?s=…, Presets cat-head + search-field + cat-grid, Regeln: 06-components.css „SUCHFELD“, includes/search.php)
                  --search-w / -h / -fs / -pl, --ico-w / -h / -r   Suchfeld (Preset 36)
   404-Seite (Divi Theme Builder → 404-Vorlage, Preset 404, Regeln: 09-divi.css „404-SEITE“)
                  --row-dir / -gap, --media-w / -ratio / -fit, --content-pt / -pb / -flex   Row, Bildspalte, Textspalte;  --title-fs / -mb, --lead-fs, --text-fs, --p-gap   Texte
                  --actions-mt / -w / -gap-min, --btn-w / -h / -fs / -nudge, --search-w / -h / -fs / -pl, --ico-w / -h / -r   Buttonzeile (Erklärung im Kopf des Presets 35)
   Content-Seite (normale Divi-Seite, z. B. About; Presets content-title / -hero / -body / -cta, Regeln: 09-divi.css „CONTENT-SEITE“, Button-Variante dz-btn--square in 06-components.css)
                  Titel   --title-fs / -fw / -lh / -ls   H1 (Token --fs-page-title, Light, Versalien, mittig);  --sec-pt = Header-Unterkante → Titel, --sec-pb = Titel → Bild
                  Bild    --media-ratio / -radius   Seitenverhältnis / Rundung (Bild wird beschnitten);  --sec-max = Bildbreite
                  Text    --txt-w / -fs / -lh / -ls / -gap   Lesespalte: Breite / Größe (Token --fs-body) / Zeilenhöhe / Laufweite / Absatzabstand;  --lead-fs = fett gesetzter erster Absatz (League Spartan)
                          --h1-fs … --h6-fs / -lh   Überschriften H1–H6 (Zuordnung im Kopf des Presets 39);  --sub-mt / -mb = Abstand oben / unten
                          --list-indent / -gap / -mt / -marker   Listen: Einzug / Abstand der Punkte / Abstand Absatz → Liste / Farbe der Punkte
                  Variante prose (dz-content--prose an jeder Section der Seite, Preset 41): überschreibt nur Titel (--title-fs / -fw / -lh, --sec-pt / -pb) und Text (--sec-pt / -end, --strong-fw)
                  Button  --btn-w / -h / -fs / -ls / -bw   Außenmaß inkl. Rand, Schrift, Laufweite, Rand;  --btn-sx / -sy = Schattenversatz rechts / unten;  --btn-text-w = Breite des Textblocks
                          (erzwingt den Umbruch „KONTAKTIERE / UNS“);  --btn-dx = Verschiebung aus der Mitte (Figma gruppiert Button + Schatten mittig);  --btn-nudge = Polster unten
   Footer        --footer-cols / -gap-x / -gap-y   Raster der Footer-Row
                  --footer-logo-h / -brand-gap / -brand-pb   Logo-Höhe, Abstand Logo→Icons, Abstand bis zu den Link-Spalten
                  --footer-icon / -icon-gap   Social-Icons: Größe / Abstand
                  --footer-nav-h / -nav-bw / -nav-pb   Akkordeon: Zeilenhöhe / Trennlinie / Abstand unter offener Liste
                  --footer-title-fs / -title-mb / -link-fs / -link-gap   Spaltentitel und Links
   ============================================================= */
/* ═════════════════════════════════════════════════════════════
   00 · SEITE
   Header-Abstand zur ersten Section (Variable aus themes/dazzletic/assets/css/header.css).
   Beginnt eine Seite mit dem Hero-Block, schließt das Bild bündig an den Header an.
   ═════════════════════════════════════════════════════════════ */
body:has(.dz-section--hero:first-child) .dz-header{
    /* Mobile · 428 */
    --dz-header-gap: 0px;
}
@media (min-width: 768px){
    body:has(.dz-section--hero:first-child) .dz-header{  /* Portrait-Tablet · 768 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 769px){
    body:has(.dz-section--hero:first-child) .dz-header{  /* Landscape-Tablet · 1024 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 1025px){
    body:has(.dz-section--hero:first-child) .dz-header{  /* Desktop · 1512 */
        --dz-header-gap: 0px;
    }
}
/* Kategorie-Seite: Titel (Preset cat-head) sitzt näher am Header. */
body:has(.dz-section--cat-head:first-child) .dz-header{
    /* Mobile · 428 */
    --dz-header-gap: 16px;
}
@media (min-width: 768px){
    body:has(.dz-section--cat-head:first-child) .dz-header{  /* Portrait-Tablet · 768 */
        --dz-header-gap: 20px;
    }
}
@media (min-width: 769px){
    body:has(.dz-section--cat-head:first-child) .dz-header{  /* Landscape-Tablet · 1024 */
        --dz-header-gap: 20px;
    }
}
@media (min-width: 1025px){
    body:has(.dz-section--cat-head:first-child) .dz-header{  /* Desktop · 1512 */
        --dz-header-gap: 0px;
    }
}
/* Mixtapes-Seite: Titel (Preset mixtapes-head) – der Abstand zum Header steckt im Padding der Section. */
body:has(.dz-section--mixtapes-head:first-child) .dz-header{
    /* Mobile · 428 */
    --dz-header-gap: 0px;
}
@media (min-width: 768px){
    body:has(.dz-section--mixtapes-head:first-child) .dz-header{  /* Portrait-Tablet · 768 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 769px){
    body:has(.dz-section--mixtapes-head:first-child) .dz-header{  /* Landscape-Tablet · 1024 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 1025px){
    body:has(.dz-section--mixtapes-head:first-child) .dz-header{  /* Desktop · 1512 */
        --dz-header-gap: 0px;
    }
}
/* Mixtape-Beitrag: Das Hero-Band (Preset mixtape-hero) schließt in Figma direkt an den Header an
   (Mobile/Portrait) bzw. folgt mit festem Abstand – der steckt als --sec-pt in der Section. */
body:has(.dz-section--mixtape-hero:first-child) .dz-header{
    /* Mobile · 428 */
    --dz-header-gap: 0px;
}
@media (min-width: 768px){
    body:has(.dz-section--mixtape-hero:first-child) .dz-header{  /* Portrait-Tablet · 768 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 769px){
    body:has(.dz-section--mixtape-hero:first-child) .dz-header{  /* Landscape-Tablet · 1024 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 1025px){
    body:has(.dz-section--mixtape-hero:first-child) .dz-header{  /* Desktop · 1512 */
        --dz-header-gap: 0px;
    }
}
/* Beitrags-Detailseite: Der Abstand Header → Titel steckt im Preset post-title (--sec-pt). Die erste Section des Theme-Builder-Bodys ist dort
   eine leere Section ohne Preset – darum :has() statt :first-child. */
body:has(.dz-section--post-title) .dz-header{
    /* Mobile · 428 */
    --dz-header-gap: 0px;
}
@media (min-width: 768px){
    body:has(.dz-section--post-title) .dz-header{  /* Portrait-Tablet · 768 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 769px){
    body:has(.dz-section--post-title) .dz-header{  /* Landscape-Tablet · 1024 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 1025px){
    body:has(.dz-section--post-title) .dz-header{  /* Desktop · 1512 */
        --dz-header-gap: 0px;
    }
}
/* Rezept-Detailseite: Der Abstand Header → Titelblock steckt im Preset recipe-hero (--sec-pt); auch hier steht davor oft eine leere Builder-Section → :has(). */
body:has(.dz-section--recipe-hero) .dz-header{
    /* Mobile · 428 */
    --dz-header-gap: 0px;
}
@media (min-width: 768px){
    body:has(.dz-section--recipe-hero) .dz-header{  /* Portrait-Tablet · 768 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 769px){
    body:has(.dz-section--recipe-hero) .dz-header{  /* Landscape-Tablet · 1024 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 1025px){
    body:has(.dz-section--recipe-hero) .dz-header{  /* Desktop · 1512 */
        --dz-header-gap: 0px;
    }
}
/* 404-Seite: Der Abstand Header → Bild steckt im Preset 404 (--sec-pt). */
body:has(.dz-section--404) .dz-header{
    /* Mobile · 428 */
    --dz-header-gap: 0px;
}
@media (min-width: 768px){
    body:has(.dz-section--404) .dz-header{  /* Portrait-Tablet · 768 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 769px){
    body:has(.dz-section--404) .dz-header{  /* Landscape-Tablet · 1024 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 1025px){
    body:has(.dz-section--404) .dz-header{  /* Desktop · 1512 */
        --dz-header-gap: 0px;
    }
}
/* Content-Seite: Der Abstand Header → Titel steckt im Preset content-title (--sec-pt). */
body:has(.dz-section--content-title) .dz-header{
    /* Mobile · 428 */
    --dz-header-gap: 0px;
}
@media (min-width: 768px){
    body:has(.dz-section--content-title) .dz-header{  /* Portrait-Tablet · 768 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 769px){
    body:has(.dz-section--content-title) .dz-header{  /* Landscape-Tablet · 1024 */
        --dz-header-gap: 0px;
    }
}
@media (min-width: 1025px){
    body:has(.dz-section--content-title) .dz-header{  /* Desktop · 1512 */
        --dz-header-gap: 0px;
    }
}

/* ═════════════════════════════════════════════════════════════
   01 · HERO  (Aufmacher)
   Shortcode: [dazzletic_articles block="hero" layout="hero"]
   Divi:      Section-Klasse  dz-section dz-section--hero
   Mobile: Bild randlos, darunter Kategorie (Text), Headline, Anriss, schwarze Linie.
   Ab Portrait: Split – Text links, Bild rechts (--card-dir: row-reverse).
   --rule-gap = Abstand Anriss → Linie, --rule-w = Linienstärke.
   ═════════════════════════════════════════════════════════════ */
.dz-section--hero{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --rule-color: var(--c-black);
    --card-bg: transparent;
    --card-bc: transparent;
    --card-overflow: visible;
    --body-bg: transparent;
    --chip-bg: transparent;
    --chip-bc: transparent;
    --chip-color: var(--c-black);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);
    --credit-ff: var(--font-heading);
    --credit-fw: var(--fw-light);
    --credit-color: var(--c-gray-1);
    --credit-deco: none;
    --excerpt-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 0;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --rule-gap: 62px;
    --rule-w: 3px;
    --card-dir: column;
    --card-align: stretch;
    --card-gap: 28px;
    --card-pad: 0;
    --card-bw: 0;
    --card-radius: 0;
    --media-ratio: 7 / 5;
    --media-radius: 0;
    --media-w: auto;
    --media-bleed: var(--sec-px);
    --body-pad: 0;
    --body-gap: 12px;
    --body-radius: 0;
    --chip-fs: 16px;
    --chip-pad: 0;
    --chip-bw: 0;
    --chip-radius: 0;
    --chip-ls: 0;
    --title-fs: 26px;
    --title-lh: 1.25;
    --title-lines: none;
    --credit-fs: 13px;
    --credit-lh: 1.3;
    --excerpt-fs: 18px;
    --excerpt-lh: 1.25;
    --weight-semi: 600;
}
@media (min-width: 768px){
    .dz-section--hero{  /* Portrait-Tablet · 768 */
        --sec-pt: 32px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --rule-gap: 56px;
        --rule-w: 3px;
        --card-dir: row-reverse;
        --card-align: center;
        --card-gap: 24px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 4 / 3;
        --media-radius: 20px;
        --media-w: 50%;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 14px;
        --body-radius: 0;
        --chip-fs: 17px;
        --chip-pad: 0;
        --chip-bw: 0;
        --chip-radius: 0;
        --chip-ls: 0;
        --title-fs: 30px;
        --title-lh: 1.25;
        --title-lines: none;
        --credit-fs: 14px;
        --credit-lh: 1.3;
        --excerpt-fs: 19px;
        --excerpt-lh: 1.25;
    }
}
@media (min-width: 769px){
    .dz-section--hero{  /* Landscape-Tablet · 1024 */
        --sec-pt: 40px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --rule-gap: 64px;
        --rule-w: 3px;
        --card-dir: row-reverse;
        --card-align: center;
        --card-gap: 32px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 4 / 3;
        --media-radius: 30px;
        --media-w: 55%;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 16px;
        --body-radius: 0;
        --chip-fs: 18px;
        --chip-pad: 0;
        --chip-bw: 0;
        --chip-radius: 0;
        --chip-ls: 0;
        --title-fs: 34px;
        --title-lh: 1.1;
        --title-lines: none;
        --credit-fs: 15px;
        --credit-lh: 1.3;
        --excerpt-fs: 23px;
        --excerpt-lh: 1.1;
    }
}
@media (min-width: 1025px){
    .dz-section--hero{  /* Desktop · 1512 */
        --sec-pt: 48px;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --rule-gap: 72px;
        --rule-w: 3px;
        --card-dir: row-reverse;
        --card-align: center;
        --card-gap: 48px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 16 / 10;
        --media-radius: 30px;
        --media-w: 60%;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 20px;
        --body-radius: 0;
        --chip-fs: 24px;
        --chip-pad: 0;
        --chip-bw: 0;
        --chip-radius: 0;
        --chip-ls: 0;
        --title-fs: 40px;
        --title-lh: 1.1;
        --title-lines: none;
        --credit-fs: 18px;
        --credit-lh: 1.3;
        --excerpt-fs: 28px;
        --excerpt-lh: 1.1;
    }
}

/* ═════════════════════════════════════════════════════════════
   02 · NEWEST
   Shortcode: [dazzletic_articles block="newest" layout="card" count="4" offset="1" credit="no" scrollable="yes"]
   Divi:      Section-Klasse  dz-section dz-section--newest
   Karten: Bild (rund), Label, Titel. Bis 768px Wisch-Slider (--grid-slide-w = Folienbreite,
   --grid-bleed = Überstand der Scrollfläche bis zum Rand), ab Landscape Raster (--grid-cols).
   ═════════════════════════════════════════════════════════════ */
.dz-section--newest{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --sec-end: var(--space-section);
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-black);
    --head-icon-display: inline-block;
    --head-align: start;
    --head-mx: 0 auto;
    --card-bg: transparent;
    --card-bc: transparent;
    --card-overflow: visible;
    --body-bg: transparent;
    --chip-bg: var(--c-neutral-2);
    --chip-bc: var(--c-neutral-1);
    --chip-color: var(--c-black);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);
    --credit-ff: var(--font-heading);
    --credit-fw: var(--fw-light);
    --credit-color: var(--c-gray-1);
    --credit-deco: none;
    --excerpt-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 62px;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --head-fs: 24px;
    --head-lh: 1;
    --head-ls: 0;
    --head-mb: 15px;
    --head-gap: 8px;
    --head-icon: 17px;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --grid-cols: 1;
    --grid-gap-x: 24px;
    --grid-gap-y: 24px;
    --grid-orphan: auto;
    --grid-slide-w: 56vw;
    --grid-bleed: var(--sec-px);
    --card-dir: column;
    --card-align: stretch;
    --card-gap: 12px;
    --card-pad: 0;
    --card-bw: 0;
    --card-radius: 0;
    --media-ratio: 1 / 1.1;
    --media-radius: 20px;
    --media-w: auto;
    --media-bleed: 0px;
    --body-pad: 0;
    --body-gap: 10px;
    --body-radius: 0;
    --chip-fs: 11px;
    --chip-pad: 3px 10px;
    --chip-bw: 1px;
    --chip-radius: 10px;
    --chip-ls: .03em;
    --title-fs: 15px;
    --title-lh: 1.05;
    --title-ls: .01em;
    --title-lines: 2;
    --credit-fs: 13px;
    --credit-lh: 1.3;
    --excerpt-fs: 14px;
    --excerpt-lh: 1.5;
}
@media (min-width: 768px){
    .dz-section--newest{  /* Portrait-Tablet · 768 */
        --sec-pt: 66px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 26px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 20px;
        --head-gap: 10px;
        --head-icon: 17px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 1;
        --grid-gap-x: 24px;
        --grid-gap-y: 24px;
        --grid-orphan: auto;
        --grid-slide-w: 38vw;
        --grid-bleed: var(--sec-px);
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 14px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 1 / 1.1;
        --media-radius: 20px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 10px;
        --body-radius: 0;
        --chip-fs: 12px;
        --chip-pad: 4px 10px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 16px;
        --title-lh: 1.1;
        --title-ls: .01em;
        --title-lines: 2;
        --credit-fs: 13px;
        --credit-lh: 1.3;
        --excerpt-fs: 15px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 769px){
    .dz-section--newest{  /* Landscape-Tablet · 1024 */
        --sec-pt: 72px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 18px;
        --head-gap: 10px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 4;
        --grid-gap-x: 24px;
        --grid-gap-y: 24px;
        --grid-orphan: auto;
        --grid-slide-w: 100%;
        --grid-bleed: 0px;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 14px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 1 / 1.1;
        --media-radius: 20px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 10px;
        --body-radius: 0;
        --chip-fs: 13px;
        --chip-pad: 4px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 16px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 2;
        --credit-fs: 14px;
        --credit-lh: 1.3;
        --excerpt-fs: 16px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 1025px){
    .dz-section--newest{  /* Desktop · 1512 */
        --sec-pt: 80px;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 24px;
        --head-gap: 12px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 4;
        --grid-gap-x: 32px;
        --grid-gap-y: 32px;
        --grid-orphan: auto;
        --grid-slide-w: 100%;
        --grid-bleed: 0px;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 16px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 1 / 1.1;
        --media-radius: 30px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 12px;
        --body-radius: 0;
        --chip-fs: 14px;
        --chip-pad: 5px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 22px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 2;
        --credit-fs: 16px;
        --credit-lh: 1.3;
        --excerpt-fs: 18px;
        --excerpt-lh: 1.5;
    }
}

/* ═════════════════════════════════════════════════════════════
   03 · SPORTS
   Shortcode: [dazzletic_articles block="sports" category="sports" layout="caption" count="3" credit="yes"]
   Divi:      Section-Klasse  dz-section dz-section--sports
   Karten mit grünem Rahmen: Bild 6:5, schwarzer Textblock mit weißem Label, Titel + Credit.
   ═════════════════════════════════════════════════════════════ */
.dz-section--sports{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --sec-end: var(--space-section);
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-black);
    --head-icon-display: inline-block;
    --head-align: start;
    --head-mx: 0 auto;
    --card-bg: var(--c-black);
    --card-bc: var(--c-green);
    --card-overflow: hidden;
    --body-bg: var(--c-black);
    --chip-bg: var(--c-white);
    --chip-bc: var(--c-white);
    --chip-color: var(--c-black);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-white);
    --credit-ff: var(--font-body);
    --credit-fw: var(--fw-semibold);
    --credit-color: var(--c-white);
    --credit-deco: none;
    --excerpt-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 62px;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --head-fs: 24px;
    --head-lh: 1;
    --head-ls: 0;
    --head-mb: 15px;
    --head-gap: 8px;
    --head-icon: 17px;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --grid-cols: 1;
    --grid-gap-x: 24px;
    --grid-gap-y: 40px;
    --grid-orphan: auto;
    --card-dir: column;
    --card-align: stretch;
    --card-gap: 0;
    --card-pad: 0;
    --card-bw: 3px;
    --card-radius: 20px;
    --media-ratio: 6 / 5;
    --media-radius: 0;
    --media-w: auto;
    --media-bleed: 0px;
    --body-pad: 14px 16px 18px;
    --body-gap: 8px;
    --body-radius: 0;
    --chip-fs: 11px;
    --chip-pad: 3px 10px;
    --chip-bw: 1px;
    --chip-radius: 10px;
    --chip-ls: .03em;
    --title-fs: 20px;
    --title-lh: 1.1;
    --title-ls: .01em;
    --title-lines: 2;
    --credit-fs: 15px;
    --credit-lh: 1.3;
    --excerpt-fs: 14px;
    --excerpt-lh: 1.5;
}
@media (min-width: 768px){
    .dz-section--sports{  /* Portrait-Tablet · 768 */
        --sec-pt: 66px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 26px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 20px;
        --head-gap: 10px;
        --head-icon: 17px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 2;
        --grid-gap-x: 24px;
        --grid-gap-y: 32px;
        --grid-orphan: 1 / -1;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 0;
        --card-pad: 0;
        --card-bw: 3px;
        --card-radius: 20px;
        --media-ratio: 6 / 5;
        --media-radius: 0;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 16px 18px 20px;
        --body-gap: 8px;
        --body-radius: 0;
        --chip-fs: 12px;
        --chip-pad: 4px 10px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 18px;
        --title-lh: 1.1;
        --title-ls: .01em;
        --title-lines: 2;
        --credit-fs: 15px;
        --credit-lh: 1.3;
        --excerpt-fs: 15px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 769px){
    .dz-section--sports{  /* Landscape-Tablet · 1024 */
        --sec-pt: 96px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 18px;
        --head-gap: 10px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 3;
        --grid-gap-x: 24px;
        --grid-gap-y: 24px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 0;
        --card-pad: 0;
        --card-bw: 3px;
        --card-radius: 20px;
        --media-ratio: 6 / 5;
        --media-radius: 0;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 16px 18px 20px;
        --body-gap: 8px;
        --body-radius: 0;
        --chip-fs: 13px;
        --chip-pad: 4px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 18px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 2;
        --credit-fs: 15px;
        --credit-lh: 1.3;
        --excerpt-fs: 16px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 1025px){
    .dz-section--sports{  /* Desktop · 1512 */
        --sec-pt: 96px;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 24px;
        --head-gap: 12px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 3;
        --grid-gap-x: 32px;
        --grid-gap-y: 32px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 0;
        --card-pad: 0;
        --card-bw: 3px;
        --card-radius: 30px;
        --media-ratio: 6 / 5;
        --media-radius: 0;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 20px 24px 24px;
        --body-gap: 10px;
        --body-radius: 0;
        --chip-fs: 14px;
        --chip-pad: 5px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 24px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 2;
        --credit-fs: 18px;
        --credit-lh: 1.3;
        --excerpt-fs: 18px;
        --excerpt-lh: 1.5;
    }
}

/* ═════════════════════════════════════════════════════════════
   04 · SOCIETY
   Shortcode: [dazzletic_articles block="society" category="society" layout="card" count="4" credit="no"]
   Divi:      Section-Klasse  dz-section dz-section--society
   4 Karten, graues Label, schwarzer Titel; die Variablen unten gelten für die Raster-Karten,
   die Lead-Karten (Feature) stehen in den Regeln am Ende des Blocks:
     Desktop · Landscape   Karte 1 = Feature über volle Breite, Karten 2–4 = 3 Spalten
     Portrait (768)        Karten 1–2 breit, Karten 3–4 halbe Breite (2 Spalten)
     Mobile                1 Spalte, Karten 1–2 mit Radius 20, Karten 3–4 mit Radius 10
   ═════════════════════════════════════════════════════════════ */
.dz-section--society{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --sec-end: var(--space-section);
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-black);
    --head-icon-display: inline-block;
    --head-align: start;
    --head-mx: 0 auto;
    --card-bg: transparent;
    --card-bc: transparent;
    --card-overflow: visible;
    --body-bg: transparent;
    --chip-bg: var(--c-neutral-2);
    --chip-bc: var(--c-neutral-1);
    --chip-color: var(--c-black);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);
    --credit-ff: var(--font-heading);
    --credit-fw: var(--fw-light);
    --credit-color: var(--c-gray-1);
    --credit-deco: none;
    --excerpt-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 62px;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --head-fs: 24px;
    --head-lh: 1;
    --head-ls: 0;
    --head-mb: 16px;
    --head-gap: 8px;
    --head-icon: 17px;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --grid-cols: 1;
    --grid-gap-x: 24px;
    --grid-gap-y: 32px;
    --grid-orphan: auto;
    --card-dir: column;
    --card-align: stretch;
    --card-gap: 8px;
    --card-pad: 0;
    --card-bw: 0;
    --card-radius: 0;
    --media-ratio: 396 / 240;
    --media-radius: 10px;
    --media-w: auto;
    --media-bleed: 0px;
    --body-pad: 0 3px 0 5px;
    --body-gap: 12px;
    --body-radius: 0;
    --chip-fs: 13px;
    --chip-pad: 2px 12.5px;
    --chip-bw: 1px;
    --chip-radius: 10px;
    --chip-ls: 0;
    --title-fs: 18px;
    --title-lh: 1.1;
    --title-ls: 0;
    --title-lines: 2;
    --credit-fs: 13px;
    --credit-lh: 1.3;
    --excerpt-fs: 14px;
    --excerpt-lh: 1.5;
}
@media (min-width: 768px){
    .dz-section--society{  /* Portrait-Tablet · 768 */
        --sec-pt: 66px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 26px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 20px;
        --head-gap: 10px;
        --head-icon: 17px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 2;
        --grid-gap-x: 24px;
        --grid-gap-y: 36px;
        --grid-orphan: 1 / -1;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 8px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 348 / 293;
        --media-radius: 30px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0 3px 0 5px;
        --body-gap: 12px;
        --body-radius: 0;
        --chip-fs: 13px;
        --chip-pad: 2px 12.5px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: 0;
        --title-fs: 18px;
        --title-lh: 1.1;
        --title-ls: 0;
        --title-lines: 2;
        --credit-fs: 13px;
        --credit-lh: 1.3;
        --excerpt-fs: 15px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 769px){
    .dz-section--society{  /* Landscape-Tablet · 1024 */
        --sec-pt: 96px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 17px;
        --head-gap: 10px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 3;
        --grid-gap-x: 24px;
        --grid-gap-y: 34px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 12px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 309 / 237;
        --media-radius: 30px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0 0 0 7px;
        --body-gap: 12px;
        --body-radius: 0;
        --chip-fs: 13px;
        --chip-pad: 2px 13px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: 0;
        --title-fs: 24px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 2;
        --credit-fs: 14px;
        --credit-lh: 1.3;
        --excerpt-fs: 16px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 1025px){
    .dz-section--society{  /* Desktop · 1512 */
        --sec-pt: 96px;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 26px;
        --head-gap: 12px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 3;
        --grid-gap-x: 54px;
        --grid-gap-y: 55px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 12px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 436 / 310;
        --media-radius: 30px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0 0 0 7px;
        --body-gap: 12px;
        --body-radius: 0;
        --chip-fs: 13px;
        --chip-pad: 2px 13px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: 0;
        --title-fs: 24px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 2;
        --credit-fs: 16px;
        --credit-lh: 1.3;
        --excerpt-fs: 18px;
        --excerpt-lh: 1.5;
    }
}

/* Society · Lead-Karten – überschreiben die Raster-Werte nur für die ersten Karten.
   Bereiche wie die Token-Blöcke: Mobile < 768, Portrait nur 768, Landscape 769–1024, Desktop ab 1025. */
@media (max-width: 767.98px){
    .dz-section--society .dz-articles > .dz-article:nth-child(-n+2){
        --media-radius: 20px;
        --body-pad: 0 0 0 5px;
        --body-gap: 8px;
        --title-ls: .01em;
    }
}
@media (min-width: 768px) and (max-width: 768.98px){
    .dz-section--society .dz-articles > .dz-article:nth-child(-n+2){
        grid-column: 1 / -1;
        --media-ratio: 720 / 381;
        --body-gap: 10px;
        --title-fs: 20px;
        --title-ls: .01em;
    }
}
@media (min-width: 769px){
    .dz-section--society .dz-articles > .dz-article:first-child{
        grid-column: 1 / -1;
        --card-gap: 16px;
        --body-gap: 21px;
        --chip-fs: 15px;
        --chip-pad: 2.5px 14.5px;
        --title-fs: 30px;
        --media-ratio: 976 / 456;
    }
}
@media (min-width: 1025px){
    .dz-section--society .dz-articles > .dz-article:first-child{
        --media-ratio: 1416 / 662;
    }
}

/* ═════════════════════════════════════════════════════════════
   05 · PEOPLE  (grünes Band)
   Shortcode: [dazzletic_articles block="people" category="people" layout="highlight" count="1"]
   Divi:      Section-Klasse  dz-section dz-section--people
   Section = hellgrünes Band mit grünem Rahmen (Überschrift liegt im Band, ohne Pfeil).
   Mobile gestapelt, ab Portrait Split – Bild links, Text rechts (--card-dir: row).
   ═════════════════════════════════════════════════════════════ */
.dz-section--people{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: var(--c-green-light);
    --sec-bc: var(--c-green);
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-black);
    --head-icon-display: none;
    --head-align: start;
    --head-mx: 0 auto;
    --card-bg: transparent;
    --card-bc: transparent;
    --card-overflow: visible;
    --body-bg: transparent;
    --chip-bg: transparent;
    --chip-bc: transparent;
    --chip-color: var(--c-black);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);
    --credit-ff: var(--font-heading);
    --credit-fw: var(--fw-light);
    --credit-color: var(--c-gray-1);
    --credit-deco: none;
    --excerpt-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 28px;
    --sec-pb: 40px;
    --sec-px: 16px;
    --sec-bw: 3px;
    --sec-margin: var(--space-section) 0 0;
    --sec-max: 1416px;
    --head-fs: 24px;
    --head-lh: 1;
    --head-ls: 0;
    --head-mb: 16px;
    --head-gap: 8px;
    --head-icon: 17px;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --grid-cols: 1;
    --grid-gap-x: 0;
    --grid-gap-y: 0;
    --grid-orphan: auto;
    --card-dir: column;
    --card-align: stretch;
    --card-gap: 36px;
    --card-pad: 0;
    --card-bw: 0;
    --card-radius: 0;
    --media-ratio: 20 / 19;
    --media-radius: 0;
    --media-w: auto;
    --media-bleed: 0px;
    --body-pad: 0;
    --body-gap: 12px;
    --body-radius: 0;
    --chip-fs: 16px;
    --chip-pad: 0;
    --chip-bw: 0;
    --chip-radius: 0;
    --chip-ls: 0;
    --title-fs: 26px;
    --title-lh: 1.25;
    --title-lines: none;
    --credit-fs: 13px;
    --credit-lh: 1.3;
    --excerpt-fs: 18px;
    --excerpt-lh: 1.25;
}
@media (min-width: 768px){
    .dz-section--people{  /* Portrait-Tablet · 768 */
        --sec-pt: 48px;
        --sec-pb: 48px;
        --sec-px: 24px;
        --sec-bw: 3px;
        --sec-margin: var(--space-section) 0 0;
        --sec-max: 1416px;
        --head-fs: 26px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 24px;
        --head-gap: 10px;
        --head-icon: 17px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 1;
        --grid-gap-x: 0;
        --grid-gap-y: 0;
        --grid-orphan: auto;
        --card-dir: row;
        --card-align: center;
        --card-gap: 24px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 1 / 1;
        --media-radius: 20px;
        --media-w: 45%;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 14px;
        --body-radius: 0;
        --chip-fs: 17px;
        --chip-pad: 0;
        --chip-bw: 0;
        --chip-radius: 0;
        --chip-ls: 0;
        --title-fs: 30px;
        --title-lh: 1.25;
        --title-lines: none;
        --credit-fs: 14px;
        --credit-lh: 1.3;
        --excerpt-fs: 19px;
        --excerpt-lh: 1.25;
    }
}
@media (min-width: 769px){
    .dz-section--people{  /* Landscape-Tablet · 1024 */
        --sec-pt: 72px;
        --sec-pb: 72px;
        --sec-px: 24px;
        --sec-bw: 3px 0;
        --sec-margin: var(--space-section) 0 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 28px;
        --head-gap: 10px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 1;
        --grid-gap-x: 0;
        --grid-gap-y: 0;
        --grid-orphan: auto;
        --card-dir: row;
        --card-align: center;
        --card-gap: 40px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 4 / 3;
        --media-radius: 20px;
        --media-w: 50%;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 16px;
        --body-radius: 0;
        --chip-fs: 18px;
        --chip-pad: 0;
        --chip-bw: 0;
        --chip-radius: 0;
        --chip-ls: 0;
        --title-fs: 34px;
        --title-lh: 1.1;
        --title-lines: none;
        --credit-fs: 15px;
        --credit-lh: 1.3;
        --excerpt-fs: 23px;
        --excerpt-lh: 1.1;
    }
}
@media (min-width: 1025px){
    .dz-section--people{  /* Desktop · 1512 */
        --sec-pt: 96px;
        --sec-pb: 96px;
        --sec-px: 48px;
        --sec-bw: 3px 0;
        --sec-margin: var(--space-section) 0 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 40px;
        --head-gap: 12px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 1;
        --grid-gap-x: 0;
        --grid-gap-y: 0;
        --grid-orphan: auto;
        --card-dir: row;
        --card-align: center;
        --card-gap: 64px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 4 / 3;
        --media-radius: 30px;
        --media-w: 50%;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 20px;
        --body-radius: 0;
        --chip-fs: 24px;
        --chip-pad: 0;
        --chip-bw: 0;
        --chip-radius: 0;
        --chip-ls: 0;
        --title-fs: 40px;
        --title-lh: 1.1;
        --title-lines: none;
        --credit-fs: 18px;
        --credit-lh: 1.3;
        --excerpt-fs: 28px;
        --excerpt-lh: 1.1;
    }
}

/* ═════════════════════════════════════════════════════════════
   06 · HEALTH & SOCIETY
   Shortcode: [dazzletic_articles block="health" category="health" layout="caption" count="2" credit="no"]
   Divi:      Section-Klasse  dz-section dz-section--health
   Eckige Karten: Bild 3:2, schwarzer Textblock mit weißem Label und bis zu 3 Titelzeilen.
   ═════════════════════════════════════════════════════════════ */
.dz-section--health{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --sec-end: var(--space-section);
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-black);
    --head-icon-display: inline-block;
    --head-align: start;
    --head-mx: 0 auto;
    --card-bg: var(--c-black);
    --card-bc: transparent;
    --card-overflow: hidden;
    --body-bg: var(--c-black);
    --chip-bg: var(--c-white);
    --chip-bc: var(--c-white);
    --chip-color: var(--c-black);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-white);
    --credit-ff: var(--font-body);
    --credit-fw: var(--fw-semibold);
    --credit-color: var(--c-white);
    --credit-deco: none;
    --excerpt-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 62px;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --head-fs: 24px;
    --head-lh: 1;
    --head-ls: 0;
    --head-mb: 15px;
    --head-gap: 8px;
    --head-icon: 17px;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --grid-cols: 1;
    --grid-gap-x: 24px;
    --grid-gap-y: 32px;
    --grid-orphan: auto;
    --card-dir: column;
    --card-align: stretch;
    --card-gap: 0;
    --card-pad: 0;
    --card-bw: 0;
    --card-radius: 0;
    --media-ratio: 3 / 2;
    --media-radius: 0;
    --media-w: auto;
    --media-bleed: 0px;
    --body-pad: 14px 16px 18px;
    --body-gap: 8px;
    --body-radius: 0;
    --chip-fs: 11px;
    --chip-pad: 3px 10px;
    --chip-bw: 1px;
    --chip-radius: 10px;
    --chip-ls: .03em;
    --title-fs: 20px;
    --title-lh: 1.15;
    --title-ls: .01em;
    --title-lines: 3;
    --credit-fs: 13px;
    --credit-lh: 1.3;
    --excerpt-fs: 14px;
    --excerpt-lh: 1.5;
}
@media (min-width: 768px){
    .dz-section--health{  /* Portrait-Tablet · 768 */
        --sec-pt: 66px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 26px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 20px;
        --head-gap: 10px;
        --head-icon: 17px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 2;
        --grid-gap-x: 24px;
        --grid-gap-y: 24px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 0;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 3 / 2;
        --media-radius: 0;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 16px 18px 20px;
        --body-gap: 8px;
        --body-radius: 0;
        --chip-fs: 12px;
        --chip-pad: 4px 10px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 23px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 3;
        --credit-fs: 14px;
        --credit-lh: 1.3;
        --excerpt-fs: 15px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 769px){
    .dz-section--health{  /* Landscape-Tablet · 1024 */
        --sec-pt: 96px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 18px;
        --head-gap: 10px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 2;
        --grid-gap-x: 24px;
        --grid-gap-y: 24px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 0;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 3 / 2;
        --media-radius: 0;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 16px 18px 20px;
        --body-gap: 8px;
        --body-radius: 0;
        --chip-fs: 13px;
        --chip-pad: 4px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 20px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 3;
        --credit-fs: 15px;
        --credit-lh: 1.3;
        --excerpt-fs: 16px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 1025px){
    .dz-section--health{  /* Desktop · 1512 */
        --sec-pt: 96px;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 24px;
        --head-gap: 12px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 2;
        --grid-gap-x: 32px;
        --grid-gap-y: 32px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 0;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 3 / 2;
        --media-radius: 0;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 20px 24px 24px;
        --body-gap: 10px;
        --body-radius: 0;
        --chip-fs: 14px;
        --chip-pad: 5px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 28px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 3;
        --credit-fs: 16px;
        --credit-lh: 1.3;
        --excerpt-fs: 18px;
        --excerpt-lh: 1.5;
    }
}

/* ═════════════════════════════════════════════════════════════
   07 · NEWSLETTER
   Shortcode: [dazzletic_newsletter]
   Divi:      Section-Klasse  dz-section dz-section--newsletter
   Hell getöntes Band, zentrierte Überschrift, Feld + Button nebeneinander (Pill, schwarzer Rahmen).
   --dm-* = Variablen des Mailjet-Formulars (dazzletic-mailjet/dm.css), --dm-max = Formularbreite.
   Einwilligung: consent="notice" zeigt statt der Checkbox einen Datenschutz-Hinweis (Double-Opt-in).
   ═════════════════════════════════════════════════════════════ */
.dz-section--newsletter{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: var(--c-green-tint);
    --sec-bc: var(--c-green);
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-gray-3);
    --head-icon-display: none;
    --head-align: center;
    --head-mx: auto;
    --dm-align: center;
    --dm-field-minw: 0;
    --dm-field-ff: var(--font-body);
    --dm-field-fw: var(--fw-regular);
    --dm-field-tt: none;
    --dm-field-align: center;
    --dm-field-bg: transparent;
    --dm-field-bc: var(--c-black);
    --dm-field-color: var(--c-black);
    --dm-btn-ff: var(--font-heading);
    --dm-btn-fw: var(--fw-semibold);
    --dm-btn-bg: transparent;
    --dm-btn-bg-hover: var(--c-green);
    --dm-btn-bc: var(--c-black);
    --dm-btn-color: var(--c-black);
    --dm-note-color: var(--c-black);
    --dm-note-align: center;

    /* Mobile · 428 */
    --sec-pt: 40px;
    --sec-pb: 40px;
    --sec-px: 16px;
    --sec-bw: 1px 0;
    --sec-margin: var(--space-section) 0 0;
    --sec-max: 1416px;
    --head-fs: 17px;
    --head-lh: 1.2;
    --head-ls: .02em;
    --head-mb: 24px;
    --head-gap: 8px;
    --head-icon: 0;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --dm-max: 340px;
    --dm-cols: minmax(0, 1fr) auto;
    --dm-areas: "left right" "bottom bottom";
    --dm-gap-x: 24px;
    --dm-gap-y: 14px;
    --dm-field-pad: 7px 16px;
    --dm-field-fs: 13px;
    --dm-field-bw: 2px;
    --dm-field-radius: 50px;
    --dm-btn-pad: 8px 16px;
    --dm-btn-fs: 12px;
    --dm-btn-bw: 2px;
    --dm-btn-radius: 50px;
    --dm-note-fs: 11px;
    --dm-msg-fs: 12px;
}
@media (min-width: 768px){
    .dz-section--newsletter{  /* Portrait-Tablet · 768 */
        --sec-pt: 56px;
        --sec-pb: 56px;
        --sec-px: 24px;
        --sec-bw: 1px 0;
        --sec-margin: var(--space-section) 0 0;
        --sec-max: 1416px;
        --head-fs: 20px;
        --head-lh: 1.2;
        --head-ls: .02em;
        --head-mb: 32px;
        --head-gap: 8px;
        --head-icon: 0;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --dm-max: 480px;
        --dm-cols: minmax(0, 1fr) auto;
        --dm-areas: "left right" "bottom bottom";
        --dm-gap-x: 24px;
        --dm-gap-y: 16px;
        --dm-field-pad: 10px 20px;
        --dm-field-fs: 15px;
        --dm-field-bw: 2px;
        --dm-field-radius: 50px;
        --dm-btn-pad: 11px 22px;
        --dm-btn-fs: 14px;
        --dm-btn-bw: 2px;
        --dm-btn-radius: 50px;
        --dm-note-fs: 12px;
        --dm-msg-fs: 13px;
    }
}
@media (min-width: 769px){
    .dz-section--newsletter{  /* Landscape-Tablet · 1024 */
        --sec-pt: 72px;
        --sec-pb: 72px;
        --sec-px: 24px;
        --sec-bw: 1px 0;
        --sec-margin: var(--space-section) 0 0;
        --sec-max: 1416px;
        --head-fs: 24px;
        --head-lh: 1.2;
        --head-ls: .02em;
        --head-mb: 36px;
        --head-gap: 10px;
        --head-icon: 0;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --dm-max: 600px;
        --dm-cols: minmax(0, 1fr) auto;
        --dm-areas: "left right" "bottom bottom";
        --dm-gap-x: 32px;
        --dm-gap-y: 18px;
        --dm-field-pad: 12px 22px;
        --dm-field-fs: 16px;
        --dm-field-bw: 2px;
        --dm-field-radius: 50px;
        --dm-btn-pad: 13px 28px;
        --dm-btn-fs: 16px;
        --dm-btn-bw: 2px;
        --dm-btn-radius: 50px;
        --dm-note-fs: 13px;
        --dm-msg-fs: 14px;
    }
}
@media (min-width: 1025px){
    .dz-section--newsletter{  /* Desktop · 1512 */
        --sec-pt: 96px;
        --sec-pb: 96px;
        --sec-px: 48px;
        --sec-bw: 1px 0;
        --sec-margin: var(--space-section) 0 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1.15;
        --head-ls: .02em;
        --head-mb: 40px;
        --head-gap: 12px;
        --head-icon: 0;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --dm-max: 720px;
        --dm-cols: minmax(0, 1fr) auto;
        --dm-areas: "left right" "bottom bottom";
        --dm-gap-x: 40px;
        --dm-gap-y: 20px;
        --dm-field-pad: 14px 24px;
        --dm-field-fs: 18px;
        --dm-field-bw: 2px;
        --dm-field-radius: 50px;
        --dm-btn-pad: 15px 32px;
        --dm-btn-fs: 18px;
        --dm-btn-bw: 2px;
        --dm-btn-radius: 50px;
        --dm-note-fs: 14px;
        --dm-msg-fs: 14px;
    }
}

/* ═════════════════════════════════════════════════════════════
   08 · LIFESTYLE
   Shortcode: [dazzletic_articles block="lifestyle" category="lifestyle" layout="caption" count="4" credit="no"]
   Divi:      Section-Klasse  dz-section dz-section--lifestyle
   2-spaltiges Raster (Mobile) aus runden Karten: Bild, schwarzer Textblock, bis zu 3 Titelzeilen.
   ═════════════════════════════════════════════════════════════ */
.dz-section--lifestyle{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --sec-end: var(--space-section);
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-black);
    --head-icon-display: inline-block;
    --head-align: start;
    --head-mx: 0 auto;
    --card-bg: var(--c-black);
    --card-bc: transparent;
    --card-overflow: hidden;
    --body-bg: var(--c-black);
    --chip-bg: var(--c-white);
    --chip-bc: var(--c-white);
    --chip-color: var(--c-black);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-white);
    --credit-ff: var(--font-body);
    --credit-fw: var(--fw-semibold);
    --credit-color: var(--c-white);
    --credit-deco: none;
    --excerpt-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 62px;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --head-fs: 24px;
    --head-lh: 1;
    --head-ls: 0;
    --head-mb: 15px;
    --head-gap: 8px;
    --head-icon: 17px;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --grid-cols: 2;
    --grid-gap-x: 20px;
    --grid-gap-y: 24px;
    --grid-orphan: auto;
    --card-dir: column;
    --card-align: stretch;
    --card-gap: 0;
    --card-pad: 0;
    --card-bw: 0;
    --card-radius: 16px;
    --media-ratio: 1 / 1.04;
    --media-radius: 0;
    --media-w: auto;
    --media-bleed: 0px;
    --body-pad: 10px 12px 14px;
    --body-gap: 6px;
    --body-radius: 0;
    --chip-fs: 10px;
    --chip-pad: 2px 8px;
    --chip-bw: 1px;
    --chip-radius: 10px;
    --chip-ls: .03em;
    --title-fs: 16px;
    --title-lh: 1.1;
    --title-ls: 0;
    --title-lines: 3;
    --credit-fs: 13px;
    --credit-lh: 1.3;
    --excerpt-fs: 13px;
    --excerpt-lh: 1.5;
}
@media (min-width: 768px){
    .dz-section--lifestyle{  /* Portrait-Tablet · 768 */
        --sec-pt: 66px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 26px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 20px;
        --head-gap: 10px;
        --head-icon: 17px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 2;
        --grid-gap-x: 24px;
        --grid-gap-y: 24px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 0;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 20px;
        --media-ratio: 1 / 1.04;
        --media-radius: 0;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 12px 14px 16px;
        --body-gap: 8px;
        --body-radius: 0;
        --chip-fs: 11px;
        --chip-pad: 3px 9px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 16px;
        --title-lh: 1.1;
        --title-ls: 0;
        --title-lines: 3;
        --credit-fs: 13px;
        --credit-lh: 1.3;
        --excerpt-fs: 14px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 769px){
    .dz-section--lifestyle{  /* Landscape-Tablet · 1024 */
        --sec-pt: 96px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 18px;
        --head-gap: 10px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 4;
        --grid-gap-x: 24px;
        --grid-gap-y: 24px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 0;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 20px;
        --media-ratio: 1 / 1.04;
        --media-radius: 0;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 12px 14px 16px;
        --body-gap: 8px;
        --body-radius: 0;
        --chip-fs: 12px;
        --chip-pad: 3px 10px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 15px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 3;
        --credit-fs: 14px;
        --credit-lh: 1.3;
        --excerpt-fs: 15px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 1025px){
    .dz-section--lifestyle{  /* Desktop · 1512 */
        --sec-pt: 96px;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 24px;
        --head-gap: 12px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 4;
        --grid-gap-x: 32px;
        --grid-gap-y: 32px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 0;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 20px;
        --media-ratio: 1 / 1.04;
        --media-radius: 0;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 16px 18px 20px;
        --body-gap: 10px;
        --body-radius: 0;
        --chip-fs: 13px;
        --chip-pad: 4px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 21px;
        --title-lh: 1.1;
        --title-ls: 0;
        --title-lines: 3;
        --credit-fs: 16px;
        --credit-lh: 1.3;
        --excerpt-fs: 17px;
        --excerpt-lh: 1.5;
    }
}

/* ═════════════════════════════════════════════════════════════
   09 · CULTURE
   Shortcode: [dazzletic_articles block="culture" category="culture" layout="feature" count="3" credit="yes"]
   Divi:      Section-Klasse  dz-section dz-section--culture
   Karten untereinander: Bild 6:5 (rund), graues Label, Titel + Credit (schwarz).
   ═════════════════════════════════════════════════════════════ */
.dz-section--culture{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --sec-end: var(--space-section);
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-black);
    --head-icon-display: inline-block;
    --head-align: start;
    --head-mx: 0 auto;
    --card-bg: transparent;
    --card-bc: transparent;
    --card-overflow: visible;
    --body-bg: transparent;
    --chip-bg: var(--c-neutral-2);
    --chip-bc: var(--c-neutral-1);
    --chip-color: var(--c-black);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);
    --credit-ff: var(--font-body);
    --credit-fw: var(--fw-semibold);
    --credit-color: var(--c-black);
    --credit-deco: none;
    --excerpt-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 62px;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --head-fs: 24px;
    --head-lh: 1;
    --head-ls: 0;
    --head-mb: 15px;
    --head-gap: 8px;
    --head-icon: 17px;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --grid-cols: 1;
    --grid-gap-x: 24px;
    --grid-gap-y: 32px;
    --grid-orphan: auto;
    --card-dir: column;
    --card-align: stretch;
    --card-gap: 12px;
    --card-pad: 0;
    --card-bw: 0;
    --card-radius: 0;
    --media-ratio: 6 / 5;
    --media-radius: 20px;
    --media-w: auto;
    --media-bleed: 0px;
    --body-pad: 0;
    --body-gap: 8px;
    --body-radius: 0;
    --chip-fs: 11px;
    --chip-pad: 3px 10px;
    --chip-bw: 1px;
    --chip-radius: 10px;
    --chip-ls: .03em;
    --title-fs: 20px;
    --title-lh: 1.1;
    --title-ls: .01em;
    --title-lines: 2;
    --credit-fs: 15px;
    --credit-lh: 1.3;
    --excerpt-fs: 14px;
    --excerpt-lh: 1.5;
}
@media (min-width: 768px){
    .dz-section--culture{  /* Portrait-Tablet · 768 */
        --sec-pt: 66px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 26px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 20px;
        --head-gap: 10px;
        --head-icon: 17px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 2;
        --grid-gap-x: 24px;
        --grid-gap-y: 32px;
        --grid-orphan: 1 / -1;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 14px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 6 / 5;
        --media-radius: 20px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 8px;
        --body-radius: 0;
        --chip-fs: 12px;
        --chip-pad: 4px 10px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 18px;
        --title-lh: 1.1;
        --title-ls: .01em;
        --title-lines: 2;
        --credit-fs: 15px;
        --credit-lh: 1.3;
        --excerpt-fs: 15px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 769px){
    .dz-section--culture{  /* Landscape-Tablet · 1024 */
        --sec-pt: 96px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 18px;
        --head-gap: 10px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 3;
        --grid-gap-x: 24px;
        --grid-gap-y: 24px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 14px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 6 / 5;
        --media-radius: 20px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 8px;
        --body-radius: 0;
        --chip-fs: 13px;
        --chip-pad: 4px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 18px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 2;
        --credit-fs: 15px;
        --credit-lh: 1.3;
        --excerpt-fs: 16px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 1025px){
    .dz-section--culture{  /* Desktop · 1512 */
        --sec-pt: 96px;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1;
        --head-ls: 0;
        --head-mb: 24px;
        --head-gap: 12px;
        --head-icon: 19px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 3;
        --grid-gap-x: 32px;
        --grid-gap-y: 40px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 16px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 6 / 5;
        --media-radius: 30px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 10px;
        --body-radius: 0;
        --chip-fs: 14px;
        --chip-pad: 5px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 24px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 2;
        --credit-fs: 18px;
        --credit-lh: 1.3;
        --excerpt-fs: 18px;
        --excerpt-lh: 1.5;
    }
}

/* ═════════════════════════════════════════════════════════════
   10 · MIXTAPES  (grünes Band)
   Shortcode: [dazzletic_mixtapes]  →  [dsp_spotify_slider title="Mixtapes"]
   Divi:      Section-Klasse  dz-section dz-section--mixtapes
   Grünes Band: Pill-Überschrift links, Pfeil-Box rechts, Slider aus weißen Karten (Cover 1:1).
   --grid-slide-w = Folienbreite, --grid-bleed = Überstand bis zum Bildschirmrand (0px = im Gutter).
   --navi-* = Pfeil-Box (Innenabstand, Icon-Breite, Rahmen).
   ═════════════════════════════════════════════════════════════ */
.dz-section--mixtapes{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: var(--c-green);
    --sec-bc: transparent;
    --head-color: var(--c-black);
    --head-bg: #FFF;
    --head-bc: var(--c-black);
    --navi-bg: var(--c-white);
    --navi-bc: var(--c-black);
    --card-bg: var(--c-white);
    --card-bc: transparent;
    --card-overflow: hidden;
    --chip-bg: var(--c-neutral-2);
    --chip-bc: var(--c-neutral-1);
    --chip-color: var(--c-black);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-heading);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 28px;
    --sec-pb: 32px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: var(--space-section) 0 0;
    --sec-max: 1416px;
    --head-fs: 13px;
    --head-lh: 1;
    --head-ls: .04em;
    --head-mb: 24px;
    --head-gap: 8px;
    --head-icon: 0;
    --head-pad: 7px 14px;
    --head-bw: 2px;
    --head-radius: 50px;
    --navi-pad: 6px 10px;
    --navi-icon: 14px;
    --navi-bw: 2px;
    --grid-slide-w: 56vw;
    --grid-gap-x: 48px;
    --grid-bleed: var(--sec-px);
    --card-gap: 0;
    --card-pad: 0;
    --card-bw: 0;
    --card-radius: 0;
    --media-ratio: 1 / 1;
    --media-radius: 0;
    --body-pad: 10px 10px 12px;
    --body-gap: 8px;
    --chip-fs: 10px;
    --chip-pad: 2px 8px;
    --chip-bw: 1px;
    --chip-radius: 10px;
    --chip-ls: .03em;
    --title-fs: 12px;
    --title-lh: 1;
    --title-lines: 2;
}
@media (min-width: 768px){
    .dz-section--mixtapes{  /* Portrait-Tablet · 768 */
        --sec-pt: 40px;
        --sec-pb: 48px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: var(--space-section) 0 0;
        --sec-max: 1416px;
        --head-fs: 14px;
        --head-lh: 1;
        --head-ls: .04em;
        --head-mb: 28px;
        --head-gap: 8px;
        --head-icon: 0;
        --head-pad: 7px 16px;
        --head-bw: 2px;
        --head-radius: 50px;
        --navi-pad: 7px 12px;
        --navi-icon: 16px;
        --navi-bw: 2px;
        --grid-slide-w: 38vw;
        --grid-gap-x: 32px;
        --grid-bleed: var(--sec-px);
        --card-gap: 0;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 1 / 1;
        --media-radius: 0;
        --body-pad: 12px 12px 14px;
        --body-gap: 8px;
        --chip-fs: 11px;
        --chip-pad: 3px 9px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 15px;
        --title-lh: 1;
        --title-lines: 2;
    }
}
@media (min-width: 769px){
    .dz-section--mixtapes{  /* Landscape-Tablet · 1024 */
        --sec-pt: 64px;
        --sec-pb: 72px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: var(--space-section) 0 0;
        --sec-max: 1416px;
        --head-fs: 16px;
        --head-lh: 1;
        --head-ls: .04em;
        --head-mb: 32px;
        --head-gap: 10px;
        --head-icon: 0;
        --head-pad: 8px 18px;
        --head-bw: 2px;
        --head-radius: 50px;
        --navi-pad: 8px 14px;
        --navi-icon: 18px;
        --navi-bw: 2px;
        --grid-slide-w: calc((100% - 2 * var(--grid-gap-x)) / 3);
        --grid-gap-x: 32px;
        --grid-bleed: 0px;
        --card-gap: 0;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 1 / 1;
        --media-radius: 0;
        --body-pad: 12px 14px 16px;
        --body-gap: 10px;
        --chip-fs: 12px;
        --chip-pad: 3px 10px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 16px;
        --title-lh: 1;
        --title-lines: 2;
    }
}
@media (min-width: 1025px){
    .dz-section--mixtapes{  /* Desktop · 1512 */
        --sec-pt: 80px;
        --sec-pb: 96px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: var(--space-section) 0 0;
        --sec-max: 1416px;
        --head-fs: 18px;
        --head-lh: 1;
        --head-ls: .04em;
        --head-mb: 40px;
        --head-gap: 12px;
        --head-icon: 0;
        --head-pad: 9px 20px;
        --head-bw: 2px;
        --head-radius: 50px;
        --navi-pad: 8px 16px;
        --navi-icon: 20px;
        --navi-bw: 2px;
        --grid-slide-w: calc((100% - 3 * var(--grid-gap-x)) / 4);
        --grid-gap-x: 40px;
        --grid-bleed: 0px;
        --card-gap: 0;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 1 / 1;
        --media-radius: 0;
        --body-pad: 14px 16px 18px;
        --body-gap: 10px;
        --chip-fs: 13px;
        --chip-pad: 4px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 18px;
        --title-lh: 1;
        --title-lines: 2;
    }
}

/* ═════════════════════════════════════════════════════════════
   11 · FOOTER  (Logo, Social, Link-Spalten)
   Divi:      Section-Klasse  dz-section dz-section--footer
   Divi Theme Builder → Footer, 1. Section. Lila Rahmen 6px oben + seitlich (mit footer-newsletter ein Kasten); --sec-px = Abstand ab Rahmen (Rahmen + Abstand = Seiten-Gutter).
   Spalten: dz-footer__brand (Logo dz-footer__logo, Social-Row dz-footer__social), 2 × dz-footer__nav.
   Bis 768px eine Spalte: Link-Spalten als Akkordeon mit „+" und lila Trennlinien (JS: footer.js), darüber offen nebeneinander.
   --footer-cols = Raster der Row, --footer-nav-h = Zeilenhöhe im Akkordeon, --footer-nav-bw = Trennlinie (0 = keine).
   ═════════════════════════════════════════════════════════════ */
.dz-section--footer{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: var(--c-white);
    --sec-bc: var(--c-purple);
    --footer-line: var(--c-purple);
    --footer-title-color: var(--c-black);
    --footer-link-color: var(--c-black);
    --footer-icon-color: var(--c-black);
    --footer-title-weight: var(--weight-semi);

    /* Mobile · 428 */
    --sec-pt: 35px;
    --sec-pb: 0;
    --sec-px: 10px;
    --sec-bw: 6px 6px 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --footer-cols: 1fr;
    --footer-gap-x: 0;
    --footer-gap-y: 0;
    --footer-logo-h: 23px;
    --footer-brand-gap: 31px;
    --footer-brand-pb: 49px;
    --footer-icon: 18px;
    --footer-icon-gap: 28px;
    --footer-nav-h: 42px;
    --footer-nav-bw: 2px;
    --footer-nav-pb: 18px;
    --footer-title-fs: 13px;
    --footer-title-mb: 0;
    --footer-link-fs: 13px;
    --footer-link-gap: 12px;
}
@media (min-width: 768px){
    .dz-section--footer{  /* Portrait-Tablet · 768 */
        --sec-pt: 40px;
        --sec-pb: 0;
        --sec-px: 18px;
        --sec-bw: 6px 6px 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --footer-cols: 1fr;
        --footer-gap-x: 0;
        --footer-gap-y: 0;
        --footer-logo-h: 24px;
        --footer-brand-gap: 28px;
        --footer-brand-pb: 40px;
        --footer-icon: 18px;
        --footer-icon-gap: 28px;
        --footer-nav-h: 48px;
        --footer-nav-bw: 2px;
        --footer-nav-pb: 20px;
        --footer-title-fs: 13px;
        --footer-title-mb: 0;
        --footer-link-fs: 16px;
        --footer-link-gap: 12px;
    }
}
@media (min-width: 769px){
    .dz-section--footer{  /* Landscape-Tablet · 1024 */
        --sec-pt: 56px;
        --sec-pb: 48px;
        --sec-px: 18px;
        --sec-bw: 6px 6px 2px;
        --sec-margin: 0;
        --sec-max: 1416px;
        --footer-cols: repeat(3, minmax(0, 1fr));
        --footer-gap-x: 32px;
        --footer-gap-y: 0;
        --footer-logo-h: 26px;
        --footer-brand-gap: 24px;
        --footer-brand-pb: 0;
        --footer-icon: 18px;
        --footer-icon-gap: 24px;
        --footer-nav-h: auto;
        --footer-nav-bw: 0;
        --footer-nav-pb: 0;
        --footer-title-fs: 16px;
        --footer-title-mb: 16px;
        --footer-link-fs: 16px;
        --footer-link-gap: 10px;
    }
}
@media (min-width: 1025px){
    .dz-section--footer{  /* Desktop · 1512 */
        --sec-pt: 72px;
        --sec-pb: 56px;
        --sec-px: 42px;
        --sec-bw: 6px 6px 2px;
        --sec-margin: 0;
        --sec-max: 1416px;
        --footer-cols: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
        --footer-gap-x: 48px;
        --footer-gap-y: 0;
        --footer-logo-h: 30px;
        --footer-brand-gap: 28px;
        --footer-brand-pb: 0;
        --footer-icon: 20px;
        --footer-icon-gap: 28px;
        --footer-nav-h: auto;
        --footer-nav-bw: 0;
        --footer-nav-pb: 0;
        --footer-title-fs: 18px;
        --footer-title-mb: 20px;
        --footer-link-fs: 18px;
        --footer-link-gap: 12px;
    }
}

/* ═════════════════════════════════════════════════════════════
   12 · FOOTER · NEWSLETTER
   Divi:      Section-Klasse  dz-section dz-section--footer-newsletter
   Divi Theme Builder → Footer, 2. Section. Lila Rahmen seitlich + unten. Überschrift = dz-section__title, Einleitung = dz-lead,
   Formular = Code-Modul mit [dazzletic_mailjet_form] (Feld, Button, Checkbox) – --dm-* wie beim Startseiten-Newsletter.
   ═════════════════════════════════════════════════════════════ */
.dz-section--footer-newsletter{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: var(--c-white);
    --sec-bc: var(--c-purple);
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-gray-3);
    --head-icon-display: none;
    --head-align: start;
    --head-mx: 0 auto;
    --lead-color: var(--c-black);
    --dm-mx: 0;
    --dm-align: center;
    --dm-field-minw: 0;
    --dm-field-ff: var(--font-body);
    --dm-field-fw: var(--fw-medium);
    --dm-field-tt: none;
    --dm-field-align: center;
    --dm-field-bg: var(--c-white);
    --dm-field-bc: var(--c-purple);
    --dm-field-color: var(--c-black);
    --dm-btn-ff: var(--font-heading);
    --dm-btn-fw: var(--fw-semibold);
    --dm-btn-bg: var(--c-white);
    --dm-btn-bg-hover: var(--c-purple-tint);
    --dm-btn-bc: var(--c-purple);
    --dm-btn-color: var(--c-black);
    --dm-note-color: var(--c-black);
    --dm-note-align: left;
    --dm-note-fw: var(--fw-semibold);
    --dm-note-lh: 1.4;
    --dm-link-color: inherit;
    --dm-placeholder-opacity: 1;

    /* Mobile · 428 */
    --sec-pt: 60px;
    --sec-pb: 48px;
    --sec-px: 10px;
    --sec-bw: 0 6px 6px;
    --sec-margin: 0;
    --sec-max: 1416px;
    --head-fs: 24px;
    --head-lh: 1.15;
    --head-ls: 0;
    --head-mb: 20px;
    --head-gap: 0;
    --head-icon: 0;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --lead-fs: 20px;
    --lead-lh: 1.35;
    --lead-mb: 28px;
    --dm-max: 376px;
    --dm-cols: minmax(0, 1fr) auto;
    --dm-areas: "left right" "bottom bottom";
    --dm-gap-x: 60px;
    --dm-gap-y: 44px;
    --dm-field-pad: 8px 16px;
    --dm-field-fs: 16px;
    --dm-field-bw: 5px;
    --dm-field-radius: 50px;
    --dm-btn-pad: 11px 12px;
    --dm-btn-fs: 14px;
    --dm-btn-bw: 5px;
    --dm-btn-radius: 50px;
    --dm-note-fs: 14px;
    --dm-msg-fs: 13px;
    --dm-check: 14px;
}
@media (min-width: 768px){
    .dz-section--footer-newsletter{  /* Portrait-Tablet · 768 */
        --sec-pt: 64px;
        --sec-pb: 64px;
        --sec-px: 18px;
        --sec-bw: 0 6px 6px;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 26px;
        --head-lh: 1.15;
        --head-ls: 0;
        --head-mb: 20px;
        --head-gap: 0;
        --head-icon: 0;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --lead-fs: 22px;
        --lead-lh: 1.35;
        --lead-mb: 32px;
        --dm-max: 520px;
        --dm-cols: minmax(0, 1fr) auto;
        --dm-areas: "left right" "bottom bottom";
        --dm-gap-x: 40px;
        --dm-gap-y: 40px;
        --dm-field-pad: 9px 18px;
        --dm-field-fs: 16px;
        --dm-field-bw: 5px;
        --dm-field-radius: 50px;
        --dm-btn-pad: 12px 16px;
        --dm-btn-fs: 15px;
        --dm-btn-bw: 5px;
        --dm-btn-radius: 50px;
        --dm-note-fs: 14px;
        --dm-msg-fs: 13px;
        --dm-check: 15px;
    }
}
@media (min-width: 769px){
    .dz-section--footer-newsletter{  /* Landscape-Tablet · 1024 */
        --sec-pt: 56px;
        --sec-pb: 72px;
        --sec-px: 18px;
        --sec-bw: 0 6px 6px;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 28px;
        --head-lh: 1.15;
        --head-ls: 0;
        --head-mb: 24px;
        --head-gap: 0;
        --head-icon: 0;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --lead-fs: 24px;
        --lead-lh: 1.3;
        --lead-mb: 32px;
        --dm-max: 560px;
        --dm-cols: minmax(0, 1fr) auto;
        --dm-areas: "left right" "bottom bottom";
        --dm-gap-x: 40px;
        --dm-gap-y: 36px;
        --dm-field-pad: 10px 20px;
        --dm-field-fs: 17px;
        --dm-field-bw: 5px;
        --dm-field-radius: 50px;
        --dm-btn-pad: 13px 20px;
        --dm-btn-fs: 16px;
        --dm-btn-bw: 5px;
        --dm-btn-radius: 50px;
        --dm-note-fs: 15px;
        --dm-msg-fs: 14px;
        --dm-check: 16px;
    }
}
@media (min-width: 1025px){
    .dz-section--footer-newsletter{  /* Desktop · 1512 */
        --sec-pt: 64px;
        --sec-pb: 80px;
        --sec-px: 42px;
        --sec-bw: 0 6px 6px;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1.15;
        --head-ls: 0;
        --head-mb: 24px;
        --head-gap: 0;
        --head-icon: 0;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --lead-fs: 28px;
        --lead-lh: 1.3;
        --lead-mb: 36px;
        --dm-max: 640px;
        --dm-cols: minmax(0, 1fr) auto;
        --dm-areas: "left right" "bottom bottom";
        --dm-gap-x: 48px;
        --dm-gap-y: 36px;
        --dm-field-pad: 11px 22px;
        --dm-field-fs: 18px;
        --dm-field-bw: 5px;
        --dm-field-radius: 50px;
        --dm-btn-pad: 14px 24px;
        --dm-btn-fs: 17px;
        --dm-btn-bw: 5px;
        --dm-btn-radius: 50px;
        --dm-note-fs: 16px;
        --dm-msg-fs: 14px;
        --dm-check: 16px;
    }
}

/* ═════════════════════════════════════════════════════════════
   13 · KATEGORIE · TITEL
   Shortcode: [dazzletic_category]  → Kategoriename als H1 (title="…" | none)
   Divi:      Section-Klasse  dz-section dz-section--cat-head
   Zentrierter Seitentitel ohne Pfeil direkt unter dem Header (Abstand zum Header: 00 · SEITE).
   Leere Kategorie: Hinweis unter dem Titel als .dz-lead (--lead-*).
   ═════════════════════════════════════════════════════════════ */
.dz-section--cat-head{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-gray-3);
    --head-icon-display: none;
    --head-align: center;
    --head-mx: auto;
    --head-fw: var(--fw-regular);
    --lead-color: var(--c-gray-1);
    --lead-align: center;

    /* Mobile · 428 */
    --sec-pt: 0;
    --sec-pb: 8px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --head-fs: 22px;
    --head-lh: 1.15;
    --head-ls: .04em;
    --head-mb: 12px;
    --head-gap: 0;
    --head-icon: 0;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --lead-fs: 15px;
    --lead-lh: 1.4;
    --lead-mb: 24px;
}
@media (min-width: 768px){
    .dz-section--cat-head{  /* Portrait-Tablet · 768 */
        --sec-pt: 8px;
        --sec-pb: 8px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 26px;
        --head-lh: 1.15;
        --head-ls: .04em;
        --head-mb: 16px;
        --head-gap: 0;
        --head-icon: 0;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --lead-fs: 16px;
        --lead-lh: 1.4;
        --lead-mb: 32px;
    }
}
@media (min-width: 769px){
    .dz-section--cat-head{  /* Landscape-Tablet · 1024 */
        --sec-pt: 24px;
        --sec-pb: 8px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 30px;
        --head-lh: 1.15;
        --head-ls: .04em;
        --head-mb: 20px;
        --head-gap: 0;
        --head-icon: 0;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --lead-fs: 17px;
        --lead-lh: 1.4;
        --lead-mb: 40px;
    }
}
@media (min-width: 1025px){
    .dz-section--cat-head{  /* Desktop · 1512 */
        --sec-pt: 40px;
        --sec-pb: 8px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 36px;
        --head-lh: 1.1;
        --head-ls: .04em;
        --head-mb: 24px;
        --head-gap: 0;
        --head-icon: 0;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --lead-fs: 18px;
        --lead-lh: 1.4;
        --lead-mb: 48px;
    }
}

/* ═════════════════════════════════════════════════════════════
   14 · KATEGORIE · AUFMACHER  (grünes Band)
   Shortcode: [dazzletic_category]  → die 2 neuesten Beiträge der Kategorie
   Divi:      Section-Klasse  dz-section dz-section--cat-top
   Grünes Band ohne Überschrift: Bild 8:5, weißes Label mit schwarzem Rahmen, Titel bis 3 Zeilen.
   Mobile untereinander, ab Portrait zwei Spalten.
   ═════════════════════════════════════════════════════════════ */
.dz-section--cat-top{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: var(--c-green);
    --sec-bc: transparent;
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-black);
    --head-icon-display: inline-block;
    --head-align: start;
    --head-mx: 0 auto;
    --card-bg: transparent;
    --card-bc: transparent;
    --card-overflow: visible;
    --body-bg: transparent;
    --chip-bg: var(--c-white);
    --chip-bc: var(--c-black);
    --chip-color: var(--c-black);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);
    --credit-ff: var(--font-heading);
    --credit-fw: var(--fw-light);
    --credit-color: var(--c-black);
    --credit-deco: none;
    --excerpt-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 24px;
    --sec-pb: 28px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --head-fs: 20px;
    --head-lh: 1.15;
    --head-ls: 0;
    --head-mb: 20px;
    --head-gap: 8px;
    --head-icon: 14px;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --grid-cols: 1;
    --grid-gap-x: 24px;
    --grid-gap-y: 32px;
    --grid-orphan: auto;
    --card-dir: column;
    --card-align: stretch;
    --card-gap: 14px;
    --card-pad: 0;
    --card-bw: 0;
    --card-radius: 0;
    --media-ratio: 8 / 5;
    --media-radius: 10px;
    --media-w: auto;
    --media-bleed: 0px;
    --body-pad: 0;
    --body-gap: 10px;
    --body-radius: 0;
    --chip-fs: 11px;
    --chip-pad: 3px 10px;
    --chip-bw: 1px;
    --chip-radius: 10px;
    --chip-ls: .03em;
    --title-fs: 20px;
    --title-lh: 1.15;
    --title-ls: .01em;
    --title-lines: 3;
    --credit-fs: 13px;
    --credit-lh: 1.3;
    --excerpt-fs: 14px;
    --excerpt-lh: 1.5;
}
@media (min-width: 768px){
    .dz-section--cat-top{  /* Portrait-Tablet · 768 */
        --sec-pt: 32px;
        --sec-pb: 40px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 24px;
        --head-lh: 1.15;
        --head-ls: 0;
        --head-mb: 24px;
        --head-gap: 10px;
        --head-icon: 16px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 2;
        --grid-gap-x: 24px;
        --grid-gap-y: 32px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 14px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 8 / 5;
        --media-radius: 20px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 10px;
        --body-radius: 0;
        --chip-fs: 12px;
        --chip-pad: 4px 10px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 22px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 3;
        --credit-fs: 13px;
        --credit-lh: 1.3;
        --excerpt-fs: 15px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 769px){
    .dz-section--cat-top{  /* Landscape-Tablet · 1024 */
        --sec-pt: 40px;
        --sec-pb: 48px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 28px;
        --head-lh: 1.15;
        --head-ls: 0;
        --head-mb: 28px;
        --head-gap: 10px;
        --head-icon: 18px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 2;
        --grid-gap-x: 24px;
        --grid-gap-y: 32px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 14px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 8 / 5;
        --media-radius: 20px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 10px;
        --body-radius: 0;
        --chip-fs: 13px;
        --chip-pad: 4px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 22px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 3;
        --credit-fs: 14px;
        --credit-lh: 1.3;
        --excerpt-fs: 16px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 1025px){
    .dz-section--cat-top{  /* Desktop · 1512 */
        --sec-pt: 48px;
        --sec-pb: 56px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1.15;
        --head-ls: 0;
        --head-mb: 32px;
        --head-gap: 12px;
        --head-icon: 20px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 2;
        --grid-gap-x: 32px;
        --grid-gap-y: 40px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 16px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 8 / 5;
        --media-radius: 30px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 12px;
        --body-radius: 0;
        --chip-fs: 14px;
        --chip-pad: 5px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 24px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 3;
        --credit-fs: 16px;
        --credit-lh: 1.3;
        --excerpt-fs: 18px;
        --excerpt-lh: 1.5;
    }
}

/* ═════════════════════════════════════════════════════════════
   15 · INTERVIEW  (schwarzes Band)
   Shortcode: [dazzletic_category spotlight="interview" spotlight_order="latest|random"]
              bzw. einzeln: [dazzletic_articles block="interview" category="interview" layout="highlight" count="1" orderby="rand"]
   Divi:      Section-Klasse  dz-section dz-section--interview
   Schwarzes Band ohne Überschrift: Bild, Kategorie als grauer Text, weißer Titel + Anriss.
   Mobile gestapelt, ab Portrait Split – Bild links, Text rechts (--card-dir: row).
   ═════════════════════════════════════════════════════════════ */
.dz-section--interview{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: var(--c-black);
    --sec-bc: transparent;
    --head-color: var(--c-white);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-gray-3);
    --head-icon-display: none;
    --head-align: start;
    --head-mx: 0 auto;
    --card-bg: transparent;
    --card-bc: transparent;
    --card-overflow: visible;
    --body-bg: transparent;
    --chip-bg: transparent;
    --chip-bc: transparent;
    --chip-color: var(--c-white);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-white);
    --credit-ff: var(--font-heading);
    --credit-fw: var(--fw-light);
    --credit-color: var(--c-gray-3);
    --credit-deco: none;
    --excerpt-color: var(--c-white);

    /* Mobile · 428 */
    --sec-pt: 48px;
    --sec-pb: 48px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: var(--space-section) 0 0;
    --sec-max: 1416px;
    --head-fs: 20px;
    --head-lh: 1.15;
    --head-ls: 0;
    --head-mb: 20px;
    --head-gap: 8px;
    --head-icon: 14px;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --grid-cols: 1;
    --grid-gap-x: 0;
    --grid-gap-y: 0;
    --grid-orphan: auto;
    --card-dir: column;
    --card-align: stretch;
    --card-gap: 28px;
    --card-pad: 0;
    --card-bw: 0;
    --card-radius: 0;
    --media-ratio: 20 / 19;
    --media-radius: 0;
    --media-w: auto;
    --media-bleed: 0px;
    --body-pad: 0;
    --body-gap: 12px;
    --body-radius: 0;
    --chip-fs: 16px;
    --chip-pad: 0;
    --chip-bw: 0;
    --chip-radius: 0;
    --chip-ls: 0;
    --title-fs: 26px;
    --title-lh: 1.25;
    --title-lines: none;
    --credit-fs: 13px;
    --credit-lh: 1.3;
    --excerpt-fs: 18px;
    --excerpt-lh: 1.25;
}
@media (min-width: 768px){
    .dz-section--interview{  /* Portrait-Tablet · 768 */
        --sec-pt: 56px;
        --sec-pb: 56px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: var(--space-section) 0 0;
        --sec-max: 1416px;
        --head-fs: 24px;
        --head-lh: 1.15;
        --head-ls: 0;
        --head-mb: 24px;
        --head-gap: 10px;
        --head-icon: 16px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 1;
        --grid-gap-x: 0;
        --grid-gap-y: 0;
        --grid-orphan: auto;
        --card-dir: row;
        --card-align: center;
        --card-gap: 24px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 1 / 1;
        --media-radius: 20px;
        --media-w: 45%;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 14px;
        --body-radius: 0;
        --chip-fs: 17px;
        --chip-pad: 0;
        --chip-bw: 0;
        --chip-radius: 0;
        --chip-ls: 0;
        --title-fs: 30px;
        --title-lh: 1.25;
        --title-lines: none;
        --credit-fs: 14px;
        --credit-lh: 1.3;
        --excerpt-fs: 19px;
        --excerpt-lh: 1.25;
    }
}
@media (min-width: 769px){
    .dz-section--interview{  /* Landscape-Tablet · 1024 */
        --sec-pt: 72px;
        --sec-pb: 72px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: var(--space-section) 0 0;
        --sec-max: 1416px;
        --head-fs: 28px;
        --head-lh: 1.15;
        --head-ls: 0;
        --head-mb: 28px;
        --head-gap: 10px;
        --head-icon: 18px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 1;
        --grid-gap-x: 0;
        --grid-gap-y: 0;
        --grid-orphan: auto;
        --card-dir: row;
        --card-align: center;
        --card-gap: 40px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 4 / 3;
        --media-radius: 20px;
        --media-w: 50%;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 16px;
        --body-radius: 0;
        --chip-fs: 18px;
        --chip-pad: 0;
        --chip-bw: 0;
        --chip-radius: 0;
        --chip-ls: 0;
        --title-fs: 34px;
        --title-lh: 1.1;
        --title-lines: none;
        --credit-fs: 15px;
        --credit-lh: 1.3;
        --excerpt-fs: 23px;
        --excerpt-lh: 1.1;
    }
}
@media (min-width: 1025px){
    .dz-section--interview{  /* Desktop · 1512 */
        --sec-pt: 96px;
        --sec-pb: 96px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: var(--space-section) 0 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1.15;
        --head-ls: 0;
        --head-mb: 40px;
        --head-gap: 12px;
        --head-icon: 20px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 1;
        --grid-gap-x: 0;
        --grid-gap-y: 0;
        --grid-orphan: auto;
        --card-dir: row;
        --card-align: center;
        --card-gap: 64px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 4 / 3;
        --media-radius: 30px;
        --media-w: 50%;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 20px;
        --body-radius: 0;
        --chip-fs: 24px;
        --chip-pad: 0;
        --chip-bw: 0;
        --chip-radius: 0;
        --chip-ls: 0;
        --title-fs: 40px;
        --title-lh: 1.1;
        --title-lines: none;
        --credit-fs: 18px;
        --credit-lh: 1.3;
        --excerpt-fs: 28px;
        --excerpt-lh: 1.1;
    }
}

/* ═════════════════════════════════════════════════════════════
   16 · KATEGORIE · RASTER
   Shortcode: [dazzletic_category]  (Block nach dem Newsletter, auch bei „Load more")
   Divi:      Section-Klasse  dz-section dz-section--cat-grid
   2 × 2 Karten (Mobile): Bild 1:1 (rund), graues Label, Titel bis 3 Zeilen. Ab Landscape 4 Spalten.
   ═════════════════════════════════════════════════════════════ */
.dz-section--cat-grid{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --sec-end: var(--space-section);
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-gray-3);
    --head-icon-display: inline-block;
    --head-align: start;
    --head-mx: 0 auto;
    --card-bg: transparent;
    --card-bc: transparent;
    --card-overflow: visible;
    --body-bg: transparent;
    --chip-bg: var(--c-neutral-2);
    --chip-bc: var(--c-neutral-1);
    --chip-color: var(--c-black);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);
    --credit-ff: var(--font-heading);
    --credit-fw: var(--fw-light);
    --credit-color: var(--c-gray-1);
    --credit-deco: none;
    --excerpt-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 62px;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --head-fs: 20px;
    --head-lh: 1.15;
    --head-ls: 0;
    --head-mb: 20px;
    --head-gap: 8px;
    --head-icon: 14px;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --grid-cols: 2;
    --grid-gap-x: 20px;
    --grid-gap-y: 32px;
    --grid-orphan: auto;
    --card-dir: column;
    --card-align: stretch;
    --card-gap: 12px;
    --card-pad: 0;
    --card-bw: 0;
    --card-radius: 0;
    --media-ratio: 1 / 1;
    --media-radius: 16px;
    --media-w: auto;
    --media-bleed: 0px;
    --body-pad: 0;
    --body-gap: 8px;
    --body-radius: 0;
    --chip-fs: 10px;
    --chip-pad: 2px 8px;
    --chip-bw: 1px;
    --chip-radius: 10px;
    --chip-ls: .03em;
    --title-fs: 16px;
    --title-lh: 1.1;
    --title-ls: 0;
    --title-lines: 3;
    --credit-fs: 13px;
    --credit-lh: 1.3;
    --excerpt-fs: 13px;
    --excerpt-lh: 1.5;
}
@media (min-width: 768px){
    .dz-section--cat-grid{  /* Portrait-Tablet · 768 */
        --sec-pt: 66px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 24px;
        --head-lh: 1.15;
        --head-ls: 0;
        --head-mb: 24px;
        --head-gap: 10px;
        --head-icon: 16px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 2;
        --grid-gap-x: 24px;
        --grid-gap-y: 32px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 14px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 1 / 1;
        --media-radius: 20px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 8px;
        --body-radius: 0;
        --chip-fs: 11px;
        --chip-pad: 3px 9px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 16px;
        --title-lh: 1.1;
        --title-ls: 0;
        --title-lines: 3;
        --credit-fs: 13px;
        --credit-lh: 1.3;
        --excerpt-fs: 14px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 769px){
    .dz-section--cat-grid{  /* Landscape-Tablet · 1024 */
        --sec-pt: 96px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 28px;
        --head-lh: 1.15;
        --head-ls: 0;
        --head-mb: 28px;
        --head-gap: 10px;
        --head-icon: 18px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 4;
        --grid-gap-x: 24px;
        --grid-gap-y: 32px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 14px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 1 / 1;
        --media-radius: 20px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 8px;
        --body-radius: 0;
        --chip-fs: 12px;
        --chip-pad: 3px 10px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 15px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 3;
        --credit-fs: 14px;
        --credit-lh: 1.3;
        --excerpt-fs: 15px;
        --excerpt-lh: 1.5;
    }
}
@media (min-width: 1025px){
    .dz-section--cat-grid{  /* Desktop · 1512 */
        --sec-pt: 96px;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 32px;
        --head-lh: 1.15;
        --head-ls: 0;
        --head-mb: 32px;
        --head-gap: 12px;
        --head-icon: 20px;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --grid-cols: 4;
        --grid-gap-x: 32px;
        --grid-gap-y: 40px;
        --grid-orphan: auto;
        --card-dir: column;
        --card-align: stretch;
        --card-gap: 16px;
        --card-pad: 0;
        --card-bw: 0;
        --card-radius: 0;
        --media-ratio: 1 / 1;
        --media-radius: 30px;
        --media-w: auto;
        --media-bleed: 0px;
        --body-pad: 0;
        --body-gap: 10px;
        --body-radius: 0;
        --chip-fs: 13px;
        --chip-pad: 4px 12px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 22px;
        --title-lh: 1;
        --title-ls: .01em;
        --title-lines: 3;
        --credit-fs: 16px;
        --credit-lh: 1.3;
        --excerpt-fs: 17px;
        --excerpt-lh: 1.5;
    }
}

/* ═════════════════════════════════════════════════════════════
   17 · LOAD MORE
   Shortcode: [dazzletic_category more="Load more"]  (nur, wenn noch Beiträge folgen)
   Button .dz-btn.dz-btn--outline.dz-load-more: weiß, grüner Rahmen, schwarzer Versatz-Schatten.
   --more-w = Breite (100% = volle Inhaltsbreite), --more-fs / --more-pad / --more-radius = Schrift / Innenabstand / Rundung.
   ═════════════════════════════════════════════════════════════ */
.dz-section--load-more{
    /* Farben · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;

    /* Mobile · 428 */
    --sec-pt: 50px;
    --sec-pb: 107px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --more-w: 100%;
    --more-fs: 14px;
    --more-pad: 10px 18px;
    --more-radius: 4px;
}
@media (min-width: 768px){
    .dz-section--load-more{  /* Portrait-Tablet · 768 */
        --sec-pt: 105px;
        --sec-pb: 105px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --more-w: 360px;
        --more-fs: 15px;
        --more-pad: 11px 22px;
        --more-radius: 4px;
    }
}
@media (min-width: 769px){
    .dz-section--load-more{  /* Landscape-Tablet · 1024 */
        --sec-pt: 140px;
        --sec-pb: 127px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --more-w: 360px;
        --more-fs: 16px;
        --more-pad: 12px 24px;
        --more-radius: 4px;
    }
}
@media (min-width: 1025px){
    .dz-section--load-more{  /* Desktop · 1512 */
        --sec-pt: 152px;
        --sec-pb: 125px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --more-w: 400px;
        --more-fs: 18px;
        --more-pad: 14px 28px;
        --more-radius: 4px;
    }
}


/* ═════════════════════════════════════════════════════════════
   18 · MIXTAPES · TITEL
   Shortcode: [dsp_spotify_all]  → „Mixtapes" als H1 (title="…" | none)
   Divi:      Section-Klasse  dz-section dz-section--mixtapes-head
   Zentrierter, heller Seitentitel (League Spartan Light, Größe = --fs-page-title) ohne Pfeil direkt unter dem Header.
   Abstand zum Header (00 · SEITE: 0px) = --sec-pt, Abstand zur ersten Karte = --sec-pb.
   Leere Liste: Hinweis unter dem Titel als .dz-lead (--lead-*).
   ═════════════════════════════════════════════════════════════ */
.dz-section--mixtapes-head{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --head-color: var(--c-black);
    --head-bg: transparent;
    --head-bc: transparent;
    --head-icon-color: var(--c-gray-3);
    --head-icon-display: none;
    --head-align: center;
    --head-mx: auto;
    --head-fw: var(--fw-light);
    --lead-color: var(--c-gray-1);
    --lead-align: center;

    /* Mobile · 428 */
    --sec-pt: 28.5px;
    --sec-pb: 22.2px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --head-fs: 32px;
    --head-lh: 1.15;
    --head-ls: .02em;
    --head-mb: 0;
    --head-gap: 0;
    --head-icon: 0;
    --head-pad: 0;
    --head-bw: 0;
    --head-radius: 0;
    --lead-fs: 15px;
    --lead-lh: 1.4;
    --lead-mb: 24px;
}
@media (min-width: 768px){
    .dz-section--mixtapes-head{  /* Portrait-Tablet · 768 */
        --sec-pt: 48.7px;
        --sec-pb: 40.2px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 36px;
        --head-lh: 1.15;
        --head-ls: .02em;
        --head-mb: 0;
        --head-gap: 0;
        --head-icon: 0;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --lead-fs: 16px;
        --lead-lh: 1.4;
        --lead-mb: 32px;
    }
}
@media (min-width: 769px){
    .dz-section--mixtapes-head{  /* Landscape-Tablet · 1024 */
        --sec-pt: 37.3px;
        --sec-pb: 64px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 40px;
        --head-lh: 1.15;
        --head-ls: .02em;
        --head-mb: 0;
        --head-gap: 0;
        --head-icon: 0;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --lead-fs: 17px;
        --lead-lh: 1.4;
        --lead-mb: 40px;
    }
}
@media (min-width: 1025px){
    .dz-section--mixtapes-head{  /* Desktop · 1512 */
        --sec-pt: 44px;
        --sec-pb: 64px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --head-fs: 52px;
        --head-lh: 1.15;
        --head-ls: .02em;
        --head-mb: 0;
        --head-gap: 0;
        --head-icon: 0;
        --head-pad: 0;
        --head-bw: 0;
        --head-radius: 0;
        --lead-fs: 18px;
        --lead-lh: 1.4;
        --lead-mb: 48px;
    }
}

/* ═════════════════════════════════════════════════════════════
   19 · MIXTAPES · LISTE
   Shortcode: [dsp_spotify_all]  (Karten; auch die per „Load more" nachgeladenen)
   Divi:      Section-Klasse  dz-section dz-section--mixtapes-list
   Karten untereinander: weiß, grauer Rahmen, Radius 30; links das Cover (Breite --media-w), rechts Label, Titel, Kurzbeschreibung.
   Mobile: Bild 37 % der Karte, Höhe folgt dem Text. Ab Portrait: Bild quadratisch (--media-ratio), Text mittig.
   --grid-gap-y = Abstand zwischen den Karten, --sec-max = Breite der Liste (ab Landscape schmaler als der Inhaltsbereich).
   --excerpt-lines = max. Zeilen der Kurzbeschreibung. Rules: dazzletic-spotify-playlist/dsp.css (.dsp-card*).
   --sec-end = Abstand bis zum Footer, falls kein Load-more-Button folgt (sonst trägt ihn die more-Section).
   ═════════════════════════════════════════════════════════════ */
.dz-section--mixtapes-list{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --card-dir: row;
    --card-align: stretch;
    --card-bg: var(--c-white);
    --card-bc: var(--c-gray-3);
    --card-overflow: hidden;
    --media-radius: 0;
    --chip-bg: var(--c-neutral-2);
    --chip-bc: var(--c-neutral-1);
    --chip-color: var(--c-black);
    --chip-fw: var(--fw-regular);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);
    --excerpt-ff: var(--font-body);
    --excerpt-fw: var(--fw-regular);
    --excerpt-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 0;
    --sec-pb: 0;
    --sec-end: 150px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --grid-gap-y: 40px;
    --card-pad: 0;
    --card-bw: 1px;
    --card-radius: 30px;
    --media-ratio: auto;
    --media-w: min(37.3%, 220px);
    --body-pad: 13px 18px 23.7px;
    --body-gap: 17px;
    --chip-mb: 3px;
    --chip-fs: 10px;
    --chip-pad: 2px 13px;
    --chip-bw: 1px;
    --chip-radius: 10px;
    --chip-ls: .03em;
    --title-fs: 16px;
    --title-lh: 1.2;
    --title-ls: 0;
    --title-lines: 2;
    --excerpt-fs: 13.3px;
    --excerpt-lh: 1.2;
    --excerpt-lines: 3;
}
@media (min-width: 768px){
    .dz-section--mixtapes-list{  /* Portrait-Tablet · 768 */
        --sec-pt: 0;
        --sec-pb: 0;
        --sec-end: 151px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --grid-gap-y: 67px;
        --card-pad: 0;
        --card-bw: 1px;
        --card-radius: 30px;
        --media-ratio: 220 / 218;
        --media-w: 220px;
        --body-pad: 0 20px 3px;
        --body-gap: 15px;
        --chip-mb: 1px;
        --chip-fs: 12px;
        --chip-pad: 3px 14px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 19px;
        --title-lh: 1.2;
        --title-ls: 0;
        --title-lines: 2;
        --excerpt-fs: 16.6px;
        --excerpt-lh: 1.1;
        --excerpt-lines: 3;
    }
}
@media (min-width: 769px){
    .dz-section--mixtapes-list{  /* Landscape-Tablet · 1024 */
        --sec-pt: 0;
        --sec-pb: 0;
        --sec-end: 168px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 910px;
        --grid-gap-y: 67px;
        --card-pad: 0;
        --card-bw: 1px;
        --card-radius: 30px;
        --media-ratio: 220 / 218;
        --media-w: 220px;
        --body-pad: 8px 20px 0;
        --body-gap: 8px;
        --chip-mb: 5px;
        --chip-fs: 12px;
        --chip-pad: 3px 14px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 22px;
        --title-lh: 1.2;
        --title-ls: 0;
        --title-lines: 2;
        --excerpt-fs: 20.8px;
        --excerpt-lh: 1.16;
        --excerpt-lines: 3;
    }
}
@media (min-width: 1025px){
    .dz-section--mixtapes-list{  /* Desktop · 1512 */
        --sec-pt: 0;
        --sec-pb: 0;
        --sec-end: 168px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 910px;
        --grid-gap-y: 67px;
        --card-pad: 0;
        --card-bw: 1px;
        --card-radius: 30px;
        --media-ratio: 220 / 218;
        --media-w: 220px;
        --body-pad: 8px 20px 0;
        --body-gap: 8px;
        --chip-mb: 5px;
        --chip-fs: 12px;
        --chip-pad: 3px 14px;
        --chip-bw: 1px;
        --chip-radius: 10px;
        --chip-ls: .03em;
        --title-fs: 22px;
        --title-lh: 1.2;
        --title-ls: 0;
        --title-lines: 2;
        --excerpt-fs: 20.8px;
        --excerpt-lh: 1.16;
        --excerpt-lines: 3;
    }
}

/* ═════════════════════════════════════════════════════════════
   20 · MIXTAPES · LOAD MORE
   Shortcode: [dsp_spotify_all more="Load more"]  (nur, wenn noch Playlists folgen)
   Divi:      Section-Klasse  dz-section dz-section--mixtapes-more
   Button .dz-btn.dz-btn--outline.dsp-load-more: weiß, grüner Rahmen 4px, eckig, schwarzer Versatz-Schatten (--btn-offset).
   --sec-pt = Abstand zur letzten Karte, --sec-pb = Abstand zum Footer.
   --more-w = Breite, --more-fs / --more-pad / --more-radius = Schrift / Innenabstand / Rundung.
   ═════════════════════════════════════════════════════════════ */
.dz-section--mixtapes-more{
    /* Farben · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;

    /* Mobile · 428 */
    --sec-pt: 137px;
    --sec-pb: 150px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --btn-offset: 6px;
    --more-w: min(378px, 100%);
    --more-fs: 22px;
    --more-pad: 8.5px 18px;
    --more-radius: 0;
}
@media (min-width: 768px){
    .dz-section--mixtapes-more{  /* Portrait-Tablet · 768 */
        --sec-pt: 137px;
        --sec-pb: 151px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --btn-offset: 7px;
        --more-w: 322px;
        --more-fs: 30px;
        --more-pad: 13px 18px;
        --more-radius: 0;
    }
}
@media (min-width: 769px){
    .dz-section--mixtapes-more{  /* Landscape-Tablet · 1024 */
        --sec-pt: 154px;
        --sec-pb: 168px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --btn-offset: 7px;
        --more-w: 352px;
        --more-fs: 32px;
        --more-pad: 12px 18px;
        --more-radius: 0;
    }
}
@media (min-width: 1025px){
    .dz-section--mixtapes-more{  /* Desktop · 1512 */
        --sec-pt: 154px;
        --sec-pb: 168px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --btn-offset: 7px;
        --more-w: 352px;
        --more-fs: 32px;
        --more-pad: 12px 18px;
        --more-radius: 0;
    }
}

/* ═════════════════════════════════════════════════════════════
   21 · MIXTAPE · HERO
   Mixtape-Beitrag (Einzelseite spotify_playlist; Figma „Dazzletic Mixtapes", Frames „… Mixtapes Beitrag"):
   schwarzes Band aus Beitragsbild und Textspalte („Mixtapes Hero").
   Markup:    templates/single.tpl.php ([dsp_spotify_single id="…"]) → section.dz-section--mixtape-hero
              > .dsp-hero__band > .dsp-hero__media + .dsp-hero__text.dz-section--mixtape-title
   Divi:      Section-Klasse  dz-section dz-section--mixtape-hero
   Mobile: Bild randlos (428 : 231) über dem schwarzen Textblock. Ab Portrait: Bild links, Text rechts im Band;
   ab Landscape ist das Band eingerückt (Rundung 20), auf dem Desktop mit leichtem Schatten.
   --sec-pt = Abstand zum Header (00 · SEITE: 0px), --sec-pb = Abstand bis zur Lesespalte.
   Zwischen den Breakpoints skaliert das Band fließend, damit Bild und Textspalte sich die Breite teilen (statt fester Breiten):
     769 – 1024   Landscape-Werte proportional zur Bandbreite (100vw − 41 px)  → bei 1024 genau der Figma-Wert
     1025 – 1512  lineare Interpolation Landscape (1024) → Desktop (1512)  → bei 1512 genau der Figma-Wert, darüber unverändert
   Skaliert werden: Bandrand (--sec-px), Innenabstand (--hero-pad), Abstand Bild→Text, Bild- und Textspaltenbreite, Abstände oben/unten
   (clamp(min, calc(Q vw + P px), max); die Anker sind die Werte der Figma-Frames, Mobile und Portrait bleiben fest).
   Regeln: dazzletic-spotify-playlist/assets/css/dsp.css (.dsp-hero*).
   ═════════════════════════════════════════════════════════════ */
.dz-section--mixtape-hero{
    --sec-bg: transparent;
    --sec-bc: transparent;
    --hero-bg: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 0;
    --sec-pb: 32.8px;
    --sec-px: 0;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --hero-dir: column;
    --hero-align: stretch;
    --hero-pad: 0;
    --hero-gap: 0;
    --hero-radius: 0;
    --hero-shadow: none;
    --media-w: 100%;
    --media-ratio: 428 / 231;
    --media-radius: 0;
    --hero-text-w: auto;
}
@media (min-width: 768px){
    .dz-section--mixtape-hero{  /* Portrait-Tablet · 768 */
        --sec-pt: 0;
        --sec-pb: 44.4px;
        --sec-px: 0;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --hero-dir: row;
        --hero-align: flex-start;
        --hero-pad: 87px 22px 101px 22px;
        --hero-gap: 30px;
        --hero-radius: 0;
        --hero-shadow: none;
        --media-w: 350px;
        --media-ratio: 1 / 1;
        --media-radius: var(--r-md);
        --hero-text-w: 344px;
    }
}
@media (min-width: 769px){
    .dz-section--mixtape-hero{  /* Landscape-Tablet · 1024 */
        --sec-pt: 59px;
        --sec-pb: 40px;
        --sec-px: 20.5px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --hero-dir: row;
        --hero-align: flex-start;
        --hero-pad: clamp(93.314px, calc(12.818vw - 5.255px), 126px) clamp(17.774px, calc(2.442vw - 1.001px), 24px) clamp(93.314px, calc(12.818vw - 5.255px), 126px) clamp(25.55px, calc(3.51vw - 1.439px), 34.5px);
        --hero-gap: clamp(42.214px, calc(5.799vw - 2.377px), 57px);
        --hero-radius: var(--r-sm);
        --hero-shadow: none;
        --media-w: clamp(296.236px, calc(40.692vw - 16.684px), 400px);
        --media-ratio: 1 / 1;
        --media-radius: var(--r-md);
        --hero-text-w: clamp(311.048px, calc(42.726vw - 17.518px), 420px);
    }
}
@media (min-width: 1025px){
    .dz-section--mixtape-hero{  /* Desktop · 1512 */
        --sec-pt: clamp(59px, calc(1.23vw + 46.41px), 65px);
        --sec-pb: clamp(40px, calc(7.234vw - 34.072px), 75.3px);
        --sec-px: clamp(20.5px, calc(5.635vw - 37.205px), 48px);
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --hero-dir: row;
        --hero-align: flex-start;
        --hero-pad: clamp(75px, calc(-10.451vw + 233.016px), 126px) clamp(24px, calc(4.918vw - 26.361px), 48px) clamp(67px, calc(-12.09vw + 249.803px), 126px) clamp(34.5px, calc(5.943vw - 26.352px), 63.5px);
        --hero-gap: clamp(57px, calc(12.193vw - 67.852px), 116.5px);
        --hero-radius: var(--r-sm);
        --hero-shadow: 0 2px 4px rgba(0, 0, 0, .25);
        --media-w: clamp(400px, calc(20.492vw + 190.164px), 500px);
        --media-ratio: 1 / 1;
        --media-radius: var(--r-md);
        --hero-text-w: clamp(420px, calc(45.082vw - 41.639px), 640px);
    }
}

/* ═════════════════════════════════════════════════════════════
   22 · MIXTAPE · TITEL
   Textspalte im Hero-Band: Titel (H1, Lexend SemiBold), Kurzbeschreibung (Lexend), Credits (League Spartan Light
   mit lila Strichlinie). Gehört an das Element .dsp-hero__text INNERHALB des Presets mixtape-hero (kein eigener Block:
   Bild und Text bilden in Figma ein Band) – es setzt nur Variablen, keine Section-Abstände.
   Wie das Band skalieren auch Innenabstand und Schriftgrößen zwischen den Frames fließend: 769 – 1024 von Portrait (768) nach
   Landscape (1024), 1025 – 1512 von Landscape nach Desktop (1512) – an den Frames selbst gelten genau die Figma-Werte.
   --text-pad = Innenabstand der Spalte; Abstand Titel→Beschreibung = --text-gap-1, Beschreibung→Credits = --text-gap-2.
   Desktop: Zeilenhöhe der Kurzbeschreibung 50 px und Credits linksbündig mit Strich 12 / Lücke 4 – so im Frame gemessen.
   ═════════════════════════════════════════════════════════════ */
.dz-section--mixtape-title{
    /* Farben & Schrift · alle Breakpoints */
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-white);
    --excerpt-fw: var(--fw-regular);
    --excerpt-color: var(--c-white);
    --credit-color: var(--c-white);
    --credit-line-color: var(--c-purple-credit);
    --credit-line-w: 2px;

    /* Mobile · 428 */
    --text-pad: 13px 16px 38px;
    --title-fs: 24px;
    --title-lh: 28px;
    --title-ls: 0;
    --excerpt-fs: 19px;
    --excerpt-lh: 23px;
    --text-gap-1: 23.4px;
    --text-gap-2: 45px;
    --credit-fs: var(--fs-credit-article);
    --credit-lh: 1.2;
    --credit-align: center;
    --credit-line-gap: 8px;
    --credit-dash: 4px;
    --credit-dash-gap: 4px;
}
@media (min-width: 768px){
    .dz-section--mixtape-title{  /* Portrait-Tablet · 768 */
        --text-pad: 46.8px 0 0;
        --title-fs: 30px;
        --title-lh: 34px;
        --title-ls: 0;
        --excerpt-fs: 21px;
        --excerpt-lh: 25px;
        --text-gap-1: 42.9px;
        --text-gap-2: 84px;
        --credit-fs: var(--fs-credit-article);
        --credit-lh: 1.2;
        --credit-align: center;
        --credit-line-gap: 13px;
        --credit-dash: 4px;
        --credit-dash-gap: 4px;
    }
}
@media (min-width: 769px){
    .dz-section--mixtape-title{  /* Landscape-Tablet · 1024 */
        --text-pad: clamp(34.067px, calc(4.68vw - 1.919px), 46px) 0 0;
        --title-fs: clamp(30px, calc(2.344vw + 12px), 36px);
        --title-lh: clamp(34px, calc(2.734vw + 13px), 41px);
        --title-ls: 0;
        --excerpt-fs: clamp(21px, calc(1.953vw + 6px), 26px);
        --excerpt-lh: clamp(25px, calc(2.344vw + 7px), 31px);
        --text-gap-1: 43px;
        --text-gap-2: clamp(77px, calc(-2.734vw + 105px), 84px);
        --credit-fs: clamp(14px, calc(0.391vw + 11px), 15px);
        --credit-lh: 1.2;
        --credit-align: start;
        --credit-line-gap: clamp(8px, calc(-1.953vw + 28px), 13px);
        --credit-dash: 4px;
        --credit-dash-gap: 4px;
        --credit-ml: 8px;
        --credit-px: 9px;
    }
}
@media (min-width: 1025px){
    .dz-section--mixtape-title{  /* Desktop · 1512 */
        --text-pad: clamp(46px, calc(3.689vw + 8.23px), 64px) 0 0;
        --title-fs: clamp(36px, calc(0.82vw + 27.607px), 40px);
        --title-lh: clamp(41px, calc(0.615vw + 34.705px), 44px);
        --title-ls: 0;
        --excerpt-fs: clamp(26px, calc(0.41vw + 21.803px), 28px);
        --excerpt-lh: clamp(31px, calc(3.893vw - 8.869px), 50px);
        --text-gap-1: clamp(26.5px, calc(-3.381vw + 77.623px), 43px);
        --text-gap-2: 77px;
        --credit-fs: clamp(15px, calc(1.025vw + 4.508px), 20px);
        --credit-lh: 1.2;
        --credit-align: start;
        --credit-line-gap: clamp(8px, calc(0.41vw + 3.803px), 10px);
        --credit-dash: clamp(4px, calc(1.639vw - 12.787px), 12px);
        --credit-dash-gap: 4px;
        --credit-ml: clamp(2px, calc(-1.23vw + 20.59px), 8px);
        --credit-px: clamp(0px, calc(-1.844vw + 27.885px), 9px);
    }
}

/* ═════════════════════════════════════════════════════════════
   23 · MIXTAPE · BODY
   Lesespalte: Absätze (Token --fs-body, Laufweite .01em, Zeilenhöhe 33 px) und Zwischentitel (h2, fett + leicht, unterstrichen).
   Markup:    section.dz-section--mixtape-body > .dsp-body__text (Beitragsinhalt, the_content)
   Divi:      Section-Klasse dz-section dz-section--mixtape-body; Text-Modul mit Klasse dsp-body__text
   Mehrere Body-Sections möglich (vor/nach Playlist und Video); die Abstände zu diesen Blöcken tragen Hero (--sec-pb),
   Playlist und Video (--sec-pt / --sec-pb) – der Body selbst hat 0.
   --sec-max = Breite der Lesespalte (396 / 720 / 640 / 824). Absatz 2 (zweiter Absatz der Einleitung): in Figma bei Portrait mit schmalerer Textbox (--p2-w 640) und bei Landscape in 22 px (--p2-fs). Ein Zwischentitel nach dem Einleitungsabsatz (erster Absatz der
   Section) nutzt --sub-mt-intro, sonst --sub-mt.
   ═════════════════════════════════════════════════════════════ */
.dz-section--mixtape-body{
    --sec-bg: transparent;
    --sec-bc: transparent;

    /* Mobile · 428 */
    --sec-pt: 0;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 396px;
    --txt-fs: var(--fs-body);
    --txt-lh: 33px;
    --txt-ls: .01em;
    --txt-gap: 33px;
    --sub-fs: 21px;
    --sub-lh: 33px;
    --sub-mt: 25.5px;
    --sub-mb: 18.5px;
    --sub-ul-offset: 2px;
    --sub-mt-intro: 34.5px;
    --p2-w: none;
    --p2-fs: var(--fs-body);
}
@media (min-width: 768px){
    .dz-section--mixtape-body{  /* Portrait-Tablet · 768 */
        --sec-pt: 0;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 720px;
        --txt-lh: 33px;
        --txt-gap: 33px;
        --sub-fs: 22px;
        --sub-lh: 33px;
        --sub-mt: 23.5px;
        --sub-mb: 21.7px;
        --sub-ul-offset: 1.5px;
        --sub-mt-intro: 27.5px;
        --p2-w: 640px;
        --p2-fs: var(--fs-body);
    }
}
@media (min-width: 769px){
    .dz-section--mixtape-body{  /* Landscape-Tablet · 1024 */
        --sec-pt: 0;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 640px;
        --txt-lh: 33px;
        --txt-gap: 33px;
        --sub-fs: 24px;
        --sub-lh: 33px;
        --sub-mt: 57px;
        --sub-mb: 19.5px;
        --sub-ul-offset: 3px;
        --sub-mt-intro: 54px;
        --p2-w: none;
        --p2-fs: 22px;
    }
}
@media (min-width: 1025px){
    .dz-section--mixtape-body{  /* Desktop · 1512 */
        --sec-pt: 0;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 824px;
        --txt-lh: 33px;
        --txt-gap: 33px;
        --sub-fs: 26px;
        --sub-lh: 33px;
        --sub-mt: 60px;
        --sub-mb: 30px;
        --sub-ul-offset: 3px;
        --sub-mt-intro: 50px;
        --p2-w: none;
        --p2-fs: var(--fs-body);
    }
}

/* ═════════════════════════════════════════════════════════════
   24 · MIXTAPE · PLAYLIST
   Spotify-Player (oEmbed aus dem Feld „Spotify Playlist URL"): Breite = --sec-max, Höhe folgt --embed-ratio (1,92 : 1),
   Rundung --embed-radius.
   Markup:    section.dz-section--mixtape-playlist > .dsp-embed > iframe
   Divi:      Section-Klasse dz-section dz-section--mixtape-playlist; Code-Modul mit Klasse dsp-embed
   --sec-pt = Abstand zum Text davor, --sec-pb = Abstand zum Text danach.
   ═════════════════════════════════════════════════════════════ */
.dz-section--mixtape-playlist{
    --sec-bg: transparent;
    --sec-bc: transparent;
    --embed-ratio: 1.92 / 1;

    /* Mobile · 428 */
    --sec-pt: 38.7px;
    --sec-pb: 34.1px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 396px;
    --embed-radius: 6px;
}
@media (min-width: 768px){
    .dz-section--mixtape-playlist{  /* Portrait-Tablet · 768 */
        --sec-pt: 23.7px;
        --sec-pb: 32.6px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 720px;
        --embed-radius: 12px;
    }
}
@media (min-width: 769px){
    .dz-section--mixtape-playlist{  /* Landscape-Tablet · 1024 */
        --sec-pt: 48.5px;
        --sec-pb: 63.6px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 976px;
        --embed-radius: 16px;
    }
}
@media (min-width: 1025px){
    .dz-section--mixtape-playlist{  /* Desktop · 1512 */
        --sec-pt: 48.7px;
        --sec-pb: 57.2px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 950px;
        --embed-radius: 15px;
    }
}

/* ═════════════════════════════════════════════════════════════
   25 · MIXTAPE · VIDEO
   Video (YouTube o. Ä.): Breite = --sec-max, Seitenverhältnis 16 : 9, eckig. Ein Feld für die Video-Quelle gibt es im
   Plugin noch nicht (meta-fields.php); das Template gibt den Block nur aus, wenn der Filter dsp_single_video HTML liefert.
   --embed-bleed = Überstand des Videos nach rechts (Mobile 2 px: Figma-Video 16–414 statt 16–412).
   Markup:    section.dz-section--mixtape-video > .dsp-embed > iframe
   Divi:      Section-Klasse dz-section dz-section--mixtape-video; Code-Modul mit Klasse dsp-embed
   --sec-pt = Abstand zum Text davor, --sec-pb = Abstand zum Text danach.
   ═════════════════════════════════════════════════════════════ */
.dz-section--mixtape-video{
    --sec-bg: transparent;
    --sec-bc: transparent;
    --embed-ratio: 16 / 9;

    /* Mobile · 428 */
    --sec-pt: 33.4px;
    --sec-pb: 35.8px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 396px;
    --embed-radius: 0;
    --embed-bleed: 2px;
}
@media (min-width: 768px){
    .dz-section--mixtape-video{  /* Portrait-Tablet · 768 */
        --sec-pt: 33.1px;
        --sec-pb: 37.2px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 720px;
        --embed-radius: 0;
        --embed-bleed: 0px;
    }
}
@media (min-width: 769px){
    .dz-section--mixtape-video{  /* Landscape-Tablet · 1024 */
        --sec-pt: 50.4px;
        --sec-pb: 66.9px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 976px;
        --embed-radius: 0;
    }
}
@media (min-width: 1025px){
    .dz-section--mixtape-video{  /* Desktop · 1512 */
        --sec-pt: 67.8px;
        --sec-pb: 72.4px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 939px;
        --embed-radius: 0;
    }
}

/* ═════════════════════════════════════════════════════════════
   26 · MIXTAPE · MORE
   „WEITERE MIXTAPES" unter dem Beitrag (Figma „Dazzletic Mixtapes", Frames „… Mixtapes Beitrag"): zentrierter, unterstrichener Link
   (League Spartan SemiBold, Versalien) vor dem grünen Mixtapes-Band. Kein Button-Kasten – in Figma gibt es nur den Text.
   Markup:    section.dz-section--mixtape-more > a.dz-more
   Divi:      Section-Klasse dz-section dz-section--mixtape-more; Button-Modul mit Klasse dz-more (Builder-Design des Buttons leer lassen)
   --sec-pt = Abstand zum letzten Absatz, --more-fs / -lh / -ls = Schrift. Der Abstand bis zum direkt folgenden Band steht in der
   Regel „.dz-section--mixtape-more + .dz-section" (setzt dessen --sec-margin; Custom Properties erben nicht an Geschwister);
   ohne folgendes Band gilt --sec-end bis zum Footer.
   ═════════════════════════════════════════════════════════════ */
.dz-section--mixtape-more{
    --sec-bg: transparent;
    --sec-bc: transparent;

    /* Mobile · 428 */
    --sec-pt: 88px;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --sec-end: 24.5px;
    --more-fs: 26px;
    --more-lh: 1;
    --more-ls: 0;
    --more-ul-offset: 2px;
}
.dz-section--mixtape-more + .dz-section[class*="dz-section--"]{ --sec-margin: 24.5px 0 0; }
@media (min-width: 768px){
    .dz-section--mixtape-more{  /* Portrait-Tablet · 768 */
        --sec-pt: 126px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --sec-end: 57px;
        --more-fs: 28px;
        --more-lh: 1;
        --more-ls: 0;
        --more-ul-offset: 2px;
    }
    .dz-section--mixtape-more + .dz-section[class*="dz-section--"]{ --sec-margin: 57px 0 0; }
}
@media (min-width: 769px){
    .dz-section--mixtape-more{  /* Landscape-Tablet · 1024 */
        --sec-pt: 153.5px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --sec-end: 42px;
        --more-fs: 32px;
        --more-lh: 1;
        --more-ls: 0;
        --more-ul-offset: 2px;
    }
    .dz-section--mixtape-more + .dz-section[class*="dz-section--"]{ --sec-margin: 42px 0 0; }
}
@media (min-width: 1025px){
    .dz-section--mixtape-more{  /* Desktop · 1512 */
        --sec-pt: 211.5px;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --sec-end: 58px;
        --more-fs: 32px;
        --more-lh: 1;
        --more-ls: 0;
        --more-ul-offset: 2px;
    }
    .dz-section--mixtape-more + .dz-section[class*="dz-section--"]{ --sec-margin: 58px 0 0; }
}

/* ═════════════════════════════════════════════════════════════
   27 · BEITRAG · TITEL
   Beitrags-Detailseite (Divi Theme Builder → Body, Beitrag): Titel (H1, Lexend SemiBold, zentriert) und Byline
   („Text … • Fotos … • Datum", League Spartan Light mit lila Strichlinie).
   Divi:      Section-Klasse dz-section dz-section--post-title; Post-Title-Modul mit Klasse dsp-body__title,
              Text-Modul der Byline mit Klasse dsp-body__title_info (je eigene Row oder beide in einer Spalte)
   --sec-pt = Abstand Header → Titel, --sec-pb = Abstand Byline → Beitragsbild, --text-gap-2 = Titel → Byline.
   --title-fs folgt dem Token --fs-h1-hero (44 / 34 / 32), --title-w = max. Breite des Titels (Zeilenumbruch).
   Mobile: in Figma kein Beitrags-Frame (der mitgelieferte Mobile-Screenshot ist die Rezeptseite) – abgeleitet aus Portrait.
   Regeln: 09-divi.css (BEITRAG).
   ═════════════════════════════════════════════════════════════ */
.dz-section--post-title{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);
    --credit-color: var(--c-black);
    --credit-line-color: var(--c-purple-credit);
    --credit-line-w: 2px;
    --credit-dash: 4px;
    --credit-dash-gap: 4px;

    /* Mobile · 428 */
    --sec-pt: 16px;
    --sec-pb: 24px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --title-fs: 24px;
    --title-lh: 28px;
    --title-ls: 0;
    --title-w: 396px;
    --text-gap-2: 20px;
    --credit-fs: 13px;
    --credit-lh: 1.2;
    --credit-line-gap: 11px;
}
@media (min-width: 768px){
    .dz-section--post-title{  /* Portrait-Tablet · 768 */
        --sec-pt: 15.8px;
        --sec-pb: 22px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --title-fs: var(--fs-h1-hero);
        --title-lh: 34px;
        --title-ls: 0;
        --title-w: 720px;
        --text-gap-2: 27.2px;
        --credit-fs: 13px;
        --credit-lh: 1.2;
        --credit-line-gap: 14.5px;
    }
}
@media (min-width: 769px){
    .dz-section--post-title{  /* Landscape-Tablet · 1024 */
        --sec-pt: 56.4px;
        --sec-pb: 32.8px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --title-fs: var(--fs-h1-hero);
        --title-lh: 37px;
        --title-ls: 0;
        --title-w: 680px;
        --text-gap-2: 31.4px;
        --credit-fs: 14px;
        --credit-lh: 1.2;
        --credit-line-gap: 15px;
    }
}
@media (min-width: 1025px){
    .dz-section--post-title{  /* Desktop · 1512 */
        --sec-pt: 57.5px;
        --sec-pb: 49.6px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --title-fs: var(--fs-h1-hero);
        --title-lh: 44px;
        --title-ls: 0;
        --title-w: 944px;
        --text-gap-2: 40.6px;
        --credit-fs: var(--fs-credit-article);
        --credit-lh: 1.2;
        --credit-line-gap: 8px;
    }
}

/* ═════════════════════════════════════════════════════════════
   28 · BEITRAG · HERO
   Beitragsbild unter dem Titel, volle Containerbreite (1416 / 976 / 720 / 396), eckig, mit Bildnachweis darunter.
   Divi:      Section-Klasse dz-section dz-section--post-hero; Bild-Modul (Klasse am Modul optional) und darunter
              ein Text-Modul mit Klasse dsp-body__image_copyright
   --media-ratio = Seitenverhältnis des Zuschnitts (das Bild wird beschnitten), --cap-gap = Abstand Bild → Bildnachweis (Schrift: --cap-fs / --cap-color in 29).
   --sec-pt / --sec-pb = Abstand zum Titelblock (der trägt ihn selbst: 0) bzw. zum Text (Preset post-body).
   ═════════════════════════════════════════════════════════════ */
.dz-section--post-hero{
    --sec-bg: transparent;
    --sec-bc: transparent;
    --media-radius: 0;

    /* Mobile · 428 */
    --sec-pt: 0;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --media-ratio: 396 / 274;
    --cap-gap: 6px;
}
@media (min-width: 768px){
    .dz-section--post-hero{  /* Portrait-Tablet · 768 */
        --sec-pt: 0;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --media-ratio: 720 / 499;
        --cap-gap: 9px;
    }
}
@media (min-width: 769px){
    .dz-section--post-hero{  /* Landscape-Tablet · 1024 */
        --sec-pt: 0;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --media-ratio: 976 / 537;
        --cap-gap: 9.4px;
    }
}
@media (min-width: 1025px){
    .dz-section--post-hero{  /* Desktop · 1512 */
        --sec-pt: 0;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --media-ratio: 1416 / 633;
        --cap-gap: 2.5px;
    }
}

/* ═════════════════════════════════════════════════════════════
   29 · BEITRAG · BODY
   Lesespalte und Bilder des Beitrags. Eine Section, darin Rows in der Reihenfolge des Beitrags:
     Text-Modul(e)       Absatz = Lexend (Token --fs-body, Laufweite .01em, Zeilenhöhe 33 px), Breite --txt-w (824 / 640 / 720 / 396);
                         H2 = Zitat (Lexend SemiBold, zentriert, bis --quote-w), H3 bzw. Klasse dsp-body__subtitle = Zwischentitel
                         (Lexend SemiBold, Versalien, linksbündig in der Lesespalte); Links im Text unterstrichen
     Bild allein in der Row   randlos über die ganze Seitenbreite (--full-ratio)
     Zwei Spalten, Bild-Module mit Klassen dsp-body__image dsp-body__image_portrait + dsp-body__image_landscape
                         versetztes Bildpaar (Hochformat links, Querformat rechts, vertikal zur Mitte verschoben um --img-b-dy);
                         Reihe ≥ 768 px nebeneinander (Breite --pair-w, Bilder --img-a-w / --img-b-w)
     Zwei Spalten, Bild-Module nur mit Klasse dsp-body__image
                         gleich große Bilder (--eq-ratio): Desktop nebeneinander (Lücke --eq-gap), bis 1024 px untereinander (Breite --eq-w)
     Text-Modul mit Klasse dsp-body__image_copyright   Bildnachweis unter dem Bild (League Spartan, Versalien, grau)
   Abstände: --sec-pt = Bildnachweis des Hero → erster Absatz; --pair-mt/-mb (versetztes Paar), --eq-mt/-mb (gleich große Bilder), --full-mt/-mb
   (randloses Bild) = Abstand der Bildreihen zu Text davor/danach;
   --quote-mt/-mb, --sub-mt/-mb = Zitat bzw. Zwischentitel. Absatz → Absatz: --txt-gap.
   Mobile: in Figma kein Beitrags-Frame – abgeleitet aus Portrait (Bildpaar bleibt nebeneinander, gleich große Bilder untereinander).
   Regeln: 09-divi.css (BEITRAG).
   ═════════════════════════════════════════════════════════════ */
.dz-section--post-body{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --txt-fs: var(--fs-body);
    --txt-ls: .01em;
    --quote-fw: var(--fw-semibold);
    --sub-fw: var(--fw-semibold);
    --cap-fs: var(--fs-credit-image);
    --cap-color: var(--c-gray-1);
    --img-radius: 0;

    /* Mobile · 428 */
    --sec-pt: 32px;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --txt-w: 396px;
    --txt-lh: 33px;
    --txt-gap: 35px;
    --quote-fs: 24px;
    --quote-lh: 30px;
    --quote-w: 396px;
    --quote-mt: 32px;
    --quote-mb: 28px;
    --sub-fs: 21px;
    --sub-lh: 28px;
    --sub-mt: 32px;
    --sub-mb: 12px;
    --cap-gap: 3px;
    --pair-w: 100%;
    --img-a-w: 42.4%;
    --img-a-ratio: 3 / 4;
    --img-b-w: 52.2%;
    --img-b-ratio: 2.17 / 1;
    --img-b-dy: -4px;
    --pair-mt: 24px;
    --pair-mb: 14px;
    --eq-mt: 24px;
    --eq-mb: 28px;
    --eq-w: 100%;
    --eq-ratio: 720 / 444;
    --eq-gap: 33px;
    --full-ratio: 428 / 285;
    --full-mt: 22px;
    --full-mb: 24px;
}
@media (min-width: 768px){
    .dz-section--post-body{  /* Portrait-Tablet · 768 */
        --sec-pt: 38.3px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --txt-w: 720px;
        --txt-lh: 33px;
        --txt-gap: 37.5px;
        --quote-fs: 28px;
        --quote-lh: 34px;
        --quote-w: 720px;
        --quote-mt: 36.8px;
        --quote-mb: 37.2px;
        --sub-fs: 24px;
        --sub-lh: 30px;
        --sub-mt: 36px;
        --sub-mb: 14px;
        --cap-gap: 3px;
        --pair-w: 100%;
        --img-a-w: 305px;
        --img-a-ratio: 3 / 4;
        --img-b-w: 376px;
        --img-b-ratio: 2.17 / 1;
        --img-b-dy: -7px;
        --pair-mt: 34.5px;
        --pair-mb: 15.5px;
    --eq-mt: 28px;
    --eq-mb: 31.7px;
        --eq-w: 100%;
        --eq-ratio: 720 / 444;
        --eq-gap: 42.7px;
        --full-ratio: 768 / 513;
        --full-mt: 29.2px;
        --full-mb: 28px;
    }
}
@media (min-width: 769px){
    .dz-section--post-body{  /* Landscape-Tablet · 1024 */
        --sec-pt: 48px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --txt-w: 640px;
        --txt-lh: 33px;
        --txt-gap: 36.5px;
        --quote-fs: 30px;
        --quote-lh: 37px;
        --quote-w: 780px;
        --quote-mt: 33.4px;
        --quote-mb: 26px;
        --sub-fs: 26px;
        --sub-lh: 32px;
        --sub-mt: 34px;
        --sub-mb: 14px;
        --cap-gap: 9.4px;
        --pair-w: 779px;
        --img-a-w: 306px;
        --img-a-ratio: 3 / 4;
        --img-b-w: 376px;
        --img-b-ratio: 2.17 / 1;
        --img-b-dy: -23px;
        --pair-mt: 32.7px;
        --pair-mb: 26px;
    --eq-mt: 26px;
    --eq-mb: 32.7px;
        --eq-w: 688px;
        --eq-ratio: 688 / 494;
        --eq-gap: 33px;
        --full-ratio: 1024 / 487;
        --full-mt: 23.3px;
        --full-mb: 26px;
    }
}
@media (min-width: 1025px){
    .dz-section--post-body{  /* Desktop · 1512 */
        --sec-pt: 56px;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --txt-w: 828px;
        --txt-lh: 33px;
        --txt-gap: 37px;
        --quote-fs: 36px;
        --quote-lh: 44px;
        --quote-w: 944px;
        --quote-mt: 55.6px;
        --quote-mb: 61.6px;
        --sub-fs: 28px;
        --sub-lh: 34px;
        --sub-mt: 56px;
        --sub-mb: 21.1px;
        --cap-gap: 5px;
        --pair-w: 1023px;
        --img-a-w: 410px;
        --img-a-ratio: 4 / 5;
        --img-b-w: 476px;
        --img-b-ratio: 16 / 9;
        --img-b-dy: -34px;
        --pair-mt: 59px;
        --pair-mb: 52px;
    --eq-mt: 52px;
    --eq-mb: 59px;
        --eq-w: 688px;
        --eq-ratio: 688 / 494;
        --eq-gap: 40px;
        --full-ratio: 1512 / 749;
        --full-mt: 62.6px;
        --full-mb: 40px;
    }
}

/* ═════════════════════════════════════════════════════════════
   30 · BEITRAG · WEITERE ARTIKEL
   Unterstrichene Überschrift („WEITERE ARTIKEL ZU TENNIS", League Spartan SemiBold, Versalien, zentriert) und darunter das
   grüne, randlose Band mit den Karten verwandter Beiträge (Bild, Label, Titel; Raster 4 Spalten, bis 1024 px Wisch-Slider).
   Markup:    Shortcode [dazzletic_related_posts] → .dazzletic-related-posts > h3.dazzletic-related-heading + .dazzletic-related-grid
              (jede Karte = Row des Library-Items)
   Divi:      Section-Klasse dz-section dz-section--post-related; Code-Modul mit dem Shortcode
   --sec-pt = Abstand zum letzten Absatz, --more-* = Überschrift, --band-pt / -pb = Innenabstand des grünen Bandes,
   --head-mb = Abstand Überschrift → Band, --grid-* = Raster bzw. Slider, --media-* / --chip-* / --title-* = Karte.
   ═════════════════════════════════════════════════════════════ */
.dz-section--post-related{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --sec-end: 0px;
    --band-bg: var(--c-green);
    --chip-bg: var(--c-neutral-2);
    --chip-bc: var(--c-neutral-1);
    --chip-color: var(--c-black);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: clamp(60px, calc(4.5vw + 40.74px), 75.3px);
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --more-fs: clamp(24px, calc(0.5882vw + 21.482px), 26px);
    --more-lh: 1;
    --more-ls: 0;
    --more-ul-offset: 2px;
    --head-mb: clamp(40px, calc(2.9412vw + 27.412px), 50px);
    --band-pt: clamp(60px, calc(7.5882vw + 27.522px), 85.8px);
    --band-pb: clamp(40px, calc(8.0882vw + 5.382px), 67.5px);
    --peek-k: 1;
    --peek-p: .4;
    --grid-gap-x: clamp(24px, calc(15.8824vw - 43.976px), 78px);
    --grid-cols: 1;
    --grid-gap-y: 32px;
    --media-ratio: 1 / 0.94;
    --media-radius: clamp(20px, calc(2.9412vw + 7.412px), 30px);
    --card-gap: clamp(9px, calc(-0.2941vw + 11.259px), 10px);
    --body-gap: clamp(9px, calc(0vw + 9px), 9px);
    --chip-fs: 9px;
    --chip-pad: 2px 14px;
    --chip-ls: .03em;
    --title-ls: .01em;
    --title-fs: clamp(16px, calc(0.5882vw + 13.482px), 18px);
    --title-lh: clamp(17.6px, calc(0.6471vw + 14.831px), 19.8px);
    --title-lines: 2;
}
@media (min-width: 768px){
    .dz-section--post-related{  /* Portrait-Tablet · 768 */
        --sec-pt: 75.3px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --more-fs: 26px;
        --more-lh: 1;
        --more-ls: 0;
        --more-ul-offset: 2px;
        --head-mb: 50px;
        --band-pt: 85.8px;
        --band-pb: 67.5px;
        --peek-k: 1;
        --peek-p: .5;
        --grid-gap-x: 78px;
        --grid-cols: 2;
        --grid-gap-y: 40px;
        --media-ratio: 443 / 415;
        --media-radius: 30px;
        --card-gap: 9px;
        --body-gap: 9px;
        --chip-fs: 9px;
        --chip-pad: 2px 14px;
        --title-fs: 18px;
        --title-lh: 1.1;
    }
}
@media (min-width: 769px){
    .dz-section--post-related{  /* Landscape-Tablet · 1024 */
        --sec-pt: 94px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --more-fs: 28px;
        --more-lh: 1;
        --more-ls: 0;
        --more-ul-offset: 2px;
        --head-mb: 40px;
        --band-pt: 68.9px;
        --band-pb: 48.5px;
        --peek-k: 3;
        --peek-p: .67;
        --grid-gap-x: 51px;
        --grid-cols: 3;
        --grid-gap-y: 48px;
        --media-ratio: 231 / 241;
        --media-radius: 24px;
        --card-gap: 10px;
        --body-gap: 10.5px;
        --chip-fs: 9px;
        --chip-pad: 2px 14px;
        --title-fs: 16px;
        --title-lh: 1.1;
    }
}
@media (min-width: 1025px){
    .dz-section--post-related{  /* Desktop · 1512 */
        --sec-pt: clamp(94px, calc(4.3033vw + 49.934px), 115px);
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --more-fs: clamp(28px, calc(0.8197vw + 19.607px), 32px);
        --more-lh: 1;
        --more-ls: 0;
        --more-ul-offset: 2px;
        --head-mb: clamp(40px, calc(14.0574vw - 103.948px), 108.6px);
        --band-pt: clamp(68.9px, calc(9.3443vw - 26.785px), 114.5px);
        --band-pb: clamp(48.5px, calc(18.2377vw - 138.254px), 137.5px);
        --peek-k: 4;
        --peek-p: .5;
        --grid-gap-x: 32px;
        --grid-cols: 4;
        --grid-gap-y: 56px;
        --media-ratio: 330 / 340;
        --media-radius: clamp(24px, calc(1.2295vw + 11.41px), 30px);
        --card-gap: clamp(10px, calc(0.2049vw + 7.902px), 11px);
        --body-gap: clamp(10.5px, calc(0.4098vw + 6.303px), 12.5px);
        --chip-fs: 9px;
        --chip-pad: 2px 14px;
        --title-fs: clamp(16px, calc(1.2295vw + 3.41px), 22px);
        --title-lh: clamp(17.6px, calc(0.9016vw + 8.367px), 22px);
    }
}

/* ═════════════════════════════════════════════════════════════
   31 · REZEPT · HERO
   Rezept-Detailseite (Beitragstyp rezept; Figma Rezeptseite): Titelblock – Titel, Kurzbeschreibung und Byline links, Titelbild rechts.
   Aufbau wie der Mixtape-Hero (Preset 21), nur ohne schwarzes Band: Row .dsp-hero__band mit zwei Spalten – erst die Textspalte
   (.dsp-hero__text: Titel .dsp-hero__title, Kurzbeschreibung .dsp-hero__excerpt, Byline .dsp-hero__credit + .dsp-hero__credit_box),
   dann die Bildspalte (.dsp-hero__media).
   Divi:      Section-Klasse  dz-section dz-section--recipe-hero
   Desktop (Figma 1512): Bild 701 px (49,5 % der Zeile, 701 : 522), Textspalte nimmt den Rest; Titel 40 / 44, Kurzbeschreibung 28 / 32
   (Lexend Regular), Byline im lila Strichrahmen unten bündig zum Bild (--text-pad: 15 px Abstand zur Bild-Unterkante).
   Mobile: Bild randlos über dem Text (Spalten in umgekehrter Reihenfolge, --hero-dir: column-reverse). Landscape / Portrait / Mobile sind aus
   dem Desktop-Frame und dem Mobile-Frame abgeleitet (kein eigener Rezept-Frame für die Tablet-Stufen).
   --sec-pt = Abstand Header → Titelblock, --sec-pb = 0 (den Abstand zur Lesespalte trägt recipe-body).
   --credit-box-w / -px / -py = Größe und Innenabstand des Byline-Rahmens; --text-gap-1 = Titel → Kurzbeschreibung, --text-gap-2 = Mindestabstand
   Kurzbeschreibung → Byline. Regeln: 09-divi.css (REZEPT) und dsp-hero__* (MIXTAPE-BEITRAG · HERO).
   ═════════════════════════════════════════════════════════════ */
.dz-section--recipe-hero{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --hero-bg: transparent;
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);
    --excerpt-fw: var(--fw-regular);
    --excerpt-color: var(--c-black);
    --credit-color: var(--c-black);
    --credit-line-color: var(--c-purple-credit);
    --credit-line-w: 2px;
    --credit-dash: 4px;
    --credit-dash-gap: 4px;

    /* Mobile · 428 */
    --sec-pt: 0;
    --sec-pb: 0;
    --sec-px: 0;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --hero-dir: column-reverse;
    --hero-align: stretch;
    --hero-pad: 0;
    --hero-gap: 0;
    --hero-radius: 0;
    --hero-shadow: none;
    --media-w: 100%;
    --media-ratio: 428 / 340;
    --media-radius: 0;
    --hero-text-w: auto;
    --text-pad: 20px 16px 0;
    --title-fs: 24px;
    --title-lh: 28px;
    --title-ls: 0;
    --excerpt-fs: 19px;
    --excerpt-lh: 23px;
    --text-gap-1: 23px;
    --text-gap-2: 36px;
    --credit-fs: var(--fs-credit-article);
    --credit-lh: 1.2;
    --credit-align: start;
    --credit-box-w: 176px;
    --credit-box-px: 10px;
    --credit-box-py: 16px;
}
@media (min-width: 768px){
    .dz-section--recipe-hero{  /* Portrait-Tablet · 768 */
        --sec-pt: 40px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --hero-dir: row;
        --hero-align: stretch;
        --hero-pad: 0;
        --hero-gap: 24px;
        --hero-radius: 0;
        --hero-shadow: none;
        --media-w: 49.5%;
        --media-ratio: 701 / 522;
        --media-radius: 0;
        --hero-text-w: calc(100% - 49.5% - 24px);
        --text-pad: 0 0 12px;
        --title-fs: 30px;
        --title-lh: 34px;
        --title-ls: 0;
        --excerpt-fs: 21px;
        --excerpt-lh: 25px;
        --text-gap-1: 30px;
        --text-gap-2: 24px;
        --credit-fs: var(--fs-credit-article);
        --credit-lh: 1.2;
        --credit-align: start;
        --credit-box-w: 230px;
        --credit-box-px: 10px;
        --credit-box-py: 18px;
    }
}
@media (min-width: 769px){
    .dz-section--recipe-hero{  /* Landscape-Tablet · 1024 */
        --sec-pt: 56px;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --hero-dir: row;
        --hero-align: stretch;
        --hero-pad: 0;
        --hero-gap: 16px;
        --hero-radius: 0;
        --hero-shadow: none;
        --media-w: 49.5%;
        --media-ratio: 701 / 522;
        --media-radius: 0;
        --hero-text-w: calc(100% - 49.5% - 16px);
        --text-pad: 0 0 12px;
        --title-fs: 34px;
        --title-lh: 38px;
        --title-ls: 0;
        --excerpt-fs: 24px;
        --excerpt-lh: 28px;
        --text-gap-1: 36px;
        --text-gap-2: 30px;
        --credit-fs: var(--fs-credit-article);
        --credit-lh: 1.2;
        --credit-align: start;
        --credit-box-w: 270px;
        --credit-box-px: 10px;
        --credit-box-py: 24px;
    }
}
@media (min-width: 1025px){
    .dz-section--recipe-hero{  /* Desktop · 1512 */
        --sec-pt: 71.5px;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --hero-dir: row;
        --hero-align: stretch;
        --hero-pad: 0;
        --hero-gap: 15px;
        --hero-radius: 0;
        --hero-shadow: none;
        --media-w: 49.5%;
        --media-ratio: 701 / 522;
        --media-radius: 0;
        --hero-text-w: calc(100% - 49.5% - 15px);
        --text-pad: 0 0 15px;
        --title-fs: 40px;
        --title-lh: 44px;
        --title-ls: 0;
        --excerpt-fs: 28px;
        --excerpt-lh: 32px;
        --text-gap-1: 43px;
        --text-gap-2: 40px;
        --credit-fs: var(--fs-credit-article);
        --credit-lh: 1.2;
        --credit-align: start;
        --credit-box-w: 314px;
        --credit-box-px: 11px;
        --credit-box-py: 30px;
    }
}

/* ═════════════════════════════════════════════════════════════
   32 · REZEPT · BODY
   Lesespalte und Bilder des Rezepts, eine Section, darin Rows in der Reihenfolge der Seite:
     Text-Modul(e)         Absatz = Lexend Regular (Token --fs-body, Laufweite .01em, Zeilenhöhe 33 px), Breite --txt-w (828 / 640 / 720 / 396);
                           Klasse dsp-body__intro = Einleitungsabsatz (Semibold), dsp-body__subtitle_text = Zwischentitel in Textgröße (Semibold, keine Versalien)
     Row dz-recipe__actions  Button „Direkt zum Rezept" (dz-btn dz-btn--secondary dz-recipe__jump), zentriert (--btn-mt / --btn-mb)
     Bild allein in der Row  breit (--wide-w der Containerbreite, --wide-ratio); mit Klasse dsp-body__image_tall schmal im Hochformat (--tall-w / --tall-ratio)
     Zwei Spalten, je ein Bild  gleich große Bilder nebeneinander (--eq-w Breite der Reihe, --eq-gap, --eq-ratio); zwei Rows hintereinander = Raster 2 × 2
                           (Zeilenabstand --eq-gap-y)
   Abstände: --sec-pt = Titelblock → erster Absatz; --sec-pb = letztes Bild → grüner Strich der Rezeptkarte; Bildreihen tragen ihre Abstände zu Text davor/danach
   selbst (--wide-mt/-mb, --eq-mt/-mb, --tall-mt, --btn-mt/-mb). Absatz → Absatz: --txt-gap.
   Mobile: Reihen mit zwei Bildern bleiben nebeneinander (Rundung --eq-radius); Landscape / Portrait aus Desktop und Mobile abgeleitet.
   Desktop-Maße (Figma 1512): Lesespalte 828, breites Bild 1066 × 570, Raster 2 × 2 je 544 × 365 (Lücke 47,5), Hochformat 489 × 730.
   Regeln: 09-divi.css (REZEPT).
   ═════════════════════════════════════════════════════════════ */
.dz-section--recipe-body{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --txt-fs: var(--fs-body);
    --txt-ls: .01em;
    --strong-fw: var(--fw-semibold);
    --img-radius: 0;

    /* Mobile · 428 */
    --sec-pt: 44px;
    --sec-pb: 80px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --txt-w: 396px;
    --txt-lh: 33px;
    --txt-gap: 35px;
    --sub-fs: var(--fs-body);
    --sub-lh: 33px;
    --sub-mt: 35px;
    --sub-mb: 35px;
    --btn-mt: 66px;
    --btn-mb: 0px;
    --wide-w: 100%;
    --wide-ratio: 396 / 446;
    --wide-mt: 78px;
    --wide-mb: 50px;
    --eq-w: 100%;
    --eq-ratio: 187 / 266;
    --eq-gap: 23px;
    --eq-gap-y: 27px;
    --eq-mt: 55px;
    --eq-mb: 50px;
    --eq-radius: 16px;
    --tall-w: 100%;
    --tall-ratio: 396 / 486;
    --tall-mt: 66px;
}
@media (min-width: 768px){
    .dz-section--recipe-body{  /* Portrait-Tablet · 768 */
        --sec-pt: 52px;
        --sec-pb: 64px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --txt-w: 720px;
        --txt-lh: 33px;
        --txt-gap: 37px;
        --sub-fs: var(--fs-body);
        --sub-lh: 33px;
        --sub-mt: 37px;
        --sub-mb: 37px;
        --btn-mt: 62px;
        --btn-mb: 0px;
        --wide-w: 100%;
        --wide-ratio: 720 / 460;
        --wide-mt: 60px;
        --wide-mb: 44px;
        --eq-w: 100%;
        --eq-ratio: 3 / 2;
        --eq-gap: 30px;
        --eq-gap-y: 30px;
        --eq-mt: 44px;
        --eq-mb: 52px;
        --eq-radius: 0px;
        --tall-w: 60%;
        --tall-ratio: 2 / 3;
        --tall-mt: 60px;
    }
}
@media (min-width: 769px){
    .dz-section--recipe-body{  /* Landscape-Tablet · 1024 */
        --sec-pt: 54px;
        --sec-pb: 70px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --txt-w: 640px;
        --txt-lh: 33px;
        --txt-gap: 36.5px;
        --sub-fs: var(--fs-body);
        --sub-lh: 33px;
        --sub-mt: 36.5px;
        --sub-mb: 36.5px;
        --btn-mt: 64px;
        --btn-mb: 0px;
        --wide-w: 75.3%;
        --wide-ratio: 1066 / 570;
        --wide-mt: 60px;
        --wide-mb: 46px;
        --eq-w: 80.2%;
        --eq-ratio: 544 / 365;
        --eq-gap: 38px;
        --eq-gap-y: 38px;
        --eq-mt: 46px;
        --eq-mb: 58px;
        --eq-radius: 0px;
        --tall-w: 34.5%;
        --tall-ratio: 2 / 3;
        --tall-mt: 70px;
    }
}
@media (min-width: 1025px){
    .dz-section--recipe-body{  /* Desktop · 1512 */
        --sec-pt: 69.5px;
        --sec-pb: 91.1px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --txt-w: 828px;
        --txt-lh: 33px;
        --txt-gap: 37px;
        --sub-fs: var(--fs-body);
        --sub-lh: 33px;
        --sub-mt: 37px;
        --sub-mb: 37px;
        --btn-mt: 82.1px;
        --btn-mb: 0px;
        --wide-w: 75.3%;
        --wide-ratio: 1066 / 570;
        --wide-mt: 72.9px;
        --wide-mb: 57.3px;
        --eq-w: 80.2%;
        --eq-ratio: 544 / 365;
        --eq-gap: 47.5px;
        --eq-gap-y: 47.5px;
        --eq-mt: 57.7px;
        --eq-mb: 71.9px;
        --eq-radius: 0px;
        --tall-w: 34.5%;
        --tall-ratio: 489 / 730;
        --tall-mt: 86.5px;
    }
}

/* ═════════════════════════════════════════════════════════════
   33 · REZEPT · KARTE
   Rezeptkarte: Titel (H2), Portionen, Zutaten in der lila Box, Zubereitung daneben, darunter „Rezept drucken" / „Rezept pinnen".
   Der grüne Strich oben ist der obere Rahmen der Section (--sec-bw / --sec-bc). Zusätzlich im Builder die CSS-ID rezept setzen
   (Ziel des Buttons „Direkt zum Rezept").
   Markup:    Row 1 (1 Spalte): Text-Module dz-recipe__title, dz-recipe__servings
              Row 2 (2 Spalten) dz-recipe__grid: Spalte dz-recipe__ingredients (dz-recipe__heading + dz-recipe__list),
                                                 Spalte dz-recipe__preparation (dz-recipe__heading + dz-recipe__steps)
              Row 3 (2 Spalten) dz-recipe__actions: Button-Module dz-btn dz-btn--secondary dz-recipe__print / dz-recipe__pin
   Divi:      Section-Klasse  dz-section dz-section--recipe-card
   Desktop (Figma 1512): Container 1300 px (--sec-max), Zutaten-Box 446 px (--rg-cols), Lücke 94 px, Schrift Lexend Light 22 px (Titel 40 / 44 Semibold,
   Portionen 20 px), Listenzeile 36 px, Schritte 33 px + 7 px Abstand. Mobile: Zutaten und Zubereitung untereinander, Buttons untereinander.
   --sec-pt = Strich → Titel, --sec-pb = Buttons → nächster Strich; --rg-mt = Portionen → Raster, --actions-mt = Raster → Buttons.
   Regeln: 09-divi.css (REZEPT).
   ═════════════════════════════════════════════════════════════ */
.dz-section--recipe-card{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: var(--c-green);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);
    --card-text-fw: var(--fw-light);
    --card-text-color: var(--c-black);
    --ing-bg: var(--c-purple-tint);
    --ing-bc: var(--c-purple);
    --ing-bw: 1px;
    --ing-radius: var(--r-sm);

    /* Mobile · 428 */
    --sec-pt: 44px;
    --sec-pb: 70px;
    --sec-px: 16px;
    --sec-bw: 4px 0 0;
    --sec-margin: 0;
    --sec-max: 396px;
    --title-fs: 26px;
    --title-lh: 30px;
    --servings-fs: 14px;
    --servings-lh: 17px;
    --servings-mt: 28px;
    --rg-mt: 30px;
    --rg-cols: 1fr;
    --rg-gap: 0px;
    --rg-gap-y: 28px;
    --ing-pad: 14px 20px 18px;
    --rhead-fs: 18px;
    --rhead-lh: 22px;
    --rhead-mb: 16px;
    --prep-pt: 0px;
    --list-fs: 18px;
    --list-lh: 28px;
    --list-gap: 0px;
    --list-indent: 8px;
    --steps-lh: 28px;
    --steps-gap: 12px;
    --steps-indent: 22px;
    --actions-mt: 44px;
    --actions-dir: column;
    --actions-gap: 56px;
    --actions-btn-w: 0px;
}
@media (min-width: 768px){
    .dz-section--recipe-card{  /* Portrait-Tablet · 768 */
        --sec-pt: 60px;
        --sec-pb: 70px;
        --sec-px: 24px;
        --sec-bw: 4px 0 0;
        --sec-margin: 0;
        --sec-max: 720px;
        --title-fs: 30px;
        --title-lh: 34px;
        --servings-fs: 17px;
        --servings-lh: 20px;
        --servings-mt: 32px;
        --rg-mt: 44px;
        --rg-cols: 270px minmax(0, 1fr);
        --rg-gap: 36px;
        --rg-gap-y: 0px;
        --ing-pad: 14px 20px 20px;
        --rhead-fs: 19px;
        --rhead-lh: 22px;
        --rhead-mb: 18px;
        --prep-pt: 14px;
        --list-fs: 19px;
        --list-lh: 30px;
        --steps-lh: 30px;
        --steps-gap: 8px;
        --actions-mt: 64px;
        --actions-dir: row;
        --actions-gap: 80px;
        --actions-btn-w: 0px;
    }
}
@media (min-width: 769px){
    .dz-section--recipe-card{  /* Landscape-Tablet · 1024 */
        --sec-pt: 70px;
        --sec-pb: 80px;
        --sec-px: 24px;
        --sec-bw: 4px 0 0;
        --sec-margin: 0;
        --sec-max: 976px;
        --title-fs: 34px;
        --title-lh: 38px;
        --servings-fs: 18px;
        --servings-lh: 22px;
        --servings-mt: 44px;
        --rg-mt: 64px;
        --rg-cols: 340px minmax(0, 1fr);
        --rg-gap: 64px;
        --ing-pad: 16px 24px 22px;
        --rhead-fs: var(--fs-body);
        --rhead-lh: 24px;
        --rhead-mb: 22px;
        --prep-pt: 18px;
        --list-fs: var(--fs-body);
        --list-lh: 33px;
        --steps-lh: 31px;
        --steps-gap: 8px;
        --actions-mt: 100px;
        --actions-gap: 140px;
        --actions-btn-w: 200px;
    }
}
@media (min-width: 1025px){
    .dz-section--recipe-card{  /* Desktop · 1512 */
        --sec-pt: 89.7px;
        --sec-pb: 100.6px;
        --sec-px: 48px;
        --sec-bw: 4px 0 0;
        --sec-margin: 0;
        --sec-max: 1300px;
        --title-fs: 40px;
        --title-lh: 44px;
        --servings-fs: 20px;
        --servings-lh: 24px;
        --servings-mt: 56px;
        --rg-mt: 90.6px;
        --rg-cols: 446px minmax(0, 1fr);
        --rg-gap: 94px;
        --ing-pad: 17px 28px 24px;
        --rhead-fs: var(--fs-body);
        --rhead-lh: 24px;
        --rhead-mb: 24.5px;
        --prep-pt: 21px;
        --list-fs: var(--fs-body);
        --list-lh: 36px;
        --steps-lh: 33px;
        --steps-gap: 7px;
        --actions-mt: 153.5px;
        --actions-gap: 218px;
        --actions-btn-w: 225px;
    }
}

/* ═════════════════════════════════════════════════════════════
   34 · REZEPT · WEITERE REZEPTE
   Unterstrichene Überschrift („WEITERE REZEPTE", League Spartan SemiBold, Versalien, zentriert) und vier Karten verwandter Rezepte
   (Bild, Label, Titel; Raster 4 Spalten, bis 1024 px Wisch-Slider) unter einem grünen Strich – kein Hintergrundband wie bei post-related (30).
   Markup:    Shortcode [dazzletic_related_posts] (Beitragstyp rezept: verwandt über die Rezept-Kategorie, Parameter heading="Weitere Rezepte")
              → .dazzletic-related-posts > h3.dazzletic-related-heading + .dazzletic-related-grid (Karten .dz-article)
   Divi:      Section-Klasse  dz-section dz-section--recipe-related; Code-Modul mit dem Shortcode
   Die Regeln sind die von post-related (09-divi.css, „Weitere Artikel"); Karten- und Slider-Werte sind dieselben wie in Preset 30 (gleiche Karten).
   --sec-pt = grüner Strich → Überschrift, --head-mb = Überschrift → Karten, --sec-pb / --sec-end = Karten → Footer.
   ═════════════════════════════════════════════════════════════ */
.dz-section--recipe-related{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: var(--c-green);
    --band-bg: transparent;
    --band-pt: 0px;
    --band-pb: 0px;
    --chip-bg: var(--c-neutral-2);
    --chip-bc: var(--c-neutral-1);
    --chip-color: var(--c-black);
    --title-ff: var(--font-body);
    --title-fw: var(--fw-semibold);
    --title-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 76px;
    --sec-pb: 40px;
    --sec-end: 40px;
    --sec-px: 16px;
    --sec-bw: 4px 0 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --more-fs: clamp(24px, calc(0.5882vw + 21.482px), 26px);
    --more-lh: 1;
    --more-ls: 0;
    --more-ul-offset: 2px;
    --head-mb: clamp(40px, calc(2.9412vw + 27.412px), 50px);
    --peek-k: 1;
    --peek-p: .4;
    --grid-gap-x: clamp(24px, calc(15.8824vw - 43.976px), 78px);
    --grid-cols: 1;
    --grid-gap-y: 32px;
    --media-ratio: 1 / 0.94;
    --media-radius: clamp(20px, calc(2.9412vw + 7.412px), 30px);
    --card-gap: clamp(9px, calc(-0.2941vw + 11.259px), 10px);
    --body-gap: clamp(9px, calc(0vw + 9px), 9px);
    --chip-fs: 9px;
    --chip-pad: 2px 14px;
    --chip-ls: .03em;
    --title-ls: .01em;
    --title-fs: clamp(16px, calc(0.5882vw + 13.482px), 18px);
    --title-lh: clamp(17.6px, calc(0.6471vw + 14.831px), 19.8px);
    --title-lines: 2;
}
@media (min-width: 768px){
    .dz-section--recipe-related{  /* Portrait-Tablet · 768 */
        --sec-pt: 76px;
        --sec-pb: 60px;
        --sec-end: 60px;
        --sec-px: 24px;
        --sec-bw: 4px 0 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --more-fs: 26px;
        --more-lh: 1;
        --more-ls: 0;
        --more-ul-offset: 2px;
        --head-mb: 50px;
        --peek-k: 1;
        --peek-p: .5;
        --grid-gap-x: 78px;
        --grid-cols: 2;
        --grid-gap-y: 40px;
        --media-ratio: 443 / 415;
        --media-radius: 30px;
        --card-gap: 9px;
        --body-gap: 9px;
        --chip-fs: 9px;
        --chip-pad: 2px 14px;
        --title-fs: 18px;
        --title-lh: 1.1;
    }
}
@media (min-width: 769px){
    .dz-section--recipe-related{  /* Landscape-Tablet · 1024 */
        --sec-pt: 94px;
        --sec-pb: 100px;
        --sec-end: 100px;
        --sec-px: 24px;
        --sec-bw: 4px 0 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --more-fs: 28px;
        --more-lh: 1;
        --more-ls: 0;
        --more-ul-offset: 2px;
        --head-mb: 40px;
        --peek-k: 3;
        --peek-p: .67;
        --grid-gap-x: 51px;
        --grid-cols: 3;
        --grid-gap-y: 48px;
        --media-ratio: 231 / 241;
        --media-radius: 24px;
        --card-gap: 10px;
        --body-gap: 10.5px;
        --chip-fs: 9px;
        --chip-pad: 2px 14px;
        --title-fs: 16px;
        --title-lh: 1.1;
    }
}
@media (min-width: 1025px){
    .dz-section--recipe-related{  /* Desktop · 1512 */
        --sec-pt: 112.5px;
        --sec-pb: 147px;
        --sec-end: 147px;
        --sec-px: 48px;
        --sec-bw: 4px 0 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --more-fs: clamp(28px, calc(0.8197vw + 19.607px), 32px);
        --more-lh: 1;
        --more-ls: 0;
        --more-ul-offset: 2px;
        --head-mb: 53.7px;
        --peek-k: 4;
        --peek-p: .5;
        --grid-gap-x: 32px;
        --grid-cols: 4;
        --grid-gap-y: 56px;
        --media-ratio: 330 / 340;
        --media-radius: clamp(24px, calc(1.2295vw + 11.41px), 30px);
        --card-gap: clamp(10px, calc(0.2049vw + 7.902px), 11px);
        --body-gap: clamp(10.5px, calc(0.4098vw + 6.303px), 12.5px);
        --chip-fs: 9px;
        --chip-pad: 2px 14px;
        --title-fs: clamp(16px, calc(1.2295vw + 3.41px), 22px);
        --title-lh: clamp(17.6px, calc(0.9016vw + 8.367px), 22px);
    }
}

/* ═════════════════════════════════════════════════════════════
   35 · 404-SEITE
   Fehlerseite (Divi Theme Builder → 404-Vorlage, Figma „Dazzletic-404“): links das Bild, rechts „Ups!“, Erklärungstext und eine
   Zeile aus Button „Startseite“ und Suchfeld. Portrait und Mobile stapeln: Bild, Text, Buttonzeile.
   Divi:      Section-Klasse  dz-section dz-section--404;  Row dz-404__row; Spalten dz-404__media / dz-404__content;
              Bild-Modul dz-404__image; Text-Module dz-404__title (H1) und dz-404__text (Absätze, der erste ist der größere Lead);
              Group dz-404__actions; Button dz-btn dz-btn--outline dz-btn--pill dz-404__home; Suche-Modul dz-404__search.
   Maße aus dem Figma (je Frame 1512 / 1024 / 768 / 428); Regeln: 09-divi.css „404-SEITE“.
   Zwischen den Breakpoints skaliert die Seite fließend (clamp(min, calc(Q vw + P px), max); die Anker sind die Werte der Figma-Frames,
   über 1512 und unter 428 bleibt alles unverändert):
      428 –  767   lineare Interpolation Mobile (428) → Portrait (768)  → bei 428 und 768 genau der Figma-Wert
     769 – 1024   Landscape-Werte proportional zur Inhaltsbreite (100vw − 64 px)  → bei 1024 genau der Figma-Wert;
                  Texte und Button haben eine Mindestgröße (Lesbarkeit), Bild, Spalten und Abstände skalieren mit
     1025 – 1512  lineare Interpolation Landscape (1024) → Desktop (1512)  → bei 1512 genau der Figma-Wert
   Dadurch behalten Bild, Text und Buttonzeile ihr Verhältnis (gleiche Zeilenumbrüche, gleiche Lücken wie im Figma); die Buttonzeile sitzt unten
   bündig zum Bild (margin-top: auto), mit --actions-gap-min als Mindestabstand zum Text, falls er einmal länger wird.
   --sec-pt = Abstand Header-Linie → Bild, --sec-pb = Abstand Bild/Buttonzeile → Footer, --sec-max = Breite des Inhalts (Bild + Lücke + Spalte).
   --media-w / -ratio / -fit  Bildspalte: Breite / Seitenverhältnis / Zuschnitt (cover = unverzerrt, fill = wie in Figma auf die Box gestreckt)
   --row-dir / --row-gap      Row: row | column, Abstand Bild → Text (Mobile / Portrait: Abstand zur Textoberkante)
   --content-pt / -pb         Textspalte (Desktop / Landscape): Abstand oben zur Bildoberkante / Buttons zur Bildunterkante; --content-flex = Flex der Spalte
   --title-fs / --lead-fs / --text-fs   „Ups!“ / erster Absatz / übrige Absätze;  --p-gap = Abstand zwischen den Absätzen;  --title-mb = Abstand „Ups!“ → Lead
                              (kleiner als --p-gap: Figma setzt die Zeilenbox der League Spartan anders als CSS – Grundlinien-Abstand 50 / 45 / 45 / 43 px)
   --actions-mt / -w / -gap-min   Buttonzeile: Abstand nach oben (auto = unten bündig; Mobile / Portrait fester Abstand zum Text) / Breite /
                              Mindestabstand zum Text (nur Desktop / Landscape)
   --btn-w / -h / -fs         Button „Startseite“ (Außenmaß inkl. Rand) und Schrift;  --btn-nudge = Polster oben (schiebt den Text um die Hälfte nach unten:
                              League-Spartan-Versalien sitzen in der Zeilenbox zu hoch, Figma zentriert sie optisch)
   --search-w / -h / -fs / -pl   Suchfeld: Maße, Schrift, Innenabstand links;  --ico-w / -h / -r = Lupe: Größe / Abstand zum rechten Rand
   ═════════════════════════════════════════════════════════════ */
.dz-section--404{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --media-fit: cover;
    --p-gap: 20px;

    /* Mobile · 428 (428 – 767 fließend zum Portrait-Wert, unter 428 fest) */
    --sec-pt: clamp(28px, calc(-1.1765vw + 37.065px), 32px);
    --sec-pb: clamp(112px, calc(2.6471vw + 100.641px), 121px);
    --sec-px: clamp(16px, calc(2.3529vw + 5.899px), 24px);
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 100%;
    --row-dir: column;
    --row-gap: clamp(30px, calc(-7.3529vw + 86.501px), 55px);
    --media-w: 100%;
    --media-ratio: 396 / 396;
    --content-flex: 0 0 auto;
    --content-pt: 0px;
    --content-pb: 0px;
    --title-fs: clamp(35px, calc(-1.4706vw + 46.324px), 40px);
    --title-mb: clamp(12px, calc(0.5882vw + 9.452px), 14px);
    --lead-fs: clamp(23px, calc(0.5882vw + 20.452px), 25px);
    --text-fs: 20px;
    --actions-mt: clamp(82px, calc(-9.1176vw + 152.054px), 113px);
    --actions-w: clamp(396px, calc(73.5294vw + 81.264px), 646px);
    --actions-gap-min: 0px;
    --btn-w: clamp(127px, calc(14.1176vw + 66.546px), 175px);
    --btn-h: clamp(43px, calc(1.4706vw + 36.676px), 48px);
    --btn-fs: clamp(20px, calc(0.5882vw + 17.452px), 22px);
    --btn-nudge: clamp(2px, calc(0.5882vw - 0.548px), 4px);
    --search-w: clamp(232px, calc(33.8235vw + 87.205px), 347px);
    --search-h: clamp(42px, calc(1.7647vw + 34.417px), 48px);
    --search-fs: 16px;
    --search-pl: clamp(20px, calc(1.1765vw + 14.935px), 24px);
    --ico-w: 21px;
    --ico-h: 20px;
    --ico-r: clamp(26px, calc(0.8824vw + 22.194px), 29px);
}
@media (min-width: 768px){
    .dz-section--404{  /* Portrait-Tablet · 768 */
        --sec-pt: 28px;
        --sec-pb: 121px;
        --sec-px: 24px;
        --sec-max: 716px;
        --row-dir: column;
        --row-gap: 30px;
        --media-w: 100%;
        --media-ratio: 716 / 569;
        --content-flex: 0 0 auto;
        --content-pt: 0px;
        --content-pb: 0px;
        --title-fs: 35px;
        --title-mb: 14px;
        --lead-fs: 25px;
        --text-fs: 20px;
        --actions-mt: 82px;
        --actions-w: 646px;
        --actions-gap-min: 0px;
        --btn-w: 175px;
        --btn-h: 48px;
        --btn-fs: 22px;
        --btn-nudge: 4px;
        --search-w: 347px;
        --search-h: 48px;
        --search-fs: 16px;
        --search-pl: 24px;
        --ico-w: 21px;
        --ico-h: 20px;
        --ico-r: 29px;
    }
}
@media (min-width: 769px){
    .dz-section--404{  /* Landscape-Tablet · 1024 (769 – 1024 proportional zur Inhaltsbreite) */
        --row-dir: row;
        --content-flex: 1 1 0;
        --search-min: 120px;
        --sec-pt: clamp(63.891px, calc(9.0625vw - 5.77px), 87px);
        --sec-pb: clamp(113.828px, calc(16.1458vw - 10.303px), 155px);
        --sec-px: 32px;
        --sec-max: 960px;
        --row-gap: clamp(18.359px, calc(2.6042vw - 1.637px), 25px);
        --media-w: clamp(348.828px, calc(49.4792vw - 31.637px), 475px);
        --media-ratio: 475 / 498;
        --content-pt: clamp(52.141px, calc(7.3958vw - 4.703px), 71px);
        --content-pb: clamp(33.047px, calc(4.6875vw - 2.97px), 45px);
        --title-fs: clamp(25.703px, calc(3.6458vw - 2.303px), 35px);
        --title-mb: clamp(10.281px, calc(1.4583vw - 0.903px), 14px);
        --lead-fs: clamp(18.359px, calc(2.6042vw - 1.637px), 25px);
        --text-fs: clamp(16px, calc(2.0833vw - 1.303px), 20px);
        --p-gap: clamp(14px, calc(2.0833vw - 1.303px), 20px);
        --actions-gap-min: clamp(29.375px, calc(4.1667vw - 2.637px), 40px);
        --actions-mt: auto;
        --actions-w: 100%;
        --btn-w: clamp(107.953px, calc(15.3125vw - 9.77px), 147px);
        --btn-h: clamp(35.25px, calc(5vw - 3.17px), 48px);
        --btn-fs: clamp(16px, calc(2.2917vw - 1.437px), 22px);
        --btn-nudge: clamp(2.938px, calc(0.4167vw - 0.237px), 4px);
        --search-w: clamp(211.5px, calc(30vw - 19.17px), 288px);
        --search-h: clamp(35.25px, calc(5vw - 3.17px), 48px);
        --search-fs: clamp(14px, calc(1.875vw - 1.17px), 18px);
        --search-pl: clamp(17.625px, calc(2.5vw - 1.57px), 24px);
        --ico-w: clamp(15.422px, calc(2.1875vw - 1.37px), 21px);
        --ico-h: clamp(14.688px, calc(2.0833vw - 1.303px), 20px);
        --ico-r: clamp(14.688px, calc(2.0833vw - 1.303px), 20px);
    }
}
@media (min-width: 1025px){
    .dz-section--404{  /* Desktop · 1512 (1025 – 1512 Interpolation Landscape → Desktop) */
        --search-min: 160px;
        --sec-pt: clamp(87px, calc(0.5123vw + 81.784px), 89.5px);
        --sec-pb: clamp(155px, calc(24.7951vw - 98.872px), 276px);
        --sec-px: clamp(32px, calc(7.582vw - 45.609px), 69px);
        --sec-max: 1374px;
        --row-gap: clamp(25px, calc(5.9426vw - 35.822px), 54px);
        --media-w: clamp(475px, calc(40.9836vw + 55.358px), 675px);
        --media-ratio: 675 / 709;
        --content-pt: clamp(71px, calc(10.8607vw - 40.183px), 124px);
        --content-pb: clamp(45px, calc(10.4508vw - 61.986px), 96px);
        --title-fs: clamp(35px, calc(3.0738vw + 3.555px), 50px);
        --title-mb: clamp(11px, calc(-0.6148vw + 20.265px), 14px);
        --lead-fs: clamp(25px, calc(1.0246vw + 14.538px), 30px);
        --text-fs: clamp(20px, calc(1.2295vw + 7.44px), 26px);
        --p-gap: 20px;
        --actions-gap-min: clamp(40px, calc(3.2787vw + 6.456px), 56px);
        --actions-mt: auto;
        --actions-w: 100%;
        --btn-w: clamp(147px, calc(14.5492vw - 1.954px), 218px);
        --btn-h: clamp(48px, calc(3.2787vw + 14.456px), 64px);
        --btn-fs: clamp(22px, calc(0.4098vw + 17.833px), 24px);
        --btn-nudge: clamp(4px, calc(0.8197vw - 4.363px), 8px);
        --search-w: clamp(288px, calc(21.3115vw + 69.8px), 392px);
        --search-h: clamp(48px, calc(3.2787vw + 14.456px), 64px);
        --search-fs: clamp(18px, calc(0.4098vw + 13.833px), 20px);
        --search-pl: clamp(24px, calc(1.6393vw + 7.243px), 32px);
        --ico-w: clamp(21px, calc(0.8197vw + 12.637px), 25px);
        --ico-h: clamp(20px, calc(0.8197vw + 11.637px), 24px);
        --ico-r: clamp(20px, calc(4.7131vw - 28.232px), 43px);
    }
}

/* ═════════════════════════════════════════════════════════════
   36 · SUCHE · FELD
   Ergebnisseite der Suche ([dazzletic_search_page] in search.php des Child-Themes): Suchfeld (.dz-searchform, 06-components.css) zwischen
   Titel (Preset cat-head) und den Kartenrastern (Preset cat-grid). Das Feld ist eine Pille wie die Suche der 404-Seite, mittig.
   Kein eigener Figma-Frame: Rand, Radius, Lupe und Höhen sind die der 404-Suche, die Breite wächst mit dem Breakpoint (396 / 480 / 520 / 592 px).
   Ohne Treffer steht das Feld als letzter Block vor dem Footer → --sec-end.
   --search-w / -h / -fs / -pl   Feld: Breite / Höhe / Schrift / Innenabstand links;  --ico-w / -h / -r   Lupe: Größe / Abstand zum rechten Rand
   ═════════════════════════════════════════════════════════════ */
.dz-section--search-field{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --sec-end: var(--space-section);

    /* Mobile · 428 */
    --sec-pt: 0;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --search-w: 396px;
    --search-h: 42px;
    --search-fs: 16px;
    --search-pl: 20px;
    --ico-w: 21px;
    --ico-h: 20px;
    --ico-r: 26px;
}
@media (min-width: 768px){
    .dz-section--search-field{  /* Portrait-Tablet · 768 */
        --sec-px: 24px;
        --search-w: 480px;
        --search-h: 48px;
        --search-pl: 24px;
        --ico-r: 29px;
    }
}
@media (min-width: 769px){
    .dz-section--search-field{  /* Landscape-Tablet · 1024 */
        --search-w: 520px;
        --search-fs: 18px;
        --ico-r: 20px;
    }
}
@media (min-width: 1025px){
    .dz-section--search-field{  /* Desktop · 1512 */
        --sec-px: 48px;
        --search-w: 592px;
        --search-h: 64px;
        --search-fs: 20px;
        --search-pl: 32px;
        --ico-w: 25px;
        --ico-h: 24px;
        --ico-r: 43px;
    }
}

/* ═════════════════════════════════════════════════════════════
   37 · CONTENT · TITEL
   Content-Seite (normale Divi-Seite, z. B. About; Figma „Dazzletic-About“): Seitentitel, zentriert, League Spartan Light, Versalien.
   Divi:      Section-Klasse dz-section dz-section--content-title; Post-Title-Modul (oder Text-/Überschrift-Modul mit H1) mit Klasse dz-content__title
   --title-fs folgt dem Token --fs-page-title (32 / 36 / 40 / 52 = Figma), Gewicht Light (Figma), Zeilenhöhe 1.
   --sec-pt = Abstand Header-Unterkante → Titelbox (Grundlinie des Titels liegt 81,5 / 70 / 47 / 47 px unter der Header-Linie), --sec-pb = Titelbox → Bild
   (Grundlinie → Bildoberkante 46 / 46 / 32 / 27 px). Regeln: 09-divi.css (CONTENT-SEITE).
   ═════════════════════════════════════════════════════════════ */
.dz-section--content-title{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --title-fs: var(--fs-page-title);
    --title-fw: var(--fw-light);
    --title-lh: 1;
    --title-ls: 0;
    --title-color: var(--c-black);

    /* Mobile · 428 */
    --sec-pt: 24px;
    --sec-pb: 18px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
}
@media (min-width: 768px){
    .dz-section--content-title{  /* Portrait-Tablet · 768 */
        --sec-pt: 21px;
        --sec-pb: 22px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
    }
}
@media (min-width: 769px){
    .dz-section--content-title{  /* Landscape-Tablet · 1024 */
        --sec-pt: 41px;
        --sec-pb: 35px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
    }
}
@media (min-width: 1025px){
    .dz-section--content-title{  /* Desktop · 1512 */
        --sec-pt: 43px;
        --sec-pb: 32px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
    }
}

/* ═════════════════════════════════════════════════════════════
   38 · CONTENT · BILD
   Bild unter dem Titel mit abgerundeten Ecken (Figma 30 / 30 / 28 / 28 px); das Bild wird auf das Seitenverhältnis beschnitten (cover).
   Divi:      Section-Klasse dz-section dz-section--content-hero; Bild-Modul mit Klasse dz-content__image
   --sec-max = max. Bildbreite (Figma 1174 / 877 / 720 / 396 px; ab Portrait füllt das Bild die Containerbreite), --media-ratio = Seitenverhältnis des Zuschnitts,
   --media-radius = Rundung. Der Abstand zum Text steckt im Preset content-body (--sec-pt). Regeln: 09-divi.css (CONTENT-SEITE).
   ═════════════════════════════════════════════════════════════ */
.dz-section--content-hero{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;

    /* Mobile · 428 */
    --sec-pt: 0;
    --sec-pb: 0;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --media-ratio: 396 / 466;
    --media-radius: 28px;
}
@media (min-width: 768px){
    .dz-section--content-hero{  /* Portrait-Tablet · 768 */
        --sec-pt: 0;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --media-ratio: 720 / 569;
        --media-radius: 28px;
    }
}
@media (min-width: 769px){
    .dz-section--content-hero{  /* Landscape-Tablet · 1024 */
        --sec-pt: 0;
        --sec-pb: 0;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 877px;
        --media-ratio: 877 / 585;
        --media-radius: 30px;
    }
}
@media (min-width: 1025px){
    .dz-section--content-hero{  /* Desktop · 1512 */
        --sec-pt: 0;
        --sec-pb: 0;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1174px;
        --media-ratio: 1174 / 664;
        --media-radius: 30px;
    }
}

/* ═════════════════════════════════════════════════════════════
   39 · CONTENT · TEXT
   Lesespalte der Content-Seite: Lexend Regular (Token --fs-body = 18 / 19 / 20 / 22 px = Figma), Zeilenhöhe 33 px, Absatzabstand 37 px, Laufweite .007em.
   Divi:      Section-Klasse dz-section dz-section--content-body; Text-Module mit Klasse dz-content__text (Absätze, Überschriften H1–H6);
              Zwischenüberschriften als eigenes Text-/Überschrift-Modul mit Klasse dz-content__subtitle (optional – die Tag-Stile gelten in jedem Modul der Section)
   Einleitung: Ist der erste Absatz des ersten Text-Moduls komplett fett gesetzt (<p><strong>…</strong></p>, im Divi-Editor), erscheint er als Lead in League Spartan
              SemiBold (--lead-fs = 24 / 20 / 19 / 20 px, Figma); sonst ist Fett = Lexend SemiBold (--strong-fw).
   Überschriften (nach Tag; Figma hat in den About-Frames keine – die Stile stammen aus vorhandenen Design-System-Werten):
              H1  Hero-Titel          Lexend SemiBold, Token --fs-h1-hero (.dz-hero-title)
              H2  Section-Titel       League Spartan SemiBold, Versalien, Token --fs-h2-section (.dz-section__title ohne Pfeil)
              H3  Zwischentitel       Lexend SemiBold, Versalien, 21 / 24 / 26 / 28 px (Beitrag, Preset post-body)
              H4  Zwischentitel Text  Lexend SemiBold in Textgröße, Token --fs-body (Rezept, dsp-body__subtitle_text)
              H5  Label               League Spartan SemiBold, Versalien, Token --fs-label-category (.dz-footer-col__title)
              H6  Nachweis            Lexend Regular, Versalien, grau, Token --fs-credit-image (.dz-credit)
   --sec-pt = Bildunterkante → Textbox (Grundlinie der ersten Zeile liegt 65 / 68 / 69 / 108 px unter dem Bild), --sec-pb = Text → Button.
   --sub-mt / --sub-mb = Abstand der Überschriften oben / unten (Werte des Beitrags); H4–H6 haben oben --txt-gap.
   Listen (ul / ol im Text-Modul): Textschrift und -zeilenhöhe, --list-indent = Einzug (em), --list-gap = Abstand zwischen den Punkten, --list-mt = Abstand Absatz → Liste
   (Liste → Absatz = --txt-gap), --list-marker = Farbe der Punkte (Textfarbe statt dem globalen Grün aus dazzletic-posts.css).
   Variante prose (dz-content--prose): Preset 41.
   Regeln: 09-divi.css (CONTENT-SEITE).
   ═════════════════════════════════════════════════════════════ */
.dz-section--content-body{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --txt-fs: var(--fs-body);
    --txt-ls: .007em;
    --strong-fw: var(--fw-semibold);
    --lead-ff: var(--font-heading);
    --lead-fw: var(--fw-semibold);
    --list-indent: 1.25em;
    --list-gap: 8px;
    --list-mt: 16px;
    --list-marker: var(--c-black);
    --h1-fs: var(--fs-h1-hero);
    --h1-lh: var(--lh-heading);
    --h2-fs: var(--fs-h2-section);
    --h2-lh: var(--lh-heading);
    --h4-fs: var(--fs-body);
    --h4-lh: 33px;
    --h5-fs: var(--fs-label-category);
    --h5-lh: 1.2;
    --h6-fs: var(--fs-credit-image);
    --h6-lh: 1.4;

    /* Mobile · 428 */
    --sec-pt: 42px;
    --sec-pb: 97px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --txt-w: 396px;
    --txt-lh: 33px;
    --txt-gap: 37px;
    --lead-fs: 20px;
    --h3-fs: 21px;
    --h3-lh: 28px;
    --sub-mt: 32px;
    --sub-mb: 12px;
}
@media (min-width: 768px){
    .dz-section--content-body{  /* Portrait-Tablet · 768 */
        --sec-pt: 45px;
        --sec-pb: 127px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --txt-w: 720px;
        --txt-lh: 33px;
        --txt-gap: 37px;
        --lead-fs: 19px;
        --h3-fs: 24px;
        --h3-lh: 30px;
        --sub-mt: 36px;
        --sub-mb: 14px;
    }
}
@media (min-width: 769px){
    .dz-section--content-body{  /* Landscape-Tablet · 1024 */
        --sec-pt: 45px;
        --sec-pb: 83px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --txt-w: 640px;
        --txt-lh: 33px;
        --txt-gap: 37px;
        --lead-fs: 20px;
        --h3-fs: 26px;
        --h3-lh: 32px;
        --sub-mt: 34px;
        --sub-mb: 14px;
    }
}
@media (min-width: 1025px){
    .dz-section--content-body{  /* Desktop · 1512 */
        --sec-pt: 84px;
        --sec-pb: 115px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --txt-w: 825px;
        --txt-lh: 33px;
        --txt-gap: 37px;
        --lead-fs: 24px;
        --h3-fs: 28px;
        --h3-lh: 34px;
        --sub-mt: 56px;
        --sub-mb: 21px;
    }
}

/* ═════════════════════════════════════════════════════════════
   40 · CONTENT · BUTTON
   Button „Kontaktiere uns“ (Figma „Button Hover“): quadratisch, 4 px grüner Rand, weiße Fläche, harter schwarzer Schatten (rechts / unten versetzt),
   League Spartan SemiBold, Versalien, zweizeilig („KONTAKTIERE / UNS“), mittig unter dem Text.
   Divi:      Section-Klasse dz-section dz-section--content-cta; Button-Modul mit Klassen dz-btn dz-btn--square dz-content__cta
   --btn-w / -h = Außenmaß inkl. Rand (353×74 / 353×74 / 322×74 / 250×65), --btn-fs = Schrift (= Zeilenhöhe), --btn-ls = Laufweite, --btn-bw = Rand,
   --btn-sx / -sy = Schattenversatz rechts / unten, --btn-text-w = Breite des Textblocks (schmaler als der Text → Umbruch nach „KONTAKTIERE“),
   --btn-dx = Verschiebung aus der Mitte (Figma setzt Button + Schatten mittig, der Button selbst sitzt 5,5 / 4,5 / 3 / 5 px links davon),
   --btn-nudge = Polster unten (schiebt den Text um die Hälfte nach oben: Figma setzt die Zeilen höher als die Zeilenbox der League Spartan, 5 / 5 / 4 / 3,5 px).
   --sec-pb = Button-Unterkante → Footer (ohne Schatten gemessen).
   Regeln: 09-divi.css (CONTENT-SEITE), Variante dz-btn--square: 06-components.css.
   ═════════════════════════════════════════════════════════════ */
.dz-section--content-cta{
    /* Farben & Schrift · alle Breakpoints */
    --sec-bg: transparent;
    --sec-bc: transparent;
    --btn-bw: 4px;
    --btn-ls: -.012em;

    /* Mobile · 428 */
    --sec-pt: 0;
    --sec-pb: 126px;
    --sec-px: 16px;
    --sec-bw: 0;
    --sec-margin: 0;
    --sec-max: 1416px;
    --btn-w: 250px;
    --btn-h: 65px;
    --btn-fs: 24px;
    --btn-sx: 5px;
    --btn-sy: 6px;
    --btn-text-w: 165px;
    --btn-dx: -5px;
    --btn-nudge: 7px;
}
@media (min-width: 768px){
    .dz-section--content-cta{  /* Portrait-Tablet · 768 */
        --sec-pt: 0;
        --sec-pb: 139px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --btn-w: 322px;
        --btn-h: 74px;
        --btn-fs: 28px;
        --btn-sx: 7px;
        --btn-sy: 7px;
        --btn-text-w: 200px;
        --btn-dx: -3px;
        --btn-nudge: 8px;
    }
}
@media (min-width: 769px){
    .dz-section--content-cta{  /* Landscape-Tablet · 1024 */
        --sec-pt: 0;
        --sec-pb: 89px;
        --sec-px: 24px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --btn-w: 353px;
        --btn-h: 74px;
        --btn-fs: 30px;
        --btn-sx: 6px;
        --btn-sy: 7px;
        --btn-text-w: 215px;
        --btn-dx: -4.5px;
        --btn-nudge: 10px;
    }
}
@media (min-width: 1025px){
    .dz-section--content-cta{  /* Desktop · 1512 */
        --sec-pt: 0;
        --sec-pb: 119px;
        --sec-px: 48px;
        --sec-bw: 0;
        --sec-margin: 0;
        --sec-max: 1416px;
        --btn-w: 353px;
        --btn-h: 74px;
        --btn-fs: 30px;
        --btn-sx: 6px;
        --btn-sy: 7px;
        --btn-text-w: 215px;
        --btn-dx: -5.5px;
        --btn-nudge: 10px;
    }
}

/* ═════════════════════════════════════════════════════════════
   41 · CONTENT · PROSE
   Variante für fortlaufende Textseiten (Datenschutzerklärung, Impressum, AGB …): Titel und Lesespalte, kein Bild, kein Button.
   Divi:      Section-Klassen  dz-section dz-section--content-title dz-content--prose  und  dz-section dz-section--content-body dz-content--prose
              (der Modifier steht an JEDER Section der Seite; Titel = Post-Title-Modul dz-content__title, Text-Module brauchen keine Klasse)
   Überschrieben wird nur, was vom Standard abweicht – Textbreite, Schrift, Überschriften H1–H6 und Listen kommen aus den Presets 37 und 39.
   Titel:     Token --fs-page-title-legal (Styleguide: 26 Mobile / 46 Desktop), League Spartan SemiBold, Zeilenhöhe 1.1 (.dz-page-title--legal). Für Portrait und
              Landscape nennt der Styleguide nichts: 32 / 38 px (zwischen Mobile und Desktop), damit der Titel über den H2 (26 / 32 px) bleibt.
   Abstände:  kein Figma-Frame – Werte des Beitrags: --sec-pt Header → Titel wie post-title (16 / 16 / 56 / 58), Titel → erster Absatz wie post-body (32 / 38 / 48 / 56);
              der Text ist der letzte Block vor dem Footer → --sec-end = --space-section.
   Fett und Kursiv regelt Divi: --strong-fw: bolder (Gewicht von Browser / Divi statt SemiBold); kein Lead (09-divi.css: :not(.dz-content--prose)).
   ═════════════════════════════════════════════════════════════ */
.dz-section--content-title.dz-content--prose{
    /* Farben & Schrift · alle Breakpoints */
    --title-fw: var(--fw-semibold);
    --title-lh: 1.1;

    /* Mobile · 428 */
    --sec-pt: 16px;
    --sec-pb: 0;
    --title-fs: var(--fs-page-title-legal);
}
@media (min-width: 768px){
    .dz-section--content-title.dz-content--prose{  /* Portrait-Tablet · 768 */
        --sec-pt: 16px;
        --sec-pb: 0;
        --title-fs: 32px;
    }
}
@media (min-width: 769px){
    .dz-section--content-title.dz-content--prose{  /* Landscape-Tablet · 1024 */
        --sec-pt: 56px;
        --sec-pb: 0;
        --title-fs: 38px;
    }
}
@media (min-width: 1025px){
    .dz-section--content-title.dz-content--prose{  /* Desktop · 1512 */
        --sec-pt: 58px;
        --sec-pb: 0;
        --title-fs: var(--fs-page-title-legal);
    }
}
.dz-section--content-body.dz-content--prose{
    /* Farben & Schrift · alle Breakpoints */
    --strong-fw: bolder;
    --sec-end: var(--space-section);

    /* Mobile · 428 */
    --sec-pt: 32px;
    --sec-pb: 0;
}
@media (min-width: 768px){
    .dz-section--content-body.dz-content--prose{  /* Portrait-Tablet · 768 */
        --sec-pt: 38px;
        --sec-pb: 0;
    }
}
@media (min-width: 769px){
    .dz-section--content-body.dz-content--prose{  /* Landscape-Tablet · 1024 */
        --sec-pt: 48px;
        --sec-pb: 0;
    }
}
@media (min-width: 1025px){
    .dz-section--content-body.dz-content--prose{  /* Desktop · 1512 */
        --sec-pt: 56px;
        --sec-pb: 0;
    }
}