/* =============================================================
   DAZZLETIC – Modul-/Komponenten-Klassen  (MOBILE FIRST)
   Alle Module aus dem Styleguide (02 BUTTONS/CTA · 04 CARDS ·
   05 ICONS/ELEMENTE · Newsletter · Footer). Nutzen die Tokens
   aus 01-tokens.css → skalieren automatisch je Breakpoint.
   .et_pb_*-Präfix = höhere Spezifität gegen Divis Modul-CSS.
   ============================================================= */

:root{
  --btn-offset: 5px;                         /* harter Versatz-Schatten */
  --btn-pad-y: 10px;
  --btn-pad-x: 18px;
}

/* =============================================================
   BUTTONS / CTA
   ============================================================= */
.dz-btn,
.et_pb_button.dz-btn{
  display:         inline-flex;
  align-items:     center;
  gap:             .5em;
  font-family:     var(--font-heading);
  font-weight:     var(--fw-semibold);
  font-size:       var(--fs-button-primary);
  line-height:     var(--lh-tight);
  text-transform:  uppercase;
  text-decoration: none;
  padding:         var(--btn-pad-y) var(--btn-pad-x);
  border:          var(--bw-4) solid var(--c-green);
  border-radius:   var(--r-sm);
  background:      var(--c-green);
  color:          var(--c-black);
  box-shadow:      var(--btn-offset) var(--btn-offset) 0 var(--c-black);
  transition:      background .2s, color .2s, box-shadow .2s, transform .2s;
  cursor:          pointer;
}
/* Divi-Standardpfeil entfernen, festes Padding erzwingen */
.et_pb_button.dz-btn:after{ content: none; display: none; }

.dz-btn:hover,
.et_pb_button.dz-btn:hover{
  background: var(--c-white);
  color:      var(--c-black);
}

/* Outline zuerst (weiß), füllt sich grün beim Hover */
.dz-btn--outline,
.et_pb_button.dz-btn--outline{ background: var(--c-white); }
.dz-btn--outline:hover,
.et_pb_button.dz-btn--outline:hover{ background: var(--c-green); }

/* Sekundär: schmaler, Regular (Rezept-Buttons „Direkt zum Rezept" etc.) */
.dz-btn--secondary,
.et_pb_button.dz-btn--secondary{
  font-weight: var(--fw-regular);
  font-size:   var(--fs-button-secondary);
  border-width: var(--bw-4);
  padding:     8px 14px;
}

/* Dunkel: „See more results" (schwarz gefüllt) */
.dz-btn--dark,
.et_pb_button.dz-btn--dark{
  background:    var(--c-black);
  border-color:  var(--c-black);
  color:         var(--c-white);
  box-shadow:    var(--btn-offset) var(--btn-offset) 0 var(--c-green);
}
.dz-btn--dark:hover,
.et_pb_button.dz-btn--dark:hover{
  background: var(--c-white);
  color:      var(--c-black);
}

/* Pill: Menü / 404-Startseite */
.dz-btn--pill,
.et_pb_button.dz-btn--pill{ border-radius: var(--r-pill); }

/* Lila (Newsletter-CTA „ANMELDEN") */
.dz-btn--purple,
.et_pb_button.dz-btn--purple{
  background:    transparent;
  border:        var(--bw-1) solid var(--c-purple);
  border-radius: var(--r-pill);
  box-shadow:    none;
  color:         var(--c-black);
  font-weight:   var(--fw-semibold);
}
.dz-btn--purple:hover,
.et_pb_button.dz-btn--purple:hover{ background: var(--c-purple-tint); }

/* =============================================================
   TEXT-LINKS  (Links & „Weitere …")
   ============================================================= */
.dz-link{
  font-family:     var(--font-body);
  font-weight:     var(--fw-regular);
  font-size:       var(--fs-body);
  color:           var(--c-black);
  text-decoration: none;
}
.dz-link:hover{
  text-decoration:        underline;
  text-decoration-color:  var(--c-green);
  text-underline-offset:  3px;
}

/* „Weitere Artikel/Mixtapes", Artikel-Zwischentitel (KP SKYWALKA -) */
.dz-more{
  font-family:     var(--font-heading);
  font-weight:     var(--fw-semibold);
  text-transform:  uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--c-black);
  color:           var(--c-black);
}
.dz-more:hover{ text-decoration-color: var(--c-green); }

/* =============================================================
   LABELS  (Kategorielabel auf Cards)
   ============================================================= */
.dz-label{
  display:         inline-block;
  font-family:     var(--font-heading);
  font-weight:     var(--fw-regular);
  font-size:       var(--fs-label-category);
  line-height:     var(--lh-tight);
  text-transform:  uppercase;
  letter-spacing:  .03em;
  padding:         5px 12px;
  border:          var(--bw-1) solid var(--c-neutral-1);
  border-radius:   var(--r-label);
  background:      var(--c-neutral-2);
  color:           var(--c-black);
}
.dz-label--light{ background: var(--c-white); }     /* Card 2/6: weiß */
.dz-label--plain{ border: 0; }

/* =============================================================
   CARDS
   ============================================================= */
.dz-card{ position: relative; }

.dz-card__img{
  display:       block;
  overflow:      hidden;
  border-radius: var(--r-md);        /* 30 – Standard */
}
.dz-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }

.dz-card__cat{
  font-family:    var(--font-heading);
  font-weight:    var(--fw-regular);
  font-size:      var(--fs-label-category);
  text-transform: uppercase;
  color:          var(--c-black);
}
.dz-card__title{
  font-family:    var(--font-body);
  font-weight:    var(--fw-semibold);
  font-size:      var(--fs-h3-card);
  line-height:    1.2;
  color:          var(--c-black);
  margin:         .35em 0 .25em;
}
.dz-card__text{
  font-family:    var(--font-body);
  font-weight:    var(--fw-regular);
  font-size:      var(--fs-body);
  line-height:    var(--lh-body);
  color:          var(--c-black);
}

/* Grüne Feature-Card (PEOPLE / Card 5) */
.dz-card--green{
  background:     var(--c-green-light);
  border:         var(--bw-3) solid var(--c-green);
  border-radius:  var(--r-sm);
  padding:        var(--space-heading-gap);
}
/* Such-Card (Landingpage Suche) */
.dz-card--search{
  border:        var(--bw-1) solid var(--c-gray-3);
  border-radius: var(--r-md);
}
/* Mixtape-Card (horizontal, Landingpage) */
.dz-card--mixtape{
  display:       flex;
  align-items:   stretch;
  gap:           var(--space-heading-gap);
  border:        var(--bw-1) solid var(--c-gray-3);
  border-radius: var(--r-md);
  overflow:      hidden;
}

/* =============================================================
   BILDER  (Divi Image-Modul)
   Problem live: Divi-Bilder mit fester Höhe werden mit
   object-fit:fill GESTRECKT, und die Rundung ist inkonsistent.
   Fix: .dz-img → cover (beschneiden statt strecken) + Rundung
   aus Token. Ratio-Modifier ersetzen fragile Pixel-Höhen.
   Anwendung: am Image-Modul unter Advanced → CSS-Klasse.
   ============================================================= */
/* Modul + Wrap auf volle verfügbare Breite (kein seitlicher Weißraum,
   v. a. mobil). Hebt feste Modulbreiten & zentrierende Auto-Margins auf. */
.et_pb_image.dz-img{
  width:         100%;
  max-width:     none;   /* evtl. gesetzte feste Modulbreite aufheben */
  margin-inline: 0;      /* zentrierende Auto-Margins entfernen */
}
.et_pb_image.dz-img .et_pb_image_wrap{
  display:       block;
  width:         100%;
  border-radius: var(--r-md);
  overflow:      hidden;
}
.et_pb_image.dz-img img{
  width:      100%;
  height:     100%;
  object-fit: cover;      /* füllt die Breite, beschneidet die Höhe (statt strecken/Weißraum) */
  display:    block;
}

/* Konsistente Seitenverhältnisse statt fester Pixel-Höhen */
.et_pb_image.dz-img--4x3   .et_pb_image_wrap{ aspect-ratio: 4 / 3;  height: auto; }
.et_pb_image.dz-img--3x4   .et_pb_image_wrap{ aspect-ratio: 3 / 4;  height: auto; }
.et_pb_image.dz-img--16x9  .et_pb_image_wrap{ aspect-ratio: 16 / 9; height: auto; }
.et_pb_image.dz-img--square .et_pb_image_wrap{ aspect-ratio: 1 / 1; height: auto; }

/* Radius-Varianten */
.et_pb_image.dz-img--r-sm   .et_pb_image_wrap{ border-radius: var(--r-sm); }
.et_pb_image.dz-img--r-none .et_pb_image_wrap{ border-radius: 0; }

/* Nicht beschneiden (Logos, Grafiken, „PLAY", Embeds) */
.et_pb_image.dz-img--contain img{ object-fit: contain; }

/* =============================================================
   CREDITS
   ============================================================= */
.dz-credit{                 /* Bild-Credit (GETTY IMAGES …) */
  font-family:    var(--font-body);
  font-weight:    var(--fw-regular);
  font-size:      var(--fs-credit-image);
  text-transform: uppercase;
  letter-spacing: .04em;
  color:          var(--c-gray-1);
}
.dz-credit--article{        /* Artikel-Credit (Autor/Foto) */
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  font-size:   var(--fs-credit-article);
  color:       var(--c-black);
  text-transform: none;
  letter-spacing: normal;
}

/* =============================================================
   HEADINGS / TITEL
   ============================================================= */
.dz-hero-title{
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size:   var(--fs-h1-hero);
  line-height: var(--lh-heading);
  color:       var(--c-black);
}
.dz-section-title{
  font-family:    var(--font-heading);
  font-weight:    var(--fw-semibold);
  font-size:      var(--fs-h2-section);
  line-height:    var(--lh-heading);
  text-transform: uppercase;
  color:          var(--c-black);
}
.dz-page-title{
  font-family:    var(--font-heading);
  font-weight:    var(--fw-semibold);
  font-size:      var(--fs-page-title);
  line-height:    1.1;
  text-transform: uppercase;
  color:          var(--c-black);
}
.dz-quote{                  /* Pull-Quote „Ora et labora …" */
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size:   var(--fs-h2-section);
  line-height: var(--lh-heading);
  text-align:  center;
  color:       var(--c-black);
}

/* =============================================================
   GRÜNER STRICH  (Rezept-Trenner)
   ============================================================= */
.dz-rule{
  border:      0;
  border-top:  var(--bw-3) solid var(--c-green);
  width:       100%;
  margin:      0;
}

/* =============================================================
   NEWSLETTER-FORMULAR
   ============================================================= */
.dz-newsletter__title{
  font-family:    var(--font-heading);
  font-weight:    var(--fw-semibold);
  font-size:      var(--fs-h2-section);
  text-transform: uppercase;
}
.dz-newsletter input[type="text"],
.dz-newsletter input[type="email"],
.dz-newsletter .dz-newsletter__field{
  font-family:   var(--font-body);
  border:        var(--bw-1) solid var(--c-purple);
  border-radius: var(--r-pill);
  background:    transparent;
  padding:       12px 20px;
  color:         var(--c-black);
}
.dz-newsletter__note{           /* Datenschutz-Text neben Checkbox */
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size:   var(--fs-credit-image);
  color:       var(--c-black);
}

/* =============================================================
   PFEIL-KREIS  (Sectiontitel-Übergang / Slider-Pfeile)
   ============================================================= */
.dz-arrow{
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           2.2em;
  height:          2.2em;
  border:          var(--bw-1) solid var(--c-black);
  border-radius:   50%;
  color:           var(--c-black);
  transition:      color .2s, border-color .2s;
}
.dz-arrow:hover{ color: var(--c-gray-2); border-color: var(--c-gray-2); }

/* =============================================================
   FOOTER
   ============================================================= */
.dz-footer-col__title{          /* RECHTLICHES / INFO */
  font-family:    var(--font-heading);
  font-weight:    var(--fw-semibold);
  font-size:      var(--fs-label-category);
  text-transform: uppercase;
  color:          var(--c-black);
}
.dz-footer-link{
  font-family:     var(--font-body);
  font-weight:     var(--fw-regular);
  font-size:       var(--fs-body);
  color:           var(--c-black);
  text-decoration: none;
}
.dz-footer-link:hover{
  text-decoration:       underline;
  text-decoration-color: var(--c-green);
  text-underline-offset: 3px;
}

/* Hinweis: Die Menü-Pills (SPORTS/PEOPLE …) und das Megamenü werden
   vom separaten Plugin „dazzletic-mega-menu" gestylt. Der Footer-
   Akkordeon-Toggle (+) auf Mobile ist ein Divi-Toggle/Accordion-Modul. */