/*
 * Editio - Gestaltungsschicht: Kern.
 * Merkmale (Custom Properties) fuer Farbe, Abstand und Schrift, dazu die
 * Grundflaeche des Zeichenbretts. Siehe oberflaeche/README.md fuer die
 * Kurzfassung. Bindend ist DESIGN.md im Projektordner.
 *
 * Zwei verstellbare Groessen liegen als Merkmal am Wurzelelement:
 *   --ton            Farbwinkel in OKLCH, 0 bis 360
 *   --raster-fein/-grob  Rasterweiten in Pixeln
 * Drei Voreinstellungen ueber [data-voreinstellung] auf <html>:
 *   praezision (Standard) - knochen - blaupause
 * Hell/dunkel sind gleichrangig: prefers-color-scheme entscheidet, ein
 * ausdrueckliches [data-fassung="hell"|"dunkel"] auf <html> gewinnt immer.
 * Kein Wechsel braucht ein zweites Stilblatt - alles hier drin.
 */

:root {
  /* ---- Die zwei verstellbaren Groessen, Voreinstellung praezision ---- */
  --ton: 68;
  --raster-fein: 16px;
  --raster-grob: 96px;

  /* ---- Farbformel: Parameter (Helligkeit/Chroma), Farbe wird daraus gebaut ---- */
  --grund-l: 97.5%;      --grund-c: 0.004;
  --flaeche-l: 99.4%;    --flaeche-c: 0.002;
  --linie-l: 45%;        --linie-c: 0.010;
  --linie-fein-l: 88%;   --linie-fein-c: 0.006;
  --text-l: 24%;         --text-c: 0.012;
  --text-2-l: 42%;       --text-2-c: 0.010;
  --akzent-l: 52%;       --akzent-c: 0.140;
  --akzent-flaeche-l: 93%; --akzent-flaeche-c: 0.030;

  /* ---- Abstandsreihe, fest, aus 4 Pixeln ---- */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;
  --raum-8: 64px;

  /* ---- Schriftrollen ---- */
  --schrift-beschriftung: 'Saira Condensed', ui-sans-serif, system-ui, 'Arial Narrow', sans-serif;
  --schrift-text: 'Archivo', ui-sans-serif, system-ui, Arial, sans-serif;
  --schrift-zahlen: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Stufenreihe, Sprung 1.25 */
  --mass-0: 0.8rem;
  --mass-1: 1rem;
  --mass-2: 1.25rem;
  --mass-3: 1.5625rem;
  --mass-4: 1.953rem;
  --mass-5: 2.441rem;

  --sperrung-versal: 0.1em;

  /* ---- Bewegung ---- */
  --dauer: 150ms;
  --schwung: cubic-bezier(0.165, 0.84, 0.44, 1); /* ease-out-quart */

  /* ---- Zustandsfarben, eigener Zweck, eigene Feste Farbwinkel ---- */
  --zustand-veroeffentlicht: oklch(54% 0.10 145);
  --zustand-entwurf: var(--text-2);
  --zustand-veraendert: var(--akzent);
  --zustand-fehlerhaft: oklch(52% 0.17 27);
}

/* Voreinstellung ausdruecklich, gleich der Grundeinstellung */
:root[data-voreinstellung='praezision'] {
  --ton: 68;
  --raster-fein: 16px;
  --raster-grob: 96px;
}

:root[data-voreinstellung='knochen'] {
  --ton: 27;
  --raster-fein: 10px;
  --raster-grob: 50px;
}

:root[data-voreinstellung='blaupause'] {
  --ton: 250;
  --raster-fein: 14px;
  --raster-grob: 70px;
}

/* ==== Zusammengesetzte Farben aus den Parametern ==== */
:root {
  --grund: oklch(var(--grund-l) var(--grund-c) var(--ton));
  --flaeche: oklch(var(--flaeche-l) var(--flaeche-c) var(--ton));
  --linie: oklch(var(--linie-l) var(--linie-c) var(--ton));
  --linie-fein: oklch(var(--linie-fein-l) var(--linie-fein-c) var(--ton));
  --text: oklch(var(--text-l) var(--text-c) var(--ton));
  --text-2: oklch(var(--text-2-l) var(--text-2-c) var(--ton));
  --akzent: oklch(var(--akzent-l) var(--akzent-c) var(--ton));
  --akzent-flaeche: oklch(var(--akzent-flaeche-l) var(--akzent-flaeche-c) var(--ton));
}

/* ==== Dunkle Fassung, eigens durchgerechnet, nicht invertiert ====
 * Reihenfolge bindend: erst die Systemvorgabe (prefers-color-scheme), dann
 * die ausdrueckliche Wahl per [data-fassung] - sie gewinnt immer, in beide
 * Richtungen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-fassung='hell']) {
    --grund-l: 20%;        --grund-c: 0.012;
    --flaeche-l: 24%;      --flaeche-c: 0.014;
    --linie-l: 78%;        --linie-c: 0.014;
    --linie-fein-l: 32%;   --linie-fein-c: 0.010;
    --text-l: 92%;         --text-c: 0.008;
    --text-2-l: 78%;       --text-2-c: 0.010;
    --akzent-l: 72%;       --akzent-c: 0.150;
    --akzent-flaeche-l: 30%; --akzent-flaeche-c: 0.045;
    --zustand-veroeffentlicht: oklch(74% 0.12 145);
    --zustand-fehlerhaft: oklch(70% 0.18 27);
  }
}
:root[data-fassung='dunkel'] {
  --grund-l: 20%;        --grund-c: 0.012;
  --flaeche-l: 24%;      --flaeche-c: 0.014;
  --linie-l: 78%;        --linie-c: 0.014;
  --linie-fein-l: 32%;   --linie-fein-c: 0.010;
  --text-l: 92%;         --text-c: 0.008;
  --text-2-l: 78%;       --text-2-c: 0.010;
  --akzent-l: 72%;       --akzent-c: 0.150;
  --akzent-flaeche-l: 30%; --akzent-flaeche-c: 0.045;
  --zustand-veroeffentlicht: oklch(74% 0.12 145);
  --zustand-fehlerhaft: oklch(70% 0.18 27);
}

/* ==== Blaupause: der Grund traegt die Farbe ====
 * Eine Voreinstellung, ein weiteres Merkmal (der bereits vorhandene Wert
 * "blaupause" von [data-voreinstellung]) - kein zweites Stilblatt. Hell und
 * dunkel bleiben auch hier gleichrangig, deshalb dieselbe Kaskade wie oben,
 * nur zusaetzlich auf die Voreinstellung eingeschraenkt. */
:root[data-voreinstellung='blaupause'] {
  --grund-l: 74%;       --grund-c: 0.058;
  --flaeche-l: 80%;     --flaeche-c: 0.048;
  --linie-l: 30%;       --linie-c: 0.055;
  --linie-fein-l: 52%;  --linie-fein-c: 0.045;
  --text-l: 18%;        --text-c: 0.035;
  --text-2-l: 36%;      --text-2-c: 0.028;
  /* Der Grund traegt hier selbst den Akzentton. Ein Akzent in derselben
     Helligkeit verschwindet darin: gemessen 1,85 zu 1 statt der geforderten
     4,5. Deshalb wird er fuer diese Voreinstellung eigens dunkel gesetzt. */
  --akzent-l: 28%;      --akzent-c: 0.16;
  --akzent-flaeche-l: 88%; --akzent-flaeche-c: 0.04;
  --zustand-veroeffentlicht: oklch(32% 0.13 150);
  --zustand-fehlerhaft: oklch(34% 0.17 27);
}
@media (prefers-color-scheme: dark) {
  :root[data-voreinstellung='blaupause']:not([data-fassung='hell']) {
    --akzent-l: 86%;      --akzent-c: 0.13;
    --akzent-flaeche-l: 34%; --akzent-flaeche-c: 0.07;
    --zustand-veroeffentlicht: oklch(84% 0.14 150);
    --zustand-fehlerhaft: oklch(80% 0.15 27);
    --grund-l: 27%;       --grund-c: 0.075;
    --flaeche-l: 32%;     --flaeche-c: 0.062;
    --linie-l: 86%;       --linie-c: 0.045;
    --linie-fein-l: 58%;  --linie-fein-c: 0.040;
    --text-l: 95%;        --text-c: 0.020;
    --text-2-l: 78%;      --text-2-c: 0.025;
  }
}
:root[data-voreinstellung='blaupause'][data-fassung='dunkel'] {
  --akzent-l: 86%;      --akzent-c: 0.13;
  --akzent-flaeche-l: 34%; --akzent-flaeche-c: 0.07;
  --zustand-veroeffentlicht: oklch(84% 0.14 150);
  --zustand-fehlerhaft: oklch(80% 0.15 27);
  --grund-l: 27%;       --grund-c: 0.075;
  --flaeche-l: 32%;     --flaeche-c: 0.062;
  --linie-l: 86%;       --linie-c: 0.045;
  --linie-fein-l: 58%;  --linie-fein-c: 0.040;
  --text-l: 95%;        --text-c: 0.020;
  --text-2-l: 78%;      --text-2-c: 0.025;
}

/* ==== Grundflaeche ==== */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--mass-1);
  line-height: 1.5;
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-beschriftung);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--raum-3);
  color: var(--text);
}
h1 { font-size: var(--mass-5); font-weight: 700; }
h2 { font-size: var(--mass-4); }
h3 { font-size: var(--mass-3); }
h4 { font-size: var(--mass-2); }

p { margin: 0 0 var(--raum-4); max-width: 68ch; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

code, .zahlen, .tabellarisch {
  font-family: var(--schrift-zahlen);
  font-variant-numeric: tabular-nums;
}

.versal {
  text-transform: uppercase;
  letter-spacing: var(--sperrung-versal);
  font-size: var(--mass-0);
}

/* Sichtbarer Tastaturfokus ueberall */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* Bewegung: sparsam, nur transform/opacity, abschaltbar */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==== Layout-Bausteine des Rahmens (Kopfleiste/Werkzeugleiste/Flaeche) ==== */
.rahmen-kopfleiste {
  height: 48px;
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  padding: 0 var(--raum-4);
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}

.rahmen-werkzeugleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  min-height: 40px;
  padding: var(--raum-2) var(--raum-4);
  border-bottom: 1px solid var(--linie-fein);
}

.rahmen-flaeche {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* Die Markenbeschriftung in der Kopfleiste (S-22 ergaenzt, vorher nur als
   Seiten-Stil auf der Baustandsseite vorhanden). Ausdruecklich als Merkmal
   hier verankert statt je Seite neu geschrieben: DESIGN.md verlangt fuer die
   Kopfleiste "Marke, aktuelle Website, Bereichswechsel", jede Ansicht hinter
   dem Torwaechter braucht dieselbe Beschriftung. */
.marke {
  font-family: var(--schrift-beschriftung);
  font-weight: 700;
  font-size: var(--mass-2);
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
}

/* Inhaltsflaeche innerhalb von rahmen-flaeche fuer gewoehnlichen Inhalt
   (Liste, Formular, Fliesstext) -- Gegenstueck zu rasterflaeche: Polster
   statt Zeichenraster, weil hier nichts gezeichnet, sondern gelesen und
   ausgefuellt wird (S-22 ergaenzt, DESIGN.md: das Raster gehoert nur auf
   Zeichenflaechen). */
.rahmen-inhalt {
  padding: var(--raum-6) var(--raum-4) var(--raum-8);
}

/* Schriftfeld unten rechts auf der Flaeche, Teil des Blattes, keine
   Statusleiste (DESIGN.md, Abschnitt Layout). Traegt den Baustein
   "schriftfeld" aus bausteine.css (S-22 ergaenzt, vorher nur als
   Seiten-Stil auf der Baustandsseite vorhanden). */
.rahmen-schriftfeld {
  display: flex;
  justify-content: flex-end;
  padding: var(--raum-6) var(--raum-4) var(--raum-4);
  border-top: 1px solid var(--linie-fein);
  margin-top: var(--raum-6);
}
@media (max-width: 480px) {
  .rahmen-schriftfeld { justify-content: stretch; }
  .rahmen-schriftfeld .schriftfeld { width: 100%; }
}

/* Ausnahme zur Kontrastregel, bewusst und gemessen: die feine Rasterlinie
   liegt zwischen 1,3 und 2,4 zu 1 und damit unter den 3 zu 1, die fuer
   bedeutungstragende Linien gelten. Sie traegt keine Bedeutung, sie gibt
   Orientierung. Auf 3 zu 1 gebracht wuerde sie mit der Schrift konkurrieren
   und die Flaeche unlesbar machen. Die groben Linien und alle Feldraender
   erfuellen die Regel.
   ============================================================ */

/* ============================================================
   Zeichenflaeche
   ------------------------------------------------------------
   Das Raster ist kein Seitenhintergrund. Es gehoert dorthin, wo
   etwas gezeichnet wird: auf das Board und auf die Anmeldung.
   Unter Fliesstext macht es das Lesen schwer, ohne etwas zu
   erklaeren. Wer es braucht, setzt die Klasse rasterflaeche.
   ============================================================ */
.rasterflaeche {
  /* Das Zeichenbrett: feines und grobes Raster uebereinandergelegt, beide
     Weiten aus dem verstellbaren Merkmal. */
  background-image:
    repeating-linear-gradient(to right, var(--linie-fein) 0 1px, transparent 1px var(--raster-fein)),
    repeating-linear-gradient(to bottom, var(--linie-fein) 0 1px, transparent 1px var(--raster-fein)),
    repeating-linear-gradient(to right, var(--linie) 0 1px, transparent 1px var(--raster-grob)),
    repeating-linear-gradient(to bottom, var(--linie) 0 1px, transparent 1px var(--raster-grob));
  background-attachment: fixed;
  /* Der Versatz erlaubt es, das Raster auf ein Element auszurichten, damit
     ein Formular auf Rasterlinien sitzt statt daneben. Gesetzt wird er von
     raster-ausrichten.js, ohne Skript bleibt er null und nichts bricht. */
  background-position:
    var(--raster-versatz-x, 0) var(--raster-versatz-y, 0),
    var(--raster-versatz-x, 0) var(--raster-versatz-y, 0),
    var(--raster-versatz-x, 0) var(--raster-versatz-y, 0),
    var(--raster-versatz-x, 0) var(--raster-versatz-y, 0);
}