/* Farbverlauf-Standard (verbindlich fuer jede Kundenseite).
   Wird als ERSTES Stylesheet eingebunden, vor allem kundenspezifischen CSS.
   Pro Kunde wird ausschliesslich --brand getauscht. */

:root {
  /* EINZIGER Wert, der pro Kunde getauscht wird */
  --brand: oklch(44% 0.14 259);   /* Firmenblau #1a4f9e */

  --grad-from: oklch(from var(--brand) l c h);
  --grad-to:   oklch(from var(--brand) calc(l - 0.18) c calc(h + 28));
  --grad-flat: linear-gradient(160deg in oklab, var(--grad-from), var(--grad-to));

  --grad-mesh:
    radial-gradient(at 25% 30% in oklch, oklch(from var(--brand) calc(l + 0.08) c h / .8) 0px, transparent 50%),
    radial-gradient(at 78% 25% in oklch, oklch(from var(--brand) calc(l + 0.10) c calc(h - 70) / .7) 0px, transparent 55%),
    radial-gradient(at 55% 85% in oklch, oklch(from var(--brand) l c calc(h + 40) / .7) 0px, transparent 60%),
    oklch(from var(--brand) 0.18 0.04 h);

  --dur-1: 150ms; --dur-2: 280ms; --dur-3: 500ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bg-flat { background: var(--grad-flat); }
.bg-mesh { position: relative; isolation: isolate; overflow: hidden; }
.bg-mesh::before {
  content: ""; position: absolute; inset: -20%; z-index: -1;
  background: var(--grad-mesh); filter: blur(60px);
}

/* Regel 9 (Torben, 07.09.2026): Kasten auf heller Fläche braucht Kontrast.
   Deckend weiss, Linie mit mindestens 1,30:1 gegen die Fläche, Schatten aus
   der Hausfarbe (kein Schwarz). Ein Schatten allein reicht nicht, halb-
   transparente Glaskästen gehören nur auf Fotos oder dunkle Flächen. */
.kasten {
  background-color: #fff;
  border: 1px solid oklch(from var(--brand) 0.80 0.03 h);
  box-shadow: 0 4px 16px -4px oklch(from var(--brand) 0.18 0.04 h / .10),
              0 1px 2px oklch(from var(--brand) 0.18 0.04 h / .06);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}

/* --- Ergaenzungen zum vorgegebenen Standard (gelten fuer alle Kunden) ------ */
:root{
  /* Zwei weitere benannte Kurven, damit im Stylesheet kein roher
     cubic-bezier-Wert mehr steht. */
  --ease-pop: cubic-bezier(.2, 1.4, .4, 1);   /* leichter Ueberschwinger */
  --ease-zug: cubic-bezier(.4, 0, .2, 1);     /* gleichmaessiges Ziehen */
  /* Grundtakt fuer Erzaehl-Animationen (mehrsekuendige Choreografien wie
     Kuppelkarte oder Ablauf-Leitung). Deren Dauern und Verzoegerungen stehen
     als Vielfache davon. Kurze UI-Effekte bleiben auf --dur-1/2/3. */
  --dur-takt: 1s;
}

/* Fallback-Hinweis: .bg-flat/.bg-mesh nutzen die relative Farbsyntax
   oklch(from ...), die Safari erst ab 16.4 kennt. Damit auf aelteren Geraeten
   keine weisse Flaeche entsteht, bleibt die Grundfarbe als background-color
   stehen und der Verlauf liegt als background-image darueber. */
.bg-flat { background-color: var(--brand); background-image: var(--grad-flat); }
.bg-mesh::before { background-color: var(--brand); background-image: var(--grad-mesh); }