@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Software, Apps & Web')
@section('meta_description', 'Arthur Kotsch baut Software, iOS-, Mac- und Android-Apps, Webdesign, kostenlose Webtools, Shop, Hosting und IT-Hilfe - ein klares Angebot, alles aus einer Hand.')
@section('og_title', 'KOTSCH.TECH - Eine Marke, viele Disziplinen von Arthur Kotsch')
@section('og_description', 'Split-Screen-Tour durch KOTSCH.TECH: Windows-Software, Apple- und Android-Apps, Webdesign, Webtools, News, Shop, Hosting und persönliche IT-Hilfe.')
@section('twitter_title', 'KOTSCH.TECH - Software, Apps & Web von Arthur Kotsch')
@section('twitter_description', 'Von der App bis zum Hosting: Arthur Kotsch entwickelt, gestaltet und betreut. Software, Apps, Webdesign, Webtools, Shop, Hosting und IT-Hilfe.')

@section('content')
<div class="v8-home v8-no-js">
<style>
    /* ============================================================
       KOTSCH.TECH - Variante 8: Split-Screen-Diagonal
       Alle Selektoren mit .v8- praefixiert (keine Kollision mit app.css)
       Zickzack-Splits (Text | Visual), diagonale clip-path-Trenner,
       harte Hell/Dunkel-Wechsel (Brand-Dark als Sektionswechsel).
       ============================================================ */

    .v8-home {
        --v8-dark: var(--bg-dark);
        --v8-ink: var(--text-main);
        --v8-soft: var(--text-muted);
        --v8-pane-pad: clamp(2rem, 5vw, 5.5rem);
        --v8-edge: clamp(1.1rem, 5vw, 4rem);
        --v8-diag: clamp(40px, 7vw, 110px);
        color: var(--v8-ink);
        background: var(--bg);
        position: relative;
        overflow-x: clip;
        font-synthesis-weight: none;
    }

    .v8-home *,
    .v8-home *::before,
    .v8-home *::after { box-sizing: border-box; }

    /* gemeinsame Innenbreite */
    .v8-shell {
        width: 100%;
        max-width: var(--container-width);
        margin-inline: auto;
        padding-inline: var(--v8-edge);
    }

    /* Marken-Verlaufstext */
    .v8-grad {
        background: linear-gradient(115deg, var(--primary) 0%, var(--accent) 48%, var(--primary-light) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* ---------- Eyebrow / Kicker ---------- */
    .v8-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-size: clamp(0.66rem, 1.4vw, 0.76rem);
        font-weight: 800;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        padding: 0.5rem 0.95rem;
        border-radius: 999px;
        line-height: 1;
    }
    .v8-eyebrow .v8-num {
        font-variant-numeric: tabular-nums;
        opacity: 0.55;
    }
    .v8-eyebrow.is-light {
        color: var(--primary-dark);
        background: var(--primary-soft);
        border: 1px solid var(--border);
    }
    .v8-eyebrow.is-dark {
        color: var(--primary-light);
        background: rgba(96, 165, 250, 0.12);
        border: 1px solid rgba(96, 165, 250, 0.28);
    }
    .v8-eyebrow .v8-led {
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--success);
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
    }

    /* ---------- Buttons ---------- */
    .v8-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-weight: 700;
        font-size: clamp(0.92rem, 1.4vw, 1rem);
        padding: 0.95rem 1.6rem;
        border-radius: 14px;
        text-decoration: none;
        border: 1.5px solid transparent;
        transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
        will-change: transform;
    }
    .v8-btn i { transition: transform .25s ease; }
    .v8-btn-primary {
        background: linear-gradient(120deg, var(--primary), var(--primary-dark));
        color: #fff;
        box-shadow: 0 14px 30px -12px var(--primary-glow);
    }
    .v8-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -14px var(--primary-glow); }
    .v8-btn-primary:hover i { transform: translateX(4px); }
    .v8-btn-ghost {
        background: transparent;
        color: var(--v8-ink);
        border-color: var(--border);
    }
    .v8-btn-ghost:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary-dark); }
    .v8-btn-ondark {
        background: rgba(255,255,255,0.06);
        color: #fff;
        border-color: rgba(255,255,255,0.22);
        backdrop-filter: blur(4px);
    }
    .v8-btn-ondark:hover { transform: translateY(-3px); border-color: var(--primary-light); background: rgba(96,165,250,0.14); }
    .v8-btn:focus-visible {
        outline: 3px solid var(--primary-light);
        outline-offset: 3px;
    }

    /* ============================================================
       HERO  (Split: Text | Visual, diagonale Naht)
       ============================================================ */
    .v8-hero {
        position: relative;
        background:
            radial-gradient(1100px 520px at 88% -8%, var(--primary-soft), transparent 60%),
            var(--bg);
        padding-top: clamp(128px, 16vh, 184px);
        padding-bottom: clamp(3.5rem, 8vw, 7rem);
        overflow: hidden;
    }
    .v8-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.5rem, 5vw, 4rem);
        align-items: center;
    }
    @media (min-width: 940px) {
        .v8-hero-grid {
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
            gap: clamp(2.5rem, 5vw, 5rem);
        }
    }

    .v8-hero-title {
        font-size: clamp(2.5rem, 7vw, 5.1rem);
        line-height: 1.02;
        letter-spacing: -0.03em;
        font-weight: 800;
        margin: 1.4rem 0 0;
    }
    .v8-hero-title .v8-line { display: block; }
    .v8-hero-sub {
        margin: 1.5rem 0 0;
        max-width: 46ch;
        font-size: clamp(1.02rem, 1.9vw, 1.22rem);
        line-height: 1.6;
        color: var(--v8-soft);
    }
    .v8-hero-actions {
        margin-top: clamp(1.8rem, 4vw, 2.5rem);
        display: flex;
        flex-wrap: wrap;
        gap: 0.9rem;
    }
    .v8-hero-meta {
        margin-top: clamp(1.8rem, 4vw, 2.4rem);
        display: flex;
        flex-wrap: wrap;
        gap: clamp(1.2rem, 4vw, 2.6rem);
        border-top: 1px solid var(--border);
        padding-top: 1.4rem;
    }
    .v8-hero-meta div { line-height: 1.15; }
    .v8-hero-meta dt {
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 800;
        letter-spacing: -0.02em;
    }
    .v8-hero-meta dd {
        margin: 0.25rem 0 0;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--v8-soft);
    }

    /* Hero-Visual: gestapelte, leicht gekippte Karten + Foto */
    .v8-hero-visual {
        position: relative;
        min-height: clamp(320px, 46vw, 460px);
    }
    .v8-hero-photo {
        position: relative;
        z-index: 2;
        width: min(100%, 420px);
        margin-inline: auto;
        aspect-ratio: 4 / 5;
        border-radius: 26px;
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--border);
        background: var(--bg-light);
    }
    .v8-hero-photo img {
        width: 100%; height: 100%;
        object-fit: cover;
        display: block;
    }
    .v8-hero-photo::after {
        content: "";
        position: absolute; inset: 0;
        background: linear-gradient(180deg, transparent 55%, rgba(2,6,23,0.55) 100%);
    }
    .v8-hero-photo .v8-photo-tag {
        position: absolute;
        left: 1rem; bottom: 1rem;
        z-index: 3;
        display: inline-flex; align-items: center; gap: 0.55rem;
        padding: 0.55rem 0.9rem;
        border-radius: 12px;
        background: rgba(255,255,255,0.94);
        backdrop-filter: blur(6px);
        font-weight: 800;
        font-size: 0.82rem;
        color: var(--v8-ink);
        box-shadow: var(--shadow-soft);
    }
    .v8-hero-photo .v8-photo-tag i { color: var(--primary); }

    .v8-chip {
        position: absolute;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.85rem;
        border-radius: 14px;
        background: #fff;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        font-weight: 700;
        font-size: 0.82rem;
        white-space: nowrap;
    }
    .v8-chip i {
        width: 26px; height: 26px;
        display: grid; place-items: center;
        border-radius: 8px;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: 0.85rem;
    }
    .v8-chip-a { top: 6%; left: -2%; animation: v8-bob 6s ease-in-out infinite; }
    .v8-chip-b { bottom: 12%; right: -3%; animation: v8-bob 7s ease-in-out infinite .8s; }
    .v8-chip-c { top: 44%; right: -6%; animation: v8-bob 8s ease-in-out infinite 1.6s; }
    .v8-hero-blob {
        position: absolute;
        z-index: 1;
        inset: 8% 4% auto auto;
        width: clamp(180px, 30vw, 320px);
        aspect-ratio: 1;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        filter: blur(2px);
        opacity: 0.16;
        border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%;
        animation: v8-morph 14s ease-in-out infinite;
    }

    @keyframes v8-bob {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-12px); }
    }
    @keyframes v8-morph {
        0%, 100% { border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%; transform: rotate(0deg); }
        50% { border-radius: 60% 40% 42% 58% / 42% 58% 42% 58%; transform: rotate(14deg); }
    }

    /* ============================================================
       SPLIT-SEKTION (Zickzack)
       Jede Sektion = Pane(Text) + Pane(Visual), diagonale Naht.
       ============================================================ */
    .v8-split {
        position: relative;
    }
    .v8-split-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        min-height: clamp(420px, 50vw, 560px);
    }
    @media (min-width: 900px) {
        .v8-split-inner {
            grid-template-columns: 1fr 1fr;
        }
    }

    .v8-pane {
        padding: clamp(2.6rem, 6vw, 5rem) var(--v8-pane-pad);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Text-Pane Inhalt */
    .v8-pane-eyebrow { margin-bottom: 1.1rem; }
    .v8-pane h2 {
        font-size: clamp(1.7rem, 3.6vw, 2.7rem);
        line-height: 1.08;
        letter-spacing: -0.025em;
        font-weight: 800;
        margin: 0 0 0.9rem;
        max-width: 18ch;
    }
    .v8-pane p {
        font-size: clamp(1rem, 1.6vw, 1.1rem);
        line-height: 1.62;
        margin: 0 0 1.5rem;
        max-width: 44ch;
    }
    .v8-pane.is-dark p { color: var(--text-light); }
    .v8-pane.is-light p { color: var(--v8-soft); }

    .v8-feat {
        list-style: none;
        margin: 0 0 1.7rem;
        padding: 0;
        display: grid;
        gap: 0.7rem;
        max-width: 42ch;
    }
    .v8-feat li {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        font-size: 0.96rem;
        line-height: 1.45;
        font-weight: 600;
    }
    .v8-feat li i {
        flex: 0 0 auto;
        margin-top: 0.15rem;
        font-size: 0.85rem;
    }
    .v8-pane.is-light .v8-feat li i { color: var(--primary); }
    .v8-pane.is-dark .v8-feat li { color: var(--text-light); }
    .v8-pane.is-dark .v8-feat li i { color: var(--primary-light); }

    .v8-pane-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

    /* Visual-Pane: gefuellte Akzent-Flaeche mit diagonaler Naht */
    .v8-vis {
        position: relative;
        overflow: hidden;
        display: grid;
        place-items: center;
        min-height: clamp(280px, 42vw, 100%);
        padding: clamp(2rem, 5vw, 4rem);
        isolation: isolate;
    }
    .v8-vis::before {
        content: "";
        position: absolute;
        inset: -2px;
        z-index: -1;
        background-image:
            radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
        background-size: 22px 22px;
        opacity: 0.6;
    }

    /* grosses Icon-Emblem */
    .v8-emblem {
        position: relative;
        width: clamp(120px, 22vw, 190px);
        aspect-ratio: 1;
        border-radius: 32px;
        display: grid;
        place-items: center;
        font-size: clamp(2.6rem, 7vw, 4.4rem);
        color: #fff;
        background: rgba(255,255,255,0.10);
        border: 1px solid rgba(255,255,255,0.28);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 30px 60px -24px rgba(2,6,23,0.6);
        backdrop-filter: blur(6px);
    }
    .v8-emblem.on-light {
        color: var(--primary);
        background: #fff;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }
    .v8-emblem-ring {
        position: absolute;
        inset: clamp(-26px, -4vw, -34px);
        border-radius: 44px;
        border: 1.5px dashed rgba(255,255,255,0.35);
        animation: v8-spin 26s linear infinite;
    }
    .v8-emblem.on-light + .v8-emblem-ring,
    .v8-emblem.on-light ~ .v8-emblem-ring { border-color: var(--primary-glow); }

    /* Mini-Stat-Pillen, die um das Emblem schweben */
    .v8-vis-pill {
        position: absolute;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.5rem 0.8rem;
        border-radius: 11px;
        font-weight: 700;
        font-size: 0.78rem;
        background: rgba(255,255,255,0.95);
        color: var(--v8-ink);
        box-shadow: var(--shadow-lg);
    }
    .v8-vis-pill i { color: var(--primary); }
    .v8-vis-pill.p1 { top: 14%; left: 8%; animation: v8-bob 6.5s ease-in-out infinite; }
    .v8-vis-pill.p2 { bottom: 16%; right: 10%; animation: v8-bob 7.5s ease-in-out infinite .7s; }

    @keyframes v8-spin { to { transform: rotate(360deg); } }

    /* Hintergruende der Visual-Panes (rotierend pro Bereich) */
    .v8-bg-blue    { background: linear-gradient(150deg, var(--primary), var(--primary-dark)); }
    .v8-bg-violet  { background: linear-gradient(150deg, var(--accent), var(--primary-dark)); }
    .v8-bg-dark    { background: linear-gradient(160deg, #0b1426, var(--bg-dark)); }
    .v8-bg-mix     { background: linear-gradient(150deg, var(--primary-light), var(--accent)); }
    .v8-bg-soft    { background: linear-gradient(150deg, var(--bg-light), #eef2fb); }

    /* Dunkle Sektionen */
    .v8-split.is-dark-sec { background: var(--v8-dark); color: #fff; }
    .v8-split.is-dark-sec .v8-pane.is-dark h2 { color: #fff; }

    /* Diagonale Naht zwischen den beiden Panes (nur Desktop) */
    @media (min-width: 900px) {
        .v8-split[data-dir="lr"] .v8-vis {
            clip-path: polygon(var(--v8-diag) 0, 100% 0, 100% 100%, 0 100%);
            margin-left: calc(var(--v8-diag) * -1);
            padding-left: calc(clamp(2rem, 5vw, 4rem) + var(--v8-diag));
        }
        .v8-split[data-dir="rl"] .v8-vis {
            clip-path: polygon(0 0, 100% 0, calc(100% - var(--v8-diag)) 100%, 0 100%);
            margin-right: calc(var(--v8-diag) * -1);
            padding-right: calc(clamp(2rem, 5vw, 4rem) + var(--v8-diag));
        }
        /* rl: Visual links, Text rechts -> Reihenfolge tauschen */
        .v8-split[data-dir="rl"] .v8-vis { order: 1; }
        .v8-split[data-dir="rl"] .v8-pane { order: 2; }
    }

    /* ============================================================
       BAND-TRENNER (diagonale Marken-Linie zwischen Bloecken)
       ============================================================ */
    .v8-divider {
        height: clamp(48px, 7vw, 96px);
        position: relative;
        overflow: hidden;
    }
    .v8-divider::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, var(--primary), var(--accent));
        clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
        opacity: 0.14;
    }
    .v8-divider.flip::before { clip-path: polygon(0 0, 100% 100%, 0 100%); }

    /* ============================================================
       INTRO / Disziplinen-Band (4 Mini-Karten)
       ============================================================ */
    .v8-intro {
        padding: clamp(3rem, 7vw, 5.5rem) 0;
        background: var(--bg-light);
        position: relative;
    }
    .v8-intro-head {
        max-width: 760px;
        margin: 0 auto clamp(2rem, 4vw, 3rem);
        text-align: center;
    }
    .v8-intro-head h2 {
        font-size: clamp(1.7rem, 4vw, 2.6rem);
        line-height: 1.1;
        letter-spacing: -0.025em;
        font-weight: 800;
        margin: 1rem 0 0.8rem;
    }
    .v8-intro-head p {
        font-size: clamp(1rem, 1.7vw, 1.14rem);
        line-height: 1.6;
        color: var(--v8-soft);
        margin: 0;
    }
    .v8-pillrow {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
        gap: clamp(0.9rem, 2vw, 1.4rem);
    }
    .v8-pillcard {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        padding: 1.5rem 1.4rem;
        border-radius: 18px;
        background: #fff;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-soft);
        text-decoration: none;
        color: var(--v8-ink);
        position: relative;
        overflow: hidden;
        transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease, border-color .28s ease;
    }
    .v8-pillcard::after {
        content: "";
        position: absolute;
        left: 0; bottom: 0;
        width: 100%; height: 3px;
        background: linear-gradient(90deg, var(--primary), var(--accent));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s ease;
    }
    .v8-pillcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
    .v8-pillcard:hover::after { transform: scaleX(1); }
    .v8-pillcard:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 3px; }
    .v8-pillcard i {
        width: 44px; height: 44px;
        display: grid; place-items: center;
        border-radius: 12px;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: 1.15rem;
    }
    .v8-pillcard b { font-size: 1.05rem; font-weight: 800; }
    .v8-pillcard span { font-size: 0.9rem; color: var(--v8-soft); line-height: 1.45; }

    /* ============================================================
       SEKUNDAER-RASTER (kleinere Bereiche: Webtools, News, Shop, Docs)
       ============================================================ */
    .v8-more {
        padding: clamp(3rem, 7vw, 6rem) 0;
        background: var(--bg);
    }
    .v8-more-head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.2rem;
        margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
    }
    .v8-more-head h2 {
        font-size: clamp(1.6rem, 3.6vw, 2.4rem);
        line-height: 1.1;
        letter-spacing: -0.02em;
        font-weight: 800;
        margin: 0.8rem 0 0;
        max-width: 20ch;
    }
    .v8-more-head p {
        margin: 0.6rem 0 0;
        color: var(--v8-soft);
        max-width: 50ch;
        line-height: 1.55;
    }
    .v8-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
        gap: clamp(1rem, 2vw, 1.5rem);
    }
    .v8-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        padding: clamp(1.5rem, 3vw, 2.1rem);
        border-radius: 20px;
        background: var(--bg-light);
        border: 1px solid var(--border);
        text-decoration: none;
        color: var(--v8-ink);
        overflow: hidden;
        transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease, border-color .28s ease;
        isolation: isolate;
    }
    .v8-tile::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -40%; right: -30%;
        width: 70%; aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle, var(--primary-soft), transparent 70%);
        opacity: 0;
        transition: opacity .3s ease;
    }
    .v8-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
    .v8-tile:hover::before { opacity: 1; }
    .v8-tile:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 3px; }
    .v8-tile-ico {
        width: 50px; height: 50px;
        display: grid; place-items: center;
        border-radius: 14px;
        font-size: 1.3rem;
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        box-shadow: 0 12px 24px -12px var(--primary-glow);
    }
    .v8-tile h3 {
        font-size: 1.18rem;
        font-weight: 800;
        margin: 0.2rem 0 0;
        letter-spacing: -0.01em;
    }
    .v8-tile p {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.55;
        color: var(--v8-soft);
        flex: 1;
    }
    .v8-tile-go {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-weight: 800;
        font-size: 0.88rem;
        color: var(--primary-dark);
        margin-top: 0.3rem;
    }
    .v8-tile-go i { transition: transform .25s ease; }
    .v8-tile:hover .v8-tile-go i { transform: translateX(5px); }
    .v8-tag {
        position: absolute;
        top: 1rem; right: 1rem;
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 0.3rem 0.55rem;
        border-radius: 8px;
        background: var(--primary-soft);
        color: var(--primary-dark);
    }
    .v8-tag.is-free { background: rgba(16,185,129,0.14); color: #047857; }

    /* ============================================================
       FINALE CTA (dunkler Split mit diagonalem Akzent)
       ============================================================ */
    .v8-cta {
        position: relative;
        background: var(--v8-dark);
        color: #fff;
        overflow: hidden;
        padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    }
    .v8-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            radial-gradient(700px 420px at 12% 0%, rgba(37,99,235,0.28), transparent 60%),
            radial-gradient(600px 380px at 90% 100%, rgba(124,58,237,0.26), transparent 60%);
    }
    .v8-cta-diag {
        position: absolute;
        z-index: 0;
        inset: 0;
        background: linear-gradient(120deg, var(--primary), var(--accent));
        clip-path: polygon(78% 0, 100% 0, 100% 100%, 92% 100%);
        opacity: 0.18;
    }
    .v8-cta-inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(1.6rem, 4vw, 2.5rem);
        align-items: center;
    }
    @media (min-width: 860px) {
        .v8-cta-inner { grid-template-columns: 1.4fr 1fr; }
    }
    .v8-cta h2 {
        font-size: clamp(2rem, 5vw, 3.4rem);
        line-height: 1.05;
        letter-spacing: -0.03em;
        font-weight: 800;
        margin: 1rem 0 0;
    }
    .v8-cta p {
        margin: 1.1rem 0 0;
        color: var(--text-light);
        font-size: clamp(1.02rem, 1.8vw, 1.2rem);
        line-height: 1.6;
        max-width: 48ch;
    }
    .v8-cta-actions {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
    }
    .v8-cta-card {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.16);
        border-radius: 20px;
        padding: clamp(1.4rem, 3vw, 1.9rem);
        backdrop-filter: blur(6px);
    }
    .v8-cta-card .v8-who {
        display: flex; align-items: center; gap: 0.85rem;
        margin-bottom: 1rem;
    }
    .v8-cta-card .v8-who img {
        width: 52px; height: 52px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255,255,255,0.3);
    }
    .v8-cta-card .v8-who b { display: block; font-size: 1rem; }
    .v8-cta-card .v8-who span { font-size: 0.82rem; color: var(--text-light); }
    .v8-cta-card .v8-btn { width: 100%; justify-content: center; }
    .v8-cta-mailrow {
        margin-top: 0.8rem;
        text-align: center;
        font-size: 0.85rem;
        color: var(--text-light);
    }
    .v8-cta-mailrow a { color: var(--primary-light); text-decoration: none; font-weight: 700; }
    .v8-cta-mailrow a:hover { text-decoration: underline; }

    /* ============================================================
       REVEAL (eigene Variante; ohne JS sofort sichtbar)
       ============================================================ */
    .v8-reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
        will-change: opacity, transform;
    }
    .v8-reveal.v8-in { opacity: 1; transform: none; }
    .v8-home.v8-no-js .v8-reveal { opacity: 1; transform: none; }

    /* ============================================================
       RESPONSIVE / MOBILE-FEINSCHLIFF
       ============================================================ */
    @media (max-width: 899px) {
        /* Auf Mobile: Visual unter den Text, keine Diagonale */
        .v8-split[data-dir] .v8-vis { order: 0 !important; margin: 0 !important; }
        .v8-vis { min-height: clamp(240px, 60vw, 360px); }
        .v8-emblem-ring { animation-duration: 36s; }
    }

    @media (max-width: 560px) {
        .v8-hero-visual { min-height: 360px; }
        .v8-chip { font-size: 0.74rem; padding: 0.5rem 0.7rem; }
        .v8-chip-c { display: none; }
        .v8-more-head { align-items: flex-start; }
    }

    /* Reduced Motion: alles Bewegte stilllegen */
    @media (prefers-reduced-motion: reduce) {
        .v8-home *,
        .v8-home *::before,
        .v8-home *::after {
            animation: none !important;
            transition: none !important;
        }
        .v8-reveal { opacity: 1 !important; transform: none !important; }
    }
</style>

    {{-- ========================= HERO ========================= --}}
    <section class="v8-hero" aria-label="Einleitung KOTSCH.TECH">
        <div class="v8-shell">
            <div class="v8-hero-grid">
                <div class="v8-hero-copy">
                    <span class="v8-eyebrow is-light">
                        <span class="v8-led" aria-hidden="true"></span>
                        Persönliche Tech-Marke
                    </span>
                    <h1 class="v8-hero-title">
                        <span class="v8-line">Eine Marke.</span>
                        <span class="v8-line v8-grad">Viele Disziplinen.</span>
                    </h1>
                    <p class="v8-hero-sub">
                        Ich bin Arthur Kotsch. Unter <strong>KOTSCH.TECH</strong> entwickle ich Software
                        und Apps, gestalte Websites, baue kostenlose Webtools und betreue Hosting sowie
                        IT-Hilfe &ndash; alles aus einer Hand, mit Blick fürs Detail.
                    </p>
                    <div class="v8-hero-actions">
                        <a href="{{ route('kontakt') }}" class="v8-btn v8-btn-primary">
                            Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                        <a href="{{ route('webtools.show') }}" class="v8-btn v8-btn-ghost">
                            <i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i> Kostenlose Webtools
                        </a>
                    </div>
                    <dl class="v8-hero-meta">
                        <div>
                            <dt>4</dt>
                            <dd>Plattformen</dd>
                        </div>
                        <div>
                            <dt>App&nbsp;Store</dt>
                            <dd>Convertly+ live</dd>
                        </div>
                        <div>
                            <dt>1&nbsp;Ansprech&shy;partner</dt>
                            <dd>Direkt &amp; persönlich</dd>
                        </div>
                    </dl>
                </div>

                <div class="v8-hero-visual" aria-hidden="true">
                    <div class="v8-hero-blob"></div>
                    <figure class="v8-hero-photo">
                        <img src="{{ asset('img/arthur-kotsch.jpg') }}" alt="">
                        <figcaption class="v8-photo-tag">
                            <i class="fa-solid fa-code"></i> Arthur Kotsch
                        </figcaption>
                    </figure>
                    <span class="v8-chip v8-chip-a"><i class="fa-brands fa-apple"></i> iOS &amp; Mac</span>
                    <span class="v8-chip v8-chip-b"><i class="fa-brands fa-windows"></i> Windows-Software</span>
                    <span class="v8-chip v8-chip-c"><i class="fa-solid fa-pen-ruler"></i> Webdesign</span>
                </div>
            </div>
        </div>
    </section>

    {{-- ===================== DISZIPLINEN-BAND ===================== --}}
    <section class="v8-intro" aria-label="Überblick der Bereiche">
        <div class="v8-shell">
            <div class="v8-intro-head v8-reveal">
                <span class="v8-eyebrow is-light">Das Spektrum</span>
                <h2>Alles, was eine Idee zum Laufen bringt</h2>
                <p>
                    Von der nativen App über das Webdesign bis zum Server: Diese vier Säulen tragen
                    KOTSCH.TECH &ndash; weiter unten findest du jeden Bereich im Detail.
                </p>
            </div>
            <div class="v8-pillrow">
                <a href="{{ route('windows.index') }}" class="v8-pillcard v8-reveal">
                    <i class="fa-brands fa-windows" aria-hidden="true"></i>
                    <b>Windows-Software</b>
                    <span>Praktische Desktop-Tools, die echte Aufgaben schneller erledigen.</span>
                </a>
                <a href="{{ route('apple.index') }}" class="v8-pillcard v8-reveal">
                    <i class="fa-brands fa-apple" aria-hidden="true"></i>
                    <b>iOS &amp; Mac Apps</b>
                    <span>Native Apps mit klarem Design &ndash; Convertly+ ist im App Store.</span>
                </a>
                <a href="{{ route('web.templates') }}" class="v8-pillcard v8-reveal">
                    <i class="fa-solid fa-pen-ruler" aria-hidden="true"></i>
                    <b>Webdesign</b>
                    <span>Schnelle, moderne Websites, die auf jedem Gerät überzeugen.</span>
                </a>
                <a href="{{ route('hosting.index') }}" class="v8-pillcard v8-reveal">
                    <i class="fa-solid fa-server" aria-hidden="true"></i>
                    <b>Hosting &amp; Betrieb</b>
                    <span>Kleines, zuverlässiges Hosting mit persönlicher Betreuung.</span>
                </a>
            </div>
        </div>
    </section>

    {{-- ===================== SPLIT 1: WINDOWS (Text links | Visual rechts, dunkel) ===================== --}}
    <section class="v8-split is-dark-sec" data-dir="lr" id="v8-windows" aria-label="Windows-Software">
        <div class="v8-split-inner">
            <div class="v8-pane is-dark">
                <span class="v8-eyebrow is-dark v8-pane-eyebrow">
                    <span class="v8-num">01</span> Windows-Software
                </span>
                <h2>Desktop-Tools, die <span class="v8-grad">Zeit sparen</span></h2>
                <p>
                    Schlanke Windows-Programme für wiederkehrende Aufgaben &ndash; ohne Schnickschnack,
                    ohne Tracking, dafür mit Fokus auf Tempo und Zuverlässigkeit im Alltag.
                </p>
                <ul class="v8-feat">
                    <li><i class="fa-solid fa-bolt" aria-hidden="true"></i> Direkt einsatzbereit, schlanke Installer</li>
                    <li><i class="fa-solid fa-shield-halved" aria-hidden="true"></i> Datensparsam &amp; ohne unnötige Berechtigungen</li>
                    <li><i class="fa-solid fa-screwdriver-wrench" aria-hidden="true"></i> Regelmäßig gepflegt und verbessert</li>
                </ul>
                <div class="v8-pane-actions">
                    <a href="{{ route('windows.index') }}" class="v8-btn v8-btn-primary">
                        Zu den Windows-Tools <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
            <div class="v8-vis v8-bg-blue" aria-hidden="true">
                <span class="v8-vis-pill p1"><i class="fa-solid fa-download"></i> Schnell startklar</span>
                <div class="v8-emblem"><i class="fa-brands fa-windows"></i></div>
                <span class="v8-emblem-ring"></span>
                <span class="v8-vis-pill p2"><i class="fa-solid fa-gauge-high"></i> Performant</span>
            </div>
        </div>
    </section>

    {{-- ===================== SPLIT 2: APPLE (Visual links | Text rechts, hell) ===================== --}}
    <section class="v8-split" data-dir="rl" id="v8-apple" aria-label="iOS und Mac Apps">
        <div class="v8-split-inner">
            <div class="v8-vis v8-bg-violet" aria-hidden="true">
                <span class="v8-vis-pill p1"><i class="fa-solid fa-star"></i> App Store</span>
                <div class="v8-emblem"><i class="fa-brands fa-apple"></i></div>
                <span class="v8-emblem-ring"></span>
                <span class="v8-vis-pill p2"><i class="fa-solid fa-mobile-screen"></i> Native UX</span>
            </div>
            <div class="v8-pane is-light">
                <span class="v8-eyebrow is-light v8-pane-eyebrow">
                    <span class="v8-num">02</span> iOS &amp; Mac
                </span>
                <h2>Apps, die sich <span class="v8-grad">richtig anfühlen</span></h2>
                <p>
                    Native Anwendungen für iPhone, iPad und Mac mit aufgeräumtem Interface.
                    Convertly+ ist bereits im App Store &ndash; weitere Projekte sind unterwegs.
                </p>
                <ul class="v8-feat">
                    <li><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i> Klares, fokussiertes Design</li>
                    <li><i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i> Convertly+: Einheiten blitzschnell umrechnen</li>
                    <li><i class="fa-solid fa-circle-check" aria-hidden="true"></i> Geprüft &amp; veröffentlicht im App Store</li>
                </ul>
                <div class="v8-pane-actions">
                    <a href="{{ route('apple.index') }}" class="v8-btn v8-btn-primary">
                        Apple-Apps ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <div class="v8-divider" aria-hidden="true"></div>

    {{-- ===================== SPLIT 3: ANDROID (Text links | Visual rechts, dunkel) ===================== --}}
    <section class="v8-split is-dark-sec" data-dir="lr" id="v8-android" aria-label="Android Apps">
        <div class="v8-split-inner">
            <div class="v8-pane is-dark">
                <span class="v8-eyebrow is-dark v8-pane-eyebrow">
                    <span class="v8-num">03</span> Android
                </span>
                <h2>Android-Apps <span class="v8-grad">in Entwicklung</span></h2>
                <p>
                    Die mobile Welt endet nicht bei Apple: An Android-Apps wird aktiv gearbeitet,
                    mit demselben Anspruch an sauberes Material-Design und flüssige Bedienung.
                </p>
                <ul class="v8-feat">
                    <li><i class="fa-solid fa-layer-group" aria-hidden="true"></i> Modernes, vertrautes Material-Design</li>
                    <li><i class="fa-solid fa-feather" aria-hidden="true"></i> Leichtgewichtig &amp; reaktionsschnell</li>
                    <li><i class="fa-solid fa-rocket" aria-hidden="true"></i> Roadmap einsehen &amp; Updates verfolgen</li>
                </ul>
                <div class="v8-pane-actions">
                    <a href="{{ route('android.index') }}" class="v8-btn v8-btn-primary">
                        Android-Stand ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
            <div class="v8-vis v8-bg-dark" aria-hidden="true">
                <span class="v8-vis-pill p1"><i class="fa-solid fa-code-branch"></i> Roadmap</span>
                <div class="v8-emblem"><i class="fa-brands fa-android"></i></div>
                <span class="v8-emblem-ring"></span>
                <span class="v8-vis-pill p2"><i class="fa-solid fa-flask"></i> Beta-Phase</span>
            </div>
        </div>
    </section>

    {{-- ===================== SPLIT 4: WEBDESIGN (Visual links | Text rechts, hell) ===================== --}}
    <section class="v8-split" data-dir="rl" id="v8-webdesign" aria-label="Webdesign">
        <div class="v8-split-inner">
            <div class="v8-vis v8-bg-mix" aria-hidden="true">
                <span class="v8-vis-pill p1"><i class="fa-solid fa-gauge-high"></i> Schnell</span>
                <div class="v8-emblem"><i class="fa-solid fa-pen-ruler"></i></div>
                <span class="v8-emblem-ring"></span>
                <span class="v8-vis-pill p2"><i class="fa-solid fa-mobile-screen-button"></i> Responsive</span>
            </div>
            <div class="v8-pane is-light">
                <span class="v8-eyebrow is-light v8-pane-eyebrow">
                    <span class="v8-num">04</span> Webdesign
                </span>
                <h2>Websites, die <span class="v8-grad">überzeugen</span></h2>
                <p>
                    Vom ersten Entwurf bis zur fertigen Seite: moderne, schnelle Websites mit klarer
                    Struktur, sauberem Code und einem Auftritt, der auf jedem Bildschirm sitzt.
                </p>
                <ul class="v8-feat">
                    <li><i class="fa-solid fa-bolt" aria-hidden="true"></i> Performance &amp; gute Ladezeiten</li>
                    <li><i class="fa-solid fa-magnifying-glass-chart" aria-hidden="true"></i> SEO-Grundlagen von Anfang an</li>
                    <li><i class="fa-solid fa-mobile-screen-button" aria-hidden="true"></i> Responsive von 360 bis 1920&nbsp;px</li>
                </ul>
                <div class="v8-pane-actions">
                    <a href="{{ route('web.templates') }}" class="v8-btn v8-btn-primary">
                        Webdesign entdecken <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- ===================== SPLIT 5: IT-HILFE (Text links | Visual rechts, dunkel) ===================== --}}
    <section class="v8-split is-dark-sec" data-dir="lr" id="v8-support" aria-label="IT-Hilfe">
        <div class="v8-split-inner">
            <div class="v8-pane is-dark">
                <span class="v8-eyebrow is-dark v8-pane-eyebrow">
                    <span class="v8-num">05</span> IT-Hilfe
                </span>
                <h2>Persönliche Hilfe, <span class="v8-grad">wenn es klemmt</span></h2>
                <p>
                    PC langsam, Einrichtung nötig oder einfach eine Frage? Ich helfe verständlich
                    und direkt &ndash; ohne Fachchinesisch und mit Lösungen, die wirklich passen.
                </p>
                <ul class="v8-feat">
                    <li><i class="fa-solid fa-user-gear" aria-hidden="true"></i> Direkter Ansprechpartner statt Hotline</li>
                    <li><i class="fa-solid fa-comments" aria-hidden="true"></i> Verständlich erklärt, Schritt für Schritt</li>
                    <li><i class="fa-solid fa-handshake-angle" aria-hidden="true"></i> Hilfe rund um PC, Setup &amp; Software</li>
                </ul>
                <div class="v8-pane-actions">
                    <a href="{{ route('it-hilfe.index') }}" class="v8-btn v8-btn-primary">
                        IT-Hilfe anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
            <div class="v8-vis v8-bg-blue" aria-hidden="true">
                <span class="v8-vis-pill p1"><i class="fa-solid fa-headset"></i> Direkt</span>
                <div class="v8-emblem"><i class="fa-solid fa-life-ring"></i></div>
                <span class="v8-emblem-ring"></span>
                <span class="v8-vis-pill p2"><i class="fa-solid fa-check-double"></i> Verständlich</span>
            </div>
        </div>
    </section>

    {{-- ===================== SPLIT 6: HOSTING (Visual links | Text rechts, hell) ===================== --}}
    <section class="v8-split" data-dir="rl" id="v8-hosting" aria-label="Hosting">
        <div class="v8-split-inner">
            <div class="v8-vis v8-bg-violet" aria-hidden="true">
                <span class="v8-vis-pill p1"><i class="fa-solid fa-shield-halved"></i> Stabil</span>
                <div class="v8-emblem"><i class="fa-solid fa-server"></i></div>
                <span class="v8-emblem-ring"></span>
                <span class="v8-vis-pill p2"><i class="fa-solid fa-gauge"></i> Schnell</span>
            </div>
            <div class="v8-pane is-light">
                <span class="v8-eyebrow is-light v8-pane-eyebrow">
                    <span class="v8-num">06</span> Hosting
                </span>
                <h2>Kleines Hosting, <span class="v8-grad">groß betreut</span></h2>
                <p>
                    Zuverlässiges Hosting für Projekte, die persönliche Betreuung statt anonymer
                    Massenpakete suchen. Übersichtlich, fair und ohne versteckte Komplexität.
                </p>
                <ul class="v8-feat">
                    <li><i class="fa-solid fa-server" aria-hidden="true"></i> Stabiler Betrieb deiner Website</li>
                    <li><i class="fa-solid fa-envelope" aria-hidden="true"></i> Persönliche Hilfe bei Einrichtung &amp; Umzug</li>
                    <li><i class="fa-solid fa-sliders" aria-hidden="true"></i> Übersichtlich statt überladen</li>
                </ul>
                <div class="v8-pane-actions">
                    <a href="{{ route('hosting.index') }}" class="v8-btn v8-btn-primary">
                        Hosting ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <div class="v8-divider flip" aria-hidden="true"></div>

    {{-- ===================== SEKUNDAER-RASTER: WEBTOOLS, NEWS, SHOP, DOKUMENTE ===================== --}}
    <section class="v8-more" aria-label="Weitere Bereiche: Webtools, News, Shop und Dokumente">
        <div class="v8-shell">
            <div class="v8-more-head v8-reveal">
                <div>
                    <span class="v8-eyebrow is-light">Mehr von KOTSCH.TECH</span>
                    <h2>Werkzeuge, Wissen und digitale Produkte</h2>
                </div>
                <p>
                    Kostenlos nutzbare Tools, redaktionelle Artikel und ein Shop mit digitalen
                    Produkten &ndash; direkt im Browser, ohne Umwege.
                </p>
            </div>

            <div class="v8-grid">
                <a href="{{ route('webtools.show') }}" class="v8-tile v8-reveal">
                    <span class="v8-tag is-free">Kostenlos</span>
                    <span class="v8-tile-ico" aria-hidden="true"><i class="fa-solid fa-wand-magic-sparkles"></i></span>
                    <h3>Webtools</h3>
                    <p>Hunderte kostenlose Browser-Tools: umrechnen, konvertieren, generieren &ndash; ohne Installation.</p>
                    <span class="v8-tile-go">Tools öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                <a href="{{ route('news.index') }}" class="v8-tile v8-reveal">
                    <span class="v8-tile-ico" aria-hidden="true"><i class="fa-solid fa-newspaper"></i></span>
                    <h3>News &amp; Blog</h3>
                    <p>Artikel und Notizen rund um Software, Apps und Web &ndash; verständlich aufbereitet.</p>
                    <span class="v8-tile-go">Beiträge lesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                <a href="{{ route('shop.index') }}" class="v8-tile v8-reveal">
                    <span class="v8-tag">Digital</span>
                    <span class="v8-tile-ico" aria-hidden="true"><i class="fa-solid fa-bag-shopping"></i></span>
                    <h3>Shop</h3>
                    <p>Digitale Produkte zum sofortigen Download &ndash; sauber gebaut und klar beschrieben.</p>
                    <span class="v8-tile-go">Shop besuchen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                <a href="{{ route('documents.index') }}" class="v8-tile v8-reveal">
                    <span class="v8-tile-ico" aria-hidden="true"><i class="fa-solid fa-file-lines"></i></span>
                    <h3>Dokumente</h3>
                    <p>Hilfreiche Vorlagen und Dokumente, gesammelt und übersichtlich zum Nachschlagen.</p>
                    <span class="v8-tile-go">Dokumente ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ===================== FINALE CTA ===================== --}}
    <section class="v8-cta" aria-label="Kontakt aufnehmen">
        <span class="v8-cta-diag" aria-hidden="true"></span>
        <div class="v8-shell">
            <div class="v8-cta-inner">
                <div class="v8-reveal">
                    <span class="v8-eyebrow is-dark">Lass uns starten</span>
                    <h2>Du hast eine Idee &ndash; ich baue sie</h2>
                    <p>
                        Ob App, Website, ein passendes Tool oder Hilfe bei der Technik: Schreib mir kurz,
                        worum es geht. Du bekommst eine ehrliche, persönliche Einschätzung &ndash;
                        ohne Vertriebsmasche.
                    </p>
                </div>
                <div class="v8-cta-card v8-reveal">
                    <div class="v8-who">
                        <img src="{{ asset('img/arthur-kotsch.jpg') }}" alt="Porträt von Arthur Kotsch">
                        <div>
                            <b>Arthur Kotsch</b>
                            <span>Entwickler &amp; Gründer von KOTSCH.TECH</span>
                        </div>
                    </div>
                    <a href="{{ route('kontakt') }}" class="v8-btn v8-btn-primary">
                        Projekt anfragen <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
                    </a>
                    <div class="v8-cta-mailrow">
                        oder direkt: <a href="mailto:arthurkotsch@kotsch.tech">arthurkotsch@kotsch.tech</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
/* Variante 8 - vanilla, IIFE, null-safe. Nur Reveal-Verstaerkung;
   alle Inhalte sind ohne JS sichtbar (Progressive Enhancement). */
(function () {
    var root = document.querySelector('.v8-home');
    if (!root) return;

    // Markiere als "JS aktiv" -> ermoeglicht Reveal-Startzustand
    root.classList.remove('v8-no-js');

    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var items = root.querySelectorAll('.v8-reveal');
    if (!items.length) return;

    if (reduce || !('IntersectionObserver' in window)) {
        for (var i = 0; i < items.length; i++) items[i].classList.add('v8-in');
        return;
    }

    var io = new IntersectionObserver(function (entries, obs) {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) {
                entry.target.classList.add('v8-in');
                obs.unobserve(entry.target);
            }
        });
    }, { threshold: 0.14, rootMargin: '0px 0px -8% 0px' });

    items.forEach(function (el, idx) {
        // gestaffelte Verzoegerung innerhalb von Reihen
        el.style.transitionDelay = (Math.min(idx % 4, 3) * 80) + 'ms';
        io.observe(el);
    });
})();
</script>
@endsection