/* =============================================================================
   BOND Bespoke Lighting — Global CSS
   Design System Phase 5
   Design-Breite: 1440px | 1rem = 16px (Browser-Default)
   Konzept: WERKVERZEICHNIS — Website als wissenschaftliches Artefakt
   =============================================================================

   ARCHITEKTUR:
   1.  @font-face
   2.  Fluid Root
   3.  Design Tokens (:root)
   4.  Base Reset
   5.  Typografie-Klassen
   6.  Layout-Utilities
   7.  WV-Spezifische Klassen
   8.  Animation-Base
   9.  Accessibility (Focus, Selection, Forced-Colors)
   10. Print-CSS
   11. Responsive Overrides (Desktop-First)

   REGEL: Keine hardcodierten Werte in module.css.
          Keine Typografie-Deklarationen in module.css.
          Alle Werte kommen aus diesen Tokens.
   ============================================================================= */


/* =============================================================================
   1. @FONT-FACE
   ============================================================================= */

@font-face {
  font-family: 'NimbusRoman';
  src: url('/assets/fonts/NimbusRoman.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NimbusSans';
  src: url('/assets/fonts/NimbusSansRegularExtended.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* =============================================================================
   2. ROOT
   Browser-Default: 1rem = 16px. Kein Override.
   Body-Text: 1.5rem = 24px.
   Spacing via CLAUDE.md Skala: 0.5 / 1 / 2 / 4 / 8rem.
   Fluid Groessen direkt per clamp() auf den jeweiligen Tokens.
   ============================================================================= */


/* =============================================================================
   3. DESIGN TOKENS (:root)
   ============================================================================= */

:root {

  /* ------------------------------------------------------------------
     NAMED COLORS (4 Namen, keine weiteren)
     Ivory:  Warmes Weiss — Hintergrund
     Forge:  Warmes Near-Black — Primaertext, starke Gesten
     Patina: BOND-Taupe — Metadaten, Muted-States
     Ghost:  Transparente Trennlinie — Tabellen, Borders
     ------------------------------------------------------------------ */

  /* ==================================================================
     RICH-GREY RAMP — warmes Taupe (#988E8A · Hue 17°) Unterton.
     Weiss -> warmes Off-Black. EINZIGE Quelle aller Farbwerte.
     Stufe 500 = BOND Corporate-Grau exakt.
     ================================================================== */
  --grey-0:    #FFFFFF;   /* Corporate Weiss */
  --grey-50:   #F7F6F6;
  --grey-100:  #EEEDEC;
  --grey-200:  #DFDCDA;
  --grey-300:  #CCC6C2;
  --grey-400:  #B2AAA4;
  --grey-500:  #988E8A;   /* BOND Corporate */
  --grey-600:  #7E746D;
  --grey-700:  #635B55;
  --grey-800:  #46403C;
  --grey-900:  #2B2826;
  --grey-950:  #1C1B19;   /* warmes Off-Black */

  /* ------------------------------------------------------------------
     BRAND — #988E8A. NUR Display (>=24px), Borders, Pills, Akzente.
     NIE Fliesstext (nur 3.1:1 auf Weiss).
     ------------------------------------------------------------------ */
  --color-brand:     var(--grey-500);
  --color-brand-fg:  var(--grey-0);   /* Text auf Brand-Flaeche */

  /* ------------------------------------------------------------------
     LEGACY-ALIASE — alte Namen zeigen auf die Rampe.
     ivory/forge bilden ein INVERSE-Paar (flippen gemeinsam je Modus):
     "forge-Flaeche + ivory-Text" -> dunkler Chip hell beschriftet,
     invertiert im Dark Mode automatisch korrekt.
     Fuer IMMER-helle Schrift auf Bildern: --color-on-media (flippt nicht).
     ------------------------------------------------------------------ */
  --color-ivory:     var(--color-fg-inverse);
  --color-forge:     var(--color-bg-inverse);
  --color-patina:    var(--color-brand);
  --color-surface:   var(--color-bg-elevated);
  --color-on-media:  var(--grey-50);   /* Text auf Foto-Overlays — immer hell */
  --color-ghost:        var(--color-border);
  --color-ghost-strong: var(--color-border-strong);

  /* ------------------------------------------------------------------
     SEMANTIC TOKENS — Rollen, nicht Werte (LIGHT)
     ------------------------------------------------------------------ */

  /* Surfaces */
  --color-bg:            var(--grey-50);    /* Page — warmer Tisch */
  --color-bg-paper:      var(--grey-0);     /* Blatt Papier — reines Weiss */
  --color-bg-elevated:   var(--grey-100);
  --color-bg-inverse:    var(--grey-900);   /* Inverse-Flaeche (Chips, Selection) */

  /* Foreground */
  --color-logo:          var(--grey-900);
  --color-fg:            var(--grey-900);   /* 14.6:1 */
  --color-fg-muted:      var(--grey-700);   /*  6.1:1 */
  --color-fg-subtle:     var(--grey-600);   /*  4.6:1 */
  --color-fg-inverse:    var(--grey-50);

  /* Accent */
  --color-accent:        var(--color-brand);
  --color-accent-fg:     var(--color-brand-fg);

  /* Borders */
  --color-border:        var(--grey-200);
  --color-border-strong: var(--grey-300);
  --border-hairline:     1px;  /* Haarlinie — einzige erlaubte px-Border-Breite */

  /* Hover — Text wird PROMINENTER (dunkler), nicht blasser */
  --color-hover:         var(--grey-950);

  /* State Colors — nur Restaurations-Bereich */
  --state-error-bg:      #fdf2f2;
  --state-error-fg:      #8b1a1a;
  --state-error-border:  rgba(139, 26, 26, 0.2);

  --state-success-bg:    #f2fdf4;
  --state-success-fg:    #1a5c2a;
  --state-success-border: rgba(26, 92, 42, 0.2);

  --state-warning-bg:    #fdf8f2;
  --state-warning-fg:    #7a4a0a;
  --state-warning-border: rgba(122, 74, 10, 0.2);

  --state-info-bg:       #f2f6fd;
  --state-info-fg:       #1a3a7a;
  --state-info-border:   rgba(26, 58, 122, 0.2);

  /* ------------------------------------------------------------------
     TYPOGRAFIE
     ------------------------------------------------------------------ */

  --font-display:   'NimbusSans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-base:      'NimbusSans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-serif:     'NimbusRoman', 'Times New Roman', serif;
  --font-label:     var(--font-base); /* Alias — UI-Labels nutzen Base-Font */

  /* Type Scale — Display-Groessen via clamp() */
  --text-statement: clamp(60px, 8.3vw, 120px);   /* WV-Nummer Fullscreen */
  --text-display:   clamp(40px, 5.5vw,  80px);   /* WV-Nummer Index */
  --text-h1:        clamp(28px, 3.3vw,  48px);   /* Seitentitel */
  --text-h2:        clamp(20px, 2.2vw,  32px);   /* Sektionsueberschriften */
  --text-h3:        clamp(16px, 1.5vw,  22px);   /* Untertitel, Kategorien */
  --text-body:      1.5rem;                         /* = 24px — Fliesstext */
  --text-small:     0.875rem;                      /* = 14px — Metadaten, Captions */
  --text-label:     0.6875rem;                     /* = 11px — Nav, UI-Labels */

  /* Line-Heights — 3-Tier System */
  --lh-display:     1.0;    /* Statement, Display — tight fuer Impact */
  --lh-heading:     1.1;    /* H1, H2 — leicht enger */
  --lh-subheading:  1.2;    /* H3 */
  --lh-body:        1.3;    /* Paragraphen — offen fuer Lesbarkeit */
  --lh-label:       1.2;    /* Labels, Nav */

  /* Letter-Spacing */
  --ls-label:       0.08em; /* Nimbus Sans Extended Labels */
  --ls-nav:         0.1rem; /* Nimbus Sans Extended Nav */
  --ls-heading:     0.1rem; /* Nimbus Sans Headlines — uppercase tracking */
  --ls-normal:      0;      /* Body — kein Tracking */

  /* ------------------------------------------------------------------
     SPACING SCALE
     rem-Werte = px / 16. Spacing via CLAUDE.md Skala.
     Verwende AUSSCHLIESSLICH diese Werte in module.css.
     ------------------------------------------------------------------ */

  --space-xs:      0.5rem;   /* =  8px */
  --space-sm:      1rem;     /* = 16px */
  --space-md:      2rem;     /* = 32px */
  --space-lg:      4rem;     /* = 64px */
  --space-xl:      8rem;     /* = 128px */
  --section-gap:   clamp(7.5rem, 14vw, 12.5rem);  /* 120px–200px fluid */

  /* Interne Feinabstimmung */
  --space-2xs:     0.25rem;  /* =  4px */
  --space-3xs:     0.125rem; /* =  2px */

  /* ------------------------------------------------------------------
     GRID
     ------------------------------------------------------------------ */

  --grid-cols:     16;
  --grid-gap:      1px;      /* Haarlinie — technisches Millimeterpapier */
  --page-margin:   clamp(1.25rem, 3vw, 2rem);  /* 20px–32px fluid */

  /* Spalten-Breite-Helfer fuer Layouts */
  --col-1:   calc((100vw - 2 * var(--page-margin) - 15 * var(--grid-gap)) / 16);
  --col-2:   calc(var(--col-1) * 2  + 1  * var(--grid-gap));
  --col-3:   calc(var(--col-1) * 3  + 2  * var(--grid-gap));
  --col-4:   calc(var(--col-1) * 4  + 3  * var(--grid-gap));
  --col-6:   calc(var(--col-1) * 6  + 5  * var(--grid-gap));
  --col-8:   calc(var(--col-1) * 8  + 7  * var(--grid-gap));
  --col-10:  calc(var(--col-1) * 10 + 9  * var(--grid-gap));
  --col-12:  calc(var(--col-1) * 12 + 11 * var(--grid-gap));

  /* ------------------------------------------------------------------
     ANIMATION — Duration Scale
     ------------------------------------------------------------------ */

  --dur-flash:       60ms;    /* Toggle, aktive Filter */
  --dur-quick:      120ms;    /* Hover, Focus, Color-Change */
  --dur-base:       240ms;    /* UI Default — WV-Nummer Erscheinen */
  --dur-deliberate: 400ms;    /* WV-Bild-Reveal, Card-Expand */
  --dur-cinematic:  640ms;    /* Hero-Entrances */
  --dur-grand:     1000ms;    /* Diagonal Wipe Page-Transition */

  /* Easing-Vokabular */
  --ease-out-expo:  cubic-bezier(0.16, 1,    0.3,  1);    /* Primaer: WV-Reveals */
  --ease-hard-cut:  cubic-bezier(0.95, 0,    0.05, 1);    /* Diagonal Wipe */
  --ease-material:  cubic-bezier(0.4,  0,    0.2,  1);    /* UI State Changes */
  --ease-in-quad:   cubic-bezier(0.55, 0.085, 0.68, 0.53); /* Exits */

  /* ------------------------------------------------------------------
     Z-INDEX SKALA
     ------------------------------------------------------------------ */

  --z-base:         0;
  --z-content:      10;
  --z-sticky:       50;
  --z-navigation:   100;
  --z-overlay:      200;
  --z-modal:        300;
  --z-curtain:      9999;

  /* ------------------------------------------------------------------
     ASPECT RATIOS (committed)
     ------------------------------------------------------------------ */

  --ratio-landscape:    16/9;   /* Index-Grid Querformat — Leuchte im Raum, Installation */
  --ratio-portrait:     9/16;   /* Index-Grid Hochformat — Pendelleuchten, Stehleuchten */
  --ratio-detail:       1/1;    /* Materialnahaufnahme, Verbindung */

  /* ------------------------------------------------------------------
     WV-SPEZIFISCH
     ------------------------------------------------------------------ */

  --wv-index-batch:   24;       /* Eintraege pro Batch (Infinite Scroll) */
  --wv-stagger-max:   0.8s;     /* Math.random() * 0.8 fuer organischen Reveal */

  /* Filter-Bar (V2 — sticky unter Nav) */
  --filter-bar-height: 3rem;    /* = 48px — sticky, top: var(--nav-height) */
}


/* =============================================================================
   WIDE-GAMUT ENHANCEMENT (Progressive Enhancement)
   Nur fuer Displays mit P3-Farbraum (Retina, OLED)
   ============================================================================= */

/* (Wide-Gamut forge-Override entfernt — forge ist jetzt Rampen-Alias) */


/* =============================================================================
   4. BASE RESET
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* font-size bereits via Fluid Root gesetzt (oben) */
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
  scroll-behavior:         auto; /* Lenis uebernimmt Smooth-Scroll via JS */
  hanging-punctuation:     first last allowed-end;
  lang:                    de;
}

body {
  font-family:      var(--font-base);
  font-size:        var(--text-body);
  font-weight:      400;
  line-height:      var(--lh-body);
  color:            var(--color-fg);
  background-color: var(--color-bg);
  overflow-x:       hidden;

  /* OpenType Features fuer Body-Text */
  font-feature-settings: 'kern' 1, 'liga' 0, 'lnum' 1;

  /* Silbentrennung Deutsch */
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* Bilder und Media */
img,
video,
svg {
  display:    block;
  max-width:  100%;
  height:     auto;
}

img {
  filter: none; /* Kein unbeabsichtigter Browser-Filter */
}

/* Listen */
ul,
ol {
  list-style: none;
}

/* Anker */
a {
  color:           inherit;
  text-decoration: none;
  hyphens:         none;
}

/* Buttons */
button {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: inherit;
  font-size:   inherit;
  color:       inherit;
  hyphens:     none;
}

/* Headings — nie trennen */
h1, h2, h3, h4, h5, h6 {
  hyphens: none;
}

/* Formulare */
input,
textarea,
select {
  font-family: inherit;
  font-size:   inherit;
  color:       inherit;
  background:  none;
  border:      1px solid var(--color-border);
  outline:     none;
}

/* Horizontale Linie */
hr {
  border:        none;
  border-top:    1px solid var(--color-border);
  margin-block:  var(--space-md);
}

/* Tabellen */
table {
  border-collapse: collapse;
  width:           100%;
}


/* =============================================================================
   5. TYPOGRAFIE-KLASSEN

   Regel: Keine Typografie in module.css.
          Nur diese Klassen fuer Schriftgroesse, -family, -weight, line-height.
   ============================================================================= */

/* --- Statement: WV-Nummer Fullscreen --- */
.type-statement {
  font-family:    var(--font-display);
  font-size:      var(--text-statement);
  font-weight:    400;
  line-height:    var(--lh-display);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  padding-block:  0.05em 0.1em;
  hyphens:        none;
}

/* --- Display: WV-Nummer Index-Primaerelement --- */
.type-display {
  font-family:    var(--font-display);
  font-size:      var(--text-display);
  font-weight:    400;
  line-height:    var(--lh-display);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  padding-block:  0.05em 0.1em;
  hyphens:        none;
}

/* --- H1: Seitentitel, WV-Einzelseite --- */
.type-h1 {
  font-family:    var(--font-display);
  font-size:      var(--text-h1);
  font-weight:    400;
  line-height:    var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  hyphens:        none;
}

/* --- H2: Sektionsueberschriften --- */
.type-h2 {
  font-family:    var(--font-display);
  font-size:      var(--text-h2);
  font-weight:    400;
  line-height:    var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  hyphens:        none;
}

/* --- H3: Untertitel, Kategorien --- */
.type-h3 {
  font-family:    var(--font-display);
  font-size:      var(--text-h3);
  font-weight:    400;
  line-height:    var(--lh-subheading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  hyphens:        none;
}

/* --- Label: Navigation, UI-Labels, Captions --- */
.type-label {
  hyphens: none;
}

/* --- Body: Fliesstext, Beschreibungen --- */
.type-body {
  font-family:   var(--font-base);
  font-size:     var(--text-body);
  font-weight:   400;
  line-height:   var(--lh-body);
  letter-spacing: var(--ls-normal);
  max-width:     65ch;         /* Reading-Measure: Bringhurst 66 Zeichen */
  color:         var(--color-fg);
}

/* Modifier: Roman (Nimbus Roman / Times New Roman) */
.type-body--roman {
  font-family: var(--font-serif);
}

/* Modifier: Muted */
.type-body--muted {
  color: var(--color-fg-muted);
}

/* Modifier: Inverse (auf dunklem Hintergrund) */
.type-body--inverse {
  color: var(--color-fg-inverse);
}

/* --- Small: Metadaten, WV-Zusatzinformationen --- */
.type-small {
  font-family:   var(--font-display);
  font-size:     var(--text-small);
  font-weight:   400;
  line-height:   var(--lh-body);
  letter-spacing: var(--ls-normal);
  max-width:     45ch;
}

.type-small--muted {
  color: var(--color-fg-muted);
}

/* --- Label: Navigation, UI-Labels, Captions --- */
.type-label {
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  font-weight:    700;
  line-height:    var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.type-label--muted {
  color: var(--color-fg-muted);
}

/* --- Reading-Measure-Klassen fuer Fliesstext-Container --- */
.measure-body    { max-width: 65ch; }
.measure-caption { max-width: 45ch; }
.measure-sub     { max-width: 52ch; }
.measure-meta    { max-width: 40ch; }

/* --- Link-Treatment --- */
a.link-inline {
  text-decoration:       underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 0.2em;
  transition:            text-decoration-color var(--dur-quick) var(--ease-material);
}

a.link-inline:hover {
  text-decoration-color: var(--color-fg);
}

a.link-inline:visited {
  color: inherit; /* Visited-State versteckt — Archiv-Logik */
}

/* --- Typografie mit OpenType-Ligaturen (Fliesstext Einzelseiten) --- */
.type-ligatures {
  font-feature-settings: 'kern' 1, 'liga' 1, 'lnum' 1;
}

/* --- Deutsche Anf.-/Schlussanfuehrungszeichen via CSS --- */
/* (Setzt den Browser-Standard-Stilwert) */
q {
  quotes: '\201E' '\201C' '\201A' '\2018';
}


/* =============================================================================
   6. LAYOUT-UTILITIES
   ============================================================================= */

/* --- Seiten-Wrapper --- */
.page-wrapper {
  width:         100%;
  overflow-x:    hidden;
  position:      relative;
}

/* --- Page-Margin Container (Standard) --- */
.page-margin {
  padding-inline: var(--page-margin);
}

/* --- Vollbreite Grid --- */
.grid {
  display:               grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap:            var(--grid-gap);
  padding-inline:        var(--page-margin);
}

/* Grid ohne Seitenrand (fuer Full-Bleed-Sektionen) */
.grid--bleed {
  display:               grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap:            var(--grid-gap);
  padding-inline:        0;
}

/* --- Bleed-Utilities: Bilder koennen an Kante bluten --- */

/* Vollbreite: escapes Seitenrand */
.bleed-full {
  width:       100vw;
  margin-left: calc(-1 * var(--page-margin));
}

/* Linke Kante */
.bleed-left {
  margin-left:  calc(-1 * var(--page-margin));
  padding-left: var(--page-margin);
}

/* Rechte Kante */
.bleed-right {
  margin-right:  calc(-1 * var(--page-margin));
  padding-right: var(--page-margin);
}

/* --- Sektion-Container --- */
.section {
  position:       relative;
  padding-inline: var(--page-margin);
}

/* Sektions-Abstand: monumentaler Weissraum zwischen Sektionen */
.section + .section {
  margin-top: var(--section-gap);
}

/* Abstand explizit setzen */
.section-gap        { margin-block: var(--section-gap); }
.section-gap--lg    { margin-block: var(--space-xl); }
.section-gap--md    { margin-block: var(--space-lg); }

/* --- Trennlinie Ghost --- */
.divider {
  width:      100%;
  height:     1px;
  background: var(--color-border);
}

.divider--strong {
  background: var(--color-border-strong);
}

/* --- Sticky-Positionierung --- */
.sticky-top {
  position: sticky;
  top:      0;
  z-index:  var(--z-sticky);
}

/* --- Aspect-Ratio-Container fuer Layout-Shift-Praevention --- */
.ratio-landscape    { aspect-ratio: var(--ratio-landscape); }  /* 16:9 — Querformat */
.ratio-portrait     { aspect-ratio: var(--ratio-portrait); }   /* 9:16 — Hochformat */
.ratio-detail       { aspect-ratio: var(--ratio-detail); }     /* 1:1  — Quadrat */

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }

/* --- Visually Hidden (fuer Screen Reader) --- */
.sr-only {
  position:  absolute;
  width:     1px;
  height:    1px;
  padding:   0;
  margin:    -1px;
  overflow:  hidden;
  clip:      rect(0, 0, 0, 0);
  border:    0;
}


/* =============================================================================
   7. WV-SPEZIFISCHE KLASSEN
   (Werkverzeichnis-Komponenten-Basis)
   ============================================================================= */

/* --- WV-Nummer als primaeres Visuals-Element --- */
.wv-number {
  font-family:    var(--font-display);
  font-size:      var(--text-display);
  font-weight:    400;
  line-height:    var(--lh-display);
  letter-spacing: var(--ls-normal);
  color:          var(--color-fg);
  font-feature-settings: 'kern' 1, 'liga' 0, 'lnum' 1; /* Keine Ligaturen in Nummern */
  transition:     color var(--dur-quick) var(--ease-material);
}

/* --- WV-Index Eintrag --- */
.wv-entry {
  position: relative;
  cursor:   default;
}

.wv-entry:hover .wv-number {
  color: var(--color-hover);
}

/* --- WV-Bild-Container — Ratio per Klasse gesetzt (landscape oder portrait) --- */
/* Verwendung: <div class="wv-image-container ratio-landscape"> oder ratio-portrait  */
.wv-image-container {
  position:      relative;
  overflow:      hidden;
  background:    var(--color-surface); /* Ivory-Placeholder — kein Blur-Up */
}

.wv-image {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  /* Kein opacity-Hover-Reveal — Bilder immer sichtbar im Index */
  /* Hover auf .wv-entry: nichts. Klick → /werk/[slug] */
}

/* --- WV-Bild geladen (nach JS-Klasse) --- */
.wv-image.is-loaded {
  /* Bild ist da — sofort sichtbar */
}

/* --- WV Empty State: Nummer statt Bild — Ratio via Klasse (ratio-landscape / ratio-portrait) --- */
.wv-image-empty {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-surface);
}

.wv-image-empty .wv-number-placeholder {
  font-family:    var(--font-display);
  font-size:      var(--text-display);
  font-weight:    400;
  color:          var(--color-patina);
  font-feature-settings: 'kern' 1, 'liga' 0, 'lnum' 1;
  opacity:        0.6;
}

/* --- WV-Metadaten (3-Ebenen-Hierarchie) --- */
.wv-meta {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.wv-meta__title {
  font-family:   var(--font-display);
  font-size:     var(--text-body);
  font-weight:   400;
  line-height:   var(--lh-body);
  color:         var(--color-fg);
}

.wv-meta__type {
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  font-weight:    400;
  line-height:    var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color:          var(--color-fg-muted);
}

.wv-meta__year {
  font-family:   var(--font-display);
  font-size:     var(--text-small);
  font-weight:   400;
  line-height:   var(--lh-body);
  color:         var(--color-fg-muted);
}

/* --- WV Counter (Nav-Anker) --- */
.wv-counter {
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  font-weight:    400;
  line-height:    var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color:          var(--color-fg-muted);
}

/* --- Spezifikations-Tabelle (Einzelseite) --- */
.spec-table {
  width:         100%;
  border-top:    1px solid var(--color-border);
}

.spec-row {
  display:       flex;
  gap:           var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  padding-block: 12px;
  transition:    background var(--dur-quick) var(--ease-material),
                 color      var(--dur-quick) var(--ease-material);
}

.spec-row:hover {
  background: var(--color-forge);
  color:      var(--color-ivory);
  padding-inline: 8px; /* Zetr-Pattern: Padding expandiert bei Hover */
}

.spec-label {
  flex:           0 0 50%;
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  font-weight:    400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color:          var(--color-fg-muted);
}

.spec-row:hover .spec-label {
  color: var(--color-fg-muted); /* Patina bleibt im Hover */
}

.spec-value {
  flex:        0 0 50%;
  font-family: var(--font-display);
  font-size:   var(--text-body);
  font-weight: 400;
  line-height: var(--lh-body);
  font-feature-settings: 'kern' 1, 'liga' 0, 'lnum' 1, 'tnum' 1; /* Tabular Numbers */
}


/* =============================================================================
   8. ANIMATION-BASE
   ============================================================================= */

/* --- Page-Curtain: Diagonal Wipe (Monolith-Pattern) --- */
.page-curtain {
  position:       fixed;
  inset:          0;
  background:     var(--color-forge);
  z-index:        var(--z-curtain);
  clip-path:      polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  pointer-events: none;
  will-change:    clip-path;
}

.page-curtain.is-entering {
  animation: curtain-in var(--dur-grand) var(--ease-hard-cut) forwards;
}

.page-curtain.is-exiting {
  animation: curtain-out var(--dur-grand) var(--ease-hard-cut) forwards;
}

@keyframes curtain-in {
  0%   { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0%,   100% -5%,  100% 100%, 0 100%); }
}

@keyframes curtain-out {
  0%   { clip-path: polygon(0 0%,   100% -5%,  100% 100%, 0 100%); }
  100% { clip-path: polygon(0 -5%,  100% 0%,   100% 0%,   0 0%  ); }
}

/* View Transitions API (Progressive Enhancement, Modern Browsers) */
@view-transition {
  navigation: auto;
}

/* --- WV-Grid Initial-Reveal (GSAP uebernimmt, CSS als Fallback) --- */
.wv-reveal {
  opacity:   0;
  transform: translateY(12px);
}

.wv-reveal.is-revealed {
  opacity:    1;
  transform:  translateY(0);
  transition: opacity   var(--dur-deliberate) var(--ease-out-expo),
              transform var(--dur-deliberate) var(--ease-out-expo);
}

/* --- Fade-In --- */
.fade-in {
  opacity: 0;
  transition: opacity var(--dur-deliberate) var(--ease-out-expo);
}

.fade-in.is-revealed {
  opacity: 1;
}

/* --- Navigation: Mix-Blend-Mode (Porto Rocha / N-O-O-N Pattern) --- */
.nav-blend {
  color:          var(--color-ivory);
  mix-blend-mode: difference;
}


/* =============================================================================
   9. ACCESSIBILITY
   ============================================================================= */

/* --- Selection: Brand-Moment --- */
::selection {
  background: var(--color-forge);
  color:      var(--color-ivory);
}

/* --- Focus: Praezise schwarze Linie (kein generisches Blau) --- */
:focus-visible {
  outline:        1.5px solid var(--color-forge);
  outline-offset: 3px;
  border-radius:  0; /* Kein Radius — Werkverzeichnis ist praezise */
}

/* Focus fuer Links im inversen Kontext */
[data-theme="inverse"] :focus-visible {
  outline-color: var(--color-ivory);
}

/* --- Forced-Colors (Windows High Contrast) --- */
@media (forced-colors: active) {
  :root {
    --color-bg:     Canvas;
    --color-fg:     CanvasText;
    --color-accent: LinkText;
    --color-border: ButtonBorder;
  }

  .wv-image {
    forced-color-adjust: none;
  }
}

/* --- Reduced-Motion: Volle Strategie (nicht nur disable) --- */
@media (prefers-reduced-motion: reduce) {
  /* Page-Transition: kein Clip-Path Wipe */
  .page-curtain {
    display: none;
  }

  /* WV-Bild: kein Hover-Reveal mehr — Bilder immer sichtbar */
  .wv-image {
    transition: none;
  }

  /* WV-Grid-Reveal: sofortige Sichtbarkeit */
  .wv-reveal,
  .fade-in {
    opacity:    1;
    transform:  none;
    transition: none;
  }

  /* State-Changes bleiben, aber minimal */
  .wv-entry:hover .wv-number {
    transition: color var(--dur-flash) ease;
  }

  .spec-row {
    transition: none;
  }

  /* Alle uebrigen Transitions: flash-speed */
  * {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}

/* --- Reduced-Data: kein Heavy-Media --- */
@media (prefers-reduced-data: reduce) {
  video,
  [data-background-video] {
    display: none;
  }
}


/* =============================================================================
   10. PRINT-CSS
   WV-Einzeldatenblatt — druckoptimiert
   ============================================================================= */

@media print {
  /* Reset fuer Druck */
  * {
    background:  white !important;
    color:       black !important;
    box-shadow:  none !important;
    text-shadow: none !important;
  }

  /* Navigation ausblenden */
  nav,
  .nav-blend,
  .page-curtain,
  [data-print-hide] {
    display: none !important;
  }

  /* Body fuer Druck */
  body {
    font-size:   12pt;
    line-height: 1.5;
    font-family: 'NimbusRoman', 'Times New Roman', serif;
  }

  /* WV-Nummer im Druck */
  .type-display,
  .wv-number {
    font-size:   24pt;
    line-height: 1.0;
    color:       black !important;
  }

  /* Seitentitel */
  .type-h1 {
    font-size:   18pt;
    line-height: 1.1;
  }

  /* Metadaten */
  .type-label,
  .wv-meta__type {
    font-size:      8pt;
    letter-spacing: 0.05em;
  }

  /* Ghost-Borders zu harten Linien im Druck */
  .spec-table,
  .spec-row,
  .divider {
    border-color: black !important;
  }

  .spec-row {
    border-bottom-width: 0.5pt;
  }

  /* Bilder: max-Breite fuer Druck */
  img {
    max-width:   100% !important;
    page-break-inside: avoid;
  }

  /* Seitenumbrueche vermeiden */
  .wv-meta,
  .spec-table,
  .type-h1,
  .type-h2 {
    page-break-inside: avoid;
    page-break-after:  avoid;
  }

  /* Page-Margin fuer Druck */
  @page {
    margin: 2cm;
  }
}


/* =============================================================================
   11. RESPONSIVE OVERRIDES (Desktop-First)
   Breakpoints: > 1024px Desktop | 768–1024px Tablet | < 768px Mobile
   ============================================================================= */

/* --- Tablet: 768px–1024px --- */
@media (max-width: 1024px) {
  :root {
    --grid-cols:    8;
    --section-gap:  clamp(5rem, 10vw, 7.5rem); /* 80px–120px */

    /* Spalten-Breite neu berechnet */
    --col-1: calc((100vw - 2 * var(--page-margin) - 7 * var(--grid-gap)) / 8);
  }

  /* Typo-Anpassung: Display-Groessen auf Tablet */
  :root {
    --text-statement: clamp(2.5rem, 7vw,  4.5rem);
    --text-display:   clamp(1.75rem, 5vw, 3rem);
  }
}

/* --- Mobile: < 768px --- */
@media (max-width: 768px) {
  :root {
    --grid-cols:    4;
    --section-gap:  5rem; /* 80px */
    --col-1: calc((100vw - 2 * var(--page-margin) - 3 * var(--grid-gap)) / 4);

    /* Typo-Anpassung Mobile */
    --text-statement: clamp(2rem, 8.5vw, 4rem);
    --text-display:   clamp(1.5rem, 6vw, 3rem);
    --text-h1:        clamp(1.375rem, 5.5vw, 2.25rem);
    --text-h2:        clamp(1.125rem, 4vw, 1.75rem);
    --text-body:      1.125rem; /* 18px statt 24px auf Mobile */
  }

  /* Touch-Target-Pflicht */
  button,
  a,
  .wv-entry,
  input[type="submit"],
  input[type="button"] {
    min-height:  44px;
    min-width:   44px;
  }

  /* WV-Eintrag auf Mobile: volle Zeile klickbar */
  .wv-entry {
    display:    flex;
    align-items: center;
    padding-block: 12px;
  }

  /* Bleed auf Mobile */
  .bleed-full {
    margin-left: calc(-1 * var(--page-margin));
  }
}

/* --- Hover: Touch-Geräte — kein sticky-hover (iOS-Bug) --- */
@media (hover: none) {
  .spec-row:hover {
    background:   none;
    color:        inherit;
    padding-inline: 0;
  }
  a.link-inline:hover {
    text-decoration-color: var(--color-border-strong);
  }
}

/* --- Sehr kleines Mobile: < 480px --- */
@media (max-width: 480px) {
  :root {
    --text-statement: clamp(1.75rem, 9vw, 3rem);
    --text-display:   clamp(1.375rem, 7vw, 2.25rem);
  }
}


/* =============================================================================
   DARK MODE — [data-theme="dark"] auf <html>
   Tauscht bg/fg: Ivory ↔ Forge
   ============================================================================= */

/* DARK = CORPORATE-TAUPE + WEISS — Hintergrund IST die Markenfarbe #988E8A,
   weisse Schrift mit Weiss-Abstufungen. Lange Texte sitzen auf dunkleren
   Taupe-Panels (bg-paper grey-700), wo Weiss voll AA traegt (6.6:1). */
[data-theme="dark"] {
  /* Surfaces — Corporate-Taupe Basis, Panels dunkler */
  --color-bg:            var(--grey-500);   /* #988E8A Corporate */
  --color-bg-paper:      var(--grey-700);   /* dunkles Panel — weisser Text 6.6:1 */
  --color-bg-elevated:   var(--grey-600);   /* erhoehte Flaeche 4.6:1 */
  --color-bg-inverse:    var(--grey-50);    /* helle Chips */

  /* Foreground — Weiss + Abstufungen */
  --color-logo:          var(--grey-0);     /* weiss */
  --color-fg:            var(--grey-0);      /* weiss — 3.2 bg / 6.6 panel */
  --color-fg-muted:      var(--grey-200);   /* Weiss-Abstufung */
  --color-fg-subtle:     var(--grey-300);
  --color-fg-inverse:    var(--grey-900);

  /* Borders — helle Haarlinien */
  --color-border:        var(--grey-300);
  --color-border-strong: var(--grey-200);

  /* Hover — prominenter = heller */
  --color-hover:         var(--grey-0);
}

/* Logo-SVG im Dark Mode: weiss auf Taupe */
[data-theme="dark"] .nav__logo svg path {
  fill: var(--color-logo);
}


/* =============================================================================
   KONFIGURIERTES DESIGN-SYSTEM KOMPLETT.

   Naechster Schritt: Section Loop (Phase 6).
   Pro Section: consistency-auditor → pre-code-checkpoint → section-designer

   Dateien die DIESES globals.css referenzieren duerfen:
   - Jede [component].module.css (NUR layout: padding, margin, grid, flex)
   - Jede Seiten-CSS-Datei
   - Jede JS-Datei (via CSS Custom Properties API)

   Dateien die DIESES globals.css NICHT aendern:
   - module.css Dateien
   - component-spezifische Stile
   ============================================================================= */