@extends('layouts.app')

@section('title', 'Editorial Flagship — Demo 40 | KOTSCH.TECH')
@section('meta_description', 'Demo 40: Editorial Flagship Startseiten-Konzept für KOTSCH.TECH — Magazin-Bühne mit sticky Welt-Index, handgesetzten SVG-Glyphen und den 9 Welten von Arthur Kotsch.')

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

    /* ============================================================
       KOTSCH.TECH — Demo 40: EDITORIAL FLAGSHIP + STICKY WORLD-INDEX
       Zweispaltige Magazin-Bühne: links die redaktionelle Geschichte,
       rechts ein mitlaufender, scroll-synchroner Welt-Index.
       Print trifft Tech-Atelier. Großzügige Serif-Typo, viel Weißraum,
       präzise Hairlines. Header/Footer vom Layout bleiben sichtbar.
       Alle Selektoren mit v40- präfixiert. KEIN nav/footer/main-Reset.
       ============================================================ */

    .v40-root {
        --v40-paper:      #FBFAF7;
        --v40-paper-2:    #F4F2ED;
        --v40-ink:        #16181D;
        --v40-ink-soft:   #5B606B;
        --v40-hair:       #E4E0D8;
        --v40-blue:       var(--primary, #2563eb);
        --v40-blue-dk:    #1E4FD0;
        --v40-blue-tint:  #EAF0FF;
        --v40-orange:     var(--accent-2, #FF5D2E);
        --v40-orange-tint:#FFEDE6;
        --v40-shadow:     0 1px 2px rgba(20,24,29,.04), 0 12px 40px -16px rgba(20,24,29,.12);
        --v40-shadow-hi:  0 2px 4px rgba(20,24,29,.06), 0 26px 60px -22px rgba(20,24,29,.22);
        --v40-serif: "Fraunces", "Source Serif 4", Georgia, serif;
        --v40-sans:  "Inter", system-ui, -apple-system, sans-serif;
        --v40-ease:  cubic-bezier(.16,.84,.44,1);
        --v40-sec:   clamp(5rem, 10vw, 9rem);

        font-family: var(--v40-sans);
        color: var(--v40-ink);
        background:
            radial-gradient(120% 80% at 100% -5%, color-mix(in srgb, var(--v40-blue-tint) 50%, transparent) 0%, transparent 45%),
            radial-gradient(90% 70% at -10% 100%, var(--v40-orange-tint) 0%, transparent 40%),
            var(--v40-paper);
        line-height: 1.7;
        position: relative;
        overflow: clip;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    }
    .v40-root *, .v40-root *::before, .v40-root *::after { box-sizing: border-box; }

    /* Feine Papier-Faserung über der ganzen Bühne (sehr dezent) */
    .v40-root::before {
        content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
        opacity: .5; mix-blend-mode: multiply;
        background-image:
            radial-gradient(rgba(20,24,29,.018) 1px, transparent 1px),
            radial-gradient(rgba(20,24,29,.012) 1px, transparent 1px);
        background-size: 7px 7px, 11px 11px;
        background-position: 0 0, 3px 4px;
    }
    .v40-wrap { position: relative; z-index: 1; }

    .v40-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.4rem); }

    /* ---- Typo-Bausteine ---- */
    .v40-kicker {
        font-family: var(--v40-sans); font-size: .72rem; font-weight: 600;
        letter-spacing: .18em; text-transform: uppercase; color: var(--v40-blue);
        display: inline-flex; align-items: center; gap: .55rem; margin: 0;
    }
    .v40-kicker::before {
        content: ""; width: 1.6rem; height: 1px;
        background: linear-gradient(90deg, var(--v40-blue), var(--v40-orange));
        transform-origin: left; animation: v40-hair-grow .9s var(--v40-ease) both;
    }
    @keyframes v40-hair-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
    .v40-serif { font-family: var(--v40-serif); font-feature-settings: "kern" 1, "liga" 1, "swsh" 1; }

    /* ---- Choreografierte Hero-Reveals (settled) ---- */
    .v40-reveal { opacity: 0; transform: translateY(14px); }
    .v40-root.v40-ready .v40-reveal {
        opacity: 1; transform: none;
        transition: opacity .8s var(--v40-ease), transform .8s var(--v40-ease);
        transition-delay: var(--v40-rd, 0s);
    }

    /* ============================================================
       GRID-GERÜST: Story 1fr | Index 300px (ab 1080px)
       ============================================================ */
    .v40-stage {
        display: grid; grid-template-columns: 1fr;
        gap: clamp(2rem, 5vw, 4rem);
        padding-block: clamp(2.5rem, 6vw, 4.5rem);
    }
    @media (min-width: 1080px) {
        .v40-stage { grid-template-columns: minmax(0,1fr) 300px; align-items: start; }
    }
    .v40-story { min-width: 0; }

    /* ============================================================
       A. HERO (zweispaltig innerhalb der Story-Spalte)
       ============================================================ */
    .v40-hero {
        display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem);
        align-items: center;
        padding-bottom: clamp(3rem, 7vw, 5rem);
        border-bottom: 1px solid var(--v40-hair);
    }
    @media (min-width: 720px) {
        .v40-hero { grid-template-columns: 1.05fr .95fr; }
    }
    .v40-hero-h1 {
        font-family: var(--v40-serif); font-weight: 600;
        font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: 1.0;
        letter-spacing: -.025em; margin: 1.1rem 0 0; color: var(--v40-ink);
        text-wrap: balance;
    }
    .v40-hero-h1 em {
        font-style: italic; font-weight: 500;
        background: linear-gradient(115deg, var(--v40-blue-dk) 0%, var(--v40-blue) 45%, var(--v40-orange) 110%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: var(--v40-blue-dk);
        position: relative;
    }
    /* handgezogene Unterstreichung unter dem Kursiv-Wort */
    .v40-hero-h1 em::after {
        content: ""; position: absolute; left: .02em; right: .02em; bottom: -.02em; height: .09em;
        background: linear-gradient(90deg, var(--v40-blue), var(--v40-orange));
        border-radius: 2px; transform: scaleX(0); transform-origin: left;
        opacity: .55;
    }
    .v40-root.v40-ready .v40-hero-h1 em::after {
        transform: scaleX(1);
        transition: transform 1.1s var(--v40-ease) .55s;
    }
    .v40-hero-sub {
        font-size: 1.05rem; color: var(--v40-ink-soft);
        max-width: 46ch; margin: 1.3rem 0 0;
    }
    .v40-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
    .v40-btn {
        display: inline-flex; align-items: center; gap: .55rem;
        padding: .85rem 1.5rem; border-radius: 980px; font-weight: 600;
        font-size: .95rem; text-decoration: none; cursor: pointer;
        border: 1px solid transparent; transition: transform .25s var(--v40-ease), box-shadow .25s var(--v40-ease), background .25s var(--v40-ease);
        min-height: 44px;
    }
    .v40-btn-primary {
        color: #fff; background: linear-gradient(135deg, var(--v40-blue), var(--v40-orange));
        box-shadow: 0 14px 30px -12px var(--v40-orange);
    }
    .v40-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px var(--v40-orange); }
    .v40-btn-ghost {
        color: var(--v40-ink); background: var(--v40-paper); border-color: var(--v40-hair);
    }
    .v40-btn-ghost:hover { transform: translateY(-2px); border-color: var(--v40-blue); color: var(--v40-blue); }
    .v40-btn .v40-arrow { transition: transform .25s var(--v40-ease); }
    .v40-btn:hover .v40-arrow { transform: translateX(4px); }

    .v40-inline-stats {
        display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; margin-top: 2.4rem;
        padding-top: 1.6rem; border-top: 1px solid var(--v40-hair);
    }
    .v40-istat { display: flex; flex-direction: column; position: relative; padding-left: .9rem; }
    .v40-istat::before {
        content: ""; position: absolute; left: 0; top: .15rem; bottom: .15rem; width: 2px; border-radius: 2px;
        background: linear-gradient(180deg, var(--v40-blue), var(--v40-orange)); opacity: .4;
        transition: opacity .3s var(--v40-ease), transform .3s var(--v40-ease); transform-origin: top;
    }
    .v40-istat:hover::before { opacity: 1; transform: scaleY(1.06); }
    .v40-istat b {
        font-family: var(--v40-serif); font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--v40-ink);
        font-variant-numeric: tabular-nums; letter-spacing: -.01em;
    }
    .v40-istat span { font-size: .7rem; letter-spacing: .06em; color: var(--v40-ink-soft); margin-top: .4rem; text-transform: uppercase; }

    /* ---- Hero Werkverzeichnis-Diagramm ---- */
    .v40-diagram { position: relative; will-change: transform; }
    .v40-diagram::before {
        /* weicher Lichtschein hinter dem Werkverzeichnis */
        content: ""; position: absolute; inset: -8% -4% -8% 2%; z-index: 0;
        background: radial-gradient(60% 70% at 78% 50%, var(--v40-blue-tint) 0%, transparent 62%);
        opacity: .9; filter: blur(2px); pointer-events: none;
    }
    .v40-diagram svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; overflow: visible; }
    .v40-diagram .v40-spine {
        stroke: url(#v40spineGrad); stroke-width: 3; fill: none; stroke-linecap: round;
        filter: drop-shadow(0 1px 2px rgba(37,99,235,.25));
        stroke-dasharray: 320; stroke-dashoffset: 320;
        animation: v40-draw 1.1s var(--v40-ease) .1s forwards;
    }
    .v40-diagram .v40-tick { stroke: var(--v40-hair); stroke-width: 1.25; stroke-linecap: round; }
    .v40-diagram .v40-branch {
        stroke: var(--v40-hair); stroke-width: 1.5; fill: none; stroke-linecap: round;
        stroke-dasharray: 240; stroke-dashoffset: 240;
        animation: v40-draw .9s var(--v40-ease) forwards;
    }
    .v40-diagram .v40-node {
        opacity: 0; transform: scale(.86); transform-origin: center;
        transform-box: fill-box;
        animation: v40-pop .55s var(--v40-ease) forwards;
    }
    .v40-diagram .v40-node .v40-halo { fill: var(--v40-blue-tint); opacity: 0; }
    .v40-diagram .v40-node .v40-ring {
        fill: #fff; stroke: var(--v40-hair); stroke-width: 1.5;
        filter: drop-shadow(0 3px 8px rgba(20,24,29,.10));
    }
    .v40-diagram .v40-node .v40-dot { fill: url(#v40dotGrad); stroke: #fff; stroke-width: .8; }
    .v40-diagram .v40-node use { color: var(--v40-ink); transition: color .3s var(--v40-ease); }
    /* sanfte fortlaufende Atmung des Schein-Halos (sehr leise) */
    .v40-diagram .v40-node .v40-halo { animation: v40-breathe 4.5s ease-in-out infinite; animation-delay: inherit; }
    /* wandernder Lichtpunkt entlang der Spine */
    .v40-diagram .v40-pulse {
        fill: var(--v40-orange);
        filter: drop-shadow(0 0 5px var(--v40-orange));
        offset-path: path("M40 24 V336"); offset-distance: 0%;
        animation: v40-travel 5.5s cubic-bezier(.5,.1,.5,.9) 1.2s infinite;
    }

    @keyframes v40-draw { to { stroke-dashoffset: 0; } }
    @keyframes v40-pop  { to { opacity: 1; transform: scale(1); } }
    @keyframes v40-breathe { 0%,100% { opacity: 0; } 50% { opacity: .55; } }
    @keyframes v40-travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

    /* ============================================================
       B. STICKY WORLD-INDEX (rechte Spalte)
       ============================================================ */
    .v40-index { position: relative; }
    @media (min-width: 1080px) {
        .v40-index { position: sticky; top: 96px; align-self: start; }
    }
    .v40-index-inner {
        position: relative; border: 1px solid var(--v40-hair); border-radius: 18px;
        background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--v40-paper) 60%, #fff));
        padding: 1.4rem 1.3rem; box-shadow: var(--v40-shadow); overflow: hidden;
    }
    @media (min-width: 1080px) {
        .v40-index-inner::before {
            content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
            background: linear-gradient(90deg, var(--v40-blue), var(--v40-orange));
            opacity: .85;
        }
    }
    .v40-index-list { list-style: none; margin: 1rem 0 0; padding: 0; }
    .v40-ix {
        position: relative; display: grid; grid-template-columns: auto 1fr auto;
        align-items: center; gap: .7rem; padding: .6rem .2rem .6rem .9rem;
        border-radius: 10px; cursor: pointer; text-decoration: none;
        color: var(--v40-ink-soft);
        transition: color .25s var(--v40-ease), transform .25s var(--v40-ease), background .25s var(--v40-ease);
    }
    .v40-ix::before {
        content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleX(0);
        transform-origin: left; width: 3px; height: 60%; border-radius: 3px;
        background: linear-gradient(180deg, var(--v40-blue), var(--v40-orange));
        transition: transform .35s var(--v40-ease);
    }
    .v40-ix-num { font-family: var(--v40-serif); font-size: .9rem; font-weight: 500; color: var(--v40-ink-soft); opacity: .65; min-width: 1.6em; }
    .v40-ix-title { font-size: .9rem; font-weight: 500; line-height: 1.25; }
    .v40-ix-glyph { width: 20px; height: 20px; color: var(--v40-ink-soft); flex: none; transition: color .25s var(--v40-ease); }
    .v40-ix:hover { transform: translateX(4px); color: var(--v40-ink); background: var(--v40-paper-2); }
    .v40-ix:hover .v40-ix-glyph { color: var(--v40-orange); }
    .v40-ix.is-active { color: var(--v40-ink); }
    .v40-ix.is-active::before { transform: translateY(-50%) scaleX(1); }
    .v40-ix.is-active .v40-ix-title { font-weight: 700; }
    .v40-ix.is-active .v40-ix-num { color: var(--v40-blue); opacity: 1; }
    .v40-ix.is-active .v40-ix-glyph { color: var(--v40-blue); }
    .v40-index-foot {
        margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--v40-hair);
        font-size: .78rem; color: var(--v40-ink-soft);
    }
    .v40-index-foot a { color: var(--v40-blue); text-decoration: none; font-weight: 600; }
    .v40-index-foot a:hover { text-decoration: underline; }

    /* Mobile: Index als horizontale Pillen-Leiste */
    @media (max-width: 1079px) {
        .v40-index { position: sticky; top: 64px; z-index: 5; margin: 0 calc(-1 * clamp(1.1rem, 4vw, 2.4rem)); }
        .v40-index-inner {
            border-radius: 0; border-left: 0; border-right: 0;
            background: color-mix(in srgb, var(--v40-paper) 88%, #fff);
            backdrop-filter: saturate(140%) blur(8px); padding: .7rem clamp(1.1rem, 4vw, 2.4rem);
            box-shadow: 0 8px 20px -16px rgba(20,24,29,.3);
        }
        .v40-index .v40-kicker, .v40-index-foot { display: none; }
        .v40-index-list {
            margin: 0; display: flex; gap: .5rem; overflow-x: auto;
            scrollbar-width: none; -webkit-overflow-scrolling: touch;
        }
        .v40-index-list::-webkit-scrollbar { display: none; }
        .v40-ix {
            flex: none; padding: .45rem .85rem; border: 1px solid var(--v40-hair);
            border-radius: 980px; grid-template-columns: auto auto; gap: .45rem;
            background: var(--v40-paper); white-space: nowrap;
        }
        .v40-ix::before { display: none; }
        .v40-ix-num { display: none; }
        .v40-ix-title { font-size: .82rem; }
        .v40-ix:hover { transform: none; }
        .v40-ix.is-active { border-color: var(--v40-blue); background: var(--v40-blue-tint); }
    }

    /* ============================================================
       C. FLAGGSCHIFF-SPOTLIGHT
       ============================================================ */
    .v40-flag {
        position: relative; overflow: hidden; margin-top: clamp(2.5rem, 6vw, 4rem);
        background:
            radial-gradient(140% 120% at 88% 12%, var(--v40-blue-tint) 0%, transparent 50%),
            linear-gradient(165deg, #fff 0%, var(--v40-paper-2) 100%);
        border: 1px solid var(--v40-hair);
        border-radius: 24px; padding: clamp(2rem, 5vw, 3.4rem);
        box-shadow: var(--v40-shadow);
        transition: box-shadow .4s var(--v40-ease), transform .4s var(--v40-ease);
    }
    .v40-flag::after {
        /* dünne Akzentmarke oben links wie eine Heftnummer */
        content: ""; position: absolute; left: clamp(2rem,5vw,3.4rem); top: 0; width: 2.4rem; height: 3px;
        background: linear-gradient(90deg, var(--v40-blue), var(--v40-orange)); border-radius: 0 0 3px 3px;
    }
    @media (min-width: 760px) { .v40-flag:hover { transform: translateY(-2px); box-shadow: var(--v40-shadow-hi); } }
    .v40-flag-watermark {
        position: absolute; right: -3%; top: 50%; transform: translateY(-50%) rotate(-6deg);
        width: clamp(180px, 30vw, 360px); height: auto; color: var(--v40-blue-dk);
        opacity: .06; pointer-events: none;
        transition: transform .6s var(--v40-ease), opacity .6s var(--v40-ease);
    }
    @media (min-width: 760px) { .v40-flag:hover .v40-flag-watermark { transform: translateY(-50%) rotate(-2deg) scale(1.04); opacity: .09; } }
    .v40-flag-inner { position: relative; max-width: 56ch; }
    .v40-flag h2 {
        font-family: var(--v40-serif); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.8rem);
        line-height: 1.08; letter-spacing: -.015em; margin: .9rem 0 0;
    }
    .v40-flag p { color: var(--v40-ink-soft); margin: 1rem 0 0; max-width: 50ch; }
    .v40-flag-count {
        font-family: var(--v40-serif); font-weight: 600; font-size: clamp(3rem, 8vw, 5rem);
        line-height: 1; margin: 1.6rem 0 .2rem;
        background: linear-gradient(120deg, var(--v40-blue-dk), var(--v40-orange));
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--v40-blue-dk);
    }
    .v40-flag-count small { font-size: 1rem; -webkit-text-fill-color: var(--v40-ink-soft); color: var(--v40-ink-soft); font-family: var(--v40-sans); font-weight: 500; margin-left: .5rem; }
    .v40-flag .v40-link { margin-top: 1.3rem; }

    .v40-link {
        display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
        font-weight: 600; color: var(--v40-blue); font-size: .95rem;
    }
    .v40-link .v40-arrow { transition: transform .25s var(--v40-ease); }
    .v40-link:hover .v40-arrow { transform: translateX(4px); }
    .v40-link:hover { color: var(--v40-orange); }

    /* ============================================================
       D. DIE 9 WELTEN — redaktionelle Strecke
       ============================================================ */
    .v40-worlds { margin-top: var(--v40-sec); content-visibility: auto; contain-intrinsic-size: auto 900px; }
    .v40-worlds-head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
    .v40-worlds-head h2 {
        font-family: var(--v40-serif); font-weight: 600; font-size: clamp(2rem, 5vw, 3.2rem);
        line-height: 1.05; letter-spacing: -.02em; margin: 1rem 0 0;
    }

    .v40-world {
        position: relative;
        display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.2rem);
        align-items: start; padding: clamp(2.2rem, 5vw, 3.4rem) 0;
        border-top: 1px solid var(--v40-hair);
        opacity: 0; transform: translateY(20px);
        transition: opacity .75s var(--v40-ease), transform .75s var(--v40-ease);
    }
    /* wachsender Akzent auf der Trennlinie der aktiven Welt */
    .v40-world::before {
        content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0;
        background: linear-gradient(90deg, var(--v40-blue), var(--v40-orange));
        transition: width .55s var(--v40-ease);
    }
    .v40-world.is-active::before { width: clamp(2.5rem, 8vw, 5rem); }
    .v40-world.is-in { opacity: 1; transform: none; }
    @media (min-width: 760px) {
        .v40-world { grid-template-columns: auto 1fr 280px; }
        .v40-world.v40-flip .v40-glyphfield { order: -1; }
        .v40-world.v40-flip { grid-template-columns: 280px 1fr auto; }
        .v40-world.v40-flip .v40-world-num { order: 3; }
    }
    .v40-world-num {
        font-family: var(--v40-serif); font-weight: 600; font-size: clamp(2.6rem, 5vw, 4rem);
        line-height: .9; color: transparent;
        -webkit-text-stroke: 1px var(--v40-hair); letter-spacing: -.02em;
        font-variant-numeric: lining-nums; transition: -webkit-text-stroke-color .4s var(--v40-ease), transform .4s var(--v40-ease);
    }
    .v40-world.is-active .v40-world-num { -webkit-text-stroke: 1px var(--v40-blue); transform: translateY(-2px); }
    .v40-world-body { min-width: 0; }
    .v40-world-body h3 {
        font-family: var(--v40-serif); font-weight: 600; font-size: clamp(1.5rem, 3.5vw, 2.2rem);
        line-height: 1.1; letter-spacing: -.01em; margin: 0;
    }
    .v40-world-body p { color: var(--v40-ink-soft); margin: .8rem 0 0; max-width: 50ch; font-size: 1.02rem; }
    .v40-world-body .v40-link { margin-top: 1.1rem; }

    /* Glyph-Feld mit Tilt + Tiefe */
    .v40-glyphfield { perspective: 900px; min-width: 0; }
    .v40-glyphcard {
        position: relative; aspect-ratio: 4/3; border: 1px solid var(--v40-hair);
        border-radius: 18px; background:
            radial-gradient(120% 120% at 80% 10%, var(--v40-blue-tint) 0%, transparent 55%),
            linear-gradient(180deg, #fff, var(--v40-paper));
        display: grid; place-items: center; box-shadow: var(--v40-shadow);
        transition: transform .3s var(--v40-ease), box-shadow .3s var(--v40-ease), border-color .3s var(--v40-ease);
        transform-style: preserve-3d; will-change: transform; overflow: hidden;
    }
    /* feines Hairline-Raster im Hintergrund der Karte */
    .v40-glyphcard::before {
        content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
        background-image:
            linear-gradient(var(--v40-hair) 1px, transparent 1px),
            linear-gradient(90deg, var(--v40-hair) 1px, transparent 1px);
        background-size: 22px 22px;
        -webkit-mask-image: radial-gradient(120% 100% at 30% 30%, #000 0%, transparent 75%);
                mask-image: radial-gradient(120% 100% at 30% 30%, #000 0%, transparent 75%);
    }
    /* Glanzkante (gloss) beim Tilt */
    .v40-glyphcard::after {
        content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
        background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
        opacity: 0; transition: opacity .3s var(--v40-ease);
    }
    .v40-glyphcard svg {
        position: relative; z-index: 1; width: 46%; height: 46%; color: var(--v40-ink);
        transition: transform .3s var(--v40-ease), color .3s var(--v40-ease);
        transform: translateZ(22px);
    }
    .v40-glyphcard .v40-gf-acc {
        position: absolute; z-index: 1; right: .9rem; bottom: .9rem; width: .55rem; height: .55rem;
        border-radius: 50%; background: var(--v40-orange);
        box-shadow: 0 0 0 4px var(--v40-orange-tint);
        transition: transform .3s var(--v40-ease), box-shadow .3s var(--v40-ease);
        transform: translateZ(30px);
    }
    .v40-world.is-active .v40-glyphcard { border-color: color-mix(in srgb, var(--v40-blue) 35%, var(--v40-hair)); }
    @media (min-width: 760px) {
        .v40-glyphcard:hover {
            box-shadow: var(--v40-shadow-hi); border-color: color-mix(in srgb, var(--v40-blue) 30%, var(--v40-hair));
            transform: rotateX(var(--v40-rx,0deg)) rotateY(var(--v40-ry,0deg)) translateZ(6px);
        }
        .v40-glyphcard:hover::after { opacity: 1; }
        .v40-glyphcard:hover svg { color: var(--v40-blue-dk); }
        .v40-glyphcard:hover .v40-gf-acc { transform: translateZ(40px) scale(1.15); box-shadow: 0 0 0 5px var(--v40-orange-tint); }
    }

    /* ============================================================
       E. KENNZAHLEN — Count-up + Ringe
       ============================================================ */
    .v40-stats { margin-top: var(--v40-sec); content-visibility: auto; contain-intrinsic-size: auto 360px; }
    .v40-stats-grid {
        display: grid; gap: clamp(1.2rem, 3vw, 2rem);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
        margin-top: clamp(2rem, 5vw, 3rem);
    }
    .v40-stat {
        position: relative; text-align: center; padding: 2.2rem 1rem;
        border: 1px solid var(--v40-hair); border-radius: 18px;
        background: linear-gradient(180deg, #fff, var(--v40-paper));
        box-shadow: var(--v40-shadow);
        transition: transform .35s var(--v40-ease), box-shadow .35s var(--v40-ease), border-color .35s var(--v40-ease);
    }
    @media (min-width: 760px) {
        .v40-stat:hover { transform: translateY(-4px); box-shadow: var(--v40-shadow-hi); border-color: color-mix(in srgb, var(--v40-blue) 22%, var(--v40-hair)); }
    }
    .v40-stat-num { font-variant-numeric: tabular-nums; }
    .v40-stat-ring { position: absolute; inset: 0; margin: auto; width: 130px; height: 130px; pointer-events: none; }
    .v40-stat-ring circle { fill: none; stroke-width: 2.5; }
    .v40-stat-ring .v40-ring-bg { stroke: var(--v40-hair); }
    .v40-stat-ring .v40-ring-fg {
        stroke: url(#v40ringGrad); stroke-linecap: round;
        transform: rotate(-90deg); transform-origin: center;
        transition: stroke-dashoffset 1s var(--v40-ease);
    }
    .v40-stat-num {
        position: relative; font-family: var(--v40-serif); font-weight: 600;
        font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1; color: var(--v40-ink);
    }
    .v40-stat-label { position: relative; font-size: .78rem; letter-spacing: .04em; color: var(--v40-ink-soft); margin-top: .7rem; text-transform: uppercase; }

    /* ============================================================
       F. ÜBER
       ============================================================ */
    .v40-about {
        margin-top: var(--v40-sec); max-width: 60ch; margin-left: auto; margin-right: auto;
        text-align: center;
    }
    .v40-about-mark {
        position: relative; width: 4.4rem; height: 4.4rem; margin: 0 auto 1.4rem; border-radius: 50%;
        display: grid; place-items: center;
        background:
            linear-gradient(var(--v40-paper), var(--v40-paper)) padding-box,
            linear-gradient(135deg, var(--v40-blue), var(--v40-orange)) border-box;
        border: 1.5px solid transparent;
        font-family: var(--v40-serif); font-weight: 600;
        font-size: 1.45rem; color: var(--v40-blue-dk); box-shadow: var(--v40-shadow);
        letter-spacing: .02em;
    }
    .v40-about h2 {
        font-family: var(--v40-serif); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.6rem);
        line-height: 1.1; letter-spacing: -.015em; margin: 1rem 0 0;
    }
    .v40-about p { color: var(--v40-ink-soft); margin: 1.2rem 0 0; font-size: 1.05rem; }

    /* ============================================================
       G. KONTAKT-CTA
       ============================================================ */
    .v40-contact {
        position: relative; margin-top: var(--v40-sec); margin-bottom: clamp(3rem, 7vw, 5rem);
        text-align: center; border: 1px solid var(--v40-hair); border-radius: 24px;
        background:
            radial-gradient(80% 120% at 50% -10%, var(--v40-blue-tint) 0%, transparent 55%),
            linear-gradient(180deg, #fff, var(--v40-paper-2));
        padding: clamp(2.6rem, 6vw, 4.5rem) clamp(1.4rem, 4vw, 3rem);
        overflow: hidden; box-shadow: var(--v40-shadow);
    }
    .v40-contact::after {
        /* zwei dezente Zier-Glyphen als Wasserzeichen */
        content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
        background:
            radial-gradient(circle at 12% 120%, var(--v40-orange-tint) 0%, transparent 22%),
            radial-gradient(circle at 90% -20%, var(--v40-blue-tint) 0%, transparent 24%);
    }
    .v40-contact::before {
        content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--v40-blue), var(--v40-orange));
    }
    .v40-contact > * { position: relative; z-index: 1; }
    .v40-contact h2 {
        font-family: var(--v40-serif); font-weight: 600; font-size: clamp(2.2rem, 5.5vw, 3.6rem);
        line-height: 1.02; letter-spacing: -.025em; margin: 0; text-wrap: balance;
    }
    .v40-contact p { color: var(--v40-ink-soft); margin: 1.1rem auto 0; max-width: 48ch; }
    .v40-contact .v40-btn-primary { margin-top: 1.8rem; }
    .v40-contact-region {
        margin-top: 1.4rem; font-size: .8rem; letter-spacing: .04em; color: var(--v40-ink-soft);
        display: inline-flex; align-items: center; gap: .45rem;
    }

    /* ---- Focus & A11y ---- */
    .v40-root a:focus-visible, .v40-root button:focus-visible, .v40-ix:focus-visible, .v40-glyphcard:focus-visible {
        outline: 2px solid var(--v40-blue); outline-offset: 3px; border-radius: 8px;
    }

    /* Mobile <380px Feinschliff */
    @media (max-width: 380px) {
        .v40-cta-row .v40-btn { width: 100%; justify-content: center; }
        .v40-istat b { font-size: 1.4rem; }
    }

    /* ---- Reduced Motion: alle Bewegungen aus ---- */
    @media (prefers-reduced-motion: reduce) {
        .v40-root *, .v40-root *::before, .v40-root *::after {
            animation: none !important; transition: none !important;
        }
        .v40-diagram .v40-spine, .v40-diagram .v40-branch { stroke-dashoffset: 0 !important; }
        .v40-diagram .v40-node { opacity: 1 !important; transform: none !important; }
        .v40-diagram .v40-pulse { display: none !important; }
        .v40-diagram .v40-node .v40-halo { opacity: 0 !important; }
        .v40-world { opacity: 1 !important; transform: none !important; }
        .v40-reveal { opacity: 1 !important; transform: none !important; }
        .v40-hero-h1 em::after { transform: scaleX(1) !important; }
        .v40-stat-ring .v40-ring-fg { transition: none !important; }
    }
</style>

{{-- ===== SVG-SPRITE: ein konsistentes, handgezeichnetes Glyph-Set (stroke-width 1.75) ===== --}}
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
    <defs>
        <linearGradient id="v40spineGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#2563eb"/><stop offset=".5" stop-color="#5e7ef0"/><stop offset="1" stop-color="#FF5D2E"/>
        </linearGradient>
        <linearGradient id="v40ringGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#2563eb"/><stop offset="1" stop-color="#FF5D2E"/>
        </linearGradient>
        <radialGradient id="v40dotGrad" cx="35%" cy="30%" r="80%">
            <stop offset="0" stop-color="#ff9a6e"/><stop offset="1" stop-color="#FF5D2E"/>
        </radialGradient>
        <g id="v40g-apple" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M16.5 13.2c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.8-3-.8-1.6 0-3 .9-3.8 2.3-1.6 2.8-.4 7 1.2 9.3.8 1.1 1.7 2.4 2.9 2.3 1.2 0 1.6-.7 3-.7 1.4 0 1.8.7 3 .7 1.2 0 2-1.1 2.8-2.2.5-.8.9-1.6 1.1-2.4-2.4-.9-2.3-3.2-2.3-3.3z"/>
            <path d="M13.6 6.3c.6-.8 1-1.8.9-2.8-.9 0-2 .6-2.6 1.3-.6.7-1.1 1.7-.9 2.7 1 .1 2-.5 2.6-1.2z"/>
        </g>
        <g id="v40g-windows" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="8" height="8" rx="1"/>
            <rect x="13" y="3" width="8" height="8" rx="1"/>
            <rect x="3" y="13" width="8" height="8" rx="1"/>
            <rect x="13" y="13" width="8" height="8" rx="1"/>
        </g>
        <g id="v40g-android" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M5 14a7 7 0 0 1 14 0z"/>
            <path d="M5 14v4a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 18v-4"/>
            <path d="M7 7 5.5 4.5M17 7l1.5-2.5"/>
            <circle cx="9" cy="10.5" r=".6" fill="currentColor" stroke="none"/>
            <circle cx="15" cy="10.5" r=".6" fill="currentColor" stroke="none"/>
        </g>
        <g id="v40g-tools" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14.5 6.5a3.5 3.5 0 0 0-4.6 4.3L4 16.7 7.3 20l5.9-5.9a3.5 3.5 0 0 0 4.3-4.6l-2.3 2.3-2-2 2.3-2.3z"/>
            <circle cx="6.2" cy="17.8" r=".5" fill="currentColor" stroke="none"/>
        </g>
        <g id="v40g-shop" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M6 8h12l-1 11.5a1.5 1.5 0 0 1-1.5 1.3H8.5A1.5 1.5 0 0 1 7 19.5z"/>
            <path d="M9 8V6.5a3 3 0 0 1 6 0V8"/>
        </g>
        <g id="v40g-hosting" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <rect x="4" y="4" width="16" height="6" rx="1.5"/>
            <rect x="4" y="14" width="16" height="6" rx="1.5"/>
            <circle cx="7.5" cy="7" r=".7" fill="currentColor" stroke="none"/>
            <circle cx="7.5" cy="17" r=".7" fill="currentColor" stroke="none"/>
            <path d="M11 7h6M11 17h6"/>
        </g>
        <g id="v40g-news" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 5c-2-1.3-4.5-1.3-6.5-.5v13c2-.8 4.5-.8 6.5.5 2-1.3 4.5-1.3 6.5-.5v-13c-2-.8-4.5-.8-6.5.5z"/>
            <path d="M12 5v13"/>
        </g>
        <g id="v40g-it" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14.5 6.5a3.2 3.2 0 0 0-4.2 4l-4.6 4.6 2 2 4.6-4.6a3.2 3.2 0 0 0 4-4.2l-1.9 1.9-1.8-1.8z"/>
            <path d="M16.5 14a5 5 0 0 1 3 4.5M14 16.5a3 3 0 0 1 1.8 2.7"/>
        </g>
        <g id="v40g-design" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M16.5 4.5 19.5 7.5 9 18l-4 1 1-4z"/>
            <path d="M14.5 6.5 17.5 9.5"/>
            <path d="M4 21h7"/>
        </g>
    </defs>
</svg>

<div class="v40-wrap">
    <div class="v40-stage">

        {{-- ================= STORY-SPALTE ================= --}}
        <div class="v40-story">

            {{-- A. HERO --}}
            <header class="v40-hero">
                <div>
                    <p class="v40-kicker v40-reveal" style="--v40-rd:.05s">Arthur Kotsch · Digital Engineering</p>
                    <h1 class="v40-hero-h1 v40-serif v40-reveal" style="--v40-rd:.12s">Ein Atelier für <em>digitale Werkzeuge.</em></h1>
                    <p class="v40-hero-sub v40-reveal" style="--v40-rd:.2s">Student Digital Engineering und Entwickler aus Lichtenstein in Sachsen — ich baue Apps, Tools und Webdienste, gesetzt wie ein Werkverzeichnis.</p>
                    <div class="v40-cta-row v40-reveal" style="--v40-rd:.28s">
                        <a href="#v40-welten" class="v40-btn v40-btn-primary v40-jump">Welten entdecken <span class="v40-arrow" aria-hidden="true">→</span></a>
                        <a href="/kontakt" class="v40-btn v40-btn-ghost">Kontakt</a>
                    </div>
                    <div class="v40-inline-stats v40-reveal" style="--v40-rd:.36s">
                        <span class="v40-istat"><b>22</b><span>iOS / Mac</span></span>
                        <span class="v40-istat"><b>9</b><span>Windows</span></span>
                        <span class="v40-istat"><b>734</b><span>Web-Tools</span></span>
                        <span class="v40-istat"><b>1.412</b><span>Artikel</span></span>
                    </div>
                </div>

                {{-- Werkverzeichnis-Diagramm --}}
                <div class="v40-diagram" id="v40-diagram" aria-hidden="true">
                    <svg viewBox="0 0 320 360" role="img">
                        {{-- Spine + Lichtpunkt --}}
                        <path class="v40-spine" d="M40 24 V336"/>
                        <circle class="v40-pulse" cx="40" cy="24" r="3.4"/>
                        {{-- 9 Branches + Nodes --}}
                        @php
                            $glyphs = ['apple','windows','android','tools','shop','hosting','news','it','design'];
                        @endphp
                        @foreach($glyphs as $i => $g)
                            @php
                                $y = 40 + $i * 36;          // node y
                                $sy = 32 + $i * 33;         // spine attach y
                                $cx = 250; $cy = $y;
                                $delay = 0.25 + $i * 0.07;
                            @endphp
                            {{-- kurzer Anschluss-Tick an der Spine --}}
                            <line class="v40-tick" x1="40" y1="{{ $sy }}" x2="48" y2="{{ $sy }}"/>
                            <path class="v40-branch" d="M40 {{ $sy }} C 120 {{ $sy }}, 170 {{ $cy }}, {{ $cx - 22 }} {{ $cy }}" style="animation-delay: {{ $delay }}s"/>
                            <g class="v40-node" style="animation-delay: {{ $delay + 0.35 }}s">
                                <circle class="v40-halo" cx="{{ $cx }}" cy="{{ $cy }}" r="24" style="animation-delay: {{ $delay + 0.6 + $i * 0.18 }}s"/>
                                <circle class="v40-ring" cx="{{ $cx }}" cy="{{ $cy }}" r="17"/>
                                <use href="#v40g-{{ $g }}" x="{{ $cx - 12 }}" y="{{ $cy - 12 }}" width="24" height="24"/>
                                <circle class="v40-dot" cx="{{ $cx + 15 }}" cy="{{ $cy - 13 }}" r="2.8"/>
                            </g>
                        @endforeach
                    </svg>
                </div>
            </header>

            {{-- C. FLAGGSCHIFF-SPOTLIGHT --}}
            <section class="v40-flag" aria-labelledby="v40-flag-h">
                <svg class="v40-flag-watermark" viewBox="0 0 24 24" aria-hidden="true"><use href="#v40g-apple"/></svg>
                <div class="v40-flag-inner">
                    <p class="v40-kicker">Flaggschiff</p>
                    <h2 id="v40-flag-h" class="v40-serif">iOS &amp; Mac Apps — das Herzstück des Werks.</h2>
                    <p>Native Apps für iPhone, iPad und Mac, in regelmäßigen Updates gepflegt. Das größte zusammenhängende Kapitel dieses Ateliers.</p>
                    <div class="v40-flag-count" data-count="22">0<small>Apps im App Store</small></div>
                    <a href="https://ios.kotsch.tech" class="v40-link">Zum App-Portfolio <span class="v40-arrow" aria-hidden="true">→</span></a>
                </div>
            </section>

            {{-- D. DIE 9 WELTEN --}}
            <section class="v40-worlds" id="v40-welten" aria-labelledby="v40-welten-h">
                <div class="v40-worlds-head">
                    <p class="v40-kicker">Das Werkverzeichnis</p>
                    <h2 id="v40-welten-h" class="v40-serif">Neun Welten, ein zusammenhängendes Werk.</h2>
                </div>

                @php
                    $worlds = [
                        ['01','iOS &amp; Mac Apps','22 Apps im App Store für iPhone, iPad und Mac — mit regelmäßigen Updates.','https://ios.kotsch.tech','apple'],
                        ['02','Windows','9 Programme: Cleaner, Commander, Notes, Taskmanager und CodeEditor — als Direkt-Download.','https://windows.kotsch.tech','windows'],
                        ['03','Android','Native Apps für Android, derzeit in Entwicklung.','https://android.kotsch.tech','android'],
                        ['04','Web-Tools','734 Tools direkt im Browser — ohne Login, ohne Installation.','https://webtools.kotsch.tech','tools'],
                        ['05','Shop','Digitale Produkte mit Sofort-Download.','https://shop.kotsch.tech','shop'],
                        ['06','Hosting','Managed Webhosting sowie vServer und VPS — DSGVO-konform.','https://hosting.kotsch.tech','hosting'],
                        ['07','News','1.412 Ratgeber und Tutorials rund um Technik.','https://news.kotsch.tech','news'],
                        ['08','IT-Hilfe','Vor Ort und remote in der Region Glauchau–Lichtenstein — keine Lösung, kein Preis.','https://it-hilfe.kotsch.tech','it'],
                        ['09','Webdesign','Studio und 20 Branchen-Demos für individuelle Auftritte.','https://webdesign.kotsch.tech','design'],
                    ];
                @endphp

                @foreach($worlds as $i => $w)
                    <article class="v40-world {{ $i % 2 === 1 ? 'v40-flip' : '' }}" id="v40-w{{ $i }}" data-id="{{ $i }}" data-delay="{{ $i * 60 }}">
                        <div class="v40-world-num v40-serif" aria-hidden="true">{{ $w[0] }}</div>
                        <div class="v40-world-body">
                            <h3 class="v40-serif">{!! $w[1] !!}</h3>
                            <p>{{ $w[2] }}</p>
                            <a href="{{ $w[3] }}" class="v40-link">Öffnen <span class="v40-arrow" aria-hidden="true">→</span></a>
                        </div>
                        <div class="v40-glyphfield">
                            <div class="v40-glyphcard" tabindex="-1">
                                <svg viewBox="0 0 24 24" aria-hidden="true"><use href="#v40g-{{ $w[4] }}"/></svg>
                                <span class="v40-gf-acc" aria-hidden="true"></span>
                            </div>
                        </div>
                    </article>
                @endforeach
            </section>

            {{-- E. KENNZAHLEN --}}
            <section class="v40-stats" aria-labelledby="v40-stats-h">
                <p class="v40-kicker">Kennzahlen</p>
                <h2 id="v40-stats-h" class="v40-serif" style="font-family:var(--v40-serif);font-weight:600;font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;letter-spacing:-.02em;margin:1rem 0 0;">Das Werk in Zahlen.</h2>
                <div class="v40-stats-grid">
                    @php
                        $stats = [
                            ['22','iOS / Mac-Apps', .82],
                            ['9','Windows-Tools', .55],
                            ['734','Web-Tools', .92],
                            ['1.412','Artikel', .7],
                        ];
                    @endphp
                    @foreach($stats as $s)
                        <div class="v40-stat" data-stat data-target="{{ str_replace('.', '', $s[0]) }}" data-display="{{ $s[0] }}" data-ratio="{{ $s[2] }}">
                            <svg class="v40-stat-ring" viewBox="0 0 130 130" aria-hidden="true">
                                <circle class="v40-ring-bg" cx="65" cy="65" r="60"/>
                                <circle class="v40-ring-fg" cx="65" cy="65" r="60" stroke-dasharray="377" stroke-dashoffset="377"/>
                            </svg>
                            <div class="v40-stat-num">0</div>
                            <div class="v40-stat-label">{{ $s[1] }}</div>
                        </div>
                    @endforeach
                </div>
            </section>

            {{-- F. ÜBER --}}
            <section class="v40-about" aria-labelledby="v40-about-h">
                <div class="v40-about-mark v40-serif" aria-hidden="true">AK</div>
                <p class="v40-kicker" style="justify-content:center;">Über</p>
                <h2 id="v40-about-h" class="v40-serif">Ein Werk, viele Werkzeuge.</h2>
                <p>Ich bin Arthur Kotsch, Student Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Apps, Tools, Hosting, Inhalte und Hilfe vor Ort — ich verstehe diese Welten nicht als lose Projekte, sondern als ein zusammenhängendes, fortlaufend gepflegtes Werk. Jedes Stück soll präzise, ehrlich und nützlich sein.</p>
            </section>

            {{-- G. KONTAKT-CTA --}}
            <section class="v40-contact" aria-labelledby="v40-contact-h">
                <p class="v40-kicker" style="justify-content:center;">Kontakt</p>
                <h2 id="v40-contact-h" class="v40-serif">Sprechen wir.</h2>
                <p>Ob App-Idee, Webdienst oder ein IT-Problem in der Region — schreiben Sie mir, ich melde mich persönlich.</p>
                <a href="/kontakt" class="v40-btn v40-btn-primary">Kontakt aufnehmen <span class="v40-arrow" aria-hidden="true">→</span></a>
                <div class="v40-contact-region"><span aria-hidden="true">📍</span> Region Glauchau–Lichtenstein, Sachsen</div>
            </section>

        </div>

        {{-- ================= STICKY WELT-INDEX ================= --}}
        <nav class="v40-index" aria-label="Welt-Index">
            <div class="v40-index-inner">
                <p class="v40-kicker">Index</p>
                <ul class="v40-index-list">
                    @php
                        $ixGlyphs = ['apple','windows','android','tools','shop','hosting','news','it','design'];
                        $ixTitles = ['iOS &amp; Mac','Windows','Android','Web-Tools','Shop','Hosting','News','IT-Hilfe','Webdesign'];
                    @endphp
                    @foreach($ixTitles as $i => $t)
                        <li>
                            <a href="#v40-w{{ $i }}" class="v40-ix v40-jump" data-target="v40-w{{ $i }}" data-id="{{ $i }}">
                                <span class="v40-ix-num v40-serif">{{ sprintf('%02d', $i + 1) }}</span>
                                <span class="v40-ix-title">{!! $t !!}</span>
                                <svg class="v40-ix-glyph" viewBox="0 0 24 24" aria-hidden="true"><use href="#v40g-{{ $ixGlyphs[$i] }}"/></svg>
                            </a>
                        </li>
                    @endforeach
                </ul>
                <div class="v40-index-foot">
                    Alle neun Welten als <a href="#v40-welten" class="v40-jump" data-target="v40-welten">Subdomains →</a>
                </div>
            </div>
        </nav>

    </div>
</div>

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

    /* ---- Choreografierte Hero-Reveals scharf schalten ---- */
    requestAnimationFrame(function () {
        requestAnimationFrame(function () { root.classList.add('v40-ready'); });
    });

    /* ---- Smooth-Scroll für Index-Klicks & Hero-CTA ---- */
    root.querySelectorAll('.v40-jump').forEach(function (a) {
        a.addEventListener('click', function (e) {
            var sel = a.getAttribute('data-target') || (a.getAttribute('href') || '').replace('#', '');
            var el = sel ? document.getElementById(sel) : null;
            if (!el) return;
            e.preventDefault();
            var top = el.getBoundingClientRect().top + window.pageYOffset - 90;
            window.scrollTo({ top: top, behavior: reduce ? 'auto' : 'smooth' });
        });
    });

    /* ---- Welt-Reveals (gestaffelt, einmalig) ---- */
    var worlds = Array.prototype.slice.call(root.querySelectorAll('.v40-world'));
    if (reduce) {
        worlds.forEach(function (w) { w.classList.add('is-in'); });
    } else if ('IntersectionObserver' in window) {
        var revObs = new IntersectionObserver(function (entries) {
            entries.forEach(function (en) {
                if (en.isIntersecting) {
                    var d = parseInt(en.target.getAttribute('data-delay') || '0', 10);
                    setTimeout(function () { en.target.classList.add('is-in'); }, d);
                    revObs.unobserve(en.target);
                }
            });
        }, { threshold: 0.18, rootMargin: '0px 0px -8% 0px' });
        worlds.forEach(function (w) { revObs.observe(w); });
    } else {
        worlds.forEach(function (w) { w.classList.add('is-in'); });
    }

    /* ---- Scroll-Spy: aktiver Index-Eintrag + aktive Welt ---- */
    var ixItems = root.querySelectorAll('.v40-ix');
    function setActive(id) {
        ixItems.forEach(function (it) {
            it.classList.toggle('is-active', it.getAttribute('data-id') === String(id));
        });
        worlds.forEach(function (w) {
            w.classList.toggle('is-active', w.getAttribute('data-id') === String(id));
        });
        // aktive Pille auf Mobile in Sicht scrollen
        var active = root.querySelector('.v40-ix.is-active');
        var list = root.querySelector('.v40-index-list');
        if (active && list && window.innerWidth < 1080) {
            var l = active.offsetLeft - list.clientWidth / 2 + active.clientWidth / 2;
            list.scrollTo({ left: l, behavior: reduce ? 'auto' : 'smooth' });
        }
    }
    if ('IntersectionObserver' in window) {
        var spyObs = new IntersectionObserver(function (entries) {
            entries.forEach(function (en) {
                if (en.isIntersecting) setActive(en.target.getAttribute('data-id'));
            });
        }, { threshold: 0, rootMargin: '-45% 0px -45% 0px' });
        worlds.forEach(function (w) { spyObs.observe(w); });
    }

    /* ---- Count-up (Flaggschiff + Stats) ---- */
    function animateCount(el, target, display, done) {
        if (reduce) { el.textContent = display; if (done) done(); return; }
        var start = null, dur = 900;
        function step(ts) {
            if (start === null) start = ts;
            var p = Math.min((ts - start) / dur, 1);
            var eased = 1 - Math.pow(1 - p, 3);
            var val = Math.round(target * eased);
            el.textContent = val >= 1000 ? val.toLocaleString('de-DE') : String(val);
            if (p < 1) requestAnimationFrame(step);
            else { el.textContent = display; if (done) done(); }
        }
        requestAnimationFrame(step);
    }

    // Flaggschiff
    var flag = root.querySelector('.v40-flag-count');
    if (flag && 'IntersectionObserver' in window) {
        var fObs = new IntersectionObserver(function (es) {
            es.forEach(function (e) {
                if (e.isIntersecting) {
                    var small = flag.querySelector('small');
                    var tmp = document.createTextNode('');
                    // Wert separat zählen, small erhalten
                    var t = parseInt(flag.getAttribute('data-count'), 10);
                    var startNode = function () {
                        var s = null;
                        function st(ts) {
                            if (s === null) s = ts;
                            var p = Math.min((ts - s) / 900, 1);
                            var v = Math.round(t * (1 - Math.pow(1 - p, 3)));
                            flag.firstChild.nodeValue = String(v);
                            if (p < 1) requestAnimationFrame(st);
                            else flag.firstChild.nodeValue = String(t);
                        }
                        requestAnimationFrame(st);
                    };
                    if (reduce) { flag.firstChild.nodeValue = String(parseInt(flag.getAttribute('data-count'),10)); }
                    else startNode();
                    fObs.unobserve(flag);
                }
            });
        }, { threshold: 0.5 });
        fObs.observe(flag);
    }

    // Stats + Ringe
    var stats = root.querySelectorAll('[data-stat]');
    if ('IntersectionObserver' in window) {
        var sObs = new IntersectionObserver(function (es) {
            es.forEach(function (e) {
                if (!e.isIntersecting) return;
                var box = e.target;
                var num = box.querySelector('.v40-stat-num');
                var ring = box.querySelector('.v40-ring-fg');
                var target = parseInt(box.getAttribute('data-target'), 10);
                var disp = box.getAttribute('data-display');
                var ratio = parseFloat(box.getAttribute('data-ratio'));
                animateCount(num, target, disp);
                if (ring) {
                    var circ = 377;
                    if (reduce) ring.style.strokeDashoffset = String(circ * (1 - ratio));
                    else requestAnimationFrame(function () { ring.style.strokeDashoffset = String(circ * (1 - ratio)); });
                }
                sObs.unobserve(box);
            });
        }, { threshold: 0.4 });
        stats.forEach(function (s) { sObs.observe(s); });
    }

    if (reduce) return; // ab hier nur Desktop-Bewegung

    /* ---- Glyph-Tilt (Desktop, feinfühlig) ---- */
    if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
        root.querySelectorAll('.v40-glyphcard').forEach(function (card) {
            card.addEventListener('mousemove', function (ev) {
                var r = card.getBoundingClientRect();
                var px = (ev.clientX - r.left) / r.width - 0.5;
                var py = (ev.clientY - r.top) / r.height - 0.5;
                card.style.setProperty('--v40-ry', (px * 4).toFixed(2) + 'deg');
                card.style.setProperty('--v40-rx', (-py * 4).toFixed(2) + 'deg');
            });
            card.addEventListener('mouseleave', function () {
                card.style.setProperty('--v40-ry', '0deg');
                card.style.setProperty('--v40-rx', '0deg');
            });
        });

        /* ---- Sanfte Hero-Parallax (rAF-gedrosselt) ---- */
        var diagram = document.getElementById('v40-diagram');
        if (diagram) {
            var ticking = false;
            window.addEventListener('scroll', function () {
                if (ticking) return;
                ticking = true;
                requestAnimationFrame(function () {
                    var y = window.pageYOffset;
                    if (y < 900) diagram.style.transform = 'translateY(' + (y * 0.06).toFixed(1) + 'px)';
                    ticking = false;
                });
            }, { passive: true });
        }
    }
})();
</script>
</div>
@endsection