:root{
  --bg:#f3efe7;
  --text:#222222;
  --muted:#555;
  --heading:#303030;
  --link:#004b6b;
  --border:#e5e7eb;
  --hint:#f8fafc;
  --maxw:1200px;
  --tocw:280px;
  --header-offset:80px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial;
  color:var(--text);
  background:var(--bg);
}
.container{width:min(100% - 32px,var(--maxw)); margin-inline:auto}

/* Hero */
.hero{margin-top: 5%; padding:56px 0 18px; border-bottom:1px solid var(--border)}
.hero h1{margin:0 0 6px; font-weight:800; color:var(--heading); line-height:1.15}
.hero .lede{margin:0; color:var(--muted); max-width:65ch}

/* Layout */
.legal-layout{
  display:grid;
  grid-template-columns: var(--tocw) 1fr;
  gap:28px;
  padding:22px 0 48px;
}
.legal-content section{margin:0 0 32px}
h2{margin:0 0 8px; color:var(--heading); font-size:clamp(1.25rem,2.2vw,1.6rem)}
h3{margin:1.1em 0 .45em; color:#222; font-size:1.05rem}
p{margin:.75em 0}
ul{margin:.6em 0 .9em 1.2em}
a{color:var(--link)}
a:hover{text-decoration:underline}

/* Hinweisbox (dezent) */
.note{
  background:var(--hint);
  border:1px dashed #d5dbe3;
  border-radius:10px;
  padding:10px 12px;
  color:#222;
  margin:.8em 0;
}

/* Sidebar-Menü (schlicht) */
.toc{position:relative}
.toc ol{
  list-style:none;
  padding:0;
  margin:6px 0 0;
}
.toc li{margin:0}
.toc a{
  display:block;
  padding:10px 12px;
  color:var(--text);          /* kein Browser-Blau */
  text-decoration:none;
  border-radius:8px;
}
.toc a:hover{
  background:#f2f4f7;         /* hellgrauer Hover */
}
.toc a.active{
  font-weight:700;
}

/* Anker-Offset für festen Header */
[id^="s"]{scroll-margin-top: calc(var(--header-offset) + 16px)}

.last{margin-top:14px; color:var(--muted); font-size:.95rem}
.back{margin-top:10px}
.back a{color:var(--text); text-decoration:none; border:1px solid var(--border); padding:8px 10px; border-radius:10px}
.back a:hover{background:#f6f7f9}

/* Print */
@media print{
  .toc,.back,.site-header,.site-footer{display:none !important}
}

/* Mobile */
@media (max-width:980px){
  .legal-layout{grid-template-columns:1fr}
}