@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Software, Apps & Webdesign')
@section('meta_description', 'KOTSCH.TECH von Arthur Kotsch in kinohafter Inszenierung: Windows-Software, iOS-, Mac- & Android-Apps, Webdesign, 420+ Webtools, News, Shop, Hosting und IT-Hilfe.')
@section('og_title', 'KOTSCH.TECH - Die nächtliche Tech-Premiere von Arthur Kotsch')
@section('og_description', 'Eine dunkle, dramatische Reise durch alle Disziplinen: Softwareentwicklung, native Apps für iOS, macOS & Android, Webdesign, Webtools, Shop, Hosting und IT-Hilfe.')
@section('twitter_title', 'KOTSCH.TECH - Software, Apps & Web von Arthur Kotsch')
@section('twitter_description', 'Kinohaft inszeniert und persönlich betreut: Software, native Apps, Webdesign, 420+ Webtools, News, Shop, Hosting und IT-Hilfe von Arthur Kotsch. Alles aus einer Hand.')

@section('content')
<div class="v14-home v14-no-js">
<style>
    /* ============================================================
       KOTSCH.TECH - Variante 14: NIGHT PREMIERE
       Durchgehend dunkles Kino: --bg-dark Buehne, leuchtende
       Projektor-Gradients, Lichtkegel, Scanlines, hoher Kontrast.
       Familie = Cinema (bildschirmhohe Szenen, riesige Kapitelnummern,
       Reel-Rail rechts), aber bewusst NUR dunkel + glow statt
       Hell/Dunkel-Wechsel. ALLE Selektoren .v14- praefixiert.
       ============================================================ */

    .v14-home {
        --v14-ink: #ffffff;
        --v14-soft: var(--text-light);
        --v14-mut: #94a3b8;
        --v14-night: var(--bg-dark);
        --v14-night-2: #060b1c;
        --v14-line: rgba(148, 163, 184, 0.16);
        --v14-line-2: rgba(148, 163, 184, 0.26);
        --v14-glass: rgba(255, 255, 255, 0.04);
        --v14-glass-2: rgba(255, 255, 255, 0.06);
        --v14-rail-w: clamp(56px, 6vw, 90px);
        --v14-pad-x: clamp(1.25rem, 5vw, 5.5rem);
        --v14-ease: cubic-bezier(0.16, 0.84, 0.44, 1);
        color: var(--v14-soft);
        background: var(--v14-night);
        position: relative;
        overflow-x: clip;
        isolation: isolate;
        font-synthesis: none;
        -webkit-font-smoothing: antialiased;
    }
    .v14-home *,
    .v14-home *::before,
    .v14-home *::after { box-sizing: border-box; }

    /* Durchgehende dunkle Grundebene + ferne Lichtschimmer (fixiert) */
    .v14-home::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(60% 50% at 78% -6%, rgba(124, 58, 237, 0.20), transparent 60%),
            radial-gradient(58% 48% at 12% 108%, rgba(37, 99, 235, 0.22), transparent 62%),
            linear-gradient(180deg, var(--v14-night-2), var(--v14-night));
    }
    /* Feines Filmkorn / Scanlines + Vignette ueber der ganzen Buehne */
    .v14-home::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 70;
        pointer-events: none;
        background:
            repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 3px),
            radial-gradient(125% 120% at 50% 45%, transparent 58%, rgba(0, 0, 0, 0.55) 100%);
        opacity: 0.6;
        mix-blend-mode: multiply;
    }

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

    /* Marken-Verlaufstext (Signatur) */
    .v14-grad {
        background: linear-gradient(108deg, var(--primary-light) 0%, var(--accent) 48%, var(--primary-light) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* ============================================================
       REEL-RAIL: fixe Szenen-Leiste rechts (KEIN <nav>!)
       ============================================================ */
    .v14-rail {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: var(--v14-rail-w);
        z-index: 50;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-block: 120px 28px;
        pointer-events: none;
    }
    .v14-rail-track {
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(0.45rem, 1.3vh, 0.95rem);
        position: relative;
        z-index: 1;
    }
    .v14-dot {
        --d: 11px;
        position: relative;
        width: var(--d);
        height: var(--d);
        border-radius: 3px;
        border: 1.5px solid var(--v14-line-2);
        background: rgba(255, 255, 255, 0.04);
        display: block;
        transition: transform 0.35s var(--v14-ease), background 0.35s var(--v14-ease), border-color 0.35s var(--v14-ease), box-shadow 0.35s var(--v14-ease);
    }
    .v14-dot::after {
        content: attr(data-label);
        position: absolute;
        right: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%) translateX(6px);
        background: #0b1226;
        color: #fff;
        border: 1px solid var(--v14-line-2);
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        white-space: nowrap;
        padding: 0.35rem 0.6rem;
        border-radius: 8px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
        box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.8);
    }
    .v14-dot:hover { border-color: var(--primary-light); transform: scale(1.2); }
    .v14-dot:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
    .v14-dot.is-active {
        background: linear-gradient(135deg, var(--primary-light), var(--accent));
        border-color: transparent;
        transform: scale(1.3);
        box-shadow: 0 0 0 4px var(--primary-soft), 0 0 18px rgba(96, 165, 250, 0.5);
    }
    .v14-dot:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 4px; }

    .v14-rail-line {
        position: absolute;
        top: 120px;
        bottom: 28px;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: var(--v14-line);
        overflow: hidden;
        border-radius: 2px;
    }
    .v14-rail-line span {
        position: absolute;
        inset: 0 0 auto 0;
        height: var(--v14-prog, 0%);
        background: linear-gradient(var(--primary-light), var(--accent));
        box-shadow: 0 0 12px rgba(96, 165, 250, 0.6);
        transition: height 0.2s linear;
    }
    @media (max-width: 900px) { .v14-rail { display: none; } }

    /* ============================================================
       SZENEN-GRUNDGERUEST (bildschirmhoch, zentriert)
       ============================================================ */
    .v14-scene {
        position: relative;
        min-height: 100svh;
        display: flex;
        align-items: center;
        padding: clamp(6.5rem, 13vh, 9.5rem) var(--v14-rail-w) clamp(4rem, 9vh, 7rem) 0;
        z-index: 1;
    }
    .v14-scene--hero { padding-top: clamp(8.5rem, 17vh, 12rem); }

    /* Lichtkegel-Trenner: oben jeder Szene ein zarter Projektor-Strahl */
    .v14-scene::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(900px, 86%);
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--v14-line-2) 22%, rgba(96, 165, 250, 0.5) 50%, var(--v14-line-2) 78%, transparent);
        z-index: 2;
    }
    .v14-scene--hero::before { display: none; }

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

    /* Riesige Hintergrund-Szenennummer (Outline, leicht leuchtend) */
    .v14-bignum {
        position: absolute;
        z-index: 1;
        font-size: clamp(8.5rem, 32vw, 28rem);
        font-weight: 800;
        line-height: 0.7;
        letter-spacing: -0.05em;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(148, 163, 184, 0.14);
        right: clamp(0.5rem, 5vw, 5rem);
        bottom: -0.16em;
        pointer-events: none;
        user-select: none;
        font-variant-numeric: tabular-nums;
    }

    /* Kapitel-Label oben */
    .v14-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-light);
        margin-bottom: clamp(1.1rem, 2.6vw, 1.7rem);
    }
    .v14-chapter .v14-chapter-no { font-variant-numeric: tabular-nums; color: var(--v14-mut); }
    .v14-chapter .v14-chapter-bar {
        width: 34px; height: 2px; flex: none;
        background: linear-gradient(90deg, var(--primary-light), var(--accent));
        box-shadow: 0 0 10px rgba(96, 165, 250, 0.6);
    }

    /* Szenen-Headline */
    .v14-h {
        font-size: clamp(2rem, 6vw, 4.4rem);
        line-height: 1.02;
        letter-spacing: -0.03em;
        font-weight: 800;
        color: var(--v14-ink);
        margin: 0 0 clamp(1rem, 2.4vw, 1.6rem);
        text-wrap: balance;
        max-width: 18ch;
    }
    .v14-lead {
        font-size: clamp(1rem, 1.55vw, 1.22rem);
        line-height: 1.7;
        color: var(--v14-soft);
        max-width: 50ch;
        margin: 0 0 clamp(1.8rem, 3.4vw, 2.5rem);
    }
    .v14-lead strong { color: #fff; font-weight: 700; }

    /* ---------- Buttons ---------- */
    .v14-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.1rem; }
    .v14-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;
        transition: transform 0.3s var(--v14-ease), box-shadow 0.3s var(--v14-ease), background 0.3s var(--v14-ease), color 0.3s var(--v14-ease), border-color 0.3s var(--v14-ease);
        border: 1.5px solid transparent;
    }
    .v14-btn i { font-size: 0.85em; transition: transform 0.3s var(--v14-ease); }
    .v14-btn:hover i { transform: translateX(4px); }
    .v14-btn-primary {
        background: linear-gradient(120deg, var(--primary), var(--accent));
        color: #fff;
        box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.3), 0 18px 44px -16px var(--primary-glow), 0 0 28px -6px rgba(124, 58, 237, 0.45);
    }
    .v14-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.5), 0 26px 60px -18px var(--primary-glow), 0 0 40px -4px rgba(124, 58, 237, 0.6); }
    .v14-btn-ghost { background: var(--v14-glass); color: #fff; border-color: var(--v14-line-2); }
    .v14-btn-ghost:hover { transform: translateY(-3px); border-color: var(--primary-light); color: var(--primary-light); background: rgba(96, 165, 250, 0.08); }

    .v14-btn:focus-visible,
    .v14-card:focus-visible,
    .v14-idx-link:focus-visible,
    .v14-scroll-cue:focus-visible,
    .v14-quick a:focus-visible,
    .v14-device:focus-visible {
        outline: 3px solid var(--primary-light);
        outline-offset: 3px;
        border-radius: 14px;
    }

    /* ============================================================
       HERO (Szene 00) - Titelsequenz auf der Leinwand
       ============================================================ */
    .v14-scene--hero { overflow: hidden; }
    /* Projektor-Lichtkegel von oben rechts */
    .v14-scene--hero::after {
        content: "";
        position: absolute;
        top: -10%;
        right: -4%;
        width: 70%;
        height: 120%;
        background: conic-gradient(from 200deg at 100% 0%, transparent 0deg, rgba(96, 165, 250, 0.12) 22deg, rgba(124, 58, 237, 0.10) 40deg, transparent 60deg);
        filter: blur(10px);
        pointer-events: none;
        z-index: 1;
    }
    .v14-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.5rem, 6vw, 5rem);
        align-items: center;
    }
    @media (min-width: 1000px) {
        .v14-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
    }

    .v14-brandline {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.45rem 0.95rem 0.45rem 0.5rem;
        border: 1px solid var(--v14-line-2);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: clamp(1.3rem, 3vw, 1.9rem);
    }
    .v14-brandline img { height: 22px; width: auto; display: block; }
    .v14-brandline .v14-live { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--success); letter-spacing: 0.1em; }
    .v14-brandline .v14-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), 0 0 10px var(--success);
        animation: v14-pulse 2.4s ease-in-out infinite;
    }
    @keyframes v14-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

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

    .v14-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;
    }
    .v14-hero-meta li {
        display: inline-flex; align-items: center; gap: 0.5rem;
        font-size: 0.84rem; font-weight: 600; color: var(--v14-soft);
        border: 1px solid var(--v14-line); background: var(--v14-glass);
        border-radius: 999px; padding: 0.45rem 0.9rem;
    }
    .v14-hero-meta li i { color: var(--primary-light); }

    /* Hero-Visual: leuchtende gestapelte "Leinwand-Fenster" */
    .v14-stage {
        position: relative;
        aspect-ratio: 1 / 1;
        width: 100%;
        max-width: 460px;
        margin-inline: auto;
        perspective: 1200px;
    }
    .v14-pane {
        position: absolute;
        border-radius: 18px;
        border: 1px solid var(--v14-line-2);
        background: linear-gradient(160deg, #0c1430, #070d22);
        box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(96, 165, 250, 0.08);
        overflow: hidden;
        transform-style: preserve-3d;
    }
    .v14-pane-bar {
        height: 30px; display: flex; align-items: center; gap: 6px;
        padding-inline: 12px; border-bottom: 1px solid var(--v14-line);
        background: rgba(255, 255, 255, 0.03);
    }
    .v14-pane-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(148, 163, 184, 0.4); }
    .v14-pane-bar span:nth-child(1) { background: #f87171; }
    .v14-pane-bar span:nth-child(2) { background: #fbbf24; }
    .v14-pane-bar span:nth-child(3) { background: var(--success); }
    .v14-pane-body { padding: 14px; display: grid; gap: 9px; }
    .v14-ln { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); }
    .v14-ln.w1 { width: 80%; } .v14-ln.w2 { width: 58%; } .v14-ln.w3 { width: 70%; }
    .v14-ln.grad {
        background: linear-gradient(90deg, var(--primary-light), var(--accent));
        width: 46%; height: 13px; box-shadow: 0 0 14px rgba(96, 165, 250, 0.4);
    }
    .v14-pane--a {
        inset: 4% 0 auto 2%; width: 70%;
        transform: rotateY(12deg) rotateX(6deg) translateZ(-30px);
        animation: v14-float-a 9s ease-in-out infinite;
    }
    .v14-pane--b {
        inset: auto 2% 6% auto; width: 56%;
        transform: rotateY(-10deg) rotateX(4deg) translateZ(40px);
        animation: v14-float-b 7.5s ease-in-out infinite;
    }
    .v14-pane--b .v14-pane-body { gap: 11px; padding: 16px; }
    .v14-app-ico {
        width: 44px; height: 44px; border-radius: 12px;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.2rem;
        box-shadow: 0 10px 24px -8px var(--primary-glow), 0 0 18px -2px rgba(124, 58, 237, 0.5);
    }
    .v14-chipfloat {
        position: absolute; top: 44%; left: -6%; z-index: 3;
        background: linear-gradient(160deg, #0c1430, #070d22);
        border: 1px solid var(--v14-line-2);
        border-radius: 14px; padding: 0.6rem 0.85rem;
        display: inline-flex; align-items: center; gap: 0.55rem;
        font-weight: 700; font-size: 0.82rem; color: #fff;
        box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9), 0 0 20px -4px rgba(96, 165, 250, 0.4);
        animation: v14-float-c 6s ease-in-out infinite;
    }
    .v14-chipfloat i { color: var(--primary-light); }
    @keyframes v14-float-a {
        0%, 100% { transform: rotateY(12deg) rotateX(6deg) translateZ(-30px) translateY(0); }
        50% { transform: rotateY(12deg) rotateX(6deg) translateZ(-30px) translateY(-12px); }
    }
    @keyframes v14-float-b {
        0%, 100% { transform: rotateY(-10deg) rotateX(4deg) translateZ(40px) translateY(0); }
        50% { transform: rotateY(-10deg) rotateX(4deg) translateZ(40px) translateY(10px); }
    }
    @keyframes v14-float-c { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

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

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

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

    /* Sekundaer-Link (uppercase + Pfeil) innerhalb Szenen */
    .v14-foot {
        display: inline-flex; align-items: center; gap: 0.55rem;
        font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--primary-light); text-decoration: none; margin-top: 0.4rem;
        transition: gap 0.3s var(--v14-ease), color 0.3s var(--v14-ease);
    }
    .v14-foot:hover { gap: 0.9rem; color: #fff; }

    /* Glas-Karten-Grundform fuer Visuals auf dunkler Buehne */
    .v14-card {
        position: relative;
        border-radius: var(--radius);
        border: 1px solid var(--v14-line-2);
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
        box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
        overflow: hidden;
    }

    /* ============================================================
       SZENEN-VISUALS (reines CSS/SVG, dunkel + glow, kein Foto)
       ============================================================ */

    /* --- Plattform-Trio (Windows / Apple / Android) --- */
    .v14-devices {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.6rem, 1.6vw, 1.1rem); align-items: end;
    }
    .v14-device {
        position: relative; border-radius: 18px;
        border: 1px solid var(--v14-line-2);
        background: linear-gradient(160deg, #0c1430, #070d22);
        box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.9);
        padding: 0.9rem 0.9rem 1.1rem;
        text-decoration: none; color: #fff;
        display: flex; flex-direction: column; gap: 0.6rem;
        transition: transform 0.4s var(--v14-ease), box-shadow 0.4s var(--v14-ease), border-color 0.4s var(--v14-ease);
        isolation: isolate;
    }
    .v14-device:nth-child(2) { transform: translateY(-18px); }
    .v14-device:hover { transform: translateY(-26px); border-color: var(--primary-light); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95), 0 0 30px -8px rgba(96, 165, 250, 0.4); }
    .v14-device:nth-child(1):hover, .v14-device:nth-child(3):hover { transform: translateY(-8px); }
    .v14-device .v14-screen {
        aspect-ratio: 4 / 5; border-radius: 12px;
        background: linear-gradient(160deg, rgba(37, 99, 235, 0.22), rgba(124, 58, 237, 0.18));
        border: 1px solid var(--v14-line-2);
        display: flex; align-items: center; justify-content: center;
        font-size: clamp(1.6rem, 4vw, 2.4rem);
        color: var(--primary-light); position: relative; overflow: hidden;
    }
    .v14-device .v14-screen::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.28) 50%, transparent 60%);
        transform: translateX(-120%); transition: transform 0.7s var(--v14-ease);
    }
    .v14-device:hover .v14-screen::after { transform: translateX(120%); }
    .v14-device .v14-dev-name { font-weight: 800; font-size: 0.9rem; letter-spacing: -0.01em; }
    .v14-device .v14-dev-sub { font-size: 0.74rem; color: var(--v14-mut); font-weight: 600; }
    .v14-device .v14-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(--primary-light); background: rgba(96, 165, 250, 0.16);
        padding: 0.2rem 0.45rem; border-radius: 6px;
    }

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

    /* --- Webtools: leuchtendes Werkzeug-Raster --- */
    .v14-toolgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.55rem, 1.5vw, 0.9rem); }
    .v14-tool {
        aspect-ratio: 1; border-radius: 16px;
        border: 1px solid var(--v14-line); background: rgba(255, 255, 255, 0.04);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 0.4rem; color: #fff; font-size: clamp(1.1rem, 3vw, 1.6rem);
        transition: transform 0.35s var(--v14-ease), background 0.35s var(--v14-ease), border-color 0.35s var(--v14-ease), box-shadow 0.35s var(--v14-ease);
    }
    .v14-tool span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: var(--v14-soft); }
    .v14-tool:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.08); border-color: var(--primary-light); box-shadow: 0 0 24px -8px rgba(96, 165, 250, 0.5); }
    .v14-tool.is-hot {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        border-color: transparent;
        box-shadow: 0 18px 40px -18px var(--primary-glow), 0 0 26px -6px rgba(124, 58, 237, 0.5);
    }
    .v14-tool.is-hot span { color: rgba(255, 255, 255, 0.9); }

    /* --- News: Artikel-Stapel --- */
    .v14-articles { display: grid; gap: clamp(0.7rem, 1.6vw, 1rem); }
    .v14-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(--v14-line-2);
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
        transition: transform 0.35s var(--v14-ease), box-shadow 0.35s var(--v14-ease), border-color 0.35s var(--v14-ease);
        text-decoration: none;
    }
    .v14-article:hover { transform: translateX(6px); border-color: var(--primary-light); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.9), 0 0 22px -8px rgba(96, 165, 250, 0.4); }
    .v14-article-thumb {
        aspect-ratio: 1; border-radius: 12px;
        background: linear-gradient(150deg, rgba(37, 99, 235, 0.28), rgba(124, 58, 237, 0.22));
        display: flex; align-items: center; justify-content: center; color: var(--primary-light); font-size: 1.2rem;
    }
    .v14-article-meta .v14-am-tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
    .v14-article-meta .v14-am-title { font-weight: 700; font-size: clamp(0.92rem, 1.5vw, 1.05rem); margin: 0.25rem 0; line-height: 1.25; color: #fff; }
    .v14-article-meta .v14-am-line { height: 8px; width: 70%; border-radius: 5px; background: rgba(255, 255, 255, 0.08); }

    /* --- Shop: Produktkarten --- */
    .v14-shopgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.7rem, 1.8vw, 1.1rem); }
    .v14-product {
        border-radius: 16px; border: 1px solid var(--v14-line-2);
        background: linear-gradient(160deg, #0c1430, #070d22);
        box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.9);
        overflow: hidden; transition: transform 0.35s var(--v14-ease), box-shadow 0.35s var(--v14-ease), border-color 0.35s var(--v14-ease);
    }
    .v14-product:hover { transform: translateY(-6px); border-color: var(--primary-light); box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.95), 0 0 26px -8px rgba(96, 165, 250, 0.4); }
    .v14-product-art {
        aspect-ratio: 16 / 10;
        background: linear-gradient(150deg, rgba(37, 99, 235, 0.26), rgba(124, 58, 237, 0.2));
        display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--primary-light); position: relative;
    }
    .v14-product-art .v14-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;
    }
    .v14-product-info { padding: 0.85rem 0.95rem; display: grid; gap: 0.5rem; }
    .v14-product-info .v14-pi-name { font-weight: 700; font-size: 0.92rem; color: #fff; }
    .v14-product-info .v14-pi-foot { display: flex; align-items: center; justify-content: space-between; }
    .v14-product-info .v14-pi-price { font-weight: 800; color: var(--primary-light); font-size: 0.95rem; }
    .v14-product-info .v14-pi-dl { font-size: 0.7rem; font-weight: 700; color: var(--v14-mut); display: inline-flex; align-items: center; gap: 0.3rem; }

    /* --- Hosting: Server-Rack mit blinkenden LEDs --- */
    .v14-rack { display: grid; gap: clamp(0.6rem, 1.4vw, 0.9rem); max-width: 440px; margin-inline: auto; }
    .v14-rack-unit {
        display: flex; align-items: center; gap: 1rem; padding: clamp(0.9rem, 2vw, 1.2rem);
        border-radius: 14px; border: 1px solid var(--v14-line-2); background: rgba(255, 255, 255, 0.04);
    }
    .v14-rack-unit .v14-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;
    }
    .v14-rack-unit .v14-ru-body { flex: 1; min-width: 0; }
    .v14-rack-unit .v14-ru-name { font-weight: 700; color: #fff; font-size: 0.92rem; }
    .v14-rack-unit .v14-ru-meta { font-size: 0.74rem; color: var(--v14-mut); }
    .v14-rack-unit .v14-leds { display: flex; gap: 5px; }
    .v14-rack-unit .v14-leds i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }
    .v14-rack-unit .v14-leds i:nth-child(2) { background: var(--primary-light); box-shadow: 0 0 8px var(--primary-light); animation: v14-blink 2s ease-in-out infinite; }
    @keyframes v14-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

    /* --- IT-Hilfe: Support-Chat --- */
    .v14-chat { max-width: 440px; margin-inline: auto; display: grid; gap: 0.7rem; }
    .v14-bubble { padding: 0.85rem 1.1rem; border-radius: 16px; font-size: 0.92rem; line-height: 1.5; max-width: 82%; }
    .v14-bubble.in {
        background: rgba(255, 255, 255, 0.05); border: 1px solid var(--v14-line-2);
        border-bottom-left-radius: 5px; color: var(--v14-soft); justify-self: start;
    }
    .v14-bubble.out {
        background: linear-gradient(120deg, var(--primary), var(--accent)); color: #fff;
        border-bottom-right-radius: 5px; justify-self: end;
        box-shadow: 0 0 22px -8px rgba(124, 58, 237, 0.5);
    }
    .v14-bubble .v14-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; }
    .v14-typing {
        justify-self: start; display: inline-flex; gap: 5px; padding: 0.9rem 1.1rem;
        background: rgba(255, 255, 255, 0.05); border: 1px solid var(--v14-line-2);
        border-radius: 16px; border-bottom-left-radius: 5px;
    }
    .v14-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--v14-mut); animation: v14-typing 1.3s ease-in-out infinite; }
    .v14-typing i:nth-child(2) { animation-delay: 0.18s; }
    .v14-typing i:nth-child(3) { animation-delay: 0.36s; }
    @keyframes v14-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

    /* ============================================================
       SZENE: INDEX / SZENENVERZEICHNIS (Sekundaer-Navigation)
       ============================================================ */
    .v14-idx-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
    .v14-idx-head .v14-chapter { justify-content: center; }
    .v14-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; }
    .v14-idx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
    @media (min-width: 680px) { .v14-idx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); } }
    @media (min-width: 1080px) { .v14-idx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .v14-idx-link {
        display: flex; align-items: center; gap: 1rem;
        padding: clamp(0.85rem, 2vw, 1.1rem) 0;
        border-top: 1px solid var(--v14-line);
        text-decoration: none; color: var(--v14-soft);
        transition: color 0.3s var(--v14-ease), padding-left 0.3s var(--v14-ease);
    }
    .v14-idx-link:hover { color: #fff; padding-left: 0.5rem; }
    .v14-idx-link .v14-idx-no { font-size: 0.74rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary-light); min-width: 2.4ch; }
    .v14-idx-link .v14-idx-ico {
        width: 38px; height: 38px; border-radius: 10px;
        background: rgba(255, 255, 255, 0.05); border: 1px solid var(--v14-line-2);
        display: flex; align-items: center; justify-content: center;
        color: var(--primary-light); font-size: 0.95rem; flex: none;
        transition: background 0.3s var(--v14-ease), color 0.3s var(--v14-ease), border-color 0.3s var(--v14-ease), box-shadow 0.3s var(--v14-ease);
    }
    .v14-idx-link:hover .v14-idx-ico { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; border-color: transparent; box-shadow: 0 0 20px -6px rgba(96, 165, 250, 0.6); }
    .v14-idx-link .v14-idx-label { flex: 1; min-width: 0; }
    .v14-idx-link .v14-idx-name { display: block; font-weight: 700; font-size: 1rem; color: #fff; }
    .v14-idx-link .v14-idx-sub { display: block; font-size: 0.78rem; opacity: 0.65; margin-top: 0.1rem; }
    .v14-idx-link .v14-idx-arrow { opacity: 0.5; transition: transform 0.3s var(--v14-ease), opacity 0.3s var(--v14-ease); flex: none; }
    .v14-idx-link:hover .v14-idx-arrow { opacity: 1; transform: translateX(4px); }

    /* ============================================================
       SCHLUSS-SZENE: KONTAKT (Abspann)
       ============================================================ */
    .v14-scene--contact { text-align: center; }
    .v14-contact-wrap { max-width: 760px; margin-inline: auto; }
    .v14-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; }
    .v14-contact-wrap .v14-lead { margin-inline: auto; }
    .v14-contact-wrap .v14-cta-row { justify-content: center; }
    .v14-quick { margin-top: clamp(2.4rem, 5vw, 3.5rem); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.7rem; }
    .v14-quick a {
        display: inline-flex; align-items: center; gap: 0.5rem;
        font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--v14-soft);
        border: 1px solid var(--v14-line-2); border-radius: 999px; padding: 0.55rem 1rem;
        transition: color 0.3s var(--v14-ease), border-color 0.3s var(--v14-ease), background 0.3s var(--v14-ease);
    }
    .v14-quick a:hover { color: #fff; border-color: var(--primary-light); background: rgba(96, 165, 250, 0.1); }
    .v14-quick a i { color: var(--primary-light); }
    .v14-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(--v14-mut);
    }
    .v14-signoff img { height: 18px; width: auto; opacity: 0.9; }

    /* ============================================================
       RESPONSIVE FEINSCHLIFF
       ============================================================ */
    @media (max-width: 900px) {
        .v14-scene {
            padding-right: 0; padding-left: 0; min-height: auto;
            padding-top: clamp(4.5rem, 11vh, 7rem);
            padding-bottom: clamp(3.5rem, 9vh, 5.5rem);
        }
        .v14-scene--hero { padding-top: clamp(7.5rem, 17vh, 10rem); }
        .v14-scroll-cue { display: none; }
        .v14-stage { max-width: 360px; }
    }
    @media (max-width: 540px) {
        .v14-devices { gap: 0.5rem; }
        .v14-device { padding: 0.6rem 0.6rem 0.8rem; }
        .v14-device:nth-child(2) { transform: translateY(-10px); }
        .v14-toolgrid { gap: 0.5rem; }
        .v14-shopgrid { grid-template-columns: minmax(0, 1fr); }
        .v14-hero-meta li { font-size: 0.78rem; }
    }

    /* ============================================================
       REDUCED MOTION
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
        .v14-home .v14-rise,
        .v14-home .v14-rise-sm,
        .v14-home .v14-zoom { opacity: 1 !important; transform: none !important; transition: none !important; }
        .v14-home *,
        .v14-home *::before,
        .v14-home *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
            scroll-behavior: auto !important;
        }
    }
</style>

    {{-- ============================================================
         REEL-RAIL (fixe Szenen-Navigation rechts; KEIN <nav>)
         ============================================================ --}}
    <div class="v14-rail" role="navigation" aria-label="Szenen-Navigation" data-rail aria-hidden="false">
        <div class="v14-rail-line" aria-hidden="true"><span data-rail-prog></span></div>
        <div class="v14-rail-track">
            <a class="v14-dot" href="#v14-szene-hero" data-dot="v14-szene-hero" data-label="Intro" aria-label="Zur Szene Intro"></a>
            <a class="v14-dot" href="#v14-szene-plattformen" data-dot="v14-szene-plattformen" data-label="Plattformen" aria-label="Zur Szene Plattformen"></a>
            <a class="v14-dot" href="#v14-szene-web" data-dot="v14-szene-web" data-label="Webdesign" aria-label="Zur Szene Webdesign"></a>
            <a class="v14-dot" href="#v14-szene-webtools" data-dot="v14-szene-webtools" data-label="Webtools" aria-label="Zur Szene Webtools"></a>
            <a class="v14-dot" href="#v14-szene-news" data-dot="v14-szene-news" data-label="News" aria-label="Zur Szene News"></a>
            <a class="v14-dot" href="#v14-szene-shop" data-dot="v14-szene-shop" data-label="Shop" aria-label="Zur Szene Shop"></a>
            <a class="v14-dot" href="#v14-szene-hosting" data-dot="v14-szene-hosting" data-label="Hosting" aria-label="Zur Szene Hosting"></a>
            <a class="v14-dot" href="#v14-szene-support" data-dot="v14-szene-support" data-label="IT-Hilfe" aria-label="Zur Szene IT-Hilfe"></a>
            <a class="v14-dot" href="#v14-szene-index" data-dot="v14-szene-index" data-label="Verzeichnis" aria-label="Zum Szenenverzeichnis"></a>
            <a class="v14-dot" href="#v14-szene-contact" data-dot="v14-szene-contact" data-label="Kontakt" aria-label="Zur Szene Kontakt"></a>
        </div>
    </div>

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

                    <h1 class="v14-hero-h v14-rise" style="--v14-d:120ms;">
                        Eine Marke.<br>
                        <span class="v14-grad">Ganz grosses Kino.</span>
                        <span class="v14-name">Software, Apps &amp; Webdesign von <b>Arthur Kotsch</b></span>
                    </h1>

                    <p class="v14-lead v14-rise" style="--v14-d:200ms;">
                        <strong>KOTSCH.TECH</strong> ist die persönliche Tech-Marke von Arthur Kotsch.
                        Scrolle durch eine nächtliche Premiere &mdash; von nativen Apps über Webdesign und
                        420+ Webtools bis zu Shop, Hosting und ehrlicher IT-Hilfe. Alles aus einer Hand.
                    </p>

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

                    <ul class="v14-hero-meta v14-rise" style="--v14-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="v14-hero-art v14-zoom" style="--v14-d:240ms;" aria-hidden="true">
                    <div class="v14-stage">
                        <div class="v14-pane v14-pane--a">
                            <div class="v14-pane-bar"><span></span><span></span><span></span></div>
                            <div class="v14-pane-body">
                                <div class="v14-ln grad"></div>
                                <div class="v14-ln w1"></div>
                                <div class="v14-ln w3"></div>
                                <div class="v14-ln w2"></div>
                                <div class="v14-ln w1"></div>
                            </div>
                        </div>
                        <div class="v14-pane v14-pane--b">
                            <div class="v14-pane-bar"><span></span><span></span><span></span></div>
                            <div class="v14-pane-body">
                                <div class="v14-app-ico"><i class="fa-solid fa-bolt"></i></div>
                                <div class="v14-ln w1"></div>
                                <div class="v14-ln w2"></div>
                                <div class="v14-ln grad"></div>
                            </div>
                        </div>
                        <span class="v14-chipfloat"><i class="fa-solid fa-wand-magic-sparkles"></i> 420+ Tools</span>
                    </div>
                </div>
            </div>
        </div>
        <a class="v14-scroll-cue" href="#v14-szene-plattformen" aria-label="Weiter zur ersten Szene">
            <span class="v14-mouse" aria-hidden="true"></span> Szene 01
        </a>
    </section>

    {{-- ============================================================
         SZENE 01 - PLATTFORMEN (Windows / iOS & Mac / Android)
         ============================================================ --}}
    <section class="v14-scene" id="v14-szene-plattformen" data-scene aria-labelledby="v14-h-plattformen">
        <span class="v14-bignum" aria-hidden="true">01</span>
        <div class="v14-inner">
            <div class="v14-split">
                <div class="v14-split-text">
                    <span class="v14-chapter v14-rise"><span class="v14-chapter-bar" aria-hidden="true"></span><span class="v14-chapter-no">01</span> Szene &mdash; Plattformen</span>
                    <h2 class="v14-h v14-rise" id="v14-h-plattformen" style="--v14-d:80ms;">Software &amp; native Apps für <span class="v14-grad">jede Plattform</span></h2>
                    <p class="v14-lead v14-rise" style="--v14-d:140ms;">
                        Eine Codebasis, drei Bühnen: schnelle <strong>Windows-Software</strong>, feine
                        <strong>iOS- &amp; macOS-Apps</strong> und <strong>Android-Apps</strong> in Entwicklung.
                        Sauber gebaut, durchdacht im Detail, persönlich gepflegt.
                    </p>
                    <ul class="v14-points v14-rise" style="--v14-d:200ms;">
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Windows-Tools für den Alltag &mdash; klein, schnell, ohne Ballast.</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Convertly+ live im App Store für iPhone, iPad &amp; Mac.</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Android-Portierung in Arbeit &mdash; dieselbe Qualität, neue Plattform.</li>
                    </ul>
                    <div class="v14-cta-row v14-rise" style="--v14-d:260ms;">
                        <a class="v14-btn v14-btn-primary" href="{{ route('windows.index') }}">Windows-Software <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                        <a class="v14-btn v14-btn-ghost" href="{{ route('apple.index') }}">iOS &amp; Mac <i class="fa-brands fa-apple" aria-hidden="true"></i></a>
                    </div>
                </div>
                <div class="v14-split-art v14-zoom" style="--v14-d:200ms;" aria-hidden="true">
                    <div class="v14-devices">
                        <a class="v14-device" href="{{ route('windows.index') }}" tabindex="-1" aria-hidden="true">
                            <span class="v14-dev-badge">Live</span>
                            <span class="v14-screen"><i class="fa-brands fa-windows"></i></span>
                            <span class="v14-dev-name">Windows</span>
                            <span class="v14-dev-sub">Desktop-Tools</span>
                        </a>
                        <a class="v14-device" href="{{ route('apple.index') }}" tabindex="-1" aria-hidden="true">
                            <span class="v14-dev-badge">App Store</span>
                            <span class="v14-screen"><i class="fa-brands fa-apple"></i></span>
                            <span class="v14-dev-name">iOS &amp; macOS</span>
                            <span class="v14-dev-sub">Convertly+</span>
                        </a>
                        <a class="v14-device" href="{{ route('android.index') }}" tabindex="-1" aria-hidden="true">
                            <span class="v14-dev-badge">Bald</span>
                            <span class="v14-screen"><i class="fa-brands fa-android"></i></span>
                            <span class="v14-dev-name">Android</span>
                            <span class="v14-dev-sub">In Entwicklung</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 02 - WEBDESIGN
         ============================================================ --}}
    <section class="v14-scene" id="v14-szene-web" data-scene aria-labelledby="v14-h-web">
        <span class="v14-bignum" aria-hidden="true">02</span>
        <div class="v14-inner">
            <div class="v14-split is-reverse">
                <div class="v14-split-text">
                    <span class="v14-chapter v14-rise"><span class="v14-chapter-bar" aria-hidden="true"></span><span class="v14-chapter-no">02</span> Szene &mdash; Webdesign</span>
                    <h2 class="v14-h v14-rise" id="v14-h-web" style="--v14-d:80ms;">Websites, die <span class="v14-grad">im Rampenlicht</span> stehen</h2>
                    <p class="v14-lead v14-rise" style="--v14-d:140ms;">
                        Moderne <strong>Webauftritte &amp; Templates</strong> mit klarer Bühne: schnell,
                        responsive und suchmaschinenfreundlich. Vom ersten Entwurf bis zum Livegang &mdash;
                        gebaut für Tempo und gute Lesbarkeit.
                    </p>
                    <ul class="v14-points v14-rise" style="--v14-d:200ms;">
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Maßgeschneiderte Layouts statt Baukasten von der Stange.</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Tempo-optimiert &mdash; gute Core Web Vitals als Grundregel.</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Fertige Templates als schneller Startpunkt für dein Projekt.</li>
                    </ul>
                    <a class="v14-foot v14-rise" style="--v14-d:260ms;" href="{{ route('web.templates') }}">Webdesign &amp; Templates ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                </div>
                <div class="v14-split-art v14-zoom" style="--v14-d:200ms;" aria-hidden="true">
                    <div class="v14-browser">
                        <div class="v14-browser-bar">
                            <span class="v14-dots"><span></span><span></span><span></span></span>
                            <span class="v14-url"><i class="fa-solid fa-lock"></i> kotsch.tech</span>
                        </div>
                        <div class="v14-browser-canvas">
                            <div class="v14-bc-hero"></div>
                            <div class="v14-bc-row"><span class="v14-bc-card"></span><span class="v14-bc-card"></span><span class="v14-bc-card"></span></div>
                            <div class="v14-bc-line"></div>
                            <div class="v14-bc-line s"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 03 - WEBTOOLS
         ============================================================ --}}
    <section class="v14-scene" id="v14-szene-webtools" data-scene aria-labelledby="v14-h-webtools">
        <span class="v14-bignum" aria-hidden="true">03</span>
        <div class="v14-inner">
            <div class="v14-split">
                <div class="v14-split-text">
                    <span class="v14-chapter v14-rise"><span class="v14-chapter-bar" aria-hidden="true"></span><span class="v14-chapter-no">03</span> Szene &mdash; Webtools</span>
                    <h2 class="v14-h v14-rise" id="v14-h-webtools" style="--v14-d:80ms;">420+ Webtools, <span class="v14-grad">kostenlos im Browser</span></h2>
                    <p class="v14-lead v14-rise" style="--v14-d:140ms;">
                        Konvertieren, generieren, rechnen, formatieren: Eine große Sammlung schlanker
                        <strong>Online-Tools</strong> &mdash; ohne Anmeldung, direkt im Browser. Praktische
                        Helfer für den digitalen Alltag, alle an einem Ort.
                    </p>
                    <a class="v14-foot v14-rise" style="--v14-d:200ms;" href="{{ route('webtools.show') }}">Alle Webtools öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                </div>
                <div class="v14-split-art v14-zoom" style="--v14-d:200ms;" aria-hidden="true">
                    <div class="v14-toolgrid">
                        <span class="v14-tool is-hot"><i class="fa-solid fa-wand-magic-sparkles"></i><span>Generator</span></span>
                        <span class="v14-tool"><i class="fa-solid fa-file-arrow-down"></i><span>Konverter</span></span>
                        <span class="v14-tool"><i class="fa-solid fa-palette"></i><span>Farben</span></span>
                        <span class="v14-tool"><i class="fa-solid fa-calculator"></i><span>Rechner</span></span>
                        <span class="v14-tool is-hot"><i class="fa-solid fa-qrcode"></i><span>QR-Code</span></span>
                        <span class="v14-tool"><i class="fa-solid fa-key"></i><span>Passwort</span></span>
                        <span class="v14-tool"><i class="fa-solid fa-code"></i><span>Format</span></span>
                        <span class="v14-tool"><i class="fa-solid fa-image"></i><span>Bilder</span></span>
                        <span class="v14-tool is-hot"><i class="fa-solid fa-ruler-combined"></i><span>Einheiten</span></span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 04 - NEWS & ARTIKEL
         ============================================================ --}}
    <section class="v14-scene" id="v14-szene-news" data-scene aria-labelledby="v14-h-news">
        <span class="v14-bignum" aria-hidden="true">04</span>
        <div class="v14-inner">
            <div class="v14-split is-reverse">
                <div class="v14-split-text">
                    <span class="v14-chapter v14-rise"><span class="v14-chapter-bar" aria-hidden="true"></span><span class="v14-chapter-no">04</span> Szene &mdash; News</span>
                    <h2 class="v14-h v14-rise" id="v14-h-news" style="--v14-d:80ms;">Notizen &amp; Artikel <span class="v14-grad">aus dem Maschinenraum</span></h2>
                    <p class="v14-lead v14-rise" style="--v14-d:140ms;">
                        Gedanken zu Software, Apps, Web und Tools &mdash; <strong>verständlich erklärt</strong>,
                        ohne Buzzword-Bingo. Updates aus den Projekten und praktische Tipps für den Alltag.
                    </p>
                    <a class="v14-foot v14-rise" style="--v14-d:200ms;" href="{{ route('news.index') }}">Zu News &amp; Artikeln <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                </div>
                <div class="v14-split-art v14-zoom" style="--v14-d:200ms;" aria-hidden="true">
                    <div class="v14-articles">
                        <a class="v14-article" href="{{ route('news.index') }}" tabindex="-1" aria-hidden="true">
                            <span class="v14-article-thumb"><i class="fa-solid fa-newspaper"></i></span>
                            <span class="v14-article-meta">
                                <span class="v14-am-tag">Update</span>
                                <span class="v14-am-title">Neues aus der App-Werkstatt</span>
                                <span class="v14-am-line"></span>
                            </span>
                        </a>
                        <a class="v14-article" href="{{ route('news.index') }}" tabindex="-1" aria-hidden="true">
                            <span class="v14-article-thumb"><i class="fa-solid fa-lightbulb"></i></span>
                            <span class="v14-article-meta">
                                <span class="v14-am-tag">Tipp</span>
                                <span class="v14-am-title">Schneller arbeiten mit Webtools</span>
                                <span class="v14-am-line"></span>
                            </span>
                        </a>
                        <a class="v14-article" href="{{ route('news.index') }}" tabindex="-1" aria-hidden="true">
                            <span class="v14-article-thumb"><i class="fa-solid fa-code-branch"></i></span>
                            <span class="v14-article-meta">
                                <span class="v14-am-tag">Technik</span>
                                <span class="v14-am-title">Wie diese Seite gebaut ist</span>
                                <span class="v14-am-line"></span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 05 - SHOP
         ============================================================ --}}
    <section class="v14-scene" id="v14-szene-shop" data-scene aria-labelledby="v14-h-shop">
        <span class="v14-bignum" aria-hidden="true">05</span>
        <div class="v14-inner">
            <div class="v14-split">
                <div class="v14-split-text">
                    <span class="v14-chapter v14-rise"><span class="v14-chapter-bar" aria-hidden="true"></span><span class="v14-chapter-no">05</span> Szene &mdash; Shop</span>
                    <h2 class="v14-h v14-rise" id="v14-h-shop" style="--v14-d:80ms;">Digitale Produkte <span class="v14-grad">direkt vom Macher</span></h2>
                    <p class="v14-lead v14-rise" style="--v14-d:140ms;">
                        Apps, Vorlagen und digitale Helfer im <strong>Shop</strong> &mdash; sofort verfügbar,
                        fair kalkuliert und persönlich betreut. Kein Abo-Dschungel, sondern klare Angebote.
                    </p>
                    <ul class="v14-points v14-rise" style="--v14-d:200ms;">
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Sofort-Download nach dem Kauf, ohne Wartezeit.</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Faire Preise und ehrliche Produktbeschreibungen.</li>
                    </ul>
                    <a class="v14-foot v14-rise" style="--v14-d:260ms;" href="{{ route('shop.index') }}">Zum Shop <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                </div>
                <div class="v14-split-art v14-zoom" style="--v14-d:200ms;" aria-hidden="true">
                    <div class="v14-shopgrid">
                        <div class="v14-product">
                            <div class="v14-product-art"><span class="v14-tag">Neu</span><i class="fa-solid fa-bolt"></i></div>
                            <div class="v14-product-info">
                                <span class="v14-pi-name">Convertly+</span>
                                <span class="v14-pi-foot"><span class="v14-pi-price">App Store</span><span class="v14-pi-dl"><i class="fa-solid fa-download"></i> Sofort</span></span>
                            </div>
                        </div>
                        <div class="v14-product">
                            <div class="v14-product-art"><i class="fa-solid fa-layer-group"></i></div>
                            <div class="v14-product-info">
                                <span class="v14-pi-name">Web-Template</span>
                                <span class="v14-pi-foot"><span class="v14-pi-price">ab 0 &euro;</span><span class="v14-pi-dl"><i class="fa-solid fa-download"></i> Digital</span></span>
                            </div>
                        </div>
                        <div class="v14-product">
                            <div class="v14-product-art"><i class="fa-solid fa-toolbox"></i></div>
                            <div class="v14-product-info">
                                <span class="v14-pi-name">Tool-Paket</span>
                                <span class="v14-pi-foot"><span class="v14-pi-price">Digital</span><span class="v14-pi-dl"><i class="fa-solid fa-download"></i> Sofort</span></span>
                            </div>
                        </div>
                        <div class="v14-product">
                            <div class="v14-product-art"><i class="fa-solid fa-cube"></i></div>
                            <div class="v14-product-info">
                                <span class="v14-pi-name">Mehr im Shop</span>
                                <span class="v14-pi-foot"><span class="v14-pi-price">11 Artikel</span><span class="v14-pi-dl"><i class="fa-solid fa-arrow-right"></i> Ansehen</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 06 - HOSTING
         ============================================================ --}}
    <section class="v14-scene" id="v14-szene-hosting" data-scene aria-labelledby="v14-h-hosting">
        <span class="v14-bignum" aria-hidden="true">06</span>
        <div class="v14-inner">
            <div class="v14-split is-reverse">
                <div class="v14-split-text">
                    <span class="v14-chapter v14-rise"><span class="v14-chapter-bar" aria-hidden="true"></span><span class="v14-chapter-no">06</span> Szene &mdash; Hosting</span>
                    <h2 class="v14-h v14-rise" id="v14-h-hosting" style="--v14-d:80ms;">Kleines Hosting, <span class="v14-grad">groß gepflegt</span></h2>
                    <p class="v14-lead v14-rise" style="--v14-d:140ms;">
                        Überschaubares, <strong>persönlich betreutes Hosting</strong> für Websites und
                        kleine Projekte. Kein anonymes Massengeschäft &mdash; sondern ein Ansprechpartner,
                        der die Maschine kennt.
                    </p>
                    <ul class="v14-points v14-rise" style="--v14-d:200ms;">
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Direkter Draht statt Ticket-Warteschleife.</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Sauber konfiguriert, regelmäßig gewartet.</li>
                    </ul>
                    <a class="v14-foot v14-rise" style="--v14-d:260ms;" href="{{ route('hosting.index') }}">Hosting entdecken <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                </div>
                <div class="v14-split-art v14-zoom" style="--v14-d:200ms;" aria-hidden="true">
                    <div class="v14-rack">
                        <div class="v14-rack-unit">
                            <span class="v14-ru-ico"><i class="fa-solid fa-server"></i></span>
                            <span class="v14-ru-body"><span class="v14-ru-name">Webspace</span><span class="v14-ru-meta">SSD &middot; HTTP/2 &middot; SSL inklusive</span></span>
                            <span class="v14-leds" aria-hidden="true"><i></i><i></i></span>
                        </div>
                        <div class="v14-rack-unit">
                            <span class="v14-ru-ico"><i class="fa-solid fa-database"></i></span>
                            <span class="v14-ru-body"><span class="v14-ru-name">Datenbank</span><span class="v14-ru-meta">Tägliche Sicherung</span></span>
                            <span class="v14-leds" aria-hidden="true"><i></i><i></i></span>
                        </div>
                        <div class="v14-rack-unit">
                            <span class="v14-ru-ico"><i class="fa-solid fa-shield-halved"></i></span>
                            <span class="v14-ru-body"><span class="v14-ru-name">Schutz</span><span class="v14-ru-meta">Firewall &middot; Monitoring</span></span>
                            <span class="v14-leds" aria-hidden="true"><i></i><i></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 07 - IT-HILFE
         ============================================================ --}}
    <section class="v14-scene" id="v14-szene-support" data-scene aria-labelledby="v14-h-support">
        <span class="v14-bignum" aria-hidden="true">07</span>
        <div class="v14-inner">
            <div class="v14-split">
                <div class="v14-split-text">
                    <span class="v14-chapter v14-rise"><span class="v14-chapter-bar" aria-hidden="true"></span><span class="v14-chapter-no">07</span> Szene &mdash; IT-Hilfe</span>
                    <h2 class="v14-h v14-rise" id="v14-h-support" style="--v14-d:80ms;">IT-Hilfe, die <span class="v14-grad">Klartext spricht</span></h2>
                    <p class="v14-lead v14-rise" style="--v14-d:140ms;">
                        Computer streikt, Drucker bockt, Website hakt? <strong>Persönliche IT-Hilfe</strong>
                        ohne Fachchinesisch &mdash; geduldig erklärt, schnell gelöst. Für Menschen, nicht
                        für Aktenzeichen.
                    </p>
                    <a class="v14-foot v14-rise" style="--v14-d:200ms;" href="{{ route('it-hilfe.index') }}">IT-Hilfe anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                </div>
                <div class="v14-split-art v14-zoom" style="--v14-d:200ms;" aria-hidden="true">
                    <div class="v14-chat">
                        <div class="v14-bubble in"><span class="v14-bub-from">Du</span>Mein Laptop ist plötzlich super langsam &mdash; was kann ich tun?</div>
                        <div class="v14-bubble out"><span class="v14-bub-from">Arthur</span>Kein Stress. Wir schauen drauf, räumen auf und machen ihn wieder flott.</div>
                        <div class="v14-typing" aria-hidden="true"><i></i><i></i><i></i></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 08 - SZENENVERZEICHNIS (Sekundaer-Navigation)
         ============================================================ --}}
    <section class="v14-scene" id="v14-szene-index" data-scene aria-labelledby="v14-h-index">
        <span class="v14-bignum" aria-hidden="true">08</span>
        <div class="v14-inner">
            <div class="v14-idx-head">
                <span class="v14-chapter v14-rise"><span class="v14-chapter-bar" aria-hidden="true"></span><span class="v14-chapter-no">08</span> Szene &mdash; Verzeichnis</span>
                <h2 class="v14-h v14-rise" id="v14-h-index" style="--v14-d:80ms; max-width:none;">Alle Bereiche <span class="v14-grad">auf einen Blick</span></h2>
            </div>
            <div class="v14-idx-grid v14-rise" style="--v14-d:140ms;" role="navigation" aria-label="Alle Bereiche von KOTSCH.TECH">
                <a class="v14-idx-link" href="{{ route('windows.index') }}">
                    <span class="v14-idx-no">01</span>
                    <span class="v14-idx-ico"><i class="fa-brands fa-windows" aria-hidden="true"></i></span>
                    <span class="v14-idx-label"><span class="v14-idx-name">Windows</span><span class="v14-idx-sub">Desktop-Software &amp; Tools</span></span>
                    <i class="fa-solid fa-arrow-right v14-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v14-idx-link" href="{{ route('apple.index') }}">
                    <span class="v14-idx-no">02</span>
                    <span class="v14-idx-ico"><i class="fa-brands fa-apple" aria-hidden="true"></i></span>
                    <span class="v14-idx-label"><span class="v14-idx-name">iOS &amp; macOS</span><span class="v14-idx-sub">Native Apps, u.a. Convertly+</span></span>
                    <i class="fa-solid fa-arrow-right v14-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v14-idx-link" href="{{ route('android.index') }}">
                    <span class="v14-idx-no">03</span>
                    <span class="v14-idx-ico"><i class="fa-brands fa-android" aria-hidden="true"></i></span>
                    <span class="v14-idx-label"><span class="v14-idx-name">Android</span><span class="v14-idx-sub">Apps in Entwicklung</span></span>
                    <i class="fa-solid fa-arrow-right v14-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v14-idx-link" href="{{ route('web.templates') }}">
                    <span class="v14-idx-no">04</span>
                    <span class="v14-idx-ico"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i></span>
                    <span class="v14-idx-label"><span class="v14-idx-name">Webdesign</span><span class="v14-idx-sub">Websites &amp; Templates</span></span>
                    <i class="fa-solid fa-arrow-right v14-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v14-idx-link" href="{{ route('webtools.show') }}">
                    <span class="v14-idx-no">05</span>
                    <span class="v14-idx-ico"><i class="fa-solid fa-toolbox" aria-hidden="true"></i></span>
                    <span class="v14-idx-label"><span class="v14-idx-name">Webtools</span><span class="v14-idx-sub">420+ kostenlose Online-Tools</span></span>
                    <i class="fa-solid fa-arrow-right v14-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v14-idx-link" href="{{ route('news.index') }}">
                    <span class="v14-idx-no">06</span>
                    <span class="v14-idx-ico"><i class="fa-solid fa-newspaper" aria-hidden="true"></i></span>
                    <span class="v14-idx-label"><span class="v14-idx-name">News</span><span class="v14-idx-sub">Artikel &amp; Updates</span></span>
                    <i class="fa-solid fa-arrow-right v14-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v14-idx-link" href="{{ route('shop.index') }}">
                    <span class="v14-idx-no">07</span>
                    <span class="v14-idx-ico"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i></span>
                    <span class="v14-idx-label"><span class="v14-idx-name">Shop</span><span class="v14-idx-sub">Digitale Produkte</span></span>
                    <i class="fa-solid fa-arrow-right v14-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v14-idx-link" href="{{ route('hosting.index') }}">
                    <span class="v14-idx-no">08</span>
                    <span class="v14-idx-ico"><i class="fa-solid fa-server" aria-hidden="true"></i></span>
                    <span class="v14-idx-label"><span class="v14-idx-name">Hosting</span><span class="v14-idx-sub">Klein &amp; persönlich betreut</span></span>
                    <i class="fa-solid fa-arrow-right v14-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v14-idx-link" href="{{ route('it-hilfe.index') }}">
                    <span class="v14-idx-no">09</span>
                    <span class="v14-idx-ico"><i class="fa-solid fa-headset" aria-hidden="true"></i></span>
                    <span class="v14-idx-label"><span class="v14-idx-name">IT-Hilfe</span><span class="v14-idx-sub">Persönlicher Support</span></span>
                    <i class="fa-solid fa-arrow-right v14-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v14-idx-link" href="{{ route('documents.index') }}">
                    <span class="v14-idx-no">10</span>
                    <span class="v14-idx-ico"><i class="fa-solid fa-folder-open" aria-hidden="true"></i></span>
                    <span class="v14-idx-label"><span class="v14-idx-name">Dokumente</span><span class="v14-idx-sub">Downloads &amp; Unterlagen</span></span>
                    <i class="fa-solid fa-arrow-right v14-idx-arrow" aria-hidden="true"></i>
                </a>
                <a class="v14-idx-link" href="{{ route('kontakt') }}">
                    <span class="v14-idx-no">11</span>
                    <span class="v14-idx-ico"><i class="fa-solid fa-paper-plane" aria-hidden="true"></i></span>
                    <span class="v14-idx-label"><span class="v14-idx-name">Kontakt</span><span class="v14-idx-sub">Projekt anfragen</span></span>
                    <i class="fa-solid fa-arrow-right v14-idx-arrow" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 09 - KONTAKT / ABSPANN
         ============================================================ --}}
    <section class="v14-scene v14-scene--contact" id="v14-szene-contact" data-scene aria-labelledby="v14-h-contact">
        <span class="v14-bignum" aria-hidden="true">09</span>
        <div class="v14-inner">
            <div class="v14-contact-wrap">
                <span class="v14-chapter v14-rise" style="justify-content:center;"><span class="v14-chapter-bar" aria-hidden="true"></span><span class="v14-chapter-no">09</span> Szene &mdash; Abspann</span>
                <h2 class="v14-contact-h v14-rise" id="v14-h-contact" style="--v14-d:80ms;">Eine Idee im Kopf? <span class="v14-grad">Lass sie uns bauen.</span></h2>
                <p class="v14-lead v14-rise" style="--v14-d:140ms;">
                    Ob App, Website, Tool oder ein hängendes IT-Problem &mdash; schreib direkt an Arthur Kotsch.
                    Persönlich, ehrlich und ohne Agentur-Floskeln. Der erste Austausch ist immer unverbindlich.
                </p>
                <div class="v14-cta-row v14-rise" style="--v14-d:200ms;">
                    <a class="v14-btn v14-btn-primary" href="{{ route('kontakt') }}">Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    <a class="v14-btn v14-btn-ghost" href="{{ route('webtools.show') }}">420+ Webtools testen <i class="fa-solid fa-toolbox" aria-hidden="true"></i></a>
                </div>
                <div class="v14-quick v14-rise" style="--v14-d:260ms;" role="navigation" aria-label="Schnellzugriff auf alle Bereiche">
                    <a href="{{ route('windows.index') }}"><i class="fa-brands fa-windows" aria-hidden="true"></i> Windows</a>
                    <a href="{{ route('apple.index') }}"><i class="fa-brands fa-apple" aria-hidden="true"></i> iOS &amp; Mac</a>
                    <a href="{{ route('android.index') }}"><i class="fa-brands fa-android" aria-hidden="true"></i> Android</a>
                    <a href="{{ route('web.templates') }}"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i> Webdesign</a>
                    <a href="{{ route('webtools.show') }}"><i class="fa-solid fa-toolbox" aria-hidden="true"></i> Webtools</a>
                    <a href="{{ route('news.index') }}"><i class="fa-solid fa-newspaper" aria-hidden="true"></i> News</a>
                    <a href="{{ route('shop.index') }}"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i> Shop</a>
                    <a href="{{ route('hosting.index') }}"><i class="fa-solid fa-server" aria-hidden="true"></i> Hosting</a>
                    <a href="{{ route('it-hilfe.index') }}"><i class="fa-solid fa-headset" aria-hidden="true"></i> IT-Hilfe</a>
                    <a href="{{ route('documents.index') }}"><i class="fa-solid fa-folder-open" aria-hidden="true"></i> Dokumente</a>
                </div>
                <div class="v14-signoff v14-rise" style="--v14-d:320ms;">
                    <img src="{{ asset('img/logo-wordmark-solid-cropped.png') }}" alt="KOTSCH.TECH">
                    <span>&mdash; Ende der Vorstellung</span>
                </div>
            </div>
        </div>
    </section>

</div>

<noscript>
    <style>
        .v14-home .v14-rise, .v14-home .v14-rise-sm, .v14-home .v14-zoom { opacity: 1 !important; transform: none !important; }
    </style>
</noscript>

<script>
    (function () {
        "use strict";
        var root = document.querySelector(".v14-home");
        if (!root) { return; }
        root.classList.remove("v14-no-js");

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

        /* ---- Scroll-Reveal ---- */
        var revealEls = root.querySelectorAll(".v14-rise, .v14-rise-sm, .v14-zoom");
        if (prefersReduced || !("IntersectionObserver" in window)) {
            for (var i = 0; i < revealEls.length; i++) { revealEls[i].classList.add("v14-in"); }
        } else {
            var revObs = new IntersectionObserver(function (entries) {
                for (var j = 0; j < entries.length; j++) {
                    if (entries[j].isIntersecting) {
                        entries[j].target.classList.add("v14-in");
                        revObs.unobserve(entries[j].target);
                    }
                }
            }, { rootMargin: "0px 0px -10% 0px", threshold: 0.12 });
            for (var k = 0; k < revealEls.length; k++) { revObs.observe(revealEls[k]); }
        }

        /* ---- Aktive Reel-Rail-Szene ---- */
        var scenes = root.querySelectorAll("[data-scene]");
        var dots = root.querySelectorAll(".v14-dot");
        var dotMap = {};
        for (var d = 0; d < dots.length; d++) { dotMap[dots[d].getAttribute("data-dot")] = dots[d]; }

        function setActive(id) {
            for (var a = 0; a < dots.length; a++) { dots[a].classList.remove("is-active"); }
            if (dotMap[id]) { dotMap[id].classList.add("is-active"); }
        }

        if ("IntersectionObserver" in window && scenes.length) {
            var actObs = new IntersectionObserver(function (entries) {
                for (var e = 0; e < entries.length; e++) {
                    if (entries[e].isIntersecting) { setActive(entries[e].target.id); }
                }
            }, { rootMargin: "-45% 0px -45% 0px", threshold: 0 });
            for (var s = 0; s < scenes.length; s++) { actObs.observe(scenes[s]); }
        }

        /* ---- Scroll-Fortschritt der Rail-Linie ---- */
        var progEl = root.querySelector("[data-rail-prog]");
        if (progEl) {
            var ticking = false;
            function updateProg() {
                ticking = false;
                var doc = document.documentElement;
                var max = (doc.scrollHeight - doc.clientHeight) || 1;
                var pct = Math.min(100, Math.max(0, (window.scrollY || doc.scrollTop) / max * 100));
                progEl.style.height = pct + "%";
            }
            window.addEventListener("scroll", function () {
                if (!ticking) { window.requestAnimationFrame(updateProg); ticking = true; }
            }, { passive: true });
            updateProg();
        }
    })();
</script>
@endsection