@extends('layouts.app')

@section('title', 'Werkbank — Neun Welten, ein Werkzeugkasten | Arthur Kotsch · KOTSCH.TECH')
@section('meta_description', 'Arthur Kotsch — Student Digital Engineering aus Lichtenstein (Sachsen). iOS- & Mac-Apps, Windows-Programme, Web-Tools, Shop, Hosting, News, IT-Hilfe und Webdesign. Alles selbst entwickelt, regelmäßig gepflegt.')

@section('content')
<style>
    /* ════════════════════════════════════════════════════════════════
       Demo #33 — „Werkbank" (Bespoke CSS-Illustration Mosaik)
       Präfix v33- · nur Inhaltsbereich · Header/Footer vom Layout
    ════════════════════════════════════════════════════════════════ */
    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

    .v33-root {
        --ink:        #0E1525;
        --ink-soft:   #44506A;
        --mute:       #7A859C;
        --paper:      #FFFFFF;
        --paper-warm: #FBFAF7;
        --line:       #E7E9F0;
        --blue:       #2563EB;
        --blue-deep:  #1A48B8;
        --blue-wash:  #EEF3FF;
        --orange:     #FF5D2E;
        --orange-wash:#FFF1EC;
        --rest:  0 1px 2px rgba(14,21,37,.04), 0 8px 24px -12px rgba(14,21,37,.12);
        --lift:  0 4px 10px rgba(14,21,37,.06), 0 28px 56px -20px rgba(14,21,37,.26);
        --glow-blue:   0 18px 44px -18px rgba(37,99,235,.4);
        --glow-orange: 0 18px 44px -18px rgba(255,93,46,.38);
        --ease:  cubic-bezier(.22,.61,.36,1);

        --disp: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
        --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
        --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

        position: relative;
        font-family: var(--text);
        color: var(--ink-soft);
        background: var(--paper-warm);
        background-image:
            radial-gradient(900px 520px at 82% -6%, var(--blue-wash) 0%, transparent 60%),
            radial-gradient(720px 480px at 4% 102%, var(--orange-wash) 0%, transparent 58%),
            radial-gradient(circle at 1px 1px, rgba(14,21,37,.045) 1px, transparent 0);
        background-size: 100% 100%, 100% 100%, 26px 26px;
        line-height: 1.6;
        overflow-x: clip;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }
    .v33-root ::selection { background: color-mix(in srgb, var(--blue) 22%, transparent); color: var(--ink); }

    .v33-root *, .v33-root *::before, .v33-root *::after { box-sizing: border-box; }

    .v33-wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 clamp(1rem, 4vw, 2.4rem);
    }

    /* ── Typografie-Bausteine ── */
    .v33-kicker {
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--orange);
        margin: 0 0 1.1rem;
        display: inline-flex;
        align-items: center;
        gap: .55rem;
    }
    .v33-kicker::before {
        content: "";
        width: 6px; height: 6px;
        border-radius: 999px;
        background: var(--orange);
        box-shadow: 0 0 0 4px var(--orange-wash), 0 0 10px rgba(255,93,46,.5);
    }
    .v33-kicker::after {
        content: "";
        width: 22px; height: 1px;
        background: linear-gradient(90deg, var(--orange), transparent);
        opacity: .7;
    }

    .v33-root h1, .v33-root h2, .v33-root h3 {
        font-family: var(--disp);
        color: var(--ink);
        font-weight: 600;
        letter-spacing: -.02em;
        line-height: 1.05;
    }

    .v33-mono { font-family: var(--mono); }

    /* ── Reveal-Grundzustand (settled) ── */
    .v33-reveal {
        opacity: 0;
        transform: translateY(20px) scale(.985);
        transition: opacity .8s var(--ease), transform .8s var(--ease);
        transition-delay: var(--v33-delay, 0s);
        will-change: opacity, transform;
    }
    .v33-reveal.v33-in { opacity: 1; transform: none; }

    /* ════════ A. HERO ════════ */
    .v33-hero {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(2.5rem, 5vw, 4rem);
        align-items: center;
        padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    }
    @media (min-width: 1024px) {
        .v33-hero { grid-template-columns: 7fr 5fr; }
    }
    .v33-hero h1 {
        font-size: clamp(2.4rem, 6vw, 4.6rem);
        font-weight: 600;
        letter-spacing: -.03em;
        line-height: .99;
        color: var(--ink);
        margin: 0 0 1.2rem;
        max-width: 16ch;
    }
    .v33-hero h1 em {
        font-style: normal;
        position: relative;
        background: linear-gradient(115deg, var(--blue) 10%, var(--blue-deep) 60%, var(--orange) 130%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
    .v33-hero h1 em::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: -.06em;
        height: .09em;
        background: linear-gradient(90deg, var(--blue), var(--orange));
        border-radius: 999px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 1.1s var(--ease) .5s;
    }
    .v33-hero .v33-in h1 em::after,
    .v33-reveal.v33-in h1 em::after { transform: scaleX(1); }
    .v33-lede {
        font-size: clamp(1.02rem, 1.4vw, 1.18rem);
        color: var(--ink-soft);
        max-width: 56ch;
        margin: 0 0 2rem;
    }
    .v33-cta-row {
        display: flex;
        flex-wrap: wrap;
        gap: .85rem;
        margin-bottom: 2.2rem;
    }
    .v33-btn {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        font-family: var(--text);
        font-weight: 600;
        font-size: .98rem;
        padding: .85rem 1.5rem;
        border-radius: 12px;
        text-decoration: none;
        border: 1px solid transparent;
        cursor: pointer;
        transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    }
    .v33-btn-primary {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, var(--blue), var(--blue-deep));
        color: #fff;
        box-shadow: 0 12px 26px -12px rgba(37,99,235,.6);
    }
    .v33-btn-primary::after {
        content: "";
        position: absolute; top: 0; bottom: 0; left: -60%;
        width: 45%;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
        transform: skewX(-18deg);
        transition: left .6s var(--ease);
        pointer-events: none;
    }
    .v33-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(37,99,235,.7); }
    .v33-btn-primary:hover::after { left: 130%; }
    .v33-btn-ghost {
        background: var(--paper);
        color: var(--ink);
        border-color: var(--line);
    }
    .v33-btn-ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
    .v33-btn svg { transition: transform .2s ease; }
    .v33-btn:hover svg { transform: translateX(3px); }

    .v33-statbar {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem 1.2rem;
        font-family: var(--mono);
        font-size: clamp(.72rem, 1.1vw, .82rem);
        color: var(--mute);
        padding-top: 1.4rem;
        border-top: 1px solid var(--line);
        max-width: 56ch;
    }
    .v33-statbar b { color: var(--ink); font-weight: 700; }
    .v33-statbar span { white-space: nowrap; }

    /* Hero-Szene (isometrische Werkbank) */
    .v33-scene {
        position: relative;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        filter: drop-shadow(0 30px 50px rgba(14,21,37,.12));
    }
    .v33-scene svg { width: 100%; height: auto; display: block; }
    .v33-iso-layer { transition: transform .3s cubic-bezier(.22,.61,.36,1); }

    /* Pulsierender Hotspot */
    .v33-pulse { transform-box: fill-box; transform-origin: center; }
    @keyframes v33-pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50%      { transform: scale(1.18); opacity: .75; }
    }
    @keyframes v33-ring {
        0%   { transform: scale(.7); opacity: .55; }
        80%, 100% { transform: scale(2.2); opacity: 0; }
    }
    .v33-pulse-dot  { animation: v33-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
    .v33-pulse-ring { animation: v33-ring 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }

    @keyframes v33-float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    @keyframes v33-float2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
    .v33-float  { animation: v33-float 5s ease-in-out infinite; }
    .v33-float2 { animation: v33-float2 6.5s ease-in-out infinite; }

    /* ════════ Sektions-Layout ════════ */
    .v33-section { padding: clamp(3rem, 9vw, 6.5rem) 0; }
    .v33-section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
    .v33-section-head h2 {
        font-size: clamp(1.7rem, 3.6vw, 2.8rem);
        margin: 0 0 .8rem;
    }
    .v33-section-head p { font-size: clamp(1rem, 1.3vw, 1.1rem); max-width: 56ch; margin: 0; }

    /* ════════ B. FLAGGSCHIFF-SPOTLIGHT ════════ */
    .v33-flag {
        position: relative;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 26px;
        box-shadow: var(--lift);
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        transition: transform .4s var(--ease), box-shadow .4s var(--ease);
    }
    .v33-flag::before {
        content: "";
        position: absolute; inset: 0;
        border-radius: 26px;
        padding: 1px;
        background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 55%, transparent), transparent 40%, color-mix(in srgb, var(--orange) 45%, transparent));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        opacity: .8;
    }
    @media (pointer: fine) {
        .v33-flag:hover { transform: translateY(-3px); box-shadow: var(--glow-blue), var(--lift); }
    }
    @media (min-width: 880px) {
        .v33-flag { grid-template-columns: 5fr 6fr; }
    }
    .v33-flag-art {
        background: var(--blue-wash);
        background-image: radial-gradient(circle at 1px 1px, rgba(37,99,235,.10) 1px, transparent 0);
        background-size: 22px 22px;
        padding: clamp(2rem, 5vw, 3.5rem);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 280px;
    }
    .v33-flag-art svg { width: 100%; max-width: 320px; height: auto; }
    .v33-flag-stack { transform-box: fill-box; transform-origin: center; animation: v33-float 6s ease-in-out infinite; }
    .v33-flag-body { padding: clamp(1.8rem, 4vw, 3rem); }
    .v33-flag-body h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin: 0 0 .9rem; }
    .v33-flag-body p { margin: 0 0 1.4rem; max-width: 44ch; }
    .v33-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
    .v33-pill {
        font-family: var(--mono);
        font-size: .72rem;
        color: var(--ink-soft);
        background: var(--paper-warm);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: .35rem .85rem;
    }
    .v33-link {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 600;
        color: var(--blue);
        text-decoration: none;
        font-size: 1rem;
    }
    .v33-link .v33-arrow { transition: transform .2s ease, color .2s ease; color: var(--orange); }
    .v33-link:hover .v33-arrow { transform: translateX(4px); }

    /* ════════ C. MOSAIK ════════ */
    .v33-mosaic {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1rem, 2vw, 1.4rem);
    }
    @media (min-width: 640px) {
        .v33-mosaic { grid-template-columns: repeat(6, 1fr); }
    }
    @media (min-width: 1024px) {
        .v33-mosaic { grid-template-columns: repeat(12, 1fr); }
    }

    .v33-tile {
        position: relative;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 22px;
        box-shadow: var(--rest);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-width: 0;
        transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
    }
    @media (pointer: fine) {
        .v33-tile:hover { transform: translateY(-4px); box-shadow: var(--lift); border-color: color-mix(in srgb, var(--blue) 25%, var(--line)); }
    }
    .v33-tile-dev { border-style: dashed; border-color: color-mix(in srgb, var(--orange) 45%, var(--line)); }

    /* Span-Choreografie (Desktop, 12-col) */
    @media (min-width: 1024px) {
        .v33-t-ios     { grid-column: span 5; grid-row: span 2; }
        .v33-t-web     { grid-column: span 7; }
        .v33-t-win     { grid-column: span 4; }
        .v33-t-android { grid-column: span 4; }
        .v33-t-shop    { grid-column: span 4; }
        .v33-t-host    { grid-column: span 6; }
        .v33-t-news    { grid-column: span 3; }
        .v33-t-it      { grid-column: span 3; }
        .v33-t-webdes  { grid-column: span 12; }
    }
    /* Tablet 6-col */
    @media (min-width: 640px) and (max-width: 1023px) {
        .v33-t-ios     { grid-column: span 6; }
        .v33-t-web     { grid-column: span 6; }
        .v33-t-win     { grid-column: span 3; }
        .v33-t-android { grid-column: span 3; }
        .v33-t-shop    { grid-column: span 3; }
        .v33-t-host    { grid-column: span 3; }
        .v33-t-news    { grid-column: span 3; }
        .v33-t-it      { grid-column: span 3; }
        .v33-t-webdes  { grid-column: span 6; }
    }

    /* Illustrations-Bühne */
    .v33-stage {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--blue) 12%, var(--blue-wash)) 0%, var(--blue-wash) 60%),
            var(--blue-wash);
        background-image:
            radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--blue) 12%, transparent) 0%, transparent 60%),
            radial-gradient(circle at 1px 1px, rgba(37,99,235,.08) 1px, transparent 0);
        background-size: 100% 100%, 18px 18px;
        height: 150px;
        border-bottom: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
    }
    .v33-stage::after {
        content: "";
        position: absolute; left: 0; right: 0; top: 0; height: 40%;
        background: linear-gradient(180deg, rgba(255,255,255,.55), transparent);
        pointer-events: none;
    }
    .v33-stage-warm {
        background:
            radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--orange) 12%, var(--orange-wash)) 0%, var(--orange-wash) 60%),
            var(--orange-wash);
        background-image:
            radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--orange) 12%, transparent) 0%, transparent 60%),
            radial-gradient(circle at 1px 1px, rgba(255,93,46,.10) 1px, transparent 0);
        border-bottom-color: color-mix(in srgb, var(--orange) 14%, var(--line));
    }
    .v33-stage-tall { height: 230px; }
    .v33-stage-wide { height: 170px; }
    .v33-stage svg { width: auto; height: 76%; max-width: 88%; display: block; filter: drop-shadow(0 8px 14px rgba(14,21,37,.10)); }
    .v33-stage-art { transition: transform .4s var(--ease); position: relative; z-index: 1; }
    @media (pointer: fine) {
        .v33-tile:hover .v33-stage-art { transform: scale(1.05); }
    }

    @media (max-width: 639px) {
        .v33-stage, .v33-stage-tall, .v33-stage-wide { height: 130px; }
    }

    .v33-tile-body {
        padding: clamp(1.1rem, 2vw, 1.4rem);
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }
    .v33-tile-body h3 {
        font-size: clamp(1.2rem, 2vw, 1.5rem);
        margin: 0 0 .5rem;
    }
    .v33-tile-body p {
        margin: 0 0 1.2rem;
        font-size: .96rem;
        color: var(--ink-soft);
        flex: 1;
    }
    .v33-meta-chip {
        position: absolute;
        top: 12px; right: 12px;
        font-family: var(--mono);
        font-size: .74rem;
        font-weight: 700;
        color: var(--blue);
        background: rgba(255,255,255,.92);
        border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
        border-radius: 999px;
        padding: .2rem .7rem;
        z-index: 3;
        backdrop-filter: blur(4px);
        box-shadow: 0 4px 12px -6px rgba(37,99,235,.4);
        transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    }
    @media (pointer: fine) {
        .v33-tile:hover .v33-meta-chip { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 18px -6px rgba(37,99,235,.5); }
    }
    .v33-badge-dev {
        position: absolute;
        top: 12px; left: 12px;
        font-family: var(--mono);
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--orange);
        background: rgba(255,255,255,.92);
        border: 1px dashed color-mix(in srgb, var(--orange) 55%, transparent);
        border-radius: 999px;
        padding: .2rem .7rem;
        z-index: 2;
    }
    .v33-open {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        font-weight: 600;
        font-size: .95rem;
        color: var(--ink);
        text-decoration: none;
        align-self: flex-start;
    }
    .v33-open .v33-arrow { transition: transform .2s ease, color .2s ease; color: var(--ink-soft); }
    .v33-tile:hover .v33-open .v33-arrow,
    .v33-open:hover .v33-arrow { transform: translateX(4px); color: var(--orange); }
    .v33-open:hover { color: var(--blue); }

    /* Webdesign-Banner-Sonderlayout */
    .v33-banner-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1.2rem, 3vw, 2rem);
        align-items: center;
        padding: clamp(1.4rem, 3vw, 2rem);
    }
    @media (min-width: 760px) {
        .v33-banner-inner { grid-template-columns: 1fr 1.1fr; }
    }
    .v33-banner-text h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0 0 .6rem; }
    .v33-banner-text p { margin: 0 0 1.1rem; max-width: 40ch; }
    .v33-thumbs {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: 6px;
    }
    .v33-thumb {
        aspect-ratio: 3 / 4;
        border-radius: 5px;
        border: 1px solid var(--line);
        background: var(--paper-warm);
        position: relative;
        overflow: hidden;
        transition: transform .25s ease, border-color .25s ease;
    }
    .v33-thumb::before {
        content: "";
        position: absolute; left: 0; right: 0; top: 0; height: 28%;
        background: linear-gradient(135deg, var(--blue), var(--blue-deep));
        opacity: .85;
    }
    .v33-thumb:nth-child(3n)::before { background: linear-gradient(135deg, var(--orange), #ff8a5e); }
    .v33-thumb::after {
        content: "";
        position: absolute; left: 14%; right: 14%; bottom: 18%; top: 42%;
        background:
            linear-gradient(var(--line),var(--line)) 0 0/100% 2px no-repeat,
            linear-gradient(var(--line),var(--line)) 0 50%/70% 2px no-repeat,
            linear-gradient(var(--line),var(--line)) 0 100%/85% 2px no-repeat;
    }
    @media (pointer: fine) {
        .v33-thumb:hover { transform: translateY(-3px); border-color: var(--blue); }
    }
    @media (max-width: 520px) {
        .v33-thumbs { grid-template-columns: repeat(5, 1fr); }
    }

    /* ════════ D. KENNZAHLEN ════════ */
    .v33-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.2rem, 3vw, 2.4rem);
    }
    @media (min-width: 860px) { .v33-stats { grid-template-columns: repeat(4, 1fr); } }
    .v33-stat {
        text-align: center;
        padding: clamp(1.2rem, 2.5vw, 1.8rem) 1rem;
        border-radius: 22px;
        border: 1px solid transparent;
        transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
    }
    @media (pointer: fine) {
        .v33-stat:hover {
            transform: translateY(-4px);
            background: var(--paper);
            border-color: color-mix(in srgb, var(--blue) 22%, var(--line));
            box-shadow: var(--lift);
        }
    }
    .v33-ring-wrap { position: relative; width: clamp(120px, 18vw, 150px); margin: 0 auto .9rem; }
    .v33-ring-wrap svg { width: 100%; height: auto; transform: rotate(-90deg); }
    .v33-ring-track { fill: none; stroke: var(--line); stroke-width: 7; }
    .v33-ring-fill {
        fill: none;
        stroke: url(#v33-ring-grad);
        stroke-width: 7;
        stroke-linecap: round;
        filter: drop-shadow(0 2px 6px rgba(37,99,235,.35));
        transition: stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1);
    }
    .v33-ring-num {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--disp);
        font-weight: 600;
        font-size: clamp(1.5rem, 3vw, 2rem);
        color: var(--ink);
        letter-spacing: -.02em;
    }
    .v33-stat-label {
        font-family: var(--mono);
        font-size: .78rem;
        color: var(--mute);
        text-transform: uppercase;
        letter-spacing: .08em;
        line-height: 1.4;
    }

    /* ════════ E. ÜBER ════════ */
    .v33-about {
        max-width: 64ch;
        margin: 0 auto;
        text-align: center;
    }
    .v33-about h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 1.2rem; }
    .v33-about p { font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--ink-soft); margin: 0 auto 1rem; max-width: 58ch; }
    .v33-sig { margin-top: 2rem; }
    .v33-sig svg { width: 180px; height: auto; }
    @keyframes v33-draw { to { stroke-dashoffset: 0; } }
    .v33-sig-path {
        fill: none;
        stroke: var(--ink);
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 900;
        stroke-dashoffset: 900;
    }
    .v33-sig.v33-in .v33-sig-path { animation: v33-draw 2.2s cubic-bezier(.6,0,.3,1) forwards; }

    /* ════════ F. KONTAKT-CTA ════════ */
    .v33-contact {
        background:
            radial-gradient(120% 140% at 100% 0%, var(--blue-wash) 0%, transparent 55%),
            radial-gradient(120% 140% at 0% 100%, var(--orange-wash) 0%, transparent 55%),
            var(--paper);
        border: 1px solid var(--line);
        border-radius: 30px;
        box-shadow: var(--lift);
        text-align: center;
        padding: clamp(2.6rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
        position: relative;
        overflow: hidden;
    }
    .v33-contact::before {
        content: "";
        position: absolute; inset: 0;
        background-image: radial-gradient(circle at 1px 1px, rgba(14,21,37,.04) 1px, transparent 0);
        background-size: 26px 26px;
        -webkit-mask: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%);
        mask: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%);
        pointer-events: none;
    }
    .v33-contact > * { position: relative; }
    .v33-contact h2 {
        font-size: clamp(1.8rem, 4vw, 3rem);
        margin: 0 auto 1.6rem;
        max-width: 18ch;
    }
    .v33-contact-meta {
        font-family: var(--mono);
        font-size: .8rem;
        color: var(--mute);
        margin-top: 1.6rem;
        line-height: 1.7;
    }
    .v33-contact-meta b { color: var(--ink); font-weight: 700; }

    /* ── Fokus-Ringe ── */
    .v33-root a:focus-visible,
    .v33-root button:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 2px;
        border-radius: 6px;
    }

    /* ════════ Reduced Motion ════════ */
    @media (prefers-reduced-motion: reduce) {
        .v33-reveal { opacity: 1; transform: none; transition: none; }
        .v33-pulse-dot, .v33-pulse-ring,
        .v33-float, .v33-float2, .v33-flag-stack { animation: none; }
        .v33-iso-layer, .v33-stage-art { transition: none !important; transform: none !important; }
        .v33-ring-fill { transition: none; }
        .v33-sig-path { stroke-dashoffset: 0; animation: none; }
        .v33-hero h1 em::after { transition: none; transform: scaleX(1); }
        .v33-btn, .v33-tile, .v33-thumb, .v33-stat, .v33-flag, .v33-meta-chip, .v33-btn-primary::after { transition: none; }
    }
</style>

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

        {{-- ════════ A. HERO — Werkstatt-Spread ════════ --}}
        <section class="v33-hero">
            <div class="v33-reveal">
                <p class="v33-kicker">// DIGITAL ENGINEERING · LICHTENSTEIN</p>
                <h1>Eine Person. Neun Welten. Ein <em>Werkzeugkasten</em> fürs digitale Leben.</h1>
                <p class="v33-lede">Arthur Kotsch baut Apps, Tools und Hosting — von iOS bis Web. Alles selbst entwickelt, regelmäßig gepflegt.</p>
                <div class="v33-cta-row">
                    <a href="#v33-mosaik" class="v33-btn v33-btn-primary">
                        Welten ansehen
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
                    </a>
                    <a href="{{ route('kontakt') }}" class="v33-btn v33-btn-ghost">Kontakt</a>
                </div>
                <div class="v33-statbar" aria-label="Kennzahlen im Überblick">
                    <span><b>22</b> Apps</span>
                    <span><b>9</b> Windows-Tools</span>
                    <span><b>734</b> Web-Tools</span>
                    <span><b>1.412</b> Artikel</span>
                </div>
            </div>

            <div class="v33-reveal">
                <div class="v33-scene" data-v33-parallax aria-hidden="true">
                    <svg viewBox="0 0 520 440" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <linearGradient id="v33-plate" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0" stop-color="#FFFFFF"/>
                                <stop offset="1" stop-color="#F2F4FA"/>
                            </linearGradient>
                            <linearGradient id="v33-face-l" x1="0" y1="0" x2="1" y2="1">
                                <stop offset="0" stop-color="#EEF3FF"/>
                                <stop offset="1" stop-color="#D7E2FF"/>
                            </linearGradient>
                            <linearGradient id="v33-face-r" x1="0" y1="0" x2="1" y2="1">
                                <stop offset="0" stop-color="#DCE6FF"/>
                                <stop offset="1" stop-color="#C3D4FF"/>
                            </linearGradient>
                            <linearGradient id="v33-screen" x1="0" y1="0" x2="1" y2="1">
                                <stop offset="0" stop-color="#2563EB"/>
                                <stop offset="1" stop-color="#1A48B8"/>
                            </linearGradient>
                            <radialGradient id="v33-floor" cx="50%" cy="50%" r="50%">
                                <stop offset="0" stop-color="rgba(37,99,235,.18)"/>
                                <stop offset="100%" stop-color="rgba(37,99,235,0)"/>
                            </radialGradient>
                        </defs>

                        <!-- Bodenglühen + Kontaktschatten -->
                        <ellipse cx="260" cy="248" rx="210" ry="100" fill="url(#v33-floor)"/>
                        <ellipse cx="260" cy="340" rx="150" ry="30" fill="rgba(14,21,37,.10)"/>

                        <!-- Iso-Grundplatte -->
                        <g class="v33-iso-layer" data-depth="2">
                            <polygon points="260,98 472,218 260,338 48,218" fill="url(#v33-plate)" stroke="#DCE3F0" stroke-width="2"/>
                            <polygon points="260,98 472,218 260,338 48,218" fill="none" stroke="#CBD5EA" stroke-width="1" stroke-dasharray="4 6"/>
                            <!-- Raster-Andeutung -->
                            <line x1="154" y1="158" x2="366" y2="278" stroke="#E1E7F2" stroke-width="1" stroke-dasharray="3 6"/>
                            <line x1="366" y1="158" x2="154" y2="278" stroke="#E1E7F2" stroke-width="1" stroke-dasharray="3 6"/>
                            <line x1="207" y1="128" x2="419" y2="248" stroke="#EAEFF7" stroke-width="1" stroke-dasharray="3 6"/>
                            <line x1="313" y1="128" x2="101" y2="248" stroke="#EAEFF7" stroke-width="1" stroke-dasharray="3 6"/>
                        </g>

                        <!-- Server-Block (hinten links) -->
                        <g class="v33-iso-layer" data-depth="8">
                            <polygon points="120,196 168,224 168,282 120,254" fill="url(#v33-face-l)" stroke="#2563EB" stroke-width="2"/>
                            <polygon points="168,224 216,196 216,254 168,282" fill="url(#v33-face-r)" stroke="#2563EB" stroke-width="2"/>
                            <polygon points="120,196 168,168 216,196 168,224" fill="#fff" stroke="#2563EB" stroke-width="2"/>
                            <!-- Rack-Schlitze + Status-LEDs -->
                            <line x1="126" y1="208" x2="162" y2="229" stroke="#2563EB" stroke-width="1.4" opacity=".45"/>
                            <line x1="126" y1="224" x2="162" y2="245" stroke="#2563EB" stroke-width="1.4" opacity=".45"/>
                            <line x1="126" y1="240" x2="162" y2="261" stroke="#2563EB" stroke-width="1.4" opacity=".45"/>
                            <circle cx="176" cy="218" r="2.6" fill="#22C55E"/>
                            <circle cx="186" cy="212" r="2.6" fill="#22C55E"/>
                            <circle cx="196" cy="206" r="2.6" fill="#FF5D2E"/>
                        </g>

                        <!-- Laptop-Deckel (hinten rechts) -->
                        <g class="v33-iso-layer" data-depth="6">
                            <polygon points="300,178 360,144 416,176 356,210" fill="#fff" stroke="#2563EB" stroke-width="2"/>
                            <polygon points="312,180 360,152 404,177 356,205" fill="url(#v33-screen)" stroke="#2563EB" stroke-width="1.5"/>
                            <polygon points="300,178 356,210 356,224 300,192" fill="url(#v33-face-r)" stroke="#2563EB" stroke-width="2"/>
                            <!-- Code-Zeilen auf dem Bildschirm -->
                            <line x1="324" y1="174" x2="344" y2="184" stroke="#9DBBFF" stroke-width="2" stroke-linecap="round"/>
                            <line x1="330" y1="184" x2="358" y2="170" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity=".7"/>
                            <line x1="338" y1="190" x2="362" y2="178" stroke="#FFB59B" stroke-width="2" stroke-linecap="round"/>
                        </g>

                        <!-- Browser-Fenster (vorne, mitte) -->
                        <g class="v33-iso-layer" data-depth="11">
                            <polygon points="190,238 270,284 270,332 190,286" fill="#fff" stroke="#0E1525" stroke-width="2"/>
                            <polygon points="270,284 330,250 330,298 270,332" fill="#F2F4FA" stroke="#0E1525" stroke-width="2"/>
                            <polygon points="190,238 250,204 330,250 270,284" fill="#EEF3FF" stroke="#0E1525" stroke-width="2"/>
                            <!-- Tab-Punkte -->
                            <circle cx="208" cy="240" r="3" fill="#FF5D2E"/>
                            <circle cx="216" cy="245" r="3" fill="#2563EB"/>
                            <circle cx="224" cy="250" r="3" fill="#7A859C"/>
                            <!-- Inhalts-Balken im Fensterkörper -->
                            <line x1="204" y1="268" x2="240" y2="289" stroke="#D6DEEC" stroke-width="3" stroke-linecap="round"/>
                            <line x1="204" y1="280" x2="232" y2="296" stroke="#E4EAF4" stroke-width="3" stroke-linecap="round"/>
                            <line x1="286" y1="282" x2="316" y2="265" stroke="#C9D6F4" stroke-width="3" stroke-linecap="round"/>
                        </g>

                        <!-- iPhone (vorne rechts, leicht gekippt) -->
                        <g class="v33-iso-layer" data-depth="14">
                            <polygon points="330,236 366,256 358,322 322,302" fill="#fff" stroke="#0E1525" stroke-width="2"/>
                            <polygon points="366,256 380,248 372,314 358,322" fill="#F2F4FA" stroke="#0E1525" stroke-width="2"/>
                            <polygon points="330,236 344,228 380,248 366,256" fill="#FFF1EC" stroke="#0E1525" stroke-width="2"/>
                            <rect x="335" y="252" width="20" height="42" rx="3" fill="url(#v33-screen)" transform="skewY(28)" />
                        </g>

                        <!-- Schwebende Elemente -->
                        <g class="v33-iso-layer v33-float" data-depth="18">
                            <rect x="92" y="120" width="34" height="34" rx="9" fill="#fff" stroke="#FF5D2E" stroke-width="2" transform="rotate(-12 109 137)"/>
                            <path d="M101 138 l5 6 l11 -13" fill="none" stroke="#FF5D2E" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-12 109 137)"/>
                        </g>
                        <circle class="v33-iso-layer v33-float2" data-depth="20" cx="420" cy="112" r="6" fill="#2563EB"/>
                        <circle class="v33-iso-layer v33-float" data-depth="22" cx="446" cy="150" r="4" fill="#FF5D2E"/>

                        <!-- Pulsierender Hotspot -->
                        <g class="v33-iso-layer" data-depth="16">
                            <circle class="v33-pulse-ring" cx="356" cy="232" r="9" fill="none" stroke="#FF5D2E" stroke-width="2"/>
                            <circle class="v33-pulse-dot" cx="356" cy="232" r="6" fill="#FF5D2E"/>
                        </g>
                    </svg>
                </div>
            </div>
        </section>

        {{-- ════════ B. FLAGGSCHIFF-SPOTLIGHT ════════ --}}
        <section class="v33-section" aria-labelledby="v33-flag-h">
            <div class="v33-flag v33-reveal">
                <div class="v33-flag-art" aria-hidden="true">
                    <svg viewBox="0 0 320 300" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <linearGradient id="v33-card-top" x1="0" y1="0" x2="1" y2="1">
                                <stop offset="0" stop-color="#FFFFFF"/>
                                <stop offset="1" stop-color="#EEF3FF"/>
                            </linearGradient>
                            <linearGradient id="v33-glyph" x1="0" y1="0" x2="1" y2="1">
                                <stop offset="0" stop-color="#2563EB"/>
                                <stop offset="1" stop-color="#1A48B8"/>
                            </linearGradient>
                        </defs>
                        <!-- weicher Kartenschatten -->
                        <ellipse cx="180" cy="282" rx="92" ry="16" fill="rgba(37,99,235,.14)"/>
                        <!-- gestapelte App-Karten -->
                        <g class="v33-flag-stack">
                            <rect x="70" y="150" width="150" height="150" rx="34" fill="#fff" stroke="#9DBBFF" stroke-width="2.5" opacity=".7"/>
                            <rect x="85" y="115" width="150" height="150" rx="34" fill="#fff" stroke="#6E9BFF" stroke-width="2.5" opacity=".85"/>
                            <rect x="100" y="78" width="150" height="150" rx="34" fill="url(#v33-card-top)" stroke="#2563EB" stroke-width="2.5"/>
                            <!-- Glanzkante oben -->
                            <path d="M118 96 q56 -14 114 4" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity=".7"/>
                            <!-- generischer App-Glyph -->
                            <g transform="translate(175,153)">
                                <circle r="40" fill="#fff" stroke="#2563EB" stroke-width="2.5"/>
                                <path d="M-16 6 L-4 -14 L6 2 L14 -10 L18 16 L-18 16 Z" fill="url(#v33-glyph)"/>
                                <circle cx="10" cy="-16" r="6" fill="#FF5D2E"/>
                            </g>
                            <!-- Update-Punkt -->
                            <circle class="v33-pulse-ring" cx="245" cy="80" r="14" fill="none" stroke="#FF5D2E" stroke-width="2"/>
                            <circle class="v33-pulse-dot" cx="245" cy="80" r="10" fill="#FF5D2E"/>
                        </g>
                    </svg>
                </div>
                <div class="v33-flag-body">
                    <p class="v33-kicker">// FLAGGSCHIFF</p>
                    <h2 id="v33-flag-h">22 Apps im App Store — iPhone, iPad und Mac.</h2>
                    <p>Native Apps mit regelmäßigen Updates.</p>
                    <div class="v33-pills">
                        <span class="v33-pill">iPhone</span>
                        <span class="v33-pill">iPad</span>
                        <span class="v33-pill">Mac</span>
                    </div>
                    <a class="v33-link" href="https://ios.kotsch.tech">
                        Zu den Apps
                        <svg class="v33-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </a>
                </div>
            </div>
        </section>

        {{-- ════════ C. DAS MOSAIK — 9 Welten ════════ --}}
        <section class="v33-section" id="v33-mosaik" aria-labelledby="v33-mosaik-h">
            <div class="v33-section-head v33-reveal">
                <p class="v33-kicker">// DIE WERKBANK</p>
                <h2 id="v33-mosaik-h">Neun Welten, einzeln gebaut.</h2>
                <p>Jede Plattform eine eigene Mini-Szene — keine zwei Kacheln gleich. Eine kuratierte Vitrine der Arbeit.</p>
            </div>

            <div class="v33-mosaic">

                {{-- iOS & Mac — L --}}
                <article class="v33-tile v33-t-ios v33-reveal" style="transition-delay:.0s">
                    <span class="v33-meta-chip">22</span>
                    <div class="v33-stage v33-stage-tall">
                        <div class="v33-stage-art" data-v33-tilt aria-hidden="true">
                        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                            <rect x="46" y="92" width="100" height="100" rx="24" fill="#fff" stroke="#2563EB" stroke-width="2.5"/>
                            <rect x="56" y="66" width="100" height="100" rx="24" fill="#fff" stroke="#2563EB" stroke-width="2.5"/>
                            <rect x="66" y="40" width="100" height="100" rx="24" fill="#EEF3FF" stroke="#2563EB" stroke-width="2.5"/>
                            <g transform="translate(116,90)">
                                <circle r="26" fill="#fff" stroke="#2563EB" stroke-width="2.5"/>
                                <path d="M-11 4 L-3 -9 L4 1 L9 -7 L12 11 L-12 11 Z" fill="#2563EB"/>
                            </g>
                            <circle class="v33-pulse-dot" cx="160" cy="44" r="8" fill="#FF5D2E"/>
                        </svg>
                        </div>
                    </div>
                    <div class="v33-tile-body">
                        <h3>iOS &amp; Mac Apps</h3>
                        <p>22 Apps im App Store für iPhone, iPad und Mac — mit regelmäßigen Updates.</p>
                        <a class="v33-open" href="https://ios.kotsch.tech">Öffnen <svg class="v33-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
                    </div>
                </article>

                {{-- Web-Tools — XL breit --}}
                <article class="v33-tile v33-t-web v33-reveal" style="transition-delay:.05s">
                    <span class="v33-meta-chip">734</span>
                    <div class="v33-stage v33-stage-wide">
                        <div class="v33-stage-art" data-v33-tilt aria-hidden="true">
                        <svg viewBox="0 0 320 160" xmlns="http://www.w3.org/2000/svg">
                            <rect x="20" y="20" width="280" height="120" rx="12" fill="#fff" stroke="#2563EB" stroke-width="2.5"/>
                            <path d="M20 50 H300" stroke="#2563EB" stroke-width="2"/>
                            <!-- Tabs -->
                            <rect x="32" y="30" width="46" height="14" rx="5" fill="#EEF3FF" stroke="#2563EB" stroke-width="1.5"/>
                            <rect x="84" y="30" width="46" height="14" rx="5" fill="#fff" stroke="#2563EB" stroke-width="1.5"/>
                            <!-- Adresszeile mit 734 -->
                            <rect x="32" y="62" width="256" height="22" rx="8" fill="#FBFAF7" stroke="#E7E9F0" stroke-width="1.5"/>
                            <text x="46" y="78" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#2563EB">734 Tools</text>
                            <!-- Inhalts-Skelett -->
                            <rect x="32" y="98" width="120" height="8" rx="4" fill="#E7E9F0"/>
                            <rect x="32" y="114" width="180" height="8" rx="4" fill="#E7E9F0"/>
                            <!-- Cursor -->
                            <path d="M250 100 l0 26 l7 -7 l5 11 l5 -2 l-5 -11 l9 0 Z" fill="#FF5D2E"/>
                        </svg>
                        </div>
                    </div>
                    <div class="v33-tile-body">
                        <h3>Web-Tools</h3>
                        <p>734 Tools direkt im Browser — ohne Login, ohne Installation.</p>
                        <a class="v33-open" href="https://webtools.kotsch.tech">Öffnen <svg class="v33-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
                    </div>
                </article>

                {{-- Windows — M --}}
                <article class="v33-tile v33-t-win v33-reveal" style="transition-delay:.1s">
                    <span class="v33-meta-chip">9</span>
                    <div class="v33-stage">
                        <div class="v33-stage-art" data-v33-tilt aria-hidden="true">
                        <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
                            <rect x="24" y="34" width="120" height="86" rx="8" fill="#fff" stroke="#2563EB" stroke-width="2.5"/>
                            <path d="M24 52 H144" stroke="#2563EB" stroke-width="2"/>
                            <circle cx="36" cy="43" r="3.4" fill="#FF5D2E"/><circle cx="48" cy="43" r="3.4" fill="#2563EB"/><circle cx="60" cy="43" r="3.4" fill="#7A859C"/>
                            <rect x="56" y="22" width="120" height="86" rx="8" fill="#EEF3FF" stroke="#2563EB" stroke-width="2.5"/>
                            <path d="M56 40 H176" stroke="#2563EB" stroke-width="2"/>
                            <circle cx="68" cy="31" r="3.4" fill="#FF5D2E"/><circle cx="80" cy="31" r="3.4" fill="#2563EB"/><circle cx="92" cy="31" r="3.4" fill="#7A859C"/>
                        </svg>
                        </div>
                    </div>
                    <div class="v33-tile-body">
                        <h3>Windows</h3>
                        <p>9 Programme — Cleaner, Commander, Notes, Taskmanager, CodeEditor. Direkt-Download.</p>
                        <a class="v33-open" href="https://windows.kotsch.tech">Öffnen <svg class="v33-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
                    </div>
                </article>

                {{-- Android — M (in Entwicklung) --}}
                <article class="v33-tile v33-tile-dev v33-t-android v33-reveal" style="transition-delay:.15s">
                    <span class="v33-badge-dev">in Entwicklung</span>
                    <div class="v33-stage v33-stage-warm">
                        <div class="v33-stage-art" data-v33-tilt aria-hidden="true">
                        <svg viewBox="0 0 180 150" xmlns="http://www.w3.org/2000/svg">
                            <!-- halb-konstruierter Roboter, Bauplan-Linien -->
                            <path d="M55 70 a35 35 0 0 1 70 0 Z" fill="#FFF1EC" stroke="#FF5D2E" stroke-width="2.5"/>
                            <line x1="68" y1="48" x2="58" y2="34" stroke="#FF5D2E" stroke-width="2.5" stroke-linecap="round"/>
                            <line x1="112" y1="48" x2="122" y2="34" stroke="#FF5D2E" stroke-width="2.5" stroke-linecap="round"/>
                            <circle cx="74" cy="60" r="4" fill="#FF5D2E"/><circle cx="106" cy="60" r="4" fill="#FF5D2E"/>
                            <rect x="55" y="78" width="70" height="46" rx="10" fill="none" stroke="#FF5D2E" stroke-width="2.5" stroke-dasharray="6 6"/>
                            <line x1="55" y1="100" x2="125" y2="100" stroke="#FF5D2E" stroke-width="1.5" stroke-dasharray="3 5"/>
                            <line x1="90" y1="78" x2="90" y2="124" stroke="#FF5D2E" stroke-width="1.5" stroke-dasharray="3 5"/>
                        </svg>
                        </div>
                    </div>
                    <div class="v33-tile-body">
                        <h3>Android</h3>
                        <p>Native Apps für Android — aktuell in Entwicklung.</p>
                        <a class="v33-open" href="https://android.kotsch.tech">Öffnen <svg class="v33-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
                    </div>
                </article>

                {{-- Shop — M --}}
                <article class="v33-tile v33-t-shop v33-reveal" style="transition-delay:.2s">
                    <div class="v33-stage">
                        <div class="v33-stage-art" data-v33-tilt aria-hidden="true">
                        <svg viewBox="0 0 180 150" xmlns="http://www.w3.org/2000/svg">
                            <defs><linearGradient id="v33-shop-bar" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#FF5D2E"/><stop offset="1" stop-color="#ff8a5e"/></linearGradient></defs>
                            <rect x="46" y="32" width="88" height="84" rx="14" fill="#fff" stroke="#2563EB" stroke-width="2.5"/>
                            <rect x="46" y="32" width="88" height="20" rx="14" fill="#EEF3FF"/>
                            <rect x="46" y="42" width="88" height="10" fill="#EEF3FF"/>
                            <path d="M46 52 H134" stroke="#2563EB" stroke-width="1.5" opacity=".4"/>
                            <path d="M90 60 v30 M78 78 l12 12 l12 -12" fill="none" stroke="#2563EB" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                            <rect x="60" y="98" width="60" height="9" rx="4.5" fill="#EEF3FF"/>
                            <rect x="60" y="98" width="40" height="9" rx="4.5" fill="url(#v33-shop-bar)"/>
                            <text x="90" y="136" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#2563EB">Sofort</text>
                        </svg>
                        </div>
                    </div>
                    <div class="v33-tile-body">
                        <h3>Shop</h3>
                        <p>Digitale Produkte mit Sofort-Download.</p>
                        <a class="v33-open" href="https://shop.kotsch.tech">Öffnen <svg class="v33-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
                    </div>
                </article>

                {{-- Hosting — L breit --}}
                <article class="v33-tile v33-t-host v33-reveal" style="transition-delay:.25s">
                    <div class="v33-stage">
                        <div class="v33-stage-art" data-v33-tilt aria-hidden="true">
                        <svg viewBox="0 0 280 150" xmlns="http://www.w3.org/2000/svg">
                            <!-- Server-Rack-Schichten -->
                            <g>
                                <rect x="90" y="28" width="100" height="26" rx="6" fill="#fff" stroke="#2563EB" stroke-width="2.5"/>
                                <rect x="90" y="60" width="100" height="26" rx="6" fill="#EEF3FF" stroke="#2563EB" stroke-width="2.5"/>
                                <rect x="90" y="92" width="100" height="26" rx="6" fill="#fff" stroke="#2563EB" stroke-width="2.5"/>
                                <circle cx="102" cy="41" r="4" fill="#22C55E"/>
                                <circle cx="102" cy="73" r="4" fill="#22C55E"/>
                                <circle cx="102" cy="105" r="4" fill="#2563EB"/>
                                <line x1="118" y1="41" x2="170" y2="41" stroke="#E7E9F0" stroke-width="3" stroke-linecap="round"/>
                                <line x1="118" y1="73" x2="170" y2="73" stroke="#E7E9F0" stroke-width="3" stroke-linecap="round"/>
                                <line x1="118" y1="105" x2="170" y2="105" stroke="#E7E9F0" stroke-width="3" stroke-linecap="round"/>
                            </g>
                            <!-- DSGVO-Stempel -->
                            <g transform="rotate(-8 220 75)">
                                <rect x="200" y="58" width="58" height="34" rx="6" fill="none" stroke="#FF5D2E" stroke-width="2.5"/>
                                <text x="229" y="80" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#FF5D2E">DSGVO</text>
                            </g>
                        </svg>
                        </div>
                    </div>
                    <div class="v33-tile-body">
                        <h3>Hosting</h3>
                        <p>Managed Webhosting, vServer und VPS — DSGVO-konform.</p>
                        <a class="v33-open" href="https://hosting.kotsch.tech">Öffnen <svg class="v33-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
                    </div>
                </article>

                {{-- News — S --}}
                <article class="v33-tile v33-t-news v33-reveal" style="transition-delay:.3s">
                    <span class="v33-meta-chip">1.412</span>
                    <div class="v33-stage">
                        <div class="v33-stage-art" data-v33-tilt aria-hidden="true">
                        <svg viewBox="0 0 160 150" xmlns="http://www.w3.org/2000/svg">
                            <rect x="36" y="40" width="88" height="74" rx="8" fill="#fff" stroke="#2563EB" stroke-width="2.5"/>
                            <rect x="48" y="52" width="64" height="14" rx="4" fill="#EEF3FF"/>
                            <rect x="48" y="74" width="64" height="6" rx="3" fill="#E7E9F0"/>
                            <rect x="48" y="86" width="64" height="6" rx="3" fill="#E7E9F0"/>
                            <rect x="48" y="98" width="40" height="6" rx="3" fill="#E7E9F0"/>
                            <circle cx="112" cy="44" r="11" fill="#FF5D2E"/>
                        </svg>
                        </div>
                    </div>
                    <div class="v33-tile-body">
                        <h3>News</h3>
                        <p>1.412 Ratgeber &amp; Tutorials.</p>
                        <a class="v33-open" href="https://news.kotsch.tech">Öffnen <svg class="v33-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
                    </div>
                </article>

                {{-- IT-Hilfe — S --}}
                <article class="v33-tile v33-t-it v33-reveal" style="transition-delay:.35s">
                    <div class="v33-stage v33-stage-warm">
                        <div class="v33-stage-art" data-v33-tilt aria-hidden="true">
                        <svg viewBox="0 0 160 150" xmlns="http://www.w3.org/2000/svg">
                            <path d="M24 96 C 60 70, 100 70, 136 88" fill="none" stroke="#E7E9F0" stroke-width="3" stroke-dasharray="5 6" stroke-linecap="round"/>
                            <circle cx="40" cy="92" r="5" fill="#7A859C"/>
                            <!-- Pin -->
                            <path d="M110 38 a20 20 0 0 1 20 20 c0 16 -20 34 -20 34 c0 0 -20 -18 -20 -34 a20 20 0 0 1 20 -20 Z" fill="#FF5D2E" stroke="#FF5D2E" stroke-width="2"/>
                            <circle cx="110" cy="58" r="7" fill="#fff"/>
                        </svg>
                        </div>
                    </div>
                    <div class="v33-tile-body">
                        <h3>IT-Hilfe</h3>
                        <p>Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein. Keine Lösung = kein Preis.</p>
                        <a class="v33-open" href="https://it-hilfe.kotsch.tech">Öffnen <svg class="v33-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
                    </div>
                </article>

                {{-- Webdesign — Full-Width-Banner --}}
                <article class="v33-tile v33-t-webdes v33-reveal" style="transition-delay:.4s">
                    <div class="v33-banner-inner">
                        <div class="v33-banner-text">
                            <p class="v33-kicker">// STUDIO</p>
                            <h3>Webdesign</h3>
                            <p>Studio &amp; 20 Branchen-Demos — vom Wireframe zur fertigen Seite.</p>
                            <a class="v33-open" href="https://webdesign.kotsch.tech">Öffnen <svg class="v33-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
                        </div>
                        <div class="v33-thumbs" aria-hidden="true">
                            @for($i = 0; $i < 20; $i++)
                                <span class="v33-thumb"></span>
                            @endfor
                        </div>
                    </div>
                </article>

            </div>
        </section>

        {{-- ════════ D. KENNZAHLEN ════════ --}}
        <section class="v33-section" aria-labelledby="v33-stats-h">
            <div class="v33-section-head v33-reveal" style="text-align:center; margin-left:auto; margin-right:auto;">
                <p class="v33-kicker" style="justify-content:center;">// IN ZAHLEN</p>
                <h2 id="v33-stats-h">Gebaut, gepflegt, gezählt.</h2>
            </div>
            <div class="v33-stats" id="v33-stats">
                <div class="v33-stat v33-reveal">
                    <div class="v33-ring-wrap">
                        <svg viewBox="0 0 120 120"><defs><linearGradient id="v33-ring-grad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#2563EB"/><stop offset="1" stop-color="#FF5D2E"/></linearGradient></defs><circle class="v33-ring-track" cx="60" cy="60" r="52"/><circle class="v33-ring-fill" cx="60" cy="60" r="52" data-ratio=".55"/></svg>
                        <span class="v33-ring-num" data-count="22">0</span>
                    </div>
                    <p class="v33-stat-label">iOS / Mac<br>Apps</p>
                </div>
                <div class="v33-stat v33-reveal">
                    <div class="v33-ring-wrap">
                        <svg viewBox="0 0 120 120"><circle class="v33-ring-track" cx="60" cy="60" r="52"/><circle class="v33-ring-fill" cx="60" cy="60" r="52" data-ratio=".35"/></svg>
                        <span class="v33-ring-num" data-count="9">0</span>
                    </div>
                    <p class="v33-stat-label">Windows<br>Tools</p>
                </div>
                <div class="v33-stat v33-reveal">
                    <div class="v33-ring-wrap">
                        <svg viewBox="0 0 120 120"><circle class="v33-ring-track" cx="60" cy="60" r="52"/><circle class="v33-ring-fill" cx="60" cy="60" r="52" data-ratio=".9"/></svg>
                        <span class="v33-ring-num" data-count="734">0</span>
                    </div>
                    <p class="v33-stat-label">Web-Tools</p>
                </div>
                <div class="v33-stat v33-reveal">
                    <div class="v33-ring-wrap">
                        <svg viewBox="0 0 120 120"><circle class="v33-ring-track" cx="60" cy="60" r="52"/><circle class="v33-ring-fill" cx="60" cy="60" r="52" data-ratio="1"/></svg>
                        <span class="v33-ring-num" data-count="1412" data-format="de">0</span>
                    </div>
                    <p class="v33-stat-label">Artikel</p>
                </div>
            </div>
        </section>

        {{-- ════════ E. ÜBER ════════ --}}
        <section class="v33-section" aria-labelledby="v33-about-h">
            <div class="v33-about v33-reveal">
                <p class="v33-kicker" style="justify-content:center;">// ÜBER</p>
                <h2 id="v33-about-h">Ich bin Arthur Kotsch.</h2>
                <p>Student der Digital Engineering aus Lichtenstein in Sachsen.</p>
                <p>Alles hier ist eigenständig entwickelt — von der App über die Web-Tools bis zum Server. Eine Person, ein durchgängiger Werkzeugkasten.</p>
                <div class="v33-sig" aria-hidden="true">
                    <svg viewBox="0 0 220 80" xmlns="http://www.w3.org/2000/svg">
                        <path class="v33-sig-path" d="M14 60 C 22 20, 34 20, 30 58 C 28 36, 40 30, 46 50 M58 60 L70 22 L82 60 M62 46 H78 M98 58 C 90 58, 88 44, 98 44 C 108 44, 106 60, 96 58 M120 60 V40 C 120 30, 134 30, 134 44 V60 M150 60 V26 M150 46 C 162 36, 170 46, 158 52 C 170 54, 168 64, 156 58 M186 60 V40 M186 48 C 192 40, 202 42, 202 52"/>
                    </svg>
                </div>
            </div>
        </section>

        {{-- ════════ F. KONTAKT-CTA ════════ --}}
        <section class="v33-section" aria-labelledby="v33-contact-h">
            <div class="v33-contact v33-reveal">
                <p class="v33-kicker" style="justify-content:center;">// KONTAKT</p>
                <h2 id="v33-contact-h">Ein Projekt, eine Frage, ein Bug?</h2>
                <a href="{{ route('kontakt') }}" class="v33-btn v33-btn-primary" style="font-size:1.05rem; padding:1rem 2rem;">
                    Kontakt aufnehmen
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
                <p class="v33-contact-meta">
                    // Region Glauchau–Lichtenstein · <b>vor Ort &amp; Remote</b><br>
                    IT-Hilfe: keine Lösung = kein Preis
                </p>
            </div>
        </section>

    </div>
</div>

<script>
(function () {
    var root = document.querySelector('.v33-root');
    if (!root) return;
    var motionOK = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
    var fine = window.matchMedia('(pointer: fine)').matches;

    /* ── Reveal + Count-up + Ring-Fill via IntersectionObserver ── */
    var statsDone = false;

    function runStat(el) {
        if (statsDone) return;
        statsDone = true;
        // Ringe füllen
        root.querySelectorAll('.v33-ring-fill').forEach(function (ring) {
            var r = ring.r.baseVal.value;
            var circ = 2 * Math.PI * r;
            ring.style.strokeDasharray = circ;
            ring.style.strokeDashoffset = circ;
            var ratio = parseFloat(ring.getAttribute('data-ratio')) || 0;
            requestAnimationFrame(function () {
                ring.style.strokeDashoffset = circ * (1 - ratio);
            });
        });
        // Zahlen hochzählen
        root.querySelectorAll('.v33-ring-num').forEach(function (num) {
            var target = parseInt(num.getAttribute('data-count'), 10) || 0;
            var fmt = num.getAttribute('data-format') === 'de';
            if (!motionOK) { num.textContent = fmt ? target.toLocaleString('de-DE') : target; return; }
            var start = null, dur = 1500;
            function step(ts) {
                if (start === null) start = ts;
                var p = Math.min((ts - start) / dur, 1);
                var eased = 1 - Math.pow(1 - p, 3);
                var val = Math.round(target * eased);
                num.textContent = fmt ? val.toLocaleString('de-DE') : val;
                if (p < 1) requestAnimationFrame(step);
            }
            requestAnimationFrame(step);
        });
    }

    if ('IntersectionObserver' in window) {
        var io = new IntersectionObserver(function (entries) {
            entries.forEach(function (e) {
                if (!e.isIntersecting) return;
                e.target.classList.add('v33-in');
                if (e.target.id === 'v33-stats' || e.target.querySelector('.v33-ring-num')) {
                    runStat(e.target);
                }
                io.unobserve(e.target);
            });
        }, { threshold: 0.18, rootMargin: '0px 0px -8% 0px' });

        root.querySelectorAll('.v33-reveal').forEach(function (el) { io.observe(el); });
        var statsBlock = document.getElementById('v33-stats');
        if (statsBlock) io.observe(statsBlock);
    } else {
        root.querySelectorAll('.v33-reveal').forEach(function (el) { el.classList.add('v33-in'); });
        runStat(document.getElementById('v33-stats'));
    }

    /* ── Hero-ISO Mini-Parallax (gedämpft, lerp) ── */
    if (motionOK && fine) {
        var scene = root.querySelector('[data-v33-parallax]');
        if (scene) {
            // Schwebende Layer von der Parallax ausnehmen (eigene Animation)
            var layers = scene.querySelectorAll('.v33-iso-layer:not(.v33-float):not(.v33-float2)');
            var tx = 0, ty = 0, cx = 0, cy = 0, raf = null;
            scene.addEventListener('mousemove', function (ev) {
                var rect = scene.getBoundingClientRect();
                tx = ((ev.clientX - rect.left) / rect.width - 0.5) * 2;
                ty = ((ev.clientY - rect.top) / rect.height - 0.5) * 2;
                if (!raf) raf = requestAnimationFrame(loop);
            });
            scene.addEventListener('mouseleave', function () { tx = 0; ty = 0; if (!raf) raf = requestAnimationFrame(loop); });
            function loop() {
                cx += (tx - cx) * 0.08;
                cy += (ty - cy) * 0.08;
                layers.forEach(function (l) {
                    var d = parseFloat(l.getAttribute('data-depth')) || 0;
                    l.style.transform = 'translate(' + (cx * d) + 'px,' + (cy * d) + 'px)';
                });
                if (Math.abs(tx - cx) > 0.001 || Math.abs(ty - cy) > 0.001) {
                    raf = requestAnimationFrame(loop);
                } else { raf = null; }
            }
        }

        /* ── Kachel-Illustrations-Parallax (6px gegen Cursor) ── */
        root.querySelectorAll('.v33-tile').forEach(function (tile) {
            var art = tile.querySelector('.v33-stage-art');
            if (!art) return;
            tile.addEventListener('mousemove', function (ev) {
                var rect = tile.getBoundingClientRect();
                var dx = ((ev.clientX - rect.left) / rect.width - 0.5) * 12;
                var dy = ((ev.clientY - rect.top) / rect.height - 0.5) * 12;
                // Translate kombiniert mit dem Hover-Scale (1.05) aus dem CSS
                art.style.transform = 'translate(' + dx + 'px,' + dy + 'px) scale(1.05)';
            });
            tile.addEventListener('mouseleave', function () { art.style.transform = ''; });
        });
    }
})();
</script>
@endsection