@extends('layouts.app')

@section('title', 'Arthur Kotsch — Eine Person. Neun Welten. | KOTSCH.TECH')
@section('meta_description', 'Arthur Kotsch, Student Digital Engineering aus Lichtenstein (Sachsen): 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;}

    .v1-page{
        --v1-canvas:#F4F4F2;
        --v1-tile:#FFFFFF;
        --v1-ink:#161514;
        --v1-ink-2:#6B6864;
        --v1-line:#E7E5E1;
        --v1-accent:#FF4D17;
        --v1-tint:#FFEDE6;
        --v1-ghost:#C9C6C1;
        --v1-ease:cubic-bezier(.2,.7,.2,1);
        background:var(--v1-canvas);
        color:var(--v1-ink);
        font-family:'Inter','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
        -webkit-font-smoothing:antialiased;
        min-height:100vh;
        font-feature-settings:'ss01','cv11';
    }
    .v1-page *{box-sizing:border-box;}
    .v1-wrap{max-width:1240px;margin:0 auto;padding:18px clamp(14px,3vw,26px) 60px;}

    /* ── Header-Pille ── */
    .v1-bar{
        display:flex;align-items:center;justify-content:space-between;gap:14px;
        background:var(--v1-tile);border:1px solid var(--v1-line);
        border-radius:980px;padding:10px 12px 10px 22px;
        box-shadow:0 1px 0 var(--v1-line);
        margin-bottom:14px;
    }
    .v1-mark{font-weight:700;letter-spacing:-.03em;font-size:1.05rem;color:var(--v1-ink);text-decoration:none;}
    .v1-mark span{color:var(--v1-accent);}
    .v1-nav{display:flex;align-items:center;gap:clamp(10px,2vw,26px);}
    .v1-nav a{color:var(--v1-ink-2);text-decoration:none;font-size:.85rem;font-weight:600;transition:color .2s var(--v1-ease);}
    .v1-nav a:hover{color:var(--v1-ink);}
    .v1-contact{
        display:inline-flex;align-items:center;gap:.45rem;
        border:1.5px solid var(--v1-accent);color:var(--v1-accent);
        background:transparent;border-radius:980px;
        padding:.55rem 1.05rem;font-size:.85rem;font-weight:700;text-decoration:none;
        transition:.25s var(--v1-ease);white-space:nowrap;
    }
    .v1-contact:hover{background:var(--v1-accent);color:#fff;transform:translateY(-1px);}
    @media (max-width:680px){
        .v1-nav-links{display:none;}
    }

    /* ── Bento-Grid ── */
    .v1-grid{
        display:grid;
        grid-template-columns:repeat(12,1fr);
        gap:14px;
    }
    .v1-tile{
        position:relative;overflow:hidden;
        background:var(--v1-tile);
        border:1px solid var(--v1-line);
        border-radius:18px;
        box-shadow:0 1px 0 var(--v1-line);
        padding:22px;
        display:flex;flex-direction:column;
        transition:transform .25s var(--v1-ease),box-shadow .25s var(--v1-ease),border-color .25s var(--v1-ease);
        text-decoration:none;color:inherit;
        min-height:150px;
    }
    a.v1-tile:hover{
        transform:translateY(-4px);
        box-shadow:0 14px 34px rgba(22,21,20,.12);
        border-color:var(--v1-accent);
    }

    /* Span-Helfer (Desktop) */
    .v1-c2{grid-column:span 2;}
    .v1-c3{grid-column:span 3;}
    .v1-c4{grid-column:span 4;}
    .v1-c6{grid-column:span 6;}
    .v1-r2{grid-row:span 2;}

    /* ── Signature: Index-Eckpunkt ── */
    .v1-idx{
        position:absolute;top:18px;left:20px;
        font-family:'SFMono-Regular',ui-monospace,'Cascadia Code',Consolas,monospace;
        font-size:.78rem;font-weight:600;letter-spacing:.04em;
        color:var(--v1-ghost);
        transition:color .25s var(--v1-ease);
    }
    a.v1-tile:hover .v1-idx{color:var(--v1-accent);}
    .v1-arrow{
        position:absolute;bottom:16px;right:16px;
        width:34px;height:34px;border-radius:50%;
        border:1px solid var(--v1-line);
        display:flex;align-items:center;justify-content:center;
        color:var(--v1-ink);background:var(--v1-tile);
        transition:.25s var(--v1-ease);
        z-index:2;
    }
    .v1-arrow i{font-size:.8rem;transform:rotate(45deg);transition:transform .25s var(--v1-ease);}
    a.v1-tile:hover .v1-arrow{background:var(--v1-accent);border-color:var(--v1-accent);color:#fff;}
    a.v1-tile:hover .v1-arrow i{transform:rotate(0deg);}

    /* ── Tile-Innenleben ── */
    .v1-eyebrow{
        font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
        color:var(--v1-ink-2);margin:18px 0 10px;display:flex;align-items:center;gap:.5rem;
    }
    .v1-eyebrow i{color:var(--v1-accent);font-size:.8rem;}
    .v1-tile h3{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 .5rem;}
    .v1-tile p{font-size:.95rem;font-weight:400;color:var(--v1-ink-2);line-height:1.45;margin:0;}
    .v1-badge{
        margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;width:fit-content;
        background:var(--v1-canvas);border:1px solid var(--v1-line);
        border-radius:980px;padding:.3rem .7rem;
        font-size:.78rem;font-weight:700;color:var(--v1-ink);
        font-variant-numeric:tabular-nums;
        padding-top:.32rem;
    }
    .v1-badge i{color:var(--v1-accent);font-size:.72rem;}
    .v1-foot{margin-top:auto;padding-top:14px;}

    /* Geisterziffer für Flaggschiff-Kacheln */
    .v1-ghostnum{
        position:absolute;right:-6px;bottom:-22px;
        font-size:clamp(6rem,12vw,9rem);font-weight:800;line-height:1;
        color:var(--v1-canvas);letter-spacing:-.05em;
        pointer-events:none;z-index:0;font-variant-numeric:tabular-nums;
    }
    .v1-tile > *{position:relative;z-index:1;}
    .v1-tile > .v1-ghostnum{z-index:0;}

    /* ── Brand-Kachel ── */
    .v1-brand{
        grid-column:span 6;grid-row:span 2;
        background:var(--v1-accent);color:#fff;border-color:var(--v1-accent);
        justify-content:space-between;min-height:320px;
        box-shadow:0 1px 0 rgba(0,0,0,.06);
    }
    .v1-brand:hover{transform:none;box-shadow:0 14px 40px rgba(255,77,23,.28);filter:brightness(1.04);}
    .v1-brand .v1-eyebrow{color:rgba(255,255,255,.85);margin-top:0;}
    .v1-brand .v1-eyebrow i{color:#fff;}
    .v1-brand h1{
        font-size:clamp(2.4rem,6vw,4.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;
        margin:.2rem 0 .7rem;color:#fff;
    }
    .v1-brand .v1-sub{font-size:1rem;color:rgba(255,255,255,.92);line-height:1.5;max-width:34ch;margin:0 0 1.4rem;}
    .v1-brand-cta{
        display:inline-flex;align-items:center;gap:.5rem;width:fit-content;
        background:#fff;color:var(--v1-accent);text-decoration:none;
        border-radius:980px;padding:.85rem 1.5rem;font-size:.95rem;font-weight:700;
        transition:.25s var(--v1-ease);
    }
    .v1-brand-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22);}
    .v1-brand-glyph{
        position:absolute;top:-30px;right:-20px;font-size:14rem;line-height:1;
        color:rgba(255,255,255,.10);font-weight:800;letter-spacing:-.05em;pointer-events:none;
    }

    /* ── Stats-Kachel ── */
    .v1-stats{grid-column:span 6;padding:0;overflow:visible;}
    .v1-stats:hover{transform:none;box-shadow:0 1px 0 var(--v1-line);border-color:var(--v1-line);}
    .v1-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);height:100%;}
    .v1-stat{padding:22px 18px;border-right:1px solid var(--v1-line);display:flex;flex-direction:column;justify-content:center;}
    .v1-stat:last-child{border-right:0;}
    .v1-stat-num{
        font-size:clamp(1.8rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1;
        font-variant-numeric:tabular-nums;color:var(--v1-ink);
    }
    .v1-stat-num em{color:var(--v1-accent);font-style:normal;}
    .v1-stat-label{
        margin-top:.55rem;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
        color:var(--v1-ink-2);
    }
    @media (max-width:560px){
        .v1-stats-grid{grid-template-columns:1fr 1fr;}
        .v1-stat:nth-child(2){border-right:0;}
        .v1-stat:nth-child(1),.v1-stat:nth-child(2){border-bottom:1px solid var(--v1-line);}
    }

    /* ── Über-Block ── */
    .v1-about{grid-column:span 8;}
    .v1-about:hover{transform:none;box-shadow:0 1px 0 var(--v1-line);border-color:var(--v1-line);}
    .v1-about h2{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .6rem;}
    .v1-about p{font-size:.98rem;color:var(--v1-ink-2);line-height:1.6;max-width:62ch;}
    /* ── Kontakt-CTA-Kachel ── */
    .v1-cta{grid-column:span 4;background:var(--v1-tint);border-color:var(--v1-tint);justify-content:center;}
    .v1-cta:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(255,77,23,.18);border-color:var(--v1-accent);}
    .v1-cta h3{font-size:1.3rem;}
    .v1-cta p{margin-bottom:1rem;color:var(--v1-ink);}
    .v1-cta .v1-arrow{background:var(--v1-accent);border-color:var(--v1-accent);color:#fff;}
    .v1-cta .v1-arrow i{transform:rotate(0deg);}

    /* ── Footer-Mini ── */
    .v1-footer{
        margin-top:36px;padding-top:22px;border-top:1px solid var(--v1-line);
        display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
        font-size:.85rem;color:var(--v1-ink-2);
    }
    .v1-footer .v1-mark{font-size:.95rem;}
    .v1-footer a{color:var(--v1-ink-2);text-decoration:none;}
    .v1-footer a:hover{color:var(--v1-accent);}

    /* ── Responsive: 6 Spalten (Tablet) ── */
    @media (max-width:980px){
        .v1-grid{grid-template-columns:repeat(6,1fr);}
        .v1-brand{grid-column:span 6;grid-row:span 1;}
        .v1-stats{grid-column:span 6;}
        .v1-about{grid-column:span 6;}
        .v1-cta{grid-column:span 6;}
        .v1-c2{grid-column:span 3;}
        .v1-c3{grid-column:span 3;}
        .v1-c4{grid-column:span 6;}
        .v1-c6{grid-column:span 6;}
        .v1-r2{grid-row:span 1;}
    }
    /* ── Responsive: 2 Spalten (Mobil) ── */
    @media (max-width:560px){
        .v1-grid{grid-template-columns:repeat(2,1fr);}
        .v1-brand,.v1-stats,.v1-about,.v1-cta,
        .v1-c2,.v1-c3,.v1-c4,.v1-c6{grid-column:span 2;}
        .v1-r2{grid-row:span 1;}
        .v1-tile{min-height:140px;}
        .v1-wrap{padding-bottom:40px;}
    }

    @media (prefers-reduced-motion:reduce){
        .v1-page *{transition:none!important;}
    }
</style>

<div class="v1-page">
    <div class="v1-wrap">

        {{-- Header-Pille --}}
        <header class="v1-bar">
            <a href="https://www.kotsch.tech" class="v1-mark">Arthur <span>Kotsch</span></a>
            <nav class="v1-nav" aria-label="Hauptnavigation">
                <span class="v1-nav-links" style="display:contents;">
                    <a href="https://ios.kotsch.tech">Apps</a>
                    <a href="https://webtools.kotsch.tech">Tools</a>
                    <a href="https://news.kotsch.tech">News</a>
                </span>
                <a href="{{ route('kontakt') }}" class="v1-contact"><i class="fa-solid fa-paper-plane" aria-hidden="true"></i> Kontakt</a>
            </nav>
        </header>

        {{-- Bento-Hauptgrid --}}
        <main class="v1-grid">

            {{-- Brand-Kachel (groß) --}}
            <section class="v1-tile v1-brand">
                <span class="v1-brand-glyph" aria-hidden="true">9</span>
                <div>
                    <p class="v1-eyebrow"><i class="fa-solid fa-circle-nodes" aria-hidden="true"></i> Persönliche Tech-Marke</p>
                    <h1>Eine Person.<br>Neun Welten.</h1>
                    <p class="v1-sub">Arthur Kotsch · Student Digital Engineering · Entwickler aus Lichtenstein (Sachsen)</p>
                </div>
                <a href="{{ route('kontakt') }}" class="v1-brand-cta">Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
            </section>

            {{-- 01 · iOS & Mac Apps (Flaggschiff, breit) --}}
            <a class="v1-tile v1-c6" href="https://ios.kotsch.tech">
                <span class="v1-idx">01</span>
                <span class="v1-ghostnum" aria-hidden="true">22</span>
                <p class="v1-eyebrow"><i class="fa-brands fa-apple" aria-hidden="true"></i> iOS &amp; Mac</p>
                <h3>iOS &amp; Mac Apps</h3>
                <p>22 Apps im App Store für iPhone, iPad und Mac — mit regelmäßigen Updates.</p>
                <span class="v1-badge"><i class="fa-solid fa-mobile-screen" aria-hidden="true"></i> 22 Apps</span>
                <span class="v1-arrow"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i></span>
            </a>

            {{-- 02 · News (hoch) --}}
            <a class="v1-tile v1-c3 v1-r2" href="https://news.kotsch.tech">
                <span class="v1-idx">02</span>
                <p class="v1-eyebrow"><i class="fa-solid fa-newspaper" aria-hidden="true"></i> News</p>
                <h3>News</h3>
                <p>1.412 Ratgeber &amp; Tutorials rund um Technik, Software und IT.</p>
                <span class="v1-badge"><i class="fa-solid fa-book-open" aria-hidden="true"></i> 1.412 Artikel</span>
                <span class="v1-arrow"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i></span>
            </a>

            {{-- 03 · Windows --}}
            <a class="v1-tile v1-c3" href="https://windows.kotsch.tech">
                <span class="v1-idx">03</span>
                <p class="v1-eyebrow"><i class="fa-brands fa-windows" aria-hidden="true"></i> Windows</p>
                <h3>Windows</h3>
                <p>9 Programme — Cleaner, Commander, Notes, Taskmanager, CodeEditor. Direkt-Download.</p>
                <span class="v1-badge"><i class="fa-solid fa-download" aria-hidden="true"></i> 9 Programme</span>
                <span class="v1-arrow"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i></span>
            </a>

            {{-- 04 · Web-Tools (Flaggschiff, breit) --}}
            <a class="v1-tile v1-c6" href="https://webtools.kotsch.tech">
                <span class="v1-idx">04</span>
                <span class="v1-ghostnum" aria-hidden="true">734</span>
                <p class="v1-eyebrow"><i class="fa-solid fa-toolbox" aria-hidden="true"></i> Web-Tools</p>
                <h3>Web-Tools</h3>
                <p>734 Tools direkt im Browser — ohne Login, ohne Installation.</p>
                <span class="v1-badge"><i class="fa-solid fa-bolt" aria-hidden="true"></i> 734 Tools</span>
                <span class="v1-arrow"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i></span>
            </a>

            {{-- 05 · Android --}}
            <a class="v1-tile v1-c3" href="https://android.kotsch.tech">
                <span class="v1-idx">05</span>
                <p class="v1-eyebrow"><i class="fa-brands fa-android" aria-hidden="true"></i> Android</p>
                <h3>Android</h3>
                <p>Native Apps für Android — aktuell in Entwicklung.</p>
                <span class="v1-badge"><i class="fa-solid fa-hammer" aria-hidden="true"></i> In Entwicklung</span>
                <span class="v1-arrow"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i></span>
            </a>

            {{-- 06 · Shop --}}
            <a class="v1-tile v1-c3" href="https://shop.kotsch.tech">
                <span class="v1-idx">06</span>
                <p class="v1-eyebrow"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i> Shop</p>
                <h3>Shop</h3>
                <p>Digitale Produkte mit Sofort-Download nach dem Kauf.</p>
                <span class="v1-foot"></span>
                <span class="v1-arrow"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i></span>
            </a>

            {{-- 07 · Hosting --}}
            <a class="v1-tile v1-c3" href="https://hosting.kotsch.tech">
                <span class="v1-idx">07</span>
                <p class="v1-eyebrow"><i class="fa-solid fa-server" aria-hidden="true"></i> Hosting</p>
                <h3>Hosting</h3>
                <p>Managed Webhosting, vServer/VPS — DSGVO-konform.</p>
                <span class="v1-foot"></span>
                <span class="v1-arrow"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i></span>
            </a>

            {{-- 08 · IT-Hilfe --}}
            <a class="v1-tile v1-c3" href="https://it-hilfe.kotsch.tech">
                <span class="v1-idx">08</span>
                <p class="v1-eyebrow"><i class="fa-solid fa-screwdriver-wrench" aria-hidden="true"></i> IT-Hilfe</p>
                <h3>IT-Hilfe</h3>
                <p>Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein. Keine Lösung = kein Preis.</p>
                <span class="v1-foot"></span>
                <span class="v1-arrow"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i></span>
            </a>

            {{-- 09 · Webdesign --}}
            <a class="v1-tile v1-c3" href="https://webdesign.kotsch.tech">
                <span class="v1-idx">09</span>
                <p class="v1-eyebrow"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i> Webdesign</p>
                <h3>Webdesign</h3>
                <p>Studio für Websites — mit 20 Branchen-Demos zum Ausprobieren.</p>
                <span class="v1-badge"><i class="fa-solid fa-layer-group" aria-hidden="true"></i> 20 Demos</span>
                <span class="v1-arrow"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i></span>
            </a>

            {{-- Stats-Kachel (breit) --}}
            <section class="v1-tile v1-stats" aria-label="Kennzahlen">
                <div class="v1-stats-grid">
                    <div class="v1-stat">
                        <span class="v1-stat-num"><em>22</em></span>
                        <span class="v1-stat-label">iOS / Mac-Apps</span>
                    </div>
                    <div class="v1-stat">
                        <span class="v1-stat-num">9</span>
                        <span class="v1-stat-label">Windows-Tools</span>
                    </div>
                    <div class="v1-stat">
                        <span class="v1-stat-num"><em>734</em></span>
                        <span class="v1-stat-label">Web-Tools</span>
                    </div>
                    <div class="v1-stat">
                        <span class="v1-stat-num">1.412</span>
                        <span class="v1-stat-label">Artikel</span>
                    </div>
                </div>
            </section>

            {{-- Über-Block --}}
            <section class="v1-tile v1-about">
                <p class="v1-eyebrow" style="margin-top:0;"><i class="fa-solid fa-user" aria-hidden="true"></i> Über</p>
                <h2>Entwickler aus Lichtenstein (Sachsen)</h2>
                <p>Ich bin Arthur Kotsch, Student im Bereich Digital Engineering. Unter einer Marke vereine ich neun Welten: native Apps für iOS, Mac, Windows und Android, hunderte Web-Tools, einen Shop für digitale Produkte, Hosting, einen Ratgeber-Bereich, IT-Hilfe für die Region sowie ein Webdesign-Studio.</p>
            </section>

            {{-- Kontakt-CTA-Kachel --}}
            <a class="v1-tile v1-cta" href="{{ route('kontakt') }}">
                <p class="v1-eyebrow" style="margin-top:0;"><i class="fa-solid fa-paper-plane" aria-hidden="true"></i> Kontakt</p>
                <h3>Lass uns sprechen.</h3>
                <p>App, Website, Tool oder IT — schreib mir dein Projekt.</p>
                <span class="v1-arrow"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i></span>
            </a>

        </main>

        {{-- Footer-Mini --}}
        <footer class="v1-footer">
            <a href="https://www.kotsch.tech" class="v1-mark">Arthur <span>Kotsch</span></a>
            <span>Lichtenstein, Sachsen</span>
            <a href="{{ route('kontakt') }}">Kontakt &nearr;</a>
            <span>&copy; {{ date('Y') }} KOTSCH.TECH</span>
        </footer>

    </div>
</div>

@php
    // Optionaler dezenter Pointer-Tilt — nur Maus, respektiert reduced-motion.
@endphp
<script>
(function(){
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
    document.querySelectorAll('.v1-grid a.v1-tile').forEach(function(t){
        t.addEventListener('pointermove', function(e){
            var r = t.getBoundingClientRect();
            var px = (e.clientX - r.left) / r.width - .5;
            var py = (e.clientY - r.top) / r.height - .5;
            t.style.transform = 'translateY(-4px) rotateX(' + (py*-3).toFixed(2) + 'deg) rotateY(' + (px*3).toFixed(2) + 'deg)';
        });
        t.addEventListener('pointerleave', function(){ t.style.transform = ''; });
    });
})();
</script>
@endsection