/* Farb-Tokens aus der Vorlage (vorlagen/chatllm-app/app/globals.css), als HSL-Werte.
   Schriften kommen in Phase 1 als lokale Dateien dazu; bis dahin Systemschrift. */
:root {
  --background: 0 0% 98%;
  --foreground: 220 15% 10%;
  --primary: 166 76% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 166 30% 94%;
  --muted-foreground: 220 9% 40%;
  --border: 166 20% 86%;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: 220 15% 8%;
    --foreground: 0 0% 98%;
    --primary: 166 70% 40%;
    --secondary: 166 25% 14%;
    --muted-foreground: 220 9% 70%;
    --border: 166 15% 22%;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
.karte {
  width: 100%;
  max-width: 28rem;
  padding: 28px 24px;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--secondary));
}
.marke { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 700; color: hsl(var(--primary)); }
.punkt { width: 12px; height: 12px; border-radius: 50%; background: hsl(var(--primary)); }
h1 { margin: 0 0 8px; font-size: 1.6rem; letter-spacing: -0.01em; }
p { margin: 0 0 8px; }
.klein { font-size: 0.85rem; color: hsl(var(--muted-foreground)); margin-top: 16px; }