/* ══════════════════════════════════════════════════════════════════
   amrock — Stylesheet für die Rechtsseiten
   impressum.html · datenschutz.html

   Eine Datei für beide Seiten. Wird hier etwas geändert,
   ändert es sich überall.
   ══════════════════════════════════════════════════════════════════ */

/* ── Schriften: siehe Hinweis in index.html ────────────────────── */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-variable.woff2") format("woff2-variations");
  font-weight:200 800;font-display:swap;
}

:root{
  --obsidian:#0B0F0E;
  --limestone:#EDEBE4;
  --chalk:#F7F6F1;
  --on-light:#131C19;
  --accent:#C7AA7B;
  --accent-ink:#7E6231;
  --hair:rgba(19,28,25,.15);
  --disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --pad:clamp(1.25rem,5vw,4rem);
  --ease:cubic-bezier(.22,.72,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--limestone);color:var(--on-light);
  font-family:var(--serif);font-size:1rem;line-height:1.74;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--obsidian)}

/* ── Kopfleiste ────────────────────────────────────────────────── */
.top{background:var(--obsidian);color:#E4E2D9}
.top__in{
  max-width:64rem;margin:0 auto;padding:.9rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.top__mark{
  font-family:var(--disp);font-weight:700;font-size:1rem;
  letter-spacing:-.04em;text-decoration:none;
  font-variation-settings:"wdth" 108;
}
.top__mark em{font-style:normal;color:var(--accent)}
.top__back{
  font-family:var(--disp);font-weight:500;font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;opacity:.6;transition:opacity .3s,color .3s;
}
.top__back:hover{opacity:1;color:var(--accent)}

/* ── Reiter über die vier Seiten ───────────────────────────────── */
.reiter{
  position:sticky;top:0;z-index:20;
  background:rgba(237,235,228,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.reiter__in{
  max-width:64rem;margin:0 auto;padding:0 var(--pad);
  display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;
}
.reiter__in::-webkit-scrollbar{display:none}
.reiter a,.reiter__an{
  font-family:var(--disp);font-weight:500;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.95rem .95rem;white-space:nowrap;text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease),opacity .3s;
}
.reiter a{opacity:.48}
.reiter a:hover{opacity:1;color:var(--accent-ink)}
.reiter__an{opacity:1;color:var(--accent-ink);border-bottom-color:var(--accent)}

/* ── Seitenrumpf ───────────────────────────────────────────────── */
.seite{max-width:64rem;margin:0 auto;padding:clamp(2.8rem,6vw,5rem) var(--pad) clamp(3.5rem,7vw,6rem)}
.dach{
  font-family:var(--disp);font-weight:500;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;opacity:.45;margin:0 0 1.3rem;
}
h1{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.85rem,1.25rem + 2.4vw,3rem);
  line-height:1.05;letter-spacing:-.032em;margin:0 0 2.4rem;
  font-variation-settings:"wdth" 108;max-width:24ch;
}

/* ── Inhaltsverzeichnis ────────────────────────────────────────── */
.inhalt{
  background:var(--chalk);border:1px solid var(--hair);
  padding:1.5rem 1.7rem;margin:0 0 3rem;
}
.inhalt p{
  font-family:var(--disp);font-weight:600;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;opacity:.45;margin:0 0 .9rem;
}
.inhalt ol{
  list-style:none;margin:0;padding:0;
  columns:2;column-gap:2.5rem;
}
@media (max-width:640px){.inhalt ol{columns:1}}
.inhalt li{break-inside:avoid;margin-bottom:.28rem}
.inhalt a{
  font-family:var(--disp);font-weight:400;font-size:.86rem;
  text-decoration:none;opacity:.75;
  border-bottom:1px solid transparent;
  transition:opacity .25s,border-color .25s,color .25s;
}
.inhalt a:hover{opacity:1;color:var(--accent-ink);border-bottom-color:currentColor}

/* ── Der Rechtstext selbst ─────────────────────────────────────── */
.legal{max-width:66ch}
.legal h2{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.2rem,1.05rem + .65vw,1.6rem);
  line-height:1.18;letter-spacing:-.022em;
  margin:3.2rem 0 1rem;padding-top:1.8rem;
  border-top:1px solid var(--hair);
  scroll-margin-top:5rem;
}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{
  font-family:var(--disp);font-weight:600;font-size:1rem;
  line-height:1.35;letter-spacing:-.012em;margin:2rem 0 .5rem;
}
.legal .nr{
  color:var(--accent-ink);font-variant-numeric:tabular-nums;
  margin-right:.45em;font-weight:600;
}
.legal p .nr{font-family:var(--disp);font-size:.86em;opacity:.85}
.legal p{margin:0 0 .85rem}
.legal ul{margin:.2rem 0 1.1rem;padding:0;list-style:none}
.legal ul li{position:relative;padding-left:1.1rem;margin-bottom:.3rem}
.legal ul li::before{
  content:"";position:absolute;left:0;top:.78em;
  width:.42rem;height:1px;background:var(--accent-ink);opacity:.7;
}
.legal a{
  color:var(--accent-ink);text-underline-offset:3px;
  text-decoration-thickness:1px;word-break:break-word;
}
.legal a:hover{background:rgba(199,170,123,.22)}

/* ── Quellenangabe der Kanzlei ─────────────────────────────────── */
.quelle{
  margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--hair);
  max-width:66ch;
}
.quelle p{
  margin:0 0 .35rem;font-family:var(--disp);font-size:.74rem;
  line-height:1.7;letter-spacing:.01em;opacity:.5;
}
.quelle a{color:inherit}

/* ── Fußzeile ──────────────────────────────────────────────────── */
.fuss{background:var(--obsidian);color:#E4E2D9}
.fuss__in{
  max-width:64rem;margin:0 auto;padding:1.8rem var(--pad);
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  font-family:var(--disp);font-size:.72rem;letter-spacing:.08em;opacity:.55;
}
.fuss__in a{text-decoration:none}
.fuss__in a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}