/* ==========================================================================
   GeekInfinity - theme.css
   Die EINZIGE Stelle, an der Farben stehen. Alles andere - site.css, die
   <style>-Bloecke in index.php, den Rechtstexten und den 48 Altseiten -
   benutzt ausschliesslich diese Variablen.

   WARUM EINE EIGENE DATEI
   index.php bindet site.css bewusst NICHT ein (das Logo-CSS muss beim
   ersten Paint stehen, ein zweites Stylesheet wuerde dabei flackern). Die
   Variablen muessen aber auf JEDER Seite gelten. Eine eigene, sehr kleine
   Datei loest das, ohne site.css in index.php hineinzuzwingen.

   WIE DAS THEMA GESETZT WIRD
   PHP schreibt data-theme="dark" oder "light" an das <html>-Element,
   gelesen aus dem Cookie gi_theme (siehe gi_theme.php). Das geschieht
   SERVERSEITIG - deshalb gibt es kein weisses Aufblitzen beim Laden, wie es
   bei einer Umschaltung per JavaScript unvermeidlich waere.

   RGB-TRIPEL STATT FERTIGER FARBEN
   Viele Regeln brauchen dieselbe Farbe mit unterschiedlicher Deckkraft
   (Trennlinien, Schatten, abgestufter Text). Deshalb stehen die Grundtoene
   zusaetzlich als Zahlentripel bereit und werden als
   rgba(var(--t-rgb), .78) verwendet. Das funktioniert in jedem Browser,
   der CSS-Variablen kennt.

   FLAGGEN SIND NICHT DABEI. Die Farben der Flaggen im Sprachumschalter
   stehen als feste Werte im SVG-Markup und duerfen sich nie aendern.
   ========================================================================== */

:root,
:root[data-theme="dark"] {
  /* Flaechen */
  --bg:            #0f1115;
  --bg-2:          #1a1f2e;   /* heller Fleck des Verlaufs oben links */
  --bg-rgb:        15, 17, 21;
  --panel-rgb:     23, 26, 33;

  /* Schrift */
  --head:          #f2f5fa;   /* Ueberschriften */
  --text:          #e6e9ef;   /* Fliesstext */
  --text-rgb:      230, 233, 239;
  --muted:         #9aa3b2;

  /* Marke */
  --accent:        #00e5ff;
  --accent-rgb:    0, 229, 255;
  --accent-soft:   #bdf3ff;
  --accent-2:      #7c3aed;
  --accent-2b:     #8b5cf6;
  --accent-2-rgb:  124, 58, 237;
  --accent-2-soft: #d8c9ff;
  --on-accent:     #05070c;   /* Schrift auf dem Farbverlauf der Schaltflaechen */

  /* Linien und Schatten */
  --line-rgb:      255, 255, 255;
  --shadow-rgb:    0, 0, 0;

  /* Fehler */
  --err:           #ffb4b4;
  --err-rgb:       255, 86, 86;
}

/* ==========================================================================
   HELL
   Nicht einfach invertiert. Das reine Cyan #00e5ff ist auf Weiss praktisch
   unlesbar (Kontrast rund 1,5:1), deshalb wird es abgedunkelt; dasselbe gilt
   fuer das Violett. Die Schrift auf dem Farbverlauf der Schaltflaechen wird
   umgekehrt weiss, weil der Verlauf jetzt der dunkle Teil ist. Und die
   Trennlinien, die im dunklen Thema weiss mit wenig Deckkraft sind, muessen
   schwarz mit wenig Deckkraft werden - sonst waeren sie unsichtbar.
   ========================================================================== */

:root[data-theme="light"] {
  --bg:            #f6f7fa;
  --bg-2:          #e7eaf2;
  --bg-rgb:        246, 247, 250;
  --panel-rgb:     255, 255, 255;

  --head:          #0d1016;
  --text:          #262a31;
  --text-rgb:      38, 42, 49;
  --muted:         #5b6472;

  /* KEIN abgedunkeltes Cyan mehr. #007c8a war rechnerisch richtig, kippte
     aber sichtbar ins Tuerkisgruene - und Gruen kommt in der Marke nicht
     vor. Stattdessen ein Blauviolett, das zum Violett darunter passt und
     mit ihm einen zweitonigen Verlauf bildet statt eines Farbbruchs. */
  --accent:        #505ce2;
  --accent-rgb:    80, 92, 226;
  --accent-soft:   #3a45b8;
  --accent-2:      #6423c9;
  --accent-2b:     #7c3aed;
  --accent-2-rgb:  100, 35, 201;
  --accent-2-soft: #4c1a99;
  --on-accent:     #ffffff;

  --line-rgb:      15, 17, 21;
  --shadow-rgb:    90, 100, 125;

  --err:           #a81b1b;
  --err-rgb:       190, 40, 40;
}

/* ==========================================================================
   MARKENFARBEN - ausdruecklich NICHT themenabhaengig.
   Das Logo soll in hell und dunkel gleich aussehen, so wie es auch in
   DocMind aussieht. Deshalb stehen diese drei Werte AUSSERHALB der beiden
   Themenbloecke und aendern sich nie.
   Fuer Logos gelten die Kontrastregeln nicht - ein Firmenschriftzug ist als
   Marke ausgenommen, anders als Fliesstext. Das Cyan hat auf hellem Grund
   nur 1,44:1 und ist dort blass; das ist die bewusste Entscheidung
   zugunsten eines einheitlichen Logos.
   NICHT betroffen ist "Infinity": der Wortteil ist neutral gesetzt und
   folgt weiterhin dem Thema, sonst waere er auf hellem Grund unsichtbar.
   ========================================================================== */
:root {
  --brand-cyan:         #00e5ff;
  --brand-violet:       #7c3aed;
  --brand-violet-light: #8b5cf6;
}

/* Farbschema an den Browser melden: Formularfelder, Bildlaufleisten und
   die Systemleiste des Telefons richten sich danach. */
:root, :root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"]        { color-scheme: light; }

/* ==========================================================================
   Der Themenumschalter, links neben dem Sprachumschalter.
   Beide sitzen im selben Behaelter gi-lang-pos, der auf jeder Seite steht.
   ========================================================================== */

.gi-lang-pos { display: flex; align-items: flex-start; gap: 8px; }

.theme-switch { position: relative; display: inline-block; font-size: 14px;
                text-align: left; font-family: 'Space Grotesk', -apple-system, sans-serif; }
.theme-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
             background: rgba(var(--panel-rgb), .72); color: var(--text);
             border: 1px solid rgba(var(--accent-2-rgb), .35); border-radius: 10px;
             padding: 8px 12px; font: inherit; width: auto; margin: 0;
             backdrop-filter: blur(6px); transition: border-color .2s, box-shadow .2s; }
.theme-btn:hover { border-color: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .25); }
/* Genau die Masse der Flaggen im Sprachumschalter (.lang-switch .flag),
   damit beide Auswahlfelder gleich hoch sind und die Symbole auf einer
   Linie sitzen. Der viewBox ist quadratisch, das Symbol zeichnet sich
   also 14x14 mittig in die 20px breite Flaeche - dieselbe Grundflaeche,
   die eine Flagge einnimmt.
   NICHT auf .theme-btn beschraenken: dieselben Symbole stehen auch in
   den Menueeintraegen, und ein SVG ohne Groessenangabe faellt dort auf
   die Vorgabe des Browsers zurueck. */
.th-ico { width: 20px; height: 14px; flex: 0 0 auto; display: block; }
.theme-name { font-weight: 300; }
.theme-caret { color: var(--muted); font-size: 11px; }

.theme-menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 150px;
              background: rgba(var(--bg-rgb), .96);
              border: 1px solid rgba(var(--accent-2-rgb), .35); border-radius: 10px;
              padding: 6px; display: none; z-index: 91;
              box-shadow: 0 12px 30px rgba(var(--shadow-rgb), .55); backdrop-filter: blur(8px); }
.theme-switch.open .theme-menu { display: block; }
.theme-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
              border-radius: 8px; color: var(--text); text-decoration: none; }
.theme-item:hover { background: rgba(var(--accent-2-rgb), .14); }
.theme-item[aria-current="true"] { color: var(--accent); font-weight: 600; }

@media (max-width: 760px) {
  .theme-btn { padding: 11px 14px; }
  .theme-item { padding: 12px 10px; }
  /* Auf dem Telefon nur das Symbol - zwei volle Auswahlfelder nebeneinander
     wuerden die Zeile sprengen. */
  .theme-btn .theme-name, .theme-btn .theme-caret { display: none; }
}
