/* ============================================================================
   Gemeinsames Stylesheet für Impressum und Datenschutzerklärung.
   Übernimmt Farben, Schriften und Abstände der Startseite, ist aber bewusst
   schlank gehalten — Rechtstexte sollen vor allem gut lesbar sein.
   ============================================================================ */

:root{
  --color-studio-black:#100904;
  --color-warm-cream:#ffedd7;
  --color-cork-shadow:#40372e;
  --color-dark-cork:#382416;
  --color-burnt-sienna:#dc5000;
  --color-grey-brown:#6c5f51;
  --font-display:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--color-studio-black);
  color:var(--color-warm-cream);
  font-family:var(--font-display);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--color-warm-cream); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:var(--color-burnt-sienna); }

/* ---------- Kopfzeile ---------- */
.legal-nav{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:22px 5vw;
  border-bottom:1px dashed var(--color-cork-shadow);
}
.legal-nav .brand{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
.legal-nav .back{ font-size:13px; text-decoration:none; }
.legal-nav .back:hover{ text-decoration:underline; }

/* ---------- Inhalt ---------- */
.legal-wrap{ max-width:820px; margin:0 auto; padding:64px 5vw 96px; }

.legal-wrap h1{
  font-size:clamp(30px, 6vw, 41px);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 12px;
  font-weight:500;
}
.legal-wrap .lead{ color:var(--color-grey-brown); font-size:13px; margin:0 0 56px; }

.legal-wrap h2{
  font-size:20px; font-weight:500; margin:52px 0 14px; padding-top:26px;
  border-top:1px dashed var(--color-cork-shadow);
}
.legal-wrap h2:first-of-type{ border-top:none; padding-top:0; }
.legal-wrap h3{ font-size:16px; font-weight:500; margin:28px 0 8px; }
.legal-wrap p{ margin:0 0 16px; }
.legal-wrap ul{ margin:0 0 18px; padding-left:20px; }
.legal-wrap li{ margin-bottom:8px; }
.legal-wrap address{ font-style:normal; margin:0 0 16px; }

/* Deutlich sichtbare Lücke — muss vor dem Live-Gang gefüllt werden */
.todo{
  background:rgba(220,80,0,.16);
  color:var(--color-warm-cream);
  border:1px dashed var(--color-burnt-sienna);
  padding:2px 8px;
  border-radius:3px;
  font-size:.92em;
}
.todo-box{
  border:1px dashed var(--color-burnt-sienna);
  background:rgba(220,80,0,.07);
  padding:20px 22px;
  margin:0 0 44px;
}
.todo-box p{ margin:0 0 10px; font-size:13px; }
.todo-box p:last-child{ margin-bottom:0; }
.todo-box strong{ color:var(--color-burnt-sienna); font-weight:500; }

.legal-footer{
  border-top:1px dashed var(--color-cork-shadow);
  padding:28px 5vw;
  font-size:12px;
  color:var(--color-grey-brown);
  display:flex; gap:20px; flex-wrap:wrap; justify-content:center;
}
.legal-footer a{ color:var(--color-grey-brown); }
.legal-footer button{
  font-family:var(--font-display); font-size:12px; color:var(--color-grey-brown);
  background:none; border:none; padding:0; cursor:pointer; text-decoration:underline;
}
.legal-footer button:hover, .legal-footer a:hover{ color:var(--color-warm-cream); }