@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Software, Apps, Web & IT')
@section('meta_description', 'Arthur Kotsch entwickelt Software, iOS-, Mac- und Android-Apps, Webdesign, kostenlose Webtools, Shop, Hosting und IT-Hilfe - klar strukturiert, alles aus einer Hand.')
@section('og_title', 'KOTSCH.TECH - Software, Apps & Web von Arthur Kotsch, klar gebaut')
@section('og_description', 'Brutalistisch ehrlich: Windows-Software, Apple- und Android-Apps, Webdesign, Webtools, News, Shop, Hosting und persönliche IT-Hilfe von Arthur Kotsch.')
@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: NEO-BRUTALIST
       Alle Selektoren mit .v8- praefixiert (keine Kollision mit app.css).
       Dicke Rahmen, harte Offset-Schatten ohne Blur, Mono-Akzente,
       kraeftige Markenfarbbloecke, sichtbares Raster, eckige Buttons.
       Aufgeraeumt & hochwertig - kein Chaos.
       ============================================================ */

    .v8-home {
        --v8-ink: var(--text-main);
        --v8-soft: var(--text-muted);
        --v8-line: var(--text-main);            /* Rahmenfarbe (dick, schwarz) */
        --v8-bw: 2.5px;                          /* Rahmenstaerke Standard */
        --v8-bw-lg: 3px;                         /* Rahmenstaerke gross */
        --v8-shadow: 8px 8px 0 var(--v8-line);   /* harter Offset-Schatten */
        --v8-shadow-sm: 5px 5px 0 var(--v8-line);
        --v8-shadow-lg: 12px 12px 0 var(--v8-line);
        --v8-shadow-blue: 8px 8px 0 var(--primary-dark);
        --v8-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
        --v8-edge: clamp(1rem, 4vw, 2.5rem);
        --v8-rad: 6px;                           /* fast eckig */
        color: var(--v8-ink);
        background:
            linear-gradient(var(--bg-light) 0 0) padding-box,
            var(--bg);
        position: relative;
        overflow-x: clip;
        font-synthesis-weight: none;
        /* sichtbares Hintergrundraster */
        background-image:
            linear-gradient(to right, rgba(15,23,42,0.045) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(15,23,42,0.045) 1px, transparent 1px);
        background-size: 46px 46px;
        background-color: var(--bg);
    }
    .v8-home *,
    .v8-home *::before,
    .v8-home *::after { box-sizing: border-box; }

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

    /* Marken-Verlaufstext (nur sparsam, fuer Akzentwoerter) */
    .v8-grad {
        background: linear-gradient(108deg, var(--primary) 0%, var(--accent) 52%, var(--primary-light) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* ---------- Mono-Label / Kicker (brutalistisch eckig) ---------- */
    .v8-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        font-family: var(--v8-mono);
        font-size: clamp(0.66rem, 1.4vw, 0.74rem);
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 0.42rem 0.7rem;
        border: var(--v8-bw) solid var(--v8-line);
        border-radius: 0;
        background: var(--bg);
        line-height: 1;
        box-shadow: var(--v8-shadow-sm);
    }
    .v8-kicker.is-blue { background: var(--primary); color: #fff; border-color: var(--v8-line); }
    .v8-kicker.is-violet { background: var(--accent); color: #fff; }
    .v8-kicker.is-light { background: var(--bg); color: var(--v8-ink); }
    .v8-kicker .v8-dot {
        width: 8px; height: 8px; border-radius: 0;
        background: var(--success);
        border: 1.5px solid var(--v8-line);
    }
    .v8-kicker.is-blue .v8-dot,
    .v8-kicker.is-violet .v8-dot { border-color: rgba(255,255,255,0.85); }

    /* ---------- Buttons (gross, eckig, harter Schatten) ---------- */
    .v8-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-weight: 800;
        font-size: clamp(0.92rem, 1.4vw, 1.02rem);
        letter-spacing: 0.01em;
        padding: 0.92rem 1.5rem;
        border: var(--v8-bw-lg) solid var(--v8-line);
        border-radius: var(--v8-rad);
        text-decoration: none;
        background: var(--bg);
        color: var(--v8-ink);
        box-shadow: var(--v8-shadow);
        transition: transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .14s cubic-bezier(.2,.8,.3,1), background .18s ease, color .18s ease;
        will-change: transform;
    }
    .v8-btn i { transition: transform .18s ease; }
    .v8-btn:hover { transform: translate(-3px, -3px); box-shadow: var(--v8-shadow-lg); }
    .v8-btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--v8-line); }
    .v8-btn:hover i.v8-arr { transform: translateX(4px); }
    .v8-btn-primary { background: var(--primary); color: #fff; }
    .v8-btn-primary:hover { background: var(--primary-dark); }
    .v8-btn-violet { background: var(--accent); color: #fff; }
    .v8-btn-ondark {
        background: var(--bg-dark);
        color: #fff;
        border-color: #fff;
        box-shadow: 8px 8px 0 var(--primary);
    }
    .v8-btn-ondark:hover { box-shadow: 12px 12px 0 var(--primary); }
    .v8-btn:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 3px; }

    /* generischer brutalistischer Block */
    .v8-box {
        border: var(--v8-bw-lg) solid var(--v8-line);
        border-radius: var(--v8-rad);
        background: var(--bg);
        box-shadow: var(--v8-shadow);
    }

    /* ============================================================
       HERO  (brutalistisches Plakat: dicke Box, Raster-Visual)
       ============================================================ */
    .v8-hero {
        position: relative;
        padding-top: clamp(122px, 15vh, 168px);
        padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
    }
    .v8-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(1.6rem, 4vw, 2.4rem);
        align-items: stretch;
    }
    @media (min-width: 960px) {
        .v8-hero-grid {
            grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
            gap: clamp(1.6rem, 3vw, 2.2rem);
        }
    }

    .v8-hero-main {
        border: var(--v8-bw-lg) solid var(--v8-line);
        border-radius: var(--v8-rad);
        background: var(--bg);
        box-shadow: var(--v8-shadow-lg);
        padding: clamp(1.6rem, 4vw, 3rem);
        position: relative;
        overflow: hidden;
    }
    /* Eck-Marker oben rechts */
    .v8-hero-main::before {
        content: "";
        position: absolute;
        top: 0; right: 0;
        width: clamp(56px, 9vw, 96px);
        aspect-ratio: 1;
        background: var(--accent);
        border-left: var(--v8-bw-lg) solid var(--v8-line);
        border-bottom: var(--v8-bw-lg) solid var(--v8-line);
        clip-path: polygon(100% 0, 100% 100%, 0 0);
    }
    .v8-hero-title {
        font-size: clamp(2.4rem, 7.2vw, 5rem);
        line-height: 0.98;
        letter-spacing: -0.035em;
        font-weight: 800;
        margin: 1.1rem 0 0;
        text-transform: none;
    }
    .v8-hero-title .v8-l { display: block; }
    .v8-hero-mark {
        font-family: var(--v8-mono);
        font-size: clamp(0.74rem, 1.6vw, 0.9rem);
        font-weight: 700;
        letter-spacing: 0.14em;
        color: var(--v8-soft);
        text-transform: uppercase;
        margin-top: 1.4rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }
    .v8-hero-mark::after {
        content: "";
        flex: 1;
        height: var(--v8-bw);
        background:
            repeating-linear-gradient(90deg, var(--v8-line) 0 10px, transparent 10px 18px);
        opacity: 0.55;
    }
    .v8-hero-sub {
        margin: 1.3rem 0 0;
        max-width: 52ch;
        font-size: clamp(1rem, 1.9vw, 1.18rem);
        line-height: 1.6;
        color: var(--v8-soft);
    }
    .v8-hero-actions {
        margin-top: clamp(1.5rem, 3.5vw, 2.1rem);
        display: flex;
        flex-wrap: wrap;
        gap: 0.9rem;
    }

    /* Hero-Seitenspalte: Statbox + Visual-Mockup */
    .v8-hero-side {
        display: grid;
        grid-template-rows: auto 1fr;
        gap: clamp(1.6rem, 4vw, 2.4rem);
    }
    .v8-statbox {
        border: var(--v8-bw-lg) solid var(--v8-line);
        border-radius: var(--v8-rad);
        background: var(--primary);
        color: #fff;
        box-shadow: var(--v8-shadow);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .v8-statbox > div {
        padding: clamp(0.9rem, 2.4vw, 1.3rem) 0.7rem;
        text-align: center;
        border-right: var(--v8-bw) solid rgba(255,255,255,0.4);
    }
    .v8-statbox > div:last-child { border-right: 0; }
    .v8-statbox dt {
        font-size: clamp(1.3rem, 3.4vw, 1.85rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1;
    }
    .v8-statbox dd {
        margin: 0.4rem 0 0;
        font-family: var(--v8-mono);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.92;
        line-height: 1.2;
    }

    /* Brutalistisches "Terminal/Window"-Mockup statt Foto */
    .v8-window {
        border: var(--v8-bw-lg) solid var(--v8-line);
        border-radius: var(--v8-rad);
        background: var(--bg-dark);
        box-shadow: var(--v8-shadow-blue);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: clamp(240px, 34vw, 320px);
    }
    .v8-window-bar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.85rem;
        background: var(--primary);
        border-bottom: var(--v8-bw) solid var(--v8-line);
    }
    .v8-window-bar .v8-led {
        width: 11px; height: 11px;
        border-radius: 0;
        border: 1.5px solid rgba(0,0,0,0.55);
        background: #fff;
    }
    .v8-window-bar .v8-wt {
        margin-left: auto;
        font-family: var(--v8-mono);
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: #fff;
        text-transform: uppercase;
    }
    .v8-window-body {
        flex: 1;
        padding: clamp(0.9rem, 2.4vw, 1.25rem);
        font-family: var(--v8-mono);
        font-size: clamp(0.74rem, 1.6vw, 0.86rem);
        line-height: 1.85;
        color: var(--text-light);
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        justify-content: center;
    }
    .v8-window-body .v8-cl { color: #fff; }
    .v8-window-body .v8-tok-key { color: var(--primary-light); font-weight: 700; }
    .v8-window-body .v8-tok-str { color: var(--success); }
    .v8-window-body .v8-tok-com { color: var(--text-muted); }
    .v8-window-body .v8-caret {
        display: inline-block;
        width: 9px; height: 1.05em;
        vertical-align: -0.18em;
        background: var(--primary-light);
        margin-left: 2px;
        animation: v8-blink 1.05s steps(1) infinite;
    }
    @keyframes v8-blink { 50% { opacity: 0; } }

    /* ============================================================
       MARQUEE-Band (Mono, brutalistische Lauf-Leiste)
       ============================================================ */
    .v8-marquee {
        border-block: var(--v8-bw-lg) solid var(--v8-line);
        background: var(--v8-ink);
        color: var(--bg);
        overflow: hidden;
        margin-top: clamp(1.6rem, 4vw, 2.4rem);
    }
    .v8-marquee-track {
        display: flex;
        width: max-content;
        gap: 0;
        animation: v8-scroll 34s linear infinite;
    }
    .v8-marquee:hover .v8-marquee-track { animation-play-state: paused; }
    .v8-marquee-track span {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.7rem 1.4rem;
        font-family: var(--v8-mono);
        font-size: clamp(0.74rem, 1.5vw, 0.86rem);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .v8-marquee-track span i { color: var(--primary-light); }
    .v8-marquee-track span::after {
        content: "/";
        margin-left: 0.7rem;
        color: var(--primary);
        font-weight: 800;
    }
    @keyframes v8-scroll {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }

    /* ============================================================
       BEREICHS-RASTER (brutalistische Bloecke, sichtbares Gitter)
       Hauptbereiche als grosse Karten mit Index-Nummern.
       ============================================================ */
    .v8-section {
        padding: clamp(3rem, 7vw, 5.5rem) 0;
    }
    .v8-head {
        display: grid;
        gap: 1rem;
        margin-bottom: clamp(2rem, 4vw, 3rem);
        max-width: 880px;
    }
    .v8-head h2 {
        font-size: clamp(1.8rem, 5vw, 3rem);
        line-height: 1.04;
        letter-spacing: -0.03em;
        font-weight: 800;
        margin: 0;
    }
    .v8-head p {
        font-size: clamp(1rem, 1.8vw, 1.16rem);
        line-height: 1.6;
        color: var(--v8-soft);
        margin: 0;
        max-width: 60ch;
    }

    /* Das brutalistische Bereichsraster: bewusst "gefugt" (dicke Linien) */
    .v8-blocks {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
        gap: clamp(1.1rem, 2.4vw, 1.6rem);
    }
    .v8-block {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        padding: clamp(1.5rem, 3vw, 2.1rem);
        border: var(--v8-bw-lg) solid var(--v8-line);
        border-radius: var(--v8-rad);
        background: var(--bg);
        box-shadow: var(--v8-shadow);
        text-decoration: none;
        color: var(--v8-ink);
        overflow: hidden;
        isolation: isolate;
        transition: transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .14s cubic-bezier(.2,.8,.3,1), background .18s ease;
    }
    .v8-block:hover { transform: translate(-4px, -4px); box-shadow: var(--v8-shadow-lg); }
    .v8-block:active { transform: translate(2px, 2px); box-shadow: var(--v8-shadow-sm); }
    .v8-block:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 4px; }

    /* grosse Index-Nummer im Hintergrund */
    .v8-block-no {
        position: absolute;
        top: clamp(0.4rem, 1.5vw, 0.7rem);
        right: clamp(0.6rem, 2vw, 1rem);
        z-index: -1;
        font-family: var(--v8-mono);
        font-size: clamp(3.4rem, 9vw, 6rem);
        font-weight: 800;
        line-height: 1;
        color: var(--primary-soft);
        letter-spacing: -0.04em;
        user-select: none;
    }
    .v8-block-ico {
        width: 56px; height: 56px;
        display: grid; place-items: center;
        border: var(--v8-bw) solid var(--v8-line);
        border-radius: var(--v8-rad);
        font-size: 1.5rem;
        color: #fff;
        background: var(--primary);
        box-shadow: var(--v8-shadow-sm);
    }
    .v8-block.is-violet .v8-block-ico { background: var(--accent); }
    .v8-block.is-ink .v8-block-ico { background: var(--v8-ink); }
    .v8-block.is-success .v8-block-ico { background: var(--success); }
    .v8-block h3 {
        font-size: clamp(1.25rem, 2.4vw, 1.5rem);
        font-weight: 800;
        letter-spacing: -0.015em;
        margin: 0.1rem 0 0;
    }
    .v8-block p {
        margin: 0;
        font-size: 0.97rem;
        line-height: 1.55;
        color: var(--v8-soft);
        flex: 1;
    }
    .v8-block-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin-top: 0.2rem;
    }
    .v8-pill {
        font-family: var(--v8-mono);
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0.3rem 0.55rem;
        border: var(--v8-bw) solid var(--v8-line);
        border-radius: 0;
        background: var(--bg-light);
        color: var(--v8-ink);
    }
    .v8-pill.is-live { background: var(--success); color: #fff; }
    .v8-pill.is-soon { background: var(--accent); color: #fff; }
    .v8-block-go {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 800;
        font-size: 0.92rem;
        color: var(--primary-dark);
        margin-top: 0.4rem;
        font-family: var(--v8-mono);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .v8-block-go i { transition: transform .18s ease; }
    .v8-block:hover .v8-block-go i { transform: translateX(5px); }

    /* Die zwei Hervorhebungs-Bloecke spannen breiter (asymmetrisches Raster) */
    @media (min-width: 760px) {
        .v8-blocks.v8-blocks-primary { grid-template-columns: repeat(6, 1fr); }
        .v8-blocks.v8-blocks-primary > .v8-block { grid-column: span 2; }
        /* Windows & Apple groesser */
        .v8-blocks.v8-blocks-primary > .v8-block.span3 { grid-column: span 3; }
    }

    /* ============================================================
       SEKTION: Sekundaere Bereiche (Webtools/News/Shop/Docs)
       als kompakte brutalistische Listenzeilen
       ============================================================ */
    .v8-sec-alt {
        background: var(--v8-ink);
        color: var(--bg);
        border-block: var(--v8-bw-lg) solid var(--v8-line);
    }
    .v8-sec-alt .v8-head h2 { color: #fff; }
    .v8-sec-alt .v8-head p { color: var(--text-light); }

    .v8-rows {
        display: grid;
        gap: clamp(1rem, 2.2vw, 1.4rem);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    }
    .v8-row {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1rem;
        align-items: start;
        padding: clamp(1.3rem, 2.8vw, 1.8rem);
        border: var(--v8-bw-lg) solid #fff;
        border-radius: var(--v8-rad);
        background: rgba(255,255,255,0.04);
        box-shadow: 6px 6px 0 var(--primary);
        text-decoration: none;
        color: #fff;
        transition: transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .14s cubic-bezier(.2,.8,.3,1), background .18s ease;
    }
    .v8-row:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--primary); background: rgba(255,255,255,0.08); }
    .v8-row:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--primary); }
    .v8-row:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 4px; }
    .v8-row-ico {
        width: 52px; height: 52px;
        display: grid; place-items: center;
        border: var(--v8-bw) solid #fff;
        border-radius: var(--v8-rad);
        font-size: 1.35rem;
        color: var(--bg-dark);
        background: var(--primary-light);
    }
    .v8-row.is-free .v8-row-ico { background: var(--success); color: #fff; }
    .v8-row.is-violet .v8-row-ico { background: var(--accent); color: #fff; }
    .v8-row-body h3 {
        font-size: 1.2rem;
        font-weight: 800;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex-wrap: wrap;
    }
    .v8-row-body h3 .v8-tag {
        font-family: var(--v8-mono);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 0.22rem 0.45rem;
        border: 1.5px solid currentColor;
        color: var(--success);
    }
    .v8-row-body h3 .v8-tag.is-violet { color: var(--primary-light); }
    .v8-row-body p {
        margin: 0.5rem 0 0;
        font-size: 0.93rem;
        line-height: 1.5;
        color: var(--text-light);
    }
    .v8-row-body .v8-row-go {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        margin-top: 0.7rem;
        font-family: var(--v8-mono);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--primary-light);
    }
    .v8-row:hover .v8-row-go i { transform: translateX(5px); }
    .v8-row-go i { transition: transform .18s ease; }

    /* ============================================================
       SEKTION: Ablauf / 3 Schritte (brutalistische Spalten)
       ============================================================ */
    .v8-steps {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
        gap: clamp(1.1rem, 2.4vw, 1.6rem);
        counter-reset: v8step;
    }
    .v8-step {
        position: relative;
        padding: clamp(1.5rem, 3vw, 2rem);
        border: var(--v8-bw-lg) solid var(--v8-line);
        border-radius: var(--v8-rad);
        background: var(--bg);
        box-shadow: var(--v8-shadow);
        counter-increment: v8step;
    }
    .v8-step::before {
        content: counter(v8step, decimal-leading-zero);
        display: inline-grid;
        place-items: center;
        width: 48px; height: 48px;
        margin-bottom: 1rem;
        border: var(--v8-bw) solid var(--v8-line);
        border-radius: var(--v8-rad);
        background: var(--primary);
        color: #fff;
        font-family: var(--v8-mono);
        font-size: 1.05rem;
        font-weight: 800;
        box-shadow: var(--v8-shadow-sm);
    }
    .v8-step:nth-child(2)::before { background: var(--accent); }
    .v8-step:nth-child(3)::before { background: var(--success); }
    .v8-step h3 {
        font-size: 1.2rem;
        font-weight: 800;
        margin: 0 0 0.5rem;
        letter-spacing: -0.01em;
    }
    .v8-step p {
        margin: 0;
        font-size: 0.96rem;
        line-height: 1.55;
        color: var(--v8-soft);
    }

    /* ============================================================
       FINALE CTA (kraeftiger Blau/Violett-Block, brutalistisch)
       ============================================================ */
    .v8-cta-wrap { padding: clamp(3rem, 7vw, 5.5rem) 0; }
    .v8-cta {
        position: relative;
        border: var(--v8-bw-lg) solid var(--v8-line);
        border-radius: var(--v8-rad);
        background: var(--primary);
        color: #fff;
        box-shadow: var(--v8-shadow-lg);
        overflow: hidden;
        padding: clamp(2.2rem, 5vw, 4rem);
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(1.8rem, 4vw, 2.6rem);
        align-items: center;
    }
    @media (min-width: 880px) {
        .v8-cta { grid-template-columns: 1.3fr 1fr; }
    }
    /* diagonale Akzent-Streifen rechts (rein dekorativ, kein Sticky-Vorfahre) */
    .v8-cta::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 42%;
        background:
            repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.10) 18px 20px);
        pointer-events: none;
    }
    .v8-cta-copy { position: relative; z-index: 1; }
    .v8-cta h2 {
        font-size: clamp(2rem, 5vw, 3.3rem);
        line-height: 1.04;
        letter-spacing: -0.03em;
        font-weight: 800;
        margin: 1rem 0 0;
    }
    .v8-cta-copy > p {
        margin: 1.1rem 0 0;
        font-size: clamp(1.02rem, 1.8vw, 1.18rem);
        line-height: 1.6;
        max-width: 48ch;
        color: rgba(255,255,255,0.92);
    }
    .v8-cta-card {
        position: relative;
        z-index: 1;
        border: var(--v8-bw-lg) solid var(--v8-line);
        border-radius: var(--v8-rad);
        background: var(--bg);
        color: var(--v8-ink);
        box-shadow: var(--v8-shadow);
        padding: clamp(1.4rem, 3vw, 1.9rem);
    }
    .v8-cta-card .v8-who {
        display: flex; align-items: center; gap: 0.85rem;
        margin-bottom: 1.1rem;
        padding-bottom: 1.1rem;
        border-bottom: var(--v8-bw) solid var(--v8-line);
    }
    .v8-cta-card .v8-who .v8-avatar {
        width: 54px; height: 54px;
        flex: 0 0 auto;
        display: grid; place-items: center;
        border: var(--v8-bw) solid var(--v8-line);
        border-radius: var(--v8-rad);
        background: var(--accent);
        color: #fff;
        font-size: 1.3rem;
        box-shadow: var(--v8-shadow-sm);
    }
    .v8-cta-card .v8-who b { display: block; font-size: 1.05rem; font-weight: 800; }
    .v8-cta-card .v8-who span {
        font-family: var(--v8-mono);
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        color: var(--v8-soft);
    }
    .v8-cta-card .v8-btn { width: 100%; justify-content: center; }
    .v8-cta-mailrow {
        margin-top: 0.9rem;
        text-align: center;
        font-family: var(--v8-mono);
        font-size: 0.8rem;
        color: var(--v8-soft);
    }
    .v8-cta-mailrow a { color: var(--primary-dark); text-decoration: none; font-weight: 800; }
    .v8-cta-mailrow a:hover { text-decoration: underline; }

    /* Inhalts-Sprungnavigation (brutalistische Tab-Leiste) */
    .v8-jump {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        margin-top: clamp(1.4rem, 3vw, 2rem);
    }
    .v8-jump a {
        font-family: var(--v8-mono);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0.5rem 0.8rem;
        border: var(--v8-bw) solid var(--v8-line);
        border-radius: 0;
        background: var(--bg);
        color: var(--v8-ink);
        text-decoration: none;
        box-shadow: 4px 4px 0 var(--v8-line);
        transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
    }
    .v8-jump a:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--primary); background: var(--primary); color: #fff; }
    .v8-jump a:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 3px; }

    /* ============================================================
       REVEAL (eigene Variante; ohne JS sofort sichtbar)
       ============================================================ */
    .v8-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s 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-FEINSCHLIFF
       ============================================================ */
    @media (max-width: 760px) {
        .v8-home { --v8-shadow: 6px 6px 0 var(--v8-line); --v8-shadow-lg: 8px 8px 0 var(--v8-line); }
        .v8-statbox dd { font-size: 0.56rem; }
    }
    @media (max-width: 440px) {
        .v8-home { background-size: 36px 36px; }
        .v8-btn { width: 100%; justify-content: center; }
        .v8-hero-actions { gap: 0.7rem; }
    }

    /* Reduced Motion */
    @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; }
        .v8-marquee-track { transform: none !important; }
    }
</style>

    {{-- ========================= HERO ========================= --}}
    <section class="v8-hero" aria-label="Einleitung KOTSCH.TECH">
        <div class="v8-shell">
            <div class="v8-hero-grid">
                {{-- Haupt-Plakat --}}
                <div class="v8-hero-main">
                    <span class="v8-kicker is-blue">
                        <span class="v8-dot" aria-hidden="true"></span>
                        Persönliche Tech-Marke
                    </span>
                    <h1 class="v8-hero-title">
                        <span class="v8-l">Eine Marke.</span>
                        <span class="v8-l v8-grad">Alles selbst</span>
                        <span class="v8-l">gebaut.</span>
                    </h1>
                    <div class="v8-hero-mark" aria-hidden="true">KOTSCH.TECH &mdash; Arthur Kotsch</div>
                    <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; ehrlich, direkt und alles aus einer Hand.
                    </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 v8-arr" aria-hidden="true"></i>
                        </a>
                        <a href="{{ route('webtools.show') }}" class="v8-btn">
                            <i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i> Kostenlose Webtools
                        </a>
                    </div>

                    {{-- Sprungnavigation (KEIN <nav> - role=navigation Pflicht) --}}
                    <div class="v8-jump" role="navigation" aria-label="Bereiche dieser Seite">
                        <a href="#v8-windows">Windows</a>
                        <a href="#v8-apple">iOS &amp; Mac</a>
                        <a href="#v8-android">Android</a>
                        <a href="#v8-web">Webdesign</a>
                        <a href="#v8-services">Hosting &amp; IT</a>
                        <a href="#v8-more">Tools &amp; Shop</a>
                    </div>
                </div>

                {{-- Seitenspalte: Statbox + Code-Window-Mockup --}}
                <div class="v8-hero-side">
                    <dl class="v8-statbox" aria-label="Eckdaten">
                        <div>
                            <dt>4</dt>
                            <dd>Plattformen</dd>
                        </div>
                        <div>
                            <dt>1</dt>
                            <dd>Ansprech&shy;partner</dd>
                        </div>
                        <div>
                            <dt>9+</dt>
                            <dd>Bereiche</dd>
                        </div>
                    </dl>

                    <div class="v8-window" aria-hidden="true">
                        <div class="v8-window-bar">
                            <span class="v8-led"></span>
                            <span class="v8-led"></span>
                            <span class="v8-led"></span>
                            <span class="v8-wt">kotsch.tech</span>
                        </div>
                        <div class="v8-window-body">
                            <span class="v8-tok-com">// was hier entsteht</span>
                            <span><span class="v8-tok-key">const</span> <span class="v8-cl">stack</span> = [</span>
                            <span>&nbsp;&nbsp;<span class="v8-tok-str">"software"</span>,</span>
                            <span>&nbsp;&nbsp;<span class="v8-tok-str">"apps"</span>,</span>
                            <span>&nbsp;&nbsp;<span class="v8-tok-str">"webdesign"</span>,</span>
                            <span>&nbsp;&nbsp;<span class="v8-tok-str">"hosting"</span></span>
                            <span>];<span class="v8-caret"></span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ========================= MARQUEE ========================= --}}
    <div class="v8-marquee" aria-hidden="true">
        <div class="v8-marquee-track">
            <span><i class="fa-brands fa-windows"></i> Windows-Software</span>
            <span><i class="fa-brands fa-apple"></i> iOS &amp; Mac Apps</span>
            <span><i class="fa-brands fa-android"></i> Android Apps</span>
            <span><i class="fa-solid fa-pen-ruler"></i> Webdesign</span>
            <span><i class="fa-solid fa-wand-magic-sparkles"></i> Webtools</span>
            <span><i class="fa-solid fa-server"></i> Hosting</span>
            <span><i class="fa-solid fa-life-ring"></i> IT-Hilfe</span>
            <span><i class="fa-solid fa-bag-shopping"></i> Shop</span>
            {{-- Duplikat fuer nahtloses Scrollen --}}
            <span><i class="fa-brands fa-windows"></i> Windows-Software</span>
            <span><i class="fa-brands fa-apple"></i> iOS &amp; Mac Apps</span>
            <span><i class="fa-brands fa-android"></i> Android Apps</span>
            <span><i class="fa-solid fa-pen-ruler"></i> Webdesign</span>
            <span><i class="fa-solid fa-wand-magic-sparkles"></i> Webtools</span>
            <span><i class="fa-solid fa-server"></i> Hosting</span>
            <span><i class="fa-solid fa-life-ring"></i> IT-Hilfe</span>
            <span><i class="fa-solid fa-bag-shopping"></i> Shop</span>
        </div>
    </div>

    {{-- ===================== HAUPTBEREICHE (Build-Bloecke) ===================== --}}
    <section class="v8-section" aria-label="Was ich entwickle: Software, Apps und Webdesign">
        <div class="v8-shell">
            <div class="v8-head v8-reveal">
                <span class="v8-kicker is-light"><i class="fa-solid fa-cubes" aria-hidden="true"></i> Was ich baue</span>
                <h2>Software, Apps und <span class="v8-grad">Webdesign</span> &ndash; ein Stack, eine Hand</h2>
                <p>
                    Vier Disziplinen, dieselbe Sorgfalt: native Programme, mobile Apps und schnelle
                    Websites. Jeder Block führt direkt zum jeweiligen Bereich.
                </p>
            </div>

            <div class="v8-blocks v8-blocks-primary">
                {{-- Windows (breit) --}}
                <a href="{{ route('windows.index') }}" class="v8-block span3 v8-reveal" id="v8-windows">
                    <span class="v8-block-no" aria-hidden="true">01</span>
                    <span class="v8-block-ico" aria-hidden="true"><i class="fa-brands fa-windows"></i></span>
                    <h3>Windows-Software</h3>
                    <p>
                        Schlanke Desktop-Tools für wiederkehrende Aufgaben &ndash; ohne Tracking,
                        ohne Ballast, mit Fokus auf Tempo und Zuverlässigkeit im Alltag.
                    </p>
                    <div class="v8-block-meta" aria-hidden="true">
                        <span class="v8-pill">Schlanke Installer</span>
                        <span class="v8-pill">Datensparsam</span>
                    </div>
                    <span class="v8-block-go">Tools ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Apple (breit) --}}
                <a href="{{ route('apple.index') }}" class="v8-block span3 is-violet v8-reveal" id="v8-apple">
                    <span class="v8-block-no" aria-hidden="true">02</span>
                    <span class="v8-block-ico" aria-hidden="true"><i class="fa-brands fa-apple"></i></span>
                    <h3>iOS &amp; Mac Apps</h3>
                    <p>
                        Native Anwendungen für iPhone, iPad und Mac mit aufgeräumtem Interface.
                        Convertly+ ist bereits im App Store &ndash; weitere Projekte folgen.
                    </p>
                    <div class="v8-block-meta" aria-hidden="true">
                        <span class="v8-pill is-live">Convertly+ live</span>
                        <span class="v8-pill">Native UX</span>
                    </div>
                    <span class="v8-block-go">Apple-Apps ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Android --}}
                <a href="{{ route('android.index') }}" class="v8-block is-ink v8-reveal" id="v8-android">
                    <span class="v8-block-no" aria-hidden="true">03</span>
                    <span class="v8-block-ico" aria-hidden="true"><i class="fa-brands fa-android"></i></span>
                    <h3>Android Apps</h3>
                    <p>
                        Auch für Android wird aktiv gearbeitet &ndash; mit demselben Anspruch an
                        sauberes Material-Design und flüssige Bedienung.
                    </p>
                    <div class="v8-block-meta" aria-hidden="true">
                        <span class="v8-pill is-soon">In Entwicklung</span>
                    </div>
                    <span class="v8-block-go">Roadmap ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Webdesign --}}
                <a href="{{ route('web.templates') }}" class="v8-block v8-reveal" id="v8-web">
                    <span class="v8-block-no" aria-hidden="true">04</span>
                    <span class="v8-block-ico" aria-hidden="true"><i class="fa-solid fa-pen-ruler"></i></span>
                    <h3>Webdesign</h3>
                    <p>
                        Moderne, schnelle Websites mit klarer Struktur und sauberem Code &ndash;
                        ein Auftritt, der von 360 bis 1920&nbsp;px sitzt.
                    </p>
                    <div class="v8-block-meta" aria-hidden="true">
                        <span class="v8-pill">Performance</span>
                        <span class="v8-pill">SEO-Basis</span>
                    </div>
                    <span class="v8-block-go">Webdesign entdecken <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Webtools (Akzent success) --}}
                <a href="{{ route('webtools.show') }}" class="v8-block is-success v8-reveal" id="v8-webtools">
                    <span class="v8-block-no" aria-hidden="true">05</span>
                    <span class="v8-block-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; sofort nutzbar, ganz ohne Installation.
                    </p>
                    <div class="v8-block-meta" aria-hidden="true">
                        <span class="v8-pill is-live">Kostenlos</span>
                        <span class="v8-pill">Im Browser</span>
                    </div>
                    <span class="v8-block-go">Tools öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ===================== SERVICES: HOSTING & IT-HILFE ===================== --}}
    <section class="v8-section" aria-label="Betrieb und Support: Hosting und IT-Hilfe" id="v8-services" style="padding-top:0;">
        <div class="v8-shell">
            <div class="v8-head v8-reveal">
                <span class="v8-kicker is-violet"><i class="fa-solid fa-headset" aria-hidden="true"></i> Betrieb &amp; Support</span>
                <h2>Damit es läuft &ndash; und <span class="v8-grad">läuft</span></h2>
                <p>
                    Nicht nur bauen, sondern betreiben und helfen: zuverlässiges Hosting und
                    persönliche IT-Hilfe ohne Hotline-Warteschleife.
                </p>
            </div>

            <div class="v8-blocks">
                {{-- Hosting --}}
                <a href="{{ route('hosting.index') }}" class="v8-block v8-reveal" id="v8-hosting">
                    <span class="v8-block-no" aria-hidden="true">06</span>
                    <span class="v8-block-ico" aria-hidden="true"><i class="fa-solid fa-server"></i></span>
                    <h3>Hosting</h3>
                    <p>
                        Kleines, zuverlässiges Hosting für Projekte, die persönliche Betreuung statt
                        anonymer Massenpakete suchen &ndash; fair und übersichtlich.
                    </p>
                    <div class="v8-block-meta" aria-hidden="true">
                        <span class="v8-pill">Stabiler Betrieb</span>
                        <span class="v8-pill">Persönlich</span>
                    </div>
                    <span class="v8-block-go">Hosting ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- IT-Hilfe --}}
                <a href="{{ route('it-hilfe.index') }}" class="v8-block is-violet v8-reveal" id="v8-support">
                    <span class="v8-block-no" aria-hidden="true">07</span>
                    <span class="v8-block-ico" aria-hidden="true"><i class="fa-solid fa-life-ring"></i></span>
                    <h3>IT-Hilfe</h3>
                    <p>
                        PC langsam, Einrichtung nötig oder einfach eine Frage? Ich helfe verständlich
                        und direkt &ndash; ohne Fachchinesisch, mit Lösungen, die passen.
                    </p>
                    <div class="v8-block-meta" aria-hidden="true">
                        <span class="v8-pill">Direkt</span>
                        <span class="v8-pill">Verständlich</span>
                    </div>
                    <span class="v8-block-go">IT-Hilfe anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ===================== SEKUNDAERE BEREICHE (dunkles Band) ===================== --}}
    <section class="v8-section v8-sec-alt" aria-label="Mehr von KOTSCH.TECH: News, Shop und Dokumente" id="v8-more">
        <div class="v8-shell">
            <div class="v8-head v8-reveal">
                <span class="v8-kicker is-blue"><i class="fa-solid fa-layer-group" aria-hidden="true"></i> Mehr von KOTSCH.TECH</span>
                <h2>Wissen, Produkte und Vorlagen</h2>
                <p>
                    Über Software und Apps hinaus: redaktionelle Artikel, ein Shop mit digitalen
                    Produkten und hilfreiche Dokumente &ndash; direkt im Browser.
                </p>
            </div>

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

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

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

    {{-- ===================== ABLAUF (3 Schritte) ===================== --}}
    <section class="v8-section" aria-label="So läuft die Zusammenarbeit">
        <div class="v8-shell">
            <div class="v8-head v8-reveal">
                <span class="v8-kicker is-light"><i class="fa-solid fa-route" aria-hidden="true"></i> So läuft's</span>
                <h2>Vom ersten Wort bis zum fertigen Ergebnis</h2>
                <p>
                    Kein Vertriebs-Pingpong, kein Fachchinesisch &ndash; klare Schritte und ein
                    direkter Ansprechpartner von Anfang bis Ende.
                </p>
            </div>

            <div class="v8-steps">
                <div class="v8-step v8-reveal">
                    <h3>Anfrage</h3>
                    <p>Du schreibst kurz, worum es geht &ndash; App, Website, Tool, Hosting oder ein technisches Problem.</p>
                </div>
                <div class="v8-step v8-reveal">
                    <h3>Einschätzung</h3>
                    <p>Du bekommst eine ehrliche, persönliche Einschätzung mit klarem Vorgehen &ndash; ohne Vertriebsmasche.</p>
                </div>
                <div class="v8-step v8-reveal">
                    <h3>Umsetzung</h3>
                    <p>Ich baue, betreue oder löse &ndash; transparent, sorgfältig und mit Blick fürs Detail.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- ===================== FINALE CTA ===================== --}}
    <section class="v8-cta-wrap" aria-label="Kontakt aufnehmen" id="v8-kontakt">
        <div class="v8-shell">
            <div class="v8-cta">
                <div class="v8-cta-copy v8-reveal">
                    <span class="v8-kicker is-light"><span class="v8-dot" aria-hidden="true"></span> 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 Antwort &ndash; direkt und persönlich.
                    </p>
                </div>

                <div class="v8-cta-card v8-reveal">
                    <div class="v8-who">
                        <span class="v8-avatar" aria-hidden="true"><i class="fa-solid fa-code"></i></span>
                        <div>
                            <b>Arthur Kotsch</b>
                            <span>Entwickler &amp; Gründer, 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. Reveal-Verstaerkung;
   alle Inhalte sind ohne JS sichtbar (Progressive Enhancement). */
(function () {
    var root = document.querySelector('.v8-home');
    if (!root) return;

    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.12, rootMargin: '0px 0px -8% 0px' });

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