/* ============================================================================================
   Kontor am Tresen — Tokens.
   Bauanleitung: adb/03-UX-DESIGN.md §2 Farbwelt · §3 Schriftstufen · §4 Skalen · §6 Bewegung.
   Jeder Wert in dieser Datei steht dort in einer Tabelle. Steht er dort nicht, gehoert er
   nicht hierher.

   WARUM NICHTS AUF :root LIEGT
   Die alte Oberflaeche (public/app.css) fuehrt auf :root eigene --paper, --paper-2, --ink,
   --shadow und --sans mit anderen Werten. Beide Oberflaechen liegen in dieser Runde
   nebeneinander im selben Dokument. Deshalb haengt hier alles an .kontor: der neue Baum
   sieht die neuen Werte, der alte behaelt seine. Wenn die alte Oberflaeche am Ende von
   Runde 3 verschwindet, kann .kontor zu :root werden, ohne dass sich ein Wert aendert.

   HELL UND DUNKEL
   Vorgabe ist prefers-color-scheme (§2.1). Das Startskript in public/index.html loest die
   Systemwahl bereits in die Klasse html.dark auf und laesst eine ausdrueckliche Wahl
   ("bh-dark" im localStorage) vorgehen; ohne Eintrag gilt das System. Das ist genau die
   dritte Stellung "Automatisch", die §2.1 verlangt. Deshalb steht hier nur html.dark und
   KEINE @media (prefers-color-scheme: dark) — sonst bekaeme jemand, der auf einem dunklen
   Geraet ausdruecklich hell gewaehlt hat, trotzdem die dunklen Werte.
   ============================================================================================ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url(../fonts/fraunces-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'PlexKontor';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url(../fonts/plexsans-latin.woff2) format('woff2');
}

/* ---- §2.2 Tokens hell (Flaeche #F4F0E8) --------------------------------------------------- */
.kontor {
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'PlexKontor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --paper: #F4F0E8;
  /* Bindende Abweichung vom Muster (§2.2): Kontor und start.html fuehren #FCFAF6. */
  --paper-2: #FDFBF7;
  --paper-3: #EDE7DB;
  --ink: #191512;
  --ink-2: #4E463C;
  --ink-3: #736A5C;
  --rule: #D9CFBF;
  --rule-soft: #E7E0D3;
  --brass: #956600;
  --brass-ink: #8B5E00;
  --brass-wash: rgba(149, 102, 0, .09);
  --sage: #269B6C;
  --sage-ink: #1B7B54;
  --sage-wash: rgba(38, 155, 108, .10);
  --ember: #9B0217;
  --ember-ink: #9B0217;
  --ember-wash: rgba(155, 2, 23, .08);
  --mute: #736A5C;
  --shadow: 0 1px 2px rgba(60, 45, 25, .05), 0 12px 34px rgba(60, 45, 25, .10);

  /* Vier Werte, die §5 woertlich nennt und die bis hierher als Literal in parts.css
     standen. Solange sie dort standen, hatte eine Ansicht kein Vorbild: view-mitarbeiter.css
     hat sich sein eigenes #fff geschrieben, statt eines zu benutzen (Befund F-01).
     Ab hier haben sie einen Namen.

     --plakette-ink  §5.4: "Textfarbe hell #FFF4F0, dunkel #1B0C0C." Eigens gewaehlt je
                     Modus (§2.1 Regel 3), deshalb unten im Dunkelblock noch einmal.
     --weiss         §5.11a Schalterknopf, §5.12 Schrift auf einer Wischaktion, QR-Flaeche.
                     KEINE Flaechenfarbe aus §2.2: dieses Weiss liegt immer auf einer
                     farbigen Flaeche (Messing, Ember) oder muss scanbar bleiben, und ist
                     deshalb in BEIDEN Modi Weiss. Genau darum steht es hier und nicht als
                     --paper-Variante.
     --schleier      §5.10: "Verdunkelung rgba(30,22,12,.42)". §5.10 nennt einen Wert, kein
                     Paar — er gilt in beiden Modi.
     --marke-schatten §5.13 Rolle "Marke": "Schatten 0 2px 12px rgba(149,102,0,.30)". Das
                     Tripel IST das Messing des hellen Modus. Im Dunkeln ist Messing
                     193,135,18 (§2.3); ein fest verdrahtetes 149,102,0 waere dort ein
                     zweiter Messington und damit gegen §2.6 ("genau ein RGB-Tripel je
                     Modus"). Deshalb je Modus einer, beide aus derselben Rechnung. */
  --plakette-ink: #FFF4F0;
  --weiss: #fff;
  --schleier: rgba(30, 22, 12, .42);
  --marke-schatten: 0 2px 12px rgba(149, 102, 0, .30);

  /* §2.6 Kachelflaechen — genau EIN RGB-Tripel je Modus, vier Deckungsgrade. */
  --kachel-rgb: 149, 102, 0;
  --kachel-glyph: #8B5E00;
  --a-geld: .20;
  --a-beleg: .13;
  --a-betrieb: .075;
  --a-sys: .045;

  /* §2.7 Die einzige zulaessige Tonrampe (Anteilsbalken). */
  --s1: #5E4000;
  --s2: #956600;
  --s3: #A27833;

  /* §2.8 Papierwaerme — Beleuchtung, kein Zustand. */
  --waerme: .6;

  /* §6.1 Zwei Kurven, sonst keine. */
  --ease: cubic-bezier(.2, .8, .25, 1);
  --spring: cubic-bezier(.22, 1, .36, 1);

  /* §4.1 feste Anwendungen der Abstandsskala. */
  --pad: 20px;

  /* Milchglas mit deckender Rueckfallfarbe (§6.3 Punkt 6). */
  --milch: color-mix(in srgb, var(--paper) 93%, transparent);
  /* Die 93 % sind nur zusammen mit dem Weichzeichner ehrlich: er verwischt, was
     durchscheint. Kann ein Geraet backdrop-filter nicht, bleiben 7 % scharfer Text unter
     dem klebenden Kolumnentitel und der Leiste stehen - lesbar, nicht als Schimmer.
     Deshalb der Rueckfall unten: ohne Weichzeichner deckt die Flaeche voll.
     Auf dem Zielgeraet (Safari) greift der Weichzeichner; das hier ist fuer alles andere. */
}

/* ---- §2.3 Tokens dunkel (Flaeche #131110) — eigens gewaehlt, nicht umgedreht (§2.1) ------- */
html.dark .kontor {
  --paper: #131110;
  --paper-2: #1C1917;
  --paper-3: #232019;
  --ink: #F0E8DA;
  --ink-2: #BCB1A0;
  --ink-3: #877C6E;
  --rule: #332C24;
  --rule-soft: #272119;
  --brass: #C18712;
  --brass-ink: #C18712;
  --brass-wash: rgba(193, 135, 18, .13);
  --sage: #3FA67C;
  --sage-ink: #3FA67C;
  --sage-wash: rgba(63, 166, 124, .13);
  --ember: #B94145;
  --ember-ink: #DE6F6B;
  --ember-wash: rgba(185, 65, 69, .15);
  --mute: #877C6E;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 40px rgba(0, 0, 0, .55);

  /* §5.4 nennt beide Textfarben der Plakette; §5.13 nennt den Marken-Schatten nur einmal,
     naemlich in Messing hell. --weiss und --schleier stehen bewusst NICHT hier: sie sind
     in beiden Modi derselbe Wert. */
  --plakette-ink: #1B0C0C;
  --marke-schatten: 0 2px 12px rgba(193, 135, 18, .30);

  --kachel-rgb: 193, 135, 18;
  --kachel-glyph: #C18712;
  --a-geld: .26;
  --a-beleg: .17;
  --a-betrieb: .10;
  --a-sys: .06;

  --s1: #E0B45A;
  --s2: #C18712;
  --s3: #8A6110;

  --waerme: .9;
}

/* ============================================================================================
   §3 Schriftstufen.

   PRUEFREGEL §3.3: "Jede Schriftgroesse im gebauten CSS kommt aus einer dieser Tabellen."
   Damit das pruefbar bleibt, steht JEDE font-size der neuen Oberflaeche in diesem Block —
   und nur hier. parts.css und die Ansichten setzen niemals selbst eine font-size, sie tragen
   eine dieser Klassen. Ein `font-size` ausserhalb dieses Blocks ist ein Fehler.

   §3.1 P1: Kein Element mit var(--serif) rendert eine Ziffer. Ausnahme: die Kapitelziffer,
            die roemisch setzt (I II III IV) — das sind Grossbuchstaben.
   §3.1 P3: Fraunces nie unter 10,5 px.

   DIE ACHSEN DER FRAUNCES-DATEI — GEMESSEN, NICHT ANGENOMMEN
   §3 fuehrte das als NEEDS RESEARCH ("aus dem Mustergebrauch uebernommen, nicht aus der
   Schriftdatei ausgelesen"). Im Browser nachgemessen (Breitenprobe ueber alle Achsenwerte
   plus Sichtprobe bei 44 px):
     opsz  wirkt, Bereich 9 bis 144. Unter 9 und ueber 144 klemmt es. Alle hier benutzten
           Werte (14, 24, 28, 40, 60, 90, 120) liegen darin.
     wght  wirkt.
     SOFT  wirkt NICHT — 0, 30, 100 und 200 rendern zeichengleich.
     WONK  wirkt NICHT — 0 und 1 rendern zeichengleich.
   Die ausgelieferte fraunces-latin.woff2 traegt diese beiden Achsen also nicht. Die
   SOFT- und WONK-Angaben unten bleiben trotzdem stehen: sie schaden nicht, sie halten die
   Stufen deckungsgleich mit §3.3, und sie greifen von selbst, falls spaeter eine
   vollstaendigere Schriftdatei kommt. Wer sich auf ihre Wirkung verlaesst, irrt aber —
   deshalb steht es hier und in adb/07-STATUS.md.
   ============================================================================================ */

/* §3.2 Ziffernlauf. Jedes Element, das eine Ziffer rendert, traegt genau eine der beiden. */
.kontor .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -.012em;
}

.kontor .fig {
  font-variant-numeric: proportional-nums;
  font-feature-settings: "pnum" 1, "lnum" 1;
}

/* ---- §3.3 Serifenstufen (Fraunces) -------------------------------------------------------- */
.kontor .s1 {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.020em;
  font-variation-settings: 'opsz' 120, 'SOFT' 30, 'WONK' 1;
}

.kontor .s2 {
  font-family: var(--serif);
  font-size: 19.5px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.014em;
  font-variation-settings: 'opsz' 60, 'SOFT' 26, 'WONK' 1;
}

.kontor .s3 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.022em;
  font-variation-settings: 'opsz' 90, 'SOFT' 25, 'WONK' 1;
}

.kontor .s4 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.20;
  letter-spacing: -.018em;
  font-variation-settings: 'opsz' 40, 'SOFT' 25, 'WONK' 1;
}

.kontor .s5 {
  font-family: var(--serif);
  font-size: 17.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.008em;
  font-variation-settings: 'opsz' 28, 'SOFT' 20;
}

.kontor .s6 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.40;
  letter-spacing: -.005em;
  font-variation-settings: 'opsz' 24, 'SOFT' 20;
}

/* S7 ist die Untergrenze fuer Fraunces (P3). Kachel- und Dockbeschriftung. */
.kontor .s7 {
  font-family: var(--serif);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  font-variation-settings: 'opsz' 14, 'SOFT' 30;
}

/* S8 Kapitelziffer — roemisch, deshalb ziffernfrei im Sinn von P1. */
.kontor .s8 {
  font-family: var(--serif);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.00;
  letter-spacing: +.060em;
  font-variation-settings: 'opsz' 14;
  color: var(--brass-ink);
}

/* ---- §3.4 Groteskstufen (IBM Plex Sans) --------------------------------------------------- */
.kontor .z1 {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.042em;
}

.kontor .z1 > .einheit {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}

.kontor .z2 {
  font-size: 31px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.kontor .z2 > .einheit {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
}

.kontor .z3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.kontor .z3 > .einheit {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
}

.kontor .z4 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.00;
  letter-spacing: -.040em;
}

.kontor .z5 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.20;
  letter-spacing: -.026em;
}

.kontor .z6 {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.30;
  letter-spacing: 0;
}

.kontor .z7 {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.30;
  letter-spacing: 0;
}

.kontor .t1 {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.40;
  letter-spacing: 0;
}

.kontor .t2 {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.30;
  letter-spacing: 0;
}

.kontor .t3 {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.50;
  letter-spacing: +.010em;
}

.kontor .t4 {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.40;
  letter-spacing: +.010em;
  color: var(--ink-3);
}

.kontor .t5 {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.20;
  letter-spacing: 0;
  color: var(--ink-3);
}

.kontor .v1 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: +.200em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.kontor .v2 {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: +.170em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.kontor .v3 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: +.140em;
  text-transform: uppercase;
}

.kontor .v4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: +.120em;
  text-transform: uppercase;
}

.kontor .v5 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: +.130em;
  text-transform: uppercase;
}

.kontor .v5 > i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-3);
}

.kontor .v6 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: +.200em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.kontor .v7 {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: +.200em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.kontor .v8 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.010em;
  text-transform: none;
}

/* Das Eingabefeld ist die eine Stelle, an der die Groesse nicht aus der Tabelle kommt,
   sondern aus einer Zusage: §5.11c "Schrift 16 px — nicht weniger, sonst zoomt iOS Safari
   beim Fokus." Deshalb steht sie hier als eigene Stufe. */
.kontor .feldschrift {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.30;
  letter-spacing: 0;
}

/* Beschriftung in einer Wischaktion (§5.12): Symbol 19 px ueber Text 11,5 px / 620. */
.kontor .wischschrift {
  font-size: 11.5px;
  font-weight: 620;
  line-height: 1.10;
  letter-spacing: 0;
}

/* §5.11b nennt die Schrift der Auswahl-Knopfgruppe woertlich: "10,5 px / 600 / +0,1 em /
   Versalien". In keiner Stufentabelle von §3.4 steht sie — sie hatte deshalb keinen Namen.
   DAS WAR DIE URSACHE, NICHT DIE FOLGE: ohne Namen hat eine Ansicht den Wert woertlich
   abgeschrieben und eine zweite ihn geraten (.v1 = 10 px / +0,200 em). Dieselbe Knopfgruppe
   stand danach in zwei Groessen in derselben App (Befunde T-01/T-02, Divergenzpaar D-1).
   Ab hier hat sie einen Namen, und es gibt nur noch die eine Groesse. */
.kontor .auswahlschrift {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: +.100em;
  text-transform: uppercase;
}

/* §5.8 Summenzeile: "Schluessel in --ink / 600, Wert eine Stufe groesser (Z5 -> 17,5 px /
   600)." Das ist Z5, eine Stufe hoeher gesetzt — also eine eigene Groesse und damit eine
   eigene Stufe. Sie stand als nackter font-size in parts.css, mit einem Kommentar, der die
   Ausnahme selbst zugab (Befund T-03). Eine Ausnahme, die man aufschreiben muss, ist keine. */
.kontor .summenschrift {
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.20;
  letter-spacing: -.026em;
}

/* ============================================================================================
   §6.2 Bewegung — die Tabelle als Variablen, damit keine Ansicht eine eigene Dauer erfindet.
   ============================================================================================ */
.kontor {
  --t-seite: 420ms;
  --t-sheet: 380ms;
  --t-schleier: 300ms;
  --t-segment: 320ms;
  --t-wisch: 320ms;
  --t-gedrueckt: 150ms;
  --t-knopf: 120ms;
  --t-schalter: 250ms;
  --t-schalterknopf: 280ms;
  --t-plakette: 260ms;
  --t-weg: 220ms;
  --t-balken: 900ms;
  --t-kapitel: 500ms;
  --t-kolumne: 300ms;
  --t-toast: 280ms;
  --t-thema: 350ms;
}

/* §6.2: prefers-reduced-motion schaltet ALLES ab. Pruefbar: nach dem Setzen der
   Einstellung bewegt sich nichts. */
@media (prefers-reduced-motion: reduce) {
  /* Die Wurzel gehoert dazu. Sie fehlte, und genau sie traegt den Themenuebergang
     (0,35 s) - unter `reduce` bewegte sich also ausgerechnet die groesste Flaeche der
     App weiter. Im Browser mit CDP-Medienemulation gemessen: ein Element ueber 50 ms,
     und zwar MAIN.kontor. §6.2 sagt "schaltet ALLES ab". */
  .kontor,
  .kontor *,
  .kontor *::before,
  .kontor *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* §5.1 / §5.5: Rueckfall fuer Browser ohne backdrop-filter. Ohne Weichzeichner ist eine
   teildeckende Flaeche keine Milchglasscheibe, sondern ein Fenster - der weggescrollte
   Inhalt stuende lesbar im Kopfbereich. Voll deckend ist dann das ehrlichere Bild. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kontor .k-kolumne,
  .kontor .k-leiste,
  .kontor .k-segmente {
    background: var(--paper);
  }
}