/* ============================================================
   Deep5 — Marke
   Farben, Schriften, Schriftgrade und Maße.
   Alles, was mehr als einmal vorkommt, steht hier und nur hier.
   Die anderen Dateien greifen ausschließlich über diese Namen zu.
   ============================================================ */

:root{

  /* ---------- Grundpalette (CD-Manual) ---------- */
  --tinte:      #1a1c22;
  --anthrazit:  #3b3d48;
  --bordeaux:   #522038;
  --stahl:      #4a5e6d;
  --hellblau:   #ced7ee;
  --mint:       #e2eeed;
  --vanille:    #ffe9b6;

  /* ---------- Abgeleitete Gründe ---------- */
  --papier:        #f2f4f4;
  --weiss:         #ffffff;
  --tinte-lift:    #22252d;   /* Belegblatt, einen Ton über dem Grund */
  --tinte-tief:    #15171c;   /* Bildfeld im Belegblatt */
  --bordeaux-tief: #3d1729;   /* Knopf beim Überfahren */
  --leistung-workshop: #1c2027;
  --leistung-schulung: #18262e;
  --leistung-wissen:   #181d2b;
  --leistung-umsetzung:#291922;

  /* ---------- Deckkraftstufen der Grundfarben ----------
     Zahl im Namen = Deckkraft in Prozent. */
  --tinte-10:     rgba(26,28,34,.10);
  --tinte-58:     rgba(26,28,34,.58);
  /* Zwei dichtere Stufen für das Kopfband: Auf einem Bild, auf dem Text
     steht, reicht .58 nicht, sonst kämpft die Überschrift gegen ein
     Fenstergitter im Hintergrund. */
  --tinte-72:     rgba(26,28,34,.72);
  --tinte-86:     rgba(26,28,34,.86);
  --papier-34:    rgba(242,244,244,.34);
  --papier-90:    rgba(242,244,244,.9);
  --anthrazit-16: rgba(59,61,72,.16);
  --anthrazit-22: rgba(59,61,72,.22);
  --anthrazit-32: rgba(59,61,72,.32);
  --stahl-22:     rgba(74,94,109,.22);
  --stahl-30:     rgba(74,94,109,.30);
  --hellblau-06:  rgba(206,215,238,.055);
  --hellblau-16:  rgba(206,215,238,.16);
  --hellblau-22:  rgba(206,215,238,.22);
  --hellblau-30:  rgba(206,215,238,.30);
  --hellblau-34:  rgba(206,215,238,.34);
  --hellblau-72:  rgba(206,215,238,.72);
  --leistung-workshop-licht: rgba(74,94,109,.30);
  --leistung-schulung-licht: rgba(74,94,109,.38);
  --leistung-wissen-licht:   rgba(206,215,238,.13);
  --leistung-umsetzung-licht:rgba(82,32,56,.46);

  /* ---------- Schrift auf hellem Grund ---------- */
  --text-1: var(--tinte);
  --text-2: var(--anthrazit);
  --text-3: var(--stahl);

  /* ---------- Schrift auf dunklem Grund ---------- */
  --text-hell-1: #eef1f2;
  --text-hell-2: #c3cad2;
  --text-hell-3: #8fa1b0;
  --text-hell-4: #93a1ae;   /* Maßzahl im Belegfeld */
  --text-hell-5: #8b98a5;   /* Produktionsanweisung im Belegfeld */

  /* ---------- Linien ---------- */
  --linie:       var(--anthrazit-16);
  --linie-stark: var(--anthrazit-32);
  --linie-hell:  var(--hellblau-16);

  /* ---------- Schriften ---------- */
  --display: "Titillium Web", "Arial Narrow", system-ui, sans-serif;
  --body:    "Bai Jamjuree", system-ui, -apple-system, sans-serif;
  --mono:    "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Schriftgrade: Anzeige ---------- */
  --grad-d1:   clamp(2.4rem, 6.6vw, 5.9rem);
  --grad-d2:   clamp(1.75rem, 3.7vw, 3.15rem);
  --grad-d3:   clamp(1.2rem, 1.85vw, 1.7rem);
  --grad-lead: clamp(1.02rem, 1.28vw, 1.32rem);

  /* ---------- Schriftgrade: Fließtext ---------- */
  --grad-grund:  17px;      /* Grundgrad, unter 720px kleiner */
  --grad-text-1: .94rem;
  --grad-text-2: .95rem;
  --grad-text-3: .99rem;
  --grad-text-4: 1rem;

  /* ---------- Schriftgrade: Auszeichnung (Mono) ---------- */
  --grad-mono-1: .6rem;
  --grad-mono-2: .66rem;
  --grad-mono-3: .68rem;
  --grad-mono-4: .7rem;
  --grad-mono-5: .72rem;
  --grad-mono-6: .74rem;
  --grad-mono-7: .76rem;

  /* ---------- Maße ---------- */
  --bahn:          1360px;                   /* Breite der Inhaltsbahn */
  --rand:          clamp(20px, 4.4vw, 72px); /* Innenabstand der Bahn */
  --schiene:       196px;                    /* linke Spalte, wird schmaler */
  --steg:          clamp(28px, 4vw, 64px);   /* Abstand zwischen Spalten */
  --abschnitt-y:   clamp(72px, 9vw, 150px);  /* Luft über und unter Abschnitten */
  --reihe-y:       clamp(24px, 2.6vw, 36px); /* Zeilenhöhe in Listenreihen */
  --nach-kopf:     clamp(30px, 3.4vw, 48px); /* Abschnittskopf zur Liste */
  --radius:        3px;
  --strich:        1px;   /* Haarlinie — das Grundmaß der ganzen Seite */
  --strich-stark:  2px;
  --punkt:         7px;   /* Quadrat vor Labeln, Teilstrich am Lineal */
  --kopf-hoehe:    72px;
  --kopf-klebt:    104px; /* Oberkante der klebenden Schiene */
  --sprung-abstand: 96px; /* Ankersprung endet unter der Kopfzeile */

  /* ---------- Raumstufen ----------
     Die Abstände, die in mehr als einem Baustein vorkommen.
     Die Zahl im Namen ist der Wert — die Seite hat keine gerundete
     Skala, sondern eine gewachsene; Umrechnen hätte sie verschoben. */
  --raum-2:  2px;
  --raum-4:  4px;
  --raum-6:  6px;
  --raum-8:  8px;
  --raum-9:  9px;
  --raum-10: 10px;
  --raum-11: 11px;
  --raum-12: 12px;
  --raum-14: 14px;
  --raum-16: 16px;
  --raum-18: 18px;
  --raum-20: 20px;
  --raum-22: 22px;
  --raum-24: 24px;
  --raum-26: 26px;
  --raum-30: 30px;

  /* ---------- Bewegung ----------
     Jede Dauer, jede Kurve und jeder Weg der ganzen Seite steht hier
     und nur hier. In css/bewegung.css und in den Bausteinen kommt
     keine Zeitangabe mehr vor.

     Es gibt genau zwei Familien, und sie werden nicht gemischt:

     ZUSTAND   Was unter dem Zeigefinger passiert. Kurz, damit es sich
               wie eine Reaktion anfühlt und nicht wie eine Vorführung.
     AUFTRITT  Was beim Eintreten ins Bild passiert. Ruhig, reines
               easeOut — die Kurve endet flach und schwingt nicht über.

     Die Wege sind Wege, keine Abstände: sie verändern nur, wo etwas
     herkommt, nie, wo es zu liegen kommt. */

  /* Zustand — Anheben, Haarlinie, Pfeilversatz */
  --zeit-zustand:      .18s;   /* Farbe, Pfeil, Anheben */
  --zeit-zustand-weit: .25s;   /* Haarlinie über die volle Breite einer Zeile */
  --kurve-zustand:     cubic-bezier(.2,.7,.3,1);
  --pfeil-weg:         4px;    /* Weg des Pfeils beim Überfahren */
  --weg-anheben:       2px;    /* Weg einer Karte beim Überfahren */

  /* Auftritt — Scroll-Reveals und Hero-Einlauf */
  --zeit-auftritt:      .56s;
  --zeit-auftritt-tief: .68s;  /* der Case-Block tritt schwerer ein */
  --zeit-ambiente:      12s;   /* ruhiges Licht in interaktiven Bühnen */
  --kurve-auftritt:     cubic-bezier(.16,.84,.34,1);
  --weg-auftritt:       18px;
  --weg-auftritt-tief:  24px;
  --weg-hero:           16px;
  --staffel:            .07s;  /* Grundschritt jeder Staffelung */

  /* Passer — der Einzug in den Case-Block */
  --weg-passer:  24px;  /* Restweg des Scharnierbilds in seinen Stand */
  --weg-marke:   8px;   /* Weg einer Passermarke in ihre Ecke */
  --zeit-marke:  .5s;
}

/* Die Schiene wird schmaler und fällt schließlich weg. */
@media (max-width:1180px){
  :root{ --schiene:150px; }
}

@media (max-width:1023px){
  :root{
    --schiene:0px;
    --abschnitt-y:clamp(60px, 8vw, 96px);
  }
}

@media (max-width:719px){
  :root{ --grad-grund:16.5px; }
}