@extends('layouts.app')

@section('content')
<style>
    /* Globale App-Chrome ausblenden — diese Demo ist eine eigenständige Seite */
    nav{display:none!important;}
    footer{display:none!important;}
    main{padding-top:0!important;}

    /* ===== Variante 2 — Editorial / Magazin: „Das Werkverzeichnis" ===== */
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

    .v2-page{
        --v2-paper:#F7F4EC;
        --v2-ink:#1A1A18;
        --v2-ink-soft:#5C594F;
        --v2-line:#D8D2C2;
        --v2-accent:#B23A22;
        --v2-accent-dark:#7E2715;
        --v2-serif:"Playfair Display","GT Sesta",Georgia,serif;
        --v2-body:Georgia,"Source Serif",serif;
        --v2-grot:"Inter",system-ui,sans-serif;

        background:var(--v2-paper);
        color:var(--v2-ink);
        font-family:var(--v2-body);
        line-height:1.6;
        -webkit-font-smoothing:antialiased;
        overflow-x:hidden;
    }
    .v2-wrap{
        max-width:1180px;
        margin:0 auto;
        padding:0 32px;
    }

    /* Gesperrte Grotesk-Meta */
    .v2-meta{
        font-family:var(--v2-grot);
        font-size:12px;
        letter-spacing:.18em;
        text-transform:uppercase;
        line-height:1;
    }
    .v2-kicker{
        font-family:var(--v2-grot);
        font-size:12px;
        letter-spacing:.18em;
        text-transform:uppercase;
        color:var(--v2-accent);
    }

    /* 1. Impressums-Zeile */
    .v2-masthead{
        border-top:1px solid var(--v2-line);
        border-bottom:1px solid var(--v2-line);
    }
    .v2-masthead-inner{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px;
        padding:14px 0;
        color:var(--v2-ink-soft);
    }
    .v2-masthead-inner > span{flex:1;}
    .v2-masthead-mid{text-align:center;}
    .v2-masthead-right{text-align:right;}
    .v2-masthead a{color:var(--v2-ink-soft);text-decoration:none;}
    .v2-masthead a:hover{color:var(--v2-accent);}

    /* 2. Titelkopf */
    .v2-head{padding:64px 0 40px;}
    .v2-head .v2-kicker{display:inline-block;margin-bottom:26px;}
    .v2-title{
        font-family:var(--v2-serif);
        font-weight:500;
        font-size:clamp(46px,9vw,132px);
        line-height:.95;
        letter-spacing:-.01em;
        margin:0;
        max-width:14ch;
    }
    .v2-title em{font-style:italic;color:var(--v2-accent);}
    .v2-byline{
        margin-top:30px;
        color:var(--v2-ink-soft);
    }

    /* 3. Lead / Vorspann im Spaltensatz */
    .v2-lead-sec{padding:8px 0 56px;border-top:1px solid var(--v2-line);}
    .v2-lead-sec .v2-meta{padding-top:18px;color:var(--v2-ink-soft);margin-bottom:24px;}
    .v2-lead{
        column-count:2;
        column-gap:48px;
        font-size:18px;
        color:var(--v2-ink-soft);
    }
    .v2-lead p{margin:0 0 1em;}
    .v2-lead p:first-child::first-letter{
        float:left;
        font-family:var(--v2-serif);
        font-weight:600;
        font-size:88px;
        line-height:.72;
        color:var(--v2-accent);
        padding:6px 12px 0 0;
    }

    /* 4. Kennzahlen-Leiste */
    .v2-stats{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        border-top:1px solid var(--v2-ink);
        border-bottom:1px solid var(--v2-ink);
    }
    .v2-stat{
        padding:28px 24px;
        text-align:center;
        border-left:1px solid var(--v2-line);
    }
    .v2-stat:first-child{border-left:0;}
    .v2-stat-num{
        font-family:var(--v2-serif);
        font-weight:500;
        font-size:clamp(38px,5vw,58px);
        line-height:1;
        color:var(--v2-ink);
    }
    .v2-stat-label{
        margin-top:12px;
        color:var(--v2-ink-soft);
    }

    /* 5. Das Werkverzeichnis (Section-Kopf) */
    .v2-index-sec{padding:72px 0 40px;}
    .v2-index-head{
        display:flex;
        align-items:baseline;
        justify-content:space-between;
        gap:16px;
        margin-bottom:28px;
    }
    .v2-index-head h2{
        font-family:var(--v2-serif);
        font-weight:500;
        font-size:clamp(28px,4vw,44px);
        line-height:1;
        margin:0;
    }
    .v2-index-head .v2-meta{color:var(--v2-ink-soft);}

    /* Signature: Index-Eintrag mit Ressort-Linie */
    .v2-idx{
        display:grid;
        grid-template-columns:64px 1fr 1.4fr auto;
        gap:24px;
        align-items:baseline;
        padding:24px 0;
        border-top:1px solid var(--v2-line);
        text-decoration:none;
        color:inherit;
        position:relative;
        transition:transform .35s cubic-bezier(.2,.6,.2,1);
    }
    .v2-idx:last-of-type{border-bottom:1px solid var(--v2-line);}
    .v2-idx::before{
        content:"";
        position:absolute;
        left:-16px;top:24px;bottom:24px;
        width:3px;
        background:var(--v2-accent);
        opacity:0;
        transition:opacity .35s ease;
    }
    .v2-idx-no{
        font-family:var(--v2-grot);
        font-size:15px;
        letter-spacing:.04em;
        color:var(--v2-accent);
        padding-top:6px;
    }
    .v2-idx-title{
        font-family:var(--v2-serif);
        font-weight:500;
        font-size:34px;
        line-height:1.1;
        transition:color .3s ease;
    }
    .v2-idx-desc{
        font-size:16px;
        color:var(--v2-ink-soft);
    }
    .v2-idx-cta{
        font-family:var(--v2-grot);
        font-size:12px;
        letter-spacing:.18em;
        text-transform:uppercase;
        color:var(--v2-ink);
        white-space:nowrap;
        padding-top:8px;
        align-self:start;
    }
    .v2-idx-cta i{
        display:inline-block;
        margin-left:8px;
        transition:transform .35s cubic-bezier(.2,.6,.2,1);
        color:var(--v2-accent);
    }
    /* Hover: Zeile wird zur „aufgeschlagenen Seite" */
    .v2-idx:hover,.v2-idx:focus-visible{
        transform:translateX(10px);
        outline:none;
    }
    .v2-idx:hover::before,.v2-idx:focus-visible::before{opacity:1;}
    .v2-idx:hover .v2-idx-no,.v2-idx:focus-visible .v2-idx-no{color:var(--v2-accent-dark);}
    .v2-idx:hover .v2-idx-title,.v2-idx:focus-visible .v2-idx-title{color:var(--v2-accent);}
    .v2-idx:hover .v2-idx-cta i,.v2-idx:focus-visible .v2-idx-cta i{transform:translateX(8px);}

    /* Über-Block */
    .v2-about{
        padding:64px 0;
        border-top:1px solid var(--v2-line);
        display:grid;
        grid-template-columns:64px 1fr;
        gap:24px;
    }
    .v2-about .v2-idx-no{padding-top:10px;}
    .v2-about h3{
        font-family:var(--v2-serif);
        font-weight:500;
        font-size:clamp(24px,3.2vw,34px);
        line-height:1.2;
        margin:0 0 16px;
        max-width:22ch;
    }
    .v2-about p{
        font-size:18px;
        color:var(--v2-ink-soft);
        max-width:62ch;
        margin:0 0 1em;
    }

    /* Kontakt-CTA */
    .v2-contact{
        padding:72px 0;
        border-top:1px solid var(--v2-ink);
        text-align:center;
    }
    .v2-contact .v2-kicker{display:inline-block;margin-bottom:22px;}
    .v2-contact h2{
        font-family:var(--v2-serif);
        font-weight:500;
        font-size:clamp(32px,5vw,64px);
        line-height:1.02;
        margin:0 auto 32px;
        max-width:16ch;
    }
    .v2-btn{
        display:inline-flex;
        align-items:center;
        gap:12px;
        font-family:var(--v2-grot);
        font-size:13px;
        letter-spacing:.16em;
        text-transform:uppercase;
        color:var(--v2-paper);
        background:var(--v2-accent);
        padding:18px 34px;
        text-decoration:none;
        transition:background .3s ease,transform .3s ease;
    }
    .v2-btn:hover{background:var(--v2-accent-dark);transform:translateY(-2px);}
    .v2-btn i{transition:transform .35s cubic-bezier(.2,.6,.2,1);}
    .v2-btn:hover i{transform:translateX(6px);}

    /* Kolophon / Footer */
    .v2-colophon{
        border-top:1px solid var(--v2-line);
        padding:40px 0 64px;
        color:var(--v2-ink-soft);
    }
    .v2-colophon-top{
        display:flex;
        align-items:baseline;
        justify-content:space-between;
        gap:16px;
        flex-wrap:wrap;
        margin-bottom:24px;
    }
    .v2-colophon-links{
        display:flex;
        flex-wrap:wrap;
        gap:8px 22px;
    }
    .v2-colophon-links a{
        font-family:var(--v2-grot);
        font-size:12px;
        letter-spacing:.16em;
        text-transform:uppercase;
        color:var(--v2-ink-soft);
        text-decoration:none;
    }
    .v2-colophon-links a:hover{color:var(--v2-accent);}

    /* ===== Responsive ===== */
    @media (max-width:880px){
        .v2-lead{column-count:1;}
        .v2-stats{grid-template-columns:repeat(2,1fr);}
        .v2-stat:nth-child(3){border-left:0;}
        .v2-stat:nth-child(odd){border-left:0;}
        .v2-stat:nth-child(even){border-left:1px solid var(--v2-line);}
    }
    @media (max-width:680px){
        .v2-wrap{padding:0 20px;}
        .v2-head{padding:44px 0 32px;}
        .v2-masthead-inner{
            flex-direction:column;
            align-items:flex-start;
            gap:6px;
            font-size:11px;
        }
        .v2-masthead-mid,.v2-masthead-right{text-align:left;}
        /* Index-Zeile kollabiert: Nr+Titel oben, Satz darunter, CTA rechts */
        .v2-idx{
            grid-template-columns:auto 1fr auto;
            grid-template-areas:
                "no title cta"
                "no desc desc";
            gap:6px 16px;
            padding:20px 0;
            transform:none!important;
        }
        .v2-idx::before{left:-12px;}
        .v2-idx-no{grid-area:no;padding-top:10px;}
        .v2-idx-title{grid-area:title;font-size:24px;}
        .v2-idx-desc{grid-area:desc;}
        .v2-idx-cta{grid-area:cta;padding-top:12px;}
        .v2-about{grid-template-columns:1fr;}
        .v2-about .v2-idx-no{padding-top:0;}
    }
    @media (max-width:380px){
        .v2-wrap{padding:0 16px;}
        .v2-stat{padding:20px 12px;}
        .v2-idx-title{font-size:21px;}
    }
    @media (prefers-reduced-motion:reduce){
        .v2-idx,.v2-idx-cta i,.v2-btn,.v2-btn i{transition:none!important;}
        .v2-idx:hover,.v2-idx:focus-visible{transform:none!important;}
    }
</style>

<div class="v2-page">

    {{-- 1. Impressums-Zeile / Masthead-Top --}}
    <div class="v2-masthead">
        <div class="v2-wrap">
            <div class="v2-masthead-inner v2-meta">
                <span>KOTSCH.TECH</span>
                <span class="v2-masthead-mid">Ausgabe № 01 — Lichtenstein, Sachsen</span>
                <span class="v2-masthead-right">23.06.2026 · <a href="/kontakt">Kontakt</a></span>
            </div>
        </div>
    </div>

    {{-- 2. Titelkopf --}}
    <header class="v2-head">
        <div class="v2-wrap">
            <span class="v2-kicker">Das Werk von Arthur Kotsch · Student Digital Engineering · Entwickler</span>
            <h1 class="v2-title">Software, Werkzeuge &amp; <em>Wissen</em> — von einem Schreibtisch in Sachsen.</h1>
            <p class="v2-byline v2-meta">Neun Ressorts · Eine Marke · Direkt aus Lichtenstein</p>
        </div>
    </header>

    {{-- 3. Lead / Vorspann im Spaltensatz --}}
    <section class="v2-lead-sec">
        <div class="v2-wrap">
            <p class="v2-meta">Vorspann</p>
            <div class="v2-lead">
                <p>Kotsch.tech ist die persönliche Tech-Marke von Arthur Kotsch — entstanden aus der Idee, dass eine einzelne Person eine ganze Werkstatt digitaler Werkzeuge betreiben kann. Vom App Store bis zum Browser-Tool, von der Windows-Software bis zur IT-Hilfe vor Ort.</p>
                <p>Was hier versammelt ist, sind keine Konzepte, sondern veröffentlichte Arbeit: Apps, die man laden kann, Tools, die man benutzt, Ratgeber, die man liest. Neun Welten, alle aus derselben Hand, alle erreichbar über eine eigene Subdomain.</p>
                <p>Dieses Verzeichnis liest sich wie das Inhaltsverzeichnis einer Ausgabe — wählen Sie ein Ressort und blättern Sie hinein.</p>
            </div>
        </div>
    </section>

    {{-- 4. Kennzahlen-Leiste --}}
    <section class="v2-wrap" aria-label="Kennzahlen">
        <div class="v2-stats">
            <div class="v2-stat">
                <div class="v2-stat-num">22</div>
                <div class="v2-stat-label v2-meta">iOS / Mac-Apps</div>
            </div>
            <div class="v2-stat">
                <div class="v2-stat-num">9</div>
                <div class="v2-stat-label v2-meta">Windows-Tools</div>
            </div>
            <div class="v2-stat">
                <div class="v2-stat-num">734</div>
                <div class="v2-stat-label v2-meta">Web-Tools</div>
            </div>
            <div class="v2-stat">
                <div class="v2-stat-num">1.412</div>
                <div class="v2-stat-label v2-meta">Artikel</div>
            </div>
        </div>
    </section>

    {{-- 5. Das Werkverzeichnis — die 9 Welten als Index --}}
    <section class="v2-index-sec">
        <div class="v2-wrap">
            <div class="v2-index-head">
                <h2>Das Werkverzeichnis</h2>
                <span class="v2-meta">Neun Ressorts</span>
            </div>

            <a class="v2-idx" href="https://ios.kotsch.tech">
                <span class="v2-idx-no">№&nbsp;01</span>
                <span class="v2-idx-title">iOS &amp; Mac Apps</span>
                <span class="v2-idx-desc">22 Apps im App Store für iPhone, iPad und Mac, regelmäßig gepflegt.</span>
                <span class="v2-idx-cta">Öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <a class="v2-idx" href="https://windows.kotsch.tech">
                <span class="v2-idx-no">№&nbsp;02</span>
                <span class="v2-idx-title">Windows</span>
                <span class="v2-idx-desc">9 Programme von Cleaner bis CodeEditor, direkt zum Download.</span>
                <span class="v2-idx-cta">Laden <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <a class="v2-idx" href="https://android.kotsch.tech">
                <span class="v2-idx-no">№&nbsp;03</span>
                <span class="v2-idx-title">Android</span>
                <span class="v2-idx-desc">Native Apps, derzeit in Entwicklung.</span>
                <span class="v2-idx-cta">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <a class="v2-idx" href="https://webtools.kotsch.tech">
                <span class="v2-idx-no">№&nbsp;04</span>
                <span class="v2-idx-title">Web-Tools</span>
                <span class="v2-idx-desc">734 Werkzeuge im Browser, ohne Login, ohne Installation.</span>
                <span class="v2-idx-cta">Öffnen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <a class="v2-idx" href="https://shop.kotsch.tech">
                <span class="v2-idx-no">№&nbsp;05</span>
                <span class="v2-idx-title">Shop</span>
                <span class="v2-idx-desc">Digitale Produkte zum Sofort-Download.</span>
                <span class="v2-idx-cta">Stöbern <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <a class="v2-idx" href="https://hosting.kotsch.tech">
                <span class="v2-idx-no">№&nbsp;06</span>
                <span class="v2-idx-title">Hosting</span>
                <span class="v2-idx-desc">Managed Webhosting und vServer, DSGVO-konform.</span>
                <span class="v2-idx-cta">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <a class="v2-idx" href="https://news.kotsch.tech">
                <span class="v2-idx-no">№&nbsp;07</span>
                <span class="v2-idx-title">News</span>
                <span class="v2-idx-desc">1.412 Ratgeber und Tutorials.</span>
                <span class="v2-idx-cta">Lesen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <a class="v2-idx" href="https://it-hilfe.kotsch.tech">
                <span class="v2-idx-no">№&nbsp;08</span>
                <span class="v2-idx-title">IT-Hilfe</span>
                <span class="v2-idx-desc">Vor Ort und per Remote im Raum Glauchau–Lichtenstein. Keine Lösung = kein Preis.</span>
                <span class="v2-idx-cta">Anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>

            <a class="v2-idx" href="https://webdesign.kotsch.tech">
                <span class="v2-idx-no">№&nbsp;09</span>
                <span class="v2-idx-title">Webdesign</span>
                <span class="v2-idx-desc">Studio mit 20 Branchen-Demos.</span>
                <span class="v2-idx-cta">Ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
            </a>
        </div>
    </section>

    {{-- Über-Block --}}
    <section class="v2-about">
        <div class="v2-wrap" style="display:contents;">
            <span class="v2-idx-no" aria-hidden="true">№&nbsp;00</span>
            <div>
                <span class="v2-kicker" style="display:inline-block;margin-bottom:14px;">Über den Herausgeber</span>
                <h3>Eine Werkstatt, neun Welten — alles aus einer Hand.</h3>
                <p>Arthur Kotsch ist Student im Studiengang Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Unter kotsch.tech bündelt er seine veröffentlichte Arbeit: Apps für Apple-Geräte, Windows-Programme, eine wachsende Sammlung von Web-Tools, einen Shop für digitale Produkte, Managed Hosting, einen Ratgeber-Bereich, persönliche IT-Hilfe in der Region und ein Webdesign-Studio.</p>
                <p>Kein Konzern, kein Team-Stockfoto — eine Person, die baut, schreibt und betreut. Fragen, Projekte oder IT-Probleme? Die Kontaktseite ist der direkte Draht.</p>
            </div>
        </div>
    </section>

    {{-- Kontakt-CTA --}}
    <section class="v2-contact">
        <div class="v2-wrap">
            <span class="v2-kicker">Leserbrief / Anfrage</span>
            <h2>Schreiben Sie an die Redaktion.</h2>
            <a class="v2-btn" href="/kontakt">Zur Kontaktseite <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
    </section>

    {{-- Kolophon / Footer --}}
    <footer class="v2-colophon" style="display:block!important;">
        <div class="v2-wrap">
            <div class="v2-colophon-top">
                <span class="v2-meta">© 2026 Kotsch.tech · Arthur Kotsch</span>
                <span class="v2-meta">Lichtenstein, Sachsen · <a href="/kontakt" style="color:inherit;">Kontakt</a></span>
            </div>
            <nav class="v2-colophon-links" style="display:flex!important;" aria-label="Alle Bereiche">
                <a href="https://ios.kotsch.tech">iOS &amp; Mac</a>
                <a href="https://windows.kotsch.tech">Windows</a>
                <a href="https://android.kotsch.tech">Android</a>
                <a href="https://webtools.kotsch.tech">Web-Tools</a>
                <a href="https://shop.kotsch.tech">Shop</a>
                <a href="https://hosting.kotsch.tech">Hosting</a>
                <a href="https://news.kotsch.tech">News</a>
                <a href="https://it-hilfe.kotsch.tech">IT-Hilfe</a>
                <a href="https://webdesign.kotsch.tech">Webdesign</a>
            </nav>
        </div>
    </footer>

</div>
@endsection