@extends('layouts.app')

@section('title', 'Vertikale Reise — Demo 39 | KOTSCH.TECH')
@section('meta_description', 'Demo 39: Die vertikale Reise durch die neun Welten von Arthur Kotsch — ein scrollendes Editorial mit lebender Timeline, Count-up-Kennzahlen und bespoke Illustrationen.')

@section('content')
<div class="v39-root v39-no-js">
<style>
    /* @import MUSS als erste Regel stehen (CSS-Spez). */
    @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');

    /* ============================================================
       KOTSCH.TECH — Demo 39: DIE VERTIKALE REISE (Timeline)
       Editorial-Magazin: eine lebende Verbindungslinie zieht den
       Blick nach unten; 9 Welten als alternierende Stationen.
       Header/Footer vom Layout bleiben sichtbar. Alle Selektoren
       mit v39- präfixiert. KEIN nav/footer/main-Reset.
       ============================================================ */

    .v39-root {
        --v39-ink:        #0B1220;
        --v39-ink-soft:   #3A4658;
        --v39-muted:      #6B7689;
        --v39-line:       #E4E9F2;
        --v39-paper:      #FFFFFF;
        --v39-bg:         #F7F9FC;
        --v39-bg-2:       #EEF3FB;
        --v39-blue:       var(--primary, #2563EB);
        --v39-blue-700:   #1D4ED8;
        --v39-blue-tint:  #E8EFFE;
        --v39-orange:     var(--accent-2, #FF5D2E);
        --v39-orange-tint:#FFE9E1;
        --v39-grad:       linear-gradient(135deg,#2563EB 0%,#5B8DEF 55%,#FF5D2E 140%);
        --v39-grad-line:  linear-gradient(180deg,#2563EB 0%,#5B8DEF 60%,#FF5D2E 100%);
        --v39-sh-rest:    0 1px 2px rgba(11,18,32,.04), 0 10px 24px -18px rgba(11,18,32,.18);
        --v39-sh-hover:   0 22px 48px -14px rgba(37,99,235,.26), 0 4px 12px -6px rgba(11,18,32,.08);
        --v39-ease:       cubic-bezier(.2,.7,.2,1);

        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        color: var(--v39-ink-soft);
        background: var(--v39-bg);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        overflow: hidden; /* nur Margin-Collapse-Schutz; KEIN overflow-x am body */
    }
    .v39-root *, .v39-root *::before, .v39-root *::after { box-sizing: border-box; }

    .v39-root h1, .v39-root h2, .v39-root h3 {
        font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
        color: var(--v39-ink);
        margin: 0;
        font-weight: 600;
    }
    .v39-root p { margin: 0; }
    .v39-root a { color: inherit; text-decoration: none; }

    .v39-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.2rem); }
    .v39-section { padding: clamp(4rem, 9vw, 8rem) 0; position: relative; }
    .v39-band {
        background:
            radial-gradient(80% 120% at 50% -10%, rgba(37,99,235,.05), transparent 60%),
            var(--v39-bg-2);
    }
    /* zarte Trennlinie zwischen Bändern */
    .v39-band::before, .v39-band::after {
        content: ""; position: absolute; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, var(--v39-line) 18%, var(--v39-line) 82%, transparent);
    }
    .v39-band::before { top: 0; }
    .v39-band::after  { bottom: 0; }

    .v39-eyebrow {
        display: inline-flex; align-items: center; gap: .55rem;
        font-size: .78rem; font-weight: 700; letter-spacing: .14em;
        text-transform: uppercase; color: var(--v39-muted);
        margin-bottom: 1rem;
    }
    .v39-eyebrow::before {
        content: ""; width: 26px; height: 2px; border-radius: 2px;
        background: var(--v39-grad);
        box-shadow: 0 0 0 0 rgba(37,99,235,.0);
    }
    .v39-eyebrow::after {
        content: ""; width: 5px; height: 5px; border-radius: 50%;
        background: var(--v39-orange); margin-left: -.15rem;
        box-shadow: 0 0 0 3px var(--v39-orange-tint);
    }

    .v39-grad-text {
        background: var(--v39-grad);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
        -webkit-box-decoration-break: clone; box-decoration-break: clone;
        padding-bottom: .12em; /* Schutz vor Unterlängen-Clipping (g, j) */
    }

    .v39-btn {
        display: inline-flex; align-items: center; gap: .55rem;
        padding: .85rem 1.5rem; border-radius: 12px;
        font-family: 'Inter', sans-serif; font-weight: 700; font-size: .98rem;
        border: 1px solid transparent; cursor: pointer;
        transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        line-height: 1;
    }
    .v39-btn-primary { color: #fff; background: var(--v39-blue); box-shadow: 0 10px 24px -10px rgba(37,99,235,.55); }
    .v39-btn-primary:hover { background: var(--v39-blue-700); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(37,99,235,.6); }
    .v39-btn-ghost { color: var(--v39-ink); background: var(--v39-paper); border-color: var(--v39-line); }
    .v39-btn-ghost:hover { border-color: var(--v39-blue-tint); transform: translateY(-2px); }
    .v39-btn .v39-arr { transition: transform .2s ease; }
    .v39-btn:hover .v39-arr { transform: translateX(3px); }

    .v39-root :focus-visible {
        outline: 2px solid var(--v39-blue); outline-offset: 3px; border-radius: 6px;
    }

    /* ========================== HERO ========================== */
    .v39-hero {
        background:
            radial-gradient(60% 70% at 82% 12%, rgba(255,93,46,.06), transparent 60%),
            radial-gradient(70% 80% at 14% 0%, rgba(37,99,235,.08), transparent 58%),
            linear-gradient(180deg,#FFFFFF 0%, var(--v39-bg) 100%);
        padding-bottom: 2rem; overflow: hidden;
    }
    /* feines Punktraster im Hero-Hintergrund */
    .v39-hero::before {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background-image: radial-gradient(rgba(11,18,32,.04) 1px, transparent 1px);
        background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(80% 75% at 50% 30%, #000 30%, transparent 75%);
        mask-image: radial-gradient(80% 75% at 50% 30%, #000 30%, transparent 75%);
    }
    .v39-hero .v39-wrap { position: relative; z-index: 1; }
    .v39-hero-grid {
        display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem);
        align-items: center;
    }
    .v39-h1 {
        font-size: clamp(2.6rem, 5.5vw, 4.6rem); line-height: 1.02;
        letter-spacing: -.025em; font-weight: 700;
        text-wrap: balance;
    }
    .v39-hero-sub {
        font-size: 1.0625rem; color: var(--v39-ink-soft); max-width: 52ch;
        margin: 1.4rem 0 2rem;
    }
    .v39-hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.4rem; }
    .v39-ministats {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: clamp(1rem, 3vw, 2.2rem);
    }
    .v39-ministat { display: flex; flex-direction: column; min-width: 0; }
    .v39-ministat + .v39-ministat { padding-left: clamp(1rem, 3vw, 2.2rem); border-left: 1px solid var(--v39-line); }
    .v39-ministat b {
        font-family: 'Fraunces', Georgia, serif; font-size: 1.7rem; color: var(--v39-ink);
        font-variant-numeric: tabular-nums; line-height: 1;
    }
    .v39-ministat span { font-size: .76rem; color: var(--v39-muted); letter-spacing: .04em; margin-top: .3rem; }

    /* Hero-Visual: Orbit-Konstellation */
    .v39-orbit-card {
        position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 420px;
        margin-left: auto;
        border-radius: 28px; border: 1px solid var(--v39-line);
        background:
            radial-gradient(130% 130% at 28% 14%, rgba(255,255,255,.85), rgba(255,255,255,.45) 60%),
            var(--v39-bg);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        box-shadow:
            0 30px 70px -30px rgba(37,99,235,.4),
            inset 0 1px 0 rgba(255,255,255,.9);
        overflow: hidden;
        transform-style: preserve-3d; transition: transform .25s ease;
        will-change: transform;
    }
    .v39-orbit-card::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(120% 120% at 30% 20%, rgba(91,141,239,.18), transparent 55%);
        pointer-events: none;
    }
    /* rotierender Lichtkegel (Sheen) */
    .v39-orbit-card::after {
        content: ""; position: absolute; top: 50%; left: 50%; width: 150%; height: 150%;
        transform: translate(-50%,-50%);
        background: conic-gradient(from 0deg, transparent 0deg, rgba(37,99,235,.08) 40deg, transparent 110deg, transparent 360deg);
        animation: v39-spin 22s linear infinite; pointer-events: none; z-index: 0;
    }
    .v39-orbit-stage { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
    .v39-orbit-ring {
        position: absolute; top: 50%; left: 50%; border-radius: 50%;
        border: 1.5px dashed var(--v39-line); transform: translate(-50%,-50%);
    }
    .v39-orbit-ring.r1 { width: 56%; height: 56%; animation: v39-spin 60s linear infinite; }
    .v39-orbit-ring.r2 { width: 92%; height: 92%; animation: v39-spin 90s linear infinite reverse; }
    /* zarter durchgezogener Innenring für Tiefe */
    .v39-orbit-ring.r1::before {
        content: ""; position: absolute; inset: 0; border-radius: 50%;
        border: 1px solid rgba(37,99,235,.10);
    }
    @keyframes v39-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

    .v39-core {
        position: relative; z-index: 3; width: 92px; height: 92px; border-radius: 26px;
        background: var(--v39-grad); display: grid; place-items: center;
        color: #fff; font-family: 'Fraunces', serif; font-weight: 700; font-size: 2.4rem;
        box-shadow:
            0 16px 36px -12px rgba(37,99,235,.6),
            inset 0 1px 1px rgba(255,255,255,.4),
            inset 0 -6px 14px -6px rgba(11,18,32,.35);
    }
    /* pulsierender Halo um den Kern */
    .v39-core::after {
        content: ""; position: absolute; inset: -10px; border-radius: 32px;
        background: radial-gradient(circle, rgba(37,99,235,.35), transparent 70%);
        z-index: -1; animation: v39-pulse 3.4s ease-in-out infinite;
    }
    @keyframes v39-pulse {
        0%,100% { opacity: .55; transform: scale(1); }
        50%     { opacity: .95; transform: scale(1.12); }
    }
    .v39-sat {
        position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px;
        border-radius: 13px;
        background: linear-gradient(160deg,#FFFFFF, #F4F7FD);
        border: 1px solid var(--v39-line);
        display: grid; place-items: center; color: var(--v39-blue);
        box-shadow: 0 10px 20px -10px rgba(11,18,32,.35), inset 0 1px 0 rgba(255,255,255,.9);
        z-index: 2;
        transition: box-shadow .25s var(--v39-ease);
    }
    .v39-sat::before {
        content: ""; position: absolute; inset: 0; border-radius: inherit;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); pointer-events: none;
    }
    .v39-sat svg { width: 20px; height: 20px; }
    .v39-sat.accent {
        color: var(--v39-orange);
        box-shadow: 0 10px 22px -8px rgba(255,93,46,.5), inset 0 1px 0 rgba(255,255,255,.9);
    }

    .v39-scroll-cue {
        display: flex; flex-direction: column; align-items: center; gap: .5rem;
        margin: 2.6rem auto 0; color: var(--v39-muted); font-size: .78rem;
        letter-spacing: .12em; text-transform: uppercase;
    }
    .v39-scroll-cue .v39-chev {
        width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--v39-line);
        display: grid; place-items: center; color: var(--v39-blue);
        animation: v39-bob 2.4s ease-in-out infinite;
    }
    @keyframes v39-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

    /* ===================== FLAGGSCHIFF SPOTLIGHT ===================== */
    .v39-spot {
        position: relative; overflow: hidden;
        display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
        align-items: center;
        background:
            radial-gradient(90% 140% at 100% 0%, rgba(255,93,46,.05), transparent 55%),
            radial-gradient(80% 120% at 0% 100%, rgba(37,99,235,.05), transparent 55%),
            var(--v39-paper);
        border: 1px solid var(--v39-line);
        border-radius: 26px; padding: clamp(1.8rem, 4vw, 3.2rem);
        box-shadow: var(--v39-sh-rest);
        transition: transform .3s var(--v39-ease), box-shadow .3s var(--v39-ease);
    }
    .v39-spot:hover { box-shadow: var(--v39-sh-hover); }
    /* dezenter Eckakzent oben-links */
    .v39-spot::before {
        content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 64px;
        border-top: 2px solid var(--v39-blue); border-left: 2px solid var(--v39-blue);
        border-top-left-radius: 26px; opacity: .25; pointer-events: none;
    }
    .v39-spot-num {
        font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(3rem, 7vw, 5rem);
        line-height: 1; color: var(--v39-ink); font-variant-numeric: tabular-nums;
        background: var(--v39-grad); -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: .8rem 0 1.2rem;
    }
    .v39-spot h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.01em; }
    .v39-spot p { margin: .8rem 0 0; max-width: 46ch; }
    .v39-spot-cta { margin-top: 1.6rem; }

    /* CSS Phone + Mac Komposition */
    .v39-device { position: relative; height: clamp(240px, 32vw, 340px); }
    .v39-device-mac {
        position: absolute; right: 4%; top: 14%; width: 80%; height: 64%;
        border-radius: 14px 14px 5px 5px;
        background: linear-gradient(180deg,#FFFFFF,#FBFCFE);
        border: 1px solid var(--v39-line);
        box-shadow: 0 26px 55px -22px rgba(11,18,32,.32), inset 0 1px 0 rgba(255,255,255,.9);
        transform: rotate(-3deg);
        transition: transform .35s var(--v39-ease);
    }
    .v39-spot:hover .v39-device-mac { transform: rotate(-2deg) translateY(-3px); }
    .v39-device-mac::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 24px;
        border-radius: 13px 13px 0 0; background: linear-gradient(180deg,#F1F5FB,#E7EEF8);
        border-bottom: 1px solid var(--v39-line);
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.6);
    }
    /* Fenster-Ampel (3 Punkte) */
    .v39-device-mac::after {
        content: ""; position: absolute; top: 9px; left: 12px; width: 7px; height: 7px;
        border-radius: 50%; background: #FF5F57;
        box-shadow: 12px 0 0 #FEBC2E, 24px 0 0 #28C840;
    }
    /* Inhalts-Skizze auf dem Mac-Screen */
    .v39-mac-body {
        position: absolute; top: 24px; left: 0; right: 0; bottom: 0;
        border-radius: 0 0 4px 4px; overflow: hidden;
        background:
            linear-gradient(180deg, rgba(37,99,235,.06), transparent 40%);
    }
    .v39-mac-body::before {
        content: ""; position: absolute; left: 12%; top: 22%; width: 46%; height: 9px;
        border-radius: 5px; background: var(--v39-grad);
        box-shadow: 0 22px 0 -2px var(--v39-line), 0 40px 0 -2px var(--v39-line), 0 58px 0 -2px var(--v39-line);
    }
    .v39-mac-body::after {
        content: ""; position: absolute; right: 9%; top: 20%; width: 28%; height: 46%;
        border-radius: 10px; background: var(--v39-blue-tint);
        border: 1px solid var(--v39-line);
    }
    .v39-device-phone {
        position: absolute; left: 1%; bottom: 0; width: 39%; aspect-ratio: 9/19;
        border-radius: 24px; background: linear-gradient(160deg,#1A2434,#0B1220);
        padding: 8px; box-shadow: 0 30px 60px -18px rgba(11,18,32,.55), inset 0 1px 0 rgba(255,255,255,.12);
        transform: rotate(4deg); z-index: 2;
        transition: transform .35s var(--v39-ease);
    }
    .v39-spot:hover .v39-device-phone { transform: rotate(2deg) translateY(-8px); }
    /* Notch / Dynamic Island */
    .v39-device-phone::before {
        content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
        width: 34%; height: 11px; border-radius: 999px; background: #05080F; z-index: 3;
    }
    .v39-device-phone-screen {
        position: relative;
        width: 100%; height: 100%; border-radius: 17px;
        background: radial-gradient(120% 90% at 50% 0%, #EAF1FE, var(--v39-bg) 60%);
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
        padding: 26px 11px 11px; align-content: start; overflow: hidden;
    }
    /* Home-Indicator */
    .v39-device-phone-screen::after {
        content: ""; position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
        width: 34%; height: 4px; border-radius: 4px; background: rgba(11,18,32,.18);
    }
    .v39-app-icon {
        aspect-ratio: 1; border-radius: 11px; background: var(--v39-blue-tint);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 8px -4px rgba(11,18,32,.18);
    }
    .v39-app-icon:nth-child(3n+1) { background: var(--v39-grad); }
    .v39-app-icon:nth-child(4) { background: var(--v39-orange-tint); }
    .v39-app-icon:nth-child(7) { background: var(--v39-orange); }
    /* schwebendes Mini-Badge */
    .v39-spot-float {
        position: absolute; right: -2%; top: 6%; z-index: 4;
        display: inline-flex; align-items: center; gap: .4rem;
        padding: .45rem .75rem; border-radius: 999px;
        background: var(--v39-paper); border: 1px solid var(--v39-line);
        box-shadow: 0 14px 28px -12px rgba(11,18,32,.3);
        font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--v39-ink);
        font-variant-numeric: tabular-nums;
        animation: v39-float 4.5s ease-in-out infinite;
    }
    .v39-spot-float i { color: #FEBC2E; }
    @keyframes v39-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

    /* ===================== DIE REISE (TIMELINE) ===================== */
    .v39-journey-head { text-align: center; max-width: 56ch; margin: 0 auto clamp(2.5rem, 6vw, 4.5rem); }
    .v39-journey-head .v39-eyebrow { display: inline-flex; }
    .v39-journey-head h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); letter-spacing: -.01em; }
    .v39-journey-head p { margin-top: 1rem; color: var(--v39-ink-soft); }

    .v39-timeline { position: relative; max-width: 980px; margin: 0 auto; }
    /* statische Schiene */
    .v39-rail {
        position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
        width: 3px; background: var(--v39-line); border-radius: 3px;
    }
    /* gefüllte (scroll-progress) Schicht */
    .v39-rail-fill {
        position: absolute; top: 0; left: 0; right: 0; height: 0%;
        background: var(--v39-grad-line); border-radius: 3px;
        transition: height .15s linear;
    }
    /* leuchtender Kopf der Füll-Linie (Komet) */
    .v39-rail-fill::after {
        content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
        width: 12px; height: 12px; border-radius: 50%;
        background: var(--v39-orange);
        box-shadow: 0 0 0 4px rgba(255,93,46,.18), 0 0 14px 2px rgba(255,93,46,.5);
    }

    .v39-station {
        position: relative; display: grid; grid-template-columns: 1fr 1fr;
        margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
        min-height: 1px;
    }
    .v39-station:last-child { margin-bottom: 0; }

    /* Geister-Numeral */
    .v39-ghost {
        position: absolute; top: -1.6rem; font-family: 'Fraunces', serif; font-weight: 700;
        font-size: clamp(4rem, 8vw, 7rem); line-height: 1; color: var(--v39-line);
        z-index: 0; pointer-events: none; font-variant-numeric: tabular-nums;
    }
    .v39-station.left .v39-ghost  { right: 52%; margin-right: 2.5rem; text-align: right; }
    .v39-station.right .v39-ghost { left: 52%; margin-left: 2.5rem; }

    /* Knoten auf der Linie */
    .v39-node {
        position: absolute; top: 1.4rem; left: 50%; transform: translate(-50%,0) scale(1);
        width: 54px; height: 54px; border-radius: 50%;
        background: var(--v39-paper);
        display: grid; place-items: center; z-index: 4;
        box-shadow: 0 0 0 4px var(--v39-bg), 0 8px 18px -8px rgba(11,18,32,.3);
    }
    .v39-node::before {
        content: ""; position: absolute; inset: -3px; border-radius: 50%;
        background: var(--v39-grad); z-index: -1;
    }
    .v39-node-inner {
        position: absolute; inset: 3px; border-radius: 50%; background: var(--v39-paper);
        display: grid; place-items: center; color: var(--v39-blue);
    }
    .v39-node-inner svg { width: 26px; height: 26px; transition: transform .25s var(--v39-ease); }
    .v39-station.accent .v39-node-inner { color: var(--v39-orange); }
    .v39-station.accent .v39-node::before { background: linear-gradient(135deg,#FF7A52,#FF5D2E); }
    /* Knoten reagiert auf Karten-Hover */
    .v39-node { transition: transform .25s var(--v39-ease), box-shadow .25s var(--v39-ease); }
    .v39-card-slot:hover ~ .v39-node,
    .v39-station:hover .v39-node {
        box-shadow: 0 0 0 4px var(--v39-bg), 0 0 0 8px var(--v39-blue-tint), 0 10px 22px -8px rgba(37,99,235,.45);
    }
    .v39-station:hover .v39-node-inner svg { transform: scale(1.1); }
    .v39-station.accent:hover .v39-node {
        box-shadow: 0 0 0 4px var(--v39-bg), 0 0 0 8px var(--v39-orange-tint), 0 10px 22px -8px rgba(255,93,46,.45);
    }

    /* Karte */
    .v39-card-slot { position: relative; z-index: 2; }
    .v39-station.left  .v39-card-slot { grid-column: 1; padding-right: clamp(2.5rem, 5vw, 4.5rem); }
    .v39-station.right .v39-card-slot { grid-column: 2; padding-left: clamp(2.5rem, 5vw, 4.5rem); }

    .v39-card {
        position: relative;
        background: var(--v39-paper); border: 1px solid var(--v39-line); border-radius: 18px;
        padding: clamp(1.4rem, 2.6vw, 1.9rem);
        box-shadow: var(--v39-sh-rest);
        transition: transform .25s var(--v39-ease), box-shadow .25s var(--v39-ease), border-color .25s var(--v39-ease);
    }
    /* Akzentstreifen oben, erscheint bei Hover */
    .v39-card::before {
        content: ""; position: absolute; left: clamp(1.4rem,2.6vw,1.9rem); top: 0; height: 3px;
        width: 0; border-radius: 0 0 3px 3px; background: var(--v39-grad);
        transition: width .3s var(--v39-ease);
    }
    .v39-station.accent .v39-card::before { background: linear-gradient(135deg,#FF7A52,#FF5D2E); }
    .v39-card:hover::before { width: 42px; }
    .v39-card:hover { transform: translateY(-5px); box-shadow: var(--v39-sh-hover); border-color: var(--v39-blue-tint); }
    .v39-station.accent .v39-card:hover { border-color: var(--v39-orange-tint); }
    /* Verbinder Karte → Knoten */
    .v39-station.left  .v39-card::after,
    .v39-station.right .v39-card::after {
        content: ""; position: absolute; top: calc(1.4rem + 5px); width: clamp(2rem,4vw,3.6rem); height: 2px;
        background: linear-gradient(90deg, var(--v39-line), transparent);
        opacity: 0; transition: opacity .3s var(--v39-ease);
    }
    .v39-station.left  .v39-card::after { right: calc(-1 * clamp(2rem,4vw,3.6rem)); background: linear-gradient(270deg, var(--v39-line), transparent); }
    .v39-station.right .v39-card::after { left: calc(-1 * clamp(2rem,4vw,3.6rem)); }
    .v39-station.is-in .v39-card::after { opacity: 1; }

    .v39-badge {
        display: inline-flex; align-items: center; gap: .4rem;
        font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
        padding: .32rem .65rem; border-radius: 999px;
        color: var(--v39-blue-700); background: var(--v39-blue-tint);
        margin-bottom: .85rem;
    }
    .v39-station.accent .v39-badge { color: var(--v39-orange); background: var(--v39-orange-tint); }
    .v39-card h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.01em; }
    .v39-card p { margin: .6rem 0 0; font-size: 1rem; color: var(--v39-ink-soft); max-width: 42ch; }

    .v39-pill {
        display: inline-flex; align-items: center; gap: .4rem;
        margin-top: 1rem; font-size: .82rem; font-weight: 700;
        padding: .4rem .8rem; border-radius: 999px;
        background: var(--v39-bg); border: 1px solid var(--v39-line);
        color: var(--v39-ink); font-variant-numeric: tabular-nums;
    }
    .v39-pill.soft { color: var(--v39-muted); border-style: dashed; }
    .v39-pill i { color: var(--v39-blue); }

    .v39-card-link {
        display: inline-flex; flex-direction: column; gap: .15rem;
        margin-top: 1.2rem;
    }
    .v39-card-link .v39-link-top {
        display: inline-flex; align-items: center; gap: .45rem;
        font-weight: 700; font-size: .95rem; color: var(--v39-blue-700);
    }
    .v39-card-link .v39-arr { transition: transform .2s ease; }
    .v39-card-link:hover .v39-arr { transform: translateX(4px); }
    .v39-card-link .v39-link-sub { font-size: .78rem; color: var(--v39-muted); }

    /* Finaler Ziel-Knoten */
    .v39-finish {
        position: relative; text-align: center; margin-top: clamp(1.5rem, 4vw, 2.5rem);
        z-index: 4;
    }
    .v39-finish-dot {
        width: 22px; height: 22px; border-radius: 50%; margin: 0 auto;
        background: var(--v39-orange);
        box-shadow: 0 0 0 6px var(--v39-bg), 0 0 0 8px var(--v39-orange-tint);
    }

    /* ===================== KENNZAHLEN ===================== */
    .v39-stats-grid {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem);
    }
    .v39-stat-card {
        background: var(--v39-paper); border: 1px solid var(--v39-line); border-radius: 20px;
        padding: clamp(1.4rem, 3vw, 2.1rem); text-align: center;
        box-shadow: var(--v39-sh-rest);
        transition: transform .25s var(--v39-ease), box-shadow .25s var(--v39-ease), border-color .25s var(--v39-ease);
    }
    .v39-stat-card:hover { transform: translateY(-4px); box-shadow: var(--v39-sh-hover); border-color: var(--v39-blue-tint); }
    .v39-ring-wrap { position: relative; width: 112px; height: 112px; margin: 0 auto 1.1rem; }
    /* zarter Schein hinter dem Ring */
    .v39-ring-wrap::before {
        content: ""; position: absolute; inset: 14px; border-radius: 50%;
        background: radial-gradient(circle, rgba(37,99,235,.08), transparent 70%);
    }
    .v39-ring-wrap svg { transform: rotate(-90deg); width: 100%; height: 100%; }
    .v39-ring-bg { fill: none; stroke: var(--v39-line); stroke-width: 9; }
    .v39-ring-fg {
        fill: none; stroke-width: 9; stroke-linecap: round;
        stroke-dasharray: 295.3; stroke-dashoffset: 295.3;
        transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1);
    }
    .v39-ring-ico {
        position: absolute; inset: 0; display: grid; place-items: center;
        color: var(--v39-blue);
    }
    .v39-ring-ico svg { transform: none; width: 30px; height: 30px; }
    .v39-stat-num {
        font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem);
        color: var(--v39-ink); font-variant-numeric: tabular-nums; line-height: 1;
    }
    .v39-stat-label { font-size: .85rem; color: var(--v39-muted); margin-top: .4rem; }

    /* ===================== ÜBER ===================== */
    .v39-about { max-width: 62ch; margin: 0 auto; text-align: center; }
    .v39-about h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.01em; }
    .v39-about p { margin-top: 1.2rem; font-size: 1.06rem; color: var(--v39-ink-soft); }
    .v39-sig {
        position: relative; margin-top: 2rem; display: inline-grid; place-items: center;
        width: 68px; height: 68px; border-radius: 50%;
        background: var(--v39-paper);
        color: var(--v39-blue-700);
        font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.35rem;
        box-shadow: 0 10px 24px -12px rgba(37,99,235,.4);
    }
    .v39-sig::before {
        content: ""; position: absolute; inset: -2px; border-radius: 50%;
        background: var(--v39-grad); z-index: -1;
    }
    .v39-sig::after {
        content: ""; position: absolute; inset: 2px; border-radius: 50%;
        background: var(--v39-paper); z-index: -1;
    }

    /* ===================== KONTAKT CTA ===================== */
    .v39-cta {
        position: relative; overflow: hidden;
        background: var(--v39-grad); border-radius: 28px;
        padding: clamp(2.4rem, 6vw, 4.5rem) clamp(1.4rem, 5vw, 3rem);
        text-align: center; color: #fff;
        box-shadow: 0 30px 70px -28px rgba(37,99,235,.5);
    }
    .v39-cta::before {
        content: ""; position: absolute; inset: 0;
        background:
            radial-gradient(120% 100% at 80% 0%, rgba(255,255,255,.2), transparent 55%),
            radial-gradient(90% 90% at 10% 110%, rgba(255,255,255,.12), transparent 55%);
        pointer-events: none;
    }
    /* schwebende Lichtringe */
    .v39-cta::after {
        content: ""; position: absolute; top: -40px; right: -40px; width: 220px; height: 220px;
        border-radius: 50%; border: 1.5px solid rgba(255,255,255,.18);
        box-shadow: 0 0 0 36px rgba(255,255,255,.06); pointer-events: none;
    }
    .v39-cta h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.015em; position: relative; }
    .v39-cta p { color: rgba(255,255,255,.92); margin: 1rem auto 2rem; max-width: 44ch; position: relative; }
    .v39-cta .v39-btn { position: relative; background: #fff; color: var(--v39-blue-700); }
    .v39-cta .v39-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(0,0,0,.3); }

    /* ===================== REVEAL-STATES (JS) ===================== */
    .v39-root:not(.v39-no-js) .v39-station .v39-node { transform: translate(-50%,0) scale(.35); opacity: 0; transition: transform .6s cubic-bezier(.2,.9,.25,1.5), opacity .4s ease; }
    .v39-root:not(.v39-no-js) .v39-station .v39-card {
        opacity: 0;
        transition: opacity .55s var(--v39-ease) .12s, transform .55s var(--v39-ease) .12s, box-shadow .25s var(--v39-ease), border-color .25s var(--v39-ease);
    }
    /* Karte gleitet aus ihrer Seite herein */
    .v39-root:not(.v39-no-js) .v39-station.left  .v39-card { transform: translate(22px, 14px); }
    .v39-root:not(.v39-no-js) .v39-station.right .v39-card { transform: translate(-22px, 14px); }
    .v39-root:not(.v39-no-js) .v39-station .v39-ghost { opacity: 0; transform: translateY(10px); transition: opacity .7s ease .04s, transform .7s var(--v39-ease) .04s; }
    .v39-root:not(.v39-no-js) .v39-station .v39-badge { opacity: 0; transform: translateY(6px); transition: opacity .5s ease .22s, transform .5s var(--v39-ease) .22s; }
    .v39-root:not(.v39-no-js) .v39-station.is-in .v39-node { transform: translate(-50%,0) scale(1); opacity: 1; }
    .v39-root:not(.v39-no-js) .v39-station.is-in .v39-card { opacity: 1; transform: none; }
    .v39-root:not(.v39-no-js) .v39-station.is-in .v39-ghost { opacity: 1; transform: none; }
    .v39-root:not(.v39-no-js) .v39-station.is-in .v39-badge { opacity: 1; transform: none; }

    .v39-root:not(.v39-no-js) .v39-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--v39-ease), transform .6s var(--v39-ease); }
    .v39-root:not(.v39-no-js) .v39-reveal.is-in { opacity: 1; transform: none; }
    /* gestaffeltes Erscheinen der Stat-Karten */
    .v39-root:not(.v39-no-js) .v39-stat-card:nth-child(2) { transition-delay: .08s; }
    .v39-root:not(.v39-no-js) .v39-stat-card:nth-child(3) { transition-delay: .16s; }
    .v39-root:not(.v39-no-js) .v39-stat-card:nth-child(4) { transition-delay: .24s; }

    /* ===================== RESPONSIVE ===================== */
    @media (max-width: 1023px) {
        .v39-hero-grid { grid-template-columns: 1fr; }
        .v39-orbit-card { margin: 0 auto; max-width: 340px; }
        .v39-spot { grid-template-columns: 1fr; }
        .v39-device { order: -1; }

        .v39-rail { left: 24px; transform: none; }
        .v39-rail-fill { }
        .v39-station { grid-template-columns: 1fr; }
        .v39-node { left: 24px; }
        .v39-station.left .v39-card-slot,
        .v39-station.right .v39-card-slot { grid-column: 1; padding-left: 64px; padding-right: 0; }
        .v39-station.left .v39-ghost,
        .v39-station.right .v39-ghost { left: 64px; right: auto; margin: 0; text-align: left; top: -1.2rem; font-size: clamp(3rem, 12vw, 4.5rem); }
        .v39-station.left .v39-card::after,
        .v39-station.right .v39-card::after { display: none; }
        .v39-finish { text-align: left; padding-left: 24px; }
        .v39-finish-dot { margin: 0; transform: translateX(-50%); margin-left: 11px; }

        .v39-stats-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px) {
        .v39-rail, .v39-node { left: 20px; }
        .v39-node { width: 44px; height: 44px; }
        .v39-node-inner svg { width: 22px; height: 22px; }
        .v39-station.left .v39-card-slot,
        .v39-station.right .v39-card-slot { padding-left: 52px; }
        .v39-station.left .v39-ghost, .v39-station.right .v39-ghost { left: 52px; }
        .v39-hero-cta .v39-btn { flex: 1 1 auto; justify-content: center; }
        .v39-ministat + .v39-ministat { border-left: 0; padding-left: 0; }
    }

    /* ===================== REDUCED MOTION ===================== */
    @media (prefers-reduced-motion: reduce) {
        .v39-root *, .v39-root *::before, .v39-root *::after {
            animation: none !important; transition: none !important;
        }
        .v39-root .v39-station .v39-node,
        .v39-root .v39-station .v39-card,
        .v39-root .v39-station .v39-ghost,
        .v39-root .v39-station .v39-badge,
        .v39-root .v39-reveal { opacity: 1 !important; transform: none !important; }
        .v39-root .v39-station.left .v39-card,
        .v39-root .v39-station.right .v39-card { transform: none !important; }
        .v39-root .v39-station .v39-node { transform: translate(-50%,0) !important; }
        @media (max-width: 1023px) { .v39-root .v39-station .v39-node { transform: none !important; } }
        .v39-rail-fill { height: 100% !important; }
        .v39-ring-fg { transition: none !important; }
    }
</style>

@php
    // Inline-SVG-Mini-Szenen pro Welt (1.5px stroke, currentColor).
    $ic = [
        'ios' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15.5 3.5c-.4 1-1.3 1.9-2.3 1.8-.2-1 .3-2 1-2.6.4-.4 1-.7 1.5-.7.1 .6 0 1.1-.2 1.5z"/><path d="M17.5 16.6c-.5 1.2-1.2 2.4-2.2 2.4-.9 0-1.2-.6-2.3-.6s-1.4.6-2.3.6c-1 0-1.8-1.3-2.3-2.5-1.1-2.6-1.2-5.6.5-7.2.7-.7 1.6-1.1 2.5-1.1.9 0 1.5.6 2.3.6.7 0 1.2-.6 2.4-.6.8 0 1.7.4 2.3 1.2-2 1.1-1.7 4 .1 4.8-.3.8-.6 1.5-1 2.2z"/></svg>',
        'win' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="14" rx="1.5"/><path d="M11 4v14M3 11h18"/><path d="M16.5 21h-9"/></svg>',
        'android' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12a7 7 0 0 1 14 0z"/><path d="M5 12v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5"/><path d="M7 8 5.5 6M17 8l1.5-2"/><circle cx="9.5" cy="9.5" r=".6" fill="currentColor"/><circle cx="14.5" cy="9.5" r=".6" fill="currentColor"/></svg>',
        'web' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 8h18"/><circle cx="5.5" cy="6" r=".5" fill="currentColor"/><circle cx="7.5" cy="6" r=".5" fill="currentColor"/><path d="M14 12.5l2 2-2 2M10 16.5l2-2-2-2"/></svg>',
        'shop' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 7h12l-1 13H7z"/><path d="M9 7a3 3 0 0 1 6 0"/><path d="M12 11v5M9.5 13.5 12 16l2.5-2.5"/></svg>',
        'host' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="16" height="6" rx="1.5"/><rect x="4" y="13" width="16" height="6" rx="1.5"/><circle cx="7.5" cy="7" r=".6" fill="currentColor"/><circle cx="7.5" cy="16" r=".6" fill="currentColor"/><path d="M14 14.5l1.5 1.5 2.5-2.5"/></svg>',
        'news' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 6c-2-1.3-4-1.3-6 0v12c2-1.3 4-1.3 6 0 2-1.3 4-1.3 6 0V6c-2-1.3-4-1.3-6 0z"/><path d="M12 6v12"/><path d="M5 9h3M5 12h3M16 9h3M16 12h3"/></svg>',
        'it' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 6.5a3 3 0 0 0-4 4l-6 6 2 2 6-6a3 3 0 0 0 4-4l-2 2-2-2 2-2z"/><circle cx="6" cy="18" r=".7" fill="currentColor"/></svg>',
        'design' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 8h18"/><path d="m15 12-4 6 6-2z"/><path d="m15 12 2 2"/></svg>',
    ];

    $worlds = [
        ['n'=>'01','side'=>'left','key'=>'ios','badge'=>'Plattform','title'=>'iOS & Mac Apps','text'=>'22 Apps im App Store für iPhone, iPad und Mac — mit regelmäßigen Updates.','pill'=>'22 Apps','pillIco'=>'fa-mobile-screen','url'=>'https://ios.kotsch.tech','dom'=>'ios.kotsch.tech'],
        ['n'=>'02','side'=>'right','key'=>'win','badge'=>'Plattform','title'=>'Windows','text'=>'9 Programme: Cleaner, Commander, Notes, Taskmanager, CodeEditor — als Direkt-Download.','pill'=>'9 Tools','pillIco'=>'fa-window-maximize','url'=>'https://windows.kotsch.tech','dom'=>'windows.kotsch.tech'],
        ['n'=>'03','side'=>'left','key'=>'android','badge'=>'Plattform','title'=>'Android','text'=>'Native Apps für Android — aktuell in Entwicklung.','pill'=>'In Arbeit','pillIco'=>null,'soft'=>true,'url'=>'https://android.kotsch.tech','dom'=>'android.kotsch.tech'],
        ['n'=>'04','side'=>'right','key'=>'web','badge'=>'Werkzeuge','title'=>'Web-Tools','text'=>'734 Tools direkt im Browser — ohne Login, ohne Installation.','pill'=>'734 Tools','pillIco'=>'fa-screwdriver-wrench','url'=>'https://webtools.kotsch.tech','dom'=>'webtools.kotsch.tech'],
        ['n'=>'05','side'=>'left','key'=>'shop','badge'=>'Produkte','title'=>'Shop','text'=>'Digitale Produkte mit Sofort-Download.','pill'=>'Sofort','pillIco'=>'fa-bolt','url'=>'https://shop.kotsch.tech','dom'=>'shop.kotsch.tech'],
        ['n'=>'06','side'=>'right','key'=>'host','badge'=>'Service','title'=>'Hosting','text'=>'Managed Webhosting und vServer/VPS — DSGVO-konform aus Deutschland.','pill'=>'DSGVO','pillIco'=>'fa-shield-halved','url'=>'https://hosting.kotsch.tech','dom'=>'hosting.kotsch.tech'],
        ['n'=>'07','side'=>'left','key'=>'news','badge'=>'Wissen','title'=>'News','text'=>'1.412 Ratgeber und Tutorials rund um Technik.','pill'=>'1.412 Artikel','pillIco'=>'fa-book-open','url'=>'https://news.kotsch.tech','dom'=>'news.kotsch.tech'],
        ['n'=>'08','side'=>'right','key'=>'it','badge'=>'Service','title'=>'IT-Hilfe','text'=>'Vor Ort und per Remote in der Region Glauchau–Lichtenstein. „Keine Lösung = kein Preis."','pill'=>'Region','pillIco'=>'fa-handshake-angle','url'=>'https://it-hilfe.kotsch.tech','dom'=>'it-hilfe.kotsch.tech','accent'=>true],
        ['n'=>'09','side'=>'left','key'=>'design','badge'=>'Studio','title'=>'Webdesign','text'=>'Studio mit 20 Branchen-Demos für maßgeschneiderte Websites.','pill'=>'20 Demos','pillIco'=>'fa-pen-ruler','url'=>'https://webdesign.kotsch.tech','dom'=>'webdesign.kotsch.tech'],
    ];

    // Satelliten-Reihenfolge fürs Hero-Orbit
    $satKeys = ['ios','win','android','web','shop','host','news','it','design'];
@endphp

{{-- ===================== HERO ===================== --}}
<header class="v39-section v39-hero">
    <div class="v39-wrap">
        <div class="v39-hero-grid">
            <div>
                <span class="v39-eyebrow">Arthur Kotsch · Digital Engineering</span>
                <h1 class="v39-h1">Eine Marke.<br><span class="v39-grad-text">Neun Welten.</span></h1>
                <p class="v39-hero-sub">Apps, Tools, Hosting und Hilfe — gebaut und betreut von einem Entwickler aus Lichtenstein, Sachsen.</p>
                <div class="v39-hero-cta">
                    <a href="#v39-journey" class="v39-btn v39-btn-primary">Die Reise beginnen <span class="v39-arr" aria-hidden="true">↓</span></a>
                    <a href="{{ route('kontakt') }}" class="v39-btn v39-btn-ghost">Kontakt</a>
                </div>
                <div class="v39-ministats">
                    <div class="v39-ministat"><b>22</b><span>iOS / Mac-Apps</span></div>
                    <div class="v39-ministat"><b>9</b><span>Windows-Tools</span></div>
                    <div class="v39-ministat"><b>734</b><span>Web-Tools</span></div>
                    <div class="v39-ministat"><b>1.412</b><span>Artikel</span></div>
                </div>
            </div>

            <div>
                <div class="v39-orbit-card" id="v39-orbit" aria-hidden="true">
                    <div class="v39-orbit-stage">
                        <div class="v39-orbit-ring r1"></div>
                        <div class="v39-orbit-ring r2"></div>
                        <div class="v39-core">A</div>
                        @foreach($satKeys as $i => $sk)
                            @php
                                // 5 auf innerem Ring (r=78px Bereich), 4 auf äußerem.
                                $inner = $i < 5;
                                $count = $inner ? 5 : 4;
                                $idx   = $inner ? $i : $i - 5;
                                $radius = $inner ? 78 : 132;
                                $ang = (360 / $count) * $idx - 90;
                                $x = cos(deg2rad($ang)) * $radius;
                                $y = sin(deg2rad($ang)) * $radius;
                            @endphp
                            <div class="v39-sat {{ $sk === 'it' ? 'accent' : '' }}" style="transform: translate({{ round($x) }}px, {{ round($y) }}px);">
                                {!! $ic[$sk] !!}
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="v39-scroll-cue" aria-hidden="true">
            <span>Scrollen</span>
            <span class="v39-chev"><i class="fas fa-chevron-down"></i></span>
        </div>
    </div>
</header>

{{-- ===================== FLAGGSCHIFF SPOTLIGHT ===================== --}}
<section class="v39-section" aria-labelledby="v39-spot-title">
    <div class="v39-wrap">
        <div class="v39-spot v39-reveal">
            <div>
                <span class="v39-eyebrow">Flaggschiff</span>
                <h2 id="v39-spot-title">iOS &amp; Mac Apps</h2>
                <div class="v39-spot-num">22</div>
                <p>Die größte Welt: 22 Apps im App Store für iPhone, iPad und Mac — selbst entwickelt und mit regelmäßigen Updates gepflegt.</p>
                <div class="v39-spot-cta">
                    <a href="https://ios.kotsch.tech" class="v39-btn v39-btn-primary">Im App Store ansehen <span class="v39-arr" aria-hidden="true">→</span></a>
                </div>
            </div>
            <div class="v39-device" aria-hidden="true">
                <div class="v39-spot-float"><i class="fas fa-star"></i> 22 im Store</div>
                <div class="v39-device-mac"><div class="v39-mac-body"></div></div>
                <div class="v39-device-phone">
                    <div class="v39-device-phone-screen">
                        @for($i=0;$i<12;$i++)<div class="v39-app-icon"></div>@endfor
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ===================== DIE REISE — 9 WELTEN ===================== --}}
<section class="v39-section v39-band" id="v39-journey" aria-labelledby="v39-journey-title">
    <div class="v39-wrap">
        <div class="v39-journey-head v39-reveal">
            <span class="v39-eyebrow">Die Reise</span>
            <h2 id="v39-journey-title">Neun Welten, eine durchgehende Linie</h2>
            <p>Von der App über das Tool bis zur Hilfe vor Ort — scroll dich Station für Station durch das, was hier gebaut und betreut wird.</p>
        </div>

        <div class="v39-timeline" id="v39-timeline">
            <div class="v39-rail" aria-hidden="true"><div class="v39-rail-fill" id="v39-rail-fill"></div></div>

            @foreach($worlds as $w)
                <article class="v39-station {{ $w['side'] }} {{ !empty($w['accent']) ? 'accent' : '' }}">
                    <span class="v39-ghost" aria-hidden="true">{{ $w['n'] }}</span>
                    <div class="v39-node" aria-hidden="true">
                        <span class="v39-node-inner">{!! $ic[$w['key']] !!}</span>
                    </div>
                    <div class="v39-card-slot">
                        <div class="v39-card">
                            <span class="v39-badge">{{ $w['badge'] }}</span>
                            <h3>{{ $w['title'] }}</h3>
                            <p>{{ $w['text'] }}</p>
                            <div>
                                <span class="v39-pill {{ !empty($w['soft']) ? 'soft' : '' }}">
                                    @if($w['pillIco'])<i class="fas {{ $w['pillIco'] }}" aria-hidden="true"></i>@endif
                                    {{ $w['pill'] }}
                                </span>
                            </div>
                            <a href="{{ $w['url'] }}" class="v39-card-link" aria-label="{{ $w['title'] }} öffnen — {{ $w['dom'] }}">
                                <span class="v39-link-top">Entdecken <span class="v39-arr" aria-hidden="true">→</span></span>
                                <span class="v39-link-sub">{{ $w['dom'] }}</span>
                            </a>
                        </div>
                    </div>
                </article>
            @endforeach

            <div class="v39-finish" aria-hidden="true">
                <div class="v39-finish-dot"></div>
            </div>
        </div>
    </div>
</section>

{{-- ===================== KENNZAHLEN ===================== --}}
<section class="v39-section" aria-labelledby="v39-stats-title">
    <div class="v39-wrap">
        <div class="v39-journey-head v39-reveal">
            <span class="v39-eyebrow">In Zahlen</span>
            <h2 id="v39-stats-title">Gebaut, nicht behauptet</h2>
        </div>
        <div class="v39-stats-grid">
            @php
                $stats = [
                    ['v'=>22,'suffix'=>'','label'=>'iOS / Mac-Apps','pct'=>72,'ico'=>$ic['ios']],
                    ['v'=>9,'suffix'=>'','label'=>'Windows-Tools','pct'=>60,'ico'=>$ic['win']],
                    ['v'=>734,'suffix'=>'','label'=>'Web-Tools','pct'=>90,'ico'=>$ic['web']],
                    ['v'=>1412,'suffix'=>'','label'=>'Artikel','pct'=>84,'ico'=>$ic['news']],
                ];
            @endphp
            @foreach($stats as $s)
                @php $off = 295.3 - (295.3 * $s['pct'] / 100); @endphp
                <div class="v39-stat-card v39-reveal">
                    <div class="v39-ring-wrap">
                        <svg viewBox="0 0 108 108" aria-hidden="true">
                            <defs>
                                <linearGradient id="v39-rg-{{ $loop->index }}" x1="0" y1="0" x2="1" y2="1">
                                    <stop offset="0%" stop-color="#2563EB"/>
                                    <stop offset="100%" stop-color="#FF5D2E"/>
                                </linearGradient>
                            </defs>
                            <circle class="v39-ring-bg" cx="54" cy="54" r="47"/>
                            <circle class="v39-ring-fg" cx="54" cy="54" r="47"
                                    stroke="url(#v39-rg-{{ $loop->index }})"
                                    data-offset="{{ $off }}"/>
                        </svg>
                        <span class="v39-ring-ico">{!! $s['ico'] !!}</span>
                    </div>
                    <div class="v39-stat-num"><span class="v39-count" data-target="{{ $s['v'] }}">{{ number_format($s['v'], 0, ',', '.') }}</span></div>
                    <div class="v39-stat-label">{{ $s['label'] }}</div>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ===================== ÜBER ===================== --}}
<section class="v39-section v39-band" aria-labelledby="v39-about-title">
    <div class="v39-wrap">
        <div class="v39-about v39-reveal">
            <span class="v39-eyebrow" style="justify-content:center;">Über</span>
            <h2 id="v39-about-title">Ein Entwickler, viele Werkzeuge.</h2>
            <p>Hinter KOTSCH.TECH steht Arthur Kotsch — Student der Digital Engineering aus Lichtenstein in Sachsen. Was hier entsteht, ist kein Baukasten von der Stange.</p>
            <p>Von der iOS-App über die 734 Web-Tools bis zum DSGVO-konformen Hosting wird alles selbst gebaut, gepflegt und betreut. Eine Marke, neun Welten, eine Handschrift.</p>
            <div class="v39-sig" aria-hidden="true">AK</div>
        </div>
    </div>
</section>

{{-- ===================== KONTAKT CTA ===================== --}}
<section class="v39-section" aria-labelledby="v39-cta-title">
    <div class="v39-wrap">
        <div class="v39-cta v39-reveal">
            <h2 id="v39-cta-title">Ein Projekt im Kopf?</h2>
            <p>Schreib mir — oder hol dir Hilfe vor Ort. Vom ersten Konzept bis zur laufenden Betreuung.</p>
            <a href="{{ route('kontakt') }}" class="v39-btn">Kontakt aufnehmen <span class="v39-arr" aria-hidden="true">→</span></a>
        </div>
    </div>
</section>

<script>
(function () {
    var root = document.querySelector('.v39-root');
    if (!root) return;
    root.classList.remove('v39-no-js');

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

    // ---- IntersectionObserver: Reveals (Stationen + .v39-reveal) ----
    var revealEls = root.querySelectorAll('.v39-station, .v39-reveal');
    if (reduce) {
        revealEls.forEach(function (el) { el.classList.add('is-in'); });
        fillRings();
        finishCounts();
    } else if ('IntersectionObserver' in window) {
        var io = new IntersectionObserver(function (entries) {
            entries.forEach(function (e) {
                if (!e.isIntersecting) return;
                e.target.classList.add('is-in');
                if (e.target.matches('.v39-stat-card')) animateCard(e.target);
                io.unobserve(e.target);
            });
        }, { threshold: 0.18, rootMargin: '0px 0px -8% 0px' });
        revealEls.forEach(function (el) { io.observe(el); });
    } else {
        revealEls.forEach(function (el) { el.classList.add('is-in'); });
        fillRings(); finishCounts();
    }

    // ---- Count-up + Ring pro Stat-Karte ----
    function animateCard(card) {
        var ring = card.querySelector('.v39-ring-fg');
        if (ring) ring.style.strokeDashoffset = ring.getAttribute('data-offset');
        var num = card.querySelector('.v39-count');
        if (num) countUp(num);
    }
    function countUp(el) {
        var target = parseInt(el.getAttribute('data-target'), 10) || 0;
        var dur = 1300, start = performance.now();
        function frame(now) {
            var p = Math.min(1, (now - start) / dur);
            var eased = 1 - Math.pow(1 - p, 3);
            el.textContent = fmt(Math.round(target * eased));
            if (p < 1) requestAnimationFrame(frame);
            else el.textContent = fmt(target);
        }
        requestAnimationFrame(frame);
    }
    function fmt(n) { return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.'); }
    function fillRings() {
        root.querySelectorAll('.v39-ring-fg').forEach(function (r) { r.style.strokeDashoffset = r.getAttribute('data-offset'); });
    }
    function finishCounts() {
        root.querySelectorAll('.v39-count').forEach(function (el) { el.textContent = fmt(parseInt(el.getAttribute('data-target'), 10) || 0); });
    }

    // ---- Scroll-Progress: Linien-Füllung ----
    var timeline = document.getElementById('v39-timeline');
    var fill = document.getElementById('v39-rail-fill');
    if (timeline && fill) {
        if (reduce) {
            fill.style.height = '100%';
        } else {
            var ticking = false;
            function updateFill() {
                ticking = false;
                var rect = timeline.getBoundingClientRect();
                var vh = window.innerHeight || document.documentElement.clientHeight;
                var anchor = vh * 0.55;
                var total = rect.height;
                var passed = anchor - rect.top;
                var pct = Math.max(0, Math.min(1, passed / total));
                fill.style.height = (pct * 100) + '%';
            }
            window.addEventListener('scroll', function () {
                if (!ticking) { requestAnimationFrame(updateFill); ticking = true; }
            }, { passive: true });
            window.addEventListener('resize', updateFill, { passive: true });
            updateFill();
        }
    }

    // ---- Hero-Orbit Tilt (deaktiviert bei reduced-motion / touch) ----
    var orbit = document.getElementById('v39-orbit');
    var canHover = window.matchMedia && window.matchMedia('(hover: hover)').matches;
    if (orbit && !reduce && canHover) {
        var rx = 0, ry = 0, trx = 0, try_ = 0, raf = null;
        function loop() {
            rx += (trx - rx) * 0.12; ry += (try_ - ry) * 0.12;
            orbit.style.transform = 'perspective(800px) rotateX(' + ry.toFixed(2) + 'deg) rotateY(' + rx.toFixed(2) + 'deg)';
            if (Math.abs(trx - rx) > 0.05 || Math.abs(try_ - ry) > 0.05) raf = requestAnimationFrame(loop);
            else raf = null;
        }
        orbit.addEventListener('mousemove', function (e) {
            var r = orbit.getBoundingClientRect();
            var px = (e.clientX - r.left) / r.width - 0.5;
            var py = (e.clientY - r.top) / r.height - 0.5;
            trx = Math.max(-6, Math.min(6, px * 12));
            try_ = Math.max(-6, Math.min(6, -py * 12));
            if (!raf) raf = requestAnimationFrame(loop);
        });
        orbit.addEventListener('mouseleave', function () {
            trx = 0; try_ = 0;
            if (!raf) raf = requestAnimationFrame(loop);
        });
    }
})();
</script>
</div>
@endsection