/* Tiefe & Licht – optionale Aufwertung.
   Entfernen: <link> auf depth.css in index.html löschen. */

:root {
  --shadow-sm: 0 1px 2px rgb(17 24 39 / .05), 0 2px 6px rgb(17 24 39 / .04);
  --shadow-lg: 0 1px 2px rgb(17 24 39 / .06), 0 12px 24px -8px rgb(17 24 39 / .14), 0 32px 64px -16px rgb(37 99 235 / .22);
  --shadow-hover: 0 2px 4px rgb(17 24 39 / .06), 0 16px 32px -10px rgb(17 24 39 / .16), 0 24px 48px -16px rgb(37 99 235 / .18);
}

/* Einstieg: weicher Lichtschein hinter den Produkten */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 900px; height: 700px; right: -220px; top: -120px;
  background: radial-gradient(closest-side, rgb(37 99 235 / .13), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 600px; height: 500px; right: 20%; bottom: -300px;
  background: radial-gradient(closest-side, rgb(14 165 233 / .08), transparent 70%);
}
.hero .wrap { position: relative; z-index: 1; }

/* Screenshots schweben */
.frame { box-shadow: var(--shadow-lg); border-color: rgb(17 24 39 / .08); }
.frame-bar { background: linear-gradient(#f8fafc, #eef2f7); }
@media (min-width: 901px) {
  .shots .frame:first-child { transform: perspective(1800px) rotateY(-5deg) rotateX(2deg); transform-origin: left center; }
}
.thumbs img { box-shadow: var(--shadow-sm); }

/* Hauptbutton: Verlauf + Lichtkante statt Glanz (Weißtext bleibt ≥ 5:1) */
.btn--primary {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 1px 2px rgb(17 24 39 / .12), 0 6px 16px -6px rgb(37 99 235 / .6);
}
.btn--primary:hover { background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%); }
.btn--ghost { background: var(--surface); box-shadow: var(--shadow-sm); }

/* Karten heben sich beim Überfahren */
.problem, .service, .creds, .figures li { box-shadow: var(--shadow-sm); }
.problem, .service { background: var(--surface); }

/* Kennzahlen-Band mit Tiefe */
.band {
  background:
    radial-gradient(600px 200px at 15% 0%, rgb(255 255 255 / .14), transparent 70%),
    linear-gradient(135deg, #2563eb 0%, #1d4ed8 60%, #1e40af 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12);
}

/* Kontaktkarte: feine Lichtkante oben */
.contact-card { box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 24px 48px -24px rgb(0 0 0 / .5); }
.contact .btn--primary { background: linear-gradient(180deg, #60a5fa, #3b82f6); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 6px 16px -6px rgb(59 130 246 / .6); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .problem, .service { transition: transform .18s ease, box-shadow .18s ease, background-color .15s, border-color .15s; }
  .btn--primary:hover { transform: translateY(-1px); }
  .problem:hover, .service:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
}