@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Software, Apps & Web')
@section('meta_description', 'Eine Tech-Marke wie ein Film: Windows-Software, iOS-, Mac- & Android-Apps, Webdesign, 420+ Webtools, News, Shop, Hosting und IT-Hilfe von Arthur Kotsch - alles aus einer Hand.')
@section('og_title', 'KOTSCH.TECH - Die Tech-Marke von Arthur Kotsch in Szenen')
@section('og_description', 'Scrolle durch eine filmische Reise: Softwareentwicklung, Apps für iOS, macOS & Android, Webdesign, kostenlose Webtools, Shop, Hosting und IT-Hilfe von Arthur Kotsch.')
@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. Sauber gebaut, persönlich betreut.')

@section('content')
<div class="v1-home v1-no-js">
<style>
    /* ============================================================
       KOTSCH.TECH - Variante 1: Cinema-Baender
       Vollflaechige, bildschirmhohe Szenen, filmisch durchscrollt.
       ALLE Selektoren .v1- praefixiert (keine Kollision mit app.css)
       ============================================================ */

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

    /* Feines Filmkorn / Vignette ueber der ganzen Buehne (rein dekorativ) */
    .v1-home::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 60;
        pointer-events: none;
        background:
            radial-gradient(130% 120% at 50% 50%, transparent 62%, rgba(2, 6, 23, 0.06) 100%);
        opacity: 0.9;
        mix-blend-mode: multiply;
    }

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

    /* ============================================================
       FILMSTREIFEN-NAVIGATION (fixe Szenen-Leiste, KEIN <nav>)
       ============================================================ */
    .v1-rail {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: var(--v1-rail-w);
        z-index: 40;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(0.5rem, 1.4vh, 1rem);
        padding-block: 120px 28px;
        pointer-events: none;
    }
    .v1-rail-track {
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(0.45rem, 1.3vh, 0.95rem);
    }
    .v1-dot {
        --d-size: 11px;
        position: relative;
        width: var(--d-size);
        height: var(--d-size);
        border-radius: 50%;
        border: 1.5px solid var(--v1-line);
        background: transparent;
        display: block;
        transition: transform 0.35s var(--v1-ease), background 0.35s var(--v1-ease), border-color 0.35s var(--v1-ease);
    }
    .v1-dot::after {
        content: attr(data-label);
        position: absolute;
        right: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%) translateX(6px);
        background: var(--v1-night);
        color: #fff;
        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: var(--shadow-soft);
    }
    .v1-dot:hover { border-color: var(--primary); transform: scale(1.25); }
    .v1-dot:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
    .v1-dot.is-active {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        border-color: transparent;
        transform: scale(1.35);
        box-shadow: 0 0 0 4px var(--primary-soft);
    }
    .v1-dot:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }

    /* Vertikale Fortschrittslinie hinter den Punkten */
    .v1-rail-line {
        position: absolute;
        top: 120px;
        bottom: 28px;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: var(--v1-line);
        opacity: 0.5;
        overflow: hidden;
        border-radius: 2px;
    }
    .v1-rail-line span {
        position: absolute;
        inset: 0 0 auto 0;
        height: var(--v1-prog, 0%);
        background: linear-gradient(var(--primary), var(--accent));
        transition: height 0.2s linear;
    }

    @media (max-width: 880px) {
        .v1-rail { display: none; }
    }

    /* ============================================================
       SZENEN-GRUNDGERUEST
       ============================================================ */
    .v1-scene {
        position: relative;
        min-height: 100svh;
        display: flex;
        align-items: center;
        padding: clamp(7rem, 13vh, 10rem) var(--v1-rail-w) clamp(4rem, 9vh, 7rem) 0;
        overflow: hidden;
    }
    /* erste Szene braucht zusaetzlichen Abstand unter der Hauptnavi (92px) */
    .v1-scene--hero { padding-top: clamp(8.5rem, 17vh, 12rem); }

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

    /* Szenen-Index-Marke (gross, im Hintergrund) */
    .v1-bignum {
        position: absolute;
        z-index: 1;
        font-size: clamp(9rem, 34vw, 30rem);
        font-weight: 800;
        line-height: 0.7;
        letter-spacing: -0.05em;
        color: var(--v1-ink);
        opacity: 0.04;
        right: clamp(1rem, 6vw, 6rem);
        bottom: -0.18em;
        pointer-events: none;
        user-select: none;
        font-variant-numeric: tabular-nums;
    }
    .v1-scene.is-dark .v1-bignum { color: #fff; opacity: 0.06; }

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

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

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

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

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

    /* ============================================================
       HERO (Szene 00)
       ============================================================ */
    .v1-scene--hero {
        background:
            radial-gradient(60% 70% at 82% 12%, var(--primary-soft), transparent 62%),
            radial-gradient(55% 60% at 6% 92%, rgba(124, 58, 237, 0.10), transparent 60%),
            var(--v1-paper);
    }
    /* feines Linienraster im Hero */
    .v1-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% 100% at 30% 0%, #000 35%, transparent 78%);
        -webkit-mask-image: radial-gradient(120% 100% at 30% 0%, #000 35%, transparent 78%);
        pointer-events: none;
    }
    .v1-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.5rem, 6vw, 5rem);
        align-items: center;
    }
    @media (min-width: 1000px) {
        .v1-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
    }

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

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

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

    /* Hero-Visual: gestapelte "Plattform-Fenster" (reines CSS) */
    .v1-stage {
        position: relative;
        aspect-ratio: 1 / 1;
        width: 100%;
        max-width: 460px;
        margin-inline: auto;
        perspective: 1200px;
    }
    .v1-pane {
        position: absolute;
        border-radius: 20px;
        border: 1px solid var(--v1-line);
        background: #fff;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        transform-style: preserve-3d;
    }
    .v1-pane-bar {
        height: 30px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding-inline: 12px;
        border-bottom: 1px solid var(--v1-line);
        background: var(--v1-paper-2);
    }
    .v1-pane-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--v1-line); }
    .v1-pane-bar span:nth-child(1) { background: #f87171; }
    .v1-pane-bar span:nth-child(2) { background: #fbbf24; }
    .v1-pane-bar span:nth-child(3) { background: var(--success); }
    .v1-pane-body { padding: 14px; display: grid; gap: 9px; }
    .v1-pane-body .v1-ln { height: 9px; border-radius: 5px; background: var(--v1-paper-2); }
    .v1-pane-body .v1-ln.w1 { width: 80%; }
    .v1-pane-body .v1-ln.w2 { width: 58%; }
    .v1-pane-body .v1-ln.w3 { width: 70%; }
    .v1-pane-body .v1-ln.grad {
        background: linear-gradient(90deg, var(--primary), var(--accent));
        width: 46%; height: 13px;
    }

    /* Fenster 1: Code/Desktop hinten */
    .v1-pane--a {
        inset: 4% 0 auto 2%;
        width: 70%;
        transform: rotateY(12deg) rotateX(6deg) translateZ(-30px);
        animation: v1-float-a 9s ease-in-out infinite;
    }
    /* Fenster 2: App-Karte vorne */
    .v1-pane--b {
        inset: auto 2% 6% auto;
        width: 56%;
        transform: rotateY(-10deg) rotateX(4deg) translateZ(40px);
        animation: v1-float-b 7.5s ease-in-out infinite;
    }
    .v1-pane--b .v1-pane-body { gap: 11px; padding: 16px; }
    .v1-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 -10px var(--primary-glow);
    }
    /* schwebende Tool-Pille */
    .v1-chipfloat {
        position: absolute;
        top: 44%;
        left: -6%;
        z-index: 3;
        background: #fff;
        border: 1px solid var(--v1-line);
        border-radius: 14px;
        padding: 0.6rem 0.85rem;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        font-weight: 700;
        font-size: 0.82rem;
        box-shadow: var(--shadow-lg);
        animation: v1-float-c 6s ease-in-out infinite;
    }
    .v1-chipfloat i { color: var(--primary); }

    @keyframes v1-float-a {
        0%, 100% { transform: rotateY(12deg) rotateX(6deg) translateZ(-30px) translateY(0); }
        50% { transform: rotateY(12deg) rotateX(6deg) translateZ(-30px) translateY(-12px); }
    }
    @keyframes v1-float-b {
        0%, 100% { transform: rotateY(-10deg) rotateX(4deg) translateZ(40px) translateY(0); }
        50% { transform: rotateY(-10deg) rotateX(4deg) translateZ(40px) translateY(10px); }
    }
    @keyframes v1-float-c {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-9px); }
    }

    /* Scroll-Hinweis */
    .v1-scroll-cue {
        position: absolute;
        left: var(--v1-pad-x);
        bottom: clamp(1.4rem, 4vh, 2.6rem);
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        text-decoration: none;
        color: var(--v1-soft);
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }
    .v1-scroll-cue .v1-mouse {
        width: 24px; height: 38px;
        border: 2px solid currentColor;
        border-radius: 14px;
        position: relative;
        opacity: 0.7;
        flex: none;
    }
    .v1-scroll-cue .v1-mouse::before {
        content: "";
        position: absolute;
        top: 7px; left: 50%;
        width: 3px; height: 7px;
        border-radius: 3px;
        background: currentColor;
        transform: translateX(-50%);
        animation: v1-wheel 1.6s ease-in-out infinite;
    }
    .v1-scroll-cue:hover { color: var(--primary); }
    @keyframes v1-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 / dunkel / soft)
       ============================================================ */
    .v1-scene.is-soft { background: var(--v1-paper-2); }
    .v1-scene.is-soft::before {
        content: "";
        position: absolute; inset: 0; z-index: 0; pointer-events: none;
        background:
            radial-gradient(50% 60% at 90% 10%, var(--primary-soft), transparent 60%),
            radial-gradient(45% 55% at 5% 95%, rgba(124,58,237,0.07), transparent 60%);
    }
    .v1-scene.is-dark {
        background: var(--v1-night);
        color: var(--text-light);
    }
    .v1-scene.is-dark::before {
        content: "";
        position: absolute; inset: 0; z-index: 0; pointer-events: none;
        background:
            radial-gradient(55% 60% at 85% 8%, rgba(124,58,237,0.30), transparent 58%),
            radial-gradient(60% 70% at 8% 95%, rgba(37,99,235,0.32), transparent 60%);
    }
    /* feines Sternen-/Punktraster auf dunklen Szenen */
    .v1-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 40%, #000 70%, transparent);
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
    }

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

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

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

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

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

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

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

    /* --- Shop-Visual: Produktkarten --- */
    .v1-shopgrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(0.7rem, 1.8vw, 1.1rem);
    }
    .v1-product {
        border-radius: 16px;
        border: 1px solid var(--v1-line);
        background: #fff;
        box-shadow: var(--shadow-soft);
        overflow: hidden;
        transition: transform 0.35s var(--v1-ease), box-shadow 0.35s var(--v1-ease);
    }
    .v1-product:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .v1-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;
    }
    .v1-product-art .v1-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;
    }
    .v1-product-info { padding: 0.85rem 0.95rem; display: grid; gap: 0.5rem; }
    .v1-product-info .v1-pi-name { font-weight: 700; font-size: 0.92rem; }
    .v1-product-info .v1-pi-foot { display: flex; align-items: center; justify-content: space-between; }
    .v1-product-info .v1-pi-price { font-weight: 800; color: var(--primary); font-size: 0.95rem; }
    .v1-product-info .v1-pi-dl {
        font-size: 0.7rem; font-weight: 700; color: var(--v1-soft);
        display: inline-flex; align-items: center; gap: 0.3rem;
    }

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

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

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

    /* ============================================================
       SCHLUSS-SZENE: KONTAKT (Abspann)
       ============================================================ */
    .v1-scene--contact { text-align: center; }
    .v1-contact-wrap { max-width: 760px; margin-inline: auto; }
    .v1-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;
    }
    .v1-contact-wrap .v1-lead { margin-inline: auto; color: var(--text-light); }
    .v1-contact-wrap .v1-cta-row { justify-content: center; }
    .v1-quick {
        margin-top: clamp(2.4rem, 5vw, 3.5rem);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.6rem 0.7rem;
    }
    .v1-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(--v1-ease), border-color 0.3s var(--v1-ease), background 0.3s var(--v1-ease);
    }
    .v1-quick a:hover { color: #fff; border-color: var(--primary-light); background: rgba(96,165,250,0.12); }
    .v1-quick a i { color: var(--primary-light); }
    .v1-signoff {
        margin-top: clamp(2.2rem, 5vw, 3.4rem);
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        font-size: 0.78rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--text-light);
        opacity: 0.7;
    }
    .v1-signoff img { height: 18px; width: auto; opacity: 0.9; }

    /* ============================================================
       RESPONSIVE FEINSCHLIFF
       ============================================================ */
    @media (max-width: 880px) {
        .v1-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);
        }
        .v1-scene--hero { padding-top: clamp(7.5rem, 17vh, 10rem); }
        .v1-scroll-cue { display: none; }
        .v1-stage { max-width: 360px; }
    }
    @media (max-width: 540px) {
        .v1-devices { gap: 0.5rem; }
        .v1-device { padding: 0.6rem 0.6rem 0.8rem; }
        .v1-device:nth-child(2) { transform: translateY(-10px); }
        .v1-toolgrid { gap: 0.5rem; }
        .v1-shopgrid { grid-template-columns: minmax(0, 1fr); }
        .v1-hero-meta li { font-size: 0.78rem; }
    }

    /* ============================================================
       REDUCED MOTION
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
        .v1-home .v1-rise,
        .v1-home .v1-rise-sm,
        .v1-home .v1-zoom { opacity: 1 !important; transform: none !important; transition: none !important; }
        .v1-home *,
        .v1-home *::before,
        .v1-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="v1-scene v1-scene--hero" id="v1-szene-hero" data-scene aria-label="Einleitung">
        <span class="v1-bignum" aria-hidden="true">00</span>
        <div class="v1-inner">
            <div class="v1-hero-grid">
                <div class="v1-hero-copy">
                    <span class="v1-brandline v1-rise" style="--v1-d:60ms;">
                        <img src="{{ asset('img/logo-mark.png') }}" alt="" aria-hidden="true">
                        KOTSCH.TECH
                        <span class="v1-live">Live</span>
                    </span>

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

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

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

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

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

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

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

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

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

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

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

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

                <div class="v1-split-art v1-zoom" style="--v1-d:160ms;" aria-hidden="true">
                    <div class="v1-shopgrid">
                        <div class="v1-product">
                            <div class="v1-product-art"><span class="v1-tag">Download</span><i class="fa-solid fa-cube"></i></div>
                            <div class="v1-product-info">
                                <span class="v1-pi-name">Starter-Kit</span>
                                <div class="v1-pi-foot">
                                    <span class="v1-pi-price">ab 9 €</span>
                                    <span class="v1-pi-dl"><i class="fa-solid fa-download"></i> sofort</span>
                                </div>
                            </div>
                        </div>
                        <div class="v1-product">
                            <div class="v1-product-art"><span class="v1-tag">Vorlage</span><i class="fa-solid fa-file-code"></i></div>
                            <div class="v1-product-info">
                                <span class="v1-pi-name">Template-Paket</span>
                                <div class="v1-pi-foot">
                                    <span class="v1-pi-price">ab 19 €</span>
                                    <span class="v1-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="v1-scene is-dark" id="v1-szene-hosting" data-scene aria-label="Hosting">
        <span class="v1-bignum" aria-hidden="true">06</span>
        <div class="v1-inner">
            <div class="v1-split">
                <div class="v1-split-text">
                    <span class="v1-chapter v1-rise-sm">
                        <span class="v1-chapter-bar" aria-hidden="true"></span>
                        <span class="v1-chapter-no">06</span> Szene &mdash; Betrieb
                    </span>
                    <h2 class="v1-h v1-rise">Kleines Hosting, <span class="v1-grad">persönlich betreut.</span></h2>
                    <p class="v1-lead v1-rise" style="--v1-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="v1-points v1-rise" style="--v1-d:200ms;">
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Stabil und überschaubar</li>
                        <li><i class="fa-solid fa-check" aria-hidden="true"></i> Direkter Kontakt statt Ticket-Labyrinth</li>
                    </ul>
                    <div class="v1-cta-row v1-rise" style="--v1-d:280ms;">
                        <a class="v1-btn v1-btn-primary" href="{{ route('hosting.index') }}">
                            Hosting ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

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

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

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

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

    {{-- ============================================================
         SZENE 09 - KONTAKT / ABSPANN - DUNKEL
         ============================================================ --}}
    <section class="v1-scene is-dark v1-scene--contact" id="v1-szene-contact" data-scene aria-label="Kontakt aufnehmen">
        <span class="v1-bignum" aria-hidden="true">09</span>
        <div class="v1-inner">
            <div class="v1-contact-wrap">
                <span class="v1-chapter v1-rise-sm" style="justify-content:center;">
                    <span class="v1-chapter-bar" aria-hidden="true"></span>
                    <span class="v1-chapter-no">09</span> Abspann &mdash; und der Anfang
                </span>
                <p class="v1-contact-h v1-rise">
                    Eine Idee im Kopf?<br>
                    <span class="v1-grad">Lass sie uns bauen.</span>
                </p>
                <p class="v1-lead v1-rise" style="--v1-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="v1-cta-row v1-rise" style="--v1-d:200ms;">
                    <a class="v1-btn v1-btn-primary" href="{{ route('kontakt') }}">
                        Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                    <a class="v1-btn v1-btn-ghost" href="{{ route('webtools.show') }}">
                        Webtools kostenlos nutzen
                    </a>
                </div>

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

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

    {{-- ============================================================
         FILMSTREIFEN-RAIL (fixe Szenen-Navigation, KEIN <nav>)
         Liegt am Ende, ist aber position:fixed -> immer sichtbar.
         ============================================================ --}}
    <div class="v1-rail" role="navigation" aria-label="Szenen-Navigation">
        <div class="v1-rail-line" aria-hidden="true"><span id="v1-rail-fill"></span></div>
        <div class="v1-rail-track">
            <a class="v1-dot" href="#v1-szene-hero" data-target="v1-szene-hero" data-label="Start" aria-label="Zur Szene Start"></a>
            <a class="v1-dot" href="#v1-szene-platforms" data-target="v1-szene-platforms" data-label="Plattformen" aria-label="Zur Szene Plattformen"></a>
            <a class="v1-dot" href="#v1-szene-web" data-target="v1-szene-web" data-label="Webdesign" aria-label="Zur Szene Webdesign"></a>
            <a class="v1-dot" href="#v1-szene-tools" data-target="v1-szene-tools" data-label="Webtools" aria-label="Zur Szene Webtools"></a>
            <a class="v1-dot" href="#v1-szene-news" data-target="v1-szene-news" data-label="News" aria-label="Zur Szene News"></a>
            <a class="v1-dot" href="#v1-szene-shop" data-target="v1-szene-shop" data-label="Shop" aria-label="Zur Szene Shop"></a>
            <a class="v1-dot" href="#v1-szene-hosting" data-target="v1-szene-hosting" data-label="Hosting" aria-label="Zur Szene Hosting"></a>
            <a class="v1-dot" href="#v1-szene-support" data-target="v1-szene-support" data-label="IT-Hilfe" aria-label="Zur Szene IT-Hilfe"></a>
            <a class="v1-dot" href="#v1-szene-index" data-target="v1-szene-index" data-label="Übersicht" aria-label="Zur Szene Übersicht"></a>
            <a class="v1-dot" href="#v1-szene-contact" data-target="v1-szene-contact" data-label="Kontakt" aria-label="Zur Szene Kontakt"></a>
        </div>
    </div>
</div>

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

    // JS aktiv -> Fallback-Klasse weg (Reveal uebernimmt der Observer)
    root.classList.remove('v1-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('.v1-rise, .v1-rise-sm, .v1-zoom');
    if (reduce || !hasIO) {
        Array.prototype.forEach.call(revealEls, function (el) { el.classList.add('v1-in'); });
    } else if (revealEls.length) {
        var revealIO = new IntersectionObserver(function (entries, obs) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('v1-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 Rail markieren ---------- */
    var scenes = root.querySelectorAll('[data-scene]');
    var dots = root.querySelectorAll('.v1-dot');

    function setActive(id) {
        Array.prototype.forEach.call(dots, function (d) {
            d.classList.toggle('is-active', d.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 Rail ---------- */
    var fill = document.getElementById('v1-rail-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>
        .v1-home .v1-rise,
        .v1-home .v1-rise-sm,
        .v1-home .v1-zoom { opacity: 1 !important; transform: none !important; }
    </style>
</noscript>
@endsection