@extends('layouts.app')

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

.v24-root{
  --v24-base:#ffffff;
  --v24-soft:#fafafa;
  --v24-soft2:#f6f7f9;
  --v24-line:#ececec;
  --v24-line-h:#dcdcdc;
  --v24-ink:#0f1115;
  --v24-mut:#5b616e;
  --v24-idx:#9aa0ac;
  --v24-primary:#2563eb;
  --v24-accent:#FF5D2E;

  font-family:-apple-system,'Inter','Segoe UI',system-ui,sans-serif;
  color:var(--v24-ink);
  background:var(--v24-base);
  line-height:1.6;
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
}
.v24-root *{box-sizing:border-box;}
.v24-wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);}

/* ---------- Hero ---------- */
.v24-hero{
  position:relative;
  padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4rem);
  text-align:center;
  overflow:hidden;
}
.v24-hero::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 0%, rgba(37,99,235,.06), transparent 70%);
  pointer-events:none;
}
.v24-hero-inner{position:relative;max-width:760px;margin:0 auto;}
.v24-eyebrow{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v24-mut);font-weight:500;margin:0 0 1.25rem;
}
.v24-h1{
  font-size:clamp(2.4rem,5vw,4rem);
  letter-spacing:-.03em;font-weight:680;line-height:1.05;
  margin:0 0 1.1rem;color:var(--v24-ink);
}
.v24-sub{
  font-size:1.05rem;color:var(--v24-mut);
  max-width:54ch;margin:0 auto 2rem;line-height:1.6;
}
.v24-cta-row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;}
.v24-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.95rem;font-weight:600;text-decoration:none;
  padding:.7rem 1.3rem;border-radius:10px;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.v24-btn-primary{background:var(--v24-primary);color:#fff;border:1px solid var(--v24-primary);}
.v24-btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8;}
.v24-btn-ghost{background:#fff;color:var(--v24-ink);border:1px solid var(--v24-line);}
.v24-btn-ghost:hover{border-color:var(--v24-line-h);background:var(--v24-soft);}
.v24-btn .v24-arr{transition:transform .18s ease,color .18s ease;}
.v24-btn-primary:hover .v24-arr{transform:translateX(3px);color:var(--v24-accent);}
.v24-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.25);}

/* ---------- Kennzahlen ---------- */
.v24-stats-sec{padding:0 0 clamp(2.5rem,6vw,4rem);}
.v24-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--v24-line);border-radius:16px;overflow:hidden;
}
.v24-stat{
  padding:clamp(1.25rem,3vw,1.9rem) 1rem;text-align:center;min-width:0;
  box-shadow:-1px 0 var(--v24-line);
}
.v24-stat:first-child{box-shadow:none;}
.v24-stat-num{
  font-size:clamp(1.6rem,3.6vw,2.3rem);font-weight:680;
  letter-spacing:-.02em;line-height:1;color:var(--v24-ink);
  font-variant-numeric:tabular-nums;
}
.v24-stat-lab{font-size:.82rem;color:var(--v24-mut);margin-top:.45rem;}

/* ---------- Welten-Bento ---------- */
.v24-worlds-sec{padding:clamp(1rem,3vw,2rem) 0 clamp(3rem,7vw,5rem);}
.v24-sec-head{max-width:60ch;margin:0 0 2rem;}
.v24-sec-head .v24-eyebrow{margin-bottom:.8rem;}
.v24-sec-title{
  font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:680;
  letter-spacing:-.02em;line-height:1.1;margin:0 0 .6rem;
}
.v24-sec-lead{font-size:1.05rem;color:var(--v24-mut);max-width:62ch;margin:0;}

.v24-bento{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--v24-line);border-radius:16px;overflow:hidden;
  background:#fff;
}
.v24-cell{
  position:relative;min-width:0;
  display:flex;flex-direction:column;
  padding:clamp(1.3rem,2.6vw,1.8rem);
  text-decoration:none;color:inherit;
  box-shadow:-1px 0 var(--v24-line),0 -1px var(--v24-line);
  transition:background .18s ease;
  overflow:hidden;
}
.v24-cell.v24-wide{grid-column:span 2;}
.v24-cell::before{ /* Akzentbalken links */
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--v24-primary);
  transform:scaleY(0);transform-origin:top;
  transition:transform .22s ease;
}
.v24-cell:hover{background:var(--v24-soft);}
.v24-cell:hover::before{transform:scaleY(1);}
.v24-cell:focus-visible{outline:none;box-shadow:-1px 0 var(--v24-line),0 -1px var(--v24-line),inset 0 0 0 2px rgba(37,99,235,.4);}
.v24-idx{
  font-size:.78rem;font-weight:600;color:var(--v24-idx);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
  margin-bottom:1.1rem;transition:color .18s ease;
}
.v24-cell:hover .v24-idx{color:var(--v24-ink);}
.v24-cell-title{
  font-size:1.12rem;font-weight:600;color:var(--v24-ink);
  margin:0 0 .45rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.v24-pill{
  font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--v24-mut);background:var(--v24-soft2);
  border:1px solid var(--v24-line);border-radius:999px;
  padding:.12rem .5rem;
}
.v24-cell-text{font-size:.96rem;color:var(--v24-mut);margin:0 0 1.1rem;line-height:1.55;}
.v24-cell-link{
  margin-top:auto;font-size:.9rem;font-weight:600;color:var(--v24-primary);
  display:inline-flex;align-items:center;gap:.4rem;
}
.v24-cell-link .v24-arr{transition:transform .18s ease,color .18s ease;}
.v24-cell:hover .v24-cell-link .v24-arr{transform:translateX(4px);color:var(--v24-accent);}

/* ---------- IT-Hilfe Streifen ---------- */
.v24-help{background:var(--v24-soft);border-top:1px solid var(--v24-line);border-bottom:1px solid var(--v24-line);}
.v24-help-inner{
  padding:clamp(2.5rem,6vw,4rem) 0;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.v24-help-txt{max-width:54ch;min-width:0;}
.v24-help-txt .v24-eyebrow{margin-bottom:.7rem;}
.v24-help-h{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:680;letter-spacing:-.02em;margin:0 0 .7rem;line-height:1.15;}
.v24-help-p{color:var(--v24-mut);margin:0 0 1rem;font-size:1.02rem;}
.v24-help-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-weight:600;color:var(--v24-ink);
  background:#fff;border:1px solid var(--v24-line);border-radius:999px;
  padding:.4rem .9rem;
}
.v24-help-badge i{color:var(--v24-accent);}

/* ---------- Abschluss-CTA ---------- */
.v24-end{padding:clamp(3rem,7vw,5.5rem) 0;}
.v24-end-card{
  border:1px solid var(--v24-line);border-radius:18px;
  background:linear-gradient(180deg,#fff,#f8f9fb);
  padding:clamp(2.5rem,6vw,4rem) clamp(1.5rem,4vw,3rem);
  text-align:center;max-width:720px;margin:0 auto;
}
.v24-end-h{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:680;letter-spacing:-.025em;margin:0 0 .8rem;line-height:1.1;}
.v24-end-p{color:var(--v24-mut);font-size:1.05rem;max-width:46ch;margin:0 auto 1.8rem;}

@media (max-width:880px){
  .v24-bento{grid-template-columns:repeat(2,1fr);}
  .v24-cell.v24-wide{grid-column:span 2;}
}
@media (max-width:560px){
  .v24-stats{grid-template-columns:repeat(2,1fr);}
  .v24-stat:nth-child(3){box-shadow:-1px 0 var(--v24-line),0 -1px var(--v24-line);}
  .v24-stat:nth-child(odd){box-shadow:0 -1px var(--v24-line);}
  .v24-stat:nth-child(1),.v24-stat:nth-child(2){box-shadow:none;}
  .v24-stat:nth-child(2){box-shadow:-1px 0 var(--v24-line);}
  .v24-stat:nth-child(4){box-shadow:-1px 0 var(--v24-line),0 -1px var(--v24-line);}
  .v24-bento{grid-template-columns:1fr;}
  .v24-cell.v24-wide{grid-column:span 1;}
}

@media (prefers-reduced-motion:reduce){
  .v24-root{scroll-behavior:auto;}
  .v24-btn,.v24-cell,.v24-cell::before,.v24-arr,.v24-idx,.v24-cell-link .v24-arr{transition:color .18s ease,background .18s ease;}
  .v24-cell::before{transform:scaleY(1);}
  .v24-btn-primary:hover .v24-arr,.v24-cell:hover .v24-cell-link .v24-arr{transform:none;}
}
</style>

<div class="v24-root">

  {{-- Hero --}}
  <section class="v24-hero">
    <div class="v24-wrap v24-hero-inner">
      <p class="v24-eyebrow">Arthur Kotsch &middot; Digital Engineering</p>
      <h1 class="v24-h1">Software, Tools und Hilfe &mdash; aus einer Hand.</h1>
      <p class="v24-sub">Student Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Eigene Apps, Web-Tools und IT-Hilfe &mdash; alles unter einem Dach.</p>
      <div class="v24-cta-row">
        <a href="#v24-welten" class="v24-btn v24-btn-primary">Welten entdecken <span class="v24-arr" aria-hidden="true">&rarr;</span></a>
        <a href="/kontakt" class="v24-btn v24-btn-ghost">Kontakt</a>
      </div>
    </div>
  </section>

  {{-- Kennzahlen --}}
  <section class="v24-stats-sec" aria-label="Kennzahlen">
    <div class="v24-wrap">
      <div class="v24-stats">
        <div class="v24-stat"><div class="v24-stat-num">22</div><div class="v24-stat-lab">iOS/Mac-Apps</div></div>
        <div class="v24-stat"><div class="v24-stat-num">9</div><div class="v24-stat-lab">Windows-Tools</div></div>
        <div class="v24-stat"><div class="v24-stat-num">734</div><div class="v24-stat-lab">Web-Tools</div></div>
        <div class="v24-stat"><div class="v24-stat-num">1.412</div><div class="v24-stat-lab">Artikel</div></div>
      </div>
    </div>
  </section>

  {{-- Die 9 Welten --}}
  <section class="v24-worlds-sec" id="v24-welten">
    <div class="v24-wrap">
      <div class="v24-sec-head">
        <p class="v24-eyebrow">Die 9 Welten</p>
        <h2 class="v24-sec-title">Ein Zuhause f&uuml;r alles, was ich baue.</h2>
        <p class="v24-sec-lead">Von nativen Apps &uuml;ber Browser-Tools bis zur IT-Hilfe vor Ort &mdash; jede Welt ist ein eigener Bereich mit klarem Fokus.</p>
      </div>

      <div class="v24-bento">
        <a class="v24-cell v24-wide" href="https://ios.kotsch.tech">
          <span class="v24-idx">01</span>
          <span class="v24-cell-title">iOS &amp; Mac Apps</span>
          <span class="v24-cell-text">22 Apps im App Store f&uuml;r iPhone, iPad und Mac &mdash; mit regelm&auml;&szlig;igen Updates.</span>
          <span class="v24-cell-link">App Store &ouml;ffnen <span class="v24-arr" aria-hidden="true">&rarr;</span></span>
        </a>

        <a class="v24-cell" href="https://webtools.kotsch.tech">
          <span class="v24-idx">02</span>
          <span class="v24-cell-title">Web-Tools</span>
          <span class="v24-cell-text">734 Tools direkt im Browser &mdash; ohne Login, ohne Installation.</span>
          <span class="v24-cell-link">Tools nutzen <span class="v24-arr" aria-hidden="true">&rarr;</span></span>
        </a>

        <a class="v24-cell" href="https://windows.kotsch.tech">
          <span class="v24-idx">03</span>
          <span class="v24-cell-title">Windows</span>
          <span class="v24-cell-text">9 Programme &mdash; Cleaner, Commander, Notes, Taskmanager, CodeEditor. Direkt-Download.</span>
          <span class="v24-cell-link">Programme laden <span class="v24-arr" aria-hidden="true">&rarr;</span></span>
        </a>

        <a class="v24-cell" href="https://hosting.kotsch.tech">
          <span class="v24-idx">04</span>
          <span class="v24-cell-title">Hosting</span>
          <span class="v24-cell-text">Managed Webhosting sowie vServer und VPS &mdash; DSGVO-konform.</span>
          <span class="v24-cell-link">Hosting ansehen <span class="v24-arr" aria-hidden="true">&rarr;</span></span>
        </a>

        <a class="v24-cell" href="https://news.kotsch.tech">
          <span class="v24-idx">05</span>
          <span class="v24-cell-title">News</span>
          <span class="v24-cell-text">1.412 Ratgeber und Tutorials rund um Technik, Software und Web.</span>
          <span class="v24-cell-link">Artikel lesen <span class="v24-arr" aria-hidden="true">&rarr;</span></span>
        </a>

        <a class="v24-cell" href="https://shop.kotsch.tech">
          <span class="v24-idx">06</span>
          <span class="v24-cell-title">Shop</span>
          <span class="v24-cell-text">Digitale Produkte mit Sofort-Download.</span>
          <span class="v24-cell-link">Zum Shop <span class="v24-arr" aria-hidden="true">&rarr;</span></span>
        </a>

        <a class="v24-cell" href="https://it-hilfe.kotsch.tech">
          <span class="v24-idx">07</span>
          <span class="v24-cell-title">IT-Hilfe</span>
          <span class="v24-cell-text">Vor Ort und Remote in der Region Glauchau&ndash;Lichtenstein &mdash; keine L&ouml;sung, kein Preis.</span>
          <span class="v24-cell-link">Hilfe anfragen <span class="v24-arr" aria-hidden="true">&rarr;</span></span>
        </a>

        <a class="v24-cell" href="https://webdesign.kotsch.tech">
          <span class="v24-idx">08</span>
          <span class="v24-cell-title">Webdesign</span>
          <span class="v24-cell-text">Studio mit 20 Branchen-Demos &mdash; vom Konzept bis zur fertigen Seite.</span>
          <span class="v24-cell-link">Studio ansehen <span class="v24-arr" aria-hidden="true">&rarr;</span></span>
        </a>

        <a class="v24-cell" href="https://android.kotsch.tech">
          <span class="v24-idx">09</span>
          <span class="v24-cell-title">Android <span class="v24-pill">in Entwicklung</span></span>
          <span class="v24-cell-text">Native Apps f&uuml;r Android &mdash; aktuell in Entwicklung.</span>
          <span class="v24-cell-link">Mehr erfahren <span class="v24-arr" aria-hidden="true">&rarr;</span></span>
        </a>
      </div>
    </div>
  </section>

  {{-- IT-Hilfe Streifen --}}
  <section class="v24-help">
    <div class="v24-wrap v24-help-inner">
      <div class="v24-help-txt">
        <p class="v24-eyebrow">IT-Hilfe in der Region</p>
        <h2 class="v24-help-h">Wenn der Computer streikt &mdash; ich helfe weiter.</h2>
        <p class="v24-help-p">Vor Ort und per Fernwartung in der Region Glauchau&ndash;Lichtenstein. Transparent und fair.</p>
        <span class="v24-help-badge"><i class="fas fa-circle-check" aria-hidden="true"></i> Keine L&ouml;sung = kein Preis</span>
      </div>
      <div>
        <a href="https://it-hilfe.kotsch.tech" class="v24-btn v24-btn-primary">IT-Hilfe anfragen <span class="v24-arr" aria-hidden="true">&rarr;</span></a>
      </div>
    </div>
  </section>

  {{-- Abschluss-CTA --}}
  <section class="v24-end">
    <div class="v24-wrap">
      <div class="v24-end-card">
        <h2 class="v24-end-h">Projekt im Kopf?</h2>
        <p class="v24-end-p">Ob App, Web-Tool oder eine konkrete IT-Frage &mdash; schreib mir einfach.</p>
        <a href="/kontakt" class="v24-btn v24-btn-primary">Kontakt aufnehmen <span class="v24-arr" aria-hidden="true">&rarr;</span></a>
      </div>
    </div>
  </section>

</div>
@endsection