/* ============================================================
   BRAND.CSS  —  Die einzige Datei, die pro Kunde angepasst wird.
   ------------------------------------------------------------
   Hier stehen ALLE kundenspezifischen Design-Werte.
   style.css wird NICHT angefasst.
   ============================================================ */

:root {

  /* --- FARBEN ------------------------------------------------
     Aktuell: Schwarz/Gold (Logo des Betriebs).
     Für einen neuen Kunden nur diese Werte tauschen.         */

  --c-ink:        #101112;   /* Tiefschwarz — Hero, Footer, Text */
  --c-ink-soft:   #1b1d1f;   /* minimal aufgehellt, für Flächen auf Schwarz */
  --c-gold:       #b7913f;   /* Altgold — Akzent, Linien, Buttons */
  --c-gold-hi:    #dfc073;   /* Lichtgold — Hover, Verläufe */
  --c-gold-dim:   #8a6d2c;   /* Dunkelgold — Gold auf hellem Grund (Kontrast!) */
  --c-plaster:    #f7f4ee;   /* Kalkputz-Weiß — heller Seitengrund */
  --c-plaster-2:  #efeae0;   /* zweite helle Ebene */
  --c-stone:      #6e6960;   /* warmes Grau — Fließtext sekundär */
  --c-line:       #e2dcd1;   /* Haarlinien auf hellem Grund */
  --c-line-dark:  #2a2c2e;   /* Haarlinien auf dunklem Grund */
  --c-white:      #ffffff;

  /* Statusfarben (Formular) */
  --c-error:      #a8342b;
  --c-success:    #4b6b4e;


  /* --- SCHRIFT -----------------------------------------------
     Alle Schriften liegen lokal in assets/fonts/ — kein Google-CDN,
     wegen DSGVO (LG München I, Urteil vom 20.01.2022).

     ÜBERSCHRIFTEN: Zum Umschalten die gewünschte Zeile aktivieren
     (Schrägstriche entfernen) und die anderen auskommentieren.
     Vergleich ansehen: schrift-vergleich.html im Projektordner.   */

  /* Literata — kräftige, gleichmäßige Striche, sehr gut lesbar */
  --f-display: "Literata", Georgia, "Times New Roman", serif;
  --display-weight: 600;
  --display-tracking: -0.015em;

  /* Fraunces — mehr Charakter, etwas wärmer
  --f-display: "Fraunces", Georgia, serif;
  --display-weight: 600;
  --display-tracking: -0.02em; */

  /* Archivo — dieselbe Schrift wie der Fließtext, sehr klar und modern
  --f-display: "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.03em; */

  /* Bodoni Moda — elegant, aber dünne Striche verschwinden am Bildschirm
  --f-display: "Bodoni Moda", Didot, Georgia, serif;
  --display-weight: 500;
  --display-tracking: -0.015em; */

  /* FLIESSTEXT */
  --f-text:    "Archivo", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Typo-Skala */
  --t-hero:    clamp(2.75rem, 7vw, 5.5rem);
  --t-h2:      clamp(2rem, 4.2vw, 3.1rem);
  --t-h3:      clamp(1.15rem, 1.8vw, 1.4rem);
  --t-lead:    clamp(1.05rem, 1.5vw, 1.25rem);
  --t-body:    1.0rem;
  --t-small:   0.875rem;
  --t-label:   0.75rem;


  /* --- LAYOUT ------------------------------------------------ */

  /* Max. Seitenbreite. Nie schmaler als 1200 px, nie breiter als
     1560 px, dazwischen 78 % des Fensters. Dadurch wächst die Seite
     auf großen Monitoren mit, statt als schmale Spalte in der Mitte
     zu stehen — und beim Verkleinern springt nichts.
     Die Lesebreite (--w-text) wächst bewusst NICHT mit: zu lange
     Zeilen liest niemand gern. Breiter wird die Spalte, nicht der
     Absatz. */
  --w-page:    clamp(1200px, 78vw, 1560px);
  --w-text:    62ch;     /* max. Lesebreite Fließtext */
  --pad-x:     clamp(1.25rem, 5vw, 4rem);
  --gap-sec:   clamp(4.5rem, 9vw, 8rem);   /* Abstand zwischen Sektionen */

  --radius:    2px;      /* bewusst fast eckig — wirkt hochwertiger als runde Ecken */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}


/* --- GROSSE BILDSCHIRME -------------------------------------
   Die Breite regelt --w-page oben von selbst. Hier wächst nur noch
   die Schrift mit: 16 px Fließtext wirken auf einem 27-Zoll-Monitor
   verloren. Zwei Stufen genügen, mehr merkt niemand.

   Beim Anlegen eines neuen Kunden: diese Blöcke mitnehmen.  */

@media (min-width: 1500px) {
  :root {
    --t-body:  1.0625rem;
    --t-hero:  clamp(2.75rem, 7vw, 6.25rem);
    --t-h2:    clamp(2rem, 4.2vw, 3.4rem);
    --t-lead:  clamp(1.05rem, 1.5vw, 1.35rem);
  }
}

@media (min-width: 1900px) {
  :root {
    --t-body:  1.125rem;
  }
}