/* privacy.css — Datenschutzerklaerung v2.0 (Stand 2026-05-17)
 *
 * Scoped via body.privacy-page-body + .privacy-page-Wrapper damit
 * Styles nicht auf andere Pages leaken. Brand-konform: Outfit-Font
 * (von base.html geladen), Dark-Mode, Purple-Pink-Gradient-Akzente,
 * JetBrains-Mono fuer Code-Snippets.
 *
 * Convention (analog body.blog-detail / body.seakt-page): page-spezifischer
 * Body-Background wird hier gesetzt, damit base.html keine globale
 * Background-Annahme treffen muss.
 */

/* Page-Background + globale Typografie-Defaults — bewusst ruhig, kein
 * Mesh-Gradient (Dokumenten-Look). Replizieren das, was impressum/agb
 * inline auf ihrem body setzen, damit Footer-Children (.gq-footer-inner
 * etc.) konsistente Defaults erben (Font-Family v.a. — sonst Serif). */
body.privacy-page-body {
  background: #06060b;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', sans-serif;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Legal-Notice-Banner (DE-only fuer FR/IT/EN) — datenschutz-spezifisch,
 * NICHT der generische "Uebersetzung folgt"-Banner. Rechtsverbindlich
 * nur DE, daher klarer Hinweis statt Versprechen einer Uebersetzung. */
.privacy-legal-notice {
  max-width: 820px;
  margin: 32px auto 0;
  padding: 16px 22px;
  background: linear-gradient(135deg,
              rgba(168, 85, 247, 0.10) 0%,
              rgba(236, 72, 153, 0.05) 100%);
  border: 1px solid rgba(168, 85, 247, 0.32);
  border-left: 3px solid #a855f7;
  border-radius: 4px 12px 12px 4px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.privacy-legal-notice-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: #c084fc;
}
.privacy-legal-notice-text {
  flex: 1; min-width: 200px;
}
.privacy-legal-notice a {
  color: #c084fc;
  text-decoration: none;
  border-bottom: 1px dashed rgba(192, 132, 252, 0.5);
  font-weight: 600;
  white-space: nowrap;
}
.privacy-legal-notice a:hover {
  color: #e9d5ff;
  border-bottom-color: rgba(233, 213, 255, 0.7);
}
/* Kein Body-Padding — Header/Footer aus base.html bleiben full-width */

.privacy-page {
  max-width: 820px;
  margin: 48px auto 96px;
  padding: 0 24px;
  color: rgba(255, 255, 255, 0.85);
  /* Inter ist Site-Standard fuer Body-Text (analog impressum/agb). Outfit
   * waere "Display"-Font fuer grosse Hero-Elements, daher hier nicht im
   * Body-Stack. Headings (h1/h2/h3) erben Inter automatisch. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
}

/* Header */
.privacy-page > header {
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.18);
}
.privacy-page h1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, rgba(168, 85, 247, 0.95) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.privacy-page .meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.privacy-page .meta a {
  color: rgba(168, 85, 247, 0.85);
  text-decoration: none;
  border-bottom: 1px dashed rgba(168, 85, 247, 0.4);
}
.privacy-page .meta a:hover { color: #c084fc; }

/* Hauptstruktur */
.privacy-page h2 {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin: 56px 0 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: -0.01em;
}
.privacy-page h3 {
  font-size: 18px;
  font-weight: 600;
  color: rgba(168, 85, 247, 0.95);
  margin: 36px 0 14px;
}
.privacy-page p {
  margin: 0 0 14px;
}
.privacy-page ul,
.privacy-page ol {
  margin: 0 0 18px;
  padding-left: 24px;
}
.privacy-page li {
  margin: 6px 0;
}
.privacy-page strong {
  color: #fff;
  font-weight: 600;
}
.privacy-page a {
  color: #c084fc;
  text-decoration: none;
  border-bottom: 1px dashed rgba(192, 132, 252, 0.35);
  transition: color .15s, border-color .15s;
}
.privacy-page a:hover {
  color: #e9d5ff;
  border-bottom-color: rgba(233, 213, 255, 0.7);
}
.privacy-page code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.88em;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 4px;
  padding: 1px 6px;
  color: #e9d5ff;
}
.privacy-page address {
  font-style: normal;
  line-height: 1.55;
  margin: 8px 0 16px;
  padding: 14px 18px;
  background: rgba(168, 85, 247, 0.06);
  border-left: 3px solid rgba(168, 85, 247, 0.5);
  border-radius: 4px 8px 8px 4px;
}
.privacy-page address a { color: #c084fc; }
.privacy-page dl {
  margin: 16px 0;
}
.privacy-page dt {
  font-weight: 600;
  color: #fff;
  margin-top: 14px;
}
.privacy-page dd {
  margin: 4px 0 14px;
  padding-left: 0;
  color: rgba(255, 255, 255, 0.78);
}

/* Sektionen anchor-scroll-padding (Sticky-Header) */
.privacy-page section { scroll-margin-top: 90px; }

/* TOC */
.privacy-toc {
  margin: 32px 0 48px;
  padding: 22px 26px;
  background: linear-gradient(135deg,
              rgba(124, 58, 237, 0.08) 0%,
              rgba(236, 72, 153, 0.05) 100%);
  border: 1px solid rgba(168, 85, 247, 0.18);
  border-radius: 12px;
}
.privacy-toc h2 {
  margin: 0 0 14px;
  padding: 0;
  border: none;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(168, 85, 247, 0.85);
}
.privacy-toc ol {
  margin: 0;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.85;
}
.privacy-toc ol ol {
  margin: 4px 0 6px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
}
.privacy-toc a {
  border-bottom: none;
  color: rgba(255, 255, 255, 0.85);
}
.privacy-toc a:hover { color: #c084fc; }

/* Übersichts-Tabelle */
.privacy-overview {
  width: 100%;
  margin: 14px 0 20px;
  border-collapse: collapse;
  font-size: 13.5px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  overflow: hidden;
}
.privacy-overview thead {
  background: linear-gradient(135deg,
              rgba(124, 58, 237, 0.20) 0%,
              rgba(236, 72, 153, 0.12) 100%);
}
.privacy-overview th {
  text-align: left;
  padding: 12px 14px;
  font-weight: 600;
  color: #fff;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(168, 85, 247, 0.32);
}
.privacy-overview td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
  color: rgba(255, 255, 255, 0.78);
}
.privacy-overview tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}
.privacy-overview tbody tr:last-child td {
  border-bottom: none;
}
.privacy-overview tbody tr:hover {
  background: rgba(168, 85, 247, 0.06);
}

/* Hinweis-Box (gelb/orange Akzent) */
.privacy-page .hinweis,
p.hinweis {
  margin: 18px 0;
  padding: 14px 18px 14px 22px;
  background: linear-gradient(135deg,
              rgba(245, 158, 11, 0.08) 0%,
              rgba(217, 119, 6, 0.04) 100%);
  border-left: 3px solid #f59e0b;
  border-radius: 4px 10px 10px 4px;
  color: rgba(253, 230, 138, 0.95);
  font-size: 14.5px;
}
.privacy-page .hinweis strong,
p.hinweis strong {
  color: #fcd34d;
}

/* Hervorhebung-Box (lila/pink Akzent) */
.privacy-page .hervorhebung,
p.hervorhebung {
  margin: 18px 0;
  padding: 14px 18px 14px 22px;
  background: linear-gradient(135deg,
              rgba(168, 85, 247, 0.12) 0%,
              rgba(236, 72, 153, 0.08) 100%);
  border-left: 3px solid #a855f7;
  border-radius: 4px 10px 10px 4px;
  color: rgba(233, 213, 255, 0.95);
  font-size: 14.5px;
}
.privacy-page .hervorhebung strong,
p.hervorhebung strong {
  color: #fff;
}

/* Footer */
.privacy-footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(168, 85, 247, 0.18);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.65;
}
.privacy-footer a { color: rgba(168, 85, 247, 0.8); }

/* Mobile */
@media (max-width: 720px) {
  .privacy-page {
    margin: 32px auto 64px;
    padding: 0 18px;
    font-size: 15px;
  }
  .privacy-page h1 { font-size: 28px; }
  .privacy-page h2 { font-size: 21px; margin: 40px 0 14px; }
  .privacy-page h3 { font-size: 17px; }
  .privacy-toc { padding: 18px 20px; }
  .privacy-overview { font-size: 12.5px; }
  .privacy-overview th,
  .privacy-overview td { padding: 9px 10px; }
  /* Auf engen Screens Tabelle horizontal scrollbar machen */
  .privacy-page section:has(.privacy-overview) {
    overflow-x: auto;
  }
}