/* ============================================================
   Byteclue – paper.css
   Angleichung der aelteren Seiten (Recht, Blog) an die Bildsprache
   der Startseite: warmes Papier statt kuehlem Grau, Tinte statt
   Schiefer, Haarlinien statt Kaesten.

   Diese Datei wird NACH main.css geladen und aendert ausschliesslich
   Aussehen. Sie belegt die vorhandenen Token neu, damit sich die
   bestehenden Regeln von selbst umfaerben; angefasst werden nur die
   wenigen Stellen, an denen main.css oder die Seiten eine Farbe fest
   verdrahtet haben. Kein Selektor der Seiten wird umbenannt, kein
   Markup geaendert, kein Skript beruehrt.

   Die Werte stammen 1:1 aus start.css, damit beide Generationen
   dieselbe Palette benutzen:
     --paper #FAF8F4 · --paper-2 #F4F1EA · --card #FFFFFF
     --line  #E4DFD5 · --line-2  #CFC8BA
     --ink   #16181C · --ink-2   #4A4F58 · --ink-3 #6E7480
     --acc   #1B3F7E (in main.css bereits identisch)
   ============================================================ */

:root {
  /* ── Papier ───────────────────────────────────────────────── */
  --off-white: #FAF8F4;   /* Seitengrund, vorher #F8F9FB (kuehl) */
  --white:     #FFFFFF;   /* Karten */
  --gray-50:   #F4F1EA;   /* zweite Flaeche */
  --gray-100:  #E4DFD5;   /* Haarlinie */
  --gray-200:  #CFC8BA;   /* kraeftigere Linie */
  --gray-400:  #9A9384;
  --gray-600:  #4A4F58;
  --gray-800:  #16181C;
  --border2:   #E4DFD5;

  /* ── Tinte ────────────────────────────────────────────────── */
  --text:       #16181C;
  --text-mid:   #4A4F58;
  --text-light: #6E7480;
  --text2:      #4A4F58;

  /* ── Dunkle Flaechen: Fusszeile und die CTA-Karte im Blog ─── */
  --navy:  #16181C;
  --navy2: #1E2128;
  --navy3: #262A32;

  /* ── Akzent ───────────────────────────────────────────────── */
  /* --accent ist in main.css bereits #1B3F7E, also identisch mit der
     Startseite. Nur die beiden Abstufungen werden angeglichen. */
  --accent:   #1B3F7E;
  --accent-l: #2D5499;
  --accent-d: #14305F;

  /* Die neue Palette kennt kein Gold. Die Augenbraue auf dunklem
     Grund bekommt dieselbe gedaempfte Weissstufe wie die dunklen
     Baender der Startseite. */
  --gold:   rgba(255,255,255,0.55);
  --gold-l: rgba(255,255,255,0.62);

  /* ── Mass ─────────────────────────────────────────────────── */
  /* 999px fuer alles Bedienbare, 18px Karten, 12px Felder. */
  --radius:   12px;
  --radius-l: 18px;
  --max-w:    1200px;

  /* Schatten faellt nach unten, nicht ringsum. Dieselben Werte wie
     --lift auf der Startseite, damit das Anheben beim Ueberfahren
     ueberall gleich aussieht. */
  --shadow-s: 0 1px 2px rgba(22,24,28,0.05);
  --shadow-m: 0 1px 2px rgba(22,24,28,0.05), 0 14px 26px -10px rgba(22,24,28,0.26);
  --shadow-l: 0 2px 4px rgba(22,24,28,0.06), 0 26px 44px -14px rgba(22,24,28,0.24);
}

/* ── Papierkorn ─────────────────────────────────────────────
   Die Startseite legt dafuer ein eigenes <div class="grain"> ueber
   die Seite. Hier gibt es dieses Element nicht, und Markup wird
   nicht angefasst, also uebernimmt body::after dieselbe Aufgabe mit
   derselben Textur. Ohne Zeigerereignisse, also ohne Einfluss auf
   Bedienbarkeit. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

/* ── Kopfzeile ──────────────────────────────────────────────
   main.css setzt hier Weiss und eine graue Kante fest. Die
   schwebende Pillen-Navigation der Startseite laesst sich ohne
   neues Markup nicht nachbauen, also bleibt es dieselbe schlichte
   Leiste, nur auf Papier und mit Haarlinie. */
#site-header {
  background: rgba(250,248,244,0.88);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  box-shadow: none;
  border-bottom: 1px solid var(--gray-100);
}

/* ── Rechtliche Hinweisboxen ────────────────────────────────
   Datenschutz und AGB definieren fuer diese Kaesten noch #1A6CF5,
   ein helles Blau aus einer frueheren Fassung, das in keiner der
   beiden Paletten mehr vorkommt. Die Klasse wird derzeit in keiner
   der beiden Seiten benutzt, das Blau ist also nie zu sehen. Die
   Regel steht trotzdem hier, damit es nicht zurueckkommt, falls die
   Boxen spaeter eingesetzt werden. Deckkraft wie --acc-soft und
   --acc-line auf der Startseite. */
.legal-notice {
  background: rgba(27,63,126,0.06);
  border: 1px solid rgba(27,63,126,0.20);
  border-radius: var(--radius);
}

/* ── Typografie ─────────────────────────────────────────────
   Die Hausschrift stimmt bereits (--serif zeigt in main.css auf
   Cabinet Grotesk). Angeglichen wird nur das engere Tracking der
   grossen Zeilen, wie es .h-sec auf der Startseite fuehrt. */
.legal-page h1,
.blog-intro h1 { letter-spacing: -0.028em; }