@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch – Software, Apps & Web')
@section('meta_description', 'Arthur Kotsch: Softwareentwicklung, iOS-, macOS- & Android-Apps, Windows-Tools, Webdesign, 420+ Webtools, News, Shop, Hosting und IT-Hilfe – alles aus einer Hand.')
@section('og_title', 'KOTSCH.TECH – Software, Apps, Webdesign & IT von Arthur Kotsch')
@section('og_description', 'Eine Ausgabe, viele Disziplinen: native Apps, Windows-Software, Webdesign, 420+ kostenlose Webtools, digitaler Shop, Hosting und persönliche IT-Hilfe – alles aus einer Hand.')
@section('twitter_title', 'KOTSCH.TECH – die Tech-Marke von Arthur Kotsch')
@section('twitter_description', 'Apps, Webdesign, Webtools, Shop, Hosting & IT-Hilfe von Arthur Kotsch – als geschichtetes Tech-Magazin. Sauber gebaut, persönlich betreut, direkt verlinkt.')

@section('content')
<div class="v12-home v12-no-js">
<style>
    /* ============================================================
       KOTSCH.TECH — Variante 12: "Broken Press" — Plakat-Magazin
       Verfeinertes, mutigeres Broken-Grid (Familie von Variante 2):
       Masthead wie ein Magazin-Kopf, riesige abblutende Geister-Typo
       als Hintergrundebene, praezise z-index-Schichtung, kraeftige
       Plakat-Ueberlappungen, Plate-Outline-Zahlen, diagonale Tabs.
       ALLE Selektoren mit .v12- praefixiert (keine Kollision app.css).
       Nur globale Brand-Variablen, keine neuen Farben.
       ============================================================ */

    .v12-home {
        --v12-ink: var(--text-main);
        --v12-soft: var(--text-muted);
        --v12-rule: var(--border);
        --v12-paper: var(--bg);
        --v12-paper-2: var(--bg-light);
        --v12-edge: 2px;                 /* Plakat-Rahmenstaerke */
        --v12-rule-w: 2.5px;             /* Masthead-Linien */
        --v12-gutter: clamp(1.1rem, 4.5vw, 4.5rem);
        --v12-ease: cubic-bezier(.16, .84, .44, 1);
        color: var(--v12-ink);
        background: var(--v12-paper);
        position: relative;
        overflow-x: clip;
        font-feature-settings: "ss01" on;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }
    .v12-home *,
    .v12-home *::before,
    .v12-home *::after { box-sizing: border-box; }

    /* ---- durchgehende Hintergrundebene: feines Raster + zwei Auren ---- */
    .v12-home::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
            linear-gradient(to right, rgba(15,23,42,.045) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(15,23,42,.038) 1px, transparent 1px);
        background-size: clamp(44px, 7vw, 92px) clamp(44px, 7vw, 92px);
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
        opacity: .85;
    }
    .v12-home::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(46% 36% at 88% 4%, var(--primary-glow), transparent 62%),
            radial-gradient(40% 32% at 4% 26%, rgba(124,58,237,.16), transparent 60%);
        opacity: .9;
    }
    .v12-home > * { position: relative; z-index: 1; }

    .v12-wrap {
        width: 100%;
        max-width: 1320px;
        margin-inline: auto;
        padding-inline: var(--v12-gutter);
    }

    /* Signatur-Gradient (Headline-Worte) */
    .v12-grad {
        background: linear-gradient(108deg, var(--primary) 0%, var(--accent) 50%, var(--primary-light) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* ---------- Reveal (JS-frei sichtbar als Fallback) ---------- */
    .v12-rev {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity .8s var(--v12-ease), transform .8s var(--v12-ease);
        will-change: opacity, transform;
    }
    .v12-rev.v12-in { opacity: 1; transform: none; }
    .v12-home.v12-no-js .v12-rev { opacity: 1; transform: none; }
    .v12-d1 { transition-delay: .06s; }
    .v12-d2 { transition-delay: .12s; }
    .v12-d3 { transition-delay: .18s; }
    .v12-d4 { transition-delay: .24s; }

    /* ---------- gemeinsame Komponenten: Pillen-Buttons ---------- */
    .v12-btn {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        font-weight: 700;
        font-size: .95rem;
        line-height: 1;
        text-decoration: none;
        border-radius: 999px;
        padding: .95rem 1.6rem;
        border: var(--v12-edge) solid transparent;
        transition: transform .25s var(--v12-ease), box-shadow .25s ease,
                    background .25s ease, color .25s ease, border-color .25s ease;
    }
    .v12-btn i { font-size: .85em; transition: transform .25s ease; }
    .v12-btn:hover i { transform: translateX(3px); }
    .v12-btn-primary {
        background: var(--v12-ink);
        color: #fff;
        box-shadow: var(--shadow-soft);
    }
    .v12-btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: var(--primary); }
    .v12-btn-primary:hover i.fa-arrow-down { transform: translateY(3px); }
    .v12-btn-ghost {
        background: var(--v12-paper);
        color: var(--v12-ink);
        border-color: var(--v12-ink);
    }
    .v12-btn-ghost:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary); }

    /* ============================================================
       MASTHEAD — Magazin-Kopf mit Ausgabe-Zeile + Doppelregel
       ============================================================ */
    .v12-masthead {
        padding-top: clamp(120px, 14vh, 168px);
        position: relative;
        z-index: 2;
    }
    .v12-mast-rule {
        display: flex;
        align-items: center;
        gap: clamp(.7rem, 2vw, 1.4rem);
        flex-wrap: wrap;
        font-size: clamp(.6rem, 1.05vw, .72rem);
        font-weight: 800;
        letter-spacing: .26em;
        text-transform: uppercase;
        color: var(--v12-soft);
        padding-bottom: .9rem;
        border-bottom: var(--v12-rule-w) solid var(--v12-ink);
    }
    .v12-mast-rule::after {
        /* zweite, duenne Regel unter der dicken -> Magazin-Doppellinie */
        content: "";
        position: absolute;
        left: var(--v12-gutter);
        right: var(--v12-gutter);
        height: 1px;
        background: var(--v12-rule);
        transform: translateY(calc(0.9rem + 4px));
    }
    .v12-mast-brand {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        color: var(--v12-ink);
        margin-right: auto;
    }
    .v12-mast-brand img { height: 20px; width: auto; display: block; }
    .v12-mast-live {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        color: var(--v12-ink);
    }
    .v12-mast-live i {
        color: var(--success);
        font-size: .68em;
        animation: v12-pulse 2.4s ease-in-out infinite;
    }
    @keyframes v12-pulse { 0%,100% { opacity: 1; } 50% { opacity: .32; } }
    .v12-mast-issue { color: var(--primary); }
    .v12-mast-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--v12-rule); flex: none; }

    /* ============================================================
       HERO — die "Titelseite": geschichtetes Plakat
       ============================================================ */
    .v12-hero {
        position: relative;
        padding-top: clamp(1.8rem, 4vw, 3rem);
        padding-bottom: clamp(2rem, 6vw, 4.5rem);
    }

    /* RIESIGE Geister-Wortmarke als abblutende Hintergrundebene */
    .v12-ghost {
        position: absolute;
        top: clamp(2.2rem, 7vw, 5rem);
        left: 50%;
        transform: translateX(-50%);
        width: 130%;
        text-align: center;
        font-size: clamp(8.5rem, 38vw, 34rem);
        font-weight: 800;
        letter-spacing: -.06em;
        line-height: .74;
        color: transparent;
        -webkit-text-stroke: clamp(1px, .18vw, 2px) rgba(37,99,235,.13);
        pointer-events: none;
        user-select: none;
        z-index: 0;
        white-space: nowrap;
    }
    /* zweite, gefuellte Geister-Lage fuer mehr Tiefe (sehr blass) */
    .v12-ghost-2 {
        position: absolute;
        right: -6vw;
        bottom: clamp(-2rem, -4vw, -4rem);
        font-size: clamp(5rem, 20vw, 18rem);
        font-weight: 800;
        letter-spacing: -.05em;
        line-height: .7;
        color: var(--primary-soft);
        pointer-events: none;
        user-select: none;
        z-index: 0;
        white-space: nowrap;
    }

    .v12-hero-grid {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1.4rem, 3vw, 2rem);
    }
    @media (min-width: 980px) {
        .v12-hero-grid {
            grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
            align-items: end;
            gap: clamp(1.6rem, 3vw, 2.6rem);
        }
    }

    .v12-kicker {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: var(--primary);
        margin: clamp(1.4rem, 4vw, 2.4rem) 0 clamp(1rem, 2.2vw, 1.5rem);
    }
    .v12-kicker::before {
        content: "";
        width: 30px; height: 2px;
        background: linear-gradient(90deg, var(--primary), var(--accent));
    }

    .v12-h1 {
        font-size: clamp(2.7rem, 9.8vw, 7rem);
        line-height: .88;
        letter-spacing: -.038em;
        font-weight: 800;
        margin: 0;
        text-wrap: balance;
    }
    .v12-h1 .v12-line { display: block; }
    /* diagonales "Tape" hinter einem Wort der H1 */
    .v12-h1 .v12-tape {
        position: relative;
        display: inline-block;
        z-index: 0;
        padding-inline: .12em;
    }
    .v12-h1 .v12-tape::before {
        content: "";
        position: absolute;
        inset: 14% -.06em 16% -.06em;
        background: var(--primary-soft);
        transform: rotate(-2.4deg);
        z-index: -1;
        border-radius: 4px;
    }

    .v12-lead {
        display: block;
        margin-top: clamp(.9rem, 2vw, 1.3rem);
        font-size: clamp(1rem, 2.1vw, 1.42rem);
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: -.01em;
        color: var(--v12-soft);
        max-width: 32ch;
    }
    .v12-lead strong { color: var(--v12-ink); font-weight: 700; }

    .v12-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .7rem .8rem;
        margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
    }

    /* die rechte "Inhalt dieser Ausgabe"-Karte — ueberlappt nach unten */
    .v12-cover-card {
        position: relative;
        border: var(--v12-edge) solid var(--v12-ink);
        border-radius: var(--radius);
        background: var(--v12-paper);
        padding: clamp(1.3rem, 2.6vw, 1.7rem);
        box-shadow: var(--shadow-lg);
        z-index: 5;
    }
    @media (min-width: 980px) {
        .v12-cover-card { margin-bottom: clamp(-3.4rem, -3.4vw, -1.6rem); margin-left: clamp(-1.6rem, -2.4vw, 0rem); }
    }
    .v12-cover-tab {
        position: absolute;
        top: 0; right: clamp(1rem, 3vw, 1.6rem);
        transform: translateY(-50%) rotate(-2.6deg);
        background: linear-gradient(120deg, var(--primary), var(--accent));
        color: #fff;
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        padding: .42rem .85rem;
        border-radius: 8px;
        box-shadow: 0 10px 22px -10px var(--primary-glow);
    }
    .v12-cover-card h2 {
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--v12-soft);
        margin: .2rem 0 1rem;
    }
    .v12-cover-card ul { list-style: none; margin: 0; padding: 0; }
    .v12-cover-card li {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .72rem 0;
        border-top: 1px solid var(--v12-rule);
        font-weight: 600;
        font-size: .95rem;
    }
    .v12-cover-card li:first-child { border-top: 0; padding-top: 0; }
    .v12-cover-card li i {
        width: 34px; height: 34px;
        flex: none;
        display: inline-grid;
        place-items: center;
        border-radius: 10px;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: .9rem;
    }
    .v12-cover-card li b { font-weight: 800; }
    .v12-cover-card li span {
        margin-left: auto;
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--v12-soft);
    }

    /* ---------- Marquee-Statband (ueberlappt Hero, dunkler Anker) ---------- */
    .v12-band {
        position: relative;
        z-index: 4;
        margin-top: clamp(2rem, 5vw, 3.6rem);
        border-block: var(--v12-edge) solid var(--v12-ink);
        background: var(--v12-ink);
        color: #fff;
        overflow: hidden;
    }
    .v12-band-track {
        display: flex;
        align-items: center;
        gap: clamp(1.6rem, 4vw, 3rem);
        width: max-content;
        padding-block: clamp(.85rem, 2vw, 1.15rem);
        animation: v12-marquee 38s linear infinite;
    }
    .v12-band:hover .v12-band-track { animation-play-state: paused; }
    @keyframes v12-marquee { to { transform: translateX(-50%); } }
    .v12-band-item {
        display: inline-flex;
        align-items: baseline;
        gap: .6rem;
        white-space: nowrap;
        font-weight: 700;
    }
    .v12-band-item b {
        font-size: clamp(1.1rem, 2vw, 1.5rem);
        font-weight: 800;
        letter-spacing: -.02em;
        background: linear-gradient(100deg, #fff, var(--primary-light));
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .v12-band-item span {
        font-size: .76rem;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--text-light);
        opacity: .82;
    }
    .v12-band-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-light); flex: none; }

    /* ============================================================
       SEKTIONS-GERueST — nummerierter Magazin-Kopf
       ============================================================ */
    .v12-section { padding-block: clamp(3rem, 8vw, 6rem); position: relative; }

    .v12-sechead {
        display: grid;
        grid-template-columns: 1fr;
        gap: .5rem 1.5rem;
        margin-bottom: clamp(2rem, 4.5vw, 3.2rem);
        align-items: end;
        padding-bottom: clamp(1rem, 2vw, 1.4rem);
        border-bottom: var(--v12-edge) solid var(--v12-rule);
    }
    @media (min-width: 760px) {
        .v12-sechead { grid-template-columns: auto 1fr auto; }
    }
    .v12-secnum {
        font-size: clamp(2.6rem, 6.4vw, 4.8rem);
        font-weight: 800;
        line-height: .78;
        letter-spacing: -.04em;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--primary);
        font-variant-numeric: tabular-nums;
    }
    .v12-sechead h2 {
        font-size: clamp(1.55rem, 3.6vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -.025em;
        line-height: 1.04;
        margin: 0;
        max-width: 24ch;
    }
    .v12-sectag {
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--v12-soft);
        white-space: nowrap;
        align-self: center;
    }
    @media (min-width: 760px) { .v12-sectag { align-self: end; padding-bottom: .3rem; } }

    /* ============================================================
       BLOCK 01 — Plattformen / Entwicklung (Broken-Bento)
       Mutigere Spans + groessere Cover-Story-Kachel (Apple)
       ============================================================ */
    .v12-bento {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(.9rem, 2vw, 1.3rem);
    }
    @media (min-width: 760px) {
        .v12-bento {
            grid-template-columns: repeat(12, 1fr);
            grid-auto-rows: minmax(0, auto);
            gap: clamp(1rem, 1.6vw, 1.4rem);
        }
    }

    .v12-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: .85rem;
        text-decoration: none;
        color: var(--v12-ink);
        background: var(--v12-paper);
        border: var(--v12-edge) solid var(--v12-rule);
        border-radius: var(--radius);
        padding: clamp(1.3rem, 2.4vw, 1.9rem);
        overflow: hidden;
        isolation: isolate;
        transition: transform .35s var(--v12-ease), box-shadow .35s ease, border-color .35s ease;
    }
    .v12-tile::after {
        content: "";
        position: absolute;
        inset: auto -30% -45% auto;
        width: 62%;
        aspect-ratio: 1;
        background: radial-gradient(circle, var(--primary-glow), transparent 66%);
        opacity: 0;
        transition: opacity .4s ease;
        z-index: -1;
    }
    .v12-tile:hover {
        transform: translateY(-7px);
        box-shadow: var(--shadow-lg);
        border-color: var(--v12-ink);
    }
    .v12-tile:hover::after { opacity: 1; }

    /* geschichtete Anordnung (Desktop): 12-Spalten, versetzte Offsets */
    @media (min-width: 760px) {
        .v12-tile-windows { grid-column: 1 / span 7; grid-row: 1; }
        .v12-tile-apple   { grid-column: 8 / span 5; grid-row: 1 / span 2; }
        .v12-tile-android { grid-column: 1 / span 4; grid-row: 2; transform: translateY(1.6rem); }
        .v12-tile-web     { grid-column: 5 / span 3; grid-row: 2; transform: translateY(-.7rem); }
        .v12-tile-android:hover { transform: translateY(calc(1.6rem - 7px)); }
        .v12-tile-web:hover { transform: translateY(calc(-.7rem - 7px)); }
        /* die grosse Apple-Kachel als Cover-Story-Akzent */
        .v12-tile-apple {
            background:
                radial-gradient(72% 56% at 82% 6%, rgba(124,58,237,.18), transparent 60%),
                var(--bg-light);
            justify-content: space-between;
            z-index: 2;
        }
    }

    .v12-tile-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }
    .v12-tile-icon {
        width: 50px; height: 50px;
        flex: none;
        display: inline-grid;
        place-items: center;
        border-radius: 14px;
        font-size: 1.3rem;
        background: var(--primary-soft);
        color: var(--primary);
        transition: transform .35s ease, background .35s ease, color .35s ease;
    }
    .v12-tile-apple .v12-tile-icon,
    .v12-tile:hover .v12-tile-icon {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: #fff;
    }
    .v12-tile:hover .v12-tile-icon { transform: rotate(-6deg) scale(1.05); }
    /* grosse Plate-Index-Ziffer (Outline) in der Ecke */
    .v12-tile-no {
        font-size: clamp(2.4rem, 5.2vw, 3.6rem);
        font-weight: 800;
        line-height: .78;
        letter-spacing: -.04em;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--v12-rule);
        font-variant-numeric: tabular-nums;
        transition: -webkit-text-stroke-color .35s ease;
    }
    .v12-tile:hover .v12-tile-no { -webkit-text-stroke-color: var(--primary-light); }

    .v12-tile-kick {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--v12-soft);
    }
    .v12-tile h3 {
        font-size: clamp(1.3rem, 2.6vw, 1.85rem);
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1.08;
        margin: 0;
        transition: color .3s ease;
    }
    .v12-tile-apple h3 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
    .v12-tile:hover h3 { color: var(--primary); }
    .v12-tile p {
        margin: 0;
        color: var(--v12-soft);
        line-height: 1.62;
        font-size: clamp(.95rem, 1.3vw, 1.02rem);
    }
    .v12-tile-foot {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 800;
        font-size: .82rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--v12-ink);
        padding-top: .5rem;
    }
    .v12-tile-foot i { transition: transform .3s ease; }
    .v12-tile:hover .v12-tile-foot { color: var(--primary); }
    .v12-tile:hover .v12-tile-foot i { transform: translateX(4px); }

    .v12-chips {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .v12-chips li {
        font-size: .72rem;
        font-weight: 700;
        color: var(--v12-soft);
        background: var(--v12-paper-2);
        border: 1px solid var(--v12-rule);
        border-radius: 8px;
        padding: .28rem .6rem;
    }
    .v12-tile-apple .v12-chips li { background: rgba(255,255,255,.72); }

    /* ============================================================
       BLOCK 02 — Webtools (gross, dunkel) + News (versetzt darueber)
       ============================================================ */
    .v12-duo {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1rem, 2vw, 1.4rem);
    }
    @media (min-width: 900px) {
        .v12-duo { grid-template-columns: 1.55fr 1fr; align-items: stretch; }
    }

    .v12-tools {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius);
        background: var(--bg-dark);
        color: var(--text-light);
        border: var(--v12-edge) solid var(--v12-ink);
        padding: clamp(1.6rem, 3.4vw, 2.6rem);
        text-decoration: none;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        isolation: isolate;
        z-index: 1;
        transition: transform .35s var(--v12-ease), box-shadow .35s ease;
    }
    .v12-tools::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(60% 80% at 90% 4%, rgba(124,58,237,.34), transparent 58%),
            radial-gradient(54% 74% at 2% 100%, rgba(37,99,235,.42), transparent 58%);
    }
    .v12-tools::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
            linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
        background-size: 42px 42px;
        -webkit-mask-image: radial-gradient(80% 80% at 30% 20%, #000, transparent 75%);
                mask-image: radial-gradient(80% 80% at 30% 20%, #000, transparent 75%);
    }
    .v12-tools:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .v12-tools-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        align-self: flex-start;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--primary-light);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 999px;
        padding: .4rem .85rem;
    }
    .v12-tools .v12-bignum {
        font-size: clamp(3.4rem, 9vw, 6rem);
        font-weight: 800;
        line-height: .85;
        letter-spacing: -.04em;
        margin: .2rem 0 0;
        background: linear-gradient(100deg, #fff, var(--primary-light) 70%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .v12-tools h3 {
        font-size: clamp(1.5rem, 3vw, 2.1rem);
        font-weight: 800;
        letter-spacing: -.02em;
        margin: 0;
        color: #fff;
    }
    .v12-tools p {
        margin: 0;
        color: var(--text-light);
        opacity: .9;
        line-height: 1.66;
        max-width: 46ch;
        font-size: clamp(.96rem, 1.4vw, 1.05rem);
    }
    .v12-tools-grid {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: .3rem;
    }
    .v12-tools-grid span {
        font-size: .76rem;
        font-weight: 700;
        color: var(--text-light);
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 8px;
        padding: .32rem .65rem;
    }
    .v12-tools-foot {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        font-weight: 800;
        font-size: .85rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #fff;
        padding-top: .8rem;
    }
    .v12-tools-foot i { transition: transform .3s ease; }
    .v12-tools:hover .v12-tools-foot i { transform: translateX(5px); }

    /* News-Karte, deutlich versetzt nach oben (mutigere Overlap-Geste) */
    .v12-news {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        text-decoration: none;
        color: var(--v12-ink);
        border: var(--v12-edge) solid var(--v12-ink);
        border-radius: var(--radius);
        background: var(--v12-paper);
        padding: clamp(1.5rem, 3vw, 2.2rem);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        z-index: 3;
        transition: transform .35s var(--v12-ease), box-shadow .35s ease, border-color .35s ease;
    }
    @media (min-width: 900px) { .v12-news { margin-top: clamp(-3rem, -2.8vw, -1.2rem); } }
    .v12-news:hover { transform: translateY(-6px); border-color: var(--primary); }
    .v12-news-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        align-self: flex-start;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--primary);
    }
    .v12-news h3 {
        font-size: clamp(1.4rem, 2.8vw, 1.95rem);
        font-weight: 800;
        letter-spacing: -.02em;
        margin: 0;
        line-height: 1.08;
        transition: color .3s ease;
    }
    .v12-news:hover h3 { color: var(--primary); }
    .v12-news p {
        margin: 0;
        color: var(--v12-soft);
        line-height: 1.64;
        font-size: clamp(.95rem, 1.3vw, 1.02rem);
    }
    .v12-news-list { list-style: none; margin: .2rem 0 0; padding: 0; }
    .v12-news-list li {
        display: flex;
        align-items: center;
        gap: .65rem;
        padding: .65rem 0;
        border-top: 1px solid var(--v12-rule);
        font-size: .92rem;
        font-weight: 600;
        color: var(--v12-soft);
    }
    .v12-news-list li i { color: var(--primary); font-size: .8rem; }
    .v12-news-foot {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 800;
        font-size: .82rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--v12-ink);
        padding-top: .6rem;
    }
    .v12-news-foot i { transition: transform .3s ease; }
    .v12-news:hover .v12-news-foot { color: var(--primary); }
    .v12-news:hover .v12-news-foot i { transform: translateX(4px); }

    /* ============================================================
       BLOCK 03 — Produkte & Services: versetzte "Akten"-Reihen
       ============================================================ */
    .v12-files {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(.9rem, 1.8vw, 1.2rem);
    }
    @media (min-width: 820px) {
        .v12-files { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 1.8vw, 1.4rem); }
        .v12-files > :nth-child(2) { transform: translateY(2rem); }
        .v12-files > :nth-child(3) { transform: translateY(-.7rem); }
        .v12-files > :nth-child(4) { transform: translateY(1.3rem); }
        .v12-files > :nth-child(2):hover { transform: translateY(calc(2rem - 6px)); }
        .v12-files > :nth-child(3):hover { transform: translateY(calc(-.7rem - 6px)); }
        .v12-files > :nth-child(4):hover { transform: translateY(calc(1.3rem - 6px)); }
    }

    .v12-file {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1rem 1.2rem;
        align-items: start;
        text-decoration: none;
        color: var(--v12-ink);
        background: var(--v12-paper);
        border: var(--v12-edge) solid var(--v12-rule);
        border-radius: var(--radius);
        padding: clamp(1.3rem, 2.6vw, 1.9rem);
        overflow: hidden;
        transition: transform .35s var(--v12-ease), box-shadow .35s ease, border-color .35s ease;
    }
    .v12-file::before {
        content: "";
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 5px;
        background: linear-gradient(180deg, var(--primary), var(--accent));
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .4s var(--v12-ease);
    }
    .v12-file:hover { box-shadow: var(--shadow-lg); border-color: var(--v12-ink); }
    .v12-file:hover::before { transform: scaleY(1); }
    .v12-file-icon {
        grid-row: span 2;
        width: 54px; height: 54px;
        display: inline-grid;
        place-items: center;
        border-radius: 14px;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: 1.3rem;
        transition: transform .35s ease, background .35s ease, color .35s ease;
    }
    .v12-file:hover .v12-file-icon {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: #fff;
        transform: rotate(-6deg) scale(1.05);
    }
    .v12-file-kick {
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--v12-soft);
        display: block;
        margin-bottom: .3rem;
    }
    .v12-file h3 {
        font-size: clamp(1.2rem, 2.3vw, 1.55rem);
        font-weight: 800;
        letter-spacing: -.02em;
        margin: 0;
        line-height: 1.1;
        transition: color .3s ease;
    }
    .v12-file:hover h3 { color: var(--primary); }
    .v12-file-body { grid-column: 2; }
    .v12-file-body p {
        margin: 0;
        color: var(--v12-soft);
        line-height: 1.62;
        font-size: clamp(.94rem, 1.3vw, 1.01rem);
    }
    .v12-file-arrow {
        grid-column: 2;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 800;
        font-size: .8rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--v12-ink);
        margin-top: .2rem;
    }
    .v12-file-arrow i { transition: transform .3s ease; }
    .v12-file:hover .v12-file-arrow { color: var(--primary); }
    .v12-file:hover .v12-file-arrow i { transform: translateX(4px); }

    /* ============================================================
       INDEX — dunkler "Inhaltsverzeichnis"-Block (Sekundaer-Nav)
       mit diagonalem Tab + grosser Geister-Ziffer
       ============================================================ */
    .v12-deck {
        position: relative;
        border-radius: var(--radius);
        background: var(--bg-dark);
        color: var(--text-light);
        border: var(--v12-edge) solid var(--v12-ink);
        padding: clamp(1.8rem, 4vw, 3.2rem);
        overflow: hidden;
        isolation: isolate;
    }
    .v12-deck::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(55% 70% at 92% 0%, rgba(124,58,237,.26), transparent 58%),
            radial-gradient(48% 64% at 4% 100%, rgba(37,99,235,.3), transparent 58%);
    }
    /* riesige Geister-Ziffernfolge im dunklen Block */
    .v12-deck::after {
        content: "01—10";
        position: absolute;
        right: clamp(-1rem, -1vw, 0rem);
        bottom: clamp(-1.5rem, -3vw, -3rem);
        font-size: clamp(4rem, 14vw, 12rem);
        font-weight: 800;
        letter-spacing: -.04em;
        line-height: .8;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(255,255,255,.08);
        pointer-events: none;
        z-index: -1;
        font-variant-numeric: tabular-nums;
    }
    .v12-deck-head {
        display: grid;
        gap: .5rem;
        margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
        max-width: 60ch;
    }
    .v12-deck-kick {
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: var(--primary-light);
    }
    .v12-deck-head h2 {
        font-size: clamp(1.6rem, 3.8vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -.025em;
        margin: 0;
        color: #fff;
        line-height: 1.05;
    }
    .v12-deck-head p {
        margin: 0;
        color: var(--text-light);
        opacity: .85;
        line-height: 1.6;
    }
    .v12-deck-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
    }
    @media (min-width: 680px) {
        .v12-deck-list { grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.6rem, 4vw, 3.4rem); }
    }
    .v12-deck-link {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: .95rem 0;
        border-top: 1px solid rgba(255,255,255,.12);
        text-decoration: none;
        color: var(--text-light);
        transition: padding-left .25s ease, color .25s ease;
    }
    .v12-deck-link:hover { color: #fff; padding-left: .45rem; }
    .v12-deck-num {
        font-size: .78rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--primary-light);
        min-width: 2.4ch;
    }
    .v12-deck-label { flex: 1; }
    .v12-deck-label b { display: block; font-weight: 800; font-size: 1.02rem; color: #fff; }
    .v12-deck-label small {
        display: block;
        font-weight: 500;
        font-size: .82rem;
        color: var(--text-light);
        opacity: .7;
        margin-top: .1rem;
    }
    .v12-deck-arrow { opacity: .5; transition: transform .25s ease, opacity .25s ease; }
    .v12-deck-link:hover .v12-deck-arrow { opacity: 1; transform: translateX(4px); }

    /* ============================================================
       CTA — ueberlappende Schluss-Panels ("Rueckseite")
       ============================================================ */
    .v12-cta {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1.2rem, 2.5vw, 1.6rem);
    }
    @media (min-width: 900px) {
        .v12-cta { grid-template-columns: 1.45fr 1fr; align-items: stretch; }
    }
    .v12-cta-main {
        position: relative;
        border: var(--v12-edge) solid var(--v12-ink);
        border-radius: var(--radius);
        background: var(--v12-paper);
        padding: clamp(1.8rem, 4vw, 3rem);
        overflow: hidden;
        z-index: 1;
    }
    .v12-cta-main::after {
        content: "";
        position: absolute;
        inset: auto -20% -55% auto;
        width: 50%;
        aspect-ratio: 1;
        background: radial-gradient(circle, var(--primary-glow), transparent 65%);
        pointer-events: none;
    }
    .v12-cta-main h2 {
        font-size: clamp(2rem, 6vw, 3.8rem);
        font-weight: 800;
        letter-spacing: -.03em;
        line-height: 1;
        margin: 0 0 1rem;
        text-wrap: balance;
    }
    .v12-cta-main p {
        color: var(--v12-soft);
        font-size: clamp(1rem, 1.5vw, 1.14rem);
        line-height: 1.68;
        max-width: 50ch;
        margin: 0 0 1.6rem;
    }
    .v12-cta-aside {
        position: relative;
        border: var(--v12-edge) solid var(--v12-rule);
        border-radius: var(--radius);
        background: var(--v12-paper-2);
        padding: clamp(1.5rem, 3vw, 2rem);
        display: grid;
        gap: .9rem;
        align-content: start;
        z-index: 2;
    }
    @media (min-width: 900px) { .v12-cta-aside { margin-top: clamp(1.6rem, 2.5vw, 2.4rem); margin-left: clamp(-2.2rem, -2.2vw, 0rem); } }
    .v12-cta-aside h3 {
        margin: 0;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--v12-soft);
    }
    .v12-cta-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
    .v12-cta-aside li a {
        display: inline-flex;
        align-items: center;
        gap: .7rem;
        text-decoration: none;
        color: var(--v12-ink);
        font-weight: 600;
        font-size: .96rem;
        transition: gap .25s ease, color .25s ease;
    }
    .v12-cta-aside li a:hover { color: var(--primary); gap: .95rem; }
    .v12-cta-aside li a i { width: 1.2rem; text-align: center; color: var(--primary); }

    /* ---------- gemeinsamer Fokus-Stil ---------- */
    .v12-home a:focus-visible,
    .v12-home button:focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
        border-radius: 12px;
    }

    /* ============================================================
       RESPONSIVE — Broken-Grid sauber in EINE Spalte aufloesen
       ============================================================ */
    @media (max-width: 759px) {
        .v12-tile,
        .v12-file,
        .v12-files > *,
        .v12-news { transform: none !important; }
        .v12-ghost { font-size: clamp(7rem, 44vw, 12rem); }
    }

    /* ============================================================
       REDUCED MOTION
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
        .v12-home .v12-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
        .v12-band-track { animation: none !important; transform: none !important; }
        .v12-mast-live i { animation: none !important; }
        .v12-home *,
        .v12-home *::before,
        .v12-home *::after {
            animation-duration: .001ms !important;
            transition-duration: .001ms !important;
        }
    }
</style>

    {{-- ============================================================
         MASTHEAD — Magazin-Kopf (Ausgabe-Zeile + Doppelregel)
         ============================================================ --}}
    <header class="v12-masthead" aria-label="Einleitung">
        <div class="v12-wrap">
            <div class="v12-mast-rule v12-rev">
                <span class="v12-mast-brand">
                    <img src="{{ asset('img/logo-mark.png') }}" alt="" aria-hidden="true">
                    KOTSCH.TECH
                </span>
                <span class="v12-mast-live"><i class="fa-solid fa-circle" aria-hidden="true"></i> Verfügbar für neue Projekte</span>
                <span class="v12-mast-dot" aria-hidden="true"></span>
                <span class="v12-mast-issue">Ausgabe {{ date('Y') }}</span>
                <span class="v12-mast-dot" aria-hidden="true"></span>
                <span>Persönliche Tech-Marke von Arthur Kotsch</span>
            </div>
        </div>
    </header>

    {{-- ============================================================
         HERO — die "Titelseite": geschichtetes Plakat
         ============================================================ --}}
    <section class="v12-hero" aria-label="Übersicht">
        <div class="v12-ghost" aria-hidden="true">KOTSCH</div>
        <div class="v12-ghost-2" aria-hidden="true">.TECH</div>
        <div class="v12-wrap">
            <div class="v12-hero-grid">
                <div class="v12-rev">
                    <span class="v12-kicker">Software · Apps · Web</span>
                    <h1 class="v12-h1">
                        <span class="v12-line">Software,</span>
                        <span class="v12-line">Apps &amp; <span class="v12-tape">Web</span>,</span>
                        <span class="v12-line v12-grad">aus einer Hand.</span>
                        <span class="v12-lead">
                            <strong>Eine Person, viele Disziplinen.</strong> Von der Idee über App,
                            Website und Tool bis hin zu Hosting und IT-Hilfe — alles unter einem Dach.
                        </span>
                    </h1>
                    <div class="v12-hero-actions">
                        <a class="v12-btn v12-btn-primary" href="{{ route('kontakt') }}">
                            Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                        <a class="v12-btn v12-btn-ghost" href="#v12-index">
                            Alle Bereiche <i class="fa-solid fa-arrow-down" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <aside class="v12-cover-card v12-rev v12-d2" aria-label="Inhalt dieser Ausgabe">
                    <span class="v12-cover-tab" aria-hidden="true">Alles aus einer Hand</span>
                    <h2>Inhalt dieser Ausgabe</h2>
                    <ul>
                        <li><i class="fa-solid fa-code" aria-hidden="true"></i> <b>Entwicklung</b> <span>Apps &amp; Software</span></li>
                        <li><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i> <b>Gestaltung</b> <span>Webdesign</span></li>
                        <li><i class="fa-solid fa-toolbox" aria-hidden="true"></i> <b>Werkzeuge</b> <span>420+ Tools</span></li>
                        <li><i class="fa-solid fa-server" aria-hidden="true"></i> <b>Betrieb</b> <span>Hosting &amp; IT</span></li>
                    </ul>
                </aside>
            </div>
        </div>

        {{-- Marquee-Band, ueberlappt den Hero leicht --}}
        <div class="v12-band v12-rev v12-d2" aria-label="Kennzahlen">
            <div class="v12-band-track" aria-hidden="true">
                @php
                    $v12bandItems = [
                        ['9', 'Bereiche'],
                        ['420+', 'Webtools gratis'],
                        ['3', 'Plattformen'],
                        ['1:1', 'Direkter Kontakt'],
                        ['100%', 'Aus einer Hand'],
                        ['iOS · macOS · Android', 'Native Apps'],
                    ];
                @endphp
                @for ($i = 0; $i < 2; $i++)
                    @foreach ($v12bandItems as $bi)
                        <span class="v12-band-item"><b>{{ $bi[0] }}</b> <span>{{ $bi[1] }}</span></span>
                        <span class="v12-band-dot"></span>
                    @endforeach
                @endfor
            </div>
        </div>
    </section>

    {{-- ============================================================
         BLOCK 01 — Plattformen / Entwicklung (Broken-Bento)
         ============================================================ --}}
    <section class="v12-section" aria-label="Software und Apps">
        <div class="v12-wrap">
            <div class="v12-sechead v12-rev">
                <span class="v12-secnum" aria-hidden="true">01</span>
                <h2>Software, die auf jedem Gerät zu Hause ist</h2>
                <span class="v12-sectag">Entwicklung</span>
            </div>

            <div class="v12-bento">
                {{-- Windows --}}
                <a class="v12-tile v12-tile-windows v12-rev" href="{{ route('windows.index') }}" aria-label="Windows-Software ansehen">
                    <div class="v12-tile-top">
                        <span class="v12-tile-icon"><i class="fa-brands fa-windows" aria-hidden="true"></i></span>
                        <span class="v12-tile-no" aria-hidden="true">01</span>
                    </div>
                    <span class="v12-tile-kick">Desktop &middot; Windows</span>
                    <h3>Windows-Software</h3>
                    <p>Schlanke, schnelle Programme für den Windows-Alltag — Werkzeuge, die genau ein Problem sauber lösen, statt mit Funktionen zu überladen.</p>
                    <ul class="v12-chips" aria-hidden="true">
                        <li>Produktivität</li>
                        <li>Utilities</li>
                        <li>Performance</li>
                    </ul>
                    <span class="v12-tile-foot">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- iOS & Mac (grosse Cover-Story-Kachel) --}}
                <a class="v12-tile v12-tile-apple v12-rev v12-d2" href="{{ route('apple.index') }}" aria-label="iOS und Mac Apps ansehen">
                    <div>
                        <div class="v12-tile-top">
                            <span class="v12-tile-icon"><i class="fa-brands fa-apple" aria-hidden="true"></i></span>
                            <span class="v12-tile-no" aria-hidden="true">02</span>
                        </div>
                        <span class="v12-tile-kick" style="margin-top:.85rem;display:block;">Native &middot; Apple</span>
                        <h3>iOS &amp; Mac Apps</h3>
                        <p>Native Apps für iPhone, iPad und Mac, die sich anfühlen, als gehörten sie ins System — aufgeräumt, schnell, mit Liebe zum Detail.</p>
                        <ul class="v12-chips" aria-hidden="true" style="margin-top:.9rem;">
                            <li>iOS</li>
                            <li>macOS</li>
                            <li>App Store</li>
                        </ul>
                    </div>
                    <span class="v12-tile-foot">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Android --}}
                <a class="v12-tile v12-tile-android v12-rev" href="{{ route('android.index') }}" aria-label="Android Apps ansehen">
                    <div class="v12-tile-top">
                        <span class="v12-tile-icon"><i class="fa-brands fa-android" aria-hidden="true"></i></span>
                        <span class="v12-tile-no" aria-hidden="true">03</span>
                    </div>
                    <span class="v12-tile-kick">Mobil &middot; Android</span>
                    <h3>Android Apps</h3>
                    <p>Material-orientierte Apps mit klarer Struktur. Aktuell in Entwicklung — ein Blick lohnt sich, was als Nächstes erscheint.</p>
                    <span class="v12-tile-foot">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Webdesign --}}
                <a class="v12-tile v12-tile-web v12-rev v12-d2" href="{{ route('web.templates') }}" aria-label="Webdesign ansehen">
                    <div class="v12-tile-top">
                        <span class="v12-tile-icon"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i></span>
                        <span class="v12-tile-no" aria-hidden="true">04</span>
                    </div>
                    <span class="v12-tile-kick">Gestaltung &middot; Web</span>
                    <h3>Webdesign</h3>
                    <p>Websites und Vorlagen, die schnell laden, gut aussehen und konvertieren — modernes Design auf sauberem Code.</p>
                    <span class="v12-tile-foot">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ============================================================
         BLOCK 02 — Webtools + News (Split-Overlap)
         ============================================================ --}}
    <section class="v12-section" aria-label="Webtools und News">
        <div class="v12-wrap">
            <div class="v12-sechead v12-rev">
                <span class="v12-secnum" aria-hidden="true">02</span>
                <h2>Kostenlose Werkzeuge &amp; frische Gedanken</h2>
                <span class="v12-sectag">Werkzeuge &amp; Wissen</span>
            </div>

            <div class="v12-duo">
                {{-- Webtools (gross, dunkel) --}}
                <a class="v12-tools v12-rev" href="{{ route('webtools.show') }}" aria-label="Kostenlose Webtools öffnen">
                    <span class="v12-tools-badge"><i class="fa-solid fa-bolt" aria-hidden="true"></i> Gratis &middot; Im Browser</span>
                    <span class="v12-bignum" aria-hidden="true">420+</span>
                    <h3>Webtools</h3>
                    <p>Über 420 kleine Helfer, die direkt im Browser laufen — ohne Anmeldung, ohne Upload. Konvertieren, rechnen, formatieren und mehr.</p>
                    <div class="v12-tools-grid" aria-hidden="true">
                        <span>Konverter</span>
                        <span>Generatoren</span>
                        <span>Rechner</span>
                        <span>Text &amp; Code</span>
                        <span>Bild &amp; Farbe</span>
                    </div>
                    <span class="v12-tools-foot">Tools öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- News (deutlich versetzt) --}}
                <a class="v12-news v12-rev v12-d2" href="{{ route('news.index') }}" aria-label="News und Blog lesen">
                    <span class="v12-news-badge"><i class="fa-solid fa-newspaper" aria-hidden="true"></i> Lesen &middot; Magazin</span>
                    <h3>News &amp; Blog</h3>
                    <p>Artikel rund um Entwicklung, Tools und Technik — praxisnah erklärt, ohne Buzzword-Bingo.</p>
                    <ul class="v12-news-list">
                        <li><i class="fa-solid fa-angle-right" aria-hidden="true"></i> Tutorials &amp; Anleitungen</li>
                        <li><i class="fa-solid fa-angle-right" aria-hidden="true"></i> Updates zu Apps &amp; Tools</li>
                        <li><i class="fa-solid fa-angle-right" aria-hidden="true"></i> Hintergründe &amp; Technik</li>
                    </ul>
                    <span class="v12-news-foot">Artikel lesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ============================================================
         BLOCK 03 — Produkte & Services (versetzte Akten)
         ============================================================ --}}
    <section class="v12-section" aria-label="Shop, Hosting, IT-Hilfe und Dokumente">
        <div class="v12-wrap">
            <div class="v12-sechead v12-rev">
                <span class="v12-secnum" aria-hidden="true">03</span>
                <h2>Produkte &amp; Services, auf die Verlass ist</h2>
                <span class="v12-sectag">Shop &amp; Betrieb</span>
            </div>

            <div class="v12-files">
                {{-- Shop --}}
                <a class="v12-file v12-rev" href="{{ route('shop.index') }}" aria-label="Zum Shop">
                    <span class="v12-file-icon"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i></span>
                    <div>
                        <span class="v12-file-kick">Kaufen &middot; Digital</span>
                        <h3>Shop</h3>
                    </div>
                    <div class="v12-file-body">
                        <p>Digitale Produkte zum sofortigen Download — von praktischen Vorlagen bis zu fertigen Bausteinen. Bezahlen, herunterladen, loslegen.</p>
                    </div>
                    <span class="v12-file-arrow">Zum Shop <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Hosting --}}
                <a class="v12-file v12-rev v12-d2" href="{{ route('hosting.index') }}" aria-label="Hosting ansehen">
                    <span class="v12-file-icon"><i class="fa-solid fa-server" aria-hidden="true"></i></span>
                    <div>
                        <span class="v12-file-kick">Betrieb &middot; Hosting</span>
                        <h3>Hosting</h3>
                    </div>
                    <div class="v12-file-body">
                        <p>Kleines, ehrliches Hosting für Websites und Projekte — persönlich betreut statt anonymes Massengeschäft, mit echtem Ansprechpartner.</p>
                    </div>
                    <span class="v12-file-arrow">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- IT-Hilfe --}}
                <a class="v12-file v12-rev" href="{{ route('it-hilfe.index') }}" aria-label="IT-Hilfe ansehen">
                    <span class="v12-file-icon"><i class="fa-solid fa-life-ring" aria-hidden="true"></i></span>
                    <div>
                        <span class="v12-file-kick">Support &middot; IT</span>
                        <h3>IT-Hilfe</h3>
                    </div>
                    <div class="v12-file-body">
                        <p>Wenn etwas klemmt: schnelle, verständliche IT-Hilfe ohne Fachchinesisch — vom kniffligen PC-Problem bis zur Einrichtung neuer Geräte.</p>
                    </div>
                    <span class="v12-file-arrow">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- Dokumente --}}
                <a class="v12-file v12-rev v12-d2" href="{{ route('documents.index') }}" aria-label="Dokumente ansehen">
                    <span class="v12-file-icon"><i class="fa-solid fa-folder-open" aria-hidden="true"></i></span>
                    <div>
                        <span class="v12-file-kick">Ablage &middot; Ressourcen</span>
                        <h3>Dokumente</h3>
                    </div>
                    <div class="v12-file-body">
                        <p>Gesammelte Dokumente, Anleitungen und Ressourcen an einem Ort — übersichtlich zugänglich, wenn du etwas zum Nachschlagen brauchst.</p>
                    </div>
                    <span class="v12-file-arrow">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </section>

    {{-- ============================================================
         INDEX — dunkler "Inhaltsverzeichnis"-Block (Sekundaer-Nav)
         ============================================================ --}}
    <section class="v12-section" id="v12-index" aria-label="Alle Bereiche im Überblick">
        <div class="v12-wrap">
            <div class="v12-deck v12-rev">
                <div class="v12-deck-head">
                    <span class="v12-deck-kick">Inhaltsverzeichnis</span>
                    <h2>Jeder Bereich, ein Klick entfernt</h2>
                    <p>Die komplette Welt von KOTSCH.TECH — kompakt verlinkt. Such dir aus, wo du einsteigen möchtest.</p>
                </div>

                <div role="navigation" aria-label="Bereichsübersicht KOTSCH.TECH">
                    <ul class="v12-deck-list">
                        <li>
                            <a class="v12-deck-link" href="{{ route('windows.index') }}">
                                <span class="v12-deck-num">01</span>
                                <span class="v12-deck-label"><b>Windows-Software</b><small>Schlanke Programme für den Desktop</small></span>
                                <i class="fa-solid fa-arrow-right v12-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v12-deck-link" href="{{ route('apple.index') }}">
                                <span class="v12-deck-num">02</span>
                                <span class="v12-deck-label"><b>iOS &amp; Mac Apps</b><small>Native Apps für Apple-Geräte</small></span>
                                <i class="fa-solid fa-arrow-right v12-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v12-deck-link" href="{{ route('android.index') }}">
                                <span class="v12-deck-num">03</span>
                                <span class="v12-deck-label"><b>Android Apps</b><small>Mobile Apps in Entwicklung</small></span>
                                <i class="fa-solid fa-arrow-right v12-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v12-deck-link" href="{{ route('web.templates') }}">
                                <span class="v12-deck-num">04</span>
                                <span class="v12-deck-label"><b>Webdesign</b><small>Websites &amp; Vorlagen</small></span>
                                <i class="fa-solid fa-arrow-right v12-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v12-deck-link" href="{{ route('webtools.show') }}">
                                <span class="v12-deck-num">05</span>
                                <span class="v12-deck-label"><b>Webtools</b><small>420+ kostenlose Browser-Tools</small></span>
                                <i class="fa-solid fa-arrow-right v12-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v12-deck-link" href="{{ route('news.index') }}">
                                <span class="v12-deck-num">06</span>
                                <span class="v12-deck-label"><b>News &amp; Blog</b><small>Artikel rund um Technik</small></span>
                                <i class="fa-solid fa-arrow-right v12-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v12-deck-link" href="{{ route('shop.index') }}">
                                <span class="v12-deck-num">07</span>
                                <span class="v12-deck-label"><b>Shop</b><small>Digitale Produkte zum Download</small></span>
                                <i class="fa-solid fa-arrow-right v12-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v12-deck-link" href="{{ route('hosting.index') }}">
                                <span class="v12-deck-num">08</span>
                                <span class="v12-deck-label"><b>Hosting</b><small>Kleines, persönliches Hosting</small></span>
                                <i class="fa-solid fa-arrow-right v12-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v12-deck-link" href="{{ route('it-hilfe.index') }}">
                                <span class="v12-deck-num">09</span>
                                <span class="v12-deck-label"><b>IT-Hilfe</b><small>Schnelle Hilfe ohne Fachchinesisch</small></span>
                                <i class="fa-solid fa-arrow-right v12-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a class="v12-deck-link" href="{{ route('documents.index') }}">
                                <span class="v12-deck-num">10</span>
                                <span class="v12-deck-label"><b>Dokumente</b><small>Anleitungen &amp; Ressourcen</small></span>
                                <i class="fa-solid fa-arrow-right v12-deck-arrow" aria-hidden="true"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         CTA — ueberlappende Schluss-Panels
         ============================================================ --}}
    <section class="v12-section" aria-label="Kontakt aufnehmen">
        <div class="v12-wrap">
            <div class="v12-cta">
                <div class="v12-cta-main v12-rev">
                    <span class="v12-kicker">Der nächste Schritt</span>
                    <h2>Eine Idee im Kopf?<br><span class="v12-grad">Lass sie uns bauen.</span></h2>
                    <p>
                        Ob App, Website, Tool oder ein Problem, das gelöst werden will — schreib mir direkt.
                        Du sprichst mit der Person, die es am Ende auch umsetzt.
                    </p>
                    <a class="v12-btn v12-btn-primary" href="{{ route('kontakt') }}">
                        Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>

                <aside class="v12-cta-aside v12-rev v12-d2" aria-label="Schnellzugriff">
                    <h3>Direkt einsteigen</h3>
                    <ul>
                        <li><a href="{{ route('kontakt') }}"><i class="fa-solid fa-paper-plane" aria-hidden="true"></i> Kontakt aufnehmen</a></li>
                        <li><a href="{{ route('webtools.show') }}"><i class="fa-solid fa-toolbox" aria-hidden="true"></i> Webtools kostenlos nutzen</a></li>
                        <li><a href="{{ route('shop.index') }}"><i class="fa-solid fa-bag-shopping" aria-hidden="true"></i> Digitale Produkte im Shop</a></li>
                        <li><a href="{{ route('apple.index') }}"><i class="fa-brands fa-apple" aria-hidden="true"></i> Apps für iOS &amp; Mac</a></li>
                        <li><a href="{{ route('news.index') }}"><i class="fa-solid fa-newspaper" aria-hidden="true"></i> News &amp; Artikel lesen</a></li>
                    </ul>
                </aside>
            </div>
        </div>
    </section>
</div>

<script>
(function () {
    'use strict';
    var root = document.querySelector('.v12-home');
    if (!root) { return; }

    // JS aktiv -> Fallback-Klasse entfernen (Observer uebernimmt das Reveal)
    root.classList.remove('v12-no-js');

    var items = root.querySelectorAll('.v12-rev');
    if (!items.length) { return; }

    var reduce = false;
    try {
        reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    } catch (e) { reduce = false; }

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

    var io = new IntersectionObserver(function (entries, obs) {
        for (var j = 0; j < entries.length; j++) {
            if (entries[j].isIntersecting) {
                entries[j].target.classList.add('v12-in');
                obs.unobserve(entries[j].target);
            }
        }
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.1 });

    items.forEach(function (el) { io.observe(el); });
})();
</script>

{{-- No-JS Sicherung: alle Reveal-Elemente sofort sichtbar --}}
<noscript>
    <style>.v12-home .v12-rev { opacity: 1 !important; transform: none !important; }</style>
</noscript>
@endsection