@extends('layouts.app')

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

    /* ===== Variante 8 — "Clay Studio" (Playful Claymorphism / 3D) ===== */
    @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@500;600;700;800&display=swap');

    .v8-root{
        --v8-cream:#F4EFE6;
        --v8-tile:#FBF7F0;
        --v8-white:#FFFFFF;
        --v8-ink:#2B2440;
        --v8-coral:#FF8A6B;
        --v8-sun:#FFC65C;
        --v8-mint:#7ED9B8;
        --v8-sky:#8FC6FF;
        --v8-lav:#B9A4FF;
        --v8-pink:#FF9FC7;
        --v8-lime:#C8E66B;
        --v8-turq:#5FD9D2;
        --v8-peach:#FFB088;
        /* Clay-Schatten: außen tief (dicker Fuß) + außen weich + inset-Highlight */
        --clay:0 6px 0 rgba(43,36,64,.10), 0 18px 30px rgba(43,36,64,.14), inset 0 4px 8px rgba(255,255,255,.7);
        --clay-press:0 2px 0 rgba(43,36,64,.10), 0 8px 16px rgba(43,36,64,.12), inset 0 4px 8px rgba(255,255,255,.7);
        --bounce:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s cubic-bezier(.34,1.56,.64,1);

        background:var(--v8-cream);
        color:var(--v8-ink);
        font-family:"Nunito", system-ui, -apple-system, sans-serif;
        font-weight:500;
        font-size:1.05rem;
        line-height:1.6;
        -webkit-font-smoothing:antialiased;
        overflow-x:hidden;
        min-height:100vh;
    }
    .v8-root *{box-sizing:border-box;}
    .v8-root h1,.v8-root h2,.v8-root h3,.v8-root .v8-display{
        font-family:"Baloo 2","Nunito",sans-serif;
        letter-spacing:-.5px;
        margin:0;
    }
    .v8-wrap{max-width:1180px;margin:0 auto;padding:0 22px;}
    .v8-root a{text-decoration:none;color:inherit;}

    /* ===== Sticky Top-Pille ===== */
    .v8-navwrap{position:sticky;top:14px;z-index:50;padding:0 22px;}
    .v8-nav{
        max-width:1180px;margin:0 auto;
        display:flex;align-items:center;justify-content:space-between;
        gap:16px;
        background:rgba(255,255,255,.82);
        backdrop-filter:blur(10px);
        border-radius:999px;
        padding:10px 12px 10px 14px;
        box-shadow:0 4px 0 rgba(43,36,64,.08),0 12px 24px rgba(43,36,64,.10);
    }
    .v8-brand{display:flex;align-items:center;gap:11px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.15rem;}
    .v8-blob-ak{
        width:40px;height:40px;flex:0 0 40px;
        display:grid;place-items:center;
        background:linear-gradient(135deg,var(--v8-coral),var(--v8-sun));
        color:#fff;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.05rem;
        border-radius:48% 52% 55% 45% / 52% 48% 52% 48%;
        box-shadow:inset 0 3px 6px rgba(255,255,255,.6),0 4px 10px rgba(255,138,107,.4);
    }
    .v8-nav-links{display:flex;align-items:center;gap:6px;}
    .v8-nav-links a.v8-nav-link{
        display:none;
        padding:8px 14px;border-radius:999px;font-weight:700;font-size:.95rem;
    }
    .v8-nav-links a.v8-nav-link:hover{background:rgba(43,36,64,.06);}

    /* ===== Buttons (Clay) ===== */
    .v8-btn{
        display:inline-flex;align-items:center;gap:8px;
        font-family:"Baloo 2",sans-serif;font-weight:700;font-size:1rem;
        padding:13px 22px;border-radius:999px;border:0;cursor:pointer;
        background:var(--v8-white);color:var(--v8-ink);
        box-shadow:var(--clay);
        transition:var(--bounce);
        line-height:1;
    }
    .v8-btn:hover{transform:translateY(3px);box-shadow:var(--clay-press);}
    .v8-btn:focus-visible{outline:3px solid var(--v8-lav);outline-offset:3px;}
    .v8-btn--primary{background:linear-gradient(135deg,var(--v8-coral),var(--v8-peach));color:#fff;}
    .v8-btn--sun{background:linear-gradient(135deg,var(--v8-sun),#ffd98a);color:var(--v8-ink);}
    .v8-btn--sm{padding:10px 16px;font-size:.92rem;}

    /* ===== Hero ===== */
    .v8-hero{padding:48px 0 30px;}
    .v8-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;}
    .v8-eyebrow{
        display:inline-flex;align-items:center;gap:8px;
        background:var(--v8-white);border-radius:999px;padding:8px 16px;
        font-weight:700;font-size:.9rem;
        box-shadow:0 4px 0 rgba(43,36,64,.08),0 8px 16px rgba(43,36,64,.10);
        margin-bottom:22px;
    }
    .v8-eyebrow i{color:var(--v8-coral);}
    .v8-hero h1{font-size:clamp(2.8rem,6vw,5rem);font-weight:800;line-height:1.02;}
    .v8-hero h1 .v8-hl{color:var(--v8-coral);}
    .v8-hero p.v8-sub{font-size:1.15rem;margin:20px 0 30px;max-width:34ch;color:#4a4361;}
    .v8-hero-cta{display:flex;flex-wrap:wrap;gap:14px;}

    /* ===== Signature: Clay-Blob-Cluster ===== */
    .v8-cluster{position:relative;height:440px;}
    .v8-blob{
        position:absolute;
        display:grid;place-items:center;
        font-size:3.2rem;
        box-shadow:0 18px 34px rgba(43,36,64,.18),inset 0 6px 14px rgba(255,255,255,.55);
        will-change:transform,border-radius;
    }
    .v8-blob span{filter:drop-shadow(0 3px 4px rgba(43,36,64,.18));}
    .v8-b1{width:220px;height:220px;background:linear-gradient(135deg,var(--v8-coral),var(--v8-peach));top:18px;left:30px;border-radius:42% 58% 63% 37% / 45% 38% 62% 55%;animation:v8morph1 11s ease-in-out infinite;}
    .v8-b2{width:160px;height:160px;background:linear-gradient(135deg,var(--v8-sky),var(--v8-turq));top:0;right:36px;border-radius:60% 40% 38% 62% / 55% 62% 38% 45%;animation:v8morph2 9s ease-in-out infinite;}
    .v8-b3{width:150px;height:150px;background:linear-gradient(135deg,var(--v8-lav),var(--v8-pink));bottom:24px;left:80px;border-radius:50% 50% 62% 38% / 60% 42% 58% 40%;animation:v8morph3 10s ease-in-out infinite;}
    .v8-b4{width:130px;height:130px;background:linear-gradient(135deg,var(--v8-lime),var(--v8-mint));bottom:0;right:60px;border-radius:46% 54% 50% 50% / 42% 50% 50% 58%;animation:v8morph1 12s ease-in-out infinite reverse;}

    @keyframes v8morph1{0%,100%{border-radius:42% 58% 63% 37% / 45% 38% 62% 55%;transform:scale(1) rotate(0deg);}50%{border-radius:55% 45% 40% 60% / 55% 50% 50% 45%;transform:scale(1.05) rotate(4deg);}}
    @keyframes v8morph2{0%,100%{border-radius:60% 40% 38% 62% / 55% 62% 38% 45%;transform:scale(1);}50%{border-radius:40% 60% 60% 40% / 45% 40% 60% 55%;transform:scale(1.07);}}
    @keyframes v8morph3{0%,100%{border-radius:50% 50% 62% 38% / 60% 42% 58% 40%;transform:scale(1) rotate(0);}50%{border-radius:62% 38% 45% 55% / 42% 60% 40% 58%;transform:scale(1.06) rotate(-5deg);}}

    /* ===== Stat-Leiste ===== */
    .v8-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:24px 0 14px;}
    .v8-stat{
        background:var(--v8-white);border-radius:24px;padding:22px 18px;text-align:center;
        box-shadow:var(--clay);
    }
    .v8-stat--coral{background:linear-gradient(135deg,#fff,#fff0eb);border-top:5px solid var(--v8-coral);}
    .v8-stat--sky{background:linear-gradient(135deg,#fff,#eef6ff);border-top:5px solid var(--v8-sky);}
    .v8-stat--sun{background:linear-gradient(135deg,#fff,#fff6e6);border-top:5px solid var(--v8-sun);}
    .v8-stat--mint{background:linear-gradient(135deg,#fff,#eefaf4);border-top:5px solid var(--v8-mint);}
    .v8-stat .v8-num{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(2.1rem,5vw,3.2rem);line-height:1;}
    .v8-stat .v8-lab{font-weight:600;font-size:.92rem;color:#5a5274;margin-top:6px;}

    /* ===== Sektions-Kopf ===== */
    .v8-section{padding:54px 0;}
    .v8-sec-head{text-align:center;margin-bottom:36px;}
    .v8-sec-head h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;}
    .v8-sec-head p{color:#5a5274;margin-top:8px;font-size:1.05rem;}

    /* ===== Die 9 Welten — Bento ===== */
    .v8-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
    .v8-tile{
        background:var(--v8-tile);border-radius:28px;padding:26px;
        display:flex;flex-direction:column;
        box-shadow:var(--clay);
        transition:var(--bounce);
        position:relative;
    }
    .v8-tile:hover{transform:translateY(3px);box-shadow:var(--clay-press);}
    .v8-tile:hover .v8-icon{transform:rotate(-6deg) scale(1.1);}
    .v8-tile--wide{grid-column:span 2;}
    .v8-tile--tall{}
    .v8-icon{
        width:72px;height:72px;display:grid;place-items:center;font-size:2.1rem;
        border-radius:46% 54% 58% 42% / 52% 46% 54% 48%;
        box-shadow:inset 0 4px 8px rgba(255,255,255,.55),0 6px 14px rgba(43,36,64,.16);
        margin-bottom:18px;
        transition:transform .18s cubic-bezier(.34,1.56,.64,1);
    }
    .v8-icon span{filter:drop-shadow(0 2px 3px rgba(43,36,64,.18));}
    .v8-tile h3{font-size:1.5rem;font-weight:700;margin-bottom:8px;}
    .v8-tile p{color:#5a5274;font-weight:500;flex:1;margin-bottom:18px;}
    .v8-tile .v8-open{
        align-self:flex-start;
        display:inline-flex;align-items:center;gap:7px;
        font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.92rem;
        padding:9px 16px;border-radius:999px;
        background:var(--v8-white);
        box-shadow:0 4px 0 rgba(43,36,64,.10),0 8px 14px rgba(43,36,64,.10),inset 0 2px 5px rgba(255,255,255,.6);
        transition:var(--bounce);
    }
    .v8-tile .v8-open:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(43,36,64,.10),0 5px 10px rgba(43,36,64,.10),inset 0 2px 5px rgba(255,255,255,.6);}
    .v8-badge{
        position:absolute;top:20px;right:20px;
        background:var(--v8-ink);color:#fff;
        font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px;
        box-shadow:0 4px 10px rgba(43,36,64,.25);
    }
    /* Welt-Akzentfarben */
    .v8-c-coral .v8-icon{background:linear-gradient(135deg,var(--v8-coral),var(--v8-peach));}
    .v8-c-sky   .v8-icon{background:linear-gradient(135deg,var(--v8-sky),#bcdcff);}
    .v8-c-mint  .v8-icon{background:linear-gradient(135deg,var(--v8-mint),#a8e8d2);}
    .v8-c-sun   .v8-icon{background:linear-gradient(135deg,var(--v8-sun),#ffdc93);}
    .v8-c-pink  .v8-icon{background:linear-gradient(135deg,var(--v8-pink),#ffc4dd);}
    .v8-c-lav   .v8-icon{background:linear-gradient(135deg,var(--v8-lav),#d4c7ff);}
    .v8-c-lime  .v8-icon{background:linear-gradient(135deg,var(--v8-lime),#dcf09a);}
    .v8-c-turq  .v8-icon{background:linear-gradient(135deg,var(--v8-turq),#9be8e3);}
    .v8-c-peach .v8-icon{background:linear-gradient(135deg,var(--v8-peach),#ffd0b3);}

    /* ===== Über mich ===== */
    .v8-about{
        background:var(--v8-white);border-radius:36px;padding:38px;
        display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
        box-shadow:var(--clay);
    }
    .v8-avatar{
        width:128px;height:128px;flex:0 0 128px;
        display:grid;place-items:center;
        background:linear-gradient(135deg,var(--v8-lav),var(--v8-sky));
        color:#fff;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:2.6rem;
        border-radius:48% 52% 60% 40% / 55% 45% 55% 45%;
        box-shadow:inset 0 6px 12px rgba(255,255,255,.5),0 10px 24px rgba(143,198,255,.4);
        animation:v8morph2 9s ease-in-out infinite;
    }
    .v8-about h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:10px;}
    .v8-about p{color:#4a4361;}

    /* ===== Kontakt-CTA ===== */
    .v8-cta{
        margin:8px 0 0;
        background:linear-gradient(135deg,var(--v8-coral),var(--v8-sun));
        border-radius:40px;padding:54px 36px;text-align:center;color:#fff;
        box-shadow:0 8px 0 rgba(43,36,64,.12),0 24px 44px rgba(255,138,107,.32),inset 0 4px 10px rgba(255,255,255,.4);
    }
    .v8-cta h2{font-size:clamp(2rem,4vw,3rem);text-shadow:0 2px 6px rgba(43,36,64,.18);}
    .v8-cta p{margin:14px auto 26px;max-width:46ch;font-weight:600;font-size:1.1rem;opacity:.95;}
    .v8-cta .v8-btn{background:var(--v8-white);color:var(--v8-coral);}

    /* ===== Footer-Mini ===== */
    .v8-foot{
        margin-top:54px;background:var(--v8-white);
        border-radius:40px 40px 0 0;padding:40px 22px 30px;
        box-shadow:0 -6px 24px rgba(43,36,64,.06);
    }
    .v8-foot-inner{max-width:1180px;margin:0 auto;text-align:center;}
    .v8-foot h3{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.3rem;margin-bottom:18px;}
    .v8-foot-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px;}
    .v8-foot-links a{
        background:var(--v8-cream);padding:8px 15px;border-radius:999px;
        font-weight:700;font-size:.88rem;
        box-shadow:inset 0 2px 4px rgba(255,255,255,.7),0 3px 7px rgba(43,36,64,.08);
        transition:var(--bounce);
    }
    .v8-foot-links a:hover{transform:translateY(2px);}
    .v8-foot-copy{color:#7a7290;font-size:.9rem;}

    /* ===== Responsive ===== */
    @media (min-width:760px){.v8-nav-links a.v8-nav-link{display:inline-flex;}}
    @media (max-width:920px){
        .v8-hero-grid{grid-template-columns:1fr;gap:20px;}
        .v8-cluster{height:340px;max-width:420px;margin:0 auto;}
        .v8-stats{grid-template-columns:repeat(2,1fr);}
        .v8-bento{grid-template-columns:repeat(2,1fr);}
        .v8-tile--wide{grid-column:span 2;}
    }
    @media (max-width:560px){
        .v8-bento{grid-template-columns:1fr;}
        .v8-tile--wide{grid-column:span 1;}
        .v8-about{grid-template-columns:1fr;text-align:center;justify-items:center;}
        .v8-hero{padding:34px 0 20px;}
        .v8-cluster{height:300px;}
        .v8-b1{width:170px;height:170px;}
        .v8-b2{width:120px;height:120px;}
        .v8-b3{width:115px;height:115px;}
        .v8-b4{width:100px;height:100px;}
    }
    @media (max-width:380px){
        .v8-wrap{padding:0 16px;}
        .v8-stats{grid-template-columns:1fr;}
        .v8-hero h1{font-size:2.4rem;}
    }

    @media (prefers-reduced-motion:reduce){
        .v8-root *{animation:none!important;}
        .v8-tile,.v8-btn,.v8-open,.v8-foot-links a{transition:box-shadow .15s ease!important;}
    }
</style>

<div class="v8-root">

    {{-- ===== Sticky Top-Pille ===== --}}
    <div class="v8-navwrap">
        <nav class="v8-nav" aria-label="Hauptnavigation">
            <a href="#top" class="v8-brand"><span class="v8-blob-ak" aria-hidden="true">AK</span> Arthur&nbsp;Kotsch</a>
            <div class="v8-nav-links">
                <a href="#welten" class="v8-nav-link">Welten</a>
                <a href="#ueber" class="v8-nav-link">Über mich</a>
                <a href="/kontakt" class="v8-btn v8-btn--primary v8-btn--sm">Kontakt</a>
            </div>
        </nav>
    </div>

    {{-- ===== Hero ===== --}}
    <header class="v8-hero" id="top">
        <div class="v8-wrap">
            <div class="v8-hero-grid">
                <div>
                    <span class="v8-eyebrow"><i class="fa-solid fa-shapes"></i> Apps · Tools · Web aus Lichtenstein</span>
                    <h1>Arthur Kotsch — <span class="v8-hl">Apps, Tools &amp; Web</span> aus Lichtenstein.</h1>
                    <p class="v8-sub">Student Digital Engineering &amp; Entwickler aus Lichtenstein (Sachsen). Neun Welten, ein Baukasten.</p>
                    <div class="v8-hero-cta">
                        <a href="#welten" class="v8-btn v8-btn--primary"><i class="fa-solid fa-arrow-down"></i> Welten entdecken</a>
                        <a href="/kontakt" class="v8-btn"><i class="fa-solid fa-paper-plane"></i> Kontakt</a>
                    </div>
                </div>
                <div class="v8-cluster" id="v8cluster" aria-hidden="true">
                    <div class="v8-blob v8-b1"><span>📱</span></div>
                    <div class="v8-blob v8-b2"><span>🧰</span></div>
                    <div class="v8-blob v8-b3"><span>🎨</span></div>
                    <div class="v8-blob v8-b4"><span>🛒</span></div>
                </div>
            </div>
        </div>
    </header>

    {{-- ===== Stat-Leiste ===== --}}
    <section class="v8-wrap" aria-label="Kennzahlen">
        <div class="v8-stats">
            <div class="v8-stat v8-stat--coral"><div class="v8-num">22</div><div class="v8-lab">iOS/Mac-Apps</div></div>
            <div class="v8-stat v8-stat--sky"><div class="v8-num">9</div><div class="v8-lab">Windows-Tools</div></div>
            <div class="v8-stat v8-stat--sun"><div class="v8-num">734</div><div class="v8-lab">Web-Tools</div></div>
            <div class="v8-stat v8-stat--mint"><div class="v8-num">1.412</div><div class="v8-lab">Artikel</div></div>
        </div>
    </section>

    {{-- ===== Die 9 Welten ===== --}}
    <section class="v8-section" id="welten">
        <div class="v8-wrap">
            <div class="v8-sec-head">
                <h2>Neun Welten zum Anfassen</h2>
                <p>Jeder Block ein eigener Knet-Baustein. Tipp drauf und entdecke.</p>
            </div>
            <div class="v8-bento">

                {{-- 1 iOS & Mac (Koralle) — Hero-Welt, 2 Spalten --}}
                <a href="https://ios.kotsch.tech" class="v8-tile v8-c-coral v8-tile--wide">
                    <div class="v8-icon" aria-hidden="true"><span>📱</span></div>
                    <h3>iOS &amp; Mac Apps</h3>
                    <p>22 Apps im App Store für iPhone, iPad &amp; Mac — mit regelmäßigen Updates.</p>
                    <span class="v8-open">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                {{-- 2 Windows (Himmelblau) --}}
                <a href="https://windows.kotsch.tech" class="v8-tile v8-c-sky">
                    <div class="v8-icon" aria-hidden="true"><span>🪟</span></div>
                    <h3>Windows</h3>
                    <p>9 Programme — Cleaner, Commander, Notes, Taskmanager, CodeEditor — als Direkt-Download.</p>
                    <span class="v8-open">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                {{-- 3 Android (Minze) --}}
                <a href="https://android.kotsch.tech" class="v8-tile v8-c-mint">
                    <div class="v8-icon" aria-hidden="true"><span>🤖</span></div>
                    <h3>Android</h3>
                    <p>Native Apps für Android — aktuell in Entwicklung.</p>
                    <span class="v8-open">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                {{-- 4 Web-Tools (Sonnengelb) --}}
                <a href="https://webtools.kotsch.tech" class="v8-tile v8-c-sun">
                    <div class="v8-icon" aria-hidden="true"><span>🧰</span></div>
                    <h3>Web-Tools</h3>
                    <p>734 Tools direkt im Browser — ganz ohne Login oder Installation.</p>
                    <span class="v8-open">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                {{-- 5 Shop (Pink) --}}
                <a href="https://shop.kotsch.tech" class="v8-tile v8-c-pink">
                    <div class="v8-icon" aria-hidden="true"><span>🛒</span></div>
                    <h3>Shop</h3>
                    <p>Digitale Produkte mit Sofort-Download — direkt nach dem Kauf verfügbar.</p>
                    <span class="v8-open">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                {{-- 6 Hosting (Lavendel) --}}
                <a href="https://hosting.kotsch.tech" class="v8-tile v8-c-lav">
                    <div class="v8-icon" aria-hidden="true"><span>☁️</span></div>
                    <h3>Hosting</h3>
                    <p>Managed Webhosting sowie vServer/VPS — DSGVO-konform betrieben.</p>
                    <span class="v8-open">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                {{-- 7 News (Limette) --}}
                <a href="https://news.kotsch.tech" class="v8-tile v8-c-lime">
                    <div class="v8-icon" aria-hidden="true"><span>📰</span></div>
                    <h3>News</h3>
                    <p>1.412 Ratgeber &amp; Tutorials rund um Apps, Tools und Technik.</p>
                    <span class="v8-open">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                {{-- 8 IT-Hilfe (Türkis) — mit Badge --}}
                <a href="https://it-hilfe.kotsch.tech" class="v8-tile v8-c-turq">
                    <span class="v8-badge">keine Lösung = kein Preis</span>
                    <div class="v8-icon" aria-hidden="true"><span>🛠️</span></div>
                    <h3>IT-Hilfe</h3>
                    <p>Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein.</p>
                    <span class="v8-open">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                {{-- 9 Webdesign (Pfirsich) --}}
                <a href="https://webdesign.kotsch.tech" class="v8-tile v8-c-peach">
                    <div class="v8-icon" aria-hidden="true"><span>🎨</span></div>
                    <h3>Webdesign</h3>
                    <p>Studio mit 20 Branchen-Demos — fertige Ideen zum Loslegen.</p>
                    <span class="v8-open">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

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

    {{-- ===== Über mich ===== --}}
    <section class="v8-section" id="ueber" style="padding-top:0;">
        <div class="v8-wrap">
            <div class="v8-about">
                <div class="v8-avatar" aria-hidden="true">AK</div>
                <div>
                    <h2>Hallo, ich bin Arthur.</h2>
                    <p>Ich studiere Digital Engineering und entwickle aus Lichtenstein (Sachsen) heraus Apps, Tools und Web-Projekte. Vom App Store über 734 Web-Tools bis zur IT-Hilfe vor Ort — alles aus einer Hand, persönlich und nahbar.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- ===== Kontakt-CTA ===== --}}
    <section class="v8-wrap">
        <div class="v8-cta">
            <h2>Projekt im Kopf? Schreib mir.</h2>
            <p>Ob App-Idee, Web-Tool, Hosting oder IT-Hilfe — erzähl mir, was du vorhast.</p>
            <a href="/kontakt" class="v8-btn"><i class="fa-solid fa-paper-plane"></i> Kontakt aufnehmen</a>
        </div>
    </section>

    {{-- ===== Footer-Mini ===== --}}
    <footer class="v8-foot">
        <div class="v8-foot-inner">
            <h3>Alle neun Welten</h3>
            <div class="v8-foot-links">
                <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>
            </div>
            <p class="v8-foot-copy">© {{ date('Y') }} Arthur Kotsch · Lichtenstein (Sachsen) · <a href="/kontakt" style="text-decoration:underline;">Kontakt</a></p>
        </div>
    </footer>

</div>

<script>
(function(){
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var cluster = document.getElementById('v8cluster');
    if (!cluster) return;
    var blobs = cluster.querySelectorAll('.v8-blob');
    window.addEventListener('mousemove', function(e){
        var r = cluster.getBoundingClientRect();
        var dx = (e.clientX - (r.left + r.width/2)) / r.width;
        var dy = (e.clientY - (r.top + r.height/2)) / r.height;
        blobs.forEach(function(b, i){
            var f = (i + 1) * 6;
            b.style.translate = (dx * f).toFixed(1) + 'px ' + (dy * f).toFixed(1) + 'px';
        });
    }, {passive:true});
})();
</script>

@endsection