@once
{{-- ProblemRadar Design-System — „Signal/Radar" Editorial. Hell, premium, animiert.
     Einmal pro Seite eingebunden (@once). Klassen: u-*. Marke: Violett + Cyan, Clash Display. --}}
<link rel="preconnect" href="https://api.fontshare.com" crossorigin>
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@600,700&display=swap" rel="stylesheet">
<style>
    :root{
        --u-violet:#7C3AED; --u-violet-d:#6d28d9; --u-cyan:#06B6D4; --u-cyan-d:#0891b2;
        --u-ink:#0B1020; --u-ink2:#1e293b; --u-muted:#64748b; --u-faint:#94a3b8;
        --u-line:#e7e9f2; --u-bg:#ffffff; --u-bg2:#f6f7fb; --u-tint:#f3f0ff;
        --u-grad:linear-gradient(115deg,var(--u-violet) 0%,var(--u-cyan) 100%);
        --u-grad-soft:linear-gradient(115deg,rgba(124,58,237,.12),rgba(6,182,212,.12));
        --u-r:20px; --u-r-lg:28px;
        --u-sh:0 1px 2px rgba(11,16,32,.04),0 18px 44px -30px rgba(124,58,237,.32);
        --u-sh-h:0 30px 60px -30px rgba(124,58,237,.5);
        --u-display:'Clash Display',system-ui,sans-serif;
    }

    /* ── Basis / Layout ── */
    .u-shell{ position:relative; overflow:hidden; background:
        radial-gradient(60% 55% at 85% -5%,rgba(6,182,212,.10),transparent 60%),
        radial-gradient(55% 50% at 8% 0%,rgba(124,58,237,.12),transparent 55%),
        linear-gradient(180deg,#fff 0%,var(--u-bg2) 100%);
        font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--u-ink2); }
    .u-shell::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
        background-image:radial-gradient(rgba(11,16,32,.05) 1px,transparent 1px); background-size:22px 22px;
        -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%); }
    .u-container{ position:relative; max-width:1120px; margin:0 auto; padding:0 22px; }

    /* ── Typo ── */
    .u-eyebrow{ display:inline-flex; align-items:center; gap:.55rem; padding:.42rem .9rem; border-radius:999px;
        background:#fff; border:1px solid var(--u-line); box-shadow:var(--u-sh);
        font-weight:800; font-size:.76rem; letter-spacing:.04em; color:var(--u-ink); }
    .u-eyebrow .u-dot{ width:8px; height:8px; border-radius:50%; background:var(--u-grad);
        box-shadow:0 0 0 4px rgba(124,58,237,.15); animation:uPulse 2.4s ease-in-out infinite; }
    .u-display{ font-family:var(--u-display); font-weight:700; letter-spacing:-.02em; line-height:1.02; color:var(--u-ink);
        font-size:clamp(2.4rem,6.4vw,4.6rem); margin:18px 0 0; }
    .u-grad-text{ background:var(--u-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .u-lead{ font-size:clamp(1.05rem,1.6vw,1.28rem); line-height:1.6; color:var(--u-muted); max-width:52ch; margin:20px 0 0; }
    .u-h2{ font-family:var(--u-display); font-weight:700; letter-spacing:-.015em; color:var(--u-ink);
        font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.06; }
    .u-kicker{ font-weight:800; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--u-violet); }

    /* ── Buttons (≥44px Touch) ── */
    .u-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:52px; padding:15px 30px;
        border-radius:14px; font-weight:800; font-size:1rem; text-decoration:none; cursor:pointer; border:1.5px solid transparent;
        transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,filter .18s,background .18s; white-space:nowrap; }
    .u-btn:focus-visible{ outline:3px solid rgba(124,58,237,.45); outline-offset:2px; }
    .u-btn-primary{ background:var(--u-grad); color:#fff; box-shadow:0 16px 34px -14px rgba(124,58,237,.75); background-size:160% 160%; }
    .u-btn-primary:hover{ transform:translateY(-3px); box-shadow:var(--u-sh-h); animation:uShift 3s ease infinite; }
    .u-btn-dark{ background:var(--u-ink); color:#fff; }
    .u-btn-dark:hover{ transform:translateY(-3px); filter:brightness(1.12); }
    .u-btn-ghost{ background:#fff; color:var(--u-ink); border-color:var(--u-line); box-shadow:var(--u-sh); }
    .u-btn-ghost:hover{ transform:translateY(-3px); border-color:rgba(124,58,237,.5); }

    /* ── Stat-Zähler ── */
    .u-stats{ display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:34px; align-items:center; }
    .u-stat b{ font-family:var(--u-display); font-weight:700; font-size:2rem; color:var(--u-ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1; }
    .u-stat span{ display:block; font-size:.82rem; color:var(--u-muted); font-weight:600; margin-top:4px; }
    .u-stat-div{ width:1px; height:38px; background:var(--u-line); }

    /* ── Karten ── */
    .u-card{ position:relative; display:flex; flex-direction:column; gap:11px; padding:26px; background:#fff;
        border:1px solid var(--u-line); border-radius:var(--u-r); box-shadow:var(--u-sh); text-decoration:none;
        transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s; overflow:hidden; }
    .u-card::after{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--u-grad); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
    .u-card:hover{ transform:translateY(-6px); box-shadow:var(--u-sh-h); border-color:rgba(124,58,237,.28); }
    .u-card:hover::after{ transform:scaleX(1); }
    .u-card.is-feat{ border-color:rgba(124,58,237,.4); background:linear-gradient(180deg,#fff,#fdfcff); }
    .u-card-ic{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-size:1.35rem; color:#fff; background:var(--u-grad); box-shadow:0 12px 26px -12px rgba(124,58,237,.7); }
    .u-card-badge{ font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--u-faint); }
    .u-card-title{ font-family:var(--u-display); font-weight:600; font-size:1.28rem; color:var(--u-ink); letter-spacing:-.01em; }
    .u-card-desc{ color:var(--u-muted); font-size:.96rem; line-height:1.55; }
    .u-card-go{ margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; color:var(--u-violet); font-weight:800; font-size:.92rem; }
    .u-card:hover .u-card-go i{ transform:translateX(4px); }
    .u-card-go i{ transition:transform .2s; }
    .u-feat-tag{ position:absolute; top:16px; right:-34px; transform:rotate(45deg); background:var(--u-grad); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.1em; padding:5px 40px; text-transform:uppercase; }

    /* ── Radar-Hero ── */
    .u-radar{ position:relative; width:min(440px,88vw); aspect-ratio:1; margin:0 auto; }
    .u-radar-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(124,58,237,.16); }
    .u-radar-ring:nth-child(2){ inset:13%; } .u-radar-ring:nth-child(3){ inset:29%; } .u-radar-ring:nth-child(4){ inset:45%; border-color:rgba(6,182,212,.22); }
    .u-radar-cross{ position:absolute; background:rgba(124,58,237,.1); }
    .u-radar-cross.h{ left:0; right:0; top:50%; height:1px; } .u-radar-cross.v{ top:0; bottom:0; left:50%; width:1px; }
    .u-radar-sweep{ position:absolute; inset:0; border-radius:50%; overflow:hidden;
        -webkit-mask:radial-gradient(circle,#000 60%,transparent 62%); mask:radial-gradient(circle,#000 99%,transparent); }
    .u-radar-sweep::before{ content:""; position:absolute; inset:0;
        background:conic-gradient(from 0deg,rgba(124,58,237,.35),rgba(124,58,237,0) 55%,transparent);
        animation:uSpin 4s linear infinite; }
    .u-radar-core{ position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px; border-radius:50%; background:var(--u-grad); box-shadow:0 0 0 6px rgba(124,58,237,.15),0 0 30px rgba(124,58,237,.6); }
    .u-blip{ position:absolute; width:12px; height:12px; border-radius:50%; background:var(--u-cyan); box-shadow:0 0 0 0 rgba(6,182,212,.5); animation:uBlip 3s ease-out infinite; }
    .u-blip.v{ background:var(--u-violet); box-shadow:0 0 0 0 rgba(124,58,237,.5); }
    .u-blip-label{ position:absolute; padding:5px 11px; border-radius:9px; background:#fff; border:1px solid var(--u-line); box-shadow:var(--u-sh); font-size:.72rem; font-weight:700; color:var(--u-ink2); white-space:nowrap; }

    /* ── Panels / Formular ── */
    .u-panel{ background:#fff; border:1px solid var(--u-line); border-radius:var(--u-r-lg); box-shadow:var(--u-sh); }
    .u-sec-head{ display:flex; align-items:center; gap:14px; margin:8px 0 4px; }
    .u-sec-num{ flex-shrink:0; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--u-grad-soft); color:var(--u-violet); font-family:var(--u-display); font-weight:700; font-size:1rem; }
    .u-sec-title{ font-family:var(--u-display); font-weight:600; font-size:1.28rem; color:var(--u-ink); letter-spacing:-.01em; }
    .u-q{ padding:22px 24px; border:1px solid var(--u-line); border-radius:var(--u-r); background:#fff; margin:14px 0; transition:border-color .18s,box-shadow .18s; }
    .u-q:focus-within{ border-color:rgba(124,58,237,.55); box-shadow:0 0 0 4px rgba(124,58,237,.1); }
    .u-label{ display:block; font-weight:800; color:var(--u-ink); font-size:1rem; margin-bottom:6px; }
    .u-req{ color:var(--u-violet); } .u-opt{ color:var(--u-faint); font-weight:600; font-size:.82rem; }
    .u-help{ color:var(--u-faint); font-size:.85rem; line-height:1.5; margin:0 0 12px; }
    .u-input,.u-select,.u-textarea{ width:100%; padding:13px 15px; border:1.5px solid var(--u-line); border-radius:12px; font-size:1rem; font-family:inherit; background:#fff; color:var(--u-ink); transition:border-color .16s,box-shadow .16s; }
    .u-input:focus,.u-select:focus,.u-textarea:focus{ outline:none; border-color:var(--u-violet); box-shadow:0 0 0 4px rgba(124,58,237,.12); }
    .u-textarea{ min-height:118px; resize:vertical; }
    .u-opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
    .u-opt-box{ display:flex; align-items:center; gap:.6rem; padding:12px 14px; border:1.5px solid var(--u-line); border-radius:12px; font-size:.95rem; color:var(--u-ink2); cursor:pointer; transition:border-color .16s,background .16s; min-height:48px; }
    .u-opt-box:hover{ border-color:rgba(124,58,237,.45); background:var(--u-tint); }
    .u-opt-box:has(input:checked){ border-color:var(--u-violet); background:var(--u-tint); font-weight:700; }
    .u-opt-box input{ width:20px; height:20px; accent-color:var(--u-violet); flex-shrink:0; }

    /* ── Severity-Slider ── */
    .u-sev{ display:flex; align-items:center; gap:18px; }
    .u-sev input[type=range]{ flex:1; height:8px; -webkit-appearance:none; appearance:none; border-radius:99px; background:linear-gradient(90deg,var(--u-cyan),var(--u-violet)); }
    .u-sev input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid var(--u-violet); box-shadow:0 4px 12px rgba(124,58,237,.4); cursor:pointer; }
    .u-sev input[type=range]::-moz-range-thumb{ width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid var(--u-violet); cursor:pointer; }
    .u-sev-val{ flex-shrink:0; width:64px; text-align:center; }
    .u-sev-val b{ font-family:var(--u-display); font-weight:700; font-size:1.9rem; color:var(--u-violet); line-height:1; font-variant-numeric:tabular-nums; }
    .u-sev-val span{ display:block; font-size:.72rem; color:var(--u-muted); font-weight:700; margin-top:2px; }

    /* ── Progress ── */
    .u-progress{ position:sticky; top:0; z-index:30; height:5px; background:transparent; }
    .u-progress-bar{ height:100%; width:0; background:var(--u-grad); box-shadow:0 1px 8px rgba(124,58,237,.5); transition:width .2s ease; }

    /* ── Trust / Notes ── */
    .u-note{ display:flex; gap:.7rem; align-items:flex-start; padding:16px 20px; border-radius:16px; background:var(--u-grad-soft); border:1px solid rgba(124,58,237,.18); color:var(--u-ink2); font-size:.94rem; line-height:1.55; }
    .u-note i{ color:var(--u-violet); margin-top:2px; }
    .u-errs{ background:#fff5f5; border:1px solid #fecaca; color:#b91c1c; border-radius:14px; padding:16px 18px; margin-bottom:20px; font-weight:600; }
    .u-errs ul{ margin:6px 0 0; padding-left:18px; font-weight:500; }
    .u-invalid,.u-invalid:focus{ border-color:#dc2626 !important; box-shadow:0 0 0 4px rgba(220,38,38,.14) !important; }
    .u-field-err{ display:flex; gap:.5rem; align-items:center; color:#dc2626; font-size:.86rem; font-weight:700; margin:10px 0 0; }
    .u-field-err i{ flex-shrink:0; }
    .u-q.u-invalid-q{ border-color:#dc2626 !important; box-shadow:0 0 0 4px rgba(220,38,38,.1); }
    .u-flash{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60; max-width:calc(100% - 28px);
        background:var(--u-ink); color:#fff; padding:13px 20px; border-radius:14px; font-weight:700; font-size:.94rem;
        box-shadow:0 20px 50px -18px rgba(0,0,0,.5); display:flex; gap:.6rem; align-items:center; animation:uToast .3s ease; }
    .u-flash i{ color:#fca5a5; }
    @keyframes uToast{ from{ opacity:0; transform:translate(-50%,12px); } to{ opacity:1; transform:translate(-50%,0); } }

    /* ── Reveal-Animation ── */
    .u-reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1); }
    .u-reveal.is-in{ opacity:1; transform:none; }

    /* ── Keyframes ── */
    @keyframes uSpin{ to{ transform:rotate(360deg); } }
    @keyframes uPulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(124,58,237,.15); } 50%{ box-shadow:0 0 0 7px rgba(124,58,237,0); } }
    @keyframes uShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
    @keyframes uBlip{ 0%{ box-shadow:0 0 0 0 rgba(6,182,212,.55); } 70%{ box-shadow:0 0 0 16px rgba(6,182,212,0); } 100%{ box-shadow:0 0 0 0 rgba(6,182,212,0); } }
    @keyframes uFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

    @media (max-width:760px){
        .u-stat-div{ display:none; }
        .u-btn{ width:100%; }
        .u-cta-row{ display:flex; flex-direction:column; }
    }
    @media (prefers-reduced-motion:reduce){
        .u-radar-sweep::before,.u-blip,.u-btn-primary:hover{ animation:none !important; }
        .u-reveal{ opacity:1 !important; transform:none !important; transition:none; }
        .u-eyebrow .u-dot{ animation:none; }
    }
</style>
<script>
(function(){
    var rm = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    // Scroll-Reveal
    function reveal(){
        var els = document.querySelectorAll('.u-reveal:not(.is-in)');
        if (rm || !('IntersectionObserver' in window)){ els.forEach(function(e){ e.classList.add('is-in'); }); return; }
        var io = new IntersectionObserver(function(es){
            es.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add('is-in'); io.unobserve(en.target); } });
        }, { threshold:.14 });
        els.forEach(function(e){ io.observe(e); });
    }

    // Count-up (data-countup="1234")
    function countUp(){
        document.querySelectorAll('[data-countup]').forEach(function(el){
            var target = parseInt(el.getAttribute('data-countup'),10) || 0;
            if (rm || target <= 0){ el.textContent = target.toLocaleString('de-DE'); return; }
            var start = null, dur = 1400;
            function step(ts){ if(!start) start=ts; var p=Math.min((ts-start)/dur,1);
                el.textContent = Math.floor((1-Math.pow(1-p,3))*target).toLocaleString('de-DE');
                if(p<1) requestAnimationFrame(step); }
            requestAnimationFrame(step);
        });
    }

    // Form-Progress (Anteil beantworteter Pflicht-/Felder)
    function progress(){
        var form = document.querySelector('[data-progress-form]');
        var bar = document.querySelector('[data-progress-bar]');
        if(!form || !bar) return;
        function calc(){
            var fields = form.querySelectorAll('input[type=text],textarea,select,input[type=range]');
            var groups = {}, total = 0, done = 0;
            form.querySelectorAll('input[type=checkbox][name$="[]"]').forEach(function(c){ groups[c.name]=groups[c.name]||false; if(c.checked) groups[c.name]=true; });
            fields.forEach(function(f){ if(f.name==='website'||f.type==='hidden') return; total++; if(f.type==='range'){ done++; } else if(f.value && f.value.trim()!==''){ done++; } });
            Object.keys(groups).forEach(function(k){ total++; if(groups[k]) done++; });
            var pct = total? Math.round(done/total*100):0;
            bar.style.width = pct + '%';
        }
        form.addEventListener('input', calc); form.addEventListener('change', calc); calc();
    }

    // „Sonstiges"-Textfeld: erscheint, wenn die Option „andere"/„other" gewählt ist.
    function otherFields(){
        var OTHER = ['andere','other'];
        function wrap(key){ return document.querySelector('[data-other-wrap="'+key+'"]'); }
        function show(w, on){ if(!w) return; w.style.display = on ? '' : 'none';
            var inp = w.querySelector('input'); if(inp){ if(on){ inp.disabled=false; } else { inp.disabled=true; } } }
        document.querySelectorAll('[data-other-trigger]').forEach(function(cb){
            var w = wrap(cb.getAttribute('data-other-trigger'));
            function upd(){ show(w, cb.checked); } cb.addEventListener('change', upd); upd();
        });
        document.querySelectorAll('[data-other-select]').forEach(function(sel){
            var w = wrap(sel.getAttribute('data-other-select'));
            function upd(){ show(w, OTHER.indexOf(sel.value) >= 0); } sel.addEventListener('change', upd); upd();
        });
    }

    // Submit-Guard: fehlt eine Pflichtangabe, blockiert der Browser das Absenden still —
    // am Handy übersieht man den nativen Hinweis. Hier: klar zum ersten fehlenden Feld
    // scrollen, markieren, kurze Meldung zeigen. So passiert IMMER sichtbar etwas.
    // KEIN natives required mehr → das Formular sendet IMMER (auch am Handy / in In-App-Browsern
    // wie der Google-App). Die Prüfung macht der Server; die Seite kommt mit markierten Fehlern
    // zurück. Hier NUR „Wird gesendet …"-Feedback — niemals preventDefault, also kann nichts das
    // Absenden blockieren. (setTimeout: erst NACH dem Start des Absendens, damit es nie abbricht.)
    function submitFeedback(){
        document.querySelectorAll('form').forEach(function(form){
            if (form.hasAttribute('novalidate')) return;
            if (!form.querySelector('.u-input,.u-select,.u-textarea,.u-opt-box')) return;
            form.addEventListener('submit', function(){
                var btn = form.querySelector('button[type=submit]');
                if (!btn || btn.dataset.sending) return;
                btn.dataset.sending = '1';
                var send = document.documentElement.lang === 'en' ? 'Sending …' : 'Wird gesendet …';
                setTimeout(function(){ btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> ' + send; btn.style.opacity = '.75'; btn.style.pointerEvents = 'none'; }, 0);
            });
        });
    }
    // Nach der Server-Validierung: zum ersten Fehler scrollen, damit man sofort sieht, was fehlt.
    function errorFocus(){
        var target = document.querySelector('.u-errs') || document.querySelector('.u-invalid');
        if (!target) return;
        try { target.scrollIntoView({ behavior: rm ? 'auto' : 'smooth', block:'center' }); } catch(_){}
        var field = document.querySelector('.u-invalid'); if (field){ try { field.focus({ preventScroll:true }); } catch(_){} }
    }

    // bfcache: kommt die Seite aus dem Vor-/Zurück-Cache (mobil häufig), kann das CSRF-Token
    // veraltet sein → frisch laden, damit das Absenden nicht an „Page Expired" (419) scheitert.
    window.addEventListener('pageshow', function(e){ if (e.persisted) window.location.reload(); });

    function init(){ reveal(); countUp(); progress(); otherFields(); submitFeedback(); errorFocus();
        // Severity live-Label
        document.querySelectorAll('[data-sev]').forEach(function(r){
            var out = document.getElementById(r.getAttribute('data-sev'));
            var lbl = document.getElementById(r.getAttribute('data-sev')+'_l');
            var labels = (r.getAttribute('data-sev-labels')||'').split('|');
            function upd(){ var v=+r.value; if(out) out.textContent=v; if(lbl&&labels.length){ lbl.textContent = labels[Math.min(Math.floor(v/ (10/(labels.length))),labels.length-1)]||''; } }
            r.addEventListener('input',upd); upd();
        });
    }
    if(document.readyState!=='loading') init(); else document.addEventListener('DOMContentLoaded',init);
})();
</script>
@endonce