/* ==================================================================
   The Sanctis Letter — Grundwerte.

   Dieselbe Sprache wie die Seite "Zugang erhalten": Weiss, Creme,
   Blau, Schwarz. Scharfe Kanten, duenne Linien, Outfit fuer den
   Satz, Cormorant nur fuer die kursiven Einschuebe.

   Gelb kommt genau einmal vor, als Marke der Gratis-Ausgaben.
   Es stammt aus den Titelbildern, nicht aus einer Farbpalette.

   Wird hier eine Zahl geaendert, aendert sich die ganze Seite.
   ================================================================== */

:root{
  /* ---- Flaechen ---------------------------------------------------- */
  --bg      : #FFFFFF;
  --creme   : #F6F4EF;
  --bg2     : #F2F2F0;
  --mesh    : #EFF1F8;

  /* ---- Schrift ----------------------------------------------------- */
  --ink     : #0A0A0B;
  --text    : #15151A;
  --text2   : rgba(21,21,26,.80);
  --text3   : rgba(21,21,26,.58);

  /* Auf dunklem Grund */
  --hell    : #FFFFFF;
  --hell2   : rgba(255,255,255,.78);
  --hell3   : rgba(255,255,255,.58);

  /* ---- Linien ------------------------------------------------------ */
  --linie   : rgba(21,21,26,.16);
  --linie2  : rgba(21,21,26,.09);
  --linie-n : rgba(255,255,255,.18);
  --linie-n2: rgba(255,255,255,.10);

  /* ---- Blau. Der einzige Akzent, nie als grosse Flaeche. ----------- */
  --blau       : #1B49D6;
  --blau-tief  : #123AAE;
  --blau2      : #8FABFF;
  --blau-weich : rgba(27,73,214,.07);
  --blau-linie : rgba(27,73,214,.30);

  /* ---- Gelb. Nur die Marke der Gratis-Ausgaben. -------------------- */
  --gelb       : #B98A00;   /* dunkel genug fuer lesbaren Text auf Weiss */
  --gelb-weich : rgba(233,183,0,.15);
  --gelb-linie : rgba(233,183,0,.55);

  /* ---- Schriftfamilien --------------------------------------------- */
  --serif : 'Cormorant Garamond',Georgia,serif;
  --sans  : 'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono  : 'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* ---- Mass und Luft ------------------------------------------------ */
  --pad    : 20px;
  --spalte : 100%;
  --breit  : 100%;
  --luft   : 68px;
  --luft2  : 34px;

  --radius : 2px;   /* scharf. Eine Publikation, keine App. */
  --kopf   : 58px;

  /* ---- Tempo -------------------------------------------------------- */
  --tempo      : 560ms ease;
  --tempo-kurz : 160ms ease;
}

/* Ab dem Tablet ist die Textbreite gleich der Lesespalte.
   Vierzig Pixel Ausbruch sehen nicht nach Absicht aus,
   sondern nach verrutscht. */
@media (min-width:640px){
  :root{ --pad:40px; --spalte:560px; --breit:560px; --luft:76px; --luft2:38px; }
}

@media (min-width:1024px){
  :root{ --pad:56px; --spalte:700px; --breit:1160px; --luft:98px; --luft2:46px; --kopf:68px; }
}