/*
 * epnox Bestellung 1.1.0
 * Alle Farben als Variablen unter --epx-, alle Klassen mit epx-, damit
 * nichts mit dem Theme kollidiert. Hell und dunkel über prefers-color-scheme
 * (epx-schema-auto) oder fest (epx-schema-hell, epx-schema-dunkel).
 */

/* ---------- Farben ---------- */

.epx-root {
  --epx-primary: #264462;
  --epx-primary-ink: #264462;
  --epx-primary-soft: #e8eef5;
  --epx-accent: #f1800e;
  --epx-accent-hover: #f59431;
  --epx-on-accent: #10243a;
  --epx-accent-soft: #fff4e8;
  --epx-accent-ink: #b45a00;
  --epx-bg: #ffffff;
  --epx-surface: #f5f7fa;
  --epx-border: #d9e0e8;
  --epx-border-strong: #b5c2cf;
  --epx-text: #1b2733;
  --epx-heading: #13283d;
  --epx-muted: #566676;
  --epx-success: #1d7a4a;
  --epx-danger: #b42318;
  --epx-focus: #264462;
  --epx-track: #dde3ea;
  --epx-nummer-bg: #264462;
  --epx-nummer-text: #ffffff;
  --epx-shadow: 0 1px 2px rgba(16, 36, 58, 0.06), 0 6px 20px rgba(16, 36, 58, 0.06);
  --epx-radius: 12px;
  --epx-radius-gross: 16px;
}

@media (prefers-color-scheme: dark) {
  .epx-root.epx-schema-auto {
    --epx-primary: #3b6894;
    --epx-primary-ink: #a9c8e8;
    --epx-primary-soft: #1f3349;
    --epx-accent-soft: rgba(241, 128, 14, 0.14);
    --epx-accent-ink: #ffb066;
    --epx-bg: #111c27;
    --epx-surface: #172533;
    --epx-border: #2a3c4f;
    --epx-border-strong: #41566c;
    --epx-text: #e4ebf2;
    --epx-heading: #f3f7fb;
    --epx-muted: #a1b1c2;
    --epx-success: #63d297;
    --epx-danger: #ff8a80;
    --epx-focus: #a9c8e8;
    --epx-track: #2c3f53;
    --epx-nummer-bg: #3b6894;
    --epx-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}

.epx-root.epx-schema-dunkel {
  --epx-primary: #3b6894;
  --epx-primary-ink: #a9c8e8;
  --epx-primary-soft: #1f3349;
  --epx-accent-soft: rgba(241, 128, 14, 0.14);
  --epx-accent-ink: #ffb066;
  --epx-bg: #111c27;
  --epx-surface: #172533;
  --epx-border: #2a3c4f;
  --epx-border-strong: #41566c;
  --epx-text: #e4ebf2;
  --epx-heading: #f3f7fb;
  --epx-muted: #a1b1c2;
  --epx-success: #63d297;
  --epx-danger: #ff8a80;
  --epx-focus: #a9c8e8;
  --epx-track: #2c3f53;
  --epx-nummer-bg: #3b6894;
  --epx-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ---------- Grundlagen ---------- */

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

.epx-root {
  color: var(--epx-text);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.epx-root [hidden] {
  display: none !important;
}

.epx-root p {
  margin: 0;
}

.epx-root fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.epx-root legend {
  padding: 0;
}

.epx-sr-only,
.epx-root .epx-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.epx-root .epx-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.epx-root .epx-klein {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--epx-muted);
}

.epx-root .epx-label {
  display: block;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--epx-text);
}

.epx-root .epx-link,
.epx-root .epx-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--epx-primary-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.epx-root .epx-link:hover {
  color: var(--epx-accent-ink);
}

.epx-root .epx-link .epx-icon {
  width: 1em;
  height: 1em;
}

.epx-root a:focus-visible,
.epx-root button:focus-visible {
  outline: 3px solid var(--epx-focus);
  outline-offset: 2px;
}

/* ---------- Konfigurator ---------- */

.epx-konfigurator {
  container: epx / inline-size;
  margin: 0 0 1.5em;
  padding: clamp(16px, 3vw, 28px);
  background: var(--epx-bg);
  border: 1px solid var(--epx-border);
  border-radius: var(--epx-radius-gross);
  box-shadow: var(--epx-shadow);
}

.epx-root .epx-laden {
  display: grid;
  place-items: center;
  min-height: 280px;
  color: var(--epx-muted);
}

.epx-root .epx-layout {
  display: grid;
  gap: 28px;
}

@container epx (min-width: 780px) {
  .epx-root .epx-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
  }

  .epx-root .epx-zusammenfassung {
    position: sticky;
    top: var(--epx-sticky-top, 24px);
  }
}

.epx-root .epx-schritte {
  display: grid;
  gap: 28px;
  min-width: 0;
}

.epx-root .epx-schritt {
  min-width: 0;
}

.epx-root .epx-schritt + .epx-schritt {
  padding-top: 24px;
  border-top: 1px solid var(--epx-border);
}

.epx-root .epx-schritt-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--epx-heading);
  letter-spacing: 0;
  text-transform: none;
}

.epx-root .epx-nummer {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--epx-nummer-bg);
  color: var(--epx-nummer-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.epx-root .epx-gruppe + .epx-gruppe {
  margin-top: 20px;
}

.epx-root .epx-gruppe-titel {
  display: block;
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--epx-muted);
}

.epx-root .epx-fein-titel {
  margin-top: 22px;
}

/* ---------- Karten (Images, Größen, Laufzeiten) ---------- */

.epx-root .epx-raster {
  display: grid;
  gap: 10px;
}

.epx-root .epx-raster-images {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

.epx-root .epx-raster-presets {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.epx-root .epx-raster-laufzeiten {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.epx-root .epx-karte {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
}

.epx-root .epx-karte-inhalt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 14px 16px;
  background: var(--epx-bg);
  border: 1.5px solid var(--epx-border);
  border-radius: var(--epx-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.epx-root .epx-karte:hover .epx-karte-inhalt {
  border-color: var(--epx-border-strong);
}

.epx-root .epx-karte input:checked + .epx-karte-inhalt {
  background: var(--epx-accent-soft);
  border-color: var(--epx-accent);
  box-shadow: 0 0 0 1px var(--epx-accent);
}

.epx-root .epx-karte input:focus-visible + .epx-karte-inhalt {
  outline: 3px solid var(--epx-focus);
  outline-offset: 2px;
}

/* Haken oben rechts an der gewählten Karte */
.epx-root .epx-karte input:checked + .epx-karte-inhalt::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--epx-accent);
}

.epx-root .epx-karte input:checked + .epx-karte-inhalt::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 17px;
  width: 6px;
  height: 10px;
  border: solid var(--epx-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.epx-root .epx-karte-titel {
  padding-right: 24px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--epx-heading);
}

.epx-root .epx-karte-unter {
  font-size: 0.8125rem;
  color: var(--epx-muted);
}

.epx-root .epx-karte-image .epx-karte-inhalt {
  align-items: center;
  padding: 16px 10px 14px;
  text-align: center;
}

.epx-root .epx-karte-image .epx-karte-titel {
  padding-right: 0;
}

.epx-root .epx-logo-bild {
  display: block;
  line-height: 0;
}

.epx-root .epx-logo {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 0 6px;
  object-fit: contain;
}

.epx-root .epx-logo-initiale {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--epx-primary-soft);
  color: var(--epx-primary-ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

.epx-root .epx-preset-daten {
  display: grid;
  gap: 1px;
  font-size: 0.8125rem;
  color: var(--epx-muted);
}

.epx-root .epx-preset-preis {
  margin-top: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--epx-heading);
  font-variant-numeric: tabular-nums;
}

.epx-root .epx-laufzeit-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin-top: 4px;
}

.epx-root .epx-laufzeit-preis {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--epx-heading);
  font-variant-numeric: tabular-nums;
}

.epx-root .epx-laufzeit-einheit,
.epx-root .epx-laufzeit-liste,
.epx-root .epx-laufzeit-einmalig {
  font-size: 0.8125rem;
  color: var(--epx-muted);
}

.epx-root .epx-laufzeit-liste s {
  text-decoration-thickness: 1px;
}

.epx-root .epx-laufzeit-ersparnis {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--epx-success);
}

.epx-root .epx-laufzeit-ersparnis.epx-ohne {
  font-weight: 400;
  color: var(--epx-muted);
}

.epx-root .epx-laufzeit-einmalig {
  margin-top: auto;
  padding-top: 6px;
}

/* ---------- Hinweise ---------- */

.epx-root .epx-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--epx-primary-soft);
  border-radius: var(--epx-radius);
  color: var(--epx-text);
  font-size: 0.9375rem;
}

.epx-root .epx-hinweis > .epx-icon {
  margin-top: 1px;
  color: var(--epx-primary-ink);
}

.epx-root .epx-hinweis-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* ---------- Regler ---------- */

.epx-root .epx-reglerbox {
  display: grid;
  gap: 18px;
}

.epx-root .epx-regler-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.epx-root .epx-regler-wert {
  font-weight: 700;
  color: var(--epx-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.epx-root .epx-regler-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.epx-root .epx-regler-skala {
  display: flex;
  justify-content: space-between;
  padding: 0 54px;
  font-size: 0.75rem;
  color: var(--epx-muted);
}

.epx-root .epx-stepper {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: var(--epx-bg);
  border: 1.5px solid var(--epx-border-strong);
  border-radius: 50%;
  color: var(--epx-text);
  box-shadow: none;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.epx-root .epx-stepper:hover {
  background: var(--epx-surface);
  border-color: var(--epx-accent);
  color: var(--epx-text);
}

.epx-root .epx-stepper[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.epx-root .epx-stepper[aria-disabled="true"]:hover {
  background: var(--epx-bg);
  border-color: var(--epx-border-strong);
}

.epx-root .epx-regler-eingabe {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.epx-root .epx-regler-eingabe:focus {
  outline: none;
}

.epx-root .epx-regler-eingabe::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--epx-accent) 0, var(--epx-accent) var(--epx-fill, 0%), var(--epx-track) var(--epx-fill, 0%), var(--epx-track) 100%);
}

.epx-root .epx-regler-eingabe::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -10px;
  background: var(--epx-bg);
  border: 3px solid var(--epx-accent);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(16, 36, 58, 0.25);
  -webkit-appearance: none;
  appearance: none;
}

.epx-root .epx-regler-eingabe::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--epx-track);
}

.epx-root .epx-regler-eingabe::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--epx-accent);
}

.epx-root .epx-regler-eingabe::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--epx-bg);
  border: 3px solid var(--epx-accent);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(16, 36, 58, 0.25);
}

.epx-root .epx-regler-eingabe:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--epx-bg), 0 0 0 6px var(--epx-focus);
}

.epx-root .epx-regler-eingabe:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--epx-bg), 0 0 0 6px var(--epx-focus);
}

/* ---------- Eingabe Gutschein ---------- */

.epx-root .epx-eingabe {
  display: block;
  width: 100%;
  max-width: 340px;
  min-height: 46px;
  margin: 6px 0 0;
  padding: 10px 14px;
  background: var(--epx-bg);
  border: 1.5px solid var(--epx-border-strong);
  border-radius: 10px;
  box-shadow: none;
  color: var(--epx-text);
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.epx-root .epx-eingabe:focus {
  border-color: var(--epx-focus);
  outline: 3px solid var(--epx-focus);
  outline-offset: 1px;
}

/* ---------- Zusammenfassung ---------- */

.epx-root .epx-zusammenfassung {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  background: var(--epx-surface);
  border: 1px solid var(--epx-border);
  border-radius: var(--epx-radius);
}

.epx-root .epx-zf-titel {
  margin: 0;
  padding: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--epx-heading);
}

.epx-root .epx-zf-liste {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.epx-root .epx-zf-zeile {
  display: grid;
  grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
  gap: 10px;
  font-size: 0.875rem;
}

.epx-root .epx-zf-zeile dt {
  margin: 0;
  font-weight: 400;
  color: var(--epx-muted);
}

.epx-root .epx-zf-zeile dd {
  margin: 0;
  font-weight: 600;
  color: var(--epx-text);
  overflow-wrap: anywhere;
}

.epx-root .epx-zf-zeile dd.epx-offen {
  font-weight: 400;
  font-style: italic;
  color: var(--epx-muted);
}

.epx-root .epx-zf-preis {
  display: grid;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--epx-border);
}

.epx-root .epx-zf-preis-titel {
  font-size: 0.8125rem;
  color: var(--epx-muted);
}

.epx-root .epx-zf-preis-wert {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--epx-heading);
  font-variant-numeric: tabular-nums;
}

.epx-root .epx-zf-steuer {
  font-size: 0.8125rem;
  color: var(--epx-muted);
}

.epx-root .epx-zf-einmalig {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 0.875rem;
  color: var(--epx-muted);
}

.epx-root .epx-zf-einmalig strong {
  color: var(--epx-text);
  font-variant-numeric: tabular-nums;
}

.epx-root .epx-zf-fehler {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--epx-danger);
}

.epx-root .epx-zf-fehler:empty {
  display: none;
}

.epx-root .epx-zf-notiz {
  font-size: 0.8125rem;
  color: var(--epx-muted);
}

/* ---------- Knopf ---------- */

.epx-root .epx-button,
.epx-root .epx-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  margin: 0;
  padding: 12px 24px;
  background: var(--epx-accent);
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  color: var(--epx-on-accent);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.epx-root .epx-button:hover {
  background: var(--epx-accent-hover);
  color: var(--epx-on-accent);
  text-decoration: none;
}

.epx-root .epx-button:active {
  transform: translateY(1px);
}

.epx-root .epx-button:focus-visible {
  outline: 3px solid var(--epx-focus);
  outline-offset: 3px;
}

.epx-root .epx-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.epx-root .epx-button-voll {
  width: 100%;
}

/* ---------- Hinweis ohne Katalog ---------- */

.epx-root.epx-hinweis-box,
.epx-root .epx-hinweis-box {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin: 0 0 1.5em;
  padding: 20px;
  background: var(--epx-surface);
  border: 1px solid var(--epx-border);
  border-radius: var(--epx-radius);
  color: var(--epx-text);
}

.epx-root .epx-konfigurator .epx-hinweis-box,
.epx-konfigurator .epx-hinweis-box {
  margin: 0;
}

/* ---------- Laufzeiten-Tabelle ---------- */

.epx-root.epx-laufzeiten {
  margin: 0 0 1.5em;
}

.epx-root .epx-tabelle-rahmen {
  overflow-x: auto;
  background: var(--epx-bg);
  border: 1px solid var(--epx-border);
  border-radius: var(--epx-radius);
}

.epx-root .epx-tabelle {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
  color: var(--epx-text);
}

.epx-root .epx-tabelle th,
.epx-root .epx-tabelle td {
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--epx-border);
  text-align: left;
  vertical-align: top;
  color: var(--epx-text);
}

.epx-root .epx-tabelle thead th {
  background: var(--epx-surface);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--epx-muted);
}

.epx-root .epx-tabelle tbody th {
  font-weight: 700;
  color: var(--epx-heading);
}

.epx-root .epx-tabelle tbody tr:last-child th,
.epx-root .epx-tabelle tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- Standort ---------- */

.epx-root.epx-standort {
  margin: 0 0 1.5em;
  padding: clamp(18px, 3vw, 28px);
  background: var(--epx-surface);
  border: 1px solid var(--epx-border);
  border-radius: var(--epx-radius-gross);
}

.epx-root .epx-standort-titel {
  margin: 0 0 8px;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--epx-heading);
}

.epx-root .epx-standort-text {
  color: var(--epx-text);
}

.epx-root .epx-liste {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.epx-root .epx-liste li {
  position: relative;
  margin: 0;
  padding: 0 0 0 28px;
  color: var(--epx-text);
}

.epx-root .epx-liste li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--epx-accent-soft);
  border: 1.5px solid var(--epx-accent);
}

.epx-root .epx-liste li::after {
  content: "";
  position: absolute;
  top: calc(0.2em + 4px);
  left: 7px;
  width: 4px;
  height: 8px;
  border: solid var(--epx-accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.epx-root .epx-standort-cpu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--epx-border);
}

.epx-root .epx-standort-cpu-titel {
  color: var(--epx-muted);
}

.epx-root .epx-standort-cpu-wert {
  font-weight: 700;
  color: var(--epx-heading);
}

/* ---------- Preis im Fließtext ---------- */

.epx-preis-ab {
  white-space: nowrap;
}

/* ---------- Kleine Bildschirme ---------- */

@container epx (max-width: 420px) {
  .epx-root .epx-zf-zeile {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .epx-root .epx-regler-skala {
    padding: 0 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .epx-root *,
  .epx-root *::before,
  .epx-root *::after {
    transition: none !important;
  }
}

/* =====================================================================
 * 1.1.0: Eingebettet und Landingpage der Partner-Aktion
 * Formensprache von epnox.de: Überschriften in der Serifenschrift des
 * Themes, orange Marke mit Linie, helle (#eaeff9) und dunkle (#264462)
 * Bänder, Knöpfe in Orange mit weißer Schrift in Großbuchstaben.
 * ===================================================================== */

.epx-root {
  --epx-seite-hell: #eaeff9;
  --epx-seite-dunkel: #264462;
  --epx-seite-text: #264462;
  --epx-seite-marke: #f3912e;
  --epx-serif: "Source Serif Pro", Georgia, "Times New Roman", serif;
  --epx-knopf-schrift: var(--mfn-button-font-family, "Roboto"), "Lato", sans-serif;
}

/* Wie die übrigen Seiten: kein heller Streifen zwischen Kopfzeile und
   Aktion, der schwebende Kontakt-Knopf entfällt (Kontakt steht unten) */
body:has(.epx-aktion-seite) #Content {
  padding-top: 0 !important;
}

/* Kein heller Streifen zwischen letztem Abschnitt und Fußzeile */
.the_content_wrapper:has(> .epx-aktion-seite) {
  margin-bottom: 0 !important;
}

/* Sprunglinks (Produkte ansehen, So funktioniert es, Zusammenstellen)
   gleiten zum Abschnitt */
html:has(.epx-aktion-seite) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.epx-aktion-seite) {
    scroll-behavior: auto;
  }
}

body:has(.epx-aktion-seite) #epnox-fc {
  display: none !important;
}

/* Schnelles Tippen auf Plus und Minus zoomt auf dem Handy nicht */
.epx-root button,
.epx-root a,
.epx-root label,
.epx-root input,
.epx-root [role="tab"] {
  touch-action: manipulation;
}

.epx-root .epx-stepper {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- Konfigurator eingebettet (ohne Karte) ---------- */

.epx-konfigurator.epx-eingebettet {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.epx-eingebettet .epx-schritt-titel {
  font-family: var(--epx-serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--epx-seite-text);
}

.epx-eingebettet .epx-nummer {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1.5px solid var(--epx-accent);
  color: var(--epx-accent);
  font-family: inherit;
}

.epx-eingebettet .epx-schritt + .epx-schritt {
  border-top-color: rgba(38, 68, 98, 0.14);
}

.epx-eingebettet .epx-zusammenfassung {
  background: #ffffff;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(38, 68, 98, 0.08);
}

.epx-eingebettet .epx-zf-titel {
  font-family: var(--epx-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--epx-seite-text);
}

.epx-eingebettet .epx-button,
.epx-eingebettet .epx-button:visited,
.epx-aktion .epx-aktion-knopf,
.epx-aktion .epx-aktion-knopf:visited {
  min-height: 48px;
  padding: 12px 20px;
  background: var(--epx-accent);
  border-radius: 5px;
  color: #ffffff;
  font-family: var(--epx-knopf-schrift);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.epx-eingebettet .epx-button:hover,
.epx-aktion .epx-aktion-knopf:hover {
  background: #f39b44;
  color: #ffffff;
}

.epx-root .epx-vorgemerkt {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--epx-accent-soft);
  border-radius: 5px;
  color: var(--epx-accent-ink);
  font-size: 0.875rem;
}

/* Code laut Portal nicht gültig (1.1.4) */
.epx-root .epx-vorgemerkt.epx-ungueltig {
  background: transparent;
  border: 1px solid var(--epx-danger);
  color: var(--epx-danger);
}

/* ---------- Landingpage ---------- */

.epx-aktion {
  color: var(--epx-seite-text);
  font-size: 1rem;
  line-height: 1.5625;
}

/* Bänder über die volle Breite, auch in einem schmalen Inhaltsbereich */
.epx-aktion .epx-aktion-band {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(56px, 8vw, 104px) 0;
}

.epx-aktion .epx-aktion-innen {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

.epx-aktion .epx-aktion-hell {
  background: var(--epx-seite-hell);
}

.epx-aktion .epx-aktion-dunkel,
.epx-aktion .epx-aktion-kopf {
  background: var(--epx-seite-dunkel);
  color: #ffffff;
}

/* Marke wie "VISION" auf epnox.de: Linie vom Rand, orange Großbuchstaben,
   Lato 24 px mit 2,5 px Sperrung */
.epx-aktion .epx-aktion-marke {
  position: relative;
  margin: 0 0 18px;
  color: var(--epx-seite-marke);
  font-family: "Lato", sans-serif;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 2.5px;
  line-height: 1.125;
  text-transform: uppercase;
}

/* Linie wie .line-svg auf epnox.de: vom linken Bildschirmrand bis kurz vor
   die Marke, Farbe der Linien-Grafik (#f08012). Was links über den Rand
   hinausgeht, schneidet overflow-x: clip am body ab */
.epx-aktion .epx-aktion-marke::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 20px);
  width: 100vw;
  border-top: 1.5px solid #f08012;
  transform: translateY(-50%);
}

/* Auf dem Handy nur ein kurzes Stück am Rand, wie auf epnox.de */
@media (max-width: 699px) {
  .epx-aktion .epx-aktion-marke::before {
    right: calc(100% + 8px);
  }
}

.epx-aktion .epx-aktion-titel,
.epx-aktion .epx-aktion-h2,
.epx-aktion .epx-aktion-h3 {
  margin: 0;
  font-family: var(--epx-serif);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.epx-aktion .epx-aktion-titel {
  max-width: 820px;
  color: #ffffff;
  font-size: clamp(2.125rem, 4.2vw, 3.4375rem);
  line-height: 1.09;
}

.epx-aktion .epx-aktion-h2 {
  max-width: 760px;
  margin-bottom: 32px;
  color: var(--epx-seite-text);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.07;
}

.epx-aktion .epx-aktion-dunkel .epx-aktion-h2 {
  color: #ffffff;
}

.epx-aktion .epx-aktion-h3 {
  margin: 0 0 8px;
  color: var(--epx-seite-text);
  font-size: 1.375rem;
  line-height: 1.25;
}

.epx-aktion p {
  margin: 0 0 1em;
}

.epx-aktion a {
  color: inherit;
}

/* Kopf: schließt direkt an die blaue Kopfzeile an, Text auf Blau, rechts
   das Foto mit schräger Kante und darauf die Codekarte (seit 1.1.6), auf
   dem Handy beides unter dem Text. Unterkante schräg wie auf epnox.de */
.epx-aktion .epx-aktion-kopf {
  display: grid;
  padding: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
}

.epx-aktion .epx-aktion-kopf-text {
  padding: 32px clamp(20px, 4vw, 40px) 40px;
}

.epx-aktion .epx-aktion-kopf-bild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px clamp(20px, 4vw, 40px) 88px;
}

.epx-aktion .epx-aktion-kopf-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: 26% 45%;
}

@media (min-width: 900px) {
  .epx-aktion .epx-aktion-kopf {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    min-height: 600px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), 0 100%);
  }

  /* Text beginnt auf derselben Linie wie die Abschnitte darunter */
  .epx-aktion .epx-aktion-kopf-text {
    align-self: center;
    padding: 56px 56px 128px max(clamp(20px, 4vw, 40px), calc(50vw - 530px));
  }

  /* Karte endet rechts auf der Linie der Abschnitte und liegt über der
     schrägen Kante des Fotos */
  .epx-aktion .epx-aktion-kopf-bild {
    justify-content: flex-start;
    padding: 56px max(clamp(20px, 4vw, 40px), calc(50vw - 530px)) 128px 0;
  }

  .epx-aktion .epx-aktion-kopf-bild img {
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  }

  .epx-aktion .epx-aktion-kopf-ohne-bild .epx-aktion-kopf-bild {
    justify-content: center;
    padding-left: 0;
  }
}

.epx-aktion .epx-aktion-lead {
  max-width: 640px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.125rem;
}

.epx-aktion .epx-aktion-hervor {
  color: var(--epx-accent);
}

/* Vertrauenszeile unter dem Untertitel */
.epx-aktion .epx-aktion-vertrauen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 640px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.epx-aktion .epx-aktion-vertrauen li {
  position: relative;
  margin: 0;
  padding: 7px 14px 7px 30px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 5px;
  color: #ffffff;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.epx-aktion .epx-aktion-vertrauen li::before {
  content: "";
  position: absolute;
  top: calc(50% - 3.5px);
  left: 13px;
  width: 7px;
  height: 7px;
  background: var(--epx-accent);
}

/* Codekarte (1.1.6): weiße Karte mit Startguthaben, Codefeld und den
   wichtigsten Konditionen. Schrift im Feld 16 px, damit iOS nicht zoomt */
.epx-aktion .epx-aktion-codekarte {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 28px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(12, 28, 46, 0.35);
  color: var(--epx-seite-text);
}

.epx-aktion .epx-aktion-kartenmarke {
  margin: 0 0 4px;
  color: var(--epx-seite-marke);
  font-family: "Lato", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.epx-aktion .epx-aktion-betrag {
  margin: 0 0 18px;
  color: rgba(38, 68, 98, 0.75);
  font-size: 1.125rem;
}

.epx-aktion .epx-aktion-betrag strong {
  margin-right: 4px;
  color: var(--epx-seite-text);
  font-family: var(--epx-serif);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.1;
}

.epx-aktion .epx-aktion-codeform {
  margin: 0;
}

.epx-aktion .epx-aktion-codezeile {
  display: flex;
  gap: 8px;
}

.epx-root.epx-aktion input.epx-aktion-codefeld {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid rgba(38, 68, 98, 0.3);
  border-radius: 5px;
  box-shadow: none;
  color: var(--epx-seite-text);
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.epx-root.epx-aktion input.epx-aktion-codefeld::placeholder {
  color: rgba(38, 68, 98, 0.55);
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}

.epx-root.epx-aktion input.epx-aktion-codefeld:focus {
  border-color: var(--epx-accent);
  outline: 3px solid rgba(241, 128, 14, 0.35);
  outline-offset: 1px;
}

.epx-root.epx-aktion button.epx-aktion-codeknopf {
  flex: 0 0 auto;
  min-height: 48px;
  margin: 0;
  padding: 10px 18px;
  background: var(--epx-accent);
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  color: #ffffff;
  font-family: var(--epx-knopf-schrift);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
}

.epx-root.epx-aktion button.epx-aktion-codeknopf:focus-visible {
  outline: 3px solid var(--epx-seite-dunkel);
  outline-offset: 2px;
}

/* Hover nur mit Maus, auf dem Handy bliebe er nach dem Antippen stehen */
@media (hover: hover) {
  .epx-root.epx-aktion button.epx-aktion-codeknopf:hover {
    background: #f39b44;
  }
}

.epx-aktion .epx-aktion-codestatus {
  display: block;
  min-height: 0.75em;
  margin-top: 8px;
  color: rgba(38, 68, 98, 0.8);
  font-size: 0.875rem;
  line-height: 1.45;
}

.epx-aktion .epx-aktion-codestatus.epx-gueltig {
  color: var(--epx-success);
  font-weight: 700;
}

.epx-aktion .epx-aktion-codestatus.epx-ungueltig {
  color: var(--epx-danger);
  font-weight: 700;
}

/* Haken in Orange, aus zwei Rändern gezeichnet */
.epx-aktion .epx-aktion-haken {
  margin: 8px 0 18px;
  padding: 0;
  list-style: none;
}

.epx-aktion .epx-aktion-haken li {
  position: relative;
  margin: 0 0 6px;
  padding-left: 26px;
  color: var(--epx-seite-text);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.epx-aktion .epx-aktion-haken li::before {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 4px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--epx-accent);
  border-bottom: 2px solid var(--epx-accent);
  transform: rotate(45deg);
}

.epx-aktion .epx-aktion-kartenfuss {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(38, 68, 98, 0.12);
  color: rgba(38, 68, 98, 0.75);
  font-size: 0.875rem;
}

.epx-aktion .epx-aktion-kartenfuss a {
  color: var(--epx-seite-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.epx-aktion .epx-aktion-kartenfuss a:hover {
  color: var(--epx-accent);
}

.epx-aktion .epx-aktion-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin: 32px 0 0;
}

.epx-aktion .epx-aktion-knopf {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.epx-aktion .epx-aktion-link {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Produktübersicht */
.epx-aktion .epx-aktion-spalten {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .epx-aktion .epx-aktion-spalten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
  }
}

.epx-aktion .epx-aktion-produkt {
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  border-top: 2px solid var(--epx-accent);
}

.epx-aktion .epx-aktion-merkmale {
  flex-grow: 1;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.epx-aktion .epx-aktion-merkmale li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 18px;
}

.epx-aktion .epx-aktion-merkmale li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--epx-accent);
}

.epx-aktion .epx-aktion-preis {
  margin: 0 0 16px;
  font-weight: 700;
}

.epx-aktion .epx-aktion-mehr,
.epx-aktion .epx-aktion-mehr:visited {
  align-self: flex-start;
  color: var(--epx-accent);
  font-family: var(--epx-knopf-schrift);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: underline;
  text-transform: uppercase;
  text-underline-offset: 5px;
}

.epx-aktion .epx-aktion-mehr:hover {
  color: var(--epx-seite-text);
}

/* Konfigurator auf weißem Grund, Zusammenfassung im hellen Ton der Seite */
.epx-aktion .epx-aktion-konfig .epx-aktion-reiter [role="tab"] {
  background: var(--epx-seite-hell);
}

.epx-aktion .epx-aktion-konfig .epx-aktion-reiter [role="tab"][aria-selected="true"] {
  background: var(--epx-accent);
}

.epx-aktion .epx-aktion-konfig .epx-eingebettet .epx-zusammenfassung {
  background: var(--epx-seite-hell);
  box-shadow: none;
}

/* Ablauf */
.epx-aktion .epx-aktion-schritte {
  display: grid;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 780px) {
  .epx-aktion .epx-aktion-schritte {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
  }
}

.epx-aktion .epx-aktion-schritt {
  margin: 0;
  padding: 0;
}

.epx-aktion .epx-aktion-zahl {
  display: block;
  margin-bottom: 12px;
  color: var(--epx-accent);
  font-family: var(--epx-serif);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
}

/* Konfigurator mit Reitern */
.epx-aktion .epx-aktion-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
}

.epx-aktion .epx-aktion-reiter [role="tab"] {
  margin: 0;
  padding: 12px 20px;
  background: #ffffff;
  border: 0;
  border-radius: 5px;
  color: var(--epx-accent);
  font: inherit;
  font-family: var(--epx-knopf-schrift);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.epx-aktion .epx-aktion-reiter [role="tab"][aria-selected="true"] {
  background: var(--epx-accent);
  color: #ffffff;
}

.epx-aktion .epx-aktion-reiter [role="tab"]:focus-visible {
  outline: 3px solid var(--epx-seite-dunkel);
  outline-offset: 2px;
}

.epx-aktion .epx-aktion-fussnote {
  margin: 28px 0 0;
  color: rgba(38, 68, 98, 0.75);
  font-size: 0.875rem;
}

.epx-aktion .epx-aktion-fussnote a {
  text-decoration: underline;
}

/* Abschnitte ab 1.1.6 nach dem Überarbeitungskonzept */
.epx-aktion .epx-aktion-dunkel .epx-aktion-h3 {
  color: #ffffff;
}

.epx-aktion .epx-aktion-einleitung {
  max-width: 680px;
  margin: -12px 0 40px;
  font-size: 1.125rem;
}

.epx-aktion .epx-aktion-dunkel .epx-aktion-einleitung {
  color: rgba(255, 255, 255, 0.88);
}

/* Gleicher Hintergrund wie der Abschnitt davor: kein doppelter Abstand */
.epx-aktion .epx-aktion-band.epx-aktion-anschluss {
  padding-top: 0;
}

/* Infrastruktur: Kacheln links, Schaubild rechts */
.epx-aktion .epx-aktion-infra-raster {
  display: grid;
  gap: 32px;
}

@media (min-width: 900px) {
  .epx-aktion .epx-aktion-infra-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: center;
  }
}

.epx-aktion .epx-aktion-kacheln {
  display: grid;
  gap: 16px;
}

.epx-aktion .epx-aktion-kachel {
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--epx-accent);
  border-radius: 6px;
}

.epx-aktion .epx-aktion-kachel .epx-aktion-h3 {
  margin-bottom: 6px;
  font-size: 1.25rem;
}

.epx-aktion .epx-aktion-kachel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

.epx-aktion .epx-aktion-schaubild {
  margin: 0;
  padding: clamp(12px, 2vw, 24px);
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

.epx-aktion .epx-aktion-schaubild svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: "Lato", sans-serif;
}

.epx-aktion .epx-sb-cluster {
  fill: rgba(255, 255, 255, 0.03);
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}

.epx-aktion .epx-sb-host {
  fill: rgba(255, 255, 255, 0.08);
  stroke: rgba(255, 255, 255, 0.4);
}

.epx-aktion .epx-sb-ausfall {
  fill: rgba(241, 128, 14, 0.16);
  stroke: var(--epx-accent);
  stroke-dasharray: 4 3;
}

.epx-aktion .epx-sb-rz {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.35);
}

.epx-aktion .epx-sb-zylinder {
  fill: rgba(255, 255, 255, 0.07);
  stroke: #ffffff;
  stroke-width: 1.5;
}

.epx-aktion .epx-sb-linie {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.5;
}

.epx-aktion .epx-sb-neustart {
  fill: none;
  stroke: var(--epx-accent);
  stroke-width: 1.8;
}

.epx-aktion .epx-sb-sync {
  stroke: var(--epx-accent);
  stroke-width: 2;
}

.epx-aktion .epx-sb-spitze {
  fill: var(--epx-accent);
}

.epx-aktion .epx-sb-text,
.epx-aktion .epx-sb-klein,
.epx-aktion .epx-sb-titel,
.epx-aktion .epx-sb-marke {
  fill: #ffffff;
}

.epx-aktion .epx-sb-text {
  font-size: 14px;
  font-weight: 700;
}

.epx-aktion .epx-sb-klein {
  font-size: 12.5px;
}

.epx-aktion .epx-sb-titel {
  font-family: var(--epx-serif);
  font-size: 15px;
  font-weight: 600;
}

.epx-aktion .epx-sb-marke {
  fill: var(--epx-seite-marke);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

.epx-aktion .epx-sb-hell {
  fill: rgba(255, 255, 255, 0.72);
}

.epx-aktion .epx-sb-orange {
  fill: var(--epx-accent);
}

.epx-aktion .epx-sb-fett {
  font-weight: 700;
}

.epx-aktion .epx-aktion-infra-fuss {
  max-width: 900px;
  margin: 40px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
}

/* Argumente: Tabelle auf Weiß, Spalte epnox hervorgehoben. Hintergründe
   und Ränder ausdrücklich, das Theme streift Tabellen */
.epx-aktion table.epx-aktion-vergleich {
  width: 100%;
  margin: 0;
  background: #ffffff;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(38, 68, 98, 0.08);
  overflow: hidden;
}

.epx-aktion table.epx-aktion-vergleich th,
.epx-aktion table.epx-aktion-vergleich td {
  padding: 18px 22px;
  background: #ffffff !important;
  border: 0;
  border-bottom: 1px solid rgba(38, 68, 98, 0.1);
  box-shadow: none !important;
  color: rgba(38, 68, 98, 0.8);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}

.epx-aktion table.epx-aktion-vergleich thead th {
  color: rgba(38, 68, 98, 0.7);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.epx-aktion table.epx-aktion-vergleich thead .epx-aktion-vergleich-epnox {
  background: var(--epx-seite-dunkel) !important;
  color: #ffffff;
}

.epx-aktion table.epx-aktion-vergleich tbody th {
  width: 24%;
  color: var(--epx-seite-text);
  font-weight: 700;
}

.epx-aktion table.epx-aktion-vergleich tbody .epx-aktion-vergleich-epnox {
  background: #f4f7fc !important;
  color: var(--epx-seite-text);
  font-weight: 700;
}

.epx-aktion table.epx-aktion-vergleich tbody tr:last-child > * {
  border-bottom: 0;
}

/* Auf dem Handy wird jede Zeile ein Block mit Überschrift */
@media (max-width: 699px) {
  .epx-aktion table.epx-aktion-vergleich,
  .epx-aktion table.epx-aktion-vergleich tbody,
  .epx-aktion table.epx-aktion-vergleich tr,
  .epx-aktion table.epx-aktion-vergleich th,
  .epx-aktion table.epx-aktion-vergleich td {
    display: block;
    width: auto;
  }

  .epx-aktion table.epx-aktion-vergleich thead {
    display: none;
  }

  .epx-aktion table.epx-aktion-vergleich tr {
    border-bottom: 1px solid rgba(38, 68, 98, 0.12);
  }

  .epx-aktion table.epx-aktion-vergleich tbody tr:last-child {
    border-bottom: 0;
  }

  .epx-aktion table.epx-aktion-vergleich th,
  .epx-aktion table.epx-aktion-vergleich td {
    padding: 4px 18px;
    border: 0;
  }

  .epx-aktion table.epx-aktion-vergleich tbody th {
    width: auto;
    padding-top: 16px;
  }

  .epx-aktion table.epx-aktion-vergleich tbody td:last-child {
    margin: 4px 0 16px;
    padding: 8px 18px;
  }

  .epx-aktion table.epx-aktion-vergleich td::before {
    content: attr(data-titel);
    display: block;
    color: rgba(38, 68, 98, 0.6);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
}

/* Teilnahmebedingungen: Felder mit feinem Rahmen */
.epx-aktion .epx-aktion-bedingungen .epx-aktion-h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
}

.epx-aktion .epx-aktion-felder {
  display: grid;
  margin: 0;
  border: 1px solid rgba(38, 68, 98, 0.14);
  border-radius: 8px;
  overflow: hidden;
}

.epx-aktion .epx-aktion-felder > div {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(38, 68, 98, 0.14);
}

.epx-aktion .epx-aktion-felder > div:last-child {
  border-bottom: 0;
}

@media (min-width: 700px) {
  .epx-aktion .epx-aktion-felder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .epx-aktion .epx-aktion-felder > div:nth-child(odd) {
    border-right: 1px solid rgba(38, 68, 98, 0.14);
  }

  .epx-aktion .epx-aktion-felder > div:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}

.epx-aktion .epx-aktion-felder dt {
  margin: 0 0 6px;
  color: var(--epx-seite-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.epx-aktion .epx-aktion-felder dd {
  margin: 0;
}

/* Partner werden: Stufen als weiße Karten, darunter Ansprechpartner und
   Rückruf-Formular */
.epx-aktion .epx-aktion-spalten.epx-aktion-stufen {
  gap: 24px;
}

.epx-aktion .epx-aktion-stufe {
  padding: 26px 28px;
  background: #ffffff;
  border-top: 3px solid var(--epx-accent);
  border-radius: 8px;
}

.epx-aktion .epx-aktion-stufe p {
  margin: 0;
}

.epx-aktion .epx-aktion-stufe .epx-aktion-stufennummer {
  margin: 0 0 6px;
  color: var(--epx-seite-marke);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.epx-aktion .epx-aktion-partnerkontakt {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

@media (min-width: 900px) {
  .epx-aktion .epx-aktion-partnerkontakt {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

.epx-aktion .epx-aktion-person {
  padding: 32px;
  background: var(--epx-seite-dunkel);
  border-radius: 8px;
  color: #ffffff;
}

.epx-aktion .epx-aktion-personkopf {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.epx-aktion .epx-aktion-foto {
  display: block;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
}

.epx-aktion .epx-aktion-person p {
  margin: 0 0 6px;
}

.epx-aktion .epx-aktion-name {
  color: #ffffff;
  font-family: var(--epx-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

.epx-aktion .epx-aktion-person .epx-aktion-funktion {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
}

.epx-aktion .epx-aktion-person a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.epx-aktion .epx-aktion-person a:hover {
  color: var(--epx-accent);
}

.epx-aktion .epx-aktion-person .epx-aktion-persontext {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.88);
}

/* Rückruf-Formular aus Contact Form 7, eigene Überschrift statt der des
   Popups */
.epx-aktion .epx-aktion-formular {
  padding: 32px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(38, 68, 98, 0.08);
}

.epx-aktion .epx-aktion-formular > .epx-aktion-h3 {
  margin-bottom: 20px;
}

.epx-aktion .epx-aktion-formular .epnox-form-header,
.epx-aktion .epx-aktion-formular br {
  display: none;
}

.epx-aktion .epx-aktion-formular .epnox-row {
  display: grid;
  gap: 0 16px;
}

@media (min-width: 700px) {
  .epx-aktion .epx-aktion-formular .epnox-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.epx-aktion .epx-aktion-formular form p {
  margin: 0 0 14px;
}

.epx-aktion .epx-aktion-formular label {
  display: block;
  margin: 0 0 6px;
  color: var(--epx-seite-text);
  font-size: 0.9375rem;
  font-weight: 700;
}

.epx-aktion .epx-aktion-formular .req {
  color: var(--epx-accent);
}

.epx-aktion .epx-aktion-formular .opt {
  color: rgba(38, 68, 98, 0.6);
  font-weight: 400;
}

.epx-aktion .epx-aktion-formular input[type="text"],
.epx-aktion .epx-aktion-formular input[type="email"],
.epx-aktion .epx-aktion-formular input[type="tel"],
.epx-aktion .epx-aktion-formular select,
.epx-aktion .epx-aktion-formular textarea {
  width: 100% !important;
  min-height: 46px;
  margin: 0;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(38, 68, 98, 0.3);
  border-radius: 5px;
  box-shadow: none;
  color: var(--epx-seite-text);
  font: inherit;
  font-size: 1rem;
}

/* Das Theme gibt Auswahllisten einen grauen Grund und kleine Schrift */
.epx-aktion .epx-aktion-formular .wpcf7-form-control-wrap select {
  height: auto !important;
  background-color: #ffffff !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

.epx-aktion .epx-aktion-formular textarea {
  height: 110px;
  resize: vertical;
}

.epx-aktion .epx-aktion-formular input:focus,
.epx-aktion .epx-aktion-formular select:focus,
.epx-aktion .epx-aktion-formular textarea:focus {
  border-color: var(--epx-accent);
  outline: 3px solid rgba(241, 128, 14, 0.35);
  outline-offset: 1px;
}

.epx-aktion .epx-aktion-formular input[type="submit"] {
  min-height: 48px;
  margin: 4px 0 0;
  padding: 12px 22px;
  background: var(--epx-accent);
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  color: #ffffff;
  font-family: var(--epx-knopf-schrift);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.epx-aktion .epx-aktion-formular input[type="submit"]:hover {
  background: #f39b44;
}

.epx-aktion .epx-aktion-formular .epnox-privacy {
  margin: 0;
  color: rgba(38, 68, 98, 0.7);
  font-size: 0.875rem;
}

.epx-aktion .epx-aktion-formular .epnox-privacy a {
  text-decoration: underline;
}

.epx-aktion .epx-aktion-formular .wpcf7-not-valid-tip {
  margin-top: 4px;
  color: var(--epx-danger);
  font-size: 0.875rem;
}

.epx-aktion .epx-aktion-formular .wpcf7-response-output {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 0.9375rem;
}

/* Eigenes Rückruf-Formular (1.1.8): zwei Felder je Zeile, Datenschutz
   links und Knopf rechts, Lockfeld für Bots unsichtbar */
.epx-aktion .epx-aktion-formular .epx-rr-zeile {
  display: grid;
  gap: 0 16px;
}

@media (min-width: 700px) {
  .epx-aktion .epx-aktion-formular .epx-rr-zeile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.epx-aktion .epx-aktion-formular .epx-rr-falle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.epx-aktion .epx-aktion-formular .epx-rr-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 4px;
}

.epx-aktion .epx-aktion-formular .epx-rr-fuss p {
  margin: 0;
}

.epx-aktion .epx-aktion-formular button.epx-rr-knopf {
  min-height: 48px;
  margin: 0;
  padding: 12px 26px;
  background: var(--epx-accent);
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  color: #ffffff;
  font-family: var(--epx-knopf-schrift);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
}

.epx-aktion .epx-aktion-formular button.epx-rr-knopf:focus-visible {
  outline: 3px solid var(--epx-seite-dunkel);
  outline-offset: 2px;
}

@media (hover: hover) {
  .epx-aktion .epx-aktion-formular button.epx-rr-knopf:hover {
    background: #f39b44;
  }
}

.epx-aktion .epx-aktion-formular .epx-rr-meldung {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 6px;
  border-left: 3px solid var(--epx-success);
  background: rgba(29, 122, 74, 0.08);
}

.epx-aktion .epx-aktion-formular .epx-rr-meldung.epx-rr-fehler {
  border-left-color: var(--epx-danger);
  background: rgba(180, 35, 24, 0.07);
}

.epx-aktion .epx-aktion-formular .epx-rr-meldung p {
  margin: 0;
}

/* Wer wir sind: Text mit Liste links, Kennzahlen rechts */
.epx-aktion .epx-aktion-zweispaltig {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .epx-aktion .epx-aktion-zweispaltig {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
  }
}

.epx-aktion .epx-aktion-ueber .epx-aktion-merkmale {
  margin: 20px 0 0;
}

.epx-aktion .epx-aktion-kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.epx-aktion .epx-aktion-kennzahlen > div {
  padding: 22px 24px;
  border: 1px solid rgba(38, 68, 98, 0.14);
  border-top: 3px solid var(--epx-accent);
  border-radius: 8px;
}

.epx-aktion .epx-aktion-kennzahlen dt {
  margin: 0;
  color: var(--epx-seite-text);
  font-family: var(--epx-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
}

.epx-aktion .epx-aktion-kennzahlen dd {
  margin: 6px 0 0;
  color: rgba(38, 68, 98, 0.75);
  font-size: 0.9375rem;
}

.epx-aktion .epx-aktion-referenzen-titel {
  margin-top: 24px;
  font-weight: 700;
}

.epx-aktion .epx-aktion-referenzen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Häufige Fragen als Akkordeon, das Plus dreht sich beim Öffnen */
.epx-aktion .epx-aktion-akkordeon {
  max-width: 900px;
  border-top: 1px solid rgba(38, 68, 98, 0.16);
}

.epx-aktion .epx-aktion-frage {
  border-bottom: 1px solid rgba(38, 68, 98, 0.16);
}

.epx-aktion .epx-aktion-frage summary {
  position: relative;
  padding: 20px 44px 20px 0;
  color: var(--epx-seite-text);
  font-family: var(--epx-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.epx-aktion .epx-aktion-frage summary::-webkit-details-marker {
  display: none;
}

.epx-aktion .epx-aktion-frage summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  color: var(--epx-accent);
  font-family: "Lato", sans-serif;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

.epx-aktion .epx-aktion-frage[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.epx-aktion .epx-aktion-frage summary:focus-visible {
  outline: 3px solid var(--epx-accent);
  outline-offset: 2px;
}

.epx-aktion .epx-aktion-frage p {
  max-width: 780px;
  margin: 0 0 20px;
}

/* Anker-Menü der Kampagnenseite (eigenes Menü in Betheme): der Menüpunkt
   mit der CSS-Klasse epx-menue-knopf wird zum orangen Knopf */
body:has(.epx-aktion-seite) #menu li.epx-menue-knopf > a > span {
  padding: 10px 18px !important;
  background: #f1800e;
  border-radius: 5px;
  color: #ffffff !important;
  font-weight: 700;
  line-height: 1.3 !important;
}

body:has(.epx-aktion-seite) #menu li.epx-menue-knopf > a:hover > span {
  background: #f39b44;
}

/* Bestellseite [epnox_bestellen] (1.1.7): Reiter und Konfiguratoren ohne
   eigenes Band in einem Abschnitt der Seite. Beim Sprung über ?produkt=
   bleibt der Reiter unter der festen Kopfzeile sichtbar */
.epx-aktion.epx-bestellen .epx-aktion-reiter {
  scroll-margin-top: 140px;
}

/* Produktübersicht [epnox_produkte] (1.1.8): drei schlichte weiße Karten wie die
   früheren Paketkarten auf epnox.de, darunter kompakte Kacheln für die
   Leistungen auf Anfrage */
.epx-aktion.epx-produktwelt {
  text-align: left;
}

.epx-aktion .epx-pw-karten {
  display: grid;
  gap: 24px;
  margin: 0 0 56px;
}

@media (min-width: 900px) {
  .epx-aktion .epx-pw-karten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.epx-aktion .epx-pw-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 28px 28px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.epx-aktion .epx-pw-karte .epx-aktion-h3 {
  margin-bottom: 8px;
  font-size: 1.5rem;
}

.epx-aktion .epx-pw-karte p {
  margin: 0;
}

.epx-aktion .epx-pw-kurz {
  color: rgba(38, 68, 98, 0.8);
}

.epx-aktion .epx-pw-karte .epx-pw-preis {
  margin-top: 18px;
  color: var(--epx-accent);
  line-height: 1.1;
}

.epx-aktion .epx-pw-preis strong {
  font-size: 2rem;
  font-weight: 700;
}

.epx-aktion .epx-pw-ab {
  font-size: 1.125rem;
  font-weight: 700;
}

.epx-aktion .epx-pw-karte .epx-pw-preiszusatz {
  margin-top: 6px;
  color: rgba(38, 68, 98, 0.7);
  font-size: 0.875rem;
  font-style: italic;
}

.epx-aktion a.epx-pw-knopf,
.epx-aktion a.epx-pw-knopf:visited {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  margin: 22px 0 12px;
  padding: 11px 26px;
  background: var(--epx-accent);
  border-radius: 5px;
  color: #ffffff;
  font-family: var(--epx-knopf-schrift);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.epx-aktion a.epx-pw-knopf:hover {
  background: #f39b44;
  color: #ffffff;
}

.epx-aktion a.epx-pw-info,
.epx-aktion a.epx-pw-info:visited {
  color: var(--epx-seite-text);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.epx-aktion a.epx-pw-info:hover {
  color: var(--epx-accent);
}

.epx-aktion .epx-pw-anfragetitel {
  margin-bottom: 16px;
  font-size: 1.375rem;
}

.epx-aktion .epx-pw-anfrage {
  display: grid;
  gap: 12px;
}

@media (min-width: 600px) {
  .epx-aktion .epx-pw-anfrage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .epx-aktion .epx-pw-anfrage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.epx-aktion a.epx-pw-kachel,
.epx-aktion a.epx-pw-kachel:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 6px;
  color: var(--epx-seite-text);
  font-weight: 700;
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

.epx-aktion a.epx-pw-kachel:hover {
  box-shadow: 0 4px 14px rgba(38, 68, 98, 0.12);
  color: var(--epx-seite-text);
}

.epx-aktion .epx-pw-pfeil {
  color: var(--epx-accent);
  font-size: 1.25rem;
  line-height: 1;
}

.epx-aktion .epx-pw-weiteres {
  margin: 20px 0 0;
  color: rgba(38, 68, 98, 0.8);
  font-size: 0.9375rem;
}

.epx-aktion .epx-pw-weiteres a {
  color: var(--epx-seite-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Vollbreite Bänder ohne seitliches Scrollen (Rollbalken zählt zu 100vw) */
body:has(.epx-aktion-seite) {
  overflow-x: clip;
}