@extends('layouts.app')

@section('content')
<div class="v21-root v21-no-js">
<style>
    /* @import MUSS als erste Regel stehen, sonst ignoriert der Browser sie
       (CSS-Spez) und Inter wuerde nie geladen. */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

    /* ============================================================
       KOTSCH.TECH — Demo 21: SOFT-UI BENTO DER 9 WELTEN
       Neumorphes, ruhiges Bento-Raster. EIN Farbton, Hierarchie nur
       durch Groesse + Schatten-Tiefe. Akzent: Blau (Struktur) +
       Orange (genau EIN Hover-Moment). Header/Footer bleiben sichtbar.
       Alle Selektoren .v21- praefixiert. KEIN nav/footer/main-Reset.
       ============================================================ */

    .v21-root {
        --v21-bg: #F1F3F8;
        --v21-panel-hi: #FAFBFE;
        --v21-panel-lo: #EDF0F6;
        --v21-ink: #1C2433;
        --v21-soft: #5A6479;
        --v21-blue: var(--primary, #2563eb);
        --v21-orange: var(--accent-2, #FF5D2E);
        --v21-raise: 8px 8px 20px rgba(38,57,110,.12), -8px -8px 20px rgba(255,255,255,.9);
        --v21-raise-lg: 12px 12px 30px rgba(38,57,110,.16), -10px -10px 26px rgba(255,255,255,.95);
        --v21-inset: inset 5px 5px 12px rgba(38,57,110,.14), inset -5px -5px 12px rgba(255,255,255,.85);
        --v21-ease: cubic-bezier(0.16, 0.84, 0.44, 1);

        background: var(--v21-bg);
        color: var(--v21-ink);
        font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
        margin: 0;
        padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
        border-radius: clamp(20px, 3vw, 36px);
        position: relative;
        isolation: isolate;
    }

    .v21-root *,
    .v21-root *::before,
    .v21-root *::after { box-sizing: border-box; }

    .v21-wrap { max-width: 1180px; margin: 0 auto; }

    /* ---------- Reveal (No-JS-Fallback sichtbar) ---------- */
    .v21-rise { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--v21-ease), transform .9s var(--v21-ease); transition-delay: var(--v21-d, 0ms); }
    .v21-root.is-on .v21-rise { opacity: 1; transform: none; }
    .v21-no-js .v21-rise { opacity: 1; transform: none; }

    /* ---------- Soft-UI Bausteine ---------- */
    .v21-pill {
        display: inline-flex; align-items: center; gap: .55rem;
        padding: .5rem .95rem; border-radius: 999px;
        background: var(--v21-bg);
        box-shadow: var(--v21-inset);
        font-size: .8rem; font-weight: 600; letter-spacing: .01em;
        color: var(--v21-soft);
    }
    .v21-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--v21-orange);
        box-shadow: 0 0 0 3px rgba(255,93,46,.16);
    }

    .v21-btn {
        display: inline-flex; align-items: center; gap: .55rem;
        padding: .85rem 1.5rem; border-radius: 16px;
        font-weight: 700; font-size: .98rem; text-decoration: none;
        color: #fff; background: var(--v21-blue);
        box-shadow: 6px 6px 16px rgba(37,99,235,.28), -6px -6px 16px rgba(255,255,255,.9);
        transition: transform .25s var(--v21-ease), box-shadow .25s var(--v21-ease);
    }
    .v21-btn:hover { transform: translateY(-2px); box-shadow: 8px 8px 22px rgba(37,99,235,.34), -8px -8px 22px rgba(255,255,255,.95); }
    .v21-btn:active { transform: translateY(0); box-shadow: inset 4px 4px 10px rgba(20,40,120,.45), inset -3px -3px 8px rgba(120,150,255,.5); }
    .v21-btn:focus-visible { outline: 3px solid var(--v21-orange); outline-offset: 3px; }

    .v21-btn-ghost {
        display: inline-flex; align-items: center; gap: .5rem;
        padding: .8rem 1.4rem; border-radius: 16px;
        font-weight: 700; font-size: .95rem; text-decoration: none;
        color: var(--v21-ink); background: var(--v21-bg);
        box-shadow: var(--v21-raise);
        transition: transform .25s var(--v21-ease), box-shadow .25s var(--v21-ease);
    }
    .v21-btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--v21-raise-lg); }
    .v21-btn-ghost:active { box-shadow: var(--v21-inset); }
    .v21-btn-ghost:focus-visible { outline: 3px solid var(--v21-blue); outline-offset: 3px; }

    /* ---------- Intro ---------- */
    .v21-intro { text-align: center; max-width: 720px; margin: 0 auto clamp(2.2rem, 5vw, 3.4rem); }
    .v21-h1 {
        font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800;
        letter-spacing: -.03em; line-height: 1.04; text-wrap: balance;
        margin: 1.2rem 0 .9rem; color: var(--v21-ink);
    }
    .v21-h1 .v21-accent { color: var(--v21-blue); }
    .v21-lead { font-size: clamp(1rem, 2vw, 1.18rem); color: var(--v21-soft); line-height: 1.6; margin: 0 auto 1.6rem; max-width: 56ch; }
    .v21-intro-cta { display: inline-flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

    /* ---------- Bento-Raster ---------- */
    .v21-bento {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: clamp(.9rem, 1.6vw, 1.4rem);
        margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
    }

    .v21-tile {
        grid-column: span 4;
        min-width: 0;
        background: var(--v21-bg);
        border-radius: clamp(18px, 2vw, 26px);
        padding: clamp(1.2rem, 2.2vw, 1.8rem);
        box-shadow: var(--v21-raise);
        text-decoration: none; color: inherit;
        display: flex; flex-direction: column; gap: .7rem;
        position: relative;
        transition: transform .3s var(--v21-ease), box-shadow .3s var(--v21-ease);
    }
    .v21-tile:hover { transform: translateY(-4px); box-shadow: var(--v21-raise-lg); }
    .v21-tile:focus-visible { outline: 3px solid var(--v21-blue); outline-offset: 4px; }

    /* eingelassenes Rund-Icon -> bei Hover erhaben + Orange-Glow */
    .v21-ico {
        width: 52px; height: 52px; border-radius: 16px;
        display: grid; place-items: center;
        background: var(--v21-bg);
        box-shadow: var(--v21-inset);
        color: var(--v21-blue); font-size: 1.3rem;
        transition: box-shadow .3s var(--v21-ease), color .3s var(--v21-ease);
    }
    .v21-tile:hover .v21-ico {
        box-shadow: 5px 5px 12px rgba(38,57,110,.16), -5px -5px 12px rgba(255,255,255,.9), 0 0 0 3px rgba(255,93,46,.18);
        color: var(--v21-orange);
    }

    .v21-tile h3 { font-size: 1.05rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
    .v21-tile p { font-size: .92rem; color: var(--v21-soft); line-height: 1.55; margin: 0; }
    .v21-meta { font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--v21-blue); }

    .v21-arrow {
        margin-top: auto; display: inline-flex; align-items: center; gap: .4rem;
        font-size: .85rem; font-weight: 700; color: var(--v21-ink);
    }
    .v21-arrow i { transition: transform .25s var(--v21-ease); color: var(--v21-blue); }
    .v21-tile:hover .v21-arrow i { transform: translateX(4px); }

    /* Flaggschiff Web-Tools */
    .v21-flag { grid-column: span 6; grid-row: span 2; }
    .v21-flag h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
    .v21-flag p { font-size: 1rem; max-width: 46ch; }
    .v21-flag .v21-ico { width: 60px; height: 60px; font-size: 1.5rem; }

    /* Mini-Matrix neumorpher Tool-Mulden */
    .v21-matrix {
        display: grid; grid-template-columns: repeat(4, 1fr);
        gap: .6rem; margin: .4rem 0 .2rem;
    }
    .v21-cell {
        aspect-ratio: 1.6 / 1; border-radius: 12px;
        background: var(--v21-bg);
        box-shadow: var(--v21-inset);
        display: grid; place-items: center;
        color: var(--v21-soft); font-size: .85rem;
    }

    .v21-flag-cta {
        align-self: flex-start; margin-top: .6rem;
        display: inline-flex; align-items: center; gap: .5rem;
        padding: .75rem 1.3rem; border-radius: 14px;
        font-weight: 700; font-size: .92rem; color: var(--v21-blue);
        background: var(--v21-bg); box-shadow: var(--v21-raise);
        transition: box-shadow .2s var(--v21-ease), transform .2s var(--v21-ease);
    }
    .v21-tile:hover .v21-flag-cta { box-shadow: var(--v21-raise-lg); }

    /* breit-flache Kacheln */
    .v21-wide { grid-column: span 6; }
    .v21-half { grid-column: span 6; }

    /* ---------- Kennzahlen-Leiste ---------- */
    .v21-stats {
        background: var(--v21-bg);
        border-radius: clamp(18px, 2.4vw, 28px);
        padding: clamp(1.4rem, 3vw, 2.2rem);
        box-shadow: var(--v21-raise);
        display: grid; grid-template-columns: repeat(4, 1fr);
        gap: clamp(.8rem, 2vw, 1.4rem);
        margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
    }
    .v21-stat {
        background: var(--v21-bg); border-radius: 16px;
        padding: clamp(1rem, 2vw, 1.4rem); text-align: center;
        box-shadow: var(--v21-inset); min-width: 0;
    }
    .v21-stat .v21-num {
        font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800;
        color: var(--v21-blue); font-variant-numeric: tabular-nums;
        letter-spacing: -.02em; line-height: 1;
    }
    .v21-stat .v21-lab { display: block; margin-top: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v21-soft); }

    /* ---------- Ueber + Schluss-CTA ---------- */
    .v21-bottom {
        display: grid; grid-template-columns: 1.1fr 1fr;
        gap: clamp(1rem, 2.4vw, 1.6rem);
    }
    .v21-about, .v21-cta {
        background: var(--v21-bg); border-radius: clamp(18px, 2.4vw, 28px);
        padding: clamp(1.6rem, 3.2vw, 2.6rem); box-shadow: var(--v21-raise);
        min-width: 0;
    }
    .v21-about h2, .v21-cta h2 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .8rem; }
    .v21-about p, .v21-cta p { color: var(--v21-soft); line-height: 1.65; margin: 0 0 1rem; font-size: .98rem; }
    .v21-region { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--v21-soft); }
    .v21-region i { color: var(--v21-blue); }
    .v21-cta { display: flex; flex-direction: column; }

    /* ---------- Responsive ---------- */
    @media (max-width: 920px) {
        .v21-bento { grid-template-columns: repeat(2, 1fr); }
        .v21-flag { grid-column: 1 / -1; grid-row: auto; order: -1; }
        .v21-tile { grid-column: span 1; }
        .v21-wide, .v21-half { grid-column: 1 / -1; }
        .v21-stats { grid-template-columns: repeat(2, 1fr); }
        .v21-bottom { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
        .v21-bento { grid-template-columns: 1fr; }
        .v21-tile, .v21-flag { grid-column: 1 / -1; }
        .v21-matrix { grid-template-columns: repeat(4, 1fr); }
    }

    @media (prefers-reduced-motion: reduce) {
        .v21-root .v21-rise { opacity: 1 !important; transform: none !important; }
        .v21-root *, .v21-root *::before, .v21-root *::after { transition: box-shadow .2s linear !important; }
        .v21-tile:hover, .v21-btn:hover, .v21-btn-ghost:hover { transform: none !important; }
        .v21-tile:hover .v21-arrow i { transform: none !important; }
    }
</style>

    <div class="v21-wrap">

        <!-- 1. INTRO -->
        <header class="v21-intro">
            <span class="v21-pill v21-rise"><span class="v21-dot" aria-hidden="true"></span> Arthur Kotsch &middot; Digital Engineering &middot; Lichtenstein</span>
            <h1 class="v21-h1 v21-rise" style="--v21-d:80ms">Eine Marke. <span class="v21-accent">Neun Welten.</span></h1>
            <p class="v21-lead v21-rise" style="--v21-d:160ms">Software, native Apps, Web-Tools, Hosting und IT-Hilfe &mdash; alles aus einer Hand, persoenlich gebaut von Arthur Kotsch, Student Digital Engineering aus Lichtenstein (Sachsen).</p>
            <div class="v21-intro-cta v21-rise" style="--v21-d:240ms">
                <a class="v21-btn" href="/kontakt">Kontakt <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                <a class="v21-btn-ghost" href="https://webtools.kotsch.tech">734 Web-Tools ansehen</a>
            </div>
        </header>

        <!-- 2. SIGNATURE: BENTO DER 9 WELTEN -->
        <section class="v21-bento" aria-label="Die neun Welten von KOTSCH.TECH">

            <!-- Flaggschiff: Web-Tools -->
            <a class="v21-tile v21-flag v21-rise" href="https://webtools.kotsch.tech">
                <span class="v21-ico" aria-hidden="true"><i class="fa-solid fa-toolbox"></i></span>
                <span class="v21-meta">Flaggschiff &middot; 734 Tools</span>
                <h3>Web-Tools</h3>
                <p>734 Tools direkt im Browser &mdash; ganz ohne Login oder Installation. Vom Rechner bis zum Konverter, sofort einsatzbereit.</p>
                <div class="v21-matrix" aria-hidden="true">
                    <span class="v21-cell"><i class="fa-solid fa-calculator"></i></span>
                    <span class="v21-cell"><i class="fa-solid fa-right-left"></i></span>
                    <span class="v21-cell"><i class="fa-solid fa-key"></i></span>
                    <span class="v21-cell"><i class="fa-solid fa-palette"></i></span>
                    <span class="v21-cell"><i class="fa-solid fa-code"></i></span>
                    <span class="v21-cell"><i class="fa-solid fa-image"></i></span>
                    <span class="v21-cell"><i class="fa-solid fa-clock"></i></span>
                    <span class="v21-cell"><i class="fa-solid fa-ruler"></i></span>
                    <span class="v21-cell"><i class="fa-solid fa-percent"></i></span>
                    <span class="v21-cell"><i class="fa-solid fa-qrcode"></i></span>
                    <span class="v21-cell"><i class="fa-solid fa-font"></i></span>
                    <span class="v21-cell"><i class="fa-solid fa-ellipsis"></i></span>
                </div>
                <span class="v21-flag-cta">Tools oeffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- iOS & Mac -->
            <a class="v21-tile v21-rise" style="--v21-d:60ms" href="https://ios.kotsch.tech">
                <span class="v21-ico" aria-hidden="true"><i class="fa-brands fa-apple"></i></span>
                <span class="v21-meta">22 Apps</span>
                <h3>iOS &amp; Mac Apps</h3>
                <p>22 Apps im App Store fuer iPhone, iPad und Mac &mdash; mit regelmaessigen Updates.</p>
                <span class="v21-arrow">ios.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- News (breit-flach) -->
            <a class="v21-tile v21-wide v21-rise" style="--v21-d:120ms" href="https://news.kotsch.tech">
                <span class="v21-ico" aria-hidden="true"><i class="fa-solid fa-newspaper"></i></span>
                <span class="v21-meta">1.412 Beitraege</span>
                <h3>News</h3>
                <p>1.412 Ratgeber &amp; Tutorials rund um Technik, Software und den digitalen Alltag.</p>
                <span class="v21-arrow">news.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- Windows -->
            <a class="v21-tile v21-rise" style="--v21-d:80ms" href="https://windows.kotsch.tech">
                <span class="v21-ico" aria-hidden="true"><i class="fa-brands fa-windows"></i></span>
                <span class="v21-meta">9 Programme</span>
                <h3>Windows</h3>
                <p>9 Programme &mdash; Cleaner, Commander, Notes, Taskmanager, CodeEditor. Direkt-Download.</p>
                <span class="v21-arrow">windows.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- Android -->
            <a class="v21-tile v21-rise" style="--v21-d:140ms" href="https://android.kotsch.tech">
                <span class="v21-ico" aria-hidden="true"><i class="fa-brands fa-android"></i></span>
                <span class="v21-meta">In Entwicklung</span>
                <h3>Android</h3>
                <p>Native Apps fuer Android &mdash; aktuell in Entwicklung.</p>
                <span class="v21-arrow">android.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- Shop -->
            <a class="v21-tile v21-rise" style="--v21-d:100ms" href="https://shop.kotsch.tech">
                <span class="v21-ico" aria-hidden="true"><i class="fa-solid fa-bag-shopping"></i></span>
                <span class="v21-meta">Sofort-Download</span>
                <h3>Shop</h3>
                <p>Digitale Produkte mit sofortigem Download &mdash; ohne Wartezeit.</p>
                <span class="v21-arrow">shop.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- Hosting -->
            <a class="v21-tile v21-rise" style="--v21-d:160ms" href="https://hosting.kotsch.tech">
                <span class="v21-ico" aria-hidden="true"><i class="fa-solid fa-server"></i></span>
                <span class="v21-meta">DSGVO-konform</span>
                <h3>Hosting</h3>
                <p>Managed Webhosting, vServer &amp; VPS &mdash; DSGVO-konform betrieben.</p>
                <span class="v21-arrow">hosting.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- IT-Hilfe -->
            <a class="v21-tile v21-rise" style="--v21-d:180ms" href="https://it-hilfe.kotsch.tech">
                <span class="v21-ico" aria-hidden="true"><i class="fa-solid fa-headset"></i></span>
                <span class="v21-meta">Vor Ort &amp; Remote</span>
                <h3>IT-Hilfe</h3>
                <p>Vor Ort &amp; Remote in der Region Glauchau&ndash;Lichtenstein &mdash; &bdquo;keine Loesung = kein Preis&ldquo;.</p>
                <span class="v21-arrow">it-hilfe.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <!-- Webdesign (breit-flach) -->
            <a class="v21-tile v21-wide v21-rise" style="--v21-d:200ms" href="https://webdesign.kotsch.tech">
                <span class="v21-ico" aria-hidden="true"><i class="fa-solid fa-pen-ruler"></i></span>
                <span class="v21-meta">Studio &amp; 20 Demos</span>
                <h3>Webdesign</h3>
                <p>Studio fuer moderne Websites &mdash; inklusive 20 Branchen-Demos zum Durchklicken.</p>
                <span class="v21-arrow">webdesign.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

        </section>

        <!-- 3. KENNZAHLEN -->
        <section class="v21-stats v21-rise" aria-label="Kennzahlen">
            <div class="v21-stat"><span class="v21-num">22</span><span class="v21-lab">iOS / Mac Apps</span></div>
            <div class="v21-stat"><span class="v21-num">9</span><span class="v21-lab">Windows-Tools</span></div>
            <div class="v21-stat"><span class="v21-num">734</span><span class="v21-lab">Web-Tools</span></div>
            <div class="v21-stat"><span class="v21-num">1.412</span><span class="v21-lab">Artikel</span></div>
        </section>

        <!-- 4. UEBER + SCHLUSS-CTA -->
        <section class="v21-bottom">
            <div class="v21-about v21-rise">
                <h2>Eine Person, neun Disziplinen</h2>
                <p>Hinter KOTSCH.TECH steht Arthur Kotsch &mdash; Student Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Apps, Web-Tools, Hosting und IT-Hilfe entstehen alle aus einer Hand: ruhig, sorgfaeltig und ohne Umwege.</p>
                <span class="v21-region"><i class="fa-solid fa-location-dot" aria-hidden="true"></i> Region Glauchau&ndash;Lichtenstein, Sachsen</span>
            </div>
            <div class="v21-cta v21-rise" style="--v21-d:100ms">
                <h2>Projekt im Kopf?</h2>
                <p>Ob App, Website, Hosting oder IT-Hilfe vor Ort &mdash; schreib mir kurz, und wir finden gemeinsam den passenden Weg.</p>
                <a class="v21-btn" href="/kontakt" style="align-self:flex-start;margin-top:auto;">Kontakt aufnehmen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
            </div>
        </section>

    </div>
</div>

<script>
(function () {
    var root = document.querySelector('.v21-root');
    if (!root) return;
    root.classList.remove('v21-no-js');
    if (!('IntersectionObserver' in window)) { root.classList.add('is-on'); return; }
    var io = new IntersectionObserver(function (entries) {
        entries.forEach(function (e) {
            if (e.isIntersecting) { root.classList.add('is-on'); io.disconnect(); }
        });
    }, { threshold: 0.05 });
    io.observe(root);
})();
</script>
@endsection