/* ProScale Corporate Identity, Fassung 1.1 (Juli 2026)
 *
 * Kanonische Token-Quelle fuer alle ProScale-Oberflaechen und -Dokumente.
 * SSoT der Regeln: assets/ci/proscale-ci-manual-1.1.html (14 Seiten, verbindlich).
 * Kurzfassung mit Verwendungsregeln: docs/conventions/brand-tokens.md
 *
 * Zwei Modi, eine Ansicht hat immer genau EINEN Modus:
 *   hell  = Normalfall (Website, Anzeigen, Angebot, Reporting, Rechnung, Slides)
 *   dunkel = Ausnahme (einzelne Motive, Deckblatt, Kapiteltrenner), max. ein Drittel eines Auftritts
 *
 * Gemischt wird nur ueber genau EINE dunkle Kachel im hellen Dokument, nie umgekehrt.
 */

:root {
  /* ---- Farbe: hell, der Normalfall ---------------------------------- */
  --ps-zement: #f1f1ed;   /* Grund */
  --ps-blatt: #fafaf7;    /* Tabellen, Felder auf Zement */
  --ps-stahl-text: #1d2126; /* Text und dunkle Kachel auf hellem Grund */
  --ps-sekundaer: #5e666e;  /* Beitext auf hellem Grund, 5.15:1 auf Zement */

  /* ---- Farbe: dunkel, die Ausnahme ---------------------------------- */
  --ps-stahl: #22262b;    /* Grund */
  --ps-platte: #2b3037;   /* Felder */
  --ps-licht: #edeff0;    /* Text, Zahlen */
  --ps-guss: #959da5;     /* NUR Labels und kurze Beischriften auf dunkel, nie ein
                             Fliesstext-Absatz. 5.54:1 auf Stahl, 4.84:1 auf Platte. */

  /* ---- Signal ------------------------------------------------------- */
  --ps-pruefgruen: #9bce2e;      /* Kante, kleine Flaeche. Max 3% der Ansicht.
                                    Auf Zement nur 1.65:1 -> NIE als Text auf hell. */
  --ps-gruen-dunkel: #556f19;    /* Labels unter 24px auf hellem Grund.
                                    5.05:1 auf Zement, 5.47:1 auf Blatt (AA fuer kleinen Text). */

  /* ---- Schrift ------------------------------------------------------
   * Eine Familie, zwei Breiten. Kein Monospace, nirgends.
   * Archivo Variable, Achsen wdth 62..125 und wght 100..900.
   * Die Breitenachse braucht die wdth-Fassung der Schrift:
   *   import "@fontsource-variable/archivo/wdth.css";
   * Ohne sie fallen Schlagzeilen still auf Breite 100 zurueck.
   */
  --ps-font: "Archivo Variable", "Archivo", system-ui, sans-serif;
  --ps-wdth-display: 112%;  /* Schlagzeile, Titel, Zahl */
  --ps-wdth-text: 100%;     /* Fliesstext, Label */

  --ps-size-schlagzeile-min: 48px;
  --ps-size-schlagzeile-max: 110px;
  --ps-ls-schlagzeile: -0.025em;
  --ps-size-titel-min: 22px;
  --ps-size-titel-max: 40px;
  --ps-size-text-min: 15px;
  --ps-size-text-max: 18px;
  --ps-lh-text: 1.55;
  --ps-size-label-min: 10px;
  --ps-size-label-max: 12px;
  --ps-ls-label: 0.22em;

  /* ---- Raster und Kanten -------------------------------------------
   * Alles buendig links, alles im sichtbaren Raster, nichts schwebt.
   */
  --ps-spalten: 12;
  --ps-rinne: 2px;
  --ps-kante-signal: 6px;  /* Signalkante, einmal pro Ansicht */
  --ps-linie-haupt: 2px;   /* zwischen Abschnitten, um Felder, unter Kopfzeilen */
  --ps-linie-hilf: 1px;    /* nur in Tabellen und Listen */
  --ps-radius: 0px;        /* ueberall, keine Ausnahme */

  /* Abstandsreihe. Dazwischen wird nicht gemessen. */
  --ps-space-1: 4px;
  --ps-space-2: 8px;
  --ps-space-3: 14px;
  --ps-space-4: 22px;
  --ps-space-5: 34px;
  --ps-space-6: 60px;

  --ps-rand-web: 34px;
  --ps-rand-anzeige: 32px;
  --ps-rand-druck: 16mm;
}

/* ---- Modus hell (Normalfall) ---------------------------------------- */
.ps-hell {
  --ps-grund: var(--ps-zement);
  --ps-flaeche: var(--ps-blatt);
  --ps-text: var(--ps-stahl-text);
  --ps-text-schwach: var(--ps-sekundaer);
  --ps-linie: #cfd0ca;
  --ps-signal: var(--ps-pruefgruen);
  --ps-signal-klein: var(--ps-gruen-dunkel);
  background: var(--ps-grund);
  color: var(--ps-text);
}

/* ---- Modus dunkel (Ausnahme, max ein Drittel) ------------------------ */
.ps-dunkel {
  --ps-grund: var(--ps-stahl);
  --ps-flaeche: var(--ps-platte);
  --ps-text: var(--ps-licht);
  --ps-text-schwach: var(--ps-guss);
  --ps-linie: #3a4046;
  --ps-signal: var(--ps-pruefgruen);
  --ps-signal-klein: var(--ps-pruefgruen);
  background: var(--ps-grund);
  color: var(--ps-text);
}

/* ---- Typografie-Rollen ----------------------------------------------- */
.ps-schlagzeile {
  font-family: var(--ps-font);
  font-stretch: var(--ps-wdth-display);
  font-weight: 700;
  font-size: clamp(var(--ps-size-schlagzeile-min), 6vw, var(--ps-size-schlagzeile-max));
  line-height: 0.94;
  letter-spacing: var(--ps-ls-schlagzeile);
  text-wrap: balance;
}

.ps-titel {
  font-family: var(--ps-font);
  font-stretch: var(--ps-wdth-display);
  font-weight: 700;
  font-size: clamp(var(--ps-size-titel-min), 3vw, var(--ps-size-titel-max));
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.ps-text {
  font-family: var(--ps-font);
  font-stretch: var(--ps-wdth-text);
  font-weight: 400;
  font-size: clamp(var(--ps-size-text-min), 1.2vw, var(--ps-size-text-max));
  line-height: var(--ps-lh-text);
}

.ps-label {
  font-family: var(--ps-font);
  font-weight: 700;
  font-size: var(--ps-size-label-max);
  text-transform: uppercase;
  letter-spacing: var(--ps-ls-label);
}

.ps-zahl {
  font-family: var(--ps-font);
  font-stretch: var(--ps-wdth-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- Bausteine -------------------------------------------------------
 * Der Hauptknopf ist NICHT gruen gefuellt. Hell: Stahl mit gruener Unterkante.
 * Dunkel: gruen gefuellt mit Stahl-Text (das ist die eine Handlung der Ansicht).
 */
.ps-knopf {
  font-family: var(--ps-font);
  font-weight: 700;
  font-size: 15px;
  padding: var(--ps-space-3) var(--ps-space-4);
  border: 0;
  border-radius: var(--ps-radius);
  text-align: left;
  cursor: pointer;
}

.ps-hell .ps-knopf-haupt {
  background: var(--ps-stahl-text);
  color: var(--ps-licht);
  border-bottom: var(--ps-kante-signal) solid var(--ps-pruefgruen);
}

.ps-dunkel .ps-knopf-haupt {
  background: var(--ps-pruefgruen);
  color: var(--ps-stahl);
}

.ps-knopf-zweit {
  background: transparent;
  color: inherit;
  border: var(--ps-linie-haupt) solid currentColor;
}

/* Signalkante an einer Flaeche. Einmal pro Ansicht. */
.ps-kante-oben { border-top: var(--ps-kante-signal) solid var(--ps-pruefgruen); }
.ps-kante-links { border-left: var(--ps-kante-signal) solid var(--ps-pruefgruen); }

.ps-feld {
  background: var(--ps-flaeche);
  border: var(--ps-linie-haupt) solid var(--ps-linie);
  border-radius: var(--ps-radius);
  padding: var(--ps-space-3);
  font-family: var(--ps-font);
  color: var(--ps-text);
}
.ps-feld:focus-visible {
  outline: none;
  border-color: var(--ps-pruefgruen);
}

/* Die eine dunkle Kachel im hellen Dokument. Genau eine, nie zwei. */
.ps-hell .ps-kachel-dunkel {
  background: var(--ps-stahl);
  color: var(--ps-licht);
  border-radius: var(--ps-radius);
}

/* Screenshots: entsaettigt, angeschnitten, genau ein Marker. */
.ps-beleg { filter: grayscale(1); display: block; max-width: 100%; }
.ps-beleg-marker { outline: var(--ps-linie-haupt) solid var(--ps-pruefgruen); outline-offset: 0; }
/* Unkenntlich machen: ueberdecken mit Stahlflaeche, nie weichzeichnen. */
.ps-geschwaerzt { background: var(--ps-stahl); color: transparent; }

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