/* ============================================================
   datenschutz.css – Datenschutzerklärung StadtMAX
   Struktur: Format getrennt von Inhalt (HTML-Datei)
   ============================================================ */

/* ---------- 1. Variablen (hier zentral anpassen) ---------- */
:root {
  --color-primary:     #1a4e8c;   /* Überschriften, Links */
  --color-secondary:   #2d7dd2;   /* Hover-Links */
  --color-accent:      #e8f0fb;   /* Hintergrund von Abschnitten */
  --color-hinweis:     #c0392b;   /* Rote Hinweis-Markierungen */
  --color-bg:          #f5f7fa;   /* Seiten-Hintergrund */
  --color-text:        #222222;   /* Fließtext */
  --color-muted:       #666666;   /* Stand-Datum, Footer */
  --color-border:      #d0dce8;   /* Trennlinien */

  --font-base:         'Segoe UI', Arial, sans-serif;
  --font-size-base:    16px;
  --line-height-base:  1.75;

  --max-width:         860px;
  --spacing-section:   2.5rem;
  --spacing-inner:     1rem;
}

/* ---------- 2. Reset / Basis ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ---------- 3. Layout-Container ---------- */
.container {
  max-width: var(--max-width);
  margin: 2rem auto;
  padding: 0 1.5rem 3rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ---------- 4. Header ---------- */
.page-header {
  padding: 2.5rem 0 1.5rem;
  border-bottom: 3px solid var(--color-primary);
  margin-bottom: var(--spacing-section);
}

.page-header h1 {
  font-size: 1.9rem;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stand {
  margin-top: 0.4rem;
  color: var(--color-muted);
  font-size: 0.88rem;
}

/* ---------- 5. Abschnitte (section) ---------- */
section {
  margin-bottom: var(--spacing-section);
  padding-bottom: var(--spacing-section);
  border-bottom: 1px solid var(--color-border);
}

section:last-of-type {
  border-bottom: none;
}

/* Eingerückte Unterabschnitte (h3, h4) */
section section {
  margin-top: 1.5rem;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  padding-left: 1rem;
  border-left: 3px solid var(--color-border);
}

section section section {
  margin-top: 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid #e0e8f0;
}

/* ---------- 6. Überschriften ---------- */
h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-inner);
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--color-accent);
}

h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.7rem;
  margin-top: 0.5rem;
}

h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.6rem;
  margin-top: 0.3rem;
}

/* ---------- 7. Fließtext & Absätze ---------- */
p {
  margin-bottom: 0.85rem;
}

p:last-child {
  margin-bottom: 0;
}

address {
  font-style: normal;
  line-height: 1.9;
  margin-bottom: 0.85rem;
}

/* ---------- 8. Listen ---------- */
ul, ol {
  margin: 0.5rem 0 0.85rem 1.5rem;
}

ul li, ol li {
  margin-bottom: 0.35rem;
}

/* Verschachtelte Listen */
ul ul, ol ol, ul ol, ol ul {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* ---------- 9. Links ---------- */
a {
  color: var(--color-secondary);
  text-decoration: none;
  word-break: break-all;
}

a:hover,
a:focus {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ---------- 10. Hinweis-Markierungen ---------- */
.hinweis {
  color: var(--color-hinweis);
  font-style: italic;
  font-size: 0.9em;
}

/* ---------- 11. Footer ---------- */
.page-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ---------- 12. Responsive ---------- */
@media (max-width: 600px) {
  :root {
    --font-size-base: 15px;
    --spacing-section: 1.8rem;
  }

  .container {
    margin: 0;
    border-radius: 0;
    padding: 0 1rem 2rem;
  }

  .page-header h1 {
    font-size: 1.4rem;
  }

  h2 {
    font-size: 1.15rem;
  }
}