@extends('layouts.app')

@section('content')
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.v25-root{
  --v25-primary:#2563eb;
  --v25-accent:#FF5D2E;
  --v25-ink:#0f172a;
  --v25-muted:#64748b;
  --v25-line:#e2e8f0;
  --v25-bg:#ffffff;
  --v25-bg-alt:#f7f9fc;
  --v25-grad:linear-gradient(135deg,#2563eb,#FF5D2E);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--v25-ink);
  background:var(--v25-bg);
  line-height:1.65;
}
.v25-root *{box-sizing:border-box;}
.v25-root ::selection{background:rgba(37,99,235,.15);}

.v25-wrap{max-width:1140px;margin:0 auto;padding:0 24px;min-width:0;}

/* ===== Intro / Hero ===== */
.v25-hero{padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,72px);}
.v25-eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--v25-primary);margin:0 0 18px;
}
.v25-h1{
  font-size:clamp(2.4rem,7vw,4.4rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.02;margin:0;max-width:16ch;
}
.v25-h1 .v25-grad-text{
  background:var(--v25-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.v25-sub{
  margin:26px 0 0;font-size:1.0625rem;color:var(--v25-muted);max-width:46ch;
}
.v25-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.v25-btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;
  font-weight:700;font-size:.98rem;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;
}
.v25-btn-primary{background:var(--v25-grad);color:#fff;box-shadow:0 10px 26px -10px rgba(37,99,235,.6);}
.v25-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(37,99,235,.7);}
.v25-btn-ghost{background:#fff;color:var(--v25-ink);border:1px solid var(--v25-line);}
.v25-btn-ghost:hover{border-color:var(--v25-primary);color:var(--v25-primary);}
.v25-btn i{transition:transform .25s ease;}
.v25-btn:hover i{transform:translateX(4px);}

/* ===== Kennzahlen-Leiste ===== */
.v25-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--v25-line);border-bottom:1px solid var(--v25-line);
  margin:clamp(20px,4vw,40px) 0 0;
}
.v25-stat{padding:30px 22px;border-left:1px solid var(--v25-line);min-width:0;}
.v25-stat:first-child{border-left:0;}
.v25-stat-num{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;color:var(--v25-primary);line-height:1;}
.v25-stat-label{margin-top:10px;font-size:.92rem;color:var(--v25-muted);}

/* ===== Rows ===== */
.v25-rows{padding:clamp(48px,7vw,80px) 0;}
.v25-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--v25-line);
}
.v25-row:first-child{border-top:0;}
/* gespiegelte Zeilen: Bühne rechts, Text links (Desktop) */
.v25-row-flip .v25-stage{order:2;}
.v25-row-flip .v25-row-text-col{order:1;}
/* alternierende Flächenfarbe via voller Breite */
.v25-band{background:var(--v25-bg);}
.v25-band-alt{background:var(--v25-bg-alt);}

/* Bühne / Spotlight */
.v25-stage{
  position:relative;aspect-ratio:1/1;border-radius:28px;background:var(--v25-bg-alt);
  border:1px solid var(--v25-line);display:grid;place-items:center;
  overflow:hidden;perspective:900px;min-width:0;
}
.v25-band-alt .v25-stage{background:#fff;}
.v25-cone{
  position:absolute;width:120%;height:120%;left:-10%;top:-10%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgba(37,99,235,.22),rgba(37,99,235,0) 60%);
  opacity:.55;transition:opacity .5s ease,transform .4s ease;
}
.v25-stage:hover .v25-cone{opacity:1;}
.v25-icon{
  position:relative;z-index:1;width:clamp(110px,40%,168px);height:clamp(110px,40%,168px);
  transform-style:preserve-3d;transition:transform .5s ease;
}
.v25-stage:hover .v25-icon{transform:rotateY(6deg) rotateX(-3deg);}

/* Textspalte */
.v25-row-eyebrow{
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:var(--v25-primary);margin:0 0 14px;
}
.v25-row-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0;}
.v25-row-text{margin:18px 0 0;font-size:1.0625rem;color:var(--v25-muted);max-width:46ch;}
.v25-pill{
  display:inline-block;margin:22px 0 0;padding:7px 16px;border-radius:999px;
  font-size:.82rem;font-weight:700;background:rgba(37,99,235,.08);color:var(--v25-primary);
  border:1px solid rgba(37,99,235,.18);
}
.v25-link{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font-weight:700;font-size:1rem;text-decoration:none;color:var(--v25-ink);
  background-image:linear-gradient(var(--v25-primary),var(--v25-primary));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;
  transition:background-size .3s ease,color .25s ease;
}
.v25-link:hover{background-size:100% 2px;color:var(--v25-primary);}
.v25-link i{color:var(--v25-accent);transition:transform .25s ease;}
.v25-link:hover i{transform:translateX(6px);}

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

/* ===== CSS-Icons ===== */
.v25-ic{position:absolute;inset:0;}
/* Apps = App-Grid */
.v25-ic-apps span{position:absolute;width:42%;height:42%;border-radius:22%;background:var(--v25-primary);}
.v25-ic-apps span:nth-child(1){top:4%;left:4%;}
.v25-ic-apps span:nth-child(2){top:4%;right:4%;background:var(--v25-accent);}
.v25-ic-apps span:nth-child(3){bottom:4%;left:4%;background:#1e40af;}
.v25-ic-apps span:nth-child(4){bottom:4%;right:4%;background:#93c5fd;}
/* Windows = 4-Scheiben */
.v25-ic-win{border:3px solid var(--v25-primary);border-radius:14px;background:#fff;}
.v25-ic-win::before,.v25-ic-win::after{content:"";position:absolute;background:var(--v25-primary);}
.v25-ic-win::before{left:50%;top:0;width:3px;height:100%;transform:translateX(-50%);}
.v25-ic-win::after{top:50%;left:0;height:3px;width:100%;transform:translateY(-50%);}
.v25-ic-win i{position:absolute;width:14%;height:14%;border-radius:3px;background:var(--v25-accent);right:10%;bottom:10%;z-index:2;}
/* Android = Roboter-Kopf */
.v25-ic-droid{background:var(--v25-primary);border-radius:50% 50% 16px 16px;top:18%;height:64%;}
.v25-ic-droid::before,.v25-ic-droid::after{content:"";position:absolute;width:12%;height:12%;border-radius:50%;background:#fff;top:26%;}
.v25-ic-droid::before{left:28%;}
.v25-ic-droid::after{right:28%;}
.v25-ic-droid i{position:absolute;width:6%;height:26%;border-radius:6px;background:var(--v25-accent);top:-22%;}
.v25-ic-droid i:first-child{left:24%;transform:rotate(-22deg);}
.v25-ic-droid i:last-child{right:24%;transform:rotate(22deg);}
/* Web-Tools = Browser + Schraubenschlüssel */
.v25-ic-web{border:3px solid var(--v25-primary);border-radius:12px;background:#fff;}
.v25-ic-web::before{content:"";position:absolute;top:0;left:0;right:0;height:22%;background:var(--v25-bg-alt);border-bottom:3px solid var(--v25-primary);}
.v25-ic-web b{position:absolute;top:7%;left:9%;width:8%;height:8%;border-radius:50%;background:var(--v25-accent);box-shadow:16px 0 0 var(--v25-primary),32px 0 0 var(--v25-primary);}
.v25-ic-web i{position:absolute;left:50%;top:55%;width:10%;height:34%;background:var(--v25-primary);transform:translate(-50%,-30%) rotate(38deg);border-radius:4px;}
.v25-ic-web i::after{content:"";position:absolute;top:-9px;left:-5px;width:16px;height:16px;border:4px solid var(--v25-accent);border-radius:50%;border-bottom-color:transparent;}
/* Shop = Tasche */
.v25-ic-bag{top:26%;height:60%;background:var(--v25-primary);border-radius:8px 8px 14px 14px;}
.v25-ic-bag::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:46%;height:46%;border:5px solid var(--v25-accent);border-bottom:0;border-radius:30px 30px 0 0;}
.v25-ic-bag::after{content:"";position:absolute;top:26%;left:0;right:0;height:5px;background:rgba(255,255,255,.4);}
/* Hosting = Server-Riegel */
.v25-ic-host i{position:absolute;left:8%;right:8%;height:24%;border-radius:9px;background:var(--v25-primary);}
.v25-ic-host i:nth-child(1){top:6%;}
.v25-ic-host i:nth-child(2){top:38%;}
.v25-ic-host i:nth-child(3){top:70%;background:#1e40af;}
.v25-ic-host i b{position:absolute;left:9%;top:50%;transform:translateY(-50%);width:10%;height:26%;border-radius:50%;background:var(--v25-accent);}
/* News = Zeitungsspalten */
.v25-ic-news{border:3px solid var(--v25-primary);border-radius:10px;background:#fff;padding:12%;}
.v25-ic-news i{position:absolute;background:var(--v25-primary);}
.v25-ic-news i:nth-child(1){left:14%;right:14%;top:18%;height:7%;background:var(--v25-accent);}
.v25-ic-news i:nth-child(2){left:14%;width:32%;top:36%;bottom:14%;}
.v25-ic-news i:nth-child(3){right:14%;width:32%;top:36%;bottom:14%;opacity:.6;}
/* IT-Hilfe = Schild + Schraubenschlüssel */
.v25-ic-it{background:var(--v25-primary);top:8%;height:84%;width:80%;left:10%;border-radius:18% 18% 50% 50%/14% 14% 60% 60%;}
.v25-ic-it i{position:absolute;left:50%;top:50%;width:11%;height:42%;background:#fff;transform:translate(-50%,-50%) rotate(40deg);border-radius:4px;}
.v25-ic-it i::after{content:"";position:absolute;top:-10px;left:-6px;width:18px;height:18px;border:5px solid var(--v25-accent);border-radius:50%;border-bottom-color:transparent;}
/* Webdesign = Layout-Frame */
.v25-ic-design{border:3px solid var(--v25-primary);border-radius:12px;background:#fff;}
.v25-ic-design i{position:absolute;background:var(--v25-primary);}
.v25-ic-design i:nth-child(1){top:12%;left:12%;right:12%;height:16%;background:var(--v25-accent);border-radius:4px;}
.v25-ic-design i:nth-child(2){top:38%;left:12%;width:30%;bottom:12%;border-radius:4px;}
.v25-ic-design i:nth-child(3){top:38%;right:12%;width:42%;height:16%;border-radius:4px;opacity:.7;}

/* ===== Über-Block ===== */
.v25-about{background:var(--v25-bg-alt);border-top:1px solid var(--v25-line);}
.v25-about-inner{padding:clamp(48px,7vw,84px) 0;display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,5vw,64px);align-items:start;}
.v25-about h2{font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:800;letter-spacing:-.03em;margin:0;}
.v25-about p{font-size:1.0625rem;color:var(--v25-muted);max-width:52ch;margin:0 0 16px;}
.v25-about p:last-child{margin-bottom:0;}

/* ===== Kontakt-CTA ===== */
.v25-cta{padding:clamp(56px,8vw,96px) 0;text-align:center;}
.v25-cta h2{font-size:clamp(1.9rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em;margin:0 auto;max-width:18ch;}
.v25-cta p{color:var(--v25-muted);margin:18px auto 30px;max-width:46ch;font-size:1.0625rem;}

.v25-root a:focus-visible,.v25-root .v25-btn:focus-visible{outline:3px solid var(--v25-accent);outline-offset:3px;border-radius:8px;}

@media (max-width:760px){
  .v25-stats{grid-template-columns:1fr 1fr;}
  .v25-stat:nth-child(3){border-left:0;}
  .v25-stat:nth-child(odd){border-left:0;}
  .v25-stat:nth-child(even){border-left:1px solid var(--v25-line);}
  .v25-stat:nth-child(3),.v25-stat:nth-child(4){border-top:1px solid var(--v25-line);}
  .v25-row{grid-template-columns:1fr;gap:28px;}
  .v25-row .v25-stage{order:-1;max-width:340px;width:100%;}
  .v25-row-flip .v25-stage{order:-1;}
  .v25-row-flip .v25-row-text-col{order:0;}
  .v25-about-inner{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .v25-reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .v25-icon,.v25-cone,.v25-btn i,.v25-link i,.v25-link{transition:none!important;}
}
</style>

<div class="v25-root">

  {{-- ===== Intro / Hero ===== --}}
  <section class="v25-hero v25-wrap">
    <p class="v25-eyebrow v25-reveal">Arthur Kotsch · Lichtenstein, Sachsen</p>
    <h1 class="v25-h1 v25-reveal">Eine Marke.<br><span class="v25-grad-text">Neun Welten.</span></h1>
    <p class="v25-sub v25-reveal">Student Digital Engineering und Entwickler aus Lichtenstein (Sachsen). Apps, Tools, Hosting, IT-Hilfe und mehr — alles unter einem Dach.</p>
    <div class="v25-hero-cta v25-reveal">
      <a class="v25-btn v25-btn-primary" href="/kontakt">Projekt besprechen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
      <a class="v25-btn v25-btn-ghost" href="#v25-welten">Die neun Welten</a>
    </div>

    {{-- Kennzahlen-Leiste --}}
    <div class="v25-stats v25-reveal" role="list" aria-label="Kennzahlen">
      <div class="v25-stat" role="listitem"><div class="v25-stat-num" data-count="22">22</div><div class="v25-stat-label">iOS / Mac-Apps</div></div>
      <div class="v25-stat" role="listitem"><div class="v25-stat-num" data-count="9">9</div><div class="v25-stat-label">Windows-Tools</div></div>
      <div class="v25-stat" role="listitem"><div class="v25-stat-num" data-count="734">734</div><div class="v25-stat-label">Web-Tools</div></div>
      <div class="v25-stat" role="listitem"><div class="v25-stat-num" data-count="1412">1.412</div><div class="v25-stat-label">Artikel</div></div>
    </div>
  </section>

  {{-- ===== Spotlight-Rows ===== --}}
  <div id="v25-welten" class="v25-rows">

    {{-- 01 Apps --}}
    <div class="v25-band">
      <div class="v25-wrap"><div class="v25-row">
        <div class="v25-stage v25-reveal">
          <span class="v25-cone"></span>
          <div class="v25-icon"><span class="v25-ic v25-ic-apps"><span></span><span></span><span></span><span></span></span></div>
        </div>
        <div class="v25-reveal" style="transition-delay:.09s">
          <p class="v25-row-eyebrow">01 — iOS &amp; Mac Apps</p>
          <h2 class="v25-row-title">iOS &amp; Mac Apps</h2>
          <p class="v25-row-text">22 Apps im App Store für iPhone, iPad und Mac, mit regelmäßigen Updates.</p>
          <span class="v25-pill">22 Apps</span><br>
          <a class="v25-link" href="https://ios.kotsch.tech">App Store ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
      </div></div>
    </div>

    {{-- 02 Windows --}}
    <div class="v25-band-alt">
      <div class="v25-wrap"><div class="v25-row v25-row-flip">
        <div class="v25-stage v25-reveal">
          <span class="v25-cone"></span>
          <div class="v25-icon"><span class="v25-ic v25-ic-win"><i></i></span></div>
        </div>
        <div class="v25-row-text-col v25-reveal" style="transition-delay:.09s">
          <p class="v25-row-eyebrow">02 — Windows</p>
          <h2 class="v25-row-title">Windows</h2>
          <p class="v25-row-text">9 Programme — Cleaner, Commander, Notes, Taskmanager, CodeEditor — als Direkt-Download.</p>
          <span class="v25-pill">9 Programme</span><br>
          <a class="v25-link" href="https://windows.kotsch.tech">Zum Download <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
      </div></div>
    </div>

    {{-- 03 Android --}}
    <div class="v25-band">
      <div class="v25-wrap"><div class="v25-row">
        <div class="v25-stage v25-reveal">
          <span class="v25-cone"></span>
          <div class="v25-icon"><span class="v25-ic v25-ic-droid"><i></i><i></i></span></div>
        </div>
        <div class="v25-reveal" style="transition-delay:.09s">
          <p class="v25-row-eyebrow">03 — Android</p>
          <h2 class="v25-row-title">Android</h2>
          <p class="v25-row-text">Native Apps für Android — aktuell in Entwicklung.</p>
          <span class="v25-pill">In Entwicklung</span><br>
          <a class="v25-link" href="https://android.kotsch.tech">Mehr erfahren <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
      </div></div>
    </div>

    {{-- 04 Web-Tools --}}
    <div class="v25-band-alt">
      <div class="v25-wrap"><div class="v25-row v25-row-flip">
        <div class="v25-stage v25-reveal">
          <span class="v25-cone"></span>
          <div class="v25-icon"><span class="v25-ic v25-ic-web"><b></b><i></i></span></div>
        </div>
        <div class="v25-row-text-col v25-reveal" style="transition-delay:.09s">
          <p class="v25-row-eyebrow">04 — Web-Tools</p>
          <h2 class="v25-row-title">Web-Tools</h2>
          <p class="v25-row-text">734 Tools direkt im Browser — ohne Login, ohne Installation.</p>
          <span class="v25-pill">734 Tools</span><br>
          <a class="v25-link" href="https://webtools.kotsch.tech">Tools öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
      </div></div>
    </div>

    {{-- 05 Shop --}}
    <div class="v25-band">
      <div class="v25-wrap"><div class="v25-row">
        <div class="v25-stage v25-reveal">
          <span class="v25-cone"></span>
          <div class="v25-icon"><span class="v25-ic v25-ic-bag"></span></div>
        </div>
        <div class="v25-reveal" style="transition-delay:.09s">
          <p class="v25-row-eyebrow">05 — Shop</p>
          <h2 class="v25-row-title">Shop</h2>
          <p class="v25-row-text">Digitale Produkte mit Sofort-Download.</p>
          <span class="v25-pill">Sofort-Download</span><br>
          <a class="v25-link" href="https://shop.kotsch.tech">Zum Shop <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
      </div></div>
    </div>

    {{-- 06 Hosting --}}
    <div class="v25-band-alt">
      <div class="v25-wrap"><div class="v25-row v25-row-flip">
        <div class="v25-stage v25-reveal">
          <span class="v25-cone"></span>
          <div class="v25-icon"><span class="v25-ic v25-ic-host"><i><b></b></i><i><b></b></i><i><b></b></i></span></div>
        </div>
        <div class="v25-row-text-col v25-reveal" style="transition-delay:.09s">
          <p class="v25-row-eyebrow">06 — Hosting</p>
          <h2 class="v25-row-title">Hosting</h2>
          <p class="v25-row-text">Managed Webhosting sowie vServer / VPS — DSGVO-konform.</p>
          <span class="v25-pill">DSGVO-konform</span><br>
          <a class="v25-link" href="https://hosting.kotsch.tech">Tarife ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
      </div></div>
    </div>

    {{-- 07 News --}}
    <div class="v25-band">
      <div class="v25-wrap"><div class="v25-row">
        <div class="v25-stage v25-reveal">
          <span class="v25-cone"></span>
          <div class="v25-icon"><span class="v25-ic v25-ic-news"><i></i><i></i><i></i></span></div>
        </div>
        <div class="v25-reveal" style="transition-delay:.09s">
          <p class="v25-row-eyebrow">07 — News</p>
          <h2 class="v25-row-title">News</h2>
          <p class="v25-row-text">1.412 Ratgeber &amp; Tutorials rund um Technik und Entwicklung.</p>
          <span class="v25-pill">1.412 Artikel</span><br>
          <a class="v25-link" href="https://news.kotsch.tech">Artikel lesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
      </div></div>
    </div>

    {{-- 08 IT-Hilfe --}}
    <div class="v25-band-alt">
      <div class="v25-wrap"><div class="v25-row v25-row-flip">
        <div class="v25-stage v25-reveal">
          <span class="v25-cone"></span>
          <div class="v25-icon"><span class="v25-ic v25-ic-it"><i></i></span></div>
        </div>
        <div class="v25-row-text-col v25-reveal" style="transition-delay:.09s">
          <p class="v25-row-eyebrow">08 — IT-Hilfe</p>
          <h2 class="v25-row-title">IT-Hilfe</h2>
          <p class="v25-row-text">Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein.</p>
          <span class="v25-pill">Keine Lösung = kein Preis</span><br>
          <a class="v25-link" href="https://it-hilfe.kotsch.tech">Hilfe anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
      </div></div>
    </div>

    {{-- 09 Webdesign --}}
    <div class="v25-band">
      <div class="v25-wrap"><div class="v25-row">
        <div class="v25-stage v25-reveal">
          <span class="v25-cone"></span>
          <div class="v25-icon"><span class="v25-ic v25-ic-design"><i></i><i></i><i></i></span></div>
        </div>
        <div class="v25-reveal" style="transition-delay:.09s">
          <p class="v25-row-eyebrow">09 — Webdesign</p>
          <h2 class="v25-row-title">Webdesign</h2>
          <p class="v25-row-text">Studio für individuelles Webdesign — inklusive 20 Branchen-Demos.</p>
          <span class="v25-pill">20 Branchen-Demos</span><br>
          <a class="v25-link" href="https://webdesign.kotsch.tech">Studio entdecken <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
      </div></div>
    </div>

  </div>

  {{-- ===== Über-Block ===== --}}
  <section class="v25-about">
    <div class="v25-wrap"><div class="v25-about-inner">
      <h2 class="v25-reveal">Eine Person hinter allem</h2>
      <div class="v25-reveal" style="transition-delay:.09s">
        <p>Hinter kotsch.tech steht Arthur Kotsch — Student Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Von nativen Apps über Web-Tools bis zu Hosting und IT-Hilfe entsteht hier alles aus einer Hand.</p>
        <p>Neun Welten, eine klare Linie: nützliche Software, ehrliche Beratung und Technik, die einfach funktioniert.</p>
      </div>
    </div></div>
  </section>

  {{-- ===== Kontakt-CTA ===== --}}
  <section class="v25-cta v25-wrap">
    <h2 class="v25-reveal">Projekt im Kopf? Schreib mir.</h2>
    <p class="v25-reveal" style="transition-delay:.06s">Egal ob App, Website oder IT-Frage — eine kurze Nachricht genügt.</p>
    <div class="v25-reveal" style="transition-delay:.12s">
      <a class="v25-btn v25-btn-primary" href="/kontakt">Zum Kontakt <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
    </div>
  </section>

</div>

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

  // Reveal
  var revs=root.querySelectorAll('.v25-reveal');
  if(reduce||!('IntersectionObserver'in window)){
    revs.forEach(function(el){el.classList.add('v25-in');});
  }else{
    var ro=new IntersectionObserver(function(es){
      es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('v25-in');ro.unobserve(e.target);}});
    },{threshold:.15,rootMargin:'0px 0px -8% 0px'});
    revs.forEach(function(el){ro.observe(el);});
  }

  // Count-up
  var nums=root.querySelectorAll('.v25-stat-num');
  function fmt(n){return n>=1000?n.toLocaleString('de-DE'):String(n);}
  function run(el){
    var target=parseInt(el.getAttribute('data-count'),10)||0;
    if(reduce){el.textContent=fmt(target);return;}
    var start=null,dur=1200;
    function step(ts){
      if(!start)start=ts;
      var p=Math.min((ts-start)/dur,1);
      var eased=1-Math.pow(1-p,3);
      el.textContent=fmt(Math.round(target*eased));
      if(p<1)requestAnimationFrame(step);else el.textContent=fmt(target);
    }
    requestAnimationFrame(step);
  }
  if(nums.length){
    if(reduce||!('IntersectionObserver'in window)){nums.forEach(run);}
    else{
      var co=new IntersectionObserver(function(es){
        es.forEach(function(e){if(e.isIntersecting){run(e.target);co.unobserve(e.target);}});
      },{threshold:.5});
      nums.forEach(function(el){co.observe(el);});
    }
  }

  // Lichtkegel folgt Cursor leicht
  if(!reduce){
    root.querySelectorAll('.v25-stage').forEach(function(st){
      st.addEventListener('mousemove',function(ev){
        var r=st.getBoundingClientRect();
        var x=(ev.clientX-r.left)/r.width-.5;
        var y=(ev.clientY-r.top)/r.height-.5;
        var cone=st.querySelector('.v25-cone');
        if(cone)cone.style.transform='translate('+(x*14)+'px,'+(y*14)+'px)';
      });
      st.addEventListener('mouseleave',function(){
        var cone=st.querySelector('.v25-cone');
        if(cone)cone.style.transform='';
      });
    });
  }
})();
</script>
@endsection