/* fonts:anfang */
/* Selbst gehostete Schriften (SIL Open Font License), erzeugt mit scripts/fonts_holen.py - nicht von Hand ändern. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/site-assets/fonts/cormorant-garamond-kursiv-latin-400-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/site-assets/fonts/cormorant-garamond-kursiv-latin-ext-400-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/site-assets/fonts/cormorant-garamond-normal-latin-400-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/site-assets/fonts/cormorant-garamond-normal-latin-ext-400-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/site-assets/fonts/lato-kursiv-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/site-assets/fonts/lato-kursiv-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/site-assets/fonts/lato-normal-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/site-assets/fonts/lato-normal-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/site-assets/fonts/lato-normal-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/site-assets/fonts/lato-normal-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* fonts:ende */

/* Theme „Miarto Fabricum“: ruhig und dunkel, abgeleitet von der Nordic-Slate-Palette der Miarto-Markenfamilie.
   Kontraste: Text 14,7:1, Fließtext 9,8:1, Akzent 7,9:1, Buttons 8,5:1 (alle über WCAG AA). Nur Tokens - Farben, Schriften, Radien. */

: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: #141C20;      /* Haupt-Hintergrund */
  --ns-sage: #1F2B30;      /* sekundäre Flächen, Rahmen */
  --ns-slate: #5F7A80;     /* Schieferblau (nur Dekor, 3,6:1 - kein Text) */
  --ns-petrol: #86B8C0;    /* Primärfarbe / Buttons */
  --ns-ink: #E8EEED;       /* Haupttext */
  --ns-gallery: #0E1417;   /* dunkler Galerie-Hintergrund */
  --ns-offwhite: #1A2429;  /* helle Kartenflächen */
  --ns-white: #0E1417;      /* Text auf Akzentflächen (Buttons): dunkel */
  /* Abgeleitete Töne, damit Text WCAG AA (>=4.5:1) erreicht. */
  --ns-slate-deep: #96ABAE;   /* Schieferblau für Text (Navigation) */
  --ns-body: #B9C6C5;         /* Fließtext, etwas heller als Anthrazit */
  --ns-petrol-dark: #AAD2D8;  /* abgedunkeltes Petrol für Hover */
  --ns-overlay: rgba(8, 12, 14, 0.55);       /* Hero-Foto, dunkel */
  --ns-glass: rgba(232, 238, 237, 0.12);      /* Lightbox-Buttons */
  --ns-glass-hover: rgba(232, 238, 237, 0.24);
  --ns-lift: rgba(232, 238, 237, 0.06);          /* Hover-Tönung hell */
  --ns-shadow: rgba(0, 0, 0, 0.45);        /* hauchzarter Schatten */
  --ns-hairline: rgba(232, 238, 237, 0.16);       /* feine Trennlinien (Editorial) */
  --ns-wash: rgba(232, 238, 237, 0.04);       /* 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: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Lato", system-ui, sans-serif;
}