/* ==========================================================================
   Design-Tokens - andre-koegler.de
   Werte final abgestimmt im Design-Handoff. Bebas Neue und Rot (#ff0000)
   sind der Markenkern; Grau-, Text- und Radiuswerte sind an das Cal.com-
   Dark-Theme angeglichen, weil die Terminseite dessen Embed einbindet.
   Das ist die bewusste Abweichung vom "Radius 0" des Original-Briefings.
   ========================================================================== */

:root {
  /* Farben */
  --bg:              #0f0f0f;  /* Seitenhintergrund, ungerade Zeilen */
  /* Eine Stufe heller als im Handoff (#171717): der Wechsel der Zeilenflächen
     war gegen #0f0f0f kaum wahrnehmbar. #1f1f1f liegt weiterhin innerhalb der
     Skala, zwischen bg und bg-subtle. */
  --bg-muted:        #1f1f1f;  /* Modul-/Zeilenhintergrund, alternierend */
  --bg-subtle:       #262626;  /* Karten, Ränder */
  --bg-tief:         #000000;  /* Buchmodul der Startseite, Fußende */
  /* Die Fläche, die der cal.com-Kalender im dunklen Modus selbst mitbringt.
     Kein Wert aus unserer Skala, sondern ein fremder - er steht hier, damit
     er auffindbar bleibt, falls cal.com sein Design ändert. */
  --kalender-bg:     #111111;  /* Fläche neben dem eingebetteten Kalender */
  --text-emphasis:   #fafafa;  /* Überschriften, Endzustand der Titel-Animation */
  --text:            #d4d4d4;  /* Fließtext */
  --text-subtle:     #a3a3a3;  /* Meta, Datum, Footer */
  --text-grau:       #4d4d4d;  /* Startzustand der Titel-Animation */
  --border:          #262626;
  --border-strong:   #4d4d4d;
  --akzent:          #ff0000;  /* Links, Achse, Buttons, Fokus */
  --akzent-text:     #ff4d4d;  /* kleiner Fließtext-Link: 6,42:1 statt 5,25:1 */
  --link-hover:      #ffffff;

  /* Form - durchgehend, keine Schatten */
  --radius: 10px;

  /* Schrift */
  --font-display: 'Bebas Neue', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-text:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tracking:     0.02em;
  --tracking-meta: 0.08em;

  /* Typoskala - feste Stufen statt schwankender 13/14/16px */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);   /* Meta, Typ-Label */
  --step-0:  1.2rem;                                     /* Fließtext, Teaser */
  --step-1:  clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);     /* Datum, Navigation */
  --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);      /* Werkeintrag-Titel */
  --step-3:  clamp(2.2rem, 1.6rem + 2.8vw, 3.4rem);      /* Seitentitel */
  --step-4:  clamp(3rem, 2rem + 5vw, 5rem);              /* Hero-Headline */
  --step-link: 1.3rem;                                   /* Bebas-Textlink mit › */

  /* Layout */
  --container:       1176px;
  --text-breite:     720px;   /* Lesebreite "Das bin ich" und Artikelkörper */
  --seiten-padding:  clamp(1.25rem, 4vw, 2.5rem);

  /* Kopfbereich. Die Höhe ergibt sich aus den drei Werten darunter und wird
     an mehreren Stellen gebraucht - unter anderem für die klebenden
     Jahreszahlen der Werkachse und für die Lage des Schließen-Knopfes. */
  --header-padding-y: 20px;
  --header-padding-x: 40px;
  --logo-h:           76px;
  --header-h:         calc(2 * var(--header-padding-y) + var(--logo-h));

  /* Maße des Menü-Knopfes. Der Schließen-Knopf im Menü übernimmt sie, damit
     er exakt an derselben Stelle sitzt. */
  --burger-b:         26px;   /* Breite der Striche */
  --burger-p:          8px;   /* Innenabstand */
  --burger-kasten:    calc(var(--burger-b) + 2 * var(--burger-p));

  /* Werkachse */
  --meta-spalte:      220px;
  --spalten-abstand:  64px;
  --eintrag-padding:  44px;
  --punkt:            12px;

  /* ---------------------------------------------------------- Referenzkante

     Die linke Kante der Hero-Headline auf der Startseite ist die verbindliche
     Bezugslinie der gesamten Seite. Sie ergibt sich aus dem 720px breiten
     Textblock, zentriert im 1176px-Container: (1176 - 720) / 2 = 228px vom
     linken Containerrand. Überschriften und Inhalte aller Seiten richten sich
     daran aus, solange nicht ausdrücklich etwas anderes festgelegt ist. */
  --referenz-kante: 228px;

  /* Damit die Titel der Werkeinträge auf der Referenzkante beginnen, muss die
     Achse um Datumsspalte plus Spaltenabstand minus Kante nach links rücken:
     220 + 64 - 228 = 56px. Platz dafür ist erst, wenn neben dem Container
     genug Rand bleibt - Containerbreite plus Seitenrand plus Versatz auf
     beiden Seiten, also ab 1176 + 2*(40 + 56) = 1368px. Darunter bleibt der
     Versatz 0.

     Bewusst als Umbruchregel und nicht als Rechnung mit vw: vw zählt die
     Scrollleiste mit, das ergab einen waagerechten Überlauf von einigen
     Pixeln. Überschrift und Titel bleiben in beiden Fällen bündig, weil
     beide an --inhalt-kante hängen. */
  --eintrag-versatz: 0px;

  /* Linke Kante des Inhalts, relativ zum Container. Überschriften, Filter und
     Eintragstitel hängen alle hieran - sie können gar nicht auseinanderlaufen. */
  --inhalt-kante: calc(var(--meta-spalte) + var(--spalten-abstand) - var(--eintrag-versatz));

  /* Achse mittig im Spaltenabstand, links der Inhaltskante. */
  --achse-x: calc(var(--inhalt-kante) - var(--spalten-abstand) / 2);

  /* Wie weit die farbige Zeilenfläche über den Container hinausreicht - genug,
     damit die nach links gerückte Datumsspalte darin liegt. */
  --eintrag-bleed: calc(var(--eintrag-versatz) + var(--seiten-padding));

  /* Motion */
  --ease:            cubic-bezier(.16, 1, .3, 1);
  --dauer-eintrag:   320ms;
  --dauer-zeichen:   200ms;   /* Typewriter pro Zeichen */
  --versatz-zeichen: 35ms;    /* Versatz pro Zeichen */
  --versatz-eintrag: 900ms;   /* Versatz pro Eintrag, in 4er-Gruppen */
  --dauer-menue:     320ms;   /* Ein- und Ausfahrt der Menütafel */
  --kurve-menue:     cubic-bezier(.4, 0, .2, 1);
  --dauer-satz:      900ms;
  --versatz-satz:    1100ms;  /* streng sequenziell */
}

/* Auf kleinen Schirmen rückt der Kopfbereich zusammen. Die Werte stehen als
   Token und nicht als Regel am .header, damit --header-h mitgeht: Aus ihr
   ergeben sich die Lage des Schließen-Knopfes und der Haftpunkt der
   klebenden Jahreszahlen. Als feste Regel am .header lag der Knopf hier 6px
   zu tief, weil --header-h weiterhin mit 20px rechnete. */
@media (max-width: 860px) {
  :root {
    --header-padding-y: 14px;
    --header-padding-x: 20px;
  }
}

/* Ab hier ist Platz, die Achse so weit nach links zu rücken, dass die
   Eintragstitel exakt auf der Referenzkante der Startseite beginnen. */
@media (min-width: 1368px) {
  :root {
    --eintrag-versatz: calc(var(--meta-spalte) + var(--spalten-abstand) - var(--referenz-kante));
  }
}