@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Software, Apps & Web')
@section('meta_description', 'KOTSCH.TECH von Arthur Kotsch: Softwareentwicklung, Apps für iOS, macOS & Android, Webdesign, 420+ Webtools, News, Shop, Hosting und IT-Hilfe - filmisch erzählt, alles aus einer Hand.')
@section('og_title', 'KOTSCH.TECH - Die Tech-Marke von Arthur Kotsch in Bewegung')
@section('og_description', 'Eine filmische Reise mit Tiefe: native Apps, Webdesign, 420+ kostenlose Webtools, Shop, Hosting und ehrliche IT-Hilfe. Entwickelt und betreut von Arthur Kotsch.')
@section('twitter_title', 'KOTSCH.TECH - Software, Apps & Web von Arthur Kotsch')
@section('twitter_description', 'Softwareentwicklung, native Apps, Webdesign, 420+ Webtools, Shop, Hosting und IT-Hilfe. Sauber gebaut, persönlich betreut - von Arthur Kotsch.')

@section('content')
<div class="v16-home v16-no-js">
<style>
    /* ============================================================
       KOTSCH.TECH - Variante 16: Cinema + Horizontal-Parallax
       Filmische, bildschirmhohe Baender. INNERHALB jeder Szene
       driften mehrere Ebenen (fern / mitte / nah) horizontal beim
       Scrollen -> raeumliche Tiefe in Bewegung. Scroll-getrieben,
       transform-only, performant (eine rAF-Schleife schreibt CSS-Vars).
       ALLE Selektoren/Keyframes .v16- praefixiert (keine app.css-Kollision).
       ============================================================ */

    .v16-home {
        --v16-ink: var(--text-main);
        --v16-soft: var(--text-muted);
        --v16-line: var(--border);
        --v16-paper: var(--bg);
        --v16-paper-2: var(--bg-light);
        --v16-night: var(--bg-dark);
        --v16-pad-x: clamp(1.15rem, 5vw, 5.5rem);
        --v16-strip-h: clamp(48px, 7vh, 68px);
        --v16-ease: cubic-bezier(0.16, 0.84, 0.44, 1);
        /* zentrale Parallax-Variablen (per JS gesetzt, Default 0) */
        --v16-px: 0;      /* globaler -1..1 Scroll-Fortschritt */
        color: var(--v16-ink);
        background: var(--v16-paper);
        position: relative;
        overflow-x: clip;
        isolation: isolate;
        font-synthesis: none;
    }

    /* Filmkorn / Vignette ueber der ganzen Buehne (dekorativ) */
    .v16-home::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 70;
        pointer-events: none;
        background: radial-gradient(132% 122% at 50% 48%, transparent 60%, rgba(2, 6, 23, 0.07) 100%);
        mix-blend-mode: multiply;
        opacity: 0.9;
    }

    /* ---------- Reveal-Logik (mit No-JS-Fallback) ---------- */
    .v16-rise { opacity: 0; transform: translateY(32px); }
    .v16-rise-sm { opacity: 0; transform: translateY(18px); }
    .v16-zoom { opacity: 0; transform: scale(0.94); }
    .v16-rise, .v16-rise-sm, .v16-zoom {
        transition: opacity 0.9s var(--v16-ease), transform 1s var(--v16-ease);
        transition-delay: var(--v16-d, 0ms);
        will-change: opacity, transform;
    }
    .v16-in.v16-rise, .v16-in.v16-rise-sm, .v16-in.v16-zoom { opacity: 1; transform: none; }
    .v16-home.v16-no-js .v16-rise,
    .v16-home.v16-no-js .v16-rise-sm,
    .v16-home.v16-no-js .v16-zoom { opacity: 1; transform: none; }

    /* ============================================================
       SZENEN-GRUNDGERUEST (Cinema-Baender)
       ============================================================ */
    .v16-scene {
        position: relative;
        min-height: 100svh;
        display: flex;
        align-items: center;
        padding: clamp(6.5rem, 13vh, 9.5rem) 0 calc(var(--v16-strip-h) + clamp(3rem, 7vh, 5rem));
        overflow: hidden;
        isolation: isolate;
        /* je Szene gesetzt: lokaler -1..1 Fortschritt der eigenen Szene */
        --v16-s: 0;
    }
    .v16-scene--hero { padding-top: clamp(8.5rem, 17vh, 12rem); }

    .v16-inner {
        width: 100%;
        max-width: var(--container-width);
        margin-inline: auto;
        padding-inline: var(--v16-pad-x);
        position: relative;
        z-index: 3;
    }

    /* ---------- PARALLAX-EBENEN ----------
       .v16-layer driftet horizontal; --v16-depth steuert die Staerke.
       Verschiebung = lokaler Szenenfortschritt (-1..1) * depth (px).
       Nur translate3d -> GPU, kein Layout/Reflow. */
    .v16-plane {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
    }
    .v16-layer {
        position: absolute;
        will-change: transform;
        transform: translate3d(calc(var(--v16-s) * var(--v16-depth, 0px)), 0, 0);
        transition: transform 0.08s linear;
    }
    /* Tiefen-Presets */
    .v16-layer.d-far  { --v16-depth: -120px; }
    .v16-layer.d-mid  { --v16-depth: 70px; }
    .v16-layer.d-near { --v16-depth: 150px; }
    .v16-layer.d-rev  { --v16-depth: -210px; }

    /* Riesige driftende Hintergrund-Szenennummer (filmische Kapitel-Marke) */
    .v16-bignum {
        top: 50%;
        right: clamp(-1rem, 2vw, 3rem);
        translate: 0 -50%;
        font-size: clamp(11rem, 40vw, 34rem);
        font-weight: 800;
        line-height: 0.66;
        letter-spacing: -0.06em;
        color: var(--v16-ink);
        opacity: 0.04;
        user-select: none;
        font-variant-numeric: tabular-nums;
        transform: translate3d(calc(var(--v16-s) * var(--v16-depth, 0px)), -50%, 0);
    }
    .v16-scene.is-dark .v16-bignum { color: #fff; opacity: 0.06; }

    /* Driftende Geister-Wortmarke (zweite Tiefenebene) */
    .v16-ghostword {
        bottom: clamp(2rem, 8vh, 6rem);
        left: clamp(-2rem, -2vw, 0rem);
        font-size: clamp(4rem, 13vw, 12rem);
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 0.8;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(37, 99, 235, 0.12);
        white-space: nowrap;
        user-select: none;
        transform: translate3d(calc(var(--v16-s) * var(--v16-depth, 0px)), 0, 0);
    }
    .v16-scene.is-dark .v16-ghostword { -webkit-text-stroke-color: rgba(96, 165, 250, 0.18); }

    /* kleine driftende Deko-Glyphe / Icon-Chip in der mittleren Ebene */
    .v16-floatchip {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.85rem;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid var(--v16-line);
        box-shadow: var(--shadow-lg);
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--v16-ink);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transform: translate3d(calc(var(--v16-s) * var(--v16-depth, 0px)), 0, 0);
    }
    .v16-floatchip i { color: var(--primary); }
    .v16-scene.is-dark .v16-floatchip {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.16);
        color: #fff;
    }
    .v16-scene.is-dark .v16-floatchip i { color: var(--primary-light); }

    /* Kapitel-Label */
    .v16-chapter {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        font-size: clamp(0.66rem, 1.1vw, 0.76rem);
        letter-spacing: 0.28em;
        text-transform: uppercase;
        font-weight: 800;
        color: var(--primary);
        margin-bottom: clamp(1rem, 2.4vw, 1.6rem);
    }
    .v16-chapter .v16-chapter-no { font-variant-numeric: tabular-nums; color: var(--v16-soft); }
    .v16-chapter .v16-chapter-bar {
        width: 34px; height: 2px; flex: none;
        background: linear-gradient(90deg, var(--primary), var(--accent));
    }
    .v16-scene.is-dark .v16-chapter { color: var(--primary-light); }
    .v16-scene.is-dark .v16-chapter .v16-chapter-no { color: var(--text-light); }

    /* Szenen-Headline */
    .v16-h {
        font-size: clamp(2rem, 6vw, 4.4rem);
        line-height: 1.02;
        letter-spacing: -0.03em;
        font-weight: 800;
        margin: 0 0 clamp(1rem, 2.4vw, 1.6rem);
        text-wrap: balance;
        max-width: 18ch;
    }
    .v16-grad {
        background: linear-gradient(108deg, var(--primary) 0%, var(--accent) 50%, var(--primary-light) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .v16-scene.is-dark .v16-h { color: #fff; }

    .v16-lead {
        font-size: clamp(1rem, 1.55vw, 1.2rem);
        line-height: 1.7;
        color: var(--v16-soft);
        max-width: 50ch;
        margin: 0 0 clamp(1.8rem, 3.4vw, 2.5rem);
    }
    .v16-lead strong { color: var(--v16-ink); font-weight: 700; }
    .v16-scene.is-dark .v16-lead { color: var(--text-light); }
    .v16-scene.is-dark .v16-lead strong { color: #fff; }

    /* ---------- Buttons ---------- */
    .v16-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.1rem; }
    .v16-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-weight: 700;
        font-size: 0.97rem;
        text-decoration: none;
        line-height: 1;
        border-radius: 999px;
        padding: 0.95rem 1.6rem;
        border: 1.5px solid transparent;
        transition: transform 0.3s var(--v16-ease), box-shadow 0.3s var(--v16-ease), background 0.3s var(--v16-ease), color 0.3s var(--v16-ease), border-color 0.3s var(--v16-ease);
    }
    .v16-btn i { font-size: 0.85em; transition: transform 0.3s var(--v16-ease); }
    .v16-btn:hover i { transform: translateX(4px); }
    .v16-btn-primary {
        background: linear-gradient(120deg, var(--primary), var(--accent));
        color: #fff;
        box-shadow: 0 18px 40px -18px var(--primary-glow);
    }
    .v16-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -20px var(--primary-glow); }
    .v16-btn-ghost { background: transparent; color: var(--v16-ink); border-color: var(--v16-line); }
    .v16-btn-ghost:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary); }
    .v16-scene.is-dark .v16-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
    .v16-scene.is-dark .v16-btn-ghost:hover { border-color: var(--primary-light); color: var(--primary-light); }

    .v16-btn:focus-visible,
    .v16-device:focus-visible,
    .v16-idx-link:focus-visible,
    .v16-scroll-cue:focus-visible,
    .v16-dot:focus-visible,
    .v16-quick a:focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
        border-radius: 14px;
    }
    .v16-scene.is-dark .v16-btn:focus-visible,
    .v16-scene.is-dark .v16-idx-link:focus-visible,
    .v16-scene.is-dark .v16-quick a:focus-visible { outline-color: var(--primary-light); }

    /* ============================================================
       BUEHNEN-MODI (hell / soft / dunkel) - filmische Dramaturgie
       ============================================================ */
    .v16-scene.is-soft { background: var(--v16-paper-2); }
    .v16-scene.is-soft .v16-plane::before {
        content: "";
        position: absolute; inset: 0;
        background:
            radial-gradient(48% 60% at 88% 12%, var(--primary-soft), transparent 60%),
            radial-gradient(44% 56% at 6% 92%, rgba(124, 58, 237, 0.07), transparent 60%);
    }
    .v16-scene.is-dark { background: var(--v16-night); color: var(--text-light); }
    .v16-scene.is-dark .v16-plane::before {
        content: "";
        position: absolute; inset: 0;
        background:
            radial-gradient(56% 62% at 84% 8%, rgba(124, 58, 237, 0.30), transparent 58%),
            radial-gradient(60% 70% at 8% 96%, rgba(37, 99, 235, 0.32), transparent 60%);
    }
    /* feines Punktraster auf dunklen Szenen */
    .v16-scene.is-dark .v16-plane::after {
        content: "";
        position: absolute; inset: -10% -25%;
        background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
        background-size: 30px 30px;
        opacity: 0.5;
        mask-image: linear-gradient(180deg, transparent, #000 38%, #000 72%, transparent);
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 38%, #000 72%, transparent);
        /* driftet leicht mit (eigene Tiefe) */
        transform: translate3d(calc(var(--v16-s) * 40px), 0, 0);
    }

    /* Zwei-Spalten-Erzaehlung (alterniert) */
    .v16-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.2rem, 5vw, 4.5rem);
        align-items: center;
    }
    @media (min-width: 940px) {
        .v16-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
        .v16-split.is-reverse .v16-split-text { order: 2; }
        .v16-split.is-reverse .v16-split-art { order: 1; }
    }

    /* leichte gegenlaeufige Mikro-Parallax fuer Text vs. Visual (Tiefe) */
    @media (min-width: 940px) {
        .v16-split-text { transform: translate3d(calc(var(--v16-s) * -22px), 0, 0); }
        .v16-split-art  { transform: translate3d(calc(var(--v16-s) * 34px), 0, 0); }
    }

    .v16-points {
        list-style: none;
        margin: 0 0 clamp(1.8rem, 3.4vw, 2.4rem);
        padding: 0;
        display: grid;
        gap: 0.7rem;
        max-width: 46ch;
    }
    .v16-points li {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
        font-size: 0.97rem;
        line-height: 1.5;
        color: var(--v16-soft);
    }
    .v16-points li i { color: var(--primary); margin-top: 0.2rem; flex: none; }
    .v16-scene.is-dark .v16-points li { color: var(--text-light); }
    .v16-scene.is-dark .v16-points li i { color: var(--primary-light); }

    /* ============================================================
       HERO (Szene 00) - "Objektiv / Blende" + parallaxe Fenster
       ============================================================ */
    .v16-scene--hero {
        background:
            radial-gradient(60% 70% at 82% 12%, var(--primary-soft), transparent 62%),
            radial-gradient(55% 60% at 6% 92%, rgba(124, 58, 237, 0.10), transparent 60%),
            var(--v16-paper);
    }
    .v16-scene--hero .v16-plane::before {
        content: "";
        position: absolute; inset: 0;
        background-image:
            linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
        background-size: clamp(46px, 6vw, 78px) clamp(46px, 6vw, 78px);
        mask-image: radial-gradient(120% 100% at 30% 0%, #000 35%, transparent 78%);
        -webkit-mask-image: radial-gradient(120% 100% at 30% 0%, #000 35%, transparent 78%);
        transform: translate3d(calc(var(--v16-s) * -36px), 0, 0);
    }
    .v16-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.5rem, 6vw, 5rem);
        align-items: center;
    }
    @media (min-width: 1000px) {
        .v16-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
    }

    .v16-brandline {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.45rem 0.95rem 0.45rem 0.5rem;
        border: 1px solid var(--v16-line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--v16-ink);
        margin-bottom: clamp(1.3rem, 3vw, 1.9rem);
    }
    .v16-brandline img { height: 22px; width: auto; display: block; }
    .v16-brandline .v16-live { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--success); letter-spacing: 0.1em; }
    .v16-brandline .v16-live::before {
        content: ""; width: 7px; height: 7px; border-radius: 50%;
        background: var(--success); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16);
    }

    .v16-hero-h {
        font-size: clamp(2.6rem, 9vw, 6.4rem);
        line-height: 0.95;
        letter-spacing: -0.035em;
        font-weight: 800;
        margin: 0 0 clamp(1.2rem, 2.8vw, 1.8rem);
        text-wrap: balance;
    }
    .v16-hero-h .v16-name {
        display: block;
        font-size: 0.33em;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--v16-soft);
        margin-top: clamp(0.7rem, 1.6vw, 1.1rem);
        text-transform: none;
    }
    .v16-hero-h .v16-name b { color: var(--v16-ink); font-weight: 800; }

    .v16-hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem 0.8rem;
        margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
        list-style: none;
        padding: 0;
    }
    .v16-hero-meta li {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--v16-soft);
        border: 1px solid var(--v16-line);
        background: rgba(255, 255, 255, 0.6);
        border-radius: 999px;
        padding: 0.45rem 0.9rem;
    }
    .v16-hero-meta li i { color: var(--primary); }

    /* Hero-Visual: "Kamera-Objektiv / Blende" + zwei parallaxe Plattform-Fenster */
    .v16-stage {
        position: relative;
        aspect-ratio: 1 / 1;
        width: 100%;
        max-width: 470px;
        margin-inline: auto;
    }
    .v16-lens {
        position: absolute;
        inset: 8% 8% 8% 8%;
        border-radius: 50%;
        background:
            radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.9), transparent 38%),
            conic-gradient(from 220deg, var(--primary), var(--accent), var(--primary-light), var(--primary));
        box-shadow: 0 40px 80px -30px var(--primary-glow), inset 0 0 60px rgba(2, 6, 23, 0.35);
        display: grid;
        place-items: center;
        transform: translate3d(calc(var(--v16-s) * -28px), 0, 0);
        will-change: transform;
    }
    .v16-lens::before {
        content: "";
        position: absolute;
        inset: 14%;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 50%, #020617 28%, rgba(2, 6, 23, 0.85) 60%, transparent 72%);
        box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
    }
    /* Blenden-Lamellen (Aperture) via konischer Verlauf */
    .v16-lens .v16-aperture {
        position: relative;
        z-index: 2;
        width: 46%;
        height: 46%;
        border-radius: 50%;
        background:
            conic-gradient(#020617 0 20deg, rgba(96, 165, 250, 0.45) 20deg 24deg,
                           #020617 24deg 80deg, rgba(96, 165, 250, 0.45) 80deg 84deg,
                           #020617 84deg 140deg, rgba(96, 165, 250, 0.45) 140deg 144deg,
                           #020617 144deg 200deg, rgba(96, 165, 250, 0.45) 200deg 204deg,
                           #020617 204deg 260deg, rgba(96, 165, 250, 0.45) 260deg 264deg,
                           #020617 264deg 320deg, rgba(96, 165, 250, 0.45) 320deg 324deg,
                           #020617 324deg 360deg);
        box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.7);
        animation: v16-spin 26s linear infinite;
    }
    .v16-lens .v16-aperture::after {
        content: "";
        position: absolute;
        inset: 30%;
        border-radius: 50%;
        background: radial-gradient(circle at 40% 36%, var(--primary-light), var(--accent) 70%);
        box-shadow: 0 0 26px var(--primary-glow);
    }
    @keyframes v16-spin { to { transform: rotate(360deg); } }

    /* zwei kleine Fenster vor dem Objektiv (nahe Ebene, staerkere Drift) */
    .v16-pane {
        position: absolute;
        border-radius: 16px;
        border: 1px solid var(--v16-line);
        background: #fff;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        z-index: 3;
        will-change: transform;
    }
    .v16-pane-bar {
        height: 26px;
        display: flex;
        align-items: center;
        gap: 5px;
        padding-inline: 10px;
        border-bottom: 1px solid var(--v16-line);
        background: var(--v16-paper-2);
    }
    .v16-pane-bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--v16-line); }
    .v16-pane-bar span:nth-child(1) { background: #f87171; }
    .v16-pane-bar span:nth-child(2) { background: #fbbf24; }
    .v16-pane-bar span:nth-child(3) { background: var(--success); }
    .v16-pane-body { padding: 12px; display: grid; gap: 8px; }
    .v16-pane-body .v16-ln { height: 8px; border-radius: 5px; background: var(--v16-paper-2); }
    .v16-pane-body .v16-ln.w1 { width: 82%; }
    .v16-pane-body .v16-ln.w2 { width: 56%; }
    .v16-pane-body .v16-ln.grad { background: linear-gradient(90deg, var(--primary), var(--accent)); width: 44%; height: 12px; }
    .v16-app-ico {
        width: 40px; height: 40px; border-radius: 11px;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.1rem;
        box-shadow: 0 10px 24px -10px var(--primary-glow);
    }
    .v16-pane--a {
        top: 6%; left: -4%;
        width: 52%;
        transform: translate3d(calc(var(--v16-s) * 64px), 0, 0) rotate(-3deg);
    }
    .v16-pane--b {
        bottom: 8%; right: -4%;
        width: 48%;
        transform: translate3d(calc(var(--v16-s) * -54px), 0, 0) rotate(3deg);
    }

    /* Scroll-Hinweis (filmische "Maus") */
    .v16-scroll-cue {
        position: absolute;
        left: var(--v16-pad-x);
        bottom: calc(var(--v16-strip-h) + clamp(1.1rem, 3vh, 2rem));
        z-index: 4;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        text-decoration: none;
        color: var(--v16-soft);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }
    .v16-scroll-cue .v16-mouse {
        width: 23px; height: 37px;
        border: 2px solid currentColor;
        border-radius: 13px;
        position: relative;
        opacity: 0.7;
        flex: none;
    }
    .v16-scroll-cue .v16-mouse::before {
        content: "";
        position: absolute;
        top: 7px; left: 50%;
        width: 3px; height: 7px;
        border-radius: 3px;
        background: currentColor;
        transform: translateX(-50%);
        animation: v16-wheel 1.6s ease-in-out infinite;
    }
    .v16-scroll-cue:hover { color: var(--primary); }
    @keyframes v16-wheel {
        0% { opacity: 0; transform: translateX(-50%) translateY(0); }
        40% { opacity: 1; }
        80% { opacity: 0; transform: translateX(-50%) translateY(9px); }
        100% { opacity: 0; }
    }

    /* ============================================================
       SZENEN-VISUALS (reines CSS/SVG - kein Foto)
       ============================================================ */

    /* --- Plattform-Trio (Windows / Apple / Android) --- */
    .v16-devices {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.6rem, 1.6vw, 1.1rem);
        align-items: end;
    }
    .v16-device {
        position: relative;
        border-radius: 18px;
        border: 1px solid var(--v16-line);
        background: #fff;
        box-shadow: var(--shadow-lg);
        padding: 0.9rem 0.9rem 1.1rem;
        text-decoration: none;
        color: var(--v16-ink);
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        transition: transform 0.4s var(--v16-ease), box-shadow 0.4s var(--v16-ease), border-color 0.4s var(--v16-ease);
        isolation: isolate;
    }
    .v16-device:nth-child(2) { transform: translateY(-18px); }
    .v16-device:hover { transform: translateY(-26px); border-color: var(--primary); }
    .v16-device:nth-child(1):hover, .v16-device:nth-child(3):hover { transform: translateY(-8px); }
    .v16-device .v16-screen {
        aspect-ratio: 4 / 5;
        border-radius: 12px;
        background: linear-gradient(160deg, var(--primary-soft), rgba(124, 58, 237, 0.10));
        border: 1px solid var(--v16-line);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(1.6rem, 4vw, 2.4rem);
        color: var(--primary);
        position: relative;
        overflow: hidden;
    }
    .v16-device .v16-screen::after {
        content: "";
        position: absolute; inset: 0;
        background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
        transform: translateX(-120%);
        transition: transform 0.7s var(--v16-ease);
    }
    .v16-device:hover .v16-screen::after { transform: translateX(120%); }
    .v16-device .v16-dev-name { font-weight: 800; font-size: 0.9rem; letter-spacing: -0.01em; }
    .v16-device .v16-dev-sub { font-size: 0.74rem; color: var(--v16-soft); font-weight: 600; }
    .v16-device .v16-dev-badge {
        position: absolute; top: 0.7rem; right: 0.7rem;
        font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--accent); background: rgba(124, 58, 237, 0.12);
        padding: 0.2rem 0.45rem; border-radius: 6px;
    }

    /* --- Webdesign: Browser-Mockup --- */
    .v16-browser {
        border-radius: 18px;
        border: 1px solid var(--v16-line);
        background: #fff;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
    }
    .v16-browser-bar {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.7rem 0.9rem;
        border-bottom: 1px solid var(--v16-line);
        background: var(--v16-paper-2);
    }
    .v16-browser-bar .v16-dots { display: flex; gap: 5px; }
    .v16-browser-bar .v16-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--v16-line); }
    .v16-browser-bar .v16-url {
        flex: 1; height: 22px; border-radius: 999px;
        background: #fff; border: 1px solid var(--v16-line);
        display: flex; align-items: center; gap: 0.4rem; padding-inline: 0.7rem;
        font-size: 0.7rem; color: var(--v16-soft); font-weight: 600;
    }
    .v16-browser-bar .v16-url i { color: var(--success); font-size: 0.65rem; }
    .v16-browser-canvas { padding: clamp(1rem, 2.5vw, 1.6rem); display: grid; gap: 0.9rem; }
    .v16-bc-hero {
        height: clamp(70px, 12vw, 110px);
        border-radius: 12px;
        background: linear-gradient(120deg, var(--primary), var(--accent));
        position: relative; overflow: hidden;
    }
    .v16-bc-hero::after {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(60% 120% at 80% 10%, rgba(255, 255, 255, 0.35), transparent 60%);
    }
    .v16-bc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
    .v16-bc-card { height: clamp(46px, 8vw, 70px); border-radius: 10px; background: var(--v16-paper-2); border: 1px solid var(--v16-line); }
    .v16-bc-line { height: 9px; border-radius: 5px; background: var(--v16-paper-2); }
    .v16-bc-line.s { width: 55%; }

    /* --- Webtools: Werkzeug-Raster (auf dunkel) --- */
    .v16-toolgrid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.55rem, 1.5vw, 0.9rem);
    }
    .v16-tool {
        aspect-ratio: 1;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.05);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 0.4rem;
        color: #fff;
        font-size: clamp(1.1rem, 3vw, 1.6rem);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: transform 0.35s var(--v16-ease), background 0.35s var(--v16-ease), border-color 0.35s var(--v16-ease);
    }
    .v16-tool span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-light); }
    .v16-tool:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.1); border-color: var(--primary-light); }
    .v16-tool.is-hot {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        border-color: transparent;
        box-shadow: 0 18px 40px -18px var(--primary-glow);
    }
    .v16-tool.is-hot span { color: rgba(255, 255, 255, 0.9); }

    /* --- News: Artikel-Stapel --- */
    .v16-articles { display: grid; gap: clamp(0.7rem, 1.6vw, 1rem); }
    .v16-article {
        display: grid;
        grid-template-columns: clamp(60px, 14vw, 92px) minmax(0, 1fr);
        gap: 1rem;
        align-items: center;
        padding: clamp(0.8rem, 1.8vw, 1.1rem);
        border-radius: 16px;
        border: 1px solid var(--v16-line);
        background: #fff;
        box-shadow: var(--shadow-soft);
        transition: transform 0.35s var(--v16-ease), box-shadow 0.35s var(--v16-ease);
    }
    .v16-article:hover { transform: translateX(6px); box-shadow: var(--shadow-lg); }
    .v16-article-thumb {
        aspect-ratio: 1; border-radius: 12px;
        background: linear-gradient(150deg, var(--primary-soft), rgba(124, 58, 237, 0.12));
        display: flex; align-items: center; justify-content: center;
        color: var(--primary); font-size: 1.2rem;
    }
    .v16-article-meta .v16-am-tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
    .v16-article-meta .v16-am-title { font-weight: 700; font-size: clamp(0.92rem, 1.5vw, 1.05rem); margin: 0.25rem 0; line-height: 1.25; color: var(--v16-ink); }
    .v16-article-meta .v16-am-line { height: 8px; width: 70%; border-radius: 5px; background: var(--v16-paper-2); }

    /* --- Shop: Produktkarten --- */
    .v16-shopgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.7rem, 1.8vw, 1.1rem); }
    .v16-product {
        border-radius: 16px;
        border: 1px solid var(--v16-line);
        background: #fff;
        box-shadow: var(--shadow-soft);
        overflow: hidden;
        transition: transform 0.35s var(--v16-ease), box-shadow 0.35s var(--v16-ease);
    }
    .v16-product:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .v16-product-art {
        aspect-ratio: 16 / 10;
        background: linear-gradient(150deg, var(--primary-soft), rgba(124, 58, 237, 0.12));
        display: flex; align-items: center; justify-content: center;
        font-size: 1.8rem; color: var(--primary); position: relative;
    }
    .v16-product-art .v16-tag {
        position: absolute; top: 0.6rem; left: 0.6rem;
        font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
        color: #fff; background: var(--success); padding: 0.2rem 0.5rem; border-radius: 6px;
    }
    .v16-product-info { padding: 0.85rem 0.95rem; display: grid; gap: 0.5rem; }
    .v16-product-info .v16-pi-name { font-weight: 700; font-size: 0.92rem; }
    .v16-product-info .v16-pi-foot { display: flex; align-items: center; justify-content: space-between; }
    .v16-product-info .v16-pi-price { font-weight: 800; color: var(--primary); font-size: 0.95rem; }
    .v16-product-info .v16-pi-dl { font-size: 0.7rem; font-weight: 700; color: var(--v16-soft); display: inline-flex; align-items: center; gap: 0.3rem; }

    /* --- Hosting: Server-Stapel (auf dunkel) --- */
    .v16-rack { display: grid; gap: clamp(0.6rem, 1.4vw, 0.9rem); max-width: 440px; margin-inline: auto; }
    .v16-rack-unit {
        display: flex; align-items: center; gap: 1rem;
        padding: clamp(0.9rem, 2vw, 1.2rem);
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .v16-rack-unit .v16-ru-ico {
        width: 42px; height: 42px; border-radius: 10px;
        background: rgba(96, 165, 250, 0.18);
        color: var(--primary-light);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem; flex: none;
    }
    .v16-rack-unit .v16-ru-body { flex: 1; min-width: 0; }
    .v16-rack-unit .v16-ru-name { font-weight: 700; color: #fff; font-size: 0.92rem; }
    .v16-rack-unit .v16-ru-meta { font-size: 0.74rem; color: var(--text-light); opacity: 0.8; }
    .v16-rack-unit .v16-leds { display: flex; gap: 5px; }
    .v16-rack-unit .v16-leds i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }
    .v16-rack-unit .v16-leds i:nth-child(2) { background: var(--primary-light); box-shadow: 0 0 8px var(--primary-light); animation: v16-blink 2s ease-in-out infinite; }
    @keyframes v16-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

    /* --- IT-Hilfe: Support-Chat --- */
    .v16-chat { max-width: 440px; margin-inline: auto; display: grid; gap: 0.7rem; }
    .v16-bubble {
        padding: 0.85rem 1.1rem;
        border-radius: 16px;
        font-size: 0.92rem;
        line-height: 1.5;
        max-width: 82%;
        box-shadow: var(--shadow-soft);
    }
    .v16-bubble.in { background: #fff; border: 1px solid var(--v16-line); border-bottom-left-radius: 5px; color: var(--v16-ink); justify-self: start; }
    .v16-bubble.out { background: linear-gradient(120deg, var(--primary), var(--accent)); color: #fff; border-bottom-right-radius: 5px; justify-self: end; }
    .v16-bubble .v16-bub-from { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.25rem; }
    .v16-typing {
        justify-self: start;
        display: inline-flex; gap: 5px;
        padding: 0.9rem 1.1rem;
        background: #fff; border: 1px solid var(--v16-line);
        border-radius: 16px; border-bottom-left-radius: 5px;
        box-shadow: var(--shadow-soft);
    }
    .v16-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--v16-soft); animation: v16-typing 1.3s ease-in-out infinite; }
    .v16-typing i:nth-child(2) { animation-delay: 0.18s; }
    .v16-typing i:nth-child(3) { animation-delay: 0.36s; }
    @keyframes v16-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

    /* ============================================================
       SZENE: INDEX / SZENENVERZEICHNIS (dunkel, Sekundaer-Nav)
       ============================================================ */
    .v16-scene--index { align-items: center; }
    .v16-idx-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
    .v16-idx-head .v16-chapter { justify-content: center; }
    .v16-idx-head h2 {
        font-size: clamp(1.9rem, 5vw, 3.4rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: #fff;
        margin: 0;
        line-height: 1.05;
    }
    .v16-idx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
    @media (min-width: 680px) { .v16-idx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); } }
    @media (min-width: 1080px) { .v16-idx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .v16-idx-link {
        display: flex; align-items: center; gap: 1rem;
        padding: clamp(0.85rem, 2vw, 1.1rem) 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        text-decoration: none;
        color: var(--text-light);
        transition: color 0.3s var(--v16-ease), padding-left 0.3s var(--v16-ease);
    }
    .v16-idx-link:hover { color: #fff; padding-left: 0.5rem; }
    .v16-idx-link .v16-idx-no { font-size: 0.74rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary-light); min-width: 2.4ch; }
    .v16-idx-link .v16-idx-ico {
        width: 38px; height: 38px; border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        display: flex; align-items: center; justify-content: center;
        color: var(--primary-light); font-size: 0.95rem; flex: none;
        transition: background 0.3s var(--v16-ease), color 0.3s var(--v16-ease), border-color 0.3s var(--v16-ease);
    }
    .v16-idx-link:hover .v16-idx-ico { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; border-color: transparent; }
    .v16-idx-link .v16-idx-label { flex: 1; min-width: 0; }
    .v16-idx-link .v16-idx-name { display: block; font-weight: 700; font-size: 1rem; color: #fff; }
    .v16-idx-link .v16-idx-sub { display: block; font-size: 0.78rem; opacity: 0.65; margin-top: 0.1rem; }
    .v16-idx-link .v16-idx-arrow { opacity: 0.5; transition: transform 0.3s var(--v16-ease), opacity 0.3s var(--v16-ease); flex: none; }
    .v16-idx-link:hover .v16-idx-arrow { opacity: 1; transform: translateX(4px); }

    /* ============================================================
       SCHLUSS-SZENE: KONTAKT (Abspann)
       ============================================================ */
    .v16-scene--contact { text-align: center; }
    .v16-contact-wrap { max-width: 760px; margin-inline: auto; position: relative; z-index: 3; }
    .v16-contact-h {
        font-size: clamp(2.4rem, 8vw, 5.4rem);
        font-weight: 800;
        letter-spacing: -0.035em;
        line-height: 1.0;
        margin: 0 0 clamp(1.2rem, 3vw, 1.8rem);
        color: #fff;
        text-wrap: balance;
    }
    .v16-contact-wrap .v16-lead { margin-inline: auto; color: var(--text-light); }
    .v16-contact-wrap .v16-cta-row { justify-content: center; }
    .v16-quick {
        margin-top: clamp(2.4rem, 5vw, 3.5rem);
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: 0.6rem 0.7rem;
    }
    .v16-quick a {
        display: inline-flex; align-items: center; gap: 0.5rem;
        font-size: 0.85rem; font-weight: 600; text-decoration: none;
        color: var(--text-light);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        padding: 0.55rem 1rem;
        transition: color 0.3s var(--v16-ease), border-color 0.3s var(--v16-ease), background 0.3s var(--v16-ease);
    }
    .v16-quick a:hover { color: #fff; border-color: var(--primary-light); background: rgba(96, 165, 250, 0.12); }
    .v16-quick a i { color: var(--primary-light); }
    .v16-signoff {
        margin-top: clamp(2.2rem, 5vw, 3.4rem);
        display: inline-flex; align-items: center; gap: 0.7rem;
        font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
        color: var(--text-light); opacity: 0.7;
    }
    .v16-signoff img { height: 18px; width: auto; opacity: 0.9; }

    /* ============================================================
       HORIZONTALER FILMSTREIFEN (fix, unten) - Signatur-Twist
       Frame-Counter + Perforation + Track-Fortschritt + Szenen-Punkte.
       KEIN inneres Navigationselement (role=navigation) - die Hauptnavi
       stylt jedes solche Element fix.
       ============================================================ */
    .v16-strip {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        height: var(--v16-strip-h);
        z-index: 45;
        background: var(--v16-night);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        align-items: center;
        gap: clamp(0.6rem, 2vw, 1.4rem);
        padding-inline: clamp(0.7rem, 3vw, 1.6rem);
        color: var(--text-light);
        overflow: hidden;
    }
    /* obere/untere Perforationsreihen (Filmloecher) */
    .v16-strip::before,
    .v16-strip::after {
        content: "";
        position: absolute; left: 0; right: 0;
        height: 6px;
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0 2.4px, transparent 3px);
        background-size: 16px 6px;
        background-repeat: repeat-x;
        pointer-events: none;
    }
    .v16-strip::before { top: 4px; }
    .v16-strip::after { bottom: 4px; }

    .v16-strip-frame {
        display: inline-flex;
        align-items: baseline;
        gap: 0.45rem;
        font-variant-numeric: tabular-nums;
        font-weight: 800;
        letter-spacing: 0.04em;
        flex: none;
        white-space: nowrap;
    }
    .v16-strip-frame .v16-fr-key { font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary-light); }
    .v16-strip-frame .v16-fr-num { font-size: clamp(0.95rem, 2.4vw, 1.2rem); color: #fff; }
    .v16-strip-frame .v16-fr-tot { font-size: 0.72rem; color: var(--text-light); opacity: 0.6; }

    .v16-strip-now {
        flex: none;
        max-width: 38vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #fff;
    }
    .v16-strip-now span { color: var(--primary-light); }

    /* Track-Fortschritt (horizontale Linie) */
    .v16-strip-track {
        flex: 1;
        min-width: 40px;
        height: 3px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.14);
        position: relative;
        overflow: hidden;
    }
    .v16-strip-track i {
        position: absolute;
        inset: 0 auto 0 0;
        width: var(--v16-prog, 0%);
        background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary-light));
        border-radius: 3px;
        transition: width 0.15s linear;
    }

    /* Szenen-Punkte (Sprungziele) im Streifen */
    .v16-strip-dots {
        display: flex;
        align-items: center;
        gap: clamp(0.35rem, 1.2vw, 0.65rem);
        flex: none;
    }
    .v16-dot {
        position: relative;
        width: 10px; height: 10px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        background: transparent;
        display: block;
        transition: transform 0.3s var(--v16-ease), background 0.3s var(--v16-ease), border-color 0.3s var(--v16-ease);
    }
    .v16-dot::after {
        content: attr(data-label);
        position: absolute;
        bottom: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%) translateY(6px);
        background: #fff;
        color: var(--v16-ink);
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        white-space: nowrap;
        padding: 0.3rem 0.55rem;
        border-radius: 8px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
        box-shadow: var(--shadow-soft);
    }
    .v16-dot:hover { border-color: var(--primary-light); transform: scale(1.25); }
    .v16-dot:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
    .v16-dot.is-active {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        border-color: transparent;
        transform: scale(1.3);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.35);
    }

    /* unter 720px: Streifen kompakter, Punkte ausblenden */
    @media (max-width: 720px) {
        .v16-strip-dots { display: none; }
        .v16-strip-now { max-width: 46vw; }
    }

    /* ============================================================
       RESPONSIVE FEINSCHLIFF
       ============================================================ */
    @media (max-width: 940px) {
        .v16-scene {
            min-height: auto;
            padding-top: clamp(4.5rem, 11vh, 7rem);
            padding-bottom: calc(var(--v16-strip-h) + clamp(3rem, 8vh, 4.5rem));
        }
        .v16-scene--hero { padding-top: clamp(7.5rem, 17vh, 10rem); }
        .v16-scroll-cue { display: none; }
        /* Mikro-Parallax der Spalten auf Mobile aus (sauberer Einspalter) */
        .v16-split-text, .v16-split-art { transform: none !important; }
    }
    @media (max-width: 540px) {
        .v16-stage { max-width: 360px; }
        .v16-devices { gap: 0.5rem; }
        .v16-device { padding: 0.6rem 0.6rem 0.8rem; }
        .v16-device:nth-child(2) { transform: translateY(-10px); }
        .v16-toolgrid { gap: 0.5rem; }
        .v16-shopgrid { grid-template-columns: minmax(0, 1fr); }
        .v16-hero-meta li { font-size: 0.78rem; }
        .v16-pane--a, .v16-pane--b { width: 56%; }
    }

    /* ============================================================
       REDUCED MOTION - alle Bewegung/Parallax aus
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
        .v16-home .v16-rise,
        .v16-home .v16-rise-sm,
        .v16-home .v16-zoom { opacity: 1 !important; transform: none !important; transition: none !important; }
        .v16-home .v16-layer,
        .v16-home .v16-bignum,
        .v16-home .v16-ghostword,
        .v16-home .v16-floatchip,
        .v16-home .v16-lens,
        .v16-home .v16-pane,
        .v16-home .v16-split-text,
        .v16-home .v16-split-art { transform: none !important; }
        .v16-home *,
        .v16-home *::before,
        .v16-home *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
            scroll-behavior: auto !important;
        }
    }
</style>

    {{-- ============================================================
         SZENE 00 - HERO / TITELSEQUENZ
         ============================================================ --}}
    <section class="v16-scene v16-scene--hero" id="v16-szene-hero" data-scene data-frame="01" data-now="Titelsequenz" aria-label="Einleitung">
        <div class="v16-plane" aria-hidden="true">
            <span class="v16-bignum d-far">00</span>
            <span class="v16-ghostword d-rev">TECH</span>
        </div>
        <div class="v16-inner">
            <div class="v16-hero-grid">
                <div class="v16-hero-copy">
                    <span class="v16-brandline v16-rise" style="--v16-d:60ms;">
                        <img src="{{ asset('img/logo-mark.png') }}" alt="" aria-hidden="true">
                        KOTSCH.TECH
                        <span class="v16-live">Live</span>
                    </span>

                    <h1 class="v16-hero-h v16-rise" style="--v16-d:120ms;">
                        Tech mit
                        <span class="v16-grad">Tiefenschärfe.</span>
                        <span class="v16-name">Software, Apps &amp; Web von <b>Arthur Kotsch</b></span>
                    </h1>

                    <p class="v16-lead v16-rise" style="--v16-d:200ms;">
                        <strong>KOTSCH.TECH</strong> ist die persönliche Tech-Marke von Arthur Kotsch.
                        Scrolle wie durch einen Film &mdash; mit Ebenen, die sich bewegen: von nativen Apps
                        über Webdesign und 420+ Webtools bis zu Shop, Hosting und ehrlicher IT-Hilfe.
                    </p>

                    <div class="v16-cta-row v16-rise" style="--v16-d:280ms;">
                        <a class="v16-btn v16-btn-primary" href="{{ route('kontakt') }}">
                            Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                        <a class="v16-btn v16-btn-ghost" href="#v16-szene-index">
                            Alle Bereiche <i class="fa-solid fa-arrow-down" aria-hidden="true"></i>
                        </a>
                    </div>

                    <ul class="v16-hero-meta v16-rise" style="--v16-d:360ms;" aria-label="Schwerpunkte">
                        <li><i class="fa-solid fa-code" aria-hidden="true"></i> Softwareentwicklung</li>
                        <li><i class="fa-solid fa-mobile-screen-button" aria-hidden="true"></i> Native Apps</li>
                        <li><i class="fa-solid fa-toolbox" aria-hidden="true"></i> 420+ Webtools</li>
                        <li><i class="fa-solid fa-user-check" aria-hidden="true"></i> 1:1 betreut</li>
                    </ul>
                </div>

                <div class="v16-hero-art v16-zoom" style="--v16-d:240ms;" aria-hidden="true">
                    <div class="v16-stage">
                        <div class="v16-lens">
                            <span class="v16-aperture"></span>
                        </div>
                        <div class="v16-pane v16-pane--a">
                            <div class="v16-pane-bar"><span></span><span></span><span></span></div>
                            <div class="v16-pane-body">
                                <div class="v16-ln grad"></div>
                                <div class="v16-ln w1"></div>
                                <div class="v16-ln w2"></div>
                            </div>
                        </div>
                        <div class="v16-pane v16-pane--b">
                            <div class="v16-pane-bar"><span></span><span></span><span></span></div>
                            <div class="v16-pane-body">
                                <div class="v16-app-ico"><i class="fa-solid fa-bolt"></i></div>
                                <div class="v16-ln w1"></div>
                                <div class="v16-ln grad"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <a class="v16-scroll-cue" href="#v16-szene-platforms" aria-label="Weiter zur nächsten Szene">
            <span class="v16-mouse" aria-hidden="true"></span> Scrollen
        </a>
    </section>

    {{-- ============================================================
         SZENE 01 - PLATTFORMEN (Windows / Apple / Android) - SOFT
         ============================================================ --}}
    <section class="v16-scene is-soft" id="v16-szene-platforms" data-scene data-frame="02" data-now="Plattformen" aria-label="Software und Apps für alle Plattformen">
        <div class="v16-plane" aria-hidden="true">
            <span class="v16-bignum d-far">01</span>
            <span class="v16-ghostword d-mid">APPS</span>
            <span class="v16-floatchip d-near" style="top:22%; left:8%;"><i class="fa-solid fa-layer-group"></i> 3 Plattformen</span>
        </div>
        <div class="v16-inner">
            <div class="v16-split">
                <div class="v16-split-text">
                    <span class="v16-chapter v16-rise-sm">
                        <span class="v16-chapter-bar" aria-hidden="true"></span>
                        <span class="v16-chapter-no">01</span> Szene &mdash; Plattformen
                    </span>
                    <h2 class="v16-h v16-rise">Software, die auf <span class="v16-grad">jedem Gerät</span> zu Hause ist.</h2>
                    <p class="v16-lead v16-rise" style="--v16-d:120ms;">
                        Vom Windows-Desktop über iPhone, iPad und Mac bis Android: durchdachte Programme
                        und native Apps, die genau ein Problem sauber lösen &mdash; schnell, aufgeräumt,
                        mit Liebe zum Detail.
                    </p>
                    <ul class="v16-points v16-rise" style="--v16-d:200ms;">
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Windows-Tools für den produktiven Alltag</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Native Apple-Apps inkl. App Store-Release</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Android-Apps in aktiver Entwicklung</li>
                    </ul>
                    <div class="v16-cta-row v16-rise" style="--v16-d:280ms;">
                        <a class="v16-btn v16-btn-primary" href="{{ route('windows.index') }}">
                            Windows-Software <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                        <a class="v16-btn v16-btn-ghost" href="{{ route('apple.index') }}">iOS &amp; Mac</a>
                    </div>
                </div>

                <div class="v16-split-art v16-zoom" style="--v16-d:160ms;">
                    <div class="v16-devices">
                        <a class="v16-device" href="{{ route('windows.index') }}" aria-label="Windows-Software ansehen">
                            <div class="v16-screen" aria-hidden="true"><i class="fa-brands fa-windows"></i></div>
                            <span class="v16-dev-name">Windows</span>
                            <span class="v16-dev-sub">Desktop-Tools</span>
                        </a>
                        <a class="v16-device" href="{{ route('apple.index') }}" aria-label="iOS und Mac Apps ansehen">
                            <span class="v16-dev-badge">App Store</span>
                            <div class="v16-screen" aria-hidden="true"><i class="fa-brands fa-apple"></i></div>
                            <span class="v16-dev-name">iOS &amp; Mac</span>
                            <span class="v16-dev-sub">Native Apps</span>
                        </a>
                        <a class="v16-device" href="{{ route('android.index') }}" aria-label="Android Apps ansehen">
                            <span class="v16-dev-badge">Beta</span>
                            <div class="v16-screen" aria-hidden="true"><i class="fa-brands fa-android"></i></div>
                            <span class="v16-dev-name">Android</span>
                            <span class="v16-dev-sub">In Entwicklung</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 02 - WEBDESIGN - HELL
         ============================================================ --}}
    <section class="v16-scene" id="v16-szene-web" data-scene data-frame="03" data-now="Webdesign" aria-label="Webdesign">
        <div class="v16-plane" aria-hidden="true">
            <span class="v16-bignum d-far">02</span>
            <span class="v16-ghostword d-rev">WEB</span>
            <span class="v16-floatchip d-near" style="bottom:20%; right:9%;"><i class="fa-solid fa-gauge-high"></i> schnell &amp; SEO</span>
        </div>
        <div class="v16-inner">
            <div class="v16-split is-reverse">
                <div class="v16-split-text">
                    <span class="v16-chapter v16-rise-sm">
                        <span class="v16-chapter-bar" aria-hidden="true"></span>
                        <span class="v16-chapter-no">02</span> Szene &mdash; Gestaltung
                    </span>
                    <h2 class="v16-h v16-rise">Websites, die <span class="v16-grad">schnell laden</span> und überzeugen.</h2>
                    <p class="v16-lead v16-rise" style="--v16-d:120ms;">
                        Modernes Webdesign und fertige Vorlagen mit sauberem Code, durchdachter
                        Nutzerführung und solidem SEO-Fundament. Sehen gut aus &mdash; und konvertieren.
                    </p>
                    <ul class="v16-points v16-rise" style="--v16-d:200ms;">
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Responsive von 360px bis Desktop</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Performance- und SEO-orientiert</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Startklare Templates zum Anpassen</li>
                    </ul>
                    <div class="v16-cta-row v16-rise" style="--v16-d:280ms;">
                        <a class="v16-btn v16-btn-primary" href="{{ route('web.templates') }}">
                            Webdesign ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <div class="v16-split-art v16-zoom" style="--v16-d:160ms;" aria-hidden="true">
                    <div class="v16-browser">
                        <div class="v16-browser-bar">
                            <span class="v16-dots"><span></span><span></span><span></span></span>
                            <span class="v16-url"><i class="fa-solid fa-lock"></i> kotsch.tech</span>
                        </div>
                        <div class="v16-browser-canvas">
                            <div class="v16-bc-hero"></div>
                            <div class="v16-bc-row">
                                <div class="v16-bc-card"></div>
                                <div class="v16-bc-card"></div>
                                <div class="v16-bc-card"></div>
                            </div>
                            <div class="v16-bc-line"></div>
                            <div class="v16-bc-line s"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 03 - WEBTOOLS - DUNKEL
         ============================================================ --}}
    <section class="v16-scene is-dark" id="v16-szene-tools" data-scene data-frame="04" data-now="Webtools" aria-label="Kostenlose Webtools">
        <div class="v16-plane" aria-hidden="true">
            <span class="v16-bignum d-far">03</span>
            <span class="v16-ghostword d-mid">TOOLS</span>
            <span class="v16-floatchip d-near" style="top:24%; left:7%;"><i class="fa-solid fa-wand-magic-sparkles"></i> 420+ Tools</span>
        </div>
        <div class="v16-inner">
            <div class="v16-split">
                <div class="v16-split-text">
                    <span class="v16-chapter v16-rise-sm">
                        <span class="v16-chapter-bar" aria-hidden="true"></span>
                        <span class="v16-chapter-no">03</span> Szene &mdash; Werkzeuge
                    </span>
                    <h2 class="v16-h v16-rise">420+ Webtools. <span class="v16-grad">Gratis im Browser.</span></h2>
                    <p class="v16-lead v16-rise" style="--v16-d:120ms;">
                        Kleine Helfer, die direkt im Browser laufen &mdash; ohne Anmeldung, ohne Upload.
                        Konvertieren, rechnen, formatieren, generieren. Schnell zur Hand, wenn du sie brauchst.
                    </p>
                    <ul class="v16-points v16-rise" style="--v16-d:200ms;">
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Konverter, Rechner &amp; Generatoren</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Text-, Code- und Bild-Werkzeuge</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> 100% kostenlos, läuft lokal im Browser</li>
                    </ul>
                    <div class="v16-cta-row v16-rise" style="--v16-d:280ms;">
                        <a class="v16-btn v16-btn-primary" href="{{ route('webtools.show') }}">
                            Tools öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <div class="v16-split-art v16-zoom" style="--v16-d:160ms;" aria-hidden="true">
                    <div class="v16-toolgrid">
                        <div class="v16-tool is-hot"><i class="fa-solid fa-right-left"></i><span>Konverter</span></div>
                        <div class="v16-tool"><i class="fa-solid fa-calculator"></i><span>Rechner</span></div>
                        <div class="v16-tool"><i class="fa-solid fa-palette"></i><span>Farben</span></div>
                        <div class="v16-tool"><i class="fa-solid fa-code"></i><span>Code</span></div>
                        <div class="v16-tool is-hot"><i class="fa-solid fa-font"></i><span>Text</span></div>
                        <div class="v16-tool"><i class="fa-solid fa-qrcode"></i><span>QR</span></div>
                        <div class="v16-tool"><i class="fa-solid fa-image"></i><span>Bild</span></div>
                        <div class="v16-tool"><i class="fa-solid fa-key"></i><span>Passwort</span></div>
                        <div class="v16-tool is-hot"><i class="fa-solid fa-ellipsis"></i><span>+412</span></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 04 - NEWS / BLOG - HELL
         ============================================================ --}}
    <section class="v16-scene" id="v16-szene-news" data-scene data-frame="05" data-now="News &amp; Blog" aria-label="News und Blog">
        <div class="v16-plane" aria-hidden="true">
            <span class="v16-bignum d-far">04</span>
            <span class="v16-ghostword d-rev">NEWS</span>
            <span class="v16-floatchip d-near" style="bottom:22%; right:8%;"><i class="fa-solid fa-newspaper"></i> frisch erklärt</span>
        </div>
        <div class="v16-inner">
            <div class="v16-split is-reverse">
                <div class="v16-split-text">
                    <span class="v16-chapter v16-rise-sm">
                        <span class="v16-chapter-bar" aria-hidden="true"></span>
                        <span class="v16-chapter-no">04</span> Szene &mdash; Lesestoff
                    </span>
                    <h2 class="v16-h v16-rise">News &amp; Artikel, <span class="v16-grad">ohne Buzzword-Bingo.</span></h2>
                    <p class="v16-lead v16-rise" style="--v16-d:120ms;">
                        Praxisnahe Beiträge rund um Entwicklung, Tools und Technik. Verständlich erklärt
                        &mdash; das, was wirklich weiterhilft, statt leerer Schlagworte.
                    </p>
                    <div class="v16-cta-row v16-rise" style="--v16-d:280ms;">
                        <a class="v16-btn v16-btn-primary" href="{{ route('news.index') }}">
                            Artikel lesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <div class="v16-split-art v16-rise" style="--v16-d:160ms;" aria-hidden="true">
                    <div class="v16-articles">
                        <div class="v16-article">
                            <div class="v16-article-thumb"><i class="fa-solid fa-newspaper"></i></div>
                            <div class="v16-article-meta">
                                <span class="v16-am-tag">Tutorial</span>
                                <p class="v16-am-title">Schneller entwickeln mit kleinen Tools</p>
                                <div class="v16-am-line"></div>
                            </div>
                        </div>
                        <div class="v16-article">
                            <div class="v16-article-thumb"><i class="fa-solid fa-lightbulb"></i></div>
                            <div class="v16-article-meta">
                                <span class="v16-am-tag">Hintergrund</span>
                                <p class="v16-am-title">Warum native Apps sich besser anfühlen</p>
                                <div class="v16-am-line"></div>
                            </div>
                        </div>
                        <div class="v16-article">
                            <div class="v16-article-thumb"><i class="fa-solid fa-rocket"></i></div>
                            <div class="v16-article-meta">
                                <span class="v16-am-tag">Update</span>
                                <p class="v16-am-title">Neues aus der Werkzeugkiste</p>
                                <div class="v16-am-line"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 05 - SHOP - SOFT
         ============================================================ --}}
    <section class="v16-scene is-soft" id="v16-szene-shop" data-scene data-frame="06" data-now="Shop" aria-label="Digitaler Shop">
        <div class="v16-plane" aria-hidden="true">
            <span class="v16-bignum d-far">05</span>
            <span class="v16-ghostword d-mid">SHOP</span>
            <span class="v16-floatchip d-near" style="top:23%; left:8%;"><i class="fa-solid fa-download"></i> Sofort-Download</span>
        </div>
        <div class="v16-inner">
            <div class="v16-split">
                <div class="v16-split-text">
                    <span class="v16-chapter v16-rise-sm">
                        <span class="v16-chapter-bar" aria-hidden="true"></span>
                        <span class="v16-chapter-no">05</span> Szene &mdash; Shop
                    </span>
                    <h2 class="v16-h v16-rise">Digitale Produkte zum <span class="v16-grad">Sofort-Download.</span></h2>
                    <p class="v16-lead v16-rise" style="--v16-d:120ms;">
                        Vom praktischen Bauteil bis zur fertigen Vorlage: Produkte, die direkt nach dem
                        Kauf bereitstehen. Bezahlen, herunterladen, loslegen &mdash; ganz ohne Wartezeit.
                    </p>
                    <div class="v16-cta-row v16-rise" style="--v16-d:280ms;">
                        <a class="v16-btn v16-btn-primary" href="{{ route('shop.index') }}">
                            Zum Shop <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <div class="v16-split-art v16-zoom" style="--v16-d:160ms;" aria-hidden="true">
                    <div class="v16-shopgrid">
                        <div class="v16-product">
                            <div class="v16-product-art"><span class="v16-tag">Download</span><i class="fa-solid fa-cube"></i></div>
                            <div class="v16-product-info">
                                <span class="v16-pi-name">Starter-Kit</span>
                                <div class="v16-pi-foot">
                                    <span class="v16-pi-price">ab 9 €</span>
                                    <span class="v16-pi-dl"><i class="fa-solid fa-download"></i> sofort</span>
                                </div>
                            </div>
                        </div>
                        <div class="v16-product">
                            <div class="v16-product-art"><span class="v16-tag">Vorlage</span><i class="fa-solid fa-file-code"></i></div>
                            <div class="v16-product-info">
                                <span class="v16-pi-name">Template-Paket</span>
                                <div class="v16-pi-foot">
                                    <span class="v16-pi-price">ab 19 €</span>
                                    <span class="v16-pi-dl"><i class="fa-solid fa-download"></i> sofort</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 06 - HOSTING - DUNKEL
         ============================================================ --}}
    <section class="v16-scene is-dark" id="v16-szene-hosting" data-scene data-frame="07" data-now="Hosting" aria-label="Hosting">
        <div class="v16-plane" aria-hidden="true">
            <span class="v16-bignum d-far">06</span>
            <span class="v16-ghostword d-mid">HOST</span>
            <span class="v16-floatchip d-near" style="bottom:24%; right:7%;"><i class="fa-solid fa-shield-halved"></i> persönlich betreut</span>
        </div>
        <div class="v16-inner">
            <div class="v16-split">
                <div class="v16-split-text">
                    <span class="v16-chapter v16-rise-sm">
                        <span class="v16-chapter-bar" aria-hidden="true"></span>
                        <span class="v16-chapter-no">06</span> Szene &mdash; Betrieb
                    </span>
                    <h2 class="v16-h v16-rise">Kleines Hosting, <span class="v16-grad">persönlich betreut.</span></h2>
                    <p class="v16-lead v16-rise" style="--v16-d:120ms;">
                        Zuverlässiges Hosting für Websites und Projekte &mdash; kein anonymes
                        Massengeschäft, sondern ein echter Ansprechpartner, der dein Setup kennt.
                    </p>
                    <ul class="v16-points v16-rise" style="--v16-d:200ms;">
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Stabil und überschaubar</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Direkter Kontakt statt Ticket-Labyrinth</li>
                    </ul>
                    <div class="v16-cta-row v16-rise" style="--v16-d:280ms;">
                        <a class="v16-btn v16-btn-primary" href="{{ route('hosting.index') }}">
                            Hosting ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <div class="v16-split-art v16-zoom" style="--v16-d:160ms;" aria-hidden="true">
                    <div class="v16-rack">
                        <div class="v16-rack-unit">
                            <div class="v16-ru-ico"><i class="fa-solid fa-server"></i></div>
                            <div class="v16-ru-body">
                                <div class="v16-ru-name">Web-Hosting</div>
                                <div class="v16-ru-meta">Websites &amp; Projekte &middot; online</div>
                            </div>
                            <div class="v16-leds"><i></i><i></i></div>
                        </div>
                        <div class="v16-rack-unit">
                            <div class="v16-ru-ico"><i class="fa-solid fa-database"></i></div>
                            <div class="v16-ru-body">
                                <div class="v16-ru-name">Datenbank</div>
                                <div class="v16-ru-meta">Gesichert &amp; gepflegt</div>
                            </div>
                            <div class="v16-leds"><i></i><i></i></div>
                        </div>
                        <div class="v16-rack-unit">
                            <div class="v16-ru-ico"><i class="fa-solid fa-shield-halved"></i></div>
                            <div class="v16-ru-body">
                                <div class="v16-ru-name">SSL &amp; Schutz</div>
                                <div class="v16-ru-meta">Verschlüsselt ausgeliefert</div>
                            </div>
                            <div class="v16-leds"><i></i><i></i></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 07 - IT-HILFE - HELL
         ============================================================ --}}
    <section class="v16-scene" id="v16-szene-support" data-scene data-frame="08" data-now="IT-Hilfe" aria-label="IT-Hilfe">
        <div class="v16-plane" aria-hidden="true">
            <span class="v16-bignum d-far">07</span>
            <span class="v16-ghostword d-rev">HELP</span>
            <span class="v16-floatchip d-near" style="top:22%; left:8%;"><i class="fa-solid fa-life-ring"></i> verständlich erklärt</span>
        </div>
        <div class="v16-inner">
            <div class="v16-split is-reverse">
                <div class="v16-split-text">
                    <span class="v16-chapter v16-rise-sm">
                        <span class="v16-chapter-bar" aria-hidden="true"></span>
                        <span class="v16-chapter-no">07</span> Szene &mdash; Support
                    </span>
                    <h2 class="v16-h v16-rise">IT-Hilfe <span class="v16-grad">ohne Fachchinesisch.</span></h2>
                    <p class="v16-lead v16-rise" style="--v16-d:120ms;">
                        Wenn etwas klemmt: schnelle, verständliche Unterstützung &mdash; vom kniffligen
                        PC-Problem bis zur Einrichtung neuer Geräte. Erklärt so, dass es jeder versteht.
                    </p>
                    <div class="v16-cta-row v16-rise" style="--v16-d:280ms;">
                        <a class="v16-btn v16-btn-primary" href="{{ route('it-hilfe.index') }}">
                            IT-Hilfe ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <div class="v16-split-art v16-rise" style="--v16-d:160ms;" aria-hidden="true">
                    <div class="v16-chat">
                        <div class="v16-bubble in">
                            <span class="v16-bub-from">Du</span>
                            Mein PC startet nicht mehr richtig &mdash; was kann ich tun?
                        </div>
                        <div class="v16-bubble out">
                            <span class="v16-bub-from">KOTSCH.TECH</span>
                            Kein Stress, das kriegen wir hin. Lass uns Schritt für Schritt durchgehen.
                        </div>
                        <div class="v16-typing"><i></i><i></i><i></i></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 08 - SZENENVERZEICHNIS / INDEX (dunkel, Sekundaer-Nav)
         ============================================================ --}}
    <section class="v16-scene is-dark v16-scene--index" id="v16-szene-index" data-scene data-frame="09" data-now="Übersicht" aria-label="Alle Bereiche im Überblick">
        <div class="v16-plane" aria-hidden="true">
            <span class="v16-bignum d-far">08</span>
            <span class="v16-ghostword d-mid">INDEX</span>
        </div>
        <div class="v16-inner">
            <div class="v16-idx-head v16-rise-sm">
                <span class="v16-chapter">
                    <span class="v16-chapter-bar" aria-hidden="true"></span>
                    <span class="v16-chapter-no">08</span> Szenenverzeichnis
                </span>
                <h2>Alle Bereiche auf einen Blick</h2>
            </div>

            <div class="v16-idx-grid v16-rise" role="navigation" aria-label="Sprungziele zu allen Bereichen">
                <a class="v16-idx-link" href="{{ route('windows.index') }}">
                    <span class="v16-idx-no">01</span>
                    <span class="v16-idx-ico"><i class="fa-brands fa-windows" aria-hidden="true"></i></span>
                    <span class="v16-idx-label">
                        <span class="v16-idx-name">Windows-Software</span>
                        <span class="v16-idx-sub">Schlanke Programme für den Desktop</span>
                    </span>
                    <i class="fa-solid fa-arrow-right v16-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v16-idx-link" href="{{ route('apple.index') }}">
                    <span class="v16-idx-no">02</span>
                    <span class="v16-idx-ico"><i class="fa-brands fa-apple" aria-hidden="true"></i></span>
                    <span class="v16-idx-label">
                        <span class="v16-idx-name">iOS &amp; Mac Apps</span>
                        <span class="v16-idx-sub">Native Apps für Apple-Geräte</span>
                    </span>
                    <i class="fa-solid fa-arrow-right v16-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v16-idx-link" href="{{ route('android.index') }}">
                    <span class="v16-idx-no">03</span>
                    <span class="v16-idx-ico"><i class="fa-brands fa-android" aria-hidden="true"></i></span>
                    <span class="v16-idx-label">
                        <span class="v16-idx-name">Android Apps</span>
                        <span class="v16-idx-sub">Mobile Apps in Entwicklung</span>
                    </span>
                    <i class="fa-solid fa-arrow-right v16-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v16-idx-link" href="{{ route('web.templates') }}">
                    <span class="v16-idx-no">04</span>
                    <span class="v16-idx-ico"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i></span>
                    <span class="v16-idx-label">
                        <span class="v16-idx-name">Webdesign</span>
                        <span class="v16-idx-sub">Websites &amp; Vorlagen</span>
                    </span>
                    <i class="fa-solid fa-arrow-right v16-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v16-idx-link" href="{{ route('webtools.show') }}">
                    <span class="v16-idx-no">05</span>
                    <span class="v16-idx-ico"><i class="fa-solid fa-toolbox" aria-hidden="true"></i></span>
                    <span class="v16-idx-label">
                        <span class="v16-idx-name">Webtools</span>
                        <span class="v16-idx-sub">420+ kostenlose Browser-Tools</span>
                    </span>
                    <i class="fa-solid fa-arrow-right v16-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v16-idx-link" href="{{ route('news.index') }}">
                    <span class="v16-idx-no">06</span>
                    <span class="v16-idx-ico"><i class="fa-solid fa-newspaper" aria-hidden="true"></i></span>
                    <span class="v16-idx-label">
                        <span class="v16-idx-name">News &amp; Blog</span>
                        <span class="v16-idx-sub">Artikel rund um Technik</span>
                    </span>
                    <i class="fa-solid fa-arrow-right v16-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v16-idx-link" href="{{ route('shop.index') }}">
                    <span class="v16-idx-no">07</span>
                    <span class="v16-idx-ico"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i></span>
                    <span class="v16-idx-label">
                        <span class="v16-idx-name">Shop</span>
                        <span class="v16-idx-sub">Digitale Produkte zum Download</span>
                    </span>
                    <i class="fa-solid fa-arrow-right v16-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v16-idx-link" href="{{ route('hosting.index') }}">
                    <span class="v16-idx-no">08</span>
                    <span class="v16-idx-ico"><i class="fa-solid fa-server" aria-hidden="true"></i></span>
                    <span class="v16-idx-label">
                        <span class="v16-idx-name">Hosting</span>
                        <span class="v16-idx-sub">Kleines, persönliches Hosting</span>
                    </span>
                    <i class="fa-solid fa-arrow-right v16-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v16-idx-link" href="{{ route('it-hilfe.index') }}">
                    <span class="v16-idx-no">09</span>
                    <span class="v16-idx-ico"><i class="fa-solid fa-life-ring" aria-hidden="true"></i></span>
                    <span class="v16-idx-label">
                        <span class="v16-idx-name">IT-Hilfe</span>
                        <span class="v16-idx-sub">Schnelle Hilfe ohne Fachchinesisch</span>
                    </span>
                    <i class="fa-solid fa-arrow-right v16-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v16-idx-link" href="{{ route('documents.index') }}">
                    <span class="v16-idx-no">10</span>
                    <span class="v16-idx-ico"><i class="fa-solid fa-folder-open" aria-hidden="true"></i></span>
                    <span class="v16-idx-label">
                        <span class="v16-idx-name">Dokumente</span>
                        <span class="v16-idx-sub">Anleitungen &amp; Ressourcen</span>
                    </span>
                    <i class="fa-solid fa-arrow-right v16-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v16-idx-link" href="{{ route('kontakt') }}">
                    <span class="v16-idx-no">11</span>
                    <span class="v16-idx-ico"><i class="fa-solid fa-paper-plane" aria-hidden="true"></i></span>
                    <span class="v16-idx-label">
                        <span class="v16-idx-name">Kontakt</span>
                        <span class="v16-idx-sub">Projekt anfragen &amp; schreiben</span>
                    </span>
                    <i class="fa-solid fa-arrow-right v16-idx-arrow" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 09 - KONTAKT / ABSPANN - DUNKEL
         ============================================================ --}}
    <section class="v16-scene is-dark v16-scene--contact" id="v16-szene-contact" data-scene data-frame="10" data-now="Abspann" aria-label="Kontakt aufnehmen">
        <div class="v16-plane" aria-hidden="true">
            <span class="v16-bignum d-far">09</span>
            <span class="v16-ghostword d-rev" style="left:50%; translate:-50% 0; bottom:auto; top:14%;">KONTAKT</span>
        </div>
        <div class="v16-inner">
            <div class="v16-contact-wrap">
                <span class="v16-chapter v16-rise-sm" style="justify-content:center;">
                    <span class="v16-chapter-bar" aria-hidden="true"></span>
                    <span class="v16-chapter-no">09</span> Abspann &mdash; und der Anfang
                </span>
                <p class="v16-contact-h v16-rise">
                    Eine Idee im Kopf?<br>
                    <span class="v16-grad">Lass sie uns bauen.</span>
                </p>
                <p class="v16-lead v16-rise" style="--v16-d:120ms;">
                    Ob App, Website, Tool oder ein Problem, das gelöst werden will &mdash; schreib mir direkt.
                    Du sprichst mit der Person, die es am Ende auch umsetzt.
                </p>
                <div class="v16-cta-row v16-rise" style="--v16-d:200ms;">
                    <a class="v16-btn v16-btn-primary" href="{{ route('kontakt') }}">
                        Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                    <a class="v16-btn v16-btn-ghost" href="{{ route('webtools.show') }}">
                        Webtools kostenlos nutzen
                    </a>
                </div>

                <div class="v16-quick v16-rise" style="--v16-d:280ms;" role="navigation" aria-label="Schnellzugriff auf wichtige Bereiche">
                    <a href="{{ route('apple.index') }}"><i class="fa-brands fa-apple" aria-hidden="true"></i> Apps</a>
                    <a href="{{ route('windows.index') }}"><i class="fa-brands fa-windows" aria-hidden="true"></i> Windows</a>
                    <a href="{{ route('web.templates') }}"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i> Webdesign</a>
                    <a href="{{ route('shop.index') }}"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i> Shop</a>
                    <a href="{{ route('news.index') }}"><i class="fa-solid fa-newspaper" aria-hidden="true"></i> News</a>
                    <a href="{{ route('hosting.index') }}"><i class="fa-solid fa-server" aria-hidden="true"></i> Hosting</a>
                </div>

                <span class="v16-signoff v16-rise-sm" style="--v16-d:360ms;">
                    <img src="{{ asset('img/logo-wordmark-solid-cropped.png') }}" alt="KOTSCH.TECH">
                    &mdash; von Arthur Kotsch
                </span>
            </div>
        </div>
    </section>

    {{-- ============================================================
         HORIZONTALER FILMSTREIFEN (fixe Szenen-Navigation, role=navigation)
         Frame-Counter + Track-Fortschritt + Szenen-Punkte.
         position:fixed -> immer sichtbar; liegt am Ende des Markups.
         ============================================================ --}}
    <div class="v16-strip" role="navigation" aria-label="Filmstreifen-Navigation der Szenen">
        <span class="v16-strip-frame" aria-hidden="true">
            <span class="v16-fr-key">Frame</span>
            <span class="v16-fr-num" id="v16-frame-num">01</span>
            <span class="v16-fr-tot">/ 10</span>
        </span>
        <span class="v16-strip-now" id="v16-strip-now" aria-hidden="true">Titelsequenz</span>
        <span class="v16-strip-track" aria-hidden="true"><i id="v16-strip-fill"></i></span>
        <span class="v16-strip-dots">
            <a class="v16-dot" href="#v16-szene-hero" data-target="v16-szene-hero" data-label="Start" aria-label="Zur Szene Start"></a>
            <a class="v16-dot" href="#v16-szene-platforms" data-target="v16-szene-platforms" data-label="Plattformen" aria-label="Zur Szene Plattformen"></a>
            <a class="v16-dot" href="#v16-szene-web" data-target="v16-szene-web" data-label="Webdesign" aria-label="Zur Szene Webdesign"></a>
            <a class="v16-dot" href="#v16-szene-tools" data-target="v16-szene-tools" data-label="Webtools" aria-label="Zur Szene Webtools"></a>
            <a class="v16-dot" href="#v16-szene-news" data-target="v16-szene-news" data-label="News" aria-label="Zur Szene News"></a>
            <a class="v16-dot" href="#v16-szene-shop" data-target="v16-szene-shop" data-label="Shop" aria-label="Zur Szene Shop"></a>
            <a class="v16-dot" href="#v16-szene-hosting" data-target="v16-szene-hosting" data-label="Hosting" aria-label="Zur Szene Hosting"></a>
            <a class="v16-dot" href="#v16-szene-support" data-target="v16-szene-support" data-label="IT-Hilfe" aria-label="Zur Szene IT-Hilfe"></a>
            <a class="v16-dot" href="#v16-szene-index" data-target="v16-szene-index" data-label="Übersicht" aria-label="Zur Szene Übersicht"></a>
            <a class="v16-dot" href="#v16-szene-contact" data-target="v16-szene-contact" data-label="Kontakt" aria-label="Zur Szene Kontakt"></a>
        </span>
    </div>
</div>

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

    // JS aktiv -> Fallback-Klasse weg
    root.classList.remove('v16-no-js');

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

    var hasIO = typeof IntersectionObserver !== 'undefined';
    var scenes = Array.prototype.slice.call(root.querySelectorAll('[data-scene]'));
    var dots = root.querySelectorAll('.v16-dot');
    var frameNum = document.getElementById('v16-frame-num');
    var nowLabel = document.getElementById('v16-strip-now');
    var fill = document.getElementById('v16-strip-fill');

    /* ---------- 1) Reveal-Einblendung ---------- */
    var revealEls = root.querySelectorAll('.v16-rise, .v16-rise-sm, .v16-zoom');
    if (reduce || !hasIO) {
        Array.prototype.forEach.call(revealEls, function (el) { el.classList.add('v16-in'); });
    } else if (revealEls.length) {
        var revealIO = new IntersectionObserver(function (entries, obs) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('v16-in');
                    obs.unobserve(entry.target);
                }
            });
        }, { rootMargin: '0px 0px -10% 0px', threshold: 0.12 });
        Array.prototype.forEach.call(revealEls, function (el) { revealIO.observe(el); });
    }

    /* ---------- 2) Aktive Szene markieren (Punkte + Frame-Counter) ---------- */
    function setActive(idx) {
        for (var i = 0; i < dots.length; i++) {
            dots[i].classList.toggle('is-active', i === idx);
        }
        var sc = scenes[idx];
        if (!sc) { return; }
        if (frameNum) { frameNum.textContent = sc.getAttribute('data-frame') || ('0' + (idx + 1)); }
        if (nowLabel) { nowLabel.innerHTML = sc.getAttribute('data-now') || ''; }
    }

    if (hasIO && scenes.length) {
        var sceneIO = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    var idx = scenes.indexOf(entry.target);
                    if (idx > -1) { setActive(idx); }
                }
            });
        }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 });
        scenes.forEach(function (s) { sceneIO.observe(s); });
    } else if (scenes.length) {
        setActive(0);
    }

    /* ---------- 3) Sanftes Scrollen bei Klick ---------- */
    function smooth(e) {
        var href = this.getAttribute('href') || '';
        if (href.charAt(0) !== '#') { return; }
        var target = document.getElementById(href.slice(1));
        if (!target) { return; }
        e.preventDefault();
        try {
            target.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
        } catch (err) {
            target.scrollIntoView();
        }
    }
    var anchors = root.querySelectorAll('a[href^="#"]');
    Array.prototype.forEach.call(anchors, function (a) { a.addEventListener('click', smooth); });

    /* ---------- 4) HORIZONTAL-PARALLAX (Kern-Twist) + Track-Fortschritt ----------
       Eine einzige rAF-gedrosselte Scroll-Schleife setzt pro sichtbarer Szene
       --v16-s (lokaler -1..1 Fortschritt, gemessen am Viewport-Zentrum). CSS
       uebernimmt die eigentliche Verschiebung via translate3d -> GPU, kein Reflow.
       Bei reduced-motion bleibt alles bei 0 (CSS deaktiviert ohnehin Transforms). */
    var ticking = false;
    var vh = window.innerHeight || document.documentElement.clientHeight || 1;

    function clamp(v, a, b) { return v < a ? a : (v > b ? b : v); }

    function update() {
        ticking = false;

        /* Track-Fortschritt (gesamte Seite) */
        if (fill) {
            var doc = document.documentElement;
            var scrollTop = window.pageYOffset || doc.scrollTop || 0;
            var height = (doc.scrollHeight - doc.clientHeight) || 1;
            var pct = clamp((scrollTop / height) * 100, 0, 100);
            fill.style.width = pct + '%';
        }

        if (reduce) { return; }

        var center = vh / 2;
        for (var i = 0; i < scenes.length; i++) {
            var sc = scenes[i];
            var rect = sc.getBoundingClientRect();
            /* nur sichtbare (+Puffer) Szenen aktualisieren -> guenstig */
            if (rect.bottom < -vh * 0.4 || rect.top > vh * 1.4) { continue; }
            var sceneCenter = rect.top + rect.height / 2;
            /* -1 = Szene tief unten, 0 = mittig, 1 = ganz oben */
            var s = clamp((center - sceneCenter) / (vh / 2 + rect.height / 2), -1, 1);
            sc.style.setProperty('--v16-s', s.toFixed(4));
        }
    }

    function onScroll() {
        if (!ticking) {
            ticking = true;
            window.requestAnimationFrame(update);
        }
    }

    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', function () {
        vh = window.innerHeight || document.documentElement.clientHeight || 1;
        onScroll();
    }, { passive: true });
    update();
})();
</script>

{{-- No-JS Sicherung: alle Reveal-Elemente sofort sichtbar, falls JS fehlt --}}
<noscript>
    <style>
        .v16-home .v16-rise,
        .v16-home .v16-rise-sm,
        .v16-home .v16-zoom { opacity: 1 !important; transform: none !important; }
    </style>
</noscript>
@endsection