/* Eigenständige Rechtstexte für streamnode.de — bewusst ohne Abhängigkeit
   zum Dashboard-CSS, damit sie auch ohne Anmeldung vollständig funktionieren. */
:root {
  --bg:#0b0f14; --card:#131a22; --rand:#212c38;
  --akzent:#22d3ee; --akzent-hell:#67e8f9;
  --text:#dbe4ee; --text-dim:#8fa3b8;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.65; padding:40px 20px 60px;
}

.huelle { max-width:760px; margin:0 auto; }

header { margin-bottom:32px; }
.marke { font-size:1.4rem; font-weight:700; letter-spacing:-.02em; text-decoration:none; color:var(--text); }
.marke span { color:var(--akzent); }

h1 { font-size:1.7rem; font-weight:700; letter-spacing:-.01em; margin:24px 0 8px; }
h2 {
  font-size:1.05rem; font-weight:600; margin:28px 0 10px;
  color:var(--akzent-hell);
}
h3 { font-size:.95rem; font-weight:600; margin:18px 0 6px; }

p, li { color:var(--text-dim); }
p { margin-bottom:10px; }
ul { margin:8px 0 12px 20px; }
li { margin-bottom:5px; }

strong { color:var(--text); font-weight:600; }
a { color:var(--akzent); }

.karte {
  background:var(--card); border:1px solid var(--rand);
  border-radius:14px; padding:20px 22px; margin-bottom:16px;
}

/* Auffällig, damit keine Platzhalter versehentlich online bleiben. */
.luecke {
  background:rgba(224,83,61,.12); border:1px dashed rgba(224,83,61,.5);
  border-radius:8px; padding:2px 8px; color:#ff8a75;
  font-family:ui-monospace,monospace; font-size:.85rem;
}

.stand { color:var(--text-dim); font-size:.85rem; margin-top:24px; }

/* ── Schwebende Sprungmarken ──────────────────────────────────────────────
   Die Datenschutzerklärung ist auf 19 Abschnitte gewachsen; ohne Übersicht
   scrollt man an dem vorbei, was man sucht.

   Bewusst "fixed" am linken Rand statt einer Spalte im Textfluss: Die Hülle
   bleibt damit weiter mittig, und der Lesetext behält seine Breite — eine
   zweispaltige Anordnung hätte für beides zu wenig Platz gelassen. */
.sprungmarken {
  position:fixed; top:40px; left:24px; width:200px;
  max-height:calc(100vh - 80px); overflow-y:auto;
  padding-right:6px;
}

.sprungmarken ol { list-style:none; margin:0; padding:0; }

.sprungmarken a {
  display:block; padding:4px 10px; border-left:2px solid transparent;
  color:var(--text-dim); text-decoration:none;
  font-size:.8rem; line-height:1.35;
  transition:color .15s ease, border-color .15s ease;
}

.sprungmarken a:hover { color:var(--text); border-left-color:var(--rand); }

.sprungmarken a.aktiv {
  color:var(--akzent-hell); border-left-color:var(--akzent);
}

/* Schmale Bildschirme haben links keinen Platz — dort verschwindet die
   Leiste ganz, statt sich über den Text zu legen.

   Die Schwelle ist gerechnet, nicht geschätzt: Die Hülle beginnt bei
   (Fensterbreite − 760) / 2, die Leiste endet bei 24 + 200 = 224. Damit
   dazwischen noch Luft bleibt, braucht es mindestens 760 + 2 × 250 = 1260. */
@media (max-width:1260px) {
  .sprungmarken { display:none; }
}

/* Ein Sprung darf nicht unter dem oberen Rand kleben. */
.karte { scroll-margin-top:20px; }

footer {
  margin-top:36px; padding-top:18px; border-top:1px solid var(--rand);
  color:var(--text-dim); font-size:.85rem;
  display:flex; gap:18px; flex-wrap:wrap;
}