/* Datenschutz-Seite: lokale Schriftdatei fuer alte Builder-Ueberschriften laden. */
@font-face {
  /* Schriftname, den die alten Builder-Regeln verwenden. */
  font-family: "exo 2";
  /* Text bleibt sichtbar, waehrend die Schrift laedt. */
  font-display: swap;
  /* Schrift wird lokal vom eigenen Server geladen, nicht extern. */
  src: url("/media/uploads/et-fonts/Exo-SemiBold.ttf") format("truetype");
}

/* Datenschutz-Seite: erster alter Builder-Kontaktblock. */
body.datenschutz-page .ui_section_1.ui_section {
  /* Abstand oben wie im urspruenglichen Builder-Layout erhalten. */
  padding-top: 83px;
  /* Abstand unten wie im urspruenglichen Builder-Layout erhalten. */
  padding-bottom: 0;
  /* Hintergrund hell setzen, damit kein dunkler Block erscheint. */
  background-color: #ffffff !important;
  /* Sicherstellen, dass auf dieser Seite kein Hintergrundbild erscheint. */
  background-image: none !important;
}

/* Datenschutz-Seite: zweite alte Builder-Sektion neutral halten. */
body.datenschutz-page .ui_section_2.ui_section {
  /* Kleinen oberen Abstand aus dem alten Layout behalten. */
  padding-top: 6px;
  /* Kleinen unteren Abstand aus dem alten Layout behalten. */
  padding-bottom: 9px;
}

/* Datenschutz-Seite: unterer alter Builder-Kontaktblock. */
body.datenschutz-page .ui_section_3.ui_section {
  /* Kleinen oberen Abstand aus dem alten Layout behalten. */
  padding-top: 6px;
  /* Kleinen unteren Abstand aus dem alten Layout behalten. */
  padding-bottom: 9px;
  /* Hintergrund hell setzen, damit kein dunkler Block erscheint. */
  background-color: #ffffff !important;
  /* Sicherstellen, dass auf dieser Seite kein Hintergrundbild erscheint. */
  background-image: none !important;
}

/* Datenschutz-Seite: globale Builder-Hintergruende auf Weiss setzen. */
body.datenschutz-page .ui_with_background {
  /* Hintergrund hell setzen, wenn eine Builder-Klasse Hintergrund erzwingen will. */
  background: #ffffff !important;
  /* Hintergrundbilder gezielt abschalten. */
  background-image: none !important;
}

/* Datenschutz-Seite: obere Builder-Zeile ohne Zusatzabstand. */
body.datenschutz-page .ui_row_1.ui_row {
  /* Oberen Abstand entfernen. */
  padding-top: 0 !important;
  /* Unteren Abstand entfernen. */
  padding-bottom: 0 !important;
}

/* Datenschutz-Seite: Kontaktzeile mittig und mit leichtem Abstand. */
body.datenschutz-page .ui_row_2.ui_row {
  /* Abstand oben fuer den Kontaktblock. */
  padding-top: 18px !important;
  /* Leichtes Hochziehen aus dem alten Layout uebernehmen. */
  margin-top: -4px !important;
  /* Zeile horizontal zentrieren. */
  margin-right: auto !important;
  /* Zeile horizontal zentrieren. */
  margin-left: auto !important;
}

/* Datenschutz-Seite: grosse CTA-Ueberschrift im alten Builder-Block. */
body.datenschutz-page .ui_text_1 h2 {
  /* Lokale Exo-Schrift fuer den alten Block verwenden. */
  font-family: "exo 2", Helvetica, Arial, Lucida, sans-serif;
  /* Ruhiges Schriftgewicht setzen. */
  font-weight: 500;
  /* Ueberschriftengroesse aus dem alten Layout behalten. */
  font-size: 36px;
  /* Lesbare Zeilenhoehe fuer die Ueberschrift setzen. */
  line-height: 1.2;
  /* Text dunkel setzen, weil der Hintergrund jetzt hell ist. */
  color: #1d1d1b !important;
}

/* Datenschutz-Seite: CTA-Textblock begrenzen und zentrieren. */
body.datenschutz-page .ui_text_1 {
  /* Unteren Abstand entfernen. */
  margin-bottom: 0 !important;
  /* Breite begrenzen, damit die Zeile gut lesbar bleibt. */
  max-width: 550px;
}

/* Datenschutz-Seite: CTA-Modul mittig stellen. */
body.datenschutz-page .ui_text_1.ui_module {
  /* Modul links automatisch ausrichten. */
  margin-left: auto !important;
  /* Modul rechts automatisch ausrichten. */
  margin-right: auto !important;
}

/* Datenschutz-Seite: Trenner auf hellem Hintergrund sichtbar halten. */
body.datenschutz-page .ui_divider_0::before {
  /* Dezente dunkle Linie statt weisser Linie verwenden. */
  border-top-color: rgba(29, 29, 27, 0.12) !important;
}

/* Datenschutz-Seite: Text in dunklen alten Builder-Modulen auf dunkel umstellen. */
body.datenschutz-page .ui_bg_layout_dark,
body.datenschutz-page .ui_text_2.ui_text,
body.datenschutz-page .ui_text_3.ui_text {
  /* Dunkler Text fuer hellen Hintergrund. */
  color: #1d1d1b !important;
}

/* Datenschutz-Seite: Kontakttexte mit ruhiger Zeilenhoehe. */
body.datenschutz-page .ui_text_2 {
  /* Gute Lesbarkeit im Kontaktblock. */
  line-height: 1.8;
  /* Abstand oben aus dem alten Layout behalten. */
  padding-top: 18px !important;
  /* Leichten oberen Rand aus dem alten Layout behalten. */
  margin-top: 3px !important;
  /* Unteren Abstand aus dem alten Layout behalten. */
  margin-bottom: 15px !important;
}

/* Datenschutz-Seite: Listen in Kontakttexten ohne Aufzaehlungszeichen. */
body.datenschutz-page .ui_text_2 ul,
body.datenschutz-page .ui_text_3 ul {
  /* Alte Builder-Listen optisch als reine Textgruppen darstellen. */
  list-style-type: none !important;
}

/* Datenschutz-Seite: Listeneintraege in Kontakttexten zentrieren. */
body.datenschutz-page .ui_text_2 ul li,
body.datenschutz-page .ui_text_3 ul li {
  /* Projekt-Schrift fuer Kontaktlisten verwenden. */
  font-family: "Poppins", sans-serif;
  /* Text mittig ausrichten. */
  text-align: center;
}

/* Datenschutz-Seite: Kontakt-Ueberschriften dunkel und lesbar. */
body.datenschutz-page .ui_text_2 h2,
body.datenschutz-page .ui_text_3 h2,
body.datenschutz-page .ui_text_2 h3,
body.datenschutz-page .ui_module_header {
  /* Dunkle Ueberschriften fuer hellen Hintergrund. */
  color: #1d1d1b !important;
}

/* Datenschutz-Seite: mittlere Kontakt-Ueberschrift formatieren. */
body.datenschutz-page .ui_text_2 h2 {
  /* Ueberschriftengroesse aus dem alten Layout behalten. */
  font-size: 24px;
  /* Zeilenhoehe angenehm halten. */
  line-height: 1.5;
  /* Text mittig ausrichten. */
  text-align: center;
}

/* Datenschutz-Seite: dritte Kontaktspalte mit ruhiger Zeilenhoehe. */
body.datenschutz-page .ui_text_3 {
  /* Gute Lesbarkeit im Kontaktblock. */
  line-height: 1.8;
  /* Unteren Abstand aus dem alten Layout behalten. */
  margin-bottom: 15px !important;
}

/* Datenschutz-Seite: dritte Kontakt-Ueberschrift formatieren. */
body.datenschutz-page .ui_text_3 h2 {
  /* Projekt-Schrift fuer Kontakt-Ueberschrift verwenden. */
  font-family: "Poppins", sans-serif;
  /* Ueberschriftengroesse aus dem alten Layout behalten. */
  font-size: 24px;
  /* Zeilenhoehe angenehm halten. */
  line-height: 1.4;
  /* Text mittig ausrichten. */
  text-align: center;
}

/* Datenschutz-Seite: alte CTA-Module transparent lassen. */
body.datenschutz-page .ui_cta_0.ui_promo {
  /* Kein eigener Hintergrund im CTA-Modul. */
  background-color: rgba(0, 0, 0, 0);
  /* Oberen Innenabstand aus dem alten Layout behalten. */
  padding-top: 11px !important;
  /* Unteren Innenabstand aus dem alten Layout behalten. */
  padding-bottom: 9px !important;
}

/* Datenschutz-Seite: zweites CTA-Modul mit altem Abstand. */
body.datenschutz-page .ui_cta_1.ui_promo {
  /* Oberen Innenabstand aus dem alten Layout behalten. */
  padding-top: 12px !important;
  /* Unteren Innenabstand aus dem alten Layout behalten. */
  padding-bottom: 16px !important;
}

/* Datenschutz-Seite: Builder-Buttons gelb halten, wenn diese Spezialbuttons genutzt werden. */
body.datenschutz-page #page-container .ui_section .ui_cta_0.ui_promo .ui_promo_button.ui_button,
body.datenschutz-page #page-container .ui_section .ui_cta_1.ui_promo .ui_promo_button.ui_button {
  /* Buttontext dunkel fuer Kontrast auf Gelb. */
  color: #000000 !important;
  /* Gelben Builder-Button aus dem alten Layout behalten. */
  background-color: #ffc02d;
}

/* Datenschutz-Seite: einzelner Builder-Button mit Abstand. */
body.datenschutz-page .ui_button_0_wrapper {
  /* Oberen Abstand aus dem alten Layout behalten. */
  margin-top: 10px !important;
  /* Unteren Abstand aus dem alten Layout behalten. */
  margin-bottom: 17px !important;
}

/* Datenschutz-Seite: Button-Animationen weich halten. */
body.datenschutz-page .ui_button_0,
body.datenschutz-page .ui_button_0::after {
  /* Alte Builder-Transition fuer Hover-Zustaende behalten. */
  transition: all 300ms ease 0ms;
}

/* Datenschutz-Seite: das globale Hero-Hintergrundbild auf dieser Seite entfernen. */
body.datenschutz-page .ui_section_0 .ui_row_0 > .ui_column:last-child {
  /* Spalte hell setzen. */
  background: #ffffff !important;
  /* Das von style-neutral.css kommende hero.webp abschalten. */
  background-image: none !important;
}

/* Datenschutz-Seite: Overlay des entfernten Hintergrundbildes ebenfalls entfernen. */
body.datenschutz-page .ui_section_0 .ui_row_0 > .ui_column:last-child::after {
  /* Pseudo-Overlay komplett ausblenden. */
  display: none !important;
}

/* Datenschutz-Seite: Tablet-Regeln fuer alte Builder-Buttons. */
@media only screen and (max-width: 980px) {
  /* Datenschutz-Seite: Icon-Platzhalter auf Tablet anzeigen koennen. */
  body.datenschutz-page #page-container .ui_section .ui_cta_0.ui_promo .ui_promo_button.ui_button::after,
  body.datenschutz-page #page-container .ui_section .ui_cta_1.ui_promo .ui_promo_button.ui_button::after {
    /* Pseudo-Element im Layout behalten. */
    display: inline-block;
    /* Standardmaessig unsichtbar halten. */
    opacity: 0;
  }

  /* Datenschutz-Seite: Icon-Platzhalter beim Hover sichtbar machen. */
  body.datenschutz-page #page-container .ui_section .ui_cta_0.ui_promo .ui_promo_button.ui_button:hover::after,
  body.datenschutz-page #page-container .ui_section .ui_cta_1.ui_promo .ui_promo_button.ui_button:hover::after {
    /* Pseudo-Element beim Hover einblenden. */
    opacity: 1;
  }
}

/* Datenschutz-Seite: Smartphone-Regeln fuer alte Builder-Buttons. */
@media only screen and (max-width: 767px) {
  /* Datenschutz-Seite: Kontaktzeile mobil ohne oberen Abstand. */
  body.datenschutz-page .ui_row_2.ui_row {
    /* Oberen Abstand mobil entfernen. */
    padding-top: 0 !important;
  }

  /* Datenschutz-Seite: Icon-Platzhalter mobil anzeigen koennen. */
  body.datenschutz-page #page-container .ui_section .ui_cta_0.ui_promo .ui_promo_button.ui_button::after,
  body.datenschutz-page #page-container .ui_section .ui_cta_1.ui_promo .ui_promo_button.ui_button::after {
    /* Pseudo-Element im Layout behalten. */
    display: inline-block;
    /* Standardmaessig unsichtbar halten. */
    opacity: 0;
  }

  /* Datenschutz-Seite: Icon-Platzhalter mobil beim Hover sichtbar machen. */
  body.datenschutz-page #page-container .ui_section .ui_cta_0.ui_promo .ui_promo_button.ui_button:hover::after,
  body.datenschutz-page #page-container .ui_section .ui_cta_1.ui_promo .ui_promo_button.ui_button:hover::after {
    /* Pseudo-Element beim Hover einblenden. */
    opacity: 1;
  }
}

/* 2026 Datenschutz-Neulayout: lesbarer Inhalt statt enger Builder-Spalte. */
body.datenschutz-page .datenschutz-main {
  background: #fff;
  overflow-x: hidden;
}

body.datenschutz-page,
body.datenschutz-page * {
  box-sizing: border-box;
}

body.datenschutz-page {
  max-width: 100%;
  overflow-x: hidden;
}

body.datenschutz-page .topbar,
body.datenschutz-page .site-header,
body.datenschutz-page .site-main,
body.datenschutz-page .site-footer,
body.datenschutz-page .container,
body.datenschutz-page .nav-row,
body.datenschutz-page .topbar-inner,
body.datenschutz-page .footer-row-extended {
  max-width: 100%;
  overflow-x: hidden;
}

body.datenschutz-page .datenschutz-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
  border-top: 6px solid #e30613;
  border-bottom: 1px solid rgba(17, 24, 39, .1);
  background: #fff;
  overflow: hidden;
}

body.datenschutz-page .datenschutz-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .9rem;
  padding: clamp(2rem, 4.8vw, 4.8rem);
}

body.datenschutz-page .datenschutz-hero-copy h1 {
  margin: 0;
  color: #111;
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: 0;
}

body.datenschutz-page .datenschutz-hero-copy h1::after {
  content: "";
  display: block;
  width: 92px;
  height: 4px;
  margin: 1rem 0 0;
  background: #e30613;
  box-shadow: 24px 0 0 #111;
}

body.datenschutz-page .datenschutz-hero-copy p {
  max-width: 38rem;
  margin: 0;
  color: #4b5563;
  font-size: 1.04rem;
  line-height: 1.75;
}

body.datenschutz-page .datenschutz-hero-copy .btn {
  align-self: flex-start;
  margin-top: .4rem;
}

body.datenschutz-page .datenschutz-hero-media {
  min-height: clamp(360px, 42vw, 600px);
  background: #f3f4f6;
}

body.datenschutz-page .datenschutz-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}

body.datenschutz-page .datenschutz-content {
  width: min(980px, calc(100% - 32px));
  margin: clamp(2rem, 4vw, 3.4rem) auto;
  display: grid;
  gap: 1rem;
}

body.datenschutz-page .datenschutz-card {
  padding: clamp(1.15rem, 2.4vw, 1.8rem);
  border: 1px solid rgba(17, 24, 39, .1);
  border-left: 5px solid #e30613;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(17, 24, 39, .055);
}

body.datenschutz-page .datenschutz-card h2 {
  margin: 0 0 .65rem;
  color: #111 !important;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: 0;
}

body.datenschutz-page .datenschutz-card p {
  margin: 0 0 .8rem;
  color: #4b5563 !important;
  font-size: 1rem;
  line-height: 1.78;
}

body.datenschutz-page .datenschutz-card p:last-child {
  margin-bottom: 0;
}

body.datenschutz-page .datenschutz-card a {
  color: #b9000b;
  font-weight: 700;
  overflow-wrap: anywhere;
}

body.datenschutz-page .datenschutz-contact {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto clamp(2rem, 4vw, 3.4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: clamp(1.3rem, 2.5vw, 2rem);
  border-radius: 8px;
  background: #111;
  color: #fff;
}

body.datenschutz-page .datenschutz-contact h2 {
  margin: 0 0 .35rem;
  color: #fff !important;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

body.datenschutz-page .datenschutz-contact p {
  margin: 0;
  color: rgba(255, 255, 255, .78) !important;
  line-height: 1.6;
}

body.datenschutz-page .datenschutz-contact .btn {
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  body.datenschutz-page .datenschutz-hero {
    grid-template-columns: 1fr;
  }

  body.datenschutz-page .datenschutz-hero-copy {
    padding: 2rem 1.35rem;
  }

  body.datenschutz-page .datenschutz-hero-media {
    min-height: 260px;
  }

  body.datenschutz-page .datenschutz-contact {
    align-items: flex-start;
    flex-direction: column;
  }

  body.datenschutz-page .datenschutz-contact .btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  body.datenschutz-page .datenschutz-content,
  body.datenschutz-page .datenschutz-contact {
    width: min(100% - 24px, 980px);
  }

  body.datenschutz-page .datenschutz-card {
    padding: 1rem;
  }

  body.datenschutz-page .datenschutz-card p {
    font-size: .96rem;
    line-height: 1.7;
  }
}