/* socially — generated from tokens.json */
:root, [data-theme="hell"] {
  --brand: #1c1e4f; /* Die socially-Markenfarbe (Navy) für Logo, große Flächen, Primär-Buttons und Post-Hintergründe. Im dunklen Theme hell, damit das Logo auf dunklem Grund steht. */
  --on-brand: #ffffff; /* Text und Logo auf `brand`-Flächen (15:1 und mehr). */
  --surface: #fbfaf7; /* Seiten- und Folienhintergrund: ein warmes Off-White statt reinem Weiß. */
  --surface-raised: #ffffff; /* Karten, Formulare und Flächen, die sich vom `surface` abheben. */
  --surface-soft: #fdebe4; /* Zarte Akzent-Tönung für Info-Kästen, Tipp-Posts und Hervorhebungen hinter Text. */
  --ink: #1c1e4f; /* Fließtext und Überschriften auf `surface`, `surface-raised` und `surface-soft` (ab 11.8:1). */
  --ink-muted: #5a5c7a; /* Nebentext, Bildunterschriften, Metadaten auf `surface`, `surface-raised` und `surface-soft` (ab 5.3:1). */
  --accent: #ff7a59; /* Koralle: Highlight-Buttons, Sticker, Balken, hervorgehobene Formen in Posts. Als Fläche, nicht als Textfarbe auf hellem Grund – dafür `accent-text`. */
  --on-accent: #1c1e4f; /* Text und Icons auf `accent`-Flächen (ab 6:1). */
  --accent-text: #b5401f; /* Akzent als Schrift: Links, hervorgehobene Wörter, Kicker-Zeilen auf `surface`, `surface-raised` und `surface-soft` (ab 4.9:1). */
  --line: #e4e3ea; /* Trennlinien und Kartenränder (dekorativ, trägt keine Bedeutung). */
  --focus: var(--accent-text); /* Fokusring: 2px durchgehend mit 2px Abstand, auf jedem Grund mindestens 3:1. */
  --shadow-card: 0 8px 24px rgba(28,30,79,0.08); /* Schwebende Karten und Mockups. Sparsam einsetzen. */
}
[data-theme="dunkel"] {
  --brand: #ecebf6;
  --on-brand: #1c1e4f;
  --surface: #121331;
  --surface-raised: #1b1d45;
  --surface-soft: #272a5e;
  --ink: #f3f2ee;
  --ink-muted: #b4b5cf;
  --accent: #ff8a6c;
  --on-accent: #1c1e4f;
  --accent-text: #ff9f86;
  --line: #34376b;
  --focus: var(--accent-text);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
}
:root {
  --space-1: 4px; /* Abstand Icon zu Text, sehr enge Gruppen. */
  --space-2: 8px; /* Abstand Kicker zu Headline, zwischen Tags. */
  --space-3: 12px; /* Button-Innenabstand vertikal, Listenabstände. */
  --space-4: 16px; /* Standard-Abstand zwischen Elementen, Karten-Innenabstand klein. */
  --space-6: 24px; /* Karten-Innenabstand, Abstand zwischen Absätzen und Blöcken. */
  --space-8: 32px; /* Rand von Posts und Folien (bei 1080px-Posts: ×3 = 96px). */
  --space-12: 48px; /* Abstand zwischen Abschnitten. */
  --radius-sm: 8px; /* Eingabefelder, Tags, kleine Bilder. */
  --radius-md: 14px; /* Karten, Bilder, Info-Kästen. */
  --radius-lg: 24px; /* Große Flächen, Post-Formen, App-Icon-Proportion. */
  --radius-pill: 999px; /* Buttons und Sticker – rund wie die Linie im Logo. */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --text-display: 800 56px/60px var(--font-display); /* Große Aussagen auf Posts, Titelfolien, Website-Hero. */
  --text-h1: 700 36px/42px var(--font-display); /* Seitentitel, Post-Headlines. */
  --text-h2: 700 26px/32px var(--font-display); /* Abschnittstitel. */
  --text-h3: 600 20px/26px var(--font-display); /* Kartentitel, Zwischenüberschriften. */
  --text-body-lg: 400 18px/28px var(--font-body); /* Einleitungen, Lead-Absätze. */
  --text-body: 400 16px/24px var(--font-body); /* Standard-Fließtext. */
  --text-small: 400 14px/20px var(--font-body); /* Fußnoten, Bildunterschriften, Kontaktzeilen. */
  --text-label: 700 12px/16px var(--font-body); /* Kicker-Zeilen über Headlines, Tags, Buttons klein. Immer in Großbuchstaben setzen. */
}
.display {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 60px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.h1 {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.h3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.body-lg {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}