@extends('layouts.app')

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

    /* ===== Variante 6 — "Das Raster" (Swiss / International Typographic Style) ===== */
    .v6-root{
        --v6-paper:#FFFFFF;
        --v6-ink:#0A0A0A;
        --v6-line:#E5E5E5;
        --v6-red:#FF3B00;
        background:var(--v6-paper);
        color:var(--v6-ink);
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight:400;
        -webkit-font-smoothing:antialiased;
        line-height:1.5;
        width:100%;
        overflow-x:hidden;
    }
    .v6-root *{box-sizing:border-box;}
    .v6-root .v6-grid > *{min-width:0;}
    .v6-root a:focus-visible{outline:2px solid var(--v6-red);outline-offset:3px;}

    .v6-wrap{
        max-width:1280px;
        margin:0 auto;
        padding:0 24px;
    }
    .v6-grid{
        display:grid;
        grid-template-columns:repeat(12,1fr);
        gap:0;
    }

    /* ===== 1. Kopfzeile (Hairline-Leiste) ===== */
    .v6-topbar{
        border-top:1px solid var(--v6-ink);
        border-bottom:1px solid var(--v6-line);
    }
    .v6-topbar .v6-grid{align-items:stretch;}
    .v6-top-cell{
        grid-column:span 4;
        padding:12px 0;
        font-size:.72rem;
        letter-spacing:.08em;
        text-transform:uppercase;
        font-weight:700;
        display:flex;
        align-items:center;
    }
    .v6-top-mid{justify-content:center;border-left:1px solid var(--v6-line);border-right:1px solid var(--v6-line);padding-left:16px;padding-right:16px;font-weight:400;}
    .v6-top-right{justify-content:flex-end;font-weight:400;}

    /* ===== 2. Hero ===== */
    .v6-hero{padding:64px 0 96px;border-bottom:1px solid var(--v6-line);}
    .v6-hero .v6-grid{align-items:start;}
    .v6-hero-head{grid-column:1 / span 8;}
    .v6-kicker{
        font-size:.72rem;
        letter-spacing:.08em;
        text-transform:uppercase;
        font-weight:700;
        margin:0 0 28px;
        display:flex;
        gap:14px;
        align-items:center;
    }
    .v6-kicker::before{content:"";width:40px;height:2px;background:var(--v6-red);display:inline-block;}
    .v6-hero h1{
        margin:0;
        font-weight:700;
        font-size:clamp(3rem,9vw,8.5rem);
        line-height:.92;
        letter-spacing:-.03em;
        text-transform:uppercase;
    }
    .v6-hero h1 span{display:block;}
    .v6-hero-aside{grid-column:9 / span 4;padding-top:10px;}
    .v6-hero-aside p{margin:0 0 24px;font-size:1rem;line-height:1.5;}
    .v6-arrow-link{
        font-size:.72rem;
        letter-spacing:.08em;
        text-transform:uppercase;
        font-weight:700;
        color:var(--v6-ink);
        text-decoration:none;
        border-bottom:2px solid var(--v6-red);
        padding-bottom:4px;
        display:inline-block;
        transition:color .18s ease;
    }
    .v6-arrow-link:hover{color:var(--v6-red);}

    /* ===== 3. Kennzahlen-Leiste ===== */
    .v6-stats{border-bottom:1px solid var(--v6-ink);}
    .v6-stat{
        grid-column:span 3;
        padding:36px 16px 28px;
        border-left:1px solid var(--v6-line);
    }
    .v6-stat:first-child{border-left:none;padding-left:0;}
    .v6-stat-num{
        font-size:clamp(2.5rem,5vw,4.5rem);
        font-weight:700;
        line-height:1;
        letter-spacing:-.03em;
        color:var(--v6-red);
    }
    .v6-stat-label{
        margin-top:12px;
        font-size:.72rem;
        letter-spacing:.08em;
        text-transform:uppercase;
        font-weight:700;
    }

    /* ===== Sektions-Kopf ===== */
    .v6-sec-head{
        padding:48px 0 24px;
        display:flex;
        align-items:baseline;
        justify-content:space-between;
        gap:16px;
        flex-wrap:wrap;
    }
    .v6-sec-head h2{
        margin:0;
        font-size:clamp(1.5rem,3vw,2.5rem);
        font-weight:700;
        letter-spacing:-.03em;
        text-transform:uppercase;
    }
    .v6-sec-meta{
        font-size:.72rem;
        letter-spacing:.08em;
        text-transform:uppercase;
        font-weight:700;
    }

    /* ===== 4. Index der 9 Welten ===== */
    .v6-index{border-top:1px solid var(--v6-ink);}
    .v6-row{
        display:grid;
        grid-template-columns:repeat(12,1fr);
        gap:0;
        align-items:center;
        border-bottom:1px solid var(--v6-line);
        text-decoration:none;
        color:var(--v6-ink);
        transition:background .18s ease,color .18s ease;
    }
    .v6-row:last-child{border-bottom:1px solid var(--v6-ink);}
    .v6-c-nr{grid-column:span 1;padding:22px 0;font-size:.9rem;font-weight:700;color:var(--v6-red);font-variant-numeric:tabular-nums;letter-spacing:.04em;transition:color .18s ease;}
    .v6-c-title{grid-column:span 4;padding:22px 16px 22px 0;font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:700;letter-spacing:-.01em;text-transform:uppercase;}
    .v6-c-desc{grid-column:span 4;padding:22px 16px;font-size:1rem;line-height:1.4;}
    .v6-c-stat{grid-column:span 2;padding:22px 16px;font-size:1rem;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}
    .v6-c-arrow{grid-column:span 1;padding:22px 0;text-align:right;font-size:1.1rem;font-weight:700;transition:transform .18s ease,color .18s ease;}

    /* Zeilen-Invertierung beim Hover */
    .v6-row:hover,.v6-row:focus-visible{background:var(--v6-ink);color:var(--v6-paper);outline:none;}
    .v6-row:hover .v6-c-nr,.v6-row:focus-visible .v6-c-nr,
    .v6-row:hover .v6-c-arrow,.v6-row:focus-visible .v6-c-arrow{color:var(--v6-red);}
    .v6-row:hover .v6-c-arrow,.v6-row:focus-visible .v6-c-arrow{transform:translateX(8px);}

    /* Scroll-Einblendung */
    .v6-reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease;}
    .v6-reveal.v6-in{opacity:1;transform:none;}

    /* ===== Über-Block ===== */
    .v6-about{border-top:1px solid var(--v6-line);padding:0 0 24px;}
    .v6-about .v6-grid{align-items:start;}
    .v6-about-label{grid-column:1 / span 3;padding:48px 16px 24px 0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;}
    .v6-about-body{grid-column:4 / span 7;padding:48px 0 24px;}
    .v6-about-body p{margin:0 0 16px;font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.5;}
    .v6-about-body p:last-child{margin-bottom:0;}

    /* ===== Kontakt-CTA ===== */
    .v6-cta{border-top:1px solid var(--v6-ink);border-bottom:1px solid var(--v6-ink);}
    .v6-cta .v6-grid{align-items:center;}
    .v6-cta-text{grid-column:1 / span 8;padding:56px 0;}
    .v6-cta-text h2{margin:0 0 16px;font-size:clamp(1.8rem,4vw,3.2rem);font-weight:700;letter-spacing:-.03em;text-transform:uppercase;line-height:.96;}
    .v6-cta-text p{margin:0;font-size:1rem;max-width:46ch;}
    .v6-cta-action{grid-column:9 / span 4;padding:56px 0;text-align:right;}
    .v6-btn{
        display:inline-flex;
        align-items:center;
        gap:12px;
        background:var(--v6-ink);
        color:var(--v6-paper);
        text-decoration:none;
        font-size:.85rem;
        letter-spacing:.08em;
        text-transform:uppercase;
        font-weight:700;
        padding:18px 28px;
        transition:background .18s ease,color .18s ease;
    }
    .v6-btn i{color:var(--v6-red);transition:transform .18s ease;}
    .v6-btn:hover{background:var(--v6-red);color:var(--v6-paper);}
    .v6-btn:hover i{color:var(--v6-paper);transform:translateX(6px);}

    /* ===== Footer-Mini ===== */
    .v6-foot{padding:24px 0 56px;}
    .v6-foot .v6-grid{align-items:center;}
    .v6-foot-cell{
        grid-column:span 4;
        font-size:.72rem;
        letter-spacing:.08em;
        text-transform:uppercase;
        font-weight:700;
        display:flex;
        align-items:center;
        gap:8px;
    }
    .v6-foot-cell.mid{justify-content:center;}
    .v6-foot-cell.right{justify-content:flex-end;}
    .v6-foot a{color:var(--v6-ink);text-decoration:none;transition:color .18s ease;}
    .v6-foot a:hover{color:var(--v6-red);}

    /* ===== Responsive ===== */
    @media (max-width:900px){
        .v6-hero-head{grid-column:1 / span 12;}
        .v6-hero-aside{grid-column:1 / span 12;padding-top:40px;max-width:520px;}
        .v6-about-label{grid-column:1 / span 12;padding-bottom:8px;}
        .v6-about-body{grid-column:1 / span 12;padding-top:8px;}
        .v6-cta-text{grid-column:1 / span 12;padding-bottom:0;}
        .v6-cta-action{grid-column:1 / span 12;text-align:left;padding-top:24px;}
    }
    @media (max-width:720px){
        .v6-top-cell{grid-column:span 12;border-left:none!important;border-right:none!important;justify-content:flex-start!important;border-bottom:1px solid var(--v6-line);padding:10px 0;}
        .v6-topbar .v6-grid > .v6-top-cell:last-child{border-bottom:none;}
        .v6-stat{grid-column:span 6;border-left:1px solid var(--v6-line);}
        .v6-stat:nth-child(odd){border-left:none;padding-left:0;}
        .v6-stat:nth-child(3),.v6-stat:nth-child(4){border-top:1px solid var(--v6-line);}

        /* Index-Zeile bricht auf zwei Subzeilen um */
        .v6-row{grid-template-columns:1fr auto;row-gap:0;}
        .v6-c-nr{grid-column:1;grid-row:1;padding:18px 0 4px;}
        .v6-c-title{grid-column:2;grid-row:1;padding:18px 0 4px;text-align:right;}
        .v6-c-desc{grid-column:1;grid-row:2;padding:0 0 18px;}
        .v6-c-stat{grid-column:2;grid-row:2;padding:0 0 18px;align-self:end;}
        .v6-c-arrow{display:none;}
    }
    @media (max-width:380px){
        .v6-wrap{padding:0 16px;}
        .v6-hero{padding:40px 0 56px;}
    }
    @media (prefers-reduced-motion:reduce){
        .v6-reveal{opacity:1!important;transform:none!important;}
    }
</style>

<div class="v6-root">
    <div class="v6-wrap">

        {{-- 1. Kopfzeile --}}
        <header class="v6-topbar">
            <div class="v6-grid">
                <div class="v6-top-cell">KOTSCH.TECH</div>
                <div class="v6-top-cell v6-top-mid">Student &middot; Digital Engineering</div>
                <div class="v6-top-cell v6-top-right">Lichtenstein, Sachsen — DE</div>
            </div>
        </header>

        {{-- 2. Hero --}}
        <section class="v6-hero">
            <div class="v6-grid">
                <div class="v6-hero-head">
                    <p class="v6-kicker">Index 01 — Portfolio</p>
                    <h1><span>Arthur</span><span>Kotsch</span></h1>
                </div>
                <div class="v6-hero-aside">
                    <p>Apps, Web-Tools und Dienste aus einer Hand — entwickelt von einem Studenten des Digital Engineering. Neun Welten, ein System, kein Schmuck.</p>
                    <a class="v6-arrow-link" href="/kontakt">&rarr; Kontakt</a>
                </div>
            </div>
        </section>

        {{-- 3. Kennzahlen-Leiste --}}
        <section class="v6-stats">
            <div class="v6-grid">
                <div class="v6-stat">
                    <div class="v6-stat-num">22</div>
                    <div class="v6-stat-label">iOS &amp; Mac Apps</div>
                </div>
                <div class="v6-stat">
                    <div class="v6-stat-num">09</div>
                    <div class="v6-stat-label">Windows-Tools</div>
                </div>
                <div class="v6-stat">
                    <div class="v6-stat-num">734</div>
                    <div class="v6-stat-label">Web-Tools</div>
                </div>
                <div class="v6-stat">
                    <div class="v6-stat-num">1.412</div>
                    <div class="v6-stat-label">Artikel</div>
                </div>
            </div>
        </section>

        {{-- 4. Index der 9 Welten --}}
        <section>
            <div class="v6-sec-head">
                <h2>Index der neun Welten</h2>
                <div class="v6-sec-meta">01 — 09 / Programm</div>
            </div>

            <div class="v6-index">
                <a class="v6-row v6-reveal" href="https://ios.kotsch.tech" aria-label="iOS & Mac Apps — 22 Apps im App Store">
                    <div class="v6-c-nr">01</div>
                    <div class="v6-c-title">iOS &amp; Mac Apps</div>
                    <div class="v6-c-desc">22 Apps im App Store (iPhone/iPad/Mac), regelmäßige Updates</div>
                    <div class="v6-c-stat">22</div>
                    <div class="v6-c-arrow" aria-hidden="true">&rarr;</div>
                </a>
                <a class="v6-row v6-reveal" href="https://windows.kotsch.tech" aria-label="Windows — 9 Programme, Direkt-Download">
                    <div class="v6-c-nr">02</div>
                    <div class="v6-c-title">Windows</div>
                    <div class="v6-c-desc">9 Programme: Cleaner, Commander, Notes, Taskmanager, CodeEditor</div>
                    <div class="v6-c-stat">09</div>
                    <div class="v6-c-arrow" aria-hidden="true">&rarr;</div>
                </a>
                <a class="v6-row v6-reveal" href="https://android.kotsch.tech" aria-label="Android — native Apps, in Entwicklung">
                    <div class="v6-c-nr">03</div>
                    <div class="v6-c-title">Android</div>
                    <div class="v6-c-desc">Native Apps, in Entwicklung</div>
                    <div class="v6-c-stat">—</div>
                    <div class="v6-c-arrow" aria-hidden="true">&rarr;</div>
                </a>
                <a class="v6-row v6-reveal" href="https://webtools.kotsch.tech" aria-label="Web-Tools — 734 Tools im Browser, ohne Login">
                    <div class="v6-c-nr">04</div>
                    <div class="v6-c-title">Web-Tools</div>
                    <div class="v6-c-desc">734 Tools im Browser, ohne Login oder Installation</div>
                    <div class="v6-c-stat">734</div>
                    <div class="v6-c-arrow" aria-hidden="true">&rarr;</div>
                </a>
                <a class="v6-row v6-reveal" href="https://shop.kotsch.tech" aria-label="Shop — digitale Produkte, Sofort-Download">
                    <div class="v6-c-nr">05</div>
                    <div class="v6-c-title">Shop</div>
                    <div class="v6-c-desc">Digitale Produkte, Sofort-Download</div>
                    <div class="v6-c-stat">—</div>
                    <div class="v6-c-arrow" aria-hidden="true">&rarr;</div>
                </a>
                <a class="v6-row v6-reveal" href="https://hosting.kotsch.tech" aria-label="Hosting — managed Webhosting, vServer/VPS, DSGVO-konform">
                    <div class="v6-c-nr">06</div>
                    <div class="v6-c-title">Hosting</div>
                    <div class="v6-c-desc">Managed Webhosting, vServer/VPS, DSGVO-konform</div>
                    <div class="v6-c-stat">—</div>
                    <div class="v6-c-arrow" aria-hidden="true">&rarr;</div>
                </a>
                <a class="v6-row v6-reveal" href="https://news.kotsch.tech" aria-label="News — 1.412 Ratgeber & Tutorials">
                    <div class="v6-c-nr">07</div>
                    <div class="v6-c-title">News</div>
                    <div class="v6-c-desc">1.412 Ratgeber &amp; Tutorials</div>
                    <div class="v6-c-stat">1.412</div>
                    <div class="v6-c-arrow" aria-hidden="true">&rarr;</div>
                </a>
                <a class="v6-row v6-reveal" href="https://it-hilfe.kotsch.tech" aria-label="IT-Hilfe — vor Ort & Remote, keine Lösung kein Preis">
                    <div class="v6-c-nr">08</div>
                    <div class="v6-c-title">IT-Hilfe</div>
                    <div class="v6-c-desc">Vor Ort &amp; Remote · Region Glauchau–Lichtenstein · keine Lösung = kein Preis</div>
                    <div class="v6-c-stat">—</div>
                    <div class="v6-c-arrow" aria-hidden="true">&rarr;</div>
                </a>
                <a class="v6-row v6-reveal" href="https://webdesign.kotsch.tech" aria-label="Webdesign — Studio & 20 Branchen-Demos">
                    <div class="v6-c-nr">09</div>
                    <div class="v6-c-title">Webdesign</div>
                    <div class="v6-c-desc">Studio &amp; 20 Branchen-Demos</div>
                    <div class="v6-c-stat">20</div>
                    <div class="v6-c-arrow" aria-hidden="true">&rarr;</div>
                </a>
            </div>
        </section>

        {{-- Über-Block --}}
        <section class="v6-about">
            <div class="v6-grid">
                <div class="v6-about-label">Über / 010</div>
                <div class="v6-about-body">
                    <p>Ich bin Arthur Kotsch, Student im Digital Engineering und Entwickler aus Lichtenstein in Sachsen.</p>
                    <p>Unter kotsch.tech bündele ich alles, was ich baue: native Apps, browserbasierte Web-Tools, einen Shop für digitale Produkte, Webhosting, Ratgeber-Inhalte und IT-Hilfe vor Ort wie aus der Ferne. Präzise, systematisch, ohne überflüssigen Schmuck.</p>
                </div>
            </div>
        </section>

        {{-- Kontakt-CTA --}}
        <section class="v6-cta">
            <div class="v6-grid">
                <div class="v6-cta-text">
                    <h2>Projekt im Kopf?<br>Schreib mir.</h2>
                    <p>Ob App, Web-Tool, Hosting oder IT-Hilfe in der Region Glauchau–Lichtenstein — eine kurze Nachricht genügt.</p>
                </div>
                <div class="v6-cta-action">
                    <a class="v6-btn" href="/kontakt">Kontakt aufnehmen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                </div>
            </div>
        </section>

        {{-- Footer-Mini --}}
        <footer class="v6-foot">
            <div class="v6-grid">
                <div class="v6-foot-cell">&copy; {{ date('Y') }} Arthur Kotsch</div>
                <div class="v6-foot-cell mid"><a href="/impressum">Impressum</a></div>
                <div class="v6-foot-cell right"><a href="/datenschutz">Datenschutz</a></div>
            </div>
        </footer>

    </div>
</div>

<script>
(function(){
    var rows = document.querySelectorAll('.v6-reveal');
    if(!('IntersectionObserver' in window) || !rows.length){
        rows.forEach(function(r){r.classList.add('v6-in');});
        return;
    }
    var io = new IntersectionObserver(function(entries){
        entries.forEach(function(e,i){
            if(e.isIntersecting){
                var el = e.target;
                setTimeout(function(){el.classList.add('v6-in');}, (i % 4) * 60);
                io.unobserve(el);
            }
        });
    }, {threshold:0.12, rootMargin:'0px 0px -8% 0px'});
    rows.forEach(function(r){io.observe(r);});
})();
</script>
@endsection