/* ============================================================================
   Glasmorph-Rezepte
   ----------------------------------------------------------------------------
   Eigene Datei, weil der Look bewusst austauschbar bleiben soll. Die Werte
   hier bestimmen, wie stark das Glas wirkt. Die Komponenten setzen nur die
   Klasse .glass und wissen nichts von Blur oder Transparenz.

   Stellschrauben, von oben nach unten in der Wirkung:
     --glass-blur         Unschärfe des Hintergrunds. 0px schaltet den Effekt aus.
     --glass-saturate     Farbsättigung dahinter. Über 100% wirkt es lebendiger.
     --glass-tint         Eigenfarbe der Scheibe. Mehr Alpha heißt milchiger.
     --glass-border       Kante. Macht die Scheibe überhaupt erst sichtbar.
     --glass-highlight    Lichtkante oben, der eigentliche Glaseindruck.
   ========================================================================= */

:root {
  --glass-blur: 24px;
  --glass-saturate: 165%;
  --glass-tint: rgba(255, 255, 255, 0.62);
  --glass-tint-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-highlight: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 18px 48px rgba(16, 18, 20, 0.18);
  --glass-radius: var(--radius-xl);
  /* Auf welchem Grund das Glas liegt. Ohne etwas dahinter gibt es nichts
     zu verwischen und der Effekt bliebe unsichtbar. */
  --glass-backdrop: linear-gradient(135deg,
    rgba(24, 104, 219, 0.16), rgba(191, 99, 243, 0.12) 55%, rgba(72, 36, 93, 0.10));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-tint: rgba(28, 31, 37, 0.62);
    --glass-tint-strong: rgba(28, 31, 37, 0.80);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-highlight: rgba(255, 255, 255, 0.22);
    --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    --glass-backdrop: linear-gradient(135deg,
      rgba(24, 104, 219, 0.22), rgba(191, 99, 243, 0.14) 55%, rgba(72, 36, 93, 0.18));
  }
}

:root[data-theme="dark"] {
  --glass-tint: rgba(28, 31, 37, 0.62);
  --glass-tint-strong: rgba(28, 31, 37, 0.80);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.22);
  --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.glass {
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  position: relative;
}

/* Lichtkante an der Oberkante. Ein Pixel hoher Verlauf, der die Scheibe
   plastisch macht. pointer-events aus, damit er keine Klicks abfängt. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--glass-radius) var(--glass-radius) 0 0;
  background: linear-gradient(90deg,
    transparent, var(--glass-highlight) 18%, var(--glass-highlight) 82%, transparent);
  pointer-events: none;
}

.glass--strong { background: var(--glass-tint-strong); }
.glass--flat { box-shadow: none; }

/* Wer den Effekt nicht unterstützt, bekommt eine deckende Fläche statt
   einer halbdurchsichtigen, auf der der Text nicht lesbar wäre. */
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: var(--surface-0); }
}

/* Systemweit reduzierte Bewegung respektieren. Der Blur bleibt, nur die
   Übergänge fallen weg. */
@media (prefers-reduced-motion: reduce) {
  .glass, .glass * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}