@extends('layouts.app')

@section('content')
<style>
/* ===== Globale Chrome ausblenden ===== */
nav{display:none!important;} footer{display:none!important;} main{padding-top:0!important;}

/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ===== Variant 4: Aurora Glass ===== */
.v4-root{
  --v4-bg:#070b18;
  --v4-ink:#f5f7ff;
  --v4-ink-soft:rgba(229,233,255,0.68);
  --v4-glass:rgba(255,255,255,0.06);
  --v4-glass-border:rgba(255,255,255,0.14);
  --v4-glass-border-hover:rgba(255,255,255,0.28);
  --v4-grad:linear-gradient(90deg,#a855f7,#22d3ee);
  position:relative;
  min-height:100vh;
  background:var(--v4-bg);
  color:var(--v4-ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:1.0625rem;
  line-height:1.6;
  overflow-x:hidden;
  isolation:isolate;
}
.v4-root *{box-sizing:border-box;}

/* ===== Aurora-Hintergrund ===== */
.v4-aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;}
.v4-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.55;will-change:transform;}
.v4-blob.b1{width:42vw;height:42vw;left:-6vw;top:-8vw;
  background:radial-gradient(circle at 30% 30%,#a855f7,#6d28d9 60%,transparent 72%);
  animation:v4-drift1 34s ease-in-out infinite alternate;}
.v4-blob.b2{width:46vw;height:46vw;right:-10vw;top:4vw;
  background:radial-gradient(circle at 50% 50%,#22d3ee,#0ea5e9 60%,transparent 72%);
  animation:v4-drift2 40s ease-in-out infinite alternate;}
.v4-blob.b3{width:34vw;height:34vw;left:18vw;top:48vh;
  background:radial-gradient(circle at 50% 50%,#ec4899,#be185d 60%,transparent 72%);
  opacity:0.4;animation:v4-drift3 38s ease-in-out infinite alternate;}
.v4-blob.b4{width:40vw;height:40vw;right:6vw;bottom:-12vw;
  background:radial-gradient(circle at 50% 50%,#10b981,#047857 60%,transparent 72%);
  opacity:0.35;animation:v4-drift4 36s ease-in-out infinite alternate;}
@keyframes v4-drift1{from{transform:translate(0,0) scale(1);}to{transform:translate(8vw,6vh) scale(1.15);}}
@keyframes v4-drift2{from{transform:translate(0,0) scale(1.05);}to{transform:translate(-7vw,8vh) scale(0.9);}}
@keyframes v4-drift3{from{transform:translate(0,0) scale(1);}to{transform:translate(6vw,-7vh) scale(1.2);}}
@keyframes v4-drift4{from{transform:translate(0,0) scale(1.1);}to{transform:translate(-6vw,-5vh) scale(0.95);}}

/* Noise/Grain-Overlay */
.v4-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ===== Glas-Basis ===== */
.v4-glass{
  background:var(--v4-glass);
  border:1px solid var(--v4-glass-border);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 18px 50px rgba(0,0,0,0.35);
}

/* ===== Container ===== */
.v4-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem);}

/* ===== Nav-Pille ===== */
.v4-nav{position:sticky;top:14px;z-index:50;margin:14px auto 0;max-width:1180px;
  padding:0 clamp(1rem,4vw,2.5rem);}
.v4-nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .7rem .6rem 1.2rem;border-radius:999px;
  transition:backdrop-filter .3s ease,background .3s ease;
}
.v4-nav.scrolled .v4-nav-inner{
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  background:rgba(255,255,255,0.08);
}
.v4-brand{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-0.02em;
  font-size:1.05rem;color:var(--v4-ink);text-decoration:none;display:flex;align-items:center;gap:.55rem;}
.v4-brand .v4-dot{width:22px;height:22px;border-radius:50%;background:var(--v4-grad);
  box-shadow:0 0 14px rgba(168,85,247,0.6);}
.v4-nav-cta{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:600;
  font-size:.95rem;color:#070b18;padding:.55rem 1.15rem;border-radius:999px;
  background:var(--v4-grad);box-shadow:0 6px 20px rgba(34,211,238,0.3);
  transition:transform .2s ease,box-shadow .2s ease;
}
.v4-nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(34,211,238,0.45);}

/* ===== Hero ===== */
.v4-hero{text-align:center;padding:clamp(4rem,12vh,8rem) 0 clamp(2.5rem,6vh,4rem);}
.v4-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:500;
  color:var(--v4-ink-soft);padding:.4rem .9rem;border-radius:999px;margin-bottom:1.6rem;}
.v4-eyebrow i{color:#22d3ee;}
.v4-h1{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-0.03em;
  font-size:clamp(2.8rem,6vw,5.5rem);line-height:1.0;margin:0 0 1.2rem;}
.v4-h1 .v4-grad-text{background:var(--v4-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
.v4-sub{max-width:42rem;margin:0 auto 2.2rem;color:var(--v4-ink-soft);font-size:1.15rem;}
.v4-hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;}
.v4-btn{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:600;
  padding:.85rem 1.6rem;border-radius:999px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.v4-btn-primary{background:var(--v4-grad);color:#070b18;box-shadow:0 10px 30px rgba(168,85,247,0.35);}
.v4-btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(168,85,247,0.5);}
.v4-btn-ghost{color:var(--v4-ink);border:1px solid var(--v4-glass-border);background:var(--v4-glass);}
.v4-btn-ghost:hover{transform:translateY(-3px);border-color:var(--v4-glass-border-hover);}

/* ===== Kennzahlen-Leiste ===== */
.v4-stats{margin:0 auto clamp(3rem,8vh,5rem);border-radius:26px;
  display:grid;grid-template-columns:repeat(4,1fr);}
.v4-stat{padding:1.8rem 1.2rem;text-align:center;border-right:1px solid rgba(255,255,255,0.08);}
.v4-stat:last-child{border-right:none;}
.v4-stat-num{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(2rem,4vw,3.2rem);line-height:1;background:var(--v4-grad);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.v4-stat-label{margin-top:.45rem;font-size:.92rem;color:var(--v4-ink-soft);}

/* ===== Sektionen ===== */
.v4-section{padding:clamp(2rem,5vh,3.5rem) 0;}
.v4-h2{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-0.03em;
  font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.1;margin:0 0 .6rem;text-align:center;}
.v4-lead{text-align:center;color:var(--v4-ink-soft);max-width:38rem;margin:0 auto 2.5rem;}

/* ===== 9 Welten — Bento ===== */
.v4-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.v4-card{position:relative;border-radius:22px;padding:1.6rem;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:var(--v4-ink);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s ease,box-shadow .22s ease;}
.v4-card.span2{grid-column:span 2;}
/* Cursor-Glow */
.v4-card::before{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  opacity:0;transition:opacity .25s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,0.16),transparent 60%);}
.v4-card:hover{transform:translateY(-6px);border-color:var(--v4-glass-border-hover);}
.v4-card:hover::before{opacity:1;}
/* Akzent-Glow pro Karte */
.v4-card.t-violet{box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 18px 50px rgba(0,0,0,0.35),0 0 0 0 rgba(168,85,247,0);}
.v4-card.t-violet:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 22px 60px rgba(0,0,0,0.4),0 0 36px -8px rgba(168,85,247,0.6);}
.v4-card.t-cyan:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 22px 60px rgba(0,0,0,0.4),0 0 36px -8px rgba(34,211,238,0.6);}
.v4-card.t-magenta:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 22px 60px rgba(0,0,0,0.4),0 0 36px -8px rgba(236,72,153,0.6);}
.v4-card.t-emerald:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 22px 60px rgba(0,0,0,0.4),0 0 36px -8px rgba(16,185,129,0.6);}
.v4-card.t-blue:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 22px 60px rgba(0,0,0,0.4),0 0 36px -8px rgba(14,165,233,0.6);}
.v4-card.t-amber:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 22px 60px rgba(0,0,0,0.4),0 0 36px -8px rgba(245,158,11,0.6);}

.v4-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  font-size:1.25rem;margin-bottom:1rem;position:relative;z-index:1;
  background:rgba(255,255,255,0.07);border:1px solid var(--v4-glass-border);
  color:#fff;}
.v4-card.t-violet .v4-ic{color:#c4a4ff;}
.v4-card.t-cyan .v4-ic{color:#67e8f9;}
.v4-card.t-magenta .v4-ic{color:#f9a8d4;}
.v4-card.t-emerald .v4-ic{color:#6ee7b7;}
.v4-card.t-blue .v4-ic{color:#7dd3fc;}
.v4-card.t-amber .v4-ic{color:#fcd34d;}
.v4-card-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.25rem;
  margin:0 0 .4rem;position:relative;z-index:1;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.v4-badge{font-family:'Inter',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.02em;
  padding:.18rem .55rem;border-radius:999px;background:rgba(255,255,255,0.08);
  border:1px solid var(--v4-glass-border);color:var(--v4-ink-soft);}
.v4-card-desc{color:var(--v4-ink-soft);font-size:1rem;margin:0 0 1.2rem;position:relative;z-index:1;flex:1;}
.v4-card-cta{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.95rem;
  color:var(--v4-ink-soft);position:relative;z-index:1;transition:color .2s ease;}
.v4-card-cta .v4-arrow{transition:transform .2s ease;}
.v4-card:hover .v4-card-cta{background:var(--v4-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
.v4-card:hover .v4-arrow{transform:translateX(4px);}

/* ===== Über-Block ===== */
.v4-about{border-radius:26px;padding:clamp(2rem,5vw,3rem);text-align:center;}
.v4-about p{max-width:46rem;margin:0 auto;color:var(--v4-ink-soft);font-size:1.1rem;}
.v4-about strong{color:var(--v4-ink);font-weight:600;}

/* ===== Kontakt-Band ===== */
.v4-contact{border-radius:30px;padding:clamp(2.5rem,6vw,4rem);text-align:center;position:relative;overflow:hidden;}
.v4-contact::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(600px circle at 50% 0%,rgba(168,85,247,0.18),transparent 60%);}
.v4-contact > *{position:relative;z-index:1;}
.v4-contact h2{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-0.03em;
  font-size:clamp(1.8rem,3.5vw,2.8rem);margin:0 0 .8rem;}
.v4-contact p{color:var(--v4-ink-soft);max-width:34rem;margin:0 auto 2rem;}

/* ===== Mini-Footer ===== */
.v4-foot{border-top:1px solid rgba(255,255,255,0.08);margin-top:clamp(3rem,8vh,5rem);
  padding:2rem 0 3rem;text-align:center;color:var(--v4-ink-soft);font-size:.9rem;
  display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;justify-content:center;}
.v4-foot a{color:var(--v4-ink-soft);text-decoration:none;transition:color .2s ease;}
.v4-foot a:hover{color:var(--v4-ink);}

/* ===== Responsive ===== */
@media(max-width:900px){
  .v4-grid{grid-template-columns:repeat(2,1fr);}
  .v4-card.span2{grid-column:span 2;}
  .v4-stats{grid-template-columns:repeat(2,1fr);}
  .v4-stat:nth-child(2){border-right:none;}
  .v4-stat:nth-child(1),.v4-stat:nth-child(2){border-bottom:1px solid rgba(255,255,255,0.08);}
}
@media(max-width:560px){
  .v4-grid{grid-template-columns:1fr;}
  .v4-card.span2{grid-column:span 1;}
  .v4-stats{grid-template-columns:1fr;}
  .v4-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,0.08);}
  .v4-stat:last-child{border-bottom:none;}
  .v4-nav-cta span{display:none;}
  .v4-nav-cta{padding:.55rem .8rem;}
}

/* ===== Reduced Motion ===== */
@media(prefers-reduced-motion:reduce){
  .v4-blob{animation:none!important;}
  .v4-card,.v4-btn,.v4-nav-cta{transition:border-color .2s ease,background .2s ease;}
  .v4-card:hover{transform:none;}
  .v4-btn:hover,.v4-nav-cta:hover{transform:none;}
}
</style>

<div class="v4-root">

  <!-- Aurora -->
  <div class="v4-aurora" aria-hidden="true">
    <div class="v4-blob b1"></div>
    <div class="v4-blob b2"></div>
    <div class="v4-blob b3"></div>
    <div class="v4-blob b4"></div>
  </div>
  <div class="v4-grain" aria-hidden="true"></div>

  <!-- Nav-Pille -->
  <nav class="v4-nav" id="v4-nav" aria-label="Hauptnavigation">
    <div class="v4-nav-inner v4-glass">
      <a href="/" class="v4-brand"><span class="v4-dot" aria-hidden="true"></span>Arthur Kotsch</a>
      <a href="/kontakt" class="v4-nav-cta"><i class="fa-solid fa-paper-plane" aria-hidden="true"></i><span>Kontakt</span></a>
    </div>
  </nav>

  <div class="v4-wrap">

    <!-- Hero -->
    <header class="v4-hero">
      <span class="v4-eyebrow v4-glass"><i class="fa-solid fa-location-dot" aria-hidden="true"></i> Lichtenstein, Sachsen</span>
      <h1 class="v4-h1">Eine Marke.<br><span class="v4-grad-text">Neun Welten.</span></h1>
      <p class="v4-sub">Arthur Kotsch — Student Digital Engineering und Entwickler. Apps, Tools, Hosting und Hilfe vor Ort: alles unter einem Dach, frisch verglast.</p>
      <div class="v4-hero-cta">
        <a href="#v4-welten" class="v4-btn v4-btn-primary">Die neun Welten <i class="fa-solid fa-arrow-down" aria-hidden="true"></i></a>
        <a href="/kontakt" class="v4-btn v4-btn-ghost">Kontakt aufnehmen</a>
      </div>
    </header>

    <!-- Kennzahlen -->
    <section class="v4-stats v4-glass" aria-label="Kennzahlen">
      <div class="v4-stat"><div class="v4-stat-num">22</div><div class="v4-stat-label">iOS &amp; Mac Apps</div></div>
      <div class="v4-stat"><div class="v4-stat-num">9</div><div class="v4-stat-label">Windows-Tools</div></div>
      <div class="v4-stat"><div class="v4-stat-num">734</div><div class="v4-stat-label">Web-Tools</div></div>
      <div class="v4-stat"><div class="v4-stat-num">1.412</div><div class="v4-stat-label">Artikel</div></div>
    </section>

    <!-- 9 Welten -->
    <section class="v4-section" id="v4-welten">
      <h2 class="v4-h2">Die neun Welten</h2>
      <p class="v4-lead">Jede Welt steht für sich — zusammen ergeben sie das Werk. Berühre eine Karte, und das Licht bricht im Glas.</p>

      <div class="v4-grid">

        <a href="https://ios.kotsch.tech" class="v4-card v4-glass span2 t-violet">
          <span class="v4-ic"><i class="fa-brands fa-apple" aria-hidden="true"></i></span>
          <h3 class="v4-card-title">iOS &amp; Mac Apps <span class="v4-badge">22 Apps</span></h3>
          <p class="v4-card-desc">22 Apps im App Store für iPhone, iPad und Mac — mit regelmäßigen Updates.</p>
          <span class="v4-card-cta">Öffnen <span class="v4-arrow">→</span></span>
        </a>

        <a href="https://webtools.kotsch.tech" class="v4-card v4-glass span2 t-cyan">
          <span class="v4-ic"><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i></span>
          <h3 class="v4-card-title">Web-Tools <span class="v4-badge">734 Tools</span></h3>
          <p class="v4-card-desc">734 Tools direkt im Browser — ohne Login, ohne Installation.</p>
          <span class="v4-card-cta">Öffnen <span class="v4-arrow">→</span></span>
        </a>

        <a href="https://windows.kotsch.tech" class="v4-card v4-glass t-blue">
          <span class="v4-ic"><i class="fa-brands fa-windows" aria-hidden="true"></i></span>
          <h3 class="v4-card-title">Windows</h3>
          <p class="v4-card-desc">9 Programme — Cleaner, Commander, Notes, Taskmanager, CodeEditor — als Direkt-Download.</p>
          <span class="v4-card-cta">Öffnen <span class="v4-arrow">→</span></span>
        </a>

        <a href="https://android.kotsch.tech" class="v4-card v4-glass t-emerald">
          <span class="v4-ic"><i class="fa-brands fa-android" aria-hidden="true"></i></span>
          <h3 class="v4-card-title">Android</h3>
          <p class="v4-card-desc">Native Apps für Android — aktuell in Entwicklung.</p>
          <span class="v4-card-cta">Öffnen <span class="v4-arrow">→</span></span>
        </a>

        <a href="https://shop.kotsch.tech" class="v4-card v4-glass t-magenta">
          <span class="v4-ic"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i></span>
          <h3 class="v4-card-title">Shop</h3>
          <p class="v4-card-desc">Digitale Produkte mit Sofort-Download — direkt nach dem Kauf verfügbar.</p>
          <span class="v4-card-cta">Öffnen <span class="v4-arrow">→</span></span>
        </a>

        <a href="https://hosting.kotsch.tech" class="v4-card v4-glass t-cyan">
          <span class="v4-ic"><i class="fa-solid fa-server" aria-hidden="true"></i></span>
          <h3 class="v4-card-title">Hosting</h3>
          <p class="v4-card-desc">Managed Webhosting und vServer/VPS — DSGVO-konform.</p>
          <span class="v4-card-cta">Öffnen <span class="v4-arrow">→</span></span>
        </a>

        <a href="https://news.kotsch.tech" class="v4-card v4-glass t-amber">
          <span class="v4-ic"><i class="fa-solid fa-newspaper" aria-hidden="true"></i></span>
          <h3 class="v4-card-title">News <span class="v4-badge">1.412 Artikel</span></h3>
          <p class="v4-card-desc">1.412 Ratgeber und Tutorials rund um Technik und Software.</p>
          <span class="v4-card-cta">Öffnen <span class="v4-arrow">→</span></span>
        </a>

        <a href="https://it-hilfe.kotsch.tech" class="v4-card v4-glass t-violet">
          <span class="v4-ic"><i class="fa-solid fa-screwdriver-wrench" aria-hidden="true"></i></span>
          <h3 class="v4-card-title">IT-Hilfe</h3>
          <p class="v4-card-desc">Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein — keine Lösung, kein Preis.</p>
          <span class="v4-card-cta">Öffnen <span class="v4-arrow">→</span></span>
        </a>

        <a href="https://webdesign.kotsch.tech" class="v4-card v4-glass t-magenta">
          <span class="v4-ic"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i></span>
          <h3 class="v4-card-title">Webdesign</h3>
          <p class="v4-card-desc">Studio für moderne Websites — inklusive 20 Branchen-Demos.</p>
          <span class="v4-card-cta">Öffnen <span class="v4-arrow">→</span></span>
        </a>

      </div>
    </section>

    <!-- Über -->
    <section class="v4-section">
      <div class="v4-about v4-glass">
        <h2 class="v4-h2">Hinter dem Glas</h2>
        <p>Ich bin <strong>Arthur Kotsch</strong>, Student im Digital Engineering und Entwickler aus <strong>Lichtenstein in Sachsen</strong>. Von iOS- und Mac-Apps über Web-Tools und Hosting bis zur IT-Hilfe vor Ort — alles entsteht aus einer Hand und unter einer Marke.</p>
      </div>
    </section>

    <!-- Kontakt-Band -->
    <section class="v4-section">
      <div class="v4-contact v4-glass">
        <h2>Lass uns sprechen.</h2>
        <p>Ob App-Idee, Webprojekt oder ein Rechner, der streikt — schreib mir, und wir finden eine Lösung.</p>
        <a href="/kontakt" class="v4-btn v4-btn-primary">Zum Kontakt <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
      </div>
    </section>

    <!-- Mini-Footer -->
    <footer class="v4-foot">
      <span>© {{ date('Y') }} Arthur Kotsch · Lichtenstein, Sachsen</span>
      <a href="/kontakt">Kontakt</a>
      <a href="/impressum">Impressum</a>
      <a href="/datenschutz">Datenschutz</a>
    </footer>

  </div>
</div>

<script>
(function(){
  // Cursor-Glow auf Karten
  var cards=document.querySelectorAll('.v4-card');
  cards.forEach(function(c){
    c.addEventListener('pointermove',function(e){
      var r=c.getBoundingClientRect();
      c.style.setProperty('--mx',(e.clientX-r.left)+'px');
      c.style.setProperty('--my',(e.clientY-r.top)+'px');
    });
  });
  // Nav: Blur beim Scroll verstärken
  var nav=document.getElementById('v4-nav');
  function onScroll(){
    if(window.scrollY>20){nav.classList.add('scrolled');}else{nav.classList.remove('scrolled');}
  }
  window.addEventListener('scroll',onScroll,{passive:true});
  onScroll();
})();
</script>
@endsection