@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch – Tech-Verzeichnis')
@section('meta_description', 'Das Verzeichnis von KOTSCH.TECH: Apps für iOS, macOS, Android & Windows, Webdesign, kostenlose Webtools, News, Shop, Hosting und persönliche IT-Hilfe von Arthur Kotsch.')
@section('og_title', 'KOTSCH.TECH – Das Tech-Verzeichnis von Arthur Kotsch')
@section('og_description', 'Ein klares Verzeichnis aller Bereiche: native Apps, Webdesign, kostenlose Webtools, Shop, Hosting, News und ehrliche IT-Hilfe – alles aus einer Hand.')
@section('twitter_title', 'KOTSCH.TECH – Apps, Webdesign, Tools & IT von Arthur Kotsch')
@section('twitter_description', 'Übersichtlich aufgelistet: Softwareentwicklung, Apps, Webdesign, Webtools, Shop, Hosting und IT-Hilfe – die persönliche Tech-Marke von Arthur Kotsch.')

@section('content')
<div class="v7-home" id="v7-home">

<style>
/* ============================================================
   KOTSCH.TECH — Variante 7: Hover-Reveal-Verzeichnis
   Scope: .v7-  | Konzept: ruhige editoriale Liste ALLER Bereiche.
   Desktop: Hover/Fokus auf eine Zeile zeigt eine Vorschau-Bühne.
   Mobile: Liste mit dauerhaft sichtbarer Kurzinfo (kein Hover nötig).
   Nur globale CSS-Variablen. Animationen: transform/opacity.
   ============================================================ */

.v7-home{
    --v7-radius: clamp(20px, 2.2vw, 28px);
    --v7-line: clamp(.9rem, 1.4vw, 1.15rem);
    position: relative;
    color: var(--text-main);
    background:
        radial-gradient(circle at 12% -6%, var(--primary-soft), transparent 42%),
        radial-gradient(circle at 92% 4%, rgba(124,58,237,.10), transparent 46%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-light) 100%);
    overflow-x: clip;
}
.v7-home *{ box-sizing: border-box; }

/* No-JS-Schutz: nur wenn JS aktiv ist, blendet .reveal animiert ein.
   Ohne JS bleibt jeder Inhalt sichtbar (SEO + progressive enhancement). */
.v7-home.v7-js .reveal{ opacity: 0; }
.v7-home.v7-js .reveal.active{ opacity: 1; }

/* ---- Layout-Hülle / Rhythmus ---- */
.v7-shell{
    width: min(100%, var(--container-width));
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    position: relative;
}
.v7-section{ padding-block: clamp(2.4rem, 6vw, 5rem); position: relative; }

/* ---- gemeinsame Bausteine ---- */
.v7-eyebrow{
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--primary-dark);
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    padding: .42rem .9rem; border-radius: 999px;
}
.v7-eyebrow i{ font-size: .8rem; }
.v7-grad{
    background: linear-gradient(112deg, var(--primary) 0%, var(--accent) 52%, var(--primary-light) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v7-btn{
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 700; font-size: 1rem; text-decoration: none;
    padding: .9rem 1.55rem; border-radius: 16px;
    transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
.v7-btn-primary{
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff; box-shadow: 0 18px 42px -18px var(--primary-glow);
}
.v7-btn-primary:hover, .v7-btn-primary:focus-visible{ transform: translateY(-3px); box-shadow: 0 28px 54px -18px var(--primary-glow); }
.v7-btn-ghost{
    background: rgba(255,255,255,.72); color: var(--text-main);
    border: 1px solid var(--border); box-shadow: var(--shadow-soft);
}
.v7-btn-ghost:hover, .v7-btn-ghost:focus-visible{ transform: translateY(-3px); border-color: var(--primary-light); }
.v7-btn:focus-visible{ outline: 3px solid var(--primary); outline-offset: 3px; }

/* ============================================================
   HERO — ruhiger Kopf des Verzeichnisses
   ============================================================ */
.v7-hero{
    padding-top: clamp(132px, 15vw, 188px);
    padding-bottom: clamp(1.6rem, 4vw, 3rem);
}
.v7-hero-inner{ max-width: 60rem; }
.v7-badge{
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .5rem .95rem; border-radius: 999px;
    background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
    border: 1px solid var(--border); box-shadow: var(--shadow-soft);
    font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--primary-dark); margin-bottom: 1.5rem;
}
.v7-badge img{ height: 20px; width: auto; display: block; }
.v7-badge .v7-pulse{
    width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none;
    box-shadow: 0 0 0 0 rgba(16,185,129,.55);
}
.v7-hero h1{
    font-size: clamp(2.4rem, 6.6vw, 4.6rem);
    line-height: 1.03; font-weight: 800; letter-spacing: -.035em; margin: 0 0 1.15rem;
}
.v7-hero-lead{
    font-size: clamp(1.04rem, 1.7vw, 1.28rem); line-height: 1.6;
    color: var(--text-muted); max-width: 60ch; margin: 0 0 2rem;
}
.v7-hero-actions{ display: flex; flex-wrap: wrap; gap: .8rem; }

/* Hero-Kennzahlen */
.v7-hero-meta{
    display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3.2vw, 2.6rem);
    margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
    padding-top: clamp(1.4rem, 3vw, 2rem);
    border-top: 1px solid var(--border);
}
.v7-hero-meta div strong{
    display: block; font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 800; letter-spacing: -.02em; line-height: 1;
    background: linear-gradient(120deg, var(--primary), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v7-hero-meta div span{ display: block; margin-top: .35rem; font-size: .82rem; color: var(--text-muted); }

/* ============================================================
   VERZEICHNIS — Liste + Vorschau-Bühne (zwei Spalten auf Desktop)
   ============================================================ */
.v7-dir-head{
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
    margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.v7-dir-head h2{
    font-size: clamp(1.6rem, 3.6vw, 2.6rem);
    line-height: 1.1; font-weight: 800; letter-spacing: -.025em; margin: .7rem 0 0; max-width: 18ch;
}
.v7-dir-hint{
    font-size: .85rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .5rem;
}
.v7-dir-hint i{ color: var(--primary); }

.v7-dir{
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(1.4rem, 3vw, 3rem);
    align-items: start;
}

/* ---- die editoriale Liste ---- */
.v7-list{ display: flex; flex-direction: column; }
.v7-row{
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(.8rem, 2vw, 1.4rem);
    padding: clamp(1.05rem, 2.2vw, 1.5rem) clamp(.4rem, 1vw, .9rem);
    border-top: 1px solid var(--border);
    text-decoration: none; color: var(--text-main);
    transition: padding-left .4s cubic-bezier(.16,.84,.44,1), background .4s ease;
    isolation: isolate;
}
.v7-list .v7-row:last-child{ border-bottom: 1px solid var(--border); }
/* sanfter Akzentbalken links beim Hover/Fokus */
.v7-row::before{
    content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
    width: 3px; border-radius: 999px;
    background: linear-gradient(180deg, var(--primary), var(--accent));
    transform: scaleY(0); transform-origin: top; opacity: 0;
    transition: transform .4s cubic-bezier(.16,.84,.44,1), opacity .4s ease;
}
.v7-row:hover, .v7-row:focus-visible,
.v7-row.is-active{
    background: linear-gradient(90deg, var(--primary-soft), transparent 70%);
    padding-left: clamp(1.1rem, 2.4vw, 1.7rem);
}
.v7-row:hover::before, .v7-row:focus-visible::before,
.v7-row.is-active::before{ transform: scaleY(1); opacity: 1; }
.v7-row:focus-visible{ outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 12px; }

.v7-num{
    font-size: .8rem; font-weight: 800; letter-spacing: .06em;
    color: var(--text-muted); font-variant-numeric: tabular-nums;
    min-width: 2.2ch;
    transition: color .4s ease;
}
.v7-row:hover .v7-num, .v7-row:focus-visible .v7-num, .v7-row.is-active .v7-num{ color: var(--primary-dark); }

.v7-rowmain{ min-width: 0; }
.v7-rowtitle{
    display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
}
.v7-rowtitle h3{
    font-size: clamp(1.18rem, 2.4vw, 1.6rem);
    font-weight: 800; letter-spacing: -.015em; line-height: 1.15; margin: 0;
}
.v7-rowtitle .v7-ri{
    width: 30px; height: 30px; flex: none; display: grid; place-items: center;
    border-radius: 9px; color: #fff; font-size: .85rem;
    background: linear-gradient(140deg, var(--primary), var(--primary-dark));
    box-shadow: 0 8px 18px -10px var(--primary-glow);
}
.v7-rowdesc{
    margin: .3rem 0 0; font-size: var(--v7-line); line-height: 1.5;
    color: var(--text-muted);
    /* Desktop: erst beim Hover/Fokus zeigen (ruhiges Listenbild).
       Auf Mobile (Media-Query) IMMER sichtbar -> kein Hover nötig. */
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .45s cubic-bezier(.16,.84,.44,1), opacity .4s ease, margin .4s ease;
}
.v7-row:hover .v7-rowdesc, .v7-row:focus-visible .v7-rowdesc, .v7-row.is-active .v7-rowdesc{
    max-height: 5rem; opacity: 1;
}

.v7-tag{
    font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: .26rem .56rem; border-radius: 999px;
    background: var(--bg-light); color: var(--text-muted); border: 1px solid var(--border);
    white-space: nowrap;
}
.v7-tag.is-live{ color: var(--success); border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.10); }
.v7-tag.is-soon{ color: var(--accent); border-color: rgba(124,58,237,.30); background: rgba(124,58,237,.08); }
.v7-tag.is-free{ color: var(--primary-dark); border-color: rgba(37,99,235,.30); background: var(--primary-soft); }

.v7-arrow{
    width: 40px; height: 40px; flex: none; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--border);
    background: rgba(255,255,255,.7); color: var(--primary-dark); font-size: .9rem;
    transition: transform .4s cubic-bezier(.16,.84,.44,1), background .4s ease, color .4s ease, border-color .4s ease;
}
.v7-row:hover .v7-arrow, .v7-row:focus-visible .v7-arrow, .v7-row.is-active .v7-arrow{
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff; border-color: transparent; transform: translateX(3px) rotate(-45deg);
}

/* ---- Vorschau-Bühne (sticky, Desktop) ---- */
.v7-stage-col{ position: sticky; top: 116px; align-self: start; }
.v7-stage{
    position: relative;
    border-radius: var(--v7-radius);
    border: 1px solid var(--border);
    background:
        radial-gradient(120% 120% at 100% 0%, var(--primary-soft), transparent 55%),
        rgba(255,255,255,.78);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.4rem, 2.6vw, 2.1rem);
    overflow: hidden;
    min-height: clamp(360px, 42vw, 460px);
    display: flex; flex-direction: column;
}
.v7-stage::after{
    content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(120% 90% at 85% 0%, #000, transparent 72%);
}
.v7-stage > *{ position: relative; z-index: 1; }

/* Vorschau-Panels: gestapelt, nur das aktive sichtbar */
.v7-panels{ position: relative; flex: 1 1 auto; }
.v7-panel{
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden;
    transform: translateY(14px) scale(.985);
    transition: opacity .5s ease, transform .5s cubic-bezier(.16,.84,.44,1), visibility .5s;
}
.v7-panel.is-active{
    opacity: 1; visibility: visible; transform: none;
}
.v7-panel-icon{
    width: clamp(60px, 8vw, 76px); height: clamp(60px, 8vw, 76px);
    display: grid; place-items: center; border-radius: 20px;
    color: #fff; font-size: clamp(1.5rem, 3vw, 2rem);
    background: linear-gradient(140deg, var(--primary), var(--primary-dark));
    box-shadow: 0 18px 36px -16px var(--primary-glow);
    margin-bottom: 1.3rem;
}
.v7-panel h4{
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .6rem;
}
.v7-panel p{
    font-size: clamp(.96rem, 1.4vw, 1.06rem); line-height: 1.6;
    color: var(--text-muted); margin: 0 0 1.2rem; max-width: 44ch;
}
.v7-feats{ list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.v7-feats li{ display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: var(--text-main); }
.v7-feats li i{ color: var(--success); font-size: .85rem; flex: none; }
.v7-panel-foot{ margin-top: auto; }
.v7-panel-link{
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: .98rem; color: var(--primary-dark); text-decoration: none;
}
.v7-panel-link i{ transition: transform .35s ease; }
.v7-panel-link:hover i, .v7-panel-link:focus-visible i{ transform: translateX(5px); }
.v7-panel-link:focus-visible{ outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 8px; }

/* dezente Akzentvariation pro Bereich (Icon-Verlauf) */
.v7-panel[data-key="apple"] .v7-panel-icon,
.v7-row[data-key="apple"] .v7-ri{ background: linear-gradient(140deg, var(--bg-dark), var(--primary-dark)); }
.v7-panel[data-key="android"] .v7-panel-icon,
.v7-row[data-key="android"] .v7-ri{ background: linear-gradient(140deg, var(--success), #047857); }
.v7-panel[data-key="web"] .v7-panel-icon,
.v7-row[data-key="web"] .v7-ri{ background: linear-gradient(140deg, var(--accent), var(--primary-dark)); }
.v7-panel[data-key="tools"] .v7-panel-icon,
.v7-row[data-key="tools"] .v7-ri{ background: linear-gradient(140deg, var(--primary), var(--accent)); }
.v7-panel[data-key="news"] .v7-panel-icon,
.v7-row[data-key="news"] .v7-ri{ background: linear-gradient(140deg, var(--accent), var(--primary)); }
.v7-panel[data-key="shop"] .v7-panel-icon,
.v7-row[data-key="shop"] .v7-ri{ background: linear-gradient(140deg, var(--success), #047857); }
.v7-panel[data-key="hosting"] .v7-panel-icon,
.v7-row[data-key="hosting"] .v7-ri{ background: linear-gradient(140deg, var(--primary-light), var(--primary)); }
.v7-panel[data-key="it"] .v7-panel-icon,
.v7-row[data-key="it"] .v7-ri{ background: linear-gradient(140deg, var(--primary-dark), var(--bg-dark)); }
.v7-panel[data-key="docs"] .v7-panel-icon,
.v7-row[data-key="docs"] .v7-ri{ background: linear-gradient(140deg, var(--text-muted), var(--text-main)); }

/* kleines CSS-Mockup als Vorschau-Ornament */
.v7-mock{
    margin-top: 1.1rem; display: flex; gap: .5rem; flex-wrap: wrap;
}
.v7-mock span{
    height: 30px; border-radius: 8px; border: 1px solid var(--border);
    background: rgba(255,255,255,.7); flex: 1 1 auto; min-width: 54px;
    position: relative;
}
.v7-mock span::after{
    content: ""; position: absolute; inset: 0 auto 0 0; width: 40%;
    border-radius: 8px 0 0 8px;
    background: linear-gradient(90deg, var(--primary-soft), transparent);
}

/* ============================================================
   VERTRAUEN / SO ARBEITE ICH (kleine Reihe)
   ============================================================ */
.v7-why-head{ max-width: 50rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.v7-why-head h2{
    font-size: clamp(1.6rem, 3.6vw, 2.6rem);
    line-height: 1.1; font-weight: 800; letter-spacing: -.025em; margin: .7rem 0 .6rem;
}
.v7-why-head p{ font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6; color: var(--text-muted); margin: 0; }
.v7-why-grid{
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}
.v7-why-card{
    border: 1px solid var(--border); border-radius: var(--v7-radius);
    background: rgba(255,255,255,.78); backdrop-filter: blur(8px);
    box-shadow: var(--shadow-soft);
    padding: clamp(1.3rem, 2.2vw, 1.7rem);
    transition: transform .4s cubic-bezier(.16,.84,.44,1), box-shadow .4s ease, border-color .4s ease;
}
.v7-why-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.v7-why-ic{
    width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px;
    color: #fff; font-size: 1.25rem; margin-bottom: 1rem;
    background: linear-gradient(140deg, var(--primary), var(--accent));
    box-shadow: 0 12px 26px -14px var(--primary-glow);
}
.v7-why-card h3{ font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 .45rem; }
.v7-why-card p{ font-size: .95rem; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* ============================================================
   ABSCHLUSS-CTA — dunkles Panel
   ============================================================ */
.v7-cta-panel{
    position: relative; overflow: hidden;
    border-radius: var(--v7-radius);
    background:
        radial-gradient(130% 150% at 100% 0%, rgba(124,58,237,.24), transparent 56%),
        linear-gradient(150deg, var(--bg-dark), var(--primary-dark));
    color: #fff;
    padding: clamp(2.2rem, 6vw, 4rem);
    text-align: center;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow-lg);
}
.v7-cta-panel::after{
    content: ""; position: absolute; inset: 0; z-index: 0; opacity: .45; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(120% 90% at 30% 0%, #000, transparent 74%);
}
.v7-cta-panel > *{ position: relative; z-index: 1; }
.v7-cta-panel h2{ font-size: clamp(1.8rem, 4.4vw, 2.7rem); font-weight: 800; letter-spacing: -.025em; margin: 0 0 .9rem; }
.v7-cta-panel h2 .v7-grad{ background: linear-gradient(110deg, var(--primary-light), #c4b5fd, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v7-cta-panel p{ font-size: clamp(1rem, 1.5vw, 1.16rem); color: var(--text-light); max-width: 60ch; margin: 0 auto 1.9rem; line-height: 1.6; }
.v7-cta-actions{ display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.v7-cta-panel .v7-btn-ghost{ background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.v7-cta-panel .v7-btn-ghost:hover, .v7-cta-panel .v7-btn-ghost:focus-visible{ background: rgba(255,255,255,.18); }

/* ============================================================
   ANIMATIONEN
   ============================================================ */
@keyframes v7-pulse{
    0%{ box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
    70%{ box-shadow: 0 0 0 9px rgba(16,185,129,0); }
    100%{ box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
@media (prefers-reduced-motion: no-preference){
    .v7-pulse{ animation: v7-pulse 2.4s ease-out infinite; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
    /* eine Spalte: Liste oben, Bühne wird ausgeblendet (Liste zeigt alles) */
    .v7-dir{ grid-template-columns: 1fr; }
    .v7-stage-col{ display: none; }
    .v7-why-grid{ grid-template-columns: 1fr; }

    /* Mobile/Tablet: Kurzinfo IMMER sichtbar (kein Hover nötig) */
    .v7-rowdesc{ max-height: none; opacity: 1; overflow: visible; margin-top: .35rem; }
    .v7-row{ padding-block: clamp(1rem, 3vw, 1.3rem); }
}
@media (max-width: 560px){
    .v7-row{ grid-template-columns: auto 1fr auto; gap: .7rem; }
    .v7-num{ align-self: start; padding-top: .25rem; }
    .v7-rowtitle h3{ font-size: 1.18rem; }
    .v7-arrow{ width: 36px; height: 36px; }
    .v7-dir-head{ align-items: flex-start; }
}
@media (max-width: 400px){
    .v7-hero-actions, .v7-cta-actions{ flex-direction: column; align-items: stretch; }
    .v7-btn{ justify-content: center; }
    .v7-hero-meta{ gap: 1rem 1.4rem; }
    /* sehr schmal: Tag in eigene Zeile, kein Overflow */
    .v7-rowtitle{ gap: .5rem; }
}

@media (prefers-reduced-motion: reduce){
    .v7-home *{ animation: none !important; }
    .v7-row, .v7-arrow, .v7-num, .v7-rowdesc, .v7-panel,
    .v7-btn, .v7-why-card, .v7-panel-link i{ transition: none !important; }
    .v7-row:hover, .v7-row:focus-visible, .v7-row.is-active{ padding-left: clamp(.4rem,1vw,.9rem); }
}
</style>

{{-- ============================================================
     HERO
     ============================================================ --}}
<header class="v7-hero v7-shell" aria-label="Einführung KOTSCH.TECH">
    <div class="v7-hero-inner">
        <span class="v7-badge">
            <img src="{{ asset('img/logo-mark.png') }}" alt="Logo von KOTSCH.TECH">
            <span class="v7-pulse" aria-hidden="true"></span>
            Persönliche Tech-Marke
        </span>
        <h1>KOTSCH.TECH –<br>ein Verzeichnis<br>für <span class="v7-grad">alles Digitale.</span></h1>
        <p class="v7-hero-lead">
            Die persönliche Tech-Marke von <strong>Arthur Kotsch</strong>: native Apps für iOS, macOS,
            Android &amp; Windows, durchdachtes Webdesign, hunderte kostenlose Webtools, ein digitaler Shop,
            schlankes Hosting und ehrliche IT-Hilfe. Wähl unten einfach den passenden Bereich.
        </p>
        <div class="v7-hero-actions">
            <a href="{{ route('kontakt') }}" class="v7-btn v7-btn-primary">
                <i class="fa-solid fa-paper-plane" aria-hidden="true"></i> Projekt anfragen
            </a>
            <a href="#v7-verzeichnis" class="v7-btn v7-btn-ghost">
                <i class="fa-solid fa-list" aria-hidden="true"></i> Zum Verzeichnis
            </a>
        </div>

        <dl class="v7-hero-meta">
            <div>
                <strong>9</strong>
                <span>Bereiche &amp; Plattformen</span>
            </div>
            <div>
                <strong>4</strong>
                <span>Betriebssysteme</span>
            </div>
            <div>
                <strong>100%</strong>
                <span>von einem Entwickler</span>
            </div>
        </dl>
    </div>
</header>

{{-- ============================================================
     VERZEICHNIS — Liste (links) + Vorschau-Bühne (rechts, sticky)
     Bereichsliste nutzt role="navigation" (KEIN nav-Element).
     ============================================================ --}}
<section class="v7-shell v7-section" id="v7-verzeichnis" aria-label="Verzeichnis aller Bereiche">
    <div class="v7-dir-head reveal">
        <div>
            <span class="v7-eyebrow"><i class="fa-solid fa-compass" aria-hidden="true"></i> Verzeichnis</span>
            <h2>Alle Bereiche <span class="v7-grad">auf einen Blick</span></h2>
        </div>
        <p class="v7-dir-hint">
            <i class="fa-solid fa-arrow-pointer" aria-hidden="true"></i>
            Bereich antippen oder ansteuern für die Vorschau
        </p>
    </div>

    <div class="v7-dir reveal">

        {{-- ---------- Liste ---------- --}}
        <div class="v7-list" role="navigation" aria-label="Bereiche von KOTSCH.TECH" data-v7-list>

            {{-- 01 Apple --}}
            <a href="{{ route('apple.index') }}" class="v7-row" data-key="apple" aria-describedby="v7-d-apple">
                <span class="v7-num" aria-hidden="true">01</span>
                <span class="v7-rowmain">
                    <span class="v7-rowtitle">
                        <span class="v7-ri" aria-hidden="true"><i class="fa-brands fa-apple"></i></span>
                        <h3>iOS &amp; Mac Apps</h3>
                        <span class="v7-tag is-live">Im App Store</span>
                    </span>
                    <span class="v7-rowdesc" id="v7-d-apple">Native Swift-Apps für iPhone, iPad und macOS – schnell und datenschutzfreundlich.</span>
                </span>
                <span class="v7-arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></span>
            </a>

            {{-- 02 Windows --}}
            <a href="{{ route('windows.index') }}" class="v7-row" data-key="it" aria-describedby="v7-d-win">
                <span class="v7-num" aria-hidden="true">02</span>
                <span class="v7-rowmain">
                    <span class="v7-rowtitle">
                        <span class="v7-ri" aria-hidden="true"><i class="fa-brands fa-windows"></i></span>
                        <h3>Windows-Software</h3>
                    </span>
                    <span class="v7-rowdesc" id="v7-d-win">Schlanke Desktop-Tools für den Alltag – ohne Ballast, sofort einsatzbereit.</span>
                </span>
                <span class="v7-arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></span>
            </a>

            {{-- 03 Android --}}
            <a href="{{ route('android.index') }}" class="v7-row" data-key="android" aria-describedby="v7-d-android">
                <span class="v7-num" aria-hidden="true">03</span>
                <span class="v7-rowmain">
                    <span class="v7-rowtitle">
                        <span class="v7-ri" aria-hidden="true"><i class="fa-brands fa-android"></i></span>
                        <h3>Android Apps</h3>
                        <span class="v7-tag is-soon">In Entwicklung</span>
                    </span>
                    <span class="v7-rowdesc" id="v7-d-android">Mobile Apps für Android sind in Arbeit – wirf vorab einen Blick auf die geplanten Projekte.</span>
                </span>
                <span class="v7-arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></span>
            </a>

            {{-- 04 Webdesign --}}
            <a href="{{ route('web.templates') }}" class="v7-row" data-key="web" aria-describedby="v7-d-web">
                <span class="v7-num" aria-hidden="true">04</span>
                <span class="v7-rowmain">
                    <span class="v7-rowtitle">
                        <span class="v7-ri" aria-hidden="true"><i class="fa-solid fa-pen-ruler"></i></span>
                        <h3>Webdesign</h3>
                    </span>
                    <span class="v7-rowdesc" id="v7-d-web">Moderne, schnelle Websites mit klarer Struktur – von der Idee bis zum fertigen Auftritt.</span>
                </span>
                <span class="v7-arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></span>
            </a>

            {{-- 05 Webtools --}}
            <a href="{{ route('webtools.show') }}" class="v7-row" data-key="tools" aria-describedby="v7-d-tools">
                <span class="v7-num" aria-hidden="true">05</span>
                <span class="v7-rowmain">
                    <span class="v7-rowtitle">
                        <span class="v7-ri" aria-hidden="true"><i class="fa-solid fa-toolbox"></i></span>
                        <h3>Webtools</h3>
                        <span class="v7-tag is-free">Kostenlos</span>
                    </span>
                    <span class="v7-rowdesc" id="v7-d-tools">Hunderte kostenlose Tools direkt im Browser – ohne Anmeldung, alles lokal auf deinem Gerät.</span>
                </span>
                <span class="v7-arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></span>
            </a>

            {{-- 06 News --}}
            <a href="{{ route('news.index') }}" class="v7-row" data-key="news" aria-describedby="v7-d-news">
                <span class="v7-num" aria-hidden="true">06</span>
                <span class="v7-rowmain">
                    <span class="v7-rowtitle">
                        <span class="v7-ri" aria-hidden="true"><i class="fa-solid fa-newspaper"></i></span>
                        <h3>News &amp; Blog</h3>
                    </span>
                    <span class="v7-rowdesc" id="v7-d-news">Artikel, Updates und Notizen aus der Praxis – verständlich rund um Technik, Apps und Code.</span>
                </span>
                <span class="v7-arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></span>
            </a>

            {{-- 07 Shop --}}
            <a href="{{ route('shop.index') }}" class="v7-row" data-key="shop" aria-describedby="v7-d-shop">
                <span class="v7-num" aria-hidden="true">07</span>
                <span class="v7-rowmain">
                    <span class="v7-rowtitle">
                        <span class="v7-ri" aria-hidden="true"><i class="fa-solid fa-bag-shopping"></i></span>
                        <h3>Shop</h3>
                    </span>
                    <span class="v7-rowdesc" id="v7-d-shop">Digitale Produkte zum direkten Download – sofort verfügbar nach dem Kauf, ohne Wartezeit.</span>
                </span>
                <span class="v7-arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></span>
            </a>

            {{-- 08 Hosting --}}
            <a href="{{ route('hosting.index') }}" class="v7-row" data-key="hosting" aria-describedby="v7-d-host">
                <span class="v7-num" aria-hidden="true">08</span>
                <span class="v7-rowmain">
                    <span class="v7-rowtitle">
                        <span class="v7-ri" aria-hidden="true"><i class="fa-solid fa-cloud"></i></span>
                        <h3>Hosting</h3>
                    </span>
                    <span class="v7-rowdesc" id="v7-d-host">Kleines, ehrliches Hosting für Webprojekte – persönlich betreut und unkompliziert.</span>
                </span>
                <span class="v7-arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></span>
            </a>

            {{-- 09 IT-Hilfe --}}
            <a href="{{ route('it-hilfe.index') }}" class="v7-row" data-key="it" aria-describedby="v7-d-it">
                <span class="v7-num" aria-hidden="true">09</span>
                <span class="v7-rowmain">
                    <span class="v7-rowtitle">
                        <span class="v7-ri" aria-hidden="true"><i class="fa-solid fa-headset"></i></span>
                        <h3>IT-Hilfe</h3>
                    </span>
                    <span class="v7-rowdesc" id="v7-d-it">Direkte Unterstützung bei PC-, Software- und Technikproblemen – ohne Fachchinesisch.</span>
                </span>
                <span class="v7-arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></span>
            </a>

            {{-- 10 Dokumente (optional) --}}
            <a href="{{ route('documents.index') }}" class="v7-row" data-key="docs" aria-describedby="v7-d-docs">
                <span class="v7-num" aria-hidden="true">10</span>
                <span class="v7-rowmain">
                    <span class="v7-rowtitle">
                        <span class="v7-ri" aria-hidden="true"><i class="fa-solid fa-file-lines"></i></span>
                        <h3>Dokumente</h3>
                    </span>
                    <span class="v7-rowdesc" id="v7-d-docs">Gesammelte Unterlagen, Vorlagen und PDFs – übersichtlich an einem Ort zum Nachlesen.</span>
                </span>
                <span class="v7-arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></span>
            </a>

        </div>

        {{-- ---------- Vorschau-Bühne (Desktop, dekorativ-ergänzend) ----------
             aria-hidden: die Inhalte sind 1:1 schon in der Liste vorhanden;
             die Bühne ist reine visuelle Vorschau und für Screenreader doppelt. --}}
        <div class="v7-stage-col" aria-hidden="true">
            <div class="v7-stage" data-v7-stage>
                <div class="v7-panels">

                    <div class="v7-panel is-active" data-key="apple">
                        <span class="v7-panel-icon"><i class="fa-brands fa-apple"></i></span>
                        <h4>iOS &amp; Mac Apps</h4>
                        <p>Native Apps, die sich auf jedem Apple-Gerät zuhause anfühlen – etwa Convertly+ für blitzschnelle Umrechnungen direkt am Gerät.</p>
                        <ul class="v7-feats">
                            <li><i class="fa-solid fa-check"></i> Native Swift-Entwicklung</li>
                            <li><i class="fa-solid fa-check"></i> iPhone, iPad &amp; macOS</li>
                            <li><i class="fa-solid fa-check"></i> Datenschutz inklusive</li>
                        </ul>
                        <div class="v7-panel-foot"><span class="v7-panel-link">Apple Apps ansehen <i class="fa-solid fa-arrow-right"></i></span></div>
                    </div>

                    <div class="v7-panel" data-key="it">
                        <span class="v7-panel-icon"><i class="fa-brands fa-windows"></i></span>
                        <h4>Windows-Software</h4>
                        <p>Praktische Desktop-Programme für den Alltag – schlank, ohne Ballast und sofort einsatzbereit auf jedem PC.</p>
                        <ul class="v7-feats">
                            <li><i class="fa-solid fa-check"></i> Leichtgewichtige Tools</li>
                            <li><i class="fa-solid fa-check"></i> Sofort startklar</li>
                        </ul>
                        <div class="v7-mock"><span></span><span></span><span></span></div>
                        <div class="v7-panel-foot"><span class="v7-panel-link">Programme ansehen <i class="fa-solid fa-arrow-right"></i></span></div>
                    </div>

                    <div class="v7-panel" data-key="android">
                        <span class="v7-panel-icon"><i class="fa-brands fa-android"></i></span>
                        <h4>Android Apps</h4>
                        <p>Mobile Apps für Android entstehen gerade. Wirf vorab einen Blick auf die geplanten Projekte und ihre Funktionen.</p>
                        <ul class="v7-feats">
                            <li><i class="fa-solid fa-check"></i> In aktiver Entwicklung</li>
                            <li><i class="fa-solid fa-check"></i> Vorschau verfügbar</li>
                        </ul>
                        <div class="v7-panel-foot"><span class="v7-panel-link">Vorschau ansehen <i class="fa-solid fa-arrow-right"></i></span></div>
                    </div>

                    <div class="v7-panel" data-key="web">
                        <span class="v7-panel-icon"><i class="fa-solid fa-pen-ruler"></i></span>
                        <h4>Webdesign</h4>
                        <p>Moderne, schnelle Websites mit klarer Struktur und Markenfokus – von der ersten Idee bis zum fertigen Auftritt.</p>
                        <ul class="v7-feats">
                            <li><i class="fa-solid fa-check"></i> Klares, responsives Design</li>
                            <li><i class="fa-solid fa-check"></i> Schnelle Ladezeiten</li>
                        </ul>
                        <div class="v7-mock"><span></span><span></span></div>
                        <div class="v7-panel-foot"><span class="v7-panel-link">Designs ansehen <i class="fa-solid fa-arrow-right"></i></span></div>
                    </div>

                    <div class="v7-panel" data-key="tools">
                        <span class="v7-panel-icon"><i class="fa-solid fa-toolbox"></i></span>
                        <h4>Webtools</h4>
                        <p>Hunderte kostenlose Tools direkt im Browser – Konverter, Rechner, Generatoren und Helfer, alles lokal auf deinem Gerät.</p>
                        <ul class="v7-feats">
                            <li><i class="fa-solid fa-check"></i> Ohne Anmeldung &amp; Upload</li>
                            <li><i class="fa-solid fa-check"></i> Text-, Bild- &amp; Code-Helfer</li>
                            <li><i class="fa-solid fa-check"></i> Datenschutzfreundlich</li>
                        </ul>
                        <div class="v7-panel-foot"><span class="v7-panel-link">Alle Tools öffnen <i class="fa-solid fa-arrow-right"></i></span></div>
                    </div>

                    <div class="v7-panel" data-key="news">
                        <span class="v7-panel-icon"><i class="fa-solid fa-newspaper"></i></span>
                        <h4>News &amp; Blog</h4>
                        <p>Artikel, Updates und Notizen aus der Praxis – verständlich erklärt rund um Technik, Apps und Entwicklung.</p>
                        <ul class="v7-feats">
                            <li><i class="fa-solid fa-check"></i> Praxisnahe Beiträge</li>
                            <li><i class="fa-solid fa-check"></i> Regelmäßige Updates</li>
                        </ul>
                        <div class="v7-panel-foot"><span class="v7-panel-link">Beiträge lesen <i class="fa-solid fa-arrow-right"></i></span></div>
                    </div>

                    <div class="v7-panel" data-key="shop">
                        <span class="v7-panel-icon"><i class="fa-solid fa-bag-shopping"></i></span>
                        <h4>Shop</h4>
                        <p>Digitale Produkte zum direkten Download – sofort verfügbar nach dem Kauf, ohne Wartezeit und ohne Versand.</p>
                        <ul class="v7-feats">
                            <li><i class="fa-solid fa-check"></i> Sofort-Download</li>
                            <li><i class="fa-solid fa-check"></i> Lizenzen &amp; Vorlagen</li>
                        </ul>
                        <div class="v7-panel-foot"><span class="v7-panel-link">Zum Shop <i class="fa-solid fa-arrow-right"></i></span></div>
                    </div>

                    <div class="v7-panel" data-key="hosting">
                        <span class="v7-panel-icon"><i class="fa-solid fa-cloud"></i></span>
                        <h4>Hosting</h4>
                        <p>Kleines, ehrliches Hosting für Webprojekte – persönlich betreut, unkompliziert und ohne überflüssigen Ballast.</p>
                        <ul class="v7-feats">
                            <li><i class="fa-solid fa-check"></i> Persönlich betreut</li>
                            <li><i class="fa-solid fa-check"></i> Unkomplizierter Start</li>
                        </ul>
                        <div class="v7-panel-foot"><span class="v7-panel-link">Hosting ansehen <i class="fa-solid fa-arrow-right"></i></span></div>
                    </div>

                    <div class="v7-panel" data-key="docs">
                        <span class="v7-panel-icon"><i class="fa-solid fa-file-lines"></i></span>
                        <h4>Dokumente</h4>
                        <p>Gesammelte Unterlagen, Vorlagen und PDFs – übersichtlich an einem Ort zum Nachlesen und Herunterladen.</p>
                        <ul class="v7-feats">
                            <li><i class="fa-solid fa-check"></i> Vorlagen &amp; PDFs</li>
                            <li><i class="fa-solid fa-check"></i> Übersichtlich sortiert</li>
                        </ul>
                        <div class="v7-panel-foot"><span class="v7-panel-link">Dokumente öffnen <i class="fa-solid fa-arrow-right"></i></span></div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</section>

{{-- ============================================================
     SO ARBEITE ICH
     ============================================================ --}}
<section class="v7-shell v7-section" aria-label="So arbeite ich">
    <div class="v7-why-head reveal">
        <span class="v7-eyebrow"><i class="fa-solid fa-handshake" aria-hidden="true"></i> So arbeite ich</span>
        <h2>Eine Anlaufstelle, <span class="v7-grad">ein Ansprechpartner</span></h2>
        <p>Statt vieler Dienstleister kommt alles aus einer Hand – von der ersten Idee über die Umsetzung bis zum laufenden Betrieb.</p>
    </div>

    <div class="v7-why-grid reveal">
        <div class="v7-why-card">
            <span class="v7-why-ic" aria-hidden="true"><i class="fa-solid fa-user-gear"></i></span>
            <h3>Direkt &amp; persönlich</h3>
            <p>Du sprichst immer mit Arthur Kotsch selbst – kurze Wege, klare Antworten, keine Warteschleifen.</p>
        </div>
        <div class="v7-why-card">
            <span class="v7-why-ic" aria-hidden="true"><i class="fa-solid fa-layer-group"></i></span>
            <h3>Alles aus einer Hand</h3>
            <p>App, Website, Tools, Shop, Hosting und Support greifen sauber ineinander – ohne Schnittstellen-Chaos.</p>
        </div>
        <div class="v7-why-card">
            <span class="v7-why-ic" aria-hidden="true"><i class="fa-solid fa-shield-halved"></i></span>
            <h3>Ehrlich &amp; verlässlich</h3>
            <p>Realistische Einschätzungen statt leerer Versprechen – datenschutzfreundlich und transparent umgesetzt.</p>
        </div>
    </div>
</section>

{{-- ============================================================
     ABSCHLUSS-CTA
     ============================================================ --}}
<section class="v7-shell v7-section" aria-label="Kontaktaufnahme">
    <div class="v7-cta-panel reveal">
        <h2>Lass uns dein <span class="v7-grad">Projekt starten.</span></h2>
        <p>
            Ob App-Idee, neue Website oder ein technisches Problem – schreib direkt an Arthur Kotsch
            und erhalte eine ehrliche, persönliche Einschätzung.
        </p>
        <div class="v7-cta-actions">
            <a href="{{ route('kontakt') }}" class="v7-btn v7-btn-primary">
                <i class="fa-solid fa-paper-plane" aria-hidden="true"></i> Jetzt Kontakt aufnehmen
            </a>
            <a href="{{ route('shop.index') }}" class="v7-btn v7-btn-ghost">
                <i class="fa-solid fa-bag-shopping" aria-hidden="true"></i> Shop ansehen
            </a>
        </div>
    </div>
</section>

</div>

<script>
/* ============================================================
   KOTSCH.TECH Variante 7 — Hover-Reveal-Verzeichnis
   Verknüpft Listen-Zeilen (data-key) mit der Vorschau-Bühne.
   Vanilla, IIFE-gekapselt, null-safe. Progressive Enhancement:
   ohne JS funktioniert die Liste vollständig als Linkliste.
   ============================================================ */
(function () {
    'use strict';
    var root = document.getElementById('v7-home');
    if (!root) { return; }

    /* JS aktiv -> animierte .reveal-Einblendung erlauben (sonst sichtbar). */
    root.classList.add('v7-js');

    var list = root.querySelector('[data-v7-list]');
    var stage = root.querySelector('[data-v7-stage]');
    if (!list || !stage) { return; }

    var rows = list.querySelectorAll('.v7-row[data-key]');
    var panels = stage.querySelectorAll('.v7-panel[data-key]');
    if (!rows.length || !panels.length) { return; }

    var panelMap = {};
    for (var p = 0; p < panels.length; p++) {
        panelMap[panels[p].getAttribute('data-key')] = panels[p];
    }

    var current = null;

    function activate(key) {
        var next = panelMap[key];
        if (!next || next === current) { return; }
        for (var i = 0; i < panels.length; i++) {
            panels[i].classList.remove('is-active');
        }
        next.classList.add('is-active');
        current = next;

        /* aktive Zeile markieren (visuelles Feedback bei Tastatur/Fokus) */
        for (var r = 0; r < rows.length; r++) {
            rows[r].classList.toggle('is-active', rows[r].getAttribute('data-key') === key);
        }
    }

    for (var n = 0; n < rows.length; n++) {
        (function (row) {
            var key = row.getAttribute('data-key');
            row.addEventListener('mouseenter', function () { activate(key); });
            row.addEventListener('focus', function () { activate(key); });
        })(rows[n]);
    }
})();
</script>
@endsection