/* glass.css — Spatial / visionOS Glass-Layer, wird NACH styles.css geladen.
   Fügt einen ambienten Mesh-Hintergrund hinzu und verwandelt Flächen in
   Milchglas. Additiv: styles.css bleibt die Basis, glass.css überlagert. */

:root {
  --glass-blur: 30px;
  --glass-sat: 180%;
  --glass-bg: rgba(255,255,255,0.55);
  --glass-bg-2: rgba(255,255,255,0.40);
  --glass-brd: rgba(255,255,255,0.75);
  --glass-hi: rgba(255,255,255,0.9);
  --glass-shadow: 0 2px 8px rgba(20,20,40,0.06), 0 20px 50px -18px rgba(30,30,60,0.28);
  --mesh-1: #7C5CFF;
  --mesh-2: #2F74FF;
  --mesh-3: #FF6A2A;
  --mesh-4: #84D26C;
  --radius: 18px;
  --radius-lg: 30px;
  --radius-sm: 12px;
  --glow-op: 0;               /* flache Glows werden durch das Mesh ersetzt */
  /* Seitenhintergrund transparent halten, damit das fixe Mesh durchscheint */
  --bg: transparent;
}

html[data-theme="dark"] {
  --glass-bg: rgba(24,24,32,0.46);
  --glass-bg-2: rgba(22,22,30,0.34);
  --glass-brd: rgba(255,255,255,0.14);
  --glass-hi: rgba(255,255,255,0.22);
  --glass-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 26px 60px -18px rgba(0,0,0,0.72);
  --mesh-1: #8B6BFF;
  --mesh-2: #3E82FF;
  --mesh-3: #FF7B3D;
  --mesh-4: #86D06E;
  --bg: transparent;
}

/* ── Ambienter Spatial-Hintergrund (fixed, hinter allem) ─────────── */
html { background: #eef0f6; }
html[data-theme="dark"] { background: #06060a; }

body::before {
  content: "";
  position: fixed; inset: -20% -10% -10% -10%;
  z-index: -2; pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 14% 12%, color-mix(in oklab, var(--mesh-1) 62%, transparent), transparent 62%),
    radial-gradient(40vw 40vw at 88% 8%,  color-mix(in oklab, var(--mesh-2) 55%, transparent), transparent 60%),
    radial-gradient(46vw 46vw at 80% 82%, color-mix(in oklab, var(--mesh-3) 45%, transparent), transparent 62%),
    radial-gradient(44vw 44vw at 20% 88%, color-mix(in oklab, var(--mesh-4) 45%, transparent), transparent 62%);
  filter: saturate(140%);
  animation: meshDrift 26s ease-in-out infinite alternate;
}
html[data-theme="dark"] body::before { opacity: 0.5; }
html[data-theme="light"] body::before { opacity: 0.42; }

/* dezenter Frost-Schleier zur Vereinheitlichung */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background: radial-gradient(120vw 80vh at 50% -10%, transparent, color-mix(in oklab, var(--bg-2) 6%, transparent));
}

@keyframes meshDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ── Glas-Helfer ─────────────────────────────────────────────────── */
.nav,
.card,
.tag,
.icon-btn,
.field,
.btn-ghost,
.lang-switch,
.pillar-grid > article,
.svc-grid .card {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* Nav → schwebende Glas-Leiste */
.nav {
  background: var(--glass-bg) !important;
  border-bottom: 1px solid var(--glass-brd) !important;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 10px 30px -12px rgba(30,30,60,0.25);
}
html[data-theme="dark"] .nav { box-shadow: 0 1px 0 var(--glass-hi) inset, 0 14px 40px -14px rgba(0,0,0,0.6); }

/* Cards → milchige Panels mit hellem Rand */
.card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-brd) !important;
  box-shadow: var(--glass-shadow);
  position: relative;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--glass-hi), transparent 42%);
  opacity: 0.5; mix-blend-mode: screen;
}
html[data-theme="light"] .card::before { mix-blend-mode: normal; opacity: 0.6; }

/* Pillar-Cards (inline-styled) über Surface-Swap zu Glas */
.pillar-grid > article {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-brd) !important;
  box-shadow: var(--glass-shadow);
}

/* Surface-farbige Inline-Blöcke (Facts, Steps, Service-Listen, Terminals)
   nutzen var(--bg)/var(--surface); diese ebenfalls transluzent machen */
:root { --surface: var(--glass-bg); }
html[data-theme="dark"] { --surface: var(--glass-bg); }

/* Buttons */
.btn-ghost {
  background: var(--glass-bg-2) !important;
  border-color: var(--glass-brd) !important;
  box-shadow: 0 1px 0 var(--glass-hi) inset;
}
.btn-accent { box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--accent) 60%, transparent); }
.icon-btn {
  background: var(--glass-bg-2) !important;
  border-color: var(--glass-brd) !important;
}

/* Tags, Felder & Sprachumschalter */
.tag, .field, .lang-switch {
  background: var(--glass-bg-2) !important;
  border-color: var(--glass-brd) !important;
}

/* Eingaben/Terminals auf var(--bg-2)/(--bg-3): weicher machen */
html { --bg-2: color-mix(in oklab, #ffffff 42%, transparent); --bg-3: color-mix(in oklab, #ffffff 30%, transparent); }
html[data-theme="dark"] { --bg-2: color-mix(in oklab, #1a1a24 40%, transparent); --bg-3: color-mix(in oklab, #22222e 46%, transparent); }

/* Trennlinien auf Glas etwas heller */
.divider, .footer, .footer-bottom { border-color: var(--glass-brd) !important; }

/* Team-Rollen-Kacheln bekommen den Glas-Schatten */
.team-grid > .card { box-shadow: var(--glass-shadow); }

/* Hero-Mesh-Glows raus (globaler Backdrop übernimmt) */
.glow { display: none !important; }

/* ── Kontrast-Feinschliff ────────────────────────────────────────── */

/* Weisse / Ghost-Buttons: mehr Deckung, klarer Rand, echter Schatten */
.btn-ghost {
  background: color-mix(in oklab, #ffffff 74%, transparent) !important;
  border-color: var(--line-2) !important;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 6px 16px -8px rgba(30,30,60,0.35);
}
html[data-theme="dark"] .btn-ghost {
  background: color-mix(in oklab, #ffffff 12%, transparent) !important;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 8px 20px -10px rgba(0,0,0,0.6);
}

/* Eingabefelder: deckender Untergrund + dunklerer Rand für Lesbarkeit */
.field {
  background: color-mix(in oklab, #ffffff 80%, transparent) !important;
  border-color: var(--line-2) !important;
}
html[data-theme="dark"] .field {
  background: color-mix(in oklab, #12121a 58%, transparent) !important;
}

/* Formulare heben sich auf Weiss klar ab: deckender, Rand, kräftiger Schatten */
.form-glass {
  background: color-mix(in oklab, #ffffff 84%, transparent) !important;
  border-color: var(--line-2) !important;
  box-shadow: 0 2px 10px rgba(20,20,40,0.10), 0 28px 64px -20px rgba(30,30,60,0.42) !important;
}
html[data-theme="dark"] .form-glass {
  background: color-mix(in oklab, #1a1a24 66%, transparent) !important;
}

/* Grid-Boxen (Facts, Steps, Service-Listen, Pecugate-Fakten):
   frostige Zellen statt transparentem var(--bg) + Schatten um die ganze Box */
.grid-box {
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.grid-box > * {
  background: color-mix(in oklab, #ffffff 60%, transparent) !important;
}
html[data-theme="dark"] .grid-box > * {
  background: color-mix(in oklab, #1a1a24 52%, transparent) !important;
}

/* Pecugate-Screenshot: keine aufhellende Glaskante über dem Bild */
.pecu-shot::before { content: none !important; }

/* Mobile-Menü: deckende Glasfläche — ohne diese scheint der Seiteninhalt
   durch, weil --bg im Glass-Layer transparent ist. */
@media (max-width: 860px) {
  .nav-links.open {
    background: #f6f6f3 !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border-bottom: 1px solid var(--glass-brd) !important;
    box-shadow: 0 20px 44px -16px rgba(30,30,60,0.35);
  }
  html[data-theme="dark"] .nav-links.open {
    background: #101014 !important;
  }
}

/* Fallback ohne backdrop-filter: solide Flächen statt Glas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .card, .pillar-grid > article { background: var(--glass-bg) !important; }
}