@extends('layouts.app')

@section('content')
<style>
    /* ── Globale Chrome ausblenden ── */
    nav{display:none!important;} footer{display:none!important;} main{padding-top:0!important;}

    /* ════════ RISOGRAPH PRESS — Variante #9 ════════ */
    :root{
        --v9-paper:#F4EBD9;
        --v9-indigo:#2B3A8C;
        --v9-coral:#FF4B3E;
        --v9-over:#5A2E63;
        --v9-mustard:#E8B23A;
    }

    .v9-page{
        background:var(--v9-paper);
        color:var(--v9-indigo);
        font-family:"Space Grotesk","Archivo","Helvetica Neue",Arial,sans-serif;
        line-height:1.5;
        min-height:100vh;
        position:relative;
        overflow-x:hidden;
        /* Papierkante: Off-Cream-Rahmen + Indigo-Innenlinie (eingerahmter Druckbogen) */
        border:12px solid var(--v9-paper);
        box-shadow:inset 0 0 0 1px var(--v9-indigo);
        padding:clamp(1.2rem,4vw,3rem);
        box-sizing:border-box;
        -webkit-font-smoothing:antialiased;
    }

    /* Korn-/Papier-Textur (reines CSS via Inline-SVG feTurbulence) */
    .v9-page::before{
        content:"";
        position:fixed; inset:0; z-index:9999; pointer-events:none;
        opacity:.06; mix-blend-mode:multiply;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        animation:v9-andruck 1s steps(2) 1;
    }
    @keyframes v9-andruck{ 0%{opacity:.16;} 100%{opacity:.06;} }
    @media (prefers-reduced-motion:reduce){
        .v9-page::before{ animation:none; }
    }

    .v9-wrap{ max-width:1180px; margin:0 auto; position:relative; z-index:1; }

    /* ── Misregistration / Überdruck-Doubling ── */
    .v9-double{ position:relative; display:inline-block; }
    .v9-double::before{
        content:attr(data-text);
        position:absolute; left:0; top:0; z-index:-1;
        color:var(--v9-coral); mix-blend-mode:multiply;
        transform:translate(3px,3px);
        transition:transform .12s steps(2);
        pointer-events:none;
    }
    .v9-double:hover::before{ transform:translate(0,0); }

    /* ── 1. Kicker-Leiste (Impressumszeile) ── */
    .v9-kicker{
        display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between;
        font:600 .72rem/1.4 "Courier New",monospace;
        letter-spacing:.22em; text-transform:uppercase;
        border-top:2px solid var(--v9-indigo);
        border-bottom:2px solid var(--v9-indigo);
        padding:.55rem 0; margin-bottom:clamp(1.6rem,5vw,3rem);
    }
    .v9-kicker .v9-k-coral{ color:var(--v9-coral); }

    /* ── 2. Hero ── */
    .v9-hero{
        display:grid; grid-template-columns:1fr auto; gap:2rem;
        align-items:end; margin-bottom:clamp(2rem,6vw,4rem);
    }
    .v9-h1{
        font-weight:800; font-size:clamp(2.4rem,11vw,7rem); line-height:.9;
        letter-spacing:-.02em; text-transform:uppercase; margin:0;
        overflow-wrap:anywhere;
    }
    .v9-h1 .v9-double::before{ transform:translate(4px,4px); }
    .v9-subline{
        margin:1.2rem 0 0; max-width:34ch;
        font-size:clamp(1rem,2.2vw,1.25rem); font-weight:600; color:var(--v9-indigo);
    }
    .v9-hero-cta{
        display:inline-flex; align-items:center; gap:.5rem; margin-top:1.5rem;
        background:var(--v9-coral); color:var(--v9-paper);
        font-weight:800; text-transform:uppercase; letter-spacing:.04em;
        text-decoration:none; padding:.85rem 1.6rem; font-size:1rem;
        border:2px solid var(--v9-indigo); box-shadow:5px 5px 0 var(--v9-indigo);
        transition:transform .12s steps(2),box-shadow .12s steps(2);
    }
    .v9-hero-cta:hover{ transform:translate(5px,5px); box-shadow:0 0 0 var(--v9-indigo); }

    /* Stempel-Siegel */
    .v9-stamp{
        width:clamp(120px,16vw,168px); aspect-ratio:1; border-radius:50%;
        border:3px solid var(--v9-coral); color:var(--v9-coral);
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        text-align:center; transform:rotate(-8deg); flex:0 0 auto;
        font:700 .68rem/1.3 "Courier New",monospace; letter-spacing:.18em; text-transform:uppercase;
        position:relative;
    }
    .v9-stamp::after{
        content:""; position:absolute; inset:8px; border-radius:50%;
        border:1px dashed var(--v9-coral);
    }
    .v9-stamp b{ font-size:1.55rem; letter-spacing:0; display:block; margin:.2rem 0; }

    /* ── 3. Kennzahlen-Leiste ── */
    .v9-stats{
        display:grid; grid-template-columns:repeat(4,1fr); gap:0;
        border:2px solid var(--v9-indigo); margin-bottom:clamp(2.5rem,7vw,4.5rem);
        background-image:radial-gradient(var(--v9-mustard) 1px,transparent 1.5px);
        background-size:6px 6px; background-color:var(--v9-paper);
    }
    .v9-stat{
        padding:1.2rem 1rem; text-align:center;
        border-right:2px solid var(--v9-indigo);
        background:color-mix(in srgb,var(--v9-paper) 86%,transparent);
    }
    .v9-stat:last-child{ border-right:0; }
    .v9-stat-num{
        font:700 clamp(1.8rem,5vw,2.8rem)/1 "Courier New",monospace;
        color:var(--v9-coral); display:block;
    }
    .v9-stat-lbl{
        margin-top:.45rem; font-size:.7rem; font-weight:700;
        text-transform:uppercase; letter-spacing:.16em; color:var(--v9-indigo);
    }

    /* ── 4. Werkkatalog (9 Plates) ── */
    .v9-section-head{ margin-bottom:clamp(1.5rem,4vw,2.5rem); }
    .v9-eyebrow{
        font:700 .75rem/1 "Courier New",monospace; letter-spacing:.25em;
        text-transform:uppercase; color:var(--v9-coral); margin:0 0 .6rem;
    }
    .v9-h2{
        font-weight:800; font-size:clamp(1.9rem,5.5vw,3.4rem); line-height:.95;
        letter-spacing:-.02em; text-transform:uppercase; margin:0;
    }

    /* Asymmetrisches Zine-Grid */
    .v9-plates{
        display:grid; grid-template-columns:repeat(6,1fr);
        gap:clamp(1.2rem,2.5vw,1.8rem);
    }
    .v9-plate{
        grid-column:span 2;
        position:relative; display:flex; flex-direction:column;
        background:var(--v9-paper); color:var(--v9-indigo);
        border:2px solid var(--v9-indigo);
        box-shadow:6px 6px 0 var(--v9-coral);
        padding:1.4rem 1.4rem 1.2rem; text-decoration:none;
        transition:transform .12s steps(2),box-shadow .12s steps(2);
    }
    .v9-plate:hover,.v9-plate:focus-visible{
        transform:translate(6px,6px); box-shadow:0 0 0 var(--v9-coral);
        outline:none;
    }
    /* Editorial: erste Plate + die mittlere groß (3 Spalten) */
    .v9-plate.v9-big{ grid-column:span 3; }

    .v9-pnum{
        font:700 clamp(2.6rem,6vw,4rem)/1 "Courier New",monospace;
        color:var(--v9-coral);
        -webkit-text-stroke:2px var(--v9-coral); color:transparent;
        transition:color .12s steps(2);
        margin-bottom:.5rem;
    }
    .v9-plate:hover .v9-pnum,.v9-plate:focus-visible .v9-pnum{ color:var(--v9-coral); }

    .v9-plate-icon{ font-size:1.5rem; color:var(--v9-indigo); margin-bottom:.7rem; }
    .v9-plate-title{
        font-weight:800; font-size:clamp(1.2rem,2.4vw,1.6rem); line-height:1.05;
        letter-spacing:-.01em; text-transform:uppercase; margin:0 0 .55rem;
    }
    .v9-plate-desc{ font-size:.98rem; font-weight:500; margin:0 0 1.1rem; }
    .v9-plate-foot{ margin-top:auto; }
    .v9-plate-arrow{
        font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:.92rem;
        color:var(--v9-coral);
    }
    .v9-plate-url{
        display:block; margin-top:.3rem;
        font:600 .72rem/1.3 "Courier New",monospace; color:var(--v9-indigo);
        opacity:.7; word-break:break-all;
    }

    /* ── 5. Über-Block ── */
    .v9-about{
        margin:clamp(3rem,8vw,5rem) 0;
        border:2px solid var(--v9-indigo); padding:clamp(1.5rem,4vw,2.6rem);
        background-image:radial-gradient(var(--v9-indigo) 1px,transparent 1.5px);
        background-size:7px 7px;
    }
    .v9-about-inner{
        background:color-mix(in srgb,var(--v9-paper) 90%,transparent);
        padding:clamp(1rem,3vw,2rem);
    }
    .v9-about p{ font-size:clamp(1.05rem,2.2vw,1.35rem); font-weight:600; max-width:60ch; margin:0; }

    /* ── 6. Kontakt-Coupon ── */
    .v9-coupon{
        border:2px dashed var(--v9-indigo); padding:clamp(1.6rem,5vw,3rem);
        text-align:center; margin-bottom:clamp(2rem,5vw,3rem);
        position:relative;
    }
    .v9-coupon .v9-eyebrow{ color:var(--v9-coral); }
    .v9-coupon-title{
        font-weight:800; font-size:clamp(1.8rem,6vw,3.6rem); line-height:.95;
        letter-spacing:-.02em; text-transform:uppercase; margin:.4rem 0 1.4rem;
    }
    .v9-coupon-cta{
        display:inline-flex; align-items:center; gap:.6rem;
        background:var(--v9-indigo); color:var(--v9-paper);
        font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:1.05rem;
        text-decoration:none; padding:1rem 2.2rem; border:2px solid var(--v9-indigo);
        box-shadow:6px 6px 0 var(--v9-coral);
        transition:transform .12s steps(2),box-shadow .12s steps(2);
    }
    .v9-coupon-cta:hover{ transform:translate(6px,6px); box-shadow:0 0 0 var(--v9-coral); }

    /* ── Mini-Footer ── */
    .v9-foot{
        display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; justify-content:space-between;
        border-top:2px solid var(--v9-indigo); padding-top:1rem;
        font:600 .72rem/1.4 "Courier New",monospace;
        letter-spacing:.18em; text-transform:uppercase;
    }
    .v9-foot a{ color:var(--v9-coral); text-decoration:none; }
    .v9-foot a:hover{ text-decoration:underline; }

    /* ── Responsive ── */
    @media (max-width:860px){
        .v9-hero{ grid-template-columns:1fr; align-items:start; }
        .v9-stamp{ justify-self:start; }
        .v9-plates{ grid-template-columns:repeat(2,1fr); }
        .v9-plate,.v9-plate.v9-big{ grid-column:span 1; }
        .v9-stats{ grid-template-columns:repeat(2,1fr); }
        .v9-stat:nth-child(2){ border-right:0; }
        .v9-stat:nth-child(1),.v9-stat:nth-child(2){ border-bottom:2px solid var(--v9-indigo); }
    }
    @media (max-width:420px){
        .v9-page{ border-width:8px; padding:1rem .8rem; }
        .v9-plates{ grid-template-columns:1fr; }
        .v9-plate,.v9-plate.v9-big{ grid-column:span 1; }
        .v9-stats{ grid-template-columns:1fr; }
        .v9-stat{ border-right:0; border-bottom:2px solid var(--v9-indigo); }
        .v9-stat:last-child{ border-bottom:0; }
        .v9-double::before,.v9-h1 .v9-double::before{ transform:translate(2px,2px); }
    }
</style>

<div class="v9-page">
    <div class="v9-wrap">

        {{-- 1. Kicker-Leiste --}}
        <div class="v9-kicker">
            <span>Ausgabe Nº9 · <span class="v9-k-coral">Risograph Press</span></span>
            <span>Lichtenstein, Sachsen</span>
            <span>Arthur Kotsch · Limitierte Auflage</span>
        </div>

        {{-- 2. Hero --}}
        <header class="v9-hero">
            <div>
                <h1 class="v9-h1">
                    <span class="v9-double" data-text="ARTHUR">ARTHUR</span><br>
                    <span class="v9-double" data-text="KOTSCH">KOTSCH</span>
                </h1>
                <p class="v9-subline">Student Digital Engineering &amp; Entwickler aus Lichtenstein (Sachsen). Apps, Web-Tools, Hosting &amp; IT — gedruckt als ein Werkkatalog.</p>
                <a class="v9-hero-cta" href="{{ route('kontakt') }}">
                    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i> Anfrage einsenden
                </a>
            </div>
            <div class="v9-stamp" role="img" aria-label="Stempel: Est. Lichtenstein, Sachsen">
                <span>Est.</span>
                <b>EST.</b>
                <span>Lichten&shy;stein · Sachsen</span>
            </div>
        </header>

        {{-- 3. Kennzahlen-Leiste --}}
        <section class="v9-stats" aria-label="Kennzahlen">
            <div class="v9-stat"><span class="v9-stat-num">22</span><span class="v9-stat-lbl">iOS / Mac-Apps</span></div>
            <div class="v9-stat"><span class="v9-stat-num">9</span><span class="v9-stat-lbl">Windows-Tools</span></div>
            <div class="v9-stat"><span class="v9-stat-num">734</span><span class="v9-stat-lbl">Web-Tools</span></div>
            <div class="v9-stat"><span class="v9-stat-num">1.412</span><span class="v9-stat-lbl">Artikel</span></div>
        </section>

        {{-- 4. Der Werkkatalog — 9 Welten als Plates --}}
        <section aria-labelledby="v9-katalog">
            <div class="v9-section-head">
                <p class="v9-eyebrow">Der Werkkatalog · 9 Platten</p>
                <h2 class="v9-h2" id="v9-katalog">
                    <span class="v9-double" data-text="NEUN WELTEN">NEUN WELTEN</span>
                </h2>
            </div>

            <div class="v9-plates">
                {{-- 01 --}}
                <a class="v9-plate v9-big" href="https://ios.kotsch.tech">
                    <span class="v9-pnum">01</span>
                    <i class="v9-plate-icon fa-brands fa-apple" aria-hidden="true"></i>
                    <h3 class="v9-plate-title">iOS &amp; Mac Apps</h3>
                    <p class="v9-plate-desc">22 Apps im App Store für iPhone, iPad und Mac — mit regelmäßigen Updates.</p>
                    <span class="v9-plate-foot">
                        <span class="v9-plate-arrow">→ ansehen</span>
                        <span class="v9-plate-url">ios.kotsch.tech</span>
                    </span>
                </a>

                {{-- 02 --}}
                <a class="v9-plate" href="https://windows.kotsch.tech">
                    <span class="v9-pnum">02</span>
                    <i class="v9-plate-icon fa-brands fa-windows" aria-hidden="true"></i>
                    <h3 class="v9-plate-title">Windows</h3>
                    <p class="v9-plate-desc">9 Programme — Cleaner, Commander, Notes, Taskmanager, CodeEditor. Direkt-Download.</p>
                    <span class="v9-plate-foot">
                        <span class="v9-plate-arrow">→ ansehen</span>
                        <span class="v9-plate-url">windows.kotsch.tech</span>
                    </span>
                </a>

                {{-- 03 --}}
                <a class="v9-plate" href="https://android.kotsch.tech">
                    <span class="v9-pnum">03</span>
                    <i class="v9-plate-icon fa-brands fa-android" aria-hidden="true"></i>
                    <h3 class="v9-plate-title">Android</h3>
                    <p class="v9-plate-desc">Native Apps für Android — aktuell in Entwicklung.</p>
                    <span class="v9-plate-foot">
                        <span class="v9-plate-arrow">→ ansehen</span>
                        <span class="v9-plate-url">android.kotsch.tech</span>
                    </span>
                </a>

                {{-- 04 --}}
                <a class="v9-plate v9-big" href="https://webtools.kotsch.tech">
                    <span class="v9-pnum">04</span>
                    <i class="v9-plate-icon fa-solid fa-toolbox" aria-hidden="true"></i>
                    <h3 class="v9-plate-title">Web-Tools</h3>
                    <p class="v9-plate-desc">734 Tools direkt im Browser — ohne Login, ohne Installation.</p>
                    <span class="v9-plate-foot">
                        <span class="v9-plate-arrow">→ ansehen</span>
                        <span class="v9-plate-url">webtools.kotsch.tech</span>
                    </span>
                </a>

                {{-- 05 --}}
                <a class="v9-plate" href="https://shop.kotsch.tech">
                    <span class="v9-pnum">05</span>
                    <i class="v9-plate-icon fa-solid fa-bag-shopping" aria-hidden="true"></i>
                    <h3 class="v9-plate-title">Shop</h3>
                    <p class="v9-plate-desc">Digitale Produkte mit Sofort-Download.</p>
                    <span class="v9-plate-foot">
                        <span class="v9-plate-arrow">→ ansehen</span>
                        <span class="v9-plate-url">shop.kotsch.tech</span>
                    </span>
                </a>

                {{-- 06 --}}
                <a class="v9-plate" href="https://hosting.kotsch.tech">
                    <span class="v9-pnum">06</span>
                    <i class="v9-plate-icon fa-solid fa-server" aria-hidden="true"></i>
                    <h3 class="v9-plate-title">Hosting</h3>
                    <p class="v9-plate-desc">Managed Webhosting, vServer/VPS — DSGVO-konform.</p>
                    <span class="v9-plate-foot">
                        <span class="v9-plate-arrow">→ ansehen</span>
                        <span class="v9-plate-url">hosting.kotsch.tech</span>
                    </span>
                </a>

                {{-- 07 --}}
                <a class="v9-plate" href="https://news.kotsch.tech">
                    <span class="v9-pnum">07</span>
                    <i class="v9-plate-icon fa-solid fa-newspaper" aria-hidden="true"></i>
                    <h3 class="v9-plate-title">News</h3>
                    <p class="v9-plate-desc">1.412 Ratgeber &amp; Tutorials rund um Technik und Software.</p>
                    <span class="v9-plate-foot">
                        <span class="v9-plate-arrow">→ ansehen</span>
                        <span class="v9-plate-url">news.kotsch.tech</span>
                    </span>
                </a>

                {{-- 08 --}}
                <a class="v9-plate v9-big" href="https://it-hilfe.kotsch.tech">
                    <span class="v9-pnum">08</span>
                    <i class="v9-plate-icon fa-solid fa-screwdriver-wrench" aria-hidden="true"></i>
                    <h3 class="v9-plate-title">IT-Hilfe</h3>
                    <p class="v9-plate-desc">Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein. Keine Lösung = kein Preis.</p>
                    <span class="v9-plate-foot">
                        <span class="v9-plate-arrow">→ ansehen</span>
                        <span class="v9-plate-url">it-hilfe.kotsch.tech</span>
                    </span>
                </a>

                {{-- 09 --}}
                <a class="v9-plate v9-big" href="https://webdesign.kotsch.tech">
                    <span class="v9-pnum">09</span>
                    <i class="v9-plate-icon fa-solid fa-pen-ruler" aria-hidden="true"></i>
                    <h3 class="v9-plate-title">Webdesign</h3>
                    <p class="v9-plate-desc">Studio für Websites — mit 20 Branchen-Demos zum Durchklicken.</p>
                    <span class="v9-plate-foot">
                        <span class="v9-plate-arrow">→ ansehen</span>
                        <span class="v9-plate-url">webdesign.kotsch.tech</span>
                    </span>
                </a>
            </div>
        </section>

        {{-- 5. Über-Block --}}
        <section class="v9-about" aria-labelledby="v9-about-h">
            <div class="v9-about-inner">
                <p id="v9-about-h">Eine Marke, neun Plates. Von Apps über Web-Tools bis zu IT-Hilfe vor Ort — alles entsteht aus einer Hand in Lichtenstein, Sachsen. Limitierte Auflage, gedruckt mit zwei Farben.</p>
            </div>
        </section>

        {{-- 6. Kontakt-Coupon --}}
        <section class="v9-coupon" aria-labelledby="v9-coupon-h">
            <p class="v9-eyebrow">Bestellschein · Anfrage</p>
            <h2 class="v9-coupon-title" id="v9-coupon-h">
                <span class="v9-double" data-text="PROJEKT EINSENDEN">PROJEKT EINSENDEN</span>
            </h2>
            <a class="v9-coupon-cta" href="{{ route('kontakt') }}">
                <i class="fa-solid fa-paper-plane" aria-hidden="true"></i> Anfrage absenden
            </a>
        </section>

        {{-- Mini-Footer --}}
        <div class="v9-foot">
            <span>© {{ date('Y') }} Kotsch.tech</span>
            <span>Risograph Press · Ausgabe Nº9</span>
            <a href="{{ route('kontakt') }}">Kontakt</a>
        </div>

    </div>
</div>
@endsection