@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Software, Apps & Web ruhig erzaehlt')
@section('meta_description', 'KOTSCH.TECH von Arthur Kotsch: Windows-Software, iOS-, Mac- & Android-Apps, Webdesign, 420+ Webtools, News, Shop, Hosting und IT-Hilfe - ruhig, klar und hochwertig aus einer Hand.')
@section('og_title', 'KOTSCH.TECH - Die ruhige Tech-Marke von Arthur Kotsch')
@section('og_description', 'Eine luftige Reise durch alle Disziplinen: Softwareentwicklung, native Apps fuer 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. Sauber gebaut, persoenlich betreut.')

@section('content')
<div class="v18-home v18-no-js">
<style>
    /* ============================================================
       KOTSCH.TECH - Variante 18: Cinema hell & luftig
       Ruhige, bildschirmhohe Szenen-Baender, viel Weissraum,
       sanfte Marken-Mesh-Verlaeufe. Premium statt dramatisch.
       ALLE Selektoren .v18- praefixiert (keine Kollision app.css)
       ============================================================ */

    .v18-home {
        --v18-ink: var(--text-main);
        --v18-soft: var(--text-muted);
        --v18-line: var(--border);
        --v18-paper: var(--bg);
        --v18-paper-2: var(--bg-light);
        --v18-rail-w: clamp(56px, 5.5vw, 84px);
        --v18-pad-x: clamp(1.2rem, 5vw, 5rem);
        --v18-maxw: var(--container-width);
        --v18-ease: cubic-bezier(0.16, 0.84, 0.44, 1);
        --v18-grad: linear-gradient(108deg, var(--primary) 0%, var(--accent) 50%, var(--primary-light) 100%);
        color: var(--v18-ink);
        background: var(--v18-paper);
        position: relative;
        overflow-x: clip;
        isolation: isolate;
        font-synthesis: none;
        -webkit-font-smoothing: antialiased;
    }

    /* Durchgehende, sehr sanfte Marken-Mesh-Ebene unter allem.
       Liegt fix hinter dem Inhalt, bindet die luftigen Baender zusammen. */
    .v18-home::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background:
            radial-gradient(60% 55% at 14% 12%, var(--primary-soft) 0%, transparent 60%),
            radial-gradient(55% 50% at 88% 22%, rgba(124, 58, 237, 0.08) 0%, transparent 62%),
            radial-gradient(70% 60% at 72% 92%, rgba(96, 165, 250, 0.10) 0%, transparent 60%),
            var(--v18-paper);
    }

    /* Feines, sehr helles Linienraster als ruhiger Editorial-Grund */
    .v18-home::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image:
            linear-gradient(to right, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
        background-size: clamp(46px, 7vw, 88px) clamp(46px, 7vw, 88px);
        -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 55%, transparent 100%);
                mask-image: radial-gradient(120% 90% at 50% 30%, #000 55%, transparent 100%);
        opacity: 0.9;
    }

    .v18-home * { box-sizing: border-box; }

    /* ---------- Eigene Reveal-Logik (mit No-JS-Fallback) ---------- */
    .v18-rise { opacity: 0; transform: translateY(30px); }
    .v18-rise-sm { opacity: 0; transform: translateY(18px); }
    .v18-fade { opacity: 0; transform: scale(0.97); }
    .v18-rise, .v18-rise-sm, .v18-fade {
        transition: opacity 0.9s var(--v18-ease), transform 1s var(--v18-ease);
        transition-delay: var(--v18-d, 0ms);
        will-change: opacity, transform;
    }
    .v18-in.v18-rise, .v18-in.v18-rise-sm, .v18-in.v18-fade { opacity: 1; transform: none; }
    /* Ohne JS sofort sichtbar */
    .v18-no-js .v18-rise,
    .v18-no-js .v18-rise-sm,
    .v18-no-js .v18-fade { opacity: 1; transform: none; }

    /* ---------- Layout-Grundgeruest ---------- */
    .v18-wrap {
        width: 100%;
        max-width: var(--v18-maxw);
        margin-inline: auto;
        padding-inline: var(--v18-pad-x);
    }

    /* Ein Bereich = eine ruhige, bildschirmhohe Szene */
    .v18-scene {
        position: relative;
        min-height: 100svh;
        display: flex;
        align-items: center;
        padding-block: clamp(6rem, 11vh, 9rem);
    }
    .v18-scene > .v18-wrap { position: relative; z-index: 2; width: 100%; }

    /* Hero braucht Abstand zur fixen 92px-Hauptnavi */
    .v18-scene--hero {
        padding-top: clamp(8.5rem, 17vh, 12rem);
        min-height: 100svh;
    }

    /* Sehr dezente Trennlinie zwischen den Baendern (luftig) */
    .v18-scene + .v18-scene::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(100%, var(--v18-maxw));
        height: 1px;
        background: linear-gradient(to right, transparent, var(--v18-line) 22%, var(--v18-line) 78%, transparent);
        opacity: 0.7;
    }

    /* Riesige, ruhige Hintergrund-Szenennummer (Editorial-Tiefe ohne Bild) */
    .v18-bignum {
        position: absolute;
        right: clamp(0.5rem, 3vw, 3rem);
        bottom: clamp(1rem, 4vh, 4rem);
        font-size: clamp(8rem, 26vw, 24rem);
        font-weight: 800;
        line-height: 0.7;
        letter-spacing: -0.05em;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(37, 99, 235, 0.10);
        z-index: 0;
        pointer-events: none;
        user-select: none;
        font-variant-numeric: tabular-nums;
    }

    /* Kapitel-Label oben in jeder Szene */
    .v18-chapter {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: clamp(1.1rem, 2.5vw, 1.6rem);
    }
    .v18-chapter::before {
        content: "";
        width: clamp(1.8rem, 4vw, 2.8rem);
        height: 2px;
        border-radius: 2px;
        background: var(--v18-grad);
    }
    .v18-chapter .v18-chapter-no {
        font-variant-numeric: tabular-nums;
        color: var(--v18-soft);
        letter-spacing: 0.16em;
    }

    /* ---------- Typografie ---------- */
    .v18-h1 {
        font-size: clamp(2.6rem, 7vw, 6rem);
        line-height: 0.96;
        letter-spacing: -0.035em;
        font-weight: 800;
        margin: 0 0 clamp(1.2rem, 3vw, 1.8rem);
        text-wrap: balance;
    }
    .v18-h2 {
        font-size: clamp(1.9rem, 4.6vw, 3.9rem);
        line-height: 1.02;
        letter-spacing: -0.03em;
        font-weight: 800;
        margin: 0 0 clamp(1rem, 2.4vw, 1.5rem);
        text-wrap: balance;
    }
    .v18-h3 {
        font-size: clamp(1.05rem, 1.6vw, 1.3rem);
        line-height: 1.25;
        letter-spacing: -0.01em;
        font-weight: 700;
        margin: 0;
    }
    .v18-grad-text {
        background: var(--v18-grad);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
    .v18-lead {
        font-size: clamp(1.05rem, 1.7vw, 1.3rem);
        line-height: 1.68;
        color: var(--v18-soft);
        max-width: 52ch;
        margin: 0;
    }
    .v18-muted { color: var(--v18-soft); }

    /* ---------- Buttons / Pillen ---------- */
    .v18-btn-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
    }
    .v18-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.95rem 1.6rem;
        border-radius: 999px;
        font-size: 0.98rem;
        font-weight: 700;
        text-decoration: none;
        border: 1.5px solid transparent;
        transition: transform 0.4s var(--v18-ease), box-shadow 0.4s var(--v18-ease), background 0.4s var(--v18-ease), border-color 0.4s var(--v18-ease), color 0.4s var(--v18-ease);
        cursor: pointer;
        line-height: 1;
    }
    .v18-btn i { transition: transform 0.4s var(--v18-ease); }
    .v18-btn--primary {
        background: var(--v18-grad);
        color: #fff;
        box-shadow: 0 14px 34px -16px var(--primary-glow);
    }
    .v18-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -16px var(--primary-glow); }
    .v18-btn--primary:hover i { transform: translateX(4px); }
    .v18-btn--ghost {
        background: rgba(255, 255, 255, 0.7);
        color: var(--v18-ink);
        border-color: var(--v18-line);
        backdrop-filter: blur(6px);
    }
    .v18-btn--ghost:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary); box-shadow: 0 16px 34px -20px var(--primary-glow); }
    .v18-btn--ghost:hover i { transform: translateX(4px); }

    /* Foot-Link mit Pfeil */
    .v18-foot {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--primary);
        text-decoration: none;
        transition: gap 0.4s var(--v18-ease);
    }
    .v18-foot i { transition: transform 0.4s var(--v18-ease); }
    .v18-foot:hover { gap: 0.85rem; }
    .v18-foot:hover i { transform: translateX(4px); }

    /* Verfuegbar-Badge mit Puls */
    .v18-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.5rem 0.95rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid var(--v18-line);
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--v18-soft);
        backdrop-filter: blur(6px);
    }
    .v18-badge .v18-dot-live {
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--success);
        position: relative;
        flex: none;
    }
    .v18-badge .v18-dot-live::after {
        content: ""; position: absolute; inset: -4px; border-radius: 50%;
        background: var(--success); opacity: 0.4;
        animation: v18-pulse 2.4s ease-out infinite;
    }
    @keyframes v18-pulse {
        0% { transform: scale(0.6); opacity: 0.5; }
        100% { transform: scale(2.2); opacity: 0; }
    }

    /* ============================================================
       HERO
       ============================================================ */
    .v18-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(2.5rem, 5vw, 4rem);
        align-items: center;
    }
    @media (min-width: 980px) {
        .v18-hero-grid { grid-template-columns: 1.05fr 0.95fr; }
    }

    .v18-hero-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--v18-soft);
        margin-bottom: clamp(1.3rem, 3vw, 1.9rem);
    }
    .v18-hero-kicker img { height: 22px; width: auto; display: block; opacity: 0.92; }

    .v18-hero-sub {
        font-size: clamp(1.1rem, 1.9vw, 1.4rem);
        line-height: 1.6;
        color: var(--v18-soft);
        max-width: 46ch;
        margin: 0;
    }

    /* Hero-Chips: kompakte Bereichsschnellzugriffe */
    .v18-hero-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: clamp(1.6rem, 3vw, 2.2rem);
    }
    .v18-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.55rem 0.95rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid var(--v18-line);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--v18-ink);
        text-decoration: none;
        transition: transform 0.35s var(--v18-ease), border-color 0.35s var(--v18-ease), color 0.35s var(--v18-ease), background 0.35s var(--v18-ease);
        backdrop-filter: blur(6px);
    }
    .v18-chip i { color: var(--primary); font-size: 0.85em; }
    .v18-chip:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary); background: rgba(255, 255, 255, 0.92); }

    /* Hero-Visual: ruhig schwebende, gestapelte Glas-Plattformfenster */
    .v18-hero-stage {
        position: relative;
        perspective: 1400px;
        min-height: clamp(320px, 46vw, 480px);
    }
    .v18-pane {
        position: absolute;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid var(--v18-line);
        box-shadow: 0 40px 80px -50px rgba(2, 6, 23, 0.4);
        backdrop-filter: blur(10px);
        overflow: hidden;
    }
    .v18-pane-bar {
        display: flex; align-items: center; gap: 6px;
        padding: 0.7rem 0.9rem;
        border-bottom: 1px solid var(--v18-line);
        background: rgba(248, 250, 252, 0.7);
    }
    .v18-pane-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--v18-line); }
    .v18-pane-bar span:nth-child(1) { background: #f87171; opacity: 0.5; }
    .v18-pane-bar span:nth-child(2) { background: #fbbf24; opacity: 0.5; }
    .v18-pane-bar span:nth-child(3) { background: var(--success); opacity: 0.5; }
    .v18-pane-body { padding: 1rem 1.1rem; display: grid; gap: 0.6rem; }
    .v18-skel { height: 9px; border-radius: 6px; background: var(--v18-line); opacity: 0.7; }
    .v18-skel.w-1 { width: 70%; }
    .v18-skel.w-2 { width: 90%; }
    .v18-skel.w-3 { width: 45%; }
    .v18-skel.grad { background: var(--v18-grad); opacity: 0.85; height: 11px; width: 55%; }

    .v18-pane--1 {
        width: clamp(220px, 60%, 360px);
        top: 6%;
        left: 0;
        z-index: 3;
        transform: rotateY(8deg) rotateX(4deg);
        animation: v18-float-a 9s ease-in-out infinite;
    }
    .v18-pane--2 {
        width: clamp(190px, 50%, 300px);
        top: 34%;
        right: 0;
        z-index: 2;
        transform: rotateY(-7deg) rotateX(3deg);
        animation: v18-float-b 10.5s ease-in-out infinite;
    }
    .v18-pane--3 {
        width: clamp(150px, 38%, 220px);
        bottom: 4%;
        left: 16%;
        z-index: 4;
        transform: rotateY(4deg) rotateX(6deg);
        animation: v18-float-a 8s ease-in-out infinite reverse;
    }
    @keyframes v18-float-a {
        0%, 100% { transform: translateY(0) rotateY(8deg) rotateX(4deg); }
        50% { transform: translateY(-16px) rotateY(8deg) rotateX(4deg); }
    }
    @keyframes v18-float-b {
        0%, 100% { transform: translateY(0) rotateY(-7deg) rotateX(3deg); }
        50% { transform: translateY(14px) rotateY(-7deg) rotateX(3deg); }
    }

    /* schwebende Mini-Pille auf dem Hero-Visual */
    .v18-hero-pill {
        position: absolute;
        z-index: 5;
        bottom: 16%;
        right: 4%;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.9rem;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--v18-line);
        box-shadow: 0 18px 40px -24px var(--primary-glow);
        font-size: 0.82rem;
        font-weight: 700;
        animation: v18-float-b 7.5s ease-in-out infinite;
    }
    .v18-hero-pill i { color: var(--primary); }

    /* ============================================================
       SPLIT (Erzaehlung pro Bereich, alternierend)
       ============================================================ */
    .v18-split {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(2.2rem, 5vw, 4.5rem);
        align-items: center;
    }
    @media (min-width: 940px) {
        .v18-split { grid-template-columns: 1fr 1fr; }
        .v18-split.is-reverse .v18-split-text { order: 2; }
        .v18-split.is-reverse .v18-split-visual { order: 1; }
    }
    .v18-split-text { position: relative; z-index: 2; }

    /* Visual-Buehne / Karten-Rahmen */
    .v18-card {
        position: relative;
        border-radius: var(--radius);
        background: rgba(255, 255, 255, 0.66);
        border: 1px solid var(--v18-line);
        box-shadow: 0 50px 90px -60px rgba(2, 6, 23, 0.35);
        backdrop-filter: blur(10px);
        overflow: hidden;
    }
    .v18-card-glow {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(80% 70% at 80% 10%, var(--primary-soft), transparent 60%);
    }

    /* ----- Geraete-Trio (Plattform-Bereiche) ----- */
    .v18-devices {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: clamp(0.6rem, 1.5vw, 1rem);
        padding: clamp(1.5rem, 4vw, 2.6rem);
        position: relative;
        z-index: 1;
    }
    .v18-device {
        flex: 1 1 0;
        max-width: 150px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid var(--v18-line);
        padding: 1rem 0.8rem;
        text-align: center;
        box-shadow: 0 24px 44px -34px rgba(2, 6, 23, 0.4);
        transition: transform 0.5s var(--v18-ease), box-shadow 0.5s var(--v18-ease);
    }
    .v18-device.is-lift { transform: translateY(-18px); }
    .v18-device .v18-device-icon {
        width: 46px; height: 46px;
        margin: 0 auto 0.7rem;
        border-radius: 13px;
        display: grid; place-items: center;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: 1.2rem;
    }
    .v18-device h4 { margin: 0 0 0.2rem; font-size: 0.9rem; font-weight: 700; }
    .v18-device p { margin: 0; font-size: 0.72rem; color: var(--v18-soft); line-height: 1.4; }
    .v18-card:hover .v18-device.is-lift { transform: translateY(-26px); }

    /* ----- Browser-Mockup (Webdesign) ----- */
    .v18-browser {
        margin: clamp(1.4rem, 3.5vw, 2.4rem);
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--v18-line);
        box-shadow: 0 30px 56px -40px rgba(2, 6, 23, 0.4);
        position: relative;
        z-index: 1;
        transform: rotateX(3deg);
    }
    .v18-browser-bar {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.6rem 0.9rem;
        background: var(--v18-paper-2);
        border-bottom: 1px solid var(--v18-line);
    }
    .v18-browser-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--v18-line); }
    .v18-browser-url {
        margin-left: 0.4rem; flex: 1;
        height: 18px; border-radius: 6px;
        background: #fff; border: 1px solid var(--v18-line);
        display: flex; align-items: center; padding: 0 0.55rem;
        font-size: 0.62rem; color: var(--v18-soft);
        font-variant-numeric: tabular-nums;
    }
    .v18-browser-canvas { padding: 1.1rem; display: grid; gap: 0.7rem; }
    .v18-browser-hero {
        height: clamp(60px, 14vw, 92px);
        border-radius: 12px;
        background: var(--v18-grad);
        opacity: 0.9;
    }
    .v18-browser-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
    .v18-browser-tile { height: clamp(34px, 8vw, 54px); border-radius: 10px; background: var(--v18-paper-2); border: 1px solid var(--v18-line); }

    /* ----- Tool-Raster (Webtools) ----- */
    .v18-tools {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.7rem;
        padding: clamp(1.3rem, 3.5vw, 2.2rem);
        position: relative;
        z-index: 1;
    }
    .v18-tool {
        aspect-ratio: 1 / 1;
        border-radius: 16px;
        background: #fff;
        border: 1px solid var(--v18-line);
        display: grid;
        place-items: center;
        gap: 0.3rem;
        text-align: center;
        font-size: 0.66rem;
        font-weight: 600;
        color: var(--v18-soft);
        padding: 0.4rem;
        transition: transform 0.45s var(--v18-ease);
    }
    .v18-tool i { font-size: 1.15rem; color: var(--primary); }
    .v18-tool.is-hot { background: var(--v18-grad); color: #fff; border-color: transparent; }
    .v18-tool.is-hot i { color: #fff; }
    .v18-card:hover .v18-tool.is-hot { transform: scale(1.04); }

    /* ----- Artikel-Stapel (News) ----- */
    .v18-articles {
        display: grid;
        gap: 0.7rem;
        padding: clamp(1.3rem, 3.5vw, 2.2rem);
        position: relative;
        z-index: 1;
    }
    .v18-article {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.85rem 1rem;
        border-radius: 14px;
        background: #fff;
        border: 1px solid var(--v18-line);
    }
    .v18-article .v18-article-thumb {
        width: 44px; height: 44px; border-radius: 11px; flex: none;
        background: var(--primary-soft); color: var(--primary);
        display: grid; place-items: center; font-size: 1rem;
    }
    .v18-article:nth-child(2) .v18-article-thumb { background: rgba(124, 58, 237, 0.12); color: var(--accent); }
    .v18-article:nth-child(3) .v18-article-thumb { background: rgba(96, 165, 250, 0.18); color: var(--primary-light); }
    .v18-article-lines { flex: 1; display: grid; gap: 0.4rem; }
    .v18-article-lines .v18-skel { height: 8px; }

    /* ----- Produktkarten (Shop) ----- */
    .v18-products {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
        padding: clamp(1.3rem, 3.5vw, 2.2rem);
        position: relative;
        z-index: 1;
    }
    .v18-product {
        border-radius: 14px;
        background: #fff;
        border: 1px solid var(--v18-line);
        padding: 0.9rem;
        display: grid;
        gap: 0.6rem;
    }
    .v18-product-img {
        height: clamp(54px, 12vw, 76px);
        border-radius: 10px;
        background: var(--v18-paper-2);
        display: grid; place-items: center;
        color: var(--primary);
        font-size: 1.4rem;
    }
    .v18-product:nth-child(2) .v18-product-img { color: var(--accent); }
    .v18-product:nth-child(4) .v18-product-img { color: var(--primary-light); }
    .v18-product-foot { display: flex; align-items: center; justify-content: space-between; }
    .v18-product-foot .v18-skel { height: 8px; width: 50%; }
    .v18-product-price { font-size: 0.78rem; font-weight: 800; color: var(--v18-ink); font-variant-numeric: tabular-nums; }

    /* ----- Server-Rack (Hosting) ----- */
    .v18-rack {
        margin: clamp(1.4rem, 3.5vw, 2.4rem);
        border-radius: 16px;
        background: #fff;
        border: 1px solid var(--v18-line);
        padding: 1rem;
        display: grid;
        gap: 0.55rem;
        position: relative;
        z-index: 1;
        box-shadow: 0 30px 56px -42px rgba(2, 6, 23, 0.4);
    }
    .v18-rack-unit {
        display: flex; align-items: center; gap: 0.7rem;
        padding: 0.7rem 0.85rem;
        border-radius: 11px;
        background: var(--v18-paper-2);
        border: 1px solid var(--v18-line);
    }
    .v18-rack-leds { display: flex; gap: 5px; }
    .v18-rack-leds i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); display: block; }
    .v18-rack-unit:nth-child(1) .v18-rack-leds i:nth-child(2) { animation: v18-blink 1.8s ease-in-out infinite; }
    .v18-rack-unit:nth-child(2) .v18-rack-leds i:nth-child(1) { animation: v18-blink 2.3s ease-in-out infinite 0.4s; }
    .v18-rack-unit:nth-child(3) .v18-rack-leds i:nth-child(3) { animation: v18-blink 2s ease-in-out infinite 0.8s; background: var(--primary); }
    @keyframes v18-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
    .v18-rack-bars { flex: 1; display: grid; gap: 0.32rem; }
    .v18-rack-bars .v18-skel { height: 6px; }
    .v18-rack-unit .v18-rack-tag { font-size: 0.66rem; font-weight: 700; color: var(--v18-soft); font-variant-numeric: tabular-nums; }

    /* ----- Chat-Bubbles (IT-Hilfe) ----- */
    .v18-chat {
        margin: clamp(1.4rem, 3.5vw, 2.4rem);
        display: grid;
        gap: 0.7rem;
        position: relative;
        z-index: 1;
    }
    .v18-bubble {
        max-width: 80%;
        padding: 0.8rem 1rem;
        border-radius: 16px;
        font-size: 0.82rem;
        line-height: 1.45;
        border: 1px solid var(--v18-line);
        background: #fff;
    }
    .v18-bubble.is-them { border-bottom-left-radius: 5px; }
    .v18-bubble.is-me {
        margin-left: auto;
        background: var(--v18-grad);
        color: #fff;
        border-color: transparent;
        border-bottom-right-radius: 5px;
    }
    .v18-typing { display: inline-flex; gap: 4px; align-items: center; }
    .v18-typing span {
        width: 6px; height: 6px; border-radius: 50%;
        background: var(--v18-soft);
        animation: v18-typing 1.4s ease-in-out infinite;
    }
    .v18-typing span:nth-child(2) { animation-delay: 0.2s; }
    .v18-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes v18-typing {
        0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
        30% { transform: translateY(-4px); opacity: 1; }
    }

    /* ============================================================
       INDEX-BAND (dunkler, ruhiger Kontrast-Anker)
       ============================================================ */
    .v18-scene--index {
        background:
            radial-gradient(60% 60% at 18% 18%, rgba(37, 99, 235, 0.28), transparent 60%),
            radial-gradient(55% 55% at 84% 80%, rgba(124, 58, 237, 0.30), transparent 60%),
            var(--bg-dark);
        color: var(--text-light);
    }
    .v18-scene--index .v18-bignum { -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.08); }
    .v18-scene--index .v18-chapter { color: var(--primary-light); }
    .v18-scene--index .v18-chapter .v18-chapter-no { color: rgba(255, 255, 255, 0.55); }
    .v18-scene--index::before { background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0.12) 78%, transparent) !important; }

    .v18-index-head { max-width: 60ch; }
    .v18-index-head .v18-h2 { color: #fff; }
    .v18-index-head .v18-lead { color: var(--text-light); opacity: 0.82; }

    .v18-index-list {
        list-style: none;
        margin: clamp(2rem, 4vw, 3rem) 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        counter-reset: v18idx;
    }
    @media (min-width: 760px) {
        .v18-index-list { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); }
    }
    .v18-index-item { border-top: 1px solid rgba(255, 255, 255, 0.12); }
    .v18-index-item:first-child,
    .v18-index-item:nth-child(2) { border-top: 0; }
    @media (max-width: 759px) {
        .v18-index-item:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, 0.12); }
    }
    .v18-index-link {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: clamp(0.95rem, 2vw, 1.25rem) 0;
        text-decoration: none;
        color: var(--text-light);
        transition: padding-left 0.4s var(--v18-ease), color 0.4s var(--v18-ease);
    }
    .v18-index-link:hover { padding-left: 0.9rem; color: #fff; }
    .v18-index-no {
        font-size: 0.78rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--primary-light);
        letter-spacing: 0.06em;
        flex: none;
        width: 2.2rem;
    }
    .v18-index-name { font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 700; flex: 1; letter-spacing: -0.01em; }
    .v18-index-link i { color: var(--primary-light); transition: transform 0.4s var(--v18-ease); opacity: 0.7; }
    .v18-index-link:hover i { transform: translateX(5px); opacity: 1; }

    /* ============================================================
       ABSPANN / KONTAKT (zentriert, sehr luftig)
       ============================================================ */
    .v18-scene--contact { text-align: center; }
    .v18-contact-inner { max-width: 64ch; margin-inline: auto; }
    .v18-contact-h {
        font-size: clamp(2.4rem, 6vw, 5.2rem);
        line-height: 0.98;
        letter-spacing: -0.035em;
        font-weight: 800;
        margin: 0 0 clamp(1.2rem, 3vw, 1.8rem);
        text-wrap: balance;
    }
    .v18-contact-inner .v18-lead { margin-inline: auto; }
    .v18-contact-inner .v18-btn-row { justify-content: center; }

    .v18-quicklinks {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        margin-top: clamp(2rem, 4vw, 3rem);
    }
    .v18-quicklinks a {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--v18-soft);
        text-decoration: none;
        padding: 0.4rem 0.9rem;
        border-radius: 999px;
        border: 1px solid var(--v18-line);
        background: rgba(255, 255, 255, 0.6);
        transition: color 0.35s var(--v18-ease), border-color 0.35s var(--v18-ease), transform 0.35s var(--v18-ease);
        backdrop-filter: blur(6px);
    }
    .v18-quicklinks a:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-2px); }

    .v18-signoff {
        margin-top: clamp(2.6rem, 5vw, 3.6rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.9rem;
    }
    .v18-signoff img { height: 30px; width: auto; opacity: 0.88; }
    .v18-signoff p { margin: 0; font-size: 0.85rem; color: var(--v18-soft); }

    /* ============================================================
       FIXE RAIL (Punkt-Navigation rechts) — KEIN <nav>!
       ============================================================ */
    .v18-rail {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: var(--v18-rail-w);
        z-index: 40;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        pointer-events: none;
    }
    .v18-rail-line {
        position: absolute;
        top: 22%;
        bottom: 22%;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        border-radius: 2px;
        background: var(--v18-line);
        overflow: hidden;
    }
    .v18-rail-line span {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: var(--v18-prog, 0%);
        background: var(--v18-grad);
        transition: height 0.2s linear;
    }
    .v18-rail-dots {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: clamp(0.7rem, 1.5vw, 1rem);
        pointer-events: auto;
    }
    .v18-dot {
        position: relative;
        width: 11px; height: 11px;
        border-radius: 50%;
        border: 1.5px solid var(--primary);
        background: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        transition: transform 0.35s var(--v18-ease), background 0.35s var(--v18-ease), width 0.35s var(--v18-ease), border-radius 0.35s var(--v18-ease);
        display: block;
        text-decoration: none;
    }
    .v18-dot::after {
        content: attr(data-label);
        position: absolute;
        right: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%) translateX(6px);
        white-space: nowrap;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--v18-ink);
        background: #fff;
        border: 1px solid var(--v18-line);
        padding: 0.3rem 0.6rem;
        border-radius: 8px;
        box-shadow: 0 10px 26px -16px rgba(2, 6, 23, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s var(--v18-ease), transform 0.3s var(--v18-ease);
    }
    .v18-dot:hover::after,
    .v18-dot:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }
    .v18-dot:hover { transform: scale(1.25); }
    .v18-dot.is-active {
        width: 11px;
        height: 26px;
        border-radius: 999px;
        background: var(--v18-grad);
        border-color: transparent;
        box-shadow: 0 0 0 5px var(--primary-soft);
    }
    @media (max-width: 880px) { .v18-rail { display: none; } }

    /* Ruhiger Scroll-Hinweis unten (Hero) */
    .v18-scrollcue {
        position: absolute;
        bottom: clamp(1.5rem, 4vh, 2.6rem);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        color: var(--v18-soft);
        font-size: 0.68rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        font-weight: 700;
        z-index: 3;
    }
    .v18-mouse {
        width: 22px; height: 36px;
        border: 2px solid var(--v18-soft);
        border-radius: 12px;
        position: relative;
    }
    .v18-mouse::after {
        content: "";
        position: absolute;
        top: 6px; left: 50%;
        width: 3px; height: 7px;
        margin-left: -1.5px;
        border-radius: 2px;
        background: var(--primary);
        animation: v18-wheel 1.8s ease-in-out infinite;
    }
    @keyframes v18-wheel {
        0% { transform: translateY(0); opacity: 1; }
        70% { transform: translateY(10px); opacity: 0; }
        100% { transform: translateY(0); opacity: 0; }
    }
    @media (max-width: 880px) { .v18-scrollcue { display: none; } }

    /* ---------- Focus-visible (A11y) ---------- */
    .v18-home a:focus-visible,
    .v18-home button:focus-visible,
    .v18-dot:focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
        border-radius: 6px;
    }

    /* ---------- Responsive Feinschliff ---------- */
    @media (max-width: 600px) {
        .v18-scene { min-height: auto; padding-block: clamp(4.5rem, 12vh, 6rem); }
        .v18-scene--hero { min-height: 100svh; }
        .v18-products { grid-template-columns: 1fr 1fr; }
        .v18-hero-stage { min-height: 300px; }
        .v18-bignum { font-size: clamp(6rem, 30vw, 11rem); opacity: 0.9; }
    }

    /* ---------- Reduced Motion: alles Bewegte ausschalten ---------- */
    @media (prefers-reduced-motion: reduce) {
        .v18-home *,
        .v18-home *::before,
        .v18-home *::after {
            animation: none !important;
            transition: none !important;
        }
        .v18-rise, .v18-rise-sm, .v18-fade { opacity: 1 !important; transform: none !important; }
        .v18-pane--1, .v18-pane--2, .v18-pane--3, .v18-hero-pill { transform: none !important; }
    }
</style>

    {{-- ===================== FIXE RAIL (Punkt-Navigation) ===================== --}}
    <div class="v18-rail" role="navigation" aria-label="Bereichsnavigation" data-v18-rail aria-hidden="false">
        <div class="v18-rail-line" aria-hidden="true"><span data-v18-progress></span></div>
        <div class="v18-rail-dots">
            <a class="v18-dot is-active" href="#v18-hero" data-label="Start" aria-label="Zum Bereich Start"></a>
            <a class="v18-dot" href="#v18-windows" data-label="Windows" aria-label="Zum Bereich Windows"></a>
            <a class="v18-dot" href="#v18-apple" data-label="iOS & Mac" aria-label="Zum Bereich iOS und Mac"></a>
            <a class="v18-dot" href="#v18-android" data-label="Android" aria-label="Zum Bereich Android"></a>
            <a class="v18-dot" href="#v18-web" data-label="Webdesign" aria-label="Zum Bereich Webdesign"></a>
            <a class="v18-dot" href="#v18-webtools" data-label="Webtools" aria-label="Zum Bereich Webtools"></a>
            <a class="v18-dot" href="#v18-news" data-label="News" aria-label="Zum Bereich News"></a>
            <a class="v18-dot" href="#v18-shop" data-label="Shop" aria-label="Zum Bereich Shop"></a>
            <a class="v18-dot" href="#v18-hosting" data-label="Hosting" aria-label="Zum Bereich Hosting"></a>
            <a class="v18-dot" href="#v18-support" data-label="IT-Hilfe" aria-label="Zum Bereich IT-Hilfe"></a>
            <a class="v18-dot" href="#v18-index" data-label="Index" aria-label="Zum Bereich Index"></a>
            <a class="v18-dot" href="#v18-kontakt" data-label="Kontakt" aria-label="Zum Bereich Kontakt"></a>
        </div>
    </div>

    {{-- ===================== HERO ===================== --}}
    <section class="v18-scene v18-scene--hero" id="v18-hero" aria-label="Einstieg - KOTSCH.TECH">
        <div class="v18-wrap">
            <div class="v18-hero-grid">
                <header class="v18-hero-text">
                    <p class="v18-hero-kicker v18-rise" style="--v18-d:40ms">
                        <img src="{{ asset('img/logo-mark.png') }}" alt="KOTSCH.TECH Logo" width="22" height="22">
                        <span>Persoenliche Tech-Marke</span>
                    </p>
                    <h1 class="v18-h1 v18-rise" style="--v18-d:90ms">
                        <span class="v18-grad-text">KOTSCH.TECH</span><br>
                        Software, Apps &amp; Web &mdash; ruhig gebaut von Arthur&nbsp;Kotsch.
                    </h1>
                    <p class="v18-hero-sub v18-rise" style="--v18-d:160ms">
                        Eine Marke, viele Disziplinen. Windows-Software, native Apps fuer iOS, macOS und Android,
                        durchdachtes Webdesign, ueber 420 kostenlose Webtools, ein kleiner Shop, verlaessliches
                        Hosting und persoenliche IT-Hilfe &mdash; alles aus einer Hand.
                    </p>
                    <div class="v18-btn-row v18-rise" style="--v18-d:230ms">
                        <a class="v18-btn v18-btn--primary" href="{{ route('kontakt') }}">
                            Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                        <a class="v18-btn v18-btn--ghost" href="{{ route('webtools.show') }}">
                            <i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i> Webtools entdecken
                        </a>
                    </div>
                    <div class="v18-hero-chips v18-rise" style="--v18-d:300ms" role="navigation" aria-label="Schnellzugriff Bereiche">
                        <a class="v18-chip" href="{{ route('windows.index') }}"><i class="fa-brands fa-windows" aria-hidden="true"></i> Windows</a>
                        <a class="v18-chip" href="{{ route('apple.index') }}"><i class="fa-brands fa-apple" aria-hidden="true"></i> iOS &amp; Mac</a>
                        <a class="v18-chip" href="{{ route('android.index') }}"><i class="fa-brands fa-android" aria-hidden="true"></i> Android</a>
                        <a class="v18-chip" href="{{ route('web.templates') }}"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i> Webdesign</a>
                        <a class="v18-chip" href="{{ route('news.index') }}"><i class="fa-solid fa-newspaper" aria-hidden="true"></i> News</a>
                    </div>
                </header>

                <div class="v18-hero-visual v18-fade" style="--v18-d:260ms" aria-hidden="true">
                    <div class="v18-hero-stage">
                        <div class="v18-pane v18-pane--1">
                            <div class="v18-pane-bar"><span></span><span></span><span></span></div>
                            <div class="v18-pane-body">
                                <div class="v18-skel grad"></div>
                                <div class="v18-skel w-2"></div>
                                <div class="v18-skel w-1"></div>
                                <div class="v18-skel w-3"></div>
                            </div>
                        </div>
                        <div class="v18-pane v18-pane--2">
                            <div class="v18-pane-bar"><span></span><span></span><span></span></div>
                            <div class="v18-pane-body">
                                <div class="v18-skel w-2"></div>
                                <div class="v18-skel w-1"></div>
                                <div class="v18-skel grad"></div>
                            </div>
                        </div>
                        <div class="v18-pane v18-pane--3">
                            <div class="v18-pane-bar"><span></span><span></span><span></span></div>
                            <div class="v18-pane-body">
                                <div class="v18-skel w-1"></div>
                                <div class="v18-skel w-3"></div>
                            </div>
                        </div>
                        <span class="v18-hero-pill"><i class="fa-solid fa-bolt" aria-hidden="true"></i> 420+ Tools live</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="v18-scrollcue" aria-hidden="true">
            <span>Scrollen</span>
            <span class="v18-mouse"></span>
        </div>
        <span class="v18-bignum" aria-hidden="true">00</span>
    </section>

    {{-- ===================== 01 WINDOWS ===================== --}}
    <section class="v18-scene" id="v18-windows" aria-label="Windows-Software">
        <div class="v18-wrap">
            <div class="v18-split">
                <div class="v18-split-text">
                    <p class="v18-chapter v18-rise-sm" style="--v18-d:40ms"><span class="v18-chapter-no">01</span> Szene &mdash; Plattformen</p>
                    <h2 class="v18-h2 v18-rise" style="--v18-d:90ms">Windows-<span class="v18-grad-text">Software</span>, die einfach laeuft.</h2>
                    <p class="v18-lead v18-rise" style="--v18-d:150ms">
                        Schlanke Desktop-Werkzeuge und Utilities fuer den Alltag: schnell installiert, klar bedienbar,
                        ohne Ballast. Gebaut fuer echte Aufgaben statt fuer Feature-Listen.
                    </p>
                    <div class="v18-btn-row v18-rise" style="--v18-d:210ms">
                        <a class="v18-foot" href="{{ route('windows.index') }}">Windows-Bereich ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </div>
                <div class="v18-split-visual v18-fade" style="--v18-d:180ms" aria-hidden="true">
                    <div class="v18-card">
                        <div class="v18-card-glow"></div>
                        <div class="v18-devices">
                            <div class="v18-device">
                                <div class="v18-device-icon"><i class="fa-solid fa-gauge-high" aria-hidden="true"></i></div>
                                <h4>Schnell</h4>
                                <p>Sofort startklar</p>
                            </div>
                            <div class="v18-device is-lift">
                                <div class="v18-device-icon"><i class="fa-brands fa-windows" aria-hidden="true"></i></div>
                                <h4>Nativ</h4>
                                <p>Fuer Windows gebaut</p>
                            </div>
                            <div class="v18-device">
                                <div class="v18-device-icon"><i class="fa-solid fa-shield-halved" aria-hidden="true"></i></div>
                                <h4>Sauber</h4>
                                <p>Kein Ballast</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span class="v18-bignum" aria-hidden="true">01</span>
    </section>

    {{-- ===================== 02 iOS & MAC ===================== --}}
    <section class="v18-scene" id="v18-apple" aria-label="iOS- und macOS-Apps">
        <div class="v18-wrap">
            <div class="v18-split is-reverse">
                <div class="v18-split-text">
                    <p class="v18-chapter v18-rise-sm" style="--v18-d:40ms"><span class="v18-chapter-no">02</span> Szene &mdash; Apple</p>
                    <h2 class="v18-h2 v18-rise" style="--v18-d:90ms">Native Apps fuer <span class="v18-grad-text">iOS &amp; macOS</span>.</h2>
                    <p class="v18-lead v18-rise" style="--v18-d:150ms">
                        Apps, die sich anfuehlen, als gehoerten sie ins System &mdash; etwa Convertly+ im App Store.
                        Klar gestaltet, schnell und mit Liebe zum Detail fuer iPhone, iPad und Mac.
                    </p>
                    <p class="v18-rise" style="--v18-d:200ms"><span class="v18-badge"><span class="v18-dot-live" aria-hidden="true"></span> Convertly+ im App Store verfuegbar</span></p>
                    <div class="v18-btn-row v18-rise" style="--v18-d:250ms">
                        <a class="v18-foot" href="{{ route('apple.index') }}">iOS &amp; Mac entdecken <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </div>
                <div class="v18-split-visual v18-fade" style="--v18-d:180ms" aria-hidden="true">
                    <div class="v18-card">
                        <div class="v18-card-glow"></div>
                        <div class="v18-devices">
                            <div class="v18-device">
                                <div class="v18-device-icon"><i class="fa-solid fa-mobile-screen" aria-hidden="true"></i></div>
                                <h4>iPhone</h4>
                                <p>iOS nativ</p>
                            </div>
                            <div class="v18-device is-lift">
                                <div class="v18-device-icon"><i class="fa-brands fa-apple" aria-hidden="true"></i></div>
                                <h4>Mac</h4>
                                <p>macOS App</p>
                            </div>
                            <div class="v18-device">
                                <div class="v18-device-icon"><i class="fa-solid fa-tablet-screen-button" aria-hidden="true"></i></div>
                                <h4>iPad</h4>
                                <p>Universal</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span class="v18-bignum" aria-hidden="true">02</span>
    </section>

    {{-- ===================== 03 ANDROID ===================== --}}
    <section class="v18-scene" id="v18-android" aria-label="Android-Apps">
        <div class="v18-wrap">
            <div class="v18-split">
                <div class="v18-split-text">
                    <p class="v18-chapter v18-rise-sm" style="--v18-d:40ms"><span class="v18-chapter-no">03</span> Szene &mdash; Plattformen</p>
                    <h2 class="v18-h2 v18-rise" style="--v18-d:90ms"><span class="v18-grad-text">Android</span>-Apps in Arbeit.</h2>
                    <p class="v18-lead v18-rise" style="--v18-d:150ms">
                        Dieselbe Sorgfalt, dieselbe Klarheit &mdash; jetzt auch fuer Android. Die ersten Apps
                        entstehen gerade. Material-Design, sauber und ohne unnoetige Berechtigungen.
                    </p>
                    <p class="v18-rise" style="--v18-d:200ms"><span class="v18-badge"><span class="v18-dot-live" aria-hidden="true"></span> In aktiver Entwicklung</span></p>
                    <div class="v18-btn-row v18-rise" style="--v18-d:250ms">
                        <a class="v18-foot" href="{{ route('android.index') }}">Android-Bereich ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </div>
                <div class="v18-split-visual v18-fade" style="--v18-d:180ms" aria-hidden="true">
                    <div class="v18-card">
                        <div class="v18-card-glow"></div>
                        <div class="v18-devices">
                            <div class="v18-device">
                                <div class="v18-device-icon"><i class="fa-solid fa-layer-group" aria-hidden="true"></i></div>
                                <h4>Material</h4>
                                <p>Modern UI</p>
                            </div>
                            <div class="v18-device is-lift">
                                <div class="v18-device-icon"><i class="fa-brands fa-android" aria-hidden="true"></i></div>
                                <h4>Android</h4>
                                <p>Bald verfuegbar</p>
                            </div>
                            <div class="v18-device">
                                <div class="v18-device-icon"><i class="fa-solid fa-lock-open" aria-hidden="true"></i></div>
                                <h4>Fair</h4>
                                <p>Wenig Rechte</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span class="v18-bignum" aria-hidden="true">03</span>
    </section>

    {{-- ===================== 04 WEBDESIGN ===================== --}}
    <section class="v18-scene" id="v18-web" aria-label="Webdesign">
        <div class="v18-wrap">
            <div class="v18-split is-reverse">
                <div class="v18-split-text">
                    <p class="v18-chapter v18-rise-sm" style="--v18-d:40ms"><span class="v18-chapter-no">04</span> Szene &mdash; Web</p>
                    <h2 class="v18-h2 v18-rise" style="--v18-d:90ms"><span class="v18-grad-text">Webdesign</span>, das atmet.</h2>
                    <p class="v18-lead v18-rise" style="--v18-d:150ms">
                        Schnelle, klare Websites mit viel Ruhe und Struktur &mdash; von der Vorlage bis zur
                        massgeschneiderten Seite. Performance, Barrierefreiheit und gutes Gefuehl inklusive.
                    </p>
                    <div class="v18-btn-row v18-rise" style="--v18-d:210ms">
                        <a class="v18-foot" href="{{ route('web.templates') }}">Vorlagen &amp; Webdesign ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </div>
                <div class="v18-split-visual v18-fade" style="--v18-d:180ms" aria-hidden="true">
                    <div class="v18-card">
                        <div class="v18-card-glow"></div>
                        <div class="v18-browser">
                            <div class="v18-browser-bar">
                                <span></span><span></span><span></span>
                                <span class="v18-browser-url">kotsch.tech</span>
                            </div>
                            <div class="v18-browser-canvas">
                                <div class="v18-browser-hero"></div>
                                <div class="v18-browser-row">
                                    <div class="v18-browser-tile"></div>
                                    <div class="v18-browser-tile"></div>
                                    <div class="v18-browser-tile"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span class="v18-bignum" aria-hidden="true">04</span>
    </section>

    {{-- ===================== 05 WEBTOOLS ===================== --}}
    <section class="v18-scene" id="v18-webtools" aria-label="Webtools">
        <div class="v18-wrap">
            <div class="v18-split">
                <div class="v18-split-text">
                    <p class="v18-chapter v18-rise-sm" style="--v18-d:40ms"><span class="v18-chapter-no">05</span> Szene &mdash; Tools</p>
                    <h2 class="v18-h2 v18-rise" style="--v18-d:90ms">Ueber 420 <span class="v18-grad-text">Webtools</span>, kostenlos.</h2>
                    <p class="v18-lead v18-rise" style="--v18-d:150ms">
                        Konvertieren, rechnen, formatieren, generieren &mdash; eine wachsende Sammlung kleiner,
                        schneller Helfer direkt im Browser. Ohne Anmeldung, ohne Installation, sofort nutzbar.
                    </p>
                    <div class="v18-btn-row v18-rise" style="--v18-d:210ms">
                        <a class="v18-btn v18-btn--primary" href="{{ route('webtools.show') }}">Alle Webtools oeffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </div>
                <div class="v18-split-visual v18-fade" style="--v18-d:180ms" aria-hidden="true">
                    <div class="v18-card">
                        <div class="v18-card-glow"></div>
                        <div class="v18-tools">
                            <div class="v18-tool"><i class="fa-solid fa-right-left" aria-hidden="true"></i> Konverter</div>
                            <div class="v18-tool is-hot"><i class="fa-solid fa-calculator" aria-hidden="true"></i> Rechner</div>
                            <div class="v18-tool"><i class="fa-solid fa-palette" aria-hidden="true"></i> Farben</div>
                            <div class="v18-tool"><i class="fa-solid fa-code" aria-hidden="true"></i> Code</div>
                            <div class="v18-tool"><i class="fa-solid fa-image" aria-hidden="true"></i> Bilder</div>
                            <div class="v18-tool is-hot"><i class="fa-solid fa-font" aria-hidden="true"></i> Text</div>
                            <div class="v18-tool"><i class="fa-solid fa-qrcode" aria-hidden="true"></i> QR</div>
                            <div class="v18-tool"><i class="fa-solid fa-key" aria-hidden="true"></i> Krypto</div>
                            <div class="v18-tool"><i class="fa-solid fa-clock" aria-hidden="true"></i> Zeit</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span class="v18-bignum" aria-hidden="true">05</span>
    </section>

    {{-- ===================== 06 NEWS ===================== --}}
    <section class="v18-scene" id="v18-news" aria-label="News und Artikel">
        <div class="v18-wrap">
            <div class="v18-split is-reverse">
                <div class="v18-split-text">
                    <p class="v18-chapter v18-rise-sm" style="--v18-d:40ms"><span class="v18-chapter-no">06</span> Szene &mdash; Wissen</p>
                    <h2 class="v18-h2 v18-rise" style="--v18-d:90ms"><span class="v18-grad-text">News</span> &amp; Artikel zum Mitdenken.</h2>
                    <p class="v18-lead v18-rise" style="--v18-d:150ms">
                        Gedanken, Anleitungen und Updates rund um Software, Apps, Web und IT &mdash; verstaendlich
                        geschrieben, ohne Fachchinesisch. Zum Nachlesen, Lernen und Auf-dem-Laufenden-Bleiben.
                    </p>
                    <div class="v18-btn-row v18-rise" style="--v18-d:210ms">
                        <a class="v18-foot" href="{{ route('news.index') }}">Zu den News &amp; Artikeln <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </div>
                <div class="v18-split-visual v18-fade" style="--v18-d:180ms" aria-hidden="true">
                    <div class="v18-card">
                        <div class="v18-card-glow"></div>
                        <div class="v18-articles">
                            <div class="v18-article">
                                <div class="v18-article-thumb"><i class="fa-solid fa-newspaper" aria-hidden="true"></i></div>
                                <div class="v18-article-lines"><div class="v18-skel w-2"></div><div class="v18-skel w-1"></div></div>
                            </div>
                            <div class="v18-article">
                                <div class="v18-article-thumb"><i class="fa-solid fa-lightbulb" aria-hidden="true"></i></div>
                                <div class="v18-article-lines"><div class="v18-skel w-2"></div><div class="v18-skel w-3"></div></div>
                            </div>
                            <div class="v18-article">
                                <div class="v18-article-thumb"><i class="fa-solid fa-rocket" aria-hidden="true"></i></div>
                                <div class="v18-article-lines"><div class="v18-skel w-1"></div><div class="v18-skel w-2"></div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span class="v18-bignum" aria-hidden="true">06</span>
    </section>

    {{-- ===================== 07 SHOP ===================== --}}
    <section class="v18-scene" id="v18-shop" aria-label="Shop">
        <div class="v18-wrap">
            <div class="v18-split">
                <div class="v18-split-text">
                    <p class="v18-chapter v18-rise-sm" style="--v18-d:40ms"><span class="v18-chapter-no">07</span> Szene &mdash; Shop</p>
                    <h2 class="v18-h2 v18-rise" style="--v18-d:90ms">Ein kleiner, feiner <span class="v18-grad-text">Shop</span>.</h2>
                    <p class="v18-lead v18-rise" style="--v18-d:150ms">
                        Ausgewaehlte digitale und physische Produkte rund um die Marke &mdash; kuratiert statt
                        ueberladen. Klar praesentiert, fair bepreist und direkt verfuegbar.
                    </p>
                    <div class="v18-btn-row v18-rise" style="--v18-d:210ms">
                        <a class="v18-foot" href="{{ route('shop.index') }}">Zum Shop <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </div>
                <div class="v18-split-visual v18-fade" style="--v18-d:180ms" aria-hidden="true">
                    <div class="v18-card">
                        <div class="v18-card-glow"></div>
                        <div class="v18-products">
                            <div class="v18-product">
                                <div class="v18-product-img"><i class="fa-solid fa-box" aria-hidden="true"></i></div>
                                <div class="v18-product-foot"><span class="v18-skel"></span><span class="v18-product-price">9,99 &euro;</span></div>
                            </div>
                            <div class="v18-product">
                                <div class="v18-product-img"><i class="fa-solid fa-download" aria-hidden="true"></i></div>
                                <div class="v18-product-foot"><span class="v18-skel"></span><span class="v18-product-price">4,99 &euro;</span></div>
                            </div>
                            <div class="v18-product">
                                <div class="v18-product-img"><i class="fa-solid fa-cube" aria-hidden="true"></i></div>
                                <div class="v18-product-foot"><span class="v18-skel"></span><span class="v18-product-price">19 &euro;</span></div>
                            </div>
                            <div class="v18-product">
                                <div class="v18-product-img"><i class="fa-solid fa-gift" aria-hidden="true"></i></div>
                                <div class="v18-product-foot"><span class="v18-skel"></span><span class="v18-product-price">29 &euro;</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span class="v18-bignum" aria-hidden="true">07</span>
    </section>

    {{-- ===================== 08 HOSTING ===================== --}}
    <section class="v18-scene" id="v18-hosting" aria-label="Hosting">
        <div class="v18-wrap">
            <div class="v18-split is-reverse">
                <div class="v18-split-text">
                    <p class="v18-chapter v18-rise-sm" style="--v18-d:40ms"><span class="v18-chapter-no">08</span> Szene &mdash; Betrieb</p>
                    <h2 class="v18-h2 v18-rise" style="--v18-d:90ms">Kleines, ehrliches <span class="v18-grad-text">Hosting</span>.</h2>
                    <p class="v18-lead v18-rise" style="--v18-d:150ms">
                        Verlaessliches Hosting fuer Websites und Projekte &mdash; persoenlich betreut statt
                        anonymer Massenware. Schnell, stabil und mit einem echten Ansprechpartner dahinter.
                    </p>
                    <p class="v18-rise" style="--v18-d:200ms"><span class="v18-badge"><span class="v18-dot-live" aria-hidden="true"></span> Server laufen stabil</span></p>
                    <div class="v18-btn-row v18-rise" style="--v18-d:250ms">
                        <a class="v18-foot" href="{{ route('hosting.index') }}">Hosting ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </div>
                <div class="v18-split-visual v18-fade" style="--v18-d:180ms" aria-hidden="true">
                    <div class="v18-card">
                        <div class="v18-card-glow"></div>
                        <div class="v18-rack">
                            <div class="v18-rack-unit">
                                <span class="v18-rack-leds"><i></i><i></i><i></i></span>
                                <span class="v18-rack-bars"><span class="v18-skel w-2"></span><span class="v18-skel w-1"></span></span>
                                <span class="v18-rack-tag">web-01</span>
                            </div>
                            <div class="v18-rack-unit">
                                <span class="v18-rack-leds"><i></i><i></i><i></i></span>
                                <span class="v18-rack-bars"><span class="v18-skel w-1"></span><span class="v18-skel w-2"></span></span>
                                <span class="v18-rack-tag">db-02</span>
                            </div>
                            <div class="v18-rack-unit">
                                <span class="v18-rack-leds"><i></i><i></i><i></i></span>
                                <span class="v18-rack-bars"><span class="v18-skel w-2"></span><span class="v18-skel w-3"></span></span>
                                <span class="v18-rack-tag">cache-03</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span class="v18-bignum" aria-hidden="true">08</span>
    </section>

    {{-- ===================== 09 IT-HILFE ===================== --}}
    <section class="v18-scene" id="v18-support" aria-label="IT-Hilfe">
        <div class="v18-wrap">
            <div class="v18-split">
                <div class="v18-split-text">
                    <p class="v18-chapter v18-rise-sm" style="--v18-d:40ms"><span class="v18-chapter-no">09</span> Szene &mdash; Mensch</p>
                    <h2 class="v18-h2 v18-rise" style="--v18-d:90ms">Persoenliche <span class="v18-grad-text">IT-Hilfe</span>.</h2>
                    <p class="v18-lead v18-rise" style="--v18-d:150ms">
                        Wenn der Rechner streikt, die Website klemmt oder einfach jemand erklaeren soll, wie es geht:
                        direkte, geduldige Hilfe auf Augenhoehe &mdash; verstaendlich und ohne Fachjargon.
                    </p>
                    <div class="v18-btn-row v18-rise" style="--v18-d:210ms">
                        <a class="v18-foot" href="{{ route('it-hilfe.index') }}">IT-Hilfe anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </div>
                <div class="v18-split-visual v18-fade" style="--v18-d:180ms" aria-hidden="true">
                    <div class="v18-card">
                        <div class="v18-card-glow"></div>
                        <div class="v18-chat">
                            <div class="v18-bubble is-them">Mein Mac startet nicht mehr richtig &mdash; kannst du helfen?</div>
                            <div class="v18-bubble is-me">Klar. Lass uns kurz draufschauen, das kriegen wir hin.</div>
                            <div class="v18-bubble is-them"><span class="v18-typing" aria-hidden="true"><span></span><span></span><span></span></span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span class="v18-bignum" aria-hidden="true">09</span>
    </section>

    {{-- ===================== 10 INDEX (dunkler Anker) ===================== --}}
    <section class="v18-scene v18-scene--index" id="v18-index" aria-label="Alle Bereiche im Ueberblick">
        <div class="v18-wrap">
            <div class="v18-index-head">
                <p class="v18-chapter v18-rise-sm" style="--v18-d:40ms"><span class="v18-chapter-no">10</span> Szene &mdash; Index</p>
                <h2 class="v18-h2 v18-rise" style="--v18-d:90ms">Alles auf einen Blick.</h2>
                <p class="v18-lead v18-rise" style="--v18-d:150ms">
                    Jeder Bereich der Marke &mdash; ein Klick entfernt. Ruhig sortiert, klar benannt, direkt verlinkt.
                </p>
            </div>
            <ol class="v18-index-list v18-rise" style="--v18-d:200ms" role="navigation" aria-label="Bereichsuebersicht">
                <li class="v18-index-item"><a class="v18-index-link" href="{{ route('windows.index') }}"><span class="v18-index-no">01</span><span class="v18-index-name">Windows-Software</span><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a></li>
                <li class="v18-index-item"><a class="v18-index-link" href="{{ route('apple.index') }}"><span class="v18-index-no">02</span><span class="v18-index-name">iOS &amp; macOS Apps</span><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a></li>
                <li class="v18-index-item"><a class="v18-index-link" href="{{ route('android.index') }}"><span class="v18-index-no">03</span><span class="v18-index-name">Android Apps</span><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a></li>
                <li class="v18-index-item"><a class="v18-index-link" href="{{ route('web.templates') }}"><span class="v18-index-no">04</span><span class="v18-index-name">Webdesign</span><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a></li>
                <li class="v18-index-item"><a class="v18-index-link" href="{{ route('webtools.show') }}"><span class="v18-index-no">05</span><span class="v18-index-name">Webtools</span><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a></li>
                <li class="v18-index-item"><a class="v18-index-link" href="{{ route('news.index') }}"><span class="v18-index-no">06</span><span class="v18-index-name">News &amp; Artikel</span><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a></li>
                <li class="v18-index-item"><a class="v18-index-link" href="{{ route('shop.index') }}"><span class="v18-index-no">07</span><span class="v18-index-name">Shop</span><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a></li>
                <li class="v18-index-item"><a class="v18-index-link" href="{{ route('hosting.index') }}"><span class="v18-index-no">08</span><span class="v18-index-name">Hosting</span><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a></li>
                <li class="v18-index-item"><a class="v18-index-link" href="{{ route('it-hilfe.index') }}"><span class="v18-index-no">09</span><span class="v18-index-name">IT-Hilfe</span><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a></li>
                <li class="v18-index-item"><a class="v18-index-link" href="{{ route('documents.index') }}"><span class="v18-index-no">10</span><span class="v18-index-name">Dokumente</span><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a></li>
            </ol>
        </div>
        <span class="v18-bignum" aria-hidden="true">10</span>
    </section>

    {{-- ===================== ABSPANN / KONTAKT ===================== --}}
    <section class="v18-scene v18-scene--contact" id="v18-kontakt" aria-label="Kontakt">
        <div class="v18-wrap">
            <div class="v18-contact-inner">
                <p class="v18-chapter v18-rise-sm" style="--v18-d:40ms; justify-content:center;"><span class="v18-chapter-no">11</span> Abspann &mdash; Kontakt</p>
                <h2 class="v18-contact-h v18-rise" style="--v18-d:90ms">Eine Idee im Kopf?<br><span class="v18-grad-text">Lass sie uns bauen.</span></h2>
                <p class="v18-lead v18-rise" style="--v18-d:150ms">
                    Ob App, Website, Tool oder einfach eine Frage &mdash; schreib mir. Persoenlich, unkompliziert
                    und mit ehrlicher Einschaetzung, was sich wirklich lohnt.
                </p>
                <div class="v18-btn-row v18-rise" style="--v18-d:210ms">
                    <a class="v18-btn v18-btn--primary" href="{{ route('kontakt') }}">Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    <a class="v18-btn v18-btn--ghost" href="{{ route('webtools.show') }}"><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i> Webtools testen</a>
                </div>

                <div class="v18-quicklinks v18-rise" style="--v18-d:270ms" role="navigation" aria-label="Weitere Bereiche">
                    <a href="{{ route('windows.index') }}">Windows</a>
                    <a href="{{ route('apple.index') }}">iOS &amp; Mac</a>
                    <a href="{{ route('android.index') }}">Android</a>
                    <a href="{{ route('web.templates') }}">Webdesign</a>
                    <a href="{{ route('webtools.show') }}">Webtools</a>
                    <a href="{{ route('news.index') }}">News</a>
                    <a href="{{ route('shop.index') }}">Shop</a>
                    <a href="{{ route('hosting.index') }}">Hosting</a>
                    <a href="{{ route('it-hilfe.index') }}">IT-Hilfe</a>
                    <a href="{{ route('documents.index') }}">Dokumente</a>
                </div>

                <div class="v18-signoff v18-rise" style="--v18-d:330ms">
                    <img src="{{ asset('img/logo-wordmark-solid-cropped.png') }}" alt="KOTSCH.TECH">
                    <p>Persoenliche Tech-Marke von Arthur Kotsch</p>
                </div>
            </div>
        </div>
        <span class="v18-bignum" aria-hidden="true">11</span>
    </section>

</div>

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

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

    // No-JS-Klasse entfernen -> Reveal-Logik aktiv
    root.classList.remove('v18-no-js');

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

    var revealEls = root.querySelectorAll('.v18-rise, .v18-rise-sm, .v18-fade');

    if (reduce || !('IntersectionObserver' in window)) {
        // Sofort sichtbar, keine Bewegung
        for (var i = 0; i < revealEls.length; i++) { revealEls[i].classList.add('v18-in'); }
        return;
    }

    // ----- Reveal beim Reinscrollen -----
    var io = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) {
                entry.target.classList.add('v18-in');
                io.unobserve(entry.target);
            }
        });
    }, { rootMargin: '0px 0px -10% 0px', threshold: 0.12 });

    for (var j = 0; j < revealEls.length; j++) { io.observe(revealEls[j]); }

    // ----- Aktiver Rail-Punkt + Fortschritt -----
    var scenes = root.querySelectorAll('.v18-scene[id]');
    var dots = root.querySelectorAll('.v18-rail .v18-dot');
    var progressEl = root.querySelector('[data-v18-progress]');

    function dotForId(id) {
        for (var k = 0; k < dots.length; k++) {
            var href = dots[k].getAttribute('href');
            if (href === '#' + id) return dots[k];
        }
        return null;
    }

    if (scenes.length && dots.length) {
        var activeObserver = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    var d = dotForId(entry.target.id);
                    if (d) {
                        for (var m = 0; m < dots.length; m++) {
                            dots[m].classList.remove('is-active');
                            dots[m].removeAttribute('aria-current');
                        }
                        d.classList.add('is-active');
                        d.setAttribute('aria-current', 'true');
                    }
                }
            });
        }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 });

        for (var n = 0; n < scenes.length; n++) { activeObserver.observe(scenes[n]); }
    }

    // ----- Scroll-Fortschritt (gedrosselt via rAF) -----
    if (progressEl) {
        var ticking = false;
        function updateProgress() {
            var doc = document.documentElement;
            var max = (doc.scrollHeight - doc.clientHeight) || 1;
            var pct = Math.min(100, Math.max(0, (window.pageYOffset / max) * 100));
            progressEl.style.height = pct + '%';
            ticking = false;
        }
        function onScroll() {
            if (!ticking) {
                ticking = true;
                window.requestAnimationFrame(updateProgress);
            }
        }
        window.addEventListener('scroll', onScroll, { passive: true });
        window.addEventListener('resize', onScroll, { passive: true });
        updateProgress();
    }

    // ----- Sanftes Scrollen der Rail-Links (respektiert reduced-motion via CSS scroll-behavior nicht noetig) -----
    for (var p = 0; p < dots.length; p++) {
        dots[p].addEventListener('click', function (e) {
            var href = this.getAttribute('href');
            if (!href || href.charAt(0) !== '#') return;
            var target = document.getElementById(href.slice(1));
            if (!target) return;
            e.preventDefault();
            target.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
        });
    }
})();
</script>
@endsection