@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch – Software, Apps & Webdesign')
@section('meta_description', 'KOTSCH.TECH ist die Tech-Marke von Arthur Kotsch: Windows-Software, iOS-, Mac- & Android-Apps, Webdesign, 220+ Webtools, News, Shop, Hosting und IT-Hilfe.')
@section('og_title', 'KOTSCH.TECH – die Tech-Werkstatt von Arthur Kotsch')
@section('og_description', 'Eine Adresse für Softwareentwicklung, Apps für iOS, Mac & Android, Webdesign, kostenlose Webtools, einen Shop, Hosting und persönliche IT-Hilfe.')
@section('twitter_title', 'KOTSCH.TECH – Software, Apps, Web & IT von Arthur Kotsch')
@section('twitter_description', 'Windows-Software, native Apps, Webdesign, über 220 Webtools, News, Shop, Hosting und IT-Hilfe – alles aus einer Hand bei KOTSCH.TECH.')

@section('content')
<style>
    .v6-home {
        --v6-ink: var(--text-main);
        --v6-muted: var(--text-muted);
        --v6-ring: var(--border);
        color: var(--v6-ink);
        position: relative;
        overflow-x: clip;            /* contain marquee overflow, never the page */
        background: var(--bg);
        font-feature-settings: "ss01" on, "cv01" on;
    }

    .v6-home *,
    .v6-home *::before,
    .v6-home *::after { box-sizing: border-box; }

    .v6-home .v6-wrap {
        width: min(100% - 2.4rem, var(--container-width));
        margin-inline: auto;
    }

    /* ============================================================
       HERO
    ============================================================ */
    .v6-hero {
        position: relative;
        padding: clamp(130px, 15vw, 188px) 0 clamp(20px, 4vw, 44px);
        isolation: isolate;
        overflow: hidden;
    }

    .v6-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
            radial-gradient(58% 70% at 8% 0%, var(--primary-soft), transparent 60%),
            radial-gradient(50% 60% at 100% 8%, rgba(124, 58, 237, .12), transparent 60%),
            linear-gradient(180deg, var(--bg), var(--bg-light));
    }

    /* faint moving grid behind hero */
    .v6-hero::after {
        content: "";
        position: absolute;
        inset: -2px;
        z-index: -1;
        background-image:
            linear-gradient(var(--v6-ring) 1px, transparent 1px),
            linear-gradient(90deg, var(--v6-ring) 1px, transparent 1px);
        background-size: 56px 56px;
        -webkit-mask-image: radial-gradient(70% 70% at 30% 20%, #000 0%, transparent 75%);
        mask-image: radial-gradient(70% 70% at 30% 20%, #000 0%, transparent 75%);
        opacity: .5;
    }

    .v6-hero-grid {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: clamp(2rem, 5vw, 4rem);
        align-items: center;
    }

    .v6-kicker {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        padding: .5rem 1rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, .72);
        border: 1px solid var(--v6-ring);
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(8px);
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--primary-dark);
    }
    .v6-kicker i { color: var(--accent); }

    .v6-hero h1 {
        font-size: clamp(2.5rem, 7.4vw, 5.1rem);
        line-height: .98;
        font-weight: 800;
        letter-spacing: -.03em;
        margin: clamp(1.3rem, 3vw, 1.9rem) 0 0;
        max-width: 14ch;
    }

    .v6-grad {
        background: linear-gradient(110deg, var(--primary) 0%, var(--accent) 50%, var(--primary-light) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .v6-hero p.v6-lead {
        font-size: clamp(1.06rem, 2.1vw, 1.28rem);
        color: var(--v6-muted);
        line-height: 1.6;
        max-width: 52ch;
        margin: clamp(1.2rem, 2.6vw, 1.7rem) 0 clamp(1.7rem, 3.4vw, 2.2rem);
    }

    .v6-cta {
        display: flex;
        flex-wrap: wrap;
        gap: .85rem;
    }

    .v6-btn {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        padding: .95rem 1.6rem;
        border-radius: 999px;
        font-weight: 700;
        font-size: 1rem;
        text-decoration: none;
        border: 1.5px solid transparent;
        cursor: pointer;
        transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
    }
    .v6-btn-primary {
        background: linear-gradient(115deg, var(--primary), var(--accent));
        color: #fff;
        box-shadow: 0 18px 38px -16px var(--primary-glow);
    }
    .v6-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -16px var(--primary-glow); }
    .v6-btn-ghost {
        background: rgba(255, 255, 255, .7);
        color: var(--primary-dark);
        border-color: var(--v6-ring);
    }
    .v6-btn-ghost:hover { transform: translateY(-3px); border-color: var(--primary-light); background: #fff; }

    .v6-btn:focus-visible,
    .v6-tile:focus-visible,
    .v6-mini:focus-visible,
    .v6-jump:focus-visible,
    .v6-chip:focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
    }

    /* hero side visual: stacked wordmark panel + floating glyphs */
    .v6-hero-art {
        position: relative;
        aspect-ratio: 1 / 1;
        border-radius: var(--radius);
        background:
            radial-gradient(80% 80% at 70% 20%, rgba(124, 58, 237, .16), transparent 60%),
            linear-gradient(150deg, #fff, var(--bg-light));
        border: 1px solid var(--v6-ring);
        box-shadow: var(--shadow-lg);
        display: grid;
        place-items: center;
        overflow: hidden;
    }
    .v6-hero-art::before {
        content: "";
        position: absolute;
        width: 150%;
        height: 150%;
        background: conic-gradient(from 0deg, transparent 0 75%, var(--primary-soft) 90%, transparent 100%);
        animation: v6-rotate 14s linear infinite;
    }
    .v6-hero-art-inner {
        position: relative;
        width: 78%;
        padding: clamp(1.4rem, 3vw, 2.2rem);
        border-radius: 20px;
        background: rgba(255, 255, 255, .82);
        border: 1px solid var(--v6-ring);
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(6px);
        text-align: center;
    }
    .v6-hero-art-inner img {
        width: 100%;
        max-width: 230px;
        height: auto;
        display: block;
        margin: 0 auto .9rem;
    }
    .v6-hero-art-inner span {
        display: block;
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--v6-muted);
    }
    .v6-float {
        position: absolute;
        width: clamp(46px, 7vw, 62px);
        height: clamp(46px, 7vw, 62px);
        border-radius: 16px;
        display: grid;
        place-items: center;
        font-size: clamp(1.1rem, 2.4vw, 1.5rem);
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        box-shadow: 0 16px 30px -12px var(--primary-glow);
        animation: v6-bob 5.5s ease-in-out infinite;
    }
    .v6-float--a { top: 8%; right: 9%; }
    .v6-float--b { bottom: 12%; left: 6%; animation-delay: -1.6s; background: linear-gradient(135deg, var(--accent), var(--primary-light)); }
    .v6-float--c { bottom: 30%; right: -3%; animation-delay: -3.1s; background: #fff; color: var(--primary); border: 1px solid var(--v6-ring); }

    /* ============================================================
       MARQUEE BANDS
    ============================================================ */
    .v6-marquee {
        position: relative;
        display: flex;
        overflow: hidden;
        width: 100%;
        -webkit-user-select: none;
        user-select: none;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }
    .v6-marquee-track {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: clamp(1.4rem, 3vw, 2.6rem);
        padding-right: clamp(1.4rem, 3vw, 2.6rem);
        white-space: nowrap;
        will-change: transform;
        animation: v6-scroll var(--v6-dur, 38s) linear infinite;
    }
    .v6-marquee--rev .v6-marquee-track { animation-direction: reverse; }
    .v6-marquee:hover .v6-marquee-track { animation-play-state: paused; }

    .v6-marquee-track span {
        display: inline-flex;
        align-items: center;
        gap: .8rem;
        font-weight: 800;
        letter-spacing: -.01em;
        line-height: 1;
    }
    .v6-marquee-track .v6-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: currentColor;
        opacity: .45;
        flex: 0 0 auto;
    }

    /* big inverted band */
    .v6-band-dark {
        background: var(--bg-dark);
        color: #fff;
        padding: clamp(1.4rem, 3vw, 2.1rem) 0;
        border-block: 1px solid rgba(255, 255, 255, .08);
    }
    .v6-band-dark .v6-marquee-track { font-size: clamp(1.7rem, 4.4vw, 3rem); color: #fff; }
    .v6-band-dark .v6-marquee-track .v6-hl {
        background: linear-gradient(110deg, var(--primary-light), var(--accent));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .v6-band-dark .v6-marquee-track i { color: var(--primary-light); font-size: .8em; }

    /* slim soft band */
    .v6-band-soft {
        background: var(--bg-light);
        color: var(--primary-dark);
        padding: clamp(.85rem, 1.8vw, 1.15rem) 0;
        border-block: 1px solid var(--v6-ring);
    }
    .v6-band-soft .v6-marquee-track { font-size: clamp(.92rem, 1.8vw, 1.12rem); letter-spacing: .04em; text-transform: uppercase; }
    .v6-band-soft .v6-marquee-track i { color: var(--accent); }

    /* gradient outline band */
    .v6-band-line {
        background: var(--bg);
        padding: clamp(1rem, 2.2vw, 1.5rem) 0;
        border-block: 1px solid var(--v6-ring);
    }
    .v6-band-line .v6-marquee-track {
        font-size: clamp(1.3rem, 3.2vw, 2.2rem);
        -webkit-text-stroke: 1.4px var(--primary);
        color: transparent;
    }
    .v6-band-line .v6-marquee-track .v6-fill {
        -webkit-text-stroke: 0;
        background: linear-gradient(110deg, var(--primary), var(--accent));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* ============================================================
       SECTION SCAFFOLD
    ============================================================ */
    .v6-section { padding: clamp(3.4rem, 8vw, 6.2rem) 0; }

    .v6-shead {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.4rem;
        flex-wrap: wrap;
        margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
    }
    .v6-shead-tx { max-width: 56ch; }
    .v6-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .15em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: .75rem;
    }
    .v6-eyebrow::before {
        content: "";
        width: 26px;
        height: 2px;
        background: linear-gradient(90deg, var(--primary), var(--accent));
        border-radius: 2px;
    }
    .v6-shead h2 {
        font-size: clamp(1.8rem, 4.4vw, 2.9rem);
        font-weight: 800;
        letter-spacing: -.025em;
        line-height: 1.08;
        margin: 0;
    }
    .v6-shead p {
        color: var(--v6-muted);
        font-size: clamp(1rem, 2vw, 1.12rem);
        line-height: 1.6;
        margin: .8rem 0 0;
    }
    .v6-shead-aside { color: var(--v6-muted); font-size: .9rem; font-weight: 600; }

    /* ---- big tiles (core build areas) ---- */
    .v6-tiles {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: clamp(.9rem, 1.8vw, 1.3rem);
    }
    .v6-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: clamp(220px, 26vw, 300px);
        padding: clamp(1.4rem, 2.6vw, 2rem);
        border-radius: var(--radius);
        background: #fff;
        border: 1px solid var(--v6-ring);
        box-shadow: var(--shadow-soft);
        text-decoration: none;
        color: inherit;
        overflow: hidden;
        isolation: isolate;
        transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    .v6-tile::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(120% 90% at 100% 0%, var(--primary-soft), transparent 55%);
        opacity: 0;
        transition: opacity .35s ease;
    }
    .v6-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
    .v6-tile:hover::before { opacity: 1; }
    .v6-tile:hover .v6-tile-ic { transform: rotate(-6deg) scale(1.06); }
    .v6-tile:hover .v6-tile-go i { transform: translateX(4px); }

    .v6-tile--lg { grid-column: span 6; }
    .v6-tile--md { grid-column: span 6; }

    .v6-tile-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: auto;
    }
    .v6-tile-ic {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        font-size: 1.5rem;
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        box-shadow: 0 14px 28px -12px var(--primary-glow);
        transition: transform .35s ease;
    }
    .v6-tile-num {
        font-size: .82rem;
        font-weight: 800;
        letter-spacing: .1em;
        color: var(--text-light);
    }
    .v6-tile h3 {
        font-size: clamp(1.25rem, 2.6vw, 1.6rem);
        font-weight: 800;
        letter-spacing: -.01em;
        margin: 1.1rem 0 .5rem;
        line-height: 1.12;
    }
    .v6-tile p {
        color: var(--v6-muted);
        font-size: .97rem;
        line-height: 1.55;
        margin: 0 0 1rem;
        max-width: 46ch;
    }
    .v6-tile-go {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 700;
        font-size: .94rem;
        color: var(--primary);
    }
    .v6-tile-go i { transition: transform .25s ease; }

    /* ---- mini cards (tools / news / shop) ---- */
    .v6-grid3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(.9rem, 1.8vw, 1.3rem);
    }
    .v6-mini {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: clamp(1.4rem, 2.6vw, 1.9rem);
        border-radius: var(--radius);
        background: #fff;
        border: 1px solid var(--v6-ring);
        box-shadow: var(--shadow-soft);
        text-decoration: none;
        color: inherit;
        transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }
    .v6-mini:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
    .v6-mini:hover .v6-mini-go i { transform: translateX(4px); }
    .v6-mini-ic {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        font-size: 1.3rem;
        color: var(--primary);
        background: var(--primary-soft);
        margin-bottom: 1rem;
    }
    .v6-mini h3 {
        font-size: 1.22rem;
        font-weight: 800;
        margin: 0 0 .45rem;
        letter-spacing: -.01em;
    }
    .v6-mini p {
        color: var(--v6-muted);
        font-size: .94rem;
        line-height: 1.55;
        margin: 0 0 1.1rem;
        flex: 1;
    }
    .v6-mini-go {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 700;
        font-size: .92rem;
        color: var(--primary);
    }
    .v6-mini-go i { transition: transform .25s ease; }
    .v6-mini .v6-badge {
        position: absolute;
        top: 1.2rem;
        right: 1.2rem;
        font-size: .72rem;
        font-weight: 800;
        padding: .25rem .6rem;
        border-radius: 999px;
        background: var(--success);
        color: #fff;
        letter-spacing: .02em;
    }

    /* ---- support split (hosting + IT) on dark ---- */
    .v6-support { background: var(--bg-dark); }
    .v6-support .v6-eyebrow { color: var(--primary-light); }
    .v6-support .v6-eyebrow::before { background: linear-gradient(90deg, var(--primary-light), var(--accent)); }
    .v6-support .v6-shead h2 { color: #fff; }
    .v6-support .v6-shead p { color: var(--text-light); }

    .v6-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 1.8vw, 1.3rem); }
    .v6-panel {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: clamp(1.6rem, 3vw, 2.3rem);
        border-radius: var(--radius);
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .12);
        text-decoration: none;
        color: #fff;
        overflow: hidden;
        transition: transform .35s ease, background .35s ease, border-color .35s ease;
    }
    .v6-panel::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(90% 80% at 100% 0%, rgba(124, 58, 237, .22), transparent 60%);
        opacity: .6;
        transition: opacity .35s ease;
        pointer-events: none;
    }
    .v6-panel > * { position: relative; z-index: 1; }
    .v6-panel:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .28); }
    .v6-panel:hover::after { opacity: 1; }
    .v6-panel:hover .v6-mini-go i { transform: translateX(4px); }
    .v6-panel-ic {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        font-size: 1.5rem;
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .5);
        margin-bottom: 1.2rem;
    }
    .v6-panel h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; margin: 0 0 .55rem; letter-spacing: -.01em; }
    .v6-panel p { color: var(--text-light); font-size: .98rem; line-height: 1.6; margin: 0 0 1.3rem; flex: 1; }
    .v6-panel .v6-mini-go { color: #fff; }

    /* ---- documents thin strip ---- */
    .v6-docs {
        display: flex;
        align-items: center;
        gap: 1.4rem;
        flex-wrap: wrap;
        padding: clamp(1.4rem, 3vw, 2rem) clamp(1.6rem, 3.4vw, 2.4rem);
        border-radius: var(--radius);
        background: linear-gradient(120deg, var(--bg-light), #fff);
        border: 1px solid var(--v6-ring);
        box-shadow: var(--shadow-soft);
        margin-top: clamp(.9rem, 1.8vw, 1.3rem);
    }
    .v6-docs-ic {
        width: 54px;
        height: 54px;
        flex: 0 0 auto;
        border-radius: 15px;
        display: grid;
        place-items: center;
        font-size: 1.4rem;
        color: var(--primary);
        background: var(--primary-soft);
    }
    .v6-docs-tx { flex: 1 1 260px; }
    .v6-docs-tx h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 .25rem; }
    .v6-docs-tx p { color: var(--v6-muted); font-size: .94rem; margin: 0; line-height: 1.5; }
    .v6-docs .v6-btn { white-space: nowrap; }

    /* ============================================================
       FINAL CTA
    ============================================================ */
    .v6-final { padding: clamp(3.4rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem); }
    .v6-final-box {
        position: relative;
        border-radius: var(--radius);
        padding: clamp(2.6rem, 6vw, 4.4rem) clamp(1.6rem, 5vw, 3.6rem);
        background: linear-gradient(135deg, var(--primary-dark), var(--accent));
        color: #fff;
        text-align: center;
        overflow: hidden;
        box-shadow: var(--shadow-lg);
    }
    .v6-final-box::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 14% 18%, rgba(255, 255, 255, .18), transparent 42%),
            radial-gradient(circle at 86% 88%, rgba(255, 255, 255, .12), transparent 46%);
        pointer-events: none;
    }
    .v6-final-box > * { position: relative; }
    .v6-final-box h2 {
        font-size: clamp(1.9rem, 5vw, 3.1rem);
        font-weight: 800;
        letter-spacing: -.025em;
        line-height: 1.08;
        margin: 0 0 1rem;
    }
    .v6-final-box p {
        font-size: clamp(1rem, 2.2vw, 1.18rem);
        line-height: 1.6;
        max-width: 54ch;
        margin: 0 auto 2rem;
        opacity: .94;
    }
    .v6-final-cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
    .v6-btn-light { background: #fff; color: var(--primary-dark); }
    .v6-btn-light:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .45); }
    .v6-btn-outline { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .5); }
    .v6-btn-outline:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .16); border-color: #fff; }

    /* jump-link quick nav */
    .v6-jumps {
        display: flex;
        flex-wrap: wrap;
        gap: .55rem;
        justify-content: center;
        margin-top: 2.2rem;
    }
    .v6-jump,
    .v6-chip {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .5rem .95rem;
        border-radius: 999px;
        font-size: .85rem;
        font-weight: 700;
        text-decoration: none;
        transition: background .25s ease, transform .25s ease, border-color .25s ease;
    }
    .v6-jump {
        background: rgba(255, 255, 255, .12);
        border: 1px solid rgba(255, 255, 255, .28);
        color: #fff;
    }
    .v6-jump:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }

    /* ============================================================
       REVEAL (scoped; visible by default for no-JS + SEO)
    ============================================================ */
    .v6-rv { opacity: 1; transform: none; }
    .v6-js .v6-rv {
        opacity: 0;
        transform: translateY(34px);
        transition: opacity .7s cubic-bezier(.16, .84, .44, 1), transform .7s cubic-bezier(.16, .84, .44, 1);
    }
    .v6-js .v6-rv.v6-in { opacity: 1; transform: none; }
    .v6-js .v6-rv[data-d="1"] { transition-delay: .08s; }
    .v6-js .v6-rv[data-d="2"] { transition-delay: .16s; }
    .v6-js .v6-rv[data-d="3"] { transition-delay: .24s; }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 960px) {
        .v6-hero-grid { grid-template-columns: 1fr; }
        .v6-hero-art { max-width: 440px; margin-inline: auto; order: -1; aspect-ratio: 16 / 11; }
        .v6-tile--lg, .v6-tile--md { grid-column: span 6; }
        .v6-grid3 { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 680px) {
        .v6-hero h1 { max-width: 100%; }
        .v6-tiles { grid-template-columns: 1fr; }
        .v6-tile--lg, .v6-tile--md { grid-column: 1 / -1; }
        .v6-grid3 { grid-template-columns: 1fr; }
        .v6-split { grid-template-columns: 1fr; }
        .v6-shead { align-items: flex-start; }
        .v6-docs { flex-direction: column; align-items: flex-start; }
        .v6-docs .v6-btn { width: 100%; justify-content: center; }
    }

    @media (prefers-reduced-motion: reduce) {
        .v6-home *,
        .v6-home *::before,
        .v6-home *::after {
            animation: none !important;
            transition: none !important;
        }
        .v6-js .v6-rv { opacity: 1 !important; transform: none !important; }
        .v6-marquee-track { animation: none !important; transform: none !important; }
    }

    @keyframes v6-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
    @keyframes v6-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    @keyframes v6-rotate { to { transform: rotate(360deg); } }
</style>

<div class="v6-home">

    {{-- ===================== HERO ===================== --}}
    <section class="v6-hero" aria-label="Einleitung KOTSCH.TECH">
        <div class="v6-wrap">
            <div class="v6-hero-grid">
                <div class="v6-hero-tx">
                    <span class="v6-kicker"><i class="fa-solid fa-bolt"></i> Persönliche Tech-Marke</span>
                    <h1>Eine Werkstatt. <span class="v6-grad">Zehn Disziplinen.</span> Ein Macher.</h1>
                    <p class="v6-lead">
                        Ich bin <strong>Arthur Kotsch</strong>. Unter <strong>KOTSCH.TECH</strong> entstehen
                        Software, Apps für iOS, Mac und Android, Webdesign, kostenlose Webtools, ein Shop,
                        Hosting und persönliche IT-Hilfe — alles aus einer Hand, mit Tempo und Sorgfalt.
                    </p>
                    <div class="v6-cta">
                        <a href="{{ route('kontakt') }}" class="v6-btn v6-btn-primary">
                            <i class="fa-solid fa-paper-plane"></i> Projekt anfragen
                        </a>
                        <a href="#v6-arbeit" class="v6-btn v6-btn-ghost">
                            <i class="fa-solid fa-arrow-down-long"></i> Bereiche entdecken
                        </a>
                    </div>
                </div>

                <div class="v6-hero-art" aria-hidden="true">
                    <span class="v6-float v6-float--a"><i class="fa-solid fa-code"></i></span>
                    <span class="v6-float v6-float--b"><i class="fa-solid fa-mobile-screen"></i></span>
                    <span class="v6-float v6-float--c"><i class="fa-solid fa-toolbox"></i></span>
                    <div class="v6-hero-art-inner">
                        <img src="{{ asset('img/logo-wordmark-solid-cropped.png') }}" alt="KOTSCH.TECH Wortmarke">
                        <span>Software &middot; Apps &middot; Web &middot; IT</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ===================== MARQUEE BAND 1 (dark, areas) ===================== --}}
    <div class="v6-marquee v6-band-dark" aria-hidden="true">
        <div class="v6-marquee-track" style="--v6-dur:42s;">
            <span>Windows-Software</span><span class="v6-dot"></span>
            <span class="v6-hl">iOS &amp; Mac Apps</span><span class="v6-dot"></span>
            <span>Android Apps</span><span class="v6-dot"></span>
            <span class="v6-hl">Webdesign</span><span class="v6-dot"></span>
            <span>Webtools</span><span class="v6-dot"></span>
            <span class="v6-hl">News</span><span class="v6-dot"></span>
            <span>Shop</span><span class="v6-dot"></span>
            <span class="v6-hl">Hosting</span><span class="v6-dot"></span>
            <span>IT-Hilfe</span><span class="v6-dot"></span>
        </div>
        <div class="v6-marquee-track" style="--v6-dur:42s;">
            <span>Windows-Software</span><span class="v6-dot"></span>
            <span class="v6-hl">iOS &amp; Mac Apps</span><span class="v6-dot"></span>
            <span>Android Apps</span><span class="v6-dot"></span>
            <span class="v6-hl">Webdesign</span><span class="v6-dot"></span>
            <span>Webtools</span><span class="v6-dot"></span>
            <span class="v6-hl">News</span><span class="v6-dot"></span>
            <span>Shop</span><span class="v6-dot"></span>
            <span class="v6-hl">Hosting</span><span class="v6-dot"></span>
            <span>IT-Hilfe</span><span class="v6-dot"></span>
        </div>
    </div>

    {{-- ===================== CORE BUILD AREAS ===================== --}}
    <section id="v6-arbeit" class="v6-section" aria-label="Software- und App-Entwicklung">
        <div class="v6-wrap">
            <div class="v6-shead v6-rv">
                <div class="v6-shead-tx">
                    <span class="v6-eyebrow">Was hier gebaut wird</span>
                    <h2>Software &amp; Apps für jede Plattform</h2>
                    <p>Vom schlanken Desktop-Tool bis zur App-Store-erprobten Mobile-App — durchdacht, schnell und ohne unnötigen Ballast.</p>
                </div>
                <span class="v6-shead-aside">04 Plattformen</span>
            </div>

            <div class="v6-tiles">
                <a class="v6-tile v6-tile--lg v6-rv" href="{{ route('windows.index') }}" aria-label="Windows-Software ansehen">
                    <div class="v6-tile-top">
                        <span class="v6-tile-ic"><i class="fa-brands fa-windows"></i></span>
                        <span class="v6-tile-num">01</span>
                    </div>
                    <h3>Windows-Software</h3>
                    <p>Schlanke Desktop-Tools und Programme für Windows — funktional, schnell und auf den Punkt gebaut.</p>
                    <span class="v6-tile-go">Windows-Tools ansehen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                <a class="v6-tile v6-tile--md v6-rv" data-d="1" href="{{ route('apple.index') }}" aria-label="iOS- und Mac-Apps entdecken">
                    <div class="v6-tile-top">
                        <span class="v6-tile-ic"><i class="fa-brands fa-apple"></i></span>
                        <span class="v6-tile-num">02</span>
                    </div>
                    <h3>iOS &amp; Mac Apps</h3>
                    <p>Native Apps für iPhone, iPad und macOS — sauberes Design, flüssige Performance, im App Store erprobt.</p>
                    <span class="v6-tile-go">Apple-Apps entdecken <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                <a class="v6-tile v6-tile--md v6-rv" data-d="2" href="{{ route('android.index') }}" aria-label="Android-Apps ansehen">
                    <div class="v6-tile-top">
                        <span class="v6-tile-ic"><i class="fa-brands fa-android"></i></span>
                        <span class="v6-tile-num">03</span>
                    </div>
                    <h3>Android Apps</h3>
                    <p>Mobile Apps für das Android-Ökosystem — eine wachsende Auswahl, die jedes Gerät erreicht.</p>
                    <span class="v6-tile-go">Android-Apps ansehen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                <a class="v6-tile v6-tile--lg v6-rv" data-d="3" href="{{ route('web.templates') }}" aria-label="Webdesign und Vorlagen ansehen">
                    <div class="v6-tile-top">
                        <span class="v6-tile-ic"><i class="fa-solid fa-pen-ruler"></i></span>
                        <span class="v6-tile-num">04</span>
                    </div>
                    <h3>Webdesign</h3>
                    <p>Moderne, schnelle Websites und Vorlagen — responsiv, suchmaschinenfreundlich und exakt auf deine Marke abgestimmt.</p>
                    <span class="v6-tile-go">Webdesign &amp; Vorlagen <i class="fa-solid fa-arrow-right"></i></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ===================== MARQUEE BAND 2 (line, keywords) ===================== --}}
    <div class="v6-marquee v6-band-line v6-marquee--rev" aria-hidden="true">
        <div class="v6-marquee-track" style="--v6-dur:34s;">
            <span>Code</span><span class="v6-fill">Design</span><span>Performance</span>
            <span class="v6-fill">SEO</span><span>Sicherheit</span><span class="v6-fill">Tempo</span>
            <span>Qualität</span><span class="v6-fill">Service</span>
        </div>
        <div class="v6-marquee-track" style="--v6-dur:34s;">
            <span>Code</span><span class="v6-fill">Design</span><span>Performance</span>
            <span class="v6-fill">SEO</span><span>Sicherheit</span><span class="v6-fill">Tempo</span>
            <span>Qualität</span><span class="v6-fill">Service</span>
        </div>
    </div>

    {{-- ===================== TOOLS / NEWS / SHOP ===================== --}}
    <section id="v6-digital" class="v6-section" aria-label="Webtools, News und Shop">
        <div class="v6-wrap">
            <div class="v6-shead v6-rv">
                <div class="v6-shead-tx">
                    <span class="v6-eyebrow">Direkt nutzbar</span>
                    <h2>Tools, Wissen &amp; digitale Produkte</h2>
                    <p>Sofort einsatzbereit im Browser, frisch im Blog und als Download im Shop — ohne Umwege.</p>
                </div>
                <span class="v6-shead-aside">220+ Web-Tools</span>
            </div>

            <div class="v6-grid3">
                <a class="v6-mini v6-rv" href="{{ route('webtools.show') }}" aria-label="Webtools öffnen">
                    <span class="v6-badge">Kostenlos</span>
                    <span class="v6-mini-ic"><i class="fa-solid fa-toolbox"></i></span>
                    <h3>Webtools</h3>
                    <p>Über 220 Browser-Tools für Alltag und Arbeit — ohne Anmeldung, direkt einsatzbereit.</p>
                    <span class="v6-mini-go">Web-Tools öffnen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                <a class="v6-mini v6-rv" data-d="1" href="{{ route('news.index') }}" aria-label="Zu News und Blog">
                    <span class="v6-mini-ic"><i class="fa-solid fa-newspaper"></i></span>
                    <h3>News &amp; Blog</h3>
                    <p>Artikel, Tipps und Einblicke rund um Technik, Entwicklung und meine Projekte — regelmäßig frisch.</p>
                    <span class="v6-mini-go">Zu News &amp; Blog <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                <a class="v6-mini v6-rv" data-d="2" href="{{ route('shop.index') }}" aria-label="Zum Shop">
                    <span class="v6-mini-ic"><i class="fa-solid fa-bag-shopping"></i></span>
                    <h3>Shop</h3>
                    <p>Digitale Produkte und ausgewählte Hardware — direkt verfügbar, klar beschrieben, fair im Preis.</p>
                    <span class="v6-mini-go">Zum Shop <i class="fa-solid fa-arrow-right"></i></span>
                </a>
            </div>

            {{-- Documents thin strip --}}
            <div class="v6-docs v6-rv">
                <span class="v6-docs-ic" aria-hidden="true"><i class="fa-solid fa-folder-open"></i></span>
                <div class="v6-docs-tx">
                    <h3>Dokumente &amp; Vorlagen</h3>
                    <p>Gesammelte Anleitungen, Vorlagen und nützliche Unterlagen — übersichtlich an einem Ort zum Nachlesen.</p>
                </div>
                <a class="v6-btn v6-btn-ghost" href="{{ route('documents.index') }}">
                    <i class="fa-solid fa-arrow-right"></i> Dokumente öffnen
                </a>
            </div>
        </div>
    </section>

    {{-- ===================== MARQUEE BAND 3 (soft, statement) ===================== --}}
    <div class="v6-marquee v6-band-soft" aria-hidden="true">
        <div class="v6-marquee-track" style="--v6-dur:30s;">
            <span><i class="fa-solid fa-circle-check"></i> Ehrliche Beratung</span><span class="v6-dot"></span>
            <span><i class="fa-solid fa-circle-check"></i> Kurze Wege</span><span class="v6-dot"></span>
            <span><i class="fa-solid fa-circle-check"></i> Ein Ansprechpartner</span><span class="v6-dot"></span>
            <span><i class="fa-solid fa-circle-check"></i> Persönlich betreut</span><span class="v6-dot"></span>
        </div>
        <div class="v6-marquee-track" style="--v6-dur:30s;">
            <span><i class="fa-solid fa-circle-check"></i> Ehrliche Beratung</span><span class="v6-dot"></span>
            <span><i class="fa-solid fa-circle-check"></i> Kurze Wege</span><span class="v6-dot"></span>
            <span><i class="fa-solid fa-circle-check"></i> Ein Ansprechpartner</span><span class="v6-dot"></span>
            <span><i class="fa-solid fa-circle-check"></i> Persönlich betreut</span><span class="v6-dot"></span>
        </div>
    </div>

    {{-- ===================== SUPPORT: HOSTING + IT-HILFE (dark) ===================== --}}
    <section id="v6-support" class="v6-section v6-support" aria-label="Hosting und IT-Hilfe">
        <div class="v6-wrap">
            <div class="v6-shead v6-rv">
                <div class="v6-shead-tx">
                    <span class="v6-eyebrow">Betreut &amp; verlässlich</span>
                    <h2>Hosting &amp; IT-Hilfe</h2>
                    <p>Wenn dein Projekt online ist oder es einmal hakt: persönlich betreut, ohne Konzern-Hotline und in Klartext erklärt.</p>
                </div>
            </div>

            <div class="v6-split">
                <a class="v6-panel v6-rv" href="{{ route('hosting.index') }}" aria-label="Hosting ansehen">
                    <span class="v6-panel-ic" aria-hidden="true"><i class="fa-solid fa-server"></i></span>
                    <h3>Hosting</h3>
                    <p>Kleines, zuverlässiges Hosting für deine Website oder dein Projekt — persönlich betreut, schnell erreichbar, ohne Warteschleife.</p>
                    <span class="v6-mini-go">Hosting ansehen <i class="fa-solid fa-arrow-right"></i></span>
                </a>

                <a class="v6-panel v6-rv" data-d="1" href="{{ route('it-hilfe.index') }}" aria-label="IT-Hilfe holen">
                    <span class="v6-panel-ic" aria-hidden="true"><i class="fa-solid fa-life-ring"></i></span>
                    <h3>IT-Hilfe</h3>
                    <p>Schnelle, verständliche Unterstützung bei Computer-, Software- und Technikproblemen — Klartext statt Fachchinesisch.</p>
                    <span class="v6-mini-go">IT-Hilfe holen <i class="fa-solid fa-arrow-right"></i></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ===================== MARQUEE BAND 4 (line, lets build) ===================== --}}
    <div class="v6-marquee v6-band-line" aria-hidden="true">
        <div class="v6-marquee-track" style="--v6-dur:26s;">
            <span class="v6-fill">Lass uns bauen</span><span>&bull;</span>
            <span>KOTSCH.TECH</span><span>&bull;</span>
            <span class="v6-fill">Idee &rarr; Produkt</span><span>&bull;</span>
        </div>
        <div class="v6-marquee-track" style="--v6-dur:26s;">
            <span class="v6-fill">Lass uns bauen</span><span>&bull;</span>
            <span>KOTSCH.TECH</span><span>&bull;</span>
            <span class="v6-fill">Idee &rarr; Produkt</span><span>&bull;</span>
        </div>
    </div>

    {{-- ===================== FINAL CTA ===================== --}}
    <section class="v6-final" aria-label="Kontakt und Schnellzugriff">
        <div class="v6-wrap">
            <div class="v6-final-box v6-rv">
                <h2>Lass uns dein Vorhaben angehen</h2>
                <p>
                    Egal ob App, Website, Tool oder eine knifflige IT-Frage — erzähl mir davon. Du bekommst
                    eine ehrliche Einschätzung und einen klaren nächsten Schritt, direkt von mir.
                </p>
                <div class="v6-final-cta">
                    <a href="{{ route('kontakt') }}" class="v6-btn v6-btn-light">
                        <i class="fa-solid fa-paper-plane"></i> Projekt anfragen
                    </a>
                    <a href="{{ route('webtools.show') }}" class="v6-btn v6-btn-outline">
                        <i class="fa-solid fa-toolbox"></i> Erst Tools testen
                    </a>
                </div>

                <div class="v6-jumps" role="navigation" aria-label="Alle Bereiche im Schnellzugriff">
                    <a class="v6-jump" href="{{ route('windows.index') }}"><i class="fa-brands fa-windows"></i> Windows</a>
                    <a class="v6-jump" href="{{ route('apple.index') }}"><i class="fa-brands fa-apple"></i> iOS &amp; Mac</a>
                    <a class="v6-jump" href="{{ route('android.index') }}"><i class="fa-brands fa-android"></i> Android</a>
                    <a class="v6-jump" href="{{ route('web.templates') }}"><i class="fa-solid fa-pen-ruler"></i> Webdesign</a>
                    <a class="v6-jump" href="{{ route('webtools.show') }}"><i class="fa-solid fa-toolbox"></i> Webtools</a>
                    <a class="v6-jump" href="{{ route('news.index') }}"><i class="fa-solid fa-newspaper"></i> News</a>
                    <a class="v6-jump" href="{{ route('shop.index') }}"><i class="fa-solid fa-bag-shopping"></i> Shop</a>
                    <a class="v6-jump" href="{{ route('hosting.index') }}"><i class="fa-solid fa-server"></i> Hosting</a>
                    <a class="v6-jump" href="{{ route('it-hilfe.index') }}"><i class="fa-solid fa-life-ring"></i> IT-Hilfe</a>
                    <a class="v6-jump" href="{{ route('documents.index') }}"><i class="fa-solid fa-folder-open"></i> Dokumente</a>
                </div>
            </div>
        </div>
    </section>

</div>

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

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

    // Enable JS-driven reveals only when motion is allowed, so no-JS and
    // reduced-motion users always see fully visible content (SEO-safe).
    if (!reduce) {
        root.classList.add('v6-js');
    }

    var revealEls = root.querySelectorAll('.v6-rv');
    if (!revealEls.length) { return; }

    if (!('IntersectionObserver' in window) || reduce) {
        revealEls.forEach(function (el) { el.classList.add('v6-in'); });
        return;
    }

    var obs = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) {
                entry.target.classList.add('v6-in');
                obs.unobserve(entry.target);
            }
        });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });

    revealEls.forEach(function (el) { obs.observe(el); });
})();
</script>
@endsection