/* ==========================================================================
   ORYNT DESIGN SYSTEM — Foundation Layer
   Baustein 191 ("ORYNT — Brutal Premium Product Experience" Auftrag,
   Abschnitt 3: "Erst das ORYNT Design System definieren").

   AUDIT-BEFUND vor dieser Datei: jede ORYNT-Seite (orynt_interface.html,
   orynt_work.html, orynt_library.html, orynt_settings.html,
   orynt_account.html, orynt_faehigkeiten.html, ...) trug ihr eigenes,
   Byte-fuer-Byte identisches :root-Token-Set in einem eigenen <style>-Block -
   funktional konsistent, aber ohne einzige Quelle der Wahrheit. Ausserdem
   fehlten bislang: eine Spacing-Skala, eine Radius-Skala (real gemessen:
   15 verschiedene border-radius-Werte allein in orynt_interface.html - 1px,
   2px, 4px, 6px, 7px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 22px, 999px -
   exakt das im Auftrag beschriebene "keine 14 verschiedenen
   Rundungsradien"-Problem), eine Shadow-Skala (durchgehend Ad-hoc-Werte,
   keine Wiederverwendung) sowie ein Warnfarbe-Token (bislang nur ok/err,
   keine dritte Stufe fuer "warning").

   ARCHITEKTUR-ENTSCHEIDUNG: ORYNT hat keinen Build-Schritt und keine
   serverseitige Template-Engine (jede Seite ist eine eigenstaendige, vom
   HTTP-Server 1:1 ausgelieferte .html-Datei, siehe orynt_core_v2.py
   _serve_html()). Eine gemeinsame CSS-Datei ist trotzdem sicher moeglich:
   <link rel="stylesheet"> ist genau wie <style> block-rendernd (kein FOUC-
   Risiko), und die Kaskade garantiert, dass die SPAETER im <head> jeder
   Seite folgenden Seiten-eigenen <style>-Bloecke bei gleicher Spezifitaet
   weiterhin gewinnen - diese Datei ist damit rein ADDITIV: bestehende
   Seiten brechen dadurch nicht, sie bekommen nur zusaetzlich Zugriff auf
   die neuen Skalen-Token (Spacing/Radius/Shadow/Motion), waehrend ihre
   bestehenden :root-Bloecke unveraendert weiterlaufen. Eine Migration der
   Seiten auf ausschliesslich diese Datei (Entfernen der Duplikate) folgt
   schrittweise in spaeteren Bausteinen, sobald jede Seite einzeln getestet
   werden kann - kein riskanter Ein-Schritt-Umbau von sieben Seiten auf
   einmal.

   NICHT hier: die Theme-/Farbenblind-Erkennung selbst (kleines, synchrones
   Inline-<script> GANZ am Anfang jeder Seite, VOR jedem CSS-Parsing, damit
   kein falsches Theme kurz aufblitzt - siehe Kommentar in
   orynt_interface.html <head>) bleibt bewusst weiterhin je Seite dupliziert,
   das ist eine eigene, begruendete Entscheidung, keine Inkonsistenz.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* ---- Marke ---------------------------------------------------------- */
  --grad-a:      #8341fc;
  --grad-b:      #6d9afc;
  --grad-a-rgb:  131,65,252;
  --grad-b-rgb:  109,154,252;

  /* ---- Oberflaechen (hell) ---------------------------------------------
     Identisch zu den bisherigen, seiten-eigenen :root-Bloecken - hier nur
     konsolidiert, keine Werte geaendert. */
  --bg:           #ffffff;
  --glass:        rgba(255,255,255,.55);
  --glass-hi:     rgba(255,255,255,.78);
  --glass-border: rgba(255,255,255,.6);
  --sidebar-bg:   rgba(255,255,255,.45);
  --bot-bg:       rgba(255,255,255,.6);
  --bot-border:   rgba(20,20,45,.10);
  --card-bg:      rgba(255,255,255,.6);
  --border:       rgba(20,20,45,.08);
  --text:         #1a1a2e;
  --muted:        #6b7280;
  --blur:         blur(20px) saturate(160%);

  /* ---- Semantische Farben -----------------------------------------------
     ok/err bereits bestehend (siehe Farbenblind-Modus unten) - warn ist
     NEU: bislang gab es im gesamten Design keine dritte, unterscheidbare
     Warnstufe zwischen "normal" und "Fehler". */
  --ok-color:    #16a34a;
  --err-color:   #c53030;
  --warn-color:  #b45309;
  --warn-bg:     rgba(180,83,9,.12);

  /* ---- Error-Banner-Oberflaeche (Baustein 311, F13) ---------------------
     NEUE, bisher auf keiner Seite duplizierte Token (anders als --err-color,
     das seit vor dieser Datei auf jeder Seite im eigenen :root{} steht und
     damit von einer Aenderung hier abgeschirmt waere - siehe Kommentar oben
     "ARCHITEKTUR-ENTSCHEIDUNG"). --error-banner-bg/-border tragen daher
     sicher ein Theme-Override, ohne von einem Seiten-Duplikat ueberschattet
     zu werden. */
  --error-banner-bg:     rgba(197,48,48,.10);
  --error-banner-border: rgba(197,48,48,.28);

  /* ---- Spacing-Skala (4px-Basis) -----------------------------------------
     Ersetzt schrittweise die bisherigen Ad-hoc-px-Werte (6px/10px/14px/18px/
     22px/... quer durch alle Seiten) durch eine gemeinsame, vorhersagbare
     Reihe. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius-Skala -------------------------------------------------------
     Ersetzt die real gemessenen 15 verschiedenen border-radius-Werte durch
     fuenf klar abgegrenzte Stufen. */
  --radius-xs:   6px;    /* Chips, kleine Badges, Icon-Buttons */
  --radius-sm:  10px;    /* Eingabefelder, kleine Buttons/Karten */
  --radius-md:  16px;    /* Karten, Panels, Bot-Bubbles */
  --radius-lg:  22px;    /* grosse Flaechen, Sheets, Overlays, Modals */
  --radius-pill: 999px;  /* Pill-Buttons, Avatare */

  /* ---- Schatten-Skala ------------------------------------------------------
     Vorher: jeder box-shadow-Wert im gesamten Interface war ein Unikat.
     Jetzt: drei neutrale Erhebungsstufen + ein markenfarbiger Glow fuer
     hervorgehobene/aktive Elemente (Primary-Buttons, aktive Zustaende). */
  --shadow-sm:   0 2px 10px rgba(20,20,45,.08);
  --shadow-md:   0 8px 30px rgba(20,20,45,.12);
  --shadow-lg:   0 16px 60px rgba(20,20,45,.18);
  --shadow-glow: 0 4px 18px rgba(131,65,252,.28);

  /* ---- Bewegung -------------------------------------------------------------
     Gemeinsame Dauer-/Kurven-Token fuer die neue ORYNT Core Motion Language
     (Baustein-Reihe "Voice/Vision/Loader") - vorher hatte jede Animation im
     Interface ihre eigene, zufaellige Dauer/Kurve. */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  400ms;

  --sidebar-w: 260px;
  --kb-inset:  0px;
}

:root[data-theme="dark"] {
  --bg:           #14121f;
  --glass:        rgba(35,30,54,.55);
  --glass-hi:     rgba(45,39,68,.78);
  --glass-border: rgba(255,255,255,.08);
  --sidebar-bg:   rgba(22,19,34,.55);
  --bot-bg:       rgba(45,39,68,.6);
  --bot-border:   rgba(255,255,255,.10);
  --card-bg:      rgba(35,30,54,.6);
  --border:       rgba(255,255,255,.09);
  --text:         #ede9fb;
  --muted:        #a39dc4;

  --warn-color:   #f0a94e;
  --warn-bg:      rgba(240,169,78,.14);

  --error-banner-bg:     rgba(230,90,90,.14);
  --error-banner-border: rgba(230,90,90,.32);

  --shadow-sm:    0 2px 10px rgba(0,0,0,.25);
  --shadow-md:    0 8px 30px rgba(0,0,0,.35);
  --shadow-lg:    0 16px 60px rgba(0,0,0,.5);
  --shadow-glow:  0 4px 18px rgba(131,65,252,.4);
}

/* Farbenblind-Modus (Baustein "Punkt 3"): Gruen/Rot -> Blau/Orange
   (Okabe-Ito-Palette), unveraendert aus den bisherigen Seiten uebernommen. */
:root[data-colorblind="true"] {
  --ok-color:  #0072b2;
  --err-color: #e69f00;
}
:root[data-theme="dark"][data-colorblind="true"] {
  --ok-color:  #56b4e9;
  --err-color: #e69f00;
}

/* ---- Basis-Typografie -----------------------------------------------------
   Font-Smoothing/Rendering war bereits in jeder Seite identisch dupliziert -
   hier konsolidiert. Layout-Eigenschaften von body/html (flex, overflow,
   Hintergrund-Gradient) bleiben bewusst SEITENEIGEN, da sie sich zwischen
   Chat-Shell und einfacheren Unterseiten unterscheiden. */
body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Gemeinsame Display-Schrift fuer Marke/Ueberschriften (Sora) - vorher pro
   Seite einzeln auf h1/.wordmark angewandt, hier als wiederverwendbare
   Klasse fuer neue Komponenten. */
.oryt-display {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
}

::selection { background: rgba(131,65,252,.22); }

/* ==========================================================================
   WIEDERVERWENDBARE BASIS-KOMPONENTEN
   Bewusst klein gehalten - nur was bereits in Baustein 191ff. tatsaechlich
   gebraucht wird, kein vorab erfundener, ungenutzter Katalog.
   ========================================================================== */

/* Custom-gestyltes <select> (ersetzt den unstylbaren nativen Browser-Pfeil,
   der bislang z.B. in orynt_settings.html "Antwortsprache" durchschlug und
   den Rest des Designsystems sichtbar brach). appearance:none entfernt den
   nativen Pfeil, ein eigener SVG-Chevron per background-image ersetzt ihn -
   funktioniert nativ ohne JavaScript, bleibt tastatur-/screenreader-
   zugaenglich (weiterhin ein echtes <select>, keine Div-Nachbildung). */
.oryt-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  font: inherit;
  color: var(--text);
  background-color: var(--glass);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a39dc4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.oryt-select:hover   { border-color: rgba(131,65,252,.4); }
.oryt-select:focus-visible {
  outline: none;
  border-color: var(--grad-a);
  box-shadow: 0 0 0 3px rgba(131,65,252,.18);
}

/* Einheitliche, ruhige Fehleranzeige (Baustein 311, F13 "Professionelle
   Fehlerzustaende"). Audit-Befund: mehrere Seiten (orynt_admin.html,
   orynt_library.html, orynt_projects.html) zeigten Fehler bisher ueber
   native alert()-Dialoge - unterbricht den ganzen Tab mit einem System-
   dialog, wirkt auf der sonst ruhigen Oberflaeche fehl am Platz. Andere
   Seiten (orynt_work.html, Baustein 196) hatten das bereits durch eine
   Inline-Textzeile geloest, aber ohne gemeinsames Icon/Ton/Retry-Muster.
   Diese Klasse ist die vereinheitlichte Variante fuer beides: Icon (::before,
   nutzt --err-color statt sich allein auf Farbe zu verlassen - bleibt auch
   im Farbenblind-Modus per Text+Icon erkennbar, nicht nur per Farbe),
   Nachricht, optionaler Retry-Knopf (Klasse .oryt-error-retry). Reine
   Erweiterung - kein bestehendes Element/keine bestehende Klasse
   veraendert. Anwendung: <div class="oryt-error-banner" role="alert"
   hidden>Text<button class="oryt-error-retry">Erneut versuchen</button></div>,
   per JS nur .hidden/.textContent umschalten, wie orynt_work.html es fuer
   showCardError()/clearCardError() bereits vormacht. */
.oryt-error-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--error-banner-bg);
  border: 1px solid var(--error-banner-border);
  color: var(--text);
  font-size: .92em;
  line-height: 1.45;
}
.oryt-error-banner[hidden] { display: none; }
.oryt-error-banner::before {
  content: "⚠";
  flex-shrink: 0;
  color: var(--err-color);
  font-size: 1.1em;
  line-height: 1.35;
}
.oryt-error-retry {
  margin-left: auto;
  flex-shrink: 0;
  font: inherit;
  background: none;
  border: 1px solid var(--error-banner-border);
  color: var(--err-color);
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.oryt-error-retry:hover { background: var(--error-banner-bg); }

/* ==========================================================================
   ORYNT SHELL — gemeinsame Seitenleiste + Kopfzeile
   Baustein 192 (Auftrag Abschnitt 6 "ORYNT muss einen eigenen Flow
   bekommen" + Abschnitt 30.2 "Navigation/Shell").

   AUDIT-BEFUND: orynt_work.html/_library.html/_settings.html/_account.html/
   _faehigkeiten.html hatten BISHER ueberhaupt keine Seitenleiste - nur ein
   Zurueck-Pfeil + Titel, danach Inhalt in einer schmalen zentrierten Spalte.
   Ergebnis (per Playwright-Screenshot bestaetigt): jede dieser Seiten wirkte
   wie eine komplett eigene Webseite statt wie ein Teil von ORYNT - man
   verliess die Haupt-Navigation vollstaendig, sobald man z.B. auf "Work"
   klickte. Diese Datei definiert die IDENTISCHEN IDs/Klassen wie die
   bestehende Sidebar in orynt_interface.html (#sidebar, #topbar,
   .sidebar-nav-item, ...) - keine Kollision (per Grep vorab gegen alle
   Zielseiten geprueft) und maximale Wiederverwendung: exakt dieselbe
   localStorage-Praeferenz (orynt_sidebar_collapsed), exakt derselbe
   880px-Breakpoint (siehe Umbau-Baustein 137 in orynt_interface.html -
   deckt Tablet-Hochformat bewusst im Mobile-Modus ab, NICHT als Bug
   behandelt, sondern uebernommen), exakt dieselbe Optik.

   BEWUSSTE SCOPE-GRENZE dieses Bausteins: die Seitenleiste auf den
   Unterseiten enthaelt NICHT die Chat-spezifischen Elemente (Such-Overlay,
   Temporaerer-Chat-Umschalter, Kamera-Overlay, Gespraechsverlauf-Liste) -
   deren Aufbau samt JS-Logik lebt bislang ausschliesslich in
   orynt_interface.html und haette dort dupliziert werden muessen, was das
   Risiko fuer diesen Baustein unverhaeltnismaessig vergroessert haette
   (siehe Auftrag Abschnitt 29 "bestehende Funktionen duerfen nicht
   brechen"). "Suche" und "Temporärer Chat" fuehren auf Unterseiten daher
   bewusst zurueck zu "/" statt dort ein zweites Mal nachgebaut zu werden -
   ehrliche Einschraenkung statt vorgetaeuschter Funktionsgleichheit.

   FARB-FIX: .sidebar-nav-item.active nutzte bisher Orange/Amber
   (rgba(245,158,11,...) / #b45309) - ein Farbton, der an keiner anderen
   Stelle im ORYNT-Farbsystem vorkommt und der Marke (Violett/Blau-
   Verlauf) sichtbar widerspricht. Hier UND in orynt_interface.html auf den
   Marken-Akzent umgestellt. */

/* height (nicht min-height): #page-content bekommt dadurch eine wirklich
   BEGRENZTE Hoehe von einem Flex-Vorfahren vorgegeben - erst dann greift
   dessen eigenes overflow-y:auto als echter interner Scroll-Bereich,
   statt dass der Wrapper einfach unbegrenzt mitwaechst. */
#oryt-shell-wrap { display: flex; height: 100dvh; width: 100%; }

#sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 100;
  transition: width .22s ease, transform .25s ease, padding .22s ease;
  overflow: hidden;
}
body.sidebar-collapsed #sidebar { width: 0; border-right: none; }

#collapse-btn, #expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-xs);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
#collapse-btn:hover, #expand-btn:hover { background: var(--border); color: var(--text); }

#expand-btn {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 150;
  width: 36px;
  height: 36px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
}
body.sidebar-collapsed #expand-btn { display: flex; }

#sidebar-head {
  padding: calc(20px + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: var(--space-2); }
.brand-logo {
  width: 28px; height: 28px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xs);
  object-fit: contain;
  flex-shrink: 0;
}
/* Baustein 201 (Accessibility Re-Audit): .wordmark/.tb-wordmark ist die
   Marke "ORYNT" im Sidebar-Kopf bzw. mobilen Topbar, auf jeder Seite
   wiederholt. Bewusst NUR auf orynt_interface.html (Haupt-Chat-Ansicht,
   die einzige Seite ohne eigenen inhaltlichen Seitentitel - siehe
   Baustein 170) als <h1> markiert; auf jeder anderen Seite (die bereits
   ihre eigene, spezifischere <h1> hat, z.B. "Einstellungen"/"Konto") als
   <div> - sonst haette ein Screenreader-Nutzer beim Ueberschriften-
   Springen zwei identische "ORYNT"-Ueberschriften VOR der eigentlich
   gemeinten Seitenueberschrift durchlaufen muessen (live per
   automatisiertem Audit gefunden: h1-Anzahl 3 statt 1 auf jeder Nicht-
   Home-Seite). Rein klassenbasierter Selektor hier - Layout/Optik
   bleiben fuer <h1> UND <div> identisch, daher pro Seite frei wählbar. */
.wordmark, .tb-wordmark {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .4px;
}
.wordmark    { font-size: 1.25em; }
.tb-wordmark { font-size: 1.1em; }

.beta-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif;
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--grad-a);
  border: 1px solid rgba(131,65,252,.35);
  background: rgba(131,65,252,.1);
}

#sidebar-nav {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  box-sizing: border-box;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: .88em;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.sidebar-nav-item svg { flex-shrink: 0; }
.sidebar-nav-item:hover  { background: var(--border); color: var(--text); }
/* Marken-Akzent statt des vormaligen, markenfremden Orange (siehe Kopf-
   kommentar dieses Abschnitts). */
.sidebar-nav-item.active {
  background: rgba(131,65,252,.14);
  color: var(--grad-a);
}
:root[data-theme="dark"] .sidebar-nav-item.active { color: #b9a3ff; }

#more-panel { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
#more-panel[hidden] { display: none; }
#more-toggle[aria-expanded="true"] #more-chevron { transform: rotate(180deg); }
.sidebar-divider { height: 1px; background: var(--border); margin: var(--space-2) 4px; }
.sidebar-nav-item.admin { color: #7c3aed; }
.sidebar-nav-item.admin:hover { background: rgba(124,58,237,.12); color: #7c3aed; }

#history {
  flex: 1;
  padding: var(--space-2) var(--space-3) var(--space-3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#history::-webkit-scrollbar { width: 6px; }
#history::-webkit-scrollbar-thumb { background: rgba(131,65,252,.2); border-radius: var(--radius-pill); }
#history { scrollbar-width: thin; scrollbar-color: rgba(131,65,252,.2) transparent; }

#sidebar-foot {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-3) calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}
#new-btn {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: #fff;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .9em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background-position .4s ease, transform .1s;
}
#new-btn:hover  { background-position: 100% 50%; transform: translateY(-1px); }
#new-btn:active { transform: translateY(0); }

/* ---- Kopfzeile (mobil: Hamburger + Marke; Desktop: leer/Kontext) -------- */
/* Audit-Befund (Baustein 191, per Screenshot bestaetigt): #topbar enthaelt
   AUSSCHLIESSLICH .mobile-only-Kinder (Hamburger + Marke) - auf Desktop-
   Breiten war die Leiste dadurch immer leer, aber ihr eigener Glass-
   Hintergrund/Rahmen blieb sichtbar und erzeugte einen duennen, zwecklosen
   "Geisterstreifen" ueber dem eigentlichen Inhalt (auffaellig genau dort,
   wo der radiale Hintergrund-Verlauf am hellsten ist). Ab 881px daher
   komplett ausgeblendet statt leer mitgerendert. */
/* Baustein 202 (Performance, Phase D "Core Web Vitals"): min-height
   reserviert von Anfang an den Platz, den die Kopfzeile ohnehin
   braucht - live per PerformanceObserver(layout-shift) gemessen: ohne
   dies wuchs #topbar waehrend des Ladens von 21px auf 49px (CLS 0.53
   allein durch diese eine Verschiebung, Seite gesamt bei 0.77 - weit
   ueber dem "gut"-Schwellwert 0.1), weil die Kopfzeile zunaechst nur
   mit kollabierter Inhaltshoehe rendert. min-height verhindert das
   Nachwachsen unabhaengig von der genauen Ursache (z.B. Web-Font-
   Austausch) - kein Verhaltens-/Optikunterschied im Endzustand, die
   Zeile hatte diese Hoehe ohnehin schon vorher erreicht. */
#topbar {
  display: flex;
  min-height: 49px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--space-4) 10px;
  align-items: center;
  gap: var(--space-3);
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  z-index: 10;
}
@media (min-width: 881px) {
  #topbar { display: none; }
}
.mobile-only { display: none; }
#menu-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; flex-direction: column; gap: 4px;
}
#menu-btn span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: var(--radius-pill); }

#overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.32);
  z-index: 99;
  backdrop-filter: blur(2px);
}

/* #page-content: NEU (nicht Teil der bisherigen orynt_interface.html-
   Sidebar) - der Wrapper, in den jede Unterseite ihren bisherigen
   <header>+<main>-Inhalt unveraendert hineinlegt. Vorher zentrierte
   sich dieser Inhalt direkt auf body (display:flex;
   flex-direction:column; align-items:center); body wird durch die Shell
   jetzt zur Zeile (Sidebar + Inhalt nebeneinander), dieser Wrapper
   uebernimmt die vormalige Spalten-Zentrierung 1:1 weiter. */
#page-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

@media (max-width: 880px) {
  .mobile-only { display: flex; align-items: center; gap: var(--space-3); }
  #sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
  }
  #sidebar.open   { transform: translateX(0); }
  #overlay.open   { display: block; }
  #expand-btn     { display: none !important; }
}

/* Baustein 201 (Accessibility Re-Audit, Abschnitt C5 "Motion"): einzige,
   zentrale prefers-reduced-motion-Regel fuer ALLE Seiten (diese Datei wird
   ueberall eingebunden) statt einer Pro-Seite-Regel. Audit-Befund vorher:
   nur 5 von 8 Seiten hatten UEBERHAUPT eine prefers-reduced-motion-Regel,
   und selbst dort deckte sie nur die eigene body-Hintergrund-Animation ab
   (body { animation: none }, wirkt NICHT auf Kind-Elemente wie die ueberall
   verwendete .card/.work-card { animation: fadeUp ... }-Eintritts-
   Animation, da CSS-Animationen nicht vererbt werden) - die eigentlich vom
   Auftrag genannten "Page Transitions" liefen also ueberall unveraendert
   weiter. Bewusst animation-duration/transition-duration auf eine winzige
   Dauer statt komplett "none": laesst animationend/transitionend-Listener
   (siehe orynt_interface.html, Sprachwellen-Animation) weiterhin normal
   feuern (nur nahezu sofort), statt JS-Logik zu brechen, die auf dieses
   Event wartet - derselbe etablierte, breit genutzte Ansatz wie im
   "A11y Project" Reduced-Motion-Baustein. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
