@extends('layouts.app')

@section('title', 'Interaktiver Showroom — Neun Welten Software | Arthur Kotsch · KOTSCH.TECH')
@section('meta_description', 'Arthur Kotsch — Student Digital Engineering & Entwickler aus Lichtenstein (Sachsen). iOS- & Mac-Apps, Windows-Tools, Web-Tools, Shop, Hosting, News, IT-Hilfe und Webdesign in einem interaktiven Showroom.')

@section('content')
<style>
    /* ===== Demo #32 — Interaktiver Showroom (Präfix v32-) ===== */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

    .v32-wrap {
        --v32-ink: #0F172A;
        --v32-body: #475569;
        --v32-meta: #64748B;
        --v32-blue: #2563EB;
        --v32-blue-h: #1D4ED8;
        --v32-blue-tint: #EFF4FF;
        --v32-blue-soft: #DCE7FF;
        --v32-orange: #FF5D2E;
        --v32-orange-h: #EA4A1C;
        --v32-orange-tint: #FFF1EC;
        --v32-page: #FFFFFF;
        --v32-stage: #F7FAFE;
        --v32-card: #FFFFFF;
        --v32-line: #E8EDF4;
        --v32-line-2: #DCE3EE;
        --v32-grad: linear-gradient(100deg, #2563EB, #FF5D2E);
        --v32-grad-soft: linear-gradient(135deg, #2563EB 0%, #5B8DEF 45%, #FF5D2E 100%);
        --v32-sh-1: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px -4px rgba(15,23,42,.06);
        --v32-sh-2: 0 28px 70px -34px rgba(37,99,235,.42), 0 6px 22px -16px rgba(15,23,42,.18);
        --v32-sh-glow: 0 0 0 1px rgba(37,99,235,.06), 0 22px 60px -30px rgba(37,99,235,.5);
        position: relative;
        background: var(--v32-page);
        color: var(--v32-body);
        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
        font-size: 1.05rem;
        line-height: 1.7;
        font-feature-settings: "ss01", "cv11";
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }
    .v32-wrap *, .v32-wrap *::before, .v32-wrap *::after { box-sizing: border-box; }
    .v32-wrap :focus-visible { outline: 2px solid var(--v32-blue); outline-offset: 3px; border-radius: 8px; }
    .v32-shell { max-width: 1200px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2rem); }
    .v32-sec { padding-block: clamp(64px, 9vw, 130px); }

    .v32-eyebrow {
        display: inline-flex; align-items: center; gap: .6rem;
        font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
        font-weight: 800; color: var(--v32-blue); margin: 0 0 1.1rem;
    }
    .v32-eyebrow::before {
        content: ""; width: 26px; height: 2px; border-radius: 2px;
        background: var(--v32-grad);
    }
    .v32-h2 {
        font-size: clamp(1.9rem, 3.6vw, 2.95rem); line-height: 1.04;
        letter-spacing: -.035em; font-weight: 800; color: var(--v32-ink); margin: 0 0 1rem;
    }
    .v32-lead { max-width: 62ch; font-size: 1.08rem; color: var(--v32-body); }

    /* ---------- Reveals (choreographed / staggered) ---------- */
    .v32-rev {
        opacity: 0; transform: translateY(26px);
        transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
        transition-delay: var(--v32-d, 0ms);
        will-change: opacity, transform;
    }
    .v32-rev.in { opacity: 1; transform: none; }

    /* ===================== HERO ===================== */
    .v32-hero {
        position: relative; overflow: clip;
        background:
            radial-gradient(120% 90% at 88% -12%, var(--v32-blue-tint), transparent 56%),
            radial-gradient(90% 80% at -6% 112%, var(--v32-orange-tint), transparent 52%);
    }
    /* dotted grid texture */
    .v32-hero::before {
        content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
        background-image: radial-gradient(circle, rgba(37,99,235,.14) 1px, transparent 1.4px);
        background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(90% 70% at 70% 30%, #000, transparent 78%);
        mask-image: radial-gradient(90% 70% at 70% 30%, #000, transparent 78%);
    }
    .v32-hero-grid {
        position: relative; z-index: 1;
        display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem);
        align-items: center;
    }
    .v32-hero-badge {
        display: inline-flex; align-items: center; gap: .5rem;
        font-size: .76rem; font-weight: 700; color: var(--v32-blue);
        background: rgba(255,255,255,.7); backdrop-filter: blur(6px);
        border: 1px solid var(--v32-blue-soft); border-radius: 999px;
        padding: .4rem .85rem .4rem .55rem; margin-bottom: 1.2rem;
        box-shadow: var(--v32-sh-1);
    }
    .v32-hero-badge .v32-dot {
        width: 8px; height: 8px; border-radius: 50%; background: var(--v32-orange);
        box-shadow: 0 0 0 0 rgba(255,93,46,.5); animation: v32-pulse 2.4s ease-out infinite;
    }
    @keyframes v32-pulse {
        0% { box-shadow: 0 0 0 0 rgba(255,93,46,.5); }
        70%,100% { box-shadow: 0 0 0 8px rgba(255,93,46,0); }
    }
    .v32-h1 {
        font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.0; letter-spacing: -.04em;
        font-weight: 800; color: var(--v32-ink); margin: .2rem 0 1.3rem;
    }
    .v32-h1 .v32-grad {
        background: var(--v32-grad); -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
        -webkit-box-decoration-break: clone; box-decoration-break: clone;
    }
    .v32-hero-sub { max-width: 50ch; font-size: 1.13rem; margin: 0 0 2rem; }
    .v32-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; }
    .v32-btn {
        position: relative; overflow: hidden;
        display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
        font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none;
        padding: .95rem 1.7rem; border-radius: 14px; border: 1px solid transparent;
        transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background .25s ease, color .25s ease, border-color .25s ease;
    }
    .v32-btn .v32-arr { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
    .v32-btn-primary { background: var(--v32-blue); color: #fff; box-shadow: 0 16px 32px -16px var(--v32-blue); }
    .v32-btn-primary::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
        transform: translateX(-120%); transition: transform .65s cubic-bezier(.2,.7,.2,1);
    }
    .v32-btn-primary:hover { background: var(--v32-blue-h); transform: translateY(-3px); box-shadow: 0 22px 38px -16px var(--v32-blue); }
    .v32-btn-primary:hover::after { transform: translateX(120%); }
    .v32-btn-primary:hover .v32-arr { transform: translateX(5px); }
    .v32-btn-primary:active { transform: translateY(-1px); }
    .v32-btn-ghost { background: rgba(255,255,255,.85); color: var(--v32-ink); border-color: var(--v32-line-2); box-shadow: var(--v32-sh-1); backdrop-filter: blur(6px); }
    .v32-btn-ghost:hover { border-color: var(--v32-blue); color: var(--v32-blue); transform: translateY(-3px); box-shadow: var(--v32-sh-1), 0 14px 30px -18px var(--v32-blue); }
    .v32-btn-ghost:active { transform: translateY(-1px); }

    /* Konstellation */
    .v32-constel-wrap { position: relative; }
    .v32-constel { width: 100%; height: auto; max-width: 540px; margin-inline: auto; display: block; overflow: visible; }
    .v32-constel .v32-orbit { animation: v32-spin 60s linear infinite; transform-box: view-box; transform-origin: 220px 220px; }
    .v32-constel .v32-orbit.rev { animation-duration: 84s; animation-direction: reverse; }
    .v32-constel .v32-node { transform-box: fill-box; transform-origin: center; animation: v32-breathe 7s ease-in-out infinite; }
    .v32-constel .v32-node:hover { animation-play-state: paused; }
    .v32-constel .v32-link { stroke-dasharray: 4 7; animation: v32-dash 9s linear infinite; }
    .v32-constel .v32-spark { animation: v32-spark 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
    .v32-constel .v32-core { transform-box: view-box; transform-origin: 220px 220px; animation: v32-corepulse 6s ease-in-out infinite; }
    @keyframes v32-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    @keyframes v32-dash { to { stroke-dashoffset: -66; } }
    @keyframes v32-spin { to { transform: rotate(360deg); } }
    @keyframes v32-spark { 0%,100% { opacity: .15; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.15); } }
    @keyframes v32-corepulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

    /* ===================== KENNZAHLEN ===================== */
    .v32-stats { background: var(--v32-stage); border-block: 1px solid var(--v32-line); }
    .v32-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 1.6rem); }
    .v32-stat {
        position: relative; background: var(--v32-card); border: 1px solid var(--v32-line);
        border-radius: 20px; padding: 1.6rem 1.4rem; box-shadow: var(--v32-sh-1);
        display: flex; align-items: center; gap: 1rem; overflow: hidden;
        transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
    }
    .v32-stat::before {
        content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
        background: var(--v32-grad); opacity: 0; transition: opacity .3s ease;
    }
    .v32-stat:hover { transform: translateY(-4px); box-shadow: var(--v32-sh-1), 0 18px 40px -26px rgba(37,99,235,.5); border-color: var(--v32-line-2); }
    .v32-stat:hover::before { opacity: 1; }
    .v32-ring { width: 60px; height: 60px; flex: none; }
    .v32-ring-track { fill: none; stroke: var(--v32-line); stroke-width: 6; }
    .v32-ring-bar {
        fill: none; stroke: url(#v32-ringgrad); stroke-width: 6; stroke-linecap: round;
        stroke-dasharray: 163; stroke-dashoffset: 163; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1);
        transform: rotate(-90deg); transform-origin: center;
    }
    .v32-stat:nth-child(3) .v32-ring-bar { stroke: var(--v32-orange); }
    .v32-stat-num { font-size: 2.05rem; font-weight: 800; color: var(--v32-ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
    .v32-stat-lbl { font-size: .82rem; color: var(--v32-meta); margin-top: .35rem; font-weight: 500; }

    /* ===================== FLAGGSCHIFF ===================== */
    .v32-flag {
        position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem);
        align-items: center; background: var(--v32-card); border: 1px solid var(--v32-line);
        border-radius: 28px; padding: clamp(1.8rem, 4vw, 3.2rem); box-shadow: var(--v32-sh-2);
        overflow: hidden;
    }
    .v32-flag::before {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background:
            radial-gradient(80% 120% at 100% 0%, var(--v32-blue-tint), transparent 56%),
            radial-gradient(60% 100% at -5% 120%, var(--v32-orange-tint), transparent 50%);
    }
    .v32-flag::after {
        content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4;
        background-image: radial-gradient(circle, rgba(37,99,235,.1) 1px, transparent 1.4px);
        background-size: 22px 22px;
        -webkit-mask-image: linear-gradient(100deg, #000, transparent 60%);
        mask-image: linear-gradient(100deg, #000, transparent 60%);
    }
    .v32-flag > * { position: relative; z-index: 1; }
    .v32-flag-tag {
        display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 800;
        text-transform: uppercase; letter-spacing: .16em; color: var(--v32-orange);
        background: var(--v32-orange-tint); border-radius: 999px; padding: .35rem .8rem; margin-bottom: 1.1rem;
    }
    .v32-flag-big { font-size: clamp(3rem, 8vw, 5rem); font-weight: 800; letter-spacing: -.045em; line-height: .9; font-variant-numeric: tabular-nums;
        background: var(--v32-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
    .v32-flag h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em; color: var(--v32-ink); margin: .5rem 0 .7rem; font-weight: 800; }
    .v32-flag p { max-width: 50ch; }
    .v32-flag .v32-btn { margin-top: 1.5rem; }
    .v32-flag-vis { display: flex; justify-content: center; }
    .v32-flag-vis svg { width: 100%; max-width: 360px; height: auto; overflow: visible; }
    .v32-flag-vis .v32-chip { transform-box: fill-box; transform-origin: center; animation: v32-float 6s ease-in-out infinite; }
    .v32-flag-vis .v32-chip:nth-of-type(2) { animation-delay: .9s; }
    .v32-flag-vis .v32-chip:nth-of-type(3) { animation-delay: 1.8s; }
    @keyframes v32-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

    /* ===================== BÜHNE ===================== */
    .v32-stage-sec { position: relative; background: var(--v32-stage); border-block: 1px solid var(--v32-line); overflow: clip; }
    .v32-stage-sec::before {
        content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
        background-image: radial-gradient(circle, rgba(15,23,42,.05) 1px, transparent 1.4px);
        background-size: 28px 28px;
        -webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 80%);
        mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 80%);
    }
    .v32-stage-sec .v32-shell { position: relative; z-index: 1; }
    .v32-stage-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(2rem, 5vw, 3.5rem); }
    .v32-stage-head .v32-lead { margin-inline: auto; }
    .v32-stage-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(1.2rem, 3vw, 2rem); }

    /* World list */
    .v32-list { display: flex; flex-direction: column; gap: .55rem; }
    .v32-wbtn {
        position: relative; display: flex; align-items: center; gap: .85rem; text-align: left;
        width: 100%; cursor: pointer; font: inherit;
        background: var(--v32-card); border: 1px solid var(--v32-line); border-radius: 16px;
        padding: .85rem 1rem .85rem 1.15rem; color: var(--v32-body);
        transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .25s ease, background .25s ease;
    }
    .v32-wbtn::before {
        content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 4px; border-radius: 4px;
        background: var(--v32-grad); opacity: 0; transform: scaleY(.4); transform-origin: center;
        transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
    }
    .v32-wbtn:hover { transform: translateX(3px); box-shadow: var(--v32-sh-1); border-color: color-mix(in srgb, var(--v32-blue) 32%, var(--v32-line)); }
    .v32-wbtn[aria-selected="true"] {
        background: #fff; box-shadow: 0 14px 34px -18px rgba(37,99,235,.5);
        border-color: color-mix(in srgb, var(--v32-blue) 38%, var(--v32-line));
    }
    .v32-wbtn[aria-selected="true"]::before { opacity: 1; transform: scaleY(1); }
    .v32-wbtn[aria-selected="true"] .v32-wtitle { color: var(--v32-ink); }
    .v32-wglyph {
        position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
        background: var(--v32-blue-tint); color: var(--v32-blue); font-size: 1.02rem;
        transition: background .3s ease, color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
    }
    .v32-wbtn:hover .v32-wglyph { transform: scale(1.06) rotate(-3deg); }
    .v32-wbtn[aria-selected="true"] .v32-wglyph { background: var(--v32-grad); color: #fff; box-shadow: 0 8px 18px -8px var(--v32-blue); }
    .v32-wmeta-wrap { min-width: 0; }
    .v32-wtitle { font-weight: 700; color: var(--v32-body); letter-spacing: -.01em; font-size: .98rem; }
    .v32-wmini { font-size: .76rem; color: var(--v32-meta); font-weight: 500; }
    .v32-wbtn .v32-wchev {
        margin-left: auto; flex: none; color: var(--v32-meta); font-size: .8rem; opacity: 0;
        transform: translateX(-4px); transition: opacity .3s ease, transform .3s ease, color .3s ease;
    }
    .v32-wbtn[aria-selected="true"] .v32-wchev { opacity: 1; transform: none; color: var(--v32-blue); }

    /* Preview */
    .v32-preview-shell { perspective: 1100px; }
    .v32-preview {
        position: relative; min-height: 480px; background: var(--v32-card);
        border: 1px solid var(--v32-line); border-radius: 26px; padding: clamp(1.6rem, 4vw, 2.8rem);
        box-shadow: var(--v32-sh-2); overflow: hidden;
        transition: transform .25s ease;
        transform-style: preserve-3d;
    }
    .v32-preview::after {
        content: ""; position: absolute; right: -70px; top: -70px; width: 280px; height: 280px;
        border-radius: 50%; background: radial-gradient(circle, var(--v32-blue-tint), transparent 70%);
        pointer-events: none; opacity: .85;
    }
    .v32-preview::before {
        content: ""; position: absolute; left: -60px; bottom: -60px; width: 220px; height: 220px;
        border-radius: 50%; background: radial-gradient(circle, var(--v32-orange-tint), transparent 70%);
        pointer-events: none; opacity: .7;
    }
    .v32-pv-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: center; min-height: 380px; transform: translateZ(40px); }
    .v32-pv-content.swap { opacity: 0; transform: translateZ(40px) translateY(10px); }
    .v32-pv-content { transition: opacity .3s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.2,.7,.2,1); }
    .v32-pv-count { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--v32-blue); font-variant-numeric: tabular-nums; }
    .v32-pv-h3 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.03em; font-weight: 800; color: var(--v32-ink); margin: .55rem 0 .8rem; line-height: 1.05; }
    .v32-pv-desc { max-width: 46ch; }
    .v32-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1.6rem; }
    .v32-pill {
        display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700;
        padding: .42rem .85rem; border-radius: 999px; background: var(--v32-blue-tint); color: var(--v32-blue);
        border: 1px solid color-mix(in srgb, var(--v32-blue) 14%, transparent);
    }
    .v32-pill.v32-orange { background: var(--v32-orange-tint); color: var(--v32-orange); border-color: color-mix(in srgb, var(--v32-orange) 16%, transparent); }
    .v32-pv-scene { display: flex; justify-content: center; }
    .v32-pv-scene svg { width: 100%; max-width: 320px; height: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(37,99,235,.12)); }
    .v32-pv-scene .v32-glyph { opacity: 0; transition: opacity .45s ease .08s, transform .45s cubic-bezier(.2,.7,.2,1) .08s; transform: translateY(10px) scale(.97); }
    .v32-pv-content:not(.swap) .v32-glyph { opacity: 1; transform: none; }

    /* ===================== ÜBER ===================== */
    .v32-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
    .v32-quote {
        position: relative; background: var(--v32-stage); border: 1px solid var(--v32-line);
        border-left: 4px solid var(--v32-orange); border-radius: 18px; padding: 2rem 1.9rem 1.6rem;
        font-size: 1.28rem; font-weight: 700; color: var(--v32-ink); letter-spacing: -.02em; line-height: 1.42;
        box-shadow: var(--v32-sh-1);
    }
    .v32-quote::before {
        content: "\201C"; position: absolute; top: -.2rem; left: 1.2rem;
        font-size: 4rem; line-height: 1; font-weight: 800; color: var(--v32-orange); opacity: .22;
    }
    .v32-quote .v32-q-sub { display: block; font-size: .85rem; font-weight: 600; color: var(--v32-meta); margin-top: .9rem; letter-spacing: 0; line-height: 1.5; }

    /* ===================== KONTAKT-CTA ===================== */
    .v32-contact-band {
        position: relative; border-radius: 30px; padding: 3px; background: var(--v32-grad);
        box-shadow: var(--v32-sh-2);
    }
    .v32-contact-inner {
        position: relative; overflow: hidden;
        background: var(--v32-card); border-radius: 27px; padding: clamp(2.2rem, 5vw, 3.6rem);
        text-align: center;
    }
    .v32-contact-inner::before {
        content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
        background:
            radial-gradient(60% 90% at 0% 0%, var(--v32-blue-tint), transparent 55%),
            radial-gradient(60% 90% at 100% 100%, var(--v32-orange-tint), transparent 55%);
    }
    .v32-contact-inner > * { position: relative; z-index: 1; }
    .v32-contact-inner h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -.03em; color: var(--v32-ink); margin: 0 0 .8rem; font-weight: 800; }
    .v32-contact-inner p { max-width: 50ch; margin: 0 auto 1.8rem; }

    /* ===================== RESPONSIVE ===================== */
    @media (max-width: 1023px) {
        .v32-hero-grid { grid-template-columns: 1fr; text-align: left; }
        .v32-constel { max-width: 400px; margin-top: 1rem; }
        .v32-flag { grid-template-columns: 1fr; }
        .v32-stage-grid { grid-template-columns: 1fr; }
        .v32-list {
            flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory;
            padding-bottom: .5rem; gap: .6rem; -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }
        .v32-wbtn { flex: 0 0 auto; min-width: 210px; scroll-snap-align: start; }
        .v32-wbtn .v32-wchev { display: none; }
        .v32-preview { transform: none !important; }
        .v32-pv-content, .v32-pv-content.swap { transform: none; }
        .v32-pv-content.swap { transform: translateY(10px); }
        .v32-about-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 639px) {
        .v32-stat-grid { grid-template-columns: 1fr 1fr; }
        .v32-pv-content { grid-template-columns: 1fr; text-align: left; min-height: 0; }
        .v32-pv-scene svg { max-width: 240px; }
        .v32-btn { width: 100%; justify-content: center; }
        .v32-cta-row { width: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
        .v32-wrap *, .v32-wrap *::before, .v32-wrap *::after {
            animation: none !important; transition: opacity .2s ease !important;
        }
        .v32-rev { opacity: 1 !important; transform: none !important; }
        .v32-preview { transform: none !important; }
        .v32-pv-content, .v32-glyph { transform: none !important; }
        .v32-btn-primary::after { display: none; }
    }
</style>

<div class="v32-wrap">

    <!-- ============ HERO ============ -->
    <section class="v32-sec v32-hero">
        <div class="v32-shell">
            <div class="v32-hero-grid">
                <div class="v32-rev in">
                    <span class="v32-hero-badge"><span class="v32-dot" aria-hidden="true"></span> Lichtenstein · Sachsen</span>
                    <span class="v32-eyebrow">Arthur Kotsch · Digital Engineering</span>
                    <h1 class="v32-h1">Eine Person.<br><span class="v32-grad">Neun Welten</span> Software.</h1>
                    <p class="v32-hero-sub">Student Digital Engineering &amp; Entwickler aus Lichtenstein in Sachsen — von iOS-Apps über 734 Web-Tools bis zur IT-Hilfe vor Ort.</p>
                    <div class="v32-cta-row">
                        <a href="#v32-stage" class="v32-btn v32-btn-primary">Welten erkunden <span class="v32-arr" aria-hidden="true">→</span></a>
                        <a href="/kontakt" class="v32-btn v32-btn-ghost"><i class="fa-regular fa-envelope" aria-hidden="true"></i> Kontakt</a>
                    </div>
                </div>
                <div class="v32-rev in v32-constel-wrap" aria-hidden="true">
                    <!-- Konstellation der Welten -->
                    <svg class="v32-constel" viewBox="0 0 440 440" role="img" aria-label="Konstellation aus neun Software-Welten um das Monogramm A K">
                        <defs>
                            <linearGradient id="v32-g" x1="0" y1="0" x2="1" y2="1">
                                <stop offset="0" stop-color="#2563EB"/><stop offset="1" stop-color="#FF5D2E"/>
                            </linearGradient>
                            <radialGradient id="v32-glow" cx="50%" cy="50%" r="50%">
                                <stop offset="0" stop-color="#2563EB" stop-opacity=".22"/>
                                <stop offset="1" stop-color="#2563EB" stop-opacity="0"/>
                            </radialGradient>
                            <radialGradient id="v32-corefill" cx="38%" cy="32%" r="80%">
                                <stop offset="0" stop-color="#5B8DEF"/>
                                <stop offset="55%" stop-color="#2563EB"/>
                                <stop offset="100%" stop-color="#FF5D2E"/>
                            </radialGradient>
                            <filter id="v32-soft" x="-30%" y="-30%" width="160%" height="160%">
                                <feDropShadow dx="0" dy="6" stdDeviation="7" flood-color="#2563EB" flood-opacity=".18"/>
                            </filter>
                        </defs>

                        <!-- ambient glow -->
                        <circle cx="220" cy="220" r="200" fill="url(#v32-glow)"/>

                        <!-- orbit rings -->
                        <g class="v32-orbit" fill="none" stroke="#DCE7FF" stroke-width="1.2">
                            <circle cx="220" cy="220" r="150" stroke-dasharray="2 9" opacity=".8"/>
                        </g>
                        <g class="v32-orbit rev" fill="none" stroke="#FFD9CC" stroke-width="1.2">
                            <circle cx="220" cy="220" r="186" stroke-dasharray="2 12" opacity=".55"/>
                        </g>

                        <!-- links -->
                        <g stroke="url(#v32-g)" stroke-width="1.4" opacity=".5">
                            <line class="v32-link" x1="220" y1="220" x2="220" y2="70"/>
                            <line class="v32-link" x1="220" y1="220" x2="326" y2="114"/>
                            <line class="v32-link" x1="220" y1="220" x2="370" y2="220"/>
                            <line class="v32-link" x1="220" y1="220" x2="326" y2="326"/>
                            <line class="v32-link" x1="220" y1="220" x2="220" y2="370"/>
                            <line class="v32-link" x1="220" y1="220" x2="114" y2="326"/>
                            <line class="v32-link" x1="220" y1="220" x2="70" y2="220"/>
                            <line class="v32-link" x1="220" y1="220" x2="114" y2="114"/>
                            <line class="v32-link" x1="220" y1="220" x2="160" y2="58"/>
                        </g>

                        <!-- twinkle sparks -->
                        <g fill="#2563EB">
                            <circle class="v32-spark" cx="290" cy="64" r="2.4" style="animation-delay:0s"/>
                            <circle class="v32-spark" cx="392" cy="160" r="2" style="animation-delay:1.1s" fill="#FF5D2E"/>
                            <circle class="v32-spark" cx="66" cy="300" r="2.2" style="animation-delay:2.2s"/>
                            <circle class="v32-spark" cx="158" cy="392" r="2" style="animation-delay:3.3s" fill="#FF5D2E"/>
                            <circle class="v32-spark" cx="380" cy="300" r="2.2" style="animation-delay:1.7s"/>
                        </g>

                        <!-- outer nodes -->
                        <g fill="#fff" stroke="#E8EDF4" filter="url(#v32-soft)">
                            <g class="v32-node" style="animation-delay:0s"><circle cx="220" cy="70" r="24" stroke-width="1.4"/><rect x="211" y="61" width="18" height="18" rx="5" fill="none" stroke="#2563EB" stroke-width="2"/></g>
                            <g class="v32-node" style="animation-delay:.7s"><circle cx="326" cy="114" r="24" stroke-width="1.4"/><rect x="316" y="105" width="20" height="16" rx="2" fill="none" stroke="#2563EB" stroke-width="2"/><line x1="316" y1="110" x2="336" y2="110" stroke="#2563EB" stroke-width="2"/></g>
                            <g class="v32-node" style="animation-delay:1.4s"><circle cx="370" cy="220" r="24" stroke-width="1.4"/><rect x="361" y="212" width="18" height="14" rx="4" fill="none" stroke="#FF5D2E" stroke-width="2"/><line x1="365" y1="206" x2="368" y2="212" stroke="#FF5D2E" stroke-width="2"/><line x1="375" y1="206" x2="372" y2="212" stroke="#FF5D2E" stroke-width="2"/></g>
                            <g class="v32-node" style="animation-delay:2.1s"><circle cx="326" cy="326" r="24" stroke-width="1.4"/><path d="M318 332 l8 -8 8 8" fill="none" stroke="#2563EB" stroke-width="2" stroke-linecap="round"/><circle cx="326" cy="320" r="3" fill="#2563EB"/></g>
                            <g class="v32-node" style="animation-delay:2.8s"><circle cx="220" cy="370" r="24" stroke-width="1.4"/><path d="M212 366 h16 v8 h-16z" fill="none" stroke="#2563EB" stroke-width="2"/><path d="M216 366 v-3 a4 4 0 0 1 8 0 v3" fill="none" stroke="#2563EB" stroke-width="2"/></g>
                            <g class="v32-node" style="animation-delay:3.5s"><circle cx="114" cy="326" r="24" stroke-width="1.4"/><rect x="105" y="318" width="18" height="6" rx="2" fill="none" stroke="#2563EB" stroke-width="2"/><rect x="105" y="326" width="18" height="6" rx="2" fill="none" stroke="#2563EB" stroke-width="2"/></g>
                            <g class="v32-node" style="animation-delay:4.2s"><circle cx="70" cy="220" r="24" stroke-width="1.4"/><rect x="62" y="211" width="16" height="18" rx="2" fill="none" stroke="#FF5D2E" stroke-width="2"/><line x1="65" y1="216" x2="75" y2="216" stroke="#FF5D2E" stroke-width="2"/></g>
                            <g class="v32-node" style="animation-delay:4.9s"><circle cx="114" cy="114" r="24" stroke-width="1.4"/><path d="M114 106 a8 8 0 1 0 .01 0 M114 114 v6" fill="none" stroke="#FF5D2E" stroke-width="2"/></g>
                            <g class="v32-node" style="animation-delay:5.6s"><circle cx="160" cy="58" r="22" stroke-width="1.4"/><rect x="151" y="50" width="18" height="16" rx="3" fill="none" stroke="#2563EB" stroke-width="2"/><line x1="160" y1="50" x2="160" y2="66" stroke="#2563EB" stroke-width="2"/></g>
                        </g>

                        <!-- center monogram -->
                        <g class="v32-core">
                            <circle cx="220" cy="220" r="52" fill="#fff" opacity=".55"/>
                            <circle cx="220" cy="220" r="46" fill="url(#v32-corefill)" filter="url(#v32-soft)"/>
                            <circle cx="220" cy="220" r="46" fill="none" stroke="#fff" stroke-opacity=".35" stroke-width="1.5"/>
                            <text x="220" y="232" text-anchor="middle" font-family="Inter, sans-serif" font-weight="800" font-size="30" fill="#fff" letter-spacing="-1">AK</text>
                        </g>
                    </svg>
                </div>
            </div>
        </div>
    </section>

    <!-- ============ KENNZAHLEN ============ -->
    <section class="v32-sec v32-stats">
        <div class="v32-shell">
            <svg width="0" height="0" aria-hidden="true" style="position:absolute">
                <defs>
                    <linearGradient id="v32-ringgrad" x1="0" y1="0" x2="1" y2="1">
                        <stop offset="0" stop-color="#2563EB"/><stop offset="1" stop-color="#5B8DEF"/>
                    </linearGradient>
                </defs>
            </svg>
            <div class="v32-stat-grid">
                @php
                    $stats = [
                        ['n'=>22,'suffix'=>'','lbl'=>'iOS- &amp; Mac-Apps','pct'=>62],
                        ['n'=>9,'suffix'=>'','lbl'=>'Windows-Tools','pct'=>40],
                        ['n'=>734,'suffix'=>'','lbl'=>'Web-Tools','pct'=>92],
                        ['n'=>1412,'suffix'=>'','lbl'=>'Artikel','pct'=>80],
                    ];
                @endphp
                @foreach($stats as $i => $s)
                <div class="v32-stat v32-rev" style="--v32-d: {{ $i * 90 }}ms">
                    <svg class="v32-ring" viewBox="0 0 60 60" aria-hidden="true">
                        <circle class="v32-ring-track" cx="30" cy="30" r="26"/>
                        <circle class="v32-ring-bar" cx="30" cy="30" r="26" data-pct="{{ $s['pct'] }}"/>
                    </svg>
                    <div>
                        <div class="v32-stat-num" data-count="{{ $s['n'] }}">0</div>
                        <div class="v32-stat-lbl">{!! $s['lbl'] !!}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- ============ FLAGGSCHIFF ============ -->
    <section class="v32-sec">
        <div class="v32-shell">
            <div class="v32-flag v32-rev">
                <div>
                    <span class="v32-flag-tag"><i class="fa-solid fa-star" aria-hidden="true"></i> Flaggschiff</span>
                    <div class="v32-flag-big" data-count="734">0</div>
                    <h3>Web-Tools direkt im Browser</h3>
                    <p>Rechner, Konverter, Generatoren und Helfer — 734 Tools ohne Login und ohne Installation. Einfach öffnen und loslegen.</p>
                    <a href="https://webtools.kotsch.tech" class="v32-btn v32-btn-primary">Zu den Web-Tools <span class="v32-arr" aria-hidden="true">→</span></a>
                </div>
                <div class="v32-flag-vis" aria-hidden="true">
                    <svg viewBox="0 0 300 240" role="img" aria-label="Gestapelte Tool-Chips mit Schieberegler und Zahnrad">
                        <g class="v32-chip">
                            <rect x="40" y="40" width="220" height="52" rx="14" fill="#fff" stroke="#E8EDF4" stroke-width="2" filter="url(#v32-flagsh)"/>
                            <rect x="56" y="56" width="20" height="20" rx="6" fill="#EFF4FF"/>
                            <circle cx="66" cy="66" r="5" fill="none" stroke="#2563EB" stroke-width="2"/>
                            <line x1="90" y1="60" x2="190" y2="60" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/>
                            <line x1="90" y1="60" x2="150" y2="60" stroke="#2563EB" stroke-width="3" stroke-linecap="round"/>
                            <line x1="90" y1="72" x2="160" y2="72" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/>
                            <circle cx="150" cy="60" r="7" fill="#fff" stroke="#2563EB" stroke-width="3"/>
                        </g>
                        <g class="v32-chip">
                            <rect x="40" y="100" width="220" height="52" rx="14" fill="#fff" stroke="#E8EDF4" stroke-width="2" filter="url(#v32-flagsh)"/>
                            <rect x="56" y="116" width="20" height="20" rx="6" fill="#FFF1EC"/>
                            <path d="M66 116 v8 m0 4 v0 M62 122 h8" stroke="#FF5D2E" stroke-width="2" stroke-linecap="round"/>
                            <line x1="90" y1="120" x2="220" y2="120" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/>
                            <line x1="90" y1="132" x2="180" y2="132" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/>
                        </g>
                        <g class="v32-chip">
                            <rect x="40" y="160" width="220" height="52" rx="14" fill="#fff" stroke="#E8EDF4" stroke-width="2" filter="url(#v32-flagsh)"/>
                            <rect x="56" y="176" width="20" height="20" rx="6" fill="#EFF4FF"/>
                            <g transform="translate(66 186)" fill="none" stroke="#2563EB" stroke-width="2">
                                <circle r="5"/><path d="M0 -8 v3 M0 8 v-3 M8 0 h-3 M-8 0 h3"/>
                            </g>
                            <line x1="90" y1="180" x2="200" y2="180" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/>
                            <line x1="90" y1="192" x2="150" y2="192" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/>
                        </g>
                        <defs>
                            <filter id="v32-flagsh" x="-20%" y="-20%" width="140%" height="160%">
                                <feDropShadow dx="0" dy="6" stdDeviation="6" flood-color="#2563EB" flood-opacity=".12"/>
                            </filter>
                        </defs>
                    </svg>
                </div>
            </div>
        </div>
    </section>

    <!-- ============ BÜHNE — 9 WELTEN ============ -->
    <section class="v32-sec v32-stage-sec" id="v32-stage">
        <div class="v32-shell">
            <div class="v32-stage-head v32-rev">
                <span class="v32-eyebrow" style="justify-content:center;">Die Bühne</span>
                <h2 class="v32-h2">Neun Welten, interaktiv</h2>
                <p class="v32-lead">Wähle eine Welt aus der Liste — die Vorschau wechselt Inhalt, Szene und Link. Mit Pfeiltasten navigierbar.</p>
            </div>

            <div class="v32-stage-grid v32-rev" style="--v32-d: 120ms">
                <!-- Welt-Liste -->
                <div class="v32-list" role="tablist" aria-label="Neun Welten" aria-orientation="vertical" id="v32-list"></div>

                <!-- Vorschau -->
                <div class="v32-preview-shell">
                    <div class="v32-preview" id="v32-preview" role="tabpanel" aria-live="polite">
                        <div class="v32-pv-content" id="v32-pvc">
                            <div>
                                <div class="v32-pv-count" id="v32-pv-count">01 / 09</div>
                                <h3 class="v32-pv-h3" id="v32-pv-title"></h3>
                                <p class="v32-pv-desc" id="v32-pv-desc"></p>
                                <div class="v32-pills" id="v32-pv-pills"></div>
                                <a class="v32-btn v32-btn-primary" id="v32-pv-cta" href="#">Öffnen <span class="v32-arr" aria-hidden="true">→</span></a>
                            </div>
                            <div class="v32-pv-scene" id="v32-pv-scene" aria-hidden="true"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ============ ÜBER ============ -->
    <section class="v32-sec">
        <div class="v32-shell">
            <div class="v32-about-grid">
                <div class="v32-rev">
                    <span class="v32-eyebrow">Über</span>
                    <h2 class="v32-h2">Eine Hand, viele Werkzeuge.</h2>
                    <p class="v32-lead">Ich bin Arthur Kotsch, Student im Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Von nativen Apps über Web-Tools bis zur IT-Hilfe vor Ort baue und betreue ich alles selbst — pragmatisch, verständlich und nah an den Menschen in der Region.</p>
                </div>
                <div class="v32-rev" style="--v32-d: 110ms">
                    <div class="v32-quote">
                        „Keine Lösung = kein Preis.“
                        <span class="v32-q-sub">Haltung bei der IT-Hilfe in der Region Glauchau–Lichtenstein</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ============ KONTAKT-CTA ============ -->
    <section class="v32-sec" style="padding-top:0;">
        <div class="v32-shell">
            <div class="v32-contact-band v32-rev">
                <div class="v32-contact-inner">
                    <h2>Ein Projekt im Kopf?</h2>
                    <p>Ob App, Web-Tool, Hosting oder IT-Hilfe vor Ort — schreib mir, und wir finden den passenden Weg.</p>
                    <a href="/kontakt" class="v32-btn v32-btn-primary">Kontakt aufnehmen <span class="v32-arr" aria-hidden="true">→</span></a>
                </div>
            </div>
        </div>
    </section>

</div>

<script>
(function () {
    var root = document.querySelector('.v32-wrap');
    if (!root) return;
    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    /* ---------- Daten der 9 Welten ---------- */
    var scene = {
        ios: '<svg viewBox="0 0 240 240"><rect x="40" y="20" width="160" height="200" rx="26" fill="#fff" stroke="#E8EDF4" stroke-width="2"/><rect x="40" y="20" width="160" height="34" rx="26" fill="#EFF4FF"/><g class="v32-glyph" fill="none" stroke="#2563EB" stroke-width="2.4"><rect x="64" y="74" width="34" height="34" rx="9"/><rect x="110" y="74" width="34" height="34" rx="9"/><rect x="156" y="74" width="20" height="34" rx="7"/><rect x="64" y="120" width="34" height="34" rx="9"/><rect x="110" y="120" width="34" height="34" rx="9"/><rect x="156" y="120" width="20" height="34" rx="7"/></g><circle cx="120" cy="186" r="9" fill="#FF5D2E"/></svg>',
        windows: '<svg viewBox="0 0 240 240"><rect x="34" y="44" width="172" height="120" rx="12" fill="#fff" stroke="#E8EDF4" stroke-width="2"/><rect x="34" y="44" width="172" height="22" rx="12" fill="#EFF4FF"/><circle cx="48" cy="55" r="3" fill="#FF5D2E"/><circle cx="58" cy="55" r="3" fill="#94A3B8"/><g class="v32-glyph" fill="none" stroke="#2563EB" stroke-width="2.4"><path d="M60 100 h60 M60 116 h40 M60 132 h70"/><rect x="138" y="92" width="48" height="48" rx="8"/><path d="M150 116 h24 M162 104 v24"/></g><rect x="96" y="178" width="48" height="8" rx="4" fill="#E8EDF4"/></svg>',
        android: '<svg viewBox="0 0 240 240"><rect x="60" y="78" width="120" height="100" rx="22" fill="#fff" stroke="#E8EDF4" stroke-width="2"/><g class="v32-glyph" fill="none" stroke="#FF5D2E" stroke-width="2.6" stroke-linecap="round"><line x1="78" y1="60" x2="92" y2="78"/><line x1="162" y1="60" x2="148" y2="78"/><circle cx="100" cy="118" r="4" fill="#FF5D2E" stroke="none"/><circle cx="140" cy="118" r="4" fill="#FF5D2E" stroke="none"/></g><rect x="78" y="150" width="84" height="6" rx="3" fill="#E8EDF4"/><path d="M120 180 v18" stroke="#94A3B8" stroke-width="2" stroke-dasharray="4 5"/></svg>',
        webtools: '<svg viewBox="0 0 240 240"><rect x="30" y="50" width="180" height="40" rx="12" fill="#fff" stroke="#E8EDF4" stroke-width="2"/><rect x="30" y="100" width="180" height="40" rx="12" fill="#fff" stroke="#E8EDF4" stroke-width="2"/><rect x="30" y="150" width="180" height="40" rx="12" fill="#fff" stroke="#E8EDF4" stroke-width="2"/><g class="v32-glyph"><circle cx="60" cy="70" r="7" fill="#2563EB"/><line x1="80" y1="70" x2="190" y2="70" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/><g transform="translate(60 120)" fill="none" stroke="#FF5D2E" stroke-width="2.4"><circle r="6"/><path d="M0 -10 v4 M0 10 v-4 M10 0 h-4 M-10 0 h4"/></g><line x1="80" y1="120" x2="170" y2="120" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/><rect x="53" y="163" width="14" height="14" rx="4" fill="#EFF4FF"/><line x1="80" y1="170" x2="180" y2="170" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/></g></svg>',
        shop: '<svg viewBox="0 0 240 240"><path d="M70 80 h100 l12 110 a8 8 0 0 1 -8 9 H66 a8 8 0 0 1 -8 -9 Z" fill="#fff" stroke="#E8EDF4" stroke-width="2"/><path d="M92 88 v-12 a28 28 0 0 1 56 0 v12" fill="none" stroke="#2563EB" stroke-width="2.6"/><g class="v32-glyph"><circle cx="120" cy="140" r="22" fill="#EFF4FF"/><path d="M110 140 l7 8 14 -16" fill="none" stroke="#FF5D2E" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>',
        hosting: '<svg viewBox="0 0 240 240"><g class="v32-glyph"><rect x="60" y="60" width="120" height="36" rx="8" fill="#fff" stroke="#E8EDF4" stroke-width="2"/><rect x="60" y="104" width="120" height="36" rx="8" fill="#fff" stroke="#E8EDF4" stroke-width="2"/><rect x="60" y="148" width="120" height="36" rx="8" fill="#fff" stroke="#E8EDF4" stroke-width="2"/><circle cx="76" cy="78" r="4" fill="#FF5D2E"/><circle cx="76" cy="122" r="4" fill="#2563EB"/><circle cx="76" cy="166" r="4" fill="#2563EB"/><line x1="96" y1="78" x2="160" y2="78" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/><line x1="96" y1="122" x2="150" y2="122" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/><line x1="96" y1="166" x2="160" y2="166" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/></g></svg>',
        news: '<svg viewBox="0 0 240 240"><rect x="56" y="44" width="128" height="156" rx="12" fill="#fff" stroke="#E8EDF4" stroke-width="2"/><g class="v32-glyph"><rect x="74" y="64" width="92" height="34" rx="6" fill="#EFF4FF"/><line x1="74" y1="116" x2="166" y2="116" stroke="#2563EB" stroke-width="3" stroke-linecap="round"/><line x1="74" y1="132" x2="150" y2="132" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/><line x1="74" y1="148" x2="166" y2="148" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/><line x1="74" y1="164" x2="140" y2="164" stroke="#E8EDF4" stroke-width="3" stroke-linecap="round"/></g></svg>',
        ithilfe: '<svg viewBox="0 0 240 240"><g class="v32-glyph"><path d="M120 50 C80 50 60 84 60 116 c0 44 60 74 60 74 s60 -30 60 -74 c0 -32 -20 -66 -60 -66 Z" fill="#fff" stroke="#FF5D2E" stroke-width="2.4"/><circle cx="120" cy="112" r="22" fill="#FFF1EC"/><circle cx="120" cy="112" r="9" fill="none" stroke="#FF5D2E" stroke-width="2.6"/><path d="M120 92 v-8 M120 140 v-8 M100 112 h-8 M148 112 h-8" stroke="#FF5D2E" stroke-width="2.6" stroke-linecap="round"/></g></svg>',
        webdesign: '<svg viewBox="0 0 240 240"><rect x="40" y="50" width="160" height="140" rx="14" fill="#fff" stroke="#E8EDF4" stroke-width="2"/><rect x="40" y="50" width="160" height="24" rx="14" fill="#EFF4FF"/><circle cx="56" cy="62" r="3" fill="#FF5D2E"/><circle cx="66" cy="62" r="3" fill="#2563EB"/><g class="v32-glyph"><rect x="58" y="90" width="60" height="40" rx="8" fill="#EFF4FF"/><rect x="130" y="90" width="52" height="18" rx="6" fill="none" stroke="#2563EB" stroke-width="2.2"/><rect x="130" y="114" width="52" height="16" rx="6" fill="none" stroke="#E8EDF4" stroke-width="2.2"/><rect x="58" y="142" width="124" height="14" rx="6" fill="none" stroke="#E8EDF4" stroke-width="2.2"/><rect x="58" y="164" width="80" height="14" rx="6" fill="none" stroke="#E8EDF4" stroke-width="2.2"/></g></svg>'
    };

    var worlds = [
        { key:'ios', glyph:'fa-solid fa-mobile-screen-button', title:'iOS &amp; Mac Apps', mini:'22 Apps', desc:'22 Apps für iPhone, iPad &amp; Mac — mit regelmäßigen Updates.', pills:[['22 Apps',0]], url:'https://ios.kotsch.tech' },
        { key:'windows', glyph:'fa-brands fa-windows', title:'Windows', mini:'9 Tools', desc:'9 schlanke Programme: Cleaner, Commander, Notes, Taskmanager, CodeEditor — Direkt-Download.', pills:[['9 Tools',0]], url:'https://windows.kotsch.tech' },
        { key:'android', glyph:'fa-brands fa-android', title:'Android', mini:'in Arbeit', desc:'Native Apps — aktuell in Entwicklung.', pills:[['In Arbeit',1]], url:'https://android.kotsch.tech' },
        { key:'webtools', glyph:'fa-solid fa-toolbox', title:'Web-Tools', mini:'734 Tools', desc:'734 Tools direkt im Browser — ohne Login, ohne Installation.', pills:[['734 Tools',0]], url:'https://webtools.kotsch.tech' },
        { key:'shop', glyph:'fa-solid fa-bag-shopping', title:'Shop', mini:'Sofort', desc:'Digitale Produkte mit Sofort-Download.', pills:[['Sofort-Download',0]], url:'https://shop.kotsch.tech' },
        { key:'hosting', glyph:'fa-solid fa-server', title:'Hosting', mini:'DSGVO', desc:'Managed Webhosting &amp; vServer/VPS — DSGVO-konform.', pills:[['DSGVO-konform',0]], url:'https://hosting.kotsch.tech' },
        { key:'news', glyph:'fa-solid fa-newspaper', title:'News', mini:'1.412', desc:'1.412 Ratgeber &amp; Tutorials rund um Technik.', pills:[['1.412 Artikel',0]], url:'https://news.kotsch.tech' },
        { key:'ithilfe', glyph:'fa-solid fa-location-dot', title:'IT-Hilfe', mini:'Region', desc:'Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein. Keine Lösung = kein Preis.', pills:[['Region',1],['Vor Ort &amp; Remote',1]], url:'https://it-hilfe.kotsch.tech' },
        { key:'webdesign', glyph:'fa-solid fa-table-cells-large', title:'Webdesign', mini:'20 Demos', desc:'Studio mit 20 Branchen-Demos.', pills:[['20 Demos',0]], url:'https://webdesign.kotsch.tech' }
    ];

    /* ---------- Build list ---------- */
    var list = document.getElementById('v32-list');
    worlds.forEach(function (w, i) {
        var b = document.createElement('button');
        b.className = 'v32-wbtn';
        b.type = 'button';
        b.setAttribute('role', 'tab');
        b.setAttribute('aria-selected', i === 0 ? 'true' : 'false');
        b.setAttribute('tabindex', i === 0 ? '0' : '-1');
        b.dataset.idx = i;
        b.innerHTML = '<span class="v32-wglyph"><i class="' + w.glyph + '" aria-hidden="true"></i></span>' +
            '<span class="v32-wmeta-wrap"><span class="v32-wtitle">' + w.title + '</span>' +
            '<span class="v32-wmini">' + w.mini + '</span></span>' +
            '<i class="fa-solid fa-chevron-right v32-wchev" aria-hidden="true"></i>';
        list.appendChild(b);
    });
    var btns = Array.prototype.slice.call(list.querySelectorAll('.v32-wbtn'));

    var pvc = document.getElementById('v32-pvc');
    var elCount = document.getElementById('v32-pv-count');
    var elTitle = document.getElementById('v32-pv-title');
    var elDesc = document.getElementById('v32-pv-desc');
    var elPills = document.getElementById('v32-pv-pills');
    var elCta = document.getElementById('v32-pv-cta');
    var elScene = document.getElementById('v32-pv-scene');
    var current = 0, auto = null, interacted = false;

    function pad(n) { return (n < 10 ? '0' : '') + n; }

    function render(i) {
        var w = worlds[i];
        elCount.textContent = pad(i + 1) + ' / 09';
        elTitle.innerHTML = w.title;
        elDesc.innerHTML = w.desc;
        elCta.href = w.url;
        elScene.innerHTML = scene[w.key] || '';
        elPills.innerHTML = w.pills.map(function (p) {
            return '<span class="v32-pill' + (p[1] ? ' v32-orange' : '') + '">' + p[0] + '</span>';
        }).join('');
    }

    function select(i, focus) {
        if (i === current) return;
        btns.forEach(function (b, k) {
            b.setAttribute('aria-selected', k === i ? 'true' : 'false');
            b.setAttribute('tabindex', k === i ? '0' : '-1');
        });
        current = i;
        if (reduce) { render(i); }
        else {
            pvc.classList.add('swap');
            window.setTimeout(function () {
                render(i);
                requestAnimationFrame(function () { pvc.classList.remove('swap'); });
            }, 130);
        }
        if (focus) btns[i].focus();
    }

    function stopAuto() {
        if (interacted) return;
        interacted = true;
        if (auto) { clearInterval(auto); auto = null; }
    }

    btns.forEach(function (b) {
        b.addEventListener('click', function () { stopAuto(); select(+b.dataset.idx); });
        b.addEventListener('keydown', function (e) {
            var i = current;
            if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { e.preventDefault(); stopAuto(); select((i + 1) % worlds.length, true); }
            else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') { e.preventDefault(); stopAuto(); select((i - 1 + worlds.length) % worlds.length, true); }
            else if (e.key === 'Home') { e.preventDefault(); stopAuto(); select(0, true); }
            else if (e.key === 'End') { e.preventDefault(); stopAuto(); select(worlds.length - 1, true); }
        });
    });

    render(0);

    /* ---------- Auto-advance (stops on interaction) ---------- */
    if (!reduce) {
        auto = setInterval(function () {
            if (interacted) return;
            select((current + 1) % worlds.length);
        }, 6000);
    }

    /* ---------- Tilt (desktop, non-touch, non-reduced) ---------- */
    var preview = document.getElementById('v32-preview');
    var canTilt = !reduce && window.matchMedia('(hover: hover) and (pointer: fine)').matches && window.innerWidth >= 1024;
    if (canTilt && preview) {
        var tx = 0, ty = 0, cx = 0, cy = 0, raf = null;
        function loop() {
            cx += (tx - cx) * 0.12; cy += (ty - cy) * 0.12;
            preview.style.transform = 'perspective(1000px) rotateX(' + cy.toFixed(2) + 'deg) rotateY(' + tx.toFixed(2) + 'deg)';
            if (Math.abs(tx - cx) > 0.01 || Math.abs(ty - cy) > 0.01) raf = requestAnimationFrame(loop);
            else raf = null;
        }
        preview.addEventListener('mousemove', function (e) {
            var r = preview.getBoundingClientRect();
            tx = ((e.clientX - r.left) / r.width - 0.5) * 9;
            ty = -((e.clientY - r.top) / r.height - 0.5) * 9;
            if (!raf) raf = requestAnimationFrame(loop);
        });
        preview.addEventListener('mouseleave', function () {
            tx = 0; ty = 0; if (!raf) raf = requestAnimationFrame(loop);
        });
    }

    /* ---------- Subtle parallax on hero constellation ---------- */
    var constel = root.querySelector('.v32-constel');
    if (!reduce && constel && window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
        var hero = root.querySelector('.v32-hero'), praf = null, px = 0, py = 0;
        hero.addEventListener('mousemove', function (e) {
            var r = hero.getBoundingClientRect();
            px = ((e.clientX - r.left) / r.width - 0.5) * 14;
            py = ((e.clientY - r.top) / r.height - 0.5) * 14;
            if (!praf) praf = requestAnimationFrame(function () {
                constel.style.transform = 'translate(' + px.toFixed(1) + 'px,' + py.toFixed(1) + 'px)';
                praf = null;
            });
        });
        hero.addEventListener('mouseleave', function () { constel.style.transform = ''; });
        constel.style.transition = 'transform .5s cubic-bezier(.2,.7,.2,1)';
    }

    /* ---------- Count-up + rings + reveals ---------- */
    function animateCount(el) {
        var target = +el.dataset.count, dur = 1000, start = null;
        function step(ts) {
            if (!start) start = ts;
            var p = Math.min((ts - start) / dur, 1);
            var e = 1 - Math.pow(1 - p, 3);
            var val = Math.round(target * e);
            el.textContent = target >= 1000 ? val.toLocaleString('de-DE') : val;
            if (p < 1) requestAnimationFrame(step);
            else el.textContent = target >= 1000 ? target.toLocaleString('de-DE') : target;
        }
        if (reduce) { el.textContent = target >= 1000 ? target.toLocaleString('de-DE') : target; }
        else requestAnimationFrame(step);
    }

    var io = new IntersectionObserver(function (entries) {
        entries.forEach(function (en) {
            if (!en.isIntersecting) return;
            var t = en.target;
            t.classList.add('in');
            t.querySelectorAll('[data-count]').forEach(animateCount);
            t.querySelectorAll('.v32-ring-bar').forEach(function (r) {
                var pct = +r.dataset.pct, len = 163;
                r.style.strokeDashoffset = (len - len * pct / 100);
            });
            io.unobserve(t);
        });
    }, { threshold: 0.18 });

    root.querySelectorAll('.v32-rev').forEach(function (el) {
        if (el.classList.contains('in')) {
            el.querySelectorAll('[data-count]').forEach(animateCount);
        } else io.observe(el);
    });
})();
</script>
@endsection