@extends('layouts.app')

@section('content')
<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

.v29-root{
  --v29-paper:#ffffff;
  --v29-paper2:#f6f7f9;
  --v29-ink:#0f1115;
  --v29-grey:#5b6472;
  --v29-line:#e6e8ec;
  --v29-blue:#2563eb;
  --v29-orange:#ff5d2e;
  --v29-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --v29-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--v29-sans);
  color:var(--v29-ink);
  background:var(--v29-paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.v29-root *{box-sizing:border-box;}
.v29-wrap{max-width:1100px;margin:0 auto;padding:0 clamp(18px,5vw,32px);}
.v29-kicker{
  font-family:var(--v29-sans);
  font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--v29-orange);margin:0 0 18px;
}
.v29-root a{color:inherit;}
.v29-root a:focus-visible,
.v29-root button:focus-visible{
  outline:2px solid var(--v29-blue);outline-offset:3px;border-radius:2px;
}

/* ===== Masthead Hero ===== */
.v29-hero{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,5vw,48px);
  padding-block:clamp(4rem,10vw,8rem) clamp(2.4rem,6vw,4rem);
  border-bottom:1px solid var(--v29-line);
}
@media(min-width:860px){
  .v29-hero{grid-template-columns:minmax(0,1fr) 220px;}
}
.v29-hero-main{min-width:0;}
.v29-h1{
  font-family:var(--v29-serif);
  font-weight:600;
  font-size:clamp(2.6rem,6vw,5rem);
  line-height:1.02;letter-spacing:-.02em;
  margin:0 0 1.4rem;color:var(--v29-ink);
}
.v29-h1 em{font-style:italic;color:var(--v29-orange);font-weight:500;}
.v29-lede{
  font-size:clamp(1.02rem,1.6vw,1.18rem);
  color:var(--v29-grey);max-width:46ch;margin:0 0 2.2rem;
}
.v29-cta{
  display:inline-flex;align-items:center;gap:.6rem;
  font-weight:600;font-size:1rem;text-decoration:none;
  color:#fff;background:var(--v29-orange);
  padding:.85rem 1.5rem;border-radius:999px;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.v29-cta i{transition:transform .25s ease;}
.v29-cta:hover{background:#e8491c;transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,93,46,.32);}
.v29-cta:hover i{transform:translateX(4px);}

.v29-hero-side{
  min-width:0;
  border-top:2px solid var(--v29-ink);
  padding-top:14px;
  align-self:start;
}
@media(min-width:860px){
  .v29-hero-side{border-top:none;border-left:1px solid var(--v29-line);padding:4px 0 4px 26px;}
}
.v29-side-row{
  display:block;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--v29-grey);padding:9px 0;border-bottom:1px solid var(--v29-line);
}
.v29-side-row:last-child{border-bottom:none;}
.v29-side-row b{color:var(--v29-ink);font-weight:700;}

/* ===== Kennzahlen-Leiste ===== */
.v29-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-bottom:1px solid var(--v29-line);
}
@media(min-width:720px){.v29-stats{grid-template-columns:repeat(4,minmax(0,1fr));}}
.v29-stat{
  min-width:0;padding:clamp(1.6rem,4vw,2.6rem) clamp(.6rem,2vw,1.4rem);
  border-top:1px solid var(--v29-line);
  border-right:1px solid var(--v29-line);
}
.v29-stat:nth-child(2n){border-right:none;}
@media(min-width:720px){
  .v29-stat:nth-child(2n){border-right:1px solid var(--v29-line);}
  .v29-stat:nth-child(4n){border-right:none;}
}
.v29-stat-num{
  font-family:var(--v29-serif);font-weight:600;
  font-size:clamp(2.3rem,5vw,3.4rem);line-height:1;
  letter-spacing:-.02em;color:var(--v29-ink);
  font-variant-numeric:tabular-nums;
}
.v29-stat-label{
  margin-top:.55rem;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--v29-grey);
}

/* ===== Die 9 Welten: Inhaltsverzeichnis ===== */
.v29-toc{padding-block:clamp(4rem,10vw,8rem);border-bottom:1px solid var(--v29-line);}
.v29-section-head{margin-bottom:clamp(2rem,5vw,3.4rem);}
.v29-section-title{
  font-family:var(--v29-serif);font-weight:600;
  font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.05;
  letter-spacing:-.02em;margin:0;color:var(--v29-ink);
}
.v29-list{display:flex;flex-direction:column;}
.v29-item{
  display:grid;
  grid-template-columns:3rem 1fr auto;
  align-items:center;gap:clamp(.8rem,2vw,1.4rem);
  padding:clamp(1.05rem,2.4vw,1.5rem) clamp(.4rem,1.5vw,1rem);
  text-decoration:none;color:inherit;
  border-top:1px solid var(--v29-line);
  transition:background .25s ease;
}
.v29-list .v29-item:last-child{border-bottom:1px solid var(--v29-line);}
.v29-num{
  font-family:var(--v29-serif);font-weight:600;
  font-size:clamp(1.1rem,2vw,1.45rem);
  color:var(--v29-orange);font-variant-numeric:tabular-nums;
  transition:transform .25s ease;align-self:start;padding-top:.15rem;
}
.v29-body{min-width:0;display:flex;flex-direction:column;gap:.25rem;}
.v29-row1{display:flex;align-items:baseline;gap:.9rem;min-width:0;}
.v29-title{
  font-family:var(--v29-serif);font-weight:600;
  font-size:clamp(1.25rem,2.6vw,1.85rem);line-height:1.1;
  letter-spacing:-.01em;color:var(--v29-ink);white-space:nowrap;
  transition:color .25s ease;
}
.v29-leader{
  flex:1 1 auto;min-width:1.5rem;
  border-bottom:1px dotted var(--v29-line);
  transform:translateY(-.18em);
  transition:border-color .25s ease;
}
.v29-leader-hidden{display:none;}
.v29-desc{font-size:.92rem;color:var(--v29-grey);}
.v29-go{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:.92rem;color:var(--v29-grey);
  white-space:nowrap;transition:color .25s ease,transform .25s ease;
}
.v29-go i{transition:transform .25s ease;}

.v29-item:hover,.v29-item:focus-visible{background:var(--v29-paper2);outline:none;}
.v29-item:hover .v29-num,.v29-item:focus-visible .v29-num{transform:translateX(6px);}
.v29-item:hover .v29-title,.v29-item:focus-visible .v29-title{color:var(--v29-blue);}
.v29-item:hover .v29-leader,.v29-item:focus-visible .v29-leader{border-color:var(--v29-ink);}
.v29-item:hover .v29-go,.v29-item:focus-visible .v29-go{color:var(--v29-blue);transform:translateX(6px);}
.v29-item:hover .v29-go i,.v29-item:focus-visible .v29-go i{transform:translateX(4px);}
.v29-item:focus-visible{outline:2px solid var(--v29-blue);outline-offset:-2px;}

@media(max-width:600px){
  .v29-item{grid-template-columns:2.2rem 1fr;}
  .v29-go{grid-column:2;justify-content:flex-start;margin-top:.3rem;}
  .v29-row1{flex-wrap:wrap;}
  .v29-title{white-space:normal;}
  .v29-leader-hidden{display:none;}
  .v29-leader{display:none;}
}

/* ===== Kolumne / About ===== */
.v29-about{
  padding-block:clamp(4rem,10vw,8rem);border-bottom:1px solid var(--v29-line);
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);
}
@media(min-width:820px){.v29-about{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);}}
.v29-column{min-width:0;}
.v29-column p{
  font-size:clamp(1.02rem,1.5vw,1.14rem);color:var(--v29-grey);
  margin:0 0 1.2rem;max-width:58ch;
}
.v29-column p.v29-drop::first-letter{
  font-family:var(--v29-serif);font-weight:600;
  float:left;font-size:3.6em;line-height:.8;
  padding:.06em .12em 0 0;color:var(--v29-ink);
}
.v29-aside{min-width:0;}
.v29-aside-kicker{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--v29-ink);margin:0 0 1rem;padding-bottom:.7rem;
  border-bottom:2px solid var(--v29-ink);
}
.v29-aside ul{list-style:none;margin:0;padding:0;}
.v29-aside li{
  padding:.85rem 0;border-bottom:1px solid var(--v29-line);
  display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem;color:var(--v29-ink);
}
.v29-aside li i{color:var(--v29-orange);margin-top:.2rem;}

/* ===== Schluss-Zeile ===== */
.v29-end{
  text-align:center;
  padding-block:clamp(4rem,10vw,8rem);
}
.v29-end .v29-kicker{margin-bottom:1.4rem;}
.v29-end-line{
  font-family:var(--v29-serif);font-weight:600;
  font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.08;letter-spacing:-.02em;
  margin:0 auto 2rem;max-width:20ch;color:var(--v29-ink);
}
.v29-end-link{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:600;font-size:1.05rem;text-decoration:none;color:var(--v29-blue);
  transition:gap .25s ease;
}
.v29-end-link i{transition:transform .25s ease;}
.v29-end-link:hover i{transform:translateX(5px);}

/* ===== Entrance (settled) ===== */
.v29-rise{opacity:0;transform:translateY(16px);}
.v29-in .v29-rise{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease;}
.v29-in .v29-rise:nth-child(2){transition-delay:.06s;}
@media(prefers-reduced-motion:reduce){
  .v29-root *{transition:none !important;animation:none !important;}
  .v29-rise{opacity:1 !important;transform:none !important;}
}
</style>

<div class="v29-root">
  <div class="v29-wrap">

    <!-- 1. Masthead-Hero -->
    <header class="v29-hero">
      <div class="v29-hero-main">
        <p class="v29-kicker">Persönliche Tech-Marke</p>
        <h1 class="v29-h1">Arthur Kotsch baut Software für <em>9 Welten</em>.</h1>
        <p class="v29-lede">Student Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Apps, Web-Tools, Hosting und IT-Hilfe — alles unter einem Namen.</p>
        <a class="v29-cta" href="/kontakt">Kontakt aufnehmen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
      </div>
      <aside class="v29-hero-side" aria-label="Ausgabe">
        <span class="v29-side-row"><b>Ausgabe</b> · 2026</span>
        <span class="v29-side-row">Lichtenstein, <b>Sachsen</b></span>
        <span class="v29-side-row">Digital Engineering</span>
        <span class="v29-side-row"><b>kotsch.tech</b></span>
      </aside>
    </header>

    <!-- 2. Kennzahlen-Leiste -->
    <section class="v29-stats" aria-label="Kennzahlen">
      <div class="v29-stat">
        <div class="v29-stat-num" data-count="22">22</div>
        <div class="v29-stat-label">iOS / Mac Apps</div>
      </div>
      <div class="v29-stat">
        <div class="v29-stat-num" data-count="9">9</div>
        <div class="v29-stat-label">Windows-Tools</div>
      </div>
      <div class="v29-stat">
        <div class="v29-stat-num" data-count="734">734</div>
        <div class="v29-stat-label">Web-Tools</div>
      </div>
      <div class="v29-stat">
        <div class="v29-stat-num" data-count="1412" data-format="de">1.412</div>
        <div class="v29-stat-label">Artikel</div>
      </div>
    </section>

    <!-- 3. Die 9 Welten — Inhaltsverzeichnis -->
    <section class="v29-toc" aria-labelledby="v29-toc-h">
      <div class="v29-section-head">
        <p class="v29-kicker">Inhaltsverzeichnis</p>
        <h2 class="v29-section-title" id="v29-toc-h">Die 9 Welten</h2>
      </div>
      <div class="v29-list">

        <a class="v29-item" href="https://ios.kotsch.tech">
          <span class="v29-num">01</span>
          <span class="v29-body">
            <span class="v29-row1"><span class="v29-title">iOS &amp; Mac Apps</span><span class="v29-leader"></span></span>
            <span class="v29-desc">22 Apps im App Store (iPhone/iPad/Mac), regelmäßige Updates.</span>
          </span>
          <span class="v29-go">22 Apps <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v29-item" href="https://windows.kotsch.tech">
          <span class="v29-num">02</span>
          <span class="v29-body">
            <span class="v29-row1"><span class="v29-title">Windows</span><span class="v29-leader"></span></span>
            <span class="v29-desc">9 Programme: Cleaner, Commander, Notes, Taskmanager, CodeEditor.</span>
          </span>
          <span class="v29-go">Direkt-Download <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v29-item" href="https://android.kotsch.tech">
          <span class="v29-num">03</span>
          <span class="v29-body">
            <span class="v29-row1"><span class="v29-title">Android</span><span class="v29-leader"></span></span>
            <span class="v29-desc">Native Apps, derzeit in Entwicklung.</span>
          </span>
          <span class="v29-go">Vorschau <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v29-item" href="https://webtools.kotsch.tech">
          <span class="v29-num">04</span>
          <span class="v29-body">
            <span class="v29-row1"><span class="v29-title">Web-Tools</span><span class="v29-leader"></span></span>
            <span class="v29-desc">734 Tools im Browser, ohne Login oder Installation.</span>
          </span>
          <span class="v29-go">734 Tools <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v29-item" href="https://shop.kotsch.tech">
          <span class="v29-num">05</span>
          <span class="v29-body">
            <span class="v29-row1"><span class="v29-title">Shop</span><span class="v29-leader"></span></span>
            <span class="v29-desc">Digitale Produkte mit Sofort-Download.</span>
          </span>
          <span class="v29-go">Zum Shop <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v29-item" href="https://hosting.kotsch.tech">
          <span class="v29-num">06</span>
          <span class="v29-body">
            <span class="v29-row1"><span class="v29-title">Hosting</span><span class="v29-leader"></span></span>
            <span class="v29-desc">Managed Webhosting, vServer/VPS, DSGVO-konform.</span>
          </span>
          <span class="v29-go">Tarife <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v29-item" href="https://news.kotsch.tech">
          <span class="v29-num">07</span>
          <span class="v29-body">
            <span class="v29-row1"><span class="v29-title">News</span><span class="v29-leader"></span></span>
            <span class="v29-desc">1.412 Ratgeber und Tutorials rund um Technik.</span>
          </span>
          <span class="v29-go">1.412 Artikel <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v29-item" href="https://it-hilfe.kotsch.tech">
          <span class="v29-num">08</span>
          <span class="v29-body">
            <span class="v29-row1"><span class="v29-title">IT-Hilfe</span><span class="v29-leader"></span></span>
            <span class="v29-desc">Vor Ort &amp; Remote, Region Glauchau–Lichtenstein. „Keine Lösung = kein Preis."</span>
          </span>
          <span class="v29-go">Anfragen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v29-item" href="https://webdesign.kotsch.tech">
          <span class="v29-num">09</span>
          <span class="v29-body">
            <span class="v29-row1"><span class="v29-title">Webdesign</span><span class="v29-leader"></span></span>
            <span class="v29-desc">Studio mit 20 Branchen-Demos.</span>
          </span>
          <span class="v29-go">Demos ansehen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
        </a>

      </div>
    </section>

    <!-- 4. Kolumne / About -->
    <section class="v29-about" aria-labelledby="v29-about-h">
      <div class="v29-column">
        <p class="v29-kicker">Die Kolumne</p>
        <h2 class="v29-section-title" id="v29-about-h" style="margin-bottom:1.4rem;">Ein Name, viele Werkzeuge.</h2>
        <p class="v29-drop">Arthur Kotsch ist Student im Studiengang Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Was als Reihe einzelner Projekte begann, ist heute eine Familie zusammengehöriger Produkte — von Apps über Web-Tools bis zu Hosting und persönlicher IT-Hilfe in der Region.</p>
        <p>Der rote Faden: brauchbare Software, klar erklärt, ohne Schnörkel. Jede der neun Welten löst ein konkretes Problem — und alle teilen sich denselben Anspruch an Qualität und Verständlichkeit.</p>
      </div>
      <aside class="v29-aside" aria-label="Im Überblick">
        <p class="v29-aside-kicker">Im Überblick</p>
        <ul>
          <li><i class="fa-solid fa-location-dot" aria-hidden="true"></i><span>Region IT-Hilfe — vor Ort &amp; Remote rund um Glauchau–Lichtenstein.</span></li>
          <li><i class="fa-solid fa-shield-halved" aria-hidden="true"></i><span>DSGVO-konformes Hosting — vServer, VPS, managed.</span></li>
          <li><i class="fa-solid fa-handshake" aria-hidden="true"></i><span>„Keine Lösung = kein Preis." — faires Versprechen bei der IT-Hilfe.</span></li>
        </ul>
      </aside>
    </section>

    <!-- 5. Schluss-Zeile -->
    <section class="v29-end">
      <p class="v29-kicker">Sprechen wir</p>
      <p class="v29-end-line">Ein Projekt, eine Frage oder eine Idee?</p>
      <a class="v29-end-link" href="/kontakt">Kontakt aufnehmen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
    </section>

  </div>
</div>

<script>
(function(){
  var root=document.querySelector('.v29-root');
  if(!root) return;
  var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches;

  // Settled entrance
  if(!reduce&&'IntersectionObserver' in window){
    var io=new IntersectionObserver(function(es){
      es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('v29-in'); io.unobserve(e.target);} });
    },{threshold:.12});
    document.querySelectorAll('.v29-hero,.v29-toc,.v29-about,.v29-end').forEach(function(el){
      el.classList.add('v29-rise'); io.observe(el);
    });
  }

  // Count-up stats
  if(!reduce&&'IntersectionObserver' in window){
    var so=new IntersectionObserver(function(es){
      es.forEach(function(e){
        if(!e.isIntersecting) return;
        so.unobserve(e.target);
        var el=e.target, target=parseInt(el.getAttribute('data-count'),10);
        var de=el.getAttribute('data-format')==='de';
        var dur=1100, t0=null;
        function fmt(n){ return de? n.toLocaleString('de-DE') : String(n); }
        function step(ts){
          if(!t0) t0=ts;
          var p=Math.min((ts-t0)/dur,1);
          var eased=1-Math.pow(1-p,3);
          el.textContent=fmt(Math.round(target*eased));
          if(p<1) requestAnimationFrame(step);
        }
        el.textContent=fmt(0);
        requestAnimationFrame(step);
      });
    },{threshold:.5});
    document.querySelectorAll('.v29-stat-num[data-count]').forEach(function(el){ so.observe(el); });
  }
})();
</script>
@endsection