/* ==========================================================================
   House Works · Design Tokens
   Farbwerte laut Designkonzept (Seite 5 „Farbwelt")
   Regel: viel Blau, wenig Gold. Gold auf Creme nie als Schriftfarbe.
   ========================================================================== */

:root {
  /* --- Farbe ------------------------------------------------------------ */
  --navy: #002840;          /* Primärfarbe  · Nachtblau */
  --navy-deep: #001b2c;     /* abgedunkelt für Tiefe/Overlays */
  --steel: #0e3b5a;         /* Sekundär     · Stahlblau */
  --gold: #c0903c;          /* Akzent       · Handwerker-Gold */
  --gold-lift: #ddab5b;     /* Gold-Aufhellung, nur auf Navy */
  --creme: #f5f1e6;         /* Papier / Fläche */
  --creme-shade: #e7e1d0;   /* Creme, eine Stufe dunkler */

  /* Textfarben, jeweils an den geprüften Kontrastwerten ausgerichtet.
     --on-navy-faint liegt bei rund 3,1 : 1 und trägt deshalb ausschließlich
     Dekoration, niemals Text. Für zurückhaltende Schrift ist --on-navy-soft
     die kleinste erlaubte Stufe. */
  --on-navy: var(--creme);                    /* 13,5 : 1 */
  --on-navy-muted: rgba(245, 241, 230, 0.66); /*  6,6 : 1 */
  --on-navy-soft: rgba(245, 241, 230, 0.58);  /*  5,4 : 1 */
  --on-navy-faint: rgba(245, 241, 230, 0.38); /*  nur Dekoration */
  --on-creme: #001b2c;
  --on-creme-muted: rgba(0, 27, 44, 0.68);

  /* Linien */
  --rule-on-navy: rgba(245, 241, 230, 0.16);
  --rule-on-creme: rgba(0, 40, 64, 0.16);
  --rule-gold: rgba(192, 144, 60, 0.55);

  /* --- Typografie -------------------------------------------------------
     Das Designkonzept ist an dieser Stelle eindeutig: DIN Condensed Bold ist
     Wortmarke und Textildruck, Avenir Next trägt Überschriften UND Fließtext.
     Deshalb läuft die ganze Seite in einer Familie. Die Wortmarke ist ein
     Bild und braucht keine Schriftdatei.

     Lokal installiertes Avenir Next gewinnt, sonst Figtree als Web-Ersatz. */
  --font-text: "Avenir Next", "Figtree", "Segoe UI", system-ui, sans-serif;

  /* Größen für eine Zielgruppe zwischen 40 und 70: Fließtext beginnt bei
     17 px und wächst auf 20 px, sekundärer Text fällt nie unter 16 px. */
  --text-xs: 0.875rem;    /* 14 px, nur Beschriftungen */
  --text-sm: 1rem;        /* 16 px */
  --text-base: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-lead: clamp(1.1875rem, 1.08rem + 0.62vw, 1.625rem);
  --text-h3: clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem);
  --text-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.875rem);
  --text-h1: clamp(2.125rem, 1.55rem + 2.7vw, 3.5rem);
  --text-figure: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

  /* Gesperrte Versalien sind bei kleinen Größen anstrengend zu lesen.
     Deshalb nur noch dezent gesperrt und nur für kurze Beschriftungen. */
  --tracking-label: 0.08em;
  --leading-display: 1.08;
  --leading-text: 1.62;

  /* --- Maß & Raster ----------------------------------------------------- */
  --shell: 1180px;            /* maximale Inhaltsbreite */
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --space-section: clamp(4rem, 2.5rem + 5vw, 7.5rem);
  --space-block: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem);

  /* --- Bewegung --------------------------------------------------------- */
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Korn --------------------------------------------------------------
     Feines Rauschen als Datei-URI: keine zusätzliche Anfrage, kein Bildasset. */
  --grain-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* --- Diagonale ---------------------------------------------------------
     Der Flyer trennt Flächen mit einer Schräge. Dieselbe Kante trägt hier
     die Bild-Reveals und die Flächenwechsel. */
  --cut: 4.5deg;
}