/* =========================================================
   ZAYTEK – RECHTLICHE SEITEN
   Für Impressum und Datenschutz
   ========================================================= */


/* ---------- Grundbereich ---------- */

.legal-main {
  position: relative;
  overflow: hidden;

  min-height: 70vh;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(244, 180, 0, 0.11),
      transparent 380px
    ),
    #f5f4ef;
}


/* ---------- Inhaltscontainer ---------- */

.legal-page {
    position: relative;
    z-index: 1;

    max-width: 1000px;
    margin: 0 auto;

    padding: 90px 32px 100px;
}


/* ---------- Hauptüberschrift ---------- */

.legal-page > h1 {
  position: relative;

  margin: 0 0 64px;
  padding-bottom: 24px;

  color: #0a0a0a;

  font-family:
    "Barlow Semi Condensed",
    "Arial Narrow",
    Arial,
    sans-serif;

  font-size: clamp(3rem, 7vw, 5.4rem);
  font-weight: 800;
  line-height: 0.95;

  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.legal-page > h1::before {
  content: "Rechtliche Informationen";

  display: block;

  margin-bottom: 17px;

  color: #c88e00;

  font-family:
    "Public Sans",
    Arial,
    sans-serif;

  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.3;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.legal-page > h1::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 0;

  width: 82px;
  height: 5px;

  background: #f4b400;
}


/* ---------- Abschnittsüberschriften ---------- */

.legal-page h2 {
  position: relative;

  margin: 46px 0 18px;
  padding: 19px 22px 19px 27px;

  color: #0a0a0a;
  background: #ffffff;

  border-top: 1px solid #e3e1d8;
  border-right: 1px solid #e3e1d8;
  border-bottom: 1px solid #e3e1d8;
  border-left: 5px solid #f4b400;

  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.045);

  font-family:
    "Barlow Semi Condensed",
    "Arial Narrow",
    Arial,
    sans-serif;

  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.legal-page h1 + h2 {
  margin-top: 0;
}


/* ---------- Kleinere Überschriften ---------- */

.legal-page h3 {
  margin: 34px 0 12px;

  color: #17171a;

  font-family:
    "Barlow Semi Condensed",
    "Arial Narrow",
    Arial,
    sans-serif;

  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.legal-page h4 {
  margin: 27px 0 10px;

  color: #17171a;

  font-family:
    "Barlow Semi Condensed",
    "Arial Narrow",
    Arial,
    sans-serif;

  font-size: 1.08rem;
  font-weight: 700;
}


/* ---------- Texte ---------- */

.legal-page p {
  margin: 0 0 20px;

  color: #55555b;

  font-size: 1rem;
  line-height: 1.8;
}

.legal-page h2 + p,
.legal-page h3 + p,
.legal-page h4 + p {
  margin-top: 0;
}

.legal-page strong {
  color: #17171a;
  font-weight: 700;
}


/* ---------- Links ---------- */

.legal-page a {
  color: #9c7000;

  font-weight: 650;

  text-decoration: underline;
  text-decoration-color: rgba(196, 139, 0, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;

  overflow-wrap: anywhere;

  transition:
    color 180ms ease,
    text-decoration-color 180ms ease;
}

.legal-page a:hover {
  color: #0a0a0a;
  text-decoration-color: #f4b400;
}


/* ---------- Listen ---------- */

.legal-page ul,
.legal-page ol {
  margin: 0 0 24px;
  padding-left: 26px;

  color: #55555b;
}

.legal-page li {
  margin-bottom: 9px;
  padding-left: 4px;

  line-height: 1.75;
}

.legal-page li::marker {
  color: #d99c00;
  font-weight: 700;
}


/* ---------- Verschachtelte Listen ---------- */

.legal-page ul ul,
.legal-page ol ol,
.legal-page ul ol,
.legal-page ol ul {
  margin-top: 10px;
  margin-bottom: 10px;
}


/* ---------- Trennlinie ---------- */

.legal-page hr {
  height: 1px;

  margin: 46px 0;

  background: #dedcd3;
  border: 0;
}


/* ---------- Tabellen, falls Datenschutz sie enthält ---------- */

.legal-page table {
  width: 100%;

  margin: 25px 0 34px;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid #dfddd4;
  border-collapse: collapse;
}

.legal-page th,
.legal-page td {
  padding: 14px 16px;

  border: 1px solid #dfddd4;

  text-align: left;
  vertical-align: top;
}

.legal-page th {
  color: #0a0a0a;
  background: #f4b400;

  font-family:
    "Barlow Semi Condensed",
    Arial,
    sans-serif;

  font-weight: 700;
}

.legal-page td {
  color: #55555b;
}


/* ---------- Infobox ---------- */

.legal-notice {
  margin: 30px 0;
  padding: 22px 24px;

  color: #4d400d;
  background: #fff8dd;

  border: 1px solid rgba(217, 156, 0, 0.38);
  border-left: 5px solid #f4b400;

  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.04);
}

.legal-notice p:last-child {
  margin-bottom: 0;
}


/* ---------- Kontaktbox ---------- */

.legal-contact {
  margin: 30px 0;
  padding: 25px;

  color: #eeeeee;
  background: #151515;

  border-left: 5px solid #f4b400;
}

.legal-contact h2,
.legal-contact h3 {
  margin-top: 0;
  padding: 0;

  color: #f4b400;
  background: transparent;

  border: 0;
  box-shadow: none;
}

.legal-contact p {
  color: #d0d0d0;
}

.legal-contact a {
  color: #f4b400;
}

.legal-contact strong {
  color: #ffffff;
}


/* ---------- Lange Wörter und E-Mail-Adressen ---------- */

.legal-page {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.legal-page code {
  padding: 2px 6px;

  background: #ebe9e1;
  border-radius: 3px;

  font-family: monospace;
  font-size: 0.9em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .legal-page {
    max-width: 780px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {
  .legal-main::before {
    height: 5px;

    background: linear-gradient(
      90deg,
      #f4b400 0%,
      #f4b400 35%,
      transparent 35%,
      transparent 100%
    );
  }

  .legal-page {
    padding-top: 62px;
    padding-bottom: 70px;
  }

  .legal-page > h1 {
    margin-bottom: 44px;
    padding-bottom: 20px;
  }

  .legal-page > h1::before {
    margin-bottom: 13px;

    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .legal-page > h1::after {
    width: 66px;
    height: 4px;
  }

  .legal-page h2 {
    margin-top: 36px;
    margin-bottom: 16px;

    padding: 16px 15px 16px 19px;

    border-left-width: 4px;
  }

  .legal-page h3 {
    margin-top: 29px;
  }

  .legal-page p {
    line-height: 1.72;
  }

  .legal-page ul,
  .legal-page ol {
    padding-left: 22px;
  }

  .legal-page table {
    display: block;

    overflow-x: auto;

    white-space: nowrap;
  }

  .legal-notice,
  .legal-contact {
    padding: 19px;
  }
}


/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 480px) {
  .legal-page > h1 {
    font-size: 2.75rem;
  }

  .legal-page h2 {
    font-size: 1.15rem;
  }

  .legal-page p,
  .legal-page li {
    font-size: 0.96rem;
  }
}


/* ---------- Reduzierte Animationen ---------- */

@media (prefers-reduced-motion: reduce) {
  .legal-page a {
    transition: none;
  }
}