/* legal.css — gemeinsames Kleid für Impressum und Datenschutz.
   Eigene Datei statt zweimal inline: die beiden Seiten sollen nicht auseinanderlaufen.
   Tokens und Schriften sind identisch zu home/index.html (und damit zur App). */

@font-face{ font-family:'Rubik'; src:url('/assets/fonts/rubik.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('/assets/fonts/inter.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }

:root{
  --accent:#1C6B66; --accent-deep:#13534F; --accent-2:#E86F5B;
  --ink:#16212B; --paper:#F4F6F8; --surface:#FFFFFF;
  --muted:#5A6672; --line:#E2E6EA;
  --title:'Rubik',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --r-pill:999px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--title); font-weight:600; line-height:1.2; letter-spacing:-.01em}
a{color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--accent)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em;
  background:#fff; border:1px solid var(--line); border-radius:5px; padding:1px 5px}

/* ── Topbar (identisch zur Startseite) ── */
.topbar{position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.topbar .wrap{max-width:1100px; margin:0 auto; padding:0 22px; display:flex; align-items:center; gap:14px; height:66px}
.brand{display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.brand svg{width:38px; height:38px; display:block}
.brand b{font-family:var(--title); font-weight:600; font-size:20px; letter-spacing:-.01em}
.topbar .spacer{margin-left:auto}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600;
  font-size:15.5px; padding:11px 21px; border-radius:var(--r-pill); border:1.5px solid transparent;
  background:var(--accent); color:#fff; text-decoration:none; transition:background .14s ease}
.btn:hover{background:var(--accent-deep); color:#fff}

/* ── Textspalte ── */
main.legal{max-width:760px; margin:0 auto; padding:34px 22px 70px}
.back{display:inline-block; font-size:14.5px; font-weight:600; margin-bottom:26px; text-decoration:none}
.back:hover{text-decoration:underline}
main.legal h1{font-size:clamp(28px,4vw,38px); margin:0 0 8px}
main.legal .stand{color:var(--muted); font-size:14px; margin:0 0 30px}
main.legal h2{font-size:clamp(20px,2.6vw,23px); margin:40px 0 12px; padding-top:20px; border-top:1px solid var(--line)}
main.legal h2:first-of-type{border-top:none; padding-top:0; margin-top:32px}
main.legal h3{font-size:17.5px; margin:26px 0 10px}
main.legal p{margin:0 0 14px}
main.legal ul{margin:0 0 16px; padding-left:22px}
main.legal li{margin-bottom:8px}
main.legal strong{font-weight:600}

/* ── Fusszeile ── */
footer{border-top:1px solid var(--line); padding:30px 0 44px}
footer .wrap{max-width:1100px; margin:0 auto; padding:0 22px;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px}
footer .brand b{font-size:17px}
footer .spacer{margin-left:auto}
footer .meta{color:var(--muted); font-size:13.5px}
footer a{font-size:14px; font-weight:600; text-decoration:none}
footer a:hover{text-decoration:underline}

@media(max-width:560px){
  .topbar .wrap{height:60px}
  .brand b{font-size:18px}
  main.legal{padding:26px 22px 56px}
}