@extends('layouts.app')

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

.v28-root{
  --v28-canvas:#F6F8FC;
  --v28-tile:#FFFFFF;
  --v28-line:#E4E9F2;
  --v28-muted:#64748B;
  --v28-body:#334155;
  --v28-ink:#0F172A;
  --v28-blue:#2563EB;
  --v28-orange:#FF5D2E;
  --v28-green:#16A34A;
  --v28-amber:#D97706;
  --v28-grad:linear-gradient(90deg,#2563EB,#FF5D2E);
  font-family:'Inter',-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--v28-body);
  background:var(--v28-canvas);
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.v28-root *{box-sizing:border-box;min-width:0;}
.v28-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px);}
.v28-section{padding-block:clamp(20px,3vw,28px);}

.v28-label{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--v28-muted);font-weight:600;margin:0;
}
.v28-mono{
  font-family:'Inter',monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--v28-muted);font-weight:600;
}

/* ---- Cockpit header row ---- */
.v28-top{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  justify-content:space-between;
  padding-block:clamp(28px,5vw,52px) clamp(14px,2.5vw,20px);
}
.v28-brand{margin:0;font-size:clamp(15px,2.4vw,18px);font-weight:700;color:var(--v28-ink);}
.v28-brand span{color:var(--v28-muted);font-weight:500;}
.v28-pill{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--v28-tile);border:1px solid var(--v28-line);
  border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;
  color:var(--v28-ink);box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.v28-pill .v28-date{color:var(--v28-muted);font-weight:500;}
.v28-dot{
  width:9px;height:9px;border-radius:50%;background:var(--v28-green);
  box-shadow:0 0 0 4px rgba(22,163,74,.14);flex:0 0 auto;
}
.v28-dot.v28-live{animation:v28pulse 2.2s ease-in-out infinite;}
.v28-dot.v28-amber{background:var(--v28-amber);box-shadow:0 0 0 4px rgba(217,119,6,.14);}
.v28-dot.v28-blue{background:var(--v28-blue);box-shadow:0 0 0 4px rgba(37,99,235,.14);}
@keyframes v28pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ---- Hero headline ---- */
.v28-hero{
  background:var(--v28-tile);border:1px solid var(--v28-line);border-radius:18px;
  padding:clamp(24px,4vw,40px);box-shadow:0 1px 2px rgba(16,24,40,.04);
  position:relative;overflow:hidden;
}
.v28-hero::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--v28-grad);
}
.v28-h1{
  font-size:clamp(26px,5vw,44px);line-height:1.1;font-weight:800;
  color:var(--v28-ink);margin:0 0 14px;letter-spacing:-.02em;max-width:18ch;
}
.v28-h1 em{font-style:normal;background:var(--v28-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.v28-lead{font-size:clamp(15px,2vw,17px);max-width:60ch;margin:0 0 22px;color:var(--v28-body);}
.v28-cta-row{display:flex;flex-wrap:wrap;gap:12px;}
.v28-btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:10px;padding:12px 22px;font-size:15px;font-weight:600;
  text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.v28-btn-primary{background:var(--v28-blue);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.22);}
.v28-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,99,235,.30);}
.v28-btn-ghost{background:transparent;color:var(--v28-ink);border:1px solid var(--v28-line);}
.v28-btn-ghost:hover{transform:translateY(-2px);border-color:var(--v28-blue);color:var(--v28-blue);}
.v28-btn i{transition:transform .25s ease;}
.v28-btn:hover i{transform:translateX(4px);}

/* ---- Kennzahlen-Leiste ---- */
.v28-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;
}
.v28-stat{
  background:var(--v28-tile);border:1px solid var(--v28-line);border-radius:14px;
  padding:18px 18px 16px;box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.v28-stat .v28-num{
  font-size:clamp(28px,4vw,38px);font-weight:800;color:var(--v28-ink);
  line-height:1;letter-spacing:-.02em;
}
.v28-stat .v28-label{margin:8px 0 12px;}
.v28-minibar{height:6px;border-radius:999px;background:var(--v28-line);overflow:hidden;}
.v28-minibar i{display:block;height:100%;border-radius:999px;background:var(--v28-grad);}

/* ---- Welten Bento grid ---- */
.v28-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:16px;
}
.v28-tile{
  grid-column:span 4;
  background:var(--v28-tile);border:1px solid var(--v28-line);border-radius:16px;
  padding:20px 20px 18px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
  text-decoration:none;color:inherit;
}
.v28-tile::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--v28-blue);transition:width .25s ease;
}
.v28-tile.v28-spot::before{background:var(--v28-orange);}
.v28-tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(37,99,235,.10);}
.v28-tile:hover::before{width:5px;}
.v28-tile:focus-visible{outline:3px solid var(--v28-blue);outline-offset:2px;}
.v28-tile.v28-dim{opacity:.92;}
.v28-tile.v28-w6{grid-column:span 6;}

.v28-thead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.v28-tnum{
  font-size:clamp(30px,4.5vw,46px);font-weight:800;color:var(--v28-ink);
  line-height:1;letter-spacing:-.02em;
}
.v28-ttitle{font-size:20px;font-weight:700;color:var(--v28-ink);line-height:1.2;margin:0;}
.v28-tclaim{font-size:14px;color:var(--v28-body);margin:8px 0 0;}
.v28-tbody{flex:1 1 auto;margin-bottom:16px;}
.v28-tfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.v28-arrow{
  font-size:13px;font-weight:600;color:var(--v28-blue);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.v28-spot .v28-arrow{color:var(--v28-orange);}
.v28-arrow i{transition:transform .25s ease;}
.v28-tile:hover .v28-arrow i{transform:translateX(4px);}

/* tile data viz */
.v28-bar{height:8px;border-radius:999px;background:var(--v28-line);overflow:hidden;flex:1 1 auto;max-width:130px;}
.v28-bar i{display:block;height:100%;border-radius:999px;background:var(--v28-grad);width:62%;transition:width .6s ease;}
.v28-tile:hover .v28-bar i{width:88%;}
.v28-bar.v28-bar-blue i{background:var(--v28-blue);}

/* spark bars */
.v28-spark{display:flex;align-items:flex-end;gap:3px;height:30px;}
.v28-spark span{width:6px;border-radius:3px 3px 0 0;background:var(--v28-blue);opacity:.55;transition:transform .6s ease,opacity .25s ease;transform-origin:bottom;transform:scaleY(.5);}
.v28-tile:hover .v28-spark span{opacity:.9;transform:scaleY(1);}

/* ring */
.v28-ring{width:64px;height:64px;flex:0 0 auto;}
.v28-ring circle{fill:none;stroke-width:8;}
.v28-ring .v28-ring-bg{stroke:var(--v28-line);}
.v28-ring .v28-ring-fg{
  stroke:url(#v28grad);stroke-linecap:round;
  stroke-dasharray:163;stroke-dashoffset:163;
  transform:rotate(-90deg);transform-origin:center;
  transition:stroke-dashoffset .6s ease;
}
.v28-tile:hover .v28-ring .v28-ring-fg{stroke-dashoffset:48;}

/* mini tags */
.v28-tags{display:flex;flex-wrap:wrap;gap:6px;}
.v28-tag{
  font-size:11px;font-weight:600;color:var(--v28-body);
  background:var(--v28-canvas);border:1px solid var(--v28-line);
  border-radius:6px;padding:3px 8px;
}
/* badge */
.v28-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  background:rgba(37,99,235,.08);color:var(--v28-blue);
  border-radius:6px;padding:5px 9px;
}
.v28-spot .v28-badge{background:rgba(255,93,46,.10);color:var(--v28-orange);}
.v28-pin{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--v28-muted);font-weight:500;}

/* uptime deco bars */
.v28-uptime{display:flex;align-items:flex-end;gap:3px;height:24px;}
.v28-uptime span{width:5px;height:100%;border-radius:2px;background:var(--v28-green);opacity:.30;transition:opacity .6s ease;}
.v28-tile:hover .v28-uptime span{opacity:.8;}

/* ---- Über block ---- */
.v28-about{
  background:var(--v28-tile);border:1px solid var(--v28-line);border-radius:16px;
  padding:clamp(22px,3.5vw,34px);box-shadow:0 1px 2px rgba(16,24,40,.04);
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(20px,3vw,40px);align-items:center;
}
.v28-about h2{font-size:clamp(20px,3vw,26px);font-weight:800;color:var(--v28-ink);margin:8px 0 12px;letter-spacing:-.01em;}
.v28-about p{margin:0;font-size:15px;}
.v28-about-meta{display:grid;gap:12px;}
.v28-meta-row{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--v28-body);}
.v28-meta-row i{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--v28-canvas);border:1px solid var(--v28-line);color:var(--v28-blue);flex:0 0 auto;}

/* ---- Kontakt CTA broadband tile ---- */
.v28-contact{
  background:linear-gradient(120deg,#0F172A,#1e293b);
  border-radius:18px;padding:clamp(26px,4vw,44px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  position:relative;overflow:hidden;
}
.v28-contact::after{
  content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,93,46,.28),transparent 70%);pointer-events:none;
}
.v28-contact .v28-label{color:#94a3b8;}
.v28-contact h2{font-size:clamp(22px,3.4vw,32px);font-weight:800;color:#fff;margin:8px 0 6px;letter-spacing:-.01em;}
.v28-contact p{margin:0;color:#cbd5e1;font-size:15px;max-width:48ch;}
.v28-contact-cta{position:relative;z-index:1;}
.v28-btn-light{background:#fff;color:#0F172A;box-shadow:0 8px 22px rgba(0,0,0,.28);}
.v28-btn-light:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.36);}

/* ---- Responsive ---- */
@media (max-width:720px){
  .v28-tile,.v28-tile.v28-w6{grid-column:span 12;}
  .v28-about{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .v28-root *,.v28-tile,.v28-btn,.v28-arrow i,.v28-bar i,.v28-spark span,.v28-ring .v28-ring-fg,.v28-uptime span,.v28-dot{
    transition:none!important;animation:none!important;
  }
  .v28-tile:hover{transform:none;}
  .v28-tile:hover .v28-bar i,.v28-tile:hover .v28-ring .v28-ring-fg,.v28-tile:hover .v28-spark span{
    width:88%;stroke-dashoffset:48;transform:none;
  }
}
</style>

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

    {{-- 1. Cockpit-Header-Zeile --}}
    <header class="v28-top">
      <p class="v28-brand">Arthur Kotsch <span>— Digital Engineering, Lichtenstein/Sa.</span></p>
      <span class="v28-pill">
        <span class="v28-dot v28-live" aria-hidden="true"></span>
        Alle Systeme aktiv
        <span class="v28-date">· 23.06.2026</span>
      </span>
    </header>

    {{-- Hero --}}
    <section class="v28-section">
      <div class="v28-hero">
        <h1 class="v28-h1">Ein Cockpit für <em>neun digitale Welten.</em></h1>
        <p class="v28-lead">Apps, Web-Tools, Hosting, News und IT-Hilfe — gebaut und betrieben von einem Entwickler aus Sachsen. Hier laufen alle Module auf einen Blick zusammen.</p>
        <div class="v28-cta-row">
          <a class="v28-btn v28-btn-primary" href="/kontakt">Projekt besprechen <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
          <a class="v28-btn v28-btn-ghost" href="#v28-welten">Welten ansehen</a>
        </div>
      </div>
    </section>

    {{-- 2. Kennzahlen-Leiste --}}
    <section class="v28-section" aria-label="Kennzahlen">
      <div class="v28-stats">
        <div class="v28-stat">
          <div class="v28-num">22</div>
          <p class="v28-label">iOS &amp; Mac Apps</p>
          <div class="v28-minibar"><i style="width:80%"></i></div>
        </div>
        <div class="v28-stat">
          <div class="v28-num">9</div>
          <p class="v28-label">Windows-Tools</p>
          <div class="v28-minibar"><i style="width:42%"></i></div>
        </div>
        <div class="v28-stat">
          <div class="v28-num">734</div>
          <p class="v28-label">Web-Tools</p>
          <div class="v28-minibar"><i style="width:96%"></i></div>
        </div>
        <div class="v28-stat">
          <div class="v28-num">1.412</div>
          <p class="v28-label">Artikel</p>
          <div class="v28-minibar"><i style="width:88%"></i></div>
        </div>
      </div>
    </section>

    {{-- shared SVG gradient def for rings --}}
    <svg width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute">
      <defs>
        <linearGradient id="v28grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#2563EB"/>
          <stop offset="100%" stop-color="#FF5D2E"/>
        </linearGradient>
      </defs>
    </svg>

    {{-- 3. Welten-Raster (Bento) --}}
    <section class="v28-section" id="v28-welten" aria-label="Die neun Welten">
      <div class="v28-grid">

        {{-- iOS — span 6, Spotlight, Ring --}}
        <a class="v28-tile v28-w6 v28-spot" href="https://ios.kotsch.tech">
          <div class="v28-thead">
            <span class="v28-mono">Modul 01 / iOS</span>
            <span class="v28-dot v28-live" aria-hidden="true"></span>
          </div>
          <div class="v28-tbody" style="display:flex;gap:18px;align-items:center;">
            <svg class="v28-ring" viewBox="0 0 64 64" aria-hidden="true">
              <circle class="v28-ring-bg" cx="32" cy="32" r="26"/>
              <circle class="v28-ring-fg" cx="32" cy="32" r="26"/>
            </svg>
            <div>
              <div class="v28-tnum">22</div>
              <p class="v28-tclaim"><strong>iOS &amp; Mac Apps</strong> — im App Store für iPhone, iPad und Mac, mit regelmäßigen Updates.</p>
            </div>
          </div>
          <div class="v28-tfoot">
            <span class="v28-mono">iPhone · iPad · Mac</span>
            <span class="v28-arrow">ios.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
          </div>
        </a>

        {{-- Web-Tools — span 6, Spotlight, breite Bar --}}
        <a class="v28-tile v28-w6 v28-spot" href="https://webtools.kotsch.tech">
          <div class="v28-thead">
            <span class="v28-mono">Modul 02 / Web-Tools</span>
            <span class="v28-dot v28-live" aria-hidden="true"></span>
          </div>
          <div class="v28-tbody">
            <div class="v28-tnum">734</div>
            <p class="v28-tclaim"><strong>Web-Tools</strong> — direkt im Browser nutzbar, ganz ohne Login oder Installation.</p>
          </div>
          <div class="v28-tfoot">
            <span class="v28-bar"><i style="width:96%"></i></span>
            <span class="v28-arrow">webtools.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
          </div>
        </a>

        {{-- Windows — span 4, Mini-Tags --}}
        <a class="v28-tile" href="https://windows.kotsch.tech">
          <div class="v28-thead">
            <span class="v28-mono">Modul 03 / Windows</span>
            <span class="v28-dot v28-live" aria-hidden="true"></span>
          </div>
          <div class="v28-tbody">
            <div class="v28-tnum">9</div>
            <p class="v28-tclaim"><strong>Programme</strong> als Direkt-Download.</p>
            <div class="v28-tags" style="margin-top:12px;">
              <span class="v28-tag">Cleaner</span>
              <span class="v28-tag">Commander</span>
              <span class="v28-tag">Notes</span>
              <span class="v28-tag">Taskmanager</span>
              <span class="v28-tag">CodeEditor</span>
            </div>
          </div>
          <div class="v28-tfoot">
            <span class="v28-mono">Direkt-Download</span>
            <span class="v28-arrow">windows.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
          </div>
        </a>

        {{-- News — span 4, Sparkline --}}
        <a class="v28-tile" href="https://news.kotsch.tech">
          <div class="v28-thead">
            <span class="v28-mono">Modul 04 / News</span>
            <span class="v28-dot v28-live" aria-hidden="true"></span>
          </div>
          <div class="v28-tbody">
            <div class="v28-tnum">1.412</div>
            <p class="v28-tclaim"><strong>Ratgeber &amp; Tutorials</strong> rund um Technik und Software.</p>
          </div>
          <div class="v28-tfoot">
            <span class="v28-spark" aria-hidden="true">
              <span style="height:40%"></span><span style="height:62%"></span><span style="height:48%"></span>
              <span style="height:80%"></span><span style="height:58%"></span><span style="height:92%"></span>
              <span style="height:70%"></span><span style="height:100%"></span>
            </span>
            <span class="v28-arrow">news.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
          </div>
        </a>

        {{-- IT-Hilfe — span 4, Spotlight, Region-Pin --}}
        <a class="v28-tile v28-spot" href="https://it-hilfe.kotsch.tech">
          <div class="v28-thead">
            <span class="v28-mono">Modul 05 / IT-Hilfe</span>
            <span class="v28-dot v28-live" aria-hidden="true"></span>
          </div>
          <div class="v28-tbody">
            <p class="v28-ttitle">„keine Lösung = kein Preis"</p>
            <p class="v28-tclaim">Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein.</p>
            <p class="v28-pin" style="margin-top:12px;"><i class="fa-solid fa-location-dot" aria-hidden="true"></i> Region Glauchau–Lichtenstein</p>
          </div>
          <div class="v28-tfoot">
            <span class="v28-mono">Vor Ort · Remote</span>
            <span class="v28-arrow">it-hilfe.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
          </div>
        </a>

        {{-- Android — span 4, in Entwicklung, gedimmt --}}
        <a class="v28-tile v28-dim" href="https://android.kotsch.tech">
          <div class="v28-thead">
            <span class="v28-mono">Modul 06 / Android</span>
            <span class="v28-dot v28-amber" aria-hidden="true"></span>
          </div>
          <div class="v28-tbody">
            <p class="v28-ttitle">Native Apps</p>
            <p class="v28-tclaim">In Entwicklung — die nächste Plattform wird vorbereitet.</p>
          </div>
          <div class="v28-tfoot">
            <span class="v28-mono" style="color:var(--v28-amber)">In Entwicklung</span>
            <span class="v28-arrow">android.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
          </div>
        </a>

        {{-- Shop — span 4, Badge --}}
        <a class="v28-tile" href="https://shop.kotsch.tech">
          <div class="v28-thead">
            <span class="v28-mono">Modul 07 / Shop</span>
            <span class="v28-dot v28-live" aria-hidden="true"></span>
          </div>
          <div class="v28-tbody">
            <p class="v28-ttitle">Digitale Produkte</p>
            <p class="v28-tclaim">Kaufen und sofort loslegen.</p>
            <span class="v28-badge" style="margin-top:12px;"><i class="fa-solid fa-bolt" aria-hidden="true"></i> Sofort-Download</span>
          </div>
          <div class="v28-tfoot">
            <span class="v28-mono">Digital</span>
            <span class="v28-arrow">shop.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
          </div>
        </a>

        {{-- Hosting — span 4, DSGVO-Badge + Uptime-Deco --}}
        <a class="v28-tile" href="https://hosting.kotsch.tech">
          <div class="v28-thead">
            <span class="v28-mono">Modul 08 / Hosting</span>
            <span class="v28-dot v28-live" aria-hidden="true"></span>
          </div>
          <div class="v28-tbody">
            <p class="v28-ttitle">Managed Webhosting</p>
            <p class="v28-tclaim">vServer &amp; VPS, betrieben in Deutschland.</p>
            <span class="v28-badge" style="margin-top:12px;"><i class="fa-solid fa-shield-halved" aria-hidden="true"></i> DSGVO-konform</span>
          </div>
          <div class="v28-tfoot">
            <span class="v28-uptime" aria-hidden="true">
              <span></span><span></span><span></span><span></span><span></span>
              <span></span><span></span><span></span><span></span><span></span>
            </span>
            <span class="v28-arrow">hosting.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
          </div>
        </a>

        {{-- Webdesign — span 4, Branchen-Demos-Badge --}}
        <a class="v28-tile" href="https://webdesign.kotsch.tech">
          <div class="v28-thead">
            <span class="v28-mono">Modul 09 / Webdesign</span>
            <span class="v28-dot v28-live" aria-hidden="true"></span>
          </div>
          <div class="v28-tbody">
            <p class="v28-ttitle">Studio</p>
            <p class="v28-tclaim">Webdesign aus einer Hand, von Konzept bis Launch.</p>
            <span class="v28-badge" style="margin-top:12px;"><i class="fa-solid fa-table-cells-large" aria-hidden="true"></i> 20 Branchen-Demos</span>
          </div>
          <div class="v28-tfoot">
            <span class="v28-bar v28-bar-blue"><i style="width:70%"></i></span>
            <span class="v28-arrow">webdesign.kotsch.tech <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
          </div>
        </a>

      </div>
    </section>

    {{-- Über-Block --}}
    <section class="v28-section">
      <div class="v28-about">
        <div>
          <p class="v28-label">Über</p>
          <h2>Ein Entwickler, ein durchgängiges System.</h2>
          <p>Arthur Kotsch ist Student im Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Von nativen Apps über Web-Tools bis zu Hosting und IT-Hilfe entsteht alles aus einer Hand — verbunden zu einem Cockpit, das jede Welt überschaubar hält.</p>
        </div>
        <div class="v28-about-meta">
          <div class="v28-meta-row"><i class="fa-solid fa-graduation-cap" aria-hidden="true"></i> Student Digital Engineering</div>
          <div class="v28-meta-row"><i class="fa-solid fa-location-dot" aria-hidden="true"></i> Lichtenstein, Sachsen</div>
          <div class="v28-meta-row"><i class="fa-solid fa-layer-group" aria-hidden="true"></i> 9 Plattformen, ein Maßstab</div>
        </div>
      </div>
    </section>

    {{-- 4. Footer-Übergangszeile: Kontakt-CTA Breitband-Tile --}}
    <section class="v28-section">
      <div class="v28-contact">
        <div>
          <p class="v28-label">Kontakt</p>
          <h2>Bereit für Ihr nächstes Modul?</h2>
          <p>Schreiben Sie kurz, woran Sie arbeiten — App, Tool, Website oder IT-Frage. Antwort meist am selben Tag.</p>
        </div>
        <div class="v28-contact-cta">
          <a class="v28-btn v28-btn-light" href="/kontakt">Zu /kontakt <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
      </div>
    </section>

  </div>
</div>
@endsection