/* ══════════════════════════════════════════════════════════════════════════════════════════
   4LIFE — HELLES PREMIUM-LIFESTYLE-THEME (Owner 2026-08-05: „viel heller, nicht Nacht, viel
   schöner, nicht billig"). Lädt NACH site.css + gta.css und dreht die dunkle Crime-Noir-Optik
   auf einen hellen, sonnigen, hochwertigen Look. Konzept 4Life = Lifestyle / echtes Leben.
   Scope: body.site.gta.fourlife  (fivemSite). Überschreibt gta.css (mit !important, wo nötig).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Helle Canvas + Grain aus ───────────────────────────────────────────────────────────── */
body.site.gta.fourlife{
  --primary:   #ff5a3c;   /* warmes Korall-Rot — 4Life-Energie, passt zur Sonne */
  --accent:    #2b8fff;   /* Himmelblau */
  --secondary: #131a2b;   /* dunkle Tinte */
  --sun:       #ffb020;   /* Gold */
  --sky:       #2b8fff;
  --coral:     #ff7a52;
  --bg:        #eef2f8;
  --surface:   #ffffff;
  --card:      #ffffff;
  --fg:        #131a2b;
  --muted:     #5c6a83;
  --line:      rgba(19,26,43,.10);
  --primary-fg:#ffffff;
  --glow:      rgba(255,90,60,.35);
  --sun-glow:  rgba(255,176,32,.40);
  background:
    radial-gradient(1200px 720px at 82% -12%, rgba(43,143,255,.12), transparent 60%),
    radial-gradient(1000px 640px at 0% 6%, rgba(255,176,32,.12), transparent 55%),
    linear-gradient(180deg, #f7faff 0%, #eef2f8 55%, #e7edf6 100%) !important;
  background-attachment: fixed !important;
  color: var(--fg) !important;
}
/* Film-Grain (Crime-Noir) komplett aus — der helle Look soll clean sein. */
body.site.gta.fourlife::after{ display:none !important; }
.fourlife ::selection{ background: rgba(255,90,60,.85); color:#fff; }

/* ── 2 · Nav: helles Glas ───────────────────────────────────────────────────────────────────── */
.fourlife .site-nav.scrolled{
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  box-shadow: 0 12px 30px -20px rgba(19,26,43,.35) !important;
}
.fourlife .site-nav::after{
  background: linear-gradient(90deg, transparent, #ff5a3c 10%, rgba(255,90,60,.5) 22%,
    rgba(19,26,43,.12) 50%, transparent 100%) !important;
}
.fourlife .site-nav::before{ background: radial-gradient(60% 100% at 32% 0%, rgba(255,90,60,.25), transparent 70%) !important; }
/* Nav über hellem Foto (nicht gescrollt): kräftig + weißer Halo für Lesbarkeit. Gescrollt: dunkel auf Weiß. */
.fourlife .nav-link{ color:#fff !important; text-shadow:0 1px 6px rgba(8,14,26,.6) !important; }
.fourlife .site-nav.scrolled .nav-link{ color: rgba(19,26,43,.74) !important; text-shadow:none !important; }
.fourlife .nav-link:hover{ color:#fff !important; }
.fourlife .site-nav.scrolled .nav-link:hover{ color:#0c1220 !important; }
.fourlife .gta-wordmark{ color:#fff !important; text-shadow:0 2px 10px rgba(8,14,26,.6) !important; }
.fourlife .site-nav.scrolled .gta-wordmark{ color:#131a2b !important; text-shadow:none !important; }
.fourlife .site-nav.scrolled .nav-brand-tag{ color:#ff5a3c !important; }
.fourlife .nav-brand-tag{
  color:#ff5a3c !important; background: rgba(255,90,60,.10) !important;
  border-color: rgba(255,90,60,.36) !important; box-shadow:none !important;
}
.fourlife .nav-brand .gta-wordmark{ color:#fff !important; text-shadow:0 2px 10px rgba(8,14,26,.6) !important; }
.fourlife .site-nav.scrolled .nav-brand .gta-wordmark{ color:#131a2b !important; text-shadow:none !important; }
/* Mobile-Dropdown hell */
@media (max-width:900px){ .fourlife .nav-links{ background: rgba(255,255,255,.97) !important; border-color:var(--line) !important; box-shadow:0 24px 54px -20px rgba(19,26,43,.35) !important; }
  .fourlife .nav-links .nav-link{ color:#131a2b !important; } }

/* ── 3 · BUTTONS: clean & premium (kein Winkel-HUD mehr, runde weiche Pills) ─────────────────── */
.fourlife .btn, .fourlife .nav-cta{
  clip-path: none !important; border-radius: 14px !important; overflow: visible !important;
  letter-spacing: .04em !important; text-transform: none !important;
  font-family: inherit !important; font-weight: 800 !important;
  box-shadow: none !important;
}
.fourlife .btn::before, .fourlife .nav-cta::before,
.fourlife .btn::after,  .fourlife .nav-cta::after{ display:none !important; }
.fourlife .btn-lg{ padding: 17px 34px !important; font-size: 1.02rem !important; }
/* Primär = warmes Korall-Gold (CTA „Jetzt spielen/beitreten") */
.fourlife .btn-primary, .fourlife .nav-cta{
  background: linear-gradient(135deg, #ff8a4c 0%, #ff5a3c 55%, #ff4d5e 100%) !important;
  color:#fff !important;
  box-shadow: 0 14px 30px -12px rgba(255,90,60,.6), 0 2px 6px rgba(19,26,43,.12) !important;
  filter:none !important; animation:none !important;
}
.fourlife .btn-primary:hover, .fourlife .nav-cta:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 42px -12px rgba(255,90,60,.7), 0 3px 8px rgba(19,26,43,.14) !important;
  filter: brightness(1.03) !important;
}
/* Control-Panel-Button = klares Blau */
.fourlife .btn-panel{
  background: linear-gradient(135deg, #4aa8ff 0%, #1f86ec 100%) !important;
  color:#fff !important; box-shadow: 0 14px 30px -12px rgba(31,134,236,.55), 0 2px 6px rgba(19,26,43,.12) !important;
}
.fourlife .btn-panel:hover{ transform:translateY(-2px) !important; box-shadow:0 22px 42px -12px rgba(31,134,236,.65) !important; filter:brightness(1.04) !important; }
/* Store-Button = warmes Gold */
.fourlife .btn-store{
  background: linear-gradient(135deg, #ffcf6a 0%, #f6a51f 100%) !important;
  color:#3a2600 !important; box-shadow: 0 14px 30px -12px rgba(246,165,31,.55), 0 2px 6px rgba(19,26,43,.12) !important;
}
.fourlife .btn-store:hover{ transform:translateY(-2px) !important; box-shadow:0 22px 42px -12px rgba(246,165,31,.65) !important; filter:brightness(1.04) !important; }
/* Glass = weiß mit Rand (dunkle Schrift) */
.fourlife .btn-glass{
  background: rgba(255,255,255,.9) !important; color:#131a2b !important;
  box-shadow: inset 0 0 0 1.5px rgba(19,26,43,.14), 0 10px 24px -14px rgba(19,26,43,.3) !important;
}
.fourlife .btn-glass:hover{ transform:translateY(-2px) !important; background:#fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,90,60,.5), 0 14px 30px -14px rgba(19,26,43,.34) !important; }
.fourlife .btn .bi{ filter:none !important; }
/* Nav-Schnellzugriff-Pills passend */
.fourlife .nqb-panel{ background: linear-gradient(135deg,#4aa8ff,#1f86ec) !important; box-shadow:0 8px 20px -8px rgba(31,134,236,.6) !important; }
.fourlife .nqb-store{ background: linear-gradient(135deg,#ffcf6a,#f2a01c) !important; color:#3a2600 !important; box-shadow:0 8px 20px -8px rgba(246,165,31,.6) !important; }

/* ── 4 · HERO: hell & sonnig, ohne Blinker-Auto/Burnout ─────────────────────────────────────── */
/* Das Auto fährt schon im Bild → das gebastelte CSS-Auto + Warnblinker + Reifenqualm RAUS. */
.fourlife .gta-carstage, .fourlife .gta-car, .fourlife .gta-hazard, .fourlife .gta-burnout,
.fourlife .hero-lights{ display:none !important; }
.fourlife .hero-bg{ filter: saturate(1.05) contrast(1.02) brightness(1.0) !important; animation:none !important; }
/* Der Hero-Text sitzt LINKS (das CSS-Auto ist raus) → Scrim links abdunkeln, rechts sonnig lassen. */
.fourlife .hero-scrim{
  background:
    linear-gradient(90deg, rgba(10,16,28,.66) 0%, rgba(10,16,28,.42) 34%, rgba(10,16,28,.10) 60%, rgba(10,16,28,0) 78%),
    linear-gradient(180deg, rgba(10,16,28,.30) 0%, rgba(10,16,28,0) 24%, rgba(10,16,28,0) 68%, rgba(10,16,28,.34) 100%) !important;
}
.fourlife .hero-scrim::after{ display:none !important; }
.fourlife .hero.gta-split::before, .fourlife .hero.gta-split::after{ display:none !important; } /* Letterbox weg */
.fourlife .hero.gta-split{ grid-template-columns: 1.05fr 1fr !important; }
/* Hero rechts: Text bleibt hell über dem hellen Bild → kräftiger Schatten für Lesbarkeit */
.fourlife .hero.gta-split .hero-content{ text-align:left; }
.fourlife .hero-title .word{ color:#fff !important; text-shadow:0 2px 12px rgba(8,14,26,.55), 0 1px 2px rgba(8,14,26,.6) !important; }
.fourlife .hero-title .line.accent .word{ color:#ff6a4d !important; text-shadow:0 2px 14px rgba(8,14,26,.6), 0 0 30px rgba(255,90,60,.35) !important; }
.fourlife .hero-sub{ color:#fff !important; text-shadow:0 2px 14px rgba(8,14,26,.7) !important; }
.fourlife .eyebrow{ color:#fff !important; text-shadow:0 1px 8px rgba(8,14,26,.6) !important; }
.fourlife .scroll-cue{ color:#fff !important; }

/* ── 5 · Stats: helle Karten ───────────────────────────────────────────────────────────────── */
.fourlife .gta-stat strong{ color:#fff !important; text-shadow:0 2px 12px rgba(8,14,26,.6) !important; }
.fourlife .gta-stat span{ color: rgba(255,255,255,.9) !important; }

/* ── 6 · Sektions-Kopf & Fließtext auf hellem Grund ─────────────────────────────────────────── */
.fourlife .block-head h2, .fourlife .join-inner h2{
  -webkit-text-fill-color:#ff5233 !important; color:#ff5233 !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.5)) !important;
}
.fourlife .block-head p{ color:#3c4a63 !important; }
.fourlife .block-head .eyebrow{ color:#ff5a3c !important; text-shadow:none !important; }
.fourlife .whatis-point .wp-line, .fourlife .step p{ color:#3c4a63 !important; }
.fourlife .whatis-point .wp-label, .fourlife .step h3{ color:#131a2b !important; }

/* ── 7 · Panel-Feature-Band: helle Karten, dunkle Schrift ──────────────────────────────────── */
.fourlife .panel-feature{ background: linear-gradient(180deg,#ffffff,#f3f6fc) !important; }
.fourlife .panel-feature-bg{
  background:
    radial-gradient(1000px 420px at 82% -10%, rgba(43,143,255,.12), transparent 60%),
    radial-gradient(800px 380px at 8% 110%, rgba(255,176,32,.12), transparent 62%) !important;
}
.fourlife .panel-feature .block-head h2{ -webkit-text-fill-color:#1f86ec !important; color:#1f86ec !important; }
.fourlife .panel-feat-card{
  background:#fff !important; border:1px solid rgba(19,26,43,.10) !important;
  box-shadow: 0 18px 40px -26px rgba(19,26,43,.35), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.fourlife .panel-feat-card:hover{ border-color: rgba(31,134,236,.45) !important; box-shadow:0 26px 50px -26px rgba(31,134,236,.35) !important; }
.fourlife .panel-feat-card .pf-label{ color:#131a2b !important; }
.fourlife .panel-feat-card .pf-line{ color:#4a5872 !important; }
.fourlife .panel-feature-micro{ color:#5c6a83 !important; }

/* ── 8 · Steps: helle Karten ───────────────────────────────────────────────────────────────── */
.fourlife .step{ background:#fff !important; border:1px solid rgba(19,26,43,.10) !important; box-shadow:0 18px 40px -28px rgba(19,26,43,.35) !important; }
.fourlife .step-num{ color:#ff5a3c !important; }

/* ── 9 · Bild-Karten (Features/Turf/Galerie): Ränder aufhellen, Text bleibt weiß über Bild ──── */
.fourlife .feature-big.has-img, .fourlife .turf-card, .fourlife .gallery-shot{
  border:1px solid rgba(19,26,43,.10) !important;
  box-shadow: 0 24px 50px -30px rgba(19,26,43,.4) !important;
}
.fourlife .feature-big.has-img:hover, .fourlife .turf-card:hover{
  border-color: rgba(255,90,60,.5) !important;
  box-shadow: 0 34px 64px -30px rgba(255,90,60,.35) !important;
}

/* ── 10 · Sticky-CTA hell ──────────────────────────────────────────────────────────────────── */
.fourlife .sticky-cta-inner{ background: rgba(255,255,255,.94) !important; border:1px solid var(--line) !important; box-shadow:0 24px 54px -20px rgba(19,26,43,.4) !important; }
.fourlife .sticky-cta-text b{ color:#131a2b !important; }
.fourlife .sticky-cta-text span{ color:#5c6a83 !important; }

/* ── 11 · Footer hell ──────────────────────────────────────────────────────────────────────── */
.fourlife .site-footer{ background: transparent !important; border-top:1px solid var(--line) !important; }
.fourlife .site-footer, .fourlife .foot-note, .fourlife .site-footer a{ color:#4a5872 !important; }
.fourlife .site-footer a:hover{ color:#131a2b !important; }

/* Ambient-FX (Boden-Spur) auf dem hellen Grund dezent zurücknehmen */
.fourlife #ambientFx{ opacity:.18 !important; filter:saturate(.5) !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   RUNDE 2 (Owner 2026-08-05): Logo oben rechts im Hero + unten blurry GTA-Hintergrund statt
   flach weiß („dass ein bisschen mehr passiert"). Hero bleibt hell; darunter atmosphärisch.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Logo-Emblem in der freien Hero-Fläche oben rechts ──────────────────────────────────────── */
.fourlife .hero-brandmark{
  position:absolute; top:16%; right:5.5%; z-index:3; text-align:right; pointer-events:none;
}
.fourlife .hbm-word{
  font-family:"Oswald","Segoe UI",sans-serif; font-weight:800; line-height:.92;
  font-size:clamp(3rem,7vw,6.2rem); letter-spacing:-.01em; color:#fff;
  text-shadow:0 4px 22px rgba(8,14,26,.6), 0 2px 4px rgba(8,14,26,.6);
}
.fourlife .hbm-word .hbm-4{ color:#ff5a3c; text-shadow:0 4px 22px rgba(8,14,26,.5), 0 0 26px rgba(255,90,60,.5); }
.fourlife .hbm-tag{
  margin-top:.35em; font-family:"Oswald","Segoe UI",sans-serif; font-weight:700;
  font-size:clamp(.7rem,1.1vw,.95rem); letter-spacing:.34em; text-transform:uppercase;
  color:#fff; text-shadow:0 2px 10px rgba(8,14,26,.7);
}
@media (max-width:900px){ .fourlife .hero-brandmark{ display:none; } } /* Mobil trägt die Nav die Marke */

/* ── Blurry GTA-Backdrop hinter dem unteren Bereich (Hero-Bild deckt oben ab) ────────────────── */
body.site.gta.fourlife{ background:#0e1421 !important; }
body.site.gta.fourlife::before{
  content:"" !important; position:fixed !important; inset:-6% !important; z-index:-2 !important;
  display:block !important; pointer-events:none !important;
  background:url("/assets/img/gta-skyline.webp") center/cover no-repeat !important;
  filter:blur(32px) saturate(1.1) brightness(.6) !important; transform:scale(1.1) !important;
}
body.site.gta.fourlife::after{
  content:"" !important; position:fixed !important; inset:0 !important; z-index:-1 !important;
  display:block !important; pointer-events:none !important;
  background:linear-gradient(180deg, rgba(11,17,30,.42) 0%, rgba(11,17,30,.58) 55%, rgba(11,17,30,.66) 100%) !important;
}
/* Sektionen transparent → der Backdrop scheint durch (Join hat eigenes Bild, bleibt) */
.fourlife .block, .fourlife section.block, .fourlife .panel-feature,
.fourlife .features-block, .fourlife .turf-block, .fourlife .gallery-block,
.fourlife .steps-block, .fourlife .whatis{ background:transparent !important; }
.fourlife .panel-feature-bg{ opacity:.6 !important; }

/* Text auf dem dunklen Backdrop → hell */
.fourlife .block-head p, .fourlife .whatis-point .wp-line, .fourlife .step p,
.fourlife .panel-feature-micro{ color:#c9d3e3 !important; }
.fourlife .whatis-point .wp-label, .fourlife .step h3, .fourlife .panel-feat-card .pf-label{ color:#fff !important; }
.fourlife .block-head h2{ filter:drop-shadow(0 2px 10px rgba(0,0,0,.5)) !important; }
.fourlife .panel-feature .block-head h2{ -webkit-text-fill-color:#5cc0ff !important; color:#5cc0ff !important; }

/* Panel-/Step-Karten: Frosted-Glass statt weiß (premium auf dem Blur) */
.fourlife .panel-feat-card, .fourlife .step{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  backdrop-filter:blur(12px) saturate(1.15) !important;
  box-shadow:0 26px 54px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.fourlife .panel-feat-card:hover{ border-color:rgba(92,192,255,.55) !important; background:rgba(255,255,255,.12) !important; }
.fourlife .panel-feat-card .pf-line{ color:#c9d3e3 !important; }

/* Sticky-CTA + Footer auf dunklem Grund lesbar */
.fourlife .site-footer, .fourlife .foot-note, .fourlife .site-footer a{ color:#aab6cc !important; }
.fourlife .site-footer a:hover{ color:#fff !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   RUNDE 3 (Owner 2026-08-05): Join-Text lesbar + „FiveM for Enhanced" als Branding/Hyperlinks.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* Join-Sektion (dunkles Bild) — Text war dunkel (erbte --fg) → jetzt hell & lesbar */
.fourlife .join-inner p, .fourlife .join-micro{ color:#eaf0f8 !important; text-shadow:0 1px 8px rgba(0,0,0,.6) !important; }
.fourlife .join-inner .eyebrow{ color:#fff !important; text-shadow:0 1px 8px rgba(0,0,0,.5) !important; }
.fourlife .join-fivem-link{ color:#ffb08a !important; font-weight:800; text-decoration:underline; text-underline-offset:2px; }
.fourlife .join-fivem-link:hover{ color:#ffd0b8 !important; }

/* Hero-Branding: „Spielbar auf FiveM for Enhanced" als schöne Glas-Pille unter dem Titel */
.fourlife .hero-fivem{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  padding:10px 18px; border-radius:999px; text-decoration:none;
  background:rgba(10,16,28,.42); backdrop-filter:blur(8px) saturate(1.1);
  border:1px solid rgba(255,255,255,.30); color:#fff; font-weight:700; font-size:.98rem;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.7); white-space:nowrap;
  transition:transform .18s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.fourlife .hero-fivem:hover{ transform:translateY(-2px); background:rgba(10,16,28,.58);
  border-color:rgba(255,90,60,.75); box-shadow:0 16px 34px -16px rgba(255,90,60,.5); }
.fourlife .hero-fivem .hf-ico{ color:#ff6a4d; font-size:.85em; }
.fourlife .hero-fivem .hf-text b{ color:#fff; letter-spacing:.01em; }
.fourlife .hero-fivem .hf-arrow{ opacity:.85; transition:transform .18s; }
.fourlife .hero-fivem:hover .hf-arrow{ transform:translate(2px,-2px); opacity:1; }

/* Step-2-Download-Link (FiveM for Enhanced) */
.fourlife .step-fivem{
  display:inline-block; margin-top:12px; color:#5cc0ff; font-weight:800; font-size:.9rem;
  text-decoration:none; border-bottom:1px solid rgba(92,192,255,.5); padding-bottom:1px;
  transition:color .18s, border-color .18s;
}
.fourlife .step-fivem:hover{ color:#8fd3ff; border-color:#8fd3ff; }