:root{
  --surface:     #211e16;   /*Background*/
  --surface-2:   #2b2820;   /* leicht abgesetzte Fläche (Karten, Hover) */
  --surface-3:   #302c22;   /* für Medien-Platzhalter */
  --ink:         #f2ede2;   /* warmes Cremeweiss für Text */
  --ink-2:       #292826;   /* leicht abgesetzter Text (Hover, Meta) */
  --dim:         #a89d8a;   /* warmes Grau für Sekundärtext */
  --line:        rgba(242, 237, 226, 0.14);   /* Hairline des Rasters */

  --blue:        #1d19e6;   /* Sandros Markenblau bleibt der Hauptakzent */
  --peach:       #f9a97c;   /* warmer Zweitakzent */
  /* bleibt HELL (siehe --peach-soft weiter unten im DARKMODE-Kommentar,
     Text #8a4f28 in site.css braucht das) */
  --peach-soft:  #ffe7d6;

  /* Raster-DNA (glitch&grit): 12 Spalten, ein Gutter, ein Seitenrand */
  --cols: 12;
  /* Seitenrand der ganzen Website. */
  --pad: clamp(24px, 7vw, 140px);
  --gap: clamp(12px, 1.6vw, 24px);

  /* Runde, organische Formen (juanmora arbeitet bis 10vw Radius) */
  --r-sm:   10px;
  --r-md:   clamp(14px, 1.6vw, 22px);
  --r-lg:   clamp(20px, 2.8vw, 40px);
  --r-xl:   clamp(28px, 5vw, 72px);
  --r-pill: 999px;

  /* Weiche Schatten statt harter Rahmen */
  --shadow-soft: 0 20px 50px -32px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 30px 70px -34px rgba(0, 0, 0, 0.68);

  --nav-h: 68px;            /* Höhe der festen Kopfzeile — Sticky-Offsets */

  /* Kopfleiste — folgt der Farbzone (siehe [data-theme] unten) */
  --nav-fade:  rgba(33, 30, 22, 0.94);
  --nav-solid: rgba(33, 30, 22, 0.86);

  /* ══════════════════ SCHRIFT ══════════════════
 /* Grössen */
  --t-label: clamp(0.7rem, 0.9vw, 0.72rem);
  --t-body:  clamp(0.95rem, 1.05vw, 1.06rem);
  --t-lead:  clamp(1.15rem, 1.9vw, 1.7rem);
  --t-sec:   clamp(2.1rem, 7vw, 6rem);
  --t-huge:  clamp(2.6rem, min(11vw, 15vh), 12rem);

  /* 1 · TITEL — die grossen Zeilen */
  --title-font:   "grtsk-vf", "Helvetica Neue", Arial, sans-serif;
  --title-axis:   'wdth' 100, 'slnt' 0;
  --title-weight: 700;                    /* Ende der Achse */

  /* 2 · TEXT — alles zum Lesen */
  --text-font:          var(--title-font);
  --text-axis:          'wdth' 100, 'slnt' 0;
  --text-weight:        300;
  --text-size:          var(--t-body);
  --text-accent-axis:   'wdth' 100, 'slnt' 1;   /* Betonung statt Kursiv */
  --text-accent-weight: 525;

  /* 3 · 2ND TEXT — Beschriftung, Meta, Register */
  --text2-font:   var(--title-font);
  --text2-axis:   'wdth' 100, 'slnt' 0;
  --text2-weight: 535;
  --text2-size:   var(--t-label);

  /* 4 · BUTTONS — rahmenlos, grösser als Etiketten */
  --btn-font:        var(--text2-font);
  --btn-axis:        var(--text2-axis);
  --btn-axis-active: 'wght' 600, 'wdth' 100;   /* Hover · aktiv — Breite wie in Ruhe,
                                                sonst wächst der Knopf beim Hover */
  --btn-size:        clamp(0.78rem, 0.95vw, 0.92rem);
  --btn-tracking:    0.08em;

  /* Altnamen → Rollen (im Projekt an ~20 Stellen) */
  --font-family:  var(--text-font);       --display-font: var(--title-font);
  --serif-font:   var(--text-font);       --mono-font:    var(--text2-font);
  --axis-text:    var(--text-axis);       --axis-accent:  var(--text-accent-axis);
  --axis-ui:      var(--text2-axis);      --axis-ui-strong: var(--btn-axis-active);
  --font-ui:      var(--btn-font);        --axis-ui-bold:   var(--btn-axis-active);
}

/* ============================================================================
   GRUNDLAGEN
   ============================================================================ */

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

/* clip, NICHT hidden: hidden macht html/body zu Scroll-Containern und setzt
   jedes `position: sticky` ausser Kraft (Hero, Work-Register). */
html,
body{ overflow-x: clip; }

body{ margin: 0; }

/* nur für Screenreader */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tastatur-Fokus sichtbar (nur :focus-visible, nicht bei Mausklick) */
:focus-visible{
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* «Bewegung reduzieren» — JS prüft zusätzlich selbst */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Lenis — greift nur, wenn scripts/smooth.js es startet */
html.lenis,
html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }

/* Scroll-Reveal — smooth.js setzt .reveal-ready / .is-visible */
.reveal-ready[data-reveal="fade"]{
  opacity: 0;
  transform: translateY(26px);
}
.reveal-ready[data-reveal="fade"].is-visible{
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Wort-für-Wort-Maske */
.reveal-word{
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.reveal-word > span{
  display: inline-block;
  transform: translateY(105%);
}
.reveal-ready[data-reveal="words"].is-visible .reveal-word > span{
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sprung zum Inhalt — erster Tabstopp.
   `.site > .skip-link`, NICHT `.skip-link`: site.css setzt
   `.site > *{ position: relative }` und gewänne sonst. */
.site > .skip-link{
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 10001;
  padding: 12px 22px;
  border-radius: 0 0 var(--r-sm, 10px) var(--r-sm, 10px);
  background: var(--ink, #1a1613);
  color: var(--surface, #faf6ef);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  transform: translate(-50%, -140%);
  transition: transform 0.25s ease;
}
.site > .skip-link:focus-visible,
.site > .skip-link:focus{ transform: translate(-50%, 0); }


/* ============================================================================
   PRIMARY TEXT — grtsk-vf   (Rolle 1 TITEL + Rolle 2 TEXT)
   ============================================================================ */

/* Die Grundeinstellung der Seite — alles erbt von hier. */
body{
  font-family: var(--text-font);
  font-variation-settings: var(--text-axis);
  font-weight: var(--text-weight);
  font-size: var(--text-size);
}

/* TITEL: die Familie setzen die Seiten selbst (`var(--display-font)`), das
   Gewicht kommt von hier — sonst stünde der Riesentitel im Textschnitt. */
.hero-name,
.section-title,
.work-head-title,
.about-title,
.practice-title,
.case-bar-title,
.footer-email{
  font-weight: var(--title-weight);
}


.serif-accent{
  font-family: var(--text-font);
  font-variation-settings: var(--text-accent-axis);
  font-weight: var(--text-accent-weight);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================================================
   SECONDARY TEXT — bd-terminal-vf   (Rolle 3 2ND TEXT + Rolle 4 BUTTONS)
   ============================================================================ */


.mono-meta,
.label,
.status,
.tag,
/* Navigation und Handlungsaufrufe */
.site-nav-link,
.site-cta-btn,
/* WORK: Filter + Seitenregister (Titelliste links) */
.work-filter-btn,
.work-index-link,
.work-index-title,
.work-index-cat,
/* der Projektname steht LINKS in der Liste und (beim Überfahren) AUF der
   Kachel — beide müssen gleich aussehen, sonst liest sich derselbe Titel
   zweimal anders */
.gal-label,
/* Projektansicht: Kopfzeile, Ton, Zoom, Plattform-Links */
.case-btn,
.case-sound,
.case-link,
.case-zoom-btn,
.case-zoom-level,
.case-zoom-count,
/* Footer + Disziplin-Zeilen */
.footer-top,
.footer-social-link,
.footer-eyebrow,
.footer-copy,
.practice-count,
.practice-keys,
.stack-tool-name,
/* Die kleinen Beschriftungen: Etiketten über einem Wert, Bildunterschriften,
   Sektionsnotizen, Hinweise. Alles, was BESCHREIBT statt zu erzählen. */
.section-note,
.hero-facts dt,
.hero-scroll,
.about-module-key,
.about-module-out,
.case-credit dt,
.case-story dt,
.case-shot figcaption,
.case-zoom-caption,
.case-embed-hint,
.case-expand,
.gal-count,
.gal-placeholder,
.skip-link,
.site-nav-name{
  font-family: var(--text2-font);
  font-variation-settings: var(--text2-axis);
  /* greift nur, wenn --text2-axis kein 'wght' nennt (tut sie gerade nicht) */
  font-weight: var(--text2-weight);
}

.site-nav-link:hover,
.site-nav-link[aria-current="page"],
.site-cta-btn:hover,
.work-filter-btn:hover,
.work-filter-btn[aria-pressed="true"],
.work-index-item.is-active .work-index-title,
.case-btn:hover,
.case-sound:hover,
.case-link:hover,
.case-zoom-btn:hover,
.footer-top:hover{
  /* aktiver Zustand: eine Spur fetter als die ruhige Basis */
  font-variation-settings: var(--axis-ui-strong);
}