/* ═══════════════════════════════════════════════════════════════════════════
   courseSyncSystems — Stil für index / impressum / datenschutz
   ═══════════════════════════════════════════════════════════════════════════

   Farben, Schrift, Abstände und Radien stammen aus
   csc-mono/agent/themes/courseSyncSystems-design-language.md — das ist die
   Quelle für diese Marke. Wo diese Datei davon abweicht, steht der Grund
   daneben; sonst gilt: dort ändern, hierher kopieren.

   Die Marke lebt zusätzlich als `courseSync` in
   csc-mono/packages/ui/src/config/palettes.ts. Die Primär- und Akzentwerte
   sind in beiden identisch (#047857 / #6EE7B7). Unterschiedlich sind nur die
   DUNKLEN FLÄCHEN: die Apps fahren dort neutrales Grau (DARK_NEUTRAL), diese
   Seite das grün getönte Dunkel der Markendoku. Absicht — die Apps teilen
   sich ihr Dunkel mit swimgood, dieser Auftritt gehört nur courseSync.

   Keine externe Anfrage: Open Sans liegt in ./fonts/, sonst nichts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Schrift, selbst gehostet ───────────────────────────────────────────── */
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/open-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/open-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/open-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Token ──────────────────────────────────────────────────────────────── */
:root {
  --css-bg:            #ffffff;
  --css-surface:       #f4f7f6;
  --css-surface-2:     #ffffff;
  --css-text:          #0f1f1a;
  --css-text-muted:    #566862;   /* aus palettes.ts, nicht #6B807A der Doku:
                                     #6B807A hält auf getönten Füllungen keine
                                     4,5:1 — nachgerechnet in kontraste.mjs */
  --css-border:        #e1eae7;
  --css-border-strong: #8e8e97;   /* tragende Kante, WCAG 1.4.11 */
  --css-primary:       #047857;
  --css-primary-hover: #036049;
  --css-accent:        #6ee7b7;
  --css-on-primary:    #ffffff;
  --css-on-accent:     #03241a;

  --raum-1: 4px;  --raum-2: 8px;  --raum-3: 12px; --raum-4: 16px;
  --raum-5: 24px; --raum-6: 32px; --raum-8: 48px; --raum-10: 64px;

  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --schatten: 0 1px 2px rgba(15,31,26,.06), 0 4px 12px rgba(15,31,26,.05);

  --schrift: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, Arial, sans-serif;
  /* Die Nutzschrift der Seite. Augenbrauen, Schichtnamen und Fusszeilen-
     Metadaten stehen im Festbreitensatz — courseSync ist Infrastruktur,
     und der Satz sagt das, ohne dass es jemand hinschreiben muss. */
  --schrift-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
                  'Liberation Mono', monospace;

  --bahn: 1120px;   /* Aussenmass */
  --lauf: 680px;    /* Lesebreite, Doku §5: ~720px */
}

@media (prefers-color-scheme: dark) {
  :root {
    --css-bg:            #06120e;
    --css-surface:       #0c1f19;
    --css-surface-2:     #12281f;
    --css-text:          #eaf7f1;
    --css-text-muted:    #9db5ab;  /* Doku nennt #8AA69B (4,26:1 auf
                                      surface-2) — angehoben auf 5,26:1 */
    --css-border:        #16352b;
    --css-border-strong: #3f6b5b;
    --css-primary:       #34d399;
    --css-primary-hover: #10b981;
    --css-accent:        #6ee7b7;
    --css-on-primary:    #03241a;
    --schatten: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--css-bg);
  color: var(--css-text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.bahn { width: min(100% - 40px, var(--bahn)); margin-inline: auto; }
.lauf { max-width: var(--lauf); }

:where(a, button):focus-visible {
  outline: 2px solid var(--css-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Marke ──────────────────────────────────────────────────────────────── */
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marke-glyph { width: 26px; height: 26px; flex: none; display: block; }
.marke-wort { font-size: 17px; letter-spacing: -.01em; font-weight: 600; }
/* Schreibweise aus §2 der Markendoku: `course` und `Systems` halbfett,
   `Sync` fett und in der Primärfarbe. */
.marke-wort b { font-weight: 700; color: var(--css-primary); }

/* ── Kopfleiste ─────────────────────────────────────────────────────────── */
.kopfleiste {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--css-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--css-border);
}
.kopfleiste-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--raum-4); min-height: 62px;
}
.kopfleiste-nav { display: flex; align-items: center; gap: var(--raum-5); }
.kopfleiste-nav a {
  font-size: 14px; color: var(--css-text-muted); text-decoration: none;
}
.kopfleiste-nav a:hover { color: var(--css-text); }
@media (max-width: 620px) { .kopfleiste-nav { display: none; } }

/* ── Bausteine ──────────────────────────────────────────────────────────── */
.augenbraue {
  display: block;
  font-family: var(--schrift-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--css-primary);
  margin: 0 0 var(--raum-4);
}

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--raum-5);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.knopf--voll { background: var(--css-primary); color: var(--css-on-primary); }
.knopf--voll:hover { background: var(--css-primary-hover); }
.knopf--leer { color: var(--css-text); border-color: var(--css-border-strong); background: transparent; }
.knopf--leer:hover { background: var(--css-surface); }

/* ── Fusszeile ──────────────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--css-border); margin-top: var(--raum-10); padding: var(--raum-8) 0 var(--raum-6); }
.fuss-innen { display: flex; flex-wrap: wrap; gap: var(--raum-5); justify-content: space-between; align-items: flex-start; }
.fuss-nav { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5); }
.fuss-nav a { font-size: 14px; color: var(--css-text-muted); text-decoration: none; }
.fuss-nav a:hover { color: var(--css-text); text-decoration: underline; }
.fuss-firma {
  font-family: var(--schrift-mono); font-size: 12px; line-height: 1.7;
  color: var(--css-text-muted); text-align: right;
}
@media (max-width: 620px) { .fuss-firma { text-align: left; } }

/* ── Rechtstexte (impressum / datenschutz) ──────────────────────────────── */
.recht { padding: var(--raum-10) 0 0; }
/* Der Kasten bleibt so breit wie Kopf- und Fusszeile, nur der TEXT wird auf
   Lesebreite gedeckelt. Damit steht die linke Kante überall gleich. */
.recht > * { max-width: var(--lauf); }
.recht h1 { font-size: clamp(28px, 5vw, 38px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 var(--raum-3); }
.recht-vor { margin: 0 0 var(--raum-8); color: var(--css-text-muted); font-size: 17px; }
.recht-block { border-top: 1px solid var(--css-border); padding: var(--raum-5) 0; }
.recht-block h2 { font-size: 16px; font-weight: 600; margin: 0 0 var(--raum-2); letter-spacing: -.005em; }
.recht-block p { margin: 0 0 var(--raum-2); color: var(--css-text-muted); }
.recht-block p:last-child { margin-bottom: 0; }
.recht-block a { color: var(--css-primary); text-decoration: none; }
.recht-block a:hover { text-decoration: underline; }
.recht-block ul { margin: 0 0 var(--raum-2); padding-left: 1.15em; color: var(--css-text-muted); }
.recht-block li { margin-bottom: var(--raum-1); }
/* Anschrift, Register, Kontakt — Zeilen, die als Block gelesen werden. */
.recht-block .zeilen { color: var(--css-text); font-style: normal; }
.recht-block .zeilen span { display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}