@extends('layouts.app')

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

/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ===== Tokens ===== */
.v11-root{
  --v11-bg:#e4e8ef;
  --v11-light:#ffffff;
  --v11-dark:#bcc4d0;
  --v11-text:#33405a;
  --v11-text2:#56668a;
  --v11-acc:#4150d6;
  --v11-acc2:#6a48e8;

  background:var(--v11-bg);
  color:var(--v11-text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
.v11-root *{box-sizing:border-box;}
.v11-root a{color:inherit;text-decoration:none;}

/* Shared shadow recipes */
.v11-root{
  --v11-extr: 8px 8px 16px var(--v11-dark), -8px -8px 16px var(--v11-light);
  --v11-extr-sm: 4px 4px 8px var(--v11-dark), -4px -4px 8px var(--v11-light);
  --v11-inset: inset 6px 6px 12px var(--v11-dark), inset -6px -6px 12px var(--v11-light);
  --v11-inset-sm: inset 4px 4px 8px var(--v11-dark), inset -4px -4px 8px var(--v11-light);
}

.v11-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px);}

/* ===== Focus ===== */
.v11-root a:focus-visible,
.v11-root button:focus-visible{
  outline:3px solid var(--v11-acc);
  outline-offset:4px;
  border-radius:18px;
}

/* ===== Reveal ===== */
.v11-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.v11-reveal.v11-in{opacity:1;transform:none;}

/* =========================================================
   TOP BAR
   ========================================================= */
.v11-bar{position:sticky;top:0;z-index:40;padding:18px 0;background:linear-gradient(var(--v11-bg),rgba(228,232,239,.85));backdrop-filter:blur(6px);}
.v11-bar-in{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--v11-bg);border-radius:50px;padding:12px 16px;
  box-shadow:var(--v11-extr);
}
.v11-mono{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  background:var(--v11-bg);box-shadow:var(--v11-extr-sm);
  font:700 16px 'Poppins',sans-serif;color:var(--v11-acc);letter-spacing:-.02em;
}
.v11-nav{display:flex;align-items:center;gap:6px;}
.v11-nav a{
  font:500 14px 'Inter',sans-serif;color:var(--v11-text2);
  padding:9px 16px;border-radius:30px;transition:color .2s ease,box-shadow .25s ease;
}
.v11-nav a:hover{color:var(--v11-text);box-shadow:var(--v11-inset-sm);}
.v11-nav .v11-nav-cta{color:var(--v11-acc);font-weight:600;}
@media(max-width:640px){
  .v11-nav a:not(.v11-nav-cta){display:none;}
}

/* =========================================================
   HERO
   ========================================================= */
.v11-hero{position:relative;padding:clamp(60px,10vw,120px) 0 clamp(50px,8vw,90px);text-align:center;overflow:hidden;}
.v11-hero-circle{
  position:absolute;top:50%;left:50%;width:min(560px,90vw);height:min(560px,90vw);
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--v11-bg);box-shadow:var(--v11-extr);
  z-index:0;opacity:.6;pointer-events:none;
}
.v11-hero-circle::after{
  content:"";position:absolute;inset:18%;border-radius:50%;
  box-shadow:var(--v11-inset);
}
.v11-hero-in{position:relative;z-index:1;}
.v11-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--v11-bg);border-radius:40px;padding:9px 18px;
  box-shadow:var(--v11-inset-sm);
  font:500 13px 'Inter',sans-serif;color:var(--v11-text2);letter-spacing:.02em;
  margin-bottom:26px;
}
.v11-eyebrow i{color:var(--v11-acc);font-size:12px;}
.v11-hero h1{
  font:600 clamp(34px,7vw,68px) 'Poppins',sans-serif;letter-spacing:-.03em;
  line-height:1.04;margin:0 auto 22px;max-width:14ch;color:var(--v11-text);
}
.v11-hero h1 .v11-grad{
  background:linear-gradient(120deg,var(--v11-acc),var(--v11-acc2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.v11-sub{
  font:400 clamp(15px,2.2vw,19px) 'Inter',sans-serif;color:var(--v11-text2);
  max-width:52ch;margin:0 auto 38px;
}
.v11-cta-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}
.v11-btn{
  display:inline-flex;align-items:center;gap:10px;
  font:600 15px 'Poppins',sans-serif;letter-spacing:-.01em;
  padding:16px 28px;border-radius:18px;border:0;cursor:pointer;
  background:var(--v11-bg);
  transition:box-shadow .25s ease,transform .2s ease;
}
.v11-btn-primary{
  color:#fff;
  background:linear-gradient(120deg,var(--v11-acc),var(--v11-acc2));
  box-shadow:6px 6px 14px var(--v11-dark),-6px -6px 14px var(--v11-light);
}
.v11-btn-primary:hover{transform:translateY(-2px);box-shadow:8px 8px 18px var(--v11-dark),-8px -8px 18px var(--v11-light);}
.v11-btn-primary:active{transform:scale(.98);}
.v11-btn-ghost{
  color:var(--v11-text);box-shadow:var(--v11-inset-sm);
}
.v11-btn-ghost:hover{color:var(--v11-acc);}
.v11-btn-ghost:active{transform:scale(.98);}

/* =========================================================
   STATS (inset pills)
   ========================================================= */
.v11-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.5vw,24px);
  padding:clamp(30px,5vw,50px) 0;
}
.v11-stat{
  min-width:0;text-align:center;
  background:var(--v11-bg);border-radius:22px;padding:24px 14px;
  box-shadow:var(--v11-inset);
}
.v11-stat b{
  display:block;font:700 clamp(26px,4.5vw,40px) 'Poppins',sans-serif;
  font-variant-numeric:tabular-nums;color:var(--v11-text);letter-spacing:-.02em;line-height:1;
}
.v11-stat span{display:block;margin-top:8px;font:500 12px 'Inter',sans-serif;color:var(--v11-text2);letter-spacing:.01em;}
@media(max-width:640px){
  .v11-stats{grid-template-columns:repeat(2,1fr);}
}

/* =========================================================
   SECTION HEADING
   ========================================================= */
.v11-sec-head{text-align:center;max-width:60ch;margin:clamp(50px,8vw,90px) auto clamp(34px,5vw,52px);}
.v11-sec-head .v11-kick{
  display:inline-block;font:600 12px 'Inter',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--v11-acc);margin-bottom:14px;
}
.v11-sec-head h2{font:600 clamp(28px,5vw,46px) 'Poppins',sans-serif;letter-spacing:-.02em;margin:0 0 14px;color:var(--v11-text);}
.v11-sec-head p{font:400 16px 'Inter',sans-serif;color:var(--v11-text2);margin:0 auto;max-width:48ch;}

/* =========================================================
   9 WELTEN — SOFT KEYS
   ========================================================= */
.v11-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,30px);
}
.v11-key{
  min-width:0;display:block;position:relative;
  background:var(--v11-bg);border-radius:24px;padding:clamp(22px,3vw,30px);
  box-shadow:var(--v11-extr);
  transition:box-shadow .25s ease,transform .2s ease;
}
.v11-key:hover{box-shadow:var(--v11-inset);}
.v11-key:active{transform:scale(.98);}
.v11-key-chip{
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:var(--v11-bg);box-shadow:var(--v11-extr-sm);
  color:var(--v11-acc);font-size:21px;
  transition:box-shadow .25s ease,color .25s ease;
}
.v11-key:hover .v11-key-chip{
  box-shadow:0 0 0 1px rgba(65,80,214,.30), 4px 4px 8px var(--v11-dark), -4px -4px 8px var(--v11-light), 0 0 16px rgba(65,80,214,.45);
}
.v11-key h3{font:600 clamp(17px,2.2vw,20px) 'Poppins',sans-serif;letter-spacing:-.01em;margin:20px 0 8px;color:var(--v11-text);}
.v11-key p{font:400 14px 'Inter',sans-serif;color:var(--v11-text2);margin:0;min-height:42px;}
.v11-key-arrow{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font:600 14px 'Inter',sans-serif;color:var(--v11-acc);
}
.v11-key-arrow i{transition:transform .25s ease;}
.v11-key:hover .v11-key-arrow i{transform:translateX(5px);}
@media(max-width:860px){
  .v11-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .v11-key p{min-height:0;}
}
@media(max-width:520px){
  .v11-grid{grid-template-columns:1fr;}
}

/* =========================================================
   ÜBER / KONTAKT BAND
   ========================================================= */
.v11-band{
  margin:clamp(60px,9vw,110px) 0 clamp(50px,7vw,80px);
  background:var(--v11-bg);border-radius:34px;
  box-shadow:var(--v11-inset);
  padding:clamp(38px,6vw,72px) clamp(26px,5vw,64px);
  text-align:center;
}
.v11-band .v11-kick{
  display:inline-block;font:600 12px 'Inter',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--v11-acc);margin-bottom:16px;
}
.v11-band h2{font:600 clamp(26px,4.5vw,42px) 'Poppins',sans-serif;letter-spacing:-.02em;margin:0 auto 18px;max-width:18ch;color:var(--v11-text);}
.v11-band p{font:400 16px 'Inter',sans-serif;color:var(--v11-text2);max-width:54ch;margin:0 auto 32px;}

/* =========================================================
   FOOTER MINI
   ========================================================= */
.v11-foot{padding:clamp(34px,5vw,56px) 0 clamp(40px,6vw,64px);}
.v11-foot-in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding-top:30px;position:relative;
}
.v11-foot-in::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px;
  box-shadow:var(--v11-inset-sm);
}
.v11-foot-brand{display:flex;align-items:center;gap:12px;font:600 15px 'Poppins',sans-serif;color:var(--v11-text);}
.v11-foot-links{display:flex;flex-wrap:wrap;gap:18px;}
.v11-foot-links a{font:500 13px 'Inter',sans-serif;color:var(--v11-text2);transition:color .2s ease;}
.v11-foot-links a:hover{color:var(--v11-acc);}
.v11-foot-copy{width:100%;font:400 12px 'Inter',sans-serif;color:var(--v11-text2);margin-top:4px;}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  .v11-root *{transition:none!important;animation:none!important;}
  .v11-reveal{opacity:1!important;transform:none!important;}
}
</style>

<div class="v11-root">

  <!-- ===== TOP BAR ===== -->
  <header class="v11-bar">
    <div class="v11-wrap">
      <div class="v11-bar-in">
        <a href="#v11-top" class="v11-mono" aria-label="Arthur Kotsch — Startseite">AK</a>
        <nav class="v11-nav" aria-label="Hauptnavigation">
          <a href="#v11-welten">Welten</a>
          <a href="#v11-ueber">Über</a>
          <a href="/kontakt" class="v11-nav-cta">Kontakt</a>
        </nav>
      </div>
    </div>
  </header>

  <!-- ===== HERO ===== -->
  <section class="v11-hero" id="v11-top">
    <div class="v11-hero-circle" aria-hidden="true"></div>
    <div class="v11-wrap v11-hero-in">
      <span class="v11-eyebrow v11-reveal"><i class="fa-solid fa-circle-nodes"></i> Digital Engineering · Lichtenstein, Sachsen</span>
      <h1 class="v11-reveal">Arthur Kotsch<br><span class="v11-grad">Digital Engineering</span></h1>
      <p class="v11-sub v11-reveal">Student &amp; Entwickler aus Lichtenstein. Apps, Web-Tools, Hosting und IT-Hilfe — neun Welten, ein Bedienfeld. Tippen Sie sich durch.</p>
      <div class="v11-cta-row v11-reveal">
        <a href="#v11-welten" class="v11-btn v11-btn-primary"><i class="fa-solid fa-compass"></i> Welten erkunden</a>
        <a href="/kontakt" class="v11-btn v11-btn-ghost">Kontakt</a>
      </div>
    </div>
  </section>

  <!-- ===== STATS ===== -->
  <div class="v11-wrap">
    <div class="v11-stats v11-reveal" aria-label="Kennzahlen">
      <div class="v11-stat"><b>22</b><span>iOS / Mac-Apps</span></div>
      <div class="v11-stat"><b>9</b><span>Windows-Tools</span></div>
      <div class="v11-stat"><b>734</b><span>Web-Tools</span></div>
      <div class="v11-stat"><b>1.412</b><span>Artikel</span></div>
    </div>
  </div>

  <!-- ===== 9 WELTEN ===== -->
  <section id="v11-welten">
    <div class="v11-wrap">
      <div class="v11-sec-head v11-reveal">
        <span class="v11-kick">Das Bedienfeld</span>
        <h2>Neun Welten</h2>
        <p>Jede Welt ist eine taktile Taste. Hover senkt sie sanft ein — wie ein edles Hardware-Panel.</p>
      </div>

      <div class="v11-grid">

        <a class="v11-key v11-reveal" href="https://ios.kotsch.tech">
          <span class="v11-key-chip" aria-hidden="true"><i class="fa-brands fa-apple"></i></span>
          <h3>iOS &amp; Mac Apps</h3>
          <p>22 Apps im App Store für iPhone, iPad und Mac — regelmäßige Updates.</p>
          <span class="v11-key-arrow">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
        </a>

        <a class="v11-key v11-reveal" href="https://windows.kotsch.tech">
          <span class="v11-key-chip" aria-hidden="true"><i class="fa-brands fa-windows"></i></span>
          <h3>Windows</h3>
          <p>9 Programme: Cleaner, Commander, Notes, Taskmanager, CodeEditor — Direkt-Download.</p>
          <span class="v11-key-arrow">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
        </a>

        <a class="v11-key v11-reveal" href="https://android.kotsch.tech">
          <span class="v11-key-chip" aria-hidden="true"><i class="fa-brands fa-android"></i></span>
          <h3>Android</h3>
          <p>Native Apps für Android — aktuell in Entwicklung.</p>
          <span class="v11-key-arrow">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
        </a>

        <a class="v11-key v11-reveal" href="https://webtools.kotsch.tech">
          <span class="v11-key-chip" aria-hidden="true"><i class="fa-solid fa-toolbox"></i></span>
          <h3>Web-Tools</h3>
          <p>734 Tools direkt im Browser — ohne Login, ohne Installation.</p>
          <span class="v11-key-arrow">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
        </a>

        <a class="v11-key v11-reveal" href="https://shop.kotsch.tech">
          <span class="v11-key-chip" aria-hidden="true"><i class="fa-solid fa-bag-shopping"></i></span>
          <h3>Shop</h3>
          <p>Digitale Produkte mit Sofort-Download.</p>
          <span class="v11-key-arrow">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
        </a>

        <a class="v11-key v11-reveal" href="https://hosting.kotsch.tech">
          <span class="v11-key-chip" aria-hidden="true"><i class="fa-solid fa-server"></i></span>
          <h3>Hosting</h3>
          <p>Managed Webhosting, vServer / VPS — DSGVO-konform.</p>
          <span class="v11-key-arrow">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
        </a>

        <a class="v11-key v11-reveal" href="https://news.kotsch.tech">
          <span class="v11-key-chip" aria-hidden="true"><i class="fa-solid fa-newspaper"></i></span>
          <h3>News</h3>
          <p>1.412 Ratgeber &amp; Tutorials rund um Technik.</p>
          <span class="v11-key-arrow">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
        </a>

        <a class="v11-key v11-reveal" href="https://it-hilfe.kotsch.tech">
          <span class="v11-key-chip" aria-hidden="true"><i class="fa-solid fa-screwdriver-wrench"></i></span>
          <h3>IT-Hilfe</h3>
          <p>Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein. Keine Lösung = kein Preis.</p>
          <span class="v11-key-arrow">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
        </a>

        <a class="v11-key v11-reveal" href="https://webdesign.kotsch.tech">
          <span class="v11-key-chip" aria-hidden="true"><i class="fa-solid fa-pen-ruler"></i></span>
          <h3>Webdesign</h3>
          <p>Studio &amp; 20 Branchen-Demos zum Durchklicken.</p>
          <span class="v11-key-arrow">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
        </a>

      </div>
    </div>
  </section>

  <!-- ===== ÜBER / KONTAKT BAND ===== -->
  <section id="v11-ueber">
    <div class="v11-wrap">
      <div class="v11-band v11-reveal">
        <span class="v11-kick">Über &amp; Kontakt</span>
        <h2>Ein Maker, viele Plattformen.</h2>
        <p>Ich bin Arthur Kotsch, Student im Bereich Digital Engineering aus Lichtenstein in Sachsen. Von nativen Apps über Web-Tools bis zu Hosting und IT-Hilfe vor Ort — alles aus einer Hand.</p>
        <a href="/kontakt" class="v11-btn v11-btn-primary"><i class="fa-solid fa-paper-plane"></i> Projekt anfragen</a>
      </div>
    </div>
  </section>

  <!-- ===== FOOTER ===== -->
  <footer class="v11-foot">
    <div class="v11-wrap">
      <div class="v11-foot-in">
        <div class="v11-foot-brand"><span class="v11-mono" aria-hidden="true" style="width:34px;height:34px;font-size:13px;">AK</span> Arthur Kotsch</div>
        <nav class="v11-foot-links" aria-label="Footer">
          <a href="#v11-welten">Welten</a>
          <a href="/kontakt">Kontakt</a>
          <a href="https://news.kotsch.tech">News</a>
          <a href="https://webdesign.kotsch.tech">Webdesign</a>
        </nav>
        <div class="v11-foot-copy">© {{ date('Y') }} Arthur Kotsch · Digital Engineering · Lichtenstein, Sachsen</div>
      </div>
    </div>
  </footer>

</div>

<script>
(function(){
  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches) return;
  var items = document.querySelectorAll('.v11-root .v11-reveal');
  if (!('IntersectionObserver' in window)){ items.forEach(function(el){el.classList.add('v11-in');}); return; }
  var io = new IntersectionObserver(function(entries){
    entries.forEach(function(e){
      if(e.isIntersecting){ e.target.classList.add('v11-in'); io.unobserve(e.target); }
    });
  }, {threshold:.12, rootMargin:'0px 0px -8% 0px'});
  items.forEach(function(el){ io.observe(el); });
})();
</script>
@endsection