@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=Inter:wght@400;500;600;700;800&display=swap');

/* ===== Tokens ===== */
.v20-root{
  --v20-canvas:#0B1020;
  --v20-a:#6366F1;   /* Indigo  */
  --v20-b:#22D3EE;   /* Cyan    */
  --v20-c:#A855F7;   /* Violet  */
  --v20-d:#FB7185;   /* Coral   */
  --v20-glass:rgba(255,255,255,.06);
  --v20-glass-bd:rgba(255,255,255,.12);
  --v20-ink:#F8FAFC;
  --v20-body:#94A3B8;
  --v20-cap:#64748B;
  --v20-mesh:linear-gradient(120deg,var(--v20-a),var(--v20-b) 40%,var(--v20-c) 72%,var(--v20-d));

  position:relative;
  background:var(--v20-canvas);
  color:var(--v20-body);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
  isolation:isolate;
}
.v20-root *{box-sizing:border-box;}
.v20-root ::selection{background:rgba(99,102,241,.4);color:#fff;}

/* Sanfte Hintergrund-Glühen am Canvas (statisch, dezent) */
.v20-root::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 78% 8%, rgba(99,102,241,.20), transparent 60%),
    radial-gradient(55vw 55vw at 8% 70%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(50vw 50vw at 92% 86%, rgba(168,85,247,.16), transparent 60%);
}

/* ===== Shared ===== */
.v20-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.2rem);}
.v20-mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--v20-cap);}
.v20-clip{
  background:var(--v20-mesh);background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* Wiederkehrendes Blob-Motiv (klein, hinter Karten/CTA) */
.v20-blob-bg{
  position:absolute;inset:auto;pointer-events:none;z-index:0;
  filter:blur(.5px);opacity:.55;
  background:var(--v20-mesh);
  border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;
}

/* ===== Sticky Glas-Pille-Nav ===== */
.v20-nav{
  position:sticky;top:clamp(.6rem,2vw,1.1rem);z-index:50;
  width:min(1140px,calc(100% - 2rem));margin:clamp(.6rem,2vw,1.1rem) auto 0;
  display:flex;align-items:center;gap:1rem;
  padding:.6rem .7rem .6rem 1.1rem;border-radius:999px;
  background:var(--v20-glass);border:1px solid var(--v20-glass-bd);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}
.v20-nav.is-stuck{transform:scale(.985);background:rgba(11,16,32,.6);box-shadow:0 14px 40px -22px rgba(0,0,0,.8);}
.v20-logo{font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--v20-ink);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;}
.v20-logo b{width:1.7rem;height:1.7rem;border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;background:var(--v20-mesh);display:inline-block;}
.v20-nav-links{display:flex;gap:clamp(.6rem,1.6vw,1.6rem);margin-left:auto;}
.v20-nav-links a{color:var(--v20-body);text-decoration:none;font-size:.92rem;font-weight:500;transition:color .2s;white-space:nowrap;}
.v20-nav-links a:hover{color:var(--v20-ink);}
.v20-nav-cta{
  margin-left:.4rem;flex:none;display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1.15rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.9rem;
  color:#fff;background:linear-gradient(135deg,var(--v20-d),var(--v20-c));
  box-shadow:0 0 26px rgba(251,113,133,.42);transition:box-shadow .3s,transform .2s;
}
.v20-nav-cta:hover{box-shadow:0 0 40px rgba(251,113,133,.6);transform:translateY(-1px);}
@media (max-width:780px){.v20-nav-links{display:none;}}

/* ===== Hero ===== */
.v20-hero{
  position:relative;min-height:clamp(620px,92vh,920px);
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:2rem;
  padding:clamp(3rem,9vh,7rem) 0 clamp(2.5rem,7vh,5rem);
}
.v20-hero-copy{position:relative;z-index:2;min-width:0;}
.v20-eyebrow{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .85rem;border-radius:999px;
  background:var(--v20-glass);border:1px solid var(--v20-glass-bd);font-size:.78rem;color:var(--v20-body);margin-bottom:1.4rem;}
.v20-eyebrow i{color:var(--v20-b);}
.v20-h1{
  font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2.5rem,7vw,5.5rem);color:var(--v20-ink);margin:0 0 1.2rem;
}
.v20-h1 .v20-clip{display:inline-block;}
.v20-sub{font-size:clamp(1rem,1.4vw,1.18rem);color:var(--v20-body);max-width:34ch;margin:0 0 2rem;}
.v20-sub b{color:var(--v20-ink);font-weight:600;}
.v20-cta-row{display:flex;flex-wrap:wrap;gap:.9rem;}
.v20-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.6rem;border-radius:999px;
  text-decoration:none;font-weight:600;font-size:1rem;transition:transform .2s,box-shadow .3s,border-color .3s;}
.v20-btn-primary{color:#fff;background:linear-gradient(135deg,var(--v20-d),var(--v20-c) 70%);
  box-shadow:0 0 32px rgba(251,113,133,.42);}
.v20-btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 48px rgba(251,113,133,.6);}
.v20-btn-ghost{color:var(--v20-ink);background:var(--v20-glass);border:1px solid var(--v20-glass-bd);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}
.v20-btn-ghost:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.28);}

/* Signature-Blob */
.v20-hero-visual{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:320px;min-width:0;}
.v20-blob{
  width:min(440px,80vw);aspect-ratio:1;position:relative;
  border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;
  background:var(--v20-mesh);filter:blur(.5px);
  box-shadow:0 40px 120px -30px rgba(99,102,241,.55);
  animation:v20-morph 18s ease-in-out infinite, v20-float 9s ease-in-out infinite;
}
/* Innere Mesh-Tiefe */
.v20-blob::before{
  content:"";position:absolute;inset:0;border-radius:inherit;mix-blend-mode:screen;opacity:.9;
  background:
    radial-gradient(40% 40% at 25% 25%, rgba(34,211,238,.9), transparent 60%),
    radial-gradient(45% 45% at 80% 30%, rgba(99,102,241,.85), transparent 62%),
    radial-gradient(45% 45% at 70% 80%, rgba(168,85,247,.85), transparent 60%),
    radial-gradient(35% 35% at 25% 80%, rgba(251,113,133,.7), transparent 62%);
}
.v20-blob::after{
  content:"";position:absolute;inset:18%;border-radius:inherit;
  border:1px solid rgba(255,255,255,.18);opacity:.5;
}
@keyframes v20-morph{
  0%,100%{border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;}
  50%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;}
}
@keyframes v20-float{
  0%,100%{transform:translateY(-12px);}
  50%{transform:translateY(12px);}
}
@keyframes v20-spin{to{background-position:200% 200%;}}

@media (max-width:900px){
  .v20-hero{grid-template-columns:1fr;text-align:center;min-height:auto;}
  .v20-hero-copy{order:1;}
  .v20-hero-visual{order:0;}
  .v20-sub{margin-left:auto;margin-right:auto;}
  .v20-cta-row{justify-content:center;}
  .v20-blob{width:min(320px,70vw);}
}

/* ===== Stats ===== */
.v20-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.3rem);
  margin:clamp(1rem,3vh,2rem) 0 clamp(3rem,8vh,5.5rem);}
.v20-stat{position:relative;padding:1.5rem 1.2rem;border-radius:20px;text-align:center;
  background:var(--v20-glass);border:1px solid var(--v20-glass-bd);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);min-width:0;
  opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.v20-stat.is-in{opacity:1;transform:none;}
.v20-stat-num{font-weight:800;font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;}
.v20-stat-lbl{margin-top:.5rem;font-size:.82rem;color:var(--v20-body);}
@media (max-width:640px){.v20-stats{grid-template-columns:repeat(2,1fr);}}

/* ===== Sektions-Kopf ===== */
.v20-sec-head{margin-bottom:clamp(1.6rem,4vh,2.6rem);max-width:42ch;}
.v20-sec-head h2{font-size:clamp(1.9rem,4.5vw,3.2rem);font-weight:700;letter-spacing:-.03em;color:var(--v20-ink);margin:.6rem 0 .6rem;line-height:1.05;}
.v20-sec-head p{margin:0;color:var(--v20-body);}

/* ===== 9 Welten — Bento Mesh-Grid ===== */
.v20-worlds{padding:clamp(2rem,6vh,4rem) 0;}
.v20-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.8rem,1.6vw,1.2rem);}
.v20-card{
  position:relative;grid-column:span 2;overflow:hidden;
  padding:clamp(1.4rem,2.4vw,1.8rem);border-radius:24px;min-height:188px;min-width:0;
  background:var(--v20-glass);border:1px solid var(--v20-glass-bd);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  text-decoration:none;display:flex;flex-direction:column;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.v20-card.span3{grid-column:span 3;min-height:220px;}
/* getönter Mesh-Blob hinter jeder Karte */
.v20-card-blob{
  position:absolute;width:62%;aspect-ratio:1;right:-12%;bottom:-22%;z-index:0;pointer-events:none;
  border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;filter:blur(8px);opacity:.42;
  transition:transform .45s ease,opacity .45s ease;
}
.v20-card:hover .v20-card-blob{transform:scale(1.15);opacity:.7;}
/* cursor-folgender Glow */
.v20-card::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s ease;pointer-events:none;
  background:radial-gradient(220px 220px at var(--x,50%) var(--y,50%), rgba(255,255,255,.14), transparent 65%);
}
.v20-card:hover::before{opacity:1;}
.v20-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.3);box-shadow:0 30px 70px -34px rgba(0,0,0,.85);}
.v20-card>*{position:relative;z-index:1;}
.v20-card-title{font-size:clamp(1.2rem,2.2vw,1.55rem);font-weight:700;letter-spacing:-.02em;color:var(--v20-ink);margin:.7rem 0 .45rem;transition:color .2s;}
.v20-card:hover .v20-card-title{background:var(--v20-mesh);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.v20-card-desc{font-size:.95rem;color:var(--v20-body);margin:0;flex:1;}
.v20-card-arrow{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font-weight:600;font-size:.9rem;color:var(--v20-ink);}
.v20-card-arrow i{transition:transform .3s ease;color:var(--v20-b);}
.v20-card:hover .v20-card-arrow i{transform:translateX(6px);}

/* Blob-Tönungen je Welt */
.v20-t-indigo{background:radial-gradient(circle at 50% 50%,#6366F1,#3730A3);}
.v20-t-cyan{background:radial-gradient(circle at 50% 50%,#22D3EE,#0E7490);}
.v20-t-violet{background:radial-gradient(circle at 50% 50%,#A855F7,#6B21A8);}
.v20-t-coral{background:radial-gradient(circle at 50% 50%,#FB7185,#9F1239);}
.v20-t-indigo-cyan{background:linear-gradient(135deg,#6366F1,#22D3EE);}
.v20-t-violet-coral{background:linear-gradient(135deg,#A855F7,#FB7185);}
.v20-card-ic{font-size:1.4rem;color:var(--v20-ink);opacity:.92;}

@media (max-width:900px){
  .v20-grid{grid-template-columns:repeat(2,1fr);}
  .v20-card,.v20-card.span3{grid-column:span 1;}
}
@media (max-width:560px){
  .v20-grid{grid-template-columns:1fr;}
  .v20-card,.v20-card.span3{grid-column:span 1;min-height:160px;}
}

/* ===== Über + Kontakt ===== */
.v20-about{padding:clamp(3rem,8vh,5.5rem) 0 clamp(1.5rem,4vh,3rem);text-align:center;}
.v20-about p{font-size:clamp(1.3rem,3vw,2.1rem);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--v20-ink);max-width:26ch;margin:0 auto;}

.v20-contact{position:relative;overflow:hidden;margin:clamp(1.5rem,4vh,3rem) auto clamp(3rem,8vh,5rem);
  max-width:1140px;border-radius:32px;padding:clamp(2.5rem,7vw,5rem) clamp(1.5rem,5vw,3rem);text-align:center;
  background:var(--v20-glass);border:1px solid var(--v20-glass-bd);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}
.v20-contact-blob{
  position:absolute;width:50%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;
  background:radial-gradient(circle at 50% 50%,rgba(251,113,133,.5),rgba(168,85,247,.25),transparent 70%);
  filter:blur(30px);animation:v20-pulse 6s ease-in-out infinite,v20-morph 18s ease-in-out infinite;
}
@keyframes v20-pulse{0%,100%{opacity:.55;}50%{opacity:.95;}}
.v20-contact h2{position:relative;z-index:1;font-size:clamp(2rem,5vw,3.4rem);font-weight:700;letter-spacing:-.03em;color:var(--v20-ink);margin:0 0 1rem;line-height:1.05;}
.v20-contact p{position:relative;z-index:1;color:var(--v20-body);margin:0 auto 2rem;max-width:44ch;}
.v20-contact .v20-btn-primary{position:relative;z-index:1;}

/* ===== Footer ===== */
.v20-footer{position:relative;z-index:1;border-top:1px solid var(--v20-glass-bd);padding:clamp(2rem,5vh,3rem) 0;}
.v20-footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;}
.v20-footer-links{display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;margin-left:auto;}
.v20-footer-links a{color:var(--v20-body);text-decoration:none;font-size:.86rem;transition:color .2s;}
.v20-footer-links a:hover{color:var(--v20-ink);}
.v20-footer-copy{font-size:.82rem;color:var(--v20-cap);}

/* ===== Reveal ===== */
.v20-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.v20-reveal.is-in{opacity:1;transform:none;}

/* ===== Focus / Accessibility ===== */
.v20-root a:focus-visible,.v20-root button:focus-visible{outline:2px solid var(--v20-b);outline-offset:3px;border-radius:6px;}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion:reduce){
  .v20-blob,.v20-contact-blob,.v20-clip{animation:none!important;}
  .v20-reveal,.v20-stat{transition:none!important;opacity:1!important;transform:none!important;}
  .v20-card:hover,.v20-btn:hover,.v20-nav-cta:hover{transform:none!important;}
}
</style>

<div class="v20-root">

  {{-- ===== Nav ===== --}}
  <nav class="v20-nav" id="v20-nav" aria-label="Hauptnavigation">
    <a href="#v20-top" class="v20-logo"><b aria-hidden="true"></b>ak</a>
    <div class="v20-nav-links">
      <a href="#v20-worlds">Welten</a>
      <a href="#v20-stats">Zahlen</a>
      <a href="#v20-about">Über</a>
      <a href="#v20-contact">Kontakt</a>
    </div>
    <a href="/kontakt" class="v20-nav-cta"><i class="fa-solid fa-paper-plane" aria-hidden="true"></i> Kontakt</a>
  </nav>

  <div class="v20-wrap" id="v20-top">

    {{-- ===== Hero ===== --}}
    <header class="v20-hero">
      <div class="v20-hero-copy">
        <span class="v20-eyebrow"><i class="fa-solid fa-location-dot" aria-hidden="true"></i> Lichtenstein, Sachsen</span>
        <h1 class="v20-h1">Eine Person.<br><span class="v20-clip">Neun Welten.</span></h1>
        <p class="v20-sub"><b>Arthur Kotsch</b> — Student Digital Engineering &amp; Entwickler. Apps, Web-Tools, Hosting und IT-Hilfe aus einer Hand.</p>
        <div class="v20-cta-row">
          <a href="#v20-worlds" class="v20-btn v20-btn-primary"><i class="fa-solid fa-arrow-down" aria-hidden="true"></i> Welten ansehen</a>
          <a href="/kontakt" class="v20-btn v20-btn-ghost">Kontakt</a>
        </div>
      </div>
      <div class="v20-hero-visual" aria-hidden="true">
        <div class="v20-blob"></div>
      </div>
    </header>

    {{-- ===== Stats ===== --}}
    <section class="v20-stats" id="v20-stats" aria-label="Kennzahlen">
      <div class="v20-stat"><div class="v20-stat-num v20-clip">22</div><div class="v20-stat-lbl">iOS &amp; Mac Apps</div></div>
      <div class="v20-stat"><div class="v20-stat-num v20-clip">9</div><div class="v20-stat-lbl">Windows-Tools</div></div>
      <div class="v20-stat"><div class="v20-stat-num v20-clip">734</div><div class="v20-stat-lbl">Web-Tools</div></div>
      <div class="v20-stat"><div class="v20-stat-num v20-clip">1.412</div><div class="v20-stat-lbl">Artikel</div></div>
    </section>

    {{-- ===== 9 Welten ===== --}}
    <section class="v20-worlds" id="v20-worlds">
      <div class="v20-sec-head v20-reveal">
        <span class="v20-mono">Das Werk</span>
        <h2>Neun Welten, <span class="v20-clip">ein Mensch.</span></h2>
        <p>Von nativen Apps über hunderte Browser-Tools bis zur IT-Hilfe vor Ort — jede Welt ist eigenständig, alle gehören zusammen.</p>
      </div>

      <div class="v20-grid">

        {{-- Flagschiff 1 (groß) --}}
        <a class="v20-card span3 v20-reveal" href="https://ios.kotsch.tech">
          <span class="v20-card-blob v20-t-indigo" aria-hidden="true"></span>
          <i class="fa-brands fa-apple v20-card-ic" aria-hidden="true"></i>
          <span class="v20-mono">01 / iOS &amp; Mac</span>
          <span class="v20-card-title">iOS &amp; Mac Apps</span>
          <p class="v20-card-desc">22 Apps im App Store für iPhone, iPad und Mac — mit regelmäßigen Updates.</p>
          <span class="v20-card-arrow">Zum App-Portal <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        {{-- Flagschiff 2 (groß) --}}
        <a class="v20-card span3 v20-reveal" href="https://webtools.kotsch.tech">
          <span class="v20-card-blob v20-t-indigo-cyan" aria-hidden="true"></span>
          <i class="fa-solid fa-wand-magic-sparkles v20-card-ic" aria-hidden="true"></i>
          <span class="v20-mono">04 / Web-Tools</span>
          <span class="v20-card-title">Web-Tools</span>
          <p class="v20-card-desc">734 Tools direkt im Browser — ohne Login, ohne Installation, sofort nutzbar.</p>
          <span class="v20-card-arrow">Tools öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        {{-- mittlere Karten --}}
        <a class="v20-card v20-reveal" href="https://windows.kotsch.tech">
          <span class="v20-card-blob v20-t-cyan" aria-hidden="true"></span>
          <i class="fa-brands fa-windows v20-card-ic" aria-hidden="true"></i>
          <span class="v20-mono">02 / Windows</span>
          <span class="v20-card-title">Windows</span>
          <p class="v20-card-desc">9 Programme — Cleaner, Commander, Notes, Taskmanager &amp; CodeEditor. Direkt-Download.</p>
          <span class="v20-card-arrow">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v20-card v20-reveal" href="https://android.kotsch.tech">
          <span class="v20-card-blob v20-t-violet" aria-hidden="true"></span>
          <i class="fa-brands fa-android v20-card-ic" aria-hidden="true"></i>
          <span class="v20-mono">03 / Android</span>
          <span class="v20-card-title">Android</span>
          <p class="v20-card-desc">Native Apps für Android — aktuell in Entwicklung.</p>
          <span class="v20-card-arrow">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v20-card v20-reveal" href="https://shop.kotsch.tech">
          <span class="v20-card-blob v20-t-coral" aria-hidden="true"></span>
          <i class="fa-solid fa-bag-shopping v20-card-ic" aria-hidden="true"></i>
          <span class="v20-mono">05 / Shop</span>
          <span class="v20-card-title">Shop</span>
          <p class="v20-card-desc">Digitale Produkte mit Sofort-Download — direkt nach dem Kauf verfügbar.</p>
          <span class="v20-card-arrow">Zum Shop <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v20-card v20-reveal" href="https://hosting.kotsch.tech">
          <span class="v20-card-blob v20-t-cyan" aria-hidden="true"></span>
          <i class="fa-solid fa-server v20-card-ic" aria-hidden="true"></i>
          <span class="v20-mono">06 / Hosting</span>
          <span class="v20-card-title">Hosting</span>
          <p class="v20-card-desc">Managed Webhosting, vServer &amp; VPS — DSGVO-konform betrieben.</p>
          <span class="v20-card-arrow">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v20-card v20-reveal" href="https://news.kotsch.tech">
          <span class="v20-card-blob v20-t-violet" aria-hidden="true"></span>
          <i class="fa-solid fa-newspaper v20-card-ic" aria-hidden="true"></i>
          <span class="v20-mono">07 / News</span>
          <span class="v20-card-title">News</span>
          <p class="v20-card-desc">1.412 Ratgeber &amp; Tutorials rund um Software, Apps und IT.</p>
          <span class="v20-card-arrow">Lesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v20-card v20-reveal" href="https://it-hilfe.kotsch.tech">
          <span class="v20-card-blob v20-t-indigo" aria-hidden="true"></span>
          <i class="fa-solid fa-screwdriver-wrench v20-card-ic" aria-hidden="true"></i>
          <span class="v20-mono">08 / IT-Hilfe</span>
          <span class="v20-card-title">IT-Hilfe</span>
          <p class="v20-card-desc">Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein. Keine Lösung = kein Preis.</p>
          <span class="v20-card-arrow">Hilfe holen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v20-card v20-reveal" href="https://webdesign.kotsch.tech">
          <span class="v20-card-blob v20-t-violet-coral" aria-hidden="true"></span>
          <i class="fa-solid fa-palette v20-card-ic" aria-hidden="true"></i>
          <span class="v20-mono">09 / Webdesign</span>
          <span class="v20-card-title">Webdesign</span>
          <p class="v20-card-desc">Studio für Websites — inklusive 20 Branchen-Demos zum Durchklicken.</p>
          <span class="v20-card-arrow">Studio ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

      </div>
    </section>

    {{-- ===== Über ===== --}}
    <section class="v20-about v20-reveal" id="v20-about">
      <span class="v20-mono">Über</span>
      <p>Ein Student aus Lichtenstein, der Software, Web und IT zu einem <span class="v20-clip">zusammenhängenden Universum</span> verbindet.</p>
    </section>

  </div>

  {{-- ===== Kontakt-CTA ===== --}}
  <section class="v20-contact v20-reveal" id="v20-contact">
    <span class="v20-contact-blob" aria-hidden="true"></span>
    <h2>Lass uns etwas bauen.</h2>
    <p>App, Website, Tool oder IT-Problem — schreib mir, und wir finden den passenden Weg.</p>
    <a href="/kontakt" class="v20-btn v20-btn-primary"><i class="fa-solid fa-paper-plane" aria-hidden="true"></i> Kontakt aufnehmen</a>
  </section>

  {{-- ===== Footer ===== --}}
  <footer class="v20-footer">
    <div class="v20-wrap v20-footer-inner">
      <span class="v20-logo"><b aria-hidden="true"></b>ak</span>
      <nav class="v20-footer-links" aria-label="Bereiche">
        <a href="https://ios.kotsch.tech">iOS &amp; Mac</a>
        <a href="https://windows.kotsch.tech">Windows</a>
        <a href="https://android.kotsch.tech">Android</a>
        <a href="https://webtools.kotsch.tech">Web-Tools</a>
        <a href="https://shop.kotsch.tech">Shop</a>
        <a href="https://hosting.kotsch.tech">Hosting</a>
        <a href="https://news.kotsch.tech">News</a>
        <a href="https://it-hilfe.kotsch.tech">IT-Hilfe</a>
        <a href="https://webdesign.kotsch.tech">Webdesign</a>
      </nav>
    </div>
    <div class="v20-wrap" style="margin-top:1.2rem;">
      <span class="v20-footer-copy">&copy; {{ date('Y') }} KOTSCH.TECH — Arthur Kotsch, Lichtenstein</span>
    </div>
  </footer>

</div>

<script>
(function(){
  var root=document.querySelector('.v20-root');
  if(!root) return;
  var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches;

  // Sticky-Nav-Zustand
  var nav=document.getElementById('v20-nav');
  if(nav){
    var tick=false;
    window.addEventListener('scroll',function(){
      if(tick) return; tick=true;
      window.requestAnimationFrame(function(){
        nav.classList.toggle('is-stuck',window.scrollY>30); tick=false;
      });
    },{passive:true});
  }

  // Reveal on scroll
  var items=root.querySelectorAll('.v20-reveal,.v20-stat');
  if(reduce||!('IntersectionObserver'in window)){
    items.forEach(function(el){el.classList.add('is-in');});
  } else {
    var io=new IntersectionObserver(function(entries){
      entries.forEach(function(e){
        if(e.isIntersecting){ e.target.classList.add('is-in'); io.unobserve(e.target); }
      });
    },{threshold:.14,rootMargin:'0px 0px -8% 0px'});
    // gestaffelte Stats
    var stats=root.querySelectorAll('.v20-stat');
    stats.forEach(function(el,i){el.style.transitionDelay=(i*0.08)+'s';});
    items.forEach(function(el){io.observe(el);});
  }

  // Cursor-folgender Glow auf Welt-Karten
  if(!reduce){
    root.querySelectorAll('.v20-card').forEach(function(card){
      card.addEventListener('pointermove',function(ev){
        var r=card.getBoundingClientRect();
        card.style.setProperty('--x',(ev.clientX-r.left)+'px');
        card.style.setProperty('--y',(ev.clientY-r.top)+'px');
      });
    });
  }
})();
</script>

@endsection