@extends('layouts.app')

@section('title', 'Premium Liquid Mesh — Inhalts-Demo #37 | KOTSCH.TECH')
@section('meta_description', 'Premium Liquid Mesh: ruhig stehendes Farb-Mesh, gefrostetes Glas und ein Welten-Orbit, der die neun digitalen Welten von Arthur Kotsch inszeniert.')

@section('content')
<style>
/* ===== Premium Liquid Mesh · Demo #37 · Präfix v37- · KEIN Chrome-Reset (Header/Footer bleiben) ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

.v37-stage{
  --v37-ink:#0E1525;
  --v37-body:#475069;
  --v37-mute:#8B95AB;
  --v37-blue:#2563EB;
  --v37-blue-deep:#1E3A8A;
  --v37-orange:#FF5D2E;
  --v37-orange-soft:#FFB39A;
  --v37-aqua:#38BDF8;
  --v37-violet:#A78BFA;
  --v37-canvas:#F6F8FD;
  --v37-glass:rgba(255,255,255,.60);
  --v37-glass-strong:rgba(255,255,255,.80);
  --v37-stroke-top:rgba(255,255,255,.85);
  --v37-stroke-bot:rgba(148,163,184,.22);

  --v37-px1:18%; --v37-py1:14%;
  --v37-px2:84%; --v37-py2:46%;
  --v37-px3:78%; --v37-py3:88%;
  --v37-px4:12%; --v37-py4:84%;

  position:relative;
  isolation:isolate;
  font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  color:var(--v37-body);
  line-height:1.65;
  overflow-x:clip;
  background:
    radial-gradient(120% 80% at 50% -10%, #FBFCFF 0%, var(--v37-canvas) 46%, #EEF2FA 100%);
  padding:clamp(2.4rem,6vw,4.6rem) clamp(1rem,4vw,2rem) clamp(3rem,8vw,6rem);
}
.v37-stage *{ box-sizing:border-box; min-width:0; }
.v37-wrap{ max-width:1200px; margin-inline:auto; position:relative; z-index:2; }

.v37-stage h1,.v37-stage h2,.v37-stage h3{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  letter-spacing:-.022em; color:var(--v37-ink); line-height:1.08; margin:0;
  text-wrap:balance;
}
.v37-stage p{ text-wrap:pretty; }

/* ===== Mesh-Backdrop (Ebene 0) — settled, weichgezeichnet, geschichtet ===== */
.v37-mesh{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.v37-mesh::before{
  content:""; position:absolute; inset:-14%;
  filter:blur(66px); opacity:.92; will-change:transform;
  background:
    radial-gradient(38% 40% at var(--v37-px1) var(--v37-py1), rgba(37,99,235,.36), rgba(37,99,235,0) 70%),
    radial-gradient(40% 42% at var(--v37-px2) var(--v37-py2), rgba(56,189,248,.32), rgba(56,189,248,0) 70%),
    radial-gradient(42% 44% at var(--v37-px3) var(--v37-py3), rgba(255,179,154,.34), rgba(255,179,154,0) 70%),
    radial-gradient(46% 46% at var(--v37-px4) var(--v37-py4), rgba(167,139,250,.12), rgba(167,139,250,0) 72%);
  animation:v37drift 60s ease-in-out infinite;
}
/* zweite, gegenläufige Mesh-Ebene für Tiefe */
.v37-mesh::after{
  content:""; position:absolute; inset:-18%;
  filter:blur(90px); opacity:.6; will-change:transform; mix-blend-mode:multiply;
  background:
    radial-gradient(30% 32% at 64% 18%, rgba(37,99,235,.18), transparent 70%),
    radial-gradient(34% 36% at 26% 62%, rgba(255,93,46,.16), transparent 72%),
    conic-gradient(from 200deg at 80% 80%, rgba(56,189,248,.14), transparent 38%);
  animation:v37drift2 78s ease-in-out infinite;
}
@keyframes v37drift{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  50%{ transform:translate3d(2.5%,-2%,0) scale(1.04) }
}
@keyframes v37drift2{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg) }
  50%{ transform:translate3d(-2%,2.5%,0) rotate(4deg) }
}
/* feine obere Lichtkante + Bodenvignette */
.v37-mesh-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), transparent 14%),
    radial-gradient(120% 70% at 50% 120%, rgba(30,58,138,.07), transparent 60%);
}
/* Grain (crafted) */
.v37-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Glas-Grundbaustein ===== */
.v37-glass{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 32%),
    var(--v37-glass);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--v37-stroke-bot);
  border-top-color:var(--v37-stroke-top);
  border-radius:24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 28px 60px -34px rgba(30,58,138,.5),
    0 6px 16px -12px rgba(30,58,138,.22);
}
/* gefrostete Spekular-Lichtkante oben */
.v37-glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 26%);
  opacity:.7; mix-blend-mode:screen;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .v37-glass{ background:rgba(255,255,255,.92); }
}

/* ===== Eyebrow / Verlaufstext (umbruch-sicher) ===== */
.v37-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--v37-blue); margin:0 0 1rem;
}
.v37-eyebrow::before{ content:""; width:26px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--v37-blue),var(--v37-orange)); }
.v37-grad{
  background:linear-gradient(100deg,var(--v37-blue) 0%,var(--v37-blue) 30%,var(--v37-orange) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ===== A) HERO ===== */
.v37-hero{ display:grid; grid-template-columns:1.32fr 1fr; gap:clamp(2rem,4vw,3.6rem); align-items:center; padding-block:clamp(1rem,3vw,2.4rem) clamp(3rem,6vw,5rem); }
.v37-h1{ font-size:clamp(2.6rem,5.5vw,4.7rem); font-weight:700; margin:0 0 1.25rem; letter-spacing:-.03em; }
.v37-lead{ font-size:clamp(1.06rem,1.4vw,1.28rem); color:var(--v37-body); max-width:54ch; margin:0 0 1.9rem; }
.v37-cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.8rem; }
.v37-btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.88rem 1.65rem; border-radius:999px; font-weight:700; font-size:1rem;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .25s ease;
}
.v37-btn i{ transition:transform .25s ease; position:relative; z-index:1; }
.v37-btn span,.v37-btn{ position:relative; }
.v37-btn:hover i.v37-arr{ transform:translateX(4px); }
.v37-btn-primary{ color:#fff;
  background:linear-gradient(135deg,var(--v37-blue) 0%,#3b6bf0 42%,var(--v37-orange) 100%);
  box-shadow:0 14px 30px -12px var(--v37-orange), 0 2px 6px -2px rgba(37,99,235,.4), 0 1px 0 rgba(255,255,255,.4) inset; }
/* gleitender Glanz */
.v37-btn-primary::after{
  content:""; position:absolute; top:0; left:-60%; width:50%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg); transition:left .6s ease;
}
.v37-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 22px 42px -14px var(--v37-orange), 0 3px 8px -2px rgba(37,99,235,.5); }
.v37-btn-primary:hover::after{ left:130%; }
.v37-btn-ghost{
  color:var(--v37-ink); background:var(--v37-glass);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-color:var(--v37-stroke-bot);
}
.v37-btn-ghost:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--v37-blue) 40%,transparent); }

.v37-trust{ display:flex; flex-wrap:wrap; gap:.6rem; }
.v37-pill{
  display:inline-flex; align-items:baseline; gap:.4rem;
  padding:.5rem .85rem; border-radius:999px; font-size:.85rem; color:var(--v37-body);
  background:var(--v37-glass); border:1px solid var(--v37-stroke-bot);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.v37-pill b{ font-family:'Space Grotesk',sans-serif; font-size:1rem; color:var(--v37-ink); font-weight:700; }

/* ===== Hero-Orbit (Signature SVG/CSS) ===== */
.v37-orbit{ position:relative; aspect-ratio:1/1; max-width:460px; margin-inline:auto; width:100%; }
/* weiche Aura hinter dem Orbit */
.v37-orbit::before{
  content:""; position:absolute; inset:8%; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 50% 42%, rgba(37,99,235,.20), rgba(56,189,248,.10) 45%, transparent 70%);
  filter:blur(22px);
  animation:v37breathe 9s ease-in-out infinite;
}
/* gepunktete Bahn-Führungen */
.v37-track{ position:absolute; border-radius:50%; border:1px dashed rgba(99,118,160,.28); pointer-events:none; }
.v37-track-1{ inset:18.5%; }
.v37-track-2{ inset:1%; border-color:rgba(99,118,160,.2); }
.v37-ell{ position:absolute; inset:0; z-index:2; }
.v37-spin1{ animation:v37spin 46s linear infinite; }
.v37-spin2{ animation:v37spin 64s linear infinite reverse; }
@keyframes v37spin{ to{ transform:rotate(360deg); } }
@keyframes v37breathe{ 0%,100%{ opacity:.8; transform:scale(1) } 50%{ opacity:1; transform:scale(1.06) } }
.v37-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:33%; aspect-ratio:1/1; border-radius:28px;
  display:grid; place-items:center;
  background:
    linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,0) 50%),
    var(--v37-glass-strong);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--v37-stroke-top);
  box-shadow:
    0 26px 56px -22px rgba(30,58,138,.6),
    0 1px 0 rgba(255,255,255,.8) inset,
    0 0 0 6px rgba(255,255,255,.35);
  z-index:3;
  animation:v37float 7s ease-in-out infinite;
}
@keyframes v37float{ 0%,100%{ transform:translate(-50%,-50%) } 50%{ transform:translate(-50%,calc(-50% - 6px)) } }
.v37-core span{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.02em; background:linear-gradient(135deg,var(--v37-blue),var(--v37-orange)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.v37-chip{
  position:absolute; left:50%; top:50%;
  width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:16px;
  display:grid; place-items:center;
  background:
    linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    var(--v37-glass-strong);
  -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
  border:1px solid var(--v37-stroke-top);
  box-shadow:0 14px 28px -14px rgba(30,58,138,.55), 0 1px 0 rgba(255,255,255,.7) inset;
  color:var(--v37-blue); font-size:1.05rem;
}
.v37-chip.v37-spark{ color:var(--v37-orange); box-shadow:0 0 0 1px rgba(255,93,46,.3),0 16px 32px -12px rgba(255,93,46,.6), 0 1px 0 rgba(255,255,255,.7) inset; }
/* gegen-rotieren, damit Icons aufrecht bleiben */
.v37-chip i{ animation:v37spin-rev 46s linear infinite; }
.v37-spin2 .v37-chip i{ animation:v37spin 64s linear infinite; }
@keyframes v37spin-rev{ to{ transform:rotate(-360deg); } }

/* ===== B) FLAGGSCHIFF-SPOTLIGHT ===== */
.v37-section{ margin-top:clamp(4.5rem,9vw,9rem); }
.v37-flag{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.6rem,3vw,3rem); align-items:center; padding:clamp(1.8rem,3.5vw,3rem); }
.v37-flag h2{ font-size:clamp(1.9rem,3vw,2.9rem); margin:.4rem 0 1rem; }
.v37-flag p{ margin:0 0 1.6rem; max-width:48ch; }
/* App-Grid-Illustration (Home-Screen-Anmutung) */
.v37-appgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:308px; margin-inline:auto; width:100%; perspective:900px; }
.v37-app{
  aspect-ratio:1/1; border-radius:20px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#f0f5ff,#dbe7ff);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 18px 32px -20px rgba(30,58,138,.6), 0 1px 0 rgba(255,255,255,.8) inset;
  display:grid; place-items:center; color:var(--v37-blue); font-size:1.2rem;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
/* Glanzschimmer pro Icon */
.v37-app::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.55), transparent 45%); opacity:.7; }
.v37-app.v37-app-2{ transform:translateY(-12px); }
.v37-app.v37-app-4{ transform:translateY(6px); }
.v37-app.v37-app-5{ transform:translateY(10px); }
.v37-app.v37-app-6{ transform:translateY(-4px); }
.v37-app.v37-app-glow{ background:linear-gradient(150deg,#fff,#ffe7df); color:var(--v37-orange); box-shadow:0 0 0 1px rgba(255,93,46,.25),0 20px 36px -16px rgba(255,93,46,.6), 0 1px 0 rgba(255,255,255,.8) inset; transform:scale(1.04); z-index:2; }
.v37-flag:hover .v37-app{ transform:translateY(0); }
.v37-flag:hover .v37-app-glow{ transform:translateY(-8px) scale(1.06); }

/* ===== C) DIE 9 WELTEN — Bento ===== */
.v37-head{ text-align:center; max-width:640px; margin:0 auto clamp(2rem,4vw,3.4rem); }
.v37-head .v37-eyebrow{ justify-content:center; }
.v37-head h2{ font-size:clamp(1.9rem,3vw,2.9rem); margin-bottom:.7rem; }
.v37-head p{ margin:0; }

.v37-bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.9rem,1.6vw,1.3rem); }
.v37-card{
  position:relative; overflow:hidden; padding:clamp(1.3rem,2vw,1.8rem);
  display:flex; flex-direction:column; gap:.85rem; text-decoration:none; color:inherit;
  grid-column:span 3;
  transition:transform .3s ease, box-shadow .3s ease;
  transform-style:preserve-3d; will-change:transform;
}
.v37-card.v37-wide{ grid-column:span 4; }
.v37-card.v37-mid{ grid-column:span 3; }
.v37-card.v37-small{ grid-column:span 2; }
/* Orange-Funke oben */
.v37-card::after{
  content:""; position:absolute; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--v37-orange),var(--v37-orange-soft));
  transition:width .45s ease; border-radius:3px;
}
.v37-card:hover{ transform:translateY(-6px); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 34px 60px -28px rgba(30,58,138,.55); }
.v37-card:hover::after{ width:100%; }
.v37-card:focus-visible{ outline:3px solid var(--v37-blue); outline-offset:3px; }
/* Cursor-Glanz */
.v37-shine{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(160px 160px at var(--gx,50%) var(--gy,50%), rgba(37,99,235,.12), transparent 70%); }
.v37-card:hover .v37-shine{ opacity:1; }

.v37-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.v37-card h3{ font-size:1.18rem; }
.v37-card p{ margin:0; font-size:.96rem; color:var(--v37-body); }
.v37-card-link{ margin-top:auto; display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--v37-blue); font-size:.92rem; }
.v37-card-link i{ transition:transform .25s ease; }
.v37-card:hover .v37-card-link i{ transform:translateX(4px); }

/* Akzent-Tile (IT-Hilfe) */
.v37-card.v37-accent{ background:linear-gradient(155deg,rgba(255,237,229,.85),rgba(255,255,255,.62)); }
.v37-card.v37-accent .v37-card-link{ color:var(--v37-orange); }
.v37-badge{
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  padding:.3rem .65rem; border-radius:999px;
  background:rgba(255,93,46,.12); color:var(--v37-orange); border:1px solid rgba(255,93,46,.25);
}
.v37-status{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700;
  padding:.28rem .6rem; border-radius:999px; color:var(--v37-blue);
  background:rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.2);
}
.v37-status .v37-dot{ width:7px; height:7px; border-radius:50%; background:var(--v37-blue); animation:v37pulse 2.2s ease-in-out infinite; }
@keyframes v37pulse{ 0%,100%{opacity:.4; transform:scale(.85)} 50%{opacity:1; transform:scale(1.15)} }

/* Mini-Szene (bespoke SVG) auf gefrostetem Tile */
.v37-scene{
  width:58px; height:58px; flex:0 0 auto; color:var(--v37-blue);
  display:grid; place-items:center; border-radius:15px; padding:9px;
  background:linear-gradient(155deg, rgba(255,255,255,.7), rgba(236,242,255,.55));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 8px 18px -12px rgba(30,58,138,.5), 0 1px 0 rgba(255,255,255,.7) inset;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.v37-scene svg{ width:100%; height:100%; display:block; }
.v37-scene .v37-acc{ color:var(--v37-orange); }
.v37-card:hover .v37-scene{ transform:translateY(-2px) scale(1.05) rotate(-2deg); box-shadow:0 14px 26px -14px rgba(30,58,138,.6); }
.v37-card.v37-accent .v37-scene{ background:linear-gradient(155deg, rgba(255,255,255,.75), rgba(255,233,224,.6)); }

/* ===== D) KENNZAHLEN — Ringe ===== */
.v37-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,1.8vw,1.4rem); padding:clamp(1.6rem,3vw,2.6rem); }
.v37-stat{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.v37-ring{ position:relative; width:112px; height:112px; }
.v37-ring::before{ content:""; position:absolute; inset:14%; border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.10), transparent 70%); }
.v37-ring svg{ position:relative; width:100%; height:100%; transform:rotate(-90deg); }
.v37-ring-arc{ filter:drop-shadow(0 4px 8px rgba(37,99,235,.25)); transition:stroke-dashoffset .2s linear; }
.v37-ring-num{ position:absolute; inset:0; display:grid; place-items:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.6rem; color:var(--v37-ink); letter-spacing:-.02em; }
.v37-stat-label{ font-size:.9rem; font-weight:600; color:var(--v37-body); }

/* ===== E) ÜBER ===== */
.v37-about{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.6rem,3vw,2.6rem); align-items:center; padding:clamp(1.8rem,3.5vw,3rem); max-width:880px; margin-inline:auto; }
.v37-mono{
  width:118px; height:118px; border-radius:28px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--v37-glass-strong);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--v37-stroke-top);
  box-shadow:0 22px 46px -22px rgba(30,58,138,.5), 0 1px 0 rgba(255,255,255,.7) inset;
}
.v37-mono span{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.6rem; background:linear-gradient(135deg,var(--v37-blue),var(--v37-orange)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.v37-about h2{ font-size:clamp(1.7rem,2.6vw,2.4rem); margin-bottom:.8rem; }
.v37-about p{ margin:0; max-width:60ch; }

/* ===== F) KONTAKT-CTA ===== */
.v37-contact{ position:relative; overflow:hidden; text-align:center; padding:clamp(2.6rem,5.5vw,4.4rem) clamp(1.4rem,4vw,3rem); }
.v37-contact::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(50% 70% at 50% 120%, rgba(255,93,46,.12), transparent 60%);
}
.v37-contact > *{ position:relative; z-index:1; }
.v37-contact h2{ font-size:clamp(1.9rem,3.4vw,3rem); margin-bottom:.75rem; }
.v37-contact p{ margin:0 auto 1.9rem; max-width:50ch; }
.v37-contact-sub{ font-size:.88rem; color:var(--v37-mute); margin-top:1.3rem; }

/* ===== Reveal (choreografiert) ===== */
.v37-reveal{ opacity:0; transform:translateY(20px) scale(.985); filter:blur(6px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1), filter .75s ease; }
.v37-reveal.v37-in{ opacity:1; transform:none; filter:none; }

/* ===== Responsive ===== */
@media (max-width:1099px){
  .v37-hero{ grid-template-columns:1fr; }
  .v37-orbit{ order:-1; max-width:360px; }
  .v37-flag{ grid-template-columns:1fr; }
  .v37-bento{ grid-template-columns:repeat(2,1fr); }
  .v37-card,.v37-card.v37-mid,.v37-card.v37-small{ grid-column:span 1; }
  .v37-card.v37-wide{ grid-column:span 2; }
  .v37-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:719px){
  .v37-bento{ grid-template-columns:1fr; }
  .v37-card.v37-wide{ grid-column:span 1; }
  .v37-about{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .v37-mesh::before{ filter:blur(40px); }
}

@media (prefers-reduced-motion:reduce){
  .v37-mesh::before,.v37-mesh::after,.v37-orbit::before,.v37-core,
  .v37-spin1,.v37-spin2,.v37-chip i,.v37-status .v37-dot{ animation:none !important; }
  .v37-reveal{ opacity:1; transform:none; filter:none; transition:none; }
  .v37-card,.v37-btn,.v37-app,.v37-scene,.v37-card-link i,.v37-btn-primary::after{ transition:none !important; }
  .v37-core{ transform:translate(-50%,-50%) !important; }
}
</style>

<div class="v37-stage">
  <div class="v37-mesh" aria-hidden="true"></div>
  <div class="v37-mesh-veil" aria-hidden="true"></div>
  <div class="v37-grain" aria-hidden="true"></div>

  <div class="v37-wrap">

    {{-- ============ A) HERO ============ --}}
    <section class="v37-hero">
      <div class="v37-reveal">
        <p class="v37-eyebrow">Arthur Kotsch · Digital Engineering</p>
        <h1 class="v37-h1">Software, Tools &amp; Hilfe — <span class="v37-grad">aus einer Hand.</span></h1>
        <p class="v37-lead">Student Digital Engineering aus Lichtenstein in Sachsen. Ich baue Apps und Web-Tools, betreibe Hosting und helfe ganz praktisch bei IT-Problemen.</p>
        <div class="v37-cta-row">
          <a href="#v37-welten" class="v37-btn v37-btn-primary">Welten erkunden <i class="fas fa-arrow-right v37-arr" aria-hidden="true"></i></a>
          <a href="{{ route('kontakt') }}" class="v37-btn v37-btn-ghost">Kontakt</a>
        </div>
        <div class="v37-trust" aria-label="Kennzahlen">
          <span class="v37-pill"><b>22</b> Apps</span>
          <span class="v37-pill"><b>9</b> Windows-Tools</span>
          <span class="v37-pill"><b>734</b> Web-Tools</span>
          <span class="v37-pill"><b>1.412</b> Artikel</span>
        </div>
      </div>

      {{-- Signature: Welten-Orbit --}}
      <div class="v37-orbit v37-reveal" aria-hidden="true">
        <div class="v37-track v37-track-2"></div>
        <div class="v37-track v37-track-1"></div>
        <div class="v37-core"><span>AK</span></div>
        {{-- Bahn 1 (innen, 4 Chips) --}}
        <div class="v37-ell v37-spin1">
          <span class="v37-chip" style="transform:translate(0,-150px)"><i class="fas fa-mobile-screen-button"></i></span>
          <span class="v37-chip v37-spark" style="transform:translate(150px,0)"><i class="fas fa-screwdriver-wrench"></i></span>
          <span class="v37-chip" style="transform:translate(0,150px)"><i class="fas fa-window-maximize"></i></span>
          <span class="v37-chip" style="transform:translate(-150px,0)"><i class="fas fa-server"></i></span>
        </div>
        {{-- Bahn 2 (außen, 5 Chips) --}}
        <div class="v37-ell v37-spin2">
          <span class="v37-chip" style="transform:rotate(0deg) translate(205px) rotate(0deg)"><i class="fas fa-robot"></i></span>
          <span class="v37-chip" style="transform:rotate(72deg) translate(205px) rotate(-72deg)"><i class="fas fa-bag-shopping"></i></span>
          <span class="v37-chip" style="transform:rotate(144deg) translate(205px) rotate(-144deg)"><i class="fas fa-newspaper"></i></span>
          <span class="v37-chip" style="transform:rotate(216deg) translate(205px) rotate(-216deg)"><i class="fas fa-location-dot"></i></span>
          <span class="v37-chip" style="transform:rotate(288deg) translate(205px) rotate(-288deg)"><i class="fas fa-pen-nib"></i></span>
        </div>
      </div>
    </section>

    {{-- ============ B) FLAGGSCHIFF-SPOTLIGHT ============ --}}
    <section class="v37-section">
      <div class="v37-flag v37-glass v37-reveal">
        <div>
          <p class="v37-eyebrow">Flaggschiff</p>
          <h2>22 Apps im App&nbsp;Store</h2>
          <p>iPhone, iPad und Mac — native Apps mit regelmäßigen Updates. Das stärkste Stück meiner Arbeit, gepflegt und kontinuierlich erweitert.</p>
          <a href="https://ios.kotsch.tech" class="v37-btn v37-btn-primary">Zu den iOS &amp; Mac Apps <i class="fas fa-arrow-right v37-arr" aria-hidden="true"></i></a>
        </div>
        <div class="v37-appgrid" aria-hidden="true">
          <div class="v37-app v37-app-1"><i class="fas fa-bolt"></i></div>
          <div class="v37-app v37-app-2"><i class="fas fa-cloud"></i></div>
          <div class="v37-app v37-app-3 v37-app-glow"><i class="fas fa-star"></i></div>
          <div class="v37-app v37-app-4"><i class="fas fa-image"></i></div>
          <div class="v37-app v37-app-5"><i class="fas fa-music"></i></div>
          <div class="v37-app v37-app-6"><i class="fas fa-compass"></i></div>
        </div>
      </div>
    </section>

    {{-- ============ C) DIE 9 WELTEN ============ --}}
    <section class="v37-section" id="v37-welten">
      <div class="v37-head v37-reveal">
        <p class="v37-eyebrow">Neun Welten</p>
        <h2>Eine Marke, neun Welten</h2>
        <p>Vom Web-Tool bis zur IT-Hilfe vor Ort — alle Bereiche meiner Arbeit, in einem ruhigen Gefüge.</p>
      </div>

      <div class="v37-bento">

        {{-- Web-Tools (wide) --}}
        <a href="https://webtools.kotsch.tech" class="v37-card v37-glass v37-wide v37-reveal">
          <span class="v37-shine"></span>
          <div class="v37-card-top">
            <div>
              <h3>Web-Tools</h3>
              <p>734 Tools direkt im Browser — ohne Login, ohne Installation.</p>
            </div>
            <div class="v37-scene"><svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <rect x="8" y="12" width="48" height="40" rx="4"/><path d="M8 22h48"/><circle cx="14" cy="17" r="1.2"/><circle cx="19" cy="17" r="1.2"/>
              <path class="v37-acc" d="M28 38l-4-4 4-4M36 30l4 4-4 4" stroke="currentColor"/>
            </svg></div>
          </div>
          <span class="v37-card-link">Tools öffnen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        {{-- Windows (mid) --}}
        <a href="https://windows.kotsch.tech" class="v37-card v37-glass v37-mid v37-reveal">
          <span class="v37-shine"></span>
          <div class="v37-card-top">
            <div>
              <h3>Windows</h3>
              <p>9 Programme: Cleaner, Commander, Notes, Taskmanager, CodeEditor — Direkt-Download.</p>
            </div>
            <div class="v37-scene"><svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <rect x="10" y="12" width="44" height="40" rx="4"/><path d="M32 12v40M10 32h44"/>
              <rect class="v37-acc" x="34" y="14" width="18" height="16" rx="2" fill="rgba(255,93,46,.12)" stroke="currentColor"/>
            </svg></div>
          </div>
          <span class="v37-card-link">Programme ansehen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        {{-- Hosting (wide) --}}
        <a href="https://hosting.kotsch.tech" class="v37-card v37-glass v37-wide v37-reveal">
          <span class="v37-shine"></span>
          <div class="v37-card-top">
            <div>
              <h3>Hosting</h3>
              <p>Managed Webhosting sowie vServer und VPS — DSGVO-konform betrieben.</p>
            </div>
            <div class="v37-scene"><svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <rect x="12" y="14" width="40" height="12" rx="3"/><rect x="12" y="30" width="40" height="12" rx="3"/>
              <circle class="v37-acc" cx="44" cy="20" r="1.6" fill="currentColor"/><circle class="v37-acc" cx="44" cy="36" r="1.6" fill="currentColor"/>
              <path d="M28 50v-4M36 50v-4M22 50h20"/>
            </svg></div>
          </div>
          <span class="v37-card-link">Hosting entdecken <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        {{-- Shop (mid) --}}
        <a href="https://shop.kotsch.tech" class="v37-card v37-glass v37-mid v37-reveal">
          <span class="v37-shine"></span>
          <div class="v37-card-top">
            <div>
              <h3>Shop</h3>
              <p>Digitale Produkte mit Sofort-Download.</p>
            </div>
            <div class="v37-scene"><svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <path d="M16 22h32l-3 28a3 3 0 0 1-3 3H22a3 3 0 0 1-3-3z"/><path d="M24 22a8 8 0 0 1 16 0"/>
              <path class="v37-acc" d="M32 32v12M27 39l5 5 5-5" stroke="currentColor"/>
            </svg></div>
          </div>
          <span class="v37-card-link">Zum Shop <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        {{-- News (mid) --}}
        <a href="https://news.kotsch.tech" class="v37-card v37-glass v37-mid v37-reveal">
          <span class="v37-shine"></span>
          <div class="v37-card-top">
            <div>
              <h3>News</h3>
              <p>1.412 Ratgeber und Tutorials rund um Technik.</p>
            </div>
            <div class="v37-scene"><svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <rect x="12" y="14" width="40" height="36" rx="3"/><path d="M18 22h16M18 28h16M18 34h16M18 40h10"/>
              <path class="v37-acc" d="M40 24h6v18h-6z" fill="rgba(255,93,46,.1)" stroke="currentColor"/>
            </svg></div>
          </div>
          <span class="v37-card-link">Artikel lesen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        {{-- IT-Hilfe (accent) --}}
        <a href="https://it-hilfe.kotsch.tech" class="v37-card v37-glass v37-accent v37-mid v37-reveal">
          <span class="v37-shine"></span>
          <div class="v37-card-top">
            <div>
              <h3>IT-Hilfe</h3>
              <p>Vor Ort und Remote in der Region Glauchau–Lichtenstein.</p>
            </div>
            <div class="v37-scene"><svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <path class="v37-acc" d="M32 12c-7 0-12 5-12 12 0 9 12 22 12 22s12-13 12-22c0-7-5-12-12-12z" stroke="currentColor"/>
              <circle cx="32" cy="24" r="4"/><path d="M14 54h36" />
            </svg></div>
          </div>
          <span class="v37-badge">keine Lösung = kein Preis</span>
          <span class="v37-card-link">IT-Hilfe anfragen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        {{-- Webdesign (mid) --}}
        <a href="https://webdesign.kotsch.tech" class="v37-card v37-glass v37-mid v37-reveal">
          <span class="v37-shine"></span>
          <div class="v37-card-top">
            <div>
              <h3>Webdesign</h3>
              <p>Studio mit 20 Branchen-Demos für deinen Auftritt.</p>
            </div>
            <div class="v37-scene"><svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <rect x="12" y="14" width="40" height="30" rx="3"/><path d="M12 22h40M18 30h12M18 36h8"/>
              <path class="v37-acc" d="M40 42l8-8 3 3-8 8-4 1z" fill="rgba(255,93,46,.1)" stroke="currentColor"/>
            </svg></div>
          </div>
          <span class="v37-card-link">Demos ansehen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        {{-- Android (small) --}}
        <a href="https://android.kotsch.tech" class="v37-card v37-glass v37-small v37-reveal">
          <span class="v37-shine"></span>
          <span class="v37-status"><span class="v37-dot"></span> in Entwicklung</span>
          <div class="v37-card-top">
            <div>
              <h3>Android</h3>
              <p>Native Apps für Android.</p>
            </div>
            <div class="v37-scene"><svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <path d="M20 30a12 12 0 0 1 24 0z"/><path d="M20 30v14a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3V30"/>
              <path d="M22 22l-3-4M42 22l3-4"/><circle class="v37-acc" cx="27" cy="25" r="1.4" fill="currentColor"/><circle cx="37" cy="25" r="1.4" fill="currentColor"/>
            </svg></div>
          </div>
          <span class="v37-card-link">Ansehen <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

        {{-- iOS & Mac — Verweis aufs Flaggschiff (small), damit alle 9 präsent sind --}}
        <a href="https://ios.kotsch.tech" class="v37-card v37-glass v37-small v37-reveal">
          <span class="v37-shine"></span>
          <div class="v37-card-top">
            <div>
              <h3>iOS &amp; Mac</h3>
              <p>22 Apps im App Store — das Flaggschiff.</p>
            </div>
            <div class="v37-scene"><svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <rect x="22" y="10" width="20" height="38" rx="5"/><path d="M28 14h8"/>
              <rect class="v37-acc" x="16" y="20" width="14" height="22" rx="4" fill="rgba(255,93,46,.1)" stroke="currentColor"/>
            </svg></div>
          </div>
          <span class="v37-card-link">Zum Flaggschiff <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
        </a>

      </div>
    </section>

    {{-- ============ D) KENNZAHLEN ============ --}}
    <section class="v37-section">
      <div class="v37-head v37-reveal">
        <p class="v37-eyebrow">In Zahlen</p>
        <h2>Solide gewachsen</h2>
      </div>
      <div class="v37-stats v37-glass v37-reveal">
        <div class="v37-stat">
          <div class="v37-ring">
            <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="44" fill="none" stroke="rgba(148,163,184,.2)" stroke-width="8"/><circle class="v37-ring-arc" cx="50" cy="50" r="44" fill="none" stroke="url(#v37g)" stroke-width="8" stroke-linecap="round" stroke-dasharray="276" stroke-dashoffset="276"/></svg>
            <div class="v37-ring-num" data-count="22" data-suffix="">0</div>
          </div>
          <span class="v37-stat-label">iOS &amp; Mac Apps</span>
        </div>
        <div class="v37-stat">
          <div class="v37-ring">
            <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="44" fill="none" stroke="rgba(148,163,184,.2)" stroke-width="8"/><circle class="v37-ring-arc" cx="50" cy="50" r="44" fill="none" stroke="url(#v37g)" stroke-width="8" stroke-linecap="round" stroke-dasharray="276" stroke-dashoffset="276"/></svg>
            <div class="v37-ring-num" data-count="9" data-suffix="">0</div>
          </div>
          <span class="v37-stat-label">Windows-Tools</span>
        </div>
        <div class="v37-stat">
          <div class="v37-ring">
            <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="44" fill="none" stroke="rgba(148,163,184,.2)" stroke-width="8"/><circle class="v37-ring-arc" cx="50" cy="50" r="44" fill="none" stroke="url(#v37g)" stroke-width="8" stroke-linecap="round" stroke-dasharray="276" stroke-dashoffset="276"/></svg>
            <div class="v37-ring-num" data-count="734" data-suffix="">0</div>
          </div>
          <span class="v37-stat-label">Web-Tools</span>
        </div>
        <div class="v37-stat">
          <div class="v37-ring">
            <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="44" fill="none" stroke="rgba(148,163,184,.2)" stroke-width="8"/><circle class="v37-ring-arc" cx="50" cy="50" r="44" fill="none" stroke="url(#v37g)" stroke-width="8" stroke-linecap="round" stroke-dasharray="276" stroke-dashoffset="276"/></svg>
            <div class="v37-ring-num" data-count="1412" data-format="de">0</div>
          </div>
          <span class="v37-stat-label">Artikel</span>
        </div>
        <svg width="0" height="0" aria-hidden="true"><defs><linearGradient id="v37g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#2563EB"/><stop offset="1" stop-color="#FF5D2E"/></linearGradient></defs></svg>
      </div>
    </section>

    {{-- ============ E) ÜBER ============ --}}
    <section class="v37-section">
      <div class="v37-about v37-glass v37-reveal">
        <div class="v37-mono" aria-hidden="true"><span>AK</span></div>
        <div>
          <p class="v37-eyebrow">Über Arthur</p>
          <h2>Aus Lichtenstein, für deine Technik</h2>
          <p>Ich bin Arthur Kotsch, Student Digital Engineering aus Lichtenstein in Sachsen. Ich entwickle Apps und Web-Tools, betreibe Hosting und packe bei IT-Problemen mit an — ruhig, gründlich und mit dem Anspruch, dass Technik einfach funktioniert.</p>
        </div>
      </div>
    </section>

    {{-- ============ F) KONTAKT-CTA ============ --}}
    <section class="v37-section">
      <div class="v37-contact v37-glass v37-reveal">
        <p class="v37-eyebrow" style="justify-content:center">Kontakt</p>
        <h2>Projekt, Problem oder Idee?</h2>
        <p>Schreib mir — ob App, Web-Tool, Hosting oder eine konkrete IT-Frage. Ich melde mich persönlich zurück.</p>
        <a href="{{ route('kontakt') }}" class="v37-btn v37-btn-primary">Schreib mir <i class="fas fa-arrow-right v37-arr" aria-hidden="true"></i></a>
        <p class="v37-contact-sub">IT-Hilfe vor Ort in der Region Glauchau–Lichtenstein.</p>
      </div>
    </section>

  </div>
</div>

<script>
(function(){
  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  // ---- Settled Reveal ----
  var reveals = Array.prototype.slice.call(document.querySelectorAll('.v37-reveal'));
  if (reduce || !('IntersectionObserver' in window)){
    reveals.forEach(function(el){ el.classList.add('v37-in'); });
  } else {
    var ro = new IntersectionObserver(function(entries){
      entries.forEach(function(e){
        if(e.isIntersecting){
          var sibs = Array.prototype.slice.call((e.target.parentElement||document).querySelectorAll(':scope > .v37-reveal'));
          var idx = Math.max(0, sibs.indexOf(e.target));
          e.target.style.transitionDelay = (idx*60)+'ms';
          e.target.classList.add('v37-in');
          ro.unobserve(e.target);
        }
      });
    }, { threshold:.12, rootMargin:'0px 0px -8% 0px' });
    reveals.forEach(function(el){ ro.observe(el); });
  }

  // ---- Count-up + Ring ----
  function fmt(n, mode){
    if(mode==='de') return n.toLocaleString('de-DE');
    return String(n);
  }
  function runCount(el){
    var target = parseInt(el.getAttribute('data-count'),10) || 0;
    var mode = el.getAttribute('data-format');
    var ring = el.parentElement && el.parentElement.querySelector('.v37-ring-arc');
    if(reduce){
      el.textContent = fmt(target, mode);
      if(ring) ring.style.strokeDashoffset = '52';
      return;
    }
    var dur = 1300, start = null;
    function step(ts){
      if(start===null) start = ts;
      var p = Math.min(1, (ts-start)/dur);
      var e = 1 - Math.pow(1-p, 3); // easeOutCubic
      el.textContent = fmt(Math.round(target*e), mode);
      if(ring) ring.style.strokeDashoffset = (276 - 224*e).toFixed(1); // ~81% fill
      if(p<1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }
  var nums = document.querySelectorAll('.v37-ring-num');
  if(!('IntersectionObserver' in window)){
    nums.forEach(runCount);
  } else {
    var co = new IntersectionObserver(function(entries){
      entries.forEach(function(e){ if(e.isIntersecting){ runCount(e.target); co.unobserve(e.target); } });
    }, { threshold:.5 });
    nums.forEach(function(el){ co.observe(el); });
  }

  // ---- Dezenter Karten-Tilt + Cursor-Glanz (Desktop, pointer:fine) ----
  if(!reduce && window.matchMedia && window.matchMedia('(pointer:fine)').matches){
    document.querySelectorAll('.v37-card').forEach(function(card){
      card.addEventListener('mousemove', function(ev){
        var r = card.getBoundingClientRect();
        var x = (ev.clientX - r.left)/r.width, y = (ev.clientY - r.top)/r.height;
        card.style.transform = 'perspective(900px) rotateX('+((.5-y)*4).toFixed(2)+'deg) rotateY('+((x-.5)*4).toFixed(2)+'deg) translateY(-6px)';
        card.style.setProperty('--gx', (x*100)+'%');
        card.style.setProperty('--gy', (y*100)+'%');
      });
      card.addEventListener('mouseleave', function(){ card.style.transform = ''; });
    });

    // ---- Dezenter Orbit-Parallax (folgt sanft dem Zeiger) ----
    var orbit = document.querySelector('.v37-orbit');
    var core = document.querySelector('.v37-core');
    if(orbit){
      var raf = null, tx = 0, ty = 0;
      window.addEventListener('mousemove', function(ev){
        var cx = window.innerWidth/2, cy = window.innerHeight/2;
        tx = ((ev.clientX - cx)/cx) * 10;
        ty = ((ev.clientY - cy)/cy) * 10;
        if(!raf){ raf = requestAnimationFrame(apply); }
      }, { passive:true });
      function apply(){
        raf = null;
        orbit.style.transform = 'translate3d('+(tx*0.4).toFixed(2)+'px,'+(ty*0.4).toFixed(2)+'px,0)';
        if(core){ core.style.marginLeft = (tx*0.5).toFixed(2)+'px'; core.style.marginTop = (ty*0.5).toFixed(2)+'px'; }
      }
    }
  }
})();
</script>
@endsection