/* Minimal brand styling for content-detail-page (Supabase Edge Function,
   outside the Next.js/Tailwind build) -- a static, stably-URLed stylesheet
   so the function can link it without depending on Next.js build hashes.
   Token values are copied from app/globals.css; keep in sync by hand if
   the brand palette changes (small, deliberately duplicated subset). */

:root {
  --color-bg: #fafafe;
  --color-fg: #1f2641;
  --color-fg-muted: #4b5575;
  --color-headline: #0089b8;
  --color-accent: #4fb8df;
  --hairline: rgba(31, 38, 65, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1f2641;
    --color-fg: #f5f7ff;
    --color-fg-muted: #b8c0e6;
    --color-headline: #00b1ea;
    --color-accent: #6fcaec;
    --hairline: rgba(245, 247, 255, 0.12);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
  line-height: 1.6;
}

article {
  max-width: 680px;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}

h1 {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-fg);
  margin: 0 0 1.5rem;
}

p {
  color: var(--color-fg-muted);
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
}

img {
  max-width: 100%;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}

a {
  color: var(--color-headline);
}

[role="status"] {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.5rem;
}

.vertiefung-links {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 1.5rem;
  font-size: 0.95rem;
}