/* ═══════════════════════════════════════════════════════════════════════════
   legal.sw-labs.de -- Impressum / Legal notice

   Plain CSS, kein Build. Die Tokens sind aus dem sw-labs-website-Repo,
   Branch `main`, uebernommen -- `src/styles/tokens.css` (Farben, Typo-Skala,
   Abstaende, Radien, Korn) und `src/styles/global.css` (@font-face inklusive
   der gerechneten Fallback-Metriken, Grundtypografie).
   Uebernommen wurden ausschliesslich Werte und Font-Referenzen, kein
   Component-Code, kein Astro, kein Build-Setup.

   Nicht uebernommen: das Liquid-Glass-System (--glass-*, --black-glass-*).
   Es traegt dort Marketing-Karten mit Blur und mehrschichtigen Verlaeufen;
   auf einer Rechtsseite mit drei Datenbloecken waere das Dekoration ohne
   Gegenstand -- und jede `backdrop-filter`-Flaeche kostet einen
   Compositing-Pass, den diese Seite nicht braucht.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Schriften ──────────────────────────────────────────────────────────
   Cabinet Grotesk (Ueberschriften) und Switzer (Fliesstext), beide vom
   eigenen Origin, beide variabel. Playfair Display fehlt hier bewusst: es
   traegt auf der Hauptsite ausschliesslich Akzent-Hervorhebung und haette
   auf einer Rechtsseite keine Rolle. --font-mono ist ein reiner
   System-Stack ohne Webfont, genau wie dort.

   HINWEIS ZUR LIZENZ: Beide Familien stammen von Fontshare (ITF Free Font
   License). Self-Hosting ist erlaubt, Subsetting und Formatkonvertierung
   sind es nicht -- die Dateien liegen deshalb unveraendert im Repo, so wie
   sie auch im Quell-Repo liegen. Dort liegt allerdings KEIN Lizenztext
   daneben; siehe README, Abschnitt "Offene Punkte". */
@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/cabinet-grotesk-variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/switzer-variable.woff2') format('woff2-variations');
}

/* Fallback-Familien mit angeglichenen Metriken. Gerechnet gegen Arial auf
   x-Hoehen-Gleichheit, Werte aus den Font-Dateien gelesen -- uebernommen aus
   global.css des Quell-Repos. Ohne sie springt das Layout beim Font-Swap. */
@font-face {
  font-family: 'Switzer Fallback';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'), local('DejaVu Sans'), local('Segoe UI'), local('Roboto'), local('Nimbus Sans'), local('sans-serif');
  size-adjust: 102.4%;
  ascent-override: 95.7%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Cabinet Grotesk Fallback';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'), local('DejaVu Sans'), local('Segoe UI'), local('Roboto'), local('Nimbus Sans'), local('sans-serif');
  size-adjust: 95.3%;
  ascent-override: 91.3%;
  descent-override: 29.4%;
  line-gap-override: 0%;
}

/* ── Tokens ── */
:root {
  --color-bg:          #121214;
  --color-bg-rgb:      18, 18, 20;
  --color-card:        #1b1b1f;
  --color-border:      #26262d;
  --color-border-dim:  #1e1e23;

  --color-text:        #f0f0f2;
  --color-text-muted:  #b4b4bc;
  --color-text-faint:  #6a6a74;

  --color-accent:        #f59e0b;
  --color-accent-bright: #fbbf24;
  --color-accent-dim:    rgba(245, 158, 11, 0.15);
  --color-accent-mid:    rgba(245, 158, 11, 0.25);

  --font-display: 'Cabinet Grotesk', 'Cabinet Grotesk Fallback', Arial, sans-serif;
  --font-sans:    'Switzer', 'Switzer Fallback', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --text-page-title: clamp(2rem, 5vw, 3.25rem);
  --text-lead:       clamp(1rem, 1.35vw, 1.125rem);
  --text-body:       1rem;
  --text-small:      0.875rem;
  --text-label:      0.75rem;

  --space-1:  8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;

  /* Der Korridor ist enger als --container (960px) der Hauptsite: dort
     tragen Karten in zwei Spalten, hier steht eine einzelne Textspalte,
     und 960px waeren ueber 100 Zeichen pro Zeile. */
  --corridor: 720px;

  --grain-opacity: 0.12;
  --grain-size:    160px;
}

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

html {
  background-color: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Korn ueber der ganzen Flaeche. Statische SVG-Kachel als Data-URI, einmal
   rasterisiert und gekachelt -- kostet keine Arbeit pro Frame und laedt
   keine externe Datei. Uebernommen aus global.css des Quell-Repos; dort
   liegt es auf z-index 9998, hier genuegt 1, weil es ueber dieser Seite
   keine Modals gibt. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: var(--grain-size) var(--grain-size);
  background-repeat: repeat;
}

.sheet {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--corridor);
  margin: 0 auto;
  padding: var(--space-8) var(--space-3) 96px;
  flex: 1 1 auto;
}

/* ── Kopf ── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  font-weight: var(--font-weight-bold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-top: var(--space-1);
}

/* Die Entity-Zeile. Sie nennt bewusst KEINE einzelnen Domains -- die Seite
   gilt fuer alle Angebote und soll nicht bei jeder neuen Domain angefasst
   werden muessen. */
.entity {
  margin-top: var(--space-2);
  font-size: var(--text-lead);
  color: var(--color-text-muted);
}

.rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-5) 0 0;
}

/* ── Abschnitte ── */
section { margin-top: var(--space-5); }

h2 {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-dim);
}

section > p, section > .block { margin-top: var(--space-2); }

.block p { margin: 0; line-height: 1.7; }
.block p + p { margin-top: 2px; }

.label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.03em;
  color: var(--color-text-faint);
}

.note {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-faint);
}

.prose { margin-top: var(--space-2); color: var(--color-text-muted); }

/* ── Platzhalter ────────────────────────────────────────────────────────
   Bewusst laut. Ein TODO, das aussieht wie Fliesstext, geht live.
   Akzentfarbe auf gedaempfter Akzentflaeche: #fbbf24 auf dem Ergebnis von
   rgba(245,158,11,0.15) ueber #121214 misst deutlich ueber 4.5:1.
   `aria-label` steht im Markup, damit die Rolle auch vorgelesen wird. */
.todo {
  display: inline-block;
  background: var(--color-accent-dim);
  border: 1px solid var(--color-accent-mid);
  color: var(--color-accent-bright);
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
}

/* ── Links, Fokus, Auswahl ── */
a { color: var(--color-accent-bright); text-decoration-color: var(--color-accent-mid); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--color-accent-bright); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

::selection { background: var(--color-accent-mid); color: var(--color-text); }

/* ── Fuss / Sprachwechsel ───────────────────────────────────────────────
   Zwei HTML-Dateien, ein Link dazwischen. Kein i18n-Framework, keine
   Locale-Erkennung, kein Routing-Layer -- die Zuordnung steht als hreflang
   im <head> und ist damit maschinenlesbar, ohne dass hier Code laeuft. */
.foot {
  margin-top: var(--space-6);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-dim);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.03em;
  color: var(--color-text-faint);
}

@media (max-width: 820px) {
  .sheet { padding: var(--space-5) var(--space-2) var(--space-8); }
  section { margin-top: var(--space-4); }
}

@media print {
  body::after { display: none; }
  .foot { display: none; }
}