/**
 * divi-overrides.css
 * ------------------------------------------------------------
 * Ziel:
 * - Divi 5 Defaults an dein Design-System (Tokens) anbinden
 * - moderne Container-Breiten (statt 1080px)
 * - relative Units + clamp() via Tokens
 * - updatefest: wenig Spezifität, :where(), keine wilden !important
 *
 * Hinweis:
 * Divi kann je nach Modul/Optionen Inline-Styles setzen.
 * Diese Datei soll "Default-Feeling" modernisieren + systematisch angleichen.
 * Für echte Varianten nutze Presets + Klassen (z.B. pls-row--wide).
 * ------------------------------------------------------------
 */

/* ------------------------------------------------------------
 * 0) Sicherheitsnetz: Box sizing, bessere Defaults (nur in Divi Bereichen)
 * ------------------------------------------------------------ */
:where(.et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module) *,
:where(.et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module) *::before,
:where(.et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module) *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------
 * 1) Container / Row Breiten (statt Divi 1080px)
 * ------------------------------------------------------------ */
/**
 * Default Content Row:
 * - ersetzt "1080px" durch moderne max-width Token
 * - Gutter ebenfalls token-basiert
 */
:where(.et_pb_row) {
  width: min(100% - (2 * var(--gutter)), var(--container-max));
  max-width: var(--container-max);     /* <-- wichtig */
  margin-inline: auto;
}

/**
 * Row Varianten (als Klassen oder Presets):
 * - pls-row--wide: für Grids, Cards, Hero-Inhalte (nicht Full-Width)
 * - pls-row--narrow: für textlastige Seiten, Legal, Blog
 */
:where(.et_pb_row.pls-row--wide) {
  width: min(100% - (2 * var(--gutter)), var(--container-max-wide, 80rem));
  max-width: var(--container-max-wide, 80rem) !important;  /* <-- wichtig */
  margin-inline: auto;
}

:where(.et_pb_row.pls-row--narrow) {
  width: min(100% - (2 * var(--gutter)), var(--container-max-narrow, 64rem));
  max-width: var(--container-max-narrow, 64rem) !important; /* <-- wichtig */
  margin-inline: auto;
}


/* ------------------------------------------------------------
 * Full Width Row – 100% Viewport
 * ------------------------------------------------------------ */
:where(.et_pb_row.pls-row--full) {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 50%;
  margin-right: 50%;
  transform: translateX(-50%);
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

/* ------------------------------------------------------------
 *Padding Row 
 * ------------------------------------------------------------ */


.et_block_row {
        padding:var(--space-1) !important;
    }


/**
 * Full-width Section Inhalte:
 * Wenn du eine Fullwidth-Section nutzt, ist das Außen voll breit,
 * aber der Inhalt soll sich an Container halten.
 * (Divi Fullwidth Module haben teils eigene Wrapper.)
 */
:where(.et_pb_section.et_pb_section_fullwidth) > :where(.et_pb_module, .et_pb_fullwidth_header, .et_pb_fullwidth_slider, .et_pb_fullwidth_menu, .et_pb_fullwidth_portfolio, .et_pb_fullwidth_post_slider) {
  width: min(100% - (2 * var(--gutter)), var(--container-max-wide, 80rem));
  margin-inline: auto;
}

/* ------------------------------------------------------------
 * 2) Section Padding / vertikale Rhythmik
 * ------------------------------------------------------------ */
/**
 * Moderne Default-Section-Paddings:
 * - Wenn du in Divi pro Section eigene Werte setzt, gewinnt ggf. Divi.
 * - Diese Werte sind "Baseline", die du über Presets standardisieren kannst.

:where(.et_pb_section) {
  padding-block: var(--space-7);
}

:where(.et_pb_section.pls-section--compact) {
  padding-block: var(--space-5);
}

:where(.et_pb_section.pls-section--spacious) {
  padding-block: var(--space-8);
}
*/
/* Row Padding Variants */
.et_pb_row.pls-row--pad-s {
  padding-top: var(--space-3);
}

.et_pb_row.pls-row--pad-m {
  padding-block: var(--space-4);
}

.et_pb_row.pls-row--pad-l {
  padding-block: var(--space-5);
}




/* Row/Column: keine extra vertikale Padding-Dopplung */
:where(.et_pb_row, .et_pb_column) {
  padding-block: 0;
}

/* ------------------------------------------------------------
 * 3) Typografie-Bridge für häufige Divi Module
 * ------------------------------------------------------------ */
/* Text-Modul */
:where(.et_pb_text) {
  font-size: var(--fs-0);
  line-height: var(--lh-base, 1.6);
}

/* Überschriften-Modul / Modul-Header (Divi nutzt mehrere Klassen je nach Modul) */
:where(.et_pb_module_header, .et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4, .et_pb_text h5, .et_pb_text h6) {
  letter-spacing: -0.01em;
}

/* Optional: Textbreite begrenzen, wenn du prose-artige Bereiche nutzt */
:where(.et_pb_text.pls-prose, .pls-prose .et_pb_text) {
  max-width: 72ch;
}

/* ------------------------------------------------------------
 * 4) Buttons (Divi: .et_pb_button)
 * ------------------------------------------------------------ */
:where(.et_pb_button) {
  font-size: var(--fs-0);
  line-height: 1.1;
  padding: 0.85em 1.15em; /* em = relativ zur Button-Schrift */
  border-radius: var(--radius-2, 0.9rem);
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  transition: transform var(--transition, 220ms ease), box-shadow var(--transition, 220ms ease), background var(--transition, 220ms ease), color var(--transition, 220ms ease), border-color var(--transition, 220ms ease);
  text-decoration: none;
}

/* Primary Button Klasse (selbst vergeben oder via Preset) */
:where(.et_pb_button.pls-btn--primary) {
  background: var(--color-brand, #ef7024);
  color: color-mix(in srgb, var(--color-text, #fff) 92%, #000);
  border-color: color-mix(in srgb, var(--color-brand, #ef7024) 70%, transparent);
}

:where(.et_pb_button.pls-btn--primary:hover) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1, 0 8px 24px rgba(0,0,0,0.25));
}

/* Secondary/Ghost */
:where(.et_pb_button.pls-btn--ghost) {
  background: transparent;
  color: var(--color-text, #fff);
  border-color: var(--color-border, rgba(255,255,255,0.12));
}

:where(.et_pb_button.pls-btn--ghost:hover) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1, 0 8px 24px rgba(0,0,0,0.25));
}

/* ------------------------------------------------------------
 * 5) Cards / Surface Look (Blurb, CTA, Pricing etc.)
 * ------------------------------------------------------------ */
/**
 * Divi Module, die oft "boxy" eingesetzt werden:
 * - Blurb: .et_pb_blurb
 * - CTA:   .et_pb_call_to_action / .et_pb_cta (je nach Divi Version/Modul)
 * - Pricing Tables: .et_pb_pricing_table
 * - Toggle/Accordion: .et_pb_toggle / .et_pb_accordion
 *
 * Wir geben ihnen nur "fähige" Defaults (Radius etc.) und eine opt-in Klasse.
 */
:where(.et_pb_blurb, .et_pb_call_to_action, .et_pb_cta, .et_pb_pricing_table, .et_pb_toggle, .et_pb_accordion) {
  border-radius: var(--radius-3, 1.25rem);
}

/* Opt-in Card Style über Klasse */
:where(.pls-card, .et_pb_blurb.pls-card, .et_pb_call_to_action.pls-card, .et_pb_cta.pls-card, .et_pb_pricing_table.pls-card) {
  background: color-mix(in srgb, var(--color-surface, #151a22) 85%, transparent);
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  box-shadow: var(--shadow-1, 0 8px 24px rgba(0,0,0,0.25));
  padding: var(--space-5);
}

/* ------------------------------------------------------------
 * 6) Gaps / moderne Abstände in Spalten-Layouts (vorsichtig!)
 * ------------------------------------------------------------ */
/**
 * Divi verwaltet Gutter über eigene Mechaniken.
 * Diese Regel ist bewusst zurückhaltend:
 * - Wenn du in einem Abschnitt moderne "card grids" baust, nutze pls-grid Klasse.
 */
:where(.pls-grid .et_pb_row) {
  /* Row bleibt Container; Grid-Spaltenabstand kommt über CSS gap, wenn möglich */
}

/* Divi Columns sind oft floats/flex. In Divi 5 kann das variieren.
   Wir bieten nur eine opt-in Flex-Gap Variante: */
:where(.pls-flex-row) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ------------------------------------------------------------
 * 7) Forms (Kontaktformular)
 * ------------------------------------------------------------ */
:where(.et_pb_contact_form input, .et_pb_contact_form textarea, .et_pb_contact_form select) {
  font-size: var(--fs-0);
  line-height: 1.25;
  padding: 0.75em 0.9em;
  border-radius: var(--radius-1, 0.5rem);
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  background: color-mix(in srgb, var(--color-surface, #151a22) 85%, transparent);
  color: var(--color-text, #fff);
  transition: box-shadow var(--transition, 220ms ease), border-color var(--transition, 220ms ease);
}

:where(.et_pb_contact_form input::placeholder, .et_pb_contact_form textarea::placeholder) {
  color: color-mix(in srgb, var(--color-muted, #aab6c5) 92%, transparent);
}

/* Fokus (falls Divi eigene Styles hat, ergänzen wir nur) */
:where(.et_pb_contact_form input, .et_pb_contact_form textarea, .et_pb_contact_form select):focus {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(248,210,110,0.35));
  border-color: color-mix(in srgb, var(--color-accent, #f8d26e) 55%, transparent);
}

/* Submit Button im Contact Modul */
:where(.et_pb_contact_submit) {
  font-size: var(--fs-0);
  padding: 0.85em 1.15em;
  border-radius: var(--radius-2, 0.9rem);
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  background: var(--color-brand, #ef7024);
  color: color-mix(in srgb, var(--color-text, #fff) 92%, #000);
  transition: transform var(--transition, 220ms ease), box-shadow var(--transition, 220ms ease);
}

:where(.et_pb_contact_submit:hover) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1, 0 8px 24px rgba(0,0,0,0.25));
}

/* ------------------------------------------------------------
 * 8) Images / Media - sanfte Modernisierung
 * ------------------------------------------------------------ 
:where(.et_pb_image img) {
  border-r
*/


/* --- Footer-Overlap Hard Fix (Divi) --- */

/* 1) Falls irgendein Teil des Footers fixed/absolute ist: zurücksetzen */
#main-footer,
#main-footer * ,
#footer-bottom,
#et-footer-nav {
  position: static;
}

/* 2) Falls Divi/Custom CSS negative Margins nutzt */
#main-footer {
  margin-top: auto;
  margin-bottom: 0;
  transform: none;
}

/* 3) Sicherstellen, dass der Content den Footer nicht "unterläuft" */
#et-main-area {
  overflow: visible;
}

#main-content {
  padding-bottom: var(--space-2);
}




/* --- Sticky Footer, aber ohne Overlap --- */
html, body {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

/* Divi Struktur: #page-container > #et-main-area > (#main-content + footer) */
#page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#et-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#main-content {
  flex: 1;
}

/* Footer bleibt unten, aber im normalen Flow */
#main-footer {
  margin-top: auto;
  position: relative; /* falls irgendwas ihn fixed/absolute gemacht hat */
}





/* --- Fix: Container zentrieren (verhindert "ausbrechen") --- */
.container {
  width: min(100% - (2 * var(--gutter)), var(--container-max));
  max-width: var(--container-max);
  margin-inline: auto;
}

/* --- Fix: horizontales Overflow durch Fullwidth Rows vermeiden --- */
html, body { overflow-x: clip; }


/* --- Divi Row Height Fix (falls Columns floaten/collapsen) --- */
.et_pb_row::after {
  content: "";
  display: table;
  clear: both;
}