@extends('layouts.app')

@section('title', 'Beta Tester werden – kotsch.tech')
@section('meta_description', 'Werde Beta Tester für Apps von Arthur Kotsch. Frühzugang, direkter Einfluss auf die Entwicklung — kostenlos & unverbindlich.')
@section('robots', 'index,follow')

@section('content')
@php
    $testerCount = \App\Models\Tester::where('is_active', true)->count();
    $appCount    = \App\Models\TestApp::where('status', '!=', 'closed')->count();
@endphp

{{-- ══ 1. HERO ═══════════════════════════════════════════════════════════ --}}
<header class="hub-hero tp-hero">
    <div class="container reveal active">
        <span class="tp-live-badge">
            <span class="tp-dot"></span>
            {{ $testerCount }} aktive Tester
        </span>
        <h1>Beta testen.<br><span class="tp-h1-accent">Vor allen anderen.</span></h1>
        <p class="lead" style="max-width:600px;margin:0 auto;">
            Werde Teil des Tester-Programms von Arthur Kotsch — erhalte neue Apps als Erster, gestalte direkt mit und gib Feedback, das zählt.
        </p>
        <ul class="tp-trust-chips">
            <li><i class="fas fa-check-circle"></i> Komplett kostenlos</li>
            <li><i class="fas fa-check-circle"></i> Unverbindlich</li>
            <li><i class="fas fa-check-circle"></i> Direkt auf dein Gerät</li>
        </ul>
        <div class="tp-hero-ctas">
            <a href="#tester-form"     class="tp-btn-primary"><i class="fas fa-paper-plane"></i> Jetzt bewerben</a>
            <a href="#tester-ablauf"   class="tp-btn-ghost">So funktioniert's <i class="fas fa-arrow-down"></i></a>
        </div>
    </div>
</header>

{{-- ══ 2. STATS-LEISTE ══════════════════════════════════════════════════ --}}
<div class="tp-stats-bar">
    <div class="container tp-stats-inner">
        <div class="tp-stat">
            <strong>{{ $testerCount ?: '0' }}</strong>
            <span>Tester aktiv</span>
        </div>
        <span class="tp-stat-sep"></span>
        <div class="tp-stat">
            <strong>{{ $appCount ?: '—' }}</strong>
            <span>Tests laufen gerade</span>
        </div>
        <span class="tp-stat-sep"></span>
        <div class="tp-stat">
            <strong>3</strong>
            <span>Plattformen</span>
        </div>
        <span class="tp-stat-sep"></span>
        <div class="tp-stat">
            <strong>0 €</strong>
            <span>Kostet dich</span>
        </div>
    </div>
</div>

{{-- ══ 3. ABLAUF (3 SCHRITTE) ═══════════════════════════════════════════ --}}
<section id="tester-ablauf" class="hub-section tp-ablauf-section">
    <div class="container">
        <div class="tp-section-head">
            <span class="hub-kicker"><i class="fas fa-route"></i> So läuft's ab</span>
            <h2 class="tp-section-h2">In drei Schritten zum Tester.</h2>
            <p class="tp-section-lead">Einfach registrieren — den Rest übernehme ich.</p>
        </div>
        <div class="tp-steps">
            <div class="tp-step">
                <div class="tp-step-num">1</div>
                <div class="tp-step-icon"><i class="fas fa-user-plus"></i></div>
                <h3>Bewerben</h3>
                <p>Fülle das kurze Formular aus: Name, E-Mail und welche Plattform du nutzt. Fertig — dauert unter 60 Sekunden.</p>
            </div>
            <div class="tp-step-arrow"><i class="fas fa-arrow-right"></i></div>
            <div class="tp-step">
                <div class="tp-step-num">2</div>
                <div class="tp-step-icon"><i class="fas fa-envelope-open-text"></i></div>
                <h3>Einladung erhalten</h3>
                <p>Sobald ein neuer Test startet, bekommst du per Mail einen direkten Zugangslink — entweder via TestFlight oder Play Store.</p>
            </div>
            <div class="tp-step-arrow"><i class="fas fa-arrow-right"></i></div>
            <div class="tp-step">
                <div class="tp-step-num">3</div>
                <div class="tp-step-icon"><i class="fas fa-comments"></i></div>
                <h3>Testen &amp; Feedback</h3>
                <p>Nutze die App ganz normal. Wenn dir etwas auffällt — ein Bug, ein Verbesserungsvorschlag — meldest du dich kurz per Mail.</p>
            </div>
        </div>
    </div>
</section>

{{-- ══ 4. AKTUELLE TEST-APPS ════════════════════════════════════════════ --}}
<section id="tester-apps" class="tp-apps-section">
    <div class="container">
        <div class="tp-section-head">
            <span class="hub-kicker"><i class="fas fa-flask"></i> Aktuelle Tests</span>
            <h2 class="tp-section-h2">Was gerade getestet wird.</h2>
            <p class="tp-section-lead">Diese Apps sind aktuell in der Testphase. Registrierte Tester erhalten direkt Zugang.</p>
        </div>

        @if($apps->count())
        <div class="tp-app-grid">
            @foreach($apps as $app)
            <div class="tp-app-card {{ $app->status === 'active' ? 'is-active' : '' }}">
                @if($app->status === 'active')
                <div class="tp-app-live-badge"><span class="tp-dot-sm"></span> Läuft</div>
                @elseif($app->status === 'beta')
                <div class="tp-app-live-badge tp-app-live-badge--beta">Beta</div>
                @endif

                <div class="tp-app-head">
                    <div class="tp-app-icon">{{ $app->icon }}</div>
                    <div class="tp-app-meta">
                        <h3 class="tp-app-name">{{ $app->name }}</h3>
                        <div class="tp-app-tags">
                            @if($app->platform === 'ios')
                            <span class="tp-tag tp-tag--ios"><i class="fab fa-apple"></i> iOS</span>
                            @elseif($app->platform === 'android')
                            <span class="tp-tag tp-tag--android"><i class="fab fa-android"></i> Android</span>
                            @elseif($app->platform === 'windows')
                            <span class="tp-tag tp-tag--win"><i class="fab fa-windows"></i> Windows</span>
                            @endif
                            @if($app->version)
                            <span class="tp-tag">v{{ $app->version }}</span>
                            @endif
                        </div>
                    </div>
                </div>

                @if($app->description)
                <p class="tp-app-desc">{{ $app->description }}</p>
                @endif

                <div class="tp-app-foot">
                    @if($app->testflight_link)
                    <a href="{{ $app->testflight_link }}" target="_blank" rel="noopener" class="tp-app-cta">
                        <i class="fab fa-apple"></i> TestFlight beitreten
                    </a>
                    @elseif($app->play_store_link)
                    <a href="{{ $app->play_store_link }}" target="_blank" rel="noopener" class="tp-app-cta">
                        <i class="fab fa-google-play"></i> Play Store Beta
                    </a>
                    @else
                    <span class="tp-app-cta tp-app-cta--locked"><i class="fas fa-lock"></i> Nur für registrierte Tester</span>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div class="tp-empty-state">
            <div class="tp-empty-icon"><i class="fas fa-hourglass-half"></i></div>
            <h3>Aktuell kein aktiver Test</h3>
            <p>Meld dich trotzdem an — du wirst als Erster benachrichtigt, sobald ein Test startet.</p>
            <a href="#tester-form" class="tp-btn-primary" style="margin-top:20px;display:inline-flex;">
                <i class="fas fa-bell"></i> Auf dem Laufenden bleiben
            </a>
        </div>
        @endif
    </div>
</section>

{{-- ══ 5. VORTEILE ══════════════════════════════════════════════════════ --}}
<section id="tester-vorteile" class="hub-section tp-vorteile-section">
    <div class="container">
        <div class="tp-section-head">
            <span class="hub-kicker"><i class="fas fa-star"></i> Vorteile</span>
            <h2 class="tp-section-h2">Warum Beta Tester werden?</h2>
        </div>
        <div class="tp-vorteile-grid">
            <div class="tp-vorteil">
                <div class="tp-vorteil-icon-wrap">
                    <i class="fas fa-rocket"></i>
                </div>
                <div>
                    <h3>Exklusiver Frühzugang</h3>
                    <p>Du erhältst neue Apps direkt auf dein Gerät — Wochen vor dem öffentlichen Release. Kein Warten, kein App Store.</p>
                </div>
            </div>
            <div class="tp-vorteil">
                <div class="tp-vorteil-icon-wrap">
                    <i class="fas fa-comment-dots"></i>
                </div>
                <div>
                    <h3>Dein Feedback formt das Produkt</h3>
                    <p>Deine Rückmeldungen fließen direkt in die Entwicklung ein. Ein Bug-Report von dir kann die Erfahrung für tausende User verbessern.</p>
                </div>
            </div>
            <div class="tp-vorteil">
                <div class="tp-vorteil-icon-wrap">
                    <i class="fas fa-shield-check" style="font-size:1.5rem;"></i>
                </div>
                <div>
                    <h3>Keine Verpflichtung</h3>
                    <p>Du wirst nur kontaktiert, wenn ein Test für deine Plattform startet. Kein Spam, keine AGB, jederzeit abmeldbar.</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ══ 6. FAQ ═══════════════════════════════════════════════════════════ --}}
<section id="tester-faq" style="padding:80px 5% 96px;background:#f8fafc;border-top:1px solid #e2e8f0;">
    <div class="container" style="max-width:800px;">
        <div class="tp-section-head">
            <span class="hub-kicker"><i class="fas fa-question-circle"></i> FAQ</span>
            <h2 class="tp-section-h2">Häufige Fragen.</h2>
        </div>
        <div class="tp-faq-list">
            <details class="tp-faq-item">
                <summary>
                    <span class="tp-faq-q">Wie funktioniert das Beta-Programm?</span>
                    <span class="tp-faq-icon"></span>
                </summary>
                <p>Sobald eine neue App in die Testphase geht, erhalten alle Tester der jeweiligen Plattform eine E-Mail mit Zugangslink — via TestFlight (iOS/Mac) oder den Play Store (Android). Du installierst, nutzt und gibst kurz Feedback.</p>
            </details>
            <details class="tp-faq-item">
                <summary>
                    <span class="tp-faq-q">Bekomme ich bei jedem Test eine Mail?</span>
                    <span class="tp-faq-icon"></span>
                </summary>
                <p>Nur wenn ein Test für deine registrierte Plattform startet. iOS-Tester bekommen keine Android-Mails. So bleibt's relevant — ohne Spam.</p>
            </details>
            <details class="tp-faq-item">
                <summary>
                    <span class="tp-faq-q">Brauche ich technische Kenntnisse?</span>
                    <span class="tp-faq-icon"></span>
                </summary>
                <p>Nein. Du brauchst nur ein kompatibles Gerät und etwas Zeit. Beta-Tests sind Alltagstests — kein Coding, kein Fachwissen nötig. Je normaler du die App nutzt, desto wertvoller ist dein Feedback.</p>
            </details>
            <details class="tp-faq-item">
                <summary>
                    <span class="tp-faq-q">Was passiert mit meinen Daten?</span>
                    <span class="tp-faq-icon"></span>
                </summary>
                <p>Name und E-Mail werden ausschließlich für die Kommunikation im Beta-Programm genutzt — keine Weitergabe, kein Marketing. Details in der <a href="/datenschutz">Datenschutzerklärung</a>.</p>
            </details>
            <details class="tp-faq-item">
                <summary>
                    <span class="tp-faq-q">Kann ich mich wieder abmelden?</span>
                    <span class="tp-faq-icon"></span>
                </summary>
                <p>Ja, jederzeit. Eine kurze Mail mit dem Betreff „Abmeldung Tester" genügt — du wirst umgehend entfernt.</p>
            </details>
            <details class="tp-faq-item">
                <summary>
                    <span class="tp-faq-q">Bekomme ich die App dauerhaft kostenlos?</span>
                    <span class="tp-faq-icon"></span>
                </summary>
                <p>Beta-Tester erhalten die App kostenlos während der Testphase. Nach Release gelten die regulären App-Store-Preise. Sonderkonditionen werden, wenn vorhanden, per Mail kommuniziert.</p>
            </details>
        </div>
    </div>
</section>

{{-- ══ 7. REGISTRIERUNGSFORMULAR ════════════════════════════════════════ --}}
<section id="tester-form" class="tp-form-section">
    <div class="container" style="max-width:680px;">

        <div class="tp-section-head tp-section-head--light">
            <span class="hub-kicker" style="background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.25);">
                <i class="fas fa-user-plus"></i> Bewerbung
            </span>
            <h2 class="tp-section-h2" style="color:#fff;">Als Tester registrieren.</h2>
            <p class="tp-section-lead" style="color:rgba(255,255,255,.75);">
                Kostenlos &amp; unverbindlich — du wirst nur kontaktiert, wenn ein Test für deine Plattform startet.
            </p>
        </div>

        @if(session('success'))
        <div class="tp-alert tp-alert--ok">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('success') }}</span>
        </div>
        @endif

        @if($errors->any())
        <div class="tp-alert tp-alert--err">
            <i class="fas fa-exclamation-circle"></i>
            <div>
                <strong>Bitte korrigiere folgende Fehler:</strong>
                <ul>@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            </div>
        </div>
        @endif

        <div class="tp-form-card">
            <form method="POST" action="{{ rtrim(config('app.url'), '/') }}/tester/bewerben" novalidate>
                @csrf
                <div class="tp-form-row">
                    <div class="tp-field">
                        <label class="tp-label" for="tp-name">Name</label>
                        <input type="text" id="tp-name" name="name"
                            class="tp-input{{ $errors->has('name') ? ' is-err' : '' }}"
                            value="{{ old('name') }}" placeholder="Max Mustermann"
                            required autocomplete="name">
                        @error('name')<p class="tp-field-err">{{ $message }}</p>@enderror
                    </div>
                    <div class="tp-field">
                        <label class="tp-label" for="tp-email">E-Mail-Adresse</label>
                        <input type="email" id="tp-email" name="email"
                            class="tp-input{{ $errors->has('email') ? ' is-err' : '' }}"
                            value="{{ old('email') }}" placeholder="max@beispiel.de"
                            required autocomplete="email">
                        @error('email')<p class="tp-field-err">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="tp-field">
                    <label class="tp-label">
                        Plattform(en)
                        <span class="tp-label-hint">Mehrfachauswahl möglich</span>
                    </label>
                    <div class="tp-platform-group">
                        <label class="tp-platform-opt {{ in_array('ios', old('platforms', [])) ? 'is-checked' : '' }}">
                            <input type="checkbox" name="platforms[]" value="ios" {{ in_array('ios', old('platforms', [])) ? 'checked' : '' }}>
                            <span class="tp-plat-inner">
                                <i class="fab fa-apple tp-plat-ico"></i>
                                <span class="tp-plat-name">iOS / iPhone</span>
                                <span class="tp-plat-sub">iPhone & iPad</span>
                            </span>
                        </label>
                        <label class="tp-platform-opt {{ in_array('android', old('platforms', [])) ? 'is-checked' : '' }}">
                            <input type="checkbox" name="platforms[]" value="android" {{ in_array('android', old('platforms', [])) ? 'checked' : '' }}>
                            <span class="tp-plat-inner">
                                <i class="fab fa-android tp-plat-ico tp-plat-ico--android"></i>
                                <span class="tp-plat-name">Android</span>
                                <span class="tp-plat-sub">Samsung, Pixel …</span>
                            </span>
                        </label>
                        <label class="tp-platform-opt {{ in_array('windows', old('platforms', [])) ? 'is-checked' : '' }}">
                            <input type="checkbox" name="platforms[]" value="windows" {{ in_array('windows', old('platforms', [])) ? 'checked' : '' }}>
                            <span class="tp-plat-inner">
                                <i class="fab fa-windows tp-plat-ico tp-plat-ico--win"></i>
                                <span class="tp-plat-name">Windows</span>
                                <span class="tp-plat-sub">Win 10 / 11</span>
                            </span>
                        </label>
                    </div>
                    @error('platforms')<p class="tp-field-err">{{ $message }}</p>@enderror
                </div>

                <div class="tp-form-row">
                    <div class="tp-field">
                        <label class="tp-label" for="tp-device">
                            Gerät
                            <span class="tp-label-hint">optional</span>
                        </label>
                        <input type="text" id="tp-device" name="device_model"
                            class="tp-input"
                            value="{{ old('device_model') }}"
                            placeholder="z. B. iPhone 15 Pro">
                    </div>
                    <div class="tp-field">
                        <label class="tp-label" for="tp-notes">
                            Anmerkung
                            <span class="tp-label-hint">optional</span>
                        </label>
                        <input type="text" id="tp-notes" name="notes"
                            class="tp-input"
                            value="{{ old('notes') }}"
                            placeholder="Erfahrungen, Interessen …">
                    </div>
                </div>

                <button type="submit" class="tp-submit-btn">
                    <i class="fas fa-paper-plane"></i>
                    Jetzt als Beta Tester registrieren
                </button>
                <p class="tp-form-hint">
                    <i class="fas fa-lock" style="font-size:.7rem;"></i>
                    Deine Daten bleiben privat — kein Newsletter, kein Spam. Jederzeit abmeldbar.
                </p>
            </form>
        </div>
    </div>
</section>

{{-- ══ STYLES ════════════════════════════════════════════════════════════ --}}
<style>

/* ── CSS-Variablen ── */
:root {
    --tp-primary: var(--primary);
    --tp-primary-soft: var(--primary-soft);
    --tp-primary-glow: var(--primary-glow);
}

/* ══ HERO ════════════════════════════════════════════════════════════════ */
.tp-hero .container { position: relative; z-index: 2; }

.tp-live-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 999px;
    background: #f0f9ff; border: 1px solid #bae6fd;
    color: #0369a1; font-weight: 800; font-size: .78rem;
    margin-bottom: 20px;
}
.tp-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #2563eb; flex-shrink: 0;
    animation: tpPulse 2s ease-out infinite;
}
@keyframes tpPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(37,99,235,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
.tp-h1-accent { color: var(--tp-primary); }

.tp-trust-chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    list-style: none; margin: 24px 0 0; padding: 0;
}
.tp-trust-chips li {
    display: flex; align-items: center; gap: 6px;
    font-size: .83rem; font-weight: 700; color: #475569;
}
.tp-trust-chips li i { color: #22c55e; font-size: .8rem; }

.tp-hero-ctas {
    display: flex; gap: 12px; flex-wrap: wrap;
    justify-content: center; margin-top: 32px;
}
.tp-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 15px 32px; border-radius: 14px; font-weight: 800; font-size: .97rem;
    background: var(--tp-primary); color: #fff !important; text-decoration: none !important;
    box-shadow: 0 4px 20px var(--tp-primary-glow); transition: transform .2s, box-shadow .2s;
    min-height: 52px; -webkit-tap-highlight-color: transparent;
}
.tp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--tp-primary-glow); }
.tp-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 14px; font-weight: 700; font-size: .92rem;
    border: 2px solid #e2e8f0; background: #fff; color: #475569 !important; text-decoration: none !important;
    transition: border-color .2s, color .2s; min-height: 52px;
}
.tp-btn-ghost:hover { border-color: var(--tp-primary); color: var(--tp-primary) !important; }

/* ══ STATS ═══════════════════════════════════════════════════════════════ */
.tp-stats-bar { background: #fff; border-bottom: 1px solid #e2e8f0; }
.tp-stats-inner {
    display: flex; align-items: stretch; justify-content: center;
    max-width: 880px;
}
.tp-stat { flex: 1; padding: 22px 16px; text-align: center; }
.tp-stat strong { display: block; font-size: 1.85rem; font-weight: 900; color: #0f172a; letter-spacing: -.05em; line-height: 1; margin-bottom: 5px; }
.tp-stat span { font-size: .7rem; color: #94a3b8; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tp-stat-sep { width: 1px; background: #e2e8f0; align-self: stretch; margin: 14px 0; flex-shrink: 0; }

/* ══ SECTION HELPERS ══════════════════════════════════════════════════════ */
.tp-section-head { text-align: center; margin-bottom: 48px; }
.tp-section-head .hub-kicker { margin-bottom: 14px; }
.tp-section-h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -.045em; color: #0f172a; margin: 0 0 10px; line-height: 1.1; }
.tp-section-lead { color: #64748b; font-size: 1.03rem; line-height: 1.65; max-width: 520px; margin: 0 auto; }

/* ══ ABLAUF / SCHRITTE ════════════════════════════════════════════════════ */
.tp-ablauf-section { background: #fff; }
.tp-steps {
    display: flex; align-items: flex-start; justify-content: center;
    gap: 0; max-width: 940px; margin: 0 auto;
}
.tp-step {
    flex: 1; text-align: center; padding: 36px 28px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 24px;
    position: relative; transition: box-shadow .2s, transform .2s;
}
.tp-step:hover { box-shadow: 0 8px 32px rgba(0,0,0,.09); transform: translateY(-4px); background: #fff; }
.tp-step-num {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--tp-primary); color: #fff;
    font-size: .75rem; font-weight: 900; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px var(--tp-primary-glow);
}
.tp-step-icon {
    width: 60px; height: 60px; border-radius: 18px;
    background: var(--tp-primary-soft); color: var(--tp-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin: 0 auto 18px;
}
.tp-step h3 { font-size: 1.05rem; font-weight: 900; color: #0f172a; margin: 0 0 10px; }
.tp-step p { font-size: .88rem; color: #64748b; line-height: 1.65; margin: 0; }
.tp-step-arrow {
    flex: 0 0 44px; display: flex; align-items: center; justify-content: center;
    color: #cbd5e1; font-size: 1.1rem; margin-top: 60px;
}

/* ══ APPS ═════════════════════════════════════════════════════════════════ */
.tp-apps-section { padding: 82px 5% 96px; background: #f5f5f7; }
.tp-app-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px; max-width: 1200px; margin: 0 auto;
}
.tp-app-card {
    background: #fff; border: 1px solid #e9e9ee; border-radius: 24px;
    padding: 24px; display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 24px 60px -46px rgba(15,23,42,.28);
    transition: box-shadow .2s, transform .2s; position: relative;
}
.tp-app-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,.11); transform: translateY(-4px); }
.tp-app-live-badge {
    position: absolute; top: 18px; right: 18px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    background: #dcfce7; color: #15803d; font-size: .7rem; font-weight: 800;
}
.tp-app-live-badge--beta { background: #fef9c3; color: #a16207; }
.tp-dot-sm {
    width: 6px; height: 6px; border-radius: 50%; background: #16a34a; flex-shrink: 0;
    animation: tpPulse 2s ease-out infinite;
}
.tp-app-head { display: flex; align-items: center; gap: 14px; }
.tp-app-icon {
    width: 58px; height: 58px; border-radius: 16px; flex-shrink: 0;
    background: #f5f5f7; border: 1px solid #e9e9ee;
    display: flex; align-items: center; justify-content: center; font-size: 1.85rem;
}
.tp-app-meta { min-width: 0; }
.tp-app-name { font-size: 1.05rem; font-weight: 900; color: #1d1d1f; margin: 0 0 7px; letter-spacing: -.3px; }
.tp-app-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tp-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #475569; }
.tp-tag--ios     { background: rgba(10,132,255,.1);  color: #0A84FF; }
.tp-tag--android { background: rgba(25,195,125,.12); color: #16a34a; }
.tp-tag--win     { background: rgba(27,108,242,.1);  color: #1B6CF2; }
.tp-app-desc { font-size: .88rem; color: #6e6e73; line-height: 1.65; margin: 0; }
.tp-app-foot { margin-top: auto; }
.tp-app-cta {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 18px; border-radius: 999px;
    background: var(--tp-primary); color: #fff !important; font-weight: 800; font-size: .84rem;
    text-decoration: none !important; transition: transform .2s, box-shadow .2s;
    box-shadow: 0 8px 18px -8px rgba(37,99,235,.55); min-height: 44px;
}
.tp-app-cta:hover { transform: translateY(-2px); }
.tp-app-cta--locked {
    background: #f1f5f9; color: #94a3b8 !important;
    box-shadow: none; cursor: default;
}
.tp-empty-state {
    text-align: center; padding: 72px 24px; max-width: 440px; margin: 0 auto;
    background: #fff; border: 2px dashed #e2e8f0; border-radius: 28px;
}
.tp-empty-icon { font-size: 2.5rem; color: #cbd5e1; margin-bottom: 16px; }
.tp-empty-state h3 { font-size: 1.15rem; font-weight: 900; color: #0f172a; margin: 0 0 8px; }
.tp-empty-state p { color: #64748b; font-size: .9rem; margin: 0; line-height: 1.65; }

/* ══ VORTEILE ═════════════════════════════════════════════════════════════ */
.tp-vorteile-section { background: #fff; }
.tp-vorteile-grid { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 0 auto; }
.tp-vorteil {
    display: flex; align-items: flex-start; gap: 20px;
    padding: 26px 28px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 20px;
    transition: box-shadow .2s, background .2s;
}
.tp-vorteil:hover { background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.tp-vorteil-icon-wrap {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    background: var(--tp-primary-soft); color: var(--tp-primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.tp-vorteil h3 { font-size: 1rem; font-weight: 900; color: #0f172a; margin: 0 0 6px; }
.tp-vorteil p { font-size: .88rem; color: #64748b; line-height: 1.65; margin: 0; }

/* ══ FAQ ══════════════════════════════════════════════════════════════════ */
.tp-faq-list { display: flex; flex-direction: column; gap: 10px; }
.tp-faq-item {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;
    transition: box-shadow .2s;
}
.tp-faq-item:hover { box-shadow: 0 4px 18px rgba(0,0,0,.07); }
.tp-faq-item summary {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 18px 22px; cursor: pointer; list-style: none; min-height: 58px;
    -webkit-tap-highlight-color: transparent;
}
.tp-faq-item summary::-webkit-details-marker { display: none; }
.tp-faq-q { font-size: .97rem; font-weight: 700; color: #0f172a; flex: 1; }
.tp-faq-icon {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: var(--tp-primary-soft); color: var(--tp-primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    font-weight: 300; line-height: 1;
}
.tp-faq-icon::after { content: '+'; }
.tp-faq-item[open] .tp-faq-icon { background: var(--tp-primary); color: #fff; }
.tp-faq-item[open] .tp-faq-icon::after { content: '−'; }
.tp-faq-item p {
    margin: 0; padding: 2px 22px 20px;
    font-size: .92rem; color: #475569; line-height: 1.72;
    border-top: 1px solid #f1f5f9; padding-top: 14px;
}
.tp-faq-item a { color: var(--tp-primary); font-weight: 700; }

/* ══ FORMULAR ═════════════════════════════════════════════════════════════ */
.tp-form-section {
    padding: 88px 5% 100px;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #1d4ed8 100%);
    position: relative; overflow: hidden;
}
.tp-form-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
}
.tp-form-section .container { position: relative; z-index: 1; }
.tp-section-head--light .tp-section-h2 { color: #fff; }

.tp-alert {
    padding: 14px 18px; border-radius: 12px; font-size: .9rem; font-weight: 600;
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px;
}
.tp-alert--ok  { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.tp-alert--err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.tp-alert ul { margin: 4px 0 0; padding-left: 16px; }

.tp-form-card {
    background: #fff; border-radius: 24px; padding: 40px;
    box-shadow: 0 32px 80px rgba(0,0,0,.25);
}
.tp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tp-field { margin-bottom: 20px; }
.tp-field:last-child { margin-bottom: 0; }
.tp-label { display: flex; align-items: center; gap: 6px; font-size: .83rem; font-weight: 700; color: #374151; margin-bottom: 8px; }
.tp-label-hint { font-weight: 500; color: #94a3b8; font-size: .78rem; }
.tp-input {
    width: 100%; height: 50px; padding: 0 15px; font-size: 1rem; /* 16px: kein iOS-Zoom */
    border: 1.5px solid #e2e8f0; border-radius: 12px;
    background: #f8fafc; color: #0f172a; outline: none; font-family: inherit;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box; -webkit-appearance: none;
}
.tp-input:focus { border-color: var(--tp-primary); box-shadow: 0 0 0 3px var(--tp-primary-soft); background: #fff; }
.tp-input.is-err { border-color: #ef4444; }
.tp-field-err { font-size: .8rem; color: #ef4444; margin: 5px 0 0; font-weight: 600; }

/* Platform-Auswahl */
.tp-platform-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tp-platform-opt { position: relative; cursor: pointer; display: block; }
.tp-platform-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.tp-plat-inner {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 10px; border: 1.5px solid #e2e8f0; border-radius: 14px;
    background: #f8fafc; text-align: center;
    transition: border-color .2s, background .2s, box-shadow .2s;
    user-select: none; min-height: 88px; justify-content: center;
}
.tp-platform-opt:hover .tp-plat-inner { border-color: #93c5fd; background: #eff6ff; }
.tp-platform-opt input:checked ~ .tp-plat-inner,
.tp-platform-opt.is-checked .tp-plat-inner {
    border-color: var(--tp-primary); background: var(--tp-primary-soft);
    box-shadow: 0 0 0 3px var(--tp-primary-soft);
}
.tp-plat-ico { font-size: 1.6rem; color: #475569; }
.tp-plat-ico--android { color: #16a34a; }
.tp-plat-ico--win     { color: #1B6CF2; }
.tp-platform-opt input:checked ~ .tp-plat-inner .tp-plat-ico { color: var(--tp-primary); }
.tp-plat-name { font-size: .83rem; font-weight: 800; color: #0f172a; line-height: 1.2; }
.tp-plat-sub  { font-size: .7rem; color: #94a3b8; font-weight: 600; line-height: 1; }
.tp-platform-opt input:checked ~ .tp-plat-inner .tp-plat-name { color: var(--tp-primary); }

.tp-submit-btn {
    width: 100%; height: 56px; border: none; border-radius: 14px; cursor: pointer;
    background: var(--tp-primary); color: #fff; font-size: 1rem; font-weight: 800;
    font-family: inherit; margin-top: 12px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    box-shadow: 0 4px 20px var(--tp-primary-glow);
    transition: transform .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent;
}
.tp-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--tp-primary-glow); }
.tp-submit-btn:active { transform: scale(.98); }
.tp-form-hint {
    text-align: center; font-size: .78rem; color: #94a3b8; font-weight: 600;
    margin: 12px 0 0; display: flex; align-items: center; justify-content: center; gap: 5px;
}

/* ══ RESPONSIVE: 768px ════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Stats: 2×2 */
    .tp-stats-inner { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 100%; }
    .tp-stat-sep { display: none; }
    .tp-stat { border-right: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; }
    .tp-stat:nth-child(even) { border-right: none; }
    .tp-stat:nth-last-child(-n+2) { border-bottom: none; }
    .tp-stat strong { font-size: 1.55rem; }

    /* Ablauf: 1 Spalte */
    .tp-steps { flex-direction: column; align-items: center; gap: 16px; }
    .tp-step { width: 100%; max-width: 480px; }
    .tp-step-arrow { transform: rotate(90deg); margin: 0; }

    /* App-Grid: 1 Spalte */
    .tp-app-grid { grid-template-columns: 1fr; }

    /* Vorteile: kompakter */
    .tp-vorteil { padding: 20px 20px; gap: 16px; }
    .tp-vorteil-icon-wrap { width: 46px; height: 46px; font-size: 1.2rem; }

    /* Form: 1-spaltig */
    .tp-form-row { grid-template-columns: 1fr; gap: 0; }
    .tp-form-card { padding: 28px 20px; border-radius: 18px; }
    .tp-form-section { padding: 64px var(--mobile-pad) 80px; }

    /* Platform: gestapelt */
    .tp-platform-group { grid-template-columns: 1fr; }
    .tp-plat-inner { flex-direction: row; justify-content: flex-start; min-height: 58px; padding: 14px 16px; gap: 12px; text-align: left; }
    .tp-plat-ico { font-size: 1.4rem; }

    /* Sektion-Padding */
    .tp-ablauf-section,
    .tp-vorteile-section { padding: 64px var(--mobile-pad) 80px; }
    .tp-apps-section { padding: 64px var(--mobile-pad) 80px; }
    #tester-faq { padding: 64px var(--mobile-pad) 80px; }
}

/* ══ RESPONSIVE: 430px ════════════════════════════════════════════════════ */
@media (max-width: 430px) {
    /* Hero-Buttons gestapelt */
    .tp-hero-ctas { flex-direction: column; gap: 10px; }
    .tp-btn-primary, .tp-btn-ghost { width: 100%; border-radius: 14px; }

    /* Trust-Chips: 1 Spalte */
    .tp-trust-chips { flex-direction: column; align-items: center; gap: 6px; }

    /* Stats noch kompakter */
    .tp-stat strong { font-size: 1.4rem; }
    .tp-stat span { font-size: .63rem; }

    /* App-Cards */
    .tp-app-card { padding: 18px; border-radius: 18px; }
    .tp-app-icon { width: 48px; height: 48px; font-size: 1.55rem; border-radius: 13px; }

    /* Form */
    .tp-form-card { padding: 22px 16px; border-radius: 16px; }
    .tp-submit-btn { height: 54px; font-size: .97rem; }

    /* FAQ */
    .tp-faq-item summary { padding: 15px 16px; }
    .tp-faq-q { font-size: .92rem; }
    .tp-faq-item p { padding: 12px 16px 16px; }
}

</style>

<script>
/* Platform-Checkboxen: is-checked-Klasse für CSS-Targeting toggeln */
document.querySelectorAll('.tp-platform-opt input[type="checkbox"]').forEach(function(cb) {
    cb.addEventListener('change', function() {
        cb.closest('.tp-platform-opt').classList.toggle('is-checked', cb.checked);
    });
});
</script>
@endsection