/* Weilandt IT-Dienstleistungen — Design-System V2 ("Wow-Konzept")
   Farben 1:1 aus operations/content/wordpress/reference/design-patterns.md,
   Petrol-Gewichtung nach Joergs Feedback vom 2026-09-18 verstaerkt. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-variable.woff2') format('woff2');
}

:root {
  --wv2-void: #03181b;
  --wv2-primary-dark: #041f24;
  --wv2-primary: #053239;
  --wv2-primary-light: #0a4a54;
  --wv2-accent: #f1ab18;
  --wv2-accent-dark: #c98e14;
  --wv2-accent-light: #f5c04a;
  --wv2-secondary-1: #e6f0f1;
  --wv2-text-dim: rgba(230, 240, 241, 0.62);
  --wv2-text-dimmer: rgba(230, 240, 241, 0.42);
  --wv2-border-glass: rgba(255, 255, 255, 0.09);
  --wv2-font-display: "Space Grotesk", "Inter", sans-serif;
  --wv2-font-body: "Inter", -apple-system, sans-serif;
  --wv2-max-width: 1320px;
}

/* Basis-Typografie ueberschreibt Twenty-Twenty-Four-Standardschrift.
   NUR auf V2-Seiten (body.wv2) — alle bisherigen Seiten bleiben unveraendert. */
body.wv2 {
  background: var(--wv2-void);
  color: #eef5f5;
  font-family: var(--wv2-font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.wv2 h1, body.wv2 h2, body.wv2 h3, body.wv2 h4 {
  font-family: var(--wv2-font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
body.wv2 a { color: inherit; text-decoration: none; }

/* ---------- Ambiente: Noise, Grid, Glow-Orbs, Petrol-Wash ---------- */

.wv2-noise-overlay {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wv2-bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(10,74,84,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,74,84,0.22) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 100%);
}
.wv2-petrol-wash {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(10,74,84,0.55) 0%, transparent 58%),
    linear-gradient(180deg, rgba(5,50,57,0.35) 0%, transparent 26%, transparent 74%, rgba(5,50,57,0.4) 100%);
}
.wv2-orb {
  position: fixed; z-index: 0; pointer-events: none; border-radius: 50%;
  filter: blur(90px); opacity: 0.5;
  animation: wv2-drift 26s ease-in-out infinite alternate;
}
.wv2-orb-1 { width: 560px; height: 560px; top: -180px; left: -120px; background: radial-gradient(circle, var(--wv2-accent) 0%, transparent 70%); }
.wv2-orb-2 { width: 620px; height: 620px; top: 40vh; right: -220px; background: radial-gradient(circle, var(--wv2-primary-light) 0%, transparent 70%); animation-delay: -8s; }
@keyframes wv2-drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(40px,-30px) scale(1.08); } }

.wv2-cursor-glow {
  position: fixed; z-index: 3; pointer-events: none;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(241,171,24,0.14) 0%, transparent 70%);
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
  will-change: transform;
}

.wv2-progress-rail { position: fixed; top: 0; left: 0; width: 3px; height: 100vh; z-index: 200; background: rgba(255,255,255,0.06); }
.wv2-progress-rail-fill { width: 100%; height: 0%; background: linear-gradient(180deg, var(--wv2-accent-light), var(--wv2-accent)); box-shadow: 0 0 16px rgba(241,171,24,0.7); }

/* ---------- Gemeinsame Bausteine (von mehreren Bloecken genutzt) ---------- */

.wv2-container { box-sizing: border-box; width: 100%; max-width: calc(var(--wv2-max-width) + 4.4rem); margin: 0 auto; padding: 0 2.2rem; position: relative; z-index: 2; }
.wv2-eyebrow-label { display: block; font-size: 0.84rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wv2-accent-light); margin-bottom: 1.2rem; }

.wv2-reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s ease, transform 0.9s ease; }
.wv2-reveal.is-visible { opacity: 1; transform: translateY(0); }

.wv2-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.03em; padding: 0.9rem 1.7rem; border-radius: 999px; border: none; cursor: pointer;
  text-decoration: none;
}
.wv2-btn-gold {
  background: linear-gradient(135deg, var(--wv2-accent-light), var(--wv2-accent) 65%);
  color: var(--wv2-primary-dark);
  box-shadow: 0 0 0 1px rgba(241,171,24,0.3), 0 12px 40px -10px rgba(241,171,24,0.65);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wv2-btn-gold:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(241,171,24,0.5), 0 20px 50px -8px rgba(241,171,24,0.85); }

/* Glass-Card-Basis — vom eigenstaendigen "Glass Card"-Block sowie von anderen
   Bloecken (Quick-Answer, Autoren-Box) als Grundlage per Klasse wiederverwendet */
.wv2-glass {
  background: linear-gradient(160deg, rgba(10,74,84,0.22), rgba(255,255,255,0.02));
  border: 1px solid var(--wv2-border-glass);
  backdrop-filter: blur(24px);
  border-radius: 22px;
}

@media (max-width: 900px) {
  .wv2-cursor-glow { display: none; }
}

/* Reduzierte Bewegung respektieren (Barrierefreiheit) */
@media (prefers-reduced-motion: reduce) {
  .wv2-orb { animation: none; }
  .wv2-reveal { opacity: 1; transform: none; transition: none; }
  .wv2-cursor-glow { display: none; }
}