/* ============================================================
   EGH Gebaeudeservice / 01 - DESIGN TOKENS
   Einzige Quelle der Wahrheit fuer Farbe, Typo, Raum, Motion.
   Wer hier etwas aendert, aendert es auf jeder Seite.
   ============================================================ */

:root {
  /* --- FARBE ------------------------------------------------
     Die Seite steht auf dem Marineton des Logos, nicht auf
     Schwarz. Der Unterschied ist klein und trotzdem
     entscheidend: Ein neutrales Schwarz waere eine fremde
     Farbe, dieses Blau ist die Marke selbst.

     Rhythmus entsteht nicht aus Hell gegen Dunkel, sondern aus
     drei nah beieinander liegenden Tiefen. Das ist ruhiger als
     ein staendiger Wechsel und laesst das Gold ueber die ganze
     Seite gleich hell wirken.

     nacht    : Grundflaeche, der Logoton
     nacht-2  : gehoben, fuer ganze Sektionen und Karten
     nacht-3  : Tiefe, fuer Rechner und Fuss
     kreide   : Schrift
     gold     : Akzent. Linien, Preise, der Hauptknopf.
  --------------------------------------------------------- */
  --nacht:     #0A141D;
  --nacht-2:   #101B25;
  --nacht-3:   #06101A;
  --kreide:    #ECEEF0;
  --gold:      #C5A880;
  --gold-hell: #DCC49F;

  /* Schrift auf goldener Flaeche. Eigener Name, weil es hier
     nicht um die Buehne geht, sondern um Text auf einem Knopf. */
  --auf-gold:  var(--nacht);

  /* Semantische Buehnen-Tokens. Nur diese kippen Sektionen.
     Kein Bauteil weiss, auf welcher Tiefe es steht. */
  --grund:       var(--nacht);
  --auf-grund:   var(--kreide);
  --auf-grund-2: rgba(236, 238, 240, 0.66);
  --regel:       rgba(236, 238, 240, 0.13);
  --regel-satt:  rgba(236, 238, 240, 0.26);
  --flaeche:     var(--nacht-2);
  --feld:        rgba(236, 238, 240, 0.05);
  --akzent:      var(--gold);
  --akzent-linie:var(--gold);

  /* --- TYPOGRAFIE -------------------------------------------
     Zwei Familien, klar getrennte Aufgaben. Grotesk sagt an,
     Antiqua erzaehlt. Eine Monospace gibt es bewusst nicht. */
  --font-kopf: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Source Serif 4", Georgia, "Times New Roman", serif;

  --t-mega:  clamp(2.3rem, 4.6vw, 4.5rem);
  --t-xl:    clamp(1.75rem, 3.1vw, 3rem);
  --t-lg:    clamp(1.35rem, 2.1vw, 1.95rem);
  --t-md:    clamp(1.15rem, 1.5vw, 1.35rem);
  --t-lede:  clamp(1.15rem, 1.35vw, 1.3rem);
  --t-body:  clamp(1.0625rem, 0.95vw, 1.125rem);
  --t-sm:    0.9375rem;
  --t-label: 0.75rem;

  --track-mega: -0.028em;
  --track-xl:   -0.022em;
  --track-lg:   -0.016em;
  --track-label: 0.13em;

  --lead-kopf: 1.08;
  --lead-lede: 1.45;
  --lead-body: 1.66;

  /* --- RAUM -------------------------------------------------
     Viel Raum, aber kein Spaziergang: Der Weg von der Leistung
     zum Richtpreis zur Anfrage muss kurz bleiben. */
  --gutter:  clamp(1.25rem, 4vw, 4rem);
  --sec-y:   clamp(4rem, 8vw, 7.5rem);
  --sec-y-lg:clamp(5.5rem, 11vw, 10rem);
  --stack-1: 0.5rem;
  --stack-2: 1rem;
  --stack-3: 1.75rem;
  --stack-4: 3rem;
  --stack-5: 5rem;
  --maxw:    82rem;
  --maxw-text: 44rem;

  /* --- FORM -------------------------------------------------
     Kleine, gleichmaessige Radien. Nicht scharfkantig, nicht
     rund: 4 Pixel lesen sich als sauber verarbeitet. Pillen
     gibt es nur bei den Filterschaltern, weil eine Pille dort
     als Schalter gelesen wird. */
  --r-1: 4px;
  --r-2: 8px;
  --r-pille: 999px;
  --hair: 1px;

  /* Auf dunklem Grund traegt ein Schatten nicht. Tiefe entsteht
     ueber die Flaeche selbst und ueber Haarlinien. Was hier
     steht, ist deshalb fast nichts, und der zweite Wert dient
     nur dazu, eine Karte beim Ueberfahren minimal abzuheben. */
  --schatten:      0 1px 2px rgba(0, 0, 0, 0.3);
  --schatten-hoch: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* --- MOTION -----------------------------------------------
     Leise. Jede Bewegung hat eine Aufgabe: Reihenfolge zeigen,
     Zustand quittieren, Aufmerksamkeit lenken. Es gibt keine
     Bibliothek dafuer, nur Uebergaenge und einen Beobachter. */
  --d-schnell: 0.18s;
  --d-mittel:  0.28s;
  --d-auftritt:0.6s;

  --e-aus:  cubic-bezier(0.16, 1, 0.3, 1);
  --e-weich:cubic-bezier(0.4, 0, 0.2, 1);

  /* --- EBENEN ----------------------------------------------- */
  --z-fort: 30;
  --z-nav: 60;
  --z-menu: 70;
  --z-ruf: 80;

  color-scheme: dark;
}

/* ------------------------------------------------------------
   DIE DREI TIEFEN

   Eine Sektion bekommt data-grund und alles darin dreht sich
   mit: Schrift, Linien, Flaechen, Felder. Der Unterschied
   zwischen den Stufen ist klein. Er soll den Wechsel spuerbar
   machen, nicht sichtbar.

   gehoben : Leistungen, Ablauf, Fragen
   tief    : Angebotsplaner und Fuss, also Geld und Ende
   ------------------------------------------------------------ */
[data-grund="gehoben"] {
  --grund:   var(--nacht-2);
  --flaeche: #16212C;
  --feld:    rgba(236, 238, 240, 0.06);
}

[data-grund="tief"] {
  --grund:   var(--nacht-3);
  --flaeche: #0D1721;
  --feld:    rgba(236, 238, 240, 0.05);
}