@extends('layouts.app')

@section('title', 'Arthur Kotsch — Art Déco | KOTSCH.TECH')
@section('meta_description', 'Arthur Kotsch, Student Digital Engineering aus Lichtenstein (Sachsen): 9 Welten im Art-Déco-Gewand — 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;}

    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap');

    .v14-page{
        --v14-marine:#0B1B2B;
        --v14-emerald:#0E2A2A;
        --v14-gold:#C9A24B;
        --v14-gold-hi:#E8CE84;
        --v14-ivory:#EDE6D4;
        --v14-petrol:#14333A;
        --v14-line:rgba(201,162,75,.45);
        --v14-line-soft:rgba(201,162,75,.22);
        --v14-ease:cubic-bezier(.22,.61,.36,1);
        background:var(--v14-marine);
        color:var(--v14-ivory);
        font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
        font-weight:300;
        -webkit-font-smoothing:antialiased;
        overflow-x:hidden;
        min-height:100vh;
    }
    .v14-page *{box-sizing:border-box;}
    .v14-serif{font-family:'Cormorant Garamond','Times New Roman',Georgia,serif;}

    /* ---------- gemeinsame Bausteine ---------- */
    .v14-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

    .v14-eyebrow{
        font-family:'Jost',sans-serif;font-weight:500;
        text-transform:uppercase;letter-spacing:.3em;
        font-size:clamp(.62rem,1.4vw,.74rem);
        color:var(--v14-gold);
    }
    .v14-h2{
        font-family:'Cormorant Garamond',serif;font-weight:600;
        text-transform:uppercase;letter-spacing:.24em;
        color:var(--v14-ivory);
        font-size:clamp(1.6rem,4.4vw,2.7rem);
        line-height:1.12;margin:0;
    }

    /* dünne Goldlinie als Trenner */
    .v14-rule{height:1px;background:var(--v14-line);border:0;}

    /* Sunburst-Halbfächer (Ornament) */
    .v14-sun{
        margin:0 auto;overflow:hidden;
        --r:#C9A24B;
    }
    .v14-sun > i{
        display:block;border-radius:50%;
        background:conic-gradient(from -90deg,
            var(--r) 0 6deg,transparent 6deg 18deg,var(--r) 18deg 24deg,
            transparent 24deg 36deg,var(--r) 36deg 42deg,transparent 42deg 54deg,
            var(--r) 54deg 60deg,transparent 60deg 72deg,var(--r) 72deg 78deg,
            transparent 78deg 90deg,var(--r) 90deg 96deg,transparent 96deg 108deg,
            var(--r) 108deg 114deg,transparent 114deg 126deg,var(--r) 126deg 132deg,
            transparent 132deg 144deg,var(--r) 144deg 150deg,transparent 150deg 162deg,
            var(--r) 162deg 168deg,transparent 168deg 180deg,transparent 180deg);
    }
    /* Ornament-Größen */
    .v14-sun-hero{width:clamp(120px,30vw,200px);height:clamp(60px,15vw,100px);}
    .v14-sun-hero > i{width:clamp(120px,30vw,200px);height:clamp(120px,30vw,200px);
        animation:v14-spin 40s linear infinite;transform-origin:50% 50%;}
    .v14-sun-mini{width:54px;height:27px;}
    .v14-sun-mini > i{width:54px;height:54px;}
    .v14-sun-tile{width:38px;height:19px;}
    .v14-sun-tile > i{width:38px;height:38px;}

    @keyframes v14-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

    /* Section-Heading mit krönendem Mini-Sunburst */
    .v14-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;}
    .v14-head .v14-deco{display:flex;align-items:center;gap:18px;width:100%;max-width:520px;}
    .v14-head .v14-deco .v14-rule{flex:1;}
    .v14-head .v14-deco .v14-dot{
        flex:0 0 auto;width:7px;height:7px;background:var(--v14-gold);
        transform:rotate(45deg);
    }

    /* :focus-visible global für die Seite */
    .v14-page a:focus-visible,.v14-page button:focus-visible{
        outline:2px solid var(--v14-gold-hi);outline-offset:4px;border-radius:2px;
    }

    /* ====================================================== TOP-LEISTE */
    .v14-top{padding:26px 24px 8px;}
    .v14-top .v14-mono{
        display:flex;align-items:center;justify-content:center;gap:22px;
        max-width:560px;margin:0 auto;
    }
    .v14-top .v14-mono .v14-rule{flex:1;}
    .v14-emblem{
        width:52px;height:52px;flex:0 0 52px;border-radius:50%;
        border:1px solid var(--v14-gold);
        box-shadow:inset 0 0 0 4px var(--v14-marine),inset 0 0 0 5px var(--v14-line-soft);
        display:flex;align-items:center;justify-content:center;
        font-family:'Cormorant Garamond',serif;font-weight:600;
        letter-spacing:.12em;font-size:1.1rem;color:var(--v14-gold);
    }

    /* ====================================================== HERO */
    .v14-hero{padding:48px 24px 64px;text-align:center;}
    .v14-hero .v14-inner{max-width:840px;margin:0 auto;}
    .v14-hero h1{
        font-family:'Cormorant Garamond',serif;font-weight:600;
        text-transform:uppercase;letter-spacing:clamp(.16em,1.4vw,.3em);
        font-size:clamp(2.3rem,9vw,5.4rem);
        line-height:1.02;margin:28px 0 0;color:var(--v14-ivory);
        word-break:break-word;
    }
    .v14-hero .v14-sub{
        font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;
        font-size:clamp(1.05rem,3.2vw,1.5rem);
        color:var(--v14-gold-hi);margin:18px 0 0;letter-spacing:.02em;
    }
    .v14-hero .v14-loc{
        font-family:'Jost',sans-serif;font-weight:300;
        text-transform:uppercase;letter-spacing:.26em;
        font-size:clamp(.6rem,1.6vw,.72rem);
        color:rgba(237,230,212,.6);margin:14px 0 0;
    }
    .v14-cta-row{
        display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:34px;
    }
    .v14-btn{
        font-family:'Jost',sans-serif;font-weight:500;
        text-transform:uppercase;letter-spacing:.26em;
        font-size:clamp(.66rem,1.8vw,.78rem);
        color:var(--v14-gold);text-decoration:none;
        padding:15px 30px;background:transparent;
        border:1px solid var(--v14-gold);position:relative;
        transition:background .5s var(--v14-ease),color .4s var(--v14-ease),letter-spacing .4s var(--v14-ease);
    }
    .v14-btn:hover{background:rgba(201,162,75,.12);color:var(--v14-gold-hi);letter-spacing:.3em;}

    /* ====================================================== KENNZAHLEN */
    .v14-stats-sec{padding:8px 24px 56px;}
    .v14-stats{
        display:grid;grid-template-columns:repeat(4,1fr);
        max-width:920px;margin:0 auto;
        border-top:1px solid var(--v14-line);border-bottom:1px solid var(--v14-line);
    }
    .v14-stat{
        min-width:0;text-align:center;padding:30px 12px;
        position:relative;
    }
    .v14-stat + .v14-stat::before{
        content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
        background:var(--v14-line);
    }
    .v14-stat .v14-num{
        font-family:'Cormorant Garamond',serif;font-weight:600;
        font-size:clamp(2rem,6vw,3.4rem);line-height:1;color:var(--v14-gold);
        font-variant-numeric:tabular-nums;
    }
    .v14-stat .v14-lab{
        font-family:'Jost',sans-serif;font-weight:300;
        text-transform:uppercase;letter-spacing:.2em;
        font-size:clamp(.54rem,1.5vw,.66rem);
        color:rgba(237,230,212,.66);margin-top:12px;
    }

    /* ====================================================== WELTEN */
    .v14-worlds{padding:54px 0 64px;}
    .v14-grid{
        display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
        gap:22px;margin-top:48px;
    }
    .v14-tile{
        min-width:0;display:flex;flex-direction:column;align-items:center;
        text-align:center;justify-content:center;gap:14px;
        padding:38px 26px;min-height:288px;text-decoration:none;
        background:var(--v14-petrol);color:var(--v14-ivory);position:relative;
        outline:1px solid var(--v14-line);outline-offset:-10px;
        box-shadow:inset 0 0 0 1px rgba(201,162,75,.9);
        transition:transform .4s var(--v14-ease),box-shadow .4s var(--v14-ease);
    }
    /* Eck-Karos */
    .v14-tile .v14-corner{
        position:absolute;width:7px;height:7px;background:var(--v14-gold);
        transform:rotate(45deg);transition:background .4s var(--v14-ease),box-shadow .4s var(--v14-ease);
    }
    .v14-tile .v14-corner.tl{top:6px;left:6px;}
    .v14-tile .v14-corner.tr{top:6px;right:6px;}
    .v14-tile .v14-corner.bl{bottom:6px;left:6px;}
    .v14-tile .v14-corner.br{bottom:6px;right:6px;}
    .v14-tile .v14-wtitle{
        font-family:'Jost',sans-serif;font-weight:600;
        text-transform:uppercase;letter-spacing:.22em;
        font-size:clamp(.72rem,2vw,.86rem);color:var(--v14-gold);line-height:1.3;
    }
    .v14-tile .v14-wline{width:46px;height:1px;background:rgba(201,162,75,.6);}
    .v14-tile .v14-wtext{
        font-family:'Jost',sans-serif;font-weight:300;
        font-size:clamp(.85rem,2.3vw,.95rem);line-height:1.55;color:var(--v14-ivory);
    }
    .v14-tile .v14-enter{
        font-family:'Jost',sans-serif;font-weight:600;
        text-transform:uppercase;letter-spacing:.3em;
        font-size:.72rem;color:var(--v14-gold-hi);margin-top:auto;
        transition:letter-spacing .4s var(--v14-ease);
    }
    .v14-tile .v14-enter .v14-arr{display:inline-block;transition:transform .4s var(--v14-ease);}
    .v14-tile:hover{
        transform:translateY(-6px);
        box-shadow:inset 0 0 0 1px var(--v14-gold-hi),0 14px 40px rgba(0,0,0,.45);
    }
    .v14-tile:hover .v14-corner{background:var(--v14-gold-hi);box-shadow:0 0 8px rgba(232,206,132,.7);}
    .v14-tile:hover .v14-enter{letter-spacing:.34em;}
    .v14-tile:hover .v14-arr{transform:translateX(4px);}

    /* ====================================================== ÜBER-BAND */
    .v14-about{background:var(--v14-emerald);padding:72px 24px;}
    .v14-about .v14-frame{
        max-width:780px;margin:0 auto;text-align:center;
        padding:48px clamp(26px,6vw,64px);position:relative;
        border:1px solid var(--v14-line);
        box-shadow:inset 0 0 0 1px rgba(201,162,75,.18);
    }
    .v14-about .v14-frame .v14-corner{
        position:absolute;width:9px;height:9px;background:var(--v14-gold);transform:rotate(45deg);
    }
    .v14-about .v14-frame .v14-corner.tl{top:-5px;left:-5px;}
    .v14-about .v14-frame .v14-corner.tr{top:-5px;right:-5px;}
    .v14-about .v14-frame .v14-corner.bl{bottom:-5px;left:-5px;}
    .v14-about .v14-frame .v14-corner.br{bottom:-5px;right:-5px;}
    .v14-about .v14-quote{
        font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;
        font-size:clamp(1.25rem,3.6vw,1.9rem);line-height:1.45;color:var(--v14-ivory);margin:24px 0 0;
    }
    .v14-about .v14-byline{
        font-family:'Jost',sans-serif;font-weight:300;
        text-transform:uppercase;letter-spacing:.26em;
        font-size:clamp(.58rem,1.5vw,.7rem);color:var(--v14-gold);margin-top:24px;
    }

    /* ====================================================== KONTAKT */
    .v14-contact{padding:80px 24px;text-align:center;}
    .v14-contact .v14-frame{
        max-width:680px;margin:0 auto;position:relative;
        padding:56px clamp(26px,6vw,56px);
        border:1px solid var(--v14-gold);
        box-shadow:inset 0 0 0 6px var(--v14-marine),inset 0 0 0 7px var(--v14-line-soft);
    }
    .v14-contact h2{margin-bottom:18px;}
    .v14-contact p{
        font-family:'Jost',sans-serif;font-weight:300;
        font-size:clamp(.92rem,2.4vw,1.05rem);line-height:1.6;
        color:rgba(237,230,212,.82);max-width:480px;margin:0 auto 30px;
    }

    /* ====================================================== FOOTER */
    .v14-foot{padding:46px 24px 56px;border-top:1px solid var(--v14-line-soft);}
    .v14-foot .v14-mono{
        display:flex;align-items:center;justify-content:center;gap:22px;
        max-width:520px;margin:0 auto 22px;
    }
    .v14-foot .v14-mono .v14-rule{flex:1;}
    .v14-foot .v14-copy{
        text-align:center;font-family:'Jost',sans-serif;font-weight:300;
        text-transform:uppercase;letter-spacing:.24em;
        font-size:clamp(.56rem,1.5vw,.66rem);color:rgba(237,230,212,.55);
    }

    /* ---------- Reveal-Intro (settelt) ---------- */
    .v14-rise{opacity:0;transform:translateY(22px);transition:opacity .9s var(--v14-ease),transform .9s var(--v14-ease);}
    .v14-rise.v14-in{opacity:1;transform:none;}

    /* ---------- Responsive ---------- */
    @media (max-width:680px){
        .v14-stats{grid-template-columns:repeat(2,1fr);}
        .v14-stat:nth-child(3)::before,.v14-stat:nth-child(1)::before{display:none;}
        .v14-stat:nth-child(3),.v14-stat:nth-child(4){border-top:1px solid var(--v14-line);}
    }
    @media (max-width:380px){
        .v14-wrap{padding:0 16px;}
        .v14-cta-row{flex-direction:column;align-items:stretch;}
        .v14-btn{text-align:center;}
    }

    @media (prefers-reduced-motion:reduce){
        .v14-page *{animation:none!important;transition:none!important;}
        .v14-rise{opacity:1!important;transform:none!important;}
    }
</style>

<div class="v14-page">

    {{-- ====================== TOP-LEISTE ====================== --}}
    <div class="v14-top">
        <div class="v14-mono">
            <hr class="v14-rule" aria-hidden="true">
            <span class="v14-emblem" aria-label="Monogramm Arthur Kotsch">AK</span>
            <hr class="v14-rule" aria-hidden="true">
        </div>
    </div>

    {{-- ====================== HERO ====================== --}}
    <header class="v14-hero">
        <div class="v14-inner">
            <div class="v14-sun v14-sun-hero v14-rise v14-in" aria-hidden="true"><i></i></div>
            <h1 class="v14-rise">Arthur Kotsch</h1>
            <p class="v14-sub v14-rise">Student Digital Engineering · Entwickler aus Lichtenstein</p>
            <p class="v14-loc v14-rise">Lichtenstein · Sachsen</p>
            <div class="v14-cta-row v14-rise">
                <a class="v14-btn" href="#v14-welten">Welten entdecken</a>
                <a class="v14-btn" href="/kontakt">Kontakt</a>
            </div>
        </div>
    </header>

    {{-- ====================== KENNZAHLEN ====================== --}}
    <section class="v14-stats-sec" aria-label="Kennzahlen">
        <div class="v14-stats v14-rise">
            <div class="v14-stat"><div class="v14-num">22</div><div class="v14-lab">iOS / Mac Apps</div></div>
            <div class="v14-stat"><div class="v14-num">9</div><div class="v14-lab">Windows-Tools</div></div>
            <div class="v14-stat"><div class="v14-num">734</div><div class="v14-lab">Web-Tools</div></div>
            <div class="v14-stat"><div class="v14-num">1.412</div><div class="v14-lab">Artikel</div></div>
        </div>
    </section>

    {{-- ====================== DIE 9 WELTEN ====================== --}}
    <section class="v14-worlds" id="v14-welten">
        <div class="v14-wrap">
            <div class="v14-head v14-rise">
                <div class="v14-sun v14-sun-mini" aria-hidden="true"><i></i></div>
                <span class="v14-eyebrow">Neun Welten</span>
                <h2 class="v14-h2">Das Werk</h2>
                <div class="v14-deco" aria-hidden="true">
                    <hr class="v14-rule">
                    <span class="v14-dot"></span>
                    <hr class="v14-rule">
                </div>
            </div>

            <div class="v14-grid">
                @php
                    $welten = [
                        ['iOS & Mac Apps','22 Apps im App Store — iPhone, iPad & Mac, mit regelmäßigen Updates.','https://ios.kotsch.tech'],
                        ['Windows','9 Programme — Cleaner, Commander, Notes, Taskmanager & CodeEditor, Direkt-Download.','https://windows.kotsch.tech'],
                        ['Android','Native Apps für Android — aktuell in Entwicklung.','https://android.kotsch.tech'],
                        ['Web-Tools','734 Tools direkt im Browser — ohne Login, ohne Installation.','https://webtools.kotsch.tech'],
                        ['Shop','Digitale Produkte mit Sofort-Download — direkt einsatzbereit.','https://shop.kotsch.tech'],
                        ['Hosting','Managed Webhosting & vServer / VPS — DSGVO-konform.','https://hosting.kotsch.tech'],
                        ['News','1.412 Ratgeber & Tutorials rund um Technik und Entwicklung.','https://news.kotsch.tech'],
                        ['IT-Hilfe','Vor Ort & Remote in der Region Glauchau–Lichtenstein. Keine Lösung = kein Preis.','https://it-hilfe.kotsch.tech'],
                        ['Webdesign','Studio & 20 Branchen-Demos — Websites mit Charakter.','https://webdesign.kotsch.tech'],
                    ];
                @endphp
                @foreach($welten as $w)
                    <a class="v14-tile v14-rise" href="{{ $w[2] }}">
                        <span class="v14-corner tl" aria-hidden="true"></span>
                        <span class="v14-corner tr" aria-hidden="true"></span>
                        <span class="v14-corner bl" aria-hidden="true"></span>
                        <span class="v14-corner br" aria-hidden="true"></span>
                        <span class="v14-sun v14-sun-tile" aria-hidden="true"><i></i></span>
                        <span class="v14-wtitle">{{ $w[0] }}</span>
                        <span class="v14-wline" aria-hidden="true"></span>
                        <span class="v14-wtext">{{ $w[1] }}</span>
                        <span class="v14-enter">Betreten <span class="v14-arr">→</span></span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ====================== ÜBER-BAND ====================== --}}
    <section class="v14-about" aria-label="Über Arthur Kotsch">
        <div class="v14-frame v14-rise">
            <span class="v14-corner tl" aria-hidden="true"></span>
            <span class="v14-corner tr" aria-hidden="true"></span>
            <span class="v14-corner bl" aria-hidden="true"></span>
            <span class="v14-corner br" aria-hidden="true"></span>
            <div class="v14-sun v14-sun-mini" aria-hidden="true"><i></i></div>
            <p class="v14-quote">„Eine persönliche Tech-Marke aus Lichtenstein — Apps, Tools und Wissen, gebaut mit Sorgfalt und einem Blick fürs Detail.“</p>
            <p class="v14-byline">Arthur Kotsch · Student Digital Engineering</p>
        </div>
    </section>

    {{-- ====================== KONTAKT ====================== --}}
    <section class="v14-contact" aria-label="Kontakt">
        <div class="v14-frame v14-rise">
            <div class="v14-sun v14-sun-mini" aria-hidden="true" style="margin-bottom:6px;"><i></i></div>
            <h2 class="v14-h2">Sprechen wir</h2>
            <p>Ob Projekt, IT-Hilfe oder eine Frage zu einer der neun Welten — eine Nachricht genügt.</p>
            <a class="v14-btn" href="/kontakt">Kontakt aufnehmen</a>
        </div>
    </section>

    {{-- ====================== FOOTER ====================== --}}
    <footer class="v14-foot">
        <div class="v14-mono">
            <hr class="v14-rule" aria-hidden="true">
            <span class="v14-emblem">AK</span>
            <hr class="v14-rule" aria-hidden="true">
        </div>
        <p class="v14-copy">© {{ date('Y') }} Arthur Kotsch · Kotsch.tech · Lichtenstein, Sachsen</p>
    </footer>

</div>

<script>
(function(){
    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches;
    var els = document.querySelectorAll('.v14-page .v14-rise');
    if(reduce || !('IntersectionObserver' in window)){
        els.forEach(function(el){el.classList.add('v14-in');});
        return;
    }
    var io = new IntersectionObserver(function(entries){
        entries.forEach(function(e){
            if(e.isIntersecting){e.target.classList.add('v14-in');io.unobserve(e.target);}
        });
    },{threshold:0.12,rootMargin:'0px 0px -8% 0px'});
    els.forEach(function(el){ if(!el.classList.contains('v14-in')) io.observe(el); });
})();
</script>
@endsection