/* liquid-glass.css: das eine Glas-Material von werefine.de (Startseite, en/, alle Unterseiten).
   Technik nach Apples Liquid Glass (WWDC25) in der Umsetzung fürs Web:
   - klarer, dunkel getönter Körper statt milchig weißer Fläche (Tönung unten, Blur klein, Sättigung leicht erhöht)
   - heller Rand mit Richtung: oben links und unten rechts fängt das Licht, die Seiten bleiben fast dunkel (inset-Schatten, kein Pseudo-Element)
   - Lichtbrechung am Rand: SVG feDisplacementMap als backdrop-filter, nur in Chromium am Rechner und nur auf wenigen Flächen
     (Kopfleiste, Antwortkarte), erzeugt von js/liquid-glass.js. Safari, Firefox und Touch behalten den dunklen Blur unten.
   Alle Werte stehen hier. Wer das Glas ändert, ändert es nur in diesem Block; Startseite (inline) und
   css/site-base.css, css/site-nav.css benutzen nur die --lg-* Variablen. */

:root {
  /* Körper: klar, getönt. Nie mehr als ein Hauch Weiß in der Fläche, sonst wird es Milchglas. */
  --lg-tint: rgba(9, 14, 21, .30);
  --lg-tint-nav: rgba(9, 14, 21, .50);
  --lg-tint-dense: rgba(9, 14, 21, .58);
  --lg-bloom: radial-gradient(130% 80% at 10% -25%, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 55%);
  --lg-sheen: linear-gradient(140deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, .03) 100%);
  --lg-fill: var(--lg-bloom), var(--lg-sheen), var(--lg-tint);
  --lg-fill-nav: var(--lg-bloom), var(--lg-sheen), var(--lg-tint-nav);
  --lg-fill-dense: var(--lg-bloom), var(--lg-sheen), var(--lg-tint-dense);
  /* Fläche in einer Glasfläche (Menü im Kopf): ein backdrop-filter in einem backdrop-filter sieht nichts dahinter, also fast deckend */
  --lg-fill-solid: var(--lg-bloom), var(--lg-sheen), rgba(9, 14, 21, .97);
  /* Ohne Blur (Safari alt, reduzierte Transparenz): dichte dunkle Fläche */
  --lg-fill-flat: linear-gradient(160deg, rgba(27, 36, 49, .97), rgba(13, 19, 27, .97));

  /* Blur: klein, dazu Sättigung. Der Hintergrund soll durchscheinen, nicht verschwimmen. */
  --lg-blur: blur(14px) saturate(165%) brightness(1.04);
  --lg-blur-sm: blur(8px) saturate(160%) brightness(1.04);
  --lg-blur-lg: blur(22px) saturate(170%) brightness(1.04);

  /* Kante und Rim: feine Linie, dazu das gerichtete Licht (oben links stark, unten rechts schwach) */
  --lg-edge: rgba(255, 255, 255, .10);
  --lg-edge-hover: rgba(255, 255, 255, .22);
  --lg-rim: inset 1px 1px 0 0 rgba(255, 255, 255, .50), inset -1px -1px 0 0 rgba(255, 255, 255, .20), inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0 22px -6px rgba(255, 255, 255, .06);
  --lg-rim-sm: inset 1px 1px 0 0 rgba(255, 255, 255, .42), inset -1px -1px 0 0 rgba(255, 255, 255, .16), inset 0 0 12px -5px rgba(255, 255, 255, .07);
  --lg-drop: 0 22px 48px -24px rgba(0, 0, 0, .72);
  --lg-drop-hover: 0 30px 60px -24px rgba(0, 0, 0, .78);
  --lg-drop-sm: 0 12px 26px -14px rgba(0, 0, 0, .6);

  --lg-text: #eef4fa;
}

@media (max-width: 768px) { :root { --lg-blur: blur(12px) saturate(165%) brightness(1.04); --lg-blur-lg: blur(16px) saturate(165%) brightness(1.04); } }

/* Bausteine für neue Flächen: class="lg", "lg-sm" (Pillen, Knöpfe), "lg-dense" (Textflächen) */
.lg, .lg-sm, .lg-dense {
  border: 1px solid var(--lg-edge);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
}
.lg { background: var(--lg-fill); box-shadow: var(--lg-rim), var(--lg-drop); }
.lg-sm { background: var(--lg-fill); box-shadow: var(--lg-rim-sm), var(--lg-drop-sm); -webkit-backdrop-filter: var(--lg-blur-sm); backdrop-filter: var(--lg-blur-sm); }
.lg-dense { background: var(--lg-fill-dense); box-shadow: var(--lg-rim), var(--lg-drop); -webkit-backdrop-filter: var(--lg-blur-lg); backdrop-filter: var(--lg-blur-lg); }

/* Lichtbrechung: js/liquid-glass.js setzt data-lg-ready und --lg-bf (Blur, SVG-Filter, Sättigung) nur dort,
   wo sie läuft. Ohne Skript, ohne Chromium, ohne Maus oder bei reduzierter Transparenz bleibt es beim Blur oben. */
/* !important, weil die Flächen ihren eigenen Blur (Kopfleiste, FAQ-Karte) mit höherer Spezifität setzen */
html [data-lg-ready] { -webkit-backdrop-filter: var(--lg-bf) !important; backdrop-filter: var(--lg-bf) !important; }

/* Kein backdrop-filter möglich: dichte Fläche statt Glas */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --lg-fill: var(--lg-fill-flat); --lg-fill-nav: var(--lg-fill-flat); --lg-fill-dense: var(--lg-fill-flat); }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --lg-fill: var(--lg-fill-flat); --lg-fill-nav: var(--lg-fill-flat); --lg-fill-dense: var(--lg-fill-flat);
    --lg-blur: none; --lg-blur-sm: none; --lg-blur-lg: none;
  }
  html [data-lg-ready] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* Mehr Kontrast gewünscht: Rand deutlicher */
@media (prefers-contrast: more) {
  :root { --lg-edge: rgba(255, 255, 255, .34); --lg-edge-hover: rgba(255, 255, 255, .5); }
}