@extends('layouts.app')

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

@section('meta_extra')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
@endsection

@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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

    .v19-page{
        --v19-sky-top:#eef1f7;
        --v19-sky-bot:#dfe4ee;
        --v19-top:#ffffff;
        --v19-right:#d4dae6;
        --v19-left:#b3bccd;
        --v19-ink:#10131c;
        --v19-muted:#5a6276;
        --v19-accent:#3b5bff;
        --v19-warm:#ff6a3d;
        --v19-grid:#c7cedb;
        --v19-ease:cubic-bezier(.2,.8,.2,1);
        background:linear-gradient(180deg,var(--v19-sky-top) 0%,var(--v19-sky-bot) 100%);
        color:var(--v19-ink);
        font-family:"Inter",ui-sans-serif,system-ui,sans-serif;
        -webkit-font-smoothing:antialiased;
        text-rendering:optimizeLegibility;
        min-height:100vh;
        overflow-x:hidden;
        position:relative;
    }
    .v19-page *{box-sizing:border-box;margin:0;padding:0;min-width:0;}
    .v19-head{font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;}
    .v19-num{font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;}

    .v19-page a{color:inherit;text-decoration:none;}
    .v19-page a:focus-visible,
    .v19-page button:focus-visible{
        outline:2px solid var(--v19-accent);
        outline-offset:4px;
        border-radius:6px;
    }

    .v19-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem);}

    /* ---------- Header (Glas-Pille) ---------- */
    .v19-nav{
        position:sticky;top:clamp(.6rem,2vw,1.1rem);z-index:50;
        display:flex;justify-content:center;pointer-events:none;
        padding:0 1rem;margin-top:clamp(.6rem,2vw,1.1rem);
    }
    .v19-pill{
        pointer-events:auto;
        display:flex;align-items:center;gap:clamp(.7rem,2.5vw,1.6rem);
        background:rgba(255,255,255,.7);
        backdrop-filter:blur(14px) saturate(140%);
        -webkit-backdrop-filter:blur(14px) saturate(140%);
        border:1px solid rgba(16,19,28,.08);
        box-shadow:0 8px 30px rgba(16,19,28,.10);
        border-radius:999px;
        padding:.55rem .55rem .55rem 1.1rem;
        max-width:100%;
    }
    .v19-brand{font-family:"Space Grotesk";font-weight:700;letter-spacing:-.02em;font-size:.98rem;white-space:nowrap;}
    .v19-brand b{color:var(--v19-accent);}
    .v19-pill nav{display:flex!important;gap:clamp(.5rem,2vw,1.1rem);align-items:center;}
    .v19-pill nav a{font-size:.85rem;color:var(--v19-muted);font-weight:500;white-space:nowrap;}
    .v19-pill nav a:hover{color:var(--v19-ink);}
    .v19-pill-cta{
        background:var(--v19-ink);color:#fff!important;
        padding:.5rem 1rem;border-radius:999px;font-size:.82rem;font-weight:600;
    }
    .v19-pill-cta:hover{background:var(--v19-accent);}

    /* ---------- Hero ---------- */
    .v19-hero{
        position:relative;
        display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;
        padding:clamp(2.5rem,7vw,5rem) 0 clamp(2rem,5vw,3.5rem);
    }
    .v19-eyebrow{
        display:inline-flex;align-items:center;gap:.5rem;
        font-family:"Space Grotesk";font-weight:600;font-size:.74rem;
        text-transform:uppercase;letter-spacing:.18em;color:var(--v19-accent);
        margin-bottom:1.1rem;
    }
    .v19-eyebrow::before{content:"";width:26px;height:2px;background:var(--v19-accent);border-radius:2px;}
    .v19-h1{
        font-family:"Space Grotesk";font-weight:700;letter-spacing:-.03em;
        font-size:clamp(2.3rem,6.2vw,4.2rem);line-height:1.02;
    }
    .v19-h1 .v19-em{
        background:linear-gradient(120deg,var(--v19-accent),#6f86ff);
        -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .v19-sub{
        margin:1.3rem 0 1.9rem;color:var(--v19-muted);
        font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.6;max-width:34ch;
    }
    .v19-actions{display:flex;flex-wrap:wrap;gap:.8rem;}
    .v19-btn{
        display:inline-flex;align-items:center;gap:.55rem;
        font-family:"Space Grotesk";font-weight:600;font-size:.95rem;
        padding:.85rem 1.5rem;border-radius:12px;transition:transform .25s var(--v19-ease),box-shadow .25s var(--v19-ease),background .25s;
    }
    .v19-btn-primary{
        background:var(--v19-accent);color:#fff;
        box-shadow:0 10px 24px rgba(59,91,255,.32);
    }
    .v19-btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(59,91,255,.42);}
    .v19-btn-ghost{
        background:rgba(255,255,255,.6);border:1px solid rgba(16,19,28,.12);color:var(--v19-ink);
    }
    .v19-btn-ghost:hover{transform:translateY(-3px);background:#fff;}

    /* Hero-Teaser-Stadt (kleines Iso-Cluster) */
    .v19-hero-stage{
        position:relative;height:clamp(260px,32vw,380px);
        perspective:1400px;
    }
    .v19-hero-iso{
        position:absolute;inset:0;
        transform-style:preserve-3d;
        transform:rotateX(55deg) rotateZ(-45deg);
        display:flex;align-items:center;justify-content:center;
    }
    .v19-teaser{position:relative;width:60%;height:60%;transform-style:preserve-3d;}
    .v19-tblock{
        position:absolute;border-radius:4px;
        transform-style:preserve-3d;
        will-change:transform;
        animation:v19-float 6s ease-in-out infinite;
    }
    .v19-tblock i{
        display:block;width:100%;height:100%;
        background:var(--v19-top);border:1px solid rgba(16,19,28,.06);
        border-radius:4px;position:relative;
    }
    /* Seitenwände als box-shadow-Stapel für Teaser (leichtgewichtig) */
    .v19-tblock i::before{
        content:"";position:absolute;left:0;top:100%;width:100%;height:var(--th,30px);
        background:var(--v19-left);transform-origin:top;transform:skewX(-45deg);
        margin-left:calc(var(--th,30px)/2);
    }
    .v19-tblock i::after{
        content:"";position:absolute;left:100%;top:0;width:var(--th,30px);height:100%;
        background:var(--v19-right);transform-origin:left;transform:skewY(-45deg);
        margin-top:calc(var(--th,30px)/2);
    }
    @keyframes v19-float{0%,100%{transform:translateZ(0)}50%{transform:translateZ(14px)}}

    /* ---------- Kennzahlen (3D-Bar) ---------- */
    .v19-stats{
        padding:clamp(1.5rem,4vw,2.5rem) 0 clamp(2.5rem,6vw,4rem);
    }
    .v19-stats-head{
        font-family:"Space Grotesk";font-weight:600;font-size:.78rem;text-transform:uppercase;
        letter-spacing:.16em;color:var(--v19-muted);margin-bottom:2.2rem;text-align:center;
    }
    .v19-bars{
        display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,4vw,3rem);
        align-items:end;justify-items:center;
        padding-bottom:1rem;
        max-width:720px;margin:0 auto;
    }
    .v19-bar{display:flex;flex-direction:column;align-items:center;gap:.9rem;}
    .v19-bar-num{font-family:"Space Grotesk";font-weight:700;font-size:clamp(1.3rem,3.5vw,2rem);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
    .v19-bar-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--v19-muted);text-align:center;font-family:"Space Grotesk";font-weight:500;}
    .v19-pillar{
        position:relative;width:clamp(34px,7vw,58px);
        transform-style:preserve-3d;
    }
    .v19-pillar .v19-cap{
        height:14px;background:var(--v19-top);
        border:1px solid rgba(16,19,28,.08);border-bottom:none;
        border-radius:5px 5px 0 0;
        position:relative;z-index:2;
    }
    .v19-pillar .v19-body{
        background:linear-gradient(90deg,var(--v19-left) 0%,var(--v19-left) 42%,var(--v19-right) 42%,var(--v19-right) 100%);
        border:1px solid rgba(16,19,28,.06);border-top:none;
        border-radius:0 0 5px 5px;
        box-shadow:inset -8px 0 14px rgba(255,255,255,.25);
        position:relative;
    }
    .v19-pillar .v19-body::after{
        content:"";position:absolute;left:42%;top:0;width:1px;height:100%;background:rgba(16,19,28,.06);
    }
    .v19-pillar.is-accent .v19-cap{border-color:var(--v19-accent);box-shadow:0 0 0 1px var(--v19-accent);}

    /* ---------- 9 Welten — Stadtraster ---------- */
    .v19-city{
        padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem);
        position:relative;
    }
    .v19-sec-head{text-align:center;margin-bottom:clamp(2rem,5vw,3.5rem);}
    .v19-sec-eyebrow{
        font-family:"Space Grotesk";font-weight:600;font-size:.74rem;text-transform:uppercase;
        letter-spacing:.2em;color:var(--v19-accent);
    }
    .v19-sec-title{
        font-family:"Space Grotesk";font-weight:700;letter-spacing:-.025em;
        font-size:clamp(1.8rem,4.5vw,2.9rem);margin-top:.6rem;line-height:1.05;
    }
    .v19-sec-note{color:var(--v19-muted);margin-top:.8rem;font-size:1rem;max-width:46ch;margin-inline:auto;}

    .v19-grid{
        display:grid;grid-template-columns:repeat(3,1fr);
        gap:clamp(1.1rem,3vw,2rem);
    }
    .v19-cell{
        position:relative;
        transform-style:preserve-3d;
        will-change:transform;
        opacity:0;transform:translateY(26px);
        animation:v19-rise .7s var(--v19-ease) forwards;
    }
    .v19-cell:nth-child(1){animation-delay:.05s}
    .v19-cell:nth-child(2){animation-delay:.12s}
    .v19-cell:nth-child(3){animation-delay:.19s}
    .v19-cell:nth-child(4){animation-delay:.26s}
    .v19-cell:nth-child(5){animation-delay:.33s}
    .v19-cell:nth-child(6){animation-delay:.40s}
    .v19-cell:nth-child(7){animation-delay:.47s}
    .v19-cell:nth-child(8){animation-delay:.54s}
    .v19-cell:nth-child(9){animation-delay:.61s}
    @keyframes v19-rise{to{opacity:1;transform:translateY(0)}}

    /* Iso-Quader: Deckel + zwei Seitenwände als Pseudo-Elemente */
    .v19-block{
        position:relative;display:block;height:100%;
        --side:18px;
        background:var(--v19-top);
        border:1px solid rgba(16,19,28,.08);
        border-radius:14px;
        padding:1.5rem 1.4rem 1.4rem;
        box-shadow:
            var(--side) var(--side) 0 -1px var(--v19-right),
            calc(var(--side) - 1px) calc(var(--side) + 1px) 0 0 rgba(16,19,28,.05),
            0 26px 34px -16px rgba(16,19,28,.32);
        transition:transform .25s var(--v19-ease),box-shadow .25s var(--v19-ease);
        height:100%;
        z-index:1;
    }
    /* linke Schattenseite via gradient-Rand */
    .v19-block::after{
        content:"";position:absolute;left:0;bottom:calc(-1 * var(--side));
        width:100%;height:var(--side);
        background:var(--v19-left);
        transform-origin:top;transform:skewX(45deg);
        margin-left:calc(var(--side) / 2);
        border-radius:0 0 14px 14px;
        z-index:-1;
    }
    .v19-cell:hover .v19-block,
    .v19-cell:focus-within .v19-block{
        transform:translate(-6px,-10px);
        box-shadow:
            calc(var(--side) + 6px) calc(var(--side) + 10px) 0 -1px var(--v19-right),
            0 38px 46px -18px rgba(16,19,28,.40),
            0 0 0 1.5px var(--v19-accent);
    }
    .v19-cell:hover .v19-block::after,
    .v19-cell:focus-within .v19-block::after{
        box-shadow:-3px 6px 16px rgba(255,106,61,.5);
    }

    .v19-glyph{
        width:44px;height:44px;border-radius:11px;
        display:flex;align-items:center;justify-content:center;
        background:linear-gradient(135deg,#eef1ff,#dde3ff);
        color:var(--v19-accent);font-size:1.1rem;
        margin-bottom:1rem;border:1px solid rgba(59,91,255,.18);
    }
    .v19-block-title{
        font-family:"Space Grotesk";font-weight:700;letter-spacing:-.02em;
        font-size:1.18rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
    }
    .v19-tag{
        font-family:"Space Grotesk";font-weight:600;font-size:.62rem;
        text-transform:uppercase;letter-spacing:.08em;
        padding:.2rem .5rem;border-radius:6px;
        background:rgba(59,91,255,.1);color:var(--v19-accent);
    }
    .v19-tag.is-dev{background:rgba(255,106,61,.14);color:#d24f23;}
    .v19-block-text{color:var(--v19-muted);font-size:.93rem;line-height:1.55;margin:.55rem 0 1.1rem;}
    .v19-block-cta{
        display:inline-flex;align-items:center;gap:.4rem;
        font-family:"Space Grotesk";font-weight:600;font-size:.82rem;color:var(--v19-accent);
        margin-top:auto;
    }
    .v19-block-cta i{transition:transform .25s var(--v19-ease);}
    .v19-cell:hover .v19-block-cta i{transform:translateX(4px);}
    .v19-block{display:flex;flex-direction:column;}

    /* "Türme" — höhere Blöcke */
    .v19-cell.is-tower .v19-block{--side:26px;padding-bottom:2rem;}
    .v19-cell.is-tower .v19-glyph{background:linear-gradient(135deg,var(--v19-accent),#6f86ff);color:#fff;border-color:transparent;}
    /* Android-Rohbau — Schraffur */
    .v19-cell.is-build .v19-block{--side:10px;}
    .v19-cell.is-build .v19-block::before{
        content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
        background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(255,106,61,.10) 9px 18px);
    }

    /* ---------- Über / Region ---------- */
    .v19-about{
        margin:clamp(1rem,3vw,2rem) 0 clamp(2.5rem,6vw,4rem);
        background:rgba(255,255,255,.6);
        border:1px solid rgba(16,19,28,.08);
        border-radius:20px;
        padding:clamp(1.8rem,5vw,3rem);
        display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center;
        box-shadow:0 18px 40px -22px rgba(16,19,28,.28);
    }
    .v19-about h2{font-family:"Space Grotesk";font-weight:700;letter-spacing:-.02em;font-size:clamp(1.4rem,3vw,2rem);line-height:1.1;}
    .v19-about p{color:var(--v19-muted);line-height:1.65;margin-top:1rem;font-size:1rem;}
    .v19-chip{
        display:inline-flex;align-items:center;gap:.5rem;
        font-family:"Space Grotesk";font-weight:600;font-size:.82rem;
        background:var(--v19-ink);color:#fff;
        padding:.6rem 1.1rem;border-radius:999px;
    }
    .v19-chip i{color:var(--v19-warm);}
    .v19-about-aside{
        display:flex;flex-direction:column;gap:.9rem;
    }
    .v19-fact{
        display:flex;align-items:center;gap:.8rem;
        background:#fff;border:1px solid rgba(16,19,28,.07);
        border-radius:12px;padding:.8rem 1rem;
    }
    .v19-fact i{
        width:34px;height:34px;border-radius:9px;flex:none;
        display:flex;align-items:center;justify-content:center;
        background:#eef1ff;color:var(--v19-accent);
    }
    .v19-fact span{font-size:.9rem;color:var(--v19-ink);font-weight:500;}

    /* ---------- Kontakt-CTA ---------- */
    .v19-contact{
        text-align:center;
        background:linear-gradient(135deg,var(--v19-ink),#1c2233);
        border-radius:24px;
        padding:clamp(2.5rem,7vw,4.5rem) clamp(1.2rem,5vw,3rem);
        margin-bottom:clamp(2rem,5vw,3.5rem);
        position:relative;overflow:hidden;
    }
    .v19-contact::before{
        content:"";position:absolute;width:340px;height:340px;border-radius:50%;
        background:radial-gradient(circle,rgba(59,91,255,.5),transparent 70%);
        top:-120px;right:-80px;filter:blur(10px);
    }
    .v19-contact::after{
        content:"";position:absolute;width:280px;height:280px;border-radius:50%;
        background:radial-gradient(circle,rgba(255,106,61,.32),transparent 70%);
        bottom:-130px;left:-60px;
    }
    .v19-contact h2{position:relative;font-family:"Space Grotesk";font-weight:700;letter-spacing:-.02em;color:#fff;font-size:clamp(1.6rem,4.5vw,2.6rem);line-height:1.08;}
    .v19-contact p{position:relative;color:rgba(255,255,255,.72);margin:1rem auto 1.8rem;max-width:44ch;line-height:1.6;}
    .v19-contact .v19-btn-primary{position:relative;}

    /* ---------- Footer-Mini ---------- */
    .v19-foot{
        border-top:1px solid rgba(16,19,28,.1);
        padding:2.2rem 0 3rem;
    }
    .v19-foot-grid{
        display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:center;margin-bottom:1.4rem;
    }
    .v19-foot-grid a{font-size:.85rem;color:var(--v19-muted);font-weight:500;}
    .v19-foot-grid a:hover{color:var(--v19-accent);}
    .v19-foot-base{text-align:center;font-size:.78rem;color:var(--v19-muted);}
    .v19-foot-base b{font-family:"Space Grotesk";color:var(--v19-ink);}

    /* ---------- Responsive ---------- */
    @media (max-width:920px){
        .v19-hero{grid-template-columns:1fr;}
        .v19-hero-stage{display:none;}
        .v19-about{grid-template-columns:1fr;}
    }
    @media (max-width:680px){
        .v19-grid{grid-template-columns:1fr 1fr;}
        .v19-bars{gap:.6rem;}
        .v19-pill nav{display:none!important;}
    }
    @media (max-width:430px){
        .v19-grid{grid-template-columns:1fr;}
        .v19-block{--side:14px;}
        .v19-cell.is-tower .v19-block{--side:18px;}
    }

    @media (prefers-reduced-motion:reduce){
        .v19-cell{animation:none!important;opacity:1!important;transform:none!important;}
        .v19-tblock{animation:none!important;}
        .v19-btn,.v19-block,.v19-block-cta i{transition:none!important;}
    }
</style>

<div class="v19-page" id="v19page">

    {{-- Header --}}
    <div class="v19-nav">
        <div class="v19-pill">
            <span class="v19-brand">Arthur <b>Kotsch</b></span>
            <nav aria-label="Hauptnavigation">
                <a href="#v19-city">Welten</a>
                <a href="#v19-about">Über</a>
            </nav>
            <a href="/kontakt" class="v19-pill-cta">Kontakt</a>
        </div>
    </div>

    <div class="v19-wrap">

        {{-- Hero --}}
        <header class="v19-hero">
            <div>
                <span class="v19-eyebrow">Eine gebaute Skyline aus Software</span>
                <h1 class="v19-h1">Eine Welt aus <span class="v19-em">Software.</span></h1>
                <p class="v19-sub">Arthur Kotsch — Student Digital Engineering &amp; Entwickler aus Lichtenstein, Sachsen. Neun Bereiche, ein Ökosystem.</p>
                <div class="v19-actions">
                    <a href="#v19-city" class="v19-btn v19-btn-primary">Welten erkunden <i class="fa-solid fa-arrow-down" aria-hidden="true"></i></a>
                    <a href="/kontakt" class="v19-btn v19-btn-ghost">Kontakt aufnehmen</a>
                </div>
            </div>

            {{-- Iso-Teaser-Cluster --}}
            <div class="v19-hero-stage" aria-hidden="true">
                <div class="v19-hero-iso">
                    <div class="v19-teaser">
                        <div class="v19-tblock" style="left:6%;top:8%;width:30%;height:30%;animation-delay:0s"><i style="--th:50px"></i></div>
                        <div class="v19-tblock" style="left:42%;top:2%;width:30%;height:30%;animation-delay:.8s"><i style="--th:70px"></i></div>
                        <div class="v19-tblock" style="left:12%;top:44%;width:30%;height:30%;animation-delay:1.4s"><i style="--th:34px"></i></div>
                        <div class="v19-tblock" style="left:48%;top:42%;width:30%;height:30%;animation-delay:2s"><i style="--th:58px"></i></div>
                    </div>
                </div>
            </div>
        </header>

        {{-- Kennzahlen-Leiste (3D-Bar) --}}
        <section class="v19-stats" aria-label="Kennzahlen">
            <div class="v19-stats-head">Das Portfolio in Zahlen</div>
            <div class="v19-bars">
                <div class="v19-bar">
                    <span class="v19-bar-num">22</span>
                    <div class="v19-pillar is-accent" style="--h:64px">
                        <div class="v19-cap"></div>
                        <div class="v19-body" style="height:64px"></div>
                    </div>
                    <span class="v19-bar-label">iOS &amp; Mac<br>Apps</span>
                </div>
                <div class="v19-bar">
                    <span class="v19-bar-num">9</span>
                    <div class="v19-pillar" style="--h:40px">
                        <div class="v19-cap"></div>
                        <div class="v19-body" style="height:40px"></div>
                    </div>
                    <span class="v19-bar-label">Windows<br>Tools</span>
                </div>
                <div class="v19-bar">
                    <span class="v19-bar-num">734</span>
                    <div class="v19-pillar is-accent" style="--h:118px">
                        <div class="v19-cap"></div>
                        <div class="v19-body" style="height:118px"></div>
                    </div>
                    <span class="v19-bar-label">Web-<br>Tools</span>
                </div>
                <div class="v19-bar">
                    <span class="v19-bar-num">1.412</span>
                    <div class="v19-pillar" style="--h:150px">
                        <div class="v19-cap"></div>
                        <div class="v19-body" style="height:150px"></div>
                    </div>
                    <span class="v19-bar-label">Artikel &amp;<br>Ratgeber</span>
                </div>
            </div>
        </section>

        {{-- 9 Welten — Stadtraster --}}
        <section class="v19-city" id="v19-city">
            <div class="v19-sec-head">
                <span class="v19-sec-eyebrow">Das Stadtraster</span>
                <h2 class="v19-sec-title">Neun Welten, eine Stadt</h2>
                <p class="v19-sec-note">Jeder Quader ist ein eigener Bereich. Höhe erzählt Größe — die Türme tragen die meisten Produkte.</p>
            </div>

            <div class="v19-grid">

                {{-- iOS & Mac — Turm --}}
                <div class="v19-cell is-tower">
                    <a class="v19-block" href="https://ios.kotsch.tech">
                        <div class="v19-glyph"><i class="fa-brands fa-apple" aria-hidden="true"></i></div>
                        <div class="v19-block-title">iOS &amp; Mac <span class="v19-tag">22 Apps</span></div>
                        <p class="v19-block-text">22 Apps im App Store für iPhone, iPad und Mac — mit regelmäßigen Updates.</p>
                        <span class="v19-block-cta">ios.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </div>

                {{-- Windows --}}
                <div class="v19-cell">
                    <a class="v19-block" href="https://windows.kotsch.tech">
                        <div class="v19-glyph"><i class="fa-brands fa-windows" aria-hidden="true"></i></div>
                        <div class="v19-block-title">Windows <span class="v19-tag">9 Tools</span></div>
                        <p class="v19-block-text">9 Programme — Cleaner, Commander, Notes, Taskmanager, CodeEditor — als Direkt-Download.</p>
                        <span class="v19-block-cta">windows.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </div>

                {{-- Android — Rohbau --}}
                <div class="v19-cell is-build">
                    <a class="v19-block" href="https://android.kotsch.tech">
                        <div class="v19-glyph"><i class="fa-brands fa-android" aria-hidden="true"></i></div>
                        <div class="v19-block-title">Android <span class="v19-tag is-dev">In Entwicklung</span></div>
                        <p class="v19-block-text">Native Apps für Android — aktuell im Aufbau.</p>
                        <span class="v19-block-cta">android.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </div>

                {{-- Web-Tools — Turm --}}
                <div class="v19-cell is-tower">
                    <a class="v19-block" href="https://webtools.kotsch.tech">
                        <div class="v19-glyph"><i class="fa-solid fa-toolbox" aria-hidden="true"></i></div>
                        <div class="v19-block-title">Web-Tools <span class="v19-tag">734</span></div>
                        <p class="v19-block-text">734 Tools direkt im Browser — ohne Login, ohne Installation.</p>
                        <span class="v19-block-cta">webtools.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </div>

                {{-- Shop --}}
                <div class="v19-cell">
                    <a class="v19-block" href="https://shop.kotsch.tech">
                        <div class="v19-glyph"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i></div>
                        <div class="v19-block-title">Shop</div>
                        <p class="v19-block-text">Digitale Produkte mit Sofort-Download direkt nach dem Kauf.</p>
                        <span class="v19-block-cta">shop.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </div>

                {{-- Hosting --}}
                <div class="v19-cell">
                    <a class="v19-block" href="https://hosting.kotsch.tech">
                        <div class="v19-glyph"><i class="fa-solid fa-server" aria-hidden="true"></i></div>
                        <div class="v19-block-title">Hosting</div>
                        <p class="v19-block-text">Managed Webhosting &amp; vServer/VPS — DSGVO-konform betrieben.</p>
                        <span class="v19-block-cta">hosting.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </div>

                {{-- News --}}
                <div class="v19-cell">
                    <a class="v19-block" href="https://news.kotsch.tech">
                        <div class="v19-glyph"><i class="fa-solid fa-newspaper" aria-hidden="true"></i></div>
                        <div class="v19-block-title">News <span class="v19-tag">1.412</span></div>
                        <p class="v19-block-text">1.412 Ratgeber &amp; Tutorials rund um Technik und Entwicklung.</p>
                        <span class="v19-block-cta">news.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </div>

                {{-- IT-Hilfe --}}
                <div class="v19-cell">
                    <a class="v19-block" href="https://it-hilfe.kotsch.tech">
                        <div class="v19-glyph"><i class="fa-solid fa-screwdriver-wrench" aria-hidden="true"></i></div>
                        <div class="v19-block-title">IT-Hilfe</div>
                        <p class="v19-block-text">Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein — keine Lösung = kein Preis.</p>
                        <span class="v19-block-cta">it-hilfe.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </div>

                {{-- Webdesign --}}
                <div class="v19-cell">
                    <a class="v19-block" href="https://webdesign.kotsch.tech">
                        <div class="v19-glyph"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i></div>
                        <div class="v19-block-title">Webdesign</div>
                        <p class="v19-block-text">Studio &amp; 20 Branchen-Demos für moderne Websites.</p>
                        <span class="v19-block-cta">webdesign.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </div>

            </div>
        </section>

        {{-- Über / Region --}}
        <section class="v19-about" id="v19-about">
            <div>
                <span class="v19-chip"><i class="fa-solid fa-location-dot" aria-hidden="true"></i> Region Glauchau–Lichtenstein</span>
                <h2>Software, die aus der Region wächst.</h2>
                <p>Arthur Kotsch baut als Student Digital Engineering ein ganzes Ökosystem an Apps, Tools und Diensten — vom App Store bis zum vServer. Bei der IT-Hilfe gilt ein einfaches Prinzip: keine Lösung = kein Preis.</p>
            </div>
            <div class="v19-about-aside">
                <div class="v19-fact"><i class="fa-solid fa-graduation-cap" aria-hidden="true"></i><span>Student Digital Engineering</span></div>
                <div class="v19-fact"><i class="fa-solid fa-code" aria-hidden="true"></i><span>Entwickler aus Lichtenstein, Sachsen</span></div>
                <div class="v19-fact"><i class="fa-solid fa-handshake-angle" aria-hidden="true"></i><span>Vor Ort &amp; Remote erreichbar</span></div>
            </div>
        </section>

        {{-- Kontakt-CTA --}}
        <section class="v19-contact">
            <h2>Lassen Sie uns Ihre Welt bauen.</h2>
            <p>Ob App, Website, Hosting oder ein Technik-Problem vor Ort — schreiben Sie mir, ich melde mich zurück.</p>
            <a href="/kontakt" class="v19-btn v19-btn-primary">Kontakt aufnehmen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </section>

        {{-- Footer-Mini --}}
        <footer class="v19-foot">
            <div class="v19-foot-grid">
                <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>
                <a href="/kontakt">Kontakt</a>
            </div>
            <div class="v19-foot-base">© {{ date('Y') }} <b>Arthur Kotsch</b> · kotsch.tech — eine Welt aus Software.</div>
        </footer>

    </div>
</div>

<script>
(function(){
    var page = document.getElementById('v19page');
    if(!page) return;
    if(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    // Sanfter Parallax auf das Hero-Iso-Cluster
    var iso = page.querySelector('.v19-hero-iso');
    if(iso){
        var hero = page.querySelector('.v19-hero-stage');
        hero.addEventListener('mousemove', function(e){
            var r = hero.getBoundingClientRect();
            var mx = (e.clientX - r.left) / r.width - .5;
            var my = (e.clientY - r.top) / r.height - .5;
            iso.style.transform = 'rotateX(' + (55 - my*6) + 'deg) rotateZ(' + (-45 + mx*6) + 'deg)';
        });
        hero.addEventListener('mouseleave', function(){
            iso.style.transform = 'rotateX(55deg) rotateZ(-45deg)';
        });
    }
})();
</script>
@endsection