/* High Jinks Designsystem · Basis
   Idee: Die Marker-Schrift ist das Markenzeichen der High Jinks, wie mit dem Edding aufs Segel geschrieben. Dazu Signalflaggen-Farben,
   feine Linien wie auf einer Seekarte. Weiß wie das Segel, Blau wie die Klasse, ein roter Akzent. */
/* Permanent Marker hat nur einen Schnitt. Der Gewichtsbereich verhindert, dass Browser ihn künstlich fetten. */
@font-face { font-family: "Permanent Marker"; src: url("../fonts/permanent-marker.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --bg: #ffffff;          /* Segeltuchweiß */
  --surface: #f0f4fb;     /* Fläche */
  --raise: #e2eaf7;       /* erhöhte Fläche */
  --text: #0a1e3f;        /* Tintenblau */
  --text-2: rgba(10, 30, 63, 0.78);
  --text-3: rgba(10, 30, 63, 0.6);
  --line: rgba(11, 58, 143, 0.16);
  --line-2: rgba(11, 58, 143, 0.38);
  --signal: #0b3a8f;      /* Klassenblau */
  --signal-ink: #ffffff;
  --red: #d7263d;         /* Signalrot */
  --sea: #1c8fb0;         /* Flachwasser */
  --blue: #072a69;        /* Tiefblau */
  --good: #1a7f52;
  --bad: #c4321f;
  --display: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 6px;
  --r-s: 4px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { min-height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.5; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--signal); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Kopfzeile auf allen Seiten */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--signal); text-decoration: none; line-height: 1; }
.brand::before { content: ""; width: 13px; height: 13px; background: var(--red); flex: 0 0 auto; }
.bar-meta { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); text-decoration: none; white-space: nowrap; }
a.bar-meta:hover { color: var(--signal); }

.eyebrow { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.mono { font-family: var(--mono); }

.foot { border-top: 1px solid var(--line); padding-block: 16px 28px; display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-3); }
.foot a { color: var(--text-2); text-decoration: none; }
.foot a:hover { color: var(--signal); }
.foot strong { color: var(--text-2); font-weight: 500; }

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