@extends('layouts.app')

@section('title', 'Arthur Kotsch — Botanik | KOTSCH.TECH')
@section('meta_description', 'Arthur Kotsch, Student Digital Engineering aus Lichtenstein (Sachsen): 9 Welten, organisch erzählt — 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 */
    nav{display:none!important;} footer{display:none!important;} main{padding-top:0!important;}

    @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Mulish:wght@400;500;600;700&display=swap');

    .v17-page{
        --v17-cream:#F4F0E6;
        --v17-card:#FBF8F1;
        --v17-sage:#7C8C6E;
        --v17-sage-dk:#586349;
        --v17-terra:#C06A4B;
        --v17-terra-hi:#A8543A;
        --v17-moss:#2E3326;
        --v17-clay:#5C5A4E;
        --v17-leaf:#A9BD96;
        --v17-line:rgba(124,140,110,.35);
        --v17-ease:cubic-bezier(.4,0,.2,1);
        background:var(--v17-cream);
        color:var(--v17-clay);
        font-family:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
        font-size:1.05rem;
        line-height:1.7;
        -webkit-font-smoothing:antialiased;
        overflow-x:hidden;
        min-height:100vh;
    }
    .v17-page *{box-sizing:border-box;}
    .v17-page h1,.v17-page h2,.v17-page h3{
        font-family:'Fraunces',Georgia,serif;
        color:var(--v17-moss);
        font-weight:600;
        line-height:1.1;
        margin:0;
    }
    .v17-page a{color:inherit;text-decoration:none;}
    .v17-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.4rem);}

    /* ---------- Header ---------- */
    .v17-head{position:sticky;top:0;z-index:40;padding:.7rem 0;transition:box-shadow .4s var(--v17-ease),background .4s var(--v17-ease);}
    .v17-head.v17-stuck{background:rgba(244,240,230,.86);backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(88,99,73,.12);}
    .v17-head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
        background:rgba(251,248,241,.5);border:1px solid var(--v17-line);border-radius:60px;
        padding:.55rem 1.3rem;}
    .v17-brand{font-family:'Fraunces',serif;font-weight:600;font-size:1.18rem;color:var(--v17-moss);display:flex;align-items:center;gap:.55rem;}
    .v17-brand i{color:var(--v17-sage);font-size:.95rem;transition:transform .4s var(--v17-ease);}
    .v17-brand:hover i{transform:rotate(-12deg);}
    .v17-brand:hover{color:var(--v17-terra-hi);}
    .v17-nav{display:flex;align-items:center;gap:.4rem;}
    .v17-nav a{padding:.45rem .85rem;border-radius:40px;font-size:.92rem;font-weight:600;color:var(--v17-sage-dk);transition:.3s var(--v17-ease);letter-spacing:.02em;}
    .v17-nav a:hover{background:rgba(124,140,110,.16);color:var(--v17-moss);}
    .v17-nav a.v17-nav-cta{background:var(--v17-terra);color:#fff;}
    .v17-nav a.v17-nav-cta:hover{background:var(--v17-terra-hi);}
    @media(max-width:620px){.v17-nav a:not(.v17-nav-cta){display:none;}}

    /* ---------- Hero ---------- */
    .v17-hero{padding:clamp(2.6rem,7vw,5.5rem) 0 1rem;}
    .v17-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;}
    .v17-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--v17-sage-dk);background:rgba(169,189,150,.32);padding:.4rem .9rem;border-radius:40px;margin-bottom:1.2rem;}
    .v17-eyebrow i{color:var(--v17-terra);}
    .v17-hero h1{font-size:clamp(2.8rem,6vw,5rem);line-height:1.05;letter-spacing:-.01em;}
    .v17-hero h1 em{font-style:italic;color:var(--v17-sage-dk);}
    .v17-hero p.v17-lead{margin:1.3rem 0 1.9rem;max-width:36ch;color:var(--v17-clay);font-size:clamp(1.05rem,1.6vw,1.18rem);}
    .v17-cta-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;}
    .v17-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.6rem;border-radius:46px;font-weight:700;font-size:1rem;transition:.4s var(--v17-ease);}
    .v17-btn-primary{background:var(--v17-terra);color:#fff;box-shadow:0 10px 26px rgba(192,106,75,.32);}
    .v17-btn-primary:hover{background:var(--v17-terra-hi);transform:translateY(-2px);box-shadow:0 16px 34px rgba(192,106,75,.38);}
    .v17-btn-primary i{transition:transform .4s var(--v17-ease);}
    .v17-btn-primary:hover i{transform:translateX(4px);}
    .v17-btn-ghost{color:var(--v17-sage-dk);font-weight:700;}
    .v17-btn-ghost:hover{color:var(--v17-terra);}

    /* ---------- Signature Garten ---------- */
    .v17-garden{position:relative;width:100%;}
    .v17-garden svg{display:block;width:100%;height:auto;overflow:visible;}
    .v17-blob{transform-origin:center;animation:v17morph 14s ease-in-out infinite;}
    .v17-blob.b2{animation-duration:18s;animation-direction:reverse;}
    .v17-blob.b3{animation-duration:22s;}
    @keyframes v17morph{
        0%,100%{transform:scale(1) translate(0,0);}
        50%{transform:scale(1.04) translate(4px,-6px);}
    }
    .v17-stem{stroke-dasharray:240;stroke-dashoffset:240;animation:v17grow 2.6s var(--v17-ease) forwards;}
    .v17-stem.s2{animation-delay:.35s;}
    .v17-stem.s3{animation-delay:.7s;}
    .v17-stem.s4{animation-delay:1.05s;}
    @keyframes v17grow{to{stroke-dashoffset:0;}}
    .v17-leaf-lbl{opacity:0;animation:v17fade 1s var(--v17-ease) forwards;}
    .v17-leaf-lbl.l1{animation-delay:1.4s;}
    .v17-leaf-lbl.l2{animation-delay:1.7s;}
    .v17-leaf-lbl.l3{animation-delay:2s;}
    .v17-leaf-lbl.l4{animation-delay:2.3s;}
    @keyframes v17fade{to{opacity:1;}}
    .v17-leaf-lbl text{font-family:'Mulish',sans-serif;font-size:13px;font-weight:700;fill:var(--v17-sage-dk);}

    /* ---------- Organischer Trenner ---------- */
    .v17-wave{display:block;width:100%;height:auto;line-height:0;margin-top:-1px;}
    .v17-wave svg{display:block;width:100%;height:clamp(40px,7vw,80px);}

    /* ---------- Stats ---------- */
    .v17-stats{background:var(--v17-sage);color:#fff;padding:clamp(1.8rem,4vw,2.6rem) 0;}
    .v17-stats-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(.8rem,3vw,2rem);text-align:center;}
    .v17-stat{min-width:0;}
    .v17-stat-num{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2rem,5vw,3.1rem);line-height:1;display:inline-block;position:relative;color:#fff;}
    .v17-stat-num::after{content:"";position:absolute;left:8%;right:8%;bottom:-.32em;height:6px;
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M0 3 Q5 0 10 3 T20 3 T30 3 T40 3' stroke='%23A9BD96' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x center/40px 6px;opacity:.95;}
    .v17-stat-lbl{display:block;margin-top:.7rem;font-size:.86rem;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.86);}
    .v17-stat-sep{color:var(--v17-leaf);font-size:1.3rem;}
    @media(max-width:640px){.v17-stat-sep{display:none;}.v17-stats-in{gap:1.4rem 2rem;}.v17-stat{flex:1 1 40%;}}

    /* ---------- Welten ---------- */
    .v17-worlds{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,5vw,3.5rem);}
    .v17-sec-head{max-width:46ch;margin:0 auto clamp(2.2rem,5vw,3.4rem);text-align:center;}
    .v17-sec-head .v17-eyebrow{margin-bottom:.9rem;}
    .v17-sec-head h2{font-size:clamp(2rem,4.5vw,3.2rem);}
    .v17-sec-head p{margin:.9rem auto 0;color:var(--v17-clay);}
    .v17-beet{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.6vw,1.9rem);}
    .v17-beet>*{min-width:0;}
    .v17-card{background:var(--v17-card);border:1px solid var(--v17-line);
        border-radius:42% 58% 60% 40% / 45% 45% 55% 55%;
        padding:clamp(1.6rem,2.6vw,2.1rem) clamp(1.5rem,2.4vw,2rem);
        display:flex;flex-direction:column;gap:.7rem;position:relative;
        transition:transform .5s var(--v17-ease),box-shadow .5s var(--v17-ease),border-radius .5s var(--v17-ease),border-color .5s var(--v17-ease);}
    .v17-beet>*:nth-child(2){margin-top:clamp(0px,3.4vw,2.6rem);}
    .v17-beet>*:nth-child(3){margin-top:clamp(0px,1.6vw,1.2rem);}
    .v17-beet>*:nth-child(5){margin-top:clamp(0px,2.2vw,1.7rem);}
    .v17-beet>*:nth-child(7){margin-top:clamp(0px,1.2vw,.9rem);}
    .v17-beet>*:nth-child(9){margin-top:clamp(0px,2.8vw,2rem);}
    .v17-card:hover{transform:translateY(-4px);
        border-radius:55% 45% 42% 58% / 55% 55% 45% 45%;
        border-color:var(--v17-sage);
        box-shadow:0 12px 30px rgba(88,99,73,.18);}
    .v17-card-ico{width:46px;height:46px;color:var(--v17-sage);transition:transform .5s var(--v17-ease);}
    .v17-card:hover .v17-card-ico{transform:rotate(-4deg);}
    .v17-card-ico svg{width:100%;height:100%;display:block;}
    .v17-card h3{font-size:1.32rem;}
    .v17-card p{font-size:.97rem;line-height:1.6;color:var(--v17-clay);margin:0;flex:1;}
    .v17-card-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--v17-terra);font-size:.95rem;margin-top:.2rem;}
    .v17-card-link i{transition:transform .5s var(--v17-ease);}
    .v17-card:hover .v17-card-link i{transform:translateX(4px);}
    @media(max-width:880px){.v17-beet{grid-template-columns:repeat(2,1fr);}}
    @media(max-width:560px){.v17-beet{grid-template-columns:1fr;}.v17-beet>*{margin-top:0!important;}}

    /* ---------- Über / Kontakt ---------- */
    .v17-about{background:var(--v17-moss);color:var(--v17-cream);position:relative;overflow:hidden;
        padding:clamp(3rem,7vw,5rem) 0;}
    .v17-about::before{content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M20 70 Q45 20 70 70' stroke='%23A9BD96' stroke-width='2' fill='none'/%3E%3Cpath d='M45 70 V40' stroke='%23A9BD96' stroke-width='2'/%3E%3C/svg%3E");background-size:90px 90px;}
    .v17-about-in{position:relative;max-width:60ch;margin:0 auto;text-align:center;}
    .v17-about h2{color:var(--v17-cream);font-size:clamp(1.9rem,4vw,2.8rem);}
    .v17-about h2 em{font-style:italic;color:var(--v17-leaf);}
    .v17-about p{margin:1.3rem auto 2rem;color:rgba(244,240,230,.85);}
    .v17-about .v17-btn-primary{box-shadow:0 10px 26px rgba(0,0,0,.28);}

    /* ---------- Footer ---------- */
    .v17-foot{background:var(--v17-cream);padding:clamp(2.4rem,5vw,3.4rem) 0 2.4rem;}
    .v17-foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.6rem;align-items:flex-start;}
    .v17-foot-brand{font-family:'Fraunces',serif;font-weight:600;font-size:1.2rem;color:var(--v17-moss);}
    .v17-foot-brand span{display:block;font-family:'Mulish',sans-serif;font-size:.9rem;font-weight:500;color:var(--v17-clay);margin-top:.3rem;}
    .v17-foot-links{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;max-width:560px;}
    .v17-foot-links a{font-size:.92rem;font-weight:600;color:var(--v17-sage-dk);transition:color .3s var(--v17-ease);}
    .v17-foot-links a:hover{color:var(--v17-terra);}
    .v17-foot-copy{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--v17-line);font-size:.85rem;color:var(--v17-clay);}

    .v17-page :focus-visible{outline:3px solid var(--v17-terra);outline-offset:3px;border-radius:6px;}

    @media(max-width:860px){
        .v17-hero-grid{grid-template-columns:1fr;}
        .v17-garden{max-width:420px;margin:1.5rem auto 0;order:2;}
    }

    @media (prefers-reduced-motion:reduce){
        .v17-page *{animation:none!important;transition:none!important;}
        .v17-stem{stroke-dashoffset:0!important;}
        .v17-leaf-lbl{opacity:1!important;}
        .v17-blob{transform:none!important;}
    }
</style>

<div class="v17-page">

    <!-- Header -->
    <header class="v17-head" id="v17-head">
        <div class="v17-wrap">
            <div class="v17-head-in">
                <a href="/" class="v17-brand"><i class="fa-solid fa-seedling"></i> Arthur Kotsch</a>
                <nav class="v17-nav" aria-label="Hauptnavigation">
                    <a href="#welten">Welten</a>
                    <a href="#stats">Stats</a>
                    <a href="/kontakt" class="v17-nav-cta">Kontakt</a>
                </nav>
            </div>
        </div>
    </header>

    <!-- Hero -->
    <section class="v17-hero">
        <div class="v17-wrap">
            <div class="v17-hero-grid">
                <div>
                    <span class="v17-eyebrow"><i class="fa-solid fa-leaf"></i> Tech, die wächst</span>
                    <h1>Ich lasse digitale<br>Dinge <em>wachsen.</em></h1>
                    <p class="v17-lead">Arthur Kotsch — Student Digital Engineering &amp; Entwickler aus Lichtenstein (Sachsen). Neun Welten, aus einem Garten gewachsen.</p>
                    <div class="v17-cta-row">
                        <a href="#welten" class="v17-btn v17-btn-primary">Welten entdecken <i class="fa-solid fa-arrow-right"></i></a>
                        <a href="/kontakt" class="v17-btn v17-btn-ghost">→ Kontakt aufnehmen</a>
                    </div>
                </div>

                <!-- Signature: Der wachsende Garten -->
                <div class="v17-garden" aria-hidden="true">
                    <svg viewBox="0 0 460 420" xmlns="http://www.w3.org/2000/svg" role="img">
                        <!-- Blobs -->
                        <g>
                            <ellipse class="v17-blob b1" cx="230" cy="300" rx="180" ry="110" fill="#A9BD96" opacity=".55"/>
                            <ellipse class="v17-blob b2" cx="150" cy="290" rx="120" ry="90" fill="#7C8C6E" opacity=".5"/>
                            <ellipse class="v17-blob b3" cx="320" cy="310" rx="110" ry="80" fill="#C06A4B" opacity=".32"/>
                        </g>
                        <!-- Stängel -->
                        <path class="v17-stem s1" d="M200 360 C195 290 180 230 160 150" stroke="#586349" stroke-width="3.5" fill="none" stroke-linecap="round"/>
                        <path class="v17-stem s2" d="M240 360 C245 300 255 250 270 180" stroke="#586349" stroke-width="3.5" fill="none" stroke-linecap="round"/>
                        <path class="v17-stem s3" d="M215 340 C210 280 205 240 205 120" stroke="#586349" stroke-width="3" fill="none" stroke-linecap="round"/>
                        <path class="v17-stem s4" d="M260 350 C275 310 300 280 330 230" stroke="#586349" stroke-width="3" fill="none" stroke-linecap="round"/>
                        <!-- Blätter + Labels -->
                        <g class="v17-leaf-lbl l1">
                            <path d="M160 150 q-26 -14 -8 -40 q26 14 8 40Z" fill="#7C8C6E"/>
                            <text x="118" y="118">Apps</text>
                        </g>
                        <g class="v17-leaf-lbl l2">
                            <path d="M270 180 q26 -14 8 -42 q-26 14 -8 42Z" fill="#A9BD96"/>
                            <text x="284" y="150">Web-Tools</text>
                        </g>
                        <g class="v17-leaf-lbl l3">
                            <path d="M205 120 q-24 -16 -4 -42 q24 16 4 42Z" fill="#586349"/>
                            <text x="158" y="90">News</text>
                        </g>
                        <g class="v17-leaf-lbl l4">
                            <path d="M330 230 q28 -10 16 -40 q-28 10 -16 40Z" fill="#C06A4B"/>
                            <text x="346" y="206">Shop</text>
                        </g>
                    </svg>
                </div>
            </div>
        </div>
    </section>

    <!-- Organischer Trenner -->
    <div class="v17-wave" aria-hidden="true">
        <svg viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 40 C 180 80 360 0 540 30 C 720 60 900 10 1080 40 C 1260 70 1380 30 1440 45 L1440 80 L0 80 Z" fill="#7C8C6E"/>
        </svg>
    </div>

    <!-- Stats -->
    <section class="v17-stats" id="stats">
        <div class="v17-wrap">
            <div class="v17-stats-in">
                <div class="v17-stat">
                    <span class="v17-stat-num" data-count="22">22</span>
                    <span class="v17-stat-lbl">iOS &amp; Mac-Apps</span>
                </div>
                <i class="fa-solid fa-leaf v17-stat-sep" aria-hidden="true"></i>
                <div class="v17-stat">
                    <span class="v17-stat-num" data-count="9">9</span>
                    <span class="v17-stat-lbl">Windows-Tools</span>
                </div>
                <i class="fa-solid fa-leaf v17-stat-sep" aria-hidden="true"></i>
                <div class="v17-stat">
                    <span class="v17-stat-num" data-count="734">734</span>
                    <span class="v17-stat-lbl">Web-Tools</span>
                </div>
                <i class="fa-solid fa-leaf v17-stat-sep" aria-hidden="true"></i>
                <div class="v17-stat">
                    <span class="v17-stat-num" data-count="1412">1.412</span>
                    <span class="v17-stat-lbl">Artikel</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Welten -->
    <section class="v17-worlds" id="welten">
        <div class="v17-wrap">
            <div class="v17-sec-head">
                <span class="v17-eyebrow"><i class="fa-solid fa-seedling"></i> Neun Welten</span>
                <h2>Ein Beet aus Projekten</h2>
                <p>Jede Welt ist über die Jahre gewachsen — Apps, Tools, Inhalte und Hilfe, alle aus derselben Wurzel.</p>
            </div>

            <div class="v17-beet">

                <!-- 1 iOS & Mac -->
                <article class="v17-card">
                    <span class="v17-card-ico" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="M24 6 C30 14 38 16 38 26 C38 36 31 42 24 42 C17 42 10 36 10 26 C10 16 18 14 24 6Z" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M24 14 V40" stroke="currentColor" stroke-width="2.4"/></svg></span>
                    <h3>iOS &amp; Mac Apps</h3>
                    <p>22 Apps im App Store für iPhone, iPad und Mac — mit regelmäßigen Updates.</p>
                    <a class="v17-card-link" href="https://ios.kotsch.tech">→ besuchen <i class="fa-solid fa-arrow-right"></i></a>
                </article>

                <!-- 2 Windows -->
                <article class="v17-card">
                    <span class="v17-card-ico" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="M22 8 q-12 6 -12 18 t12 16 q-4 -8 -4 -16 t4 -18Z" fill="currentColor" opacity=".25"/><path d="M28 10 q12 4 12 16 t-12 14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/><path d="M22 8 q-12 6 -12 18 t12 16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg></span>
                    <h3>Windows</h3>
                    <p>9 Programme — Cleaner, Commander, Notes, Taskmanager &amp; CodeEditor. Direkt-Download.</p>
                    <a class="v17-card-link" href="https://windows.kotsch.tech">→ besuchen <i class="fa-solid fa-arrow-right"></i></a>
                </article>

                <!-- 3 Android -->
                <article class="v17-card">
                    <span class="v17-card-ico" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="M14 40 q10 -20 20 0" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/><circle cx="20" cy="22" r="2" fill="currentColor"/><circle cx="28" cy="22" r="2" fill="currentColor"/><path d="M18 14 l-4 -6 M30 14 l4 -6" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg></span>
                    <h3>Android</h3>
                    <p>Native Apps für Android — derzeit in Entwicklung und stetig im Wachsen.</p>
                    <a class="v17-card-link" href="https://android.kotsch.tech">→ besuchen <i class="fa-solid fa-arrow-right"></i></a>
                </article>

                <!-- 4 Web-Tools -->
                <article class="v17-card">
                    <span class="v17-card-ico" aria-hidden="true"><svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="16" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M8 24 H40 M24 8 q10 8 0 32 q-10 -24 0 -32" fill="none" stroke="currentColor" stroke-width="2.4"/></svg></span>
                    <h3>Web-Tools</h3>
                    <p>734 Tools direkt im Browser — ganz ohne Login und ohne Installation.</p>
                    <a class="v17-card-link" href="https://webtools.kotsch.tech">→ besuchen <i class="fa-solid fa-arrow-right"></i></a>
                </article>

                <!-- 5 Shop -->
                <article class="v17-card">
                    <span class="v17-card-ico" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="M12 16 H36 L33 38 H15 Z" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linejoin="round"/><path d="M18 16 q0 -8 6 -8 t6 8" fill="none" stroke="currentColor" stroke-width="2.4"/></svg></span>
                    <h3>Shop</h3>
                    <p>Digitale Produkte mit Sofort-Download — direkt geliefert, sobald du willst.</p>
                    <a class="v17-card-link" href="https://shop.kotsch.tech">→ besuchen <i class="fa-solid fa-arrow-right"></i></a>
                </article>

                <!-- 6 Hosting -->
                <article class="v17-card">
                    <span class="v17-card-ico" aria-hidden="true"><svg viewBox="0 0 48 48"><rect x="10" y="12" width="28" height="10" rx="5" fill="none" stroke="currentColor" stroke-width="2.4"/><rect x="10" y="26" width="28" height="10" rx="5" fill="none" stroke="currentColor" stroke-width="2.4"/><circle cx="16" cy="17" r="1.6" fill="currentColor"/><circle cx="16" cy="31" r="1.6" fill="currentColor"/></svg></span>
                    <h3>Hosting</h3>
                    <p>Managed Webhosting, vServer und VPS — DSGVO-konform betrieben.</p>
                    <a class="v17-card-link" href="https://hosting.kotsch.tech">→ besuchen <i class="fa-solid fa-arrow-right"></i></a>
                </article>

                <!-- 7 News -->
                <article class="v17-card">
                    <span class="v17-card-ico" aria-hidden="true"><svg viewBox="0 0 48 48"><rect x="10" y="10" width="28" height="28" rx="4" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M16 18 H32 M16 24 H32 M16 30 H26" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg></span>
                    <h3>News</h3>
                    <p>1.412 Ratgeber und Tutorials — verständlich erklärt, ständig erweitert.</p>
                    <a class="v17-card-link" href="https://news.kotsch.tech">→ besuchen <i class="fa-solid fa-arrow-right"></i></a>
                </article>

                <!-- 8 IT-Hilfe -->
                <article class="v17-card">
                    <span class="v17-card-ico" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="M24 8 a8 8 0 0 1 4 15 c-2 1 -2 3 -2 5 h-4 c0 -3 0 -5 3 -7 a4 4 0 1 0 -6 -3" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/><circle cx="24" cy="36" r="2" fill="currentColor"/></svg></span>
                    <h3>IT-Hilfe</h3>
                    <p>Vor Ort &amp; remote in der Region Glauchau–Lichtenstein. Keine Lösung = kein Preis.</p>
                    <a class="v17-card-link" href="https://it-hilfe.kotsch.tech">→ besuchen <i class="fa-solid fa-arrow-right"></i></a>
                </article>

                <!-- 9 Webdesign -->
                <article class="v17-card">
                    <span class="v17-card-ico" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="M14 34 L26 12 L32 22 L36 16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="34" r="3" fill="currentColor"/></svg></span>
                    <h3>Webdesign</h3>
                    <p>Studio für Websites — inklusive 20 Branchen-Demos zum Anschauen.</p>
                    <a class="v17-card-link" href="https://webdesign.kotsch.tech">→ besuchen <i class="fa-solid fa-arrow-right"></i></a>
                </article>

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

    <!-- Über / Kontakt -->
    <section class="v17-about">
        <div class="v17-wrap">
            <div class="v17-about-in">
                <h2>Lass etwas <em>Neues</em> wachsen.</h2>
                <p>Ob App, Website, Hosting oder IT-Hilfe in der Region — schreib mir, und wir finden gemeinsam heraus, was sich aus deiner Idee entwickeln lässt.</p>
                <a href="/kontakt" class="v17-btn v17-btn-primary">Kontakt aufnehmen <i class="fa-solid fa-arrow-right"></i></a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="v17-foot">
        <div class="v17-wrap">
            <div class="v17-foot-grid">
                <div class="v17-foot-brand">Arthur Kotsch<span>Student Digital Engineering · Lichtenstein (Sachsen)</span></div>
                <nav class="v17-foot-links" aria-label="Welten">
                    <a href="https://ios.kotsch.tech">iOS &amp; Mac</a>
                    <a href="https://windows.kotsch.tech">Windows</a>
                    <a href="https://android.kotsch.tech">Android</a>
                    <a href="https://webtools.kotsch.tech">Web-Tools</a>
                    <a href="https://shop.kotsch.tech">Shop</a>
                    <a href="https://hosting.kotsch.tech">Hosting</a>
                    <a href="https://news.kotsch.tech">News</a>
                    <a href="https://it-hilfe.kotsch.tech">IT-Hilfe</a>
                    <a href="https://webdesign.kotsch.tech">Webdesign</a>
                    <a href="/kontakt">Kontakt</a>
                </nav>
            </div>
            <div class="v17-foot-copy">© {{ date('Y') }} Arthur Kotsch — kotsch.tech · Tech, die wächst.</div>
        </div>
    </footer>

</div>

<script>
(function(){
    var head=document.getElementById('v17-head');
    var onScroll=function(){ if(head){ head.classList.toggle('v17-stuck', window.scrollY>20); } };
    window.addEventListener('scroll',onScroll,{passive:true}); onScroll();

    var reduce=window.matchMedia('(prefers-reduced-motion:reduce)').matches;
    var nums=document.querySelectorAll('.v17-stat-num');
    if(reduce || !('IntersectionObserver' in window)){ return; }
    var fmt=function(n){ return n.toLocaleString('de-DE'); };
    var io=new IntersectionObserver(function(entries){
        entries.forEach(function(e){
            if(!e.isIntersecting) return;
            var el=e.target, target=parseInt(el.getAttribute('data-count'),10), t0=null, dur=1300;
            io.unobserve(el);
            var step=function(ts){
                if(!t0) t0=ts;
                var p=Math.min((ts-t0)/dur,1);
                var eased=1-Math.pow(1-p,3);
                el.textContent=fmt(Math.round(target*eased));
                if(p<1) requestAnimationFrame(step);
            };
            requestAnimationFrame(step);
        });
    },{threshold:.5});
    nums.forEach(function(n){ io.observe(n); });
})();
</script>
@endsection