/* ==========================================================================
   basis.css – gemeinsame Grundlagen aller Seiten
   Inhalt: 1 Farben/Schrift · 2 Grundlagen · 3 Hintergrund · 4 Hilfsklassen
   ========================================================================== */

/* Einbindung: Wird von Views/Shared/_Layout.cshtml per <link rel="stylesheet" href="~/css/basis.css"> im Kopf eingebunden, also auf JEDER Seite
     (Startseite, Portal, Verwaltung). Ladereihenfolge: basis.css ZUERST; danach folgen die Stile der Sektion "Kopf" (landing.css und anfrage.css, portal.css, verwaltung.css),
     die die hier definierten Variablen nutzen. Kein JavaScript ändert diese Datei. */
/* 1. Farben und Schrift als Variablen: eine Stelle zum Anpassen */
/* Zweck: Farb- und Schriftvariablen (Custom Properties) am Wurzelelement; sie gelten für die ganze Seite.
   Verwendet von: landing.css, anfrage.css, portal.css, verwaltung.css und den Regeln dieser Datei per var(--name).
   Herkunft: von Hand gewählte Werte passend zum Bild (Gold, Hellblau, Gelbverlauf); landing.js setzt hier nichts, nur die eigene Variable --u (siehe landing.css).
   Registrierung: Einbindung der Datei durch _Layout.cshtml; :root trifft das html-Element.
   Bedeutung der Variablen: --navy Textfarbe auf Gelb; --navy-tief sehr dunkles Blau (Kopfzeile Portal); --gold Rahmen, Symbole und Akzent;
     --hellblau-1/-2 Verlauf oben/unten der blauen Knöpfe und Fokusfarbe; --gelb-hell/-mittel/-dunkel Stufen des gelben Hintergrundverlaufs;
     --schrift Schriftfamilie (Inter, sonst Systemschrift). */
:root {
  --navy: #0b2540;                 /* Textfarbe auf Gelb */
  --navy-tief: #06101c;            /* sehr dunkles Blau */
  --gold: #f4b942;                 /* Gold wie im Bild */
  --hellblau-1: #9fe0ff;           /* Login-Knopf oben */
  --hellblau-2: #46acea;           /* Login-Knopf unten */
  --gelb-hell: #ffe14d;            /* Gelbverlauf: Mitte oben */
  --gelb-mittel: #ffd21f;          /* Gelbverlauf: Hauptton */
  --gelb-dunkel: #f5bf00;          /* Gelbverlauf: Rand */
  --schrift: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 2. Grundlagen */
/* Zweck: Grundlagen. Rahmen und Innenabstand zählen zur Breite (border-box), kein Standardrand, Seite füllt mindestens den Bildschirm.
   Verwendet von: allen Elementen; body ist eine Flex-Spalte, damit die Fußzeile (.fuss, landing.css) unten steht und das Portal (portal.css, .inhalt) den Rest füllt.
   Registrierung: gilt global (Elementselektoren). */
*, *::before, *::after { box-sizing: border-box; }     /* Rahmen zählen zur Breite */
html { background: var(--gelb-dunkel); }               /* Notfall-Hintergrund: nie weiß, auch beim Überscrollen */
body {
  margin: 0;                                           /* kein Standardrand */
  min-height: 100vh;                                   /* Seite füllt mindestens den Bildschirm */
  display: flex; flex-direction: column;               /* Inhalt oben, Fußzeile unten */
  font-family: var(--schrift); color: var(--navy);
}
/* Zweck: Das Attribut hidden gewinnt immer, auch gegen Regeln wie display: flex.
   Verwendet von: Elemente mit hidden, die JavaScript ein- und ausblendet (Dialog #anfrage-dialog und Ansichten in anfrage.js; #login-bereich, #panel, #codebox in verwaltung.js).
   Registrierung: gilt global (Attributselektor). */
[hidden] { display: none !important; }                 /* das Attribut "hidden" gewinnt immer */

/* 3. Gelber Hintergrund: fest hinter dem Inhalt (bleibt beim Verschieben/Scrollen stehen, kein weißer Rand) */
/* Zweck: Gelber Hintergrund fest hinter dem Inhalt (radialer Verlauf aus --gelb-hell, --gelb-mittel, --gelb-dunkel); bleibt beim Scrollen stehen.
   Verwendet von: Startseite und Portal (jedes body). verwaltung.css schaltet ihn für body.seite-verwaltung wieder ab.
   Registrierung: Pseudo-Element von body, global. */
body::before {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 35%, var(--gelb-hell) 0%, var(--gelb-mittel) 55%, var(--gelb-dunkel) 100%);
}

/* 4. Hilfsklassen */
/* Zweck: Hilfsklasse: Inhalt ist nur für Vorlese-Programme vorhanden, optisch unsichtbar.
   Verwendet von: Startseite/Index.cshtml (h1 und label zum Eingabefeld #code), Portal/Index.cshtml (h1 im main).
   Registrierung: Klassenselektor; kein Skript setzt oder entfernt die Klasse. */
.nur-screenreader {                                    /* nur für Vorlese-Programme sichtbar */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}