/* =========================================================
   GLOBAL RESET & SICHERHEIT
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Elementor-Flex-Bug-Abwehr */
.e-con {
  min-width: 0;
}

/* =========================================================
   ZENTRALE LAYOUT-VARIABLEN
   ========================================================= */

:root {
  --layout-padding: 24px;
  --layout-narrow: 720px;
  --layout-default: 1100px;
  --layout-wide: 1400px;
}

/* =========================================================
   BASIS-LAYOUT (für alle Inhaltscontainer)
   ========================================================= */

.layout {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--layout-padding);
  padding-right: var(--layout-padding);
}

/* =========================================================
   BREITENVARIANTEN
   ========================================================= */

.layout-narrow {
  max-width: var(--layout-narrow);
}

.layout-default {
  max-width: var(--layout-default);
}

.layout-wide {
  max-width: var(--layout-wide);
}

/* =========================================================
   VOLLBREITE SEKTIONEN (HINTERGRUND)
   ========================================================= */

.section-full {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* =========================================================
   TYPOGRAFIE-SICHERHEIT
   ========================================================= */

.layout h1,
.layout h2,
.layout h3,
.layout h4,
.layout h5,
.layout h6,
.layout p {
  margin-left: 0;
  margin-right: 0;
}

/* =========================================================
   RESPONSIVE FEINJUSTIERUNG
   ========================================================= */

@media (max-width: 768px) {
  :root {
    --layout-padding: 16px;
  }
}
/* =========================================================
   GLOBAL RESET & SICHERHEIT
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Elementor-Flex-Bug-Abwehr */
.e-con {
  min-width: 0;
}

/* =========================================================
   ZENTRALE LAYOUT-VARIABLEN
   ========================================================= */

:root {
  --layout-padding: 24px;
  --layout-narrow: 720px;
  --layout-default: 1100px;
  --layout-wide: 1400px;
}

/* =========================================================
   BASIS-LAYOUT (für alle Inhaltscontainer)
   ========================================================= */

.layout {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--layout-padding);
  padding-right: var(--layout-padding);
}

/* =========================================================
   BREITENVARIANTEN
   ========================================================= */

.layout-narrow {
  max-width: var(--layout-narrow);
}

.layout-default {
  max-width: var(--layout-default);
}

.layout-wide {
  max-width: var(--layout-wide);
}

/* =========================================================
   VOLLBREITE SEKTIONEN (HINTERGRUND)
   ========================================================= */

.section-full {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* =========================================================
   TYPOGRAFIE-SICHERHEIT
   ========================================================= */

.layout h1,
.layout h2,
.layout h3,
.layout h4,
.layout h5,
.layout h6,
.layout p {
  margin-left: 0;
  margin-right: 0;
}

/* =========================================================
   RESPONSIVE FEINJUSTIERUNG
   ========================================================= */

@media (max-width: 768px) {
  :root {
    --layout-padding: 16px;
  }
}