@extends('layouts.app')

@section('title', 'Aurora Glass — Inhalts-Demo #23 | KOTSCH.TECH')
@section('meta_description', 'Aurora Glass: eine ruhige, brand-getönte Lichtbühne mit 9 schwebenden Frosted-Glass-Karten — die neun digitalen Welten von Arthur Kotsch.')

@section('content')
<style>
/* ===== Aurora Glass · Demo #23 · Präfix v23- · KEIN Chrome-Reset ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.v23-stage{
  --v23-blue:#2563eb;
  --v23-orange:#FF5D2E;
  --v23-ink:#0f172a;
  --v23-sub:#475569;
  --v23-glass:rgba(255,255,255,.55);
  --v23-glass-bd:rgba(255,255,255,.7);

  position:relative;
  isolation:isolate;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--v23-ink);
  line-height:1.5;
  overflow-x:clip;
  padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,2rem) clamp(3rem,7vw,6rem);
  background:radial-gradient(120% 120% at 15% 0%, #eef3ff 0%, #f7f9fc 45%, #fff6f1 100%);
}
.v23-wrap{ max-width:1180px; margin-inline:auto; position:relative; z-index:2; }

/* ===== Aurora-Blobs (Hintergrund) ===== */
.v23-aurora{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.v23-blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.9; }
.v23-blob.b1{ width:46vw; height:46vw; max-width:560px; max-height:560px; top:-8%; left:-6%; background:rgba(37,99,235,.28); }
.v23-blob.b2{ width:50vw; height:50vw; max-width:620px; max-height:620px; bottom:-12%; right:-8%; background:rgba(255,93,46,.22); }
.v23-blob.b3{ width:34vw; height:34vw; max-width:420px; max-height:420px; top:38%; left:42%; background:rgba(37,99,235,.16); }

/* ===== Hero ===== */
.v23-eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--v23-blue); background:var(--v23-glass); border:1px solid var(--v23-glass-bd);
  padding:.5rem .9rem; border-radius:980px; backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.v23-eyebrow .v23-dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--v23-orange); box-shadow:0 0 0 4px rgba(255,93,46,.18); }
.v23-h1{
  margin:1.2rem 0 0; font-weight:800; letter-spacing:-.02em; color:var(--v23-ink);
  font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05; max-width:18ch;
}
.v23-h1 .v23-grad{
  background:linear-gradient(100deg,var(--v23-blue),var(--v23-orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.v23-lead{ margin:1.1rem 0 0; max-width:54ch; font-size:clamp(1.02rem,1.6vw,1.18rem); color:var(--v23-sub); font-weight:500; }
.v23-cta-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.8rem; }
.v23-btn{
  display:inline-flex; align-items:center; gap:.55rem; padding:.9rem 1.5rem; border-radius:980px;
  font-weight:700; font-size:.98rem; text-decoration:none; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.v23-btn:focus-visible{ outline:3px solid var(--v23-blue); outline-offset:3px; }
.v23-btn-primary{
  color:#fff; background:linear-gradient(135deg,var(--v23-blue),var(--v23-orange));
  box-shadow:0 16px 34px -14px rgba(37,99,235,.6);
}
.v23-btn-primary:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -16px rgba(255,93,46,.55); }
.v23-btn-ghost{
  color:var(--v23-ink); background:var(--v23-glass); border:1px solid var(--v23-glass-bd);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.v23-btn-ghost:hover{ transform:translateY(-3px); border-color:var(--v23-blue); color:var(--v23-blue); }

/* ===== Kennzahlen-Leiste (ein breiter Glas-Streifen) ===== */
.v23-stats{
  margin-top:clamp(2rem,5vw,3.2rem);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--v23-glass); border:1px solid var(--v23-glass-bd); border-radius:22px;
  overflow:hidden; backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 24px 50px -28px rgba(37,99,235,.32);
}
.v23-stat{ padding:1.5rem 1.2rem; text-align:center; background:rgba(255,255,255,.18); min-width:0; }
.v23-stat-num{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; letter-spacing:-.02em; color:var(--v23-ink); font-variant-numeric:tabular-nums; }
.v23-stat-lbl{ margin-top:.3rem; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--v23-sub); }

/* ===== Sektions-Köpfe ===== */
.v23-sec{ margin-top:clamp(3rem,7vw,5.5rem); }
.v23-sec-kicker{ font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--v23-orange); }
.v23-sec-title{ margin:.5rem 0 0; font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:800; letter-spacing:-.02em; color:var(--v23-ink); }
.v23-sec-sub{ margin:.6rem 0 0; max-width:56ch; color:var(--v23-sub); }

/* ===== Die 9 Welten — Aurora-Spotlight-Karten ===== */
.v23-grid{ margin-top:1.8rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.v23-card{
  position:relative; overflow:hidden; min-width:0;
  display:flex; flex-direction:column; gap:.85rem;
  padding:1.4rem 1.4rem 1.5rem; border-radius:20px; text-decoration:none; color:inherit;
  background:var(--v23-glass); border:1px solid var(--v23-glass-bd);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 12px 30px -22px rgba(15,23,42,.4);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.v23-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,0%), rgba(37,99,235,.16), transparent 70%);
  opacity:0; transition:opacity .25s ease;
}
.v23-card:hover::before{ opacity:1; background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(255,93,46,.2), transparent 70%); }
.v23-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.95); box-shadow:0 20px 40px -20px rgba(37,99,235,.35); }
.v23-card:focus-visible{ outline:3px solid var(--v23-blue); outline-offset:3px; }
.v23-card > *{ position:relative; z-index:1; }
.v23-chip{
  width:2.7rem; height:2.7rem; border-radius:14px; display:grid; place-items:center;
  font-size:1.15rem; color:#fff; background:linear-gradient(135deg,var(--v23-blue),var(--v23-orange));
  box-shadow:0 10px 22px -10px rgba(37,99,235,.55);
}
.v23-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.v23-badge{
  font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--v23-orange); background:rgba(255,93,46,.12); border:1px solid rgba(255,93,46,.3);
  padding:.28rem .55rem; border-radius:980px; white-space:nowrap; align-self:center;
}
.v23-card-title{ font-size:1.15rem; font-weight:800; letter-spacing:-.01em; color:var(--v23-ink); }
.v23-card-txt{ font-size:.95rem; color:var(--v23-sub); flex:1; }
.v23-card-cta{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.9rem; color:var(--v23-blue); }
.v23-card-cta i{ transition:transform .25s ease; }
.v23-card:hover .v23-card-cta{ color:var(--v23-orange); }
.v23-card:hover .v23-card-cta i{ transform:translateX(4px); }

/* ===== Über-Block ===== */
.v23-about{
  margin-top:clamp(3rem,7vw,5rem);
  display:grid; grid-template-columns:1.2fr 1fr; gap:1.25rem; align-items:stretch;
}
.v23-panel{
  padding:clamp(1.6rem,3vw,2.4rem); border-radius:22px;
  background:var(--v23-glass); border:1px solid var(--v23-glass-bd);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 18px 44px -28px rgba(37,99,235,.32); min-width:0;
}
.v23-panel h3{ margin:0 0 .7rem; font-size:1.4rem; font-weight:800; letter-spacing:-.02em; color:var(--v23-ink); }
.v23-panel p{ margin:0 0 .8rem; color:var(--v23-sub); }
.v23-panel p:last-child{ margin-bottom:0; }
.v23-mini{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.v23-mini-item{ padding:1rem; border-radius:14px; background:rgba(255,255,255,.4); border:1px solid var(--v23-glass-bd); }
.v23-mini-item .k{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--v23-blue); }
.v23-mini-item .v{ margin-top:.3rem; font-weight:600; color:var(--v23-ink); font-size:.95rem; }

/* ===== Schluss-CTA ===== */
.v23-final{
  margin-top:clamp(3rem,7vw,5rem); text-align:center;
  padding:clamp(2rem,5vw,3.2rem); border-radius:24px;
  background:var(--v23-glass); border:1px solid var(--v23-glass-bd);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 24px 60px -30px rgba(255,93,46,.4);
}
.v23-final h3{ margin:0; font-size:clamp(1.5rem,3.2vw,2.2rem); font-weight:800; letter-spacing:-.02em; color:var(--v23-ink); }
.v23-final p{ margin:.7rem auto 0; max-width:46ch; color:var(--v23-sub); }
.v23-final .v23-cta-row{ justify-content:center; }

/* ===== Responsive ===== */
@media (max-width:860px){
  .v23-grid{ grid-template-columns:repeat(2,1fr); }
  .v23-about{ grid-template-columns:1fr; }
  .v23-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .v23-grid{ grid-template-columns:1fr; }
  .v23-mini{ grid-template-columns:1fr; }
}

/* ===== backdrop-filter Fallback ===== */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .v23-eyebrow,.v23-btn-ghost,.v23-stats,.v23-card,.v23-panel,.v23-final{ background:rgba(255,255,255,.9); }
  .v23-stat{ background:rgba(255,255,255,.6); }
}

/* ===== Motion ===== */
@media (prefers-reduced-motion:reduce){
  .v23-btn,.v23-card,.v23-card-cta i{ transition:none; }
  .v23-btn:hover,.v23-card:hover{ transform:none; }
  .v23-card:hover .v23-card-cta i{ transform:none; }
}
</style>

<div class="v23-stage">
  <div class="v23-aurora" aria-hidden="true">
    <div class="v23-blob b1"></div>
    <div class="v23-blob b2"></div>
    <div class="v23-blob b3"></div>
  </div>

  <div class="v23-wrap">

    {{-- Hero --}}
    <header class="v23-hero">
      <span class="v23-eyebrow"><span class="v23-dot" aria-hidden="true"></span> Aurora Glass · Eine Marke, neun Welten</span>
      <h1 class="v23-h1">Arthur Kotsch — <span class="v23-grad">neun digitale Welten</span>, eine Person.</h1>
      <p class="v23-lead">Student Digital Engineering aus Lichtenstein (Sachsen). Apps, Web-Tools, Hosting, IT-Hilfe und mehr — schwebend auf einer ruhigen Lichtbühne.</p>
      <div class="v23-cta-row">
        <a href="#v23-welten" class="v23-btn v23-btn-primary">Welten entdecken <i class="fas fa-arrow-down" aria-hidden="true"></i></a>
        <a href="{{ route('kontakt') }}" class="v23-btn v23-btn-ghost">Kontakt <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
      </div>

      {{-- Kennzahlen-Leiste --}}
      <div class="v23-stats" role="list" aria-label="Kennzahlen">
        <div class="v23-stat" role="listitem"><div class="v23-stat-num">22</div><div class="v23-stat-lbl">iOS / Mac-Apps</div></div>
        <div class="v23-stat" role="listitem"><div class="v23-stat-num">9</div><div class="v23-stat-lbl">Windows-Tools</div></div>
        <div class="v23-stat" role="listitem"><div class="v23-stat-num">734</div><div class="v23-stat-lbl">Web-Tools</div></div>
        <div class="v23-stat" role="listitem"><div class="v23-stat-num">1.412</div><div class="v23-stat-lbl">Artikel</div></div>
      </div>
    </header>

    {{-- Die 9 Welten --}}
    <section class="v23-sec" id="v23-welten">
      <p class="v23-sec-kicker">Das Herzstück</p>
      <h2 class="v23-sec-title">Die 9 Welten</h2>
      <p class="v23-sec-sub">Jede Karte führt direkt in ihre eigene Subdomain. Bewege die Maus über eine Karte — das Glas leuchtet dem Cursor entgegen.</p>

      <div class="v23-grid" data-v23-grid>
        <a class="v23-card" href="https://ios.kotsch.tech">
          <div class="v23-card-head"><span class="v23-chip" aria-hidden="true"><i class="fab fa-apple"></i></span></div>
          <div class="v23-card-title">iOS &amp; Mac Apps</div>
          <p class="v23-card-txt">22 Apps im App Store für iPhone, iPad und Mac — mit regelmäßigen Updates.</p>
          <span class="v23-card-cta">Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v23-card" href="https://webtools.kotsch.tech">
          <div class="v23-card-head"><span class="v23-chip" aria-hidden="true"><i class="fas fa-toolbox"></i></span></div>
          <div class="v23-card-title">Web-Tools</div>
          <p class="v23-card-txt">734 Tools direkt im Browser — ohne Login, ohne Installation.</p>
          <span class="v23-card-cta">Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v23-card" href="https://windows.kotsch.tech">
          <div class="v23-card-head"><span class="v23-chip" aria-hidden="true"><i class="fab fa-windows"></i></span></div>
          <div class="v23-card-title">Windows</div>
          <p class="v23-card-txt">9 Programme — Cleaner, Commander, Notes, Taskmanager, CodeEditor — als Direkt-Download.</p>
          <span class="v23-card-cta">Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v23-card" href="https://news.kotsch.tech">
          <div class="v23-card-head"><span class="v23-chip" aria-hidden="true"><i class="fas fa-newspaper"></i></span></div>
          <div class="v23-card-title">News</div>
          <p class="v23-card-txt">1.412 Ratgeber &amp; Tutorials rund um Technik, Software und Web.</p>
          <span class="v23-card-cta">Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v23-card" href="https://shop.kotsch.tech">
          <div class="v23-card-head"><span class="v23-chip" aria-hidden="true"><i class="fas fa-bag-shopping"></i></span></div>
          <div class="v23-card-title">Shop</div>
          <p class="v23-card-txt">Digitale Produkte mit Sofort-Download — direkt nach dem Kauf verfügbar.</p>
          <span class="v23-card-cta">Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v23-card" href="https://hosting.kotsch.tech">
          <div class="v23-card-head"><span class="v23-chip" aria-hidden="true"><i class="fas fa-server"></i></span></div>
          <div class="v23-card-title">Hosting</div>
          <p class="v23-card-txt">Managed Webhosting und vServer/VPS — DSGVO-konform betrieben.</p>
          <span class="v23-card-cta">Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v23-card" href="https://it-hilfe.kotsch.tech">
          <div class="v23-card-head"><span class="v23-chip" aria-hidden="true"><i class="fas fa-headset"></i></span></div>
          <div class="v23-card-title">IT-Hilfe</div>
          <p class="v23-card-txt">Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein. Keine Lösung = kein Preis.</p>
          <span class="v23-card-cta">Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v23-card" href="https://webdesign.kotsch.tech">
          <div class="v23-card-head"><span class="v23-chip" aria-hidden="true"><i class="fas fa-pen-ruler"></i></span></div>
          <div class="v23-card-title">Webdesign</div>
          <p class="v23-card-txt">Studio für moderne Websites — mit 20 Branchen-Demos zur Inspiration.</p>
          <span class="v23-card-cta">Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        <a class="v23-card" href="https://android.kotsch.tech">
          <div class="v23-card-head">
            <span class="v23-chip" aria-hidden="true"><i class="fab fa-android"></i></span>
            <span class="v23-badge">In Entwicklung</span>
          </div>
          <div class="v23-card-title">Android</div>
          <p class="v23-card-txt">Native Android-Apps — derzeit in Entwicklung.</p>
          <span class="v23-card-cta">Öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>
      </div>
    </section>

    {{-- Über-Block --}}
    <section class="v23-sec v23-about">
      <div class="v23-panel">
        <h3>Eine Person, ein roter Faden</h3>
        <p>Hinter allen neun Welten steht eine Person: Arthur Kotsch, Student Digital Engineering und Entwickler aus Lichtenstein in Sachsen.</p>
        <p>Von der iOS-App über Web-Tools bis zur IT-Hilfe vor Ort — alles entsteht mit demselben Anspruch: durchdacht, ehrlich und ohne erfundene Versprechen.</p>
      </div>
      <div class="v23-panel">
        <div class="v23-mini">
          <div class="v23-mini-item"><div class="k">Standort</div><div class="v">Lichtenstein, Sachsen</div></div>
          <div class="v23-mini-item"><div class="k">Fokus</div><div class="v">Digital Engineering</div></div>
          <div class="v23-mini-item"><div class="k">Reichweite</div><div class="v">App Store &amp; Web</div></div>
          <div class="v23-mini-item"><div class="k">IT-Region</div><div class="v">Glauchau–Lichtenstein</div></div>
        </div>
      </div>
    </section>

    {{-- Schluss-CTA --}}
    <section class="v23-final">
      <h3>Projekt im Kopf? Schreib mir.</h3>
      <p>Ob App, Website, Tool oder IT-Frage — erzähl mir kurz, worum es geht.</p>
      <div class="v23-cta-row">
        <a href="{{ route('kontakt') }}" class="v23-btn v23-btn-primary">Kontakt aufnehmen <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
      </div>
    </section>

  </div>
</div>

<script>
(function(){
  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  var grid = document.querySelector('[data-v23-grid]');
  if (!grid) return;
  grid.addEventListener('pointermove', function(e){
    var card = e.target.closest('.v23-card');
    if (!card) return;
    var r = card.getBoundingClientRect();
    card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
    card.style.setProperty('--my', (e.clientY - r.top) + 'px');
  });
})();
</script>
@endsection