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

   index.html traegt sein CSS inline; die Rechtsseiten brauchen davon nur die
   Farben und die beiden Schriften. Wer die Marke aendert, aendert :root in
   index.html UND diese Datei.
   --------------------------------------------------------------------------- */

:root{
  --bg:        oklch(0.99  0.003 254);
  --bg-2:      oklch(0.97  0.007 254);
  --bg-3:      oklch(0.95  0.010 254);
  --paper:     oklch(1.00  0.000 0);
  --night:     oklch(0.13  0.018 254);
  --night-2:   oklch(0.17  0.016 254);
  --ink:       oklch(0.11  0.012 254);
  --ink-2:     oklch(0.28  0.016 254);
  --ink-3:     oklch(0.50  0.012 254);
  --ink-4:     oklch(0.68  0.008 254);
  --blue:      oklch(0.44  0.16  254);
  --blue-2:    oklch(0.36  0.18  254);
  --rule:      oklch(0.88  0.009 254);
  --rule-2:    oklch(0.93  0.006 254);
  --amber:     oklch(0.72  0.14  75);
  --amber-bg:  oklch(0.96  0.045 85);
  --ease:      cubic-bezier(.22,.61,.36,1);

  --fd: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --fb: 'Figtree', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--fb);
  font-size:1rem;
  line-height:1.75;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:47rem; margin:0 auto; padding:0 1.5rem; }

/* --- Kopf ---------------------------------------------------------------- */

.legal-head{
  background:var(--night);
  color:var(--bg);
  padding:1.125rem 0;
  position:sticky; top:0; z-index:10;
}
.legal-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.legal-mark{
  font-family:var(--fd);
  font-size:1.375rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bg);
  text-decoration:none;
  line-height:1;
}
.legal-mark span{ color:var(--ink-4); font-weight:400; }
.legal-back{
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.legal-back:hover{ color:var(--bg); border-bottom-color:var(--bg); }

/* --- Titel --------------------------------------------------------------- */

.legal-hero{ padding:clamp(3rem,8vw,5.5rem) 0 clamp(1.5rem,4vw,2.5rem); }
.legal-kicker{
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue); margin:0 0 1rem; font-weight:600;
}
.legal-hero h1{
  font-family:var(--fd);
  font-weight:800;
  font-size:clamp(2.75rem,9vw,4.75rem);
  line-height:.95;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 1.25rem;
  color:var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
}
.legal-lead{ font-size:1.0625rem; color:var(--ink-2); margin:0; max-width:38rem; }

/* --- Inhaltsverzeichnis --------------------------------------------------- */

.toc{
  background:var(--paper);
  border:1px solid var(--rule);
  padding:1.5rem 1.75rem;
  margin:0 0 3rem;
}
.toc h2{
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 .875rem; font-weight:600; font-family:var(--fb);
}
.toc ol{ margin:0; padding:0 0 0 1.25rem; columns:2; column-gap:2rem; }
.toc li{ margin:0 0 .375rem; font-size:.9375rem; break-inside:avoid; }
.toc a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid transparent; }
.toc a:hover{ color:var(--blue); border-bottom-color:var(--blue); }
@media(max-width:40rem){ .toc ol{ columns:1; } }

/* --- Abschnitte ---------------------------------------------------------- */

.legal-body{ padding-bottom:4rem; }

section.abschnitt{ margin:0 0 3rem; scroll-margin-top:5rem; }
section.abschnitt>h2{
  overflow-wrap:break-word;
  font-family:var(--fd);
  font-weight:700;
  font-size:clamp(1.75rem,4.5vw,2.25rem);
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.005em;
  margin:0 0 1rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  color:var(--ink);
}
section.abschnitt>h2 .nr{
  display:block;
  font-family:var(--fb);
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue); margin-bottom:.625rem; font-weight:600;
}

h3{
  font-family:var(--fb);
  font-size:.9375rem; font-weight:600; letter-spacing:.01em;
  margin:1.75rem 0 .5rem; color:var(--ink);
}

p{ margin:0 0 1rem; }
p:last-child, ul:last-child, ol:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 1rem; padding-left:1.25rem; }
li{ margin-bottom:.375rem; }
strong{ font-weight:600; color:var(--ink); }

a{ color:var(--blue); text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:1px; }
a:hover{ color:var(--blue-2); }

code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.875em; background:var(--bg-3); padding:.0625rem .3125rem; }

.adresse{
  background:var(--paper);
  border-left:3px solid var(--blue);
  padding:1.125rem 1.25rem;
  margin:0 0 1.25rem;
  line-height:1.65;
}
.adresse p{ margin:0; }

/* Offene Angabe – bewusst sichtbar, damit sie niemand uebersieht */
.offen{
  display:inline-block;
  background:var(--amber-bg);
  border:1px dashed var(--amber);
  padding:.0625rem .4375rem;
  font-size:.875rem;
  color:oklch(0.42 0.09 65);
  font-style:normal;
}

.hinweis{
  background:var(--bg-3);
  border-left:3px solid var(--ink-4);
  padding:1.125rem 1.25rem;
  margin:1.25rem 0;
  font-size:.9375rem;
}
.hinweis p:last-child{ margin-bottom:0; }

.tab-wrap{ overflow-x:auto; margin:0 0 1.25rem; }
table{
  width:100%; min-width:30rem; border-collapse:collapse;
  font-size:.9375rem; background:var(--paper); border:1px solid var(--rule);
}
th,td{ text-align:left; padding:.75rem .875rem; border-bottom:1px solid var(--rule-2); vertical-align:top; }
th{ font-weight:600; background:var(--bg-2); font-size:.8125rem; letter-spacing:.02em; }
tr:last-child td{ border-bottom:0; }

/* --- Fuss ---------------------------------------------------------------- */

.legal-stand{
  border-top:1px solid var(--rule);
  padding-top:1.5rem; margin-top:3rem;
  font-size:.875rem; color:var(--ink-3);
}

.legal-foot{
  background:var(--night); color:var(--bg-3);
  padding:2.5rem 0; font-size:.875rem;
}
.legal-foot .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.legal-foot a{ color:var(--bg-3); text-decoration:none; opacity:.8; }
.legal-foot a:hover{ opacity:1; text-decoration:underline; }
.legal-foot ul{ display:flex; gap:1.25rem; list-style:none; margin:0; padding:0; }
.legal-foot p{ margin:0; opacity:.55; }

@media print{
  .legal-head,.legal-foot,.toc{ display:none; }
  body{ background:#fff; }
  section.abschnitt{ page-break-inside:avoid; }
}

/* ── Abschnittsleiste am unteren Rand (mobil) ─────────────────── */
.mnav { display: none; }
@media (max-width: 767px) {
  .mnav {
    display: block;
    position: fixed; inset-inline: 0; top: auto; bottom: 0; z-index: 180;
    /* Zurücksetzen, falls die Seite allgemeine nav-Regeln hat */
    width: auto; max-width: none; height: auto; margin: 0; transform: none; animation: none;
    border: 0; border-radius: 0; box-shadow: none;
    background: oklch(0.99 0.003 254 / .9);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border-top: 1px solid oklch(0.88 0.009 254);
    padding: 0 0 env(safe-area-inset-bottom, 0px);
  }
  .mnav__liste {
    display: flex; gap: 8px; margin: 0; padding: 10px 14px; list-style: none;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mnav__liste::-webkit-scrollbar { display: none; }
  .mnav__liste li { flex: 0 0 auto; scroll-snap-align: start; }
  .mnav__pille {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px; border-radius: 999px;
    border: 1px solid oklch(0.88 0.009 254);
    color: oklch(0.11 0.012 254); text-decoration: none; white-space: nowrap;
    font-size: 0.8125rem; font-weight: 500; line-height: 1;
    transition: background-color .2s, color .2s, border-color .2s;
  }
  .mnav__nr { font-size: 0.6875rem; font-variant-numeric: tabular-nums; color: oklch(0.50 0.012 254); }
  .mnav__pille.ist-aktiv { background: oklch(0.44 0.16 254); border-color: oklch(0.44 0.16 254); color: oklch(1 0 0); }
  .mnav__pille.ist-aktiv .mnav__nr { color: inherit; opacity: .75; }
  /* Platz, damit die Leiste den Footer mit Impressum/Datenschutz nicht überdeckt */
  .legal-foot { padding-bottom: calc(2.5rem + 64px + env(safe-area-inset-bottom, 0px)); }
}
.legal-foot p a { color: inherit; }
@media print { .mnav { display: none; } }