@extends('layouts.app')

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

    /* ===== Variante 7 — "Dark Luxury" (schwarzes Galerie-Foyer mit Messing-Faden) ===== */
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

    .v7-root{
        --ink:#0A0A0C;
        --ink-2:#121217;
        --ink-3:#1A1A20;
        --line:#2A2A30;
        --gold:#C9A24B;
        --gold-soft:#E7C97A;
        --cream:#EDE8DD;
        --mute:#9A968C;
        --grad:linear-gradient(135deg,#E7C97A,#C9A24B 55%,#9C7A2E);
        background:var(--ink);
        color:var(--cream);
        font-family:'Inter',system-ui,sans-serif;
        -webkit-font-smoothing:antialiased;
        line-height:1.6;
        width:100%;
        overflow-x:hidden;
    }
    .v7-root *{box-sizing:border-box;}

    .v7-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

    /* gemeinsamer Gold-Verlaufs-Text */
    .v7-goldtext{
        background:var(--grad);
        -webkit-background-clip:text;
        background-clip:text;
        -webkit-text-fill-color:transparent;
        color:transparent;
    }

    /* goldene Haarlinie (Leitmotiv) */
    .v7-hairline{
        height:1px;width:100%;border:0;margin:0;
        background:var(--grad);
        opacity:.55;
    }

    .v7-eyebrow{
        font-family:'Inter',sans-serif;
        font-size:.72rem;
        letter-spacing:.32em;
        text-transform:uppercase;
        color:var(--gold);
        font-weight:500;
    }

    /* ===== Top-Bar ===== */
    .v7-topbar{
        position:sticky;top:0;z-index:50;
        display:flex;align-items:center;justify-content:space-between;
        gap:16px;
        padding:18px 24px;
        transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
        border-bottom:1px solid transparent;
    }
    .v7-topbar.v7-scrolled{
        background:rgba(10,10,12,.7);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
        border-bottom:1px solid var(--line);
    }
    .v7-brand{
        font-family:'Cormorant Garamond',Georgia,serif;
        font-size:1.5rem;font-weight:600;
        color:var(--cream);text-decoration:none;
        letter-spacing:.01em;
    }
    .v7-topsep{
        flex:1;display:flex;align-items:center;justify-content:center;gap:10px;
        min-width:0;
    }
    .v7-topsep i{font-size:.4rem;color:var(--gold);opacity:.7;}
    .v7-topsep span{
        height:1px;width:64px;max-width:18vw;
        background:var(--grad);opacity:.5;
    }
    .v7-contactbtn{
        font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
        color:var(--gold);text-decoration:none;font-weight:500;
        padding:9px 20px;border:1px solid var(--gold);border-radius:2px;
        background:transparent;white-space:nowrap;
        transition:background .4s cubic-bezier(.2,.7,.2,1),color .4s cubic-bezier(.2,.7,.2,1);
    }
    .v7-contactbtn:hover{background:var(--gold);color:var(--ink);}

    /* ===== Hero ===== */
    .v7-hero{
        text-align:center;
        padding:clamp(70px,13vh,140px) 24px clamp(40px,7vh,70px);
        max-width:980px;margin:0 auto;
    }
    .v7-hero .v7-eyebrow{display:block;margin-bottom:34px;}
    .v7-h1{
        font-family:'Cormorant Garamond',Georgia,serif;
        font-weight:500;
        font-size:clamp(3rem,7vw,6.5rem);
        line-height:1.02;
        letter-spacing:-.01em;
        color:var(--cream);
        margin:0 0 30px;
    }
    .v7-sub{
        font-size:1.05rem;color:var(--mute);
        max-width:560px;margin:0 auto 44px;
    }
    .v7-hero-line{max-width:340px;margin:0 auto;}

    /* ===== Stats ===== */
    .v7-stats{
        display:grid;grid-template-columns:repeat(4,1fr);
        max-width:920px;margin:clamp(48px,8vh,80px) auto 0;
        border-top:1px solid var(--line);
        border-bottom:1px solid var(--line);
    }
    .v7-stat{
        text-align:center;padding:30px 12px;position:relative;
    }
    .v7-stat + .v7-stat::before{
        content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;
        background:var(--grad);opacity:.4;
    }
    .v7-stat-num{
        font-family:'Cormorant Garamond',Georgia,serif;
        font-weight:600;font-size:clamp(2.2rem,5vw,3.2rem);
        line-height:1;
    }
    .v7-stat-label{
        margin-top:10px;font-size:.7rem;letter-spacing:.18em;
        text-transform:uppercase;color:var(--mute);
    }

    /* ===== Welten ===== */
    .v7-section{padding:clamp(70px,12vh,130px) 0;}
    .v7-sec-head{text-align:center;margin-bottom:clamp(36px,6vh,60px);}
    .v7-sec-head .v7-eyebrow{display:block;margin-bottom:16px;}
    .v7-sec-title{
        font-family:'Cormorant Garamond',Georgia,serif;
        font-weight:500;font-size:clamp(1.8rem,4vw,2.8rem);
        color:var(--cream);margin:0;
    }

    .v7-grid{
        display:grid;grid-template-columns:repeat(3,1fr);
        gap:1px;background:var(--line);
        border:1px solid var(--line);
    }
    .v7-card{
        position:relative;
        background:var(--ink-3);
        padding:38px 32px 34px;
        text-decoration:none;display:block;
        overflow:hidden;
        transition:transform .4s cubic-bezier(.2,.7,.2,1),
                   box-shadow .4s cubic-bezier(.2,.7,.2,1),
                   background .4s cubic-bezier(.2,.7,.2,1);
    }
    /* obere goldene Haarlinie + Glanzpunkt */
    .v7-card::before{
        content:"";position:absolute;top:0;left:0;right:0;height:1px;
        background:var(--grad);
        opacity:.5;
        transition:opacity .4s cubic-bezier(.2,.7,.2,1);
        z-index:2;
    }
    .v7-card::after{
        content:"";position:absolute;top:0;left:0;right:0;height:1px;
        background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
        background-size:200% 100%;
        background-position:200% 0;
        opacity:0;
        z-index:3;pointer-events:none;
    }
    .v7-card:hover,.v7-card:focus-visible{
        transform:translateY(-4px);
        outline:none;
        box-shadow:0 0 0 1px rgba(201,162,75,.4),
                   0 24px 60px -20px rgba(0,0,0,.8);
    }
    .v7-card:hover::before,.v7-card:focus-visible::before{opacity:1;}
    .v7-card:hover::after,.v7-card:focus-visible::after{
        opacity:1;
        animation:v7-sweep .9s cubic-bezier(.2,.7,.2,1) forwards;
    }
    @keyframes v7-sweep{
        from{background-position:200% 0;}
        to{background-position:-100% 0;}
    }

    .v7-idx{
        position:absolute;top:22px;right:26px;
        font-family:'Cormorant Garamond',Georgia,serif;
        font-size:1.7rem;font-weight:600;
        color:var(--gold);opacity:.25;
        line-height:1;
    }
    .v7-card-ico{
        font-size:1.2rem;color:var(--gold);margin-bottom:18px;display:block;
    }
    .v7-card-title{
        font-family:'Cormorant Garamond',Georgia,serif;
        font-weight:500;font-size:1.55rem;line-height:1.1;
        color:var(--cream);margin:0 0 12px;
        transition:color .4s cubic-bezier(.2,.7,.2,1);
    }
    .v7-card:hover .v7-card-title,.v7-card:focus-visible .v7-card-title{
        background:var(--grad);
        -webkit-background-clip:text;background-clip:text;
        -webkit-text-fill-color:transparent;color:transparent;
    }
    .v7-card-text{
        font-size:.92rem;color:var(--mute);margin:0 0 26px;
        min-height:48px;
    }
    .v7-card-cta{
        font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
        color:var(--gold);font-weight:500;
        display:inline-flex;align-items:center;gap:8px;
    }
    .v7-card-cta i{
        transition:transform .4s cubic-bezier(.2,.7,.2,1);
    }
    .v7-card:hover .v7-card-cta i,.v7-card:focus-visible .v7-card-cta i{
        transform:translateX(4px);
    }

    /* ===== Über-Block ===== */
    .v7-about{
        background:var(--ink-2);
        text-align:center;
        padding:clamp(60px,10vh,110px) 24px;
    }
    .v7-about-inner{max-width:680px;margin:0 auto;}
    .v7-about p{
        font-family:'Cormorant Garamond',Georgia,serif;
        font-size:clamp(1.2rem,2.5vw,1.7rem);
        font-weight:400;color:var(--cream);
        line-height:1.5;margin:24px 0 0;
    }
    .v7-about .v7-mini{
        font-family:'Inter',sans-serif;
        font-size:.95rem;color:var(--mute);margin-top:18px;
    }

    /* ===== Schluss-Band ===== */
    .v7-band{
        background:var(--ink-2);
        text-align:center;
        padding:clamp(70px,12vh,130px) 24px;
        border-top:1px solid var(--line);
    }
    .v7-band h2{
        font-family:'Cormorant Garamond',Georgia,serif;
        font-weight:500;font-size:clamp(2rem,5vw,3.4rem);
        color:var(--cream);margin:0 0 36px;line-height:1.1;
    }
    .v7-cta{
        display:inline-block;
        font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
        font-weight:500;color:var(--ink);text-decoration:none;
        padding:16px 40px;border-radius:2px;
        background:var(--grad);
        transition:transform .4s cubic-bezier(.2,.7,.2,1),
                   box-shadow .4s cubic-bezier(.2,.7,.2,1);
    }
    .v7-cta:hover{
        transform:translateY(-3px);
        box-shadow:0 16px 40px -12px rgba(201,162,75,.5);
    }

    /* ===== Footer ===== */
    .v7-foot{
        background:var(--ink);
        padding:60px 24px 48px;
        border-top:1px solid var(--line);
    }
    .v7-foot-inner{max-width:1180px;margin:0 auto;text-align:center;}
    .v7-foot-brand{
        font-family:'Cormorant Garamond',Georgia,serif;
        font-size:1.4rem;font-weight:600;color:var(--cream);
        display:block;margin-bottom:26px;
    }
    .v7-foot-nav{
        display:flex;flex-wrap:wrap;justify-content:center;
        gap:10px 26px;margin-bottom:30px;
    }
    .v7-foot-nav a{
        font-size:.82rem;color:var(--mute);text-decoration:none;
        transition:color .3s ease;
    }
    .v7-foot-nav a:hover{color:var(--gold);}
    .v7-copy{font-size:.78rem;color:var(--mute);letter-spacing:.04em;}

    /* ===== Responsive ===== */
    @media (max-width:860px){
        .v7-grid{grid-template-columns:repeat(2,1fr);}
        .v7-stats{grid-template-columns:repeat(2,1fr);}
        .v7-stat:nth-child(3)::before{display:none;}
    }
    @media (max-width:560px){
        .v7-grid{grid-template-columns:1fr;}
        .v7-topsep{display:none;}
        .v7-card-text{min-height:0;}
    }
    @media (max-width:380px){
        .v7-wrap{padding:0 16px;}
        .v7-topbar{padding:14px 16px;}
        .v7-card{padding:32px 22px 30px;}
    }
    @media (prefers-reduced-motion:reduce){
        .v7-root *{transition:none!important;animation:none!important;}
    }
</style>

<div class="v7-root">

    <!-- Top-Bar -->
    <header class="v7-topbar" id="v7-topbar">
        <a href="/" class="v7-brand">Arthur Kotsch</a>
        <div class="v7-topsep" aria-hidden="true">
            <span></span><i class="fa-solid fa-circle"></i><span></span>
        </div>
        <a href="/kontakt" class="v7-contactbtn">Kontakt</a>
    </header>

    <!-- Hero -->
    <section class="v7-hero">
        <span class="v7-eyebrow">Student &middot; Digital Engineering &middot; Sachsen</span>
        <h1 class="v7-h1">Neun Welten,<br>eine <span class="v7-goldtext">Signatur</span>.</h1>
        <p class="v7-sub">Apps, Web-Tools, Hosting und IT-Hilfe aus Lichtenstein in Sachsen &ndash; entwickelt von Arthur Kotsch.</p>
        <hr class="v7-hairline v7-hero-line" aria-hidden="true">
    </section>

    <!-- Stats -->
    <div class="v7-wrap">
        <div class="v7-stats">
            <div class="v7-stat">
                <div class="v7-stat-num v7-goldtext">22</div>
                <div class="v7-stat-label">iOS &amp; Mac Apps</div>
            </div>
            <div class="v7-stat">
                <div class="v7-stat-num v7-goldtext">9</div>
                <div class="v7-stat-label">Windows-Tools</div>
            </div>
            <div class="v7-stat">
                <div class="v7-stat-num v7-goldtext">734</div>
                <div class="v7-stat-label">Web-Tools</div>
            </div>
            <div class="v7-stat">
                <div class="v7-stat-num v7-goldtext">1.412</div>
                <div class="v7-stat-label">Artikel</div>
            </div>
        </div>
    </div>

    <!-- Die 9 Welten -->
    <section class="v7-section">
        <div class="v7-wrap">
            <div class="v7-sec-head">
                <span class="v7-eyebrow">Neun Welten</span>
                <h2 class="v7-sec-title">Ein Studio, neun Disziplinen</h2>
            </div>

            <div class="v7-grid">

                <a class="v7-card" href="https://ios.kotsch.tech">
                    <span class="v7-idx" aria-hidden="true">01</span>
                    <i class="v7-card-ico fa-brands fa-apple" aria-hidden="true"></i>
                    <h3 class="v7-card-title">iOS &amp; Mac Apps</h3>
                    <p class="v7-card-text">22 Apps im App Store f&uuml;r iPhone, iPad und Mac, regelm&auml;&szlig;ig aktualisiert.</p>
                    <span class="v7-card-cta">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                <a class="v7-card" href="https://windows.kotsch.tech">
                    <span class="v7-idx" aria-hidden="true">02</span>
                    <i class="v7-card-ico fa-brands fa-windows" aria-hidden="true"></i>
                    <h3 class="v7-card-title">Windows</h3>
                    <p class="v7-card-text">9 Programme: Cleaner, Commander, Notes, Taskmanager, CodeEditor &ndash; Direkt-Download.</p>
                    <span class="v7-card-cta">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                <a class="v7-card" href="https://android.kotsch.tech">
                    <span class="v7-idx" aria-hidden="true">03</span>
                    <i class="v7-card-ico fa-brands fa-android" aria-hidden="true"></i>
                    <h3 class="v7-card-title">Android</h3>
                    <p class="v7-card-text">Native Apps, aktuell in Entwicklung.</p>
                    <span class="v7-card-cta">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                <a class="v7-card" href="https://webtools.kotsch.tech">
                    <span class="v7-idx" aria-hidden="true">04</span>
                    <i class="v7-card-ico fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i>
                    <h3 class="v7-card-title">Web-Tools</h3>
                    <p class="v7-card-text">734 Tools direkt im Browser, ohne Login, ohne Installation.</p>
                    <span class="v7-card-cta">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                <a class="v7-card" href="https://shop.kotsch.tech">
                    <span class="v7-idx" aria-hidden="true">05</span>
                    <i class="v7-card-ico fa-solid fa-bag-shopping" aria-hidden="true"></i>
                    <h3 class="v7-card-title">Shop</h3>
                    <p class="v7-card-text">Digitale Produkte mit Sofort-Download.</p>
                    <span class="v7-card-cta">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                <a class="v7-card" href="https://hosting.kotsch.tech">
                    <span class="v7-idx" aria-hidden="true">06</span>
                    <i class="v7-card-ico fa-solid fa-server" aria-hidden="true"></i>
                    <h3 class="v7-card-title">Hosting</h3>
                    <p class="v7-card-text">Managed Webhosting und vServer/VPS, DSGVO-konform.</p>
                    <span class="v7-card-cta">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                <a class="v7-card" href="https://news.kotsch.tech">
                    <span class="v7-idx" aria-hidden="true">07</span>
                    <i class="v7-card-ico fa-solid fa-newspaper" aria-hidden="true"></i>
                    <h3 class="v7-card-title">News</h3>
                    <p class="v7-card-text">1.412 Ratgeber und Tutorials.</p>
                    <span class="v7-card-cta">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                <a class="v7-card" href="https://it-hilfe.kotsch.tech">
                    <span class="v7-idx" aria-hidden="true">08</span>
                    <i class="v7-card-ico fa-solid fa-screwdriver-wrench" aria-hidden="true"></i>
                    <h3 class="v7-card-title">IT-Hilfe</h3>
                    <p class="v7-card-text">Vor Ort und Remote in der Region Glauchau&ndash;Lichtenstein. Keine L&ouml;sung = kein Preis.</p>
                    <span class="v7-card-cta">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                <a class="v7-card" href="https://webdesign.kotsch.tech">
                    <span class="v7-idx" aria-hidden="true">09</span>
                    <i class="v7-card-ico fa-solid fa-pen-ruler" aria-hidden="true"></i>
                    <h3 class="v7-card-title">Webdesign</h3>
                    <p class="v7-card-text">Studio mit 20 Branchen-Demos.</p>
                    <span class="v7-card-cta">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

            </div>
        </div>
    </section>

    <!-- Über-Block -->
    <section class="v7-about">
        <div class="v7-about-inner">
            <span class="v7-eyebrow">Über</span>
            <p>Arthur Kotsch entwickelt als Student des Digital Engineering Software und digitale Dienste &ndash; vom App Store bis zur IT-Hilfe vor Ort in der Region.</p>
            <p class="v7-mini">Lichtenstein, Sachsen.</p>
        </div>
    </section>

    <!-- Schluss-Band -->
    <section class="v7-band">
        <h2>Ein Problem, eine Region,<br>eine L&ouml;sung.</h2>
        <a href="/kontakt" class="v7-cta">Kontakt aufnehmen</a>
    </section>

    <!-- Footer -->
    <footer class="v7-foot">
        <div class="v7-foot-inner">
            <span class="v7-foot-brand">Arthur Kotsch</span>
            <nav class="v7-foot-nav" aria-label="Subdomains">
                <a href="https://ios.kotsch.tech">iOS &amp; Mac</a>
                <a href="https://windows.kotsch.tech">Windows</a>
                <a href="https://android.kotsch.tech">Android</a>
                <a href="https://webtools.kotsch.tech">Web-Tools</a>
                <a href="https://shop.kotsch.tech">Shop</a>
                <a href="https://hosting.kotsch.tech">Hosting</a>
                <a href="https://news.kotsch.tech">News</a>
                <a href="https://it-hilfe.kotsch.tech">IT-Hilfe</a>
                <a href="https://webdesign.kotsch.tech">Webdesign</a>
            </nav>
            <hr class="v7-hairline" aria-hidden="true" style="max-width:200px;margin:0 auto 24px;">
            <p class="v7-copy">&copy; {{ date('Y') }} Arthur Kotsch &middot; Lichtenstein</p>
        </div>
    </footer>

</div>

<script>
    (function(){
        var bar=document.getElementById('v7-topbar');
        if(!bar)return;
        var onScroll=function(){
            if(window.scrollY>20){bar.classList.add('v7-scrolled');}
            else{bar.classList.remove('v7-scrolled');}
        };
        window.addEventListener('scroll',onScroll,{passive:true});
        onScroll();
    })();
</script>
@endsection