/* PL-FOTO — Tiefe & Licht
   Aufsatz über dem bestehenden System: mehr Glas, Neonlicht, Parallaxe.
   Bewusst als eigene Datei — eine Zeile im <head> entfernen stellt den
   vorherigen Stand wieder her. Hebt das Blur-Budget aus glass.css auf:
   hinter den Karten liegt jetzt tatsächlich Licht, das durchscheinen soll.

   Lichtquellen: Markengelb und ein Neonblau, abgeleitet aus dem Logo-Navy
   (#081D7B, Chroma hochgezogen). Keine dritte Farbe. */

:root {
  --neon-y: #D5EA04;
  --neon-y-rgb: 213 234 4;
  --neon-b: #4F6BFF;
  --neon-b-rgb: 79 107 255;

  --glow-y-sm: 0 0 12px rgb(var(--neon-y-rgb) / .45);
  --glow-y-md: 0 0 18px rgb(var(--neon-y-rgb) / .45), 0 0 48px rgb(var(--neon-y-rgb) / .22);
  --glow-y-lg: 0 0 24px rgb(var(--neon-y-rgb) / .60), 0 0 72px rgb(var(--neon-y-rgb) / .30);
  --glow-b-md: 0 0 18px rgb(var(--neon-b-rgb) / .45), 0 0 56px rgb(var(--neon-b-rgb) / .25);

  --glass-deep: rgb(11 14 24 / .55);
  --glass-sheen: linear-gradient(155deg, rgb(255 255 255 / .09) 0%, rgb(255 255 255 / .02) 38%, rgb(255 255 255 / 0) 60%);
  --glass-rim: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px rgb(255 255 255 / .05), inset 0 -1px 0 rgb(0 0 0 / .5);
}

/* ---------- Layer 0: Lichtfeld ----------
   Drei weiche Lichtquellen hinter allem. Sie wandern mit unterschiedlicher
   Geschwindigkeit (--sy aus depth.js) — das erzeugt die Raumtiefe. */
.depth-light {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.depth-light .orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.orb--y {
  inline-size: 58vmax; block-size: 58vmax;
  inset-block-start: 38%; inset-inline-end: -18vmax;
  background: radial-gradient(closest-side, rgb(var(--neon-y-rgb) / .16), rgb(var(--neon-y-rgb) / .05) 55%, transparent);
  transform: translate3d(0, calc(var(--sy, 0) * -0.12px), 0);
}
.orb--b {
  inline-size: 70vmax; block-size: 70vmax;
  inset-block-start: -22vmax; inset-inline-start: -24vmax;
  background: radial-gradient(closest-side, rgb(var(--neon-b-rgb) / .26), rgb(var(--neon-b-rgb) / .08) 55%, transparent);
  transform: translate3d(0, calc(var(--sy, 0) * -0.05px), 0);
}
.orb--b2 {
  inline-size: 46vmax; block-size: 46vmax;
  inset-block-start: 110%; inset-inline-start: 18%;
  background: radial-gradient(closest-side, rgb(var(--neon-b-rgb) / .20), transparent 70%);
  transform: translate3d(0, calc(var(--sy, 0) * -0.22px), 0);
}

/* ---------- Kopfzeile: dichteres Glas, Neonkante ---------- */
.site-header[data-scrolled="true"] {
  background: rgb(11 14 24 / .5);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  border-block-end-color: transparent;
  box-shadow: var(--shadow-l2);
}
.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0; inset-block-end: -1px;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--neon-b-rgb) / .8) 25%, rgb(var(--neon-y-rgb) / .8) 75%, transparent);
  box-shadow: 0 0 12px rgb(var(--neon-b-rgb) / .5);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.site-header[data-scrolled="true"]::after { opacity: 1; }

/* ---------- Buttons: leuchtend ---------- */
.btn--accent {
  box-shadow: var(--glow-y-md);
  transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--accent:hover { box-shadow: var(--glow-y-lg); }
.btn--accent:active { box-shadow: var(--glow-y-sm); transform: translateY(1px); }

.btn--ghost {
  background: rgb(255 255 255 / .04);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
          backdrop-filter: blur(12px) saturate(150%);
  box-shadow: var(--glass-rim);
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn--ghost:hover { box-shadow: var(--glass-rim), var(--glow-y-sm), inset 0 0 14px rgb(var(--neon-y-rgb) / .12); }

/* ---------- Kicker-Nummern glimmen ---------- */
.kicker--numbered::before {
  color: var(--neon-y);
  text-shadow: var(--glow-y-sm);
}

/* ---------- Karten: echtes Glas mit Lichtfleck ----------
   --mx/--my: Zeigerposition, --rx/--ry: Neigung (beides aus depth.js). */
.card.glass-flat {
  background: var(--glass-sheen), var(--glass-deep);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  border-color: rgb(255 255 255 / .10);
  box-shadow: var(--glass-rim), var(--shadow-l2);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 400ms var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.card.glass-flat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / .10), rgb(var(--neon-y-rgb) / .06) 35%, transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.card.glass-flat:hover {
  border-color: rgb(var(--neon-y-rgb) / .55);
  box-shadow: var(--glass-rim), var(--shadow-l3), 0 0 32px rgb(var(--neon-y-rgb) / .16);
  transition: transform 120ms linear, box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.card.glass-flat:hover::before { opacity: 1; }

/* Innere Parallaxe: das Bild ist etwas größer als sein Rahmen und gleitet. */
.card__media img {
  transform: translate3d(0, calc(var(--p, 0) * 1px), 0) scale(var(--s, 1.14));
}
.card:hover .card__media img { --s: 1.19; transform: translate3d(0, calc(var(--p, 0) * 1px), 0) scale(var(--s)); }
.card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgb(11 14 24 / .55));
  pointer-events: none;
}

/* ---------- Galerie: Neonrahmen beim Hover ---------- */
.gallery__btn { transition: box-shadow var(--dur-base) var(--ease-out); }
.gallery__btn:hover, .gallery__btn:focus-visible {
  box-shadow: inset 0 0 0 1px rgb(var(--neon-y-rgb) / .7), 0 0 28px rgb(var(--neon-y-rgb) / .22), var(--shadow-l2);
}

/* ---------- Seitenköpfe: Bild gleitet im Rahmen ---------- */
.page-head__media { overflow: hidden; }
.page-head--media .page-head__media img {
  transform: translate3d(0, calc(var(--p, 0) * 1px), 0) scale(1.12);
  will-change: transform;
}

/* ---------- Hero: Text liegt eine Ebene weiter vorn ---------- */
.hero__inner {
  transform: translate3d(0, calc(var(--p, 0) * 1px), 0);
  will-change: transform;
}
.hero__facts {
  border-block-start-color: transparent;
  border-image: linear-gradient(90deg, rgb(var(--neon-y-rgb) / .8), rgb(var(--neon-b-rgb) / .6) 50%, transparent) 1;
}

/* ---------- CTA: Glasplatte mit Licht dahinter ---------- */
.cta {
  position: relative;
  isolation: isolate;
  padding: var(--space-12);
  background: var(--glass-sheen), var(--glass-deep);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
          backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgb(255 255 255 / .10);
  box-shadow: var(--glass-rim), var(--shadow-l3);
}
.cta::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  inline-size: 60%; aspect-ratio: 1;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--neon-b-rgb) / .35), transparent);
  pointer-events: none;
}

/* ---------- Fußzeile: Neonkante oben ---------- */
.site-footer {
  position: relative;
  border-block-start-color: transparent;
  background: linear-gradient(180deg, rgb(11 14 24 / .2), rgb(11 14 24 / .8));
}
.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0; inset-block-start: -1px;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--neon-b-rgb) / .7), rgb(var(--neon-y-rgb) / .7), transparent);
  box-shadow: 0 0 16px rgb(var(--neon-b-rgb) / .45);
}

/* ---------- Ohne Blur: deckend statt durchsichtig ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card.glass-flat, .cta { background: var(--glass-solid-2); }
}

/* ---------- Reduzierte Bewegung: Licht bleibt, Bewegung nicht ---------- */
@media (prefers-reduced-motion: reduce) {
  .depth-light .orb, .hero__inner, .card.glass-flat,
  .page-head--media .page-head__media img { transform: none !important; }
  .card__media img, .card:hover .card__media img { transform: scale(1.02); }
}