/* ARO — Style-Harmonisierung Landing ↔ Unterseiten
   Lädt nach site.css. Stellt Helper-Klassen bereit, die das Look-and-Feel
   der Landingpage auf alle Unterseiten projizieren.
*/

/* ── 1. Dunkler Bereich: Gitternetz wie Landing ──────────────────────────── */
.aro-dark-grid {
  position: relative;
  background: #000;
}
.aro-dark-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(oklch(0.28 0 0 / .55) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.28 0 0 / .55) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 95%);
  z-index: 0;
}
.aro-dark-grid > * { position: relative; z-index: 1; }

/* Variante: dezenter (für Sektionen, in denen das Gitter nicht stören soll) */
.aro-dark-grid--soft::before {
  background-image:
    linear-gradient(oklch(0.28 0 0 / .35) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.28 0 0 / .35) 1px, transparent 1px);
}

/* ── 2. Helle Sektion mit Hintergrund-Grafik (circuit-bg) ────────────────── */
.aro-light-circuit {
  position: relative;
  background: oklch(0.965 0.008 242);
  color: oklch(0.14 0.02 242);
  overflow: hidden;
}
.aro-light-circuit::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../uploads/circuit-bg.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.aro-light-circuit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, oklch(0.965 0.008 242 / .55) 75%);
  pointer-events: none;
  z-index: 0;
}
.aro-light-circuit > * { position: relative; z-index: 1; }

/* ── 3. Helle Sektion mit Farb-Blobs (türkis + lila) ─────────────────────── */
.aro-light-blob {
  position: relative;
  background: oklch(0.965 0.008 242);
  color: oklch(0.14 0.02 242);
  overflow: hidden;
}
.aro-light-blob::before {
  content: '';
  position: absolute;
  top: -120px; left: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, oklch(0.74 0.19 185 / .14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}
.aro-light-blob::after {
  content: '';
  position: absolute;
  bottom: -120px; right: -120px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, oklch(0.72 0.18 298 / .12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}
.aro-light-blob > * { position: relative; z-index: 1; }

/* Combo: circuit + blob (für Hero-ähnliche Light-Sektionen) */
.aro-light-circuit.aro-light-blob::before {
  /* circuit-bg behält Vorrang über blob – pseudo-element-Konflikt vermeiden */
}

/* ── 4. Karten-Hover wie Landing ─────────────────────────────────────────── */
.aro-card {
  position: relative;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;
  will-change: transform;
}
@media (hover: hover) {
  .aro-card:hover {
    transform: translateY(-3px);
    border-color: oklch(0.72 0.18 298 / .7) !important;
    box-shadow: 0 8px 24px oklch(0.74 0.19 185 / .18);
  }
}
.aro-card:focus-within {
  outline: 2px solid oklch(0.72 0.18 298 / .55);
  outline-offset: 3px;
}

/* Variante: Hover-Akzent in türkis statt lila */
@media (hover: hover) {
  .aro-card--teal:hover {
    border-color: oklch(0.74 0.19 185 / .7) !important;
    box-shadow: 0 8px 24px oklch(0.72 0.18 298 / .18);
  }
}

/* ── 5. Trennlinie wie Landing (3-Farben-Gradient) ───────────────────────── */
.aro-divider-grad {
  height: 2px;
  background: linear-gradient(90deg, oklch(0.35 0.22 298), oklch(0.74 0.19 185), oklch(0.74 0.19 240));
  opacity: .55;
  border: 0;
}

/* ── 6. Subtiler Akzent-Border-Top für helle Karten ──────────────────────── */
.aro-accent-top {
  position: relative;
}
.aro-accent-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, oklch(0.74 0.19 185), oklch(0.72 0.18 298), transparent);
  opacity: 0;
  transition: opacity .3s;
}
@media (hover: hover) {
  .aro-accent-top:hover::before { opacity: 1; }
}

/* ── 7. Link-Hover-Akzent (für Inline-Links in hellen Sektionen) ─────────── */
.aro-link-accent {
  color: oklch(0.55 0.18 298);
  text-decoration: underline;
  text-decoration-color: oklch(0.55 0.18 298 / .35);
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
.aro-link-accent:hover,
.aro-link-accent:focus {
  color: oklch(0.45 0.20 298);
  text-decoration-color: oklch(0.45 0.20 298 / .9);
}

/* ── 8. AUTO-APPLY: Grid auf alle .grid-bg Sektionen verstärken ──────────── */
/* Stand: Landing nutzt .grid-bg auf hero. Unterseiten haben es teils auch.
   Wir lassen das bestehen; .aro-dark-grid ist für „nackte schwarze" Sektionen. */

/* ── 9. AUTO-APPLY: Helle Sektionen ohne BG-Grafik ───────────────────────── */
/* Pattern: <section class="sec sec--light"> oder
            <section class="sec" style="background:oklch(0.965 0.008 242)…"> */

/* sec--light: dezente Farb-Blobs hinzufügen (nicht überall, sonst zu viel) */
.sec--light:not(.sec--no-fx) {
  position: relative;
  overflow: hidden;
}
.sec--light:not(.sec--no-fx)::after {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, oklch(0.74 0.19 185 / .10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}
.sec--light:not(.sec--no-fx) > * { position: relative; z-index: 1; }

/* Variante: zweiter Blob unten links — über zusätzliche Klasse */
.sec--light.sec--blobs-2 {
  background-image:
    radial-gradient(circle at 100% 0%, oklch(0.74 0.19 185 / .08) 0%, transparent 30%),
    radial-gradient(circle at 0% 100%, oklch(0.72 0.18 298 / .07) 0%, transparent 30%);
}

/* ── 10. AUTO-APPLY: Karten-Hover für typische Karten-Patterns ───────────── */
/* Wir greifen auf häufige Karten-Klassen zu (pkg, card, srv-card etc.).
   Hover-Effekt aktivieren wir nur, wenn nicht bereits inline gesetzt. */
@media (hover: hover) {
  .pkg:not([data-no-hover]):hover,
  .srv-card:not([data-no-hover]):hover,
  .standard-card:not([data-no-hover]):hover,
  .case-card:not([data-no-hover]):hover,
  .faq-item:not([data-no-hover]):hover {
    border-color: oklch(0.72 0.18 298 / .55) !important;
    box-shadow: 0 8px 24px oklch(0.74 0.19 185 / .14);
    transform: translateY(-2px);
  }
}
.pkg, .srv-card, .standard-card, .case-card, .faq-item {
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

/* ── 11. AUTO-APPLY: schwarze Sektionen → leichtes Gitternetz ────────────── */
/* Triggert auf Sektionen mit style="…background:var(--bg)…" oder
   class .hero-bess (BESS-spezifisch) oder Kombi mit .sec ohne explizite Klasse. */
section[style*="background:var(--bg)"]:not([data-no-grid]),
section[style*="background: var(--bg)"]:not([data-no-grid]),
section.hero-bess:not(.grid-bg):not([data-no-grid]) {
  position: relative;
  overflow: hidden;
}
section[style*="background:var(--bg)"]:not([data-no-grid])::before,
section[style*="background: var(--bg)"]:not([data-no-grid])::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(oklch(0.28 0 0 / .35) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.28 0 0 / .35) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 95%);
  z-index: 0;
}
section[style*="background:var(--bg)"]:not([data-no-grid]) > *,
section[style*="background: var(--bg)"]:not([data-no-grid]) > * {
  position: relative;
  z-index: 1;
}

/* ── 12. AUTO-APPLY: helle Sektionen mit inline-style → Blobs ───────────── */
section[style*="background:oklch(0.965"]:not([data-no-fx]),
section[style*="background: oklch(0.965"]:not([data-no-fx]) {
  position: relative;
  overflow: hidden;
}
section[style*="background:oklch(0.965"]:not([data-no-fx])::after,
section[style*="background: oklch(0.965"]:not([data-no-fx])::after {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, oklch(0.74 0.19 185 / .10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}
section[style*="background:oklch(0.965"]:not([data-no-fx]) > *,
section[style*="background: oklch(0.965"]:not([data-no-fx]) > * {
  position: relative;
  z-index: 1;
}

/* ── 13. Klassenbasierte Targets (für interne <style>-Defs) ──────────────── */
/* Helle Sektionen mit eigenen Klassen */
.pakete:not([data-no-fx]),
.standards:not([data-no-fx]),
.services-light:not([data-no-fx]) {
  position: relative;
  overflow: hidden;
}
.pakete:not([data-no-fx])::after,
.standards:not([data-no-fx])::after,
.services-light:not([data-no-fx])::after {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, oklch(0.74 0.19 185 / .10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}
.pakete:not([data-no-fx]) > *,
.standards:not([data-no-fx]) > *,
.services-light:not([data-no-fx]) > * {
  position: relative;
  z-index: 1;
}

/* Dunkle Sektionen mit eigenen Klassen → Gitternetz */
.defects:not([data-no-grid]),
.risks:not([data-no-grid]),
.proc-tiles:not([data-no-grid]),
.usecases:not([data-no-grid]),
.faq:not([data-no-grid]),
.process:not([data-no-grid]) {
  position: relative;
  overflow: hidden;
}
.defects:not([data-no-grid])::before,
.risks:not([data-no-grid])::before,
.proc-tiles:not([data-no-grid])::before,
.usecases:not([data-no-grid])::before,
.faq:not([data-no-grid])::before,
.process:not([data-no-grid])::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(oklch(0.28 0 0 / .35) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.28 0 0 / .35) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 95%);
  z-index: 0;
}
.defects:not([data-no-grid]) > *,
.risks:not([data-no-grid]) > *,
.proc-tiles:not([data-no-grid]) > *,
.usecases:not([data-no-grid]) > *,
.faq:not([data-no-grid]) > *,
.process:not([data-no-grid]) > * {
  position: relative;
  z-index: 1;
}