@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Software, Apps & Webdesign')
@section('meta_description', 'KOTSCH.TECH von Arthur Kotsch: Windows-Software, iOS-, Mac- & Android-Apps, Webdesign, kostenlose Webtools, News, Shop, Hosting und IT-Hilfe - sauber gebaut.')
@section('og_title', 'KOTSCH.TECH - Software, Apps, Webdesign & Tools von Arthur Kotsch')
@section('og_description', 'Eine Marke, viele Disziplinen: Softwareentwicklung, Apps für iOS, macOS & Android, Webdesign, Webtools, News, Shop, Hosting und IT-Hilfe von Arthur Kotsch.')
@section('twitter_title', 'KOTSCH.TECH - Die Tech-Marke von Arthur Kotsch')
@section('twitter_description', 'Software, Apps, Webdesign, Webtools, News, Shop, Hosting und persönliche IT-Hilfe. Alles aus einer Hand, sauber umgesetzt von Arthur Kotsch.')

@section('content')
<div class="v3-home">
<style>
    /* ============================================================
       KOTSCH.TECH - Variante 3: Sticky-Stack-Cards (Karten-Deck)
       Jeder Bereich ist eine vollflaechige Karte, die beim Scrollen
       oben andockt; die naechste schiebt sich darueber (Deck-Effekt).
       Alle Selektoren mit .v3- praefixiert (keine Kollision mit app.css).
       WICHTIG: KEIN overflow:hidden/clip an einem Vorfahren der
       Sticky-Karten - das wuerde position:sticky deaktivieren.
       ============================================================ */

    .v3-home {
        --v3-ink: var(--text-main);
        --v3-soft: var(--text-muted);
        --v3-faint: var(--text-light);
        --v3-rule: var(--border);
        --v3-paper: var(--bg);
        --v3-paper-2: var(--bg-light);
        --v3-night: var(--bg-dark);
        --v3-blue: var(--primary);
        --v3-blue-dk: var(--primary-dark);
        --v3-blue-lt: var(--primary-light);
        --v3-violet: var(--accent);
        --v3-soft-blue: var(--primary-soft);
        --v3-glow: var(--primary-glow);
        --v3-r: 28px;
        --v3-r-lg: 36px;
        --v3-shadow: 0 -6px 0 rgba(255, 255, 255, 0.9), 0 30px 70px -34px rgba(15, 23, 42, 0.42);
        --v3-gutter: clamp(1.2rem, 4.5vw, 4.5rem);
        --v3-grad: linear-gradient(120deg, var(--v3-blue) 0%, var(--v3-violet) 52%, var(--v3-blue-lt) 100%);
        /* Andock-Offset unter der globalen 92px-Navi */
        --v3-dock: 110px;
        color: var(--v3-ink);
        background: var(--v3-paper);
        position: relative;
        /* KEIN overflow-clip hier (Sticky-Vorfahr)! */
    }

    /* dezenter Raster-Hintergrund hinter dem ganzen Deck */
    .v3-home::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
            linear-gradient(rgba(226, 232, 240, 0.5) 1px, transparent 1px),
            linear-gradient(90deg, rgba(226, 232, 240, 0.5) 1px, transparent 1px);
        background-size: 64px 64px;
        mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.5), transparent 78%);
        opacity: 0.7;
    }

    .v3-home > * { position: relative; z-index: 1; }

    /* ---------- Reveal: JS-frei sichtbar, mit IO sanfter ---------- */
    .v3-reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.8s cubic-bezier(0.16, 0.84, 0.44, 1),
                    transform 0.8s cubic-bezier(0.16, 0.84, 0.44, 1);
        transition-delay: var(--v3-d, 0ms);
    }
    .v3-reveal.active { opacity: 1; transform: none; }

    /* ============================================================
       HERO
       ============================================================ */
    .v3-hero {
        position: relative;
        padding: calc(var(--v3-dock) + 36px) var(--v3-gutter) clamp(3rem, 7vw, 6rem);
        text-align: center;
        background:
            radial-gradient(circle at 50% -10%, var(--v3-glow), transparent 46%),
            linear-gradient(180deg, #ffffff 0%, var(--v3-paper-2) 100%);
        border-bottom: 1px solid var(--v3-rule);
    }

    .v3-hero-inner {
        width: min(100%, 980px);
        margin-inline: auto;
        display: grid;
        justify-items: center;
        gap: clamp(1.4rem, 3vw, 2rem);
    }

    .v3-chip {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 9px 18px;
        border: 1px solid rgba(37, 99, 235, 0.2);
        border-radius: 999px;
        background: rgba(239, 246, 255, 0.95);
        color: var(--v3-blue);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }
    .v3-chip i { font-size: 0.85em; }
    .v3-chip .v3-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--v3-blue);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
        animation: v3-pulse 2.4s ease-in-out infinite;
    }
    @keyframes v3-pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(0.6); opacity: 0.55; }
    }

    .v3-hero h1 {
        margin: 0;
        font-size: clamp(2.6rem, 8.5vw, 5.4rem);
        font-weight: 800;
        line-height: 0.96;
        letter-spacing: -0.045em;
        color: var(--v3-ink);
    }
    .v3-hero h1 .v3-grad {
        background: var(--v3-grad);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
    .v3-hero h1 .v3-name {
        display: block;
        margin-top: 0.18em;
        font-size: clamp(0.92rem, 2.2vw, 1.4rem);
        font-weight: 700;
        letter-spacing: 0.02em;
        color: var(--v3-soft);
    }

    .v3-lead {
        margin: 0;
        max-width: 64ch;
        font-size: clamp(1.04rem, 2vw, 1.26rem);
        line-height: 1.7;
        color: var(--v3-soft);
    }

    .v3-cta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        justify-content: center;
    }
    .v3-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 15px 26px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 1rem;
        text-decoration: none;
        border: 1px solid transparent;
        transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
        min-height: var(--tap-min, 48px);
    }
    .v3-btn-primary {
        background: var(--v3-grad);
        background-size: 160% 160%;
        color: #fff;
        box-shadow: 0 18px 40px -18px var(--v3-glow);
        animation: v3-shift 9s ease infinite;
    }
    @keyframes v3-shift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    .v3-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -18px var(--v3-glow); }
    .v3-btn-ghost {
        background: #fff;
        color: var(--v3-ink);
        border-color: var(--v3-rule);
        box-shadow: var(--shadow-soft);
    }
    .v3-btn-ghost:hover { transform: translateY(-3px); border-color: var(--v3-blue); color: var(--v3-blue); }
    .v3-btn:focus-visible { outline: 3px solid var(--v3-blue); outline-offset: 3px; }

    /* Hero-Metriken */
    .v3-stats {
        display: flex;
        flex-wrap: wrap;
        gap: clamp(1.4rem, 4vw, 3.2rem);
        justify-content: center;
        margin-top: 0.6rem;
        padding-top: 1.6rem;
        border-top: 1px solid var(--v3-rule);
        width: min(100%, 720px);
    }
    .v3-stat { display: grid; gap: 2px; }
    .v3-stat b {
        font-size: clamp(1.5rem, 4vw, 2.1rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
        background: var(--v3-grad);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
    .v3-stat span { font-size: 0.82rem; color: var(--v3-soft); font-weight: 600; }

    /* Sprung-Navigation (KEIN <nav>! -> div role=navigation) */
    .v3-jump {
        margin-top: 0.4rem;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        max-width: 760px;
    }
    .v3-jump a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 999px;
        border: 1px solid var(--v3-rule);
        background: #fff;
        color: var(--v3-soft);
        font-size: 0.8rem;
        font-weight: 700;
        text-decoration: none;
        transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .v3-jump a:hover { color: var(--v3-blue); border-color: var(--v3-blue); background: var(--v3-soft-blue); }
    .v3-jump a:focus-visible { outline: 2px solid var(--v3-blue); outline-offset: 2px; }
    .v3-jump a i { font-size: 0.82em; color: var(--v3-blue); }

    /* ============================================================
       DECK / STICKY-STACK
       Jede Karte ist sticky und dockt unter der Navi an. Durch den
       gestaffelten top-Offset entsteht der "abgesetzte Stapel"-Look.
       ============================================================ */
    .v3-deck {
        /* KEIN overflow hier! */
        padding: clamp(2.2rem, 5vw, 4rem) var(--v3-gutter) 0;
        display: flex;
        flex-direction: column;
        gap: clamp(2rem, 4vw, 3rem);
    }

    .v3-deck-intro {
        width: min(100%, var(--container-width));
        margin-inline: auto;
        text-align: center;
        display: grid;
        gap: 0.7rem;
        justify-items: center;
        padding-bottom: clamp(1rem, 3vw, 2rem);
    }
    .v3-eyebrow {
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--v3-blue);
    }
    .v3-deck-intro h2 {
        margin: 0;
        font-size: clamp(1.7rem, 4.4vw, 2.7rem);
        font-weight: 800;
        letter-spacing: -0.035em;
        line-height: 1.06;
    }
    .v3-deck-intro p {
        margin: 0;
        max-width: 60ch;
        color: var(--v3-soft);
        font-size: clamp(1rem, 1.8vw, 1.12rem);
        line-height: 1.65;
    }

    .v3-card {
        position: sticky;
        top: var(--v3-dock);
        width: min(100%, var(--container-width));
        margin-inline: auto;
        border-radius: var(--v3-r-lg);
        background: #fff;
        border: 1px solid var(--v3-rule);
        box-shadow: var(--v3-shadow);
        /* overflow:hidden ist HIER erlaubt: die Karte ist das Sticky-
           Element selbst, kein Vorfahr davon. Rundet die Innenecken. */
        overflow: hidden;
        will-change: transform;
    }

    .v3-card-grid {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        min-height: clamp(440px, 64vh, 560px);
    }

    .v3-card-body {
        padding: clamp(1.8rem, 4vw, 3.4rem);
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        justify-content: center;
    }

    .v3-card-num {
        display: inline-flex;
        align-items: baseline;
        gap: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-size: 0.76rem;
        color: var(--v3-soft);
    }
    .v3-card-num b {
        font-size: 1rem;
        color: var(--v3-blue);
        font-variant-numeric: tabular-nums;
    }

    .v3-card-icon {
        width: 60px; height: 60px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: #fff;
        background: var(--v3-grad);
        box-shadow: 0 16px 34px -16px var(--v3-glow);
    }

    .v3-card h3 {
        margin: 0;
        font-size: clamp(1.5rem, 3.4vw, 2.3rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.05;
    }
    .v3-card-body > p {
        margin: 0;
        max-width: 52ch;
        color: var(--v3-soft);
        font-size: clamp(1rem, 1.7vw, 1.1rem);
        line-height: 1.68;
    }

    .v3-tags {
        list-style: none;
        margin: 0.2rem 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .v3-tags li {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        background: var(--v3-paper-2);
        border: 1px solid var(--v3-rule);
        color: var(--v3-ink);
        font-size: 0.82rem;
        font-weight: 600;
    }
    .v3-tags li i { color: var(--v3-blue); font-size: 0.85em; }

    .v3-card-link {
        margin-top: 0.5rem;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        align-self: flex-start;
        padding: 12px 22px;
        border-radius: 999px;
        background: var(--v3-ink);
        color: #fff;
        font-weight: 700;
        font-size: 0.96rem;
        text-decoration: none;
        transition: transform 0.25s ease, background 0.25s ease, gap 0.25s ease;
        min-height: var(--tap-min, 48px);
    }
    .v3-card-link i { transition: transform 0.25s ease; }
    .v3-card-link:hover { background: var(--v3-blue); transform: translateY(-2px); gap: 14px; }
    .v3-card-link:hover i { transform: translateX(3px); }
    .v3-card-link:focus-visible { outline: 3px solid var(--v3-blue); outline-offset: 3px; }

    /* Visual-Seite der Karte */
    .v3-card-visual {
        position: relative;
        background:
            radial-gradient(circle at 70% 20%, rgba(37, 99, 235, 0.16), transparent 55%),
            linear-gradient(155deg, var(--v3-night) 0%, #0b1428 60%, #0a1c3a 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(1.6rem, 4vw, 3rem);
        overflow: hidden;
    }
    .v3-card-visual::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(96, 165, 250, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(96, 165, 250, 0.1) 1px, transparent 1px);
        background-size: 38px 38px;
        mask-image: radial-gradient(circle at 60% 40%, #000, transparent 75%);
    }
    .v3-card-visual::after {
        content: "";
        position: absolute;
        width: 360px; height: 360px;
        border-radius: 50%;
        top: -120px; right: -120px;
        background: radial-gradient(circle, rgba(124, 58, 237, 0.34), transparent 70%);
        filter: blur(6px);
        pointer-events: none;
    }

    /* Generisches "Glas"-Mockup im Visual */
    .v3-glass {
        position: relative;
        z-index: 1;
        width: min(100%, 360px);
        border-radius: 22px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.16);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #fff;
        display: grid;
        gap: 14px;
    }
    .v3-glass-bar {
        display: flex; align-items: center; gap: 7px;
    }
    .v3-glass-bar span {
        width: 11px; height: 11px; border-radius: 50%;
        background: rgba(255, 255, 255, 0.28);
    }
    .v3-glass-bar span:first-child { background: #ff5f57; }
    .v3-glass-bar span:nth-child(2) { background: #febc2e; }
    .v3-glass-bar span:nth-child(3) { background: #28c840; }
    .v3-glass-line {
        height: 9px; border-radius: 5px;
        background: linear-gradient(90deg, rgba(96, 165, 250, 0.7), rgba(124, 58, 237, 0.45));
    }
    .v3-glass-line.s2 { width: 78%; }
    .v3-glass-line.s3 { width: 56%; background: rgba(255, 255, 255, 0.16); }
    .v3-glass-chips { display: flex; gap: 8px; flex-wrap: wrap; }
    .v3-glass-chips b {
        font-size: 0.72rem; font-weight: 700;
        padding: 6px 11px; border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #dbeafe;
    }
    .v3-glass-big {
        display: inline-flex; align-items: center; justify-content: center;
        width: 60px; height: 60px; border-radius: 16px;
        font-size: 1.6rem;
        background: linear-gradient(135deg, rgba(96, 165, 250, 0.4), rgba(124, 58, 237, 0.4));
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    /* Phone-Mockup (Android / iOS) */
    .v3-phone {
        position: relative; z-index: 1;
        width: 168px; height: 332px;
        border-radius: 30px;
        background: linear-gradient(160deg, #1e293b, #0b1220);
        border: 6px solid #020617;
        box-shadow: 0 34px 70px -28px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        padding: 14px 12px;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 12px;
        overflow: hidden;
    }
    .v3-phone::before {
        content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
        width: 54px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.18);
    }
    .v3-phone-top { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
    .v3-phone-top i {
        width: 34px; height: 34px; border-radius: 10px; font-size: 0.95rem;
        display: inline-flex; align-items: center; justify-content: center; color: #fff;
        background: var(--v3-grad);
    }
    .v3-phone-top b { color: #fff; font-size: 0.82rem; }
    .v3-phone-top b small { display: block; color: var(--v3-faint); font-size: 0.66rem; font-weight: 500; }
    .v3-phone-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-content: start; }
    .v3-phone-tile {
        border-radius: 12px; min-height: 54px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: flex; align-items: center; justify-content: center;
        color: #93c5fd; font-size: 1.1rem;
    }
    .v3-phone-tile.wide { grid-column: 1 / -1; min-height: 40px; }
    .v3-phone-tile.bar {
        background: linear-gradient(90deg, rgba(96, 165, 250, 0.5), rgba(124, 58, 237, 0.3));
    }

    /* Mini Webtools-Gitter */
    .v3-tool-grid {
        position: relative; z-index: 1;
        width: min(100%, 320px);
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px;
    }
    .v3-tool-grid b {
        aspect-ratio: 1;
        border-radius: 16px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.35rem; color: #bfdbfe;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.13);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .v3-tool-grid b.hot {
        color: #fff;
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.55), rgba(124, 58, 237, 0.4));
    }

    /* News-Mockup */
    .v3-news { position: relative; z-index: 1; width: min(100%, 350px); display: grid; gap: 11px; }
    .v3-news-item {
        display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center;
        padding: 12px; border-radius: 14px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .v3-news-item .v3-news-ic {
        width: 46px; height: 46px; border-radius: 11px;
        display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem;
        background: linear-gradient(135deg, rgba(96, 165, 250, 0.45), rgba(124, 58, 237, 0.35));
    }
    .v3-news-item div span { display: block; height: 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.22); }
    .v3-news-item div span.s2 { width: 60%; margin-top: 7px; background: rgba(255, 255, 255, 0.13); }

    /* Shop / Preis-Mockup */
    .v3-price {
        position: relative; z-index: 1; width: min(100%, 320px);
        border-radius: 20px; padding: 22px; color: #fff;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
        display: grid; gap: 14px;
    }
    .v3-price-top { display: flex; align-items: center; justify-content: space-between; }
    .v3-price-top b { font-size: 0.9rem; color: #dbeafe; }
    .v3-price-amt { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; }
    .v3-price-amt small { font-size: 0.9rem; font-weight: 600; color: var(--v3-faint); }
    .v3-price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
    .v3-price li { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: #e2e8f0; }
    .v3-price li i { color: var(--success); }

    /* Code / Terminal-Mockup */
    .v3-term {
        position: relative; z-index: 1; width: min(100%, 360px);
        border-radius: 18px; overflow: hidden;
        background: rgba(2, 6, 23, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.13);
        box-shadow: 0 30px 60px -28px rgba(0,0,0,0.7);
        font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
        font-size: 0.78rem; color: #cbd5e1;
    }
    .v3-term-bar {
        display: flex; align-items: center; gap: 7px;
        padding: 11px 14px; background: rgba(255, 255, 255, 0.04);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .v3-term-bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.25); }
    .v3-term-bar span:first-child { background: #ff5f57; }
    .v3-term-bar span:nth-child(2) { background: #febc2e; }
    .v3-term-bar span:nth-child(3) { background: #28c840; }
    .v3-term-body { padding: 16px; display: grid; gap: 8px; line-height: 1.5; }
    .v3-term-body .ln { white-space: nowrap; }
    .v3-term .tk-key { color: #c4b5fd; }
    .v3-term .tk-fn { color: #93c5fd; }
    .v3-term .tk-str { color: #6ee7b7; }
    .v3-term .tk-cm { color: #64748b; }

    /* Support / Hosting Mockup (Status) */
    .v3-status { position: relative; z-index: 1; width: min(100%, 330px); display: grid; gap: 11px; }
    .v3-status-row {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 13px 16px; border-radius: 13px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #e2e8f0; font-size: 0.85rem; font-weight: 600;
    }
    .v3-status-row .v3-ok {
        display: inline-flex; align-items: center; gap: 7px;
        color: var(--success); font-size: 0.78rem; font-weight: 700;
    }
    .v3-status-row .v3-ok::before {
        content: ""; width: 8px; height: 8px; border-radius: 50%;
        background: var(--success); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
    }
    .v3-status-row .v3-lbl { display: inline-flex; align-items: center; gap: 9px; }
    .v3-status-row .v3-lbl i { color: #93c5fd; }

    /* Karten-Akzent je Bereich (Visual-Glow leicht variieren) */
    .v3-card[data-accent="violet"] .v3-card-visual::after { background: radial-gradient(circle, rgba(124, 58, 237, 0.4), transparent 70%); }
    .v3-card[data-accent="blue"] .v3-card-visual::after { background: radial-gradient(circle, rgba(37, 99, 235, 0.4), transparent 70%); }

    /* ============================================================
       SCHLUSS-CTA (Kontakt) - keine Sticky-Karte, klarer Abschluss
       ============================================================ */
    .v3-final {
        position: relative;
        margin: clamp(3rem, 7vw, 6rem) auto 0;
        width: min(100%, var(--container-width));
        padding: clamp(2.6rem, 6vw, 5rem) var(--v3-gutter);
        border-radius: var(--v3-r-lg);
        text-align: center;
        color: #fff;
        background:
            radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.4), transparent 55%),
            linear-gradient(160deg, var(--v3-night) 0%, #0b1530 70%);
        overflow: hidden;
        z-index: 2;
    }
    .v3-final::before {
        content: "";
        position: absolute; inset: 0;
        background-image:
            linear-gradient(rgba(96, 165, 250, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(96, 165, 250, 0.1) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%);
        pointer-events: none;
    }
    .v3-final-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.3rem; }
    .v3-final .v3-chip {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: #dbeafe;
    }
    .v3-final h2 {
        margin: 0;
        font-size: clamp(1.9rem, 5vw, 3.2rem);
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 1.04;
        max-width: 18ch;
    }
    .v3-final h2 .v3-grad-l {
        background: linear-gradient(120deg, var(--v3-blue-lt), #fff);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
    }
    .v3-final p { margin: 0; max-width: 56ch; color: var(--v3-faint); font-size: clamp(1.02rem, 1.9vw, 1.18rem); line-height: 1.7; }
    .v3-final .v3-btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.24); box-shadow: none; }
    .v3-final .v3-btn-ghost:hover { background: rgba(255,255,255,0.16); color: #fff; border-color: #fff; }

    .v3-final-meta {
        margin-top: 0.6rem;
        display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.4rem); justify-content: center;
        color: var(--v3-faint); font-size: 0.9rem; font-weight: 600;
    }
    .v3-final-meta span { display: inline-flex; align-items: center; gap: 9px; }
    .v3-final-meta i { color: var(--v3-blue-lt); }

    .v3-bottom-pad { height: clamp(2rem, 6vw, 5rem); }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 880px) {
        .v3-card-grid { grid-template-columns: 1fr; min-height: 0; }
        .v3-card-visual { order: -1; min-height: 230px; padding: 1.8rem; }
        .v3-card-body { padding: clamp(1.6rem, 6vw, 2.4rem); }
        /* Auf kleineren Screens kleinerer Andock-Offset, damit der Stapel passt */
        .v3-home { --v3-dock: 84px; }
    }

    @media (max-width: 560px) {
        .v3-jump { gap: 6px; }
        .v3-jump a { padding: 6px 11px; font-size: 0.74rem; }
        .v3-phone { width: 150px; height: 300px; }
        .v3-card-link { align-self: stretch; justify-content: center; }
        .v3-btn { width: 100%; justify-content: center; }
        .v3-cta-row { width: 100%; }
    }

    /* ============================================================
       REDUCED MOTION: Karten stapeln normal (kein Sticky), keine
       Animationen. Reveal sofort sichtbar.
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
        .v3-card { position: static; }
        .v3-reveal { opacity: 1; transform: none; transition: none; }
        .v3-btn-primary { animation: none; }
        .v3-chip .v3-dot { animation: none; }
        html { scroll-behavior: auto; }
        .v3-btn:hover, .v3-card-link:hover, .v3-jump a:hover { transform: none; }
    }
</style>

    {{-- ============================ HERO ============================ --}}
    <section class="v3-hero" aria-label="Einleitung KOTSCH.TECH">
        <div class="v3-hero-inner">
            <span class="v3-chip v3-reveal active">
                <span class="v3-dot" aria-hidden="true"></span>
                Persönliche Tech-Marke
            </span>

            <h1 class="v3-reveal active">
                Ein Macher.<br>
                <span class="v3-grad">Software, Apps &amp; Web</span> aus einer Hand.
                <span class="v3-name">KOTSCH.TECH &mdash; von Arthur Kotsch</span>
            </h1>

            <p class="v3-lead v3-reveal active">
                Von Windows-Software über iOS-, Mac- und Android-Apps bis zu Webdesign,
                kostenlosen Webtools, Hosting und persönlicher IT-Hilfe. Scrolle durch das
                Karten-Deck und entdecke jeden Bereich.
            </p>

            <div class="v3-cta-row v3-reveal active">
                <a href="{{ route('kontakt') }}" class="v3-btn v3-btn-primary">
                    <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
                    Projekt anfragen
                </a>
                <a href="{{ route('webtools.show') }}" class="v3-btn v3-btn-ghost">
                    <i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i>
                    Kostenlose Webtools
                </a>
            </div>

            <div class="v3-stats v3-reveal active">
                <div class="v3-stat"><b>220+</b><span>kostenlose Webtools</span></div>
                <div class="v3-stat"><b>10</b><span>Tech-Bereiche</span></div>
                <div class="v3-stat"><b>1</b><span>Ansprechpartner</span></div>
                <div class="v3-stat"><b>100%</b><span>persönlich betreut</span></div>
            </div>

            <div class="v3-jump v3-reveal active" role="navigation" aria-label="Sprung zu den Bereichen">
                <a href="#v3-windows"><i class="fa-brands fa-windows" aria-hidden="true"></i>Windows</a>
                <a href="#v3-apple"><i class="fa-brands fa-apple" aria-hidden="true"></i>iOS &amp; Mac</a>
                <a href="#v3-android"><i class="fa-brands fa-android" aria-hidden="true"></i>Android</a>
                <a href="#v3-web"><i class="fa-solid fa-palette" aria-hidden="true"></i>Webdesign</a>
                <a href="#v3-tools"><i class="fa-solid fa-toolbox" aria-hidden="true"></i>Webtools</a>
                <a href="#v3-news"><i class="fa-solid fa-newspaper" aria-hidden="true"></i>News</a>
                <a href="#v3-shop"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i>Shop</a>
                <a href="#v3-hosting"><i class="fa-solid fa-server" aria-hidden="true"></i>Hosting</a>
                <a href="#v3-support"><i class="fa-solid fa-headset" aria-hidden="true"></i>IT-Hilfe</a>
                <a href="#v3-docs"><i class="fa-solid fa-file-lines" aria-hidden="true"></i>Dokumente</a>
            </div>
        </div>
    </section>

    {{-- ============================ DECK ============================ --}}
    <div class="v3-deck">

        <div class="v3-deck-intro v3-reveal">
            <span class="v3-eyebrow">Das Leistungs-Deck</span>
            <h2>Jeder Bereich eine Karte &mdash; gestapelt beim Scrollen</h2>
            <p>
                Zehn Disziplinen, ein durchgängiger Anspruch: sauber gebaut, modern gestaltet
                und persönlich betreut. Die Karten docken oben an und schichten sich übereinander.
            </p>
        </div>

        {{-- 01 · Windows-Software --}}
        <article class="v3-card v3-reveal" id="v3-windows" data-accent="blue" aria-label="Windows-Software">
            <div class="v3-card-grid">
                <div class="v3-card-body">
                    <span class="v3-card-num"><b>01</b> &mdash; Desktop</span>
                    <span class="v3-card-icon" aria-hidden="true"><i class="fa-brands fa-windows"></i></span>
                    <h3>Windows-Software</h3>
                    <p>
                        Schlanke, schnelle Werkzeuge für den Windows-Alltag. Durchdacht im Detail,
                        ohne Ballast und mit klarem Fokus auf den Nutzen am Schreibtisch.
                    </p>
                    <ul class="v3-tags">
                        <li><i class="fa-solid fa-bolt" aria-hidden="true"></i>Performant</li>
                        <li><i class="fa-solid fa-gauge-high" aria-hidden="true"></i>Leichtgewichtig</li>
                        <li><i class="fa-solid fa-shield-halved" aria-hidden="true"></i>Sicher</li>
                    </ul>
                    <a class="v3-card-link" href="{{ route('windows.index') }}">
                        Windows-Tools ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="v3-card-visual" aria-hidden="true">
                    <div class="v3-glass">
                        <div class="v3-glass-bar"><span></span><span></span><span></span></div>
                        <span class="v3-glass-big"><i class="fa-brands fa-windows"></i></span>
                        <span class="v3-glass-line"></span>
                        <span class="v3-glass-line s2"></span>
                        <span class="v3-glass-line s3"></span>
                        <div class="v3-glass-chips"><b>.exe</b><b>portable</b><b>schnell</b></div>
                    </div>
                </div>
            </div>
        </article>

        {{-- 02 · iOS & Mac --}}
        <article class="v3-card v3-reveal" id="v3-apple" data-accent="violet" aria-label="iOS und Mac Apps">
            <div class="v3-card-grid">
                <div class="v3-card-body">
                    <span class="v3-card-num"><b>02</b> &mdash; Apple</span>
                    <span class="v3-card-icon" aria-hidden="true"><i class="fa-brands fa-apple"></i></span>
                    <h3>iOS &amp; Mac Apps</h3>
                    <p>
                        Native Apps für iPhone, iPad und Mac &mdash; mit Convertly+ bereits im App Store.
                        Klar gestaltet, schnell und auf das Apple-Ökosystem zugeschnitten.
                    </p>
                    <ul class="v3-tags">
                        <li><i class="fa-solid fa-mobile-screen" aria-hidden="true"></i>iPhone &amp; iPad</li>
                        <li><i class="fa-solid fa-laptop" aria-hidden="true"></i>macOS</li>
                        <li><i class="fa-solid fa-store" aria-hidden="true"></i>App Store</li>
                    </ul>
                    <a class="v3-card-link" href="{{ route('apple.index') }}">
                        Apps für iOS &amp; Mac <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="v3-card-visual" aria-hidden="true">
                    <div class="v3-phone">
                        <div class="v3-phone-top">
                            <i class="fa-solid fa-arrow-right-arrow-left"></i>
                            <b>Convertly+<small>im App Store</small></b>
                        </div>
                        <div class="v3-phone-tiles">
                            <span class="v3-phone-tile"><i class="fa-solid fa-ruler"></i></span>
                            <span class="v3-phone-tile"><i class="fa-solid fa-weight-scale"></i></span>
                            <span class="v3-phone-tile"><i class="fa-solid fa-temperature-half"></i></span>
                            <span class="v3-phone-tile"><i class="fa-solid fa-coins"></i></span>
                            <span class="v3-phone-tile wide bar"></span>
                        </div>
                    </div>
                </div>
            </div>
        </article>

        {{-- 03 · Android --}}
        <article class="v3-card v3-reveal" id="v3-android" data-accent="blue" aria-label="Android Apps">
            <div class="v3-card-grid">
                <div class="v3-card-body">
                    <span class="v3-card-num"><b>03</b> &mdash; Mobile</span>
                    <span class="v3-card-icon" aria-hidden="true"><i class="fa-brands fa-android"></i></span>
                    <h3>Android Apps</h3>
                    <p>
                        Mobile Lösungen für Android &mdash; aktuell in Entwicklung. Gleiche Idee,
                        gleicher Anspruch: durchdachte Apps, die im Alltag wirklich helfen.
                    </p>
                    <ul class="v3-tags">
                        <li><i class="fa-solid fa-flask" aria-hidden="true"></i>In Entwicklung</li>
                        <li><i class="fa-solid fa-mobile" aria-hidden="true"></i>Material Design</li>
                        <li><i class="fa-solid fa-rocket" aria-hidden="true"></i>Bald verfügbar</li>
                    </ul>
                    <a class="v3-card-link" href="{{ route('android.index') }}">
                        Android-Roadmap ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="v3-card-visual" aria-hidden="true">
                    <div class="v3-phone">
                        <div class="v3-phone-top">
                            <i class="fa-brands fa-android"></i>
                            <b>Android<small>in Entwicklung</small></b>
                        </div>
                        <div class="v3-phone-tiles">
                            <span class="v3-phone-tile"><i class="fa-solid fa-list-check"></i></span>
                            <span class="v3-phone-tile"><i class="fa-solid fa-bell"></i></span>
                            <span class="v3-phone-tile wide bar"></span>
                            <span class="v3-phone-tile"><i class="fa-solid fa-chart-simple"></i></span>
                            <span class="v3-phone-tile"><i class="fa-solid fa-gear"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </article>

        {{-- 04 · Webdesign --}}
        <article class="v3-card v3-reveal" id="v3-web" data-accent="violet" aria-label="Webdesign">
            <div class="v3-card-grid">
                <div class="v3-card-body">
                    <span class="v3-card-num"><b>04</b> &mdash; Web</span>
                    <span class="v3-card-icon" aria-hidden="true"><i class="fa-solid fa-palette"></i></span>
                    <h3>Webdesign</h3>
                    <p>
                        Moderne, schnelle Websites mit klarer Gestaltung &mdash; von der Vorlage bis zur
                        maßgeschneiderten Seite. Responsiv, SEO-freundlich und sauber umgesetzt.
                    </p>
                    <ul class="v3-tags">
                        <li><i class="fa-solid fa-mobile-screen-button" aria-hidden="true"></i>Responsiv</li>
                        <li><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>SEO-fit</li>
                        <li><i class="fa-solid fa-gauge" aria-hidden="true"></i>Schnell</li>
                    </ul>
                    <a class="v3-card-link" href="{{ route('web.templates') }}">
                        Vorlagen &amp; Webdesign <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="v3-card-visual" aria-hidden="true">
                    <div class="v3-glass">
                        <div class="v3-glass-bar"><span></span><span></span><span></span></div>
                        <span class="v3-glass-line"></span>
                        <span class="v3-glass-line s2"></span>
                        <div class="v3-glass-chips"><b>HTML</b><b>CSS</b><b>UX</b><b>Layout</b></div>
                        <span class="v3-glass-line"></span>
                        <span class="v3-glass-line s3"></span>
                    </div>
                </div>
            </div>
        </article>

        {{-- 05 · Webtools --}}
        <article class="v3-card v3-reveal" id="v3-tools" data-accent="blue" aria-label="Webtools">
            <div class="v3-card-grid">
                <div class="v3-card-body">
                    <span class="v3-card-num"><b>05</b> &mdash; Tools</span>
                    <span class="v3-card-icon" aria-hidden="true"><i class="fa-solid fa-toolbox"></i></span>
                    <h3>Webtools</h3>
                    <p>
                        Über 220 kostenlose Werkzeuge direkt im Browser: Konverter, Rechner,
                        Generatoren und mehr. Ohne Anmeldung, ohne Installation, sofort nutzbar.
                    </p>
                    <ul class="v3-tags">
                        <li><i class="fa-solid fa-gift" aria-hidden="true"></i>Kostenlos</li>
                        <li><i class="fa-solid fa-user-slash" aria-hidden="true"></i>Ohne Login</li>
                        <li><i class="fa-solid fa-bolt" aria-hidden="true"></i>Sofort nutzbar</li>
                    </ul>
                    <a class="v3-card-link" href="{{ route('webtools.show') }}">
                        Alle Webtools öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="v3-card-visual" aria-hidden="true">
                    <div class="v3-tool-grid">
                        <b class="hot"><i class="fa-solid fa-right-left"></i></b>
                        <b><i class="fa-solid fa-calculator"></i></b>
                        <b><i class="fa-solid fa-key"></i></b>
                        <b><i class="fa-solid fa-palette"></i></b>
                        <b class="hot"><i class="fa-solid fa-qrcode"></i></b>
                        <b><i class="fa-solid fa-code"></i></b>
                        <b><i class="fa-solid fa-image"></i></b>
                        <b><i class="fa-solid fa-percent"></i></b>
                        <b class="hot"><i class="fa-solid fa-font"></i></b>
                    </div>
                </div>
            </div>
        </article>

        {{-- 06 · News / Blog --}}
        <article class="v3-card v3-reveal" id="v3-news" data-accent="violet" aria-label="News und Blog">
            <div class="v3-card-grid">
                <div class="v3-card-body">
                    <span class="v3-card-num"><b>06</b> &mdash; Redaktion</span>
                    <span class="v3-card-icon" aria-hidden="true"><i class="fa-solid fa-newspaper"></i></span>
                    <h3>News &amp; Blog</h3>
                    <p>
                        Artikel, Updates und Einblicke rund um Software, Apps und das Web.
                        Verständlich geschrieben &mdash; für alle, die mehr wissen wollen.
                    </p>
                    <ul class="v3-tags">
                        <li><i class="fa-solid fa-pen-nib" aria-hidden="true"></i>Artikel</li>
                        <li><i class="fa-solid fa-bullhorn" aria-hidden="true"></i>Updates</li>
                        <li><i class="fa-solid fa-lightbulb" aria-hidden="true"></i>Tipps</li>
                    </ul>
                    <a class="v3-card-link" href="{{ route('news.index') }}">
                        Zu den Artikeln <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="v3-card-visual" aria-hidden="true">
                    <div class="v3-news">
                        <div class="v3-news-item">
                            <span class="v3-news-ic"><i class="fa-solid fa-rocket"></i></span>
                            <div><span></span><span class="s2"></span></div>
                        </div>
                        <div class="v3-news-item">
                            <span class="v3-news-ic"><i class="fa-solid fa-code-branch"></i></span>
                            <div><span></span><span class="s2"></span></div>
                        </div>
                        <div class="v3-news-item">
                            <span class="v3-news-ic"><i class="fa-solid fa-wand-magic-sparkles"></i></span>
                            <div><span></span><span class="s2"></span></div>
                        </div>
                    </div>
                </div>
            </div>
        </article>

        {{-- 07 · Shop --}}
        <article class="v3-card v3-reveal" id="v3-shop" data-accent="blue" aria-label="Shop">
            <div class="v3-card-grid">
                <div class="v3-card-body">
                    <span class="v3-card-num"><b>07</b> &mdash; Store</span>
                    <span class="v3-card-icon" aria-hidden="true"><i class="fa-solid fa-bag-shopping"></i></span>
                    <h3>Shop</h3>
                    <p>
                        Digitale Produkte und ausgewählte Angebote rund um die Marke.
                        Direkt erhältlich, transparent und ohne Umwege zum Download.
                    </p>
                    <ul class="v3-tags">
                        <li><i class="fa-solid fa-download" aria-hidden="true"></i>Digital</li>
                        <li><i class="fa-solid fa-tag" aria-hidden="true"></i>Faire Preise</li>
                        <li><i class="fa-solid fa-bolt" aria-hidden="true"></i>Sofort</li>
                    </ul>
                    <a class="v3-card-link" href="{{ route('shop.index') }}">
                        Zum Shop <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="v3-card-visual" aria-hidden="true">
                    <div class="v3-price">
                        <div class="v3-price-top">
                            <b>Digitales Produkt</b>
                            <i class="fa-solid fa-bag-shopping"></i>
                        </div>
                        <div class="v3-price-amt">ab&nbsp;9&euro;<small> / Download</small></div>
                        <ul>
                            <li><i class="fa-solid fa-circle-check" aria-hidden="true"></i>Sofortiger Zugang</li>
                            <li><i class="fa-solid fa-circle-check" aria-hidden="true"></i>Updates inklusive</li>
                            <li><i class="fa-solid fa-circle-check" aria-hidden="true"></i>Sicher bezahlen</li>
                        </ul>
                    </div>
                </div>
            </div>
        </article>

        {{-- 08 · Hosting --}}
        <article class="v3-card v3-reveal" id="v3-hosting" data-accent="violet" aria-label="Hosting">
            <div class="v3-card-grid">
                <div class="v3-card-body">
                    <span class="v3-card-num"><b>08</b> &mdash; Infrastruktur</span>
                    <span class="v3-card-icon" aria-hidden="true"><i class="fa-solid fa-server"></i></span>
                    <h3>Hosting</h3>
                    <p>
                        Kleines, zuverlässiges Hosting für Projekte und Websites.
                        Persönlich betreut, fair kalkuliert und stabil im Betrieb.
                    </p>
                    <ul class="v3-tags">
                        <li><i class="fa-solid fa-gauge-high" aria-hidden="true"></i>Stabil</li>
                        <li><i class="fa-solid fa-lock" aria-hidden="true"></i>SSL inklusive</li>
                        <li><i class="fa-solid fa-handshake-angle" aria-hidden="true"></i>Persönlich</li>
                    </ul>
                    <a class="v3-card-link" href="{{ route('hosting.index') }}">
                        Hosting entdecken <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="v3-card-visual" aria-hidden="true">
                    <div class="v3-status">
                        <div class="v3-status-row">
                            <span class="v3-lbl"><i class="fa-solid fa-server"></i>Server</span>
                            <span class="v3-ok">Online</span>
                        </div>
                        <div class="v3-status-row">
                            <span class="v3-lbl"><i class="fa-solid fa-lock"></i>SSL-Zertifikat</span>
                            <span class="v3-ok">Aktiv</span>
                        </div>
                        <div class="v3-status-row">
                            <span class="v3-lbl"><i class="fa-solid fa-clock-rotate-left"></i>Verfügbarkeit</span>
                            <span class="v3-ok">99,9%</span>
                        </div>
                    </div>
                </div>
            </div>
        </article>

        {{-- 09 · IT-Hilfe --}}
        <article class="v3-card v3-reveal" id="v3-support" data-accent="blue" aria-label="IT-Hilfe">
            <div class="v3-card-grid">
                <div class="v3-card-body">
                    <span class="v3-card-num"><b>09</b> &mdash; Support</span>
                    <span class="v3-card-icon" aria-hidden="true"><i class="fa-solid fa-headset"></i></span>
                    <h3>IT-Hilfe</h3>
                    <p>
                        Persönliche Unterstützung bei PC, Software und Web &mdash; verständlich erklärt,
                        ohne Fachchinesisch. Direkter Draht statt Warteschleife.
                    </p>
                    <ul class="v3-tags">
                        <li><i class="fa-solid fa-comments" aria-hidden="true"></i>Verständlich</li>
                        <li><i class="fa-solid fa-user-check" aria-hidden="true"></i>Persönlich</li>
                        <li><i class="fa-solid fa-clock" aria-hidden="true"></i>Zügig</li>
                    </ul>
                    <a class="v3-card-link" href="{{ route('it-hilfe.index') }}">
                        IT-Hilfe anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="v3-card-visual" aria-hidden="true">
                    <div class="v3-glass">
                        <span class="v3-glass-big"><i class="fa-solid fa-headset"></i></span>
                        <span class="v3-glass-line"></span>
                        <span class="v3-glass-line s2"></span>
                        <div class="v3-glass-chips"><b>PC</b><b>Software</b><b>Netzwerk</b><b>Web</b></div>
                        <span class="v3-glass-line s3"></span>
                    </div>
                </div>
            </div>
        </article>

        {{-- 10 · Dokumente (optional) --}}
        <article class="v3-card v3-reveal" id="v3-docs" data-accent="violet" aria-label="Dokumente">
            <div class="v3-card-grid">
                <div class="v3-card-body">
                    <span class="v3-card-num"><b>10</b> &mdash; Ressourcen</span>
                    <span class="v3-card-icon" aria-hidden="true"><i class="fa-solid fa-file-lines"></i></span>
                    <h3>Dokumente</h3>
                    <p>
                        Vorlagen, Anleitungen und nützliche Unterlagen zum Nachschlagen.
                        Übersichtlich abgelegt und jederzeit griffbereit.
                    </p>
                    <ul class="v3-tags">
                        <li><i class="fa-solid fa-folder-open" aria-hidden="true"></i>Vorlagen</li>
                        <li><i class="fa-solid fa-book-open" aria-hidden="true"></i>Anleitungen</li>
                        <li><i class="fa-solid fa-download" aria-hidden="true"></i>Download</li>
                    </ul>
                    <a class="v3-card-link" href="{{ route('documents.index') }}">
                        Dokumente öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="v3-card-visual" aria-hidden="true">
                    <div class="v3-term">
                        <div class="v3-term-bar"><span></span><span></span><span></span></div>
                        <div class="v3-term-body">
                            <span class="ln"><span class="tk-cm"># dokumente.kotsch.tech</span></span>
                            <span class="ln"><span class="tk-key">open</span> <span class="tk-fn">vorlage</span>(<span class="tk-str">"agb"</span>)</span>
                            <span class="ln"><span class="tk-key">open</span> <span class="tk-fn">anleitung</span>(<span class="tk-str">"setup"</span>)</span>
                            <span class="ln"><span class="tk-fn">download</span> &rarr; <span class="tk-str">ready</span></span>
                        </div>
                    </div>
                </div>
            </div>
        </article>

    </div>

    {{-- ============================ SCHLUSS-CTA ============================ --}}
    <section class="v3-final v3-reveal" aria-label="Kontakt aufnehmen">
        <div class="v3-final-inner">
            <span class="v3-chip">
                <i class="fa-solid fa-handshake" aria-hidden="true"></i>
                Lass uns starten
            </span>
            <h2>Eine Idee? <span class="v3-grad-l">Lass uns dein Projekt umsetzen.</span></h2>
            <p>
                Ob App, Website, Tool oder IT-Frage &mdash; schreib mir und wir finden gemeinsam
                den besten Weg. Direkt, persönlich und ohne Umwege.
            </p>
            <div class="v3-cta-row">
                <a href="{{ route('kontakt') }}" class="v3-btn v3-btn-primary">
                    <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
                    Projekt anfragen
                </a>
                <a href="{{ route('webtools.show') }}" class="v3-btn v3-btn-ghost">
                    <i class="fa-solid fa-toolbox" aria-hidden="true"></i>
                    Erst Tools testen
                </a>
            </div>
            <div class="v3-final-meta">
                <span><i class="fa-solid fa-bolt" aria-hidden="true"></i>Schnelle Rückmeldung</span>
                <span><i class="fa-solid fa-user-check" aria-hidden="true"></i>Persönlich betreut</span>
                <span><i class="fa-solid fa-shield-halved" aria-hidden="true"></i>Sauber umgesetzt</span>
            </div>
        </div>
    </section>

    <div class="v3-bottom-pad" aria-hidden="true"></div>

</div>

<script>
(function () {
    'use strict';
    var root = document.querySelector('.v3-home');
    if (!root) { return; }

    var prefersReduced = window.matchMedia
        && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    var reveals = root.querySelectorAll('.v3-reveal:not(.active)');

    if (prefersReduced || !('IntersectionObserver' in window)) {
        for (var i = 0; i < reveals.length; i++) { reveals[i].classList.add('active'); }
        return;
    }

    var io = new IntersectionObserver(function (entries) {
        for (var j = 0; j < entries.length; j++) {
            if (entries[j].isIntersecting) {
                entries[j].target.classList.add('active');
                io.unobserve(entries[j].target);
            }
        }
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });

    for (var k = 0; k < reveals.length; k++) { io.observe(reveals[k]); }
})();
</script>
@endsection