/*
  ksandar — gemeinsame Gestaltung für Website und Kundenbereich.

  Schriften (selbst ausgeliefert, SIL OFL 1.1, siehe /fonts/OFL.txt):
    Outfit            Titel: gross, eng gesetzt, geometrisch — Kreis und
                      Gerade wie die Wortmarke (variabel, 400–700)
    Manrope           Fliesstext, Navigation, Knöpfe (variabel, 500–800)
    IBM Plex Mono     nur die Anzeige im Sucher (Blende, Zeit, ISO) und
                      kleine Bildnummern

  Farben: tiefes Anthrazit und warmes Papierweiss, dazu ein einziger,
  zurückhaltender Akzent in kühlem Grau-Blau. Neutral, damit Hauttöne und
  Farben der Fotos nicht konkurrieren; das kühle Blau setzt sich ruhig von
  warmen Hauttönen ab. Kein Orange.

  Hell/dunkel folgt dem System; `data-theme="hell|dunkel"` am <html>
  überstimmt es (Umschalter auf der Seite, gemerkt im localStorage).
*/

/* Manrope 500–800 (variabel) — latin-ext */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(/fonts/manrope-500-800-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope 500–800 (variabel) — latin */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(/fonts/manrope-500-800-latin.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;
}
/* Outfit 400–700 (variabel) — latin-ext */
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/outfit-400-700-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Outfit 400–700 (variabel) — latin */
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/outfit-400-700-latin.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;
}
/* IBM Plex Mono 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 — latin */
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.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;
}
/* IBM Plex Mono 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 — latin */
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.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;
}


:root {
  color-scheme: light dark;

  --display: 'Outfit', 'Avenir Next', 'Futura', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Hell: warmes Papierweiss, Anthrazit, Grau-Blau */
  --papier: #f4f2ee;
  --papier-2: #eae7e1;
  --tinte: #16181a;
  --tinte-2: #3b4045;
  --leise: #5d6369;           /* 5.6:1 auf Papier */
  --linie: #d7d3cc;
  --akzent: #3e5a6f;          /* Grau-Blau, Text auf Papier: 6.8:1 */
  --akzent-flaeche: #5b7a90;  /* Flächen, Markierungen */
  --auf-akzent: #ffffff;
  --ok: #2d6a4a;
  --warn: #5f5c1c;
  --fehler: #a3262d;
  --rahmen: #0e1011;          /* Sucher, dunkle Bildflächen */
  --rahmen-2: #1a1d20;
  --rahmen-schrift: #c9d4dc;  /* Anzeige im Sucher */
  --schatten: 0 1px 0 rgba(22, 24, 26, .05), 0 18px 40px -24px rgba(22, 24, 26, .35);
  --korn: 0;

  --radius: 2px;
  --mass: min(1320px, 100% - 2 * var(--rand));
  --rand: clamp(16px, 4vw, 48px);
  --t-klein: .8125rem;
  --t-text: 1.0625rem;
  --t-gross: clamp(1.2rem, 1rem + .8vw, 1.5rem);
  --t-titel: clamp(2.5rem, 1.3rem + 5vw, 6rem);
  --t-titel-2: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
  --eng: -.035em;             /* Laufweite der Titel */
  --eng-2: -.025em;
  --dauer: 420ms;
  --kurve: cubic-bezier(.2, .7, .1, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --papier: #0f1112;
    --papier-2: #181b1d;
    --tinte: #ecebe7;
    --tinte-2: #c4c6c4;
    --leise: #979ca0;
    --linie: #2b2f32;
    --akzent: #9fb7c9;
    --akzent-flaeche: #7f9bb0;
    --auf-akzent: #0f1112;
    --ok: #8cc7a0;
    --warn: #d3cd7c;
    --fehler: #f0928c;
    --rahmen: #080909;
    --rahmen-2: #141719;
    --schatten: 0 1px 0 rgba(0, 0, 0, .4), 0 18px 40px -22px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dunkel"] {
  --papier: #0f1112;
  --papier-2: #181b1d;
  --tinte: #ecebe7;
  --tinte-2: #c4c6c4;
  --leise: #979ca0;
  --linie: #2b2f32;
  --akzent: #9fb7c9;
  --akzent-flaeche: #7f9bb0;
  --auf-akzent: #0f1112;
  --ok: #8cc7a0;
  --warn: #d3cd7c;
  --fehler: #f0928c;
  --rahmen: #080909;
  --rahmen-2: #141719;
  --schatten: 0 1px 0 rgba(0, 0, 0, .4), 0 18px 40px -22px rgba(0, 0, 0, .8);
}
:root[data-theme="hell"] { color-scheme: light; }
:root[data-theme="dunkel"] { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --dauer: 0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Feines Filmkorn (Kundenbereich; auf der Website aus: --korn: 0) — statisch, ohne Bild-Download. */
.korn::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: var(--korn);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
:root[data-theme="dunkel"] .korn::after { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .korn::after { mix-blend-mode: screen; } }
@media print { .korn::after { display: none; } }