@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Software, Apps & Web in Szenen')
@section('meta_description', 'KOTSCH.TECH von Arthur Kotsch wie ein Kinofilm in Szenen: Windows-Software, iOS-, Mac- & Android-Apps, Webdesign, 420+ Webtools, News, Shop, Hosting und IT-Hilfe.')
@section('og_title', 'KOTSCH.TECH - Die Tech-Marke von Arthur Kotsch in Szenen')
@section('og_description', 'Eine filmische Reise durch alle Bereiche: Softwareentwicklung, native Apps für iOS, macOS & Android, Webdesign, kostenlose Webtools, Shop, Hosting und IT-Hilfe.')
@section('twitter_title', 'KOTSCH.TECH - Software, Apps & Web von Arthur Kotsch')
@section('twitter_description', 'Eine Marke, viele Disziplinen: Software, native Apps, Webdesign, 420+ Webtools, Shop, Hosting und IT-Hilfe. Persönlich gebaut von Arthur Kotsch.')

@section('content')
<div class="v11-home v11-no-js">
<style>
    /* ============================================================
       KOTSCH.TECH - Variante 11: FILMSTREIFEN-THEATER
       Verfeinertes Cinema-Baender-Konzept (Familie von index1):
       - perforierte Filmstreifen-Kanten je Szene (Sprocket-Loecher)
       - linke Timecode-HUD-Leiste mit Szenen-Timecodes + Fortschritt
       - zentrierte "Title-Card"-Komposition, EIN starker CTA pro Band
       - Letterbox-Rahmen auf Hero & Abspann, Klappentafel-Kapitel
       Alle Selektoren .v11- praefixiert (keine Kollision mit app.css).
       ============================================================ */

    .v11-home {
        --v11-ink: var(--text-main);
        --v11-soft: var(--text-muted);
        --v11-line: var(--border);
        --v11-paper: var(--bg);
        --v11-paper-2: var(--bg-light);
        --v11-night: var(--bg-dark);
        --v11-rail-w: clamp(54px, 6vw, 88px);
        --v11-pad-x: clamp(1.25rem, 5vw, 5rem);
        --v11-ease: cubic-bezier(0.16, 0.84, 0.44, 1);
        --v11-perf-h: clamp(18px, 2.4vw, 26px);
        color: var(--v11-ink);
        background: var(--v11-paper);
        position: relative;
        overflow-x: clip;
        isolation: isolate;
        font-synthesis: none;
    }

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

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

    /* ============================================================
       TIMECODE-HUD (fixe Szenen-Leiste links, KEIN <nav>!)
       ============================================================ */
    .v11-hud {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: var(--v11-rail-w);
        z-index: 40;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(0.45rem, 1.3vh, 0.9rem);
        padding-block: 116px 26px;
        pointer-events: none;
    }
    .v11-hud-track {
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(0.4rem, 1.2vh, 0.8rem);
    }
    .v11-tc {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        font-variant-numeric: tabular-nums;
        color: var(--v11-soft);
        width: 34px;
        padding: 0.28rem 0;
        border-radius: 7px;
        border: 1px solid transparent;
        text-decoration: none;
        transition: color 0.35s var(--v11-ease), background 0.35s var(--v11-ease), border-color 0.35s var(--v11-ease), transform 0.35s var(--v11-ease);
    }
    .v11-tc::after {
        content: attr(data-label);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%) translateX(-6px);
        background: var(--v11-night);
        color: #fff;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        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: var(--shadow-soft);
        z-index: 2;
    }
    .v11-tc:hover { color: var(--primary); border-color: var(--v11-line); }
    .v11-tc:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
    .v11-tc.is-active {
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        border-color: transparent;
        box-shadow: 0 0 0 4px var(--primary-soft);
    }
    .v11-tc:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

    /* Vertikale Fortschrittslinie hinter den Timecodes */
    .v11-hud-line {
        position: absolute;
        top: 116px;
        bottom: 26px;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: var(--v11-line);
        opacity: 0.55;
        overflow: hidden;
        border-radius: 2px;
        z-index: -1;
    }
    .v11-hud-line span {
        position: absolute;
        inset: 0 0 auto 0;
        height: var(--v11-prog, 0%);
        background: linear-gradient(var(--primary), var(--accent));
        transition: height 0.2s linear;
    }
    .v11-hud-reel {
        margin-top: 0.4rem;
        color: var(--v11-soft);
        font-size: 0.85rem;
        opacity: 0.6;
        animation: v11-spin 9s linear infinite;
    }
    @keyframes v11-spin { to { transform: rotate(360deg); } }

    @media (max-width: 920px) {
        .v11-hud { display: none; }
    }

    /* ============================================================
       SZENEN-GRUNDGERUEST (bildschirmhohe Title-Cards)
       ============================================================ */
    .v11-scene {
        position: relative;
        min-height: 100svh;
        display: flex;
        align-items: center;
        padding: clamp(7rem, 13vh, 10rem) 0 clamp(4.5rem, 9vh, 7rem) var(--v11-rail-w);
        overflow: hidden;
    }
    .v11-scene--hero { padding-top: clamp(8.5rem, 17vh, 12rem); }

    /* Perforierte Filmstreifen-Kante oben an jeder Szene (Sprocket-Loecher) */
    .v11-scene > .v11-perf {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--v11-perf-h);
        z-index: 3;
        pointer-events: none;
        background:
            radial-gradient(circle at center, var(--v11-paper) 0 38%, transparent 41%) 0 50% / clamp(26px, 3vw, 40px) 100% repeat-x;
        border-bottom: 1px solid var(--v11-line);
    }
    .v11-scene.is-soft > .v11-perf {
        background:
            radial-gradient(circle at center, var(--v11-paper-2) 0 38%, transparent 41%) 0 50% / clamp(26px, 3vw, 40px) 100% repeat-x;
    }
    .v11-scene.is-dark > .v11-perf {
        background:
            radial-gradient(circle at center, var(--v11-night) 0 38%, transparent 41%) 0 50% / clamp(26px, 3vw, 40px) 100% repeat-x;
        border-bottom-color: rgba(255,255,255,0.12);
    }
    /* dahinterliegender heller "Lichtkanal" der Perforation */
    .v11-scene > .v11-perf::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(37,99,235,0.10), transparent);
    }
    .v11-scene.is-dark > .v11-perf::before {
        background: linear-gradient(180deg, rgba(96,165,250,0.16), transparent);
    }

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

    /* Riesige Hintergrund-Timecode-Marke pro Szene (Tiefen-Mittel) */
    .v11-bignum {
        position: absolute;
        z-index: 1;
        font-size: clamp(8rem, 30vw, 26rem);
        font-weight: 800;
        line-height: 0.7;
        letter-spacing: -0.06em;
        color: transparent;
        -webkit-text-stroke: 2px rgba(15, 23, 42, 0.05);
        right: clamp(0.5rem, 5vw, 5rem);
        bottom: -0.16em;
        pointer-events: none;
        user-select: none;
        font-variant-numeric: tabular-nums;
    }
    .v11-scene.is-dark .v11-bignum { -webkit-text-stroke-color: rgba(255, 255, 255, 0.07); }

    /* ---------- Klappentafel-Kapitellabel ("Take 01") ---------- */
    .v11-chapter {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        font-size: clamp(0.66rem, 1.1vw, 0.74rem);
        letter-spacing: 0.26em;
        text-transform: uppercase;
        font-weight: 800;
        color: var(--primary);
        margin-bottom: clamp(1.1rem, 2.6vw, 1.6rem);
    }
    .v11-chapter .v11-clap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 7px;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: #fff;
        font-size: 0.7rem;
        flex: none;
        box-shadow: 0 8px 18px -8px var(--primary-glow);
    }
    .v11-chapter .v11-chapter-no {
        font-variant-numeric: tabular-nums;
        color: var(--v11-soft);
    }
    .v11-scene.is-dark .v11-chapter { color: var(--primary-light); }
    .v11-scene.is-dark .v11-chapter .v11-chapter-no { color: var(--text-light); }

    /* ---------- Headlines ---------- */
    .v11-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.5rem);
        text-wrap: balance;
        max-width: 16ch;
    }
    .v11-grad {
        background: linear-gradient(108deg, var(--primary) 0%, var(--accent) 50%, var(--primary-light) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .v11-scene.is-dark .v11-h { color: #fff; }

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

    /* Mini-Feature-Liste (Chips, eine Zeile) */
    .v11-tags {
        list-style: none;
        margin: 0 0 clamp(1.8rem, 3.4vw, 2.4rem);
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 0.6rem;
    }
    .v11-tags li {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--v11-soft);
        border: 1px solid var(--v11-line);
        background: rgba(255, 255, 255, 0.6);
        border-radius: 999px;
        padding: 0.42rem 0.85rem;
    }
    .v11-tags li i { color: var(--primary); }
    .v11-scene.is-soft .v11-tags li { background: rgba(255, 255, 255, 0.7); }
    .v11-scene.is-dark .v11-tags li {
        color: var(--text-light);
        border-color: rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.05);
    }
    .v11-scene.is-dark .v11-tags li i { color: var(--primary-light); }

    /* ---------- Buttons ---------- */
    .v11-cta-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.8rem 1.1rem;
    }
    .v11-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(--v11-ease), box-shadow 0.3s var(--v11-ease), background 0.3s var(--v11-ease), color 0.3s var(--v11-ease), border-color 0.3s var(--v11-ease);
        border: 1.5px solid transparent;
    }
    .v11-btn i { font-size: 0.85em; transition: transform 0.3s var(--v11-ease); }
    .v11-btn:hover i { transform: translateX(4px); }
    .v11-btn-primary {
        background: linear-gradient(120deg, var(--primary), var(--accent));
        color: #fff;
        box-shadow: 0 18px 40px -18px var(--primary-glow);
    }
    .v11-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -20px var(--primary-glow); }
    .v11-btn-ghost {
        background: transparent;
        color: var(--v11-ink);
        border-color: var(--v11-line);
    }
    .v11-btn-ghost:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary); }
    .v11-scene.is-dark .v11-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
    .v11-scene.is-dark .v11-btn-ghost:hover { border-color: var(--primary-light); color: var(--primary-light); }

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

    /* ============================================================
       LETTERBOX-RAHMEN (Hero & Abspann) - filmische Breitwand
       ============================================================ */
    .v11-letterbox {
        position: absolute;
        left: 0;
        right: 0;
        height: clamp(26px, 4vh, 48px);
        z-index: 4;
        background: var(--v11-night);
        pointer-events: none;
    }
    .v11-letterbox.top { top: 0; }
    .v11-letterbox.bot { bottom: 0; }
    .v11-letterbox .v11-lb-mark {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        font-variant-numeric: tabular-nums;
    }
    .v11-letterbox.top .v11-lb-mark { left: clamp(1.25rem, 5vw, 5rem); }
    .v11-letterbox.top .v11-lb-mark.r { left: auto; right: clamp(1.25rem, 5vw, 5rem); }
    .v11-letterbox.bot .v11-lb-mark { left: clamp(1.25rem, 5vw, 5rem); }
    .v11-letterbox.bot .v11-lb-mark.r { left: auto; right: clamp(1.25rem, 5vw, 5rem); }
    @media (max-width: 920px) {
        .v11-letterbox .v11-lb-mark { left: 1.25rem !important; }
        .v11-letterbox .v11-lb-mark.r { display: none; }
    }

    /* ============================================================
       HERO (Szene 00) - zentrierte Title-Card
       ============================================================ */
    .v11-scene--hero {
        text-align: center;
        background:
            radial-gradient(60% 60% at 50% 8%, var(--primary-soft), transparent 60%),
            radial-gradient(55% 55% at 12% 95%, rgba(124, 58, 237, 0.10), transparent 60%),
            radial-gradient(55% 55% at 88% 92%, rgba(96, 165, 250, 0.10), transparent 60%),
            var(--v11-paper);
    }
    .v11-scene--hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 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% 95% at 50% 0%, #000 38%, transparent 80%);
        -webkit-mask-image: radial-gradient(120% 95% at 50% 0%, #000 38%, transparent 80%);
        pointer-events: none;
    }
    .v11-hero-wrap { max-width: 900px; margin-inline: auto; }

    .v11-brandline {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.45rem 0.95rem 0.45rem 0.5rem;
        border: 1px solid var(--v11-line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--v11-ink);
        margin-bottom: clamp(1.3rem, 3vw, 1.8rem);
    }
    .v11-brandline img { height: 22px; width: auto; display: block; }
    .v11-brandline .v11-live {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        color: var(--success);
        letter-spacing: 0.1em;
    }
    .v11-brandline .v11-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);
    }

    .v11-hero-h {
        font-size: clamp(2.6rem, 9vw, 6.2rem);
        line-height: 0.95;
        letter-spacing: -0.035em;
        font-weight: 800;
        margin: 0 0 clamp(1.2rem, 2.8vw, 1.7rem);
        text-wrap: balance;
    }
    .v11-hero-h .v11-name {
        display: block;
        font-size: 0.32em;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--v11-soft);
        margin-top: clamp(0.7rem, 1.6vw, 1.1rem);
        text-transform: none;
    }
    .v11-hero-h .v11-name b { color: var(--v11-ink); font-weight: 800; }
    .v11-hero-wrap .v11-lead { margin-inline: auto; }
    .v11-hero-wrap .v11-cta-row { justify-content: center; }

    /* Hero-Buehne: liegende Filmstreifen-Kette der Bereiche */
    .v11-filmrow {
        margin-top: clamp(2.4rem, 5vw, 3.4rem);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(0.6rem, 1.4vw, 0.95rem);
    }
    .v11-frame {
        position: relative;
        width: clamp(72px, 10vw, 104px);
        border-radius: 12px;
        border: 1px solid var(--v11-line);
        background: #fff;
        box-shadow: var(--shadow-soft);
        padding: 0.55rem 0.4rem 0.5rem;
        text-decoration: none;
        color: var(--v11-ink);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.45rem;
        transition: transform 0.4s var(--v11-ease), box-shadow 0.4s var(--v11-ease), border-color 0.4s var(--v11-ease);
    }
    .v11-frame::before,
    .v11-frame::after {
        content: "";
        position: absolute;
        left: 4px;
        right: 4px;
        height: 4px;
        background:
            radial-gradient(circle at center, var(--v11-line) 0 45%, transparent 48%) 0 0 / 9px 4px repeat-x;
        opacity: 0.7;
    }
    .v11-frame::before { top: 3px; }
    .v11-frame::after { bottom: 3px; }
    .v11-frame:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: var(--shadow-lg); }
    .v11-frame .v11-frame-scr {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 9px;
        background: linear-gradient(155deg, var(--primary-soft), rgba(124, 58, 237, 0.12));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(1.1rem, 2.6vw, 1.5rem);
        color: var(--primary);
    }
    .v11-frame .v11-frame-lbl {
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: var(--v11-soft);
        text-align: center;
        line-height: 1.1;
    }

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

    /* ============================================================
       BUEHNEN-VARIANTEN (hell / soft / dunkel)
       ============================================================ */
    .v11-scene.is-soft { background: var(--v11-paper-2); }
    .v11-scene.is-soft::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(50% 60% at 90% 12%, var(--primary-soft), transparent 60%),
            radial-gradient(45% 55% at 6% 92%, rgba(124, 58, 237, 0.08), transparent 60%);
    }
    .v11-scene.is-dark {
        background: var(--v11-night);
        color: var(--text-light);
    }
    .v11-scene.is-dark::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(55% 60% at 85% 10%, rgba(124, 58, 237, 0.30), transparent 58%),
            radial-gradient(60% 70% at 8% 92%, rgba(37, 99, 235, 0.32), transparent 60%);
    }
    .v11-scene.is-dark::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        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);
    }

    /* Title-Card-Layout: zentrierte Erzaehlung + breite Bild-Platte darunter */
    .v11-stage {
        display: grid;
        justify-items: center;
        text-align: center;
    }
    .v11-stage-copy { max-width: 760px; }
    .v11-stage-copy .v11-chapter { justify-content: center; }
    .v11-stage-copy .v11-h { margin-inline: auto; }
    .v11-stage-copy .v11-lead { margin-inline: auto; }
    .v11-stage-copy .v11-tags { justify-content: center; }
    .v11-stage-copy .v11-cta-row { justify-content: center; }

    /* breite cinematische Platte fuer die CSS/SVG-Mockups */
    .v11-plate {
        width: 100%;
        max-width: 980px;
        margin-top: clamp(2.4rem, 5vw, 3.6rem);
        border-radius: var(--radius);
        border: 1px solid var(--v11-line);
        background: #fff;
        box-shadow: var(--shadow-lg);
        padding: clamp(1.1rem, 3vw, 2rem);
        position: relative;
        overflow: hidden;
    }
    .v11-scene.is-soft .v11-plate { background: #fff; }
    .v11-scene.is-dark .v11-plate {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    /* dezenter Lichtstrahl ueber jeder Platte (Projektor) */
    .v11-plate::before {
        content: "";
        position: absolute;
        top: -40%;
        left: -10%;
        width: 50%;
        height: 180%;
        background: linear-gradient(115deg, transparent, rgba(96, 165, 250, 0.10), transparent);
        transform: rotate(8deg);
        pointer-events: none;
    }

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

    /* --- Plattform-Trio (Windows / Apple / Android) --- */
    .v11-devices {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.7rem, 1.8vw, 1.2rem);
        align-items: end;
    }
    .v11-card {
        position: relative;
        border-radius: 16px;
        border: 1px solid var(--v11-line);
        background: #fff;
        box-shadow: var(--shadow-soft);
        padding: 0.9rem 0.9rem 1.05rem;
        text-decoration: none;
        color: var(--v11-ink);
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        transition: transform 0.4s var(--v11-ease), box-shadow 0.4s var(--v11-ease), border-color 0.4s var(--v11-ease);
        isolation: isolate;
    }
    .v11-devices .v11-card:nth-child(2) { transform: translateY(-18px); }
    .v11-card:hover { transform: translateY(-10px); border-color: var(--primary); box-shadow: var(--shadow-lg); }
    .v11-devices .v11-card:nth-child(2):hover { transform: translateY(-26px); }
    .v11-card .v11-screen {
        aspect-ratio: 4 / 5;
        border-radius: 11px;
        background: linear-gradient(160deg, var(--primary-soft), rgba(124, 58, 237, 0.10));
        border: 1px solid var(--v11-line);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(1.6rem, 4vw, 2.3rem);
        color: var(--primary);
        position: relative;
        overflow: hidden;
    }
    .v11-card .v11-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(--v11-ease);
    }
    .v11-card:hover .v11-screen::after { transform: translateX(120%); }
    .v11-card .v11-c-name { font-weight: 800; font-size: 0.9rem; letter-spacing: -0.01em; }
    .v11-card .v11-c-sub { font-size: 0.74rem; color: var(--v11-soft); font-weight: 600; }
    .v11-card .v11-c-badge {
        position: absolute;
        top: 0.7rem;
        right: 0.7rem;
        font-size: 0.58rem;
        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 (breit) --- */
    .v11-browser {
        position: relative;
        z-index: 1;
        border-radius: 14px;
        border: 1px solid var(--v11-line);
        background: #fff;
        box-shadow: var(--shadow-soft);
        overflow: hidden;
        max-width: 760px;
        margin-inline: auto;
    }
    .v11-browser-bar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.9rem;
        border-bottom: 1px solid var(--v11-line);
        background: var(--v11-paper-2);
    }
    .v11-browser-bar .v11-dots { display: flex; gap: 5px; }
    .v11-browser-bar .v11-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--v11-line); }
    .v11-browser-bar .v11-dots span:nth-child(1) { background: #f87171; }
    .v11-browser-bar .v11-dots span:nth-child(2) { background: #fbbf24; }
    .v11-browser-bar .v11-dots span:nth-child(3) { background: var(--success); }
    .v11-browser-bar .v11-url {
        flex: 1;
        height: 22px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--v11-line);
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding-inline: 0.7rem;
        font-size: 0.7rem;
        color: var(--v11-soft);
        font-weight: 600;
    }
    .v11-url i { color: var(--success); font-size: 0.65rem; }
    .v11-browser-canvas { padding: clamp(1rem, 2.5vw, 1.5rem); display: grid; gap: 0.9rem; }
    .v11-bc-hero {
        height: clamp(74px, 12vw, 120px);
        border-radius: 12px;
        background: linear-gradient(120deg, var(--primary), var(--accent));
        position: relative;
        overflow: hidden;
    }
    .v11-bc-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(60% 120% at 80% 10%, rgba(255, 255, 255, 0.35), transparent 60%);
    }
    .v11-bc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
    .v11-bc-card { height: clamp(46px, 8vw, 72px); border-radius: 10px; background: var(--v11-paper-2); border: 1px solid var(--v11-line); }
    .v11-bc-line { height: 9px; border-radius: 5px; background: var(--v11-paper-2); }
    .v11-bc-line.s { width: 55%; }

    /* --- Webtools: Werkzeug-Raster --- */
    .v11-toolgrid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: clamp(0.55rem, 1.4vw, 0.85rem);
    }
    .v11-tool {
        aspect-ratio: 1;
        border-radius: 14px;
        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.35rem;
        color: #fff;
        font-size: clamp(1rem, 2.6vw, 1.5rem);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: transform 0.35s var(--v11-ease), background 0.35s var(--v11-ease), border-color 0.35s var(--v11-ease);
    }
    .v11-tool span { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em; color: var(--text-light); }
    .v11-tool:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.1); border-color: var(--primary-light); }
    .v11-tool.is-hot {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        border-color: transparent;
        box-shadow: 0 18px 40px -18px var(--primary-glow);
    }
    .v11-tool.is-hot span { color: rgba(255, 255, 255, 0.9); }
    @media (max-width: 620px) { .v11-toolgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

    /* --- News: Artikel-Reihe (3 Karten) --- */
    .v11-articles {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.7rem, 1.8vw, 1.1rem);
    }
    .v11-article {
        text-align: left;
        padding: clamp(0.9rem, 2vw, 1.2rem);
        border-radius: 14px;
        border: 1px solid var(--v11-line);
        background: #fff;
        box-shadow: var(--shadow-soft);
        transition: transform 0.35s var(--v11-ease), box-shadow 0.35s var(--v11-ease);
    }
    .v11-article:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
    .v11-article-thumb {
        aspect-ratio: 16 / 9;
        border-radius: 10px;
        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.3rem;
        margin-bottom: 0.7rem;
    }
    .v11-article .v11-am-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
    .v11-article .v11-am-title { font-weight: 700; font-size: clamp(0.9rem, 1.5vw, 1.02rem); margin: 0.3rem 0 0.4rem; line-height: 1.3; color: var(--v11-ink); }
    .v11-article .v11-am-line { height: 8px; width: 70%; border-radius: 5px; background: var(--v11-paper-2); }
    @media (max-width: 700px) { .v11-articles { grid-template-columns: minmax(0, 1fr); } }

    /* --- Shop: Produktkarten (3) --- */
    .v11-shopgrid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.7rem, 1.8vw, 1.1rem);
    }
    .v11-product {
        border-radius: 14px;
        border: 1px solid var(--v11-line);
        background: #fff;
        box-shadow: var(--shadow-soft);
        overflow: hidden;
        transition: transform 0.35s var(--v11-ease), box-shadow 0.35s var(--v11-ease);
    }
    .v11-product:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .v11-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;
    }
    .v11-product-art .v11-tag {
        position: absolute;
        top: 0.6rem;
        left: 0.6rem;
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #fff;
        background: var(--success);
        padding: 0.2rem 0.5rem;
        border-radius: 6px;
    }
    .v11-product-info { padding: 0.85rem 0.95rem; display: grid; gap: 0.5rem; text-align: left; }
    .v11-product-info .v11-pi-name { font-weight: 700; font-size: 0.92rem; }
    .v11-product-info .v11-pi-foot { display: flex; align-items: center; justify-content: space-between; }
    .v11-product-info .v11-pi-price { font-weight: 800; color: var(--primary); font-size: 0.95rem; }
    .v11-product-info .v11-pi-dl { font-size: 0.68rem; font-weight: 700; color: var(--v11-soft); display: inline-flex; align-items: center; gap: 0.3rem; }
    @media (max-width: 700px) { .v11-shopgrid { grid-template-columns: minmax(0, 1fr); } }

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

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

    /* ============================================================
       SZENE: SZENENVERZEICHNIS (dunkel, Sekundaer-Navigation)
       ============================================================ */
    .v11-scene--index { align-items: center; }
    .v11-idx-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
    .v11-idx-head .v11-chapter { justify-content: center; }
    .v11-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;
    }
    .v11-idx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
    @media (min-width: 680px) { .v11-idx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); } }
    @media (min-width: 1080px) { .v11-idx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .v11-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(--v11-ease), padding-left 0.3s var(--v11-ease);
    }
    .v11-idx-link:hover { color: #fff; padding-left: 0.5rem; }
    .v11-idx-link .v11-idx-no { font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary-light); min-width: 2.4ch; }
    .v11-idx-link .v11-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(--v11-ease), color 0.3s var(--v11-ease), border-color 0.3s var(--v11-ease);
    }
    .v11-idx-link:hover .v11-idx-ico { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; border-color: transparent; }
    .v11-idx-link .v11-idx-label { flex: 1; min-width: 0; }
    .v11-idx-link .v11-idx-name { display: block; font-weight: 700; font-size: 1rem; color: #fff; }
    .v11-idx-link .v11-idx-sub { display: block; font-size: 0.78rem; opacity: 0.65; margin-top: 0.1rem; }
    .v11-idx-link .v11-idx-arrow { opacity: 0.5; transition: transform 0.3s var(--v11-ease), opacity 0.3s var(--v11-ease); flex: none; }
    .v11-idx-link:hover .v11-idx-arrow { opacity: 1; transform: translateX(4px); }

    /* ============================================================
       SCHLUSS-SZENE: KONTAKT (Abspann)
       ============================================================ */
    .v11-scene--contact { text-align: center; }
    .v11-contact-wrap { max-width: 780px; margin-inline: auto; }
    .v11-contact-wrap .v11-chapter { justify-content: center; }
    .v11-contact-h {
        font-size: clamp(2.4rem, 8vw, 5.2rem);
        font-weight: 800;
        letter-spacing: -0.035em;
        line-height: 1.0;
        margin: 0 0 clamp(1.2rem, 3vw, 1.7rem);
        color: #fff;
        text-wrap: balance;
    }
    .v11-contact-wrap .v11-lead { margin-inline: auto; color: var(--text-light); }
    .v11-contact-wrap .v11-cta-row { justify-content: center; }
    .v11-quick {
        margin-top: clamp(2.4rem, 5vw, 3.4rem);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.6rem 0.7rem;
    }
    .v11-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(--v11-ease), border-color 0.3s var(--v11-ease), background 0.3s var(--v11-ease);
    }
    .v11-quick a:hover { color: #fff; border-color: var(--primary-light); background: rgba(96, 165, 250, 0.12); }
    .v11-quick a i { color: var(--primary-light); }
    .v11-signoff {
        margin-top: clamp(2.2rem, 5vw, 3.2rem);
        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.72;
    }
    .v11-signoff img { height: 18px; width: auto; opacity: 0.9; }

    /* ============================================================
       RESPONSIVE FEINSCHLIFF
       ============================================================ */
    @media (max-width: 920px) {
        .v11-scene {
            padding-left: 0;
            min-height: auto;
            padding-top: clamp(4.5rem, 11vh, 7rem);
            padding-bottom: clamp(3.5rem, 9vh, 5.5rem);
        }
        .v11-scene--hero { padding-top: clamp(7.5rem, 17vh, 10rem); }
        .v11-scroll-cue { display: none; }
    }
    @media (max-width: 540px) {
        .v11-devices { gap: 0.5rem; }
        .v11-card { padding: 0.6rem 0.6rem 0.8rem; }
        .v11-devices .v11-card:nth-child(2) { transform: translateY(-10px); }
        .v11-toolgrid { gap: 0.5rem; }
        .v11-plate { padding: 0.9rem; }
    }

    /* ============================================================
       REDUCED MOTION
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
        .v11-home .v11-rise,
        .v11-home .v11-rise-sm,
        .v11-home .v11-zoom { opacity: 1 !important; transform: none !important; transition: none !important; }
        .v11-home *,
        .v11-home *::before,
        .v11-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="v11-scene v11-scene--hero" id="v11-szene-hero" data-scene aria-label="Einleitung">
        <span class="v11-letterbox top" aria-hidden="true">
            <span class="v11-lb-mark">KOTSCH.TECH &middot; Feature</span>
            <span class="v11-lb-mark r">Szene 00 / 09</span>
        </span>
        <span class="v11-letterbox bot" aria-hidden="true">
            <span class="v11-lb-mark">Regie: Arthur Kotsch</span>
            <span class="v11-lb-mark r">Breitwand &middot; 2.39:1</span>
        </span>
        <span class="v11-bignum" aria-hidden="true">00</span>

        <div class="v11-inner">
            <div class="v11-hero-wrap">
                <span class="v11-brandline v11-rise" style="--v11-d:60ms;">
                    <img src="{{ asset('img/logo-mark.png') }}" alt="" aria-hidden="true">
                    KOTSCH.TECH
                    <span class="v11-live">Live</span>
                </span>

                <h1 class="v11-hero-h v11-rise" style="--v11-d:120ms;">
                    Eine Marke.
                    <span class="v11-grad">Viele Disziplinen.</span>
                    <span class="v11-name">Software, Apps &amp; Web von <b>Arthur Kotsch</b></span>
                </h1>

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

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

                <div class="v11-filmrow v11-zoom" style="--v11-d:360ms;" role="navigation" aria-label="Schnellzugriff auf alle Bereiche">
                    <a class="v11-frame" href="{{ route('windows.index') }}">
                        <span class="v11-frame-scr" aria-hidden="true"><i class="fa-brands fa-windows"></i></span>
                        <span class="v11-frame-lbl">Windows</span>
                    </a>
                    <a class="v11-frame" href="{{ route('apple.index') }}">
                        <span class="v11-frame-scr" aria-hidden="true"><i class="fa-brands fa-apple"></i></span>
                        <span class="v11-frame-lbl">iOS &amp; Mac</span>
                    </a>
                    <a class="v11-frame" href="{{ route('android.index') }}">
                        <span class="v11-frame-scr" aria-hidden="true"><i class="fa-brands fa-android"></i></span>
                        <span class="v11-frame-lbl">Android</span>
                    </a>
                    <a class="v11-frame" href="{{ route('web.templates') }}">
                        <span class="v11-frame-scr" aria-hidden="true"><i class="fa-solid fa-pen-ruler"></i></span>
                        <span class="v11-frame-lbl">Webdesign</span>
                    </a>
                    <a class="v11-frame" href="{{ route('webtools.show') }}">
                        <span class="v11-frame-scr" aria-hidden="true"><i class="fa-solid fa-toolbox"></i></span>
                        <span class="v11-frame-lbl">Webtools</span>
                    </a>
                    <a class="v11-frame" href="{{ route('shop.index') }}">
                        <span class="v11-frame-scr" aria-hidden="true"><i class="fa-solid fa-bag-shopping"></i></span>
                        <span class="v11-frame-lbl">Shop</span>
                    </a>
                </div>
            </div>
        </div>

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

    {{-- ============================================================
         SZENE 01 - PLATTFORMEN (Windows / Apple / Android) - SOFT
         ============================================================ --}}
    <section class="v11-scene is-soft" id="v11-szene-platforms" data-scene aria-label="Software und Apps für alle Plattformen">
        <span class="v11-perf" aria-hidden="true"></span>
        <span class="v11-bignum" aria-hidden="true">01</span>
        <div class="v11-inner">
            <div class="v11-stage">
                <div class="v11-stage-copy">
                    <span class="v11-chapter v11-rise-sm">
                        <span class="v11-clap" aria-hidden="true"><i class="fa-solid fa-clapperboard"></i></span>
                        <span class="v11-chapter-no">Take 01</span> &mdash; Plattformen
                    </span>
                    <h2 class="v11-h v11-rise">Software, die auf <span class="v11-grad">jedem Gerät</span> zu Hause ist.</h2>
                    <p class="v11-lead v11-rise" style="--v11-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
                        und mit Liebe zum Detail.
                    </p>
                    <ul class="v11-tags v11-rise" style="--v11-d:200ms;" aria-label="Plattform-Schwerpunkte">
                        <li><i class="fa-brands fa-windows" aria-hidden="true"></i> Desktop-Tools</li>
                        <li><i class="fa-brands fa-apple" aria-hidden="true"></i> App Store-Release</li>
                        <li><i class="fa-brands fa-android" aria-hidden="true"></i> In Entwicklung</li>
                    </ul>
                    <div class="v11-cta-row v11-rise" style="--v11-d:280ms;">
                        <a class="v11-btn v11-btn-primary" href="{{ route('windows.index') }}">
                            Windows-Software <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                        <a class="v11-btn v11-btn-ghost" href="{{ route('apple.index') }}">iOS &amp; Mac</a>
                    </div>
                </div>

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

    {{-- ============================================================
         SZENE 02 - WEBDESIGN - HELL
         ============================================================ --}}
    <section class="v11-scene" id="v11-szene-web" data-scene aria-label="Webdesign">
        <span class="v11-perf" aria-hidden="true"></span>
        <span class="v11-bignum" aria-hidden="true">02</span>
        <div class="v11-inner">
            <div class="v11-stage">
                <div class="v11-stage-copy">
                    <span class="v11-chapter v11-rise-sm">
                        <span class="v11-clap" aria-hidden="true"><i class="fa-solid fa-clapperboard"></i></span>
                        <span class="v11-chapter-no">Take 02</span> &mdash; Gestaltung
                    </span>
                    <h2 class="v11-h v11-rise">Websites, die <span class="v11-grad">schnell laden</span> und überzeugen.</h2>
                    <p class="v11-lead v11-rise" style="--v11-d:120ms;">
                        Modernes Webdesign und startklare Vorlagen mit sauberem Code, durchdachter
                        Nutzerführung und solidem SEO-Fundament. Sehen gut aus &mdash; und konvertieren.
                    </p>
                    <ul class="v11-tags v11-rise" style="--v11-d:200ms;" aria-label="Webdesign-Schwerpunkte">
                        <li><i class="fa-solid fa-mobile-screen" aria-hidden="true"></i> Responsive 360-1920px</li>
                        <li><i class="fa-solid fa-gauge-high" aria-hidden="true"></i> Performance &amp; SEO</li>
                        <li><i class="fa-solid fa-layer-group" aria-hidden="true"></i> Fertige Templates</li>
                    </ul>
                    <div class="v11-cta-row v11-rise" style="--v11-d:280ms;">
                        <a class="v11-btn v11-btn-primary" href="{{ route('web.templates') }}">
                            Webdesign ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

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

    {{-- ============================================================
         SZENE 03 - WEBTOOLS - DUNKEL
         ============================================================ --}}
    <section class="v11-scene is-dark" id="v11-szene-tools" data-scene aria-label="Kostenlose Webtools">
        <span class="v11-perf" aria-hidden="true"></span>
        <span class="v11-bignum" aria-hidden="true">03</span>
        <div class="v11-inner">
            <div class="v11-stage">
                <div class="v11-stage-copy">
                    <span class="v11-chapter v11-rise-sm">
                        <span class="v11-clap" aria-hidden="true"><i class="fa-solid fa-clapperboard"></i></span>
                        <span class="v11-chapter-no">Take 03</span> &mdash; Werkzeuge
                    </span>
                    <h2 class="v11-h v11-rise">420+ Webtools. <span class="v11-grad">Gratis im Browser.</span></h2>
                    <p class="v11-lead v11-rise" style="--v11-d:120ms;">
                        Kleine Helfer, die direkt im Browser laufen &mdash; ohne Anmeldung, ohne Upload.
                        Konvertieren, rechnen, formatieren, generieren. Sofort zur Hand, wenn du sie brauchst.
                    </p>
                    <ul class="v11-tags v11-rise" style="--v11-d:200ms;" aria-label="Tool-Kategorien">
                        <li><i class="fa-solid fa-right-left" aria-hidden="true"></i> Konverter</li>
                        <li><i class="fa-solid fa-calculator" aria-hidden="true"></i> Rechner</li>
                        <li><i class="fa-solid fa-code" aria-hidden="true"></i> Code &amp; Text</li>
                        <li><i class="fa-solid fa-shield-halved" aria-hidden="true"></i> Läuft lokal</li>
                    </ul>
                    <div class="v11-cta-row v11-rise" style="--v11-d:280ms;">
                        <a class="v11-btn v11-btn-primary" href="{{ route('webtools.show') }}">
                            Tools öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <div class="v11-plate v11-zoom" style="--v11-d:200ms;" aria-hidden="true">
                    <div class="v11-toolgrid">
                        <div class="v11-tool is-hot"><i class="fa-solid fa-right-left"></i><span>Konverter</span></div>
                        <div class="v11-tool"><i class="fa-solid fa-calculator"></i><span>Rechner</span></div>
                        <div class="v11-tool"><i class="fa-solid fa-palette"></i><span>Farben</span></div>
                        <div class="v11-tool"><i class="fa-solid fa-code"></i><span>Code</span></div>
                        <div class="v11-tool is-hot"><i class="fa-solid fa-font"></i><span>Text</span></div>
                        <div class="v11-tool"><i class="fa-solid fa-qrcode"></i><span>QR</span></div>
                        <div class="v11-tool"><i class="fa-solid fa-image"></i><span>Bild</span></div>
                        <div class="v11-tool"><i class="fa-solid fa-key"></i><span>Passwort</span></div>
                        <div class="v11-tool"><i class="fa-solid fa-clock"></i><span>Zeit</span></div>
                        <div class="v11-tool is-hot"><i class="fa-solid fa-hashtag"></i><span>Hash</span></div>
                        <div class="v11-tool"><i class="fa-solid fa-ruler-combined"></i><span>Einheiten</span></div>
                        <div class="v11-tool is-hot"><i class="fa-solid fa-ellipsis"></i><span>+410</span></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 04 - NEWS / BLOG - HELL
         ============================================================ --}}
    <section class="v11-scene" id="v11-szene-news" data-scene aria-label="News und Blog">
        <span class="v11-perf" aria-hidden="true"></span>
        <span class="v11-bignum" aria-hidden="true">04</span>
        <div class="v11-inner">
            <div class="v11-stage">
                <div class="v11-stage-copy">
                    <span class="v11-chapter v11-rise-sm">
                        <span class="v11-clap" aria-hidden="true"><i class="fa-solid fa-clapperboard"></i></span>
                        <span class="v11-chapter-no">Take 04</span> &mdash; Lesestoff
                    </span>
                    <h2 class="v11-h v11-rise">News &amp; Artikel, <span class="v11-grad">ohne Buzzword-Bingo.</span></h2>
                    <p class="v11-lead v11-rise" style="--v11-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="v11-cta-row v11-rise" style="--v11-d:280ms;">
                        <a class="v11-btn v11-btn-primary" href="{{ route('news.index') }}">
                            Artikel lesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

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

    {{-- ============================================================
         SZENE 05 - SHOP - SOFT
         ============================================================ --}}
    <section class="v11-scene is-soft" id="v11-szene-shop" data-scene aria-label="Digitaler Shop">
        <span class="v11-perf" aria-hidden="true"></span>
        <span class="v11-bignum" aria-hidden="true">05</span>
        <div class="v11-inner">
            <div class="v11-stage">
                <div class="v11-stage-copy">
                    <span class="v11-chapter v11-rise-sm">
                        <span class="v11-clap" aria-hidden="true"><i class="fa-solid fa-clapperboard"></i></span>
                        <span class="v11-chapter-no">Take 05</span> &mdash; Shop
                    </span>
                    <h2 class="v11-h v11-rise">Digitale Produkte zum <span class="v11-grad">Sofort-Download.</span></h2>
                    <p class="v11-lead v11-rise" style="--v11-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="v11-cta-row v11-rise" style="--v11-d:280ms;">
                        <a class="v11-btn v11-btn-primary" href="{{ route('shop.index') }}">
                            Zum Shop <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <div class="v11-plate v11-zoom" style="--v11-d:200ms;" aria-hidden="true">
                    <div class="v11-shopgrid">
                        <div class="v11-product">
                            <div class="v11-product-art"><span class="v11-tag">Download</span><i class="fa-solid fa-cube"></i></div>
                            <div class="v11-product-info">
                                <span class="v11-pi-name">Starter-Kit</span>
                                <div class="v11-pi-foot">
                                    <span class="v11-pi-price">ab 9 €</span>
                                    <span class="v11-pi-dl"><i class="fa-solid fa-download"></i> sofort</span>
                                </div>
                            </div>
                        </div>
                        <div class="v11-product">
                            <div class="v11-product-art"><span class="v11-tag">Vorlage</span><i class="fa-solid fa-file-code"></i></div>
                            <div class="v11-product-info">
                                <span class="v11-pi-name">Template-Paket</span>
                                <div class="v11-pi-foot">
                                    <span class="v11-pi-price">ab 19 €</span>
                                    <span class="v11-pi-dl"><i class="fa-solid fa-download"></i> sofort</span>
                                </div>
                            </div>
                        </div>
                        <div class="v11-product">
                            <div class="v11-product-art"><span class="v11-tag">Asset</span><i class="fa-solid fa-icons"></i></div>
                            <div class="v11-product-info">
                                <span class="v11-pi-name">Icon-Set</span>
                                <div class="v11-pi-foot">
                                    <span class="v11-pi-price">ab 5 €</span>
                                    <span class="v11-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="v11-scene is-dark" id="v11-szene-hosting" data-scene aria-label="Hosting">
        <span class="v11-perf" aria-hidden="true"></span>
        <span class="v11-bignum" aria-hidden="true">06</span>
        <div class="v11-inner">
            <div class="v11-stage">
                <div class="v11-stage-copy">
                    <span class="v11-chapter v11-rise-sm">
                        <span class="v11-clap" aria-hidden="true"><i class="fa-solid fa-clapperboard"></i></span>
                        <span class="v11-chapter-no">Take 06</span> &mdash; Betrieb
                    </span>
                    <h2 class="v11-h v11-rise">Kleines Hosting, <span class="v11-grad">persönlich betreut.</span></h2>
                    <p class="v11-lead v11-rise" style="--v11-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="v11-tags v11-rise" style="--v11-d:200ms;" aria-label="Hosting-Merkmale">
                        <li><i class="fa-solid fa-server" aria-hidden="true"></i> Stabil &amp; überschaubar</li>
                        <li><i class="fa-solid fa-headset" aria-hidden="true"></i> Direkter Kontakt</li>
                        <li><i class="fa-solid fa-lock" aria-hidden="true"></i> SSL inklusive</li>
                    </ul>
                    <div class="v11-cta-row v11-rise" style="--v11-d:280ms;">
                        <a class="v11-btn v11-btn-primary" href="{{ route('hosting.index') }}">
                            Hosting ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

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

    {{-- ============================================================
         SZENE 07 - IT-HILFE - HELL
         ============================================================ --}}
    <section class="v11-scene" id="v11-szene-support" data-scene aria-label="IT-Hilfe">
        <span class="v11-perf" aria-hidden="true"></span>
        <span class="v11-bignum" aria-hidden="true">07</span>
        <div class="v11-inner">
            <div class="v11-stage">
                <div class="v11-stage-copy">
                    <span class="v11-chapter v11-rise-sm">
                        <span class="v11-clap" aria-hidden="true"><i class="fa-solid fa-clapperboard"></i></span>
                        <span class="v11-chapter-no">Take 07</span> &mdash; Support
                    </span>
                    <h2 class="v11-h v11-rise">IT-Hilfe <span class="v11-grad">ohne Fachchinesisch.</span></h2>
                    <p class="v11-lead v11-rise" style="--v11-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="v11-cta-row v11-rise" style="--v11-d:280ms;">
                        <a class="v11-btn v11-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="v11-plate v11-rise" style="--v11-d:200ms;" aria-hidden="true">
                    <div class="v11-chat">
                        <div class="v11-bubble in">
                            <span class="v11-bub-from">Du</span>
                            Mein PC startet nicht mehr richtig &mdash; was kann ich tun?
                        </div>
                        <div class="v11-bubble out">
                            <span class="v11-bub-from">KOTSCH.TECH</span>
                            Kein Stress, das kriegen wir hin. Lass uns Schritt für Schritt durchgehen.
                        </div>
                        <div class="v11-typing"><i></i><i></i><i></i></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SZENE 08 - SZENENVERZEICHNIS / INDEX (dunkel, Sekundaer-Nav)
         ============================================================ --}}
    <section class="v11-scene is-dark v11-scene--index" id="v11-szene-index" data-scene aria-label="Alle Bereiche im Überblick">
        <span class="v11-perf" aria-hidden="true"></span>
        <span class="v11-bignum" aria-hidden="true">08</span>
        <div class="v11-inner">
            <div class="v11-idx-head v11-rise-sm">
                <span class="v11-chapter">
                    <span class="v11-clap" aria-hidden="true"><i class="fa-solid fa-film"></i></span>
                    <span class="v11-chapter-no">Take 08</span> &mdash; Szenenverzeichnis
                </span>
                <h2>Alle Bereiche auf einen Blick</h2>
            </div>

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

    {{-- ============================================================
         SZENE 09 - KONTAKT / ABSPANN - DUNKEL
         ============================================================ --}}
    <section class="v11-scene is-dark v11-scene--contact" id="v11-szene-contact" data-scene aria-label="Kontakt aufnehmen">
        <span class="v11-perf" aria-hidden="true"></span>
        <span class="v11-letterbox top" aria-hidden="true">
            <span class="v11-lb-mark">Abspann</span>
            <span class="v11-lb-mark r">Szene 09 / 09</span>
        </span>
        <span class="v11-letterbox bot" aria-hidden="true">
            <span class="v11-lb-mark">&copy; {{ date('Y') }} KOTSCH.TECH</span>
            <span class="v11-lb-mark r">Ende &middot; Fortsetzung folgt</span>
        </span>
        <span class="v11-bignum" aria-hidden="true">09</span>

        <div class="v11-inner">
            <div class="v11-contact-wrap">
                <span class="v11-chapter v11-rise-sm">
                    <span class="v11-clap" aria-hidden="true"><i class="fa-solid fa-film"></i></span>
                    <span class="v11-chapter-no">Take 09</span> &mdash; und der Anfang
                </span>
                <p class="v11-contact-h v11-rise">
                    Eine Idee im Kopf?
                    <span class="v11-grad">Lass sie uns bauen.</span>
                </p>
                <p class="v11-lead v11-rise" style="--v11-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="v11-cta-row v11-rise" style="--v11-d:200ms;">
                    <a class="v11-btn v11-btn-primary" href="{{ route('kontakt') }}">
                        Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                    <a class="v11-btn v11-btn-ghost" href="{{ route('webtools.show') }}">
                        Webtools kostenlos nutzen
                    </a>
                </div>

                <div class="v11-quick v11-rise" style="--v11-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>
                    <a href="{{ route('documents.index') }}"><i class="fa-solid fa-folder-open" aria-hidden="true"></i> Dokumente</a>
                </div>

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

    {{-- ============================================================
         TIMECODE-HUD (fixe Szenen-Navigation, KEIN <nav>)
         Liegt am Ende, ist aber position:fixed -> immer sichtbar.
         ============================================================ --}}
    <div class="v11-hud" role="navigation" aria-label="Szenen-Navigation mit Timecode">
        <div class="v11-hud-line" aria-hidden="true"><span id="v11-hud-fill"></span></div>
        <div class="v11-hud-track">
            <a class="v11-tc" href="#v11-szene-hero" data-target="v11-szene-hero" data-label="Start" aria-label="Zur Szene Start">00</a>
            <a class="v11-tc" href="#v11-szene-platforms" data-target="v11-szene-platforms" data-label="Plattformen" aria-label="Zur Szene Plattformen">01</a>
            <a class="v11-tc" href="#v11-szene-web" data-target="v11-szene-web" data-label="Webdesign" aria-label="Zur Szene Webdesign">02</a>
            <a class="v11-tc" href="#v11-szene-tools" data-target="v11-szene-tools" data-label="Webtools" aria-label="Zur Szene Webtools">03</a>
            <a class="v11-tc" href="#v11-szene-news" data-target="v11-szene-news" data-label="News" aria-label="Zur Szene News">04</a>
            <a class="v11-tc" href="#v11-szene-shop" data-target="v11-szene-shop" data-label="Shop" aria-label="Zur Szene Shop">05</a>
            <a class="v11-tc" href="#v11-szene-hosting" data-target="v11-szene-hosting" data-label="Hosting" aria-label="Zur Szene Hosting">06</a>
            <a class="v11-tc" href="#v11-szene-support" data-target="v11-szene-support" data-label="IT-Hilfe" aria-label="Zur Szene IT-Hilfe">07</a>
            <a class="v11-tc" href="#v11-szene-index" data-target="v11-szene-index" data-label="Übersicht" aria-label="Zur Szene Übersicht">08</a>
            <a class="v11-tc" href="#v11-szene-contact" data-target="v11-szene-contact" data-label="Kontakt" aria-label="Zur Szene Kontakt">09</a>
        </div>
        <i class="fa-solid fa-compact-disc v11-hud-reel" aria-hidden="true"></i>
    </div>
</div>

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

    // JS aktiv -> Fallback-Klasse entfernen (Reveal uebernimmt der Observer)
    root.classList.remove('v11-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';

    /* ---------- 1) Reveal-Einblendung ---------- */
    var revealEls = root.querySelectorAll('.v11-rise, .v11-rise-sm, .v11-zoom');
    if (reduce || !hasIO) {
        Array.prototype.forEach.call(revealEls, function (el) { el.classList.add('v11-in'); });
    } else if (revealEls.length) {
        var revealIO = new IntersectionObserver(function (entries, obs) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('v11-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 im Timecode-HUD markieren ---------- */
    var scenes = root.querySelectorAll('[data-scene]');
    var codes = root.querySelectorAll('.v11-tc');

    function setActive(id) {
        Array.prototype.forEach.call(codes, function (c) {
            c.classList.toggle('is-active', c.getAttribute('data-target') === id);
        });
    }

    if (hasIO && scenes.length) {
        var sceneIO = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting && entry.target.id) {
                    setActive(entry.target.id);
                }
            });
        }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 });
        Array.prototype.forEach.call(scenes, function (s) { sceneIO.observe(s); });
    } else if (scenes.length) {
        setActive(scenes[0].id);
    }

    /* ---------- 3) Sanftes Scrollen bei Klick (mit Fallback) ---------- */
    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) Fortschrittsbalken im HUD ---------- */
    var fill = document.getElementById('v11-hud-fill');
    if (fill) {
        var ticking = false;
        var updateProgress = function () {
            var doc = document.documentElement;
            var scrollTop = window.pageYOffset || doc.scrollTop || 0;
            var height = (doc.scrollHeight - doc.clientHeight) || 1;
            var pct = Math.max(0, Math.min(100, (scrollTop / height) * 100));
            fill.style.height = pct + '%';
            ticking = false;
        };
        var onScroll = function () {
            if (!ticking) {
                ticking = true;
                window.requestAnimationFrame(updateProgress);
            }
        };
        window.addEventListener('scroll', onScroll, { passive: true });
        window.addEventListener('resize', onScroll, { passive: true });
        updateProgress();
    }
})();
</script>

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