/* Farb-, Größen- und Abstandswerte für schalsteine24.de.
 *
 * HARTE REGEL, wie in den Schwesterprojekten: Außerhalb dieser Datei steht
 * KEIN Farbwert. Kein #hex, kein rgb(), kein hsl(), kein benannter Farbname in
 * base.css, components.css oder in einer Seite. Wer eine neue Farbe braucht,
 * legt hier einen Token an. Das ist der Grund, warum sich die Farbwelt der drei
 * Kundenseiten in einem Griff umstellen lässt.
 *
 * Leitton ist #305CDE, vom Auftraggeber vorgegeben.
 *
 * Zur Grauskala: Sie ist bewusst KÜHL angelegt, also zum Blau hin getönt. Warme
 * Grautöne neben einem kalten Blau sehen aus, als wären zwei Entwürfe
 * zusammengeklebt worden. Eine Grautonfamilie, nicht zwei.
 *
 * Zur Sparsamkeit: Es gibt genau EINEN Akzent. Das Blau trägt Verweise,
 * aktive Zustände, Kennzahlen und Linien. Ein zweiter Akzent würde die
 * Rangfolge zerstören, die auf 49 Seiten das Einzige ist, was den Leser führt.
 */

:root {
  /* ---------- Grundflächen ---------- */
  --papier: #FBFCFD;          /* Seitengrund */
  --papier-tief: #F2F5FA;     /* abgesetzte Abschnitte */
  --flaeche: #FFFFFF;         /* Karten, Tabellen, Formulare */
  --flaeche-tief: #F7F9FC;    /* Tabellenzeilen im Wechsel */

  /* ---------- Schriftfarben ---------- */
  --tinte: #131829;           /* Fließtext, nie reines Schwarz */
  --tinte-kraeftig: #0B0F1C;  /* große Überschriften */
  --tinte-gedaempft: #454C67; /* Vorspann, Bildunterschriften */
  --tinte-leise: #6B7392;     /* Beschriftungen, Metaangaben */
  --tinte-auf-dunkel: #F4F6FB;

  /* ---------- Leitton ---------- */
  --leitton: #305CDE;
  --leitton-tief: #2246AC;    /* Hover und gedrückter Zustand */
  --leitton-dunkel: #16255C;  /* dunkle Flächen, Fußzeile */
  --leitton-nacht: #0E1836;   /* tiefste Fläche */
  --leitton-hauch: #EDF1FD;   /* Wasch-Fläche hinter Hinweisen */
  --leitton-schleier: #DDE5FA;

  /* ---------- Wasch-Töne für den bewegten Seitengrund ---------- */
  /* Sehr durchlässig. Drei Blaustufen, die langsam übereinander ziehen und
     zusammen höchstens rund 7 % Deckung erreichen. Kräftiger dürfen sie nicht
     sein: Der Grund liegt hinter dem Fließtext, und was dort auffällt, stört
     beim Lesen. */
  --wasch-1: rgb(48 92 222 / 6%);
  --wasch-2: rgb(34 70 172 / 5%);
  --wasch-3: rgb(122 158 240 / 7%);

  /* ---------- Linien ---------- */
  --linie: #E4E8F2;
  --linie-kraeftig: #C9D1E4;
  --linie-auf-dunkel: #2A3A6B;

  /* ---------- Zustände ---------- */
  --fokus: #1B45C4;
  --fokus-hof: #B9CBF7;

  /* ---------- Schatten ----------
   * Blau getönt statt neutral schwarz. Ein schwarzer Schatten auf einem
   * blaustichigen Grund wirkt schmutzig. */
  --schatten-fein: 0 1px 2px rgb(19 24 41 / 5%);
  --schatten-karte: 0 1px 2px rgb(19 24 41 / 4%), 0 12px 28px -14px rgb(22 37 92 / 22%);
  --schatten-hoch: 0 2px 4px rgb(19 24 41 / 5%), 0 24px 48px -20px rgb(22 37 92 / 28%);

  /* ---------- Schrift ---------- */
  --schrift-text: "Source Sans 3", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --schrift-titel: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --schrift-zahl: ui-monospace, "Cascadia Mono", "Consolas", monospace;

  /* Typografische Skala, Fließwerte.
   * Der Grundtext bleibt bewusst bei 1,125 rem: Die Zielgruppe ist 40 bis 60,
   * und auf den langen Seiten stehen bis zu 25.000 Zeichen. */
  --grad-mini: 0.8125rem;
  --grad-klein: 0.9375rem;
  --grad-text: 1.125rem;
  --grad-vorspann: clamp(1.1875rem, 0.55vw + 1.06rem, 1.375rem);
  --grad-h4: 1.1875rem;
  --grad-h3: clamp(1.3125rem, 0.8vw + 1.13rem, 1.5rem);
  --grad-h2: clamp(1.625rem, 1.6vw + 1.28rem, 2.125rem);
  --grad-h1: clamp(2.125rem, 3.4vw + 1.4rem, 3.375rem);
  --grad-schau: clamp(2.5rem, 5vw + 1.4rem, 4.25rem);

  --zeile-eng: 1.15;
  --zeile-titel: 1.22;
  --zeile-text: 1.68;

  /* ---------- Abstände, Achtelschritte ---------- */
  --ab-1: 0.25rem;
  --ab-2: 0.5rem;
  --ab-3: 0.75rem;
  --ab-4: 1rem;
  --ab-5: 1.5rem;
  --ab-6: 2rem;
  --ab-7: 2.75rem;
  --ab-8: 3.5rem;
  --ab-9: 4.5rem;
  --ab-10: 6rem;
  --ab-abschnitt: clamp(3.5rem, 6vw, 6rem);

  /* ---------- Maße ---------- */
  /* Lesebreite. Bewusst weiter als die uebliche Empfehlung von 68 Zeichen:
     Der Auftraggeber wollte ausdruecklich mehr Inhaltsbreite, und bei 82
     Zeichen ist der Text noch gut zu lesen. Darueber wird das Zurueckfinden
     an den Zeilenanfang muehsam. */
  --breite-satz: 82ch;
  --breite-inhalt: 1320px;
  --breite-weit: 1440px;
  --rand-seite: clamp(1.125rem, 4vw, 3rem);

  /* ---------- Radien ----------
   * Abgestuft, nicht überall gleich: außen weicher, innen enger. */
  --radius-klein: 4px;
  --radius: 8px;
  --radius-gross: 14px;

  /* ---------- Bewegung ----------
   * MOTION_INTENSITY 3. Alles unter 300 ms, nur transform und opacity. */
  --dauer-kurz: 140ms;
  --dauer: 220ms;
  --dauer-lang: 560ms;
  --kurve: cubic-bezier(0.2, 0, 0.2, 1);
  --kurve-aus: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Ebenen ----------
   * Feste Leiter statt gewürfelter z-index-Werte. */
  --ebene-grund: 1;
  --ebene-klebend: 20;
  --ebene-kopf: 30;
  --ebene-menue: 40;
  --ebene-oben: 50;
}

/* Die Seite ist bewusst nur hell angelegt. Ein halbfertiger Dunkelmodus auf 49
 * Inhaltsseiten mit 146 Fotos ist schlechter als gar keiner. Damit die Seite in
 * dunkel eingestellten Browsern trotzdem nicht flackert oder eingefärbt wird,
 * wird das Farbschema ausdrücklich benannt. */
:root {
  color-scheme: light;
}