/* ============================================================
   DripBack Accent-Glow Utilities (Welle 3)
   Dark-Professional Depth Layers — Utility-Klassen für erhabene
   Elemente, weiche Akzent-Scheine und Tiefenschatten.

   Alle Farben via var(--...) referenziert, kein Hardcode.
   Kontrast-Guarantees: Text bleibt auf --t-ink/--t-ink-2/--t-ink-3,
   Scheine sind Hintergrund-Elemente (pointer-events: none).

   Motion: prefers-reduced-motion respektiert (no transitions).
   ============================================================ */

/* --- .u-accent-glow: Weicher radialer Akzentschein als Sektions-Hintergrund ---
   Setzt einen subtilen, verwaschenen Kreis mit Akzentfarbe hinter eine Sektion.
   Ideal für Hero-Sektionen oder Premium-Module. pointer-events: none verhindert
   dass der Schein mit Clickables interferiert. */
.u-accent-glow {
  position: relative;
  background: var(--t-bg);
}

.u-accent-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(600px, 80vw);
  height: min(600px, 80vw);
  background: radial-gradient(circle, var(--t-accent-glow) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}

.u-accent-glow > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .u-accent-glow::before {
    animation: none;
  }
}

/* --- .u-accent-edge: 1px-Trennlinie mit Akzentanteil ---
   Subtile Grenze zwischen Sektionen oder als oberer/unterer Rahmen
   für erhabene Elemente. Akzent-Edge Farbe ist dunkel genug um auf
   dunklem Grund sichtbar zu sein. */
.u-accent-edge {
  border-top: 1px solid var(--t-accent-edge);
  border-bottom: 1px solid var(--t-accent-edge);
}

.u-accent-edge--top {
  border-top: 1px solid var(--t-accent-edge);
  border-bottom: none;
}

.u-accent-edge--bottom {
  border-bottom: 1px solid var(--t-accent-edge);
  border-top: none;
}

/* --- .u-elev-accent: Erhabene Fläche mit Akzent-Tiefenschatten ---
   Kombiniert einen subtilen Schatten (akzentiert) mit leichter
   Farbanhebung auf --t-elev, um eine Elevation zu signalisieren.
   Für Cards, Panels, CTAs die "über" der Seite zu schweben scheinen. */
.u-elev-accent {
  background: var(--t-elev);
  box-shadow: var(--shadow-accent);
  border-radius: 12px;
  padding: clamp(24px, 4vh, 48px);
}

/* Alternativ: tieferes Shadow ohne Radius (Flat Design) */
.u-elev-accent--flat {
  background: var(--t-elev);
  box-shadow: var(--shadow-depth);
  padding: clamp(24px, 4vh, 48px);
}

/* Keine Transitions in prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .u-elev-accent,
  .u-elev-accent--flat {
    transition: none;
  }
}