@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Apps, Webdesign & Webtools')
@section('meta_description', 'KOTSCH.TECH von Arthur Kotsch: Softwareentwicklung fuer Windows, iOS, macOS & Android, Webdesign, kostenlose Webtools, News, Shop, Hosting und IT-Hilfe aus einer Hand.')
@section('og_title', 'KOTSCH.TECH - Die persoenliche Tech-Marke von Arthur Kotsch')
@section('og_description', 'Apps fuer Windows, Apple und Android, Webdesign, Webtools, Hosting, Shop und IT-Hilfe. Eine ruhige, leuchtende Werkstatt fuer durchdachte Software von Arthur Kotsch.')
@section('twitter_title', 'KOTSCH.TECH - Tech-Werkstatt von Arthur Kotsch')
@section('twitter_description', 'Softwareentwicklung, Apps, Webdesign, Webtools, Hosting, Shop und IT-Hilfe. Persoenliche Tech-Marke von Arthur Kotsch.')

@section('content')
<div class="v5-home">
<style>
    /* ============================================================
       VARIANTE 5 — AURORA GRADIENT MESH
       Atmosphaerisch-premium: langsam driftende Marken-Aurora-Blobs
       (--primary / --accent / --primary-light) hinter schwebenden
       Glas-Panels. Alle Selektoren & Keyframes mit .v5- gescoped.
       Keine neuen Farben, nur globale CSS-Variablen.
       ============================================================ */

    .v5-home {
        --v5-nav: 92px;
        --v5-glass: rgba(255, 255, 255, 0.62);
        --v5-glass-strong: rgba(255, 255, 255, 0.78);
        --v5-glass-line: rgba(255, 255, 255, 0.85);
        --v5-gap: clamp(1rem, 2.2vw, 1.6rem);
        position: relative;
        isolation: isolate;
        color: var(--text-main);
        background: var(--bg-light);
        /* WICHTIG: kein overflow:hidden/clip an einem Sticky-Vorfahren.
           Horizontaler Overflow wird stattdessen pro Element verhindert. */
        overflow-x: clip;
    }

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

    .v5-home a { text-decoration: none; color: inherit; }

    /* ---------------------------------------------------------------
       AURORA-HINTERGRUND — fixed Layer, hinter allem Inhalt (z-index:-1)
       Driftende, weiche Blobs aus Markenfarben. Reines transform/opacity.
       --------------------------------------------------------------- */
    .v5-aurora {
        position: fixed;
        inset: -20vmax;
        z-index: -1;
        pointer-events: none;
        overflow: hidden;
        background:
            radial-gradient(60% 50% at 50% -8%, rgba(96, 165, 250, 0.14), transparent 70%),
            linear-gradient(180deg, #ffffff 0%, var(--bg-light) 55%, #ffffff 100%);
    }
    .v5-aurora::after {
        /* sanfter heller Schleier fuer Tiefe, rein dekorativ */
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 80% at 50% 120%, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.55) 90%);
        mix-blend-mode: screen;
    }

    .v5-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(70px);
        opacity: 0.55;
        will-change: transform;
        transform: translate3d(0, 0, 0);
    }
    .v5-blob--1 {
        width: 46vmax; height: 46vmax;
        top: 2%; left: 6%;
        background: radial-gradient(circle at 30% 30%, var(--primary-light), rgba(96, 165, 250, 0.0) 68%);
        animation: v5-drift-a 26s ease-in-out infinite;
    }
    .v5-blob--2 {
        width: 50vmax; height: 50vmax;
        top: 12%; right: 2%;
        background: radial-gradient(circle at 60% 40%, var(--accent), rgba(124, 58, 237, 0.0) 66%);
        opacity: 0.42;
        animation: v5-drift-b 32s ease-in-out infinite;
    }
    .v5-blob--3 {
        width: 40vmax; height: 40vmax;
        bottom: 4%; left: 28%;
        background: radial-gradient(circle at 50% 50%, var(--primary), rgba(37, 99, 235, 0.0) 70%);
        opacity: 0.38;
        animation: v5-drift-c 30s ease-in-out infinite;
    }
    .v5-blob--4 {
        width: 34vmax; height: 34vmax;
        top: 46%; left: 50%;
        background: radial-gradient(circle at 40% 60%, var(--primary-light), rgba(96, 165, 250, 0.0) 72%);
        opacity: 0.30;
        animation: v5-drift-a 36s ease-in-out infinite reverse;
    }

    @keyframes v5-drift-a {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50%      { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
    }
    @keyframes v5-drift-b {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
        50%      { transform: translate3d(-7vmax, 5vmax, 0) scale(0.92); }
    }
    @keyframes v5-drift-c {
        0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); }
        50%      { transform: translate3d(5vmax, -6vmax, 0) scale(1.1); }
    }

    /* ---------------------------------------------------------------
       Layout-Grundgeruest
       --------------------------------------------------------------- */
    .v5-wrap {
        width: min(100%, var(--container-width));
        margin-inline: auto;
        padding-inline: clamp(1.1rem, 4vw, 2.5rem);
    }

    .v5-section { padding-block: clamp(3rem, 7vw, 6rem); }

    .v5-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--primary-dark);
        padding: 0.4rem 0.85rem;
        border-radius: 999px;
        background: var(--primary-soft);
        border: 1px solid rgba(37, 99, 235, 0.18);
    }
    .v5-eyebrow i { font-size: 0.8rem; }

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

    /* ===============================================================
       HERO
       =============================================================== */
    .v5-hero {
        position: relative;
        padding-top: clamp(140px, 16vh, 220px);
        padding-bottom: clamp(3rem, 8vw, 7rem);
        text-align: center;
    }

    .v5-hero-inner { max-width: 60rem; margin-inline: auto; }

    .v5-hero h1 {
        margin: 1.3rem 0 0;
        font-size: clamp(2.5rem, 6.4vw, 5.1rem);
        line-height: 1.02;
        font-weight: 800;
        letter-spacing: -0.035em;
        color: var(--text-main);
    }
    .v5-hero h1 .v5-grad-text { display: inline; }

    .v5-hero-sub {
        margin: 1.5rem auto 0;
        max-width: 40rem;
        font-size: clamp(1.05rem, 1.9vw, 1.3rem);
        line-height: 1.65;
        color: var(--text-muted);
    }

    .v5-hero-actions {
        margin-top: 2.3rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.9rem;
        justify-content: center;
    }

    .v5-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.95rem 1.7rem;
        border-radius: 999px;
        font-weight: 700;
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        border: 1px solid transparent;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }
    .v5-btn:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 3px; }
    .v5-btn--primary {
        color: #fff;
        background: linear-gradient(120deg, var(--primary), var(--accent));
        box-shadow: 0 14px 36px -12px var(--primary-glow);
    }
    .v5-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -14px var(--primary-glow); }
    .v5-btn--ghost {
        color: var(--text-main);
        background: var(--v5-glass-strong);
        border-color: var(--border);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .v5-btn--ghost:hover { transform: translateY(-3px); border-color: var(--primary-light); color: var(--primary-dark); }

    /* schwebende Glas-Statistikleiste unter dem Hero */
    .v5-hero-stats {
        margin: 2.8rem auto 0;
        max-width: 50rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--v5-glass-line);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
    }
    .v5-stat {
        background: var(--v5-glass);
        padding: 1.15rem 0.8rem;
        text-align: center;
    }
    .v5-stat b {
        display: block;
        font-size: clamp(1.25rem, 3vw, 1.7rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--primary-dark);
        font-variant-numeric: tabular-nums;
    }
    .v5-stat span {
        font-size: 0.78rem;
        color: var(--text-muted);
        font-weight: 600;
    }

    /* ===============================================================
       SPRUNG-NAVIGATION (kein natives nav-Element — div role=navigation!)
       =============================================================== */
    .v5-jump {
        position: sticky;
        top: var(--v5-nav);
        z-index: 5;
        margin-top: clamp(2rem, 5vw, 3.5rem);
    }
    .v5-jump-inner {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        padding: 0.6rem;
        border-radius: 999px;
        background: var(--v5-glass-strong);
        border: 1px solid var(--v5-glass-line);
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(18px) saturate(170%);
        -webkit-backdrop-filter: blur(18px) saturate(170%);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .v5-jump-inner::-webkit-scrollbar { display: none; }
    .v5-jump a {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.55rem 1.05rem;
        border-radius: 999px;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-muted);
        white-space: nowrap;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .v5-jump a i { font-size: 0.85rem; color: var(--primary); }
    .v5-jump a:hover { background: var(--primary-soft); color: var(--primary-dark); }
    .v5-jump a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

    /* ===============================================================
       BEREICHS-KOPF
       =============================================================== */
    .v5-head { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
    .v5-head.is-center { margin-inline: auto; text-align: center; }
    .v5-head h2 {
        margin: 1rem 0 0;
        font-size: clamp(1.8rem, 3.8vw, 2.75rem);
        line-height: 1.1;
        font-weight: 800;
        letter-spacing: -0.03em;
    }
    .v5-head p {
        margin: 0.9rem 0 0;
        font-size: clamp(1rem, 1.6vw, 1.12rem);
        line-height: 1.6;
        color: var(--text-muted);
    }

    /* ===============================================================
       GLAS-PANEL (Grundbaustein)
       =============================================================== */
    .v5-panel {
        position: relative;
        background: var(--v5-glass);
        border: 1px solid var(--v5-glass-line);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(20px) saturate(165%);
        -webkit-backdrop-filter: blur(20px) saturate(165%);
        overflow: hidden;
    }
    .v5-panel::before {
        /* sanfter Glanz oben links, dekorativ */
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), transparent 42%);
        pointer-events: none;
    }

    /* ---------------------------------------------------------------
       LEISTUNGS-GRID (Bento aus Glaskarten)
       --------------------------------------------------------------- */
    .v5-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--v5-gap);
    }

    .v5-card {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: clamp(1.4rem, 2.5vw, 2rem);
        background: var(--v5-glass);
        border: 1px solid var(--v5-glass-line);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        overflow: hidden;
        color: inherit;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    box-shadow 0.4s ease, border-color 0.4s ease;
    }
    .v5-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.5), transparent 45%);
        pointer-events: none;
    }
    .v5-card::after {
        /* Aurora-Schimmer, der bei Hover aufleuchtet */
        content: "";
        position: absolute;
        width: 16rem; height: 16rem;
        top: -6rem; right: -6rem;
        border-radius: 50%;
        background: radial-gradient(circle, var(--primary-glow), transparent 68%);
        opacity: 0;
        transition: opacity 0.45s ease, transform 0.6s ease;
        pointer-events: none;
    }
    .v5-card:hover,
    .v5-card:focus-visible {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary-light);
    }
    .v5-card:hover::after,
    .v5-card:focus-visible::after { opacity: 1; transform: translate(-1.5rem, 1.5rem); }
    .v5-card:focus-visible { outline: none; }
    .v5-card > * { position: relative; z-index: 1; }

    .v5-ico {
        width: 3.2rem; height: 3.2rem;
        display: grid;
        place-items: center;
        border-radius: 16px;
        font-size: 1.4rem;
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        box-shadow: 0 10px 26px -10px var(--primary-glow);
        margin-bottom: 1.1rem;
    }
    .v5-card h3 {
        margin: 0 0 0.5rem;
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }
    .v5-card p {
        margin: 0;
        font-size: 0.96rem;
        line-height: 1.55;
        color: var(--text-muted);
        flex: 1 1 auto;
    }
    .v5-card-go {
        margin-top: 1.1rem;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-weight: 700;
        font-size: 0.92rem;
        color: var(--primary-dark);
    }
    .v5-card-go i { transition: transform 0.3s ease; }
    .v5-card:hover .v5-card-go i,
    .v5-plat-card:hover .v5-card-go i,
    .v5-serv-card:hover .v5-card-go i { transform: translateX(5px); }

    /* Bento-Spannweiten */
    .v5-col-6 { grid-column: span 6; }
    .v5-col-4 { grid-column: span 4; }
    .v5-col-3 { grid-column: span 3; }

    /* Hervorgehobene Windows-Karte (gross, mit Mockup) */
    .v5-feature {
        grid-column: span 6;
        grid-row: span 2;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 1.4rem;
        padding: clamp(1.6rem, 3vw, 2.4rem);
        background: linear-gradient(150deg, rgba(37, 99, 235, 0.10), rgba(124, 58, 237, 0.07)), var(--v5-glass);
    }
    .v5-feature .v5-mock {
        position: relative;
        border-radius: 16px;
        border: 1px solid var(--v5-glass-line);
        background: rgba(2, 6, 23, 0.92);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        min-height: 190px;
    }
    .v5-mock-bar {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.7rem 0.9rem;
        background: rgba(255, 255, 255, 0.06);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .v5-mock-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--text-light); opacity: 0.6; }
    .v5-mock-bar span:nth-child(1) { background: #ff5f57; opacity: 0.85; }
    .v5-mock-bar span:nth-child(2) { background: #febc2e; opacity: 0.85; }
    .v5-mock-bar span:nth-child(3) { background: #28c840; opacity: 0.85; }
    .v5-mock-body { padding: 1rem 1.1rem; display: grid; gap: 0.6rem; }
    .v5-mock-line { height: 0.62rem; border-radius: 999px; background: rgba(255, 255, 255, 0.10); }
    .v5-mock-line.is-accent { background: linear-gradient(90deg, var(--primary-light), var(--accent)); width: 62%; }
    .v5-mock-line.w-90 { width: 90%; }
    .v5-mock-line.w-70 { width: 70%; }
    .v5-mock-line.w-50 { width: 50%; }
    .v5-mock-chips { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
    .v5-mock-chip {
        flex: 1;
        height: 2.6rem;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .v5-mock-chip.is-on { background: linear-gradient(135deg, var(--primary), var(--accent)); border-color: transparent; }

    /* ===============================================================
       PLATTFORM-STREIFEN (Apple / Android / Windows als Glas-Trio)
       =============================================================== */
    .v5-plat {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--v5-gap);
    }
    .v5-plat-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
        padding: clamp(1.4rem, 2.4vw, 1.9rem);
        background: var(--v5-glass);
        border: 1px solid var(--v5-glass-line);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }
    .v5-plat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
    .v5-plat-card i.v5-plat-ico { font-size: 2.1rem; color: var(--primary); }
    .v5-plat-card h3 { margin: 0; font-size: 1.15rem; font-weight: 700; }
    .v5-plat-card p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--text-muted); }
    .v5-plat-card .v5-card-go { margin-top: 0.3rem; }

    /* ===============================================================
       WEB-/WEBTOOLS-PANEL (zwei Spalten in Glas)
       =============================================================== */
    .v5-tools {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: clamp(1.5rem, 3vw, 3rem);
        align-items: center;
        padding: clamp(1.8rem, 3.5vw, 3rem);
    }
    .v5-tools h2 { margin: 0.9rem 0 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
    .v5-tools p { margin: 0.9rem 0 0; color: var(--text-muted); line-height: 1.6; }
    .v5-tools .v5-btn { margin-top: 1.6rem; }
    .v5-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .v5-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.65rem 1rem;
        border-radius: 14px;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-main);
        background: var(--v5-glass-strong);
        border: 1px solid var(--v5-glass-line);
        box-shadow: var(--shadow-soft);
        transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }
    .v5-pill i { color: var(--primary); }
    .v5-pill:hover { transform: translateY(-3px); border-color: var(--primary-light); color: var(--primary-dark); }

    /* ===============================================================
       NEWS + SHOP (zwei grosse Glas-Panels nebeneinander)
       =============================================================== */
    .v5-duo {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--v5-gap);
    }
    .v5-promo {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: clamp(1.6rem, 3vw, 2.4rem);
        color: inherit;
        transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }
    .v5-promo:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
    .v5-promo > * { position: relative; z-index: 1; }
    .v5-promo .v5-ico { margin-bottom: 0.3rem; }
    .v5-promo h3 { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; }
    .v5-promo p { margin: 0; color: var(--text-muted); line-height: 1.6; flex: 1 1 auto; }
    .v5-promo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
    .v5-promo-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.94rem; font-weight: 600; }
    .v5-promo-list i { color: var(--success); font-size: 0.95rem; }

    /* ===============================================================
       SERVICE-LEISTE (Hosting / IT-Hilfe / Dokumente)
       =============================================================== */
    .v5-serv {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--v5-gap);
    }
    .v5-serv-card {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        padding: clamp(1.3rem, 2.4vw, 1.8rem);
        background: var(--v5-glass);
        border: 1px solid var(--v5-glass-line);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(16px) saturate(155%);
        -webkit-backdrop-filter: blur(16px) saturate(155%);
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .v5-serv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
    .v5-serv-ico {
        flex: 0 0 auto;
        width: 2.8rem; height: 2.8rem;
        display: grid; place-items: center;
        border-radius: 14px;
        font-size: 1.2rem;
        color: var(--primary-dark);
        background: var(--primary-soft);
        border: 1px solid rgba(37, 99, 235, 0.18);
    }
    .v5-serv-card h3 { margin: 0 0 0.35rem; font-size: 1.08rem; font-weight: 700; }
    .v5-serv-card p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--text-muted); }
    .v5-serv-card .v5-card-go { margin-top: 0.6rem; font-size: 0.88rem; }

    /* ===============================================================
       ABSCHLUSS-CTA (grosses Aurora-Glas-Panel, dunkler Akzent)
       =============================================================== */
    .v5-cta {
        position: relative;
        text-align: center;
        padding: clamp(2.6rem, 6vw, 4.5rem) clamp(1.4rem, 4vw, 3rem);
        border-radius: var(--radius);
        overflow: hidden;
        background:
            radial-gradient(60% 120% at 20% 0%, rgba(96, 165, 250, 0.30), transparent 60%),
            radial-gradient(60% 120% at 90% 100%, rgba(124, 58, 237, 0.32), transparent 60%),
            var(--bg-dark);
        border: 1px solid rgba(96, 165, 250, 0.25);
        box-shadow: var(--shadow-lg);
    }
    .v5-cta h2 {
        margin: 0;
        font-size: clamp(1.9rem, 4.4vw, 3rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.1;
        color: #fff;
    }
    .v5-cta p {
        margin: 1.1rem auto 0;
        max-width: 38rem;
        color: var(--text-light);
        font-size: clamp(1rem, 1.8vw, 1.18rem);
        line-height: 1.6;
    }
    .v5-cta .v5-hero-actions { margin-top: 2.1rem; }
    .v5-cta .v5-btn--ghost {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.35);
        color: #fff;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .v5-cta .v5-btn--ghost:hover { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: #fff; }
    .v5-cta-brand {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        margin-bottom: 1.3rem;
        padding: 0.5rem 1rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .v5-cta-brand img { height: 22px; width: auto; display: block; }
    .v5-cta-brand .v5-cta-mark { height: 26px; }

    /* ===============================================================
       RESPONSIVE
       =============================================================== */
    @media (max-width: 1080px) {
        .v5-feature { grid-column: span 12; grid-row: auto; }
        .v5-col-6 { grid-column: span 6; }
        .v5-col-4 { grid-column: span 6; }
        .v5-col-3 { grid-column: span 6; }
        .v5-tools { grid-template-columns: 1fr; }
    }
    @media (max-width: 760px) {
        .v5-grid { grid-template-columns: repeat(2, 1fr); }
        .v5-col-6, .v5-col-4, .v5-col-3, .v5-feature { grid-column: span 2; }
        .v5-plat, .v5-serv, .v5-duo { grid-template-columns: 1fr; }
        .v5-hero-stats { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 460px) {
        .v5-grid { grid-template-columns: 1fr; }
        .v5-col-6, .v5-col-4, .v5-col-3, .v5-feature { grid-column: 1 / -1; }
        .v5-blob { filter: blur(48px); }
    }

    /* ===============================================================
       REDUCED MOTION — Aurora wird statisch, keine Transforms
       =============================================================== */
    @media (prefers-reduced-motion: reduce) {
        .v5-home *, .v5-home *::before, .v5-home *::after { animation: none !important; transition: none !important; }
        .v5-blob { animation: none !important; }
        .v5-card:hover, .v5-plat-card:hover, .v5-serv-card:hover, .v5-promo:hover { transform: none; }
    }
</style>

    {{-- Aurora-Hintergrund: rein dekorativ, hinter dem Inhalt --}}
    <div class="v5-aurora" aria-hidden="true">
        <span class="v5-blob v5-blob--1"></span>
        <span class="v5-blob v5-blob--2"></span>
        <span class="v5-blob v5-blob--3"></span>
        <span class="v5-blob v5-blob--4"></span>
    </div>

    {{-- ========================= HERO ========================= --}}
    <header class="v5-hero v5-wrap">
        <div class="v5-hero-inner">
            <span class="v5-eyebrow"><i class="fa-solid fa-sparkles" aria-hidden="true"></i> Persoenliche Tech-Marke</span>
            <h1>KOTSCH.TECH — durchdachte Software,<br><span class="v5-grad-text">gebaut von Arthur Kotsch</span></h1>
            <p class="v5-hero-sub">
                Eine ruhige, leuchtende Werkstatt fuer Apps, Webdesign und Werkzeuge: von Windows-,
                iOS-, macOS- und Android-Software ueber Webtools und Hosting bis zu persoenlicher IT-Hilfe.
            </p>
            <div class="v5-hero-actions">
                <a href="{{ route('kontakt') }}" class="v5-btn v5-btn--primary">
                    <i class="fa-solid fa-paper-plane" aria-hidden="true"></i> Projekt anfragen
                </a>
                <a href="#v5-leistungen" class="v5-btn v5-btn--ghost">
                    <i class="fa-solid fa-compass" aria-hidden="true"></i> Bereiche entdecken
                </a>
            </div>

            <div class="v5-hero-stats" role="list" aria-label="Kennzahlen der Marke">
                <div class="v5-stat" role="listitem"><b>9</b><span>Tech-Bereiche</span></div>
                <div class="v5-stat" role="listitem"><b>4</b><span>Plattformen</span></div>
                <div class="v5-stat" role="listitem"><b>220+</b><span>Webtools</span></div>
                <div class="v5-stat" role="listitem"><b>1</b><span>Ansprechpartner</span></div>
            </div>
        </div>
    </header>

    {{-- ============== SPRUNG-NAVIGATION (div, kein nav!) ============== --}}
    <div class="v5-jump v5-wrap" role="navigation" aria-label="Schnellzugriff auf Bereiche">
        <div class="v5-jump-inner">
            <a href="#v5-leistungen"><i class="fa-solid fa-layer-group" aria-hidden="true"></i> Software</a>
            <a href="#v5-plattformen"><i class="fa-solid fa-mobile-screen" aria-hidden="true"></i> Plattformen</a>
            <a href="#v5-web"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i> Webdesign</a>
            <a href="#v5-tools"><i class="fa-solid fa-toolbox" aria-hidden="true"></i> Webtools</a>
            <a href="#v5-medien"><i class="fa-solid fa-newspaper" aria-hidden="true"></i> News &amp; Shop</a>
            <a href="#v5-service"><i class="fa-solid fa-headset" aria-hidden="true"></i> Service</a>
        </div>
    </div>

    {{-- ===================== LEISTUNGEN / BENTO ===================== --}}
    <section id="v5-leistungen" class="v5-section v5-wrap" aria-labelledby="v5-leistungen-title">
        <div class="v5-head reveal">
            <span class="v5-eyebrow"><i class="fa-solid fa-cubes" aria-hidden="true"></i> Was hier entsteht</span>
            <h2 id="v5-leistungen-title">Ein zusammenhaengendes <span class="v5-grad-text">Oekosystem</span> statt Einzelteile</h2>
            <p>Jeder Bereich ist eigenstaendig nutzbar und greift doch ineinander — vom Desktop-Tool bis zur App in der Hosentasche.</p>
        </div>

        <div class="v5-grid">
            {{-- Hervorgehobene Windows-Karte mit Mockup --}}
            <a href="{{ route('windows.index') }}" class="v5-card v5-feature reveal" aria-label="Windows-Software entdecken">
                <div>
                    <div class="v5-ico"><i class="fa-brands fa-windows" aria-hidden="true"></i></div>
                    <h3 style="font-size:1.45rem;">Windows-Software</h3>
                    <p>Schlanke, schnelle Desktop-Programme fuer den taeglichen Einsatz — installierbar, wartungsarm und mit klarem Fokus auf Bedienbarkeit.</p>
                    <span class="v5-card-go">Programme ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </div>
                <div class="v5-mock" aria-hidden="true">
                    <div class="v5-mock-bar"><span></span><span></span><span></span></div>
                    <div class="v5-mock-body">
                        <div class="v5-mock-line is-accent"></div>
                        <div class="v5-mock-line w-90"></div>
                        <div class="v5-mock-line w-70"></div>
                        <div class="v5-mock-chips">
                            <div class="v5-mock-chip is-on"></div>
                            <div class="v5-mock-chip"></div>
                            <div class="v5-mock-chip"></div>
                        </div>
                        <div class="v5-mock-line w-50"></div>
                    </div>
                </div>
            </a>

            {{-- iOS & Mac --}}
            <a href="{{ route('apple.index') }}" class="v5-card v5-col-6 reveal" aria-label="iOS und Mac Apps entdecken">
                <div class="v5-ico"><i class="fa-brands fa-apple" aria-hidden="true"></i></div>
                <h3>iOS &amp; Mac Apps</h3>
                <p>Native Apps fuer iPhone, iPad und Mac — gestaltet nach Apples Richtlinien, fluessig und mit Liebe zum Detail.</p>
                <span class="v5-card-go">Apple-Apps ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            {{-- Android --}}
            <a href="{{ route('android.index') }}" class="v5-card v5-col-3 reveal" aria-label="Android Apps entdecken">
                <div class="v5-ico"><i class="fa-brands fa-android" aria-hidden="true"></i></div>
                <h3>Android Apps</h3>
                <p>Material-Design-Apps fuer Smartphones und Tablets — performant und alltagstauglich.</p>
                <span class="v5-card-go">Mehr <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            {{-- Webdesign (Kurzkachel; ausfuehrliches Panel folgt) --}}
            <a href="{{ route('web.templates') }}" class="v5-card v5-col-3 reveal" aria-label="Webdesign entdecken">
                <div class="v5-ico"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i></div>
                <h3>Webdesign</h3>
                <p>Schnelle, moderne Websites mit Charakter — von der Vorlage bis zur Umsetzung.</p>
                <span class="v5-card-go">Vorlagen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>
        </div>
    </section>

    {{-- ===================== PLATTFORMEN ===================== --}}
    <section id="v5-plattformen" class="v5-section v5-wrap" aria-labelledby="v5-plattformen-title">
        <div class="v5-head is-center reveal">
            <span class="v5-eyebrow"><i class="fa-solid fa-mobile-screen" aria-hidden="true"></i> Eine Idee, jede Plattform</span>
            <h2 id="v5-plattformen-title">Software, die sich <span class="v5-grad-text">ueberall</span> zuhause fuehlt</h2>
            <p>Desktop, Mobil und Tablet — konsistent gedacht, plattformgerecht umgesetzt.</p>
        </div>

        <div class="v5-plat">
            <a href="{{ route('windows.index') }}" class="v5-plat-card reveal" aria-label="Windows-Software">
                <i class="fa-brands fa-windows v5-plat-ico" aria-hidden="true"></i>
                <h3>Windows</h3>
                <p>Desktop-Programme, die schnell starten und sich nicht in den Weg stellen.</p>
                <span class="v5-card-go">Zur Software <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>
            <a href="{{ route('apple.index') }}" class="v5-plat-card reveal" aria-label="iOS und macOS Apps">
                <i class="fa-brands fa-apple v5-plat-ico" aria-hidden="true"></i>
                <h3>iOS &amp; macOS</h3>
                <p>Apps fuer iPhone, iPad und Mac im vertrauten Apple-Look.</p>
                <span class="v5-card-go">Zu den Apps <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>
            <a href="{{ route('android.index') }}" class="v5-plat-card reveal" aria-label="Android Apps">
                <i class="fa-brands fa-android v5-plat-ico" aria-hidden="true"></i>
                <h3>Android</h3>
                <p>Material-Design fuer das gesamte Android-Oekosystem.</p>
                <span class="v5-card-go">Zu Android <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>
        </div>
    </section>

    {{-- ===================== WEBDESIGN-PANEL ===================== --}}
    <section id="v5-web" class="v5-section v5-wrap" aria-labelledby="v5-web-title">
        <div class="v5-panel reveal">
            <div class="v5-tools">
                <div>
                    <span class="v5-eyebrow"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i> Webdesign-Studio</span>
                    <h2 id="v5-web-title">Websites mit <span class="v5-grad-text">Tempo</span> und Charakter</h2>
                    <p>
                        Von der durchdachten Vorlage bis zur individuellen Umsetzung: moderne, schnelle
                        und barrierearme Websites, die auf jedem Bildschirm ueberzeugen — sauber gebaut
                        und einfach pflegbar.
                    </p>
                    <a href="{{ route('web.templates') }}" class="v5-btn v5-btn--primary">
                        <i class="fa-solid fa-window-maximize" aria-hidden="true"></i> Vorlagen ansehen
                    </a>
                </div>
                <div class="v5-pills" aria-hidden="true">
                    <span class="v5-pill"><i class="fa-solid fa-bolt"></i> Schnell</span>
                    <span class="v5-pill"><i class="fa-solid fa-mobile-screen"></i> Responsive</span>
                    <span class="v5-pill"><i class="fa-solid fa-universal-access"></i> Barrierearm</span>
                    <span class="v5-pill"><i class="fa-solid fa-gauge-high"></i> SEO-fit</span>
                    <span class="v5-pill"><i class="fa-solid fa-sliders"></i> Pflegbar</span>
                    <span class="v5-pill"><i class="fa-solid fa-palette"></i> Markenstark</span>
                </div>
            </div>
        </div>
    </section>

    {{-- ===================== WEBTOOLS-PANEL ===================== --}}
    <section id="v5-tools" class="v5-section v5-wrap" aria-labelledby="v5-tools-title">
        <div class="v5-panel reveal">
            <div class="v5-tools">
                <div class="v5-pills" aria-hidden="true">
                    <span class="v5-pill"><i class="fa-solid fa-file-pdf"></i> PDF-Tools</span>
                    <span class="v5-pill"><i class="fa-solid fa-image"></i> Bild umwandeln</span>
                    <span class="v5-pill"><i class="fa-solid fa-key"></i> Passwoerter</span>
                    <span class="v5-pill"><i class="fa-solid fa-qrcode"></i> QR-Codes</span>
                    <span class="v5-pill"><i class="fa-solid fa-code"></i> JSON &amp; Co.</span>
                    <span class="v5-pill"><i class="fa-solid fa-ruler-combined"></i> Einheiten</span>
                </div>
                <div>
                    <span class="v5-eyebrow"><i class="fa-solid fa-toolbox" aria-hidden="true"></i> Kostenlose Helfer</span>
                    <h2 id="v5-tools-title">Ueber 220 <span class="v5-grad-text">Webtools</span> direkt im Browser</h2>
                    <p>
                        Konvertieren, generieren, berechnen — ohne Installation und ohne Anmeldung.
                        Die Tools laufen lokal in deinem Browser, sind schnell zur Hand und genau dann
                        nuetzlich, wenn man sie braucht.
                    </p>
                    <a href="{{ route('webtools.show') }}" class="v5-btn v5-btn--primary">
                        <i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i> Alle Webtools oeffnen
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- ===================== NEWS + SHOP ===================== --}}
    <section id="v5-medien" class="v5-section v5-wrap" aria-labelledby="v5-medien-title">
        <div class="v5-head is-center reveal">
            <span class="v5-eyebrow"><i class="fa-solid fa-newspaper" aria-hidden="true"></i> Lesen &amp; Holen</span>
            <h2 id="v5-medien-title">News, die weiterhelfen &amp; ein <span class="v5-grad-text">Shop</span> mit Substanz</h2>
            <p>Wissen zum Mitnehmen und digitale Produkte, die sofort bereitstehen.</p>
        </div>

        <div class="v5-duo">
            <a href="{{ route('news.index') }}" class="v5-panel v5-promo reveal" aria-label="Zum News-Bereich">
                <div class="v5-ico"><i class="fa-solid fa-newspaper" aria-hidden="true"></i></div>
                <h3>News &amp; Blog</h3>
                <p>Anleitungen, Erfahrungsberichte und Updates rund um Software, Web und Technik — verstaendlich erklaert und praxisnah.</p>
                <ul class="v5-promo-list">
                    <li><i class="fa-solid fa-check" aria-hidden="true"></i> Praktische How-tos</li>
                    <li><i class="fa-solid fa-check" aria-hidden="true"></i> Projekt-Updates</li>
                    <li><i class="fa-solid fa-check" aria-hidden="true"></i> Tech-Wissen kompakt</li>
                </ul>
                <span class="v5-card-go">Zu den Beitraegen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <a href="{{ route('shop.index') }}" class="v5-panel v5-promo reveal" aria-label="Zum Shop">
                <div class="v5-ico"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i></div>
                <h3>Shop</h3>
                <p>Digitale Produkte und ausgewaehlte Angebote — direkt erhaeltlich, ohne Umwege und mit sofortiger Bereitstellung.</p>
                <ul class="v5-promo-list">
                    <li><i class="fa-solid fa-check" aria-hidden="true"></i> Digitale Downloads</li>
                    <li><i class="fa-solid fa-check" aria-hidden="true"></i> Sofort verfuegbar</li>
                    <li><i class="fa-solid fa-check" aria-hidden="true"></i> Sichere Bezahlung</li>
                </ul>
                <span class="v5-card-go">In den Shop <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>
        </div>
    </section>

    {{-- ===================== SERVICE-LEISTE ===================== --}}
    <section id="v5-service" class="v5-section v5-wrap" aria-labelledby="v5-service-title">
        <div class="v5-head reveal">
            <span class="v5-eyebrow"><i class="fa-solid fa-headset" aria-hidden="true"></i> Betrieb &amp; Unterstuetzung</span>
            <h2 id="v5-service-title">Damit alles <span class="v5-grad-text">laeuft</span> — und laufen bleibt</h2>
            <p>Hosting, persoenliche IT-Hilfe und nuetzliche Dokumente: die ruhige Basis hinter den Projekten.</p>
        </div>

        <div class="v5-serv">
            <a href="{{ route('hosting.index') }}" class="v5-serv-card reveal" aria-label="Zum Hosting">
                <span class="v5-serv-ico"><i class="fa-solid fa-server" aria-hidden="true"></i></span>
                <div>
                    <h3>Hosting</h3>
                    <p>Zuverlaessiges Web- und V-Server-Hosting — schnell, sicher und gut betreut.</p>
                    <span class="v5-card-go">Tarife ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </div>
            </a>
            <a href="{{ route('it-hilfe.index') }}" class="v5-serv-card reveal" aria-label="Zur IT-Hilfe">
                <span class="v5-serv-ico"><i class="fa-solid fa-hand-holding-hand" aria-hidden="true"></i></span>
                <div>
                    <h3>IT-Hilfe</h3>
                    <p>Persoenliche Unterstuetzung bei Problemen — geduldig, verstaendlich und loesungsorientiert.</p>
                    <span class="v5-card-go">Hilfe anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </div>
            </a>
            <a href="{{ route('documents.index') }}" class="v5-serv-card reveal" aria-label="Zu den Dokumenten">
                <span class="v5-serv-ico"><i class="fa-solid fa-folder-open" aria-hidden="true"></i></span>
                <div>
                    <h3>Dokumente</h3>
                    <p>Hilfreiche Unterlagen und Vorlagen — uebersichtlich gesammelt und abrufbar.</p>
                    <span class="v5-card-go">Uebersicht oeffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </div>
            </a>
        </div>
    </section>

    {{-- ===================== ABSCHLUSS-CTA ===================== --}}
    <section class="v5-section v5-wrap" aria-labelledby="v5-cta-title">
        <div class="v5-cta reveal">
            <span class="v5-cta-brand">
                <img class="v5-cta-mark" src="{{ asset('img/logo-mark.png') }}" alt="KOTSCH.TECH Logo">
                <img src="{{ asset('img/logo-wordmark-solid-cropped.png') }}" alt="KOTSCH.TECH Wortmarke">
            </span>
            <h2 id="v5-cta-title">Eine Idee, ein Ansprechpartner — <br>lass uns starten</h2>
            <p>Ob App, Website, Tool oder Hosting: Schreib kurz, worum es geht. Du bekommst eine ehrliche, persoenliche Einschaetzung von Arthur Kotsch.</p>
            <div class="v5-hero-actions">
                <a href="{{ route('kontakt') }}" class="v5-btn v5-btn--primary">
                    <i class="fa-solid fa-paper-plane" aria-hidden="true"></i> Jetzt Kontakt aufnehmen
                </a>
                <a href="{{ route('webtools.show') }}" class="v5-btn v5-btn--ghost">
                    <i class="fa-solid fa-toolbox" aria-hidden="true"></i> Erst die Webtools testen
                </a>
            </div>
        </div>
    </section>
</div>
@endsection