@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Tech-Hub fuer Software & Web')
@section('meta_description', 'KOTSCH.TECH von Arthur Kotsch: ein Hub fuer Softwareentwicklung, iOS-, Mac- & Android-Apps, Webdesign, Webtools, News, Shop, Hosting und IT-Hilfe - alles aus einer Hand.')
@section('og_title', 'KOTSCH.TECH - Ein Zentrum, alle Tech-Disziplinen von Arthur Kotsch')
@section('og_description', 'Radialer Tech-Hub von Arthur Kotsch: Windows-Software, Apple- und Android-Apps, Webdesign, Webtools, News, Shop, Hosting und persoenliche IT-Hilfe an einem Ort.')
@section('twitter_title', 'KOTSCH.TECH - Tech-Hub von Arthur Kotsch')
@section('twitter_description', 'Apps, Software, Webdesign, Webtools, Shop, Hosting und IT-Hilfe kreisen um eine Marke: KOTSCH.TECH von Arthur Kotsch. Alles aus einer Hand, direkt und persoenlich.')

@section('content')
<div class="v9-home v9-no-js">
<style>
    /* ============================================================
       KOTSCH.TECH - Variante 9: Radial-Orbit-Hub
       Alle Selektoren mit .v9- praefixiert (keine Kollision mit app.css)
       Zentrale Markenmarke, Bereiche orbital als Knoten auf Ringen,
       SVG-Verbindungslinien. Darunter linearer Abschnitt (SEO/Mobile).
       Mobile: Orbit -> lineare Knotenliste, kein Overflow.
       ============================================================ */

    .v9-home {
        --v9-ink: var(--text-main);
        --v9-soft: var(--text-muted);
        --v9-edge: clamp(1.1rem, 5vw, 3.5rem);
        --v9-ring-stroke: rgba(37, 99, 235, 0.16);
        --v9-line: rgba(37, 99, 235, 0.22);
        color: var(--v9-ink);
        background: var(--bg);
        position: relative;
        overflow-x: clip;
        font-synthesis-weight: none;
        -webkit-font-smoothing: antialiased;
    }

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

    .v9-shell {
        width: 100%;
        max-width: var(--container-width);
        margin-inline: auto;
        padding-inline: var(--v9-edge);
    }

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

    /* ---------- Eyebrow / Kicker ---------- */
    .v9-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.24em;
        text-transform: uppercase;
        padding: 0.5rem 0.95rem;
        border-radius: 999px;
        line-height: 1;
        color: var(--primary-dark);
        background: var(--primary-soft);
        border: 1px solid var(--border);
    }
    .v9-eyebrow.is-dark {
        color: var(--primary-light);
        background: rgba(96, 165, 250, 0.12);
        border: 1px solid rgba(96, 165, 250, 0.28);
    }
    .v9-eyebrow .v9-led {
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--success);
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
    }

    /* ---------- Buttons ---------- */
    .v9-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;
        cursor: pointer;
        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;
    }
    .v9-btn i { transition: transform .25s ease; }
    .v9-btn-primary {
        background: linear-gradient(120deg, var(--primary), var(--primary-dark));
        color: #fff;
        box-shadow: 0 14px 30px -12px var(--primary-glow);
    }
    .v9-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -14px var(--primary-glow); }
    .v9-btn-primary:hover i { transform: translateX(4px); }
    .v9-btn-ghost {
        background: #fff;
        color: var(--v9-ink);
        border-color: var(--border);
    }
    .v9-btn-ghost:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary-dark); }
    .v9-btn:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 3px; }

    /* ============================================================
       HERO / ORBIT-HUB
       Zentrale Marke, Bereiche orbital. SVG-Linien dahinter.
       ============================================================ */
    .v9-hero {
        position: relative;
        padding-top: clamp(124px, 15vh, 168px);
        padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
        background:
            radial-gradient(1200px 720px at 50% -6%, var(--primary-soft), transparent 62%),
            var(--bg);
        overflow: hidden;
    }
    /* dezentes Punkt-Raster im Hintergrund */
    .v9-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: radial-gradient(circle at 1px 1px, rgba(37, 99, 235, 0.07) 1px, transparent 0);
        background-size: 30px 30px;
        -webkit-mask-image: radial-gradient(circle at 50% 36%, #000 0%, transparent 70%);
        mask-image: radial-gradient(circle at 50% 36%, #000 0%, transparent 70%);
        pointer-events: none;
    }
    .v9-hero-shell { position: relative; z-index: 1; }

    .v9-hero-head {
        text-align: center;
        max-width: 820px;
        margin: 0 auto clamp(1.8rem, 4vw, 2.6rem);
    }
    .v9-hero-title {
        font-size: clamp(2.4rem, 7vw, 4.6rem);
        line-height: 1.03;
        letter-spacing: -0.03em;
        font-weight: 800;
        margin: 1.3rem 0 0;
    }
    .v9-hero-title .v9-line { display: block; }
    .v9-hero-sub {
        margin: 1.3rem auto 0;
        max-width: 60ch;
        font-size: clamp(1.02rem, 1.9vw, 1.2rem);
        line-height: 1.62;
        color: var(--v9-soft);
    }
    .v9-hero-actions {
        margin-top: clamp(1.6rem, 4vw, 2.2rem);
        display: flex;
        flex-wrap: wrap;
        gap: 0.9rem;
        justify-content: center;
    }

    /* ---------- Die Orbit-Buehne ---------- */
    .v9-orbit {
        position: relative;
        width: min(100%, 760px);
        margin: clamp(1.5rem, 4vw, 2.6rem) auto 0;
        aspect-ratio: 1 / 1;
        /* WICHTIG: kein overflow:hidden hier (Knoten ragen leicht heraus) */
    }
    /* SVG Ringe + Linien */
    .v9-orbit-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        z-index: 0;
        pointer-events: none;
    }
    .v9-orbit-svg .v9-ring {
        fill: none;
        stroke: var(--v9-ring-stroke);
        stroke-width: 1;
    }
    .v9-orbit-svg .v9-ring.dashed {
        stroke-dasharray: 3 7;
        stroke: rgba(124, 58, 237, 0.18);
    }
    .v9-orbit-svg .v9-spoke {
        stroke: var(--v9-line);
        stroke-width: 1;
        stroke-linecap: round;
    }
    /* rotierender Akzentbogen */
    .v9-orbit-arc {
        position: absolute;
        inset: 9%;
        z-index: 0;
        border-radius: 50%;
        border: 1.5px solid transparent;
        border-top-color: var(--primary-light);
        border-right-color: var(--accent);
        opacity: 0.5;
        animation: v9-spin 22s linear infinite;
    }
    .v9-orbit-arc.two {
        inset: 24%;
        border-top-color: var(--accent);
        border-left-color: var(--primary);
        animation-duration: 16s;
        animation-direction: reverse;
        opacity: 0.45;
    }

    /* Zentraler Marken-Kern */
    .v9-core {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        width: clamp(118px, 22%, 168px);
        aspect-ratio: 1;
        border-radius: 32px;
        display: grid;
        place-items: center;
        background: #fff;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        text-align: center;
        padding: 1rem;
    }
    .v9-core::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 40px;
        background: radial-gradient(circle at 50% 30%, var(--primary-glow), transparent 70%);
        z-index: -1;
        filter: blur(6px);
    }
    .v9-core img {
        width: clamp(54px, 11vw, 78px);
        height: auto;
        display: block;
        margin: 0 auto;
    }
    .v9-core b {
        display: block;
        margin-top: 0.5rem;
        font-size: clamp(0.62rem, 1.5vw, 0.72rem);
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--v9-ink);
    }
    .v9-core-pulse {
        position: absolute;
        inset: 0;
        border-radius: 32px;
        border: 1.5px solid var(--primary-light);
        z-index: -1;
        animation: v9-pulse 3.6s ease-out infinite;
    }

    /* Orbit-Knoten (Bereich) */
    .v9-node {
        position: absolute;
        top: 50%; left: 50%;
        z-index: 2;
        /* Position via CSS-Variablen --x / --y (% relativ zur Buehne) */
        transform: translate(-50%, -50%) translate(var(--x), var(--y));
        width: clamp(92px, 17.5%, 132px);
        text-decoration: none;
        color: var(--v9-ink);
    }
    .v9-node-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        padding: 0.85rem 0.5rem 0.7rem;
        border-radius: 18px;
        background: #fff;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-soft);
        text-align: center;
        transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
        animation: v9-float 7s ease-in-out infinite;
        animation-delay: var(--d, 0s);
    }
    .v9-node-ico {
        width: 44px; height: 44px;
        flex: 0 0 auto;
        display: grid; place-items: center;
        border-radius: 13px;
        font-size: 1.2rem;
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        box-shadow: 0 10px 22px -12px var(--primary-glow);
    }
    .v9-node-ico.alt { background: linear-gradient(135deg, var(--accent), var(--primary-dark)); }
    .v9-node-ico.dark { background: linear-gradient(135deg, #0b1426, var(--bg-dark)); }
    .v9-node b {
        font-size: clamp(0.74rem, 1.5vw, 0.86rem);
        font-weight: 800;
        letter-spacing: -0.01em;
        line-height: 1.15;
    }
    .v9-node .v9-node-tag {
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--primary-dark);
    }
    .v9-node .v9-node-tag.free { color: #047857; }
    .v9-node:hover .v9-node-inner,
    .v9-node:focus-visible .v9-node-inner {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary-light);
        animation-play-state: paused;
    }
    .v9-node:focus-visible { outline: none; }
    .v9-node:focus-visible .v9-node-inner { outline: 3px solid var(--primary-light); outline-offset: 3px; }

    /* zentrale Hilfslegende unter dem Orbit */
    .v9-orbit-hint {
        text-align: center;
        margin-top: clamp(1rem, 3vw, 1.6rem);
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--v9-soft);
        display: inline-flex;
        gap: 0.5rem;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .v9-orbit-hint i { color: var(--primary); }

    /* ============================================================
       SPRUNG-NAVIGATION (kein <nav>! -> div role=navigation)
       ============================================================ */
    .v9-jump {
        position: relative;
        background: var(--bg-light);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: clamp(0.8rem, 2vw, 1.1rem) 0;
    }
    .v9-jump-row {
        display: flex;
        gap: 0.5rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.2rem;
    }
    .v9-jump-row::-webkit-scrollbar { height: 6px; }
    .v9-jump-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
    .v9-jump-link {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.5rem 0.9rem;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--border);
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--v9-soft);
        text-decoration: none;
        white-space: nowrap;
        transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
    }
    .v9-jump-link i { color: var(--primary); font-size: 0.8rem; }
    .v9-jump-link:hover { color: var(--primary-dark); border-color: var(--primary-light); transform: translateY(-2px); }
    .v9-jump-link:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }

    /* ============================================================
       SEKTIONEN (gemeinsamer Kopf)
       ============================================================ */
    .v9-sec { padding: clamp(3rem, 7vw, 5.5rem) 0; }
    .v9-sec-head {
        max-width: 760px;
        margin: 0 auto clamp(2rem, 4vw, 3rem);
        text-align: center;
    }
    .v9-sec-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;
    }
    .v9-sec-head p {
        font-size: clamp(1rem, 1.7vw, 1.14rem);
        line-height: 1.6;
        color: var(--v9-soft);
        margin: 0;
    }

    /* ============================================================
       ALLE BEREICHE (lineares Karten-Raster, Bento-Akzente)
       ============================================================ */
    .v9-areas { background: var(--bg); }
    .v9-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        gap: clamp(1rem, 2vw, 1.5rem);
    }
    .v9-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        padding: clamp(1.6rem, 3vw, 2.2rem);
        border-radius: 22px;
        background: #fff;
        border: 1px solid var(--border);
        text-decoration: none;
        color: var(--v9-ink);
        overflow: hidden;
        isolation: isolate;
        scroll-margin-top: 120px;
        transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
    }
    .v9-card::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -45%; right: -30%;
        width: 75%; aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle, var(--primary-soft), transparent 70%);
        opacity: 0;
        transition: opacity .35s ease;
    }
    .v9-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
    .v9-card:hover::before { opacity: 1; }
    .v9-card:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 3px; }
    .v9-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
    }
    .v9-card-ico {
        width: 54px; height: 54px;
        flex: 0 0 auto;
        display: grid; place-items: center;
        border-radius: 15px;
        font-size: 1.35rem;
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        box-shadow: 0 12px 24px -12px var(--primary-glow);
    }
    .v9-card-ico.alt { background: linear-gradient(135deg, var(--accent), var(--primary-dark)); }
    .v9-card-ico.dark { background: linear-gradient(135deg, #0b1426, var(--bg-dark)); }
    .v9-card-num {
        font-size: 0.8rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.08em;
        color: var(--v9-soft);
        opacity: 0.7;
    }
    .v9-card h3 {
        font-size: 1.2rem;
        font-weight: 800;
        margin: 0.2rem 0 0;
        letter-spacing: -0.01em;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        flex-wrap: wrap;
    }
    .v9-card p {
        margin: 0;
        font-size: 0.96rem;
        line-height: 1.55;
        color: var(--v9-soft);
        flex: 1;
    }
    .v9-card-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;
    }
    .v9-card-go i { transition: transform .25s ease; }
    .v9-card:hover .v9-card-go i { transform: translateX(5px); }
    .v9-pill {
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        padding: 0.28rem 0.55rem;
        border-radius: 8px;
        background: var(--primary-soft);
        color: var(--primary-dark);
        white-space: nowrap;
    }
    .v9-pill.is-free { background: rgba(16,185,129,0.14); color: #047857; }
    .v9-pill.is-soon { background: rgba(124,58,237,0.12); color: #6d28d9; }

    /* Bento-Spannweiten ab Tablet (6er-Raster) */
    @media (min-width: 760px) {
        .v9-grid { grid-template-columns: repeat(6, 1fr); }
        .v9-card { grid-column: span 2; }
        .v9-card.wide { grid-column: span 3; }
    }

    /* ============================================================
       VERTRAUEN / WARUM (drei Saeulen, helle Sektion)
       ============================================================ */
    .v9-why { background: var(--bg-light); }
    .v9-why-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
        gap: clamp(1rem, 2vw, 1.5rem);
    }
    .v9-why-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: clamp(1.6rem, 3vw, 2.1rem);
        box-shadow: var(--shadow-soft);
        position: relative;
        overflow: hidden;
    }
    .v9-why-card::after {
        content: "";
        position: absolute;
        left: 0; top: 0;
        width: 4px; height: 100%;
        background: linear-gradient(180deg, var(--primary), var(--accent));
    }
    .v9-why-card i {
        width: 48px; height: 48px;
        display: grid; place-items: center;
        border-radius: 13px;
        font-size: 1.25rem;
        background: var(--primary-soft);
        color: var(--primary);
        margin-bottom: 0.9rem;
    }
    .v9-why-card h3 { font-size: 1.12rem; font-weight: 800; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
    .v9-why-card p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--v9-soft); }

    /* ============================================================
       FINALE CTA (dunkler Orbit-Anklang)
       ============================================================ */
    .v9-cta {
        position: relative;
        background: var(--bg-dark);
        color: #fff;
        overflow: hidden;
        padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    }
    .v9-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            radial-gradient(720px 440px at 16% 0%, rgba(37,99,235,0.30), transparent 60%),
            radial-gradient(620px 400px at 88% 100%, rgba(124,58,237,0.26), transparent 60%);
    }
    /* dekorative Orbit-Ringe rechts */
    .v9-cta-rings {
        position: absolute;
        z-index: 0;
        top: 50%; right: -8%;
        transform: translateY(-50%);
        width: clamp(280px, 40vw, 520px);
        aspect-ratio: 1;
        opacity: 0.5;
        pointer-events: none;
    }
    .v9-cta-rings span {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px solid rgba(96,165,250,0.25);
    }
    .v9-cta-rings span:nth-child(2) { inset: 14%; border-color: rgba(124,58,237,0.28); }
    .v9-cta-rings span:nth-child(3) { inset: 28%; border-style: dashed; }
    .v9-cta-rings span:nth-child(4) {
        inset: 42%;
        border-color: rgba(96,165,250,0.4);
        animation: v9-spin 26s linear infinite;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }
    .v9-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) {
        .v9-cta-inner { grid-template-columns: 1.45fr 1fr; }
    }
    .v9-cta h2 {
        font-size: clamp(2rem, 5vw, 3.4rem);
        line-height: 1.05;
        letter-spacing: -0.03em;
        font-weight: 800;
        margin: 1rem 0 0;
    }
    .v9-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;
    }
    .v9-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);
    }
    .v9-cta-card .v9-who {
        display: flex; align-items: center; gap: 0.85rem;
        margin-bottom: 1rem;
    }
    .v9-cta-card .v9-who-mark {
        width: 52px; height: 52px;
        flex: 0 0 auto;
        display: grid; place-items: center;
        border-radius: 14px;
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.22);
    }
    .v9-cta-card .v9-who-mark img { width: 30px; height: auto; display: block; }
    .v9-cta-card .v9-who b { display: block; font-size: 1rem; }
    .v9-cta-card .v9-who span { font-size: 0.82rem; color: var(--text-light); }
    .v9-cta-card .v9-btn { width: 100%; justify-content: center; }
    .v9-cta-mailrow {
        margin-top: 0.8rem;
        text-align: center;
        font-size: 0.85rem;
        color: var(--text-light);
    }
    .v9-cta-mailrow a { color: var(--primary-light); text-decoration: none; font-weight: 700; }
    .v9-cta-mailrow a:hover { text-decoration: underline; }

    /* ============================================================
       REVEAL (eigene Variante; ohne JS sofort sichtbar)
       ============================================================ */
    .v9-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;
    }
    .v9-reveal.v9-in { opacity: 1; transform: none; }
    .v9-home.v9-no-js .v9-reveal { opacity: 1; transform: none; }

    /* ============================================================
       ANIMATIONEN
       ============================================================ */
    @keyframes v9-spin { to { transform: rotate(360deg); } }
    @keyframes v9-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
    @keyframes v9-pulse {
        0% { transform: scale(1); opacity: 0.7; }
        70% { transform: scale(1.22); opacity: 0; }
        100% { transform: scale(1.22); opacity: 0; }
    }

    /* ============================================================
       RESPONSIVE: Orbit -> lineare Liste auf kleinen Screens
       ============================================================ */

    /* Standard: lineare Knotenliste verborgen (nur Mobile) */
    .v9-orbit-linear { display: none; }

    @media (max-width: 720px) {
        .v9-orbit,
        .v9-orbit-hint { display: none; }

        .v9-orbit-linear {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.7rem;
            margin: clamp(1.4rem, 5vw, 2rem) auto 0;
            width: 100%;
            max-width: 460px;
        }
        .v9-lin-node {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.85rem 0.9rem;
            border-radius: 16px;
            background: #fff;
            border: 1px solid var(--border);
            box-shadow: var(--shadow-soft);
            text-decoration: none;
            color: var(--v9-ink);
            transition: transform .2s ease, border-color .2s ease;
        }
        .v9-lin-node:active { transform: scale(0.98); }
        .v9-lin-node:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }
        .v9-lin-ico {
            width: 38px; height: 38px;
            flex: 0 0 auto;
            display: grid; place-items: center;
            border-radius: 11px;
            font-size: 1rem;
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--accent));
        }
        .v9-lin-node b { font-size: 0.82rem; font-weight: 800; line-height: 1.15; }

        /* Marken-Kern als Banner ueber der Liste */
        .v9-lin-core {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 1rem 1.1rem;
            border-radius: 18px;
            background: linear-gradient(120deg, var(--primary-soft), rgba(124,58,237,0.08));
            border: 1px solid var(--border);
        }
        .v9-lin-core img { width: 46px; height: auto; }
        .v9-lin-core .v9-lin-core-txt b { font-size: 0.95rem; font-weight: 800; }
        .v9-lin-core .v9-lin-core-txt span { display: block; font-size: 0.78rem; color: var(--v9-soft); font-weight: 600; }
    }

    @media (max-width: 380px) {
        .v9-orbit-linear { grid-template-columns: 1fr; }
    }

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

    {{-- ========================= HERO / ORBIT-HUB ========================= --}}
    <section class="v9-hero" aria-label="Einleitung KOTSCH.TECH">
        <div class="v9-shell v9-hero-shell">
            <div class="v9-hero-head">
                <span class="v9-eyebrow">
                    <span class="v9-led" aria-hidden="true"></span>
                    Persoenliche Tech-Marke
                </span>
                <h1 class="v9-hero-title">
                    <span class="v9-line">Ein Zentrum.</span>
                    <span class="v9-line v9-grad">Alle Tech-Disziplinen.</span>
                </h1>
                <p class="v9-hero-sub">
                    Ich bin <strong>Arthur Kotsch</strong>. Unter <strong>KOTSCH.TECH</strong> kreist alles um
                    eine Marke: Software und Apps, Webdesign und Webtools, Shop, Hosting sowie persoenliche
                    IT-Hilfe &ndash; gebaut, gestaltet und betreut aus einer Hand.
                </p>
                <div class="v9-hero-actions">
                    <a href="{{ route('kontakt') }}" class="v9-btn v9-btn-primary">
                        Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                    <a href="{{ route('webtools.show') }}" class="v9-btn v9-btn-ghost">
                        <i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i> Kostenlose Webtools
                    </a>
                </div>
            </div>

            {{-- ORBIT-BUEHNE (Desktop/Tablet) — dekorativ; alle Links zusaetzlich linear unten erreichbar --}}
            <div class="v9-orbit" role="group" aria-label="Bereiche von KOTSCH.TECH, ringfoermig angeordnet">
                {{-- SVG: Ringe + Speichen. viewBox 0..400, Zentrum 200/200 --}}
                <svg class="v9-orbit-svg" viewBox="0 0 400 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid meet">
                    <circle class="v9-ring" cx="200" cy="200" r="120"></circle>
                    <circle class="v9-ring dashed" cx="200" cy="200" r="168"></circle>
                    {{-- Speichen vom Zentrum zu den 8 Knoten (innerer Radius ~118) --}}
                    <line class="v9-spoke" x1="200" y1="200" x2="200" y2="82"></line>
                    <line class="v9-spoke" x1="200" y1="200" x2="283" y2="117"></line>
                    <line class="v9-spoke" x1="200" y1="200" x2="318" y2="200"></line>
                    <line class="v9-spoke" x1="200" y1="200" x2="283" y2="283"></line>
                    <line class="v9-spoke" x1="200" y1="200" x2="200" y2="318"></line>
                    <line class="v9-spoke" x1="200" y1="200" x2="117" y2="283"></line>
                    <line class="v9-spoke" x1="200" y1="200" x2="82" y2="200"></line>
                    <line class="v9-spoke" x1="200" y1="200" x2="117" y2="117"></line>
                </svg>

                <div class="v9-orbit-arc" aria-hidden="true"></div>
                <div class="v9-orbit-arc two" aria-hidden="true"></div>

                {{-- Zentraler Marken-Kern --}}
                <div class="v9-core">
                    <span class="v9-core-pulse" aria-hidden="true"></span>
                    <img src="{{ asset('img/logo-mark.png') }}" alt="KOTSCH.TECH Markenzeichen">
                    <b>KOTSCH.TECH</b>
                </div>

                {{-- 8 Orbit-Knoten. --x/--y in % der Buehne (29.5% Radius, 45deg-Schritte) --}}
                {{-- 0deg (oben) --}}
                <a class="v9-node" style="--x:0%; --y:-29.5%; --d:0s;" href="{{ route('windows.index') }}" aria-label="Windows-Software ansehen">
                    <span class="v9-node-inner">
                        <span class="v9-node-ico"><i class="fa-brands fa-windows" aria-hidden="true"></i></span>
                        <b>Windows</b>
                    </span>
                </a>
                {{-- 45deg --}}
                <a class="v9-node" style="--x:20.9%; --y:-20.9%; --d:.5s;" href="{{ route('apple.index') }}" aria-label="iOS und Mac Apps ansehen">
                    <span class="v9-node-inner">
                        <span class="v9-node-ico"><i class="fa-brands fa-apple" aria-hidden="true"></i></span>
                        <b>iOS &amp; Mac</b>
                    </span>
                </a>
                {{-- 90deg (rechts) --}}
                <a class="v9-node" style="--x:29.5%; --y:0%; --d:1s;" href="{{ route('android.index') }}" aria-label="Android Apps ansehen">
                    <span class="v9-node-inner">
                        <span class="v9-node-ico alt"><i class="fa-brands fa-android" aria-hidden="true"></i></span>
                        <b>Android</b>
                        <span class="v9-node-tag">Bald</span>
                    </span>
                </a>
                {{-- 135deg --}}
                <a class="v9-node" style="--x:20.9%; --y:20.9%; --d:1.5s;" href="{{ route('web.templates') }}" aria-label="Webdesign ansehen">
                    <span class="v9-node-inner">
                        <span class="v9-node-ico"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i></span>
                        <b>Webdesign</b>
                    </span>
                </a>
                {{-- 180deg (unten) --}}
                <a class="v9-node" style="--x:0%; --y:29.5%; --d:2s;" href="{{ route('webtools.show') }}" aria-label="Webtools oeffnen">
                    <span class="v9-node-inner">
                        <span class="v9-node-ico alt"><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i></span>
                        <b>Webtools</b>
                        <span class="v9-node-tag free">Gratis</span>
                    </span>
                </a>
                {{-- 225deg --}}
                <a class="v9-node" style="--x:-20.9%; --y:20.9%; --d:2.5s;" href="{{ route('shop.index') }}" aria-label="Shop besuchen">
                    <span class="v9-node-inner">
                        <span class="v9-node-ico"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i></span>
                        <b>Shop</b>
                    </span>
                </a>
                {{-- 270deg (links) --}}
                <a class="v9-node" style="--x:-29.5%; --y:0%; --d:3s;" href="{{ route('hosting.index') }}" aria-label="Hosting ansehen">
                    <span class="v9-node-inner">
                        <span class="v9-node-ico alt"><i class="fa-solid fa-server" aria-hidden="true"></i></span>
                        <b>Hosting</b>
                    </span>
                </a>
                {{-- 315deg --}}
                <a class="v9-node" style="--x:-20.9%; --y:-20.9%; --d:3.5s;" href="{{ route('it-hilfe.index') }}" aria-label="IT-Hilfe anfragen">
                    <span class="v9-node-inner">
                        <span class="v9-node-ico"><i class="fa-solid fa-life-ring" aria-hidden="true"></i></span>
                        <b>IT-Hilfe</b>
                    </span>
                </a>
            </div>

            {{-- LINEARE KNOTENLISTE (nur Mobile sichtbar; gleiche Ziele, kein Overflow) --}}
            <div class="v9-orbit-linear" role="group" aria-label="Bereiche von KOTSCH.TECH">
                <div class="v9-lin-core">
                    <img src="{{ asset('img/logo-mark.png') }}" alt="KOTSCH.TECH Markenzeichen">
                    <span class="v9-lin-core-txt">
                        <b>KOTSCH.TECH</b>
                        <span>Acht Bereiche, eine Marke</span>
                    </span>
                </div>
                <a class="v9-lin-node" href="{{ route('windows.index') }}">
                    <span class="v9-lin-ico"><i class="fa-brands fa-windows" aria-hidden="true"></i></span>
                    <b>Windows</b>
                </a>
                <a class="v9-lin-node" href="{{ route('apple.index') }}">
                    <span class="v9-lin-ico"><i class="fa-brands fa-apple" aria-hidden="true"></i></span>
                    <b>iOS &amp; Mac</b>
                </a>
                <a class="v9-lin-node" href="{{ route('android.index') }}">
                    <span class="v9-lin-ico"><i class="fa-brands fa-android" aria-hidden="true"></i></span>
                    <b>Android</b>
                </a>
                <a class="v9-lin-node" href="{{ route('web.templates') }}">
                    <span class="v9-lin-ico"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i></span>
                    <b>Webdesign</b>
                </a>
                <a class="v9-lin-node" href="{{ route('webtools.show') }}">
                    <span class="v9-lin-ico"><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i></span>
                    <b>Webtools</b>
                </a>
                <a class="v9-lin-node" href="{{ route('shop.index') }}">
                    <span class="v9-lin-ico"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i></span>
                    <b>Shop</b>
                </a>
                <a class="v9-lin-node" href="{{ route('hosting.index') }}">
                    <span class="v9-lin-ico"><i class="fa-solid fa-server" aria-hidden="true"></i></span>
                    <b>Hosting</b>
                </a>
                <a class="v9-lin-node" href="{{ route('it-hilfe.index') }}">
                    <span class="v9-lin-ico"><i class="fa-solid fa-life-ring" aria-hidden="true"></i></span>
                    <b>IT-Hilfe</b>
                </a>
            </div>

            <span class="v9-orbit-hint" aria-hidden="true">
                <i class="fa-solid fa-circle-nodes"></i> Jeder Knoten fuehrt direkt in seinen Bereich
            </span>
        </div>
    </section>

    {{-- ===================== SPRUNG-NAVIGATION (kein <nav>!) ===================== --}}
    <div class="v9-jump" role="navigation" aria-label="Schnellzugriff auf die Bereiche">
        <div class="v9-shell">
            <div class="v9-jump-row">
                <a class="v9-jump-link" href="#v9-windows"><i class="fa-brands fa-windows" aria-hidden="true"></i> Windows</a>
                <a class="v9-jump-link" href="#v9-apple"><i class="fa-brands fa-apple" aria-hidden="true"></i> iOS &amp; Mac</a>
                <a class="v9-jump-link" href="#v9-android"><i class="fa-brands fa-android" aria-hidden="true"></i> Android</a>
                <a class="v9-jump-link" href="#v9-webdesign"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i> Webdesign</a>
                <a class="v9-jump-link" href="#v9-webtools"><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i> Webtools</a>
                <a class="v9-jump-link" href="#v9-news"><i class="fa-solid fa-newspaper" aria-hidden="true"></i> News</a>
                <a class="v9-jump-link" href="#v9-shop"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i> Shop</a>
                <a class="v9-jump-link" href="#v9-hosting"><i class="fa-solid fa-server" aria-hidden="true"></i> Hosting</a>
                <a class="v9-jump-link" href="#v9-support"><i class="fa-solid fa-life-ring" aria-hidden="true"></i> IT-Hilfe</a>
                <a class="v9-jump-link" href="#v9-docs"><i class="fa-solid fa-file-lines" aria-hidden="true"></i> Dokumente</a>
            </div>
        </div>
    </div>

    {{-- ===================== ALLE BEREICHE (linear, SEO-vollstaendig) ===================== --}}
    <section class="v9-sec v9-areas" aria-label="Alle Bereiche von KOTSCH.TECH im Detail">
        <div class="v9-shell">
            <div class="v9-sec-head v9-reveal">
                <span class="v9-eyebrow">Das Spektrum</span>
                <h2>Alle Bereiche, von der Mitte aus gedacht</h2>
                <p>
                    Was im Hub als Knoten kreist, findest du hier ausgeschrieben: jeder Bereich von
                    KOTSCH.TECH mit klarem Nutzen und direktem Weg hinein.
                </p>
            </div>

            <div class="v9-grid">
                {{-- Windows --}}
                <a class="v9-card wide" id="v9-windows" href="{{ route('windows.index') }}" aria-label="Zu den Windows-Tools">
                    <div class="v9-card-top">
                        <span class="v9-card-ico" aria-hidden="true"><i class="fa-brands fa-windows"></i></span>
                        <span class="v9-card-num">01</span>
                    </div>
                    <h3>Windows-Software</h3>
                    <p>
                        Schlanke Desktop-Tools fuer wiederkehrende Aufgaben &ndash; ohne Schnickschnack,
                        ohne Tracking, mit Fokus auf Tempo und Zuverlaessigkeit im Alltag.
                    </p>
                    <span class="v9-card-go">Windows-Tools ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- iOS & Mac --}}
                <a class="v9-card wide" id="v9-apple" href="{{ route('apple.index') }}" aria-label="Zu den iOS und Mac Apps">
                    <div class="v9-card-top">
                        <span class="v9-card-ico" aria-hidden="true"><i class="fa-brands fa-apple"></i></span>
                        <span class="v9-card-num">02</span>
                    </div>
                    <h3>iOS &amp; Mac Apps <span class="v9-pill">App Store</span></h3>
                    <p>
                        Native Apps fuer iPhone, iPad und Mac mit aufgeraeumtem Interface.
                        Convertly+ ist bereits im App Store &ndash; weitere Projekte sind unterwegs.
                    </p>
                    <span class="v9-card-go">Apple-Apps ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Android --}}
                <a class="v9-card" id="v9-android" href="{{ route('android.index') }}" aria-label="Zum Android-Stand">
                    <div class="v9-card-top">
                        <span class="v9-card-ico alt" aria-hidden="true"><i class="fa-brands fa-android"></i></span>
                        <span class="v9-card-num">03</span>
                    </div>
                    <h3>Android Apps <span class="v9-pill is-soon">In Arbeit</span></h3>
                    <p>
                        Die mobile Welt endet nicht bei Apple: An Android-Apps wird mit demselben
                        Anspruch an sauberes Material-Design aktiv gearbeitet.
                    </p>
                    <span class="v9-card-go">Roadmap ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Webdesign --}}
                <a class="v9-card" id="v9-webdesign" href="{{ route('web.templates') }}" aria-label="Zum Webdesign">
                    <div class="v9-card-top">
                        <span class="v9-card-ico" aria-hidden="true"><i class="fa-solid fa-pen-ruler"></i></span>
                        <span class="v9-card-num">04</span>
                    </div>
                    <h3>Webdesign</h3>
                    <p>
                        Moderne, schnelle Websites mit klarer Struktur und sauberem Code &ndash;
                        ein Auftritt, der von 360 bis 1920&nbsp;px ueberzeugt.
                    </p>
                    <span class="v9-card-go">Webdesign entdecken <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Webtools --}}
                <a class="v9-card" id="v9-webtools" href="{{ route('webtools.show') }}" aria-label="Zu den Webtools">
                    <div class="v9-card-top">
                        <span class="v9-card-ico alt" aria-hidden="true"><i class="fa-solid fa-wand-magic-sparkles"></i></span>
                        <span class="v9-card-num">05</span>
                    </div>
                    <h3>Webtools <span class="v9-pill is-free">Kostenlos</span></h3>
                    <p>
                        Hunderte kostenlose Browser-Tools: umrechnen, konvertieren, generieren &ndash;
                        sofort nutzbar, ganz ohne Installation.
                    </p>
                    <span class="v9-card-go">Tools oeffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- News --}}
                <a class="v9-card" id="v9-news" href="{{ route('news.index') }}" aria-label="Zu News und Blog">
                    <div class="v9-card-top">
                        <span class="v9-card-ico" aria-hidden="true"><i class="fa-solid fa-newspaper"></i></span>
                        <span class="v9-card-num">06</span>
                    </div>
                    <h3>News &amp; Blog</h3>
                    <p>
                        Artikel und Notizen rund um Software, Apps und Web &ndash; verstaendlich
                        aufbereitet und ohne Fachchinesisch.
                    </p>
                    <span class="v9-card-go">Beitraege lesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Shop --}}
                <a class="v9-card" id="v9-shop" href="{{ route('shop.index') }}" aria-label="Zum Shop">
                    <div class="v9-card-top">
                        <span class="v9-card-ico alt" aria-hidden="true"><i class="fa-solid fa-bag-shopping"></i></span>
                        <span class="v9-card-num">07</span>
                    </div>
                    <h3>Shop <span class="v9-pill">Digital</span></h3>
                    <p>
                        Digitale Produkte zum sofortigen Download &ndash; sauber gebaut,
                        klar beschrieben und direkt einsetzbar.
                    </p>
                    <span class="v9-card-go">Shop besuchen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Hosting --}}
                <a class="v9-card" id="v9-hosting" href="{{ route('hosting.index') }}" aria-label="Zum Hosting">
                    <div class="v9-card-top">
                        <span class="v9-card-ico alt" aria-hidden="true"><i class="fa-solid fa-server"></i></span>
                        <span class="v9-card-num">08</span>
                    </div>
                    <h3>Hosting</h3>
                    <p>
                        Kleines, zuverlaessiges Hosting fuer Projekte, die persoenliche Betreuung
                        statt anonymer Massenpakete suchen &ndash; fair und uebersichtlich.
                    </p>
                    <span class="v9-card-go">Hosting ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- IT-Hilfe --}}
                <a class="v9-card" id="v9-support" href="{{ route('it-hilfe.index') }}" aria-label="Zur IT-Hilfe">
                    <div class="v9-card-top">
                        <span class="v9-card-ico" aria-hidden="true"><i class="fa-solid fa-life-ring"></i></span>
                        <span class="v9-card-num">09</span>
                    </div>
                    <h3>IT-Hilfe</h3>
                    <p>
                        PC langsam, Einrichtung noetig oder einfach eine Frage? Ich helfe verstaendlich
                        und direkt &ndash; ein Ansprechpartner statt anonymer Hotline.
                    </p>
                    <span class="v9-card-go">IT-Hilfe anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Dokumente --}}
                <a class="v9-card" id="v9-docs" href="{{ route('documents.index') }}" aria-label="Zu den Dokumenten">
                    <div class="v9-card-top">
                        <span class="v9-card-ico dark" aria-hidden="true"><i class="fa-solid fa-file-lines"></i></span>
                        <span class="v9-card-num">10</span>
                    </div>
                    <h3>Dokumente</h3>
                    <p>
                        Hilfreiche Vorlagen und Dokumente, gesammelt und uebersichtlich zum
                        Nachschlagen &ndash; bereit, wenn du sie brauchst.
                    </p>
                    <span class="v9-card-go">Dokumente ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ===================== WARUM / VERTRAUEN ===================== --}}
    <section class="v9-sec v9-why" aria-label="Warum KOTSCH.TECH">
        <div class="v9-shell">
            <div class="v9-sec-head v9-reveal">
                <span class="v9-eyebrow">Warum ein Hub?</span>
                <h2>Ein Ansprechpartner fuer das ganze Spektrum</h2>
                <p>
                    Statt vieler Dienstleister kreist alles um eine Marke &ndash; das macht Wege kurz,
                    Absprachen einfach und das Ergebnis stimmig.
                </p>
            </div>
            <div class="v9-why-grid">
                <div class="v9-why-card v9-reveal">
                    <i class="fa-solid fa-circle-nodes" aria-hidden="true"></i>
                    <h3>Alles aus einer Hand</h3>
                    <p>Von der App ueber die Website bis zum Hosting: ein roter Faden, eine Handschrift, keine Reibungsverluste zwischen Gewerken.</p>
                </div>
                <div class="v9-why-card v9-reveal">
                    <i class="fa-solid fa-user-gear" aria-hidden="true"></i>
                    <h3>Direkt &amp; persoenlich</h3>
                    <p>Du sprichst mit dem Menschen, der baut &ndash; ehrliche Einschaetzung statt Vertriebsmasche, verstaendlich erklaert.</p>
                </div>
                <div class="v9-why-card v9-reveal">
                    <i class="fa-solid fa-shield-halved" aria-hidden="true"></i>
                    <h3>Sauber &amp; verlaesslich</h3>
                    <p>Datensparsam, gepflegt und mit Blick fuers Detail &ndash; Technik, die im Alltag laeuft und bleibt.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- ===================== FINALE CTA ===================== --}}
    <section class="v9-cta" aria-label="Kontakt aufnehmen">
        <div class="v9-cta-rings" aria-hidden="true">
            <span></span><span></span><span></span><span></span>
        </div>
        <div class="v9-shell">
            <div class="v9-cta-inner">
                <div class="v9-reveal">
                    <span class="v9-eyebrow is-dark">Lass uns starten</span>
                    <h2>Deine Idee ins Zentrum &ndash; ich baue drumherum</h2>
                    <p>
                        Ob App, Website, ein passendes Tool oder Hilfe bei der Technik: Schreib mir kurz,
                        worum es geht. Du bekommst eine ehrliche, persoenliche Einschaetzung &ndash;
                        ohne Vertriebsmasche.
                    </p>
                </div>
                <div class="v9-cta-card v9-reveal">
                    <div class="v9-who">
                        <span class="v9-who-mark" aria-hidden="true">
                            <img src="{{ asset('img/logo-mark.png') }}" alt="">
                        </span>
                        <div>
                            <b>Arthur Kotsch</b>
                            <span>Entwickler &amp; Gruender von KOTSCH.TECH</span>
                        </div>
                    </div>
                    <a href="{{ route('kontakt') }}" class="v9-btn v9-btn-primary">
                        Projekt anfragen <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
                    </a>
                    <div class="v9-cta-mailrow">
                        oder direkt: <a href="mailto:arthurkotsch@kotsch.tech">arthurkotsch@kotsch.tech</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

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

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

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

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

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

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