/* =============================================================================
   Fellowship-Site, Rahmen-Stylesheet: Header, Sidebar, Footer. Marke "Stephan Gensch".
   Palette und Typo wie Docs/doc.css und Decks/css/stephan-gensch.css:
     Type:    Space Grotesk (Display), Inter (Body), JetBrains Mono (Kicker/Code)
     Palette: Lime "Signal" #A3E635/#84CC16, text-safe #3F6212
              Apricot "Warmth" #F8B07A/#F97316, text-safe #C2410C
              Coal/Zinc "Ink" #1A1A1E + Zinc-Skala
   Regel: ein Lime-Fokus pro Ansicht, nie kleine Lime-Schrift auf Weiss
          (dafuer #3F6212). Fonts sind lokal, keine externen Anfragen.

   Diese Datei laedt jede Route. Textseiten und Startseite laden danach
   site.css; die uebernommenen HTML-Seiten (Prototypen, Benchmark-Matrix,
   Druckboegen) laden nur diese Datei und bringen ihr eigenes CSS mit. Deshalb
   tragen Tokens das Praefix --sg- und Klassen das Praefix sg-, und die
   Komponenten setzen Schrift, Abstaende und Farben selbst. Element-Regeln der
   eingebetteten Seiten (header, footer, p, a, button) greifen so nicht durch.
   ============================================================================= */

@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/SpaceGrotesk.ttf') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/JetBrainsMono.ttf') format('truetype'); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --sg-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --sg-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sg-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --sg-lime: #84CC16;
  --sg-lime-bright: #A3E635;
  --sg-lime-ink: #3F6212;
  --sg-apricot: #F8B07A;
  --sg-orange-ink: #C2410C;

  /* Light (Default) */
  --sg-bg: #FFFFFF;
  --sg-surface: #FAFAFA;
  --sg-surface-2: #F4F4F5;
  --sg-text: #1A1A1E;
  --sg-muted: #52525B;
  --sg-line: #E4E4E7;
  --sg-link: #3F6212;
  --sg-accent: #84CC16;
  --sg-kicker: #3F6212;
  --sg-focus: #3F6212;
  --sg-code: #C2410C;
  --sg-header-bg: rgba(255, 255, 255, 0.86);
  --sg-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 8px 24px rgba(24, 24, 27, 0.06);

  --sg-maxw: 1280px;
  --sg-sidebar-w: 264px;
  --sg-header-h: 60px;
}

:root[data-theme='dark'] {
  --sg-bg: #1A1A1E;
  --sg-surface: #212127;
  --sg-surface-2: #27272A;
  --sg-text: #FAFAFA;
  --sg-muted: #A1A1AA;
  --sg-line: #3A3A42;
  --sg-link: #A3E635;
  --sg-accent: #A3E635;
  --sg-kicker: #A3E635;
  --sg-focus: #A3E635;
  --sg-code: #F8B07A;
  --sg-header-bg: rgba(26, 26, 30, 0.86);
  --sg-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --sg-bg: #1A1A1E; --sg-surface: #212127; --sg-surface-2: #27272A;
    --sg-text: #FAFAFA; --sg-muted: #A1A1AA; --sg-line: #3A3A42;
    --sg-link: #A3E635; --sg-accent: #A3E635; --sg-kicker: #A3E635; --sg-focus: #A3E635; --sg-code: #F8B07A;
    --sg-header-bg: rgba(26, 26, 30, 0.86);
    --sg-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
  }
}

/* Anker nicht unter dem klebenden Header verschwinden lassen. */
html { scroll-padding-top: calc(var(--sg-header-h) + 16px); }

.sg-skip, .sg-header, .sg-header *, .sg-sidebar, .sg-sidebar *, .sg-footer, .sg-footer * { box-sizing: border-box; }
.sg-skip, .sg-header, .sg-sidebar, .sg-footer { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- Sprunglink ------------------------------------------------------------ */
.sg-skip {
  position: absolute; top: 10px; left: -9999px; z-index: 1100;
  padding: 8px 14px; border-radius: 9px;
  font-family: var(--sg-body); font-size: 15px; font-weight: 600; line-height: 1.4;
  color: var(--sg-bg); background: var(--sg-text); text-decoration: none;
}
.sg-skip:focus { left: 12px; }

/* ---- Header ---------------------------------------------------------------- */
.sg-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  height: var(--sg-header-h); margin: 0; padding: 0 20px;
  font-family: var(--sg-body); font-size: 16px; line-height: 1.4; text-align: left; color: var(--sg-text);
  background: var(--sg-header-bg);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border: 0; border-bottom: 1px solid var(--sg-line);
}
.sg-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--sg-text); text-decoration: none; }
.sg-brand:hover { color: var(--sg-text); text-decoration: none; }
.sg-brand-mark svg { display: block; width: 34px; height: 34px; max-width: none; border-radius: 9px; }
.sg-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sg-brand-kicker { font-family: var(--sg-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-kicker); }
.sg-brand-title { font-family: var(--sg-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }

.sg-nav-toggle, .sg-theme-toggle {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0; padding: 0;
  border: 1px solid var(--sg-line); border-radius: 9px;
  background: var(--sg-surface); color: var(--sg-text); box-shadow: none;
  font: inherit; line-height: 1; cursor: pointer;
}
.sg-nav-toggle:hover, .sg-theme-toggle:hover { border-color: var(--sg-muted); background: var(--sg-surface); }
.sg-nav-toggle:focus-visible, .sg-theme-toggle:focus-visible, .sg-brand:focus-visible, .sg-nav-item:focus-visible, .sg-footer a:focus-visible, .sg-skip:focus-visible {
  outline: 2px solid var(--sg-focus); outline-offset: 2px;
}
.sg-nav-toggle:focus-visible, .sg-theme-toggle:focus-visible, .sg-skip:focus-visible { border-radius: 9px; }
.sg-nav-item:focus-visible { border-radius: 8px; }
.sg-brand:focus-visible, .sg-footer a:focus-visible { border-radius: 4px; }
.sg-nav-toggle { flex-direction: column; gap: 4px; }
.sg-nav-toggle span { display: block; width: 18px; height: 2px; margin: 0; background: currentColor; border-radius: 2px; }
.sg-theme-toggle svg { display: block; width: 18px; height: 18px; max-width: none; }
.sg-theme-toggle .sg-i-moon { display: none; }
:root[data-theme='dark'] .sg-theme-toggle .sg-i-sun { display: none; }
:root[data-theme='dark'] .sg-theme-toggle .sg-i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .sg-theme-toggle .sg-i-sun { display: none; }
  :root:not([data-theme='light']) .sg-theme-toggle .sg-i-moon { display: block; }
}

/* ---- Layout: Sidebar plus Hauptbereich ------------------------------------- */
.sg-layout { display: flex; align-items: flex-start; max-width: var(--sg-maxw); margin: 0 auto; }
.sg-main { flex: 1 1 auto; min-width: 0; }
/* Druckboegen (A3/A4 in mm) sind breiter als der Hauptbereich. Am Bildschirm
   skaliert das UI-Skript sie per zoom auf die Breite, hoechstens bis 0,45;
   darunter und bei grosser Browser-Vergroesserung scrollt der Bereich seitlich. Nur fuer Seiten mit @page, weil ein Scroll-Container
   position: sticky im Inhalt aushebeln wuerde. */
.sg-app.is-print { overflow-x: auto; }
.sg-main:focus { outline: none; }

.sg-sidebar {
  position: sticky; top: var(--sg-header-h); align-self: flex-start;
  flex: 0 0 var(--sg-sidebar-w); width: var(--sg-sidebar-w);
  height: calc(100vh - var(--sg-header-h)); overflow-y: auto;
  margin: 0; padding: 24px 12px 40px 20px;
  font-family: var(--sg-body); font-size: 16px; line-height: 1.65; text-align: left; color: var(--sg-text);
  background: transparent; border: 0; border-right: 1px solid var(--sg-line);
}
.sg-sidebar nav { display: block; margin: 0; padding: 0; }
.sg-nav-section { margin: 0 0 18px; }
.sg-nav-section-title { margin: 0 0 6px 8px; font-family: var(--sg-mono); font-size: 11px; font-weight: 400; line-height: 1.65; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-muted); }
.sg-nav-list { list-style: none; margin: 0; padding: 0; }
.sg-nav-list li { margin: 0; padding: 0; }
.sg-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 8px; border-left: 2px solid transparent;
  font-size: 14.5px; font-weight: 400; line-height: 1.65; color: var(--sg-text); text-decoration: none;
}
.sg-nav-item:hover { color: var(--sg-text); background: var(--sg-surface-2); text-decoration: none; }
.sg-nav-item[aria-current='page'] { background: var(--sg-surface-2); border-left-color: var(--sg-accent); font-weight: 600; }
.sg-nav-badge {
  margin-left: auto; padding: 1px 5px; border: 1px solid var(--sg-line); border-radius: 5px;
  font-family: var(--sg-mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.06em; color: var(--sg-muted);
}

/* Eingeklappt (Desktop): Zustand setzt das Kopf-Skript vor dem ersten Rendern. */
@media (min-width: 861px) {
  :root[data-sidebar='collapsed'] .sg-sidebar { display: none; }
}

/* ---- Footer ---------------------------------------------------------------- */
.sg-footer {
  display: block; max-width: none; margin: 40px 0 0; padding: 0;
  font-family: var(--sg-body); font-size: 16px; line-height: 1.55; text-align: left; color: var(--sg-text);
  background: transparent; border: 0; border-top: 1px solid var(--sg-line);
}
/* Druckboegen haben einen grauen Seitenhintergrund ohne Dunkelmodus: dort
   brauchen Sidebar und Footer eine eigene Flaeche, sonst fehlt der Kontrast. */
body:has(.sg-app.is-print) .sg-header, body:has(.sg-app.is-print) .sg-sidebar, body:has(.sg-app.is-print) .sg-footer { background: var(--sg-bg); }
.sg-footer-inner {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 18px;
  max-width: var(--sg-maxw); margin: 0 auto; padding: 36px 40px 56px;
}
.sg-footer-wordmark { display: block; }
.sg-footer-wordmark svg { display: block; height: 26px; width: auto; max-width: 100%; color: var(--sg-text); }
.sg-footer-note { max-width: 44rem; margin: 12px 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--sg-muted); }
.sg-footer-links { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; }
.sg-footer-links a { font-size: 0.9rem; color: var(--sg-muted); text-decoration: none; }
.sg-footer-links a:hover { color: var(--sg-link); }
.sg-footer-copy { grid-column: 1 / -1; margin: 0; font-family: var(--sg-mono); font-size: 12px; line-height: 1.55; color: var(--sg-muted); }

.sg-scrim { display: none; }

/* ---- Responsive: Sidebar als Schublade ------------------------------------- */
@media (max-width: 860px) {
  .sg-sidebar {
    position: fixed; top: var(--sg-header-h); left: 0; z-index: 1001;
    height: calc(100vh - var(--sg-header-h));
    background: var(--sg-bg);
    box-shadow: var(--sg-shadow);
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s;
  }
  .sg-nav-open .sg-sidebar { transform: none; visibility: visible; }
  .sg-nav-open .sg-scrim { display: block; position: fixed; inset: var(--sg-header-h) 0 0 0; z-index: 1000; background: rgba(0, 0, 0, 0.4); }
  .sg-footer-inner { grid-template-columns: 1fr; padding-left: 22px; padding-right: 22px; }
}

/* ---- Druck: nur der Inhalt ------------------------------------------------- */
@media print {
  .sg-skip, .sg-header, .sg-sidebar, .sg-footer, .sg-scrim { display: none !important; }
  .sg-layout { display: block; max-width: none; margin: 0; }
  .sg-app.is-print { overflow: visible; zoom: 1 !important; }
}