@extends('layouts.app')

@section('title', 'Arthur Kotsch — INDEX | KOTSCH.TECH')
@section('meta_description', 'Arthur Kotsch, Student Digital Engineering aus Lichtenstein (Sachsen): 9 Welten als typografischer Index — 22 iOS- & Mac-Apps, 9 Windows-Programme, 734 Web-Tools, Shop, Hosting, 1.412 Artikel, IT-Hilfe und Webdesign.')

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

    .v16-page{
        --v16-ink:#0A0A0A;
        --v16-paper:#F4F1EA;
        --v16-accent:#FF3B14;
        --v16-muted:#6E685C;
        --v16-line:rgba(10,10,10,0.12);
        --v16-ease:cubic-bezier(.22,.61,.36,1);
        background:var(--v16-paper);
        color:var(--v16-ink);
        font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;
        -webkit-font-smoothing:antialiased;
        text-rendering:optimizeLegibility;
        min-height:100vh;
        overflow-x:hidden;
    }
    .v16-page *{box-sizing:border-box;margin:0;padding:0;min-width:0;}
    .v16-mono{font-family:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;}

    .v16-page a{color:inherit;text-decoration:none;}
    .v16-page a:focus-visible,
    .v16-page button:focus-visible{
        outline:2px solid var(--v16-accent);
        outline-offset:4px;
        border-radius:2px;
    }

    /* ---------- Topbar ---------- */
    .v16-top{
        display:flex;align-items:center;justify-content:space-between;
        gap:1rem;
        padding:1.6rem 6vw;
        border-bottom:1px solid var(--v16-line);
    }
    .v16-brand{
        font-size:clamp(.78rem,1.6vw,.95rem);
        font-weight:700;
        letter-spacing:0.12em;
        text-transform:uppercase;
    }
    .v16-top-link{
        font-size:clamp(.72rem,1.6vw,.9rem);
        font-weight:600;
        letter-spacing:0.1em;
        text-transform:uppercase;
        position:relative;
        transition:color .35s var(--v16-ease);
    }
    .v16-top-link .v16-arr{display:inline-block;transition:transform .35s var(--v16-ease);}
    .v16-top-link:hover{color:var(--v16-accent);}
    .v16-top-link:hover .v16-arr{transform:translate(3px,-3px);}

    /* ---------- Hero ---------- */
    .v16-hero{
        padding:clamp(4rem,12vh,9rem) 6vw clamp(3rem,8vh,6rem);
    }
    .v16-kicker{
        font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        font-size:clamp(.7rem,1.5vw,.82rem);
        letter-spacing:0.22em;
        text-transform:uppercase;
        color:var(--v16-muted);
        margin-bottom:clamp(1.4rem,4vh,2.6rem);
        display:flex;align-items:center;gap:.7rem;
    }
    .v16-kicker::before{
        content:"";width:clamp(28px,5vw,56px);height:2px;background:var(--v16-ink);flex:none;
    }
    .v16-display{
        font-weight:800;
        letter-spacing:-0.04em;
        line-height:0.86;
        font-size:clamp(3rem,13vw,12rem);
        text-transform:uppercase;
    }
    .v16-display .v16-line2{display:block;}
    .v16-em{color:var(--v16-accent);}
    .v16-sub{
        margin-top:clamp(1.6rem,4vh,2.8rem);
        max-width:62ch;
        font-size:clamp(.82rem,1.7vw,1.05rem);
        font-weight:400;
        letter-spacing:0.02em;
        line-height:1.6;
        color:var(--v16-muted);
        text-transform:uppercase;
    }
    .v16-sub strong{color:var(--v16-ink);font-weight:700;}

    /* ---------- Stats-Laufband ---------- */
    .v16-stats{
        border-top:1px solid var(--v16-line);
        border-bottom:1px solid var(--v16-line);
        overflow:hidden;
        white-space:nowrap;
        padding:1.1rem 0;
    }
    .v16-stats-track{
        display:inline-flex;
        gap:0;
        will-change:transform;
        animation:v16-marquee 38s linear infinite;
    }
    .v16-stats-track:hover{animation-play-state:paused;}
    .v16-stat{
        font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        font-size:clamp(.74rem,1.6vw,.95rem);
        letter-spacing:0.12em;
        text-transform:uppercase;
        color:var(--v16-ink);
        padding:0 1.6rem;
        display:inline-flex;align-items:center;gap:1.6rem;
    }
    .v16-stat::after{content:"·";color:var(--v16-accent);font-weight:700;}
    .v16-stat b{font-weight:700;}
    @keyframes v16-marquee{
        from{transform:translateX(0);}
        to{transform:translateX(-50%);}
    }

    /* ---------- Index-Sektion ---------- */
    .v16-index-wrap{
        padding:clamp(4rem,12vh,9rem) 6vw clamp(3rem,8vh,6rem);
    }
    .v16-section-head{
        display:flex;align-items:baseline;justify-content:space-between;
        gap:1rem;flex-wrap:wrap;
        margin-bottom:clamp(2rem,6vh,4rem);
    }
    .v16-section-title{
        font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        font-size:clamp(.74rem,1.6vw,.92rem);
        letter-spacing:0.22em;
        text-transform:uppercase;
        color:var(--v16-ink);
    }
    .v16-section-meta{
        font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        font-size:clamp(.7rem,1.5vw,.85rem);
        letter-spacing:0.14em;
        text-transform:uppercase;
        color:var(--v16-muted);
    }

    .v16-index{list-style:none;}
    .v16-row{
        position:relative;
        display:block;
        border-top:1px solid var(--v16-line);
        /* Scroll-Reveal Startzustand */
        opacity:0;
        transform:translateY(40px);
        transition:opacity .7s var(--v16-ease), transform .7s var(--v16-ease);
    }
    .v16-row:last-child{border-bottom:1px solid var(--v16-line);}
    .v16-row.v16-in{opacity:1;transform:none;}

    /* wachsende Akzent-Linie oben auf der Zeile */
    .v16-row .v16-grow{
        position:absolute;top:-1px;left:0;right:0;height:2px;
        background:var(--v16-accent);
        transform:scaleX(0);
        transform-origin:left center;
        transition:transform .5s var(--v16-ease);
    }
    .v16-row-inner{
        display:grid;
        grid-template-columns:auto 1fr auto;
        align-items:center;
        gap:clamp(1rem,3vw,2.4rem);
        padding:clamp(1.3rem,3.4vh,2.2rem) 0;
        transition:transform .45s var(--v16-ease);
    }
    .v16-num{
        font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        font-size:clamp(.85rem,1.8vw,1.2rem);
        letter-spacing:0.06em;
        color:var(--v16-muted);
        transition:color .35s var(--v16-ease);
        align-self:flex-start;
        padding-top:.25em;
    }
    .v16-title{
        font-weight:800;
        letter-spacing:-0.025em;
        line-height:0.95;
        font-size:clamp(1.8rem,5vw,4rem);
        text-transform:uppercase;
    }
    .v16-fact{
        max-height:0;
        opacity:0;
        overflow:hidden;
        margin-top:0;
        font-size:clamp(.78rem,1.5vw,.98rem);
        letter-spacing:0.02em;
        line-height:1.55;
        color:var(--v16-muted);
        transition:max-height .5s var(--v16-ease), opacity .45s var(--v16-ease), margin-top .5s var(--v16-ease);
    }
    .v16-domain{
        font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        font-size:clamp(.66rem,1.4vw,.85rem);
        letter-spacing:0.08em;
        text-transform:lowercase;
        color:var(--v16-muted);
        text-align:right;
        align-self:flex-start;
        padding-top:.45em;
        white-space:nowrap;
        transition:color .35s var(--v16-ease);
    }
    .v16-domain .v16-arr{display:inline-block;transition:transform .35s var(--v16-ease);}

    /* Hover-Reveal (Pointer-Geräte) */
    @media (hover:hover){
        .v16-index:hover .v16-row{opacity:.45;}
        .v16-index:hover .v16-row:hover{opacity:1;}
    }
    .v16-row:hover .v16-row-inner,
    .v16-row:focus-within .v16-row-inner{transform:translateX(clamp(10px,2vw,24px));}
    .v16-row:hover .v16-grow,
    .v16-row:focus-within .v16-grow{transform:scaleX(1);}
    .v16-row:hover .v16-num,
    .v16-row:focus-within .v16-num{color:var(--v16-accent);}
    .v16-row:hover .v16-domain,
    .v16-row:focus-within .v16-domain{color:var(--v16-ink);}
    .v16-row:hover .v16-domain .v16-arr,
    .v16-row:focus-within .v16-domain .v16-arr{transform:translate(8px,-3px);color:var(--v16-accent);}
    .v16-row:hover .v16-fact,
    .v16-row:focus-within .v16-fact{
        max-height:6rem;
        opacity:1;
        margin-top:.9rem;
    }
    /* Reveal-Sektion: Fact unter dem Titel, volle Breite */
    .v16-mid{grid-column:2;min-width:0;}

    /* ---------- Über-Block ---------- */
    .v16-about{
        padding:clamp(4rem,12vh,9rem) 6vw;
        border-top:1px solid var(--v16-line);
        display:grid;
        grid-template-columns:1fr;
        gap:clamp(1.4rem,4vh,2.4rem);
        max-width:78ch;
    }
    .v16-about-label{
        font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        font-size:clamp(.72rem,1.5vw,.88rem);
        letter-spacing:0.22em;
        text-transform:uppercase;
        color:var(--v16-muted);
    }
    .v16-about-text{
        font-size:clamp(1.05rem,2.8vw,1.9rem);
        font-weight:600;
        letter-spacing:-0.01em;
        line-height:1.3;
    }
    .v16-about-text .v16-em{font-weight:800;}

    /* ---------- Footer-CTA ---------- */
    .v16-foot{
        padding:clamp(4rem,12vh,10rem) 6vw clamp(2.4rem,6vh,4rem);
        border-top:1px solid var(--v16-line);
    }
    .v16-cta{
        display:inline-block;
        font-weight:800;
        letter-spacing:-0.035em;
        line-height:0.9;
        text-transform:uppercase;
        font-size:clamp(2.6rem,10vw,8rem);
        transition:color .4s var(--v16-ease);
    }
    .v16-cta .v16-arr{display:inline-block;transition:transform .4s var(--v16-ease);color:var(--v16-accent);}
    .v16-cta:hover{color:var(--v16-accent);}
    .v16-cta:hover .v16-arr{transform:translate(.12em,-.1em);}
    .v16-foot-meta{
        margin-top:clamp(2.4rem,6vh,4rem);
        display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
        font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        font-size:clamp(.68rem,1.4vw,.82rem);
        letter-spacing:0.1em;
        text-transform:uppercase;
        color:var(--v16-muted);
    }
    .v16-foot-meta a:hover{color:var(--v16-accent);}

    /* ---------- Responsive ---------- */
    @media (max-width:640px){
        .v16-row-inner{
            grid-template-columns:auto 1fr;
            row-gap:.4rem;
        }
        .v16-domain{
            grid-column:2;
            text-align:left;
            padding-top:.2em;
            white-space:normal;
            overflow-wrap:anywhere;
        }
        .v16-mid{grid-column:1 / -1;}
        .v16-num{grid-row:1;}
        .v16-row:hover .v16-fact,
        .v16-row:focus-within .v16-fact{max-height:8rem;}
    }

    /* ---------- Reduced Motion ---------- */
    @media (prefers-reduced-motion:reduce){
        .v16-page *,
        .v16-row,
        .v16-row-inner,
        .v16-grow,
        .v16-fact,
        .v16-stats-track,
        .v16-arr{
            transition:none!important;
            animation:none!important;
            transform:none!important;
        }
        .v16-row{opacity:1!important;}
        .v16-stats-track{animation:none!important;}
        /* Fact dauerhaft sichtbar, wenn keine Bewegung erwünscht */
        .v16-fact{max-height:none;opacity:1;margin-top:.9rem;}
    }
</style>

<div class="v16-page">

    {{-- Topbar --}}
    <header class="v16-top">
        <span class="v16-brand">KOTSCH.TECH</span>
        <a class="v16-top-link" href="/kontakt">Kontakt <span class="v16-arr">↗</span></a>
    </header>

    {{-- Statement-Hero --}}
    <section class="v16-hero">
        <p class="v16-kicker">Index — 09 Welten · Eine Person</p>
        <h1 class="v16-display">
            Arthur<span class="v16-line2">Kotsch <span class="v16-em">baut.</span></span>
        </h1>
        <p class="v16-sub">
            <strong>Student Digital Engineering</strong> · Entwickler · Lichtenstein (Sachsen).
            Apps, Tools, Hosting und Hilfe — alles unter einem Namen.
        </p>
    </section>

    {{-- Stats-Laufband --}}
    <section class="v16-stats" aria-label="Kennzahlen">
        <div class="v16-stats-track">
            <span class="v16-stat"><b>22</b> iOS/Mac-Apps</span>
            <span class="v16-stat"><b>9</b> Windows-Tools</span>
            <span class="v16-stat"><b>734</b> Web-Tools</span>
            <span class="v16-stat"><b>1.412</b> Artikel</span>
            {{-- Duplikat für nahtloses Laufband --}}
            <span class="v16-stat" aria-hidden="true"><b>22</b> iOS/Mac-Apps</span>
            <span class="v16-stat" aria-hidden="true"><b>9</b> Windows-Tools</span>
            <span class="v16-stat" aria-hidden="true"><b>734</b> Web-Tools</span>
            <span class="v16-stat" aria-hidden="true"><b>1.412</b> Artikel</span>
        </div>
    </section>

    {{-- DER INDEX --}}
    <section class="v16-index-wrap">
        <div class="v16-section-head">
            <h2 class="v16-section-title">Der Index</h2>
            <span class="v16-section-meta">Hover öffnet · Klick öffnet die Welt</span>
        </div>

        <ul class="v16-index">
            <li>
                <a class="v16-row" href="https://ios.kotsch.tech">
                    <span class="v16-grow" aria-hidden="true"></span>
                    <div class="v16-row-inner">
                        <span class="v16-num">01</span>
                        <span class="v16-mid">
                            <span class="v16-title">iOS &amp; Mac Apps</span>
                            <span class="v16-fact">22 Apps im App Store, iPhone/iPad/Mac, regelmäßige Updates.</span>
                        </span>
                        <span class="v16-domain">ios.kotsch.tech <span class="v16-arr">↗</span></span>
                    </div>
                </a>
            </li>
            <li>
                <a class="v16-row" href="https://windows.kotsch.tech">
                    <span class="v16-grow" aria-hidden="true"></span>
                    <div class="v16-row-inner">
                        <span class="v16-num">02</span>
                        <span class="v16-mid">
                            <span class="v16-title">Windows</span>
                            <span class="v16-fact">9 Programme — Cleaner, Commander, Notes, Taskmanager, CodeEditor. Direkt-Download.</span>
                        </span>
                        <span class="v16-domain">windows.kotsch.tech <span class="v16-arr">↗</span></span>
                    </div>
                </a>
            </li>
            <li>
                <a class="v16-row" href="https://android.kotsch.tech">
                    <span class="v16-grow" aria-hidden="true"></span>
                    <div class="v16-row-inner">
                        <span class="v16-num">03</span>
                        <span class="v16-mid">
                            <span class="v16-title">Android</span>
                            <span class="v16-fact">Native Apps, in Entwicklung.</span>
                        </span>
                        <span class="v16-domain">android.kotsch.tech <span class="v16-arr">↗</span></span>
                    </div>
                </a>
            </li>
            <li>
                <a class="v16-row" href="https://webtools.kotsch.tech">
                    <span class="v16-grow" aria-hidden="true"></span>
                    <div class="v16-row-inner">
                        <span class="v16-num">04</span>
                        <span class="v16-mid">
                            <span class="v16-title">Web-Tools</span>
                            <span class="v16-fact">734 Tools direkt im Browser — ohne Login, ohne Installation.</span>
                        </span>
                        <span class="v16-domain">webtools.kotsch.tech <span class="v16-arr">↗</span></span>
                    </div>
                </a>
            </li>
            <li>
                <a class="v16-row" href="https://shop.kotsch.tech">
                    <span class="v16-grow" aria-hidden="true"></span>
                    <div class="v16-row-inner">
                        <span class="v16-num">05</span>
                        <span class="v16-mid">
                            <span class="v16-title">Shop</span>
                            <span class="v16-fact">Digitale Produkte mit Sofort-Download.</span>
                        </span>
                        <span class="v16-domain">shop.kotsch.tech <span class="v16-arr">↗</span></span>
                    </div>
                </a>
            </li>
            <li>
                <a class="v16-row" href="https://hosting.kotsch.tech">
                    <span class="v16-grow" aria-hidden="true"></span>
                    <div class="v16-row-inner">
                        <span class="v16-num">06</span>
                        <span class="v16-mid">
                            <span class="v16-title">Hosting</span>
                            <span class="v16-fact">Managed Webhosting, vServer/VPS, DSGVO-konform.</span>
                        </span>
                        <span class="v16-domain">hosting.kotsch.tech <span class="v16-arr">↗</span></span>
                    </div>
                </a>
            </li>
            <li>
                <a class="v16-row" href="https://news.kotsch.tech">
                    <span class="v16-grow" aria-hidden="true"></span>
                    <div class="v16-row-inner">
                        <span class="v16-num">07</span>
                        <span class="v16-mid">
                            <span class="v16-title">News</span>
                            <span class="v16-fact">1.412 Ratgeber &amp; Tutorials rund um Technik.</span>
                        </span>
                        <span class="v16-domain">news.kotsch.tech <span class="v16-arr">↗</span></span>
                    </div>
                </a>
            </li>
            <li>
                <a class="v16-row" href="https://it-hilfe.kotsch.tech">
                    <span class="v16-grow" aria-hidden="true"></span>
                    <div class="v16-row-inner">
                        <span class="v16-num">08</span>
                        <span class="v16-mid">
                            <span class="v16-title">IT-Hilfe</span>
                            <span class="v16-fact">Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein. Keine Lösung = kein Preis.</span>
                        </span>
                        <span class="v16-domain">it-hilfe.kotsch.tech <span class="v16-arr">↗</span></span>
                    </div>
                </a>
            </li>
            <li>
                <a class="v16-row" href="https://webdesign.kotsch.tech">
                    <span class="v16-grow" aria-hidden="true"></span>
                    <div class="v16-row-inner">
                        <span class="v16-num">09</span>
                        <span class="v16-mid">
                            <span class="v16-title">Webdesign</span>
                            <span class="v16-fact">Studio &amp; 20 Branchen-Demos.</span>
                        </span>
                        <span class="v16-domain">webdesign.kotsch.tech <span class="v16-arr">↗</span></span>
                    </div>
                </a>
            </li>
        </ul>
    </section>

    {{-- Über --}}
    <section class="v16-about">
        <span class="v16-about-label">Über</span>
        <p class="v16-about-text">
            Eine Person, neun Welten. Vom App Store bis zum vServer, vom Web-Tool bis zur
            IT-Hilfe vor Ort — <span class="v16-em">gebaut, gepflegt und betreut</span>
            aus Lichtenstein in Sachsen.
        </p>
    </section>

    {{-- Footer-CTA --}}
    <footer class="v16-foot">
        <a class="v16-cta" href="/kontakt">Lass uns bauen. <span class="v16-arr">↗</span></a>
        <div class="v16-foot-meta">
            <span>Arthur Kotsch</span>
            <span>Lichtenstein (Sachsen)</span>
            <a href="/kontakt">Kontakt ↗</a>
            <span>© {{ date('Y') }} kotsch.tech</span>
        </div>
    </footer>

</div>

<script>
(function(){
    var rows = document.querySelectorAll('.v16-page .v16-row');
    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches;
    if(reduce || !('IntersectionObserver' in window)){
        rows.forEach(function(r){ r.classList.add('v16-in'); });
        return;
    }
    var io = new IntersectionObserver(function(entries){
        entries.forEach(function(e){
            if(e.isIntersecting){
                var i = Array.prototype.indexOf.call(rows, e.target);
                e.target.style.transitionDelay = (Math.max(0,i) * 60) + 'ms';
                e.target.classList.add('v16-in');
                io.unobserve(e.target);
            }
        });
    }, {threshold:0.18, rootMargin:'0px 0px -8% 0px'});
    rows.forEach(function(r){ io.observe(r); });
})();
</script>
@endsection