/* ==========================================================================
   Rechtsseiten (Impressum, Datenschutz)

   Eigenes, schlankes Stylesheet statt einer Kopie der Vorschau-CSS: die
   Vorschau traegt ihr Design inline, weil sie bewusst eine einzelne,
   verschickbare Datei bleibt. Die Rechtsseiten sind dagegen normale Seiten
   im Ordner und teilen sich diese Datei. Die Tokens sind mit der Vorschau
   deckungsgleich, damit beide Seiten wie ein Auftritt wirken.
   ========================================================================== */

:root{
  --background: oklch(0.986 0.001 260);
  --foreground: oklch(0.22 0.005 264);
  --card: oklch(1 0 0);
  --primary: oklch(0.58 0.19 254);
  --primary-foreground: oklch(0.99 0 0);
  --muted: oklch(0.96 0.002 260);
  --muted-foreground: oklch(0.55 0.008 264);
  --border: oklch(0.912 0.003 260);
  --warn: oklch(0.52 0.13 65);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--background);
  color:var(--foreground);
  font-family:"Instrument Sans","Helvetica Neue",Arial,ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{ color:inherit; }

/* --- Kopfzeile: identisch zur Vorschau ---------------------------------- */
header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid color-mix(in oklab, var(--border) 60%, transparent);
  background:color-mix(in oklab, var(--background) 75%, transparent);
  backdrop-filter:blur(20px);
}
nav{
  max-width:1152px; margin:0 auto; height:48px;
  display:flex; align-items:center; justify-content:space-between; padding:0 24px;
}
nav .brand{ display:flex; align-items:center; text-decoration:none; }
nav .brand img{ display:block; height:28px; width:auto; }
nav a.kontakt{
  display:inline-flex; align-items:center; height:32px; padding:0 16px;
  border:1px solid var(--border); border-radius:999px;
  font-size:13px; font-weight:500; letter-spacing:-0.005em;
  color:var(--foreground); background:transparent; text-decoration:none;
  transition:background .15s, border-color .15s, color .15s;
}
nav a.kontakt:hover{
  background:var(--primary); border-color:var(--primary); color:var(--primary-foreground);
}

/* --- Seitenkopf --------------------------------------------------------- */
.page-head{ max-width:768px; margin:0 auto; padding:96px 24px 0; }
.kicker{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-foreground);
}
.page-head h1{
  margin:20px 0 0; font-size:40px; font-weight:600;
  letter-spacing:-0.03em; line-height:1.1;
}
.page-head > p{ margin-top:20px; color:var(--muted-foreground); font-size:17px; }

/* --- Inhalt ------------------------------------------------------------- */
.legal{ max-width:768px; margin:0 auto; padding:56px 24px 112px; }
.legal section{ margin-bottom:48px; }
.legal h2{
  margin:0 0 16px; font-size:20px; font-weight:600; letter-spacing:-0.01em;
  padding-bottom:12px; border-bottom:1px solid var(--border);
}
.legal p{ margin:0 0 14px; color:var(--muted-foreground); }
.legal p:last-child{ margin-bottom:0; }
.legal a{ color:var(--primary); text-decoration:underline; text-underline-offset:3px; }
.legal ul{ margin:0 0 14px; padding-left:20px; color:var(--muted-foreground); }
.legal li{ margin-bottom:8px; }

.legal address{ font-style:normal; color:var(--foreground); margin-bottom:24px; }

/* Definitionsliste als zweispaltiges Raster: Bezeichnung links, Angabe
   rechts. Auf schmalen Fenstern gestapelt, damit lange Angaben wie die
   E-Mail-Adresse nicht in eine 90px-Spalte gequetscht werden. */
.legal dl{ margin:0; display:grid; gap:12px; }
.legal dl > div{ display:grid; grid-template-columns:1fr; gap:2px; }
.legal dt{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-foreground); }
.legal dd{ margin:0; overflow-wrap:anywhere; }
@media(min-width:640px){
  .legal dl > div{ grid-template-columns:230px 1fr; gap:20px; align-items:baseline; }
  .legal dt{ padding-top:2px; }
}

/* Offene Angaben sichtbar markieren, statt sie zu erfinden. */
.todo{
  display:inline-block; margin-left:2px;
  font-size:12px; letter-spacing:.04em;
  color:var(--warn); border:1px dashed currentColor; border-radius:4px;
  padding:1px 8px;
}
.note{
  border-left:2px solid var(--border); padding-left:16px;
  font-size:14px; color:var(--muted-foreground);
}
.disclaimer{
  margin-top:56px; padding:16px 20px;
  background:var(--muted); border-radius:10px;
  font-size:14px; color:var(--muted-foreground);
}

/* --- Fusszeile: identisch zur Vorschau ---------------------------------- */
footer{ border-top:1px solid var(--border); }
.footer-inner{
  max-width:1152px; margin:0 auto; padding:32px 24px;
  display:flex; flex-direction:column; gap:24px;
  font-size:14px; color:var(--muted-foreground);
}
.foot-brand{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.foot-logo{ display:block; height:26px; width:auto; }
.foot-meta{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.foot-links{ display:flex; gap:18px; }
.foot-links a{ text-decoration:none; transition:color .15s; }
.foot-links a:hover,
.foot-links a[aria-current="page"]{
  color:var(--foreground); text-decoration:underline; text-underline-offset:3px;
}
@media(min-width:640px){
  .footer-inner{ flex-direction:row; justify-content:space-between; align-items:center; }
  .foot-meta{ align-items:flex-end; }
}