@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Software, Apps & Web aus einer Hand')
@section('meta_description', 'KOTSCH.TECH von Arthur Kotsch: Softwareentwicklung, iOS-, macOS- & Android-Apps, Windows-Tools, Webdesign, 420+ Webtools, News, Shop, Hosting und IT-Hilfe.')
@section('og_title', 'KOTSCH.TECH - Software, Apps, Webdesign & IT von Arthur Kotsch')
@section('og_description', 'Eine Person, viele Disziplinen: native Apps, Windows-Software, Webdesign, kostenlose Webtools, digitaler Shop, Hosting und ehrliche IT-Hilfe. Alles aus einer Hand.')
@section('twitter_title', 'KOTSCH.TECH - die Tech-Marke von Arthur Kotsch')
@section('twitter_description', 'Apps, Webdesign, Webtools, Shop, Hosting & IT-Hilfe von Arthur Kotsch. Sauber gebaut, persönlich betreut, direkt verlinkt.')

@section('content')
<div class="v2-home v2-no-js">
<style>
    /* ============================================================
       KOTSCH.TECH - Variante 2: Broken-Grid-Overlap
       Plakat trifft Magazin: geschichtete, ueberlappende Panels,
       versetzte Karten, grosse Zahlen, diagonale Energie.
       ALLE Selektoren mit .v2- praefixiert (keine Kollision app.css).
       ============================================================ */

    .v2-home {
        --v2-ink: var(--text-main);
        --v2-soft: var(--text-muted);
        --v2-rule: var(--border);
        --v2-paper: var(--bg);
        --v2-paper-2: var(--bg-light);
        --v2-edge: 2px;
        --v2-gutter: clamp(1.15rem, 4vw, 4.5rem);
        color: var(--v2-ink);
        background: var(--v2-paper);
        position: relative;
        overflow-x: clip;
        font-feature-settings: "ss01" on;
    }

    /* feines Raster + zwei sanfte Farb-Auren im Hintergrund */
    .v2-home::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
            linear-gradient(to right, rgba(15,23,42,.04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(15,23,42,.035) 1px, transparent 1px);
        background-size: clamp(46px, 7vw, 96px) clamp(46px, 7vw, 96px);
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
        opacity: .8;
    }
    .v2-home::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(48% 38% at 84% 6%, var(--primary-glow), transparent 62%),
            radial-gradient(42% 34% at 6% 30%, rgba(124,58,237,.16), transparent 60%);
        opacity: .85;
    }
    .v2-home > * { position: relative; z-index: 1; }

    .v2-wrap {
        width: 100%;
        max-width: 1320px;
        margin-inline: auto;
        padding-inline: var(--v2-gutter);
    }

    /* ---------- Reveal (JS-frei sichtbar als Fallback) ---------- */
    .v2-rev {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity .8s cubic-bezier(.16,.84,.44,1),
                    transform .8s cubic-bezier(.16,.84,.44,1);
        will-change: opacity, transform;
    }
    .v2-rev.v2-in { opacity: 1; transform: none; }
    .v2-home.v2-no-js .v2-rev { opacity: 1; transform: none; }
    .v2-d1 { transition-delay: .06s; }
    .v2-d2 { transition-delay: .12s; }
    .v2-d3 { transition-delay: .18s; }
    .v2-d4 { transition-delay: .24s; }

    /* ============================================================
       HERO — geschichtetes Plakat
       ============================================================ */
    .v2-hero {
        padding-top: clamp(126px, 15vh, 176px);
        padding-bottom: clamp(2rem, 6vw, 4.5rem);
        position: relative;
    }

    /* Riesen-Geister-Wortmarke hinter dem Titel */
    .v2-hero-ghost {
        position: absolute;
        top: clamp(150px, 16vh, 210px);
        right: -2vw;
        font-size: clamp(7rem, 30vw, 28rem);
        font-weight: 800;
        letter-spacing: -.06em;
        line-height: .8;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(37,99,235,.12);
        pointer-events: none;
        user-select: none;
        z-index: 0;
        white-space: nowrap;
    }

    .v2-hero-top {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .7rem 1.3rem;
        margin-bottom: clamp(1.6rem, 4vw, 2.8rem);
        font-size: clamp(.62rem, 1.1vw, .72rem);
        font-weight: 800;
        letter-spacing: .26em;
        text-transform: uppercase;
        color: var(--v2-soft);
        position: relative;
        z-index: 2;
    }
    .v2-hero-top .v2-brandmini {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        color: var(--v2-ink);
    }
    .v2-hero-top .v2-brandmini img { height: 20px; width: auto; display: block; }
    .v2-hero-top .v2-live {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        color: var(--v2-ink);
    }
    .v2-hero-top .v2-live i {
        color: var(--success);
        font-size: .7em;
        animation: v2-pulse 2.4s ease-in-out infinite;
    }
    @keyframes v2-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
    .v2-hero-top .v2-sep { width: 26px; height: 2px; background: var(--v2-rule); }

    /* das gebrochene Raster des Heros */
    .v2-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1.4rem, 3vw, 2rem);
        position: relative;
        z-index: 2;
    }
    @media (min-width: 980px) {
        .v2-hero-grid {
            grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
            align-items: end;
            gap: clamp(1.6rem, 3vw, 2.6rem);
        }
    }

    .v2-kicker {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
    }
    .v2-kicker::before {
        content: "";
        width: 30px; height: 2px;
        background: linear-gradient(90deg, var(--primary), var(--accent));
    }

    .v2-h1 {
        font-size: clamp(2.7rem, 9.6vw, 7rem);
        line-height: .9;
        letter-spacing: -.035em;
        font-weight: 800;
        margin: 0;
        text-wrap: balance;
    }
    .v2-h1 .v2-line { display: block; }
    .v2-h1 .v2-grad {
        background: linear-gradient(108deg, var(--primary) 0%, var(--accent) 50%, var(--primary-light) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    /* das diagonale "Tape" hinter einem Wort */
    .v2-h1 .v2-mark {
        position: relative;
        display: inline-block;
        z-index: 0;
        padding-inline: .12em;
    }
    .v2-h1 .v2-mark::before {
        content: "";
        position: absolute;
        inset: 12% -.05em 14% -.05em;
        background: var(--primary-soft);
        transform: rotate(-2.2deg);
        z-index: -1;
        border-radius: 4px;
    }

    .v2-h1-sub {
        display: block;
        margin-top: clamp(.8rem, 2vw, 1.2rem);
        font-size: clamp(1rem, 2.1vw, 1.45rem);
        font-weight: 400;
        line-height: 1.25;
        letter-spacing: -.01em;
        color: var(--v2-soft);
        max-width: 30ch;
    }
    .v2-h1-sub strong { color: var(--v2-ink); font-weight: 700; }

    .v2-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .7rem .8rem;
        margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
    }

    .v2-btn {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        font-weight: 700;
        font-size: .95rem;
        line-height: 1;
        text-decoration: none;
        border-radius: 999px;
        padding: .95rem 1.6rem;
        transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
        border: var(--v2-edge) solid transparent;
    }
    .v2-btn-primary {
        background: var(--v2-ink);
        color: #fff;
        box-shadow: var(--shadow-soft);
    }
    .v2-btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: var(--primary); }
    .v2-btn-ghost {
        background: var(--v2-paper);
        color: var(--v2-ink);
        border-color: var(--v2-ink);
    }
    .v2-btn-ghost:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary); }
    .v2-btn i { font-size: .85em; transition: transform .25s ease; }
    .v2-btn:hover i { transform: translateX(3px); }
    .v2-btn-primary:hover i.fa-arrow-down { transform: translateY(3px); }

    /* die rechte, ueberlappende Spec-Karte */
    .v2-hero-card {
        position: relative;
        border: var(--v2-edge) solid var(--v2-ink);
        border-radius: var(--radius);
        background: var(--v2-paper);
        padding: clamp(1.3rem, 2.6vw, 1.7rem);
        box-shadow: var(--shadow-lg);
        z-index: 3;
    }
    @media (min-width: 980px) {
        .v2-hero-card { margin-bottom: clamp(-3rem, -3vw, -1.4rem); margin-left: clamp(-1.4rem, -2vw, 0rem); }
    }
    .v2-hero-card-tab {
        position: absolute;
        top: 0; right: clamp(1rem, 3vw, 1.6rem);
        transform: translateY(-50%) rotate(-2.5deg);
        background: linear-gradient(120deg, var(--primary), var(--accent));
        color: #fff;
        font-size: .64rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        padding: .42rem .8rem;
        border-radius: 8px;
        box-shadow: 0 10px 22px -10px var(--primary-glow);
    }
    .v2-hero-card h2 {
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--v2-soft);
        margin: .2rem 0 1rem;
    }
    .v2-hero-card ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0;
    }
    .v2-hero-card li {
        display: flex;
        align-items: center;
        gap: .8rem;
        padding: .72rem 0;
        border-top: 1px solid var(--v2-rule);
        font-weight: 600;
        font-size: .95rem;
    }
    .v2-hero-card li:first-child { border-top: 0; padding-top: 0; }
    .v2-hero-card li i {
        width: 34px; height: 34px;
        flex: none;
        display: inline-grid;
        place-items: center;
        border-radius: 10px;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: .9rem;
    }
    .v2-hero-card li b { font-weight: 800; }
    .v2-hero-card li span {
        margin-left: auto;
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--v2-soft);
    }

    /* ---------- Marquee-Statzeile (ueberlappt Hero leicht) ---------- */
    .v2-band {
        position: relative;
        z-index: 4;
        margin-top: clamp(2rem, 5vw, 3.6rem);
        border-block: var(--v2-edge) solid var(--v2-ink);
        background: var(--v2-ink);
        color: #fff;
        overflow: hidden;
    }
    .v2-band-track {
        display: flex;
        align-items: center;
        gap: clamp(1.6rem, 4vw, 3rem);
        width: max-content;
        padding-block: clamp(.85rem, 2vw, 1.15rem);
        animation: v2-marquee 38s linear infinite;
    }
    .v2-band:hover .v2-band-track { animation-play-state: paused; }
    @keyframes v2-marquee { to { transform: translateX(-50%); } }
    .v2-band-item {
        display: inline-flex;
        align-items: baseline;
        gap: .6rem;
        white-space: nowrap;
        font-weight: 700;
    }
    .v2-band-item b {
        font-size: clamp(1.1rem, 2vw, 1.5rem);
        font-weight: 800;
        letter-spacing: -.02em;
        background: linear-gradient(100deg, #fff, var(--primary-light));
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .v2-band-item span {
        font-size: .76rem;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--text-light);
        opacity: .82;
    }
    .v2-band-dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: var(--primary-light); flex: none;
    }

    /* ============================================================
       SEKTIONS-GERueST
       ============================================================ */
    .v2-section { padding-block: clamp(3rem, 8vw, 6rem); position: relative; }

    .v2-sechead {
        display: grid;
        grid-template-columns: 1fr;
        gap: .6rem 1.5rem;
        margin-bottom: clamp(2rem, 4.5vw, 3.2rem);
        align-items: end;
    }
    @media (min-width: 760px) {
        .v2-sechead { grid-template-columns: auto 1fr auto; }
    }
    .v2-sechead .v2-secnum {
        font-size: clamp(2.4rem, 6vw, 4.4rem);
        font-weight: 800;
        line-height: .8;
        letter-spacing: -.04em;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--primary);
        font-variant-numeric: tabular-nums;
    }
    .v2-sechead h2 {
        font-size: clamp(1.55rem, 3.6vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -.025em;
        line-height: 1.04;
        margin: 0;
        max-width: 22ch;
    }
    .v2-sechead .v2-sectag {
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--v2-soft);
        white-space: nowrap;
        align-self: center;
    }
    @media (min-width: 760px) { .v2-sechead .v2-sectag { align-self: end; padding-bottom: .35rem; } }

    /* ============================================================
       BROKEN BENTO — Block 1 (Plattformen / Entwicklung)
       bewusst versetzte, ueberlappende Tiles, grosse Geister-Zahlen
       ============================================================ */
    .v2-bento {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(.9rem, 2vw, 1.3rem);
    }
    @media (min-width: 720px) {
        .v2-bento {
            grid-template-columns: repeat(6, 1fr);
            grid-auto-rows: minmax(0, auto);
            gap: clamp(1rem, 1.6vw, 1.4rem);
        }
    }

    .v2-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: .85rem;
        text-decoration: none;
        color: var(--v2-ink);
        background: var(--v2-paper);
        border: var(--v2-edge) solid var(--v2-rule);
        border-radius: var(--radius);
        padding: clamp(1.3rem, 2.4vw, 1.9rem);
        overflow: hidden;
        isolation: isolate;
        transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, border-color .35s ease;
    }
    .v2-tile::after {
        content: "";
        position: absolute;
        inset: auto -30% -45% auto;
        width: 62%;
        aspect-ratio: 1;
        background: radial-gradient(circle, var(--primary-glow), transparent 66%);
        opacity: 0;
        transition: opacity .4s ease;
        z-index: -1;
    }
    .v2-tile:hover {
        transform: translateY(-7px);
        box-shadow: var(--shadow-lg);
        border-color: var(--v2-ink);
    }
    .v2-tile:hover::after { opacity: 1; }

    /* die geschichtete Anordnung (Desktop): versetzte Spans + Offsets */
    @media (min-width: 720px) {
        .v2-tile-windows { grid-column: 1 / span 4; grid-row: 1; }
        .v2-tile-apple   { grid-column: 5 / span 2; grid-row: 1 / span 2; }
        .v2-tile-android { grid-column: 1 / span 2; grid-row: 2; transform: translateY(1.4rem); }
        .v2-tile-web     { grid-column: 3 / span 2; grid-row: 2; transform: translateY(-.6rem); }
        .v2-tile-android:hover { transform: translateY(calc(1.4rem - 7px)); }
        .v2-tile-web:hover { transform: translateY(calc(-.6rem - 7px)); }
        /* die grosse Apple-Kachel als Plakat-Akzent */
        .v2-tile-apple {
            background:
                radial-gradient(70% 55% at 80% 8%, rgba(124,58,237,.16), transparent 60%),
                var(--bg-light);
            justify-content: space-between;
        }
    }

    .v2-tile-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }
    .v2-tile-icon {
        width: 50px; height: 50px;
        flex: none;
        display: inline-grid;
        place-items: center;
        border-radius: 14px;
        font-size: 1.3rem;
        background: var(--primary-soft);
        color: var(--primary);
        transition: transform .35s ease;
    }
    .v2-tile-apple .v2-tile-icon,
    .v2-tile:hover .v2-tile-icon {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: #fff;
    }
    .v2-tile:hover .v2-tile-icon { transform: rotate(-6deg) scale(1.05); }
    /* Geister-Index-Ziffer in der Ecke */
    .v2-tile-no {
        font-size: clamp(2.2rem, 5vw, 3.4rem);
        font-weight: 800;
        line-height: .8;
        letter-spacing: -.04em;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--v2-rule);
        font-variant-numeric: tabular-nums;
        transition: -webkit-text-stroke-color .35s ease;
    }
    .v2-tile:hover .v2-tile-no { -webkit-text-stroke-color: var(--primary-light); }

    .v2-tile-kick {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--v2-soft);
    }
    .v2-tile h3 {
        font-size: clamp(1.3rem, 2.6vw, 1.85rem);
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1.08;
        margin: 0;
        transition: color .3s ease;
    }
    .v2-tile-apple h3 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
    .v2-tile:hover h3 { color: var(--primary); }
    .v2-tile p {
        margin: 0;
        color: var(--v2-soft);
        line-height: 1.62;
        font-size: clamp(.95rem, 1.3vw, 1.02rem);
    }
    .v2-tile-foot {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 800;
        font-size: .82rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--v2-ink);
        padding-top: .5rem;
    }
    .v2-tile-foot i { transition: transform .3s ease; }
    .v2-tile:hover .v2-tile-foot { color: var(--primary); }
    .v2-tile:hover .v2-tile-foot i { transform: translateX(4px); }

    .v2-chips {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .v2-chips li {
        font-size: .72rem;
        font-weight: 700;
        color: var(--v2-soft);
        background: var(--v2-paper-2);
        border: 1px solid var(--v2-rule);
        border-radius: 8px;
        padding: .28rem .6rem;
    }
    .v2-tile-apple .v2-chips li { background: rgba(255,255,255,.7); }

    /* ============================================================
       SPLIT-OVERLAP — Webtools (gross) + News (versetzt darueber)
       ============================================================ */
    .v2-duo {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1rem, 2vw, 1.4rem);
    }
    @media (min-width: 900px) {
        .v2-duo { grid-template-columns: 1.5fr 1fr; align-items: stretch; }
    }

    .v2-tools {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius);
        background: var(--bg-dark);
        color: var(--text-light);
        border: var(--v2-edge) solid var(--v2-ink);
        padding: clamp(1.6rem, 3.4vw, 2.6rem);
        text-decoration: none;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        isolation: isolate;
        transition: transform .35s ease, box-shadow .35s ease;
    }
    .v2-tools::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(60% 80% at 90% 4%, rgba(124,58,237,.34), transparent 58%),
            radial-gradient(54% 74% at 2% 100%, rgba(37,99,235,.42), transparent 58%);
    }
    .v2-tools::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
            linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
        background-size: 42px 42px;
        -webkit-mask-image: radial-gradient(80% 80% at 30% 20%, #000, transparent 75%);
                mask-image: radial-gradient(80% 80% at 30% 20%, #000, transparent 75%);
    }
    .v2-tools:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .v2-tools-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        align-self: flex-start;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--primary-light);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 999px;
        padding: .4rem .85rem;
    }
    .v2-tools .v2-bignum {
        font-size: clamp(3.4rem, 9vw, 6rem);
        font-weight: 800;
        line-height: .85;
        letter-spacing: -.04em;
        margin: .2rem 0 0;
        background: linear-gradient(100deg, #fff, var(--primary-light) 70%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .v2-tools h3 {
        font-size: clamp(1.5rem, 3vw, 2.1rem);
        font-weight: 800;
        letter-spacing: -.02em;
        margin: 0;
        color: #fff;
    }
    .v2-tools p {
        margin: 0;
        color: var(--text-light);
        opacity: .9;
        line-height: 1.66;
        max-width: 46ch;
        font-size: clamp(.96rem, 1.4vw, 1.05rem);
    }
    .v2-tools-grid {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: .3rem;
    }
    .v2-tools-grid span {
        font-size: .76rem;
        font-weight: 700;
        color: var(--text-light);
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 8px;
        padding: .32rem .65rem;
    }
    .v2-tools-foot {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        font-weight: 800;
        font-size: .85rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #fff;
        padding-top: .8rem;
    }
    .v2-tools-foot i { transition: transform .3s ease; }
    .v2-tools:hover .v2-tools-foot i { transform: translateX(5px); }

    /* News-Karte, leicht versetzt nach oben (Overlap-Geste) */
    .v2-news {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        text-decoration: none;
        color: var(--v2-ink);
        border: var(--v2-edge) solid var(--v2-rule);
        border-radius: var(--radius);
        background: var(--v2-paper);
        padding: clamp(1.5rem, 3vw, 2.2rem);
        overflow: hidden;
        transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    @media (min-width: 900px) { .v2-news { margin-top: clamp(-2.4rem, -2.2vw, -1rem); } }
    .v2-news:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--v2-ink); }
    .v2-news-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        align-self: flex-start;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--primary);
    }
    .v2-news h3 {
        font-size: clamp(1.4rem, 2.8vw, 1.95rem);
        font-weight: 800;
        letter-spacing: -.02em;
        margin: 0;
        line-height: 1.08;
        transition: color .3s ease;
    }
    .v2-news:hover h3 { color: var(--primary); }
    .v2-news p {
        margin: 0;
        color: var(--v2-soft);
        line-height: 1.64;
        font-size: clamp(.95rem, 1.3vw, 1.02rem);
    }
    .v2-news-list {
        list-style: none;
        margin: .2rem 0 0;
        padding: 0;
        display: grid;
        gap: 0;
    }
    .v2-news-list li {
        display: flex;
        align-items: center;
        gap: .65rem;
        padding: .65rem 0;
        border-top: 1px solid var(--v2-rule);
        font-size: .92rem;
        font-weight: 600;
        color: var(--v2-soft);
    }
    .v2-news-list li i { color: var(--primary); font-size: .8rem; }
    .v2-news-foot {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 800;
        font-size: .82rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--v2-ink);
        padding-top: .6rem;
    }
    .v2-news-foot i { transition: transform .3s ease; }
    .v2-news:hover .v2-news-foot { color: var(--primary); }
    .v2-news:hover .v2-news-foot i { transform: translateX(4px); }

    /* ============================================================
       SERVICES — versetzte "Akten"-Reihen (Shop/Hosting/IT/Docs)
       ============================================================ */
    .v2-files {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(.9rem, 1.8vw, 1.2rem);
    }
    @media (min-width: 820px) {
        .v2-files { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 1.8vw, 1.4rem); }
        /* zickzack-Offset fuer die "broken" Anmutung */
        .v2-files > :nth-child(2) { transform: translateY(1.8rem); }
        .v2-files > :nth-child(3) { transform: translateY(-.6rem); }
        .v2-files > :nth-child(4) { transform: translateY(1.2rem); }
        .v2-files > :nth-child(2):hover { transform: translateY(calc(1.8rem - 6px)); }
        .v2-files > :nth-child(3):hover { transform: translateY(calc(-.6rem - 6px)); }
        .v2-files > :nth-child(4):hover { transform: translateY(calc(1.2rem - 6px)); }
    }

    .v2-file {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1rem 1.2rem;
        align-items: start;
        text-decoration: none;
        color: var(--v2-ink);
        background: var(--v2-paper);
        border: var(--v2-edge) solid var(--v2-rule);
        border-radius: var(--radius);
        padding: clamp(1.3rem, 2.6vw, 1.9rem);
        overflow: hidden;
        transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    .v2-file::before {
        content: "";
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 5px;
        background: linear-gradient(180deg, var(--primary), var(--accent));
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .4s cubic-bezier(.16,.84,.44,1);
    }
    .v2-file:hover { box-shadow: var(--shadow-lg); border-color: var(--v2-ink); }
    .v2-file:hover::before { transform: scaleY(1); }
    .v2-file-icon {
        grid-row: span 2;
        width: 54px; height: 54px;
        display: inline-grid;
        place-items: center;
        border-radius: 14px;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: 1.3rem;
        transition: transform .35s ease, background .35s ease, color .35s ease;
    }
    .v2-file:hover .v2-file-icon {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: #fff;
        transform: rotate(-6deg) scale(1.05);
    }
    .v2-file-kick {
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--v2-soft);
        display: block;
        margin-bottom: .3rem;
    }
    .v2-file h3 {
        font-size: clamp(1.2rem, 2.3vw, 1.55rem);
        font-weight: 800;
        letter-spacing: -.02em;
        margin: 0;
        line-height: 1.1;
        transition: color .3s ease;
    }
    .v2-file:hover h3 { color: var(--primary); }
    .v2-file-body { grid-column: 2; }
    .v2-file-body p {
        margin: 0;
        color: var(--v2-soft);
        line-height: 1.62;
        font-size: clamp(.94rem, 1.3vw, 1.01rem);
    }
    .v2-file-arrow {
        grid-column: 2;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 800;
        font-size: .8rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--v2-ink);
        margin-top: .2rem;
    }
    .v2-file-arrow i { transition: transform .3s ease; }
    .v2-file:hover .v2-file-arrow { color: var(--primary); }
    .v2-file:hover .v2-file-arrow i { transform: translateX(4px); }

    /* ============================================================
       INDEX — dunkler "gestapelter" Block (Sekundaer-Navigation)
       ============================================================ */
    .v2-deck {
        position: relative;
        border-radius: var(--radius);
        background: var(--bg-dark);
        color: var(--text-light);
        border: var(--v2-edge) solid var(--v2-ink);
        padding: clamp(1.8rem, 4vw, 3.2rem);
        overflow: hidden;
        isolation: isolate;
    }
    .v2-deck::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(55% 70% at 92% 0%, rgba(124,58,237,.26), transparent 58%),
            radial-gradient(48% 64% at 4% 100%, rgba(37,99,235,.3), transparent 58%);
    }
    .v2-deck-head {
        display: grid;
        gap: .5rem;
        margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
        max-width: 60ch;
    }
    .v2-deck-kick {
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: var(--primary-light);
    }
    .v2-deck-head h2 {
        font-size: clamp(1.6rem, 3.8vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -.025em;
        margin: 0;
        color: #fff;
        line-height: 1.05;
    }
    .v2-deck-head p {
        margin: 0;
        color: var(--text-light);
        opacity: .85;
        line-height: 1.6;
    }
    .v2-deck-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
    }
    @media (min-width: 680px) {
        .v2-deck-list { grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.6rem, 4vw, 3.4rem); }
    }
    .v2-deck-link {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: .95rem 0;
        border-top: 1px solid rgba(255,255,255,.12);
        text-decoration: none;
        color: var(--text-light);
        transition: padding-left .25s ease, color .25s ease;
    }
    .v2-deck-link:hover { color: #fff; padding-left: .45rem; }
    .v2-deck-num {
        font-size: .78rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--primary-light);
        min-width: 2.4ch;
    }
    .v2-deck-label { flex: 1; }
    .v2-deck-label b {
        display: block;
        font-weight: 800;
        font-size: 1.02rem;
        color: #fff;
    }
    .v2-deck-label small {
        display: block;
        font-weight: 500;
        font-size: .82rem;
        color: var(--text-light);
        opacity: .7;
        margin-top: .1rem;
    }
    .v2-deck-link .v2-deck-arrow {
        opacity: .5;
        transition: transform .25s ease, opacity .25s ease;
    }
    .v2-deck-link:hover .v2-deck-arrow { opacity: 1; transform: translateX(4px); }

    /* ============================================================
       CTA — ueberlappende Schluss-Panels
       ============================================================ */
    .v2-cta {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1.2rem, 2.5vw, 1.6rem);
    }
    @media (min-width: 900px) {
        .v2-cta { grid-template-columns: 1.45fr 1fr; align-items: stretch; }
    }
    .v2-cta-main {
        position: relative;
        border: var(--v2-edge) solid var(--v2-ink);
        border-radius: var(--radius);
        background: var(--v2-paper);
        padding: clamp(1.8rem, 4vw, 3rem);
        overflow: hidden;
        z-index: 1;
    }
    .v2-cta-main::after {
        content: "";
        position: absolute;
        inset: auto -20% -55% auto;
        width: 50%;
        aspect-ratio: 1;
        background: radial-gradient(circle, var(--primary-glow), transparent 65%);
        pointer-events: none;
    }
    .v2-cta-main h2 {
        font-size: clamp(2rem, 6vw, 3.8rem);
        font-weight: 800;
        letter-spacing: -.03em;
        line-height: 1;
        margin: 0 0 1rem;
        text-wrap: balance;
    }
    .v2-cta-main h2 .v2-grad {
        background: linear-gradient(108deg, var(--primary), var(--accent) 55%, var(--primary-light));
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .v2-cta-main p {
        color: var(--v2-soft);
        font-size: clamp(1rem, 1.5vw, 1.14rem);
        line-height: 1.68;
        max-width: 50ch;
        margin: 0 0 1.6rem;
    }
    .v2-cta-aside {
        position: relative;
        border: var(--v2-edge) solid var(--v2-rule);
        border-radius: var(--radius);
        background: var(--v2-paper-2);
        padding: clamp(1.5rem, 3vw, 2rem);
        display: grid;
        gap: .9rem;
        align-content: start;
        z-index: 2;
    }
    @media (min-width: 900px) { .v2-cta-aside { margin-top: clamp(1.6rem, 2.5vw, 2.4rem); margin-left: clamp(-2rem, -2vw, 0rem); } }
    .v2-cta-aside h3 {
        margin: 0;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--v2-soft);
    }
    .v2-cta-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
    .v2-cta-aside li a {
        display: inline-flex;
        align-items: center;
        gap: .7rem;
        text-decoration: none;
        color: var(--v2-ink);
        font-weight: 600;
        font-size: .96rem;
        transition: gap .25s ease, color .25s ease;
    }
    .v2-cta-aside li a:hover { color: var(--primary); gap: .95rem; }
    .v2-cta-aside li a i { width: 1.2rem; text-align: center; color: var(--primary); }

    /* ---------- gemeinsamer Fokus-Stil ---------- */
    .v2-home a:focus-visible,
    .v2-home button:focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
        border-radius: 12px;
    }

    /* ============================================================
       RESPONSIVE — Broken-Grid sauber in EINE Spalte aufloesen
       ============================================================ */
    @media (max-width: 719px) {
        .v2-tile,
        .v2-file,
        .v2-files > *,
        .v2-news { transform: none !important; }
    }

    /* ============================================================
       REDUCED MOTION
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
        .v2-home .v2-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
        .v2-band-track { animation: none !important; transform: none !important; }
        .v2-hero-top .v2-live i { animation: none !important; }
        .v2-home *,
        .v2-home *::before,
        .v2-home *::after {
            animation-duration: .001ms !important;
            transition-duration: .001ms !important;
        }
        /* statische Offsets bleiben fuer das Layout, nur Bewegung weg */
    }
</style>

    {{-- ============================================================
         HERO — geschichtetes Plakat
         ============================================================ --}}
    <header class="v2-hero" aria-label="Einleitung">
        <div class="v2-hero-ghost" aria-hidden="true">TECH</div>
        <div class="v2-wrap">

            <div class="v2-hero-top v2-rev">
                <span class="v2-brandmini">
                    <img src="{{ asset('img/logo-mark.png') }}" alt="" aria-hidden="true">
                    KOTSCH.TECH
                </span>
                <span class="v2-sep" aria-hidden="true"></span>
                <span class="v2-live"><i class="fa-solid fa-circle" aria-hidden="true"></i> Verfügbar für neue Projekte</span>
                <span class="v2-sep" aria-hidden="true"></span>
                <span>Persönliche Tech-Marke &middot; {{ date('Y') }}</span>
            </div>

            <div class="v2-hero-grid">
                <div class="v2-rev">
                    <span class="v2-kicker">Arthur Kotsch</span>
                    <h1 class="v2-h1">
                        <span class="v2-line">Software,</span>
                        <span class="v2-line">Apps &amp; <span class="v2-mark">Web</span>,</span>
                        <span class="v2-line v2-grad">aus einer Hand.</span>
                        <span class="v2-h1-sub">
                            <strong>Eine Person, viele Disziplinen.</strong> Von der Idee über App,
                            Website und Tool bis zu Hosting und IT-Hilfe — alles unter einem Dach.
                        </span>
                    </h1>
                    <div class="v2-hero-actions">
                        <a class="v2-btn v2-btn-primary" href="{{ route('kontakt') }}">
                            Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                        <a class="v2-btn v2-btn-ghost" href="#v2-deck">
                            Alle Bereiche <i class="fa-solid fa-arrow-down" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <aside class="v2-hero-card v2-rev v2-d2" aria-label="Leistungen im Überblick">
                    <span class="v2-hero-card-tab" aria-hidden="true">Alles aus einer Hand</span>
                    <h2>Was hier entsteht</h2>
                    <ul>
                        <li><i class="fa-solid fa-code" aria-hidden="true"></i> <b>Entwicklung</b> <span>Apps &amp; Software</span></li>
                        <li><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i> <b>Gestaltung</b> <span>Webdesign</span></li>
                        <li><i class="fa-solid fa-toolbox" aria-hidden="true"></i> <b>Werkzeuge</b> <span>420+ Tools</span></li>
                        <li><i class="fa-solid fa-server" aria-hidden="true"></i> <b>Betrieb</b> <span>Hosting &amp; IT</span></li>
                    </ul>
                </aside>
            </div>
        </div>

        {{-- Marquee-Band, ueberlappt den Hero leicht --}}
        <div class="v2-band v2-rev v2-d2" aria-label="Kennzahlen">
            <div class="v2-band-track" aria-hidden="true">
                @php
                    $v2bandItems = [
                        ['9', 'Bereiche'],
                        ['420+', 'Webtools gratis'],
                        ['3', 'Plattformen'],
                        ['1:1', 'Direkter Kontakt'],
                        ['100%', 'Aus einer Hand'],
                        ['iOS · macOS · Android', 'Native Apps'],
                    ];
                @endphp
                @for ($i = 0; $i < 2; $i++)
                    @foreach ($v2bandItems as $bi)
                        <span class="v2-band-item"><b>{{ $bi[0] }}</b> <span>{{ $bi[1] }}</span></span>
                        <span class="v2-band-dot"></span>
                    @endforeach
                @endfor
            </div>
        </div>
    </header>

    {{-- ============================================================
         BLOCK 01 — Plattformen / Entwicklung (Broken-Bento)
         ============================================================ --}}
    <section class="v2-section" aria-label="Software und Apps">
        <div class="v2-wrap">
            <div class="v2-sechead v2-rev">
                <span class="v2-secnum" aria-hidden="true">01</span>
                <h2>Software, die auf jedem Gerät zu Hause ist</h2>
                <span class="v2-sectag">Entwicklung</span>
            </div>

            <div class="v2-bento">
                {{-- Windows --}}
                <a class="v2-tile v2-tile-windows v2-rev" href="{{ route('windows.index') }}" aria-label="Windows-Software ansehen">
                    <div class="v2-tile-top">
                        <span class="v2-tile-icon"><i class="fa-brands fa-windows" aria-hidden="true"></i></span>
                        <span class="v2-tile-no" aria-hidden="true">01</span>
                    </div>
                    <span class="v2-tile-kick">Desktop &middot; Windows</span>
                    <h3>Windows-Software</h3>
                    <p>Schlanke, schnelle Programme für den Windows-Alltag — Werkzeuge, die genau ein Problem sauber lösen, statt mit Funktionen zu überladen.</p>
                    <ul class="v2-chips" aria-hidden="true">
                        <li>Produktivität</li>
                        <li>Utilities</li>
                        <li>Performance</li>
                    </ul>
                    <span class="v2-tile-foot">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- iOS & Mac (grosse Plakat-Kachel) --}}
                <a class="v2-tile v2-tile-apple v2-rev v2-d2" href="{{ route('apple.index') }}" aria-label="iOS und Mac Apps ansehen">
                    <div>
                        <div class="v2-tile-top">
                            <span class="v2-tile-icon"><i class="fa-brands fa-apple" aria-hidden="true"></i></span>
                            <span class="v2-tile-no" aria-hidden="true">02</span>
                        </div>
                        <span class="v2-tile-kick" style="margin-top:.85rem;display:block;">Native &middot; Apple</span>
                        <h3>iOS &amp; Mac Apps</h3>
                        <p>Native Apps für iPhone, iPad und Mac, die sich anfühlen, als gehörten sie ins System — aufgeräumt, schnell, mit Liebe zum Detail.</p>
                        <ul class="v2-chips" aria-hidden="true" style="margin-top:.9rem;">
                            <li>iOS</li>
                            <li>macOS</li>
                            <li>App Store</li>
                        </ul>
                    </div>
                    <span class="v2-tile-foot">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Android --}}
                <a class="v2-tile v2-tile-android v2-rev" href="{{ route('android.index') }}" aria-label="Android Apps ansehen">
                    <div class="v2-tile-top">
                        <span class="v2-tile-icon"><i class="fa-brands fa-android" aria-hidden="true"></i></span>
                        <span class="v2-tile-no" aria-hidden="true">03</span>
                    </div>
                    <span class="v2-tile-kick">Mobil &middot; Android</span>
                    <h3>Android Apps</h3>
                    <p>Material-orientierte Apps mit klarer Struktur. Aktuell in Entwicklung — ein Blick lohnt sich, was als Nächstes erscheint.</p>
                    <span class="v2-tile-foot">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Webdesign --}}
                <a class="v2-tile v2-tile-web v2-rev v2-d2" href="{{ route('web.templates') }}" aria-label="Webdesign ansehen">
                    <div class="v2-tile-top">
                        <span class="v2-tile-icon"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i></span>
                        <span class="v2-tile-no" aria-hidden="true">04</span>
                    </div>
                    <span class="v2-tile-kick">Gestaltung &middot; Web</span>
                    <h3>Webdesign</h3>
                    <p>Websites und Vorlagen, die schnell laden, gut aussehen und konvertieren — modernes Design auf sauberem Code.</p>
                    <span class="v2-tile-foot">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ============================================================
         BLOCK 02 — Webtools + News (Split-Overlap)
         ============================================================ --}}
    <section class="v2-section" aria-label="Webtools und News">
        <div class="v2-wrap">
            <div class="v2-sechead v2-rev">
                <span class="v2-secnum" aria-hidden="true">02</span>
                <h2>Kostenlose Werkzeuge &amp; frische Gedanken</h2>
                <span class="v2-sectag">Werkzeuge &amp; Wissen</span>
            </div>

            <div class="v2-duo">
                {{-- Webtools (gross, dunkel) --}}
                <a class="v2-tools v2-rev" href="{{ route('webtools.show') }}" aria-label="Kostenlose Webtools öffnen">
                    <span class="v2-tools-badge"><i class="fa-solid fa-bolt" aria-hidden="true"></i> Gratis &middot; Im Browser</span>
                    <span class="v2-bignum" aria-hidden="true">420+</span>
                    <h3>Webtools</h3>
                    <p>Über 420 kleine Helfer, die direkt im Browser laufen — ohne Anmeldung, ohne Upload. Konvertieren, rechnen, formatieren und mehr.</p>
                    <div class="v2-tools-grid" aria-hidden="true">
                        <span>Konverter</span>
                        <span>Generatoren</span>
                        <span>Rechner</span>
                        <span>Text &amp; Code</span>
                        <span>Bild &amp; Farbe</span>
                    </div>
                    <span class="v2-tools-foot">Tools öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- News (versetzt) --}}
                <a class="v2-news v2-rev v2-d2" href="{{ route('news.index') }}" aria-label="News und Blog lesen">
                    <span class="v2-news-badge"><i class="fa-solid fa-newspaper" aria-hidden="true"></i> Lesen &middot; Magazin</span>
                    <h3>News &amp; Blog</h3>
                    <p>Artikel rund um Entwicklung, Tools und Technik — praxisnah erklärt, ohne Buzzword-Bingo.</p>
                    <ul class="v2-news-list">
                        <li><i class="fa-solid fa-angle-right" aria-hidden="true"></i> Tutorials &amp; Anleitungen</li>
                        <li><i class="fa-solid fa-angle-right" aria-hidden="true"></i> Updates zu Apps &amp; Tools</li>
                        <li><i class="fa-solid fa-angle-right" aria-hidden="true"></i> Hintergründe &amp; Technik</li>
                    </ul>
                    <span class="v2-news-foot">Artikel lesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ============================================================
         BLOCK 03 — Produkte & Services (versetzte Akten)
         ============================================================ --}}
    <section class="v2-section" aria-label="Shop, Hosting, IT-Hilfe und Dokumente">
        <div class="v2-wrap">
            <div class="v2-sechead v2-rev">
                <span class="v2-secnum" aria-hidden="true">03</span>
                <h2>Produkte &amp; Services, auf die Verlass ist</h2>
                <span class="v2-sectag">Shop &amp; Betrieb</span>
            </div>

            <div class="v2-files">
                {{-- Shop --}}
                <a class="v2-file v2-rev" href="{{ route('shop.index') }}" aria-label="Zum Shop">
                    <span class="v2-file-icon"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i></span>
                    <div>
                        <span class="v2-file-kick">Kaufen &middot; Digital</span>
                        <h3>Shop</h3>
                    </div>
                    <div class="v2-file-body">
                        <p>Digitale Produkte zum sofortigen Download — von praktischen Vorlagen bis zu fertigen Bausteinen. Bezahlen, herunterladen, loslegen.</p>
                    </div>
                    <span class="v2-file-arrow">Zum Shop <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Hosting --}}
                <a class="v2-file v2-rev v2-d2" href="{{ route('hosting.index') }}" aria-label="Hosting ansehen">
                    <span class="v2-file-icon"><i class="fa-solid fa-server" aria-hidden="true"></i></span>
                    <div>
                        <span class="v2-file-kick">Betrieb &middot; Hosting</span>
                        <h3>Hosting</h3>
                    </div>
                    <div class="v2-file-body">
                        <p>Kleines, ehrliches Hosting für Websites und Projekte — persönlich betreut statt anonymes Massengeschäft, mit echtem Ansprechpartner.</p>
                    </div>
                    <span class="v2-file-arrow">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- IT-Hilfe --}}
                <a class="v2-file v2-rev" href="{{ route('it-hilfe.index') }}" aria-label="IT-Hilfe ansehen">
                    <span class="v2-file-icon"><i class="fa-solid fa-life-ring" aria-hidden="true"></i></span>
                    <div>
                        <span class="v2-file-kick">Support &middot; IT</span>
                        <h3>IT-Hilfe</h3>
                    </div>
                    <div class="v2-file-body">
                        <p>Wenn etwas klemmt: schnelle, verständliche IT-Hilfe ohne Fachchinesisch — vom kniffligen PC-Problem bis zur Einrichtung neuer Geräte.</p>
                    </div>
                    <span class="v2-file-arrow">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Dokumente --}}
                <a class="v2-file v2-rev v2-d2" href="{{ route('documents.index') }}" aria-label="Dokumente ansehen">
                    <span class="v2-file-icon"><i class="fa-solid fa-folder-open" aria-hidden="true"></i></span>
                    <div>
                        <span class="v2-file-kick">Ablage &middot; Ressourcen</span>
                        <h3>Dokumente</h3>
                    </div>
                    <div class="v2-file-body">
                        <p>Gesammelte Dokumente, Anleitungen und Ressourcen an einem Ort — übersichtlich zugänglich, wenn du etwas zum Nachschlagen brauchst.</p>
                    </div>
                    <span class="v2-file-arrow">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ============================================================
         INDEX — gestapelter dunkler Block (Sekundaer-Navigation)
         ============================================================ --}}
    <section class="v2-section" id="v2-deck" aria-label="Alle Bereiche im Überblick">
        <div class="v2-wrap">
            <div class="v2-deck v2-rev">
                <div class="v2-deck-head">
                    <span class="v2-deck-kick">Alles auf einen Blick</span>
                    <h2>Jeder Bereich, ein Klick entfernt</h2>
                    <p>Die komplette Welt von KOTSCH.TECH — kompakt verlinkt. Such dir aus, wo du einsteigen möchtest.</p>
                </div>

                <div role="navigation" aria-label="Bereichsübersicht KOTSCH.TECH">
                    <ul class="v2-deck-list">
                        <li>
                            <a class="v2-deck-link" href="{{ route('windows.index') }}">
                                <span class="v2-deck-num">01</span>
                                <span class="v2-deck-label"><b>Windows-Software</b><small>Schlanke Programme für den Desktop</small></span>
                                <i class="fa-solid fa-arrow-right v2-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v2-deck-link" href="{{ route('apple.index') }}">
                                <span class="v2-deck-num">02</span>
                                <span class="v2-deck-label"><b>iOS &amp; Mac Apps</b><small>Native Apps für Apple-Geräte</small></span>
                                <i class="fa-solid fa-arrow-right v2-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v2-deck-link" href="{{ route('android.index') }}">
                                <span class="v2-deck-num">03</span>
                                <span class="v2-deck-label"><b>Android Apps</b><small>Mobile Apps in Entwicklung</small></span>
                                <i class="fa-solid fa-arrow-right v2-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v2-deck-link" href="{{ route('web.templates') }}">
                                <span class="v2-deck-num">04</span>
                                <span class="v2-deck-label"><b>Webdesign</b><small>Websites &amp; Vorlagen</small></span>
                                <i class="fa-solid fa-arrow-right v2-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v2-deck-link" href="{{ route('webtools.show') }}">
                                <span class="v2-deck-num">05</span>
                                <span class="v2-deck-label"><b>Webtools</b><small>420+ kostenlose Browser-Tools</small></span>
                                <i class="fa-solid fa-arrow-right v2-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v2-deck-link" href="{{ route('news.index') }}">
                                <span class="v2-deck-num">06</span>
                                <span class="v2-deck-label"><b>News &amp; Blog</b><small>Artikel rund um Technik</small></span>
                                <i class="fa-solid fa-arrow-right v2-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v2-deck-link" href="{{ route('shop.index') }}">
                                <span class="v2-deck-num">07</span>
                                <span class="v2-deck-label"><b>Shop</b><small>Digitale Produkte zum Download</small></span>
                                <i class="fa-solid fa-arrow-right v2-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v2-deck-link" href="{{ route('hosting.index') }}">
                                <span class="v2-deck-num">08</span>
                                <span class="v2-deck-label"><b>Hosting</b><small>Kleines, persönliches Hosting</small></span>
                                <i class="fa-solid fa-arrow-right v2-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v2-deck-link" href="{{ route('it-hilfe.index') }}">
                                <span class="v2-deck-num">09</span>
                                <span class="v2-deck-label"><b>IT-Hilfe</b><small>Schnelle Hilfe ohne Fachchinesisch</small></span>
                                <i class="fa-solid fa-arrow-right v2-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v2-deck-link" href="{{ route('documents.index') }}">
                                <span class="v2-deck-num">10</span>
                                <span class="v2-deck-label"><b>Dokumente</b><small>Anleitungen &amp; Ressourcen</small></span>
                                <i class="fa-solid fa-arrow-right v2-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         CTA — ueberlappende Schluss-Panels
         ============================================================ --}}
    <section class="v2-section" aria-label="Kontakt aufnehmen">
        <div class="v2-wrap">
            <div class="v2-cta">
                <div class="v2-cta-main v2-rev">
                    <span class="v2-kicker">Der nächste Schritt</span>
                    <h2>Eine Idee im Kopf?<br><span class="v2-grad">Lass sie uns bauen.</span></h2>
                    <p>
                        Ob App, Website, Tool oder ein Problem, das gelöst werden will — schreib mir direkt.
                        Du sprichst mit der Person, die es am Ende auch umsetzt.
                    </p>
                    <a class="v2-btn v2-btn-primary" href="{{ route('kontakt') }}">
                        Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>

                <aside class="v2-cta-aside v2-rev v2-d2" aria-label="Schnellzugriff">
                    <h3>Direkt einsteigen</h3>
                    <ul>
                        <li><a href="{{ route('kontakt') }}"><i class="fa-solid fa-paper-plane" aria-hidden="true"></i> Kontakt aufnehmen</a></li>
                        <li><a href="{{ route('webtools.show') }}"><i class="fa-solid fa-toolbox" aria-hidden="true"></i> Webtools kostenlos nutzen</a></li>
                        <li><a href="{{ route('shop.index') }}"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i> Digitale Produkte im Shop</a></li>
                        <li><a href="{{ route('apple.index') }}"><i class="fa-brands fa-apple" aria-hidden="true"></i> Apps für iOS &amp; Mac</a></li>
                        <li><a href="{{ route('news.index') }}"><i class="fa-solid fa-newspaper" aria-hidden="true"></i> News &amp; Artikel lesen</a></li>
                    </ul>
                </aside>
            </div>
        </div>
    </section>
</div>

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

    // JS aktiv -> Fallback-Klasse entfernen (Observer uebernimmt das Reveal)
    root.classList.remove('v2-no-js');

    var items = root.querySelectorAll('.v2-rev');
    if (!items.length) { return; }

    var reduce = false;
    try {
        reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    } catch (e) { reduce = false; }

    if (reduce || typeof IntersectionObserver === 'undefined') {
        for (var i = 0; i < items.length; i++) { items[i].classList.add('v2-in'); }
        return;
    }

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

    items.forEach(function (el) { io.observe(el); });
})();
</script>

{{-- No-JS Sicherung: alle Reveal-Elemente sofort sichtbar --}}
<noscript>
    <style>.v2-home .v2-rev { opacity: 1 !important; transform: none !important; }</style>
</noscript>
@endsection