/* =============================================================
   DAZZLETIC – Layout-Klassen  (MOBILE FIRST)
   Section / Row / Column – nutzen die Tokens aus 01-tokens.css.
   Da die Tokens je Breakpoint überschrieben werden, brauchen die
   Klassen selbst kaum Media Queries (nur wo sich das Verhalten,
   nicht nur ein Wert, ändert).
   Anwendung: Klasse am Modul unter  Advanced → CSS-Klasse
   (oder ins Global Preset der Section/Row/Column legen).
   ============================================================= */

/* ============================ SECTION ============================
   Flaches Modell – alle Seitentypen einheitlich (Startseite entschachtelt).
   Sections sind immer voll breit → Bänder (Hintergrund) werden
   AUTOMATISCH randlos, ohne Bleed-Trick. Gutter = horizontales
   Padding, Rhythmus = vertikales Padding (beides in dz-section).

   • dz-section        → Inhalts-Section: Gutter + vertikaler Abstand
   • dz-section--lg    → größerer vertikaler Abstand (um grüne Bänder)
   • dz-section--hero  → oben bündig
   • dz-section--flush → kein vertikaler Abstand
   • --green/-tint/-footer/-newsletter → Band-Hintergrund/Border
                         (mit dz-section kombinieren)

   :has()-Netz: falls ein Template doch Sections verschachtelt
   (z. B. Plugin-Layouts), bekommt die umschließende Section keinen
   doppelten vertikalen Abstand.                                    */

.et_pb_section.dz-section{
  padding-block:  var(--space-section);
  padding-inline: var(--space-gutter);
}
/* Sicherheitsnetz gegen doppelten Abstand bei verschachtelten Sections */
.et_pb_section.dz-section:has(.et_pb_section){ padding-block: 0; }

/* Vertikale Modifier */
.et_pb_section.dz-section--lg   { padding-block: var(--space-section-lg); }
.et_pb_section.dz-section--hero { padding-block: 0 var(--space-section); }
.et_pb_section.dz-section--flush{ padding-block: 0; }

/* Bänder – nur Hintergrund/Border; Full-Bleed automatisch (Section voll breit).
   Immer zusammen mit dz-section verwenden (liefert Gutter + Abstand). */
.et_pb_section.dz-section--green { background: var(--c-green); }
.et_pb_section.dz-section--tint  { background: var(--c-green-tint); }
.et_pb_section.dz-section--footer{ border: var(--bw-1) solid var(--c-purple); }
.et_pb_section.dz-section--newsletter{ border-top: var(--bw-1) dashed var(--c-purple); }

/* ============================== ROW ============================== */
/* Section liefert den Gutter → Row braucht nur die max-Breite.
   Mobile: width 100% (voll, minus Gutter) → skaliert von selbst. */
.et_pb_row.dz-row{
  width:          100%;
  max-width:      var(--container-max);   /* 1416 Cap */
  margin-inline:  auto;
  padding-inline: 0;
}
.et_pb_row.dz-row--text   { max-width: 720px; }   /* schmale Lesespalte */
.et_pb_row.dz-row--full   { max-width: 100%; }
.et_pb_row.dz-row--heading{ margin-bottom: var(--space-heading-gap); }

/* Card-Grid: mobile-first Auto-Grid.
   Auf schmalen Screens 1 Spalte (min(100%,220px)), dann automatisch
   mehr Spalten. Divi-Spaltenbreiten werden neutralisiert. */
.et_pb_row.dz-row--cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-heading-gap);
}
.et_pb_row.dz-row--cards > .et_pb_column{
  width:  auto !important;   /* Divi-Spaltenbreite überschreiben */
  margin: 0 !important;
}

/* ============================= COLUMN ============================= */
.et_pb_column.dz-col{ margin: 0; }

/* Vertikaler Rhythmus zwischen Modulen einer Spalte */
.et_pb_column.dz-col--stack > .et_pb_module{ margin-bottom: var(--space-heading-gap); }
.et_pb_column.dz-col--stack > .et_pb_module:last-child{ margin-bottom: 0; }

/* Inhalt zentriert (Card-Text unter dem Bild) */
.et_pb_column.dz-col--center{ text-align: center; }

/* Hinweis: Zwei-Spalten-Layouts (Bild+Text, Zutaten/Zubereitung)
   am besten über Divis native 1/2-Spalten bauen – die stacken auf
   Phone automatisch (ebenfalls mobile-first). */