@extends('layouts.app')

@section('title', 'Arthur Kotsch — Aqua Optimism | KOTSCH.TECH')
@section('meta_description', 'Arthur Kotsch, Student Digital Engineering aus Lichtenstein (Sachsen): 9 Welten im Y2K-/Frutiger-Aero-Stil — 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 — diese Variante ist eine eigenständige Seite.
       Nur das globale Layout-Chrome treffen, NICHT den eigenen v12-Footer. */
    body > nav,
    nav.site-nav{display:none!important;}
    main > footer,
    body > footer{display:none!important;}
    main{padding-top:0!important;}

    .v12-page{
        --v12-sky1:#bfe6ff;
        --v12-sky2:#eaf7ff;
        --v12-white:#ffffff;
        --v12-aqua:#1f9eff;
        --v12-aqua-deep:#0a63d6;
        --v12-aqua-light:#3db4ff;
        --v12-green:#5fd35f;
        --v12-green-deep:#2fae5e;
        --v12-glass:rgba(255,255,255,0.55);
        --v12-glass-strong:rgba(255,255,255,0.72);
        --v12-shine:rgba(255,255,255,0.9);
        --v12-ink:#0c2a44;
        --v12-ink2:#4a6b85;
        --v12-cyan:#22c3d6;
        --v12-violet:#7c6cff;
        --v12-pink:#ff6fae;
        --v12-amber:#ffb02e;
        --v12-ease:cubic-bezier(.22,.61,.36,1);

        position:relative;
        overflow-x:hidden;
        min-height:100vh;
        color:var(--v12-ink);
        font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
        background:linear-gradient(180deg,#bfe6ff 0%,#eaf7ff 38%,#ffffff 78%);
        font-size:16px;
        line-height:1.6;
    }
    .v12-page *{box-sizing:border-box;}

    /* ── Schwebende Bubbles (Hintergrund) ── */
    .v12-bubbles{
        position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
    }
    .v12-bubble{
        position:absolute; bottom:-18vh; border-radius:50%;
        background:
            radial-gradient(circle at 32% 26%, rgba(255,255,255,.95), rgba(255,255,255,.35) 36%, rgba(31,158,255,.28) 60%, rgba(10,99,214,.18) 100%);
        box-shadow:inset 0 6px 14px rgba(255,255,255,.6), inset 0 -10px 18px rgba(10,99,214,.22), 0 10px 30px rgba(31,158,255,.18);
        opacity:.34;
        animation:v12-rise linear infinite;
    }
    .v12-bubble::after{
        content:""; position:absolute; top:14%; left:20%;
        width:30%; height:24%; border-radius:50%;
        background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
    }
    .v12-b1{width:130px;height:130px;left:6%;animation-duration:26s;animation-delay:-2s;}
    .v12-b2{width:80px;height:80px;left:24%;animation-duration:34s;animation-delay:-12s;opacity:.26;}
    .v12-b3{width:180px;height:180px;left:62%;animation-duration:40s;animation-delay:-6s;opacity:.22;}
    .v12-b4{width:60px;height:60px;left:82%;animation-duration:22s;animation-delay:-16s;opacity:.3;}
    .v12-b5{width:104px;height:104px;left:46%;animation-duration:30s;animation-delay:-22s;opacity:.24;}
    @keyframes v12-rise{
        0%{transform:translateY(0) translateX(0) scale(1);}
        50%{transform:translateY(-65vh) translateX(26px) scale(1.04);}
        100%{transform:translateY(-130vh) translateX(-12px) scale(.96);}
    }

    .v12-shell{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,32px);}

    /* ── Aqua-Pill (Signature-Button) ── */
    .v12-pill{
        display:inline-flex; align-items:center; gap:.5em; position:relative;
        padding:15px 32px; border-radius:999px; overflow:hidden;
        font:bold 16px "Segoe UI",Verdana,sans-serif; letter-spacing:-.01em;
        color:#fff; text-decoration:none; border:0; cursor:pointer;
        background:linear-gradient(var(--v12-aqua-light),var(--v12-aqua-deep));
        box-shadow:
            0 8px 20px rgba(10,99,214,.42),
            inset 0 1px 0 rgba(255,255,255,.6),
            inset 0 -8px 14px rgba(0,40,90,.35);
        transition:transform .25s var(--v12-ease), box-shadow .25s var(--v12-ease);
    }
    .v12-pill > span{position:relative; z-index:2;}
    .v12-pill .v12-gloss{
        position:absolute; inset:2px 2px 50% 2px; border-radius:999px; z-index:1;
        background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0));
        pointer-events:none;
        transform-origin:top;
        transition:transform .3s var(--v12-ease), opacity .3s var(--v12-ease);
    }
    .v12-pill:hover{
        transform:translateY(-2px);
        box-shadow:
            0 14px 28px rgba(10,99,214,.5),
            inset 0 1px 0 rgba(255,255,255,.75),
            inset 0 -8px 14px rgba(0,40,90,.35);
    }
    .v12-pill:hover .v12-gloss{transform:scaleY(1.12); opacity:1;}
    .v12-pill:focus-visible{outline:3px solid var(--v12-aqua-deep); outline-offset:3px;}

    .v12-pill-green{background:linear-gradient(#79e479,var(--v12-green-deep)); box-shadow:0 8px 20px rgba(47,174,94,.4),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -8px 14px rgba(0,70,40,.3);}
    .v12-pill-ghost{
        background:var(--v12-glass-strong); color:var(--v12-aqua-deep);
        box-shadow:0 8px 20px rgba(31,158,255,.2),inset 0 1px 0 #fff, inset 0 -6px 12px rgba(31,158,255,.12);
        border:1px solid rgba(255,255,255,.9);
        -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    }
    .v12-pill-ghost .v12-gloss{background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0));}
    .v12-pill-sm{padding:9px 18px; font-size:14px;}

    /* ── Header ── */
    .v12-header{position:sticky; top:14px; z-index:30; padding:0 clamp(12px,3vw,24px);}
    .v12-header-inner{
        max-width:1180px; margin:0 auto;
        display:flex; align-items:center; justify-content:space-between; gap:16px;
        padding:10px 12px 10px 22px; border-radius:999px;
        background:var(--v12-glass); border:1px solid rgba(255,255,255,.85);
        -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
        box-shadow:0 10px 30px rgba(31,158,255,.2), inset 0 1px 0 #fff;
    }
    .v12-brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--v12-ink); min-width:0;}
    .v12-logo{
        width:38px; height:38px; flex:0 0 auto; border-radius:13px; position:relative; overflow:hidden;
        display:grid; place-items:center; color:#fff; font-weight:800; font-size:18px;
        background:linear-gradient(var(--v12-aqua-light),var(--v12-aqua-deep));
        box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -6px 10px rgba(0,40,90,.35), 0 4px 12px rgba(10,99,214,.35);
        font-family:Verdana,sans-serif;
    }
    .v12-logo::after{content:""; position:absolute; inset:2px 2px 52% 2px; border-radius:11px; background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,0));}
    .v12-brand-name{font-weight:800; font-size:1.05rem; letter-spacing:-.02em; text-shadow:0 1px 0 #fff; white-space:nowrap;}
    .v12-brand-sub{display:block; font-size:.72rem; font-weight:600; color:var(--v12-ink2); letter-spacing:.01em;}

    /* ── Hero ── */
    .v12-hero{padding:clamp(44px,8vw,84px) 0 clamp(36px,6vw,64px); text-align:center;}
    .v12-eyebrow{
        display:inline-flex; align-items:center; gap:.5em;
        padding:7px 16px; border-radius:999px; margin-bottom:22px;
        font-size:.84rem; font-weight:700; color:var(--v12-aqua-deep);
        background:var(--v12-glass-strong); border:1px solid rgba(255,255,255,.9);
        box-shadow:inset 0 1px 0 #fff, 0 6px 16px rgba(31,158,255,.16);
        -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    }
    .v12-eyebrow i{color:var(--v12-green-deep);}
    .v12-h1{
        font-family:Verdana,Tahoma,"Segoe UI",sans-serif;
        font-weight:700; letter-spacing:-.025em; line-height:1.05;
        font-size:clamp(2.3rem,7vw,4.6rem); margin:0 auto;
        max-width:14ch; color:var(--v12-ink);
        text-shadow:0 1px 0 #fff, 0 2px 14px rgba(255,255,255,.6);
    }
    .v12-h1 .v12-grad{
        background:linear-gradient(120deg,var(--v12-aqua) 0%, var(--v12-aqua-deep) 55%, var(--v12-green-deep) 100%);
        -webkit-background-clip:text; background-clip:text; color:transparent;
        text-shadow:none;
    }
    .v12-lead{
        margin:22px auto 0; max-width:54ch; font-size:clamp(1.02rem,2.2vw,1.22rem);
        color:var(--v12-ink2); font-weight:500;
    }
    .v12-hero-cta{margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center;}

    /* Intro-Reveal (settled) */
    .v12-reveal{opacity:0; transform:translateY(16px); animation:v12-in .8s var(--v12-ease) forwards;}
    .v12-d1{animation-delay:.05s;} .v12-d2{animation-delay:.18s;} .v12-d3{animation-delay:.3s;} .v12-d4{animation-delay:.42s;} .v12-d5{animation-delay:.54s;}
    @keyframes v12-in{to{opacity:1; transform:none;}}

    /* ── Kennzahlen-Leiste ── */
    .v12-stats{
        display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.6vw,18px);
        margin:clamp(20px,4vw,40px) 0 clamp(34px,6vw,56px);
    }
    .v12-stat{
        min-width:0; text-align:center; padding:22px 12px 18px; border-radius:22px;
        background:var(--v12-glass); border:1px solid rgba(255,255,255,.8);
        -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
        box-shadow:0 10px 30px rgba(31,158,255,.18), inset 0 1px 0 #fff;
        transition:transform .25s var(--v12-ease);
    }
    .v12-stat:hover{transform:translateY(-3px);}
    .v12-stat-num{
        font-family:Verdana,Tahoma,sans-serif; font-weight:700; letter-spacing:-.02em;
        font-size:clamp(1.7rem,4.4vw,2.7rem); line-height:1;
        background:linear-gradient(var(--v12-aqua),var(--v12-aqua-deep));
        -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .v12-stat-lbl{margin-top:8px; font-size:clamp(.72rem,1.6vw,.86rem); font-weight:600; color:var(--v12-ink2);}

    /* ── Section-Header ── */
    .v12-sec{padding:clamp(18px,4vw,30px) 0;}
    .v12-sec-head{text-align:center; max-width:64ch; margin:0 auto clamp(28px,5vw,44px);}
    .v12-sec-title{
        font-family:Verdana,Tahoma,"Segoe UI",sans-serif; font-weight:700; letter-spacing:-.02em;
        font-size:clamp(1.7rem,4.6vw,2.7rem); margin:0; color:var(--v12-ink);
        text-shadow:0 1px 0 #fff;
    }
    .v12-sec-sub{margin:14px auto 0; color:var(--v12-ink2); font-size:1.04rem;}

    /* ── Welten-Grid ── */
    .v12-worlds{
        display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
        gap:clamp(14px,2vw,22px);
    }
    .v12-card{
        position:relative; min-width:0; display:flex; flex-direction:column;
        padding:24px 22px 22px; border-radius:24px;
        background:var(--v12-glass); border:1px solid rgba(255,255,255,.8);
        -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
        box-shadow:0 10px 30px rgba(31,158,255,.18), inset 0 1px 0 #fff;
        transition:transform .3s var(--v12-ease), box-shadow .3s var(--v12-ease);
        overflow:hidden;
    }
    .v12-card::before{
        content:""; position:absolute; left:0; right:0; top:0; height:46%; border-radius:24px 24px 60% 60%/24px 24px 22px 22px;
        background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));
        opacity:.6; pointer-events:none; transition:opacity .3s var(--v12-ease);
    }
    .v12-card:hover{
        transform:translateY(-6px);
        box-shadow:0 22px 48px rgba(31,158,255,.28), inset 0 1px 0 #fff;
    }
    .v12-card:hover::before{opacity:1;}
    .v12-card:focus-within{box-shadow:0 22px 48px rgba(31,158,255,.32), inset 0 1px 0 #fff, 0 0 0 3px var(--v12-aqua-deep);}

    .v12-icon{
        position:relative; width:58px; height:58px; flex:0 0 auto; border-radius:50%;
        display:grid; place-items:center; color:#fff; font-size:1.4rem; margin-bottom:16px;
        background:linear-gradient(var(--v12-i-light),var(--v12-i-deep));
        box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -8px 12px rgba(0,30,60,.3), 0 8px 18px rgba(10,99,214,.28);
        transition:transform .3s var(--v12-ease);
    }
    .v12-icon::after{
        content:""; position:absolute; top:8%; left:18%; width:42%; height:34%; border-radius:50%;
        background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%);
        transition:transform .3s var(--v12-ease), opacity .3s var(--v12-ease);
    }
    .v12-card:hover .v12-icon{transform:scale(1.06);}
    .v12-card:hover .v12-icon::after{transform:translate(2px,-1px) scale(1.15); opacity:.95;}
    .v12-icon i{position:relative; z-index:1; text-shadow:0 1px 1px rgba(0,30,60,.35);}

    .v12-card h3{
        font-family:Verdana,Tahoma,"Segoe UI",sans-serif; font-weight:700; letter-spacing:-.015em;
        font-size:1.2rem; margin:0 0 7px; color:var(--v12-ink);
    }
    .v12-card p{margin:0 0 18px; color:var(--v12-ink2); font-size:.96rem; flex:1 1 auto;}
    .v12-card-link{
        align-self:flex-start; text-decoration:none;
    }

    /* Icon-Farbvarianten */
    .v12-c-ios{--v12-i-light:#5bb8ff;--v12-i-deep:#0a63d6;}
    .v12-c-win{--v12-i-light:#7fd3ff;--v12-i-deep:#1f7fd6;}
    .v12-c-and{--v12-i-light:#79e479;--v12-i-deep:#2fae5e;}
    .v12-c-web{--v12-i-light:#54e0ec;--v12-i-deep:#0e98ad;}
    .v12-c-shop{--v12-i-light:#ffc35e;--v12-i-deep:#e08a00;}
    .v12-c-host{--v12-i-light:#9b8dff;--v12-i-deep:#5b46d6;}
    .v12-c-news{--v12-i-light:#ff97c4;--v12-i-deep:#d9447f;}
    .v12-c-it{--v12-i-light:#67d6ff;--v12-i-deep:#0a63d6;}
    .v12-c-wd{--v12-i-light:#83e6c0;--v12-i-deep:#16a373;}

    /* ── Über ── */
    .v12-about{
        position:relative; padding:clamp(28px,5vw,46px); border-radius:28px;
        background:var(--v12-glass-strong); border:1px solid rgba(255,255,255,.85);
        -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
        box-shadow:0 14px 40px rgba(31,158,255,.2), inset 0 1px 0 #fff;
        display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,38px); align-items:center;
    }
    .v12-about-photo{
        width:clamp(96px,18vw,150px); height:clamp(96px,18vw,150px); flex:0 0 auto; border-radius:50%;
        position:relative; display:grid; place-items:center; color:#fff;
        font-family:Verdana,Tahoma,sans-serif; font-weight:700; font-size:clamp(2rem,5vw,3.2rem); letter-spacing:-.02em;
        background:linear-gradient(var(--v12-aqua-light),var(--v12-aqua-deep));
        box-shadow:inset 0 2px 0 rgba(255,255,255,.7), inset 0 -12px 20px rgba(0,30,60,.3), 0 12px 26px rgba(10,99,214,.34);
    }
    .v12-about-photo::after{content:""; position:absolute; top:10%; left:18%; width:40%; height:30%; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%);}
    .v12-about h2{
        font-family:Verdana,Tahoma,"Segoe UI",sans-serif; font-weight:700; letter-spacing:-.02em;
        font-size:clamp(1.5rem,4vw,2.2rem); margin:0 0 12px; color:var(--v12-ink); text-shadow:0 1px 0 #fff;
    }
    .v12-about p{margin:0 0 12px; color:var(--v12-ink2);}
    .v12-about p:last-child{margin-bottom:0;}

    /* ── Kontakt-CTA ── */
    .v12-cta{
        margin:clamp(34px,6vw,60px) 0 clamp(20px,4vw,34px);
        text-align:center; padding:clamp(34px,6vw,58px) clamp(20px,4vw,40px); border-radius:30px;
        position:relative; overflow:hidden;
        background:linear-gradient(160deg,var(--v12-aqua) 0%, var(--v12-aqua-deep) 70%, #0a4ca8 100%);
        box-shadow:0 22px 50px rgba(10,99,214,.42), inset 0 2px 0 rgba(255,255,255,.4);
        color:#fff;
    }
    .v12-cta::before{
        content:""; position:absolute; left:0; right:0; top:0; height:50%;
        background:linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,0)); pointer-events:none;
    }
    .v12-cta h2{
        position:relative; font-family:Verdana,Tahoma,"Segoe UI",sans-serif; font-weight:700; letter-spacing:-.02em;
        font-size:clamp(1.7rem,4.8vw,2.7rem); margin:0; text-shadow:0 1px 2px rgba(0,30,60,.35);
    }
    .v12-cta p{position:relative; margin:14px auto 0; max-width:50ch; color:rgba(255,255,255,.92); font-size:1.05rem;}
    .v12-cta .v12-pill{margin-top:26px; position:relative; background:#fff; color:var(--v12-aqua-deep); box-shadow:0 12px 26px rgba(0,30,80,.3), inset 0 1px 0 #fff, inset 0 -6px 12px rgba(31,158,255,.18);}
    .v12-cta .v12-pill .v12-gloss{background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0));}

    /* ── Footer-Mini ── */
    .v12-foot{
        text-align:center; padding:clamp(24px,4vw,40px) 0 clamp(34px,5vw,54px); color:var(--v12-ink2);
        font-size:.9rem;
    }
    .v12-foot-links{display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; margin-bottom:16px;}
    .v12-foot-links a{color:var(--v12-aqua-deep); text-decoration:none; font-weight:600;}
    .v12-foot-links a:hover{text-decoration:underline;}
    .v12-foot a:focus-visible{outline:2px solid var(--v12-aqua-deep); outline-offset:2px; border-radius:4px;}

    /* ── Responsive ── */
    @media (max-width:720px){
        .v12-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
        .v12-about{grid-template-columns:1fr; text-align:center; justify-items:center;}
    }
    @media (max-width:430px){
        .v12-brand-sub{display:none;}
        .v12-pill{padding:13px 24px; font-size:15px;}
    }

    @media (prefers-reduced-motion:reduce){
        .v12-bubble{animation:none !important; display:none;}
        .v12-reveal{animation:none !important; opacity:1 !important; transform:none !important;}
        .v12-pill,.v12-card,.v12-stat,.v12-icon{transition:none !important;}
    }
</style>

<div class="v12-page">
    <div class="v12-bubbles" aria-hidden="true">
        <span class="v12-bubble v12-b1"></span>
        <span class="v12-bubble v12-b2"></span>
        <span class="v12-bubble v12-b3"></span>
        <span class="v12-bubble v12-b4"></span>
        <span class="v12-bubble v12-b5"></span>
    </div>

    {{-- ══ Header ══ --}}
    <header class="v12-header">
        <div class="v12-header-inner">
            <a class="v12-brand" href="#v12-top" aria-label="Arthur Kotsch — Startseite">
                <span class="v12-logo" aria-hidden="true">A</span>
                <span>
                    <span class="v12-brand-name">Arthur Kotsch</span>
                    <span class="v12-brand-sub">Software &amp; Web aus Sachsen</span>
                </span>
            </a>
            <a class="v12-pill v12-pill-sm" href="{{ route('kontakt') }}">
                <span class="v12-gloss" aria-hidden="true"></span>
                <span><i class="fas fa-paper-plane" aria-hidden="true"></i> Kontakt</span>
            </a>
        </div>
    </header>

    <a id="v12-top"></a>

    {{-- ══ Hero ══ --}}
    <section class="v12-hero">
        <div class="v12-shell">
            <span class="v12-eyebrow v12-reveal v12-d1"><i class="fas fa-water" aria-hidden="true"></i> Student Digital Engineering · Lichtenstein, Sachsen</span>
            <h1 class="v12-h1 v12-reveal v12-d2">Eine Welt voller <span class="v12-grad">Software.</span></h1>
            <p class="v12-lead v12-reveal v12-d3">Apps, Web-Tools, Hosting und IT-Hilfe — neun freundliche Welten von Arthur Kotsch, alles glänzend, klar und an einem Ort.</p>
            <div class="v12-hero-cta v12-reveal v12-d4">
                <a class="v12-pill" href="#v12-welten">
                    <span class="v12-gloss" aria-hidden="true"></span>
                    <span>Die 9 Welten entdecken</span>
                </a>
                <a class="v12-pill v12-pill-ghost" href="{{ route('kontakt') }}">
                    <span class="v12-gloss" aria-hidden="true"></span>
                    <span>Projekt anfragen</span>
                </a>
            </div>
        </div>
    </section>

    {{-- ══ Kennzahlen ══ --}}
    <div class="v12-shell">
        <div class="v12-stats v12-reveal v12-d5" role="list" aria-label="Kennzahlen">
            <div class="v12-stat" role="listitem">
                <div class="v12-stat-num">22</div>
                <div class="v12-stat-lbl">iOS- &amp; Mac-Apps</div>
            </div>
            <div class="v12-stat" role="listitem">
                <div class="v12-stat-num">9</div>
                <div class="v12-stat-lbl">Windows-Programme</div>
            </div>
            <div class="v12-stat" role="listitem">
                <div class="v12-stat-num">734</div>
                <div class="v12-stat-lbl">Web-Tools</div>
            </div>
            <div class="v12-stat" role="listitem">
                <div class="v12-stat-num">1.412</div>
                <div class="v12-stat-lbl">Artikel</div>
            </div>
        </div>
    </div>

    {{-- ══ Die 9 Welten ══ --}}
    <section class="v12-sec" id="v12-welten">
        <div class="v12-shell">
            <div class="v12-sec-head">
                <h2 class="v12-sec-title">Die 9 Welten</h2>
                <p class="v12-sec-sub">Jede Welt ist ein eigenes Stück KOTSCH.TECH — ein Klick führt zur jeweiligen Subdomain.</p>
            </div>

            <div class="v12-worlds">
                {{-- 1 iOS & Mac --}}
                <article class="v12-card v12-c-ios">
                    <span class="v12-icon" aria-hidden="true"><i class="fab fa-apple"></i></span>
                    <h3>iOS &amp; Mac Apps</h3>
                    <p>22 Apps im App Store (iPhone, iPad, Mac) mit regelmäßigen Updates.</p>
                    <a class="v12-pill v12-pill-sm v12-card-link" href="https://ios.kotsch.tech">
                        <span class="v12-gloss" aria-hidden="true"></span>
                        <span>Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </article>

                {{-- 2 Windows --}}
                <article class="v12-card v12-c-win">
                    <span class="v12-icon" aria-hidden="true"><i class="fab fa-windows"></i></span>
                    <h3>Windows</h3>
                    <p>9 Programme — Cleaner, Commander, Notes, Taskmanager, CodeEditor — als Direkt-Download.</p>
                    <a class="v12-pill v12-pill-sm v12-card-link" href="https://windows.kotsch.tech">
                        <span class="v12-gloss" aria-hidden="true"></span>
                        <span>Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </article>

                {{-- 3 Android --}}
                <article class="v12-card v12-c-and">
                    <span class="v12-icon" aria-hidden="true"><i class="fab fa-android"></i></span>
                    <h3>Android</h3>
                    <p>Native Apps für Android — aktuell in Entwicklung.</p>
                    <a class="v12-pill v12-pill-sm v12-pill-green v12-card-link" href="https://android.kotsch.tech">
                        <span class="v12-gloss" aria-hidden="true"></span>
                        <span>Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </article>

                {{-- 4 Web-Tools --}}
                <article class="v12-card v12-c-web">
                    <span class="v12-icon" aria-hidden="true"><i class="fas fa-toolbox"></i></span>
                    <h3>Web-Tools</h3>
                    <p>734 Tools direkt im Browser — ohne Login, ohne Installation.</p>
                    <a class="v12-pill v12-pill-sm v12-card-link" href="https://webtools.kotsch.tech">
                        <span class="v12-gloss" aria-hidden="true"></span>
                        <span>Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </article>

                {{-- 5 Shop --}}
                <article class="v12-card v12-c-shop">
                    <span class="v12-icon" aria-hidden="true"><i class="fas fa-bag-shopping"></i></span>
                    <h3>Shop</h3>
                    <p>Digitale Produkte mit Sofort-Download.</p>
                    <a class="v12-pill v12-pill-sm v12-card-link" href="https://shop.kotsch.tech">
                        <span class="v12-gloss" aria-hidden="true"></span>
                        <span>Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </article>

                {{-- 6 Hosting --}}
                <article class="v12-card v12-c-host">
                    <span class="v12-icon" aria-hidden="true"><i class="fas fa-server"></i></span>
                    <h3>Hosting</h3>
                    <p>Managed Webhosting sowie vServer/VPS — DSGVO-konform.</p>
                    <a class="v12-pill v12-pill-sm v12-card-link" href="https://hosting.kotsch.tech">
                        <span class="v12-gloss" aria-hidden="true"></span>
                        <span>Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </article>

                {{-- 7 News --}}
                <article class="v12-card v12-c-news">
                    <span class="v12-icon" aria-hidden="true"><i class="fas fa-newspaper"></i></span>
                    <h3>News</h3>
                    <p>1.412 Ratgeber &amp; Tutorials rund um Technik und Software.</p>
                    <a class="v12-pill v12-pill-sm v12-card-link" href="https://news.kotsch.tech">
                        <span class="v12-gloss" aria-hidden="true"></span>
                        <span>Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </article>

                {{-- 8 IT-Hilfe --}}
                <article class="v12-card v12-c-it">
                    <span class="v12-icon" aria-hidden="true"><i class="fas fa-headset"></i></span>
                    <h3>IT-Hilfe</h3>
                    <p>Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein — keine Lösung, kein Preis.</p>
                    <a class="v12-pill v12-pill-sm v12-card-link" href="https://it-hilfe.kotsch.tech">
                        <span class="v12-gloss" aria-hidden="true"></span>
                        <span>Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </article>

                {{-- 9 Webdesign --}}
                <article class="v12-card v12-c-wd">
                    <span class="v12-icon" aria-hidden="true"><i class="fas fa-pen-ruler"></i></span>
                    <h3>Webdesign</h3>
                    <p>Studio mit 20 Branchen-Demos für individuelle Websites.</p>
                    <a class="v12-pill v12-pill-sm v12-pill-green v12-card-link" href="https://webdesign.kotsch.tech">
                        <span class="v12-gloss" aria-hidden="true"></span>
                        <span>Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                </article>
            </div>
        </div>
    </section>

    {{-- ══ Über Arthur ══ --}}
    <section class="v12-sec">
        <div class="v12-shell">
            <div class="v12-about">
                <div class="v12-about-photo" aria-hidden="true">AK</div>
                <div>
                    <h2>Über Arthur</h2>
                    <p>Arthur Kotsch ist Student im Bereich Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Unter der Marke KOTSCH.TECH entstehen Apps, Web-Tools, Hosting-Angebote und Webdesign.</p>
                    <p>Vom App Store bis zur IT-Hilfe vor Ort: alles aus einer Hand, freundlich und verständlich — ganz im Geist des frühen Web-Optimismus.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- ══ Kontakt-CTA ══ --}}
    <section class="v12-shell">
        <div class="v12-cta">
            <h2>Lust auf ein Projekt?</h2>
            <p>Ob App, Website, Tool oder IT-Frage — schreib einfach. Antwort kommt schnell und ohne Fachchinesisch.</p>
            <a class="v12-pill" href="{{ route('kontakt') }}">
                <span class="v12-gloss" aria-hidden="true"></span>
                <span><i class="fas fa-paper-plane" aria-hidden="true"></i> Kontakt aufnehmen</span>
            </a>
        </div>
    </section>

    {{-- ══ Footer-Mini ══ --}}
    <footer class="v12-foot">
        <div class="v12-shell">
            <div class="v12-foot-links">
                <a href="https://ios.kotsch.tech">iOS &amp; Mac</a>
                <a href="https://windows.kotsch.tech">Windows</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="{{ route('kontakt') }}">Kontakt</a>
            </div>
            <div>&copy; {{ date('Y') }} KOTSCH.TECH — Arthur Kotsch, Lichtenstein (Sachsen)</div>
        </div>
    </footer>
</div>
@endsection