/* ============================================================================
 * NEURALYNX · Grundstil – was der Browser sonst weiß malt
 * ---------------------------------------------------------------------------
 * 27.09.2026. Marcel hat sich mehrfach über weiße Felder beschwert („Beim
 * Schreiben von Texten wird weiterhin ein weißer Hintergrund angezeigt",
 * „im Anmeldekästchen so weiße Ränder"). Gesucht wurde bis dahin im CSS der
 * Seiten – dort steht aber kein Weiß, das nicht gewollt ist (Urkunde, PDF-
 * Papier, Code-Vorschau).
 *
 * Das Weiß kommt vom BROWSER, nicht von uns:
 *   · Aufgeklappte Auswahllisten (<option>) zeichnet Windows selbst – hell,
 *     solange die Seite nicht erklärt, dass sie dunkel ist.
 *   · Gespeicherte Anmeldedaten (Autofill) färbt Edge/Chrome hellblau-weiß ein.
 *     Das sind die „weißen Ränder" im Anmeldekästchen.
 *   · Datumsfelder, Scrollbalken, Zahlenpfeile: dasselbe.
 * 12 von 19 Seiten fehlte die Erklärung `color-scheme: dark`.
 *
 * WARUM ALLES IN :where()
 * :where() hat keine Gewichtung – jede Regel einer Seite gewinnt dagegen,
 * auch eine schwächere, auch wenn sie früher steht. Diese Datei setzt also nur
 * den Boden, auf dem die Seiten stehen; sie überschreibt nichts, was eine Seite
 * bewusst gestaltet hat (siehe Erinnerung „Aussehen-System": :where() verliert
 * immer – hier ist genau das gewollt).
 * ========================================================================== */

:where(:root) {
  color-scheme: dark;
}

/* Eingebettete fremde Fenster (PayPal-Knöpfe, Videos) melden sich meist als
   HELL. Weicht das vom Fenster drumherum ab (hier: dunkel), malt der Browser
   ihren Hintergrund deckend WEISS - damit ihr Text lesbar bleibt. Auf Marcels
   Bildschirm standen die PayPal-Knöpfe deshalb in weißen Ecken (27.09.2026,
   Nebenwirkung der Zeile oben). `normal` für das Fenster-Element selbst lässt
   sie wieder durchsichtig. */
:where(iframe) {
  color-scheme: normal;
}

:where(option, optgroup) {
  background-color: #120f20;
  color: #ece8fa;
}

/* Autofill: Die Hintergrundfarbe setzt der Browser mit eigener Vorrangregel –
   sie lässt sich nicht direkt überschreiben. Ein nach innen gelegter Schatten
   in Feldfarbe deckt sie ab; die lange Übergangszeit verhindert, dass das Weiß
   beim Laden kurz aufblitzt. */
:where(input, textarea, select):-webkit-autofill,
:where(input, textarea, select):-webkit-autofill:hover,
:where(input, textarea, select):-webkit-autofill:focus {
  -webkit-text-fill-color: #ece8fa;
  -webkit-box-shadow: 0 0 0 1000px rgba(18, 15, 32, .96) inset;
  caret-color: #ece8fa;
  transition: background-color 99999s ease-out 0s;
}

/* ---- Profilbilder füllen immer den Kreis (27.09.2026) ----------------------
   Auf dem Telefon war Marcels Bild im Beitragsfeld der Community unsichtbar.
   Das Feld trägt im HTML `style="background:linear-gradient(…)"` – die
   Kurzschreibweise setzt dabei ALLE Hintergrund-Eigenschaften direkt am
   Element, auch `background-size` auf „auto“. Wird danach per Skript nur das
   Bild eingesetzt, bleibt „auto“ stehen und schlägt das `cover` der Seite:
   Das 1536 px große Bild lag in Originalgröße im 40-px-Kreis, zu sehen war
   seine leere, durchsichtige Ecke.
   Hier deshalb MIT !important (nur so gewinnt ein Stylesheet gegen `style=`)
   und nur für Elemente, die „avatar“ im Klassennamen tragen UND ein Bild per
   url() am Element haben – Verläufe und Initialen bleiben unberührt. */
[class*="avatar"][style*="url("] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ---- Kopfleisten auf dem Telefon (27.09.2026) -------------------------------
   Gemessen bei 375 px: Dashboard 134 px hoch (zwei Zeilen), Steuerstand 113,
   Verbindungen 107, Lux Code 109 – die Symbole passten um wenige Pixel nicht
   mehr in eine Zeile. Hier für ALLE Seiten auf einmal, weil die Leisten
   dieselben Bausteine teilen (Schnellzugriff, Einstellungs-Knopf, Glocke):
     · Symbole 32 statt 36–38 px, engere Abstände.
     · „← Dashboard" als Textknopf fällt weg – das Zeichen oben links und die
       Mini-Galaxie führen genauso dorthin, auf dem Telefon ist der Platz
       wichtiger als der doppelte Weg.
     · „Fenster lösen" (Verbindungen) ergibt auf dem Telefon keinen Sinn.
   Mit !important, weil die Größen dort teils direkt am Element stehen. */
@media (max-width: 560px) {
  .topbar-actions, .nav-actions { gap: .3rem !important; }
  .sz-gruppe { gap: 3px !important; }
  .sz-knopf, #etKnopf, .topbar-actions .icon-btn { width: 32px !important; height: 32px !important; }
  .topbar-actions > a.btn[href="dashboard.html"] { display: none !important; }
  #loesenBtn { display: none !important; }
  /* Schriftzug „Neuralynx" neben dem Zeichen weg, der BEREICH bleibt stehen
     (Verbindungen, Steuerstand, Lux Code, PDF). Wer auf dem Telefon oben
     schaut, will wissen, wo er ist – dass er bei Neuralynx ist, weiß er. */
  .topbar > a.brand { font-size: 0 !important; gap: .4rem !important; }
  .topbar > a.brand .tag, .topbar > a.brand .lc-tag { display: inline-block !important; font-size: .66rem !important; }
}

/* ---- Hilfszeilen aus (28.09.2026) ---------------------------------------------
   Schalter in der Einstellungs-Tafel („Kleine Erklärungen unter Überschriften").
   Die Klasse setzt einstellungs-tafel.js auf JEDER Seite; hier stehen die
   Erklärsätze, die auf allen Seiten gleich heißen. Seiteneigene stehen in der
   jeweiligen Seite (Dashboard: .bs-desc, .brain-hint …). Überschriften selbst
   und Hinweise mit Warnfunktion bleiben immer. */
body.ohne-hilfe :is(.section-head p, .sec-sub, .gst-unter, .ag-kosten) { display: none !important; }