@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Software, Apps, Web & IT')
@section('meta_description', 'KOTSCH.TECH von Arthur Kotsch: Softwareentwicklung, iOS-, macOS- & Android-Apps, Windows-Tools, Webdesign, 420+ Webtools, News, Shop, Hosting und IT-Hilfe aus einer Hand.')
@section('og_title', 'KOTSCH.TECH - Software, Apps, Webdesign & IT von Arthur Kotsch')
@section('og_description', 'Eine Person, viele Disziplinen: native Apps, Windows-Software, Webdesign, 420+ kostenlose Webtools, digitaler Shop, Hosting und ehrliche IT-Hilfe - direkt verlinkt.')
@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, kantig inszeniert.')

@section('content')
<div class="v17-home v17-no-js">
<style>
    /* ============================================================
       KOTSCH.TECH - Variante 17: DIAGONAL-SHARD / BROKEN-GRID
       Familie: gebrochene, geschichtete Panels (wie index2) -
       aber mit diagonaler Energie: clip-path-gekerbte Kacheln,
       Schraeg-Schnitte zwischen Sektionen, geneigte Index-Zahlen,
       diagonales Laufband, abgeschraegte Akzent-Splitter.
       Aufgeraeumt: Schraegen sind dezent & systematisch.
       ALLE Selektoren .v17- praefixiert (keine Kollision app.css).
       ============================================================ */

    .v17-home {
        --v17-ink: var(--text-main);
        --v17-soft: var(--text-muted);
        --v17-rule: var(--border);
        --v17-paper: var(--bg);
        --v17-paper-2: var(--bg-light);
        --v17-night: var(--bg-dark);
        --v17-edge: 2px;
        --v17-gutter: clamp(1.15rem, 4vw, 4.5rem);
        --v17-ease: cubic-bezier(0.16, 0.84, 0.44, 1);
        /* zentrale Kerb-Groesse fuer die diagonale clip-path-Sprache */
        --v17-notch: clamp(18px, 2.6vw, 34px);
        color: var(--v17-ink);
        background: var(--v17-paper);
        position: relative;
        overflow-x: clip;
        isolation: isolate;
        font-feature-settings: "ss01" on;
        font-synthesis: none;
    }

    /* feines Linienraster + zwei sanfte Farb-Auren als verbindende Ebene */
    .v17-home::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
            linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
        background-size: clamp(46px, 7vw, 96px) clamp(46px, 7vw, 96px);
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
        opacity: 0.8;
    }
    .v17-home::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(46% 36% at 86% 5%, var(--primary-glow), transparent 62%),
            radial-gradient(42% 34% at 5% 26%, rgba(124, 58, 237, 0.15), transparent 60%);
        opacity: 0.85;
    }
    .v17-home > * { position: relative; z-index: 1; }

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

    /* ---------- Reveal (No-JS-Fallback sichtbar) ---------- */
    .v17-rev {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s var(--v17-ease), transform 0.8s var(--v17-ease);
        will-change: opacity, transform;
    }
    .v17-rev.v17-in { opacity: 1; transform: none; }
    .v17-home.v17-no-js .v17-rev { opacity: 1; transform: none; }
    .v17-d1 { transition-delay: 0.06s; }
    .v17-d2 { transition-delay: 0.12s; }
    .v17-d3 { transition-delay: 0.18s; }
    .v17-d4 { transition-delay: 0.24s; }

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

    /* ---------- Buttons (Pillen) ---------- */
    .v17-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-weight: 700;
        font-size: 0.96rem;
        line-height: 1;
        text-decoration: none;
        border-radius: 999px;
        padding: 0.95rem 1.6rem;
        transition: transform 0.28s var(--v17-ease), box-shadow 0.28s var(--v17-ease),
                    background 0.28s var(--v17-ease), color 0.28s var(--v17-ease), border-color 0.28s var(--v17-ease);
        border: var(--v17-edge) solid transparent;
    }
    .v17-btn i { font-size: 0.85em; transition: transform 0.28s var(--v17-ease); }
    .v17-btn:hover i { transform: translateX(4px); }
    .v17-btn-primary {
        background: linear-gradient(120deg, var(--primary), var(--accent));
        color: #fff;
        box-shadow: 0 18px 40px -18px var(--primary-glow);
    }
    .v17-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -20px var(--primary-glow); }
    .v17-btn-primary:hover i.fa-arrow-down { transform: translateY(3px); }
    .v17-btn-ghost {
        background: var(--v17-paper);
        color: var(--v17-ink);
        border-color: var(--v17-ink);
    }
    .v17-btn-ghost:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary); }

    /* ============================================================
       HERO — geschichtetes Plakat mit diagonalem Splitter
       ============================================================ */
    .v17-hero {
        padding-top: clamp(128px, 16vh, 184px);
        padding-bottom: clamp(2rem, 6vw, 4.5rem);
        position: relative;
    }

    /* Riesen-Geister-Wortmarke hinter dem Titel, leicht geneigt */
    .v17-hero-ghost {
        position: absolute;
        top: clamp(150px, 16vh, 220px);
        right: -2.5vw;
        font-size: clamp(7rem, 29vw, 27rem);
        font-weight: 800;
        letter-spacing: -0.06em;
        line-height: 0.8;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(37, 99, 235, 0.12);
        transform: rotate(-3deg);
        transform-origin: right center;
        pointer-events: none;
        user-select: none;
        z-index: 0;
        white-space: nowrap;
    }

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

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

    .v17-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
    }
    .v17-kicker::before {
        content: "";
        width: 30px;
        height: 2px;
        background: linear-gradient(90deg, var(--primary), var(--accent));
        /* spitz zulaufender Akzentstrich — diagonale Sprache */
        clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
    }

    .v17-h1 {
        font-size: clamp(2.7rem, 9.4vw, 6.9rem);
        line-height: 0.9;
        letter-spacing: -0.035em;
        font-weight: 800;
        margin: 0;
        text-wrap: balance;
    }
    .v17-h1 .v17-line { display: block; }
    .v17-h1 .v17-grad {
        background: linear-gradient(108deg, var(--primary) 0%, var(--accent) 50%, var(--primary-light) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    /* diagonaler "Splitter" hinter einem Wort (geneigte Flaeche statt Tape) */
    .v17-h1 .v17-mark {
        position: relative;
        display: inline-block;
        z-index: 0;
        padding-inline: 0.16em;
    }
    .v17-h1 .v17-mark::before {
        content: "";
        position: absolute;
        inset: 10% -0.04em 14% -0.04em;
        background: var(--primary-soft);
        transform: skewX(-9deg);
        z-index: -1;
        border-radius: 3px;
    }

    .v17-h1-sub {
        display: block;
        margin-top: clamp(0.85rem, 2vw, 1.25rem);
        font-size: clamp(1rem, 2.1vw, 1.42rem);
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: -0.01em;
        color: var(--v17-soft);
        max-width: 32ch;
    }
    .v17-h1-sub strong { color: var(--v17-ink); font-weight: 700; }

    .v17-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem 0.8rem;
        margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
    }

    /* die rechte, ueberlappende Spec-Karte mit gekerbter Ecke */
    .v17-hero-card {
        position: relative;
        border: var(--v17-edge) solid var(--v17-ink);
        background: var(--v17-paper);
        padding: clamp(1.35rem, 2.6vw, 1.75rem);
        box-shadow: var(--shadow-lg);
        z-index: 3;
        /* obere rechte Ecke diagonal abgeschnitten */
        clip-path: polygon(0 0, calc(100% - var(--v17-notch)) 0, 100% var(--v17-notch), 100% 100%, 0 100%);
        border-radius: 6px;
    }
    @media (min-width: 980px) {
        .v17-hero-card { margin-bottom: clamp(-3rem, -3vw, -1.4rem); margin-left: clamp(-1.4rem, -2vw, 0rem); }
    }
    .v17-hero-card-tab {
        position: absolute;
        top: 0.9rem;
        left: clamp(1.1rem, 3vw, 1.6rem);
        transform: skewX(-9deg);
        background: linear-gradient(120deg, var(--primary), var(--accent));
        color: #fff;
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 0.4rem 0.8rem;
        box-shadow: 0 10px 22px -10px var(--primary-glow);
    }
    .v17-hero-card-tab span { display: inline-block; transform: skewX(9deg); }
    .v17-hero-card h2 {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--v17-soft);
        margin: 2.2rem 0 1rem;
    }
    .v17-hero-card ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0;
    }
    .v17-hero-card li {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.72rem 0;
        border-top: 1px solid var(--v17-rule);
        font-weight: 600;
        font-size: 0.95rem;
    }
    .v17-hero-card li:first-child { border-top: 0; padding-top: 0; }
    .v17-hero-card li i {
        width: 34px;
        height: 34px;
        flex: none;
        display: inline-grid;
        place-items: center;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: 0.9rem;
        /* gekerbte Mini-Tiles */
        clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    }
    .v17-hero-card li b { font-weight: 800; }
    .v17-hero-card li span {
        margin-left: auto;
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--v17-soft);
    }

    /* ---------- diagonales Laufband (Statzeile) ---------- */
    .v17-band {
        position: relative;
        z-index: 4;
        margin-top: clamp(2.2rem, 5vw, 3.6rem);
        background: var(--v17-ink);
        color: #fff;
        overflow: hidden;
        /* leicht parallelogramm-foermige Schraegkanten oben/unten */
        clip-path: polygon(0 var(--v17-notch), 100% 0, 100% calc(100% - var(--v17-notch)), 0 100%);
        padding-block: var(--v17-notch);
        margin-block: calc(var(--v17-notch) * -0.4) 0;
    }
    .v17-band-track {
        display: flex;
        align-items: center;
        gap: clamp(1.6rem, 4vw, 3rem);
        width: max-content;
        padding-block: clamp(0.7rem, 2vw, 1rem);
        animation: v17-marquee 38s linear infinite;
    }
    .v17-band:hover .v17-band-track,
    .v17-band:focus-within .v17-band-track { animation-play-state: paused; }
    @keyframes v17-marquee { to { transform: translateX(-50%); } }
    .v17-band-item {
        display: inline-flex;
        align-items: baseline;
        gap: 0.6rem;
        white-space: nowrap;
        font-weight: 700;
    }
    .v17-band-item b {
        font-size: clamp(1.1rem, 2vw, 1.5rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
        background: linear-gradient(100deg, #fff, var(--primary-light));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .v17-band-item span {
        font-size: 0.76rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--text-light);
        opacity: 0.82;
    }
    .v17-band-dot {
        width: 7px;
        height: 7px;
        background: var(--primary-light);
        flex: none;
        transform: rotate(45deg);
    }

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

    .v17-sechead {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.6rem 1.5rem;
        margin-bottom: clamp(2rem, 4.5vw, 3.2rem);
        align-items: end;
    }
    @media (min-width: 760px) {
        .v17-sechead { grid-template-columns: auto 1fr auto; }
    }
    .v17-sechead .v17-secnum {
        font-size: clamp(2.4rem, 6vw, 4.4rem);
        font-weight: 800;
        line-height: 0.8;
        letter-spacing: -0.04em;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--primary);
        font-variant-numeric: tabular-nums;
        transform: skewX(-9deg);
        transform-origin: bottom left;
    }
    .v17-sechead h2 {
        font-size: clamp(1.55rem, 3.6vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -0.025em;
        line-height: 1.04;
        margin: 0;
        max-width: 24ch;
    }
    .v17-sechead .v17-sectag {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--v17-soft);
        white-space: nowrap;
        align-self: center;
    }
    .v17-sechead .v17-sectag::before {
        content: "";
        width: 9px;
        height: 9px;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        transform: rotate(45deg);
        flex: none;
    }
    @media (min-width: 760px) { .v17-sechead .v17-sectag { align-self: end; padding-bottom: 0.45rem; } }

    /* ============================================================
       BROKEN BENTO — Block 01 (Plattformen / Entwicklung)
       gekerbte, versetzte Tiles mit diagonaler Energie
       ============================================================ */
    .v17-bento {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(0.9rem, 2vw, 1.3rem);
    }
    @media (min-width: 720px) {
        .v17-bento {
            grid-template-columns: repeat(6, 1fr);
            grid-auto-rows: minmax(0, auto);
            gap: clamp(1rem, 1.6vw, 1.4rem);
        }
    }

    .v17-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        text-decoration: none;
        color: var(--v17-ink);
        background: var(--v17-paper);
        border: var(--v17-edge) solid var(--v17-rule);
        padding: clamp(1.35rem, 2.4vw, 1.9rem);
        overflow: hidden;
        isolation: isolate;
        border-radius: 6px;
        /* obere rechte Ecke diagonal gekerbt (Signatur) */
        clip-path: polygon(0 0, calc(100% - var(--v17-notch)) 0, 100% var(--v17-notch), 100% 100%, 0 100%);
        transition: transform 0.35s var(--v17-ease), box-shadow 0.35s var(--v17-ease), border-color 0.35s var(--v17-ease);
    }
    /* diagonaler Lichtkeil in der gekerbten Ecke */
    .v17-tile::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: var(--v17-notch);
        height: var(--v17-notch);
        background: linear-gradient(135deg, var(--primary-soft), transparent);
        z-index: 0;
    }
    .v17-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 0.4s ease;
        z-index: -1;
    }
    .v17-tile:hover {
        transform: translateY(-7px);
        box-shadow: var(--shadow-lg);
        border-color: var(--v17-ink);
    }
    .v17-tile:hover::after { opacity: 1; }
    .v17-tile > * { position: relative; z-index: 1; }

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

    .v17-tile-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }
    .v17-tile-icon {
        width: 50px;
        height: 50px;
        flex: none;
        display: inline-grid;
        place-items: center;
        font-size: 1.3rem;
        background: var(--primary-soft);
        color: var(--primary);
        /* gekerbtes Icon-Tile */
        clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
        transition: transform 0.35s var(--v17-ease), background 0.35s ease, color 0.35s ease;
    }
    .v17-tile-apple .v17-tile-icon,
    .v17-tile:hover .v17-tile-icon {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: #fff;
    }
    .v17-tile:hover .v17-tile-icon { transform: rotate(-6deg) scale(1.05); }
    /* geneigte Geister-Index-Ziffer in der Ecke */
    .v17-tile-no {
        font-size: clamp(2.2rem, 5vw, 3.4rem);
        font-weight: 800;
        line-height: 0.8;
        letter-spacing: -0.04em;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--v17-rule);
        font-variant-numeric: tabular-nums;
        transform: skewX(-9deg);
        transition: -webkit-text-stroke-color 0.35s ease;
    }
    .v17-tile:hover .v17-tile-no { -webkit-text-stroke-color: var(--primary-light); }

    .v17-tile-kick {
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--v17-soft);
    }
    .v17-tile h3 {
        font-size: clamp(1.3rem, 2.6vw, 1.85rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.08;
        margin: 0;
        transition: color 0.3s ease;
    }
    .v17-tile-apple h3 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
    .v17-tile:hover h3 { color: var(--primary); }
    .v17-tile p {
        margin: 0;
        color: var(--v17-soft);
        line-height: 1.62;
        font-size: clamp(0.95rem, 1.3vw, 1.02rem);
    }
    .v17-tile-foot {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 800;
        font-size: 0.82rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--v17-ink);
        padding-top: 0.5rem;
    }
    .v17-tile-foot i { transition: transform 0.3s ease; }
    .v17-tile:hover .v17-tile-foot { color: var(--primary); }
    .v17-tile:hover .v17-tile-foot i { transform: translateX(4px); }

    .v17-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .v17-chips li {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--v17-soft);
        background: var(--v17-paper-2);
        border: 1px solid var(--v17-rule);
        padding: 0.28rem 0.6rem;
        /* leicht angeschraegte Chips */
        clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    }
    .v17-tile-apple .v17-chips li { background: rgba(255, 255, 255, 0.7); }

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

    .v17-tools {
        position: relative;
        overflow: hidden;
        background: var(--v17-night);
        color: var(--text-light);
        border: var(--v17-edge) solid var(--v17-ink);
        padding: clamp(1.6rem, 3.4vw, 2.6rem);
        text-decoration: none;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        isolation: isolate;
        border-radius: 6px;
        clip-path: polygon(0 0, calc(100% - var(--v17-notch)) 0, 100% var(--v17-notch), 100% 100%, 0 100%);
        transition: transform 0.35s var(--v17-ease), box-shadow 0.35s var(--v17-ease);
    }
    .v17-tools::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(60% 80% at 90% 4%, rgba(124, 58, 237, 0.34), transparent 58%),
            radial-gradient(54% 74% at 2% 100%, rgba(37, 99, 235, 0.42), transparent 58%);
    }
    .v17-tools::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.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%);
    }
    .v17-tools:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .v17-tools-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        align-self: flex-start;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--primary-light);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        padding: 0.4rem 0.85rem;
    }
    .v17-tools .v17-bignum {
        font-size: clamp(3.4rem, 9vw, 6rem);
        font-weight: 800;
        line-height: 0.85;
        letter-spacing: -0.04em;
        margin: 0.2rem 0 0;
        font-variant-numeric: tabular-nums;
        background: linear-gradient(100deg, #fff, var(--primary-light) 70%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .v17-tools h3 {
        font-size: clamp(1.5rem, 3vw, 2.1rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0;
        color: #fff;
    }
    .v17-tools p {
        margin: 0;
        color: var(--text-light);
        opacity: 0.9;
        line-height: 1.66;
        max-width: 46ch;
        font-size: clamp(0.96rem, 1.4vw, 1.05rem);
    }
    .v17-tools-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.3rem;
    }
    .v17-tools-grid span {
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--text-light);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        padding: 0.32rem 0.65rem;
        clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    }
    .v17-tools-foot {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        font-weight: 800;
        font-size: 0.85rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #fff;
        padding-top: 0.8rem;
    }
    .v17-tools-foot i { transition: transform 0.3s ease; }
    .v17-tools:hover .v17-tools-foot i { transform: translateX(5px); }

    /* News-Karte, versetzt nach oben (Overlap-Geste), gekerbt unten links */
    .v17-news {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        text-decoration: none;
        color: var(--v17-ink);
        border: var(--v17-edge) solid var(--v17-rule);
        background: var(--v17-paper);
        padding: clamp(1.5rem, 3vw, 2.2rem);
        overflow: hidden;
        border-radius: 6px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--v17-notch)), calc(100% - var(--v17-notch)) 100%, 0 100%);
        transition: transform 0.35s var(--v17-ease), box-shadow 0.35s var(--v17-ease), border-color 0.35s var(--v17-ease);
    }
    @media (min-width: 900px) { .v17-news { margin-top: clamp(-2.4rem, -2.2vw, -1rem); } }
    .v17-news:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--v17-ink); }
    .v17-news-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        align-self: flex-start;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--primary);
    }
    .v17-news h3 {
        font-size: clamp(1.4rem, 2.8vw, 1.95rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0;
        line-height: 1.08;
        transition: color 0.3s ease;
    }
    .v17-news:hover h3 { color: var(--primary); }
    .v17-news p {
        margin: 0;
        color: var(--v17-soft);
        line-height: 1.64;
        font-size: clamp(0.95rem, 1.3vw, 1.02rem);
    }
    .v17-news-list {
        list-style: none;
        margin: 0.2rem 0 0;
        padding: 0;
        display: grid;
        gap: 0;
    }
    .v17-news-list li {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.65rem 0;
        border-top: 1px solid var(--v17-rule);
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--v17-soft);
    }
    .v17-news-list li i { color: var(--primary); font-size: 0.8rem; }
    .v17-news-foot {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 800;
        font-size: 0.82rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--v17-ink);
        padding-top: 0.6rem;
    }
    .v17-news-foot i { transition: transform 0.3s ease; }
    .v17-news:hover .v17-news-foot { color: var(--primary); }
    .v17-news:hover .v17-news-foot i { transform: translateX(4px); }

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

    .v17-file {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1rem 1.2rem;
        align-items: start;
        text-decoration: none;
        color: var(--v17-ink);
        background: var(--v17-paper);
        border: var(--v17-edge) solid var(--v17-rule);
        padding: clamp(1.35rem, 2.6vw, 1.9rem);
        padding-left: clamp(1.6rem, 3vw, 2.2rem);
        overflow: hidden;
        border-radius: 6px;
        transition: transform 0.35s var(--v17-ease), box-shadow 0.35s var(--v17-ease), border-color 0.35s var(--v17-ease);
    }
    /* diagonale Akzentkante links (aufschiebend), spitz */
    .v17-file::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 7px;
        background: linear-gradient(180deg, var(--primary), var(--accent));
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 0 100%);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.4s var(--v17-ease);
    }
    .v17-file:hover { box-shadow: var(--shadow-lg); border-color: var(--v17-ink); }
    .v17-file:hover::before { transform: scaleY(1); }
    .v17-file-icon {
        grid-row: span 2;
        width: 54px;
        height: 54px;
        display: inline-grid;
        place-items: center;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: 1.3rem;
        clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
        transition: transform 0.35s var(--v17-ease), background 0.35s ease, color 0.35s ease;
    }
    .v17-file:hover .v17-file-icon {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: #fff;
        transform: rotate(-6deg) scale(1.05);
    }
    .v17-file-kick {
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--v17-soft);
        display: block;
        margin-bottom: 0.3rem;
    }
    .v17-file h3 {
        font-size: clamp(1.2rem, 2.3vw, 1.55rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0;
        line-height: 1.1;
        transition: color 0.3s ease;
    }
    .v17-file:hover h3 { color: var(--primary); }
    .v17-file-body { grid-column: 2; }
    .v17-file-body p {
        margin: 0;
        color: var(--v17-soft);
        line-height: 1.62;
        font-size: clamp(0.94rem, 1.3vw, 1.01rem);
    }
    .v17-file-arrow {
        grid-column: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 800;
        font-size: 0.8rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--v17-ink);
        margin-top: 0.2rem;
    }
    .v17-file-arrow i { transition: transform 0.3s ease; }
    .v17-file:hover .v17-file-arrow { color: var(--primary); }
    .v17-file:hover .v17-file-arrow i { transform: translateX(4px); }

    /* ============================================================
       INDEX — dunkler "Splitter"-Block (Sekundaer-Navigation)
       ============================================================ */
    .v17-deck {
        position: relative;
        background: var(--v17-night);
        color: var(--text-light);
        border: var(--v17-edge) solid var(--v17-ink);
        padding: clamp(1.8rem, 4vw, 3.2rem);
        overflow: hidden;
        isolation: isolate;
        border-radius: 6px;
        clip-path: polygon(0 var(--v17-notch), var(--v17-notch) 0, 100% 0, 100% calc(100% - var(--v17-notch)), calc(100% - var(--v17-notch)) 100%, 0 100%);
    }
    .v17-deck::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(55% 70% at 92% 0%, rgba(124, 58, 237, 0.26), transparent 58%),
            radial-gradient(48% 64% at 4% 100%, rgba(37, 99, 235, 0.3), transparent 58%);
    }
    .v17-deck-head {
        display: grid;
        gap: 0.5rem;
        margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
        max-width: 60ch;
    }
    .v17-deck-kick {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--primary-light);
    }
    .v17-deck-kick::before {
        content: "";
        width: 9px;
        height: 9px;
        background: var(--primary-light);
        transform: rotate(45deg);
        flex: none;
    }
    .v17-deck-head h2 {
        font-size: clamp(1.6rem, 3.8vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -0.025em;
        margin: 0;
        color: #fff;
        line-height: 1.05;
    }
    .v17-deck-head p {
        margin: 0;
        color: var(--text-light);
        opacity: 0.85;
        line-height: 1.6;
    }
    .v17-deck-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
    }
    @media (min-width: 680px) {
        .v17-deck-list { grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.6rem, 4vw, 3.4rem); }
    }
    .v17-deck-link {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.95rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        text-decoration: none;
        color: var(--text-light);
        transition: padding-left 0.25s ease, color 0.25s ease;
    }
    .v17-deck-link:hover { color: #fff; padding-left: 0.5rem; }
    .v17-deck-num {
        font-size: 0.78rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--primary-light);
        min-width: 2.4ch;
        transform: skewX(-9deg);
    }
    .v17-deck-label { flex: 1; min-width: 0; }
    .v17-deck-label b {
        display: block;
        font-weight: 800;
        font-size: 1.02rem;
        color: #fff;
    }
    .v17-deck-label small {
        display: block;
        font-weight: 500;
        font-size: 0.82rem;
        color: var(--text-light);
        opacity: 0.7;
        margin-top: 0.1rem;
    }
    .v17-deck-link .v17-deck-arrow {
        opacity: 0.5;
        flex: none;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .v17-deck-link:hover .v17-deck-arrow { opacity: 1; transform: translateX(4px); }

    /* ============================================================
       CTA — ueberlappende, gekerbte Schluss-Panels
       ============================================================ */
    .v17-cta {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1.2rem, 2.5vw, 1.6rem);
    }
    @media (min-width: 900px) {
        .v17-cta { grid-template-columns: 1.45fr 1fr; align-items: stretch; }
    }
    .v17-cta-main {
        position: relative;
        border: var(--v17-edge) solid var(--v17-ink);
        background: var(--v17-paper);
        padding: clamp(1.8rem, 4vw, 3rem);
        overflow: hidden;
        z-index: 1;
        border-radius: 6px;
        clip-path: polygon(0 0, calc(100% - var(--v17-notch)) 0, 100% var(--v17-notch), 100% 100%, 0 100%);
    }
    .v17-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;
    }
    .v17-cta-main h2 {
        font-size: clamp(2rem, 6vw, 3.8rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
        margin: 0 0 1rem;
        text-wrap: balance;
    }
    .v17-cta-main h2 .v17-grad {
        background: linear-gradient(108deg, var(--primary), var(--accent) 55%, var(--primary-light));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .v17-cta-main p {
        color: var(--v17-soft);
        font-size: clamp(1rem, 1.5vw, 1.14rem);
        line-height: 1.68;
        max-width: 50ch;
        margin: 0 0 1.6rem;
    }
    .v17-cta-aside {
        position: relative;
        border: var(--v17-edge) solid var(--v17-rule);
        background: var(--v17-paper-2);
        padding: clamp(1.5rem, 3vw, 2rem);
        display: grid;
        gap: 0.9rem;
        align-content: start;
        z-index: 2;
        border-radius: 6px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, var(--v17-notch) 100%, 0 calc(100% - var(--v17-notch)));
    }
    @media (min-width: 900px) { .v17-cta-aside { margin-top: clamp(1.6rem, 2.5vw, 2.4rem); margin-left: clamp(-2rem, -2vw, 0rem); } }
    .v17-cta-aside h3 {
        margin: 0;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--v17-soft);
    }
    .v17-cta-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
    .v17-cta-aside li a {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        text-decoration: none;
        color: var(--v17-ink);
        font-weight: 600;
        font-size: 0.96rem;
        transition: gap 0.25s ease, color 0.25s ease;
    }
    .v17-cta-aside li a:hover { color: var(--primary); gap: 0.95rem; }
    .v17-cta-aside li a i { width: 1.2rem; text-align: center; color: var(--primary); }

    .v17-signoff {
        margin-top: clamp(1.6rem, 3vw, 2.2rem);
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        font-size: 0.74rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--v17-soft);
    }
    .v17-signoff img { height: 18px; width: auto; opacity: 0.85; }

    /* ============================================================
       RESPONSIVE — Broken-Grid sauber in EINE Spalte aufloesen
       ============================================================ */
    @media (max-width: 719px) {
        .v17-tile,
        .v17-file,
        .v17-files > *,
        .v17-news { transform: none !important; }
    }
    @media (max-width: 520px) {
        /* sehr schmal: Kerben verkleinern, damit nichts zu stark abschneidet */
        .v17-home { --v17-notch: 16px; }
    }

    /* ============================================================
       REDUCED MOTION
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
        .v17-home .v17-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
        .v17-band-track { animation: none !important; transform: none !important; }
        .v17-hero-top .v17-live i { animation: none !important; }
        .v17-home *,
        .v17-home *::before,
        .v17-home *::after {
            animation-duration: 0.001ms !important;
            transition-duration: 0.001ms !important;
        }
    }
</style>

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

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

            <div class="v17-hero-grid">
                <div class="v17-rev">
                    <span class="v17-kicker">Arthur Kotsch</span>
                    <h1 class="v17-h1">
                        <span class="v17-line">Software,</span>
                        <span class="v17-line">Apps &amp; <span class="v17-mark">Web</span>,</span>
                        <span class="v17-line v17-grad">aus einer Hand.</span>
                        <span class="v17-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="v17-hero-actions">
                        <a class="v17-btn v17-btn-primary" href="{{ route('kontakt') }}">
                            Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                        <a class="v17-btn v17-btn-ghost" href="#v17-deck">
                            Alle Bereiche <i class="fa-solid fa-arrow-down" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <aside class="v17-hero-card v17-rev v17-d2" aria-label="Leistungen im Überblick">
                    <span class="v17-hero-card-tab" aria-hidden="true"><span>Alles aus einer Hand</span></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>

        {{-- diagonales Marquee-Band, ueberlappt den Hero --}}
        <div class="v17-band v17-rev v17-d2" aria-label="Kennzahlen">
            <div class="v17-band-track" aria-hidden="true">
                @php
                    $v17bandItems = [
                        ['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 ($v17bandItems as $bi)
                        <span class="v17-band-item"><b>{{ $bi[0] }}</b> <span>{{ $bi[1] }}</span></span>
                        <span class="v17-band-dot"></span>
                    @endforeach
                @endfor
            </div>
        </div>
    </header>

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

            <div class="v17-bento">
                {{-- Windows --}}
                <a class="v17-tile v17-tile-windows v17-rev" href="{{ route('windows.index') }}" aria-label="Windows-Software ansehen">
                    <div class="v17-tile-top">
                        <span class="v17-tile-icon"><i class="fa-brands fa-windows" aria-hidden="true"></i></span>
                        <span class="v17-tile-no" aria-hidden="true">01</span>
                    </div>
                    <span class="v17-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="v17-chips" aria-hidden="true">
                        <li>Produktivität</li>
                        <li>Utilities</li>
                        <li>Performance</li>
                    </ul>
                    <span class="v17-tile-foot">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- iOS & Mac (grosse Plakat-Kachel) --}}
                <a class="v17-tile v17-tile-apple v17-rev v17-d2" href="{{ route('apple.index') }}" aria-label="iOS und Mac Apps ansehen">
                    <div>
                        <div class="v17-tile-top">
                            <span class="v17-tile-icon"><i class="fa-brands fa-apple" aria-hidden="true"></i></span>
                            <span class="v17-tile-no" aria-hidden="true">02</span>
                        </div>
                        <span class="v17-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="v17-chips" aria-hidden="true" style="margin-top:.9rem;">
                            <li>iOS</li>
                            <li>macOS</li>
                            <li>App Store</li>
                        </ul>
                    </div>
                    <span class="v17-tile-foot">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Android --}}
                <a class="v17-tile v17-tile-android v17-rev" href="{{ route('android.index') }}" aria-label="Android Apps ansehen">
                    <div class="v17-tile-top">
                        <span class="v17-tile-icon"><i class="fa-brands fa-android" aria-hidden="true"></i></span>
                        <span class="v17-tile-no" aria-hidden="true">03</span>
                    </div>
                    <span class="v17-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="v17-tile-foot">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Webdesign --}}
                <a class="v17-tile v17-tile-web v17-rev v17-d2" href="{{ route('web.templates') }}" aria-label="Webdesign ansehen">
                    <div class="v17-tile-top">
                        <span class="v17-tile-icon"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i></span>
                        <span class="v17-tile-no" aria-hidden="true">04</span>
                    </div>
                    <span class="v17-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="v17-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="v17-section" aria-label="Webtools und News">
        <div class="v17-wrap">
            <div class="v17-sechead v17-rev">
                <span class="v17-secnum" aria-hidden="true">02</span>
                <h2>Kostenlose Werkzeuge &amp; frische Gedanken</h2>
                <span class="v17-sectag">Werkzeuge &amp; Wissen</span>
            </div>

            <div class="v17-duo">
                {{-- Webtools (gross, dunkel) --}}
                <a class="v17-tools v17-rev" href="{{ route('webtools.show') }}" aria-label="Kostenlose Webtools öffnen">
                    <span class="v17-tools-badge"><i class="fa-solid fa-bolt" aria-hidden="true"></i> Gratis &middot; Im Browser</span>
                    <span class="v17-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="v17-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="v17-tools-foot">Tools öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- News (versetzt) --}}
                <a class="v17-news v17-rev v17-d2" href="{{ route('news.index') }}" aria-label="News und Blog lesen">
                    <span class="v17-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="v17-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="v17-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 Splitter)
         ============================================================ --}}
    <section class="v17-section" aria-label="Shop, Hosting, IT-Hilfe und Dokumente">
        <div class="v17-wrap">
            <div class="v17-sechead v17-rev">
                <span class="v17-secnum" aria-hidden="true">03</span>
                <h2>Produkte &amp; Services, auf die Verlass ist</h2>
                <span class="v17-sectag">Shop &amp; Betrieb</span>
            </div>

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

                {{-- Hosting --}}
                <a class="v17-file v17-rev v17-d2" href="{{ route('hosting.index') }}" aria-label="Hosting ansehen">
                    <span class="v17-file-icon"><i class="fa-solid fa-server" aria-hidden="true"></i></span>
                    <div>
                        <span class="v17-file-kick">Betrieb &middot; Hosting</span>
                        <h3>Hosting</h3>
                    </div>
                    <div class="v17-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="v17-file-arrow">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- IT-Hilfe --}}
                <a class="v17-file v17-rev" href="{{ route('it-hilfe.index') }}" aria-label="IT-Hilfe ansehen">
                    <span class="v17-file-icon"><i class="fa-solid fa-life-ring" aria-hidden="true"></i></span>
                    <div>
                        <span class="v17-file-kick">Support &middot; IT</span>
                        <h3>IT-Hilfe</h3>
                    </div>
                    <div class="v17-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="v17-file-arrow">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

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

    {{-- ============================================================
         INDEX — gekerbter dunkler Block (Sekundaer-Navigation)
         ============================================================ --}}
    <section class="v17-section" id="v17-deck" aria-label="Alle Bereiche im Überblick">
        <div class="v17-wrap">
            <div class="v17-deck v17-rev">
                <div class="v17-deck-head">
                    <span class="v17-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="v17-deck-list">
                        <li>
                            <a class="v17-deck-link" href="{{ route('windows.index') }}">
                                <span class="v17-deck-num">01</span>
                                <span class="v17-deck-label"><b>Windows-Software</b><small>Schlanke Programme für den Desktop</small></span>
                                <i class="fa-solid fa-arrow-right v17-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v17-deck-link" href="{{ route('apple.index') }}">
                                <span class="v17-deck-num">02</span>
                                <span class="v17-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 v17-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v17-deck-link" href="{{ route('android.index') }}">
                                <span class="v17-deck-num">03</span>
                                <span class="v17-deck-label"><b>Android Apps</b><small>Mobile Apps in Entwicklung</small></span>
                                <i class="fa-solid fa-arrow-right v17-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v17-deck-link" href="{{ route('web.templates') }}">
                                <span class="v17-deck-num">04</span>
                                <span class="v17-deck-label"><b>Webdesign</b><small>Websites &amp; Vorlagen</small></span>
                                <i class="fa-solid fa-arrow-right v17-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v17-deck-link" href="{{ route('webtools.show') }}">
                                <span class="v17-deck-num">05</span>
                                <span class="v17-deck-label"><b>Webtools</b><small>420+ kostenlose Browser-Tools</small></span>
                                <i class="fa-solid fa-arrow-right v17-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v17-deck-link" href="{{ route('news.index') }}">
                                <span class="v17-deck-num">06</span>
                                <span class="v17-deck-label"><b>News &amp; Blog</b><small>Artikel rund um Technik</small></span>
                                <i class="fa-solid fa-arrow-right v17-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v17-deck-link" href="{{ route('shop.index') }}">
                                <span class="v17-deck-num">07</span>
                                <span class="v17-deck-label"><b>Shop</b><small>Digitale Produkte zum Download</small></span>
                                <i class="fa-solid fa-arrow-right v17-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v17-deck-link" href="{{ route('hosting.index') }}">
                                <span class="v17-deck-num">08</span>
                                <span class="v17-deck-label"><b>Hosting</b><small>Kleines, persönliches Hosting</small></span>
                                <i class="fa-solid fa-arrow-right v17-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v17-deck-link" href="{{ route('it-hilfe.index') }}">
                                <span class="v17-deck-num">09</span>
                                <span class="v17-deck-label"><b>IT-Hilfe</b><small>Schnelle Hilfe ohne Fachchinesisch</small></span>
                                <i class="fa-solid fa-arrow-right v17-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v17-deck-link" href="{{ route('documents.index') }}">
                                <span class="v17-deck-num">10</span>
                                <span class="v17-deck-label"><b>Dokumente</b><small>Anleitungen &amp; Ressourcen</small></span>
                                <i class="fa-solid fa-arrow-right v17-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         CTA — ueberlappende, gekerbte Schluss-Panels
         ============================================================ --}}
    <section class="v17-section" aria-label="Kontakt aufnehmen">
        <div class="v17-wrap">
            <div class="v17-cta">
                <div class="v17-cta-main v17-rev">
                    <span class="v17-kicker">Der nächste Schritt</span>
                    <h2>Eine Idee im Kopf?<br><span class="v17-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="v17-btn v17-btn-primary" href="{{ route('kontakt') }}">
                        Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                    <div class="v17-signoff">
                        <img src="{{ asset('img/logo-wordmark-solid-cropped.png') }}" alt="KOTSCH.TECH">
                        <span>Persönlich betreut von Arthur Kotsch</span>
                    </div>
                </div>

                <aside class="v17-cta-aside v17-rev v17-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('.v17-home');
    if (!root) { return; }

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

    var items = root.querySelectorAll('.v17-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('v17-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('v17-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>.v17-home .v17-rev { opacity: 1 !important; transform: none !important; }</style>
</noscript>
@endsection