@extends('layouts.app')

@section('title', 'Arthur Kotsch — Cinematic Scroll | KOTSCH.TECH')
@section('meta_description', 'Arthur Kotsch, Student Digital Engineering aus Lichtenstein (Sachsen): 9 Welten als filmische Reise — iOS- & Mac-Apps, Windows-Programme, 734 Web-Tools, Shop, Hosting, News, IT-Hilfe und Webdesign.')

@section('content')
<style>
    /* Globale Chrome ausblenden — diese Variante ist eine eigenständige Seite */
    nav{display:none!important;} footer{display:none!important;} main{padding-top:0!important;}

    .v10-page{
        --v10-black:#0B0D10;
        --v10-blue:#12161D;
        --v10-white:#F4F1EA;
        --v10-grey:#9AA1AC;
        --v10-amber:#E8A33D;
        --v10-cool:#5BA8C9;
        --v10-line:rgba(244,241,234,0.10);
        --v10-ease:cubic-bezier(.22,.61,.36,1);
        background:var(--v10-black);
        color:var(--v10-white);
        font-family:system-ui,'Inter',-apple-system,'Segoe UI',sans-serif;
        -webkit-font-smoothing:antialiased;
        min-height:100vh;
    }
    .v10-page *{box-sizing:border-box;}
    .v10-serif{font-family:'Fraunces','Times New Roman',Georgia,serif;}

    /* Scroll-Snap-Wrapper */
    .v10-scroll{
        height:100vh;
        overflow-y:auto;
        overflow-x:hidden;
        scroll-snap-type:y mandatory;
        scroll-behavior:smooth;
        position:relative;
    }
    .v10-scroll::-webkit-scrollbar{width:0;height:0;}
    .v10-scroll{scrollbar-width:none;}

    .v10-stage{
        position:relative;
        min-height:100vh;
        scroll-snap-align:start;
        display:flex;
        align-items:center;
        padding:clamp(28px,6vw,90px) clamp(24px,7vw,120px) clamp(28px,6vw,90px) clamp(64px,9vw,150px);
        overflow:hidden;
    }

    /* Spotlight, der dem Mauszeiger folgt */
    .v10-stage::before{
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;
        background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%), rgba(232,163,61,0.08), transparent 60%);
        transition:opacity .4s ease;
        z-index:0;
    }
    .v10-stage > *{position:relative;z-index:2;}

    /* ===== Lichtkegel-Scrubber (fixed) ===== */
    .v10-rail{
        position:fixed;
        left:clamp(18px,3.2vw,46px);
        top:14vh;
        bottom:14vh;
        width:2px;
        z-index:40;
        pointer-events:none;
    }
    .v10-rail-track{
        position:absolute;
        inset:0;
        background:var(--v10-line);
    }
    .v10-rail-beam{
        position:absolute;
        left:-0.5px;
        top:0;
        width:3px;
        height:100%;
        transform-origin:top;
        transform:scaleY(0);
        background:linear-gradient(180deg,var(--v10-amber),rgba(232,163,61,0.2));
        box-shadow:0 0 14px rgba(232,163,61,0.6);
        transition:transform .15s linear;
    }
    .v10-dots{
        position:absolute;
        inset:0;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        pointer-events:auto;
    }
    .v10-dot{
        position:relative;
        left:-4px;
        width:10px;height:10px;
        border-radius:50%;
        border:1px solid var(--v10-line);
        background:var(--v10-black);
        cursor:pointer;
        transition:all .35s var(--v10-ease);
    }
    .v10-dot::after{
        content:attr(data-n);
        position:absolute;
        left:18px;top:50%;
        transform:translateY(-50%);
        font-size:.6rem;
        letter-spacing:.25em;
        color:var(--v10-grey);
        opacity:0;
        transition:opacity .3s ease;
        white-space:nowrap;
    }
    .v10-dot:hover::after{opacity:1;}
    .v10-dot.active{
        background:var(--v10-amber);
        border-color:var(--v10-amber);
        box-shadow:0 0 0 4px rgba(232,163,61,0.18);
        animation:v10-pulse 2s infinite ease-in-out;
    }
    @keyframes v10-pulse{
        0%,100%{box-shadow:0 0 0 4px rgba(232,163,61,0.18);}
        50%{box-shadow:0 0 0 8px rgba(232,163,61,0.05);}
    }

    /* ===== HERO ===== */
    .v10-hero{
        background:radial-gradient(900px 480px at 50% -8%, rgba(232,163,61,0.14), transparent 62%), var(--v10-black);
        flex-direction:column;
        justify-content:center;
    }
    .v10-kicker{
        font-size:.8rem;
        letter-spacing:.3em;
        text-transform:uppercase;
        color:var(--v10-amber);
        margin:0 0 22px;
        font-weight:600;
    }
    .v10-hero-title{
        font-size:clamp(3rem,9vw,8rem);
        line-height:.95;
        letter-spacing:-0.02em;
        font-weight:600;
        margin:0;
        max-width:14ch;
    }
    .v10-hero-sub{
        margin:26px 0 0;
        color:var(--v10-grey);
        font-size:clamp(1.05rem,1.6vw,1.4rem);
        max-width:46ch;
    }
    .v10-hero-cta{
        margin-top:40px;
        display:flex;
        gap:14px;
        flex-wrap:wrap;
    }
    .v10-btn{
        display:inline-flex;
        align-items:center;
        gap:10px;
        padding:14px 26px;
        border-radius:999px;
        font-size:.95rem;
        font-weight:600;
        text-decoration:none;
        transition:all .3s var(--v10-ease);
    }
    .v10-btn svg{width:15px;height:15px;flex:0 0 auto;}
    .v10-btn-primary{
        background:var(--v10-amber);
        color:var(--v10-black);
    }
    .v10-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(232,163,61,0.3);}
    .v10-btn-ghost{
        color:var(--v10-white);
        border:1px solid var(--v10-line);
    }
    .v10-btn-ghost:hover{border-color:var(--v10-amber);color:var(--v10-amber);}
    .v10-scrollhint{
        position:absolute;
        bottom:34px;
        left:0;right:0;
        margin:0 auto;
        width:max-content;
        display:flex;
        align-items:center;
        gap:10px;
        color:var(--v10-grey);
        font-size:.78rem;
        letter-spacing:.25em;
        text-transform:uppercase;
    }
    .v10-scrollhint svg{animation:v10-bob 1.8s infinite ease-in-out;color:var(--v10-amber);width:14px;height:14px;}
    @keyframes v10-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
    .v10-counter{
        position:absolute;
        top:30px;right:clamp(24px,5vw,60px);
        font-size:.8rem;letter-spacing:.3em;
        color:var(--v10-grey);
    }
    .v10-counter b{color:var(--v10-amber);font-weight:600;}

    /* ===== STATS ===== */
    .v10-stats-stage{
        min-height:60vh;
        background:linear-gradient(180deg,var(--v10-black),var(--v10-blue));
        justify-content:center;
    }
    .v10-stats{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:clamp(20px,4vw,60px);
        width:100%;
        max-width:1100px;
        margin:0 auto;
    }
    .v10-stat{text-align:left;}
    .v10-stat .num{
        font-size:clamp(2rem,4vw,3.5rem);
        line-height:1;
        color:var(--v10-amber);
        display:block;
    }
    .v10-stat .lbl{
        margin-top:10px;
        color:var(--v10-grey);
        font-size:.92rem;
        letter-spacing:.02em;
    }

    /* ===== WELTEN ===== */
    .v10-world{}
    .v10-world:nth-child(odd){justify-content:flex-start;}
    .v10-ghost{
        position:absolute;
        top:50%;
        right:clamp(10px,4vw,80px);
        transform:translateY(-50%) translateY(var(--gp,0px));
        font-size:clamp(12rem,30vw,28rem);
        line-height:1;
        font-weight:600;
        color:rgba(244,241,234,0.04);
        z-index:1;
        pointer-events:none;
        transition:color .5s ease;
        user-select:none;
    }
    .v10-stage.in .v10-ghost:hover{color:rgba(244,241,234,0.10);}
    .v10-world.alt{justify-content:flex-end;text-align:right;}
    .v10-world.alt .v10-ghost{right:auto;left:clamp(10px,4vw,80px);}
    .v10-world.alt .v10-cta{flex-direction:row-reverse;}
    .v10-world-inner{max-width:620px;}
    .v10-world.alt .v10-world-inner{margin-left:auto;}
    .v10-wkicker{
        font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;
        color:var(--v10-amber);font-weight:600;margin:0 0 18px;
    }
    .v10-wtitle{
        font-size:clamp(2.4rem,6vw,5rem);
        line-height:.98;letter-spacing:-0.02em;font-weight:600;margin:0;
    }
    .v10-wtext{
        margin:22px 0 0;
        color:var(--v10-grey);
        font-size:clamp(1.05rem,1.6vw,1.4rem);
        line-height:1.5;
    }
    .v10-cta{
        margin-top:30px;
        display:inline-flex;
        align-items:center;
        gap:10px;
        color:var(--v10-white);
        text-decoration:none;
        font-weight:600;
        font-size:1.02rem;
        position:relative;
        padding-bottom:6px;
    }
    .v10-cta::after{
        content:"";
        position:absolute;left:0;bottom:0;height:1px;width:100%;
        background:var(--v10-amber);
        transform:scaleX(0);transform-origin:left;
        transition:transform .35s var(--v10-ease);
    }
    .v10-world.alt .v10-cta::after{transform-origin:right;}
    .v10-cta svg{transition:transform .3s var(--v10-ease);color:var(--v10-amber);width:16px;height:16px;flex:0 0 auto;}
    .v10-cta:hover{color:var(--v10-amber);}
    .v10-cta:hover::after{transform:scaleX(1);}
    .v10-cta:hover svg{transform:translateX(6px);}
    .v10-world.alt .v10-cta:hover svg{transform:translateX(-6px);}

    /* ===== ÜBER ===== */
    .v10-about-stage{
        min-height:80vh;
        background:linear-gradient(180deg,var(--v10-blue),var(--v10-black));
        justify-content:center;
    }
    .v10-about{max-width:760px;margin:0 auto;text-align:center;}
    .v10-about p{
        font-size:clamp(1.3rem,2.4vw,2rem);
        line-height:1.45;
        margin:0;
        color:var(--v10-white);
    }
    .v10-about p .mut{color:var(--v10-grey);}

    /* ===== KONTAKT-OUTRO ===== */
    .v10-outro{
        background:radial-gradient(800px 500px at 50% 110%, rgba(232,163,61,0.16), transparent 60%), var(--v10-black);
        flex-direction:column;
        justify-content:center;
        text-align:center;
        align-items:center;
    }
    .v10-outro h2{
        font-size:clamp(2.6rem,8vw,7rem);
        line-height:.95;letter-spacing:-0.02em;font-weight:600;margin:0;
    }
    .v10-outro p{color:var(--v10-grey);margin:22px 0 0;font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:42ch;}
    .v10-sig{
        margin-top:54px;
        padding-top:24px;
        border-top:1px solid var(--v10-line);
        color:var(--v10-grey);
        font-size:.85rem;
        letter-spacing:.04em;
        display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center;
    }
    .v10-sig b{color:var(--v10-white);font-weight:600;}

    /* ===== Reveal ===== */
    .v10-rv{opacity:0;transform:translateY(40px);transition:opacity .8s var(--v10-ease),transform .8s var(--v10-ease);}
    .v10-stage.in .v10-rv{opacity:1;transform:none;}
    .v10-stage.in .v10-rv.d1{transition-delay:.12s;}
    .v10-stage.in .v10-rv.d2{transition-delay:.24s;}
    .v10-stage.in .v10-rv.d3{transition-delay:.36s;}

    /* ===== Responsive ===== */
    @media (max-width:760px){
        .v10-stage{padding:80px 22px 80px 54px;}
        .v10-rail{left:14px;top:10vh;bottom:10vh;}
        .v10-stats{grid-template-columns:repeat(2,1fr);gap:28px 18px;}
        .v10-world.alt{text-align:left;justify-content:flex-start;}
        .v10-world.alt .v10-world-inner{margin-left:0;}
        .v10-world.alt .v10-cta{flex-direction:row;}
        .v10-world.alt .v10-cta::after{transform-origin:left;}
        .v10-world.alt .v10-ghost{left:auto;right:0;}
        .v10-ghost{right:0;font-size:clamp(8rem,40vw,16rem);}
        .v10-counter{right:18px;}
        .v10-hero-title,.v10-wtitle,.v10-outro h2{max-width:none;}
    }
    @media (max-width:380px){
        .v10-stage{padding:72px 18px 72px 48px;}
        .v10-stats{grid-template-columns:1fr 1fr;gap:22px 14px;}
    }
    @media (prefers-reduced-motion:reduce){
        .v10-rv{opacity:1!important;transform:none!important;}
        .v10-scroll{scroll-behavior:auto;}
        .v10-dot.active{animation:none;}
        .v10-scrollhint i{animation:none;}
        .v10-ghost{transform:translateY(-50%)!important;}
    }
</style>

<div class="v10-page">
<div class="v10-scroll" id="v10scroll">

    {{-- Lichtkegel-Scrubber --}}
    <div class="v10-rail" aria-hidden="true">
        <div class="v10-rail-track"></div>
        <div class="v10-rail-beam" id="v10beam"></div>
        <div class="v10-dots" id="v10dots"></div>
    </div>

    {{-- 01 — HERO --}}
    <section class="v10-stage v10-hero" data-snap>
        <span class="v10-counter"><b>01</b> / 13</span>
        <p class="v10-kicker v10-rv">Arthur Kotsch · Lichtenstein, Sachsen</p>
        <h1 class="v10-hero-title v10-serif v10-rv d1">Eine Person. Neun Welten.</h1>
        <p class="v10-hero-sub v10-rv d2">Student Digital Engineering &amp; Entwickler. Apps, Tools, Hosting und Hilfe — eine durchgehende Reise durch alles, was ich baue.</p>
        <div class="v10-hero-cta v10-rv d3">
            <a class="v10-btn v10-btn-primary" href="#v10w1">Die Reise beginnen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M19 12l-7 7-7-7"/></svg></a>
            <a class="v10-btn v10-btn-ghost" href="/kontakt">Kontakt</a>
        </div>
        <div class="v10-scrollhint" aria-hidden="true">scroll <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></div>
    </section>

    {{-- STATS --}}
    <section class="v10-stage v10-stats-stage" data-snap>
        <div class="v10-stats">
            <div class="v10-stat v10-rv">
                <span class="num v10-serif">22</span>
                <span class="lbl">iOS &amp; Mac Apps</span>
            </div>
            <div class="v10-stat v10-rv d1">
                <span class="num v10-serif">9</span>
                <span class="lbl">Windows-Tools</span>
            </div>
            <div class="v10-stat v10-rv d2">
                <span class="num v10-serif">734</span>
                <span class="lbl">Web-Tools</span>
            </div>
            <div class="v10-stat v10-rv d3">
                <span class="num v10-serif">1.412</span>
                <span class="lbl">Artikel</span>
            </div>
        </div>
    </section>

    {{-- ===== 9 WELTEN ===== --}}

    {{-- 01 iOS & Mac --}}
    <section class="v10-stage v10-world" id="v10w1" data-snap data-world="1" style="background:linear-gradient(120deg,var(--v10-black),#0E1418);">
        <span class="v10-ghost v10-serif" data-parallax>01</span>
        <div class="v10-world-inner">
            <p class="v10-wkicker v10-rv">Welt 01 / iOS &amp; Mac Apps</p>
            <h2 class="v10-wtitle v10-serif v10-rv d1">iOS &amp; Mac Apps</h2>
            <p class="v10-wtext v10-rv d2">22 Apps im App Store für iPhone, iPad und Mac, mit regelmäßigen Updates.</p>
            <a class="v10-cta v10-rv d3" href="https://ios.kotsch.tech">22 Apps ansehen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
        </div>
    </section>

    {{-- 02 Windows --}}
    <section class="v10-stage v10-world alt" data-snap data-world="2" style="background:linear-gradient(120deg,var(--v10-black),#161214);">
        <span class="v10-ghost v10-serif" data-parallax>02</span>
        <div class="v10-world-inner">
            <p class="v10-wkicker v10-rv">Welt 02 / Windows</p>
            <h2 class="v10-wtitle v10-serif v10-rv d1">Windows</h2>
            <p class="v10-wtext v10-rv d2">9 Programme: Cleaner, Commander, Notes, Taskmanager, CodeEditor — Direkt-Download.</p>
            <a class="v10-cta v10-rv d3" href="https://windows.kotsch.tech">Programme laden <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
        </div>
    </section>

    {{-- 03 Android --}}
    <section class="v10-stage v10-world" data-snap data-world="3" style="background:linear-gradient(120deg,var(--v10-black),#0C1410);">
        <span class="v10-ghost v10-serif" data-parallax>03</span>
        <div class="v10-world-inner">
            <p class="v10-wkicker v10-rv">Welt 03 / Android</p>
            <h2 class="v10-wtitle v10-serif v10-rv d1">Android</h2>
            <p class="v10-wtext v10-rv d2">Native Apps, aktuell in Entwicklung.</p>
            <a class="v10-cta v10-rv d3" href="https://android.kotsch.tech">Mehr erfahren <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
        </div>
    </section>

    {{-- 04 Web-Tools --}}
    <section class="v10-stage v10-world alt" data-snap data-world="4" style="background:linear-gradient(120deg,var(--v10-black),#0C1218);">
        <span class="v10-ghost v10-serif" data-parallax>04</span>
        <div class="v10-world-inner">
            <p class="v10-wkicker v10-rv">Welt 04 / Web-Tools</p>
            <h2 class="v10-wtitle v10-serif v10-rv d1">Web-Tools</h2>
            <p class="v10-wtext v10-rv d2">734 Tools direkt im Browser, ohne Login, ohne Installation.</p>
            <a class="v10-cta v10-rv d3" href="https://webtools.kotsch.tech">734 Tools öffnen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
        </div>
    </section>

    {{-- 05 Shop --}}
    <section class="v10-stage v10-world" data-snap data-world="5" style="background:linear-gradient(120deg,var(--v10-black),#15110E);">
        <span class="v10-ghost v10-serif" data-parallax>05</span>
        <div class="v10-world-inner">
            <p class="v10-wkicker v10-rv">Welt 05 / Shop</p>
            <h2 class="v10-wtitle v10-serif v10-rv d1">Shop</h2>
            <p class="v10-wtext v10-rv d2">Digitale Produkte mit Sofort-Download.</p>
            <a class="v10-cta v10-rv d3" href="https://shop.kotsch.tech">Zum Shop <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
        </div>
    </section>

    {{-- 06 Hosting --}}
    <section class="v10-stage v10-world alt" data-snap data-world="6" style="background:linear-gradient(120deg,var(--v10-black),#0C1416);">
        <span class="v10-ghost v10-serif" data-parallax>06</span>
        <div class="v10-world-inner">
            <p class="v10-wkicker v10-rv">Welt 06 / Hosting</p>
            <h2 class="v10-wtitle v10-serif v10-rv d1">Hosting</h2>
            <p class="v10-wtext v10-rv d2">Managed Webhosting und vServer/VPS, DSGVO-konform.</p>
            <a class="v10-cta v10-rv d3" href="https://hosting.kotsch.tech">Tarife ansehen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
        </div>
    </section>

    {{-- 07 News --}}
    <section class="v10-stage v10-world" data-snap data-world="7" style="background:linear-gradient(120deg,var(--v10-black),#101018);">
        <span class="v10-ghost v10-serif" data-parallax>07</span>
        <div class="v10-world-inner">
            <p class="v10-wkicker v10-rv">Welt 07 / News</p>
            <h2 class="v10-wtitle v10-serif v10-rv d1">News</h2>
            <p class="v10-wtext v10-rv d2">1.412 Ratgeber und Tutorials.</p>
            <a class="v10-cta v10-rv d3" href="https://news.kotsch.tech">Artikel lesen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
        </div>
    </section>

    {{-- 08 IT-Hilfe --}}
    <section class="v10-stage v10-world alt" data-snap data-world="8" style="background:linear-gradient(120deg,var(--v10-black),#141015);">
        <span class="v10-ghost v10-serif" data-parallax>08</span>
        <div class="v10-world-inner">
            <p class="v10-wkicker v10-rv">Welt 08 / IT-Hilfe</p>
            <h2 class="v10-wtitle v10-serif v10-rv d1">IT-Hilfe</h2>
            <p class="v10-wtext v10-rv d2">Vor Ort und Remote in der Region Glauchau–Lichtenstein. Keine Lösung = kein Preis.</p>
            <a class="v10-cta v10-rv d3" href="https://it-hilfe.kotsch.tech">Hilfe anfragen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
        </div>
    </section>

    {{-- 09 Webdesign --}}
    <section class="v10-stage v10-world" data-snap data-world="9" style="background:linear-gradient(120deg,var(--v10-black),#0E1117);">
        <span class="v10-ghost v10-serif" data-parallax>09</span>
        <div class="v10-world-inner">
            <p class="v10-wkicker v10-rv">Welt 09 / Webdesign</p>
            <h2 class="v10-wtitle v10-serif v10-rv d1">Webdesign</h2>
            <p class="v10-wtext v10-rv d2">Studio mit 20 Branchen-Demos.</p>
            <a class="v10-cta v10-rv d3" href="https://webdesign.kotsch.tech">Studio besuchen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
        </div>
    </section>

    {{-- ÜBER --}}
    <section class="v10-stage v10-about-stage" data-snap>
        <div class="v10-about">
            <p class="v10-rv"><span class="mut">Ich bin</span> Arthur Kotsch, <span class="mut">Student Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Von der App über das Web-Tool bis zur IT-Hilfe vor Ort — alles aus einer Hand.</span></p>
        </div>
    </section>

    {{-- KONTAKT-OUTRO --}}
    <section class="v10-stage v10-outro" data-snap>
        <span class="v10-counter"><b>13</b> / 13</span>
        <h2 class="v10-serif v10-rv">Lass uns reden.</h2>
        <p class="v10-rv d1">Projekt, Frage oder einfach ein Problem, das gelöst werden will — schreib mir.</p>
        <div class="v10-hero-cta v10-rv d2" style="margin-top:38px;justify-content:center;">
            <a class="v10-btn v10-btn-primary" href="/kontakt">Kontakt aufnehmen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
        </div>
        <div class="v10-sig v10-rv d3">
            <span><b>Arthur Kotsch</b> · kotsch.tech</span>
            <span>Lichtenstein, Sachsen</span>
        </div>
    </section>

</div>
</div>

<script>
(function(){
    var scroller=document.getElementById('v10scroll');
    if(!scroller) return;
    var stages=Array.prototype.slice.call(scroller.querySelectorAll('.v10-stage'));
    var worlds=Array.prototype.slice.call(scroller.querySelectorAll('.v10-world'));
    var beam=document.getElementById('v10beam');
    var dotsWrap=document.getElementById('v10dots');
    var reduce=window.matchMedia('(prefers-reduced-motion:reduce)').matches;

    // Kapitelpunkte 01–09 erzeugen
    var dots=[];
    for(var i=0;i<worlds.length;i++){
        var d=document.createElement('a');
        d.className='v10-dot';
        d.href='#';
        var n=(i+1<10?'0':'')+(i+1);
        d.setAttribute('data-n',n);
        d.setAttribute('aria-label','Welt '+n);
        (function(w){ d.addEventListener('click',function(e){e.preventDefault();w.scrollIntoView({behavior:reduce?'auto':'smooth'});}); })(worlds[i]);
        dotsWrap.appendChild(d);
        dots.push(d);
    }

    // (1) IntersectionObserver: Reveals + aktiver Kapitelpunkt
    var io=new IntersectionObserver(function(entries){
        entries.forEach(function(en){
            if(en.isIntersecting){
                en.target.classList.add('in');
                var wi=worlds.indexOf(en.target);
                if(wi>-1){ dots.forEach(function(x,xi){x.classList.toggle('active',xi===wi);}); }
            }
        });
    },{root:scroller,threshold:0.45});
    stages.forEach(function(s){io.observe(s);});

    // (2) Scroll: Lichtkegel-Höhe + Parallax der Geistnummern
    function onScroll(){
        var max=scroller.scrollHeight-scroller.clientHeight;
        var p=max>0?scroller.scrollTop/max:0;
        if(beam) beam.style.transform='scaleY('+p.toFixed(4)+')';
        if(!reduce){
            worlds.forEach(function(w){
                var g=w.querySelector('[data-parallax]');
                if(!g) return;
                var r=w.getBoundingClientRect();
                var off=(r.top+r.height/2 - scroller.clientHeight/2);
                g.style.setProperty('--gp',(off*-0.06).toFixed(1)+'px');
            });
        }
    }
    scroller.addEventListener('scroll',onScroll,{passive:true});
    onScroll();

    // (3) Mousemove: Spotlight-CSS-Vars je Bühne
    if(!reduce){
        stages.forEach(function(s){
            s.addEventListener('mousemove',function(e){
                var r=s.getBoundingClientRect();
                s.style.setProperty('--mx',((e.clientX-r.left)/r.width*100)+'%');
                s.style.setProperty('--my',((e.clientY-r.top)/r.height*100)+'%');
            });
        });
    }
})();
</script>
@endsection