/* ============================================================
   Hintergrund "Grid Trace" — nur Startseite (.where-home)
   Ein lebendiges Tech-Grid hinter dem Content. Body behält --bg!
   Kein body-transparent-Trick (der legte Theme-Kanten frei).
   Grid-Vokabular 1:1 aus .hero::before (80px, --line-dim), damit es
   wie eine Fortsetzung des Hero-Grids wirkt.

   Der wandernde Akzent ist seit 2026-08-11 die DAKA-Bildmarke
   (.grid-mark) statt einer Farbwolke — siehe partials/grid-mark.html.twig.
   ============================================================ */

/* Der Layer sitzt fix im Viewport, HINTER dem Content.
   z-index:0 + der Content wird über eine eigene Ebene gehoben (siehe unten),
   damit garantiert alles drüber liegt — unabhängig davon, ob eine Sektion
   position:relative hat oder nicht. Body-Background (--bg) bleibt unberührt
   und malt ganz hinten; unser Layer liegt darüber, Content darüber. */
.where-home .grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* KEIN eigener Hintergrund — --bg vom body scheint durch */
}

/* Alles außer dem Layer auf eine höhere Ebene heben.
   .where-home > * betrifft die direkten Body-Kinder (nav, div.grid-bg, sections…).
   Der Layer selbst bleibt bei z-index:0, alle anderen bei >=1. */
/* .nav ist bewusst AUSGENOMMEN: sie ist in styles.css `position: fixed`, und
   diese Regel hat die hoehere Spezifitaet — sie hat die Nav also unbemerkt auf
   `relative` zurueckgesetzt und damit mitscrollen lassen, seit es den
   Grid-Layer gibt. Ohne die Ausnahme klebt das Menue nicht. */
.where-home > *:not(.grid-bg):not(.nav) { position: relative; z-index: 1; }
.where-home > .nav { z-index: 100; }   /* Nav bleibt ganz oben */

/* --- Das statische Grid (dezent, wie Hero) --- */
.where-home .grid-bg::before {
  content: '';
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(90deg, var(--line-dim) 1px, transparent 1px),
    linear-gradient(var(--line-dim) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.22;
  /* zum Rand hin ausblenden, damit es nie hart abschneidet */
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 85%);
}

/* --- Die wandernde Bildmarke ("Signal" am Grid) -----------------------------
   Uebernimmt die Rolle des frueheren .grid-glow. Das JS setzt aus dem
   Scroll-Fortschritt:
     --trace-x / --trace-y   Position (kreuz und quer, zwei Frequenzen)
     --mark-rot / --mark-scale   Drehung und Groesse
     --mark-op               Deckkraft (pulsiert)
     --mark-fill             Fuellgrad der Facetten (pulsiert versetzt)
   Die Transitions glaetten den Scroll, die CSS-Animation gibt eine langsame
   Eigenbewegung auch im Stillstand. */
.where-home .grid-bg .grid-mark {
  position: absolute;
  left: var(--trace-x, 50%);
  top: var(--trace-y, 30%);
  width: clamp(190px, 23vw, 430px);
  aspect-ratio: 30.85 / 26.72;
  transform: translate(-50%, -50%)
             rotate(var(--mark-rot, 0deg))
             scale(var(--mark-scale, 1));
  opacity: var(--mark-op, 0.5);
  will-change: left, top, transform, opacity;
  transition: top .35s cubic-bezier(.22,.61,.36,1),
              left .45s cubic-bezier(.22,.61,.36,1),
              transform .45s cubic-bezier(.22,.61,.36,1),
              opacity .5s linear;
  animation: gridGlowX 26s ease-in-out infinite;
}

/* Der eigentliche "Lichtschein" — bleibt erhalten, sitzt hinter der Marke,
   damit sie als Lichtquelle liest und nicht als aufgeklebtes Logo. */
.where-home .grid-bg .grid-mark::before {
  content: '';
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%,
              rgba(217,208,58,0.18) 0%,
              rgba(217,208,58,0.06) 36%,
              transparent 66%);
  filter: blur(30px);
}

.where-home .grid-bg .gm-svg {
  position: relative;
  width: 100%; height: 100%;
  overflow: visible;
  /* Die Streuung pulsiert mit: meist weich (die Marke liest als Licht),
     zwischendurch steht sie bei exakt 0 und wird gestochen scharf.
     Wert kommt vom JS (--mark-blur), Transition glaettet den Uebergang. */
  filter: blur(var(--mark-blur, 1.6px));
  transition: filter .5s cubic-bezier(.22,.61,.36,1);
}

/* Kontur immer da, Fuellung pulsiert. Die drei Facetten bekommen
   unterschiedliche Fuellstaerken — so bleibt die gefaltete Form der
   Marke auch im gefuellten Zustand lesbar. */
.where-home .grid-bg .gm-svg path {
  stroke: var(--accent);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  fill: var(--accent);
}
.where-home .grid-bg .gm-a { fill-opacity: calc(var(--mark-fill, 0) * 0.13); }
.where-home .grid-bg .gm-b { fill-opacity: calc(var(--mark-fill, 0) * 0.26); }
.where-home .grid-bg .gm-c { fill-opacity: calc(var(--mark-fill, 0) * 0.09); }

/* Ein zweiter, kleinerer kühler Glow als Gegengewicht (Tiefe) */
.where-home .grid-bg .grid-glow-2 {
  position: absolute;
  right: 14%; bottom: var(--trace-y2, 24%);
  width: 260px; height: 260px;
  transform: translate(50%, 50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(64,120,108,0.16) 0%,
              transparent 60%);
  filter: blur(30px);
  will-change: bottom;
  transition: bottom .4s cubic-bezier(.22,.61,.36,1);
}

/* Beim Scrollen "zeichnen" sich Grid-Linien: das Grid wird nach unten hin
   sichtbarer (Klasse .is-scrolling steuert Opazität leicht hoch — dezent). */
.where-home.is-scrolling .grid-bg::before { opacity: 0.30; }

@keyframes gridGlowX {
  0%,100% { margin-left: 0; }
  50%     { margin-left: 8vw; }
}

/* ---------------- Barrierefreiheit / Performance ---------------- */
@media (prefers-reduced-motion: reduce) {
  .where-home .grid-bg .grid-mark {
    animation: none !important;
    transition: none !important;
  }
  .where-home .grid-bg .grid-glow-2 { transition: none !important; }
}

/* Auf schmalen Screens: Grid feiner ausblenden, Marke kleiner/ruhiger */
@media (max-width: 720px) {
  .where-home .grid-bg::before { background-size: 48px 48px; opacity: 0.16; }
  .where-home .grid-bg .grid-mark { width: clamp(130px, 34vw, 200px); }
  .where-home .grid-bg .grid-glow-2 { display: none; }
}