/* ============================================================
   Orivan — Design-Tokens
   Einzige Quelle für Farben, Schrift, Abstände, Radien.

   Regel: In Komponenten-CSS stehen KEINE Hexwerte und keine
   krummen Pixelabstände. Alles kommt von hier.

   Zwei Welten:
   - .theme-dunkel  → öffentliche Website (Hero, Referenzen, …)
   - .theme-hell    → Admin und Kundenportal, Formulare, PDFs
   Beide teilen sich Schrift-, Abstands- und Radienskala.
   ============================================================ */

/* ---------- Schriften, selbst gehostet ----------
   Nicht über die Google-CDN einbinden: sonst geht bei jedem
   Seitenaufruf die IP des Besuchers an Google (LG München I,
   Az. 3 O 17493/20). Nachladen mit: python3 docs/fetch-fonts.py */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/fonts/inter-tight-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/fonts/inter-tight-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Schriftrollen ---------- */
  --schrift-display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --schrift-text: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --schrift-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Typoskala (Major Third, fluid) ---------- */
  --t-xs:   0.78rem;
  --t-s:    0.9rem;
  --t-m:    1rem;
  --t-l:    1.15rem;
  --t-xl:   clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  --t-2xl:  clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --t-3xl:  clamp(2.4rem, 1.5rem + 4vw, 4.4rem);
  --t-riese: clamp(3rem, 1.5rem + 7vw, 7rem);

  /* ---------- Abstände ---------- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;
  --s32: 8rem;

  /* ---------- Maße ---------- */
  --breite-inhalt: 72rem;
  --breite-text: 38rem;      /* ~65 Zeichen */
  --rand-seitlich: clamp(1rem, 4vw, 2.5rem);

  /* ---------- Radien ---------- */
  --r-klein: 6px;
  --r-mittel: 10px;
  --r-gross: 16px;
  --r-rund: 999px;

  /* ---------- Bewegung ----------
     Eine Kurve, drei Dauern. Mehr braucht es nicht. */
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dauer-kurz: 150ms;
  --dauer-mittel: 320ms;
  --dauer-lang: 600ms;
}

/* ============================================================
   DUNKEL — öffentliche Website
   Blau wandert vom Hintergrund zum einzigen Akzent.
   ============================================================ */

.theme-dunkel {
  --grund:          #080b12;
  --grund-erhoben:  #111725;   /* Karten, abgesetzte Flächen */
  --grund-tief:     #05070c;   /* Fußbereich */
  --linie:          #1e2739;
  --linie-stark:    #3a4761;

  --text:           #f2f5f9;   /* 17,1:1 auf --grund */
  --text-leise:     #97a3b8;   /*  7,4:1 */
  /* war #6b7789 = 4,34:1 und damit unter AA — dieser Ton traegt Labels,
     Fusszeile und Kennzahlen-Beschriftungen, alles in kleiner Schrift */
  --text-still:     #8996a8;   /*  6,2:1 */

  /* Akzent: heller als das Marken-#2563eb.
     Auf #080b12 erreicht #2563eb nur ~3,8:1 und fällt damit für
     Text durch; #3b82f6 kommt auf ~5,4:1. Das dunklere Blau
     bleibt für Flächen mit weißer Schrift. */
  --akzent:         #3b82f6;   /* 5,4:1 auf --grund — fuer Text */
  --akzent-hell:    #93b8fd;
  --akzent-flaeche: #2563eb;   /* Flaechen mit weisser Schrift: 5,2:1 */
  --akzent-dunkel:  #1d4ed8;   /* Hover-Zustand, dunkler statt heller */
  --akzent-leise:   #16294a;

  --ok:             #4ade80;
  --warn:           #fbbf24;
  --fehler:         #f87171;

  --auf-akzent:     #ffffff;
  --schatten: 0 18px 50px rgb(0 0 0 / 0.5);
}

/* ============================================================
   HELL — Admin, Kundenportal, Formulare
   ============================================================ */

.theme-hell {
  --grund:          #f6f8fb;
  --grund-erhoben:  #ffffff;
  --grund-tief:     #eceff4;
  --linie:          #dde3ec;
  --linie-stark:    #c3ccda;

  --text:           #131a24;
  --text-leise:     #4d5a6c;
  --text-still:     #6b7789;

  --akzent:         #1d4ed8;
  --akzent-hell:    #2563eb;
  --akzent-flaeche: #2563eb;
  --akzent-dunkel:  #1a3fa8;
  --akzent-leise:   #e6eefc;

  --ok:             #15803d;
  --warn:           #a16207;
  --fehler:         #b91c1c;

  --auf-akzent:     #ffffff;
  --schatten: 0 4px 16px rgb(19 26 36 / 0.08);
}

/* ============================================================
   Bewegung reduzieren — verbindlich, nicht optional
   ============================================================ */

@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;
  }
}