/* =============================================================
   legal.css — schlichtes Layout für Impressum und Datenschutz
   Gemeinsame Datei für beide Seiten: ein Ort für Änderungen.
   Farben und Schriften wie auf der Startseite.
   ============================================================= */

:root {
  --bg: #0b1020;
  --line: rgba(236,240,247,.10);
  --text: #f4f1ea;
  --muted: #aeb7c7;
  --accent: #c9a46a;
  --accent-soft: #dfc18f;
  --max: 1180px;
  --spalte: 720px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 0%, rgba(201,164,106,.07), transparent 34%),
    var(--bg);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.62;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.container { width: min(calc(100% - 44px), var(--max)); margin: 0 auto; }

/* ---------- Kopfzeile ---------- */

.nav {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(18px);
  background: rgba(11,16,32,.94);
  border-bottom: 1px solid var(--line);
}
.nav-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }

.brand { display: inline-flex; align-items: center; gap: 11px; font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.04em; font-size: 19px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 12px;
  border: 1px solid rgba(223,193,143,.28);
  background:
    radial-gradient(circle at 70% 31%, #8fa99b 0 1.8px, transparent 2.6px),
    linear-gradient(145deg, rgba(201,164,106,.15), rgba(143,169,155,.06));
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.brand-mark:before {
  content: ""; position: absolute; width: 14px; height: 12px;
  border: 2px solid var(--text); border-right-color: rgba(244,241,234,.32);
  border-radius: 8px 5px 8px 8px; left: 7px; top: 8px; transform: rotate(-4deg);
}
.brand-mark:after {
  content: ""; position: absolute; width: 8px; height: 2px; background: var(--accent-soft);
  transform: rotate(43deg); right: 4px; bottom: 7px; border-radius: 10px;
  box-shadow: -11px -1px 0 -0.5px rgba(244,241,234,.75);
}

.zurueck { color: var(--muted); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.zurueck:hover { color: var(--accent-soft); }

/* ---------- Rechtstext ---------- */

.legal { padding: 96px 0 130px; }
.legal .spalte { max-width: var(--spalte); }

.legal h1 {
  font-family: Manrope, sans-serif; font-weight: 800;
  font-size: clamp(48px, 7.4vw, 84px); line-height: 1.0;
  letter-spacing: -.055em; margin: 0;
}
.legal h1 .punkt { color: var(--accent); }

.stand {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: 12px; letter-spacing: .04em; color: var(--muted);
  margin: 20px 0 0; opacity: .75;
}

.legal section { margin-top: 62px; scroll-margin-top: 96px; }

.legal h2 {
  font-family: Manrope, sans-serif; font-weight: 700;
  font-size: 23px; letter-spacing: -.035em; margin: 0 0 18px;
}

.legal p { color: var(--muted); font-size: 16px; margin: 0 0 15px; }
.legal p:last-child { margin-bottom: 0; }
.legal p a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }
.legal p a:hover { color: var(--accent); }

.legal .anschrift { color: var(--muted); }
.legal .anschrift strong { color: var(--text); font-weight: 600; }

.legal h3 {
  font-family: Manrope, sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: -.015em; color: var(--text);
  margin: 26px 0 7px;
}
.legal h3:first-of-type { margin-top: 0; }

.legal ul { margin: 0 0 15px; padding: 0; list-style: none; display: grid; gap: 8px; }
.legal ul li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; color: var(--muted); font-size: 16px; }
.legal ul li:before { content: "\2014"; color: var(--accent-soft); }

.offen {
  display: inline-block; border: 1px dashed rgba(223,193,143,.5);
  background: rgba(201,164,106,.06); color: var(--accent-soft);
  border-radius: 8px; padding: 3px 9px; font-size: 14px; font-weight: 700;
}

/* ---------- Fußbereich mit großer Wortmarke ---------- */

.footer-gross { border-top: 1px solid var(--line); padding-top: 54px; overflow: hidden; }

.wortmarke {
  font-family: Manrope, sans-serif; font-weight: 800;
  font-size: clamp(52px, 13.4vw, 186px); line-height: .84;
  letter-spacing: -.055em; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236,240,247,.13);
  text-align: center; user-select: none;
  margin-bottom: 8px;
}
.wortmarke sup {
  font-size: .21em; vertical-align: super; letter-spacing: 0;
  color: var(--accent); -webkit-text-stroke: 0;
}

.footer-spalten {
  display: grid; grid-template-columns: 1fr auto; gap: 40px;
  align-items: start; padding: 46px 0 58px;
}
.footer-text { color: var(--muted); font-size: 14px; max-width: 380px; margin: 16px 0 0; }
.footer-rechts { display: grid; gap: 11px; justify-items: end; text-align: right; }
.footer-titel {
  color: var(--accent-soft); font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 3px;
}
.footer-rechts a { color: var(--muted); font-size: 14px; }
.footer-rechts a:hover, .footer-rechts a.aktiv { color: var(--text); }
.footer-schluss { border-top: 1px solid var(--line); padding: 20px 0 34px; color: var(--muted); font-size: 12px; }

@media (max-width: 720px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .legal { padding: 62px 0 90px; }
  .legal section { margin-top: 46px; }
  .footer-spalten { grid-template-columns: 1fr; gap: 32px; padding: 34px 0 44px; }
  .footer-rechts { justify-items: start; text-align: left; }
  .zurueck span { display: none; }
}