/* =========================================================
   datenschutz.css
   ---------------------------------------------------------
   NUR FÜR DIE DATENSCHUTZ-SEITE
   ---------------------------------------------------------
   Diese Datei baut auf style.css auf und ergänzt nur
   die Bereiche, die speziell für die Datenschutzerklärung
   gebraucht werden.
   ========================================================= */


/* =========================================================
   1) HERO-BEREICH FÜR RECHTLICHE SEITEN
   ---------------------------------------------------------
   Etwas kompakter, damit der Text schneller sichtbar ist.
   ========================================================= */
.hero-legal {
  padding-bottom: 6px;
}


/* =========================================================
   2) WRAPPER FÜR DEN RECHTLICHEN INHALT
   ---------------------------------------------------------
   Begrenzte Breite für bessere Lesbarkeit.
   ========================================================= */
.legal {
  max-width: 980px;
}


/* =========================================================
   3) EINZELNE KARTEN / ABSCHNITTE
   ---------------------------------------------------------
   Jeder Datenschutz-Abschnitt liegt in einer eigenen Karte.
   ========================================================= */
.legal-card {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
  margin: 14px 0;
  transition:
    transform 0.14s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

/* leichter Hover-Effekt */
.legal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.08);
  border-color: rgba(16, 207, 199, 0.22);
}


/* =========================================================
   4) ÜBERSCHRIFTEN IN DEN KARTEN
   ---------------------------------------------------------
   Klare und kräftige Zwischenüberschriften.
   ========================================================= */
.legal-card h2 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  line-height: 1.2;
  color: rgba(15, 23, 42, 0.96);
}


/* =========================================================
   5) ABSÄTZE
   ---------------------------------------------------------
   Grundstil für Texte in den Datenschutz-Karten.
   ========================================================= */
.legal-card p {
  margin: 0;
  color: rgba(15, 23, 42, 0.86);
  line-height: 1.75;
}

/* Abstand zwischen mehreren Absätzen */
.legal-card p + p {
  margin-top: 10px;
}


/* =========================================================
   6) GEDÄMPFTE TEXTE
   ---------------------------------------------------------
   Für Fließtext, Hinweise und rechtliche Erklärungen.
   ========================================================= */
.legal-muted {
  color: var(--muted);
}


/* =========================================================
   7) LINKS
   ---------------------------------------------------------
   Sichtbar, aber ruhig und passend zum Gesamtstil.
   ========================================================= */
.legal-link {
  color: rgba(15, 23, 42, 0.90);
  font-weight: 950;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.18);
  transition:
    border-color 0.16s ease,
    color 0.16s ease,
    background 0.16s ease;
}

.legal-link:hover {
  color: rgba(15, 23, 42, 1);
  border-bottom-color: rgba(16, 207, 199, 0.45);
}


/* =========================================================
   8) EXTERNE LINKS (z. B. Google Datenschutz)
   ---------------------------------------------------------
   Links mit target="_blank" dürfen etwas stärker aussehen.
   ========================================================= */
.legal-card a[target="_blank"] {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(16, 207, 199, 0.24);
  background: linear-gradient(
    90deg,
    rgba(16, 207, 199, 0.14),
    rgba(42, 140, 255, 0.10)
  );
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
  border-bottom-width: 1px;
}

.legal-card a[target="_blank"]:hover {
  border-color: rgba(42, 140, 255, 0.34);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   9) LISTEN
   ---------------------------------------------------------
   WICHTIG für Datenschutz:
   - Rechte der Nutzer
   - Server-Logfiles
   - Aufzählungen
   ========================================================= */
.legal-list {
  margin: 10px 0 0 20px;
  padding: 0;
  color: rgba(15, 23, 42, 0.86);
  line-height: 1.7;
}

.legal-list li {
  margin: 6px 0;
}

/* Wenn nach einer Liste noch ein Absatz kommt,
   bekommt er etwas Luft nach oben */
.legal-list + p {
  margin-top: 12px;
}


/* =========================================================
   10) STARKE TEXTE
   ---------------------------------------------------------
   Für wichtige Angaben wie Namen oder Rechtsgrundlagen.
   ========================================================= */
.legal-card strong {
  color: rgba(15, 23, 42, 0.98);
  font-weight: 950;
}


/* =========================================================
   11) FOOTER AUF DER DATENSCHUTZ-SEITE
   ---------------------------------------------------------
   Etwas Abstand nach oben.
   ========================================================= */
.footer {
  margin-top: 20px;
}


/* =========================================================
   12) RESPONSIVE ANPASSUNG
   ---------------------------------------------------------
   Auf kleineren Geräten etwas kompakter.
   ========================================================= */
@media (max-width: 700px) {
  .legal-card {
    padding: 16px;
    margin: 12px 0;
  }

  .legal-card h2 {
    font-size: 1.14rem;
  }

  .legal-card p {
    line-height: 1.68;
  }

  .legal-list {
    margin-left: 18px;
  }
}