/* Theme „Demo Studio“: warme Erdtöne: die EINZIGE Stelle mit Farbwerten,
   Schriften und Abständen dieser Webseite. Der Kern (app.css und die übrigen Stylesheets) verwendet nur die
   Tokens. Ein weiteres Theme ist eine Datei mit denselben Token-Namen (Beispiel: demo.css). */

:root {
  /* Farbkonzept "Nordic Slate" (Arbeitsauftrag 2026-10-28): helle, nordisch
     ruhige Website; nur die Einzelbildansicht (Lightbox) bleibt bewusst dunkel.
     Das ist die EINZIGE Stelle mit Farbwerten - alle Komponenten (auch die
     anderen CSS-Dateien) verwenden nur die semantischen Tokens darunter. */

  /* Rohpalette (Vorgabe) */
  --ns-mist: #EFE6DA;      /* Haupt-Hintergrund */
  --ns-sage: #D9C7B0;      /* sekundäre Flächen, Rahmen */
  --ns-slate: #8A6F55;     /* Schieferblau (nur Dekor, 3,6:1 - kein Text) */
  --ns-petrol: #7A3E2B;    /* Primärfarbe / Buttons */
  --ns-ink: #2B211B;       /* Haupttext */
  --ns-gallery: #1B1411;   /* dunkler Galerie-Hintergrund */
  --ns-offwhite: #FBF7F1;  /* helle Kartenflächen */
  --ns-white: #FFFFFF;
  /* Abgeleitete Töne, damit Text WCAG AA (>=4.5:1) erreicht. */
  --ns-slate-deep: #5E4A38;   /* Schieferblau für Text (Navigation) */
  --ns-body: #43352B;         /* Fließtext, etwas heller als Anthrazit */
  --ns-petrol-dark: #5C2D1F;  /* abgedunkeltes Petrol für Hover */
  --ns-overlay: rgba(21, 29, 32, 0.55);       /* Hero-Foto, dunkel */
  --ns-glass: rgba(245, 247, 246, 0.12);      /* Lightbox-Buttons */
  --ns-glass-hover: rgba(245, 247, 246, 0.24);
  --ns-lift: rgba(41, 58, 64, 0.08);          /* Hover-Tönung hell */
  --ns-shadow: rgba(21, 29, 32, 0.09);        /* hauchzarter Schatten */
  --ns-hairline: rgba(41, 58, 64, 0.2);       /* feine Trennlinien (Editorial) */
  --ns-wash: rgba(245, 247, 246, 0.45);       /* sehr dezente Hintergrundfläche */

  /* Semantische Tokens (Rollen) */
  --bg: var(--ns-mist);
  --bg-alt: var(--ns-sage);
  --bg-elevated: var(--ns-offwhite);
  --border: var(--ns-sage);
  --text: var(--ns-ink);           /* Überschriften, Hervorhebungen */
  --text-body: var(--ns-body);     /* Fließtext */
  --text-muted: var(--ns-slate-deep); /* Navigation, Meta, Bildunterschriften */
  --accent: var(--ns-petrol);      /* Links, Buttons, aktiver Zustand */
  --accent-hover: var(--ns-petrol-dark);
  --on-accent: var(--ns-white);
  --on-dark: var(--ns-offwhite);   /* Text auf Foto-Overlay/Galerie */
  --gallery-bg: var(--ns-gallery);
  --gallery-ctl: var(--ns-glass);
  --gallery-ctl-hover: var(--ns-glass-hover);
  --overlay: var(--ns-overlay);
  --hover-tint: var(--ns-lift);
  --shadow: var(--ns-shadow);
  --hairline: var(--ns-hairline);
  --wash: var(--ns-wash);
  --radius-btn: 4px;
  /* Editorial: kleine Radien statt runder Rechtecke. --radius für Felder,
     Hinweise und Menüs, --radius-lg für Bilder und Kacheln, --radius-btn für
     Buttons. Rundungen gibt es sonst nur beim Torbogen der Portfolio-Bilder. */
  --radius: 4px;
  --radius-lg: 6px;
  --mask-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cg fill='none' stroke='black' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M2 8Q15 0 28 8T54 8'/%3E%3Cpath d='M70 8Q83 16 96 8T118 8'/%3E%3C/g%3E%3Ccircle cx='62' cy='8' r='2.6'/%3E%3C/svg%3E");
  /* Breites, fast bildschirmfüllendes Layout statt schmaler Blog-Spalte
     (Nutzerwunsch): 90% der Fensterbreite, nach oben hin begrenzt, damit
     Zeilen auf sehr breiten Monitoren nicht absurd lang werden. */
  --max-width: 1800px;
  /* Serifenschrift für Überschriften: Ausstellungskatalog statt Web-Baukasten. */
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: system-ui, sans-serif;
}