@extends('layouts.app')

@section('title', 'Arthur Kotsch — COLLAGE | KOTSCH.TECH')
@section('meta_description', 'Arthur Kotsch, Student Digital Engineering aus Lichtenstein (Sachsen): 9 Welten als Sticker-Bomb-Collage — 22 iOS- & Mac-Apps, 9 Windows-Programme, 734 Web-Tools, Shop, Hosting, 1.412 Artikel, IT-Hilfe und Webdesign.')

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

    @import url('https://fonts.googleapis.com/css2?family=Anton&family=Permanent+Marker&family=Inter:wght@400;500;600;700&display=swap');

    .v18-page{
        --v18-paper:#F4EEE2;
        --v18-ink:#161310;
        --v18-red:#FF3B30;
        --v18-yellow:#FFD23F;
        --v18-blue:#2156C0;
        --v18-mint:#16C79A;
        --v18-tape-y:rgba(255,210,63,.55);
        --v18-tape-b:rgba(45,108,223,.35);
        --v18-spring:cubic-bezier(.34,1.56,.64,1);

        position:relative;
        background:var(--v18-paper);
        background-image:radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
        background-size:22px 22px;
        color:var(--v18-ink);
        font-family:"Inter",system-ui,Arial,sans-serif;
        line-height:1.6;
        overflow-x:hidden;
        min-height:100vh;
        padding-bottom:0;
    }
    .v18-page *{box-sizing:border-box;}

    /* ---- Washi-Klebeband (Signature) ---- */
    .v18-tape{position:relative;}
    .v18-tape::before{
        content:"";
        position:absolute;
        top:-15px;
        left:50%;
        width:120px;
        height:30px;
        background:
            repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 6px),
            var(--v18-tape-y);
        transform:translateX(-50%) rotate(-6deg);
        box-shadow:0 3px 7px rgba(0,0,0,.13);
        z-index:3;
        pointer-events:none;
    }
    .v18-tape--blue::before{
        background:
            repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 6px),
            var(--v18-tape-b);
        transform:translateX(-50%) rotate(7deg);
    }
    .v18-tape--corner::before{
        left:auto;
        right:-12px;
        top:-12px;
        width:90px;
        height:26px;
        transform:rotate(34deg);
    }

    /* ---- Halbton-Deko ---- */
    .v18-halftone{
        position:absolute;
        inset:auto;
        background-image:radial-gradient(var(--v18-ink) 22%, transparent 23%);
        background-size:14px 14px;
        opacity:.12;
        pointer-events:none;
        z-index:0;
    }

    /* ---- Wrapper ---- */
    .v18-wrap{
        max-width:1180px;
        margin:0 auto;
        padding:0 clamp(16px,4vw,40px);
        position:relative;
        z-index:1;
    }

    /* ---- Sticky-Top-Leiste ---- */
    .v18-bar{
        position:sticky;
        top:0;
        z-index:40;
        background:var(--v18-paper);
        border-bottom:2px dashed rgba(22,19,16,.25);
        transform:rotate(-.4deg);
    }
    .v18-bar-in{
        max-width:1180px;
        margin:0 auto;
        padding:10px clamp(16px,4vw,40px);
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }
    .v18-brand-mark{
        font-family:"Permanent Marker",cursive;
        font-size:clamp(1.1rem,2.6vw,1.5rem);
        color:var(--v18-ink);
        text-decoration:none;
        line-height:1;
    }
    .v18-bar-cta{
        font-family:"Permanent Marker",cursive;
        background:var(--v18-red);
        color:#fff;
        text-decoration:none;
        padding:7px 16px;
        border-radius:4px;
        font-size:.95rem;
        transform:rotate(2.5deg);
        box-shadow:0 3px 0 rgba(0,0,0,.22);
        transition:transform .25s var(--v18-spring);
        white-space:nowrap;
    }
    .v18-bar-cta:hover,.v18-bar-cta:focus-visible{transform:rotate(-1.5deg) scale(1.06);}

    /* ---- HERO ---- */
    .v18-hero{
        position:relative;
        padding:clamp(48px,8vw,96px) 0 clamp(32px,5vw,56px);
    }
    .v18-hero .v18-halftone{
        width:230px;height:230px;
        top:-10px;right:-30px;
        border-radius:50%;
        opacity:.16;
    }
    .v18-hero-grid{
        display:grid;
        grid-template-columns:1.6fr 1fr;
        gap:clamp(24px,4vw,52px);
        align-items:center;
    }
    .v18-kicker{
        font-family:"Permanent Marker",cursive;
        color:var(--v18-blue);
        font-size:1.05rem;
        transform:rotate(-2deg);
        display:inline-block;
        margin-bottom:14px;
    }
    .v18-h1{
        font-family:"Anton",sans-serif;
        font-weight:400;
        font-size:clamp(3rem,8vw,7rem);
        line-height:.92;
        letter-spacing:.5px;
        text-transform:uppercase;
        margin:0 0 22px;
        transform:rotate(-1deg);
    }
    .v18-h1 .v18-stroke{
        color:transparent;
        -webkit-text-stroke:2px var(--v18-ink);
        text-stroke:2px var(--v18-ink);
    }
    .v18-hl{
        background:linear-gradient(transparent 60%, var(--v18-yellow) 60%);
        padding:0 .08em;
        box-decoration-break:clone;
        -webkit-box-decoration-break:clone;
    }
    .v18-lead{
        font-size:clamp(1rem,1.4vw,1.15rem);
        max-width:46ch;
        margin:0 0 26px;
        color:#332e28;
    }
    .v18-hero-arrow{
        font-family:"Permanent Marker",cursive;
        color:var(--v18-red);
        font-size:1rem;
        display:inline-flex;
        align-items:center;
        gap:8px;
        transform:rotate(-1.5deg);
    }
    .v18-hero-arrow i{font-size:1.3rem;}
    .v18-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;}
    .v18-btn{
        display:inline-flex;
        align-items:center;
        gap:9px;
        font-weight:700;
        text-decoration:none;
        padding:13px 24px;
        border-radius:5px;
        font-size:1rem;
        transition:transform .25s var(--v18-spring);
    }
    .v18-btn--primary{background:var(--v18-ink);color:#fff;box-shadow:0 4px 0 var(--v18-red);}
    .v18-btn--ghost{background:transparent;color:var(--v18-ink);border:2px solid var(--v18-ink);}
    .v18-btn:hover,.v18-btn:focus-visible{transform:translateY(-3px) rotate(-1deg);}

    /* Polaroid-Karte */
    .v18-polaroid{
        position:relative;
        background:#fff;
        padding:14px 14px 50px;
        box-shadow:0 14px 30px rgba(0,0,0,.18);
        transform:rotate(3.5deg);
        justify-self:center;
        max-width:300px;
        width:100%;
    }
    .v18-polaroid-pic{
        aspect-ratio:1/1;
        background:
            radial-gradient(circle at 30% 30%, var(--v18-mint), transparent 60%),
            radial-gradient(circle at 75% 70%, var(--v18-blue), transparent 55%),
            linear-gradient(135deg,#222,#444);
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        font-size:3.4rem;
    }
    .v18-polaroid-cap{
        font-family:"Permanent Marker",cursive;
        text-align:center;
        margin-top:16px;
        font-size:1.05rem;
    }

    /* ---- STATS ---- */
    .v18-stats{
        display:flex;
        flex-wrap:wrap;
        gap:clamp(18px,3vw,34px);
        justify-content:center;
        padding:clamp(36px,5vw,60px) 0;
    }
    .v18-stat{
        position:relative;
        background:#fff;
        border:2px solid var(--v18-ink);
        padding:18px 22px;
        min-width:150px;
        text-align:center;
        box-shadow:0 8px 18px rgba(0,0,0,.1);
        transition:transform .25s var(--v18-spring);
    }
    .v18-stat:nth-child(1){transform:rotate(-3deg);}
    .v18-stat:nth-child(2){transform:rotate(2deg);}
    .v18-stat:nth-child(3){transform:rotate(-1.5deg);}
    .v18-stat:nth-child(4){transform:rotate(3deg);}
    .v18-stat:hover{transform:rotate(0) scale(1.08);}
    .v18-stat-num{
        font-family:"Anton",sans-serif;
        font-size:clamp(2.2rem,5vw,3rem);
        line-height:1;
        color:transparent;
        -webkit-text-stroke:2px var(--v18-red);
        text-stroke:2px var(--v18-red);
        text-shadow:2px 2px 0 rgba(255,59,48,.18);
    }
    .v18-stat-lbl{
        font-size:.8rem;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.04em;
        margin-top:6px;
        color:#4a443c;
    }

    /* ---- SECTION HEAD ---- */
    .v18-shead{
        position:relative;
        text-align:center;
        margin:clamp(40px,6vw,80px) 0 clamp(28px,4vw,48px);
    }
    .v18-shead h2{
        font-family:"Anton",sans-serif;
        font-weight:400;
        font-size:clamp(2.2rem,6vw,4rem);
        text-transform:uppercase;
        margin:0;
        transform:rotate(-1deg);
        letter-spacing:.5px;
    }
    .v18-shead .v18-scribble{
        font-family:"Permanent Marker",cursive;
        color:var(--v18-blue);
        transform:rotate(-2deg);
        display:inline-block;
        margin-bottom:8px;
    }

    /* ---- 9 WELTEN GRID ---- */
    .v18-worlds{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:clamp(26px,3.5vw,46px) clamp(22px,3vw,40px);
        margin-top:18px;
    }
    .v18-card{
        position:relative;
        min-width:0;
        background:#fff;
        border:2px solid var(--v18-ink);
        border-radius:6px;
        padding:30px 24px 26px;
        box-shadow:0 10px 24px rgba(0,0,0,.12);
        transform:rotate(var(--r,0deg));
        transition:transform .25s var(--v18-spring), box-shadow .25s ease;
        text-decoration:none;
        color:var(--v18-ink);
        display:flex;
        flex-direction:column;
        overflow:visible;
    }
    .v18-card:hover,.v18-card:focus-visible{
        transform:rotate(0) scale(1.03);
        box-shadow:0 20px 42px rgba(0,0,0,.2);
        z-index:5;
    }
    .v18-card-num{
        position:absolute;
        top:-14px;
        right:14px;
        font-family:"Anton",sans-serif;
        font-size:2.2rem;
        color:transparent;
        -webkit-text-stroke:2px var(--c,var(--v18-ink));
        text-stroke:2px var(--c,var(--v18-ink));
        transform:rotate(8deg);
        background:#fff;
        padding:0 4px;
        line-height:1;
    }
    .v18-card-ico{
        font-size:1.8rem;
        color:var(--c,var(--v18-ink));
        margin-bottom:12px;
    }
    .v18-card-title{
        font-family:"Anton",sans-serif;
        font-weight:400;
        font-size:clamp(1.4rem,2.4vw,1.9rem);
        text-transform:uppercase;
        margin:0 0 10px;
        line-height:1;
        letter-spacing:.3px;
    }
    .v18-card-body{
        font-size:.95rem;
        color:#433d35;
        margin:0 0 18px;
        flex:1;
    }
    .v18-card-link{
        font-weight:700;
        /* lesbares Ink für den Text (AA), Akzentfarbe bleibt im Unterstrich */
        color:var(--v18-ink);
        display:inline-flex;
        align-items:center;
        gap:7px;
        align-self:flex-start;
        background-image:linear-gradient(var(--c,var(--v18-ink)),var(--c,var(--v18-ink)));
        background-repeat:no-repeat;
        background-position:0 100%;
        background-size:0% 3px;
        padding-bottom:3px;
        transition:background-size .3s ease;
    }
    .v18-card:hover .v18-card-link{background-size:100% 3px;}

    /* Hero-Karte (Web-Tools) */
    .v18-card--hero{
        grid-column:span 2;
        background:#fff;
        overflow:hidden;
    }
    .v18-card--hero .v18-bignum{
        font-family:"Anton",sans-serif;
        position:absolute;
        right:-6px;
        bottom:-26px;
        font-size:clamp(7rem,16vw,12rem);
        line-height:.8;
        color:transparent;
        -webkit-text-stroke:3px rgba(45,108,223,.25);
        text-stroke:3px rgba(45,108,223,.25);
        pointer-events:none;
        z-index:0;
    }
    .v18-card--hero .v18-halftone{
        width:180px;height:180px;
        left:-20px;bottom:-20px;
        opacity:.1;
    }
    .v18-card--hero > *{position:relative;z-index:1;}

    /* ---- ÜBER (Notizzettel) ---- */
    .v18-about-sec{padding:clamp(40px,6vw,72px) 0;}
    .v18-note{
        position:relative;
        max-width:680px;
        margin:0 auto;
        background:#fffef8;
        border:2px solid var(--v18-ink);
        padding:clamp(28px,5vw,46px);
        box-shadow:0 16px 36px rgba(0,0,0,.14);
        transform:rotate(-1deg);
        background-image:repeating-linear-gradient(transparent 0 31px, rgba(45,108,223,.12) 31px 32px);
    }
    .v18-note h3{
        font-family:"Permanent Marker",cursive;
        font-size:clamp(1.6rem,4vw,2.2rem);
        margin:0 0 14px;
        color:var(--v18-ink);
    }
    .v18-note p{margin:0 0 14px;color:#332e28;}
    .v18-note p:last-child{margin-bottom:0;}

    /* ---- KONTAKT CTA ---- */
    .v18-contact{
        position:relative;
        text-align:center;
        padding:clamp(48px,7vw,90px) 0;
    }
    .v18-contact .v18-halftone{
        width:200px;height:200px;
        left:50%;top:0;
        transform:translateX(-50%);
        opacity:.1;
        border-radius:50%;
    }
    .v18-contact h2{
        font-family:"Anton",sans-serif;
        font-weight:400;
        font-size:clamp(2.4rem,7vw,5rem);
        text-transform:uppercase;
        margin:0 0 18px;
        transform:rotate(-1deg);
    }
    .v18-contact p{max-width:48ch;margin:0 auto 28px;color:#332e28;}

    /* ---- FOOTER ---- */
    .v18-foot{
        position:relative;
        border-top:2px dashed rgba(22,19,16,.3);
        margin-top:20px;
        padding:34px 0 44px;
    }
    .v18-foot-in{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
        gap:18px;
    }
    .v18-foot-links{display:flex;flex-wrap:wrap;gap:18px;}
    .v18-foot-links a{
        color:var(--v18-ink);
        text-decoration:none;
        font-weight:600;
        font-size:.9rem;
        border-bottom:2px solid transparent;
        transition:border-color .2s;
    }
    .v18-foot-links a:hover,.v18-foot-links a:focus-visible{border-color:var(--v18-red);}
    .v18-foot-made{
        font-family:"Permanent Marker",cursive;
        color:var(--v18-blue);
        transform:rotate(-2deg);
        font-size:1rem;
    }

    /* ---- Cursor-Sticker ---- */
    .v18-cursor-sticker{
        position:fixed;
        top:0;left:0;
        font-family:"Permanent Marker",cursive;
        background:var(--v18-yellow);
        color:var(--v18-ink);
        padding:4px 10px;
        border-radius:4px;
        font-size:.8rem;
        pointer-events:none;
        z-index:60;
        opacity:0;
        box-shadow:0 4px 10px rgba(0,0,0,.2);
        transition:opacity .3s ease;
        transform:translate(-50%,-150%) rotate(-8deg);
    }

    /* ---- Fallback: ohne text-stroke-Support Zahlen sichtbar halten ---- */
    @supports not ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){
        .v18-stat-num{color:var(--v18-red)!important;text-shadow:none;}
        .v18-card-num{color:var(--c,var(--v18-ink))!important;}
        .v18-h1 .v18-stroke{color:var(--v18-ink)!important;}
        .v18-card--hero .v18-bignum{color:rgba(45,108,223,.18)!important;}
        .v18-stat-num,.v18-card-num,.v18-h1 .v18-stroke,.v18-card--hero .v18-bignum{
            -webkit-text-stroke:0!important;
        }
    }

    /* ---- Focus ---- */
    .v18-page a:focus-visible,.v18-page button:focus-visible{
        outline:3px solid var(--v18-blue);
        outline-offset:3px;
    }

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

    /* ---- Responsive ---- */
    @media (max-width:880px){
        .v18-hero-grid{grid-template-columns:1fr;}
        .v18-polaroid{justify-self:flex-start;}
        .v18-worlds{grid-template-columns:repeat(2,1fr);}
        .v18-card--hero{grid-column:span 2;}
    }
    @media (max-width:560px){
        .v18-worlds{grid-template-columns:1fr;}
        .v18-card--hero{grid-column:span 1;}
        .v18-card{transform:rotate(0)!important;}
        .v18-stat{transform:rotate(0)!important;}
        .v18-h1,.v18-shead h2,.v18-note,.v18-polaroid{transform:rotate(0);}
        .v18-bar{transform:none;}
    }

    @media (prefers-reduced-motion:reduce){
        .v18-page *,
        .v18-card,.v18-stat,.v18-bar,.v18-bar-cta,.v18-btn,
        .v18-polaroid,.v18-note,.v18-h1,.v18-shead h2,.v18-kicker,
        .v18-hero-arrow,.v18-scribble,.v18-foot-made,.v18-card-num,
        .v18-tape::before,.v18-tape--blue::before,.v18-tape--corner::before{
            transform:none!important;
        }
        .v18-card:hover,.v18-stat:hover,.v18-btn:hover,.v18-bar-cta:hover{transform:none!important;}
        .v18-reveal{opacity:1!important;transform:none!important;}
        .v18-cursor-sticker{display:none!important;}
    }
</style>

<div class="v18-page">

    <!-- Sticky-Top-Leiste -->
    <div class="v18-bar">
        <div class="v18-bar-in">
            <a href="/" class="v18-brand-mark">Arthur Kotsch</a>
            <a href="/kontakt" class="v18-bar-cta">Kontakt &rarr;</a>
        </div>
    </div>

    <!-- HERO -->
    <header class="v18-hero">
        <span class="v18-halftone" aria-hidden="true"></span>
        <div class="v18-wrap">
            <div class="v18-hero-grid">
                <div class="v18-reveal">
                    <span class="v18-kicker">// Student Digital Engineering</span>
                    <h1 class="v18-h1">
                        Eine <span class="v18-hl">Werkbank</span><br>
                        voller <span class="v18-stroke">Welten</span>
                    </h1>
                    <p class="v18-lead">
                        Apps, Tools, Hosting und Hilfe &mdash; alles aus einer Hand,
                        zusammengeklebt zu einer Pinnwand. Neun digitale Welten von
                        Arthur Kotsch aus Lichtenstein, Sachsen.
                    </p>
                    <p class="v18-hero-arrow">
                        <i class="fa-solid fa-arrow-turn-down" aria-hidden="true"></i>
                        Lichtenstein · Sachsen · seit 2019
                    </p>
                    <div class="v18-cta-row" style="margin-top:22px;">
                        <a href="#welten" class="v18-btn v18-btn--primary">
                            Die 9 Welten <i class="fa-solid fa-arrow-down" aria-hidden="true"></i>
                        </a>
                        <a href="/kontakt" class="v18-btn v18-btn--ghost">Kontakt aufnehmen</a>
                    </div>
                </div>

                <div class="v18-polaroid v18-tape v18-reveal" aria-hidden="true">
                    <div class="v18-polaroid-pic">
                        <i class="fa-solid fa-screwdriver-wrench"></i>
                    </div>
                    <div class="v18-polaroid-cap">macht Dinge, die laufen.</div>
                </div>
            </div>
        </div>
    </header>

    <!-- STATS -->
    <section class="v18-wrap" aria-label="Kennzahlen">
        <div class="v18-stats">
            <div class="v18-stat v18-reveal">
                <div class="v18-stat-num">22</div>
                <div class="v18-stat-lbl">iOS / Mac-Apps</div>
            </div>
            <div class="v18-stat v18-reveal">
                <div class="v18-stat-num">9</div>
                <div class="v18-stat-lbl">Windows-Tools</div>
            </div>
            <div class="v18-stat v18-reveal">
                <div class="v18-stat-num">734</div>
                <div class="v18-stat-lbl">Web-Tools</div>
            </div>
            <div class="v18-stat v18-reveal">
                <div class="v18-stat-num">1.412</div>
                <div class="v18-stat-lbl">Artikel</div>
            </div>
        </div>
    </section>

    <!-- 9 WELTEN -->
    <section class="v18-wrap" id="welten">
        <div class="v18-shead">
            <span class="v18-scribble">aufgeklebt &amp; sortiert</span>
            <h2>Die 9 Welten</h2>
        </div>

        <div class="v18-worlds">

            <!-- 01 iOS & Mac -->
            <a href="https://ios.kotsch.tech" class="v18-card v18-tape v18-reveal" style="--r:-2.5deg;--c:var(--v18-blue);">
                <span class="v18-card-num">01</span>
                <i class="fa-brands fa-apple v18-card-ico" aria-hidden="true"></i>
                <h3 class="v18-card-title">iOS &amp; Mac Apps</h3>
                <p class="v18-card-body">22 Apps im App Store für iPhone, iPad und Mac &mdash; mit regelmäßigen Updates.</p>
                <span class="v18-card-link">ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- 02 Windows -->
            <a href="https://windows.kotsch.tech" class="v18-card v18-tape v18-tape--blue v18-reveal" style="--r:2deg;--c:var(--v18-red);">
                <span class="v18-card-num">02</span>
                <i class="fa-brands fa-windows v18-card-ico" aria-hidden="true"></i>
                <h3 class="v18-card-title">Windows</h3>
                <p class="v18-card-body">9 Programme &mdash; Cleaner, Commander, Notes, Taskmanager, CodeEditor. Direkt-Download.</p>
                <span class="v18-card-link">ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- 03 Android -->
            <a href="https://android.kotsch.tech" class="v18-card v18-tape v18-reveal" style="--r:-1.5deg;--c:var(--v18-mint);">
                <span class="v18-card-num">03</span>
                <i class="fa-brands fa-android v18-card-ico" aria-hidden="true"></i>
                <h3 class="v18-card-title">Android</h3>
                <p class="v18-card-body">Native Apps für Android &mdash; aktuell in Entwicklung.</p>
                <span class="v18-card-link">ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- 04 Web-Tools (Hero-Karte) -->
            <a href="https://webtools.kotsch.tech" class="v18-card v18-card--hero v18-tape v18-tape--blue v18-reveal" style="--r:1.5deg;--c:var(--v18-blue);">
                <span class="v18-halftone" aria-hidden="true"></span>
                <span class="v18-bignum" aria-hidden="true">734</span>
                <span class="v18-card-num">04</span>
                <i class="fa-solid fa-toolbox v18-card-ico" aria-hidden="true"></i>
                <h3 class="v18-card-title">Web-Tools</h3>
                <p class="v18-card-body">734 Tools direkt im Browser &mdash; ohne Login, ohne Installation. Das größte Werkzeugfach der Sammlung.</p>
                <span class="v18-card-link">ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- 05 Shop -->
            <a href="https://shop.kotsch.tech" class="v18-card v18-tape v18-reveal" style="--r:-2deg;--c:var(--v18-red);">
                <span class="v18-card-num">05</span>
                <i class="fa-solid fa-bag-shopping v18-card-ico" aria-hidden="true"></i>
                <h3 class="v18-card-title">Shop</h3>
                <p class="v18-card-body">Digitale Produkte mit Sofort-Download &mdash; gekauft, geladen, fertig.</p>
                <span class="v18-card-link">ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- 06 Hosting -->
            <a href="https://hosting.kotsch.tech" class="v18-card v18-tape v18-tape--blue v18-reveal" style="--r:2.5deg;--c:var(--v18-mint);">
                <span class="v18-card-num">06</span>
                <i class="fa-solid fa-server v18-card-ico" aria-hidden="true"></i>
                <h3 class="v18-card-title">Hosting</h3>
                <p class="v18-card-body">Managed Webhosting und vServer / VPS &mdash; DSGVO-konform aus Deutschland.</p>
                <span class="v18-card-link">ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- 07 News -->
            <a href="https://news.kotsch.tech" class="v18-card v18-tape v18-reveal" style="--r:-1.5deg;--c:var(--v18-yellow);">
                <span class="v18-card-num">07</span>
                <i class="fa-solid fa-newspaper v18-card-ico" aria-hidden="true"></i>
                <h3 class="v18-card-title">News</h3>
                <p class="v18-card-body">1.412 Ratgeber und Tutorials rund um Technik, Tools und Entwicklung.</p>
                <span class="v18-card-link">ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- 08 IT-Hilfe -->
            <a href="https://it-hilfe.kotsch.tech" class="v18-card v18-tape v18-tape--blue v18-reveal" style="--r:2deg;--c:var(--v18-red);">
                <span class="v18-card-num">08</span>
                <i class="fa-solid fa-headset v18-card-ico" aria-hidden="true"></i>
                <h3 class="v18-card-title">IT-Hilfe</h3>
                <p class="v18-card-body">Vor Ort &amp; Remote in der Region Glauchau&ndash;Lichtenstein. Keine Lösung = kein Preis.</p>
                <span class="v18-card-link">ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- 09 Webdesign -->
            <a href="https://webdesign.kotsch.tech" class="v18-card v18-tape v18-reveal" style="--r:-2.5deg;--c:var(--v18-blue);">
                <span class="v18-card-num">09</span>
                <i class="fa-solid fa-pen-ruler v18-card-ico" aria-hidden="true"></i>
                <h3 class="v18-card-title">Webdesign</h3>
                <p class="v18-card-body">Studio &amp; 20 Branchen-Demos &mdash; Webseiten, die zum Geschäft passen.</p>
                <span class="v18-card-link">ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

        </div>
    </section>

    <!-- ÜBER -->
    <section class="v18-about-sec">
        <div class="v18-wrap">
            <div class="v18-note v18-tape v18-tape--corner v18-reveal">
                <h3>Kurz zu mir</h3>
                <p>
                    Ich bin Arthur Kotsch, Student Digital Engineering und Entwickler
                    aus Lichtenstein in Sachsen. Was als Bastelei begann, ist heute eine
                    Werkbank aus Apps, Web-Tools, Hosting und IT-Hilfe.
                </p>
                <p>
                    Jedes Stück hier ist von mir gebaut und wird gepflegt &mdash; kein
                    Baukasten, kein Wegwerfprodukt. Wenn du etwas brauchst, das wirklich
                    läuft, melde dich.
                </p>
            </div>
        </div>
    </section>

    <!-- KONTAKT CTA -->
    <section class="v18-contact">
        <span class="v18-halftone" aria-hidden="true"></span>
        <div class="v18-wrap">
            <h2 class="v18-reveal">Lass uns was<br>zusammenkleben</h2>
            <p class="v18-reveal">
                Projekt, Frage oder einfach nur neugierig? Schreib mir &mdash;
                ich antworte persönlich.
            </p>
            <a href="/kontakt" class="v18-btn v18-btn--primary v18-reveal">
                Kontakt aufnehmen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
            </a>
        </div>
    </section>

    <!-- FOOTER -->
    <footer class="v18-foot">
        <div class="v18-wrap v18-foot-in">
            <nav class="v18-foot-links" aria-label="Rechtliches">
                <a href="/impressum">Impressum</a>
                <a href="/datenschutz">Datenschutz</a>
                <a href="/kontakt">Kontakt</a>
            </nav>
            <span class="v18-foot-made">made in Sachsen ✦</span>
        </div>
    </footer>

    <!-- Cursor-Sticker -->
    <div class="v18-cursor-sticker" id="v18sticker" aria-hidden="true">NEU!</div>

</div>

<script>
(function(){
    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    /* Reveal on scroll (settlet) */
    var items = document.querySelectorAll('.v18-reveal');
    if (reduce || !('IntersectionObserver' in window)) {
        items.forEach(function(el){ el.classList.add('is-in'); });
    } else {
        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.12, rootMargin:'0px 0px -8% 0px'});
        items.forEach(function(el){ io.observe(el); });
    }

    /* Cursor-Sticker im Hero (dezent) */
    if (!reduce) {
        var sticker = document.getElementById('v18sticker');
        var hero = document.querySelector('.v18-hero');
        if (sticker && hero) {
            hero.addEventListener('mousemove', function(ev){
                sticker.style.opacity = '1';
                sticker.style.left = ev.clientX + 'px';
                sticker.style.top = ev.clientY + 'px';
            });
            hero.addEventListener('mouseleave', function(){
                sticker.style.opacity = '0';
            });
        }
    }
})();
</script>

@endsection