/* ============================================================= */
/*	Color Scheme */
/* ============================================================= */
/* Ersetzen Sie folgende Farben (Hex-Werte) durch Ihre Unternehmensfarben */
:root {
  --primary-color: #dc0032;
  /* Primär Farbe */
  --secondary-color: #cac4be;
  /* Sekundär Farbe */
  --color-bar-background: #ffffff;
  /* Hintergrundfarbe für Farbleiste */
  --color-bar-font-color: #dc0032;
  /* Farbleiste Schrift Farbe */
  --color-bar-divider-color: #dc0032;
  /* Farbleiste Trennstrich Farbe */
  --base-font-color: #414042;
  /* Schrift Farbe */
  --h1-font-color: #dc0032;
  /* Schrift Farbe Titel H1 */
  --h2-font-color: #dc0032;
  /* Schrift Farbe Titel H2 */
  --h3-font-color: #dc0032;
  /* Schrift Farbe Titel H3 */
  --link-font-color: #dc0032;
  /* Schrift Farbe Hyperlink */
  --link-font-color-hover: #dc0032;
  /* Schrift Farbe Hyperlink bei mouseover */
  --border-color: #cac4be;
  /* Farbe Trennlinie */
  --table-highlight-color: #000000;
  /* Textfarbe für jede zweite Zeile einer Tabelle */
  --table-highlight-background: #cac4be;
  /* Hintergrundfarbe für jede zweite Zeile einer Tabelle */
  --card-backside-background: #ffffff;
  /* Karte mit Titel, Text und CTA - Rückseite Hintergrundfarbe */
  --card-backside-font-color: #cac4be;
  /* Karte mit Titel, Text und CTA - Rückseite Textfarbe */
  --form-field-active-background: #dc0032;
  /* Formularfeld Hintergrundfarbe für aktive Felder (Checkbox, Radio, NPS, ...) */
  --form-field-active-font-color: #dc0032;
  /* Formularfeld Schriftfarbe für aktive Felder (Checkbox, Radio, NPS, ...) */
  --form-field-border: #808285;
  /* Formular Rahmen Farbe */
  --form-field-background: #ffffff;
  /* Formularfeld Hintergrundfarbe */
  --form-field-font-color: #000000;
  /* Formularfeld Textfarbe */
  --form-color: #000000;
  /* Formular Text Farbe */
  --navigation-background-color: #ffffff;
  /* Navigation Hintergrundfarbe */
  --navigation-text-color: #cac4be;
  /* Navigation Text Farbe */
  --header-background: #ffffff;
  /* Header Hintergrund */
  --header-text-color: #000000;
  /* Header Hintergrund */
  --header-scene-text-color: #ffffff;
  /* Text Farbe für Bildüberschrift im Header */
  --footer-background: #cac4be;
  /* Footer Hintergrund Farbe */
  --footer-text-color: #414042;
  /* Footer Text Farbe */
  --background-site: #ffffff;
  /* Hintergrundfarbe der Seite */
  --text-primary-bg: #ffffff;
  /* Text-Farbe auf Primär Hintergrund */
  --text-secondary-bg: #000000;
  /* Text-Farbe auf Sekundär Hintergrund */
  --background-content: #ffffff;
  /* Hintergrundfarbe für Inhalt */
  --button-color: #a90034;
  /* Farbe für Button */
}
/* ============================================================= */
/*	Color Definition */
/* ============================================================= */
body {
  background: var(--background-site);
}
body,
h4,
h5,
p {
  color: var(--base-font-color);
}
h1 {
  color: var(--h1-font-color);
}
h2 {
  color: var(--h2-font-color);
}
h3 {
  color: var(--h3-font-color);
}
a {
  color: var(--link-font-color);
}
a:hover,
a:focus {
  color: var(--link-font-color);
}
/* BUTTON */
.button a {
  background: var(--button-color);
  border: 1px solid var(--button-color);
  color: var(--text-primary-bg);
}
/* BUTTON */
.image-button a {
  color: var(--text-primary-bg);
}
/* Trenner */
.divider {
  border-bottom: 1px solid var(--border-color);
}
/* Hervorgehobener Inhalt Primär-Farbe
   =================================== */
.primary-color-bg {
  background: var(--primary-color);
}
.primary-color-bg,
.primary-color-bg p,
.primary-color-bg h1,
.primary-color-bg h2,
.primary-color-bg h3,
.primary-color-bg h4,
.primary-color-bg h5,
.primary-color-bg ul li,
.primary-color-bg ol li,
.primary-color-bg a,
.primary-color-bg .image-legend {
  color: var(--text-primary-bg);
}
.primary-color-bg .button a {
  background: var(--text-primary-bg);
  border: 1px solid var(--text-primary-bg);
  color: var(--primary-color);
}
.primary-color-bg .divider {
  border-bottom: 1px solid var(--text-primary-bg);
}
/* Hervorgehobener Inhalt Sekundär-Farbe
   =================================== */
.secondary-color-bg {
  background: var(--secondary-color);
}
.secondary-color-bg,
.secondary-color-bg p,
.secondary-color-bg h1,
.secondary-color-bg h2,
.secondary-color-bg h3,
.secondary-color-bg h4,
.secondary-color-bg h5,
.secondary-color-bg ul li,
.secondary-color-bg ol li,
.secondary-color-bg a,
.secondary-color-bg .image-legend {
  color: var(--text-secondary-bg);
}
.secondary-color-bg .button a {
  background: var(--text-secondary-bg);
  border: 1px solid var(--text-secondary-bg);
  color: var(--secondary-color);
}
.secondary-color-bg .divider {
  border-bottom: 1px solid var(--text-secondary-bg);
}
/* Hervorgehobener Inhalt Sekundär-Farbe
  ====================================== */
.secondary-color-bg {
  background: var(--secondary-color);
}
/* Formular Farben
================================= */
::-webkit-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
:-ms-input-placeholder {
  color: var(--form-field-font-color);
}
textarea,
input,
select,
.form-button-container a {
  border: 1px solid var(--border-color);
  color: var(--form-field-font-color);
}

textarea:focus,
input:focus,
select:focus {
    border-color: var(--form-field-active-background);
    outline: none;
}

textarea:invalid,
input:invalid,
select:invalid {
    border-color: var(--border-color);
}
input[type='reset'] {
  color: var(--form-field-font-color);
}
.form-button-container a,
.footer .form-button-container a,
input[type='submit'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: var(--text-primary-bg);
  color: var(--form-field-font-color);
}
form input[type='radio']:checked + label:before,
form input[type='radio']:not(checked) + label:before,
form input[type='checkbox']:checked + label:before,
form input[type='checkbox']:not(checked) + label:before {
  color: var(--form-field-border);
}
form input[type='checkbox']:not(checked) + label,
form input[type='radio']:not(checked) + label {
  color: var(--form-color);
}
/* Header Farben
============================================= */
.header {
  background: var(--header-background);
  color: var(--header-text-color);
}
/* Footer Farben
============================================= */
.footer-bottom,
.footer a,
.footer p {
  background: var(--footer-background);
  color: var(--footer-text-color);
}
.footer .footer-social a {
  color: var(--primary-color);
}

/* ============================================================= */
/* StyleConfig: Button-Farbe (button-color)                       */
/* ============================================================= */
.btn-dpd-red .button a {
  background: #dc0032;
  border-color: #dc0032;
  color: #ffffff;
}
.btn-dpd-red .button a:hover {
  background: #b0002a;
  border-color: #b0002a;
}
.btn-dpd-black .button a {
  background: #414042;
  border-color: #414042;
  color: #ffffff;
}
.btn-dpd-black .button a:hover {
  background: #2c2b2d;
  border-color: #2c2b2d;
}
.btn-dark-green .button a {
  background: #509e2f;
  border-color: #509e2f;
  color: #ffffff;
}
.btn-dark-green .button a:hover {
  background: #3f7d25;
  border-color: #3f7d25;
}
.btn-mid-grey .button a {
  background: #808285;
  border-color: #808285;
  color: #ffffff;
}
.btn-mid-grey .button a:hover {
  background: #6a6c6e;
  border-color: #6a6c6e;
}

/* ============================================================= */
/* StyleConfig: Überschrift-Farbe (heading-color)                 */
/* ============================================================= */
.heading-dpd-red h1,
.heading-dpd-red h2,
.heading-dpd-red h3 {
  color: #dc0032;
}
.heading-dpd-black h1,
.heading-dpd-black h2,
.heading-dpd-black h3 {
  color: #414042;
}
.heading-dark-green h1,
.heading-dark-green h2,
.heading-dark-green h3 {
  color: #509e2f;
}
.heading-mid-grey h1,
.heading-mid-grey h2,
.heading-mid-grey h3 {
  color: #808285;
}

/* ============================================================= */
/* StyleConfig: Hintergrundfarbe (highlight-bg)                   */
/* ============================================================= */

/* Dunkle Hintergründe → weisser Text, invertierter Button */
.flex-teaser.bg-dpd-red > .row > .flex > .element {
  background: #dc0032;
}
.flex-teaser.bg-dpd-red .element,
.flex-teaser.bg-dpd-red .element p,
.flex-teaser.bg-dpd-red .element h1,
.flex-teaser.bg-dpd-red .element h2,
.flex-teaser.bg-dpd-red .element h3,
.flex-teaser.bg-dpd-red .element h4,
.flex-teaser.bg-dpd-red .element h5,
.flex-teaser.bg-dpd-red .element ul li,
.flex-teaser.bg-dpd-red .element ol li,
.flex-teaser.bg-dpd-red .element a,
.flex-teaser.bg-dpd-red .element .image-legend {
  color: #ffffff;
}
.flex-teaser.bg-dpd-red .element .button a {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #dc0032;
}
.flex-teaser.bg-dpd-red .element .divider {
  border-bottom-color: #ffffff;
}

.flex-teaser.bg-dpd-black > .row > .flex > .element {
  background: #414042;
}
.flex-teaser.bg-dpd-black .element,
.flex-teaser.bg-dpd-black .element p,
.flex-teaser.bg-dpd-black .element h1,
.flex-teaser.bg-dpd-black .element h2,
.flex-teaser.bg-dpd-black .element h3,
.flex-teaser.bg-dpd-black .element h4,
.flex-teaser.bg-dpd-black .element h5,
.flex-teaser.bg-dpd-black .element ul li,
.flex-teaser.bg-dpd-black .element ol li,
.flex-teaser.bg-dpd-black .element a,
.flex-teaser.bg-dpd-black .element .image-legend {
  color: #ffffff;
}
.flex-teaser.bg-dpd-black .element .button a {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #414042;
}
.flex-teaser.bg-dpd-black .element .divider {
  border-bottom-color: #ffffff;
}

.flex-teaser.bg-dark-green > .row > .flex > .element {
  background: #509e2f;
}
.flex-teaser.bg-dark-green .element,
.flex-teaser.bg-dark-green .element p,
.flex-teaser.bg-dark-green .element h1,
.flex-teaser.bg-dark-green .element h2,
.flex-teaser.bg-dark-green .element h3,
.flex-teaser.bg-dark-green .element h4,
.flex-teaser.bg-dark-green .element h5,
.flex-teaser.bg-dark-green .element ul li,
.flex-teaser.bg-dark-green .element ol li,
.flex-teaser.bg-dark-green .element a,
.flex-teaser.bg-dark-green .element .image-legend {
  color: #ffffff;
}
.flex-teaser.bg-dark-green .element .button a {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #509e2f;
}
.flex-teaser.bg-dark-green .element .divider {
  border-bottom-color: #ffffff;
}

/* Helle Hintergründe → dunkler Text */
.flex-teaser.bg-warm-grey > .row > .flex > .element {
  background: #cac4be;
}
.flex-teaser.bg-warm-grey .element,
.flex-teaser.bg-warm-grey .element p,
.flex-teaser.bg-warm-grey .element h1,
.flex-teaser.bg-warm-grey .element h2,
.flex-teaser.bg-warm-grey .element h3,
.flex-teaser.bg-warm-grey .element h4,
.flex-teaser.bg-warm-grey .element h5,
.flex-teaser.bg-warm-grey .element ul li,
.flex-teaser.bg-warm-grey .element ol li,
.flex-teaser.bg-warm-grey .element a,
.flex-teaser.bg-warm-grey .element .image-legend {
  color: #414042;
}
.flex-teaser.bg-warm-grey .element .button a {
  background: #414042;
  border: 1px solid #414042;
  color: #ffffff;
}
.flex-teaser.bg-warm-grey .element .divider {
  border-bottom-color: #414042;
}

.flex-teaser.bg-light-grey > .row > .flex > .element {
  background: #e6e7e8;
}
.flex-teaser.bg-light-grey .element,
.flex-teaser.bg-light-grey .element p,
.flex-teaser.bg-light-grey .element h1,
.flex-teaser.bg-light-grey .element h2,
.flex-teaser.bg-light-grey .element h3,
.flex-teaser.bg-light-grey .element h4,
.flex-teaser.bg-light-grey .element h5,
.flex-teaser.bg-light-grey .element ul li,
.flex-teaser.bg-light-grey .element ol li,
.flex-teaser.bg-light-grey .element a,
.flex-teaser.bg-light-grey .element .image-legend {
  color: #414042;
}
.flex-teaser.bg-light-grey .element .button a {
  background: #414042;
  border: 1px solid #414042;
  color: #ffffff;
}
.flex-teaser.bg-light-grey .element .divider {
  border-bottom-color: #414042;
}

.flex-teaser.bg-white > .row > .flex > .element {
  background: #ffffff;
}
.flex-teaser.bg-white .element,
.flex-teaser.bg-white .element p,
.flex-teaser.bg-white .element h1,
.flex-teaser.bg-white .element h2,
.flex-teaser.bg-white .element h3,
.flex-teaser.bg-white .element h4,
.flex-teaser.bg-white .element h5,
.flex-teaser.bg-white .element ul li,
.flex-teaser.bg-white .element ol li,
.flex-teaser.bg-white .element a,
.flex-teaser.bg-white .element .image-legend {
  color: #414042;
}
.flex-teaser.bg-white .element .button a {
  background: #414042;
  border: 1px solid #414042;
  color: #ffffff;
}
.flex-teaser.bg-white .element .divider {
  border-bottom-color: #414042;
}

/* ============================================================= */
/* StyleConfig: Trennlinien-Farbe (divider-color)                 */
/* ============================================================= */
.divider-warm-grey .divider {
  border-bottom-color: #cac4be;
}
.divider-dpd-red .divider {
  border-bottom-color: #dc0032;
}
.divider-light-grey .divider {
  border-bottom-color: #e6e7e8;
}
.divider-mid-grey .divider {
  border-bottom-color: #808285;
}