@extends('layouts.app')

@section('title', 'Arthur Kotsch — Memphis / 80s Postmodern | KOTSCH.TECH')
@section('meta_description', 'Arthur Kotsch, Student Digital Engineering aus Lichtenstein (Sachsen): 9 Welten im Memphis-/80s-Postmodern-Stil — iOS- & Mac-Apps, Windows-Programme, 734 Web-Tools, Shop, Hosting, News, IT-Hilfe und Webdesign.')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap');

    /* Globale Chrome ausblenden — diese Variante ist eine eigenständige Seite */
    nav{display:none!important;} footer{display:none!important;} main{padding-top:0!important;}

    .v13-page{
        --v13-creme:#FBF3E4;
        --v13-ink:#1A1A1A;
        --v13-red:#FF4B3E;
        --v13-yellow:#FFC93C;
        --v13-blue:#2D6FE8;
        --v13-mint:#2BC4A2;
        --v13-pink:#E94CA8;
        --v13-ease:cubic-bezier(.2,.8,.2,1);
        background:var(--v13-creme);
        color:var(--v13-ink);
        font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
        -webkit-font-smoothing:antialiased;
        min-height:100vh;
        overflow-x:hidden;
        position:relative;
    }
    .v13-page *{box-sizing:border-box;}
    .v13-display{font-family:'Archivo Black','Space Grotesk',system-ui,sans-serif;font-weight:400;letter-spacing:-0.02em;line-height:0.96;text-transform:uppercase;}
    .v13-outline{-webkit-text-stroke:2px var(--v13-ink);color:transparent;}

    .v13-wrap{max-width:1180px;margin:0 auto;padding:0 22px;}

    /* ---------- Zickzack-Trennband ---------- */
    .v13-zigzag{
        height:14px;width:100%;
        background:
            linear-gradient(135deg,var(--v13-ink) 25%,transparent 25%) -10px 0,
            linear-gradient(225deg,var(--v13-ink) 25%,transparent 25%) -10px 0;
        background-size:20px 20px;
        background-repeat:repeat-x;
        opacity:0.85;
    }

    /* ---------- Header ---------- */
    .v13-header{
        background:var(--v13-creme);
        position:relative;z-index:5;
    }
    .v13-headbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;flex-wrap:wrap;}
    .v13-logo{font-family:'Archivo Black',sans-serif;font-size:clamp(1.3rem,3.4vw,1.8rem);letter-spacing:-0.02em;text-transform:uppercase;}
    .v13-logo .v13-outline{-webkit-text-stroke:1.5px var(--v13-ink);}
    .v13-nav{display:flex;gap:12px;flex-wrap:wrap;}
    .v13-pill{
        display:inline-block;
        font-weight:700;font-size:0.92rem;text-transform:uppercase;letter-spacing:0.02em;
        text-decoration:none;color:var(--v13-ink);
        padding:9px 18px;border:3px solid var(--v13-ink);border-radius:999px;
        background:var(--v13-yellow);
        box-shadow:4px 4px 0 var(--v13-ink);
        transition:transform .12s var(--v13-ease),box-shadow .12s var(--v13-ease);
    }
    .v13-pill:nth-child(2){background:var(--v13-mint);}
    .v13-pill:nth-child(3){background:var(--v13-pink);}
    .v13-pill:hover,.v13-pill:focus-visible{transform:translate(4px,4px);box-shadow:0 0 0 var(--v13-ink);outline:none;}
    .v13-pill:focus-visible{outline:3px solid var(--v13-blue);outline-offset:3px;}

    /* ---------- Memphis-Primitive ---------- */
    .v13-shape{position:absolute;pointer-events:none;z-index:0;}
    .v13-circle{border-radius:50%;border:3px solid var(--v13-ink);}
    .v13-half{border:3px solid var(--v13-ink);border-radius:100% 100% 0 0;border-bottom:none;}
    .v13-tri{width:0;height:0;}
    .v13-dots{
        background-image:radial-gradient(var(--v13-ink) 2.2px,transparent 2.3px);
        background-size:14px 14px;
    }
    .v13-drift{animation:v13drift 12s var(--v13-ease) infinite alternate;}
    .v13-spin{animation:v13spin 16s linear infinite;}
    @keyframes v13drift{from{transform:translateY(0) rotate(var(--r,0deg));}to{transform:translateY(-16px) rotate(calc(var(--r,0deg) + 8deg));}}
    @keyframes v13spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}

    .v13-squiggle{display:block;}

    /* ---------- Hero ---------- */
    .v13-hero{position:relative;padding:clamp(40px,7vw,80px) 0 clamp(50px,7vw,90px);}
    .v13-hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:40px;align-items:center;position:relative;z-index:2;}
    .v13-kicker{
        display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;font-size:0.82rem;
        background:var(--v13-ink);color:var(--v13-creme);padding:6px 14px;border-radius:999px;margin-bottom:20px;
    }
    .v13-h1{font-size:clamp(2.7rem,8.5vw,6.4rem);margin:0 0 22px;}
    .v13-h1 .l1{color:var(--v13-red);}
    .v13-h1 .l2{color:var(--v13-blue);}
    .v13-h1 .l3{-webkit-text-stroke:2.5px var(--v13-ink);color:transparent;}
    .v13-sub{font-size:clamp(1rem,1.7vw,1.18rem);max-width:42ch;line-height:1.5;font-weight:500;margin:0 0 28px;}
    .v13-cta-row{display:flex;gap:14px;flex-wrap:wrap;}
    .v13-btn{
        display:inline-flex;align-items:center;gap:9px;
        font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:0.02em;
        text-decoration:none;color:var(--v13-ink);
        padding:14px 24px;border:3px solid var(--v13-ink);
        box-shadow:8px 8px 0 var(--v13-ink);
        transition:transform .13s var(--v13-ease),box-shadow .13s var(--v13-ease);
    }
    .v13-btn.is-red{background:var(--v13-red);color:var(--v13-creme);}
    .v13-btn.is-creme{background:var(--v13-creme);}
    .v13-btn:hover,.v13-btn:focus-visible{transform:translate(4px,4px);box-shadow:4px 4px 0 var(--v13-ink);outline:none;}
    .v13-btn:focus-visible{outline:3px solid var(--v13-blue);outline-offset:4px;}

    /* Hero-Collage */
    .v13-collage{position:relative;min-height:340px;}
    .v13-avatar{
        position:relative;z-index:3;width:min(280px,72%);aspect-ratio:4/5;margin:0 auto;
        background:var(--v13-yellow);
        border:4px solid var(--v13-ink);
        box-shadow:12px 12px 0 var(--v13-ink);
        transform:rotate(-4deg);
        display:flex;align-items:center;justify-content:center;
        overflow:hidden;
    }
    .v13-avatar .ico{font-size:5.5rem;color:var(--v13-ink);}
    .v13-avatar::after{content:"AK";position:absolute;bottom:10px;right:14px;font-family:'Archivo Black',sans-serif;font-size:1.4rem;color:var(--v13-ink);}
    .v13-c-red{width:74px;height:74px;background:var(--v13-red);border:3px solid var(--v13-ink);border-radius:50%;top:-10px;right:6%;z-index:4;}
    .v13-c-blue{width:0;height:0;border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:58px solid var(--v13-blue);bottom:8px;left:0;z-index:4;filter:drop-shadow(4px 4px 0 var(--v13-ink));}
    .v13-c-mint{width:86px;height:43px;background:var(--v13-mint);border:3px solid var(--v13-ink);border-radius:100% 100% 0 0;border-bottom:none;bottom:-4px;right:4%;z-index:4;}

    /* ---------- Kennzahlen ---------- */
    .v13-stats{position:relative;z-index:2;padding:8px 0 clamp(40px,6vw,70px);}
    .v13-stats-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
    .v13-ticket{
        flex:1 1 200px;min-width:0;
        border:3px solid var(--v13-ink);
        box-shadow:8px 8px 0 var(--v13-ink);
        padding:18px 20px;text-align:center;
        transition:transform .15s var(--v13-ease);
    }
    .v13-ticket:nth-child(1){background:var(--v13-red);color:var(--v13-creme);transform:rotate(-3deg);}
    .v13-ticket:nth-child(2){background:var(--v13-yellow);transform:rotate(2deg);}
    .v13-ticket:nth-child(3){background:var(--v13-blue);color:var(--v13-creme);transform:rotate(-2deg);}
    .v13-ticket:nth-child(4){background:var(--v13-mint);transform:rotate(3deg);}
    .v13-ticket:hover{transform:rotate(0deg);}
    .v13-ticket .num{font-family:'Archivo Black',sans-serif;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1;}
    .v13-ticket .lab{font-weight:500;font-size:0.86rem;text-transform:uppercase;letter-spacing:0.04em;margin-top:6px;}

    /* ---------- Sektions-Titel ---------- */
    .v13-section{position:relative;z-index:2;padding:clamp(36px,6vw,64px) 0;}
    .v13-sec-head{margin-bottom:38px;position:relative;}
    .v13-sec-tag{display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;font-size:0.8rem;background:var(--v13-pink);color:var(--v13-creme);border:3px solid var(--v13-ink);padding:5px 12px;box-shadow:4px 4px 0 var(--v13-ink);margin-bottom:16px;}
    .v13-sec-title{font-size:clamp(2rem,6vw,3.6rem);margin:0;}
    .v13-sec-title .v13-outline{-webkit-text-stroke:2px var(--v13-ink);}

    /* ---------- 9 Welten ---------- */
    .v13-worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
    .v13-card{
        position:relative;min-width:0;
        background:var(--v13-creme);
        border:3px solid var(--v13-ink);
        padding:24px 22px 22px;
        text-decoration:none;color:var(--v13-ink);
        display:flex;flex-direction:column;
        transition:transform .15s var(--v13-ease),box-shadow .15s var(--v13-ease);
    }
    .v13-card:nth-child(3n+1){transform:rotate(-2deg);}
    .v13-card:nth-child(3n+2){transform:rotate(0deg);}
    .v13-card:nth-child(3n){transform:rotate(2deg);}
    .v13-card:hover,.v13-card:focus-visible{transform:translate(-4px,-4px) rotate(0deg);outline:none;}
    .v13-card:focus-visible{outline:3px solid var(--v13-blue);outline-offset:4px;}

    /* span-2 für Memphis-Unruhe */
    .v13-card.span2{grid-column:span 2;}

    /* Welt-Farben via Schatten */
    .v13-card.c-red{box-shadow:8px 8px 0 var(--v13-red);}
    .v13-card.c-blue{box-shadow:8px 8px 0 var(--v13-blue);}
    .v13-card.c-yellow{box-shadow:8px 8px 0 var(--v13-yellow);}
    .v13-card.c-mint{box-shadow:8px 8px 0 var(--v13-mint);}
    .v13-card.c-pink{box-shadow:8px 8px 0 var(--v13-pink);}
    .v13-card.c-red:hover{box-shadow:12px 12px 0 var(--v13-red);}
    .v13-card.c-blue:hover{box-shadow:12px 12px 0 var(--v13-blue);}
    .v13-card.c-yellow:hover{box-shadow:12px 12px 0 var(--v13-yellow);}
    .v13-card.c-mint:hover{box-shadow:12px 12px 0 var(--v13-mint);}
    .v13-card.c-pink:hover{box-shadow:12px 12px 0 var(--v13-pink);}

    .v13-mark{width:46px;height:46px;border:3px solid var(--v13-ink);margin-bottom:16px;flex:none;}
    .v13-mark.m-circle{border-radius:50%;background:var(--v13-red);}
    .v13-mark.m-tri{width:0;height:0;border:none;border-left:24px solid transparent;border-right:24px solid transparent;border-bottom:42px solid var(--v13-blue);filter:drop-shadow(3px 3px 0 var(--v13-ink));}
    .v13-mark.m-half{border-radius:100% 100% 0 0;border-bottom:none;background:var(--v13-yellow);height:24px;width:48px;}
    .v13-mark.m-square{background:var(--v13-mint);transform:rotate(45deg);}
    .v13-mark.m-quarter{border-radius:0 0 0 100%;background:var(--v13-pink);}
    .v13-mark.m-ring{border-radius:50%;border-width:8px;}
    .v13-mark.m-bar{height:18px;width:48px;background:var(--v13-red);}
    .v13-mark.m-dot{border-radius:50%;background:var(--v13-mint);}
    .v13-mark.m-diamond{background:var(--v13-yellow);transform:rotate(45deg);height:36px;width:36px;}

    .v13-card .num{font-family:'Archivo Black',sans-serif;font-size:0.85rem;opacity:0.55;margin-bottom:4px;}
    .v13-card .ctitle{font-family:'Archivo Black',sans-serif;font-size:clamp(1.15rem,2.2vw,1.5rem);text-transform:uppercase;letter-spacing:-0.01em;line-height:1.02;margin-bottom:10px;}
    .v13-card .ctext{font-weight:500;font-size:0.96rem;line-height:1.45;flex:1;}
    .v13-card .clink{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;font-size:0.86rem;}
    .v13-card .clink .arrow{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border:3px solid var(--v13-ink);border-radius:50%;transition:transform .15s var(--v13-ease);}
    .v13-card:hover .clink .arrow{transform:translateX(4px);}
    .v13-card .url{font-family:'Space Grotesk',monospace;font-size:0.78rem;opacity:0.78;margin-top:8px;word-break:break-word;}

    /* ---------- Über ---------- */
    .v13-about-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:40px;align-items:center;}
    .v13-about-photo{
        aspect-ratio:1/1;width:min(300px,90%);
        background:var(--v13-mint);
        border:4px solid var(--v13-ink);
        box-shadow:12px 12px 0 var(--v13-ink);
        transform:rotate(-3deg);
        display:flex;align-items:center;justify-content:center;
    }
    .v13-about-photo .ico{font-size:5rem;color:var(--v13-ink);}
    .v13-about-title{font-size:clamp(1.8rem,4.5vw,2.8rem);margin:0 0 16px;}
    .v13-about-text{font-weight:500;font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.55;max-width:48ch;}

    /* ---------- Kontakt-CTA ---------- */
    .v13-contact{position:relative;z-index:2;padding:clamp(36px,6vw,70px) 0;}
    .v13-contact-box{
        background:var(--v13-yellow);
        border:4px solid var(--v13-ink);
        box-shadow:12px 12px 0 var(--v13-ink);
        padding:clamp(32px,5vw,56px);
        text-align:center;position:relative;overflow:hidden;
    }
    .v13-contact-box .ct-title{font-size:clamp(1.9rem,5.5vw,3.4rem);margin:0 0 14px;position:relative;z-index:2;}
    .v13-contact-box .ct-sub{font-weight:500;font-size:clamp(1rem,1.7vw,1.2rem);margin:0 auto 26px;max-width:46ch;position:relative;z-index:2;}

    /* ---------- Footer ---------- */
    .v13-footer{background:var(--v13-creme);padding:clamp(30px,5vw,50px) 0 40px;position:relative;z-index:2;}
    .v13-foot-logo{font-family:'Archivo Black',sans-serif;font-size:clamp(1.4rem,4vw,2.2rem);text-transform:uppercase;letter-spacing:-0.02em;margin-bottom:22px;}
    .v13-foot-logo .v13-outline{-webkit-text-stroke:1.5px var(--v13-ink);}
    .v13-sitemap{display:flex;flex-wrap:wrap;gap:10px 14px;margin-bottom:24px;}
    .v13-sitemap a{text-decoration:none;color:var(--v13-ink);font-weight:500;font-size:0.9rem;border-bottom:2px solid var(--v13-ink);padding-bottom:1px;}
    .v13-sitemap a:hover,.v13-sitemap a:focus-visible{color:var(--v13-red);border-color:var(--v13-red);outline:none;}
    .v13-copy{font-size:0.86rem;font-weight:500;opacity:0.75;}

    /* ---------- Reveal-Intro (settlet) ---------- */
    .v13-reveal{opacity:0;transform:translateY(18px);}
    .v13-reveal.is-in{opacity:1;transform:translateY(0);transition:opacity .5s var(--v13-ease),transform .5s var(--v13-ease);}

    /* ---------- Responsive ---------- */
    @media (max-width:920px){
        .v13-hero-grid{grid-template-columns:1fr;gap:30px;}
        .v13-collage{min-height:280px;order:-1;}
        .v13-worlds{grid-template-columns:repeat(2,1fr);}
        .v13-card.span2{grid-column:span 2;}
        .v13-about-grid{grid-template-columns:1fr;gap:28px;}
        .v13-about-photo{margin:0 auto;}
    }
    @media (max-width:560px){
        .v13-worlds{grid-template-columns:1fr;}
        .v13-card,.v13-card:nth-child(3n+1),.v13-card:nth-child(3n+2),.v13-card:nth-child(3n){transform:rotate(0deg);}
        .v13-card.span2{grid-column:span 1;}
        .v13-ticket,.v13-ticket:nth-child(n){transform:rotate(0deg);}
        .v13-btn{box-shadow:6px 6px 0 var(--v13-ink);}
        .v13-card.c-red,.v13-card.c-blue,.v13-card.c-yellow,.v13-card.c-mint,.v13-card.c-pink{box-shadow:6px 6px 0 currentColor;}
        .v13-card.c-red{box-shadow:6px 6px 0 var(--v13-red);}
        .v13-card.c-blue{box-shadow:6px 6px 0 var(--v13-blue);}
        .v13-card.c-yellow{box-shadow:6px 6px 0 var(--v13-yellow);}
        .v13-card.c-mint{box-shadow:6px 6px 0 var(--v13-mint);}
        .v13-card.c-pink{box-shadow:6px 6px 0 var(--v13-pink);}
        .v13-shape{display:none;}
        .v13-contact-box,.v13-about-photo,.v13-avatar{box-shadow:6px 6px 0 var(--v13-ink);}
    }
    @media (prefers-reduced-motion:reduce){
        .v13-page *{animation:none!important;transition:none!important;}
        .v13-reveal{opacity:1!important;transform:none!important;}
    }
</style>

<div class="v13-page">

    {{-- ===================== HEADER ===================== --}}
    <div class="v13-zigzag" aria-hidden="true"></div>
    <header class="v13-header">
        <div class="v13-wrap">
            <div class="v13-headbar">
                <div class="v13-logo">KOTSCH<span class="v13-outline">.TECH</span></div>
                <nav class="v13-nav" aria-label="Hauptnavigation">
                    <a class="v13-pill" href="#welten">Welten</a>
                    <a class="v13-pill" href="https://news.kotsch.tech">News</a>
                    <a class="v13-pill" href="/kontakt">Kontakt</a>
                </nav>
            </div>
        </div>
    </header>

    {{-- ===================== HERO ===================== --}}
    <section class="v13-hero">
        {{-- Konfetti-Hintergrund --}}
        <span class="v13-shape v13-circle v13-drift" style="--r:-6deg;width:60px;height:60px;background:var(--v13-pink);top:30px;left:4%;" aria-hidden="true"></span>
        <span class="v13-shape v13-dots" style="width:120px;height:80px;top:60px;right:10%;transform:rotate(-8deg);" aria-hidden="true"></span>
        <span class="v13-shape v13-spin" style="width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;border-bottom:38px solid var(--v13-yellow);bottom:30px;left:42%;filter:drop-shadow(3px 3px 0 var(--v13-ink));" aria-hidden="true"></span>

        <div class="v13-wrap">
            <div class="v13-hero-grid">
                <div class="v13-hero-copy v13-reveal">
                    <span class="v13-kicker">Arthur Kotsch — Lichtenstein, Sachsen</span>
                    <h1 class="v13-h1 v13-display">
                        <span class="l1">Baue.</span><br>
                        <span class="l2">Löse.</span><br>
                        <span class="l3">Veröffentliche.</span>
                    </h1>
                    <p class="v13-sub">Student Digital Engineering &amp; Entwickler aus Lichtenstein (Sachsen). Neun Welten — eine Person.</p>
                    <div class="v13-cta-row">
                        <a class="v13-btn is-red" href="#welten">Welten ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                        <a class="v13-btn is-creme" href="/kontakt">Kontakt</a>
                    </div>
                </div>

                <div class="v13-collage v13-reveal" aria-hidden="true">
                    <span class="v13-c-red v13-shape v13-drift" style="--r:0deg;"></span>
                    <div class="v13-avatar">
                        <i class="fa-solid fa-user-astronaut ico"></i>
                    </div>
                    <span class="v13-c-blue v13-shape"></span>
                    <span class="v13-c-mint v13-shape"></span>
                </div>
            </div>
        </div>
    </section>

    {{-- ===================== KENNZAHLEN ===================== --}}
    <section class="v13-stats" aria-label="Kennzahlen">
        <div class="v13-wrap">
            <div class="v13-stats-row">
                <div class="v13-ticket"><div class="num">22</div><div class="lab">iOS / Mac-Apps</div></div>
                <div class="v13-ticket"><div class="num">9</div><div class="lab">Windows-Tools</div></div>
                <div class="v13-ticket"><div class="num">734</div><div class="lab">Web-Tools</div></div>
                <div class="v13-ticket"><div class="num">1.412</div><div class="lab">Artikel</div></div>
            </div>
        </div>
    </section>

    {{-- ===================== 9 WELTEN ===================== --}}
    <section class="v13-section" id="welten">
        <span class="v13-shape v13-half v13-drift" style="--r:6deg;width:90px;height:45px;background:var(--v13-blue);top:0;right:3%;" aria-hidden="true"></span>
        <div class="v13-wrap">
            <div class="v13-sec-head">
                <span class="v13-sec-tag">Das Kernstück</span>
                <h2 class="v13-sec-title v13-display">Die <span class="v13-outline">9 Welten</span></h2>
            </div>

            <div class="v13-worlds">
                {{-- 1 iOS & Mac · Rot · span2 --}}
                <a class="v13-card c-red span2" href="https://ios.kotsch.tech">
                    <span class="v13-mark m-circle" aria-hidden="true"></span>
                    <div class="num">01</div>
                    <div class="ctitle">iOS &amp; Mac Apps</div>
                    <p class="ctext">22 Apps im App Store (iPhone/iPad/Mac), regelmäßige Updates.</p>
                    <div class="url">ios.kotsch.tech</div>
                    <span class="clink">Öffnen <span class="arrow"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span></span>
                </a>

                {{-- 2 Windows · Blau --}}
                <a class="v13-card c-blue" href="https://windows.kotsch.tech">
                    <span class="v13-mark m-tri" aria-hidden="true"></span>
                    <div class="num">02</div>
                    <div class="ctitle">Windows</div>
                    <p class="ctext">9 Programme: Cleaner, Commander, Notes, Taskmanager, CodeEditor.</p>
                    <div class="url">windows.kotsch.tech</div>
                    <span class="clink">Öffnen <span class="arrow"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span></span>
                </a>

                {{-- 3 Android · Gelb --}}
                <a class="v13-card c-yellow" href="https://android.kotsch.tech">
                    <span class="v13-mark m-half" aria-hidden="true"></span>
                    <div class="num">03</div>
                    <div class="ctitle">Android</div>
                    <p class="ctext">Native Apps, in Entwicklung.</p>
                    <div class="url">android.kotsch.tech</div>
                    <span class="clink">Öffnen <span class="arrow"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span></span>
                </a>

                {{-- 4 Web-Tools · Mint · span2 --}}
                <a class="v13-card c-mint span2" href="https://webtools.kotsch.tech">
                    <span class="v13-mark m-square" aria-hidden="true"></span>
                    <div class="num">04</div>
                    <div class="ctitle">Web-Tools</div>
                    <p class="ctext">734 Tools im Browser — ohne Login, ohne Installation.</p>
                    <div class="url">webtools.kotsch.tech</div>
                    <span class="clink">Öffnen <span class="arrow"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span></span>
                </a>

                {{-- 5 Shop · Pink --}}
                <a class="v13-card c-pink" href="https://shop.kotsch.tech">
                    <span class="v13-mark m-quarter" aria-hidden="true"></span>
                    <div class="num">05</div>
                    <div class="ctitle">Shop</div>
                    <p class="ctext">Digitale Produkte, Sofort-Download.</p>
                    <div class="url">shop.kotsch.tech</div>
                    <span class="clink">Öffnen <span class="arrow"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span></span>
                </a>

                {{-- 6 Hosting · Blau --}}
                <a class="v13-card c-blue" href="https://hosting.kotsch.tech">
                    <span class="v13-mark m-ring" aria-hidden="true"></span>
                    <div class="num">06</div>
                    <div class="ctitle">Hosting</div>
                    <p class="ctext">Managed Webhosting, vServer/VPS, DSGVO-konform.</p>
                    <div class="url">hosting.kotsch.tech</div>
                    <span class="clink">Öffnen <span class="arrow"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span></span>
                </a>

                {{-- 7 News · Rot --}}
                <a class="v13-card c-red" href="https://news.kotsch.tech">
                    <span class="v13-mark m-bar" aria-hidden="true"></span>
                    <div class="num">07</div>
                    <div class="ctitle">News</div>
                    <p class="ctext">1.412 Ratgeber &amp; Tutorials.</p>
                    <div class="url">news.kotsch.tech</div>
                    <span class="clink">Öffnen <span class="arrow"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span></span>
                </a>

                {{-- 8 IT-Hilfe · Mint · span2 --}}
                <a class="v13-card c-mint span2" href="https://it-hilfe.kotsch.tech">
                    <span class="v13-mark m-dot" aria-hidden="true"></span>
                    <div class="num">08</div>
                    <div class="ctitle">IT-Hilfe</div>
                    <p class="ctext">Vor Ort &amp; Remote (Region Glauchau–Lichtenstein). „Keine Lösung = kein Preis.“</p>
                    <div class="url">it-hilfe.kotsch.tech</div>
                    <span class="clink">Öffnen <span class="arrow"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span></span>
                </a>

                {{-- 9 Webdesign · Gelb --}}
                <a class="v13-card c-yellow" href="https://webdesign.kotsch.tech">
                    <span class="v13-mark m-diamond" aria-hidden="true"></span>
                    <div class="num">09</div>
                    <div class="ctitle">Webdesign</div>
                    <p class="ctext">Studio &amp; 20 Branchen-Demos.</p>
                    <div class="url">webdesign.kotsch.tech</div>
                    <span class="clink">Öffnen <span class="arrow"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ===================== ÜBER / MARKE ===================== --}}
    <section class="v13-section">
        <span class="v13-shape v13-dots v13-drift" style="--r:8deg;width:100px;height:70px;bottom:20px;left:6%;" aria-hidden="true"></span>
        <div class="v13-wrap">
            <div class="v13-about-grid">
                <div class="v13-about-photo" aria-hidden="true">
                    <i class="fa-solid fa-id-badge ico"></i>
                </div>
                <div>
                    <span class="v13-sec-tag">Über</span>
                    <h2 class="v13-about-title v13-display">Eine Person, <span class="v13-outline">viele Welten</span></h2>
                    <p class="v13-about-text">Arthur Kotsch baut Apps, Tools und Websites — vom App Store über den Browser bis zur IT-Hilfe vor Ort. Alles aus einer Hand, aus Lichtenstein in Sachsen.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- ===================== KONTAKT-CTA ===================== --}}
    <section class="v13-contact">
        <div class="v13-wrap">
            <div class="v13-contact-box">
                <span class="v13-shape v13-circle v13-drift" style="--r:-6deg;width:54px;height:54px;background:var(--v13-red);top:14px;left:8%;" aria-hidden="true"></span>
                <span class="v13-shape v13-spin" style="width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:32px solid var(--v13-blue);bottom:16px;right:9%;filter:drop-shadow(3px 3px 0 var(--v13-ink));" aria-hidden="true"></span>
                <h2 class="ct-title v13-display">Projekt im Kopf?</h2>
                <p class="ct-sub">Schreib mir — von der App-Idee bis zur fertigen Website.</p>
                <a class="v13-btn is-red" href="/kontakt" style="background:var(--v13-ink);color:var(--v13-creme);border-color:var(--v13-ink);position:relative;z-index:2;">Kontakt aufnehmen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
            </div>
        </div>
    </section>

    {{-- ===================== FOOTER ===================== --}}
    <div class="v13-zigzag" aria-hidden="true"></div>
    <footer class="v13-footer">
        <div class="v13-wrap">
            <div class="v13-foot-logo">KOTSCH<span class="v13-outline">.TECH</span></div>
            <nav class="v13-sitemap" aria-label="Alle Welten">
                <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>
            <div class="v13-copy">© 2026 Arthur Kotsch · Lichtenstein, Sachsen</div>
        </div>
    </footer>

</div>

<script>
(function(){
    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var els = document.querySelectorAll('.v13-reveal');
    if(prefersReduced || !('IntersectionObserver' in window)){
        els.forEach(function(el){el.classList.add('is-in');});
        return;
    }
    var io = new IntersectionObserver(function(entries){
        entries.forEach(function(e){
            if(e.isIntersecting){e.target.classList.add('is-in');io.unobserve(e.target);}
        });
    },{threshold:0.15});
    els.forEach(function(el){io.observe(el);});
})();
</script>
@endsection