/* ==========================================================
   Einheitlicher Look:
   - Seiten-Hintergrund = Farbe der "Innenrahmen/Surface" (wie deine Cards)
   - Alle Rahmen/Boxen bekommen denselben Innenrahmen-Look (gleiches Border + Inset)
   - Leichter Farbwechsel / Glow folgt Maus/Finger (über --mx/--my aus deinem JS)
   ----------------------------------------------------------
   Hinweis: Diese Datei ist als DROP-IN Ersatz gedacht für:
   assets/style_blue_bg_glowhover.css
   ========================================================== */

:root{
  /* Anlage 1: dunkel bis schwarz-blau */
  --bg: #020814;
  --bg-rgb: 2,8,20;

  --text:#ffffff;
  --muted: rgba(255,255,255,.78);

  /* Unified frame line + inner highlights */
  --line: rgba(255,255,255,.16);
  --lineStrong: rgba(255,255,255,.22);

  --frame: rgba(255,255,255,.16);
  --frameHi: rgba(255,255,255,.12);
  --frameLo: rgba(0,0,0,.58);

  /* Optional (if referenced elsewhere) */
  --surfaceA: rgba(4, 10, 24, .90);
  --surfaceB: rgba(4, 10, 24, .90);
  --surfaceSheen: linear-gradient(180deg, rgba(255,255,255,.040), rgba(0,0,0,.26));

  --shadow: 0 22px 70px rgba(0,0,0,.55);

  /* very subtle interaction glow */
  --glowRing: rgba(255,255,255,.10);
  --glowAura: rgba(109,183,255,.08);
}


/* Hintergrund: gleiche Grundfarbe + sehr dezente, cursor-geführte Lichtfläche */
html, body{
  background: var(--bg) !important;
}

body::before{
  background:
    radial-gradient(900px 520px at var(--mx, 22%) var(--my, 6%),
      rgba(109,183,255,.06), transparent 70%),
    radial-gradient(1000px 560px at calc(100% - var(--mx, 22%)) calc(var(--my, 10%) + 6%),
      rgba(90,224,181,.028), transparent 74%),
    linear-gradient(180deg,
      rgba(2, 8, 20, .995) 0%,
      rgba(0, 2, 8, .995) 55%,
      rgba(2, 6, 16, .995) 100%);
  filter: saturate(1.05) contrast(1.08);
}


/* Topbar an die neue Surface anpassen */
.topbar{
  background: rgba(var(--bg-rgb), .68) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}
.topbar.is-scrolled{
  background: rgba(var(--bg-rgb), .78) !important;
  border-bottom-color: rgba(255,255,255,.16) !important;
}

/* ==========================================================
   Einheitlicher Rahmen für ALLE Boxen/Frames
   ========================================================== */

.card,
.panel,
.feature,
.step,
.mini,
.download,
.pdfcard,
.servicecard,
.callout,
.faq details,
.contactcard,
.form,
.pdfmodal__panel,
.nav__dropmenu,
.roi,
.roi__field{
  border-color: var(--frame) !important;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 var(--frameHi),
    inset 0 -1px 0 var(--frameLo) !important;
}

/* Buttons & Pills ebenfalls identischer Rahmen */
.btn,
.pill,
.mobilemenu .btn{
  border-color: var(--frame) !important;
  box-shadow:
    0 16px 44px rgba(0,0,0,.26),
    inset 0 1px 0 var(--frameHi),
    inset 0 -1px 0 var(--frameLo) !important;
}

/* Nav Dropdown ebenfalls wie Panels (falls base zu dunkel) */
.nav__dropmenu{
  background: var(--surfaceSheen), rgba(var(--bg-rgb), .92) !important;
}

/* Inputs/Controls: bleibt leicht getrennt, aber optisch passend */
input, textarea, select,
.lockinput,
.fitfield select,
.roi__field input{
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(var(--bg-rgb), .38) !important;
  color: var(--text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.45) !important;
}

/* Focus: ruhig, aber klar */
input:focus, textarea:focus, select:focus{
  outline: none !important;
  border-color: rgba(255,255,255,.42) !important;
  box-shadow:
    0 0 0 1px var(--glowRing),
    0 0 18px var(--glowAura),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.45) !important;
}

/* Optional: ganz dezenter Hover, ohne "anderer Rahmen" Effekt */
@media (hover:hover){
  .card:hover, .panel:hover, .feature:hover, .step:hover, .mini:hover, .download:hover,
  .pdfcard:hover, .servicecard:hover, .callout:hover, .faq details:hover, .contactcard:hover,
  .form:hover, .pdfmodal__panel:hover, .nav__dropmenu:hover{
    box-shadow:
      var(--shadow),
      0 0 0 1px rgba(255,255,255,.06),
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(0,0,0,.48) !important;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  body::before{ transform:none !important; }
}


/* Ensure the base background is really the dark one */
html, body{
  background: var(--bg);
}
/* ==========================================================
   Glassy Hintergrund (frosted / leicht weiß)
   ========================================================== */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* "ein bisschen weiß" */
  background: linear-gradient(180deg,
    rgba(255,255,255,.055) 0%,
    rgba(255,255,255,.020) 60%,
    rgba(255,255,255,.030) 100%);

  /* Glas-Effekt */
  backdrop-filter: blur(14px) saturate(1.10);
  -webkit-backdrop-filter: blur(14px) saturate(1.10);
}
/* subtle white-lilac tint */
--tintLilac: 196, 168, 255;
--tintWhite: 255, 255, 255;