@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Arthur Kotsch - Software, Apps & Web im Journal')
@section('meta_description', 'Das Tech-Journal von Arthur Kotsch: Softwareentwicklung, iOS-, macOS- & Android-Apps, Windows-Tools, Webdesign, 420+ Webtools, News, Shop, Hosting und IT-Hilfe.')
@section('og_title', 'KOTSCH.TECH - Das Tech-Journal von Arthur Kotsch')
@section('og_description', 'Wie eine Magazinausgabe: Softwareentwicklung, native Apps fuer iOS, macOS & Android, Webdesign, kostenlose Webtools, Shop, Hosting und ehrliche IT-Hilfe von Arthur Kotsch.')
@section('twitter_title', 'KOTSCH.TECH - Tech-Journal von Arthur Kotsch')
@section('twitter_description', 'Eine Marke, redaktionell gesetzt: Apps, Webdesign, 420+ Webtools, Shop, Hosting und IT-Hilfe. Sauber gebaut, persoenlich betreut, direkt verlinkt.')

@section('content')
<div class="v15-home v15-no-js">
<style>
    /* ============================================================
       KOTSCH.TECH - Variante 15: Editorial Broken-Grid (Journal)
       Magazin-/Presse-Anmutung: Masthead, Rubriken-Folios,
       mehrspaltiger Lauftext, Hairline-Rules, Pull-Quotes,
       gebrochene Spaltenraster. Text-forward statt Bento.
       ALLE Selektoren mit .v15- praefixiert (keine Kollision app.css)
       ============================================================ */

    .v15-home {
        --v15-ink: var(--text-main);
        --v15-soft: var(--text-muted);
        --v15-rule: var(--border);
        --v15-paper: var(--bg);
        --v15-paper-2: var(--bg-light);
        --v15-night: var(--bg-dark);
        --v15-ease: cubic-bezier(0.16, 0.84, 0.44, 1);
        --v15-gutter: clamp(1.15rem, 4.5vw, 4rem);
        --v15-hair: 1px solid var(--v15-rule);
        --v15-hair-ink: 2px solid var(--v15-ink);
        color: var(--v15-ink);
        background: var(--v15-paper);
        position: relative;
        overflow-x: clip;
        isolation: isolate;
        font-feature-settings: "ss01" on, "kern" on;
        font-synthesis: none;
    }

    /* feines vertikales Spalten-Lineament + zwei sanfte Farb-Auren
       (rein dekorativ) als durchgehende Hintergrundebene */
    .v15-home::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
            linear-gradient(to right, rgba(15,23,42,.035) 1px, transparent 1px);
        background-size: clamp(80px, 16.6vw, 230px) 100%;
        background-position: center top;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
        opacity: .7;
    }
    .v15-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,.14), transparent 60%);
        opacity: .8;
    }
    .v15-home > * { position: relative; z-index: 1; }

    .v15-wrap {
        width: 100%;
        max-width: var(--container-width);
        margin-inline: auto;
        padding-inline: var(--v15-gutter);
    }

    /* Marken-Signatur-Verlauf */
    .v15-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) ---------- */
    .v15-rev {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity .85s var(--v15-ease), transform .85s var(--v15-ease);
        transition-delay: var(--v15-d, 0ms);
        will-change: opacity, transform;
    }
    .v15-rev.v15-in { opacity: 1; transform: none; }
    .v15-home.v15-no-js .v15-rev { opacity: 1; transform: none; }

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

    /* ============================================================
       MASTHEAD-LEISTE (Kopfzeile des Journals, KEIN <nav>)
       ============================================================ */
    .v15-masthead {
        padding-top: clamp(122px, 14vh, 168px);
    }
    .v15-flag {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem 1.1rem;
        padding-bottom: .85rem;
        border-bottom: var(--v15-hair-ink);
        font-size: clamp(.6rem, 1.05vw, .72rem);
        font-weight: 800;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--v15-soft);
    }
    .v15-flag .v15-flag-brand {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        color: var(--v15-ink);
    }
    .v15-flag .v15-flag-brand img { height: 19px; width: auto; display: block; }
    .v15-flag .v15-flag-spacer { flex: 1 1 auto; }
    .v15-flag .v15-flag-live {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        color: var(--v15-ink);
    }
    .v15-flag .v15-flag-live i {
        color: var(--success);
        font-size: .62em;
        animation: v15-pulse 2.4s ease-in-out infinite;
    }
    @keyframes v15-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
    .v15-flag .v15-flag-sep { color: var(--v15-rule); }

    /* ============================================================
       HERO — die Titelseite (editorial)
       ============================================================ */
    .v15-cover {
        position: relative;
        padding-top: clamp(1.6rem, 4vw, 2.8rem);
        padding-bottom: clamp(1.4rem, 4vw, 2.4rem);
    }
    .v15-cover-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1.6rem, 4vw, 2.6rem);
    }
    @media (min-width: 1000px) {
        .v15-cover-grid {
            grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
            column-gap: clamp(2rem, 4vw, 3.4rem);
            align-items: start;
        }
    }

    .v15-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        font-size: clamp(.66rem, 1.1vw, .74rem);
        font-weight: 800;
        letter-spacing: .26em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
    }
    .v15-eyebrow::before {
        content: "";
        width: 30px; height: 2px;
        background: linear-gradient(90deg, var(--primary), var(--accent));
        flex: none;
    }

    /* der grosse Aufmacher-Titel */
    .v15-headline {
        font-size: clamp(2.7rem, 9.4vw, 7rem);
        line-height: .9;
        letter-spacing: -.04em;
        font-weight: 800;
        margin: 0;
        text-wrap: balance;
    }
    .v15-headline .v15-line { display: block; }
    /* das diagonale Akzent-"Tape" hinter einem Wort */
    .v15-headline .v15-mark {
        position: relative;
        display: inline-block;
        z-index: 0;
        padding-inline: .1em;
    }
    .v15-headline .v15-mark::before {
        content: "";
        position: absolute;
        inset: 13% -.04em 15% -.04em;
        background: var(--primary-soft);
        transform: rotate(-2.4deg);
        z-index: -1;
        border-radius: 4px;
    }

    /* mehrspaltiger Lauftext mit Initial (Magazin-Anmutung) */
    .v15-standfirst {
        margin-top: clamp(1.4rem, 3vw, 2rem);
        padding-top: clamp(1.2rem, 2.6vw, 1.6rem);
        border-top: var(--v15-hair);
        color: var(--v15-soft);
        font-size: clamp(1rem, 1.35vw, 1.12rem);
        line-height: 1.66;
        text-wrap: pretty;
    }
    @media (min-width: 620px) {
        .v15-standfirst {
            columns: 2;
            column-gap: clamp(1.6rem, 3vw, 2.6rem);
        }
    }
    .v15-standfirst p { margin: 0 0 1rem; }
    .v15-standfirst p:last-child { margin-bottom: 0; }
    .v15-standfirst strong { color: var(--v15-ink); font-weight: 700; }
    .v15-standfirst .v15-dropcap::first-letter {
        float: left;
        font-size: 3.4em;
        line-height: .76;
        font-weight: 800;
        padding-right: .08em;
        margin-top: .04em;
        color: var(--primary);
    }

    .v15-cover-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .7rem .8rem;
        margin-top: clamp(1.5rem, 3.4vw, 2.2rem);
    }

    .v15-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;
        transition: transform .25s var(--v15-ease), box-shadow .25s var(--v15-ease),
                    background .25s var(--v15-ease), color .25s var(--v15-ease),
                    border-color .25s var(--v15-ease);
        border: 2px solid transparent;
    }
    .v15-btn i { font-size: .85em; transition: transform .25s var(--v15-ease); }
    .v15-btn:hover i { transform: translateX(3px); }
    .v15-btn-primary {
        background: var(--v15-ink);
        color: #fff;
        box-shadow: var(--shadow-soft);
    }
    .v15-btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: var(--primary); }
    .v15-btn-primary:hover i.fa-arrow-down { transform: translateY(3px); }
    .v15-btn-ghost {
        background: var(--v15-paper);
        color: var(--v15-ink);
        border-color: var(--v15-ink);
    }
    .v15-btn-ghost:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary); }

    /* die rechte Spalte: "Im Heft" — redaktionelles Inhaltsverzeichnis */
    .v15-toc {
        position: relative;
        border: var(--v15-hair-ink);
        border-radius: var(--radius);
        background: var(--v15-paper);
        padding: clamp(1.3rem, 2.6vw, 1.7rem);
        box-shadow: var(--shadow-lg);
    }
    .v15-toc-tab {
        position: absolute;
        top: 0; left: clamp(1.1rem, 3vw, 1.6rem);
        transform: translateY(-50%) rotate(-2.2deg);
        background: linear-gradient(120deg, var(--primary), var(--accent));
        color: #fff;
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        padding: .42rem .8rem;
        border-radius: 8px;
        box-shadow: 0 10px 22px -10px var(--primary-glow);
    }
    .v15-toc-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: .4rem;
    }
    .v15-toc-head h2 {
        font-size: 1.02rem;
        font-weight: 800;
        letter-spacing: -.01em;
        margin: 0;
    }
    .v15-toc-head span {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--v15-soft);
    }
    .v15-toc ol {
        list-style: none;
        margin: 0;
        padding: 0;
        counter-reset: v15toc;
    }
    .v15-toc li { counter-increment: v15toc; }
    .v15-toc a {
        display: flex;
        align-items: baseline;
        gap: .8rem;
        padding: .62rem 0;
        border-top: var(--v15-hair);
        text-decoration: none;
        color: var(--v15-ink);
        font-weight: 600;
        font-size: .95rem;
        transition: padding-left .25s var(--v15-ease), color .25s var(--v15-ease);
    }
    .v15-toc li:first-child a { border-top: 0; }
    .v15-toc a::before {
        content: counter(v15toc, decimal-leading-zero);
        font-size: .76rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--primary);
        min-width: 2.2ch;
        flex: none;
    }
    .v15-toc a .v15-toc-dotline {
        flex: 1;
        border-bottom: 1px dotted var(--v15-rule);
        transform: translateY(-.18em);
        min-width: .8rem;
    }
    .v15-toc a .v15-toc-pg {
        font-size: .8rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--v15-soft);
        flex: none;
    }
    .v15-toc a:hover { color: var(--primary); padding-left: .35rem; }
    .v15-toc a:hover .v15-toc-pg { color: var(--primary); }

    /* ---------- Kennzahlen-Laufband (Kolophon-Statzeile) ---------- */
    .v15-ticker {
        position: relative;
        z-index: 2;
        margin-top: clamp(1.4rem, 3.5vw, 2.4rem);
        border-block: var(--v15-hair-ink);
        background: var(--v15-ink);
        color: #fff;
        overflow: hidden;
    }
    .v15-ticker-track {
        display: flex;
        align-items: center;
        gap: clamp(1.4rem, 4vw, 2.8rem);
        width: max-content;
        padding-block: clamp(.78rem, 1.8vw, 1.05rem);
        animation: v15-marquee 40s linear infinite;
    }
    .v15-ticker:hover .v15-ticker-track { animation-play-state: paused; }
    @keyframes v15-marquee { to { transform: translateX(-50%); } }
    .v15-ticker-item {
        display: inline-flex;
        align-items: baseline;
        gap: .55rem;
        white-space: nowrap;
        font-weight: 700;
    }
    .v15-ticker-item b {
        font-size: clamp(1.05rem, 2vw, 1.45rem);
        font-weight: 800;
        letter-spacing: -.02em;
        font-variant-numeric: tabular-nums;
        background: linear-gradient(100deg, #fff, var(--primary-light));
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .v15-ticker-item span {
        font-size: .72rem;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--text-light);
        opacity: .82;
    }
    .v15-ticker-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary-light); flex: none; }

    /* ============================================================
       RUBRIK-GERUEST (Sektionskopf wie eine Magazin-Rubrik)
       ============================================================ */
    .v15-rubrik { padding-block: clamp(2.6rem, 7vw, 5rem); position: relative; }

    .v15-rubrik-head {
        display: grid;
        grid-template-columns: 1fr;
        gap: .5rem 1.4rem;
        align-items: end;
        margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
        padding-bottom: clamp(.9rem, 2vw, 1.2rem);
        border-bottom: var(--v15-hair-ink);
    }
    @media (min-width: 760px) {
        .v15-rubrik-head { grid-template-columns: auto 1fr auto; }
    }
    .v15-folio {
        font-size: clamp(2.6rem, 7vw, 5rem);
        font-weight: 800;
        line-height: .76;
        letter-spacing: -.05em;
        color: transparent;
        -webkit-text-stroke: 2px var(--primary);
        font-variant-numeric: tabular-nums;
        align-self: end;
    }
    .v15-rubrik-head h2 {
        font-size: clamp(1.55rem, 3.6vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -.025em;
        line-height: 1.02;
        margin: 0;
        max-width: 22ch;
    }
    .v15-rubrik-head .v15-rubrik-tag {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--v15-soft);
        white-space: nowrap;
        align-self: end;
        padding-bottom: .3rem;
    }

    /* ============================================================
       LEITARTIKEL — Plattformen (mehrspaltige "Akten"-Spalten,
       gebrochen versetzt, mit haengenden Folios)
       ============================================================ */
    .v15-feature {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1rem, 2.2vw, 1.5rem);
    }
    @media (min-width: 760px) {
        .v15-feature {
            grid-template-columns: repeat(2, 1fr);
            gap: clamp(1.1rem, 2vw, 1.6rem) clamp(1.6rem, 3vw, 2.6rem);
        }
        /* zickzack-Offset fuer die "broken" Anmutung */
        .v15-feature > :nth-child(2) { transform: translateY(2rem); }
        .v15-feature > :nth-child(3) { transform: translateY(-.8rem); }
        .v15-feature > :nth-child(4) { transform: translateY(1.4rem); }
    }

    .v15-art {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .2rem 1.1rem;
        text-decoration: none;
        color: var(--v15-ink);
        padding-top: clamp(1rem, 2.2vw, 1.4rem);
        border-top: var(--v15-hair-ink);
        isolation: isolate;
        transition: transform .35s var(--v15-ease);
    }
    .v15-art-folio {
        grid-row: span 4;
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 800;
        line-height: .8;
        letter-spacing: -.03em;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--v15-rule);
        font-variant-numeric: tabular-nums;
        transition: -webkit-text-stroke-color .35s var(--v15-ease);
        align-self: start;
        padding-top: .1rem;
    }
    .v15-art:hover .v15-art-folio { -webkit-text-stroke-color: var(--primary); }
    .v15-art-kick {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--v15-soft);
    }
    .v15-art-kick i {
        color: var(--primary);
        font-size: .95em;
        transition: transform .35s var(--v15-ease);
    }
    .v15-art:hover .v15-art-kick i { transform: rotate(-8deg) scale(1.08); }
    .v15-art h3 {
        font-size: clamp(1.3rem, 2.6vw, 1.85rem);
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1.06;
        margin: .35rem 0 .5rem;
        transition: color .3s var(--v15-ease);
    }
    .v15-art:hover h3 { color: var(--primary); }
    .v15-art p {
        margin: 0;
        color: var(--v15-soft);
        line-height: 1.62;
        font-size: clamp(.95rem, 1.3vw, 1.02rem);
        max-width: 42ch;
    }
    .v15-art-foot {
        margin-top: .8rem;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 800;
        font-size: .8rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--v15-ink);
    }
    .v15-art-foot i { transition: transform .3s var(--v15-ease); }
    .v15-art:hover .v15-art-foot { color: var(--primary); }
    .v15-art:hover .v15-art-foot i { transform: translateX(4px); }

    /* ============================================================
       DOPPELSEITE — Webtools (grosse dunkle Aufmacher-Spalte)
       + News (redaktionelle Spalte, versetzt nach oben)
       ============================================================ */
    .v15-spread {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1rem, 2vw, 1.5rem);
    }
    @media (min-width: 900px) {
        .v15-spread { grid-template-columns: 1.5fr 1fr; align-items: start; }
    }

    .v15-tools {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius);
        background: var(--v15-night);
        color: var(--text-light);
        border: var(--v15-hair-ink);
        padding: clamp(1.6rem, 3.4vw, 2.6rem);
        text-decoration: none;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        isolation: isolate;
        transition: transform .35s var(--v15-ease), box-shadow .35s var(--v15-ease);
    }
    .v15-tools::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(58% 78% at 92% 4%, rgba(124,58,237,.34), transparent 58%),
            radial-gradient(54% 74% at 2% 100%, rgba(37,99,235,.42), transparent 58%);
    }
    .v15-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 28% 16%, #000, transparent 75%);
                mask-image: radial-gradient(80% 80% at 28% 16%, #000, transparent 75%);
    }
    .v15-tools:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .v15-tools-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        align-self: flex-start;
        font-size: .66rem;
        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;
    }
    .v15-tools .v15-bignum {
        font-size: clamp(3.4rem, 9vw, 6rem);
        font-weight: 800;
        line-height: .85;
        letter-spacing: -.04em;
        margin: .2rem 0 0;
        font-variant-numeric: tabular-nums;
        background: linear-gradient(100deg, #fff, var(--primary-light) 70%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .v15-tools h3 {
        font-size: clamp(1.5rem, 3vw, 2.1rem);
        font-weight: 800;
        letter-spacing: -.02em;
        margin: 0;
        color: #fff;
    }
    .v15-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);
    }
    .v15-tools-tags {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: .3rem;
        list-style: none;
        padding: 0;
    }
    .v15-tools-tags li {
        font-size: .74rem;
        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;
    }
    .v15-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;
    }
    .v15-tools-foot i { transition: transform .3s var(--v15-ease); }
    .v15-tools:hover .v15-tools-foot i { transform: translateX(5px); }

    /* News-Spalte (Kolumne), Overlap-Geste nach oben */
    .v15-column {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: .9rem;
        text-decoration: none;
        color: var(--v15-ink);
        border: var(--v15-hair-ink);
        border-radius: var(--radius);
        background: var(--v15-paper);
        padding: clamp(1.5rem, 3vw, 2.2rem);
        overflow: hidden;
        transition: transform .35s var(--v15-ease), box-shadow .35s var(--v15-ease), border-color .35s var(--v15-ease);
    }
    @media (min-width: 900px) { .v15-column { margin-top: clamp(-2.2rem, -2.2vw, -1rem); } }
    .v15-column:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
    .v15-column-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        align-self: flex-start;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--primary);
    }
    .v15-column h3 {
        font-size: clamp(1.4rem, 2.8vw, 1.95rem);
        font-weight: 800;
        letter-spacing: -.02em;
        margin: 0;
        line-height: 1.06;
        transition: color .3s var(--v15-ease);
    }
    .v15-column:hover h3 { color: var(--primary); }
    .v15-column p {
        margin: 0;
        color: var(--v15-soft);
        line-height: 1.62;
        font-size: clamp(.95rem, 1.3vw, 1.02rem);
    }
    .v15-column-list {
        list-style: none;
        margin: .1rem 0 0;
        padding: 0;
    }
    .v15-column-list li {
        display: flex;
        align-items: baseline;
        gap: .6rem;
        padding: .6rem 0;
        border-top: var(--v15-hair);
        font-size: .92rem;
        font-weight: 600;
        color: var(--v15-soft);
    }
    .v15-column-list li i { color: var(--primary); font-size: .78rem; transform: translateY(-.05em); }
    .v15-column-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(--v15-ink);
        padding-top: .6rem;
    }
    .v15-column-foot i { transition: transform .3s var(--v15-ease); }
    .v15-column:hover .v15-column-foot { color: var(--primary); }
    .v15-column:hover .v15-column-foot i { transform: translateX(4px); }

    /* ============================================================
       PULL-QUOTE — redaktionelles Zitat als Trennakzent
       ============================================================ */
    .v15-pull {
        position: relative;
        margin-block: clamp(.4rem, 2vw, 1.4rem);
        padding: clamp(1.4rem, 3vw, 2.2rem) 0;
        border-block: var(--v15-hair);
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    @media (min-width: 820px) {
        .v15-pull { grid-template-columns: auto 1fr; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; }
    }
    .v15-pull-mark {
        font-size: clamp(3.5rem, 9vw, 6rem);
        font-weight: 800;
        line-height: .6;
        color: var(--primary-soft);
        font-family: Georgia, "Times New Roman", serif;
        align-self: start;
    }
    .v15-pull blockquote {
        margin: 0;
        font-size: clamp(1.25rem, 3vw, 2rem);
        font-weight: 700;
        line-height: 1.18;
        letter-spacing: -.02em;
        text-wrap: balance;
    }
    .v15-pull cite {
        display: block;
        margin-top: .9rem;
        font-style: normal;
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--v15-soft);
    }

    /* ============================================================
       SERVICE-NOTIZEN — Shop/Hosting/IT/Dokumente
       (kompakte Spalten-Eintraege, gebrochen versetzt)
       ============================================================ */
    .v15-notes {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1rem, 2vw, 1.4rem);
    }
    @media (min-width: 820px) {
        .v15-notes { grid-template-columns: repeat(2, 1fr); gap: clamp(1.1rem, 2vw, 1.6rem); }
        .v15-notes > :nth-child(2) { transform: translateY(1.6rem); }
        .v15-notes > :nth-child(3) { transform: translateY(-.6rem); }
        .v15-notes > :nth-child(4) { transform: translateY(1rem); }
    }

    .v15-note {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .9rem 1.1rem;
        align-items: start;
        text-decoration: none;
        color: var(--v15-ink);
        background: var(--v15-paper);
        border: var(--v15-hair);
        border-radius: var(--radius);
        padding: clamp(1.3rem, 2.6vw, 1.9rem);
        overflow: hidden;
        transition: transform .35s var(--v15-ease), box-shadow .35s var(--v15-ease), border-color .35s var(--v15-ease);
    }
    .v15-note::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(--v15-ease);
    }
    .v15-note:hover { box-shadow: var(--shadow-lg); border-color: var(--v15-ink); }
    .v15-note:hover::before { transform: scaleY(1); }
    .v15-note-icon {
        grid-row: span 2;
        width: 52px; height: 52px;
        display: inline-grid;
        place-items: center;
        border-radius: 14px;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: 1.25rem;
        transition: transform .35s var(--v15-ease), background .35s var(--v15-ease), color .35s var(--v15-ease);
    }
    .v15-note:hover .v15-note-icon {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: #fff;
        transform: rotate(-6deg) scale(1.05);
    }
    .v15-note-kick {
        font-size: .64rem;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--v15-soft);
        display: block;
        margin-bottom: .25rem;
    }
    .v15-note h3 {
        font-size: clamp(1.2rem, 2.3vw, 1.55rem);
        font-weight: 800;
        letter-spacing: -.02em;
        margin: 0;
        line-height: 1.08;
        transition: color .3s var(--v15-ease);
    }
    .v15-note:hover h3 { color: var(--primary); }
    .v15-note-body { grid-column: 2; }
    .v15-note-body p {
        margin: 0;
        color: var(--v15-soft);
        line-height: 1.6;
        font-size: clamp(.94rem, 1.3vw, 1.01rem);
    }
    .v15-note-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(--v15-ink);
        margin-top: .2rem;
    }
    .v15-note-arrow i { transition: transform .3s var(--v15-ease); }
    .v15-note:hover .v15-note-arrow { color: var(--primary); }
    .v15-note:hover .v15-note-arrow i { transform: translateX(4px); }

    /* ============================================================
       KOLOPHON / INDEX — dunkler Block, Impressum-Stil
       (komplette Bereichsuebersicht als Sekundaer-Navigation)
       ============================================================ */
    .v15-colophon {
        position: relative;
        border-radius: var(--radius);
        background: var(--v15-night);
        color: var(--text-light);
        border: var(--v15-hair-ink);
        padding: clamp(1.8rem, 4vw, 3.2rem);
        overflow: hidden;
        isolation: isolate;
    }
    .v15-colophon::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%);
    }
    .v15-colophon::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
            linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px);
        background-size: clamp(80px, 16vw, 200px) 100%;
        -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%);
                mask-image: linear-gradient(180deg, #000, transparent 90%);
    }
    .v15-colophon-head {
        display: grid;
        gap: .5rem;
        margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
        max-width: 60ch;
    }
    .v15-colophon-kick {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: var(--primary-light);
    }
    .v15-colophon-head h2 {
        font-size: clamp(1.6rem, 3.8vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -.025em;
        margin: 0;
        color: #fff;
        line-height: 1.04;
    }
    .v15-colophon-head p {
        margin: 0;
        color: var(--text-light);
        opacity: .85;
        line-height: 1.6;
    }
    .v15-colophon-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
    }
    @media (min-width: 680px) {
        .v15-colophon-list { grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.6rem, 4vw, 3.4rem); }
    }
    .v15-colophon-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 var(--v15-ease), color .25s var(--v15-ease);
    }
    .v15-colophon-link:hover { color: #fff; padding-left: .45rem; }
    .v15-colophon-num {
        font-size: .78rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--primary-light);
        min-width: 2.6ch;
    }
    .v15-colophon-label { flex: 1; min-width: 0; }
    .v15-colophon-label b {
        display: block;
        font-weight: 800;
        font-size: 1.02rem;
        color: #fff;
    }
    .v15-colophon-label small {
        display: block;
        font-weight: 500;
        font-size: .82rem;
        color: var(--text-light);
        opacity: .7;
        margin-top: .1rem;
    }
    .v15-colophon-link .v15-colophon-arrow {
        opacity: .5;
        transition: transform .25s var(--v15-ease), opacity .25s var(--v15-ease);
        flex: none;
    }
    .v15-colophon-link:hover .v15-colophon-arrow { opacity: 1; transform: translateX(4px); }

    /* ============================================================
       RUECKSEITE / CTA — Schluss-Editorial (Kontakt)
       ============================================================ */
    .v15-back {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1.2rem, 2.5vw, 1.6rem);
    }
    @media (min-width: 900px) {
        .v15-back { grid-template-columns: 1.45fr 1fr; align-items: stretch; }
    }
    .v15-back-main {
        position: relative;
        border: var(--v15-hair-ink);
        border-radius: var(--radius);
        background: var(--v15-paper);
        padding: clamp(1.8rem, 4vw, 3rem);
        overflow: hidden;
        z-index: 1;
    }
    .v15-back-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;
    }
    .v15-back-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;
    }
    .v15-back-main p {
        color: var(--v15-soft);
        font-size: clamp(1rem, 1.5vw, 1.14rem);
        line-height: 1.66;
        max-width: 50ch;
        margin: 0 0 1.6rem;
    }
    .v15-back-aside {
        position: relative;
        border: var(--v15-hair);
        border-radius: var(--radius);
        background: var(--v15-paper-2);
        padding: clamp(1.5rem, 3vw, 2rem);
        display: grid;
        gap: .85rem;
        align-content: start;
        z-index: 2;
    }
    @media (min-width: 900px) { .v15-back-aside { margin-top: clamp(1.6rem, 2.5vw, 2.4rem); margin-left: clamp(-2rem, -2vw, 0rem); } }
    .v15-back-aside h3 {
        margin: 0;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--v15-soft);
    }
    .v15-back-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
    .v15-back-aside li a {
        display: inline-flex;
        align-items: center;
        gap: .7rem;
        text-decoration: none;
        color: var(--v15-ink);
        font-weight: 600;
        font-size: .96rem;
        transition: gap .25s var(--v15-ease), color .25s var(--v15-ease);
    }
    .v15-back-aside li a:hover { color: var(--primary); gap: .95rem; }
    .v15-back-aside li a i { width: 1.2rem; text-align: center; color: var(--primary); flex: none; }

    .v15-signoff {
        margin-top: clamp(1.8rem, 4vw, 2.6rem);
        padding-top: clamp(1rem, 2vw, 1.4rem);
        border-top: var(--v15-hair);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .7rem 1rem;
        font-size: .76rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--v15-soft);
    }
    .v15-signoff img { height: 17px; width: auto; opacity: .85; }

    /* ============================================================
       RESPONSIVE — gebrochene Offsets in EINE Spalte aufloesen
       ============================================================ */
    @media (max-width: 759px) {
        .v15-feature > * { transform: none !important; }
    }
    @media (max-width: 819px) {
        .v15-notes > * { transform: none !important; }
    }

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

    {{-- ============================================================
         MASTHEAD + TITELSEITE (Hero)
         ============================================================ --}}
    <header class="v15-masthead" aria-label="Einleitung">
        <div class="v15-wrap">
            <div class="v15-flag v15-rev">
                <span class="v15-flag-brand">
                    <img src="{{ asset('img/logo-mark.png') }}" alt="" aria-hidden="true">
                    KOTSCH.TECH Journal
                </span>
                <span class="v15-flag-spacer" aria-hidden="true"></span>
                <span class="v15-flag-live"><i class="fa-solid fa-circle" aria-hidden="true"></i> Verfügbar für Projekte</span>
                <span class="v15-flag-sep" aria-hidden="true">&middot;</span>
                <span>Ausgabe No.&nbsp;{{ date('y') }} &middot; {{ date('Y') }}</span>
            </div>
        </div>

        <section class="v15-cover" aria-label="Aufmacher">
            <div class="v15-wrap">
                <div class="v15-cover-grid">

                    <div class="v15-cover-lead">
                        <span class="v15-eyebrow v15-rev">Arthur Kotsch &middot; Persönliche Tech-Marke</span>

                        <h1 class="v15-headline v15-rev" style="--v15-d:60ms;">
                            <span class="v15-line">Software,</span>
                            <span class="v15-line">Apps &amp; <span class="v15-mark">Web</span>,</span>
                            <span class="v15-line v15-grad">aus einer Feder.</span>
                        </h1>

                        <div class="v15-standfirst v15-rev" style="--v15-d:140ms;">
                            <p class="v15-dropcap">
                                <strong>KOTSCH.TECH</strong> ist die persönliche Tech-Marke von Arthur Kotsch —
                                eine Person, viele Disziplinen, redaktionell gebündelt an einem Ort. Von der
                                ersten Idee über die fertige App bis zum laufenden Betrieb.
                            </p>
                            <p>
                                Native Apps für iOS, macOS und Android, schlanke Windows-Software, modernes
                                Webdesign, über 420 kostenlose Webtools, ein digitaler Shop, kleines Hosting
                                und ehrliche IT-Hilfe. Sauber gebaut, persönlich betreut.
                            </p>
                        </div>

                        <div class="v15-cover-actions v15-rev" style="--v15-d:220ms;">
                            <a class="v15-btn v15-btn-primary" href="{{ route('kontakt') }}">
                                Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                            </a>
                            <a class="v15-btn v15-btn-ghost" href="#v15-colophon">
                                Im Heft blättern <i class="fa-solid fa-arrow-down" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>

                    {{-- "Im Heft" — redaktionelles Inhaltsverzeichnis als Sprung-Navigation --}}
                    <aside class="v15-toc v15-rev" style="--v15-d:160ms;" aria-label="Inhalt dieser Ausgabe">
                        <span class="v15-toc-tab" aria-hidden="true">Im Heft</span>
                        <div class="v15-toc-head">
                            <h2>Inhalt</h2>
                            <span>Rubriken</span>
                        </div>
                        <div role="navigation" aria-label="Schnellnavigation zu den Bereichen">
                            <ol>
                                <li><a href="{{ route('windows.index') }}"><span>Windows-Software</span><span class="v15-toc-dotline" aria-hidden="true"></span><span class="v15-toc-pg">01</span></a></li>
                                <li><a href="{{ route('apple.index') }}"><span>iOS &amp; Mac Apps</span><span class="v15-toc-dotline" aria-hidden="true"></span><span class="v15-toc-pg">02</span></a></li>
                                <li><a href="{{ route('android.index') }}"><span>Android Apps</span><span class="v15-toc-dotline" aria-hidden="true"></span><span class="v15-toc-pg">03</span></a></li>
                                <li><a href="{{ route('web.templates') }}"><span>Webdesign</span><span class="v15-toc-dotline" aria-hidden="true"></span><span class="v15-toc-pg">04</span></a></li>
                                <li><a href="{{ route('webtools.show') }}"><span>Webtools</span><span class="v15-toc-dotline" aria-hidden="true"></span><span class="v15-toc-pg">05</span></a></li>
                                <li><a href="{{ route('news.index') }}"><span>News &amp; Blog</span><span class="v15-toc-dotline" aria-hidden="true"></span><span class="v15-toc-pg">06</span></a></li>
                                <li><a href="{{ route('shop.index') }}"><span>Shop</span><span class="v15-toc-dotline" aria-hidden="true"></span><span class="v15-toc-pg">07</span></a></li>
                                <li><a href="{{ route('it-hilfe.index') }}"><span>IT-Hilfe &amp; Hosting</span><span class="v15-toc-dotline" aria-hidden="true"></span><span class="v15-toc-pg">08</span></a></li>
                            </ol>
                        </div>
                    </aside>
                </div>
            </div>

            {{-- Kennzahlen-Laufband (Kolophon-Statzeile) --}}
            <div class="v15-wrap v15-rev" style="--v15-d:200ms;">
                <div class="v15-ticker" aria-label="Kennzahlen">
                    <div class="v15-ticker-track" aria-hidden="true">
                        @php
                            $v15ticker = [
                                ['9', 'Bereiche'],
                                ['420+', 'Webtools gratis'],
                                ['3', 'App-Plattformen'],
                                ['1:1', 'Direkter Kontakt'],
                                ['100%', 'Aus einer Hand'],
                                ['iOS · macOS · Android', 'Native Apps'],
                            ];
                        @endphp
                        @for ($i = 0; $i < 2; $i++)
                            @foreach ($v15ticker as $ti)
                                <span class="v15-ticker-item"><b>{{ $ti[0] }}</b> <span>{{ $ti[1] }}</span></span>
                                <span class="v15-ticker-dot"></span>
                            @endforeach
                        @endfor
                    </div>
                </div>
            </div>
        </section>
    </header>

    {{-- ============================================================
         RUBRIK 01 — Leitartikel: Plattformen / Entwicklung
         ============================================================ --}}
    <section class="v15-rubrik" aria-label="Software und Apps">
        <div class="v15-wrap">
            <div class="v15-rubrik-head v15-rev">
                <span class="v15-folio" aria-hidden="true">01</span>
                <h2>Software, die auf jedem Gerät zu Hause ist</h2>
                <span class="v15-rubrik-tag">Leitartikel &middot; Entwicklung</span>
            </div>

            <div class="v15-feature">
                {{-- Windows --}}
                <a class="v15-art v15-rev" href="{{ route('windows.index') }}" aria-label="Windows-Software ansehen">
                    <span class="v15-art-folio" aria-hidden="true">01</span>
                    <div>
                        <span class="v15-art-kick"><i class="fa-brands fa-windows" aria-hidden="true"></i> 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>
                        <span class="v15-art-foot">Weiterlesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </div>
                </a>

                {{-- iOS & Mac --}}
                <a class="v15-art v15-rev" style="--v15-d:80ms;" href="{{ route('apple.index') }}" aria-label="iOS und Mac Apps ansehen">
                    <span class="v15-art-folio" aria-hidden="true">02</span>
                    <div>
                        <span class="v15-art-kick"><i class="fa-brands fa-apple" aria-hidden="true"></i> 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>
                        <span class="v15-art-foot">Weiterlesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </div>
                </a>

                {{-- Android --}}
                <a class="v15-art v15-rev" href="{{ route('android.index') }}" aria-label="Android Apps ansehen">
                    <span class="v15-art-folio" aria-hidden="true">03</span>
                    <div>
                        <span class="v15-art-kick"><i class="fa-brands fa-android" aria-hidden="true"></i> 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="v15-art-foot">Weiterlesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </div>
                </a>

                {{-- Webdesign --}}
                <a class="v15-art v15-rev" style="--v15-d:80ms;" href="{{ route('web.templates') }}" aria-label="Webdesign ansehen">
                    <span class="v15-art-folio" aria-hidden="true">04</span>
                    <div>
                        <span class="v15-art-kick"><i class="fa-solid fa-pen-ruler" aria-hidden="true"></i> Gestaltung &middot; Web</span>
                        <h3>Webdesign</h3>
                        <p>Websites und Vorlagen, die schnell laden, gut aussehen und konvertieren — modernes Design auf sauberem, wartbarem Code.</p>
                        <span class="v15-art-foot">Weiterlesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </div>
                </a>
            </div>
        </div>
    </section>

    {{-- ============================================================
         RUBRIK 02 — Doppelseite: Webtools + News
         ============================================================ --}}
    <section class="v15-rubrik" aria-label="Webtools und News">
        <div class="v15-wrap">
            <div class="v15-rubrik-head v15-rev">
                <span class="v15-folio" aria-hidden="true">02</span>
                <h2>Kostenlose Werkzeuge &amp; frische Gedanken</h2>
                <span class="v15-rubrik-tag">Werkzeuge &amp; Magazin</span>
            </div>

            <div class="v15-spread">
                {{-- Webtools (grosse, dunkle Aufmacher-Spalte) --}}
                <a class="v15-tools v15-rev" href="{{ route('webtools.show') }}" aria-label="Kostenlose Webtools öffnen">
                    <span class="v15-tools-badge"><i class="fa-solid fa-bolt" aria-hidden="true"></i> Gratis &middot; Im Browser</span>
                    <span class="v15-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 vieles mehr.</p>
                    <ul class="v15-tools-tags" aria-hidden="true">
                        <li>Konverter</li>
                        <li>Generatoren</li>
                        <li>Rechner</li>
                        <li>Text &amp; Code</li>
                        <li>Bild &amp; Farbe</li>
                    </ul>
                    <span class="v15-tools-foot">Tools öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

                {{-- News (Kolumne, versetzt) --}}
                <a class="v15-column v15-rev" style="--v15-d:80ms;" href="{{ route('news.index') }}" aria-label="News und Blog lesen">
                    <span class="v15-column-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="v15-column-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="v15-column-foot">Artikel lesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>
            </div>

            {{-- Pull-Quote als redaktioneller Trennakzent --}}
            <figure class="v15-pull v15-rev">
                <span class="v15-pull-mark" aria-hidden="true">&ldquo;</span>
                <div>
                    <blockquote>Du sprichst mit der Person, die es am Ende auch baut — keine Hotline, keine Weiterleitung.</blockquote>
                    <cite>Arthur Kotsch &middot; KOTSCH.TECH</cite>
                </div>
            </figure>
        </div>
    </section>

    {{-- ============================================================
         RUBRIK 03 — Service-Notizen: Shop / Hosting / IT / Dokumente
         ============================================================ --}}
    <section class="v15-rubrik" aria-label="Shop, Hosting, IT-Hilfe und Dokumente">
        <div class="v15-wrap">
            <div class="v15-rubrik-head v15-rev">
                <span class="v15-folio" aria-hidden="true">03</span>
                <h2>Produkte &amp; Services, auf die Verlass ist</h2>
                <span class="v15-rubrik-tag">Shop &amp; Betrieb</span>
            </div>

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

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

                {{-- IT-Hilfe --}}
                <a class="v15-note v15-rev" href="{{ route('it-hilfe.index') }}" aria-label="IT-Hilfe ansehen">
                    <span class="v15-note-icon"><i class="fa-solid fa-life-ring" aria-hidden="true"></i></span>
                    <div>
                        <span class="v15-note-kick">Support &middot; IT</span>
                        <h3>IT-Hilfe</h3>
                    </div>
                    <div class="v15-note-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="v15-note-arrow">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                </a>

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

    {{-- ============================================================
         KOLOPHON / INDEX — komplette Bereichsuebersicht (dunkel)
         ============================================================ --}}
    <section class="v15-rubrik" id="v15-colophon" aria-label="Alle Bereiche im Überblick">
        <div class="v15-wrap">
            <div class="v15-colophon v15-rev">
                <div class="v15-colophon-head">
                    <span class="v15-colophon-kick">Kolophon &middot; Alles auf einen Blick</span>
                    <h2>Jeder Bereich, ein Klick entfernt</h2>
                    <p>Die komplette Welt von KOTSCH.TECH — kompakt verlinkt wie ein Impressum. Such dir aus, wo du einsteigen möchtest.</p>
                </div>

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

    {{-- ============================================================
         RUECKSEITE / CTA — Schluss-Editorial (Kontakt)
         ============================================================ --}}
    <section class="v15-rubrik" aria-label="Kontakt aufnehmen">
        <div class="v15-wrap">
            <div class="v15-back">
                <div class="v15-back-main v15-rev">
                    <span class="v15-eyebrow">Der nächste Schritt</span>
                    <h2>Eine Idee im Kopf?<br><span class="v15-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="v15-btn v15-btn-primary" href="{{ route('kontakt') }}">
                        Projekt anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>

                    <div class="v15-signoff">
                        <img src="{{ asset('img/logo-wordmark-solid-cropped.png') }}" alt="KOTSCH.TECH">
                        <span>Persönliche Tech-Marke von Arthur Kotsch</span>
                    </div>
                </div>

                <aside class="v15-back-aside v15-rev" style="--v15-d:80ms;" 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('.v15-home');
    if (!root) { return; }

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

    var items = root.querySelectorAll('.v15-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('v15-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('v15-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>.v15-home .v15-rev { opacity: 1 !important; transform: none !important; }</style>
</noscript>
@endsection