/* Career Intelligence — Light Architecture System.

   EVERY PAGE LOADS THIS FILE. Nobody copies it any more.

     <link rel="stylesheet" href="shared/design-tokens.css">   (root pages)
     <link rel="stylesheet" href="../../shared/design-tokens.css">  (features/)

   It goes FIRST among the stylesheet links: this is the foundation, and
   it defines `body`, `*` and :focus-visible — rules where order decides
   as soon as another file touches the same selectors.

   Until 13 Sep 2026 this comment said the opposite, and so did the
   code: 21 pages carried a verbatim copy in their own <style>, three
   loaded the file. A change here therefore reached three pages at once
   and eighteen whenever someone remembered — and the grep that audits
   colours saw only the copies. Rule 1 ("one self-contained file") had
   been the reason, and rule 1 was lifted on 22 Aug 2026; the copies
   outlived their own justification by three weeks (T-53).

   A page opened straight from the filesystem still works: the href is
   relative, so file:// resolves it like any other path.

   `test/farben.test.js` keeps it that way — it refuses a page that
   carries the block again, and a page that loads it too late.

   Zwei Themen, eine Quelle. Hell ist die Fassung, für die alles
   eingestellt ist; die Nacht schaltet nur Werte um, keine Regeln. Der
   Schalter setzt data-thema="nacht" auf <html> — siehe den Block ganz
   unten und shared/kopfleiste.js, wo er sitzt.

   EMPHASE AUS DUNKLEN BLÖCKEN: --block, NICHT --ink

   Der dunkle Block war früher schlicht background: var(--ink). In der
   Nacht ist --ink fast weiß, und aus dem Block würde ein weißer Kasten
   mit weißer Schrift. Darum tragen der Block und seine Schrift eigene
   Namen: --block, --block-2, --on-block. In Hell sind sie wertgleich
   mit dem, was vorher dastand; in der Nacht liegen sie eine Stufe ÜBER
   dem Grund statt darunter. Wer background: var(--ink) neu schreibt,
   baut den Fehler wieder ein. */

  /* ===== geteilter Unterbau — wortgleich aus shared/design-tokens.css ===== */
  :root {
    --bg:             #FAFAFB;
    --surface:        #FFFFFF;
    --surface-sunken: #F7F7F9;

    /* DREI GRAUSTUFEN, ZWEI DAVON FÜR TEXT.

       Gemessen auf --surface #FFFFFF: --ink 18,1:1, --ink-2 11,1:1,
       --muted 5,2:1. Alle drei tragen Text.

       --muted-2 trägt KEINEN. Er stand bei #A5A6B2 auf 2,4:1 und in
       149 Regeln als Schriftfarbe — Zeitstempel, Hinweise, Rubriken,
       Kalendertage, vieles davon in 11px. Das ist nicht knapp
       daneben, das ist unlesbar, und WCAG verlangt 4,5:1.

       Dazwischen ist kein Platz: Ein Grau, das heller als --muted ist
       UND 4,5:1 erreicht, gibt es auf diesem Grund nicht (5,2:1 ist
       schon --muted). Also hat der Ton seine Rolle gewechselt statt
       seinen Wert zu schönen: Linien, Punkte, abgeblendete Zeichen,
       Platzhalter. Dafür gilt 3:1, und #8E8F9C liegt bei 3,2:1 — als
       #A5A6B2 verfehlte er auch das.

       Text, der vorher --muted-2 war, ist jetzt --muted (T-47). */
    --ink:            #15161C;
    --ink-2:          #3A3B45;
    --muted:          #6B6C7A;
    --muted-2:        #8E8F9C;   /* NICHT für Text — 3,2:1 */

    --hairline:       #E6E6EC;   /* Karten- und Abschnittsränder */
    --line:           #CFD0DC;   /* Verbindungslinien, Pfeilspitzen */

    --blue:           #4C5BD4;
    --blue-ink:       #3B48B0;
    --blue-tint:      #EEF0FC;
    --blue-border:    #C9CFF5;

    --violet:         #8250C8;   /* Konflikt, Feedback, Lernbarkeit */
    --violet-ink:     #5B3A9E;
    --violet-tint:    #F5EFFB;
    --violet-border:  #C6C0EE;

    /* Rot kam spät dazu und steht NICHT in jeder Modulseite: Es gehört
       allein dorthin, wo etwas ohne Rückweg passiert — "Konto löschen"
       und "Abmelden" im Kontomenü. Fehlermeldungen laufen weiter über
       Violett; ein Hinweis ist kein Alarm, und wenn alles rot ist, ist
       nichts mehr rot. Wer es braucht, kopiert diesen Block dazu:
       account.html und shared/kopfleiste.js tun es. */
    --rot:            #C0342B;
    --rot-ink:        #9E2A22;
    --rot-tint:       #FDF0EF;
    --rot-border:     #F0C7C3;

    /* ZUSTANDSFARBEN: grün belegt/fertig, gelb offen/teilweise.

       Sie standen bis zum 13.09.2026 in shared/werkbank.css und
       zusätzlich von Hand in index.html und unternehmen.html — der
       Nachtblock unten schaltete sie dagegen für JEDE Seite um. Eine
       Farbe, deren helle Fassung an drei Stellen steht und deren
       dunkle an einer, ist zwei Farben, sobald jemand eine davon
       anfasst. Jetzt stehen beide Fassungen nebeneinander.

       KEINE FARBE ALS EINZIGES SIGNAL — das gilt weiter: Der Zustand
       steht immer auch als Wort da (shared/werkbank.css).

       Gemessen auf dem jeweiligen Tint: grün 5,2:1, gelb 5,8:1. Das
       Gelb war #8A6A10 und kam auf 4,6:1 — knapp über der Grenze und
       damit die Sorte Wert, die beim nächsten Nachjustieren des Tints
       durchfällt, ohne dass es jemand merkt. */
    --wb-gruen:       #2E8B57;
    --wb-gruen-tint:  #E7F2EA;
    --wb-gruen-ink:   #24704A;   /* auf --wb-gruen-tint: 5,2:1 */
    --wb-gruen-rand:  #BEDCC8;
    --wb-gelb:        #C79A1E;
    --wb-gelb-tint:   #FBF3DC;
    --wb-gelb-ink:    #7A5A08;   /* auf --wb-gelb-tint: 5,8:1 */
    --wb-gelb-rand:   #EBD9A4;

    /* Der dunkle Block trägt eigene Namen, damit die Nacht ihn umkehren
       kann, ohne --ink seine Rolle als Schriftfarbe zu nehmen. In Hell
       sind das genau die Werte, die vorher als var(--ink) dastanden. */
    --block:          #15161C;
    --block-2:        #22232C;
    --on-block:       #FFFFFF;
    --block-hover:    #24252F;   /* der Block unter dem Zeiger */

    --ink-tile:       var(--block-2);   /* Kachel im dunklen Block */
    --on-ink-label:   #9FA6F0;
    --on-ink-muted:   #9C9DAA;

    --shadow:         0 1px 2px rgba(20,20,30,.04);
    --shadow-hover:   0 4px 14px rgba(20,20,30,.06);
    --shadow-node:    0 18px 48px rgba(76,91,212,.18);

    --r:              16px;
    --r-chip:         999px;

    /* Bewegung: vier Dauern, eine Kurve. Die Kurve bremst hart ab —
       das ist der Unterschied zwischen mechanisch und verspielt, und
       darum gibt es genau diese eine. Wer eine zweite einführt, hat
       zwei Anwendungen. linear ist an EINER Stelle erlaubt: bei einem
       Fortschritt, der keine Länge kennt (dem Ring im Ladeknopf).

       Bewegung erklärt, wo etwas herkommt. Sie schmückt nicht, und sie
       trägt nie eine Information allein: Unter prefers-reduced-motion
       steht sie still (siehe unten), und dann muss jeder Zustand immer
       noch les- und bedienbar sein. */
    --ms-schnell:     120ms;  /* Rückmeldung: Hover, Fokus, Druck */
    --ms-zustand:     180ms;  /* Zustand: Reiter, Auswahl, Karte, Schublade */
    --ms-auftritt:    220ms;  /* Auftritt: Dialog, Palette, Blatt */
    --ms-erscheinen:  380ms;  /* Einblenden beim Scrollen, einmalig */
    --ms-kurve: cubic-bezier(.2, .8, .2, 1);

    /* Manrope und IBM Plex Mono zuerst, dann Systemschrift. Bewusst KEIN
       <link> auf Google Fonts: Ein Modul muss als Einzeldatei ohne Server
       funktionieren, und eingebettet blockiert die Sicherheitsregel fremde
       Hosts. Wer die Schriften lokal installiert hat, sieht sie; alle
       anderen bekommen dieselben Größen und Abstände in der Systemschrift. */
    --font-body: "Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    --font-ui:   "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas,
                 "SF Mono", monospace;

    /* Übergangsmarken: Regeln aus der Zeit vor dem Light Architecture
       System laufen weiter, während die Komponenten nachziehen.
       --lime war immer Fläche, --lime-deep immer Rand/Akzent, --amber
       immer Konflikt oder Fehler — das deckt sich mit Blau und Violett. */
    --ground:    var(--bg);
    --surface-2: var(--surface-sunken);
    --ink-soft:  var(--muted);
    --lime:      var(--blue-tint);
    --lime-deep: var(--blue);
    --amber:     var(--violet);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  p, li { text-wrap: pretty; }

  a { color: var(--blue); text-decoration: none; }
  a:hover { color: var(--violet); }

  :where(button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }

  /* ===== Nacht ======================================================
     Ein Thema, keine zweite Gestaltung: Hier stehen nur Werte, keine
     neuen Regeln. Jede Regel oben liest Token, also folgt sie mit.

     Warum [data-thema] und nicht prefers-color-scheme allein: Die Wahl
     gehört dem GERÄT und dem Menschen davor, nicht der Systemeinstellung
     — genau wie die Sprache. shared/kopfleiste.js schreibt sie nach
     ba.hub.v1; ohne Eintrag entscheidet die Systemeinstellung, und
     data-thema="hell" überstimmt sie in die andere Richtung.

     KONTRASTE, GEMESSEN GEGEN --bg #0F1116
       --ink     #EEF0F6  16,6:1     --muted    #9599A8   6,7:1
       --ink-2   #C3C6D2  11,1:1     --blue     #93A0FF   7,8:1
       --violet  #C295F0   8,0:1     --rot      #F0857C   7,5:1
     Auf dem hellsten Grund, auf dem hier Text steht — dem Block
     --block-2 #353D55 —: --on-block 10,8:1, --on-ink-muted 5,0:1,
     --on-ink-label 5,3:1.
     --muted-2 liegt bei 3,9:1 und trägt deshalb keinen Text, sondern
     Linien und abgeblendete Zeichen — wie im Hellen, wo er seit dem
     13.09.2026 dieselbe Rolle hat und dafür von #A5A6B2 auf #8E8F9C
     nachgezogen wurde (2,4:1 reichte nicht einmal für eine Linie).
     Wer ihm Text gibt, fällt durch, und der Test in
     test/kontrast.test.js sagt es. */
  :root[data-thema="nacht"] {
    color-scheme: dark;

    --bg:             #0F1116;
    --surface:        #171A22;
    --surface-sunken: #13161D;

    --ink:            #EEF0F6;
    --ink-2:          #C3C6D2;
    --muted:          #9599A8;
    --muted-2:        #6E7280;

    --hairline:       #262A34;
    --line:           #3A3F4D;

    --blue:           #93A0FF;
    --blue-ink:       #B4BDFF;   /* im Hellen dunkler, in der Nacht heller:
                                    -ink heisst "staerker", nicht "dunkler" */
    --blue-tint:      #1A1F33;
    --blue-border:    #39406A;

    --violet:         #C295F0;
    --violet-ink:     #D8B6FA;
    --violet-tint:    #221A31;
    --violet-border:  #4A3A6B;

    --rot:            #F0857C;
    --rot-ink:        #FCA9A1;
    --rot-tint:       #2B1917;
    --rot-border:     #5C2F2B;

    /* Zustandsfarben aus shared/werkbank.css: gruen belegt/fertig,
       gelb offen/teilweise. Sie stehen dort und in mehreren Seiten in
       einem eigenen :root — dieser Block ist spezifischer (0,1,1 gegen
       0,0,1) und gewinnt deshalb überall, egal in welcher Reihenfolge
       die Blöcke stehen. */
    --wb-gruen:       #5FCB92;
    --wb-gruen-tint:  #14251C;
    --wb-gruen-ink:   #8BDCB0;
    --wb-gelb:        #E2B84A;
    --wb-gelb-tint:   #2A2214;
    --wb-gelb-ink:    #EFCE7C;
    --wb-gruen-rand:  #24543C;
    --wb-gelb-rand:   #4B3D19;

    /* Der dunkle Block liegt in der Nacht ÜBER dem Grund, nicht
       darunter — sonst verschwindet er im Hintergrund. */
    --block:          #2B3247;
    --block-2:        #353D55;
    --on-block:       #FFFFFF;
    --block-hover:    #3B4459;
    --ink-tile:       var(--block-2);
    --on-ink-label:   #A8B0FF;
    --on-ink-muted:   #ADB1C0;

    /* Schatten tragen auf dunklem Grund nicht als Grau, sondern als
       Schwärze plus eine helle Kante. Die Kante steckt in --hairline,
       den die Karten ohnehin schon zeichnen. */
    --shadow:         0 1px 2px rgba(0,0,0,.40);
    --shadow-hover:   0 4px 14px rgba(0,0,0,.50);
    --shadow-node:    0 18px 48px rgba(0,0,0,.55);
  }
  /* ===== Ende Nacht ================================================= */

  /* ===== Auf dem Telefon ============================================
     Am Rechner darf eine Seite erklären: wozu ein Baustein gut ist, wie
     er rechnet, was er mit den Daten tut. Auf dem Telefon ist dieselbe
     Erklärung eine Bildschirmhöhe, die man wegwischen muss, bevor man
     an die Sache kommt — gemessen am 21.09.2026: die Startseite 29 891px
     hoch, das Profil 17 905px, und das Erste auf dem Profil waren drei
     Karten darüber, wozu es das Profil gibt.

     data-detail markiert ERKLÄRUNG, nicht Bedienung. Unter 600px fällt
     sie weg. Nie ein Knopf, nie ein Feld, nie eine Auskunft, die sonst
     nirgends steht — und nie ein Hinweis, der vor einem Verlust warnt.

     Ein Attribut statt einer Klasse, weil es keinem Baustein gehört:
     Die Kürzel-Regel gilt Klassen und IDs, und eine Klasse ohne Kürzel
     wäre hier die eine Ausnahme. !important, weil diese Datei VOR den
     Stilen der Seite steht und ein Attribut wiegt wie eine Klasse —
     .pr-wozu { display: grid } käme später und gewönne. Dieselbe
     Überlegung, mit der der Browser selbst [hidden] durchsetzt. */
  @media (max-width: 600px) {
    [data-detail] { display: none !important; }
  }
  /* ===== Ende geteilter Unterbau ===== */